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

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 = {
@@ -13,6 +13,7 @@ type InteractiveCanvasProps = {
     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());
     });

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

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 {};

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);
@@ -121,10 +121,18 @@ export const shareWindows = createIcon(_jsxs(_Fragment, { children: [_jsx("path"
 // Icon imported form Storybook
 // Storybook is licensed under MIT https://github.com/storybookjs/storybook/blob/next/LICENSE
 export const resetZoom = createIcon(_jsx("path", { stroke: "currentColor", strokeWidth: "40", fill: "currentColor", d: "M148 560a318 318 0 0 0 522 110 316 316 0 0 0 0-450 316 316 0 0 0-450 0c-11 11-21 22-30 34v4h47c25 0 46 21 46 46s-21 45-46 45H90c-13 0-25-6-33-14-9-9-14-20-14-33V156c0-25 20-45 45-45s45 20 45 45v32l1 1a401 401 0 0 1 623 509l212 212a42 42 0 0 1-59 59L698 757A401 401 0 0 1 65 570a42 42 0 0 1 83-10z" }), { width: 1024 });
-export const BringForwardIcon = createIcon(_jsxs(_Fragment, { children: [_jsxs("g", { clipPath: "url(#a)", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M13.889 4.167H8.333c-.767 0-1.389.622-1.389 1.389v5.555c0 .767.622 1.389 1.39 1.389h5.555c.767 0 1.389-.622 1.389-1.389V5.556c0-.767-.622-1.39-1.39-1.39Z", fill: "currentColor" }), _jsx("path", { d: "M12.5 12.5v1.389a1.389 1.389 0 0 1-1.389 1.389H5.556a1.389 1.389 0 0 1-1.39-1.39V8.334a1.389 1.389 0 0 1 1.39-1.389h1.388" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
-export const SendBackwardIcon = createIcon(_jsxs(_Fragment, { children: [_jsxs("g", { clipPath: "url(#a)", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.944 12.5H12.5v1.389a1.389 1.389 0 0 1-1.389 1.389H5.556a1.389 1.389 0 0 1-1.39-1.39V8.334a1.389 1.389 0 0 1 1.39-1.389h1.388", fill: "currentColor" }), _jsx("path", { d: "M13.889 4.167H8.333c-.767 0-1.389.621-1.389 1.389v5.555c0 .767.622 1.389 1.39 1.389h5.555c.767 0 1.389-.622 1.389-1.389V5.556c0-.768-.622-1.39-1.39-1.39Z" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
-export const BringToFrontIcon = createIcon(_jsxs(_Fragment, { children: [_jsxs("g", { clipPath: "url(#a)", stroke: "currentColor", strokeWidth: "1.25", children: [_jsx("path", { d: "M8.775 6.458h2.45a2.316 2.316 0 0 1 2.317 2.316v2.452a2.316 2.316 0 0 1-2.316 2.316H8.774a2.316 2.316 0 0 1-2.317-2.316V8.774a2.316 2.316 0 0 1 2.317-2.316Z", fill: "currentColor" }), _jsx("path", { d: "M5.441 9.792h2.451a2.316 2.316 0 0 1 2.316 2.316v2.45a2.316 2.316 0 0 1-2.316 2.317h-2.45a2.316 2.316 0 0 1-2.317-2.316v-2.451a2.316 2.316 0 0 1 2.316-2.316ZM12.108 3.125h2.45a2.316 2.316 0 0 1 2.317 2.316v2.451a2.316 2.316 0 0 1-2.316 2.316h-2.451a2.316 2.316 0 0 1-2.316-2.316v-2.45a2.316 2.316 0 0 1 2.316-2.317Z" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
-export const SendToBackIcon = createIcon(_jsxs(_Fragment, { children: [_jsxs("g", { clipPath: "url(#a)", children: [_jsx("path", { d: "M5.441 9.792h2.451a2.316 2.316 0 0 1 2.316 2.316v2.45a2.316 2.316 0 0 1-2.316 2.317h-2.45a2.316 2.316 0 0 1-2.317-2.316v-2.451a2.316 2.316 0 0 1 2.316-2.316Z", stroke: "currentColor", strokeWidth: "1.25" }), _jsx("path", { d: "M5.441 9.792h2.451a2.316 2.316 0 0 1 2.316 2.316v2.45a2.316 2.316 0 0 1-2.316 2.317h-2.45a2.316 2.316 0 0 1-2.317-2.316v-2.451a2.316 2.316 0 0 1 2.316-2.316Z", stroke: "currentColor", strokeWidth: "1.25" }), _jsx("mask", { id: "SendToBackIcon", fill: "#fff", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.167 5.833v2.06a2.941 2.941 0 0 0 2.94 2.94h2.06v.393a2.941 2.941 0 0 1-2.941 2.94h-.393v-2.058a2.941 2.941 0 0 0-2.94-2.941h-2.06v-.393a2.941 2.941 0 0 1 2.942-2.94h.392Z" }) }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.167 5.833v2.06a2.941 2.941 0 0 0 2.94 2.94h2.06v.393a2.941 2.941 0 0 1-2.941 2.94h-.393v-2.058a2.941 2.941 0 0 0-2.94-2.941h-2.06v-.393a2.941 2.941 0 0 1 2.942-2.94h.392Z", fill: "currentColor" }), _jsx("path", { d: "M9.167 5.833h1.25v-1.25h-1.25v1.25Zm5 5h1.25v-1.25h-1.25v1.25Zm-3.334 3.334h-1.25v1.25h1.25v-1.25Zm-5-5h-1.25v1.25h1.25v-1.25Zm2.084-3.334v2.06h2.5v-2.06h-2.5Zm0 2.06a4.191 4.191 0 0 0 4.19 4.19v-2.5a1.691 1.691 0 0 1-1.69-1.69h-2.5Zm4.19 4.19h2.06v-2.5h-2.06v2.5Zm.81-1.25v.393h2.5v-.393h-2.5Zm0 .393c0 .933-.758 1.69-1.691 1.69v2.5a4.191 4.191 0 0 0 4.19-4.19h-2.5Zm-1.691 1.69h-.393v2.5h.393v-2.5Zm.857 1.25v-2.058h-2.5v2.059h2.5Zm0-2.058a4.191 4.191 0 0 0-4.19-4.191v2.5c.933 0 1.69.757 1.69 1.69h2.5Zm-4.19-4.191h-2.06v2.5h2.06v-2.5Zm-.81 1.25v-.393h-2.5v.393h2.5Zm0-.393c0-.934.758-1.69 1.692-1.69v-2.5a4.191 4.191 0 0 0-4.192 4.19h2.5Zm1.692-1.69h.392v-2.5h-.392v2.5Z", fill: "currentColor", mask: "url(#SendToBackIcon)" }), _jsx("path", { d: "M12.108 3.125h2.45a2.316 2.316 0 0 1 2.317 2.316v2.451a2.316 2.316 0 0 1-2.316 2.316h-2.451a2.316 2.316 0 0 1-2.316-2.316v-2.45a2.316 2.316 0 0 1 2.316-2.317Z", stroke: "currentColor", strokeWidth: "1.25" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
+const arrowBarToTopJSX = (_jsxs("g", { strokeWidth: 1.5, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M12 10l0 10" }), _jsx("path", { d: "M12 10l4 4" }), _jsx("path", { d: "M12 10l-4 4" }), _jsx("path", { d: "M4 4l16 0" })] }));
+const arrownNarrowUpJSX = (_jsxs("g", { strokeWidth: 1.5, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M12 5l0 14" }), _jsx("path", { d: "M16 9l-4 -4" }), _jsx("path", { d: "M8 9l4 -4" })] }));
+export const BringForwardIcon = createIcon(arrownNarrowUpJSX, tablerIconProps);
+export const SendBackwardIcon = createIcon(arrownNarrowUpJSX, {
+    ...tablerIconProps,
+    transform: "rotate(180)",
+});
+export const BringToFrontIcon = createIcon(arrowBarToTopJSX, tablerIconProps);
+export const SendToBackIcon = createIcon(arrowBarToTopJSX, {
+    ...tablerIconProps,
+    transform: "rotate(180)",
+});
 //
 // Align action icons created from scratch to match those of z-index actions
 // Note: vertical align icons are flipped so the larger item is always the
@@ -240,3 +248,9 @@ 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 });
+// login
+export const loginIcon = createIcon(_jsxs("g", { strokeWidth: 1.5, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M15 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2" }), _jsx("path", { d: "M21 12h-13l3 -3" }), _jsx("path", { d: "M11 15l-3 -3" })] }), 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);
+export const gridIcon = createIcon(_jsxs("g", { strokeWidth: 1.5, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M3 6h18" }), _jsx("path", { d: "M3 12h18" }), _jsx("path", { d: "M3 18h18" }), _jsx("path", { d: "M6 3v18" }), _jsx("path", { d: "M12 3v18" }), _jsx("path", { d: "M18 3v18" })] }), tablerIconProps);
+export const lineEditorIcon = createIcon(_jsxs("g", { strokeWidth: 1.5, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M17 3m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z" }), _jsx("path", { d: "M3 17m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z" }), _jsx("path", { d: "M17 5c-6.627 0 -12 5.373 -12 12" })] }), 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") }));
 };