tldraw/dist-cjs/index.d.ts

A tiny little drawing editor.

import { Atom } from '@tldraw/editor';
import { BaseBoxShapeTool } from '@tldraw/editor';
import { BaseBoxShapeUtil } from '@tldraw/editor';
import { BindingOnChangeOptions } from '@tldraw/editor';
import { BindingOnCreateOptions } from '@tldraw/editor';
import { BindingOnShapeChangeOptions } from '@tldraw/editor';
import { BindingOnShapeIsolateOptions } from '@tldraw/editor';
import { BindingUtil } from '@tldraw/editor';
import { Box } from '@tldraw/editor';
import { Circle2d } from '@tldraw/editor';
import { ComponentType } from 'react';
import { CSSProperties } from 'react';
import { DebugFlag } from '@tldraw/editor';
import { Editor } from '@tldraw/editor';
import { ElbowArrowSnap } from '@tldraw/editor';
import { Extension } from '@tiptap/core';
import { Extensions } from '@tiptap/core';
import { ExtractShapeByProps } from '@tldraw/editor';
import { ForwardRefExoticComponent } from 'react';
import { Geometry2d } from '@tldraw/editor';
import { Geometry2dFilters } from '@tldraw/editor';
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 { JSX } from 'react/jsx-runtime';
import { JSXElementConstructor } from 'react';
import { LANGUAGES } from '@tldraw/editor';
import { MigrationFailureReason } from '@tldraw/editor';
import { MigrationSequence } from '@tldraw/editor';
import { NamedExoticComponent } from 'react';
import { Node as Node_2 } from '@tiptap/pm/model';
import { PerfectDashTerminal } from '@tldraw/editor';
import { Polygon2d } from '@tldraw/editor';
import { Polyline2d } from '@tldraw/editor';
import * as React_2 from 'react';
import { default as React_3 } from 'react';
import { ReactElement } from 'react';
import { ReactNode } from 'react';
import { ReactPortal } from 'react';
import { ReadonlySharedStyleMap } from '@tldraw/editor';
import { RecordProps } from '@tldraw/editor';
import { Rectangle2d } from '@tldraw/editor';
import { RecursivePartial } from '@tldraw/editor';
import { RefAttributes } from 'react';
import { RefObject } from 'react';
import { Result } from '@tldraw/editor';
import { RichTextFontVisitorState } from '@tldraw/editor';
import { SerializedSchema } from '@tldraw/editor';
import { ShapeUtil } from '@tldraw/editor';
import { ShapeWithCrop } from '@tldraw/editor';
import { SharedStyle } from '@tldraw/editor';
import { StateNode } from '@tldraw/editor';
import { StyleProp } from '@tldraw/editor';
import { SvgExportContext } from '@tldraw/editor';
import { SVGProps } from 'react';
import { TiptapEditor } from '@tldraw/editor';
import { TLAnyBindingUtilConstructor } from '@tldraw/editor';
import { TLAnyShapeUtilConstructor } from '@tldraw/editor';
import { TLArrowBinding } from '@tldraw/editor';
import { TLArrowBindingProps } from '@tldraw/editor';
import { TLArrowShape } from '@tldraw/editor';
import { TLArrowShapeArrowheadStyle } from '@tldraw/editor';
import { TLArrowShapeKind } from '@tldraw/editor';
import { TLArrowShapeProps } from '@tldraw/editor';
import { TLAsset } from '@tldraw/editor';
import { TLAssetId } from '@tldraw/editor';
import { TLBookmarkAsset } from '@tldraw/editor';
import { TLBookmarkShape } from '@tldraw/editor';
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 { 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';
import { TldrawEditorBaseProps } from '@tldraw/editor';
import { TldrawEditorStoreProps } from '@tldraw/editor';
import { TldrawOptions } from '@tldraw/editor';
import { TLDrawShape } from '@tldraw/editor';
import { TLDrawShapeProps } from '@tldraw/editor';
import { TLDrawShapeSegment } from '@tldraw/editor';
import { TLEditorComponents } from '@tldraw/editor';
import { TLEditorSnapshot } from '@tldraw/editor';
import { TLEditStartInfo } from '@tldraw/editor';
import { TLEmbedShape } from '@tldraw/editor';
import { TLEmbedShapeProps } from '@tldraw/editor';
import { TLEventInfo } from '@tldraw/editor';
import { TLExportType } from '@tldraw/editor';
import { TLFileExternalAsset } from '@tldraw/editor';
import { TLFontFace } from '@tldraw/editor';
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';
import { TLHandlesProps } from '@tldraw/editor';
import { TLHighlightShape } from '@tldraw/editor';
import { TLHighlightShapeProps } from '@tldraw/editor';
import { TLImageAsset } from '@tldraw/editor';
import { TLImageExportOptions } from '@tldraw/editor';
import { TLImageShape } from '@tldraw/editor';
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 { TLPointerEventInfo } from '@tldraw/editor';
import { TLPropsMigrations } from '@tldraw/editor';
import { TLResizeInfo } from '@tldraw/editor';
import { TLRichText } from '@tldraw/editor';
import { TLSchema } from '@tldraw/editor';
import { TLScribbleProps } from '@tldraw/editor';
import { TLSelectionForegroundProps } from '@tldraw/editor';
import { TLShape } from '@tldraw/editor';
import { TLShapeCrop } from '@tldraw/editor';
import { TLShapeId } from '@tldraw/editor';
import { TLShapePartial } from '@tldraw/editor';
import { TLShapeUtilCanBeLaidOutOpts } from '@tldraw/editor';
import { TLShapeUtilCanBindOpts } from '@tldraw/editor';
import { TLShapeUtilCanvasSvgDef } from '@tldraw/editor';
import { TLShapeUtilConstructor } from '@tldraw/editor';
import { TLStateNodeConstructor } from '@tldraw/editor';
import { TLStore } from '@tldraw/editor';
import { TLStoreSnapshot } from '@tldraw/editor';
import { TLTextOptions } from '@tldraw/editor';
import { TLTextShape } from '@tldraw/editor';
import { TLUrlExternalAsset } from '@tldraw/editor';
import { TLVideoAsset } from '@tldraw/editor';
import { TLVideoShape } from '@tldraw/editor';
import { UnknownRecord } from '@tldraw/editor';
import { Vec } from '@tldraw/editor';
import { VecLike } from '@tldraw/editor';
import { VecModel } from '@tldraw/editor';

/** @public */
export declare type A11yPriority = 'assertive' | 'polite';

/** @public */
export declare interface A11yProviderProps {
    children: React.ReactNode;
}

/** @public @react */
export declare function AccessibilityMenu(): JSX.Element;

/** @public */
export declare interface ActionsProviderProps {
    overrides?(editor: Editor, actions: TLUiActionsContextType, helpers: TLUiOverrideHelpers): TLUiActionsContextType;
    children: React_2.ReactNode;
}

/** @public */
export declare type AlertSeverity = 'error' | 'info' | 'success' | 'warning';

/** @public @react */
export declare function AlignMenuItems(): JSX.Element;

/** @public */
export declare const allDefaultFontFaces: TLFontFace[];

/** @public @react */
export declare function ArrangeMenuSubmenu(): JSX.Element | null;

/** @public */
export declare const ARROW_LABEL_FONT_SIZES: Record<TLDefaultSizeStyle, number>;

/**
 * @public
 */
export declare class ArrowBindingUtil extends BindingUtil<TLArrowBinding> {
    static type: string;
    static props: RecordProps<TLArrowBinding>;
    static migrations: TLPropsMigrations;
    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;
}

/** @public @react */
export declare function ArrowDownToolbarItem(): JSX.Element;

/** @public @react */
export declare function ArrowLeftToolbarItem(): JSX.Element;

/** @public @react */
export declare function ArrowRightToolbarItem(): JSX.Element;

/**
 * Options for the arrow shape.
 *
 * @example
 * ```tsx
 * const shapeUtils = [
 *   ArrowShapeUtil.configure({ arcArrowCenterSnapDistance: 0 }),
 * ]
 *
 * function MyApp() {
 *   return <Tldraw shapeUtils={shapeUtils} />
 * }
 * ```
 *
 * @public
 */
export declare interface ArrowShapeOptions {
    /**
     * How far should elbow arrows expand from the shapes they're targeting?
     */
    readonly expandElbowLegLength: Record<TLDefaultSizeStyle, number>;
    /**
     * The minimum length of an elbow arrow's leg.
     */
    readonly minElbowLegLength: Record<TLDefaultSizeStyle, number>;
    /**
     * The minimum distance, in screen pixels, between two handles on an elbow arrow. If two handles
     * would be closer than this distance, they're both hidden.
     */
    readonly minElbowHandleDistance: number;
    /**
     * The distance, in screen pixels, at which we snap to the center of a target shape when drawing
     * an arc arrow. Set to 0 to disable.
     */
    readonly arcArrowCenterSnapDistance: number;
    /**
     * The distance, in screen pixels, at which we snap to the center of a target shape when drawing
     * an elbow arrow. Set to 0 to disable.
     */
    readonly elbowArrowCenterSnapDistance: number;
    /**
     * The distance, in screen pixels, at which we snap to the edge of a target shape when drawing
     * an elbow arrow. Set to 0 to disable.
     */
    readonly elbowArrowEdgeSnapDistance: number;
    /**
     * The distance, in screen pixels, at which we snap to one of the 4 directional points (top,
     * right, bottom, left) of a target shape when drawing an elbow arrow. Set to 0 to disable.
     */
    readonly elbowArrowPointSnapDistance: number;
    /**
     * The distance, in screen pixels, at which we snap to the axis passing through the center of a
     * shape when drawing an elbow arrow. Set to 0 to disable.
     */
    readonly elbowArrowAxisSnapDistance: number;
    /**
     * The distance, in screen pixels, at which we snap an arrow label to center of the arrow when
     * dragging it. Set to 0 to disable.
     */
    readonly labelCenterSnapDistance: number;
    /**
     * The distance, in screen pixels, at which we snap an elbow arrow midpoint handle to the
     * midpoint between two shapes. Set to 0 to disable.
     */
    readonly elbowMidpointSnapDistance: number;
    /**
     * The minimum length, in screen pixels, of an elbow arrows midpoint segment before we show the
     * handle for dragging that segment.
     */
    readonly elbowMinSegmentLengthToShowMidpointHandle: number;
    /**
     * When hovering over a shape using the arrow tool, how long should we wait before we assume the
     * user is targeting precisely instead of imprecisely.
     */
    readonly hoverPreciseTimeout: number;
    /**
     * When pointing at a shape using the arrow tool or dragging an arrow terminal handle, how long
     * should we wait before we assume the user is targeting precisely instead of imprecisely.
     */
    readonly pointingPreciseTimeout: number;
    /**
     * When creating an arrow, should it stop exactly at the pointer, or should
     * it stop at the edge of the target shape.
     */
    shouldBeExact(editor: Editor, isPrecise: boolean): boolean;
    /**
     * When creating an arrow, should it bind to the target shape.
     */
    shouldIgnoreTargets(editor: Editor): boolean;
    /** Whether to show the outline of the arrow shape's label (using the same color as the canvas). This helps with overlapping shapes. It does not show up on Safari, where text outline is a performance issues. */
    readonly showTextOutline: boolean;
}

/** @public */
export declare class ArrowShapeTool extends StateNode {
    static id: string;
    static initial: string;
    static children(): TLStateNodeConstructor[];
    shapeType: string;
}

/** @public */
export declare class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
    static type: "arrow";
    static props: RecordProps<TLArrowShape>;
    static migrations: MigrationSequence;
    options: ArrowShapeOptions;
    canEdit(): boolean;
    canBind({ toShape }: TLShapeUtilCanBindOpts<TLArrowShape>): boolean;
    canSnap(): boolean;
    hideResizeHandles(): boolean;
    hideRotateHandle(): boolean;
    hideSelectionBoundsBg(): boolean;
    hideSelectionBoundsFg(): boolean;
    hideInMinimap(): boolean;
    canBeLaidOut(shape: TLArrowShape, info: TLShapeUtilCanBeLaidOutOpts): boolean;
    getFontFaces(shape: TLArrowShape): TLFontFace[];
    getDefaultProps(): TLArrowShape['props'];
    getGeometry(shape: TLArrowShape): Group2d;
    getHandles(shape: TLArrowShape): TLHandle[];
    getText(shape: TLArrowShape): string;
    onHandleDrag(shape: TLArrowShape, info: TLHandleDragInfo<TLArrowShape>): ({
        id: TLShapeId;
        meta?: Partial<JsonObject> | undefined;
        props?: Partial<TLArrowShapeProps> | undefined;
        type: "arrow";
    } & Partial<Omit<TLArrowShape, "id" | "meta" | "props" | "type">>) | {
        id: TLShapeId;
        props: {
            bend: number;
        };
        type: "arrow";
    } | {
        id: TLShapeId;
        props: {
            elbowMidPoint: number;
        };
        type: "arrow";
    } | undefined;
    private onArcMidpointHandleDrag;
    private onElbowMidpointHandleDrag;
    private onTerminalHandleDrag;
    onTranslateStart(shape: TLArrowShape): ({
        id: TLShapeId;
        meta?: Partial<JsonObject> | undefined;
        props?: Partial<TLArrowShapeProps> | undefined;
        type: "arrow";
    } & Partial<Omit<TLArrowShape, "id" | "meta" | "props" | "type">>) | undefined;
    onTranslate(initialShape: TLArrowShape, shape: TLArrowShape): void;
    private readonly _resizeInitialBindings;
    onResize(shape: TLArrowShape, info: TLResizeInfo<TLArrowShape>): {
        props: {
            bend: number;
            end: VecModel;
            start: VecModel;
        };
    };
    onDoubleClickHandle(shape: TLArrowShape, handle: TLHandle): TLShapePartial<TLArrowShape> | void;
    component(shape: TLArrowShape): JSX.Element | null;
    indicator(shape: TLArrowShape): JSX.Element | null;
    useLegacyIndicator(): boolean;
    getIndicatorPath(shape: TLArrowShape): {
        additionalPaths: Path2D[];
        clipPath: Path2D;
        path: Path2D;
    } | Path2D | undefined;
    onEditStart(shape: TLArrowShape): void;
    toSvg(shape: TLArrowShape, ctx: SvgExportContext): JSX.Element;
    getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[];
    getInterpolatedProps(startShape: TLArrowShape, endShape: TLArrowShape, progress: number): TLArrowShapeProps;
}

