@excalidraw/excalidraw 0.17.1-3e334a6 → 0.17.1-4689a6b

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

@@ -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) {
@@ -407,15 +423,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/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/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) {

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/TTDDialog/MermaidToExcalidraw.js

@@ -12,7 +12,7 @@ import { TTDDialogInput } from "./TTDDialogInput";
 import { TTDDialogOutput } from "./TTDDialogOutput";
 import { EditorLocalStorage } from "../../data/EditorLocalStorage";
 import { EDITOR_LS_KEYS } from "../../constants";
-import { debounce } from "../../utils";
+import { debounce, isDevEnv } from "../../utils";
 import { TTDDialogSubmitShortcut } from "./TTDDialogSubmitShortcut";
 const MERMAID_EXAMPLE = "flowchart TD\n A[Christmas] -->|Get money| B(Go shopping)\n B --> C{Let me think}\n C -->|One| D[Laptop]\n C -->|Two| E[iPhone]\n C -->|Three| F[Car]";
 const debouncedSaveMermaidDefinition = debounce(saveMermaidDataToStorage, 300);
@@ -31,7 +31,11 @@ const MermaidToExcalidraw = ({ mermaidToExcalidrawLib, }) => {
             mermaidToExcalidrawLib,
             setError,
             mermaidDefinition: deferredText,
-        }).catch(() => { });
+        }).catch((err) => {
+            if (isDevEnv()) {
+                console.error("Failed to parse mermaid definition", err);
+            }
+        });
         debouncedSaveMermaidDefinition(deferredText);
     }, [deferredText, mermaidToExcalidrawLib]);
     useEffect(() => () => {

package/dist/excalidraw/components/dropdownMenu/DropdownMenuItemContentRadio.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+type Props<T> = {
+    value: T;
+    shortcut?: string;
+    choices: {
+        value: T;
+        label: React.ReactNode;
+        ariaLabel?: string;
+    }[];
+    onChange: (value: T) => void;
+    children: React.ReactNode;
+    name: string;
+};
+declare const DropdownMenuItemContentRadio: {
+    <T>({ value, shortcut, onChange, choices, children, name, }: Props<T>): JSX.Element;
+    displayName: string;
+};
+export default DropdownMenuItemContentRadio;

package/dist/excalidraw/components/dropdownMenu/DropdownMenuItemContentRadio.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useDevice } from "../App";
+import { RadioGroup } from "../RadioGroup";
+const DropdownMenuItemContentRadio = ({ value, shortcut, onChange, choices, children, name, }) => {
+    const device = useDevice();
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "dropdown-menu-item-base dropdown-menu-item-bare", children: [_jsx("label", { className: "dropdown-menu-item__text", htmlFor: name, children: children }), _jsx(RadioGroup, { name: name, value: value, onChange: onChange, choices: choices })] }), shortcut && !device.editor.isMobile && (_jsx("div", { className: "dropdown-menu-item__shortcut dropdown-menu-item__shortcut--orphaned", children: shortcut }))] }));
+};
+DropdownMenuItemContentRadio.displayName = "DropdownMenuItemContentRadio";
+export default DropdownMenuItemContentRadio;

package/dist/excalidraw/components/hyperlink/Hyperlink.js

@@ -10,9 +10,9 @@ import clsx from "clsx";
 import { KEYS } from "../../keys";
 import { EVENT, HYPERLINK_TOOLTIP_DELAY } from "../../constants";
 import { getElementAbsoluteCoords } from "../../element/bounds";
-import { getTooltipDiv, updateTooltipPosition } from "../Tooltip";
+import { getTooltipDiv, updateTooltipPosition } from "../../components/Tooltip";
 import { getSelectedElements } from "../../scene";
-import { isPointHittingElementBoundingBox } from "../../element/collision";
+import { hitElementBoundingBox } from "../../element/collision";
 import { isLocalLink, normalizeLink } from "../../data/url";
 import "./Hyperlink.scss";
 import { trackEvent } from "../../analytics";
