@dwelle/excalidraw 0.3.68 → 0.3.69

package/types/actions/actionProperties.d.ts

@@ -101,6 +101,7 @@ export declare const actionChangeFillStyle: {
             offsetTop: number;
             offsetLeft: number;
             isLibraryOpen: boolean;
+            isLibraryMenuDocked: boolean;
             fileHandle: import("browser-fs-access").FileSystemHandle | null;
             collaborators: Map<string, import("../../src/types").Collaborator>;
             showStats: boolean;
@@ -112,7 +113,7 @@ export declare const actionChangeFillStyle: {
                 shown: true;
                 data: import("../charts").Spreadsheet;
             };
-            pendingImageElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawImageElement> | null;
+            pendingImageElementId: string | null;
             showHyperlinkPopup: false | "info" | "editor";
         };
         commitToHistory: true;
@@ -205,6 +206,7 @@ export declare const actionChangeStrokeWidth: {
             offsetTop: number;
             offsetLeft: number;
             isLibraryOpen: boolean;
+            isLibraryMenuDocked: boolean;
             fileHandle: import("browser-fs-access").FileSystemHandle | null;
             collaborators: Map<string, import("../../src/types").Collaborator>;
             showStats: boolean;
@@ -216,7 +218,7 @@ export declare const actionChangeStrokeWidth: {
                 shown: true;
                 data: import("../charts").Spreadsheet;
             };
-            pendingImageElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawImageElement> | null;
+            pendingImageElementId: string | null;
             showHyperlinkPopup: false | "info" | "editor";
         };
         commitToHistory: true;
@@ -309,6 +311,7 @@ export declare const actionChangeSloppiness: {
             offsetTop: number;
             offsetLeft: number;
             isLibraryOpen: boolean;
+            isLibraryMenuDocked: boolean;
             fileHandle: import("browser-fs-access").FileSystemHandle | null;
             collaborators: Map<string, import("../../src/types").Collaborator>;
             showStats: boolean;
@@ -320,7 +323,7 @@ export declare const actionChangeSloppiness: {
                 shown: true;
                 data: import("../charts").Spreadsheet;
             };
-            pendingImageElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawImageElement> | null;
+            pendingImageElementId: string | null;
             showHyperlinkPopup: false | "info" | "editor";
         };
         commitToHistory: true;
@@ -413,6 +416,7 @@ export declare const actionChangeStrokeStyle: {
             offsetTop: number;
             offsetLeft: number;
             isLibraryOpen: boolean;
+            isLibraryMenuDocked: boolean;
             fileHandle: import("browser-fs-access").FileSystemHandle | null;
             collaborators: Map<string, import("../../src/types").Collaborator>;
             showStats: boolean;
@@ -424,7 +428,7 @@ export declare const actionChangeStrokeStyle: {
                 shown: true;
                 data: import("../charts").Spreadsheet;
             };
-            pendingImageElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawImageElement> | null;
+            pendingImageElementId: string | null;
             showHyperlinkPopup: false | "info" | "editor";
         };
         commitToHistory: true;
@@ -517,6 +521,7 @@ export declare const actionChangeOpacity: {
             offsetTop: number;
             offsetLeft: number;
             isLibraryOpen: boolean;
+            isLibraryMenuDocked: boolean;
             fileHandle: import("browser-fs-access").FileSystemHandle | null;
             collaborators: Map<string, import("../../src/types").Collaborator>;
             showStats: boolean;
@@ -528,7 +533,7 @@ export declare const actionChangeOpacity: {
                 shown: true;
                 data: import("../charts").Spreadsheet;
             };
-            pendingImageElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawImageElement> | null;
+            pendingImageElementId: string | null;
             showHyperlinkPopup: false | "info" | "editor";
         };
         commitToHistory: true;
@@ -621,6 +626,7 @@ export declare const actionChangeFontSize: {
             offsetTop: number;
             offsetLeft: number;
             isLibraryOpen: boolean;
+            isLibraryMenuDocked: boolean;
             fileHandle: import("browser-fs-access").FileSystemHandle | null;
             collaborators: Map<string, import("../../src/types").Collaborator>;
             showStats: boolean;
@@ -632,7 +638,7 @@ export declare const actionChangeFontSize: {
                 shown: true;
                 data: import("../charts").Spreadsheet;
             };
-            pendingImageElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawImageElement> | null;
+            pendingImageElementId: string | null;
             showHyperlinkPopup: false | "info" | "editor";
         };
         commitToHistory: boolean;
