@excalidraw/excalidraw 0.17.1-d9bbf1e → 0.17.1-e63dd02

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, fonts }]) => {
+        const fontDescriptor = {
+            value: familyId,
+            icon: metadata.icon,
+            text: fonts[0].fontFace.family,
+        };
+        if (metadata.deprecated) {
+            Object.assign(fontDescriptor, {
+                deprecated: metadata.deprecated,
+                badge: {
+                    type: DropDownMenuItemBadgeType.RED,
+                    placeholder: t("fontList.badge.old"),
+                },
+            });
+        }
+        return fontDescriptor;
+    })
+        .sort((a, b) => a.text.toLowerCase() > b.text.toLowerCase() ? 1 : -1), []);
+    const sceneFamilies = useMemo(() => new Set(fonts.getSceneFontFamilies()), 
+    // 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

@@ -57,7 +57,7 @@ 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.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.title"), shortcuts: [getShortcutKey("Alt+/")] }), _jsx(Shortcut, { label: t("commandPalette.title"), shortcuts: isFirefox
+                                    ], 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"),
@@ -81,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/HintViewer.js

@@ -14,10 +14,13 @@ const getHints = ({ appState, isMobile, device, app }) => {
         return t("hints.eraserRevert");
     }
     if (activeTool.type === "arrow" || activeTool.type === "line") {
-        if (!multiMode) {
-            return t("hints.linearElement");
+        if (multiMode) {
+            return t("hints.linearElementMulti");
         }
-        return t("hints.linearElementMulti");
+        if (activeTool.type === "arrow") {
+            return t("hints.arrowTool", { arrowShortcut: getShortcutKey("A") });
+        }
+        return t("hints.linearElement");
     }
     if (activeTool.type === "freedraw") {
         return t("hints.freeDraw");

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;

package/dist/excalidraw/components/MobileMenu.js

@@ -11,8 +11,6 @@ import { Section } from "./Section";
 import { SCROLLBAR_WIDTH, SCROLLBAR_MARGIN } from "../scene/scrollbars";
 import { LockButton } from "./LockButton";
 import { PenModeButton } from "./PenModeButton";
-import { Stats } from "./Stats";
-import { actionToggleStats } from "../actions";
 import { HandButton } from "./HandButton";
 import { isHandToolActive } from "../appState";
 import { useTunnels } from "../context/tunnels";
@@ -27,9 +25,7 @@ export const MobileMenu = ({ appState, elements, actionManager, setAppState, onL
         }
         return (_jsxs("div", { className: "App-toolbar-content", children: [_jsx(MainMenuTunnel.Out, {}), actionManager.renderAction("toggleEditMenu"), actionManager.renderAction("undo"), actionManager.renderAction("redo"), actionManager.renderAction(appState.multiElement ? "finalize" : "duplicateSelection"), actionManager.renderAction("deleteSelectedElements")] }));
     };
-    return (_jsxs(_Fragment, { children: [renderSidebars(), !appState.viewModeEnabled && renderToolbar(), !appState.openMenu && appState.showStats && (_jsx(Stats, { appState: appState, setAppState: setAppState, elements: elements, onClose: () => {
-                    actionManager.executeAction(actionToggleStats);
-                }, renderCustomStats: renderCustomStats })), _jsx("div", { className: "App-bottom-bar", style: {
+    return (_jsxs(_Fragment, { children: [renderSidebars(), !appState.viewModeEnabled && renderToolbar(), _jsx("div", { className: "App-bottom-bar", style: {
                     marginBottom: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
                     marginLeft: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
                     marginRight: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
@@ -37,7 +33,7 @@ export const MobileMenu = ({ appState, elements, actionManager, setAppState, onL
                             !appState.viewModeEnabled &&
                             showSelectedShapeActions(appState, elements) ? (_jsx(Section, { className: "App-mobile-menu", heading: "selectedShapeActions", children: _jsx(SelectedShapeActions, { appState: appState, elementsMap: app.scene.getNonDeletedElementsMap(), renderAction: actionManager.renderAction }) })) : null, _jsxs("footer", { className: "App-toolbar", children: [renderAppToolbar(), appState.scrolledOutside &&
                                     !appState.openMenu &&
-                                    !appState.openSidebar && (_jsx("button", { className: "scroll-back-to-content", onClick: () => {
+                                    !appState.openSidebar && (_jsx("button", { type: "button", className: "scroll-back-to-content", onClick: () => {
                                         setAppState((appState) => ({
                                             ...calculateScrollCenter(elements, appState),
                                         }));

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import "./Modal.scss";
-import { AppState } from "../types";
+import type { AppState } from "../types";
 export declare const Modal: React.FC<{
     className?: string;
     children: React.ReactNode;

package/dist/excalidraw/components/OverwriteConfirm/OverwriteConfirmState.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import type React from "react";
 export type OverwriteConfirmState = {
     active: true;
     title: string;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { UIAppState } from "../types";
+import type { UIAppState } from "../types";
 import "./PasteChartDialog.scss";
 export declare const PasteChartDialog: ({ setAppState, appState, onClose, }: {
     appState: UIAppState;

package/dist/excalidraw/components/PasteChartDialog.js

@@ -35,7 +35,7 @@ const ChartPreviewBtn = (props) => {
             previewNode.replaceChildren();
         };
     }, [props.spreadsheet, props.chartType, props.selected]);
-    return (_jsx("button", { className: "ChartPreview", onClick: () => {
+    return (_jsx("button", { type: "button", className: "ChartPreview", onClick: () => {
             if (chartElements) {
                 props.onClick(props.chartType, chartElements);
             }

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

@@ -0,0 +1,15 @@
+import React, { type ReactNode } from "react";
+import * as Popover from "@radix-ui/react-popover";
+interface PropertiesPopoverProps {
+    className?: string;
+    container: HTMLDivElement | null;
+    children: ReactNode;
+    style?: object;
+    onClose: () => void;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    onPointerLeave?: React.PointerEventHandler<HTMLDivElement>;
+    onFocusOutside?: Popover.DismissableLayerProps["onFocusOutside"];
+    onPointerDownOutside?: Popover.DismissableLayerProps["onPointerDownOutside"];
+}
+export declare const PropertiesPopover: React.ForwardRefExoticComponent<PropertiesPopoverProps & React.RefAttributes<HTMLDivElement>>;
+export {};