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

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import "./ButtonIcon.scss";
+interface ButtonIconProps {
+    icon: JSX.Element;
+    title: string;
+    className?: string;
+    testId?: string;
+    /** if not supplied, defaults to value identity check */
+    active?: boolean;
+    /** include standalone style (could interfere with parent styles) */
+    standalone?: boolean;
+    onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+export declare const ButtonIcon: import("react").ForwardRefExoticComponent<ButtonIconProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/excalidraw/components/ButtonIcon.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import "./ButtonIcon.scss";
+export const ButtonIcon = forwardRef((props, ref) => {
+    const { title, className, testId, active, standalone, icon, onClick } = props;
+    return (_jsx("button", { type: "button", ref: ref, title: title, "data-testid": testId, className: clsx(className, { standalone, active }), onClick: onClick, children: icon }, title));
+});

package/dist/excalidraw/components/ButtonIconSelect.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
+import { ButtonIcon } from "./ButtonIcon";
 // 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({
-            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))) }));
+export const ButtonIconSelect = (props) => (_jsx("div", { className: "buttonList", children: props.options.map((option) => props.type === "button" ? (_jsx(ButtonIcon, { icon: option.icon, title: option.text, testId: option.testId, active: option.active ?? props.value === option.value, onClick: (event) => props.onClick(option.value, event) }, 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/ButtonSeparator.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ButtonSeparator: () => JSX.Element;

package/dist/excalidraw/components/ButtonSeparator.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ButtonSeparator = () => (_jsx("div", { style: {
+        width: 1,
+        height: "1rem",
+        backgroundColor: "var(--default-border-color)",
+        margin: "0 auto",
+    } }));

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

@@ -1,19 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { isInteractive, isTransparent, isWritableElement } from "../../utils";
+import { isTransparent } from "../../utils";
 import { TopPicks } from "./TopPicks";
+import { ButtonSeparator } from "../ButtonSeparator";
 import { Picker } from "./Picker";
 import * as Popover from "@radix-ui/react-popover";
 import { useAtom } from "jotai";
-import { activeColorPickerSectionAtom, } from "./colorPickerUtils";
-import { useDevice, useExcalidrawContainer } from "../App";
+import { activeColorPickerSectionAtom } from "./colorPickerUtils";
+import { useExcalidrawContainer } from "../App";
 import { COLOR_PALETTE } from "../../colors";
 import PickerHeading from "./PickerHeading";
 import { t } from "../../i18n";
 import clsx from "clsx";
+import { useRef } from "react";
 import { jotaiScope } from "../../jotai";
 import { ColorInput } from "./ColorInput";
-import { useRef } from "react";
 import { activeEyeDropperAtom } from "../EyeDropper";
+import { PropertiesPopover } from "../PropertiesPopover";
 import "./ColorPicker.scss";
 const isValidColor = (color) => {
     const style = new Option().style;
@@ -34,10 +36,9 @@ export const getColor = (color) => {
             : null;
 };
 const ColorPickerPopupContent = ({ type, color, onChange, label, elements, palette = COLOR_PALETTE, updateData, }) => {
+    const { container } = useExcalidrawContainer();
     const [, setActiveColorPickerSection] = useAtom(activeColorPickerSectionAtom);
     const [eyeDropperState, setEyeDropperState] = useAtom(activeEyeDropperAtom, jotaiScope);
-    const { container } = useExcalidrawContainer();
-    const device = useDevice();
     const colorInputJSX = (_jsxs("div", { children: [_jsx(PickerHeading, { children: t("colorPicker.hexCode") }), _jsx(ColorInput, { color: color, label: label, onChange: (color) => {
                     onChange(color);
                 }, colorPickerType: type })] }));
@@ -47,92 +48,59 @@ const ColorPickerPopupContent = ({ type, color, onChange, label, elements, palet
             ?.querySelector(".color-picker-content")
             ?.focus();
     };
-    return (_jsx(Popover.Portal, { container: container, children: _jsxs(Popover.Content, { ref: popoverRef, className: "focus-visible-none", "data-prevent-outside-click": true, onFocusOutside: (event) => {
-                focusPickerContent();
+    return (_jsx(PropertiesPopover, { container: container, style: { maxWidth: "208px" }, onFocusOutside: (event) => {
+            // refocus due to eye dropper
+            focusPickerContent();
+            event.preventDefault();
+        }, onPointerDownOutside: (event) => {
+            if (eyeDropperState) {
+                // prevent from closing if we click outside the popover
+                // while eyedropping (e.g. click when clicking the sidebar;
+                // the eye-dropper-backdrop is prevented downstream)
                 event.preventDefault();
-            }, onPointerDownOutside: (event) => {
+            }
+        }, onClose: () => {
+            updateData({ openPopup: null });
+            setActiveColorPickerSection(null);
+        }, children: palette ? (_jsx(Picker, { palette: palette, color: color, onChange: (changedColor) => {
+                onChange(changedColor);
+            }, onEyeDropperToggle: (force) => {
+                setEyeDropperState((state) => {
+                    if (force) {
+                        state = state || {
+                            keepOpenOnAlt: true,
+                            onSelect: onChange,
+                            colorPickerType: type,
+                        };
+                        state.keepOpenOnAlt = true;
+                        return state;
+                    }
+                    return force === false || state
+                        ? null
+                        : {
+                            keepOpenOnAlt: false,
+                            onSelect: onChange,
+                            colorPickerType: type,
+                        };
+                });
+            }, onEscape: (event) => {
                 if (eyeDropperState) {
-                    // prevent from closing if we click outside the popover
-                    // while eyedropping (e.g. click when clicking the sidebar;
-                    // the eye-dropper-backdrop is prevented downstream)
-                    event.preventDefault();
+                    setEyeDropperState(null);
                 }
-            }, onCloseAutoFocus: (e) => {
-                e.stopPropagation();
-                // prevents focusing the trigger
-                e.preventDefault();
-                // return focus to excalidraw container unless
-                // user focuses an interactive element, such as a button, or
-                // enters the text editor by clicking on canvas with the text tool
-                if (container && !isInteractive(document.activeElement)) {
-                    container.focus();
+                else {
+                    updateData({ openPopup: null });
                 }
-                updateData({ openPopup: null });
-                setActiveColorPickerSection(null);
-            }, side: device.editor.isMobile && !device.viewport.isLandscape
-                ? "bottom"
-                : "right", align: device.editor.isMobile && !device.viewport.isLandscape
-                ? "center"
-                : "start", alignOffset: -16, sideOffset: 20, style: {
-                zIndex: "var(--zIndex-layerUI)",
-                backgroundColor: "var(--popup-bg-color)",
-                maxWidth: "208px",
-                maxHeight: window.innerHeight,
-                padding: "12px",
-                borderRadius: "8px",
-                boxSizing: "border-box",
-                overflowY: "auto",
-                boxShadow: "0px 7px 14px rgba(0, 0, 0, 0.05), 0px 0px 3.12708px rgba(0, 0, 0, 0.0798), 0px 0px 0.931014px rgba(0, 0, 0, 0.1702)",
-            }, children: [palette ? (_jsx(Picker, { palette: palette, color: color, onChange: (changedColor) => {
-                        onChange(changedColor);
-                    }, onEyeDropperToggle: (force) => {
-                        setEyeDropperState((state) => {
-                            if (force) {
-                                state = state || {
-                                    keepOpenOnAlt: true,
-                                    onSelect: onChange,
-                                    colorPickerType: type,
-                                };
-                                state.keepOpenOnAlt = true;
-                                return state;
-                            }
-                            return force === false || state
-                                ? null
-                                : {
-                                    keepOpenOnAlt: false,
-                                    onSelect: onChange,
-                                    colorPickerType: type,
-                                };
-                        });
-                    }, onEscape: (event) => {
-                        if (eyeDropperState) {
-                            setEyeDropperState(null);
-                        }
-                        else if (isWritableElement(event.target)) {
-                            focusPickerContent();
-                        }
-                        else {
-                            updateData({ openPopup: null });
-                        }
-                    }, label: label, type: type, elements: elements, updateData: updateData, children: colorInputJSX })) : (colorInputJSX), _jsx(Popover.Arrow, { width: 20, height: 10, style: {
-                        fill: "var(--popup-bg-color)",
-                        filter: "drop-shadow(rgba(0, 0, 0, 0.05) 0px 3px 2px)",
-                    } })] }) }));
+            }, label: label, type: type, elements: elements, updateData: updateData, children: colorInputJSX })) : (colorInputJSX) }));
 };
 const ColorPickerTrigger = ({ label, color, type, }) => {
-    return (_jsx(Popover.Trigger, { type: "button", className: clsx("color-picker__button active-color", {
+    return (_jsx(Popover.Trigger, { type: "button", className: clsx("color-picker__button active-color properties-trigger", {
             "is-transparent": color === "transparent" || !color,
         }), "aria-label": label, style: color ? { "--swatch-color": color } : undefined, title: type === "elementStroke"
             ? t("labels.showStroke")
             : t("labels.showBackground"), children: _jsx("div", { className: "color-picker__button-outline" }) }));
 };
 export const ColorPicker = ({ type, color, onChange, label, elements, palette = COLOR_PALETTE, topPicks, updateData, appState, }) => {
-    return (_jsx("div", { children: _jsxs("div", { role: "dialog", "aria-modal": "true", className: "color-picker-container", children: [_jsx(TopPicks, { activeColor: color, onChange: onChange, type: type, topPicks: topPicks }), _jsx("div", { style: {
-                        width: 1,
-                        height: "100%",
-                        backgroundColor: "var(--default-border-color)",
-                        margin: "0 auto",
-                    } }), _jsxs(Popover.Root, { open: appState.openPopup === type, onOpenChange: (open) => {
+    return (_jsx("div", { children: _jsxs("div", { role: "dialog", "aria-modal": "true", className: "color-picker-container", children: [_jsx(TopPicks, { activeColor: color, onChange: onChange, type: type, topPicks: topPicks }), _jsx(ButtonSeparator, {}), _jsxs(Popover.Root, { open: appState.openPopup === type, onOpenChange: (open) => {
                         updateData({ openPopup: open ? type : null });
                     }, children: [_jsx(ColorPickerTrigger, { color: color, label: label, type: type }), appState.openPopup === type && (_jsx(ColorPickerPopupContent, { type: type, color: color, onChange: onChange, label: label, elements: elements, palette: palette, updateData: updateData }))] })] }) }));
 };

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/Picker.js

@@ -80,7 +80,7 @@ export const Picker = ({ color, onChange, label, type, elements, palette, update
                     event.preventDefault();
                     event.stopPropagation();
                 }
-            }, className: "color-picker-content", 
+            }, className: "color-picker-content properties-content", 
             // to allow focusing by clicking but not by tabbing
             tabIndex: -1, children: [!!customColors.length && (_jsxs("div", { children: [_jsx(PickerHeading, { children: t("colorPicker.mostUsedCustomColors") }), _jsx(CustomColorList, { colors: customColors, color: color, label: t("colorPicker.mostUsedCustomColors"), onChange: onChange })] })), _jsxs("div", { children: [_jsx(PickerHeading, { children: t("colorPicker.colors") }), _jsx(PickerColorList, { color: color, label: label, palette: palette, onChange: onChange, activeShade: activeShade })] }), _jsxs("div", { children: [_jsx(PickerHeading, { children: t("colorPicker.shades") }), _jsx(ShadeList, { hex: color, onChange: onChange, palette: palette })] }), children] }) }));
 };

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 = {
@@ -52,9 +54,9 @@ const getCategoryOrder = (category) => {
     }
 };
 const CommandShortcutHint = ({ shortcut, className, children, }) => {
-    const shortcuts = shortcut.split(/(?<!\+)(?:\+)/g);
-    return (_jsxs("div", { className: clsx("shortcut", className), children: [shortcuts.map((item) => {
-                return (_jsx("div", { className: "shortcut-wrapper", children: _jsx("div", { className: "shortcut-key", children: item }) }, item));
+    const shortcuts = shortcut.replace("++", "+$").split("+");
+    return (_jsxs("div", { className: clsx("shortcut", className), children: [shortcuts.map((item, idx) => {
+                return (_jsx("div", { className: "shortcut-wrapper", children: _jsx("div", { className: "shortcut-key", children: item === "$" ? "+" : item }) }, item));
             }), _jsx("div", { className: "shortcut-desc", children: children })] }));
 };
 const isCommandPaletteToggleShortcut = (event) => {
@@ -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;