## API Report File for "@tldraw/ui"
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
```ts
///
import { Editor } from '@tldraw/editor';
import { EMBED_DEFINITIONS } from '@tldraw/editor';
import { LANGUAGES } from '@tldraw/editor';
import { NamedExoticComponent } from 'react';
import { default as React_2 } from 'react';
import * as React_3 from 'react';
import { ReactNode } from 'react';
import { RecursivePartial } from '@tldraw/utils';
import { TLCopyType } from '@tldraw/editor';
import { TLEditorAssetUrls } from '@tldraw/editor';
import { TLExportType } from '@tldraw/editor';
import { TLLanguage } from '@tldraw/editor';
import { TLShapeId } from '@tldraw/editor';
import { VecLike } from '@tldraw/primitives';
// @internal (undocumented)
export function AssetUrlsProvider({ assetUrls, children, }: {
assetUrls: TLUiAssetUrls;
children: React.ReactNode;
}): JSX.Element;
// @public (undocumented)
function Body_2({ className, children, style, }: {
className?: string;
children: any;
style?: React.CSSProperties;
}): JSX.Element;
// @public (undocumented)
export function BreakPointProvider({ children }: {
children: any;
}): JSX.Element;
// @public (undocumented)
export const Button: React_3.ForwardRefExoticComponent>;
// @public (undocumented)
function CheckboxItem({ children, onSelect, ...rest }: DropdownMenuCheckboxItemProps): JSX.Element;
// @public (undocumented)
function CloseButton(): JSX.Element;
// @public (undocumented)
export function compactMenuItems(arr: T[]): Exclude[];
// @public (undocumented)
function Content({ side, align, sideOffset, alignOffset, children, }: {
children: any;
alignOffset?: number;
sideOffset?: number;
align?: 'center' | 'end' | 'start';
side?: 'bottom' | 'left' | 'right' | 'top';
}): JSX.Element;
// @public (undocumented)
export const ContextMenu: ({ children }: {
children: any;
}) => JSX.Element;
declare namespace Dialog {
export {
Header,
Title,
CloseButton,
Body_2 as Body,
Footer
}
}
export { Dialog }
declare namespace DropdownMenu {
export {
Root,
Trigger,
Content,
Sub,
SubTrigger,
SubContent,
Group,
Indicator,
Item,
CheckboxItem,
RadioItem,
DropdownMenuItemProps,
DropdownMenuCheckboxItemProps
}
}
export { DropdownMenu }
// @public (undocumented)
interface DropdownMenuCheckboxItemProps {
// (undocumented)
checked?: boolean;
// (undocumented)
children: any;
// (undocumented)
disabled?: boolean;
// (undocumented)
onSelect?: (e: Event) => void;
// (undocumented)
title: string;
}
// @public (undocumented)
interface DropdownMenuItemProps extends TLUiButtonProps {
// (undocumented)
noClose?: boolean;
}
// @public (undocumented)
export function findMenuItem(menu: TLUiMenuSchema, path: string[]): TLUiMenuChild;
// @public (undocumented)
function Footer({ className, children }: {
className?: string;
children: any;
}): JSX.Element;
// @public (undocumented)
function Group({ children, size, }: {
children: any;
size?: 'medium' | 'small' | 'tiny' | 'wide';
}): JSX.Element;
// @public (undocumented)
function Header({ className, children }: {
className?: string;
children: any;
}): JSX.Element;
// @public (undocumented)
export const Icon: NamedExoticComponent;
// @public (undocumented)
function Indicator(): JSX.Element;
// @public (undocumented)
export const Input: React_3.ForwardRefExoticComponent>;
// @public (undocumented)
function Item({ noClose, ...props }: DropdownMenuItemProps): JSX.Element;
// @public (undocumented)
export function menuCustom(id: string, opts?: Partial<{
readonlyOk: boolean;
disabled: boolean;
}>): {
id: string;
type: "custom";
disabled: boolean;
readonlyOk: boolean;
};
// @public (undocumented)
export function menuGroup(id: string, ...children: (false | null | TLUiMenuChild)[]): null | TLUiMenuGroup;
// @public (undocumented)
export function menuItem(actionItem: TLUiActionItem | TLUiToolItem, opts?: Partial<{
checked: boolean;
disabled: boolean;
}>): TLUiMenuItem;
// @public (undocumented)
export function menuSubmenu(id: string, label: TLUiTranslationKey, ...children: (false | null | TLUiMenuChild)[]): null | TLUiSubMenu;
// @public (undocumented)
function RadioItem({ children, onSelect, ...rest }: DropdownMenuCheckboxItemProps): JSX.Element;
// @public (undocumented)
function Root({ id, children, modal, }: {
id: string;
children: any;
modal?: boolean;
}): JSX.Element;
// @internal (undocumented)
export function setDefaultUiAssetUrls(urls: TLUiAssetUrls): void;
// @public (undocumented)
function Sub({ id, children }: {
id: string;
children: any;
}): JSX.Element;
// @public (undocumented)
function SubContent({ alignOffset, sideOffset, children, }: {
alignOffset?: number;
sideOffset?: number;
children: any;
}): JSX.Element;
// @public (undocumented)
function SubTrigger({ label, 'data-testid': testId, 'data-direction': dataDirection, }: {
label: TLUiTranslationKey;
'data-testid'?: string;
'data-direction'?: 'left' | 'right';
}): JSX.Element;
// @public (undocumented)
function Title({ className, children }: {
className?: string;
children: any;
}): JSX.Element;
// @public (undocumented)
export const TldrawUi: React_2.NamedExoticComponent<{
children?: ReactNode;
hideUi?: boolean | undefined;
shareZone?: ReactNode;
topZone?: ReactNode;
renderDebugMenuItems?: (() => React_2.ReactNode) | undefined;
} & TldrawUiContextProviderProps>;
// @public (undocumented)
export function TldrawUiContextProvider({ overrides, assetUrls, onUiEvent, children, }: TldrawUiContextProviderProps): JSX.Element;
// @public (undocumented)
export interface TldrawUiContextProviderProps {
// (undocumented)
assetUrls?: RecursivePartial;
// (undocumented)
children?: any;
// (undocumented)
onUiEvent?: TLUiEventHandler;
// (undocumented)
overrides?: TLUiOverrides | TLUiOverrides[];
}
// @public (undocumented)
export type TldrawUiProps = {
children?: ReactNode;
hideUi?: boolean;
shareZone?: ReactNode;
topZone?: ReactNode;
renderDebugMenuItems?: () => React_2.ReactNode;
} & TldrawUiContextProviderProps;
// @public (undocumented)
export interface TLUiActionItem {
// (undocumented)
checkbox?: boolean;
// (undocumented)
contextMenuLabel?: TLUiTranslationKey;
// (undocumented)
icon?: TLUiIconType;
// (undocumented)
id: string;
// (undocumented)
kbd?: string;
// (undocumented)
label?: TLUiTranslationKey;
// (undocumented)
menuLabel?: TLUiTranslationKey;
// (undocumented)
onSelect: (source: TLUiEventSource) => Promise | void;
// (undocumented)
readonlyOk: boolean;
// (undocumented)
shortcutsLabel?: TLUiTranslationKey;
// (undocumented)
title?: string;
}
// @public (undocumented)
export type TLUiActionsContextType = Record;
// @public (undocumented)
export type TLUiActionsMenuSchemaContextType = TLUiMenuSchema;
// @public (undocumented)
export interface TLUiButtonProps extends React_3.HTMLAttributes {
// (undocumented)
disabled?: boolean;
// (undocumented)
icon?: TLUiIconType;
// (undocumented)
iconLeft?: TLUiIconType;
// (undocumented)
invertIcon?: boolean;
// (undocumented)
isChecked?: boolean;
// (undocumented)
kbd?: string;
// (undocumented)
label?: TLUiTranslationKey;
// (undocumented)
loading?: boolean;
// (undocumented)
smallIcon?: boolean;
// (undocumented)
spinner?: boolean;
// (undocumented)
type?: 'danger' | 'normal' | 'primary';
}
// @public (undocumented)
export interface TLUiContextMenuProps {
// (undocumented)
children: any;
}
// @public (undocumented)
export type TLUiContextTTLUiMenuSchemaContextType = TLUiMenuSchema;
// @public (undocumented)
export type TLUiCustomMenuItem = {
id: string;
type: 'custom';
disabled: boolean;
readonlyOk: boolean;
};
// @public (undocumented)
export interface TLUiDialog {
// (undocumented)
component: (props: TLUiDialogProps) => any;
// (undocumented)
id: string;
// (undocumented)
onClose?: () => void;
}
// @public (undocumented)
export interface TLUiDialogProps {
// (undocumented)
onClose: () => void;
}
// @public (undocumented)
export type TLUiDialogsContextType = {
addDialog: (dialog: Omit & {
id?: string;
}) => string;
removeDialog: (id: string) => string;
updateDialog: (id: string, newDialogData: Partial) => string;
clearDialogs: () => void;
dialogs: TLUiDialog[];
};
// @public (undocumented)
export type TLUiEventContextType = TLUiEventHandler;
// @public (undocumented)
export type TLUiEventHandler = (name: T, data: Join<{
source: TLUiEventSource;
}, TLUiEventMap[T]>) => void;
// @public (undocumented)
export type TLUiEventSource = 'actions-menu' | 'context-menu' | 'debug-panel' | 'dialog' | 'export-menu' | 'help-menu' | 'helper-buttons' | 'kbd' | 'menu' | 'navigation-zone' | 'page-menu' | 'people-menu' | 'quick-actions' | 'share-menu' | 'toolbar' | 'unknown' | 'zoom-menu';
// @public (undocumented)
export type TLUiHelpMenuSchemaContextType = TLUiMenuSchema;
// @public (undocumented)
export interface TLUiIconProps extends React.HTMLProps {
// (undocumented)
children?: undefined;
// (undocumented)
color?: string;
// (undocumented)
crossOrigin?: 'anonymous' | 'use-credentials';
// (undocumented)
icon: TLUiIconType;
// (undocumented)
invertIcon?: boolean;
// (undocumented)
small?: boolean;
}
// @public (undocumented)
export type TLUiIconType = 'align-bottom-center' | 'align-bottom-left' | 'align-bottom-right' | 'align-bottom' | 'align-center-center' | 'align-center-horizontal' | 'align-center-left' | 'align-center-right' | 'align-center-vertical' | 'align-left' | 'align-right' | 'align-top-center' | 'align-top-left' | 'align-top-right' | 'align-top' | 'arrow-left' | 'arrowhead-arrow' | 'arrowhead-bar' | 'arrowhead-diamond' | 'arrowhead-dot' | 'arrowhead-none' | 'arrowhead-square' | 'arrowhead-triangle-inverted' | 'arrowhead-triangle' | 'aspect-ratio' | 'avatar' | 'blob' | 'bring-forward' | 'bring-to-front' | 'check' | 'checkbox-checked' | 'checkbox-empty' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'chevrons-ne' | 'chevrons-sw' | 'clipboard-copied' | 'clipboard-copy' | 'code' | 'collab' | 'color' | 'comment' | 'cross-2' | 'cross' | 'dash-dashed' | 'dash-dotted' | 'dash-draw' | 'dash-solid' | 'discord' | 'distribute-horizontal' | 'distribute-vertical' | 'dot' | 'dots-horizontal' | 'dots-vertical' | 'drag-handle-dots' | 'duplicate' | 'edit' | 'external-link' | 'file' | 'fill-none' | 'fill-pattern' | 'fill-semi' | 'fill-solid' | 'follow' | 'following' | 'font-draw' | 'font-mono' | 'font-sans' | 'font-serif' | 'geo-arrow-down' | 'geo-arrow-left' | 'geo-arrow-right' | 'geo-arrow-up' | 'geo-check-box' | 'geo-diamond' | 'geo-ellipse' | 'geo-hexagon' | 'geo-octagon' | 'geo-oval' | 'geo-pentagon' | 'geo-rectangle' | 'geo-rhombus-2' | 'geo-rhombus' | 'geo-star' | 'geo-trapezoid' | 'geo-triangle' | 'geo-x-box' | 'github' | 'group' | 'hidden' | 'image' | 'info-circle' | 'leading' | 'link' | 'lock-small' | 'lock' | 'menu' | 'minus' | 'mixed' | 'pack' | 'page' | 'plus' | 'question-mark-circle' | 'question-mark' | 'redo' | 'reset-zoom' | 'rotate-ccw' | 'rotate-cw' | 'ruler' | 'search' | 'send-backward' | 'send-to-back' | 'settings-horizontal' | 'settings-vertical-1' | 'settings-vertical' | 'share-1' | 'share-2' | 'size-extra-large' | 'size-large' | 'size-medium' | 'size-small' | 'spline-cubic' | 'spline-line' | 'stack-horizontal' | 'stack-vertical' | 'stretch-horizontal' | 'stretch-vertical' | 'text-align-center' | 'text-align-justify' | 'text-align-left' | 'text-align-right' | 'tool-arrow' | 'tool-embed' | 'tool-eraser' | 'tool-frame' | 'tool-hand' | 'tool-highlight' | 'tool-laser' | 'tool-line' | 'tool-media' | 'tool-note' | 'tool-pencil' | 'tool-pointer' | 'tool-text' | 'trash' | 'triangle-down' | 'triangle-up' | 'twitter' | 'undo' | 'ungroup' | 'unlock-small' | 'unlock' | 'vertical-align-center' | 'vertical-align-end' | 'vertical-align-start' | 'visible' | 'warning-triangle' | 'zoom-in' | 'zoom-out';
// @public (undocumented)
export interface TLUiInputProps {
// (undocumented)
autofocus?: boolean;
// (undocumented)
autoselect?: boolean;
// (undocumented)
children?: any;
// (undocumented)
className?: string;
// (undocumented)
defaultValue?: string;
// (undocumented)
disabled?: boolean;
// (undocumented)
icon?: TLUiIconType;
// (undocumented)
iconLeft?: TLUiIconType;
// (undocumented)
label?: TLUiTranslationKey;
// (undocumented)
onBlur?: (value: string) => void;
// (undocumented)
onCancel?: (value: string) => void;
// (undocumented)
onComplete?: (value: string) => void;
// (undocumented)
onValueChange?: (value: string) => void;
// (undocumented)
placeholder?: string;
shouldManuallyMaintainScrollPositionWhenFocused?: boolean;
// (undocumented)
value?: string;
}
// @public (undocumented)
export type TLUiKeyboardShortcutsSchemaContextType = TLUiMenuSchema;
// @public (undocumented)
export type TLUiKeyboardShortcutsSchemaProviderProps = {
overrides?: (editor: Editor, schema: TLUiKeyboardShortcutsSchemaContextType, more: {
tools: TLUiToolsContextType;
actions: TLUiActionsContextType;
}) => TLUiKeyboardShortcutsSchemaContextType;
children: any;
};
// @public (undocumented)
export type TLUiMenuChild = TLUiCustomMenuItem | TLUiMenuGroup | TLUiMenuItem | TLUiSubMenu;
// @public (undocumented)
export type TLUiMenuGroup = {
id: string;
type: 'group';
checkbox: boolean;
disabled: boolean;
readonlyOk: boolean;
children: TLUiMenuChild[];
};
// @public (undocumented)
export type TLUiMenuItem = {
id: string;
type: 'item';
readonlyOk: boolean;
actionItem: TLUiActionItem;
disabled: boolean;
checked: boolean;
};
// @public (undocumented)
export type TLUiMenuSchema = (TLUiCustomMenuItem | TLUiMenuGroup | TLUiMenuItem)[];
// @public (undocumented)
export type TLUiMenuSchemaContextType = TLUiMenuSchema;
// @public (undocumented)
export type TLUiMenuSchemaProviderProps = {
overrides?: (editor: Editor, schema: TLUiMenuSchemaContextType, helpers: {
actions: ReturnType;
noneSelected: boolean;
oneSelected: boolean;
twoSelected: boolean;
threeSelected: boolean;
}) => TLUiMenuSchemaContextType;
children: any;
};
// @public (undocumented)
export interface TLUiOverrides {
// (undocumented)
actions?: WithDefaultHelpers>;
// (undocumented)
actionsMenu?: WithDefaultHelpers>;
// (undocumented)
contextMenu?: WithDefaultHelpers>;
// (undocumented)
helpMenu?: WithDefaultHelpers>;
// (undocumented)
keyboardShortcutsMenu?: WithDefaultHelpers>;
// (undocumented)
menu?: WithDefaultHelpers>;
// (undocumented)
toolbar?: WithDefaultHelpers>;
// (undocumented)
tools?: WithDefaultHelpers>;
// (undocumented)
translations?: TLUiTranslationProviderProps['overrides'];
}
// @public (undocumented)
export type TLUiSubMenu = {
id: string;
type: 'submenu';
label: TLUiTranslationKey;
disabled: boolean;
readonlyOk: boolean;
children: TLUiMenuChild[];
};
// @public (undocumented)
export interface TLUiToast {
// (undocumented)
actions?: TLUiToastAction[];
// (undocumented)
closeLabel?: string;
// (undocumented)
description?: string;
// (undocumented)
icon?: string;
// (undocumented)
id: string;
// (undocumented)
keepOpen?: boolean;
// (undocumented)
title?: string;
}
// @public (undocumented)
export interface TLUiToastAction {
// (undocumented)
label: string;
// (undocumented)
onClick: () => void;
// (undocumented)
type: 'primary' | 'secondary' | 'warn';
}
// @public (undocumented)
export type TLUiToastsContextType = {
addToast: (toast: Omit & {
id?: string;
}) => string;
removeToast: (id: TLUiToast['id']) => string;
clearToasts: () => void;
toasts: TLUiToast[];
};
// @public (undocumented)
export type TLUiToolbarItem = {
id: string;
type: 'item';
readonlyOk: boolean;
toolItem: TLUiToolItem;
};
// @public (undocumented)
export type TLUiToolbarSchemaContextType = TLUiToolbarItem[];
// @public (undocumented)
export interface TLUiToolItem {
// (undocumented)
icon: TLUiIconType;
// (undocumented)
id: string;
// (undocumented)
kbd?: string;
// (undocumented)
label: TLUiTranslationKey;
// (undocumented)
meta?: {
[key: string]: any;
};
// (undocumented)
onSelect: (source: TLUiEventSource) => void;
// (undocumented)
readonlyOk: boolean;
// (undocumented)
shortcutsLabel?: TLUiTranslationKey;
}
// @public (undocumented)
export type TLUiToolsContextType = Record;
// @public (undocumented)
export type TLUiToolsProviderProps = {
overrides?: (editor: Editor, tools: TLUiToolsContextType, helpers: {
insertMedia: () => void;
}) => TLUiToolsContextType;
children: any;
};
// @public (undocumented)
export type TLUiTranslation = {
readonly locale: string;
readonly label: string;
readonly messages: Record;
};
// @public (undocumented)
export type TLUiTranslationContextType = TLUiTranslation;
// @public (undocumented)
export type TLUiTranslationKey = 'action.align-bottom' | 'action.align-center-horizontal.short' | 'action.align-center-horizontal' | 'action.align-center-vertical.short' | 'action.align-center-vertical' | 'action.align-left' | 'action.align-right' | 'action.align-top' | 'action.back-to-content' | 'action.bring-forward' | 'action.bring-to-front' | 'action.convert-to-bookmark' | 'action.convert-to-embed' | 'action.copy-as-json.short' | 'action.copy-as-json' | 'action.copy-as-png.short' | 'action.copy-as-png' | 'action.copy-as-svg.short' | 'action.copy-as-svg' | 'action.copy' | 'action.cut' | 'action.delete' | 'action.distribute-horizontal.short' | 'action.distribute-horizontal' | 'action.distribute-vertical.short' | 'action.distribute-vertical' | 'action.duplicate' | 'action.edit-link' | 'action.exit-pen-mode' | 'action.export-as-json.short' | 'action.export-as-json' | 'action.export-as-png.short' | 'action.export-as-png' | 'action.export-as-svg.short' | 'action.export-as-svg' | 'action.flip-horizontal.short' | 'action.flip-horizontal' | 'action.flip-vertical.short' | 'action.flip-vertical' | 'action.fork-project' | 'action.group' | 'action.insert-embed' | 'action.insert-media' | 'action.leave-shared-project' | 'action.new-project' | 'action.new-shared-project' | 'action.open-embed-link' | '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.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-focus-mode.menu' | 'action.toggle-focus-mode' | 'action.toggle-grid.menu' | 'action.toggle-grid' | 'action.toggle-lock' | 'action.toggle-reduce-motion.menu' | 'action.toggle-reduce-motion' | 'action.toggle-snap-mode.menu' | 'action.toggle-snap-mode' | 'action.toggle-tool-lock.menu' | 'action.toggle-tool-lock' | 'action.toggle-transparent.context-menu' | 'action.toggle-transparent.menu' | 'action.toggle-transparent' | 'action.undo' | 'action.ungroup' | 'action.zoom-in' | 'action.zoom-out' | 'action.zoom-to-100' | 'action.zoom-to-fit' | 'action.zoom-to-selection' | 'actions-menu.title' | 'align-style.end' | 'align-style.justify' | 'align-style.middle' | 'align-style.start' | 'arrowheadEnd-style.arrow' | 'arrowheadEnd-style.bar' | 'arrowheadEnd-style.diamond' | 'arrowheadEnd-style.dot' | 'arrowheadEnd-style.inverted' | 'arrowheadEnd-style.none' | 'arrowheadEnd-style.pipe' | 'arrowheadEnd-style.square' | 'arrowheadEnd-style.triangle' | 'arrowheadStart-style.arrow' | 'arrowheadStart-style.bar' | 'arrowheadStart-style.diamond' | 'arrowheadStart-style.dot' | 'arrowheadStart-style.inverted' | 'arrowheadStart-style.none' | 'arrowheadStart-style.pipe' | 'arrowheadStart-style.square' | 'arrowheadStart-style.triangle' | 'color-style.black' | 'color-style.blue' | 'color-style.green' | 'color-style.grey' | 'color-style.light-blue' | 'color-style.light-green' | 'color-style.light-red' | 'color-style.light-violet' | 'color-style.orange' | 'color-style.red' | 'color-style.violet' | 'color-style.yellow' | 'context-menu.arrange' | 'context-menu.copy-as' | 'context-menu.export-as' | 'context-menu.move-to-page' | 'context-menu.reorder' | 'context.pages.new-page' | 'dash-style.dashed' | 'dash-style.dotted' | 'dash-style.draw' | 'dash-style.solid' | 'debug-panel.more' | 'edit-link-dialog.cancel' | 'edit-link-dialog.clear' | 'edit-link-dialog.detail' | 'edit-link-dialog.invalid-url' | 'edit-link-dialog.save' | 'edit-link-dialog.title' | 'edit-link-dialog.url' | 'edit-pages-dialog.move-down' | 'edit-pages-dialog.move-up' | 'embed-dialog.back' | 'embed-dialog.cancel' | 'embed-dialog.create' | 'embed-dialog.instruction' | 'embed-dialog.invalid-url' | 'embed-dialog.title' | 'embed-dialog.url' | 'file-system.confirm-clear.cancel' | 'file-system.confirm-clear.continue' | 'file-system.confirm-clear.description' | 'file-system.confirm-clear.dont-show-again' | 'file-system.confirm-clear.title' | 'file-system.confirm-open.cancel' | 'file-system.confirm-open.description' | 'file-system.confirm-open.dont-show-again' | 'file-system.confirm-open.open' | 'file-system.confirm-open.title' | 'file-system.file-open-error.file-format-version-too-new' | 'file-system.file-open-error.generic-corrupted-file' | 'file-system.file-open-error.not-a-tldraw-file' | 'file-system.file-open-error.title' | 'file-system.shared-document-file-open-error.description' | 'file-system.shared-document-file-open-error.title' | 'fill-style.none' | 'fill-style.pattern' | 'fill-style.semi' | 'fill-style.solid' | 'focus-mode.toggle-focus-mode' | 'font-style.draw' | 'font-style.mono' | 'font-style.sans' | 'font-style.serif' | 'geo-style.arrow-down' | 'geo-style.arrow-left' | 'geo-style.arrow-right' | 'geo-style.arrow-up' | 'geo-style.check-box' | 'geo-style.diamond' | 'geo-style.ellipse' | 'geo-style.hexagon' | 'geo-style.octagon' | 'geo-style.oval' | 'geo-style.pentagon' | 'geo-style.rectangle' | 'geo-style.rhombus-2' | 'geo-style.rhombus' | 'geo-style.star' | 'geo-style.trapezoid' | 'geo-style.triangle' | 'geo-style.x-box' | 'help-menu.about' | 'help-menu.discord' | 'help-menu.github' | 'help-menu.keyboard-shortcuts' | 'help-menu.title' | 'help-menu.twitter' | 'home-project-dialog.description' | 'home-project-dialog.ok' | 'home-project-dialog.title' | 'menu.copy-as' | 'menu.edit' | 'menu.export-as' | 'menu.file' | 'menu.language' | 'menu.preferences' | 'menu.title' | 'menu.view' | 'navigation-zone.toggle-minimap' | 'navigation-zone.zoom' | 'opacity-style.0.1' | 'opacity-style.0.25' | 'opacity-style.0.5' | 'opacity-style.0.75' | 'opacity-style.1' | 'page-menu.create-new-page' | 'page-menu.edit-done' | 'page-menu.edit-start' | 'page-menu.go-to-page' | 'page-menu.max-page-count-reached' | 'page-menu.new-page-initial-name' | 'page-menu.submenu.delete' | 'page-menu.submenu.duplicate-page' | 'page-menu.submenu.move-down' | 'page-menu.submenu.move-up' | 'page-menu.submenu.rename' | 'page-menu.submenu.title' | 'page-menu.title' | 'people-menu.change-color' | 'people-menu.change-name' | 'people-menu.follow' | 'people-menu.following' | 'people-menu.invite' | 'people-menu.leading' | 'people-menu.title' | 'people-menu.user' | 'rename-project-dialog.cancel' | 'rename-project-dialog.rename' | 'rename-project-dialog.title' | 'share-menu.copy-link-note' | 'share-menu.copy-link' | 'share-menu.copy-readonly-link-note' | 'share-menu.copy-readonly-link' | 'share-menu.create-snapshot-link' | 'share-menu.default-project-name' | 'share-menu.fork-note' | 'share-menu.offline-note' | 'share-menu.project-too-large' | 'share-menu.readonly-link' | 'share-menu.save-note' | 'share-menu.share-project' | 'share-menu.snapshot-link-note' | 'share-menu.title' | 'share-menu.upload-failed' | 'sharing.confirm-leave.cancel' | 'sharing.confirm-leave.description' | 'sharing.confirm-leave.dont-show-again' | 'sharing.confirm-leave.leave' | 'sharing.confirm-leave.title' | 'shortcuts-dialog.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' | 'style-panel.align' | 'style-panel.arrowhead-end' | 'style-panel.arrowhead-start' | 'style-panel.arrowheads' | 'style-panel.color' | 'style-panel.dash' | 'style-panel.fill' | 'style-panel.font' | 'style-panel.geo' | 'style-panel.mixed' | 'style-panel.opacity' | 'style-panel.position' | 'style-panel.size' | 'style-panel.spline' | 'style-panel.title' | 'style-panel.vertical-align' | 'toast.close' | 'toast.error.copy-fail.desc' | 'toast.error.copy-fail.title' | 'toast.error.export-fail.desc' | 'toast.error.export-fail.title' | 'tool-panel.drawing' | 'tool-panel.more' | 'tool-panel.shapes' | 'tool.arrow-down' | 'tool.arrow-left' | 'tool.arrow-right' | 'tool.arrow-up' | 'tool.arrow' | 'tool.asset' | 'tool.check-box' | 'tool.diamond' | 'tool.draw' | 'tool.ellipse' | 'tool.embed' | 'tool.eraser' | 'tool.frame' | 'tool.hand' | 'tool.hexagon' | 'tool.highlight' | 'tool.laser' | 'tool.line' | 'tool.note' | 'tool.octagon' | 'tool.oval' | 'tool.pentagon' | 'tool.rectangle' | 'tool.rhombus' | 'tool.select' | 'tool.star' | 'tool.text' | 'tool.trapezoid' | 'tool.triangle' | 'tool.x-box' | 'vscode.file-open.backup-failed' | 'vscode.file-open.backup-saved' | 'vscode.file-open.backup' | 'vscode.file-open.desc' | 'vscode.file-open.dont-show-again' | 'vscode.file-open.open';
// @public (undocumented)
export function toolbarItem(toolItem: TLUiToolItem): TLUiToolbarItem;
// @public (undocumented)
function Trigger({ children, 'data-testid': testId, }: {
children: any;
'data-testid'?: string;
}): JSX.Element;
// @public (undocumented)
export function useActions(): TLUiActionsContextType;
// @public (undocumented)
export function useActionsMenuSchema(): TLUiMenuSchema;
// @internal (undocumented)
export function useAssetUrls(): TLUiAssetUrls;
// @public (undocumented)
export function useBreakpoint(): number;
// @public (undocumented)
export function useCanRedo(): boolean;
// @public (undocumented)
export function useCanUndo(): boolean;
// @public (undocumented)
export function useContextMenuSchema(): TLUiMenuSchema;
// @public (undocumented)
export function useCopyAs(): (ids?: TLShapeId[], format?: TLCopyType) => void;
// @public (undocumented)
export function useDefaultHelpers(): {
addToast: (toast: Omit & {
id?: string | undefined;
}) => string;
removeToast: (id: string) => string;
clearToasts: () => void;
addDialog: (dialog: Omit & {
id?: string | undefined;
}) => string;
clearDialogs: () => void;
removeDialog: (id: string) => string;
updateDialog: (id: string, newDialogData: Partial) => string;
msg: (id: TLUiTranslationKey) => string;
isMobile: boolean;
};
// @public (undocumented)
export function useDialogs(): TLUiDialogsContextType;
// @public (undocumented)
export function useEvents(): TLUiEventContextType;
// @public (undocumented)
export function useExportAs(): (ids?: TLShapeId[], format?: TLExportType) => Promise;
// @public (undocumented)
export function useHelpMenuSchema(): TLUiMenuSchema;
// @public (undocumented)
export function useKeyboardShortcuts(): void;
// @public (undocumented)
export function useKeyboardShortcutsSchema(): TLUiKeyboardShortcutsSchemaContextType;
// @public (undocumented)
export function useLocalStorageState(key: string, defaultValue: T): readonly [T, (setter: ((value: T) => T) | T) => void];
// @public (undocumented)
export function useMenuClipboardEvents(): {
copy: (source: TLUiEventSource) => void;
cut: (source: TLUiEventSource) => void;
paste: (data: ClipboardItem[] | DataTransfer, source: TLUiEventSource, point?: VecLike) => Promise;
};
// @public (undocumented)
export function useMenuIsOpen(id: string, cb?: (isOpen: boolean) => void): readonly [boolean, (isOpen: boolean) => void];
// @public (undocumented)
export function useMenuSchema(): TLUiMenuSchema;
// @public (undocumented)
export function useNativeClipboardEvents(): void;
// @public (undocumented)
export function useReadonly(): boolean;
// @public (undocumented)
export function useToasts(): TLUiToastsContextType;
// @public (undocumented)
export function useToolbarSchema(): TLUiToolbarSchemaContextType;
// @public (undocumented)
export function useTools(): TLUiToolsContextType;
// @public
export function useTranslation(): (id: TLUiTranslationKey) => string;
// (No @packageDocumentation comment for this package)
```