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

package/dist/excalidraw/components/FollowMode/FollowMode.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CloseIcon } from "../icons";
 import "./FollowMode.scss";
 const FollowMode = ({ height, width, userToFollow, onDisconnect, }) => {
-    return (_jsx("div", { className: "follow-mode", style: { width, height }, children: _jsxs("div", { className: "follow-mode__badge", children: [_jsxs("div", { className: "follow-mode__badge__label", children: ["Following", " ", _jsx("span", { className: "follow-mode__badge__username", title: userToFollow.username, children: userToFollow.username })] }), _jsx("button", { onClick: onDisconnect, className: "follow-mode__disconnect-btn", children: CloseIcon })] }) }));
+    return (_jsx("div", { className: "follow-mode", style: { width, height }, children: _jsxs("div", { className: "follow-mode__badge", children: [_jsxs("div", { className: "follow-mode__badge__label", children: ["Following", " ", _jsx("span", { className: "follow-mode__badge__username", title: userToFollow.username, children: userToFollow.username })] }), _jsx("button", { type: "button", onClick: onDisconnect, className: "follow-mode__disconnect-btn", children: CloseIcon })] }) }));
 };
 export default FollowMode;

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

@@ -0,0 +1,21 @@
+import React from "react";
+import type { FontFamilyValues } from "../../element/types";
+import "./FontPicker.scss";
+export declare const DEFAULT_FONTS: {
+    value: number;
+    icon: JSX.Element;
+    text: string;
+    testId: string;
+}[];
+export declare const isDefaultFont: (fontFamily: number | null) => boolean;
+interface FontPickerProps {
+    isOpened: boolean;
+    selectedFontFamily: FontFamilyValues | null;
+    hoveredFontFamily: FontFamilyValues | null;
+    onSelect: (fontFamily: FontFamilyValues) => void;
+    onHover: (fontFamily: FontFamilyValues) => void;
+    onLeave: () => void;
+    onPopupChange: (open: boolean) => void;
+}
+export declare const FontPicker: React.MemoExoticComponent<({ isOpened, selectedFontFamily, hoveredFontFamily, onSelect, onHover, onLeave, onPopupChange, }: FontPickerProps) => JSX.Element>;
+export {};

package/dist/excalidraw/components/FontPicker/FontPicker.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useMemo } from "react";
+import * as Popover from "@radix-ui/react-popover";
+import { FontPickerList } from "./FontPickerList";
+import { FontPickerTrigger } from "./FontPickerTrigger";
+import { ButtonIconSelect } from "../ButtonIconSelect";
+import { FontFamilyCodeIcon, FontFamilyNormalIcon, FreedrawIcon, } from "../icons";
+import { ButtonSeparator } from "../ButtonSeparator";
+import { FONT_FAMILY } from "../../constants";
+import { t } from "../../i18n";
+import "./FontPicker.scss";
+export const DEFAULT_FONTS = [
+    {
+        value: FONT_FAMILY.Excalifont,
+        icon: FreedrawIcon,
+        text: t("labels.handDrawn"),
+        testId: "font-family-handrawn",
+    },
+    {
+        value: FONT_FAMILY.Nunito,
+        icon: FontFamilyNormalIcon,
+        text: t("labels.normal"),
+        testId: "font-family-normal",
+    },
+    {
+        value: FONT_FAMILY["Comic Shanns"],
+        icon: FontFamilyCodeIcon,
+        text: t("labels.code"),
+        testId: "font-family-code",
+    },
+];
+const defaultFontFamilies = new Set(DEFAULT_FONTS.map((x) => x.value));
+export const isDefaultFont = (fontFamily) => {
+    if (!fontFamily) {
+        return false;
+    }
+    return defaultFontFamilies.has(fontFamily);
+};
+export const FontPicker = React.memo(({ isOpened, selectedFontFamily, hoveredFontFamily, onSelect, onHover, onLeave, onPopupChange, }) => {
+    const defaultFonts = useMemo(() => DEFAULT_FONTS, []);
+    const onSelectCallback = useCallback((value) => {
+        if (value) {
+            onSelect(value);
+        }
+    }, [onSelect]);
+    return (_jsxs("div", { role: "dialog", "aria-modal": "true", className: "FontPicker__container", children: [_jsx(ButtonIconSelect, { type: "button", options: defaultFonts, value: selectedFontFamily, onClick: onSelectCallback }), _jsx(ButtonSeparator, {}), _jsxs(Popover.Root, { open: isOpened, onOpenChange: onPopupChange, children: [_jsx(FontPickerTrigger, { selectedFontFamily: selectedFontFamily }), isOpened && (_jsx(FontPickerList, { selectedFontFamily: selectedFontFamily, hoveredFontFamily: hoveredFontFamily, onSelect: onSelectCallback, onHover: onHover, onLeave: onLeave, onOpen: () => onPopupChange(true), onClose: () => onPopupChange(false) }))] })] }));
+}, (prev, next) => prev.isOpened === next.isOpened &&
+    prev.selectedFontFamily === next.selectedFontFamily &&
+    prev.hoveredFontFamily === next.hoveredFontFamily);

package/dist/excalidraw/components/FontPicker/FontPickerList.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { DropDownMenuItemBadgeType } from "../dropdownMenu/DropdownMenuItem";
+import { type FontFamilyValues } from "../../element/types";
+import type { ValueOf } from "../../utility-types";
+export interface FontDescriptor {
+    value: number;
+    icon: JSX.Element;
+    text: string;
+    deprecated?: true;
+    badge?: {
+        type: ValueOf<typeof DropDownMenuItemBadgeType>;
+        placeholder: string;
+    };
+}
+interface FontPickerListProps {
+    selectedFontFamily: FontFamilyValues | null;
+    hoveredFontFamily: FontFamilyValues | null;
+    onSelect: (value: number) => void;
+    onHover: (value: number) => void;
+    onLeave: () => void;
+    onOpen: () => void;
+    onClose: () => void;
+}
+export declare const FontPickerList: React.MemoExoticComponent<({ selectedFontFamily, hoveredFontFamily, onSelect, onHover, onLeave, onOpen, onClose, }: FontPickerListProps) => JSX.Element>;
+export {};

