@excalidraw/excalidraw 0.17.1-d9bbf1e → 0.17.1-e63dd02

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

@@ -1,22 +1,63 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
 import { getDropdownMenuItemClassName, useHandleDropdownMenuItemClick, } from "./common";
 import MenuItemContent from "./DropdownMenuItemContent";
-const DropdownMenuItem = ({ icon, onSelect, children, shortcut, className, selected, ...rest }) => {
-    const handleClick = useHandleDropdownMenuItemClick(rest.onClick, onSelect);
-    return (_jsx("button", { ...rest, onClick: handleClick, type: "button", className: getDropdownMenuItemClassName(className, selected), title: rest.title ?? rest["aria-label"], children: _jsx(MenuItemContent, { icon: icon, shortcut: shortcut, children: children }) }));
+import { useExcalidrawAppState } from "../App";
+import { THEME } from "../../constants";
+const DropdownMenuItem = ({ icon, value, order, children, shortcut, className, hovered, selected, textStyle, onSelect, onClick, ...rest }) => {
+    const handleClick = useHandleDropdownMenuItemClick(onClick, onSelect);
+    const ref = useRef(null);
+    useEffect(() => {
+        if (hovered) {
+            if (order === 0) {
+                // scroll into the first item differently, so it's visible what is above (i.e. group title)
+                ref.current?.scrollIntoView({ block: "end" });
+            }
+            else {
+                ref.current?.scrollIntoView({ block: "nearest" });
+            }
+        }
+    }, [hovered, order]);
+    return (_jsx("button", { ...rest, ref: ref, value: value, onClick: handleClick, className: getDropdownMenuItemClassName(className, selected, hovered), title: rest.title ?? rest["aria-label"], children: _jsx(MenuItemContent, { textStyle: textStyle, icon: icon, shortcut: shortcut, children: children }) }));
 };
 DropdownMenuItem.displayName = "DropdownMenuItem";
-export const DropDownMenuItemBadge = ({ children, }) => {
-    return (_jsx("div", { style: {
-            display: "inline-flex",
-            marginLeft: "auto",
-            padding: "2px 4px",
-            background: "pink",
-            borderRadius: 6,
-            fontSize: 9,
-            color: "black",
-            fontFamily: "Cascadia, monospace",
-        }, children: children }));
+export const DropDownMenuItemBadgeType = {
+    GREEN: "green",
+    RED: "red",
+    BLUE: "blue",
+};
+export const DropDownMenuItemBadge = ({ type = DropDownMenuItemBadgeType.BLUE, children, }) => {
+    const { theme } = useExcalidrawAppState();
+    const style = {
+        display: "inline-flex",
+        marginLeft: "auto",
+        padding: "2px 4px",
+        borderRadius: 6,
+        fontSize: 9,
+        fontFamily: "Cascadia, monospace",
+        border: theme === THEME.LIGHT ? "1.5px solid white" : "none",
+    };
+    switch (type) {
+        case DropDownMenuItemBadgeType.GREEN:
+            Object.assign(style, {
+                backgroundColor: "var(--background-color-badge)",
+                color: "var(--color-badge)",
+            });
+            break;
+        case DropDownMenuItemBadgeType.RED:
+            Object.assign(style, {
+                backgroundColor: "pink",
+                color: "darkred",
+            });
+            break;
+        case DropDownMenuItemBadgeType.BLUE:
+        default:
+            Object.assign(style, {
+                background: "var(--color-promo)",
+                color: "var(--color-surface-lowest)",
+            });
+    }
+    return (_jsx("div", { className: "DropDownMenuItemBadge", style: style, children: children }));
 };
 DropDownMenuItemBadge.displayName = "DropdownMenuItemBadge";
 DropdownMenuItem.Badge = DropDownMenuItemBadge;

package/dist/excalidraw/components/dropdownMenu/DropdownMenuItemContent.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
-declare const MenuItemContent: ({ icon, shortcut, children, }: {
+declare const MenuItemContent: ({ textStyle, icon, shortcut, children, }: {
     icon?: JSX.Element | undefined;
     shortcut?: string | undefined;
+    textStyle?: import("react").CSSProperties | undefined;
     children: React.ReactNode;
 }) => JSX.Element;
 export default MenuItemContent;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useDevice } from "../App";
-const MenuItemContent = ({ icon, shortcut, children, }) => {
+const MenuItemContent = ({ textStyle, icon, shortcut, children, }) => {
     const device = useDevice();
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "dropdown-menu-item__icon", children: icon }), _jsx("div", { className: "dropdown-menu-item__text", children: children }), shortcut && !device.editor.isMobile && (_jsx("div", { className: "dropdown-menu-item__shortcut", children: shortcut }))] }));
+    return (_jsxs(_Fragment, { children: [icon && _jsx("div", { className: "dropdown-menu-item__icon", children: icon }), _jsx("div", { style: textStyle, className: "dropdown-menu-item__text", children: children }), shortcut && !device.editor.isMobile && (_jsx("div", { className: "dropdown-menu-item__shortcut", children: shortcut }))] }));
 };
 export default MenuItemContent;

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

