import { AssetUtil } from '@tldraw/editor';
import { Atom } from '@tldraw/editor';
import { BaseBoxShapeTool } from '@tldraw/editor';
import { BaseBoxShapeUtil } from '@tldraw/editor';
import { BaseFrameLikeShapeUtil } 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 { ClipboardEvent as ClipboardEvent_2 } from 'react';
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/utils';
import { IndexKey as IndexKey_2 } from '@tldraw/editor';
import { JsonObject } from '@tldraw/utils';
import { JSX } from 'react/jsx-runtime';
import { JSX as JSX_2 } from 'react';
import { JSXElementConstructor } from 'react';
import { LANGUAGES } from '@tldraw/editor';
import { MigrationFailureReason } from '@tldraw/editor';
import { MigrationSequence } from '@tldraw/store';
import { NamedExoticComponent } from 'react';
import { Node as Node_2 } from '@tiptap/pm/model';
import { OverlayOptionsWithDisplayValues } from '@tldraw/editor';
import { OverlayUtil } from '@tldraw/editor';
import { PerfectDashTerminal } from '@tldraw/editor';
import { PointerEvent as PointerEvent_2 } from 'react';
import { Polygon2d } from '@tldraw/editor';
import { Polyline2d } from '@tldraw/editor';
import * as React_2 from 'react';
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/tlschema';
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 { RotateCorner } from '@tldraw/editor';
import { SerializedSchema } from '@tldraw/editor';
import { ShapeIndicatorOverlayUtil } from '@tldraw/editor';
import { ShapeUtil } from '@tldraw/editor';
import { ShapeWithCrop } from '@tldraw/editor';
import { SharedStyle } from '@tldraw/editor';
import { SnapIndicator } 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 { TLClipboardWriteInfo } from '@tldraw/editor';
import { TLContent } from '@tldraw/editor';
import { TLCropInfo } from '@tldraw/editor';
import { TLCursorType } from '@tldraw/editor';
import { TLDefaultColorStyle } from '@tldraw/tlschema';
import { TLDefaultFontStyle } from '@tldraw/tlschema';
import { TLDefaultSizeStyle } 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 { TLFileReplaceExternalContent } from '@tldraw/editor';
import { TLFontFace } from '@tldraw/tlschema';
import { TLFontFace as TLFontFace_2 } 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 { 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 { TLOverlay } from '@tldraw/editor';
import { TLPageId } from '@tldraw/editor';
import { TLParentId } from '@tldraw/tlschema';
import { TLPointerEventInfo } from '@tldraw/editor';
import { TLPropsMigrations } from '@tldraw/tlschema';
import { TLResizeInfo } from '@tldraw/editor';
import { TLRichText } from '@tldraw/editor';
import { TLSchema } from '@tldraw/editor';
import { TLScribble } from '@tldraw/editor';
import { TLSelectionHandle } from '@tldraw/editor';
import { TLShape } from '@tldraw/editor';
import { TLShapeCrop } from '@tldraw/editor';
import { TLShapeId } from '@tldraw/editor';
import { TLShapeId as TLShapeId_2 } from '@tldraw/tlschema';
import { TLShapePartial } from '@tldraw/editor';
import { TLShapeUtilCanBeLaidOutOpts } from '@tldraw/editor';
import { TLShapeUtilCanBindOpts } from '@tldraw/editor';
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 { TLTheme } from '@tldraw/editor';
import { TLThemeColors } from '@tldraw/editor';
import { TLUrlExternalAsset } from '@tldraw/editor';
import { TLVideoAsset } from '@tldraw/editor';
import { TLVideoShape } from '@tldraw/editor';
import { UnknownRecord } from '@tldraw/editor';
import { Validator } from '@tldraw/validate';
import { Vec } from '@tldraw/editor';
import { VecLike } from '@tldraw/editor';
import { VecModel } from '@tldraw/editor';
import { VecModel as VecModel_2 } from '@tldraw/tlschema';

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

/** @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_2[];

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

/**
 * Overlay util for the dashed binding hint shown on bound arrows. Draws stubs
 * along the arrow's handle path, from each bound endpoint's snapped body
 * position to the user's intended (handle) position, with a precision marker
 * at the handle.
 *
 * @public
 */
export declare class ArrowBindingHintOverlayUtil extends OverlayUtil<TLArrowBindingHintOverlay> {
    static type: string;
    options: {
        crossSize: number;
        dashedMinZoom: number;
        dashLengthRatio: number;
        dotRadius: number;
        opacity: number;
        strokeWidth: number;
        zIndex: number;
    };
    isActive(): boolean;
    getOverlays(): TLArrowBindingHintOverlay[];
    render(ctx: CanvasRenderingContext2D, overlays: TLArrowBindingHintOverlay[]): void;
    private drawEndpoint;
    /** Tangent direction at the handle, oriented toward the body. */
    private getMarkerAngle;
}

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

/**
 * Overlay util for arrow target hints (target shape indicator + edge snap circles).
 *
 * @public
 */
export declare class ArrowHintOverlayUtil extends OverlayUtil<TLArrowHintOverlay> {
    static type: string;
    options: {
        edgePointRadius: number;
        edgeRadius: number;
        handleRadius: number;
        lineWidth: number;
        zIndex: number;
    };
    isActive(): boolean;
    getOverlays(): TLArrowHintOverlay[];
    render(ctx: CanvasRenderingContext2D, overlays: TLArrowHintOverlay[]): void;
    /* Excluded from this release type: _renderIndicatorPath */
}

/** @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 extends ShapeOptionsWithDisplayValues<TLArrowShape, ArrowShapeUtilDisplayValues> {
    /**
     * 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(shape: TLArrowShape): boolean;
    canBind({ toShape }: TLShapeUtilCanBindOpts<TLArrowShape>): boolean;
    canSnap(shape: TLArrowShape): boolean;
    hideResizeHandles(shape: TLArrowShape): boolean;
    hideRotateHandle(shape: TLArrowShape): boolean;
    hideSelectionBoundsBg(shape: TLArrowShape): boolean;
    hideSelectionBoundsFg(shape: TLArrowShape): 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_2;
        meta?: Partial<JsonObject> | undefined;
        props?: Partial<TLArrowShapeProps> | undefined;
        type: "arrow";
    } & Partial<Omit<TLArrowShape, "id" | "meta" | "props" | "type">>) | {
        id: TLShapeId_2;
        props: {
            bend: number;
        };
        type: "arrow";
    } | {
        id: TLShapeId_2;
        props: {
            elbowMidPoint: number;
        };
        type: "arrow";
    } | undefined;
    private onArcMidpointHandleDrag;
    private onElbowMidpointHandleDrag;
    private onTerminalHandleDrag;
    onTranslateStart(shape: TLArrowShape): ({
        id: TLShapeId_2;
        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_2;
            start: VecModel_2;
        };
    };
    onDoubleClickHandle(shape: TLArrowShape, handle: TLHandle): TLShapePartial<TLArrowShape> | void;
    component(shape: TLArrowShape): JSX.Element | null;
    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;
}

/** @public */
export declare interface ArrowShapeUtilDisplayValues {
    strokeColor: string;
    strokeWidth: number;
    fillColor: string;
    patternFillFallbackColor: string;
    labelColor: string;
    labelFontFamily: string;
    labelFontSize: number;
    labelLineHeight: number;
    labelPadding: number;
    labelBorderRadius: number;
}

/**
 * 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 BookmarkAssetUtil extends AssetUtil<TLBookmarkAsset> {
    static type: "bookmark";
    static props: {
        description: Validator<string>;
        favicon: Validator<string>;
        image: Validator<string>;
        src: Validator<null | string>;
        title: Validator<string>;
    };
    static migrations: MigrationSequence;
    getDefaultProps(): TLBookmarkAsset['props'];
}

/** @public */
export declare interface BookmarkShapeOptions extends ShapeOptionsWithDisplayValues<TLBookmarkShape, BookmarkShapeUtilDisplayValues> {
}

/** @public */
export declare class BookmarkShapeUtil extends BaseBoxShapeUtil<TLBookmarkShape> {
    static type: "bookmark";
    static props: RecordProps<TLBookmarkShape>;
    static migrations: TLPropsMigrations;
    options: BookmarkShapeOptions;
    canResize(shape: TLBookmarkShape): boolean;
    hideSelectionBoundsFg(shape: TLBookmarkShape): boolean;
    getText(shape: TLBookmarkShape): string;
    getAriaDescriptor(shape: TLBookmarkShape): string | undefined;
    getDefaultProps(): TLBookmarkShape['props'];
    component(shape: TLBookmarkShape): JSX.Element;
    getIndicatorPath(shape: TLBookmarkShape): Path2D;
    onBeforeCreate(next: TLBookmarkShape): {
        id: TLShapeId_2;
        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_2;
        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 type BookmarkShapeUtilDisplayValues = object;

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

/**
 * Overlay util for the selection brush rectangle.
 *
 * @public
 */
export declare class BrushOverlayUtil extends OverlayUtil<TLBrushOverlay> {
    static type: string;
    options: BrushOverlayUtilOptions;
    isActive(): boolean;
    getOverlays(): TLBrushOverlay[];
    render(ctx: CanvasRenderingContext2D, overlays: TLBrushOverlay[]): void;
    renderMinimap(ctx: CanvasRenderingContext2D, overlays: TLBrushOverlay[], zoom: number): void;
}

/** @public */
export declare interface BrushOverlayUtilDisplayValues {
    fillColor: string;
    strokeColor: string;
    lineWidth: number;
}

/** @public */
export declare interface BrushOverlayUtilOptions extends OverlayOptionsWithDisplayValues<TLBrushOverlay, BrushOverlayUtilDisplayValues> {
    zIndex: number;
}

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

/**
 * Overlay util for collaborator selection brushes.
 *
 * @public
 */
export declare class CollaboratorBrushOverlayUtil extends OverlayUtil<TLCollaboratorBrushOverlay> {
    static type: string;
    options: {
        lineWidth: number;
        zIndex: number;
    };
    isActive(): boolean;
    getOverlays(): TLCollaboratorBrushOverlay[];
    render(ctx: CanvasRenderingContext2D, overlays: TLCollaboratorBrushOverlay[]): void;
    renderMinimap(ctx: CanvasRenderingContext2D, overlays: TLCollaboratorBrushOverlay[]): void;
}

/**
 * Overlay util for collaborator cursors (arrow + name tag + chat message).
 *
 * @public
 */
export declare class CollaboratorCursorOverlayUtil extends OverlayUtil<TLCollaboratorCursorOverlay> {
    static type: string;
    options: {
        chatMaxWidth: number;
        fontSize: number;
        nameMaxWidth: number;
        zIndex: number;
    };
    private _truncateCache;
    isActive(): boolean;
    getOverlays(): TLCollaboratorCursorOverlay[];
    render(ctx: CanvasRenderingContext2D, overlays: TLCollaboratorCursorOverlay[]): void;
    /** Name tag (no chat) - colored background with white text */
    private _drawNameTag;
    /** Name title (when chat is present) - text with shadow, no background */
    private _drawNameTitle;
    /** Chat bubble - colored background with white text */
    private _drawChatBubble;
    renderMinimap(ctx: CanvasRenderingContext2D, overlays: TLCollaboratorCursorOverlay[], zoom: number): void;
    private _truncateText;
    private _setTruncatedTextCache;
}

/**
 * Overlay util for off-screen collaborator cursor hints.
 * Shows a small directional arrow at the viewport edge pointing toward the collaborator.
 *
 * @public
 */
export declare class CollaboratorHintOverlayUtil extends OverlayUtil<TLCollaboratorHintOverlay> {
    static type: string;
    options: {
        lineWidth: number;
        viewportPadding: number;
        zIndex: number;
    };
    isActive(): boolean;
    getOverlays(): TLCollaboratorHintOverlay[];
    render(ctx: CanvasRenderingContext2D, overlays: TLCollaboratorHintOverlay[]): void;
    /* Excluded from this release type: _isCursorInViewport */
}

/**
 * Overlay util for collaborator scribble strokes (eraser, lasso, etc.).
 *
 * @public
 */
export declare class CollaboratorScribbleOverlayUtil extends OverlayUtil<TLCollaboratorScribbleOverlay> {
    static type: string;
    options: {
        cacheSize: number;
        streamline: number;
        zIndex: number;
    };
    private _collabScribblePathCache;
    isActive(): boolean;
    getOverlays(): TLCollaboratorScribbleOverlay[];
    render(ctx: CanvasRenderingContext2D, overlays: TLCollaboratorScribbleOverlay[]): void;
}

/**
 * Overlay util for remote collaborators' shape selection indicators.
 *
 * Renders a per-peer outline around each shape another user has selected,
 * using the peer's color. Drawn under the local `ShapeIndicatorOverlayUtil`
 * (lower z-index) so the local user's selection always appears on top.
 *
 * Non-interactive: contributes no hit-test geometry.
 *
 * @public
 */
export declare class CollaboratorShapeIndicatorOverlayUtil extends OverlayUtil<TLCollaboratorShapeIndicatorOverlay> {
    static type: string;
    options: {
        alpha: number;
        lineWidth: number;
        zIndex: number;
    };
    isActive(): boolean;
    getOverlays(): TLCollaboratorShapeIndicatorOverlay[];
    render(ctx: CanvasRenderingContext2D, overlays: TLCollaboratorShapeIndicatorOverlay[]): void;
}

/** @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 Omit<TLImageExportOptions, 'format'> {
    /** 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 ["canva.com"];
    readonly title: "Canva";
    readonly toEmbedUrl: (url: string) => string | undefined;
    readonly type: "canva";
    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_2) => void): RichTextFontVisitorState;

/** @public */
export declare const defaultAssetUtils: readonly [typeof ImageAssetUtil, typeof VideoAssetUtil, typeof BookmarkAssetUtil];

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

/**
 * Built-in geo type definitions keyed by their `geo` prop value. Every default
 * geo type (rectangle, ellipse, cloud, etc.) is registered here. The same
 * registry powers path generation, handle snapping, the style panel picker,
 * and creation defaults — so custom types added through
 * {@link @tldraw/tldraw#GeoShapeUtil.configure | GeoShapeUtil.configure()} get
 * the same treatment as the built-ins.
 *
 * The key order here defines the visual order of items in the geo style panel
 * picker.
 *
 * @public
 */
export declare const defaultGeoTypeDefinitions: {
    readonly 'arrow-down': {
        readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
        readonly icon: "geo-arrow-down";
        readonly snapType: "polygon";
    };
    readonly 'arrow-left': {
        readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
        readonly icon: "geo-arrow-left";
        readonly snapType: "polygon";
    };
    readonly 'arrow-right': {
        readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
        readonly icon: "geo-arrow-right";
        readonly snapType: "polygon";
    };
    readonly 'arrow-up': {
        readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
        readonly icon: "geo-arrow-up";
        readonly snapType: "polygon";
    };
    readonly 'check-box': {
        readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
        readonly icon: "geo-check-box";
        readonly snapType: "polygon";
    };
    readonly 'rhombus-2': {
        readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
        readonly icon: "geo-rhombus-2";
        readonly snapType: "polygon";
    };
    readonly 'x-box': {
        readonly getPath: (w: number, h: number, shape: TLGeoShape, strokeWidth: number) => PathBuilder;
        readonly icon: "geo-x-box";
        readonly snapType: "polygon";
    };
    readonly cloud: {
        readonly defaultSize: {
            readonly h: 180;
            readonly w: 300;
        };
        readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
        readonly icon: "geo-cloud";
        readonly snapType: "blobby";
    };
    readonly diamond: {
        readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
        readonly icon: "geo-diamond";
        readonly snapType: "polygon";
    };
    readonly ellipse: {
        readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
        readonly icon: "geo-ellipse";
        readonly snapType: "blobby";
    };
    readonly heart: {
        readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
        readonly icon: "geo-heart";
        readonly snapType: "blobby";
    };
    readonly hexagon: {
        readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
        readonly icon: "geo-hexagon";
        readonly snapType: "polygon";
    };
    readonly octagon: {
        readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
        readonly icon: "geo-octagon";
        readonly snapType: "polygon";
    };
    readonly oval: {
        readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
        readonly icon: "geo-oval";
        readonly snapType: "blobby";
    };
    readonly pentagon: {
        readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
        readonly icon: "geo-pentagon";
        readonly snapType: "polygon";
    };
    readonly rectangle: {
        readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
        readonly icon: "geo-rectangle";
        readonly snapType: "polygon";
    };
    readonly rhombus: {
        readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
        readonly icon: "geo-rhombus";
        readonly snapType: "polygon";
    };
    readonly star: {
        readonly defaultSize: {
            readonly h: 190;
            readonly w: 200;
        };
        readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
        readonly icon: "geo-star";
        readonly snapType: "polygon";
    };
    readonly trapezoid: {
        readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
        readonly icon: "geo-trapezoid";
        readonly snapType: "polygon";
    };
    readonly triangle: {
        readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
        readonly icon: "geo-triangle";
        readonly snapType: "polygon";
    };
};

/** @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<"bookmark" | "image" | "video">>;

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

/** @public */
export declare function defaultHandleExternalFileReplaceContent(editor: Editor, { file, shapeId }: TLFileReplaceExternalContent, options: TLDefaultExternalContentHandlerOpts): Promise<TLAsset | undefined>;

/** @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 */
export declare const defaultOverlayUtils: readonly [typeof CollaboratorShapeIndicatorOverlayUtil, typeof ShapeIndicatorOverlayUtil, typeof SelectionForegroundOverlayUtil, typeof ShapeHandleOverlayUtil, typeof BrushOverlayUtil, typeof ZoomBrushOverlayUtil, typeof SnapIndicatorOverlayUtil, typeof ScribbleOverlayUtil, typeof CollaboratorBrushOverlayUtil, typeof CollaboratorScribbleOverlayUtil, typeof CollaboratorHintOverlayUtil, typeof ArrowHintOverlayUtil, typeof ArrowBindingHintOverlayUtil, typeof CollaboratorCursorOverlayUtil];

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

/** @public @react */
declare function DefaultPeopleMenu({ children }: DefaultPeopleMenuProps): JSX.Element | null;
export { DefaultPeopleMenu }
export { DefaultPeopleMenu as PeopleMenu }

/** @public @react */
export declare function DefaultPeopleMenuAvatar({ userId }: TLUiPeopleMenuAvatarProps): JSX.Element | null;

/** @public @react */
export declare function DefaultPeopleMenuContent({ userIds }: DefaultPeopleMenuContentProps): JSX.Element;

/** @public */
export declare interface DefaultPeopleMenuContentProps {
    userIds: string[];
}

/** @public @react */
export declare function DefaultPeopleMenuFacePile({ userIds, userName, userColor }: TLUiPeopleMenuFacePileProps): JSX.Element;

/** @public @react */
export declare const DefaultPeopleMenuItem: NamedExoticComponent<TLUiPeopleMenuItemProps>;

/** @public */
declare interface DefaultPeopleMenuProps {
    children?: ReactNode;
}
export { DefaultPeopleMenuProps }
export { DefaultPeopleMenuProps as PeopleMenuProps }

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

/** @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 function DefaultUserPresenceEditor(): JSX.Element;

/** @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 | undefined;
    type?: string | undefined;
}): 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 extends ShapeOptionsWithDisplayValues<TLDrawShape, DrawShapeUtilDisplayValues> {
    /**
     * 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;
    getIndicatorPath(shape: TLDrawShape): Path2D;
    toSvg(shape: TLDrawShape, ctx: SvgExportContext): JSX.Element;
    getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[];
    onResize(shape: TLDrawShape, info: TLResizeInfo<TLDrawShape>): {
        props: {
            scaleX: number;
            scaleY: number;
        };
    } | undefined;
    expandSelectionOutlinePx(shape: TLDrawShape): number;
    getInterpolatedProps(startShape: TLDrawShape, endShape: TLDrawShape, t: number): TLDrawShapeProps;
}

/** @public */
export declare interface DrawShapeUtilDisplayValues {
    strokeColor: string;
    strokeWidth: number;
    fillColor: string;
    patternFillFallbackColor: string;
}

/** @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?: number;
    readonly width: number;
    readonly height: number;
    readonly doesResize: boolean;
    readonly isAspectRatioLocked?: boolean;
    readonly overridePermissions?: TLEmbedShapePermissions;
    readonly instructionLink?: string;
    readonly backgroundColor?: string;
    readonly embedOnPaste?: boolean;
    readonly canEditWhileLocked?: boolean;
    readonly overrideOutlineRadius?: number;
    readonly toEmbedUrl: (url: string) => string | undefined;
    readonly fromEmbedUrl: (url: string) => string | undefined;
}

/** @public */
export declare interface EmbedShapeOptions extends ShapeOptionsWithDisplayValues<TLEmbedShape, EmbedShapeUtilDisplayValues> {
    /** The embed definitions to use for this shape util. */
    readonly embedDefinitions: readonly TLEmbedDefinition[];
}

/**
 * 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;
    options: EmbedShapeOptions;
    canEditWhileLocked(shape: TLEmbedShape): boolean;
    private static legacyEmbedDefinitions;
    /** @deprecated - Use `EmbedShapeUtil.configure({ embedDefinitions: [...] })` instead. */
    static setEmbedDefinitions(embedDefinitions: readonly EmbedDefinition[]): void;
    private getEmbedDefs;
    getEmbedDefinitions(): readonly TLEmbedDefinition[];
    getEmbedDefinition(url: string): TLEmbedResult;
    getText(shape: TLEmbedShape): string;
    getAriaDescriptor(shape: TLEmbedShape): string | undefined;
    hideSelectionBoundsFg(shape: TLEmbedShape): boolean;
    canEdit(shape: TLEmbedShape): boolean;
    canResize(shape: TLEmbedShape): boolean;
    canEditInReadonly(shape: TLEmbedShape): boolean;
    getDefaultProps(): TLEmbedShape['props'];
    getGeometry(shape: TLEmbedShape): Geometry2d;
    isAspectRatioLocked(shape: TLEmbedShape): boolean;
    onResize(shape: TLEmbedShape, info: TLResizeInfo<TLEmbedShape>): TLEmbedShape;
    component(shape: TLEmbedShape): JSX.Element | null;
    getIndicatorPath(shape: TLEmbedShape): Path2D;
    getInterpolatedProps(startShape: TLEmbedShape, endShape: TLEmbedShape, t: number): TLEmbedShapeProps;
}

/** @public */
export declare interface EmbedShapeUtilDisplayValues {
    showShadow: boolean;
}

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

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

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

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

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

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

/**
 * Fit a frame (or any frame-like container shape) 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.Element | null;

/** @public */
export declare interface FrameShapeOptions extends ShapeOptionsWithDisplayValues<TLFrameShape, FrameShapeUtilDisplayValues> {
    /**
     * When true, the frame will display colors for the shape's headings and background.
     */
    showColors: boolean;
    /**
     * When true, the frame will resize its children when the frame itself is resized.
     */
    resizeChildren: boolean;
}

/** @public */
export declare class FrameShapeTool extends BaseBoxShapeTool {
    static id: string;
    static initial: string;
    shapeType: "frame";
    onCreate(shape: null | TLShape): void;
}

/** @public */
export declare class FrameShapeUtil extends BaseFrameLikeShapeUtil<TLFrameShape> {
    static type: "frame";
    static props: RecordProps<TLFrameShape>;
    static migrations: TLPropsMigrations;
    options: FrameShapeOptions;
    static configure<T extends TLShapeUtilConstructor<any, any>>(this: T, options: T extends new (...args: any[]) => {
        options: infer Options;
    } ? Partial<Options> : never): T;
    canEdit(shape: TLFrameShape, info: TLEditStartInfo): boolean;
    canResize(shape: TLFrameShape): boolean;
    canResizeChildren(shape: TLFrameShape): boolean;
    isExportBoundsContainer(): boolean;
    getDefaultProps(): TLFrameShape['props'];
    getAriaDescriptor(shape: TLFrameShape): string;
    getGeometry(shape: TLFrameShape): Geometry2d;
    getText(shape: TLFrameShape): string | undefined;
    component(shape: TLFrameShape): JSX.Element;
    toSvg(shape: TLFrameShape, ctx: SvgExportContext): JSX.Element;
    getIndicatorPath(shape: TLFrameShape): Path2D;
    getInterpolatedProps(startShape: TLFrameShape, endShape: TLFrameShape, t: number): TLFrameShapeProps;
    onDoubleClickEdge(shape: TLFrameShape, info: TLClickEventInfo): {
        id: TLShapeId_2;
        props: {
            h: number;
            w: number;
        };
        type: "frame";
    } | undefined;
    onDoubleClickCorner(shape: TLFrameShape): {
        id: TLShapeId_2;
        type: "frame";
    };
}

/** @public */
export declare interface FrameShapeUtilDisplayValues {
    fillColor: string;
    strokeColor: string;
    showColorsFillColor: string;
    showColorsStrokeColor: string;
    headingFillColor: string;
    headingStrokeColor: string;
    headingTextColor: string;
    showColorsHeadingFillColor: string;
    showColorsHeadingStrokeColor: string;
    showColorsHeadingTextColor: string;
}

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

/** @public */
export declare interface GeoShapeOptions extends ShapeOptionsWithDisplayValues<TLGeoShape, GeoShapeUtilDisplayValues> {
    showTextOutline: boolean;
    /**
     * A map of custom geo type definitions. Each key becomes a new value for
     * {@link @tldraw/editor#GeoShapeGeoStyle} that can be used in the style panel
     * and on shapes. Custom geo types inherit all standard geo shape behavior
     * (labels, resizing, styling, etc.).
     *
     * @example
     * ```ts
     * const MyGeoShapeUtil = GeoShapeUtil.configure({
     *   customGeoTypes: {
     *     'my-shape': {
     *       getPath: (w, h) => new PathBuilder().moveTo(0, 0).lineTo(w, 0).lineTo(w, h).lineTo(0, h).close(),
     *       snapType: 'polygon',
     *       icon: 'geo-rectangle',
     *     },
     *   },
     * })
     * ```
     */
    customGeoTypes?: Record<string, GeoTypeDefinition>;
}

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

/** @public */
export declare class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
    static type: "geo";
    static props: RecordProps<TLGeoShape>;
    static migrations: TLPropsMigrations;
    static configure<T extends TLShapeUtilConstructor<any, any>>(this: T, options: T extends new (...args: any[]) => {
        options: infer Options;
    } ? Partial<Options> : never): T;
    options: GeoShapeOptions;
    canEdit(shape: TLGeoShape): boolean;
    getDefaultProps(): TLGeoShape['props'];
    getGeometry(shape: TLGeoShape): Group2d;
    getHandleSnapGeometry(shape: TLGeoShape): HandleSnapGeometry;
    getText(shape: TLGeoShape): string;
    getFontFaces(shape: TLGeoShape): TLFontFace[];
    component(shape: TLGeoShape): JSX.Element;
    getIndicatorPath(shape: TLGeoShape): Path2D | undefined;
    toSvg(shape: TLGeoShape, ctx: SvgExportContext): JSX.Element;
    getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[];
    onResize(shape: TLGeoShape, { handle, newPoint, scaleX, scaleY, initialShape }: TLResizeInfo<TLGeoShape>): {
        props: {
            growY: number;
            h: number;
            w: number;
        };
        x: number;
        y: number;
    };
    onBeforeCreate(shape: TLGeoShape): {
        id: TLShapeId;
        index: IndexKey;
        isLocked: boolean;
        meta: JsonObject;
        opacity: number;
        parentId: TLParentId;
        props: {
            align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start";
            color: TLDefaultColorStyle;
            dash: "dashed" | "dotted" | "draw" | "none" | "solid";
            fill: "fill" | "lined-fill" | "none" | "pattern" | "semi" | "solid";
            font: TLDefaultFontStyle;
            geo: "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "check-box" | "cloud" | "diamond" | "ellipse" | "heart" | "hexagon" | "octagon" | "oval" | "pentagon" | "rectangle" | "rhombus-2" | "rhombus" | "star" | "trapezoid" | "triangle" | "x-box";
            growY: number;
            h: number;
            labelColor: TLDefaultColorStyle;
            richText: {
                attrs?: any;
                content: unknown[];
                type: string;
            };
            scale: number;
            size: "l" | "m" | "s" | "xl";
            url: string;
            verticalAlign: "end" | "middle" | "start";
            w: number;
        };
        rotation: number;
        type: "geo";
        typeName: "shape";
        x: number;
        y: number;
    } | undefined;
    onBeforeUpdate(prev: TLGeoShape, next: TLGeoShape): {
        id: TLShapeId;
        index: IndexKey;
        isLocked: boolean;
        meta: JsonObject;
        opacity: number;
        parentId: TLParentId;
        props: {
            align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start";
            color: TLDefaultColorStyle;
            dash: "dashed" | "dotted" | "draw" | "none" | "solid";
            fill: "fill" | "lined-fill" | "none" | "pattern" | "semi" | "solid";
            font: TLDefaultFontStyle;
            geo: "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "check-box" | "cloud" | "diamond" | "ellipse" | "heart" | "hexagon" | "octagon" | "oval" | "pentagon" | "rectangle" | "rhombus-2" | "rhombus" | "star" | "trapezoid" | "triangle" | "x-box";
            growY: number;
            h: number;
            labelColor: TLDefaultColorStyle;
            richText: {
                attrs?: any;
                content: unknown[];
                type: string;
            };
            scale: number;
            size: "l" | "m" | "s" | "xl";
            url: string;
            verticalAlign: "end" | "middle" | "start";
            w: number;
        };
        rotation: number;
        type: "geo";
        typeName: "shape";
        x: number;
        y: number;
    } | undefined;
    onDoubleClick(shape: TLGeoShape): {
        id: TLShapeId;
        index: IndexKey;
        isLocked: boolean;
        meta: JsonObject;
        opacity: number;
        parentId: TLParentId;
        props: {
            align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start";
            color: TLDefaultColorStyle;
            dash: "dashed" | "dotted" | "draw" | "none" | "solid";
            fill: "fill" | "lined-fill" | "none" | "pattern" | "semi" | "solid";
            font: TLDefaultFontStyle;
            geo: "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "check-box" | "cloud" | "diamond" | "ellipse" | "heart" | "hexagon" | "octagon" | "oval" | "pentagon" | "rectangle" | "rhombus-2" | "rhombus" | "star" | "trapezoid" | "triangle" | "x-box";
            growY: number;
            h: number;
            labelColor: TLDefaultColorStyle;
            richText: {
                attrs?: any;
                content: unknown[];
                type: string;
            };
            scale: number;
            size: "l" | "m" | "s" | "xl";
            url: string;
            verticalAlign: "end" | "middle" | "start";
            w: number;
        };
        rotation: number;
        type: "geo";
        typeName: "shape";
        x: number;
        y: number;
    } | {
        id: TLShapeId;
        index: IndexKey;
        isLocked: boolean;
        meta: JsonObject;
        opacity: number;
        parentId: TLParentId;
        props: {
            geo: "check-box";
        };
        rotation: number;
        type: "geo";
        typeName: "shape";
        x: number;
        y: number;
    } | {
        id: TLShapeId;
        index: IndexKey;
        isLocked: boolean;
        meta: JsonObject;
        opacity: number;
        parentId: TLParentId;
        props: {
            geo: "rectangle";
        };
        rotation: number;
        type: "geo";
        typeName: "shape";
        x: number;
        y: number;
    } | undefined;
    getInterpolatedProps(startShape: TLGeoShape, endShape: TLGeoShape, t: number): TLGeoShapeProps;
    /**
     * Get the unscaled dimensions from a geo shape's props
     */
    private getUnscaledGeoProps;
    /**
     * Calculate the growY needed to fit a label within a shape.
     * Returns null if no change is needed, otherwise returns the new unscaled growY value.
     */
    private calculateGrowY;
    /**
     * Calculate expanded dimensions when adding a label to a shape for the first time.
     * Ensures the shape meets minimum size requirements and is square if originally small.
     */
    private expandShapeForFirstLabel;
    private _labelSizesForGeoCache;
    /**
     * Get the cached label size for the shape. Don't call with empty rich text.
     */
    private getUnscaledLabelSize;
    /**
     * Expensively measure the unscaled label size for the shape. Avoid using it if we can.
     */
    private measureUnscaledLabelSize;
}

/** @public */
export declare interface GeoShapeUtilDisplayValues {
    strokeColor: string;
    strokeRoundness: number;
    strokeWidth: number;
    fillColor: string;
    patternFillFallbackColor: string;
    labelColor: string;
    labelFontFamily: string;
    labelFontSize: number;
    labelMinWidth: number;
    labelExtraPadding: number;
    labelLineHeight: number;
    labelFontWeight: string;
    labelFontVariant: string;
    labelFontStyle: string;
    labelHorizontalAlign: 'center' | 'end' | 'start';
    labelVerticalAlign: 'end' | 'middle' | 'start';
    labelPadding: number;
    labelEdgeMargin: number;
    minSizeWithLabel: number;
}

/**
 * Defines the behavior for a geo shape type. Every built-in geo type is
 * registered through this same interface (see {@link defaultGeoTypeDefinitions}),
 * and consumers can register additional types via
 * {@link @tldraw/tldraw#GeoShapeUtil.configure | GeoShapeUtil.configure()}.
 *
 * @public
 */
export declare interface GeoTypeDefinition {
    /**
     * Generate the path geometry for this geo type.
     *
     * @param w - The width of the shape (already clamped to min 1)
     * @param h - The height of the shape (already clamped to min 1, includes growY)
     * @param shape - The full geo shape record, for access to props like id, dash, fill, etc.
     * @param strokeWidth - The scaled stroke width (strokeWidth * scale)
     */
    getPath(w: number, h: number, shape: TLGeoShape, strokeWidth: number): PathBuilder;
    /** Snap behavior: 'polygon' snaps to vertices + center, 'blobby' snaps to center only. */
    snapType: 'blobby' | 'polygon';
    /** Default creation size when clicking (not dragging). Defaults to 200x200. */
    defaultSize?: {
        h: number;
        w: number;
    };
    /** Icon name for the style panel geo picker. */
    icon: string;
    /**
     * Optional double-click handler. Return an object with partial props to update the shape,
     * or void to do nothing.
     */
    onDoubleClick?(shape: TLGeoShape): {
        props: Partial<TLGeoShape['props']>;
    } | void;
}

/** @public */
export declare function getArrowBindings(editor: Editor, shape: TLArrowShape): TLArrowBindings;

/** @public */
export declare function getArrowInfo(editor: Editor, shape: TLArrowShape | TLShapeId): TLArrowInfo | undefined;

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

/** @public */
export declare function getArrowTerminalsInArrowSpace(editor: Editor, shape: TLArrowShape, bindings: TLArrowBindings): {
    end: Vec;
    start: Vec;
};

/** @public */
export declare function getAssetInfo(editor: Editor, file: File, assetId?: TLAssetId): Promise<null | TLAsset>;

/**
 * Returns the current list of color style items for the style panel,
 * derived from the theme's color palette. Only palette colors are included;
 * utility colors like `text`, `background`, etc. are excluded.
 *
 * Colors are ordered by their position in {@link @tldraw/tlschema#DefaultColorStyle},
 * followed by any additional theme colors in their object key order.
 *
 * @public
 */
export declare function getColorStyleItems(colors: TLThemeColors): StyleValuesForUi<string>;

/** @public */
export declare function getCropBox<T extends ShapeWithCrop>(shape: T, info: TLCropInfo<T>, opts?: CropBoxOptions): {
    id: TLShapeId;
    props: ShapeWithCrop['props'];
    type: T['type'];
    x: number;
    y: number;
} | undefined;

/** @public */
export declare function getDefaultCrop(): TLShapeCrop;

/**
 * Get the resolved display values for a shape, merging the base values with any overrides.
 *
 * @public
 */
export declare function getDisplayValues<Shape extends TLShape, DisplayValues extends object>(util: {
    editor: Editor;
    options: ShapeOptionsWithDisplayValues<Shape, DisplayValues>;
}, shape: Shape, colorMode?: 'dark' | 'light'): DisplayValues;

/**
 * Tests whether an URL supports embedding and returns the result. If we encounter an error, we
 * return undefined.
 *
 * @param inputUrl - The URL to match
 * @public
 */
export declare function getEmbedInfo(definitions: readonly TLEmbedDefinition[], inputUrl: string): TLEmbedResult;

/** @public */
export declare function getFontFamily(theme: TLTheme, font: string): string;

/**
 * Returns the current list of font style items for the style panel,
 * derived from the theme's font palette.
 *
 * Fonts are ordered by their position in {@link @tldraw/tlschema#DefaultFontStyle},
 * followed by any additional theme fonts in their object key order.
 *
 * @public
 */
export declare function getFontStyleItems(theme: TLTheme): StyleValuesForUi<string>;

/**
 * Look up a geo type definition by name, checking custom types first then
 * falling back to the built-in registry.
 *
 * @public
 */
export declare function getGeoTypeDefinition(name: string, customGeoTypes?: Record<string, GeoTypeDefinition>): GeoTypeDefinition | undefined;

/** @public */
export declare function getHitShapeOnCanvasPointerDown(editor: Editor, hitLabels?: boolean): TLShape | undefined;

/** @public */
export declare function getPointsFromDrawSegment(segment: TLDrawShapeSegment, scaleX: number, scaleY: number, points?: Vec[]): Vec[];

/** @public */
export declare function getPointsFromDrawSegments(segments: TLDrawShapeSegment[], scaleX?: number, scaleY?: number): Vec[];

/**
 * ## getStroke
 *
 * Get an array of points describing a polygon that surrounds the input points.
 *
 * @param points - An array of points (as `[x, y, pressure]` or `{x, y, pressure}`). Pressure is
 *   optional in both cases.
 * @param options - An object with options.
 * @public
 */
export declare function getStroke(points: VecLike[], options?: StrokeOptions): Vec[];

/**
 * ## getStrokeOutlinePoints
 *
 * Get an array of points (as `[x, y]`) representing the outline of a stroke.
 *
 * @param points - An array of StrokePoints as returned from `getStrokePoints`.
 * @param options - An object with options.
 * @public
 */
export declare function getStrokeOutlinePoints(strokePoints: StrokePoint[], options?: StrokeOptions): Vec[];

/**
 * ## getStrokePoints
 *
 * Get an array of points as objects with an adjusted point, pressure, vector, distance, and
 * runningLength.
 *
 * @param points - An array of points (as `[x, y, pressure]` or `{x, y, pressure}`). Pressure is
 *   optional in both cases.
 * @param options - An object with options.
 * @public
 */
export declare function getStrokePoints(rawInputPoints: VecLike[], options?: StrokeOptions): StrokePoint[];

/**
 * Turn an array of stroke points into a path of quadratic curves.
 *
 * @param points - The stroke points returned from perfect-freehand
 * @param closed - Whether the shape is closed
 *
 * @public
 */
export declare function getSvgPathFromStrokePoints(points: StrokePoint[], closed?: boolean): string;

/**
 * Original (uncropped) width and height of shape.
 *
 * @public
 */
export declare function getUncroppedSize(shapeSize: {
    h: number;
    w: number;
}, crop: null | TLShapeCrop): {
    h: number;
    w: number;
};

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

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

/**
 * When the user copies or cuts, write the contents to the clipboard.
 *
 * @public
 */
export declare const handleNativeOrMenuCopy: (editor: Editor, context?: TLClipboardWriteInfo) => Promise<boolean>;

/** @public */
export declare class HandTool extends StateNode {
    static id: string;
    static initial: string;
    static isLockable: boolean;
    static children(): TLStateNodeConstructor[];
    onDoubleClick(info: TLClickEventInfo): void;
    onTripleClick(info: TLClickEventInfo): void;
    onQuadrupleClick(info: TLClickEventInfo): void;
}

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

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

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

/** @public */
export declare function hideAllTooltips(): void;

/** @public */
export declare interface HighlightShapeOptions extends ShapeOptionsWithDisplayValues<TLHighlightShape, HighlightShapeUtilDisplayValues> {
    /**
     * 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 HighlightShapeTool extends StateNode {
    static id: string;
    static initial: string;
    static useCoalescedEvents: boolean;
    static children(): TLStateNodeConstructor[];
    static isLockable: boolean;
    shapeType: string;
    onExit(): void;
}

/** @public */
export declare class HighlightShapeUtil extends ShapeUtil<TLHighlightShape> {
    static type: "highlight";
    static props: RecordProps<TLHighlightShape>;
    static migrations: TLPropsMigrations;
    options: HighlightShapeOptions;
    hideResizeHandles(shape: TLHighlightShape): boolean;
    hideRotateHandle(shape: TLHighlightShape): boolean;
    hideSelectionBoundsFg(shape: TLHighlightShape): boolean;
    getDefaultProps(): TLHighlightShape['props'];
    getGeometry(shape: TLHighlightShape): Circle2d | Polygon2d;
    component(shape: TLHighlightShape): JSX.Element;
    backgroundComponent(shape: TLHighlightShape): JSX.Element;
    getIndicatorPath(shape: TLHighlightShape): Path2D;
    toSvg(shape: TLHighlightShape, ctx: SvgExportContext): JSX.Element;
    toBackgroundSvg(shape: TLHighlightShape, ctx: SvgExportContext): JSX.Element;
    onResize(shape: TLHighlightShape, info: TLResizeInfo<TLHighlightShape>): {
        props: {
            scaleX: number;
            scaleY: number;
        };
    } | undefined;
    getInterpolatedProps(startShape: TLHighlightShape, endShape: TLHighlightShape, t: number): TLHighlightShapeProps;
}

/** @public */
export declare interface HighlightShapeUtilDisplayValues {
    strokeColor: string;
    strokeWidth: number;
    underlayOpacity: number;
    overlayOpacity: number;
}

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

/** @public */
export declare const iconTypes: readonly ["align-bottom", "align-center-horizontal", "align-center-vertical", "align-left", "align-right", "align-top", "alt", "arrow-arc", "arrow-cycle", "arrow-elbow", "arrow-left", "arrowhead-arrow", "arrowhead-bar", "arrowhead-diamond", "arrowhead-dot", "arrowhead-none", "arrowhead-square", "arrowhead-triangle-inverted", "arrowhead-triangle", "blob", "bold", "bookmark", "bring-forward", "bring-to-front", "broken", "bulletList", "check-circle", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "chevrons-ne", "chevrons-sw", "clipboard-copied", "clipboard-copy", "code", "color", "comment", "corners", "crop", "cross-2", "cross-circle", "dash-dashed", "dash-dotted", "dash-draw", "dash-solid", "disconnected", "discord", "distribute-horizontal", "distribute-vertical", "dot", "dots-horizontal", "dots-vertical", "download", "drag-handle-dots", "duplicate", "edit", "external-link", "fill-fill", "fill-lined-fill", "fill-none", "fill-pattern", "fill-semi", "fill-solid", "follow", "following", "font-draw", "font-mono", "font-sans", "font-serif", "geo-arrow-down", "geo-arrow-left", "geo-arrow-right", "geo-arrow-up", "geo-check-box", "geo-cloud", "geo-diamond", "geo-ellipse", "geo-heart", "geo-hexagon", "geo-octagon", "geo-oval", "geo-pentagon", "geo-rectangle", "geo-rhombus-2", "geo-rhombus", "geo-star", "geo-trapezoid", "geo-triangle", "geo-x-box", "github", "group", "heading", "help-circle", "highlight", "horizontal-align-end", "horizontal-align-middle", "horizontal-align-start", "info-circle", "italic", "leading", "link", "list", "lock", "manual", "menu", "minus", "mixed", "pack", "plus", "question-mark-circle", "question-mark", "redo", "reset-zoom", "rotate-ccw", "rotate-cw", "send-backward", "send-to-back", "share-1", "size-extra-large", "size-large", "size-medium", "size-small", "spline-cubic", "spline-line", "stack-horizontal", "stack-vertical", "status-offline", "stretch-horizontal", "stretch-vertical", "strike", "text-align-center", "text-align-left", "text-align-right", "toggle-off", "toggle-on", "tool-arrow", "tool-eraser", "tool-frame", "tool-hand", "tool-highlight", "tool-laser", "tool-line", "tool-media", "tool-note", "tool-pencil", "tool-pointer", "tool-screenshot", "tool-text", "trash", "twitter", "underline", "undo", "ungroup", "unlock", "vertical-align-end", "vertical-align-middle", "vertical-align-start", "warning-triangle", "zoom-in", "zoom-out"];

/** @public */
export declare class ImageAssetUtil extends AssetUtil<TLImageAsset> {
    static type: "image";
    static props: {
        fileSize: Validator<number | undefined>;
        h: Validator<number>;
        isAnimated: Validator<boolean>;
        mimeType: Validator<null | string>;
        name: Validator<string>;
        pixelRatio: Validator<number | undefined>;
        src: Validator<null | string>;
        w: Validator<number>;
    };
    static migrations: MigrationSequence;
    options: {
        maxDimension: number;
        supportedMimeTypes: null | readonly string[];
    };
    getDefaultProps(): TLImageAsset['props'];
    getSupportedMimeTypes(): readonly string[];
    getAssetFromFile(file: File, assetId: TLAssetId): Promise<null | TLImageAsset>;
}

/** @public */
export declare interface ImageShapeOptions extends ShapeOptionsWithDisplayValues<TLImageShape, ImageShapeUtilDisplayValues> {
}

/** @public */
export declare class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {
    static type: "image";
    static props: RecordProps<TLImageShape>;
    static migrations: TLPropsMigrations;
    static handledAssetTypes: readonly ["image"];
    options: ImageShapeOptions;
    isAspectRatioLocked(shape: TLImageShape): boolean;
    canCrop(shape: TLImageShape): boolean;
    isExportBoundsContainer(): boolean;
    getDefaultProps(): TLImageShape['props'];
    createShapeForAsset(asset: TLAsset, position: VecModel): null | TLShapePartial;
    getGeometry(shape: TLImageShape): Geometry2d;
    getAriaDescriptor(shape: TLImageShape): string;
    onResize(shape: TLImageShape, info: TLResizeInfo<TLImageShape>): TLImageShape;
    component(shape: TLImageShape): JSX.Element;
    getIndicatorPath(shape: TLImageShape): Path2D | undefined;
    toSvg(shape: TLImageShape, ctx: SvgExportContext): Promise<JSX.Element | null>;
    onDoubleClickEdge(shape: TLImageShape): void;
    getInterpolatedProps(startShape: TLImageShape, endShape: TLImageShape, t: number): TLImageShapeProps;
}

/** @public */
export declare interface ImageShapeUtilDisplayValues {
}

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

/** @public */
export declare const KeyboardShiftEnterTweakExtension: Extension<any, any>;

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

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

/** @public */
export declare class LaserTool extends StateNode {
    static id: string;
    static initial: string;
    static children(): TLStateNodeConstructor[];
    static isLockable: boolean;
    private sessionId;
    onEnter(): void;
    onExit(): void;
    onCancel(): void;
    /**
     * Get the current laser session ID, or create a new one if none exists or the current one is fading.
     */
    getSessionId(): string;
}

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

/** @public */
export declare interface LineShapeOptions extends ShapeOptionsWithDisplayValues<TLLineShape, LineShapeUtilDisplayValues> {
}

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

/** @public */
export declare class LineShapeUtil extends ShapeUtil<TLLineShape> {
    static type: "line";
    static props: RecordProps<TLLineShape>;
    static migrations: TLPropsMigrations;
    options: LineShapeOptions;
    hideResizeHandles(shape: TLLineShape): boolean;
    hideRotateHandle(shape: TLLineShape): boolean;
    hideSelectionBoundsFg(shape: TLLineShape): boolean;
    hideSelectionBoundsBg(shape: TLLineShape): boolean;
    hideInMinimap(): boolean;
    getDefaultProps(): TLLineShape['props'];
    getGeometry(shape: TLLineShape): PathBuilderGeometry2d;
    getHandles(shape: TLLineShape): TLHandle[];
    onResize(shape: TLLineShape, info: TLResizeInfo<TLLineShape>): {
        props: {
            points: {
                [x: string]: {
                    id: string;
                    index: IndexKey;
                    x: number;
                    y: number;
                };
            };
        };
    };
    onBeforeCreate(next: TLLineShape): TLLineShape | void;
    onHandleDrag(shape: TLLineShape, { handle }: TLHandleDragInfo<TLLineShape>): {
        id: TLShapeId_2;
        index: IndexKey;
        isLocked: boolean;
        meta: JsonObject;
        opacity: number;
        parentId: TLParentId;
        props: {
            color: TLDefaultColorStyle;
            dash: "dashed" | "dotted" | "draw" | "none" | "solid";
            points: {
                [x: string]: {
                    id: string;
                    index: IndexKey;
                    x: number;
                    y: number;
                } | TLLineShapePoint;
            };
            scale: number;
            size: "l" | "m" | "s" | "xl";
            spline: "cubic" | "line";
        };
        rotation: number;
        type: "line";
        typeName: "shape";
        x: number;
        y: number;
    };
    onHandleDragStart(shape: TLLineShape, { handle }: TLHandleDragInfo<TLLineShape>): {
        id: TLShapeId_2;
        index: IndexKey;
        isLocked: boolean;
        meta: JsonObject;
        opacity: number;
        parentId: TLParentId;
        props: {
            color: TLDefaultColorStyle;
            dash: "dashed" | "dotted" | "draw" | "none" | "solid";
            points: {
                [x: string]: {
                    id: IndexKey;
                    index: IndexKey;
                    x: number;
                    y: number;
                } | TLLineShapePoint;
            };
            scale: number;
            size: "l" | "m" | "s" | "xl";
            spline: "cubic" | "line";
        };
        rotation: number;
        type: "line";
        typeName: "shape";
        x: number;
        y: number;
    } | undefined;
    component(shape: TLLineShape): JSX.Element;
    getIndicatorPath(shape: TLLineShape): Path2D;
    toSvg(shape: TLLineShape, ctx: SvgExportContext): JSX.Element;
    getHandleSnapGeometry(shape: TLLineShape): HandleSnapGeometry;
    getInterpolatedProps(startShape: TLLineShape, endShape: TLLineShape, t: number): TLLineShape['props'];
}

/** @public */
export declare interface LineShapeUtilDisplayValues {
    strokeColor: string;
    strokeWidth: number;
}

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

/* Excluded from this release type: LineToPathBuilderCommand */

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

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

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

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

/* Excluded from this release type: MoveToPathBuilderCommand */

/** @public */
export declare interface NonePathBuilderOpts extends BasePathBuilderOpts {
    style: 'none';
}

/** @public */
export declare interface NoteShapeOptions extends ShapeOptionsWithDisplayValues<TLNoteShape, NoteShapeUtilDisplayValues> {
    /**
     * How should the note shape resize? By default it does not resize (except automatically based on its text content),
     * but you can set it to be user-resizable using scale.
     */
    resizeMode: 'none' | 'scale';
}

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

/** @public */
export declare class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
    static type: "note";
    static props: RecordProps<TLNoteShape>;
    static migrations: TLPropsMigrations;
    options: NoteShapeOptions;
    canEdit(shape: TLNoteShape): boolean;
    hideResizeHandles(shape: TLNoteShape): boolean;
    isAspectRatioLocked(shape: TLNoteShape): boolean;
    hideSelectionBoundsFg(shape: TLNoteShape): boolean;
    getDefaultProps(): TLNoteShape['props'];
    getGeometry(shape: TLNoteShape): Group2d;
    getHandles(shape: TLNoteShape): TLHandle[];
    onResize(shape: any, info: TLResizeInfo<any>): {
        props: {
            scale: number;
        };
        x: number;
        y: number;
    } | undefined;
    getText(shape: TLNoteShape): string;
    getReferencedUserIds(shape: TLNoteShape): string[];
    getFontFaces(shape: TLNoteShape): TLFontFace[];
    component(shape: TLNoteShape): JSX.Element;
    getIndicatorPath(shape: TLNoteShape): Path2D;
    toSvg(shape: TLNoteShape, ctx: SvgExportContext): JSX.Element;
    onBeforeCreate(next: TLNoteShape): {
        id: TLShapeId;
        index: IndexKey_2;
        isLocked: boolean;
        meta: JsonObject;
        opacity: number;
        parentId: TLParentId;
        props: {
            align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start";
            color: TLDefaultColorStyle;
            font: TLDefaultFontStyle;
            fontSizeAdjustment: number;
            growY: number;
            labelColor: TLDefaultColorStyle;
            richText: {
                attrs?: any;
                content: unknown[];
                type: string;
            };
            scale: number;
            size: "l" | "m" | "s" | "xl";
            textFirstEditedBy: null | string;
            url: string;
            verticalAlign: "end" | "middle" | "start";
        };
        rotation: number;
        type: "note";
        typeName: "shape";
        x: number;
        y: number;
    } | undefined;
    onBeforeUpdate(prev: TLNoteShape, next: TLNoteShape): TLNoteShape | undefined;
    getInterpolatedProps(startShape: TLNoteShape, endShape: TLNoteShape, t: number): TLNoteShapeProps;
    /**
     * Get the growY and fontSizeAdjustment for a shape.
     */
    private getNoteSizeAdjustments;
    private _labelSizesForNoteCache;
    /**
     * Get the cached label size for the shape.
     */
    private getLabelSize;
    /**
     * Expensively measure the label size for a note shape.
     */
    private measureNoteLabelSize;
}

/** @public */
export declare interface NoteShapeUtilDisplayValues {
    noteWidth: number;
    noteHeight: number;
    noteBackgroundColor: string;
    borderColor: string;
    borderWidth: number;
    labelColor: string;
    labelFontFamily: string;
    labelFontSize: number;
    labelLineHeight: number;
    labelFontWeight: string;
    labelFontVariant: string;
    labelFontStyle: string;
    labelPadding: number;
    labelHorizontalAlign: 'center' | 'end' | 'start';
    labelVerticalAlign: 'end' | 'middle' | 'start';
}

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

/**
 * Checks if a file is allowed to be uploaded. If it is not, it will show a toast explaining why to the user.
 *
 * @param editor - The editor instance
 * @param file - The file to check
 * @param options - The options for the external content handler
 * @returns True if the file is allowed, false otherwise
 * @public
 */
export declare function notifyIfFileNotAllowed(editor: Editor, file: File, options: TLDefaultExternalContentHandlerOpts): boolean;

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

/**
 * A helper method to use in {@link tldraw#TLUiToolItem.onDragStart} to create a shape by dragging it from
 * the toolbar.
 * @public
 */
export declare function onDragFromToolbarToCreateShape(editor: Editor, info: TLPointerEventInfo, opts: OnDragFromToolbarToCreateShapesOpts): void;

/**
 * Options for {@link onDragFromToolbarToCreateShape}.
 * @public
 */
export declare interface OnDragFromToolbarToCreateShapesOpts {
    /**
     * Create the shape being dragged. You don't need to worry about positioning it, as it'll be
     * immediately updated with the correct position.
     */
    createShape(id: TLShapeId): void;
    /**
     * Called once the drag interaction has finished.
     */
    onDragEnd?(id: TLShapeId): void;
}

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

/** @public @react */
export declare function OverflowingToolbar({ children, orientation, sizingParentClassName, minItems, minSizePx, maxItems, maxSizePx }: OverflowingToolbarProps): JSX.Element;

/** @public */
export declare interface OverflowingToolbarProps {
    children: React.ReactNode;
    orientation: 'horizontal' | 'vertical';
    sizingParentClassName: string;
    minItems: number;
    minSizePx: number;
    maxItems: number;
    maxSizePx: number;
}

/** @public @react */
export declare const PageItemInput: ({ name, id, isCurrentPage, onCancel, onComplete, }: PageItemInputProps) => JSX.Element;

/** @public */
export declare interface PageItemInputProps {
    name: string;
    id: TLPageId;
    isCurrentPage: boolean;
    onCancel(): void;
    onComplete?(): void;
}

/** @public */
export declare const PageItemSubmenu: NamedExoticComponent<PageItemSubmenuProps>;

/** @public */
export declare interface PageItemSubmenuProps {
    index: number;
    item: {
        id: string;
        name: string;
    };
    listSize: number;
    onRename?(): void;
}

/* Excluded from this release type: parseAndLoadDocument */

/** @public */
export declare function parseTldrawJsonFile({ json, schema }: {
    json: string;
    schema: TLSchema;
}): Result<TLStore, TldrawFileParseError>;

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

/** @public */
export declare class PathBuilder {
    static lineThroughPoints(points: VecLike[], opts?: PathBuilderLineOpts & {
        endOffsets?: number;
    }): PathBuilder;
    static cubicSplineThroughPoints(points: VecLike[], opts?: PathBuilderLineOpts & {
        endOffsets?: number;
    }): PathBuilder;
    constructor();
    /* Excluded from this release type: commands */
    private lastMoveTo;
    private assertHasMoveTo;
    moveTo(x: number, y: number, opts?: PathBuilderLineOpts): this;
    lineTo(x: number, y: number, opts?: PathBuilderCommandOpts): this;
    circularArcTo(radius: number, largeArcFlag: boolean, sweepFlag: boolean, x2: number, y2: number, opts?: PathBuilderCommandOpts): this;
    arcTo(rx: number, ry: number, largeArcFlag: boolean, sweepFlag: boolean, xAxisRotationRadians: number, x2: number, y2: number, opts?: PathBuilderCommandOpts): this;
    cubicBezierTo(x: number, y: number, cp1X: number, cp1Y: number, cp2X: number, cp2Y: number, opts?: PathBuilderCommandOpts): this;
    private cubicBezierToWithResolution;
    close(): this;
    toD(opts?: PathBuilderToDOpts): string;
    toSvg(opts: PathBuilderOpts): JSX.Element | null;
    toPath2D(opts: PathBuilderOpts): Path2D;
    toGeometry(): Group2d | PathBuilderGeometry2d;
    private toSolidSvg;
    private toDashedSvg;
    private toDrawSvg;
    toDrawD(opts: DrawPathBuilderDOpts): string;
    private calculateSegmentLength;
    /* Excluded from this release type: getCommands */
    /* Excluded from this release type: getCommandInfo */
}

/* Excluded from this release type: PathBuilderCommand */

/* Excluded from this release type: PathBuilderCommandBase */

/* Excluded from this release type: PathBuilderCommandInfo */

/** @public */
export declare interface PathBuilderCommandOpts {
    /**
     * When converting to a draw-style line, how much offset from the original point should be
     * applied?
     */
    offset?: number;
    /**
     * When converting to a draw-style line, how much roundness should be applied to the end of this
     * line?
     */
    roundness?: number;
    /**
     * When converting to a dash- or dot-style line, should the current segment be merged with the
     * previous segment when calculating the dash pattern? This is false by default, meaning each
     * command will start/end on a dash/dot boundary.
     */
    mergeWithPrevious?: boolean;
}

/** @public */
export declare class PathBuilderGeometry2d extends Geometry2d {
    private readonly path;
    private readonly startIdx;
    private readonly endIdx;
    constructor(path: PathBuilder, startIdx: number, endIdx: number, options: Geometry2dOptions);
    private _segments;
    getSegments(): Geometry2d[];
    getVertices(filters: Geometry2dFilters): Vec[];
    nearestPoint(point: VecLike, _filters?: Geometry2dFilters): Vec;
    hitTestLineSegment(A: VecLike, B: VecLike, distance?: number, filters?: Geometry2dFilters): boolean;
    getSvgPathData(): string;
}

/** @public */
export declare interface PathBuilderLineOpts extends PathBuilderCommandOpts {
    geometry?: false | Omit<Geometry2dOptions, 'isClosed'>;
    dashStart?: PerfectDashTerminal;
    dashEnd?: PerfectDashTerminal;
}

/** @public */
export declare type PathBuilderOpts = DashedPathBuilderOpts | DrawPathBuilderOpts | NonePathBuilderOpts | SolidPathBuilderOpts;

/** @public */
export declare interface PathBuilderToDOpts {
    startIdx?: number;
    endIdx?: number;
    onlyFilled?: boolean;
}

/**
 * A plain text area that can be used for basic editing text.
 *
 * @public @react
 */
export declare const PlainTextArea: React_3.ForwardRefExoticComponent<TextAreaProps & React_3.RefAttributes<HTMLTextAreaElement>>;

/**
 * Renders a text label that can be used inside of shapes.
 * The component has the ability to be edited in place and furthermore
 * supports rich text editing.
 *
 * @public @react
 */
export declare const PlainTextLabel: React_3.NamedExoticComponent<PlainTextLabelProps>;

/** @public */
export declare interface PlainTextLabelProps {
    shapeId: TLShapeId;
    type: ExtractShapeByProps<{
        text: string;
    }>['type'];
    fontFamily: string;
    fontSize: number;
    lineHeight: number;
    textAlign: 'center' | 'end' | 'start';
    verticalAlign: 'end' | 'middle' | 'start';
    wrap?: boolean;
    text?: string;
    labelColor: string;
    bounds?: Box;
    isSelected: boolean;
    onKeyDown?(e: KeyboardEvent): void;
    classNamePrefix?: string;
    style?: React_3.CSSProperties;
    textWidth?: number;
    textHeight?: number;
    padding?: number;
    showTextOutline?: boolean;
}

/** @public */
export declare const PORTRAIT_BREAKPOINT: {
    readonly DESKTOP: 7;
    readonly MOBILE_SM: 3;
    readonly MOBILE_XS: 2;
    readonly MOBILE_XXS: 1;
    readonly MOBILE: 4;
    readonly TABLET_SM: 5;
    readonly TABLET: 6;
    readonly ZERO: 0;
};

/** @public */
export declare type PORTRAIT_BREAKPOINT = (typeof PORTRAIT_BREAKPOINT)[keyof typeof PORTRAIT_BREAKPOINT];

/** @public */
export declare namespace PORTRAIT_BREAKPOINT {
    export type ZERO = typeof PORTRAIT_BREAKPOINT.ZERO;
    export type MOBILE_XXS = typeof PORTRAIT_BREAKPOINT.MOBILE_XXS;
    export type MOBILE_XS = typeof PORTRAIT_BREAKPOINT.MOBILE_XS;
    export type MOBILE_SM = typeof PORTRAIT_BREAKPOINT.MOBILE_SM;
    export type MOBILE = typeof PORTRAIT_BREAKPOINT.MOBILE;
    export type TABLET_SM = typeof PORTRAIT_BREAKPOINT.TABLET_SM;
    export type TABLET = typeof PORTRAIT_BREAKPOINT.TABLET;
    export type DESKTOP = typeof PORTRAIT_BREAKPOINT.DESKTOP;
}

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

/** @public */
export declare function preloadFont(id: string, font: TLTypeFace, targetDocument?: Document): Promise<FontFace>;

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

/**
 * Put excalidraw clipboard content onto the current page.
 *
 * @param editor - The editor instance.
 * @param excalidrawClipboardContent - The excalidraw clipboard model.
 * @param point - The point at which to put the excalidraw content.
 * @public
 */
export declare function putExcalidrawContent(editor: Editor, excalidrawClipboardContent: any, point?: VecLike): Promise<void>;

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

/** @public */
export declare function registerDefaultExternalContentHandlers(editor: Editor, options: TLDefaultExternalContentHandlerOpts): void;

/** @public */
export declare function registerDefaultSideEffects(editor: Editor): () => void;

/**
 * Remove a frame (or any frame-like container shape).
 *
 * @param editor - tldraw editor instance.
 * @param ids - Ids of the frames you wish to remove.
 *
 * @public
 */
export declare function removeFrame(editor: Editor, ids: TLShapeId[]): void;

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

/**
 * Renders HTML from a rich text string.
 *
 * @param editor - The editor instance.
 * @param richText - The rich text content.
 *
 * @public
 */
export declare function renderHtmlFromRichText(editor: Editor, richText: TLRichText): string;

/**
 * Renders HTML from a rich text string for measurement.
 * @param editor - The editor instance.
 * @param richText - The rich text content.
 *
 * @public
 */
export declare function renderHtmlFromRichTextForMeasurement(editor: Editor, richText: TLRichText): string;

/**
 * Renders plaintext from a rich text string.
 * @param editor - The editor instance.
 * @param richText - The rich text content.
 *
 * @public
 */
export declare function renderPlaintextFromRichText(editor: Editor, richText: TLRichText): string;

/**
 * Renders JSONContent from html.
 * @param editor - The editor instance.
 * @param richText - The rich text content.
 *
 * @public
 */
export declare function renderRichTextFromHTML(editor: Editor, html: string): TLRichText;

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

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

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

/**
 * A rich text area that can be used for editing text with rich text formatting.
 * This component uses the TipTap editor under the hood.
 *
 * @public @react
 */
export declare const RichTextArea: React_3.ForwardRefExoticComponent<TextAreaProps & React_3.RefAttributes<HTMLDivElement>>;

/**
 * Renders a text label that can be used inside of shapes.
 * The component has the ability to be edited in place and furthermore
 * supports rich text editing.
 *
 * @public @react
 */
export declare const RichTextLabel: React_3.NamedExoticComponent<RichTextLabelProps>;

/** @public */
export declare interface RichTextLabelProps {
    shapeId: TLShapeId;
    type: ExtractShapeByProps<{
        richText: TLRichText;
    }>['type'];
    fontFamily: string;
    fontSize: number;
    lineHeight: number;
    textAlign: 'center' | 'end' | 'start';
    verticalAlign: 'end' | 'middle' | 'start';
    wrap?: boolean;
    richText?: TLRichText;
    labelColor: string;
    bounds?: Box;
    isSelected: boolean;
    onKeyDown?(e: KeyboardEvent): void;
    classNamePrefix?: string;
    style?: React_3.CSSProperties;
    textWidth?: number;
    textHeight?: number;
    padding?: number;
    hasCustomTabBehavior?: boolean;
    showTextOutline?: boolean;
}

/**
 * Renders a rich text string as SVG given bounds and text properties.
 *
 * @public @react
 */
export declare function RichTextSVG({ bounds, richText, fontSize, fontFamily, lineHeight, textAlign, verticalAlign, wrap, labelColor, padding, showTextOutline }: RichTextSVGProps): JSX.Element;

/** @public */
export declare interface RichTextSVGProps {
    bounds: Box;
    richText: TLRichText;
    fontSize: number;
    fontFamily: string;
    lineHeight: number;
    textAlign: 'center' | 'end' | 'start';
    verticalAlign: 'end' | 'middle' | 'start';
    wrap?: boolean;
    labelColor: string;
    padding: number;
    showTextOutline?: boolean;
}

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

/** @public */
export declare const RTL_LANGUAGES: Set<string>;

/**
 * Sanitizes an SVG string by removing dangerous elements, attributes, and URIs
 * while preserving safe content including foreignObject (for text rendering),
 * style elements (for fonts with data: URLs), and animation elements.
 * Embedded SVG data URIs on `<image>`/`<feImage>` are recursively sanitized.
 *
 * Returns the sanitized SVG string, or an empty string if the input was
 * malformed (parse error) or contained no safe content after sanitization.
 *
 * @public
 */
export declare function sanitizeSvg(svgText: string): string;

/**
 * Overlay util for scribble strokes (eraser, lasso selection, etc.).
 *
 * @public
 */
export declare class ScribbleOverlayUtil extends OverlayUtil<TLScribbleOverlay> {
    static type: string;
    options: {
        cacheSize: number;
        streamline: number;
        zIndex: number;
    };
    private _scribblePathCache;
    isActive(): boolean;
    getOverlays(): TLScribbleOverlay[];
    render(ctx: CanvasRenderingContext2D, overlays: TLScribbleOverlay[]): void;
}

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

/**
 * Overlay util for selection foreground handles (resize corners/edges, rotate corners, mobile rotate).
 * Each interactive element of the selection foreground becomes its own overlay instance.
 *
 * @public
 */
export declare class SelectionForegroundOverlayUtil extends OverlayUtil<TLSelectionForegroundOverlay> {
    static type: string;
    options: {
        lineWidth: number;
        zIndex: number;
    };
    isActive(): boolean;
    getOverlays(): TLSelectionForegroundOverlay[];
    getGeometry(overlay: TLSelectionForegroundOverlay): Geometry2d | null;
    render(ctx: CanvasRenderingContext2D, _overlays: TLSelectionForegroundOverlay[]): void;
    getCursor(overlay: TLSelectionForegroundOverlay): TLCursorType | undefined;
    private _collectResizeCornerOverlays;
    private _collectResizeEdgeOverlays;
    private _collectRotateOverlays;
    private _getResizeHandleGeometry;
    private _getRotateHandleGeometry;
    private _getMobileRotateGeometry;
    private _renderSelectionBox;
    private _renderResizeCorners;
    private _renderCropHandles;
    private _renderMobileRotateHandle;
    private _renderTextResizeHandles;
    /**
     * Single source of truth for the derived state the selection foreground needs.
     * Called from `getOverlays()`, `getGeometry()`, and `render()` so their visibility
     * predicates can't drift. Returns `null` when no selection UI should appear at all
     * (nothing selected, or the only selected shape is hidden).
     */
    private _computeSelectionState;
    private _getMobileRotateCenter;
    private _getThemeColors;
    private _makeOverlay;
    private _getEdgeLocalPoints;
    private _getRotateHandleLocalCenter;
    private _getCornerLocalPoint;
    private _localRectToPoints;
}

/** @public */
export declare class SelectTool extends StateNode {
    static id: string;
    static initial: string;
    static isLockable: boolean;
    reactor: (() => void) | undefined;
    static children(): TLStateNodeConstructor[];
    cleanUpDuplicateProps(): void;
    onEnter(): void;
    onExit(): void;
}

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

/** @public */
export declare function serializeTldrawJson(editor: Editor): Promise<string>;

/** @public */
export declare function serializeTldrawJsonBlob(editor: Editor): Promise<Blob>;

/* Excluded from this release type: setDefaultEditorAssetUrls */

/* Excluded from this release type: setDefaultUiAssetUrls */

/** @public */
export declare function setStrokePointRadii(strokePoints: StrokePoint[], options: StrokeOptions): StrokePoint[];

/**
 * Overlay util for shape handles (arrow endpoints, line vertices, etc.).
 *
 * @public
 */
export declare class ShapeHandleOverlayUtil extends OverlayUtil<TLShapeHandleOverlay> {
    static type: string;
    options: {
        lineWidth: number;
        zIndex: number;
    };
    isActive(): boolean;
    getOverlays(): TLShapeHandleOverlay[];
    getGeometry(overlay: TLShapeHandleOverlay): Geometry2d | null;
    getCursor(_overlay: TLShapeHandleOverlay): TLCursorType | undefined;
    render(ctx: CanvasRenderingContext2D, overlays: TLShapeHandleOverlay[]): void;
}

/** @public */
export declare interface ShapeOptionsWithDisplayValues<Shape extends TLShape, DisplayValues extends object> {
    getDefaultDisplayValues(editor: Editor, shape: Shape, theme: TLTheme, colorMode: 'dark' | 'light'): DisplayValues;
    getCustomDisplayValues(editor: Editor, shape: Shape, theme: TLTheme, colorMode: 'dark' | 'light'): Partial<DisplayValues>;
}

/**
 * Overlay util for snap alignment indicators (point snap lines and gap indicators).
 *
 * @public
 */
export declare class SnapIndicatorOverlayUtil extends OverlayUtil<TLSnapIndicatorOverlay> {
    static type: string;
    options: {
        lineWidth: number;
        zIndex: number;
    };
    isActive(): boolean;
    getOverlays(): TLSnapIndicatorOverlay[];
    render(ctx: CanvasRenderingContext2D, overlays: TLSnapIndicatorOverlay[]): void;
    private _renderPoints;
    private _renderGaps;
}

/** @public */
export declare interface SolidPathBuilderOpts extends BasePathBuilderOpts {
    style: 'solid';
}

/* Excluded from this release type: Spinner */

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

/**
 * Start editing a shape that has rich text, such as text, note, geo, or arrow shapes.
 * This will enter the editing state for the shape and optionally select all the text.
 *
 * @param editor - The editor instance.
 * @param shapeOrId - The shape to start editing. This shape must have a richText property with a TLRichText value.
 * @param options - Options: selectAll or info (TLEventInfo)
 *
 * @public
 */
export declare function startEditingShapeWithRichText(editor: Editor, shapeOrId: TLShape | TLShapeId, options?: {
    info?: TLEventInfo;
    selectAll?: boolean;
}): void;

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

/**
 * The options object for `getStroke` or `getStrokePoints`.
 *
 * @public
 */
export declare interface StrokeOptions {
    /** The base size (diameter) of the stroke. */
    size?: number;
    /** The effect of pressure on the stroke's size. */
    thinning?: number;
    /** How much to soften the stroke's edges. */
    smoothing?: number;
    streamline?: number;
    /** An easing function to apply to each point's pressure. */
    easing?(pressure: number): number;
    /** Whether to simulate pressure based on velocity. */
    simulatePressure?: boolean;
    /** Cap, taper and easing for the start of the line. */
    start?: {
        cap?: boolean;
        easing?(distance: number): number;
        taper?: boolean | number;
    };
    /** Cap, taper and easing for the end of the line. */
    end?: {
        cap?: boolean;
        easing?(distance: number): number;
        taper?: boolean | number;
    };
    /** Whether to handle the points as a completed stroke. */
    last?: boolean;
}

/**
 * The points returned by `getStrokePoints`, and the input for `getStrokeOutlinePoints`
 *
 * @public
 */
export declare interface StrokePoint {
    point: Vec;
    input: Vec;
    vector: Vec;
    pressure: number;
    distance: number;
    runningLength: number;
    radius: number;
}

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

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

/** @public @react */
export declare const StylePanelButtonPicker: <T extends string>(props: StylePanelButtonPickerProps<T>) => JSX_2.Element;

/** @public @react*/
export declare const StylePanelButtonPickerInline: <T extends string>(props: StylePanelButtonPickerProps<T>) => JSX_2.Element;

/** @public */
export declare interface StylePanelButtonPickerProps<T extends string> {
    title: string;
    uiType: string;
    style: StyleProp<T>;
    value: SharedStyle<T>;
    items: StyleValuesForUi<T>;
    onValueChange?(style: StyleProp<T>, value: T): void;
    onHistoryMark?(id: string): void;
}

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

/** @public */
export declare interface StylePanelContext {
    styles: ReadonlySharedStyleMap;
    enhancedA11yMode: boolean;
    onHistoryMark(id: string): void;
    onValueChange<T>(style: StyleProp<T>, value: T): void;
    onOpacityChange(opacity: number): void;
}

/** @public @react */
export declare function StylePanelContextProvider({ children, styles }: StylePanelContextProviderProps): JSX.Element;

/** @public */
export declare interface StylePanelContextProviderProps {
    children: React.ReactNode;
    styles: ReadonlySharedStyleMap;
}

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

/** @public @react */
export declare const StylePanelDoubleDropdownPicker: <T extends string>(props: StylePanelDoubleDropdownPickerProps<T>) => React_2.JSX.Element;

/** @public @react */
export declare const StylePanelDoubleDropdownPickerInline: <T extends string>(props: StylePanelDoubleDropdownPickerProps<T>) => React_2.JSX.Element;

/** @public */
export declare interface StylePanelDoubleDropdownPickerProps<T extends string> {
    uiTypeA: string;
    uiTypeB: string;
    label: Exclude<string, TLUiTranslationKey> | TLUiTranslationKey;
    labelA: Exclude<string, TLUiTranslationKey> | TLUiTranslationKey;
    labelB: Exclude<string, TLUiTranslationKey> | TLUiTranslationKey;
    itemsA: StyleValuesForUi<T>;
    itemsB: StyleValuesForUi<T>;
    styleA: StyleProp<T>;
    styleB: StyleProp<T>;
    valueA: SharedStyle<T>;
    valueB: SharedStyle<T>;
    onValueChange?(style: StyleProp<T>, value: T): void;
}

/** @public @react */
export declare const StylePanelDropdownPicker: <T extends string>(props: StylePanelDropdownPickerProps<T>) => React_2.JSX.Element;

/** @public @react */
export declare const StylePanelDropdownPickerInline: <T extends string>(props: StylePanelDropdownPickerProps<T>) => React_2.JSX.Element;

/** @public */
export declare interface StylePanelDropdownPickerProps<T extends string> {
    id: string;
    label?: Exclude<string, TLUiTranslationKey> | TLUiTranslationKey;
    uiType: string;
    stylePanelType: string;
    style: StyleProp<T>;
    value: SharedStyle<T>;
    items: StyleValuesForUi<T>;
    type: 'icon' | 'menu' | 'tool';
    onValueChange?(style: StyleProp<T>, value: T): void;
    /** Override the test ID prefix. Defaults to uiType. */
    testIdType?: string;
    /** Distance to push the popover left of the trigger so it lands flush with the style panel. */
    sideOffset?: number;
}

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

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

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

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

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

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

/** @public */
export declare interface StylePanelSectionProps {
    children: React_3.ReactNode;
}

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

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

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

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

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

/** @public */
export declare type StyleValuesForUi<T> = readonly {
    readonly icon: string | TLUiIconJsx;
    readonly value: T;
}[];

/** @public */
export declare interface TextAreaProps {
    isEditing: boolean;
    text?: string;
    shapeId: TLShapeId;
    richText?: TLRichText;
    handleFocus(): void;
    handleBlur(): void;
    handleKeyDown(e: KeyboardEvent): void;
    handleChange(changeInfo: {
        plaintext?: string;
        richText?: TLRichText;
    }): void;
    handleInputPointerDown(e: React_3.PointerEvent<HTMLElement>): void;
    handleDoubleClick(e: any): any;
    handlePaste(e: ClipboardEvent | React_3.ClipboardEvent<HTMLTextAreaElement>): void;
    hasCustomTabBehavior?: boolean;
}

/** @public */
export declare interface TextShapeOptions extends ShapeOptionsWithDisplayValues<TLTextShape, TextShapeUtilDisplayValues> {
    /** How much addition padding should be added to the horizontal geometry of the shape when binding to an arrow? */
    extraArrowHorizontalPadding: number;
    /** Whether to show the outline of the text shape (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. */
    showTextOutline: boolean;
}

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

/** @public */
export declare class TextShapeUtil extends ShapeUtil<TLTextShape> {
    static type: "text";
    static props: RecordProps<TLTextShape>;
    static migrations: TLPropsMigrations;
    options: TextShapeOptions;
    getDefaultProps(): TLTextShape['props'];
    getMinDimensions(shape: TLTextShape): {
        height: number;
        width: number;
    };
    getGeometry(shape: TLTextShape, opts: TLGeometryOpts): Rectangle2d;
    getFontFaces(shape: TLTextShape): TLFontFace[];
    getText(shape: TLTextShape): string;
    canEdit(shape: TLTextShape): boolean;
    isAspectRatioLocked(shape: TLTextShape): boolean;
    component(shape: TLTextShape): JSX.Element;
    getIndicatorPath(shape: TLTextShape): Path2D | undefined;
    toSvg(shape: TLTextShape, ctx: SvgExportContext): JSX.Element;
    onResize(shape: TLTextShape, info: TLResizeInfo<TLTextShape>): {
        id: TLShapeId;
        props: {
            autoSize: boolean;
            w: number;
        };
        type: "text";
        x: number;
        y: number;
    } | {
        id: TLShapeId;
        props: {
            scale: number;
        };
        type: "text";
        x: number;
        y: number;
    };
    onEditEnd(shape: TLTextShape): void;
    onBeforeUpdate(prev: TLTextShape, next: TLTextShape): {
        id: TLShapeId;
        index: IndexKey;
        isLocked: boolean;
        meta: JsonObject;
        opacity: number;
        parentId: TLParentId;
        props: {
            autoSize: boolean;
            color: TLDefaultColorStyle;
            font: TLDefaultFontStyle;
            richText: {
                attrs?: any;
                content: unknown[];
                type: string;
            };
            scale: number;
            size: "l" | "m" | "s" | "xl";
            textAlign: "end" | "middle" | "start";
            w: number;
        };
        rotation: number;
        type: "text";
        typeName: "shape";
        x: number;
        y: number;
    } | undefined;
}

/** @public */
export declare interface TextShapeUtilDisplayValues {
    color: string;
    fontFamily: string;
    fontSize: number;
    lineHeight: number;
    fontWeight: string;
    fontStyle: string;
    fontVariant: string;
}

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

/**
 * Default extensions for the TipTap editor.
 *
 * @public
 */
export declare const tipTapDefaultExtensions: Extensions;

/** @public */
export declare interface TLArcArrowInfo {
    bindings: TLArrowBindings;
    type: 'arc';
    start: TLArrowPoint;
    end: TLArrowPoint;
    middle: VecLike;
    handleArc: TLArcInfo;
    bodyArc: TLArcInfo;
    isValid: boolean;
}

/** @public */
export declare interface TLArcInfo {
    center: VecLike;
    radius: number;
    size: number;
    length: number;
    largeArcFlag: number;
    sweepFlag: number;
}

/** @public */
export declare interface TLArrowBindingHintOverlay extends TLOverlay {
    props: {
        arrowId: TLShapeId;
    };
}

/** @public */
export declare interface TLArrowBindings {
    start: TLArrowBinding | undefined;
    end: TLArrowBinding | undefined;
}

/** @public */
export declare interface TLArrowHintOverlay extends TLOverlay {
    props: {
        anchorX: number;
        anchorY: number;
        arrowKind: string;
        handles: {
            bottom: {
                isEnabled: boolean;
                x: number;
                y: number;
            };
            left: {
                isEnabled: boolean;
                x: number;
                y: number;
            };
            right: {
                isEnabled: boolean;
                x: number;
                y: number;
            };
            top: {
                isEnabled: boolean;
                x: number;
                y: number;
            };
        };
        isExact: boolean;
        isPrecise: boolean;
        showEdgeHints: boolean;
        snap: string;
        targetId: TLShapeId;
    };
}

/** @public */
export declare type TLArrowInfo = TLArcArrowInfo | TLElbowArrowInfo | TLStraightArrowInfo;

/** @public */
export declare interface TLArrowPoint {
    handle: VecLike;
    point: VecLike;
    arrowhead: TLArrowShapeArrowheadStyle;
}

/** @public */
export declare interface TLBrushOverlay extends TLOverlay {
    props: {
        h: number;
        w: number;
        x: number;
        y: number;
    };
}

/** @public */
export declare interface TLCollaboratorBrushOverlay extends TLOverlay {
    props: {
        color: string;
        h: number;
        w: number;
        x: number;
        y: number;
    };
}

/** @public */
export declare interface TLCollaboratorCursorOverlay extends TLOverlay {
    props: {
        chatMessage: string;
        color: string;
        name: null | string;
        x: number;
        y: number;
    };
}

/** @public */
export declare interface TLCollaboratorHintOverlay extends TLOverlay {
    props: {
        /** Clamped point on viewport edge, in page coordinates */
        x: number;
        /** Rotation angle pointing toward the collaborator's actual cursor */
        rotation: number;
        color: string;
        y: number;
    };
}

/** @public */
export declare interface TLCollaboratorScribbleOverlay extends TLOverlay {
    props: {
        color: string;
        scribble: TLScribble;
    };
}

/** @public */
export declare interface TLCollaboratorShapeIndicatorOverlay extends TLOverlay {
    props: {
        indicators: Array<{
            color: string;
            shapeIds: TLShapeId[];
        }>;
    };
}

/**
 * Override the default react components used by the editor and UI. Set components to null to
 * disable them entirely.
 *
 * @example
 * ```tsx
 * import {Tldraw, TLComponents} from 'tldraw'
 *
 * const components: TLComponents = {
 *    Scribble: MyCustomScribble,
 * }
 *
 * export function MyApp() {
 *   return <Tldraw components={components} />
 * }
 * ```
 *
 *
 * @public
 */
export declare interface TLComponents extends TLEditorComponents, TLUiComponents {
}

/** @public */
export declare type TLCopyType = 'json' | 'png' | 'svg';

/** @public */
export declare interface TLDefaultExternalContentHandlerOpts extends TLExternalContentProps {
    toasts: TLUiToastsContextType;
    msg: ReturnType<typeof useTranslation>;
}

/** @public */
export declare interface TLDefaultFont {
    normal: {
        bold: TLFontFace_2;
        normal: TLFontFace_2;
    };
    italic: {
        bold: TLFontFace_2;
        normal: TLFontFace_2;
    };
}

/** @public */
export declare interface TLDefaultFonts {
    tldraw_draw: TLDefaultFont;
    tldraw_sans: TLDefaultFont;
    tldraw_serif: TLDefaultFont;
    tldraw_mono: TLDefaultFont;
}

/** @public @react */
export declare function Tldraw(props: TldrawProps): JSX.Element;

/** @public */
export declare const TLDRAW_FILE_EXTENSION: ".tldr";

/** @public */
export declare interface TldrawBaseProps extends TldrawUiProps, TldrawEditorBaseProps, TLExternalContentProps {
    /** Urls for custom assets.
     *
     * ⚠︎ Important! This must be memoized (with useMemo) or defined outside of any React component.
     */
    assetUrls?: TLUiAssetUrlOverrides;
    /** Overrides for tldraw's components.
     *
     * ⚠︎ Important! This must be memoized (with useMemo) or defined outside of any React component.
     */
    components?: TLComponents;
    /** Custom definitions for tldraw's embeds.
     *
     * ⚠︎ Important! This must be memoized (with useMemo) or defined outside of any React component.
     *
     * @deprecated Use `EmbedShapeUtil.configure({ embedDefinitions: embeds })` instead.
     */
    embeds?: TLEmbedDefinition[];
    /**
     * Text options for the editor.
     *
     * @deprecated Use `options.text` instead. This prop will be removed in a future release.
     */
    textOptions?: TLTextOptions;
    /**
     * The locale to use for the editor's UI. When set, this takes priority over
     * both the browser's language preferences (`navigator.languages`) and the
     * user's locale preference (e.g. via
     * `editor.user.updateUserPreferences({ locale: '...' })`), giving the
     * application explicit control over the displayed language.
     *
     * @example
     * ```tsx
     * <Tldraw locale="fr" />
     * ```
     */
    locale?: string;
}

/** @public */
export declare interface TldrawFile {
    tldrawFileFormatVersion: number;
    schema: SerializedSchema;
    records: UnknownRecord[];
}

/** @public */
export declare type TldrawFileParseError = {
    cause: unknown;
    type: 'invalidRecords';
} | {
    cause: unknown;
    type: 'notATldrawFile';
} | {
    data: any;
    type: 'v1File';
} | {
    reason: MigrationFailureReason;
    type: 'migrationFailed';
} | {
    type: 'fileFormatVersionTooNew';
    version: number;
};

/**
 * A rendered SVG image of a Tldraw snapshot.
 *
 * @example
 * ```tsx
 * <TldrawImage
 * 	snapshot={snapshot}
 * 	pageId={pageId}
 * 	background={false}
 *  darkMode={true}
 *  bounds={new Box(0,0,600,400)}
 *  scale={1}
 * />
 * ```
 *
 * @public
 * @react
 */
export declare const TldrawImage: NamedExoticComponent<TldrawImageProps>;

/** @public */
export declare interface TldrawImageProps extends TLImageExportOptions {
    /**
     * The snapshot to display.
     */
    snapshot: Partial<TLEditorSnapshot> | TLStoreSnapshot;
    /**
     * The image format to use. Defaults to 'svg'.
     */
    format?: 'png' | 'svg';
    /**
     * The page to display. Defaults to the first page.
     */
    pageId?: TLPageId;
    /**
     * Additional shape utils to use.
     */
    shapeUtils?: readonly TLAnyShapeUtilConstructor[];
    /**
     * Additional binding utils to use.
     */
    bindingUtils?: readonly TLAnyBindingUtilConstructor[];
    /**
     * The license key.
     */
    licenseKey?: string;
    /**
     * Asset URL overrides.
     */
    assetUrls?: TLUiAssetUrlOverrides;
    /**
     * Options for the editor.
     */
    options?: Partial<TldrawOptions>;
    /**
     * Text options for the editor.
     *
     * @deprecated Use `options.text` instead. This prop will be removed in a future release.
     */
    textOptions?: TLTextOptions;
}

/** @public */
export declare type TldrawProps = TldrawBaseProps & TldrawEditorStoreProps;

/**
 * @public
 * @react
 */
export declare const TldrawUi: React_3.NamedExoticComponent<TldrawUiProps>;

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

/** @public @react */
export declare const TldrawUiButton: React_2.ForwardRefExoticComponent<TLUiButtonProps & React_2.RefAttributes<HTMLButtonElement>>;

/** @public @react */
export declare function TldrawUiButtonCheck({ checked }: TLUiButtonCheckProps): JSX.Element;

/** @public @react */
export declare function TldrawUiButtonIcon({ icon, small, invertIcon }: TLUiButtonIconProps): JSX.Element;

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

/**
 * A column, usually of UI controls like buttons, select dropdown, checkboxes, etc.
 *
 * @public @react
 */
export declare const TldrawUiColumn: ForwardRefExoticComponent<TLUiLayoutProps & RefAttributes<HTMLDivElement>>;

/** @public @react */
export declare function TldrawUiComponentsProvider({ overrides, children }: TLUiComponentsProviderProps): JSX.Element;

/** @public @react */
export declare const TldrawUiContextProvider: NamedExoticComponent<TLUiContextProviderProps>;

/**
 * A generic floating toolbar that can be used for things
 * like rich text editing, image toolbars, etc.
 *
 * @public @react
 */
export declare const TldrawUiContextualToolbar: ({ children, className, isMousingDown, getSelectionBounds, changeOnlyWhenYChanges, label, }: TLUiContextualToolbarProps) => JSX.Element;

/** @public @react */
export declare function TldrawUiDialogBody({ className, children, style }: TLUiDialogBodyProps): JSX.Element;

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

/** @public @react */
export declare function TldrawUiDialogFooter({ className, children }: TLUiDialogFooterProps): JSX.Element;

/** @public @react */
export declare function TldrawUiDialogHeader({ className, children }: TLUiDialogHeaderProps): JSX.Element;

/** @public @react */
export declare function TldrawUiDialogsProvider({ context, children }: TLUiDialogsProviderProps): JSX.Element;

/** @public @react */
export declare function TldrawUiDialogTitle({ className, children, style }: TLUiDialogTitleProps): JSX.Element;

/** @public @react */
export declare function TldrawUiDropdownMenuCheckboxItem({ children, onSelect, ...rest }: TLUiDropdownMenuCheckboxItemProps): JSX.Element;

/** @public @react */
export declare function TldrawUiDropdownMenuContent({ className, side, align, sideOffset, alignOffset, children }: TLUiDropdownMenuContentProps): JSX.Element;

/** @public @react */
export declare function TldrawUiDropdownMenuGroup({ className, children }: TLUiDropdownMenuGroupProps): JSX.Element;

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

/** @public @react */
export declare function TldrawUiDropdownMenuItem({ noClose, children }: TLUiDropdownMenuItemProps): JSX.Element;

/** @public @react */
export declare function TldrawUiDropdownMenuRoot({ id, children, modal, debugOpen }: TLUiDropdownMenuRootProps): JSX.Element;

/** @public @react */
export declare function TldrawUiDropdownMenuSub({ id, children }: TLUiDropdownMenuSubProps): JSX.Element;

/** @public @react */
export declare function TldrawUiDropdownMenuSubContent({ id, alignOffset, sideOffset, size, children }: TLUiDropdownMenuSubContentProps): JSX.Element;

/** @public @react */
export declare function TldrawUiDropdownMenuSubTrigger({ id, label, title, disabled }: TLUiDropdownMenuSubTriggerProps): JSX.Element;

/** @public @react */
export declare function TldrawUiDropdownMenuTrigger({ children, ...rest }: TLUiDropdownMenuTriggerProps): JSX.Element;

/** @public @react */
export declare function TldrawUiEventsProvider({ onEvent, children }: EventsProviderProps): JSX.Element;

/**
 * A tight grid 4 elements wide, usually of UI controls like buttons, select dropdown, checkboxes,
 * etc.
 *
 * @public @react */
export declare const TldrawUiGrid: ForwardRefExoticComponent<TLUiLayoutProps & RefAttributes<HTMLDivElement>>;

/** @public @react */
export declare const TldrawUiIcon: NamedExoticComponent<TLUiIconProps>;

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

/** @public @react */
export declare const TldrawUiInput: React_2.ForwardRefExoticComponent<TLUiInputProps & React_2.RefAttributes<HTMLInputElement>>;

/** @public @react */
export declare function TldrawUiKbd({ children, visibleOnMobileLayout }: TLUiKbdProps): JSX.Element | null;

/** @public @react */
export declare function TldrawUiMenuActionCheckboxItem({ actionId, ...rest }: TLUiMenuActionCheckboxItemProps): JSX.Element | null;

/** @public @react */
export declare function TldrawUiMenuActionItem({ actionId, ...rest }: TLUiMenuActionItemProps): JSX.Element | null;

/** @public @react */
export declare function TldrawUiMenuCheckboxItem<TranslationKey extends string = string, IconType extends string = string>({ id, kbd, label, lang, readonlyOk, onSelect, toggle, disabled, checked }: TLUiMenuCheckboxItemProps<TranslationKey, IconType>): JSX.Element | null;

/** @public @react */
export declare function TldrawUiMenuContextProvider({ type, sourceId, children }: TLUiMenuContextProviderProps): JSX.Element;

/** @public @react */
export declare function TldrawUiMenuGroup({ id, label, className, children }: TLUiMenuGroupProps): bigint | boolean | JSX.Element | Iterable<ReactNode> | null | number | Promise<bigint | boolean | ReactElement<unknown, JSXElementConstructor<any> | string> | ReactPortal | Iterable<ReactNode> | null | number | string | undefined> | string | undefined;

/** @public @react */
export declare function TldrawUiMenuItem<TranslationKey extends string = string, IconType extends string = string>({ disabled, spinner, readonlyOk, id, kbd, label, icon, iconLeft, onSelect, noClose, isSelected, onDragStart }: TLUiMenuItemProps<TranslationKey, IconType>): JSX.Element | null;

/** @public @react */
export declare function TldrawUiMenuSubmenu<Translation extends string = string>({ id, disabled, label, size, children }: TLUiMenuSubmenuProps<Translation>): bigint | boolean | JSX.Element | Iterable<ReactNode> | null | number | Promise<bigint | boolean | ReactElement<unknown, JSXElementConstructor<any> | string> | ReactPortal | Iterable<ReactNode> | null | number | string | undefined> | string | undefined;

/** @public @react */
export declare function TldrawUiMenuToolItem({ toolId, ...rest }: TLUiMenuToolItemProps): JSX.Element | null;

/** @public */
export declare interface TldrawUiOrientationContext {
    orientation: 'horizontal' | 'vertical';
    tooltipSide: 'bottom' | 'left' | 'right' | 'top';
}

/** @public @react */
export declare function TldrawUiOrientationProvider({ children, orientation, tooltipSide }: TldrawUiOrientationProviderProps): JSX.Element;

/** @public */
export declare interface TldrawUiOrientationProviderProps {
    children: ReactNode;
    orientation: 'horizontal' | 'vertical';
    tooltipSide?: 'bottom' | 'left' | 'right' | 'top';
}

/** @public @react */
export declare function TldrawUiPopover({ id, children, onOpenChange, open, className }: TLUiPopoverProps): JSX.Element;

/** @public @react */
export declare function TldrawUiPopoverContent({ side, children, align, sideOffset, alignOffset, disableEscapeKeyDown, autoFocusFirstButton }: TLUiPopoverContentProps): JSX.Element;

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

/** @public */
export declare interface TldrawUiProps extends TLUiContextProviderProps {
    /**
     * The component's children.
     */
    children?: ReactNode;
    /**
     * Whether to hide the user interface and only display the canvas.
     */
    hideUi?: boolean;
    /**
     * Overrides for the UI components.
     */
    components?: TLUiComponents;
    /**
     * Additional items to add to the debug menu (will be deprecated)
     */
    renderDebugMenuItems?(): React_3.ReactNode;
    /** Asset URL override. */
    assetUrls?: TLUiAssetUrlOverrides;
}

/**
 * A row, usually of UI controls like buttons, select dropdown, checkboxes, etc.
 *
 * @public @react
 */
export declare const TldrawUiRow: ForwardRefExoticComponent<TLUiLayoutProps & RefAttributes<HTMLDivElement>>;

/**
 * A select dropdown component.
 *
 * @example
 * ```tsx
 * <TldrawUiSelect id="my-select" value={value} onValueChange={setValue}>
 *   <TldrawUiSelectTrigger>
 *     <TldrawUiSelectValue placeholder="Select..." />
 *   </TldrawUiSelectTrigger>
 *   <TldrawUiSelectContent>
 *     <TldrawUiSelectItem value="one" label="One" />
 *     <TldrawUiSelectItem value="two" label="Two" />
 *   </TldrawUiSelectContent>
 * </TldrawUiSelect>
 * ```
 *
 * @public
 * @react
 */
export declare function TldrawUiSelect({ id, value, onValueChange, onOpenChange, disabled, className, children, 'data-testid': dataTestId, 'aria-label': ariaLabel }: TLUiSelectProps): JSX.Element;

/**
 * The dropdown content container for select items.
 *
 * @public
 * @react
 */
export declare function TldrawUiSelectContent({ children, side, align, className }: TLUiSelectContentProps): JSX.Element;

/**
 * An item in the select dropdown. Styled to match TldrawUiMenuCheckboxItem.
 *
 * @public
 * @react
 */
export declare function TldrawUiSelectItem({ value, label, icon, disabled, className }: TLUiSelectItemProps): JSX.Element;

/**
 * The trigger button for the select dropdown.
 *
 * @public
 * @react
 */
export declare const TldrawUiSelectTrigger: React_2.ForwardRefExoticComponent<TLUiSelectTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;

/**
 * Displays the currently selected value in the trigger.
 *
 * @public
 * @react
 */
export declare function TldrawUiSelectValue({ placeholder, icon, children }: TLUiSelectValueProps): JSX.Element;

/** @public @react */
export declare const TldrawUiSlider: React_3.ForwardRefExoticComponent<TLUiSliderProps & React_3.RefAttributes<HTMLDivElement>>;

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

/** @public @react */
export declare const TldrawUiToolbar: React_3.ForwardRefExoticComponent<TLUiToolbarProps & React_3.RefAttributes<HTMLDivElement>>;

/** @public @react */
export declare const TldrawUiToolbarButton: React_3.ForwardRefExoticComponent<TLUiToolbarButtonProps & React_3.RefAttributes<HTMLButtonElement>>;

/** @public @react */
export declare const TldrawUiToolbarToggleGroup: ({ children, className, type, asChild, ...props }: TLUiToolbarToggleGroupProps) => JSX.Element;

/** @public @react */
export declare const TldrawUiToolbarToggleItem: ({ children, className, type, value, tooltip, ...props }: TLUiToolbarToggleItemProps) => JSX.Element;

/** @public @react */
export declare const TldrawUiTooltip: React_3.ForwardRefExoticComponent<TldrawUiTooltipProps & React_3.RefAttributes<HTMLButtonElement>>;

/** @public */
export declare interface TldrawUiTooltipProps {
    children: React_3.ReactNode;
    content?: React_3.ReactNode | string;
    side?: 'bottom' | 'left' | 'right' | 'top';
    sideOffset?: number;
    disabled?: boolean;
    showOnMobile?: boolean;
    delayDuration?: number;
}

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

/** @public */
export declare interface TldrawUiTooltipProviderProps {
    children: React_3.ReactNode;
}

/* Excluded from this release type: TldrawUiTranslationProvider */

/** @public */
export declare interface TLEditorAssetUrls {
    fonts?: {
        [key: string]: string | undefined;
        tldraw_draw_bold?: string;
        tldraw_draw_italic_bold?: string;
        tldraw_draw_italic?: string;
        tldraw_draw?: string;
        tldraw_mono_bold?: string;
        tldraw_mono_italic_bold?: string;
        tldraw_mono_italic?: string;
        tldraw_mono?: string;
        tldraw_sans_bold?: string;
        tldraw_sans_italic_bold?: string;
        tldraw_sans_italic?: string;
        tldraw_sans?: string;
        tldraw_serif_bold?: string;
        tldraw_serif_italic_bold?: string;
        tldraw_serif_italic?: string;
        tldraw_serif?: string;
    };
}

/** @public */
export declare interface TLElbowArrowInfo {
    type: 'elbow';
    bindings: TLArrowBindings;
    start: TLArrowPoint;
    end: TLArrowPoint;
    elbow: ElbowArrowInfo;
    route: ElbowArrowRoute;
    isValid: boolean;
}

/** @public */
export declare type TLEmbedDefinition = CustomEmbedDefinition | EmbedDefinition;

/** @public */
export declare type TLEmbedResult = {
    definition: TLEmbedDefinition;
    embedUrl: string;
    url: string;
} | undefined;

/** @public */
export declare type TLEmbedShapePermissions = {
    [K in keyof typeof embedShapePermissionDefaults]?: boolean;
};

/** @public */
export declare interface TLExternalContentProps {
    /**
     * The maximum dimension (width or height) of an image. Images larger than this will be rescaled
     * to fit. Defaults to infinity.
     */
    maxImageDimension?: number;
    /**
     * The maximum size (in bytes) of an asset. Assets larger than this will be rejected. Defaults
     * to 10mb (10 * 1024 * 1024).
     */
    maxAssetSize?: number;
    /**
     * The mime types of images that are allowed to be handled. When passed to
     * the `Tldraw` component, this also reconfigures the default `ImageAssetUtil`
     * to only accept files matching these types. If you only want to accept a
     * subset of image types and want to additionally block videos, pass
     * `acceptedVideoMimeTypes={[]}`. A file is accepted if its MIME type is in
     * this list, in `acceptedVideoMimeTypes`, or if any registered asset util
     * accepts it.
     */
    acceptedImageMimeTypes?: readonly string[];
    /**
     * The mime types of videos that are allowed to be handled. When passed to
     * the `Tldraw` component, this also reconfigures the default `VideoAssetUtil`
     * to only accept files matching these types. A file is accepted if its MIME
     * type is in this list, in `acceptedImageMimeTypes`, or if any registered
     * asset util accepts it.
     */
    acceptedVideoMimeTypes?: readonly string[];
}

/** @public */
export declare interface TLScribbleOverlay extends TLOverlay {
    props: {
        scribble: TLScribble;
    };
}

/** @public */
export declare interface TLSelectionForegroundOverlay extends TLOverlay {
    props: {
        handle: RotateCorner | TLSelectionHandle;
        overlayType: 'mobile_rotate' | 'resize_handle' | 'rotate_handle';
    };
}

/** @public */
export declare interface TLShapeHandleOverlay extends TLOverlay {
    props: {
        handle: TLHandle;
        shapeId: TLShapeId;
    };
}

/** @public */
export declare interface TLSnapIndicatorOverlay extends TLOverlay {
    props: {
        line: SnapIndicator;
    };
}

/** @public */
export declare interface TLStraightArrowInfo {
    bindings: TLArrowBindings;
    type: 'straight';
    start: TLArrowPoint;
    end: TLArrowPoint;
    middle: VecLike;
    isValid: boolean;
    length: number;
}

/** @public */
export declare interface TLTypeFace {
    url: string;
    display?: any;
    featureSettings?: string;
    stretch?: string;
    style?: string;
    unicodeRange?: string;
    variant?: string;
    weight?: string;
    format?: string;
}

/** @public */
export declare interface TLUiA11y {
    msg: string | undefined;
    priority?: A11yPriority;
}

/** @public */
export declare interface TLUiA11yContextType {
    announce(msg: TLUiA11y): void;
    currentMsg: Atom<TLUiA11y>;
}

/** @public */
export declare interface TLUiActionItem<TransationKey extends string = string, IconType extends string = string> {
    icon?: IconType | React_2.ReactElement;
    id: string;
    kbd?: string;
    label?: {
        [key: string]: TransationKey;
    } | TransationKey;
    readonlyOk?: boolean;
    checkbox?: boolean;
    isRequiredA11yAction?: boolean;
    onSelect(source: TLUiEventSource): Promise<void> | void;
}

/** @public */
export declare type TLUiActionsContextType = Record<string, TLUiActionItem>;

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

/** @public */
export declare type TLUiAssetUrlOverrides = RecursivePartial<TLUiAssetUrls>;

/** @public */
export declare interface TLUiAssetUrls extends TLEditorAssetUrls {
    icons: Record<Exclude<string, TLUiIconType> | TLUiIconType, string>;
    translations: Record<(typeof LANGUAGES)[number]['locale'], string>;
    embedIcons: Partial<Record<(typeof DEFAULT_EMBED_DEFINITIONS)[number]['type'], string>>;
}

/** @public */
export declare interface TLUiButtonCheckProps {
    checked: boolean;
}

/** @public */
export declare interface TLUiButtonIconProps {
    icon: string | TLUiIconJsx;
    small?: boolean;
    invertIcon?: boolean;
}

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

/** @public */
export declare interface TLUiButtonProps extends React_2.HTMLAttributes<HTMLButtonElement> {
    disabled?: boolean;
    isActive?: boolean;
    type: 'danger' | 'help' | 'icon' | 'low' | 'menu' | 'normal' | 'primary' | 'tool';
    htmlButtonType?: 'button' | 'reset' | 'submit';
    tooltip?: string;
}

/** @public */
export declare interface TLUiComponents {
    ContextMenu?: ComponentType<TLUiContextMenuProps> | null;
    ActionsMenu?: ComponentType<TLUiActionsMenuProps> | null;
    HelpMenu?: ComponentType<TLUiHelpMenuProps> | null;
    ZoomMenu?: ComponentType<TLUiZoomMenuProps> | null;
    MainMenu?: ComponentType<TLUiMainMenuProps> | null;
    Minimap?: ComponentType | null;
    StylePanel?: ComponentType<TLUiStylePanelProps> | null;
    PageMenu?: ComponentType | null;
    NavigationPanel?: ComponentType | null;
    Toolbar?: ComponentType | null;
    RichTextToolbar?: ComponentType<TLUiRichTextToolbarProps> | null;
    ImageToolbar?: ComponentType | null;
    VideoToolbar?: ComponentType | null;
    KeyboardShortcutsDialog?: ComponentType<TLUiKeyboardShortcutsDialogProps> | null;
    QuickActions?: ComponentType<TLUiQuickActionsProps> | null;
    HelperButtons?: ComponentType<TLUiHelperButtonsProps> | null;
    DebugPanel?: ComponentType | null;
    DebugMenu?: ComponentType | null;
    MenuPanel?: ComponentType | null;
    TopPanel?: ComponentType | null;
    SharePanel?: ComponentType | null;
    CursorChatBubble?: ComponentType | null;
    Dialogs?: ComponentType | null;
    Toasts?: ComponentType | null;
    A11y?: ComponentType | null;
    FollowingIndicator?: ComponentType | null;
    PeopleMenu?: ComponentType | null;
    PeopleMenuAvatar?: ComponentType<TLUiPeopleMenuAvatarProps> | null;
    PeopleMenuItem?: ComponentType<TLUiPeopleMenuItemProps> | null;
    PeopleMenuFacePile?: ComponentType<TLUiPeopleMenuFacePileProps> | null;
    UserPresenceEditor?: ComponentType | null;
}

/** @public */
export declare interface TLUiComponentsProviderProps {
    overrides?: TLUiComponents;
    children: ReactNode;
}

/** @public */
export declare interface TLUiContextMenuProps {
    children?: ReactNode;
    disabled?: boolean;
}

/** @public */
export declare interface TLUiContextProviderProps {
    /**
     * Urls for where to find fonts and other assets for the UI.
     */
    assetUrls?: RecursivePartial<TLUiAssetUrls>;
    /**
     * Overrides for the UI.
     */
    overrides?: TLUiOverrides | TLUiOverrides[];
    /**
     * Overrides for the UI components.
     */
    components?: TLUiComponents;
    /**
     * Callback for when an event occurs in the UI.
     */
    onUiEvent?: TLUiEventHandler;
    /**
     * Whether to always should the mobile breakpoints.
     */
    forceMobile?: boolean;
    /**
     * The component's children.
     */
    children?: ReactNode;
    /**
     * Supported mime types for media files.
     */
    mediaMimeTypes?: string[];
}

/** @public */
export declare interface TLUiContextualToolbarProps {
    children?: React_3.ReactNode;
    className?: string;
    isMousingDown?: boolean;
    getSelectionBounds(): Box | undefined;
    changeOnlyWhenYChanges?: boolean;
    label: string;
}

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

/** @public */
export declare interface TLUiDialog {
    id: string;
    onClose?(): void;
    component: ComponentType<TLUiDialogProps>;
    preventBackgroundClose?: boolean;
}

/** @public */
export declare interface TLUiDialogBodyProps {
    className?: string;
    children: ReactNode;
    style?: CSSProperties;
}

/** @public */
export declare interface TLUiDialogFooterProps {
    className?: string;
    children?: ReactNode;
}

/** @public */
export declare interface TLUiDialogHeaderProps {
    className?: string;
    children: ReactNode;
}

/** @public */
export declare interface TLUiDialogProps {
    onClose(): void;
}

/** @public */
export declare interface TLUiDialogsContextType {
    addDialog(dialog: Omit<TLUiDialog, 'id'> & {
        id?: string;
    }): string;
    removeDialog(id: string): string;
    clearDialogs(): void;
    dialogs: Atom<TLUiDialog[]>;
}

/** @public */
export declare interface TLUiDialogsProviderProps {
    context?: string;
    overrides?(editor: Editor): TLUiDialogsContextType;
    children: ReactNode;
}

/** @public */
export declare interface TLUiDialogTitleProps {
    className?: string;
    children: ReactNode;
    style?: CSSProperties;
}

/** @public */
export declare interface TLUiDropdownMenuCheckboxItemProps {
    checked?: boolean;
    onSelect?(e: Event): void;
    disabled?: boolean;
    title: string;
    children: ReactNode;
}

/** @public */
export declare interface TLUiDropdownMenuContentProps {
    id?: string;
    className?: string;
    side?: 'bottom' | 'left' | 'right' | 'top';
    align?: 'center' | 'end' | 'start';
    sideOffset?: number;
    alignOffset?: number;
    children: ReactNode;
}

/** @public */
export declare interface TLUiDropdownMenuGroupProps {
    children: ReactNode;
    className?: string;
}

/** @public */
export declare interface TLUiDropdownMenuItemProps {
    noClose?: boolean;
    children: ReactNode;
}

/** @public */
export declare interface TLUiDropdownMenuRootProps {
    id: string;
    children: ReactNode;
    modal?: boolean;
    debugOpen?: boolean;
}

/** @public */
export declare interface TLUiDropdownMenuSubContentProps {
    id?: string;
    alignOffset?: number;
    sideOffset?: number;
    size?: 'medium' | 'small' | 'tiny' | 'wide';
    children: ReactNode;
}

/** @public */
export declare interface TLUiDropdownMenuSubProps {
    id: string;
    children: ReactNode;
}

/** @public */
export declare interface TLUiDropdownMenuSubTriggerProps {
    label: string;
    id?: string;
    title?: string;
    disabled?: boolean;
}

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

/** @public */
export declare type TLUiEventContextType = TLUiEventHandler;

/** @public */
export declare type TLUiEventData<K> = K extends null ? {
    source: TLUiEventSource;
} : {
    source: TLUiEventSource;
} & K;

/** @public */
export declare type TLUiEventHandler = <T extends keyof TLUiEventMap>(name: T, data: TLUiEventData<TLUiEventMap[T]>) => void;

/** @public */
export declare interface TLUiEventMap {
    undo: null;
    redo: null;
    'change-language': {
        locale: string;
    };
    'change-page': {
        direction?: 'next' | 'prev';
    };
    'select-adjacent-shape': {
        direction: 'down' | 'left' | 'next' | 'prev' | 'right' | 'up';
    };
    'delete-page': null;
    'duplicate-page': null;
    'move-page': null;
    'new-page': null;
    'rename-page': null;
    'move-to-page': null;
    'move-to-new-page': null;
    'rename-document': null;
    'group-shapes': null;
    'ungroup-shapes': null;
    'remove-frame': null;
    'fit-frame-to-content': null;
    'convert-to-embed': null;
    'convert-to-bookmark': null;
    'open-embed-link': null;
    'toggle-auto-size': null;
    'copy-as': {
        format: 'json' | 'png' | 'svg';
    };
    'export-as': {
        format: 'json' | 'png' | 'svg';
    };
    'export-all-as': {
        format: 'json' | 'png' | 'svg';
    };
    'download-original': null;
    'edit-link': null;
    'insert-embed': null;
    'insert-media': null;
    'replace-media': null;
    'image-manipulate': null;
    'alt-text-start': null;
    'set-alt-text': null;
    'align-shapes': {
        operation: 'bottom' | 'center-horizontal' | 'center-vertical' | 'left' | 'right' | 'top';
    };
    'duplicate-shapes': null;
    'pack-shapes': null;
    'stack-shapes': {
        operation: 'horizontal' | 'vertical';
    };
    'flip-shapes': {
        operation: 'horizontal' | 'vertical';
    };
    'distribute-shapes': {
        operation: 'horizontal' | 'vertical';
    };
    'stretch-shapes': {
        operation: 'horizontal' | 'vertical';
    };
    'reorder-shapes': {
        operation: 'backward' | 'forward' | 'toBack' | 'toFront';
    };
    'delete-shapes': null;
    'select-all-shapes': null;
    'select-none-shapes': null;
    'rotate-ccw': {
        fine: boolean;
    };
    'rotate-cw': {
        fine: boolean;
    };
    'zoom-in': {
        towardsCursor: boolean;
    };
    'zoom-out': {
        towardsCursor: boolean;
    };
    'zoom-to-fit': null;
    'zoom-to-selection': null;
    'reset-zoom': null;
    'zoom-into-view': null;
    'zoom-to-content': null;
    'open-menu': {
        id: string;
    };
    'close-menu': {
        id: string;
    };
    'create-new-project': null;
    'save-project-to-file': null;
    'open-file': null;
    'select-tool': {
        id: string;
    };
    print: null;
    copy: null;
    paste: null;
    cut: null;
    'set-style': {
        id: string;
        value: number | string;
    };
    'toggle-transparent': null;
    'toggle-snap-mode': null;
    'toggle-tool-lock': null;
    'toggle-grid-mode': null;
    'toggle-wrap-mode': null;
    'toggle-focus-mode': null;
    'input-mode': {
        value: string;
    };
    'toggle-invert-zoom': null;
    'toggle-debug-mode': null;
    'toggle-dynamic-size-mode': null;
    'toggle-paste-at-cursor': null;
    'toggle-lock': null;
    'toggle-reduce-motion': null;
    'toggle-keyboard-shortcuts': null;
    'enhanced-a11y-mode': null;
    'toggle-edge-scrolling': null;
    'color-scheme': {
        value: string;
    };
    'exit-pen-mode': null;
    'start-following': null;
    'stop-following': null;
    'set-color': null;
    'change-user-name': null;
    'open-cursor-chat': null;
    'zoom-tool': null;
    'unlock-all': null;
    'enlarge-shapes': null;
    'shrink-shapes': null;
    'flatten-to-image': null;
    'a11y-repeat-shape-announce': null;
    'open-url': {
        destinationUrl: string;
    };
    'open-context-menu': null;
    'adjust-shape-styles': null;
    'copy-link': null;
    'drag-tool': {
        id: string;
    };
    'image-replace': null;
    'video-replace': null;
    'open-kbd-shortcuts': null;
    'rich-text': {
        operation: 'bold' | 'bulletList' | 'heading' | 'link-edit' | 'link-remove' | 'link-visit' | 'link' | 'strike';
    };
    edit: null;
}

/** @public */
export declare type TLUiEventSource = 'actions-menu' | 'context-menu' | 'debug-panel' | 'dialog' | 'document-name' | 'export-menu' | 'help-menu' | 'helper-buttons' | 'image-toolbar' | 'kbd' | 'main-menu' | 'menu' | 'navigation-zone' | 'page-menu' | 'people-menu' | 'quick-actions' | 'rich-text-menu' | 'share-menu' | 'style-panel' | 'toolbar' | 'unknown' | 'video-toolbar' | 'zoom-menu';

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

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

/** @public */
export declare type TLUiIconJsx = ReactElement<React.HTMLAttributes<HTMLDivElement>>;

/** @public */
export declare interface TLUiIconProps extends React.HTMLAttributes<HTMLDivElement> {
    icon: Exclude<string, TLUiIconType> | TLUiIconJsx | TLUiIconType;
    label: string;
    small?: boolean;
    color?: string;
    children?: undefined;
    invertIcon?: boolean;
    crossOrigin?: 'anonymous' | 'use-credentials';
}

/** @public */
export declare type TLUiIconType = 'align-bottom' | 'align-center-horizontal' | 'align-center-vertical' | 'align-left' | 'align-right' | 'align-top' | 'alt' | 'arrow-arc' | 'arrow-cycle' | 'arrow-elbow' | 'arrow-left' | 'arrowhead-arrow' | 'arrowhead-bar' | 'arrowhead-diamond' | 'arrowhead-dot' | 'arrowhead-none' | 'arrowhead-square' | 'arrowhead-triangle-inverted' | 'arrowhead-triangle' | 'blob' | 'bold' | 'bookmark' | 'bring-forward' | 'bring-to-front' | 'broken' | 'bulletList' | 'check-circle' | 'check' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'chevrons-ne' | 'chevrons-sw' | 'clipboard-copied' | 'clipboard-copy' | 'code' | 'color' | 'comment' | 'corners' | 'crop' | 'cross-2' | 'cross-circle' | 'dash-dashed' | 'dash-dotted' | 'dash-draw' | 'dash-solid' | 'disconnected' | 'discord' | 'distribute-horizontal' | 'distribute-vertical' | 'dot' | 'dots-horizontal' | 'dots-vertical' | 'download' | 'drag-handle-dots' | 'duplicate' | 'edit' | 'external-link' | 'fill-fill' | 'fill-lined-fill' | 'fill-none' | 'fill-pattern' | 'fill-semi' | 'fill-solid' | 'follow' | 'following' | 'font-draw' | 'font-mono' | 'font-sans' | 'font-serif' | 'geo-arrow-down' | 'geo-arrow-left' | 'geo-arrow-right' | 'geo-arrow-up' | 'geo-check-box' | 'geo-cloud' | 'geo-diamond' | 'geo-ellipse' | 'geo-heart' | 'geo-hexagon' | 'geo-octagon' | 'geo-oval' | 'geo-pentagon' | 'geo-rectangle' | 'geo-rhombus-2' | 'geo-rhombus' | 'geo-star' | 'geo-trapezoid' | 'geo-triangle' | 'geo-x-box' | 'github' | 'group' | 'heading' | 'help-circle' | 'highlight' | 'horizontal-align-end' | 'horizontal-align-middle' | 'horizontal-align-start' | 'info-circle' | 'italic' | 'leading' | 'link' | 'list' | 'lock' | 'manual' | 'menu' | 'minus' | 'mixed' | 'pack' | 'plus' | 'question-mark-circle' | 'question-mark' | 'redo' | 'reset-zoom' | 'rotate-ccw' | 'rotate-cw' | 'send-backward' | 'send-to-back' | 'share-1' | 'size-extra-large' | 'size-large' | 'size-medium' | 'size-small' | 'spline-cubic' | 'spline-line' | 'stack-horizontal' | 'stack-vertical' | 'status-offline' | 'stretch-horizontal' | 'stretch-vertical' | 'strike' | 'text-align-center' | 'text-align-left' | 'text-align-right' | 'toggle-off' | 'toggle-on' | 'tool-arrow' | 'tool-eraser' | 'tool-frame' | 'tool-hand' | 'tool-highlight' | 'tool-laser' | 'tool-line' | 'tool-media' | 'tool-note' | 'tool-pencil' | 'tool-pointer' | 'tool-screenshot' | 'tool-text' | 'trash' | 'twitter' | 'underline' | 'undo' | 'ungroup' | 'unlock' | 'vertical-align-end' | 'vertical-align-middle' | 'vertical-align-start' | 'warning-triangle' | 'zoom-in' | 'zoom-out';

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

/** @public */
export declare interface TLUiInputProps {
    disabled?: boolean;
    label?: Exclude<string, TLUiTranslationKey> | TLUiTranslationKey;
    icon?: Exclude<string, TLUiIconType> | TLUiIconType;
    iconLeft?: Exclude<string, TLUiIconType> | TLUiIconType;
    iconLabel?: Exclude<string, TLUiTranslationKey> | TLUiTranslationKey;
    autoFocus?: boolean;
    autoSelect?: boolean;
    children?: React_2.ReactNode;
    defaultValue?: string;
    placeholder?: string;
    onComplete?(value: string): void;
    onValueChange?(value: string): void;
    onCancel?(value: string): void;
    onBlur?(value: string): void;
    onFocus?(): void;
    className?: string;
    /**
     * Usually on iOS when you focus an input, the browser will adjust the viewport to bring the input
     * into view. Sometimes this doesn't work properly though - for example, if the input is newly
     * created, iOS seems to have a hard time adjusting the viewport for it. This prop allows you to
     * opt-in to some extra code to manually bring the input into view when the visual viewport of the
     * browser changes, but we don't want to use it everywhere because generally the native behavior
     * looks nicer in scenarios where it's sufficient.
     */
    shouldManuallyMaintainScrollPositionWhenFocused?: boolean;
    value?: string;
    'data-testid'?: string;
    'aria-label'?: string;
}

/** @public */
export declare interface TLUiKbdProps {
    children: string;
    visibleOnMobileLayout?: boolean;
}

/** @public */
export declare type TLUiKeyboardShortcutsDialogProps = TLUiDialogProps & {
    children?: ReactNode;
};

/** @public */
export declare interface TLUiLayoutProps extends HTMLAttributes<HTMLDivElement> {
    children: ReactNode;
    tooltipSide?: 'bottom' | 'left' | 'right' | 'top';
    asChild?: boolean;
}

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

/** @public */
export declare type TLUiMenuActionCheckboxItemProps = {
    actionId?: string;
} & Pick<TLUiMenuCheckboxItemProps, 'checked' | 'disabled' | 'toggle'>;

/** @public */
export declare type TLUiMenuActionItemProps = {
    actionId?: string;
} & Partial<Pick<TLUiMenuItemProps, 'disabled' | 'isSelected' | 'noClose' | 'onSelect'>>;

/** @public */
export declare interface TLUiMenuCheckboxItemProps<TranslationKey extends string = string, IconType extends string = string> {
    icon?: IconType | TLUiIconJsx;
    id: string;
    kbd?: string;
    title?: string;
    label?: {
        [key: string]: TranslationKey;
    } | TranslationKey;
    lang?: string;
    readonlyOk?: boolean;
    onSelect(source: TLUiEventSource): Promise<void> | void;
    toggle?: boolean;
    checked?: boolean;
    disabled?: boolean;
}

/** @public */
export declare interface TLUiMenuContextProviderProps {
    type: TLUiMenuContextType;
    sourceId: TLUiEventSource;
    children: React.ReactNode;
}

/** @public */
export declare type TLUiMenuContextType = 'context-menu' | 'helper-buttons' | 'icons' | 'keyboard-shortcuts' | 'menu' | 'small-icons' | 'toolbar-overflow' | 'toolbar';

/** @public */
export declare interface TLUiMenuGroupProps<TranslationKey extends string = string> {
    id: string;
    /**
     * The label to display on the item. If it's a string, it will be translated. If it's an object, the keys will be used as the language keys and the values will be translated.
     */
    label?: {
        [key: string]: TranslationKey;
    } | TranslationKey;
    className?: string;
    children?: ReactNode;
}

/** @public */
export declare interface TLUiMenuItemProps<TranslationKey extends string = string, IconType extends string = string> {
    id: string;
    /**
     * The icon to display on the item. Icons are only shown in certain menu types.
     */
    icon?: IconType | TLUiIconJsx;
    /**
     * An icon to display to the left of the menu item.
     */
    iconLeft?: IconType | TLUiIconJsx;
    /**
     * The keyboard shortcut to display on the item.
     */
    kbd?: string;
    /**
     * The label to display on the item. If it's a string, it will be translated. If it's an object, the keys will be used as the language keys and the values will be translated.
     */
    label?: {
        [key: string]: TranslationKey;
    } | TranslationKey;
    /**
     * If the editor is in readonly mode and the item is not marked as readonlyok, it will not be rendered.
     */
    readonlyOk?: boolean;
    /**
     * The function to call when the item is clicked.
     */
    onSelect(source: TLUiEventSource): Promise<void> | void;
    /**
     * Whether this item should be disabled.
     */
    disabled?: boolean;
    /**
     * Prevent the menu from closing when the item is clicked
     */
    noClose?: boolean;
    /**
     * Whether to show a spinner on the item.
     */
    spinner?: boolean;
    /**
     * Whether the item is selected.
     */
    isSelected?: boolean;
    /**
     * The function to call when the item is dragged. If this is provided, the item will be draggable.
     */
    onDragStart?(source: TLUiEventSource, info: TLPointerEventInfo): void;
}

/** @public */
export declare interface TLUiMenuSubmenuProps<Translation extends string = string> {
    id: string;
    label?: {
        [key: string]: Translation;
    } | Translation;
    disabled?: boolean;
    children: ReactNode;
    size?: 'medium' | 'small' | 'tiny' | 'wide';
}

/** @public */
export declare type TLUiMenuToolItemProps = {
    toolId?: string;
} & Pick<TLUiMenuItemProps, 'disabled' | 'isSelected'>;

/** @public */
export declare type TLUiOverrideHelpers = ReturnType<typeof useDefaultHelpers>;

/** @public */
export declare interface TLUiOverrides {
    actions?(editor: Editor, actions: TLUiActionsContextType, helpers: TLUiOverrideHelpers): TLUiActionsContextType;
    tools?(editor: Editor, tools: TLUiToolsContextType, helpers: TLUiOverrideHelpers): TLUiToolsContextType;
    translations?: TLUiTranslationProviderProps['overrides'];
}

/** @public */
export declare interface TLUiPeopleMenuAvatarProps {
    userId: string;
}

/** @public */
export declare interface TLUiPeopleMenuFacePileProps {
    userIds: string[];
    userName: string;
    userColor: string;
}

/** @public */
export declare interface TLUiPeopleMenuItemProps {
    userId: string;
}

/** @public */
export declare interface TLUiPopoverContentProps {
    children: React_3.ReactNode;
    side: 'bottom' | 'left' | 'right' | 'top';
    align?: 'center' | 'end' | 'start';
    alignOffset?: number;
    sideOffset?: number;
    disableEscapeKeyDown?: boolean;
    autoFocusFirstButton?: boolean;
}

/** @public */
export declare interface TLUiPopoverProps {
    id: string;
    open?: boolean;
    children: React_3.ReactNode;
    onOpenChange?(isOpen: boolean): void;
    className?: string;
}

/** @public */
export declare interface TLUiPopoverTriggerProps {
    children?: React_3.ReactNode;
}

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

/** @public */
export declare interface TLUiRichTextToolbarProps {
    children?: React_3.ReactNode;
}

/** @public */
export declare interface TLUiSelectContentProps {
    children: React_2.ReactNode;
    side?: 'bottom' | 'top';
    align?: 'center' | 'end' | 'start';
    className?: string;
}

/** @public */
export declare interface TLUiSelectItemProps {
    value: string;
    label: string;
    icon?: Exclude<string, TLUiIconType> | TLUiIconType;
    disabled?: boolean;
    className?: string;
}

/** @public */
export declare interface TLUiSelectProps {
    id: string;
    value: string;
    onValueChange(value: string): void;
    onOpenChange?(isOpen: boolean): void;
    disabled?: boolean;
    className?: string;
    children: React_2.ReactNode;
    'data-testid'?: string;
    'aria-label'?: string;
}

/** @public */
export declare interface TLUiSelectTriggerProps {
    children: React_2.ReactNode;
    className?: string;
}

/** @public */
export declare interface TLUiSelectValueProps {
    placeholder?: string;
    icon?: Exclude<string, TLUiIconType> | TLUiIconType;
    children?: React_2.ReactNode;
}

/** @public */
export declare interface TLUiSliderProps {
    min?: number;
    steps: number;
    value: null | number;
    label: string;
    title: string;
    onValueChange(value: number): void;
    onHistoryMark?(id: string): void;
    'data-testid'?: string;
    ariaValueModifier?: number;
}

/** @public */
export declare interface TLUiStylePanelProps {
    isMobile?: boolean;
    styles?: null | ReadonlySharedStyleMap;
    children?: ReactNode;
}

/** @public */
export declare interface TLUiToast {
    id: string;
    icon?: TLUiIconType;
    iconLabel?: string;
    severity?: AlertSeverity;
    title?: string;
    description?: string;
    actions?: TLUiToastAction[];
    keepOpen?: boolean;
    closeLabel?: string;
}

/** @public */
export declare interface TLUiToastAction {
    type: 'danger' | 'normal' | 'primary';
    label: string;
    onClick(): void;
}

/** @public */
export declare interface TLUiToastsContextType {
    addToast(toast: Omit<TLUiToast, 'id'> & {
        id?: string;
    }): string;
    removeToast(id: TLUiToast['id']): string;
    clearToasts(): void;
    toasts: Atom<TLUiToast[]>;
}

/** @public */
export declare interface TLUiToastsProviderProps {
    overrides?(editor: Editor): TLUiToastsContextType;
    children: ReactNode;
}

/** @public */
export declare interface TLUiToolbarButtonProps extends React_3.HTMLAttributes<HTMLButtonElement> {
    asChild?: boolean;
    children?: React_3.ReactNode;
    className?: string;
    disabled?: boolean;
    isActive?: boolean;
    type: 'icon' | 'menu' | 'tool';
    tooltip?: string;
}

/** @public */
export declare interface TLUiToolbarProps extends React_3.HTMLAttributes<HTMLDivElement> {
    children?: React_3.ReactNode;
    className?: string;
    dir?: 'ltr' | 'rtl';
    label: string;
    orientation?: 'grid' | 'horizontal' | 'vertical';
    tooltipSide?: 'bottom' | 'left' | 'right' | 'top';
}

/** @public */
export declare interface TLUiToolbarToggleGroupProps extends React_3.HTMLAttributes<HTMLDivElement> {
    children?: React_3.ReactNode;
    className?: string;
    dir?: 'ltr' | 'rtl';
    value: any;
    defaultValue?: any;
    type: 'multiple' | 'single';
    asChild?: boolean;
}

/** @public */
export declare interface TLUiToolbarToggleItemProps extends React_3.HTMLAttributes<HTMLButtonElement> {
    children?: React_3.ReactNode;
    className?: string;
    type: 'icon' | 'tool';
    value: string;
    tooltip?: React_3.ReactNode;
}

/** @public */
export declare interface TLUiToolItem<TranslationKey extends string = string, IconType extends string = string> {
    id: string;
    label: TranslationKey;
    shortcutsLabel?: TranslationKey;
    icon: IconType | TLUiIconJsx;
    onSelect(source: TLUiEventSource): void;
    onDragStart?(source: TLUiEventSource, info: TLPointerEventInfo): void;
    /**
     * The keyboard shortcut for this tool. This is a string that can be a single key,
     * or a combination of keys.
     * For example, `cmd+z` or `cmd+shift+z` or `cmd+u,ctrl+u`, or just `v` or `a`.
     * We have backwards compatibility with the old system, where we used to use
     * symbols to denote cmd/alt/shift, using `!` for shift, `$` for cmd, and `?` for alt.
     */
    kbd?: string;
    readonlyOk?: boolean;
    meta?: {
        [key: string]: any;
    };
}

/** @public */
export declare type TLUiToolsContextType = Record<string, TLUiToolItem>;

/** @public */
export declare interface TLUiToolsProviderProps {
    overrides?(editor: Editor, tools: TLUiToolsContextType, helpers: Partial<TLUiOverrideHelpers>): TLUiToolsContextType;
    children: React_2.ReactNode;
}

/** @public */
export declare interface TLUiTranslation {
    readonly locale: string;
    readonly label: string;
    readonly messages: Record<TLUiTranslationKey, string>;
    readonly dir: 'ltr' | 'rtl';
}

/** @public */
export declare type TLUiTranslationContextType = TLUiTranslation;

/** @public */
export declare type TLUiTranslationKey = 'a11y.adjust-shape-styles' | 'a11y.enlarge-shape' | 'a11y.enter-leave-container' | 'a11y.move-shape-faster' | 'a11y.move-shape' | 'a11y.multiple-shapes' | 'a11y.open-context-menu' | 'a11y.open-keyboard-shortcuts' | 'a11y.pan-camera' | 'a11y.repeat-shape' | 'a11y.rotate-shape-ccw-fine' | 'a11y.rotate-shape-ccw' | 'a11y.rotate-shape-cw-fine' | 'a11y.rotate-shape-cw' | 'a11y.select-shape-direction' | 'a11y.select-shape' | 'a11y.shape-image' | 'a11y.shape-index' | 'a11y.shape-video' | 'a11y.shrink-shape' | 'a11y.skip-to-main-content' | 'a11y.status' | 'action.align-bottom' | 'action.align-center-horizontal.short' | 'action.align-center-horizontal' | 'action.align-center-vertical.short' | 'action.align-center-vertical' | 'action.align-left' | 'action.align-right' | 'action.align-top' | 'action.back-to-content' | 'action.bring-forward' | 'action.bring-to-front' | 'action.convert-to-bookmark' | 'action.convert-to-embed' | 'action.copy-as-json.short' | 'action.copy-as-json' | 'action.copy-as-png.short' | 'action.copy-as-png' | 'action.copy-as-svg.short' | 'action.copy-as-svg' | 'action.copy' | 'action.cut' | 'action.delete' | 'action.distribute-horizontal.short' | 'action.distribute-horizontal' | 'action.distribute-vertical.short' | 'action.distribute-vertical' | 'action.download-original' | 'action.duplicate' | 'action.edit-link' | 'action.enhanced-a11y-mode.menu' | 'action.enhanced-a11y-mode' | 'action.exit-pen-mode' | 'action.export-all-as-png.short' | 'action.export-all-as-png' | 'action.export-all-as-svg.short' | 'action.export-all-as-svg' | 'action.export-as-png.short' | 'action.export-as-png' | 'action.export-as-svg.short' | 'action.export-as-svg' | 'action.fit-frame-to-content' | 'action.flatten-to-image' | 'action.flip-horizontal.short' | 'action.flip-horizontal' | 'action.flip-vertical.short' | 'action.flip-vertical' | 'action.fork-project-on-tldraw' | 'action.fork-project' | 'action.group' | 'action.insert-embed' | 'action.insert-media' | 'action.leave-shared-project' | 'action.new-project' | 'action.new-shared-project' | 'action.open-cursor-chat' | 'action.open-embed-link' | 'action.open-file' | 'action.open-kbd-shortcuts' | 'action.pack' | 'action.paste-error-description' | 'action.paste-error-title' | 'action.paste' | 'action.print' | 'action.redo' | 'action.remove-frame' | 'action.rename' | 'action.rotate-ccw' | 'action.rotate-cw' | 'action.save-copy' | 'action.select-all' | 'action.select-none' | 'action.select-zoom-tool' | 'action.send-backward' | 'action.send-to-back' | 'action.share-project' | 'action.stack-horizontal.short' | 'action.stack-horizontal' | 'action.stack-vertical.short' | 'action.stack-vertical' | 'action.stop-following' | 'action.stretch-horizontal.short' | 'action.stretch-horizontal' | 'action.stretch-vertical.short' | 'action.stretch-vertical' | 'action.toggle-auto-none' | 'action.toggle-auto-pan' | 'action.toggle-auto-size' | 'action.toggle-auto-zoom' | 'action.toggle-dark-mode.menu' | 'action.toggle-dark-mode' | 'action.toggle-debug-mode.menu' | 'action.toggle-debug-mode' | 'action.toggle-dynamic-size-mode.menu' | 'action.toggle-dynamic-size-mode' | 'action.toggle-edge-scrolling.menu' | 'action.toggle-edge-scrolling' | 'action.toggle-focus-mode.menu' | 'action.toggle-focus-mode' | 'action.toggle-grid.menu' | 'action.toggle-grid' | 'action.toggle-invert-zoom.menu' | 'action.toggle-invert-zoom' | 'action.toggle-keyboard-shortcuts.menu' | 'action.toggle-keyboard-shortcuts' | 'action.toggle-lock' | 'action.toggle-mouse' | 'action.toggle-paste-at-cursor.menu' | 'action.toggle-paste-at-cursor' | 'action.toggle-reduce-motion.menu' | 'action.toggle-reduce-motion' | 'action.toggle-snap-mode.menu' | 'action.toggle-snap-mode' | 'action.toggle-tool-lock.menu' | 'action.toggle-tool-lock' | 'action.toggle-trackpad' | 'action.toggle-transparent.context-menu' | 'action.toggle-transparent.menu' | 'action.toggle-transparent' | 'action.toggle-wrap-mode.menu' | 'action.toggle-wrap-mode' | 'action.undo' | 'action.ungroup' | 'action.unlock-all' | 'action.zoom-in' | 'action.zoom-out' | 'action.zoom-quick' | 'action.zoom-to-100' | 'action.zoom-to-fit' | 'action.zoom-to-selection' | 'actions-menu.title' | 'align-style.end' | 'align-style.justify' | 'align-style.middle' | 'align-style.start' | 'app.loading' | 'arrow-kind-style.arc' | 'arrow-kind-style.elbow' | 'arrowheadEnd-style.arrow' | 'arrowheadEnd-style.bar' | 'arrowheadEnd-style.diamond' | 'arrowheadEnd-style.dot' | 'arrowheadEnd-style.inverted' | 'arrowheadEnd-style.none' | 'arrowheadEnd-style.pipe' | 'arrowheadEnd-style.square' | 'arrowheadEnd-style.triangle' | 'arrowheadStart-style.arrow' | 'arrowheadStart-style.bar' | 'arrowheadStart-style.diamond' | 'arrowheadStart-style.dot' | 'arrowheadStart-style.inverted' | 'arrowheadStart-style.none' | 'arrowheadStart-style.pipe' | 'arrowheadStart-style.square' | 'arrowheadStart-style.triangle' | 'assets.files.amount-too-many' | 'assets.files.maximum-size' | 'assets.files.size-too-big' | 'assets.files.type-not-allowed' | 'assets.files.upload-failed' | 'assets.url.failed' | 'color-style.black' | 'color-style.blue' | 'color-style.green' | 'color-style.grey' | 'color-style.light-blue' | 'color-style.light-green' | 'color-style.light-red' | 'color-style.light-violet' | 'color-style.orange' | 'color-style.red' | 'color-style.violet' | 'color-style.white' | 'color-style.yellow' | 'context-menu.arrange' | 'context-menu.copy-as' | 'context-menu.edit' | 'context-menu.export-all-as' | 'context-menu.export-as' | 'context-menu.move-to-page' | 'context-menu.reorder' | 'context-menu.title' | 'context.pages.new-page' | 'cursor-chat.type-to-chat' | 'dash-style.dashed' | 'dash-style.dotted' | 'dash-style.draw' | 'dash-style.solid' | 'document-name-menu.copy-link' | 'document.default-name' | 'edit-link-dialog.cancel' | 'edit-link-dialog.clear' | 'edit-link-dialog.detail' | 'edit-link-dialog.external-link' | 'edit-link-dialog.invalid-url' | 'edit-link-dialog.save' | 'edit-link-dialog.title' | 'edit-link-dialog.url' | 'embed-dialog.back' | 'embed-dialog.cancel' | 'embed-dialog.create' | 'embed-dialog.instruction' | 'embed-dialog.invalid-url' | 'embed-dialog.title' | 'embed-dialog.url' | 'file-system.confirm-clear.cancel' | 'file-system.confirm-clear.continue' | 'file-system.confirm-clear.description' | 'file-system.confirm-clear.dont-show-again' | 'file-system.confirm-clear.title' | 'file-system.confirm-open.cancel' | 'file-system.confirm-open.description' | 'file-system.confirm-open.dont-show-again' | 'file-system.confirm-open.open' | 'file-system.confirm-open.title' | 'file-system.file-open-error.file-format-version-too-new' | 'file-system.file-open-error.generic-corrupted-file' | 'file-system.file-open-error.not-a-tldraw-file' | 'file-system.file-open-error.title' | 'file-system.shared-document-file-open-error.description' | 'file-system.shared-document-file-open-error.title' | 'fill-style.fill' | 'fill-style.lined-fill' | 'fill-style.none' | 'fill-style.pattern' | 'fill-style.semi' | 'fill-style.solid' | 'focus-mode.toggle-focus-mode' | 'font-style.draw' | 'font-style.mono' | 'font-style.sans' | 'font-style.serif' | 'geo-style.arrow-down' | 'geo-style.arrow-left' | 'geo-style.arrow-right' | 'geo-style.arrow-up' | 'geo-style.check-box' | 'geo-style.cloud' | 'geo-style.diamond' | 'geo-style.ellipse' | 'geo-style.heart' | 'geo-style.hexagon' | 'geo-style.octagon' | 'geo-style.oval' | 'geo-style.pentagon' | 'geo-style.rectangle' | 'geo-style.rhombus-2' | 'geo-style.rhombus' | 'geo-style.star' | 'geo-style.trapezoid' | 'geo-style.triangle' | 'geo-style.x-box' | 'handle.crop.bottom-left' | 'handle.crop.bottom-right' | 'handle.crop.bottom' | 'handle.crop.left' | 'handle.crop.right' | 'handle.crop.top-left' | 'handle.crop.top-right' | 'handle.crop.top' | 'handle.resize-bottom-left' | 'handle.resize-bottom-right' | 'handle.resize-bottom' | 'handle.resize-left' | 'handle.resize-right' | 'handle.resize-top-left' | 'handle.resize-top-right' | 'handle.resize-top' | 'handle.rotate.bottom_left_rotate' | 'handle.rotate.bottom_right_rotate' | 'handle.rotate.mobile_rotate' | 'handle.rotate.top_left_rotate' | 'handle.rotate.top_right_rotate' | 'help-menu.about' | 'help-menu.discord' | 'help-menu.github' | 'help-menu.import-tldr-file' | 'help-menu.keyboard-shortcuts' | 'help-menu.privacy' | 'help-menu.terms' | 'help-menu.title' | 'help-menu.twitter' | 'menu.accessibility' | 'menu.color-theme' | 'menu.copy-as' | 'menu.edit' | 'menu.export-as' | 'menu.file' | 'menu.input-device' | 'menu.language' | 'menu.preferences' | 'menu.theme' | 'menu.title' | 'menu.view' | 'navigation-zone.minimap' | 'navigation-zone.title' | 'navigation-zone.toggle-minimap' | 'navigation-zone.zoom' | 'opacity-style.0.1' | 'opacity-style.0.25' | 'opacity-style.0.5' | 'opacity-style.0.75' | 'opacity-style.1' | 'page-menu.create-new-page' | 'page-menu.edit-done' | 'page-menu.edit-start' | 'page-menu.go-to-page' | 'page-menu.max-page-count-reached' | 'page-menu.new-page-initial-name' | 'page-menu.submenu.delete' | 'page-menu.submenu.duplicate-page' | 'page-menu.submenu.move-down' | 'page-menu.submenu.move-up' | 'page-menu.submenu.rename' | 'page-menu.submenu.title' | 'page-menu.title' | 'people-menu.anonymous-user' | 'people-menu.avatar-color' | 'people-menu.change-color' | 'people-menu.change-name' | 'people-menu.follow' | 'people-menu.following' | 'people-menu.invite' | 'people-menu.leading' | 'people-menu.title' | 'people-menu.user' | 'share-menu.copied' | 'share-menu.copy-link-note' | 'share-menu.copy-link' | 'share-menu.copy-readonly-link-note' | 'share-menu.copy-readonly-link' | 'share-menu.create-snapshot-link' | 'share-menu.creating-project' | 'share-menu.fork-note' | 'share-menu.offline-note' | 'share-menu.project-too-large' | 'share-menu.save-note' | 'share-menu.share-project' | 'share-menu.snapshot-link-note' | 'share-menu.title' | 'share-menu.upload-failed' | 'sharing.confirm-leave.cancel' | 'sharing.confirm-leave.description' | 'sharing.confirm-leave.dont-show-again' | 'sharing.confirm-leave.leave' | 'sharing.confirm-leave.title' | 'shortcuts-dialog.a11y' | 'shortcuts-dialog.collaboration' | 'shortcuts-dialog.edit' | 'shortcuts-dialog.file' | 'shortcuts-dialog.preferences' | 'shortcuts-dialog.text-formatting' | 'shortcuts-dialog.title' | 'shortcuts-dialog.tools' | 'shortcuts-dialog.transform' | 'shortcuts-dialog.view' | 'size-style.l' | 'size-style.m' | 'size-style.s' | 'size-style.xl' | 'spline-style.cubic' | 'spline-style.line' | 'status.offline' | 'style-panel.align' | 'style-panel.arrow-kind' | 'style-panel.arrowhead-end' | 'style-panel.arrowhead-start' | 'style-panel.arrowheads' | 'style-panel.color' | 'style-panel.dash' | 'style-panel.fill' | 'style-panel.font' | 'style-panel.geo' | 'style-panel.label-align' | 'style-panel.mixed' | 'style-panel.opacity' | 'style-panel.position' | 'style-panel.selected' | 'style-panel.size' | 'style-panel.spline' | 'style-panel.title' | 'style-panel.vertical-align' | 'theme.dark' | 'theme.light' | 'theme.system' | 'toast.close' | 'toast.error.copy-fail.desc' | 'toast.error.copy-fail.title' | 'toast.error.export-fail.desc' | 'toast.error.export-fail.title' | 'toast.error' | 'toast.info' | 'toast.success' | 'toast.warning' | 'tool-panel.more' | 'tool-panel.title' | 'tool.arrow-down' | 'tool.arrow-left' | 'tool.arrow-right' | 'tool.arrow-up' | 'tool.arrow' | 'tool.aspect-ratio.circle' | 'tool.aspect-ratio.landscape' | 'tool.aspect-ratio.original' | 'tool.aspect-ratio.portrait' | 'tool.aspect-ratio.square' | 'tool.aspect-ratio.wide' | 'tool.aspect-ratio' | 'tool.bookmark' | 'tool.check-box' | 'tool.cloud' | 'tool.diamond' | 'tool.draw' | 'tool.ellipse' | 'tool.embed' | 'tool.eraser' | 'tool.flip-horz' | 'tool.flip-vert' | 'tool.frame' | 'tool.hand' | 'tool.heart' | 'tool.hexagon' | 'tool.highlight' | 'tool.image-crop-confirm' | 'tool.image-crop' | 'tool.image-toolbar-title' | 'tool.image-zoom' | 'tool.laser' | 'tool.line' | 'tool.media-alt-text-confirm' | 'tool.media-alt-text-desc' | 'tool.media-alt-text' | 'tool.media' | 'tool.note' | 'tool.octagon' | 'tool.oval' | 'tool.pentagon' | 'tool.pointer-down' | 'tool.rectangle' | 'tool.replace-media' | 'tool.rhombus' | 'tool.rich-text-bold' | 'tool.rich-text-bulletList' | 'tool.rich-text-code' | 'tool.rich-text-header' | 'tool.rich-text-highlight' | 'tool.rich-text-italic' | 'tool.rich-text-link-remove' | 'tool.rich-text-link-visit' | 'tool.rich-text-link' | 'tool.rich-text-orderedList' | 'tool.rich-text-strikethrough' | 'tool.rich-text-toolbar-title' | 'tool.rotate-cw' | 'tool.select' | 'tool.star' | 'tool.text' | 'tool.trapezoid' | 'tool.triangle' | 'tool.x-box' | 'ui.checked' | 'ui.close' | 'ui.unchecked' | 'verticalAlign-style.end' | 'verticalAlign-style.middle' | 'verticalAlign-style.start' | 'vscode.file-open.backup-failed' | 'vscode.file-open.backup-saved' | 'vscode.file-open.backup' | 'vscode.file-open.desc' | 'vscode.file-open.dont-show-again' | 'vscode.file-open.open';

/** @public */
export declare interface TLUiTranslationProviderProps {
    children: React_2.ReactNode;
    locale: string;
    /**
     * A collection of overrides different locales.
     *
     * @example
     *
     * ```ts
     * <TranslationProvider overrides={{ en: { 'style-panel.styles': 'Properties' } }} />
     * ```
     */
    overrides?: Record<string, Record<string, string>>;
}

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

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

/* Excluded from this release type: TLV1AlignStyle */

/* Excluded from this release type: TLV1ArrowBinding */

/* Excluded from this release type: TLV1ArrowShape */

/* Excluded from this release type: TLV1Asset */

/* Excluded from this release type: TLV1AssetType */

/* Excluded from this release type: TLV1BaseAsset */

/* Excluded from this release type: TLV1BaseBinding */

/* Excluded from this release type: TLV1BaseShape */

/* Excluded from this release type: TLV1Binding */

/* Excluded from this release type: TLV1Bounds */

/* Excluded from this release type: TLV1ColorStyle */

/* Excluded from this release type: TLV1DashStyle */

/* Excluded from this release type: TLV1Decoration */

/* Excluded from this release type: TLV1Document */

/* Excluded from this release type: TLV1DrawShape */

/* Excluded from this release type: TLV1EllipseShape */

/* Excluded from this release type: TLV1FontStyle */

/* Excluded from this release type: TLV1GroupShape */

/* Excluded from this release type: TLV1Handle */

/* Excluded from this release type: TLV1ImageAsset */

/* Excluded from this release type: TLV1ImageShape */

/* Excluded from this release type: TLV1Page */

/* Excluded from this release type: TLV1PageState */

/* Excluded from this release type: TLV1RectangleShape */

/* Excluded from this release type: TLV1Shape */

/* Excluded from this release type: TLV1ShapeStyles */

/* Excluded from this release type: TLV1ShapeType */

/* Excluded from this release type: TLV1SizeStyle */

/* Excluded from this release type: TLV1StickyShape */

/* Excluded from this release type: TLV1TextShape */

/* Excluded from this release type: TLV1TriangleShape */

/* Excluded from this release type: TLV1VideoAsset */

/* Excluded from this release type: TLV1VideoShape */

/** @public */
export declare interface TLZoomBrushOverlay extends TLOverlay {
    props: {
        h: number;
        w: number;
        x: number;
        y: number;
    };
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/** @public @react */
export declare function ToggleToolLockedButton({ activeToolId }: ToggleToolLockedButtonProps): JSX.Element | null;

/** @public */
export declare interface ToggleToolLockedButtonProps {
    activeToolId?: string;
}

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

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

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

/** @public @react */
export declare function ToolbarItem({ tool }: ToolbarItemProps): JSX.Element;

/** @public */
export declare interface ToolbarItemProps {
    tool: string;
}

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

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

/** @public */
export declare const truncateStringWithEllipsis: (str: string, maxLength: number) => string;

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

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

/**
 * Overrides for unknown/arbitrary embeds that aren't in the curated embed definitions list.
 * These restrict the most dangerous sandbox permissions to mitigate:
 * - Same-origin sandbox escape (allow-scripts + allow-same-origin lets the iframe remove its own sandbox)
 * - Phishing via embedded forms
 * - Popup-based social engineering
 *
 * @public
 */
export declare const unknownEmbedShapePermissionOverrides: TLEmbedShapePermissions;

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

/** @public */
export declare function unwrapLabel(label?: TLUiActionItem['label'], menuType?: string): string | undefined;

/**
 * Update the current arrow target state for an editor. See {@link ArrowTargetState} for more
 * information.
 *
 * @public
 */
export declare function updateArrowTargetState({ editor, pointInPageSpace, arrow, isPrecise, currentBinding, oppositeBinding }: UpdateArrowTargetStateOpts): ArrowTargetState | null;

/**
 * Options passed to {@link updateArrowTargetState}.
 *
 * @public
 */
export declare interface UpdateArrowTargetStateOpts {
    editor: Editor;
    pointInPageSpace: VecLike;
    arrow: TLArrowShape | undefined;
    isPrecise: boolean;
    currentBinding: TLArrowBinding | undefined;
    /** The binding from the opposite end of the arrow, if one exists. */
    oppositeBinding: TLArrowBinding | undefined;
}

/** @public */
export declare function useA11y(): TLUiA11yContextType;

/** @public */
export declare function useActions(): TLUiActionsContextType;

/* Excluded from this release type: useAssetUrls */

/** @public */
export declare function useBreakpoint(): number;

/**
 * Returns true if the user is in the select tool and has at least one shape selected.
 * This corresponds to the `canApplySelectionAction()` check in actions.tsx.
 * @public
 */
export declare function useCanApplySelectionAction(): boolean;

/** @public */
export declare function useCanRedo(): boolean;

/** @public */
export declare function useCanUndo(): boolean;

/** @public */
export declare function useCollaborationStatus(): "offline" | "online" | null;

/** @public */
export declare function useCopyAs(): (ids: TLShapeId[], format?: TLCopyType) => void;

/** @public */
export declare function useCurrentTranslation(): TLUiTranslation;

/** @public */
export declare function useDefaultHelpers(): {
    addDialog: (dialog: Omit<TLUiDialog, "id"> & {
        id?: string | undefined;
    }) => string;
    addToast: (toast: Omit<TLUiToast, "id"> & {
        id?: string | undefined;
    }) => string;
    clearDialogs: () => void;
    clearToasts: () => void;
    copy: (source: TLUiEventSource) => Promise<void>;
    copyAs: (ids: TLShapeId_2[], format?: TLCopyType) => void;
    cut: (source: TLUiEventSource) => Promise<void>;
    exportAs: (ids: TLShapeId_2[], opts?: {
        format?: TLExportType | undefined;
        name?: string | undefined;
        scale?: number | undefined;
    }) => void;
    getEmbedDefinition: (url: string) => TLEmbedResult;
    insertMedia: () => Promise<void>;
    isMobile: boolean;
    msg: (id?: string | undefined) => string;
    paste: (data: ClipboardItem[] | DataTransfer, source: TLUiEventSource, point?: VecLike | undefined) => Promise<void>;
    printSelectionOrPages: () => Promise<void>;
    removeDialog: (id: string) => string;
    removeToast: (id: string) => string;
    replaceImage: () => Promise<void>;
    replaceVideo: () => Promise<void>;
};

/** @public */
export declare function useDialogs(): TLUiDialogsContextType;

/**
 * Returns the current text direction ('ltr' or 'rtl') based on the current translation.
 *
 * @public
 */
export declare function useDirection(): "ltr" | "rtl";

/** @public */
export declare function useEditablePlainText(shapeId: TLShapeId, type: ExtractShapeByProps<{
    text: string;
}>['type'], text?: string): {
    handleBlur: () => void;
    handleChange: ({ plaintext }: {
        plaintext: string;
    }) => void;
    handleDoubleClick: (e: {
        nativeEvent: Event;
    } | Event) => void;
    handleFocus: () => void;
    handleInputPointerDown: (e: React_3.PointerEvent<Element>) => void;
    handleKeyDown: (e: KeyboardEvent) => void;
    handlePaste: (e: ClipboardEvent | React_3.ClipboardEvent<HTMLTextAreaElement>) => void;
    isEditing: boolean;
    isEmpty: boolean;
    isReadyForEditing: boolean;
    rInput: React_3.RefObject<HTMLTextAreaElement | null>;
};

/** @public */
export declare function useEditableRichText(shapeId: TLShapeId, type: ExtractShapeByProps<{
    richText: TLRichText;
}>['type'], richText?: TLRichText): {
    handleBlur: () => void;
    handleChange: ({ richText }: {
        richText: {
            attrs?: any;
            content: unknown[];
            type: string;
        };
    }) => void;
    handleDoubleClick: (e: {
        nativeEvent: Event;
    } | Event) => void;
    handleFocus: () => void;
    handleInputPointerDown: (e: PointerEvent_2<Element>) => void;
    handleKeyDown: (e: KeyboardEvent) => void;
    handlePaste: (e: ClipboardEvent | ClipboardEvent_2<HTMLTextAreaElement>) => void;
    isEditing: boolean;
    isEmpty: boolean | undefined;
    isReadyForEditing: boolean;
    rInput: RefObject<HTMLDivElement | null>;
};

/** @public */
export declare function useExportAs(): (ids: TLShapeId[], opts?: {
    format?: TLExportType | undefined;
    name?: string | undefined;
    scale?: number | undefined;
}) => void;

/**
 * This is a handy helper hook that resolves an asset to an optimized URL for a given shape, or its
 * {@link @tldraw/editor#Editor.createTemporaryAssetPreview | placeholder} if the asset is still
 * uploading. This is used in particular for high-resolution images when you want lower and higher
 * resolution depending on the size of the image on the canvas and the zoom level.
 *
 * For image scaling to work, you need to implement scaled URLs in
 * {@link @tldraw/tlschema#TLAssetStore.resolve}.
 *
 * @public
 */
export declare function useImageOrVideoAsset({ shapeId, assetId, width }: UseImageOrVideoAssetOptions): {
    asset: null | TLImageAsset | TLVideoAsset;
    url: null | string;
};

/**
 * Options for {@link useImageOrVideoAsset}.
 *
 * @public
 */
export declare interface UseImageOrVideoAssetOptions {
    /** The asset ID you want a URL for. */
    assetId: null | TLAssetId;
    /**
     * The shape the asset is being used for. We won't update the resolved URL while the shape is
     * off-screen.
     */
    shapeId?: TLShapeId;
    /**
     * The width at which the asset will be displayed, in shape-space pixels.
     */
    width: number;
}

/** @public */
export declare function useIsToolSelected(tool: TLUiToolItem | undefined): boolean;

/** @public */
export declare function useKeyboardShortcuts(): void;

/** @public */
export declare function useLocalStorageState<T = any>(key: string, defaultValue: T): readonly [T, (setter: ((value: T) => T) | T) => void];

/** @public */
export declare function useMenuClipboardEvents(): {
    copy: (source: TLUiEventSource) => Promise<void>;
    cut: (source: TLUiEventSource) => Promise<void>;
    paste: (data: ClipboardItem[] | DataTransfer, source: TLUiEventSource, point?: undefined | VecLike) => Promise<void>;
};

/** @public */
export declare function useMenuIsOpen(id: string, cb?: (isOpen: boolean) => void): readonly [boolean, (isOpen: boolean) => void];

/** @public */
export declare function useNativeClipboardEvents(): void;

/** @public */
export declare function usePrefersReducedMotion(): boolean;

/** @public */
export declare function useReadonly(): boolean;

/** @public */
export declare function useRelevantStyles(stylesToCheck?: readonly StyleProp<any>[]): null | ReadonlySharedStyleMap;

/** @public */
export declare const useSelectedShapesAnnouncer: () => void;

/** @public */
export declare function useShowCollaborationUi(): boolean;

/** @public */
export declare function useStylePanelContext(): StylePanelContext;

/** @public */
export declare function useTldrawUiComponents(): TLUiComponents;

/** @public */
export declare function useTldrawUiOrientation(): TldrawUiOrientationContext;

/** @public */
export declare function useToasts(): TLUiToastsContextType;

/** @public */
export declare function useTools(): TLUiToolsContextType;

/**
 * Returns a function to translate a translation key into a string based on the current translation.
 *
 * @example
 *
 * ```ts
 * const msg = useTranslation()
 * const label = msg('style-panel.styles')
 * ```
 *
 * @public
 */
export declare function useTranslation(): (id?: string | undefined) => string;

/** @public */
export declare function useUiEvents(): TLUiEventContextType;

/**
 * Returns true if the number of UNLOCKED selected shapes is at least min or at most max.
 * @public
 */
export declare function useUnlockedSelectedShapesCount(min?: number, max?: number): boolean | number;

/** @public */
export declare class VideoAssetUtil extends AssetUtil<TLVideoAsset> {
    static type: "video";
    static props: {
        fileSize: Validator<number | undefined>;
        h: Validator<number>;
        isAnimated: Validator<boolean>;
        mimeType: Validator<null | string>;
        name: Validator<string>;
        src: Validator<null | string>;
        w: Validator<number>;
    };
    static migrations: MigrationSequence;
    options: {
        supportedMimeTypes: null | readonly string[];
    };
    getDefaultProps(): TLVideoAsset['props'];
    getSupportedMimeTypes(): readonly string[];
    getAssetFromFile(file: File, assetId: TLAssetId): Promise<null | TLVideoAsset>;
}

/** @public */
export declare interface VideoShapeOptions extends ShapeOptionsWithDisplayValues<TLVideoShape, VideoShapeUtilDisplayValues> {
    /**
     * Should videos play automatically?
     */
    autoplay: boolean;
}

/** @public */
export declare class VideoShapeUtil extends BaseBoxShapeUtil<TLVideoShape> {
    static type: "video";
    static props: RecordProps<TLVideoShape>;
    static migrations: TLPropsMigrations;
    static handledAssetTypes: readonly ["video"];
    options: VideoShapeOptions;
    canEdit(shape: TLVideoShape): boolean;
    isAspectRatioLocked(shape: TLVideoShape): boolean;
    getDefaultProps(): TLVideoShape['props'];
    createShapeForAsset(asset: TLAsset, position: VecModel): null | TLShapePartial;
    getAriaDescriptor(shape: TLVideoShape): string;
    component(shape: TLVideoShape): JSX.Element;
    getIndicatorPath(shape: TLVideoShape): Path2D;
    toSvg(shape: TLVideoShape, ctx: SvgExportContext): Promise<JSX.Element | null>;
}

/** @public */
export declare interface VideoShapeUtilDisplayValues {
}

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

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

/**
 * Overlay util for the zoom brush rectangle.
 *
 * @public
 */
export declare class ZoomBrushOverlayUtil extends OverlayUtil<TLZoomBrushOverlay> {
    static type: string;
    options: {
        lineWidth: number;
        zIndex: number;
    };
    isActive(): boolean;
    getOverlays(): TLZoomBrushOverlay[];
    render(ctx: CanvasRenderingContext2D, overlays: TLZoomBrushOverlay[]): void;
    renderMinimap(ctx: CanvasRenderingContext2D, overlays: TLZoomBrushOverlay[], zoom: number): void;
}

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

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

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

/** @public */
export declare class ZoomTool extends StateNode {
    static id: string;
    static initial: string;
    static children(): TLStateNodeConstructor[];
    static isLockable: boolean;
    info: TLPointerEventInfo & {
        onInteractionEnd?: string | undefined;
    };
    onEnter(info: TLPointerEventInfo & {
        onInteractionEnd: string;
    }): void;
    onExit(): void;
    onKeyDown(): void;
    onKeyUp(info: TLKeyboardEventInfo): void;
    onInterrupt(): void;
    private complete;
    private updateCursor;
}

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


export * from "@tldraw/editor";

export { }