@@ -725,6 +731,7 @@ export declare const actionDecreaseFontSize: {
             offsetTop: number;
             offsetLeft: number;
             isLibraryOpen: boolean;
+            isLibraryMenuDocked: boolean;
             fileHandle: import("browser-fs-access").FileSystemHandle | null;
             collaborators: Map<string, import("../../src/types").Collaborator>;
             showStats: boolean;
@@ -736,7 +743,7 @@ export declare const actionDecreaseFontSize: {
                 shown: true;
                 data: import("../charts").Spreadsheet;
             };
-            pendingImageElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawImageElement> | null;
+            pendingImageElementId: string | null;
             showHyperlinkPopup: false | "info" | "editor";
         };
         commitToHistory: boolean;
@@ -829,6 +836,7 @@ export declare const actionIncreaseFontSize: {
             offsetTop: number;
             offsetLeft: number;
             isLibraryOpen: boolean;
+            isLibraryMenuDocked: boolean;
             fileHandle: import("browser-fs-access").FileSystemHandle | null;
             collaborators: Map<string, import("../../src/types").Collaborator>;
             showStats: boolean;
@@ -840,7 +848,7 @@ export declare const actionIncreaseFontSize: {
                 shown: true;
                 data: import("../charts").Spreadsheet;
             };
-            pendingImageElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawImageElement> | null;
+            pendingImageElementId: string | null;
             showHyperlinkPopup: false | "info" | "editor";
         };
         commitToHistory: boolean;
@@ -933,6 +941,7 @@ export declare const actionChangeFontFamily: {
             offsetTop: number;
             offsetLeft: number;
             isLibraryOpen: boolean;
+            isLibraryMenuDocked: boolean;
             fileHandle: import("browser-fs-access").FileSystemHandle | null;
             collaborators: Map<string, import("../../src/types").Collaborator>;
             showStats: boolean;
@@ -944,7 +953,7 @@ export declare const actionChangeFontFamily: {
                 shown: true;
                 data: import("../charts").Spreadsheet;
             };
-            pendingImageElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawImageElement> | null;
+            pendingImageElementId: string | null;
             showHyperlinkPopup: false | "info" | "editor";
         };
         commitToHistory: true;
@@ -1037,6 +1046,7 @@ export declare const actionChangeTextAlign: {
             offsetTop: number;
             offsetLeft: number;
             isLibraryOpen: boolean;
+            isLibraryMenuDocked: boolean;
             fileHandle: import("browser-fs-access").FileSystemHandle | null;
             collaborators: Map<string, import("../../src/types").Collaborator>;
             showStats: boolean;
@@ -1048,7 +1058,7 @@ export declare const actionChangeTextAlign: {
                 shown: true;
                 data: import("../charts").Spreadsheet;
             };
-            pendingImageElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawImageElement> | null;
+            pendingImageElementId: string | null;
             showHyperlinkPopup: false | "info" | "editor";
         };
         commitToHistory: true;
@@ -1143,6 +1153,7 @@ export declare const actionChangeVerticalAlign: {
             offsetTop: number;
             offsetLeft: number;
             isLibraryOpen: boolean;
+            isLibraryMenuDocked: boolean;
             fileHandle: import("browser-fs-access").FileSystemHandle | null;
             collaborators: Map<string, import("../../src/types").Collaborator>;
             showStats: boolean;
@@ -1154,7 +1165,7 @@ export declare const actionChangeVerticalAlign: {
                 shown: true;
                 data: import("../charts").Spreadsheet;
             };
-            pendingImageElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawImageElement> | null;
+            pendingImageElementId: string | null;
             showHyperlinkPopup: false | "info" | "editor";
         };
         commitToHistory: true;
@@ -1247,6 +1258,7 @@ export declare const actionChangeSharpness: {
             offsetTop: number;
             offsetLeft: number;
             isLibraryOpen: boolean;
+            isLibraryMenuDocked: boolean;
             fileHandle: import("browser-fs-access").FileSystemHandle | null;
             collaborators: Map<string, import("../../src/types").Collaborator>;
             showStats: boolean;
@@ -1258,7 +1270,7 @@ export declare const actionChangeSharpness: {
                 shown: true;
                 data: import("../charts").Spreadsheet;
             };
-            pendingImageElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawImageElement> | null;
+            pendingImageElementId: string | null;
             showHyperlinkPopup: false | "info" | "editor";
         };
         commitToHistory: true;