/**
 * State representing what we're pointing to when drawing or updating an arrow. You can get this
 * state using {@link getArrowTargetState}, and update it as part of an arrow interaction with
 * {@link updateArrowTargetState} or {@link clearArrowTargetState}.
 *
 * @public
 */
export declare interface ArrowTargetState {
    target: TLShape;
    arrowKind: TLArrowShapeKind;
    handlesInPageSpace: {
        bottom: {
            isEnabled: boolean;
            point: VecLike;
        };
        left: {
            isEnabled: boolean;
            point: VecLike;
        };
        right: {
            isEnabled: boolean;
            point: VecLike;
        };
        top: {
            isEnabled: boolean;
            point: VecLike;
        };
    };
    isExact: boolean;
    isPrecise: boolean;
    centerInPageSpace: VecLike;
    anchorInPageSpace: VecLike;
    snap: ElbowArrowSnap;
    normalizedAnchor: VecLike;
}

/** @public @react */
export declare function ArrowToolbarItem(): JSX.Element;

/** @public @react */
export declare function ArrowUpToolbarItem(): JSX.Element;

/** @public */
export declare type ASPECT_RATIO_OPTION = 'circle' | 'landscape' | 'original' | 'portrait' | 'square' | 'wide';

/** @public */
export declare const ASPECT_RATIO_OPTIONS: ASPECT_RATIO_OPTION[];

