@excalidraw/excalidraw 0.17.1-550a388 → 0.17.1-62228e0

package/dist/excalidraw/shapes.js

@@ -1,5 +1,9 @@
+import { getClosedCurveShape, getCurveShape, getEllipseShape, getFreedrawShape, getPolygonShape, } from "../utils/geometry/shape";
 import { ArrowIcon, DiamondIcon, EllipseIcon, EraserIcon, FreedrawIcon, ImageIcon, LineIcon, RectangleIcon, SelectionIcon, TextIcon, } from "./components/icons";
+import { getElementAbsoluteCoords } from "./element";
+import { shouldTestInside } from "./element/collision";
 import { KEYS } from "./keys";
+import { ShapeCache } from "./scene/ShapeCache";
 export const SHAPES = [
     {
         icon: SelectionIcon,
@@ -82,3 +86,39 @@ export const findShapeByKey = (key) => {
     });
     return shape?.value || null;
 };
+/**
+ * get the pure geometric shape of an excalidraw element
+ * which is then used for hit detection
+ */
+export const getElementShape = (element, elementsMap) => {
+    switch (element.type) {
+        case "rectangle":
+        case "diamond":
+        case "frame":
+        case "magicframe":
+        case "embeddable":
+        case "image":
+        case "iframe":
+        case "text":
+        case "selection":
+            return getPolygonShape(element);
+        case "arrow":
+        case "line": {
+            const roughShape = ShapeCache.get(element)?.[0] ??
+                ShapeCache.generateElementShape(element, null)[0];
+            const [, , , , cx, cy] = getElementAbsoluteCoords(element, elementsMap);
+            return shouldTestInside(element)
+                ? getClosedCurveShape(element, roughShape, [element.x, element.y], element.angle, [cx, cy])
+                : getCurveShape(roughShape, [element.x, element.y], element.angle, [
+                    cx,
+                    cy,
+                ]);
+        }
+        case "ellipse":
+            return getEllipseShape(element);
+        case "freedraw": {
+            const [, , , , cx, cy] = getElementAbsoluteCoords(element, elementsMap);
+            return getFreedrawShape(element, [cx, cy], shouldTestInside(element));
+        }
+    }
+};

package/dist/excalidraw/snapping.d.ts

@@ -1,7 +1,7 @@
-import { Bounds } from "./element/bounds";
-import { MaybeTransformHandleType } from "./element/transformHandles";
-import { ElementsMap, ExcalidrawElement, NonDeletedExcalidrawElement } from "./element/types";
-import { AppState, KeyboardModifiersObject, Point } from "./types";
+import type { Bounds } from "./element/bounds";
+import type { MaybeTransformHandleType } from "./element/transformHandles";
+import type { ElementsMap, ExcalidrawElement, NonDeletedExcalidrawElement } from "./element/types";
+import type { AppState, KeyboardModifiersObject, Point } from "./types";
 export declare const getSnapDistance: (zoomValue: number) => number;
 type Vector2D = {
     x: number;

package/dist/excalidraw/snapping.js

@@ -835,5 +835,6 @@ export const isActiveToolNonLinearSnappable = (activeToolType) => {
         activeToolType === TOOL_TYPE.diamond ||
         activeToolType === TOOL_TYPE.frame ||
         activeToolType === TOOL_TYPE.magicframe ||
-        activeToolType === TOOL_TYPE.image);
+        activeToolType === TOOL_TYPE.image ||
+        activeToolType === TOOL_TYPE.text);
 };

package/dist/excalidraw/store.d.ts

