@excalidraw/excalidraw 0.17.1-88812e0 → 0.17.1-96eeec5

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";
@@ -164,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,
@@ -416,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);
@@ -584,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/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

@@ -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"),

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;