@myoc/excalidraw 0.19.504 → 0.19.506

package/dist/dev/index.js

@@ -64,10 +64,10 @@ import {
   serializeAsJSON,
   serializeLibraryAsJSON,
   strokeRectWithRotation_simple
-} from "./chunk-Z5DMFRJ5.js";
+} from "./chunk-CUCA2WKB.js";
 import {
   define_import_meta_env_default
-} from "./chunk-OF725VHI.js";
+} from "./chunk-KCN2IL3S.js";
 import {
   en_default
 } from "./chunk-KLM3KPI7.js";
@@ -110,12 +110,12 @@ import {
 } from "@excalidraw/math";
 import {
   COLOR_PALETTE as COLOR_PALETTE7,
-  CODES as CODES13,
+  CODES as CODES11,
   shouldResizeFromCenter,
   shouldMaintainAspectRatio,
   shouldRotateWithDiscreteAngle as shouldRotateWithDiscreteAngle3,
   isArrowKey as isArrowKey2,
-  KEYS as KEYS53,
+  KEYS as KEYS51,
   APP_NAME as APP_NAME2,
   CURSOR_TYPE as CURSOR_TYPE4,
   DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT,
@@ -9502,7 +9502,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-ZR5DXOGS.js").then(
+        (blob2) => import("./data/image-KG7C5ZXU.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -9951,8 +9951,6 @@ import {
   DEFAULT_FONT_SIZE as DEFAULT_FONT_SIZE2,
   DEFAULT_FONT_FAMILY as DEFAULT_FONT_FAMILY2,
   DEFAULT_TEXT_ALIGN,
-  CODES as CODES3,
-  KEYS as KEYS16,
   getLineHeight as getLineHeight2
 } from "@excalidraw/common";
 import { newElementWith as newElementWith4 } from "@excalidraw/element";
@@ -9997,8 +9995,7 @@ var actionCopyStyles = register({
       },
       captureUpdate: CaptureUpdateAction10.EVENTUALLY
     };
-  },
-  keyTest: (event) => event[KEYS16.CTRL_OR_CMD] && event.altKey && event.code === CODES3.C
+  }
 });
 var actionPasteStyles = register({
   name: "pasteStyles",
@@ -10074,12 +10071,11 @@ var actionPasteStyles = register({
       }),
       captureUpdate: CaptureUpdateAction10.IMMEDIATELY
     };
-  },
-  keyTest: (event) => event[KEYS16.CTRL_OR_CMD] && event.altKey && event.code === CODES3.V
+  }
 });
 
 // actions/actionMenu.tsx
-import { KEYS as KEYS17 } from "@excalidraw/common";
+import { KEYS as KEYS16 } from "@excalidraw/common";
 import { CaptureUpdateAction as CaptureUpdateAction11 } from "@excalidraw/element";
 var actionShortcuts = register({
   name: "toggleShortcuts",
@@ -10103,7 +10099,7 @@ var actionShortcuts = register({
       captureUpdate: CaptureUpdateAction11.EVENTUALLY
     };
   },
-  keyTest: (event) => event.key === KEYS17.QUESTION_MARK
+  keyTest: (event) => event.key === KEYS16.QUESTION_MARK
 });
 
 // actions/actionGroup.tsx
@@ -10119,7 +10115,7 @@ import {
   removeElementsFromFrame,
   replaceAllElementsInFrame
 } from "@excalidraw/element";