/** @public */
export declare const ASPECT_RATIO_TO_VALUE: Record<ASPECT_RATIO_OPTION, number>;

/** @public @react */
export declare function AssetToolbarItem(): JSX.Element;

/* Excluded from this release type: AssetUrlsProvider */

/** @public */
export declare interface BasePathBuilderOpts {
    strokeWidth: number;
    forceSolid?: boolean;
    onlyFilled?: boolean;
    props?: SVGProps<SVGPathElement & SVGGElement>;
}

/** @public */
export declare class BookmarkShapeUtil extends BaseBoxShapeUtil<TLBookmarkShape> {
    static type: "bookmark";
    static props: RecordProps<TLBookmarkShape>;
    static migrations: TLPropsMigrations;
    canResize(): boolean;
    hideSelectionBoundsFg(): boolean;
    getText(shape: TLBookmarkShape): string;
    getAriaDescriptor(shape: TLBookmarkShape): string | undefined;
    getDefaultProps(): TLBookmarkShape['props'];
    component(shape: TLBookmarkShape): JSX.Element;
    indicator(shape: TLBookmarkShape): JSX.Element;
    useLegacyIndicator(): boolean;
    getIndicatorPath(shape: TLBookmarkShape): Path2D;
    onBeforeCreate(next: TLBookmarkShape): {
        id: TLShapeId;
        index: IndexKey;
        isLocked: boolean;
        meta: JsonObject;
        opacity: TLOpacityType;
        parentId: TLParentId;
        props: {
            assetId: null | TLAssetId;
            h: number;
            url: string;
            w: number;
        };
        rotation: number;
        type: "bookmark";
        typeName: "shape";
        x: number;
        y: number;
    };
    onBeforeUpdate(prev: TLBookmarkShape, shape: TLBookmarkShape): {
        id: TLShapeId;
        index: IndexKey;
        isLocked: boolean;
        meta: JsonObject;
        opacity: TLOpacityType;
        parentId: TLParentId;
        props: {
            assetId: null | TLAssetId;
            h: number;
            url: string;
            w: number;
        };
        rotation: number;
        type: "bookmark";
        typeName: "shape";
        x: number;
        y: number;
    } | undefined;
    getInterpolatedProps(startShape: TLBookmarkShape, endShape: TLBookmarkShape, t: number): TLBookmarkShapeProps;
}

/** @public */
export declare interface BoxWidthHeight {
    w: number;
    h: number;
}

/** @public @react */
export declare function BreakPointProvider({ forceMobile, children }: BreakPointProviderProps): JSX.Element;

/** @public */
export declare interface BreakPointProviderProps {
    forceMobile?: boolean;
    children: ReactNode;
}

