@excalidraw/excalidraw 0.17.1-1d71f84 → 0.17.1-2f9526d

package/dist/excalidraw/components/ButtonIconSelect.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 // TODO: It might be "clever" to add option.icon to the existing component <ButtonSelect />
-export const ButtonIconSelect = (props) => (_jsx("div", { className: "buttonList buttonListIcon", children: props.options.map((option) => props.type === "button" ? (_jsx("button", { onClick: (event) => props.onClick(option.value, event), className: clsx({
+export const ButtonIconSelect = (props) => (_jsx("div", { className: "buttonList buttonListIcon", children: props.options.map((option) => props.type === "button" ? (_jsx("button", { type: "button", onClick: (event) => props.onClick(option.value, event), className: clsx({
             active: option.active ?? props.value === option.value,
         }), "data-testid": option.testId, title: option.text, children: option.icon }, option.text)) : (_jsxs("label", { className: clsx({ active: props.value === option.value }), title: option.text, children: [_jsx("input", { type: "radio", name: props.group, onChange: () => props.onChange(option.value), checked: props.value === option.value, "data-testid": option.testId }), option.icon] }, option.text))) }));

package/dist/excalidraw/components/CheckboxItem.js

@@ -6,5 +6,5 @@ export const CheckboxItem = ({ children, checked, onChange, className }) => {
     return (_jsxs("div", { className: clsx("Checkbox", className, { "is-checked": checked }), onClick: (event) => {
             onChange(!checked, event);
             event.currentTarget.querySelector(".Checkbox-box").focus();
-        }, children: [_jsx("button", { className: "Checkbox-box", role: "checkbox", "aria-checked": checked, children: checkIcon }), _jsx("div", { className: "Checkbox-label", children: children })] }));
+        }, children: [_jsx("button", { type: "button", className: "Checkbox-box", role: "checkbox", "aria-checked": checked, children: checkIcon }), _jsx("div", { className: "Checkbox-label", children: children })] }));
 };

package/dist/excalidraw/components/ColorPicker/ColorInput.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ColorPickerType } from "./colorPickerUtils";
+import type { ColorPickerType } from "./colorPickerUtils";
 interface ColorInputProps {
     color: string;
     onChange: (color: string) => void;

package/dist/excalidraw/components/ColorPicker/ColorInput.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useCallback, useEffect, useRef, useState } from "react";
 import { getColor } from "./ColorPicker";
 import { useAtom } from "jotai";
-import { activeColorPickerSectionAtom, } from "./colorPickerUtils";
+import { activeColorPickerSectionAtom } from "./colorPickerUtils";
 import { eyeDropperIcon } from "../icons";
 import { jotaiScope } from "../../jotai";
 import { KEYS } from "../../keys";

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { ExcalidrawElement } from "../../element/types";
-import { AppState } from "../../types";
-import { ColorPickerType } from "./colorPickerUtils";
-import { ColorTuple, ColorPaletteCustom } from "../../colors";
+import type { ExcalidrawElement } from "../../element/types";
+import type { AppState } from "../../types";
+import type { ColorPickerType } from "./colorPickerUtils";
+import type { ColorTuple, ColorPaletteCustom } from "../../colors";
 import "./ColorPicker.scss";
 export declare const getColor: (color: string) => string | null;
 interface ColorPickerProps {

package/dist/excalidraw/components/ColorPicker/ColorPicker.js

@@ -4,7 +4,7 @@ import { TopPicks } from "./TopPicks";
 import { Picker } from "./Picker";
 import * as Popover from "@radix-ui/react-popover";
 import { useAtom } from "jotai";
-import { activeColorPickerSectionAtom, } from "./colorPickerUtils";
+import { activeColorPickerSectionAtom } from "./colorPickerUtils";
 import { useDevice, useExcalidrawContainer } from "../App";
 import { COLOR_PALETTE } from "../../colors";
 import PickerHeading from "./PickerHeading";

package/dist/excalidraw/components/ColorPicker/Picker.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-import { ExcalidrawElement } from "../../element/types";
-import { ColorPickerType } from "./colorPickerUtils";
-import { ColorPaletteCustom } from "../../colors";
+import type { ExcalidrawElement } from "../../element/types";
+import type { ColorPickerType } from "./colorPickerUtils";
+import type { ColorPaletteCustom } from "../../colors";
 interface PickerProps {
     color: string;
     onChange: (color: string) => void;

package/dist/excalidraw/components/ColorPicker/PickerColorList.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ColorPaletteCustom } from "../../colors";
+import type { ColorPaletteCustom } from "../../colors";
 interface PickerColorListProps {
     palette: ColorPaletteCustom;
     color: string;

package/dist/excalidraw/components/ColorPicker/PickerHeading.d.ts

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

package/dist/excalidraw/components/ColorPicker/ShadeList.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ColorPaletteCustom } from "../../colors";
+import type { ColorPaletteCustom } from "../../colors";
 interface ShadeListProps {
     hex: string;
     onChange: (color: string) => void;

package/dist/excalidraw/components/ColorPicker/TopPicks.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ColorPickerType } from "./colorPickerUtils";
+import type { ColorPickerType } from "./colorPickerUtils";
 interface TopPicksProps {
     onChange: (color: string) => void;
     type: ColorPickerType;

package/dist/excalidraw/components/ColorPicker/colorPickerUtils.d.ts

@@ -1,5 +1,5 @@
-import { ExcalidrawElement } from "../../element/types";
-import { ColorPickerColor, ColorPaletteCustom } from "../../colors";
+import type { ExcalidrawElement } from "../../element/types";
+import type { ColorPickerColor, ColorPaletteCustom } from "../../colors";
 export declare const getColorNameAndShadeFromColor: ({ palette, color, }: {
     palette: ColorPaletteCustom;
     color: string;

package/dist/excalidraw/components/ColorPicker/colorPickerUtils.js

@@ -1,5 +1,5 @@
 import { atom } from "jotai";
-import { MAX_CUSTOM_COLORS_USED_IN_CANVAS, } from "../../colors";
+import { MAX_CUSTOM_COLORS_USED_IN_CANVAS } from "../../colors";
 export const getColorNameAndShadeFromColor = ({ palette, color, }) => {
     for (const [colorName, colorVal] of Object.entries(palette)) {
         if (Array.isArray(colorVal)) {

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { ColorPaletteCustom } from "../../colors";
-import { ActiveColorPickerSectionAtomType } from "./colorPickerUtils";
+import type { ColorPaletteCustom } from "../../colors";
+import type { ActiveColorPickerSectionAtomType } from "./colorPickerUtils";
 interface ColorPickerKeyNavHandlerProps {
     event: React.KeyboardEvent;
     activeColorPickerSection: ActiveColorPickerSectionAtomType;

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

@@ -1,5 +1,5 @@
 import { KEYS } from "../../keys";
-import { COLORS_PER_ROW, COLOR_PALETTE, } from "../../colors";
+import { COLORS_PER_ROW, COLOR_PALETTE } from "../../colors";
 import { colorPickerHotkeyBindings, getColorNameAndShadeFromColor, } from "./colorPickerUtils";
 const arrowHandler = (eventKey, currentIndex, length) => {
     const rows = Math.ceil(length / COLORS_PER_ROW);

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CommandPaletteItem } from "./types";
+import type { CommandPaletteItem } from "./types";
 import * as defaultItems from "./defaultCommandPaletteItems";
 import "./CommandPalette.scss";
 export declare const DEFAULT_CATEGORIES: {

package/dist/excalidraw/components/CommandPalette/CommandPalette.js

@@ -7,7 +7,7 @@ import { TextField } from "../TextField";
 import clsx from "clsx";
 import { getSelectedElements } from "../../scene";
 import { t } from "../../i18n";
-import { getShortcutFromShortcutName, } from "../../actions/shortcuts";
+import { getShortcutFromShortcutName } from "../../actions/shortcuts";
 import { DEFAULT_SIDEBAR, EVENT } from "../../constants";
 import { LockedIcon, UnlockedIcon, clockIcon, searchIcon, boltIcon, bucketFillIcon, ExportImageIcon, mermaidLogoIcon, brainIconThin, LibraryIcon, } from "../icons";
 import fuzzy from "fuzzy";
@@ -23,6 +23,8 @@ import { actionClearCanvas, actionLink } from "../../actions";
 import { jotaiStore } from "../../jotai";
 import { activeConfirmDialogAtom } from "../ActiveConfirmDialog";
 import * as defaultItems from "./defaultCommandPaletteItems";
+import { trackEvent } from "../../analytics";
+import { useStable } from "../../hooks/useStable";
 import "./CommandPalette.scss";
 const lastUsedPaletteItem = atom(null);
 export const DEFAULT_CATEGORIES = {
@@ -71,11 +73,17 @@ export const CommandPalette = Object.assign((props) => {
             if (isCommandPaletteToggleShortcut(event)) {
                 event.preventDefault();
                 event.stopPropagation();
-                setAppState((appState) => ({
-                    openDialog: appState.openDialog?.name === "commandPalette"
+                setAppState((appState) => {
+                    const nextState = appState.openDialog?.name === "commandPalette"
                         ? null
-                        : { name: "commandPalette" },
-                }));
+                        : { name: "commandPalette" };
+                    if (nextState) {
+                        trackEvent("command_palette", "open", "shortcut");
+                    }
+                    return {
+                        openDialog: nextState,
+                    };
+                });
             }
         };
         window.addEventListener(EVENT.KEYDOWN, commandPaletteShortcut, {
@@ -101,10 +109,18 @@ function CommandPaletteInner({ customCommandPaletteItems, }) {
     const [lastUsed, setLastUsed] = useAtom(lastUsedPaletteItem);
     const [allCommands, setAllCommands] = useState(null);
     const inputRef = useRef(null);
+    const stableDeps = useStable({
+        uiAppState,
+        customCommandPaletteItems,
+        appProps,
+    });
     useEffect(() => {
-        if (!uiAppState || !app.scene || !actionManager) {
-            return;
-        }
+        // these props change often and we don't want them to re-run the effect
+        // which would renew `allCommands`, cascading down and resetting state.
+        //
+        // This means that the commands won't update on appState/appProps changes
+        // while the command palette is open
+        const { uiAppState, customCommandPaletteItems, appProps } = stableDeps;
         const getActionLabel = (action) => {
             let label = "";
             if (action.label) {
@@ -148,10 +164,10 @@ function CommandPaletteInner({ customCommandPaletteItems, }) {
                 actionManager.actions.deleteSelectedElements,
                 actionManager.actions.copyStyles,
                 actionManager.actions.pasteStyles,
+                actionManager.actions.bringToFront,
+                actionManager.actions.bringForward,
                 actionManager.actions.sendBackward,
                 actionManager.actions.sendToBack,
-                actionManager.actions.bringForward,
-                actionManager.actions.bringToFront,
                 actionManager.actions.alignTop,
                 actionManager.actions.alignBottom,
                 actionManager.actions.alignLeft,
@@ -189,6 +205,7 @@ function CommandPaletteInner({ customCommandPaletteItems, }) {
                 actionManager.actions.zoomToFit,
                 actionManager.actions.zenMode,
                 actionManager.actions.viewMode,
+                actionManager.actions.gridMode,
                 actionManager.actions.objectsSnapMode,
                 actionManager.actions.toggleShortcuts,
                 actionManager.actions.selectAll,
@@ -399,7 +416,7 @@ function CommandPaletteInner({ customCommandPaletteItems, }) {
                     ...command,
                     icon: command.icon || boltIcon,
                     order: command.order ?? getCategoryOrder(command.category),
-                    haystack: `${deburr(command.label)} ${command.keywords?.join(" ") || ""}`,
+                    haystack: `${deburr(command.label.toLocaleLowerCase())} ${command.keywords?.join(" ") || ""}`,
                 };
             });
             setAllCommands(allCommands);
@@ -407,15 +424,13 @@ function CommandPaletteInner({ customCommandPaletteItems, }) {
                 null);
         }
     }, [
+        stableDeps,
         app,
-        appProps,
-        uiAppState,
         actionManager,
         setAllCommands,
         lastUsed?.label,
         setLastUsed,
         setAppState,
-        customCommandPaletteItems,
     ]);
     const [commandSearch, setCommandSearch] = useState("");
     const [currentCommand, setCurrentCommand] = useState(null);
@@ -569,7 +584,7 @@ function CommandPaletteInner({ customCommandPaletteItems, }) {
             setCurrentCommand(showLastUsed ? lastUsed : matchingCommands[0] || null);
             return;
         }
-        const _query = deburr(commandSearch.replace(/[<>-_| ]/g, ""));
+        const _query = deburr(commandSearch.toLocaleLowerCase().replace(/[<>_| -]/g, ""));
         matchingCommands = fuzzy
             .filter(_query, matchingCommands, {
             extract: (command) => command.haystack,

package/dist/excalidraw/components/CommandPalette/defaultCommandPaletteItems.d.ts

@@ -1,2 +1,2 @@
-import { CommandPaletteItem } from "./types";
+import type { CommandPaletteItem } from "./types";
 export declare const toggleTheme: CommandPaletteItem;

package/dist/excalidraw/components/CommandPalette/types.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { ActionManager } from "../../actions/manager";
-import { Action } from "../../actions/types";
-import { UIAppState } from "../../types";
+import type { ActionManager } from "../../actions/manager";
+import type { Action } from "../../actions/types";
+import type { UIAppState } from "../../types";
 export type CommandPaletteItem = {
     label: string;
     /** additional keywords to match against

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { DialogProps } from "./Dialog";
+import type { DialogProps } from "./Dialog";
 import "./ConfirmDialog.scss";
 interface Props extends Omit<DialogProps, "onCloseRequest"> {
     onConfirm: () => void;

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

@@ -1,6 +1,6 @@
 import "./ContextMenu.scss";
-import { Action } from "../actions/types";
-import { ActionManager } from "../actions/manager";
+import type { Action } from "../actions/types";
+import type { ActionManager } from "../actions/manager";
 import React from "react";
 export type ContextMenuItem = typeof CONTEXT_MENU_SEPARATOR | Action;
 export type ContextMenuItems = (ContextMenuItem | false | null | undefined)[];

package/dist/excalidraw/components/ContextMenu.js

@@ -3,7 +3,7 @@ import clsx from "clsx";
 import { Popover } from "./Popover";
 import { t } from "../i18n";
 import "./ContextMenu.scss";
-import { getShortcutFromShortcutName, } from "../actions/shortcuts";
+import { getShortcutFromShortcutName } from "../actions/shortcuts";
 import { useExcalidrawAppState, useExcalidrawElements } from "./App";
 import React from "react";
 export const CONTEXT_MENU_SEPARATOR = "separator";
@@ -46,7 +46,7 @@ export const ContextMenu = React.memo(({ actionManager, items, top, left, onClos
                         onClose(() => {
                             actionManager.executeAction(item, "contextMenu");
                         });
-                    }, children: _jsxs("button", { className: clsx("context-menu-item", {
+                    }, children: _jsxs("button", { type: "button", className: clsx("context-menu-item", {
                             dangerous: actionName === "deleteSelectedElements",
                             checkmark: item.checked?.(appState),
                         }), children: [_jsx("div", { className: "context-menu-item__label", children: label }), _jsx("kbd", { className: "context-menu-item__shortcut", children: actionName

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import "./ToolIcon.scss";
-import { Theme } from "../element/types";
+import type { Theme } from "../element/types";
 export declare const DarkModeToggle: (props: {
     value: Theme;
     onChange: (value: Theme) => void;

package/dist/excalidraw/components/DarkModeToggle.js

@@ -7,7 +7,9 @@ import { THEME } from "../constants";
 // but this could be added in the future.
 export const DarkModeToggle = (props) => {
     const title = props.title ||
-        (props.value === "dark" ? t("buttons.lightMode") : t("buttons.darkMode"));
+        (props.value === THEME.DARK
+            ? t("buttons.lightMode")
+            : t("buttons.darkMode"));
     return (_jsx(ToolButton, { type: "icon", icon: props.value === THEME.LIGHT ? ICONS.MOON : ICONS.SUN, title: title, "aria-label": title, onClick: () => props.onChange(props.value === THEME.DARK ? THEME.LIGHT : THEME.DARK), "data-testid": "toggle-dark-mode" }));
 };
 const ICONS = {

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { MarkOptional } from "../utility-types";
-import { SidebarProps, SidebarTriggerProps } from "./Sidebar/common";
+import type { MarkOptional } from "../utility-types";
+import type { SidebarProps, SidebarTriggerProps } from "./Sidebar/common";
 export declare const DefaultSidebar: import("react").FC<Omit<MarkOptional<Omit<{
     name: string;
     children: import("react").ReactNode;

package/dist/excalidraw/components/Dialog.js

@@ -72,5 +72,5 @@ export const Dialog = (props) => {
     };
     return (_jsx(Modal, { className: clsx("Dialog", props.className, {
             "Dialog--fullscreen": isFullscreen,
-        }), labelledBy: "dialog-title", maxWidth: getDialogSize(props.size), onCloseRequest: onClose, closeOnClickOutside: props.closeOnClickOutside, children: _jsxs(Island, { ref: setIslandNode, children: [props.title && (_jsx("h2", { id: `${id}-dialog-title`, className: "Dialog__title", children: _jsx("span", { className: "Dialog__titleContent", children: props.title }) })), isFullscreen && (_jsx("button", { className: "Dialog__close", onClick: onClose, title: t("buttons.close"), "aria-label": t("buttons.close"), children: CloseIcon })), _jsx("div", { className: "Dialog__content", children: props.children })] }) }));
+        }), labelledBy: "dialog-title", maxWidth: getDialogSize(props.size), onCloseRequest: onClose, closeOnClickOutside: props.closeOnClickOutside, children: _jsxs(Island, { ref: setIslandNode, children: [props.title && (_jsx("h2", { id: `${id}-dialog-title`, className: "Dialog__title", children: _jsx("span", { className: "Dialog__titleContent", children: props.title }) })), isFullscreen && (_jsx("button", { className: "Dialog__close", onClick: onClose, title: t("buttons.close"), "aria-label": t("buttons.close"), type: "button", children: CloseIcon })), _jsx("div", { className: "Dialog__content", children: props.children })] }) }));
 };

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

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import "./DialogActionButton.scss";
 interface DialogActionButtonProps {
     label: string;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import "./EyeDropper.scss";
-import { ColorPickerType } from "./ColorPicker/colorPickerUtils";
-import { ExcalidrawElement } from "../element/types";
+import type { ColorPickerType } from "./ColorPicker/colorPickerUtils";
+import type { ExcalidrawElement } from "../element/types";
 export type EyeDropperProperties = {
     keepOpenOnAlt: boolean;
     swapPreviewOnAlt?: boolean;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { UserToFollow } from "../../types";
+import type { UserToFollow } from "../../types";
 import "./FollowMode.scss";
 interface FollowModeProps {
     width: number;

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/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.title"), 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: [

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

@@ -126,7 +126,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({
@@ -160,7 +160,7 @@ const LayerUI = ({ actionManager, appState, files, setAppState, elements, canvas
                             ? { 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: () => {
+                                }, renderCustomStats: renderCustomStats })), 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>[];