@myoc/excalidraw 0.19.3 → 0.19.5-ffbfd9327

package/dist/dev/index.js

@@ -65,10 +65,10 @@ import {
   serializeAsJSON,
   serializeLibraryAsJSON,
   strokeRectWithRotation_simple
-} from "./chunk-ZCRRPXDS.js";
+} from "./chunk-M3QOUBGT.js";
 import {
   define_import_meta_env_default
-} from "./chunk-BVSQPBD5.js";
+} from "./chunk-45NC7SKS.js";
 import {
   en_default
 } from "./chunk-WBVI4CIR.js";
@@ -111,7 +111,7 @@ import {
   shouldMaintainAspectRatio,
   shouldRotateWithDiscreteAngle as shouldRotateWithDiscreteAngle3,
   isArrowKey as isArrowKey2,
-  KEYS as KEYS55,
+  KEYS as KEYS54,
   APP_NAME as APP_NAME2,
   CURSOR_TYPE as CURSOR_TYPE4,
   DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT,
@@ -9543,7 +9543,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-BVTQCISX.js").then(
+        (blob2) => import("./data/image-SLFRXHXO.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -12438,7 +12438,7 @@ import { useEffect as useEffect28, useRef as useRef24, useMemo as useMemo8, useS
 import {
   DEFAULT_SIDEBAR as DEFAULT_SIDEBAR2,
   EVENT as EVENT10,
-  KEYS as KEYS38,
+  KEYS as KEYS37,
   capitalizeString as capitalizeString3,
   isWritableElement as isWritableElement3
 } from "@excalidraw/common";
@@ -12611,7 +12611,7 @@ var Panel = ({
       }
     }
   }, [genericElements, app.scene]);