package/dist/excalidraw/components/FontPicker/FontPickerList.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo, useState, useRef, useEffect, useCallback, } from "react";
+import { useApp, useAppProps, useExcalidrawContainer } from "../App";
+import { PropertiesPopover } from "../PropertiesPopover";
+import { QuickSearch } from "../QuickSearch";
+import { ScrollableList } from "../ScrollableList";
+import DropdownMenuGroup from "../dropdownMenu/DropdownMenuGroup";
+import DropdownMenuItem, { DropDownMenuItemBadgeType, DropDownMenuItemBadge, } from "../dropdownMenu/DropdownMenuItem";
+import { arrayToList, debounce, getFontFamilyString } from "../../utils";
+import { t } from "../../i18n";
+import { fontPickerKeyHandler } from "./keyboardNavHandlers";
+import { Fonts } from "../../fonts";
+export const FontPickerList = React.memo(({ selectedFontFamily, hoveredFontFamily, onSelect, onHover, onLeave, onOpen, onClose, }) => {
+    const { container } = useExcalidrawContainer();
+    const { fonts } = useApp();
+    const { showDeprecatedFonts } = useAppProps();
+    const [searchTerm, setSearchTerm] = useState("");
+    const inputRef = useRef(null);
+    const allFonts = useMemo(() => Array.from(Fonts.registered.entries())
+        .filter(([_, { metadata }]) => !metadata.serverSide)
+        .map(([familyId, { metadata, fontFaces }]) => {
+        const font = {
+            value: familyId,
+            icon: metadata.icon,
+            text: fontFaces[0].fontFace.family,
+        };
+        if (metadata.deprecated) {
+            Object.assign(font, {
+                deprecated: metadata.deprecated,
+                badge: {
+                    type: DropDownMenuItemBadgeType.RED,
+                    placeholder: t("fontList.badge.old"),
+                },
+            });
+        }
+        return font;
+    })
+        .sort((a, b) => a.text.toLowerCase() > b.text.toLowerCase() ? 1 : -1), []);
+    const sceneFamilies = useMemo(() => new Set(fonts.sceneFamilies), 
+    // cache per selected font family, so hover re-render won't mess it up
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [selectedFontFamily]);
+    const sceneFonts = useMemo(() => allFonts.filter((font) => sceneFamilies.has(font.value)), // always show all the fonts in the scene, even those that were deprecated
+    [allFonts, sceneFamilies]);
+    const availableFonts = useMemo(() => allFonts.filter((font) => !sceneFamilies.has(font.value) &&
+        (showDeprecatedFonts || !font.deprecated)), [allFonts, sceneFamilies, showDeprecatedFonts]);
+    const filteredFonts = useMemo(() => arrayToList([...sceneFonts, ...availableFonts].filter((font) => font.text?.toLowerCase().includes(searchTerm))), [sceneFonts, availableFonts, searchTerm]);
+    const hoveredFont = useMemo(() => {
+        let font;
+        if (hoveredFontFamily) {
+            font = filteredFonts.find((font) => font.value === hoveredFontFamily);
+        }
+        else if (selectedFontFamily) {
+            font = filteredFonts.find((font) => font.value === selectedFontFamily);
+        }
+        if (!font && searchTerm) {
+            if (filteredFonts[0]?.value) {
+                // hover first element on search
+                onHover(filteredFonts[0].value);
+            }
+            else {
+                // re-render cache on no results
+                onLeave();
+            }
+        }
+        return font;
+    }, [
+        hoveredFontFamily,
+        selectedFontFamily,
+        searchTerm,
+        filteredFonts,
+        onHover,
+        onLeave,
+    ]);
+    const onKeyDown = useCallback((event) => {
+        const handled = fontPickerKeyHandler({
+            event,
+            inputRef,
+            hoveredFont,
+            filteredFonts,
+            onSelect,
+            onHover,
+            onClose,
+        });
+        if (handled) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }, [hoveredFont, filteredFonts, onSelect, onHover, onClose]);
+    useEffect(() => {
+        onOpen();
+        return () => {
+            onClose();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const sceneFilteredFonts = useMemo(() => filteredFonts.filter((font) => sceneFamilies.has(font.value)), [filteredFonts, sceneFamilies]);
+    const availableFilteredFonts = useMemo(() => filteredFonts.filter((font) => !sceneFamilies.has(font.value)), [filteredFonts, sceneFamilies]);
+    const renderFont = (font, index) => (_jsxs(DropdownMenuItem, { icon: font.icon, value: font.value, order: index, textStyle: {
+            fontFamily: getFontFamilyString({ fontFamily: font.value }),
+        }, hovered: font.value === hoveredFont?.value, selected: font.value === selectedFontFamily, 
+        // allow to tab between search and selected font
+        tabIndex: font.value === selectedFontFamily ? 0 : -1, onClick: (e) => {
+            onSelect(Number(e.currentTarget.value));
+        }, onMouseMove: () => {
+            if (hoveredFont?.value !== font.value) {
+                onHover(font.value);
+            }
+        }, children: [font.text, font.badge && (_jsx(DropDownMenuItemBadge, { type: font.badge.type, children: font.badge.placeholder }))] }, font.value));
+    const groups = [];
+    if (sceneFilteredFonts.length) {
+        groups.push(_jsx(DropdownMenuGroup, { title: t("fontList.sceneFonts"), children: sceneFilteredFonts.map(renderFont) }, "group_1"));
+    }
+    if (availableFilteredFonts.length) {
+        groups.push(_jsx(DropdownMenuGroup, { title: t("fontList.availableFonts"), children: availableFilteredFonts.map((font, index) => renderFont(font, index + sceneFilteredFonts.length)) }, "group_2"));
+    }
+    return (_jsxs(PropertiesPopover, { className: "properties-content", container: container, style: { width: "15rem" }, onClose: onClose, onPointerLeave: onLeave, onKeyDown: onKeyDown, children: [_jsx(QuickSearch, { ref: inputRef, placeholder: t("quickSearch.placeholder"), onChange: debounce(setSearchTerm, 20) }), _jsx(ScrollableList, { className: "dropdown-menu fonts manual-hover", placeholder: t("fontList.empty"), children: groups.length ? groups : null })] }));
+}, (prev, next) => prev.selectedFontFamily === next.selectedFontFamily &&
+    prev.hoveredFontFamily === next.hoveredFontFamily);

package/dist/excalidraw/components/FontPicker/FontPickerTrigger.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { FontFamilyValues } from "../../element/types";
+interface FontPickerTriggerProps {
+    selectedFontFamily: FontFamilyValues | null;
+}
+export declare const FontPickerTrigger: ({ selectedFontFamily, }: FontPickerTriggerProps) => JSX.Element;
+export {};

package/dist/excalidraw/components/FontPicker/FontPickerTrigger.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as Popover from "@radix-ui/react-popover";
+import { useMemo } from "react";
+import { ButtonIcon } from "../ButtonIcon";
+import { TextIcon } from "../icons";
+import { t } from "../../i18n";
+import { isDefaultFont } from "./FontPicker";
+export const FontPickerTrigger = ({ selectedFontFamily, }) => {
+    const isTriggerActive = useMemo(() => Boolean(selectedFontFamily && !isDefaultFont(selectedFontFamily)), [selectedFontFamily]);
+    return (_jsx(Popover.Trigger, { asChild: true, children: _jsx("div", { children: _jsx(ButtonIcon, { standalone: true, icon: TextIcon, title: t("labels.showFonts"), className: "properties-trigger", testId: "font-family-show-fonts", active: isTriggerActive, 
+                // no-op
+                onClick: () => { } }) }) }));
+};

package/dist/excalidraw/components/FontPicker/keyboardNavHandlers.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { Node } from "../../utils";
+import { type FontDescriptor } from "./FontPickerList";
+interface FontPickerKeyNavHandlerProps {
+    event: React.KeyboardEvent<HTMLDivElement>;
+    inputRef: React.RefObject<HTMLInputElement>;
+    hoveredFont: Node<FontDescriptor> | undefined;
+    filteredFonts: Node<FontDescriptor>[];
+    onClose: () => void;
+    onSelect: (value: number) => void;
+    onHover: (value: number) => void;
+}
+export declare const fontPickerKeyHandler: ({ event, inputRef, hoveredFont, filteredFonts, onClose, onSelect, onHover, }: FontPickerKeyNavHandlerProps) => true | undefined;
+export {};

package/dist/excalidraw/components/FontPicker/keyboardNavHandlers.js

@@ -0,0 +1,38 @@
+import { KEYS } from "../../keys";
+export const fontPickerKeyHandler = ({ event, inputRef, hoveredFont, filteredFonts, onClose, onSelect, onHover, }) => {
+    if (!event[KEYS.CTRL_OR_CMD] &&
+        event.shiftKey &&
+        event.key.toLowerCase() === KEYS.F) {
+        // refocus input on the popup trigger shortcut
+        inputRef.current?.focus();
+        return true;
+    }
+    if (event.key === KEYS.ESCAPE) {
+        onClose();
+        return true;
+    }
+    if (event.key === KEYS.ENTER) {
+        if (hoveredFont?.value) {
+            onSelect(hoveredFont.value);
+        }
+        return true;
+    }
+    if (event.key === KEYS.ARROW_DOWN) {
+        if (hoveredFont?.next) {
+            onHover(hoveredFont.next.value);
+        }
+        else if (filteredFonts[0]?.value) {
+            onHover(filteredFonts[0].value);
+        }
+        return true;
+    }
+    if (event.key === KEYS.ARROW_UP) {
+        if (hoveredFont?.prev) {
+            onHover(hoveredFont.prev.value);
+        }
+        else if (filteredFonts[filteredFonts.length - 1]?.value) {
+            onHover(filteredFonts[filteredFonts.length - 1].value);
+        }
+        return true;
+    }
+};

package/dist/excalidraw/components/HelpDialog.js

@@ -5,11 +5,11 @@ import { KEYS } from "../keys";
 import { Dialog } from "./Dialog";
 import { getShortcutKey } from "../utils";
 import "./HelpDialog.scss";
-import { ExternalLinkIcon } from "./icons";
+import { ExternalLinkIcon, GithubIcon, youtubeIcon } from "./icons";
 import { probablySupportsClipboardBlob } from "../clipboard";
 import { isDarwin, isFirefox, isWindows } from "../constants";
 import { getShortcutFromShortcutName } from "../actions/shortcuts";
-const Header = () => (_jsxs("div", { className: "HelpDialog__header", children: [_jsxs("a", { className: "HelpDialog__btn", href: "https://docs.excalidraw.com", target: "_blank", rel: "noopener noreferrer", children: [t("helpDialog.documentation"), _jsx("div", { className: "HelpDialog__link-icon", children: ExternalLinkIcon })] }), _jsxs("a", { className: "HelpDialog__btn", href: "https://blog.excalidraw.com", target: "_blank", rel: "noopener noreferrer", children: [t("helpDialog.blog"), _jsx("div", { className: "HelpDialog__link-icon", children: ExternalLinkIcon })] }), _jsxs("a", { className: "HelpDialog__btn", href: "https://github.com/excalidraw/excalidraw/issues", target: "_blank", rel: "noopener noreferrer", children: [t("helpDialog.github"), _jsx("div", { className: "HelpDialog__link-icon", children: ExternalLinkIcon })] })] }));
+const Header = () => (_jsxs("div", { className: "HelpDialog__header", children: [_jsxs("a", { className: "HelpDialog__btn", href: "https://docs.excalidraw.com", target: "_blank", rel: "noopener noreferrer", children: [_jsx("div", { className: "HelpDialog__link-icon", children: ExternalLinkIcon }), t("helpDialog.documentation")] }), _jsxs("a", { className: "HelpDialog__btn", href: "https://blog.excalidraw.com", target: "_blank", rel: "noopener noreferrer", children: [_jsx("div", { className: "HelpDialog__link-icon", children: ExternalLinkIcon }), t("helpDialog.blog")] }), _jsxs("a", { className: "HelpDialog__btn", href: "https://github.com/excalidraw/excalidraw/issues", target: "_blank", rel: "noopener noreferrer", children: [_jsx("div", { className: "HelpDialog__link-icon", children: GithubIcon }), t("helpDialog.github")] }), _jsxs("a", { className: "HelpDialog__btn", href: "https://youtube.com/@excalidraw", target: "_blank", rel: "noopener noreferrer", children: [_jsx("div", { className: "HelpDialog__link-icon", children: youtubeIcon }), "YouTube"] })] }));
 const Section = (props) => (_jsxs(_Fragment, { children: [_jsx("h3", { children: props.title }), _jsx("div", { className: "HelpDialog__islands-container", children: props.children })] }));
 const ShortcutIsland = (props) => (_jsxs("div", { className: `HelpDialog__island ${props.className}`, children: [_jsx("h4", { className: "HelpDialog__island-title", children: props.caption }), _jsx("div", { className: "HelpDialog__island-content", children: props.children })] }));
 function* intersperse(as, delim) {
@@ -57,10 +57,12 @@ export const HelpDialog = ({ onClose }) => {
                                         t("helpDialog.click"),
                                         t("helpDialog.click"),
                                         t("helpDialog.click"),
-                                    ], isOr: false }), _jsx(Shortcut, { label: t("toolBar.lock"), shortcuts: [KEYS.Q] }), _jsx(Shortcut, { label: t("helpDialog.preventBinding"), shortcuts: [getShortcutKey("CtrlOrCmd")] }), _jsx(Shortcut, { label: t("toolBar.link"), shortcuts: [getShortcutKey("CtrlOrCmd+K")] })] }), _jsxs(ShortcutIsland, { className: "HelpDialog__island--view", caption: t("helpDialog.view"), children: [_jsx(Shortcut, { label: t("buttons.zoomIn"), shortcuts: [getShortcutKey("CtrlOrCmd++")] }), _jsx(Shortcut, { label: t("buttons.zoomOut"), shortcuts: [getShortcutKey("CtrlOrCmd+-")] }), _jsx(Shortcut, { label: t("buttons.resetZoom"), shortcuts: [getShortcutKey("CtrlOrCmd+0")] }), _jsx(Shortcut, { label: t("helpDialog.zoomToFit"), shortcuts: ["Shift+1"] }), _jsx(Shortcut, { label: t("helpDialog.zoomToSelection"), shortcuts: ["Shift+2"] }), _jsx(Shortcut, { label: t("helpDialog.movePageUpDown"), shortcuts: ["PgUp/PgDn"] }), _jsx(Shortcut, { label: t("helpDialog.movePageLeftRight"), shortcuts: ["Shift+PgUp/PgDn"] }), _jsx(Shortcut, { label: t("buttons.zenMode"), shortcuts: [getShortcutKey("Alt+Z")] }), _jsx(Shortcut, { label: t("buttons.objectsSnapMode"), shortcuts: [getShortcutKey("Alt+S")] }), _jsx(Shortcut, { label: t("labels.showGrid"), shortcuts: [getShortcutKey("CtrlOrCmd+'")] }), _jsx(Shortcut, { label: t("labels.viewMode"), shortcuts: [getShortcutKey("Alt+R")] }), _jsx(Shortcut, { label: t("labels.toggleTheme"), shortcuts: [getShortcutKey("Alt+Shift+D")] }), _jsx(Shortcut, { label: t("stats.title"), shortcuts: [getShortcutKey("Alt+/")] }), _jsx(Shortcut, { label: t("commandPalette.title"), shortcuts: [
-                                        getShortcutFromShortcutName("commandPalette"),
-                                        getShortcutFromShortcutName("commandPalette", 1),
-                                    ] })] }), _jsxs(ShortcutIsland, { className: "HelpDialog__island--editor", caption: t("helpDialog.editor"), children: [_jsx(Shortcut, { label: t("labels.moveCanvas"), shortcuts: [
+                                    ], isOr: false }), _jsx(Shortcut, { label: t("toolBar.lock"), shortcuts: [KEYS.Q] }), _jsx(Shortcut, { label: t("helpDialog.preventBinding"), shortcuts: [getShortcutKey("CtrlOrCmd")] }), _jsx(Shortcut, { label: t("toolBar.link"), shortcuts: [getShortcutKey("CtrlOrCmd+K")] })] }), _jsxs(ShortcutIsland, { className: "HelpDialog__island--view", caption: t("helpDialog.view"), children: [_jsx(Shortcut, { label: t("buttons.zoomIn"), shortcuts: [getShortcutKey("CtrlOrCmd++")] }), _jsx(Shortcut, { label: t("buttons.zoomOut"), shortcuts: [getShortcutKey("CtrlOrCmd+-")] }), _jsx(Shortcut, { label: t("buttons.resetZoom"), shortcuts: [getShortcutKey("CtrlOrCmd+0")] }), _jsx(Shortcut, { label: t("helpDialog.zoomToFit"), shortcuts: ["Shift+1"] }), _jsx(Shortcut, { label: t("helpDialog.zoomToSelection"), shortcuts: ["Shift+2"] }), _jsx(Shortcut, { label: t("helpDialog.movePageUpDown"), shortcuts: ["PgUp/PgDn"] }), _jsx(Shortcut, { label: t("helpDialog.movePageLeftRight"), shortcuts: ["Shift+PgUp/PgDn"] }), _jsx(Shortcut, { label: t("buttons.zenMode"), shortcuts: [getShortcutKey("Alt+Z")] }), _jsx(Shortcut, { label: t("buttons.objectsSnapMode"), shortcuts: [getShortcutKey("Alt+S")] }), _jsx(Shortcut, { label: t("labels.toggleGrid"), shortcuts: [getShortcutKey("CtrlOrCmd+'")] }), _jsx(Shortcut, { label: t("labels.viewMode"), shortcuts: [getShortcutKey("Alt+R")] }), _jsx(Shortcut, { label: t("labels.toggleTheme"), shortcuts: [getShortcutKey("Alt+Shift+D")] }), _jsx(Shortcut, { label: t("stats.fullTitle"), shortcuts: [getShortcutKey("Alt+/")] }), _jsx(Shortcut, { label: t("commandPalette.title"), shortcuts: isFirefox
+                                        ? [getShortcutFromShortcutName("commandPalette")]
+                                        : [
+                                            getShortcutFromShortcutName("commandPalette"),
+                                            getShortcutFromShortcutName("commandPalette", 1),
+                                        ] })] }), _jsxs(ShortcutIsland, { className: "HelpDialog__island--editor", caption: t("helpDialog.editor"), children: [_jsx(Shortcut, { label: t("labels.moveCanvas"), shortcuts: [
                                         getShortcutKey(`Space+${t("helpDialog.drag")}`),
                                         getShortcutKey(`Wheel+${t("helpDialog.drag")}`),
                                     ], isOr: true }), _jsx(Shortcut, { label: t("buttons.clearReset"), shortcuts: [getShortcutKey("CtrlOrCmd+Delete")] }), _jsx(Shortcut, { label: t("labels.delete"), shortcuts: [getShortcutKey("Delete")] }), _jsx(Shortcut, { label: t("labels.cut"), shortcuts: [getShortcutKey("CtrlOrCmd+X")] }), _jsx(Shortcut, { label: t("labels.copy"), shortcuts: [getShortcutKey("CtrlOrCmd+C")] }), _jsx(Shortcut, { label: t("labels.paste"), shortcuts: [getShortcutKey("CtrlOrCmd+V")] }), _jsx(Shortcut, { label: t("labels.pasteAsPlaintext"), shortcuts: [getShortcutKey("CtrlOrCmd+Shift+V")] }), _jsx(Shortcut, { label: t("labels.selectAll"), shortcuts: [getShortcutKey("CtrlOrCmd+A")] }), _jsx(Shortcut, { label: t("labels.multiSelect"), shortcuts: [getShortcutKey(`Shift+${t("helpDialog.click")}`)] }), _jsx(Shortcut, { label: t("helpDialog.deepSelect"), shortcuts: [getShortcutKey(`CtrlOrCmd+${t("helpDialog.click")}`)] }), _jsx(Shortcut, { label: t("helpDialog.deepBoxSelect"), shortcuts: [getShortcutKey(`CtrlOrCmd+${t("helpDialog.drag")}`)] }), (probablySupportsClipboardBlob || isFirefox) && (_jsx(Shortcut, { label: t("labels.copyAsPng"), shortcuts: [getShortcutKey("Shift+Alt+C")] })), _jsx(Shortcut, { label: t("labels.copyStyles"), shortcuts: [getShortcutKey("CtrlOrCmd+Alt+C")] }), _jsx(Shortcut, { label: t("labels.pasteStyles"), shortcuts: [getShortcutKey("CtrlOrCmd+Alt+V")] }), _jsx(Shortcut, { label: t("labels.sendToBack"), shortcuts: [
@@ -79,5 +81,5 @@ export const HelpDialog = ({ onClose }) => {
                                             getShortcutKey("CtrlOrCmd+Y"),
                                             getShortcutKey("CtrlOrCmd+Shift+Z"),
                                         ]
-                                        : [getShortcutKey("CtrlOrCmd+Shift+Z")] }), _jsx(Shortcut, { label: t("labels.group"), shortcuts: [getShortcutKey("CtrlOrCmd+G")] }), _jsx(Shortcut, { label: t("labels.ungroup"), shortcuts: [getShortcutKey("CtrlOrCmd+Shift+G")] }), _jsx(Shortcut, { label: t("labels.flipHorizontal"), shortcuts: [getShortcutKey("Shift+H")] }), _jsx(Shortcut, { label: t("labels.flipVertical"), shortcuts: [getShortcutKey("Shift+V")] }), _jsx(Shortcut, { label: t("labels.showStroke"), shortcuts: [getShortcutKey("S")] }), _jsx(Shortcut, { label: t("labels.showBackground"), shortcuts: [getShortcutKey("G")] }), _jsx(Shortcut, { label: t("labels.decreaseFontSize"), shortcuts: [getShortcutKey("CtrlOrCmd+Shift+<")] }), _jsx(Shortcut, { label: t("labels.increaseFontSize"), shortcuts: [getShortcutKey("CtrlOrCmd+Shift+>")] })] })] })] }) }));
+                                        : [getShortcutKey("CtrlOrCmd+Shift+Z")] }), _jsx(Shortcut, { label: t("labels.group"), shortcuts: [getShortcutKey("CtrlOrCmd+G")] }), _jsx(Shortcut, { label: t("labels.ungroup"), shortcuts: [getShortcutKey("CtrlOrCmd+Shift+G")] }), _jsx(Shortcut, { label: t("labels.flipHorizontal"), shortcuts: [getShortcutKey("Shift+H")] }), _jsx(Shortcut, { label: t("labels.flipVertical"), shortcuts: [getShortcutKey("Shift+V")] }), _jsx(Shortcut, { label: t("labels.showStroke"), shortcuts: [getShortcutKey("S")] }), _jsx(Shortcut, { label: t("labels.showBackground"), shortcuts: [getShortcutKey("G")] }), _jsx(Shortcut, { label: t("labels.showFonts"), shortcuts: [getShortcutKey("Shift+F")] }), _jsx(Shortcut, { label: t("labels.decreaseFontSize"), shortcuts: [getShortcutKey("CtrlOrCmd+Shift+<")] }), _jsx(Shortcut, { label: t("labels.increaseFontSize"), shortcuts: [getShortcutKey("CtrlOrCmd+Shift+>")] })] })] })] }) }));
 };

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { AppClassProperties, Device, UIAppState } from "../types";
+import type { AppClassProperties, Device, UIAppState } from "../types";
 import "./HintViewer.scss";
 interface HintViewerProps {
     appState: UIAppState;

package/dist/excalidraw/components/IconPicker.js

@@ -72,7 +72,7 @@ function Picker({ options, value, label, onChange, onClose, }) {
         event.nativeEvent.stopImmediatePropagation();
         event.stopPropagation();
     };
-    return (_jsx("div", { className: `picker`, role: "dialog", "aria-modal": "true", "aria-label": label, onKeyDown: handleKeyDown, children: _jsx("div", { className: "picker-content", ref: rGallery, children: options.map((option, i) => (_jsxs("button", { className: clsx("picker-option", {
+    return (_jsx("div", { className: `picker`, role: "dialog", "aria-modal": "true", "aria-label": label, onKeyDown: handleKeyDown, children: _jsx("div", { className: "picker-content", ref: rGallery, children: options.map((option, i) => (_jsxs("button", { type: "button", className: clsx("picker-option", {
                     active: value === option.value,
                 }), onClick: (event) => {
                     event.currentTarget.focus();
@@ -92,7 +92,7 @@ export function IconPicker({ value, label, options, onChange, group = "", }) {
     const [isActive, setActive] = React.useState(false);
     const rPickerButton = React.useRef(null);
     const isRTL = getLanguage().rtl;
-    return (_jsxs("div", { children: [_jsx("button", { name: group, className: isActive ? "active" : "", "aria-label": label, onClick: () => setActive(!isActive), ref: rPickerButton, children: options.find((option) => option.value === value)?.icon }), _jsx(React.Suspense, { fallback: "", children: isActive ? (_jsxs(_Fragment, { children: [_jsx(Popover, { onCloseRequest: (event) => event.target !== rPickerButton.current && setActive(false), ...(isRTL ? { right: 5.5 } : { left: -5.5 }), children: _jsx(Picker, { options: options.filter((opt) => opt.showInPicker !== false), value: value, label: label, onChange: onChange, onClose: () => {
+    return (_jsxs("div", { children: [_jsx("button", { name: group, type: "button", className: isActive ? "active" : "", "aria-label": label, onClick: () => setActive(!isActive), ref: rPickerButton, children: options.find((option) => option.value === value)?.icon }), _jsx(React.Suspense, { fallback: "", children: isActive ? (_jsxs(_Fragment, { children: [_jsx(Popover, { onCloseRequest: (event) => event.target !== rPickerButton.current && setActive(false), ...(isRTL ? { right: 5.5 } : { left: -5.5 }), children: _jsx(Picker, { options: options.filter((opt) => opt.showInPicker !== false), value: value, label: label, onChange: onChange, onClose: () => {
                                     setActive(false);
                                     rPickerButton.current?.focus();
                                 } }) }), _jsx("div", { className: "picker-triangle" })] })) : null })] }));

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { ActionManager } from "../actions/manager";
 import type { AppClassProperties, BinaryFiles, UIAppState } from "../types";
-import { NonDeletedExcalidrawElement } from "../element/types";
+import type { NonDeletedExcalidrawElement } from "../element/types";
 import "./ImageExportDialog.scss";
 export declare const ErrorCanvasPreview: () => JSX.Element;
 export declare const ImageExportDialog: ({ elements, appState, files, actionManager, onExportImage, onCloseRequest, name, }: {

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

@@ -1,6 +1,6 @@
 import React from "react";
-import { Language } from "../i18n";
-import { Theme } from "../element/types";
+import type { Language } from "../i18n";
+import type { Theme } from "../element/types";
 interface Props {
     langCode: Language["code"];
     children: React.ReactElement;

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

@@ -1,8 +1,8 @@
 import React from "react";
-import { NonDeletedExcalidrawElement } from "../element/types";
-import { ExportOpts, BinaryFiles, UIAppState } from "../types";
+import type { NonDeletedExcalidrawElement } from "../element/types";
+import type { ExportOpts, BinaryFiles, UIAppState } from "../types";
 import "./ExportDialog.scss";
-import { ActionManager } from "../actions/manager";
+import type { ActionManager } from "../actions/manager";
 export type ExportCB = (elements: readonly NonDeletedExcalidrawElement[], scale?: number) => void;
 export declare const JSONExportDialog: ({ elements, appState, files, actionManager, exportOpts, canvas, setAppState, }: {
     elements: readonly NonDeletedExcalidrawElement[];

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

@@ -1,8 +1,8 @@
 import React from "react";
-import { ActionManager } from "../actions/manager";
-import { NonDeletedExcalidrawElement } from "../element/types";
-import { Language } from "../i18n";
-import { AppProps, AppState, ExcalidrawProps, BinaryFiles, UIAppState, AppClassProperties } from "../types";
+import type { ActionManager } from "../actions/manager";
+import type { NonDeletedExcalidrawElement } from "../element/types";
+import type { Language } from "../i18n";
+import type { AppProps, AppState, ExcalidrawProps, BinaryFiles, UIAppState, AppClassProperties } from "../types";
 import "./LayerUI.scss";
 import "./Toolbar.scss";
 interface LayerUIProps {

package/dist/excalidraw/components/LayerUI.js

@@ -24,8 +24,6 @@ import { JSONExportDialog } from "./JSONExportDialog";
 import { PenModeButton } from "./PenModeButton";
 import { trackEvent } from "../analytics";
 import { useDevice } from "./App";
-import { Stats } from "./Stats";
-import { actionToggleStats } from "../actions/actionToggleStats";
 import Footer from "./footer/Footer";
 import { isSidebarDockedAtom } from "./Sidebar/Sidebar";
 import { jotaiScope } from "../jotai";
@@ -48,6 +46,8 @@ import Scene from "../scene/Scene";
 import { LaserPointerButton } from "./LaserPointerButton";
 import { MagicSettings } from "./MagicSettings";
 import { TTDDialog } from "./TTDDialog/TTDDialog";
+import { Stats } from "./Stats";
+import { actionToggleStats } from "../actions";
 const DefaultMainMenu = ({ UIOptions }) => {
     return (_jsxs(MainMenu, { __fallback: true, children: [_jsx(MainMenu.DefaultItems.LoadScene, {}), _jsx(MainMenu.DefaultItems.SaveToActiveFile, {}), UIOptions.canvasActions.export && _jsx(MainMenu.DefaultItems.Export, {}), UIOptions.canvasActions.saveAsImage && (_jsx(MainMenu.DefaultItems.SaveAsImage, {})), _jsx(MainMenu.DefaultItems.Help, {}), _jsx(MainMenu.DefaultItems.ClearCanvas, {}), _jsx(MainMenu.Separator, {}), _jsx(MainMenu.Group, { title: "Excalidraw links", children: _jsx(MainMenu.DefaultItems.Socials, {}) }), _jsx(MainMenu.Separator, {}), _jsx(MainMenu.DefaultItems.ToggleTheme, {}), _jsx(MainMenu.DefaultItems.ChangeCanvasBackground, {})] }));
 };
@@ -81,6 +81,9 @@ const LayerUI = ({ actionManager, appState, files, setAppState, elements, canvas
             }, children: _jsx(SelectedShapeActions, { appState: appState, elementsMap: app.scene.getNonDeletedElementsMap(), renderAction: actionManager.renderAction }) }) }));
     const renderFixedSideContainer = () => {
         const shouldRenderSelectedShapeActions = showSelectedShapeActions(appState, elements);
+        const shouldShowStats = appState.stats.open &&
+            !appState.zenModeEnabled &&
+            !appState.viewModeEnabled;
         return (_jsx(FixedSideContainer, { side: "top", children: _jsxs("div", { className: "App-menu App-menu_top", children: [_jsxs(Stack.Col, { gap: 6, className: clsx("App-menu_top__left"), children: [renderCanvasActions(), shouldRenderSelectedShapeActions && renderSelectedShapeActions()] }), !appState.viewModeEnabled && (_jsx(Section, { heading: "shapes", className: "shapes-section", children: (heading) => (_jsxs("div", { style: { position: "relative" }, children: [renderWelcomeScreen && (_jsx(tunnels.WelcomeScreenToolbarHintTunnel.Out, {})), _jsx(Stack.Col, { gap: 4, align: "start", children: _jsxs(Stack.Row, { gap: 1, className: clsx("App-toolbar-container", {
                                             "zen-mode": appState.zenModeEnabled,
                                         }), children: [_jsxs(Island, { padding: 1, className: clsx("App-toolbar", {
@@ -94,7 +97,9 @@ const LayerUI = ({ actionManager, appState, files, setAppState, elements, canvas
                         }), children: [appState.collaborators.size > 0 && (_jsx(UserList, { collaborators: appState.collaborators, userToFollow: appState.userToFollow?.socketId || null })), renderTopRightUI?.(device.editor.isMobile, appState), !appState.viewModeEnabled &&
                                 // hide button when sidebar docked
                                 (!isSidebarDocked ||
-                                    appState.openSidebar?.name !== DEFAULT_SIDEBAR.name) && (_jsx(tunnels.DefaultSidebarTriggerTunnel.Out, {}))] })] }) }));
+                                    appState.openSidebar?.name !== DEFAULT_SIDEBAR.name) && (_jsx(tunnels.DefaultSidebarTriggerTunnel.Out, {})), shouldShowStats && (_jsx(Stats, { scene: app.scene, onClose: () => {
+                                    actionManager.executeAction(actionToggleStats);
+                                }, renderCustomStats: renderCustomStats }))] })] }) }));
     };
     const renderSidebars = () => {
         return (_jsx(DefaultSidebar, { __fallback: true, onDock: (docked) => {
@@ -126,7 +131,7 @@ const LayerUI = ({ actionManager, appState, files, setAppState, elements, canvas
                             }, false);
                             ShapeCache.delete(element);
                         }
-                        Scene.getScene(selectedElements[0])?.informMutation();
+                        Scene.getScene(selectedElements[0])?.triggerUpdate();
                     }
                     else if (colorPickerType === "elementBackground") {
                         setAppState({
@@ -158,9 +163,7 @@ const LayerUI = ({ actionManager, appState, files, setAppState, elements, canvas
                             isSidebarDocked &&
                             device.editor.canFitSidebar
                             ? { width: `calc(100% - ${LIBRARY_SIDEBAR_WIDTH}px)` }
-                            : {}, children: [renderWelcomeScreen && _jsx(tunnels.WelcomeScreenCenterTunnel.Out, {}), renderFixedSideContainer(), _jsx(Footer, { appState: appState, actionManager: actionManager, showExitZenModeBtn: showExitZenModeBtn, renderWelcomeScreen: renderWelcomeScreen }), appState.showStats && (_jsx(Stats, { appState: appState, setAppState: setAppState, elements: elements, onClose: () => {
-                                    actionManager.executeAction(actionToggleStats);
-                                }, renderCustomStats: renderCustomStats })), appState.scrolledOutside && (_jsx("button", { className: "scroll-back-to-content", onClick: () => {
+                            : {}, children: [renderWelcomeScreen && _jsx(tunnels.WelcomeScreenCenterTunnel.Out, {}), renderFixedSideContainer(), _jsx(Footer, { appState: appState, actionManager: actionManager, showExitZenModeBtn: showExitZenModeBtn, renderWelcomeScreen: renderWelcomeScreen }), appState.scrolledOutside && (_jsx("button", { type: "button", className: "scroll-back-to-content", onClick: () => {
                                     setAppState((appState) => ({
                                         ...calculateScrollCenter(elements, appState),
                                     }));

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

@@ -1,6 +1,6 @@
 import React from "react";
-import Library from "../data/library";
-import { LibraryItems, LibraryItem, ExcalidrawProps, UIAppState } from "../types";
+import type Library from "../data/library";
+import type { LibraryItems, LibraryItem, ExcalidrawProps, UIAppState } from "../types";
 import "./LibraryMenu.scss";
 export declare const isLibraryMenuOpenAtom: import("jotai").PrimitiveAtom<boolean> & {
     init: boolean;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ExcalidrawProps, UIAppState } from "../types";
+import type { ExcalidrawProps, UIAppState } from "../types";
 declare const LibraryMenuBrowseButton: ({ theme, id, libraryReturnUrl, }: {
     libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
     theme: UIAppState["theme"];

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ExcalidrawProps, UIAppState } from "../types";
+import type { ExcalidrawProps, UIAppState } from "../types";
 export declare const LibraryMenuControlButtons: ({ libraryReturnUrl, theme, id, style, children, className, }: {
     libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
     theme: UIAppState["theme"];

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { LibraryItem, UIAppState } from "../types";
-import Library from "../data/library";
+import type { LibraryItem, UIAppState } from "../types";
+import type Library from "../data/library";
 export declare const LibraryDropdownMenuButton: React.FC<{
     setAppState: React.Component<any, UIAppState>["setState"];
     selectedItems: LibraryItem["id"][];

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ExcalidrawProps, LibraryItem, LibraryItems, UIAppState } from "../types";
+import type { ExcalidrawProps, LibraryItem, LibraryItems, UIAppState } from "../types";
 import "./LibraryMenuItems.scss";
 export default function LibraryMenuItems({ isLoading, libraryItems, onAddToLibrary, onInsertLibraryItems, pendingElements, theme, id, libraryReturnUrl, onSelectItems, selectedItems, }: {
     isLoading: boolean;

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

@@ -1,7 +1,8 @@
-import React, { ReactNode } from "react";
-import { LibraryItem } from "../types";
-import { ExcalidrawElement, NonDeleted } from "../element/types";
-import { SvgCache } from "../hooks/useLibraryItemSvg";
+import type { ReactNode } from "react";
+import React from "react";
+import type { LibraryItem } from "../types";
+import type { ExcalidrawElement, NonDeleted } from "../element/types";
+import type { SvgCache } from "../hooks/useLibraryItemSvg";
 type LibraryOrPendingItem = (LibraryItem | /* pending library item */ {
     id: null;
     elements: readonly NonDeleted<ExcalidrawElement>[];

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { LibraryItem } from "../types";
+import type { LibraryItem } from "../types";
 import "./LibraryUnit.scss";
-import { SvgCache } from "../hooks/useLibraryItemSvg";
+import type { SvgCache } from "../hooks/useLibraryItemSvg";
 export declare const LibraryUnit: import("react").MemoExoticComponent<({ id, elements, isPending, onClick, selected, onToggle, onDrag, svgCache, }: {
     id: LibraryItem["id"] | /** for pending item */ null;
     elements?: readonly import("../element/types").NonDeleted<import("../element/types").ExcalidrawElement>[] | undefined;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Theme } from "../element/types";
+import type { Theme } from "../element/types";
 export declare const LoadingMessage: React.FC<{
     delay?: number;
     theme?: Theme;

package/dist/excalidraw/components/MagicSettings.js

@@ -33,8 +33,8 @@ export const MagicSettings = (props) => {
                         marginLeft: "1rem",
                         fontSize: 14,
                         borderRadius: "12px",
-                        color: "#000",
-                        background: "pink",
+                        background: "var(--color-promo)",
+                        color: "var(--color-surface-lowest)",
                     }, children: "Experimental" })] }), className: "MagicSettings", autofocus: false, children: _jsx(TTDDialogTabs, { dialog: "settings", tab: appState.openDialog.tab, children: _jsxs(TTDDialogTab
             //  className="ttd-dialog-content"
             , { 

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

@@ -1,7 +1,7 @@
 import React from "react";
-import { AppClassProperties, AppProps, AppState, Device, ExcalidrawProps, UIAppState } from "../types";
-import { ActionManager } from "../actions/manager";
-import { NonDeletedExcalidrawElement } from "../element/types";
+import type { AppClassProperties, AppProps, AppState, Device, ExcalidrawProps, UIAppState } from "../types";
+import type { ActionManager } from "../actions/manager";
+import type { NonDeletedExcalidrawElement } from "../element/types";
 type MobileMenuProps = {
     appState: UIAppState;
     actionManager: ActionManager;