@dwelle/excalidraw 0.3.67 → 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/actions/types.d.ts

@@ -1,7 +1,6 @@
 import React from "react";
 import { ExcalidrawElement } from "../element/types";
 import { AppClassProperties, AppState, ExcalidrawProps, BinaryFiles } from "../types";
-import { ToolButtonSize } from "../components/ToolButton";
 export declare type ActionSource = "ui" | "keyboard" | "contextMenu" | "api";
 /** if false, the action should be prevented */
 export declare type ActionResult = {
@@ -21,10 +20,7 @@ export declare type PanelComponentProps = {
     appState: AppState;
     updateData: (formData?: any) => void;
     appProps: ExcalidrawProps;
-    data?: Partial<{
-        id: string;
-        size: ToolButtonSize;
-    }>;
+    data?: Record<string, any>;
 };
 export interface Action {
     name: ActionName;

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;
+    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

@@ -16,14 +16,15 @@ declare type MobileMenuProps = {
     onPenModeToggle: () => void;
     canvas: HTMLCanvasElement | null;
     isCollaborating: boolean;
-    renderCustomFooter?: (isMobile: boolean, appState: AppState) => JSX.Element;
+    renderCustomFooter?: (isMobile: boolean, appState: AppState) => JSX.Element | null;
     viewModeEnabled: boolean;
     showThemeBtn: boolean;
     onImageAction: (data: {
         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/components/UserList.d.ts

@@ -2,12 +2,10 @@ import "./UserList.scss";
 import React from "react";
 import { AppState } from "../types";
 import { ActionManager } from "../actions/manager";
-declare type UserListProps = {
+export declare const UserList: React.FC<{
     className?: string;
     mobile?: boolean;
     collaborators: AppState["collaborators"];
-    layout: "vertical" | "horizontal";
     actionManager: ActionManager;
-};
-export declare const UserList: React.MemoExoticComponent<({ className, mobile, collaborators, layout, actionManager, }: UserListProps) => JSX.Element>;
-export {};
+    layout: "vertical" | "horizontal";
+}>;

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

@@ -86,10 +86,7 @@ export declare class LinearElementEditor {
                 startBindingElement: ExcalidrawBindableElement | "keep" | null;
                 endBindingElement: ExcalidrawBindableElement | "keep" | null;
             };
-            isLoading: boolean; /**
-             * @param id the `elementId` from the instance of this class (so that we can
-             *  statically guarantee this method returns an ExcalidrawLinearElement)
-             */
+            isLoading: boolean;
             errorMessage: string | null;
             draggingElement: import("./types").NonDeletedExcalidrawElement | null;
             resizingElement: import("./types").NonDeletedExcalidrawElement | null;
@@ -166,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;
@@ -177,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/packages/excalidraw/example/App.d.ts

@@ -1 +1,8 @@
+/// <reference types="react" />
+import "./App.scss";
+declare global {
+    interface Window {
+        ExcalidrawLib: any;
+    }
+}
 export default function App(): JSX.Element;

package/types/packages/excalidraw/example/sidebar/Sidebar.d.ts

@@ -1 +1,5 @@
-export default function Sidebar(props: any): JSX.Element;
+import React from "react";
+import "./Sidebar.scss";
+export default function Sidebar({ children }: {
+    children: React.ReactNode;
+}): JSX.Element;

package/types/types.d.ts

@@ -30,6 +30,7 @@ export declare type Collaborator = {
         stroke: string;
     };
     avatarUrl?: string;
+    id?: string;
 };
 export declare type DataURL = string & {
     _brand: "DataURL";
@@ -129,6 +130,7 @@ export declare type AppState = {
     offsetTop: number;
     offsetLeft: number;
     isLibraryOpen: boolean;
+    isLibraryMenuDocked: boolean;
     fileHandle: FileSystemHandle | null;
     collaborators: Map<string, Collaborator>;
     showStats: boolean;
@@ -141,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 & {
@@ -214,7 +216,7 @@ export interface ExcalidrawProps {
     }) => void;
     onPaste?: (data: ClipboardData, event: ClipboardEvent | null) => Promise<boolean> | boolean;
     renderTopRightUI?: (isMobile: boolean, appState: AppState, canvas: HTMLCanvasElement | null) => JSX.Element | null;
-    renderFooter?: (isMobile: boolean, appState: AppState) => JSX.Element;
+    renderFooter?: (isMobile: boolean, appState: AppState) => JSX.Element | null;
     langCode?: Language["code"];
     viewModeEnabled?: boolean;
     zenModeEnabled?: boolean;
@@ -223,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>;
@@ -266,6 +271,7 @@ export declare type UIOptions = {
 export declare type AppProps = ExcalidrawProps & {
     UIOptions: {
         canvasActions: Required<CanvasActions> | false;
+        dockedSidebarBreakpoint?: number;
     };
     detectScroll: boolean;
     handleKeyboardGlobally: boolean;
@@ -283,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<{
@@ -368,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 {};