@@ -0,0 +1,129 @@
+import { AppStateChange, ElementsChange } from "./change";
+import type { OrderedExcalidrawElement } from "./element/types";
+import { Emitter } from "./emitter";
+import type { AppState, ObservedAppState } from "./types";
+import type { ValueOf } from "./utility-types";
+export declare const getObservedAppState: (appState: AppState) => ObservedAppState;
+export declare const StoreAction: {
+    /**
+     * Immediately undoable.
+     *
+     * Use for updates which should be captured.
+     * Should be used for most of the local updates.
+     *
+     * These updates will _immediately_ make it to the local undo / redo stacks.
+     */
+    readonly CAPTURE: "capture";
+    /**
+     * Never undoable.
+     *
+     * Use for updates which should never be recorded, such as remote updates
+     * or scene initialization.
+     *
+     * These updates will _never_ make it to the local undo / redo stacks.
+     */
+    readonly UPDATE: "update";
+    /**
+     * Eventually undoable.
+     *
+     * Use for updates which should not be captured immediately - likely
+     * exceptions which are part of some async multi-step process. Otherwise, all
+     * such updates would end up being captured with the next
+     * `StoreAction.CAPTURE` - triggered either by the next `updateScene`
+     * or internally by the editor.
+     *
+     * These updates will _eventually_ make it to the local undo / redo stacks.
+     */
+    readonly NONE: "none";
+};
+export type StoreActionType = ValueOf<typeof StoreAction>;
+/**
+ * Represent an increment to the Store.
+ */
+declare class StoreIncrementEvent {
+    readonly elementsChange: ElementsChange;
+    readonly appStateChange: AppStateChange;
+    constructor(elementsChange: ElementsChange, appStateChange: AppStateChange);
+}
+/**
+ * Store which captures the observed changes and emits them as `StoreIncrementEvent` events.
+ *
+ * @experimental this interface is experimental and subject to change.
+ */
+export interface IStore {
+    onStoreIncrementEmitter: Emitter<[StoreIncrementEvent]>;
+    get snapshot(): Snapshot;
+    set snapshot(snapshot: Snapshot);
+    /**
+     * Use to schedule update of the snapshot, useful on updates for which we don't need to calculate increments (i.e. remote updates).
+     */
+    shouldUpdateSnapshot(): void;
+    /**
+     * Use to schedule calculation of a store increment.
+     */
+    shouldCaptureIncrement(): void;
+    /**
+     * Based on the scheduled operation, either only updates store snapshot or also calculates increment and emits the result as a `StoreIncrementEvent`.
+     *
+     * @emits StoreIncrementEvent when increment is calculated.
+     */
+    commit(elements: Map<string, OrderedExcalidrawElement> | undefined, appState: AppState | ObservedAppState | undefined): void;
+    /**
+     * Clears the store instance.
+     */
+    clear(): void;
+    /**
+     * Filters out yet uncomitted elements from `nextElements`, which are part of in-progress local async actions (ephemerals) and thus were not yet commited to the snapshot.
+     *
+     * This is necessary in updates in which we receive reconciled elements, already containing elements which were not yet captured by the local store (i.e. collab).
+     */
+    filterUncomittedElements(prevElements: Map<string, OrderedExcalidrawElement>, nextElements: Map<string, OrderedExcalidrawElement>): Map<string, OrderedExcalidrawElement>;
+}
+export declare class Store implements IStore {
+    readonly onStoreIncrementEmitter: Emitter<[StoreIncrementEvent]>;
+    private scheduledActions;
+    private _snapshot;
+    get snapshot(): Snapshot;
+    set snapshot(snapshot: Snapshot);
+    shouldCaptureIncrement: () => void;
+    shouldUpdateSnapshot: () => void;
+    private scheduleAction;
+    commit: (elements: Map<string, OrderedExcalidrawElement> | undefined, appState: AppState | ObservedAppState | undefined) => void;
+    captureIncrement: (elements: Map<string, OrderedExcalidrawElement> | undefined, appState: AppState | ObservedAppState | undefined) => void;
+    updateSnapshot: (elements: Map<string, OrderedExcalidrawElement> | undefined, appState: AppState | ObservedAppState | undefined) => void;
+    filterUncomittedElements: (prevElements: Map<string, OrderedExcalidrawElement>, nextElements: Map<string, OrderedExcalidrawElement>) => Map<string, OrderedExcalidrawElement>;
+    clear: () => void;
+    private satisfiesScheduledActionsInvariant;
+}
+export declare class Snapshot {
+    readonly elements: Map<string, OrderedExcalidrawElement>;
+    readonly appState: ObservedAppState;
+    readonly meta: {
+        didElementsChange: boolean;
+        didAppStateChange: boolean;
+        isEmpty?: boolean;
+    };
+    private constructor();
+    static empty(): Snapshot;
+    isEmpty(): boolean | undefined;
+    /**
+     * Efficiently clone the existing snapshot, only if we detected changes.
+     *
+     * @returns same instance if there are no changes detected, new instance otherwise.
+     */
+    maybeClone(elements: Map<string, OrderedExcalidrawElement> | undefined, appState: AppState | ObservedAppState | undefined): Snapshot;
+    private maybeCreateAppStateSnapshot;
+    private detectChangedAppState;
+    private maybeCreateElementsSnapshot;
+    /**
+     * Detect if there any changed elements.
+     *
+     * NOTE: we shouldn't just use `sceneVersionNonce` instead, as we need to call this before the scene updates.
+     */
+    private detectChangedElements;
+    /**
+     * Perform structural clone, cloning only elements that changed.
+     */
+    private createElementsSnapshot;
+}
+export {};