/* Excluded from this release type: buildFromV1Document */

/** @public @react */
export declare function CenteredTopPanelContainer({ maxWidth, ignoreRightWidth, stylePanelWidth, marginBetweenZones, squeezeAmount, children, }: CenteredTopPanelContainerProps): JSX.Element;

/** @public */
export declare interface CenteredTopPanelContainerProps {
    children?: ReactNode;
    maxWidth?: number;
    ignoreRightWidth?: number;
    stylePanelWidth?: number;
    marginBetweenZones?: number;
    squeezeAmount?: number;
}

/**
 * Repositions selected shapes do that the center of the group is
 * at the provided position
 *
 * @param editor - The editor instance
 *
 * @param position - the point to center the shapes around
 *
 * @public
 */
export declare function centerSelectionAroundPoint(editor: Editor, position: VecLike): void;

/** @public @react */
export declare function CheckBoxToolbarItem(): JSX.Element;

/**
 * Clear the current arrow target state for an editor. See {@link ArrowTargetState} for more
 * information.
 *
 * @public
 */
export declare function clearArrowTargetState(editor: Editor): void;

/** @public @react */
export declare function ClipboardMenuGroup(): JSX.Element;

/** @public @react */
export declare function CloudToolbarItem(): JSX.Element;

/** @public @react */
export declare function ColorSchemeMenu(): JSX.Element;

/**
 * Contains the size within the given box size
 *
 * @param originalSize - The size of the asset
 * @param containBoxSize - The container size
 * @returns Adjusted size
 * @public
 */
export declare function containBoxSize(originalSize: BoxWidthHeight, containBoxSize: BoxWidthHeight): BoxWidthHeight;

/** @public @react */
export declare function ConversionsMenuGroup(): JSX.Element | null;

/** @public @react */
export declare function ConvertToBookmarkMenuItem(): JSX.Element | null;

/** @public @react */
export declare function ConvertToEmbedMenuItem(): JSX.Element | null;

/**
 * Copy the given shapes to the clipboard.
 *
 * @param editor - The editor instance.
 * @param ids - The ids of the shapes to copy.
 * @param format - The format to copy as. Defaults to png.
 * @param opts - Options for the copy.
 *
 * @public
 */
export declare function copyAs(editor: Editor, ids: TLShapeId[], opts: CopyAsOptions): Promise<void>;

/** @public @react */
export declare function CopyAsMenuGroup(): JSX.Element;

/** @public */
export declare interface CopyAsOptions extends TLImageExportOptions {
    /** The format to copy as. */
    format: TLCopyType;
}

/** @public @react */
export declare function CopyMenuItem(): JSX.Element;

/**
 * Creates a bookmark shape from a URL with unfurled metadata.
 *
 * @returns A Result containing the created bookmark shape or an error
 * @public
 */
export declare function createBookmarkFromUrl(editor: Editor, { url, center, }: {
    center?: {
        x: number;
        y: number;
    };
    url: string;
}): Promise<Result<TLBookmarkShape, string>>;

/** @public */
export declare function createEmptyBookmarkShape(editor: Editor, url: string, position: VecLike): TLBookmarkShape;

/**
 * A helper function for an external content handler. It creates bookmarks,
 * images or video shapes corresponding to the type of assets provided.
 *
 * @param editor - The editor instance
 *
 * @param assets - An array of asset Ids
 *
 * @param position - the position at which to create the shapes
 *
 * @public
 */
export declare function createShapesForAssets(editor: Editor, assets: TLAsset[], position: VecLike): Promise<TLShapeId[]>;

/** @public */
export declare interface CropBoxOptions {
    minWidth?: number;
    minHeight?: number;
}

/* Excluded from this release type: CubicBezierToPathBuilderCommand */

/** @public @react */
export declare function CursorChatItem(): JSX.Element | null;

/** @public */
export declare interface CustomDebugFlags {
    customDebugFlags?: Record<string, DebugFlag<boolean>>;
    customFeatureFlags?: Record<string, DebugFlag<boolean>>;
}

/** @public */
export declare interface CustomEmbedDefinition extends EmbedDefinition {
    readonly icon: string;
}

/** @public @react */
export declare function CutMenuItem(): JSX.Element;

/** @public */
export declare interface DashedPathBuilderOpts extends BasePathBuilderOpts {
    style: 'dashed' | 'dotted';
    snap?: number;
    end?: PerfectDashTerminal;
    start?: PerfectDashTerminal;
    lengthRatio?: number;
}

/** @public @react */
export declare function DebugFlags(props: DebugFlagsProps): JSX.Element | null;

/** @public */
export declare interface DebugFlagsProps {
    customDebugFlags?: Record<string, DebugFlag<boolean>> | undefined;
}

