set textarea width based on text size ceil value

Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>

dev-docs/yarn.lock

@@ -7614,9 +7614,9 @@ webpack-bundle-analyzer@^4.5.0:
     ws "^7.3.1"
 
 webpack-dev-middleware@^5.3.1:
-  version "5.3.4"
-  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz#eb7b39281cbce10e104eb2b8bf2b63fce49a3517"
-  integrity sha512-BVdTqhhs+0IfoeAf7EoH5WE+exCmqGerHfDM0IL096Px60Tq2Mn9MAbnaGUe6HiMa41KMCYF19gyzZmBcq/o4Q==
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-5.3.3.tgz#efae67c2793908e7311f1d9b06f2a08dcc97e51f"
+  integrity sha512-hj5CYrY0bZLB+eTO+x/j67Pkrquiy7kWepMHmUMoPsmcUaeEnQJqFzHJOyxgWlq746/wUuA64p9ta34Kyb01pA==
   dependencies:
     colorette "^2.0.10"
     memfs "^3.4.3"

excalidraw-app/App.tsx

@@ -47,6 +47,7 @@ import {
 } from "../packages/excalidraw/utils";
 import {
   FIREBASE_STORAGE_PREFIXES,
+  isExcalidrawPlusSignedUser,
   STORAGE_KEYS,
   SYNC_BROWSER_TABS_TIMEOUT,
 } from "./app_constants";
@@ -107,6 +108,19 @@ import { OverwriteConfirmDialog } from "../packages/excalidraw/components/Overwr
 import Trans from "../packages/excalidraw/components/Trans";
 import { ShareDialog, shareDialogStateAtom } from "./share/ShareDialog";
 import CollabError, { collabErrorIndicatorAtom } from "./collab/CollabError";
+import {
+  CommandPalette,
+  DEFAULT_CATEGORIES,
+} from "../packages/excalidraw/components/CommandPalette/CommandPalette";
+import {
+  GithubIcon,
+  XBrandIcon,
+  DiscordIcon,
+  ExcalLogo,
+  usersIcon,
+  exportToPlus,
+  share,
+} from "../packages/excalidraw/components/icons";
 
 polyfill();
 
@@ -692,6 +706,45 @@ const ExcalidrawWrapper = () => {
     );
   }
 
+  const ExcalidrawPlusCommand = {
+    label: "Excalidraw+",
+    category: DEFAULT_CATEGORIES.links,
+    predicate: true,
+    icon: <div style={{ width: 14 }}>{ExcalLogo}</div>,
+    keywords: ["plus", "cloud", "server"],
+    perform: () => {
+      window.open(
+        `${
+          import.meta.env.VITE_APP_PLUS_LP
+        }/plus?utm_source=excalidraw&utm_medium=app&utm_content=command_palette`,
+        "_blank",
+      );
+    },
+  };
+  const ExcalidrawPlusAppCommand = {
+    label: "Sign up",
+    category: DEFAULT_CATEGORIES.links,
+    predicate: true,
+    icon: <div style={{ width: 14 }}>{ExcalLogo}</div>,
+    keywords: [
+      "excalidraw",
+      "plus",
+      "cloud",
+      "server",
+      "signin",
+      "login",
+      "signup",
+    ],
+    perform: () => {
+      window.open(
+        `${
+          import.meta.env.VITE_APP_PLUS_APP
+        }?utm_source=excalidraw&utm_medium=app&utm_content=command_palette`,
+        "_blank",
+      );
+    },
+  };
+
   return (
     <div
       style={{ height: "100%" }}
@@ -886,6 +939,160 @@ const ExcalidrawWrapper = () => {
             {errorMessage}
           </ErrorDialog>
         )}
+
+        <CommandPalette
+          customCommandPaletteItems={[
+            {
+              label: t("labels.liveCollaboration"),
+              category: DEFAULT_CATEGORIES.app,
+              keywords: [
+                "team",
+                "multiplayer",
+                "share",
+                "public",
+                "session",
+                "invite",
+              ],
+              icon: usersIcon,
+              perform: () => {
+                setShareDialogState({
+                  isOpen: true,
+                  type: "collaborationOnly",
+                });
+              },
+            },
+            {
+              label: t("roomDialog.button_stopSession"),
+              category: DEFAULT_CATEGORIES.app,
+              predicate: () => !!collabAPI?.isCollaborating(),
+              keywords: [
+                "stop",
+                "session",
+                "end",
+                "leave",
+                "close",
+                "exit",
+                "collaboration",
+              ],
+              perform: () => {
+                if (collabAPI) {
+                  collabAPI.stopCollaboration();
+                  if (!collabAPI.isCollaborating()) {
+                    setShareDialogState({ isOpen: false });
+                  }
+                }
+              },
+            },
+            {
+              label: t("labels.share"),
+              category: DEFAULT_CATEGORIES.app,
+              predicate: true,
+              icon: share,
+              keywords: [
+                "link",
+                "shareable",
+                "readonly",
+                "export",
+                "publish",
+                "snapshot",
+                "url",
+                "collaborate",
+                "invite",
+              ],
+              perform: async () => {
+                setShareDialogState({ isOpen: true, type: "share" });
+              },
+            },
+            {
+              label: "GitHub",
+              icon: GithubIcon,
+              category: DEFAULT_CATEGORIES.links,
+              predicate: true,
+              keywords: [
+                "issues",
+                "bugs",
+                "requests",
+                "report",
+                "features",
+                "social",
+                "community",
+              ],
+              perform: () => {
+                window.open(
+                  "https://github.com/excalidraw/excalidraw",
+                  "_blank",
+                  "noopener noreferrer",
+                );
+              },
+            },
+            {
+              label: t("labels.followUs"),
+              icon: XBrandIcon,
+              category: DEFAULT_CATEGORIES.links,
+              predicate: true,
+              keywords: ["twitter", "contact", "social", "community"],
+              perform: () => {
+                window.open(
+                  "https://x.com/excalidraw",
+                  "_blank",
+                  "noopener noreferrer",
+                );
+              },
+            },
+            {
+              label: t("labels.discordChat"),
+              category: DEFAULT_CATEGORIES.links,
+              predicate: true,
+              icon: DiscordIcon,
+              keywords: [
+                "chat",
+                "talk",
+                "contact",
+                "bugs",
+                "requests",
+                "report",
+                "feedback",
+                "suggestions",
+                "social",
+                "community",
+              ],
+              perform: () => {
+                window.open(
+                  "https://discord.gg/UexuTaE",
+                  "_blank",
+                  "noopener noreferrer",
+                );
+              },
+            },
+            ...(isExcalidrawPlusSignedUser
+              ? [
+                  {
+                    ...ExcalidrawPlusAppCommand,
+                    label: "Sign in / Go to Excalidraw+",
+                  },
+                ]
+              : [ExcalidrawPlusCommand, ExcalidrawPlusAppCommand]),
+
+            {
+              label: t("overwriteConfirm.action.excalidrawPlus.button"),
+              category: DEFAULT_CATEGORIES.export,
+              icon: exportToPlus,
+              predicate: true,
+              keywords: ["plus", "export", "save", "backup"],
+              perform: () => {
+                if (excalidrawAPI) {
+                  exportToExcalidrawPlus(
+                    excalidrawAPI.getSceneElements(),
+                    excalidrawAPI.getAppState(),
+                    excalidrawAPI.getFiles(),
+                    excalidrawAPI.getName(),
+                  );
+                }
+              },
+            },
+            CommandPalette.defaultItems.toggleTheme,
+          ]}
+        />
       </Excalidraw>
     </div>
   );

excalidraw-app/components/AppMainMenu.tsx

@@ -20,7 +20,7 @@ export const AppMainMenu: React.FC<{
           onSelect={() => props.onCollabDialogOpen()}
         />
       )}
-
+      <MainMenu.DefaultItems.CommandPalette />
       <MainMenu.DefaultItems.Help />
       <MainMenu.DefaultItems.ClearCanvas />
       <MainMenu.Separator />

excalidraw-app/components/TopErrorBoundary.tsx

@@ -67,6 +67,8 @@ export class TopErrorBoundary extends React.Component<
 
     window.open(
       `https://github.com/excalidraw/excalidraw/issues/new?body=${body}`,
+      "_blank",
+      "noopener noreferrer",
     );
   }
 

excalidraw-app/index.html

@@ -78,7 +78,7 @@
       }
     </style>
     <!------------------------------------------------------------------------->
-    <% if ("%PROD%" === "true") { %>
+    <% if (typeof PROD != 'undefined' && PROD == true) { %>
     <script>
       // Redirect Excalidraw+ users which have auto-redirect enabled.
       //
@@ -122,7 +122,8 @@
     />
 
     <link rel="stylesheet" href="/fonts/fonts.css" type="text/css" />
-    <% if ("%VITE_APP_DEV_DISABLE_LIVE_RELOAD%"==="true" ) { %>
+    <% if (typeof VITE_APP_DEV_DISABLE_LIVE_RELOAD != 'undefined' &&
+    VITE_APP_DEV_DISABLE_LIVE_RELOAD == true) { %>
     <script>
       {
         const _WebSocket = window.WebSocket;
@@ -196,7 +197,8 @@
     </header>
     <div id="root"></div>
     <script type="module" src="index.tsx"></script>
-    <% if ("%VITE_APP_DEV_DISABLE_LIVE_RELOAD%" !== 'true') { %>
+    <% if (typeof VITE_APP_DEV_DISABLE_LIVE_RELOAD != 'undefined' &&
+    VITE_APP_DEV_DISABLE_LIVE_RELOAD != true) { %>
     <!-- 100% privacy friendly analytics -->
     <script>
       // need to load this script dynamically bcs. of iframe embed tracking

excalidraw-app/package.json

@@ -25,7 +25,9 @@
   "engines": {
     "node": ">=18.0.0"
   },
-  "dependencies": {},
+  "dependencies": {
+    "vite-plugin-html": "3.2.2"
+  },
   "prettier": "@excalidraw/prettier-config",
   "scripts": {
     "build-node": "node ./scripts/build-node.js",

excalidraw-app/share/ShareDialog.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import * as Popover from "@radix-ui/react-popover";
 import { copyTextToSystemClipboard } from "../../packages/excalidraw/clipboard";
 import { trackEvent } from "../../packages/excalidraw/analytics";
@@ -22,6 +22,7 @@ import { activeRoomLinkAtom, CollabAPI } from "../collab/Collab";
 import { atom, useAtom, useAtomValue } from "jotai";
 
 import "./ShareDialog.scss";
+import { useUIAppState } from "../../packages/excalidraw/context/ui-appState";
 
 type OnExportToBackend = () => void;
 type ShareDialogType = "share" | "collaborationOnly";
@@ -275,6 +276,14 @@ export const ShareDialog = (props: {
 }) => {
   const [shareDialogState, setShareDialogState] = useAtom(shareDialogStateAtom);
 
+  const { openDialog } = useUIAppState();
+
+  useEffect(() => {
+    if (openDialog) {
+      setShareDialogState({ isOpen: false });
+    }
+  }, [openDialog, setShareDialogState]);
+
   if (!shareDialogState.isOpen) {
     return null;
   }
@@ -285,6 +294,6 @@ export const ShareDialog = (props: {
       collabAPI={props.collabAPI}
       onExportToBackend={props.onExportToBackend}
       type={shareDialogState.type}
-    ></ShareDialogInner>
+    />
   );
 };

excalidraw-app/vite.config.mts

@@ -4,6 +4,7 @@ import svgrPlugin from "vite-plugin-svgr";
 import { ViteEjsPlugin } from "vite-plugin-ejs";
 import { VitePWA } from "vite-plugin-pwa";
 import checker from "vite-plugin-checker";
+import { createHtmlPlugin } from "vite-plugin-html";
 
 // To load .env.local variables
 const envVars = loadEnv("", `../`);
@@ -189,6 +190,9 @@ export default defineConfig({
         ],
       },
     }),
+    createHtmlPlugin({
+      minify: true,
+    }),
   ],
   publicDir: "../public",
 });

packages/excalidraw/actions/actionAddToLibrary.ts

@@ -58,5 +58,5 @@ export const actionAddToLibrary = register({
         };
       });
   },
-  contextItemLabel: "labels.addToLibrary",
+  label: "labels.addToLibrary",
 });

packages/excalidraw/actions/actionAlign.tsx

@@ -15,13 +15,13 @@ import { updateFrameMembershipOfSelectedElements } from "../frame";
 import { t } from "../i18n";
 import { KEYS } from "../keys";
 import { isSomeElementSelected } from "../scene";
