## API Report File for "tldraw" > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). ```ts /// import { ArrayOfValidator } from '@tldraw/editor'; import { BaseBoxShapeTool } from '@tldraw/editor'; import { BaseBoxShapeUtil } from '@tldraw/editor'; import { BoundsSnapPoint } from '@tldraw/editor'; import { Box } from '@tldraw/editor'; import { Circle2d } from '@tldraw/editor'; import { ComponentType } from 'react'; import { CubicSpline2d } from '@tldraw/editor'; import { DictValidator } from '@tldraw/editor'; import { Editor } from '@tldraw/editor'; import { EMBED_DEFINITIONS } from '@tldraw/editor'; import { EmbedDefinition } from '@tldraw/editor'; import { EnumStyleProp } from '@tldraw/editor'; import { Expand } from '@tldraw/editor'; import { Geometry2d } from '@tldraw/editor'; import { Group2d } from '@tldraw/editor'; import { HandleSnapGeometry } from '@tldraw/editor'; import { IndexKey } from '@tldraw/editor'; import { JsonObject } from '@tldraw/editor'; import { JSX as JSX_2 } from 'react/jsx-runtime'; import { LANGUAGES } from '@tldraw/editor'; import { Mat } from '@tldraw/editor'; import { MatModel } from '@tldraw/editor'; import { MemoExoticComponent } from 'react'; import { MigrationFailureReason } from '@tldraw/editor'; import { Migrations } from '@tldraw/editor'; import { NamedExoticComponent } from 'react'; import { ObjectValidator } from '@tldraw/editor'; import { Polygon2d } from '@tldraw/editor'; import { Polyline2d } from '@tldraw/editor'; import { default as React_2 } from 'react'; import * as React_3 from 'react'; import { ReactNode } from 'react'; import { ReadonlySharedStyleMap } from '@tldraw/editor'; import { Rectangle2d } from '@tldraw/editor'; import { RecursivePartial } from '@tldraw/editor'; import { Result } from '@tldraw/editor'; import { SelectionCorner } from '@tldraw/editor'; import { SelectionEdge } from '@tldraw/editor'; import { SelectionHandle } from '@tldraw/editor'; import { SerializedSchema } from '@tldraw/editor'; import { ShapeUtil } from '@tldraw/editor'; import { SharedStyle } from '@tldraw/editor'; import { StateNode } from '@tldraw/editor'; import { StoreSnapshot } from '@tldraw/editor'; import { StyleProp } from '@tldraw/editor'; import { SvgExportContext } from '@tldraw/editor'; import { T } from '@tldraw/editor'; import { TLAnyShapeUtilConstructor } from '@tldraw/editor'; import { TLArrowShape } from '@tldraw/editor'; import { TLAssetId } from '@tldraw/editor'; import { TLBaseEventInfo } from '@tldraw/editor'; import { TLBookmarkShape } from '@tldraw/editor'; import { TLCancelEvent } from '@tldraw/editor'; import { TLClickEvent } from '@tldraw/editor'; import { TLClickEventInfo } from '@tldraw/editor'; import { TLDefaultColorStyle } from '@tldraw/editor'; import { TLDefaultColorTheme } from '@tldraw/editor'; import { TLDefaultFillStyle } from '@tldraw/editor'; import { TLDefaultFontStyle } from '@tldraw/editor'; import { TLDefaultHorizontalAlignStyle } from '@tldraw/editor'; import { TLDefaultSizeStyle } from '@tldraw/editor'; import { TLDefaultVerticalAlignStyle } from '@tldraw/editor'; import { TldrawEditorBaseProps } from '@tldraw/editor'; import { TLDrawShape } from '@tldraw/editor'; import { TLDrawShapeSegment } from '@tldraw/editor'; import { TLEditorComponents } from '@tldraw/editor'; import { TLEmbedShape } from '@tldraw/editor'; import { TLEnterEventHandler } from '@tldraw/editor'; import { TLEventHandlers } from '@tldraw/editor'; import { TLExitEventHandler } from '@tldraw/editor'; import { TLFrameShape } from '@tldraw/editor'; import { TLGeoShape } from '@tldraw/editor'; import { TLHandle } from '@tldraw/editor'; import { TLHandlesProps } from '@tldraw/editor'; import { TLHighlightShape } from '@tldraw/editor'; import { TLHoveredShapeIndicatorProps } from '@tldraw/editor'; import { TLImageShape } from '@tldraw/editor'; import { TLInterruptEvent } from '@tldraw/editor'; import { TLKeyboardEvent } from '@tldraw/editor'; import { TLKeyboardEventInfo } from '@tldraw/editor'; import { TLLineShape } from '@tldraw/editor'; import { TLNoteShape } from '@tldraw/editor'; import { TLOnBeforeCreateHandler } from '@tldraw/editor'; import { TLOnBeforeUpdateHandler } from '@tldraw/editor'; import { TLOnDoubleClickHandler } from '@tldraw/editor'; import { TLOnEditEndHandler } from '@tldraw/editor'; import { TLOnHandleDragHandler } from '@tldraw/editor'; import { TLOnResizeEndHandler } from '@tldraw/editor'; import { TLOnResizeHandler } from '@tldraw/editor'; import { TLOnTranslateHandler } from '@tldraw/editor'; import { TLOnTranslateStartHandler } from '@tldraw/editor'; import { TLPageId } from '@tldraw/editor'; import { TLParentId } from '@tldraw/editor'; import { TLPointerEvent } from '@tldraw/editor'; import { TLPointerEventInfo } from '@tldraw/editor'; import { TLPointerEventName } from '@tldraw/editor'; import { TLRecord } from '@tldraw/editor'; import { TLRotationSnapshot } from '@tldraw/editor'; import { TLSchema } from '@tldraw/editor'; import { TLScribbleProps } from '@tldraw/editor'; import { TLSelectionBackgroundProps } from '@tldraw/editor'; import { TLSelectionForegroundProps } from '@tldraw/editor'; import { TLSelectionHandle } from '@tldraw/editor'; import { TLShape } from '@tldraw/editor'; import { TLShapeId } from '@tldraw/editor'; import { TLShapePartial } from '@tldraw/editor'; import { TLShapeUtilCanvasSvgDef } from '@tldraw/editor'; import { TLShapeUtilFlag } from '@tldraw/editor'; import { TLStore } from '@tldraw/editor'; import { TLStoreWithStatus } from '@tldraw/editor'; import { TLSvgOptions } from '@tldraw/editor'; import { TLTextShape } from '@tldraw/editor'; import { TLUnknownShape } from '@tldraw/editor'; import { TLVideoShape } from '@tldraw/editor'; import { UnionValidator } from '@tldraw/editor'; import { UnknownRecord } from '@tldraw/editor'; import { Validator } from '@tldraw/editor'; import { Vec } from '@tldraw/editor'; import { VecLike } from '@tldraw/editor'; import { VecModel } from '@tldraw/editor'; // @public (undocumented) export type AlertSeverity = 'error' | 'info' | 'success' | 'warning'; // @public (undocumented) export function AlignMenuItems(): JSX_2.Element; // @public (undocumented) export function ArrangeMenuSubmenu(): JSX_2.Element | null; // @public (undocumented) export function ArrowDownToolbarItem(): JSX_2.Element; // @public (undocumented) export function ArrowheadStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap; }): JSX_2.Element | null; // @public (undocumented) export function ArrowLeftToolbarItem(): JSX_2.Element; // @public (undocumented) export function ArrowRightToolbarItem(): JSX_2.Element; // @public (undocumented) export class ArrowShapeTool extends StateNode { // (undocumented) static children: () => (typeof Idle | typeof Pointing)[]; // (undocumented) static id: string; // (undocumented) static initial: string; // (undocumented) shapeType: string; } // @public (undocumented) export class ArrowShapeUtil extends ShapeUtil { // (undocumented) canBind: () => boolean; // (undocumented) canEdit: () => boolean; // (undocumented) canSnap: () => boolean; // (undocumented) component(shape: TLArrowShape): JSX_2.Element | null; // (undocumented) getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[]; // (undocumented) getDefaultProps(): TLArrowShape['props']; // (undocumented) getGeometry(shape: TLArrowShape): Group2d; // (undocumented) getHandles(shape: TLArrowShape): TLHandle[]; // (undocumented) hideResizeHandles: TLShapeUtilFlag; // (undocumented) hideRotateHandle: TLShapeUtilFlag; // (undocumented) hideSelectionBoundsBg: TLShapeUtilFlag; // (undocumented) hideSelectionBoundsFg: TLShapeUtilFlag; // (undocumented) indicator(shape: TLArrowShape): JSX_2.Element | null; // (undocumented) static migrations: Migrations; // (undocumented) onDoubleClickHandle: (shape: TLArrowShape, handle: TLHandle) => TLShapePartial | void; // (undocumented) onEditEnd: TLOnEditEndHandler; // (undocumented) onHandleDrag: TLOnHandleDragHandler; // (undocumented) onResize: TLOnResizeHandler; // (undocumented) onTranslate?: TLOnTranslateHandler; // (undocumented) onTranslateStart: TLOnTranslateStartHandler; // (undocumented) static props: { labelColor: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">; color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">; fill: EnumStyleProp<"none" | "pattern" | "semi" | "solid">; dash: EnumStyleProp<"dashed" | "dotted" | "draw" | "solid">; size: EnumStyleProp<"l" | "m" | "s" | "xl">; arrowheadStart: EnumStyleProp<"arrow" | "bar" | "diamond" | "dot" | "inverted" | "none" | "pipe" | "square" | "triangle">; arrowheadEnd: EnumStyleProp<"arrow" | "bar" | "diamond" | "dot" | "inverted" | "none" | "pipe" | "square" | "triangle">; font: EnumStyleProp<"draw" | "mono" | "sans" | "serif">; start: UnionValidator<"type", { binding: ObjectValidator< { type: "binding"; boundShapeId: TLShapeId; normalizedAnchor: VecModel; isExact: boolean; isPrecise: boolean; }>; point: ObjectValidator< { x: number; y: number; type: "point"; }>; }, never>; end: UnionValidator<"type", { binding: ObjectValidator< { type: "binding"; boundShapeId: TLShapeId; normalizedAnchor: VecModel; isExact: boolean; isPrecise: boolean; }>; point: ObjectValidator< { x: number; y: number; type: "point"; }>; }, never>; bend: Validator; text: Validator; labelPosition: Validator; }; // (undocumented) toSvg(shape: TLArrowShape, ctx: SvgExportContext): JSX_2.Element; // (undocumented) static type: "arrow"; } // @public (undocumented) export function ArrowToolbarItem(): JSX_2.Element; // @public (undocumented) export function ArrowUpToolbarItem(): JSX_2.Element; // @public (undocumented) export function AssetToolbarItem(): JSX_2.Element; // @internal (undocumented) export function AssetUrlsProvider({ assetUrls, children, }: { assetUrls: TLUiAssetUrls; children: React.ReactNode; }): JSX_2.Element; // @public (undocumented) export class BookmarkShapeUtil extends BaseBoxShapeUtil { // (undocumented) canResize: () => boolean; // (undocumented) component(shape: TLBookmarkShape): JSX_2.Element; // (undocumented) getDefaultProps(): TLBookmarkShape['props']; // (undocumented) hideSelectionBoundsFg: () => boolean; // (undocumented) indicator(shape: TLBookmarkShape): JSX_2.Element; // (undocumented) static migrations: Migrations; // (undocumented) onBeforeCreate?: TLOnBeforeCreateHandler; // (undocumented) onBeforeUpdate?: TLOnBeforeUpdateHandler; // (undocumented) static props: { w: T.Validator; h: T.Validator; assetId: T.Validator; url: T.Validator; }; // (undocumented) static type: "bookmark"; } // @public (undocumented) export function BreakPointProvider({ forceMobile, children, }: { forceMobile?: boolean; children: ReactNode; }): JSX_2.Element; // @internal (undocumented) export function buildFromV1Document(editor: Editor, document: LegacyTldrawDocument): void; // @public (undocumented) export function CheckBoxToolbarItem(): JSX_2.Element; // @public (undocumented) export function ClipboardMenuGroup(): JSX_2.Element; // @public (undocumented) export function CloudToolbarItem(): JSX_2.Element; // @public (undocumented) export function CommonStylePickerSet({ styles, theme, }: { styles: ReadonlySharedStyleMap; theme: TLDefaultColorTheme; }): JSX_2.Element; // @public export function containBoxSize(originalSize: BoxWidthHeight, containBoxSize: BoxWidthHeight): BoxWidthHeight; // @public (undocumented) export function ConversionsMenuGroup(): JSX_2.Element | null; // @public (undocumented) export function ConvertToBookmarkMenuItem(): JSX_2.Element | null; // @public (undocumented) export function ConvertToEmbedMenuItem(): JSX_2.Element | null; // @public export function copyAs(editor: Editor, ids: TLShapeId[], format?: TLCopyType, opts?: Partial): Promise; // @public (undocumented) export function CopyAsMenuGroup(): JSX_2.Element; // @public (undocumented) export function CopyMenuItem(): JSX_2.Element; // @public (undocumented) export function CutMenuItem(): JSX_2.Element; // @public (undocumented) export function DebugFlags(): JSX_2.Element | null; // @public (undocumented) export const DEFAULT_ACCEPTED_IMG_TYPE: string[]; // @public (undocumented) export const DEFAULT_ACCEPTED_VID_TYPE: string[]; // @public (undocumented) export const DefaultActionsMenu: NamedExoticComponent; // @public (undocumented) export function DefaultActionsMenuContent(): JSX_2.Element; // @public (undocumented) const DefaultContextMenu: NamedExoticComponent; export { DefaultContextMenu as ContextMenu } export { DefaultContextMenu } // @public (undocumented) export function DefaultContextMenuContent(): JSX_2.Element | null; // @public (undocumented) export function DefaultDebugMenu({ children }: TLUiDebugMenuProps): JSX_2.Element; // @public (undocumented) export function DefaultDebugMenuContent(): JSX_2.Element; // @public (undocumented) export function DefaultHelperButtons({ children }: TLUiHelperButtonsProps): JSX_2.Element; // @public (undocumented) export function DefaultHelperButtonsContent(): JSX_2.Element; // @public (undocumented) export const DefaultHelpMenu: NamedExoticComponent; // @public (undocumented) export function DefaultHelpMenuContent(): JSX_2.Element; // @public (undocumented) export const DefaultKeyboardShortcutsDialog: NamedExoticComponent; // @public (undocumented) export function DefaultKeyboardShortcutsDialogContent(): JSX_2.Element; // @public (undocumented) export const DefaultMainMenu: NamedExoticComponent; // @public (undocumented) export function DefaultMainMenuContent(): JSX_2.Element; // @public (undocumented) export function DefaultMinimap(): JSX_2.Element; // @public (undocumented) export const DefaultPageMenu: NamedExoticComponent; // @public (undocumented) export const DefaultQuickActions: NamedExoticComponent; // @public (undocumented) export function DefaultQuickActionsContent(): JSX_2.Element | undefined; // @public (undocumented) export const defaultShapeTools: (typeof ArrowShapeTool | typeof DrawShapeTool | typeof FrameShapeTool | typeof GeoShapeTool | typeof LineShapeTool | typeof NoteShapeTool | typeof TextShapeTool)[]; // @public (undocumented) export const defaultShapeUtils: TLAnyShapeUtilConstructor[]; // @public (undocumented) export const DefaultStylePanel: NamedExoticComponent; // @public (undocumented) export function DefaultStylePanelContent({ styles }: TLUiStylePanelContentProps): JSX_2.Element | null; // @public export const DefaultToolbar: NamedExoticComponent< { children?: ReactNode; }>; // @public (undocumented) export function DefaultToolbarContent(): JSX_2.Element; // @public (undocumented) export const defaultTools: (typeof EraserTool | typeof HandTool | typeof LaserTool | typeof SelectTool | typeof ZoomTool)[]; // @public (undocumented) export const DefaultZoomMenu: NamedExoticComponent; // @public (undocumented) export function DefaultZoomMenuContent(): JSX_2.Element; // @public (undocumented) export function DeleteMenuItem(): JSX_2.Element; // @public (undocumented) export function DiamondToolbarItem(): JSX_2.Element; // @public (undocumented) export function DistributeMenuItems(): JSX_2.Element; // @public export function downsizeImage(blob: Blob, width: number, height: number, opts?: { type?: string | undefined; quality?: number | undefined; }): Promise; // @public (undocumented) export class DrawShapeTool extends StateNode { // (undocumented) static children: () => (typeof Drawing | typeof Idle_2)[]; // (undocumented) static id: string; // (undocumented) static initial: string; // (undocumented) onExit: () => void; // (undocumented) shapeType: string; } // @public (undocumented) export class DrawShapeUtil extends ShapeUtil { // (undocumented) component(shape: TLDrawShape): JSX_2.Element; // (undocumented) expandSelectionOutlinePx(shape: TLDrawShape): number; // (undocumented) getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[]; // (undocumented) getDefaultProps(): TLDrawShape['props']; // (undocumented) getGeometry(shape: TLDrawShape): Circle2d | Polyline2d; // (undocumented) hideResizeHandles: (shape: TLDrawShape) => boolean; // (undocumented) hideRotateHandle: (shape: TLDrawShape) => boolean; // (undocumented) hideSelectionBoundsFg: (shape: TLDrawShape) => boolean; // (undocumented) indicator(shape: TLDrawShape): JSX_2.Element; // (undocumented) static migrations: Migrations; // (undocumented) onResize: TLOnResizeHandler; // (undocumented) static props: { color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">; fill: EnumStyleProp<"none" | "pattern" | "semi" | "solid">; dash: EnumStyleProp<"dashed" | "dotted" | "draw" | "solid">; size: EnumStyleProp<"l" | "m" | "s" | "xl">; segments: ArrayOfValidator< { type: "free" | "straight"; points: VecModel[]; }>; isComplete: Validator; isClosed: Validator; isPen: Validator; }; // (undocumented) toSvg(shape: TLDrawShape, ctx: SvgExportContext): JSX_2.Element; // (undocumented) static type: "draw"; } // @public (undocumented) export function DrawToolbarItem(): JSX_2.Element; // @public (undocumented) export function DuplicateMenuItem(): JSX_2.Element | null; // @public (undocumented) export function EditLinkMenuItem(): JSX_2.Element | null; // @public (undocumented) export function EditSubmenu(): JSX_2.Element; // @public (undocumented) export function EllipseToolbarItem(): JSX_2.Element; // @public (undocumented) export class EmbedShapeUtil extends BaseBoxShapeUtil { // (undocumented) canEdit: TLShapeUtilFlag; // (undocumented) canEditInReadOnly: () => boolean; // (undocumented) canResize: (shape: TLEmbedShape) => boolean; // (undocumented) canUnmount: TLShapeUtilFlag; // (undocumented) component(shape: TLEmbedShape): JSX_2.Element; // (undocumented) getDefaultProps(): TLEmbedShape['props']; // (undocumented) hideSelectionBoundsFg: TLShapeUtilFlag; // (undocumented) indicator(shape: TLEmbedShape): JSX_2.Element; // (undocumented) isAspectRatioLocked: TLShapeUtilFlag; // (undocumented) static migrations: Migrations; // (undocumented) onResize: TLOnResizeHandler; // (undocumented) static props: { w: Validator; h: Validator; url: Validator; }; // (undocumented) static type: "embed"; } // @public (undocumented) export class EraserTool extends StateNode { // (undocumented) static children: () => (typeof Erasing | typeof Idle_7 | typeof Pointing_6)[]; // (undocumented) static id: string; // (undocumented) static initial: string; // (undocumented) onEnter: () => void; } // @public (undocumented) export function EraserToolbarItem(): JSX_2.Element; // @public (undocumented) export type EventsProviderProps = { onEvent?: TLUiEventHandler; children: React_3.ReactNode; }; // @public (undocumented) export function ExampleDialog({ title, body, cancel, confirm, displayDontShowAgain, onCancel, onContinue, }: { title?: string; body?: string; cancel?: string; confirm?: string; displayDontShowAgain?: boolean; onCancel: () => void; onContinue: () => void; }): JSX_2.Element; // @public export function exportAs(editor: Editor, ids: TLShapeId[], format: TLExportType | undefined, name: string | undefined, opts?: Partial): Promise; // @public (undocumented) export function ExportFileContentSubMenu(): JSX_2.Element; // @public export function exportToBlob({ editor, ids, format, opts, }: { editor: Editor; ids: TLShapeId[]; format: 'jpeg' | 'json' | 'png' | 'svg' | 'webp'; opts?: Partial; }): Promise; // @public (undocumented) export function ExtrasGroup(): JSX_2.Element; // @public (undocumented) export function FeatureFlags(): JSX_2.Element | null; // @public export function fitFrameToContent(editor: Editor, id: TLShapeId, opts?: { padding: number; }): void; // @public (undocumented) export function FitFrameToContentMenuItem(): JSX_2.Element | null; // @public (undocumented) export const FONT_FAMILIES: Record; // @public (undocumented) export class FrameShapeTool extends BaseBoxShapeTool { // (undocumented) static id: string; // (undocumented) static initial: string; // (undocumented) onCreate: (shape: null | TLShape) => void; // (undocumented) shapeType: string; } // @public (undocumented) export class FrameShapeUtil extends BaseBoxShapeUtil { // (undocumented) canBind: () => boolean; // (undocumented) canDropShapes: (shape: TLFrameShape, _shapes: TLShape[]) => boolean; // (undocumented) canEdit: () => boolean; // (undocumented) canReceiveNewChildrenOfType: (shape: TLShape, _type: TLShape['type']) => boolean; // (undocumented) component(shape: TLFrameShape): JSX_2.Element; // (undocumented) getDefaultProps(): TLFrameShape['props']; // (undocumented) getGeometry(shape: TLFrameShape): Geometry2d; // (undocumented) indicator(shape: TLFrameShape): JSX_2.Element; // (undocumented) static migrations: Migrations; // (undocumented) onDragShapesOut: (_shape: TLFrameShape, shapes: TLShape[]) => void; // (undocumented) onDragShapesOver: (frame: TLFrameShape, shapes: TLShape[]) => { shouldHint: boolean; }; // (undocumented) onResize: TLOnResizeHandler; // (undocumented) onResizeEnd: TLOnResizeEndHandler; // (undocumented) static props: { w: Validator; h: Validator; name: Validator; }; // (undocumented) providesBackgroundForChildren(): boolean; // (undocumented) toSvg(shape: TLFrameShape, ctx: SvgExportContext): JSX_2.Element; // (undocumented) static type: "frame"; } // @public (undocumented) export function FrameToolbarItem(): JSX_2.Element; // @public (undocumented) export class GeoShapeTool extends StateNode { // (undocumented) static children: () => (typeof Idle_3 | typeof Pointing_2)[]; // (undocumented) static id: string; // (undocumented) static initial: string; // (undocumented) shapeType: string; } // @public (undocumented) export class GeoShapeUtil extends BaseBoxShapeUtil { // (undocumented) canEdit: () => boolean; // (undocumented) component(shape: TLGeoShape): JSX_2.Element; // (undocumented) getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[]; // (undocumented) getDefaultProps(): TLGeoShape['props']; // (undocumented) getGeometry(shape: TLGeoShape): Group2d; // (undocumented) getHandleSnapGeometry(shape: TLGeoShape): HandleSnapGeometry; // (undocumented) indicator(shape: TLGeoShape): JSX_2.Element; // (undocumented) static migrations: Migrations; // (undocumented) onBeforeCreate: (shape: TLGeoShape) => { props: { growY: number; geo: "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "check-box" | "cloud" | "diamond" | "ellipse" | "hexagon" | "octagon" | "oval" | "pentagon" | "rectangle" | "rhombus-2" | "rhombus" | "star" | "trapezoid" | "triangle" | "x-box"; labelColor: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow"; color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow"; fill: "none" | "pattern" | "semi" | "solid"; dash: "dashed" | "dotted" | "draw" | "solid"; size: "l" | "m" | "s" | "xl"; font: "draw" | "mono" | "sans" | "serif"; align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start"; verticalAlign: "end" | "middle" | "start"; url: string; w: number; h: number; text: string; }; type: "geo"; x: number; y: number; rotation: number; index: IndexKey; parentId: TLParentId; isLocked: boolean; opacity: number; meta: JsonObject; id: TLShapeId; typeName: "shape"; } | undefined; // (undocumented) onBeforeUpdate: (prev: TLGeoShape, next: TLGeoShape) => { props: { growY: number; geo: "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "check-box" | "cloud" | "diamond" | "ellipse" | "hexagon" | "octagon" | "oval" | "pentagon" | "rectangle" | "rhombus-2" | "rhombus" | "star" | "trapezoid" | "triangle" | "x-box"; labelColor: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow"; color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow"; fill: "none" | "pattern" | "semi" | "solid"; dash: "dashed" | "dotted" | "draw" | "solid"; size: "l" | "m" | "s" | "xl"; font: "draw" | "mono" | "sans" | "serif"; align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start"; verticalAlign: "end" | "middle" | "start"; url: string; w: number; h: number; text: string; }; type: "geo"; x: number; y: number; rotation: number; index: IndexKey; parentId: TLParentId; isLocked: boolean; opacity: number; meta: JsonObject; id: TLShapeId; typeName: "shape"; } | undefined; // (undocumented) onDoubleClick: (shape: TLGeoShape) => { props: { geo: "check-box"; }; type: "geo"; x: number; y: number; rotation: number; index: IndexKey; parentId: TLParentId; isLocked: boolean; opacity: number; meta: JsonObject; id: TLShapeId; typeName: "shape"; } | { props: { geo: "rectangle"; }; type: "geo"; x: number; y: number; rotation: number; index: IndexKey; parentId: TLParentId; isLocked: boolean; opacity: number; meta: JsonObject; id: TLShapeId; typeName: "shape"; } | undefined; // (undocumented) onEditEnd: TLOnEditEndHandler; // (undocumented) onResize: TLOnResizeHandler; // (undocumented) static props: { geo: EnumStyleProp<"arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "check-box" | "cloud" | "diamond" | "ellipse" | "hexagon" | "octagon" | "oval" | "pentagon" | "rectangle" | "rhombus-2" | "rhombus" | "star" | "trapezoid" | "triangle" | "x-box">; labelColor: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">; color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">; fill: EnumStyleProp<"none" | "pattern" | "semi" | "solid">; dash: EnumStyleProp<"dashed" | "dotted" | "draw" | "solid">; size: EnumStyleProp<"l" | "m" | "s" | "xl">; font: EnumStyleProp<"draw" | "mono" | "sans" | "serif">; align: EnumStyleProp<"end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start">; verticalAlign: EnumStyleProp<"end" | "middle" | "start">; url: Validator; w: Validator; h: Validator; growY: Validator; text: Validator; }; // (undocumented) toSvg(shape: TLGeoShape, ctx: SvgExportContext): JSX_2.Element; // (undocumented) static type: "geo"; } // @public (undocumented) export function GeoStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap; }): JSX_2.Element | null; // @public export function getEmbedInfo(inputUrl: string): TLEmbedResult; // @public (undocumented) export function getSvgAsImage(svgString: string, isSafari: boolean, options: { type: 'jpeg' | 'png' | 'webp'; quality: number; scale: number; width: number; height: number; }): Promise; // @public (undocumented) export function GroupMenuItem(): JSX_2.Element | null; // @public (undocumented) export function GroupOrUngroupMenuItem(): JSX_2.Element; // @public (undocumented) export class HandTool extends StateNode { // (undocumented) static children: () => (typeof Dragging | typeof Idle_8 | typeof Pointing_7)[]; // (undocumented) static id: string; // (undocumented) static initial: string; // (undocumented) onDoubleClick: TLClickEvent; // (undocumented) onQuadrupleClick: TLClickEvent; // (undocumented) onTripleClick: TLClickEvent; } // @public (undocumented) export function HandToolbarItem(): JSX_2.Element; // @public (undocumented) export function HexagonToolbarItem(): JSX_2.Element; // @public (undocumented) export class HighlightShapeTool extends StateNode { // (undocumented) static children: () => (typeof Drawing | typeof Idle_2)[]; // (undocumented) static id: string; // (undocumented) static initial: string; // (undocumented) onExit: () => void; // (undocumented) shapeType: string; } // @public (undocumented) export class HighlightShapeUtil extends ShapeUtil { // (undocumented) backgroundComponent(shape: TLHighlightShape): JSX_2.Element; // (undocumented) component(shape: TLHighlightShape): JSX_2.Element; // (undocumented) getDefaultProps(): TLHighlightShape['props']; // (undocumented) getGeometry(shape: TLHighlightShape): Circle2d | Polygon2d; // (undocumented) hideResizeHandles: (shape: TLHighlightShape) => boolean; // (undocumented) hideRotateHandle: (shape: TLHighlightShape) => boolean; // (undocumented) hideSelectionBoundsFg: (shape: TLHighlightShape) => boolean; // (undocumented) indicator(shape: TLHighlightShape): JSX_2.Element; // (undocumented) static migrations: Migrations; // (undocumented) onResize: TLOnResizeHandler; // (undocumented) static props: { color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">; size: EnumStyleProp<"l" | "m" | "s" | "xl">; segments: ArrayOfValidator< { type: "free" | "straight"; points: VecModel[]; }>; isComplete: Validator; isPen: Validator; }; // (undocumented) toBackgroundSvg(shape: TLHighlightShape): JSX_2.Element; // (undocumented) toSvg(shape: TLHighlightShape): JSX_2.Element; // (undocumented) static type: "highlight"; } // @public (undocumented) export function HighlightToolbarItem(): JSX_2.Element; // @public (undocumented) export class ImageShapeUtil extends BaseBoxShapeUtil { // (undocumented) canCrop: () => boolean; // (undocumented) component(shape: TLImageShape): JSX_2.Element; // (undocumented) getDefaultProps(): TLImageShape['props']; // (undocumented) indicator(shape: TLImageShape): JSX_2.Element | null; // (undocumented) isAspectRatioLocked: () => boolean; // (undocumented) static migrations: Migrations; // (undocumented) onDoubleClick: (shape: TLImageShape) => void; // (undocumented) onDoubleClickEdge: TLOnDoubleClickHandler; // (undocumented) static props: { w: Validator; h: Validator; playing: Validator; url: Validator; assetId: Validator; crop: Validator< { topLeft: VecModel; bottomRight: VecModel; } | null>; }; // (undocumented) toSvg(shape: TLImageShape): Promise; // (undocumented) static type: "image"; } // @public (undocumented) export function isGifAnimated(file: Blob): Promise; // @public (undocumented) export function KeyboardShortcutsMenuItem(): JSX_2.Element | null; // @public (undocumented) export const LABEL_FONT_SIZES: Record; // @public (undocumented) export function LanguageMenu(): JSX_2.Element; // @public (undocumented) export class LaserTool extends StateNode { // (undocumented) static children: () => (typeof Idle_9 | typeof Lasering)[]; // (undocumented) static id: string; // (undocumented) static initial: string; // (undocumented) onEnter: () => void; } // @public (undocumented) export function LaserToolbarItem(): JSX_2.Element; // @internal (undocumented) export interface LegacyTldrawDocument { // (undocumented) assets: TDAssets; // (undocumented) id: string; // (undocumented) name: string; // (undocumented) pages: Record; // (undocumented) pageStates: Record; // (undocumented) version: number; } // @public (undocumented) export class LineShapeTool extends StateNode { // (undocumented) static children: () => (typeof Idle_4 | typeof Pointing_3)[]; // (undocumented) static id: string; // (undocumented) static initial: string; // (undocumented) shapeType: string; } // @public (undocumented) export class LineShapeUtil extends ShapeUtil { // (undocumented) component(shape: TLLineShape): JSX_2.Element; // (undocumented) getDefaultProps(): TLLineShape['props']; // (undocumented) getGeometry(shape: TLLineShape): CubicSpline2d | Polyline2d; // (undocumented) getHandles(shape: TLLineShape): TLHandle[]; // (undocumented) getHandleSnapGeometry(shape: TLLineShape): HandleSnapGeometry; // (undocumented) hideResizeHandles: () => boolean; // (undocumented) hideRotateHandle: () => boolean; // (undocumented) hideSelectionBoundsBg: () => boolean; // (undocumented) hideSelectionBoundsFg: () => boolean; // (undocumented) indicator(shape: TLLineShape): JSX_2.Element; // (undocumented) static migrations: Migrations; // (undocumented) onHandleDrag: TLOnHandleDragHandler; // (undocumented) onResize: TLOnResizeHandler; // (undocumented) static props: { color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">; dash: EnumStyleProp<"dashed" | "dotted" | "draw" | "solid">; size: EnumStyleProp<"l" | "m" | "s" | "xl">; spline: EnumStyleProp<"cubic" | "line">; points: DictValidator; }; // (undocumented) toSvg(shape: TLLineShape): JSX_2.Element; // (undocumented) static type: "line"; } // @public (undocumented) export function LineToolbarItem(): JSX_2.Element; // @public (undocumented) export function MiscMenuGroup(): JSX_2.Element; // @public (undocumented) export function MoveToPageMenu(): JSX_2.Element | null; // @public (undocumented) export class NoteShapeTool extends StateNode { // (undocumented) static children: () => (typeof Idle_5 | typeof Pointing_4)[]; // (undocumented) static id: string; // (undocumented) static initial: string; // (undocumented) shapeType: string; } // @public (undocumented) export class NoteShapeUtil extends ShapeUtil { // (undocumented) canEdit: () => boolean; // (undocumented) component(shape: TLNoteShape): JSX_2.Element; // (undocumented) getDefaultProps(): TLNoteShape['props']; // (undocumented) getGeometry(shape: TLNoteShape): Rectangle2d; // (undocumented) getHeight(shape: TLNoteShape): number; // (undocumented) hideResizeHandles: () => boolean; // (undocumented) hideSelectionBoundsFg: () => boolean; // (undocumented) indicator(shape: TLNoteShape): JSX_2.Element; // (undocumented) static migrations: Migrations; // (undocumented) onBeforeCreate: (next: TLNoteShape) => { props: { growY: number; color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow"; size: "l" | "m" | "s" | "xl"; font: "draw" | "mono" | "sans" | "serif"; align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start"; verticalAlign: "end" | "middle" | "start"; url: string; text: string; }; type: "note"; x: number; y: number; rotation: number; index: IndexKey; parentId: TLParentId; isLocked: boolean; opacity: number; meta: JsonObject; id: TLShapeId; typeName: "shape"; } | undefined; // (undocumented) onBeforeUpdate: (prev: TLNoteShape, next: TLNoteShape) => { props: { growY: number; color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow"; size: "l" | "m" | "s" | "xl"; font: "draw" | "mono" | "sans" | "serif"; align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start"; verticalAlign: "end" | "middle" | "start"; url: string; text: string; }; type: "note"; x: number; y: number; rotation: number; index: IndexKey; parentId: TLParentId; isLocked: boolean; opacity: number; meta: JsonObject; id: TLShapeId; typeName: "shape"; } | undefined; // (undocumented) onEditEnd: TLOnEditEndHandler; // (undocumented) static props: { color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">; size: EnumStyleProp<"l" | "m" | "s" | "xl">; font: EnumStyleProp<"draw" | "mono" | "sans" | "serif">; align: EnumStyleProp<"end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start">; verticalAlign: EnumStyleProp<"end" | "middle" | "start">; growY: Validator; url: Validator; text: Validator; }; // (undocumented) toSvg(shape: TLNoteShape, ctx: SvgExportContext): JSX_2.Element; // (undocumented) static type: "note"; } // @public (undocumented) export function NoteToolbarItem(): JSX_2.Element; // @public (undocumented) export function OfflineIndicator(): JSX_2.Element; // @public (undocumented) export function OpacitySlider(): JSX_2.Element | null; // @public (undocumented) export function OvalToolbarItem(): JSX_2.Element; // @public (undocumented) export const PageItemInput: ({ name, id, isCurrentPage, }: { name: string; id: TLPageId; isCurrentPage: boolean; }) => JSX_2.Element; // @public (undocumented) export const PageItemSubmenu: MemoExoticComponent<({ index, listSize, item, onRename, }: PageItemSubmenuProps) => JSX_2.Element>; // @internal (undocumented) export function parseAndLoadDocument(editor: Editor, document: string, msg: (id: Exclude | TLUiTranslationKey) => string, addToast: TLUiToastsContextType['addToast'], onV1FileLoad?: () => void, forceDarkMode?: boolean): Promise; // @public (undocumented) export function parseTldrawJsonFile({ json, schema, }: { schema: TLSchema; json: string; }): Result; // @public (undocumented) export function PasteMenuItem(): JSX_2.Element; // @public (undocumented) export function PreferencesGroup(): JSX_2.Element; // @public (undocumented) export function preloadFont(id: string, font: TLTypeFace): Promise; // @public (undocumented) export function PrintItem(): JSX_2.Element; // @public (undocumented) export function RectangleToolbarItem(): JSX_2.Element; // @public export function removeFrame(editor: Editor, ids: TLShapeId[]): void; // @public (undocumented) export function RemoveFrameMenuItem(): JSX_2.Element | null; // @public (undocumented) export function ReorderMenuItems(): JSX_2.Element; // @public (undocumented) export function ReorderMenuSubmenu(): JSX_2.Element | null; // @public (undocumented) export function RhombusToolbarItem(): JSX_2.Element; // @public (undocumented) export function RotateCWMenuItem(): JSX_2.Element; // @public (undocumented) export function SelectAllMenuItem(): JSX_2.Element; // @public (undocumented) export class SelectTool extends StateNode { // (undocumented) static children: () => (typeof Brushing | typeof Crop | typeof Cropping | typeof DraggingHandle | typeof EditingShape | typeof Idle_11 | typeof PointingArrowLabel | typeof PointingCanvas | typeof PointingCropHandle | typeof PointingHandle | typeof PointingResizeHandle | typeof PointingRotateHandle | typeof PointingSelection | typeof PointingShape | typeof Resizing | typeof Rotating | typeof ScribbleBrushing | typeof Translating)[]; // (undocumented) static id: string; // (undocumented) static initial: string; // (undocumented) onEnter: () => void; // (undocumented) onExit: () => void; // (undocumented) reactor: (() => void) | undefined; } // @public (undocumented) export function SelectToolbarItem(): JSX_2.Element; // @public (undocumented) export function serializeTldrawJson(store: TLStore): Promise; // @public (undocumented) export function serializeTldrawJsonBlob(store: TLStore): Promise; // @public (undocumented) export function setDefaultEditorAssetUrls(assetUrls: TLEditorAssetUrls): void; // @internal (undocumented) export function setDefaultUiAssetUrls(urls: TLUiAssetUrls): void; // @internal (undocumented) export function Spinner(props: React_2.SVGProps): JSX_2.Element; // @public (undocumented) export function SplineStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap; }): JSX_2.Element | null; // @public (undocumented) export function StackMenuItems(): JSX_2.Element; // @public (undocumented) export function StarToolbarItem(): JSX_2.Element; // @public (undocumented) export const TEXT_PROPS: { lineHeight: number; fontWeight: string; fontVariant: string; fontStyle: string; padding: string; }; // @public (undocumented) export const TextLabel: React_2.NamedExoticComponent; // @public (undocumented) export class TextShapeTool extends StateNode { // (undocumented) static children: () => (typeof Idle_6 | typeof Pointing_5)[]; // (undocumented) static id: string; // (undocumented) static initial: string; // (undocumented) shapeType: string; } // @public (undocumented) export class TextShapeUtil extends ShapeUtil { // (undocumented) canEdit: () => boolean; // (undocumented) component(shape: TLTextShape): JSX_2.Element; // (undocumented) getDefaultProps(): TLTextShape['props']; // (undocumented) getGeometry(shape: TLTextShape): Rectangle2d; // (undocumented) getMinDimensions(shape: TLTextShape): { height: number; width: number; }; // (undocumented) indicator(shape: TLTextShape): JSX_2.Element | null; // (undocumented) isAspectRatioLocked: TLShapeUtilFlag; // (undocumented) static migrations: Migrations; // (undocumented) onBeforeCreate: (shape: TLTextShape) => { x: number; y: number; type: "text"; rotation: number; index: IndexKey; parentId: TLParentId; isLocked: boolean; opacity: number; props: { color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow"; size: "l" | "m" | "s" | "xl"; font: "draw" | "mono" | "sans" | "serif"; align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start"; w: number; text: string; scale: number; autoSize: boolean; }; meta: JsonObject; id: TLShapeId; typeName: "shape"; } | undefined; // (undocumented) onBeforeUpdate: (prev: TLTextShape, next: TLTextShape) => { x: number; y: number; props: { w: number; color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow"; size: "l" | "m" | "s" | "xl"; font: "draw" | "mono" | "sans" | "serif"; align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start"; text: string; scale: number; autoSize: boolean; }; type: "text"; rotation: number; index: IndexKey; parentId: TLParentId; isLocked: boolean; opacity: number; meta: JsonObject; id: TLShapeId; typeName: "shape"; } | undefined; // (undocumented) onDoubleClickEdge: (shape: TLTextShape) => { id: TLShapeId; type: "text"; props: { autoSize: boolean; scale?: undefined; }; } | { id: TLShapeId; type: "text"; props: { scale: number; autoSize?: undefined; }; } | undefined; // (undocumented) onEditEnd: TLOnEditEndHandler; // (undocumented) onResize: TLOnResizeHandler; // (undocumented) static props: { color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow">; size: EnumStyleProp<"l" | "m" | "s" | "xl">; font: EnumStyleProp<"draw" | "mono" | "sans" | "serif">; align: EnumStyleProp<"end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start">; w: Validator; text: Validator; scale: Validator; autoSize: Validator; }; // (undocumented) toSvg(shape: TLTextShape, ctx: SvgExportContext): JSX_2.Element; // (undocumented) static type: "text"; } // @public (undocumented) export function TextStylePickerSet({ theme, styles, }: { theme: TLDefaultColorTheme; styles: ReadonlySharedStyleMap; }): JSX_2.Element | null; // @public (undocumented) export function TextToolbarItem(): JSX_2.Element; // @public (undocumented) export type TLComponents = Expand; // @public (undocumented) export function Tldraw(props: TldrawProps): JSX_2.Element; // @public (undocumented) export const TLDRAW_FILE_EXTENSION: ".tldr"; // @public (undocumented) export interface TldrawFile { // (undocumented) records: UnknownRecord[]; // (undocumented) schema: SerializedSchema; // (undocumented) tldrawFileFormatVersion: number; } // @public (undocumented) export function TldrawHandles({ children }: TLHandlesProps): JSX_2.Element | null; // @public (undocumented) export function TldrawHoveredShapeIndicator({ shapeId }: TLHoveredShapeIndicatorProps): JSX_2.Element | null; // @public export const TldrawImage: NamedExoticComponent< { snapshot: StoreSnapshot; format?: "png" | "svg" | undefined; pageId?: TLPageId | undefined; shapeUtils?: readonly TLAnyShapeUtilConstructor[] | undefined; bounds?: Box | undefined; scale?: number | undefined; background?: boolean | undefined; padding?: number | undefined; darkMode?: boolean | undefined; preserveAspectRatio?: string | undefined; }>; // @public export type TldrawImageProps = Expand<{ snapshot: StoreSnapshot; format?: 'png' | 'svg'; pageId?: TLPageId; shapeUtils?: readonly TLAnyShapeUtilConstructor[]; } & Partial>; // @public (undocumented) export type TldrawProps = Expand<(Omit & Omit & { components?: TLComponents; }) & Partial & ({ store: TLStore | TLStoreWithStatus; } | { store?: undefined; persistenceKey?: string; sessionId?: string; defaultName?: string; snapshot?: StoreSnapshot; })>; // @public (undocumented) export function TldrawScribble({ scribble, zoom, color, opacity, className }: TLScribbleProps): JSX_2.Element | null; // @public (undocumented) export const TldrawSelectionBackground: ({ bounds, rotation }: TLSelectionBackgroundProps) => JSX_2.Element | null; // @public (undocumented) export const TldrawSelectionForeground: MemoExoticComponent<({ bounds, rotation, }: TLSelectionForegroundProps) => JSX_2.Element | null>; // @public (undocumented) export const TldrawUi: React_2.NamedExoticComponent<{ children?: ReactNode; hideUi?: boolean | undefined; components?: Partial<{ ContextMenu: null | React_2.ComponentType; ActionsMenu: null | React_2.ComponentType; HelpMenu: null | React_2.ComponentType; ZoomMenu: null | React_2.ComponentType; MainMenu: null | React_2.ComponentType; Minimap: null | React_2.ComponentType; StylePanel: null | React_2.ComponentType; PageMenu: null | React_2.ComponentType; NavigationPanel: null | React_2.ComponentType; Toolbar: null | React_2.ComponentType; KeyboardShortcutsDialog: null | React_2.ComponentType; QuickActions: null | React_2.ComponentType; HelperButtons: null | React_2.ComponentType; DebugPanel: null | React_2.ComponentType; DebugMenu: null | React_2.ComponentType; MenuPanel: null | React_2.ComponentType; TopPanel: null | React_2.ComponentType; SharePanel: null | React_2.ComponentType; }> | undefined; renderDebugMenuItems?: (() => React_2.ReactNode) | undefined; assetUrls?: (RecursivePartial & RecursivePartial) | undefined; overrides?: Partial<{ actions: TLUiOverride & { id?: string | undefined; }) => string; removeToast: (id: string) => string; clearToasts: () => void; addDialog: (dialog: Omit & { id?: string | undefined; }) => string; clearDialogs: () => void; removeDialog: (id: string) => string; updateDialog: (id: string, newDialogData: Partial) => string; msg: (id?: string | undefined) => string; isMobile: boolean; }>; tools: TLUiOverride void; } & { addToast: (toast: Omit & { id?: string | undefined; }) => string; removeToast: (id: string) => string; clearToasts: () => void; addDialog: (dialog: Omit & { id?: string | undefined; }) => string; clearDialogs: () => void; removeDialog: (id: string) => string; updateDialog: (id: string, newDialogData: Partial) => string; msg: (id?: string | undefined) => string; isMobile: boolean; }>; translations: Record> | undefined; }> | Partial<{ actions: TLUiOverride & { id?: string | undefined; }) => string; removeToast: (id: string) => string; clearToasts: () => void; addDialog: (dialog: Omit & { id?: string | undefined; }) => string; clearDialogs: () => void; removeDialog: (id: string) => string; updateDialog: (id: string, newDialogData: Partial) => string; msg: (id?: string | undefined) => string; isMobile: boolean; }>; tools: TLUiOverride void; } & { addToast: (toast: Omit & { id?: string | undefined; }) => string; removeToast: (id: string) => string; clearToasts: () => void; addDialog: (dialog: Omit & { id?: string | undefined; }) => string; clearDialogs: () => void; removeDialog: (id: string) => string; updateDialog: (id: string, newDialogData: Partial) => string; msg: (id?: string | undefined) => string; isMobile: boolean; }>; translations: Record> | undefined; }>[] | undefined; onUiEvent?: TLUiEventHandler | undefined; forceMobile?: boolean | undefined; }>; // @public export interface TldrawUiBaseProps { assetUrls?: TLUiAssetUrlOverrides; children?: ReactNode; components?: TLUiComponents; hideUi?: boolean; renderDebugMenuItems?: () => React_2.ReactNode; } // @public (undocumented) export const TldrawUiButton: React_3.ForwardRefExoticComponent>; // @public (undocumented) export function TldrawUiButtonCheck({ checked }: TLUiButtonCheckProps): JSX_2.Element; // @public (undocumented) export function TldrawUiButtonIcon({ icon, small, invertIcon }: TLUiButtonIconProps): JSX_2.Element; // @public (undocumented) export function TldrawUiButtonLabel({ children }: TLUiButtonLabelProps): JSX_2.Element; // @public (undocumented) export const TldrawUiButtonPicker: typeof _TldrawUiButtonPicker; // @public (undocumented) export function TldrawUiComponentsProvider({ overrides, children, }: TLUiComponentsProviderProps): JSX_2.Element; // @public (undocumented) export function TldrawUiContextProvider({ overrides, components, assetUrls, onUiEvent, forceMobile, children, }: TldrawUiContextProviderProps): JSX_2.Element; // @public export interface TldrawUiContextProviderProps { assetUrls?: RecursivePartial; children?: ReactNode; components?: TLUiComponents; forceMobile?: boolean; onUiEvent?: TLUiEventHandler; overrides?: TLUiOverrides | TLUiOverrides[]; } // @public (undocumented) export function TldrawUiDialogBody({ className, children, style }: TLUiDialogBodyProps): JSX_2.Element; // @public (undocumented) export function TldrawUiDialogCloseButton(): JSX_2.Element; // @public (undocumented) export function TldrawUiDialogFooter({ className, children }: TLUiDialogFooterProps): JSX_2.Element; // @public (undocumented) export function TldrawUiDialogHeader({ className, children }: TLUiDialogHeaderProps): JSX_2.Element; // @public (undocumented) export function TldrawUiDialogTitle({ className, children }: TLUiDialogTitleProps): JSX_2.Element; // @public (undocumented) export function TldrawUiDropdownMenuCheckboxItem({ children, onSelect, ...rest }: TLUiDropdownMenuCheckboxItemProps): JSX_2.Element; // @public (undocumented) export function TldrawUiDropdownMenuContent({ side, align, sideOffset, alignOffset, children, }: TLUiDropdownMenuContentProps): JSX_2.Element; // @public (undocumented) export function TldrawUiDropdownMenuGroup({ children }: TLUiDropdownMenuGroupProps): JSX_2.Element; // @public (undocumented) export function TldrawUiDropdownMenuIndicator(): JSX_2.Element; // @public (undocumented) export function TldrawUiDropdownMenuItem({ noClose, children }: TLUiDropdownMenuItemProps): JSX_2.Element; // @public (undocumented) export function TldrawUiDropdownMenuRoot({ id, children, modal, debugOpen, }: TLUiDropdownMenuRootProps): JSX_2.Element; // @public (undocumented) export function TldrawUiDropdownMenuSub({ id, children }: TLUiDropdownMenuSubProps): JSX_2.Element; // @public (undocumented) export function TldrawUiDropdownMenuSubTrigger({ id, label, title, disabled, }: TLUiDropdownMenuSubTriggerProps): JSX_2.Element; // @public (undocumented) export function TldrawUiDropdownMenuTrigger({ children, ...rest }: TLUiDropdownMenuTriggerProps): JSX_2.Element; // @public (undocumented) export const TldrawUiIcon: NamedExoticComponent; // @public (undocumented) export const TldrawUiInput: React_3.ForwardRefExoticComponent>; // @public (undocumented) export function TldrawUiKbd({ children, visibleOnMobileLayout }: TLUiKbdProps): JSX_2.Element | null; // @public (undocumented) export function TldrawUiMenuCheckboxItem({ id, kbd, label, readonlyOk, onSelect, disabled, checked, }: TLUiMenuCheckboxItemProps): JSX_2.Element | null; // @public (undocumented) export function TldrawUiMenuContextProvider({ type, sourceId, children, }: TLUiMenuContextProviderProps): JSX_2.Element; // @public (undocumented) export function TldrawUiMenuGroup({ id, label, children }: TLUiMenuGroupProps): boolean | JSX_2.Element | Iterable | null | number | string | undefined; // @public (undocumented) export function TldrawUiMenuItem({ disabled, spinner, readonlyOk, id, kbd, label, icon, onSelect, noClose, isSelected, }: TLUiMenuItemProps): JSX_2.Element | null; // @public (undocumented) export function TldrawUiMenuSubmenu({ id, disabled, label, size, children, }: TLUiMenuSubmenuProps): boolean | JSX_2.Element | Iterable | null | number | string | undefined; // @public (undocumented) export function TldrawUiPopover({ id, children, onOpenChange, open }: TLUiPopoverProps): JSX_2.Element; // @public (undocumented) export function TldrawUiPopoverContent({ side, children, align, sideOffset, alignOffset, }: TLUiPopoverContentProps): JSX_2.Element; // @public (undocumented) export function TldrawUiPopoverTrigger({ children }: TLUiPopoverTriggerProps): JSX_2.Element; // @public export type TldrawUiProps = Expand; // @internal (undocumented) export const TldrawUiSlider: NamedExoticComponent; // @public (undocumented) export interface TLUiActionItem { // (undocumented) checkbox?: boolean; // (undocumented) icon?: IconType; // (undocumented) id: string; // (undocumented) kbd?: string; // (undocumented) label?: { [key: string]: TransationKey; } | TransationKey; // (undocumented) onSelect: (source: TLUiEventSource) => Promise | void; // (undocumented) readonlyOk?: boolean; } // @public (undocumented) export type TLUiActionsContextType = Record; // @public (undocumented) export type TLUiActionsMenuProps = { children?: ReactNode; }; // @public (undocumented) export type TLUiAssetUrlOverrides = RecursivePartial; // @public (undocumented) export type TLUiButtonCheckProps = { checked: boolean; }; // @public (undocumented) export type TLUiButtonIconProps = { icon: string; small?: boolean; invertIcon?: boolean; }; // @public (undocumented) export type TLUiButtonLabelProps = { children?: ReactNode; }; // @public (undocumented) export interface TLUiButtonPickerProps { // (undocumented) items: StyleValuesForUi; // (undocumented) onValueChange: (style: StyleProp, value: T, squashing: boolean) => void; // (undocumented) style: StyleProp; // (undocumented) theme: TLDefaultColorTheme; // (undocumented) title: string; // (undocumented) uiType: string; // (undocumented) value: SharedStyle; } // @public (undocumented) export interface TLUiButtonProps extends React_3.HTMLAttributes { // (undocumented) disabled?: boolean; // (undocumented) type: 'danger' | 'help' | 'icon' | 'low' | 'menu' | 'normal' | 'primary' | 'tool'; } // @public (undocumented) export type TLUiComponents = Partial<{ [K in keyof BaseTLUiComponents]: BaseTLUiComponents[K] | null; }>; // @public (undocumented) export type TLUiComponentsProviderProps = { overrides?: TLUiComponents; children: ReactNode; }; // @public (undocumented) export interface TLUiContextMenuProps { // (undocumented) children?: ReactNode; } // @public (undocumented) export type TLUiDebugMenuProps = { children?: ReactNode; }; // @public (undocumented) export interface TLUiDialog { // (undocumented) component: ComponentType; // (undocumented) id: string; // (undocumented) onClose?: () => void; } // @public (undocumented) export type TLUiDialogBodyProps = { className?: string; children: ReactNode; style?: React.CSSProperties; }; // @public (undocumented) export type TLUiDialogFooterProps = { className?: string; children: ReactNode; }; // @public (undocumented) export type TLUiDialogHeaderProps = { className?: string; children: ReactNode; }; // @public (undocumented) export interface TLUiDialogProps { // (undocumented) onClose: () => void; } // @public (undocumented) export type TLUiDialogsContextType = { addDialog: (dialog: Omit & { id?: string; }) => string; removeDialog: (id: string) => string; updateDialog: (id: string, newDialogData: Partial) => string; clearDialogs: () => void; dialogs: TLUiDialog[]; }; // @public (undocumented) export type TLUiDialogTitleProps = { className?: string; children: ReactNode; }; // @public (undocumented) export interface TLUiDropdownMenuCheckboxItemProps { // (undocumented) checked?: boolean; // (undocumented) children: ReactNode; // (undocumented) disabled?: boolean; // (undocumented) onSelect?: (e: Event) => void; // (undocumented) title: string; } // @public (undocumented) export type TLUiDropdownMenuContentProps = { id?: string; children: ReactNode; alignOffset?: number; sideOffset?: number; align?: 'center' | 'end' | 'start'; side?: 'bottom' | 'left' | 'right' | 'top'; }; // @public (undocumented) export type TLUiDropdownMenuGroupProps = { children: ReactNode; }; // @public (undocumented) export interface TLUiDropdownMenuItemProps { // (undocumented) children: ReactNode; // (undocumented) noClose?: boolean; } // @public (undocumented) export type TLUiDropdownMenuRootProps = { id: string; children: ReactNode; modal?: boolean; debugOpen?: boolean; }; // @public (undocumented) export type TLUiDropdownMenuSubProps = { id: string; children: ReactNode; }; // @public (undocumented) export type TLUiDropdownMenuSubTriggerProps = { label: string; id?: string; title?: string; disabled?: boolean; }; // @public (undocumented) export interface TLUiDropdownMenuTriggerProps { // (undocumented) children?: ReactNode; } // @public (undocumented) export type TLUiEventContextType = TLUiEventHandler; // @public (undocumented) export type TLUiEventHandler = (name: T, data: Join<{ source: TLUiEventSource; }, TLUiEventMap[T]>) => void; // @public (undocumented) export interface TLUiEventMap { // (undocumented) 'align-shapes': { operation: 'bottom' | 'center-horizontal' | 'center-vertical' | 'left' | 'right' | 'top'; }; // (undocumented) 'change-language': { locale: string; }; // (undocumented) 'close-menu': { id: string; }; // (undocumented) 'convert-to-bookmark': null; // (undocumented) 'convert-to-embed': null; // (undocumented) 'copy-as': { format: 'json' | 'png' | 'svg'; }; // (undocumented) 'create-new-project': null; // (undocumented) 'delete-shapes': null; // (undocumented) 'distribute-shapes': { operation: 'horizontal' | 'vertical'; }; // (undocumented) 'duplicate-shapes': null; // (undocumented) 'edit-link': null; // (undocumented) 'exit-pen-mode': null; // (undocumented) 'export-all-as': { format: 'json' | 'png' | 'svg'; }; // (undocumented) 'export-as': { format: 'json' | 'png' | 'svg'; }; // (undocumented) 'fit-frame-to-content': null; // (undocumented) 'flip-shapes': { operation: 'horizontal' | 'vertical'; }; // (undocumented) 'group-shapes': null; // (undocumented) 'insert-embed': null; // (undocumented) 'insert-media': null; // (undocumented) 'move-to-page': null; // (undocumented) 'new-page': null; // (undocumented) 'open-cursor-chat': null; // (undocumented) 'open-embed-link': null; // (undocumented) 'open-file': null; // (undocumented) 'open-menu': { id: string; }; // (undocumented) 'pack-shapes': null; // (undocumented) 'remove-frame': null; // (undocumented) 'reorder-shapes': { operation: 'backward' | 'forward' | 'toBack' | 'toFront'; }; // (undocumented) 'reset-zoom': null; // (undocumented) 'rotate-ccw': null; // (undocumented) 'rotate-cw': null; // (undocumented) 'save-project-to-file': null; // (undocumented) 'select-all-shapes': null; // (undocumented) 'select-none-shapes': null; // (undocumented) 'select-tool': { id: string; }; // (undocumented) 'set-style': { id: string; value: number | string; }; // (undocumented) 'stack-shapes': { operation: 'horizontal' | 'vertical'; }; // (undocumented) 'stop-following': null; // (undocumented) 'stretch-shapes': { operation: 'horizontal' | 'vertical'; }; // (undocumented) 'toggle-auto-size': null; // (undocumented) 'toggle-dark-mode': null; // (undocumented) 'toggle-debug-mode': null; // (undocumented) 'toggle-edge-scrolling': null; // (undocumented) 'toggle-focus-mode': null; // (undocumented) 'toggle-grid-mode': null; // (undocumented) 'toggle-lock': null; // (undocumented) 'toggle-reduce-motion': null; // (undocumented) 'toggle-snap-mode': null; // (undocumented) 'toggle-tool-lock': null; // (undocumented) 'toggle-transparent': null; // (undocumented) 'toggle-wrap-mode': null; // (undocumented) 'ungroup-shapes': null; // (undocumented) 'unlock-all': null; // (undocumented) 'zoom-in': null; // (undocumented) 'zoom-into-view': null; // (undocumented) 'zoom-out': null; // (undocumented) 'zoom-to-content': null; // (undocumented) 'zoom-to-fit': null; // (undocumented) 'zoom-to-selection': null; // (undocumented) 'zoom-tool': null; // (undocumented) copy: null; // (undocumented) cut: null; // (undocumented) paste: null; // (undocumented) print: null; // (undocumented) redo: null; // (undocumented) undo: null; } // @public (undocumented) export type TLUiEventSource = 'actions-menu' | 'context-menu' | 'debug-panel' | 'dialog' | 'document-name' | 'export-menu' | 'help-menu' | 'helper-buttons' | 'kbd' | 'main-menu' | 'menu' | 'navigation-zone' | 'page-menu' | 'people-menu' | 'quick-actions' | 'share-menu' | 'style-panel' | 'toolbar' | 'unknown' | 'zoom-menu'; // @public (undocumented) export type TLUiHelperButtonsProps = { children?: ReactNode; }; // @public (undocumented) export type TLUiHelpMenuProps = { children?: ReactNode; }; // @public (undocumented) export interface TLUiIconProps extends React.HTMLProps { // (undocumented) children?: undefined; // (undocumented) color?: string; // (undocumented) crossOrigin?: 'anonymous' | 'use-credentials'; // (undocumented) icon: Exclude | TLUiIconType; // (undocumented) invertIcon?: boolean; // (undocumented) small?: boolean; } // @public (undocumented) export type TLUiIconType = 'align-bottom-center' | 'align-bottom-left' | 'align-bottom-right' | 'align-bottom' | 'align-center-center' | 'align-center-horizontal' | 'align-center-left' | 'align-center-right' | 'align-center-vertical' | 'align-left' | 'align-right' | 'align-top-center' | 'align-top-left' | 'align-top-right' | 'align-top' | 'arrow-left' | 'arrowhead-arrow' | 'arrowhead-bar' | 'arrowhead-diamond' | 'arrowhead-dot' | 'arrowhead-none' | 'arrowhead-square' | 'arrowhead-triangle-inverted' | 'arrowhead-triangle' | 'aspect-ratio' | 'avatar' | 'blob' | 'bring-forward' | 'bring-to-front' | 'check-circle' | 'check' | 'checkbox-checked' | 'checkbox-empty' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'chevrons-ne' | 'chevrons-sw' | 'clipboard-copied' | 'clipboard-copy' | 'code' | 'collab' | 'color' | 'comment' | 'cross-2' | 'cross-circle' | 'cross' | 'dash-dashed' | 'dash-dotted' | 'dash-draw' | 'dash-solid' | 'discord' | 'distribute-horizontal' | 'distribute-vertical' | 'dot' | 'dots-horizontal' | 'dots-vertical' | 'drag-handle-dots' | 'duplicate' | 'edit' | 'error' | 'external-link' | 'file' | '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-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' | 'hidden' | 'image' | 'info-circle' | 'leading' | 'link' | 'lock-small' | 'lock' | 'menu' | 'minus' | 'mixed' | 'pack' | 'page' | 'plus' | 'question-mark-circle' | 'question-mark' | 'redo' | 'reset-zoom' | 'rotate-ccw' | 'rotate-cw' | 'ruler' | 'search' | 'send-backward' | 'send-to-back' | 'settings-horizontal' | 'settings-vertical-1' | 'settings-vertical' | 'share-1' | 'share-2' | 'size-extra-large' | 'size-large' | 'size-medium' | 'size-small' | 'spline-cubic' | 'spline-line' | 'stack-horizontal' | 'stack-vertical' | 'status-offline' | 'status-online' | 'stretch-horizontal' | 'stretch-vertical' | 'text-align-center' | 'text-align-justify' | 'text-align-left' | 'text-align-right' | 'tool-arrow' | 'tool-embed' | 'tool-eraser' | 'tool-frame' | 'tool-hand' | 'tool-highlight' | 'tool-laser' | 'tool-line' | 'tool-media' | 'tool-note' | 'tool-pencil' | 'tool-pointer' | 'tool-text' | 'trash' | 'triangle-down' | 'triangle-up' | 'twitter' | 'undo' | 'ungroup' | 'unlock-small' | 'unlock' | 'vertical-align-center' | 'vertical-align-end' | 'vertical-align-start' | 'visible' | 'warning-triangle' | 'zoom-in' | 'zoom-out'; // @public (undocumented) export interface TLUiInputProps { // (undocumented) autofocus?: boolean; // (undocumented) autoselect?: boolean; // (undocumented) children?: React_3.ReactNode; // (undocumented) className?: string; // (undocumented) defaultValue?: string; // (undocumented) disabled?: boolean; // (undocumented) icon?: Exclude | TLUiIconType; // (undocumented) iconLeft?: Exclude | TLUiIconType; // (undocumented) label?: Exclude | TLUiTranslationKey; // (undocumented) onBlur?: (value: string) => void; // (undocumented) onCancel?: (value: string) => void; // (undocumented) onComplete?: (value: string) => void; // (undocumented) onValueChange?: (value: string) => void; // (undocumented) placeholder?: string; shouldManuallyMaintainScrollPositionWhenFocused?: boolean; // (undocumented) value?: string; } // @public (undocumented) export interface TLUiKbdProps { // (undocumented) children: string; // (undocumented) visibleOnMobileLayout?: boolean; } // @public (undocumented) export type TLUiKeyboardShortcutsDialogProps = TLUiDialogProps & { children?: ReactNode; }; // @public (undocumented) export type TLUiMainMenuProps = { children?: ReactNode; }; // @public (undocumented) export type TLUiMenuCheckboxItemProps = { icon?: IconType; id: string; kbd?: string; title?: string; label?: { [key: string]: TranslationKey; } | TranslationKey; readonlyOk?: boolean; onSelect: (source: TLUiEventSource) => Promise | void; checked?: boolean; disabled?: boolean; }; // @public (undocumented) export type TLUiMenuContextProviderProps = { type: TldrawUiMenuContextType; sourceId: TLUiEventSource; children: React.ReactNode; }; // @public (undocumented) export type TLUiMenuGroupProps = { id: string; label?: { [key: string]: TranslationKey; } | TranslationKey; children?: ReactNode; }; // @public (undocumented) export type TLUiMenuItemProps = { id: string; icon?: IconType; kbd?: string; label?: { [key: string]: TranslationKey; } | TranslationKey; readonlyOk?: boolean; onSelect: (source: TLUiEventSource) => Promise | void; disabled?: boolean; noClose?: boolean; spinner?: boolean; isSelected?: boolean; }; // @public (undocumented) export type TLUiMenuSubmenuProps = { id: string; label?: { [key: string]: Translation; } | Translation; disabled?: boolean; children: ReactNode; size?: 'medium' | 'small' | 'tiny' | 'wide'; }; // @public (undocumented) export type TLUiOverrides = Partial<{ actions: WithDefaultHelpers>; tools: WithDefaultHelpers>; translations: TLUiTranslationProviderProps['overrides']; }>; // @public (undocumented) export type TLUiPopoverContentProps = { children: React_2.ReactNode; side: 'bottom' | 'left' | 'right' | 'top'; align?: 'center' | 'end' | 'start'; alignOffset?: number; sideOffset?: number; }; // @public (undocumented) export type TLUiPopoverProps = { id: string; open?: boolean; children: React_2.ReactNode; onOpenChange?: (isOpen: boolean) => void; }; // @public (undocumented) export interface TLUiPopoverTriggerProps { // (undocumented) children?: React_2.ReactNode; } // @public (undocumented) export type TLUiQuickActionsProps = { children?: ReactNode; }; // @internal (undocumented) export interface TLUiSliderProps { // (undocumented) 'data-testid'?: string; // (undocumented) label: string; // (undocumented) onValueChange: (value: number, squashing: boolean) => void; // (undocumented) steps: number; // (undocumented) title: string; // (undocumented) value: null | number; } // @public (undocumented) export type TLUiStylePanelContentProps = { styles: ReturnType; }; // @public (undocumented) export interface TLUiStylePanelProps { // (undocumented) children?: ReactNode; // (undocumented) isMobile?: boolean; } // @public (undocumented) export interface TLUiToast { // (undocumented) actions?: TLUiToastAction[]; // (undocumented) closeLabel?: string; // (undocumented) description?: string; // (undocumented) icon?: TLUiIconType; // (undocumented) id: string; // (undocumented) keepOpen?: boolean; // (undocumented) severity?: AlertSeverity; // (undocumented) title?: string; } // @public (undocumented) export interface TLUiToastAction { // (undocumented) label: string; // (undocumented) onClick: () => void; // (undocumented) type: 'danger' | 'normal' | 'primary'; } // @public (undocumented) export type TLUiToastsContextType = { addToast: (toast: Omit & { id?: string; }) => string; removeToast: (id: TLUiToast['id']) => string; clearToasts: () => void; toasts: TLUiToast[]; }; // @public (undocumented) export interface TLUiToolItem { // (undocumented) icon: IconType; // (undocumented) id: string; // (undocumented) kbd?: string; // (undocumented) label: TranslationKey; // (undocumented) meta?: { [key: string]: any; }; // (undocumented) onSelect: (source: TLUiEventSource) => void; // (undocumented) readonlyOk?: boolean; // (undocumented) shortcutsLabel?: TranslationKey; } // @public (undocumented) export type TLUiToolsContextType = Record; // @public (undocumented) export type TLUiToolsProviderProps = { overrides?: (editor: Editor, tools: TLUiToolsContextType, helpers: { insertMedia: () => void; }) => TLUiToolsContextType; children: React_3.ReactNode; }; // @public (undocumented) export type TLUiTranslation = { readonly locale: string; readonly label: string; readonly messages: Record; }; // @public (undocumented) export type TLUiTranslationContextType = TLUiTranslation; // @public (undocumented) export type TLUiTranslationKey = 'action.align-bottom' | 'action.align-center-horizontal.short' | 'action.align-center-horizontal' | 'action.align-center-vertical.short' | 'action.align-center-vertical' | 'action.align-left' | 'action.align-right' | 'action.align-top' | 'action.back-to-content' | 'action.bring-forward' | 'action.bring-to-front' | 'action.convert-to-bookmark' | 'action.convert-to-embed' | 'action.copy-as-json.short' | 'action.copy-as-json' | 'action.copy-as-png.short' | 'action.copy-as-png' | 'action.copy-as-svg.short' | 'action.copy-as-svg' | 'action.copy' | 'action.cut' | 'action.delete' | 'action.distribute-horizontal.short' | 'action.distribute-horizontal' | 'action.distribute-vertical.short' | 'action.distribute-vertical' | 'action.duplicate' | 'action.edit-link' | 'action.exit-pen-mode' | 'action.export-all-as-json.short' | 'action.export-all-as-json' | '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-json.short' | 'action.export-as-json' | 'action.export-as-png.short' | 'action.export-as-png' | 'action.export-as-svg.short' | 'action.export-as-svg' | 'action.fit-frame-to-content' | 'action.flip-horizontal.short' | 'action.flip-horizontal' | 'action.flip-vertical.short' | 'action.flip-vertical' | '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.pack' | '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.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-size' | 'action.toggle-dark-mode.menu' | 'action.toggle-dark-mode' | 'action.toggle-debug-mode.menu' | 'action.toggle-debug-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-lock' | '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-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-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' | '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.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.export-all-as' | 'context-menu.export-as' | 'context-menu.move-to-page' | 'context-menu.reorder' | 'context.pages.new-page' | 'cursor-chat.type-to-chat' | 'dash-style.dashed' | 'dash-style.dotted' | 'dash-style.draw' | 'dash-style.solid' | 'debug-panel.more' | 'document.default-name' | 'edit-link-dialog.cancel' | 'edit-link-dialog.clear' | 'edit-link-dialog.detail' | 'edit-link-dialog.invalid-url' | 'edit-link-dialog.save' | 'edit-link-dialog.title' | 'edit-link-dialog.url' | 'edit-pages-dialog.move-down' | 'edit-pages-dialog.move-up' | '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.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.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' | 'help-menu.about' | 'help-menu.discord' | 'help-menu.github' | 'help-menu.keyboard-shortcuts' | 'help-menu.title' | 'help-menu.twitter' | 'home-project-dialog.description' | 'home-project-dialog.ok' | 'home-project-dialog.title' | 'menu.copy-as' | 'menu.edit' | 'menu.export-as' | 'menu.file' | 'menu.language' | 'menu.preferences' | 'menu.title' | 'menu.view' | '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.change-color' | 'people-menu.change-name' | 'people-menu.follow' | 'people-menu.following' | 'people-menu.invite' | 'people-menu.leading' | 'people-menu.title' | 'people-menu.user' | 'rename-project-dialog.cancel' | 'rename-project-dialog.rename' | 'rename-project-dialog.title' | '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.default-project-name' | 'share-menu.fork-note' | 'share-menu.offline-note' | 'share-menu.project-too-large' | 'share-menu.readonly-link' | '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.collaboration' | 'shortcuts-dialog.edit' | 'shortcuts-dialog.file' | 'shortcuts-dialog.preferences' | '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' | 'status.online' | 'style-panel.align' | '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.mixed' | 'style-panel.opacity' | 'style-panel.position' | 'style-panel.size' | 'style-panel.spline' | 'style-panel.title' | 'style-panel.vertical-align' | 'toast.close' | 'toast.error.copy-fail.desc' | 'toast.error.copy-fail.title' | 'toast.error.export-fail.desc' | 'toast.error.export-fail.title' | 'tool-panel.drawing' | 'tool-panel.more' | 'tool-panel.shapes' | 'tool.arrow-down' | 'tool.arrow-left' | 'tool.arrow-right' | 'tool.arrow-up' | 'tool.arrow' | 'tool.asset' | 'tool.check-box' | 'tool.cloud' | 'tool.diamond' | 'tool.draw' | 'tool.ellipse' | 'tool.embed' | 'tool.eraser' | 'tool.frame' | 'tool.hand' | 'tool.hexagon' | 'tool.highlight' | 'tool.laser' | 'tool.line' | 'tool.note' | 'tool.octagon' | 'tool.oval' | 'tool.pentagon' | 'tool.rectangle' | 'tool.rhombus' | 'tool.select' | 'tool.star' | 'tool.text' | 'tool.trapezoid' | 'tool.triangle' | 'tool.x-box' | '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 (undocumented) export type TLUiZoomMenuProps = { children?: ReactNode; }; // @public (undocumented) export function ToggleAutoSizeMenuItem(): JSX_2.Element | null; // @public (undocumented) export function ToggleDarkModeItem(): JSX_2.Element; // @public (undocumented) export function ToggleDebugModeItem(): JSX_2.Element; // @public (undocumented) export function ToggleEdgeScrollingItem(): JSX_2.Element; // @public (undocumented) export function ToggleFocusModeItem(): JSX_2.Element; // @public (undocumented) export function ToggleGridItem(): JSX_2.Element; // @public (undocumented) export function ToggleLockMenuItem(): JSX_2.Element | null; // @public (undocumented) export function ToggleReduceMotionItem(): JSX_2.Element; // @public (undocumented) export function ToggleSnapModeItem(): JSX_2.Element; // @public (undocumented) export function ToggleToolLockItem(): JSX_2.Element; // @public (undocumented) export function ToggleTransparentBgMenuItem(): JSX_2.Element; // @public (undocumented) export function ToggleWrapModeItem(): JSX_2.Element; // @public (undocumented) export function TrapezoidToolbarItem(): JSX_2.Element; // @public (undocumented) export function TriangleToolbarItem(): JSX_2.Element; // @public (undocumented) export const truncateStringWithEllipsis: (str: string, maxLength: number) => string; // @public (undocumented) export function UiEventsProvider({ onEvent, children }: EventsProviderProps): JSX_2.Element; // @public (undocumented) export function UndoRedoGroup(): JSX_2.Element; // @public (undocumented) export function UngroupMenuItem(): JSX_2.Element | null; // @public (undocumented) export function UnlockAllMenuItem(): JSX_2.Element; // @public (undocumented) export function unwrapLabel(label?: TLUiActionItem['label'], menuType?: string): string | undefined; // @public (undocumented) export function useActions(): TLUiActionsContextType; // @internal (undocumented) export function useAssetUrls(): TLUiAssetUrls; // @public (undocumented) export function useBreakpoint(): number; // @public (undocumented) export function useCanRedo(): boolean; // @public (undocumented) export function useCanUndo(): boolean; // @public (undocumented) export function useCopyAs(): (ids: TLShapeId[], format?: TLCopyType) => void; // @public (undocumented) export function useDefaultHelpers(): { addToast: (toast: Omit & { id?: string | undefined; }) => string; removeToast: (id: string) => string; clearToasts: () => void; addDialog: (dialog: Omit & { id?: string | undefined; }) => string; clearDialogs: () => void; removeDialog: (id: string) => string; updateDialog: (id: string, newDialogData: Partial) => string; msg: (id?: string | undefined) => string; isMobile: boolean; }; // @public (undocumented) export function useDialogs(): TLUiDialogsContextType; // @public (undocumented) export function useEditableText(id: TLShapeId, type: string, text: string): { rInput: React_2.RefObject; isEditing: boolean; handleFocus: () => void; handleBlur: () => void; handleKeyDown: (e: React_2.KeyboardEvent) => void; handleChange: (e: React_2.ChangeEvent) => void; handleInputPointerDown: (e: React_2.PointerEvent) => void; handleDoubleClick: (e: any) => any; isEmpty: boolean; }; // @public (undocumented) export function useExportAs(): (ids: TLShapeId[], format: TLExportType | undefined, name: string | undefined) => void; // @public (undocumented) export function useIsToolSelected(tool: TLUiToolItem): boolean; // @public (undocumented) export function useKeyboardShortcuts(): void; // @public (undocumented) export function useLocalStorageState(key: string, defaultValue: T): readonly [T, (setter: ((value: T) => T) | T) => void]; // @public (undocumented) export function useMenuClipboardEvents(): { copy: (source: TLUiEventSource) => void; cut: (source: TLUiEventSource) => void; paste: (data: ClipboardItem[] | DataTransfer, source: TLUiEventSource, point?: VecLike) => Promise; }; // @public (undocumented) export function useMenuIsOpen(id: string, cb?: (isOpen: boolean) => void): readonly [boolean, (isOpen: boolean) => void]; // @public (undocumented) export function useNativeClipboardEvents(): void; // @public (undocumented) export function useReadonly(): boolean; // @public (undocumented) export function useRelevantStyles(stylesToCheck?: readonly StyleProp[]): null | ReadonlySharedStyleMap; // @public (undocumented) export function useTldrawUiComponents(): Partial<{ 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; KeyboardShortcutsDialog: ComponentType | null; QuickActions: ComponentType | null; HelperButtons: ComponentType | null; DebugPanel: ComponentType | null; DebugMenu: ComponentType | null; MenuPanel: ComponentType | null; TopPanel: ComponentType | null; SharePanel: ComponentType | null; }>; // @public (undocumented) export function useToasts(): TLUiToastsContextType; // @public (undocumented) export function useTools(): TLUiToolsContextType; // @public export function useTranslation(): (id?: Exclude | string) => string; // @public (undocumented) export function useUiEvents(): TLUiEventContextType; // @public (undocumented) export class VideoShapeUtil extends BaseBoxShapeUtil { // (undocumented) canEdit: () => boolean; // (undocumented) component(shape: TLVideoShape): JSX_2.Element; // (undocumented) getDefaultProps(): TLVideoShape['props']; // (undocumented) indicator(shape: TLVideoShape): JSX_2.Element; // (undocumented) isAspectRatioLocked: () => boolean; // (undocumented) static migrations: Migrations; // (undocumented) static props: { w: Validator; h: Validator; time: Validator; playing: Validator; url: Validator; assetId: Validator; }; // (undocumented) toSvg(shape: TLVideoShape): JSX_2.Element; // (undocumented) static type: "video"; } // @public (undocumented) export function ViewSubmenu(): JSX_2.Element; // @public (undocumented) export function XBoxToolbarItem(): JSX_2.Element; // @public (undocumented) export function ZoomOrRotateMenuItem(): JSX_2.Element; // @public (undocumented) export function ZoomTo100MenuItem(): JSX_2.Element; // @public (undocumented) export function ZoomToFitMenuItem(): JSX_2.Element; // @public (undocumented) export class ZoomTool extends StateNode { // (undocumented) static children: () => (typeof Idle_12 | typeof Pointing_8 | typeof ZoomBrushing)[]; // (undocumented) static id: string; // (undocumented) info: TLPointerEventInfo & { onInteractionEnd?: string | undefined; }; // (undocumented) static initial: string; // (undocumented) onEnter: (info: TLPointerEventInfo & { onInteractionEnd: string; }) => void; // (undocumented) onExit: () => void; // (undocumented) onInterrupt: TLInterruptEvent; // (undocumented) onKeyDown: TLKeyboardEvent | undefined; // (undocumented) onKeyUp: TLKeyboardEvent; } // @public (undocumented) export function ZoomToSelectionMenuItem(): JSX_2.Element; export * from "@tldraw/editor"; // (No @packageDocumentation comment for this package) ```