/// import { App } from '@tldraw/editor'; import { Context } from 'react'; import { ForwardRefExoticComponent } from 'react'; import { MemoExoticComponent } from 'react'; import { NamedExoticComponent } from 'react'; import * as React_2 from 'react'; import { default as React_3 } from 'react'; import { ReactNode } from 'react'; import { RefAttributes } from 'react'; import { TLCopyType } from '@tldraw/editor'; import { TLExportType } from '@tldraw/editor'; import { TLShapeId } from '@tldraw/editor'; import { TLStyleItem } from '@tldraw/editor'; import { TLStyleType } from '@tldraw/editor'; import { VecLike } from '@tldraw/primitives'; /** @public */ export declare interface ActionItem { icon?: TLUiIconType; id: string; kbd?: string; title?: string; label?: TLTranslationKey; menuLabel?: TLTranslationKey; shortcutsLabel?: TLTranslationKey; contextMenuLabel?: TLTranslationKey; readonlyOk: boolean; checkbox?: boolean; onSelect: () => Promise | void; } /** @public */ export declare const ActionsContext: React_2.Context; /** @public */ export declare type ActionsContextType = Record; /** @public */ export declare const ActionsMenuSchemaContext: React_3.Context; /** @public */ export declare type ActionsMenuSchemaContextType = MenuSchema; /** @public */ export declare const ActionsMenuSchemaProvider: MemoExoticComponent<({ overrides, children, }: ActionsMenuSchemaProviderProps) => JSX.Element>; /** @public */ export declare type ActionsMenuSchemaProviderProps = { overrides?: (app: App, schema: ActionsMenuSchemaContextType, helpers: { actions: ReturnType; oneSelected: boolean; twoSelected: boolean; threeSelected: boolean; }) => ActionsMenuSchemaContextType; children: any; }; /** @public */ export declare function ActionsProvider({ overrides, children }: ActionsProviderProps): JSX.Element; /** @public */ export declare type ActionsProviderProps = { overrides?: (app: App, actions: ActionsContextType, helpers: undefined) => ActionsContextType; children: any; }; /** @public */ export declare const BASE_URL: string; /** @public */ declare function Body_2({ className, children, style, }: { className?: string; children: any; style?: React.CSSProperties; }): JSX.Element; /** @public */ export declare function BreakPointProvider({ children }: { children: any; }): JSX.Element; /** @public */ export declare const Button: React_2.ForwardRefExoticComponent>; /** @public */ export declare const ButtonPicker: React_2.MemoExoticComponent; declare function _ButtonPicker(props: ButtonPickerProps): JSX.Element; /** @public */ export declare interface ButtonPickerProps { title: string; items: T[]; styleType: TLStyleType; value?: string | number | null; columns?: 2 | 3 | 4; 'data-wd'?: string; onValueChange: (item: T, squashing: boolean) => void; } /** @public */ export declare interface ButtonProps extends React_2.HTMLAttributes { loading?: boolean; disabled?: boolean; label?: TLTranslationKey; icon?: TLUiIconType; spinner?: boolean; iconLeft?: TLUiIconType; smallIcon?: boolean; kbd?: string; isChecked?: boolean; invertIcon?: boolean; type?: 'primary' | 'danger' | 'normal'; } /** @public */ declare function CheckboxItem({ children, onSelect, ...rest }: DropdownMenuCheckboxItemProps): JSX.Element; /** @public */ declare function CloseButton(): JSX.Element; /** @public */ export declare function compactMenuItems(arr: T[]): Exclude[]; /** @public */ declare function Content({ side, align, sideOffset, alignOffset, children, }: { children: any; alignOffset?: number; sideOffset?: number; align?: 'start' | 'center' | 'end'; side?: 'bottom' | 'top' | 'right' | 'left'; }): JSX.Element; /** @public */ export declare const ContextMenu: ({ children }: { children: any; }) => JSX.Element; /** @public */ export declare interface ContextMenuProps { children: any; } /** @public */ export declare const ContextMenuSchemaContext: React_3.Context; /** @public */ export declare type ContextMenuSchemaContextType = MenuSchema; /** @public */ export declare const ContextMenuSchemaProvider: MemoExoticComponent<({ overrides, children, }: ContextMenuSchemaProviderProps) => JSX.Element>; /** @public */ export declare type ContextMenuSchemaProviderProps = { overrides?: (app: App, schema: ContextMenuSchemaContextType, helpers: { actions: ReturnType; oneSelected: boolean; twoSelected: boolean; threeSelected: boolean; showAutoSizeToggle: boolean; showUngroup: boolean; onlyFlippableShapeSelected: boolean; }) => ContextMenuSchemaContextType; children: any; }; /** @public */ export declare type CustomMenuItem = { id: string; type: 'custom'; disabled: boolean; readonlyOk: boolean; }; /** @public */ export declare const DebugPanel: React_2.NamedExoticComponent<{ renderDebugMenuItems: (() => React_2.ReactNode) | null; }>; /** @public */ export declare const DEFAULT_TRANSLATION: TLTranslation; declare type DefaultHelpers = ReturnType; declare namespace Dialog { export { Header, Title, CloseButton, Body_2 as Body, Footer } } export { Dialog } /** @public */ export declare interface DialogProps { onClose: () => void; } /** @public */ export declare const DialogsContext: Context; /** @public */ export declare type DialogsContextType = { addDialog: (dialog: Omit & { id?: string; }) => string; removeDialog: (id: string) => string; updateDialog: (id: string, newDialogData: Partial) => string; clearDialogs: () => void; dialogs: TLDialog[]; }; /** @public */ export declare function DialogsProvider({ children }: DialogsProviderProps): JSX.Element; /** @public */ export declare type DialogsProviderProps = { overrides?: (app: App) => DialogsContextType; children: any; }; declare namespace DropdownMenu { export { Root, Trigger, Content, Sub, SubTrigger, SubContent, Group, Indicator, Item, CheckboxItem, DropdownMenuItemProps, DropdownMenuCheckboxItemProps } } export { DropdownMenu } /** @public */ declare interface DropdownMenuCheckboxItemProps { checked?: boolean; onSelect?: (e: Event) => void; disabled?: boolean; title: string; children: any; } /** @public */ declare interface DropdownMenuItemProps extends ButtonProps { noClose?: boolean; } /** @public */ export declare type EmbedInfo = { width: number; height: number; doesResize: boolean; isEmbedUrl: (url: string) => boolean; toEmbed: (url: string) => string; }; /** @public */ export declare function fetchTranslation(locale: TLTranslationLocale): Promise; /** @public */ export declare function findMenuItem(menu: MenuSchema, path: string[]): MenuChild; /** @public */ declare function Footer({ className, children }: { className?: string; children: any; }): JSX.Element; /** @public */ export declare const getActiveToolId: (app: App) => string | undefined; /** @public */ export declare const getBaseUrl: () => string; /** @public */ export declare function getTranslation(locale: TLTranslationLocale): Promise; /** @public */ declare function Group({ children, size, }: { children: any; size?: 'tiny' | 'small' | 'medium' | 'wide'; }): JSX.Element; /** @public */ declare function Header({ className, children }: { className?: string; children: any; }): JSX.Element; /** @public */ export declare const HelpMenu: React_2.NamedExoticComponent; declare interface HelpMenuLink { label: TLTranslationKey; icon: TLUiIconType; url: string; } /** @public */ export declare interface HelpMenuProps { links?: HelpMenuLink[]; } /* Excluded from this release type: HelpMenuSchemaContext */ /** @public */ export declare const HelpMenuSchemaProvider: MemoExoticComponent<({ overrides, children, }: HelpMenuSchemaProviderProps) => JSX.Element>; /** @public */ export declare type HelpMenuSchemaProviderProps = { overrides?: (app: App, schema: HelpMenuSchemaProviderType, helpers: { actions: ReturnType; languages: TLListedTranslation[]; currentLanguage: string; oneSelected: boolean; twoSelected: boolean; threeSelected: boolean; }) => HelpMenuSchemaProviderType; children: any; }; /** @public */ export declare type HelpMenuSchemaProviderType = MenuSchema; /** @public */ export declare const HTMLCanvas: MemoExoticComponent<() => JSX.Element>; /** @public */ export declare const Icon: ForwardRefExoticComponent & RefAttributes>; /** @public */ export declare interface IconProps extends React.HTMLProps { icon: TLUiIconType; small?: boolean; children?: undefined; invertIcon?: boolean; crossOrigin?: 'anonymous' | 'use-credentials'; } /** @public */ declare function Indicator(): JSX.Element; /** @public */ export declare const Input: React_2.ForwardRefExoticComponent>; /** @public */ export declare interface InputProps { disabled?: boolean; label?: TLTranslationKey; icon?: TLUiIconType; iconLeft?: TLUiIconType; autofocus?: boolean; autoselect?: boolean; children?: any; defaultValue?: string; placeholder?: string; onComplete?: (value: string) => void; onValueChange?: (value: string) => void; onCancel?: (value: string) => void; className?: string; /** * Usually on iOS when you focus an input, the browser will adjust the * viewport to bring the input into view. Sometimes this doesn't work * properly though - for example, if the input is newly created, iOS seems * to have a hard time adjusting the viewport for it. This prop allows you * to opt-in to some extra code to manually bring the input into view when * the visual viewport of the browser changes, but we don't want to use it * everywhere because generally the native behavior looks nicer in scenarios * where it's sufficient. */ shouldManuallyMaintainScrollPositionWhenFocused?: boolean; } /** @public */ export declare const isActiveToolItem: (item: ToolItem, activeToolId: string | undefined, geoState: string | null | undefined) => boolean; /** @public */ declare function Item({ noClose, ...props }: DropdownMenuItemProps): JSX.Element; /** @public */ export declare function Kbd({ children }: KbdProps): JSX.Element; /** @public */ export declare function kbd(str: string): string[]; /** @public */ export declare interface KbdProps { children: string; } /** @public */ export declare function kbdStr(str: string): string; /** @public */ export declare const KeyboardShortcutsSchemaContext: React_3.Context; /** @public */ export declare type KeyboardShortcutsSchemaContextType = MenuSchema; /** @public */ export declare const KeyboardShortcutsSchemaProvider: MemoExoticComponent<({ overrides, children, }: KeyboardShortcutsSchemaProviderProps) => JSX.Element>; /** @public */ export declare type KeyboardShortcutsSchemaProviderProps = { overrides?: (app: App, schema: KeyboardShortcutsSchemaContextType, more: { tools: ToolsContextType; actions: ActionsContextType; }) => KeyboardShortcutsSchemaContextType; children: any; }; declare const main: { 'action.convert-to-bookmark': string; 'action.convert-to-embed': string; 'action.open-embed-link': string; 'action.align-bottom': string; 'action.align-center-horizontal': string; 'action.align-center-vertical': string; 'action.align-center-horizontal.short': string; 'action.align-center-vertical.short': string; 'action.align-left': string; 'action.align-right': string; 'action.align-top': string; 'action.back-to-content': string; 'action.bring-forward': string; 'action.bring-to-front': string; 'action.copy-as-json.short': string; 'action.copy-as-json': string; 'action.copy-as-png.short': string; 'action.copy-as-png': string; 'action.copy-as-svg.short': string; 'action.copy-as-svg': string; 'action.copy': string; 'action.cut': string; 'action.delete': string; 'action.distribute-horizontal': string; 'action.distribute-vertical': string; 'action.distribute-horizontal.short': string; 'action.distribute-vertical.short': string; 'action.duplicate': string; 'action.edit-link': string; 'action.exit-pen-mode': string; 'action.export-as-json.short': string; 'action.export-as-json': string; 'action.export-as-png.short': string; 'action.export-as-png': string; 'action.export-as-svg.short': string; 'action.export-as-svg': string; 'action.flip-horizontal': string; 'action.flip-vertical': string; 'action.flip-horizontal.short': string; 'action.flip-vertical.short': string; 'action.group': string; 'action.insert-media': string; 'action.new-shared-project': string; 'action.nudge-down': string; 'action.nudge-left': string; 'action.nudge-right': string; 'action.nudge-up': string; 'action.open-file': string; 'action.pack': string; 'action.paste': string; 'action.print': string; 'action.redo': string; 'action.rotate-ccw': string; 'action.rotate-cw': string; 'action.save-copy': string; 'action.select-all': string; 'action.select-none': string; 'action.send-backward': string; 'action.send-to-back': string; 'action.share-project': string; 'action.stack-horizontal': string; 'action.stack-vertical': string; 'action.stack-horizontal.short': string; 'action.stack-vertical.short': string; 'action.stretch-horizontal': string; 'action.stretch-vertical': string; 'action.stretch-horizontal.short': string; 'action.stretch-vertical.short': string; 'action.toggle-auto-size': string; 'action.toggle-dark-mode.menu': string; 'action.toggle-dark-mode': string; 'action.toggle-debug-mode.menu': string; 'action.toggle-debug-mode': string; 'action.toggle-focus-mode.menu': string; 'action.toggle-focus-mode': string; 'action.toggle-grid.menu': string; 'action.toggle-grid': string; 'action.toggle-snap-mode.menu': string; 'action.toggle-snap-mode': string; 'action.toggle-tool-lock.menu': string; 'action.toggle-tool-lock': string; 'action.toggle-transparent.context-menu': string; 'action.toggle-transparent.menu': string; 'action.toggle-transparent': string; 'action.undo': string; 'action.ungroup': string; 'action.zoom-in': string; 'action.zoom-out': string; 'action.zoom-to-100': string; 'action.zoom-to-fit': string; 'action.zoom-to-selection': string; 'color-style.black': string; 'color-style.blue': string; 'color-style.green': string; 'color-style.grey': string; 'color-style.light-blue': string; 'color-style.light-green': string; 'color-style.light-red': string; 'color-style.light-violet': string; 'color-style.orange': string; 'color-style.red': string; 'color-style.violet': string; 'color-style.yellow': string; 'fill-style.none': string; 'fill-style.semi': string; 'fill-style.solid': string; 'fill-style.pattern': string; 'dash-style.dashed': string; 'dash-style.dotted': string; 'dash-style.draw': string; 'dash-style.solid': string; 'size-style.s': string; 'size-style.m': string; 'size-style.l': string; 'size-style.xl': string; 'opacity-style.0.1': string; 'opacity-style.0.25': string; 'opacity-style.0.5': string; 'opacity-style.0.75': string; 'opacity-style.1': string; 'font-style.draw': string; 'font-style.sans': string; 'font-style.serif': string; 'font-style.mono': string; 'align-style.start': string; 'align-style.middle': string; 'align-style.end': string; 'align-style.justify': string; 'geo-style.arrow-down': string; 'geo-style.arrow-left': string; 'geo-style.arrow-right': string; 'geo-style.arrow-up': string; 'geo-style.diamond': string; 'geo-style.ellipse': string; 'geo-style.hexagon': string; 'geo-style.octagon': string; 'geo-style.oval': string; 'geo-style.pentagon': string; 'geo-style.rectangle': string; 'geo-style.rhombus-2': string; 'geo-style.rhombus': string; 'geo-style.star': string; 'geo-style.trapezoid': string; 'geo-style.triangle': string; 'geo-style.x-box': string; 'arrowheadStart-style.none': string; 'arrowheadStart-style.arrow': string; 'arrowheadStart-style.bar': string; 'arrowheadStart-style.diamond': string; 'arrowheadStart-style.dot': string; 'arrowheadStart-style.inverted': string; 'arrowheadStart-style.pipe': string; 'arrowheadStart-style.square': string; 'arrowheadStart-style.triangle': string; 'arrowheadEnd-style.none': string; 'arrowheadEnd-style.arrow': string; 'arrowheadEnd-style.bar': string; 'arrowheadEnd-style.diamond': string; 'arrowheadEnd-style.dot': string; 'arrowheadEnd-style.inverted': string; 'arrowheadEnd-style.pipe': string; 'arrowheadEnd-style.square': string; 'arrowheadEnd-style.triangle': string; 'spline-style.line': string; 'spline-style.cubic': string; 'tool.select': string; 'tool.hand': string; 'tool.draw': string; 'tool.eraser': string; 'tool.arrow-down': string; 'tool.arrow-left': string; 'tool.arrow-right': string; 'tool.arrow-up': string; 'tool.arrow': string; 'tool.diamond': string; 'tool.ellipse': string; 'tool.hexagon': string; 'tool.line': string; 'tool.octagon': string; 'tool.oval': string; 'tool.pentagon': string; 'tool.rectangle': string; 'tool.rhombus': string; 'tool.star': string; 'tool.trapezoid': string; 'tool.triangle': string; 'tool.x-box': string; 'tool.asset': string; 'tool.frame': string; 'tool.note': string; 'tool.embed': string; 'tool.text': string; 'menu.title': string; 'menu.copy-as': string; 'menu.edit': string; 'menu.export-as': string; 'menu.file': string; 'menu.language': string; 'menu.preferences': string; 'menu.view': string; 'context-menu.arrange': string; 'context-menu.copy-as': string; 'context-menu.export-as': string; 'context-menu.move-to-page': string; 'context-menu.reorder': string; 'page-menu.title': string; 'page-menu.create-new-page': string; 'page-menu.edit-pages': string; 'page-menu.max-page-count-reached': string; 'page-menu.new-page-initial-name': string; 'page-menu.page': string; 'page-menu.edit-start': string; 'page-menu.edit-done': string; 'page-menu.submenu.rename': string; 'page-menu.submenu.duplicate-page': string; 'page-menu.submenu.go-to-page': string; 'page-menu.submenu.title': string; 'page-menu.submenu.move-down': string; 'page-menu.submenu.move-up': string; 'page-menu.submenu.delete': string; 'share-menu.title': string; 'share-menu.share-project': string; 'share-menu.create-project': string; 'share-menu.copy-link': string; 'share-menu.readonly-link': string; 'share-menu.copy-readonly-link': string; 'share-menu.offline-note': string; 'share-menu.copy-link-note': string; 'share-menu.copy-readonly-link-note': string; 'share-menu.project-too-large': string; 'people-menu.title': string; 'people-menu.change-name': string; 'people-menu.change-color': string; 'people-menu.user': string; 'people-menu.invite': string; 'debug-menu.hard-reset': string; 'debug-menu.create-shapes': string; 'help-menu.title': string; 'help-menu.about': string; 'help-menu.discord': string; 'help-menu.github': string; 'help-menu.keyboard-shortcuts': string; 'help-menu.twitter': string; 'links-menu.about': string; 'links-menu.discord': string; 'links-menu.github': string; 'links-menu.twitter': string; 'actions-menu.title': string; 'edit-link-dialog.title': string; 'edit-link-dialog.invalid-url': string; 'edit-link-dialog.detail': string; 'edit-link-dialog.url': string; 'edit-link-dialog.clear': string; 'edit-link-dialog.save': string; 'edit-link-dialog.cancel': string; 'embed-dialog.title': string; 'embed-dialog.url-title': string; 'embed-dialog.url-label': string; 'embed-dialog.back': string; 'embed-dialog.create': string; 'embed-dialog.cancel': string; 'embed-dialog.url': string; 'embed-dialog.instruction': string; 'embed-dialog.invalid-url': string; 'embed-dialog.more-info': string; 'edit-pages-dialog.title': string; 'edit-pages-dialog.create-new-page': string; 'edit-pages-dialog.delete': string; 'edit-pages-dialog.duplicate-page': string; 'edit-pages-dialog.go-to-page': string; 'edit-pages-dialog.max-page-count-reached': string; 'edit-pages-dialog.more-menu': string; 'edit-pages-dialog.move-down': string; 'edit-pages-dialog.move-up': string; 'edit-pages-dialog.new-page-initial-name': string; 'reload-file-dialog.title': string; 'reload-file-dialog.description': string; 'reload-file-dialog.failure': string; 'reload-file-dialog.reload': string; 'reload-file-dialog.revert': string; 'shortcuts-dialog.title': string; 'shortcuts-dialog.edit': string; 'shortcuts-dialog.file': string; 'shortcuts-dialog.preferences': string; 'shortcuts-dialog.tools': string; 'shortcuts-dialog.transform': string; 'shortcuts-dialog.view': string; 'shortcuts-dialog.save': string; 'style-panel.title': string; 'style-panel.align': string; 'style-panel.arrowheads': string; 'style-panel.color': string; 'style-panel.dash': string; 'style-panel.fill': string; 'style-panel.font': string; 'style-panel.geo': string; 'style-panel.label': string; 'style-panel.mixed': string; 'style-panel.opacity': string; 'style-panel.size': string; 'style-panel.spline': string; 'style-panel.text': string; 'tool-panel.drawing': string; 'tool-panel.geo': string; 'tool-panel.shapes': string; 'tool-panel.things': string; 'tool-panel.tools': string; 'save-changes-prompt.title': string; 'save-changes-prompt.description': string; 'save-changes-prompt.go-back': string; 'save-changes-prompt.continue': string; 'navigation-zone.toggle-minimap': string; 'navigation-zone.zoom': string; 'focus-mode.toggle-focus-mode': string; 'toast.close': string; 'file-system.file-open-error.title': string; 'file-system.file-open-error.not-a-tldraw-file': string; 'file-system.file-open-error.file-format-version-too-new': string; 'file-system.file-open-error.generic-corrupted-file': string; 'file-system.confirm-open.title': string; 'file-system.confirm-open.description': string; 'file-system.confirm-open.cancel': string; 'file-system.confirm-open.open': string; 'file-system.confirm-open.dont-show-again': string; 'toast.error.export-fail.title': string; 'toast.error.export-fail.desc': string; 'toast.error.copy-fail.title': string; 'toast.error.copy-fail.desc': string; }; /** @public */ export declare type MenuChild = MenuItem | SubMenu | MenuGroup | CustomMenuItem; /** @public */ export declare function menuCustom(id: string, opts?: Partial<{ readonlyOk: boolean; disabled: boolean; }>): { id: string; type: "custom"; disabled: boolean; readonlyOk: boolean; }; /** @public */ export declare type MenuGroup = { id: string; type: 'group'; checkbox: boolean; disabled: boolean; readonlyOk: boolean; children: MenuChild[]; }; /** @public */ export declare function menuGroup(id: string, ...children: (MenuChild | null | false)[]): MenuGroup | null; /** @public */ export declare type MenuItem = { id: string; type: 'item'; readonlyOk: boolean; actionItem: ActionItem; disabled: boolean; checked: boolean; }; /** @public */ export declare function menuItem(actionItem: ActionItem | ToolItem, opts?: Partial<{ checked: boolean; disabled: boolean; }>): MenuItem; /** @public */ export declare type MenuSchema = (MenuGroup | MenuItem | CustomMenuItem)[]; /** @public */ export declare const MenuSchemaContext: React_3.Context; /** @public */ export declare type MenuSchemaContextType = MenuSchema; /** @public */ export declare function MenuSchemaProvider({ overrides, children }: MenuSchemaProviderProps): JSX.Element; /** @public */ export declare type MenuSchemaProviderProps = { overrides?: (app: App, schema: MenuSchemaContextType, helpers: { actions: ReturnType; noneSelected: boolean; oneSelected: boolean; twoSelected: boolean; threeSelected: boolean; }) => MenuSchemaContextType; children: any; }; /** @public */ export declare function menuSubmenu(id: string, label: TLTranslationKey, ...children: (MenuChild | null | false)[]): SubMenu | null; /** @public */ export declare const NavigationZone: NamedExoticComponent; /** @public */ declare function Root({ id, open, children, modal, }: { id: string; children: any; open?: boolean; modal?: boolean; }): JSX.Element; /** @public */ export declare const showUiPaste: boolean; /** @public */ export declare function Slider(props: SliderProps): JSX.Element; /** @public */ export declare interface SliderProps { steps: number; value: number | null; label: string; title: string; onValueChange: (value: number, emphemeral: boolean) => void; 'data-wd'?: string; } /** @public */ export declare const StylePanel: MemoExoticComponent<({ isMobile }: StylePanelProps) => JSX.Element | null>; declare interface StylePanelProps { isMobile?: boolean; } /** @public */ declare function Sub({ id, children, open }: { id: string; children: any; open?: boolean; }): JSX.Element; /** @public */ declare function SubContent({ alignOffset, sideOffset, children, }: { alignOffset?: number; sideOffset?: number; children: any; }): JSX.Element; /** @public */ export declare type SubMenu = { id: string; type: 'submenu'; label: TLTranslationKey; disabled: boolean; readonlyOk: boolean; children: MenuChild[]; }; /** @public */ declare function SubTrigger({ label, 'data-wd': dataWd, 'data-direction': dataDirection, }: { label: TLTranslationKey; 'data-wd'?: string; 'data-direction'?: 'left' | 'right'; }): JSX.Element; /** @public */ declare function Title({ className, children }: { className?: string; children: any; }): JSX.Element; /** @public */ export declare interface TLDialog { id: string; onClose?: () => void; component: (props: DialogProps) => any; } /** @public */ export declare const TldrawUi: React_3.NamedExoticComponent<{ shareZone?: ReactNode; renderDebugMenuItems?: (() => React_3.ReactNode) | undefined; children?: any; } & TldrawUiContextProviderProps>; /** @public */ export declare const TldrawUiContent: React_3.NamedExoticComponent<{ shareZone?: ReactNode; renderDebugMenuItems?: (() => React_3.ReactNode) | undefined; }>; /** @public */ export declare function TldrawUiContextProvider({ overrides, children }: TldrawUiContextProviderProps): JSX.Element; /** @public */ export declare interface TldrawUiContextProviderProps { overrides?: TldrawUiOverrides | TldrawUiOverrides[]; children?: any; } declare type TldrawUiOverride = (app: App, schema: Type, helpers: Helpers) => Type; /** @public */ export declare interface TldrawUiOverrides { actionsMenu?: WithDefaultHelpers>; actions?: WithDefaultHelpers>; contextMenu?: WithDefaultHelpers>; helpMenu?: WithDefaultHelpers>; menu?: WithDefaultHelpers>; toolbar?: WithDefaultHelpers>; keyboardShortcutsMenu?: WithDefaultHelpers>; tools?: WithDefaultHelpers>; translations?: TranslationProviderProps['overrides']; } /** @public */ export declare type TLListedTranslation = { readonly locale: string; readonly label: string; }; /** @public */ export declare interface TLToast { id: string; icon?: string; title?: string; description?: string; actions?: TLToastAction[]; } /** @public */ export declare interface TLToastAction { type: 'primary' | 'secondary' | 'warn'; label: string; onClick: () => void; } /** @public */ export declare type TLTranslation = { readonly locale: string; readonly label: string; readonly messages: TLTranslationMessages; }; /** @public */ export declare type TLTranslationKey = keyof TLTranslationMessages; /** @public */ export declare type TLTranslationLocale = TLTranslations[number]['locale']; /** @public */ export declare type TLTranslationMessages = typeof main; /** @public */ export declare type TLTranslations = TLTranslation[]; /** @public */ export declare 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' | 'aspect-ratio' | 'avatar' | 'blob' | 'bring-forward' | 'bring-to-front' | 'check' | 'checkbox-checked' | 'checkbox-empty' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'chevrons-ne' | 'chevrons-sw' | 'clipboard-copy' | 'code' | 'codepen' | 'codesandbox' | 'collab' | 'color' | 'comment' | 'cross-2' | 'cross' | 'dash-dashed' | 'dash-dotted' | 'dash-draw' | 'dash-solid' | 'discord' | 'distribute-horizontal' | 'distribute-vertical' | 'dot' | 'dots-horizontal' | 'dots-vertical' | 'drag-handle-dots' | 'duplicate' | 'edit' | 'excalidraw' | 'external-link' | 'felt' | 'figma' | 'file' | 'fill-none' | 'fill-pattern' | 'fill-semi' | 'fill-solid' | 'font-draw' | 'font-mono' | 'font-sans' | 'font-serif' | 'geo-arrow-down' | 'geo-arrow-left' | 'geo-arrow-right' | 'geo-arrow-up' | 'geo-diamond' | 'geo-ellipse' | 'geo-hexagon' | 'geo-octagon' | 'geo-oval' | 'geo-pentagon' | 'geo-rectangle' | 'geo-rhombus-2' | 'geo-rhombus' | 'geo-star' | 'geo-trapezoid' | 'geo-triangle' | 'geo-x-box' | 'github-embed' | 'github' | 'group' | 'hidden' | 'image' | 'info-circle' | 'link' | 'lock-small' | 'lock' | 'map' | 'menu-brand' | 'menu' | 'minus' | 'mixed' | 'pack' | 'page' | 'plus' | 'question-mark-circle' | 'question-mark' | 'redo' | 'replit' | 'reset-zoom' | 'rotate-ccw' | 'rotate-cw' | 'ruler' | 'scratch' | 'search' | 'send-backward' | 'send-to-back' | 'settings-horizontal' | 'settings-vertical-1' | 'settings-vertical' | 'share-1' | 'share-2' | 'size-extra-large' | 'size-large' | 'size-medium' | 'size-small' | 'spline-cubic' | 'spline-line' | 'spotify' | 'stack-horizontal' | 'stack-vertical' | 'stretch-horizontal' | 'stretch-vertical' | 'text-align-center' | 'text-align-justify' | 'text-align-left' | 'text-align-right' | 'tldraw-embed' | 'tool-arrow' | 'tool-embed' | 'tool-eraser' | 'tool-frame' | 'tool-hand' | 'tool-highlighter' | 'tool-line' | 'tool-media' | 'tool-note' | 'tool-pencil' | 'tool-pointer' | 'tool-text' | 'trash' | 'triangle-down' | 'triangle-up' | 'twitter' | 'undo' | 'ungroup' | 'unlock-small' | 'unlock' | 'vimeo' | 'visible' | 'warning-triangle' | 'youtube' | 'zoom-in' | 'zoom-out'; /** @public */ export declare const ToastsContext: Context; /** @public */ export declare type ToastsContextType = { addToast: (toast: Omit & { id?: string; }) => string; removeToast: (id: TLToast['id']) => string; clearToasts: () => void; toasts: TLToast[]; }; /** @public */ export declare function ToastsProvider({ children }: ToastsProviderProps): JSX.Element; /** @public */ export declare type ToastsProviderProps = { overrides?: (app: App) => ToastsContextType; children: any; }; /** @public */ export declare type ToolbarItem = { id: string; type: 'item'; readonlyOk: boolean; toolItem: ToolItem; }; /** @public */ export declare function toolbarItem(toolItem: ToolItem): ToolbarItem; /** @public */ export declare const ToolbarSchemaContext: React_3.Context; /** @public */ export declare type ToolbarSchemaContextType = ToolbarItem[]; /** @public */ export declare function ToolbarSchemaProvider({ overrides, children }: ToolbarSchemaProviderProps): JSX.Element; /** @public */ export declare type ToolbarSchemaProviderProps = { overrides?: (app: App, schema: ToolbarSchemaContextType, more: { tools: ToolsContextType; }) => ToolbarSchemaContextType; children: any; }; /** @public */ export declare interface ToolItem { id: string; label: TLTranslationKey; shortcutsLabel?: TLTranslationKey; icon: TLUiIconType; onSelect: () => void; kbd?: string; readonlyOk: boolean; meta?: { [key: string]: any; }; } /** @public */ export declare const ToolsContext: React_2.Context; /** @public */ export declare type ToolsContextType = Record; /** @public */ export declare function ToolsProvider({ overrides, children }: ToolsProviderProps): JSX.Element; /** @public */ export declare type ToolsProviderProps = { overrides?: (app: App, tools: ToolsContextType, helpers: { insertMedia: () => void; }) => ToolsContextType; children: any; }; /** @public */ export declare function toStartCase(str: string): string; /** * Provides a translation context to the app. * * @public */ export declare const TranslationProvider: MemoExoticComponent<({ overrides, children, }: TranslationProviderProps) => JSX.Element>; /** @public */ export declare interface TranslationProviderProps { children: any; /** (optional) A collection of overrides different locales. * @example * ```ts * * ``` */ overrides?: Record>; } /** @public */ export declare const TRANSLATIONS: TLListedTranslation[]; /** @public */ declare function Trigger({ children, 'data-wd': dataWd }: { children: any; 'data-wd'?: string; }): JSX.Element; /** @public */ export declare function useActions(): ActionsContextType; /** @public */ export declare function useActionsMenuSchema(): MenuSchema; /** @public */ export declare const useAllowGroup: () => boolean; /** @public */ export declare const useAllowUngroup: () => boolean; /** @public */ export declare function useAppEvents(): void; /** @public */ export declare function useBreakpoint(): number; /** @public */ export declare function useCanRedo(): boolean; /** @public */ export declare function useCanUndo(): boolean; /** @public */ export declare function useContextMenuSchema(): MenuSchema; /** @public */ export declare function useCopyAs(): (ids?: TLShapeId[], format?: TLCopyType) => void; /** @public */ export declare function useDefaultHelpers(): { addToast: (toast: Omit & { id?: string | undefined; }) => string; removeToast: (id: string) => string; clearToasts: () => void; addDialog: (dialog: Omit & { id?: string | undefined; }) => string; clearDialogs: () => void; removeDialog: (id: string) => string; updateDialog: (id: string, newDialogData: Partial) => string; msg: (id: "action.convert-to-bookmark" | "action.convert-to-embed" | "action.open-embed-link" | "action.align-bottom" | "action.align-center-horizontal" | "action.align-center-vertical" | "action.align-center-horizontal.short" | "action.align-center-vertical.short" | "action.align-left" | "action.align-right" | "action.align-top" | "action.back-to-content" | "action.bring-forward" | "action.bring-to-front" | "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" | "action.distribute-vertical" | "action.distribute-horizontal.short" | "action.distribute-vertical.short" | "action.duplicate" | "action.edit-link" | "action.exit-pen-mode" | "action.export-as-json.short" | "action.export-as-json" | "action.export-as-png.short" | "action.export-as-png" | "action.export-as-svg.short" | "action.export-as-svg" | "action.flip-horizontal" | "action.flip-vertical" | "action.flip-horizontal.short" | "action.flip-vertical.short" | "action.group" | "action.insert-media" | "action.new-shared-project" | "action.nudge-down" | "action.nudge-left" | "action.nudge-right" | "action.nudge-up" | "action.open-file" | "action.pack" | "action.paste" | "action.print" | "action.redo" | "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" | "action.stack-vertical" | "action.stack-horizontal.short" | "action.stack-vertical.short" | "action.stretch-horizontal" | "action.stretch-vertical" | "action.stretch-horizontal.short" | "action.stretch-vertical.short" | "action.toggle-auto-size" | "action.toggle-dark-mode.menu" | "action.toggle-dark-mode" | "action.toggle-debug-mode.menu" | "action.toggle-debug-mode" | "action.toggle-focus-mode.menu" | "action.toggle-focus-mode" | "action.toggle-grid.menu" | "action.toggle-grid" | "action.toggle-snap-mode.menu" | "action.toggle-snap-mode" | "action.toggle-tool-lock.menu" | "action.toggle-tool-lock" | "action.toggle-transparent.context-menu" | "action.toggle-transparent.menu" | "action.toggle-transparent" | "action.undo" | "action.ungroup" | "action.zoom-in" | "action.zoom-out" | "action.zoom-to-100" | "action.zoom-to-fit" | "action.zoom-to-selection" | "color-style.black" | "color-style.blue" | "color-style.green" | "color-style.grey" | "color-style.light-blue" | "color-style.light-green" | "color-style.light-red" | "color-style.light-violet" | "color-style.orange" | "color-style.red" | "color-style.violet" | "color-style.yellow" | "fill-style.none" | "fill-style.semi" | "fill-style.solid" | "fill-style.pattern" | "dash-style.dashed" | "dash-style.dotted" | "dash-style.draw" | "dash-style.solid" | "size-style.s" | "size-style.m" | "size-style.l" | "size-style.xl" | "opacity-style.0.1" | "opacity-style.0.25" | "opacity-style.0.5" | "opacity-style.0.75" | "opacity-style.1" | "font-style.draw" | "font-style.sans" | "font-style.serif" | "font-style.mono" | "align-style.start" | "align-style.middle" | "align-style.end" | "align-style.justify" | "geo-style.arrow-down" | "geo-style.arrow-left" | "geo-style.arrow-right" | "geo-style.arrow-up" | "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" | "arrowheadStart-style.none" | "arrowheadStart-style.arrow" | "arrowheadStart-style.bar" | "arrowheadStart-style.diamond" | "arrowheadStart-style.dot" | "arrowheadStart-style.inverted" | "arrowheadStart-style.pipe" | "arrowheadStart-style.square" | "arrowheadStart-style.triangle" | "arrowheadEnd-style.none" | "arrowheadEnd-style.arrow" | "arrowheadEnd-style.bar" | "arrowheadEnd-style.diamond" | "arrowheadEnd-style.dot" | "arrowheadEnd-style.inverted" | "arrowheadEnd-style.pipe" | "arrowheadEnd-style.square" | "arrowheadEnd-style.triangle" | "spline-style.line" | "spline-style.cubic" | "tool.select" | "tool.hand" | "tool.draw" | "tool.eraser" | "tool.arrow-down" | "tool.arrow-left" | "tool.arrow-right" | "tool.arrow-up" | "tool.arrow" | "tool.diamond" | "tool.ellipse" | "tool.hexagon" | "tool.line" | "tool.octagon" | "tool.oval" | "tool.pentagon" | "tool.rectangle" | "tool.rhombus" | "tool.star" | "tool.trapezoid" | "tool.triangle" | "tool.x-box" | "tool.asset" | "tool.frame" | "tool.note" | "tool.embed" | "tool.text" | "menu.title" | "menu.copy-as" | "menu.edit" | "menu.export-as" | "menu.file" | "menu.language" | "menu.preferences" | "menu.view" | "context-menu.arrange" | "context-menu.copy-as" | "context-menu.export-as" | "context-menu.move-to-page" | "context-menu.reorder" | "page-menu.title" | "page-menu.create-new-page" | "page-menu.edit-pages" | "page-menu.max-page-count-reached" | "page-menu.new-page-initial-name" | "page-menu.page" | "page-menu.edit-start" | "page-menu.edit-done" | "page-menu.submenu.rename" | "page-menu.submenu.duplicate-page" | "page-menu.submenu.go-to-page" | "page-menu.submenu.title" | "page-menu.submenu.move-down" | "page-menu.submenu.move-up" | "page-menu.submenu.delete" | "share-menu.title" | "share-menu.share-project" | "share-menu.create-project" | "share-menu.copy-link" | "share-menu.readonly-link" | "share-menu.copy-readonly-link" | "share-menu.offline-note" | "share-menu.copy-link-note" | "share-menu.copy-readonly-link-note" | "share-menu.project-too-large" | "people-menu.title" | "people-menu.change-name" | "people-menu.change-color" | "people-menu.user" | "people-menu.invite" | "debug-menu.hard-reset" | "debug-menu.create-shapes" | "help-menu.title" | "help-menu.about" | "help-menu.discord" | "help-menu.github" | "help-menu.keyboard-shortcuts" | "help-menu.twitter" | "links-menu.about" | "links-menu.discord" | "links-menu.github" | "links-menu.twitter" | "actions-menu.title" | "edit-link-dialog.title" | "edit-link-dialog.invalid-url" | "edit-link-dialog.detail" | "edit-link-dialog.url" | "edit-link-dialog.clear" | "edit-link-dialog.save" | "edit-link-dialog.cancel" | "embed-dialog.title" | "embed-dialog.url-title" | "embed-dialog.url-label" | "embed-dialog.back" | "embed-dialog.create" | "embed-dialog.cancel" | "embed-dialog.url" | "embed-dialog.instruction" | "embed-dialog.invalid-url" | "embed-dialog.more-info" | "edit-pages-dialog.title" | "edit-pages-dialog.create-new-page" | "edit-pages-dialog.delete" | "edit-pages-dialog.duplicate-page" | "edit-pages-dialog.go-to-page" | "edit-pages-dialog.max-page-count-reached" | "edit-pages-dialog.more-menu" | "edit-pages-dialog.move-down" | "edit-pages-dialog.move-up" | "edit-pages-dialog.new-page-initial-name" | "reload-file-dialog.title" | "reload-file-dialog.description" | "reload-file-dialog.failure" | "reload-file-dialog.reload" | "reload-file-dialog.revert" | "shortcuts-dialog.title" | "shortcuts-dialog.edit" | "shortcuts-dialog.file" | "shortcuts-dialog.preferences" | "shortcuts-dialog.tools" | "shortcuts-dialog.transform" | "shortcuts-dialog.view" | "shortcuts-dialog.save" | "style-panel.title" | "style-panel.align" | "style-panel.arrowheads" | "style-panel.color" | "style-panel.dash" | "style-panel.fill" | "style-panel.font" | "style-panel.geo" | "style-panel.label" | "style-panel.mixed" | "style-panel.opacity" | "style-panel.size" | "style-panel.spline" | "style-panel.text" | "tool-panel.drawing" | "tool-panel.geo" | "tool-panel.shapes" | "tool-panel.things" | "tool-panel.tools" | "save-changes-prompt.title" | "save-changes-prompt.description" | "save-changes-prompt.go-back" | "save-changes-prompt.continue" | "navigation-zone.toggle-minimap" | "navigation-zone.zoom" | "focus-mode.toggle-focus-mode" | "toast.close" | "file-system.file-open-error.title" | "file-system.file-open-error.not-a-tldraw-file" | "file-system.file-open-error.file-format-version-too-new" | "file-system.file-open-error.generic-corrupted-file" | "file-system.confirm-open.title" | "file-system.confirm-open.description" | "file-system.confirm-open.cancel" | "file-system.confirm-open.open" | "file-system.confirm-open.dont-show-again" | "toast.error.export-fail.title" | "toast.error.export-fail.desc" | "toast.error.copy-fail.title" | "toast.error.copy-fail.desc") => string; isMobile: boolean; }; /** @public */ export declare function useDialogs(): DialogsContextType; /** @public */ export declare function useExportAs(): (ids?: TLShapeId[], format?: TLExportType) => Promise; /** @public */ export declare function useHelpMenuSchema(): MenuSchema; /** @public */ export declare function useHighDpiCanvas(ref: React.RefObject, dpr: number): void; /** @public */ export declare function useKeyboardShortcuts(): void; /** @public */ export declare function useKeyboardShortcutsSchema(): KeyboardShortcutsSchemaContextType; /** @public */ export declare function useLanguages(): { languages: TLListedTranslation[]; currentLanguage: string; }; /** @public */ export declare function useLocalStorageState(key: string, defaultValue: T): readonly [T, (setter: T | ((value: T) => T)) => void]; /** @public */ export declare function useMenuClipboardEvents(): { copy: () => void; cut: () => void; paste: (data: DataTransfer | ClipboardItem[], point?: VecLike) => Promise; }; /** @public */ export declare function useMenuIsOpen(id: string, cb?: (isOpen: boolean) => void): (isOpen: boolean) => void; /** @public */ export declare function useMenuSchema(): MenuSchema; /** @public */ export declare function useNativeClipboardEvents(): void; /** @public */ export declare function usePrint(): () => Promise; /** @public */ export declare function useReadonly(): boolean; /** @public */ export declare const useThreeStackableItems: () => boolean; /** @public */ export declare function useToasts(): ToastsContextType; /** @public */ export declare function useToolbarSchema(): ToolbarSchemaContextType; /** @public */ export declare function useTools(): ToolsContextType; /** * Returns a function to translate a translation key into a string based on the current translation. * * @example * ```ts * const msg = useTranslation() * const label = msg("style-panel.styles") * ``` * * @public */ export declare function useTranslation(): (id: TLTranslationKey) => string; declare type WithDefaultHelpers> = T extends TldrawUiOverride ? TldrawUiOverride : never; export { }