-import { AppClassProperties, AppState } from "../types";
+import { AppClassProperties, AppState, UIAppState } from "../types";
 import { arrayToMap, getShortcutKey } from "../utils";
 import { register } from "./register";
 
 const alignActionsPredicate = (
   elements: readonly ExcalidrawElement[],
-  appState: AppState,
+  appState: UIAppState,
   _: unknown,
   app: AppClassProperties,
 ) => {
@@ -59,6 +59,8 @@ const alignSelectedElements = (
 
 export const actionAlignTop = register({
   name: "alignTop",
+  label: "labels.alignTop",
+  icon: AlignTopIcon,
   trackEvent: { category: "element" },
   predicate: alignActionsPredicate,
   perform: (elements, appState, _, app) => {
@@ -90,6 +92,8 @@ export const actionAlignTop = register({
 
 export const actionAlignBottom = register({
   name: "alignBottom",
+  label: "labels.alignBottom",
+  icon: AlignBottomIcon,
   trackEvent: { category: "element" },
   predicate: alignActionsPredicate,
   perform: (elements, appState, _, app) => {
@@ -121,6 +125,8 @@ export const actionAlignBottom = register({
 
 export const actionAlignLeft = register({
   name: "alignLeft",
+  label: "labels.alignLeft",
+  icon: AlignLeftIcon,
   trackEvent: { category: "element" },
   predicate: alignActionsPredicate,
   perform: (elements, appState, _, app) => {
@@ -152,6 +158,8 @@ export const actionAlignLeft = register({
 
 export const actionAlignRight = register({
   name: "alignRight",
+  label: "labels.alignRight",
+  icon: AlignRightIcon,
   trackEvent: { category: "element" },
   predicate: alignActionsPredicate,
   perform: (elements, appState, _, app) => {
@@ -183,6 +191,8 @@ export const actionAlignRight = register({
 
 export const actionAlignVerticallyCentered = register({
   name: "alignVerticallyCentered",
+  label: "labels.centerVertically",
+  icon: CenterVerticallyIcon,
   trackEvent: { category: "element" },
   predicate: alignActionsPredicate,
   perform: (elements, appState, _, app) => {
@@ -210,6 +220,8 @@ export const actionAlignVerticallyCentered = register({
 
 export const actionAlignHorizontallyCentered = register({
   name: "alignHorizontallyCentered",
+  label: "labels.centerHorizontally",
+  icon: CenterHorizontallyIcon,
   trackEvent: { category: "element" },
   predicate: alignActionsPredicate,
   perform: (elements, appState, _, app) => {

packages/excalidraw/actions/actionBoundText.tsx

@@ -36,7 +36,7 @@ import { register } from "./register";
 
 export const actionUnbindText = register({
   name: "unbindText",
-  contextItemLabel: "labels.unbindText",
+  label: "labels.unbindText",
   trackEvent: { category: "element" },
   predicate: (elements, appState, _, app) => {
     const selectedElements = app.scene.getSelectedElements(appState);
@@ -91,7 +91,7 @@ export const actionUnbindText = register({
 
 export const actionBindText = register({
   name: "bindText",
-  contextItemLabel: "labels.bindText",
+  label: "labels.bindText",
   trackEvent: { category: "element" },
   predicate: (elements, appState, _, app) => {
     const selectedElements = app.scene.getSelectedElements(appState);
@@ -203,7 +203,7 @@ const pushContainerBelowText = (
 
 export const actionWrapTextInContainer = register({
   name: "wrapTextInContainer",
-  contextItemLabel: "labels.createContainerFromText",
+  label: "labels.createContainerFromText",
   trackEvent: { category: "element" },
   predicate: (elements, appState, _, app) => {
     const selectedElements = app.scene.getSelectedElements(appState);

packages/excalidraw/actions/actionCanvas.tsx

@@ -1,5 +1,14 @@
 import { ColorPicker } from "../components/ColorPicker/ColorPicker";
-import { ZoomInIcon, ZoomOutIcon } from "../components/icons";
+import {
+  handIcon,
+  MoonIcon,
+  SunIcon,
+  TrashIcon,
+  zoomAreaIcon,
+  ZoomInIcon,
+  ZoomOutIcon,
+  ZoomResetIcon,
+} from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
 import { CURSOR_TYPE, MIN_ZOOM, THEME, ZOOM_STEP } from "../constants";
 import { getCommonBounds, getNonDeletedElements } from "../element";
@@ -25,6 +34,8 @@ import { setCursor } from "../cursor";
 
 export const actionChangeViewBackgroundColor = register({
   name: "changeViewBackgroundColor",
+  label: "labels.canvasBackground",
+  paletteName: "Change canvas background color",
   trackEvent: false,
   predicate: (elements, appState, props, app) => {
     return (
@@ -59,6 +70,9 @@ export const actionChangeViewBackgroundColor = register({
 
 export const actionClearCanvas = register({
   name: "clearCanvas",
+  label: "labels.clearCanvas",
+  paletteName: "Clear canvas",
+  icon: TrashIcon,
   trackEvent: { category: "canvas" },
   predicate: (elements, appState, props, app) => {
     return (
@@ -95,7 +109,9 @@ export const actionClearCanvas = register({
 
 export const actionZoomIn = register({
   name: "zoomIn",
+  label: "buttons.zoomIn",
   viewMode: true,
+  icon: ZoomInIcon,
   trackEvent: { category: "canvas" },
   perform: (_elements, appState, _, app) => {
     return {
@@ -133,6 +149,8 @@ export const actionZoomIn = register({
 
 export const actionZoomOut = register({
   name: "zoomOut",
+  label: "buttons.zoomOut",
+  icon: ZoomOutIcon,
   viewMode: true,
   trackEvent: { category: "canvas" },
   perform: (_elements, appState, _, app) => {
@@ -171,6 +189,8 @@ export const actionZoomOut = register({
 
 export const actionResetZoom = register({
   name: "resetZoom",
+  label: "buttons.resetZoom",
+  icon: ZoomResetIcon,
   viewMode: true,
   trackEvent: { category: "canvas" },
   perform: (_elements, appState, _, app) => {
@@ -340,6 +360,8 @@ export const zoomToFit = ({
 // size, it won't be zoomed in.
 export const actionZoomToFitSelectionInViewport = register({
   name: "zoomToFitSelectionInViewport",
+  label: "labels.zoomToFitViewport",
+  icon: zoomAreaIcon,
   trackEvent: { category: "canvas" },
   perform: (elements, appState, _, app) => {
     const selectedElements = app.scene.getSelectedElements(appState);
@@ -363,6 +385,8 @@ export const actionZoomToFitSelectionInViewport = register({
 
 export const actionZoomToFitSelection = register({
   name: "zoomToFitSelection",
+  label: "helpDialog.zoomToSelection",
+  icon: zoomAreaIcon,
   trackEvent: { category: "canvas" },
   perform: (elements, appState, _, app) => {
     const selectedElements = app.scene.getSelectedElements(appState);
@@ -385,6 +409,8 @@ export const actionZoomToFitSelection = register({
 
 export const actionZoomToFit = register({
   name: "zoomToFit",
+  label: "helpDialog.zoomToFit",
+  icon: zoomAreaIcon,
   viewMode: true,
   trackEvent: { category: "canvas" },
   perform: (elements, appState) =>
@@ -405,6 +431,11 @@ export const actionZoomToFit = register({
 
 export const actionToggleTheme = register({
   name: "toggleTheme",
+  label: (_, appState) => {
+    return appState.theme === "dark" ? "buttons.lightMode" : "buttons.darkMode";
+  },
+  keywords: ["toggle", "dark", "light", "mode", "theme"],
+  icon: (appState) => (appState.theme === THEME.LIGHT ? MoonIcon : SunIcon),
   viewMode: true,
   trackEvent: { category: "canvas" },
   perform: (_, appState, value) => {
@@ -425,6 +456,7 @@ export const actionToggleTheme = register({
 
 export const actionToggleEraserTool = register({
   name: "toggleEraserTool",
+  label: "toolBar.eraser",
   trackEvent: { category: "toolbar" },
   perform: (elements, appState) => {
     let activeTool: AppState["activeTool"];
@@ -459,7 +491,11 @@ export const actionToggleEraserTool = register({
 
 export const actionToggleHandTool = register({
   name: "toggleHandTool",
+  label: "toolBar.hand",
+  paletteName: "Toggle hand tool",
   trackEvent: { category: "toolbar" },
+  icon: handIcon,
+  viewMode: false,
   perform: (elements, appState, _, app) => {
     let activeTool: AppState["activeTool"];
 

packages/excalidraw/actions/actionClipboard.tsx

@@ -13,9 +13,12 @@ import { exportCanvas, prepareElementsForExport } from "../data/index";
 import { isTextElement } from "../element";
 import { t } from "../i18n";
 import { isFirefox } from "../constants";
+import { DuplicateIcon, cutIcon, pngIcon, svgIcon } from "../components/icons";
 
 export const actionCopy = register({
   name: "copy",
+  label: "labels.copy",
+  icon: DuplicateIcon,
   trackEvent: { category: "element" },
   perform: async (elements, appState, event: ClipboardEvent | null, app) => {
     const elementsToCopy = app.scene.getSelectedElements({
@@ -40,13 +43,13 @@ export const actionCopy = register({
       commitToHistory: false,
     };
   },
-  contextItemLabel: "labels.copy",
   // don't supply a shortcut since we handle this conditionally via onCopy event
   keyTest: undefined,
 });
 
 export const actionPaste = register({
   name: "paste",
+  label: "labels.paste",
   trackEvent: { category: "element" },
   perform: async (elements, appState, data, app) => {
     let types;
@@ -97,24 +100,26 @@ export const actionPaste = register({
       commitToHistory: false,
     };
   },
-  contextItemLabel: "labels.paste",
   // don't supply a shortcut since we handle this conditionally via onCopy event
   keyTest: undefined,
 });
 
 export const actionCut = register({
   name: "cut",
+  label: "labels.cut",
+  icon: cutIcon,
   trackEvent: { category: "element" },
   perform: (elements, appState, event: ClipboardEvent | null, app) => {
     actionCopy.perform(elements, appState, event, app);
     return actionDeleteSelected.perform(elements, appState, null, app);
   },
-  contextItemLabel: "labels.cut",
   keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.X,
 });
 
 export const actionCopyAsSvg = register({
   name: "copyAsSvg",
+  label: "labels.copyAsSvg",
+  icon: svgIcon,
   trackEvent: { category: "element" },
   perform: async (elements, appState, _data, app) => {
     if (!app.canvas) {
@@ -158,11 +163,13 @@ export const actionCopyAsSvg = register({
   predicate: (elements) => {
     return probablySupportsClipboardWriteText && elements.length > 0;
   },
-  contextItemLabel: "labels.copyAsSvg",
+  keywords: ["svg", "clipboard", "copy"],
 });
 
 export const actionCopyAsPng = register({
   name: "copyAsPng",
+  label: "labels.copyAsPng",
+  icon: pngIcon,
   trackEvent: { category: "element" },
   perform: async (elements, appState, _data, app) => {
     if (!app.canvas) {
@@ -217,12 +224,13 @@ export const actionCopyAsPng = register({
   predicate: (elements) => {
     return probablySupportsClipboardBlob && elements.length > 0;
   },
-  contextItemLabel: "labels.copyAsPng",
   keyTest: (event) => event.code === CODES.C && event.altKey && event.shiftKey,
+  keywords: ["png", "clipboard", "copy"],
 });
 
 export const copyText = register({
   name: "copyText",
+  label: "labels.copyText",
   trackEvent: { category: "element" },
   perform: (elements, appState, _, app) => {
     const selectedElements = app.scene.getSelectedElements({
@@ -258,5 +266,5 @@ export const copyText = register({
         .some(isTextElement)
     );
   },
-  contextItemLabel: "labels.copyText",
+  keywords: ["text", "clipboard", "copy"],
 });

packages/excalidraw/actions/actionDeleteSelected.tsx

@@ -72,6 +72,8 @@ const handleGroupEditingState = (
 
 export const actionDeleteSelected = register({
   name: "deleteSelectedElements",
+  label: "labels.delete",
+  icon: TrashIcon,
   trackEvent: { category: "element", action: "delete" },
   perform: (elements, appState, formData, app) => {
     if (appState.editingLinearElement) {
@@ -168,7 +170,6 @@ export const actionDeleteSelected = register({
       ),
     };
   },
-  contextItemLabel: "labels.delete",
   keyTest: (event, appState, elements) =>
     (event.key === KEYS.BACKSPACE || event.key === KEYS.DELETE) &&
     !event[KEYS.CTRL_OR_CMD],

packages/excalidraw/actions/actionDistribute.tsx

@@ -49,6 +49,7 @@ const distributeSelectedElements = (
 
 export const distributeHorizontally = register({
   name: "distributeHorizontally",
+  label: "labels.distributeHorizontally",
   trackEvent: { category: "element" },
   perform: (elements, appState, _, app) => {
     return {
@@ -79,6 +80,7 @@ export const distributeHorizontally = register({
 
 export const distributeVertically = register({
   name: "distributeVertically",
+  label: "labels.distributeVertically",
   trackEvent: { category: "element" },
   perform: (elements, appState, _, app) => {
     return {

packages/excalidraw/actions/actionDuplicateSelection.tsx

@@ -34,6 +34,8 @@ import {
 
 export const actionDuplicateSelection = register({
   name: "duplicateSelection",
+  label: "labels.duplicateSelection",
+  icon: DuplicateIcon,
   trackEvent: { category: "element" },
   perform: (elements, appState, formData, app) => {
     const elementsMap = app.scene.getNonDeletedElementsMap();
@@ -60,7 +62,6 @@ export const actionDuplicateSelection = register({
       commitToHistory: true,
     };
   },
-  contextItemLabel: "labels.duplicateSelection",
   keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.D,
   PanelComponent: ({ elements, appState, updateData }) => (
     <ToolButton

packages/excalidraw/actions/actionElementLock.ts

@@ -1,7 +1,9 @@
+import { LockedIcon, UnlockedIcon } from "../components/icons";
 import { newElementWith } from "../element/mutateElement";
 import { isFrameLikeElement } from "../element/typeChecks";
 import { ExcalidrawElement } from "../element/types";
 import { KEYS } from "../keys";
+import { getSelectedElements } from "../scene";
 import { arrayToMap } from "../utils";
 import { register } from "./register";
 
@@ -10,11 +12,31 @@ const shouldLock = (elements: readonly ExcalidrawElement[]) =>
 
 export const actionToggleElementLock = register({
   name: "toggleElementLock",
+  label: (elements, appState, app) => {
+    const selected = app.scene.getSelectedElements({
+      selectedElementIds: appState.selectedElementIds,
+      includeBoundTextElement: false,
+    });
+    if (selected.length === 1 && !isFrameLikeElement(selected[0])) {
+      return selected[0].locked
+        ? "labels.elementLock.unlock"
+        : "labels.elementLock.lock";
+    }
+
+    return shouldLock(selected)
+      ? "labels.elementLock.lockAll"
+      : "labels.elementLock.unlockAll";
+  },
+  icon: (appState, elements) => {
+    const selectedElements = getSelectedElements(elements, appState);
+    return shouldLock(selectedElements) ? LockedIcon : UnlockedIcon;
+  },
   trackEvent: { category: "element" },
   predicate: (elements, appState, _, app) => {
     const selectedElements = app.scene.getSelectedElements(appState);
-    return !selectedElements.some(
-      (element) => element.locked && element.frameId,
+    return (
+      selectedElements.length > 0 &&
+      !selectedElements.some((element) => element.locked && element.frameId)
     );
   },
   perform: (elements, appState, _, app) => {
@@ -47,21 +69,6 @@ export const actionToggleElementLock = register({
       commitToHistory: true,
     };
   },
-  contextItemLabel: (elements, appState, app) => {
-    const selected = app.scene.getSelectedElements({
-      selectedElementIds: appState.selectedElementIds,
-      includeBoundTextElement: false,
-    });
-    if (selected.length === 1 && !isFrameLikeElement(selected[0])) {
-      return selected[0].locked
-        ? "labels.elementLock.unlock"
-        : "labels.elementLock.lock";
-    }
-
-    return shouldLock(selected)
-      ? "labels.elementLock.lockAll"
-      : "labels.elementLock.unlockAll";
-  },
   keyTest: (event, appState, elements, app) => {
     return (
       event.key.toLocaleLowerCase() === KEYS.L &&
@@ -77,10 +84,16 @@ export const actionToggleElementLock = register({
 
 export const actionUnlockAllElements = register({
   name: "unlockAllElements",
+  paletteName: "Unlock all elements",
   trackEvent: { category: "canvas" },
   viewMode: false,
-  predicate: (elements) => {
-    return elements.some((element) => element.locked);
+  icon: UnlockedIcon,
+  predicate: (elements, appState) => {
+    const selectedElements = getSelectedElements(elements, appState);
+    return (
+      selectedElements.length === 0 &&
+      elements.some((element) => element.locked)
+    );
   },
   perform: (elements, appState) => {
     const lockedElements = elements.filter((el) => el.locked);
@@ -101,5 +114,5 @@ export const actionUnlockAllElements = register({
       commitToHistory: true,
     };
   },
-  contextItemLabel: "labels.elementLock.unlockAll",
+  label: "labels.elementLock.unlockAll",
 });

packages/excalidraw/actions/actionExport.tsx

@@ -1,4 +1,4 @@
-import { questionCircle, saveAs } from "../components/icons";
+import { ExportIcon, questionCircle, saveAs } from "../components/icons";
 import { ProjectName } from "../components/ProjectName";
 import { ToolButton } from "../components/ToolButton";
 import { Tooltip } from "../components/Tooltip";
@@ -22,6 +22,7 @@ import "../components/ToolIcon.scss";
 
 export const actionChangeProjectName = register({
   name: "changeProjectName",
+  label: "labels.fileTitle",
   trackEvent: false,
   perform: (_elements, appState, value) => {
     return { appState: { ...appState, name: value }, commitToHistory: false };
@@ -38,6 +39,7 @@ export const actionChangeProjectName = register({
 
 export const actionChangeExportScale = register({
   name: "changeExportScale",
+  label: "imageExportDialog.scale",
   trackEvent: { category: "export", action: "scale" },
   perform: (_elements, appState, value) => {
     return {
@@ -87,6 +89,7 @@ export const actionChangeExportScale = register({
 
 export const actionChangeExportBackground = register({
   name: "changeExportBackground",
+  label: "imageExportDialog.label.withBackground",
   trackEvent: { category: "export", action: "toggleBackground" },
   perform: (_elements, appState, value) => {
     return {
@@ -106,6 +109,7 @@ export const actionChangeExportBackground = register({
 
 export const actionChangeExportEmbedScene = register({
   name: "changeExportEmbedScene",
+  label: "imageExportDialog.tooltip.embedScene",
   trackEvent: { category: "export", action: "embedScene" },
   perform: (_elements, appState, value) => {
     return {
@@ -128,6 +132,8 @@ export const actionChangeExportEmbedScene = register({
 
 export const actionSaveToActiveFile = register({
   name: "saveToActiveFile",
+  label: "buttons.save",
+  icon: ExportIcon,
   trackEvent: { category: "export" },
   predicate: (elements, appState, props, app) => {
     return (
@@ -181,6 +187,8 @@ export const actionSaveToActiveFile = register({
 
 export const actionSaveFileToDisk = register({
   name: "saveFileToDisk",
+  label: "exportDialog.disk_title",
+  icon: ExportIcon,
   viewMode: true,
   trackEvent: { category: "export" },
   perform: async (elements, appState, value, app) => {
@@ -230,6 +238,7 @@ export const actionSaveFileToDisk = register({
 
 export const actionLoadScene = register({
   name: "loadScene",
+  label: "buttons.load",
   trackEvent: { category: "export" },
   predicate: (elements, appState, props, app) => {
     return (
@@ -267,6 +276,7 @@ export const actionLoadScene = register({
 
 export const actionExportWithDarkMode = register({
   name: "exportWithDarkMode",
+  label: "imageExportDialog.label.darkMode",
   trackEvent: { category: "export", action: "toggleTheme" },
   perform: (_elements, appState, value) => {
     return {

packages/excalidraw/actions/actionFinalize.tsx

@@ -19,6 +19,7 @@ import { resetCursor } from "../cursor";
 
 export const actionFinalize = register({
   name: "finalize",
+  label: "",
   trackEvent: false,
   perform: (
     elements,

packages/excalidraw/actions/actionFlip.ts

@@ -17,9 +17,12 @@ import {
   unbindLinearElements,
 } from "../element/binding";
 import { updateFrameMembershipOfSelectedElements } from "../frame";
+import { flipHorizontal, flipVertical } from "../components/icons";
 
 export const actionFlipHorizontal = register({
   name: "flipHorizontal",
+  label: "labels.flipHorizontal",
+  icon: flipHorizontal,
   trackEvent: { category: "element" },
   perform: (elements, appState, _, app) => {
     return {
@@ -38,11 +41,12 @@ export const actionFlipHorizontal = register({
     };
   },
   keyTest: (event) => event.shiftKey && event.code === CODES.H,
-  contextItemLabel: "labels.flipHorizontal",
 });
 
 export const actionFlipVertical = register({
   name: "flipVertical",
+  label: "labels.flipVertical",
+  icon: flipVertical,
   trackEvent: { category: "element" },
   perform: (elements, appState, _, app) => {
     return {
@@ -62,7 +66,6 @@ export const actionFlipVertical = register({
   },
   keyTest: (event) =>
     event.shiftKey && event.code === CODES.V && !event[KEYS.CTRL_OR_CMD],
-  contextItemLabel: "labels.flipVertical",
 });
 
 const flipSelectedElements = (

packages/excalidraw/actions/actionFrame.ts

@@ -3,13 +3,17 @@ import { ExcalidrawElement } from "../element/types";
 import { removeAllElementsFromFrame } from "../frame";
 import { getFrameChildren } from "../frame";
 import { KEYS } from "../keys";
-import { AppClassProperties, AppState } from "../types";
+import { AppClassProperties, AppState, UIAppState } from "../types";
 import { updateActiveTool } from "../utils";
 import { setCursorForShape } from "../cursor";
 import { register } from "./register";
 import { isFrameLikeElement } from "../element/typeChecks";
+import { frameToolIcon } from "../components/icons";
 
-const isSingleFrameSelected = (appState: AppState, app: AppClassProperties) => {
+const isSingleFrameSelected = (
+  appState: UIAppState,
+  app: AppClassProperties,
+) => {
   const selectedElements = app.scene.getSelectedElements(appState);
 
   return (
@@ -19,6 +23,7 @@ const isSingleFrameSelected = (appState: AppState, app: AppClassProperties) => {
 
 export const actionSelectAllElementsInFrame = register({
   name: "selectAllElementsInFrame",
+  label: "labels.selectAllElementsInFrame",
   trackEvent: { category: "canvas" },
   perform: (elements, appState, _, app) => {
     const selectedElement =
@@ -49,13 +54,13 @@ export const actionSelectAllElementsInFrame = register({
       commitToHistory: false,
     };
   },
-  contextItemLabel: "labels.selectAllElementsInFrame",
   predicate: (elements, appState, _, app) =>
     isSingleFrameSelected(appState, app),
 });
 
 export const actionRemoveAllElementsFromFrame = register({
   name: "removeAllElementsFromFrame",
+  label: "labels.removeAllElementsFromFrame",
   trackEvent: { category: "history" },
   perform: (elements, appState, _, app) => {
     const selectedElement =
@@ -80,13 +85,13 @@ export const actionRemoveAllElementsFromFrame = register({
       commitToHistory: false,
     };
   },
-  contextItemLabel: "labels.removeAllElementsFromFrame",
   predicate: (elements, appState, _, app) =>
     isSingleFrameSelected(appState, app),
 });
 
 export const actionupdateFrameRendering = register({
   name: "updateFrameRendering",
+  label: "labels.updateFrameRendering",
   viewMode: true,
   trackEvent: { category: "canvas" },
   perform: (elements, appState) => {
@@ -102,13 +107,15 @@ export const actionupdateFrameRendering = register({
       commitToHistory: false,
     };
   },
-  contextItemLabel: "labels.updateFrameRendering",
   checked: (appState: AppState) => appState.frameRendering.enabled,
 });
 
 export const actionSetFrameAsActiveTool = register({
   name: "setFrameAsActiveTool",
+  label: "toolBar.frame",
   trackEvent: { category: "toolbar" },
+  icon: frameToolIcon,
+  viewMode: false,
   perform: (elements, appState, _, app) => {
     const nextActiveTool = updateActiveTool(appState, {
       type: "frame",

packages/excalidraw/actions/actionGroup.tsx

@@ -61,6 +61,8 @@ const enableActionGroup = (
 
 export const actionGroup = register({
   name: "group",
+  label: "labels.group",
+  icon: (appState) => <GroupIcon theme={appState.theme} />,
   trackEvent: { category: "element" },
   perform: (elements, appState, _, app) => {
     const selectedElements = app.scene.getSelectedElements({
@@ -157,7 +159,6 @@ export const actionGroup = register({
       commitToHistory: true,
     };
   },
-  contextItemLabel: "labels.group",
   predicate: (elements, appState, _, app) =>
     enableActionGroup(elements, appState, app),
   keyTest: (event) =>
@@ -177,6 +178,8 @@ export const actionGroup = register({
 
 export const actionUngroup = register({
   name: "ungroup",
+  label: "labels.ungroup",
+  icon: (appState) => <UngroupIcon theme={appState.theme} />,
   trackEvent: { category: "element" },
   perform: (elements, appState, _, app) => {
     const groupIds = getSelectedGroupIds(appState);
@@ -263,7 +266,6 @@ export const actionUngroup = register({
     event.shiftKey &&
     event[KEYS.CTRL_OR_CMD] &&
     event.key === KEYS.G.toUpperCase(),
-  contextItemLabel: "labels.ungroup",
   predicate: (elements, appState) => getSelectedGroupIds(appState).length > 0,
 
   PanelComponent: ({ elements, appState, updateData }) => (

packages/excalidraw/actions/actionHistory.tsx

@@ -63,7 +63,10 @@ type ActionCreator = (history: History) => Action;
 
 export const createUndoAction: ActionCreator = (history) => ({
   name: "undo",
+  label: "buttons.undo",
+  icon: UndoIcon,
   trackEvent: { category: "history" },
+  viewMode: false,
   perform: (elements, appState) =>
     writeData(elements, appState, () => history.undoOnce()),
   keyTest: (event) =>
@@ -84,7 +87,10 @@ export const createUndoAction: ActionCreator = (history) => ({
 
 export const createRedoAction: ActionCreator = (history) => ({
   name: "redo",
+  label: "buttons.redo",
+  icon: RedoIcon,
   trackEvent: { category: "history" },
+  viewMode: false,
   perform: (elements, appState) =>
     writeData(elements, appState, () => history.redoOnce()),
   keyTest: (event) =>

packages/excalidraw/actions/actionLinearEditor.ts

@@ -1,3 +1,4 @@
+import { DEFAULT_CATEGORIES } from "../components/CommandPalette/CommandPalette";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { isLinearElement } from "../element/typeChecks";
 import { ExcalidrawLinearElement } from "../element/types";
@@ -5,6 +6,16 @@ import { register } from "./register";
 
 export const actionToggleLinearEditor = register({
   name: "toggleLinearEditor",
+  category: DEFAULT_CATEGORIES.elements,
+  label: (elements, appState, app) => {
+    const selectedElement = app.scene.getSelectedElements({
+      selectedElementIds: appState.selectedElementIds,
+      includeBoundTextElement: true,
+    })[0] as ExcalidrawLinearElement;
+    return appState.editingLinearElement?.elementId === selectedElement?.id
+      ? "labels.lineEditor.exit"
+      : "labels.lineEditor.edit";
+  },
   trackEvent: {
     category: "element",
   },
@@ -33,13 +44,4 @@ export const actionToggleLinearEditor = register({
       commitToHistory: false,
     };
   },
-  contextItemLabel: (elements, appState, app) => {
-    const selectedElement = app.scene.getSelectedElements({
-      selectedElementIds: appState.selectedElementIds,
-      includeBoundTextElement: true,
-    })[0] as ExcalidrawLinearElement;
-    return appState.editingLinearElement?.elementId === selectedElement.id
-      ? "labels.lineEditor.exit"
-      : "labels.lineEditor.edit";
-  },
 });

packages/excalidraw/actions/actionLink.tsx

@@ -10,6 +10,8 @@ import { register } from "./register";
 
 export const actionLink = register({
   name: "hyperlink",
+  label: (elements, appState) => getContextMenuLabel(elements, appState),
+  icon: LinkIcon,
   perform: (elements, appState) => {
     if (appState.showHyperlinkPopup === "editor") {
       return false;
@@ -27,8 +29,6 @@ export const actionLink = register({
   },
   trackEvent: { category: "hyperlink", action: "click" },
   keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.K,
-  contextItemLabel: (elements, appState) =>
-    getContextMenuLabel(elements, appState),
   predicate: (elements, appState) => {
     const selectedElements = getSelectedElements(elements, appState);
     return selectedElements.length === 1;

packages/excalidraw/actions/actionMenu.tsx

@@ -1,4 +1,4 @@
-import { HamburgerMenuIcon, palette } from "../components/icons";
+import { HamburgerMenuIcon, HelpIconThin, palette } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
 import { t } from "../i18n";
 import { showSelectedShapeActions, getNonDeletedElements } from "../element";
@@ -7,6 +7,7 @@ import { KEYS } from "../keys";
 
 export const actionToggleCanvasMenu = register({
   name: "toggleCanvasMenu",
+  label: "buttons.menu",
   trackEvent: { category: "menu" },
   perform: (_, appState) => ({
     appState: {
@@ -28,6 +29,7 @@ export const actionToggleCanvasMenu = register({
 
 export const actionToggleEditMenu = register({
   name: "toggleEditMenu",
+  label: "buttons.edit",
   trackEvent: { category: "menu" },
   perform: (_elements, appState) => ({
     appState: {
@@ -53,6 +55,8 @@ export const actionToggleEditMenu = register({
 
 export const actionShortcuts = register({
   name: "toggleShortcuts",
+  label: "welcomeScreen.defaults.helpHint",
+  icon: HelpIconThin,
   viewMode: true,
   trackEvent: { category: "menu", action: "toggleHelpDialog" },
   perform: (_elements, appState, _, { focusContainer }) => {

packages/excalidraw/actions/actionNavigate.tsx

@@ -13,6 +13,7 @@ import clsx from "clsx";
 
 export const actionGoToCollaborator = register({
   name: "goToCollaborator",
+  label: "Go to a collaborator",
   viewMode: true,
   trackEvent: { category: "collab" },
   perform: (_elements, appState, collaborator: Collaborator) => {

packages/excalidraw/actions/actionProperties.tsx

@@ -49,6 +49,7 @@ import {
   ArrowheadCircleOutlineIcon,
   ArrowheadDiamondIcon,
   ArrowheadDiamondOutlineIcon,
+  fontSizeIcon,
 } from "../components/icons";
 import {
   DEFAULT_FONT_FAMILY,
@@ -238,6 +239,7 @@ const changeFontSize = (
 
 export const actionChangeStrokeColor = register({
   name: "changeStrokeColor",
+  label: "labels.stroke",
   trackEvent: false,
   perform: (elements, appState, value) => {
     return {
@@ -288,6 +290,7 @@ export const actionChangeStrokeColor = register({
 
 export const actionChangeBackgroundColor = register({
   name: "changeBackgroundColor",
+  label: "labels.changeBackground",
   trackEvent: false,
   perform: (elements, appState, value) => {
     return {
@@ -331,6 +334,7 @@ export const actionChangeBackgroundColor = register({
 
 export const actionChangeFillStyle = register({
   name: "changeFillStyle",
+  label: "labels.fill",
   trackEvent: false,
   perform: (elements, appState, value, app) => {
     trackEvent(
@@ -408,6 +412,7 @@ export const actionChangeFillStyle = register({
 
 export const actionChangeStrokeWidth = register({
   name: "changeStrokeWidth",
+  label: "labels.strokeWidth",
   trackEvent: false,
   perform: (elements, appState, value) => {
     return {
@@ -461,6 +466,7 @@ export const actionChangeStrokeWidth = register({
 
 export const actionChangeSloppiness = register({
   name: "changeSloppiness",
+  label: "labels.sloppiness",
   trackEvent: false,
   perform: (elements, appState, value) => {
     return {
@@ -512,6 +518,7 @@ export const actionChangeSloppiness = register({
 
 export const actionChangeStrokeStyle = register({
   name: "changeStrokeStyle",
+  label: "labels.strokeStyle",
   trackEvent: false,
   perform: (elements, appState, value) => {
     return {
@@ -562,6 +569,7 @@ export const actionChangeStrokeStyle = register({
 
 export const actionChangeOpacity = register({
   name: "changeOpacity",
+  label: "labels.opacity",
   trackEvent: false,
   perform: (elements, appState, value) => {
     return {
@@ -603,6 +611,7 @@ export const actionChangeOpacity = register({
 
 export const actionChangeFontSize = register({
   name: "changeFontSize",
+  label: "labels.fontSize",
   trackEvent: false,
   perform: (elements, appState, value, app) => {
     return changeFontSize(elements, appState, app, () => value, value);
@@ -673,6 +682,8 @@ export const actionChangeFontSize = register({
 
 export const actionDecreaseFontSize = register({
   name: "decreaseFontSize",
+  label: "labels.decreaseFontSize",
+  icon: fontSizeIcon,
   trackEvent: false,
   perform: (elements, appState, value, app) => {
     return changeFontSize(elements, appState, app, (element) =>
@@ -695,6 +706,8 @@ export const actionDecreaseFontSize = register({
 
 export const actionIncreaseFontSize = register({
   name: "increaseFontSize",
+  label: "labels.increaseFontSize",
+  icon: fontSizeIcon,
   trackEvent: false,
   perform: (elements, appState, value, app) => {
     return changeFontSize(elements, appState, app, (element) =>
@@ -713,6 +726,7 @@ export const actionIncreaseFontSize = register({
 
 export const actionChangeFontFamily = register({
   name: "changeFontFamily",
+  label: "labels.fontFamily",
   trackEvent: false,
   perform: (elements, appState, value, app) => {
     return {
@@ -816,6 +830,7 @@ export const actionChangeFontFamily = register({
 
 export const actionChangeTextAlign = register({
   name: "changeTextAlign",
+  label: "Change text alignment",
   trackEvent: false,
   perform: (elements, appState, value, app) => {
     return {
@@ -905,6 +920,7 @@ export const actionChangeTextAlign = register({
 
 export const actionChangeVerticalAlign = register({
   name: "changeVerticalAlign",
+  label: "Change vertical alignment",
   trackEvent: { category: "element" },
   perform: (elements, appState, value, app) => {
     return {
@@ -994,6 +1010,7 @@ export const actionChangeVerticalAlign = register({
 
 export const actionChangeRoundness = register({
   name: "changeRoundness",
+  label: "Change edge roundness",
   trackEvent: false,
   perform: (elements, appState, value) => {
     return {
@@ -1132,6 +1149,7 @@ const getArrowheadOptions = (flip: boolean) => {
 
 export const actionChangeArrowhead = register({
   name: "changeArrowhead",
+  label: "Change arrowheads",
   trackEvent: false,
   perform: (
     elements,

packages/excalidraw/actions/actionSelectAll.ts

@@ -6,10 +6,14 @@ import { ExcalidrawElement } from "../element/types";
 import { isLinearElement } from "../element/typeChecks";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { excludeElementsInFramesFromSelection } from "../scene/selection";
+import { selectAllIcon } from "../components/icons";
 
 export const actionSelectAll = register({
   name: "selectAll",
+  label: "labels.selectAll",
+  icon: selectAllIcon,
   trackEvent: { category: "canvas" },
+  viewMode: false,
   perform: (elements, appState, value, app) => {
     if (appState.editingLinearElement) {
       return false;
@@ -49,6 +53,5 @@ export const actionSelectAll = register({
       commitToHistory: true,
     };
   },
-  contextItemLabel: "labels.selectAll",
   keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.A,
 });

packages/excalidraw/actions/actionStyles.ts

@@ -25,12 +25,15 @@ import {
 } from "../element/typeChecks";
 import { getSelectedElements } from "../scene";
 import { ExcalidrawTextElement } from "../element/types";
+import { paintIcon } from "../components/icons";
 
 // `copiedStyles` is exported only for tests.
 export let copiedStyles: string = "{}";
 
 export const actionCopyStyles = register({
   name: "copyStyles",
+  label: "labels.copyStyles",
+  icon: paintIcon,
   trackEvent: { category: "element" },
   perform: (elements, appState, formData, app) => {
     const elementsCopied = [];
@@ -54,13 +57,14 @@ export const actionCopyStyles = register({
       commitToHistory: false,
     };
   },
-  contextItemLabel: "labels.copyStyles",
   keyTest: (event) =>
     event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.C,
 });
 
 export const actionPasteStyles = register({
   name: "pasteStyles",
+  label: "labels.pasteStyles",
+  icon: paintIcon,
   trackEvent: { category: "element" },
   perform: (elements, appState, formData, app) => {
     const elementsCopied = JSON.parse(copiedStyles);
@@ -159,7 +163,6 @@ export const actionPasteStyles = register({
       commitToHistory: true,
     };
   },
-  contextItemLabel: "labels.pasteStyles",
   keyTest: (event) =>
     event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.V,
 });

packages/excalidraw/actions/actionToggleGridMode.tsx

@@ -5,6 +5,7 @@ import { AppState } from "../types";
 
 export const actionToggleGridMode = register({
   name: "gridMode",
+  label: "labels.showGrid",
   viewMode: true,
   trackEvent: {
     category: "canvas",
@@ -24,6 +25,5 @@ export const actionToggleGridMode = register({
   predicate: (element, appState, props) => {
     return typeof props.gridModeEnabled === "undefined";
   },
-  contextItemLabel: "labels.showGrid",
   keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.code === CODES.QUOTE,
 });

packages/excalidraw/actions/actionToggleObjectsSnapMode.tsx

@@ -1,9 +1,12 @@
+import { magnetIcon } from "../components/icons";
 import { CODES, KEYS } from "../keys";
 import { register } from "./register";
 
 export const actionToggleObjectsSnapMode = register({
   name: "objectsSnapMode",
-  viewMode: true,
+  label: "buttons.objectsSnapMode",
+  icon: magnetIcon,
+  viewMode: false,
   trackEvent: {
     category: "canvas",
     predicate: (appState) => !appState.objectsSnapModeEnabled,
@@ -22,7 +25,6 @@ export const actionToggleObjectsSnapMode = register({
   predicate: (elements, appState, appProps) => {
     return typeof appProps.objectsSnapModeEnabled === "undefined";
   },
-  contextItemLabel: "buttons.objectsSnapMode",
   keyTest: (event) =>
     !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.S,
 });

packages/excalidraw/actions/actionToggleStats.tsx

@@ -1,8 +1,12 @@
 import { register } from "./register";
 import { CODES, KEYS } from "../keys";
+import { abacusIcon } from "../components/icons";
 
 export const actionToggleStats = register({
   name: "stats",
+  label: "stats.title",
+  icon: abacusIcon,
+  paletteName: "Toggle stats",
   viewMode: true,
   trackEvent: { category: "menu" },
   perform(elements, appState) {
@@ -15,7 +19,6 @@ export const actionToggleStats = register({
     };
   },
   checked: (appState) => appState.showStats,
-  contextItemLabel: "stats.title",
   keyTest: (event) =>
     !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.SLASH,
 });

packages/excalidraw/actions/actionToggleViewMode.tsx

@@ -1,8 +1,12 @@
+import { eyeIcon } from "../components/icons";
 import { CODES, KEYS } from "../keys";
 import { register } from "./register";
 
 export const actionToggleViewMode = register({
   name: "viewMode",
+  label: "labels.viewMode",
+  paletteName: "Toggle view mode",
+  icon: eyeIcon,
   viewMode: true,
   trackEvent: {
     category: "canvas",
@@ -21,7 +25,6 @@ export const actionToggleViewMode = register({
   predicate: (elements, appState, appProps) => {
     return typeof appProps.viewModeEnabled === "undefined";
   },
-  contextItemLabel: "labels.viewMode",
   keyTest: (event) =>
     !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.R,
 });

packages/excalidraw/actions/actionToggleZenMode.tsx

@@ -1,8 +1,12 @@
+import { coffeeIcon } from "../components/icons";
 import { CODES, KEYS } from "../keys";
 import { register } from "./register";
 
 export const actionToggleZenMode = register({
   name: "zenMode",
+  label: "buttons.zenMode",
+  icon: coffeeIcon,
+  paletteName: "Toggle zen mode",
   viewMode: true,
   trackEvent: {
     category: "canvas",
@@ -21,7 +25,6 @@ export const actionToggleZenMode = register({
   predicate: (elements, appState, appProps) => {
     return typeof appProps.zenModeEnabled === "undefined";
   },
-  contextItemLabel: "buttons.zenMode",
   keyTest: (event) =>
     !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.Z,
 });

packages/excalidraw/actions/actionZindex.tsx

@@ -19,6 +19,8 @@ import { isDarwin } from "../constants";
 
 export const actionSendBackward = register({
   name: "sendBackward",
+  label: "labels.sendBackward",
+  icon: SendBackwardIcon,
   trackEvent: { category: "element" },
   perform: (elements, appState) => {
     return {
@@ -27,7 +29,6 @@ export const actionSendBackward = register({
       commitToHistory: true,
     };
   },
-  contextItemLabel: "labels.sendBackward",
   keyPriority: 40,
   keyTest: (event) =>
     event[KEYS.CTRL_OR_CMD] &&
@@ -47,6 +48,8 @@ export const actionSendBackward = register({
 
 export const actionBringForward = register({
   name: "bringForward",
+  label: "labels.bringForward",
+  icon: BringForwardIcon,
   trackEvent: { category: "element" },
   perform: (elements, appState) => {
     return {
@@ -55,7 +58,6 @@ export const actionBringForward = register({
       commitToHistory: true,
     };
   },
-  contextItemLabel: "labels.bringForward",
   keyPriority: 40,
   keyTest: (event) =>
     event[KEYS.CTRL_OR_CMD] &&
@@ -75,6 +77,8 @@ export const actionBringForward = register({
 
 export const actionSendToBack = register({
   name: "sendToBack",
+  label: "labels.sendToBack",
+  icon: SendToBackIcon,
   trackEvent: { category: "element" },
   perform: (elements, appState) => {
     return {
@@ -83,7 +87,6 @@ export const actionSendToBack = register({
       commitToHistory: true,
     };
   },
-  contextItemLabel: "labels.sendToBack",
   keyTest: (event) =>
     isDarwin
       ? event[KEYS.CTRL_OR_CMD] &&
@@ -110,6 +113,8 @@ export const actionSendToBack = register({
 
 export const actionBringToFront = register({
   name: "bringToFront",
+  label: "labels.bringToFront",
+  icon: BringToFrontIcon,
   trackEvent: { category: "element" },
 
   perform: (elements, appState) => {
@@ -119,7 +124,6 @@ export const actionBringToFront = register({
       commitToHistory: true,
     };
   },
-  contextItemLabel: "labels.bringToFront",
   keyTest: (event) =>
     isDarwin
       ? event[KEYS.CTRL_OR_CMD] &&

packages/excalidraw/actions/shortcuts.ts

@@ -36,9 +36,22 @@ export type ShortcutName =
       | "flipVertical"
       | "hyperlink"
       | "toggleElementLock"
+      | "resetZoom"
+      | "zoomOut"
+      | "zoomIn"
+      | "zoomToFit"
+      | "zoomToFitSelectionInViewport"
+      | "zoomToFitSelection"
+      | "toggleEraserTool"
+      | "toggleHandTool"
+      | "setFrameAsActiveTool"
+      | "saveFileToDisk"
+      | "saveToActiveFile"
+      | "toggleShortcuts"
     >
   | "saveScene"
-  | "imageExport";
+  | "imageExport"
+  | "commandPalette";
 
 const shortcutMap: Record<ShortcutName, string[]> = {
   toggleTheme: [getShortcutKey("Shift+Alt+D")],
@@ -46,6 +59,10 @@ const shortcutMap: Record<ShortcutName, string[]> = {
   loadScene: [getShortcutKey("CtrlOrCmd+O")],
   clearCanvas: [getShortcutKey("CtrlOrCmd+Delete")],
   imageExport: [getShortcutKey("CtrlOrCmd+Shift+E")],
+  commandPalette: [
+    getShortcutKey("CtrlOrCmd+/"),
+    getShortcutKey("CtrlOrCmd+Shift+P"),
+  ],
   cut: [getShortcutKey("CtrlOrCmd+X")],
   copy: [getShortcutKey("CtrlOrCmd+C")],
   paste: [getShortcutKey("CtrlOrCmd+V")],
@@ -83,10 +100,24 @@ const shortcutMap: Record<ShortcutName, string[]> = {
   viewMode: [getShortcutKey("Alt+R")],
   hyperlink: [getShortcutKey("CtrlOrCmd+K")],
   toggleElementLock: [getShortcutKey("CtrlOrCmd+Shift+L")],
+  resetZoom: [getShortcutKey("CtrlOrCmd+0")],
+  zoomOut: [getShortcutKey("CtrlOrCmd+-")],
+  zoomIn: [getShortcutKey("CtrlOrCmd++")],
+  zoomToFitSelection: [getShortcutKey("Shift+3")],
+  zoomToFit: [getShortcutKey("Shift+1")],
+  zoomToFitSelectionInViewport: [getShortcutKey("Shift+2")],
+  toggleEraserTool: [getShortcutKey("E")],
+  toggleHandTool: [getShortcutKey("H")],
+  setFrameAsActiveTool: [getShortcutKey("F")],
+  saveFileToDisk: [getShortcutKey("CtrlOrCmd+S")],
+  saveToActiveFile: [getShortcutKey("CtrlOrCmd+S")],
+  toggleShortcuts: [getShortcutKey("?")],
 };
 
-export const getShortcutFromShortcutName = (name: ShortcutName) => {
+export const getShortcutFromShortcutName = (name: ShortcutName, idx = 0) => {
   const shortcuts = shortcutMap[name];
   // if multiple shortcuts available, take the first one
-  return shortcuts && shortcuts.length > 0 ? shortcuts[0] : "";
+  return shortcuts && shortcuts.length > 0
+    ? shortcuts[idx] || shortcuts[0]
+    : "";
 };

packages/excalidraw/actions/types.ts

@@ -5,10 +5,16 @@ import {
   AppState,
   ExcalidrawProps,
   BinaryFiles,
+  UIAppState,
 } from "../types";
 import { MarkOptional } from "../utility-types";
 
-export type ActionSource = "ui" | "keyboard" | "contextMenu" | "api";
+export type ActionSource =
+  | "ui"
+  | "keyboard"
+  | "contextMenu"
+  | "api"
+  | "commandPalette";
 
 /** if false, the action should be prevented */
 export type ActionResult =
@@ -124,7 +130,8 @@ export type ActionName =
   | "setFrameAsActiveTool"
   | "setEmbeddableAsActiveTool"
   | "createContainerFromText"
-  | "wrapTextInContainer";
+  | "wrapTextInContainer"
+  | "commandPalette";
 
 export type PanelComponentProps = {
   elements: readonly ExcalidrawElement[];
@@ -137,6 +144,20 @@ export type PanelComponentProps = {
 
 export interface Action {
   name: ActionName;
+  label:
+    | string
+    | ((
+        elements: readonly ExcalidrawElement[],
+        appState: Readonly<AppState>,
+        app: AppClassProperties,
+      ) => string);
+  keywords?: string[];
+  icon?:
+    | React.ReactNode
+    | ((
+        appState: UIAppState,
+        elements: readonly ExcalidrawElement[],
+      ) => React.ReactNode);
   PanelComponent?: React.FC<PanelComponentProps>;
   perform: ActionFn;
   keyPriority?: number;
@@ -146,13 +167,6 @@ export interface Action {
     elements: readonly ExcalidrawElement[],
     app: AppClassProperties,
   ) => boolean;
-  contextItemLabel?:
-    | string
-    | ((
-        elements: readonly ExcalidrawElement[],
-        appState: Readonly<AppState>,
-        app: AppClassProperties,
-      ) => string);
   predicate?: (
     elements: readonly ExcalidrawElement[],
     appState: AppState,

packages/excalidraw/components/Actions.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { ActionManager } from "../actions/manager";
 import {
+  ExcalidrawElement,
   ExcalidrawElementType,
   NonDeletedElementsMap,
   NonDeletedSceneElementsMap,
@@ -45,6 +46,40 @@ import {
 import { KEYS } from "../keys";
 import { useTunnels } from "../context/tunnels";
 
+export const canChangeStrokeColor = (
+  appState: UIAppState,
+  targetElements: ExcalidrawElement[],
+) => {
+  let commonSelectedType: ExcalidrawElementType | null =
+    targetElements[0]?.type || null;
+
+  for (const element of targetElements) {
+    if (element.type !== commonSelectedType) {
+      commonSelectedType = null;
+      break;
+    }
+  }
+
+  return (
+    (hasStrokeColor(appState.activeTool.type) &&
+      appState.activeTool.type !== "image" &&
+      commonSelectedType !== "image" &&
+      commonSelectedType !== "frame" &&
+      commonSelectedType !== "magicframe") ||
+    targetElements.some((element) => hasStrokeColor(element.type))
+  );
+};
+
+export const canChangeBackgroundColor = (
+  appState: UIAppState,
+  targetElements: ExcalidrawElement[],
+) => {
+  return (
+    hasBackground(appState.activeTool.type) ||
+    targetElements.some((element) => hasBackground(element.type))
+  );
+};
+
 export const SelectedShapeActions = ({
   appState,
   elementsMap,
@@ -75,35 +110,17 @@ export const SelectedShapeActions = ({
       (element) =>
         hasBackground(element.type) && !isTransparent(element.backgroundColor),
     );
-  const showChangeBackgroundIcons =
-    hasBackground(appState.activeTool.type) ||
-    targetElements.some((element) => hasBackground(element.type));
 
   const showLinkIcon =
     targetElements.length === 1 || isSingleElementBoundContainer;
 
-  let commonSelectedType: ExcalidrawElementType | null =
-    targetElements[0]?.type || null;
-
-  for (const element of targetElements) {
-    if (element.type !== commonSelectedType) {
-      commonSelectedType = null;
-      break;
-    }
-  }
-
   return (
     <div className="panelColumn">
       <div>
-        {((hasStrokeColor(appState.activeTool.type) &&
-          appState.activeTool.type !== "image" &&
-          commonSelectedType !== "image" &&
-          commonSelectedType !== "frame" &&
-          commonSelectedType !== "magicframe") ||
-          targetElements.some((element) => hasStrokeColor(element.type))) &&
+        {canChangeStrokeColor(appState, targetElements) &&
           renderAction("changeStrokeColor")}
       </div>
-      {showChangeBackgroundIcons && (
+      {canChangeBackgroundColor(appState, targetElements) && (
         <div>{renderAction("changeBackgroundColor")}</div>
       )}
       {showFillIcons && renderAction("changeFillStyle")}

packages/excalidraw/components/App.tsx

@@ -413,6 +413,7 @@ import {
   isPointHittingLink,
   isPointHittingLinkIcon,
 } from "./hyperlink/helpers";
+import { getShortcutFromShortcutName } from "../actions/shortcuts";
 
 const AppContext = React.createContext<AppClassProperties>(null!);
 const AppPropsContext = React.createContext<AppProps>(null!);
@@ -3684,17 +3685,29 @@ class App extends React.Component<AppProps, AppState> {
     tab,
     force,
   }: {
-    name: SidebarName;
+    name: SidebarName | null;
     tab?: SidebarTabName;
     force?: boolean;
   }): boolean => {
     let nextName;
     if (force === undefined) {
-      nextName = this.state.openSidebar?.name === name ? null : name;
+      nextName =
+        this.state.openSidebar?.name === name &&
+        this.state.openSidebar?.tab === tab
+          ? null
+          : name;
     } else {
       nextName = force ? name : null;
     }
-    this.setState({ openSidebar: nextName ? { name: nextName, tab } : null });
+
+    const nextState: AppState["openSidebar"] = nextName
+      ? { name: nextName }
+      : null;
+    if (nextState && tab) {
+      nextState.tab = tab;
+    }
+
+    this.setState({ openSidebar: nextState });
 
     return !!nextName;
   };
@@ -3734,6 +3747,21 @@ class App extends React.Component<AppProps, AppState> {
         });
       }
 
+      if (
+        event[KEYS.CTRL_OR_CMD] &&
+        event.key === KEYS.P &&
+        !event.shiftKey &&
+        !event.altKey
+      ) {
+        this.setToast({
+          message: t("commandPalette.shortcutHint", {
+            shortcut: getShortcutFromShortcutName("commandPalette"),
+          }),
+        });
+        event.preventDefault();
+        return;
+      }
+
       if (event[KEYS.CTRL_OR_CMD] && event.key.toLowerCase() === KEYS.V) {
         IS_PLAIN_PASTE = event.shiftKey;
         clearTimeout(IS_PLAIN_PASTE_TIMER);
@@ -4592,11 +4620,6 @@ class App extends React.Component<AppProps, AppState> {
           editingLinearElement: new LinearElementEditor(selectedElements[0]),
         });
         return;
-      } else if (
-        this.state.editingLinearElement &&
-        this.state.editingLinearElement.elementId === selectedElements[0].id
-      ) {
-        return;
       }
     }
 
@@ -4769,7 +4792,11 @@ class App extends React.Component<AppProps, AppState> {
         }
         if (!customEvent?.defaultPrevented) {
           const target = isLocalLink(url) ? "_self" : "_blank";
-          const newWindow = window.open(undefined, target);
+          const newWindow = window.open(
+            undefined,
+            target,
+            "noopener noreferrer",
+          );
           // https://mathiasbynens.github.io/rel-noopener/
           if (newWindow) {
             newWindow.opener = null;

packages/excalidraw/components/CommandPalette/CommandPalette.scss

@@ -0,0 +1,137 @@
+@import "../../css/variables.module.scss";
+
+$verticalBreakpoint: 861px;
+
+.excalidraw {
+  .command-palette-dialog {
+    user-select: none;
+
+    .Modal__content {
+      height: auto;
+      max-height: 100%;
+
+      @media screen and (min-width: $verticalBreakpoint) {
+        max-height: 750px;
+        height: 100%;
+      }
+
+      .Island {
+        height: 100%;
+        padding: 1.5rem;
+      }
+
+      .Dialog__content {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+
+    .shortcuts-wrapper {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-top: 12px;
+      gap: 1.5rem;
+    }
+
+    .shortcut {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 16px;
+      font-size: 10px;
+      gap: 0.25rem;
+
+      .shortcut-wrapper {
+        display: flex;
+      }
+
+      .shortcut-plus {
+        margin: 0px 4px;
+      }
+
+      .shortcut-key {
+        padding: 0px 4px;
+        height: 16px;
+        border-radius: 4px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: var(--color-primary-light);
+      }
+
+      .shortcut-desc {
+        margin-left: 4px;
+        color: var(--color-gray-50);
+      }
+    }
+
+    .commands {
+      overflow-y: auto;
+      box-sizing: border-box;
+      margin-top: 12px;
+      color: var(--popup-text-color);
+      user-select: none;
+
+      .command-category {
+        display: flex;
+        flex-direction: column;
+        padding: 12px 0px;
+        margin-right: 0.25rem;
+      }
+
+      .command-category-title {
+        font-size: 1rem;
+        font-weight: 600;
+        margin-bottom: 6px;
+        display: flex;
+        align-items: center;
+      }
+
+      .command-item {
+        color: var(--popup-text-color);
+        height: 2.5rem;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        box-sizing: border-box;
+        padding: 0 0.5rem;
+        border-radius: var(--border-radius-lg);
+        cursor: pointer;
+
+        &:active {
+          background-color: var(--color-surface-low);
+        }
+
+        .name {
+          display: flex;
+          align-items: center;
+          gap: 0.25rem;
+        }
+      }
+
+      .item-selected {
+        background-color: var(--color-surface-mid);
+      }
+
+      .item-disabled {
+        opacity: 0.3;
+        cursor: not-allowed;
+      }
+
+      .no-match {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-top: 36px;
+      }
+    }
+
+    .icon {
+      width: 16px;
+      height: 16px;
+      margin-right: 6px;
+    }
+  }
+}

packages/excalidraw/components/CommandPalette/CommandPalette.tsx

@@ -0,0 +1,916 @@
+import { useEffect, useRef, useState } from "react";
+import {
+  useApp,
+  useAppProps,
+  useExcalidrawActionManager,
+  useExcalidrawSetAppState,
+} from "../App";
+import { KEYS } from "../../keys";
+import { Dialog } from "../Dialog";
+import { TextField } from "../TextField";
+import clsx from "clsx";
+import { getSelectedElements } from "../../scene";
+import { Action } from "../../actions/types";
+import { TranslationKeys, t } from "../../i18n";
+import {
+  ShortcutName,
+  getShortcutFromShortcutName,
+} from "../../actions/shortcuts";
+import { DEFAULT_SIDEBAR, EVENT } from "../../constants";
+import {
+  LockedIcon,
+  UnlockedIcon,
+  clockIcon,
+  searchIcon,
+  boltIcon,
+  bucketFillIcon,
+  ExportImageIcon,
+  mermaidLogoIcon,
+  brainIconThin,
+  LibraryIcon,
+} from "../icons";
+import fuzzy from "fuzzy";
+import { useUIAppState } from "../../context/ui-appState";
+import { AppProps, AppState, UIAppState } from "../../types";
+import {
+  capitalizeString,
+  getShortcutKey,
+  isWritableElement,
+} from "../../utils";
+import { atom, useAtom } from "jotai";
+import { deburr } from "../../deburr";
+import { MarkRequired } from "../../utility-types";
+import { InlineIcon } from "../InlineIcon";
+import { SHAPES } from "../../shapes";
+import { canChangeBackgroundColor, canChangeStrokeColor } from "../Actions";
+import { useStableCallback } from "../../hooks/useStableCallback";
+import { actionClearCanvas, actionLink } from "../../actions";
+import { jotaiStore } from "../../jotai";
+import { activeConfirmDialogAtom } from "../ActiveConfirmDialog";
+import { CommandPaletteItem } from "./types";
+import * as defaultItems from "./defaultCommandPaletteItems";
+
+import "./CommandPalette.scss";
+
+const lastUsedPaletteItem = atom<CommandPaletteItem | null>(null);
+
+export const DEFAULT_CATEGORIES = {
+  app: "App",
+  export: "Export",
+  tools: "Tools",
+  editor: "Editor",
+  elements: "Elements",
+  links: "Links",
+};
+
+const getCategoryOrder = (category: string) => {
+  switch (category) {
+    case DEFAULT_CATEGORIES.app:
+      return 1;
+    case DEFAULT_CATEGORIES.export:
+      return 2;
+    case DEFAULT_CATEGORIES.editor:
+      return 3;
+    case DEFAULT_CATEGORIES.tools:
+      return 4;
+    case DEFAULT_CATEGORIES.elements:
+      return 5;
+    case DEFAULT_CATEGORIES.links:
+      return 6;
+    default:
+      return 10;
+  }
+};
+
+const CommandShortcutHint = ({
+  shortcut,
+  className,
+  children,
+}: {
+  shortcut: string;
+  className?: string;
+  children?: React.ReactNode;
+}) => {
+  const shortcuts = shortcut.replace("++", "+$").split("+");
+
+  return (
+    <div className={clsx("shortcut", className)}>
+      {shortcuts.map((item, idx) => {
+        return (
+          <div className="shortcut-wrapper" key={item}>
+            <div className="shortcut-key">{item === "$" ? "+" : item}</div>
+          </div>
+        );
+      })}
+      <div className="shortcut-desc">{children}</div>
+    </div>
+  );
+};
+
+const isCommandPaletteToggleShortcut = (event: KeyboardEvent) => {
+  return (
+    !event.altKey &&
+    event[KEYS.CTRL_OR_CMD] &&
+    ((event.shiftKey && event.key.toLowerCase() === KEYS.P) ||
+      event.key === KEYS.SLASH)
+  );
+};
+
+type CommandPaletteProps = {
+  customCommandPaletteItems?: CommandPaletteItem[];
+};
+
+export const CommandPalette = Object.assign(
+  (props: CommandPaletteProps) => {
+    const uiAppState = useUIAppState();
+    const setAppState = useExcalidrawSetAppState();
+
+    useEffect(() => {
+      const commandPaletteShortcut = (event: KeyboardEvent) => {
+        if (isCommandPaletteToggleShortcut(event)) {
+          event.preventDefault();
+          event.stopPropagation();
+          setAppState((appState) => ({
+            openDialog:
+              appState.openDialog?.name === "commandPalette"
+                ? null
+                : { name: "commandPalette" },
+          }));
+        }
+      };
+      window.addEventListener(EVENT.KEYDOWN, commandPaletteShortcut, {
+        capture: true,
+      });
+      return () =>
+        window.removeEventListener(EVENT.KEYDOWN, commandPaletteShortcut, {
+          capture: true,
+        });
+    }, [setAppState]);
+
+    if (uiAppState.openDialog?.name !== "commandPalette") {
+      return null;
+    }
+
+    return <CommandPaletteInner {...props} />;
+  },
+  {
+    defaultItems,
+  },
+);
+
+function CommandPaletteInner({
+  customCommandPaletteItems,
+}: CommandPaletteProps) {
+  const app = useApp();
+  const uiAppState = useUIAppState();
+  const setAppState = useExcalidrawSetAppState();
+  const appProps = useAppProps();
+  const actionManager = useExcalidrawActionManager();
+
+  const [lastUsed, setLastUsed] = useAtom(lastUsedPaletteItem);
+  const [allCommands, setAllCommands] = useState<
+    MarkRequired<CommandPaletteItem, "haystack" | "order">[] | null
+  >(null);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!uiAppState || !app.scene || !actionManager) {
+      return;
+    }
+    const getActionLabel = (action: Action) => {
+      let label = "";
+      if (action.label) {
+        if (typeof action.label === "function") {
+          label = t(
+            action.label(
+              app.scene.getNonDeletedElements(),
+              uiAppState as AppState,
+              app,
+            ) as unknown as TranslationKeys,
+          );
+        } else {
+          label = t(action.label as unknown as TranslationKeys);
+        }
+      }
+      return label;
+    };
+
+    const getActionIcon = (action: Action) => {
+      if (typeof action.icon === "function") {
+        return action.icon(uiAppState, app.scene.getNonDeletedElements());
+      }
+      return action.icon;
+    };
+
+    let commandsFromActions: CommandPaletteItem[] = [];
+
+    const actionToCommand = (
+      action: Action,
+      category: string,
+      transformer?: (
+        command: CommandPaletteItem,
+        action: Action,
+      ) => CommandPaletteItem,
+    ): CommandPaletteItem => {
+      const command: CommandPaletteItem = {
+        label: getActionLabel(action),
+        icon: getActionIcon(action),
+        category,
+        shortcut: getShortcutFromShortcutName(action.name as ShortcutName),
+        keywords: action.keywords,
+        predicate: action.predicate,
+        viewMode: action.viewMode,
+        perform: () => {
+          actionManager.executeAction(action, "commandPalette");
+        },
+      };
+
+      return transformer ? transformer(command, action) : command;
+    };
+
+    if (uiAppState && app.scene && actionManager) {
+      const elementsCommands: CommandPaletteItem[] = [
+        actionManager.actions.group,
+        actionManager.actions.ungroup,
+        actionManager.actions.cut,
+        actionManager.actions.copy,
+        actionManager.actions.deleteSelectedElements,
+        actionManager.actions.copyStyles,
+        actionManager.actions.pasteStyles,
+        actionManager.actions.sendBackward,
+        actionManager.actions.sendToBack,
+        actionManager.actions.bringForward,
+        actionManager.actions.bringToFront,
+        actionManager.actions.alignTop,
+        actionManager.actions.alignBottom,
+        actionManager.actions.alignLeft,
+        actionManager.actions.alignRight,
+        actionManager.actions.alignVerticallyCentered,
+        actionManager.actions.alignHorizontallyCentered,
+        actionManager.actions.duplicateSelection,
+        actionManager.actions.flipHorizontal,
+        actionManager.actions.flipVertical,
+        actionManager.actions.zoomToFitSelection,
+        actionManager.actions.zoomToFitSelectionInViewport,
+        actionManager.actions.increaseFontSize,
+        actionManager.actions.decreaseFontSize,
+        actionManager.actions.toggleLinearEditor,
+        actionLink,
+      ].map((action: Action) =>
+        actionToCommand(
+          action,
+          DEFAULT_CATEGORIES.elements,
+          (command, action) => ({
+            ...command,
+            predicate: action.predicate
+              ? action.predicate
+              : (elements, appState, appProps, app) => {
+                  const selectedElements = getSelectedElements(
+                    elements,
+                    appState,
+                  );
+                  return selectedElements.length > 0;
+                },
+          }),
+        ),
+      );
+      const toolCommands: CommandPaletteItem[] = [
+        actionManager.actions.toggleHandTool,
+        actionManager.actions.setFrameAsActiveTool,
+      ].map((action) => actionToCommand(action, DEFAULT_CATEGORIES.tools));
+
+      const editorCommands: CommandPaletteItem[] = [
+        actionManager.actions.undo,
+        actionManager.actions.redo,
+        actionManager.actions.zoomIn,
+        actionManager.actions.zoomOut,
+        actionManager.actions.resetZoom,
+        actionManager.actions.zoomToFit,
+        actionManager.actions.zenMode,
+        actionManager.actions.viewMode,
+        actionManager.actions.objectsSnapMode,
+        actionManager.actions.toggleShortcuts,
+        actionManager.actions.selectAll,
+        actionManager.actions.toggleElementLock,
+        actionManager.actions.unlockAllElements,
+        actionManager.actions.stats,
+      ].map((action) => actionToCommand(action, DEFAULT_CATEGORIES.editor));
+
+      const exportCommands: CommandPaletteItem[] = [
+        actionManager.actions.saveToActiveFile,
+        actionManager.actions.saveFileToDisk,
+        actionManager.actions.copyAsPng,
+        actionManager.actions.copyAsSvg,
+      ].map((action) => actionToCommand(action, DEFAULT_CATEGORIES.export));
+
+      commandsFromActions = [
+        ...elementsCommands,
+        ...editorCommands,
+        {
+          label: getActionLabel(actionClearCanvas),
+          icon: getActionIcon(actionClearCanvas),
+          shortcut: getShortcutFromShortcutName(
+            actionClearCanvas.name as ShortcutName,
+          ),
+          category: DEFAULT_CATEGORIES.editor,
+          keywords: ["delete", "destroy"],
+          viewMode: false,
+          perform: () => {
+            jotaiStore.set(activeConfirmDialogAtom, "clearCanvas");
+          },
+        },
+        {
+          label: t("buttons.exportImage"),
+          category: DEFAULT_CATEGORIES.export,
+          icon: ExportImageIcon,
+          shortcut: getShortcutFromShortcutName("imageExport"),
+          keywords: [
+            "export",
+            "image",
+            "png",
+            "jpeg",
+            "svg",
+            "clipboard",
+            "picture",
+          ],
+          perform: () => {
+            setAppState({ openDialog: { name: "imageExport" } });
+          },
+        },
+        ...exportCommands,
+      ];
+
+      const additionalCommands: CommandPaletteItem[] = [
+        {
+          label: t("toolBar.library"),
+          category: DEFAULT_CATEGORIES.app,
+          icon: LibraryIcon,
+          viewMode: false,
+          perform: () => {
+            if (uiAppState.openSidebar) {
+              setAppState({
+                openSidebar: null,
+              });
+            } else {
+              setAppState({
+                openSidebar: {
+                  name: DEFAULT_SIDEBAR.name,
+                  tab: DEFAULT_SIDEBAR.defaultTab,
+                },
+              });
+            }
+          },
+        },
+        {
+          label: t("labels.changeStroke"),
+          keywords: ["color", "outline"],
+          category: DEFAULT_CATEGORIES.elements,
+          icon: bucketFillIcon,
+          viewMode: false,
+          predicate: (elements, appState) => {
+            const selectedElements = getSelectedElements(elements, appState);
+            return (
+              selectedElements.length > 0 &&
+              canChangeStrokeColor(appState, selectedElements)
+            );
+          },
+          perform: () => {
+            setAppState((prevState) => ({
+              openMenu: prevState.openMenu === "shape" ? null : "shape",
+              openPopup: "elementStroke",
+            }));
+          },
+        },
+        {
+          label: t("labels.changeBackground"),
+          keywords: ["color", "fill"],
+          icon: bucketFillIcon,
+          category: DEFAULT_CATEGORIES.elements,
+          viewMode: false,
+          predicate: (elements, appState) => {
+            const selectedElements = getSelectedElements(elements, appState);
+            return (
+              selectedElements.length > 0 &&
+              canChangeBackgroundColor(appState, selectedElements)
+            );
+          },
+          perform: () => {
+            setAppState((prevState) => ({
+              openMenu: prevState.openMenu === "shape" ? null : "shape",
+              openPopup: "elementBackground",
+            }));
+          },
+        },
+        {
+          label: t("labels.canvasBackground"),
+          keywords: ["color"],
+          icon: bucketFillIcon,
+          category: DEFAULT_CATEGORIES.editor,
+          viewMode: false,
+          perform: () => {
+            setAppState((prevState) => ({
+              openMenu: prevState.openMenu === "canvas" ? null : "canvas",
+              openPopup: "canvasBackground",
+            }));
+          },
+        },
+        ...SHAPES.reduce((acc: CommandPaletteItem[], shape) => {
+          const { value, icon, key, numericKey } = shape;
+
+          if (
+            appProps.UIOptions.tools?.[
+              value as Extract<
+                typeof value,
+                keyof AppProps["UIOptions"]["tools"]
+              >
+            ] === false
+          ) {
+            return acc;
+          }
+
+          const letter =
+            key && capitalizeString(typeof key === "string" ? key : key[0]);
+          const shortcut = letter || numericKey;
+
+          const command: CommandPaletteItem = {
+            label: t(`toolBar.${value}`),
+            category: DEFAULT_CATEGORIES.tools,
+            shortcut,
+            icon,
+            keywords: ["toolbar"],
+            viewMode: false,
+            perform: ({ event }) => {
+              if (value === "image") {
+                app.setActiveTool({
+                  type: value,
+                  insertOnCanvasDirectly: event.type === EVENT.KEYDOWN,
+                });
+              } else {
+                app.setActiveTool({ type: value });
+              }
+            },
+          };
+
+          acc.push(command);
+
+          return acc;
+        }, []),
+        ...toolCommands,
+        {
+          label: t("toolBar.lock"),
+          category: DEFAULT_CATEGORIES.tools,
+          icon: uiAppState.activeTool.locked ? LockedIcon : UnlockedIcon,
+          shortcut: KEYS.Q.toLocaleUpperCase(),
+          viewMode: false,
+          perform: () => {
+            app.toggleLock();
+          },
+        },
+        {
+          label: `${t("labels.textToDiagram")}...`,
+          category: DEFAULT_CATEGORIES.tools,
+          icon: brainIconThin,
+          viewMode: false,
+          predicate: appProps.aiEnabled,
+          perform: () => {
+            setAppState((state) => ({
+              ...state,
+              openDialog: {
+                name: "ttd",
+                tab: "text-to-diagram",
+              },
+            }));
+          },
+        },
+        {
+          label: `${t("toolBar.mermaidToExcalidraw")}...`,
+          category: DEFAULT_CATEGORIES.tools,
+          icon: mermaidLogoIcon,
+          viewMode: false,
+          predicate: appProps.aiEnabled,
+          perform: () => {
+            setAppState((state) => ({
+              ...state,
+              openDialog: {
+                name: "ttd",
+                tab: "mermaid",
+              },
+            }));
+          },
+        },
+        // {
+        //   label: `${t("toolBar.magicframe")}...`,
+        //   category: DEFAULT_CATEGORIES.tools,
+        //   icon: MagicIconThin,
+        //   viewMode: false,
+        //   predicate: appProps.aiEnabled,
+        //   perform: () => {
+        //     app.onMagicframeToolSelect();
+        //   },
+        // },
+      ];
+
+      const allCommands = [
+        ...commandsFromActions,
+        ...additionalCommands,
+        ...(customCommandPaletteItems || []),
+      ].map((command) => {
+        return {
+          ...command,
+          icon: command.icon || boltIcon,
+          order: command.order ?? getCategoryOrder(command.category),
+          haystack: `${deburr(command.label)} ${
+            command.keywords?.join(" ") || ""
+          }`,
+        };
+      });
+
+      setAllCommands(allCommands);
+      setLastUsed(
+        allCommands.find((command) => command.label === lastUsed?.label) ??
+          null,
+      );
+    }
+  }, [
+    app,
+    appProps,
+    uiAppState,
+    actionManager,
+    setAllCommands,
+    lastUsed?.label,
+    setLastUsed,
+    setAppState,
+    customCommandPaletteItems,
+  ]);
+
+  const [commandSearch, setCommandSearch] = useState("");
+  const [currentCommand, setCurrentCommand] =
+    useState<CommandPaletteItem | null>(null);
+  const [commandsByCategory, setCommandsByCategory] = useState<
+    Record<string, CommandPaletteItem[]>
+  >({});
+
+  const closeCommandPalette = (cb?: () => void) => {
+    setAppState(
+      {
+        openDialog: null,
+      },
+      cb,
+    );
+    setCommandSearch("");
+  };
+
+  const executeCommand = (
+    command: CommandPaletteItem,
+    event: React.MouseEvent | React.KeyboardEvent | KeyboardEvent,
+  ) => {
+    if (uiAppState.openDialog?.name === "commandPalette") {
+      event.stopPropagation();
+      event.preventDefault();
+      document.body.classList.add("excalidraw-animations-disabled");
+      closeCommandPalette(() => {
+        command.perform({ actionManager, event });
+        setLastUsed(command);
+
+        requestAnimationFrame(() => {
+          document.body.classList.remove("excalidraw-animations-disabled");
+        });
+      });
+    }
+  };
+
+  const isCommandAvailable = useStableCallback(
+    (command: CommandPaletteItem) => {
+      if (command.viewMode === false && uiAppState.viewModeEnabled) {
+        return false;
+      }
+
+      return typeof command.predicate === "function"
+        ? command.predicate(
+            app.scene.getNonDeletedElements(),
+            uiAppState as AppState,
+            appProps,
+            app,
+          )
+        : command.predicate === undefined || command.predicate;
+    },
+  );
+
+  const handleKeyDown = useStableCallback((event: KeyboardEvent) => {
+    const ignoreAlphanumerics =
+      isWritableElement(event.target) ||
+      isCommandPaletteToggleShortcut(event) ||
+      event.key === KEYS.ESCAPE;
+
+    if (
+      ignoreAlphanumerics &&
+      event.key !== KEYS.ARROW_UP &&
+      event.key !== KEYS.ARROW_DOWN &&
+      event.key !== KEYS.ENTER
+    ) {
+      return;
+    }
+
+    const matchingCommands = Object.values(commandsByCategory).flat();
+    const shouldConsiderLastUsed =
+      lastUsed && !commandSearch && isCommandAvailable(lastUsed);
+
+    if (event.key === KEYS.ARROW_UP) {
+      event.preventDefault();
+      const index = matchingCommands.findIndex(
+        (item) => item.label === currentCommand?.label,
+      );
+
+      if (shouldConsiderLastUsed) {
+        if (index === 0) {
+          setCurrentCommand(lastUsed);
+          return;
+        }
+
+        if (currentCommand === lastUsed) {
+          const nextItem = matchingCommands[matchingCommands.length - 1];
+          if (nextItem) {
+            setCurrentCommand(nextItem);
+          }
+          return;
+        }
+      }
+
+      let nextIndex;
+
+      if (index === -1) {
+        nextIndex = matchingCommands.length - 1;
+      } else {
+        nextIndex =
+          index === 0
+            ? matchingCommands.length - 1
+            : (index - 1) % matchingCommands.length;
+      }
+
+      const nextItem = matchingCommands[nextIndex];
+      if (nextItem) {
+        setCurrentCommand(nextItem);
+      }
+
+      return;
+    }
+
+    if (event.key === KEYS.ARROW_DOWN) {
+      event.preventDefault();
+      const index = matchingCommands.findIndex(
+        (item) => item.label === currentCommand?.label,
+      );
+
+      if (shouldConsiderLastUsed) {
+        if (!currentCommand || index === matchingCommands.length - 1) {
+          setCurrentCommand(lastUsed);
+          return;
+        }
+
+        if (currentCommand === lastUsed) {
+          const nextItem = matchingCommands[0];
+          if (nextItem) {
+            setCurrentCommand(nextItem);
+          }
+          return;
+        }
+      }
+
+      const nextIndex = (index + 1) % matchingCommands.length;
+      const nextItem = matchingCommands[nextIndex];
+      if (nextItem) {
+        setCurrentCommand(nextItem);
+      }
+
+      return;
+    }
+
+    if (event.key === KEYS.ENTER) {
+      if (currentCommand) {
+        setTimeout(() => {
+          executeCommand(currentCommand, event);
+        });
+      }
+    }
+
+    if (ignoreAlphanumerics) {
+      return;
+    }
+
+    // prevent regular editor shortcuts
+    event.stopPropagation();
+
+    // if alphanumeric keypress and we're not inside the input, focus it
+    if (/^[a-zA-Z0-9]$/.test(event.key)) {
+      inputRef?.current?.focus();
+      return;
+    }
+
+    event.preventDefault();
+  });
+
+  useEffect(() => {
+    window.addEventListener(EVENT.KEYDOWN, handleKeyDown, {
+      capture: true,
+    });
+    return () =>
+      window.removeEventListener(EVENT.KEYDOWN, handleKeyDown, {
+        capture: true,
+      });
+  }, [handleKeyDown]);
+
+  useEffect(() => {
+    if (!allCommands) {
+      return;
+    }
+
+    const getNextCommandsByCategory = (commands: CommandPaletteItem[]) => {
+      const nextCommandsByCategory: Record<string, CommandPaletteItem[]> = {};
+      for (const command of commands) {
+        if (nextCommandsByCategory[command.category]) {
+          nextCommandsByCategory[command.category].push(command);
+        } else {
+          nextCommandsByCategory[command.category] = [command];
+        }
+      }
+
+      return nextCommandsByCategory;
+    };
+
+    let matchingCommands = allCommands
+      .filter(isCommandAvailable)
+      .sort((a, b) => a.order - b.order);
+
+    const showLastUsed =
+      !commandSearch && lastUsed && isCommandAvailable(lastUsed);
+
+    if (!commandSearch) {
+      setCommandsByCategory(
+        getNextCommandsByCategory(
+          showLastUsed
+            ? matchingCommands.filter(
+                (command) => command.label !== lastUsed?.label,
+              )
+            : matchingCommands,
+        ),
+      );
+      setCurrentCommand(showLastUsed ? lastUsed : matchingCommands[0] || null);
+      return;
+    }
+
+    const _query = deburr(commandSearch.replace(/[<>-_| ]/g, ""));
+    matchingCommands = fuzzy
+      .filter(_query, matchingCommands, {
+        extract: (command) => command.haystack,
+      })
+      .sort((a, b) => b.score - a.score)
+      .map((item) => item.original);
+
+    setCommandsByCategory(getNextCommandsByCategory(matchingCommands));
+    setCurrentCommand(matchingCommands[0] ?? null);
+  }, [commandSearch, allCommands, isCommandAvailable, lastUsed]);
+
+  return (
+    <Dialog
+      onCloseRequest={() => closeCommandPalette()}
+      closeOnClickOutside
+      title={false}
+      size={720}
+      autofocus
+      className="command-palette-dialog"
+    >
+      <TextField
+        value={commandSearch}
+        placeholder={t("commandPalette.search.placeholder")}
+        onChange={(value) => {
+          setCommandSearch(value);
+        }}
+        selectOnRender
+        ref={inputRef}
+      />
+
+      {!app.device.viewport.isMobile && (
+        <div className="shortcuts-wrapper">
+          <CommandShortcutHint shortcut="↑↓">
+            {t("commandPalette.shortcuts.select")}
+          </CommandShortcutHint>
+          <CommandShortcutHint shortcut="↵">
+            {t("commandPalette.shortcuts.confirm")}
+          </CommandShortcutHint>
+          <CommandShortcutHint shortcut={getShortcutKey("Esc")}>
+            {t("commandPalette.shortcuts.close")}
+          </CommandShortcutHint>
+        </div>
+      )}
+
+      <div className="commands">
+        {lastUsed && !commandSearch && (
+          <div className="command-category">
+            <div className="command-category-title">
+              {t("commandPalette.recents")}
+              <div
+                className="icon"
+                style={{
+                  marginLeft: "6px",
+                }}
+              >
+                {clockIcon}
+              </div>
+            </div>
+            <CommandItem
+              command={lastUsed}
+              isSelected={lastUsed.label === currentCommand?.label}
+              onClick={(event) => executeCommand(lastUsed, event)}
+              disabled={!isCommandAvailable(lastUsed)}
+              onMouseMove={() => setCurrentCommand(lastUsed)}
+              showShortcut={!app.device.viewport.isMobile}
+              appState={uiAppState}
+            />
+          </div>
+        )}
+
+        {Object.keys(commandsByCategory).length > 0 ? (
+          Object.keys(commandsByCategory).map((category, idx) => {
+            return (
+              <div className="command-category" key={category}>
+                <div className="command-category-title">{category}</div>
+                {commandsByCategory[category].map((command) => (
+                  <CommandItem
+                    key={command.label}
+                    command={command}
+                    isSelected={command.label === currentCommand?.label}
+                    onClick={(event) => executeCommand(command, event)}
+                    onMouseMove={() => setCurrentCommand(command)}
+                    showShortcut={!app.device.viewport.isMobile}
+                    appState={uiAppState}
+                  />
+                ))}
+              </div>
+            );
+          })
+        ) : allCommands ? (
+          <div className="no-match">
+            <div className="icon">{searchIcon}</div>{" "}
+            {t("commandPalette.search.noMatch")}
+          </div>
+        ) : null}
+      </div>
+    </Dialog>
+  );
+}
+
+const CommandItem = ({
+  command,
+  isSelected,
+  disabled,
+  onMouseMove,
+  onClick,
+  showShortcut,
+  appState,
+}: {
+  command: CommandPaletteItem;
+  isSelected: boolean;
+  disabled?: boolean;
+  onMouseMove: () => void;
+  onClick: (event: React.MouseEvent) => void;
+  showShortcut: boolean;
+  appState: UIAppState;
+}) => {
+  const noop = () => {};
+
+  return (
+    <div
+      className={clsx("command-item", {
+        "item-selected": isSelected,
+        "item-disabled": disabled,
+      })}
+      ref={(ref) => {
+        if (isSelected && !disabled) {
+          ref?.scrollIntoView?.({
+            block: "nearest",
+          });
+        }
+      }}
+      onClick={disabled ? noop : onClick}
+      onMouseMove={disabled ? noop : onMouseMove}
+      title={disabled ? t("commandPalette.itemNotAvailable") : ""}
+    >
+      <div className="name">
+        {command.icon && (
+          <InlineIcon
+            icon={
+              typeof command.icon === "function"
+                ? command.icon(appState)
+                : command.icon
+            }
+          />
+        )}
+        {command.label}
+      </div>
+      {showShortcut && command.shortcut && (
+        <CommandShortcutHint shortcut={command.shortcut} />
+      )}
+    </div>
+  );
+};

packages/excalidraw/components/CommandPalette/defaultCommandPaletteItems.ts

@@ -0,0 +1,11 @@
+import { actionToggleTheme } from "../../actions";
+import { CommandPaletteItem } from "./types";
+
+export const toggleTheme: CommandPaletteItem = {
+  ...actionToggleTheme,
+  category: "App",
+  label: "Toggle theme",
+  perform: ({ actionManager }) => {
+    actionManager.executeAction(actionToggleTheme, "commandPalette");
+  },
+};

packages/excalidraw/components/CommandPalette/types.ts

@@ -0,0 +1,26 @@
+import { ActionManager } from "../../actions/manager";
+import { Action } from "../../actions/types";
+import { UIAppState } from "../../types";
+
+export type CommandPaletteItem = {
+  label: string;
+  /** additional keywords to match against
+   * (appended to haystack, not displayed) */
+  keywords?: string[];
+  /**
+   * string we should match against when searching
+   * (deburred name + keywords)
+   */
+  haystack?: string;
+  icon?: React.ReactNode | ((appState: UIAppState) => React.ReactNode);
+  category: string;
+  order?: number;
+  predicate?: boolean | Action["predicate"];
+  shortcut?: string;
+  /** if false, command will not show while in view mode */
+  viewMode?: boolean;
+  perform: (data: {
+    actionManager: ActionManager;
+    event: React.MouseEvent | React.KeyboardEvent | KeyboardEvent;
+  }) => void;
+};

packages/excalidraw/components/ContextMenu.tsx

@@ -78,17 +78,17 @@ export const ContextMenu = React.memo(
 
             const actionName = item.name;
             let label = "";
-            if (item.contextItemLabel) {
-              if (typeof item.contextItemLabel === "function") {
+            if (item.label) {
+              if (typeof item.label === "function") {
                 label = t(
-                  item.contextItemLabel(
+                  item.label(
                     elements,
                     appState,
                     actionManager.app,
                   ) as unknown as TranslationKeys,
                 );
               } else {
-                label = t(item.contextItemLabel as unknown as TranslationKeys);
+                label = t(item.label as unknown as TranslationKeys);
               }
             }
 

packages/excalidraw/components/Dialog.scss

@@ -37,6 +37,12 @@
       width: 1.5rem;
       height: 1.5rem;
     }
+
+    & + .Dialog__content {
+      --offset: 28px;
+      height: calc(100% - var(--offset)) !important;
+      margin-top: var(--offset) !important;
+    }
   }
 
   .Dialog--fullscreen {

packages/excalidraw/components/Dialog.tsx

@@ -1,7 +1,6 @@
 import clsx from "clsx";
 import React, { useEffect, useState } from "react";
 import { useCallbackRefState } from "../hooks/useCallbackRefState";
-import { t } from "../i18n";
 import {
   useExcalidrawContainer,
   useDevice,
@@ -9,13 +8,14 @@ import {
 } from "./App";
 import { KEYS } from "../keys";
 import "./Dialog.scss";
-import { back, CloseIcon } from "./icons";
 import { Island } from "./Island";
 import { Modal } from "./Modal";
 import { queryFocusableElements } from "../utils";
 import { useSetAtom } from "jotai";
 import { isLibraryMenuOpenAtom } from "./LibraryMenu";
 import { jotaiScope } from "../jotai";
+import { t } from "../i18n";
+import { CloseIcon } from "./icons";
 
 export type DialogSize = number | "small" | "regular" | "wide" | undefined;
 
@@ -58,10 +58,12 @@ export const Dialog = (props: DialogProps) => {
 
     const focusableElements = queryFocusableElements(islandNode);
 
-    if (focusableElements.length > 0 && props.autofocus !== false) {
-      // If there's an element other than close, focus it.
-      (focusableElements[1] || focusableElements[0]).focus();
-    }
+    setTimeout(() => {
+      if (focusableElements.length > 0 && props.autofocus !== false) {
+        // If there's an element other than close, focus it.
+        (focusableElements[1] || focusableElements[0]).focus();
+      }
+    });
 
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === KEYS.TAB) {
@@ -115,14 +117,16 @@ export const Dialog = (props: DialogProps) => {
             <span className="Dialog__titleContent">{props.title}</span>
           </h2>
         )}
-        <button
-          className="Dialog__close"
-          onClick={onClose}
-          title={t("buttons.close")}
-          aria-label={t("buttons.close")}
-        >
-          {isFullscreen ? back : CloseIcon}
-        </button>
+        {isFullscreen && (
+          <button
+            className="Dialog__close"
+            onClick={onClose}
+            title={t("buttons.close")}
+            aria-label={t("buttons.close")}
+          >
+            {CloseIcon}
+          </button>
+        )}
         <div className="Dialog__content">{props.children}</div>
       </Island>
     </Modal>

packages/excalidraw/components/FilledButton.scss

@@ -10,6 +10,10 @@
     background-color: var(--back-color);
     border-color: var(--border-color);
 
+    &:hover {
+      transition: all 150ms ease-out;
+    }
+
     .Spinner {
       --spinner-color: var(--color-surface-lowest);
       position: absolute;
@@ -203,8 +207,6 @@
 
     user-select: none;
 
-    transition: all 150ms ease-out;
-
     &--size-large {
       font-weight: 600;
       font-size: 0.875rem;

packages/excalidraw/components/HelpDialog.tsx

@@ -7,6 +7,7 @@ import "./HelpDialog.scss";
 import { ExternalLinkIcon } from "./icons";
 import { probablySupportsClipboardBlob } from "../clipboard";
 import { isDarwin, isFirefox, isWindows } from "../constants";
+import { getShortcutFromShortcutName } from "../actions/shortcuts";
 
 const Header = () => (
   <div className="HelpDialog__header">
@@ -278,6 +279,17 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
               label={t("stats.title")}
               shortcuts={[getShortcutKey("Alt+/")]}
             />
+            <Shortcut
+              label={t("commandPalette.title")}
+              shortcuts={
+                isFirefox
+                  ? [getShortcutFromShortcutName("commandPalette")]
+                  : [
+                      getShortcutFromShortcutName("commandPalette"),
+                      getShortcutFromShortcutName("commandPalette", 1),
+                    ]
+              }
+            />
           </ShortcutIsland>
           <ShortcutIsland
             className="HelpDialog__island--editor"

packages/excalidraw/components/InlineIcon.tsx

@@ -1,4 +1,4 @@
-export const InlineIcon = ({ icon }: { icon: JSX.Element }) => {
+export const InlineIcon = ({ icon }: { icon: React.ReactNode }) => {
   return (
     <span
       style={{

packages/excalidraw/components/Modal.scss

@@ -23,6 +23,20 @@
 
     .Island {
       padding: 2.5rem;
+      border: 0;
+      box-shadow: none;
+      border-radius: 0;
+    }
+
+    &.animations-disabled {
+      .Modal__background {
+        animation: none;
+      }
+
+      .Modal__content {
+        animation: none;
+        opacity: 1;
+      }
     }
   }
 
@@ -35,7 +49,7 @@
     z-index: 1;
     background-color: rgba(#121212, 0.2);
 
-    animation: Modal__background__fade-in 0.125s linear forwards;
+    animation: Modal__background__fade-in 0.1s linear forwards;
   }
 
   .Modal__content {
@@ -47,7 +61,8 @@
 
     opacity: 0;
     transform: translateY(10px);
-    animation: Modal__content_fade-in 0.1s ease-out 0.05s forwards;
+    animation: Modal__content_fade-in 0.025s ease-out 0s forwards;
+
     position: relative;
     overflow-y: auto;
 
@@ -56,7 +71,7 @@
 
     border: 1px solid var(--dialog-border-color);
     box-shadow: var(--modal-shadow);
-    border-radius: 6px;
+    border-radius: 0.75rem;
     box-sizing: border-box;
 
     &:focus {

packages/excalidraw/components/Modal.tsx

@@ -5,6 +5,7 @@ import clsx from "clsx";
 import { KEYS } from "../keys";
 import { AppState } from "../types";
 import { useCreatePortalContainer } from "../hooks/useCreatePortalContainer";
+import { useRef } from "react";
 
 export const Modal: React.FC<{
   className?: string;
@@ -20,6 +21,10 @@ export const Modal: React.FC<{
     className: "excalidraw-modal-container",
   });
 
+  const animationsDisabledRef = useRef(
+    document.body.classList.contains("excalidraw-animations-disabled"),
+  );
+
   if (!modalRoot) {
     return null;
   }
@@ -34,7 +39,9 @@ export const Modal: React.FC<{
 
   return createPortal(
     <div
-      className={clsx("Modal", props.className)}
+      className={clsx("Modal", props.className, {
+        "animations-disabled": animationsDisabledRef.current,
+      })}
       role="dialog"
       aria-modal="true"
       onKeyDown={handleKeydown}

packages/excalidraw/components/Sidebar/Sidebar.test.tsx

@@ -85,7 +85,7 @@ describe("Sidebar", () => {
       });
     });
 
-    it("should toggle sidebar using props.toggleMenu()", async () => {
+    it("should toggle sidebar using excalidrawAPI.toggleSidebar()", async () => {
       const { container } = await render(
         <Excalidraw>
           <Sidebar name="customSidebar">
@@ -158,6 +158,20 @@ describe("Sidebar", () => {
         const sidebars = container.querySelectorAll(".sidebar");
         expect(sidebars.length).toBe(1);
       });
+
+      // closing sidebar using `{ name: null }`
+      // -------------------------------------------------------------------------
+      expect(window.h.app.toggleSidebar({ name: "customSidebar" })).toBe(true);
+      await waitFor(() => {
+        const node = container.querySelector("#test-sidebar-content");
+        expect(node).not.toBe(null);
+      });
+
+      expect(window.h.app.toggleSidebar({ name: null })).toBe(false);
+      await waitFor(() => {
+        const node = container.querySelector("#test-sidebar-content");
+        expect(node).toBe(null);
+      });
     });
   });
 
@@ -329,4 +343,70 @@ describe("Sidebar", () => {
       );
     });
   });
+
+  describe("Sidebar.tab", () => {
+    it("should toggle sidebars tabs correctly", async () => {
+      const { container } = await render(
+        <Excalidraw>
+          <Sidebar name="custom" docked>
+            <Sidebar.Tabs>
+              <Sidebar.Tab tab="library">Library</Sidebar.Tab>
+              <Sidebar.Tab tab="comments">Comments</Sidebar.Tab>
+            </Sidebar.Tabs>
+          </Sidebar>
+        </Excalidraw>,
+      );
+
+      await withExcalidrawDimensions(
+        { width: 1920, height: 1080 },
+        async () => {
+          expect(
+            container.querySelector<HTMLElement>(
+              "[role=tabpanel][data-testid=library]",
+            ),
+          ).toBeNull();
+
+          // open library sidebar
+          expect(
+            window.h.app.toggleSidebar({ name: "custom", tab: "library" }),
+          ).toBe(true);
+          expect(
+            container.querySelector<HTMLElement>(
+              "[role=tabpanel][data-testid=library]",
+            ),
+          ).not.toBeNull();
+
+          // switch to comments tab
+          expect(
+            window.h.app.toggleSidebar({ name: "custom", tab: "comments" }),
+          ).toBe(true);
+          expect(
+            container.querySelector<HTMLElement>(
+              "[role=tabpanel][data-testid=comments]",
+            ),
+          ).not.toBeNull();
+
+          // toggle sidebar closed
+          expect(
+            window.h.app.toggleSidebar({ name: "custom", tab: "comments" }),
+          ).toBe(false);
+          expect(
+            container.querySelector<HTMLElement>(
+              "[role=tabpanel][data-testid=comments]",
+            ),
+          ).toBeNull();
+
+          // toggle sidebar open
+          expect(
+            window.h.app.toggleSidebar({ name: "custom", tab: "comments" }),
+          ).toBe(true);
+          expect(
+            container.querySelector<HTMLElement>(
+              "[role=tabpanel][data-testid=comments]",
+            ),
+          ).not.toBeNull();
+        },
+      );
+    });
+  });
 });

packages/excalidraw/components/Sidebar/SidebarTab.tsx

@@ -10,7 +10,7 @@ export const SidebarTab = ({
   children: React.ReactNode;
 } & React.HTMLAttributes<HTMLDivElement>) => {
   return (
-    <RadixTabs.Content {...rest} value={tab}>
+    <RadixTabs.Content {...rest} value={tab} data-testid={tab}>
       {children}
     </RadixTabs.Content>
   );

packages/excalidraw/components/dropdownMenu/DropdownMenuContent.tsx

@@ -42,13 +42,15 @@ const MenuContent = ({
       }
     };
 
-    document.addEventListener(EVENT.KEYDOWN, onKeyDown, {
+    const option = {
       // so that we can stop propagation of the event before it reaches
       // event handlers that were bound before this one
       capture: true,
-    });
+    };
+
+    document.addEventListener(EVENT.KEYDOWN, onKeyDown, option);
     return () => {
-      document.removeEventListener(EVENT.KEYDOWN, onKeyDown);
+      document.removeEventListener(EVENT.KEYDOWN, onKeyDown, option);
     };
   }, [callbacksRef]);
 

packages/excalidraw/components/hyperlink/Hyperlink.tsx

@@ -1,4 +1,4 @@
-import { AppState, ExcalidrawProps, Point } from "../../types";
+import { AppState, ExcalidrawProps, Point, UIAppState } from "../../types";
 import {
   sceneCoordsToViewportCoords,
   viewportCoordsToSceneCoords,
@@ -332,10 +332,10 @@ const getCoordsForPopover = (
 
 export const getContextMenuLabel = (
   elements: readonly NonDeletedExcalidrawElement[],
-  appState: AppState,
+  appState: UIAppState,
 ) => {
   const selectedElements = getSelectedElements(elements, appState);
-  const label = selectedElements[0]!.link
+  const label = selectedElements[0]?.link
     ? isEmbeddableElement(selectedElements[0])
       ? "labels.link.editEmbed"
       : "labels.link.edit"

packages/excalidraw/components/icons.tsx

@@ -85,7 +85,7 @@ export const PlusPromoIcon = createIcon(
 
 // tabler-icons: book
 export const LibraryIcon = createIcon(
-  <g strokeWidth="1.5">
+  <g strokeWidth="1.25">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <path d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
     <path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
@@ -386,6 +386,16 @@ export const ZoomOutIcon = createIcon(
   modifiedTablerIconProps,
 );
 
+export const ZoomResetIcon = createIcon(
+  <g strokeWidth={1.25}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M21 21l-6 -6" />
+    <path d="M3.268 12.043a7.017 7.017 0 0 0 6.634 4.957a7.012 7.012 0 0 0 7.043 -6.131a7 7 0 0 0 -5.314 -7.672a7.021 7.021 0 0 0 -8.241 4.403" />
+    <path d="M3 4v4h4" />
+  </g>,
+  tablerIconProps,
+);
+
 export const TrashIcon = createIcon(
   <path
     strokeWidth="1.25"
@@ -462,6 +472,16 @@ export const HelpIcon = createIcon(
   tablerIconProps,
 );
 
+export const HelpIconThin = createIcon(
+  <g strokeWidth="1.25">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+    <circle cx="12" cy="12" r="9"></circle>
+    <line x1="12" y1="17" x2="12" y2="17.01"></line>
+    <path d="M12 13.5a1.5 1.5 0 0 1 1 -1.5a2.6 2.6 0 1 0 -3 -4"></path>
+  </g>,
+  tablerIconProps,
+);
+
 export const ExternalLinkIcon = createIcon(
   <path
     strokeWidth="1.25"
@@ -539,6 +559,16 @@ export const palette = createIcon(
   "M204.3 5C104.9 24.4 24.8 104.3 5.2 203.4c-37 187 131.7 326.4 258.8 306.7 41.2-6.4 61.4-54.6 42.5-91.7-23.1-45.4 9.9-98.4 60.9-98.4h79.7c35.8 0 64.8-29.6 64.9-65.3C511.5 97.1 368.1-26.9 204.3 5zM96 320c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm32-128c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128-64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z",
 );
 
+export const bucketFillIcon = createIcon(
+  <g strokeWidth={1.25}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M5 16l1.465 1.638a2 2 0 1 1 -3.015 .099l1.55 -1.737z" />
+    <path d="M13.737 9.737c2.299 -2.3 3.23 -5.095 2.081 -6.245c-1.15 -1.15 -3.945 -.217 -6.244 2.082c-2.3 2.299 -3.231 5.095 -2.082 6.244c1.15 1.15 3.946 .218 6.245 -2.081z" />
+    <path d="M7.492 11.818c.362 .362 .768 .676 1.208 .934l6.895 4.047c1.078 .557 2.255 -.075 3.692 -1.512c1.437 -1.437 2.07 -2.614 1.512 -3.692c-.372 -.718 -1.72 -3.017 -4.047 -6.895a6.015 6.015 0 0 0 -.934 -1.208" />
+  </g>,
+  tablerIconProps,
+);
+
 export const ExportImageIcon = createIcon(
   <g strokeWidth="1.25">
     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
@@ -613,6 +643,16 @@ export const shareIOS = createIcon(
   { width: 24, height: 24 },
 );
 
+export const exportToPlus = createIcon(
+  <g strokeWidth={1.25}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M8 9h-1a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-8a2 2 0 0 0 -2 -2h-1" />
+    <path d="M12 14v-11" />
+    <path d="M9 6l3 -3l3 3" />
+  </g>,
+  tablerIconProps,
+);
+
 export const shareWindows = createIcon(
   <>
     <path
@@ -934,11 +974,6 @@ export const CloseIcon = createIcon(
   modifiedTablerIconProps,
 );
 
-export const back = createIcon(
-  "M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z",
-  { width: 320, height: 512, style: { marginLeft: "-0.2rem" }, mirror: true },
-);
-
 export const clone = createIcon(
   "M464 0c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48H176c-26.51 0-48-21.49-48-48V48c0-26.51 21.49-48 48-48h288M176 416c-44.112 0-80-35.888-80-80V128H48c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48v-48H176z",
   { mirror: true },
@@ -1472,6 +1507,19 @@ export const FontSizeExtraLargeIcon = createIcon(
   modifiedTablerIconProps,
 );
 
+export const fontSizeIcon = createIcon(
+  <g strokeWidth={1.25}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M3 7v-2h13v2" />
+    <path d="M10 5v14" />
+    <path d="M12 19h-4" />
+    <path d="M15 13v-1h6v1" />
+    <path d="M18 12v7" />
+    <path d="M17 19h2" />
+  </g>,
+  tablerIconProps,
+);
+
 export const FontFamilyNormalIcon = createIcon(
   <>
     <g
@@ -1649,6 +1697,17 @@ export const copyIcon = createIcon(
   tablerIconProps,
 );
 
+export const cutIcon = createIcon(
+  <g strokeWidth={1.25}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M7 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
+    <path d="M17 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
+    <path d="M9.15 14.85l8.85 -10.85" />
+    <path d="M6 4l8.85 10.85" />
+  </g>,
+  tablerIconProps,
+);
+
 export const helpIcon = createIcon(
   <>
     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
@@ -1773,6 +1832,17 @@ export const MagicIcon = createIcon(
   tablerIconProps,
 );
 
+export const MagicIconThin = createIcon(
+  <g strokeWidth={1.25}>
+    <path stroke="none" d="M0 0h24v24H0z" />
+    <path d="M6 21l15 -15l-3 -3l-15 15l3 3" />
+    <path d="M15 6l3 3" />
+    <path d="M9 3a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2" />
+    <path d="M19 13a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2" />
+  </g>,
+  tablerIconProps,
+);
+
 export const OpenAIIcon = createIcon(
   <g stroke="currentColor" fill="none">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
@@ -1829,6 +1899,19 @@ export const brainIcon = createIcon(
   tablerIconProps,
 );
 
+export const brainIconThin = createIcon(
+  <g strokeWidth={1.25}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M15.5 13a3.5 3.5 0 0 0 -3.5 3.5v1a3.5 3.5 0 0 0 7 0v-1.8" />
+    <path d="M8.5 13a3.5 3.5 0 0 1 3.5 3.5v1a3.5 3.5 0 0 1 -7 0v-1.8" />
+    <path d="M17.5 16a3.5 3.5 0 0 0 0 -7h-.5" />
+    <path d="M19 9.3v-2.8a3.5 3.5 0 0 0 -7 0" />
+    <path d="M6.5 16a3.5 3.5 0 0 1 0 -7h.5" />
+    <path d="M5 9.3v-2.8a3.5 3.5 0 0 1 7 0v10" />
+  </g>,
+  tablerIconProps,
+);
+
 export const searchIcon = createIcon(
   <g strokeWidth={1.5}>
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
@@ -1838,6 +1921,16 @@ export const searchIcon = createIcon(
   tablerIconProps,
 );
 
+export const clockIcon = createIcon(
+  <g strokeWidth={1.5}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M20.984 12.53a9 9 0 1 0 -7.552 8.355" />
+    <path d="M12 7v5l3 3" />
+    <path d="M19 16l-2 3h4l-2 3" />
+  </g>,
+  tablerIconProps,
+);
+
 export const microphoneIcon = createIcon(
   <g strokeWidth={1.5}>
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
@@ -1860,3 +1953,142 @@ export const microphoneMutedIcon = createIcon(
   </g>,
   tablerIconProps,
 );
+
+export const boltIcon = createIcon(
+  <g strokeWidth={1.25}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11" />
+  </g>,
+  tablerIconProps,
+);
+export const selectAllIcon = createIcon(
+  <g>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M8 8m0 1a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-6a1 1 0 0 1 -1 -1z" />
+    <path d="M12 20v.01" />
+    <path d="M16 20v.01" />
+    <path d="M8 20v.01" />
+    <path d="M4 20v.01" />
+    <path d="M4 16v.01" />
+    <path d="M4 12v.01" />
+    <path d="M4 8v.01" />
+    <path d="M4 4v.01" />
+    <path d="M8 4v.01" />
+    <path d="M12 4v.01" />
+    <path d="M16 4v.01" />
+    <path d="M20 4v.01" />
+    <path d="M20 8v.01" />
+    <path d="M20 12v.01" />
+    <path d="M20 16v.01" />
+    <path d="M20 20v.01" />
+  </g>,
+  tablerIconProps,
+);
+
+export const abacusIcon = createIcon(
+  <g strokeWidth={1.25}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M5 3v18" />
+    <path d="M19 21v-18" />
+    <path d="M5 7h14" />
+    <path d="M5 15h14" />
+    <path d="M8 13v4" />
+    <path d="M11 13v4" />
+    <path d="M16 13v4" />
+    <path d="M14 5v4" />
+    <path d="M11 5v4" />
+    <path d="M8 5v4" />
+    <path d="M3 21h18" />
+  </g>,
+  tablerIconProps,
+);
+
+export const flipVertical = createIcon(
+  <g strokeWidth={1.25}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M3 12l18 0" />
+    <path d="M7 16l10 0l-10 5l0 -5" />
+    <path d="M7 8l10 0l-10 -5l0 5" />
+  </g>,
+  tablerIconProps,
+);
+
+export const flipHorizontal = createIcon(
+  <g strokeWidth={1.25}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M12 3l0 18" />
+    <path d="M16 7l0 10l5 0l-5 -10" />
+    <path d="M8 7l0 10l-5 0l5 -10" />
+  </g>,
+  tablerIconProps,
+);
+
+export const paintIcon = createIcon(
+  <g strokeWidth={1.25}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M5 3m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z" />
+    <path d="M19 6h1a2 2 0 0 1 2 2a5 5 0 0 1 -5 5l-5 0v2" />
+    <path d="M10 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z" />
+  </g>,
+  tablerIconProps,
+);
+
+export const zoomAreaIcon = createIcon(
+  <g strokeWidth={1.25}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M15 15m-5 0a5 5 0 1 0 10 0a5 5 0 1 0 -10 0" />
+    <path d="M22 22l-3 -3" />
+    <path d="M6 18h-1a2 2 0 0 1 -2 -2v-1" />
+    <path d="M3 11v-1" />
+    <path d="M3 6v-1a2 2 0 0 1 2 -2h1" />
+    <path d="M10 3h1" />
+    <path d="M15 3h1a2 2 0 0 1 2 2v1" />
+  </g>,
+  tablerIconProps,
+);
+
+export const svgIcon = createIcon(
+  <g strokeWidth={1.25}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M14 3v4a1 1 0 0 0 1 1h4" />
+    <path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4" />
+    <path d="M4 20.25c0 .414 .336 .75 .75 .75h1.25a1 1 0 0 0 1 -1v-1a1 1 0 0 0 -1 -1h-1a1 1 0 0 1 -1 -1v-1a1 1 0 0 1 1 -1h1.25a.75 .75 0 0 1 .75 .75" />
+    <path d="M10 15l2 6l2 -6" />
+    <path d="M20 15h-1a2 2 0 0 0 -2 2v2a2 2 0 0 0 2 2h1v-3" />
+  </g>,
+  tablerIconProps,
+);
+
+export const pngIcon = createIcon(
+  <g strokeWidth={1.25}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M14 3v4a1 1 0 0 0 1 1h4" />
+    <path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4" />
+    <path d="M20 15h-1a2 2 0 0 0 -2 2v2a2 2 0 0 0 2 2h1v-3" />
+    <path d="M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6" />
+    <path d="M11 21v-6l3 6v-6" />
+  </g>,
+  tablerIconProps,
+);
+
+export const magnetIcon = createIcon(
+  <g strokeWidth={1.25}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <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" />
+    <path d="M4 8l5 0" />
+    <path d="M15 8l4 0" />
+  </g>,
+  tablerIconProps,
+);
+
+export const coffeeIcon = createIcon(
+  <g strokeWidth={1.25}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <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" />
+    <path d="M8 3a2.4 2.4 0 0 0 -1 2a2.4 2.4 0 0 0 1 2" />
+    <path d="M12 3a2.4 2.4 0 0 0 -1 2a2.4 2.4 0 0 0 1 2" />
+    <path d="M3 10h14v5a6 6 0 0 1 -6 6h-2a6 6 0 0 1 -6 -6v-5z" />
+    <path d="M16.746 16.726a3 3 0 1 0 .252 -5.555" />
+  </g>,
+  tablerIconProps,
+);

packages/excalidraw/components/main-menu/DefaultItems.tsx

@@ -7,6 +7,7 @@ import {
   useAppProps,
 } from "../App";
 import {
+  boltIcon,
   ExportIcon,
   ExportImageIcon,
   HelpIcon,
@@ -27,8 +28,6 @@ import {
   actionShortcuts,
   actionToggleTheme,
 } from "../../actions";
-
-import "./DefaultItems.scss";
 import clsx from "clsx";
 import { useSetAtom } from "jotai";
 import { activeConfirmDialogAtom } from "../ActiveConfirmDialog";
@@ -37,6 +36,8 @@ import { useUIAppState } from "../../context/ui-appState";
 import { openConfirmModal } from "../OverwriteConfirm/OverwriteConfirmState";
 import Trans from "../Trans";
 
+import "./DefaultItems.scss";
+
 export const LoadScene = () => {
   const { t } = useI18n();
   const actionManager = useExcalidrawActionManager();
@@ -117,6 +118,24 @@ export const SaveAsImage = () => {
 };
 SaveAsImage.displayName = "SaveAsImage";
 
+export const CommandPalette = () => {
+  const setAppState = useExcalidrawSetAppState();
+  const { t } = useI18n();
+
+  return (
+    <DropdownMenuItem
+      icon={boltIcon}
+      data-testid="command-palette-button"
+      onSelect={() => setAppState({ openDialog: { name: "commandPalette" } })}
+      shortcut={getShortcutFromShortcutName("commandPalette")}
+      aria-label={t("commandPalette.title")}
+    >
+      {t("commandPalette.title")}
+    </DropdownMenuItem>
+  );
+};
+CommandPalette.displayName = "CommandPalette";
+
 export const Help = () => {
   const { t } = useI18n();
 

packages/excalidraw/deburr.ts

@@ -0,0 +1,93 @@
+// taken from lodash (MIT)
+// https://github.com/lodash/lodash/blob/67389a8c78975d97505fa15aa79bec6397749807/lodash.js#L14180
+
+const rsComboMarksRange = "\\u0300-\\u036f";
+const reComboHalfMarksRange = "\\ufe20-\\ufe2f";
+const rsComboSymbolsRange = "\\u20d0-\\u20ff";
+const rsComboRange =
+  rsComboMarksRange + reComboHalfMarksRange + rsComboSymbolsRange;
+const rsCombo = `[${rsComboRange}]`;
+
+const reComboMark = RegExp(rsCombo, "g");
+
+const reLatin = /[\xc0-\xd6\xd8-\xf6\xf8-\xff\u0100-\u017f]/g;
+
+// NOTE below letter replacements are modified from lodash to always convert
+// to single-letter form by phonetic similarity to keep indexing identical.
+// Doing this is only useful for search highlighting, and only insofar
+// we use a library that can highlight the original source string using
+// the matching indices. As such, we'll likely need to write our own highlighter
+// anyway. Ultimately, we'll want to write our own matcher altogether
+// so we don't have to do any deburring, which will be the most correct
+// solution.
+//
+// prettier-ignore
+const deburredLetters = {
+    '\xc0': 'A',  '\xc1': 'A', '\xc2': 'A', '\xc3': 'A', '\xc4': 'A', '\xc5': 'A',
+    '\xe0': 'a',  '\xe1': 'a', '\xe2': 'a', '\xe3': 'a', '\xe4': 'a', '\xe5': 'a',
+    '\xc7': 'C',  '\xe7': 'c',
+    '\xd0': 'D',  '\xf0': 'd',
+    '\xc8': 'E',  '\xc9': 'E', '\xca': 'E', '\xcb': 'E',
+    '\xe8': 'e',  '\xe9': 'e', '\xea': 'e', '\xeb': 'e',
+    '\xcc': 'I',  '\xcd': 'I', '\xce': 'I', '\xcf': 'I',
+    '\xec': 'i',  '\xed': 'i', '\xee': 'i', '\xef': 'i',
+    '\xd1': 'N',  '\xf1': 'n',
+    '\xd2': 'O',  '\xd3': 'O', '\xd4': 'O', '\xd5': 'O', '\xd6': 'O', '\xd8': 'O',
+    '\xf2': 'o',  '\xf3': 'o', '\xf4': 'o', '\xf5': 'o', '\xf6': 'o', '\xf8': 'o',
+    '\xd9': 'U',  '\xda': 'U', '\xdb': 'U', '\xdc': 'U',
+    '\xf9': 'u',  '\xfa': 'u', '\xfb': 'u', '\xfc': 'u',
+    '\xdd': 'Y',  '\xfd': 'y', '\xff': 'y',
+    // normaly Ae/ae
+    '\xc6': 'E', '\xe6': 'e',
+    // normally Th/th
+    '\xde': 'T', '\xfe': 't',
+    // normally ss
+    '\xdf': 's',
+    '\u0100': 'A',  '\u0102': 'A', '\u0104': 'A',
+    '\u0101': 'a',  '\u0103': 'a', '\u0105': 'a',
+    '\u0106': 'C',  '\u0108': 'C', '\u010a': 'C', '\u010c': 'C',
+    '\u0107': 'c',  '\u0109': 'c', '\u010b': 'c', '\u010d': 'c',
+    '\u010e': 'D',  '\u0110': 'D', '\u010f': 'd', '\u0111': 'd',
+    '\u0112': 'E',  '\u0114': 'E', '\u0116': 'E', '\u0118': 'E', '\u011a': 'E',
+    '\u0113': 'e',  '\u0115': 'e', '\u0117': 'e', '\u0119': 'e', '\u011b': 'e',
+    '\u011c': 'G',  '\u011e': 'G', '\u0120': 'G', '\u0122': 'G',
+    '\u011d': 'g',  '\u011f': 'g', '\u0121': 'g', '\u0123': 'g',
+    '\u0124': 'H',  '\u0126': 'H', '\u0125': 'h', '\u0127': 'h',
+    '\u0128': 'I',  '\u012a': 'I', '\u012c': 'I', '\u012e': 'I', '\u0130': 'I',
+    '\u0129': 'i',  '\u012b': 'i', '\u012d': 'i', '\u012f': 'i', '\u0131': 'i',
+    '\u0134': 'J',  '\u0135': 'j',
+    '\u0136': 'K',  '\u0137': 'k', '\u0138': 'k',
+    '\u0139': 'L',  '\u013b': 'L', '\u013d': 'L', '\u013f': 'L', '\u0141': 'L',
+    '\u013a': 'l',  '\u013c': 'l', '\u013e': 'l', '\u0140': 'l', '\u0142': 'l',
+    '\u0143': 'N',  '\u0145': 'N', '\u0147': 'N', '\u014a': 'N',
+    '\u0144': 'n',  '\u0146': 'n', '\u0148': 'n', '\u014b': 'n',
+    '\u014c': 'O',  '\u014e': 'O', '\u0150': 'O',
+    '\u014d': 'o',  '\u014f': 'o', '\u0151': 'o',
+    '\u0154': 'R',  '\u0156': 'R', '\u0158': 'R',
+    '\u0155': 'r',  '\u0157': 'r', '\u0159': 'r',
+    '\u015a': 'S',  '\u015c': 'S', '\u015e': 'S', '\u0160': 'S',
+    '\u015b': 's',  '\u015d': 's', '\u015f': 's', '\u0161': 's',
+    '\u0162': 'T',  '\u0164': 'T', '\u0166': 'T',
+    '\u0163': 't',  '\u0165': 't', '\u0167': 't',
+    '\u0168': 'U',  '\u016a': 'U', '\u016c': 'U', '\u016e': 'U', '\u0170': 'U', '\u0172': 'U',
+    '\u0169': 'u',  '\u016b': 'u', '\u016d': 'u', '\u016f': 'u', '\u0171': 'u', '\u0173': 'u',
+    '\u0174': 'W',  '\u0175': 'w',
+    '\u0176': 'Y',  '\u0177': 'y', '\u0178': 'Y',
+    '\u0179': 'Z',  '\u017b': 'Z', '\u017d': 'Z',
+    '\u017a': 'z',  '\u017c': 'z', '\u017e': 'z',
+    // normally IJ/ij
+    '\u0132': 'I', '\u0133': 'i',
+    // normally OE/oe
+    '\u0152': 'E', '\u0153': 'e',
+    // normally "'n"
+    '\u0149': "n",
+    '\u017f': 's'
+  };
+
+export const deburr = (str: string) => {
+  return str
+    .replace(reLatin, (key: string) => {
+      return deburredLetters[key as keyof typeof deburredLetters] || key;
+    })
+    .replace(reComboMark, "");
+};

packages/excalidraw/element/embeddable.ts

@@ -251,6 +251,8 @@ export const createPlaceholderEmbeddableLabel = (
 export const actionSetEmbeddableAsActiveTool = register({
   name: "setEmbeddableAsActiveTool",
   trackEvent: { category: "toolbar" },
+  target: "Tool",
+  label: "toolBar.embeddable",
   perform: (elements, appState, _, app) => {
     const nextActiveTool = updateActiveTool(appState, {
       type: "embeddable",

packages/excalidraw/element/textWysiwyg.tsx

@@ -235,7 +235,7 @@ export const textWysiwyg = ({
         font: getFontString(updatedTextElement),
         // must be defined *after* font ¯\_(ツ)_/¯
         lineHeight: updatedTextElement.lineHeight,
-        width: `${textElementWidth}px`,
+        width: `${Math.ceil(textElementWidth)}px`,
         height: `${textElementHeight}px`,
         left: `${viewportX}px`,
         top: `${viewportY}px`,
@@ -333,7 +333,7 @@ export const textWysiwyg = ({
           getBoundTextMaxWidth(container, boundTextElement),
         );
         const width = getTextWidth(wrappedText, font);
-        editable.style.width = `${width}px`;
+        editable.style.width = `${Math.ceil(width)}px`;
       }
     };
 

packages/excalidraw/hooks/useStableCallback.ts

@@ -0,0 +1,18 @@
+import { useRef } from "react";
+
+/**
+ * Returns a stable function of the same type.
+ */
+export const useStableCallback = <T extends (...args: any[]) => any>(
+  userFn: T,
+) => {
+  const stableRef = useRef<{ userFn: T; stableFn?: T }>({ userFn });
+  stableRef.current.userFn = userFn;
+
+  if (!stableRef.current.stableFn) {
+    stableRef.current.stableFn = ((...args: any[]) =>
+      stableRef.current.userFn(...args)) as T;
+  }
+
+  return stableRef.current.stableFn as T;
+};

packages/excalidraw/keys.ts

@@ -45,6 +45,7 @@ export const KEYS = {
   PERIOD: ".",
   COMMA: ",",
   SUBTRACT: "-",
+  SLASH: "/",
 
   A: "a",
   C: "c",

packages/excalidraw/locales/en.json

@@ -21,7 +21,9 @@
     "copyStyles": "Copy styles",
     "pasteStyles": "Paste styles",
     "stroke": "Stroke",
+    "changeStroke": "Change stroke color",
     "background": "Background",
+    "changeBackground": "Change background color",
     "fill": "Fill",
     "strokeWidth": "Stroke width",
     "strokeStyle": "Stroke style",
@@ -72,6 +74,7 @@
     "canvasColors": "Used on canvas",
     "canvasBackground": "Canvas background",
     "drawingCanvas": "Drawing canvas",
+    "clearCanvas": "Clear canvas",
     "layers": "Layers",
     "actions": "Actions",
     "language": "Language",
@@ -90,6 +93,7 @@
     "libraryLoadingMessage": "Loading library…",
     "libraries": "Browse libraries",
     "loadingScene": "Loading scene…",
+    "loadScene": "Load scene from file",
     "align": "Align",
     "alignTop": "Align top",
     "alignBottom": "Align bottom",
@@ -105,7 +109,7 @@
     "share": "Share",
     "showStroke": "Show stroke color picker",
     "showBackground": "Show background color picker",
-    "toggleTheme": "Toggle theme",
+    "toggleTheme": "Toggle light/dark theme",
     "personalLib": "Personal Library",
     "excalidrawLib": "Excalidraw Library",
     "decreaseFontSize": "Decrease font size",
@@ -140,7 +144,10 @@
     "textToDiagram": "Text to diagram",
     "prompt": "Prompt",
     "followUs": "Follow us",
-    "discordChat": "Discord chat"
+    "discordChat": "Discord chat",
+    "zoomToFitViewport": "Zoom to fit in viewport",
+    "zoomToFitSelection": "Zoom to fit selection",
+    "zoomToFit": "Zoom to fit all elements"
   },
   "library": {
     "noItems": "No items added yet...",
@@ -539,5 +546,20 @@
       "micMuted": "User's microphone is muted",
       "isSpeaking": "User is speaking"
     }
+  },
+  "commandPalette": {
+    "title": "Command palette",
+    "shortcuts": {
+      "select": "Select",
+      "confirm": "Confirm",
+      "close": "Close"
+    },
+    "recents": "Recently used",
+    "search": {
+      "placeholder": "Search menus, commands, and discover hidden gems",
+      "noMatch": "No matching commands..."
+    },
+    "itemNotAvailable": "Command is not available...",
+    "shortcutHint": "For Command palette, use {{shortcut}}"
   }
 }

packages/excalidraw/package.json

@@ -58,7 +58,7 @@
   "dependencies": {
     "@braintree/sanitize-url": "6.0.2",
     "@excalidraw/laser-pointer": "1.3.1",
-    "@excalidraw/mermaid-to-excalidraw": "0.2.0",
+    "@excalidraw/mermaid-to-excalidraw": "0.3.0",
     "@excalidraw/random-username": "1.1.0",
     "@radix-ui/react-popover": "1.0.3",
     "@radix-ui/react-tabs": "1.0.2",
@@ -67,6 +67,7 @@
     "canvas-roundrect-polyfill": "0.0.1",
     "clsx": "1.1.1",
     "cross-env": "7.0.3",
+    "fuzzy": "0.1.3",
     "image-blob-reduce": "3.0.1",
     "jotai": "1.13.1",
     "lodash.throttle": "4.1.1",
@@ -94,6 +95,8 @@
     "@babel/preset-react": "7.18.6",
     "@babel/preset-typescript": "7.18.6",
     "@size-limit/preset-big-lib": "9.0.0",
+    "@testing-library/jest-dom": "5.16.2",
+    "@testing-library/react": "12.1.5",
     "@types/pako": "1.0.3",
     "@types/pica": "5.1.3",
     "@types/resize-observer-browser": "0.1.7",
@@ -116,8 +119,6 @@
     "sass-loader": "13.0.2",
     "size-limit": "9.0.0",
     "style-loader": "3.3.3",
-    "@testing-library/jest-dom": "5.16.2",
-    "@testing-library/react": "12.1.5",
     "ts-loader": "9.3.1",
     "typescript": "4.9.4"
   },

packages/excalidraw/tests/MermaidToExcalidraw.test.tsx

@@ -1,4 +1,4 @@
-import { act, fireEvent, render, waitFor } from "./test-utils";
+import { act, render, waitFor } from "./test-utils";
 import { Excalidraw } from "../index";
 import React from "react";
 import { expect, vi } from "vitest";
@@ -115,19 +115,6 @@ describe("Test <MermaidToExcalidraw/>", () => {
     expect(dialog.outerHTML).toMatchSnapshot();
   });
 
-  it("should close the popup and set the tool to selection when close button clicked", () => {
-    const dialog = document.querySelector(".ttd-dialog")!;
-    const closeBtn = dialog.querySelector(".Dialog__close")!;
-    fireEvent.click(closeBtn);
-    expect(document.querySelector(".ttd-dialog")).toBe(null);
-    expect(window.h.state.activeTool).toStrictEqual({
-      customType: null,
-      lastActiveTool: null,
-      locked: false,
-      type: "selection",
-    });
-  });
-
   it("should show error in preview when mermaid library throws error", async () => {
     const dialog = document.querySelector(".ttd-dialog")!;
 

packages/excalidraw/tests/__snapshots__/MermaidToExcalidraw.test.tsx.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Test <MermaidToExcalidraw/> > should open mermaid popup when active tool is mermaid 1`] = `
-"<div class="Modal Dialog ttd-dialog" role="dialog" aria-modal="true" aria-labelledby="dialog-title" data-prevent-outside-click="true"><div class="Modal__background"></div><div class="Modal__content" style="--max-width: 1200px;" tabindex="0"><div class="Island"><button class="Dialog__close" title="Close" aria-label="Close"><svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" class="" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><g clip-path="url(#a)" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5 5 15M5 5l10 10"></path></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h20v20H0z"></path></clipPath></defs></svg></button><div class="Dialog__content"><div dir="ltr" data-orientation="horizontal" class="ttd-dialog-tabs-root"><p class="dialog-mermaid-title">Mermaid to Excalidraw</p><div data-state="active" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-:r0:-trigger-mermaid" id="radix-:r0:-content-mermaid" tabindex="0" class="ttd-dialog-content" style="animation-duration: 0s;"><div class="ttd-dialog-desc">Currently only <a href="https://mermaid.js.org/syntax/flowchart.html">Flowchart</a>,<a href="https://mermaid.js.org/syntax/sequenceDiagram.html"> Sequence, </a> and <a href="https://mermaid.js.org/syntax/classDiagram.html">Class </a>Diagrams are supported. The other types will be rendered as image in Excalidraw.</div><div class="ttd-dialog-panels"><div class="ttd-dialog-panel"><div class="ttd-dialog-panel__header"><label>Mermaid Syntax</label></div><textarea class="ttd-dialog-input" placeholder="Write Mermaid diagram defintion here...">flowchart TD
+"<div class="Modal Dialog ttd-dialog" role="dialog" aria-modal="true" aria-labelledby="dialog-title" data-prevent-outside-click="true"><div class="Modal__background"></div><div class="Modal__content" style="--max-width: 1200px;" tabindex="0"><div class="Island"><div class="Dialog__content"><div dir="ltr" data-orientation="horizontal" class="ttd-dialog-tabs-root"><p class="dialog-mermaid-title">Mermaid to Excalidraw</p><div data-state="active" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-:r0:-trigger-mermaid" id="radix-:r0:-content-mermaid" tabindex="0" class="ttd-dialog-content" style="animation-duration: 0s;"><div class="ttd-dialog-desc">Currently only <a href="https://mermaid.js.org/syntax/flowchart.html">Flowchart</a>,<a href="https://mermaid.js.org/syntax/sequenceDiagram.html"> Sequence, </a> and <a href="https://mermaid.js.org/syntax/classDiagram.html">Class </a>Diagrams are supported. The other types will be rendered as image in Excalidraw.</div><div class="ttd-dialog-panels"><div class="ttd-dialog-panel"><div class="ttd-dialog-panel__header"><label>Mermaid Syntax</label></div><textarea class="ttd-dialog-input" placeholder="Write Mermaid diagram defintion here...">flowchart TD
  A[Christmas] --&gt;|Get money| B(Go shopping)
  B --&gt; C{Let me think}
  C --&gt;|One| D[Laptop]

packages/excalidraw/types.ts

@@ -281,7 +281,8 @@ export interface AppState {
           | "settings"; // when AI settings dialog is explicitly invoked
         tab: "text-to-diagram" | "diagram-to-code";
       }
-    | { name: "ttd"; tab: "text-to-diagram" | "mermaid" };
+    | { name: "ttd"; tab: "text-to-diagram" | "mermaid" }
+    | { name: "commandPalette" };
   /**
    * Reflects user preference for whether the default sidebar should be docked.
    *
@@ -580,6 +581,7 @@ export type AppClassProperties = {
   addFiles: App["addFiles"];
   addElementsFromPasteOrLibrary: App["addElementsFromPasteOrLibrary"];
   togglePenMode: App["togglePenMode"];
+  toggleLock: App["toggleLock"];
   setActiveTool: App["setActiveTool"];
   setOpenDialog: App["setOpenDialog"];
   insertEmbeddableElement: App["insertEmbeddableElement"];

yarn.lock

@@ -1980,7 +1980,7 @@
   resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-6.0.2.tgz#6110f918d273fe2af8ea1c4398a88774bb9fc12f"
   integrity sha512-Tbsj02wXCbqGmzdnXNk0SOF19ChhRU70BsroIi4Pm6Ehp56in6vch94mfbdQ17DozxkL3BAVjbZ4Qc1a0HFRAg==
 
-"@braintree/sanitize-url@^6.0.2":
+"@braintree/sanitize-url@^6.0.1":
   version "6.0.4"
   resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-6.0.4.tgz#923ca57e173c6b232bbbb07347b1be982f03e783"
   integrity sha512-s3jaWicZd0pkP0jf5ysyHUI/RE7MHos6qlToFcGWXVp+ykHOy77OUMrfbgJ9it2C5bow7OIQwYYaHjk9XlBQ2A==
@@ -2147,13 +2147,13 @@
   resolved "https://registry.yarnpkg.com/@excalidraw/markdown-to-text/-/markdown-to-text-0.1.2.tgz#1703705e7da608cf478f17bfe96fb295f55a23eb"
   integrity sha512-1nDXBNAojfi3oSFwJswKREkFm5wrSjqay81QlyRv2pkITG/XYB5v+oChENVBQLcxQwX4IUATWvXM5BcaNhPiIg==
 
-"@excalidraw/mermaid-to-excalidraw@0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@excalidraw/mermaid-to-excalidraw/-/mermaid-to-excalidraw-0.2.0.tgz#1e0395cd2b1ce9f6898109f5dbf545f558f159cc"
-  integrity sha512-FR+Lw9dt+mQxsrmRL7YNU2wrlNXD16ZLyuNoKrPzPy+Ds3utzY1+/2UNeNu7FMSUO4hKdkrmyO+PDp9OvOhuKw==
+"@excalidraw/mermaid-to-excalidraw@0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@excalidraw/mermaid-to-excalidraw/-/mermaid-to-excalidraw-0.3.0.tgz#94c438133fc66db6b920e237abda5152b62e6cb0"
+  integrity sha512-eyFN8y2ES3HFtETZWZZBakkSB5ROfnHJeCLeBlMgrIk1fxbXpPtxlu2VwGNpqPjDiCfV5FYnx7FaZ4CRiVRVMg==
   dependencies:
     "@excalidraw/markdown-to-text" "0.1.2"
-    mermaid "10.2.3"
+    mermaid "10.9.0"
     nanoid "4.0.2"
 
 "@excalidraw/prettier-config@1.0.2":
@@ -2952,6 +2952,14 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
+"@rollup/pluginutils@^4.2.0":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.1.tgz#e6c6c3aba0744edce3fb2074922d3776c0af2a6d"
+  integrity sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==
+  dependencies:
+    estree-walker "^2.0.1"
+    picomatch "^2.2.2"
+
 "@rollup/pluginutils@^5.0.2":
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.0.2.tgz#012b8f53c71e4f6f9cb317e311df1404f56e7a33"
@@ -3295,6 +3303,23 @@
   resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.3.0.tgz#23509ebc1fa32f1b4d50d6a66c4032d5b8eaabdc"
   integrity sha512-/ceqdqeRraGolFTcfoXNiqjyQhZzbINDngeoAq9GoHa8PPK1yNzTaxWjA6BFWp5Ua9JpXEMSS4s5i9tS0hOJtw==
 
+"@types/d3-scale-chromatic@^3.0.0":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.0.3.tgz#fc0db9c10e789c351f4c42d96f31f2e4df8f5644"
+  integrity sha512-laXM4+1o5ImZv3RpFAsTRn3TEkzqkytiOY0Dz0sq5cnd1dtNlk6sHLon4OvqaiJb28T0S/TdsBI3Sjsy+keJrw==
+
+"@types/d3-scale@^4.0.3":
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-4.0.8.tgz#d409b5f9dcf63074464bf8ddfb8ee5a1f95945bb"
+  integrity sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==
+  dependencies:
+    "@types/d3-time" "*"
+
+"@types/d3-time@*":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-3.0.3.tgz#3c186bbd9d12b9d84253b6be6487ca56b54f88be"
+  integrity sha512-2p6olUZ4w3s+07q3Tm2dbiMZy5pCDfYwtLXXHUnVzXgQlZ/OyPtUz6OL382BkOuGlLXqfT+wqv8Fw2v8/0geBw==
+
 "@types/debug@^4.0.0":
   version "4.1.12"
   resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.12.tgz#a155f21690871953410df4b6b6f53187f0500917"
@@ -4569,6 +4594,11 @@ bl@^4.0.3:
     inherits "^2.0.4"
     readable-stream "^3.4.0"
 
+boolbase@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
+  integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -4669,6 +4699,14 @@ callsites@^3.0.0:
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
+camel-case@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-4.1.2.tgz#9728072a954f805228225a6deea6b38461e1bd5a"
+  integrity sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==
+  dependencies:
+    pascal-case "^3.1.2"
+    tslib "^2.0.3"
+
 camelcase@^6.2.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
@@ -4803,6 +4841,13 @@ ci-info@^3.2.0:
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.9.0.tgz#4279a62028a7b1f262f3473fc9605f5e218c59b4"
   integrity sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==
 
+clean-css@^5.2.2:
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-5.3.3.tgz#b330653cd3bd6b75009cc25c714cae7b93351ccd"
+  integrity sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==
+  dependencies:
+    source-map "~0.6.0"
+
 clean-stack@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
@@ -4940,6 +4985,16 @@ confusing-browser-globals@^1.0.11:
   resolved "https://registry.yarnpkg.com/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz#ae40e9b57cdd3915408a2805ebd3a5585608dc81"
   integrity sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==
 
+connect-history-api-fallback@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz#8b32089359308d111115d81cad3fceab888f97bc"
+  integrity sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==
+
+consola@^2.15.3:
+  version "2.15.3"
+  resolved "https://registry.yarnpkg.com/consola/-/consola-2.15.3.tgz#2e11f98d6a4be71ff72e0bdf07bd23e12cb61550"
+  integrity sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw==
+
 convert-source-map@^1.6.0, convert-source-map@^1.7.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
@@ -4986,13 +5041,6 @@ cose-base@^1.0.0:
   dependencies:
     layout-base "^1.0.0"
 
-cose-base@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/cose-base/-/cose-base-2.2.0.tgz#1c395c35b6e10bb83f9769ca8b817d614add5c01"
-  integrity sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==
-  dependencies:
-    layout-base "^2.0.0"
-
 cosmiconfig@^7.0.0, cosmiconfig@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6"
@@ -5051,6 +5099,22 @@ css-loader@6.7.1:
     postcss-value-parser "^4.2.0"
     semver "^7.3.5"
 
+css-select@^4.2.1:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.3.0.tgz#db7129b2846662fd8628cfc496abb2b59e41529b"
+  integrity sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==
+  dependencies:
+    boolbase "^1.0.0"
+    css-what "^6.0.1"
+    domhandler "^4.3.1"
+    domutils "^2.8.0"
+    nth-check "^2.0.1"
+
+css-what@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
+  integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
+
 css.escape@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
@@ -5094,21 +5158,21 @@ cytoscape-cose-bilkent@^4.1.0:
   dependencies:
     cose-base "^1.0.0"
 
-cytoscape-fcose@^2.1.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/cytoscape-fcose/-/cytoscape-fcose-2.2.0.tgz#e4d6f6490df4fab58ae9cea9e5c3ab8d7472f471"
-  integrity sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==
-  dependencies:
-    cose-base "^2.2.0"
-
-cytoscape@^3.23.0:
-  version "3.27.0"
-  resolved "https://registry.yarnpkg.com/cytoscape/-/cytoscape-3.27.0.tgz#5141cd694570807c91075b609181bce102e0bb88"
-  integrity sha512-pPZJilfX9BxESwujODz5pydeGi+FBrXq1rcaB1mfhFXXFJ9GjE6CNndAk+8jPzoXGD+16LtSS4xlYEIUiW4Abg==
+cytoscape@^3.28.1:
+  version "3.28.1"
+  resolved "https://registry.yarnpkg.com/cytoscape/-/cytoscape-3.28.1.tgz#f32c3e009bdf32d47845a16a4cd2be2bbc01baf7"
+  integrity sha512-xyItz4O/4zp9/239wCcH8ZcFuuZooEeF8KHRmzjDfGdXsj3OG9MFSMA0pJE0uX3uCN/ygof6hHf4L7lst+JaDg==
   dependencies:
     heap "^0.2.6"
     lodash "^4.17.21"
 
+"d3-array@1 - 2":
+  version "2.12.1"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-2.12.1.tgz#e20b41aafcdffdf5d50928004ececf815a465e81"
+  integrity sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==
+  dependencies:
+    internmap "^1.0.0"
+
 "d3-array@2 - 3", "d3-array@2.10.0 - 3", "d3-array@2.5.0 - 3", d3-array@3, d3-array@^3.2.0:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.4.tgz#15fec33b237f97ac5d7c986dc77da273a8ed0bb5"
@@ -5225,6 +5289,11 @@ d3-hierarchy@3:
   dependencies:
     d3-color "1 - 3"
 
+d3-path@1:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.9.tgz#48c050bb1fe8c262493a8caf5524e3e9591701cf"
+  integrity sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==
+
 "d3-path@1 - 3", d3-path@3, d3-path@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-3.1.0.tgz#22df939032fb5a71ae8b1800d61ddb7851c42526"
@@ -5245,6 +5314,14 @@ d3-random@3:
   resolved "https://registry.yarnpkg.com/d3-random/-/d3-random-3.0.1.tgz#d4926378d333d9c0bfd1e6fa0194d30aebaa20f4"
   integrity sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==
 
+d3-sankey@^0.12.3:
+  version "0.12.3"
+  resolved "https://registry.yarnpkg.com/d3-sankey/-/d3-sankey-0.12.3.tgz#b3c268627bd72e5d80336e8de6acbfec9d15d01d"
+  integrity sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==
+  dependencies:
+    d3-array "1 - 2"
+    d3-shape "^1.2.0"
+
 d3-scale-chromatic@3:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz#15b4ceb8ca2bb0dcb6d1a641ee03d59c3b62376a"
@@ -5276,6 +5353,13 @@ d3-shape@3:
   dependencies:
     d3-path "^3.1.0"
 
+d3-shape@^1.2.0:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.3.7.tgz#df63801be07bc986bc54f63789b4fe502992b5d7"
+  integrity sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==
+  dependencies:
+    d3-path "1"
+
 "d3-time-format@2 - 4", d3-time-format@4:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-4.1.0.tgz#7ab5257a5041d11ecb4fe70a5c7d16a195bb408a"
@@ -5546,11 +5630,25 @@ dom-accessibility-api@^0.5.6, dom-accessibility-api@^0.5.9:
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz#5a7429e6066eb3664d911e33fb0e45de8eb08453"
   integrity sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==
 
+dom-serializer@^1.0.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.4.1.tgz#de5d41b1aea290215dc45a6dae8adcf1d32e2d30"
+  integrity sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^4.2.0"
+    entities "^2.0.0"
+
 dom-storage@2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/dom-storage/-/dom-storage-2.1.0.tgz#00fb868bc9201357ea243c7bcfd3304c1e34ea39"
   integrity sha512-g6RpyWXzl0RR6OTElHKBl7nwnK87GUyZMYC7JWsB/IA73vpqK2K6LT39x4VepLxlSsWBFrPVLnsSR5Jyty0+2Q==
 
+domelementtype@^2.0.1, domelementtype@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
+  integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
+
 domexception@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/domexception/-/domexception-1.0.1.tgz#937442644ca6a31261ef36e3ec677fe805582c90"
@@ -5565,16 +5663,50 @@ domexception@^4.0.0:
   dependencies:
     webidl-conversions "^7.0.0"
 
-dompurify@3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.0.3.tgz#4b115d15a091ddc96f232bcef668550a2f6f1430"
-  integrity sha512-axQ9zieHLnAnHh0sfAamKYiqXMJAVwu+LM/alQ7WDagoWessyWvMSFyW65CqF3owufNu8HBcE4cM2Vflu7YWcQ==
+domhandler@^4.2.0, domhandler@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.1.tgz#8d792033416f59d68bc03a5aa7b018c1ca89279c"
+  integrity sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==
+  dependencies:
+    domelementtype "^2.2.0"
+
+dompurify@^3.0.5:
+  version "3.0.11"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.0.11.tgz#c163f5816eaac6aeef35dae2b77fca0504564efe"
+  integrity sha512-Fan4uMuyB26gFV3ovPoEoQbxRRPfTu3CvImyZnhGq5fsIEO+gEFLp45ISFt+kQBWsK5ulDdT0oV28jS1UrwQLg==
+
+domutils@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
+  integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
+  dependencies:
+    dom-serializer "^1.0.1"
+    domelementtype "^2.2.0"
+    domhandler "^4.2.0"
+
+dot-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751"
+  integrity sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+
+dotenv-expand@^8.0.2:
+  version "8.0.3"
+  resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-8.0.3.tgz#29016757455bcc748469c83a19b36aaf2b83dd6e"
+  integrity sha512-SErOMvge0ZUyWd5B0NXMQlDkN+8r+HhVUsxgOO7IoPDOdDRD2JjExpN6y3KnFR66jsJMwSn1pqIivhU5rcJiNg==
 
 dotenv@16.0.1:
   version "16.0.1"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.0.1.tgz#8f8f9d94876c35dac989876a5d3a82a267fdce1d"
   integrity sha512-1K6hR6wtk2FviQ4kEiSjFiH5rpzEVi8WW0x96aztHVMhEspNpc4DVOUTEHtEva5VThQ8IaBX1Pe4gSzpVVUsKQ==
 
+dotenv@^16.0.0:
+  version "16.4.5"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.4.5.tgz#cdd3b3b604cb327e286b4762e13502f717cb099f"
+  integrity sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==
+
 duplexer@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
@@ -5602,10 +5734,10 @@ electron-to-chromium@^1.4.601:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.608.tgz#ff567c51dde4892ae330860c7d9f19571e9e1d69"
   integrity sha512-J2f/3iIIm3Mo0npneITZ2UPe4B1bg8fTNrFjD8715F/k1BvbviRuqYGkET1PgprrczXYTHFvotbBOmUp6KE0uA==
 
-elkjs@^0.8.2:
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/elkjs/-/elkjs-0.8.2.tgz#c37763c5a3e24e042e318455e0147c912a7c248e"
-  integrity sha512-L6uRgvZTH+4OF5NE/MBbzQx/WYpru1xCBE9respNj6qznEewGUIfhzmm7horWWxbNO2M0WckQypGctR8lH79xQ==
+elkjs@^0.9.0:
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/elkjs/-/elkjs-0.9.2.tgz#3d4ef6f17fde06a5d7eaa3063bb875e25e59e972"
+  integrity sha512-2Y/RaA1pdgSHpY0YG4TYuYCD2wh97CRvu22eLG3Kz0pgQ/6KbIFTxsTnDc4MH/6hFlg2L/9qXrDMG0nMjP63iw==
 
 emoji-regex@^8.0.0:
   version "8.0.0"
@@ -5660,6 +5792,11 @@ enquirer@^2.3.5:
   dependencies:
     ansi-colors "^4.1.1"
 
+entities@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
+  integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
+
 entities@^4.4.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
@@ -6098,7 +6235,7 @@ estree-walker@^1.0.1:
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700"
   integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==
 
-estree-walker@^2.0.2:
+estree-walker@^2.0.1, estree-walker@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
   integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
@@ -6187,6 +6324,17 @@ fast-diff@^1.1.2:
   resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
   integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
 
+fast-glob@^3.2.11, fast-glob@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
+  integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
 fast-glob@^3.2.12, fast-glob@^3.2.9:
   version "3.2.12"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
@@ -6209,17 +6357,6 @@ fast-glob@^3.2.7:
     merge2 "^1.3.0"
     micromatch "^4.0.4"
 
-fast-glob@^3.3.2:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
-  integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
-  dependencies:
-    "@nodelib/fs.stat" "^2.0.2"
-    "@nodelib/fs.walk" "^1.2.3"
-    glob-parent "^5.1.2"
-    merge2 "^1.3.0"
-    micromatch "^4.0.4"
-
 fast-json-stable-stringify@^2.0.0, fast-json-stable-stringify@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
@@ -6381,6 +6518,15 @@ fs-constants@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
   integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==
 
+fs-extra@^10.0.1:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.1.0.tgz#02873cfbc4084dde127eaa5f9905eef2325d1abf"
+  integrity sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==
+  dependencies:
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
+
 fs-extra@^11.1.0:
   version "11.1.1"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-11.1.1.tgz#da69f7c39f3b002378b0954bb6ae7efdc0876e2d"
@@ -6440,6 +6586,11 @@ functions-have-names@^1.2.2:
   resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
   integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
 
+fuzzy@0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/fuzzy/-/fuzzy-0.1.3.tgz#4c76ec2ff0ac1a36a9dccf9a00df8623078d4ed8"
+  integrity sha512-/gZffu4ykarLrCiP3Ygsa86UAo1E5vEVlvTrpkKywXSbP9Xhln3oSp9QSV57gEq3JFFpGJ4GZ+5zdEp3FcUh4w==
+
 gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
@@ -6658,7 +6809,7 @@ hasown@^2.0.0:
   dependencies:
     function-bind "^1.1.2"
 
-he@^1.2.0:
+he@1.2.0, he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
@@ -6680,6 +6831,19 @@ html-escaper@^2.0.0:
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
   integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
 
+html-minifier-terser@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#bfc818934cc07918f6b3669f5774ecdfd48f32ab"
+  integrity sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==
+  dependencies:
+    camel-case "^4.1.2"
+    clean-css "^5.2.2"
+    commander "^8.3.0"
+    he "^1.2.0"
+    param-case "^3.0.4"
+    relateurl "^0.2.7"
+    terser "^5.10.0"
+
 http-parser-js@>=0.5.1:
   version "0.5.8"
   resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.5.8.tgz#af23090d9ac4e24573de6f6aecc9d84a48bf20e3"
@@ -6871,6 +7035,11 @@ internal-slot@^1.0.3, internal-slot@^1.0.4, internal-slot@^1.0.5:
   resolved "https://registry.yarnpkg.com/internmap/-/internmap-2.0.3.tgz#6685f23755e43c524e251d29cbc97248e3061009"
   integrity sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==
 
+internmap@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/internmap/-/internmap-1.0.1.tgz#0017cc8a3b99605f0302f2b198d272e015e5df95"
+  integrity sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==
+
 interpret@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-2.2.0.tgz#1a78a0b5965c40a5416d007ad6f50ad27c417df9"
@@ -7381,6 +7550,13 @@ jsonpointer@^5.0.0:
     array-includes "^3.1.5"
     object.assign "^4.1.3"
 
+katex@^0.16.9:
+  version "0.16.10"
+  resolved "https://registry.yarnpkg.com/katex/-/katex-0.16.10.tgz#6f81b71ac37ff4ec7556861160f53bc5f058b185"
+  integrity sha512-ZiqaC04tp2O5utMsl2TEZTXxa6WSC4yo0fv5ML++D3QZv/vx2Mct0mTlRx3O+uUkjfuAgOkzsCmq5MiUEsDDdA==
+  dependencies:
+    commander "^8.3.0"
+
 khroma@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/khroma/-/khroma-2.1.0.tgz#45f2ce94ce231a437cf5b63c2e886e6eb42bbbb1"
@@ -7418,11 +7594,6 @@ layout-base@^1.0.0:
   resolved "https://registry.yarnpkg.com/layout-base/-/layout-base-1.0.2.tgz#1291e296883c322a9dd4c5dd82063721b53e26e2"
   integrity sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==
 
-layout-base@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/layout-base/-/layout-base-2.0.1.tgz#d0337913586c90f9c2c075292069f5c2da5dd285"
-  integrity sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==
-
 leven@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
@@ -7614,6 +7785,13 @@ loupe@^2.3.7:
   dependencies:
     get-func-name "^2.0.1"
 
+lower-case@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28"
+  integrity sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==
+  dependencies:
+    tslib "^2.0.3"
+
 lru-cache@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
@@ -7710,20 +7888,23 @@ merge2@^1.3.0, merge2@^1.4.1:
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
-mermaid@10.2.3:
-  version "10.2.3"
-  resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-10.2.3.tgz#789d3b582c5da8c69aa4a7c0e2b826562c8c8b12"
-  integrity sha512-cMVE5s9PlQvOwfORkyVpr5beMsLdInrycAosdr+tpZ0WFjG4RJ/bUHST7aTgHNJbujHkdBRAm+N50P3puQOfPw==
+mermaid@10.9.0:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-10.9.0.tgz#4d1272fbe434bd8f3c2c150554dc8a23a9bf9361"
+  integrity sha512-swZju0hFox/B/qoLKK0rOxxgh8Cf7rJSfAUc1u8fezVihYMvrJAS45GzAxTVf4Q+xn9uMgitBcmWk7nWGXOs/g==
   dependencies:
-    "@braintree/sanitize-url" "^6.0.2"
-    cytoscape "^3.23.0"
+    "@braintree/sanitize-url" "^6.0.1"
+    "@types/d3-scale" "^4.0.3"
+    "@types/d3-scale-chromatic" "^3.0.0"
+    cytoscape "^3.28.1"
     cytoscape-cose-bilkent "^4.1.0"
-    cytoscape-fcose "^2.1.0"
     d3 "^7.4.0"
+    d3-sankey "^0.12.3"
     dagre-d3-es "7.0.10"
     dayjs "^1.11.7"
-    dompurify "3.0.3"
-    elkjs "^0.8.2"
+    dompurify "^3.0.5"
+    elkjs "^0.9.0"
+    katex "^0.16.9"
     khroma "^2.0.0"
     lodash-es "^4.17.21"
     mdast-util-from-markdown "^1.3.0"
@@ -8125,6 +8306,14 @@ next@14.1:
     "@next/swc-win32-ia32-msvc" "14.1.0"
     "@next/swc-win32-x64-msvc" "14.1.0"
 
+no-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.4.tgz#d361fd5c9800f558551a8369fc0dcd4662b6124d"
+  integrity sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==
+  dependencies:
+    lower-case "^2.0.2"
+    tslib "^2.0.3"
+
 node-fetch@2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
@@ -8137,6 +8326,14 @@ node-fetch@2.6.7:
   dependencies:
     whatwg-url "^5.0.0"
 
+node-html-parser@^5.3.3:
+  version "5.4.2"
+  resolved "https://registry.yarnpkg.com/node-html-parser/-/node-html-parser-5.4.2.tgz#93e004038c17af80226c942336990a0eaed8136a"
+  integrity sha512-RaBPP3+51hPne/OolXxcz89iYvQvKOydaqoePpOgXcrOKZhjVIzmpKZz+Hd/RBO2/zN2q6CNJhQzucVz+u3Jyw==
+  dependencies:
+    css-select "^4.2.1"
+    he "1.2.0"
+
 node-releases@^2.0.14:
   version "2.0.14"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.14.tgz#2ffb053bceb8b2be8495ece1ab6ce600c4461b0b"
@@ -8176,6 +8373,13 @@ npm-run-path@^5.1.0:
   dependencies:
     path-key "^4.0.0"
 
+nth-check@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"
+  integrity sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==
+  dependencies:
+    boolbase "^1.0.0"
+
 nwsapi@^2.2.4:
   version "2.2.5"
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.5.tgz#a52744c61b3889dd44b0a158687add39b8d935e2"
@@ -8330,6 +8534,14 @@ pako@1.0.11:
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
   integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
 
+param-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/param-case/-/param-case-3.0.4.tgz#7d17fe4aa12bde34d4a77d91acfb6219caad01c5"
+  integrity sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==
+  dependencies:
+    dot-case "^3.0.4"
+    tslib "^2.0.3"
+
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -8354,6 +8566,14 @@ parse5@^7.1.2:
   dependencies:
     entities "^4.4.0"
 
+pascal-case@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/pascal-case/-/pascal-case-3.1.2.tgz#b48e0ef2b98e205e7c1dae747d0b1508237660eb"
+  integrity sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+
 path-data-parser@0.1.0, path-data-parser@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/path-data-parser/-/path-data-parser-0.1.0.tgz#8f5ba5cc70fc7becb3dcefaea08e2659aba60b8c"
@@ -8394,6 +8614,11 @@ path2d-polyfill@2.0.1:
   resolved "https://registry.yarnpkg.com/path2d-polyfill/-/path2d-polyfill-2.0.1.tgz#24c554a738f42700d6961992bf5f1049672f2391"
   integrity sha512-ad/3bsalbbWhmBo0D6FZ4RNMwsLsPpL6gnvhuSaU5Vm7b06Kr5ubSltQQ0T7YKsiJQO+g22zJ4dJKNTXIyOXtA==
 
+pathe@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/pathe/-/pathe-0.2.0.tgz#30fd7bbe0a0d91f0e60bae621f5d19e9e225c339"
+  integrity sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==
+
 pathe@^1.1.0, pathe@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/pathe/-/pathe-1.1.1.tgz#1dd31d382b974ba69809adc9a7a347e65d84829a"
@@ -8925,6 +9150,11 @@ regjsparser@^0.9.1:
   dependencies:
     jsesc "~0.5.0"
 
+relateurl@^0.2.7:
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
+  integrity sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==
+
 require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
@@ -9386,7 +9616,7 @@ source-map-support@~0.5.20:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
-source-map@^0.6.0, source-map@^0.6.1:
+source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
@@ -9723,6 +9953,16 @@ terser@^5.0.0:
     commander "^2.20.0"
     source-map-support "~0.5.20"
 
+terser@^5.10.0:
+  version "5.30.0"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.30.0.tgz#64cb2af71e16ea3d32153f84d990f9be0cdc22bf"
+  integrity sha512-Y/SblUl5kEyEFzhMAQdsxVHh+utAxd4IuRNJzKywY/4uzSogh3G219jqbDDxYu4MXO9CzY3tSEqmZvW6AoEDJw==
+  dependencies:
+    "@jridgewell/source-map" "^0.3.3"
+    acorn "^8.8.2"
+    commander "^2.20.0"
+    source-map-support "~0.5.20"
+
 terser@^5.16.8:
   version "5.26.0"
   resolved "https://registry.yarnpkg.com/terser/-/terser-5.26.0.tgz#ee9f05d929f4189a9c28a0feb889d96d50126fe1"
@@ -9865,7 +10105,7 @@ tslib@^1.8.1, tslib@^1.9.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.0, tslib@^2.4.0:
+tslib@^2.0.0, tslib@^2.0.3, tslib@^2.4.0:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
@@ -10177,6 +10417,24 @@ vite-plugin-ejs@1.7.0:
   dependencies:
     ejs "^3.1.9"
 
+vite-plugin-html@3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/vite-plugin-html/-/vite-plugin-html-3.2.2.tgz#661834fa09015d3fda48ba694dbaa809396f5f7a"
+  integrity sha512-vb9C9kcdzcIo/Oc3CLZVS03dL5pDlOFuhGlZYDCJ840BhWl/0nGeZWf3Qy7NlOayscY4Cm/QRgULCQkEZige5Q==
+  dependencies:
+    "@rollup/pluginutils" "^4.2.0"
+    colorette "^2.0.16"
+    connect-history-api-fallback "^1.6.0"
+    consola "^2.15.3"
+    dotenv "^16.0.0"
+    dotenv-expand "^8.0.2"
+    ejs "^3.1.6"
+    fast-glob "^3.2.11"
+    fs-extra "^10.0.1"
+    html-minifier-terser "^6.1.0"
+    node-html-parser "^5.3.3"
+    pathe "^0.2.0"
+
 vite-plugin-pwa@0.17.4:
   version "0.17.4"
   resolved "https://registry.yarnpkg.com/vite-plugin-pwa/-/vite-plugin-pwa-0.17.4.tgz#be3b3714d4148681bc73e8e0b1e6ce1a71fa79f2"