@excalidraw/excalidraw 0.11.0 → 0.12.0

package/types/components/App.d.ts

@@ -3,8 +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 } from "../types";
-export declare const useIsMobile: () => boolean;
+import Scene from "../scene/Scene";
+import { AppClassProperties, AppProps, AppState, ExcalidrawImperativeAPI, BinaryFiles, LibraryItems, SceneData, Device } from "../types";
+import { FileSystemHandle } from "../data/filesystem";
+export declare const useDevice: () => Readonly<{
+    isSmScreen: boolean;
+    isMobile: boolean;
+    isTouchScreen: boolean;
+    canDeviceFitSidebar: boolean;
+}>;
 export declare const useExcalidrawContainer: () => {
     container: HTMLDivElement | null;
     id: string | null;
@@ -14,11 +21,11 @@ declare class App extends React.Component<AppProps, AppState> {
     rc: RoughCanvas | null;
     unmounted: boolean;
     actionManager: ActionManager;
-    isMobile: boolean;
+    device: Device;
     detachIsMobileMqHandler?: () => void;
     private excalidrawContainerRef;
     static defaultProps: Partial<AppProps>;
-    private scene;
+    scene: Scene;
     private resizeObserver;
     private nearestScrollableContainer;
     library: AppClassProperties["library"];
@@ -32,6 +39,10 @@ declare class App extends React.Component<AppProps, AppState> {
     lastPointerDown: React.PointerEvent<HTMLCanvasElement> | null;
     lastPointerUp: React.PointerEvent<HTMLElement> | PointerEvent | null;
     contextMenuOpen: boolean;
+    lastScenePointer: {
+        x: number;
+        y: number;
+    } | null;
     constructor(props: AppProps);
     private renderCanvas;
     render(): JSX.Element;
@@ -43,7 +54,6 @@ declare class App extends React.Component<AppProps, AppState> {
     private onUnload;
     private disableEvent;
     private onFontLoaded;
-    private importLibraryFromUrl;
     private resetHistory;
     /**
      * Resets scene & history.
@@ -51,6 +61,7 @@ declare class App extends React.Component<AppProps, AppState> {
      */
     private resetScene;
     private initializeScene;
+    private refreshDeviceState;
     componentDidMount(): Promise<void>;
     componentWillUnmount(): void;
     private onResize;
@@ -70,10 +81,9 @@ declare class App extends React.Component<AppProps, AppState> {
     private addTextFromPaste;
     setAppState: (obj: any) => void;
     removePointer: (event: React.PointerEvent<HTMLElement> | PointerEvent) => void;
-    toggleLock: () => void;
+    toggleLock: (source?: "keyboard" | "ui") => void;
     togglePenMode: () => void;
     toggleZenMode: () => void;
-    toggleStats: () => void;
     scrollToContent: (target?: ExcalidrawElement | readonly ExcalidrawElement[]) => void;
     clearToast: () => void;
     setToastMessage: (toastMessage: string) => void;
@@ -85,13 +95,21 @@ declare class App extends React.Component<AppProps, AppState> {
         appState?: Pick<AppState, K> | null | undefined;
         collaborators?: SceneData["collaborators"];
         commitToHistory?: SceneData["commitToHistory"];
-        libraryItems?: SceneData["libraryItems"];
     }) => void;
     private onSceneUpdated;
     private updateCurrentCursorPosition;
     private onKeyDown;
     private onKeyUp;
-    private selectShapeTool;
+    private setActiveTool;
+    private setCursor;
+    private resetCursor;
+    /**
+     * returns whether user is making a gesture with >= 2 fingers (points)
+     * on o touch screen (not on a trackpad). Currently only relates to Darwin
+     * (iOS/iPadOS,MacOS), but may work on other devices in the future if
+     * GestureEvent is standardized.
+     */
+    private isTouchScreenMultiTouchGesture;
     private onGestureStart;
     private onGestureChange;
     private onGestureEnd;
@@ -105,6 +123,7 @@ declare class App extends React.Component<AppProps, AppState> {
     private getElementLinkAtPosition;
     private redirectToLink;
     private handleCanvasPointerMove;
+    private handleEraser;
     private handleTouchMove;
     private handleCanvasPointerDown;
     private handleCanvasPointerUp;
@@ -132,6 +151,8 @@ declare class App extends React.Component<AppProps, AppState> {
     private onPointerMoveFromPointerDownHandler;
     private handlePointerMoveOverScrollbars;
     private onPointerUpFromPointerDownHandler;
+    private restoreReadyToEraseElements;
+    private eraseElements;
     private initializeImage;
     /**
      * inserts image into elements array and rerenders
@@ -155,7 +176,7 @@ declare class App extends React.Component<AppProps, AppState> {
     private clearSelection;
     private handleCanvasRef;
     private handleAppOnDrop;
-    loadFileToCanvas: (file: Blob) => void;
+    loadFileToCanvas: (file: File, fileHandle: FileSystemHandle | null) => Promise<void>;
     private handleCanvasContextMenu;
     private maybeDragNewGenericElement;
     private maybeHandleResize;

package/types/components/Avatar.d.ts

@@ -1,10 +1,11 @@
 import "./Avatar.scss";
 import React from "react";
 declare type AvatarProps = {
-    children: string;
     onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     color: string;
     border: string;
+    name: string;
+    src?: string;
 };
-export declare const Avatar: ({ children, color, border, onClick }: AvatarProps) => JSX.Element;
+export declare const Avatar: ({ color, border, onClick, name, src }: AvatarProps) => JSX.Element;
 export {};

package/types/components/ColorPicker.d.ts

@@ -1,10 +1,15 @@
 /// <reference types="react" />
 import "./ColorPicker.scss";
-export declare const ColorPicker: ({ type, color, onChange, label, isActive, setActive, }: {
+import { ExcalidrawElement } from "../element/types";
+import { AppState } from "../types";
+export declare const getCustomColors: (elements: readonly ExcalidrawElement[], type: "elementBackground" | "elementStroke") => string[];
+export declare const ColorPicker: ({ type, color, onChange, label, isActive, setActive, elements, appState, }: {
     type: "canvasBackground" | "elementBackground" | "elementStroke";
     color: string | null;
     onChange: (color: string) => void;
     label: string;
     isActive: boolean;
     setActive: (active: boolean) => void;
+    elements: readonly ExcalidrawElement[];
+    appState: AppState;
 }) => JSX.Element;

package/types/components/ImageExportDialog.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { ActionsManagerInterface } from "../actions/types";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { AppState, BinaryFiles } from "../types";
 import "./ExportDialog.scss";
+import { ActionManager } from "../actions/manager";
 export declare const ErrorCanvasPreview: () => JSX.Element;
 export declare type ExportCB = (elements: readonly NonDeletedExcalidrawElement[], scale?: number) => void;
 export declare const ImageExportDialog: ({ elements, appState, files, exportPadding, actionManager, onExportToPng, onExportToSvg, onExportToClipboard, }: {
@@ -10,7 +10,7 @@ export declare const ImageExportDialog: ({ elements, appState, files, exportPadd
     elements: readonly NonDeletedExcalidrawElement[];
     files: BinaryFiles;
     exportPadding?: number | undefined;
-    actionManager: ActionsManagerInterface;
+    actionManager: ActionManager;
     onExportToPng: ExportCB;
     onExportToSvg: ExportCB;
     onExportToClipboard: ExportCB;

package/types/components/JSONExportDialog.d.ts

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

package/types/components/LayerUI.d.ts

@@ -23,8 +23,9 @@ interface LayerUIProps {
     toggleZenMode: () => void;
     langCode: Language["code"];
     isCollaborating: boolean;
-    renderTopRightUI?: (isMobile: boolean, appState: AppState) => 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"];
@@ -35,5 +36,5 @@ interface LayerUIProps {
         insertOnCanvasDirectly: boolean;
     }) => void;
 }
-declare const _default: React.MemoExoticComponent<({ 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<({ 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/LibraryMenu.d.ts

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

package/types/components/LibraryMenuItems.d.ts

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

package/types/components/LibraryUnit.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { BinaryFiles, LibraryItem } from "../types";
 import "./LibraryUnit.scss";
-export declare const LibraryUnit: ({ id, elements, files, isPending, onClick, selected, onToggle, }: {
+export declare const LibraryUnit: ({ id, elements, files, isPending, onClick, selected, onToggle, onDrag, }: {
     id: LibraryItem["id"] | /** for pending item */ null;
     elements?: readonly import("../element/types").NonDeleted<import("../element/types").ExcalidrawElement>[] | undefined;
     files: BinaryFiles;
@@ -9,4 +9,5 @@ export declare const LibraryUnit: ({ id, elements, files, isPending, onClick, se
     onClick: () => void;
     selected: boolean;
     onToggle: (id: string, event: React.MouseEvent) => void;
+    onDrag: (id: string, event: React.DragEvent) => void;
 }) => JSX.Element;

package/types/components/LoadingMessage.d.ts

@@ -1,2 +1,4 @@
 /// <reference types="react" />
-export declare const LoadingMessage: () => JSX.Element;
+export declare const LoadingMessage: React.FC<{
+    delay?: number;
+}>;

package/types/components/MobileMenu.d.ts

@@ -15,13 +15,14 @@ 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) => JSX.Element | null;
+    renderStats: () => JSX.Element | null;
 };
-export declare const MobileMenu: ({ appState, elements, libraryMenu, actionManager, renderJSONExportDialog, renderImageExportDialog, setAppState, onCollabButtonClick, onLockToggle, onPenModeToggle, canvas, isCollaborating, renderCustomFooter, viewModeEnabled, showThemeBtn, onImageAction, renderTopRightUI, }: MobileMenuProps) => JSX.Element;
+export declare const MobileMenu: ({ appState, elements, libraryMenu, actionManager, renderJSONExportDialog, renderImageExportDialog, setAppState, onCollabButtonClick, onLockToggle, onPenModeToggle, canvas, isCollaborating, renderCustomFooter, viewModeEnabled, showThemeBtn, onImageAction, renderTopRightUI, renderStats, }: 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/Toast.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 import "./Toast.scss";
-export declare const Toast: ({ message, clearToast, }: {
+export declare const Toast: ({ message, clearToast, closable, duration, }: {
     message: string;
     clearToast: () => void;
+    closable?: boolean | undefined;
+    duration?: number | undefined;
 }) => JSX.Element;

package/types/components/ToolButton.d.ts

@@ -38,6 +38,9 @@ declare type ToolButtonProps = (ToolButtonBaseProps & {
     onChange?(data: {
         pointerType: PointerType | null;
     }): void;
+    onPointerDown?(data: {
+        pointerType: PointerType;
+    }): void;
 });
 export declare const ToolButton: React.ForwardRefExoticComponent<ToolButtonProps & React.RefAttributes<unknown>>;
 export {};

package/types/components/UserList.d.ts

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

package/types/components/icons.d.ts

@@ -164,6 +164,16 @@ export declare const TextAlignCenterIcon: React.MemoExoticComponent<({ theme }:
 export declare const TextAlignRightIcon: React.MemoExoticComponent<({ theme }: {
     theme: Theme;
 }) => JSX.Element>;
+export declare const TextAlignTopIcon: React.MemoExoticComponent<({ theme }: {
+    theme: Theme;
+}) => JSX.Element>;
+export declare const TextAlignBottomIcon: React.MemoExoticComponent<({ theme }: {
+    theme: Theme;
+}) => JSX.Element>;
+export declare const TextAlignMiddleIcon: React.MemoExoticComponent<({ theme }: {
+    theme: Theme;
+}) => JSX.Element>;
 export declare const publishIcon: JSX.Element;
 export declare const editIcon: JSX.Element;
+export declare const eraser: JSX.Element;
 export {};

package/types/constants.d.ts

@@ -79,7 +79,9 @@ export declare const MIME_TYPES: {
     readonly excalidrawlib: "application/vnd.excalidrawlib+json";
     readonly json: "application/json";
     readonly svg: "image/svg+xml";
+    readonly "excalidraw.svg": "image/svg+xml";
     readonly png: "image/png";
+    readonly "excalidraw.png": "image/png";
     readonly jpg: "image/jpeg";
     readonly gif: "image/gif";
     readonly binary: "application/octet-stream";
@@ -94,7 +96,6 @@ export declare const IMAGE_RENDER_TIMEOUT = 500;
 export declare const TAP_TWICE_TIMEOUT = 300;
 export declare const TOUCH_CTX_MENU_TIMEOUT = 500;
 export declare const TITLE_TIMEOUT = 10000;
-export declare const TOAST_TIMEOUT = 5000;
 export declare const VERSION_TIMEOUT = 30000;
 export declare const SCROLL_TIMEOUT = 100;
 export declare const ZOOM_STEP = 0.1;
@@ -114,9 +115,12 @@ export declare const URL_HASH_KEYS: {
     readonly addLibrary: "addLibrary";
 };
 export declare const DEFAULT_UI_OPTIONS: AppProps["UIOptions"];
+export declare const MQ_SM_MAX_WIDTH = 640;
 export declare const MQ_MAX_WIDTH_PORTRAIT = 730;
 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;
@@ -130,3 +134,12 @@ export declare const VERSIONS: {
     readonly excalidrawLibrary: 2;
 };
 export declare const BOUND_TEXT_PADDING = 5;
+export declare const VERTICAL_ALIGN: {
+    TOP: string;
+    MIDDLE: string;
+    BOTTOM: string;
+};
+export declare const ELEMENT_READY_TO_ERASE_OPACITY = 20;
+export declare const COOKIES: {
+    readonly AUTH_STATE_COOKIE: "excplus-auth";
+};

package/types/data/blob.d.ts

@@ -1,6 +1,6 @@
 import { ALLOWED_IMAGE_MIME_TYPES, MIME_TYPES } from "../constants";
 import { ExcalidrawElement, FileId } from "../element/types";
-import { AppState, DataURL } from "../types";
+import { AppState, DataURL, LibraryItem } from "../types";
 import { FileSystemHandle } from "./filesystem";
 import { ImportedLibraryData } from "./types";
 export declare const getMimeType: (blob: Blob | string) => string;
@@ -10,8 +10,16 @@ export declare const isImageFileHandle: (handle: FileSystemHandle | null) => boo
 export declare const isSupportedImageFile: (blob: Blob | null | undefined) => blob is Blob & {
     type: typeof ALLOWED_IMAGE_MIME_TYPES[number];
 };
-export declare const loadFromBlob: (blob: Blob, localAppState: AppState | null, localElements: readonly ExcalidrawElement[] | null) => Promise<import("./restore").RestoredDataState>;
-export declare const loadLibraryFromBlob: (blob: Blob) => Promise<ImportedLibraryData>;
+export declare const loadSceneOrLibraryFromBlob: (blob: Blob | File, localAppState: AppState | null, localElements: readonly ExcalidrawElement[] | null, fileHandle?: FileSystemHandle | null | undefined) => Promise<{
+    type: "application/vnd.excalidraw+json";
+    data: import("./restore").RestoredDataState;
+} | {
+    type: "application/vnd.excalidrawlib+json";
+    data: ImportedLibraryData;
+}>;
+export declare const loadFromBlob: (blob: Blob, localAppState: AppState | null, localElements: readonly ExcalidrawElement[] | null, fileHandle?: FileSystemHandle | null | undefined) => Promise<import("./restore").RestoredDataState>;
+export declare const parseLibraryJSON: (json: string, defaultStatus?: LibraryItem["status"]) => LibraryItem[];
+export declare const loadLibraryFromBlob: (blob: Blob, defaultStatus?: LibraryItem["status"]) => Promise<LibraryItem[]>;
 export declare const canvasToBlob: (canvas: HTMLCanvasElement) => Promise<Blob>;
 /** generates SHA-1 digest from supplied file (if not supported, falls back
     to a 40-char base64 random id) */
@@ -26,3 +34,14 @@ export declare const resizeImageFile: (file: File, opts: {
 export declare const SVGStringToFile: (SVGString: string, filename?: string) => File & {
     type: typeof MIME_TYPES.svg;
 };
+export declare const getFileFromEvent: (event: React.DragEvent<HTMLDivElement>) => Promise<{
+    file: File | null;
+    fileHandle: FileSystemHandle | null;
+}>;
+export declare const getFileHandle: (event: React.DragEvent<HTMLDivElement>) => Promise<FileSystemHandle | null>;
+export declare const createFile: (blob: File | Blob | ArrayBuffer, mimeType: ValueOf<typeof MIME_TYPES>, name: string | undefined) => File;
+/** attemps to detect correct mimeType if none is set, or if an image
+ * has an incorrect extension.
+ * Note: doesn't handle missing .excalidraw/.excalidrawlib extension  */
+export declare const normalizeFile: (file: File) => Promise<File>;
+export declare const blobToArrayBuffer: (blob: Blob) => Promise<ArrayBuffer>;

package/types/data/filesystem.d.ts

@@ -1,10 +1,10 @@
-import { FileWithHandle, FileSystemHandle, supported as nativeFileSystemSupported } from "browser-fs-access";
-declare type FILE_EXTENSION = "gif" | "jpg" | "png" | "svg" | "json" | "excalidraw" | "excalidrawlib";
+import { FileSystemHandle, supported as nativeFileSystemSupported } from "browser-fs-access";
+declare type FILE_EXTENSION = "gif" | "jpg" | "png" | "excalidraw.png" | "svg" | "excalidraw.svg" | "json" | "excalidraw" | "excalidrawlib";
 export declare const fileOpen: <M extends boolean | undefined = false>(opts: {
     extensions?: FILE_EXTENSION[] | undefined;
     description: string;
     multiple?: M | undefined;
-}) => Promise<M extends false | undefined ? FileWithHandle : FileWithHandle[]>;
+}) => Promise<M extends false | undefined ? File : File[]>;
 export declare const fileSave: (blob: Blob, opts: {
     /** supply without the extension */
     name: string;

package/types/data/index.d.ts

@@ -4,7 +4,7 @@ import { AppState, BinaryFiles } from "../types";
 import { FileSystemHandle } from "./filesystem";
 export { loadFromBlob } from "./blob";
 export { loadFromJSON, saveAsJSON } from "./json";
-export declare const exportCanvas: (type: ExportType, elements: readonly NonDeletedExcalidrawElement[], appState: AppState, files: BinaryFiles, { exportBackground, exportPadding, viewBackgroundColor, name, fileHandle, }: {
+export declare const exportCanvas: (type: Omit<ExportType, "backend">, elements: readonly NonDeletedExcalidrawElement[], appState: AppState, files: BinaryFiles, { exportBackground, exportPadding, viewBackgroundColor, name, fileHandle, }: {
     exportBackground: boolean;
     exportPadding?: number | undefined;
     viewBackgroundColor: string;

package/types/data/json.d.ts

@@ -1,7 +1,6 @@
 import { ExcalidrawElement } from "../element/types";
 import { AppState, BinaryFiles, LibraryItems } from "../types";
-import { ImportedDataState } from "./types";
-import Library from "./library";
+import { ImportedDataState, ImportedLibraryData } from "./types";
 export declare const serializeAsJSON: (elements: readonly ExcalidrawElement[], appState: Partial<AppState>, files: BinaryFiles, type: "local" | "database") => string;
 export declare const saveAsJSON: (elements: readonly ExcalidrawElement[], appState: AppState, files: BinaryFiles) => Promise<{
     fileHandle: import("browser-fs-access").FileSystemHandle | null;
@@ -12,6 +11,6 @@ export declare const isValidExcalidrawData: (data?: {
     elements?: any;
     appState?: any;
 } | undefined) => data is ImportedDataState;
-export declare const isValidLibrary: (json: any) => any;
+export declare const isValidLibrary: (json: any) => json is ImportedLibraryData;
+export declare const serializeLibraryAsJSON: (libraryItems: LibraryItems) => string;
 export declare const saveLibraryAsJSON: (libraryItems: LibraryItems) => Promise<void>;
-export declare const importLibraryFromJSON: (library: Library) => Promise<void>;

package/types/data/library.d.ts

@@ -1,14 +1,96 @@
-import { LibraryItems, LibraryItem } from "../types";
+import { LibraryItems, ExcalidrawImperativeAPI, LibraryItemsSource } from "../types";
 import type App from "../components/App";
+import { ExcalidrawElement } from "../element/types";
+export declare const libraryItemsAtom: import("jotai").Atom<{
+    status: "loading" | "loaded";
+    isInitialized: boolean;
+    libraryItems: LibraryItems;
+}> & {
+    write: (get: {
+        <Value>(atom: import("jotai").Atom<Value | Promise<Value>>): Value;
+        <Value_1>(atom: import("jotai").Atom<Promise<Value_1>>): Value_1;
+        <Value_2>(atom: import("jotai").Atom<Value_2>): Value_2 extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? any : V : V : V : V : V : V : V : V : V : V : Value_2;
+    } & {
+        <Value_3>(atom: import("jotai").Atom<Value_3 | Promise<Value_3>>, options: {
+            unstable_promise: true;
+        }): Value_3 | Promise<Value_3>;
+        <Value_4>(atom: import("jotai").Atom<Promise<Value_4>>, options: {
+            unstable_promise: true;
+        }): Value_4 | Promise<Value_4>;
+        <Value_5>(atom: import("jotai").Atom<Value_5>, options: {
+            unstable_promise: true;
+        }): (Value_5 extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? any : V : V : V : V : V : V : V : V : V : V : Value_5) | Promise<Value_5 extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? V extends Promise<infer V> ? any : V : V : V : V : V : V : V : V : V : V : Value_5>;
+    }, set: {
+        <Value_6, Result extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_6, undefined, Result>): Result;
+        <Value_7, Update, Result_1 extends void | Promise<void>>(atom: import("jotai").WritableAtom<Value_7, Update, Result_1>, update: Update): Result_1;
+    }, update: {
+        status: "loading" | "loaded";
+        isInitialized: boolean;
+        libraryItems: LibraryItems;
+    } | ((prev: {
+        status: "loading" | "loaded";
+        isInitialized: boolean;
+        libraryItems: LibraryItems;
+    }) => {
+        status: "loading" | "loaded";
+        isInitialized: boolean;
+        libraryItems: LibraryItems;
+    })) => void;
+    onMount?: (<S extends (update: {
+        status: "loading" | "loaded";
+        isInitialized: boolean;
+        libraryItems: LibraryItems;
+    } | ((prev: {
+        status: "loading" | "loaded";
+        isInitialized: boolean;
+        libraryItems: LibraryItems;
+    }) => {
+        status: "loading" | "loaded";
+        isInitialized: boolean;
+        libraryItems: LibraryItems;
+    })) => void>(setAtom: S) => void | (() => void)) | undefined;
+} & {
+    init: {
+        status: "loading" | "loaded";
+        isInitialized: boolean;
+        libraryItems: LibraryItems;
+    };
+};
+/** Merges otherItems into localItems. Unique items in otherItems array are
+    sorted first. */
+export declare const mergeLibraryItems: (localItems: LibraryItems, otherItems: LibraryItems) => LibraryItems;
 declare class Library {
-    private libraryCache;
+    /** latest libraryItems */
+    private lastLibraryItems;
+    /** indicates whether library is initialized with library items (has gone
+     * though at least one update) */
+    private isInitialized;
     private app;
     constructor(app: App);
-    resetLibrary: () => Promise<void>;
-    restoreLibraryItem: (libraryItem: LibraryItem) => LibraryItem | null;
-    /** imports library (currently merges, removing duplicates) */
-    importLibrary(blob: Blob, defaultStatus?: string): Promise<void>;
-    loadLibrary: () => Promise<LibraryItems>;
-    saveLibrary: (items: LibraryItems) => Promise<void>;
+    private updateQueue;
+    private getLastUpdateTask;
+    private notifyListeners;
+    resetLibrary: () => Promise<LibraryItems>;
+    /**
+     * @returns latest cloned libraryItems. Awaits all in-progress updates first.
+     */
+    getLatestLibrary: () => Promise<LibraryItems>;
+    updateLibrary: ({ libraryItems, prompt, merge, openLibraryMenu, defaultStatus, }: {
+        libraryItems: LibraryItemsSource;
+        merge?: boolean | undefined;
+        prompt?: boolean | undefined;
+        openLibraryMenu?: boolean | undefined;
+        defaultStatus?: "published" | "unpublished" | undefined;
+    }) => Promise<LibraryItems>;
+    setLibrary: (libraryItems: LibraryItems | Promise<LibraryItems> | ((latestLibraryItems: LibraryItems) => LibraryItems | Promise<LibraryItems>)) => Promise<LibraryItems>;
 }
 export default Library;
+export declare const distributeLibraryItemsOnSquareGrid: (libraryItems: LibraryItems) => ExcalidrawElement[];
+export declare const parseLibraryTokensFromUrl: () => {
+    libraryUrl: string;
+    idToken: string | null;
+} | null;
+export declare const useHandleLibrary: ({ excalidrawAPI, getInitialLibraryItems, }: {
+    excalidrawAPI: ExcalidrawImperativeAPI | null;
+    getInitialLibraryItems?: (() => LibraryItemsSource) | undefined;
+}) => void;

package/types/data/restore.d.ts

@@ -2,7 +2,7 @@ import { ExcalidrawElement } from "../element/types";
 import { AppState, BinaryFiles, LibraryItem } from "../types";
 import { ImportedDataState } from "./types";
 declare type RestoredAppState = Omit<AppState, "offsetTop" | "offsetLeft" | "width" | "height">;
-export declare const AllowedExcalidrawElementTypes: Record<ExcalidrawElement["type"], true>;
+export declare const AllowedExcalidrawActiveTools: Record<AppState["activeTool"]["type"], boolean>;
 export declare type RestoredDataState = {
     elements: ExcalidrawElement[];
     appState: RestoredAppState;
@@ -10,6 +10,6 @@ export declare type RestoredDataState = {
 };
 export declare const restoreElements: (elements: ImportedDataState["elements"], localElements: readonly ExcalidrawElement[] | null | undefined) => ExcalidrawElement[];
 export declare const restoreAppState: (appState: ImportedDataState["appState"], localAppState: Partial<AppState> | null | undefined) => RestoredAppState;
-export declare const restore: (data: ImportedDataState | null, localAppState: Partial<AppState> | null | undefined, localElements: readonly ExcalidrawElement[] | null | undefined) => RestoredDataState;
-export declare const restoreLibraryItems: (libraryItems: NonOptional<ImportedDataState["libraryItems"]>, defaultStatus: LibraryItem["status"]) => LibraryItem[];
+export declare const restore: (data: Pick<ImportedDataState, "appState" | "elements" | "files"> | null, localAppState: Partial<AppState> | null | undefined, localElements: readonly ExcalidrawElement[] | null | undefined) => RestoredDataState;
+export declare const restoreLibraryItems: (libraryItems: ImportedDataState["libraryItems"], defaultStatus: LibraryItem["status"]) => LibraryItem[];
 export {};