@excalidraw/excalidraw 0.8.0 → 0.10.1

package/dist/excalidraw.production.min.js.LICENSE.txt

@@ -1 +1,16 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/** @license React v17.0.2
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 // @license © 2020 Google LLC. Licensed under the Apache License, Version 2.0.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@excalidraw/excalidraw",
-  "version": "0.8.0",
+  "version": "0.10.1",
   "main": "main.js",
   "types": "types/packages/excalidraw/index.d.ts",
   "files": [
@@ -11,11 +11,7 @@
     "access": "public"
   },
   "description": "Excalidraw as a React component",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/excalidraw/excalidraw.git",
-    "directory": "src/packages/excalidraw"
-  },
+  "repository": "https://github.com/excalidraw/excalidraw",
   "license": "MIT",
   "keywords": [
     "excalidraw",
@@ -44,36 +40,35 @@
     ]
   },
   "peerDependencies": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@babel/core": "7.14.0",
-    "@babel/plugin-transform-arrow-functions": "7.13.0",
-    "@babel/plugin-transform-async-to-generator": "7.13.0",
-    "@babel/plugin-transform-runtime": "7.13.15",
-    "@babel/plugin-transform-typescript": "7.13.0",
-    "@babel/preset-env": "7.14.1",
-    "@babel/preset-react": "7.13.13",
-    "@babel/preset-typescript": "7.13.0",
-    "autoprefixer": "10.2.5",
+    "@babel/core": "7.14.8",
+    "@babel/plugin-transform-arrow-functions": "7.14.5",
+    "@babel/plugin-transform-async-to-generator": "7.14.5",
+    "@babel/plugin-transform-runtime": "7.14.5",
+    "@babel/plugin-transform-typescript": "7.14.6",
+    "@babel/preset-env": "7.14.9",
+    "@babel/preset-react": "7.14.5",
+    "@babel/preset-typescript": "7.14.5",
+    "autoprefixer": "10.3.1",
     "babel-loader": "8.2.2",
     "babel-plugin-transform-class-properties": "6.24.1",
     "cross-env": "7.0.3",
-    "css-loader": "5.2.4",
+    "css-loader": "5.2.6",
     "file-loader": "6.2.0",
-    "mini-css-extract-plugin": "1.6.0",
-    "postcss-loader": "5.2.0",
-    "sass-loader": "11.0.1",
-    "terser-webpack-plugin": "5.1.1",
-    "ts-loader": "8.1.0",
-    "typescript": "4.2.4",
-    "webpack": "5.36.2",
-    "webpack-bundle-analyzer": "4.4.1",
-    "webpack-cli": "4.6.0"
+    "mini-css-extract-plugin": "1.6.1",
+    "postcss-loader": "6.1.1",
+    "sass-loader": "12.1.0",
+    "terser-webpack-plugin": "5.1.4",
+    "ts-loader": "9.2.4",
+    "typescript": "4.3.5",
+    "webpack": "5.50.0",
+    "webpack-bundle-analyzer": "4.4.2",
+    "webpack-cli": "4.7.2"
   },
   "bugs": "https://github.com/excalidraw/excalidraw/issues",
-  "repository": "https://github.com/excalidraw/excalidraw",
   "homepage": "https://github.com/excalidraw/excalidraw/tree/master/src/packages/excalidraw",
   "scripts": {
     "gen:types": "tsc --project ../../../tsconfig-types.json",

package/types/actions/actionBoundText.d.ts

@@ -0,0 +1,116 @@
+export declare const actionUnbindText: {
+    name: "unbindText";
+    contextItemLabel: string;
+    trackEvent: {
+        category: "element";
+    };
+    contextItemPredicate: (elements: readonly import("../element/types").ExcalidrawElement[], appState: import("../types").AppState) => boolean;
+    perform: (elements: readonly import("../element/types").ExcalidrawElement[], appState: Readonly<import("../types").AppState>) => {
+        elements: readonly import("../element/types").ExcalidrawElement[];
+        appState: Readonly<import("../types").AppState>;
+        commitToHistory: true;
+    };
+} & {
+    keyTest?: undefined;
+};
+export declare const actionBindText: {
+    name: "bindText";
+    contextItemLabel: string;
+    trackEvent: {
+        category: "element";
+    };
+    contextItemPredicate: (elements: readonly import("../element/types").ExcalidrawElement[], appState: import("../types").AppState) => boolean;
+    perform: (elements: readonly import("../element/types").ExcalidrawElement[], appState: Readonly<import("../types").AppState>) => {
+        elements: import("../element/types").ExcalidrawElement[];
+        appState: {
+            selectedElementIds: {
+                [x: string]: true;
+            };
+            isLoading: boolean;
+            errorMessage: string | null;
+            draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
+            resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
+            multiElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawLinearElement> | null;
+            selectionElement: import("../element/types").NonDeletedExcalidrawElement | null;
+            isBindingEnabled: boolean;
+            startBoundElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawBindableElement> | null;
+            suggestedBindings: import("../element/binding").SuggestedBinding[];
+            editingElement: import("../element/types").NonDeletedExcalidrawElement | null;
+            editingLinearElement: import("../element/linearElementEditor").LinearElementEditor | null;
+            activeTool: {
+                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "freedraw" | "eraser";
+                lastActiveToolBeforeEraser: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "freedraw" | null;
+                locked: boolean;
+            };
+            penMode: boolean;
+            penDetected: boolean;
+            exportBackground: boolean;
+            exportEmbedScene: boolean;
+            exportWithDarkMode: boolean;
+            exportScale: number;
+            currentItemStrokeColor: string;
+            currentItemBackgroundColor: string;
+            currentItemFillStyle: import("../element/types").FillStyle;
+            currentItemStrokeWidth: number;
+            currentItemStrokeStyle: import("../element/types").StrokeStyle;
+            currentItemRoughness: number;
+            currentItemOpacity: number;
+            currentItemFontFamily: number;
+            currentItemFontSize: number;
+            currentItemTextAlign: import("../element/types").TextAlign;
+            currentItemStrokeSharpness: import("../element/types").StrokeSharpness;
+            currentItemStartArrowhead: import("../element/types").Arrowhead | null;
+            currentItemEndArrowhead: import("../element/types").Arrowhead | null;
+            currentItemLinearStrokeSharpness: import("../element/types").StrokeSharpness;
+            viewBackgroundColor: string;
+            scrollX: number;
+            scrollY: number;
+            cursorButton: "up" | "down";
+            scrolledOutside: boolean;
+            name: string;
+            isResizing: boolean;
+            isRotating: boolean;
+            zoom: Readonly<{
+                value: import("../types").NormalizedZoomValue;
+            }>;
+            openMenu: "canvas" | "shape" | null;
+            openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
+            lastPointerDownWith: import("../element/types").PointerType;
+            previousSelectedElementIds: {
+                [id: string]: boolean;
+            };
+            shouldCacheIgnoreZoom: boolean;
+            showHelpDialog: boolean;
+            toastMessage: string | null;
+            zenModeEnabled: boolean;
+            theme: string;
+            gridSize: number | null;
+            viewModeEnabled: boolean;
+            selectedGroupIds: {
+                [groupId: string]: boolean;
+            };
+            editingGroupId: string | null;
+            width: number;
+            height: number;
+            offsetTop: number;
+            offsetLeft: number;
+            isLibraryOpen: boolean;
+            fileHandle: import("browser-fs-access").FileSystemHandle | null;
+            collaborators: Map<string, import("../types").Collaborator>;
+            showStats: boolean;
+            currentChartType: import("../element/types").ChartType;
+            pasteDialog: {
+                shown: false;
+                data: null;
+            } | {
+                shown: true;
+                data: import("../charts").Spreadsheet;
+            };
+            pendingImageElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawImageElement> | null;
+            showHyperlinkPopup: false | "info" | "editor";
+        };
+        commitToHistory: true;
+    };
+} & {
+    keyTest?: undefined;
+};

package/types/actions/actionExport.d.ts

@@ -1,9 +1,9 @@
 import "../components/ToolIcon.scss";
 export declare const actionChangeProjectName: import("./types").Action;
+export declare const actionChangeExportScale: import("./types").Action;
 export declare const actionChangeExportBackground: import("./types").Action;
 export declare const actionChangeExportEmbedScene: import("./types").Action;
-export declare const actionChangeShouldAddWatermark: import("./types").Action;
-export declare const actionSaveScene: import("./types").Action;
-export declare const actionSaveAsScene: import("./types").Action;
+export declare const actionSaveToActiveFile: import("./types").Action;
+export declare const actionSaveFileToDisk: import("./types").Action;
 export declare const actionLoadScene: import("./types").Action;
 export declare const actionExportWithDarkMode: import("./types").Action;

package/types/actions/actionToggleLock.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { ExcalidrawElement } from "../element/types";
+export declare const actionToggleLock: {
+    name: "toggleLock";
+    trackEvent: {
+        category: "element";
+    };
+    perform: (elements: readonly ExcalidrawElement[], appState: Readonly<import("../types").AppState>) => false | {
+        elements: ExcalidrawElement[];
+        appState: Readonly<import("../types").AppState>;
+        commitToHistory: true;
+    };
+    contextItemLabel: (elements: readonly ExcalidrawElement[], appState: Readonly<import("../types").AppState>) => "labels.elementLock.unlock" | "labels.elementLock.lock" | "labels.elementLock.lockAll" | "labels.elementLock.unlockAll";
+    keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>, appState: import("../types").AppState, elements: readonly ExcalidrawElement[]) => boolean;
+} & {
+    keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>, appState: import("../types").AppState, elements: readonly ExcalidrawElement[]) => boolean) | undefined;
+};

package/types/actions/actionUnbindText.d.ts

@@ -0,0 +1,11 @@
+export declare const actionUnbindText: {
+    name: "unbindText";
+    contextItemLabel: string;
+    perform: (elements: readonly import("../element/types").ExcalidrawElement[], appState: Readonly<import("../types").AppState>) => {
+        elements: readonly import("../element/types").ExcalidrawElement[];
+        appState: Readonly<import("../types").AppState>;
+        commitToHistory: true;
+    };
+} & {
+    keyTest?: undefined;
+};

package/types/actions/index.d.ts

@@ -5,7 +5,7 @@ export { actionDuplicateSelection } from "./actionDuplicateSelection";
 export { actionChangeStrokeColor, actionChangeBackgroundColor, actionChangeStrokeWidth, actionChangeFillStyle, actionChangeSloppiness, actionChangeOpacity, actionChangeFontSize, actionChangeFontFamily, actionChangeTextAlign, } from "./actionProperties";
 export { actionChangeViewBackgroundColor, actionClearCanvas, actionZoomIn, actionZoomOut, actionResetZoom, actionZoomToFit, actionToggleTheme, } from "./actionCanvas";
 export { actionFinalize } from "./actionFinalize";
-export { actionChangeProjectName, actionChangeExportBackground, actionSaveScene, actionSaveAsScene, actionLoadScene, } from "./actionExport";
+export { actionChangeProjectName, actionChangeExportBackground, actionSaveToActiveFile, actionSaveFileToDisk, actionLoadScene, } from "./actionExport";
 export { actionCopyStyles, actionPasteStyles } from "./actionStyles";
 export { actionToggleCanvasMenu, actionToggleEditMenu, actionFullScreen, actionShortcuts, } from "./actionMenu";
 export { actionGroup, actionUngroup } from "./actionGroup";

package/types/actions/manager.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { Action, ActionsManagerInterface, UpdaterFn, ActionName, ActionResult } from "./types";
+import { Action, ActionsManagerInterface, UpdaterFn, ActionName, ActionResult, PanelComponentProps } from "./types";
 import { ExcalidrawElement } from "../element/types";
 import { AppProps, AppState } from "../types";
 import Library from "../data/library";
@@ -20,6 +20,9 @@ export declare class ActionManager implements ActionsManagerInterface {
     registerAll(actions: readonly Action[]): void;
     handleKeyDown(event: React.KeyboardEvent | KeyboardEvent): boolean;
     executeAction(action: Action): void;
-    renderAction: (name: ActionName, id?: string | undefined) => JSX.Element | null;
+    /**
+     * @param data additional data sent to the PanelComponent
+     */
+    renderAction: (name: ActionName, data?: PanelComponentProps["data"]) => JSX.Element | null;
 }
 export {};

