@excalidraw/excalidraw 0.15.2-6977c32 → 0.15.2-81ebf82

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@excalidraw/excalidraw",
-  "version": "0.15.2-6977c32",
+  "version": "0.15.2-81ebf82",
   "main": "main.js",
   "types": "types/packages/excalidraw/index.d.ts",
   "files": [
@@ -63,7 +63,7 @@
     "sass-loader": "13.0.2",
     "terser-webpack-plugin": "5.3.3",
     "ts-loader": "9.3.1",
-    "typescript": "4.7.4",
+    "typescript": "4.9.4",
     "webpack": "5.76.0",
     "webpack-bundle-analyzer": "4.5.0",
     "webpack-cli": "4.10.0",

package/types/actions/actionAddToLibrary.d.ts

@@ -25,13 +25,17 @@ export declare const actionAddToLibrary: {
             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<import("../element/types").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" | "freedraw" | "eraser" | "hand";
+                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "frame" | "freedraw" | "eraser" | "hand";
                 customType: null;
             } | {
                 type: "custom";
@@ -68,7 +72,7 @@ export declare const actionAddToLibrary: {
                 value: import("../types").NormalizedZoomValue;
             }>;
             openMenu: "canvas" | "shape" | null;
-            openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
             openSidebar: {
                 name: string;
                 tab?: string | undefined;
@@ -82,6 +86,7 @@ export declare const actionAddToLibrary: {
             previousSelectedElementIds: {
                 [id: string]: boolean;
             };
+            selectedElementsAreBeingDragged: boolean;
             shouldCacheIgnoreZoom: boolean;
             zenModeEnabled: boolean;
             theme: string;
@@ -128,13 +133,17 @@ export declare const actionAddToLibrary: {
             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<import("../element/types").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" | "freedraw" | "eraser" | "hand";
+                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "frame" | "freedraw" | "eraser" | "hand";
                 customType: null;
             } | {
                 type: "custom";
@@ -171,7 +180,7 @@ export declare const actionAddToLibrary: {
                 value: import("../types").NormalizedZoomValue;
             }>;
             openMenu: "canvas" | "shape" | null;
-            openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
             openSidebar: {
                 name: string;
                 tab?: string | undefined;
@@ -185,6 +194,7 @@ export declare const actionAddToLibrary: {
             previousSelectedElementIds: {
                 [id: string]: boolean;
             };
+            selectedElementsAreBeingDragged: boolean;
             shouldCacheIgnoreZoom: boolean;
             toast: {
                 message: string;
@@ -236,13 +246,17 @@ export declare const actionAddToLibrary: {
             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<import("../element/types").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" | "freedraw" | "eraser" | "hand";
+                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "frame" | "freedraw" | "eraser" | "hand";
                 customType: null;
             } | {
                 type: "custom";
@@ -279,7 +293,7 @@ export declare const actionAddToLibrary: {
                 value: import("../types").NormalizedZoomValue;
             }>;
             openMenu: "canvas" | "shape" | null;
-            openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
             openSidebar: {
                 name: string;
                 tab?: string | undefined;
@@ -293,6 +307,7 @@ export declare const actionAddToLibrary: {
             previousSelectedElementIds: {
                 [id: string]: boolean;
             };
+            selectedElementsAreBeingDragged: boolean;
             shouldCacheIgnoreZoom: boolean;
             toast: {
                 message: string;

package/types/actions/actionAlign.d.ts

@@ -6,6 +6,7 @@ export declare const actionAlignTop: {
     trackEvent: {
         category: "element";
     };
+    predicate: (elements: readonly ExcalidrawElement[], appState: AppState) => boolean;
     perform: (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>) => {
         appState: Readonly<AppState>;
         elements: ExcalidrawElement[];
@@ -21,6 +22,7 @@ export declare const actionAlignBottom: {
     trackEvent: {
         category: "element";
     };
+    predicate: (elements: readonly ExcalidrawElement[], appState: AppState) => boolean;
     perform: (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>) => {
         appState: Readonly<AppState>;
         elements: ExcalidrawElement[];
@@ -36,6 +38,7 @@ export declare const actionAlignLeft: {
     trackEvent: {
         category: "element";
     };
+    predicate: (elements: readonly ExcalidrawElement[], appState: AppState) => boolean;
     perform: (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>) => {
         appState: Readonly<AppState>;
         elements: ExcalidrawElement[];
@@ -51,6 +54,7 @@ export declare const actionAlignRight: {
     trackEvent: {
         category: "element";
     };
+    predicate: (elements: readonly ExcalidrawElement[], appState: AppState) => boolean;
     perform: (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>) => {
         appState: Readonly<AppState>;
         elements: ExcalidrawElement[];
@@ -66,6 +70,7 @@ export declare const actionAlignVerticallyCentered: {
     trackEvent: {
         category: "element";
     };
+    predicate: (elements: readonly ExcalidrawElement[], appState: AppState) => boolean;
     perform: (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>) => {
         appState: Readonly<AppState>;
         elements: ExcalidrawElement[];
@@ -80,6 +85,7 @@ export declare const actionAlignHorizontallyCentered: {
     trackEvent: {
         category: "element";
     };
+    predicate: (elements: readonly ExcalidrawElement[], appState: AppState) => boolean;
     perform: (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>) => {
         appState: Readonly<AppState>;
         elements: ExcalidrawElement[];

package/types/actions/actionBoundText.d.ts

@@ -44,13 +44,17 @@ export declare const actionBindText: {
             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" | "freedraw" | "eraser" | "hand";
+                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "frame" | "freedraw" | "eraser" | "hand";
                 customType: null;
             } | {
                 type: "custom";
@@ -87,7 +91,7 @@ export declare const actionBindText: {
                 value: import("../types").NormalizedZoomValue;
             }>;
             openMenu: "canvas" | "shape" | null;
-            openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
             openSidebar: {
                 name: string;
                 tab?: string | undefined;
@@ -98,6 +102,7 @@ export declare const actionBindText: {
             previousSelectedElementIds: {
                 [id: string]: boolean;
             };
+            selectedElementsAreBeingDragged: boolean;
             shouldCacheIgnoreZoom: boolean;
             toast: {
                 message: string;
@@ -164,13 +169,17 @@ export declare const actionWrapTextInContainer: {
             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" | "freedraw" | "eraser" | "hand";
+                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "frame" | "freedraw" | "eraser" | "hand";
                 customType: null;
             } | {
                 type: "custom";
@@ -207,7 +216,7 @@ export declare const actionWrapTextInContainer: {
                 value: import("../types").NormalizedZoomValue;
             }>;
             openMenu: "canvas" | "shape" | null;
-            openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
             openSidebar: {
                 name: string;
                 tab?: string | undefined;
@@ -218,6 +227,7 @@ export declare const actionWrapTextInContainer: {
             previousSelectedElementIds: {
                 [id: string]: boolean;
             };
+            selectedElementsAreBeingDragged: boolean;
             shouldCacheIgnoreZoom: boolean;
             toast: {
                 message: string;

package/types/actions/actionCanvas.d.ts

@@ -9,7 +9,7 @@ export declare const actionChangeViewBackgroundColor: {
         appState: any;
         commitToHistory: boolean;
     };
-    PanelComponent: ({ elements, appState, updateData }: import("./types").PanelComponentProps) => JSX.Element;
+    PanelComponent: ({ elements, appState, updateData, appProps }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
     keyTest?: undefined;
 };
@@ -41,7 +41,7 @@ export declare const actionClearCanvas: {
                 lastActiveTool: import("../types").LastActiveTool;
                 locked: boolean;
             } & ({
-                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "freedraw" | "eraser" | "hand";
+                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "frame" | "freedraw" | "eraser" | "hand";
                 customType: null;
             } | {
                 type: "custom";
@@ -63,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;
@@ -91,7 +95,7 @@ export declare const actionClearCanvas: {
                 value: NormalizedZoomValue;
             }>;
             openMenu: "canvas" | "shape" | null;
-            openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
             openSidebar: {
                 name: string;
                 tab?: string | undefined;
@@ -105,6 +109,7 @@ export declare const actionClearCanvas: {
             previousSelectedElementIds: {
                 [id: string]: boolean;
             };
+            selectedElementsAreBeingDragged: boolean;
             shouldCacheIgnoreZoom: boolean;
             toast: {
                 message: string;
@@ -157,13 +162,17 @@ 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: {
                 lastActiveTool: import("../types").LastActiveTool;
                 locked: boolean;
             } & ({
-                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "freedraw" | "eraser" | "hand";
+                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "frame" | "freedraw" | "eraser" | "hand";
                 customType: null;
             } | {
                 type: "custom";
@@ -195,7 +204,7 @@ export declare const actionZoomIn: {
             isResizing: boolean;
             isRotating: boolean;
             openMenu: "canvas" | "shape" | null;
-            openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
             openSidebar: {
                 name: string;
                 tab?: string | undefined;
@@ -209,6 +218,7 @@ export declare const actionZoomIn: {
             previousSelectedElementIds: {
                 [id: string]: boolean;
             };
+            selectedElementsAreBeingDragged: boolean;
             shouldCacheIgnoreZoom: boolean;
             toast: {
                 message: string;
@@ -277,13 +287,17 @@ 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: {
                 lastActiveTool: import("../types").LastActiveTool;
                 locked: boolean;
             } & ({
-                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "freedraw" | "eraser" | "hand";
+                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "frame" | "freedraw" | "eraser" | "hand";
                 customType: null;
             } | {
                 type: "custom";
@@ -315,7 +329,7 @@ export declare const actionZoomOut: {
             isResizing: boolean;
             isRotating: boolean;
             openMenu: "canvas" | "shape" | null;
-            openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
             openSidebar: {
                 name: string;
                 tab?: string | undefined;
@@ -329,6 +343,7 @@ export declare const actionZoomOut: {
             previousSelectedElementIds: {
                 [id: string]: boolean;
             };
+            selectedElementsAreBeingDragged: boolean;
             shouldCacheIgnoreZoom: boolean;
             toast: {
                 message: string;
@@ -397,13 +412,17 @@ 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: {
                 lastActiveTool: import("../types").LastActiveTool;
                 locked: boolean;
             } & ({
-                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "freedraw" | "eraser" | "hand";
+                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "frame" | "freedraw" | "eraser" | "hand";
                 customType: null;
             } | {
                 type: "custom";
@@ -435,7 +454,7 @@ export declare const actionResetZoom: {
             isResizing: boolean;
             isRotating: boolean;
             openMenu: "canvas" | "shape" | null;
-            openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
             openSidebar: {
                 name: string;
                 tab?: string | undefined;
@@ -449,6 +468,7 @@ export declare const actionResetZoom: {
             previousSelectedElementIds: {
                 [id: string]: boolean;
             };
+            selectedElementsAreBeingDragged: boolean;
             shouldCacheIgnoreZoom: boolean;
             toast: {
                 message: string;
@@ -511,13 +531,17 @@ export declare const zoomToFitElements: (elements: readonly ExcalidrawElement[],
         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" | "freedraw" | "eraser" | "hand";
+            type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "frame" | "freedraw" | "eraser" | "hand";
             customType: null;
         } | {
             type: "custom";
@@ -549,7 +573,7 @@ export declare const zoomToFitElements: (elements: readonly ExcalidrawElement[],
         isResizing: boolean;
         isRotating: boolean;
         openMenu: "canvas" | "shape" | null;
-        openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
+        openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
         openSidebar: {
             name: string;
             tab?: string | undefined;
@@ -563,6 +587,7 @@ export declare const zoomToFitElements: (elements: readonly ExcalidrawElement[],
         previousSelectedElementIds: {
             [id: string]: boolean;
         };
+        selectedElementsAreBeingDragged: boolean;
         shouldCacheIgnoreZoom: boolean;
         toast: {
             message: string;
@@ -625,13 +650,17 @@ 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: {
                 lastActiveTool: import("../types").LastActiveTool;
                 locked: boolean;
             } & ({
-                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "freedraw" | "eraser" | "hand";
+                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "frame" | "freedraw" | "eraser" | "hand";
                 customType: null;
             } | {
                 type: "custom";
@@ -663,7 +692,7 @@ export declare const actionZoomToSelected: {
             isResizing: boolean;
             isRotating: boolean;
             openMenu: "canvas" | "shape" | null;
-            openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
             openSidebar: {
                 name: string;
                 tab?: string | undefined;
@@ -677,6 +706,7 @@ export declare const actionZoomToSelected: {
             previousSelectedElementIds: {
                 [id: string]: boolean;
             };
+            selectedElementsAreBeingDragged: boolean;
             shouldCacheIgnoreZoom: boolean;
             toast: {
                 message: string;
@@ -744,13 +774,17 @@ 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: {
                 lastActiveTool: import("../types").LastActiveTool;
                 locked: boolean;
             } & ({
-                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "freedraw" | "eraser" | "hand";
+                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "frame" | "freedraw" | "eraser" | "hand";
                 customType: null;
             } | {
                 type: "custom";
@@ -782,7 +816,7 @@ export declare const actionZoomToFit: {
             isResizing: boolean;
             isRotating: boolean;
             openMenu: "canvas" | "shape" | null;
-            openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
             openSidebar: {
                 name: string;
                 tab?: string | undefined;
@@ -796,6 +830,7 @@ export declare const actionZoomToFit: {
             previousSelectedElementIds: {
                 [id: string]: boolean;
             };
+            selectedElementsAreBeingDragged: boolean;
             shouldCacheIgnoreZoom: boolean;
             toast: {
                 message: string;
@@ -859,13 +894,17 @@ 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: {
                 lastActiveTool: import("../types").LastActiveTool;
                 locked: boolean;
             } & ({
-                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "freedraw" | "eraser" | "hand";
+                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "frame" | "freedraw" | "eraser" | "hand";
                 customType: null;
             } | {
                 type: "custom";
@@ -902,7 +941,7 @@ export declare const actionToggleTheme: {
                 value: NormalizedZoomValue;
             }>;
             openMenu: "canvas" | "shape" | null;
-            openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
             openSidebar: {
                 name: string;
                 tab?: string | undefined;
@@ -916,6 +955,7 @@ export declare const actionToggleTheme: {
             previousSelectedElementIds: {
                 [id: string]: boolean;
             };
+            selectedElementsAreBeingDragged: boolean;
             shouldCacheIgnoreZoom: boolean;
             toast: {
                 message: string;
@@ -968,7 +1008,7 @@ export declare const actionToggleEraserTool: {
                 lastActiveTool: import("../types").LastActiveTool;
                 locked: boolean;
             } & ({
-                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "freedraw" | "eraser" | "hand";
+                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "frame" | "freedraw" | "eraser" | "hand";
                 customType: null;
             } | {
                 type: "custom";
@@ -989,6 +1029,10 @@ export declare const actionToggleEraserTool: {
             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;
@@ -1022,7 +1066,7 @@ export declare const actionToggleEraserTool: {
                 value: NormalizedZoomValue;
             }>;
             openMenu: "canvas" | "shape" | null;
-            openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
             openSidebar: {
                 name: string;
                 tab?: string | undefined;
@@ -1033,6 +1077,7 @@ export declare const actionToggleEraserTool: {
             previousSelectedElementIds: {
                 [id: string]: boolean;
             };
+            selectedElementsAreBeingDragged: boolean;
             shouldCacheIgnoreZoom: boolean;
             toast: {
                 message: string;
@@ -1082,7 +1127,7 @@ export declare const actionToggleHandTool: {
                 lastActiveTool: import("../types").LastActiveTool;
                 locked: boolean;
             } & ({
-                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "freedraw" | "eraser" | "hand";
+                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "frame" | "freedraw" | "eraser" | "hand";
                 customType: null;
             } | {
                 type: "custom";
@@ -1103,6 +1148,10 @@ export declare const actionToggleHandTool: {
             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;
@@ -1136,7 +1185,7 @@ export declare const actionToggleHandTool: {
                 value: NormalizedZoomValue;
             }>;
             openMenu: "canvas" | "shape" | null;
-            openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
             openSidebar: {
                 name: string;
                 tab?: string | undefined;
@@ -1147,6 +1196,7 @@ export declare const actionToggleHandTool: {
             previousSelectedElementIds: {
                 [id: string]: boolean;
             };
+            selectedElementsAreBeingDragged: boolean;
             shouldCacheIgnoreZoom: boolean;
             toast: {
                 message: string;