## API Report File for "@tldraw/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 { Box2d } from '@tldraw/editor'; import { Circle2d } from '@tldraw/editor'; 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 { Geometry2d } from '@tldraw/editor'; import { Group2d } from '@tldraw/editor'; import { JsonObject } from '@tldraw/editor'; import { LANGUAGES } from '@tldraw/editor'; import { Matrix2d } from '@tldraw/editor'; import { Matrix2dModel } from '@tldraw/editor'; 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 { 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 { SnapPoint } from '@tldraw/editor'; import { StateNode } from '@tldraw/editor'; import { StoreSnapshot } from '@tldraw/editor'; import { SvgExportContext } 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 { TLDefaultSizeStyle } from '@tldraw/editor'; import { TldrawEditorBaseProps } from '@tldraw/editor'; import { TLDrawShape } from '@tldraw/editor'; import { TLDrawShapeSegment } 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 { TLHandlesComponent } from '@tldraw/editor'; import { TLHighlightShape } from '@tldraw/editor'; import { TLHoveredShapeIndicatorComponent } from '@tldraw/editor'; import { TLImageShape } from '@tldraw/editor'; import { TLInterruptEvent } from '@tldraw/editor'; import { TLKeyboardEvent } from '@tldraw/editor'; import { TLKeyboardEventInfo } from '@tldraw/editor'; import { TLLanguage } 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 { TLOnHandleChangeHandler } from '@tldraw/editor'; import { TLOnResizeEndHandler } from '@tldraw/editor'; import { TLOnResizeHandler } from '@tldraw/editor'; import { TLOnTranslateStartHandler } 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 { TLScribbleComponent } from '@tldraw/editor'; import { TLSelectionBackgroundComponent } from '@tldraw/editor'; import { TLSelectionForegroundComponent } 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 { TLTickEventHandler } 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 { Vec2d } from '@tldraw/editor'; import { Vec2dModel } from '@tldraw/editor'; import { VecLike } from '@tldraw/editor'; // @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.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.Element | null; // (undocumented) static migrations: Migrations; // (undocumented) onDoubleClickHandle: (shape: TLArrowShape, handle: TLHandle) => TLShapePartial | void; // (undocumented) onEditEnd: TLOnEditEndHandler; // (undocumented) onHandleChange: TLOnHandleChangeHandler; // (undocumented) onResize: TLOnResizeHandler; // (undocumented) onTranslateStart: TLOnTranslateStartHandler; // (undocumented) static props: { labelColor: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow">; color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "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: Vec2dModel; isExact: boolean; isPrecise: boolean; }>; point: ObjectValidator< { type: "point"; x: number; y: number; }>; }, never>; end: UnionValidator<"type", { binding: ObjectValidator< { type: "binding"; boundShapeId: TLShapeId; normalizedAnchor: Vec2dModel; isExact: boolean; isPrecise: boolean; }>; point: ObjectValidator< { type: "point"; x: number; y: number; }>; }, never>; bend: Validator; text: Validator; }; // (undocumented) toSvg(shape: TLArrowShape, ctx: SvgExportContext): SVGGElement; // (undocumented) static type: "arrow"; } // @internal (undocumented) export function AssetUrlsProvider({ assetUrls, children, }: { assetUrls: TLUiAssetUrls; children: React.ReactNode; }): JSX.Element; // @public (undocumented) function Body_2({ className, children, style, }: { className?: string; children: any; style?: React.CSSProperties; }): JSX.Element; // @public (undocumented) export class BookmarkShapeUtil extends BaseBoxShapeUtil { // (undocumented) canResize: () => boolean; // (undocumented) component(shape: TLBookmarkShape): JSX.Element; // (undocumented) getDefaultProps(): TLBookmarkShape['props']; // (undocumented) hideSelectionBoundsFg: () => boolean; // (undocumented) indicator(shape: TLBookmarkShape): JSX.Element; // (undocumented) static migrations: Migrations; // (undocumented) onBeforeCreate?: TLOnBeforeCreateHandler; // (undocumented) onBeforeUpdate?: TLOnBeforeUpdateHandler; // (undocumented) static props: { w: Validator; h: Validator; assetId: Validator; url: Validator; }; // (undocumented) static type: "bookmark"; } // @public (undocumented) export function BreakPointProvider({ forceMobile, children, }: { forceMobile?: boolean; children: any; }): JSX.Element; // @internal (undocumented) export function buildFromV1Document(editor: Editor, document: LegacyTldrawDocument): void; // @public (undocumented) export const Button: React_3.ForwardRefExoticComponent>; // @public (undocumented) function CheckboxItem({ children, onSelect, ...rest }: DropdownMenuCheckboxItemProps): JSX.Element; // @public (undocumented) function CloseButton(): JSX.Element; // @public (undocumented) export function compactMenuItems(arr: T[]): Exclude[]; // @public export function containBoxSize(originalSize: BoxWidthHeight, containBoxSize: BoxWidthHeight): BoxWidthHeight; // @public (undocumented) function Content({ side, align, sideOffset, alignOffset, children, }: { children: any; alignOffset?: number; sideOffset?: number; align?: 'center' | 'end' | 'start'; side?: 'bottom' | 'left' | 'right' | 'top'; }): JSX.Element; // @public (undocumented) export const ContextMenu: ({ children }: { children: any; }) => JSX.Element; // @public export function copyAs(editor: Editor, ids: TLShapeId[], format?: TLCopyType, opts?: Partial): Promise; // @public (undocumented) export const DEFAULT_ACCEPTED_IMG_TYPE: string[]; // @public (undocumented) export const DEFAULT_ACCEPTED_VID_TYPE: string[]; // @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 defaultTools: (typeof EraserTool | typeof HandTool | typeof LaserTool | typeof SelectTool | typeof ZoomTool)[]; declare namespace Dialog { export { Header, Title, CloseButton, Body_2 as Body, Footer } } export { Dialog } // @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.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.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" | "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: Vec2dModel[]; }>; isComplete: Validator; isClosed: Validator; isPen: Validator; }; // (undocumented) toSvg(shape: TLDrawShape, ctx: SvgExportContext): SVGGElement; // (undocumented) static type: "draw"; } declare namespace DropdownMenu { export { Root, Trigger, Content, Sub, SubTrigger, SubContent, Group, Indicator, Item, CheckboxItem, RadioItem, DropdownMenuItemProps, DropdownMenuCheckboxItemProps } } export { DropdownMenu } // @public (undocumented) interface DropdownMenuCheckboxItemProps { // (undocumented) checked?: boolean; // (undocumented) children: any; // (undocumented) disabled?: boolean; // (undocumented) onSelect?: (e: Event) => void; // (undocumented) title: string; } // @public (undocumented) interface DropdownMenuItemProps extends TLUiButtonProps { // (undocumented) noClose?: boolean; } // @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.Element; // (undocumented) getDefaultProps(): TLEmbedShape['props']; // (undocumented) hideSelectionBoundsFg: TLShapeUtilFlag; // (undocumented) indicator(shape: TLEmbedShape): JSX.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 type EventsProviderProps = { onEvent?: TLUiEventHandler; children: any; }; // @public export function exportAs(editor: Editor, ids: TLShapeId[], format?: TLExportType, opts?: Partial): Promise; // @public (undocumented) export function findMenuItem(menu: TLUiMenuSchema, path: string[]): TLUiCustomMenuItem | TLUiMenuGroup | TLUiMenuItem | TLUiSubMenu; // @public export function fitFrameToContent(editor: Editor, id: TLShapeId, opts?: { padding: number; }): void; // @public (undocumented) function Footer({ className, children }: { className?: string; children: any; }): JSX.Element; // @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.Element; // (undocumented) getDefaultProps(): TLFrameShape['props']; // (undocumented) getGeometry(shape: TLFrameShape): Geometry2d; // (undocumented) indicator(shape: TLFrameShape): JSX.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): Promise | SVGElement; // (undocumented) static type: "frame"; } // @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.Element; // (undocumented) getCanvasSvgDefs(): TLShapeUtilCanvasSvgDef[]; // (undocumented) getDefaultProps(): TLGeoShape['props']; // (undocumented) getGeometry(shape: TLGeoShape): Geometry2d; // (undocumented) indicator(shape: TLGeoShape): JSX.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" | "yellow"; color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "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: string; 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" | "yellow"; color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "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: string; 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: string; parentId: TLParentId; isLocked: boolean; opacity: number; meta: JsonObject; id: TLShapeId; typeName: "shape"; } | { props: { geo: "rectangle"; }; type: "geo"; x: number; y: number; rotation: number; index: string; 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" | "yellow">; color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "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): SVGElement; // (undocumented) static type: "geo"; } // @public export function getEmbedInfo(inputUrl: string): TLEmbedResult; // @public export function getResizedImageDataUrl(dataURLForImage: string, width: number, height: number, opts?: { type?: string | undefined; quality?: number | undefined; }): Promise; // @public (undocumented) export function getSvgAsImage(svg: SVGElement, isSafari: boolean, options: { type: 'jpeg' | 'png' | 'svg' | 'webp'; quality: number; scale: number; }): Promise; // @public (undocumented) function Group({ children, size, }: { children: any; size?: 'medium' | 'small' | 'tiny' | 'wide'; }): JSX.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) function Header({ className, children }: { className?: string; children: any; }): JSX.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.Element; // (undocumented) component(shape: TLHighlightShape): JSX.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.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" | "yellow">; size: EnumStyleProp<"l" | "m" | "s" | "xl">; segments: ArrayOfValidator< { type: "free" | "straight"; points: Vec2dModel[]; }>; isComplete: Validator; isPen: Validator; }; // (undocumented) toBackgroundSvg(shape: TLHighlightShape): SVGPathElement; // (undocumented) toSvg(shape: TLHighlightShape): SVGPathElement; // (undocumented) static type: "highlight"; } // @public (undocumented) export const Icon: NamedExoticComponent; // @public (undocumented) export class ImageShapeUtil extends BaseBoxShapeUtil { // (undocumented) canCrop: () => boolean; // (undocumented) component(shape: TLImageShape): JSX.Element; // (undocumented) getDefaultProps(): TLImageShape['props']; // (undocumented) indicator(shape: TLImageShape): JSX.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: Vec2dModel; bottomRight: Vec2dModel; } | null>; }; // (undocumented) toSvg(shape: TLImageShape): Promise; // (undocumented) static type: "image"; } // @public (undocumented) function Indicator(): JSX.Element; // @public (undocumented) export const Input: React_3.ForwardRefExoticComponent>; // @public (undocumented) export function isGifAnimated(file: File): Promise; // @public (undocumented) function Item({ noClose, ...props }: DropdownMenuItemProps): JSX.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; } // @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.Element | undefined; // (undocumented) getDefaultProps(): TLLineShape['props']; // (undocumented) getGeometry(shape: TLLineShape): CubicSpline2d | Polyline2d; // (undocumented) getHandles(shape: TLLineShape): TLHandle[]; // (undocumented) getOutlineSegments(shape: TLLineShape): Vec2d[][]; // (undocumented) hideResizeHandles: () => boolean; // (undocumented) hideRotateHandle: () => boolean; // (undocumented) hideSelectionBoundsBg: () => boolean; // (undocumented) hideSelectionBoundsFg: () => boolean; // (undocumented) indicator(shape: TLLineShape): JSX.Element; // (undocumented) static migrations: Migrations; // (undocumented) onHandleChange: TLOnHandleChangeHandler; // (undocumented) onResize: TLOnResizeHandler; // (undocumented) static props: { color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow">; dash: EnumStyleProp<"dashed" | "dotted" | "draw" | "solid">; size: EnumStyleProp<"l" | "m" | "s" | "xl">; spline: EnumStyleProp<"cubic" | "line">; handles: DictValidator; }; // (undocumented) toSvg(shape: TLLineShape): SVGGElement; // (undocumented) static type: "line"; } // @public (undocumented) export function menuCustom(id: string, opts?: Partial<{ readonlyOk: boolean; disabled: boolean; }>): { id: string; type: "custom"; disabled: boolean; readonlyOk: boolean; }; // @public (undocumented) export function menuGroup(id: string, ...children: (false | TLUiMenuChild)[]): null | TLUiMenuGroup; // @public (undocumented) export function menuItem(actionItem: TLUiActionItem | TLUiToolItem, opts?: Partial<{ checked: boolean; disabled: boolean; }>): TLUiMenuItem; // @public (undocumented) export function menuSubmenu(id: string, label: Exclude | TLUiTranslationKey, ...children: (false | TLUiMenuChild)[]): null | TLUiSubMenu; // @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.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.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" | "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: string; 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" | "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: string; 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" | "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): SVGGElement; // (undocumented) static type: "note"; } // @public (undocumented) export function OfflineIndicator(): JSX.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) function RadioItem({ children, onSelect, ...rest }: DropdownMenuCheckboxItemProps): JSX.Element; // @public export function removeFrame(editor: Editor, ids: TLShapeId[]): void; // @public (undocumented) function Root({ id, children, modal, debugOpen, }: { id: string; children: any; modal?: boolean; debugOpen?: boolean; }): JSX.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 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) onExit: () => void; } // @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.Element; // @public (undocumented) function Sub({ id, children }: { id: string; children: any; }): JSX.Element; // @public (undocumented) function SubContent({ alignOffset, sideOffset, children, }: { alignOffset?: number; sideOffset?: number; children: any; }): JSX.Element; // @public (undocumented) function SubTrigger({ label, 'data-testid': testId, 'data-direction': dataDirection, }: { label: Exclude | TLUiTranslationKey; 'data-testid'?: string; 'data-direction'?: 'left' | 'right'; }): JSX.Element; // @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.Element; // (undocumented) getDefaultProps(): TLTextShape['props']; // (undocumented) getGeometry(shape: TLTextShape): Rectangle2d; // (undocumented) getMinDimensions(shape: TLTextShape): { height: number; width: number; }; // (undocumented) indicator(shape: TLTextShape): JSX.Element | null; // (undocumented) isAspectRatioLocked: TLShapeUtilFlag; // (undocumented) static migrations: Migrations; // (undocumented) onBeforeCreate: (shape: TLTextShape) => { x: number; y: number; type: "text"; rotation: number; index: string; parentId: TLParentId; isLocked: boolean; opacity: number; props: { color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "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" | "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: string; 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" | "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): SVGGElement; // (undocumented) static type: "text"; } // @public (undocumented) function Title({ className, children }: { className?: string; children: any; }): JSX.Element; // @public (undocumented) export function Tldraw(props: TldrawProps): JSX.Element; // @public (undocumented) export const TLDRAW_FILE_EXTENSION: ".tldr"; // @public (undocumented) export function TldrawCropHandles({ size, width, height, hideAlternateHandles, }: TldrawCropHandlesProps): JSX.Element; // @public (undocumented) export interface TldrawCropHandlesProps { // (undocumented) height: number; // (undocumented) hideAlternateHandles: boolean; // (undocumented) size: number; // (undocumented) width: number; } // @public (undocumented) export interface TldrawFile { // (undocumented) records: UnknownRecord[]; // (undocumented) schema: SerializedSchema; // (undocumented) tldrawFileFormatVersion: number; } // @public (undocumented) export const TldrawHandles: TLHandlesComponent; // @public (undocumented) export const TldrawHoveredShapeIndicator: TLHoveredShapeIndicatorComponent; // @public (undocumented) export type TldrawProps = TldrawEditorBaseProps & ({ store: TLStore | TLStoreWithStatus; } | { store?: undefined; persistenceKey?: string; sessionId?: string; defaultName?: string; snapshot?: StoreSnapshot; }) & TldrawUiProps & Partial; // @public (undocumented) export const TldrawScribble: TLScribbleComponent; // @public (undocumented) export const TldrawSelectionBackground: TLSelectionBackgroundComponent; // @public (undocumented) export const TldrawSelectionForeground: TLSelectionForegroundComponent; // @public (undocumented) export const TldrawUi: React_2.NamedExoticComponent; // @public export interface TldrawUiBaseProps { assetUrls?: TLUiAssetUrlOverrides; children?: ReactNode; hideUi?: boolean; renderDebugMenuItems?: () => React_2.ReactNode; shareZone?: ReactNode; // @internal topZone?: ReactNode; } // @public (undocumented) export function TldrawUiContextProvider({ overrides, assetUrls, onUiEvent, forceMobile, children, }: TldrawUiContextProviderProps): JSX.Element; // @public export interface TldrawUiContextProviderProps { assetUrls?: RecursivePartial; children?: any; forceMobile?: boolean; onUiEvent?: TLUiEventHandler; overrides?: TLUiOverrides | TLUiOverrides[]; } // @public export type TldrawUiProps = TldrawUiBaseProps & TldrawUiContextProviderProps; // @public (undocumented) export interface TLUiActionItem { // (undocumented) checkbox?: boolean; // (undocumented) contextMenuLabel?: TransationKey; // (undocumented) icon?: IconType; // (undocumented) id: string; // (undocumented) kbd?: string; // (undocumented) label?: TransationKey; // (undocumented) menuLabel?: TransationKey; // (undocumented) onSelect: (source: TLUiEventSource) => Promise | void; // (undocumented) readonlyOk: boolean; // (undocumented) shortcutsLabel?: TransationKey; // (undocumented) title?: string; } // @public (undocumented) export type TLUiActionsContextType = Record; // @public (undocumented) export type TLUiActionsMenuSchemaContextType = TLUiMenuSchema; // @public (undocumented) export type TLUiAssetUrlOverrides = RecursivePartial; // @public (undocumented) export interface TLUiButtonProps extends React_3.HTMLAttributes { // (undocumented) disabled?: boolean; // (undocumented) icon?: Exclude | TLUiIconType; // (undocumented) iconLeft?: Exclude | TLUiIconType; // (undocumented) invertIcon?: boolean; // (undocumented) isChecked?: boolean; // (undocumented) kbd?: string; // (undocumented) label?: Exclude | TLUiTranslationKey; // (undocumented) loading?: boolean; // (undocumented) smallIcon?: boolean; // (undocumented) spinner?: boolean; // (undocumented) type: 'danger' | 'help' | 'icon' | 'low' | 'menu' | 'normal' | 'primary' | 'tool'; } // @public (undocumented) export interface TLUiContextMenuProps { // (undocumented) children: any; } // @public (undocumented) export type TLUiContextTTLUiMenuSchemaContextType = TLUiMenuSchema; // @public (undocumented) export type TLUiCustomMenuItem = { id: string; type: 'custom'; disabled: boolean; readonlyOk: boolean; }; // @public (undocumented) export interface TLUiDialog { // (undocumented) component: (props: TLUiDialogProps) => any; // (undocumented) id: string; // (undocumented) onClose?: () => void; } // @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 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) '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-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) '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) '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) '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' | 'export-menu' | 'help-menu' | 'helper-buttons' | 'kbd' | 'menu' | 'navigation-zone' | 'page-menu' | 'people-menu' | 'quick-actions' | 'share-menu' | 'toolbar' | 'unknown' | 'zoom-menu'; // @public (undocumented) export type TLUiHelpMenuSchemaContextType = TLUiMenuSchema; // @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' | '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' | 'dash-dashed' | 'dash-dotted' | 'dash-draw' | 'dash-solid' | 'discord' | 'distribute-horizontal' | 'distribute-vertical' | 'dot' | 'dots-horizontal' | 'dots-vertical' | 'drag-handle-dots' | 'duplicate' | 'edit' | '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?: any; // (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 type TLUiKeyboardShortcutsSchemaContextType = TLUiMenuSchema; // @public (undocumented) export type TLUiKeyboardShortcutsSchemaProviderProps = { overrides?: (editor: Editor, schema: TLUiKeyboardShortcutsSchemaContextType, more: { tools: TLUiToolsContextType; actions: TLUiActionsContextType; }) => TLUiKeyboardShortcutsSchemaContextType; children: any; }; // @public (undocumented) export type TLUiMenuChild = null | TLUiCustomMenuItem | TLUiMenuGroup | TLUiMenuItem | TLUiSubMenu; // @public (undocumented) export type TLUiMenuGroup = { id: string; type: 'group'; checkbox: boolean; disabled: boolean; readonlyOk: boolean; children: TLUiMenuChild[]; }; // @public (undocumented) export type TLUiMenuItem = { id: string; type: 'item'; readonlyOk: boolean; actionItem: TLUiActionItem; disabled: boolean; checked: boolean; }; // @public (undocumented) export type TLUiMenuSchema = (TLUiCustomMenuItem | TLUiMenuGroup | TLUiMenuItem)[]; // @public (undocumented) export type TLUiMenuSchemaContextType = TLUiMenuSchema; // @public (undocumented) export type TLUiMenuSchemaProviderProps = { overrides?: (editor: Editor, schema: TLUiMenuSchemaContextType, helpers: { actions: ReturnType; noneSelected: boolean; oneSelected: boolean; twoSelected: boolean; threeSelected: boolean; }) => TLUiMenuSchemaContextType; children: any; }; // @public (undocumented) export type TLUiOverrides = Partial<{ actionsMenu: WithDefaultHelpers>; actions: WithDefaultHelpers>; contextMenu: WithDefaultHelpers>; helpMenu: WithDefaultHelpers>; menu: WithDefaultHelpers>; toolbar: WithDefaultHelpers>; keyboardShortcutsMenu: WithDefaultHelpers>; tools: WithDefaultHelpers>; translations: TLUiTranslationProviderProps['overrides']; }>; // @public (undocumented) export type TLUiSubMenu = { id: string; type: 'submenu'; label: TranslationKey; disabled: boolean; readonlyOk: boolean; children: TLUiMenuChild[]; }; // @public (undocumented) export interface TLUiToast { // (undocumented) actions?: TLUiToastAction[]; // (undocumented) closeLabel?: string; // (undocumented) description?: string; // (undocumented) icon?: TLUiIconType; // (undocumented) id: string; // (undocumented) keepOpen?: boolean; // (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 type TLUiToolbarItem = { id: string; type: 'item'; readonlyOk: boolean; toolItem: TLUiToolItem; }; // @public (undocumented) export type TLUiToolbarSchemaContextType = TLUiToolbarItem[]; // @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: any; }; // @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-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.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.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' | '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.yellow' | 'context-menu.arrange' | 'context-menu.copy-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' | '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' | '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 function toolbarItem(toolItem: TLUiToolItem): TLUiToolbarItem; // @public (undocumented) function Trigger({ children, 'data-testid': testId, }: { children: any; 'data-testid'?: string; }): JSX.Element; // @public (undocumented) export const truncateStringWithEllipsis: (str: string, maxLength: number) => string; // @public (undocumented) export function UiEventsProvider({ onEvent, children }: EventsProviderProps): JSX.Element; // @public (undocumented) export function useActions(): TLUiActionsContextType; // @public (undocumented) export function useActionsMenuSchema(): TLUiMenuSchema; // @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 useContextMenuSchema(): TLUiMenuSchema; // @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) => string; isMobile: boolean; }; // @public (undocumented) export function useDialogs(): TLUiDialogsContextType; // @public (undocumented) export function useExportAs(): (ids: TLShapeId[], format?: TLExportType) => void; // @public (undocumented) export function useHelpMenuSchema(): TLUiMenuSchema; // @public (undocumented) export function useKeyboardShortcuts(): void; // @public (undocumented) export function useKeyboardShortcutsSchema(): TLUiKeyboardShortcutsSchemaContextType; // @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 useMenuSchema(): TLUiMenuSchema; // @public (undocumented) export function useNativeClipboardEvents(): void; // @public (undocumented) export function useReadonly(): boolean; // @public (undocumented) export function useToasts(): TLUiToastsContextType; // @public (undocumented) export function useToolbarSchema(): TLUiToolbarSchemaContextType; // @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.Element; // (undocumented) getDefaultProps(): TLVideoShape['props']; // (undocumented) indicator(shape: TLVideoShape): JSX.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): SVGGElement; // (undocumented) static type: "video"; } // @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; } export * from "@tldraw/editor"; // (No @packageDocumentation comment for this package) ```