tldraw/dist-cjs/index.d.ts

A tiny little drawing editor.

/// <reference types="react" />

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 { CubicSpline2d } from '@tldraw/editor';
import { Editor } from '@tldraw/editor';
import { Extension } from '@tiptap/core';
import { Extensions } from '@tiptap/core';
import { Geometry2d } from '@tldraw/editor';
import { Group2d } from '@tldraw/editor';
import { HandleSnapGeometry } from '@tldraw/editor';
import { IndexKey } from '@tldraw/editor';
import { JsonObject } from '@tldraw/editor';
import { JSX as JSX_2 } from 'react/jsx-runtime';
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 { PointerEvent as PointerEvent_2 } from 'react';
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 { ReadonlySharedStyleMap } from '@tldraw/editor';
import { RecordProps } from '@tldraw/editor';
import { Rectangle2d } from '@tldraw/editor';
import { RecursivePartial } from '@tldraw/editor';
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 { 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 { 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 { TLDefaultColorTheme } from '@tldraw/editor';
import { TLDefaultColorThemeColor } from '@tldraw/editor';
import { TLDefaultFillStyle } from '@tldraw/editor';
import { TLDefaultFontStyle } from '@tldraw/editor';
import { TLDefaultHorizontalAlignStyle } from '@tldraw/editor';
import { TLDefaultSizeStyle } from '@tldraw/editor';
import { TLDefaultVerticalAlignStyle } from '@tldraw/editor';
import { TldrawEditorBaseProps } from '@tldraw/editor';
import { TldrawEditorStoreProps } 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 { TLEmbedShape } from '@tldraw/editor';
import { TLEmbedShapeProps } 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 { 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 { TLNoteShape } from '@tldraw/editor';
import { TLNoteShapeProps } 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 */
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_2.Element;

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

/** @public @react */
export declare function ArrangeMenuSubmenu(): JSX_2.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({ shapeAfter, }: BindingOnShapeChangeOptions<TLArrowBinding>): void;
    onAfterChangeToShape({ binding }: BindingOnShapeChangeOptions<TLArrowBinding>): void;
    onBeforeIsolateFromShape({ binding, }: BindingOnShapeIsolateOptions<TLArrowBinding>): void;
}

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

/** @public @react */
export declare function ArrowheadStylePickerSet({ styles }: StylePickerSetProps): JSX_2.Element | null;

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

/** @public @react */
export declare function ArrowRightToolbarItem(): JSX_2.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 draggin an arrow terminal handle, how long
     * should we wait before we assume the user is targeting precisely instead of imprecisely.
     */
    readonly pointingPreciseTimeout: number;
}

/** @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({ toShapeType }: TLShapeUtilCanBindOpts<TLArrowShape>): boolean;
    canSnap(): boolean;
    canTabTo(shape: TLArrowShape): boolean;
    hideResizeHandles(): boolean;
    hideRotateHandle(): boolean;
    hideSelectionBoundsBg(): boolean;
    hideSelectionBoundsFg(): 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_2.Element | null;
    indicator(shape: TLArrowShape): JSX_2.Element | null;
    onEditStart(shape: TLArrowShape): void;
    onEditEnd(shape: TLArrowShape): void;
    toSvg(shape: TLArrowShape, ctx: SvgExportContext): JSX_2.Element;
    getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[];
    getInterpolatedProps(startShape: TLArrowShape, endShape: TLArrowShape, progress: number): TLArrowShapeProps;
}

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

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

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

/* Excluded from this release type: AssetUrlsProvider */

/** @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_2.Element;
    indicator(shape: TLBookmarkShape): JSX_2.Element;
    onBeforeCreate(next: TLBookmarkShape): {
        id: TLShapeId;
        index: IndexKey;
        isLocked: boolean;
        meta: JsonObject;
        opacity: number;
        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: number;
        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_2.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_2.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_2.Element;

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

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

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

/** @public @react */
export declare function CommonStylePickerSet({ styles, theme }: ThemeStylePickerSetProps): JSX_2.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_2.Element | null;

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

/** @public @react */
export declare function ConvertToEmbedMenuItem(): JSX_2.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>;

/**
 * @deprecated The format parameter is now part of the opts object.
 * @public
 */
export declare function copyAs(editor: Editor, ids: TLShapeId[], format: TLCopyType, opts?: TLImageExportOptions & {
    format?: undefined;
}): Promise<void>;

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

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

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

/** @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;
}

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

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

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

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

/** @public */
export declare const DEFAULT_EMBED_DEFINITIONS: readonly [{
    readonly doesResize: true;
    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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 doesResize: true;
    readonly fromEmbedUrl: (url: string) => string | undefined;
    readonly height: 500;
    readonly hostnames: readonly ["excalidraw.com"];
    readonly isAspectRatioLocked: true;
    readonly title: "Excalidraw";
    readonly toEmbedUrl: (url: string) => string | undefined;
    readonly type: "excalidraw";
    readonly width: 720;
}, {
    readonly backgroundColor: "#fff";
    readonly doesResize: 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 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_2.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_2.Element | null;

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

/** @public @react */
export declare function DefaultDebugMenuContent(): JSX_2.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 */
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, { acceptedImageMimeTypes, acceptedVideoMimeTypes, maxAssetSize, maxImageDimension, toasts, msg, }: TLDefaultExternalContentHandlerOpts): Promise<TLAsset>;

/** @public */
export declare function defaultHandleExternalFileContent(editor: Editor, { point, files }: {
    files: File[];
    point?: VecLike;
}, { maxAssetSize, maxImageDimension, acceptedImageMimeTypes, acceptedVideoMimeTypes, toasts, msg, }: 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_2.Element;

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

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

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

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

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

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

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

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

/** @public @react */
export declare function DefaultMinimap(): JSX_2.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_2.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_2.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_2.Element;

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

/** @public @react */
export declare function DefaultStylePanelContent({ styles }: TLUiStylePanelContentProps): JSX_2.Element | null;

/** @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_2.Element;

/** @public */
export declare interface DefaultToolbarProps {
    children?: ReactNode;
}

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

/** @public @react */
export declare function DefaultTopPanel(): JSX_2.Element;

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

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

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

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

/** @public @react */
export declare function DistributeMenuItems(): JSX_2.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 | undefined;
    type?: string | undefined;
}): Promise<Blob>;

/** @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;
    canTabTo(): boolean;
    hideResizeHandles(shape: TLDrawShape): boolean;
    hideRotateHandle(shape: TLDrawShape): boolean;
    hideSelectionBoundsFg(shape: TLDrawShape): boolean;
    getDefaultProps(): TLDrawShape['props'];
    getGeometry(shape: TLDrawShape): Circle2d | Polyline2d;
    component(shape: TLDrawShape): JSX_2.Element;
    indicator(shape: TLDrawShape): JSX_2.Element;
    toSvg(shape: TLDrawShape, ctx: SvgExportContext): JSX_2.Element;
    getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[];
    onResize(shape: TLDrawShape, info: TLResizeInfo<TLDrawShape>): {
        props: {
            segments: TLDrawShapeSegment[];
        };
    };
    expandSelectionOutlinePx(shape: TLDrawShape): number;
    getInterpolatedProps(startShape: TLDrawShape, endShape: TLDrawShape, t: number): TLDrawShapeProps;
}

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

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

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

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

/** @public @react */
export declare function EditSubmenu(): JSX_2.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_2.Element;

/** @public */
export declare interface EmbedDefinition {
    readonly type: string;
    readonly title: string;
    readonly hostnames: readonly string[];
    readonly minWidth?: number;
    readonly minHeight?: number;
    readonly width: number;
    readonly height: number;
    readonly doesResize: boolean;
    readonly isAspectRatioLocked?: boolean;
    readonly overridePermissions?: TLEmbedShapePermissions;
    readonly instructionLink?: string;
    readonly backgroundColor?: string;
    readonly overrideOutlineRadius?: number;
    readonly toEmbedUrl: (url: string) => string | undefined;
    readonly fromEmbedUrl: (url: string) => string | undefined;
}

/**
 * Permissions with note inline from
 * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox
 *
 * @public
 */
export declare const embedShapePermissionDefaults: {
    readonly 'allow-downloads-without-user-activation': false;
    readonly 'allow-downloads': false;
    readonly 'allow-forms': true;
    readonly 'allow-modals': false;
    readonly 'allow-orientation-lock': false;
    readonly 'allow-pointer-lock': false;
    readonly 'allow-popups-to-escape-sandbox': false;
    readonly 'allow-popups': true;
    readonly 'allow-presentation': false;
    readonly 'allow-same-origin': true;
    readonly 'allow-scripts': true;
    readonly 'allow-storage-access-by-user-activation': false;
    readonly 'allow-top-navigation-by-user-activation': false;
    readonly 'allow-top-navigation': false;
};

/** @public */
export declare class EmbedShapeUtil extends BaseBoxShapeUtil<TLEmbedShape> {
    static type: "embed";
    static props: RecordProps<TLEmbedShape>;
    static migrations: TLPropsMigrations;
    private static embedDefinitions;
    static setEmbedDefinitions(embedDefinitions: readonly TLEmbedDefinition[]): void;
    getEmbedDefinitions(): readonly TLEmbedDefinition[];
    getEmbedDefinition(url: string): TLEmbedResult;
    getText(shape: TLEmbedShape): string;
    getAriaDescriptor(shape: TLEmbedShape): string | undefined;
    hideSelectionBoundsFg(shape: TLEmbedShape): boolean;
    canEdit(): boolean;
    canResize(shape: TLEmbedShape): boolean;
    canEditInReadonly(): boolean;
    getDefaultProps(): TLEmbedShape['props'];
    isAspectRatioLocked(shape: TLEmbedShape): boolean;
    onResize(shape: TLEmbedShape, info: TLResizeInfo<TLEmbedShape>): TLEmbedShape;
    component(shape: TLEmbedShape): JSX_2.Element | null;
    indicator(shape: TLEmbedShape): JSX_2.Element;
    getInterpolatedProps(startShape: TLEmbedShape, endShape: TLEmbedShape, t: number): TLEmbedShapeProps;
}

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

/** @public @react */
export declare function EraserToolbarItem(): JSX_2.Element;

/** @public */
export declare interface EventsProviderProps {
    onEvent?: TLUiEventHandler;
    children: React_2.ReactNode;
}

/** @public @react */
export declare function ExampleDialog({ title, body, cancel, confirm, displayDontShowAgain, maxWidth, onCancel, onContinue, }: ExampleDialogProps): JSX_2.Element;

/** @public */
export declare interface ExampleDialogProps {
    title?: string;
    body?: React_3.ReactNode;
    cancel?: string;
    confirm?: string;
    displayDontShowAgain?: boolean;
    maxWidth?: string;
    onCancel(): void;
    onContinue(): void;
}

/**
 * Export the given shapes as files.
 *
 * @param editor - The editor instance.
 * @param ids - The ids of the shapes to export.
 * @param opts - Options for the export.
 *
 * @public
 */
export declare function exportAs(editor: Editor, ids: TLShapeId[], opts: ExportAsOptions): Promise<void>;

/**
 * @deprecated The format & name parameters are now part of the opts object.
 * @public
 */
export declare function exportAs(editor: Editor, ids: TLShapeId[], format?: TLExportType, name?: string, opts?: TLImageExportOptions): Promise<void>;

/** @public */
export declare interface ExportAsOptions extends TLImageExportOptions {
    /** {@inheritdoc @tldraw/editor#TLImageExportOptions.format} */
    format: TLExportType;
    /** Name of the exported file. If undefined a predefined name, based on the selection, will be used. */
    name?: string;
}

/** @public @react */
export declare function ExportFileContentSubMenu(): JSX_2.Element;

/**
 * Export the given shapes as a blob.
 * @param editor - The editor instance.
 * @param ids - The ids of the shapes to export.
 * @param format - The format to export as.
 * @param opts - Rendering options.
 * @returns A promise that resolves to a blob.
 * @deprecated Use {@link @tldraw/editor#Editor.toImage} instead.
 * @public
 */
export declare function exportToBlob({ editor, ids, format, opts, }: {
    editor: Editor;
    format: TLExportType;
    ids: TLShapeId[];
    opts?: TLImageExportOptions;
}): Promise<Blob>;

/** @public @react */
export declare function ExtrasGroup(): JSX_2.Element;

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

/**
 * Fit a frame to its content.
 *
 * @param id - Id of the frame you wish to fit to content.
 * @param editor - tlraw editor instance.
 * @param opts - Options for fitting the frame.
 *
 * @public
 */
export declare function fitFrameToContent(editor: Editor, id: TLShapeId, opts?: {
    padding: number;
}): void;

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

/** @public */
export declare const FONT_FAMILIES: Record<TLDefaultFontStyle, st