@@ -1354,6 +1366,7 @@ export declare const actionChangeArrowhead: {
             offsetTop: number;
             offsetLeft: number;
             isLibraryOpen: boolean;
+            isLibraryMenuDocked: boolean;
             fileHandle: import("browser-fs-access").FileSystemHandle | null;
             collaborators: Map<string, import("../../src/types").Collaborator>;
             showStats: boolean;
@@ -1365,7 +1378,7 @@ export declare const actionChangeArrowhead: {
                 shown: true;
                 data: import("../charts").Spreadsheet;
             };
-            pendingImageElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawImageElement> | null;
+            pendingImageElementId: string | null;
             showHyperlinkPopup: false | "info" | "editor";
         };
         commitToHistory: true;

package/types/actions/actionStyles.d.ts

@@ -85,6 +85,7 @@ export declare const actionCopyStyles: {
             offsetTop: number;
             offsetLeft: number;
             isLibraryOpen: boolean;
+            isLibraryMenuDocked: boolean;
             fileHandle: import("browser-fs-access").FileSystemHandle | null;
             collaborators: Map<string, import("../types").Collaborator>;
             showStats: boolean;
@@ -96,7 +97,7 @@ export declare const actionCopyStyles: {
                 shown: true;
                 data: import("../charts").Spreadsheet;
             };
-            pendingImageElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawImageElement> | null;
+            pendingImageElementId: string | null;
             showHyperlinkPopup: false | "info" | "editor";
         };
         commitToHistory: false;

package/types/actions/actionToggleGridMode.d.ts

@@ -86,6 +86,7 @@ export declare const actionToggleGridMode: {
             offsetTop: number;
             offsetLeft: number;
             isLibraryOpen: boolean;
+            isLibraryMenuDocked: boolean;
             fileHandle: import("browser-fs-access").FileSystemHandle | null;
             collaborators: Map<string, import("../types").Collaborator>;
             showStats: boolean;
@@ -97,7 +98,7 @@ export declare const actionToggleGridMode: {
                 shown: true;
                 data: import("../charts").Spreadsheet;
             };
-            pendingImageElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawImageElement> | null;
+            pendingImageElementId: string | null;
             showHyperlinkPopup: false | "info" | "editor";
         };
         commitToHistory: false;

package/types/actions/actionToggleStats.d.ts

@@ -85,6 +85,7 @@ export declare const actionToggleStats: {
             offsetTop: number;
             offsetLeft: number;
             isLibraryOpen: boolean;
+            isLibraryMenuDocked: boolean;
             fileHandle: import("browser-fs-access").FileSystemHandle | null;
             collaborators: Map<string, import("../types").Collaborator>;
             currentChartType: import("../element/types").ChartType;
@@ -95,7 +96,7 @@ export declare const actionToggleStats: {
                 shown: true;
                 data: import("../charts").Spreadsheet;
             };
-            pendingImageElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawImageElement> | null;
+            pendingImageElementId: string | null;
             showHyperlinkPopup: false | "info" | "editor";
         };
         commitToHistory: false;

package/types/actions/actionToggleViewMode.d.ts

@@ -85,6 +85,7 @@ export declare const actionToggleViewMode: {
             offsetTop: number;
             offsetLeft: number;
             isLibraryOpen: boolean;
+            isLibraryMenuDocked: boolean;
             fileHandle: import("browser-fs-access").FileSystemHandle | null;
             collaborators: Map<string, import("../types").Collaborator>;
             showStats: boolean;
@@ -96,7 +97,7 @@ export declare const actionToggleViewMode: {
                 shown: true;
                 data: import("../charts").Spreadsheet;
             };
-            pendingImageElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawImageElement> | null;
+            pendingImageElementId: string | null;
             showHyperlinkPopup: false | "info" | "editor";
         };
         commitToHistory: false;

package/types/actions/actionToggleZenMode.d.ts

@@ -85,6 +85,7 @@ export declare const actionToggleZenMode: {
             offsetTop: number;
             offsetLeft: number;
             isLibraryOpen: boolean;
+            isLibraryMenuDocked: boolean;
             fileHandle: import("browser-fs-access").FileSystemHandle | null;
             collaborators: Map<string, import("../types").Collaborator>;
             showStats: boolean;
@@ -96,7 +97,7 @@ export declare const actionToggleZenMode: {
                 shown: true;
                 data: import("../charts").Spreadsheet;
             };
-            pendingImageElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawImageElement> | null;
+            pendingImageElementId: string | null;
             showHyperlinkPopup: false | "info" | "editor";
         };
         commitToHistory: false;