/** @public */
export declare const DEFAULT_EMBED_DEFINITIONS: readonly [{
    readonly doesResize: true;
    readonly embedOnPaste: false;
    readonly fromEmbedUrl: (url: string) => string | undefined;
    readonly height: 500;
    readonly hostnames: readonly ["beta.tldraw.com", "tldraw.com", "localhost:3000"];
    readonly minHeight: 300;
    readonly minWidth: 300;
    readonly overridePermissions: {
        readonly 'allow-top-navigation': true;
    };
    readonly title: "tldraw";
    readonly toEmbedUrl: (url: string) => string | undefined;
    readonly type: "tldraw";
    readonly width: 720;
}, {
    readonly doesResize: true;
    readonly embedOnPaste: true;
    readonly fromEmbedUrl: (url: string) => string | undefined;
    readonly height: 500;
    readonly hostnames: readonly ["figma.com"];
    readonly title: "Figma";
    readonly toEmbedUrl: (url: string) => string | undefined;
    readonly type: "figma";
    readonly width: 720;
}, {
    readonly doesResize: true;
    readonly embedOnPaste: true;
    readonly fromEmbedUrl: (url: string) => string | undefined;
    readonly height: 500;
    readonly hostnames: readonly ["google.*"];
    readonly overridePermissions: {
        readonly 'allow-presentation': true;
    };
    readonly title: "Google Maps";
    readonly toEmbedUrl: (url: string) => string | undefined;
    readonly type: "google_maps";
    readonly width: 720;
}, {
    readonly doesResize: true;
    readonly embedOnPaste: true;
    readonly fromEmbedUrl: (url: string) => string | undefined;
    readonly height: 500;
    readonly hostnames: readonly ["val.town"];
    readonly minHeight: 100;
    readonly minWidth: 260;
    readonly title: "Val Town";
    readonly toEmbedUrl: (url: string) => string | undefined;
    readonly type: "val_town";
    readonly width: 720;
}, {
    readonly doesResize: true;
    readonly embedOnPaste: true;
    readonly fromEmbedUrl: (url: string) => string | undefined;
    readonly height: 500;
    readonly hostnames: readonly ["codesandbox.io"];
    readonly minHeight: 300;
    readonly minWidth: 300;
    readonly title: "CodeSandbox";
    readonly toEmbedUrl: (url: string) => string | undefined;
    readonly type: "codesandbox";
    readonly width: 720;
}, {
    readonly doesResize: true;
    readonly embedOnPaste: true;
    readonly fromEmbedUrl: (url: string) => string | undefined;
    readonly height: 400;
    readonly hostnames: readonly ["codepen.io"];
    readonly minHeight: 300;
    readonly minWidth: 300;
    readonly title: "Codepen";
    readonly toEmbedUrl: (url: string) => string | undefined;
    readonly type: "codepen";
    readonly width: 520;
}, {
    readonly doesResize: false;
    readonly embedOnPaste: true;
    readonly fromEmbedUrl: (url: string) => string | undefined;
    readonly height: 400;
    readonly hostnames: readonly ["scratch.mit.edu"];
    readonly title: "Scratch";
    readonly toEmbedUrl: (url: string) => string | undefined;
    readonly type: "scratch";
    readonly width: 520;
}, {
    readonly doesResize: true;
    readonly embedOnPaste: true;
    readonly fromEmbedUrl: (url: string) => string | undefined;
    readonly height: 450;
    readonly hostnames: readonly ["*.youtube.com", "youtube.com", "youtu.be"];
    readonly isAspectRatioLocked: true;
    readonly overridePermissions: {
        readonly 'allow-popups-to-escape-sandbox': true;
        readonly 'allow-presentation': true;
    };
    readonly title: "YouTube";
    readonly toEmbedUrl: (url: string) => string | undefined;
    readonly type: "youtube";
    readonly width: 800;
}, {
    readonly doesResize: true;
    readonly embedOnPaste: true;
    readonly fromEmbedUrl: (url: string) => string | undefined;
    readonly height: 500;
    readonly hostnames: readonly ["calendar.google.*"];
    readonly instructionLink: "https://support.google.com/calendar/answer/41207?hl=en";
    readonly minHeight: 360;
    readonly minWidth: 460;
    readonly overridePermissions: {
        readonly 'allow-popups-to-escape-sandbox': true;
    };
    readonly title: "Google Calendar";
    readonly toEmbedUrl: (url: string) => string | undefined;
    readonly type: "google_calendar";
    readonly width: 720;
}, {
    readonly doesResize: true;
    readonly embedOnPaste: true;
    readonly fromEmbedUrl: (url: string) => string | undefined;
    readonly height: 500;
    readonly hostnames: readonly ["docs.google.*"];
    readonly minHeight: 360;
    readonly minWidth: 460;
    readonly overridePermissions: {
        readonly 'allow-popups-to-escape-sandbox': true;
    };
    readonly title: "Google Slides";
    readonly toEmbedUrl: (url: string) => string | undefined;
    readonly type: "google_slides";
    readonly width: 720;
}, {
    readonly doesResize: true;
    readonly embedOnPaste: true;
    readonly fromEmbedUrl: (url: string) => string | undefined;
    readonly height: 500;
    readonly hostnames: readonly ["gist.github.com"];
    readonly title: "GitHub Gist";
    readonly toEmbedUrl: (url: string) => string | undefined;
    readonly type: "github_gist";
    readonly width: 720;
}, {
    readonly doesResize: true;
    readonly embedOnPaste: true;
    readonly fromEmbedUrl: (url: string) => string | undefined;
    readonly height: 500;
    readonly hostnames: readonly ["replit.com"];
    readonly title: "Replit";
    readonly toEmbedUrl: (url: string) => string | undefined;
    readonly type: "replit";
    readonly width: 720;
}, {
    readonly doesResize: true;
    readonly embedOnPaste: true;
    readonly fromEmbedUrl: (url: string) => string | undefined;
    readonly height: 500;
    readonly hostnames: readonly ["felt.com"];
    readonly title: "Felt";
    readonly toEmbedUrl: (url: string) => string | undefined;
    readonly type: "felt";
    readonly width: 720;
}, {
    readonly doesResize: true;
    readonly embedOnPaste: true;
    readonly fromEmbedUrl: (url: string) => string | undefined;
    readonly height: 500;
    readonly hostnames: readonly ["open.spotify.com"];
    readonly minHeight: 500;
    readonly overrideOutlineRadius: 12;
    readonly title: "Spotify";
    readonly toEmbedUrl: (url: string) => string | undefined;
    readonly type: "spotify";
    readonly width: 720;
}, {
    readonly doesResize: true;
    readonly embedOnPaste: true;
    readonly fromEmbedUrl: (url: string) => string | undefined;
    readonly height: 360;
    readonly hostnames: readonly ["vimeo.com", "player.vimeo.com"];
    readonly isAspectRatioLocked: true;
    readonly title: "Vimeo";
    readonly toEmbedUrl: (url: string) => string | undefined;
    readonly type: "vimeo";
    readonly width: 640;
}, {
    readonly backgroundColor: "#fff";
    readonly doesResize: true;
    readonly embedOnPaste: true;
    readonly fromEmbedUrl: (url: string) => string | undefined;
    readonly height: 500;
    readonly hostnames: readonly ["observablehq.com"];
    readonly isAspectRatioLocked: false;
    readonly title: "Observable";
    readonly toEmbedUrl: (url: string) => string | undefined;
    readonly type: "observable";
    readonly width: 720;
}, {
    readonly doesResize: true;
    readonly embedOnPaste: true;
    readonly fromEmbedUrl: (url: string) => string | undefined;
    readonly height: 450;
    readonly hostnames: readonly ["desmos.com"];
    readonly title: "Desmos";
    readonly toEmbedUrl: (url: string) => string | undefined;
    readonly type: "desmos";
    readonly width: 700;
}];