@@ -2,5 +2,5 @@ import React from "react";
 export declare const DropdownMenuContentPropsContext: React.Context<{
     onSelect?: ((event: Event) => void) | undefined;
 }>;
-export declare const getDropdownMenuItemClassName: (className?: string, selected?: boolean) => string;
+export declare const getDropdownMenuItemClassName: (className?: string, selected?: boolean, hovered?: boolean) => string;
 export declare const useHandleDropdownMenuItemClick: (origOnClick: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement> | undefined, onSelect: ((event: Event) => void) | undefined) => (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement, MouseEvent>) => void;

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

@@ -2,8 +2,9 @@ import React, { useContext } from "react";
 import { EVENT } from "../../constants";
 import { composeEventHandlers } from "../../utils";
 export const DropdownMenuContentPropsContext = React.createContext({});
-export const getDropdownMenuItemClassName = (className = "", selected = false) => {
-    return `dropdown-menu-item dropdown-menu-item-base ${className} ${selected ? "dropdown-menu-item--selected" : ""}`.trim();
+export const getDropdownMenuItemClassName = (className = "", selected = false, hovered = false) => {
+    return `dropdown-menu-item dropdown-menu-item-base ${className}
+  ${selected ? "dropdown-menu-item--selected" : ""} ${hovered ? "dropdown-menu-item--hovered" : ""}`.trim();
 };
 export const useHandleDropdownMenuItemClick = (origOnClick, onSelect) => {
     const DropdownMenuContentProps = useContext(DropdownMenuContentPropsContext);

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;
@@ -140,6 +140,7 @@ export declare const FontSizeMediumIcon: JSX.Element;
 export declare const FontSizeLargeIcon: JSX.Element;
 export declare const FontSizeExtraLargeIcon: JSX.Element;
 export declare const fontSizeIcon: JSX.Element;
+export declare const FontFamilyHeadingIcon: JSX.Element;
 export declare const FontFamilyNormalIcon: JSX.Element;
 export declare const FontFamilyCodeIcon: JSX.Element;
 export declare const TextAlignLeftIcon: JSX.Element;
@@ -154,6 +155,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 +197,13 @@ 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 sharpArrowIcon: JSX.Element;
+export declare const elbowArrowIcon: JSX.Element;
+export declare const roundArrowIcon: 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
@@ -189,6 +201,7 @@ export const FontSizeMediumIcon = createIcon(_jsxs(_Fragment, { children: [_jsx(
 export const FontSizeLargeIcon = createIcon(_jsxs(_Fragment, { children: [_jsx("g", { clipPath: "url(#a)", children: _jsx("path", { d: "M5.833 3.333v13.334h8.334", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
 export const FontSizeExtraLargeIcon = createIcon(_jsx(_Fragment, { children: _jsx("path", { d: "m1.667 3.333 6.666 13.334M8.333 3.333 1.667 16.667M11.667 3.333v13.334h6.666", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) }), modifiedTablerIconProps);
 export const fontSizeIcon = createIcon(_jsxs("g", { strokeWidth: 1.25, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M3 7v-2h13v2" }), _jsx("path", { d: "M10 5v14" }), _jsx("path", { d: "M12 19h-4" }), _jsx("path", { d: "M15 13v-1h6v1" }), _jsx("path", { d: "M18 12v7" }), _jsx("path", { d: "M17 19h2" })] }), tablerIconProps);
+export const FontFamilyHeadingIcon = createIcon(_jsx(_Fragment, { children: _jsxs("g", { stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M7 12h10" }), _jsx("path", { d: "M7 5v14" }), _jsx("path", { d: "M17 5v14" }), _jsx("path", { d: "M15 19h4" }), _jsx("path", { d: "M15 5h4" }), _jsx("path", { d: "M5 19h4" }), _jsx("path", { d: "M5 5h4" })] }) }), tablerIconProps);
 export const FontFamilyNormalIcon = createIcon(_jsx(_Fragment, { children: _jsx("g", { stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M5.833 16.667v-10a3.333 3.333 0 0 1 3.334-3.334h1.666a3.333 3.333 0 0 1 3.334 3.334v10M5.833 10.833h8.334" }) }) }), modifiedTablerIconProps);
 export const FontFamilyCodeIcon = createIcon(_jsxs(_Fragment, { children: [_jsx("g", { clipPath: "url(#a)", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M5.833 6.667 2.5 10l3.333 3.333M14.167 6.667 17.5 10l-3.333 3.333M11.667 3.333 8.333 16.667" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
 export const TextAlignLeftIcon = createIcon(_jsxs("g", { stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("line", { x1: "4", y1: "8", x2: "20", y2: "8" }), _jsx("line", { x1: "4", y1: "12", x2: "12", y2: "12" }), _jsx("line", { x1: "4", y1: "16", x2: "16", y2: "16" })] }), tablerIconProps);
@@ -200,6 +213,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 +255,16 @@ 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);
+// arrow-up-right (modified)
+export const sharpArrowIcon = createIcon(_jsxs("g", { children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M6 18l12 -12" }), _jsx("path", { d: "M18 10v-4h-4" })] }), tablerIconProps);
+// arrow-guide (modified)
+export const elbowArrowIcon = createIcon(_jsxs("g", { children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M4,19L10,19C11.097,19 12,18.097 12,17L12,9C12,7.903 12.903,7 14,7L21,7" }), _jsx("path", { d: "M18 4l3 3l-3 3" })] }), tablerIconProps);
+// arrow-ramp-right-2 (heavily modified)
+export const roundArrowIcon = createIcon(_jsxs("g", { children: [_jsx("path", { d: "M16,12L20,9L16,6" }), _jsx("path", { d: "M6 20c0 -6.075 4.925 -11 11 -11h3" })] }), 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/components/main-menu/MainMenu.d.ts

@@ -19,17 +19,26 @@ declare const MainMenu: React.FC<{
         displayName: string;
     };
     Item: {
-        ({ icon, onSelect, children, shortcut, className, selected, ...rest }: {
+        ({ icon, value, order, children, shortcut, className, hovered, selected, textStyle, onSelect, onClick, ...rest }: {
             icon?: JSX.Element | undefined;
-            onSelect: (event: Event) => void;
+            value?: string | number | undefined;
+            order?: number | undefined;
+            onSelect?: ((event: Event) => void) | undefined;
             children: React.ReactNode;
             shortcut?: string | undefined;
+            hovered?: boolean | undefined;
             selected?: boolean | undefined;
+            textStyle?: React.CSSProperties | undefined;
             className?: string | undefined;
         } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect">): JSX.Element;
         displayName: string;
         Badge: {
-            ({ children, }: {
+            ({ type, children, }: {
+                type?: import("../../utility-types").ValueOf<{
+                    readonly GREEN: "green";
+                    readonly RED: "red";
+                    readonly BLUE: "blue";
+                }> | undefined;
                 children: React.ReactNode;
             }): JSX.Element;
             displayName: string;

package/dist/excalidraw/components/welcome-screen/WelcomeScreen.Center.js

@@ -26,11 +26,11 @@ const Center = ({ children }) => {
 };
 Center.displayName = "Center";
 const Logo = ({ children }) => {
-    return (_jsx("div", { className: "welcome-screen-center__logo virgil welcome-screen-decor", children: children || _jsx(ExcalidrawLogo, { withText: true }) }));
+    return (_jsx("div", { className: "welcome-screen-center__logo excalifont welcome-screen-decor", children: children || _jsx(ExcalidrawLogo, { withText: true }) }));
 };
 Logo.displayName = "Logo";
 const Heading = ({ children }) => {
-    return (_jsx("div", { className: "welcome-screen-center__heading welcome-screen-decor virgil", children: children }));
+    return (_jsx("div", { className: "welcome-screen-center__heading welcome-screen-decor excalifont", children: children }));
 };
 Heading.displayName = "Heading";
 const Menu = ({ children }) => {

package/dist/excalidraw/components/welcome-screen/WelcomeScreen.Hints.js

@@ -4,17 +4,17 @@ import { useTunnels } from "../../context/tunnels";
 import { WelcomeScreenHelpArrow, WelcomeScreenMenuArrow, WelcomeScreenTopToolbarArrow, } from "../icons";
 const MenuHint = ({ children }) => {
     const { WelcomeScreenMenuHintTunnel } = useTunnels();
-    return (_jsx(WelcomeScreenMenuHintTunnel.In, { children: _jsxs("div", { className: "virgil welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--menu", children: [WelcomeScreenMenuArrow, _jsx("div", { className: "welcome-screen-decor-hint__label", children: children || t("welcomeScreen.defaults.menuHint") })] }) }));
+    return (_jsx(WelcomeScreenMenuHintTunnel.In, { children: _jsxs("div", { className: "excalifont welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--menu", children: [WelcomeScreenMenuArrow, _jsx("div", { className: "welcome-screen-decor-hint__label", children: children || t("welcomeScreen.defaults.menuHint") })] }) }));
 };
 MenuHint.displayName = "MenuHint";
 const ToolbarHint = ({ children }) => {
     const { WelcomeScreenToolbarHintTunnel } = useTunnels();
-    return (_jsx(WelcomeScreenToolbarHintTunnel.In, { children: _jsxs("div", { className: "virgil welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--toolbar", children: [_jsx("div", { className: "welcome-screen-decor-hint__label", children: children || t("welcomeScreen.defaults.toolbarHint") }), WelcomeScreenTopToolbarArrow] }) }));
+    return (_jsx(WelcomeScreenToolbarHintTunnel.In, { children: _jsxs("div", { className: "excalifont welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--toolbar", children: [_jsx("div", { className: "welcome-screen-decor-hint__label", children: children || t("welcomeScreen.defaults.toolbarHint") }), WelcomeScreenTopToolbarArrow] }) }));
 };
 ToolbarHint.displayName = "ToolbarHint";
 const HelpHint = ({ children }) => {
     const { WelcomeScreenHelpHintTunnel } = useTunnels();
-    return (_jsx(WelcomeScreenHelpHintTunnel.In, { children: _jsxs("div", { className: "virgil welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--help", children: [_jsx("div", { children: children || t("welcomeScreen.defaults.helpHint") }), WelcomeScreenHelpArrow] }) }));
+    return (_jsx(WelcomeScreenHelpHintTunnel.In, { children: _jsxs("div", { className: "excalifont welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--help", children: [_jsx("div", { children: children || t("welcomeScreen.defaults.helpHint") }), WelcomeScreenHelpArrow] }) }));
 };
 HelpHint.displayName = "HelpHint";
 export { HelpHint, MenuHint, ToolbarHint };

package/dist/excalidraw/constants.d.ts

@@ -1,5 +1,5 @@
-import { AppProps } from "./types";
-import { ExcalidrawElement, FontFamilyValues } from "./element/types";
+import type { AppProps, AppState } 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;
@@ -85,11 +86,23 @@ export declare const ENV: {
 export declare const CLASSES: {
     SHAPE_ACTIONS_MENU: string;
 };
+/**
+ * // TODO: shouldn't be really `const`, likely neither have integers as values, due to value for the custom fonts, which should likely be some hash.
+ *
+ * Let's think this through and consider:
+ * - https://developer.mozilla.org/en-US/docs/Web/CSS/generic-family
+ * - https://drafts.csswg.org/css-fonts-4/#font-family-prop
+ * - https://learn.microsoft.com/en-us/typography/opentype/spec/ibmfc
+ */
 export declare const FONT_FAMILY: {
     Virgil: number;
     Helvetica: number;
     Cascadia: number;
-    Assistant: number;
+    Excalifont: number;
+    Nunito: number;
+    "Lilita One": number;
+    "Comic Shanns": number;
+    "Liberation Sans": number;
 };
 export declare const THEME: {
     readonly LIGHT: "light";
@@ -279,3 +292,11 @@ 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;
+export declare const ARROW_TYPE: {
+    [T in AppState["currentItemArrowType"]]: T;
+};

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;
@@ -94,12 +99,24 @@ export const ENV = {
 export const CLASSES = {
     SHAPE_ACTIONS_MENU: "App-menu__left",
 };
-// 1-based in case we ever do `if(element.fontFamily)`
+/**
+ * // TODO: shouldn't be really `const`, likely neither have integers as values, due to value for the custom fonts, which should likely be some hash.
+ *
+ * Let's think this through and consider:
+ * - https://developer.mozilla.org/en-US/docs/Web/CSS/generic-family
+ * - https://drafts.csswg.org/css-fonts-4/#font-family-prop
+ * - https://learn.microsoft.com/en-us/typography/opentype/spec/ibmfc
+ */
 export const FONT_FAMILY = {
     Virgil: 1,
     Helvetica: 2,
     Cascadia: 3,
-    Assistant: 4,
+    // leave 4 unused as it was historically used for Assistant (which we don't use anymore) or custom font (Obsidian)
+    Excalifont: 5,
+    Nunito: 6,
+    "Lilita One": 7,
+    "Comic Shanns": 8,
+    "Liberation Sans": 9,
 };
 export const THEME = {
     LIGHT: "light",
@@ -123,7 +140,7 @@ export const FRAME_STYLE = {
 export const WINDOWS_EMOJI_FALLBACK_FONT = "Segoe UI Emoji";
 export const MIN_FONT_SIZE = 1;
 export const DEFAULT_FONT_SIZE = 20;
-export const DEFAULT_FONT_FAMILY = FONT_FAMILY.Virgil;
+export const DEFAULT_FONT_FAMILY = FONT_FAMILY.Excalifont;
 export const DEFAULT_TEXT_ALIGN = "left";
 export const DEFAULT_VERTICAL_ALIGN = "top";
 export const DEFAULT_VERSION = "{version}";
@@ -226,7 +243,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 +346,10 @@ 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;
+export const ARROW_TYPE = {
+    sharp: "sharp",
+    round: "round",
+    elbow: "elbow",
+};

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;

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

@@ -1,7 +1,7 @@
-import { LibraryItems, ExcalidrawImperativeAPI, LibraryItemsSource, LibraryItems_anyVersion } from "../types";
+import type { LibraryItems, ExcalidrawImperativeAPI, LibraryItemsSource, LibraryItems_anyVersion } from "../types";
 import type App from "../components/App";
-import { ExcalidrawElement } from "../element/types";
-import { MaybePromise } from "../utility-types";
+import type { ExcalidrawElement } from "../element/types";
+import type { MaybePromise } from "../utility-types";
 export type LibraryPersistedData = {
     libraryItems: LibraryItems;
 };

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

@@ -1,6 +1,6 @@
-import { Theme } from "../element/types";
-import { DataURL } from "../types";
-import { OpenAIOutput } from "./ai/types";
+import type { Theme } from "../element/types";
+import type { DataURL } from "../types";
+import type { OpenAIOutput } from "./ai/types";
 export type MagicCacheData = {
     status: "pending";
 } | {

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

@@ -1,6 +1,6 @@
-import { OrderedExcalidrawElement } from "../element/types";
-import { AppState } from "../types";
-import { MakeBrand } from "../utility-types";
+import type { OrderedExcalidrawElement } from "../element/types";
+import type { AppState } from "../types";
+import type { MakeBrand } from "../utility-types";
 export type ReconciledExcalidrawElement = OrderedExcalidrawElement & MakeBrand<"ReconciledElement">;
 export type RemoteExcalidrawElement = OrderedExcalidrawElement & MakeBrand<"RemoteExcalidrawElement">;
 export declare const reconcileElements: (localElements: readonly OrderedExcalidrawElement[], remoteElements: readonly RemoteExcalidrawElement[], localAppState: AppState) => ReconciledExcalidrawElement[];

package/dist/excalidraw/data/reconcile.js

@@ -1,4 +1,5 @@
-import { orderByFractionalIndex, syncInvalidIndices } from "../fractionalIndex";
+import { ENV } from "../constants";
+import { orderByFractionalIndex, syncInvalidIndices, validateFractionalIndices, } from "../fractionalIndex";
 import { arrayToMap } from "../utils";
 const shouldDiscardRemoteElement = (localAppState, local, remote) => {
     if (local &&
@@ -43,6 +44,22 @@ export const reconcileElements = (localElements, remoteElements, localAppState)
         }
     }
     const orderedElements = orderByFractionalIndex(reconciledElements);
+    if (import.meta.env.DEV ||
+        import.meta.env.MODE === ENV.TEST ||
+        window?.DEBUG_FRACTIONAL_INDICES) {
+        const elements = syncInvalidIndices(
+        // create new instances due to the mutation
+        orderedElements.map((x) => ({ ...x })));
+        validateFractionalIndices(elements, {
+            // throw in dev & test only, to remain functional on `DEBUG_FRACTIONAL_INDICES`
+            shouldThrow: import.meta.env.DEV || import.meta.env.MODE === ENV.TEST,
+            includeBoundTextValidation: true,
+            reconciliationContext: {
+                localElements,
+                remoteElements,
+            },
+        });
+    }
     // de-duplicate indices
     syncInvalidIndices(orderedElements);
     return orderedElements;