package/types/appState.d.ts

@@ -57,6 +57,8 @@ export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>)
         [groupId: string]: boolean;
     } | undefined;
     editingGroupId?: string | null | undefined;
+    isLibraryOpen?: boolean | undefined;
+    isLibraryMenuDocked?: boolean | undefined;
     showStats?: boolean | undefined;
     currentChartType?: import("./element/types").ChartType | undefined;
 };

package/types/components/App.d.ts

@@ -3,9 +3,15 @@ import { RoughCanvas } from "roughjs/bin/canvas";
 import { ActionManager } from "../actions/manager";
 import { ExcalidrawElement, NonDeletedExcalidrawElement } from "../element/types";
 import History from "../history";
-import { AppClassProperties, AppProps, AppState, ExcalidrawImperativeAPI, BinaryFiles, LibraryItems, SceneData, DeviceType } from "../types";
+import Scene from "../scene/Scene";
+import { AppClassProperties, AppProps, AppState, ExcalidrawImperativeAPI, BinaryFiles, LibraryItems, SceneData, Device } from "../types";
 import { FileSystemHandle } from "../data/filesystem";
-export declare const useDeviceType: () => DeviceType;
+export declare const useDevice: () => Readonly<{
+    isSmScreen: boolean;
+    isMobile: boolean;
+    isTouchScreen: boolean;
+    canDeviceFitSidebar: boolean;
+}>;
 export declare const useExcalidrawContainer: () => {
     container: HTMLDivElement | null;
     id?: string | null | undefined;
@@ -15,11 +21,11 @@ declare class App extends React.Component<AppProps, AppState> {
     rc: RoughCanvas | null;
     unmounted: boolean;
     actionManager: ActionManager;
-    deviceType: DeviceType;
+    device: Device;
     detachIsMobileMqHandler?: () => void;
     private excalidrawContainerRef;
     static defaultProps: Partial<AppProps>;
-    private scene;
+    scene: Scene;
     private resizeObserver;
     private nearestScrollableContainer;
     library: AppClassProperties["library"];
@@ -55,6 +61,7 @@ declare class App extends React.Component<AppProps, AppState> {
      */
     private resetScene;
     private initializeScene;
+    private refreshDeviceState;
     componentDidMount(): Promise<void>;
     componentWillUnmount(): void;
     private onResize;
@@ -77,7 +84,6 @@ declare class App extends React.Component<AppProps, AppState> {
     toggleLock: (source?: "keyboard" | "ui") => void;
     togglePenMode: () => void;
     toggleZenMode: () => void;
-    toggleStats: () => void;
     scrollToContent: (target?: ExcalidrawElement | readonly ExcalidrawElement[]) => void;
     clearToast: () => void;
     setToastMessage: (toastMessage: string) => void;

package/types/components/LayerUI.d.ts

@@ -24,8 +24,9 @@ interface LayerUIProps {
     toggleZenMode: () => void;
     langCode: Language["code"];
     isCollaborating: boolean;
-    renderTopRightUI?: (isMobile: boolean, appState: AppState, canvas: HTMLCanvasElement | null) => JSX.Element | null;
-    renderCustomFooter?: (isMobile: boolean, appState: AppState) => JSX.Element | null;
+    renderTopRightUI?: ExcalidrawProps["renderTopRightUI"];
+    renderCustomFooter?: ExcalidrawProps["renderFooter"];
+    renderCustomStats?: ExcalidrawProps["renderCustomStats"];
     viewModeEnabled: boolean;
     libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
     UIOptions: AppProps["UIOptions"];
@@ -36,5 +37,5 @@ interface LayerUIProps {
         insertOnCanvasDirectly: boolean;
     }) => void;
 }
-declare const _default: React.MemoExoticComponent<({ onHomeButtonClick, actionManager, appState, files, setAppState, canvas, elements, onCollabButtonClick, onLockToggle, onPenModeToggle, onInsertElements, zenModeEnabled, showExitZenModeBtn, showThemeBtn, toggleZenMode, isCollaborating, renderTopRightUI, renderCustomFooter, viewModeEnabled, libraryReturnUrl, UIOptions, focusContainer, library, id, onImageAction, }: LayerUIProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ onHomeButtonClick, actionManager, appState, files, setAppState, canvas, elements, onCollabButtonClick, onLockToggle, onPenModeToggle, onInsertElements, zenModeEnabled, showExitZenModeBtn, showThemeBtn, toggleZenMode, isCollaborating, renderTopRightUI, renderCustomFooter, renderCustomStats, viewModeEnabled, libraryReturnUrl, UIOptions, focusContainer, library, id, onImageAction, }: LayerUIProps) => JSX.Element>;
 export default _default;

package/types/components/LibraryMenuItems.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import Library from "../data/library";
 import { AppState, BinaryFiles, ExcalidrawProps, LibraryItem, LibraryItems } from "../types";
 import "./LibraryMenuItems.scss";
-declare const LibraryMenuItems: ({ isLoading, libraryItems, onRemoveFromLibrary, onAddToLibrary, onInsertLibraryItems, pendingElements, theme, setAppState, libraryReturnUrl, library, files, id, selectedItems, onSelectItems, onPublish, resetLibrary, }: {
+declare const LibraryMenuItems: ({ isLoading, libraryItems, onRemoveFromLibrary, onAddToLibrary, onInsertLibraryItems, pendingElements, theme, setAppState, appState, libraryReturnUrl, library, files, id, selectedItems, onSelectItems, onPublish, resetLibrary, }: {
     isLoading: boolean;
     libraryItems: LibraryItems;
     pendingElements: LibraryItem["elements"];
@@ -12,6 +12,7 @@ declare const LibraryMenuItems: ({ isLoading, libraryItems, onRemoveFromLibrary,
     theme: AppState["theme"];
     files: BinaryFiles;
     setAppState: React.Component<any, AppState>["setState"];
+    appState: AppState;
     libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
     library: Library;
     id: string;

package/types/components/MobileMenu.d.ts

@@ -23,7 +23,8 @@ declare type MobileMenuProps = {
         insertOnCanvasDirectly: boolean;
     }) => void;
     renderTopRightUI?: (isMobile: boolean, appState: AppState, canvas: HTMLCanvasElement | null) => JSX.Element | null;
+    renderStats: () => JSX.Element | null;
     UIOptions: AppProps["UIOptions"];
 };
-export declare const MobileMenu: ({ onHomeButtonClick, appState, elements, libraryMenu, actionManager, renderJSONExportDialog, renderImageExportDialog, setAppState, onCollabButtonClick, onLockToggle, onPenModeToggle, canvas, isCollaborating, renderCustomFooter, viewModeEnabled, showThemeBtn, onImageAction, renderTopRightUI, UIOptions, }: MobileMenuProps) => JSX.Element;
+export declare const MobileMenu: ({ onHomeButtonClick, appState, elements, libraryMenu, actionManager, renderJSONExportDialog, renderImageExportDialog, setAppState, onCollabButtonClick, onLockToggle, onPenModeToggle, canvas, isCollaborating, renderCustomFooter, viewModeEnabled, showThemeBtn, onImageAction, renderTopRightUI, renderStats, UIOptions, }: MobileMenuProps) => JSX.Element;
 export {};

package/types/components/SidebarLockButton.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import "./ToolIcon.scss";
+import "./SidebarLockButton.scss";
+declare type SidebarLockIconProps = {
+    checked: boolean;
+    onChange?(): void;
+};
+export declare const SidebarLockButton: (props: SidebarLockIconProps) => JSX.Element;
+export {};

package/types/components/Stack.d.ts

@@ -10,6 +10,6 @@ declare type StackProps = {
 };
 declare const _default: {
     Row: ({ children, gap, align, justifyContent, className, style, }: StackProps) => JSX.Element;
-    Col: ({ children, gap, align, justifyContent, className, }: StackProps) => JSX.Element;
+    Col: ({ children, gap, align, justifyContent, className, style, }: StackProps) => JSX.Element;
 };
 export default _default;

package/types/constants.d.ts

@@ -120,9 +120,12 @@ export declare const DEFAULT_UI_OPTIONS: Merge<AppProps["UIOptions"], {
         export: ExportOpts;
     }>;
 }>;
+export declare const MQ_SM_MAX_WIDTH = 640;
 export declare const MQ_MAX_WIDTH_PORTRAIT = 800;
 export declare const MQ_MAX_WIDTH_LANDSCAPE = 1000;
 export declare const MQ_MAX_HEIGHT_LANDSCAPE = 500;
+export declare const MQ_RIGHT_SIDEBAR_MIN_WIDTH = 1229;
+export declare const LIBRARY_SIDEBAR_WIDTH: number;
 export declare const MAX_DECIMALS_FOR_SVG_EXPORT = 2;
 export declare const EXPORT_SCALES: number[];
 export declare const DEFAULT_EXPORT_PADDING = 10;

package/types/element/Hyperlink.d.ts

@@ -96,6 +96,7 @@ export declare const actionLink: {
             offsetTop: number;
             offsetLeft: number;
             isLibraryOpen: boolean;
+            isLibraryMenuDocked: boolean;
             fileHandle: import("browser-fs-access").FileSystemHandle | null;
             collaborators: Map<string, import("../types").Collaborator>;
             showStats: boolean;
@@ -107,7 +108,7 @@ export declare const actionLink: {
                 shown: true;
                 data: import("../charts").Spreadsheet;
             };
-            pendingImageElement: import("./types").NonDeleted<import("./types").ExcalidrawImageElement> | null;
+            pendingImageElementId: string | null;
         };
         commitToHistory: true;
     };

package/types/element/linearElementEditor.d.ts

@@ -163,6 +163,7 @@ export declare class LinearElementEditor {
             offsetTop: number;
             offsetLeft: number;
             isLibraryOpen: boolean;
+            isLibraryMenuDocked: boolean;
             fileHandle: import("browser-fs-access").FileSystemHandle | null;
             collaborators: Map<string, import("../types").Collaborator>;
             showStats: boolean;
@@ -174,7 +175,7 @@ export declare class LinearElementEditor {
                 shown: true;
                 data: import("../charts").Spreadsheet;
             };
-            pendingImageElement: NonDeleted<import("./types").ExcalidrawImageElement> | null;
+            pendingImageElementId: string | null;
             showHyperlinkPopup: false | "info" | "editor";
         };
     };

package/types/types.d.ts

@@ -130,6 +130,7 @@ export declare type AppState = {
     offsetTop: number;
     offsetLeft: number;
     isLibraryOpen: boolean;
+    isLibraryMenuDocked: boolean;
     fileHandle: FileSystemHandle | null;
     collaborators: Map<string, Collaborator>;
     showStats: boolean;
@@ -142,7 +143,7 @@ export declare type AppState = {
         data: Spreadsheet;
     };
     /** imageElement waiting to be placed on canvas */
-    pendingImageElement: NonDeleted<ExcalidrawImageElement> | null;
+    pendingImageElementId: ExcalidrawImageElement["id"] | null;
     showHyperlinkPopup: false | "info" | "editor";
 };
 export declare type NormalizedZoomValue = number & {
@@ -224,7 +225,10 @@ export interface ExcalidrawProps {
     theme?: Theme;
     name?: string;
     renderCustomStats?: (elements: readonly NonDeletedExcalidrawElement[], appState: AppState) => JSX.Element;
-    UIOptions?: UIOptions;
+    UIOptions?: {
+        dockedSidebarBreakpoint?: number;
+        canvasActions?: CanvasActions;
+    };
     detectScroll?: boolean;
     handleKeyboardGlobally?: boolean;
     onLibraryChange?: (libraryItems: LibraryItems) => void | Promise<any>;
@@ -267,6 +271,7 @@ export declare type UIOptions = {
 export declare type AppProps = ExcalidrawProps & {
     UIOptions: {
         canvasActions: Required<CanvasActions> | false;
+        dockedSidebarBreakpoint?: number;
     };
     detectScroll: boolean;
     handleKeyboardGlobally: boolean;
@@ -284,7 +289,8 @@ export declare type AppClassProperties = {
         mimeType: typeof ALLOWED_IMAGE_MIME_TYPES[number];
     }>;
     files: BinaryFiles;
-    deviceType: App["deviceType"];
+    device: App["device"];
+    scene: App["scene"];
 };
 export declare type PointerDownState = Readonly<{
     origin: Readonly<{
@@ -369,8 +375,10 @@ export declare type ExcalidrawImperativeAPI = {
     resetCursor: InstanceType<typeof App>["resetCursor"];
     app: InstanceType<typeof App>;
 };
-export declare type DeviceType = {
+export declare type Device = Readonly<{
+    isSmScreen: boolean;
     isMobile: boolean;
     isTouchScreen: boolean;
-};
+    canDeviceFitSidebar: boolean;
+}>;
 export {};