/**
 * 10mb
 * @public
 */
export declare const DEFAULT_MAX_ASSET_SIZE: number;

/**
 * 5000px
 * @public
 */
export declare const DEFAULT_MAX_IMAGE_DIMENSION = 5000;

/** @public @react */
export declare const DefaultA11yAnnouncer: NamedExoticComponent<object>;

/** @public @react */
export declare const DefaultActionsMenu: NamedExoticComponent<TLUiActionsMenuProps>;

/** @public @react */
export declare function DefaultActionsMenuContent(): JSX.Element;

/** @public */
export declare function defaultAddFontsFromNode(node: Node_2, state: RichTextFontVisitorState, addFont: (font: TLFontFace) => void): RichTextFontVisitorState;

/** @public */
export declare const defaultBindingUtils: readonly [typeof ArrowBindingUtil];

/** @public @react */
declare const DefaultContextMenu: NamedExoticComponent<TLUiContextMenuProps>;
export { DefaultContextMenu as ContextMenu }
export { DefaultContextMenu }

/** @public @react */
export declare function DefaultContextMenuContent(): JSX.Element | null;

/** @public @react */
export declare function DefaultDebugMenu({ children }: TLUiDebugMenuProps): JSX.Element;

/** @public @react */
export declare function DefaultDebugMenuContent({ customDebugFlags, customFeatureFlags, }: CustomDebugFlags): JSX.Element;

/** @public @react */
export declare const DefaultDialogs: NamedExoticComponent<object>;

/** @public */
export declare let defaultEditorAssetUrls: TLEditorAssetUrls;

/** @public */
export declare type DefaultEmbedDefinitionType = (typeof DEFAULT_EMBED_DEFINITIONS)[number]['type'];

/** @public @react */
export declare function DefaultFollowingIndicator(): JSX.Element | null;

/** @public */
export declare const DefaultFontFaces: TLDefaultFonts;

/** @public */
export declare function defaultHandleExternalEmbedContent<T>(editor: Editor, { point, url, embed }: {
    embed: T;
    point?: VecLike;
    url: string;
}): void;

/** @public */
export declare function defaultHandleExternalExcalidrawContent(editor: Editor, { point, content }: {
    content: any;
    point?: VecLike;
}): Promise<void>;

/** @public */
export declare function defaultHandleExternalFileAsset(editor: Editor, { file, assetId }: TLFileExternalAsset, options: TLDefaultExternalContentHandlerOpts): Promise<TLAsset>;

/** @public */
export declare function defaultHandleExternalFileContent(editor: Editor, { point, files }: {
    files: File[];
    point?: VecLike;
}, options: TLDefaultExternalContentHandlerOpts): Promise<void>;

/** @public */
export declare function defaultHandleExternalSvgTextContent(editor: Editor, { point, text }: {
    point?: VecLike;
    text: string;
}): Promise<void>;

/** @public */
export declare function defaultHandleExternalTextContent(editor: Editor, { point, text, html }: {
    html?: string;
    point?: VecLike;
    text: string;
}): Promise<void>;

/** @public */
export declare function defaultHandleExternalTldrawContent(editor: Editor, { point, content }: {
    content: TLContent;
    point?: VecLike;
}): Promise<void>;

/** @public */
export declare function defaultHandleExternalUrlAsset(editor: Editor, { url }: TLUrlExternalAsset, { toasts, msg }: TLDefaultExternalContentHandlerOpts): Promise<TLBookmarkAsset>;

/** @public */
export declare function defaultHandleExternalUrlContent(editor: Editor, { point, url }: {
    point?: VecLike;
    url: string;
}, { toasts, msg }: TLDefaultExternalContentHandlerOpts): Promise<void>;

/** @public @react */
export declare function DefaultHelperButtons({ children }: TLUiHelperButtonsProps): JSX.Element;

/** @public @react */
export declare function DefaultHelperButtonsContent(): JSX.Element;

/** @public @react */
export declare const DefaultHelpMenu: NamedExoticComponent<TLUiHelpMenuProps>;

/** @public @react */
export declare function DefaultHelpMenuContent(): JSX.Element;

/** @public @react */
export declare function DefaultImageToolbar({ children }: TLUiImageToolbarProps): JSX.Element | null;

/** @public @react */
export declare const DefaultImageToolbarContent: NamedExoticComponent<DefaultImageToolbarContentProps>;

/** @public */
export declare interface DefaultImageToolbarContentProps {
    imageShapeId: TLImageShape['id'];
    isManipulating: boolean;
    onEditAltTextStart(): void;
    onManipulatingStart(): void;
    onManipulatingEnd(): void;
}

/** @public @react */
export declare const DefaultKeyboardShortcutsDialog: NamedExoticComponent<TLUiKeyboardShortcutsDialogProps>;

/** @public @react */
export declare function DefaultKeyboardShortcutsDialogContent(): JSX.Element;

/** @public @react */
export declare const DefaultMainMenu: NamedExoticComponent<TLUiMainMenuProps>;

/** @public @react */
export declare function DefaultMainMenuContent(): JSX.Element;

/** @public @react */
export declare const DefaultMenuPanel: NamedExoticComponent<object>;

/** @public @react */
export declare function DefaultMinimap(): JSX.Element;

/** @public @react */
export declare const DefaultNavigationPanel: NamedExoticComponent<object>;

/** @public @react */
export declare const DefaultPageMenu: NamedExoticComponent<object>;

/** @public @react */
export declare const DefaultQuickActions: NamedExoticComponent<TLUiQuickActionsProps>;

/** @public @react */
export declare function DefaultQuickActionsContent(): JSX.Element | undefined;

/**
 * The default rich text toolbar.
 *
 * @public @react
 */
export declare const DefaultRichTextToolbar: React_3.NamedExoticComponent<TLUiRichTextToolbarProps>;

/**
 * Rich text toolbar items that have the basics.
 *
 * @public @react
 */
export declare function DefaultRichTextToolbarContent({ textEditor, onEditLinkStart, }: DefaultRichTextToolbarContentProps): JSX.Element[];

/** @public */
export declare interface DefaultRichTextToolbarContentProps {
    onEditLinkStart?(): void;
    textEditor: TiptapEditor;
}

