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

package/dist/excalidraw/components/Stats/utils.js

@@ -0,0 +1,158 @@
+import { bindOrUnbindLinearElements, updateBoundElements, } from "../../element/binding";
+import { mutateElement } from "../../element/mutateElement";
+import { measureFontSizeFromWidth, rescalePointsInElement, } from "../../element/resizeElements";
+import { getApproxMinLineHeight, getApproxMinLineWidth, getBoundTextElement, getBoundTextMaxWidth, handleBindTextResize, } from "../../element/textElement";
+import { isFrameLikeElement, isLinearElement, isTextElement, } from "../../element/typeChecks";
+import { getSelectedGroupIds, getElementsInGroup, isInGroup, } from "../../groups";
+import { rotate } from "../../math";
+import { getFontString } from "../../utils";
+export const SMALLEST_DELTA = 0.01;
+export const isPropertyEditable = (element, property) => {
+    if (property === "height" && isTextElement(element)) {
+        return false;
+    }
+    if (property === "width" && isTextElement(element)) {
+        return false;
+    }
+    if (property === "angle" && isFrameLikeElement(element)) {
+        return false;
+    }
+    return true;
+};
+export const getStepSizedValue = (value, stepSize) => {
+    const v = value + stepSize / 2;
+    return v - (v % stepSize);
+};
+export const getElementsInAtomicUnit = (atomicUnit, elementsMap, originalElementsMap) => {
+    return Object.keys(atomicUnit)
+        .map((id) => ({
+        original: (originalElementsMap ?? elementsMap).get(id),
+        latest: elementsMap.get(id),
+    }))
+        .filter((el) => el.original !== undefined && el.latest !== undefined);
+};
+export const newOrigin = (x1, y1, w1, h1, w2, h2, angle) => {
+    /**
+     * The formula below is the result of solving
+     *   rotate(x1, y1, cx1, cy1, angle) = rotate(x2, y2, cx2, cy2, angle)
+     * where rotate is the function defined in math.ts
+     *
+     * This is so that the new origin (x2, y2),
+     * when rotated against the new center (cx2, cy2),
+     * coincides with (x1, y1) rotated against (cx1, cy1)
+     *
+     * The reason for doing this computation is so the element's top left corner
+     * on the canvas remains fixed after any changes in its dimension.
+     */
+    return {
+        x: x1 +
+            (w1 - w2) / 2 +
+            ((w2 - w1) / 2) * Math.cos(angle) +
+            ((h1 - h2) / 2) * Math.sin(angle),
+        y: y1 +
+            (h1 - h2) / 2 +
+            ((w2 - w1) / 2) * Math.sin(angle) +
+            ((h2 - h1) / 2) * Math.cos(angle),
+    };
+};
+export const resizeElement = (nextWidth, nextHeight, keepAspectRatio, origElement, elementsMap, shouldInformMutation = true) => {
+    const latestElement = elementsMap.get(origElement.id);
+    if (!latestElement) {
+        return;
+    }
+    let boundTextFont = {};
+    const boundTextElement = getBoundTextElement(latestElement, elementsMap);
+    if (boundTextElement) {
+        const minWidth = getApproxMinLineWidth(getFontString(boundTextElement), boundTextElement.lineHeight);
+        const minHeight = getApproxMinLineHeight(boundTextElement.fontSize, boundTextElement.lineHeight);
+        nextWidth = Math.max(nextWidth, minWidth);
+        nextHeight = Math.max(nextHeight, minHeight);
+    }
+    mutateElement(latestElement, {
+        ...newOrigin(latestElement.x, latestElement.y, latestElement.width, latestElement.height, nextWidth, nextHeight, latestElement.angle),
+        width: nextWidth,
+        height: nextHeight,
+        ...rescalePointsInElement(origElement, nextWidth, nextHeight, true),
+    }, shouldInformMutation);
+    updateBindings(latestElement, elementsMap, {
+        newSize: {
+            width: nextWidth,
+            height: nextHeight,
+        },
+    });
+    if (boundTextElement) {
+        boundTextFont = {
+            fontSize: boundTextElement.fontSize,
+        };
+        if (keepAspectRatio) {
+            const updatedElement = {
+                ...latestElement,
+                width: nextWidth,
+                height: nextHeight,
+            };
+            const nextFont = measureFontSizeFromWidth(boundTextElement, elementsMap, getBoundTextMaxWidth(updatedElement, boundTextElement));
+            boundTextFont = {
+                fontSize: nextFont?.size ?? boundTextElement.fontSize,
+            };
+        }
+    }
+    if (boundTextElement && boundTextFont) {
+        mutateElement(boundTextElement, {
+            fontSize: boundTextFont.fontSize,
+        });
+    }
+    handleBindTextResize(latestElement, elementsMap, "e", keepAspectRatio);
+};
+export const moveElement = (newTopLeftX, newTopLeftY, originalElement, elementsMap, originalElementsMap, shouldInformMutation = true) => {
+    const latestElement = elementsMap.get(originalElement.id);
+    if (!latestElement) {
+        return;
+    }
+    const [cx, cy] = [
+        originalElement.x + originalElement.width / 2,
+        originalElement.y + originalElement.height / 2,
+    ];
+    const [topLeftX, topLeftY] = rotate(originalElement.x, originalElement.y, cx, cy, originalElement.angle);
+    const changeInX = newTopLeftX - topLeftX;
+    const changeInY = newTopLeftY - topLeftY;
+    const [x, y] = rotate(newTopLeftX, newTopLeftY, cx + changeInX, cy + changeInY, -originalElement.angle);
+    mutateElement(latestElement, {
+        x,
+        y,
+    }, shouldInformMutation);
+    updateBindings(latestElement, elementsMap);
+    const boundTextElement = getBoundTextElement(originalElement, originalElementsMap);
+    if (boundTextElement) {
+        const latestBoundTextElement = elementsMap.get(boundTextElement.id);
+        latestBoundTextElement &&
+            mutateElement(latestBoundTextElement, {
+                x: boundTextElement.x + changeInX,
+                y: boundTextElement.y + changeInY,
+            }, shouldInformMutation);
+    }
+};
+export const getAtomicUnits = (targetElements, appState) => {
+    const selectedGroupIds = getSelectedGroupIds(appState);
+    const _atomicUnits = selectedGroupIds.map((gid) => {
+        return getElementsInGroup(targetElements, gid).reduce((acc, el) => {
+            acc[el.id] = true;
+            return acc;
+        }, {});
+    });
+    targetElements
+        .filter((el) => !isInGroup(el))
+        .forEach((el) => {
+        _atomicUnits.push({
+            [el.id]: true,
+        });
+    });
+    return _atomicUnits;
+};
+export const updateBindings = (latestElement, elementsMap, options) => {
+    if (isLinearElement(latestElement)) {
+        bindOrUnbindLinearElements([latestElement], elementsMap, true, []);
+    }
+    else {
+        updateBoundElements(latestElement, elementsMap, options);
+    }
+};

