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

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

@@ -37,7 +37,7 @@ export const MobileMenu = ({ appState, elements, actionManager, setAppState, onL
                             !appState.viewModeEnabled &&
                             showSelectedShapeActions(appState, elements) ? (_jsx(Section, { className: "App-mobile-menu", heading: "selectedShapeActions", children: _jsx(SelectedShapeActions, { appState: appState, elementsMap: app.scene.getNonDeletedElementsMap(), renderAction: actionManager.renderAction }) })) : null, _jsxs("footer", { className: "App-toolbar", children: [renderAppToolbar(), appState.scrolledOutside &&
                                     !appState.openMenu &&
-                                    !appState.openSidebar && (_jsx("button", { className: "scroll-back-to-content", onClick: () => {
+                                    !appState.openSidebar && (_jsx("button", { type: "button", className: "scroll-back-to-content", onClick: () => {
                                         setAppState((appState) => ({
                                             ...calculateScrollCenter(elements, appState),
                                         }));

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

@@ -35,7 +35,7 @@ const ChartPreviewBtn = (props) => {
             previewNode.replaceChildren();
         };
     }, [props.spreadsheet, props.chartType, props.selected]);
-    return (_jsx("button", { className: "ChartPreview", onClick: () => {
+    return (_jsx("button", { type: "button", className: "ChartPreview", onClick: () => {
             if (chartElements) {
                 props.onClick(props.chartType, chartElements);
             }

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[];

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

@@ -11,7 +11,7 @@ import "./Sidebar.scss";
 export declare const isSidebarDockedAtom: import("jotai").PrimitiveAtom<boolean> & {
     init: boolean;
 };
-export declare const SidebarInner: React.ForwardRefExoticComponent<Pick<{
+export declare const SidebarInner: React.ForwardRefExoticComponent<Omit<{
     name: string;
     children: React.ReactNode;
     onStateChange?: ((state: {
@@ -22,7 +22,7 @@ export declare const SidebarInner: React.ForwardRefExoticComponent<Pick<{
     docked?: boolean | undefined;
     className?: string | undefined;
     __fallback?: boolean | undefined;
-} & Omit<React.RefAttributes<HTMLDivElement>, "onSelect">, "name" | "children" | "key" | "className" | "onDock" | "docked" | "onStateChange" | "__fallback"> & React.RefAttributes<HTMLDivElement>>;
+} & Omit<React.RefAttributes<HTMLDivElement>, "onSelect">, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const Sidebar: React.ForwardRefExoticComponent<{
     name: string;
     children: React.ReactNode;

package/dist/excalidraw/components/Sidebar/Sidebar.js

@@ -4,7 +4,7 @@ import { useEffect, useLayoutEffect, useRef, useState, forwardRef, useImperative
 import { Island } from "../Island";
 import { atom, useSetAtom } from "jotai";
 import { jotaiScope } from "../../jotai";
-import { SidebarPropsContext, } from "./common";
+import { SidebarPropsContext } from "./common";
 import { SidebarHeader } from "./SidebarHeader";
 import clsx from "clsx";
 import { useDevice, useExcalidrawSetAppState } from "../App";

package/dist/excalidraw/components/Sidebar/SidebarTab.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SidebarTabName } from "../../types";
+import type { SidebarTabName } from "../../types";
 export declare const SidebarTab: {
     ({ tab, children, ...rest }: {
         tab: SidebarTabName;

package/dist/excalidraw/components/Sidebar/SidebarTabTrigger.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SidebarTabName } from "../../types";
+import type { SidebarTabName } from "../../types";
 export declare const SidebarTabTrigger: {
     ({ children, tab, onSelect, ...rest }: {
         children: React.ReactNode;

package/dist/excalidraw/components/Sidebar/SidebarTrigger.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SidebarTriggerProps } from "./common";
+import type { SidebarTriggerProps } from "./common";
 import "./SidebarTrigger.scss";
 export declare const SidebarTrigger: {
     ({ name, tab, icon, title, children, onToggle, className, style, }: SidebarTriggerProps): JSX.Element;

package/dist/excalidraw/components/Sidebar/common.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { AppState, SidebarName, SidebarTabName } from "../../types";
+import type { AppState, SidebarName, SidebarTabName } from "../../types";
 export type SidebarTriggerProps = {
     name: SidebarName;
     tab?: SidebarTabName;

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

@@ -10,7 +10,7 @@ type StackProps = {
     ref: React.RefObject<HTMLDivElement>;
 };
 declare const _default: {
-    Row: React.ForwardRefExoticComponent<Pick<StackProps, "children" | "style" | "gap" | "className" | "align" | "justifyContent"> & React.RefAttributes<HTMLDivElement>>;
-    Col: React.ForwardRefExoticComponent<Pick<StackProps, "children" | "style" | "gap" | "className" | "align" | "justifyContent"> & React.RefAttributes<HTMLDivElement>>;
+    Row: React.ForwardRefExoticComponent<Omit<StackProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Col: React.ForwardRefExoticComponent<Omit<StackProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 };
 export default _default;

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

@@ -1,6 +1,6 @@
 import React from "react";
-import { NonDeletedExcalidrawElement } from "../element/types";
-import { ExcalidrawProps, UIAppState } from "../types";
+import type { NonDeletedExcalidrawElement } from "../element/types";
+import type { ExcalidrawProps, UIAppState } from "../types";
 import "./Stats.scss";
 export declare const Stats: (props: {
     appState: UIAppState;

package/dist/excalidraw/components/TTDDialog/MermaidToExcalidraw.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import "./MermaidToExcalidraw.scss";
-import { MermaidToExcalidrawLibProps } from "./common";
+import type { MermaidToExcalidrawLibProps } from "./common";
 declare const MermaidToExcalidraw: ({ mermaidToExcalidrawLib, }: {
     mermaidToExcalidrawLib: MermaidToExcalidrawLibProps;
 }) => JSX.Element;

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

@@ -141,8 +141,8 @@ export const TTDDialogBase = withInternalFallback("TTDDialogBase", ({ tab, ...re
                                             marginLeft: "10px",
                                             fontSize: 10,
                                             borderRadius: "12px",
-                                            background: "pink",
-                                            color: "#000",
+                                            background: "var(--color-promo)",
+                                            color: "var(--color-surface-lowest)",
                                         }, children: "AI Beta" })] }) }), _jsx(TTDDialogTabTrigger, { tab: "mermaid", children: "Mermaid" })] })), _jsx(TTDDialogTab, { className: "ttd-dialog-content", tab: "mermaid", children: _jsx(MermaidToExcalidraw, { mermaidToExcalidrawLib: mermaidToExcalidrawLib }) }), !("__fallback" in rest) && (_jsxs(TTDDialogTab, { className: "ttd-dialog-content", tab: "text-to-diagram", children: [_jsx("div", { className: "ttd-dialog-desc", children: "Currently we use Mermaid as a middle step, so you'll get best results if you describe a diagram, workflow, flow chart, and similar." }), _jsxs(TTDDialogPanels, { children: [_jsx(TTDDialogPanel, { label: t("labels.prompt"), panelAction: {
                                         action: onGenerate,
                                         label: "Generate",

package/dist/excalidraw/components/TTDDialog/TTDDialogInput.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEventHandler } from "react";
+import type { ChangeEventHandler } from "react";
 interface TTDDialogInputProps {
     input: string;
     placeholder: string;

package/dist/excalidraw/components/TTDDialog/TTDDialogPanel.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 interface TTDDialogPanelProps {
     label: string;
     children: ReactNode;

package/dist/excalidraw/components/TTDDialog/TTDDialogPanels.d.ts

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

package/dist/excalidraw/components/TTDDialog/TTDDialogTabs.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 declare const TTDDialogTabs: {
     (props: {
         children: ReactNode;

package/dist/excalidraw/components/TTDDialog/TTDDialogTrigger.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 export declare const TTDDialogTrigger: {
     ({ children, icon, }: {
         children?: ReactNode;

package/dist/excalidraw/components/TTDDialog/common.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { MermaidOptions } from "@excalidraw/mermaid-to-excalidraw";
-import { MermaidToExcalidrawResult } from "@excalidraw/mermaid-to-excalidraw/dist/interfaces";
-import { NonDeletedExcalidrawElement } from "../../element/types";
-import { AppClassProperties, BinaryFiles } from "../../types";
+import type { MermaidOptions } from "@excalidraw/mermaid-to-excalidraw";
+import type { MermaidToExcalidrawResult } from "@excalidraw/mermaid-to-excalidraw/dist/interfaces";
+import type { NonDeletedExcalidrawElement } from "../../element/types";
+import type { AppClassProperties, BinaryFiles } from "../../types";
 export interface MermaidToExcalidrawLibProps {
     loaded: boolean;
     api: Promise<{

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

@@ -1,4 +1,4 @@
-import { KeyboardEvent } from "react";
+import type { KeyboardEvent } from "react";
 import "./TextField.scss";
 type TextFieldProps = {
     onChange?: (value: string) => void;

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

@@ -1,4 +1,4 @@
-import { CSSProperties } from "react";
+import type { CSSProperties } from "react";
 import "./Toast.scss";
 export declare const Toast: ({ message, onClose, closable, duration, style, }: {
     message: string;

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

@@ -1,6 +1,7 @@
 import "./ToolIcon.scss";
-import React, { CSSProperties } from "react";
-import { PointerType } from "../element/types";
+import type { CSSProperties } from "react";
+import React from "react";
+import type { PointerType } from "../element/types";
 export type ToolButtonSize = "small" | "medium";
 type ToolButtonBaseProps = {
     icon?: React.ReactNode;
@@ -17,6 +18,7 @@ type ToolButtonBaseProps = {
     hidden?: boolean;
     visible?: boolean;
     selected?: boolean;
+    disabled?: boolean;
     className?: string;
     style?: CSSProperties;
     isLoading?: boolean;

package/dist/excalidraw/components/ToolButton.js

@@ -52,7 +52,7 @@ export const ToolButton = React.forwardRef((props, ref) => {
                 ToolIcon: !props.hidden,
                 "ToolIcon--selected": props.selected,
                 "ToolIcon--plain": props.type === "icon",
-            }), style: props.style, "data-testid": props["data-testid"], hidden: props.hidden, title: props.title, "aria-label": props["aria-label"], type: type, onClick: onClick, ref: innerRef, disabled: isLoading || props.isLoading, children: [(props.icon || props.label) && (_jsxs("div", { className: "ToolIcon__icon", "aria-hidden": "true", children: [props.icon || props.label, props.keyBindingLabel && (_jsx("span", { className: "ToolIcon__keybinding", children: props.keyBindingLabel })), props.isLoading && _jsx(Spinner, {})] })), props.showAriaLabel && (_jsxs("div", { className: "ToolIcon__label", children: [props["aria-label"], " ", isLoading && _jsx(Spinner, {})] })), props.children] }));
+            }), style: props.style, "data-testid": props["data-testid"], hidden: props.hidden, title: props.title, "aria-label": props["aria-label"], type: type, onClick: onClick, ref: innerRef, disabled: isLoading || props.isLoading || !!props.disabled, children: [(props.icon || props.label) && (_jsxs("div", { className: "ToolIcon__icon", "aria-hidden": "true", "aria-disabled": !!props.disabled, children: [props.icon || props.label, props.keyBindingLabel && (_jsx("span", { className: "ToolIcon__keybinding", children: props.keyBindingLabel })), props.isLoading && _jsx(Spinner, {})] })), props.showAriaLabel && (_jsxs("div", { className: "ToolIcon__label", children: [props["aria-label"], " ", isLoading && _jsx(Spinner, {})] })), props.children] }));
     }
     return (_jsxs("label", { className: clsx("ToolIcon", props.className), title: props.title, onPointerDown: (event) => {
             lastPointerTypeRef.current = event.pointerType || null;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { TranslationKeys } from "../i18n";
+import type { TranslationKeys } from "../i18n";
 declare const Trans: ({ i18nKey, children, ...props }: {
     [key: string]: React.ReactNode | ((el: React.ReactNode) => React.ReactNode);
     i18nKey: TranslationKeys;

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

@@ -1,6 +1,6 @@
 import "./UserList.scss";
 import React from "react";
-import { Collaborator, SocketId } from "../types";
+import type { Collaborator, SocketId } from "../types";
 export type GoToCollaboratorComponentProps = {
     socketId: SocketId;
     collaborator: Collaborator;

package/dist/excalidraw/components/canvases/InteractiveCanvas.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import type { DOMAttributes } from "react";
-import type { InteractiveCanvasAppState } from "../../types";
+import type { Device, InteractiveCanvasAppState } from "../../types";
 import type { RenderableElementsMap, RenderInteractiveSceneCallback } from "../../scene/types";
 import type { NonDeletedExcalidrawElement } from "../../element/types";
 type InteractiveCanvasProps = {
@@ -9,10 +9,11 @@ type InteractiveCanvasProps = {
     elementsMap: RenderableElementsMap;
     visibleElements: readonly NonDeletedExcalidrawElement[];
     selectedElements: readonly NonDeletedExcalidrawElement[];
-    versionNonce: number | undefined;
+    sceneNonce: number | undefined;
     selectionNonce: number | undefined;
     scale: number;
     appState: InteractiveCanvasAppState;
+    device: Device;
     renderInteractiveSceneCallback: (data: RenderInteractiveSceneCallback) => void;
     handleCanvasRef: (canvas: HTMLCanvasElement | null) => void;
     onContextMenu: Exclude<DOMAttributes<HTMLCanvasElement | HTMLDivElement>["onContextMenu"], undefined>;

package/dist/excalidraw/components/canvases/InteractiveCanvas.js

@@ -60,6 +60,7 @@ const InteractiveCanvas = (props) => {
                 selectionColor,
                 renderScrollbars: false,
             },
+            device: props.device,
             callback: props.renderInteractiveSceneCallback,
         }, isRenderThrottlingEnabled());
     });
@@ -102,10 +103,10 @@ const getRelevantAppStateProps = (appState) => ({
 const areEqual = (prevProps, nextProps) => {
     // This could be further optimised if needed, as we don't have to render interactive canvas on each scene mutation
     if (prevProps.selectionNonce !== nextProps.selectionNonce ||
-        prevProps.versionNonce !== nextProps.versionNonce ||
+        prevProps.sceneNonce !== nextProps.sceneNonce ||
         prevProps.scale !== nextProps.scale ||
         // we need to memoize on elementsMap because they may have renewed
-        // even if versionNonce didn't change (e.g. we filter elements out based
+        // even if sceneNonce didn't change (e.g. we filter elements out based
         // on appState)
         prevProps.elementsMap !== nextProps.elementsMap ||
         prevProps.visibleElements !== nextProps.visibleElements ||

package/dist/excalidraw/components/canvases/StaticCanvas.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { RoughCanvas } from "roughjs/bin/canvas";
+import type { RoughCanvas } from "roughjs/bin/canvas";
 import type { StaticCanvasAppState } from "../../types";
 import type { RenderableElementsMap, StaticCanvasRenderConfig } from "../../scene/types";
 import type { NonDeletedExcalidrawElement, NonDeletedSceneElementsMap } from "../../element/types";
@@ -9,7 +9,7 @@ type StaticCanvasProps = {
     elementsMap: RenderableElementsMap;
     allElementsMap: NonDeletedSceneElementsMap;
     visibleElements: readonly NonDeletedExcalidrawElement[];
-    versionNonce: number | undefined;
+    sceneNonce: number | undefined;
     selectionNonce: number | undefined;
     scale: number;
     appState: StaticCanvasAppState;

package/dist/excalidraw/components/canvases/StaticCanvas.js

@@ -70,10 +70,10 @@ const getRelevantAppStateProps = (appState) => ({
     editingGroupId: appState.editingGroupId,
 });
 const areEqual = (prevProps, nextProps) => {
-    if (prevProps.versionNonce !== nextProps.versionNonce ||
+    if (prevProps.sceneNonce !== nextProps.sceneNonce ||
         prevProps.scale !== nextProps.scale ||
         // we need to memoize on elementsMap because they may have renewed
-        // even if versionNonce didn't change (e.g. we filter elements out based
+        // even if sceneNonce didn't change (e.g. we filter elements out based
         // on appState)
         prevProps.elementsMap !== nextProps.elementsMap ||
         prevProps.visibleElements !== nextProps.visibleElements) {

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

@@ -11,10 +11,10 @@ export const DropDownMenuItemBadge = ({ children, }) => {
             display: "inline-flex",
             marginLeft: "auto",
             padding: "2px 4px",
-            background: "pink",
+            background: "var(--color-promo)",
+            color: "var(--color-surface-lowest)",
             borderRadius: 6,
             fontSize: 9,
-            color: "black",
             fontFamily: "Cascadia, monospace",
         }, children: children }));
 };

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { ActionManager } from "../../actions/manager";
-import { UIAppState } from "../../types";
+import type { ActionManager } from "../../actions/manager";
+import type { UIAppState } from "../../types";
 declare const Footer: {
     ({ appState, actionManager, showExitZenModeBtn, renderWelcomeScreen, }: {
         appState: UIAppState;

package/dist/excalidraw/components/hyperlink/Hyperlink.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { AppState, ExcalidrawProps, UIAppState } from "../../types";
-import { ElementsMap, ExcalidrawEmbeddableElement, NonDeletedExcalidrawElement } from "../../element/types";
+import type { AppState, ExcalidrawProps, UIAppState } from "../../types";
+import type { ElementsMap, ExcalidrawEmbeddableElement, NonDeletedExcalidrawElement } from "../../element/types";
 import "./Hyperlink.scss";
 export declare const Hyperlink: ({ element, elementsMap, setAppState, onLinkOpen, setToast, updateEmbedValidationStatus, }: {
     element: NonDeletedExcalidrawElement;

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

@@ -1,6 +1,6 @@
-import { Bounds } from "../../element/bounds";
-import { ElementsMap, NonDeletedExcalidrawElement } from "../../element/types";
-import { AppState, UIAppState } from "../../types";
+import type { Bounds } from "../../element/bounds";
+import type { ElementsMap, NonDeletedExcalidrawElement } from "../../element/types";
+import type { AppState, UIAppState } from "../../types";
 export declare const EXTERNAL_LINK_IMG: HTMLImageElement;
 export declare const getLinkHandleFromCoords: ([x1, y1, x2, y2]: Bounds, angle: number, appState: Pick<UIAppState, "zoom">) => Bounds;
 export declare const isPointHittingLinkIcon: (element: NonDeletedExcalidrawElement, elementsMap: ElementsMap, appState: AppState, [x, y]: readonly [number, number]) => boolean;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Theme } from "../element/types";
+import type { Theme } from "../element/types";
 export declare const iconFillColor: (theme: Theme) => string;
 type Opts = {
     width?: number;
@@ -194,4 +194,9 @@ 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 loginIcon: JSX.Element;
+export declare const youtubeIcon: JSX.Element;
+export declare const gridIcon: JSX.Element;
+export declare const lineEditorIcon: JSX.Element;
 export {};