kopia lustrzana https://github.com/Tldraw/Tldraw
123 KiB
123 KiB
API Report File for "tldraw"
Do not edit this file. It is a report generated by API Extractor.
/// <reference types="react" />
import { BaseBoxShapeTool } from '@tldraw/editor';
import { BaseBoxShapeUtil } from '@tldraw/editor';
import { BindingOnChangeOptions } from '@tldraw/editor';
import { BindingOnCreateOptions } from '@tldraw/editor';
import { BindingOnShapeChangeOptions } from '@tldraw/editor';
import { BindingOnShapeIsolateOptions } from '@tldraw/editor';
import { BindingUtil } from '@tldraw/editor';
import { Circle2d } from '@tldraw/editor';
import { ComponentType } from 'react';
import { CubicSpline2d } from '@tldraw/editor';
import { Editor } 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 { MigrationFailureReason } from '@tldraw/editor';
import { MigrationSequence } from '@tldraw/editor';
import { NamedExoticComponent } from 'react';
import { Polygon2d } from '@tldraw/editor';
import { Polyline2d } from '@tldraw/editor';
import * as React_2 from 'react';
import { default as React_3 } from 'react';
import { ReactElement } from 'react';
import { ReactNode } from 'react';
import { ReadonlySharedStyleMap } from '@tldraw/editor';
import { RecordProps } from '@tldraw/editor';
import { Rectangle2d } from '@tldraw/editor';
import { RecursivePartial } from '@tldraw/editor';
import { Result } from '@tldraw/editor';
import { SerializedSchema } from '@tldraw/editor';
import { ShapeUtil } from '@tldraw/editor';
import { SharedStyle } from '@tldraw/editor';
import { StateNode } from '@tldraw/editor';
import { StyleProp } from '@tldraw/editor';
import { SvgExportContext } from '@tldraw/editor';
import { TLAnyBindingUtilConstructor } from '@tldraw/editor';
import { TLAnyShapeUtilConstructor } from '@tldraw/editor';
import { TLArrowBinding } from '@tldraw/editor';
import { TLArrowBindingProps } from '@tldraw/editor';
import { TLArrowShape } from '@tldraw/editor';
import { TLArrowShapeArrowheadStyle } from '@tldraw/editor';
import { TLArrowShapeProps } from '@tldraw/editor';
import { TLAsset } from '@tldraw/editor';
import { TLAssetId } from '@tldraw/editor';
import { TLBookmarkShape } from '@tldraw/editor';
import { TLBookmarkShapeProps } from '@tldraw/editor';
import { TLClickEventInfo } from '@tldraw/editor';
import { TLDefaultColorTheme } from '@tldraw/editor';
import { TLDefaultColorThemeColor } from '@tldraw/editor';
import { TLDefaultFontStyle } from '@tldraw/editor';
import { TLDefaultSizeStyle } from '@tldraw/editor';
import { TldrawEditorBaseProps } from '@tldraw/editor';
import { TldrawEditorStoreProps } from '@tldraw/editor';
import { TLDrawShape } from '@tldraw/editor';
import { TLDrawShapeProps } from '@tldraw/editor';
import { TLDrawShapeSegment } from '@tldraw/editor';
import { TLEditorComponents } from '@tldraw/editor';
import { TLEditorSnapshot } from '@tldraw/editor';
import { TLEmbedShape } from '@tldraw/editor';
import { TLEmbedShapeProps } from '@tldraw/editor';
import { TLFrameShape } from '@tldraw/editor';
import { TLFrameShapeProps } from '@tldraw/editor';
import { TLGeoShape } from '@tldraw/editor';
import { TLGeoShapeProps } from '@tldraw/editor';
import { TLHandle } from '@tldraw/editor';
import { TLHandleDragInfo } from '@tldraw/editor';
import { TLHandlesProps } from '@tldraw/editor';
import { TLHighlightShape } from '@tldraw/editor';
import { TLHighlightShapeProps } from '@tldraw/editor';
import { TLImageAsset } from '@tldraw/editor';
import { TLImageShape } from '@tldraw/editor';
import { TLImageShapeProps } from '@tldraw/editor';
import { TLKeyboardEventInfo } from '@tldraw/editor';
import { TLLineShape } from '@tldraw/editor';
import { TLLineShapePoint } from '@tldraw/editor';
import { TLNoteShape } from '@tldraw/editor';
import { TLNoteShapeProps } from '@tldraw/editor';
import { TLPageId } from '@tldraw/editor';
import { TLParentId } from '@tldraw/editor';
import { TLPointerEventInfo } from '@tldraw/editor';
import { TLPropsMigrations } from '@tldraw/editor';
import { TLResizeInfo } from '@tldraw/editor';
import { TLSchema } from '@tldraw/editor';
import { TLScribbleProps } from '@tldraw/editor';
import { TLSelectionBackgroundProps } from '@tldraw/editor';
import { TLSelectionForegroundProps } from '@tldraw/editor';
import { TLShape } from '@tldraw/editor';
import { TLShapeId } from '@tldraw/editor';
import { TLShapePartial } from '@tldraw/editor';
import { TLShapeUtilCanBindOpts } from '@tldraw/editor';
import { TLShapeUtilCanvasSvgDef } from '@tldraw/editor';
import { TLStateNodeConstructor } from '@tldraw/editor';
import { TLStore } from '@tldraw/editor';
import { TLStoreSnapshot } from '@tldraw/editor';
import { TLSvgOptions } from '@tldraw/editor';
import { TLTextLabel } from '@tldraw/editor';
import { TLTextShape } from '@tldraw/editor';
import { TLVideoAsset } from '@tldraw/editor';
import { TLVideoShape } from '@tldraw/editor';
import { UnknownRecord } from '@tldraw/editor';
import { Vec } from '@tldraw/editor';
import { VecLike } from '@tldraw/editor';
import { VecModel } from '@tldraw/editor';
// @public (undocumented)
export interface ActionsProviderProps {
// (undocumented)
children: React_2.ReactNode;
// (undocumented)
overrides?(editor: Editor, actions: TLUiActionsContextType, helpers: undefined): TLUiActionsContextType;
}
// @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 class ArrowBindingUtil extends BindingUtil<TLArrowBinding> {
// (undocumented)
getDefaultProps(): Partial<TLArrowBindingProps>;
// (undocumented)
static migrations: TLPropsMigrations;
// (undocumented)
onAfterChange({ bindingAfter }: BindingOnChangeOptions<TLArrowBinding>): void;
// (undocumented)
onAfterChangeFromShape({ shapeAfter, }: BindingOnShapeChangeOptions<TLArrowBinding>): void;
// (undocumented)
onAfterChangeToShape({ binding }: BindingOnShapeChangeOptions<TLArrowBinding>): void;
// (undocumented)
onAfterCreate({ binding }: BindingOnCreateOptions<TLArrowBinding>): void;
// (undocumented)
onBeforeIsolateFromShape({ binding, }: BindingOnShapeIsolateOptions<TLArrowBinding>): void;
// (undocumented)
static props: RecordProps<TLArrowBinding>;
// (undocumented)
static type: string;
}
// @public (undocumented)
export function ArrowDownToolbarItem(): JSX_2.Element;
// @public (undocumented)
export function ArrowheadStylePickerSet({ styles }: StylePickerSetProps): 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(): TLStateNodeConstructor[];
// (undocumented)
static id: string;
// (undocumented)
static initial: string;
// (undocumented)
shapeType: string;
}
// @public (undocumented)
export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
// (undocumented)
canBeLaidOut(shape: TLArrowShape): boolean;
// (undocumented)
canBind({ toShapeType }: TLShapeUtilCanBindOpts<TLArrowShape>): 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)
getInterpolatedProps(startShape: TLArrowShape, endShape: TLArrowShape, progress: number): TLArrowShapeProps;
// (undocumented)
getText(shape: TLArrowShape): string;
// (undocumented)
hideResizeHandles(): boolean;
// (undocumented)
hideRotateHandle(): boolean;
// (undocumented)
hideSelectionBoundsBg(): boolean;
// (undocumented)
hideSelectionBoundsFg(): boolean;
// (undocumented)
indicator(shape: TLArrowShape): JSX_2.Element | null;
// (undocumented)
static migrations: MigrationSequence;
// (undocumented)
onDoubleClickHandle(shape: TLArrowShape, handle: TLHandle): TLShapePartial<TLArrowShape> | void;
// (undocumented)
onEditEnd(shape: TLArrowShape): void;
// (undocumented)
onHandleDrag(shape: TLArrowShape, { handle, isPrecise }: TLHandleDragInfo<TLArrowShape>): {
id: TLShapeId;
meta?: Partial<JsonObject> | undefined;
props?: Partial<TLArrowShapeProps> | undefined;
type: "arrow";
} & Partial<Omit<TLArrowShape, "id" | "meta" | "props" | "type">>;
// (undocumented)
onResize(shape: TLArrowShape, info: TLResizeInfo<TLArrowShape>): {
props: {
bend: number;
end: VecModel;
start: VecModel;
};
};
// (undocumented)
onTranslate(initialShape: TLArrowShape, shape: TLArrowShape): void;
// (undocumented)
onTranslateStart(shape: TLArrowShape): void;
// (undocumented)
static props: RecordProps<TLArrowShape>;
// (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<TLBookmarkShape> {
// (undocumented)
canResize(): boolean;
// (undocumented)
component(shape: TLBookmarkShape): JSX_2.Element;
// (undocumented)
getDefaultProps(): TLBookmarkShape['props'];
// (undocumented)
getInterpolatedProps(startShape: TLBookmarkShape, endShape: TLBookmarkShape, t: number): TLBookmarkShapeProps;
// (undocumented)
getText(shape: TLBookmarkShape): string;
// (undocumented)
hideSelectionBoundsFg(): boolean;
// (undocumented)
indicator(shape: TLBookmarkShape): JSX_2.Element;
// (undocumented)
static migrations: TLPropsMigrations;
// (undocumented)
onBeforeCreate(next: TLBookmarkShape): {
id: TLShapeId;
index: IndexKey;
isLocked: boolean;
meta: JsonObject;
opacity: number;
parentId: TLParentId;
props: {
assetId: null | TLAssetId;
h: number;
url: string;
w: number;
};
rotation: number;
type: "bookmark";
typeName: "shape";
x: number;
y: number;
};
// (undocumented)
onBeforeUpdate(prev: TLBookmarkShape, shape: TLBookmarkShape): {
id: TLShapeId;
index: IndexKey;
isLocked: boolean;
meta: JsonObject;
opacity: number;
parentId: TLParentId;
props: {
assetId: null | TLAssetId;
h: number;
url: string;
w: number;
};
rotation: number;
type: "bookmark";
typeName: "shape";
x: number;
y: number;
} | undefined;
// (undocumented)
static props: RecordProps<TLBookmarkShape>;
// (undocumented)
static type: "bookmark";
}
// @public (undocumented)
export interface BoxWidthHeight {
// (undocumented)
h: number;
// (undocumented)
w: number;
}
// @public (undocumented)
export function BreakPointProvider({ forceMobile, children }: BreakPointProviderProps): JSX_2.Element;
// @public (undocumented)
export interface BreakPointProviderProps {
// (undocumented)
children: ReactNode;
// (undocumented)
forceMobile?: boolean;
}
// @internal (undocumented)
export function buildFromV1Document(editor: Editor, _document: unknown): void;
// @public (undocumented)
export function CenteredTopPanelContainer({ maxWidth, ignoreRightWidth, stylePanelWidth, marginBetweenZones, squeezeAmount, children, }: CenteredTopPanelContainerProps): JSX_2.Element;
// @public (undocumented)
export interface CenteredTopPanelContainerProps {
// (undocumented)
children: ReactNode;
// (undocumented)
ignoreRightWidth?: number;
// (undocumented)
marginBetweenZones?: number;
// (undocumented)
maxWidth?: number;
// (undocumented)
squeezeAmount?: number;
// (undocumented)
stylePanelWidth?: number;
}
// @public
export function centerSelectionAroundPoint(editor: Editor, position: VecLike): 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 }: ThemeStylePickerSetProps): 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?: TLSvgOptions): Promise<void>;
// @public (undocumented)
export function CopyAsMenuGroup(): JSX_2.Element;
// @public (undocumented)
export function CopyMenuItem(): JSX_2.Element;
// @public (undocumented)
export function createMediaAssetInfoSkeleton(file: File, assetId: TLAssetId, isImageType: boolean, isVideoType: boolean): Promise<TLImageAsset | TLVideoAsset>;
// @public
export function createShapesForAssets(editor: Editor, assets: TLAsset[], position: VecLike): Promise<TLShapeId[]>;
// @public (undocumented)
export function CursorChatItem(): JSX_2.Element | null;
// @public (undocumented)
export interface CustomEmbedDefinition extends EmbedDefinition {
// (undocumented)
readonly icon: string;
}
// @public (undocumented)
export function CutMenuItem(): JSX_2.Element;
// @public (undocumented)
export function DebugFlags(): JSX_2.Element | null;
// @public (undocumented)
export const DEFAULT_EMBED_DEFINITIONS: readonly [{
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["beta.tldraw.com", "tldraw.com", "localhost:3000"];
readonly minHeight: 300;
readonly minWidth: 300;
readonly overridePermissions: {
readonly 'allow-top-navigation': true;
};
readonly title: "tldraw";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "tldraw";
readonly width: 720;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["figma.com"];
readonly title: "Figma";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "figma";
readonly width: 720;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["google.*"];
readonly overridePermissions: {
readonly 'allow-presentation': true;
};
readonly title: "Google Maps";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "google_maps";
readonly width: 720;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["val.town"];
readonly minHeight: 100;
readonly minWidth: 260;
readonly title: "Val Town";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "val_town";
readonly width: 720;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["codesandbox.io"];
readonly minHeight: 300;
readonly minWidth: 300;
readonly title: "CodeSandbox";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "codesandbox";
readonly width: 720;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 400;
readonly hostnames: readonly ["codepen.io"];
readonly minHeight: 300;
readonly minWidth: 300;
readonly title: "Codepen";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "codepen";
readonly width: 520;
}, {
readonly doesResize: false;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 400;
readonly hostnames: readonly ["scratch.mit.edu"];
readonly title: "Scratch";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "scratch";
readonly width: 520;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 450;
readonly hostnames: readonly ["*.youtube.com", "youtube.com", "youtu.be"];
readonly isAspectRatioLocked: true;
readonly overridePermissions: {
readonly 'allow-popups-to-escape-sandbox': true;
readonly 'allow-presentation': true;
};
readonly title: "YouTube";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "youtube";
readonly width: 800;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["calendar.google.*"];
readonly instructionLink: "https://support.google.com/calendar/answer/41207?hl=en";
readonly minHeight: 360;
readonly minWidth: 460;
readonly overridePermissions: {
readonly 'allow-popups-to-escape-sandbox': true;
};
readonly title: "Google Calendar";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "google_calendar";
readonly width: 720;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["docs.google.*"];
readonly minHeight: 360;
readonly minWidth: 460;
readonly overridePermissions: {
readonly 'allow-popups-to-escape-sandbox': true;
};
readonly title: "Google Slides";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "google_slides";
readonly width: 720;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["gist.github.com"];
readonly title: "GitHub Gist";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "github_gist";
readonly width: 720;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["replit.com"];
readonly title: "Replit";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "replit";
readonly width: 720;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["felt.com"];
readonly title: "Felt";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "felt";
readonly width: 720;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["open.spotify.com"];
readonly minHeight: 500;
readonly overrideOutlineRadius: 12;
readonly title: "Spotify";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "spotify";
readonly width: 720;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 360;
readonly hostnames: readonly ["vimeo.com", "player.vimeo.com"];
readonly isAspectRatioLocked: true;
readonly title: "Vimeo";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "vimeo";
readonly width: 640;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["excalidraw.com"];
readonly isAspectRatioLocked: true;
readonly title: "Excalidraw";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "excalidraw";
readonly width: 720;
}, {
readonly backgroundColor: "#fff";
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 500;
readonly hostnames: readonly ["observablehq.com"];
readonly isAspectRatioLocked: false;
readonly title: "Observable";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "observable";
readonly width: 720;
}, {
readonly doesResize: true;
readonly fromEmbedUrl: (url: string) => string | undefined;
readonly height: 450;
readonly hostnames: readonly ["desmos.com"];
readonly title: "Desmos";
readonly toEmbedUrl: (url: string) => string | undefined;
readonly type: "desmos";
readonly width: 700;
}];
// @public (undocumented)
export const DefaultActionsMenu: NamedExoticComponent<TLUiActionsMenuProps>;
// @public (undocumented)
export function DefaultActionsMenuContent(): JSX_2.Element;
// @public (undocumented)
export const defaultBindingUtils: readonly [typeof ArrowBindingUtil];
// @public (undocumented)
const DefaultContextMenu: NamedExoticComponent<TLUiContextMenuProps>;
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 let defaultEditorAssetUrls: TLEditorAssetUrls;
// @public (undocumented)
export type DefaultEmbedDefinitionType = (typeof DEFAULT_EMBED_DEFINITIONS)[number]['type'];
// @public (undocumented)
export function DefaultHelperButtons({ children }: TLUiHelperButtonsProps): JSX_2.Element;
// @public (undocumented)
export function DefaultHelperButtonsContent(): JSX_2.Element;
// @public (undocumented)
export const DefaultHelpMenu: NamedExoticComponent<TLUiHelpMenuProps>;
// @public (undocumented)
export function DefaultHelpMenuContent(): JSX_2.Element;
// @public (undocumented)
export const DefaultKeyboardShortcutsDialog: NamedExoticComponent<TLUiKeyboardShortcutsDialogProps>;
// @public (undocumented)
export function DefaultKeyboardShortcutsDialogContent(): JSX_2.Element;
// @public (undocumented)
export const DefaultMainMenu: NamedExoticComponent<TLUiMainMenuProps>;
// @public (undocumented)
export function DefaultMainMenuContent(): JSX_2.Element;
// @public (undocumented)
export const DefaultMenuPanel: NamedExoticComponent<object>;
// @public (undocumented)
export function DefaultMinimap(): JSX_2.Element;
// @public (undocumented)
export const DefaultNavigationPanel: NamedExoticComponent<object>;
// @public (undocumented)
export const DefaultPageMenu: NamedExoticComponent<object>;
// @public (undocumented)
export const DefaultQuickActions: NamedExoticComponent<TLUiQuickActionsProps>;
// @public (undocumented)
export function DefaultQuickActionsContent(): JSX_2.Element | undefined;
// @public (undocumented)
export const defaultShapeTools: readonly [typeof TextShapeTool, typeof DrawShapeTool, typeof GeoShapeTool, typeof NoteShapeTool, typeof LineShapeTool, typeof FrameShapeTool, typeof ArrowShapeTool, typeof HighlightShapeTool];
// @public (undocumented)
export const defaultShapeUtils: readonly [typeof TextShapeUtil, typeof BookmarkShapeUtil, typeof DrawShapeUtil, typeof GeoShapeUtil, typeof NoteShapeUtil, typeof LineShapeUtil, typeof FrameShapeUtil, typeof ArrowShapeUtil, typeof HighlightShapeUtil, typeof EmbedShapeUtil, typeof ImageShapeUtil, typeof VideoShapeUtil];
// @public (undocumented)
export function DefaultSharePanel(): JSX_2.Element;
// @public (undocumented)
export const DefaultStylePanel: NamedExoticComponent<TLUiStylePanelProps>;
// @public (undocumented)
export function DefaultStylePanelContent({ styles }: TLUiStylePanelContentProps): JSX_2.Element | null;
// @public
export const DefaultToolbar: NamedExoticComponent<DefaultToolbarProps>;
// @public (undocumented)
export function DefaultToolbarContent(): JSX_2.Element;
// @public (undocumented)
export interface DefaultToolbarProps {
// (undocumented)
children?: ReactNode;
}
// @public (undocumented)
export const defaultTools: readonly [typeof EraserTool, typeof HandTool, typeof LaserTool, typeof ZoomTool, typeof SelectTool];
// @public (undocumented)
export function DefaultTopPanel(): JSX_2.Element;
// @public (undocumented)
export const DefaultZoomMenu: NamedExoticComponent<TLUiZoomMenuProps>;
// @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?: {
quality?: number | undefined;
type?: string | undefined;
}): Promise<Blob>;
// @public (undocumented)
export class DrawShapeTool extends StateNode {
// (undocumented)
static children(): TLStateNodeConstructor[];
// (undocumented)
static id: string;
// (undocumented)
static initial: string;
// (undocumented)
static isLockable: boolean;
// (undocumented)
onExit(): void;
// (undocumented)
shapeType: string;
}
// @public (undocumented)
export class DrawShapeUtil extends ShapeUtil<TLDrawShape> {
// (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)
getInterpolatedProps(startShape: TLDrawShape, endShape: TLDrawShape, t: number): TLDrawShapeProps;
// (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: TLPropsMigrations;
// (undocumented)
onResize(shape: TLDrawShape, info: TLResizeInfo<TLDrawShape>): {
props: {
segments: TLDrawShapeSegment[];
};
};
// (undocumented)
static props: RecordProps<TLDrawShape>;
// (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 EditMenuSubmenu(): JSX_2.Element | null;
// @public (undocumented)
export function EditSubmenu(): JSX_2.Element;
// @public (undocumented)
export function EllipseToolbarItem(): JSX_2.Element;
// @public (undocumented)
export interface EmbedDefinition {
// (undocumented)
readonly backgroundColor?: string;
// (undocumented)
readonly doesResize: boolean;
// (undocumented)
readonly fromEmbedUrl: (url: string) => string | undefined;
// (undocumented)
readonly height: number;
// (undocumented)
readonly hostnames: readonly string[];
// (undocumented)
readonly instructionLink?: string;
// (undocumented)
readonly isAspectRatioLocked?: boolean;
// (undocumented)
readonly minHeight?: number;
// (undocumented)
readonly minWidth?: number;
// (undocumented)
readonly overrideOutlineRadius?: number;
// (undocumented)
readonly overridePermissions?: TLEmbedShapePermissions;
// (undocumented)
readonly title: string;
// (undocumented)
readonly toEmbedUrl: (url: string) => string | undefined;
// (undocumented)
readonly type: string;
// (undocumented)
readonly width: number;
}
// @public
export const embedShapePermissionDefaults: {
readonly 'allow-downloads-without-user-activation': false;
readonly 'allow-downloads': false;
readonly 'allow-forms': true;
readonly 'allow-modals': false;
readonly 'allow-orientation-lock': false;
readonly 'allow-pointer-lock': false;
readonly 'allow-popups-to-escape-sandbox': false;
readonly 'allow-popups': true;
readonly 'allow-presentation': false;
readonly 'allow-same-origin': true;
readonly 'allow-scripts': true;
readonly 'allow-storage-access-by-user-activation': false;
readonly 'allow-top-navigation-by-user-activation': false;
readonly 'allow-top-navigation': false;
};
// @public (undocumented)
export class EmbedShapeUtil extends BaseBoxShapeUtil<TLEmbedShape> {
// (undocumented)
canEdit(): boolean;
// (undocumented)
canEditInReadOnly(): boolean;
// (undocumented)
canResize(shape: TLEmbedShape): boolean;
// (undocumented)
component(shape: TLEmbedShape): JSX_2.Element | null;
// (undocumented)
getDefaultProps(): TLEmbedShape['props'];
// (undocumented)
getEmbedDefinition(url: string): TLEmbedResult;
// (undocumented)
getEmbedDefinitions(): readonly TLEmbedDefinition[];
// (undocumented)
getInterpolatedProps(startShape: TLEmbedShape, endShape: TLEmbedShape, t: number): TLEmbedShapeProps;
// (undocumented)
getText(shape: TLEmbedShape): string;
// (undocumented)
hideSelectionBoundsFg(shape: TLEmbedShape): boolean;
// (undocumented)
indicator(shape: TLEmbedShape): JSX_2.Element;
// (undocumented)
isAspectRatioLocked(shape: TLEmbedShape): boolean;
// (undocumented)
static migrations: TLPropsMigrations;
// (undocumented)
onResize(shape: TLEmbedShape, info: TLResizeInfo<TLEmbedShape>): TLEmbedShape;
// (undocumented)
static props: RecordProps<TLEmbedShape>;
// (undocumented)
setEmbedDefinitions(definitions: TLEmbedDefinition[]): void;
// (undocumented)
static type: "embed";
}
// @public (undocumented)
export class EraserTool extends StateNode {
// (undocumented)
static children(): TLStateNodeConstructor[];
// (undocumented)
static id: string;
// (undocumented)
static initial: string;
// (undocumented)
static isLockable: boolean;
// (undocumented)
onEnter(): void;
}
// @public (undocumented)
export function EraserToolbarItem(): JSX_2.Element;
// @public (undocumented)
export interface EventsProviderProps {
// (undocumented)
children: React_2.ReactNode;
// (undocumented)
onEvent?: TLUiEventHandler;
}
// @public (undocumented)
export function ExampleDialog({ title, body, cancel, confirm, displayDontShowAgain, onCancel, onContinue, }: ExampleDialogProps): JSX_2.Element;
// @public (undocumented)
export interface ExampleDialogProps {
// (undocumented)
body?: string;
// (undocumented)
cancel?: string;
// (undocumented)
confirm?: string;
// (undocumented)
displayDontShowAgain?: boolean;
// (undocumented)
onCancel(): void;
// (undocumented)
onContinue(): void;
// (undocumented)
title?: string;
}
// @public
export function exportAs(editor: Editor, ids: TLShapeId[], format: TLExportType | undefined, name: string | undefined, opts?: TLSvgOptions): Promise<void>;
// @public (undocumented)
export function ExportFileContentSubMenu(): JSX_2.Element;
// @public
export function exportToBlob({ editor, ids, format, opts, }: {
editor: Editor;
format: TLExportType;
ids: TLShapeId[];
opts?: TLSvgOptions;
}): Promise<Blob>;
// @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<TLDefaultFontStyle, string>;
// @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<TLFrameShape> {
// (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)
getInterpolatedProps(startShape: TLFrameShape, endShape: TLFrameShape, t: number): TLFrameShapeProps;
// (undocumented)
getText(shape: TLFrameShape): string | undefined;
// (undocumented)
indicator(shape: TLFrameShape): JSX_2.Element;
// (undocumented)
static migrations: TLPropsMigrations;
// (undocumented)
onDragShapesOut(_shape: TLFrameShape, shapes: TLShape[]): void;
// (undocumented)
onDragShapesOver(frame: TLFrameShape, shapes: TLShape[]): void;
// (undocumented)
onResize(shape: any, info: TLResizeInfo<any>): any;
// (undocumented)
static props: RecordProps<TLFrameShape>;
// (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(): TLStateNodeConstructor[];
// (undocumented)
static id: string;
// (undocumented)
static initial: string;
// (undocumented)
shapeType: string;
}
// @public (undocumented)
export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
// (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)
getInterpolatedProps(startShape: TLGeoShape, endShape: TLGeoShape, t: number): TLGeoShapeProps;
// (undocumented)
getText(shape: TLGeoShape): string;
// (undocumented)
indicator(shape: TLGeoShape): JSX_2.Element;
// (undocumented)
static migrations: TLPropsMigrations;
// (undocumented)
onBeforeCreate(shape: TLGeoShape): {
id: TLShapeId;
index: IndexKey;
isLocked: boolean;
meta: JsonObject;
opacity: number;
parentId: TLParentId;
props: {
align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start";
color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
dash: "dashed" | "dotted" | "draw" | "solid";
fill: "fill" | "none" | "pattern" | "semi" | "solid";
font: "draw" | "mono" | "sans" | "serif";
geo: "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "check-box" | "cloud" | "diamond" | "ellipse" | "heart" | "hexagon" | "octagon" | "oval" | "pentagon" | "rectangle" | "rhombus-2" | "rhombus" | "star" | "trapezoid" | "triangle" | "x-box";
growY: number;
h: number;
labelColor: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
scale: number;
size: "l" | "m" | "s" | "xl";
text: string;
url: string;
verticalAlign: "end" | "middle" | "start";
w: number;
};
rotation: number;
type: "geo";
typeName: "shape";
x: number;
y: number;
} | undefined;
// (undocumented)
onBeforeUpdate(prev: TLGeoShape, next: TLGeoShape): {
id: TLShapeId;
index: IndexKey;
isLocked: boolean;
meta: JsonObject;
opacity: number;
parentId: TLParentId;
props: {
align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start";
color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
dash: "dashed" | "dotted" | "draw" | "solid";
fill: "fill" | "none" | "pattern" | "semi" | "solid";
font: "draw" | "mono" | "sans" | "serif";
geo: "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "check-box" | "cloud" | "diamond" | "ellipse" | "heart" | "hexagon" | "octagon" | "oval" | "pentagon" | "rectangle" | "rhombus-2" | "rhombus" | "star" | "trapezoid" | "triangle" | "x-box";
growY: number;
h: number;
labelColor: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
scale: number;
size: "l" | "m" | "s" | "xl";
text: string;
url: string;
verticalAlign: "end" | "middle" | "start";
w: number;
};
rotation: number;
type: "geo";
typeName: "shape";
x: number;
y: number;
} | undefined;
// (undocumented)
onDoubleClick(shape: TLGeoShape): {
id: TLShapeId;
index: IndexKey;
isLocked: boolean;
meta: JsonObject;
opacity: number;
parentId: TLParentId;
props: {
geo: "check-box";
};
rotation: number;
type: "geo";
typeName: "shape";
x: number;
y: number;
} | {
id: TLShapeId;
index: IndexKey;
isLocked: boolean;
meta: JsonObject;
opacity: number;
parentId: TLParentId;
props: {
geo: "rectangle";
};
rotation: number;
type: "geo";
typeName: "shape";
x: number;
y: number;
} | undefined;
// (undocumented)
onEditEnd(shape: TLGeoShape): void;
// (undocumented)
onResize(shape: TLGeoShape, { handle, newPoint, scaleX, scaleY, initialShape }: TLResizeInfo<TLGeoShape>): {
props: {
growY: number;
h: number;
w: number;
};
x: number;
y: number;
};
// (undocumented)
static props: RecordProps<TLGeoShape>;
// (undocumented)
toSvg(shape: TLGeoShape, ctx: SvgExportContext): JSX_2.Element;
// (undocumented)
static type: "geo";
}
// @public (undocumented)
export function GeoStylePickerSet({ styles }: StylePickerSetProps): JSX_2.Element | null;
// @public (undocumented)
export function getArrowBindings(editor: Editor, shape: TLArrowShape): TLArrowBindings;
// @public (undocumented)
export function getArrowTerminalsInArrowSpace(editor: Editor, shape: TLArrowShape, bindings: TLArrowBindings): {
end: Vec;
start: Vec;
};
// @public
export function getEmbedInfo(definitions: readonly TLEmbedDefinition[], inputUrl: string): TLEmbedResult;
// @public (undocumented)
export function getOccludedChildren(editor: Editor, parent: TLShape): TLShapeId[];
// @public (undocumented)
export function getSvgAsImage(editor: Editor, svgString: string, options: {
height: number;
quality: number;
scale: number;
type: 'jpeg' | 'png' | 'webp';
width: number;
}): Promise<Blob | null>;
// @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(): TLStateNodeConstructor[];
// (undocumented)
static id: string;
// (undocumented)
static initial: string;
// (undocumented)
onDoubleClick(info: TLClickEventInfo): void;
// (undocumented)
onQuadrupleClick(info: TLClickEventInfo): void;
// (undocumented)
onTripleClick(info: TLClickEventInfo): void;
}
// @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(): TLStateNodeConstructor[];
// (undocumented)
static id: string;
// (undocumented)
static initial: string;
// (undocumented)
static isLockable: boolean;
// (undocumented)
onExit(): void;
// (undocumented)
shapeType: string;
}
// @public (undocumented)
export class HighlightShapeUtil extends ShapeUtil<TLHighlightShape> {
// (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)
getInterpolatedProps(startShape: TLHighlightShape, endShape: TLHighlightShape, t: number): TLHighlightShapeProps;
// (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: TLPropsMigrations;
// (undocumented)
onResize(shape: TLHighlightShape, info: TLResizeInfo<TLHighlightShape>): {
props: {
segments: TLDrawShapeSegment[];
};
};
// (undocumented)
static props: RecordProps<TLHighlightShape>;
// (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<TLImageShape> {
// (undocumented)
canCrop(): boolean;
// (undocumented)
component(shape: TLImageShape): JSX_2.Element;
// (undocumented)
getDefaultProps(): TLImageShape['props'];
// (undocumented)
getInterpolatedProps(startShape: TLImageShape, endShape: TLImageShape, t: number): TLImageShapeProps;
// (undocumented)
indicator(shape: TLImageShape): JSX_2.Element | null;
// (undocumented)
isAnimated(shape: TLImageShape): boolean;
// (undocumented)
isAspectRatioLocked(): boolean;
// (undocumented)
static migrations: TLPropsMigrations;
// (undocumented)
onDoubleClick(shape: TLImageShape): void;
// (undocumented)
onDoubleClickEdge(shape: TLImageShape): void;
// (undocumented)
onResize(shape: TLImageShape, info: TLResizeInfo<TLImageShape>): TLImageShape;
// (undocumented)
static props: RecordProps<TLImageShape>;
// (undocumented)
toSvg(shape: TLImageShape): Promise<JSX_2.Element | null>;
// (undocumented)
static type: "image";
}
// @public (undocumented)
export function KeyboardShortcutsMenuItem(): JSX_2.Element | null;
// @internal (undocumented)
export function kickoutOccludedShapes(editor: Editor, shapeIds: TLShapeId[]): void;
// @public (undocumented)
export const LABEL_FONT_SIZES: Record<TLDefaultSizeStyle, number>;
// @public (undocumented)
export function LanguageMenu(): JSX_2.Element;
// @public (undocumented)
export class LaserTool extends StateNode {
// (undocumented)
static children(): TLStateNodeConstructor[];
// (undocumented)
static id: string;
// (undocumented)
static initial: string;
// (undocumented)
static isLockable: boolean;
// (undocumented)
onEnter(): void;
}
// @public (undocumented)
export function LaserToolbarItem(): JSX_2.Element;
// @public (undocumented)
export class LineShapeTool extends StateNode {
// (undocumented)
static children(): TLStateNodeConstructor[];
// (undocumented)
static id: string;
// (undocumented)
static initial: string;
// (undocumented)
shapeType: string;
}
// @public (undocumented)
export class LineShapeUtil extends ShapeUtil<TLLineShape> {
// (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)
getInterpolatedProps(startShape: TLLineShape, endShape: TLLineShape, t: number): TLLineShape['props'];
// (undocumented)
hideResizeHandles(): boolean;
// (undocumented)
hideRotateHandle(): boolean;
// (undocumented)
hideSelectionBoundsBg(): boolean;
// (undocumented)
hideSelectionBoundsFg(): boolean;
// (undocumented)
indicator(shape: TLLineShape): JSX_2.Element;
// (undocumented)
static migrations: TLPropsMigrations;
// (undocumented)
onHandleDrag(shape: TLLineShape, { handle }: TLHandleDragInfo<TLLineShape>): {
id: TLShapeId;
index: IndexKey;
isLocked: boolean;
meta: JsonObject;
opacity: number;
parentId: TLParentId;
props: {
color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
dash: "dashed" | "dotted" | "draw" | "solid";
points: {
[x: string]: {
id: string;
index: IndexKey;
x: number;
y: number;
} | TLLineShapePoint;
};
scale: number;
size: "l" | "m" | "s" | "xl";
spline: "cubic" | "line";
};
rotation: number;
type: "line";
typeName: "shape";
x: number;
y: number;
} | undefined;
// (undocumented)
onResize(shape: TLLineShape, info: TLResizeInfo<TLLineShape>): {
props: {
points: {
[x: string]: {
id: string;
index: IndexKey;
x: number;
y: number;
};
};
};
};
// (undocumented)
static props: RecordProps<TLLineShape>;
// (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 MobileStylePanel(): JSX_2.Element | null;
// @public (undocumented)
export function MoveToPageMenu(): JSX_2.Element | null;
// @public (undocumented)
export class NoteShapeTool extends StateNode {
// (undocumented)
static children(): TLStateNodeConstructor[];
// (undocumented)
static id: string;
// (undocumented)
static initial: string;
// (undocumented)
shapeType: string;
}
// @public (undocumented)
export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
// (undocumented)
canEdit(): boolean;
// (undocumented)
component(shape: TLNoteShape): JSX_2.Element;
// (undocumented)
getDefaultProps(): TLNoteShape['props'];
// (undocumented)
getGeometry(shape: TLNoteShape): Group2d;
// (undocumented)
getHandles(shape: TLNoteShape): TLHandle[];
// (undocumented)
getInterpolatedProps(startShape: TLNoteShape, endShape: TLNoteShape, t: number): TLNoteShapeProps;
// (undocumented)
getText(shape: TLNoteShape): string;
// (undocumented)
hideResizeHandles(): boolean;
// (undocumented)
hideSelectionBoundsFg(): boolean;
// (undocumented)
indicator(shape: TLNoteShape): JSX_2.Element;
// (undocumented)
static migrations: TLPropsMigrations;
// (undocumented)
onBeforeCreate(next: TLNoteShape): {
id: TLShapeId;
index: IndexKey;
isLocked: boolean;
meta: JsonObject;
opacity: number;
parentId: TLParentId;
props: {
align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start";
color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
font: "draw" | "mono" | "sans" | "serif";
fontSizeAdjustment: number;
growY: number;
scale: number;
size: "l" | "m" | "s" | "xl";
text: string;
url: string;
verticalAlign: "end" | "middle" | "start";
};
rotation: number;
type: "note";
typeName: "shape";
x: number;
y: number;
} | undefined;
// (undocumented)
onBeforeUpdate(prev: TLNoteShape, next: TLNoteShape): {
id: TLShapeId;
index: IndexKey;
isLocked: boolean;
meta: JsonObject;
opacity: number;
parentId: TLParentId;
props: {
align: "end-legacy" | "end" | "middle-legacy" | "middle" | "start-legacy" | "start";
color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
font: "draw" | "mono" | "sans" | "serif";
fontSizeAdjustment: number;
growY: number;
scale: number;
size: "l" | "m" | "s" | "xl";
text: string;
url: string;
verticalAlign: "end" | "middle" | "start";
};
rotation: number;
type: "note";
typeName: "shape";
x: number;
y: number;
} | undefined;
// (undocumented)
onEditEnd(shape: TLNoteShape): void;
// (undocumented)
static props: RecordProps<TLNoteShape>;
// (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 function OverflowingToolbar({ children }: OverflowingToolbarProps): JSX_2.Element;
// @public (undocumented)
export interface OverflowingToolbarProps {
// (undocumented)
children: React.ReactNode;
}
// @public (undocumented)
export const PageItemInput: ({ name, id, isCurrentPage, }: PageItemInputProps) => JSX_2.Element;
// @public (undocumented)
export interface PageItemInputProps {
// (undocumented)
id: TLPageId;
// (undocumented)
isCurrentPage: boolean;
// (undocumented)
name: string;
}
// @public (undocumented)
export const PageItemSubmenu: NamedExoticComponent<PageItemSubmenuProps>;
// @public (undocumented)
export interface PageItemSubmenuProps {
// (undocumented)
index: number;
// (undocumented)
item: {
id: string;
name: string;
};
// (undocumented)
listSize: number;
// (undocumented)
onRename?(): void;
}
// @internal (undocumented)
export function parseAndLoadDocument(editor: Editor, document: string, msg: (id: Exclude<string, TLUiTranslationKey> | TLUiTranslationKey) => string, addToast: TLUiToastsContextType['addToast'], onV1FileLoad?: () => void, forceDarkMode?: boolean): Promise<void>;
// @public (undocumented)
export function parseTldrawJsonFile({ json, schema, }: {
json: string;
schema: TLSchema;
}): Result<TLStore, TldrawFileParseError>;
// @public (undocumented)
export function PasteMenuItem(): JSX_2.Element;
// @public (undocumented)
export const PeopleMenu: NamedExoticComponent<PeopleMenuProps>;
// @public (undocumented)
export interface PeopleMenuProps {
// (undocumented)
children?: ReactNode;
}
// @public (undocumented)
export enum PORTRAIT_BREAKPOINT {
// (undocumented)
DESKTOP = 7,
// (undocumented)
MOBILE = 4,
// (undocumented)
MOBILE_SM = 3,
// (undocumented)
MOBILE_XS = 2,
// (undocumented)
MOBILE_XXS = 1,
// (undocumented)
TABLET = 6,
// (undocumented)
TABLET_SM = 5,
// (undocumented)
ZERO = 0
}
// @public (undocumented)
export function PreferencesGroup(): JSX_2.Element;
// @public (undocumented)
export function preloadFont(id: string, font: TLTypeFace): Promise<FontFace>;
// @public (undocumented)
export function PrintItem(): JSX_2.Element;
// @public (undocumented)
export function RectangleToolbarItem(): JSX_2.Element;
// @public (undocumented)
export function registerDefaultExternalContentHandlers(editor: Editor, { maxImageDimension, maxAssetSize, acceptedImageMimeTypes, acceptedVideoMimeTypes, }: Required<TLExternalContentProps>, { toasts, msg }: {
msg: ReturnType<typeof useTranslation>;
toasts: TLUiToastsContextType;
}): void;
// @public (undocumented)
export function registerDefaultSideEffects(editor: Editor): () => void;
// @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(): TLStateNodeConstructor[];
// (undocumented)
cleanUpDuplicateProps(): void;
// (undocumented)
static id: string;
// (undocumented)
static initial: string;
// (undocumented)
static isLockable: boolean;
// (undocumented)
onEnter(): void;
// (undocumented)
onExit(): void;
// (undocumented)
reactor: (() => void) | undefined;
}
// @public (undocumented)
export function SelectToolbarItem(): JSX_2.Element;
// @public (undocumented)
export function serializeTldrawJson(editor: Editor): Promise<string>;
// @public (undocumented)
export function serializeTldrawJsonBlob(editor: Editor): Promise<Blob>;
// @internal (undocumented)
export function setDefaultEditorAssetUrls(assetUrls: TLEditorAssetUrls): void;
// @internal (undocumented)
export function setDefaultUiAssetUrls(urls: TLUiAssetUrls): void;
// @internal (undocumented)
export function Spinner(props: React_3.SVGProps<SVGSVGElement>): JSX_2.Element;
// @public (undocumented)
export function SplineStylePickerSet({ styles }: StylePickerSetProps): JSX_2.Element | null;
// @public (undocumented)
export function StackMenuItems(): JSX_2.Element;
// @public (undocumented)
export function StarToolbarItem(): JSX_2.Element;
// @public (undocumented)
export interface StylePickerSetProps {
// (undocumented)
styles: ReadonlySharedStyleMap;
}
// @public (undocumented)
export type StyleValuesForUi<T> = readonly {
readonly icon: string;
readonly value: T;
}[];
// @public (undocumented)
export const TEXT_PROPS: {
fontStyle: string;
fontVariant: string;
fontWeight: string;
lineHeight: number;
padding: string;
};
// @public
export const TextArea: React_3.ForwardRefExoticComponent<TextAreaProps & React_3.RefAttributes<HTMLTextAreaElement>>;
// @public (undocumented)
export interface TextAreaProps {
// (undocumented)
handleBlur(): void;
// (undocumented)
handleChange(e: React_3.ChangeEvent<HTMLTextAreaElement>): void;
// (undocumented)
handleDoubleClick(e: any): any;
// (undocumented)
handleFocus(): void;
// (undocumented)
handleInputPointerDown(e: React_3.PointerEvent<HTMLTextAreaElement>): void;
// (undocumented)
handleKeyDown(e: React_3.KeyboardEvent<HTMLTextAreaElement>): void;
// (undocumented)
isEditing: boolean;
// (undocumented)
text: string;
}
// @public (undocumented)
export class TextShapeTool extends StateNode {
// (undocumented)
static children(): TLStateNodeConstructor[];
// (undocumented)
static id: string;
// (undocumented)
static initial: string;
// (undocumented)
static isLockable: boolean;
// (undocumented)
shapeType: string;
}
// @public (undocumented)
export class TextShapeUtil extends ShapeUtil<TLTextShape> {
// (undocumented)
canEdit(): boolean;
// (undocumented)
component(shape: TLTextShape): JSX_2.Element | null;
// (undocumented)
getDefaultProps(): TLTextShape['props'];
// (undocumented)
getGeometry(shape: TLTextShape): Rectangle2d;
// (undocumented)
getMinDimensions(shape: TLTextShape): {
height: number;
width: number;
};
// (undocumented)
getText(shape: TLTextShape): string;
// (undocumented)
indicator(shape: TLTextShape): JSX_2.Element | null;
// (undocumented)
isAspectRatioLocked(): boolean;
// (undocumented)
static migrations: TLPropsMigrations;
// (undocumented)
onBeforeUpdate(prev: TLTextShape, next: TLTextShape): {
id: TLShapeId;
index: IndexKey;
isLocked: boolean;
meta: JsonObject;
opacity: number;
parentId: TLParentId;
props: {
autoSize: boolean;
color: "black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "white" | "yellow";
font: "draw" | "mono" | "sans" | "serif";
scale: number;
size: "l" | "m" | "s" | "xl";
text: string;
textAlign: "end" | "middle" | "start";
w: number;
};
rotation: number;
type: "text";
typeName: "shape";
x: number;
y: number;
} | undefined;
// (undocumented)
onEditEnd(shape: TLTextShape): void;
// (undocumented)
onResize(shape: TLTextShape, info: TLResizeInfo<TLTextShape>): {
id: TLShapeId;
props: {
autoSize: boolean;
w: number;
};
type: "text";
x: number;
y: number;
} | {
id: TLShapeId;
props: {
scale: number;
};
type: "text";
x: number;
y: number;
};
// (undocumented)
static props: RecordProps<TLTextShape>;
// (undocumented)
toSvg(shape: TLTextShape, ctx: SvgExportContext): JSX_2.Element;
// (undocumented)
static type: "text";
}
// @public (undocumented)
export function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps): JSX_2.Element | null;
// @public (undocumented)
export function TextToolbarItem(): JSX_2.Element;
// @public (undocumented)
export interface ThemeStylePickerSetProps {
// (undocumented)
styles: ReadonlySharedStyleMap;
// (undocumented)
theme: TLDefaultColorTheme;
}
// @public (undocumented)
export interface TLArcInfo {
// (undocumented)
center: VecLike;
// (undocumented)
largeArcFlag: number;
// (undocumented)
length: number;
// (undocumented)
radius: number;
// (undocumented)
size: number;
// (undocumented)
sweepFlag: number;
}
// @public (undocumented)
export interface TLArrowBindings {
// (undocumented)
end: TLArrowBinding | undefined;
// (undocumented)
start: TLArrowBinding | undefined;
}
// @public (undocumented)
export type TLArrowInfo = {
bindings: TLArrowBindings;
bodyArc: TLArcInfo;
end: TLArrowPoint;
handleArc: TLArcInfo;
isStraight: false;
isValid: boolean;
middle: VecLike;
start: TLArrowPoint;
} | {
bindings: TLArrowBindings;
end: TLArrowPoint;
isStraight: true;
isValid: boolean;
length: number;
middle: VecLike;
start: TLArrowPoint;
};
// @public (undocumented)
export interface TLArrowPoint {
// (undocumented)
arrowhead: TLArrowShapeArrowheadStyle;
// (undocumented)
handle: VecLike;
// (undocumented)
point: VecLike;
}
// @public
export interface TLComponents extends TLEditorComponents, TLUiComponents {
}
// @public (undocumented)
export type TLCopyType = 'jpeg' | 'json' | 'png' | 'svg';
// @public (undocumented)
export function Tldraw(props: TldrawProps): JSX_2.Element;
// @public (undocumented)
export const TLDRAW_FILE_EXTENSION: ".tldr";
// @public (undocumented)
export interface TldrawBaseProps extends TldrawUiProps, TldrawEditorBaseProps, TLExternalContentProps {
// (undocumented)
components?: TLComponents;
// (undocumented)
embeds?: TLEmbedDefinition[];
}
// @public (undocumented)
export interface TldrawFile {
// (undocumented)
records: UnknownRecord[];
// (undocumented)
schema: SerializedSchema;
// (undocumented)
tldrawFileFormatVersion: number;
}
// @public (undocumented)
export type TldrawFileParseError = {
cause: unknown;
type: 'invalidRecords';
} | {
cause: unknown;
type: 'notATldrawFile';
} | {
data: any;
type: 'v1File';
} | {
reason: MigrationFailureReason;
type: 'migrationFailed';
} | {
type: 'fileFormatVersionTooNew';
version: number;
};
// @public (undocumented)
export function TldrawHandles({ children }: TLHandlesProps): JSX_2.Element | null;
// @public
export const TldrawImage: NamedExoticComponent<TldrawImageProps>;
// @public (undocumented)
export interface TldrawImageProps extends TLSvgOptions {
bindingUtils?: readonly TLAnyBindingUtilConstructor[];
format?: 'png' | 'svg';
licenseKey?: string;
pageId?: TLPageId;
shapeUtils?: readonly TLAnyShapeUtilConstructor[];
snapshot: Partial<TLEditorSnapshot> | TLStoreSnapshot;
}
// @public (undocumented)
export type TldrawProps = TldrawBaseProps & TldrawEditorStoreProps;
// @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: NamedExoticComponent<TLSelectionForegroundProps>;
// @public (undocumented)
export function TldrawShapeIndicators(): JSX_2.Element | null;
// @public
export const TldrawTextLabel: TLTextLabel;
// @public (undocumented)
export const TldrawUi: React_3.NamedExoticComponent<TldrawUiProps>;
// @public (undocumented)
export const TldrawUiButton: React_2.ForwardRefExoticComponent<TLUiButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
// @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: <T extends string>(props: TLUiButtonPickerProps<T>) => ReactElement;
// @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 (undocumented)
export interface TldrawUiContextProviderProps {
assetUrls?: RecursivePartial<TLUiAssetUrls>;
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<TLUiIconProps>;
// @public (undocumented)
export const TldrawUiInput: React_2.ForwardRefExoticComponent<TLUiInputProps & React_2.RefAttributes<HTMLInputElement>>;
// @public (undocumented)
export function TldrawUiKbd({ children, visibleOnMobileLayout }: TLUiKbdProps): JSX_2.Element | null;
// @public (undocumented)
export function TldrawUiMenuActionCheckboxItem({ actionId, ...rest }: TLUiMenuActionCheckboxItemProps): JSX_2.Element | null;
// @public (undocumented)
export function TldrawUiMenuActionItem({ actionId, ...rest }: TLUiMenuActionItemProps): JSX_2.Element | null;
// @public (undocumented)
export function TldrawUiMenuCheckboxItem<TranslationKey extends string = string, IconType extends string = string>({ id, kbd, label, readonlyOk, onSelect, toggle, disabled, checked, }: TLUiMenuCheckboxItemProps<TranslationKey, IconType>): JSX_2.Element | null;
// @public (undocumented)
export function TldrawUiMenuContextProvider({ type, sourceId, children, }: TLUiMenuContextProviderProps): JSX_2.Element;
// @public (undocumented)
export type TldrawUiMenuContextType = 'context-menu' | 'helper-buttons' | 'icons' | 'keyboard-shortcuts' | 'menu' | 'panel' | 'small-icons' | 'toolbar-overflow' | 'toolbar';
// @public (undocumented)
export function TldrawUiMenuGroup({ id, label, children }: TLUiMenuGroupProps): boolean | JSX_2.Element | Iterable<ReactNode> | null | number | string | undefined;
// @public (undocumented)
export function TldrawUiMenuItem<TranslationKey extends string = string, IconType extends string = string>({ disabled, spinner, readonlyOk, id, kbd, label, icon, onSelect, noClose, isSelected, }: TLUiMenuItemProps<TranslationKey, IconType>): JSX_2.Element | null;
// @public (undocumented)
export function TldrawUiMenuSubmenu<Translation extends string = string>({ id, disabled, label, size, children, }: TLUiMenuSubmenuProps<Translation>): boolean | JSX_2.Element | Iterable<ReactNode> | null | number | string | undefined;
// @public (undocumented)
export function TldrawUiMenuToolItem({ toolId, ...rest }: TLUiMenuToolItemProps): JSX_2.Element | null;
// @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 (undocumented)
export interface TldrawUiProps extends TldrawUiContextProviderProps {
assetUrls?: TLUiAssetUrlOverrides;
children?: ReactNode;
components?: TLUiComponents;
hideUi?: boolean;
renderDebugMenuItems?(): React_3.ReactNode;
}
// @public (undocumented)
export const TldrawUiSlider: NamedExoticComponent<TLUiSliderProps>;
// @public (undocumented)
export interface TLEditorAssetUrls {
// (undocumented)
fonts: {
draw: string;
monospace: string;
sansSerif: string;
serif: string;
};
}
// @public (undocumented)
export type TLEmbedDefinition = CustomEmbedDefinition | EmbedDefinition;
// @public (undocumented)
export type TLEmbedResult = {
definition: TLEmbedDefinition;
embedUrl: string;
url: string;
} | undefined;
// @public (undocumented)
export type TLEmbedShapePermissions = {
[K in keyof typeof embedShapePermissionDefaults]?: boolean;
};
// @public (undocumented)
export type TLExportType = 'jpeg' | 'json' | 'png' | 'svg' | 'webp';
// @public (undocumented)
export interface TLExternalContentProps {
acceptedImageMimeTypes?: readonly string[];
acceptedVideoMimeTypes?: readonly string[];
maxAssetSize?: number;
maxImageDimension?: number;
}
// @public (undocumented)
export interface TLTypeFace {
// (undocumented)
display?: any;
// (undocumented)
featureSettings?: string;
// (undocumented)
format?: string;
// (undocumented)
stretch?: string;
// (undocumented)
style?: string;
// (undocumented)
unicodeRange?: string;
// (undocumented)
url: string;
// (undocumented)
variant?: string;
// (undocumented)
weight?: string;
}
// @public (undocumented)
export interface TLUiActionItem<TransationKey extends string = string, IconType extends string = string> {
// (undocumented)
checkbox?: boolean;
// (undocumented)
icon?: IconType;
// (undocumented)
id: string;
// (undocumented)
kbd?: string;
// (undocumented)
label?: {
[key: string]: TransationKey;
} | TransationKey;
// (undocumented)
onSelect(source: TLUiEventSource): Promise<void> | void;
// (undocumented)
readonlyOk?: boolean;
}
// @public (undocumented)
export type TLUiActionsContextType = Record<string, TLUiActionItem>;
// @public (undocumented)
export interface TLUiActionsMenuProps {
// (undocumented)
children?: ReactNode;
}
// @public (undocumented)
export type TLUiAssetUrlOverrides = RecursivePartial<TLUiAssetUrls>;
// @public (undocumented)
export type TLUiAssetUrls = TLEditorAssetUrls & {
embedIcons: Record<(typeof DEFAULT_EMBED_DEFINITIONS)[number]['type'], string>;
icons: Record<Exclude<string, TLUiIconType> | TLUiIconType, string>;
translations: Record<(typeof LANGUAGES)[number]['locale'], string>;
};
// @public (undocumented)
export interface TLUiButtonCheckProps {
// (undocumented)
checked: boolean;
}
// @public (undocumented)
export interface TLUiButtonIconProps {
// (undocumented)
icon: string;
// (undocumented)
invertIcon?: boolean;
// (undocumented)
small?: boolean;
}
// @public (undocumented)
export interface TLUiButtonLabelProps {
// (undocumented)
children?: ReactNode;
}
// @public (undocumented)
export interface TLUiButtonPickerProps<T extends string> {
// (undocumented)
items: StyleValuesForUi<T>;
// (undocumented)
onValueChange(style: StyleProp<T>, value: T): void;
// (undocumented)
style: StyleProp<T>;
// (undocumented)
theme: TLDefaultColorTheme;
// (undocumented)
title: string;
// (undocumented)
uiType: string;
// (undocumented)
value: SharedStyle<T>;
}
// @public (undocumented)
export interface TLUiButtonProps extends React_2.HTMLAttributes<HTMLButtonElement> {
// (undocumented)
disabled?: boolean;
// (undocumented)
type: 'danger' | 'help' | 'icon' | 'low' | 'menu' | 'normal' | 'primary' | 'tool';
}
// @public (undocumented)
export interface TLUiComponents {
// (undocumented)
ActionsMenu?: ComponentType<TLUiActionsMenuProps> | null;
// (undocumented)
ContextMenu?: ComponentType<TLUiContextMenuProps> | null;
// (undocumented)
CursorChatBubble?: ComponentType | null;
// (undocumented)
DebugMenu?: ComponentType | null;
// (undocumented)
DebugPanel?: ComponentType | null;
// (undocumented)
HelperButtons?: ComponentType<TLUiHelperButtonsProps> | null;
// (undocumented)
HelpMenu?: ComponentType<TLUiHelpMenuProps> | null;
// (undocumented)
KeyboardShortcutsDialog?: ComponentType<TLUiKeyboardShortcutsDialogProps> | null;
// (undocumented)
MainMenu?: ComponentType<TLUiMainMenuProps> | null;
// (undocumented)
MenuPanel?: ComponentType | null;
// (undocumented)
Minimap?: ComponentType | null;
// (undocumented)
NavigationPanel?: ComponentType | null;
// (undocumented)
PageMenu?: ComponentType | null;
// (undocumented)
QuickActions?: ComponentType<TLUiQuickActionsProps> | null;
// (undocumented)
SharePanel?: ComponentType | null;
// (undocumented)
StylePanel?: ComponentType<TLUiStylePanelProps> | null;
// (undocumented)
Toolbar?: ComponentType | null;
// (undocumented)
TopPanel?: ComponentType | null;
// (undocumented)
ZoomMenu?: ComponentType<TLUiZoomMenuProps> | null;
}
// @public (undocumented)
export interface TLUiComponentsProviderProps {
// (undocumented)
children: ReactNode;
// (undocumented)
overrides?: TLUiComponents;
}
// @public (undocumented)
export interface TLUiContextMenuProps {
// (undocumented)
children?: ReactNode;
// (undocumented)
disabled?: boolean;
}
// @public (undocumented)
export interface TLUiDebugMenuProps {
// (undocumented)
children?: ReactNode;
}
// @public (undocumented)
export interface TLUiDialog {
// (undocumented)
component: ComponentType<TLUiDialogProps>;
// (undocumented)
id: string;
// (undocumented)
onClose?(): void;
}
// @public (undocumented)
export interface TLUiDialogBodyProps {
// (undocumented)
children: ReactNode;
// (undocumented)
className?: string;
// (undocumented)
style?: React.CSSProperties;
}
// @public (undocumented)
export interface TLUiDialogFooterProps {
// (undocumented)
children: ReactNode;
// (undocumented)
className?: string;
}
// @public (undocumented)
export interface TLUiDialogHeaderProps {
// (undocumented)
children: ReactNode;
// (undocumented)
className?: string;
}
// @public (undocumented)
export interface TLUiDialogProps {
// (undocumented)
onClose(): void;
}
// @public (undocumented)
export interface TLUiDialogsContextType {
// (undocumented)
addDialog(dialog: Omit<TLUiDialog, 'id'> & {
id?: string;
}): string;
// (undocumented)
clearDialogs(): void;
// (undocumented)
dialogs: TLUiDialog[];
// (undocumented)
removeDialog(id: string): string;
// (undocumented)
updateDialog(id: string, newDialogData: Partial<TLUiDialog>): string;
}
// @public (undocumented)
export interface TLUiDialogTitleProps {
// (undocumented)
children: ReactNode;
// (undocumented)
className?: string;
}
// @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 interface TLUiDropdownMenuContentProps {
// (undocumented)
align?: 'center' | 'end' | 'start';
// (undocumented)
alignOffset?: number;
// (undocumented)
children: ReactNode;
// (undocumented)
id?: string;
// (undocumented)
side?: 'bottom' | 'left' | 'right' | 'top';
// (undocumented)
sideOffset?: number;
}
// @public (undocumented)
export interface TLUiDropdownMenuGroupProps {
// (undocumented)
children: ReactNode;
}
// @public (undocumented)
export interface TLUiDropdownMenuItemProps {
// (undocumented)
children: ReactNode;
// (undocumented)
noClose?: boolean;
}
// @public (undocumented)
export interface TLUiDropdownMenuRootProps {
// (undocumented)
children: ReactNode;
// (undocumented)
debugOpen?: boolean;
// (undocumented)
id: string;
// (undocumented)
modal?: boolean;
}
// @public (undocumented)
export interface TLUiDropdownMenuSubProps {
// (undocumented)
children: ReactNode;
// (undocumented)
id: string;
}
// @public (undocumented)
export interface TLUiDropdownMenuSubTriggerProps {
// (undocumented)
disabled?: boolean;
// (undocumented)
id?: string;
// (undocumented)
label: string;
// (undocumented)
title?: string;
}
// @public (undocumented)
export interface TLUiDropdownMenuTriggerProps {
// (undocumented)
children?: ReactNode;
}
// @public (undocumented)
export type TLUiEventContextType = TLUiEventHandler<keyof TLUiEventMap>;
// @public (undocumented)
export type TLUiEventData<K> = K extends null ? {
source: TLUiEventSource;
} : {
source: TLUiEventSource;
} & K;
// @public (undocumented)
export type TLUiEventHandler<T extends keyof TLUiEventMap = keyof TLUiEventMap> = (name: T, data: TLUiEventData<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)
'change-page': null;
// (undocumented)
'change-user-name': null;
// (undocumented)
'close-menu': {
id: string;
};
// (undocumented)
'color-scheme': {
value: string;
};
// (undocumented)
'convert-to-bookmark': null;
// (undocumented)
'convert-to-embed': null;
// (undocumented)
'copy-as': {
format: 'json' | 'png' | 'svg';
};
// (undocumented)
'copy-link': null;
// (undocumented)
'create-new-project': null;
// (undocumented)
'delete-page': null;
// (undocumented)
'delete-shapes': null;
// (undocumented)
'distribute-shapes': {
operation: 'horizontal' | 'vertical';
};
// (undocumented)
'duplicate-page': null;
// (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)
'flatten-to-image': null;
// (undocumented)
'flip-shapes': {
operation: 'horizontal' | 'vertical';
};
// (undocumented)
'group-shapes': null;
// (undocumented)
'insert-embed': null;
// (undocumented)
'insert-media': null;
// (undocumented)
'move-page': null;
// (undocumented)
'move-to-new-page': 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)
'open-url': {
url: string;
};
// (undocumented)
'pack-shapes': null;
// (undocumented)
'remove-frame': null;
// (undocumented)
'rename-document': null;
// (undocumented)
'rename-page': 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-color': null;
// (undocumented)
'set-style': {
id: string;
value: number | string;
};
// (undocumented)
'stack-shapes': {
operation: 'horizontal' | 'vertical';
};
// (undocumented)
'start-following': null;
// (undocumented)
'stop-following': null;
// (undocumented)
'stretch-shapes': {
operation: 'horizontal' | 'vertical';
};
// (undocumented)
'toggle-auto-size': null;
// (undocumented)
'toggle-debug-mode': null;
// (undocumented)
'toggle-dynamic-size-mode': null;
// (undocumented)
'toggle-edge-scrolling': null;
// (undocumented)
'toggle-focus-mode': null;
// (undocumented)
'toggle-grid-mode': null;
// (undocumented)
'toggle-lock': null;
// (undocumented)
'toggle-paste-at-cursor': 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 interface TLUiHelperButtonsProps {
// (undocumented)
children?: ReactNode;
}
// @public (undocumented)
export interface TLUiHelpMenuProps {
// (undocumented)
children?: ReactNode;
}
// @public (undocumented)
export interface TLUiIconProps extends React.HTMLProps<HTMLDivElement> {
// (undocumented)
children?: undefined;
// (undocumented)
color?: string;
// (undocumented)
crossOrigin?: 'anonymous' | 'use-credentials';
// (undocumented)
icon: Exclude<string, TLUiIconType> | TLUiIconType;
// (undocumented)
invertIcon?: boolean;
// (undocumented)
small?: boolean;
}
// @public (undocumented)
export type TLUiIconType = 'align-bottom' | 'align-center-horizontal' | 'align-center-vertical' | 'align-left' | 'align-right' | 'align-top' | 'arrow-left' | 'arrowhead-arrow' | 'arrowhead-bar' | 'arrowhead-diamond' | 'arrowhead-dot' | 'arrowhead-none' | 'arrowhead-square' | 'arrowhead-triangle-inverted' | 'arrowhead-triangle' | 'blob' | 'bring-forward' | 'bring-to-front' | 'broken' | 'check-circle' | 'check' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'chevrons-ne' | 'chevrons-sw' | 'clipboard-copied' | 'clipboard-copy' | 'color' | 'cross-2' | 'cross-circle' | 'dash-dashed' | 'dash-dotted' | 'dash-draw' | 'dash-solid' | 'disconnected' | 'discord' | 'distribute-horizontal' | 'distribute-vertical' | 'dot' | 'dots-horizontal' | 'dots-vertical' | 'drag-handle-dots' | 'duplicate' | 'edit' | 'external-link' | 'fill-fill' | 'fill-none' | 'fill-pattern' | 'fill-semi' | 'fill-solid' | 'follow' | 'following' | 'font-draw' | 'font-mono' | 'font-sans' | 'font-serif' | 'geo-arrow-down' | 'geo-arrow-left' | 'geo-arrow-right' | 'geo-arrow-up' | 'geo-check-box' | 'geo-cloud' | 'geo-diamond' | 'geo-ellipse' | 'geo-heart' | 'geo-hexagon' | 'geo-octagon' | 'geo-oval' | 'geo-pentagon' | 'geo-rectangle' | 'geo-rhombus-2' | 'geo-rhombus' | 'geo-star' | 'geo-trapezoid' | 'geo-triangle' | 'geo-x-box' | 'github' | 'group' | 'horizontal-align-end' | 'horizontal-align-middle' | 'horizontal-align-start' | 'info-circle' | 'leading' | 'link' | 'lock' | 'menu' | 'minus' | 'mixed' | 'pack' | 'plus' | 'question-mark-circle' | 'question-mark' | 'redo' | 'reset-zoom' | 'rotate-ccw' | 'rotate-cw' | 'send-backward' | 'send-to-back' | 'share-1' | 'size-extra-large' | 'size-large' | 'size-medium' | 'size-small' | 'spline-cubic' | 'spline-line' | 'stack-horizontal' | 'stack-vertical' | 'status-offline' | 'stretch-horizontal' | 'stretch-vertical' | 'text-align-center' | 'text-align-left' | 'text-align-right' | 'toggle-off' | 'toggle-on' | 'tool-arrow' | 'tool-eraser' | 'tool-frame' | 'tool-hand' | 'tool-highlight' | 'tool-laser' | 'tool-line' | 'tool-media' | 'tool-note' | 'tool-pencil' | 'tool-pointer' | 'tool-screenshot' | 'tool-text' | 'trash' | 'twitter' | 'undo' | 'ungroup' | 'unlock' | 'vertical-align-end' | 'vertical-align-middle' | 'vertical-align-start' | 'warning-triangle' | 'zoom-in' | 'zoom-out';
// @public (undocumented)
export interface TLUiInputProps {
// (undocumented)
autoFocus?: boolean;
// (undocumented)
autoSelect?: boolean;
// (undocumented)
children?: React_2.ReactNode;
// (undocumented)
className?: string;
// (undocumented)
defaultValue?: string;
// (undocumented)
disabled?: boolean;
// (undocumented)
icon?: Exclude<string, TLUiIconType> | TLUiIconType;
// (undocumented)
iconLeft?: Exclude<string, TLUiIconType> | TLUiIconType;
// (undocumented)
label?: Exclude<string, TLUiTranslationKey> | TLUiTranslationKey;
// (undocumented)
onBlur?(value: string): void;
// (undocumented)
onCancel?(value: string): void;
// (undocumented)
onComplete?(value: string): void;
// (undocumented)
onFocus?(): 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 interface TLUiMainMenuProps {
// (undocumented)
children?: ReactNode;
}
// @public (undocumented)
export type TLUiMenuActionCheckboxItemProps = {
actionId?: string;
} & Pick<TLUiMenuCheckboxItemProps, 'checked' | 'disabled' | 'toggle'>;
// @public (undocumented)
export type TLUiMenuActionItemProps = {
actionId?: string;
} & Partial<Pick<TLUiMenuItemProps, 'disabled' | 'isSelected' | 'noClose' | 'onSelect'>>;
// @public (undocumented)
export interface TLUiMenuCheckboxItemProps<TranslationKey extends string = string, IconType extends string = string> {
// (undocumented)
checked?: boolean;
// (undocumented)
disabled?: boolean;
// (undocumented)
icon?: IconType;
// (undocumented)
id: string;
// (undocumented)
kbd?: string;
// (undocumented)
label?: {
[key: string]: TranslationKey;
} | TranslationKey;
// (undocumented)
onSelect(source: TLUiEventSource): Promise<void> | void;
// (undocumented)
readonlyOk?: boolean;
// (undocumented)
title?: string;
// (undocumented)
toggle?: boolean;
}
// @public (undocumented)
export interface TLUiMenuContextProviderProps {
// (undocumented)
children: React.ReactNode;
// (undocumented)
sourceId: TLUiEventSource;
// (undocumented)
type: TldrawUiMenuContextType;
}
// @public (undocumented)
export interface TLUiMenuGroupProps<TranslationKey extends string = string> {
// (undocumented)
children?: ReactNode;
// (undocumented)
id: string;
label?: {
[key: string]: TranslationKey;
} | TranslationKey;
}
// @public (undocumented)
export interface TLUiMenuItemProps<TranslationKey extends string = string, IconType extends string = string> {
disabled?: boolean;
icon?: IconType;
// (undocumented)
id: string;
isSelected?: boolean;
kbd?: string;
label?: {
[key: string]: TranslationKey;
} | TranslationKey;
noClose?: boolean;
onSelect(source: TLUiEventSource): Promise<void> | void;
readonlyOk?: boolean;
spinner?: boolean;
}
// @public (undocumented)
export interface TLUiMenuSubmenuProps<Translation extends string = string> {
// (undocumented)
children: ReactNode;
// (undocumented)
disabled?: boolean;
// (undocumented)
id: string;
// (undocumented)
label?: {
[key: string]: Translation;
} | Translation;
// (undocumented)
size?: 'medium' | 'small' | 'tiny' | 'wide';
}
// @public (undocumented)
export type TLUiMenuToolItemProps = {
toolId?: string;
} & Pick<TLUiMenuItemProps, 'disabled' | 'isSelected'>;
// @public (undocumented)
export type TLUiOverrideHelpers = ReturnType<typeof useDefaultHelpers>;
// @public (undocumented)
export interface TLUiOverrides {
// (undocumented)
actions?(editor: Editor, actions: TLUiActionsContextType, helpers: TLUiOverrideHelpers): TLUiActionsContextType;
// (undocumented)
tools?(editor: Editor, tools: TLUiToolsContextType, helpers: {
insertMedia(): void;
} & TLUiOverrideHelpers): TLUiToolsContextType;
// (undocumented)
translations?: TLUiTranslationProviderProps['overrides'];
}
// @public (undocumented)
export interface TLUiPopoverContentProps {
// (undocumented)
align?: 'center' | 'end' | 'start';
// (undocumented)
alignOffset?: number;
// (undocumented)
children: React_3.ReactNode;
// (undocumented)
side: 'bottom' | 'left' | 'right' | 'top';
// (undocumented)
sideOffset?: number;
}
// @public (undocumented)
export interface TLUiPopoverProps {
// (undocumented)
children: React_3.ReactNode;
// (undocumented)
id: string;
// (undocumented)
onOpenChange?(isOpen: boolean): void;
// (undocumented)
open?: boolean;
}
// @public (undocumented)
export interface TLUiPopoverTriggerProps {
// (undocumented)
children?: React_3.ReactNode;
}
// @public (undocumented)
export interface TLUiQuickActionsProps {
// (undocumented)
children?: ReactNode;
}
// @public (undocumented)
export interface TLUiSliderProps {
// (undocumented)
'data-testid'?: string;
// (undocumented)
label: string;
// (undocumented)
onValueChange(value: number): void;
// (undocumented)
steps: number;
// (undocumented)
title: string;
// (undocumented)
value: null | number;
}
// @public (undocumented)
export interface TLUiStylePanelContentProps {
// (undocumented)
styles: ReturnType<typeof useRelevantStyles>;
}
// @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 interface TLUiToastsContextType {
// (undocumented)
addToast(toast: Omit<TLUiToast, 'id'> & {
id?: string;
}): string;
// (undocumented)
clearToasts(): void;
// (undocumented)
removeToast(id: TLUiToast['id']): string;
// (undocumented)
toasts: TLUiToast[];
}
// @public (undocumented)
export interface TLUiToolItem<TranslationKey extends string = string, IconType extends string = string> {
// (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<string, TLUiToolItem>;
// @public (undocumented)
export interface TLUiToolsProviderProps {
// (undocumented)
children: React_2.ReactNode;
// (undocumented)
overrides?(editor: Editor, tools: TLUiToolsContextType, helpers: {
insertMedia(): void;
}): TLUiToolsContextType;
}
// @public (undocumented)
export interface TLUiTranslation {
// (undocumented)
readonly dir: 'ltr' | 'rtl';
// (undocumented)
readonly label: string;
// (undocumented)
readonly locale: string;
// (undocumented)
readonly messages: Record<TLUiTranslationKey, string>;
}
// @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.flatten-to-image' | 'action.flip-horizontal.short' | 'action.flip-horizontal' | 'action.flip-vertical.short' | 'action.flip-vertical' | 'action.fork-project-on-tldraw' | 'action.fork-project' | 'action.group' | 'action.insert-embed' | 'action.insert-media' | 'action.leave-shared-project' | 'action.new-project' | 'action.new-shared-project' | 'action.open-cursor-chat' | 'action.open-embed-link' | 'action.open-file' | 'action.pack' | 'action.paste-error-description' | 'action.paste-error-title' | 'action.paste' | 'action.print' | 'action.redo' | 'action.remove-frame' | 'action.rename' | 'action.rotate-ccw' | 'action.rotate-cw' | 'action.save-copy' | 'action.select-all' | 'action.select-none' | 'action.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-dynamic-size-mode.menu' | 'action.toggle-dynamic-size-mode' | 'action.toggle-edge-scrolling.menu' | 'action.toggle-edge-scrolling' | 'action.toggle-focus-mode.menu' | 'action.toggle-focus-mode' | 'action.toggle-grid.menu' | 'action.toggle-grid' | 'action.toggle-lock' | 'action.toggle-paste-at-cursor.menu' | 'action.toggle-paste-at-cursor' | 'action.toggle-reduce-motion.menu' | 'action.toggle-reduce-motion' | 'action.toggle-snap-mode.menu' | 'action.toggle-snap-mode' | 'action.toggle-tool-lock.menu' | 'action.toggle-tool-lock' | 'action.toggle-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.size-too-big' | 'assets.files.type-not-allowed' | 'assets.files.upload-failed' | 'assets.url.failed' | 'color-style.black' | 'color-style.blue' | 'color-style.green' | 'color-style.grey' | 'color-style.light-blue' | 'color-style.light-green' | 'color-style.light-red' | 'color-style.light-violet' | 'color-style.orange' | 'color-style.red' | 'color-style.violet' | 'color-style.white' | 'color-style.yellow' | 'context-menu.arrange' | 'context-menu.copy-as' | 'context-menu.edit' | 'context-menu.export-all-as' | 'context-menu.export-as' | 'context-menu.move-to-page' | 'context-menu.reorder' | 'context.pages.new-page' | 'cursor-chat.type-to-chat' | 'dash-style.dashed' | 'dash-style.dotted' | 'dash-style.draw' | 'dash-style.solid' | 'debug-panel.more' | 'document-name-menu.copy-link' | '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.fill' | 'fill-style.none' | 'fill-style.pattern' | 'fill-style.semi' | 'fill-style.solid' | 'focus-mode.toggle-focus-mode' | 'font-style.draw' | 'font-style.mono' | 'font-style.sans' | 'font-style.serif' | 'geo-style.arrow-down' | 'geo-style.arrow-left' | 'geo-style.arrow-right' | 'geo-style.arrow-up' | 'geo-style.check-box' | 'geo-style.cloud' | 'geo-style.diamond' | 'geo-style.ellipse' | 'geo-style.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.docs' | 'help-menu.github' | 'help-menu.keyboard-shortcuts' | 'help-menu.privacy' | 'help-menu.terms' | '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.help' | 'menu.language' | 'menu.preferences' | 'menu.theme' | '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.copied' | 'share-menu.copy-link-note' | 'share-menu.copy-link' | 'share-menu.copy-readonly-link-note' | 'share-menu.copy-readonly-link' | 'share-menu.create-snapshot-link' | 'share-menu.creating-project' | 'share-menu.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' | 'theme.dark' | 'theme.light' | 'theme.system' | 'toast.close' | 'toast.error.copy-fail.desc' | 'toast.error.copy-fail.title' | 'toast.error.export-fail.desc' | 'toast.error.export-fail.title' | '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.pointer-down' | '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 interface TLUiTranslationProviderProps {
// (undocumented)
children: React_2.ReactNode;
overrides?: Record<string, Record<string, string>>;
}
// @public (undocumented)
export interface TLUiZoomMenuProps {
// (undocumented)
children?: ReactNode;
}
// @internal (undocumented)
export enum TLV1AlignStyle {
// (undocumented)
End = "end",
// (undocumented)
Justify = "justify",
// (undocumented)
Middle = "middle",
// (undocumented)
Start = "start"
}
// @internal (undocumented)
export interface TLV1ArrowBinding extends TLV1BaseBinding {
// (undocumented)
distance: number;
// (undocumented)
handleId: keyof TLV1ArrowShape['handles'];
// (undocumented)
point: number[];
}
// @internal (undocumented)
export interface TLV1ArrowShape extends TLV1BaseShape {
// (undocumented)
bend: number;
// (undocumented)
decorations?: {
end?: TLV1Decoration;
middle?: TLV1Decoration;
start?: TLV1Decoration;
};
// (undocumented)
handles: {
bend: TLV1Handle;
end: TLV1Handle;
start: TLV1Handle;
};
// (undocumented)
label?: string;
// (undocumented)
labelPoint?: number[];
// (undocumented)
type: TLV1ShapeType.Arrow;
}
// @internal (undocumented)
export type TLV1Asset = TLV1ImageAsset | TLV1VideoAsset;
// @internal (undocumented)
export enum TLV1AssetType {
// (undocumented)
Image = "image",
// (undocumented)
Video = "video"
}
// @internal (undocumented)
export interface TLV1BaseAsset {
// (undocumented)
id: string;
// (undocumented)
type: string;
}
// @internal (undocumented)
export interface TLV1BaseBinding {
// (undocumented)
fromId: string;
// (undocumented)
id: string;
// (undocumented)
toId: string;
}
// @internal (undocumented)
export interface TLV1BaseShape {
// (undocumented)
assetId?: string;
// (undocumented)
childIndex: number;
// (undocumented)
children?: string[];
// (undocumented)
handles?: Record<string, TLV1Handle>;
// (undocumented)
id: string;
// (undocumented)
isAspectRatioLocked?: boolean;
// (undocumented)
isGenerated?: boolean;
// (undocumented)
isGhost?: boolean;
// (undocumented)
isHidden?: boolean;
// (undocumented)
isLocked?: boolean;
// (undocumented)
label?: string;
// (undocumented)
name: string;
// (undocumented)
parentId: string;
// (undocumented)
point: number[];
// (undocumented)
rotation?: number;
// (undocumented)
style: TLV1ShapeStyles;
// (undocumented)
type: TLV1ShapeType;
}
// @internal (undocumented)
export type TLV1Binding = TLV1ArrowBinding;
// @internal (undocumented)
export interface TLV1Bounds {
// (undocumented)
height: number;
// (undocumented)
maxX: number;
// (undocumented)
maxY: number;
// (undocumented)
minX: number;
// (undocumented)
minY: number;
// (undocumented)
rotation?: number;
// (undocumented)
width: number;
}
// @internal (undocumented)
export enum TLV1ColorStyle {
// (undocumented)
Black = "black",
// (undocumented)
Blue = "blue",
// (undocumented)
Cyan = "cyan",
// (undocumented)
Gray = "gray",
// (undocumented)
Green = "green",
// (undocumented)
Indigo = "indigo",
// (undocumented)
LightGray = "lightGray",
// (undocumented)
Orange = "orange",
// (undocumented)
Red = "red",
// (undocumented)
Violet = "violet",
// (undocumented)
White = "white",
// (undocumented)
Yellow = "yellow"
}
// @internal (undocumented)
export enum TLV1DashStyle {
// (undocumented)
Dashed = "dashed",
// (undocumented)
Dotted = "dotted",
// (undocumented)
Draw = "draw",
// (undocumented)
Solid = "solid"
}
// @internal (undocumented)
export enum TLV1Decoration {
// (undocumented)
Arrow = "arrow"
}
// @internal (undocumented)
export interface TLV1Document {
// (undocumented)
assets: Record<string, TLV1Asset>;
// (undocumented)
id: string;
// (undocumented)
name: string;
// (undocumented)
pages: Record<string, TLV1Page>;
// (undocumented)
pageStates: Record<string, TLV1PageState>;
// (undocumented)
version: number;
}
// @internal (undocumented)
export interface TLV1DrawShape extends TLV1BaseShape {
// (undocumented)
isComplete: boolean;
// (undocumented)
points: number[][];
// (undocumented)
type: TLV1ShapeType.Draw;
}
// @internal (undocumented)
export interface TLV1EllipseShape extends TLV1BaseShape {
// (undocumented)
label?: string;
// (undocumented)
labelPoint?: number[];
// (undocumented)
radius: number[];
// (undocumented)
type: TLV1ShapeType.Ellipse;
}
// @internal (undocumented)
export enum TLV1FontStyle {
// (undocumented)
Mono = "mono",
// (undocumented)
Sans = "sans",
// (undocumented)
Script = "script",
// (undocumented)
Serif = "serif"
}
// @internal (undocumented)
export interface TLV1GroupShape extends TLV1BaseShape {
// (undocumented)
children: string[];
// (undocumented)
size: number[];
// (undocumented)
type: TLV1ShapeType.Group;
}
// @internal (undocumented)
export interface TLV1Handle {
// (undocumented)
bindingId?: string;
// (undocumented)
canBind?: boolean;
// (undocumented)
id: string;
// (undocumented)
index: number;
// (undocumented)
point: number[];
}
// @internal (undocumented)
export interface TLV1ImageAsset extends TLV1BaseAsset {
// (undocumented)
fileName: string;
// (undocumented)
size: number[];
// (undocumented)
src: string;
// (undocumented)
type: TLV1AssetType.Image;
}
// @internal (undocumented)
export interface TLV1ImageShape extends TLV1BaseShape {
// (undocumented)
assetId: string;
// (undocumented)
size: number[];
// (undocumented)
type: TLV1ShapeType.Image;
}
// @internal (undocumented)
export interface TLV1Page {
// (undocumented)
bindings: Record<string, TLV1Binding>;
// (undocumented)
childIndex?: number;
// (undocumented)
id: string;
// (undocumented)
name?: string;
// (undocumented)
shapes: Record<string, TLV1Shape>;
}
// @internal (undocumented)
export interface TLV1PageState {
// (undocumented)
bindingId?: null | string;
// (undocumented)
brush?: null | TLV1Bounds;
// (undocumented)
camera: {
point: number[];
zoom: number;
};
// (undocumented)
editingId?: null | string;
// (undocumented)
hoveredId?: null | string;
// (undocumented)
id: string;
// (undocumented)
pointedId?: null | string;
// (undocumented)
selectedIds: string[];
}
// @internal (undocumented)
export interface TLV1RectangleShape extends TLV1BaseShape {
// (undocumented)
label?: string;
// (undocumented)
labelPoint?: number[];
// (undocumented)
size: number[];
// (undocumented)
type: TLV1ShapeType.Rectangle;
}
// @internal (undocumented)
export type TLV1Shape = TLV1ArrowShape | TLV1DrawShape | TLV1EllipseShape | TLV1GroupShape | TLV1ImageShape | TLV1RectangleShape | TLV1StickyShape | TLV1TextShape | TLV1TriangleShape | TLV1VideoShape;
// @internal (undocumented)
export interface TLV1ShapeStyles {
// (undocumented)
color: TLV1ColorStyle;
// (undocumented)
dash: TLV1DashStyle;
// (undocumented)
font?: TLV1FontStyle;
// (undocumented)
isFilled?: boolean;
// (undocumented)
scale?: number;
// (undocumented)
size: TLV1SizeStyle;
// (undocumented)
textAlign?: TLV1AlignStyle;
}
// @internal (undocumented)
export enum TLV1ShapeType {
// (undocumented)
Arrow = "arrow",
// (undocumented)
Draw = "draw",
// (undocumented)
Ellipse = "ellipse",
// (undocumented)
Group = "group",
// (undocumented)
Image = "image",
// (undocumented)
Rectangle = "rectangle",
// (undocumented)
Sticky = "sticky",
// (undocumented)
Text = "text",
// (undocumented)
Triangle = "triangle",
// (undocumented)
Video = "video"
}
// @internal (undocumented)
export enum TLV1SizeStyle {
// (undocumented)
Large = "large",
// (undocumented)
Medium = "medium",
// (undocumented)
Small = "small"
}
// @internal (undocumented)
export interface TLV1StickyShape extends TLV1BaseShape {
// (undocumented)
size: number[];
// (undocumented)
text: string;
// (undocumented)
type: TLV1ShapeType.Sticky;
}
// @internal (undocumented)
export interface TLV1TextShape extends TLV1BaseShape {
// (undocumented)
text: string;
// (undocumented)
type: TLV1ShapeType.Text;
}
// @internal (undocumented)
export interface TLV1TriangleShape extends TLV1BaseShape {
// (undocumented)
label?: string;
// (undocumented)
labelPoint?: number[];
// (undocumented)
size: number[];
// (undocumented)
type: TLV1ShapeType.Triangle;
}
// @internal (undocumented)
export interface TLV1VideoAsset extends TLV1BaseAsset {
// (undocumented)
fileName: string;
// (undocumented)
size: number[];
// (undocumented)
src: string;
// (undocumented)
type: TLV1AssetType.Video;
}
// @internal (undocumented)
export interface TLV1VideoShape extends TLV1BaseShape {
// (undocumented)
assetId: string;
// (undocumented)
currentTime: number;
// (undocumented)
isPlaying: boolean;
// (undocumented)
size: number[];
// (undocumented)
type: TLV1ShapeType.Video;
}
// @public (undocumented)
export function ToggleAutoSizeMenuItem(): JSX_2.Element | null;
// @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 ToolbarItem({ tool }: ToolbarItemProps): JSX_2.Element;
// @public (undocumented)
export interface ToolbarItemProps {
// (undocumented)
tool: string;
}
// @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 useCollaborationStatus(): "offline" | "online" | null;
// @public (undocumented)
export function useCopyAs(): (ids: TLShapeId[], format?: TLCopyType) => void;
// @public (undocumented)
export function useCurrentTranslation(): TLUiTranslation;
// @public (undocumented)
export function useDefaultColorTheme(): {
"light-blue": TLDefaultColorThemeColor;
"light-green": TLDefaultColorThemeColor;
"light-red": TLDefaultColorThemeColor;
"light-violet": TLDefaultColorThemeColor;
background: string;
black: TLDefaultColorThemeColor;
blue: TLDefaultColorThemeColor;
green: TLDefaultColorThemeColor;
grey: TLDefaultColorThemeColor;
id: "dark" | "light";
orange: TLDefaultColorThemeColor;
red: TLDefaultColorThemeColor;
solid: string;
text: string;
violet: TLDefaultColorThemeColor;
white: TLDefaultColorThemeColor;
yellow: TLDefaultColorThemeColor;
};
// @public (undocumented)
export function useDefaultHelpers(): {
addDialog: (dialog: Omit<TLUiDialog, "id"> & {
id?: string | undefined;
}) => string;
addToast: (toast: Omit<TLUiToast, "id"> & {
id?: string | undefined;
}) => string;
clearDialogs: () => void;
clearToasts: () => void;
isMobile: boolean;
msg: (id?: string | undefined) => string;
removeDialog: (id: string) => string;
removeToast: (id: string) => string;
updateDialog: (id: string, newDialogData: Partial<TLUiDialog>) => string;
};
// @public (undocumented)
export function useDialogs(): TLUiDialogsContextType;
// @public (undocumented)
export function useEditableText(id: TLShapeId, type: string, text: string): {
handleBlur: () => void;
handleChange: (e: React_3.ChangeEvent<HTMLTextAreaElement>) => void;
handleDoubleClick: (e: any) => any;
handleFocus: () => void;
handleInputPointerDown: (e: React_3.PointerEvent) => void;
handleKeyDown: (e: React_3.KeyboardEvent<HTMLTextAreaElement>) => void;
isEditing: boolean;
isEditingAnything: boolean;
isEmpty: boolean;
rInput: React_3.RefObject<HTMLTextAreaElement>;
};
// @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<T = any>(key: string, defaultValue: T): readonly [T, (setter: ((value: T) => T) | T) => void];
// @public (undocumented)
export function useMenuClipboardEvents(): {
copy: (source: TLUiEventSource) => Promise<void>;
cut: (source: TLUiEventSource) => Promise<void>;
paste: (data: ClipboardItem[] | DataTransfer, source: TLUiEventSource, point?: VecLike) => Promise<void>;
};
// @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 usePreloadAssets(assetUrls: TLEditorAssetUrls): {
done: boolean;
error: boolean;
};
// @public (undocumented)
export function useReadonly(): boolean;
// @public (undocumented)
export function useRelevantStyles(stylesToCheck?: readonly StyleProp<any>[]): null | ReadonlySharedStyleMap;
// @public (undocumented)
export function useShowCollaborationUi(): boolean;
// @public (undocumented)
export function useTldrawUiComponents(): TLUiComponents;
// @public (undocumented)
export function useToasts(): TLUiToastsContextType;
// @public (undocumented)
export function useTools(): TLUiToolsContextType;
// @public
export function useTranslation(): (id?: Exclude<string, TLUiTranslationKey> | string) => string;
// @public (undocumented)
export function useUiEvents(): TLUiEventContextType;
// @public (undocumented)
export class VideoShapeUtil extends BaseBoxShapeUtil<TLVideoShape> {
// (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: TLPropsMigrations;
// (undocumented)
static props: RecordProps<TLVideoShape>;
// (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(): TLStateNodeConstructor[];
// (undocumented)
static id: string;
// (undocumented)
info: TLPointerEventInfo & {
onInteractionEnd?: string | undefined;
};
// (undocumented)
static initial: string;
// (undocumented)
static isLockable: boolean;
// (undocumented)
onEnter(info: TLPointerEventInfo & {
onInteractionEnd: string;
}): void;
// (undocumented)
onExit(): void;
// (undocumented)
onInterrupt(): void;
// (undocumented)
onKeyDown(): void;
// (undocumented)
onKeyUp(info: TLKeyboardEventInfo): void;
}
// @public (undocumented)
export function ZoomToSelectionMenuItem(): JSX_2.Element;
export * from "@tldraw/editor";
// (No @packageDocumentation comment for this package)