/** @public */
export declare const defaultShapeTools: readonly [typeof TextShapeTool, typeof DrawShapeTool, typeof GeoShapeTool, typeof NoteShapeTool, typeof LineShapeTool, typeof FrameShapeTool, typeof ArrowShapeTool, typeof HighlightShapeTool];

/** @public */
export declare const defaultShapeUtils: readonly [typeof TextShapeUtil, typeof BookmarkShapeUtil, typeof DrawShapeUtil, typeof GeoShapeUtil, typeof NoteShapeUtil, typeof LineShapeUtil, typeof FrameShapeUtil, typeof ArrowShapeUtil, typeof HighlightShapeUtil, typeof EmbedShapeUtil, typeof ImageShapeUtil, typeof VideoShapeUtil];

/** @public @react */
export declare function DefaultSharePanel(): JSX.Element;

/** @public @react */
export declare const DefaultStylePanel: NamedExoticComponent<TLUiStylePanelProps>;

/** @public @react */
export declare function DefaultStylePanelContent(): JSX.Element;

/** @public @react */
export declare const DefaultToasts: NamedExoticComponent<object>;

/**
 * The default toolbar for the editor. `children` defaults to the `DefaultToolbarContent` component.
 * Depending on the screen size, the children will overflow into a drop-down menu, with the most
 * recently active item from the overflow being shown in the main toolbar.
 *
 * @public
 * @react
 */
export declare const DefaultToolbar: NamedExoticComponent<DefaultToolbarProps>;

/** @public @react */
export declare function DefaultToolbarContent(): JSX.Element;

/** @public */
export declare interface DefaultToolbarProps {
    children?: ReactNode;
    orientation?: 'horizontal' | 'vertical';
    minItems?: number;
    minSizePx?: number;
    maxItems?: number;
    maxSizePx?: number;
}

/** @public */
export declare const defaultTools: readonly [typeof EraserTool, typeof HandTool, typeof LaserTool, typeof ZoomTool, typeof SelectTool];

/** @public @react */
export declare const DefaultVideoToolbar: NamedExoticComponent<TLUiVideoToolbarProps>;

/** @public @react */
export declare const DefaultVideoToolbarContent: NamedExoticComponent<DefaultVideoToolbarContentProps>;

/** @public */
export declare interface DefaultVideoToolbarContentProps {
    videoShapeId: TLVideoShape['id'];
    onEditAltTextStart(): void;
}

/** @public @react */
export declare const DefaultZoomMenu: NamedExoticComponent<TLUiZoomMenuProps>;

/** @public @react */
export declare function DefaultZoomMenuContent(): JSX.Element;

/** @public @react */
export declare function DeleteMenuItem(): JSX.Element;

/** @public @react */
export declare function DiamondToolbarItem(): JSX.Element;

/** @public @react */
export declare function DistributeMenuItems(): JSX.Element;

/* Excluded from this release type: downloadFile */

/**
 * Resize an image Blob to be smaller than it is currently.
 *
 * @example
 * ```ts
 * const image = await (await fetch('/image.jpg')).blob()
 * const size = await getImageSize(image)
 * const resizedImage = await downsizeImage(image, size.w / 2, size.h / 2, { type: "image/jpeg", quality: 0.85 })
 * ```
 *
 * @param image - The image Blob.
 * @param width - The desired width.
 * @param height - The desired height.
 * @param opts - Options for the image.
 * @public
 */
export declare function downsizeImage(blob: Blob, width: number, height: number, opts?: {
    quality?: number;
    type?: string;
}): Promise<Blob>;

/** @public */
export declare interface DrawPathBuilderDOpts {
    strokeWidth: number;
    randomSeed: string;
    offset?: number;
    roundness?: number;
    passes?: number;
    onlyFilled?: boolean;
}

/** @public */
export declare interface DrawPathBuilderOpts extends BasePathBuilderOpts, DrawPathBuilderDOpts {
    style: 'draw';
}

/** @public */
export declare interface DrawShapeOptions {
    /**
     * The maximum number of points in a line before the draw tool will begin a new shape.
     * A higher number will lead to poor performance while drawing very long lines.
     */
    readonly maxPointsPerShape: number;
}

/** @public */
export declare class DrawShapeTool extends StateNode {
    static id: string;
    static initial: string;
    static isLockable: boolean;
    static useCoalescedEvents: boolean;
    static children(): TLStateNodeConstructor[];
    shapeType: string;
    onExit(): void;
}

/** @public */
export declare class DrawShapeUtil extends ShapeUtil<TLDrawShape> {
    static type: "draw";
    static props: RecordProps<TLDrawShape>;
    static migrations: TLPropsMigrations;
    options: DrawShapeOptions;
    hideResizeHandles(shape: TLDrawShape): boolean;
    hideRotateHandle(shape: TLDrawShape): boolean;
    hideSelectionBoundsFg(shape: TLDrawShape): boolean;
    getDefaultProps(): TLDrawShape['props'];
    getGeometry(shape: TLDrawShape): Circle2d | Polyline2d;
    component(shape: TLDrawShape): JSX.Element;
    indicator(shape: TLDrawShape): JSX.Element;
    useLegacyIndicator(): boolean;
    getIndicatorPath(shape: TLDrawShape): Path2D;
    toSvg(shape: TLDrawShape, ctx: SvgExportContext): JSX.Element;
    getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[];
    onResize(shape: TLDrawShape, info: TLResizeInfo<TLDrawShape>): {
        props: {
            scaleX: number;
            scaleY: number;
        };
    };
    expandSelectionOutlinePx(shape: TLDrawShape): number;
    getInterpolatedProps(startShape: TLDrawShape, endShape: TLDrawShape, t: number): TLDrawShapeProps;
}

/** @public @react */
export declare function DrawToolbarItem(): JSX.Element;

/** @public @react */
export declare function DuplicateMenuItem(): JSX.Element | null;

/** @public @react */
export declare function EditLinkMenuItem(): JSX.Element | null;

/** @public @react */
export declare function EditMenuSubmenu(): JSX.Element | null;

/** @public @react */
export declare function EditSubmenu(): JSX.Element;

/**
 * @public
 */
