@excalidraw/excalidraw 0.17.1-88812e0 → 0.17.1-96eeec5

package/dist/excalidraw/actions/register.d.ts

@@ -1,4 +1,4 @@
-import { Action } from "./types";
+import type { Action } from "./types";
 export declare let actions: readonly Action[];
 export declare const register: <T extends Action>(action: T) => T & {
     keyTest?: (unknown extends T["keyTest"] ? never : T["keyTest"]) | undefined;

package/dist/excalidraw/actions/shortcuts.d.ts

@@ -1,4 +1,4 @@
-import { SubtypeOf } from "../utility-types";
-import { ActionName } from "./types";
+import type { SubtypeOf } from "../utility-types";
+import type { ActionName } from "./types";
 export type ShortcutName = SubtypeOf<ActionName, "toggleTheme" | "loadScene" | "clearCanvas" | "cut" | "copy" | "paste" | "copyStyles" | "pasteStyles" | "selectAll" | "deleteSelectedElements" | "duplicateSelection" | "sendBackward" | "bringForward" | "sendToBack" | "bringToFront" | "copyAsPng" | "copyAsSvg" | "group" | "ungroup" | "gridMode" | "zenMode" | "objectsSnapMode" | "stats" | "addToLibrary" | "viewMode" | "flipHorizontal" | "flipVertical" | "hyperlink" | "toggleElementLock" | "resetZoom" | "zoomOut" | "zoomIn" | "zoomToFit" | "zoomToFitSelectionInViewport" | "zoomToFitSelection" | "toggleEraserTool" | "toggleHandTool" | "setFrameAsActiveTool" | "saveFileToDisk" | "saveToActiveFile" | "toggleShortcuts"> | "saveScene" | "imageExport" | "commandPalette";
 export declare const getShortcutFromShortcutName: (name: ShortcutName, idx?: number) => string;

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

@@ -1,8 +1,8 @@
-import React from "react";
-import { ExcalidrawElement, OrderedExcalidrawElement } from "../element/types";
-import { AppClassProperties, AppState, ExcalidrawProps, BinaryFiles, UIAppState } from "../types";
-import { MarkOptional } from "../utility-types";
-import { StoreActionType } from "../store";
+import type React from "react";
+import type { ExcalidrawElement, OrderedExcalidrawElement } from "../element/types";
+import type { AppClassProperties, AppState, ExcalidrawProps, BinaryFiles, UIAppState } from "../types";
+import type { MarkOptional } from "../utility-types";
+import type { StoreActionType } from "../store";
 export type ActionSource = "ui" | "keyboard" | "contextMenu" | "api" | "commandPalette";
 /** if false, the action should be prevented */
 export type ActionResult = {
@@ -15,7 +15,7 @@ export type ActionResult = {
 type ActionFn = (elements: readonly OrderedExcalidrawElement[], appState: Readonly<AppState>, formData: any, app: AppClassProperties) => ActionResult | Promise<ActionResult>;
 export type UpdaterFn = (res: ActionResult) => void;
 export type ActionFilterFn = (action: Action) => void;
-export type ActionName = "copy" | "cut" | "paste" | "copyAsPng" | "copyAsSvg" | "copyText" | "sendBackward" | "bringForward" | "sendToBack" | "bringToFront" | "copyStyles" | "selectAll" | "pasteStyles" | "gridMode" | "zenMode" | "objectsSnapMode" | "stats" | "changeStrokeColor" | "changeBackgroundColor" | "changeFillStyle" | "changeStrokeWidth" | "changeStrokeShape" | "changeSloppiness" | "changeStrokeStyle" | "changeArrowhead" | "changeOpacity" | "changeFontSize" | "toggleCanvasMenu" | "toggleEditMenu" | "undo" | "redo" | "finalize" | "changeProjectName" | "changeExportBackground" | "changeExportEmbedScene" | "changeExportScale" | "saveToActiveFile" | "saveFileToDisk" | "loadScene" | "duplicateSelection" | "deleteSelectedElements" | "changeViewBackgroundColor" | "clearCanvas" | "zoomIn" | "zoomOut" | "resetZoom" | "zoomToFit" | "zoomToFitSelection" | "zoomToFitSelectionInViewport" | "changeFontFamily" | "changeTextAlign" | "changeVerticalAlign" | "toggleFullScreen" | "toggleShortcuts" | "group" | "ungroup" | "goToCollaborator" | "addToLibrary" | "changeRoundness" | "alignTop" | "alignBottom" | "alignLeft" | "alignRight" | "alignVerticallyCentered" | "alignHorizontallyCentered" | "distributeHorizontally" | "distributeVertically" | "flipHorizontal" | "flipVertical" | "viewMode" | "exportWithDarkMode" | "toggleTheme" | "increaseFontSize" | "decreaseFontSize" | "unbindText" | "hyperlink" | "bindText" | "unlockAllElements" | "toggleElementLock" | "toggleLinearEditor" | "toggleEraserTool" | "toggleHandTool" | "selectAllElementsInFrame" | "removeAllElementsFromFrame" | "updateFrameRendering" | "setFrameAsActiveTool" | "setEmbeddableAsActiveTool" | "createContainerFromText" | "wrapTextInContainer" | "commandPalette";
+export type ActionName = "copy" | "cut" | "paste" | "copyAsPng" | "copyAsSvg" | "copyText" | "sendBackward" | "bringForward" | "sendToBack" | "bringToFront" | "copyStyles" | "selectAll" | "pasteStyles" | "gridMode" | "zenMode" | "objectsSnapMode" | "stats" | "changeStrokeColor" | "changeBackgroundColor" | "changeFillStyle" | "changeStrokeWidth" | "changeStrokeShape" | "changeSloppiness" | "changeStrokeStyle" | "changeArrowhead" | "changeOpacity" | "changeFontSize" | "toggleCanvasMenu" | "toggleEditMenu" | "undo" | "redo" | "finalize" | "changeProjectName" | "changeExportBackground" | "changeExportEmbedScene" | "changeExportScale" | "saveToActiveFile" | "saveFileToDisk" | "loadScene" | "duplicateSelection" | "deleteSelectedElements" | "changeViewBackgroundColor" | "clearCanvas" | "zoomIn" | "zoomOut" | "resetZoom" | "zoomToFit" | "zoomToFitSelection" | "zoomToFitSelectionInViewport" | "changeFontFamily" | "changeTextAlign" | "changeVerticalAlign" | "toggleFullScreen" | "toggleShortcuts" | "group" | "ungroup" | "goToCollaborator" | "addToLibrary" | "changeRoundness" | "alignTop" | "alignBottom" | "alignLeft" | "alignRight" | "alignVerticallyCentered" | "alignHorizontallyCentered" | "distributeHorizontally" | "distributeVertically" | "flipHorizontal" | "flipVertical" | "viewMode" | "exportWithDarkMode" | "toggleTheme" | "increaseFontSize" | "decreaseFontSize" | "unbindText" | "hyperlink" | "bindText" | "unlockAllElements" | "toggleElementLock" | "toggleLinearEditor" | "toggleEraserTool" | "toggleHandTool" | "selectAllElementsInFrame" | "removeAllElementsFromFrame" | "updateFrameRendering" | "setFrameAsActiveTool" | "setEmbeddableAsActiveTool" | "createContainerFromText" | "wrapTextInContainer" | "commandPalette" | "autoResize" | "elementStats";
 export type PanelComponentProps = {
     elements: readonly ExcalidrawElement[];
     appState: AppState;

package/dist/excalidraw/align.d.ts

@@ -1,4 +1,4 @@
-import { ElementsMap, ExcalidrawElement } from "./element/types";
+import type { ElementsMap, ExcalidrawElement } from "./element/types";
 export interface Alignment {
     position: "start" | "center" | "end";
     axis: "x" | "y";

package/dist/excalidraw/animated-trail.d.ts

@@ -1,5 +1,5 @@
-import { LaserPointerOptions } from "@excalidraw/laser-pointer";
-import { AnimationFrameHandler } from "./animation-frame-handler";
+import type { LaserPointerOptions } from "@excalidraw/laser-pointer";
+import type { AnimationFrameHandler } from "./animation-frame-handler";
 import type App from "./components/App";
 export interface Trail {
     start(container: SVGSVGElement): void;

package/dist/excalidraw/appState.d.ts

@@ -1,4 +1,4 @@
-import { AppState, NormalizedZoomValue } from "./types";
+import type { AppState, NormalizedZoomValue } from "./types";
 export declare const getDefaultAppState: () => Omit<AppState, "offsetTop" | "offsetLeft" | "width" | "height">;
 export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>) => {
     zenModeEnabled?: boolean | undefined;
@@ -56,7 +56,10 @@ export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>)
         [groupId: string]: boolean;
     } | undefined;
     editingGroupId?: string | null | undefined;
-    showStats?: boolean | undefined;
+    stats?: {
+        open: boolean;
+        panels: number;
+    } | undefined;
     currentChartType?: import("./element/types").ChartType | undefined;
     selectedLinearElement?: import("./element/linearElementEditor").LinearElementEditor | null | undefined;
 };

package/dist/excalidraw/appState.js

@@ -1,5 +1,5 @@
 import { COLOR_PALETTE } from "./colors";
-import { DEFAULT_ELEMENT_PROPS, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_TEXT_ALIGN, EXPORT_SCALES, THEME, } from "./constants";
+import { DEFAULT_ELEMENT_PROPS, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_TEXT_ALIGN, EXPORT_SCALES, STATS_PANELS, THEME, } from "./constants";
 const defaultExportScale = EXPORT_SCALES.includes(devicePixelRatio)
     ? devicePixelRatio
     : 1;
@@ -67,7 +67,10 @@ export const getDefaultAppState = () => {
         selectedElementsAreBeingDragged: false,
         selectionElement: null,
         shouldCacheIgnoreZoom: false,
-        showStats: false,
+        stats: {
+            open: false,
+            panels: STATS_PANELS.generalStats | STATS_PANELS.elementProperties,
+        },
         startBoundElement: null,
         suggestedBindings: [],
         frameRendering: { enabled: true, clip: true, name: true, outline: true },
@@ -171,7 +174,7 @@ const APP_STATE_STORAGE_CONF = ((config) => config)({
     },
     selectionElement: { browser: false, export: false, server: false },
     shouldCacheIgnoreZoom: { browser: true, export: false, server: false },
-    showStats: { browser: true, export: false, server: false },
+    stats: { browser: true, export: false, server: false },
     startBoundElement: { browser: false, export: false, server: false },
     suggestedBindings: { browser: false, export: false, server: false },
     frameRendering: { browser: false, export: false, server: false },

package/dist/excalidraw/change.d.ts

@@ -1,7 +1,7 @@
-import { ElementUpdate } from "./element/mutateElement";
-import { OrderedExcalidrawElement, SceneElementsMap } from "./element/types";
-import { AppState, ObservedAppState } from "./types";
-import { ValueOf } from "./utility-types";
+import type { ElementUpdate } from "./element/mutateElement";
+import type { OrderedExcalidrawElement, SceneElementsMap } from "./element/types";
+import type { AppState, ObservedAppState } from "./types";
+import type { ValueOf } from "./utility-types";
 /**
  * Represents the difference between two objects of the same type.
  *

package/dist/excalidraw/change.js

@@ -1,7 +1,7 @@
 import { ENV } from "./constants";
 import { BoundElement, BindableElement, bindingProperties, updateBoundElements, } from "./element/binding";
 import { LinearElementEditor } from "./element/linearElementEditor";
-import { mutateElement, newElementWith, } from "./element/mutateElement";
+import { mutateElement, newElementWith } from "./element/mutateElement";
 import { getBoundTextElementId, redrawTextBoundingBox, } from "./element/textElement";
 import { hasBoundTextElement, isBindableElement, isBoundToContainer, isTextElement, } from "./element/typeChecks";
 import { orderByFractionalIndex, syncMovedIndices } from "./fractionalIndex";
@@ -858,15 +858,22 @@ export class ElementsChange {
         if (!flags.containsZindexDifference) {
             return elements;
         }
-        const previous = Array.from(elements.values());
-        const reordered = orderByFractionalIndex([...previous]);
-        if (!flags.containsVisibleDifference &&
-            Delta.isRightDifferent(previous, reordered, true)) {
+        const unordered = Array.from(elements.values());
+        const ordered = orderByFractionalIndex([...unordered]);
+        const moved = Delta.getRightDifferences(unordered, ordered, true).reduce((acc, arrayIndex) => {
+            const candidate = unordered[Number(arrayIndex)];
+            if (candidate && changed.has(candidate.id)) {
+                acc.set(candidate.id, candidate);
+            }
+            return acc;
+        }, new Map());
+        if (!flags.containsVisibleDifference && moved.size) {
             // we found a difference in order!
             flags.containsVisibleDifference = true;
         }
-        // let's synchronize all invalid indices of moved elements
-        return arrayToMap(syncMovedIndices(reordered, changed));
+        // synchronize all elements that were actually moved
+        // could fallback to synchronizing all invalid indices
+        return arrayToMap(syncMovedIndices(ordered, moved));
     }
     /**
      * It is necessary to post process the partials in case of reference values,

package/dist/excalidraw/charts.d.ts

@@ -1,4 +1,4 @@
-import { NonDeletedExcalidrawElement } from "./element/types";
+import type { NonDeletedExcalidrawElement } from "./element/types";
 export type ChartElements = readonly NonDeletedExcalidrawElement[];
 export interface Spreadsheet {
     title: string | null;

package/dist/excalidraw/clients.d.ts

@@ -1,5 +1,5 @@
-import { InteractiveCanvasRenderConfig } from "./scene/types";
-import { Collaborator, InteractiveCanvasAppState, SocketId } from "./types";
+import type { InteractiveCanvasRenderConfig } from "./scene/types";
+import type { Collaborator, InteractiveCanvasAppState, SocketId } from "./types";
 export declare const getClientColor: (socketId: SocketId, collaborator: Collaborator | undefined) => string;
 /**
  * returns first char, capitalized

package/dist/excalidraw/clients.js

@@ -1,6 +1,6 @@
 import { COLOR_CHARCOAL_BLACK, COLOR_VOICE_CALL, COLOR_WHITE, THEME, } from "./constants";
 import { roundRect } from "./renderer/roundRect";
-import { UserIdleState, } from "./types";
+import { UserIdleState } from "./types";
 function hashToInteger(id) {
     let hash = 0;
     if (id.length === 0) {

package/dist/excalidraw/clipboard.d.ts

@@ -1,6 +1,6 @@
-import { ExcalidrawElement, NonDeletedExcalidrawElement } from "./element/types";
-import { BinaryFiles } from "./types";
-import { Spreadsheet } from "./charts";
+import type { ExcalidrawElement, NonDeletedExcalidrawElement } from "./element/types";
+import type { BinaryFiles } from "./types";
+import type { Spreadsheet } from "./charts";
 import { ALLOWED_PASTE_MIME_TYPES } from "./constants";
 export type PastedMixedContent = {
     type: "text" | "imageUrl";

package/dist/excalidraw/colors.d.ts

@@ -1,5 +1,5 @@
 import oc from "open-color";
-import { Merge } from "./utility-types";
+import type { Merge } from "./utility-types";
 export type ColorPickerColor = Exclude<keyof oc, "indigo" | "lime"> | "transparent" | "bronze";
 export type ColorTuple = readonly [string, string, string, string, string];
 export type ColorPalette = Merge<Record<ColorPickerColor, ColorTuple>, {

package/dist/excalidraw/components/Actions.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { ActionManager } from "../actions/manager";
-import { ExcalidrawElement, NonDeletedElementsMap, NonDeletedSceneElementsMap } from "../element/types";
-import { AppClassProperties, AppProps, UIAppState, Zoom } from "../types";
+import type { ActionManager } from "../actions/manager";
+import type { ExcalidrawElement, NonDeletedElementsMap, NonDeletedSceneElementsMap } from "../element/types";
+import type { AppClassProperties, AppProps, UIAppState, Zoom } from "../types";
 import "./Actions.scss";
 export declare const canChangeStrokeColor: (appState: UIAppState, targetElements: ExcalidrawElement[]) => boolean;
 export declare const canChangeBackgroundColor: (appState: UIAppState, targetElements: ExcalidrawElement[]) => boolean;

package/dist/excalidraw/components/Actions.js

@@ -9,7 +9,7 @@ import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
 import { hasStrokeColor } from "../scene/comparisons";
 import { trackEvent } from "../analytics";
-import { hasBoundTextElement, isTextElement } from "../element/typeChecks";
+import { hasBoundTextElement, isLinearElement, isTextElement, } from "../element/typeChecks";
 import clsx from "clsx";
 import { actionToggleZenMode } from "../actions";
 import { Tooltip } from "./Tooltip";
@@ -53,6 +53,9 @@ export const SelectedShapeActions = ({ appState, elementsMap, renderAction, }) =
         !isTransparent(appState.currentItemBackgroundColor)) ||
         targetElements.some((element) => hasBackground(element.type) && !isTransparent(element.backgroundColor));
     const showLinkIcon = targetElements.length === 1 || isSingleElementBoundContainer;
+    const showLineEditorAction = !appState.editingLinearElement &&
+        targetElements.length === 1 &&
+        isLinearElement(targetElements[0]);
     return (_jsxs("div", { className: "panelColumn", children: [_jsx("div", { children: canChangeStrokeColor(appState, targetElements) &&
                     renderAction("changeStrokeColor") }), canChangeBackgroundColor(appState, targetElements) && (_jsx("div", { children: renderAction("changeBackgroundColor") })), showFillIcons && renderAction("changeFillStyle"), (hasStrokeWidth(appState.activeTool.type) ||
                 targetElements.some((element) => hasStrokeWidth(element.type))) &&
@@ -65,14 +68,14 @@ export const SelectedShapeActions = ({ appState, elementsMap, renderAction, }) =
                         suppportsHorizontalAlign(targetElements, elementsMap)) &&
                         renderAction("changeTextAlign")] })), shouldAllowVerticalAlign(targetElements, elementsMap) &&
                 renderAction("changeVerticalAlign"), (canHaveArrowheads(appState.activeTool.type) ||
-                targetElements.some((element) => canHaveArrowheads(element.type))) && (_jsx(_Fragment, { children: renderAction("changeArrowhead") })), renderAction("changeOpacity"), _jsxs("fieldset", { children: [_jsx("legend", { children: t("labels.layers") }), _jsxs("div", { className: "buttonList", children: [renderAction("sendToBack"), renderAction("sendBackward"), renderAction("bringToFront"), renderAction("bringForward")] })] }), targetElements.length > 1 && !isSingleElementBoundContainer && (_jsxs("fieldset", { children: [_jsx("legend", { children: t("labels.align") }), _jsxs("div", { className: "buttonList", children: [isRTL ? (_jsxs(_Fragment, { children: [renderAction("alignRight"), renderAction("alignHorizontallyCentered"), renderAction("alignLeft")] })) : (_jsxs(_Fragment, { children: [renderAction("alignLeft"), renderAction("alignHorizontallyCentered"), renderAction("alignRight")] })), targetElements.length > 2 &&
+                targetElements.some((element) => canHaveArrowheads(element.type))) && (_jsx(_Fragment, { children: renderAction("changeArrowhead") })), renderAction("changeOpacity"), _jsxs("fieldset", { children: [_jsx("legend", { children: t("labels.layers") }), _jsxs("div", { className: "buttonList", children: [renderAction("sendToBack"), renderAction("sendBackward"), renderAction("bringForward"), renderAction("bringToFront")] })] }), targetElements.length > 1 && !isSingleElementBoundContainer && (_jsxs("fieldset", { children: [_jsx("legend", { children: t("labels.align") }), _jsxs("div", { className: "buttonList", children: [isRTL ? (_jsxs(_Fragment, { children: [renderAction("alignRight"), renderAction("alignHorizontallyCentered"), renderAction("alignLeft")] })) : (_jsxs(_Fragment, { children: [renderAction("alignLeft"), renderAction("alignHorizontallyCentered"), renderAction("alignRight")] })), targetElements.length > 2 &&
                                 renderAction("distributeHorizontally"), _jsx("div", { style: { flexBasis: "100%", height: 0 } }), _jsxs("div", { style: {
                                     display: "flex",
                                     flexWrap: "wrap",
                                     gap: ".5rem",
                                     marginTop: "-0.5rem",
                                 }, children: [renderAction("alignTop"), renderAction("alignVerticallyCentered"), renderAction("alignBottom"), targetElements.length > 2 &&
-                                        renderAction("distributeVertically")] })] })] })), !isEditing && targetElements.length > 0 && (_jsxs("fieldset", { children: [_jsx("legend", { children: t("labels.actions") }), _jsxs("div", { className: "buttonList", children: [!device.editor.isMobile && renderAction("duplicateSelection"), !device.editor.isMobile && renderAction("deleteSelectedElements"), renderAction("group"), renderAction("ungroup"), showLinkIcon && renderAction("hyperlink")] })] }))] }));
+                                        renderAction("distributeVertically")] })] })] })), !isEditing && targetElements.length > 0 && (_jsxs("fieldset", { children: [_jsx("legend", { children: t("labels.actions") }), _jsxs("div", { className: "buttonList", children: [!device.editor.isMobile && renderAction("duplicateSelection"), !device.editor.isMobile && renderAction("deleteSelectedElements"), renderAction("group"), renderAction("ungroup"), showLinkIcon && renderAction("hyperlink"), showLineEditorAction && renderAction("toggleLinearEditor")] })] }))] }));
 };
 export const ShapesSwitcher = ({ activeTool, appState, app, UIOptions, }) => {
     const [isExtraToolsMenuOpen, setIsExtraToolsMenuOpen] = useState(false);
@@ -122,8 +125,8 @@ export const ShapesSwitcher = ({ activeTool, appState, app, UIOptions, }) => {
                                     fontSize: 8,
                                     fontFamily: "Cascadia, monospace",
                                     position: "absolute",
-                                    background: "pink",
-                                    color: "black",
+                                    background: "var(--color-promo)",
+                                    color: "var(--color-surface-lowest)",
                                     bottom: 3,
                                     right: 4,
                                 }, children: "AI" }))] }), _jsxs(DropdownMenu.Content, { onClickOutside: () => setIsExtraToolsMenuOpen(false), onSelect: () => setIsExtraToolsMenuOpen(false), className: "App-toolbar__extra-tools-dropdown", children: [_jsx(DropdownMenu.Item, { onSelect: () => app.setActiveTool({ type: "frame" }), icon: frameToolIcon, shortcut: KEYS.F.toLocaleUpperCase(), "data-testid": "toolbar-frame", selected: frameToolSelected, children: t("toolBar.frame") }), _jsx(DropdownMenu.Item, { onSelect: () => app.setActiveTool({ type: "embeddable" }), icon: EmbedIcon, "data-testid": "toolbar-embeddable", selected: embeddableToolSelected, children: t("toolBar.embeddable") }), _jsx(DropdownMenu.Item, { onSelect: () => app.setActiveTool({ type: "laser" }), icon: laserPointerToolIcon, "data-testid": "toolbar-laser", selected: laserToolSelected, shortcut: KEYS.K.toLocaleUpperCase(), children: t("toolBar.laser") }), _jsx("div", { style: { margin: "6px 0", fontSize: 14, fontWeight: 600 }, children: "Generate" }), app.props.aiEnabled !== false && _jsx(TTDDialogTriggerTunnel.Out, {}), _jsx(DropdownMenu.Item, { onSelect: () => app.setOpenDialog({ name: "ttd", tab: "mermaid" }), icon: mermaidLogoIcon, "data-testid": "toolbar-embeddable", children: t("toolBar.mermaidToExcalidraw") }), app.props.aiEnabled !== false && (_jsxs(_Fragment, { children: [_jsxs(DropdownMenu.Item, { onSelect: () => app.onMagicframeToolSelect(), icon: MagicIcon, "data-testid": "toolbar-magicframe", children: [t("toolBar.magicframe"), _jsx(DropdownMenu.Item.Badge, { children: "AI" })] }), _jsx(DropdownMenu.Item, { onSelect: () => {
@@ -137,7 +140,7 @@ export const ShapesSwitcher = ({ activeTool, appState, app, UIOptions, }) => {
 };
 export const ZoomActions = ({ renderAction, zoom, }) => (_jsx(Stack.Col, { gap: 1, className: "zoom-actions", children: _jsxs(Stack.Row, { align: "center", children: [renderAction("zoomOut"), renderAction("resetZoom"), renderAction("zoomIn")] }) }));
 export const UndoRedoActions = ({ renderAction, className, }) => (_jsxs("div", { className: `undo-redo-buttons ${className}`, children: [_jsx("div", { className: "undo-button-container", children: _jsx(Tooltip, { label: t("buttons.undo"), children: renderAction("undo") }) }), _jsx("div", { className: "redo-button-container", children: _jsxs(Tooltip, { label: t("buttons.redo"), children: [" ", renderAction("redo")] }) })] }));
-export const ExitZenModeAction = ({ actionManager, showExitZenModeBtn, }) => (_jsx("button", { className: clsx("disable-zen-mode", {
+export const ExitZenModeAction = ({ actionManager, showExitZenModeBtn, }) => (_jsx("button", { type: "button", className: clsx("disable-zen-mode", {
         "disable-zen-mode--visible": showExitZenModeBtn,
     }), onClick: () => actionManager.executeAction(actionToggleZenMode), children: t("buttons.exitZenMode") }));
 export const FinalizeAction = ({ renderAction, className, }) => (_jsx("div", { className: `finalize-button ${className}`, children: renderAction("finalize", { size: "small" }) }));

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

@@ -1,15 +1,15 @@
 import React from "react";
-import { RoughCanvas } from "roughjs/bin/canvas";
+import type { RoughCanvas } from "roughjs/bin/canvas";
 import { ActionManager } from "../actions/manager";
-import { EXPORT_IMAGE_TYPES } from "../constants";
-import { ExportedElements } from "../data";
+import type { ActionResult } from "../actions/types";
+import type { EXPORT_IMAGE_TYPES } from "../constants";
+import type { ExportedElements } from "../data";
 import { LinearElementEditor } from "../element/linearElementEditor";
-import { ExcalidrawElement, NonDeleted, NonDeletedExcalidrawElement, ExcalidrawFrameLikeElement, ExcalidrawIframeElement, ExcalidrawEmbeddableElement, Ordered } from "../element/types";
+import type { ExcalidrawElement, NonDeleted, NonDeletedExcalidrawElement, ExcalidrawFrameLikeElement, ExcalidrawIframeElement, ExcalidrawEmbeddableElement, Ordered } from "../element/types";
 import { History } from "../history";
 import Scene from "../scene/Scene";
-import { GeometricShape } from "../../utils/geometry/shape";
-import { AppClassProperties, AppProps, AppState, ExcalidrawImperativeAPI, BinaryFiles, LibraryItems, SceneData, Device, FrameNameBoundsCache, SidebarName, SidebarTabName, ToolType, OnUserFollowedPayload } from "../types";
-import { FileSystemHandle } from "../data/filesystem";
+import type { AppClassProperties, AppProps, AppState, ExcalidrawImperativeAPI, BinaryFiles, LibraryItems, SceneData, Device, FrameNameBoundsCache, SidebarName, SidebarTabName, ToolType, OnUserFollowedPayload } from "../types";
+import type { FileSystemHandle } from "../data/filesystem";
 import { Renderer } from "../scene/Renderer";
 import { Emitter } from "../emitter";
 import { Store } from "../store";
@@ -252,7 +252,7 @@ declare class App extends React.Component<AppProps, AppState> {
     private onMagicSettingsConfirm;
     onMagicframeToolSelect: () => void;
     private openEyeDropper;
-    private syncActionResult;
+    syncActionResult: (actionResult: ActionResult) => void;
     private onBlur;
     private onUnload;
     private disableEvent;
@@ -342,10 +342,10 @@ declare class App extends React.Component<AppProps, AppState> {
         elements?: SceneData["elements"];
         appState?: Pick<AppState, K> | null | undefined;
         collaborators?: SceneData["collaborators"];
-        /** @default StoreAction.CAPTURE */
+        /** @default StoreAction.NONE */
         storeAction?: SceneData["storeAction"];
     }) => void;
-    private onSceneUpdated;
+    private triggerRender;
     /**
      * @returns whether the menu was toggled on or off
      */
@@ -387,11 +387,6 @@ declare class App extends React.Component<AppProps, AppState> {
     private handleTextWysiwyg;
     private deselectElements;
     private getTextElementAtPosition;
-    /**
-     * get the pure geometric shape of an excalidraw element
-     * which is then used for hit detection
-     */
-    getElementShape(element: ExcalidrawElement): GeometricShape;
     private getBoundTextShape;
     private getElementAtPosition;
     private getElementsAtPosition;
@@ -474,7 +469,6 @@ declare class App extends React.Component<AppProps, AppState> {
     private updateBindingEnabledOnPointerMove;
     private maybeSuggestBindingAtCursor;
     private maybeSuggestBindingsForLinearElementAtCoords;
-    private maybeSuggestBindingForAll;
     private clearSelection;
     private handleInteractiveCanvasRef;
     private handleAppOnDrop;