package/dist/excalidraw/store.js

@@ -0,0 +1,296 @@
+import { getDefaultAppState } from "./appState";
+import { AppStateChange, ElementsChange } from "./change";
+import { ENV } from "./constants";
+import { newElementWith } from "./element/mutateElement";
+import { deepCopyElement } from "./element/newElement";
+import { Emitter } from "./emitter";
+import { isShallowEqual } from "./utils";
+// hidden non-enumerable property for runtime checks
+const hiddenObservedAppStateProp = "__observedAppState";
+export const getObservedAppState = (appState) => {
+    const observedAppState = {
+        name: appState.name,
+        editingGroupId: appState.editingGroupId,
+        viewBackgroundColor: appState.viewBackgroundColor,
+        selectedElementIds: appState.selectedElementIds,
+        selectedGroupIds: appState.selectedGroupIds,
+        editingLinearElementId: appState.editingLinearElement?.elementId || null,
+        selectedLinearElementId: appState.selectedLinearElement?.elementId || null,
+    };
+    Reflect.defineProperty(observedAppState, hiddenObservedAppStateProp, {
+        value: true,
+        enumerable: false,
+    });
+    return observedAppState;
+};
+const isObservedAppState = (appState) => !!Reflect.get(appState, hiddenObservedAppStateProp);
+export const StoreAction = {
+    /**
+     * Immediately undoable.
+     *
+     * Use for updates which should be captured.
+     * Should be used for most of the local updates.
+     *
+     * These updates will _immediately_ make it to the local undo / redo stacks.
+     */
+    CAPTURE: "capture",
+    /**
+     * Never undoable.
+     *
+     * Use for updates which should never be recorded, such as remote updates
+     * or scene initialization.
+     *
+     * These updates will _never_ make it to the local undo / redo stacks.
+     */
+    UPDATE: "update",
+    /**
+     * Eventually undoable.
+     *
+     * Use for updates which should not be captured immediately - likely
+     * exceptions which are part of some async multi-step process. Otherwise, all
+     * such updates would end up being captured with the next
+     * `StoreAction.CAPTURE` - triggered either by the next `updateScene`
+     * or internally by the editor.
+     *
+     * These updates will _eventually_ make it to the local undo / redo stacks.
+     */
+    NONE: "none",
+};
+/**
+ * Represent an increment to the Store.
+ */
+class StoreIncrementEvent {
+    elementsChange;
+    appStateChange;
+    constructor(elementsChange, appStateChange) {
+        this.elementsChange = elementsChange;
+        this.appStateChange = appStateChange;
+    }
+}
+export class Store {
+    onStoreIncrementEmitter = new Emitter();
+    scheduledActions = new Set();
+    _snapshot = Snapshot.empty();
+    get snapshot() {
+        return this._snapshot;
+    }
+    set snapshot(snapshot) {
+        this._snapshot = snapshot;
+    }
+    // TODO: Suspicious that this is called so many places. Seems error-prone.
+    shouldCaptureIncrement = () => {
+        this.scheduleAction(StoreAction.CAPTURE);
+    };
+    shouldUpdateSnapshot = () => {
+        this.scheduleAction(StoreAction.UPDATE);
+    };
+    scheduleAction = (action) => {
+        this.scheduledActions.add(action);
+        this.satisfiesScheduledActionsInvariant();
+    };
+    commit = (elements, appState) => {
+        try {
+            // Capture has precedence since it also performs update
+            if (this.scheduledActions.has(StoreAction.CAPTURE)) {
+                this.captureIncrement(elements, appState);
+            }
+            else if (this.scheduledActions.has(StoreAction.UPDATE)) {
+                this.updateSnapshot(elements, appState);
+            }
+        }
+        finally {
+            this.satisfiesScheduledActionsInvariant();
+            // Defensively reset all scheduled actions, potentially cleans up other runtime garbage
+            this.scheduledActions = new Set();
+        }
+    };
+    captureIncrement = (elements, appState) => {
+        const prevSnapshot = this.snapshot;
+        const nextSnapshot = this.snapshot.maybeClone(elements, appState);
+        // Optimisation, don't continue if nothing has changed
+        if (prevSnapshot !== nextSnapshot) {
+            // Calculate and record the changes based on the previous and next snapshot
+            const elementsChange = nextSnapshot.meta.didElementsChange
+                ? ElementsChange.calculate(prevSnapshot.elements, nextSnapshot.elements)
+                : ElementsChange.empty();
+            const appStateChange = nextSnapshot.meta.didAppStateChange
+                ? AppStateChange.calculate(prevSnapshot.appState, nextSnapshot.appState)
+                : AppStateChange.empty();
+            if (!elementsChange.isEmpty() || !appStateChange.isEmpty()) {
+                // Notify listeners with the increment
+                this.onStoreIncrementEmitter.trigger(new StoreIncrementEvent(elementsChange, appStateChange));
+            }
+            // Update snapshot
+            this.snapshot = nextSnapshot;
+        }
+    };
+    updateSnapshot = (elements, appState) => {
+        const nextSnapshot = this.snapshot.maybeClone(elements, appState);
+        if (this.snapshot !== nextSnapshot) {
+            // Update snapshot
+            this.snapshot = nextSnapshot;
+        }
+    };
+    filterUncomittedElements = (prevElements, nextElements) => {
+        for (const [id, prevElement] of prevElements.entries()) {
+            const nextElement = nextElements.get(id);
+            if (!nextElement) {
+                // Nothing to care about here, elements were forcefully deleted
+                continue;
+            }
+            const elementSnapshot = this.snapshot.elements.get(id);
+            // Checks for in progress async user action
+            if (!elementSnapshot) {
+                // Detected yet uncomitted local element
+                nextElements.delete(id);
+            }
+            else if (elementSnapshot.version < prevElement.version) {
+                // Element was already commited, but the snapshot version is lower than current current local version
+                nextElements.set(id, elementSnapshot);
+            }
+        }
+        return nextElements;
+    };
+    clear = () => {
+        this.snapshot = Snapshot.empty();
+        this.scheduledActions = new Set();
+    };
+    satisfiesScheduledActionsInvariant = () => {
+        if (!(this.scheduledActions.size >= 0 && this.scheduledActions.size <= 3)) {
+            const message = `There can be at most three store actions scheduled at the same time, but there are "${this.scheduledActions.size}".`;
+            console.error(message, this.scheduledActions.values());
+            if (import.meta.env.DEV || import.meta.env.MODE === ENV.TEST) {
+                throw new Error(message);
+            }
+        }
+    };
+}
+export class Snapshot {
+    elements;
+    appState;
+    meta;
+    constructor(elements, appState, meta = {
+        didElementsChange: false,
+        didAppStateChange: false,
+        isEmpty: false,
+    }) {
+        this.elements = elements;
+        this.appState = appState;
+        this.meta = meta;
+    }
+    static empty() {
+        return new Snapshot(new Map(), getObservedAppState(getDefaultAppState()), { didElementsChange: false, didAppStateChange: false, isEmpty: true });
+    }
+    isEmpty() {
+        return this.meta.isEmpty;
+    }
+    /**
+     * Efficiently clone the existing snapshot, only if we detected changes.
+     *
+     * @returns same instance if there are no changes detected, new instance otherwise.
+     */
+    maybeClone(elements, appState) {
+        const nextElementsSnapshot = this.maybeCreateElementsSnapshot(elements);
+        const nextAppStateSnapshot = this.maybeCreateAppStateSnapshot(appState);
+        let didElementsChange = false;
+        let didAppStateChange = false;
+        if (this.elements !== nextElementsSnapshot) {
+            didElementsChange = true;
+        }
+        if (this.appState !== nextAppStateSnapshot) {
+            didAppStateChange = true;
+        }
+        if (!didElementsChange && !didAppStateChange) {
+            return this;
+        }
+        const snapshot = new Snapshot(nextElementsSnapshot, nextAppStateSnapshot, {
+            didElementsChange,
+            didAppStateChange,
+        });
+        return snapshot;
+    }
+    maybeCreateAppStateSnapshot(appState) {
+        if (!appState) {
+            return this.appState;
+        }
+        // Not watching over everything from the app state, just the relevant props
+        const nextAppStateSnapshot = !isObservedAppState(appState)
+            ? getObservedAppState(appState)
+            : appState;
+        const didAppStateChange = this.detectChangedAppState(nextAppStateSnapshot);
+        if (!didAppStateChange) {
+            return this.appState;
+        }
+        return nextAppStateSnapshot;
+    }
+    detectChangedAppState(nextObservedAppState) {
+        return !isShallowEqual(this.appState, nextObservedAppState, {
+            selectedElementIds: isShallowEqual,
+            selectedGroupIds: isShallowEqual,
+        });
+    }
+    maybeCreateElementsSnapshot(elements) {
+        if (!elements) {
+            return this.elements;
+        }
+        const didElementsChange = this.detectChangedElements(elements);
+        if (!didElementsChange) {
+            return this.elements;
+        }
+        const elementsSnapshot = this.createElementsSnapshot(elements);
+        return elementsSnapshot;
+    }
+    /**
+     * Detect if there any changed elements.
+     *
+     * NOTE: we shouldn't just use `sceneVersionNonce` instead, as we need to call this before the scene updates.
+     */
+    detectChangedElements(nextElements) {
+        if (this.elements === nextElements) {
+            return false;
+        }
+        if (this.elements.size !== nextElements.size) {
+            return true;
+        }
+        // loop from right to left as changes are likelier to happen on new elements
+        const keys = Array.from(nextElements.keys());
+        for (let i = keys.length - 1; i >= 0; i--) {
+            const prev = this.elements.get(keys[i]);
+            const next = nextElements.get(keys[i]);
+            if (!prev ||
+                !next ||
+                prev.id !== next.id ||
+                prev.versionNonce !== next.versionNonce) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Perform structural clone, cloning only elements that changed.
+     */
+    createElementsSnapshot(nextElements) {
+        const clonedElements = new Map();
+        for (const [id, prevElement] of this.elements.entries()) {
+            // Clone previous elements, never delete, in case nextElements would be just a subset of previous elements
+            // i.e. during collab, persist or whenenever isDeleted elements get cleared
+            if (!nextElements.get(id)) {
+                // When we cannot find the prev element in the next elements, we mark it as deleted
+                clonedElements.set(id, newElementWith(prevElement, { isDeleted: true }));
+            }
+            else {
+                clonedElements.set(id, prevElement);
+            }
+        }
+        for (const [id, nextElement] of nextElements.entries()) {
+            const prevElement = clonedElements.get(id);
+            // At this point our elements are reconcilled already, meaning the next element is always newer
+            if (!prevElement || // element was added
+                (prevElement && prevElement.versionNonce !== nextElement.versionNonce) // element was updated
+            ) {
+                clonedElements.set(id, deepCopyElement(nextElement));
+            }
+        }
+        return clonedElements;
+    }
+}

package/dist/excalidraw/types.d.ts

@@ -1,23 +1,24 @@
-import React from "react";
-import { PointerType, ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted, TextAlign, ExcalidrawElement, GroupId, ExcalidrawBindableElement, Arrowhead, ChartType, FontFamilyValues, FileId, ExcalidrawImageElement, Theme, StrokeRoundness, ExcalidrawEmbeddableElement, ExcalidrawMagicFrameElement, ExcalidrawFrameLikeElement, ExcalidrawElementType, ExcalidrawIframeLikeElement } from "./element/types";
-import { Action } from "./actions/types";
-import { Point as RoughPoint } from "roughjs/bin/geometry";
-import { LinearElementEditor } from "./element/linearElementEditor";
-import { SuggestedBinding } from "./element/binding";
-import { ImportedDataState } from "./data/types";
+import type React from "react";
+import type { PointerType, ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted, TextAlign, ExcalidrawElement, GroupId, ExcalidrawBindableElement, Arrowhead, ChartType, FontFamilyValues, FileId, ExcalidrawImageElement, Theme, StrokeRoundness, ExcalidrawEmbeddableElement, ExcalidrawMagicFrameElement, ExcalidrawFrameLikeElement, ExcalidrawElementType, ExcalidrawIframeLikeElement, OrderedExcalidrawElement } from "./element/types";
+import type { Action } from "./actions/types";
+import type { Point as RoughPoint } from "roughjs/bin/geometry";
+import type { LinearElementEditor } from "./element/linearElementEditor";
+import type { SuggestedBinding } from "./element/binding";
+import type { ImportedDataState } from "./data/types";
 import type App from "./components/App";
 import type { throttleRAF } from "./utils";
-import { Spreadsheet } from "./charts";
-import { Language } from "./i18n";
-import { ClipboardData } from "./clipboard";
-import { isOverScrollBars } from "./scene/scrollbars";
-import { MaybeTransformHandleType } from "./element/transformHandles";
-import Library from "./data/library";
+import type { Spreadsheet } from "./charts";
+import type { Language } from "./i18n";
+import type { ClipboardData } from "./clipboard";
+import type { isOverScrollBars } from "./scene/scrollbars";
+import type { MaybeTransformHandleType } from "./element/transformHandles";
+import type Library from "./data/library";
 import type { FileSystemHandle } from "./data/filesystem";
 import type { IMAGE_MIME_TYPES, MIME_TYPES } from "./constants";
-import { ContextMenuItems } from "./components/ContextMenu";
-import { SnapLine } from "./snapping";
-import { Merge, MaybePromise, ValueOf } from "./utility-types";
+import type { ContextMenuItems } from "./components/ContextMenu";
+import type { SnapLine } from "./snapping";
+import type { Merge, MaybePromise, ValueOf } from "./utility-types";
+import type { StoreActionType } from "./store";
 export type Point = Readonly<RoughPoint>;
 export type SocketId = string & {
     _brand: "SocketId";
@@ -118,6 +119,7 @@ export type StaticCanvasAppState = Readonly<_CommonCanvasAppState & {
     selectedElementsAreBeingDragged: AppState["selectedElementsAreBeingDragged"];
     gridSize: AppState["gridSize"];
     frameRendering: AppState["frameRendering"];
+    currentHoveredFontFamily: AppState["currentHoveredFontFamily"];
 }>;
 export type InteractiveCanvasAppState = Readonly<_CommonCanvasAppState & {
     activeEmbeddable: AppState["activeEmbeddable"];
@@ -133,7 +135,20 @@ export type InteractiveCanvasAppState = Readonly<_CommonCanvasAppState & {
     collaborators: AppState["collaborators"];
     snapLines: AppState["snapLines"];
     zenModeEnabled: AppState["zenModeEnabled"];
+    editingElement: AppState["editingElement"];
 }>;
+export type ObservedAppState = ObservedStandaloneAppState & ObservedElementsAppState;
+export type ObservedStandaloneAppState = {
+    name: AppState["name"];
+    viewBackgroundColor: AppState["viewBackgroundColor"];
+};
+export type ObservedElementsAppState = {
+    editingGroupId: AppState["editingGroupId"];
+    selectedElementIds: AppState["selectedElementIds"];
+    selectedGroupIds: AppState["selectedGroupIds"];
+    editingLinearElementId: LinearElementEditor["elementId"] | null;
+    selectedLinearElementId: LinearElementEditor["elementId"] | null;
+};
 export interface AppState {
     contextMenu: {
         items: ContextMenuItems;
@@ -191,6 +206,7 @@ export interface AppState {
     currentItemTextAlign: TextAlign;
     currentItemStartArrowhead: Arrowhead | null;
     currentItemEndArrowhead: Arrowhead | null;
+    currentHoveredFontFamily: FontFamilyValues | null;
     currentItemRoundness: StrokeRoundness;
     viewBackgroundColor: string;
     scrollX: number;
@@ -202,7 +218,7 @@ export interface AppState {
     isRotating: boolean;
     zoom: Zoom;
     openMenu: "canvas" | "shape" | null;
-    openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
+    openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | null;
     openSidebar: {
         name: SidebarName;
         tab?: SidebarTabName;
@@ -258,7 +274,11 @@ export interface AppState {
     offsetLeft: number;
     fileHandle: FileSystemHandle | null;
     collaborators: Map<SocketId, Collaborator>;
-    showStats: boolean;
+    stats: {
+        open: boolean;
+        /** bitmap. Use `STATS_PANELS` bit values */
+        panels: number;
+    };
     currentChartType: ChartType;
     pasteDialog: {
         shown: false;
@@ -331,8 +351,8 @@ export type OnUserFollowedPayload = {
     action: "FOLLOW" | "UNFOLLOW";
 };
 export interface ExcalidrawProps {
-    onChange?: (elements: readonly ExcalidrawElement[], appState: AppState, files: BinaryFiles) => void;
-    initialData?: MaybePromise<ExcalidrawInitialDataState | null>;
+    onChange?: (elements: readonly OrderedExcalidrawElement[], appState: AppState, files: BinaryFiles) => void;
+    initialData?: (() => MaybePromise<ExcalidrawInitialDataState | null>) | MaybePromise<ExcalidrawInitialDataState | null>;
     excalidrawAPI?: (api: ExcalidrawImperativeAPI) => void;
     isCollaborating?: boolean;
     onPointerUpdate?: (payload: {
@@ -372,12 +392,13 @@ export interface ExcalidrawProps {
     validateEmbeddable?: boolean | string[] | RegExp | RegExp[] | ((link: string) => boolean | undefined);
     renderEmbeddable?: (element: NonDeleted<ExcalidrawEmbeddableElement>, appState: AppState) => JSX.Element | null;
     aiEnabled?: boolean;
+    showDeprecatedFonts?: boolean;
 }
 export type SceneData = {
     elements?: ImportedDataState["elements"];
     appState?: ImportedDataState["appState"];
     collaborators?: Map<SocketId, Collaborator>;
-    commitToHistory?: boolean;
+    storeAction?: StoreActionType;
 };
 export declare enum UserIdleState {
     ACTIVE = "active",
@@ -435,6 +456,8 @@ export type AppClassProperties = {
     files: BinaryFiles;
     device: App["device"];
     scene: App["scene"];
+    syncActionResult: App["syncActionResult"];
+    fonts: App["fonts"];
     pasteFromClipboard: App["pasteFromClipboard"];
     id: App["id"];
     onInsertElements: App["onInsertElements"];
@@ -550,7 +573,7 @@ export type Device = Readonly<{
     };
     isTouchScreen: boolean;
 }>;
-type FrameNameBounds = {
+export type FrameNameBounds = {
     x: number;
     y: number;
     width: number;

package/dist/excalidraw/utils.d.ts

@@ -1,7 +1,7 @@
-import { EVENT } from "./constants";
-import { FontFamilyValues, FontString } from "./element/types";
-import { ActiveTool, AppState, ToolType, UnsubscribeCallback, Zoom } from "./types";
-import { MaybePromise } from "./utility-types";
+import type { EVENT } from "./constants";
+import type { FontFamilyValues, FontString } from "./element/types";
+import type { ActiveTool, AppState, ToolType, UnsubscribeCallback, Zoom } from "./types";
+import type { MaybePromise } from "./utility-types";
 export declare const setDateTimeForTests: (dateTime: string) => void;
 export declare const getDateTime: () => string;
 export declare const capitalizeString: (str: string) => string;
@@ -160,7 +160,23 @@ export declare const arrayToMap: <T extends string | {
 export declare const arrayToMapWithIndex: <T extends {
     id: string;
 }>(elements: readonly T[]) => Map<string, [element: T, index: number]>;
+/**
+ * Transform array into an object, use only when array order is irrelevant.
+ */
+export declare const arrayToObject: <T>(array: readonly T[], groupBy?: ((value: T) => string | number) | undefined) => {
+    [key: string]: T;
+};
+/** Doubly linked node */
+export type Node<T> = T & {
+    prev: Node<T> | null;
+    next: Node<T> | null;
+};
+/**
+ * Creates a circular doubly linked list by adding `prev` and `next` props to the existing array nodes.
+ */
+export declare const arrayToList: <T>(array: readonly T[]) => Node<T>[];
 export declare const isTestEnv: () => boolean;
+export declare const isDevEnv: () => boolean;
 export declare const wrapEvent: <T extends Event>(name: EVENT, nativeEvent: T) => CustomEvent<{
     nativeEvent: T;
 }>;