@dwelle/excalidraw 0.5.0-ef89e88 → 0.5.0-efddbb7

package/dist/types/excalidraw/appState.d.ts

@@ -10,6 +10,7 @@ export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>)
     }> | undefined;
     showWelcomeScreen?: boolean | undefined;
     isBindingEnabled?: boolean | undefined;
+    boxSelectionMode?: import("./types").BoxSelectionMode | undefined;
     bindingPreference?: "enabled" | "disabled" | undefined;
     isMidpointSnappingEnabled?: boolean | undefined;
     activeTool?: ({

package/dist/types/excalidraw/clipboard.d.ts

@@ -2,7 +2,6 @@ import { ALLOWED_PASTE_MIME_TYPES } from "@excalidraw/common";
 import type { ValueOf } from "@excalidraw/common/utility-types";
 import type { IMAGE_MIME_TYPES, STRING_MIME_TYPES } from "@excalidraw/common";
 import type { ExcalidrawElement, NonDeletedExcalidrawElement } from "@excalidraw/element/types";
-import type { FileSystemHandle } from "./data/filesystem";
 import type { BinaryFiles } from "./types";
 export type PastedMixedContent = {
     type: "text" | "imageUrl";
@@ -52,7 +51,7 @@ type AllowedParsedDataTransferItem = {
     type: ValueOf<typeof IMAGE_MIME_TYPES>;
     kind: "file";
     file: File;
-    fileHandle: FileSystemHandle | null;
+    fileHandle: FileSystemFileHandle | null;
 } | {
     type: ValueOf<typeof STRING_MIME_TYPES>;
     kind: "string";
@@ -62,7 +61,7 @@ type ParsedDataTransferItem = {
     type: string;
     kind: "file";
     file: File;
-    fileHandle: FileSystemHandle | null;
+    fileHandle: FileSystemFileHandle | null;
 } | {
     type: string;
     kind: "string";

package/dist/types/excalidraw/components/App.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { type EXPORT_IMAGE_TYPES, Emitter, type EditorInterface, type StylesPanelMode } from "@excalidraw/common";
+import { AppEventBus, type EXPORT_IMAGE_TYPES, Emitter, type EditorInterface, type StylesPanelMode } from "@excalidraw/common";
 import { LinearElementEditor, FlowChartCreator } from "@excalidraw/element";
 import { Scene, Store, type ElementUpdate, StoreDelta, type ApplyToOptions } from "@excalidraw/element";
 import type { ExcalidrawElement, NonDeleted, NonDeletedExcalidrawElement, ExcalidrawFrameLikeElement, ExcalidrawIframeElement, ExcalidrawEmbeddableElement, Ordered, SceneElementsMap } from "@excalidraw/element/types";
@@ -14,15 +14,31 @@ import { LaserTrails } from "../laser-trails";
 import { isOverScrollBars } from "../scene/scrollbars";
 import { LassoTrail } from "../lasso";
 import { EraserTrail } from "../eraser";
+import { type OnStateChange } from "./AppStateObserver";
 import type { ExportedElements } from "../data";
-import type { FileSystemHandle } from "../data/filesystem";
-import type { AppClassProperties, AppProps, AppState, ExcalidrawImperativeAPI, BinaryFiles, LibraryItems, SceneData, FrameNameBoundsCache, SidebarName, SidebarTabName, ScrollConstraints, ToolType, OnUserFollowedPayload, GenerateDiagramToCode, NullableGridSize, Offsets } from "../types";
+import type { AppClassProperties, AppProps, AppState, ExcalidrawImperativeAPI, BinaryFiles, LibraryItems, SceneData, FrameNameBoundsCache, SidebarName, SidebarTabName, ScrollConstraints, ToolType, OnUserFollowedPayload, ExcalidrawImperativeAPIEventMap, GenerateDiagramToCode, NullableGridSize, Offsets } from "../types";
 import type { RoughCanvas } from "roughjs/bin/canvas";
 import type { ActionResult } from "../actions/types";
+declare const editorLifecycleEventBehavior: {
+    readonly "editor:mount": {
+        readonly cardinality: "once";
+        readonly replay: "last";
+    };
+    readonly "editor:initialize": {
+        readonly cardinality: "once";
+        readonly replay: "last";
+    };
+    readonly "editor:unmount": {
+        readonly cardinality: "once";
+        readonly replay: "last";
+    };
+};
 export declare const ExcalidrawContainerContext: React.Context<{
     container: HTMLDivElement | null;
     id?: string | null;
 }>;
+export declare const ExcalidrawAPIContext: React.Context<ExcalidrawImperativeAPI | null>;
+export declare const ExcalidrawAPISetContext: React.Context<((api: ExcalidrawImperativeAPI | null) => void) | null>;
 export declare const useApp: () => AppClassProperties;
 export declare const useAppProps: () => AppProps;
 export declare const useEditorInterface: () => Readonly<{
@@ -45,6 +61,10 @@ export declare const useExcalidrawElements: () => readonly NonDeletedExcalidrawE
 export declare const useExcalidrawAppState: () => AppState;
 export declare const useExcalidrawSetAppState: () => <K extends keyof AppState>(state: AppState | ((prevState: Readonly<AppState>, props: Readonly<any>) => AppState | Pick<AppState, K> | null) | Pick<AppState, K> | null, callback?: (() => void) | undefined) => void;
 export declare const useExcalidrawActionManager: () => ActionManager;
+/**
+ * Requires wrapping your component in <ExcalidrawAPIContext.Provider>
+ */
+export declare const useExcalidrawAPI: () => ExcalidrawImperativeAPI | null;
 declare class App extends React.Component<AppProps, AppState> {
     canvas: AppClassProperties["canvas"];
     interactiveCanvas: AppClassProperties["interactiveCanvas"];
@@ -81,8 +101,12 @@ declare class App extends React.Component<AppProps, AppState> {
     /** embeds that have been inserted to DOM (as a perf optim, we don't want to
      * insert to DOM before user initially scrolls to them) */
     private initializedEmbeds;
-    private handleToastClose;
     private elementsPendingErasure;
+    private _initialized;
+    private readonly editorLifecycleEvents;
+    onEvent: AppEventBus<ExcalidrawImperativeAPIEventMap, typeof editorLifecycleEventBehavior>["on"];
+    private appStateObserver;
+    onStateChange: OnStateChange;
     flowChartCreator: FlowChartCreator;
     private flowChartNavigator;
     bindModeHandler: ReturnType<typeof setTimeout> | null;
@@ -241,6 +265,8 @@ declare class App extends React.Component<AppProps, AppState> {
     }>]>;
     missingPointerEventCleanupEmitter: Emitter<[event: PointerEvent | null]>;
     onRemoveEventListenersEmitter: Emitter<[]>;
+    api: ExcalidrawImperativeAPI;
+    private createExcalidrawAPI;
     constructor(props: AppProps);
     updateEditorAtom: <Value, Args extends unknown[], Result>(atom: WritableAtom<Value, Args, Result>, ...args: Args) => Result;
     setSessionExportThemeOverride(theme: AppState["theme"]): void;
@@ -336,6 +362,7 @@ declare class App extends React.Component<AppProps, AppState> {
         } | "cursor" | "center";
         retainSeed?: boolean;
         fitToContent?: boolean;
+        preserveFrameChildrenOrder?: boolean;
     }) => void;
     private addElementsFromMixedContentPaste;
     private addTextFromPaste;
@@ -388,11 +415,7 @@ declare class App extends React.Component<AppProps, AppState> {
     private debounceConstrainScrollState;
     private animateToConstrainedArea;
     private animateTranslateCanvas;
-    setToast: (toast: {
-        message: string;
-        closable?: boolean;
-        duration?: number;
-    } | null) => void;
+    setToast: (toast: AppState["toast"]) => void;
     restoreFileFromShare: () => Promise<void>;
     /**
      * adds supplied files to existing files in the appState.
@@ -476,7 +499,15 @@ declare class App extends React.Component<AppProps, AppState> {
     private handleCanvasClick;
     private getElementLinkAtPosition;
     private handleElementLinkClick;
+    /**
+     * finds candidate frame under cursor (when dragging frame children/elements
+     * inside frames)
+     */
     private getTopLayerFrameAtSceneCoords;
+    private updateFrameToHighlight;
+    private maybeUpdateFrameToHighlightOnPointerMove;
+    private insertNewElements;
+    private insertNewElement;
     private handleCanvasPointerMove;
     private handleEraser;
     private handleTouchMove;
@@ -550,7 +581,7 @@ declare class App extends React.Component<AppProps, AppState> {
     private handleInteractiveCanvasRef;
     private insertImages;
     private handleAppOnDrop;
-    loadFileToCanvas: (file: File, fileHandle: FileSystemHandle | null) => Promise<void>;
+    loadFileToCanvas: (file: File, fileHandle: FileSystemFileHandle | null) => Promise<void>;
     private handleCanvasContextMenu;
     private maybeDragNewGenericElement;
     private maybeHandleCrop;

package/dist/types/excalidraw/components/AppStateObserver.d.ts

@@ -0,0 +1,37 @@
+import type { AppState, UnsubscribeCallback } from "../types";
+type StateChangeSelector = keyof AppState | (keyof AppState)[] | ((appState: AppState) => unknown);
+export type OnStateChange = {
+    <K extends keyof AppState>(prop: K, callback: (value: AppState[K], appState: AppState) => void, opts?: {
+        once: boolean;
+    }): UnsubscribeCallback;
+    <K extends keyof AppState>(prop: K): Promise<AppState[K]>;
+    (prop: (keyof AppState)[], callback: (appState: AppState, appState2: AppState) => void, opts?: {
+        once: boolean;
+    }): UnsubscribeCallback;
+    (prop: (keyof AppState)[]): Promise<AppState>;
+    <T>(prop: (appState: AppState) => T, callback: (value: T, appState: AppState) => void, opts?: {
+        once: boolean;
+    }): UnsubscribeCallback;
+    <T>(prop: (appState: AppState) => T): Promise<T>;
+    (opts: {
+        predicate: (appState: AppState) => boolean;
+        callback: (appState: AppState) => void;
+        once?: boolean;
+    }): UnsubscribeCallback;
+    (opts: {
+        predicate: (appState: AppState) => boolean;
+    }): Promise<AppState>;
+    (selector: StateChangeSelector, callback: (value: any, appState: AppState) => void): any;
+};
+export declare class AppStateObserver {
+    private readonly getState;
+    private listeners;
+    constructor(getState: () => AppState);
+    private isStateChangePredicateOptions;
+    private subscribe;
+    private normalize;
+    onStateChange: OnStateChange;
+    flush(prevState: AppState): void;
+    clear(): void;
+}
+export {};

package/dist/types/excalidraw/components/TTDDialog/utils/TTDStreamFetch.d.ts

@@ -1,4 +1,4 @@
-import type { LLMMessage, TTTDDialog } from "@excalidraw/excalidraw/components/TTDDialog/types";
+import type { LLMMessage, TTTDDialog } from "../types";
 interface StreamingOptions {
     url: string;
     messages: readonly LLMMessage[];

package/dist/types/excalidraw/components/Toast.d.ts

@@ -1,9 +1,13 @@
 import "./Toast.scss";
-import type { CSSProperties } from "react";
-export declare const Toast: ({ message, onClose, closable, duration, style, }: {
-    message: string;
+import type { CSSProperties, ReactNode } from "react";
+export declare const Toast: (({ message, onClose, closable, duration, style, }: {
+    message: ReactNode;
     onClose: () => void;
     closable?: boolean;
     duration?: number;
     style?: CSSProperties;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element) & {
+    ProgressBar: ({ progress }: {
+        progress: number;
+    }) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/types/excalidraw/components/canvases/InteractiveCanvas.d.ts

@@ -11,7 +11,7 @@ type InteractiveCanvasProps = {
     visibleElements: readonly NonDeletedExcalidrawElement[];
     selectedElements: readonly NonDeletedExcalidrawElement[];
     allElementsMap: NonDeletedSceneElementsMap;
-    sceneNonce: number | undefined;
+    canvasNonce: string;
     selectionNonce: number | undefined;
     scale: number;
     appState: InteractiveCanvasAppState;

package/dist/types/excalidraw/components/canvases/NewElementCanvas.d.ts

@@ -4,6 +4,7 @@ import type { AppState } from "../../types";
 import type { RoughCanvas } from "roughjs/bin/canvas";
 interface NewElementCanvasProps {
     appState: AppState;
+    newElement: NonNullable<AppState["newElement"]>;
     elementsMap: RenderableElementsMap;
     allElementsMap: NonDeletedSceneElementsMap;
     scale: number;

package/dist/types/excalidraw/components/canvases/StaticCanvas.d.ts

@@ -9,7 +9,7 @@ type StaticCanvasProps = {
     elementsMap: RenderableElementsMap;
     allElementsMap: NonDeletedSceneElementsMap;
     visibleElements: readonly NonDeletedExcalidrawElement[];
-    sceneNonce: number | undefined;
+    canvasNonce: string;
     selectionNonce: number | undefined;
     scale: number;
     appState: StaticCanvasAppState;

package/dist/types/excalidraw/components/dropdownMenu/DropdownMenuItemContentRadio.d.ts

@@ -9,9 +9,10 @@ type Props<T> = {
     onChange: (value: T) => void;
     children: React.ReactNode;
     name: string;
+    icon?: React.ReactNode;
 };
 declare const DropdownMenuItemContentRadio: {
-    <T>({ value, shortcut, onChange, choices, children, name, }: Props<T>): import("react/jsx-runtime").JSX.Element;
+    <T>({ value, shortcut, onChange, choices, children, name, icon, }: Props<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default DropdownMenuItemContentRadio;

package/dist/types/excalidraw/components/main-menu/DefaultItems.d.ts

@@ -70,6 +70,7 @@ export declare const Preferences: {
         additionalItems?: React.ReactNode;
     }): import("react/jsx-runtime").JSX.Element;
     ToggleToolLock: () => import("react/jsx-runtime").JSX.Element;
+    BoxSelectionMode: () => import("react/jsx-runtime").JSX.Element;
     ToggleSnapMode: () => import("react/jsx-runtime").JSX.Element;
     ToggleArrowBinding: () => import("react/jsx-runtime").JSX.Element;
     ToggleMidpointSnapping: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/excalidraw/components/shapes.d.ts

@@ -169,6 +169,13 @@ export declare const getToolbarTools: (app: AppClassProperties) => readonly [{
     readonly fillable: false;
     readonly toolbar: false;
 }] | readonly [{
+    readonly icon: import("react/jsx-runtime").JSX.Element;
+    readonly value: "hand";
+    readonly key: "h";
+    readonly numericKey: null;
+    readonly fillable: false;
+    readonly toolbar: true;
+}, {
     readonly value: "lasso";
     readonly icon: import("react/jsx-runtime").JSX.Element;
     readonly key: "v";

package/dist/types/excalidraw/data/blob.d.ts

@@ -2,12 +2,11 @@ import { IMAGE_MIME_TYPES, MIME_TYPES } from "@excalidraw/common";
 import type { ValueOf } from "@excalidraw/common/utility-types";
 import type { ExcalidrawElement, FileId } from "@excalidraw/element/types";
 import type { AppState, DataURL, LibraryItem } from "../types";
-import type { FileSystemHandle } from "browser-fs-access";
 import type { ImportedLibraryData } from "./types";
 export declare const getMimeType: (blob: Blob | string) => string;
-export declare const getFileHandleType: (handle: FileSystemHandle | null) => string | null;
+export declare const getFileHandleType: (handle: FileSystemFileHandle | null) => string | null;
 export declare const isImageFileHandleType: (type: string | null) => type is "png" | "svg";
-export declare const isImageFileHandle: (handle: FileSystemHandle | null) => boolean;
+export declare const isImageFileHandle: (handle: FileSystemFileHandle | null) => handle is FileSystemFileHandle;
 export declare const isSupportedImageFileType: (type: string | null | undefined) => boolean;
 export declare const isSupportedImageFile: (blob: Blob | null | undefined) => blob is Blob & {
     type: ValueOf<typeof IMAGE_MIME_TYPES>;
@@ -15,8 +14,8 @@ export declare const isSupportedImageFile: (blob: Blob | null | undefined) => bl
 export declare const loadSceneOrLibraryFromBlob: (blob: Blob | File, 
 /** @see restore.localAppState */
 localAppState: AppState | null, localElements: readonly ExcalidrawElement[] | null, 
-/** FileSystemHandle. Defaults to `blob.handle` if defined, otherwise null. */
-fileHandle?: FileSystemHandle | null) => Promise<{
+/** FileSystemFileHandle. Defaults to `blob.handle` if defined, otherwise null. */
+fileHandle?: FileSystemFileHandle | null) => Promise<{
     type: "application/vnd.excalidraw+json";
     data: {
         elements: import("@excalidraw/element/types").OrderedExcalidrawElement[];
@@ -49,9 +48,9 @@ fileHandle?: FileSystemHandle | null) => Promise<{
             multiElement: import("@excalidraw/element/types").NonDeleted<import("@excalidraw/element/types").ExcalidrawLinearElement> | null;
             selectionElement: import("@excalidraw/element/types").NonDeletedExcalidrawElement | null;
             isBindingEnabled: boolean;
+            boxSelectionMode: import("../types").BoxSelectionMode;
             bindingPreference: "enabled" | "disabled";
             isMidpointSnappingEnabled: boolean;
-            startBoundElement: import("@excalidraw/element/types").NonDeleted<import("@excalidraw/element/types").ExcalidrawBindableElement> | null;
             suggestedBinding: {
                 element: import("@excalidraw/element/types").NonDeleted<import("@excalidraw/element/types").ExcalidrawBindableElement>;
                 midPoint?: import("@excalidraw/math").GlobalPoint;
@@ -132,7 +131,7 @@ fileHandle?: FileSystemHandle | null) => Promise<{
             selectedElementsAreBeingDragged: boolean;
             shouldCacheIgnoreZoom: boolean;
             toast: {
-                message: string;
+                message: React.ReactNode;
                 closable?: boolean;
                 duration?: number;
             } | null;
@@ -145,7 +144,7 @@ fileHandle?: FileSystemHandle | null) => Promise<{
                 [groupId: string]: boolean;
             };
             editingGroupId: import("@excalidraw/element/types").GroupId | null;
-            fileHandle: FileSystemHandle | null;
+            fileHandle: FileSystemFileHandle | null;
             collaborators: Map<import("../types").SocketId, import("../types").Collaborator>;
             stats: {
                 open: boolean;
@@ -182,8 +181,8 @@ fileHandle?: FileSystemHandle | null) => Promise<{
 export declare const loadFromBlob: (blob: Blob, 
 /** @see restore.localAppState */
 localAppState: AppState | null, localElements: readonly ExcalidrawElement[] | null, 
-/** FileSystemHandle. Defaults to `blob.handle` if defined, otherwise null. */
-fileHandle?: FileSystemHandle | null) => Promise<{
+/** FileSystemFileHandle. Defaults to `blob.handle` if defined, otherwise null. */
+fileHandle?: FileSystemFileHandle | null) => Promise<{
     elements: import("@excalidraw/element/types").OrderedExcalidrawElement[];
     appState: {
         theme: import("@excalidraw/element/types").Theme;
@@ -214,9 +213,9 @@ fileHandle?: FileSystemHandle | null) => Promise<{
         multiElement: import("@excalidraw/element/types").NonDeleted<import("@excalidraw/element/types").ExcalidrawLinearElement> | null;
         selectionElement: import("@excalidraw/element/types").NonDeletedExcalidrawElement | null;
         isBindingEnabled: boolean;
+        boxSelectionMode: import("../types").BoxSelectionMode;
         bindingPreference: "enabled" | "disabled";
         isMidpointSnappingEnabled: boolean;
-        startBoundElement: import("@excalidraw/element/types").NonDeleted<import("@excalidraw/element/types").ExcalidrawBindableElement> | null;
         suggestedBinding: {
             element: import("@excalidraw/element/types").NonDeleted<import("@excalidraw/element/types").ExcalidrawBindableElement>;
             midPoint?: import("@excalidraw/math").GlobalPoint;
@@ -297,7 +296,7 @@ fileHandle?: FileSystemHandle | null) => Promise<{
         selectedElementsAreBeingDragged: boolean;
         shouldCacheIgnoreZoom: boolean;
         toast: {
-            message: string;
+            message: React.ReactNode;
             closable?: boolean;
             duration?: number;
         } | null;
@@ -310,7 +309,7 @@ fileHandle?: FileSystemHandle | null) => Promise<{
             [groupId: string]: boolean;
         };
         editingGroupId: import("@excalidraw/element/types").GroupId | null;
-        fileHandle: FileSystemHandle | null;
+        fileHandle: FileSystemFileHandle | null;
         collaborators: Map<import("../types").SocketId, import("../types").Collaborator>;
         stats: {
             open: boolean;
@@ -360,7 +359,7 @@ export declare const SVGStringToFile: (SVGString: string, filename?: string) =>
     type: typeof MIME_TYPES.svg;
 };
 export declare const ImageURLToFile: (imageUrl: string, filename?: string) => Promise<File | undefined>;
-export declare const getFileHandle: (event: DragEvent | React.DragEvent | DataTransferItem) => Promise<FileSystemHandle | null>;
+export declare const getFileHandle: (event: DragEvent | React.DragEvent | DataTransferItem) => Promise<FileSystemFileHandle | null>;
 export declare const createFile: (blob: File | Blob | ArrayBuffer, mimeType: string, name: string | undefined) => File;
 /** attempts to detect correct mimeType if none is set, or if an image
  * has an incorrect extension.

package/dist/types/excalidraw/data/filesystem.d.ts

@@ -1,6 +1,5 @@
 import { supported as nativeFileSystemSupported } from "browser-fs-access";
 import { MIME_TYPES } from "@excalidraw/common";
-import type { FileSystemHandle } from "browser-fs-access";
 type FILE_EXTENSION = Exclude<keyof typeof MIME_TYPES, "binary">;
 export declare const fileOpen: <M extends boolean | undefined = false>(opts: {
     extensions?: FILE_EXTENSION[];
@@ -14,8 +13,7 @@ export declare const fileSave: (blob: Blob | Promise<Blob>, opts: {
     extension: FILE_EXTENSION;
     mimeTypes?: string[];
     description: string;
-    /** existing FileSystemHandle */
-    fileHandle?: FileSystemHandle | null;
-}) => Promise<FileSystemHandle | null>;
+    /** existing FileSystemFileHandle */
+    fileHandle?: FileSystemFileHandle | null;
+}) => Promise<FileSystemFileHandle | null>;
 export { nativeFileSystemSupported };
-export type { FileSystemHandle };

package/dist/types/excalidraw/data/index.d.ts

@@ -1,5 +1,4 @@
 import type { ExcalidrawElement, ExcalidrawFrameLikeElement, NonDeletedExcalidrawElement } from "@excalidraw/element/types";
-import type { FileSystemHandle } from "./filesystem";
 import type { ExportType } from "../scene/types";
 import type { AppState, BinaryFiles } from "../types";
 export { loadFromBlob } from "./blob";
@@ -24,7 +23,7 @@ export declare const exportAsImage: ({ type, data, config, }: {
         viewBackgroundColor: string;
         /** filename, if applicable */
         name?: string;
-        fileHandle?: FileSystemHandle | null;
+        fileHandle?: FileSystemFileHandle | null;
         exportingFrame: ExcalidrawFrameLikeElement | null;
     };
-}) => Promise<FileSystemHandle | null | undefined>;
+}) => Promise<FileSystemFileHandle | null | undefined>;

package/dist/types/excalidraw/data/json.d.ts

@@ -1,11 +1,19 @@
-import type { ExcalidrawElement } from "@excalidraw/element/types";
+import type { ExcalidrawElement, NonDeleted } from "@excalidraw/element/types";
+import type { MaybePromise } from "@excalidraw/common/utility-types";
 import type { AppState, BinaryFiles, LibraryItems } from "../types";
 import type { ImportedDataState, ImportedLibraryData } from "./types";
+export type JSONExportData = {
+    elements: readonly NonDeleted<ExcalidrawElement>[];
+    appState: AppState;
+    files: BinaryFiles;
+};
 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, 
-/** filename */
-name?: string) => Promise<{
-    fileHandle: import("browser-fs-access").FileSystemHandle | null;
+export declare const saveAsJSON: ({ data, filename, fileHandle, }: {
+    data: MaybePromise<JSONExportData>;
+    filename: string;
+    fileHandle: AppState["fileHandle"];
+}) => Promise<{
+    fileHandle: FileSystemFileHandle | null;
 }>;
 export declare const loadFromJSON: (localAppState: AppState, localElements: readonly ExcalidrawElement[] | null) => Promise<{
     elements: import("@excalidraw/element/types").OrderedExcalidrawElement[];
@@ -33,21 +41,21 @@ export declare const loadFromJSON: (localAppState: AppState, localElements: read
             element: import("@excalidraw/element/types").NonDeletedExcalidrawElement;
             state: "hover" | "active";
         } | null;
-        newElement: import("@excalidraw/element/types").NonDeleted<import("@excalidraw/element/types").ExcalidrawNonSelectionElement> | null;
+        newElement: NonDeleted<import("@excalidraw/element/types").ExcalidrawNonSelectionElement> | null;
         resizingElement: import("@excalidraw/element/types").NonDeletedExcalidrawElement | null;
-        multiElement: import("@excalidraw/element/types").NonDeleted<import("@excalidraw/element/types").ExcalidrawLinearElement> | null;
+        multiElement: NonDeleted<import("@excalidraw/element/types").ExcalidrawLinearElement> | null;
         selectionElement: import("@excalidraw/element/types").NonDeletedExcalidrawElement | null;
         isBindingEnabled: boolean;
+        boxSelectionMode: import("../types").BoxSelectionMode;
         bindingPreference: "enabled" | "disabled";
         isMidpointSnappingEnabled: boolean;
-        startBoundElement: import("@excalidraw/element/types").NonDeleted<import("@excalidraw/element/types").ExcalidrawBindableElement> | null;
         suggestedBinding: {
-            element: import("@excalidraw/element/types").NonDeleted<import("@excalidraw/element/types").ExcalidrawBindableElement>;
+            element: NonDeleted<import("@excalidraw/element/types").ExcalidrawBindableElement>;
             midPoint?: import("@excalidraw/math").GlobalPoint;
         } | null;
-        frameToHighlight: import("@excalidraw/element/types").NonDeleted<import("@excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
+        frameToHighlight: NonDeleted<import("@excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
         editingFrame: string | null;
-        elementsToHighlight: import("@excalidraw/element/types").NonDeleted<ExcalidrawElement>[] | null;
+        elementsToHighlight: NonDeleted<ExcalidrawElement>[] | null;
         editingTextElement: import("@excalidraw/element/types").ExcalidrawTextElement | null;
         activeTool: {
             lastActiveTool: import("../types").ActiveTool | null;
@@ -121,7 +129,7 @@ export declare const loadFromJSON: (localAppState: AppState, localElements: read
         selectedElementsAreBeingDragged: boolean;
         shouldCacheIgnoreZoom: boolean;
         toast: {
-            message: string;
+            message: React.ReactNode;
             closable?: boolean;
             duration?: number;
         } | null;
@@ -134,7 +142,7 @@ export declare const loadFromJSON: (localAppState: AppState, localElements: read
             [groupId: string]: boolean;
         };
         editingGroupId: import("@excalidraw/element/types").GroupId | null;
-        fileHandle: import("browser-fs-access").FileSystemHandle | null;
+        fileHandle: FileSystemFileHandle | null;
         collaborators: Map<import("../types").SocketId, import("../types").Collaborator>;
         stats: {
             open: boolean;

package/dist/types/excalidraw/data/resave.d.ts

@@ -1,5 +1,10 @@
+import type { MaybePromise } from "@excalidraw/common/utility-types";
 import type { ExcalidrawElement } from "@excalidraw/element/types";
 import type { AppState, BinaryFiles } from "../types";
-export declare const resaveAsImageWithScene: (elements: readonly ExcalidrawElement[], appState: AppState, files: BinaryFiles, name: string) => Promise<{
-    fileHandle: import("browser-fs-access").FileSystemHandle;
+export declare const resaveAsImageWithScene: (data: MaybePromise<{
+    elements: readonly ExcalidrawElement[];
+    appState: AppState;
+    files: BinaryFiles;
+}>, fileHandle: FileSystemFileHandle, filename: string) => Promise<{
+    fileHandle: FileSystemFileHandle;
 }>;

package/dist/types/excalidraw/hooks/useAppStateValue.d.ts

@@ -0,0 +1,29 @@
+import type { AppState } from "../types";
+/**
+ * Subscribes to specific appState changes. The component re-renders
+ * only when the specified prop(s) change — not on every appState update.
+ *
+ * Works both inside and outside the <Excalidraw> tree, as long as
+ * ExcalidrawAPIContext.Provider is an ancestor (automatically provided
+ * inside <Excalidraw>, or manually by the host app).
+ *
+ * Returns the narrowed value depending on prop form:
+ *  - `keyof AppState` → `AppState[K]`
+ *  - `(keyof AppState)[]` → whole `AppState`
+ *  - selector function → selector's return type `T`
+ *
+ * If excalidrawAPI is not ready yet (host apps), hook is rerendered with latest
+ * value once available.
+ */
+export declare function useAppStateValue<K extends keyof AppState>(prop: K, _internal?: boolean): AppState[K];
+export declare function useAppStateValue(props: (keyof AppState)[], _internal?: boolean): AppState;
+export declare function useAppStateValue<T>(selector: (appState: AppState) => T, _internal?: boolean): T;
+/**
+ * Subscribes to specific appState changes without causing component rerenders.
+ *
+ * The callback is called on every matching change, but also on initial render
+ * so you can initialize your state.
+ */
+export declare function useOnAppStateChange<K extends keyof AppState>(prop: K, callback: (value: AppState[K], appState: AppState) => void): undefined;
+export declare function useOnAppStateChange(props: (keyof AppState)[], callback: (props: AppState, appState: AppState) => void): undefined;
+export declare function useOnAppStateChange<T>(selector: (appState: AppState) => T, callback: (value: T, appState: AppState) => void): undefined;

package/dist/types/excalidraw/index.d.ts

@@ -3,10 +3,19 @@ import Footer from "./components/footer/FooterCenter";
 import LiveCollaborationTrigger from "./components/live-collaboration/LiveCollaborationTrigger";
 import MainMenu from "./components/main-menu/MainMenu";
 import WelcomeScreen from "./components/welcome-screen/WelcomeScreen";
+import { useOnAppStateChange as _useOnAppStateChange } from "./hooks/useAppStateValue";
 import "./css/app.scss";
 import "./css/styles.scss";
 import "./fonts/fonts.css";
-import type { ExcalidrawProps } from "./types";
+import type { AppState, ExcalidrawProps } from "./types";
+/**
+ * Stateless provider that allows `useExcalidrawAPI()` (and hooks built
+ * on it, such as `useAppStateValue()` and `useOnAppStateChange()`) to work
+ * outside the <Excalidraw> component tree.
+ */
+export declare const ExcalidrawAPIProvider: ({ children, }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const Excalidraw: React.MemoExoticComponent<(props: ExcalidrawProps) => import("react/jsx-runtime").JSX.Element>;
 export { getSceneVersion, hashElementsVersion, hashString, getNonDeletedElements, } from "@excalidraw/element";
 export { getTextFromElements } from "@excalidraw/element";
@@ -19,7 +28,7 @@ export { serializeAsJSON, serializeLibraryAsJSON } from "./data/json";
 export { loadFromBlob, loadSceneOrLibraryFromBlob, loadLibraryFromBlob, } from "./data/blob";
 export { mergeLibraryItems, getLibraryItemsHash } from "./data/library";
 export { isLinearElement } from "@excalidraw/element";
-export { FONT_FAMILY, THEME, MIME_TYPES, ROUNDNESS, DEFAULT_LASER_COLOR, UserIdleState, normalizeLink, sceneCoordsToViewportCoords, viewportCoordsToSceneCoords, getFormFactor, } from "@excalidraw/common";
+export { FONT_FAMILY, THEME, MIME_TYPES, ROUNDNESS, DEFAULT_LASER_COLOR, UserIdleState, normalizeLink, sceneCoordsToViewportCoords, viewportCoordsToSceneCoords, getFormFactor, throttleRAF, } from "@excalidraw/common";
 export { mutateElement, newElementWith, bumpVersion, } from "@excalidraw/element";
 export { CaptureUpdateAction } from "@excalidraw/element";
 export { parseLibraryTokensFromUrl, useHandleLibrary } from "./data/library";
@@ -28,7 +37,7 @@ export { Button } from "./components/Button";
 export { Footer };
 export { MainMenu };
 export { Ellipsify } from "./components/Ellipsify";
-export { useEditorInterface, useStylesPanelMode } from "./components/App";
+export { useEditorInterface, useStylesPanelMode, useExcalidrawAPI, ExcalidrawAPIContext, } from "./components/App";
 export { WelcomeScreen };
 export { LiveCollaborationTrigger };
 export { Stats } from "./components/Stats";
@@ -44,9 +53,20 @@ export { elementsOverlappingBBox, isElementInsideBBox, elementPartiallyOverlapsW
 export { DiagramToCodePlugin } from "./components/DiagramToCodePlugin/DiagramToCodePlugin";
 export { getDataURL } from "./data/blob";
 export { isElementLink } from "@excalidraw/element";
+export { Fonts } from "./fonts/Fonts";
 export { setCustomTextMetricsProvider } from "@excalidraw/element";
 export { CommandPalette } from "./components/CommandPalette/CommandPalette";
 export { renderSpreadsheet, tryParseSpreadsheet, isSpreadsheetValidForChartType, } from "./charts/index";
+/**
+ * hook that subscribes to specific appState prop(s)
+ *
+ * @param prop - appState prop(s) to subscribe to, or a selector function.
+ * NOTE `prop/selector` is memoized and will not change after initial render
+ */
+export declare function useExcalidrawStateValue<K extends keyof AppState>(prop: K): AppState[K] | undefined;
+export declare function useExcalidrawStateValue<T extends keyof AppState>(props: T[]): AppState | undefined;
+export declare function useExcalidrawStateValue<T>(selector: (appState: AppState) => T): T | undefined;
+export { _useOnAppStateChange as useOnExcalidrawStateChange };
 export { getDefaultAppState, cleanAppStateForExport, clearAppStateForLocalStorage, } from "./appState";
 export { libraryItemsAtom } from "./data/library";
 export * as icons from "./components/icons";