-import { KEYS as KEYS18, randomId, arrayToMap as arrayToMap6 } from "@excalidraw/common";
+import { KEYS as KEYS17, randomId, arrayToMap as arrayToMap6 } from "@excalidraw/common";
 import {
   getSelectedGroupIds,
   selectGroup,
@@ -10247,7 +10243,7 @@ var actionGroup = register({
     };
   },
   predicate: (elements, appState, _, app) => enableActionGroup(elements, appState, app),
-  keyTest: (event) => !event.shiftKey && event[KEYS18.CTRL_OR_CMD] && event.key === KEYS18.G,
+  keyTest: (event) => !event.shiftKey && event[KEYS17.CTRL_OR_CMD] && event.key === KEYS17.G,
   PanelComponent: ({ elements, appState, updateData, app }) => /* @__PURE__ */ jsx43(
     ToolButton,
     {
@@ -10338,7 +10334,7 @@ var actionUngroup = register({
       captureUpdate: CaptureUpdateAction12.IMMEDIATELY
     };
   },
-  keyTest: (event) => event.shiftKey && event[KEYS18.CTRL_OR_CMD] && event.key === KEYS18.G.toUpperCase(),
+  keyTest: (event) => event.shiftKey && event[KEYS17.CTRL_OR_CMD] && event.key === KEYS17.G.toUpperCase(),
   predicate: (elements, appState) => getSelectedGroupIds(appState).length > 0,
   PanelComponent: ({ elements, appState, updateData }) => /* @__PURE__ */ jsx43(
     ToolButton,
@@ -10778,7 +10774,7 @@ var actionAddToLibrary = register({
 import { getNonDeletedElements as getNonDeletedElements9 } from "@excalidraw/element";
 import { isFrameLikeElement as isFrameLikeElement5 } from "@excalidraw/element";
 import { updateFrameMembershipOfSelectedElements } from "@excalidraw/element";
-import { KEYS as KEYS19, arrayToMap as arrayToMap7 } from "@excalidraw/common";
+import { KEYS as KEYS18, arrayToMap as arrayToMap7 } from "@excalidraw/common";
 import { alignElements } from "@excalidraw/element";
 import { CaptureUpdateAction as CaptureUpdateAction15 } from "@excalidraw/element";
 import { getSelectedElementsByGroup } from "@excalidraw/element";
@@ -10823,7 +10819,7 @@ var actionAlignTop = register({
       captureUpdate: CaptureUpdateAction15.IMMEDIATELY
     };
   },
-  keyTest: (event) => event[KEYS19.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS19.ARROW_UP,
+  keyTest: (event) => event[KEYS18.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS18.ARROW_UP,
   PanelComponent: ({ elements, appState, updateData, app }) => /* @__PURE__ */ jsx46(
     ToolButton,
     {
@@ -10855,7 +10851,7 @@ var actionAlignBottom = register({
       captureUpdate: CaptureUpdateAction15.IMMEDIATELY
     };
   },
-  keyTest: (event) => event[KEYS19.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS19.ARROW_DOWN,
+  keyTest: (event) => event[KEYS18.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS18.ARROW_DOWN,
   PanelComponent: ({ elements, appState, updateData, app }) => /* @__PURE__ */ jsx46(
     ToolButton,
     {
@@ -10887,7 +10883,7 @@ var actionAlignLeft = register({
       captureUpdate: CaptureUpdateAction15.IMMEDIATELY
     };
   },
-  keyTest: (event) => event[KEYS19.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS19.ARROW_LEFT,
+  keyTest: (event) => event[KEYS18.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS18.ARROW_LEFT,
   PanelComponent: ({ elements, appState, updateData, app }) => /* @__PURE__ */ jsx46(
     ToolButton,
     {
@@ -10919,7 +10915,7 @@ var actionAlignRight = register({
       captureUpdate: CaptureUpdateAction15.IMMEDIATELY
     };
   },
-  keyTest: (event) => event[KEYS19.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS19.ARROW_RIGHT,
+  keyTest: (event) => event[KEYS18.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS18.ARROW_RIGHT,
   PanelComponent: ({ elements, appState, updateData, app }) => /* @__PURE__ */ jsx46(
     ToolButton,
     {
@@ -10997,7 +10993,7 @@ var actionAlignHorizontallyCentered = register({
 // actions/actionDistribute.tsx
 import { getNonDeletedElements as getNonDeletedElements10 } from "@excalidraw/element";
 import { isFrameLikeElement as isFrameLikeElement6 } from "@excalidraw/element";
-import { CODES as CODES4, KEYS as KEYS20, arrayToMap as arrayToMap8 } from "@excalidraw/common";
+import { CODES as CODES3, KEYS as KEYS19, arrayToMap as arrayToMap8 } from "@excalidraw/common";
 import { updateFrameMembershipOfSelectedElements as updateFrameMembershipOfSelectedElements2 } from "@excalidraw/element";
 import { distributeElements } from "@excalidraw/element";
 import { CaptureUpdateAction as CaptureUpdateAction16 } from "@excalidraw/element";
@@ -11042,7 +11038,7 @@ var distributeHorizontally = register({
       captureUpdate: CaptureUpdateAction16.IMMEDIATELY
     };
   },
-  keyTest: (event) => !event[KEYS20.CTRL_OR_CMD] && event.altKey && event.code === CODES4.H,
+  keyTest: (event) => !event[KEYS19.CTRL_OR_CMD] && event.altKey && event.code === CODES3.H,
   PanelComponent: ({ elements, appState, updateData, app }) => /* @__PURE__ */ jsx47(
     ToolButton,
     {
@@ -11072,7 +11068,7 @@ var distributeVertically = register({
       captureUpdate: CaptureUpdateAction16.IMMEDIATELY
     };
   },
-  keyTest: (event) => !event[KEYS20.CTRL_OR_CMD] && event.altKey && event.code === CODES4.V,
+  keyTest: (event) => !event[KEYS19.CTRL_OR_CMD] && event.altKey && event.code === CODES3.V,
   PanelComponent: ({ elements, appState, updateData, app }) => /* @__PURE__ */ jsx47(
     ToolButton,
     {
@@ -11088,7 +11084,7 @@ var distributeVertically = register({
 });
 
 // actions/actionArrange.tsx
-import { arrayToMap as arrayToMap9, KEYS as KEYS21, matchKey } from "@excalidraw/common";
+import { arrayToMap as arrayToMap9, KEYS as KEYS20, matchKey } from "@excalidraw/common";
 import { CaptureUpdateAction as CaptureUpdateAction17 } from "@excalidraw/element";
 import { updateFrameMembershipOfSelectedElements as updateFrameMembershipOfSelectedElements3 } from "@excalidraw/element/frame";
 import { arrangeElements } from "@excalidraw/element/arrange";
@@ -11156,7 +11152,7 @@ var actionArrangeElements = register({
       captureUpdate: CaptureUpdateAction17.IMMEDIATELY
     };
   },
-  keyTest: (event) => event.shiftKey && matchKey(event, KEYS21.R),
+  keyTest: (event) => event.shiftKey && matchKey(event, KEYS20.R),
   PanelComponent: ({ updateData }) => /* @__PURE__ */ jsx48(
     "button",
     {
@@ -11233,7 +11229,7 @@ import { deepCopyElement as deepCopyElement3 } from "@excalidraw/element";
 import { resizeMultipleElements } from "@excalidraw/element";
 import { isArrowElement as isArrowElement3, isElbowArrow as isElbowArrow3 } from "@excalidraw/element";
 import { updateFrameMembershipOfSelectedElements as updateFrameMembershipOfSelectedElements5 } from "@excalidraw/element";
-import { CODES as CODES5, KEYS as KEYS22, arrayToMap as arrayToMap11 } from "@excalidraw/common";
+import { CODES as CODES4, KEYS as KEYS21, arrayToMap as arrayToMap11 } from "@excalidraw/common";
 import { CaptureUpdateAction as CaptureUpdateAction19 } from "@excalidraw/element";
 var actionFlipHorizontal = register({
   name: "flipHorizontal",
@@ -11257,7 +11253,7 @@ var actionFlipHorizontal = register({
       captureUpdate: CaptureUpdateAction19.IMMEDIATELY
     };
   },
-  keyTest: (event) => event.shiftKey && event.code === CODES5.H
+  keyTest: (event) => event.shiftKey && event.code === CODES4.H
 });
 var actionFlipVertical = register({
   name: "flipVertical",
@@ -11281,7 +11277,7 @@ var actionFlipVertical = register({
       captureUpdate: CaptureUpdateAction19.IMMEDIATELY
     };
   },
-  keyTest: (event) => event.shiftKey && event.code === CODES5.V && !event[KEYS22.CTRL_OR_CMD]
+  keyTest: (event) => event.shiftKey && event.code === CODES4.V && !event[KEYS21.CTRL_OR_CMD]
 });
 var flipSelectedElements = (elements, elementsMap, appState, flipDirection, app) => {
   const selectedElements = getSelectedElements(
@@ -11363,7 +11359,7 @@ var flipElements = (selectedElements, elementsMap, flipDirection, app) => {
 // actions/actionClipboard.tsx
 import { isTextElement as isTextElement4 } from "@excalidraw/element";
 import { getTextFromElements } from "@excalidraw/element";
-import { CODES as CODES6, KEYS as KEYS23, isFirefox as isFirefox2 } from "@excalidraw/common";
+import { CODES as CODES5, KEYS as KEYS22, isFirefox as isFirefox2 } from "@excalidraw/common";
 import { CaptureUpdateAction as CaptureUpdateAction20 } from "@excalidraw/element";
 var actionCopy = register({
   name: "copy",
@@ -11452,7 +11448,7 @@ var actionCut = register({
     actionCopy.perform(elements, appState, event, app);
     return actionDeleteSelected.perform(elements, appState, null, app);
   },
-  keyTest: (event) => event[KEYS23.CTRL_OR_CMD] && event.key === KEYS23.X
+  keyTest: (event) => event[KEYS22.CTRL_OR_CMD] && event.key === KEYS22.X
 });
 var actionCopyAsSvg = register({
   name: "copyAsSvg",
@@ -11566,7 +11562,7 @@ var actionCopyAsPng = register({
   predicate: (elements) => {
     return probablySupportsClipboardBlob && elements.length > 0;
   },
-  keyTest: (event) => event.code === CODES6.C && event.altKey && event.shiftKey,
+  keyTest: (event) => event.code === CODES5.C && event.altKey && event.shiftKey,
   keywords: ["png", "clipboard", "copy"]
 });
 var copyText = register({
@@ -11597,7 +11593,7 @@ var copyText = register({
 });
 
 // actions/actionToggleGridMode.tsx
-import { CODES as CODES7, KEYS as KEYS24 } from "@excalidraw/common";
+import { CODES as CODES6, KEYS as KEYS23 } from "@excalidraw/common";
 import { CaptureUpdateAction as CaptureUpdateAction21 } from "@excalidraw/element";
 var actionToggleGridMode = register({
   name: "gridMode",
@@ -11623,11 +11619,10 @@ var actionToggleGridMode = register({
   predicate: (element, appState, props) => {
     return props.gridModeEnabled === void 0;
   },
-  keyTest: (event) => event[KEYS24.CTRL_OR_CMD] && event.code === CODES7.QUOTE
+  keyTest: (event) => event[KEYS23.CTRL_OR_CMD] && event.code === CODES6.QUOTE
 });
 
 // actions/actionToggleZenMode.tsx
-import { CODES as CODES8, KEYS as KEYS25 } from "@excalidraw/common";
 import { CaptureUpdateAction as CaptureUpdateAction22 } from "@excalidraw/element";
 var actionToggleZenMode = register({
   name: "zenMode",
@@ -11650,12 +11645,11 @@ var actionToggleZenMode = register({
   checked: (appState) => appState.zenModeEnabled,
   predicate: (elements, appState, appProps, app) => {
     return app.editorInterface.formFactor !== "phone" && typeof appProps.zenModeEnabled === "undefined";
-  },
-  keyTest: (event) => !event[KEYS25.CTRL_OR_CMD] && event.altKey && event.code === CODES8.Z
+  }
 });
 
 // actions/actionToggleObjectsSnapMode.tsx
-import { CODES as CODES9, KEYS as KEYS26 } from "@excalidraw/common";
+import { CODES as CODES7, KEYS as KEYS24 } from "@excalidraw/common";
 import { CaptureUpdateAction as CaptureUpdateAction23 } from "@excalidraw/element";
 var actionToggleObjectsSnapMode = register({
   name: "objectsSnapMode",
@@ -11680,7 +11674,7 @@ var actionToggleObjectsSnapMode = register({
   predicate: (elements, appState, appProps) => {
     return typeof appProps.objectsSnapModeEnabled === "undefined";
   },
-  keyTest: (event) => !event[KEYS26.CTRL_OR_CMD] && event.altKey && event.code === CODES9.S
+  keyTest: (event) => !event[KEYS24.CTRL_OR_CMD] && event.altKey && event.code === CODES7.S
 });
 
 // actions/actionToggleArrowBinding.tsx
@@ -11730,7 +11724,7 @@ var actionToggleMidpointSnapping = register({
 });
 
 // actions/actionToggleStats.tsx
-import { CODES as CODES10, KEYS as KEYS27 } from "@excalidraw/common";
+import { CODES as CODES8, KEYS as KEYS25 } from "@excalidraw/common";
 import { CaptureUpdateAction as CaptureUpdateAction26 } from "@excalidraw/element";
 var actionToggleStats = register({
   name: "stats",
@@ -11749,7 +11743,7 @@ var actionToggleStats = register({
     };
   },
   checked: (appState) => appState.stats.open,
-  keyTest: (event) => !event[KEYS27.CTRL_OR_CMD] && event.altKey && event.code === CODES10.SLASH
+  keyTest: (event) => !event[KEYS25.CTRL_OR_CMD] && event.altKey && event.code === CODES8.SLASH
 });
 
 // actions/actionBoundText.tsx
@@ -12020,7 +12014,7 @@ var actionWrapTextInContainer = register({
 
 // actions/actionLink.tsx
 import { isEmbeddableElement as isEmbeddableElement2 } from "@excalidraw/element";
-import { KEYS as KEYS29 } from "@excalidraw/common";
+import { KEYS as KEYS27 } from "@excalidraw/common";
 import { CaptureUpdateAction as CaptureUpdateAction28 } from "@excalidraw/element";
 
 // components/hyperlink/Hyperlink.tsx
@@ -12033,7 +12027,7 @@ import {
   useRef as useRef12,
   useState as useState10
 } from "react";
-import { EVENT as EVENT5, HYPERLINK_TOOLTIP_DELAY, KEYS as KEYS28 } from "@excalidraw/common";
+import { EVENT as EVENT5, HYPERLINK_TOOLTIP_DELAY, KEYS as KEYS26 } from "@excalidraw/common";
 import { getElementAbsoluteCoords } from "@excalidraw/element";
 import { hitElementBoundingBox } from "@excalidraw/element";
 import { isElementLink } from "@excalidraw/element";
@@ -12207,10 +12201,10 @@ var Hyperlink = ({
             autoFocus: true,
             onKeyDown: (event) => {
               event.stopPropagation();
-              if (event[KEYS28.CTRL_OR_CMD] && event.key === KEYS28.K) {
+              if (event[KEYS26.CTRL_OR_CMD] && event.key === KEYS26.K) {
                 event.preventDefault();
               }
-              if (event.key === KEYS28.ENTER || event.key === KEYS28.ESCAPE) {
+              if (event.key === KEYS26.ENTER || event.key === KEYS26.ESCAPE) {
                 handleSubmit();
                 setAppState({ showHyperlinkPopup: "info" });
               }
@@ -12402,7 +12396,7 @@ var actionLink = register({
     };
   },
   trackEvent: { category: "hyperlink", action: "click" },
-  keyTest: (event) => event[KEYS29.CTRL_OR_CMD] && event.key === KEYS29.K,
+  keyTest: (event) => event[KEYS27.CTRL_OR_CMD] && event.key === KEYS27.K,
   predicate: (elements, appState) => {
     const selectedElements = getSelectedElements(elements, appState);
     return selectedElements.length === 1;
@@ -12424,7 +12418,7 @@ var actionLink = register({
 });
 
 // actions/actionElementLock.ts
-import { KEYS as KEYS30, arrayToMap as arrayToMap13, randomId as randomId3 } from "@excalidraw/common";
+import { KEYS as KEYS28, arrayToMap as arrayToMap13, randomId as randomId3 } from "@excalidraw/common";
 import {
   elementsAreInSameGroup,
   newElementWith as newElementWith7,
@@ -12515,7 +12509,7 @@ var actionToggleElementLock = register({
     };
   },
   keyTest: (event, appState, elements, app) => {
-    return event.key.toLocaleLowerCase() === KEYS30.L && event[KEYS30.CTRL_OR_CMD] && event.shiftKey && app.scene.getSelectedElements({
+    return event.key.toLocaleLowerCase() === KEYS28.L && event[KEYS28.CTRL_OR_CMD] && event.shiftKey && app.scene.getSelectedElements({
       selectedElementIds: appState.selectedElementIds,
       includeBoundTextElement: false
     }).length > 0;
@@ -12590,7 +12584,7 @@ import { useEffect as useEffect28, useRef as useRef24, useMemo as useMemo9, useS
 import {
   DEFAULT_SIDEBAR as DEFAULT_SIDEBAR2,
   EVENT as EVENT9,
-  KEYS as KEYS37,
+  KEYS as KEYS35,
   capitalizeString as capitalizeString3,
   isWritableElement as isWritableElement3
 } from "@excalidraw/common";
@@ -13598,7 +13592,7 @@ var deburr = (str) => {
 // components/Dialog.tsx
 import clsx33 from "clsx";
 import { useEffect as useEffect26, useState as useState22 } from "react";
-import { KEYS as KEYS34, queryFocusableElements } from "@excalidraw/common";
+import { KEYS as KEYS32, queryFocusableElements } from "@excalidraw/common";
 
 // hooks/useCallbackRefState.ts
 import { useCallback as useCallback7, useState as useState12 } from "react";
@@ -13621,7 +13615,7 @@ import {
   LIBRARY_DISABLED_TYPES as LIBRARY_DISABLED_TYPES2,
   randomId as randomId4,
   isShallowEqual,
-  KEYS as KEYS32,
+  KEYS as KEYS30,
   isWritableElement as isWritableElement2,
   addEventListener,
   EVENT as EVENT8,
@@ -15199,7 +15193,7 @@ import { CLASSES as CLASSES3 } from "@excalidraw/common";
 // components/dropdownMenu/DropdownMenuContent.tsx
 import clsx24 from "clsx";
 import { useCallback as useCallback9, useEffect as useEffect22, useRef as useRef16 } from "react";
-import { CLASSES as CLASSES2, EVENT as EVENT7, KEYS as KEYS31 } from "@excalidraw/common";
+import { CLASSES as CLASSES2, EVENT as EVENT7, KEYS as KEYS29 } from "@excalidraw/common";
 import { DropdownMenu as DropdownMenuPrimitive2 } from "radix-ui";
 
 // components/Stack.tsx
@@ -15277,7 +15271,7 @@ var MenuContent = ({
       return;
     }
     const onKeyDown = (event) => {
-      if (event.key === KEYS31.ESCAPE) {
+      if (event.key === KEYS29.ESCAPE) {
         event.stopImmediatePropagation();
         callbacksRef.onClickOutside?.();
       }
@@ -16566,7 +16560,7 @@ var LibraryMenu = memo3(() => {
       document,
       EVENT8.KEYDOWN,
       (event) => {
-        if (event.key === KEYS32.ESCAPE && event.target instanceof HTMLElement) {
+        if (event.key === KEYS30.ESCAPE && event.target instanceof HTMLElement) {
           const target = event.target;
           if (target.closest(`.${CLASSES4.SIDEBAR}`)) {
             if (selectedItems.length > 0) {
@@ -16625,7 +16619,7 @@ var LibraryMenu = memo3(() => {
 import clsx32 from "clsx";
 import { useRef as useRef21 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { KEYS as KEYS33 } from "@excalidraw/common";
+import { KEYS as KEYS31 } from "@excalidraw/common";
 import { jsx as jsx75, jsxs as jsxs40 } from "react/jsx-runtime";
 var Modal = (props) => {
   const { closeOnClickOutside = true } = props;
@@ -16639,7 +16633,7 @@ var Modal = (props) => {
     return null;
   }
   const handleKeydown = (event) => {
-    if (event.key === KEYS33.ESCAPE) {
+    if (event.key === KEYS31.ESCAPE) {
       event.nativeEvent.stopImmediatePropagation();
       event.stopPropagation();
       props.onCloseRequest();
@@ -16712,7 +16706,7 @@ var Dialog = (props) => {
       }
     });
     const handleKeyDown = (event) => {
-      if (event.key === KEYS34.TAB) {
+      if (event.key === KEYS32.TAB) {
         const focusableElements2 = queryFocusableElements(islandNode);
         const { activeElement } = document;
         const currentIndex = focusableElements2.findIndex(
@@ -16776,7 +16770,7 @@ import { useMemo as useMemo8, useRef as useRef22, useState as useState24 } from
 import { Popover as Popover7 } from "radix-ui";
 import {
   CLASSES as CLASSES5,
-  KEYS as KEYS36,
+  KEYS as KEYS34,
   capitalizeString as capitalizeString2,
   isTransparent as isTransparent2
 } from "@excalidraw/common";
@@ -16795,7 +16789,7 @@ import {
 import { getToolbarTools, SHAPES } from "@excalidraw/element/shapes";
 
 // actions/actionToggleViewMode.tsx
-import { CODES as CODES11, KEYS as KEYS35 } from "@excalidraw/common";
+import { CODES as CODES9, KEYS as KEYS33 } from "@excalidraw/common";
 import clsx34 from "clsx";
 import { CaptureUpdateAction as CaptureUpdateAction32 } from "@excalidraw/element";
 import { jsx as jsx77 } from "react/jsx-runtime";
@@ -16821,7 +16815,7 @@ var actionToggleViewMode = register({
   predicate: (elements, appState, appProps) => {
     return typeof appProps.viewModeEnabled === "undefined";
   },
-  keyTest: (event) => !event[KEYS35.CTRL_OR_CMD] && event.altKey && event.code === CODES11.R,
+  keyTest: (event) => !event[KEYS33.CTRL_OR_CMD] && event.altKey && event.code === CODES9.R,
   PanelComponent: ({ data, updateData, appState }) => /* @__PURE__ */ jsx77(
     ToolButton,
     {
@@ -17830,7 +17824,7 @@ var ShapesSwitcher = ({
                 icon: app.state.activeTool.locked ? LockedIcon : UnlockedIcon,
                 "data-testid": `toolbar-lock`,
                 selected: app.state.activeTool.locked,
-                shortcut: KEYS36.Q,
+                shortcut: KEYS34.Q,
                 children: capitalizeString2(t("toolBar.lock-short"))
               }
             )
@@ -17942,7 +17936,7 @@ var CommandShortcutHint = ({
   ] });
 };
 var isCommandPaletteToggleShortcut = (event) => {
-  return !event.altKey && event[KEYS37.CTRL_OR_CMD] && (event.shiftKey && event.key.toLowerCase() === KEYS37.P || event.key === KEYS37.SLASH);
+  return !event.altKey && event[KEYS35.CTRL_OR_CMD] && (event.shiftKey && event.key.toLowerCase() === KEYS35.P || event.key === KEYS35.SLASH);
 };
 var CommandPalette = Object.assign(
   (props) => {
@@ -18068,8 +18062,6 @@ function CommandPaletteInner({
         actionManager.actions.copy,
         actionManager.actions.deleteSelectedElements,
         actionManager.actions.wrapSelectionInFrame,
-        actionManager.actions.copyStyles,
-        actionManager.actions.pasteStyles,
         actionManager.actions.bringToFront,
         actionManager.actions.bringForward,
         actionManager.actions.sendBackward,
@@ -18125,7 +18117,6 @@ function CommandPaletteInner({
         actionManager.actions.resetZoom,
         actionManager.actions.zoomToFit,
         actionManager.actions.smartZoom,
-        actionManager.actions.zenMode,
         actionManager.actions.viewMode,
         actionManager.actions.gridMode,
         actionManager.actions.objectsSnapMode,
@@ -18138,8 +18129,7 @@ function CommandPaletteInner({
       const exportCommands = [
         actionManager.actions.saveToActiveFile,
         actionManager.actions.saveFileToDisk,
-        actionManager.actions.copyAsPng,
-        actionManager.actions.copyAsSvg
+        actionManager.actions.copyAsPng
       ].map((action) => actionToCommand(action, DEFAULT_CATEGORIES.export));
       commandsFromActions = [
         ...elementsCommands,
@@ -18279,7 +18269,7 @@ function CommandPaletteInner({
           label: t("toolBar.lock"),
           category: DEFAULT_CATEGORIES.tools,
           icon: uiAppState2.activeTool.locked ? LockedIcon : UnlockedIcon,
-          shortcut: KEYS37.Q.toLocaleUpperCase(),
+          shortcut: KEYS35.Q.toLocaleUpperCase(),
           viewMode: false,
           perform: () => {
             app.toggleLock();
@@ -18355,13 +18345,13 @@ function CommandPaletteInner({
     }
   );
   const handleKeyDown = useStableCallback((event) => {
-    const ignoreAlphanumerics = isWritableElement3(event.target) || isCommandPaletteToggleShortcut(event) || event.key === KEYS37.ESCAPE;
-    if (ignoreAlphanumerics && event.key !== KEYS37.ARROW_UP && event.key !== KEYS37.ARROW_DOWN && event.key !== KEYS37.ENTER) {
+    const ignoreAlphanumerics = isWritableElement3(event.target) || isCommandPaletteToggleShortcut(event) || event.key === KEYS35.ESCAPE;
+    if (ignoreAlphanumerics && event.key !== KEYS35.ARROW_UP && event.key !== KEYS35.ARROW_DOWN && event.key !== KEYS35.ENTER) {
       return;
     }
     const matchingCommands = Object.values(commandsByCategory).flat();
     const shouldConsiderLastUsed = lastUsed && !commandSearch && isCommandAvailable(lastUsed);
-    if (event.key === KEYS37.ARROW_UP) {
+    if (event.key === KEYS35.ARROW_UP) {
       event.preventDefault();
       const index = matchingCommands.findIndex(
         (item) => item.label === currentCommand?.label
@@ -18391,7 +18381,7 @@ function CommandPaletteInner({
       }
       return;
     }
-    if (event.key === KEYS37.ARROW_DOWN) {
+    if (event.key === KEYS35.ARROW_DOWN) {
       event.preventDefault();
       const index = matchingCommands.findIndex(
         (item) => item.label === currentCommand?.label
@@ -18416,7 +18406,7 @@ function CommandPaletteInner({
       }
       return;
     }
-    if (event.key === KEYS37.ENTER) {
+    if (event.key === KEYS35.ENTER) {
       if (currentCommand) {
         setTimeout(() => {
           executeCommand(currentCommand, event);
@@ -18743,7 +18733,7 @@ import {
 } from "@excalidraw/math";
 import {
   DRAGGING_THRESHOLD,
-  KEYS as KEYS38,
+  KEYS as KEYS36,
   shouldRotateWithDiscreteAngle as shouldRotateWithDiscreteAngle2,
   getGridPoint,
   invariant as invariant11,
@@ -20285,7 +20275,7 @@ var actionTogglePolygon = register({
 
 // actions/actionToggleSearchMenu.ts
 import {
-  KEYS as KEYS39,
+  KEYS as KEYS37,
   CANVAS_SEARCH_TAB,
   CLASSES as CLASSES6,
   DEFAULT_SIDEBAR as DEFAULT_SIDEBAR3
@@ -20327,7 +20317,7 @@ var actionToggleSearchMenu = register({
   predicate: (element, appState, props) => {
     return props.gridModeEnabled === void 0;
   },
-  keyTest: (event) => event[KEYS39.CTRL_OR_CMD] && event.key === KEYS39.F
+  keyTest: (event) => event[KEYS37.CTRL_OR_CMD] && event.key === KEYS37.F
 });
 
 // actions/actionCropEditor.tsx
@@ -20550,7 +20540,7 @@ var actionWrapSelectionInFrame = register({
 // actions/actionHistory.tsx
 import {
   isWindows,
-  KEYS as KEYS40,
+  KEYS as KEYS38,
   matchKey as matchKey2,
   arrayToMap as arrayToMap25,
   MOBILE_ACTION_BUTTON_BG as MOBILE_ACTION_BUTTON_BG4
@@ -20781,7 +20771,7 @@ var createUndoAction = (history) => ({
     appState,
     () => history.undo(arrayToMap25(elements), appState)
   ),
-  keyTest: (event) => event[KEYS40.CTRL_OR_CMD] && matchKey2(event, KEYS40.Z) && !event.shiftKey,
+  keyTest: (event) => event[KEYS38.CTRL_OR_CMD] && matchKey2(event, KEYS38.Z) && !event.shiftKey,
   PanelComponent: ({ appState, updateData, data, app }) => {
     const { isUndoStackEmpty } = useEmitter(
       history.onHistoryChangedEmitter,
@@ -20819,7 +20809,7 @@ var createRedoAction = (history) => ({
     appState,
     () => history.redo(arrayToMap25(elements), appState)
   ),
-  keyTest: (event) => event[KEYS40.CTRL_OR_CMD] && event.shiftKey && matchKey2(event, KEYS40.Z) || isWindows && event.ctrlKey && !event.shiftKey && matchKey2(event, KEYS40.Y),
+  keyTest: (event) => event[KEYS38.CTRL_OR_CMD] && event.shiftKey && matchKey2(event, KEYS38.Z) || isWindows && event.ctrlKey && !event.shiftKey && matchKey2(event, KEYS38.Y),
   PanelComponent: ({ appState, updateData, data, app }) => {
     const { isRedoStackEmpty } = useEmitter(
       history.onHistoryChangedEmitter,
@@ -21091,7 +21081,7 @@ import {
   rangeIntersection,
   rangesOverlap
 } from "@excalidraw/math";
-import { TOOL_TYPE, KEYS as KEYS41 } from "@excalidraw/common";
+import { TOOL_TYPE, KEYS as KEYS39 } from "@excalidraw/common";
 import {
   getCommonBounds as getCommonBounds4,
   getDraggedElementsBounds,
@@ -21137,7 +21127,7 @@ var isSnappingEnabled = ({
 }) => {
   if (event) {
     const isLassoDragging = app.state.activeTool.type === "lasso" && app.state.selectedElementsAreBeingDragged;
-    return (app.state.activeTool.type !== "lasso" || isLassoDragging) && (app.state.objectsSnapModeEnabled && !event[KEYS41.CTRL_OR_CMD] || !app.state.objectsSnapModeEnabled && event[KEYS41.CTRL_OR_CMD] && !isGridModeEnabled(app));
+    return (app.state.activeTool.type !== "lasso" || isLassoDragging) && (app.state.objectsSnapModeEnabled && !event[KEYS39.CTRL_OR_CMD] || !app.state.objectsSnapModeEnabled && event[KEYS39.CTRL_OR_CMD] && !isGridModeEnabled(app));
   }
   if (selectedElements.length === 1 && selectedElements[0].type === "arrow") {
     return false;
@@ -22522,8 +22512,8 @@ var isPointHittingTextAutoResizeHandle = (point, textElement, zoomValue, formFac
 
 // wysiwyg/textWysiwyg.tsx
 import {
-  CODES as CODES12,
-  KEYS as KEYS42,
+  CODES as CODES10,
+  KEYS as KEYS40,
   CLASSES as CLASSES7,
   POINTER_BUTTON,
   THEME as THEME11,
@@ -22987,7 +22977,7 @@ var textWysiwyg = ({
       app.actionManager.executeAction(actionDecreaseFontSize);
     } else if (actionIncreaseFontSize.keyTest(event)) {
       app.actionManager.executeAction(actionIncreaseFontSize);
-    } else if (event.key === KEYS42.ESCAPE) {
+    } else if (event.key === KEYS40.ESCAPE) {
       event.preventDefault();
       submittedViaKeyboard = true;
       handleSubmit();
@@ -22995,18 +22985,18 @@ var textWysiwyg = ({
       event.preventDefault();
       handleSubmit();
       app.actionManager.executeAction(actionSaveToActiveFile);
-    } else if (event.key === KEYS42.ENTER && event[KEYS42.CTRL_OR_CMD]) {
+    } else if (event.key === KEYS40.ENTER && event[KEYS40.CTRL_OR_CMD]) {
       event.preventDefault();
       if (event.isComposing || event.keyCode === 229) {
         return;
       }
       submittedViaKeyboard = true;
       handleSubmit();
-    } else if (event.key === KEYS42.TAB || event[KEYS42.CTRL_OR_CMD] && (event.code === CODES12.BRACKET_LEFT || event.code === CODES12.BRACKET_RIGHT)) {
+    } else if (event.key === KEYS40.TAB || event[KEYS40.CTRL_OR_CMD] && (event.code === CODES10.BRACKET_LEFT || event.code === CODES10.BRACKET_RIGHT)) {
       event.preventDefault();
       if (event.isComposing) {
         return;
-      } else if (event.shiftKey || event.code === CODES12.BRACKET_LEFT) {
+      } else if (event.shiftKey || event.code === CODES10.BRACKET_LEFT) {
         outdent();
       } else {
         indent();
@@ -23561,7 +23551,7 @@ var LassoTrail = class extends AnimatedTrail {
 };
 
 // actions/actionSmartZoom.tsx
-import { KEYS as KEYS43 } from "@excalidraw/common";
+import { KEYS as KEYS41 } from "@excalidraw/common";
 import { CaptureUpdateAction as CaptureUpdateAction40 } from "@excalidraw/element/store";
 import { jsx as jsx86 } from "react/jsx-runtime";
 var actionSmartZoom = register({
@@ -23585,7 +23575,7 @@ var actionSmartZoom = register({
       captureUpdate: CaptureUpdateAction40.NEVER
     };
   },
-  keyTest: (event) => !event[KEYS43.CTRL_OR_CMD] && !event.shiftKey && !event.altKey && event.key.toLocaleLowerCase() === KEYS43.F,
+  keyTest: (event) => !event[KEYS41.CTRL_OR_CMD] && !event.shiftKey && !event.altKey && event.key.toLocaleLowerCase() === KEYS41.F,
   PanelComponent: ({ data, updateData }) => /* @__PURE__ */ jsx86(
     ToolButton,
     {
@@ -23595,7 +23585,7 @@ var actionSmartZoom = register({
       onClick: () => updateData(null),
       size: data?.size || "medium",
       "data-testid": "button-smart-zoom",
-      keyBindingLabel: KEYS43.F.toLocaleUpperCase()
+      keyBindingLabel: KEYS41.F.toLocaleUpperCase()
     }
   )
 });
@@ -24904,7 +24894,7 @@ import React29 from "react";
 // components/Popover.tsx
 import { useLayoutEffect as useLayoutEffect4, useRef as useRef25, useEffect as useEffect30 } from "react";
 import { unstable_batchedUpdates as unstable_batchedUpdates2 } from "react-dom";
-import { KEYS as KEYS44, queryFocusableElements as queryFocusableElements2 } from "@excalidraw/common";
+import { KEYS as KEYS42, queryFocusableElements as queryFocusableElements2 } from "@excalidraw/common";
 import clsx38 from "clsx";
 import { jsx as jsx88 } from "react/jsx-runtime";
 var Popover8 = ({
@@ -24929,7 +24919,7 @@ var Popover8 = ({
       container.focus();
     }
     const handleKeyDown = (event) => {
-      if (event.key === KEYS44.TAB) {
+      if (event.key === KEYS42.TAB) {
         const focusableElements = queryFocusableElements2(container);
         const { activeElement } = document;
         const currentIndex = focusableElements.findIndex(
@@ -25216,12 +25206,12 @@ var LoadingMessage = ({
 // components/MobileToolBar.tsx
 import { useState as useState28 } from "react";
 import clsx42 from "clsx";
-import { KEYS as KEYS46, capitalizeString as capitalizeString4 } from "@excalidraw/common";
+import { KEYS as KEYS44, capitalizeString as capitalizeString4 } from "@excalidraw/common";
 import { SHAPES as SHAPES3 } from "@excalidraw/element/shapes";
 
 // components/HandButton.tsx
 import clsx41 from "clsx";
-import { KEYS as KEYS45 } from "@excalidraw/common";
+import { KEYS as KEYS43 } from "@excalidraw/common";
 import { jsx as jsx92 } from "react/jsx-runtime";
 var HandButton = (props) => {
   return /* @__PURE__ */ jsx92(
@@ -25233,9 +25223,9 @@ var HandButton = (props) => {
       name: "editor-current-shape",
       checked: props.checked,
       title: `${props.title} \u2014 H`,
-      keyBindingLabel: !props.isMobile ? KEYS45.H.toLocaleUpperCase() : void 0,
+      keyBindingLabel: !props.isMobile ? KEYS43.H.toLocaleUpperCase() : void 0,
       "aria-label": `${props.title} \u2014 H`,
-      "aria-keyshortcuts": KEYS45.H,
+      "aria-keyshortcuts": KEYS43.H,
       "data-testid": `toolbar-hand`,
       onChange: () => props.onChange?.()
     }
@@ -25471,7 +25461,7 @@ var MobileToolBar = ({
                     icon: app.state.activeTool.locked ? LockedIcon : UnlockedIcon,
                     "data-testid": `toolbar-lock`,
                     selected: app.state.activeTool.locked,
-                    shortcut: KEYS46.Q,
+                    shortcut: KEYS44.Q,
                     children: capitalizeString4(t("toolBar.lock-short"))
                   }
                 ),
@@ -25480,7 +25470,7 @@ var MobileToolBar = ({
                   {
                     onSelect: () => app.setActiveTool({ type: "text" }),
                     icon: TextIcon,
-                    shortcut: KEYS46.T.toLocaleUpperCase(),
+                    shortcut: KEYS44.T.toLocaleUpperCase(),
                     "data-testid": "toolbar-text",
                     selected: activeTool.type === "text",
                     children: t("toolBar.text")
@@ -26159,7 +26149,7 @@ import {
   CLASSES as CLASSES8,
   EVENT as EVENT10,
   isDevEnv as isDevEnv8,
-  KEYS as KEYS47,
+  KEYS as KEYS45,
   updateObject
 } from "@excalidraw/common";
 
@@ -26399,7 +26389,7 @@ var SidebarInner = forwardRef4(
     );
     useEffect32(() => {
       const handleKeyDown = (event) => {
-        if (event.key === KEYS47.ESCAPE && (!docked || !editorInterface.canFitSidebar)) {
+        if (event.key === KEYS45.ESCAPE && (!docked || !editorInterface.canFitSidebar)) {
           closeLibrary();
         }
       };
@@ -27056,7 +27046,6 @@ var Preferences = ({
         /* @__PURE__ */ jsx111(PreferencesToggleToolLockItem, {}),
         /* @__PURE__ */ jsx111(PreferencesToggleSnapModeItem, {}),
         /* @__PURE__ */ jsx111(PreferencesToggleGridModeItem, {}),
-        /* @__PURE__ */ jsx111(PreferencesToggleZenModeItem, {}),
         /* @__PURE__ */ jsx111(PreferencesToggleViewModeItem, {}),
         /* @__PURE__ */ jsx111(PreferencesToggleElementPropertiesItem, {}),
         /* @__PURE__ */ jsx111(PreferencesToggleArrowBindingItem, {}),
@@ -27358,7 +27347,7 @@ import {
 import { isElementCompletelyInViewport } from "@excalidraw/element";
 import { measureText as measureText7 } from "@excalidraw/element";
 import {
-  KEYS as KEYS48,
+  KEYS as KEYS46,
   randomInteger as randomInteger3,
   addEventListener as addEventListener2,
   getFontString as getFontString10
@@ -27531,7 +27520,7 @@ var SearchMenu2 = () => {
   });
   useEffect33(() => {
     const eventHandler = (event) => {
-      if (event.key === KEYS48.ESCAPE && !app.state.openDialog && !app.state.openPopup) {
+      if (event.key === KEYS46.ESCAPE && !app.state.openDialog && !app.state.openPopup) {
         event.preventDefault();
         event.stopPropagation();
         setAppState({
@@ -27539,7 +27528,7 @@ var SearchMenu2 = () => {
         });
         return;
       }
-      if (event[KEYS48.CTRL_OR_CMD] && event.key === KEYS48.F) {
+      if (event[KEYS46.CTRL_OR_CMD] && event.key === KEYS46.F) {
         event.preventDefault();
         event.stopPropagation();
         if (app.state.openDialog) {
@@ -27557,14 +27546,14 @@ var SearchMenu2 = () => {
       }
       if (event.target instanceof HTMLElement && event.target.closest(".layer-ui__search")) {
         if (stableState.searchMatches.items.length) {
-          if (event.key === KEYS48.ENTER) {
+          if (event.key === KEYS46.ENTER) {
             event.stopPropagation();
             stableState.goToNextItem();
           }
-          if (event.key === KEYS48.ARROW_UP) {
+          if (event.key === KEYS46.ARROW_UP) {
             event.stopPropagation();
             stableState.goToPreviousItem();
-          } else if (event.key === KEYS48.ARROW_DOWN) {
+          } else if (event.key === KEYS46.ARROW_DOWN) {
             event.stopPropagation();
             stableState.goToNextItem();
           }
@@ -28053,7 +28042,7 @@ import { updateBindings as updateBindings3 } from "@excalidraw/element";
 // components/Stats/DragInput.tsx
 import clsx54 from "clsx";
 import { useEffect as useEffect34, useRef as useRef30, useState as useState33 } from "react";
-import { EVENT as EVENT12, KEYS as KEYS49, cloneJSON as cloneJSON3 } from "@excalidraw/common";
+import { EVENT as EVENT12, KEYS as KEYS47, cloneJSON as cloneJSON3 } from "@excalidraw/common";
 import { deepCopyElement as deepCopyElement4 } from "@excalidraw/element";
 import { CaptureUpdateAction as CaptureUpdateAction41 } from "@excalidraw/element";
 
@@ -28412,7 +28401,7 @@ var StatsDragInput = ({
             onKeyDown: (event) => {
               if (editable) {
                 const eventTarget = event.target;
-                if (eventTarget instanceof HTMLInputElement && event.key === KEYS49.ENTER) {
+                if (eventTarget instanceof HTMLInputElement && event.key === KEYS47.ENTER) {
                   handleInputValue(eventTarget.value, elements, appState);
                   app.focusContainer();
                 }
@@ -30140,7 +30129,7 @@ var StatsInner = memo5(
 
 // components/ElementLinkDialog.tsx
 import { useCallback as useCallback16, useEffect as useEffect36, useState as useState35 } from "react";
-import { normalizeLink as normalizeLink2, KEYS as KEYS50 } from "@excalidraw/common";
+import { normalizeLink as normalizeLink2, KEYS as KEYS48 } from "@excalidraw/common";
 import {
   defaultGetElementLinkFromSelection as defaultGetElementLinkFromSelection2,
   getLinkIdAndTypeFromSelection as getLinkIdAndTypeFromSelection2
@@ -30196,10 +30185,10 @@ var ElementLinkDialog = ({
   }, [sourceElementId, nextLink, elementsMap, linkEdited, scene, onClose]);
   useEffect36(() => {
     const handleKeyDown = (event) => {
-      if (appState.openDialog?.name === "elementLinkSelector" && event.key === KEYS50.ENTER) {
+      if (appState.openDialog?.name === "elementLinkSelector" && event.key === KEYS48.ENTER) {
         handleConfirm();
       }
-      if (appState.openDialog?.name === "elementLinkSelector" && event.key === KEYS50.ESCAPE) {
+      if (appState.openDialog?.name === "elementLinkSelector" && event.key === KEYS48.ESCAPE) {
         onClose?.();
       }
     };
@@ -30225,7 +30214,7 @@ var ElementLinkDialog = ({
             setNextLink(value);
           },
           onKeyDown: (event) => {
-            if (event.key === KEYS50.ENTER) {
+            if (event.key === KEYS48.ENTER) {
               handleConfirm();
             }
           },
@@ -30325,11 +30314,11 @@ var FixedSideContainer = ({
 import React38, { useMemo as useMemo14 } from "react";
 import clsx57 from "clsx";
 import { isDarwin as isDarwin4, isFirefox as isFirefox4, isWindows as isWindows2 } from "@excalidraw/common";
-import { KEYS as KEYS52 } from "@excalidraw/common";
+import { KEYS as KEYS50 } from "@excalidraw/common";
 import { SHAPES as SHAPES5 } from "@excalidraw/element/shapes";
 
 // components/HelpDialog/BasicHelpDialog.tsx
-import { isFirefox as isFirefox3, KEYS as KEYS51 } from "@excalidraw/common";
+import { isFirefox as isFirefox3, KEYS as KEYS49 } from "@excalidraw/common";
 import { SHAPES as SHAPES4 } from "@excalidraw/element/shapes";
 import { Fragment as Fragment20, jsx as jsx132, jsxs as jsxs70 } from "react/jsx-runtime";
 var Section2 = (props) => /* @__PURE__ */ jsxs70(Fragment20, { children: [
@@ -30376,7 +30365,7 @@ function BasicHelpDialog() {
         className: "HelpDialog__island--tools",
         caption: t("helpDialog.tools"),
         children: [
-          /* @__PURE__ */ jsx132(Shortcut, { label: t("toolBar.hand"), shortcuts: [KEYS51.H] }),
+          /* @__PURE__ */ jsx132(Shortcut, { label: t("toolBar.hand"), shortcuts: [KEYS49.H] }),
           SHAPES4.filter(({ myocSimplifiedMode }) => myocSimplifiedMode).map(
             ({ value, key }) => /* @__PURE__ */ jsx132(
               Shortcut,
@@ -30412,14 +30401,7 @@ function BasicHelpDialog() {
         className: "HelpDialog__island--view",
         caption: t("helpDialog.view"),
         children: [
-          /* @__PURE__ */ jsx132(Shortcut, { label: t("helpDialog.smartZoom"), shortcuts: [KEYS51.F] }),
-          /* @__PURE__ */ jsx132(
-            Shortcut,
-            {
-              label: t("buttons.zenMode"),
-              shortcuts: [getShortcutKey("Alt+Z")]
-            }
-          ),
+          /* @__PURE__ */ jsx132(Shortcut, { label: t("helpDialog.smartZoom"), shortcuts: [KEYS49.F] }),
           /* @__PURE__ */ jsx132(
             Shortcut,
             {
@@ -30599,7 +30581,7 @@ var HelpDialog = ({ onClose }) => {
             className: "HelpDialog__island--tools",
             caption: t("helpDialog.tools"),
             children: [
-              /* @__PURE__ */ jsx133(Shortcut2, { label: t("toolBar.hand"), shortcuts: [KEYS52.H] }),
+              /* @__PURE__ */ jsx133(Shortcut2, { label: t("toolBar.hand"), shortcuts: [KEYS50.H] }),
               SHAPES5.map(({ value, key }) => /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
@@ -30608,13 +30590,13 @@ var HelpDialog = ({ onClose }) => {
                 },
                 value
               )),
-              /* @__PURE__ */ jsx133(Shortcut2, { label: t("toolBar.frame"), shortcuts: [KEYS52.F] }),
-              /* @__PURE__ */ jsx133(Shortcut2, { label: t("toolBar.laser"), shortcuts: [KEYS52.K] }),
+              /* @__PURE__ */ jsx133(Shortcut2, { label: t("toolBar.frame"), shortcuts: [KEYS50.F] }),
+              /* @__PURE__ */ jsx133(Shortcut2, { label: t("toolBar.laser"), shortcuts: [KEYS50.K] }),
               /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("labels.eyeDropper"),
-                  shortcuts: [KEYS52.I, "Shift+S", "Shift+G"]
+                  shortcuts: [KEYS50.I, "Shift+S", "Shift+G"]
                 }
               ),
               /* @__PURE__ */ jsx133(
@@ -30696,7 +30678,7 @@ var HelpDialog = ({ onClose }) => {
                   isOr: true
                 }
               ),
-              /* @__PURE__ */ jsx133(Shortcut2, { label: t("toolBar.lock"), shortcuts: [KEYS52.Q] }),
+              /* @__PURE__ */ jsx133(Shortcut2, { label: t("toolBar.lock"), shortcuts: [KEYS50.Q] }),
               /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
@@ -30732,7 +30714,7 @@ var HelpDialog = ({ onClose }) => {
                 Shortcut2,
                 {
                   label: t("helpDialog.smartZoom"),
-                  shortcuts: [KEYS52.F]
+                  shortcuts: [KEYS50.F]
                 }
               ),
               /* @__PURE__ */ jsx133(
@@ -30777,13 +30759,6 @@ var HelpDialog = ({ onClose }) => {
                   shortcuts: ["Shift+PgUp/PgDn"]
                 }
               ),
-              /* @__PURE__ */ jsx133(
-                Shortcut2,
-                {
-                  label: t("buttons.zenMode"),
-                  shortcuts: [getShortcutKey("Alt+Z")]
-                }
-              ),
               /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
@@ -30923,20 +30898,6 @@ var HelpDialog = ({ onClose }) => {
                   shortcuts: [getShortcutKey("Shift+Alt+C")]
                 }
               ),
-              /* @__PURE__ */ jsx133(
-                Shortcut2,
-                {
-                  label: t("labels.copyStyles"),
-                  shortcuts: [getShortcutKey("CtrlOrCmd+Alt+C")]
-                }
-              ),
-              /* @__PURE__ */ jsx133(
-                Shortcut2,
-                {
-                  label: t("labels.pasteStyles"),
-                  shortcuts: [getShortcutKey("CtrlOrCmd+Alt+V")]
-                }
-              ),
               /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
@@ -34322,6 +34283,8 @@ var StaticCanvas = (props) => {
       wrapper.replaceChildren(canvas);
       canvas.classList.add("excalidraw__canvas", "static");
     }
+    const gridColorBold = getComputedStyle(wrapper).getPropertyValue("--color-grid-bold").trim();
+    const gridColorRegular = getComputedStyle(wrapper).getPropertyValue("--color-grid-regular").trim();
     renderStaticScene(
       {
         canvas,
@@ -34331,7 +34294,11 @@ var StaticCanvas = (props) => {
         allElementsMap: props.allElementsMap,
         visibleElements: props.visibleElements,
         appState: props.appState,
-        renderConfig: props.renderConfig
+        renderConfig: {
+          ...props.renderConfig,
+          gridColorBold,
+          gridColorRegular
+        }
       },
       isRenderThrottlingEnabled()
     );
@@ -35004,7 +34971,7 @@ var App = class _App extends React44.Component {
               onFocus: (e) => e.target.select(),
               onBlur: () => this.resetEditingFrame(f),
               onKeyDown: (event) => {
-                if (event.key === KEYS53.ESCAPE || event.key === KEYS53.ENTER) {
+                if (event.key === KEYS51.ESCAPE || event.key === KEYS51.ENTER) {
                   this.resetEditingFrame(f);
                 }
               },
@@ -35812,6 +35779,63 @@ var App = class _App extends React44.Component {
       });
     });
     __publicField(this, "cancelInProgressAnimation", null);
+    __publicField(this, "scrollToViewport", (target, opts) => {
+      this.cancelInProgressAnimation?.();
+      const zoom = { value: getNormalizedZoom(target.zoom) };
+      const animateDuration = opts?.duration ?? 500;
+      if (opts?.animate && animateDuration > 0) {
+        const origScrollX = this.state.scrollX;
+        const origScrollY = this.state.scrollY;
+        const origZoom = this.state.zoom.value;
+        const cancel = easeToValuesRAF({
+          fromValues: {
+            scrollX: origScrollX,
+            scrollY: origScrollY,
+            zoom: origZoom
+          },
+          toValues: {
+            scrollX: target.scrollX,
+            scrollY: target.scrollY,
+            zoom: zoom.value
+          },
+          interpolateValue: (from, to, progress, key) => {
+            if (key === "zoom") {
+              return from * Math.pow(to / from, easeOut4(progress));
+            }
+            return void 0;
+          },
+          onStep: ({ scrollX, scrollY, zoom: zoom2 }) => {
+            this.setState({
+              scrollX,
+              scrollY,
+              zoom: { value: zoom2 }
+            });
+          },
+          onStart: () => {
+            this.setState({ shouldCacheIgnoreZoom: true });
+          },
+          onEnd: () => {
+            this.cancelInProgressAnimation = null;
+            this.setState({ shouldCacheIgnoreZoom: false });
+          },
+          onCancel: () => {
+            this.cancelInProgressAnimation = null;
+            this.setState({ shouldCacheIgnoreZoom: false });
+          },
+          duration: animateDuration
+        });
+        this.cancelInProgressAnimation = () => {
+          cancel();
+          this.cancelInProgressAnimation = null;
+        };
+      } else {
+        this.setState({
+          scrollX: target.scrollX,
+          scrollY: target.scrollY,
+          zoom
+        });
+      }
+    });
     __publicField(this, "scrollToContent", (target = this.scene.getNonDeletedElements(), opts) => {
       if (typeof target === "string") {
         let id;
@@ -35839,7 +35863,6 @@ var App = class _App extends React44.Component {
         }
         return;
       }
-      this.cancelInProgressAnimation?.();
       const targetElements = Array.isArray(target) ? target : [target];
       let zoom = this.state.zoom;
       let scrollX = this.state.scrollX;
@@ -35862,48 +35885,17 @@ var App = class _App extends React44.Component {
         scrollX = scroll.scrollX;
         scrollY = scroll.scrollY;
       }
-      if (opts?.animate) {
-        const origScrollX = this.state.scrollX;
-        const origScrollY = this.state.scrollY;
-        const origZoom = this.state.zoom.value;
-        const cancel = easeToValuesRAF({
-          fromValues: {
-            scrollX: origScrollX,
-            scrollY: origScrollY,
-            zoom: origZoom
-          },
-          toValues: { scrollX, scrollY, zoom: zoom.value },
-          interpolateValue: (from, to, progress, key) => {
-            if (key === "zoom") {
-              return from * Math.pow(to / from, easeOut4(progress));
-            }
-            return void 0;
-          },
-          onStep: ({ scrollX: scrollX2, scrollY: scrollY2, zoom: zoom2 }) => {
-            this.setState({
-              scrollX: scrollX2,
-              scrollY: scrollY2,
-              zoom: { value: zoom2 }
-            });
-          },
-          onStart: () => {
-            this.setState({ shouldCacheIgnoreZoom: true });
-          },
-          onEnd: () => {
-            this.setState({ shouldCacheIgnoreZoom: false });
-          },
-          onCancel: () => {
-            this.setState({ shouldCacheIgnoreZoom: false });
-          },
-          duration: opts?.duration ?? 500
-        });
-        this.cancelInProgressAnimation = () => {
-          cancel();
-          this.cancelInProgressAnimation = null;
-        };
-      } else {
-        this.setState({ scrollX, scrollY, zoom });
-      }
+      this.scrollToViewport(
+        {
+          scrollX,
+          scrollY,
+          zoom: zoom.value
+        },
+        {
+          animate: opts?.animate,
+          duration: opts?.duration
+        }
+      );
     });
     __publicField(this, "maybeUnfollowRemoteUser", () => {
       if (this.state.userToFollow) {
@@ -36098,7 +36090,7 @@ var App = class _App extends React44.Component {
           });
         }
         if (!isInputLike(event.target)) {
-          if ((event.key === KEYS53.ESCAPE || event.key === KEYS53.ENTER) && this.state.croppingElementId) {
+          if ((event.key === KEYS51.ESCAPE || event.key === KEYS51.ENTER) && this.state.croppingElementId) {
             this.finishImageCropping();
             return;
           }
@@ -36106,13 +36098,13 @@ var App = class _App extends React44.Component {
             this.scene.getNonDeletedElementsMap(),
             this.state
           );
-          if (selectedElements.length === 1 && isImageElement9(selectedElements[0]) && event.key === KEYS53.ENTER) {
+          if (selectedElements.length === 1 && isImageElement9(selectedElements[0]) && event.key === KEYS51.ENTER) {
             this.startImageCropping(selectedElements[0]);
             return;
           }
-          if (event.key === KEYS53.ESCAPE) {
+          if (event.key === KEYS51.ESCAPE) {
             this.updateEditorAtom(convertElementTypePopupAtom, null);
-          } else if (event.key === KEYS53.TAB && (document.activeElement === this.excalidrawContainerRef?.current || document.activeElement?.classList.contains(
+          } else if (event.key === KEYS51.TAB && (document.activeElement === this.excalidrawContainerRef?.current || document.activeElement?.classList.contains(
             CLASSES11.CONVERT_ELEMENT_TYPE_POPUP
           ))) {
             event.preventDefault();
@@ -36131,13 +36123,13 @@ var App = class _App extends React44.Component {
               });
             }
           }
-          if (event.key === KEYS53.ESCAPE && this.flowChartCreator.isCreatingChart) {
+          if (event.key === KEYS51.ESCAPE && this.flowChartCreator.isCreatingChart) {
             this.flowChartCreator.clear();
             this.triggerRender(true);
             return;
           }
           const arrowKeyPressed = isArrowKey2(event.key);
-          if (event[KEYS53.CTRL_OR_CMD] && arrowKeyPressed && !event.shiftKey) {
+          if (event[KEYS51.CTRL_OR_CMD] && arrowKeyPressed && !event.shiftKey) {
             event.preventDefault();
             const selectedElements2 = getSelectedElements(
               this.scene.getNonDeletedElementsMap(),
@@ -36221,7 +36213,7 @@ var App = class _App extends React44.Component {
             }
           }
         }
-        if (event[KEYS53.CTRL_OR_CMD] && event.key === KEYS53.P && !event.shiftKey && !event.altKey) {
+        if (event[KEYS51.CTRL_OR_CMD] && event.key === KEYS51.P && !event.shiftKey && !event.altKey) {
           this.setToast({
             message: t("commandPalette.shortcutHint", {
               shortcut: getShortcutFromShortcutName("commandPalette")
@@ -36230,15 +36222,15 @@ var App = class _App extends React44.Component {
           event.preventDefault();
           return;
         }
-        if (event[KEYS53.CTRL_OR_CMD] && event.key.toLowerCase() === KEYS53.V) {
+        if (event[KEYS51.CTRL_OR_CMD] && event.key.toLowerCase() === KEYS51.V) {
           IS_PLAIN_PASTE = event.shiftKey;
           clearTimeout(IS_PLAIN_PASTE_TIMER);
           IS_PLAIN_PASTE_TIMER = window.setTimeout(() => {
             IS_PLAIN_PASTE = false;
           }, 100);
         }
-        if (event[KEYS53.CTRL_OR_CMD] && isWritableElement5(event.target)) {
-          if (event.code === CODES13.MINUS || event.code === CODES13.EQUAL) {
+        if (event[KEYS51.CTRL_OR_CMD] && isWritableElement5(event.target)) {
+          if (event.code === CODES11.MINUS || event.code === CODES11.EQUAL) {
             event.preventDefault();
             return;
           }
@@ -36246,24 +36238,24 @@ var App = class _App extends React44.Component {
         if (
           // inside an input
           isWritableElement5(event.target) && // unless pressing escape (finalize action)
-          event.key !== KEYS53.ESCAPE || // or unless using arrows (to move between buttons)
+          event.key !== KEYS51.ESCAPE || // or unless using arrows (to move between buttons)
           isArrowKey2(event.key) && isInputLike(event.target)
         ) {
           return;
         }
-        if (event.key === KEYS53.QUESTION_MARK) {
+        if (event.key === KEYS51.QUESTION_MARK) {
           this.setState({
             openDialog: { name: "help" }
           });
           return;
-        } else if (event.key.toLowerCase() === KEYS53.E && event.shiftKey && event[KEYS53.CTRL_OR_CMD]) {
+        } else if (event.key.toLowerCase() === KEYS51.E && event.shiftKey && event[KEYS51.CTRL_OR_CMD]) {
           event.preventDefault();
           this.setState({ openDialog: { name: "imageExport" } });
           return;
         }
-        if (event.key === KEYS53.PAGE_UP || event.key === KEYS53.PAGE_DOWN) {
+        if (event.key === KEYS51.PAGE_UP || event.key === KEYS51.PAGE_DOWN) {
           let offset = (event.shiftKey ? this.state.width : this.state.height) / this.state.zoom.value;
-          if (event.key === KEYS53.PAGE_DOWN) {
+          if (event.key === KEYS51.PAGE_DOWN) {
             offset = -offset;
           }
           if (event.shiftKey) {
@@ -36279,7 +36271,7 @@ var App = class _App extends React44.Component {
         if (this.state.openDialog?.name === "elementLinkSelector") {
           return;
         }
-        if (event.key === KEYS53.ALT) {
+        if (event.key === KEYS51.ALT) {
           if (getFeatureFlag4("COMPLEX_BINDINGS")) {
             this.handleSkipBindMode();
           } else {
@@ -36290,7 +36282,7 @@ var App = class _App extends React44.Component {
           return;
         }
         const shouldPreventToolSwitching = this.props.viewModeEnabled === true;
-        if (!shouldPreventToolSwitching && this.state.viewModeEnabled && event.key === KEYS53.ESCAPE) {
+        if (!shouldPreventToolSwitching && this.state.viewModeEnabled && event.key === KEYS51.ESCAPE) {
           this.setActiveTool({ type: "selection" });
           return;
         }
@@ -36321,7 +36313,7 @@ var App = class _App extends React44.Component {
             }
             event.stopPropagation();
             return;
-          } else if (event.key === KEYS53.Q) {
+          } else if (event.key === KEYS51.Q) {
             this.toggleLock("keyboard");
             event.stopPropagation();
             return;
@@ -36330,7 +36322,7 @@ var App = class _App extends React44.Component {
         if (this.state.viewModeEnabled) {
           return;
         }
-        if (event[KEYS53.CTRL_OR_CMD] && !event.repeat) {
+        if (event[KEYS51.CTRL_OR_CMD] && !event.repeat) {
           if (getFeatureFlag4("COMPLEX_BINDINGS")) {
             this.resetDelayedBindMode();
           }
@@ -36365,13 +36357,13 @@ var App = class _App extends React44.Component {
           const step = this.getEffectiveGridSize() && (event.shiftKey ? ELEMENT_TRANSLATE_AMOUNT : this.getEffectiveGridSize()) || (event.shiftKey ? ELEMENT_SHIFT_TRANSLATE_AMOUNT : ELEMENT_TRANSLATE_AMOUNT);
           let offsetX = 0;
           let offsetY = 0;
-          if (event.key === KEYS53.ARROW_LEFT) {
+          if (event.key === KEYS51.ARROW_LEFT) {
             offsetX = -step;
-          } else if (event.key === KEYS53.ARROW_RIGHT) {
+          } else if (event.key === KEYS51.ARROW_RIGHT) {
             offsetX = step;
-          } else if (event.key === KEYS53.ARROW_UP) {
+          } else if (event.key === KEYS51.ARROW_UP) {
             offsetY = -step;
-          } else if (event.key === KEYS53.ARROW_DOWN) {
+          } else if (event.key === KEYS51.ARROW_DOWN) {
             offsetY = step;
           }
           selectedElements.forEach((element) => {
@@ -36389,11 +36381,11 @@ var App = class _App extends React44.Component {
           });
           this.scene.triggerUpdate();
           event.preventDefault();
-        } else if (event.key === KEYS53.ENTER) {
+        } else if (event.key === KEYS51.ENTER) {
           const selectedElements = this.scene.getSelectedElements(this.state);
           if (selectedElements.length === 1) {
             const selectedElement = selectedElements[0];
-            if (event[KEYS53.CTRL_OR_CMD] || isLineElement8(selectedElement)) {
+            if (event[KEYS51.CTRL_OR_CMD] || isLineElement8(selectedElement)) {
               if (isLinearElement12(selectedElement)) {
                 if (!this.state.selectedLinearElement?.isEditing || this.state.selectedLinearElement.elementId !== selectedElement.id) {
                   this.store.scheduleCapture();
@@ -36428,26 +36420,26 @@ var App = class _App extends React44.Component {
             }
           }
         }
-        if (event.key === KEYS53.SPACE && gesture.pointers.size === 0) {
+        if (event.key === KEYS51.SPACE && gesture.pointers.size === 0) {
           isHoldingSpace = true;
           setCursor(this.interactiveCanvas, CURSOR_TYPE4.GRAB);
           event.preventDefault();
         }
-        if ((event.key === KEYS53.G || event.key === KEYS53.S) && !event.altKey && !event[KEYS53.CTRL_OR_CMD]) {
+        if ((event.key === KEYS51.G || event.key === KEYS51.S) && !event.altKey && !event[KEYS51.CTRL_OR_CMD]) {
           const selectedElements = this.scene.getSelectedElements(this.state);
           if (this.state.activeTool.type === "selection" && !selectedElements.length) {
             return;
           }
-          if (event.key === KEYS53.G && (hasBackground(this.state.activeTool.type) || selectedElements.some((element) => hasBackground(element.type)))) {
+          if (event.key === KEYS51.G && (hasBackground(this.state.activeTool.type) || selectedElements.some((element) => hasBackground(element.type)))) {
             this.setState({ openPopup: "elementBackground" });
             event.stopPropagation();
           }
-          if (event.key === KEYS53.S) {
+          if (event.key === KEYS51.S) {
             this.setState({ openPopup: "elementStroke" });
             event.stopPropagation();
           }
         }
-        if (!event[KEYS53.CTRL_OR_CMD] && event.shiftKey && event.key.toLowerCase() === KEYS53.F) {
+        if (!event[KEYS51.CTRL_OR_CMD] && event.shiftKey && event.key.toLowerCase() === KEYS51.F) {
           const selectedElements = this.scene.getSelectedElements(this.state);
           if (this.state.activeTool.type === "selection" && !selectedElements.length) {
             return;
@@ -36463,8 +36455,8 @@ var App = class _App extends React44.Component {
           }
         }
         const lowerCased = event.key.toLocaleLowerCase();
-        const isPickingStroke = lowerCased === KEYS53.S && event.shiftKey && !event[KEYS53.CTRL_OR_CMD];
-        const isPickingBackground = event.key === KEYS53.I || lowerCased === KEYS53.G && event.shiftKey;
+        const isPickingStroke = lowerCased === KEYS51.S && event.shiftKey && !event[KEYS51.CTRL_OR_CMD];
+        const isPickingBackground = event.key === KEYS51.I || lowerCased === KEYS51.G && event.shiftKey;
         if (isPickingStroke || isPickingBackground) {
           this.openEyeDropper({
             type: isPickingStroke ? "stroke" : "background"
@@ -36473,7 +36465,7 @@ var App = class _App extends React44.Component {
       }
     ));
     __publicField(this, "onKeyUp", withBatchedUpdates((event) => {
-      if (event.key === KEYS53.SPACE) {
+      if (event.key === KEYS51.SPACE) {
         if (this.state.viewModeEnabled && this.state.activeTool.type !== "laser" || this.state.openDialog?.name === "elementLinkSelector") {
           setCursor(this.interactiveCanvas, CURSOR_TYPE4.GRAB);
         } else if (isSelectionLikeTool(this.state.activeTool.type)) {
@@ -36489,10 +36481,10 @@ var App = class _App extends React44.Component {
         }
         isHoldingSpace = false;
       }
-      if (event.key === KEYS53.ALT) {
+      if (event.key === KEYS51.ALT) {
         maybeHandleArrowPointlikeDrag({ app: this, event });
       }
-      if (event.key === KEYS53.ALT && this.state.bindMode === "skip" || !event[KEYS53.CTRL_OR_CMD] && !isBindingEnabled2(this.state)) {
+      if (event.key === KEYS51.ALT && this.state.bindMode === "skip" || !event[KEYS51.CTRL_OR_CMD] && !isBindingEnabled2(this.state)) {
         this.setState({
           bindMode: "orbit"
         });
@@ -36520,7 +36512,7 @@ var App = class _App extends React44.Component {
           }
         }
       }
-      if (!event[KEYS53.CTRL_OR_CMD]) {
+      if (!event[KEYS51.CTRL_OR_CMD]) {
         const preferenceEnabled = this.state.bindingPreference === "enabled";
         if (this.state.isBindingEnabled !== preferenceEnabled) {
           flushSync3(() => {
@@ -36578,7 +36570,7 @@ var App = class _App extends React44.Component {
           });
         }
       }
-      if (!event[KEYS53.CTRL_OR_CMD]) {
+      if (!event[KEYS51.CTRL_OR_CMD]) {
         if (this.flowChartCreator.isCreatingChart) {
           if (this.flowChartCreator.pendingNodes?.length) {
             this.scene.insertElements(this.flowChartCreator.pendingNodes);
@@ -36960,7 +36952,7 @@ var App = class _App extends React44.Component {
       );
       if (selectedElements.length === 1 && isLinearElement12(selectedElements[0])) {
         const selectedLinearElement = selectedElements[0];
-        if ((event[KEYS53.CTRL_OR_CMD] && isSimpleArrow(selectedLinearElement) || isLineElement8(selectedLinearElement)) && (!this.state.selectedLinearElement?.isEditing || this.state.selectedLinearElement.elementId !== selectedLinearElement.id)) {
+        if ((event[KEYS51.CTRL_OR_CMD] && isSimpleArrow(selectedLinearElement) || isLineElement8(selectedLinearElement)) && (!this.state.selectedLinearElement?.isEditing || this.state.selectedLinearElement.elementId !== selectedLinearElement.id)) {
           this.actionManager.executeAction(actionToggleLinearEditor);
           return;
         } else if (this.state.selectedLinearElement && isElbowArrow10(selectedElements[0])) {
@@ -37045,7 +37037,7 @@ var App = class _App extends React44.Component {
         }
       }
       resetCursor(this.interactiveCanvas);
-      if (!event[KEYS53.CTRL_OR_CMD] && !this.state.viewModeEnabled) {
+      if (!event[KEYS51.CTRL_OR_CMD] && !this.state.viewModeEnabled) {
         const hitElement = this.getElementAtPosition(sceneX, sceneY);
         if (isIframeLikeElement2(hitElement)) {
           this.setState({
@@ -37611,7 +37603,7 @@ var App = class _App extends React44.Component {
           setCursor(this.interactiveCanvas, CURSOR_TYPE4.AUTO);
         } else if (
           // if using cmd/ctrl, we're not dragging
-          !event[KEYS53.CTRL_OR_CMD] && // editing text -> don't show move cursor when hovering over its bbox
+          !event[KEYS51.CTRL_OR_CMD] && // editing text -> don't show move cursor when hovering over its bbox
           hitElement?.id !== this.state.editingTextElement?.id
         ) {
           if ((hitElement || this.isHittingCommonBoundingBoxOfSelectedElements(
@@ -38307,7 +38299,7 @@ var App = class _App extends React44.Component {
               ) : makeNextSelectedElementIds2({}, prevState)
             }));
           } else if (hitElement != null) {
-            if (event[KEYS53.CTRL_OR_CMD]) {
+            if (event[KEYS51.CTRL_OR_CMD]) {
               if (event.altKey) {
                 if (this.state.openDialog?.name === "elementLinkSelector") {
                   this.setOpenDialog(null);
@@ -38516,7 +38508,7 @@ var App = class _App extends React44.Component {
       const [gridX, gridY] = getGridPoint2(
         sceneX,
         sceneY,
-        this.lastPointerDownEvent?.[KEYS53.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+        this.lastPointerDownEvent?.[KEYS51.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       const element = newIframeElement({
         type: "iframe",
@@ -38546,7 +38538,7 @@ var App = class _App extends React44.Component {
       const [gridX, gridY] = getGridPoint2(
         sceneX,
         sceneY,
-        this.lastPointerDownEvent?.[KEYS53.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+        this.lastPointerDownEvent?.[KEYS51.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       const embedLink = getEmbedLink2(link);
       if (!embedLink) {
@@ -38586,7 +38578,7 @@ var App = class _App extends React44.Component {
       const [gridX, gridY] = getGridPoint2(
         sceneX,
         sceneY,
-        this.lastPointerDownEvent?.[KEYS53.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+        this.lastPointerDownEvent?.[KEYS51.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       const topLayerFrame = addToFrameUnderCursor ? this.getTopLayerFrameAtSceneCoords({
         x: gridX,
@@ -38692,7 +38684,7 @@ var App = class _App extends React44.Component {
         const [gridX, gridY] = getGridPoint2(
           pointerDownState.origin.x,
           pointerDownState.origin.y,
-          event[KEYS53.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+          event[KEYS51.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
         );
         const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
           x: gridX,
@@ -38828,7 +38820,7 @@ var App = class _App extends React44.Component {
       const [gridX, gridY] = getGridPoint2(
         pointerDownState.origin.x,
         pointerDownState.origin.y,
-        this.lastPointerDownEvent?.[KEYS53.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+        this.lastPointerDownEvent?.[KEYS51.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
         x: gridX,
@@ -38876,7 +38868,7 @@ var App = class _App extends React44.Component {
       const [gridX, gridY] = getGridPoint2(
         pointerDownState.origin.x,
         pointerDownState.origin.y,
-        this.lastPointerDownEvent?.[KEYS53.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+        this.lastPointerDownEvent?.[KEYS51.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       const constructorOpts = {
         x: gridX,
@@ -39478,7 +39470,7 @@ var App = class _App extends React44.Component {
       let [gridX, gridY] = getGridPoint2(
         pointerCoords.x,
         pointerCoords.y,
-        event[KEYS53.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+        event[KEYS51.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       const image = isInitializedImageElement3(newElement7) && this.imageCache.get(newElement7.fileId)?.image;
       const aspectRatio = image && !(image instanceof Promise) ? image.width / image.height : null;
@@ -39544,7 +39536,7 @@ var App = class _App extends React44.Component {
       const [x, y] = getGridPoint2(
         pointerCoords.x - pointerDownState.resize.offset.x,
         pointerCoords.y - pointerDownState.resize.offset.y,
-        event[KEYS53.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+        event[KEYS51.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       const croppingElement = this.scene.getNonDeletedElementsMap().get(this.state.croppingElementId);
       if (transformHandleType && croppingElement && isImageElement9(croppingElement)) {
@@ -39556,7 +39548,7 @@ var App = class _App extends React44.Component {
           const [gridX, gridY] = getGridPoint2(
             pointerCoords.x,
             pointerCoords.y,
-            event[KEYS53.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+            event[KEYS51.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
           );
           const dragOffset = {
             x: gridX - pointerDownState.originInGrid.x,
@@ -39620,7 +39612,7 @@ var App = class _App extends React44.Component {
       let [resizeX, resizeY] = getGridPoint2(
         pointerCoords.x - pointerDownState.resize.offset.x,
         pointerCoords.y - pointerDownState.resize.offset.y,
-        event[KEYS53.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+        event[KEYS51.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       const frameElementsOffsetsMap = /* @__PURE__ */ new Map();
       selectedFrames.forEach((frame) => {
@@ -39639,7 +39631,7 @@ var App = class _App extends React44.Component {
         const [gridX, gridY] = getGridPoint2(
           pointerCoords.x,
           pointerCoords.y,
-          event[KEYS53.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+          event[KEYS51.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
         );
         const dragOffset = {
           x: gridX - pointerDownState.originInGrid.x,
@@ -39692,22 +39684,13 @@ var App = class _App extends React44.Component {
     });
     __publicField(this, "getContextMenuItems", (type) => {
       const options = [];
-      options.push(actionCopyAsPng, actionCopyAsSvg);
       if (type === "canvas") {
         if (this.state.viewModeEnabled) {
-          return [
-            ...options,
-            actionToggleGridMode,
-            actionToggleZenMode,
-            actionToggleViewMode,
-            actionToggleStats
-          ];
+          return [actionToggleGridMode, actionToggleViewMode, actionToggleStats];
         }
         return [
           actionPaste,
           CONTEXT_MENU_SEPARATOR,
-          actionCopyAsPng,
-          actionCopyAsSvg,
           copyText,
           CONTEXT_MENU_SEPARATOR,
           actionSelectAll,
@@ -39717,7 +39700,6 @@ var App = class _App extends React44.Component {
           actionToggleObjectsSnapMode,
           actionToggleArrowBinding,
           actionToggleMidpointSnapping,
-          actionToggleZenMode,
           actionToggleViewMode,
           actionToggleStats
         ];
@@ -39744,21 +39726,17 @@ var App = class _App extends React44.Component {
         actionWrapSelectionInFrame,
         CONTEXT_MENU_SEPARATOR,
         actionToggleCropEditor,
+        actionArrangeElements,
         actionNormaliseElements,
         CONTEXT_MENU_SEPARATOR,
         ...options,
         CONTEXT_MENU_SEPARATOR,
-        actionCopyStyles,
-        actionPasteStyles,
-        CONTEXT_MENU_SEPARATOR,
         actionGroup,
         actionTextAutoResize,
         actionUnbindText,
         actionBindText,
         actionWrapTextInContainer,
         actionUngroup,
-        CONTEXT_MENU_SEPARATOR,
-        actionAddToLibrary,
         ...zIndexActions,
         CONTEXT_MENU_SEPARATOR,
         actionFlipHorizontal,
@@ -39779,7 +39757,7 @@ var App = class _App extends React44.Component {
     __publicField(this, "handleWheel", withBatchedUpdates(
       (event) => {
         if (!(event.target instanceof HTMLCanvasElement || event.target instanceof HTMLTextAreaElement || event.target instanceof HTMLIFrameElement || event.target instanceof HTMLElement && event.target.classList.contains(CLASSES11.FRAME_NAME))) {
-          if (event[KEYS53.CTRL_OR_CMD]) {
+          if (event[KEYS51.CTRL_OR_CMD]) {
             event.preventDefault();
           }
           return;
@@ -39960,6 +39938,7 @@ var App = class _App extends React44.Component {
       history: {
         clear: this.resetHistory
       },
+      scrollToViewport: this.scrollToViewport,
       scrollToContent: this.scrollToContent,
       getSceneElements: this.getSceneElements,
       getAppState: () => this.state,
@@ -41945,12 +41924,12 @@ var App = class _App extends React44.Component {
     const isElbowArrowOnly = selectedElements.findIndex(isElbowArrow10) === 0;
     return {
       origin,
-      withCmdOrCtrl: event[KEYS53.CTRL_OR_CMD],
+      withCmdOrCtrl: event[KEYS51.CTRL_OR_CMD],
       originInGrid: tupleToCoors(
         getGridPoint2(
           origin.x,
           origin.y,
-          event[KEYS53.CTRL_OR_CMD] || isElbowArrowOnly ? null : this.getEffectiveGridSize()
+          event[KEYS51.CTRL_OR_CMD] || isElbowArrowOnly ? null : this.getEffectiveGridSize()
         )
       ),
       scrollbars: isOverScrollBars(
@@ -42091,7 +42070,7 @@ var App = class _App extends React44.Component {
   }
   onKeyUpFromPointerDownHandler(pointerDownState) {
     return withBatchedUpdates((event) => {
-      event.key === KEYS53.ALT && event.preventDefault();
+      event.key === KEYS51.ALT && event.preventDefault();
       if (this.maybeHandleResize(pointerDownState, event)) {
         return;
       }
@@ -42113,7 +42092,7 @@ var App = class _App extends React44.Component {
         const [gridX2, gridY2] = getGridPoint2(
           pointerCoords.x,
           pointerCoords.y,
-          event[KEYS53.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+          event[KEYS51.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
         );
         let index = this.state.selectedLinearElement.initialState.segmentMidpoint.index;
         if (index < 0) {
@@ -42178,7 +42157,7 @@ var App = class _App extends React44.Component {
       const [gridX, gridY] = getGridPoint2(
         pointerCoords.x,
         pointerCoords.y,
-        event[KEYS53.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+        event[KEYS51.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       if (pointerDownState.resize.isResizing) {
         pointerDownState.lastCoords.x = pointerCoords.x;
@@ -42226,7 +42205,7 @@ var App = class _App extends React44.Component {
             this.state.selectedLinearElement,
             pointerCoords,
             this,
-            !event[KEYS53.CTRL_OR_CMD],
+            !event[KEYS51.CTRL_OR_CMD],
             this.scene
           );
           if (!ret) {
@@ -42424,7 +42403,7 @@ var App = class _App extends React44.Component {
               dragOffset,
               this.scene,
               snapOffset,
-              event[KEYS53.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+              event[KEYS51.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
             );
           }
           this.setState({
@@ -43395,7 +43374,7 @@ var App = class _App extends React44.Component {
         return;
       }
       const selectedTextEditingContainer = this.getSelectedTextEditingContainerAtPosition(hitElement, sceneCoords);
-      if (activeTool.type === this.state.preferredSelectionTool.type && !this.state.editingTextElement && !pointerDownState.drag.hasOccurred && !pointerDownState.hit.wasAddedToSelection && !childEvent.shiftKey && !childEvent[KEYS53.CTRL_OR_CMD] && !childEvent.altKey && childEvent.pointerType !== "touch" && hitElement && (isTextElement19(hitElement) && this.state.selectedElementIds[hitElement.id] && this.scene.getSelectedElements(this.state).length === 1 || selectedTextEditingContainer)) {
+      if (activeTool.type === this.state.preferredSelectionTool.type && !this.state.editingTextElement && !pointerDownState.drag.hasOccurred && !pointerDownState.hit.wasAddedToSelection && !childEvent.shiftKey && !childEvent[KEYS51.CTRL_OR_CMD] && !childEvent.altKey && childEvent.pointerType !== "touch" && hitElement && (isTextElement19(hitElement) && this.state.selectedElementIds[hitElement.id] && this.scene.getSelectedElements(this.state).length === 1 || selectedTextEditingContainer)) {
         this.startTextEditing({
           sceneX: sceneCoords.x,
           sceneY: sceneCoords.y,