package/dist/excalidraw/components/TTDDialog/MermaidToExcalidraw.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import "./MermaidToExcalidraw.scss";
-import { MermaidToExcalidrawLibProps } from "./common";
+import type { MermaidToExcalidrawLibProps } from "./common";
 declare const MermaidToExcalidraw: ({ mermaidToExcalidrawLib, }: {
     mermaidToExcalidrawLib: MermaidToExcalidrawLibProps;
 }) => JSX.Element;

package/dist/excalidraw/components/TTDDialog/TTDDialog.js

@@ -141,8 +141,8 @@ export const TTDDialogBase = withInternalFallback("TTDDialogBase", ({ tab, ...re
                                             marginLeft: "10px",
                                             fontSize: 10,
                                             borderRadius: "12px",
-                                            background: "pink",
-                                            color: "#000",
+                                            background: "var(--color-promo)",
+                                            color: "var(--color-surface-lowest)",
                                         }, children: "AI Beta" })] }) }), _jsx(TTDDialogTabTrigger, { tab: "mermaid", children: "Mermaid" })] })), _jsx(TTDDialogTab, { className: "ttd-dialog-content", tab: "mermaid", children: _jsx(MermaidToExcalidraw, { mermaidToExcalidrawLib: mermaidToExcalidrawLib }) }), !("__fallback" in rest) && (_jsxs(TTDDialogTab, { className: "ttd-dialog-content", tab: "text-to-diagram", children: [_jsx("div", { className: "ttd-dialog-desc", children: "Currently we use Mermaid as a middle step, so you'll get best results if you describe a diagram, workflow, flow chart, and similar." }), _jsxs(TTDDialogPanels, { children: [_jsx(TTDDialogPanel, { label: t("labels.prompt"), panelAction: {
                                         action: onGenerate,
                                         label: "Generate",

package/dist/excalidraw/components/TTDDialog/TTDDialogInput.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEventHandler } from "react";
+import type { ChangeEventHandler } from "react";
 interface TTDDialogInputProps {
     input: string;
     placeholder: string;

package/dist/excalidraw/components/TTDDialog/TTDDialogPanel.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 interface TTDDialogPanelProps {
     label: string;
     children: ReactNode;

package/dist/excalidraw/components/TTDDialog/TTDDialogPanels.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 export declare const TTDDialogPanels: ({ children }: {
     children: ReactNode;
 }) => JSX.Element;

package/dist/excalidraw/components/TTDDialog/TTDDialogTabs.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 declare const TTDDialogTabs: {
     (props: {
         children: ReactNode;

package/dist/excalidraw/components/TTDDialog/TTDDialogTrigger.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 export declare const TTDDialogTrigger: {
     ({ children, icon, }: {
         children?: ReactNode;

package/dist/excalidraw/components/TTDDialog/common.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { MermaidOptions } from "@excalidraw/mermaid-to-excalidraw";
-import { MermaidToExcalidrawResult } from "@excalidraw/mermaid-to-excalidraw/dist/interfaces";
-import { NonDeletedExcalidrawElement } from "../../element/types";
-import { AppClassProperties, BinaryFiles } from "../../types";
+import type { MermaidOptions } from "@excalidraw/mermaid-to-excalidraw";
+import type { MermaidToExcalidrawResult } from "@excalidraw/mermaid-to-excalidraw/dist/interfaces";
+import type { NonDeletedExcalidrawElement } from "../../element/types";
+import type { AppClassProperties, BinaryFiles } from "../../types";
 export interface MermaidToExcalidrawLibProps {
     loaded: boolean;
     api: Promise<{

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

@@ -1,4 +1,4 @@
-import { KeyboardEvent } from "react";
+import type { KeyboardEvent } from "react";
 import "./TextField.scss";
 type TextFieldProps = {
     onChange?: (value: string) => void;

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

@@ -1,4 +1,4 @@
-import { CSSProperties } from "react";
+import type { CSSProperties } from "react";
 import "./Toast.scss";
 export declare const Toast: ({ message, onClose, closable, duration, style, }: {
     message: string;

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

@@ -1,6 +1,7 @@
 import "./ToolIcon.scss";
-import React, { CSSProperties } from "react";
-import { PointerType } from "../element/types";
+import type { CSSProperties } from "react";
+import React from "react";
+import type { PointerType } from "../element/types";
 export type ToolButtonSize = "small" | "medium";
 type ToolButtonBaseProps = {
     icon?: React.ReactNode;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { TranslationKeys } from "../i18n";
+import type { TranslationKeys } from "../i18n";
 declare const Trans: ({ i18nKey, children, ...props }: {
     [key: string]: React.ReactNode | ((el: React.ReactNode) => React.ReactNode);
     i18nKey: TranslationKeys;

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

@@ -1,6 +1,6 @@
 import "./UserList.scss";
 import React from "react";
-import { Collaborator, SocketId } from "../types";
+import type { Collaborator, SocketId } from "../types";
 export type GoToCollaboratorComponentProps = {
     socketId: SocketId;
     collaborator: Collaborator;

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

@@ -2,14 +2,15 @@ import React from "react";
 import type { DOMAttributes } from "react";
 import type { Device, InteractiveCanvasAppState } from "../../types";
 import type { RenderableElementsMap, RenderInteractiveSceneCallback } from "../../scene/types";
-import type { NonDeletedExcalidrawElement } from "../../element/types";
+import type { NonDeletedExcalidrawElement, NonDeletedSceneElementsMap } from "../../element/types";
 type InteractiveCanvasProps = {
     containerRef: React.RefObject<HTMLDivElement>;
     canvas: HTMLCanvasElement | null;
     elementsMap: RenderableElementsMap;
     visibleElements: readonly NonDeletedExcalidrawElement[];
     selectedElements: readonly NonDeletedExcalidrawElement[];
-    versionNonce: number | undefined;
+    allElementsMap: NonDeletedSceneElementsMap;
+    sceneNonce: number | undefined;
     selectionNonce: number | undefined;
     scale: number;
     appState: InteractiveCanvasAppState;

package/dist/excalidraw/components/canvases/InteractiveCanvas.js

@@ -49,6 +49,7 @@ const InteractiveCanvas = (props) => {
             elementsMap: props.elementsMap,
             visibleElements: props.visibleElements,
             selectedElements: props.selectedElements,
+            allElementsMap: props.allElementsMap,
             scale: window.devicePixelRatio,
             appState: props.appState,
             renderConfig: {
@@ -99,14 +100,15 @@ const getRelevantAppStateProps = (appState) => ({
     activeEmbeddable: appState.activeEmbeddable,
     snapLines: appState.snapLines,
     zenModeEnabled: appState.zenModeEnabled,
+    editingElement: appState.editingElement,
 });
 const areEqual = (prevProps, nextProps) => {
     // This could be further optimised if needed, as we don't have to render interactive canvas on each scene mutation
     if (prevProps.selectionNonce !== nextProps.selectionNonce ||
-        prevProps.versionNonce !== nextProps.versionNonce ||
+        prevProps.sceneNonce !== nextProps.sceneNonce ||
         prevProps.scale !== nextProps.scale ||
         // we need to memoize on elementsMap because they may have renewed
-        // even if versionNonce didn't change (e.g. we filter elements out based
+        // even if sceneNonce didn't change (e.g. we filter elements out based
         // on appState)
         prevProps.elementsMap !== nextProps.elementsMap ||
         prevProps.visibleElements !== nextProps.visibleElements ||

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { RoughCanvas } from "roughjs/bin/canvas";
+import type { RoughCanvas } from "roughjs/bin/canvas";
 import type { StaticCanvasAppState } from "../../types";
 import type { RenderableElementsMap, StaticCanvasRenderConfig } from "../../scene/types";
 import type { NonDeletedExcalidrawElement, NonDeletedSceneElementsMap } from "../../element/types";
@@ -9,7 +9,7 @@ type StaticCanvasProps = {
     elementsMap: RenderableElementsMap;
     allElementsMap: NonDeletedSceneElementsMap;
     visibleElements: readonly NonDeletedExcalidrawElement[];
-    versionNonce: number | undefined;
+    sceneNonce: number | undefined;
     selectionNonce: number | undefined;
     scale: number;
     appState: StaticCanvasAppState;

package/dist/excalidraw/components/canvases/StaticCanvas.js

@@ -70,10 +70,10 @@ const getRelevantAppStateProps = (appState) => ({
     editingGroupId: appState.editingGroupId,
 });
 const areEqual = (prevProps, nextProps) => {
-    if (prevProps.versionNonce !== nextProps.versionNonce ||
+    if (prevProps.sceneNonce !== nextProps.sceneNonce ||
         prevProps.scale !== nextProps.scale ||
         // we need to memoize on elementsMap because they may have renewed
-        // even if versionNonce didn't change (e.g. we filter elements out based
+        // even if sceneNonce didn't change (e.g. we filter elements out based
         // on appState)
         prevProps.elementsMap !== nextProps.elementsMap ||
         prevProps.visibleElements !== nextProps.visibleElements) {

package/dist/excalidraw/components/dropdownMenu/DropdownMenuItem.js

@@ -11,10 +11,10 @@ export const DropDownMenuItemBadge = ({ children, }) => {
             display: "inline-flex",
             marginLeft: "auto",
             padding: "2px 4px",
-            background: "pink",
+            background: "var(--color-promo)",
+            color: "var(--color-surface-lowest)",
             borderRadius: 6,
             fontSize: 9,
-            color: "black",
             fontFamily: "Cascadia, monospace",
         }, children: children }));
 };

package/dist/excalidraw/components/footer/Footer.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { ActionManager } from "../../actions/manager";
-import { UIAppState } from "../../types";
+import type { ActionManager } from "../../actions/manager";
+import type { UIAppState } from "../../types";
 declare const Footer: {
     ({ appState, actionManager, showExitZenModeBtn, renderWelcomeScreen, }: {
         appState: UIAppState;

package/dist/excalidraw/components/hyperlink/Hyperlink.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { AppState, ExcalidrawProps, UIAppState } from "../../types";
-import { ElementsMap, ExcalidrawEmbeddableElement, NonDeletedExcalidrawElement } from "../../element/types";
+import type { AppState, ExcalidrawProps, UIAppState } from "../../types";
+import type { ElementsMap, ExcalidrawEmbeddableElement, NonDeletedExcalidrawElement } from "../../element/types";
 import "./Hyperlink.scss";
 export declare const Hyperlink: ({ element, elementsMap, setAppState, onLinkOpen, setToast, updateEmbedValidationStatus, }: {
     element: NonDeletedExcalidrawElement;

package/dist/excalidraw/components/hyperlink/helpers.d.ts

@@ -1,6 +1,6 @@
-import { Bounds } from "../../element/bounds";
-import { ElementsMap, NonDeletedExcalidrawElement } from "../../element/types";
-import { AppState, UIAppState } from "../../types";
+import type { Bounds } from "../../element/bounds";
+import type { ElementsMap, NonDeletedExcalidrawElement } from "../../element/types";
+import type { AppState, UIAppState } from "../../types";
 export declare const EXTERNAL_LINK_IMG: HTMLImageElement;
 export declare const getLinkHandleFromCoords: ([x1, y1, x2, y2]: Bounds, angle: number, appState: Pick<UIAppState, "zoom">) => Bounds;
 export declare const isPointHittingLinkIcon: (element: NonDeletedExcalidrawElement, elementsMap: ElementsMap, appState: AppState, [x, y]: readonly [number, number]) => boolean;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Theme } from "../element/types";
+import type { Theme } from "../element/types";
 export declare const iconFillColor: (theme: Theme) => string;
 type Opts = {
     width?: number;
@@ -154,6 +154,7 @@ export declare const TextAlignBottomIcon: React.MemoExoticComponent<({ theme }:
 export declare const TextAlignMiddleIcon: React.MemoExoticComponent<({ theme }: {
     theme: Theme;
 }) => JSX.Element>;
+export declare const angleIcon: JSX.Element;
 export declare const publishIcon: JSX.Element;
 export declare const eraser: JSX.Element;
 export declare const handIcon: JSX.Element;
@@ -195,7 +196,10 @@ export declare const pngIcon: JSX.Element;
 export declare const magnetIcon: JSX.Element;
 export declare const coffeeIcon: JSX.Element;
 export declare const DeviceDesktopIcon: JSX.Element;
-export declare const arrowBarToLeftIcon: JSX.Element;
+export declare const loginIcon: JSX.Element;
 export declare const youtubeIcon: JSX.Element;
 export declare const gridIcon: JSX.Element;
+export declare const lineEditorIcon: JSX.Element;
+export declare const collapseDownIcon: JSX.Element;
+export declare const collapseUpIcon: JSX.Element;
 export {};

package/dist/excalidraw/components/icons.js

@@ -121,10 +121,22 @@ export const shareWindows = createIcon(_jsxs(_Fragment, { children: [_jsx("path"
 // Icon imported form Storybook
 // Storybook is licensed under MIT https://github.com/storybookjs/storybook/blob/next/LICENSE
 export const resetZoom = createIcon(_jsx("path", { stroke: "currentColor", strokeWidth: "40", fill: "currentColor", d: "M148 560a318 318 0 0 0 522 110 316 316 0 0 0 0-450 316 316 0 0 0-450 0c-11 11-21 22-30 34v4h47c25 0 46 21 46 46s-21 45-46 45H90c-13 0-25-6-33-14-9-9-14-20-14-33V156c0-25 20-45 45-45s45 20 45 45v32l1 1a401 401 0 0 1 623 509l212 212a42 42 0 0 1-59 59L698 757A401 401 0 0 1 65 570a42 42 0 0 1 83-10z" }), { width: 1024 });
-export const BringForwardIcon = createIcon(_jsxs(_Fragment, { children: [_jsxs("g", { clipPath: "url(#a)", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M13.889 4.167H8.333c-.767 0-1.389.622-1.389 1.389v5.555c0 .767.622 1.389 1.39 1.389h5.555c.767 0 1.389-.622 1.389-1.389V5.556c0-.767-.622-1.39-1.39-1.39Z", fill: "currentColor" }), _jsx("path", { d: "M12.5 12.5v1.389a1.389 1.389 0 0 1-1.389 1.389H5.556a1.389 1.389 0 0 1-1.39-1.39V8.334a1.389 1.389 0 0 1 1.39-1.389h1.388" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
-export const SendBackwardIcon = createIcon(_jsxs(_Fragment, { children: [_jsxs("g", { clipPath: "url(#a)", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.944 12.5H12.5v1.389a1.389 1.389 0 0 1-1.389 1.389H5.556a1.389 1.389 0 0 1-1.39-1.39V8.334a1.389 1.389 0 0 1 1.39-1.389h1.388", fill: "currentColor" }), _jsx("path", { d: "M13.889 4.167H8.333c-.767 0-1.389.621-1.389 1.389v5.555c0 .767.622 1.389 1.39 1.389h5.555c.767 0 1.389-.622 1.389-1.389V5.556c0-.768-.622-1.39-1.39-1.39Z" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
-export const BringToFrontIcon = createIcon(_jsxs(_Fragment, { children: [_jsxs("g", { clipPath: "url(#a)", stroke: "currentColor", strokeWidth: "1.25", children: [_jsx("path", { d: "M8.775 6.458h2.45a2.316 2.316 0 0 1 2.317 2.316v2.452a2.316 2.316 0 0 1-2.316 2.316H8.774a2.316 2.316 0 0 1-2.317-2.316V8.774a2.316 2.316 0 0 1 2.317-2.316Z", fill: "currentColor" }), _jsx("path", { d: "M5.441 9.792h2.451a2.316 2.316 0 0 1 2.316 2.316v2.45a2.316 2.316 0 0 1-2.316 2.317h-2.45a2.316 2.316 0 0 1-2.317-2.316v-2.451a2.316 2.316 0 0 1 2.316-2.316ZM12.108 3.125h2.45a2.316 2.316 0 0 1 2.317 2.316v2.451a2.316 2.316 0 0 1-2.316 2.316h-2.451a2.316 2.316 0 0 1-2.316-2.316v-2.45a2.316 2.316 0 0 1 2.316-2.317Z" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
-export const SendToBackIcon = createIcon(_jsxs(_Fragment, { children: [_jsxs("g", { clipPath: "url(#a)", children: [_jsx("path", { d: "M5.441 9.792h2.451a2.316 2.316 0 0 1 2.316 2.316v2.45a2.316 2.316 0 0 1-2.316 2.317h-2.45a2.316 2.316 0 0 1-2.317-2.316v-2.451a2.316 2.316 0 0 1 2.316-2.316Z", stroke: "currentColor", strokeWidth: "1.25" }), _jsx("path", { d: "M5.441 9.792h2.451a2.316 2.316 0 0 1 2.316 2.316v2.45a2.316 2.316 0 0 1-2.316 2.317h-2.45a2.316 2.316 0 0 1-2.317-2.316v-2.451a2.316 2.316 0 0 1 2.316-2.316Z", stroke: "currentColor", strokeWidth: "1.25" }), _jsx("mask", { id: "SendToBackIcon", fill: "#fff", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.167 5.833v2.06a2.941 2.941 0 0 0 2.94 2.94h2.06v.393a2.941 2.941 0 0 1-2.941 2.94h-.393v-2.058a2.941 2.941 0 0 0-2.94-2.941h-2.06v-.393a2.941 2.941 0 0 1 2.942-2.94h.392Z" }) }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.167 5.833v2.06a2.941 2.941 0 0 0 2.94 2.94h2.06v.393a2.941 2.941 0 0 1-2.941 2.94h-.393v-2.058a2.941 2.941 0 0 0-2.94-2.941h-2.06v-.393a2.941 2.941 0 0 1 2.942-2.94h.392Z", fill: "currentColor" }), _jsx("path", { d: "M9.167 5.833h1.25v-1.25h-1.25v1.25Zm5 5h1.25v-1.25h-1.25v1.25Zm-3.334 3.334h-1.25v1.25h1.25v-1.25Zm-5-5h-1.25v1.25h1.25v-1.25Zm2.084-3.334v2.06h2.5v-2.06h-2.5Zm0 2.06a4.191 4.191 0 0 0 4.19 4.19v-2.5a1.691 1.691 0 0 1-1.69-1.69h-2.5Zm4.19 4.19h2.06v-2.5h-2.06v2.5Zm.81-1.25v.393h2.5v-.393h-2.5Zm0 .393c0 .933-.758 1.69-1.691 1.69v2.5a4.191 4.191 0 0 0 4.19-4.19h-2.5Zm-1.691 1.69h-.393v2.5h.393v-2.5Zm.857 1.25v-2.058h-2.5v2.059h2.5Zm0-2.058a4.191 4.191 0 0 0-4.19-4.191v2.5c.933 0 1.69.757 1.69 1.69h2.5Zm-4.19-4.191h-2.06v2.5h2.06v-2.5Zm-.81 1.25v-.393h-2.5v.393h2.5Zm0-.393c0-.934.758-1.69 1.692-1.69v-2.5a4.191 4.191 0 0 0-4.192 4.19h2.5Zm1.692-1.69h.392v-2.5h-.392v2.5Z", fill: "currentColor", mask: "url(#SendToBackIcon)" }), _jsx("path", { d: "M12.108 3.125h2.45a2.316 2.316 0 0 1 2.317 2.316v2.451a2.316 2.316 0 0 1-2.316 2.316h-2.451a2.316 2.316 0 0 1-2.316-2.316v-2.45a2.316 2.316 0 0 1 2.316-2.317Z", stroke: "currentColor", strokeWidth: "1.25" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
+const arrowBarToTopJSX = (_jsxs("g", { strokeWidth: 1.5, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M12 10l0 10" }), _jsx("path", { d: "M12 10l4 4" }), _jsx("path", { d: "M12 10l-4 4" }), _jsx("path", { d: "M4 4l16 0" })] }));
+const arrownNarrowUpJSX = (_jsxs("g", { strokeWidth: 1.5, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M12 5l0 14" }), _jsx("path", { d: "M16 9l-4 -4" }), _jsx("path", { d: "M8 9l4 -4" })] }));
+export const BringForwardIcon = createIcon(arrownNarrowUpJSX, tablerIconProps);
+export const SendBackwardIcon = createIcon(arrownNarrowUpJSX, {
+    ...tablerIconProps,
+    style: {
+        transform: "rotate(180deg)",
+    },
+});
+export const BringToFrontIcon = createIcon(arrowBarToTopJSX, tablerIconProps);
+export const SendToBackIcon = createIcon(arrowBarToTopJSX, {
+    ...tablerIconProps,
+    style: {
+        transform: "rotate(180deg)",
+    },
+});
 //
 // Align action icons created from scratch to match those of z-index actions
 // Note: vertical align icons are flipped so the larger item is always the
@@ -200,6 +212,7 @@ export const TextAlignTopIcon = React.memo(({ theme }) => createIcon(_jsxs("g",
 export const TextAlignBottomIcon = React.memo(({ theme }) => createIcon(_jsxs("g", { strokeWidth: "2", stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("line", { x1: "4", y1: "20", x2: "20", y2: "20" }), _jsx("rect", { x: "9", y: "4", width: "6", height: "12", rx: "2" })] }), tablerIconProps));
 // tabler-icons: layout-align-middle
 export const TextAlignMiddleIcon = React.memo(({ theme }) => createIcon(_jsxs("g", { strokeWidth: "1.5", stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("line", { x1: "4", y1: "12", x2: "9", y2: "12" }), _jsx("line", { x1: "15", y1: "12", x2: "20", y2: "12" }), _jsx("rect", { x: "9", y: "6", width: "6", height: "12", rx: "2" })] }), tablerIconProps));
+export const angleIcon = createIcon(_jsxs("g", { children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M21 19h-18l9 -15" }), _jsx("path", { d: "M20.615 15.171h.015" }), _jsx("path", { d: "M19.515 11.771h.015" }), _jsx("path", { d: "M17.715 8.671h.015" }), _jsx("path", { d: "M15.415 5.971h.015" })] }), tablerIconProps);
 export const publishIcon = createIcon(_jsx("path", { d: "M537.6 226.6c4.1-10.7 6.4-22.4 6.4-34.6 0-53-43-96-96-96-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32c-88.4 0-160 71.6-160 160 0 2.7.1 5.4.2 8.1C40.2 219.8 0 273.2 0 336c0 79.5 64.5 144 144 144h368c70.7 0 128-57.3 128-128 0-61.9-44-113.6-102.4-125.4zM393.4 288H328v112c0 8.8-7.2 16-16 16h-48c-8.8 0-16-7.2-16-16V288h-65.4c-14.3 0-21.4-17.2-11.3-27.3l105.4-105.4c6.2-6.2 16.4-6.2 22.6 0l105.4 105.4c10.1 10.1 2.9 27.3-11.3 27.3z", fill: "currentColor" }), { width: 640, height: 512 });
 export const eraser = createIcon(_jsx("path", { d: "M480 416C497.7 416 512 430.3 512 448C512 465.7 497.7 480 480 480H150.6C133.7 480 117.4 473.3 105.4 461.3L25.37 381.3C.3786 356.3 .3786 315.7 25.37 290.7L258.7 57.37C283.7 32.38 324.3 32.38 349.3 57.37L486.6 194.7C511.6 219.7 511.6 260.3 486.6 285.3L355.9 416H480zM265.4 416L332.7 348.7L195.3 211.3L70.63 336L150.6 416L265.4 416z" }));
 export const handIcon = createIcon(_jsxs("g", { strokeWidth: 1.25, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M8 13v-7.5a1.5 1.5 0 0 1 3 0v6.5" }), _jsx("path", { d: "M11 5.5v-2a1.5 1.5 0 1 1 3 0v8.5" }), _jsx("path", { d: "M14 5.5a1.5 1.5 0 0 1 3 0v6.5" }), _jsx("path", { d: "M17 7.5a1.5 1.5 0 0 1 3 0v8.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7a69.74 69.74 0 0 1 -.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47" })] }), tablerIconProps);
@@ -241,7 +254,10 @@ export const pngIcon = createIcon(_jsxs("g", { strokeWidth: 1.25, children: [_js
 export const magnetIcon = createIcon(_jsxs("g", { strokeWidth: 1.25, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M4 13v-8a2 2 0 0 1 2 -2h1a2 2 0 0 1 2 2v8a2 2 0 0 0 6 0v-8a2 2 0 0 1 2 -2h1a2 2 0 0 1 2 2v8a8 8 0 0 1 -16 0" }), _jsx("path", { d: "M4 8l5 0" }), _jsx("path", { d: "M15 8l4 0" })] }), tablerIconProps);
 export const coffeeIcon = createIcon(_jsxs("g", { strokeWidth: 1.25, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M3 14c.83 .642 2.077 1.017 3.5 1c1.423 .017 2.67 -.358 3.5 -1c.83 -.642 2.077 -1.017 3.5 -1c1.423 -.017 2.67 .358 3.5 1" }), _jsx("path", { d: "M8 3a2.4 2.4 0 0 0 -1 2a2.4 2.4 0 0 0 1 2" }), _jsx("path", { d: "M12 3a2.4 2.4 0 0 0 -1 2a2.4 2.4 0 0 0 1 2" }), _jsx("path", { d: "M3 10h14v5a6 6 0 0 1 -6 6h-2a6 6 0 0 1 -6 -6v-5z" }), _jsx("path", { d: "M16.746 16.726a3 3 0 1 0 .252 -5.555" })] }), tablerIconProps);
 export const DeviceDesktopIcon = createIcon(_jsxs("g", { stroke: "currentColor", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M3 5a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-16a1 1 0 0 1-1-1v-10zM7 20h10M9 16v4M15 16v4" })] }), { ...tablerIconProps, strokeWidth: 1.5 });
-// arrow-bar-to-left
-export const arrowBarToLeftIcon = createIcon(_jsxs("g", { children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M10 12l10 0" }), _jsx("path", { d: "M10 12l4 4" }), _jsx("path", { d: "M10 12l4 -4" }), _jsx("path", { d: "M4 4l0 16" })] }), tablerIconProps);
+// login
+export const loginIcon = createIcon(_jsxs("g", { strokeWidth: 1.5, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M15 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2" }), _jsx("path", { d: "M21 12h-13l3 -3" }), _jsx("path", { d: "M11 15l-3 -3" })] }), tablerIconProps);
 export const youtubeIcon = createIcon(_jsxs("g", { children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M2 8a4 4 0 0 1 4 -4h12a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-12a4 4 0 0 1 -4 -4v-8z" }), _jsx("path", { d: "M10 9l5 3l-5 3z" })] }), tablerIconProps);
 export const gridIcon = createIcon(_jsxs("g", { strokeWidth: 1.5, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M3 6h18" }), _jsx("path", { d: "M3 12h18" }), _jsx("path", { d: "M3 18h18" }), _jsx("path", { d: "M6 3v18" }), _jsx("path", { d: "M12 3v18" }), _jsx("path", { d: "M18 3v18" })] }), tablerIconProps);
+export const lineEditorIcon = createIcon(_jsxs("g", { strokeWidth: 1.5, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M17 3m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z" }), _jsx("path", { d: "M3 17m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z" }), _jsx("path", { d: "M17 5c-6.627 0 -12 5.373 -12 12" })] }), tablerIconProps);
+export const collapseDownIcon = createIcon(_jsxs("g", { children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M6 9l6 6l6 -6" })] }), tablerIconProps);
+export const collapseUpIcon = createIcon(_jsxs("g", { children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M6 15l6 -6l6 6" })] }), tablerIconProps);

package/dist/excalidraw/constants.d.ts

@@ -1,5 +1,5 @@
-import { AppProps } from "./types";
-import { ExcalidrawElement, FontFamilyValues } from "./element/types";
+import type { AppProps } from "./types";
+import type { ExcalidrawElement, FontFamilyValues } from "./element/types";
 export declare const isDarwin: boolean;
 export declare const isWindows: boolean;
 export declare const isAndroid: boolean;
@@ -10,6 +10,7 @@ export declare const isIOS: boolean;
 export declare const isBrave: () => boolean;
 export declare const supportsResizeObserver: boolean;
 export declare const APP_NAME = "Excalidraw";
+export declare const TEXT_AUTOWRAP_THRESHOLD = 36;
 export declare const DRAGGING_THRESHOLD = 10;
 export declare const LINE_CONFIRM_THRESHOLD = 8;
 export declare const ELEMENT_SHIFT_TRANSLATE_AMOUNT = 5;
@@ -279,3 +280,8 @@ export declare const EDITOR_LS_KEYS: {
  * where filename is optional and we can't retrieve name from app state
  */
 export declare const DEFAULT_FILENAME = "Untitled";
+export declare const STATS_PANELS: {
+    readonly generalStats: 1;
+    readonly elementProperties: 2;
+};
+export declare const MIN_WIDTH_OR_HEIGHT = 1;

package/dist/excalidraw/constants.js

@@ -15,6 +15,11 @@ export const isIOS = /iPad|iPhone/.test(navigator.platform) ||
 export const isBrave = () => navigator.brave?.isBrave?.name === "isBrave";
 export const supportsResizeObserver = typeof window !== "undefined" && "ResizeObserver" in window;
 export const APP_NAME = "Excalidraw";
+// distance when creating text before it's considered `autoResize: false`
+// we're using higher threshold so that clicks that end up being drags
+// don't unintentionally create text elements that are wrapped to a few chars
+// (happens a lot with fast clicks with the text tool)
+export const TEXT_AUTOWRAP_THRESHOLD = 36; // px
 export const DRAGGING_THRESHOLD = 10; // px
 export const LINE_CONFIRM_THRESHOLD = 8; // px
 export const ELEMENT_SHIFT_TRANSLATE_AMOUNT = 5;
@@ -226,7 +231,7 @@ export const MAX_DECIMALS_FOR_SVG_EXPORT = 2;
 export const EXPORT_SCALES = [1, 2, 3];
 export const DEFAULT_EXPORT_PADDING = 10; // px
 export const DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT = 1440;
-export const MAX_ALLOWED_FILE_BYTES = 2 * 1024 * 1024;
+export const MAX_ALLOWED_FILE_BYTES = 4 * 1024 * 1024;
 export const SVG_NS = "http://www.w3.org/2000/svg";
 export const ENCRYPTION_KEY_BITS = 128;
 export const VERSIONS = {
@@ -329,3 +334,5 @@ export const EDITOR_LS_KEYS = {
  * where filename is optional and we can't retrieve name from app state
  */
 export const DEFAULT_FILENAME = "Untitled";
+export const STATS_PANELS = { generalStats: 1, elementProperties: 2 };
+export const MIN_WIDTH_OR_HEIGHT = 1;

package/dist/excalidraw/context/ui-appState.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { UIAppState } from "../types";
+import type { UIAppState } from "../types";
 export declare const UIAppStateContext: React.Context<UIAppState>;
 export declare const useUIAppState: () => UIAppState;

package/dist/excalidraw/cursor.d.ts

@@ -1,4 +1,4 @@
-import { AppState } from "./types";
+import type { AppState } from "./types";
 export declare const resetCursor: (interactiveCanvas: HTMLCanvasElement | null) => void;
 export declare const setCursor: (interactiveCanvas: HTMLCanvasElement | null, cursor: string) => void;
 export declare const setEraserCursor: (interactiveCanvas: HTMLCanvasElement | null, theme: AppState["theme"]) => void;

package/dist/excalidraw/data/EditorLocalStorage.d.ts

@@ -1,5 +1,5 @@
-import { EDITOR_LS_KEYS } from "../constants";
-import { JSONValue } from "../types";
+import type { EDITOR_LS_KEYS } from "../constants";
+import type { JSONValue } from "../types";
 export declare class EditorLocalStorage {
     static has(key: typeof EDITOR_LS_KEYS[keyof typeof EDITOR_LS_KEYS]): boolean;
     static get<T extends JSONValue>(key: typeof EDITOR_LS_KEYS[keyof typeof EDITOR_LS_KEYS]): T | null;

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

@@ -1,9 +1,9 @@
 import { IMAGE_MIME_TYPES, MIME_TYPES } from "../constants";
-import { ExcalidrawElement, FileId } from "../element/types";
-import { AppState, DataURL, LibraryItem } from "../types";
-import { ValueOf } from "../utility-types";
-import { FileSystemHandle } from "./filesystem";
-import { ImportedLibraryData } from "./types";
+import type { ExcalidrawElement, FileId } from "../element/types";
+import type { AppState, DataURL, LibraryItem } from "../types";
+import type { ValueOf } from "../utility-types";
+import type { FileSystemHandle } from "./filesystem";
+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 isImageFileHandleType: (type: string | null) => type is "png" | "svg";

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

@@ -1,4 +1,5 @@
-import { FileSystemHandle, supported as nativeFileSystemSupported } from "browser-fs-access";
+import type { FileSystemHandle } from "browser-fs-access";
+import { supported as nativeFileSystemSupported } from "browser-fs-access";
 import { MIME_TYPES } from "../constants";
 type FILE_EXTENSION = Exclude<keyof typeof MIME_TYPES, "binary">;
 export declare const fileOpen: <M extends boolean | undefined = false>(opts: {

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

@@ -1,7 +1,7 @@
-import { ExcalidrawElement, ExcalidrawFrameLikeElement, NonDeletedExcalidrawElement } from "../element/types";
-import { ExportType } from "../scene/types";
-import { AppState, BinaryFiles } from "../types";
-import { FileSystemHandle } from "./filesystem";
+import type { ExcalidrawElement, ExcalidrawFrameLikeElement, NonDeletedExcalidrawElement } from "../element/types";
+import type { ExportType } from "../scene/types";
+import type { AppState, BinaryFiles } from "../types";
+import type { FileSystemHandle } from "./filesystem";
 export { loadFromBlob } from "./blob";
 export { loadFromJSON, saveAsJSON } from "./json";
 export type ExportedElements = readonly NonDeletedExcalidrawElement[] & {

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

@@ -1,6 +1,6 @@
-import { ExcalidrawElement } from "../element/types";
-import { AppState, BinaryFiles, LibraryItems } from "../types";
-import { ImportedDataState, ImportedLibraryData } from "./types";
+import type { ExcalidrawElement } from "../element/types";
+import type { AppState, BinaryFiles, LibraryItems } from "../types";
+import type { 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, name?: string) => Promise<{
     fileHandle: import("browser-fs-access").FileSystemHandle | null;