package/types/actions/types.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 import { ExcalidrawElement } from "../element/types";
 import { AppState, ExcalidrawProps } from "../types";
 import Library from "../data/library";
+import { ToolButtonSize } from "../components/ToolButton";
 /** if false, the action should be prevented */
 export declare type ActionResult = {
     elements?: readonly ExcalidrawElement[] | null;
@@ -17,16 +18,20 @@ declare type AppAPI = {
 declare type ActionFn = (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>, formData: any, app: AppAPI) => ActionResult | Promise<ActionResult>;
 export declare type UpdaterFn = (res: ActionResult) => void;
 export declare type ActionFilterFn = (action: Action) => void;
-export declare type ActionName = "copy" | "cut" | "paste" | "copyAsPng" | "copyAsSvg" | "sendBackward" | "bringForward" | "sendToBack" | "bringToFront" | "copyStyles" | "selectAll" | "pasteStyles" | "gridMode" | "zenMode" | "stats" | "changeStrokeColor" | "changeBackgroundColor" | "changeFillStyle" | "changeStrokeWidth" | "changeStrokeShape" | "changeSloppiness" | "changeStrokeStyle" | "changeArrowhead" | "changeOpacity" | "changeFontSize" | "toggleCanvasMenu" | "toggleEditMenu" | "undo" | "redo" | "finalize" | "changeProjectName" | "changeExportBackground" | "changeExportEmbedScene" | "changeShouldAddWatermark" | "saveScene" | "saveAsScene" | "loadScene" | "duplicateSelection" | "deleteSelectedElements" | "changeViewBackgroundColor" | "clearCanvas" | "zoomIn" | "zoomOut" | "resetZoom" | "zoomToFit" | "zoomToSelection" | "changeFontFamily" | "changeTextAlign" | "toggleFullScreen" | "toggleShortcuts" | "group" | "ungroup" | "goToCollaborator" | "addToLibrary" | "changeSharpness" | "alignTop" | "alignBottom" | "alignLeft" | "alignRight" | "alignVerticallyCentered" | "alignHorizontallyCentered" | "distributeHorizontally" | "distributeVertically" | "flipHorizontal" | "flipVertical" | "viewMode" | "exportWithDarkMode" | "toggleTheme";
+export declare type ActionName = "copy" | "cut" | "paste" | "copyAsPng" | "copyAsSvg" | "sendBackward" | "bringForward" | "sendToBack" | "bringToFront" | "copyStyles" | "selectAll" | "pasteStyles" | "gridMode" | "zenMode" | "stats" | "changeStrokeColor" | "changeBackgroundColor" | "changeFillStyle" | "changeStrokeWidth" | "changeStrokeShape" | "changeSloppiness" | "changeStrokeStyle" | "changeArrowhead" | "changeOpacity" | "changeFontSize" | "toggleCanvasMenu" | "toggleEditMenu" | "undo" | "redo" | "finalize" | "changeProjectName" | "changeExportBackground" | "changeExportEmbedScene" | "changeExportScale" | "saveToActiveFile" | "saveFileToDisk" | "loadScene" | "duplicateSelection" | "deleteSelectedElements" | "changeViewBackgroundColor" | "clearCanvas" | "zoomIn" | "zoomOut" | "resetZoom" | "zoomToFit" | "zoomToSelection" | "changeFontFamily" | "changeTextAlign" | "toggleFullScreen" | "toggleShortcuts" | "group" | "ungroup" | "goToCollaborator" | "addToLibrary" | "changeSharpness" | "alignTop" | "alignBottom" | "alignLeft" | "alignRight" | "alignVerticallyCentered" | "alignHorizontallyCentered" | "distributeHorizontally" | "distributeVertically" | "flipHorizontal" | "flipVertical" | "viewMode" | "exportWithDarkMode" | "toggleTheme";
+export declare type PanelComponentProps = {
+    elements: readonly ExcalidrawElement[];
+    appState: AppState;
+    updateData: (formData?: any) => void;
+    appProps: ExcalidrawProps;
+    data?: Partial<{
+        id: string;
+        size: ToolButtonSize;
+    }>;
+};
 export interface Action {
     name: ActionName;
-    PanelComponent?: React.FC<{
-        elements: readonly ExcalidrawElement[];
-        appState: AppState;
-        updateData: (formData?: any) => void;
-        appProps: ExcalidrawProps;
-        id?: string;
-    }>;
+    PanelComponent?: React.FC<PanelComponentProps>;
     perform: ActionFn;
     keyPriority?: number;
     keyTest?: (event: React.KeyboardEvent | KeyboardEvent, appState: AppState, elements: readonly ExcalidrawElement[]) => boolean;
@@ -39,5 +44,6 @@ export interface ActionsManagerInterface {
     registerAction: (action: Action) => void;
     handleKeyDown: (event: React.KeyboardEvent | KeyboardEvent) => boolean;
     renderAction: (name: ActionName) => React.ReactElement | null;
+    executeAction: (action: Action) => void;
 }
 export {};

package/types/appState.d.ts

@@ -10,12 +10,12 @@ export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>)
     }> | undefined;
     scrollX?: number | undefined;
     scrollY?: number | undefined;
-    elementType?: "selection" | "rectangle" | "diamond" | "ellipse" | "arrow" | "line" | "freedraw" | "text" | undefined;
+    elementType?: "line" | "selection" | "rectangle" | "diamond" | "ellipse" | "text" | "arrow" | "freedraw" | undefined;
     elementLocked?: boolean | undefined;
     exportBackground?: boolean | undefined;
     exportEmbedScene?: boolean | undefined;
     exportWithDarkMode?: boolean | undefined;
-    shouldAddWatermark?: boolean | undefined;
+    exportScale?: number | undefined;
     currentItemStrokeColor?: string | undefined;
     currentItemBackgroundColor?: string | undefined;
     currentItemFillStyle?: import("./element/types").FillStyle | undefined;
@@ -23,7 +23,7 @@ export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>)
     currentItemStrokeStyle?: import("./element/types").StrokeStyle | undefined;
     currentItemRoughness?: number | undefined;
     currentItemOpacity?: number | undefined;
