import { Atom } from '@tldraw/editor'; import { BaseBoxShapeTool } from '@tldraw/editor'; import { BaseBoxShapeUtil } from '@tldraw/editor'; import { BindingOnChangeOptions } from '@tldraw/editor'; import { BindingOnCreateOptions } from '@tldraw/editor'; import { BindingOnShapeChangeOptions } from '@tldraw/editor'; import { BindingOnShapeIsolateOptions } from '@tldraw/editor'; import { BindingUtil } from '@tldraw/editor'; import { Box } from '@tldraw/editor'; import { Circle2d } from '@tldraw/editor'; import { 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 { 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 { SerializedSchema } from '@tldraw/editor'; import { ShapeUtil } from '@tldraw/editor'; import { ShapeWithCrop } from '@tldraw/editor'; import { SharedStyle } from '@tldraw/editor'; import { StateNode } from '@tldraw/editor'; import { StyleProp } from '@tldraw/editor'; import { SvgExportContext } from '@tldraw/editor'; import { SVGProps } from 'react'; import { TiptapEditor } from '@tldraw/editor'; import { TLAnyBindingUtilConstructor } from '@tldraw/editor'; import { TLAnyShapeUtilConstructor } from '@tldraw/editor'; import { TLArrowBinding } from '@tldraw/editor'; import { TLArrowBindingProps } from '@tldraw/editor'; import { TLArrowShape } from '@tldraw/editor'; import { TLArrowShapeArrowheadStyle } from '@tldraw/editor'; import { TLArrowShapeKind } from '@tldraw/editor'; import { TLArrowShapeProps } from '@tldraw/editor'; import { TLAsset } from '@tldraw/editor'; import { TLAssetId } from '@tldraw/editor'; import { TLBookmarkAsset } from '@tldraw/editor'; import { TLBookmarkShape } from '@tldraw/editor'; import { TLBookmarkShapeProps } from '@tldraw/editor'; import { TLClickEventInfo } from '@tldraw/editor'; import { TLContent } from '@tldraw/editor'; import { TLCropInfo } from '@tldraw/editor'; import { TLDefaultColorThemeColor } from '@tldraw/tlschema'; import { TLDefaultFillStyle } from '@tldraw/editor'; import { TLDefaultFontStyle } from '@tldraw/editor'; import { TLDefaultHorizontalAlignStyle } from '@tldraw/editor'; import { TLDefaultSizeStyle } from '@tldraw/editor'; import { TLDefaultVerticalAlignStyle } from '@tldraw/editor'; import { TLDragShapesOutInfo } from '@tldraw/editor'; import { TLDragShapesOverInfo } from '@tldraw/editor'; import { TldrawEditorBaseProps } from '@tldraw/editor'; import { TldrawEditorStoreProps } from '@tldraw/editor'; import { TldrawOptions } from '@tldraw/editor'; import { TLDrawShape } from '@tldraw/editor'; import { TLDrawShapeProps } from '@tldraw/editor'; import { TLDrawShapeSegment } from '@tldraw/editor'; import { TLEditorComponents } from '@tldraw/editor'; import { TLEditorSnapshot } from '@tldraw/editor'; import { TLEditStartInfo } from '@tldraw/editor'; import { TLEmbedShape } from '@tldraw/editor'; import { TLEmbedShapeProps } from '@tldraw/editor'; import { TLEventInfo } from '@tldraw/editor'; import { TLExportType } from '@tldraw/editor'; import { TLFileExternalAsset } from '@tldraw/editor'; import { TLFontFace } from '@tldraw/editor'; import { TLFrameShape } from '@tldraw/editor'; import { TLFrameShapeProps } from '@tldraw/editor'; import { TLGeometryOpts } from '@tldraw/editor'; import { TLGeoShape } from '@tldraw/editor'; import { TLGeoShapeProps } from '@tldraw/editor'; import { TLHandle } from '@tldraw/editor'; import { TLHandleDragInfo } from '@tldraw/editor'; import { TLHandlesProps } from '@tldraw/editor'; import { TLHighlightShape } from '@tldraw/editor'; import { TLHighlightShapeProps } from '@tldraw/editor'; import { TLImageAsset } from '@tldraw/editor'; import { TLImageExportOptions } from '@tldraw/editor'; import { TLImageShape } from '@tldraw/editor'; import { TLImageShapeProps } from '@tldraw/editor'; import { TLKeyboardEventInfo } from '@tldraw/editor'; import { TLLineShape } from '@tldraw/editor'; import { TLLineShapePoint } from '@tldraw/editor'; import { TLNoteShape } from '@tldraw/editor'; import { TLNoteShapeProps } from '@tldraw/editor'; import { TLPageId } from '@tldraw/editor'; import { TLParentId } from '@tldraw/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 { TLScribbleProps } from '@tldraw/editor'; import { TLSelectionForegroundProps } from '@tldraw/editor'; import { TLShape } from '@tldraw/editor'; import { TLShapeCrop } from '@tldraw/editor'; import { TLShapeId } from '@tldraw/editor'; import { 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 { TLUrlExternalAsset } from '@tldraw/editor'; import { TLVideoAsset } from '@tldraw/editor'; import { TLVideoShape } from '@tldraw/editor'; import { UnknownRecord } from '@tldraw/editor'; import { Vec } from '@tldraw/editor'; import { VecLike } from '@tldraw/editor'; import { VecModel } from '@tldraw/editor'; 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[]; /** @public @react */ export declare function ArrangeMenuSubmenu(): JSX.Element | null; /** @public */ export declare const ARROW_LABEL_FONT_SIZES: Record; /** * @public */ export declare class ArrowBindingUtil extends BindingUtil { static type: string; static props: RecordProps; static migrations: TLPropsMigrations; getDefaultProps(): Partial; onAfterCreate({ binding }: BindingOnCreateOptions): void; onAfterChange({ bindingAfter }: BindingOnChangeOptions): void; onAfterChangeFromShape({ shapeBefore, shapeAfter, reason }: BindingOnShapeChangeOptions): void; onAfterChangeToShape({ binding, shapeBefore, shapeAfter, reason }: BindingOnShapeChangeOptions): void; onBeforeIsolateFromShape({ binding }: BindingOnShapeIsolateOptions): void; } /** @public @react */ export declare function ArrowDownToolbarItem(): JSX.Element; /** @public @react */ export declare function ArrowLeftToolbarItem(): JSX.Element; /** @public @react */ export declare function ArrowRightToolbarItem(): JSX.Element; /** * Options for the arrow shape. * * @example * ```tsx * const shapeUtils = [ * ArrowShapeUtil.configure({ arcArrowCenterSnapDistance: 0 }), * ] * * function MyApp() { * return * } * ``` * * @public */ export declare interface ArrowShapeOptions { /** * How far should elbow arrows expand from the shapes they're targeting? */ readonly expandElbowLegLength: Record; /** * The minimum length of an elbow arrow's leg. */ readonly minElbowLegLength: Record; /** * 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 { static type: "arrow"; static props: RecordProps; static migrations: MigrationSequence; options: ArrowShapeOptions; canEdit(): boolean; canBind({ toShape }: TLShapeUtilCanBindOpts): boolean; canSnap(): boolean; hideResizeHandles(): boolean; hideRotateHandle(): boolean; hideSelectionBoundsBg(): boolean; hideSelectionBoundsFg(): boolean; hideInMinimap(): boolean; canBeLaidOut(shape: TLArrowShape, info: TLShapeUtilCanBeLaidOutOpts): boolean; getFontFaces(shape: TLArrowShape): TLFontFace[]; getDefaultProps(): TLArrowShape['props']; getGeometry(shape: TLArrowShape): Group2d; getHandles(shape: TLArrowShape): TLHandle[]; getText(shape: TLArrowShape): string; onHandleDrag(shape: TLArrowShape, info: TLHandleDragInfo): ({ id: TLShapeId_2; meta?: Partial | undefined; props?: Partial | undefined; type: "arrow"; } & Partial>) | { 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 | undefined; props?: Partial | undefined; type: "arrow"; } & Partial>) | undefined; onTranslate(initialShape: TLArrowShape, shape: TLArrowShape): void; private readonly _resizeInitialBindings; onResize(shape: TLArrowShape, info: TLResizeInfo): { props: { bend: number; end: VecModel_2; start: VecModel_2; }; }; onDoubleClickHandle(shape: TLArrowShape, handle: TLHandle): TLShapePartial | void; component(shape: TLArrowShape): JSX.Element | null; indicator(shape: TLArrowShape): JSX.Element | null; useLegacyIndicator(): boolean; getIndicatorPath(shape: TLArrowShape): { additionalPaths: Path2D[]; clipPath: Path2D; path: Path2D; } | Path2D | undefined; onEditStart(shape: TLArrowShape): void; toSvg(shape: TLArrowShape, ctx: SvgExportContext): JSX.Element; getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[]; getInterpolatedProps(startShape: TLArrowShape, endShape: TLArrowShape, progress: number): TLArrowShapeProps; } /** * State representing what we're pointing to when drawing or updating an arrow. You can get this * state using {@link getArrowTargetState}, and update it as part of an arrow interaction with * {@link updateArrowTargetState} or {@link clearArrowTargetState}. * * @public */ export declare interface ArrowTargetState { target: TLShape; arrowKind: TLArrowShapeKind; handlesInPageSpace: { bottom: { isEnabled: boolean; point: VecLike; }; left: { isEnabled: boolean; point: VecLike; }; right: { isEnabled: boolean; point: VecLike; }; top: { isEnabled: boolean; point: VecLike; }; }; isExact: boolean; isPrecise: boolean; centerInPageSpace: VecLike; anchorInPageSpace: VecLike; snap: ElbowArrowSnap; normalizedAnchor: VecLike; } /** @public @react */ export declare function ArrowToolbarItem(): JSX.Element; /** @public @react */ export declare function ArrowUpToolbarItem(): JSX.Element; /** @public */ export declare type ASPECT_RATIO_OPTION = 'circle' | 'landscape' | 'original' | 'portrait' | 'square' | 'wide'; /** @public */ export declare const ASPECT_RATIO_OPTIONS: ASPECT_RATIO_OPTION[]; /** @public */ export declare const ASPECT_RATIO_TO_VALUE: Record; /** @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; } /** @public */ export declare class BookmarkShapeUtil extends BaseBoxShapeUtil { static type: "bookmark"; static props: RecordProps; static migrations: TLPropsMigrations; canResize(): boolean; hideSelectionBoundsFg(): boolean; getText(shape: TLBookmarkShape): string; getAriaDescriptor(shape: TLBookmarkShape): string | undefined; getDefaultProps(): TLBookmarkShape['props']; component(shape: TLBookmarkShape): JSX.Element; indicator(shape: TLBookmarkShape): JSX.Element; useLegacyIndicator(): boolean; getIndicatorPath(shape: TLBookmarkShape): Path2D; onBeforeCreate(next: TLBookmarkShape): { id: TLShapeId_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 interface BoxWidthHeight { w: number; h: number; } /** @public @react */ export declare function BreakPointProvider({ forceMobile, children }: BreakPointProviderProps): JSX.Element; /** @public */ export declare interface BreakPointProviderProps { forceMobile?: boolean; children: ReactNode; } /* Excluded from this release type: buildFromV1Document */ /** @public @react */ export declare function CenteredTopPanelContainer({ maxWidth, ignoreRightWidth, stylePanelWidth, marginBetweenZones, squeezeAmount, children }: CenteredTopPanelContainerProps): JSX.Element; /** @public */ export declare interface CenteredTopPanelContainerProps { children?: ReactNode; maxWidth?: number; ignoreRightWidth?: number; stylePanelWidth?: number; marginBetweenZones?: number; squeezeAmount?: number; } /** * Repositions selected shapes do that the center of the group is * at the provided position * * @param editor - The editor instance * * @param position - the point to center the shapes around * * @public */ export declare function centerSelectionAroundPoint(editor: Editor, position: VecLike): void; /** @public @react */ export declare function CheckBoxToolbarItem(): JSX.Element; /** * Clear the current arrow target state for an editor. See {@link ArrowTargetState} for more * information. * * @public */ export declare function clearArrowTargetState(editor: Editor): void; /** @public @react */ export declare function ClipboardMenuGroup(): JSX.Element; /** @public @react */ export declare function CloudToolbarItem(): JSX.Element; /** @public @react */ export declare function ColorSchemeMenu(): JSX.Element; /** * Contains the size within the given box size * * @param originalSize - The size of the asset * @param containBoxSize - The container size * @returns Adjusted size * @public */ export declare function containBoxSize(originalSize: BoxWidthHeight, containBoxSize: BoxWidthHeight): BoxWidthHeight; /** @public @react */ export declare function ConversionsMenuGroup(): JSX.Element | null; /** @public @react */ export declare function ConvertToBookmarkMenuItem(): JSX.Element | null; /** @public @react */ export declare function ConvertToEmbedMenuItem(): JSX.Element | null; /** * Copy the given shapes to the clipboard. * * @param editor - The editor instance. * @param ids - The ids of the shapes to copy. * @param format - The format to copy as. Defaults to png. * @param opts - Options for the copy. * * @public */ export declare function copyAs(editor: Editor, ids: TLShapeId[], opts: CopyAsOptions): Promise; /** @public @react */ export declare function CopyAsMenuGroup(): JSX.Element; /** @public */ export declare interface CopyAsOptions extends TLImageExportOptions { /** The format to copy as. */ format: TLCopyType; } /** @public @react */ export declare function CopyMenuItem(): JSX.Element; /** * Creates a bookmark shape from a URL with unfurled metadata. * * @returns A Result containing the created bookmark shape or an error * @public */ export declare function createBookmarkFromUrl(editor: Editor, { url, center }: { center?: { x: number; y: number; }; url: string; }): Promise>; /** @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; /** @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>; customFeatureFlags?: Record>; } /** @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> | undefined; } /** @public */ export declare const DEFAULT_EMBED_DEFINITIONS: readonly [{ readonly doesResize: true; readonly embedOnPaste: false; readonly fromEmbedUrl: (url: string) => string | undefined; readonly height: 500; readonly hostnames: readonly ["beta.tldraw.com", "tldraw.com", "localhost:3000"]; readonly minHeight: 300; readonly minWidth: 300; readonly overridePermissions: { readonly 'allow-top-navigation': true; }; readonly title: "tldraw"; readonly toEmbedUrl: (url: string) => string | undefined; readonly type: "tldraw"; readonly width: 720; }, { readonly doesResize: true; readonly embedOnPaste: true; readonly fromEmbedUrl: (url: string) => string | undefined; readonly height: 500; readonly hostnames: readonly ["figma.com"]; readonly title: "Figma"; readonly toEmbedUrl: (url: string) => string | undefined; readonly type: "figma"; readonly width: 720; }, { readonly doesResize: true; readonly embedOnPaste: true; readonly fromEmbedUrl: (url: string) => string | undefined; readonly height: 500; readonly hostnames: readonly ["google.*"]; readonly overridePermissions: { readonly 'allow-presentation': true; }; readonly title: "Google Maps"; readonly toEmbedUrl: (url: string) => string | undefined; readonly type: "google_maps"; readonly width: 720; }, { readonly doesResize: true; readonly embedOnPaste: true; readonly fromEmbedUrl: (url: string) => string | undefined; readonly height: 500; readonly hostnames: readonly ["val.town"]; readonly minHeight: 100; readonly minWidth: 260; readonly title: "Val Town"; readonly toEmbedUrl: (url: string) => string | undefined; readonly type: "val_town"; readonly width: 720; }, { readonly doesResize: true; readonly embedOnPaste: true; readonly fromEmbedUrl: (url: string) => string | undefined; readonly height: 500; readonly hostnames: readonly ["codesandbox.io"]; readonly minHeight: 300; readonly minWidth: 300; readonly title: "CodeSandbox"; readonly toEmbedUrl: (url: string) => string | undefined; readonly type: "codesandbox"; readonly width: 720; }, { readonly doesResize: true; readonly embedOnPaste: true; readonly fromEmbedUrl: (url: string) => string | undefined; readonly height: 400; readonly hostnames: readonly ["codepen.io"]; readonly minHeight: 300; readonly minWidth: 300; readonly title: "Codepen"; readonly toEmbedUrl: (url: string) => string | undefined; readonly type: "codepen"; readonly width: 520; }, { readonly doesResize: false; readonly embedOnPaste: true; readonly fromEmbedUrl: (url: string) => string | undefined; readonly height: 400; readonly hostnames: readonly ["scratch.mit.edu"]; readonly title: "Scratch"; readonly toEmbedUrl: (url: string) => string | undefined; readonly type: "scratch"; readonly width: 520; }, { readonly doesResize: true; readonly embedOnPaste: true; readonly fromEmbedUrl: (url: string) => string | undefined; readonly height: 450; readonly hostnames: readonly ["*.youtube.com", "youtube.com", "youtu.be"]; readonly isAspectRatioLocked: true; readonly overridePermissions: { readonly 'allow-popups-to-escape-sandbox': true; readonly 'allow-presentation': true; }; readonly title: "YouTube"; readonly toEmbedUrl: (url: string) => string | undefined; readonly type: "youtube"; readonly width: 800; }, { readonly doesResize: true; readonly embedOnPaste: true; readonly fromEmbedUrl: (url: string) => string | undefined; readonly height: 500; readonly hostnames: readonly ["calendar.google.*"]; readonly instructionLink: "https://support.google.com/calendar/answer/41207?hl=en"; readonly minHeight: 360; readonly minWidth: 460; readonly overridePermissions: { readonly 'allow-popups-to-escape-sandbox': true; }; readonly title: "Google Calendar"; readonly toEmbedUrl: (url: string) => string | undefined; readonly type: "google_calendar"; readonly width: 720; }, { readonly doesResize: true; readonly embedOnPaste: true; readonly fromEmbedUrl: (url: string) => string | undefined; readonly height: 500; readonly hostnames: readonly ["docs.google.*"]; readonly minHeight: 360; readonly minWidth: 460; readonly overridePermissions: { readonly 'allow-popups-to-escape-sandbox': true; }; readonly title: "Google Slides"; readonly toEmbedUrl: (url: string) => string | undefined; readonly type: "google_slides"; readonly width: 720; }, { readonly doesResize: true; readonly embedOnPaste: true; readonly fromEmbedUrl: (url: string) => string | undefined; readonly height: 500; readonly hostnames: readonly ["gist.github.com"]; readonly title: "GitHub Gist"; readonly toEmbedUrl: (url: string) => string | undefined; readonly type: "github_gist"; readonly width: 720; }, { readonly doesResize: true; readonly embedOnPaste: true; readonly fromEmbedUrl: (url: string) => string | undefined; readonly height: 500; readonly hostnames: readonly ["replit.com"]; readonly title: "Replit"; readonly toEmbedUrl: (url: string) => string | undefined; readonly type: "replit"; readonly width: 720; }, { readonly doesResize: true; readonly embedOnPaste: true; readonly fromEmbedUrl: (url: string) => string | undefined; readonly height: 500; readonly hostnames: readonly ["felt.com"]; readonly title: "Felt"; readonly toEmbedUrl: (url: string) => string | undefined; readonly type: "felt"; readonly width: 720; }, { readonly doesResize: true; readonly embedOnPaste: true; readonly fromEmbedUrl: (url: string) => string | undefined; readonly height: 500; readonly hostnames: readonly ["open.spotify.com"]; readonly minHeight: 500; readonly overrideOutlineRadius: 12; readonly title: "Spotify"; readonly toEmbedUrl: (url: string) => string | undefined; readonly type: "spotify"; readonly width: 720; }, { readonly doesResize: true; readonly embedOnPaste: true; readonly fromEmbedUrl: (url: string) => string | undefined; readonly height: 360; readonly hostnames: readonly ["vimeo.com", "player.vimeo.com"]; readonly isAspectRatioLocked: true; readonly title: "Vimeo"; readonly toEmbedUrl: (url: string) => string | undefined; readonly type: "vimeo"; readonly width: 640; }, { readonly backgroundColor: "#fff"; readonly doesResize: true; readonly embedOnPaste: true; readonly fromEmbedUrl: (url: string) => string | undefined; readonly height: 500; readonly hostnames: readonly ["observablehq.com"]; readonly isAspectRatioLocked: false; readonly title: "Observable"; readonly toEmbedUrl: (url: string) => string | undefined; readonly type: "observable"; readonly width: 720; }, { readonly doesResize: true; readonly embedOnPaste: true; readonly fromEmbedUrl: (url: string) => string | undefined; readonly height: 450; readonly hostnames: readonly ["desmos.com"]; readonly title: "Desmos"; readonly toEmbedUrl: (url: string) => string | undefined; readonly type: "desmos"; readonly width: 700; }]; /** * 10mb * @public */ export declare const DEFAULT_MAX_ASSET_SIZE: number; /** * 5000px * @public */ export declare const DEFAULT_MAX_IMAGE_DIMENSION = 5000; /** @public @react */ export declare const DefaultA11yAnnouncer: NamedExoticComponent; /** @public @react */ export declare const DefaultActionsMenu: NamedExoticComponent; /** @public @react */ export declare function DefaultActionsMenuContent(): JSX.Element; /** @public */ export declare function defaultAddFontsFromNode(node: Node_2, state: RichTextFontVisitorState, addFont: (font: TLFontFace) => void): RichTextFontVisitorState; /** @public */ export declare const defaultBindingUtils: readonly [typeof ArrowBindingUtil]; /** @public @react */ declare const DefaultContextMenu: NamedExoticComponent; 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; /** @public */ export declare let defaultEditorAssetUrls: TLEditorAssetUrls; /** @public */ export declare type DefaultEmbedDefinitionType = (typeof DEFAULT_EMBED_DEFINITIONS)[number]['type']; /** @public @react */ export declare function DefaultFollowingIndicator(): JSX.Element | null; /** @public */ export declare const DefaultFontFaces: TLDefaultFonts; /** @public */ export declare function defaultHandleExternalEmbedContent(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; /** @public */ export declare function defaultHandleExternalFileAsset(editor: Editor, { file, assetId }: TLFileExternalAsset, options: TLDefaultExternalContentHandlerOpts): Promise; /** @public */ export declare function defaultHandleExternalFileContent(editor: Editor, { point, files }: { files: File[]; point?: VecLike; }, options: TLDefaultExternalContentHandlerOpts): Promise; /** @public */ export declare function defaultHandleExternalSvgTextContent(editor: Editor, { point, text }: { point?: VecLike; text: string; }): Promise; /** @public */ export declare function defaultHandleExternalTextContent(editor: Editor, { point, text, html }: { html?: string; point?: VecLike; text: string; }): Promise; /** @public */ export declare function defaultHandleExternalTldrawContent(editor: Editor, { point, content }: { content: TLContent; point?: VecLike; }): Promise; /** @public */ export declare function defaultHandleExternalUrlAsset(editor: Editor, { url }: TLUrlExternalAsset, { toasts, msg }: TLDefaultExternalContentHandlerOpts): Promise; /** @public */ export declare function defaultHandleExternalUrlContent(editor: Editor, { point, url }: { point?: VecLike; url: string; }, { toasts, msg }: TLDefaultExternalContentHandlerOpts): Promise; /** @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; /** @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; /** @public */ export declare interface DefaultImageToolbarContentProps { imageShapeId: TLImageShape['id']; isManipulating: boolean; onEditAltTextStart(): void; onManipulatingStart(): void; onManipulatingEnd(): void; } /** @public @react */ export declare const DefaultKeyboardShortcutsDialog: NamedExoticComponent; /** @public @react */ export declare function DefaultKeyboardShortcutsDialogContent(): JSX.Element; /** @public @react */ export declare const DefaultMainMenu: NamedExoticComponent; /** @public @react */ export declare function DefaultMainMenuContent(): JSX.Element; /** @public @react */ export declare const DefaultMenuPanel: NamedExoticComponent; /** @public @react */ export declare function DefaultMinimap(): JSX.Element; /** @public @react */ export declare const DefaultNavigationPanel: NamedExoticComponent; /** @public @react */ export declare const DefaultPageMenu: NamedExoticComponent; /** @public @react */ export declare const DefaultQuickActions: NamedExoticComponent; /** @public @react */ export declare function DefaultQuickActionsContent(): JSX.Element | undefined; /** * The default rich text toolbar. * * @public @react */ export declare const DefaultRichTextToolbar: React_3.NamedExoticComponent; /** * Rich text toolbar items that have the basics. * * @public @react */ export declare function DefaultRichTextToolbarContent({ textEditor, onEditLinkStart }: DefaultRichTextToolbarContentProps): JSX.Element[]; /** @public */ export declare interface DefaultRichTextToolbarContentProps { onEditLinkStart?(): void; textEditor: TiptapEditor; } /** @public */ export declare const defaultShapeTools: readonly [typeof TextShapeTool, typeof DrawShapeTool, typeof GeoShapeTool, typeof NoteShapeTool, typeof LineShapeTool, typeof FrameShapeTool, typeof ArrowShapeTool, typeof HighlightShapeTool]; /** @public */ export declare const defaultShapeUtils: readonly [typeof TextShapeUtil, typeof BookmarkShapeUtil, typeof DrawShapeUtil, typeof GeoShapeUtil, typeof NoteShapeUtil, typeof LineShapeUtil, typeof FrameShapeUtil, typeof ArrowShapeUtil, typeof HighlightShapeUtil, typeof EmbedShapeUtil, typeof ImageShapeUtil, typeof VideoShapeUtil]; /** @public @react */ export declare function DefaultSharePanel(): JSX.Element; /** @public @react */ export declare const DefaultStylePanel: NamedExoticComponent; /** @public @react */ export declare function DefaultStylePanelContent(): JSX.Element; /** @public @react */ export declare const DefaultToasts: NamedExoticComponent; /** * 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; /** @public @react */ export declare function DefaultToolbarContent(): JSX.Element; /** @public */ export declare interface DefaultToolbarProps { children?: ReactNode; orientation?: 'horizontal' | 'vertical'; minItems?: number; minSizePx?: number; maxItems?: number; maxSizePx?: number; } /** @public */ export declare const defaultTools: readonly [typeof EraserTool, typeof HandTool, typeof LaserTool, typeof ZoomTool, typeof SelectTool]; /** @public @react */ export declare const DefaultVideoToolbar: NamedExoticComponent; /** @public @react */ export declare const DefaultVideoToolbarContent: NamedExoticComponent; /** @public */ export declare interface DefaultVideoToolbarContentProps { videoShapeId: TLVideoShape['id']; onEditAltTextStart(): void; } /** @public @react */ export declare const DefaultZoomMenu: NamedExoticComponent; /** @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; /** @public */ export declare interface DrawPathBuilderDOpts { strokeWidth: number; randomSeed: string; offset?: number; roundness?: number; passes?: number; onlyFilled?: boolean; } /** @public */ export declare interface DrawPathBuilderOpts extends BasePathBuilderOpts, DrawPathBuilderDOpts { style: 'draw'; } /** @public */ export declare interface DrawShapeOptions { /** * The maximum number of points in a line before the draw tool will begin a new shape. * A higher number will lead to poor performance while drawing very long lines. */ readonly maxPointsPerShape: number; } /** @public */ export declare class DrawShapeTool extends StateNode { static id: string; static initial: string; static isLockable: boolean; static useCoalescedEvents: boolean; static children(): TLStateNodeConstructor[]; shapeType: string; onExit(): void; } /** @public */ export declare class DrawShapeUtil extends ShapeUtil { static type: "draw"; static props: RecordProps; static migrations: TLPropsMigrations; options: DrawShapeOptions; hideResizeHandles(shape: TLDrawShape): boolean; hideRotateHandle(shape: TLDrawShape): boolean; hideSelectionBoundsFg(shape: TLDrawShape): boolean; getDefaultProps(): TLDrawShape['props']; getGeometry(shape: TLDrawShape): Circle2d | Polyline2d; component(shape: TLDrawShape): JSX.Element; indicator(shape: TLDrawShape): JSX.Element; useLegacyIndicator(): boolean; getIndicatorPath(shape: TLDrawShape): Path2D; toSvg(shape: TLDrawShape, ctx: SvgExportContext): JSX.Element; getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[]; onResize(shape: TLDrawShape, info: TLResizeInfo): { props: { scaleX: number; scaleY: number; }; } | undefined; expandSelectionOutlinePx(shape: TLDrawShape): number; getInterpolatedProps(startShape: TLDrawShape, endShape: TLDrawShape, t: number): TLDrawShapeProps; } /** @public @react */ export declare function DrawToolbarItem(): JSX.Element; /** @public @react */ export declare function DuplicateMenuItem(): JSX.Element | null; /** @public @react */ export declare function EditLinkMenuItem(): JSX.Element | null; /** @public @react */ export declare function EditMenuSubmenu(): JSX.Element | null; /** @public @react */ export declare function EditSubmenu(): JSX.Element; /** * @public */ export declare interface ElbowArrowBox { /** The original bounding box */ original: Box; /** * The bounding box, expanded by {@link ArrowShapeOptions.expandElbowLegLength}. */ expanded: Box; } /** * The usable range of the edges of a box. Each edge might be null if the edge is not usable for * entry/exit. * @public */ export declare interface ElbowArrowBoxEdges { top: ElbowArrowEdge | null; right: ElbowArrowEdge | null; bottom: ElbowArrowEdge | null; left: ElbowArrowEdge | null; } /** @public */ export declare interface ElbowArrowBoxes { /** The starting bounding box */ A: Box; /** The ending bounding box */ B: Box; /** The common bounding box of A and B */ common: Box; } /** * An edge on a box. * @public */ export declare interface ElbowArrowEdge { /** * The co-ordinate of the edge. An x-coordinate if left/right, a y-coordinate if top/bottom. */ value: number; /** * The co-ordinate of the edge, expanded by {@link ArrowShapeOptions.expandElbowLegLength}. May * be null if the target is a point. */ expanded: null | number; /** * The usable range of the edge along its cross-axis. Y-coordinates if left/right, x-coordinated * if top/bottom. */ cross: ElbowArrowRange; /** * The point of the target along the edge, constrained to within {@link ElbowArrowEdge.cross}. */ crossTarget: number; /** * Whether the cross-axis range is shrunk from the original range to make space for the other shape. */ isPartial: boolean; } /** @public */ export declare interface ElbowArrowInfo extends ElbowArrowInfoWithoutRoute { /** * The route of the arrow. */ route: ElbowArrowRoute | null; midXRange: { hi: number; lo: number; } | null; midYRange: { hi: number; lo: number; } | null; } /** @public */ export declare interface ElbowArrowInfoWithoutRoute { /** * The options used for this elbow arrow */ options: ElbowArrowOptions; /** * If false, A is the start shape and B is the end shape. If true, A is the end shape and B is * the start shape. */ swapOrder: boolean; /** * One of the two shapes we're drawing an arrow between. Could be either the start or end * depending on `swapOrder`. */ A: ElbowArrowTargetBox; /** * The other shape we're drawing an arrow between. Could be either the start or end * depending on `swapOrder`. */ B: ElbowArrowTargetBox; /** * The common bounding box of A and B. */ common: ElbowArrowBox; /** * The gap between the right edge of A and the left edge of B. */ gapX: number; /** * The gap between the bottom edge of A and the top edge of B. */ gapY: number; /** * The X coordinate of the middle line between the two boxes. If the boxes are too close or * overlap, this may be null. */ midX: null | number; /** * The Y coordinate of the middle line between the two boxes. If the boxes are too close or * overlap, this may be null. */ midY: null | number; } /** * Part of an {@link ElbowArrowRoute} that describes a handle for dragging the midpoint line, a line * roughly halfway between the two shapes. * @public */ export declare interface ElbowArrowMidpointHandle { axis: 'x' | 'y'; /** The start point of the segment in the route that the handle is on. */ segmentStart: VecLike; /** The end point of the segment in the route that the handle is on. */ segmentEnd: VecLike; /** The position of the handle, in arrow-space. */ point: VecLike; } /** * Extracted from {@link ArrowShapeOptions}. Options for one specific arrow. * @public */ export declare interface ElbowArrowOptions { expandElbowLegLength: number; minElbowLegLength: number; elbowMidpoint: number; } /** @public */ export declare interface ElbowArrowRange { min: number; max: number; } /** * A route for an elbow arrow. * * @public */ export declare interface ElbowArrowRoute { /* Excluded from this release type: name */ /** The vertices of the route. Draw a line through them to see the route. */ points: Vec[]; /** The total distance of the route, in arrow-space pixels. */ distance: number; /* Excluded from this release type: aEdgePicking */ /* Excluded from this release type: bEdgePicking */ /** * Some points on the line are there for more informative than display reasons - e.g. where the * midpoint handle is. If we draw these in our "draw" style, the line will look weird. We still * need them for some of the calculations we do, but we want to skip them specifically when * rendering the arrow. */ skipPointsWhenDrawing: Set; /** * 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 { /** 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 { static type: "embed"; static props: RecordProps; 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(): boolean; canResize(shape: TLEmbedShape): boolean; canEditInReadonly(): boolean; getDefaultProps(): TLEmbedShape['props']; getGeometry(shape: TLEmbedShape): Geometry2d; isAspectRatioLocked(shape: TLEmbedShape): boolean; onResize(shape: TLEmbedShape, info: TLResizeInfo): TLEmbedShape; component(shape: TLEmbedShape): JSX.Element | null; indicator(shape: TLEmbedShape): JSX.Element; useLegacyIndicator(): boolean; getIndicatorPath(shape: TLEmbedShape): Path2D; getInterpolatedProps(startShape: TLEmbedShape, endShape: TLEmbedShape, t: number): TLEmbedShapeProps; } /** @public */ export declare class EraserTool extends StateNode { static id: string; static initial: string; static isLockable: boolean; static children(): TLStateNodeConstructor[]; onEnter(): void; } /** @public @react */ export declare function EraserToolbarItem(): JSX.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; /** @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> | undefined; } /** * Fit a frame to its content. * * @param id - Id of the frame you wish to fit to content. * @param editor - tlraw editor instance. * @param opts - Options for fitting the frame. * * @public */ export declare function fitFrameToContent(editor: Editor, id: TLShapeId, opts?: { padding: number; }): void; /** @public @react */ export declare function FitFrameToContentMenuItem(): JSX.Element | null; /** @public */ export declare const FONT_FAMILIES: Record; /** @public */ export declare const FONT_SIZES: Record; /** @public */ export declare interface FrameShapeOptions { /** * 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 BaseBoxShapeUtil { static type: "frame"; static props: RecordProps; static migrations: TLPropsMigrations; options: FrameShapeOptions; static configure>(this: T, options: T extends new (...args: any[]) => { options: infer Options; } ? Partial : never): T; canEdit(shape: TLFrameShape, info: TLEditStartInfo): boolean; canResize(): boolean; canResizeChildren(): 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; indicator(shape: TLFrameShape): JSX.Element; useLegacyIndicator(): boolean; getIndicatorPath(shape: TLFrameShape): Path2D; providesBackgroundForChildren(): boolean; getClipPath(shape: TLFrameShape): Vec[]; canReceiveNewChildrenOfType(shape: TLShape): boolean; onResize(shape: any, info: TLResizeInfo): any; 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"; }; onDragShapesIn(shape: TLFrameShape, draggingShapes: TLShape[], { initialParentIds, initialIndices }: TLDragShapesOverInfo): void; onDragShapesOut(shape: TLFrameShape, draggingShapes: TLShape[], info: TLDragShapesOutInfo): void; } /** @public @react */ export declare function FrameToolbarItem(): JSX.Element; /** @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 { static type: "geo"; static props: RecordProps; static migrations: TLPropsMigrations; options: { showTextOutline: boolean; }; canEdit(): 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; indicator(shape: TLGeoShape): JSX.Element; useLegacyIndicator(): boolean; getIndicatorPath(shape: TLGeoShape): Path2D | undefined; toSvg(shape: TLGeoShape, ctx: SvgExportContext): JSX.Element; getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[]; onResize(shape: TLGeoShape, { handle, newPoint, scaleX, scaleY, initialShape }: TLResizeInfo): { props: { growY: number; h: number; w: number; }; x: number; y: number; }; onBeforeCreate(shape: TLGeoShape): { id: TLShapeId_2; index: IndexKey; isLocked: boolean; meta: JsonObject; opacity: number; parentId: TLParentId; props: { align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start"; color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow"; dash: "dashed" | "dotted" | "draw" | "solid"; fill: "fill" | "lined-fill" | "none" | "pattern" | "semi" | "solid"; font: "draw" | "mono" | "sans" | "serif"; geo: "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "check-box" | "cloud" | "diamond" | "ellipse" | "heart" | "hexagon" | "octagon" | "oval" | "pentagon" | "rectangle" | "rhombus-2" | "rhombus" | "star" | "trapezoid" | "triangle" | "x-box"; growY: number; h: number; labelColor: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow"; richText: { attrs?: any; content: unknown[]; type: string; }; scale: number; size: "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_2; index: IndexKey; isLocked: boolean; meta: JsonObject; opacity: number; parentId: TLParentId; props: { align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start"; color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow"; dash: "dashed" | "dotted" | "draw" | "solid"; fill: "fill" | "lined-fill" | "none" | "pattern" | "semi" | "solid"; font: "draw" | "mono" | "sans" | "serif"; geo: "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "check-box" | "cloud" | "diamond" | "ellipse" | "heart" | "hexagon" | "octagon" | "oval" | "pentagon" | "rectangle" | "rhombus-2" | "rhombus" | "star" | "trapezoid" | "triangle" | "x-box"; growY: number; h: number; labelColor: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow"; richText: { attrs?: any; content: unknown[]; type: string; }; scale: number; size: "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_2; 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_2; 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; } /** @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(file: File, options: TLDefaultExternalContentHandlerOpts, assetId?: TLAssetId): Promise; /** @public */ export declare function getCropBox(shape: T, info: TLCropInfo, opts?: CropBoxOptions): { id: TLShapeId; props: ShapeWithCrop['props']; type: T['type']; x: number; y: number; } | undefined; /** @public */ export declare function getDefaultCrop(): TLShapeCrop; /** * 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 getHitShapeOnCanvasPointerDown(editor: Editor, hitLabels?: boolean): TLShape | undefined; /** @public */ export declare function getMediaAssetInfoPartial(file: File, assetId: TLAssetId, isImageType: boolean, isVideoType: boolean, maxImageDimension?: number): Promise; /** @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; /** @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 { /** * 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; readonly underlayOpacity: number; readonly overlayOpacity: 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 { static type: "highlight"; static props: RecordProps; 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; indicator(shape: TLHighlightShape): JSX.Element; useLegacyIndicator(): boolean; getIndicatorPath(shape: TLHighlightShape): Path2D; toSvg(shape: TLHighlightShape): JSX.Element; toBackgroundSvg(shape: TLHighlightShape): JSX.Element; onResize(shape: TLHighlightShape, info: TLResizeInfo): { props: { scaleX: number; scaleY: number; }; } | undefined; getInterpolatedProps(startShape: TLHighlightShape, endShape: TLHighlightShape, t: number): TLHighlightShapeProps; } /** @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 ImageShapeUtil extends BaseBoxShapeUtil { static type: "image"; static props: RecordProps; static migrations: TLPropsMigrations; isAspectRatioLocked(): boolean; canCrop(): boolean; isExportBoundsContainer(): boolean; getDefaultProps(): TLImageShape['props']; getGeometry(shape: TLImageShape): Geometry2d; getAriaDescriptor(shape: TLImageShape): string; onResize(shape: TLImageShape, info: TLResizeInfo): TLImageShape; component(shape: TLImageShape): JSX.Element; indicator(shape: TLImageShape): JSX.Element | null; useLegacyIndicator(): boolean; getIndicatorPath(shape: TLImageShape): Path2D | undefined; toSvg(shape: TLImageShape, ctx: SvgExportContext): Promise; onDoubleClickEdge(shape: TLImageShape): void; getInterpolatedProps(startShape: TLImageShape, endShape: TLImageShape, t: number): TLImageShapeProps; } /** @public */ export declare const KeyboardShiftEnterTweakExtension: Extension; /** @public @react */ export declare function KeyboardShortcutsMenuItem(): JSX.Element | null; /** @public */ export declare const LABEL_FONT_SIZES: Record; /** @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 class LineShapeTool extends StateNode { static id: string; static initial: string; static children(): TLStateNodeConstructor[]; shapeType: string; } /** @public */ export declare class LineShapeUtil extends ShapeUtil { static type: "line"; static props: RecordProps; static migrations: TLPropsMigrations; hideResizeHandles(): boolean; hideRotateHandle(): boolean; hideSelectionBoundsFg(): boolean; hideSelectionBoundsBg(): boolean; hideInMinimap(): boolean; getDefaultProps(): TLLineShape['props']; getGeometry(shape: TLLineShape): PathBuilderGeometry2d; getHandles(shape: TLLineShape): TLHandle[]; onResize(shape: TLLineShape, info: TLResizeInfo): { props: { points: { [x: string]: { id: string; index: IndexKey; x: number; y: number; }; }; }; }; onBeforeCreate(next: TLLineShape): TLLineShape | void; onHandleDrag(shape: TLLineShape, { handle }: TLHandleDragInfo): { id: TLShapeId_2; index: IndexKey; isLocked: boolean; meta: JsonObject; opacity: number; parentId: TLParentId; props: { color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow"; dash: "dashed" | "dotted" | "draw" | "solid"; points: { [x: string]: { id: string; 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): { id: TLShapeId_2; index: IndexKey; isLocked: boolean; meta: JsonObject; opacity: number; parentId: TLParentId; props: { color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow"; dash: "dashed" | "dotted" | "draw" | "solid"; points: { [x: string]: { id: IndexKey; 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; indicator(shape: TLLineShape): JSX.Element; useLegacyIndicator(): boolean; getIndicatorPath(shape: TLLineShape): Path2D; toSvg(shape: TLLineShape): JSX.Element; getHandleSnapGeometry(shape: TLLineShape): HandleSnapGeometry; getInterpolatedProps(startShape: TLLineShape, endShape: TLLineShape, t: number): TLLineShape['props']; } /** @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 NoteShapeOptions { /** * 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 { static type: "note"; static props: RecordProps; static migrations: TLPropsMigrations; options: NoteShapeOptions; canEdit(): boolean; hideResizeHandles(): boolean; isAspectRatioLocked(): boolean; hideSelectionBoundsFg(): boolean; getDefaultProps(): TLNoteShape['props']; getGeometry(shape: TLNoteShape): Group2d; getHandles(shape: TLNoteShape): TLHandle[]; onResize(shape: any, info: TLResizeInfo): { props: { scale: number; }; x: number; y: number; } | undefined; getText(shape: TLNoteShape): string; getFontFaces(shape: TLNoteShape): TLFontFace[]; component(shape: TLNoteShape): JSX.Element; indicator(shape: TLNoteShape): JSX.Element; useLegacyIndicator(): boolean; 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: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow"; font: "draw" | "mono" | "sans" | "serif"; fontSizeAdjustment: number; growY: number; labelColor: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow"; richText: { attrs?: any; content: unknown[]; type: string; }; scale: number; size: "l" | "m" | "s" | "xl"; url: string; verticalAlign: "end" | "middle" | "start"; }; rotation: number; type: "note"; typeName: "shape"; x: number; y: number; } | undefined; onBeforeUpdate(prev: TLNoteShape, 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: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow"; font: "draw" | "mono" | "sans" | "serif"; fontSizeAdjustment: number; growY: number; labelColor: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow"; richText: { attrs?: any; content: unknown[]; type: string; }; scale: number; size: "l" | "m" | "s" | "xl"; url: string; verticalAlign: "end" | "middle" | "start"; }; rotation: number; type: "note"; typeName: "shape"; x: number; y: number; } | undefined; getInterpolatedProps(startShape: TLNoteShape, endShape: TLNoteShape, t: number): TLNoteShapeProps; } /** @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 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(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; /** @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; /** @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; 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; dashStart?: PerfectDashTerminal; dashEnd?: PerfectDashTerminal; } /** @public */ export declare type PathBuilderOpts = DashedPathBuilderOpts | DrawPathBuilderOpts | SolidPathBuilderOpts; /** @public */ export declare interface PathBuilderToDOpts { startIdx?: number; endIdx?: number; onlyFilled?: boolean; } /** @public @react */ export declare function PeopleMenu({ children }: PeopleMenuProps): JSX.Element | null; /** @public */ export declare interface PeopleMenuProps { children?: ReactNode; } /** * A plain text area that can be used for basic editing text. * * @public @react */ export declare const PlainTextArea: React_3.ForwardRefExoticComponent>; /** * 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; /** @public */ export declare interface PlainTextLabelProps { shapeId: TLShapeId; type: ExtractShapeByProps<{ text: string; }>['type']; font: TLDefaultFontStyle; fontSize: number; lineHeight: number; fill?: TLDefaultFillStyle; align: TLDefaultHorizontalAlignStyle; verticalAlign: TLDefaultVerticalAlignStyle; 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): Promise; /** @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; /** @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. * * @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>; /** * 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; /** @public */ export declare interface RichTextLabelProps { shapeId: TLShapeId; type: ExtractShapeByProps<{ richText: TLRichText; }>['type']; font: TLDefaultFontStyle; fontSize: number; lineHeight: number; fill?: TLDefaultFillStyle; align: TLDefaultHorizontalAlignStyle; verticalAlign: TLDefaultVerticalAlignStyle; 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, font, align, verticalAlign, wrap, labelColor, padding, showTextOutline }: RichTextSVGProps): JSX.Element; /** @public */ export declare interface RichTextSVGProps { bounds: Box; richText: TLRichText; fontSize: number; font: TLDefaultFontStyle; align: TLDefaultHorizontalAlignStyle; verticalAlign: TLDefaultVerticalAlignStyle; wrap?: boolean; labelColor: string; padding: number; showTextOutline?: boolean; } /** @public @react */ export declare function RotateCWMenuItem(): JSX.Element; /** * 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 ``/`` 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; /** @public @react */ export declare function SelectAllMenuItem(): JSX.Element; /** @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; /** @public */ export declare function serializeTldrawJsonBlob(editor: Editor): Promise; /* Excluded from this release type: setDefaultEditorAssetUrls */ /* Excluded from this release type: setDefaultUiAssetUrls */ /** @public */ export declare function setStrokePointRadii(strokePoints: StrokePoint[], options: StrokeOptions): StrokePoint[]; /** @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; /** @public */ export declare const STROKE_SIZES: Record; /** * 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: (props: StylePanelButtonPickerProps) => JSX_2.Element; /** @public @react*/ export declare const StylePanelButtonPickerInline: (props: StylePanelButtonPickerProps) => JSX_2.Element; /** @public */ export declare interface StylePanelButtonPickerProps { title: string; uiType: string; style: StyleProp; value: SharedStyle; items: StyleValuesForUi; onValueChange?(style: StyleProp, 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(style: StyleProp, value: T): 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: (props: StylePanelDoubleDropdownPickerProps) => React_2.JSX.Element; /** @public @react */ export declare const StylePanelDoubleDropdownPickerInline: (props: StylePanelDoubleDropdownPickerProps) => React_2.JSX.Element; /** @public */ export declare interface StylePanelDoubleDropdownPickerProps { uiTypeA: string; uiTypeB: string; label: Exclude | TLUiTranslationKey; labelA: Exclude | TLUiTranslationKey; labelB: Exclude | TLUiTranslationKey; itemsA: StyleValuesForUi; itemsB: StyleValuesForUi; styleA: StyleProp; styleB: StyleProp; valueA: SharedStyle; valueB: SharedStyle; onValueChange?(style: StyleProp, value: T): void; } /** @public @react */ export declare const StylePanelDropdownPicker: (props: StylePanelDropdownPickerProps) => React_2.JSX.Element; /** @public @react */ export declare const StylePanelDropdownPickerInline: (props: StylePanelDropdownPickerProps) => React_2.JSX.Element; /** @public */ export declare interface StylePanelDropdownPickerProps { id: string; label?: Exclude | TLUiTranslationKey; uiType: string; stylePanelType: string; style: StyleProp; value: SharedStyle; items: StyleValuesForUi; type: 'icon' | 'menu' | 'tool'; onValueChange?(style: StyleProp, value: T): void; /** Override the test ID prefix. Defaults to uiType. */ testIdType?: string; } /** @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 = readonly { readonly icon: string | TLUiIconJsx; readonly value: T; }[]; /** @public */ export declare const TEXT_PROPS: { fontStyle: string; fontVariant: string; fontWeight: string; lineHeight: number; padding: string; }; /** @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): void; handleDoubleClick(e: any): any; handlePaste(e: ClipboardEvent | React_3.ClipboardEvent): void; hasCustomTabBehavior?: boolean; } /** @public */ export declare interface TextShapeOptions { /** 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 { static type: "text"; static props: RecordProps; 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(): boolean; isAspectRatioLocked(): boolean; component(shape: TLTextShape): JSX.Element; indicator(shape: TLTextShape): JSX.Element | null; useLegacyIndicator(): boolean; getIndicatorPath(shape: TLTextShape): Path2D | undefined; toSvg(shape: TLTextShape, ctx: SvgExportContext): JSX.Element; onResize(shape: TLTextShape, info: TLResizeInfo): { 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: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow"; font: "draw" | "mono" | "sans" | "serif"; richText: { attrs?: any; content: unknown[]; type: string; }; scale: number; size: "l" | "m" | "s" | "xl"; textAlign: "end" | "middle" | "start"; w: number; }; rotation: number; type: "text"; typeName: "shape"; x: number; y: number; } | undefined; } /** @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 TLArrowBindings { start: TLArrowBinding | undefined; end: TLArrowBinding | undefined; } /** @public */ export declare type TLArrowInfo = TLArcArrowInfo | TLElbowArrowInfo | TLStraightArrowInfo; /** @public */ export declare interface TLArrowPoint { handle: VecLike; point: VecLike; arrowhead: TLArrowShapeArrowheadStyle; } /** * 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 * } * ``` * * * @public */ export declare interface TLComponents extends TLEditorComponents, TLUiComponents { } /** @public */ export declare type TLCopyType = 'png' | 'svg'; /** @public */ export declare interface TLDefaultExternalContentHandlerOpts extends TLExternalContentProps { toasts: TLUiToastsContextType; msg: ReturnType; } /** @public */ export declare interface TLDefaultFont { normal: { bold: TLFontFace; normal: TLFontFace; }; italic: { bold: TLFontFace; normal: TLFontFace; }; } /** @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 @react */ export declare function TldrawArrowHints(): JSX.Element | null; /** @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; } /** @public @react */ export declare function TldrawCropHandles({ size, width, height, hideAlternateHandles }: TldrawCropHandlesProps): JSX.Element; /** @public */ export declare interface TldrawCropHandlesProps { size: number; width: number; height: number; hideAlternateHandles: boolean; } /** @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; }; /** @public @react */ export declare function TldrawHandles({ children }: TLHandlesProps): JSX.Element | null; /** * A rendered SVG image of a Tldraw snapshot. * * @example * ```tsx * * ``` * * @public * @react */ export declare const TldrawImage: NamedExoticComponent; /** @public */ export declare interface TldrawImageProps extends TLImageExportOptions { /** * The snapshot to display. */ snapshot: Partial | 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; /** * Text options for the editor. * * @deprecated Use `options.text` instead. This prop will be removed in a future release. */ textOptions?: TLTextOptions; } /** @public @react */ export declare function TldrawOverlays(): JSX.Element | null; /** @public */ export declare type TldrawProps = TldrawBaseProps & TldrawEditorStoreProps; /** @public @react */ export declare function TldrawScribble({ scribble, zoom, color, opacity, className }: TLScribbleProps): JSX.Element | null; /** @public */ export declare const TldrawSelectionForeground: NamedExoticComponent; /** @public @react */ export declare function TldrawShapeIndicators(): JSX.Element; /** * @public * @react */ export declare const TldrawUi: React_3.NamedExoticComponent; /** @public @react */ export declare function TldrawUiA11yProvider({ children }: A11yProviderProps): JSX.Element; /** @public @react */ export declare const TldrawUiButton: React_2.ForwardRefExoticComponent>; /** @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>; /** @public @react */ export declare function TldrawUiComponentsProvider({ overrides, children }: TLUiComponentsProviderProps): JSX.Element; /** @public @react */ export declare const TldrawUiContextProvider: NamedExoticComponent; /** * 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>; /** @public @react */ export declare const TldrawUiIcon: NamedExoticComponent; /** @public @react */ export declare function TldrawUiInFrontOfTheCanvas(): JSX.Element; /** @public @react */ export declare const TldrawUiInput: React_2.ForwardRefExoticComponent>; /** @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({ id, kbd, label, lang, readonlyOk, onSelect, toggle, disabled, checked }: TLUiMenuCheckboxItemProps): 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 | null | number | Promise | string> | ReactPortal | Iterable | null | number | string | undefined> | string | undefined; /** @public @react */ export declare function TldrawUiMenuItem({ disabled, spinner, readonlyOk, id, kbd, label, icon, iconLeft, onSelect, noClose, isSelected, onDragStart }: TLUiMenuItemProps): JSX.Element | null; /** @public @react */ export declare function TldrawUiMenuSubmenu({ id, disabled, label, size, children }: TLUiMenuSubmenuProps): bigint | boolean | JSX.Element | Iterable | null | number | Promise | string> | ReactPortal | Iterable | 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>; /** * A select dropdown component. * * @example * ```tsx * * * * * * * * * * ``` * * @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>; /** * 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>; /** @public @react */ export declare function TldrawUiToastsProvider({ children }: TLUiToastsProviderProps): JSX.Element; /** @public @react */ export declare const TldrawUiToolbar: React_3.ForwardRefExoticComponent>; /** @public @react */ export declare const TldrawUiToolbarButton: React_3.ForwardRefExoticComponent>; /** @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>; /** @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. Defaults to * DEFAULT_SUPPORTED_IMAGE_TYPES. */ acceptedImageMimeTypes?: readonly string[]; /** * The mime types of videos that are allowed to be handled. Defaults to * DEFAULT_SUPPORT_VIDEO_TYPES. */ acceptedVideoMimeTypes?: readonly string[]; } /** @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; } /** @public */ export declare interface TLUiActionItem { 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; } /** @public */ export declare type TLUiActionsContextType = Record; /** @public */ export declare interface TLUiActionsMenuProps { children?: ReactNode; } /** @public */ export declare type TLUiAssetUrlOverrides = RecursivePartial; /** @public */ export declare interface TLUiAssetUrls extends TLEditorAssetUrls { icons: Record | TLUiIconType, string>; translations: Record<(typeof LANGUAGES)[number]['locale'], string>; embedIcons: Partial>; } /** @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 { 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 | null; ActionsMenu?: ComponentType | null; HelpMenu?: ComponentType | null; ZoomMenu?: ComponentType | null; MainMenu?: ComponentType | null; Minimap?: ComponentType | null; StylePanel?: ComponentType | null; PageMenu?: ComponentType | null; NavigationPanel?: ComponentType | null; Toolbar?: ComponentType | null; RichTextToolbar?: ComponentType | null; ImageToolbar?: ComponentType | null; VideoToolbar?: ComponentType | null; KeyboardShortcutsDialog?: ComponentType | null; QuickActions?: ComponentType | null; HelperButtons?: ComponentType | 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; } /** @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; /** * 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; 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 & { id?: string; }): string; removeDialog(id: string): string; clearDialogs(): void; dialogs: Atom; } /** @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 extends null ? { source: TLUiEventSource; } : { source: TLUiEventSource; } & K; /** @public */ export declare type TLUiEventHandler = (name: T, data: TLUiEventData) => 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>; /** @public */ export declare interface TLUiIconProps extends React.HTMLAttributes { icon: Exclude | 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 | TLUiTranslationKey; icon?: Exclude | TLUiIconType; iconLeft?: Exclude | TLUiIconType; iconLabel?: Exclude | 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 { children: ReactNode; tooltipSide?: 'bottom' | 'left' | 'right' | 'top'; asChild?: boolean; } /** @public */ export declare interface TLUiMainMenuProps { children?: ReactNode; } /** @public */ export declare type TLUiMenuActionCheckboxItemProps = { actionId?: string; } & Pick; /** @public */ export declare type TLUiMenuActionItemProps = { actionId?: string; } & Partial>; /** @public */ export declare interface TLUiMenuCheckboxItemProps { icon?: IconType | TLUiIconJsx; id: string; kbd?: string; title?: string; label?: { [key: string]: TranslationKey; } | TranslationKey; lang?: string; readonlyOk?: boolean; onSelect(source: TLUiEventSource): Promise | 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 { 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 { 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; /** * 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 { id: string; label?: { [key: string]: Translation; } | Translation; disabled?: boolean; children: ReactNode; size?: 'medium' | 'small' | 'tiny' | 'wide'; } /** @public */ export declare type TLUiMenuToolItemProps = { toolId?: string; } & Pick; /** @public */ export declare type TLUiOverrideHelpers = ReturnType; /** @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 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 | 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 | 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 & { id?: string; }): string; removeToast(id: TLUiToast['id']): string; clearToasts(): void; toasts: Atom; } /** @public */ export declare interface TLUiToastsProviderProps { overrides?(editor: Editor): TLUiToastsContextType; children: ReactNode; } /** @public */ export declare interface TLUiToolbarButtonProps extends React_3.HTMLAttributes { 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 { 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 { 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 { children?: React_3.ReactNode; className?: string; type: 'icon' | 'tool'; value: string; tooltip?: React_3.ReactNode; } /** @public */ export declare interface TLUiToolItem { 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; /** @public */ export declare interface TLUiToolsProviderProps { overrides?(editor: Editor, tools: TLUiToolsContextType, helpers: Partial): TLUiToolsContextType; children: React_2.ReactNode; } /** @public */ export declare interface TLUiTranslation { readonly locale: string; readonly label: string; readonly messages: Record; 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-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.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 * * ``` */ overrides?: Record>; } /** @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 @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; /** @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 useDefaultColorTheme(): { "light-blue": TLDefaultColorThemeColor; "light-green": TLDefaultColorThemeColor; "light-red": TLDefaultColorThemeColor; "light-violet": TLDefaultColorThemeColor; background: string; black: TLDefaultColorThemeColor; blue: TLDefaultColorThemeColor; green: TLDefaultColorThemeColor; grey: TLDefaultColorThemeColor; id: "dark" | "light"; orange: TLDefaultColorThemeColor; red: TLDefaultColorThemeColor; solid: string; text: string; violet: TLDefaultColorThemeColor; white: TLDefaultColorThemeColor; yellow: TLDefaultColorThemeColor; }; /** @public */ export declare function useDefaultHelpers(): { addDialog: (dialog: Omit & { id?: string | undefined; }) => string; addToast: (toast: Omit & { id?: string | undefined; }) => string; clearDialogs: () => void; clearToasts: () => void; copy: (source: TLUiEventSource) => Promise; copyAs: (ids: TLShapeId_2[], format?: TLCopyType) => void; cut: (source: TLUiEventSource) => Promise; exportAs: (ids: TLShapeId_2[], opts?: { format?: TLExportType | undefined; name?: string | undefined; scale?: number | undefined; }) => void; getEmbedDefinition: (url: string) => TLEmbedResult; insertMedia: () => Promise; isMobile: boolean; msg: (id?: string | undefined) => string; paste: (data: ClipboardItem[] | DataTransfer, source: TLUiEventSource, point?: VecLike | undefined) => Promise; printSelectionOrPages: () => Promise; removeDialog: (id: string) => string; removeToast: (id: string) => string; replaceImage: () => Promise; replaceVideo: () => Promise; }; /** @public */ export declare function useDialogs(): TLUiDialogsContextType; /** @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) => void; handleKeyDown: (e: KeyboardEvent) => void; handlePaste: (e: ClipboardEvent | React_3.ClipboardEvent) => void; isEditing: boolean; isEmpty: boolean; isReadyForEditing: boolean; rInput: React_3.RefObject; }; /** @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) => void; handleKeyDown: (e: KeyboardEvent) => void; handlePaste: (e: ClipboardEvent | ClipboardEvent_2) => void; isEditing: boolean; isEmpty: boolean | undefined; isReadyForEditing: boolean; rInput: RefObject; }; /** @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(key: string, defaultValue: T): readonly [T, (setter: ((value: T) => T) | T) => void]; /** @public */ export declare function useMenuClipboardEvents(): { copy: (source: TLUiEventSource) => Promise; cut: (source: TLUiEventSource) => Promise; paste: (data: ClipboardItem[] | DataTransfer, source: TLUiEventSource, point?: undefined | VecLike) => Promise; }; /** @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[]): 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 interface VideoShapeOptions { /** * Should videos play automatically? */ autoplay: boolean; } /** @public */ export declare class VideoShapeUtil extends BaseBoxShapeUtil { static type: "video"; static props: RecordProps; static migrations: TLPropsMigrations; options: VideoShapeOptions; canEdit(): boolean; isAspectRatioLocked(): boolean; getDefaultProps(): TLVideoShape['props']; getAriaDescriptor(shape: TLVideoShape): string; component(shape: TLVideoShape): JSX.Element; indicator(shape: TLVideoShape): JSX.Element; useLegacyIndicator(): boolean; getIndicatorPath(shape: TLVideoShape): Path2D; toSvg(shape: TLVideoShape, ctx: SvgExportContext): Promise; } /** @public @react */ export declare function ViewSubmenu(): JSX.Element; /** @public @react */ export declare function XBoxToolbarItem(): JSX.Element; /** @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 { }