@dwelle/excalidraw 0.4.0-e80989b → 0.4.0-eadd4b9

package/types/actions/actionCanvas.d.ts

@@ -4,13 +4,12 @@ import { AppState, NormalizedZoomValue } from "../types";
 export declare const actionChangeViewBackgroundColor: {
     name: "changeViewBackgroundColor";
     trackEvent: false;
+    predicate: (elements: readonly ExcalidrawElement[], appState: AppState, props: import("../types").ExcalidrawProps, app: import("../types").AppClassProperties) => boolean;
     perform: (_: readonly ExcalidrawElement[], appState: Readonly<AppState>, value: any) => {
         appState: any;
         commitToHistory: boolean;
     };
-    PanelComponent: ({ elements, appState, updateData }: import("./types").PanelComponentProps & {
-        isInHamburgerMenu: boolean;
-    }) => JSX.Element;
+    PanelComponent: ({ elements, appState, updateData, appProps }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
     keyTest?: undefined;
 };
@@ -19,6 +18,7 @@ export declare const actionClearCanvas: {
     trackEvent: {
         category: "canvas";
     };
+    predicate: (elements: readonly ExcalidrawElement[], appState: AppState, props: import("../types").ExcalidrawProps, app: import("../types").AppClassProperties) => boolean;
     perform: (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>, _: any, app: import("../types").AppClassProperties) => {
         elements: ExcalidrawElement[];
         appState: {
@@ -38,20 +38,24 @@ export declare const actionClearCanvas: {
                 data: import("../charts").Spreadsheet;
             };
             activeTool: {
-                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "freedraw" | "eraser";
-                lastActiveToolBeforeEraser: import("../types").LastActiveToolBeforeEraser;
+                lastActiveTool: import("../types").LastActiveTool;
                 locked: boolean;
+            } & ({
+                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "frame" | "freedraw" | "eraser" | "hand";
                 customType: null;
             } | {
                 type: "custom";
                 customType: string;
-                lastActiveToolBeforeEraser: import("../types").LastActiveToolBeforeEraser;
-                locked: boolean;
-            };
+            });
             name: string;
+            contextMenu: {
+                items: import("../components/ContextMenu").ContextMenuItems;
+                top: number;
+                left: number;
+            } | null;
             showWelcomeScreen: boolean;
             isLoading: boolean;
-            errorMessage: string | null;
+            errorMessage: import("react").ReactNode;
             draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             multiElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawLinearElement> | null;
@@ -59,6 +63,10 @@ export declare const actionClearCanvas: {
             isBindingEnabled: boolean;
             startBoundElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawBindableElement> | null;
             suggestedBindings: import("../element/binding").SuggestedBinding[];
+            frameToHighlight: import("../element/types").NonDeleted<import("../element/types").ExcalidrawFrameElement> | null;
+            shouldRenderFrames: boolean;
+            editingFrame: string | null;
+            elementsToHighlight: import("../element/types").NonDeleted<ExcalidrawElement>[] | null;
             editingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             editingLinearElement: import("../element/linearElementEditor").LinearElementEditor | null;
             exportWithDarkMode: boolean;
@@ -73,10 +81,9 @@ export declare const actionClearCanvas: {
             currentItemFontFamily: number;
             currentItemFontSize: number;
             currentItemTextAlign: string;
-            currentItemStrokeSharpness: import("../element/types").StrokeSharpness;
             currentItemStartArrowhead: import("../element/types").Arrowhead | null;
             currentItemEndArrowhead: import("../element/types").Arrowhead | null;
-            currentItemLinearStrokeSharpness: import("../element/types").StrokeSharpness;
+            currentItemRoundness: import("../element/types").StrokeRoundness;
             viewBackgroundColor: string;
             scrollX: number;
             scrollY: number;
@@ -88,10 +95,13 @@ export declare const actionClearCanvas: {
                 value: NormalizedZoomValue;
             }>;
             openMenu: "canvas" | "shape" | null;
-            openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
-            openSidebar: "library" | "customSidebar" | null;
-            openDialog: "imageExport" | "help" | null;
-            isSidebarDocked: boolean;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
+            openSidebar: {
+                name: string;
+                tab?: string | undefined;
+            } | null;
+            openDialog: "imageExport" | "help" | "jsonExport" | null;
+            defaultSidebarDockedPreference: boolean;
             lastPointerDownWith: import("../element/types").PointerType;
             selectedElementIds: {
                 [id: string]: boolean;
@@ -99,6 +109,7 @@ export declare const actionClearCanvas: {
             previousSelectedElementIds: {
                 [id: string]: boolean;
             };
+            selectedElementsAreBeingDragged: boolean;
             shouldCacheIgnoreZoom: boolean;
             toast: {
                 message: string;
@@ -120,14 +131,12 @@ export declare const actionClearCanvas: {
         };
         commitToHistory: true;
     };
-    PanelComponent: ({ updateData }: import("./types").PanelComponentProps & {
-        isInHamburgerMenu: boolean;
-    }) => JSX.Element;
 } & {
     keyTest?: undefined;
 };
 export declare const actionZoomIn: {
     name: "zoomIn";
+    viewMode: true;
     trackEvent: {
         category: "canvas";
     };
@@ -138,9 +147,14 @@ export declare const actionZoomIn: {
             zoom: {
                 value: NormalizedZoomValue;
             };
+            contextMenu: {
+                items: import("../components/ContextMenu").ContextMenuItems;
+                top: number;
+                left: number;
+            } | null;
             showWelcomeScreen: boolean;
             isLoading: boolean;
-            errorMessage: string | null;
+            errorMessage: import("react").ReactNode;
             draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             multiElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawLinearElement> | null;
@@ -148,19 +162,22 @@ export declare const actionZoomIn: {
             isBindingEnabled: boolean;
             startBoundElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawBindableElement> | null;
             suggestedBindings: import("../element/binding").SuggestedBinding[];
+            frameToHighlight: import("../element/types").NonDeleted<import("../element/types").ExcalidrawFrameElement> | null;
+            shouldRenderFrames: boolean;
+            editingFrame: string | null;
+            elementsToHighlight: import("../element/types").NonDeleted<ExcalidrawElement>[] | null;
             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: import("../types").LastActiveToolBeforeEraser;
+                lastActiveTool: import("../types").LastActiveTool;
                 locked: boolean;
+            } & ({
+                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "frame" | "freedraw" | "eraser" | "hand";
                 customType: null;
             } | {
                 type: "custom";
                 customType: string;
-                lastActiveToolBeforeEraser: import("../types").LastActiveToolBeforeEraser;
-                locked: boolean;
-            };
+            });
             penMode: boolean;
             penDetected: boolean;
             exportBackground: boolean;
@@ -177,10 +194,9 @@ export declare const actionZoomIn: {
             currentItemFontFamily: number;
             currentItemFontSize: number;
             currentItemTextAlign: string;
-            currentItemStrokeSharpness: import("../element/types").StrokeSharpness;
             currentItemStartArrowhead: import("../element/types").Arrowhead | null;
             currentItemEndArrowhead: import("../element/types").Arrowhead | null;
-            currentItemLinearStrokeSharpness: import("../element/types").StrokeSharpness;
+            currentItemRoundness: import("../element/types").StrokeRoundness;
             viewBackgroundColor: string;
             cursorButton: "up" | "down";
             scrolledOutside: boolean;
@@ -188,10 +204,13 @@ export declare const actionZoomIn: {
             isResizing: boolean;
             isRotating: boolean;
             openMenu: "canvas" | "shape" | null;
-            openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
-            openSidebar: "library" | "customSidebar" | null;
-            openDialog: "imageExport" | "help" | null;
-            isSidebarDocked: boolean;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
+            openSidebar: {
+                name: string;
+                tab?: string | undefined;
+            } | null;
+            openDialog: "imageExport" | "help" | "jsonExport" | null;
+            defaultSidebarDockedPreference: boolean;
             lastPointerDownWith: import("../element/types").PointerType;
             selectedElementIds: {
                 [id: string]: boolean;
@@ -199,6 +218,7 @@ export declare const actionZoomIn: {
             previousSelectedElementIds: {
                 [id: string]: boolean;
             };
+            selectedElementsAreBeingDragged: boolean;
             shouldCacheIgnoreZoom: boolean;
             toast: {
                 message: string;
@@ -234,15 +254,14 @@ export declare const actionZoomIn: {
         };
         commitToHistory: false;
     };
-    PanelComponent: ({ updateData }: import("./types").PanelComponentProps & {
-        isInHamburgerMenu: boolean;
-    }) => JSX.Element;
+    PanelComponent: ({ updateData }: import("./types").PanelComponentProps) => JSX.Element;
     keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
 } & {
     keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean) | undefined;
 };
 export declare const actionZoomOut: {
     name: "zoomOut";
+    viewMode: true;
     trackEvent: {
         category: "canvas";
     };
@@ -253,9 +272,14 @@ export declare const actionZoomOut: {
             zoom: {
                 value: NormalizedZoomValue;
             };
+            contextMenu: {
+                items: import("../components/ContextMenu").ContextMenuItems;
+                top: number;
+                left: number;
+            } | null;
             showWelcomeScreen: boolean;
             isLoading: boolean;
-            errorMessage: string | null;
+            errorMessage: import("react").ReactNode;
             draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             multiElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawLinearElement> | null;
@@ -263,19 +287,22 @@ export declare const actionZoomOut: {
             isBindingEnabled: boolean;
             startBoundElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawBindableElement> | null;
             suggestedBindings: import("../element/binding").SuggestedBinding[];
+            frameToHighlight: import("../element/types").NonDeleted<import("../element/types").ExcalidrawFrameElement> | null;
+            shouldRenderFrames: boolean;
+            editingFrame: string | null;
+            elementsToHighlight: import("../element/types").NonDeleted<ExcalidrawElement>[] | null;
             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: import("../types").LastActiveToolBeforeEraser;
+                lastActiveTool: import("../types").LastActiveTool;
                 locked: boolean;
+            } & ({
+                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "frame" | "freedraw" | "eraser" | "hand";
                 customType: null;
             } | {
                 type: "custom";
                 customType: string;
-                lastActiveToolBeforeEraser: import("../types").LastActiveToolBeforeEraser;
-                locked: boolean;
-            };
+            });
             penMode: boolean;
             penDetected: boolean;
             exportBackground: boolean;
@@ -292,10 +319,9 @@ export declare const actionZoomOut: {
             currentItemFontFamily: number;
             currentItemFontSize: number;
             currentItemTextAlign: string;
-            currentItemStrokeSharpness: import("../element/types").StrokeSharpness;
             currentItemStartArrowhead: import("../element/types").Arrowhead | null;
             currentItemEndArrowhead: import("../element/types").Arrowhead | null;
-            currentItemLinearStrokeSharpness: import("../element/types").StrokeSharpness;
+            currentItemRoundness: import("../element/types").StrokeRoundness;
             viewBackgroundColor: string;
             cursorButton: "up" | "down";
             scrolledOutside: boolean;
@@ -303,10 +329,13 @@ export declare const actionZoomOut: {
             isResizing: boolean;
             isRotating: boolean;
             openMenu: "canvas" | "shape" | null;
-            openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
-            openSidebar: "library" | "customSidebar" | null;
-            openDialog: "imageExport" | "help" | null;
-            isSidebarDocked: boolean;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
+            openSidebar: {
+                name: string;
+                tab?: string | undefined;
+            } | null;
+            openDialog: "imageExport" | "help" | "jsonExport" | null;
+            defaultSidebarDockedPreference: boolean;
             lastPointerDownWith: import("../element/types").PointerType;
             selectedElementIds: {
                 [id: string]: boolean;
@@ -314,6 +343,7 @@ export declare const actionZoomOut: {
             previousSelectedElementIds: {
                 [id: string]: boolean;
             };
+            selectedElementsAreBeingDragged: boolean;
             shouldCacheIgnoreZoom: boolean;
             toast: {
                 message: string;
@@ -349,15 +379,14 @@ export declare const actionZoomOut: {
         };
         commitToHistory: false;
     };
-    PanelComponent: ({ updateData }: import("./types").PanelComponentProps & {
-        isInHamburgerMenu: boolean;
-    }) => JSX.Element;
+    PanelComponent: ({ updateData }: import("./types").PanelComponentProps) => JSX.Element;
     keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
 } & {
     keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean) | undefined;
 };
 export declare const actionResetZoom: {
     name: "resetZoom";
+    viewMode: true;
     trackEvent: {
         category: "canvas";
     };
@@ -368,9 +397,14 @@ export declare const actionResetZoom: {
             zoom: {
                 value: NormalizedZoomValue;
             };
+            contextMenu: {
+                items: import("../components/ContextMenu").ContextMenuItems;
+                top: number;
+                left: number;
+            } | null;
             showWelcomeScreen: boolean;
             isLoading: boolean;
-            errorMessage: string | null;
+            errorMessage: import("react").ReactNode;
             draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             multiElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawLinearElement> | null;
@@ -378,19 +412,22 @@ export declare const actionResetZoom: {
             isBindingEnabled: boolean;
             startBoundElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawBindableElement> | null;
             suggestedBindings: import("../element/binding").SuggestedBinding[];
+            frameToHighlight: import("../element/types").NonDeleted<import("../element/types").ExcalidrawFrameElement> | null;
+            shouldRenderFrames: boolean;
+            editingFrame: string | null;
+            elementsToHighlight: import("../element/types").NonDeleted<ExcalidrawElement>[] | null;
             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: import("../types").LastActiveToolBeforeEraser;
+                lastActiveTool: import("../types").LastActiveTool;
                 locked: boolean;
+            } & ({
+                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "frame" | "freedraw" | "eraser" | "hand";
                 customType: null;
             } | {
                 type: "custom";
                 customType: string;
-                lastActiveToolBeforeEraser: import("../types").LastActiveToolBeforeEraser;
-                locked: boolean;
-            };
+            });
             penMode: boolean;
             penDetected: boolean;
             exportBackground: boolean;
@@ -407,10 +444,9 @@ export declare const actionResetZoom: {
             currentItemFontFamily: number;
             currentItemFontSize: number;
             currentItemTextAlign: string;
-            currentItemStrokeSharpness: import("../element/types").StrokeSharpness;
             currentItemStartArrowhead: import("../element/types").Arrowhead | null;
             currentItemEndArrowhead: import("../element/types").Arrowhead | null;
-            currentItemLinearStrokeSharpness: import("../element/types").StrokeSharpness;
+            currentItemRoundness: import("../element/types").StrokeRoundness;
             viewBackgroundColor: string;
             cursorButton: "up" | "down";
             scrolledOutside: boolean;
@@ -418,10 +454,13 @@ export declare const actionResetZoom: {
             isResizing: boolean;
             isRotating: boolean;
             openMenu: "canvas" | "shape" | null;
-            openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
-            openSidebar: "library" | "customSidebar" | null;
-            openDialog: "imageExport" | "help" | null;
-            isSidebarDocked: boolean;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
+            openSidebar: {
+                name: string;
+                tab?: string | undefined;
+            } | null;
+            openDialog: "imageExport" | "help" | "jsonExport" | null;
+            defaultSidebarDockedPreference: boolean;
             lastPointerDownWith: import("../element/types").PointerType;
             selectedElementIds: {
                 [id: string]: boolean;
@@ -429,6 +468,7 @@ export declare const actionResetZoom: {
             previousSelectedElementIds: {
                 [id: string]: boolean;
             };
+            selectedElementsAreBeingDragged: boolean;
             shouldCacheIgnoreZoom: boolean;
             toast: {
                 message: string;
@@ -464,13 +504,125 @@ export declare const actionResetZoom: {
         };
         commitToHistory: false;
     };
-    PanelComponent: ({ updateData, appState }: import("./types").PanelComponentProps & {
-        isInHamburgerMenu: boolean;
-    }) => JSX.Element;
+    PanelComponent: ({ updateData, appState }: import("./types").PanelComponentProps) => JSX.Element;
     keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
 } & {
     keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean) | undefined;
 };
+export declare const zoomToFitElements: (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>, zoomToSelection: boolean) => {
+    appState: {
+        zoom: {
+            value: NormalizedZoomValue;
+        };
+        scrollX: number;
+        scrollY: number;
+        contextMenu: {
+            items: import("../components/ContextMenu").ContextMenuItems;
+            top: number;
+            left: number;
+        } | null;
+        showWelcomeScreen: boolean;
+        isLoading: boolean;
+        errorMessage: import("react").ReactNode;
+        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[];
+        frameToHighlight: import("../element/types").NonDeleted<import("../element/types").ExcalidrawFrameElement> | null;
+        shouldRenderFrames: boolean;
+        editingFrame: string | null;
+        elementsToHighlight: import("../element/types").NonDeleted<ExcalidrawElement>[] | null;
+        editingElement: import("../element/types").NonDeletedExcalidrawElement | null;
+        editingLinearElement: import("../element/linearElementEditor").LinearElementEditor | null;
+        activeTool: {
+            lastActiveTool: import("../types").LastActiveTool;
+            locked: boolean;
+        } & ({
+            type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "frame" | "freedraw" | "eraser" | "hand";
+            customType: null;
+        } | {
+            type: "custom";
+            customType: string;
+        });
+        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: string;
+        currentItemStartArrowhead: import("../element/types").Arrowhead | null;
+        currentItemEndArrowhead: import("../element/types").Arrowhead | null;
+        currentItemRoundness: import("../element/types").StrokeRoundness;
+        viewBackgroundColor: string;
+        cursorButton: "up" | "down";
+        scrolledOutside: boolean;
+        name: string;
+        isResizing: boolean;
+        isRotating: boolean;
+        openMenu: "canvas" | "shape" | null;
+        openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
+        openSidebar: {
+            name: string;
+            tab?: string | undefined;
+        } | null;
+        openDialog: "imageExport" | "help" | "jsonExport" | null;
+        defaultSidebarDockedPreference: boolean;
+        lastPointerDownWith: import("../element/types").PointerType;
+        selectedElementIds: {
+            [id: string]: boolean;
+        };
+        previousSelectedElementIds: {
+            [id: string]: boolean;
+        };
+        selectedElementsAreBeingDragged: boolean;
+        shouldCacheIgnoreZoom: boolean;
+        toast: {
+            message: string;
+            closable?: boolean | undefined;
+            duration?: number | undefined;
+        } | 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;
+        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;
+        };
+        pendingImageElementId: string | null;
+        showHyperlinkPopup: false | "info" | "editor";
+        selectedLinearElement: import("../element/linearElementEditor").LinearElementEditor | null;
+    };
+    commitToHistory: boolean;
+};
 export declare const actionZoomToSelected: {
     name: "zoomToSelection";
     trackEvent: {
@@ -483,9 +635,14 @@ export declare const actionZoomToSelected: {
             };
             scrollX: number;
             scrollY: number;
+            contextMenu: {
+                items: import("../components/ContextMenu").ContextMenuItems;
+                top: number;
+                left: number;
+            } | null;
             showWelcomeScreen: boolean;
             isLoading: boolean;
-            errorMessage: string | null;
+            errorMessage: import("react").ReactNode;
             draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             multiElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawLinearElement> | null;
@@ -493,19 +650,22 @@ export declare const actionZoomToSelected: {
             isBindingEnabled: boolean;
             startBoundElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawBindableElement> | null;
             suggestedBindings: import("../element/binding").SuggestedBinding[];
+            frameToHighlight: import("../element/types").NonDeleted<import("../element/types").ExcalidrawFrameElement> | null;
+            shouldRenderFrames: boolean;
+            editingFrame: string | null;
+            elementsToHighlight: import("../element/types").NonDeleted<ExcalidrawElement>[] | null;
             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: import("../types").LastActiveToolBeforeEraser;
+                lastActiveTool: import("../types").LastActiveTool;
                 locked: boolean;
+            } & ({
+                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "frame" | "freedraw" | "eraser" | "hand";
                 customType: null;
             } | {
                 type: "custom";
                 customType: string;
-                lastActiveToolBeforeEraser: import("../types").LastActiveToolBeforeEraser;
-                locked: boolean;
-            };
+            });
             penMode: boolean;
             penDetected: boolean;
             exportBackground: boolean;
@@ -522,10 +682,9 @@ export declare const actionZoomToSelected: {
             currentItemFontFamily: number;
             currentItemFontSize: number;
             currentItemTextAlign: string;
-            currentItemStrokeSharpness: import("../element/types").StrokeSharpness;
             currentItemStartArrowhead: import("../element/types").Arrowhead | null;
             currentItemEndArrowhead: import("../element/types").Arrowhead | null;
-            currentItemLinearStrokeSharpness: import("../element/types").StrokeSharpness;
+            currentItemRoundness: import("../element/types").StrokeRoundness;
             viewBackgroundColor: string;
             cursorButton: "up" | "down";
             scrolledOutside: boolean;
@@ -533,10 +692,13 @@ export declare const actionZoomToSelected: {
             isResizing: boolean;
             isRotating: boolean;
             openMenu: "canvas" | "shape" | null;
-            openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
-            openSidebar: "library" | "customSidebar" | null;
-            openDialog: "imageExport" | "help" | null;
-            isSidebarDocked: boolean;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
+            openSidebar: {
+                name: string;
+                tab?: string | undefined;
+            } | null;
+            openDialog: "imageExport" | "help" | "jsonExport" | null;
+            defaultSidebarDockedPreference: boolean;
             lastPointerDownWith: import("../element/types").PointerType;
             selectedElementIds: {
                 [id: string]: boolean;
@@ -544,6 +706,7 @@ export declare const actionZoomToSelected: {
             previousSelectedElementIds: {
                 [id: string]: boolean;
             };
+            selectedElementsAreBeingDragged: boolean;
             shouldCacheIgnoreZoom: boolean;
             toast: {
                 message: string;
@@ -585,6 +748,7 @@ export declare const actionZoomToSelected: {
 };
 export declare const actionZoomToFit: {
     name: "zoomToFit";
+    viewMode: true;
     trackEvent: {
         category: "canvas";
     };
@@ -595,9 +759,14 @@ export declare const actionZoomToFit: {
             };
             scrollX: number;
             scrollY: number;
+            contextMenu: {
+                items: import("../components/ContextMenu").ContextMenuItems;
+                top: number;
+                left: number;
+            } | null;
             showWelcomeScreen: boolean;
             isLoading: boolean;
-            errorMessage: string | null;
+            errorMessage: import("react").ReactNode;
             draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             multiElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawLinearElement> | null;
@@ -605,19 +774,22 @@ export declare const actionZoomToFit: {
             isBindingEnabled: boolean;
             startBoundElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawBindableElement> | null;
             suggestedBindings: import("../element/binding").SuggestedBinding[];
+            frameToHighlight: import("../element/types").NonDeleted<import("../element/types").ExcalidrawFrameElement> | null;
+            shouldRenderFrames: boolean;
+            editingFrame: string | null;
+            elementsToHighlight: import("../element/types").NonDeleted<ExcalidrawElement>[] | null;
             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: import("../types").LastActiveToolBeforeEraser;
+                lastActiveTool: import("../types").LastActiveTool;
                 locked: boolean;
+            } & ({
+                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "frame" | "freedraw" | "eraser" | "hand";
                 customType: null;
             } | {
                 type: "custom";
                 customType: string;
-                lastActiveToolBeforeEraser: import("../types").LastActiveToolBeforeEraser;
-                locked: boolean;
-            };
+            });
             penMode: boolean;
             penDetected: boolean;
             exportBackground: boolean;
@@ -634,10 +806,9 @@ export declare const actionZoomToFit: {
             currentItemFontFamily: number;
             currentItemFontSize: number;
             currentItemTextAlign: string;
-            currentItemStrokeSharpness: import("../element/types").StrokeSharpness;
             currentItemStartArrowhead: import("../element/types").Arrowhead | null;
             currentItemEndArrowhead: import("../element/types").Arrowhead | null;
-            currentItemLinearStrokeSharpness: import("../element/types").StrokeSharpness;
+            currentItemRoundness: import("../element/types").StrokeRoundness;
             viewBackgroundColor: string;
             cursorButton: "up" | "down";
             scrolledOutside: boolean;
@@ -645,10 +816,13 @@ export declare const actionZoomToFit: {
             isResizing: boolean;
             isRotating: boolean;
             openMenu: "canvas" | "shape" | null;
-            openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
-            openSidebar: "library" | "customSidebar" | null;
-            openDialog: "imageExport" | "help" | null;
-            isSidebarDocked: boolean;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
+            openSidebar: {
+                name: string;
+                tab?: string | undefined;
+            } | null;
+            openDialog: "imageExport" | "help" | "jsonExport" | null;
+            defaultSidebarDockedPreference: boolean;
             lastPointerDownWith: import("../element/types").PointerType;
             selectedElementIds: {
                 [id: string]: boolean;
@@ -656,6 +830,7 @@ export declare const actionZoomToFit: {
             previousSelectedElementIds: {
                 [id: string]: boolean;
             };
+            selectedElementsAreBeingDragged: boolean;
             shouldCacheIgnoreZoom: boolean;
             toast: {
                 message: string;
@@ -697,15 +872,21 @@ export declare const actionZoomToFit: {
 };
 export declare const actionToggleTheme: {
     name: "toggleTheme";
+    viewMode: true;
     trackEvent: {
         category: "canvas";
     };
     perform: (_: readonly ExcalidrawElement[], appState: Readonly<AppState>, value: any) => {
         appState: {
             theme: any;
+            contextMenu: {
+                items: import("../components/ContextMenu").ContextMenuItems;
+                top: number;
+                left: number;
+            } | null;
             showWelcomeScreen: boolean;
             isLoading: boolean;
-            errorMessage: string | null;
+            errorMessage: import("react").ReactNode;
             draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             multiElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawLinearElement> | null;
@@ -713,19 +894,22 @@ export declare const actionToggleTheme: {
             isBindingEnabled: boolean;
             startBoundElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawBindableElement> | null;
             suggestedBindings: import("../element/binding").SuggestedBinding[];
+            frameToHighlight: import("../element/types").NonDeleted<import("../element/types").ExcalidrawFrameElement> | null;
+            shouldRenderFrames: boolean;
+            editingFrame: string | null;
+            elementsToHighlight: import("../element/types").NonDeleted<ExcalidrawElement>[] | null;
             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: import("../types").LastActiveToolBeforeEraser;
+                lastActiveTool: import("../types").LastActiveTool;
                 locked: boolean;
+            } & ({
+                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "frame" | "freedraw" | "eraser" | "hand";
                 customType: null;
             } | {
                 type: "custom";
                 customType: string;
-                lastActiveToolBeforeEraser: import("../types").LastActiveToolBeforeEraser;
-                locked: boolean;
-            };
+            });
             penMode: boolean;
             penDetected: boolean;
             exportBackground: boolean;
@@ -742,10 +926,9 @@ export declare const actionToggleTheme: {
             currentItemFontFamily: number;
             currentItemFontSize: number;
             currentItemTextAlign: string;
-            currentItemStrokeSharpness: import("../element/types").StrokeSharpness;
             currentItemStartArrowhead: import("../element/types").Arrowhead | null;
             currentItemEndArrowhead: import("../element/types").Arrowhead | null;
-            currentItemLinearStrokeSharpness: import("../element/types").StrokeSharpness;
+            currentItemRoundness: import("../element/types").StrokeRoundness;
             viewBackgroundColor: string;
             scrollX: number;
             scrollY: number;
@@ -758,10 +941,13 @@ export declare const actionToggleTheme: {
                 value: NormalizedZoomValue;
             }>;
             openMenu: "canvas" | "shape" | null;
-            openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
-            openSidebar: "library" | "customSidebar" | null;
-            openDialog: "imageExport" | "help" | null;
-            isSidebarDocked: boolean;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
+            openSidebar: {
+                name: string;
+                tab?: string | undefined;
+            } | null;
+            openDialog: "imageExport" | "help" | "jsonExport" | null;
+            defaultSidebarDockedPreference: boolean;
             lastPointerDownWith: import("../element/types").PointerType;
             selectedElementIds: {
                 [id: string]: boolean;
@@ -769,6 +955,7 @@ export declare const actionToggleTheme: {
             previousSelectedElementIds: {
                 [id: string]: boolean;
             };
+            selectedElementsAreBeingDragged: boolean;
             shouldCacheIgnoreZoom: boolean;
             toast: {
                 message: string;
@@ -803,15 +990,13 @@ export declare const actionToggleTheme: {
         };
         commitToHistory: false;
     };
-    PanelComponent: ({ appState, updateData }: import("./types").PanelComponentProps & {
-        isInHamburgerMenu: boolean;
-    }) => JSX.Element;
     keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
+    predicate: (elements: readonly ExcalidrawElement[], appState: AppState, props: import("../types").ExcalidrawProps, app: import("../types").AppClassProperties) => boolean;
 } & {
     keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean) | undefined;
 };
-export declare const actionErase: {
-    name: "eraser";
+export declare const actionToggleEraserTool: {
+    name: "toggleEraserTool";
     trackEvent: {
         category: "toolbar";
     };
@@ -820,19 +1005,142 @@ export declare const actionErase: {
             selectedElementIds: {};
             selectedGroupIds: {};
             activeTool: {
-                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "freedraw" | "eraser";
-                lastActiveToolBeforeEraser: import("../types").LastActiveToolBeforeEraser;
+                lastActiveTool: import("../types").LastActiveTool;
                 locked: boolean;
+            } & ({
+                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "frame" | "freedraw" | "eraser" | "hand";
                 customType: null;
             } | {
                 type: "custom";
                 customType: string;
-                lastActiveToolBeforeEraser: import("../types").LastActiveToolBeforeEraser;
-                locked: boolean;
+            });
+            contextMenu: {
+                items: import("../components/ContextMenu").ContextMenuItems;
+                top: number;
+                left: number;
+            } | null;
+            showWelcomeScreen: boolean;
+            isLoading: boolean;
+            errorMessage: import("react").ReactNode;
+            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[];
+            frameToHighlight: import("../element/types").NonDeleted<import("../element/types").ExcalidrawFrameElement> | null;
+            shouldRenderFrames: boolean;
+            editingFrame: string | null;
+            elementsToHighlight: import("../element/types").NonDeleted<ExcalidrawElement>[] | null;
+            editingElement: import("../element/types").NonDeletedExcalidrawElement | null;
+            editingLinearElement: import("../element/linearElementEditor").LinearElementEditor | null;
+            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: string;
+            currentItemStartArrowhead: import("../element/types").Arrowhead | null;
+            currentItemEndArrowhead: import("../element/types").Arrowhead | null;
+            currentItemRoundness: import("../element/types").StrokeRoundness;
+            viewBackgroundColor: string;
+            scrollX: number;
+            scrollY: number;
+            cursorButton: "up" | "down";
+            scrolledOutside: boolean;
+            name: string;
+            isResizing: boolean;
+            isRotating: boolean;
+            zoom: Readonly<{
+                value: NormalizedZoomValue;
+            }>;
+            openMenu: "canvas" | "shape" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
+            openSidebar: {
+                name: string;
+                tab?: string | undefined;
+            } | null;
+            openDialog: "imageExport" | "help" | "jsonExport" | null;
+            defaultSidebarDockedPreference: boolean;
+            lastPointerDownWith: import("../element/types").PointerType;
+            previousSelectedElementIds: {
+                [id: string]: boolean;
             };
+            selectedElementsAreBeingDragged: boolean;
+            shouldCacheIgnoreZoom: boolean;
+            toast: {
+                message: string;
+                closable?: boolean | undefined;
+                duration?: number | undefined;
+            } | null;
+            zenModeEnabled: boolean;
+            theme: string;
+            gridSize: number | null;
+            viewModeEnabled: boolean;
+            editingGroupId: string | null;
+            width: number;
+            height: number;
+            offsetTop: number;
+            offsetLeft: number;
+            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;
+            };
+            pendingImageElementId: string | null;
+            showHyperlinkPopup: false | "info" | "editor";
+            selectedLinearElement: import("../element/linearElementEditor").LinearElementEditor | null;
+        };
+        commitToHistory: true;
+    };
+    keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
+} & {
+    keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean) | undefined;
+};
+export declare const actionToggleHandTool: {
+    name: "toggleHandTool";
+    trackEvent: {
+        category: "toolbar";
+    };
+    perform: (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>, _: any, app: import("../types").AppClassProperties) => {
+        appState: {
+            selectedElementIds: {};
+            selectedGroupIds: {};
+            activeTool: {
+                lastActiveTool: import("../types").LastActiveTool;
+                locked: boolean;
+            } & ({
+                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "frame" | "freedraw" | "eraser" | "hand";
+                customType: null;
+            } | {
+                type: "custom";
+                customType: string;
+            });
+            contextMenu: {
+                items: import("../components/ContextMenu").ContextMenuItems;
+                top: number;
+                left: number;
+            } | null;
             showWelcomeScreen: boolean;
             isLoading: boolean;
-            errorMessage: string | null;
+            errorMessage: import("react").ReactNode;
             draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             multiElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawLinearElement> | null;
@@ -840,6 +1148,10 @@ export declare const actionErase: {
             isBindingEnabled: boolean;
             startBoundElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawBindableElement> | null;
             suggestedBindings: import("../element/binding").SuggestedBinding[];
+            frameToHighlight: import("../element/types").NonDeleted<import("../element/types").ExcalidrawFrameElement> | null;
+            shouldRenderFrames: boolean;
+            editingFrame: string | null;
+            elementsToHighlight: import("../element/types").NonDeleted<ExcalidrawElement>[] | null;
             editingElement: import("../element/types").NonDeletedExcalidrawElement | null;
             editingLinearElement: import("../element/linearElementEditor").LinearElementEditor | null;
             penMode: boolean;
@@ -858,10 +1170,9 @@ export declare const actionErase: {
             currentItemFontFamily: number;
             currentItemFontSize: number;
             currentItemTextAlign: string;
-            currentItemStrokeSharpness: import("../element/types").StrokeSharpness;
             currentItemStartArrowhead: import("../element/types").Arrowhead | null;
             currentItemEndArrowhead: import("../element/types").Arrowhead | null;
-            currentItemLinearStrokeSharpness: import("../element/types").StrokeSharpness;
+            currentItemRoundness: import("../element/types").StrokeRoundness;
             viewBackgroundColor: string;
             scrollX: number;
             scrollY: number;
@@ -874,14 +1185,18 @@ export declare const actionErase: {
                 value: NormalizedZoomValue;
             }>;
             openMenu: "canvas" | "shape" | null;
-            openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
-            openSidebar: "library" | "customSidebar" | null;
-            openDialog: "imageExport" | "help" | null;
-            isSidebarDocked: boolean;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
+            openSidebar: {
+                name: string;
+                tab?: string | undefined;
+            } | null;
+            openDialog: "imageExport" | "help" | "jsonExport" | null;
+            defaultSidebarDockedPreference: boolean;
             lastPointerDownWith: import("../element/types").PointerType;
             previousSelectedElementIds: {
                 [id: string]: boolean;
             };
+            selectedElementsAreBeingDragged: boolean;
             shouldCacheIgnoreZoom: boolean;
             toast: {
                 message: string;
@@ -915,9 +1230,6 @@ export declare const actionErase: {
         commitToHistory: true;
     };
     keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
-    PanelComponent: ({ elements, appState, updateData, data }: import("./types").PanelComponentProps & {
-        isInHamburgerMenu: boolean;
-    }) => JSX.Element;
 } & {
     keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean) | undefined;
 };