-  const SHAPES3 = conversionType === "linear" ? [
+  const SHAPES6 = conversionType === "linear" ? [
     ["line", LineIcon],
     ["sharpArrow", sharpArrowIcon],
     ["curvedArrow", roundArrowIcon],
@@ -12633,7 +12633,7 @@ var Panel = ({
         zIndex: 2
       },
       className: CLASSES.CONVERT_ELEMENT_TYPE_POPUP,
-      children: SHAPES3.map(([type, icon]) => {
+      children: SHAPES6.map(([type, icon]) => {
         const isSelected = sameType && (conversionType === "generic" && genericElements[0].type === type || conversionType === "linear" && getLinearElementSubType(linearElements[0]) === type);
         return /* @__PURE__ */ jsx51(
           ToolButton,
@@ -16492,98 +16492,8 @@ var Dialog = (props) => {
   );
 };
 
-// components/shapes.tsx
-import { KEYS as KEYS35 } from "@excalidraw/common";
-var SHAPES = [
-  {
-    icon: SelectionIcon,
-    value: "selection",
-    key: KEYS35.V,
-    fillable: true,
-    myocSimplifiedMode: true
-  },
-  {
-    icon: RectangleIcon,
-    value: "rectangle",
-    key: KEYS35.R,
-    fillable: true,
-    myocSimplifiedMode: false
-  },
-  {
-    icon: DiamondIcon,
-    value: "diamond",
-    key: KEYS35.D,
-    fillable: true,
-    myocSimplifiedMode: false
-  },
-  {
-    icon: EllipseIcon,
-    value: "ellipse",
-    key: KEYS35.O,
-    fillable: true,
-    myocSimplifiedMode: false
-  },
-  {
-    icon: ArrowIcon,
-    value: "arrow",
-    key: KEYS35.A,
-    fillable: true,
-    myocSimplifiedMode: false
-  },
-  {
-    icon: LineIcon,
-    value: "line",
-    key: KEYS35.L,
-    fillable: true,
-    myocSimplifiedMode: false
-  },
-  {
-    icon: FreedrawIcon,
-    value: "freedraw",
-    key: [KEYS35.P, KEYS35.X],
-    fillable: false,
-    myocSimplifiedMode: true
-  },
-  {
-    icon: TextIcon,
-    value: "text",
-    key: KEYS35.T,
-    fillable: false,
-    myocSimplifiedMode: true
-  },
-  {
-    icon: ImageIcon,
-    value: "image",
-    key: [KEYS35.I],
-    fillable: false,
-    myocSimplifiedMode: true
-  },
-  {
-    icon: EraserIcon,
-    value: "eraser",
-    key: KEYS35.E,
-    fillable: false,
-    myocSimplifiedMode: true
-  }
-];
-var getToolbarTools = (app) => {
-  return app.state.preferredSelectionTool.type === "lasso" ? [
-    {
-      value: "lasso",
-      icon: SelectionIcon,
-      key: KEYS35.V,
-      fillable: true,
-      myocSimplifiedMode: true
-    },
-    ...SHAPES.slice(1)
-  ] : SHAPES;
-};
-var findShapeByKey = (key, app) => {
-  const shape = getToolbarTools(app).find((shape2, index) => {
-    return shape2.key && (typeof shape2.key === "string" ? shape2.key === key : shape2.key.includes(key));
-  });
-  return shape?.value || null;
-};
+// components/CommandPalette/CommandPalette.tsx
+import { SHAPES as SHAPES2 } from "@excalidraw/element/shapes";
 
 // components/Actions.tsx
 import clsx35 from "clsx";
@@ -16591,7 +16501,7 @@ import { useMemo as useMemo7, useRef as useRef22, useState as useState23 } from
 import * as Popover7 from "@radix-ui/react-popover";
 import {
   CLASSES as CLASSES3,
-  KEYS as KEYS37,
+  KEYS as KEYS36,
   capitalizeString as capitalizeString2,
   isTransparent as isTransparent2
 } from "@excalidraw/common";
@@ -16609,7 +16519,7 @@ import {
 } from "@excalidraw/element";
 
 // actions/actionToggleViewMode.tsx
-import { CODES as CODES11, KEYS as KEYS36 } from "@excalidraw/common";
+import { CODES as CODES11, KEYS as KEYS35 } from "@excalidraw/common";
 import clsx33 from "clsx";
 import { CaptureUpdateAction as CaptureUpdateAction30 } from "@excalidraw/element";
 import { jsx as jsx72 } from "react/jsx-runtime";
@@ -16635,7 +16545,7 @@ var actionToggleViewMode = register({
   predicate: (elements, appState, appProps) => {
     return typeof appProps.viewModeEnabled === "undefined";
   },
-  keyTest: (event) => !event[KEYS36.CTRL_OR_CMD] && event.altKey && event.code === CODES11.R,
+  keyTest: (event) => !event[KEYS35.CTRL_OR_CMD] && event.altKey && event.code === CODES11.R,
   PanelComponent: ({ data, updateData, appState }) => /* @__PURE__ */ jsx72(
     ToolButton,
     {
@@ -16652,6 +16562,9 @@ var actionToggleViewMode = register({
   )
 });
 
+// components/Actions.tsx
+import { getToolbarTools, SHAPES } from "@excalidraw/element/shapes";
+
 // components/ToolPopover.tsx
 import { useEffect as useEffect27, useState as useState22 } from "react";
 import clsx34 from "clsx";
@@ -17647,7 +17560,7 @@ var ShapesSwitcher = ({
                 icon: app.state.activeTool.locked ? LockedIcon : UnlockedIcon,
                 "data-testid": `toolbar-lock`,
                 selected: app.state.activeTool.locked,
-                shortcut: KEYS37.Q,
+                shortcut: KEYS36.Q,
                 children: capitalizeString2(t("toolBar.lock-short"))
               }
             )
@@ -17759,7 +17672,7 @@ var CommandShortcutHint = ({
   ] });
 };
 var isCommandPaletteToggleShortcut = (event) => {
-  return !event.altKey && event[KEYS38.CTRL_OR_CMD] && (event.shiftKey && event.key.toLowerCase() === KEYS38.P || event.key === KEYS38.SLASH);
+  return !event.altKey && event[KEYS37.CTRL_OR_CMD] && (event.shiftKey && event.key.toLowerCase() === KEYS37.P || event.key === KEYS37.SLASH);
 };
 var CommandPalette = Object.assign(
   (props) => {
@@ -18064,7 +17977,7 @@ function CommandPaletteInner({
             }));
           }
         },
-        ...SHAPES.reduce((acc, shape) => {
+        ...SHAPES2.reduce((acc, shape) => {
           const { value, icon, key } = shape;
           if (appProps2.UIOptions.tools?.[value] === false) {
             return acc;
@@ -18096,7 +18009,7 @@ function CommandPaletteInner({
           label: t("toolBar.lock"),
           category: DEFAULT_CATEGORIES.tools,
           icon: uiAppState2.activeTool.locked ? LockedIcon : UnlockedIcon,
-          shortcut: KEYS38.Q.toLocaleUpperCase(),
+          shortcut: KEYS37.Q.toLocaleUpperCase(),
           viewMode: false,
           perform: () => {
             app.toggleLock();
@@ -18172,13 +18085,13 @@ function CommandPaletteInner({
     }
   );
   const handleKeyDown = useStableCallback((event) => {
-    const ignoreAlphanumerics = isWritableElement3(event.target) || isCommandPaletteToggleShortcut(event) || event.key === KEYS38.ESCAPE;
-    if (ignoreAlphanumerics && event.key !== KEYS38.ARROW_UP && event.key !== KEYS38.ARROW_DOWN && event.key !== KEYS38.ENTER) {
+    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) {
       return;
     }
     const matchingCommands = Object.values(commandsByCategory).flat();
     const shouldConsiderLastUsed = lastUsed && !commandSearch && isCommandAvailable(lastUsed);
-    if (event.key === KEYS38.ARROW_UP) {
+    if (event.key === KEYS37.ARROW_UP) {
       event.preventDefault();
       const index = matchingCommands.findIndex(
         (item) => item.label === currentCommand?.label
@@ -18208,7 +18121,7 @@ function CommandPaletteInner({
       }
       return;
     }
-    if (event.key === KEYS38.ARROW_DOWN) {
+    if (event.key === KEYS37.ARROW_DOWN) {
       event.preventDefault();
       const index = matchingCommands.findIndex(
         (item) => item.label === currentCommand?.label
@@ -18233,7 +18146,7 @@ function CommandPaletteInner({
       }
       return;
     }
-    if (event.key === KEYS38.ENTER) {
+    if (event.key === KEYS37.ENTER) {
       if (currentCommand) {
         setTimeout(() => {
           executeCommand(currentCommand, event);
@@ -18560,7 +18473,7 @@ import {
 } from "@excalidraw/math";
 import {
   DRAGGING_THRESHOLD,
-  KEYS as KEYS40,
+  KEYS as KEYS39,
   shouldRotateWithDiscreteAngle as shouldRotateWithDiscreteAngle2,
   getGridPoint,
   invariant as invariant11,
@@ -18576,7 +18489,7 @@ import {
 
 // ../element/src/binding.ts
 import {
-  KEYS as KEYS39,
+  KEYS as KEYS38,
   arrayToMap as arrayToMap17,
   getFeatureFlag,
   invariant as invariant10,
@@ -19970,7 +19883,7 @@ var actionTogglePolygon = register({
 
 // actions/actionToggleSearchMenu.ts
 import {
-  KEYS as KEYS41,
+  KEYS as KEYS40,
   CANVAS_SEARCH_TAB,
   CLASSES as CLASSES4,
   DEFAULT_SIDEBAR as DEFAULT_SIDEBAR3
@@ -20012,7 +19925,7 @@ var actionToggleSearchMenu = register({
   predicate: (element, appState, props) => {
     return props.gridModeEnabled === void 0;
   },
-  keyTest: (event) => event[KEYS41.CTRL_OR_CMD] && event.key === KEYS41.F
+  keyTest: (event) => event[KEYS40.CTRL_OR_CMD] && event.key === KEYS40.F
 });
 
 // actions/actionCropEditor.tsx
@@ -20235,7 +20148,7 @@ var actionWrapSelectionInFrame = register({
 // actions/actionHistory.tsx
 import {
   isWindows,
-  KEYS as KEYS42,
+  KEYS as KEYS41,
   matchKey as matchKey2,
   arrayToMap as arrayToMap23,
   MOBILE_ACTION_BUTTON_BG as MOBILE_ACTION_BUTTON_BG4
@@ -20466,7 +20379,7 @@ var createUndoAction = (history) => ({
     appState,
     () => history.undo(arrayToMap23(elements), appState)
   ),
-  keyTest: (event) => event[KEYS42.CTRL_OR_CMD] && matchKey2(event, KEYS42.Z) && !event.shiftKey,
+  keyTest: (event) => event[KEYS41.CTRL_OR_CMD] && matchKey2(event, KEYS41.Z) && !event.shiftKey,
   PanelComponent: ({ appState, updateData, data, app }) => {
     const { isUndoStackEmpty } = useEmitter(
       history.onHistoryChangedEmitter,
@@ -20504,7 +20417,7 @@ var createRedoAction = (history) => ({
     appState,
     () => history.redo(arrayToMap23(elements), appState)
   ),
-  keyTest: (event) => event[KEYS42.CTRL_OR_CMD] && event.shiftKey && matchKey2(event, KEYS42.Z) || isWindows && event.ctrlKey && !event.shiftKey && matchKey2(event, KEYS42.Y),
+  keyTest: (event) => event[KEYS41.CTRL_OR_CMD] && event.shiftKey && matchKey2(event, KEYS41.Z) || isWindows && event.ctrlKey && !event.shiftKey && matchKey2(event, KEYS41.Y),
   PanelComponent: ({ appState, updateData, data, app }) => {
     const { isRedoStackEmpty } = useEmitter(
       history.onHistoryChangedEmitter,
@@ -20775,7 +20688,7 @@ import {
   rangeIntersection,
   rangesOverlap
 } from "@excalidraw/math";
-import { TOOL_TYPE, KEYS as KEYS43 } from "@excalidraw/common";
+import { TOOL_TYPE, KEYS as KEYS42 } from "@excalidraw/common";
 import {
   getCommonBounds as getCommonBounds4,
   getDraggedElementsBounds,
@@ -20821,7 +20734,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[KEYS43.CTRL_OR_CMD] || !app.state.objectsSnapModeEnabled && event[KEYS43.CTRL_OR_CMD] && !isGridModeEnabled(app));
+    return (app.state.activeTool.type !== "lasso" || isLassoDragging) && (app.state.objectsSnapModeEnabled && !event[KEYS42.CTRL_OR_CMD] || !app.state.objectsSnapModeEnabled && event[KEYS42.CTRL_OR_CMD] && !isGridModeEnabled(app));
   }
   if (selectedElements.length === 1 && selectedElements[0].type === "arrow") {
     return false;
@@ -22150,7 +22063,7 @@ var isRenderThrottlingEnabled = (() => {
 // wysiwyg/textWysiwyg.tsx
 import {
   CODES as CODES12,
-  KEYS as KEYS44,
+  KEYS as KEYS43,
   CLASSES as CLASSES5,
   POINTER_BUTTON,
   THEME as THEME11,
@@ -22440,7 +22353,7 @@ var textWysiwyg = ({
       app.actionManager.executeAction(actionDecreaseFontSize);
     } else if (actionIncreaseFontSize.keyTest(event)) {
       app.actionManager.executeAction(actionIncreaseFontSize);
-    } else if (event.key === KEYS44.ESCAPE) {
+    } else if (event.key === KEYS43.ESCAPE) {
       event.preventDefault();
       submittedViaKeyboard = true;
       handleSubmit();
@@ -22448,14 +22361,14 @@ var textWysiwyg = ({
       event.preventDefault();
       handleSubmit();
       app.actionManager.executeAction(actionSaveToActiveFile);
-    } else if (event.key === KEYS44.ENTER && event[KEYS44.CTRL_OR_CMD]) {
+    } else if (event.key === KEYS43.ENTER && event[KEYS43.CTRL_OR_CMD]) {
       event.preventDefault();
       if (event.isComposing || event.keyCode === 229) {
         return;
       }
       submittedViaKeyboard = true;
       handleSubmit();
-    } else if (event.key === KEYS44.TAB || event[KEYS44.CTRL_OR_CMD] && (event.code === CODES12.BRACKET_LEFT || event.code === CODES12.BRACKET_RIGHT)) {
+    } else if (event.key === KEYS43.TAB || event[KEYS43.CTRL_OR_CMD] && (event.code === CODES12.BRACKET_LEFT || event.code === CODES12.BRACKET_RIGHT)) {
       event.preventDefault();
       if (event.isComposing) {
         return;
@@ -23007,7 +22920,7 @@ var LassoTrail = class extends AnimatedTrail {
 };
 
 // actions/actionSmartZoom.tsx
-import { KEYS as KEYS45 } from "@excalidraw/common";
+import { KEYS as KEYS44 } from "@excalidraw/common";
 import { jsx as jsx81 } from "react/jsx-runtime";
 var actionSmartZoom = register({
   name: "smartZoom",
@@ -23032,7 +22945,7 @@ var actionSmartZoom = register({
       captureUpdate: CaptureUpdateAction38.NEVER
     };
   },
-  keyTest: (event) => !event[KEYS45.CTRL_OR_CMD] && !event.shiftKey && !event.altKey && event.key.toLocaleLowerCase() === KEYS45.F,
+  keyTest: (event) => !event[KEYS44.CTRL_OR_CMD] && !event.shiftKey && !event.altKey && event.key.toLocaleLowerCase() === KEYS44.F,
   PanelComponent: ({ data, updateData }) => /* @__PURE__ */ jsx81(
     ToolButton,
     {
@@ -23042,7 +22955,7 @@ var actionSmartZoom = register({
       onClick: () => updateData(null),
       size: data?.size || "medium",
       "data-testid": "button-smart-zoom",
-      keyBindingLabel: KEYS45.F.toLocaleUpperCase()
+      keyBindingLabel: KEYS44.F.toLocaleUpperCase()
     }
   )
 });
@@ -23308,7 +23221,7 @@ import React30 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 KEYS46, queryFocusableElements as queryFocusableElements2 } from "@excalidraw/common";
+import { KEYS as KEYS45, queryFocusableElements as queryFocusableElements2 } from "@excalidraw/common";
 import clsx37 from "clsx";
 import { jsx as jsx83 } from "react/jsx-runtime";
 var Popover8 = ({
@@ -23333,7 +23246,7 @@ var Popover8 = ({
       container.focus();
     }
     const handleKeyDown = (event) => {
-      if (event.key === KEYS46.TAB) {
+      if (event.key === KEYS45.TAB) {
         const focusableElements = queryFocusableElements2(container);
         const { activeElement } = document;
         const currentIndex = focusableElements.findIndex(
@@ -23620,11 +23533,11 @@ var LoadingMessage = ({
 // components/MobileToolBar.tsx
 import { useState as useState27 } from "react";
 import clsx41 from "clsx";
-import { KEYS as KEYS48, capitalizeString as capitalizeString4 } from "@excalidraw/common";
+import { KEYS as KEYS47, capitalizeString as capitalizeString4 } from "@excalidraw/common";
 
 // components/HandButton.tsx
 import clsx40 from "clsx";
-import { KEYS as KEYS47 } from "@excalidraw/common";
+import { KEYS as KEYS46 } from "@excalidraw/common";
 import { jsx as jsx87 } from "react/jsx-runtime";
 var HandButton = (props) => {
   return /* @__PURE__ */ jsx87(
@@ -23636,9 +23549,9 @@ var HandButton = (props) => {
       name: "editor-current-shape",
       checked: props.checked,
       title: `${props.title} \u2014 H`,
-      keyBindingLabel: !props.isMobile ? KEYS47.H.toLocaleUpperCase() : void 0,
+      keyBindingLabel: !props.isMobile ? KEYS46.H.toLocaleUpperCase() : void 0,
       "aria-label": `${props.title} \u2014 H`,
-      "aria-keyshortcuts": KEYS47.H,
+      "aria-keyshortcuts": KEYS46.H,
       "data-testid": `toolbar-hand`,
       onChange: () => props.onChange?.()
     }
@@ -23646,6 +23559,7 @@ var HandButton = (props) => {
 };
 
 // components/MobileToolBar.tsx
+import { SHAPES as SHAPES3 } from "@excalidraw/element/shapes";
 import { jsx as jsx88, jsxs as jsxs46 } from "react/jsx-runtime";
 var SELECTION_TOOLS = [
   {
@@ -23688,7 +23602,7 @@ var MobileToolBar = ({
   const showTextToolOutside = toolbarWidth >= MIN_WIDTH + 1 * ADDITIONAL_WIDTH;
   const showImageToolOutside = toolbarWidth >= MIN_WIDTH + 2 * ADDITIONAL_WIDTH;
   const showFrameToolOutside = toolbarWidth >= MIN_WIDTH + 3 * ADDITIONAL_WIDTH;
-  const simplifiedShapeTools = SHAPES.filter(
+  const simplifiedShapeTools = SHAPES3.filter(
     (s) => s.myocSimplifiedMode === false
   );
   const extraTools = [
@@ -23873,7 +23787,7 @@ var MobileToolBar = ({
                     icon: app.state.activeTool.locked ? LockedIcon : UnlockedIcon,
                     "data-testid": `toolbar-lock`,
                     selected: app.state.activeTool.locked,
-                    shortcut: KEYS48.Q,
+                    shortcut: KEYS47.Q,
                     children: capitalizeString4(t("toolBar.lock-short"))
                   }
                 ),
@@ -23882,7 +23796,7 @@ var MobileToolBar = ({
                   {
                     onSelect: () => app.setActiveTool({ type: "text" }),
                     icon: TextIcon,
-                    shortcut: KEYS48.T.toLocaleUpperCase(),
+                    shortcut: KEYS47.T.toLocaleUpperCase(),
                     "data-testid": "toolbar-text",
                     selected: activeTool.type === "text",
                     children: t("toolBar.text")
@@ -24455,7 +24369,7 @@ import {
   CLASSES as CLASSES6,
   EVENT as EVENT11,
   isDevEnv as isDevEnv7,
-  KEYS as KEYS49,
+  KEYS as KEYS48,
   updateObject
 } from "@excalidraw/common";
 
@@ -24695,7 +24609,7 @@ var SidebarInner = forwardRef4(
     );
     useEffect32(() => {
       const handleKeyDown = (event) => {
-        if (event.key === KEYS49.ESCAPE && (!docked || !editorInterface.canFitSidebar)) {
+        if (event.key === KEYS48.ESCAPE && (!docked || !editorInterface.canFitSidebar)) {
           closeLibrary();
         }
       };
@@ -25481,7 +25395,7 @@ import {
 import { isElementCompletelyInViewport } from "@excalidraw/element";
 import { measureText as measureText5 } from "@excalidraw/element";
 import {
-  KEYS as KEYS50,
+  KEYS as KEYS49,
   randomInteger as randomInteger3,
   addEventListener as addEventListener2,
   getFontString as getFontString8
@@ -25654,7 +25568,7 @@ var SearchMenu2 = () => {
   });
   useEffect33(() => {
     const eventHandler = (event) => {
-      if (event.key === KEYS50.ESCAPE && !app.state.openDialog && !app.state.openPopup) {
+      if (event.key === KEYS49.ESCAPE && !app.state.openDialog && !app.state.openPopup) {
         event.preventDefault();
         event.stopPropagation();
         setAppState({
@@ -25662,7 +25576,7 @@ var SearchMenu2 = () => {
         });
         return;
       }
-      if (event[KEYS50.CTRL_OR_CMD] && event.key === KEYS50.F) {
+      if (event[KEYS49.CTRL_OR_CMD] && event.key === KEYS49.F) {
         event.preventDefault();
         event.stopPropagation();
         if (app.state.openDialog) {
@@ -25680,14 +25594,14 @@ var SearchMenu2 = () => {
       }
       if (event.target instanceof HTMLElement && event.target.closest(".layer-ui__search")) {
         if (stableState.searchMatches.items.length) {
-          if (event.key === KEYS50.ENTER) {
+          if (event.key === KEYS49.ENTER) {
             event.stopPropagation();
             stableState.goToNextItem();
           }
-          if (event.key === KEYS50.ARROW_UP) {
+          if (event.key === KEYS49.ARROW_UP) {
             event.stopPropagation();
             stableState.goToPreviousItem();
-          } else if (event.key === KEYS50.ARROW_DOWN) {
+          } else if (event.key === KEYS49.ARROW_DOWN) {
             event.stopPropagation();
             stableState.goToNextItem();
           }
@@ -26176,7 +26090,7 @@ import { updateBindings as updateBindings3 } from "@excalidraw/element";
 // components/Stats/DragInput.tsx
 import clsx53 from "clsx";
 import { useEffect as useEffect34, useRef as useRef30, useState as useState32 } from "react";
-import { EVENT as EVENT13, KEYS as KEYS51, cloneJSON as cloneJSON3 } from "@excalidraw/common";
+import { EVENT as EVENT13, KEYS as KEYS50, cloneJSON as cloneJSON3 } from "@excalidraw/common";
 import { deepCopyElement as deepCopyElement4 } from "@excalidraw/element";
 import { CaptureUpdateAction as CaptureUpdateAction39 } from "@excalidraw/element";
 
@@ -26535,7 +26449,7 @@ var StatsDragInput = ({
             onKeyDown: (event) => {
               if (editable) {
                 const eventTarget = event.target;
-                if (eventTarget instanceof HTMLInputElement && event.key === KEYS51.ENTER) {
+                if (eventTarget instanceof HTMLInputElement && event.key === KEYS50.ENTER) {
                   handleInputValue(eventTarget.value, elements, appState);
                   app.focusContainer();
                 }
@@ -28263,7 +28177,7 @@ var StatsInner = memo5(
 
 // components/ElementLinkDialog.tsx
 import { useCallback as useCallback13, useEffect as useEffect36, useState as useState34 } from "react";
-import { normalizeLink as normalizeLink2, KEYS as KEYS52 } from "@excalidraw/common";
+import { normalizeLink as normalizeLink2, KEYS as KEYS51 } from "@excalidraw/common";
 import {
   defaultGetElementLinkFromSelection as defaultGetElementLinkFromSelection2,
   getLinkIdAndTypeFromSelection as getLinkIdAndTypeFromSelection2
@@ -28319,10 +28233,10 @@ var ElementLinkDialog = ({
   }, [sourceElementId, nextLink, elementsMap, linkEdited, scene, onClose]);
   useEffect36(() => {
     const handleKeyDown = (event) => {
-      if (appState.openDialog?.name === "elementLinkSelector" && event.key === KEYS52.ENTER) {
+      if (appState.openDialog?.name === "elementLinkSelector" && event.key === KEYS51.ENTER) {
         handleConfirm();
       }
-      if (appState.openDialog?.name === "elementLinkSelector" && event.key === KEYS52.ESCAPE) {
+      if (appState.openDialog?.name === "elementLinkSelector" && event.key === KEYS51.ESCAPE) {
         onClose?.();
       }
     };
@@ -28348,7 +28262,7 @@ var ElementLinkDialog = ({
             setNextLink(value);
           },
           onKeyDown: (event) => {
-            if (event.key === KEYS52.ENTER) {
+            if (event.key === KEYS51.ENTER) {
               handleConfirm();
             }
           },
@@ -28448,11 +28362,12 @@ var FixedSideContainer = ({
 import React39, { useMemo as useMemo13 } from "react";
 import clsx56 from "clsx";
 import { isDarwin as isDarwin4, isFirefox as isFirefox4, isWindows as isWindows2 } from "@excalidraw/common";
-import { KEYS as KEYS54 } from "@excalidraw/common";
-import { SHAPES as SHAPES2 } from "@excalidraw/element/shapes";
+import { KEYS as KEYS53 } from "@excalidraw/common";
+import { SHAPES as SHAPES5 } from "@excalidraw/element/shapes";
 
 // components/HelpDialog/BasicHelpDialog.tsx
-import { isFirefox as isFirefox3, KEYS as KEYS53 } from "@excalidraw/common";
+import { isFirefox as isFirefox3, KEYS as KEYS52 } from "@excalidraw/common";
+import { SHAPES as SHAPES4 } from "@excalidraw/element/shapes";
 import { Fragment as Fragment20, jsx as jsx127, jsxs as jsxs67 } from "react/jsx-runtime";
 var Section2 = (props) => /* @__PURE__ */ jsxs67(Fragment20, { children: [
   /* @__PURE__ */ jsx127("h3", { children: props.title }),
@@ -28498,8 +28413,8 @@ function BasicHelpDialog() {
         className: "HelpDialog__island--tools",
         caption: t("helpDialog.tools"),
         children: [
-          /* @__PURE__ */ jsx127(Shortcut, { label: t("toolBar.hand"), shortcuts: [KEYS53.H] }),
-          SHAPES.filter(({ myocSimplifiedMode }) => myocSimplifiedMode).map(
+          /* @__PURE__ */ jsx127(Shortcut, { label: t("toolBar.hand"), shortcuts: [KEYS52.H] }),
+          SHAPES4.filter(({ myocSimplifiedMode }) => myocSimplifiedMode).map(
             ({ value, key }) => /* @__PURE__ */ jsx127(
               Shortcut,
               {
@@ -28534,7 +28449,7 @@ function BasicHelpDialog() {
         className: "HelpDialog__island--view",
         caption: t("helpDialog.view"),
         children: [
-          /* @__PURE__ */ jsx127(Shortcut, { label: t("helpDialog.smartZoom"), shortcuts: [KEYS53.F] }),
+          /* @__PURE__ */ jsx127(Shortcut, { label: t("helpDialog.smartZoom"), shortcuts: [KEYS52.F] }),
           /* @__PURE__ */ jsx127(
             Shortcut,
             {
@@ -28721,8 +28636,8 @@ var HelpDialog = ({ onClose }) => {
             className: "HelpDialog__island--tools",
             caption: t("helpDialog.tools"),
             children: [
-              /* @__PURE__ */ jsx128(Shortcut2, { label: t("toolBar.hand"), shortcuts: [KEYS54.H] }),
-              SHAPES2.map(({ value, key }) => /* @__PURE__ */ jsx128(
+              /* @__PURE__ */ jsx128(Shortcut2, { label: t("toolBar.hand"), shortcuts: [KEYS53.H] }),
+              SHAPES5.map(({ value, key }) => /* @__PURE__ */ jsx128(
                 Shortcut2,
                 {
                   label: t(`toolBar.${value}`),
@@ -28730,13 +28645,13 @@ var HelpDialog = ({ onClose }) => {
                 },
                 value
               )),
-              /* @__PURE__ */ jsx128(Shortcut2, { label: t("toolBar.frame"), shortcuts: [KEYS54.F] }),
-              /* @__PURE__ */ jsx128(Shortcut2, { label: t("toolBar.laser"), shortcuts: [KEYS54.K] }),
+              /* @__PURE__ */ jsx128(Shortcut2, { label: t("toolBar.frame"), shortcuts: [KEYS53.F] }),
+              /* @__PURE__ */ jsx128(Shortcut2, { label: t("toolBar.laser"), shortcuts: [KEYS53.K] }),
               /* @__PURE__ */ jsx128(
                 Shortcut2,
                 {
                   label: t("labels.eyeDropper"),
-                  shortcuts: [KEYS54.I, "Shift+S", "Shift+G"]
+                  shortcuts: [KEYS53.I, "Shift+S", "Shift+G"]
                 }
               ),
               /* @__PURE__ */ jsx128(
@@ -28818,7 +28733,7 @@ var HelpDialog = ({ onClose }) => {
                   isOr: true
                 }
               ),
-              /* @__PURE__ */ jsx128(Shortcut2, { label: t("toolBar.lock"), shortcuts: [KEYS54.Q] }),
+              /* @__PURE__ */ jsx128(Shortcut2, { label: t("toolBar.lock"), shortcuts: [KEYS53.Q] }),
               /* @__PURE__ */ jsx128(
                 Shortcut2,
                 {
@@ -28854,7 +28769,7 @@ var HelpDialog = ({ onClose }) => {
                 Shortcut2,
                 {
                   label: t("helpDialog.smartZoom"),
-                  shortcuts: [KEYS54.F]
+                  shortcuts: [KEYS53.F]
                 }
               ),
               /* @__PURE__ */ jsx128(
@@ -32307,6 +32222,9 @@ var Toast = ({
   );
 };
 
+// components/App.tsx
+import { findShapeByKey } from "@excalidraw/element/shapes";
+
 // components/UnlockPopup.tsx
 import {
   getCommonBounds as getCommonBounds10,
@@ -32635,7 +32553,7 @@ var App = class _App extends React45.Component {
               onFocus: (e) => e.target.select(),
               onBlur: () => this.resetEditingFrame(f),
               onKeyDown: (event) => {
-                if (event.key === KEYS55.ESCAPE || event.key === KEYS55.ENTER) {
+                if (event.key === KEYS54.ESCAPE || event.key === KEYS54.ENTER) {
                   this.resetEditingFrame(f);
                 }
               },
@@ -33719,7 +33637,7 @@ var App = class _App extends React45.Component {
           });
         }
         if (!isInputLike(event.target)) {
-          if ((event.key === KEYS55.ESCAPE || event.key === KEYS55.ENTER) && this.state.croppingElementId) {
+          if ((event.key === KEYS54.ESCAPE || event.key === KEYS54.ENTER) && this.state.croppingElementId) {
             this.finishImageCropping();
             return;
           }
@@ -33727,13 +33645,13 @@ var App = class _App extends React45.Component {
             this.scene.getNonDeletedElementsMap(),
             this.state
           );
-          if (selectedElements.length === 1 && isImageElement9(selectedElements[0]) && event.key === KEYS55.ENTER) {
+          if (selectedElements.length === 1 && isImageElement9(selectedElements[0]) && event.key === KEYS54.ENTER) {
             this.startImageCropping(selectedElements[0]);
             return;
           }
-          if (event.key === KEYS55.ESCAPE) {
+          if (event.key === KEYS54.ESCAPE) {
             this.updateEditorAtom(convertElementTypePopupAtom, null);
-          } else if (event.key === KEYS55.TAB && (document.activeElement === this.excalidrawContainerRef?.current || document.activeElement?.classList.contains(
+          } else if (event.key === KEYS54.TAB && (document.activeElement === this.excalidrawContainerRef?.current || document.activeElement?.classList.contains(
             CLASSES9.CONVERT_ELEMENT_TYPE_POPUP
           ))) {
             event.preventDefault();
@@ -33752,13 +33670,13 @@ var App = class _App extends React45.Component {
               });
             }
           }
-          if (event.key === KEYS55.ESCAPE && this.flowChartCreator.isCreatingChart) {
+          if (event.key === KEYS54.ESCAPE && this.flowChartCreator.isCreatingChart) {
             this.flowChartCreator.clear();
             this.triggerRender(true);
             return;
           }
           const arrowKeyPressed = isArrowKey2(event.key);
-          if (event[KEYS55.CTRL_OR_CMD] && arrowKeyPressed && !event.shiftKey) {
+          if (event[KEYS54.CTRL_OR_CMD] && arrowKeyPressed && !event.shiftKey) {
             event.preventDefault();
             const selectedElements2 = getSelectedElements(
               this.scene.getNonDeletedElementsMap(),
@@ -33842,7 +33760,7 @@ var App = class _App extends React45.Component {
             }
           }
         }
-        if (event[KEYS55.CTRL_OR_CMD] && event.key === KEYS55.P && !event.shiftKey && !event.altKey) {
+        if (event[KEYS54.CTRL_OR_CMD] && event.key === KEYS54.P && !event.shiftKey && !event.altKey) {
           this.setToast({
             message: t("commandPalette.shortcutHint", {
               shortcut: getShortcutFromShortcutName("commandPalette")
@@ -33851,14 +33769,14 @@ var App = class _App extends React45.Component {
           event.preventDefault();
           return;
         }
-        if (event[KEYS55.CTRL_OR_CMD] && event.key.toLowerCase() === KEYS55.V) {
+        if (event[KEYS54.CTRL_OR_CMD] && event.key.toLowerCase() === KEYS54.V) {
           IS_PLAIN_PASTE = event.shiftKey;
           clearTimeout(IS_PLAIN_PASTE_TIMER);
           IS_PLAIN_PASTE_TIMER = window.setTimeout(() => {
             IS_PLAIN_PASTE = false;
           }, 100);
         }
-        if (event[KEYS55.CTRL_OR_CMD] && isWritableElement5(event.target)) {
+        if (event[KEYS54.CTRL_OR_CMD] && isWritableElement5(event.target)) {
           if (event.code === CODES13.MINUS || event.code === CODES13.EQUAL) {
             event.preventDefault();
             return;
@@ -33867,24 +33785,24 @@ var App = class _App extends React45.Component {
         if (
           // inside an input
           isWritableElement5(event.target) && // unless pressing escape (finalize action)
-          event.key !== KEYS55.ESCAPE || // or unless using arrows (to move between buttons)
+          event.key !== KEYS54.ESCAPE || // or unless using arrows (to move between buttons)
           isArrowKey2(event.key) && isInputLike(event.target)
         ) {
           return;
         }
-        if (event.key === KEYS55.QUESTION_MARK) {
+        if (event.key === KEYS54.QUESTION_MARK) {
           this.setState({
             openDialog: { name: "help" }
           });
           return;
-        } else if (event.key.toLowerCase() === KEYS55.E && event.shiftKey && event[KEYS55.CTRL_OR_CMD]) {
+        } else if (event.key.toLowerCase() === KEYS54.E && event.shiftKey && event[KEYS54.CTRL_OR_CMD]) {
           event.preventDefault();
           this.setState({ openDialog: { name: "imageExport" } });
           return;
         }
-        if (event.key === KEYS55.PAGE_UP || event.key === KEYS55.PAGE_DOWN) {
+        if (event.key === KEYS54.PAGE_UP || event.key === KEYS54.PAGE_DOWN) {
           let offset = (event.shiftKey ? this.state.width : this.state.height) / this.state.zoom.value;
-          if (event.key === KEYS55.PAGE_DOWN) {
+          if (event.key === KEYS54.PAGE_DOWN) {
             offset = -offset;
           }
           if (event.shiftKey) {
@@ -33900,7 +33818,7 @@ var App = class _App extends React45.Component {
         if (this.state.openDialog?.name === "elementLinkSelector") {
           return;
         }
-        if (event.key === KEYS55.ALT && getFeatureFlag4("COMPLEX_BINDINGS")) {
+        if (event.key === KEYS54.ALT && getFeatureFlag4("COMPLEX_BINDINGS")) {
           this.handleSkipBindMode();
         }
         if (this.actionManager.handleKeyDown(event)) {
@@ -33909,7 +33827,7 @@ var App = class _App extends React45.Component {
         if (this.state.viewModeEnabled) {
           return;
         }
-        if (event[KEYS55.CTRL_OR_CMD] && this.state.isBindingEnabled) {
+        if (event[KEYS54.CTRL_OR_CMD] && this.state.isBindingEnabled) {
           if (getFeatureFlag4("COMPLEX_BINDINGS")) {
             this.resetDelayedBindMode();
           }
@@ -33939,13 +33857,13 @@ var App = class _App extends React45.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 === KEYS55.ARROW_LEFT) {
+          if (event.key === KEYS54.ARROW_LEFT) {
             offsetX = -step;
-          } else if (event.key === KEYS55.ARROW_RIGHT) {
+          } else if (event.key === KEYS54.ARROW_RIGHT) {
             offsetX = step;
-          } else if (event.key === KEYS55.ARROW_UP) {
+          } else if (event.key === KEYS54.ARROW_UP) {
             offsetY = -step;
-          } else if (event.key === KEYS55.ARROW_DOWN) {
+          } else if (event.key === KEYS54.ARROW_DOWN) {
             offsetY = step;
           }
           selectedElements.forEach((element) => {
@@ -33963,11 +33881,11 @@ var App = class _App extends React45.Component {
           });
           this.scene.triggerUpdate();
           event.preventDefault();
-        } else if (event.key === KEYS55.ENTER) {
+        } else if (event.key === KEYS54.ENTER) {
           const selectedElements = this.scene.getSelectedElements(this.state);
           if (selectedElements.length === 1) {
             const selectedElement = selectedElements[0];
-            if (event[KEYS55.CTRL_OR_CMD] || isLineElement8(selectedElement)) {
+            if (event[KEYS54.CTRL_OR_CMD] || isLineElement8(selectedElement)) {
               if (isLinearElement12(selectedElement)) {
                 if (!this.state.selectedLinearElement?.isEditing || this.state.selectedLinearElement.elementId !== selectedElement.id) {
                   this.store.scheduleCapture();
@@ -34018,31 +33936,31 @@ var App = class _App extends React45.Component {
             }
             this.setActiveTool({ type: shape });
             event.stopPropagation();
-          } else if (event.key === KEYS55.Q) {
+          } else if (event.key === KEYS54.Q) {
             this.toggleLock("keyboard");
             event.stopPropagation();
           }
         }
-        if (event.key === KEYS55.SPACE && gesture.pointers.size === 0) {
+        if (event.key === KEYS54.SPACE && gesture.pointers.size === 0) {
           isHoldingSpace = true;
           setCursor(this.interactiveCanvas, CURSOR_TYPE4.GRAB);
           event.preventDefault();
         }
-        if ((event.key === KEYS55.G || event.key === KEYS55.S) && !event.altKey && !event[KEYS55.CTRL_OR_CMD]) {
+        if ((event.key === KEYS54.G || event.key === KEYS54.S) && !event.altKey && !event[KEYS54.CTRL_OR_CMD]) {
           const selectedElements = this.scene.getSelectedElements(this.state);
           if (this.state.activeTool.type === "selection" && !selectedElements.length) {
             return;
           }
-          if (event.key === KEYS55.G && (hasBackground(this.state.activeTool.type) || selectedElements.some((element) => hasBackground(element.type)))) {
+          if (event.key === KEYS54.G && (hasBackground(this.state.activeTool.type) || selectedElements.some((element) => hasBackground(element.type)))) {
             this.setState({ openPopup: "elementBackground" });
             event.stopPropagation();
           }
-          if (event.key === KEYS55.S) {
+          if (event.key === KEYS54.S) {
             this.setState({ openPopup: "elementStroke" });
             event.stopPropagation();
           }
         }
-        if (!event[KEYS55.CTRL_OR_CMD] && event.shiftKey && event.key.toLowerCase() === KEYS55.F) {
+        if (!event[KEYS54.CTRL_OR_CMD] && event.shiftKey && event.key.toLowerCase() === KEYS54.F) {
           const selectedElements = this.scene.getSelectedElements(this.state);
           if (this.state.activeTool.type === "selection" && !selectedElements.length) {
             return;
@@ -34057,7 +33975,7 @@ var App = class _App extends React45.Component {
             this.setState({ openPopup: "fontFamily" });
           }
         }
-        if (event.key === KEYS55.K && !event.altKey && !event[KEYS55.CTRL_OR_CMD]) {
+        if (event.key === KEYS54.K && !event.altKey && !event[KEYS54.CTRL_OR_CMD]) {
           if (this.state.activeTool.type === "laser") {
             this.setActiveTool({ type: this.state.preferredSelectionTool.type });
           } else {
@@ -34066,8 +33984,8 @@ var App = class _App extends React45.Component {
           return;
         }
         const lowerCased = event.key.toLocaleLowerCase();
-        const isPickingStroke = lowerCased === KEYS55.S && event.shiftKey;
-        const isPickingBackground = event.key === KEYS55.I || lowerCased === KEYS55.G && event.shiftKey;
+        const isPickingStroke = lowerCased === KEYS54.S && event.shiftKey;
+        const isPickingBackground = event.key === KEYS54.I || lowerCased === KEYS54.G && event.shiftKey;
         if (isPickingStroke || isPickingBackground) {
           this.openEyeDropper({
             type: isPickingStroke ? "stroke" : "background"
@@ -34076,7 +33994,7 @@ var App = class _App extends React45.Component {
       }
     ));
     __publicField(this, "onKeyUp", withBatchedUpdates((event) => {
-      if (event.key === KEYS55.SPACE) {
+      if (event.key === KEYS54.SPACE) {
         if (this.state.viewModeEnabled || this.state.openDialog?.name === "elementLinkSelector") {
           setCursor(this.interactiveCanvas, CURSOR_TYPE4.GRAB);
         } else if (isSelectionLikeTool(this.state.activeTool.type)) {
@@ -34092,7 +34010,7 @@ var App = class _App extends React45.Component {
         }
         isHoldingSpace = false;
       }
-      if (event.key === KEYS55.ALT && this.state.bindMode === "skip" || !event[KEYS55.CTRL_OR_CMD] && !isBindingEnabled2(this.state)) {
+      if (event.key === KEYS54.ALT && this.state.bindMode === "skip" || !event[KEYS54.CTRL_OR_CMD] && !isBindingEnabled2(this.state)) {
         this.setState({
           bindMode: "orbit"
         });
@@ -34120,7 +34038,7 @@ var App = class _App extends React45.Component {
           }
         }
       }
-      if (!event[KEYS55.CTRL_OR_CMD] && !this.state.isBindingEnabled) {
+      if (!event[KEYS54.CTRL_OR_CMD] && !this.state.isBindingEnabled) {
         this.setState({ isBindingEnabled: true });
       }
       if (isArrowKey2(event.key)) {
@@ -34172,7 +34090,7 @@ var App = class _App extends React45.Component {
           });
         }
       }
-      if (!event[KEYS55.CTRL_OR_CMD]) {
+      if (!event[KEYS54.CTRL_OR_CMD]) {
         if (this.flowChartCreator.isCreatingChart) {
           if (this.flowChartCreator.pendingNodes?.length) {
             this.scene.insertElements(this.flowChartCreator.pendingNodes);
@@ -34501,7 +34419,7 @@ var App = class _App extends React45.Component {
       );
       if (selectedElements.length === 1 && isLinearElement12(selectedElements[0])) {
         const selectedLinearElement = selectedElements[0];
-        if ((event[KEYS55.CTRL_OR_CMD] && isSimpleArrow(selectedLinearElement) || isLineElement8(selectedLinearElement)) && (!this.state.selectedLinearElement?.isEditing || this.state.selectedLinearElement.elementId !== selectedLinearElement.id)) {
+        if ((event[KEYS54.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])) {
@@ -34586,7 +34504,7 @@ var App = class _App extends React45.Component {
         }
       }
       resetCursor(this.interactiveCanvas);
-      if (!event[KEYS55.CTRL_OR_CMD] && !this.state.viewModeEnabled) {
+      if (!event[KEYS54.CTRL_OR_CMD] && !this.state.viewModeEnabled) {
         const hitElement = this.getElementAtPosition(sceneX, sceneY);
         if (isIframeLikeElement2(hitElement)) {
           this.setState({
@@ -35104,7 +35022,7 @@ var App = class _App extends React45.Component {
           setCursor(this.interactiveCanvas, CURSOR_TYPE4.AUTO);
         } else if (
           // if using cmd/ctrl, we're not dragging
-          !event[KEYS55.CTRL_OR_CMD]
+          !event[KEYS54.CTRL_OR_CMD]
         ) {
           if ((hitElement || this.isHittingCommonBoundingBoxOfSelectedElements(
             scenePointer,
@@ -35788,7 +35706,7 @@ var App = class _App extends React45.Component {
               ) : makeNextSelectedElementIds2({}, prevState)
             }));
           } else if (hitElement != null) {
-            if (event[KEYS55.CTRL_OR_CMD]) {
+            if (event[KEYS54.CTRL_OR_CMD]) {
               if (event.altKey) {
                 if (this.state.openDialog?.name === "elementLinkSelector") {
                   this.setOpenDialog(null);
@@ -35996,7 +35914,7 @@ var App = class _App extends React45.Component {
       const [gridX, gridY] = getGridPoint2(
         sceneX,
         sceneY,
-        this.lastPointerDownEvent?.[KEYS55.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+        this.lastPointerDownEvent?.[KEYS54.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       const element = newIframeElement({
         type: "iframe",
@@ -36026,7 +35944,7 @@ var App = class _App extends React45.Component {
       const [gridX, gridY] = getGridPoint2(
         sceneX,
         sceneY,
-        this.lastPointerDownEvent?.[KEYS55.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+        this.lastPointerDownEvent?.[KEYS54.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       const embedLink = getEmbedLink2(link);
       if (!embedLink) {
@@ -36066,7 +35984,7 @@ var App = class _App extends React45.Component {
       const [gridX, gridY] = getGridPoint2(
         sceneX,
         sceneY,
-        this.lastPointerDownEvent?.[KEYS55.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+        this.lastPointerDownEvent?.[KEYS54.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       const topLayerFrame = addToFrameUnderCursor ? this.getTopLayerFrameAtSceneCoords({
         x: gridX,
@@ -36170,7 +36088,7 @@ var App = class _App extends React45.Component {
         const [gridX, gridY] = getGridPoint2(
           pointerDownState.origin.x,
           pointerDownState.origin.y,
-          event[KEYS55.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+          event[KEYS54.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
         );
         const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
           x: gridX,
@@ -36297,7 +36215,7 @@ var App = class _App extends React45.Component {
       const [gridX, gridY] = getGridPoint2(
         pointerDownState.origin.x,
         pointerDownState.origin.y,
-        this.lastPointerDownEvent?.[KEYS55.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+        this.lastPointerDownEvent?.[KEYS54.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
         x: gridX,
@@ -36345,7 +36263,7 @@ var App = class _App extends React45.Component {
       const [gridX, gridY] = getGridPoint2(
         pointerDownState.origin.x,
         pointerDownState.origin.y,
-        this.lastPointerDownEvent?.[KEYS55.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+        this.lastPointerDownEvent?.[KEYS54.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       const constructorOpts = {
         x: gridX,
@@ -36953,7 +36871,7 @@ var App = class _App extends React45.Component {
       let [gridX, gridY] = getGridPoint2(
         pointerCoords.x,
         pointerCoords.y,
-        event[KEYS55.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+        event[KEYS54.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       const image = isInitializedImageElement3(newElement5) && this.imageCache.get(newElement5.fileId)?.image;
       const aspectRatio = image && !(image instanceof Promise) ? image.width / image.height : null;
@@ -37019,7 +36937,7 @@ var App = class _App extends React45.Component {
       const [x, y] = getGridPoint2(
         pointerCoords.x - pointerDownState.resize.offset.x,
         pointerCoords.y - pointerDownState.resize.offset.y,
-        event[KEYS55.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+        event[KEYS54.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       const croppingElement = this.scene.getNonDeletedElementsMap().get(this.state.croppingElementId);
       if (transformHandleType && croppingElement && isImageElement9(croppingElement)) {
@@ -37031,7 +36949,7 @@ var App = class _App extends React45.Component {
           const [gridX, gridY] = getGridPoint2(
             pointerCoords.x,
             pointerCoords.y,
-            event[KEYS55.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+            event[KEYS54.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
           );
           const dragOffset = {
             x: gridX - pointerDownState.originInGrid.x,
@@ -37095,7 +37013,7 @@ var App = class _App extends React45.Component {
       let [resizeX, resizeY] = getGridPoint2(
         pointerCoords.x - pointerDownState.resize.offset.x,
         pointerCoords.y - pointerDownState.resize.offset.y,
-        event[KEYS55.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+        event[KEYS54.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       const frameElementsOffsetsMap = /* @__PURE__ */ new Map();
       selectedFrames.forEach((frame) => {
@@ -37114,7 +37032,7 @@ var App = class _App extends React45.Component {
         const [gridX, gridY] = getGridPoint2(
           pointerCoords.x,
           pointerCoords.y,
-          event[KEYS55.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+          event[KEYS54.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
         );
         const dragOffset = {
           x: gridX - pointerDownState.originInGrid.x,
@@ -37252,7 +37170,7 @@ var App = class _App extends React45.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(CLASSES9.FRAME_NAME))) {
-          if (event[KEYS55.CTRL_OR_CMD]) {
+          if (event[KEYS54.CTRL_OR_CMD]) {
             event.preventDefault();
           }
           return;
@@ -39261,12 +39179,12 @@ var App = class _App extends React45.Component {
     const isElbowArrowOnly = selectedElements.findIndex(isElbowArrow10) === 0;
     return {
       origin,
-      withCmdOrCtrl: event[KEYS55.CTRL_OR_CMD],
+      withCmdOrCtrl: event[KEYS54.CTRL_OR_CMD],
       originInGrid: tupleToCoors(
         getGridPoint2(
           origin.x,
           origin.y,
-          event[KEYS55.CTRL_OR_CMD] || isElbowArrowOnly ? null : this.getEffectiveGridSize()
+          event[KEYS54.CTRL_OR_CMD] || isElbowArrowOnly ? null : this.getEffectiveGridSize()
         )
       ),
       scrollbars: isOverScrollBars(
@@ -39407,7 +39325,7 @@ var App = class _App extends React45.Component {
   }
   onKeyUpFromPointerDownHandler(pointerDownState) {
     return withBatchedUpdates((event) => {
-      event.key === KEYS55.ALT && event.preventDefault();
+      event.key === KEYS54.ALT && event.preventDefault();
       if (this.maybeHandleResize(pointerDownState, event)) {
         return;
       }
@@ -39429,7 +39347,7 @@ var App = class _App extends React45.Component {
         const [gridX2, gridY2] = getGridPoint2(
           pointerCoords.x,
           pointerCoords.y,
-          event[KEYS55.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+          event[KEYS54.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
         );
         let index = this.state.selectedLinearElement.initialState.segmentMidpoint.index;
         if (index < 0) {
@@ -39494,7 +39412,7 @@ var App = class _App extends React45.Component {
       const [gridX, gridY] = getGridPoint2(
         pointerCoords.x,
         pointerCoords.y,
-        event[KEYS55.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+        event[KEYS54.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       if (pointerDownState.resize.isResizing) {
         pointerDownState.lastCoords.x = pointerCoords.x;
@@ -39519,7 +39437,7 @@ var App = class _App extends React45.Component {
             this.state.selectedLinearElement,
             pointerCoords,
             this,
-            !event[KEYS55.CTRL_OR_CMD],
+            !event[KEYS54.CTRL_OR_CMD],
             this.scene
           );
           if (!ret) {
@@ -39717,7 +39635,7 @@ var App = class _App extends React45.Component {
               dragOffset,
               this.scene,
               snapOffset,
-              event[KEYS55.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+              event[KEYS54.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
             );
           }
           this.setState({