export declare interface ElbowArrowBox {
    /** The original bounding box */
    original: Box;
    /**
     * The bounding box, expanded by {@link ArrowShapeOptions.expandElbowLegLength}.
     */
    expanded: Box;
}

/**
 * The usable range of the edges of a box. Each edge might be null if the edge is not usable for
 * entry/exit.
 * @public
 */
export declare interface ElbowArrowBoxEdges {
    top: ElbowArrowEdge | null;
    right: ElbowArrowEdge | null;
    bottom: ElbowArrowEdge | null;
    left: ElbowArrowEdge | null;
}

/** @public */
export declare interface ElbowArrowBoxes {
    /** The starting bounding box */
    A: Box;
    /** The ending bounding box */
    B: Box;
    /** The common bounding box of A and B */
    common: Box;
}

/**
 * An edge on a box.
 * @public
 */
export declare interface ElbowArrowEdge {
    /**
     * The co-ordinate of the edge. An x-coordinate if left/right, a y-coordinate if top/bottom.
     */
    value: number;
    /**
     * The co-ordinate of the edge, expanded by {@link ArrowShapeOptions.expandElbowLegLength}. May
     * be null if the target is a point.
     */
    expanded: null | number;
    /**
     * The usable range of the edge along its cross-axis. Y-coordinates if left/right, x-coordinated
     * if top/bottom.
     */
    cross: ElbowArrowRange;
    /**
     * The point of the target along the edge, constrained to within {@link ElbowArrowEdge.cross}.
     */
    crossTarget: number;
    /**
     * Whether the cross-axis range is shrunk from the original range to make space for the other shape.
     */
    isPartial: boolean;
}

/** @public */
export declare interface ElbowArrowInfo extends ElbowArrowInfoWithoutRoute {
    /**
     * The route of the arrow.
     */
    route: ElbowArrowRoute | null;
    midXRange: {
        hi: number;
        lo: number;
    } | null;
    midYRange: {
        hi: number;
        lo: number;
    } | null;
}

/** @public */
export declare interface ElbowArrowInfoWithoutRoute {
    /**
     * The options used for this elbow arrow
     */
    options: ElbowArrowOptions;
    /**
     * If false, A is the start shape and B is the end shape. If true, A is the end shape and B is
     * the start shape.
     */
    swapOrder: boolean;
    /**
     * One of the two shapes we're drawing an arrow between. Could be either the start or end
     * depending on `swapOrder`.
     */
    A: ElbowArrowTargetBox;
    /**
     * The other shape we're drawing an arrow between. Could be either the start or end
     * depending on `swapOrder`.
     */
    B: ElbowArrowTargetBox;
    /**
     * The common bounding box of A and B.
     */
    common: ElbowArrowBox;
    /**
     * The gap between the right edge of A and the left edge of B.
     */
    gapX: number;
    /**
     * The gap between the bottom edge of A and the top edge of B.
     */
    gapY: number;
    /**
     * The X coordinate of the middle line between the two boxes. If the boxes are too close or
     * overlap, this may be null.
     */
    midX: null | number;
    /**
     * The Y coordinate of the middle line between the two boxes. If the boxes are too close or
     * overlap, this may be null.
     */
    midY: null | number;
}

/**
 * Part of an {@link ElbowArrowRoute} that describes a handle for dragging the midpoint line, a line
 * roughly halfway between the two shapes.
 * @public
 */
export declare interface ElbowArrowMidpointHandle {
    axis: 'x' | 'y';
    /** The start point of the segment in the route that the handle is on. */
    segmentStart: VecLike;
    /** The end point of the segment in the route that the handle is on. */
    segmentEnd: VecLike;
    /** The position of the handle, in arrow-space. */
    point: VecLike;
}

/**
 * Extracted from {@link ArrowShapeOptions}. Options for one specific arrow.
 * @public
 */
export declare interface ElbowArrowOptions {
    expandElbowLegLength: number;
    minElbowLegLength: number;
    elbowMidpoint: number;
}

/** @public */
export declare interface ElbowArrowRange {
    min: number;
    max: number;
}

/**
 * A route for an elbow arrow.
 *
 * @public
 */
export declare interface ElbowArrowRoute {
    /* Excluded from this release type: name */
    /** The vertices of the route. Draw a line through them to see the route. */
    points: Vec[];
    /** The total distance of the route, in arrow-space pixels. */
    distance: number;
    /* Excluded from this release type: aEdgePicking */
    /* Excluded from this release type: bEdgePicking */
    /**
     * Some points on the line are there for more informative than display reasons - e.g. where the
     * midpoint handle is. If we draw these in our "draw" style, the line will look weird. We still
     * need them for some of the calculations we do, but we want to skip them specifically when
     * rendering the arrow.
     */
    skipPointsWhenDrawing: Set<Vec>;
    /**
     * The midpoint handle of the route, if any.
     */
    midpointHandle: ElbowArrowMidpointHandle | null;
}

/**
 * The side of a box that an elbow arrow could enter/exit from.
 * @public
 */
export declare type ElbowArrowSide = 'bottom' | 'left' | 'right' | 'top';

/* Excluded from this release type: ElbowArrowSideReason */

/**
 * @public
 */
export declare interface ElbowArrowTargetBox extends ElbowArrowBox {
    /** What specific point in the box are we aiming for? */
    target: Vec;
    /**
     * If true, the arrow should end at `target`. If false, the arrow should end at the edge of the
     * shape, pointing at `target`.
     */
    isExact: boolean;
    /**
     * How far away from this box should the arrow terminate to leave space for the arrowhead?
     */
    arrowheadOffset: number;
    /**
     * The minimum length of the segment of the arrow that actually reaches the target - and has the
     * arrowhead on it.
     */
    minEndSegmentLength: number;
    /**
     * The usable edges of the box.
     */
    edges: ElbowArrowBoxEdges;
    /**
     * The geometry of the bound shape, in arrow space.
     */
    geometry: Geometry2d | null;
    /**
     * Are we treating this target as a single point in space rather than a bounding box?
     */
    isPoint: boolean;
}

/** @public @react */
export declare function EllipseToolbarItem(): JSX.Element;

/** @public */
export declare interface EmbedDefinition {
    readonly type: string;
    readonly title: string;
    readonly hostnames: readonly string[];
    readonly minWidth?: number;
    readonly minHeight?: