@excalidraw/excalidraw 0.17.1-7500-ac247a0 → 0.17.1-b7babe5

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

@@ -3,15 +3,35 @@ import { Island } from "../Island";
 import { useDevice } from "../App";
 import clsx from "clsx";
 import Stack from "../Stack";
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
 import { DropdownMenuContentPropsContext } from "./common";
 import { useOutsideClick } from "../../hooks/useOutsideClick";
+import { KEYS } from "../../keys";
+import { EVENT } from "../../constants";
+import { useStable } from "../../hooks/useStable";
 const MenuContent = ({ children, onClickOutside, className = "", onSelect, style, }) => {
     const device = useDevice();
     const menuRef = useRef(null);
+    const callbacksRef = useStable({ onClickOutside });
     useOutsideClick(menuRef, () => {
-        onClickOutside?.();
+        callbacksRef.onClickOutside?.();
     });
+    useEffect(() => {
+        const onKeyDown = (event) => {
+            if (event.key === KEYS.ESCAPE) {
+                event.stopImmediatePropagation();
+                callbacksRef.onClickOutside?.();
+            }
+        };
+        document.addEventListener(EVENT.KEYDOWN, onKeyDown, {
+            // so that we can stop propagation of the event before it reaches
+            // event handlers that were bound before this one
+            capture: true,
+        });
+        return () => {
+            document.removeEventListener(EVENT.KEYDOWN, onKeyDown);
+        };
+    }, [callbacksRef]);
     const classNames = clsx(`dropdown-menu ${className}`, {
         "dropdown-menu--mobile": device.editor.isMobile,
     }).trim();

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { AppState, ExcalidrawProps } from "../../types";
+import { ElementsMap, ExcalidrawEmbeddableElement, NonDeletedExcalidrawElement } from "../../element/types";
+import "./Hyperlink.scss";
+export declare const Hyperlink: ({ element, elementsMap, setAppState, onLinkOpen, setToast, updateEmbedValidationStatus, }: {
+    element: NonDeletedExcalidrawElement;
+    elementsMap: ElementsMap;
+    setAppState: React.Component<any, AppState>["setState"];
+    onLinkOpen: ExcalidrawProps["onLinkOpen"];
+    setToast: (toast: {
+        message: string;
+        closable?: boolean;
+        duration?: number;
+    } | null) => void;
+    updateEmbedValidationStatus: (element: ExcalidrawEmbeddableElement, status: boolean) => void;
+}) => JSX.Element | null;
+export declare const getContextMenuLabel: (elements: readonly NonDeletedExcalidrawElement[], appState: AppState) => "labels.link.editEmbed" | "labels.link.edit" | "labels.link.createEmbed" | "labels.link.create";
+export declare const showHyperlinkTooltip: (element: NonDeletedExcalidrawElement, appState: AppState, elementsMap: ElementsMap) => void;
+export declare const hideHyperlinkToolip: () => void;

package/dist/excalidraw/{element → components/hyperlink}/Hyperlink.js

@@ -1,37 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getShortcutKey, sceneCoordsToViewportCoords, viewportCoordsToSceneCoords, wrapEvent, } from "../utils";
-import { getEmbedLink, embeddableURLValidator } from "./embeddable";
-import { mutateElement } from "./mutateElement";
-import { register } from "../actions/register";
-import { ToolButton } from "../components/ToolButton";
-import { FreedrawIcon, LinkIcon, TrashIcon } from "../components/icons";
-import { t } from "../i18n";
+import { sceneCoordsToViewportCoords, viewportCoordsToSceneCoords, wrapEvent, } from "../../utils";
+import { getEmbedLink, embeddableURLValidator } from "../../element/embeddable";
+import { mutateElement } from "../../element/mutateElement";
+import { ToolButton } from "../ToolButton";
+import { FreedrawIcon, TrashIcon } from "../icons";
+import { t } from "../../i18n";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState, } from "react";
 import clsx from "clsx";
-import { KEYS } from "../keys";
-import { DEFAULT_LINK_SIZE } from "../renderer/renderElement";
-import { rotate } from "../math";
-import { EVENT, HYPERLINK_TOOLTIP_DELAY, MIME_TYPES } from "../constants";
-import { getTooltipDiv, updateTooltipPosition } from "../components/Tooltip";
-import { getSelectedElements } from "../scene";
-import { isPointHittingElementBoundingBox } from "./collision";
-import { getElementAbsoluteCoords } from ".";
-import { isLocalLink, normalizeLink } from "../data/url";
+import { KEYS } from "../../keys";
+import { EVENT, HYPERLINK_TOOLTIP_DELAY } from "../../constants";
+import { getElementAbsoluteCoords } from "../../element/bounds";
+import { getTooltipDiv, updateTooltipPosition } from "../Tooltip";
+import { getSelectedElements } from "../../scene";
+import { isPointHittingElementBoundingBox } from "../../element/collision";
+import { isLocalLink, normalizeLink } from "../../data/url";
 import "./Hyperlink.scss";
-import { trackEvent } from "../analytics";
-import { useAppProps, useExcalidrawAppState } from "../components/App";
-import { isEmbeddableElement } from "./typeChecks";
-import { ShapeCache } from "../scene/ShapeCache";
+import { trackEvent } from "../../analytics";
+import { useAppProps, useExcalidrawAppState } from "../App";
+import { isEmbeddableElement } from "../../element/typeChecks";
+import { getLinkHandleFromCoords } from "./helpers";
 const CONTAINER_WIDTH = 320;
 const SPACE_BOTTOM = 85;
 const CONTAINER_PADDING = 5;
 const CONTAINER_HEIGHT = 42;
 const AUTO_HIDE_TIMEOUT = 500;
-export const EXTERNAL_LINK_IMG = document.createElement("img");
-EXTERNAL_LINK_IMG.src = `data:${MIME_TYPES.svg}, ${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#1971c2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>`)}`;
 let IS_HYPERLINK_TOOLTIP_VISIBLE = false;
 const embeddableLinkCache = new Map();
-export const Hyperlink = ({ element, setAppState, onLinkOpen, setToast, }) => {
+export const Hyperlink = ({ element, elementsMap, setAppState, onLinkOpen, setToast, updateEmbedValidationStatus, }) => {
     const appState = useExcalidrawAppState();
     const appProps = useAppProps();
     const linkVal = element.link || "";
@@ -52,9 +47,9 @@ export const Hyperlink = ({ element, setAppState, onLinkOpen, setToast, }) => {
             }
             if (!link) {
                 mutateElement(element, {
-                    validated: false,
                     link: null,
                 });
+                updateEmbedValidationStatus(element, false);
                 return;
             }
             if (!embeddableURLValidator(link, appProps.validateEmbeddable)) {
@@ -63,16 +58,18 @@ export const Hyperlink = ({ element, setAppState, onLinkOpen, setToast, }) => {
                 }
                 element.link && embeddableLinkCache.set(element.id, element.link);
                 mutateElement(element, {
-                    validated: false,
                     link,
                 });
-                ShapeCache.delete(element);
+                updateEmbedValidationStatus(element, false);
             }
             else {
                 const { width, height } = element;
                 const embedLink = getEmbedLink(link);
-                if (embedLink?.warning) {
-                    setToast({ message: embedLink.warning, closable: true });
+                if (embedLink?.error instanceof URIError) {
+                    setToast({
+                        message: t("toast.unrecognizedLinkFormat"),
+                        closable: true,
+                    });
                 }
                 const ar = embedLink
                     ? embedLink.intrinsicSize.w / embedLink.intrinsicSize.h
@@ -93,10 +90,9 @@ export const Hyperlink = ({ element, setAppState, onLinkOpen, setToast, }) => {
                                 : height,
                         }
                         : {}),
-                    validated: true,
                     link,
                 });
-                ShapeCache.delete(element);
+                updateEmbedValidationStatus(element, true);
                 if (embeddableLinkCache.has(element.id)) {
                     embeddableLinkCache.delete(element.id);
                 }
@@ -111,6 +107,7 @@ export const Hyperlink = ({ element, setAppState, onLinkOpen, setToast, }) => {
         appProps.validateEmbeddable,
         appState.activeEmbeddable,
         setAppState,
+        updateEmbedValidationStatus,
     ]);
     useLayoutEffect(() => {
         return () => {
@@ -126,7 +123,7 @@ export const Hyperlink = ({ element, setAppState, onLinkOpen, setToast, }) => {
             if (timeoutId) {
                 clearTimeout(timeoutId);
             }
-            const shouldHide = shouldHideLinkPopup(element, appState, [
+            const shouldHide = shouldHideLinkPopup(element, elementsMap, appState, [
                 event.clientX,
                 event.clientY,
             ]);
@@ -143,7 +140,7 @@ export const Hyperlink = ({ element, setAppState, onLinkOpen, setToast, }) => {
                 clearTimeout(timeoutId);
             }
         };
-    }, [appState, element, isEditing, setAppState]);
+    }, [appState, element, isEditing, setAppState, elementsMap]);
     const handleRemove = useCallback(() => {
         trackEvent("hyperlink", "delete");
         mutateElement(element, { link: null });
@@ -156,7 +153,7 @@ export const Hyperlink = ({ element, setAppState, onLinkOpen, setToast, }) => {
         trackEvent("hyperlink", "edit", "popup-ui");
         setAppState({ showHyperlinkPopup: "editor" });
     };
-    const { x, y } = getCoordsForPopover(element, appState);
+    const { x, y } = getCoordsForPopover(element, appState, elementsMap);
     if (appState.contextMenu ||
         appState.draggingElement ||
         appState.resizingElement ||
@@ -197,43 +194,13 @@ export const Hyperlink = ({ element, setAppState, onLinkOpen, setToast, }) => {
                     }
                 }, rel: "noopener noreferrer", children: element.link })) : (_jsx("div", { className: "excalidraw-hyperlinkContainer-link", children: t("labels.link.empty") })), _jsxs("div", { className: "excalidraw-hyperlinkContainer__buttons", children: [!isEditing && (_jsx(ToolButton, { type: "button", title: t("buttons.edit"), "aria-label": t("buttons.edit"), label: t("buttons.edit"), onClick: onEdit, className: "excalidraw-hyperlinkContainer--edit", icon: FreedrawIcon })), linkVal && !isEmbeddableElement(element) && (_jsx(ToolButton, { type: "button", title: t("buttons.remove"), "aria-label": t("buttons.remove"), label: t("buttons.remove"), onClick: handleRemove, className: "excalidraw-hyperlinkContainer--remove", icon: TrashIcon }))] })] }));
 };
-const getCoordsForPopover = (element, appState) => {
-    const [x1, y1] = getElementAbsoluteCoords(element);
+const getCoordsForPopover = (element, appState, elementsMap) => {
+    const [x1, y1] = getElementAbsoluteCoords(element, elementsMap);
     const { x: viewportX, y: viewportY } = sceneCoordsToViewportCoords({ sceneX: x1 + element.width / 2, sceneY: y1 }, appState);
     const x = viewportX - appState.offsetLeft - CONTAINER_WIDTH / 2;
     const y = viewportY - appState.offsetTop - SPACE_BOTTOM;
     return { x, y };
 };
-export const actionLink = register({
-    name: "hyperlink",
-    perform: (elements, appState) => {
-        if (appState.showHyperlinkPopup === "editor") {
-            return false;
-        }
-        return {
-            elements,
-            appState: {
-                ...appState,
-                showHyperlinkPopup: "editor",
-                openMenu: null,
-            },
-            commitToHistory: true,
-        };
-    },
-    trackEvent: { category: "hyperlink", action: "click" },
-    keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.K,
-    contextItemLabel: (elements, appState) => getContextMenuLabel(elements, appState),
-    predicate: (elements, appState) => {
-        const selectedElements = getSelectedElements(elements, appState);
-        return selectedElements.length === 1;
-    },
-    PanelComponent: ({ elements, appState, updateData }) => {
-        const selectedElements = getSelectedElements(elements, appState);
-        return (_jsx(ToolButton, { type: "button", icon: LinkIcon, "aria-label": t(getContextMenuLabel(elements, appState)), title: `${isEmbeddableElement(elements[0])
-                ? t("labels.link.labelEmbed")
-                : t("labels.link.label")} - ${getShortcutKey("CtrlOrCmd+K")}`, onClick: () => updateData(null), selected: selectedElements.length === 1 && !!selectedElements[0].link }));
-    },
-});
 export const getContextMenuLabel = (elements, appState) => {
     const selectedElements = getSelectedElements(elements, appState);
     const label = selectedElements[0].link
@@ -245,56 +212,14 @@ export const getContextMenuLabel = (elements, appState) => {
             : "labels.link.create";
     return label;
 };
-export const getLinkHandleFromCoords = ([x1, y1, x2, y2], angle, appState) => {
-    const size = DEFAULT_LINK_SIZE;
-    const linkWidth = size / appState.zoom.value;
-    const linkHeight = size / appState.zoom.value;
-    const linkMarginY = size / appState.zoom.value;
-    const centerX = (x1 + x2) / 2;
-    const centerY = (y1 + y2) / 2;
-    const centeringOffset = (size - 8) / (2 * appState.zoom.value);
-    const dashedLineMargin = 4 / appState.zoom.value;
-    // Same as `ne` resize handle
-    const x = x2 + dashedLineMargin - centeringOffset;
-    const y = y1 - dashedLineMargin - linkMarginY + centeringOffset;
-    const [rotatedX, rotatedY] = rotate(x + linkWidth / 2, y + linkHeight / 2, centerX, centerY, angle);
-    return [
-        rotatedX - linkWidth / 2,
-        rotatedY - linkHeight / 2,
-        linkWidth,
-        linkHeight,
-    ];
-};
-export const isPointHittingLinkIcon = (element, appState, [x, y]) => {
-    const threshold = 4 / appState.zoom.value;
-    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
-    const [linkX, linkY, linkWidth, linkHeight] = getLinkHandleFromCoords([x1, y1, x2, y2], element.angle, appState);
-    const hitLink = x > linkX - threshold &&
-        x < linkX + threshold + linkWidth &&
-        y > linkY - threshold &&
-        y < linkY + linkHeight + threshold;
-    return hitLink;
-};
-export const isPointHittingLink = (element, appState, [x, y], isMobile) => {
-    if (!element.link || appState.selectedElementIds[element.id]) {
-        return false;
-    }
-    const threshold = 4 / appState.zoom.value;
-    if (!isMobile &&
-        appState.viewModeEnabled &&
-        isPointHittingElementBoundingBox(element, [x, y], threshold, null)) {
-        return true;
-    }
-    return isPointHittingLinkIcon(element, appState, [x, y]);
-};
 let HYPERLINK_TOOLTIP_TIMEOUT_ID = null;
-export const showHyperlinkTooltip = (element, appState) => {
+export const showHyperlinkTooltip = (element, appState, elementsMap) => {
     if (HYPERLINK_TOOLTIP_TIMEOUT_ID) {
         clearTimeout(HYPERLINK_TOOLTIP_TIMEOUT_ID);
     }
-    HYPERLINK_TOOLTIP_TIMEOUT_ID = window.setTimeout(() => renderTooltip(element, appState), HYPERLINK_TOOLTIP_DELAY);
+    HYPERLINK_TOOLTIP_TIMEOUT_ID = window.setTimeout(() => renderTooltip(element, appState, elementsMap), HYPERLINK_TOOLTIP_DELAY);
 };
-const renderTooltip = (element, appState) => {
+const renderTooltip = (element, appState, elementsMap) => {
     if (!element.link) {
         return;
     }
@@ -302,7 +227,7 @@ const renderTooltip = (element, appState) => {
     tooltipDiv.classList.add("excalidraw-tooltip--visible");
     tooltipDiv.style.maxWidth = "20rem";
     tooltipDiv.textContent = element.link;
-    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
     const [linkX, linkY, linkWidth, linkHeight] = getLinkHandleFromCoords([x1, y1, x2, y2], element.angle, appState);
     const linkViewportCoords = sceneCoordsToViewportCoords({ sceneX: linkX, sceneY: linkY }, appState);
     updateTooltipPosition(tooltipDiv, {
@@ -323,14 +248,14 @@ export const hideHyperlinkToolip = () => {
         getTooltipDiv().classList.remove("excalidraw-tooltip--visible");
     }
 };
-export const shouldHideLinkPopup = (element, appState, [clientX, clientY]) => {
+const shouldHideLinkPopup = (element, elementsMap, appState, [clientX, clientY]) => {
     const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords({ clientX, clientY }, appState);
     const threshold = 15 / appState.zoom.value;
     // hitbox to prevent hiding when hovered in element bounding box
-    if (isPointHittingElementBoundingBox(element, [sceneX, sceneY], threshold, null)) {
+    if (isPointHittingElementBoundingBox(element, elementsMap, [sceneX, sceneY], threshold, null)) {
         return false;
     }
-    const [x1, y1, x2] = getElementAbsoluteCoords(element);
+    const [x1, y1, x2] = getElementAbsoluteCoords(element, elementsMap);
     // hit box to prevent hiding when hovered in the vertical area between element and popover
     if (sceneX >= x1 &&
         sceneX <= x2 &&
@@ -339,7 +264,7 @@ export const shouldHideLinkPopup = (element, appState, [clientX, clientY]) => {
         return false;
     }
     // hit box to prevent hiding when hovered around popover within threshold
-    const { x: popoverX, y: popoverY } = getCoordsForPopover(element, appState);
+    const { x: popoverX, y: popoverY } = getCoordsForPopover(element, appState, elementsMap);
     if (clientX >= popoverX - threshold &&
         clientX <= popoverX + CONTAINER_WIDTH + CONTAINER_PADDING * 2 + threshold &&
         clientY >= popoverY - threshold &&

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

@@ -0,0 +1,7 @@
+import { Bounds } from "../../element/bounds";
+import { ElementsMap, NonDeletedExcalidrawElement } from "../../element/types";
+import { 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;
+export declare const isPointHittingLink: (element: NonDeletedExcalidrawElement, elementsMap: ElementsMap, appState: AppState, [x, y]: readonly [number, number], isMobile: boolean) => boolean;

package/dist/excalidraw/components/hyperlink/helpers.js

@@ -0,0 +1,49 @@
+import { MIME_TYPES } from "../../constants";
+import { getElementAbsoluteCoords } from "../../element/bounds";
+import { isPointHittingElementBoundingBox } from "../../element/collision";
+import { rotate } from "../../math";
+import { DEFAULT_LINK_SIZE } from "../../renderer/renderElement";
+export const EXTERNAL_LINK_IMG = document.createElement("img");
+EXTERNAL_LINK_IMG.src = `data:${MIME_TYPES.svg}, ${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#1971c2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>`)}`;
+export const getLinkHandleFromCoords = ([x1, y1, x2, y2], angle, appState) => {
+    const size = DEFAULT_LINK_SIZE;
+    const linkWidth = size / appState.zoom.value;
+    const linkHeight = size / appState.zoom.value;
+    const linkMarginY = size / appState.zoom.value;
+    const centerX = (x1 + x2) / 2;
+    const centerY = (y1 + y2) / 2;
+    const centeringOffset = (size - 8) / (2 * appState.zoom.value);
+    const dashedLineMargin = 4 / appState.zoom.value;
+    // Same as `ne` resize handle
+    const x = x2 + dashedLineMargin - centeringOffset;
+    const y = y1 - dashedLineMargin - linkMarginY + centeringOffset;
+    const [rotatedX, rotatedY] = rotate(x + linkWidth / 2, y + linkHeight / 2, centerX, centerY, angle);
+    return [
+        rotatedX - linkWidth / 2,
+        rotatedY - linkHeight / 2,
+        linkWidth,
+        linkHeight,
+    ];
+};
+export const isPointHittingLinkIcon = (element, elementsMap, appState, [x, y]) => {
+    const threshold = 4 / appState.zoom.value;
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
+    const [linkX, linkY, linkWidth, linkHeight] = getLinkHandleFromCoords([x1, y1, x2, y2], element.angle, appState);
+    const hitLink = x > linkX - threshold &&
+        x < linkX + threshold + linkWidth &&
+        y > linkY - threshold &&
+        y < linkY + linkHeight + threshold;
+    return hitLink;
+};
+export const isPointHittingLink = (element, elementsMap, appState, [x, y], isMobile) => {
+    if (!element.link || appState.selectedElementIds[element.id]) {
+        return false;
+    }
+    const threshold = 4 / appState.zoom.value;
+    if (!isMobile &&
+        appState.viewModeEnabled &&
+        isPointHittingElementBoundingBox(element, elementsMap, [x, y], threshold, null)) {
+        return true;
+    }
+    return isPointHittingLinkIcon(element, elementsMap, appState, [x, y]);
+};

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

@@ -42,7 +42,7 @@ export declare const HelpIcon: JSX.Element;
 export declare const ExternalLinkIcon: JSX.Element;
 export declare const GithubIcon: JSX.Element;
 export declare const DiscordIcon: JSX.Element;
-export declare const TwitterIcon: JSX.Element;
+export declare const XBrandIcon: JSX.Element;
 export declare const checkIcon: JSX.Element;
 export declare const LinkIcon: JSX.Element;
 export declare const save: JSX.Element;
@@ -60,6 +60,7 @@ export declare const UndoIcon: JSX.Element;
 export declare const RedoIcon: JSX.Element;
 export declare const questionCircle: JSX.Element;
 export declare const share: JSX.Element;
+export declare const warning: JSX.Element;
 export declare const shareIOS: JSX.Element;
 export declare const shareWindows: JSX.Element;
 export declare const resetZoom: JSX.Element;

package/dist/excalidraw/components/icons.js

@@ -89,7 +89,7 @@ export const HelpIcon = createIcon(_jsxs("g", { strokeWidth: "1.5", children: [_
 export const ExternalLinkIcon = createIcon(_jsx("path", { strokeWidth: "1.25", d: "M9.167 5.833H5.833c-1.254 0-2.5 1.282-2.5 2.5v5.834c0 1.283 1.252 2.5 2.5 2.5h5.834c1.251 0 2.5-1.25 2.5-2.5v-3.334M8.333 11.667l8.334-8.334M12.5 3.333h4.167V7.5" }), modifiedTablerIconProps);
 export const GithubIcon = createIcon(_jsx("path", { d: "M7.5 15.833c-3.583 1.167-3.583-2.083-5-2.5m10 4.167v-2.917c0-.833.083-1.166-.417-1.666 2.334-.25 4.584-1.167 4.584-5a3.833 3.833 0 0 0-1.084-2.667 3.5 3.5 0 0 0-.083-2.667s-.917-.25-2.917 1.084a10.25 10.25 0 0 0-5.166 0C5.417 2.333 4.5 2.583 4.5 2.583a3.5 3.5 0 0 0-.083 2.667 3.833 3.833 0 0 0-1.084 2.667c0 3.833 2.25 4.75 4.584 5-.5.5-.5 1-.417 1.666V17.5", strokeWidth: "1.25" }), modifiedTablerIconProps);
 export const DiscordIcon = createIcon(_jsxs("g", { strokeWidth: "1.25", children: [_jsx("path", { d: "M7.5 10.833a.833.833 0 1 0 0-1.666.833.833 0 0 0 0 1.666ZM12.5 10.833a.833.833 0 1 0 0-1.666.833.833 0 0 0 0 1.666ZM6.25 6.25c2.917-.833 4.583-.833 7.5 0M5.833 13.75c2.917.833 5.417.833 8.334 0" }), _jsx("path", { d: "M12.917 14.167c0 .833 1.25 2.5 1.666 2.5 1.25 0 2.361-1.39 2.917-2.5.556-1.39.417-4.861-1.25-9.584-1.214-.846-2.5-1.116-3.75-1.25l-.833 2.084M7.083 14.167c0 .833-1.13 2.5-1.526 2.5-1.191 0-2.249-1.39-2.778-2.5-.529-1.39-.397-4.861 1.19-9.584 1.157-.846 2.318-1.116 3.531-1.25l.833 2.084" })] }), modifiedTablerIconProps);
-export const TwitterIcon = createIcon(_jsxs("g", { strokeWidth: "1.25", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" })] }), tablerIconProps);
+export const XBrandIcon = createIcon(_jsxs("g", { strokeWidth: "1.25", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M4 4l11.733 16h4.267l-11.733 -16z" }), _jsx("path", { d: "M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772" })] }), tablerIconProps);
 export const checkIcon = createIcon(_jsx("polyline", { fill: "none", stroke: "currentColor", points: "20 6 9 17 4 12" }), {
     width: 24,
     height: 24,
@@ -111,6 +111,7 @@ export const UndoIcon = createIcon(_jsx("path", { d: "M7.5 10.833 4.167 7.5 7.5
 export const RedoIcon = createIcon(_jsx("path", { d: "M12.5 10.833 15.833 7.5 12.5 4.167M15.833 7.5H6.667a3.333 3.333 0 1 0 0 6.667H7.5", strokeWidth: "1.25" }), modifiedTablerIconProps);
 export const questionCircle = createIcon("M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z", { mirror: true });
 export const share = createIcon(_jsx("path", { d: "M5 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM15 7.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM15 17.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM7.25 8.917l5.5-2.834M7.25 11.083l5.5 2.834", strokeWidth: "1.5" }), modifiedTablerIconProps);
+export const warning = createIcon("M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z");
 export const shareIOS = createIcon("M16 5l-1.42 1.42-1.59-1.59V16h-1.98V4.83L9.42 6.42 8 5l4-4 4 4zm4 5v11c0 1.1-.9 2-2 2H6c-1.11 0-2-.9-2-2V10c0-1.11.89-2 2-2h3v2H6v11h12V10h-3V8h3c1.1 0 2 .89 2 2z", { width: 24, height: 24 });
 export const shareWindows = createIcon(_jsxs(_Fragment, { children: [_jsx("path", { fill: "currentColor", d: "M40 5.6v6.1l-4.1.7c-8.9 1.4-16.5 6.9-20.6 15C13 32 10.9 43 12.4 43c.4 0 2.4-1.3 4.4-3 5-3.9 12.1-7 18.2-7.7l5-.6v12.8l11.2-11.3L62.5 22 51.2 10.8 40-.5v6.1zm10.2 22.6L44 34.5v-6.8l-6.9.6c-3.9.3-9.8 1.7-13.2 3.1-3.5 1.4-6.5 2.4-6.7 2.2-.9-1 3-7.5 6.4-10.8C28 18.6 34.4 16 40.1 16c3.7 0 3.9-.1 3.9-3.2V9.5l6.2 6.3 6.3 6.2-6.3 6.2z" }), _jsx("path", { stroke: "currentColor", fill: "currentColor", d: "M0 36v20h48v-6.2c0-6 0-6.1-2-4.3-1.1 1-2 2.9-2 4.2V52H4V34c0-17.3-.1-18-2-18s-2 .7-2 20z" })] }), { width: 64, height: 64 });
 // Icon imported form Storybook

package/dist/excalidraw/components/live-collaboration/LiveCollaborationTrigger.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from "../../i18n";
-import { usersIcon } from "../icons";
+import { share } from "../icons";
 import { Button } from "../Button";
 import clsx from "clsx";
 import "./LiveCollaborationTrigger.scss";
 import { useUIAppState } from "../../context/ui-appState";
 const LiveCollaborationTrigger = ({ isCollaborating, onSelect, ...rest }) => {
     const appState = useUIAppState();
-    return (_jsxs(Button, { ...rest, className: clsx("collab-button", { active: isCollaborating }), type: "button", onSelect: onSelect, style: { position: "relative" }, title: t("labels.liveCollaboration"), children: [usersIcon, appState.collaborators.size > 0 && (_jsx("div", { className: "CollabButton-collaborators", children: appState.collaborators.size }))] }));
+    const showIconOnly = appState.width < 830;
+    return (_jsxs(Button, { ...rest, className: clsx("collab-button", { active: isCollaborating }), type: "button", onSelect: onSelect, style: { position: "relative", width: showIconOnly ? undefined : "auto" }, title: t("labels.liveCollaboration"), children: [showIconOnly ? share : t("labels.share"), appState.collaborators.size > 0 && (_jsx("div", { className: "CollabButton-collaborators", children: appState.collaborators.size }))] }));
 };
 export default LiveCollaborationTrigger;
 LiveCollaborationTrigger.displayName = "LiveCollaborationTrigger";

package/dist/excalidraw/components/main-menu/DefaultItems.js

@@ -3,7 +3,7 @@ import { getShortcutFromShortcutName } from "../../actions/shortcuts";
 import { useI18n } from "../../i18n";
 import { useExcalidrawSetAppState, useExcalidrawActionManager, useExcalidrawElements, useAppProps, } from "../App";
 import { ExportIcon, ExportImageIcon, HelpIcon, LoadIcon, MoonIcon, save, SunIcon, TrashIcon, usersIcon, } from "../icons";
-import { GithubIcon, DiscordIcon, TwitterIcon } from "../icons";
+import { GithubIcon, DiscordIcon, XBrandIcon } from "../icons";
 import DropdownMenuItem from "../dropdownMenu/DropdownMenuItem";
 import DropdownMenuItemLink from "../dropdownMenu/DropdownMenuItemLink";
 import { actionClearCanvas, actionLoadScene, actionSaveToActiveFile, actionShortcuts, actionToggleTheme, } from "../../actions";
@@ -105,7 +105,10 @@ export const Export = () => {
         }, "data-testid": "json-export-button", "aria-label": t("buttons.export"), children: t("buttons.export") }));
 };
 Export.displayName = "Export";
-export const Socials = () => (_jsxs(_Fragment, { children: [_jsx(DropdownMenuItemLink, { icon: GithubIcon, href: "https://github.com/excalidraw/excalidraw", "aria-label": "GitHub", children: "GitHub" }), _jsx(DropdownMenuItemLink, { icon: DiscordIcon, href: "https://discord.gg/UexuTaE", "aria-label": "Discord", children: "Discord" }), _jsx(DropdownMenuItemLink, { icon: TwitterIcon, href: "https://twitter.com/excalidraw", "aria-label": "Twitter", children: "Twitter" })] }));
+export const Socials = () => {
+    const { t } = useI18n();
+    return (_jsxs(_Fragment, { children: [_jsx(DropdownMenuItemLink, { icon: GithubIcon, href: "https://github.com/excalidraw/excalidraw", "aria-label": "GitHub", children: "GitHub" }), _jsx(DropdownMenuItemLink, { icon: XBrandIcon, href: "https://x.com/excalidraw", "aria-label": "X", children: t("labels.followUs") }), _jsx(DropdownMenuItemLink, { icon: DiscordIcon, href: "https://discord.gg/UexuTaE", "aria-label": "Discord", children: t("labels.discordChat") })] }));
+};
 Socials.displayName = "Socials";
 export const LiveCollaborationTrigger = ({ onSelect, isCollaborating, }) => {
     const { t } = useI18n();

package/dist/excalidraw/constants.d.ts

@@ -118,6 +118,7 @@ export declare const DEFAULT_FONT_FAMILY: FontFamilyValues;
 export declare const DEFAULT_TEXT_ALIGN = "left";
 export declare const DEFAULT_VERTICAL_ALIGN = "top";
 export declare const DEFAULT_VERSION = "{version}";
+export declare const DEFAULT_TRANSFORM_HANDLE_SPACING = 2;
 export declare const CANVAS_ONLY_ACTIONS: string[];
 export declare const GRID_SIZE = 20;
 export declare const IMAGE_MIME_TYPES: {
@@ -268,3 +269,8 @@ export declare const EDITOR_LS_KEYS: {
     readonly MERMAID_TO_EXCALIDRAW: "mermaid-to-excalidraw";
     readonly PUBLISH_LIBRARY: "publish-library-data";
 };
+/**
+ * not translated as this is used only in public, stateless API as default value
+ * where filename is optional and we can't retrieve name from app state
+ */
+export declare const DEFAULT_FILENAME = "Untitled";

package/dist/excalidraw/constants.js

@@ -125,6 +125,7 @@ export const DEFAULT_FONT_FAMILY = FONT_FAMILY.Virgil;
 export const DEFAULT_TEXT_ALIGN = "left";
 export const DEFAULT_VERTICAL_ALIGN = "top";
 export const DEFAULT_VERSION = "{version}";
+export const DEFAULT_TRANSFORM_HANDLE_SPACING = 2;
 export const CANVAS_ONLY_ACTIONS = ["selectAll"];
 export const GRID_SIZE = 20; // TODO make it configurable?
 export const IMAGE_MIME_TYPES = {
@@ -314,3 +315,8 @@ export const EDITOR_LS_KEYS = {
     MERMAID_TO_EXCALIDRAW: "mermaid-to-excalidraw",
     PUBLISH_LIBRARY: "publish-library-data",
 };
+/**
+ * not translated as this is used only in public, stateless API as default value
+ * where filename is optional and we can't retrieve name from app state
+ */
+export const DEFAULT_FILENAME = "Untitled";

package/dist/excalidraw/data/blob.js

@@ -3,7 +3,6 @@ import { cleanAppStateForExport } from "../appState";
 import { IMAGE_MIME_TYPES, MIME_TYPES } from "../constants";
 import { clearElementsForExport } from "../element";
 import { CanvasError, ImageSceneDataError } from "../errors";
-import { t } from "../i18n";
 import { calculateScrollCenter } from "../scene";
 import { bytesToHexString, isPromiseLike } from "../utils";
 import { nativeFileSystemSupported } from "./filesystem";
@@ -17,10 +16,10 @@ const parseFileContents = async (blob) => {
         }
         catch (error) {
             if (error.message === "INVALID") {
-                throw new ImageSceneDataError(t("alerts.imageDoesNotContainScene"), "IMAGE_NOT_CONTAINS_SCENE_DATA");
+                throw new ImageSceneDataError("Image doesn't contain scene", "IMAGE_NOT_CONTAINS_SCENE_DATA");
             }
             else {
-                throw new ImageSceneDataError(t("alerts.cannotRestoreFromImage"));
+                throw new ImageSceneDataError("Error: cannot restore image");
             }
         }
     }
@@ -47,10 +46,10 @@ const parseFileContents = async (blob) => {
             }
             catch (error) {
                 if (error.message === "INVALID") {
-                    throw new ImageSceneDataError(t("alerts.imageDoesNotContainScene"), "IMAGE_NOT_CONTAINS_SCENE_DATA");
+                    throw new ImageSceneDataError("Image doesn't contain scene", "IMAGE_NOT_CONTAINS_SCENE_DATA");
                 }
                 else {
-                    throw new ImageSceneDataError(t("alerts.cannotRestoreFromImage"));
+                    throw new ImageSceneDataError("Error: cannot restore image");
                 }
             }
         }
@@ -112,7 +111,7 @@ fileHandle) => {
         }
         catch (error) {
             if (isSupportedImageFile(blob)) {
-                throw new ImageSceneDataError(t("alerts.imageDoesNotContainScene"), "IMAGE_NOT_CONTAINS_SCENE_DATA");
+                throw new ImageSceneDataError("Image doesn't contain scene", "IMAGE_NOT_CONTAINS_SCENE_DATA");
             }
             throw error;
         }
@@ -139,13 +138,13 @@ fileHandle) => {
                 data,
             };
         }
-        throw new Error(t("alerts.couldNotLoadInvalidFile"));
+        throw new Error("Error: invalid file");
     }
     catch (error) {
         if (error instanceof ImageSceneDataError) {
             throw error;
         }
-        throw new Error(t("alerts.couldNotLoadInvalidFile"));
+        throw new Error("Error: invalid file");
     }
 };
 export const loadFromBlob = async (blob, 
@@ -155,7 +154,7 @@ localAppState, localElements,
 fileHandle) => {
     const ret = await loadSceneOrLibraryFromBlob(blob, localAppState, localElements, fileHandle);
     if (ret.type !== MIME_TYPES.excalidraw) {
-        throw new Error(t("alerts.couldNotLoadInvalidFile"));
+        throw new Error("Error: invalid file");
     }
     return ret.data;
 };
@@ -178,7 +177,7 @@ export const canvasToBlob = async (canvas) => {
             }
             canvas.toBlob((blob) => {
                 if (!blob) {
-                    return reject(new CanvasError(t("canvasError.canvasTooBig"), "CANVAS_POSSIBLY_TOO_BIG"));
+                    return reject(new CanvasError("Error: Canvas too big", "CANVAS_POSSIBLY_TOO_BIG"));
                 }
                 resolve(blob);
             });
@@ -249,7 +248,7 @@ export const resizeImageFile = async (file, opts) => {
         };
     }
     if (!isSupportedImageFile(file)) {
-        throw new Error(t("errors.unsupportedFileType"));
+        throw new Error("Error: unsupported file type", { cause: "UNSUPPORTED" });
     }
     return new File([await reduce.toBlob(file, { max: opts.maxWidthOrHeight })], file.name, {
         type: opts.outputType || file.type,
@@ -266,17 +265,17 @@ export const ImageURLToFile = async (imageUrl, filename = "") => {
         response = await fetch(imageUrl);
     }
     catch (error) {
-        throw new Error(t("errors.failedToFetchImage"));
+        throw new Error("Error: failed to fetch image", { cause: "FETCH_ERROR" });
     }
     if (!response.ok) {
-        throw new Error(t("errors.failedToFetchImage"));
+        throw new Error("Error: failed to fetch image", { cause: "FETCH_ERROR" });
     }
     const blob = await response.blob();
     if (blob.type && isSupportedImageFile(blob)) {
         const name = filename || blob.name || "";
         return new File([blob], name, { type: blob.type });
     }
-    throw new Error(t("errors.unsupportedFileType"));
+    throw new Error("Error: unsupported file type", { cause: "UNSUPPORTED" });
 };
 export const getFileFromEvent = async (event) => {
     const file = event.dataTransfer.files.item(0);

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

@@ -6,7 +6,7 @@ export declare const fileOpen: <M extends boolean | undefined = false>(opts: {
     description: string;
     multiple?: M | undefined;
 }) => Promise<M extends false | undefined ? File : File[]>;
-export declare const fileSave: (blob: Blob, opts: {
+export declare const fileSave: (blob: Blob | Promise<Blob>, opts: {
     /** supply without the extension */
     name: string;
     /** file extension */

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

@@ -15,7 +15,8 @@ export declare const exportCanvas: (type: Omit<ExportType, "backend">, elements:
     exportBackground: boolean;
     exportPadding?: number | undefined;
     viewBackgroundColor: string;
-    name: string;
+    /** filename, if applicable */
+    name?: string | undefined;
     fileHandle?: FileSystemHandle | null | undefined;
     exportingFrame: ExcalidrawFrameLikeElement | null;
 }) => Promise<FileSystemHandle | null | undefined>;