-    currentItemFontFamily?: 2 | 1 | 3 | undefined;
+    currentItemFontFamily?: number | undefined;
     currentItemFontSize?: number | undefined;
     currentItemTextAlign?: import("./element/types").TextAlign | undefined;
     currentItemStrokeSharpness?: import("./element/types").StrokeSharpness | undefined;

package/types/components/Actions.d.ts

@@ -8,11 +8,10 @@ export declare const SelectedShapeActions: ({ appState, elements, renderAction,
     renderAction: ActionManager["renderAction"];
     elementType: ExcalidrawElement["type"];
 }) => JSX.Element;
-export declare const ShapesSwitcher: ({ canvas, elementType, setAppState, isLibraryOpen, }: {
+export declare const ShapesSwitcher: ({ canvas, elementType, setAppState, }: {
     canvas: HTMLCanvasElement | null;
     elementType: ExcalidrawElement["type"];
     setAppState: React.Component<any, AppState>["setState"];
-    isLibraryOpen: boolean;
 }) => JSX.Element;
 export declare const ZoomActions: ({ renderAction, zoom, }: {
     renderAction: ActionManager["renderAction"];

package/types/components/ActiveFile.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import "./ActiveFile.scss";
+declare type ActiveFileProps = {
+    fileName?: string;
+    onSave: () => void;
+};
+export declare const ActiveFile: ({ fileName, onSave }: ActiveFileProps) => JSX.Element;
+export {};

package/types/components/App.d.ts

@@ -2,79 +2,13 @@ import React from "react";
 import { RoughCanvas } from "roughjs/bin/canvas";
 import { ActionManager } from "../actions/manager";
 import Library from "../data/library";
-import { MaybeTransformHandleType } from "../element/transformHandles";
-import { ExcalidrawElement, NonDeleted } from "../element/types";
+import { ExcalidrawElement } from "../element/types";
 import History from "../history";
-import { isOverScrollBars } from "../scene";
 import { AppProps, AppState, LibraryItems, SceneData } from "../types";
-import { ResolvablePromise } from "../utils";
 export declare const useIsMobile: () => boolean;
-export declare const useExcalidrawContainer: () => HTMLDivElement | null;
-export declare type PointerDownState = Readonly<{
-    origin: Readonly<{
-        x: number;
-        y: number;
-    }>;
-    originInGrid: Readonly<{
-        x: number;
-        y: number;
-    }>;
-    scrollbars: ReturnType<typeof isOverScrollBars>;
-    lastCoords: {
-        x: number;
-        y: number;
-    };
-    originalElements: Map<string, NonDeleted<ExcalidrawElement>>;
-    resize: {
-        handleType: MaybeTransformHandleType;
-        isResizing: boolean;
-        offset: {
-            x: number;
-            y: number;
-        };
-        arrowDirection: "origin" | "end";
-        center: {
-            x: number;
-            y: number;
-        };
-    };
-    hit: {
-        element: NonDeleted<ExcalidrawElement> | null;
-        allHitElements: NonDeleted<ExcalidrawElement>[];
-        wasAddedToSelection: boolean;
-        hasBeenDuplicated: boolean;
-        hasHitCommonBoundingBoxOfSelectedElements: boolean;
-    };
-    drag: {
-        hasOccurred: boolean;
-        offset: {
-            x: number;
-            y: number;
-        } | null;
-    };
-    eventListeners: {
-        onMove: null | ((event: PointerEvent) => void);
-        onUp: null | ((event: PointerEvent) => void);
-        onKeyDown: null | ((event: KeyboardEvent) => void);
-        onKeyUp: null | ((event: KeyboardEvent) => void);
-    };
-}>;
-export declare type ExcalidrawImperativeAPI = {
-    updateScene: InstanceType<typeof App>["updateScene"];
-    resetScene: InstanceType<typeof App>["resetScene"];
-    getSceneElementsIncludingDeleted: InstanceType<typeof App>["getSceneElementsIncludingDeleted"];
-    history: {
-        clear: InstanceType<typeof App>["resetHistory"];
-    };
-    scrollToContent: InstanceType<typeof App>["scrollToContent"];
-    getSceneElements: InstanceType<typeof App>["getSceneElements"];
-    getAppState: () => InstanceType<typeof App>["state"];
-    refresh: InstanceType<typeof App>["refresh"];
-    importLibrary: InstanceType<typeof App>["importLibraryFromUrl"];
-    setToastMessage: InstanceType<typeof App>["setToastMessage"];
-    readyPromise: ResolvablePromise<ExcalidrawImperativeAPI>;
-    ready: true;
-    id: string;
+export declare const useExcalidrawContainer: () => {
+    container: HTMLDivElement | null;
+    id: string | null;
 };
 declare class App extends React.Component<AppProps, AppState> {
     canvas: HTMLCanvasElement | null;
@@ -92,6 +26,7 @@ declare class App extends React.Component<AppProps, AppState> {
     libraryItemsFromStorage: LibraryItems | undefined;
     private id;
     private history;
+    private excalidrawContainerValue;
     constructor(props: AppProps);
     private renderCanvas;
     render(): JSX.Element;
@@ -129,7 +64,7 @@ declare class App extends React.Component<AppProps, AppState> {
     private addElementsFromPasteOrLibrary;
     private addTextFromPaste;
     setAppState: (obj: any) => void;
-    removePointer: (event: React.PointerEvent<HTMLElement>) => void;
+    removePointer: (event: React.PointerEvent<HTMLElement> | PointerEvent) => void;
     toggleLock: () => void;
     toggleZenMode: () => void;
     toggleStats: () => void;
@@ -152,6 +87,7 @@ declare class App extends React.Component<AppProps, AppState> {
     private onGestureChange;
     private onGestureEnd;
     private handleTextWysiwyg;
+    private deselectElements;
     private getTextElementAtPosition;
     private getElementAtPosition;
     private getElementsAtPosition;

package/types/components/Card.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import OpenColor from "open-color";
+import "./Card.scss";
+export declare const Card: React.FC<{
+    color: keyof OpenColor;
+}>;

package/types/components/CheckboxItem.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import "./CheckboxItem.scss";
+export declare const CheckboxItem: React.FC<{
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+}>;

package/types/components/ClearCanvas.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const ClearCanvas: ({ onConfirm }: {
+    onConfirm: () => void;
+}) => JSX.Element;
+export default ClearCanvas;

package/types/components/ColorPicker.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
 import "./ColorPicker.scss";
-export declare const ColorPicker: ({ type, color, onChange, label, }: {
+export declare const ColorPicker: ({ type, color, onChange, label, isActive, setActive, }: {
     type: "canvasBackground" | "elementBackground" | "elementStroke";
     color: string | null;
     onChange: (color: string) => void;
     label: string;
+    isActive: boolean;
+    setActive: (active: boolean) => void;
 }) => JSX.Element;

package/types/components/ConfirmDialog.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { DialogProps } from "./Dialog";
+import "./ConfirmDialog.scss";
+interface Props extends Omit<DialogProps, "onCloseRequest"> {
+    onConfirm: () => void;
+    onCancel: () => void;
+    confirmText?: string;
+    cancelText?: string;
+}
+declare const ConfirmDialog: (props: Props) => JSX.Element;
+export default ConfirmDialog;

package/types/components/{ExportDialog.d.ts → ImageExportDialog.d.ts}

@@ -5,7 +5,7 @@ import { AppState } from "../types";
 import "./ExportDialog.scss";
 export declare const ErrorCanvasPreview: () => JSX.Element;
 export declare type ExportCB = (elements: readonly NonDeletedExcalidrawElement[], scale?: number) => void;
-export declare const ExportDialog: ({ elements, appState, exportPadding, actionManager, onExportToPng, onExportToSvg, onExportToClipboard, onExportToBackend, }: {
+export declare const ImageExportDialog: ({ elements, appState, exportPadding, actionManager, onExportToPng, onExportToSvg, onExportToClipboard, }: {
     appState: AppState;
     elements: readonly NonDeletedExcalidrawElement[];
     exportPadding?: number | undefined;
@@ -13,5 +13,4 @@ export declare const ExportDialog: ({ elements, appState, exportPadding, actionM
     onExportToPng: ExportCB;
     onExportToSvg: ExportCB;
     onExportToClipboard: ExportCB;
-    onExportToBackend?: ExportCB | undefined;
 }) => JSX.Element;

package/types/components/JSONExportDialog.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ActionsManagerInterface } from "../actions/types";
+import { NonDeletedExcalidrawElement } from "../element/types";
+import { AppState, ExportOpts } from "../types";
+import "./ExportDialog.scss";
+export declare type ExportCB = (elements: readonly NonDeletedExcalidrawElement[], scale?: number) => void;
+export declare const JSONExportDialog: ({ elements, appState, actionManager, exportOpts, canvas, }: {
+    appState: AppState;
+    elements: readonly NonDeletedExcalidrawElement[];
+    actionManager: ActionsManagerInterface;
+    exportOpts: ExportOpts;
+    canvas: HTMLCanvasElement | null;
+}) => JSX.Element;

package/types/components/LayerUI.d.ts

@@ -20,7 +20,6 @@ interface LayerUIProps {
     toggleZenMode: () => void;
     langCode: Language["code"];
     isCollaborating: boolean;
-    onExportToBackend?: (exportedElements: readonly NonDeletedExcalidrawElement[], appState: AppState, canvas: HTMLCanvasElement | null) => void;
     renderTopRightUI?: (isMobile: boolean, appState: AppState) => JSX.Element;
     renderCustomFooter?: (isMobile: boolean, appState: AppState) => JSX.Element;
     viewModeEnabled: boolean;
@@ -30,5 +29,5 @@ interface LayerUIProps {
     library: Library;
     id: string;
 }
-declare const _default: React.MemoExoticComponent<({ actionManager, appState, setAppState, canvas, elements, onCollabButtonClick, onLockToggle, onInsertElements, zenModeEnabled, showExitZenModeBtn, showThemeBtn, toggleZenMode, isCollaborating, onExportToBackend, renderTopRightUI, renderCustomFooter, viewModeEnabled, libraryReturnUrl, UIOptions, focusContainer, library, id, }: LayerUIProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ actionManager, appState, setAppState, canvas, elements, onCollabButtonClick, onLockToggle, onInsertElements, zenModeEnabled, showExitZenModeBtn, showThemeBtn, toggleZenMode, isCollaborating, renderTopRightUI, renderCustomFooter, viewModeEnabled, libraryReturnUrl, UIOptions, focusContainer, library, id, }: LayerUIProps) => JSX.Element>;
 export default _default;

package/types/components/LibraryButton.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { AppState } from "../types";
+export declare const LibraryButton: React.FC<{
+    appState: AppState;
+    setAppState: React.Component<any, AppState>["setState"];
+}>;

package/types/components/LibraryMenu.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import Library from "../data/library";
+import { LibraryItem, AppState, BinaryFiles, ExcalidrawProps } from "../types";
+import "./LibraryMenu.scss";
+export declare const LibraryMenu: ({ onClose, onInsertShape, pendingElements, onAddToLibrary, theme, setAppState, files, libraryReturnUrl, focusContainer, library, id, appState, }: {
+    pendingElements: LibraryItem["elements"];
+    onClose: () => void;
+    onInsertShape: (elements: LibraryItem["elements"]) => void;
+    onAddToLibrary: () => void;
+    theme: AppState["theme"];
+    files: BinaryFiles;
+    setAppState: React.Component<any, AppState>["setState"];
+    libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
+    focusContainer: () => void;
+    library: Library;
+    id: string;
+    appState: AppState;
+}) => JSX.Element | null;

package/types/components/LibraryMenuItems.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import Library from "../data/library";
+import { AppState, BinaryFiles, ExcalidrawProps, LibraryItem, LibraryItems } from "../types";
+import "./LibraryMenuItems.scss";
+declare const LibraryMenuItems: ({ libraryItems, onRemoveFromLibrary, onAddToLibrary, onInsertShape, pendingElements, theme, setAppState, libraryReturnUrl, library, files, id, selectedItems, onToggle, onPublish, resetLibrary, }: {
+    libraryItems: LibraryItems;
+    pendingElements: LibraryItem["elements"];
+    onRemoveFromLibrary: () => void;
+    onInsertShape: (elements: LibraryItem["elements"]) => void;
+    onAddToLibrary: (elements: LibraryItem["elements"]) => void;
+    theme: AppState["theme"];
+    files: BinaryFiles;
+    setAppState: React.Component<any, AppState>["setState"];
+    libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
+    library: Library;
+    id: string;
+    selectedItems: LibraryItem["id"][];
+    onToggle: (id: LibraryItem["id"], event: React.MouseEvent) => void;
+    onPublish: () => void;
+    resetLibrary: () => void;
+}) => JSX.Element;
+export default LibraryMenuItems;