@@ -252,7 +252,7 @@ const shouldHideLinkPopup = (element, elementsMap, appState, [clientX, clientY])
     const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords({ clientX, clientY }, appState);
     const threshold = 15 / appState.zoom.value;
     // hitbox to prevent hiding when hovered in element bounding box
-    if (isPointHittingElementBoundingBox(element, elementsMap, [sceneX, sceneY], threshold, null)) {
+    if (hitElementBoundingBox(sceneX, sceneY, element, elementsMap)) {
         return false;
     }
     const [x1, y1, x2] = getElementAbsoluteCoords(element, elementsMap);

package/dist/excalidraw/components/hyperlink/helpers.js

@@ -1,6 +1,6 @@
 import { MIME_TYPES } from "../../constants";
 import { getElementAbsoluteCoords } from "../../element/bounds";
-import { isPointHittingElementBoundingBox } from "../../element/collision";
+import { hitElementBoundingBox } from "../../element/collision";
 import { rotate } from "../../math";
 import { DEFAULT_LINK_SIZE } from "../../renderer/renderElement";
 export const EXTERNAL_LINK_IMG = document.createElement("img");
@@ -39,10 +39,9 @@ export const isPointHittingLink = (element, elementsMap, appState, [x, y], isMob
     if (!element.link || appState.selectedElementIds[element.id]) {
         return false;
     }
-    const threshold = 4 / appState.zoom.value;
     if (!isMobile &&
         appState.viewModeEnabled &&
-        isPointHittingElementBoundingBox(element, elementsMap, [x, y], threshold, null)) {
+        hitElementBoundingBox(x, y, element, elementsMap)) {
         return true;
     }
     return isPointHittingLinkIcon(element, elementsMap, appState, [x, y]);

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

@@ -194,4 +194,7 @@ export declare const svgIcon: JSX.Element;
 export declare const pngIcon: JSX.Element;
 export declare const magnetIcon: JSX.Element;
 export declare const coffeeIcon: JSX.Element;
+export declare const DeviceDesktopIcon: JSX.Element;
+export declare const arrowBarToLeftIcon: JSX.Element;
+export declare const youtubeIcon: JSX.Element;
 export {};

package/dist/excalidraw/components/icons.js

@@ -83,7 +83,7 @@ export const TrashIcon = createIcon(_jsx("path", { strokeWidth: "1.25", d: "M3.3
 export const EmbedIcon = createIcon(_jsxs("g", { strokeWidth: "1.25", children: [_jsx("polyline", { points: "12 16 18 10 12 4" }), _jsx("polyline", { points: "8 4 2 10 8 16" })] }), modifiedTablerIconProps);
 export const DuplicateIcon = createIcon(_jsxs("g", { strokeWidth: "1.25", children: [_jsx("path", { d: "M14.375 6.458H8.958a2.5 2.5 0 0 0-2.5 2.5v5.417a2.5 2.5 0 0 0 2.5 2.5h5.417a2.5 2.5 0 0 0 2.5-2.5V8.958a2.5 2.5 0 0 0-2.5-2.5Z" }), _jsx("path", { clipRule: "evenodd", d: "M11.667 3.125c.517 0 .986.21 1.325.55.34.338.55.807.55 1.325v1.458H8.333c-.485 0-.927.185-1.26.487-.343.312-.57.75-.609 1.24l-.005 5.357H5a1.87 1.87 0 0 1-1.326-.55 1.87 1.87 0 0 1-.549-1.325V5c0-.518.21-.987.55-1.326.338-.34.807-.549 1.325-.549h6.667Z" })] }), modifiedTablerIconProps);
 export const MoonIcon = createIcon(_jsx("path", { clipRule: "evenodd", d: "M10 2.5h.328a6.25 6.25 0 0 0 6.6 10.372A7.5 7.5 0 1 1 10 2.493V2.5Z", stroke: "currentColor" }), modifiedTablerIconProps);
-export const SunIcon = createIcon(_jsx("g", { stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M10 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM10 4.167V2.5M14.167 5.833l1.166-1.166M15.833 10H17.5M14.167 14.167l1.166 1.166M10 15.833V17.5M5.833 14.167l-1.166 1.166M5 10H3.333M5.833 5.833 4.667 4.667" }) }), modifiedTablerIconProps);
+export const SunIcon = createIcon(_jsx("g", { stroke: "currentColor", strokeLinejoin: "round", children: _jsx("path", { d: "M10 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM10 4.167V2.5M14.167 5.833l1.166-1.166M15.833 10H17.5M14.167 14.167l1.166 1.166M10 15.833V17.5M5.833 14.167l-1.166 1.166M5 10H3.333M5.833 5.833 4.667 4.667" }) }), { ...modifiedTablerIconProps, strokeWidth: 1.5 });
 export const HamburgerMenuIcon = createIcon(_jsxs("g", { strokeWidth: "1.5", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("line", { x1: "4", y1: "6", x2: "20", y2: "6" }), _jsx("line", { x1: "4", y1: "12", x2: "20", y2: "12" }), _jsx("line", { x1: "4", y1: "18", x2: "20", y2: "18" })] }), tablerIconProps);
 export const ExportIcon = createIcon(_jsx("path", { strokeWidth: "1.25", d: "M3.333 14.167v1.666c0 .92.747 1.667 1.667 1.667h10c.92 0 1.667-.746 1.667-1.667v-1.666M5.833 9.167 10 13.333l4.167-4.166M10 3.333v10" }), modifiedTablerIconProps);
 export const HelpIcon = createIcon(_jsxs("g", { strokeWidth: "1.5", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("circle", { cx: "12", cy: "12", r: "9" }), _jsx("line", { x1: "12", y1: "17", x2: "12", y2: "17.01" }), _jsx("path", { d: "M12 13.5a1.5 1.5 0 0 1 1 -1.5a2.6 2.6 0 1 0 -3 -4" })] }), tablerIconProps);
@@ -240,3 +240,7 @@ export const svgIcon = createIcon(_jsxs("g", { strokeWidth: 1.25, children: [_js
 export const pngIcon = createIcon(_jsxs("g", { strokeWidth: 1.25, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M14 3v4a1 1 0 0 0 1 1h4" }), _jsx("path", { d: "M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4" }), _jsx("path", { d: "M20 15h-1a2 2 0 0 0 -2 2v2a2 2 0 0 0 2 2h1v-3" }), _jsx("path", { d: "M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6" }), _jsx("path", { d: "M11 21v-6l3 6v-6" })] }), tablerIconProps);
 export const magnetIcon = createIcon(_jsxs("g", { strokeWidth: 1.25, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M4 13v-8a2 2 0 0 1 2 -2h1a2 2 0 0 1 2 2v8a2 2 0 0 0 6 0v-8a2 2 0 0 1 2 -2h1a2 2 0 0 1 2 2v8a8 8 0 0 1 -16 0" }), _jsx("path", { d: "M4 8l5 0" }), _jsx("path", { d: "M15 8l4 0" })] }), tablerIconProps);
 export const coffeeIcon = createIcon(_jsxs("g", { strokeWidth: 1.25, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M3 14c.83 .642 2.077 1.017 3.5 1c1.423 .017 2.67 -.358 3.5 -1c.83 -.642 2.077 -1.017 3.5 -1c1.423 -.017 2.67 .358 3.5 1" }), _jsx("path", { d: "M8 3a2.4 2.4 0 0 0 -1 2a2.4 2.4 0 0 0 1 2" }), _jsx("path", { d: "M12 3a2.4 2.4 0 0 0 -1 2a2.4 2.4 0 0 0 1 2" }), _jsx("path", { d: "M3 10h14v5a6 6 0 0 1 -6 6h-2a6 6 0 0 1 -6 -6v-5z" }), _jsx("path", { d: "M16.746 16.726a3 3 0 1 0 .252 -5.555" })] }), tablerIconProps);
+export const DeviceDesktopIcon = createIcon(_jsxs("g", { stroke: "currentColor", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M3 5a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-16a1 1 0 0 1-1-1v-10zM7 20h10M9 16v4M15 16v4" })] }), { ...tablerIconProps, strokeWidth: 1.5 });
+// arrow-bar-to-left
+export const arrowBarToLeftIcon = createIcon(_jsxs("g", { children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M10 12l10 0" }), _jsx("path", { d: "M10 12l4 4" }), _jsx("path", { d: "M10 12l4 -4" }), _jsx("path", { d: "M4 4l0 16" })] }), tablerIconProps);
+export const youtubeIcon = createIcon(_jsxs("g", { children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M2 8a4 4 0 0 1 4 -4h12a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-12a4 4 0 0 1 -4 -4v-8z" }), _jsx("path", { d: "M10 9l5 3l-5 3z" })] }), tablerIconProps);

package/dist/excalidraw/components/main-menu/DefaultItems.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { Theme } from "../../element/types";
 import "./DefaultItems.scss";
 export declare const LoadScene: {
     (): JSX.Element | null;
@@ -13,7 +14,9 @@ export declare const SaveAsImage: {
     displayName: string;
 };
 export declare const CommandPalette: {
-    (): JSX.Element;
+    (opts?: {
+        className?: string;
+    }): JSX.Element;
     displayName: string;
 };
 export declare const Help: {
@@ -25,7 +28,14 @@ export declare const ClearCanvas: {
     displayName: string;
 };
 export declare const ToggleTheme: {
-    (): JSX.Element | null;
+    (props: {
+        allowSystemTheme: true;
+        theme: Theme | "system";
+        onSelect: (theme: Theme | "system") => void;
+    } | {
+        allowSystemTheme?: false | undefined;
+        onSelect?: ((theme: Theme) => void) | undefined;
+    }): JSX.Element | null;
     displayName: string;
 };
 export declare const ChangeCanvasBackground: {

package/dist/excalidraw/components/main-menu/DefaultItems.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { getShortcutFromShortcutName } from "../../actions/shortcuts";
 import { useI18n } from "../../i18n";
 import { useExcalidrawSetAppState, useExcalidrawActionManager, useExcalidrawElements, useAppProps, } from "../App";
-import { boltIcon, ExportIcon, ExportImageIcon, HelpIcon, LoadIcon, MoonIcon, save, SunIcon, TrashIcon, usersIcon, } from "../icons";
+import { boltIcon, DeviceDesktopIcon, ExportIcon, ExportImageIcon, HelpIcon, LoadIcon, MoonIcon, save, SunIcon, TrashIcon, usersIcon, } from "../icons";
 import { GithubIcon, DiscordIcon, XBrandIcon } from "../icons";
 import DropdownMenuItem from "../dropdownMenu/DropdownMenuItem";
 import DropdownMenuItemLink from "../dropdownMenu/DropdownMenuItemLink";
@@ -14,6 +14,9 @@ import { jotaiScope } from "../../jotai";
 import { useUIAppState } from "../../context/ui-appState";
 import { openConfirmModal } from "../OverwriteConfirm/OverwriteConfirmState";
 import Trans from "../Trans";
+import DropdownMenuItemContentRadio from "../dropdownMenu/DropdownMenuItemContentRadio";
+import { THEME } from "../../constants";
+import { trackEvent } from "../../analytics";
 import "./DefaultItems.scss";
 export const LoadScene = () => {
     const { t } = useI18n();
@@ -51,10 +54,13 @@ export const SaveAsImage = () => {
     return (_jsx(DropdownMenuItem, { icon: ExportImageIcon, "data-testid": "image-export-button", onSelect: () => setAppState({ openDialog: { name: "imageExport" } }), shortcut: getShortcutFromShortcutName("imageExport"), "aria-label": t("buttons.exportImage"), children: t("buttons.exportImage") }));
 };
 SaveAsImage.displayName = "SaveAsImage";
-export const CommandPalette = () => {
+export const CommandPalette = (opts) => {
     const setAppState = useExcalidrawSetAppState();
     const { t } = useI18n();
-    return (_jsx(DropdownMenuItem, { icon: boltIcon, "data-testid": "command-palette-button", onSelect: () => setAppState({ openDialog: { name: "commandPalette" } }), shortcut: getShortcutFromShortcutName("commandPalette"), "aria-label": t("commandPalette.title"), children: t("commandPalette.title") }));
+    return (_jsx(DropdownMenuItem, { icon: boltIcon, "data-testid": "command-palette-button", onSelect: () => {
+            trackEvent("command_palette", "open", "menu");
+            setAppState({ openDialog: { name: "commandPalette" } });
+        }, shortcut: getShortcutFromShortcutName("commandPalette"), "aria-label": t("commandPalette.title"), className: opts?.className, children: t("commandPalette.title") }));
 };
 CommandPalette.displayName = "CommandPalette";
 export const Help = () => {
@@ -73,20 +79,45 @@ export const ClearCanvas = () => {
     return (_jsx(DropdownMenuItem, { icon: TrashIcon, onSelect: () => setActiveConfirmDialog("clearCanvas"), "data-testid": "clear-canvas-button", "aria-label": t("buttons.clearReset"), children: t("buttons.clearReset") }));
 };
 ClearCanvas.displayName = "ClearCanvas";
-export const ToggleTheme = () => {
+export const ToggleTheme = (props) => {
     const { t } = useI18n();
     const appState = useUIAppState();
     const actionManager = useExcalidrawActionManager();
+    const shortcut = getShortcutFromShortcutName("toggleTheme");
     if (!actionManager.isActionEnabled(actionToggleTheme)) {
         return null;
     }
+    if (props?.allowSystemTheme) {
+        return (_jsx(DropdownMenuItemContentRadio, { name: "theme", value: props.theme, onChange: (value) => props.onSelect(value), choices: [
+                {
+                    value: THEME.LIGHT,
+                    label: SunIcon,
+                    ariaLabel: `${t("buttons.lightMode")} - ${shortcut}`,
+                },
+                {
+                    value: THEME.DARK,
+                    label: MoonIcon,
+                    ariaLabel: `${t("buttons.darkMode")} - ${shortcut}`,
+                },
+                {
+                    value: "system",
+                    label: DeviceDesktopIcon,
+                    ariaLabel: t("buttons.systemMode"),
+                },
+            ], children: t("labels.theme") }));
+    }
     return (_jsx(DropdownMenuItem, { onSelect: (event) => {
             // do not close the menu when changing theme
             event.preventDefault();
-            return actionManager.executeAction(actionToggleTheme);
-        }, icon: appState.theme === "dark" ? SunIcon : MoonIcon, "data-testid": "toggle-dark-mode", shortcut: getShortcutFromShortcutName("toggleTheme"), "aria-label": appState.theme === "dark"
+            if (props?.onSelect) {
+                props.onSelect(appState.theme === THEME.DARK ? THEME.LIGHT : THEME.DARK);
+            }
+            else {
+                return actionManager.executeAction(actionToggleTheme);
+            }
+        }, icon: appState.theme === THEME.DARK ? SunIcon : MoonIcon, "data-testid": "toggle-dark-mode", shortcut: shortcut, "aria-label": appState.theme === THEME.DARK
             ? t("buttons.lightMode")
-            : t("buttons.darkMode"), children: appState.theme === "dark"
+            : t("buttons.darkMode"), children: appState.theme === THEME.DARK
             ? t("buttons.lightMode")
             : t("buttons.darkMode") }));
 };

package/dist/excalidraw/constants.d.ts

@@ -223,9 +223,6 @@ export declare const ROUNDNESS: {
     readonly PROPORTIONAL_RADIUS: 2;
     readonly ADAPTIVE_RADIUS: 3;
 };
-/** key containt id of precedeing elemnt id we use in reconciliation during
- * collaboration */
-export declare const PRECEDING_ELEMENT_KEY = "__precedingElement__";
 export declare const ROUGHNESS: {
     readonly architect: 0;
     readonly artist: 1;

package/dist/excalidraw/constants.js

@@ -264,9 +264,6 @@ export const ROUNDNESS = {
     // (see DEFAULT_ADAPTIVE_RADIUS constant)
     ADAPTIVE_RADIUS: 3,
 };
-/** key containt id of precedeing elemnt id we use in reconciliation during
- * collaboration */
-export const PRECEDING_ELEMENT_KEY = "__precedingElement__";
 export const ROUGHNESS = {
     architect: 0,
     artist: 1,

package/dist/excalidraw/data/magic.js

@@ -1,3 +1,4 @@
+import { THEME } from "../constants";
 const SYSTEM_PROMPT = `You are a skilled front-end developer who builds interactive prototypes from wireframes, and is an expert at CSS Grid and Flex design.
 Your role is to transform low-fidelity wireframes into working front-end HTML code.
 
@@ -19,7 +20,7 @@ If the wireframes, diagrams, or text is unclear or unreadable, refer to provided
 Your goal is a production-ready prototype that brings the wireframes to life.
 
 Please output JUST THE HTML file containing your best attempt at implementing the provided wireframes.`;
-export async function diagramToHTML({ image, apiKey, text, theme = "light", }) {
+export async function diagramToHTML({ image, apiKey, text, theme = THEME.LIGHT, }) {
     const body = {
         model: "gpt-4-vision-preview",
         // 4096 are max output tokens allowed for `gpt-4-vision-preview` currently

package/dist/excalidraw/data/reconcile.d.ts

@@ -0,0 +1,6 @@
+import { OrderedExcalidrawElement } from "../element/types";
+import { AppState } from "../types";
+import { MakeBrand } from "../utility-types";
+export type ReconciledExcalidrawElement = OrderedExcalidrawElement & MakeBrand<"ReconciledElement">;
+export type RemoteExcalidrawElement = OrderedExcalidrawElement & MakeBrand<"RemoteExcalidrawElement">;
+export declare const reconcileElements: (localElements: readonly OrderedExcalidrawElement[], remoteElements: readonly RemoteExcalidrawElement[], localAppState: AppState) => ReconciledExcalidrawElement[];

package/dist/excalidraw/data/reconcile.js

@@ -0,0 +1,49 @@
+import { orderByFractionalIndex, syncInvalidIndices } from "../fractionalIndex";
+import { arrayToMap } from "../utils";
+const shouldDiscardRemoteElement = (localAppState, local, remote) => {
+    if (local &&
+        // local element is being edited
+        (local.id === localAppState.editingElement?.id ||
+            local.id === localAppState.resizingElement?.id ||
+            local.id === localAppState.draggingElement?.id ||
+            // local element is newer
+            local.version > remote.version ||
+            // resolve conflicting edits deterministically by taking the one with
+            // the lowest versionNonce
+            (local.version === remote.version &&
+                local.versionNonce < remote.versionNonce))) {
+        return true;
+    }
+    return false;
+};
+export const reconcileElements = (localElements, remoteElements, localAppState) => {
+    const localElementsMap = arrayToMap(localElements);
+    const reconciledElements = [];
+    const added = new Set();
+    // process remote elements
+    for (const remoteElement of remoteElements) {
+        if (!added.has(remoteElement.id)) {
+            const localElement = localElementsMap.get(remoteElement.id);
+            const discardRemoteElement = shouldDiscardRemoteElement(localAppState, localElement, remoteElement);
+            if (localElement && discardRemoteElement) {
+                reconciledElements.push(localElement);
+                added.add(localElement.id);
+            }
+            else {
+                reconciledElements.push(remoteElement);
+                added.add(remoteElement.id);
+            }
+        }
+    }
+    // process remaining local elements
+    for (const localElement of localElements) {
+        if (!added.has(localElement.id)) {
+            reconciledElements.push(localElement);
+            added.add(localElement.id);
+        }
+    }
+    const orderedElements = orderByFractionalIndex(reconciledElements);
+    // de-duplicate indices
+    syncInvalidIndices(orderedElements);
+    return orderedElements;
+};

package/dist/excalidraw/data/restore.d.ts

@@ -1,17 +1,17 @@
-import { ExcalidrawElement } from "../element/types";
+import { ExcalidrawElement, OrderedExcalidrawElement } from "../element/types";
 import { AppState, BinaryFiles, LibraryItem } from "../types";
 import { ImportedDataState } from "./types";
 type RestoredAppState = Omit<AppState, "offsetTop" | "offsetLeft" | "width" | "height">;
 export declare const AllowedExcalidrawActiveTools: Record<AppState["activeTool"]["type"], boolean>;
 export type RestoredDataState = {
-    elements: ExcalidrawElement[];
+    elements: OrderedExcalidrawElement[];
     appState: RestoredAppState;
     files: BinaryFiles;
 };
 export declare const restoreElements: (elements: ImportedDataState["elements"], localElements: readonly ExcalidrawElement[] | null | undefined, opts?: {
     refreshDimensions?: boolean;
     repairBindings?: boolean;
-} | undefined) => ExcalidrawElement[];
+} | undefined) => OrderedExcalidrawElement[];
 export declare const restoreAppState: (appState: ImportedDataState["appState"], localAppState: Partial<AppState> | null | undefined) => RestoredAppState;
 export declare const restore: (data: Pick<ImportedDataState, "appState" | "elements" | "files"> | null, localAppState: Partial<AppState> | null | undefined, localElements: readonly ExcalidrawElement[] | null | undefined, elementsConfig?: {
     refreshDimensions?: boolean;

package/dist/excalidraw/data/restore.js

@@ -1,7 +1,7 @@
 import { getNonDeletedElements, getNormalizedDimensions, isInvisiblySmallElement, refreshTextDimensions, } from "../element";
 import { isTextElement, isUsingAdaptiveRadius } from "../element/typeChecks";
 import { randomId } from "../random";
-import { DEFAULT_FONT_FAMILY, DEFAULT_TEXT_ALIGN, DEFAULT_VERTICAL_ALIGN, PRECEDING_ELEMENT_KEY, FONT_FAMILY, ROUNDNESS, DEFAULT_SIDEBAR, DEFAULT_ELEMENT_PROPS, } from "../constants";
+import { DEFAULT_FONT_FAMILY, DEFAULT_TEXT_ALIGN, DEFAULT_VERTICAL_ALIGN, FONT_FAMILY, ROUNDNESS, DEFAULT_SIDEBAR, DEFAULT_ELEMENT_PROPS, } from "../constants";
 import { getDefaultAppState } from "../appState";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { bumpVersion } from "../element/mutateElement";
@@ -9,6 +9,7 @@ import { getUpdatedTimestamp, updateActiveTool } from "../utils";
 import { arrayToMap } from "../utils";
 import { detectLineHeight, getContainerElement, getDefaultLineHeight, } from "../element/textElement";
 import { normalizeLink } from "./url";
+import { syncInvalidIndices } from "../fractionalIndex";
 export const AllowedExcalidrawActiveTools = {
     selection: true,
     text: true,
@@ -46,6 +47,7 @@ const restoreElementWithProperties = (element, extra) => {
         // newly added elements
         version: element.version || 1,
         versionNonce: element.versionNonce ?? 0,
+        index: element.index ?? null,
         isDeleted: element.isDeleted ?? false,
         id: element.id || randomId(),
         fillStyle: element.fillStyle || DEFAULT_ELEMENT_PROPS.fillStyle,
@@ -85,9 +87,6 @@ const restoreElementWithProperties = (element, extra) => {
         base.customData =
             "customData" in extra ? extra.customData : element.customData;
     }
-    if (PRECEDING_ELEMENT_KEY in element) {
-        base[PRECEDING_ELEMENT_KEY] = element[PRECEDING_ELEMENT_KEY];
-    }
     return {
         ...base,
         ...getNormalizedDimensions(base),
@@ -275,7 +274,7 @@ localElements, opts) => {
     // used to detect duplicate top-level element ids
     const existingIds = new Set();
     const localElementsMap = localElements ? arrayToMap(localElements) : null;
-    const restoredElements = (elements || []).reduce((elements, element) => {
+    const restoredElements = syncInvalidIndices((elements || []).reduce((elements, element) => {
         // filtering out selection, which is legacy, no longer kept in elements,
         // and causing issues if retained
         if (element.type !== "selection" && !isInvisiblySmallElement(element)) {
@@ -293,7 +292,7 @@ localElements, opts) => {
             }
         }
         return elements;
-    }, []);
+    }, []));
     if (!opts?.repairBindings) {
         return restoredElements;
     }

package/dist/excalidraw/data/transform.d.ts

@@ -78,4 +78,4 @@ export type ExcalidrawElementSkeleton = Extract<Exclude<ExcalidrawElement, Excal
 } & Partial<ExcalidrawMagicFrameElement>);
 export declare const convertToExcalidrawElements: (elementsSkeleton: ExcalidrawElementSkeleton[] | null, opts?: {
     regenerateIds: boolean;
-}) => ExcalidrawElement[];
+}) => import("../element/types").OrderedExcalidrawElement[];

package/dist/excalidraw/data/transform.js

@@ -3,9 +3,10 @@ import { getCommonBounds, newElement, newLinearElement, redrawTextBoundingBox, }
 import { bindLinearElement } from "../element/binding";
 import { newFrameElement, newImageElement, newMagicFrameElement, newTextElement, } from "../element/newElement";
 import { getDefaultLineHeight, measureText, normalizeText, } from "../element/textElement";
-import { assertNever, cloneJSON, getFontString, toBrandedType } from "../utils";
+import { arrayToMap, assertNever, cloneJSON, getFontString, toBrandedType, } from "../utils";
 import { getSizeFromPoints } from "../points";
 import { randomId } from "../random";
+import { syncInvalidIndices } from "../fractionalIndex";
 const DEFAULT_LINEAR_ELEMENT_PROPS = {
     width: 100,
     height: 0,
@@ -162,6 +163,14 @@ const bindLinearElementToElement = (linearElement, start, end, elementStore, ele
             bindLinearElement(linearElement, endBoundElement, "end", elementsMap);
         }
     }
+    // Safe check to early return for single point
+    if (linearElement.points.length < 2) {
+        return {
+            linearElement,
+            startBoundElement,
+            endBoundElement,
+        };
+    }
     // Update start/end points by 0.5 so bindings don't overlap with start/end bound element coordinates.
     const endPointIndex = linearElement.points.length - 1;
     const delta = 0.5;
@@ -206,10 +215,10 @@ class ElementStore {
         this.excalidrawElements.set(ele.id, ele);
     };
     getElements = () => {
-        return Array.from(this.excalidrawElements.values());
+        return syncInvalidIndices(Array.from(this.excalidrawElements.values()));
     };
     getElementsMap = () => {
-        return toBrandedType(this.excalidrawElements);
+        return toBrandedType(arrayToMap(this.getElements()));
     };
     getElement = (id) => {
         return this.excalidrawElements.get(id);