@myoc/excalidraw 0.19.537 → 0.19.539

package/dist/dev/index.js

@@ -7,6 +7,7 @@ import {
   ImageURLToFile,
   SVGStringToFile,
   UnsupportedImageFileTypeError,
+  applyZoomAndViewpointFlip,
   bootstrapCanvas,
   canChangeRoundness,
   canHaveArrowheads,
@@ -63,13 +64,13 @@ import {
   serializeAsJSON,
   strokeRectWithRotation_simple,
   zoomToFitBounds
-} from "./chunk-7R7FDLAY.js";
+} from "./chunk-HJ2ALDN7.js";
 import {
   define_import_meta_env_default
-} from "./chunk-GMDJS52C.js";
+} from "./chunk-IJ2BHUZB.js";
 import {
   en_default
-} from "./chunk-SZMFGT5M.js";
+} from "./chunk-2OVHIH4L.js";
 import {
   percentages_default
 } from "./chunk-72CYJXY3.js";
@@ -114,12 +115,12 @@ import {
   vectorNormalize as vectorNormalize6
 } from "@excalidraw/math";
 import {
-  CODES as CODES11,
+  CODES as CODES12,
   shouldResizeFromCenter,
   shouldMaintainAspectRatio,
   shouldRotateWithDiscreteAngle as shouldRotateWithDiscreteAngle4,
   isArrowKey as isArrowKey3,
-  KEYS as KEYS52,
+  KEYS as KEYS53,
   APP_NAME,
   CURSOR_TYPE as CURSOR_TYPE2,
   DEFAULT_STROKE_STREAMLINE as DEFAULT_STROKE_STREAMLINE3,
@@ -202,7 +203,8 @@ import {
   setDesktopUIMode,
   isSelectionLikeTool,
   oneOf,
-  getStrokeWidthByKey as getStrokeWidthByKey5
+  getStrokeWidthByKey as getStrokeWidthByKey5,
+  getViewpointFlipSign as getViewpointFlipSign2
 } from "@excalidraw/common";
 import {
   getObservedAppState as getObservedAppState2,
@@ -319,7 +321,7 @@ import {
   getDragOffsetXY,
   Scene as Scene2,
   Store,
-  CaptureUpdateAction as CaptureUpdateAction39,
+  CaptureUpdateAction as CaptureUpdateAction40,
   hitElementBoundingBox as hitElementBoundingBox2,
   isLineElement as isLineElement9,
   isSimpleArrow,
@@ -396,7 +398,7 @@ var globImport_locales_json = __glob({
   "./locales/de-CH.json": () => import("./locales/de-CH-KLWBYLGC.js"),
   "./locales/de-DE.json": () => import("./locales/de-DE-UB755M7G.js"),
   "./locales/el-GR.json": () => import("./locales/el-GR-J2BFDAEA.js"),
-  "./locales/en.json": () => import("./locales/en-FTXMBOG2.js"),
+  "./locales/en.json": () => import("./locales/en-JINXO2V2.js"),
   "./locales/es-ES.json": () => import("./locales/es-ES-GL35U3D6.js"),
   "./locales/eu-ES.json": () => import("./locales/eu-ES-5LL7P4G7.js"),
   "./locales/fa-IR.json": () => import("./locales/fa-IR-2D6AXPSB.js"),
@@ -10968,7 +10970,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-2QLYX6JM.js").then(
+        (blob2) => import("./data/image-2GHT4EI2.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -12621,14 +12623,14 @@ var actionArrangeElements = register({
       captureUpdate: CaptureUpdateAction16.IMMEDIATELY
     };
   },
-  keyTest: (event) => event.shiftKey && matchKey(event, KEYS22.R),
+  keyTest: (event) => event.shiftKey && matchKey(event, KEYS22.A),
   PanelComponent: ({ updateData }) => /* @__PURE__ */ jsx51(
     "button",
     {
       type: "button",
       className: "arrangeButton",
       onClick: () => updateData(null),
-      title: `${t("labels.arrangeElements")} \u2014 ${getShortcutKey("Shift+R")}`,
+      title: `${t("labels.arrangeElements")} \u2014 ${getShortcutKey("Shift+A")}`,
       children: TableCellsIcon
     }
   )
@@ -12825,11 +12827,42 @@ var flipElements = (selectedElements, elementsMap, flipDirection, app) => {
   return selectedElements;
 };
 
+// actions/actionFlipViewpoint.ts
+import { CODES as CODES5, KEYS as KEYS24 } from "@excalidraw/common";
+import { CaptureUpdateAction as CaptureUpdateAction19 } from "@excalidraw/element";
+var toggleViewpointFlip = (appState, axis) => ({
+  appState: {
+    viewpointFlip: {
+      ...appState.viewpointFlip,
+      [axis]: !appState.viewpointFlip[axis]
+    }
+  },
+  captureUpdate: CaptureUpdateAction19.NEVER
+});
+var actionFlipViewpointHorizontal = register({
+  name: "flipViewpointHorizontal",
+  label: "labels.flipViewpointHorizontal",
+  viewMode: true,
+  trackEvent: { category: "canvas" },
+  perform: (_elements, appState) => toggleViewpointFlip(appState, "horizontal"),
+  checked: (appState) => appState.viewpointFlip.horizontal,
+  keyTest: (event) => !event[KEYS24.CTRL_OR_CMD] && !event.altKey && event.shiftKey && event.code === CODES5.R
+});
+var actionFlipViewpointVertical = register({
+  name: "flipViewpointVertical",
+  label: "labels.flipViewpointVertical",
+  viewMode: true,
+  trackEvent: { category: "canvas" },
+  perform: (_elements, appState) => toggleViewpointFlip(appState, "vertical"),
+  checked: (appState) => appState.viewpointFlip.vertical,
+  keyTest: (event) => !event[KEYS24.CTRL_OR_CMD] && event.altKey && event.shiftKey && event.code === CODES5.R
+});
+
 // actions/actionClipboard.tsx
 import { isTextElement as isTextElement4 } from "@excalidraw/element";
 import { getTextFromElements } from "@excalidraw/element";
-import { CODES as CODES5, KEYS as KEYS24, isFirefox as isFirefox2 } from "@excalidraw/common";
-import { CaptureUpdateAction as CaptureUpdateAction19 } from "@excalidraw/element";
+import { CODES as CODES6, KEYS as KEYS25, isFirefox as isFirefox2 } from "@excalidraw/common";
+import { CaptureUpdateAction as CaptureUpdateAction20 } from "@excalidraw/element";
 var actionCopy = register({
   name: "copy",
   label: "labels.copy",
@@ -12845,7 +12878,7 @@ var actionCopy = register({
       await copyToClipboard(elementsToCopy, app.files, event);
     } catch (error) {
       return {
-        captureUpdate: CaptureUpdateAction19.EVENTUALLY,
+        captureUpdate: CaptureUpdateAction20.EVENTUALLY,
         appState: {
           ...appState,
           errorMessage: error.message
@@ -12853,7 +12886,7 @@ var actionCopy = register({
       };
     }
     return {
-      captureUpdate: CaptureUpdateAction19.EVENTUALLY
+      captureUpdate: CaptureUpdateAction20.EVENTUALLY
     };
   },
   // don't supply a shortcut since we handle this conditionally via onCopy event
@@ -12874,7 +12907,7 @@ var actionPaste = register({
       console.error(`actionPaste ${error.name}: ${error.message}`);
       if (isFirefox2) {
         return {
-          captureUpdate: CaptureUpdateAction19.EVENTUALLY,
+          captureUpdate: CaptureUpdateAction20.EVENTUALLY,
           appState: {
             ...appState,
             errorMessage: t("hints.firefox_clipboard_write")
@@ -12882,7 +12915,7 @@ var actionPaste = register({
         };
       }
       return {
-        captureUpdate: CaptureUpdateAction19.EVENTUALLY,
+        captureUpdate: CaptureUpdateAction20.EVENTUALLY,
         appState: {
           ...appState,
           errorMessage: t("errors.asyncPasteFailedOnRead")
@@ -12894,7 +12927,7 @@ var actionPaste = register({
     } catch (error) {
       console.error(error);
       return {
-        captureUpdate: CaptureUpdateAction19.EVENTUALLY,
+        captureUpdate: CaptureUpdateAction20.EVENTUALLY,
         appState: {
           ...appState,
           errorMessage: t("errors.asyncPasteFailedOnParse")
@@ -12902,7 +12935,7 @@ var actionPaste = register({
       };
     }
     return {
-      captureUpdate: CaptureUpdateAction19.EVENTUALLY
+      captureUpdate: CaptureUpdateAction20.EVENTUALLY
     };
   },
   // don't supply a shortcut since we handle this conditionally via onCopy event
@@ -12917,7 +12950,7 @@ var actionCut = register({
     actionCopy.perform(elements, appState, event, app);
     return actionDeleteSelected.perform(elements, appState, null, app);
   },
-  keyTest: (event) => event[KEYS24.CTRL_OR_CMD] && event.key === KEYS24.X
+  keyTest: (event) => event[KEYS25.CTRL_OR_CMD] && event.key === KEYS25.X
 });
 var actionCopyAsSvg = register({
   name: "copyAsSvg",
@@ -12927,7 +12960,7 @@ var actionCopyAsSvg = register({
   perform: async (elements, appState, _data, app) => {
     if (!app.canvas) {
       return {
-        captureUpdate: CaptureUpdateAction19.EVENTUALLY
+        captureUpdate: CaptureUpdateAction20.EVENTUALLY
       };
     }
     const { exportedElements, exportingFrame } = prepareElementsForExport(
@@ -12961,7 +12994,7 @@ var actionCopyAsSvg = register({
             })
           }
         },
-        captureUpdate: CaptureUpdateAction19.EVENTUALLY
+        captureUpdate: CaptureUpdateAction20.EVENTUALLY
       };
     } catch (error) {
       console.error(error);
@@ -12969,7 +13002,7 @@ var actionCopyAsSvg = register({
         appState: {
           errorMessage: error.message
         },
-        captureUpdate: CaptureUpdateAction19.EVENTUALLY
+        captureUpdate: CaptureUpdateAction20.EVENTUALLY
       };
     }
   },
@@ -12986,7 +13019,7 @@ var actionCopyAsPng = register({
   perform: async (elements, appState, _data, app) => {
     if (!app.canvas) {
       return {
-        captureUpdate: CaptureUpdateAction19.EVENTUALLY
+        captureUpdate: CaptureUpdateAction20.EVENTUALLY
       };
     }
     const selectedElements = app.scene.getSelectedElements({
@@ -13015,7 +13048,7 @@ var actionCopyAsPng = register({
             })
           }
         },
-        captureUpdate: CaptureUpdateAction19.EVENTUALLY
+        captureUpdate: CaptureUpdateAction20.EVENTUALLY
       };
     } catch (error) {
       console.error(error);
@@ -13024,14 +13057,14 @@ var actionCopyAsPng = register({
           ...appState,
           errorMessage: error.message
         },
-        captureUpdate: CaptureUpdateAction19.EVENTUALLY
+        captureUpdate: CaptureUpdateAction20.EVENTUALLY
       };
     }
   },
   predicate: (elements) => {
     return probablySupportsClipboardBlob && elements.length > 0;
   },
-  keyTest: (event) => event.code === CODES5.C && event.altKey && event.shiftKey,
+  keyTest: (event) => event.code === CODES6.C && event.altKey && event.shiftKey,
   keywords: ["png", "clipboard", "copy"]
 });
 var copyText = register({
@@ -13049,7 +13082,7 @@ var copyText = register({
       throw new Error(t("errors.copyToSystemClipboardFailed"));
     }
     return {
-      captureUpdate: CaptureUpdateAction19.EVENTUALLY
+      captureUpdate: CaptureUpdateAction20.EVENTUALLY
     };
   },
   predicate: (elements, appState, _, app) => {
@@ -13062,8 +13095,8 @@ var copyText = register({
 });
 
 // actions/actionToggleGridMode.tsx
-import { CODES as CODES6, KEYS as KEYS25 } from "@excalidraw/common";
-import { CaptureUpdateAction as CaptureUpdateAction20 } from "@excalidraw/element";
+import { CODES as CODES7, KEYS as KEYS26 } from "@excalidraw/common";
+import { CaptureUpdateAction as CaptureUpdateAction21 } from "@excalidraw/element";
 var actionToggleGridMode = register({
   name: "gridMode",
   icon: gridIcon,
@@ -13081,19 +13114,19 @@ var actionToggleGridMode = register({
         gridModeEnabled: !this.checked(appState),
         objectsSnapModeEnabled: false
       },
-      captureUpdate: CaptureUpdateAction20.EVENTUALLY
+      captureUpdate: CaptureUpdateAction21.EVENTUALLY
     };
   },
   checked: (appState) => appState.gridModeEnabled,
   predicate: (element, appState, props) => {
     return props.gridModeEnabled === void 0;
   },
-  keyTest: (event) => event[KEYS25.CTRL_OR_CMD] && event.code === CODES6.QUOTE
+  keyTest: (event) => event[KEYS26.CTRL_OR_CMD] && event.code === CODES7.QUOTE
 });
 
 // actions/actionSmartZoom.tsx
-import { KEYS as KEYS26 } from "@excalidraw/common";
-import { CaptureUpdateAction as CaptureUpdateAction21 } from "@excalidraw/element/store";
+import { KEYS as KEYS27 } from "@excalidraw/common";
+import { CaptureUpdateAction as CaptureUpdateAction22 } from "@excalidraw/element/store";
 import { jsx as jsx53 } from "react/jsx-runtime";
 var actionSmartZoom = register({
   name: "smartZoom",
@@ -13115,28 +13148,28 @@ var actionSmartZoom = register({
       viewportZoomFactor: settings.viewportZoomFactor
     });
     return {
-      captureUpdate: CaptureUpdateAction21.NEVER
+      captureUpdate: CaptureUpdateAction22.NEVER
     };
   },
-  keyTest: (event) => !event[KEYS26.CTRL_OR_CMD] && !event.shiftKey && !event.altKey && event.key.toLocaleLowerCase() === KEYS26.F,
+  keyTest: (event) => !event[KEYS27.CTRL_OR_CMD] && !event.shiftKey && !event.altKey && event.key.toLocaleLowerCase() === KEYS27.F,
   PanelComponent: ({ data, updateData }) => /* @__PURE__ */ jsx53(
     IconButton,
     {
       type: "button",
       icon: arrowsToEyeIcon,
       "aria-label": t("labels.smartZoom"),
-      title: `${t("labels.smartZoom")} - ${KEYS26.F.toLocaleUpperCase()}`,
+      title: `${t("labels.smartZoom")} - ${KEYS27.F.toLocaleUpperCase()}`,
       onClick: () => updateData(null),
       size: data?.size || "medium",
       "data-testid": "button-smart-zoom",
-      keyBindingLabel: KEYS26.F.toLocaleUpperCase()
+      keyBindingLabel: KEYS27.F.toLocaleUpperCase()
     }
   )
 });
 
 // actions/actionToggleObjectsSnapMode.tsx
-import { CODES as CODES7, KEYS as KEYS27 } from "@excalidraw/common";
-import { CaptureUpdateAction as CaptureUpdateAction22 } from "@excalidraw/element";
+import { CODES as CODES8, KEYS as KEYS28 } from "@excalidraw/common";
+import { CaptureUpdateAction as CaptureUpdateAction23 } from "@excalidraw/element";
 var actionToggleObjectsSnapMode = register({
   name: "objectsSnapMode",
   label: "buttons.objectsSnapMode",
@@ -13153,18 +13186,18 @@ var actionToggleObjectsSnapMode = register({
         objectsSnapModeEnabled: !this.checked(appState),
         gridModeEnabled: false
       },
-      captureUpdate: CaptureUpdateAction22.EVENTUALLY
+      captureUpdate: CaptureUpdateAction23.EVENTUALLY
     };
   },
   checked: (appState) => appState.objectsSnapModeEnabled,
   predicate: (elements, appState, appProps) => {
     return typeof appProps.objectsSnapModeEnabled === "undefined";
   },
-  keyTest: (event) => !event[KEYS27.CTRL_OR_CMD] && event.altKey && event.code === CODES7.S
+  keyTest: (event) => !event[KEYS28.CTRL_OR_CMD] && event.altKey && event.code === CODES8.S
 });
 
 // actions/actionToggleArrowBinding.tsx
-import { CaptureUpdateAction as CaptureUpdateAction23 } from "@excalidraw/element";
+import { CaptureUpdateAction as CaptureUpdateAction24 } from "@excalidraw/element";
 var actionToggleArrowBinding = register({
   name: "arrowBinding",
   label: "labels.arrowBinding",
@@ -13181,14 +13214,14 @@ var actionToggleArrowBinding = register({
         bindingPreference: newPreference,
         isBindingEnabled: newPreference === "enabled"
       },
-      captureUpdate: CaptureUpdateAction23.NEVER
+      captureUpdate: CaptureUpdateAction24.NEVER
     };
   },
   checked: (appState) => appState.bindingPreference === "enabled"
 });
 
 // actions/actionToggleMidpointSnapping.tsx
-import { CaptureUpdateAction as CaptureUpdateAction24 } from "@excalidraw/element";
+import { CaptureUpdateAction as CaptureUpdateAction25 } from "@excalidraw/element";
 var actionToggleMidpointSnapping = register({
   name: "midpointSnapping",
   label: "labels.midpointSnapping",
@@ -13203,15 +13236,15 @@ var actionToggleMidpointSnapping = register({
         ...appState,
         isMidpointSnappingEnabled: !this.checked(appState)
       },
-      captureUpdate: CaptureUpdateAction24.NEVER
+      captureUpdate: CaptureUpdateAction25.NEVER
     };
   },
   checked: (appState) => appState.isMidpointSnappingEnabled
 });
 
 // actions/actionToggleStats.tsx
-import { CODES as CODES8, KEYS as KEYS28 } from "@excalidraw/common";
-import { CaptureUpdateAction as CaptureUpdateAction25 } from "@excalidraw/element";
+import { CODES as CODES9, KEYS as KEYS29 } from "@excalidraw/common";
+import { CaptureUpdateAction as CaptureUpdateAction26 } from "@excalidraw/element";
 var actionToggleStats = register({
   name: "stats",
   label: "stats.fullTitle",
@@ -13225,11 +13258,11 @@ var actionToggleStats = register({
         ...appState,
         stats: { ...appState.stats, open: !this.checked(appState) }
       },
-      captureUpdate: CaptureUpdateAction25.EVENTUALLY
+      captureUpdate: CaptureUpdateAction26.EVENTUALLY
     };
   },
   checked: (appState) => appState.stats.open,
-  keyTest: (event) => !event[KEYS28.CTRL_OR_CMD] && event.altKey && event.code === CODES8.SLASH
+  keyTest: (event) => !event[KEYS29.CTRL_OR_CMD] && event.altKey && event.code === CODES9.SLASH
 });
 
 // actions/actionBoundText.tsx
@@ -13264,7 +13297,7 @@ import {
 import { measureText } from "@excalidraw/element";
 import { syncMovedIndices as syncMovedIndices3 } from "@excalidraw/element";
 import { newElement } from "@excalidraw/element";
-import { CaptureUpdateAction as CaptureUpdateAction26 } from "@excalidraw/element";
+import { CaptureUpdateAction as CaptureUpdateAction27 } from "@excalidraw/element";
 var actionUnbindText = register({
   name: "unbindText",
   label: "labels.unbindText",
@@ -13312,7 +13345,7 @@ var actionUnbindText = register({
     return {
       elements,
       appState,
-      captureUpdate: CaptureUpdateAction26.IMMEDIATELY
+      captureUpdate: CaptureUpdateAction27.IMMEDIATELY
     };
   }
 });
@@ -13369,7 +13402,7 @@ var actionBindText = register({
     return {
       elements: pushTextAboveContainer(elements, container, textElement),
       appState: { ...appState, selectedElementIds: { [container.id]: true } },
-      captureUpdate: CaptureUpdateAction26.IMMEDIATELY
+      captureUpdate: CaptureUpdateAction27.IMMEDIATELY
     };
   }
 });
@@ -13497,7 +13530,7 @@ var actionWrapTextInContainer = register({
         ...appState,
         selectedElementIds: containerIds
       },
-      captureUpdate: CaptureUpdateAction26.IMMEDIATELY
+      captureUpdate: CaptureUpdateAction27.IMMEDIATELY
     };
   }
 });
@@ -13507,8 +13540,8 @@ import {
   getNonDeletedElements as getNonDeletedElements11,
   isEmbeddableElement as isEmbeddableElement2
 } from "@excalidraw/element";
-import { KEYS as KEYS30 } from "@excalidraw/common";
-import { CaptureUpdateAction as CaptureUpdateAction27 } from "@excalidraw/element";
+import { KEYS as KEYS31 } from "@excalidraw/common";
+import { CaptureUpdateAction as CaptureUpdateAction28 } from "@excalidraw/element";
 
 // components/hyperlink/Hyperlink.tsx
 import { pointFrom as pointFrom3 } from "@excalidraw/math";
@@ -13520,7 +13553,7 @@ import {
   useRef as useRef14,
   useState as useState14
 } from "react";
-import { EVENT as EVENT5, HYPERLINK_TOOLTIP_DELAY, KEYS as KEYS29 } from "@excalidraw/common";
+import { EVENT as EVENT5, HYPERLINK_TOOLTIP_DELAY, KEYS as KEYS30 } from "@excalidraw/common";
 import { getElementAbsoluteCoords } from "@excalidraw/element";
 import { hitElementBoundingBox } from "@excalidraw/element";
 import { isElementLink } from "@excalidraw/element";
@@ -13694,10 +13727,10 @@ var Hyperlink = ({
             autoFocus: true,
             onKeyDown: (event) => {
               event.stopPropagation();
-              if (event[KEYS29.CTRL_OR_CMD] && event.key === KEYS29.K) {
+              if (event[KEYS30.CTRL_OR_CMD] && event.key === KEYS30.K) {
                 event.preventDefault();
               }
-              if (event.key === KEYS29.ENTER || event.key === KEYS29.ESCAPE) {
+              if (event.key === KEYS30.ENTER || event.key === KEYS30.ESCAPE) {
                 handleSubmit();
                 setAppState({ showHyperlinkPopup: "info" });
               }
@@ -13885,11 +13918,11 @@ var actionLink = register({
         showHyperlinkPopup: "editor",
         openMenu: null
       },
-      captureUpdate: CaptureUpdateAction27.IMMEDIATELY
+      captureUpdate: CaptureUpdateAction28.IMMEDIATELY
     };
   },
   trackEvent: { category: "hyperlink", action: "click" },
-  keyTest: (event) => event[KEYS30.CTRL_OR_CMD] && event.key === KEYS30.K,
+  keyTest: (event) => event[KEYS31.CTRL_OR_CMD] && event.key === KEYS31.K,
   predicate: (elements, appState) => {
     const selectedElements = getSelectedElements(elements, appState);
     return selectedElements.length === 1;
@@ -13913,14 +13946,14 @@ var actionLink = register({
 });
 
 // actions/actionElementLock.ts
-import { KEYS as KEYS31, arrayToMap as arrayToMap14, randomId as randomId2 } from "@excalidraw/common";
+import { KEYS as KEYS32, arrayToMap as arrayToMap14, randomId as randomId2 } from "@excalidraw/common";
 import {
   elementsAreInSameGroup,
   getNonDeletedElements as getNonDeletedElements12,
   newElementWith as newElementWith7,
   selectGroupsFromGivenElements
 } from "@excalidraw/element";
-import { CaptureUpdateAction as CaptureUpdateAction28 } from "@excalidraw/element";
+import { CaptureUpdateAction as CaptureUpdateAction29 } from "@excalidraw/element";
 var shouldLock = (elements) => elements.every((el) => !el.locked);
 var actionToggleElementLock = register({
   name: "toggleElementLock",
@@ -14004,11 +14037,11 @@ var actionToggleElementLock = register({
         lockedMultiSelections: nextLockedMultiSelections,
         activeLockedId
       },
-      captureUpdate: CaptureUpdateAction28.IMMEDIATELY
+      captureUpdate: CaptureUpdateAction29.IMMEDIATELY
     };
   },
   keyTest: (event, appState, elements, app) => {
-    return event.key.toLocaleLowerCase() === KEYS31.L && event[KEYS31.CTRL_OR_CMD] && event.shiftKey && app.scene.getSelectedElements({
+    return event.key.toLocaleLowerCase() === KEYS32.L && event[KEYS32.CTRL_OR_CMD] && event.shiftKey && app.scene.getSelectedElements({
       selectedElementIds: appState.selectedElementIds,
       includeBoundTextElement: false
     }).length > 0;
@@ -14059,7 +14092,7 @@ var actionUnlockAllElements = register({
         lockedMultiSelections: {},
         activeLockedId: null
       },
-      captureUpdate: CaptureUpdateAction28.IMMEDIATELY
+      captureUpdate: CaptureUpdateAction29.IMMEDIATELY
     };
   },
   label: "labels.elementLock.unlockAll"
@@ -14074,7 +14107,7 @@ import {
 import { arrayToMap as arrayToMap27, invariant as invariant16 } from "@excalidraw/common";
 import {
   toggleLinePolygonState as toggleLinePolygonState3,
-  CaptureUpdateAction as CaptureUpdateAction29
+  CaptureUpdateAction as CaptureUpdateAction30
 } from "@excalidraw/element";
 
 // ../element/src/mutateElement.ts
@@ -14543,7 +14576,7 @@ import {
 } from "@excalidraw/math";
 import {
   DRAGGING_THRESHOLD as DRAGGING_THRESHOLD2,
-  KEYS as KEYS33,
+  KEYS as KEYS34,
   shouldRotateWithDiscreteAngle as shouldRotateWithDiscreteAngle2,
   getGridPoint as getGridPoint3,
   invariant as invariant13,
@@ -15190,12 +15223,12 @@ import {
 import { pointFrom as pointFrom14, pointRotateRads as pointRotateRads8 } from "@excalidraw/math";
 
 // ../element/src/shapes.ts
-import { KEYS as KEYS32 } from "@excalidraw/common";
+import { KEYS as KEYS33 } from "@excalidraw/common";
 var SHAPES = [
   {
     icon: SelectionIcon,
     value: "selection",
-    key: KEYS32.V,
+    key: KEYS33.V,
     numericKey: void 0,
     fillable: true,
     myocSimplifiedMode: true
@@ -15203,7 +15236,7 @@ var SHAPES = [
   {
     icon: RectangleIcon,
     value: "rectangle",
-    key: KEYS32.R,
+    key: KEYS33.R,
     numericKey: void 0,
     fillable: true,
     myocSimplifiedMode: false
@@ -15211,7 +15244,7 @@ var SHAPES = [
   {
     icon: DiamondIcon,
     value: "diamond",
-    key: KEYS32.D,
+    key: KEYS33.D,
     numericKey: void 0,
     fillable: true,
     myocSimplifiedMode: false
@@ -15219,7 +15252,7 @@ var SHAPES = [
   {
     icon: EllipseIcon,
     value: "ellipse",
-    key: KEYS32.O,
+    key: KEYS33.O,
     numericKey: void 0,
     fillable: true,
     myocSimplifiedMode: false
@@ -15227,7 +15260,7 @@ var SHAPES = [
   {
     icon: ArrowIcon,
     value: "arrow",
-    key: KEYS32.A,
+    key: KEYS33.A,
     numericKey: void 0,
     fillable: true,
     myocSimplifiedMode: false
@@ -15235,7 +15268,7 @@ var SHAPES = [
   {
     icon: LineIcon,
     value: "line",
-    key: KEYS32.L,
+    key: KEYS33.L,
     numericKey: void 0,
     fillable: true,
     myocSimplifiedMode: false
@@ -15243,7 +15276,7 @@ var SHAPES = [
   {
     icon: FreedrawIcon,
     value: "freedraw",
-    key: [KEYS32.P, KEYS32.X],
+    key: [KEYS33.P, KEYS33.X],
     numericKey: void 0,
     fillable: false,
     myocSimplifiedMode: true
@@ -15251,7 +15284,7 @@ var SHAPES = [
   {
     icon: TextIcon,
     value: "text",
-    key: KEYS32.T,
+    key: KEYS33.T,
     numericKey: void 0,
     fillable: false,
     myocSimplifiedMode: true
@@ -15259,7 +15292,7 @@ var SHAPES = [
   {
     icon: ImageIcon,
     value: "image",
-    key: [KEYS32.I],
+    key: [KEYS33.I],
     numericKey: void 0,
     fillable: false,
     myocSimplifiedMode: true
@@ -15267,7 +15300,7 @@ var SHAPES = [
   {
     icon: EraserIcon,
     value: "eraser",
-    key: KEYS32.E,
+    key: KEYS33.E,
     numericKey: void 0,
     fillable: false,
     myocSimplifiedMode: true
@@ -16222,7 +16255,7 @@ var actionToggleLinearEditor = register({
         ...appState,
         selectedLinearElement
       },
-      captureUpdate: CaptureUpdateAction29.IMMEDIATELY
+      captureUpdate: CaptureUpdateAction30.IMMEDIATELY
     };
   },
   PanelComponent: ({ appState, updateData, app }) => {
@@ -16290,7 +16323,7 @@ var actionTogglePolygon = register({
         });
       }),
       appState,
-      captureUpdate: CaptureUpdateAction29.IMMEDIATELY
+      captureUpdate: CaptureUpdateAction30.IMMEDIATELY
     };
   },
   PanelComponent: ({ appState, updateData, app }) => {
@@ -16328,12 +16361,12 @@ var actionTogglePolygon = register({
 
 // actions/actionToggleSearchMenu.ts
 import {
-  KEYS as KEYS34,
+  KEYS as KEYS35,
   CANVAS_SEARCH_TAB,
   CLASSES,
   DEFAULT_SIDEBAR
 } from "@excalidraw/common";
-import { CaptureUpdateAction as CaptureUpdateAction30 } from "@excalidraw/element";
+import { CaptureUpdateAction as CaptureUpdateAction31 } from "@excalidraw/element";
 var actionToggleSearchMenu = register({
   name: "searchMenu",
   icon: searchIcon,
@@ -16363,19 +16396,19 @@ var actionToggleSearchMenu = register({
         openSidebar: { name: DEFAULT_SIDEBAR.name, tab: CANVAS_SEARCH_TAB },
         openDialog: null
       },
-      captureUpdate: CaptureUpdateAction30.EVENTUALLY
+      captureUpdate: CaptureUpdateAction31.EVENTUALLY
     };
   },
   checked: (appState) => appState.gridModeEnabled,
   predicate: (element, appState, props) => {
     return props.gridModeEnabled === void 0;
   },
-  keyTest: (event) => event[KEYS34.CTRL_OR_CMD] && event.key === KEYS34.F
+  keyTest: (event) => event[KEYS35.CTRL_OR_CMD] && event.key === KEYS35.F
 });
 
 // actions/actionCropEditor.tsx
 import { isImageElement as isImageElement2 } from "@excalidraw/element";
-import { CaptureUpdateAction as CaptureUpdateAction31 } from "@excalidraw/element";
+import { CaptureUpdateAction as CaptureUpdateAction32 } from "@excalidraw/element";
 import { jsx as jsx57 } from "react/jsx-runtime";
 var actionToggleCropEditor = register({
   name: "cropEditor",
@@ -16395,7 +16428,7 @@ var actionToggleCropEditor = register({
         isCropping: false,
         croppingElementId: selectedElement.id
       },
-      captureUpdate: CaptureUpdateAction31.IMMEDIATELY
+      captureUpdate: CaptureUpdateAction32.IMMEDIATELY
     };
   },
   predicate: (elements, appState, _, app) => {
@@ -16432,7 +16465,7 @@ import {
 import { getFrameChildren as getFrameChildren3 } from "@excalidraw/element";
 import { getElementsInGroup as getElementsInGroup6 } from "@excalidraw/element";
 import { getCommonBounds as getCommonBounds3 } from "@excalidraw/element";
-import { CaptureUpdateAction as CaptureUpdateAction32 } from "@excalidraw/element";
+import { CaptureUpdateAction as CaptureUpdateAction33 } from "@excalidraw/element";
 var isSingleFrameSelected = (appState, app) => {
   const selectedElements = app.scene.getSelectedElements(appState);
   return selectedElements.length === 1 && isFrameLikeElement9(selectedElements[0]);
@@ -16457,13 +16490,13 @@ var actionSelectAllElementsInFrame = register({
             return acc;
           }, {})
         },
-        captureUpdate: CaptureUpdateAction32.IMMEDIATELY
+        captureUpdate: CaptureUpdateAction33.IMMEDIATELY
       };
     }
     return {
       elements,
       appState,
-      captureUpdate: CaptureUpdateAction32.EVENTUALLY
+      captureUpdate: CaptureUpdateAction33.EVENTUALLY
     };
   },
   predicate: (elements, appState, _, app) => isSingleFrameSelected(appState, app)
@@ -16483,13 +16516,13 @@ var actionRemoveAllElementsFromFrame = register({
             [selectedElement.id]: true
           }
         },
-        captureUpdate: CaptureUpdateAction32.IMMEDIATELY
+        captureUpdate: CaptureUpdateAction33.IMMEDIATELY
       };
     }
     return {
       elements,
       appState,
-      captureUpdate: CaptureUpdateAction32.EVENTUALLY
+      captureUpdate: CaptureUpdateAction33.EVENTUALLY
     };
   },
   predicate: (elements, appState, _, app) => isSingleFrameSelected(appState, app)
@@ -16509,7 +16542,7 @@ var actionupdateFrameRendering = register({
           enabled: !appState.frameRendering.enabled
         }
       },
-      captureUpdate: CaptureUpdateAction32.EVENTUALLY
+      captureUpdate: CaptureUpdateAction33.EVENTUALLY
     };
   },
   checked: (appState) => appState.frameRendering.enabled
@@ -16555,25 +16588,25 @@ var actionWrapSelectionInFrame = register({
       appState: {
         selectedElementIds: { [frame.id]: true }
       },
-      captureUpdate: CaptureUpdateAction32.IMMEDIATELY
+      captureUpdate: CaptureUpdateAction33.IMMEDIATELY
     };
   }
 });
 
 // actions/actionHistory.tsx
 import {
-  KEYS as KEYS35,
+  KEYS as KEYS36,
   matchKey as matchKey2,
   arrayToMap as arrayToMap28,
   MOBILE_ACTION_BUTTON_BG as MOBILE_ACTION_BUTTON_BG4
 } from "@excalidraw/common";
-import { CaptureUpdateAction as CaptureUpdateAction34 } from "@excalidraw/element";
+import { CaptureUpdateAction as CaptureUpdateAction35 } from "@excalidraw/element";
 import { orderByFractionalIndex as orderByFractionalIndex2 } from "@excalidraw/element";
 
 // history.ts
 import { Emitter as Emitter2 } from "@excalidraw/common";
 import {
-  CaptureUpdateAction as CaptureUpdateAction33,
+  CaptureUpdateAction as CaptureUpdateAction34,
   StoreChange,
   StoreDelta
 } from "@excalidraw/element";
@@ -16687,7 +16720,7 @@ var History = class _History {
       if (historyDelta === null) {
         return;
       }
-      const action = CaptureUpdateAction33.IMMEDIATELY;
+      const action = CaptureUpdateAction34.IMMEDIATELY;
       let prevSnapshot = this.store.snapshot;
       let nextElements = elements;
       let nextAppState = appState;
@@ -16771,7 +16804,7 @@ var executeHistoryAction = (app, appState, updater) => {
   !app.drawShape.hasPendingGesture()) {
     const result = updater();
     if (!result) {
-      return { captureUpdate: CaptureUpdateAction34.EVENTUALLY };
+      return { captureUpdate: CaptureUpdateAction35.EVENTUALLY };
     }
     const [nextElementsMap, nextAppState] = result;
     const nextElements = orderByFractionalIndex2(
@@ -16780,10 +16813,10 @@ var executeHistoryAction = (app, appState, updater) => {
     return {
       appState: nextAppState,
       elements: nextElements,
-      captureUpdate: CaptureUpdateAction34.NEVER
+      captureUpdate: CaptureUpdateAction35.NEVER
     };
   }
-  return { captureUpdate: CaptureUpdateAction34.EVENTUALLY };
+  return { captureUpdate: CaptureUpdateAction35.EVENTUALLY };
 };
 var createUndoAction = (history) => ({
   name: "undo",
@@ -16796,7 +16829,7 @@ var createUndoAction = (history) => ({
     appState,
     () => history.undo(arrayToMap28(elements), appState)
   ),
-  keyTest: (event) => event[KEYS35.CTRL_OR_CMD] && matchKey2(event, KEYS35.Z) && !event.shiftKey,
+  keyTest: (event) => event[KEYS36.CTRL_OR_CMD] && matchKey2(event, KEYS36.Z) && !event.shiftKey,
   PanelComponent: ({ appState, updateData, data, app }) => {
     const { isUndoStackEmpty } = useEmitter(
       history.onHistoryChangedEmitter,
@@ -16834,7 +16867,7 @@ var createRedoAction = (history) => ({
     appState,
     () => history.redo(arrayToMap28(elements), appState)
   ),
-  keyTest: (event) => event[KEYS35.CTRL_OR_CMD] && event.shiftKey && matchKey2(event, KEYS35.Z) || event[KEYS35.CTRL_OR_CMD] && !event.shiftKey && matchKey2(event, KEYS35.Y),
+  keyTest: (event) => event[KEYS36.CTRL_OR_CMD] && event.shiftKey && matchKey2(event, KEYS36.Z) || event[KEYS36.CTRL_OR_CMD] && !event.shiftKey && matchKey2(event, KEYS36.Y),
   PanelComponent: ({ appState, updateData, data, app }) => {
     const { isRedoStackEmpty } = useEmitter(
       history.onHistoryChangedEmitter,
@@ -16873,7 +16906,7 @@ import {
 } from "@excalidraw/element";
 import { measureText as measureText3 } from "@excalidraw/element";
 import { isTextElement as isTextElement7 } from "@excalidraw/element";
-import { CaptureUpdateAction as CaptureUpdateAction35 } from "@excalidraw/element";
+import { CaptureUpdateAction as CaptureUpdateAction36 } from "@excalidraw/element";
 var actionTextAutoResize = register({
   name: "autoResize",
   label: "labels.autoResize",
@@ -16916,15 +16949,15 @@ var actionTextAutoResize = register({
       elements: elements.map(
         (element) => element.id === resized.id ? resized : element
       ),
-      captureUpdate: CaptureUpdateAction35.IMMEDIATELY
+      captureUpdate: CaptureUpdateAction36.IMMEDIATELY
     };
   }
 });
 
 // actions/actionToggleViewMode.tsx
-import { CODES as CODES9, KEYS as KEYS36 } from "@excalidraw/common";
+import { CODES as CODES10, KEYS as KEYS37 } from "@excalidraw/common";
 import clsx24 from "clsx";
-import { CaptureUpdateAction as CaptureUpdateAction36 } from "@excalidraw/element";
+import { CaptureUpdateAction as CaptureUpdateAction37 } from "@excalidraw/element";
 import { jsx as jsx59 } from "react/jsx-runtime";
 var actionToggleViewMode = register({
   name: "viewMode",
@@ -16944,14 +16977,14 @@ var actionToggleViewMode = register({
         ...appState,
         viewModeEnabled: !this.checked(appState)
       },
-      captureUpdate: CaptureUpdateAction36.EVENTUALLY
+      captureUpdate: CaptureUpdateAction37.EVENTUALLY
     };
   },
   checked: (appState) => appState.viewModeEnabled,
   predicate: (elements, appState, appProps, app) => {
     return !appState.viewModeOnly && !appProps.viewModeOnly && typeof appProps.viewModeEnabled === "undefined" && app.isInteractionEnabled();
   },
-  keyTest: (event) => !event[KEYS36.CTRL_OR_CMD] && event.altKey && event.code === CODES9.R,
+  keyTest: (event) => !event[KEYS37.CTRL_OR_CMD] && event.altKey && !event.shiftKey && event.code === CODES10.R,
   PanelComponent: ({ data, updateData, appState, appProps }) => {
     if (appState.viewModeOnly || appProps.viewModeOnly) {
       return null;
@@ -17145,7 +17178,7 @@ import {
   rangeIntersection,
   rangesOverlap
 } from "@excalidraw/math";
-import { TOOL_TYPE, KEYS as KEYS37 } from "@excalidraw/common";
+import { TOOL_TYPE, KEYS as KEYS38 } from "@excalidraw/common";
 import {
   getCommonBounds as getCommonBounds4,
   getDraggedElementsBounds,
@@ -17191,7 +17224,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[KEYS37.CTRL_OR_CMD] || !app.state.objectsSnapModeEnabled && event[KEYS37.CTRL_OR_CMD] && !isGridModeEnabled(app));
+    return (app.state.activeTool.type !== "lasso" || isLassoDragging) && (app.state.objectsSnapModeEnabled && !event[KEYS38.CTRL_OR_CMD] || !app.state.objectsSnapModeEnabled && event[KEYS38.CTRL_OR_CMD] && !isGridModeEnabled(app));
   }
   if (selectedElements.length === 1 && selectedElements[0].type === "arrow") {
     return false;
@@ -18742,8 +18775,8 @@ var isPointHittingTextAutoResizeHandle = (point, textElement, zoomValue, formFac
 
 // wysiwyg/textWysiwyg.tsx
 import {
-  CODES as CODES10,
-  KEYS as KEYS38,
+  CODES as CODES11,
+  KEYS as KEYS39,
   CLASSES as CLASSES2,
   POINTER_BUTTON,
   THEME as THEME16,
@@ -18753,7 +18786,8 @@ import {
   isTestEnv as isTestEnv8,
   MIME_TYPES as MIME_TYPES6,
   applyDarkModeFilter as applyDarkModeFilter8,
-  isRTL as isRTL2
+  isRTL as isRTL2,
+  getViewpointFlipSign
 } from "@excalidraw/common";
 import { pointFrom as pointFrom27, pointRotateRads as pointRotateRads19 } from "@excalidraw/math";
 import {
@@ -18797,7 +18831,7 @@ var getTransform = (width, height, angle2, appState, maxWidth, maxHeight) => {
   if (height > maxHeight && zoom.value !== 1) {
     translateY = maxHeight * (zoom.value - 1) / 2;
   }
-  return `translate(${translateX}px, ${translateY}px) scale(${zoom.value}) rotate(${degree}deg)`;
+  return `translate(${translateX}px, ${translateY}px) scale(${zoom.value * getViewpointFlipSign(appState.viewpointFlip.horizontal)}, ${zoom.value * getViewpointFlipSign(appState.viewpointFlip.vertical)}) rotate(${degree}deg)`;
 };
 var getLineDirection = (text, offset) => {
   const hardLineStart = text.lastIndexOf("\n", Math.max(0, offset - 1)) + 1;
@@ -18983,7 +19017,7 @@ var textWysiwyg = ({
       }
       const [viewportX, viewportY] = getViewportCoords(coordX, coordY);
       if (!container) {
-        maxWidth = (appState.width - 8 - viewportX) / appState.zoom.value;
+        maxWidth = (appState.viewpointFlip.horizontal ? viewportX - 8 : appState.width - 8 - viewportX) / appState.zoom.value;
         width = Math.min(width, maxWidth);
       } else {
         width += 0.5;
@@ -18991,7 +19025,7 @@ var textWysiwyg = ({
       height *= 1.05;
       const font = getFontString11(updatedTextElement);
       const angle2 = getTextElementAngle(updatedTextElement, container);
-      const editorMaxHeight = (appState.height - viewportY) / appState.zoom.value;
+      const editorMaxHeight = (appState.viewpointFlip.vertical ? viewportY : appState.height - viewportY) / appState.zoom.value;
       Object.assign(editable.style, {
         font,
         // must be defined *after* font ¯\_(ツ)_/¯
@@ -19206,7 +19240,7 @@ var textWysiwyg = ({
       app.actionManager.executeAction(actionDecreaseFontSize);
     } else if (actionIncreaseFontSize.keyTest(event)) {
       app.actionManager.executeAction(actionIncreaseFontSize);
-    } else if (event.key === KEYS38.ESCAPE) {
+    } else if (event.key === KEYS39.ESCAPE) {
       event.preventDefault();
       submittedViaKeyboard = true;
       handleSubmit();
@@ -19214,18 +19248,18 @@ var textWysiwyg = ({
       event.preventDefault();
       handleSubmit();
       app.actionManager.executeAction(actionSaveToActiveFile);
-    } else if (event.key === KEYS38.ENTER && event[KEYS38.CTRL_OR_CMD]) {
+    } else if (event.key === KEYS39.ENTER && event[KEYS39.CTRL_OR_CMD]) {
       event.preventDefault();
       if (event.isComposing || event.keyCode === 229) {
         return;
       }
       submittedViaKeyboard = true;
       handleSubmit();
-    } else if (event.key === KEYS38.TAB || event[KEYS38.CTRL_OR_CMD] && (event.code === CODES10.BRACKET_LEFT || event.code === CODES10.BRACKET_RIGHT)) {
+    } else if (event.key === KEYS39.TAB || event[KEYS39.CTRL_OR_CMD] && (event.code === CODES11.BRACKET_LEFT || event.code === CODES11.BRACKET_RIGHT)) {
       event.preventDefault();
       if (event.isComposing) {
         return;
-      } else if (event.shiftKey || event.code === CODES10.BRACKET_LEFT) {
+      } else if (event.shiftKey || event.code === CODES11.BRACKET_LEFT) {
         outdent();
       } else {
         indent();
@@ -19365,6 +19399,7 @@ var textWysiwyg = ({
     unbindUpdate();
     unsubOnChange();
     unbindOnScroll();
+    unbindViewpointFlip();
     editable.remove();
   };
   const bindBlurEvent = (event) => {
@@ -19434,6 +19469,9 @@ var textWysiwyg = ({
   const unbindOnScroll = app.onScrollChangeEmitter.on(() => {
     updateWysiwygStyle();
   });
+  const unbindViewpointFlip = app.onStateChange("viewpointFlip", () => {
+    updateWysiwygStyle();
+  });
   let isDestroyed = false;
   if (autoSelect && !pendingInitialSelection) {
     editable.select();
@@ -22679,7 +22717,7 @@ var _renderInteractiveScene = ({
     normalizedHeight
   });
   context.save();
-  context.scale(appState.zoom.value, appState.zoom.value);
+  applyZoomAndViewpointFlip(context, appState);
   let editingLinearElement = void 0;
   visibleElements.forEach((element) => {
     if (appState.selectedLinearElement?.isEditing && appState.selectedLinearElement.elementId === element.id) {
@@ -24408,10 +24446,10 @@ var AppDrawShape = class {
 };
 
 // components/App.flowchart.ts
-import { isArrowKey as isArrowKey2, KEYS as KEYS39 } from "@excalidraw/common";
+import { isArrowKey as isArrowKey2, KEYS as KEYS40 } from "@excalidraw/common";
 import {
   makeNextSelectedElementIds as makeNextSelectedElementIds3,
-  CaptureUpdateAction as CaptureUpdateAction37,
+  CaptureUpdateAction as CaptureUpdateAction38,
   FlowChartCreator,
   FlowChartNavigator,
   getSelectedElements as getSelectedElements6,
@@ -24475,14 +24513,14 @@ var AppFlowchart = class _AppFlowchart {
   resolveKeyboardEventToOperation(event) {
     const { creator, navigator: navigator2, app } = this;
     if (event.type === "keydown") {
-      if (event.key === KEYS39.ESCAPE && creator.isCreatingChart) {
+      if (event.key === KEYS40.ESCAPE && creator.isCreatingChart) {
         creator.clear();
         return { type: "canceled" };
       }
       if (!isArrowKey2(event.key)) {
         return { type: "none" };
       }
-      if (event[KEYS39.CTRL_OR_CMD] && !event.shiftKey) {
+      if (event[KEYS40.CTRL_OR_CMD] && !event.shiftKey) {
         const selectedElements = getSelectedElements6(
           app.scene.getNonDeletedElementsMap(),
           app.state
@@ -24517,7 +24555,7 @@ var AppFlowchart = class _AppFlowchart {
     if (navigationEnded) {
       navigator2.clear();
     }
-    if (!event[KEYS39.CTRL_OR_CMD] && creator.isCreatingChart) {
+    if (!event[KEYS40.CTRL_OR_CMD] && creator.isCreatingChart) {
       const nodes = creator.pendingNodes ?? [];
       creator.clear();
       return { type: "committed", nodes };
@@ -24535,18 +24573,18 @@ var AppFlowchart = class _AppFlowchart {
   }
   captureUpdate() {
     this.app.syncActionResult({
-      captureUpdate: CaptureUpdateAction37.IMMEDIATELY
+      captureUpdate: CaptureUpdateAction38.IMMEDIATELY
     });
   }
   static getLinkDirectionFromKey(key) {
     switch (key) {
-      case KEYS39.ARROW_UP:
+      case KEYS40.ARROW_UP:
         return "up";
-      case KEYS39.ARROW_DOWN:
+      case KEYS40.ARROW_DOWN:
         return "down";
-      case KEYS39.ARROW_RIGHT:
+      case KEYS40.ARROW_RIGHT:
         return "right";
-      case KEYS39.ARROW_LEFT:
+      case KEYS40.ARROW_LEFT:
         return "left";
       default:
         return "right";
@@ -25333,6 +25371,8 @@ var shortcutMap = {
   stats: [getShortcutKey("Alt+/")],
   flipHorizontal: [getShortcutKey("Shift+H")],
   flipVertical: [getShortcutKey("Shift+V")],
+  flipViewpointHorizontal: [getShortcutKey("Shift+R")],
+  flipViewpointVertical: [getShortcutKey("Alt+Shift+R")],
   viewMode: [getShortcutKey("Alt+R")],
   hyperlink: [getShortcutKey("CtrlOrCmd+K")],
   toggleElementLock: [getShortcutKey("CtrlOrCmd+Shift+L")],
@@ -25348,7 +25388,7 @@ var shortcutMap = {
   toggleShortcuts: [getShortcutKey("?")],
   searchMenu: [getShortcutKey("CtrlOrCmd+F")],
   wrapSelectionInFrame: [],
-  arrangeElements: [getShortcutKey("Shift+R")],
+  arrangeElements: [getShortcutKey("Shift+A")],
   toolLock: [getShortcutKey("Q")]
 };
 var getShortcutFromShortcutName = (name, idx = 0) => {
@@ -25359,7 +25399,7 @@ var getShortcutFromShortcutName = (name, idx = 0) => {
 // components/Popover.tsx
 import { useLayoutEffect as useLayoutEffect4, useRef as useRef16, useEffect as useEffect23 } from "react";
 import { unstable_batchedUpdates as unstable_batchedUpdates2 } from "react-dom";
-import { KEYS as KEYS40, queryFocusableElements } from "@excalidraw/common";
+import { KEYS as KEYS41, queryFocusableElements } from "@excalidraw/common";
 import { clamp as clamp10 } from "@excalidraw/math";
 import clsx25 from "clsx";
 import { jsx as jsx63 } from "react/jsx-runtime";
@@ -25384,7 +25424,7 @@ var Popover7 = ({
       container.focus();
     }
     const handleKeyDown = (event) => {
-      if (event.key === KEYS40.TAB) {
+      if (event.key === KEYS41.TAB) {
         const focusableElements = queryFocusableElements(container);
         const { activeElement } = document;
         const currentIndex = focusableElements.findIndex(
@@ -26535,7 +26575,7 @@ var LoadingMessage = ({
 // components/MobileToolbar.tsx
 import { useState as useState19, useEffect as useEffect26 } from "react";
 import clsx34 from "clsx";
-import { KEYS as KEYS42, capitalizeString as capitalizeString3 } from "@excalidraw/common";
+import { KEYS as KEYS43, capitalizeString as capitalizeString3 } from "@excalidraw/common";
 
 // components/dropdownMenu/DropdownMenu.tsx
 import React25 from "react";
@@ -26545,7 +26585,7 @@ import { CLASSES as CLASSES6 } from "@excalidraw/common";
 // components/dropdownMenu/DropdownMenuContent.tsx
 import clsx31 from "clsx";
 import { useCallback as useCallback7, useEffect as useEffect25, useRef as useRef18 } from "react";
-import { CLASSES as CLASSES5, EVENT as EVENT6, KEYS as KEYS41 } from "@excalidraw/common";
+import { CLASSES as CLASSES5, EVENT as EVENT6, KEYS as KEYS42 } from "@excalidraw/common";
 import { DropdownMenu as DropdownMenuPrimitive2 } from "radix-ui";
 import { jsx as jsx69 } from "react/jsx-runtime";
 var MenuContent = ({
@@ -26576,7 +26616,7 @@ var MenuContent = ({
       return;
     }
     const onKeyDown = (event) => {
-      if (event.key === KEYS41.ESCAPE) {
+      if (event.key === KEYS42.ESCAPE) {
         event.preventDefault();
         event.stopImmediatePropagation();
         callbacksRef.onClickOutside?.();
@@ -27119,7 +27159,7 @@ var MobileToolbar = ({
                       icon: app.state.activeTool.locked ? LockedIcon : UnlockedIcon,
                       "data-testid": "toolbar-lock",
                       selected: app.state.activeTool.locked,
-                      shortcut: KEYS42.Q.toLocaleUpperCase(),
+                      shortcut: KEYS43.Q.toLocaleUpperCase(),
                       children: t("toolBar.lock-short")
                     }
                   )
@@ -27129,7 +27169,7 @@ var MobileToolbar = ({
                   {
                     onSelect: () => app.setActiveTool({ type: "text" }),
                     icon: TextIcon,
-                    shortcut: KEYS42.T.toLocaleUpperCase(),
+                    shortcut: KEYS43.T.toLocaleUpperCase(),
                     "data-testid": "toolbar-text",
                     selected: activeTool.type === "text",
                     disabled: isToolButtonDisabled(app, "text"),
@@ -27152,7 +27192,7 @@ var MobileToolbar = ({
                   {
                     onSelect: () => app.setActiveTool({ type: "frame" }),
                     icon: frameToolIcon,
-                    shortcut: KEYS42.F.toLocaleUpperCase(),
+                    shortcut: KEYS43.F.toLocaleUpperCase(),
                     "data-testid": "toolbar-frame",
                     selected: frameToolSelected,
                     disabled: isToolButtonDisabled(app, "frame"),
@@ -27406,7 +27446,7 @@ import { newTextElement as newTextElement4 } from "@excalidraw/element";
 // components/Dialog.tsx
 import clsx38 from "clsx";
 import { useEffect as useEffect27, useState as useState21 } from "react";
-import { KEYS as KEYS44, queryFocusableElements as queryFocusableElements2 } from "@excalidraw/common";
+import { KEYS as KEYS45, queryFocusableElements as queryFocusableElements2 } from "@excalidraw/common";
 
 // hooks/useCallbackRefState.ts
 import { useCallback as useCallback9, useState as useState20 } from "react";
@@ -27420,7 +27460,7 @@ var useCallbackRefState = () => {
 import clsx37 from "clsx";
 import { useRef as useRef19 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { KEYS as KEYS43 } from "@excalidraw/common";
+import { KEYS as KEYS44 } from "@excalidraw/common";
 import { jsx as jsx82, jsxs as jsxs41 } from "react/jsx-runtime";
 var Modal = (props) => {
   const { closeOnClickOutside = true } = props;
@@ -27437,7 +27477,7 @@ var Modal = (props) => {
     return null;
   }
   const handleKeydown = (event) => {
-    if (event.key === KEYS43.ESCAPE) {
+    if (event.key === KEYS44.ESCAPE) {
       event.preventDefault();
       event.nativeEvent.stopImmediatePropagation();
       event.stopPropagation();
@@ -27511,7 +27551,7 @@ var Dialog = (props) => {
       }
     });
     const handleKeyDown = (event) => {
-      if (event.key === KEYS44.TAB) {
+      if (event.key === KEYS45.TAB) {
         const focusableElements2 = queryFocusableElements2(islandNode);
         const { activeElement } = document;
         const currentIndex = focusableElements2.findIndex(
@@ -29011,9 +29051,9 @@ import { updateBindings as updateBindings3 } from "@excalidraw/element";
 // components/Stats/DragInput.tsx
 import clsx44 from "clsx";
 import { useEffect as useEffect28, useRef as useRef22, useState as useState24 } from "react";
-import { EVENT as EVENT7, KEYS as KEYS45, cloneJSON as cloneJSON3 } from "@excalidraw/common";
+import { EVENT as EVENT7, KEYS as KEYS46, cloneJSON as cloneJSON3 } from "@excalidraw/common";
 import { deepCopyElement as deepCopyElement4 } from "@excalidraw/element";
-import { CaptureUpdateAction as CaptureUpdateAction38 } from "@excalidraw/element";
+import { CaptureUpdateAction as CaptureUpdateAction39 } from "@excalidraw/element";
 
 // components/Stats/utils.ts
 import { pointFrom as pointFrom40, pointRotateRads as pointRotateRads22 } from "@excalidraw/math";
@@ -29224,7 +29264,7 @@ var StatsDragInput = ({
         setAppState
       });
       app.syncActionResult({
-        captureUpdate: CaptureUpdateAction38.IMMEDIATELY
+        captureUpdate: CaptureUpdateAction39.IMMEDIATELY
       });
     }
   };
@@ -29332,7 +29372,7 @@ var StatsDragInput = ({
                     false
                   );
                   app.syncActionResult({
-                    captureUpdate: CaptureUpdateAction38.IMMEDIATELY
+                    captureUpdate: CaptureUpdateAction39.IMMEDIATELY
                   });
                   dragFinishedCallback?.({
                     app,
@@ -29371,7 +29411,7 @@ var StatsDragInput = ({
             onKeyDown: (event) => {
               if (editable) {
                 const eventTarget = event.target;
-                if (eventTarget instanceof HTMLInputElement && event.key === KEYS45.ENTER) {
+                if (eventTarget instanceof HTMLInputElement && event.key === KEYS46.ENTER) {
                   handleInputValue(eventTarget.value, elements, appState);
                   app.focusContainer();
                 }
@@ -31233,7 +31273,7 @@ var StatsInner = memo2(
 
 // components/ElementLinkDialog.tsx
 import { useCallback as useCallback10, useEffect as useEffect30, useState as useState27 } from "react";
-import { normalizeLink as normalizeLink3, KEYS as KEYS46 } from "@excalidraw/common";
+import { normalizeLink as normalizeLink3, KEYS as KEYS47 } from "@excalidraw/common";
 import {
   defaultGetElementLinkFromSelection,
   getLinkIdAndTypeFromSelection
@@ -31438,10 +31478,10 @@ var ElementLinkDialog = ({
   }, [sourceElementId, nextLink, elementsMap, linkEdited, scene, onClose]);
   useEffect30(() => {
     const handleKeyDown = (event) => {
-      if (appState.openDialog?.name === "elementLinkSelector" && event.key === KEYS46.ENTER) {
+      if (appState.openDialog?.name === "elementLinkSelector" && event.key === KEYS47.ENTER) {
         handleConfirm();
       }
-      if (appState.openDialog?.name === "elementLinkSelector" && event.key === KEYS46.ESCAPE) {
+      if (appState.openDialog?.name === "elementLinkSelector" && event.key === KEYS47.ESCAPE) {
         onClose?.();
       }
     };
@@ -31467,7 +31507,7 @@ var ElementLinkDialog = ({
             setNextLink(value);
           },
           onKeyDown: (event) => {
-            if (event.key === KEYS46.ENTER) {
+            if (event.key === KEYS47.ENTER) {
               handleConfirm();
             }
           },
@@ -32083,11 +32123,11 @@ var GifPlaybackControls = ({
 import React33, { useMemo as useMemo10 } from "react";
 import clsx50 from "clsx";
 import { isDarwin as isDarwin4, isFirefox as isFirefox4, isWindows } from "@excalidraw/common";
-import { KEYS as KEYS48 } from "@excalidraw/common";
+import { KEYS as KEYS49 } from "@excalidraw/common";
 import { SHAPES as SHAPES3 } from "@excalidraw/element/shapes";
 
 // components/HelpDialog/BasicHelpDialog.tsx
-import { isFirefox as isFirefox3, KEYS as KEYS47 } from "@excalidraw/common";
+import { isFirefox as isFirefox3, KEYS as KEYS48 } from "@excalidraw/common";
 import { SHAPES as SHAPES2 } from "@excalidraw/element/shapes";
 import { Fragment as Fragment19, jsx as jsx114, jsxs as jsxs60 } from "react/jsx-runtime";
 var Section2 = (props) => /* @__PURE__ */ jsxs60(Fragment19, { children: [
@@ -32134,7 +32174,7 @@ function BasicHelpDialog() {
         className: "HelpDialog__island--tools",
         caption: t("helpDialog.tools"),
         children: [
-          /* @__PURE__ */ jsx114(Shortcut, { label: t("toolBar.hand"), shortcuts: [KEYS47.H] }),
+          /* @__PURE__ */ jsx114(Shortcut, { label: t("toolBar.hand"), shortcuts: [KEYS48.H] }),
           SHAPES2.filter(({ myocSimplifiedMode }) => myocSimplifiedMode).map(
             ({ value, key }) => /* @__PURE__ */ jsx114(
               Shortcut,
@@ -32170,12 +32210,26 @@ function BasicHelpDialog() {
         className: "HelpDialog__island--view",
         caption: t("helpDialog.view"),
         children: [
-          /* @__PURE__ */ jsx114(Shortcut, { label: t("helpDialog.smartZoom"), shortcuts: [KEYS47.F] }),
+          /* @__PURE__ */ jsx114(Shortcut, { label: t("helpDialog.smartZoom"), shortcuts: [KEYS48.F] }),
+          /* @__PURE__ */ jsx114(
+            Shortcut,
+            {
+              label: t("labels.flipViewpointHorizontal"),
+              shortcuts: [getShortcutKey("Shift+R")]
+            }
+          ),
+          /* @__PURE__ */ jsx114(
+            Shortcut,
+            {
+              label: t("labels.flipViewpointVertical"),
+              shortcuts: [getShortcutKey("Alt+Shift+R")]
+            }
+          ),
           /* @__PURE__ */ jsx114(
             Shortcut,
             {
               label: t("helpDialog.dragToZoom"),
-              shortcuts: [`${KEYS47.Z}+${t("helpDialog.drag")}`]
+              shortcuts: [`${KEYS48.Z}+${t("helpDialog.drag")}`]
             }
           ),
           /* @__PURE__ */ jsx114(
@@ -32348,7 +32402,7 @@ var HelpDialog = ({ onClose }) => {
             className: "HelpDialog__island--tools",
             caption: t("helpDialog.tools"),
             children: [
-              /* @__PURE__ */ jsx115(Shortcut2, { label: t("toolBar.hand"), shortcuts: [KEYS48.H] }),
+              /* @__PURE__ */ jsx115(Shortcut2, { label: t("toolBar.hand"), shortcuts: [KEYS49.H] }),
               SHAPES3.map(({ value, key }) => /* @__PURE__ */ jsx115(
                 Shortcut2,
                 {
@@ -32357,12 +32411,12 @@ var HelpDialog = ({ onClose }) => {
                 },
                 value
               )),
-              /* @__PURE__ */ jsx115(Shortcut2, { label: t("toolBar.frame"), shortcuts: [KEYS48.F] }),
+              /* @__PURE__ */ jsx115(Shortcut2, { label: t("toolBar.frame"), shortcuts: [KEYS49.F] }),
               /* @__PURE__ */ jsx115(
                 Shortcut2,
                 {
                   label: t("labels.eyeDropper"),
-                  shortcuts: [KEYS48.I, "Shift+S", "Shift+I"]
+                  shortcuts: [KEYS49.I, "Shift+S", "Shift+I"]
                 }
               ),
               /* @__PURE__ */ jsx115(
@@ -32444,7 +32498,7 @@ var HelpDialog = ({ onClose }) => {
                   isOr: true
                 }
               ),
-              /* @__PURE__ */ jsx115(Shortcut2, { label: t("toolBar.lock"), shortcuts: [KEYS48.Q] }),
+              /* @__PURE__ */ jsx115(Shortcut2, { label: t("toolBar.lock"), shortcuts: [KEYS49.Q] }),
               /* @__PURE__ */ jsx115(
                 Shortcut2,
                 {
@@ -32480,14 +32534,14 @@ var HelpDialog = ({ onClose }) => {
                 Shortcut2,
                 {
                   label: t("helpDialog.smartZoom"),
-                  shortcuts: [KEYS48.F]
+                  shortcuts: [KEYS49.F]
                 }
               ),
               /* @__PURE__ */ jsx115(
                 Shortcut2,
                 {
                   label: t("helpDialog.dragToZoom"),
-                  shortcuts: [`${KEYS48.Z}+${t("helpDialog.drag")}`]
+                  shortcuts: [`${KEYS49.Z}+${t("helpDialog.drag")}`]
                 }
               ),
               /* @__PURE__ */ jsx115(
@@ -32546,6 +32600,20 @@ var HelpDialog = ({ onClose }) => {
                   shortcuts: [getShortcutKey("Alt+R")]
                 }
               ),
+              /* @__PURE__ */ jsx115(
+                Shortcut2,
+                {
+                  label: t("labels.flipViewpointHorizontal"),
+                  shortcuts: [getShortcutKey("Shift+R")]
+                }
+              ),
+              /* @__PURE__ */ jsx115(
+                Shortcut2,
+                {
+                  label: t("labels.flipViewpointVertical"),
+                  shortcuts: [getShortcutKey("Alt+Shift+R")]
+                }
+              ),
               /* @__PURE__ */ jsx115(
                 Shortcut2,
                 {
@@ -32718,7 +32786,7 @@ var HelpDialog = ({ onClose }) => {
                 Shortcut2,
                 {
                   label: t("labels.arrangeElements"),
-                  shortcuts: [getShortcutKey("Shift+R")]
+                  shortcuts: [getShortcutKey("Shift+A")]
                 }
               ),
               /* @__PURE__ */ jsx115(
@@ -33228,7 +33296,7 @@ import {
 } from "@excalidraw/element";
 import { measureText as measureText7 } from "@excalidraw/element";
 import {
-  KEYS as KEYS49,
+  KEYS as KEYS50,
   randomInteger as randomInteger8,
   addEventListener,
   getFontString as getFontString15
@@ -33388,7 +33456,7 @@ var SearchMenu2 = () => {
   });
   useEffect32(() => {
     const eventHandler = (event) => {
-      if (event.key === KEYS49.ESCAPE && !app.state.openDialog && !app.state.openPopup) {
+      if (event.key === KEYS50.ESCAPE && !app.state.openDialog && !app.state.openPopup) {
         event.preventDefault();
         event.stopPropagation();
         setAppState({
@@ -33396,7 +33464,7 @@ var SearchMenu2 = () => {
         });
         return;
       }
-      if (event[KEYS49.CTRL_OR_CMD] && event.key === KEYS49.F) {
+      if (event[KEYS50.CTRL_OR_CMD] && event.key === KEYS50.F) {
         event.preventDefault();
         event.stopPropagation();
         if (app.state.openDialog) {
@@ -33414,14 +33482,14 @@ var SearchMenu2 = () => {
       }
       if (event.target instanceof HTMLElement && event.target.closest(".layer-ui__search")) {
         if (stableState.searchMatches.items.length) {
-          if (event.key === KEYS49.ENTER) {
+          if (event.key === KEYS50.ENTER) {
             event.stopPropagation();
             stableState.goToNextItem();
           }
-          if (event.key === KEYS49.ARROW_UP) {
+          if (event.key === KEYS50.ARROW_UP) {
             event.stopPropagation();
             stableState.goToPreviousItem();
-          } else if (event.key === KEYS49.ARROW_DOWN) {
+          } else if (event.key === KEYS50.ARROW_DOWN) {
             event.stopPropagation();
             stableState.goToNextItem();
           }
@@ -33845,7 +33913,7 @@ import {
   CLASSES as CLASSES8,
   EVENT as EVENT9,
   isDevEnv as isDevEnv12,
-  KEYS as KEYS50,
+  KEYS as KEYS51,
   updateObject
 } from "@excalidraw/common";
 
@@ -34085,7 +34153,7 @@ var SidebarInner = forwardRef5(
     );
     useEffect33(() => {
       const handleKeyDown = (event) => {
-        if (event.key === KEYS50.ESCAPE && (!docked || !editorInterface.canFitSidebar)) {
+        if (event.key === KEYS51.ESCAPE && (!docked || !editorInterface.canFitSidebar)) {
           closeSidebar();
         }
       };
@@ -34381,7 +34449,7 @@ var LaserPointerButton = (props) => {
 // components/Toolbar.tsx
 import clsx58 from "clsx";
 import { useState as useState33 } from "react";
-import { CANVAS_SEARCH_TAB as CANVAS_SEARCH_TAB4, DEFAULT_SIDEBAR as DEFAULT_SIDEBAR4, KEYS as KEYS51 } from "@excalidraw/common";
+import { CANVAS_SEARCH_TAB as CANVAS_SEARCH_TAB4, DEFAULT_SIDEBAR as DEFAULT_SIDEBAR4, KEYS as KEYS52 } from "@excalidraw/common";
 
 // components/HintViewer.tsx
 import { CANVAS_SEARCH_TAB as CANVAS_SEARCH_TAB3, DEFAULT_SIDEBAR as DEFAULT_SIDEBAR3 } from "@excalidraw/common";
@@ -34626,7 +34694,7 @@ var LockActiveToolDropdownItem = ({ app }) => /* @__PURE__ */ jsx131(
     icon: app.state.activeTool.locked ? LockedIcon : UnlockedIcon,
     "data-testid": "toolbar-lock",
     selected: app.state.activeTool.locked,
-    shortcut: KEYS51.Q.toLocaleUpperCase(),
+    shortcut: KEYS52.Q.toLocaleUpperCase(),
     children: t("toolBar.lock-short")
   }
 );
@@ -34696,10 +34764,10 @@ var StrokeEyeDropperButton2 = ({ app }) => /* @__PURE__ */ jsx131(
   {
     type: "button",
     icon: eyeDropperIcon,
-    title: `${t("labels.eyeDropper")} - ${KEYS51.I.toLocaleUpperCase()}`,
+    title: `${t("labels.eyeDropper")} - ${KEYS52.I.toLocaleUpperCase()}`,
     "aria-label": t("labels.eyeDropper"),
-    "aria-keyshortcuts": KEYS51.I.toLocaleUpperCase(),
-    keyBindingLabel: KEYS51.I.toLocaleUpperCase(),
+    "aria-keyshortcuts": KEYS52.I.toLocaleUpperCase(),
+    keyBindingLabel: KEYS52.I.toLocaleUpperCase(),
     "data-testid": "toolbar-eyedropper",
     onClick: () => app.openEyeDropper({ type: "stroke", swapPreviewOnAlt: false })
   }
@@ -34785,7 +34853,7 @@ var ExtraToolsDropdown = ({
             {
               onSelect: () => app.setActiveTool({ type: "frame" }),
               icon: frameToolIcon,
-              shortcut: KEYS51.F.toLocaleUpperCase(),
+              shortcut: KEYS52.F.toLocaleUpperCase(),
               "data-testid": "toolbar-frame",
               selected: frameToolSelected,
               disabled: isToolButtonDisabled(app, "frame"),
@@ -35644,6 +35712,7 @@ var getRelevantAppStateProps = (appState) => ({
   scrollY: appState.scrollY,
   width: appState.width,
   height: appState.height,
+  viewpointFlip: appState.viewpointFlip,
   viewModeEnabled: appState.viewModeEnabled,
   activeTool: appState.activeTool,
   openDialog: appState.openDialog,
@@ -35811,6 +35880,7 @@ var getRelevantAppStateProps2 = (appState) => {
     scrollY: appState.scrollY,
     width: appState.width,
     height: appState.height,
+    viewpointFlip: appState.viewpointFlip,
     viewModeEnabled: appState.viewModeEnabled,
     openDialog: appState.openDialog,
     hoveredElementIds: appState.hoveredElementIds,
@@ -35882,7 +35952,7 @@ var _renderNewElementScene = ({
       normalizedHeight
     });
     context.save();
-    context.scale(appState.zoom.value, appState.zoom.value);
+    applyZoomAndViewpointFlip(context, appState);
     if (newElement9 && newElement9.type !== "selection") {
       if (isInvisiblySmallElement3(newElement9)) {
         return;
@@ -36340,6 +36410,18 @@ var touchTimeout = 0;
 var invalidateContextMenu = false;
 var YOUTUBE_VIDEO_STATES = /* @__PURE__ */ new Map();
 var MAX_EMBEDDABLE_VIEWPORT_SCALE = 4;
+var getViewpointAwareResizeCursor = (cursor, viewpointFlip) => {
+  if (viewpointFlip.horizontal === viewpointFlip.vertical) {
+    return cursor;
+  }
+  if (cursor === "nwse-resize") {
+    return "nesw-resize";
+  }
+  if (cursor === "nesw-resize") {
+    return "nwse-resize";
+  }
+  return cursor;
+};
 var IS_PLAIN_PASTE = false;
 var IS_PLAIN_PASTE_TIMER = 0;
 var PLAIN_PASTE_TOAST_SHOWN = false;
@@ -36562,7 +36644,7 @@ var App = class _App extends React41.Component {
     __publicField(this, "frameNameBoundsCache", {
       get: (frameElement) => {
         let bounds = this.frameNameBoundsCache._cache.get(frameElement.id);
-        if (!bounds || bounds.zoom !== this.state.zoom.value || bounds.versionNonce !== frameElement.versionNonce) {
+        if (!bounds || bounds.zoom !== this.state.zoom.value || bounds.viewpointFlip !== this.state.viewpointFlip || bounds.versionNonce !== frameElement.versionNonce) {
           const frameNameDiv = document.getElementById(
             this.getFrameNameDOMId(frameElement)
           );
@@ -36577,11 +36659,12 @@ var App = class _App extends React41.Component {
               this.state
             );
             bounds = {
-              x: boxSceneTopLeft.x,
-              y: boxSceneTopLeft.y,
-              width: boxSceneBottomRight.x - boxSceneTopLeft.x,
-              height: boxSceneBottomRight.y - boxSceneTopLeft.y,
+              x: Math.min(boxSceneTopLeft.x, boxSceneBottomRight.x),
+              y: Math.min(boxSceneTopLeft.y, boxSceneBottomRight.y),
+              width: Math.abs(boxSceneBottomRight.x - boxSceneTopLeft.x),
+              height: Math.abs(boxSceneBottomRight.y - boxSceneTopLeft.y),
               zoom: this.state.zoom.value,
+              viewpointFlip: this.state.viewpointFlip,
               versionNonce: frameElement.versionNonce
             };
             this.frameNameBoundsCache._cache.set(frameElement.id, bounds);
@@ -36634,7 +36717,10 @@ var App = class _App extends React41.Component {
           return null;
         }
         const { x: x1, y: y1 } = sceneCoordsToViewportCoords7(
-          { sceneX: f.x, sceneY: f.y },
+          {
+            sceneX: f.x + (this.state.viewpointFlip.horizontal ? f.width : 0),
+            sceneY: f.y + (this.state.viewpointFlip.vertical ? f.height : 0)
+          },
           this.state
         );
         const FRAME_NAME_EDIT_PADDING = 6;
@@ -36655,7 +36741,7 @@ var App = class _App extends React41.Component {
               onFocus: (e) => e.target.select(),
               onBlur: () => this.resetEditingFrame(f),
               onKeyDown: (event) => {
-                if (event.key === KEYS52.ESCAPE || event.key === KEYS52.ENTER) {
+                if (event.key === KEYS53.ESCAPE || event.key === KEYS53.ENTER) {
                   this.resetEditingFrame(f);
                 }
               },
@@ -36781,12 +36867,12 @@ var App = class _App extends React41.Component {
             if (shouldUpdateStrokeColor) {
               this.syncActionResult({
                 appState: { ...this.state, currentItemStrokeColor: color },
-                captureUpdate: CaptureUpdateAction39.IMMEDIATELY
+                captureUpdate: CaptureUpdateAction40.IMMEDIATELY
               });
             } else {
               this.syncActionResult({
                 appState: { ...this.state, currentItemBackgroundColor: color },
-                captureUpdate: CaptureUpdateAction39.IMMEDIATELY
+                captureUpdate: CaptureUpdateAction40.IMMEDIATELY
               });
             }
           } else {
@@ -36799,7 +36885,7 @@ var App = class _App extends React41.Component {
                 }
                 return el;
               }),
-              captureUpdate: CaptureUpdateAction39.IMMEDIATELY
+              captureUpdate: CaptureUpdateAction40.IMMEDIATELY
             });
           }
         },
@@ -36876,7 +36962,7 @@ var App = class _App extends React41.Component {
       }
     }));
     __publicField(this, "scheduleCapture", () => this.store.scheduleCapture());
-    __publicField(this, "scheduleUpdate", () => this.store.scheduleAction(CaptureUpdateAction39.NEVER));
+    __publicField(this, "scheduleUpdate", () => this.store.scheduleAction(CaptureUpdateAction40.NEVER));
     // Lifecycle
     __publicField(this, "onBlur", withBatchedUpdates(() => {
       isHoldingSpace = false;
@@ -36894,7 +36980,7 @@ var App = class _App extends React41.Component {
     // letting regular scroll through (trackpad pinch is delivered as
     // ctrl+wheel)
     __publicField(this, "preventBrowserZoomWheel", (event) => {
-      if (event[KEYS52.CTRL_OR_CMD]) {
+      if (event[KEYS53.CTRL_OR_CMD]) {
         event.preventDefault();
       }
     });
@@ -36915,11 +37001,11 @@ var App = class _App extends React41.Component {
      * (via `viewport.translate`).
      */
     __publicField(this, "maybeHandlePageScrollKeyDown", (event) => {
-      if (event.key !== KEYS52.PAGE_UP && event.key !== KEYS52.PAGE_DOWN) {
+      if (event.key !== KEYS53.PAGE_UP && event.key !== KEYS53.PAGE_DOWN) {
         return false;
       }
       let offset = (event.shiftKey ? this.state.width : this.state.height) / this.state.zoom.value;
-      if (event.key === KEYS52.PAGE_DOWN) {
+      if (event.key === KEYS53.PAGE_DOWN) {
         offset = -offset;
       }
       if (event.shiftKey) {
@@ -36934,7 +37020,7 @@ var App = class _App extends React41.Component {
       return true;
     });
     __publicField(this, "preventBrowserZoomKeyDown", (event) => {
-      if (event[KEYS52.CTRL_OR_CMD] && (event.code === CODES11.EQUAL || event.code === CODES11.MINUS || event.code === CODES11.ZERO || event.code === CODES11.NUM_ADD || event.code === CODES11.NUM_SUBTRACT || event.code === CODES11.NUM_ZERO)) {
+      if (event[KEYS53.CTRL_OR_CMD] && (event.code === CODES12.EQUAL || event.code === CODES12.MINUS || event.code === CODES12.ZERO || event.code === CODES12.NUM_ADD || event.code === CODES12.NUM_SUBTRACT || event.code === CODES12.NUM_ZERO)) {
         event.preventDefault();
       }
     });
@@ -37218,7 +37304,7 @@ var App = class _App extends React41.Component {
         elements: restoredElements,
         appState: restoredAppState,
         files: initialData?.files,
-        captureUpdate: CaptureUpdateAction39.NEVER
+        captureUpdate: CaptureUpdateAction40.NEVER
       });
       this.clearImageShapeCache();
       this.fonts.loadSceneFonts().then((fontFaces) => {
@@ -38044,7 +38130,7 @@ var App = class _App extends React41.Component {
           });
         }
         if (!isInputLike(event.target)) {
-          if ((event.key === KEYS52.ESCAPE || event.key === KEYS52.ENTER) && this.state.croppingElementId) {
+          if ((event.key === KEYS53.ESCAPE || event.key === KEYS53.ENTER) && this.state.croppingElementId) {
             this.finishImageCropping();
             return;
           }
@@ -38052,13 +38138,13 @@ var App = class _App extends React41.Component {
             this.scene.getNonDeletedElementsMap(),
             this.state
           );
-          if (selectedElements.length === 1 && isImageElement9(selectedElements[0]) && event.key === KEYS52.ENTER) {
+          if (selectedElements.length === 1 && isImageElement9(selectedElements[0]) && event.key === KEYS53.ENTER) {
             this.startImageCropping(selectedElements[0]);
             return;
           }
-          if (event.key === KEYS52.ESCAPE) {
+          if (event.key === KEYS53.ESCAPE) {
             this.updateEditorAtom(convertElementTypePopupAtom, null);
-          } else if (event.key === KEYS52.TAB && (document.activeElement === this.excalidrawContainerRef?.current || document.activeElement?.classList.contains(
+          } else if (event.key === KEYS53.TAB && (document.activeElement === this.excalidrawContainerRef?.current || document.activeElement?.classList.contains(
             CLASSES10.CONVERT_ELEMENT_TYPE_POPUP
           ))) {
             event.preventDefault();
@@ -38081,15 +38167,15 @@ var App = class _App extends React41.Component {
             return;
           }
         }
-        if (event[KEYS52.CTRL_OR_CMD] && event.key.toLowerCase() === KEYS52.V) {
+        if (event[KEYS53.CTRL_OR_CMD] && event.key.toLowerCase() === KEYS53.V) {
           IS_PLAIN_PASTE = event.shiftKey;
           clearTimeout(IS_PLAIN_PASTE_TIMER);
           IS_PLAIN_PASTE_TIMER = window.setTimeout(() => {
             IS_PLAIN_PASTE = false;
           }, 100);
         }
-        if (event[KEYS52.CTRL_OR_CMD] && isWritableElement4(event.target)) {
-          if (event.code === CODES11.MINUS || event.code === CODES11.EQUAL) {
+        if (event[KEYS53.CTRL_OR_CMD] && isWritableElement4(event.target)) {
+          if (event.code === CODES12.MINUS || event.code === CODES12.EQUAL) {
             event.preventDefault();
             return;
           }
@@ -38097,17 +38183,17 @@ var App = class _App extends React41.Component {
         if (
           // inside an input
           isWritableElement4(event.target) && // unless pressing escape (finalize action)
-          event.key !== KEYS52.ESCAPE || // or unless using arrows (to move between buttons)
+          event.key !== KEYS53.ESCAPE || // or unless using arrows (to move between buttons)
           isArrowKey3(event.key) && isInputLike(event.target)
         ) {
           return;
         }
-        if (event.key === KEYS52.QUESTION_MARK) {
+        if (event.key === KEYS53.QUESTION_MARK) {
           this.setState({
             openDialog: { name: "help" }
           });
           return;
-        } else if (event.key.toLowerCase() === KEYS52.E && event.shiftKey && event[KEYS52.CTRL_OR_CMD]) {
+        } else if (event.key.toLowerCase() === KEYS53.E && event.shiftKey && event[KEYS53.CTRL_OR_CMD]) {
           event.preventDefault();
           this.setState({ openDialog: { name: "imageExport" } });
           return;
@@ -38119,7 +38205,7 @@ var App = class _App extends React41.Component {
         if (this.state.openDialog?.name === "elementLinkSelector") {
           return;
         }
-        if (event.key === KEYS52.ALT) {
+        if (event.key === KEYS53.ALT) {
           if (this.state.activeTool.type === "bucketfill") {
             this.bucketFill.openTemporaryEyeDropper();
             event.preventDefault();
@@ -38134,7 +38220,7 @@ var App = class _App extends React41.Component {
           return;
         }
         const shouldPreventToolSwitching = this.props.viewModeEnabled === true;
-        if (!shouldPreventToolSwitching && this.state.viewModeEnabled && event.key === KEYS52.ESCAPE) {
+        if (!shouldPreventToolSwitching && this.state.viewModeEnabled && event.key === KEYS53.ESCAPE) {
           this.setActiveTool({ type: "selection" });
           return;
         }
@@ -38172,7 +38258,7 @@ var App = class _App extends React41.Component {
             }
             event.stopPropagation();
             return;
-          } else if (event.key === KEYS52.Q) {
+          } else if (event.key === KEYS53.Q) {
             this.toggleLock("keyboard");
             event.stopPropagation();
             return;
@@ -38181,7 +38267,7 @@ var App = class _App extends React41.Component {
         if (this.state.viewModeEnabled) {
           return;
         }
-        if (event[KEYS52.CTRL_OR_CMD] && !event.repeat) {
+        if (event[KEYS53.CTRL_OR_CMD] && !event.repeat) {
           if (getFeatureFlag4("COMPLEX_BINDINGS")) {
             this.resetDelayedBindMode();
           }
@@ -38217,15 +38303,17 @@ var App = class _App extends React41.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 === KEYS52.ARROW_LEFT) {
+          if (event.key === KEYS53.ARROW_LEFT) {
             offsetX = -step;
-          } else if (event.key === KEYS52.ARROW_RIGHT) {
+          } else if (event.key === KEYS53.ARROW_RIGHT) {
             offsetX = step;
-          } else if (event.key === KEYS52.ARROW_UP) {
+          } else if (event.key === KEYS53.ARROW_UP) {
             offsetY = -step;
-          } else if (event.key === KEYS52.ARROW_DOWN) {
+          } else if (event.key === KEYS53.ARROW_DOWN) {
             offsetY = step;
           }
+          offsetX *= getViewpointFlipSign2(this.state.viewpointFlip.horizontal);
+          offsetY *= getViewpointFlipSign2(this.state.viewpointFlip.vertical);
           selectedElements.forEach((element) => {
             this.scene.mutateElement(
               element,
@@ -38241,11 +38329,11 @@ var App = class _App extends React41.Component {
           });
           this.scene.triggerUpdate();
           event.preventDefault();
-        } else if (event.key === KEYS52.ENTER) {
+        } else if (event.key === KEYS53.ENTER) {
           const selectedElements = this.scene.getSelectedElements(this.state);
           if (selectedElements.length === 1) {
             const selectedElement = selectedElements[0];
-            if (event[KEYS52.CTRL_OR_CMD] || isLineElement9(selectedElement)) {
+            if (event[KEYS53.CTRL_OR_CMD] || isLineElement9(selectedElement)) {
               if (isLinearElement11(selectedElement)) {
                 if (!this.state.selectedLinearElement?.isEditing || this.state.selectedLinearElement.elementId !== selectedElement.id) {
                   this.store.scheduleCapture();
@@ -38279,31 +38367,31 @@ var App = class _App extends React41.Component {
             }
           }
         }
-        if (event.key === KEYS52.SPACE && gesture.pointers.size === 0) {
+        if (event.key === KEYS53.SPACE && gesture.pointers.size === 0) {
           isHoldingSpace = true;
           this.cursor.set(CURSOR_TYPE2.GRAB);
           event.preventDefault();
         }
-        if (event.key.toLowerCase() === KEYS52.Z && !event[KEYS52.CTRL_OR_CMD] && !event.altKey && !event.shiftKey) {
+        if (event.key.toLowerCase() === KEYS53.Z && !event[KEYS53.CTRL_OR_CMD] && !event.altKey && !event.shiftKey) {
           isHoldingZ = true;
           this.cursor.set("zoom-in");
           event.preventDefault();
         }
-        if ((event.key === KEYS52.G || event.key === KEYS52.S) && !event.altKey && !event[KEYS52.CTRL_OR_CMD]) {
+        if ((event.key === KEYS53.G || event.key === KEYS53.S) && !event.altKey && !event[KEYS53.CTRL_OR_CMD]) {
           const selectedElements = this.scene.getSelectedElements(this.state);
           if (this.state.activeTool.type === "selection" && !selectedElements.length) {
             return;
           }
-          if (event.key === KEYS52.G && (hasBackground(this.state.activeTool.type) || selectedElements.some((element) => hasBackground(element.type)))) {
+          if (event.key === KEYS53.G && (hasBackground(this.state.activeTool.type) || selectedElements.some((element) => hasBackground(element.type)))) {
             this.setState({ openPopup: "elementBackground" });
             event.stopPropagation();
           }
-          if (event.key === KEYS52.S) {
+          if (event.key === KEYS53.S) {
             this.setState({ openPopup: "elementStroke" });
             event.stopPropagation();
           }
         }
-        if (!event[KEYS52.CTRL_OR_CMD] && event.shiftKey && event.key.toLowerCase() === KEYS52.F) {
+        if (!event[KEYS53.CTRL_OR_CMD] && event.shiftKey && event.key.toLowerCase() === KEYS53.F) {
           const selectedElements = this.scene.getSelectedElements(this.state);
           if (this.state.activeTool.type === "selection" && !selectedElements.length) {
             return;
@@ -38319,9 +38407,9 @@ var App = class _App extends React41.Component {
           }
         }
         const lowerCased = event.key.toLocaleLowerCase();
-        const isPlainStrokeEyeDropper = lowerCased === KEYS52.I && !event.shiftKey && !event[KEYS52.CTRL_OR_CMD];
-        const isPickingStroke = lowerCased === KEYS52.S && event.shiftKey && !event[KEYS52.CTRL_OR_CMD] || isPlainStrokeEyeDropper;
-        const isPickingBackground = lowerCased === KEYS52.I && event.shiftKey && !event[KEYS52.CTRL_OR_CMD];
+        const isPlainStrokeEyeDropper = lowerCased === KEYS53.I && !event.shiftKey && !event[KEYS53.CTRL_OR_CMD];
+        const isPickingStroke = lowerCased === KEYS53.S && event.shiftKey && !event[KEYS53.CTRL_OR_CMD] || isPlainStrokeEyeDropper;
+        const isPickingBackground = lowerCased === KEYS53.I && event.shiftKey && !event[KEYS53.CTRL_OR_CMD];
         if (isPickingStroke || isPickingBackground) {
           this.openEyeDropper({
             type: isPickingStroke ? "stroke" : "background",
@@ -38334,7 +38422,7 @@ var App = class _App extends React41.Component {
       if (!this.isInteractionEnabled()) {
         return;
       }
-      if (event.key === KEYS52.SPACE) {
+      if (event.key === KEYS53.SPACE) {
         if (this.state.viewModeEnabled && this.state.activeTool.type !== "laser" || this.state.openDialog?.name === "elementLinkSelector") {
           this.cursor.set(CURSOR_TYPE2.GRAB);
         } else if (isSelectionLikeTool(this.state.activeTool.type)) {
@@ -38350,15 +38438,15 @@ var App = class _App extends React41.Component {
         }
         isHoldingSpace = false;
       }
-      if (event.key.toLowerCase() === KEYS52.Z) {
+      if (event.key.toLowerCase() === KEYS53.Z) {
         isHoldingZ = false;
         this.cursor.reset();
       }
-      if (event.key === KEYS52.ALT) {
+      if (event.key === KEYS53.ALT) {
         this.bucketFill.closeTemporaryEyeDropper();
         maybeHandleArrowPointlikeDrag({ app: this, event });
       }
-      if (event.key === KEYS52.ALT && this.state.bindMode === "skip" || !event[KEYS52.CTRL_OR_CMD] && !isBindingEnabled3(this.state)) {
+      if (event.key === KEYS53.ALT && this.state.bindMode === "skip" || !event[KEYS53.CTRL_OR_CMD] && !isBindingEnabled3(this.state)) {
         this.setState({
           bindMode: "orbit"
         });
@@ -38386,7 +38474,7 @@ var App = class _App extends React41.Component {
           }
         }
       }
-      if (!event[KEYS52.CTRL_OR_CMD]) {
+      if (!event[KEYS53.CTRL_OR_CMD]) {
         const preferenceEnabled = this.state.bindingPreference === "enabled";
         if (this.state.isBindingEnabled !== preferenceEnabled) {
           flushSync2(() => {
@@ -38833,7 +38921,7 @@ var App = class _App extends React41.Component {
       );
       if (selectedElements.length === 1 && isLinearElement11(selectedElements[0])) {
         const selectedLinearElement = selectedElements[0];
-        if ((event[KEYS52.CTRL_OR_CMD] && isSimpleArrow(selectedLinearElement) || isLineElement9(selectedLinearElement)) && (!this.state.selectedLinearElement?.isEditing || this.state.selectedLinearElement.elementId !== selectedLinearElement.id)) {
+        if ((event[KEYS53.CTRL_OR_CMD] && isSimpleArrow(selectedLinearElement) || isLineElement9(selectedLinearElement)) && (!this.state.selectedLinearElement?.isEditing || this.state.selectedLinearElement.elementId !== selectedLinearElement.id)) {
           this.actionManager.executeAction(actionToggleLinearEditor);
           return;
         } else if (this.state.selectedLinearElement && isElbowArrow10(selectedElements[0])) {
@@ -38929,7 +39017,7 @@ var App = class _App extends React41.Component {
         if (!this.state.selectedLinearElement?.isEditing) {
           const container = (
             // skip binding to container on dblclick when holding ctrl
-            !event[KEYS52.CTRL_OR_CMD] && this.getTextBindableContainerAtPosition(sceneX, sceneY)
+            !event[KEYS53.CTRL_OR_CMD] && this.getTextBindableContainerAtPosition(sceneX, sceneY)
           );
           if (container) {
             if (
@@ -39633,7 +39721,10 @@ var App = class _App extends React41.Component {
           );
           if (elementWithTransformHandleType && elementWithTransformHandleType.transformHandleType) {
             this.cursor.set(
-              getCursorForResizingElement(elementWithTransformHandleType)
+              getViewpointAwareResizeCursor(
+                getCursorForResizingElement(elementWithTransformHandleType),
+                this.state.viewpointFlip
+              )
             );
             return;
           }
@@ -39649,9 +39740,12 @@ var App = class _App extends React41.Component {
         );
         if (transformHandleType) {
           this.cursor.set(
-            getCursorForResizingElement({
-              transformHandleType
-            })
+            getViewpointAwareResizeCursor(
+              getCursorForResizingElement({
+                transformHandleType
+              }),
+              this.state.viewpointFlip
+            )
           );
           return;
         }
@@ -39694,7 +39788,7 @@ var App = class _App extends React41.Component {
           this.cursor.set(
             hoveredArrowTextAnchor ? CURSOR_TYPE2.POINTER : isTextElement18(hitElement) ? CURSOR_TYPE2.TEXT : CURSOR_TYPE2.CROSSHAIR
           );
-        } else if (!event[KEYS52.CTRL_OR_CMD] && this.isHittingCommonBoundingBoxOfSelectedElements(
+        } else if (!event[KEYS53.CTRL_OR_CMD] && this.isHittingCommonBoundingBoxOfSelectedElements(
           scenePointer,
           selectedElements
         )) {
@@ -39707,7 +39801,7 @@ var App = class _App extends React41.Component {
           this.cursor.set(CURSOR_TYPE2.AUTO);
         } else if (
           // if using cmd/ctrl, we're not dragging
-          !event[KEYS52.CTRL_OR_CMD] && // editing text -> don't show move cursor when hovering over its bbox
+          !event[KEYS53.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(
@@ -39860,7 +39954,7 @@ var App = class _App extends React41.Component {
               this.state
             )
           },
-          captureUpdate: this.state.openDialog?.name === "elementLinkSelector" ? CaptureUpdateAction39.EVENTUALLY : CaptureUpdateAction39.NEVER
+          captureUpdate: this.state.openDialog?.name === "elementLinkSelector" ? CaptureUpdateAction40.EVENTUALLY : CaptureUpdateAction40.NEVER
         });
         return;
       }
@@ -39967,7 +40061,7 @@ var App = class _App extends React41.Component {
       }
       if (this.state.activeTool.type === "lasso") {
         const hitSelectedElement = pointerDownState.hit.element && this.isASelectedElement(pointerDownState.hit.element);
-        const shouldForceLassoReselect = event.altKey && event[KEYS52.CTRL_OR_CMD] && !pointerDownState.resize.handleType;
+        const shouldForceLassoReselect = event.altKey && event[KEYS53.CTRL_OR_CMD] && !pointerDownState.resize.handleType;
         const shouldStartLassoSelection = shouldForceLassoReselect || !pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements && !pointerDownState.resize.handleType && !hitSelectedElement;
         if (shouldStartLassoSelection) {
           if (!this.lassoTrail.hasCurrentTrail) {
@@ -40219,8 +40313,8 @@ var App = class _App extends React41.Component {
           window.addEventListener(EVENT11.POINTER_UP, enableNextPaste);
         }
         this.viewport.translate({
-          scrollX: this.state.scrollX - deltaX / this.state.zoom.value,
-          scrollY: this.state.scrollY - deltaY / this.state.zoom.value
+          scrollX: this.state.scrollX - deltaX * getViewpointFlipSign2(this.state.viewpointFlip.horizontal) / this.state.zoom.value,
+          scrollY: this.state.scrollY - deltaY * getViewpointFlipSign2(this.state.viewpointFlip.vertical) / this.state.zoom.value
         });
       });
       const teardown = withBatchedUpdates(
@@ -40288,8 +40382,8 @@ var App = class _App extends React41.Component {
               // 2x multiplier is just a magic number that makes this work correctly
               // on touchscreen devices (note: if we get report that panning is slower/faster
               // than actual movement, consider swapping with devicePixelRatio)
-              scrollX: zoomedViewport.scrollX + 2 * deltaX / zoomValue,
-              scrollY: zoomedViewport.scrollY + 2 * deltaY / zoomValue,
+              scrollX: zoomedViewport.scrollX + 2 * deltaX * getViewpointFlipSign2(state.viewpointFlip.horizontal) / zoomValue,
+              scrollY: zoomedViewport.scrollY + 2 * deltaY * getViewpointFlipSign2(state.viewpointFlip.vertical) / zoomValue,
               shouldCacheIgnoreZoom: true
             },
             { zoomPreConstrained: true }
@@ -40501,7 +40595,7 @@ var App = class _App extends React41.Component {
               ) : makeNextSelectedElementIds4({}, prevState)
             }));
           } else if (hitElement != null) {
-            if (event[KEYS52.CTRL_OR_CMD]) {
+            if (event[KEYS53.CTRL_OR_CMD]) {
               if (event.altKey) {
                 if (this.state.openDialog?.name === "elementLinkSelector") {
                   this.setOpenDialog(null);
@@ -40729,7 +40823,7 @@ var App = class _App extends React41.Component {
       const [gridX, gridY] = getGridPoint4(
         sceneX,
         sceneY,
-        this.lastPointerDownEvent?.[KEYS52.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+        this.lastPointerDownEvent?.[KEYS53.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       const element = newIframeElement({
         type: "iframe",
@@ -40759,7 +40853,7 @@ var App = class _App extends React41.Component {
       const [gridX, gridY] = getGridPoint4(
         sceneX,
         sceneY,
-        this.lastPointerDownEvent?.[KEYS52.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+        this.lastPointerDownEvent?.[KEYS53.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       const embedLink = getEmbedLink2(link);
       if (!embedLink) {
@@ -40800,7 +40894,7 @@ var App = class _App extends React41.Component {
       const [gridX, gridY] = getGridPoint4(
         sceneX,
         sceneY,
-        this.lastPointerDownEvent?.[KEYS52.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+        this.lastPointerDownEvent?.[KEYS53.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       const topLayerFrame = addToFrameUnderCursor ? this.getTopLayerFrameAtSceneCoords({
         x: gridX,
@@ -40927,7 +41021,7 @@ var App = class _App extends React41.Component {
         const [gridX, gridY] = getGridPoint4(
           pointerDownState.origin.x,
           pointerDownState.origin.y,
-          event[KEYS52.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+          event[KEYS53.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
         );
         const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
           x: gridX,
@@ -41062,7 +41156,7 @@ var App = class _App extends React41.Component {
       const [gridX, gridY] = getGridPoint4(
         pointerDownState.origin.x,
         pointerDownState.origin.y,
-        this.lastPointerDownEvent?.[KEYS52.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+        this.lastPointerDownEvent?.[KEYS53.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
         x: gridX,
@@ -41110,7 +41204,7 @@ var App = class _App extends React41.Component {
       const [gridX, gridY] = getGridPoint4(
         pointerDownState.origin.x,
         pointerDownState.origin.y,
-        this.lastPointerDownEvent?.[KEYS52.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+        this.lastPointerDownEvent?.[KEYS53.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       const constructorOpts = {
         x: gridX,
@@ -41437,7 +41531,7 @@ var App = class _App extends React41.Component {
         });
       }
       if (erroredFiles.size || updatedFiles.size) {
-        this.store.scheduleAction(CaptureUpdateAction39.NEVER);
+        this.store.scheduleAction(CaptureUpdateAction40.NEVER);
         this.scene.replaceAllElements(
           this.scene.getElementsIncludingDeleted().map((element) => {
             if (isInitializedImageElement5(element)) {
@@ -41583,7 +41677,7 @@ var App = class _App extends React41.Component {
           )
         },
         elements: nextElements,
-        captureUpdate: CaptureUpdateAction39.IMMEDIATELY
+        captureUpdate: CaptureUpdateAction40.IMMEDIATELY
       });
       this.setState({}, () => {
         this.actionManager.executeAction(actionFinalize);
@@ -41640,7 +41734,7 @@ var App = class _App extends React41.Component {
                 isLoading: false
               },
               replaceFiles: true,
-              captureUpdate: CaptureUpdateAction39.IMMEDIATELY
+              captureUpdate: CaptureUpdateAction40.IMMEDIATELY
             });
             return;
           } catch (error) {
@@ -41712,7 +41806,7 @@ var App = class _App extends React41.Component {
         {
           syncInvalidIndices3(elements.concat(ret.elements));
           this.store.scheduleMicroAction({
-            action: CaptureUpdateAction39.NEVER,
+            action: CaptureUpdateAction40.NEVER,
             elements,
             appState: void 0
           });
@@ -41725,7 +41819,7 @@ var App = class _App extends React41.Component {
               isLoading: false
             },
             replaceFiles: true,
-            captureUpdate: CaptureUpdateAction39.IMMEDIATELY
+            captureUpdate: CaptureUpdateAction40.IMMEDIATELY
           });
         }
       } catch (error) {
@@ -41823,7 +41917,7 @@ var App = class _App extends React41.Component {
       let [gridX, gridY] = getGridPoint4(
         pointerCoords.x,
         pointerCoords.y,
-        event[KEYS52.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+        event[KEYS53.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       const image = isInitializedImageElement5(newElement9) && this.imageCache.get(newElement9.fileId)?.image;
       const aspectRatio = image && !(image instanceof Promise) ? image.width / image.height : null;
@@ -41890,7 +41984,7 @@ var App = class _App extends React41.Component {
       const [x, y] = getGridPoint4(
         pointerCoords.x - pointerDownState.resize.offset.x,
         pointerCoords.y - pointerDownState.resize.offset.y,
-        event[KEYS52.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+        event[KEYS53.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       const croppingElement = this.scene.getNonDeletedElementsMap().get(this.state.croppingElementId);
       if (transformHandleType && croppingElement && isImageElement9(croppingElement)) {
@@ -41902,7 +41996,7 @@ var App = class _App extends React41.Component {
           const [gridX, gridY] = getGridPoint4(
             pointerCoords.x,
             pointerCoords.y,
-            event[KEYS52.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+            event[KEYS53.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
           );
           const dragOffset = {
             x: gridX - pointerDownState.originInGrid.x,
@@ -41964,7 +42058,7 @@ var App = class _App extends React41.Component {
       let [resizeX, resizeY] = getGridPoint4(
         pointerCoords.x - pointerDownState.resize.offset.x,
         pointerCoords.y - pointerDownState.resize.offset.y,
-        event[KEYS52.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+        event[KEYS53.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       const frameElementsOffsetsMap = /* @__PURE__ */ new Map();
       selectedFrames.forEach((frame) => {
@@ -41983,7 +42077,7 @@ var App = class _App extends React41.Component {
         const [gridX, gridY] = getGridPoint4(
           pointerCoords.x,
           pointerCoords.y,
-          event[KEYS52.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+          event[KEYS53.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
         );
         const dragOffset = {
           x: gridX - pointerDownState.originInGrid.x,
@@ -42098,6 +42192,9 @@ var App = class _App extends React41.Component {
         if (this.state.viewModeEnabled) {
           return [
             actionSmartZoom,
+            actionFlipViewpointHorizontal,
+            actionFlipViewpointVertical,
+            CONTEXT_MENU_SEPARATOR,
             actionToggleGridMode,
             actionToggleViewMode,
             actionToggleStats
@@ -42113,6 +42210,10 @@ var App = class _App extends React41.Component {
           actionToggleObjectsSnapMode,
           actionToggleArrowBinding,
           actionToggleMidpointSnapping,
+          CONTEXT_MENU_SEPARATOR,
+          actionFlipViewpointHorizontal,
+          actionFlipViewpointVertical,
+          CONTEXT_MENU_SEPARATOR,
           actionToggleViewMode,
           actionToggleStats
         ];
@@ -42122,6 +42223,9 @@ var App = class _App extends React41.Component {
           ...elementLinkContextMenuItems,
           elementLinkContextMenuItems.length > 0 && CONTEXT_MENU_SEPARATOR,
           actionSmartZoom,
+          actionFlipViewpointHorizontal,
+          actionFlipViewpointVertical,
+          CONTEXT_MENU_SEPARATOR,
           actionCopy,
           imageContextMenuItems.length > 0 && CONTEXT_MENU_SEPARATOR,
           ...imageContextMenuItems
@@ -42137,6 +42241,8 @@ var App = class _App extends React41.Component {
       return [
         CONTEXT_MENU_SEPARATOR,
         actionSmartZoom,
+        actionFlipViewpointHorizontal,
+        actionFlipViewpointVertical,
         CONTEXT_MENU_SEPARATOR,
         actionCut,
         actionCopy,
@@ -42184,7 +42290,7 @@ var App = class _App extends React41.Component {
         if (!(event.target instanceof HTMLCanvasElement || event.target instanceof HTMLTextAreaElement || event.target instanceof HTMLIFrameElement || event.target instanceof HTMLElement && (event.target.classList.contains(CLASSES10.FRAME_NAME) || event.target.classList.contains(
           "excalidraw-eye-dropper-backdrop"
         )))) {
-          if (event[KEYS52.CTRL_OR_CMD]) {
+          if (event[KEYS53.CTRL_OR_CMD]) {
             event.preventDefault();
           }
           return;
@@ -42230,15 +42336,15 @@ var App = class _App extends React41.Component {
           return;
         }
         if (event.shiftKey) {
-          this.viewport.translate(({ zoom, scrollX }) => ({
+          this.viewport.translate(({ zoom, scrollX, viewpointFlip }) => ({
             // on Mac, shift+wheel tends to result in deltaX
-            scrollX: scrollX - (deltaY || deltaX) / zoom.value
+            scrollX: scrollX - (deltaY || deltaX) * getViewpointFlipSign2(viewpointFlip.horizontal) / zoom.value
           }));
           return;
         }
-        this.viewport.translate(({ zoom, scrollX, scrollY }) => ({
-          scrollX: scrollX - deltaX / zoom.value,
-          scrollY: scrollY - deltaY / zoom.value
+        this.viewport.translate(({ zoom, scrollX, scrollY, viewpointFlip }) => ({
+          scrollX: scrollX - deltaX * getViewpointFlipSign2(viewpointFlip.horizontal) / zoom.value,
+          scrollY: scrollY - deltaY * getViewpointFlipSign2(viewpointFlip.vertical) / zoom.value
         }));
       }
     ));
@@ -42945,7 +43051,7 @@ var App = class _App extends React41.Component {
             "is-hovered": isHovered
           }),
           style: {
-            transform: isVisible ? `translate(${x - this.state.offsetLeft}px, ${y - this.state.offsetTop}px) scale(${scale})` : "none",
+            transform: isVisible ? `translate(${x - this.state.offsetLeft}px, ${y - this.state.offsetTop}px) scale(${scale * getViewpointFlipSign2(this.state.viewpointFlip.horizontal)}, ${scale * getViewpointFlipSign2(this.state.viewpointFlip.vertical)})` : "none",
             display: isVisible ? "block" : "none",
             opacity: getRenderOpacity(
               el,
@@ -44416,12 +44522,12 @@ var App = class _App extends React41.Component {
     const isElbowArrowOnly = selectedElements.findIndex(isElbowArrow10) === 0;
     return {
       origin,
-      withCmdOrCtrl: event[KEYS52.CTRL_OR_CMD],
+      withCmdOrCtrl: event[KEYS53.CTRL_OR_CMD],
       originInGrid: tupleToCoors(
         getGridPoint4(
           origin.x,
           origin.y,
-          event[KEYS52.CTRL_OR_CMD] || isElbowArrowOnly ? null : this.getEffectiveGridSize()
+          event[KEYS53.CTRL_OR_CMD] || isElbowArrowOnly ? null : this.getEffectiveGridSize()
         )
       ),
       scrollbars: isOverScrollBars(
@@ -44569,7 +44675,7 @@ var App = class _App extends React41.Component {
   }
   onKeyUpFromPointerDownHandler(pointerDownState) {
     return withBatchedUpdates((event) => {
-      event.key === KEYS52.ALT && event.preventDefault();
+      event.key === KEYS53.ALT && event.preventDefault();
       if (this.maybeHandleResize(pointerDownState, event)) {
         return;
       }
@@ -44591,7 +44697,7 @@ var App = class _App extends React41.Component {
         const [gridX2, gridY2] = getGridPoint4(
           pointerCoords.x,
           pointerCoords.y,
-          event[KEYS52.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+          event[KEYS53.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
         );
         let index = this.state.selectedLinearElement.initialState.segmentMidpoint.index;
         if (index < 0) {
@@ -44659,7 +44765,7 @@ var App = class _App extends React41.Component {
       const [gridX, gridY] = getGridPoint4(
         pointerCoords.x,
         pointerCoords.y,
-        event[KEYS52.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+        event[KEYS53.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       if (pointerDownState.resize.isResizing) {
         pointerDownState.lastCoords.x = pointerCoords.x;
@@ -44707,7 +44813,7 @@ var App = class _App extends React41.Component {
             this.state.selectedLinearElement,
             pointerCoords,
             this,
-            !event[KEYS52.CTRL_OR_CMD],
+            !event[KEYS53.CTRL_OR_CMD],
             this.scene
           );
           if (!ret) {
@@ -44904,7 +45010,7 @@ var App = class _App extends React41.Component {
               dragOffset,
               this.scene,
               snapOffset,
-              event[KEYS52.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
+              event[KEYS53.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
             );
           }
           this.setState({
@@ -45534,7 +45640,7 @@ var App = class _App extends React41.Component {
           appState: {
             newElement: null
           },
-          captureUpdate: CaptureUpdateAction39.NEVER
+          captureUpdate: CaptureUpdateAction40.NEVER
         });
         return;
       }
@@ -45665,7 +45771,7 @@ var App = class _App extends React41.Component {
       if (resizingElement && isInvisiblySmallElement4(resizingElement)) {
         this.updateScene({
           elements: this.scene.getElementsIncludingDeleted().filter((el) => el.id !== resizingElement.id),
-          captureUpdate: CaptureUpdateAction39.NEVER
+          captureUpdate: CaptureUpdateAction40.NEVER
         });
       }
       if (pointerDownState.resize.isResizing) {
@@ -45888,7 +45994,7 @@ var App = class _App extends React41.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[KEYS52.CTRL_OR_CMD] && !childEvent.altKey && childEvent.pointerType !== "touch" && hitElement && (isTextElement18(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[KEYS53.CTRL_OR_CMD] && !childEvent.altKey && childEvent.pointerType !== "touch" && hitElement && (isTextElement18(hitElement) && this.state.selectedElementIds[hitElement.id] && this.scene.getSelectedElements(this.state).length === 1 || selectedTextEditingContainer)) {
         this.startTextEditing({
           sceneX: sceneCoords.x,
           sceneY: sceneCoords.y,
@@ -46535,7 +46641,7 @@ import {
   newElementWith as newElementWith12,
   bumpVersion as bumpVersion4
 } from "@excalidraw/element";
-import { CaptureUpdateAction as CaptureUpdateAction40 } from "@excalidraw/element";
+import { CaptureUpdateAction as CaptureUpdateAction41 } from "@excalidraw/element";
 import {
   getCommonBounds as getCommonBounds15,
   getVisibleSceneBounds as getVisibleSceneBounds2,
@@ -46796,7 +46902,7 @@ function useExcalidrawStateValue(selector) {
 }
 export {
   Button,
-  CaptureUpdateAction40 as CaptureUpdateAction,
+  CaptureUpdateAction41 as CaptureUpdateAction,
   DEFAULT_LASER_COLOR2 as DEFAULT_LASER_COLOR,
   DEFAULT_OVERSCROLL,
   DefaultSidebar,