@excalidraw/excalidraw 0.17.1-1d71f84 → 0.17.1-1ed53b1

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

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";

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/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/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/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/LibraryMenu.d.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/excalidraw/components/MagicSettings.js

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { LibraryItems, UIAppState } from "../types";
+import type { LibraryItems, UIAppState } from "../types";
 import "./PublishLibrary.scss";
 declare const PublishLibrary: ({ onClose, libraryItems, appState, onSuccess, onError, updateItemsInStorage, onRemove, }: {
     onClose: () => void;

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

@@ -2,7 +2,8 @@
 import "./RadioGroup.scss";
 export type RadioGroupChoice<T> = {
     value: T;
-    label: string;
+    label: React.ReactNode;
+    ariaLabel?: string;
 };
 export type RadioGroupProps<T> = {
     choices: RadioGroupChoice<T>[];

package/dist/excalidraw/components/RadioGroup.js

@@ -4,5 +4,5 @@ import "./RadioGroup.scss";
 export const RadioGroup = function ({ onChange, value, choices, name, }) {
     return (_jsx("div", { className: "RadioGroup", children: choices.map((choice) => (_jsxs("div", { className: clsx("RadioGroup__choice", {
                 active: choice.value === value,
-            }), children: [_jsx("input", { name: name, type: "radio", checked: choice.value === value, onChange: () => onChange(choice.value) }), choice.label] }, choice.label))) }));
+            }), title: choice.ariaLabel, children: [_jsx("input", { name: name, type: "radio", checked: choice.value === value, onChange: () => onChange(choice.value), "aria-label": choice.ariaLabel }), choice.label] }, String(choice.value)))) }));
 };

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Trail } from "../animated-trail";
+import type { Trail } from "../animated-trail";
 import "./SVGLayer.scss";
 type SVGLayerProps = {
     trails: Trail[];