@myoc/excalidraw 0.19.518 → 0.19.519

package/dist/dev/index.js

@@ -57,10 +57,10 @@ import {
   saveAsJSON,
   serializeAsJSON,
   strokeRectWithRotation_simple
-} from "./chunk-36IX6I7U.js";
+} from "./chunk-RIK6B6HD.js";
 import {
   define_import_meta_env_default
-} from "./chunk-2ZDXTNY7.js";
+} from "./chunk-MCPNWEHU.js";
 import {
   en_default
 } from "./chunk-ZGRXNVW4.js";
@@ -82,6 +82,7 @@ import React42, {
   useState as useState33
 } from "react";
 import {
+  applyDarkModeFilter as applyDarkModeFilter5,
   DEFAULT_IMAGE_OPTIONS,
   DEFAULT_UI_OPTIONS,
   isShallowEqual as isShallowEqual9
@@ -96,11 +97,11 @@ import rough3 from "roughjs/bin/rough";
 import { nanoid } from "nanoid";
 import {
   clamp as clamp8,
-  pointFrom as pointFrom34,
+  pointFrom as pointFrom32,
   pointDistance as pointDistance9,
   vector as vector3,
-  pointRotateRads as pointRotateRads23,
-  vectorFromPoint as vectorFromPoint10,
+  pointRotateRads as pointRotateRads21,
+  vectorFromPoint as vectorFromPoint9,
   vectorSubtract as vectorSubtract2,
   vectorDot,
   vectorNormalize as vectorNormalize5
@@ -173,7 +174,7 @@ import {
   normalizeEOL as normalizeEOL2,
   getDateTime,
   isShallowEqual as isShallowEqual8,
-  arrayToMap as arrayToMap30,
+  arrayToMap as arrayToMap29,
   applyDarkModeFilter as applyDarkModeFilter4,
   AppEventBus,
   randomInteger as randomInteger4,
@@ -220,7 +221,7 @@ import {
   deepCopyElement as deepCopyElement4,
   duplicateElements as duplicateElements2,
   hasBoundTextElement as hasBoundTextElement9,
-  isArrowElement as isArrowElement14,
+  isArrowElement as isArrowElement13,
   isBindingElement as isBindingElement4,
   isBindingElementType,
   isBoundToContainer as isBoundToContainer9,
@@ -228,7 +229,7 @@ import {
   isImageElement as isImageElement9,
   isEmbeddableElement as isEmbeddableElement4,
   isInitializedImageElement as isInitializedImageElement3,
-  isLinearElement as isLinearElement12,
+  isLinearElement as isLinearElement11,
   isLinearElementType as isLinearElementType2,
   isUsingAdaptiveRadius as isUsingAdaptiveRadius4,
   isIframeElement as isIframeElement2,
@@ -238,7 +239,7 @@ import {
   isElbowArrow as isElbowArrow10,
   isFlowchartNodeElement as isFlowchartNodeElement2,
   isBindableElement as isBindableElement3,
-  isTextElement as isTextElement19,
+  isTextElement as isTextElement18,
   getNormalizedDimensions,
   isElementCompletelyInViewport as isElementCompletelyInViewport2,
   isElementInViewport as isElementInViewport3,
@@ -327,7 +328,7 @@ import {
   calculateFixedPointForNonElbowArrowBinding as calculateFixedPointForNonElbowArrowBinding2,
   bindOrUnbindBindingElement as bindOrUnbindBindingElement2,
   mutateElement as mutateElement6,
-  getElementBounds as getElementBounds5,
+  getElementBounds as getElementBounds4,
   doBoundsIntersect as doBoundsIntersect4,
   isPointInElement as isPointInElement3,
   maxBindingDistance_simple as maxBindingDistance_simple3,
@@ -8390,16 +8391,21 @@ var actionToggleTheme = register({
   icon: (appState, elements) => appState.theme === THEME5.LIGHT ? MoonIcon : SunIcon,
   viewMode: true,
   trackEvent: { category: "canvas" },
-  perform: (_, appState, value) => {
+  perform: (_, appState, value, app) => {
+    const nextTheme = value || (appState.theme === THEME5.LIGHT ? THEME5.DARK : THEME5.LIGHT);
+    if (app.props.onThemeChange) {
+      app.props.onThemeChange(nextTheme);
+      return false;
+    }
     return {
       appState: {
         ...appState,
-        theme: value || (appState.theme === THEME5.LIGHT ? THEME5.DARK : THEME5.LIGHT)
+        theme: nextTheme
       },
       captureUpdate: CaptureUpdateAction6.EVENTUALLY
     };
   },
-  keyTest: (event) => event.altKey && event.shiftKey && event.code === CODES2.D,
+  keyTest: (event) => !event[KEYS12.CTRL_OR_CMD] && event.altKey && event.shiftKey && event.code === CODES2.D,
   predicate: (elements, appState, props, app) => {
     return !!app.props.UIOptions.canvasActions.toggleTheme;
   }
@@ -9611,7 +9617,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-VHQDH63K.js").then(
+        (blob2) => import("./data/image-IRC25PM5.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -12676,9 +12682,9 @@ var getCurvePathOps = (shape) => {
 
 // ../element/src/shape.ts
 import {
-  pointFrom as pointFrom17,
+  pointFrom as pointFrom16,
   pointDistance as pointDistance7,
-  pointRotateRads as pointRotateRads13
+  pointRotateRads as pointRotateRads12
 } from "@excalidraw/math";
 import {
   ROUGHNESS,
@@ -12695,9 +12701,9 @@ import { RoughGenerator } from "roughjs/bin/generator";
 import rough2 from "roughjs/bin/rough";
 import {
   isRightAngleRads,
-  lineSegment as lineSegment7,
-  pointFrom as pointFrom16,
-  pointRotateRads as pointRotateRads12
+  lineSegment as lineSegment6,
+  pointFrom as pointFrom15,
+  pointRotateRads as pointRotateRads11
 } from "@excalidraw/math";
 import {
   BOUND_TEXT_PADDING as BOUND_TEXT_PADDING4,
@@ -12726,22 +12732,22 @@ import {
 } from "@excalidraw/common";
 import {
   degreesToRadians,
-  lineSegment as lineSegment6,
+  lineSegment as lineSegment5,
   pointDistance as pointDistance6,
-  pointFrom as pointFrom14,
+  pointFrom as pointFrom13,
   pointFromArray as pointFromArray3,
-  pointRotateRads as pointRotateRads10
+  pointRotateRads as pointRotateRads9
 } from "@excalidraw/math";
 import { pointsOnBezierCurves as pointsOnBezierCurves2 } from "points-on-curve";
 
 // ../element/src/linearElementEditor.ts
 import {
   pointCenter,
-  pointFrom as pointFrom13,
-  pointRotateRads as pointRotateRads9,
+  pointFrom as pointFrom12,
+  pointRotateRads as pointRotateRads8,
   pointsEqual as pointsEqual7,
   pointDistance as pointDistance5,
-  vectorFromPoint as vectorFromPoint8,
+  vectorFromPoint as vectorFromPoint7,
   curveLength,
   curvePointAtLength
 } from "@excalidraw/math";
@@ -13002,20 +13008,13 @@ import { arrayToMap as arrayToMap20, findIndex, findLastIndex } from "@excalidra
 
 // ../element/src/selection.ts
 import { arrayToMap as arrayToMap19, isShallowEqual } from "@excalidraw/common";
-import {
-  lineSegment as lineSegment5,
-  pointFrom as pointFrom12,
-  pointRotateRads as pointRotateRads8
-} from "@excalidraw/math";
 
 // ../element/src/frame.ts
 import { arrayToMap as arrayToMap18 } from "@excalidraw/common";
-import { isPointWithinBounds as isPointWithinBounds2, pointFrom as pointFrom11 } from "@excalidraw/math";
-
-// ../utils/src/bbox.ts
 import {
-  vectorCross as vectorCross3,
-  vectorFromPoint as vectorFromPoint7
+  isPointWithinBounds as isPointWithinBounds2,
+  pointFrom as pointFrom11,
+  segmentsIntersectAt as segmentsIntersectAt2
 } from "@excalidraw/math";
 
 // ../element/src/fractionalIndex.ts
@@ -13242,17 +13241,17 @@ var getArrowheadPoints = (element, shape, position, arrowhead, offsetMultiplier
   const index = position === "start" ? 1 : ops.length - 1;
   const data = ops[index].data;
   invariant12(data.length === 6, "Op data length is not 6");
-  const p3 = pointFrom14(data[4], data[5]);
-  const p2 = pointFrom14(data[2], data[3]);
-  const p1 = pointFrom14(data[0], data[1]);
+  const p3 = pointFrom13(data[4], data[5]);
+  const p2 = pointFrom13(data[2], data[3]);
+  const p1 = pointFrom13(data[0], data[1]);
   const prevOp = ops[index - 1];
-  let p0 = pointFrom14(0, 0);
+  let p0 = pointFrom13(0, 0);
   if (prevOp.op === "move") {
     const p = pointFromArray3(prevOp.data);
     invariant12(p != null, "Op data is not a point");
     p0 = p;
   } else if (prevOp.op === "bcurveTo") {
-    p0 = pointFrom14(prevOp.data[4], prevOp.data[5]);
+    p0 = pointFrom13(prevOp.data[4], prevOp.data[5]);
   }
   const equation = (t2, idx) => Math.pow(1 - t2, 3) * p3[idx] + 3 * t2 * Math.pow(1 - t2, 2) * p2[idx] + 3 * Math.pow(t2, 2) * (1 - t2) * p1[idx] + p0[idx] * Math.pow(t2, 3);
   const [x2, y2] = position === "start" ? p0 : p3;
@@ -13279,26 +13278,26 @@ var getArrowheadPoints = (element, shape, position, arrowhead, offsetMultiplier
   }
   const angle = getArrowheadAngle(arrowhead);
   if (arrowhead === "cardinality_many" || arrowhead === "cardinality_one_or_many") {
-    const [x32, y32] = pointRotateRads10(
-      pointFrom14(tx, ty),
-      pointFrom14(xs, ys),
+    const [x32, y32] = pointRotateRads9(
+      pointFrom13(tx, ty),
+      pointFrom13(xs, ys),
       degreesToRadians(-angle)
     );
-    const [x42, y42] = pointRotateRads10(
-      pointFrom14(tx, ty),
-      pointFrom14(xs, ys),
+    const [x42, y42] = pointRotateRads9(
+      pointFrom13(tx, ty),
+      pointFrom13(xs, ys),
       degreesToRadians(angle)
     );
     return [xs, ys, x32, y32, x42, y42];
   }
-  const [x3, y3] = pointRotateRads10(
-    pointFrom14(xs, ys),
-    pointFrom14(tx, ty),
+  const [x3, y3] = pointRotateRads9(
+    pointFrom13(xs, ys),
+    pointFrom13(tx, ty),
     -angle * Math.PI / 180
   );
-  const [x4, y4] = pointRotateRads10(
-    pointFrom14(xs, ys),
-    pointFrom14(tx, ty),
+  const [x4, y4] = pointRotateRads9(
+    pointFrom13(xs, ys),
+    pointFrom13(tx, ty),
     degreesToRadians(angle)
   );
   if (arrowhead === "diamond" || arrowhead === "diamond_outline") {
@@ -13306,16 +13305,16 @@ var getArrowheadPoints = (element, shape, position, arrowhead, offsetMultiplier
     let oy;
     if (position === "start") {
       const [px, py] = element.points.length > 1 ? element.points[1] : [0, 0];
-      [ox, oy] = pointRotateRads10(
-        pointFrom14(tx + minSize * 2, ty),
-        pointFrom14(tx, ty),
+      [ox, oy] = pointRotateRads9(
+        pointFrom13(tx + minSize * 2, ty),
+        pointFrom13(tx, ty),
         Math.atan2(py - ty, px - tx)
       );
     } else {
       const [px, py] = element.points.length > 1 ? element.points[element.points.length - 2] : [0, 0];
-      [ox, oy] = pointRotateRads10(
-        pointFrom14(tx - minSize * 2, ty),
-        pointFrom14(tx, ty),
+      [ox, oy] = pointRotateRads9(
+        pointFrom13(tx - minSize * 2, ty),
+        pointFrom13(tx, ty),
         Math.atan2(ty - py, tx - px)
       );
     }
@@ -13326,10 +13325,10 @@ var getArrowheadPoints = (element, shape, position, arrowhead, offsetMultiplier
 
 // ../element/src/cropElement.ts
 import {
-  pointFrom as pointFrom15,
+  pointFrom as pointFrom14,
   pointCenter as pointCenter2,
-  pointRotateRads as pointRotateRads11,
-  vectorFromPoint as vectorFromPoint9,
+  pointRotateRads as pointRotateRads10,
+  vectorFromPoint as vectorFromPoint8,
   vectorNormalize as vectorNormalize4,
   vectorSubtract,
   vectorAdd as vectorAdd2,
@@ -13434,7 +13433,7 @@ var generateRoughOptions = (element, continuousPath = false, isDarkMode = false)
     fillWeight: element.strokeWidth / 2,
     hachureGap: element.strokeWidth * 4,
     roughness: adjustRoughness(element),
-    stroke: isDarkMode ? applyDarkModeFilter2(element.strokeColor) : element.strokeColor,
+    stroke: applyDarkModeFilter2(element.strokeColor, isDarkMode),
     preserveVertices: continuousPath || element.roughness < ROUGHNESS.cartoonist
   };
   switch (element.type) {
@@ -13444,7 +13443,7 @@ var generateRoughOptions = (element, continuousPath = false, isDarkMode = false)
     case "diamond":
     case "ellipse": {
       options.fillStyle = element.fillStyle;
-      options.fill = isTransparent4(element.backgroundColor) ? void 0 : isDarkMode ? applyDarkModeFilter2(element.backgroundColor) : element.backgroundColor;
+      options.fill = isTransparent4(element.backgroundColor) ? void 0 : applyDarkModeFilter2(element.backgroundColor, isDarkMode);
       if (element.type === "ellipse") {
         options.curveFitting = 1;
       }
@@ -13454,7 +13453,7 @@ var generateRoughOptions = (element, continuousPath = false, isDarkMode = false)
     case "freedraw": {
       if (isPathALoop2(element.points)) {
         options.fillStyle = element.fillStyle;
-        options.fill = element.backgroundColor === "transparent" ? void 0 : isDarkMode ? applyDarkModeFilter2(element.backgroundColor) : element.backgroundColor;
+        options.fill = element.backgroundColor === "transparent" ? void 0 : applyDarkModeFilter2(element.backgroundColor, isDarkMode);
       }
       return options;
     }
@@ -13529,8 +13528,11 @@ var getArrowheadShapes = (element, shape, position, arrowhead, generator, option
   if (arrowhead === null) {
     return [];
   }
-  const strokeColor = isDarkMode ? applyDarkModeFilter2(element.strokeColor) : element.strokeColor;
-  const backgroundFillColor = isDarkMode ? applyDarkModeFilter2(canvasBackgroundColor) : canvasBackgroundColor;
+  const strokeColor = applyDarkModeFilter2(element.strokeColor, isDarkMode);
+  const backgroundFillColor = applyDarkModeFilter2(
+    canvasBackgroundColor,
+    isDarkMode
+  );
   const cardinalityOneOrManyOffset = -0.25;
   const cardinalityZeroCircleScale = 0.8;
   switch (arrowhead) {
@@ -13796,7 +13798,7 @@ var _generateElementShape = (element, generator, {
     case "arrow": {
       let shape;
       const options = generateRoughOptions(element, false, isDarkMode);
-      const points = element.points.length ? element.points : [pointFrom17(0, 0)];
+      const points = element.points.length ? element.points : [pointFrom16(0, 0)];
       if (isElbowArrow4(element)) {
         if (!points.every(
           (point) => Math.abs(point[0]) <= 1e6 && Math.abs(point[1]) <= 1e6
@@ -14805,7 +14807,7 @@ var createRedoAction = (history) => ({
 
 // actions/actionTextAutoResize.ts
 import { getFontString as getFontString5 } from "@excalidraw/common";
-import { isExcalidrawElement as isExcalidrawElement2, newElementWith as newElementWith9 } from "@excalidraw/element";
+import { isExcalidrawElement as isExcalidrawElement3, newElementWith as newElementWith9 } from "@excalidraw/element";
 import { measureText as measureText3 } from "@excalidraw/element";
 import { isTextElement as isTextElement7 } from "@excalidraw/element";
 import { CaptureUpdateAction as CaptureUpdateAction37 } from "@excalidraw/element";
@@ -14820,7 +14822,7 @@ var actionTextAutoResize = register({
   },
   perform: (elements, appState, targetElement) => {
     const selectedElements = getSelectedElements(elements, appState);
-    const targetTextElement = isExcalidrawElement2(targetElement) && isTextElement7(targetElement) ? targetElement : selectedElements[0];
+    const targetTextElement = isExcalidrawElement3(targetElement) && isTextElement7(targetElement) ? targetElement : selectedElements[0];
     return {
       appState,
       elements: elements.map((element) => {
@@ -14859,6 +14861,9 @@ var actionToggleViewMode = register({
     predicate: (appState) => !appState.viewModeEnabled
   },
   perform(elements, appState) {
+    if (appState.viewModeOnly) {
+      return false;
+    }
     return {
       appState: {
         ...appState,
@@ -14869,23 +14874,28 @@ var actionToggleViewMode = register({
   },
   checked: (appState) => appState.viewModeEnabled,
   predicate: (elements, appState, appProps) => {
-    return typeof appProps.viewModeEnabled === "undefined";
+    return !appState.viewModeOnly && !appProps.viewModeOnly && typeof appProps.viewModeEnabled === "undefined";
   },
   keyTest: (event) => !event[KEYS33.CTRL_OR_CMD] && event.altKey && event.code === CODES9.R,
-  PanelComponent: ({ data, updateData, appState }) => /* @__PURE__ */ jsx55(
-    ToolButton,
-    {
-      type: "button",
-      icon: eyeIcon,
-      "aria-label": t("labels.viewMode"),
-      onClick: () => updateData(null),
-      size: data?.size || "medium",
-      "data-testid": "button-view-mode",
-      className: clsx21({
-        enabled: appState.viewModeEnabled
-      })
+  PanelComponent: ({ data, updateData, appState, appProps }) => {
+    if (appState.viewModeOnly || appProps.viewModeOnly) {
+      return null;
     }
-  )
+    return /* @__PURE__ */ jsx55(
+      ToolButton,
+      {
+        type: "button",
+        icon: eyeIcon,
+        "aria-label": t("labels.viewMode"),
+        onClick: () => updateData(null),
+        size: data?.size || "medium",
+        "data-testid": "button-view-mode",
+        className: clsx21({
+          enabled: appState.viewModeEnabled
+        })
+      }
+    );
+  }
 });
 
 // actions/manager.tsx
@@ -15027,8 +15037,8 @@ var sum = (array, mapper) => array.reduce((acc, item) => acc + mapper(item), 0);
 
 // snapping.ts
 import {
-  pointFrom as pointFrom18,
-  pointRotateRads as pointRotateRads14,
+  pointFrom as pointFrom17,
+  pointRotateRads as pointRotateRads13,
   rangeInclusive,
   rangeIntersection,
   rangesOverlap
@@ -15115,50 +15125,50 @@ var getElementsCorners = (elements, elementsMap, {
     const halfWidth = (x2 - x1) / 2;
     const halfHeight = (y2 - y1) / 2;
     if ((element.type === "diamond" || element.type === "ellipse") && !boundingBoxCorners) {
-      const leftMid = pointRotateRads14(
-        pointFrom18(x1, y1 + halfHeight),
-        pointFrom18(cx, cy),
+      const leftMid = pointRotateRads13(
+        pointFrom17(x1, y1 + halfHeight),
+        pointFrom17(cx, cy),
         element.angle
       );
-      const topMid = pointRotateRads14(
-        pointFrom18(x1 + halfWidth, y1),
-        pointFrom18(cx, cy),
+      const topMid = pointRotateRads13(
+        pointFrom17(x1 + halfWidth, y1),
+        pointFrom17(cx, cy),
         element.angle
       );
-      const rightMid = pointRotateRads14(
-        pointFrom18(x2, y1 + halfHeight),
-        pointFrom18(cx, cy),
+      const rightMid = pointRotateRads13(
+        pointFrom17(x2, y1 + halfHeight),
+        pointFrom17(cx, cy),
         element.angle
       );
-      const bottomMid = pointRotateRads14(
-        pointFrom18(x1 + halfWidth, y2),
-        pointFrom18(cx, cy),
+      const bottomMid = pointRotateRads13(
+        pointFrom17(x1 + halfWidth, y2),
+        pointFrom17(cx, cy),
         element.angle
       );
-      const center = pointFrom18(cx, cy);
+      const center = pointFrom17(cx, cy);
       result = omitCenter ? [leftMid, topMid, rightMid, bottomMid] : [leftMid, topMid, rightMid, bottomMid, center];
     } else {
-      const topLeft = pointRotateRads14(
-        pointFrom18(x1, y1),
-        pointFrom18(cx, cy),
+      const topLeft = pointRotateRads13(
+        pointFrom17(x1, y1),
+        pointFrom17(cx, cy),
         element.angle
       );
-      const topRight = pointRotateRads14(
-        pointFrom18(x2, y1),
-        pointFrom18(cx, cy),
+      const topRight = pointRotateRads13(
+        pointFrom17(x2, y1),
+        pointFrom17(cx, cy),
         element.angle
       );
-      const bottomLeft = pointRotateRads14(
-        pointFrom18(x1, y2),
-        pointFrom18(cx, cy),
+      const bottomLeft = pointRotateRads13(
+        pointFrom17(x1, y2),
+        pointFrom17(cx, cy),
         element.angle
       );
-      const bottomRight = pointRotateRads14(
-        pointFrom18(x2, y2),
-        pointFrom18(cx, cy),
+      const bottomRight = pointRotateRads13(
+        pointFrom17(x2, y2),
+        pointFrom17(cx, cy),
         element.angle
       );
-      const center = pointFrom18(cx, cy);
+      const center = pointFrom17(cx, cy);
       result = omitCenter ? [topLeft, topRight, bottomLeft, bottomRight] : [topLeft, topRight, bottomLeft, bottomRight, center];
     }
   } else if (elements.length > 1) {
@@ -15168,14 +15178,14 @@ var getElementsCorners = (elements, elementsMap, {
     );
     const width = maxX - minX;
     const height = maxY - minY;
-    const topLeft = pointFrom18(minX, minY);
-    const topRight = pointFrom18(maxX, minY);
-    const bottomLeft = pointFrom18(minX, maxY);
-    const bottomRight = pointFrom18(maxX, maxY);
-    const center = pointFrom18(minX + width / 2, minY + height / 2);
+    const topLeft = pointFrom17(minX, minY);
+    const topRight = pointFrom17(maxX, minY);
+    const bottomLeft = pointFrom17(minX, maxY);
+    const bottomRight = pointFrom17(maxX, maxY);
+    const center = pointFrom17(minX + width / 2, minY + height / 2);
     result = omitCenter ? [topLeft, topRight, bottomLeft, bottomRight] : [topLeft, topRight, bottomLeft, bottomRight, center];
   }
-  return result.map((p) => pointFrom18(round(p[0]), round(p[1])));
+  return result.map((p) => pointFrom17(round(p[0]), round(p[1])));
 };
 var getReferenceElements = (elements, selectedElements, appState, elementsMap) => getVisibleAndNonSelectedElements(
   elements,
@@ -15218,10 +15228,10 @@ var getVisibleGaps = (elements, selectedElements, appState, elementsMap) => {
             startBounds,
             endBounds,
             startSide: [
-              pointFrom18(startMaxX, startMinY),
-              pointFrom18(startMaxX, startMaxY)
+              pointFrom17(startMaxX, startMinY),
+              pointFrom17(startMaxX, startMaxY)
             ],
-            endSide: [pointFrom18(endMinX, endMinY), pointFrom18(endMinX, endMaxY)],
+            endSide: [pointFrom17(endMinX, endMinY), pointFrom17(endMinX, endMaxY)],
             length: endMinX - startMaxX,
             overlap: rangeIntersection(
               rangeInclusive(startMinY, startMaxY),
@@ -15252,10 +15262,10 @@ var getVisibleGaps = (elements, selectedElements, appState, elementsMap) => {
             startBounds,
             endBounds,
             startSide: [
-              pointFrom18(startMinX, startMaxY),
-              pointFrom18(startMaxX, startMaxY)
+              pointFrom17(startMinX, startMaxY),
+              pointFrom17(startMaxX, startMaxY)
             ],
-            endSide: [pointFrom18(endMinX, endMinY), pointFrom18(endMaxX, endMinY)],
+            endSide: [pointFrom17(endMinX, endMinY), pointFrom17(endMaxX, endMinY)],
             length: endMinY - startMaxY,
             overlap: rangeIntersection(
               rangeInclusive(startMinX, startMaxX),
@@ -15560,7 +15570,7 @@ var createPointSnapLines = (nearestSnapsX, nearestSnapsY) => {
         }
         snapsX[key].push(
           ...snap.points.map(
-            (p) => pointFrom18(round(p[0]), round(p[1]))
+            (p) => pointFrom17(round(p[0]), round(p[1]))
           )
         );
       }
@@ -15575,7 +15585,7 @@ var createPointSnapLines = (nearestSnapsX, nearestSnapsY) => {
         }
         snapsY[key].push(
           ...snap.points.map(
-            (p) => pointFrom18(round(p[0]), round(p[1]))
+            (p) => pointFrom17(round(p[0]), round(p[1]))
           )
         );
       }
@@ -15586,7 +15596,7 @@ var createPointSnapLines = (nearestSnapsX, nearestSnapsY) => {
       type: "points",
       points: dedupePoints(
         points.map((p) => {
-          return pointFrom18(Number(key), p[1]);
+          return pointFrom17(Number(key), p[1]);
         }).sort((a, b) => a[1] - b[1])
       )
     };
@@ -15596,7 +15606,7 @@ var createPointSnapLines = (nearestSnapsX, nearestSnapsY) => {
         type: "points",
         points: dedupePoints(
           points.map((p) => {
-            return pointFrom18(p[0], Number(key));
+            return pointFrom17(p[0], Number(key));
           }).sort((a, b) => a[0] - b[0])
         )
       };
@@ -15639,16 +15649,16 @@ var createGapSnapLines = (selectedElements, dragOffset, gapSnaps) => {
               type: "gap",
               direction: "horizontal",
               points: [
-                pointFrom18(gapSnap.gap.startSide[0][0], gapLineY),
-                pointFrom18(minX, gapLineY)
+                pointFrom17(gapSnap.gap.startSide[0][0], gapLineY),
+                pointFrom17(minX, gapLineY)
               ]
             },
             {
               type: "gap",
               direction: "horizontal",
               points: [
-                pointFrom18(maxX, gapLineY),
-                pointFrom18(gapSnap.gap.endSide[0][0], gapLineY)
+                pointFrom17(maxX, gapLineY),
+                pointFrom17(gapSnap.gap.endSide[0][0], gapLineY)
               ]
             }
           );
@@ -15663,16 +15673,16 @@ var createGapSnapLines = (selectedElements, dragOffset, gapSnaps) => {
               type: "gap",
               direction: "vertical",
               points: [
-                pointFrom18(gapLineX, gapSnap.gap.startSide[0][1]),
-                pointFrom18(gapLineX, minY)
+                pointFrom17(gapLineX, gapSnap.gap.startSide[0][1]),
+                pointFrom17(gapLineX, minY)
               ]
             },
             {
               type: "gap",
               direction: "vertical",
               points: [
-                pointFrom18(gapLineX, maxY),
-                pointFrom18(gapLineX, gapSnap.gap.endSide[0][1])
+                pointFrom17(gapLineX, maxY),
+                pointFrom17(gapLineX, gapSnap.gap.endSide[0][1])
               ]
             }
           );
@@ -15687,14 +15697,14 @@ var createGapSnapLines = (selectedElements, dragOffset, gapSnaps) => {
               type: "gap",
               direction: "horizontal",
               points: [
-                pointFrom18(startMaxX, gapLineY),
-                pointFrom18(endMinX, gapLineY)
+                pointFrom17(startMaxX, gapLineY),
+                pointFrom17(endMinX, gapLineY)
               ]
             },
             {
               type: "gap",
               direction: "horizontal",
-              points: [pointFrom18(endMaxX, gapLineY), pointFrom18(minX, gapLineY)]
+              points: [pointFrom17(endMaxX, gapLineY), pointFrom17(minX, gapLineY)]
             }
           );
         }
@@ -15708,16 +15718,16 @@ var createGapSnapLines = (selectedElements, dragOffset, gapSnaps) => {
               type: "gap",
               direction: "horizontal",
               points: [
-                pointFrom18(maxX, gapLineY),
-                pointFrom18(startMinX, gapLineY)
+                pointFrom17(maxX, gapLineY),
+                pointFrom17(startMinX, gapLineY)
               ]
             },
             {
               type: "gap",
               direction: "horizontal",
               points: [
-                pointFrom18(startMaxX, gapLineY),
-                pointFrom18(endMinX, gapLineY)
+                pointFrom17(startMaxX, gapLineY),
+                pointFrom17(endMinX, gapLineY)
               ]
             }
           );
@@ -15732,16 +15742,16 @@ var createGapSnapLines = (selectedElements, dragOffset, gapSnaps) => {
               type: "gap",
               direction: "vertical",
               points: [
-                pointFrom18(gapLineX, maxY),
-                pointFrom18(gapLineX, startMinY)
+                pointFrom17(gapLineX, maxY),
+                pointFrom17(gapLineX, startMinY)
               ]
             },
             {
               type: "gap",
               direction: "vertical",
               points: [
-                pointFrom18(gapLineX, startMaxY),
-                pointFrom18(gapLineX, endMinY)
+                pointFrom17(gapLineX, startMaxY),
+                pointFrom17(gapLineX, endMinY)
               ]
             }
           );
@@ -15756,14 +15766,14 @@ var createGapSnapLines = (selectedElements, dragOffset, gapSnaps) => {
               type: "gap",
               direction: "vertical",
               points: [
-                pointFrom18(gapLineX, startMaxY),
-                pointFrom18(gapLineX, endMinY)
+                pointFrom17(gapLineX, startMaxY),
+                pointFrom17(gapLineX, endMinY)
               ]
             },
             {
               type: "gap",
               direction: "vertical",
-              points: [pointFrom18(gapLineX, endMaxY), pointFrom18(gapLineX, minY)]
+              points: [pointFrom17(gapLineX, endMaxY), pointFrom17(gapLineX, minY)]
             }
           );
         }
@@ -15776,7 +15786,7 @@ var createGapSnapLines = (selectedElements, dragOffset, gapSnaps) => {
       return {
         ...gapSnapLine,
         points: gapSnapLine.points.map(
-          (p) => pointFrom18(round(p[0]), round(p[1]))
+          (p) => pointFrom17(round(p[0]), round(p[1]))
         )
       };
     })
@@ -15806,35 +15816,35 @@ var snapResizingElements = (selectedElements, selectedOriginalElements, app, eve
   if (transformHandle) {
     switch (transformHandle) {
       case "e": {
-        selectionSnapPoints.push(pointFrom18(maxX, minY), pointFrom18(maxX, maxY));
+        selectionSnapPoints.push(pointFrom17(maxX, minY), pointFrom17(maxX, maxY));
         break;
       }
       case "w": {
-        selectionSnapPoints.push(pointFrom18(minX, minY), pointFrom18(minX, maxY));
+        selectionSnapPoints.push(pointFrom17(minX, minY), pointFrom17(minX, maxY));
         break;
       }
       case "n": {
-        selectionSnapPoints.push(pointFrom18(minX, minY), pointFrom18(maxX, minY));
+        selectionSnapPoints.push(pointFrom17(minX, minY), pointFrom17(maxX, minY));
         break;
       }
       case "s": {
-        selectionSnapPoints.push(pointFrom18(minX, maxY), pointFrom18(maxX, maxY));
+        selectionSnapPoints.push(pointFrom17(minX, maxY), pointFrom17(maxX, maxY));
         break;
       }
       case "ne": {
-        selectionSnapPoints.push(pointFrom18(maxX, minY));
+        selectionSnapPoints.push(pointFrom17(maxX, minY));
         break;
       }
       case "nw": {
-        selectionSnapPoints.push(pointFrom18(minX, minY));
+        selectionSnapPoints.push(pointFrom17(minX, minY));
         break;
       }
       case "se": {
-        selectionSnapPoints.push(pointFrom18(maxX, maxY));
+        selectionSnapPoints.push(pointFrom17(maxX, maxY));
         break;
       }
       case "sw": {
-        selectionSnapPoints.push(pointFrom18(minX, maxY));
+        selectionSnapPoints.push(pointFrom17(minX, maxY));
         break;
       }
     }
@@ -15867,10 +15877,10 @@ var snapResizingElements = (selectedElements, selectedOriginalElements, app, eve
     (bound) => round(bound)
   );
   const corners = [
-    pointFrom18(x1, y1),
-    pointFrom18(x1, y2),
-    pointFrom18(x2, y1),
-    pointFrom18(x2, y2)
+    pointFrom17(x1, y1),
+    pointFrom17(x1, y2),
+    pointFrom17(x2, y1),
+    pointFrom17(x2, y2)
   ];
   getPointSnaps(
     selectedElements,
@@ -15895,7 +15905,7 @@ var snapNewElement = (newElement7, app, event, origin, dragOffset, elementsMap)
     };
   }
   const selectionSnapPoints = [
-    pointFrom18(origin.x + dragOffset.x, origin.y + dragOffset.y)
+    pointFrom17(origin.x + dragOffset.x, origin.y + dragOffset.y)
   ];
   const snapDistance = getSnapDistance(app.state.zoom.value);
   const minOffset = {
@@ -15970,7 +15980,7 @@ var getSnapLinesAtPointer = (elements, app, pointer, event, elementsMap) => {
         }
         verticalSnapLines.push({
           type: "pointer",
-          points: [corner, pointFrom18(corner[0], pointer.y)],
+          points: [corner, pointFrom17(corner[0], pointer.y)],
           direction: "vertical"
         });
         minOffset.x = offsetX;
@@ -15982,7 +15992,7 @@ var getSnapLinesAtPointer = (elements, app, pointer, event, elementsMap) => {
         }
         horizontalSnapLines.push({
           type: "pointer",
-          points: [corner, pointFrom18(pointer.x, corner[1])],
+          points: [corner, pointFrom17(pointer.x, corner[1])],
           direction: "horizontal"
         });
         minOffset.y = offsetY;
@@ -16587,8 +16597,8 @@ var LaserTrails = class {
 // textAutoResizeHandle.ts
 import { DEFAULT_TRANSFORM_HANDLE_SPACING } from "@excalidraw/common";
 import {
-  pointFrom as pointFrom19,
-  pointRotateRads as pointRotateRads15
+  pointFrom as pointFrom18,
+  pointRotateRads as pointRotateRads14
 } from "@excalidraw/math";
 var TEXT_AUTO_RESIZE_HANDLE_GAP = 12;
 var TEXT_AUTO_RESIZE_HANDLE_LENGTH = 16;
@@ -16603,24 +16613,24 @@ var getTextAutoResizeHandle = (textElement, zoomValue, formFactor) => {
   const padding = getTextBoxPadding(zoomValue);
   const gap = TEXT_AUTO_RESIZE_HANDLE_GAP / zoomValue;
   const length = TEXT_AUTO_RESIZE_HANDLE_LENGTH / zoomValue;
-  const center = pointFrom19(
+  const center = pointFrom18(
     textElement.x + textElement.width / 2,
     textElement.y + textElement.height / 2
   );
-  const handleCenter = pointRotateRads15(
-    pointFrom19(center[0] + textElement.width / 2 + padding + gap, center[1]),
+  const handleCenter = pointRotateRads14(
+    pointFrom18(center[0] + textElement.width / 2 + padding + gap, center[1]),
     center,
     textElement.angle
   );
   return {
     center: handleCenter,
-    start: pointRotateRads15(
-      pointFrom19(handleCenter[0], handleCenter[1] - length / 2),
+    start: pointRotateRads14(
+      pointFrom18(handleCenter[0], handleCenter[1] - length / 2),
       handleCenter,
       textElement.angle
     ),
-    end: pointRotateRads15(
-      pointFrom19(handleCenter[0], handleCenter[1] + length / 2),
+    end: pointRotateRads14(
+      pointFrom18(handleCenter[0], handleCenter[1] + length / 2),
       handleCenter,
       textElement.angle
     ),
@@ -16633,8 +16643,8 @@ var isPointHittingTextAutoResizeHandle = (point, textElement, zoomValue, formFac
   if (!handle) {
     return false;
   }
-  const unrotatedPoint = pointRotateRads15(
-    pointFrom19(point.x, point.y),
+  const unrotatedPoint = pointRotateRads14(
+    pointFrom18(point.x, point.y),
     handle.center,
     -textElement.angle
   );
@@ -16656,7 +16666,7 @@ import {
   applyDarkModeFilter as applyDarkModeFilter3,
   isRTL as isRTL2
 } from "@excalidraw/common";
-import { pointFrom as pointFrom20, pointRotateRads as pointRotateRads16 } from "@excalidraw/math";
+import { pointFrom as pointFrom19, pointRotateRads as pointRotateRads15 } from "@excalidraw/math";
 import {
   getTextFromElements as getTextFromElements2,
   originalContainerCache,
@@ -16915,7 +16925,10 @@ var textWysiwyg = ({
         ),
         textAlign,
         verticalAlign,
-        color: appState.theme === THEME11.DARK ? applyDarkModeFilter3(updatedTextElement.strokeColor) : updatedTextElement.strokeColor,
+        color: applyDarkModeFilter3(
+          updatedTextElement.strokeColor,
+          appState.theme === THEME11.DARK
+        ),
         opacity: updatedTextElement.opacity / 100,
         maxHeight: `${editorMaxHeight}px`
       });
@@ -16978,12 +16991,12 @@ var textWysiwyg = ({
       return null;
     }
     const layout = currentTextLayout;
-    const center = pointFrom20(
+    const center = pointFrom19(
       layout.x + layout.width / 2,
       layout.y + layout.height / 2
     );
-    const [unrotatedX, unrotatedY] = pointRotateRads16(
-      pointFrom20(initialCaretSceneCoords.x, initialCaretSceneCoords.y),
+    const [unrotatedX, unrotatedY] = pointRotateRads15(
+      pointFrom19(initialCaretSceneCoords.x, initialCaretSceneCoords.y),
       center,
       -layout.angle
     );
@@ -17430,7 +17443,7 @@ var isOverScrollBars = (scrollBars, x, y) => {
 
 // lasso/index.ts
 import {
-  pointFrom as pointFrom21
+  pointFrom as pointFrom20
 } from "@excalidraw/math";
 import { getElementLineSegments as getElementLineSegments2 } from "@excalidraw/element";
 import { LinearElementEditor as LinearElementEditor8 } from "@excalidraw/element/linearElementEditor";
@@ -17448,7 +17461,7 @@ import { arrayToMap as arrayToMap25, easeOut as easeOut2, isShallowEqual as isSh
 import { simplify as simplify2 } from "points-on-curve";
 import {
   polygonFromPoints as polygonFromPoints2,
-  lineSegment as lineSegment8,
+  lineSegment as lineSegment7,
   polygonIncludesPointNonZero
 } from "@excalidraw/math";
 import {
@@ -17518,7 +17531,7 @@ var enclosureTest = (lassoPath, element, elementsSegments) => {
   });
 };
 var intersectionTest = (lassoPath, element, elementsMap) => {
-  const lassoSegments = lassoPath.slice(1).map((point, index) => lineSegment8(lassoPath[index], point)).concat([lineSegment8(lassoPath[lassoPath.length - 1], lassoPath[0])]);
+  const lassoSegments = lassoPath.slice(1).map((point, index) => lineSegment7(lassoPath[index], point)).concat([lineSegment7(lassoPath[lassoPath.length - 1], lassoPath[0])]);
   const boundTextElement = getBoundTextElement6(element, elementsMap);
   return lassoSegments.some(
     (lassoSegment) => intersectElementWithLineSegment2(
@@ -17629,7 +17642,7 @@ var LassoTrail = class extends AnimatedTrail {
       this.updateSelection();
     });
     __publicField(this, "updateSelection", () => {
-      const lassoPath = super.getCurrentTrail()?.originalPoints?.map((p) => pointFrom21(p[0], p[1]));
+      const lassoPath = super.getCurrentTrail()?.originalPoints?.map((p) => pointFrom20(p[0], p[1]));
       const currentCanvasTranslate = {
         scrollX: this.app.state.scrollX,
         scrollY: this.app.state.scrollY,
@@ -17738,9 +17751,9 @@ import {
   isPointInElement as isPointInElement2
 } from "@excalidraw/element";
 import {
-  lineSegment as lineSegment9,
+  lineSegment as lineSegment8,
   lineSegmentsDistance,
-  pointFrom as pointFrom22,
+  pointFrom as pointFrom21,
   polygon as polygon2,
   polygonIncludesPointNonZero as polygonIncludesPointNonZero2
 } from "@excalidraw/math";
@@ -17780,11 +17793,11 @@ var EraserTrail = class extends AnimatedTrail {
     return elementsToEraser;
   }
   updateElementsToBeErased(restoreToErase) {
-    const eraserPath = super.getCurrentTrail()?.originalPoints?.map((p) => pointFrom22(p[0], p[1])) || [];
+    const eraserPath = super.getCurrentTrail()?.originalPoints?.map((p) => pointFrom21(p[0], p[1])) || [];
     if (eraserPath.length < 2) {
       return [];
     }
-    const pathSegment = lineSegment9(
+    const pathSegment = lineSegment8(
       eraserPath[eraserPath.length - 1],
       eraserPath[eraserPath.length - 2]
     );
@@ -17901,7 +17914,7 @@ var eraserTest = (pathSegment, element, elementsMap, zoom) => {
     }
     const poly = polygon2(
       ...outlinePoints.map(
-        ([x, y]) => pointFrom22(element.x + x, element.y + y)
+        ([x, y]) => pointFrom21(element.x + x, element.y + y)
       )
     );
     if (polygonIncludesPointNonZero2(pathSegment[0], poly)) {
@@ -17988,7 +18001,7 @@ var commonProps = {
 };
 
 // charts/charts.helpers.ts
-import { pointFrom as pointFrom23 } from "@excalidraw/math";
+import { pointFrom as pointFrom22 } from "@excalidraw/math";
 import {
   COLOR_PALETTE as COLOR_PALETTE5,
   DEFAULT_CHART_COLOR_INDEX,
@@ -18478,7 +18491,7 @@ var chartLines = (spreadsheet, x, y, backgroundColor, layout) => {
     x,
     y,
     width: chartWidth,
-    points: [pointFrom23(0, 0), pointFrom23(chartWidth, 0)]
+    points: [pointFrom22(0, 0), pointFrom22(chartWidth, 0)]
   });
   const yLine = newLinearElement({
     backgroundColor,
@@ -18487,7 +18500,7 @@ var chartLines = (spreadsheet, x, y, backgroundColor, layout) => {
     x,
     y,
     height: chartHeight,
-    points: [pointFrom23(0, 0), pointFrom23(0, -chartHeight)]
+    points: [pointFrom22(0, 0), pointFrom22(0, -chartHeight)]
   });
   const maxLine = newLinearElement({
     backgroundColor,
@@ -18498,7 +18511,7 @@ var chartLines = (spreadsheet, x, y, backgroundColor, layout) => {
     strokeStyle: "dotted",
     width: chartWidth,
     opacity: GRID_OPACITY,
-    points: [pointFrom23(0, 0), pointFrom23(chartWidth, 0)]
+    points: [pointFrom22(0, 0), pointFrom22(chartWidth, 0)]
   });
   return [xLine, yLine, maxLine];
 };
@@ -18601,7 +18614,7 @@ var renderBarChart = (spreadsheet, x, y, colorSeed) => {
 };
 
 // charts/charts.line.ts
-import { pointFrom as pointFrom24 } from "@excalidraw/math";
+import { pointFrom as pointFrom23 } from "@excalidraw/math";
 import { isDevEnv as isDevEnv7 } from "@excalidraw/common";
 import { newElement as newElement4, newLinearElement as newLinearElement2 } from "@excalidraw/element";
 var renderLineChart = (spreadsheet, x, y, colorSeed) => {
@@ -18613,7 +18626,7 @@ var renderLineChart = (spreadsheet, x, y, colorSeed) => {
   const seriesColors = getSeriesColors(series.length, colorOffset);
   const lines = series.map((seriesData, seriesIndex) => {
     const points = seriesData.values.map(
-      (value, valueIndex) => pointFrom24(
+      (value, valueIndex) => pointFrom23(
         valueIndex * (layout.slotWidth + layout.gap),
         -(value / max) * layout.chartHeight
       )
@@ -18671,7 +18684,7 @@ var renderLineChart = (spreadsheet, x, y, colorSeed) => {
       height: cy,
       strokeStyle: "dotted",
       opacity: GRID_OPACITY,
-      points: [pointFrom24(0, 0), pointFrom24(0, cy)]
+      points: [pointFrom23(0, 0), pointFrom23(0, cy)]
     });
   });
   const baseElements = chartBaseElements(
@@ -18820,7 +18833,7 @@ var tryParseSpreadsheet = (text) => {
 };
 
 // charts/charts.radar.ts
-import { pointFrom as pointFrom25 } from "@excalidraw/math";
+import { pointFrom as pointFrom24 } from "@excalidraw/math";
 import {
   FONT_FAMILY as FONT_FAMILY5,
   FONT_SIZES as FONT_SIZES3,
@@ -18887,12 +18900,12 @@ var renderRadarChart = (spreadsheet, x, y, colorSeed) => {
     const levelRatio = (levelIndex + 1) / RADAR_GRID_LEVELS;
     const levelRadius = radius * levelRatio;
     const points = angles.map(
-      (angle) => pointFrom25(
+      (angle) => pointFrom24(
         Math.cos(angle) * levelRadius,
         Math.sin(angle) * levelRadius
       )
     );
-    points.push(pointFrom25(points[0][0], points[0][1]));
+    points.push(pointFrom24(points[0][0], points[0][1]));
     return newLinearElement3({
       backgroundColor: "transparent",
       ...commonProps,
@@ -18922,19 +18935,19 @@ var renderRadarChart = (spreadsheet, x, y, colorSeed) => {
       strokeStyle: "solid",
       roughness: ROUGHNESS3.architect,
       opacity: GRID_OPACITY,
-      points: [pointFrom25(0, 0), pointFrom25(px, py)]
+      points: [pointFrom24(0, 0), pointFrom24(px, py)]
     });
   });
   const seriesPolygons = series.map((seriesData, index) => {
     const points = angles.map((angle, axisIndex) => {
       const value = seriesData.values[axisIndex] ?? 0;
       const pointRadius = normalize(value, axisIndex) * radius;
-      return pointFrom25(
+      return pointFrom24(
         Math.cos(angle) * pointRadius,
         Math.sin(angle) * pointRadius
       );
     });
-    points.push(pointFrom25(points[0][0], points[0][1]));
+    points.push(pointFrom24(points[0][0], points[0][1]));
     return newLinearElement3({
       backgroundColor: "transparent",
       ...commonProps,
@@ -18986,7 +18999,7 @@ import {
   mutateElement as mutateElement4,
   updateElbowArrowPoints as updateElbowArrowPoints3
 } from "@excalidraw/element";
-import { pointFrom as pointFrom26, pointRotateRads as pointRotateRads17 } from "@excalidraw/math";
+import { pointFrom as pointFrom25, pointRotateRads as pointRotateRads16 } from "@excalidraw/math";
 import {
   hasBoundTextElement as hasBoundTextElement5,
   isArrowBoundToElement,
@@ -19106,14 +19119,14 @@ var Panel = ({
         elements2[0],
         app.scene.getNonDeletedElementsMap()
       );
-      bottomLeft = pointRotateRads17(
-        pointFrom26(x1, y2),
-        pointFrom26(cx, cy),
+      bottomLeft = pointRotateRads16(
+        pointFrom25(x1, y2),
+        pointFrom25(cx, cy),
         elements2[0].angle
       );
     } else {
       const { minX, maxY } = getCommonBoundingBox2(elements2);
-      bottomLeft = pointFrom26(minX, maxY);
+      bottomLeft = pointFrom25(minX, maxY);
     }
     const { x, y } = sceneCoordsToViewportCoords4(
       { sceneX: bottomLeft[0], sceneY: bottomLeft[1] },
@@ -19432,7 +19445,7 @@ var convertLineToElbow = (line) => {
     if (isVert(start2, end) || isHorz(start2, end)) {
       ortho.push(end);
     } else {
-      ortho.push(pointFrom26(start2[0], end[1]));
+      ortho.push(pointFrom25(start2[0], end[1]));
       ortho.push(end);
     }
   }
@@ -20042,7 +20055,7 @@ import {
   CLASSES as CLASSES9,
   DEFAULT_SIDEBAR as DEFAULT_SIDEBAR4,
   TOOL_TYPE as TOOL_TYPE2,
-  arrayToMap as arrayToMap28,
+  arrayToMap as arrayToMap27,
   capitalizeString as capitalizeString4,
   isShallowEqual as isShallowEqual5
 } from "@excalidraw/common";
@@ -21921,7 +21934,7 @@ var MobileMenu = ({
         },
         children: [
           /* @__PURE__ */ jsx79("div", { className: "App-bottom-bar-item", children: /* @__PURE__ */ jsx79(Island, { children: /* @__PURE__ */ jsxs38("div", { className: "mobile-toolbar", children: [
-            actionManager.renderAction("viewMode"),
+            !appState.viewModeOnly && actionManager.renderAction("viewMode"),
             actionManager.renderAction("smartZoom")
           ] }) }) }),
           !appState.viewModeEnabled && /* @__PURE__ */ jsxs38("div", { className: "App-bottom-bar-item", children: [
@@ -22630,7 +22643,7 @@ var Footer = ({
               "layer-ui__wrapper__footer-left--transition-left": appState.zenModeEnabled
             }),
             children: /* @__PURE__ */ jsx87(Stack_default.Col, { gap: 2, children: /* @__PURE__ */ jsxs45(Section, { heading: "canvasActions", children: [
-              /* @__PURE__ */ jsx87(Tooltip, { label: t("labels.viewMode"), children: /* @__PURE__ */ jsx87("div", { className: clsx37("view-mode-button"), children: actionManager.renderAction("viewMode") }) }),
+              !appState.viewModeOnly && /* @__PURE__ */ jsx87(Tooltip, { label: t("labels.viewMode"), children: /* @__PURE__ */ jsx87("div", { className: clsx37("view-mode-button"), children: actionManager.renderAction("viewMode") }) }),
               /* @__PURE__ */ jsx87(Tooltip, { label: t("buttons.smartZoom"), children: /* @__PURE__ */ jsx87("div", { className: clsx37("smart-zoom-button"), children: actionManager.renderAction("smartZoom") }) }),
               /* @__PURE__ */ jsx87(
                 ZoomActions,
@@ -23309,6 +23322,7 @@ var ToggleTheme = (props) => {
   const appState = useUIAppState();
   const actionManager = useExcalidrawActionManager();
   const shortcut = getShortcutFromShortcutName("toggleTheme");
+  const appProps = useAppProps();
   if (!actionManager.isActionEnabled(actionToggleTheme)) {
     return null;
   }
@@ -23318,7 +23332,15 @@ var ToggleTheme = (props) => {
       {
         name: "theme",
         value: props.theme,
-        onChange: (value) => props.onSelect(value),
+        onChange: (value) => {
+          if (appProps.onThemeChange) {
+            appProps.onThemeChange(value);
+            return;
+          }
+          console.warn(
+            "MainMenu.DefaultItems.ToggleTheme: `<Excalidraw/> props.onThemeChange` must be defined to use system theme selection."
+          );
+        },
         choices: [
           {
             value: THEME14.LIGHT,
@@ -23345,13 +23367,7 @@ var ToggleTheme = (props) => {
     {
       onSelect: (event) => {
         event.preventDefault();
-        if (props?.onSelect) {
-          props.onSelect(
-            appState.theme === THEME14.DARK ? THEME14.LIGHT : THEME14.DARK
-          );
-        } else {
-          return actionManager.executeAction(actionToggleTheme);
-        }
+        actionManager.executeAction(actionToggleTheme);
       },
       icon: appState.theme === THEME14.DARK ? SunIcon : MoonIcon,
       "data-testid": "toggle-dark-mode",
@@ -23591,6 +23607,9 @@ var PreferencesToggleViewModeItem = () => {
   const { t: t2 } = useI18n();
   const actionManager = useExcalidrawActionManager();
   const appState = useUIAppState();
+  if (appState.viewModeOnly) {
+    return null;
+  }
   return /* @__PURE__ */ jsx99(
     DropdownMenuItemCheckbox_default,
     {
@@ -24722,7 +24741,7 @@ import { deepCopyElement as deepCopyElement3 } from "@excalidraw/element";
 import { CaptureUpdateAction as CaptureUpdateAction40 } from "@excalidraw/element";
 
 // components/Stats/utils.ts
-import { pointFrom as pointFrom27, pointRotateRads as pointRotateRads18 } from "@excalidraw/math";
+import { pointFrom as pointFrom26, pointRotateRads as pointRotateRads17 } from "@excalidraw/math";
 import {
   getBoundTextElement as getBoundTextElement9,
   isBindingElement as isBindingElement3,
@@ -24772,16 +24791,16 @@ var moveElement = (newTopLeftX, newTopLeftY, originalElement, scene, appState, o
     originalElement.x + originalElement.width / 2,
     originalElement.y + originalElement.height / 2
   ];
-  const [topLeftX, topLeftY] = pointRotateRads18(
-    pointFrom27(originalElement.x, originalElement.y),
-    pointFrom27(cx, cy),
+  const [topLeftX, topLeftY] = pointRotateRads17(
+    pointFrom26(originalElement.x, originalElement.y),
+    pointFrom26(cx, cy),
     originalElement.angle
   );
   const changeInX = newTopLeftX - topLeftX;
   const changeInY = newTopLeftY - topLeftY;
-  const [x, y] = pointRotateRads18(
-    pointFrom27(newTopLeftX, newTopLeftY),
-    pointFrom27(cx + changeInX, cy + changeInY),
+  const [x, y] = pointRotateRads17(
+    pointFrom26(newTopLeftX, newTopLeftY),
+    pointFrom26(cx + changeInX, cy + changeInY),
     -originalElement.angle
   );
   scene.mutateElement(
@@ -24822,16 +24841,16 @@ var moveElement = (newTopLeftX, newTopLeftY, originalElement, scene, appState, o
         child.x + child.width / 2,
         child.y + child.height / 2
       ];
-      const [childTopLeftX, childTopLeftY] = pointRotateRads18(
-        pointFrom27(child.x, child.y),
-        pointFrom27(childCX, childCY),
+      const [childTopLeftX, childTopLeftY] = pointRotateRads17(
+        pointFrom26(child.x, child.y),
+        pointFrom26(childCX, childCY),
         child.angle
       );
       const childNewTopLeftX = Math.round(childTopLeftX + changeInX);
       const childNewTopLeftY = Math.round(childTopLeftY + changeInY);
-      const [childX, childY] = pointRotateRads18(
-        pointFrom27(childNewTopLeftX, childNewTopLeftY),
-        pointFrom27(childCX + changeInX, childCY + changeInY),
+      const [childX, childY] = pointRotateRads17(
+        pointFrom26(childNewTopLeftX, childNewTopLeftY),
+        pointFrom26(childCX + changeInX, childCY + changeInY),
         -child.angle
       );
       scene.mutateElement(
@@ -25660,7 +25679,7 @@ var MultiAngle = ({
 var MultiAngle_default = MultiAngle;
 
 // components/Stats/MultiDimension.tsx
-import { pointFrom as pointFrom29 } from "@excalidraw/math";
+import { pointFrom as pointFrom27 } from "@excalidraw/math";
 import { useMemo as useMemo8 } from "react";
 import { MIN_WIDTH_OR_HEIGHT as MIN_WIDTH_OR_HEIGHT2 } from "@excalidraw/common";
 import {
@@ -25674,7 +25693,7 @@ import {
   resizeSingleElement as resizeSingleElement2
 } from "@excalidraw/element";
 import { getBoundTextElement as getBoundTextElement13, handleBindTextResize as handleBindTextResize2 } from "@excalidraw/element";
-import { isTextElement as isTextElement14 } from "@excalidraw/element";
+import { isTextElement as isTextElement13 } from "@excalidraw/element";
 
 // ../utils/src/export.ts
 import { MIME_TYPES as MIME_TYPES6 } from "@excalidraw/common";
@@ -25808,147 +25827,8 @@ var exportToClipboard = async (opts) => {
   }
 };
 
-// ../utils/src/withinBounds.ts
-import { arrayToMap as arrayToMap27 } from "@excalidraw/common";
-import { getElementBounds as getElementBounds4 } from "@excalidraw/element";
-import {
-  isArrowElement as isArrowElement12,
-  isExcalidrawElement as isExcalidrawElement3,
-  isFreeDrawElement as isFreeDrawElement4,
-  isLinearElement as isLinearElement9,
-  isTextElement as isTextElement13
-} from "@excalidraw/element";
-import {
-  rangeIncludesValue,
-  pointFrom as pointFrom28,
-  pointRotateRads as pointRotateRads19,
-  rangeInclusive as rangeInclusive2
-} from "@excalidraw/math";
-var getNonLinearElementRelativePoints = (element) => {
-  if (element.type === "diamond") {
-    return [
-      pointFrom28(element.width / 2, 0),
-      pointFrom28(element.width, element.height / 2),
-      pointFrom28(element.width / 2, element.height),
-      pointFrom28(0, element.height / 2)
-    ];
-  }
-  return [
-    pointFrom28(0, 0),
-    pointFrom28(0 + element.width, 0),
-    pointFrom28(0 + element.width, element.height),
-    pointFrom28(0, element.height)
-  ];
-};
-var getElementRelativePoints = (element) => {
-  if (isLinearElement9(element) || isFreeDrawElement4(element)) {
-    return element.points;
-  }
-  return getNonLinearElementRelativePoints(element);
-};
-var getMinMaxPoints = (points) => {
-  const ret = points.reduce(
-    (limits, [x, y]) => {
-      limits.minY = Math.min(limits.minY, y);
-      limits.minX = Math.min(limits.minX, x);
-      limits.maxX = Math.max(limits.maxX, x);
-      limits.maxY = Math.max(limits.maxY, y);
-      return limits;
-    },
-    {
-      minX: Infinity,
-      minY: Infinity,
-      maxX: -Infinity,
-      maxY: -Infinity,
-      cx: 0,
-      cy: 0
-    }
-  );
-  ret.cx = (ret.maxX + ret.minX) / 2;
-  ret.cy = (ret.maxY + ret.minY) / 2;
-  return ret;
-};
-var getRotatedBBox = (element) => {
-  const points = getElementRelativePoints(element);
-  const { cx, cy } = getMinMaxPoints(points);
-  const centerPoint = pointFrom28(cx, cy);
-  const rotatedPoints = points.map(
-    (p) => pointRotateRads19(p, centerPoint, element.angle)
-  );
-  const { minX, minY, maxX, maxY } = getMinMaxPoints(rotatedPoints);
-  return [
-    minX + element.x,
-    minY + element.y,
-    maxX + element.x,
-    maxY + element.y
-  ];
-};
-var isElementInsideBBox = (element, bbox, eitherDirection = false) => {
-  const elementBBox = getRotatedBBox(element);
-  const elementInsideBbox = bbox[0] <= elementBBox[0] && bbox[2] >= elementBBox[2] && bbox[1] <= elementBBox[1] && bbox[3] >= elementBBox[3];
-  if (!eitherDirection) {
-    return elementInsideBbox;
-  }
-  if (elementInsideBbox) {
-    return true;
-  }
-  return elementBBox[0] <= bbox[0] && elementBBox[2] >= bbox[2] && elementBBox[1] <= bbox[1] && elementBBox[3] >= bbox[3];
-};
-var elementPartiallyOverlapsWithOrContainsBBox = (element, bbox) => {
-  const elementBBox = getRotatedBBox(element);
-  return (rangeIncludesValue(elementBBox[0], rangeInclusive2(bbox[0], bbox[2])) || rangeIncludesValue(
-    bbox[0],
-    rangeInclusive2(elementBBox[0], elementBBox[2])
-  )) && (rangeIncludesValue(elementBBox[1], rangeInclusive2(bbox[1], bbox[3])) || rangeIncludesValue(
-    bbox[1],
-    rangeInclusive2(elementBBox[1], elementBBox[3])
-  ));
-};
-var elementsOverlappingBBox = ({
-  elements,
-  bounds,
-  type,
-  errorMargin = 0
-}) => {
-  if (isExcalidrawElement3(bounds)) {
-    bounds = getElementBounds4(bounds, arrayToMap27(elements));
-  }
-  const adjustedBBox = [
-    bounds[0] - errorMargin,
-    bounds[1] - errorMargin,
-    bounds[2] + errorMargin,
-    bounds[3] + errorMargin
-  ];
-  const includedElementSet = /* @__PURE__ */ new Set();
-  for (const element of elements) {
-    if (includedElementSet.has(element.id)) {
-      continue;
-    }
-    const isOverlaping = type === "overlap" ? elementPartiallyOverlapsWithOrContainsBBox(element, adjustedBBox) : type === "inside" ? isElementInsideBBox(element, adjustedBBox) : isElementInsideBBox(element, adjustedBBox, true);
-    if (isOverlaping) {
-      includedElementSet.add(element.id);
-      if (element.boundElements) {
-        for (const boundElement of element.boundElements) {
-          includedElementSet.add(boundElement.id);
-        }
-      }
-      if (isTextElement13(element) && element.containerId) {
-        includedElementSet.add(element.containerId);
-      }
-      if (isArrowElement12(element)) {
-        if (element.startBinding) {
-          includedElementSet.add(element.startBinding.elementId);
-        }
-        if (element.endBinding) {
-          includedElementSet.add(element.endBinding?.elementId);
-        }
-      }
-    }
-  }
-  return elements.filter((element) => includedElementSet.has(element.id));
-};
-
 // ../utils/src/index.ts
+import { elementsOverlappingBBox as elementsOverlappingBBox2 } from "@excalidraw/element";
 import { getCommonBounds as getCommonBounds6 } from "@excalidraw/element";
 
 // components/Stats/MultiDimension.tsx
@@ -25967,7 +25847,7 @@ var getResizedUpdates = (anchorX, anchorY, scale, origElement) => {
     x,
     y,
     ...rescalePointsInElement(origElement, nextWidth, nextHeight, false),
-    ...isTextElement14(origElement) ? { fontSize: origElement.fontSize * scale } : {}
+    ...isTextElement13(origElement) ? { fontSize: origElement.fontSize * scale } : {}
   };
 };
 var resizeElementInGroup = (anchorX, anchorY, property, scale, latestElement, origElement, originalElementsMap, scene) => {
@@ -25982,7 +25862,7 @@ var resizeElementInGroup = (anchorX, anchorY, property, scale, latestElement, or
     const newFontSize = boundTextElement.fontSize * scale;
     updateBoundElements3(latestElement, scene);
     const latestBoundTextElement = elementsMap.get(boundTextElement.id);
-    if (latestBoundTextElement && isTextElement14(latestBoundTextElement)) {
+    if (latestBoundTextElement && isTextElement13(latestBoundTextElement)) {
       scene.mutateElement(latestBoundTextElement, {
         fontSize: newFontSize
       });
@@ -26058,7 +25938,7 @@ var handleDimensionChange2 = ({
           nextHeight,
           initialHeight,
           aspectRatio,
-          pointFrom29(x1, y1),
+          pointFrom27(x1, y1),
           property,
           latestElements,
           originalElements2,
@@ -26159,7 +26039,7 @@ var handleDimensionChange2 = ({
         nextHeight,
         initialHeight,
         aspectRatio,
-        pointFrom29(x1, y1),
+        pointFrom27(x1, y1),
         property,
         latestElements,
         originalElements2,
@@ -26293,7 +26173,7 @@ import {
   getBoundTextElement as getBoundTextElement14,
   redrawTextBoundingBox as redrawTextBoundingBox7
 } from "@excalidraw/element";
-import { hasBoundTextElement as hasBoundTextElement8, isTextElement as isTextElement15 } from "@excalidraw/element";
+import { hasBoundTextElement as hasBoundTextElement8, isTextElement as isTextElement14 } from "@excalidraw/element";
 import { isInGroup as isInGroup3 } from "@excalidraw/element";
 import { jsx as jsx114 } from "react/jsx-runtime";
 var MIN_FONT_SIZE2 = 4;
@@ -26303,7 +26183,7 @@ var getApplicableTextElements = (elements, elementsMap) => elements.reduce(
     if (!el || isInGroup3(el)) {
       return acc;
     }
-    if (isTextElement15(el)) {
+    if (isTextElement14(el)) {
       acc.push(el);
       return acc;
     }
@@ -26403,9 +26283,9 @@ var MultiFontSize = ({
 var MultiFontSize_default = MultiFontSize;
 
 // components/Stats/MultiPosition.tsx
-import { pointFrom as pointFrom30, pointRotateRads as pointRotateRads20 } from "@excalidraw/math";
+import { pointFrom as pointFrom28, pointRotateRads as pointRotateRads18 } from "@excalidraw/math";
 import { useMemo as useMemo9 } from "react";
-import { isTextElement as isTextElement16 } from "@excalidraw/element";
+import { isTextElement as isTextElement15 } from "@excalidraw/element";
 import { getCommonBounds as getCommonBounds7 } from "@excalidraw/element";
 import { jsx as jsx115 } from "react/jsx-runtime";
 var moveElements = (property, changeInTopX, changeInTopY, originalElements, originalElementsMap, scene, appState) => {
@@ -26415,9 +26295,9 @@ var moveElements = (property, changeInTopX, changeInTopY, originalElements, orig
       origElement.x + origElement.width / 2,
       origElement.y + origElement.height / 2
     ];
-    const [topLeftX, topLeftY] = pointRotateRads20(
-      pointFrom30(origElement.x, origElement.y),
-      pointFrom30(cx, cy),
+    const [topLeftX, topLeftY] = pointRotateRads18(
+      pointFrom28(origElement.x, origElement.y),
+      pointFrom28(cx, cy),
       origElement.angle
     );
     const newTopLeftX = property === "x" ? Math.round(topLeftX + changeInTopX) : topLeftX;
@@ -26444,14 +26324,14 @@ var moveGroupTo = (nextX, nextY, originalElements, originalElementsMap, scene, a
     if (!latestElement) {
       continue;
     }
-    if (!isTextElement16(latestElement) || !latestElement.containerId) {
+    if (!isTextElement15(latestElement) || !latestElement.containerId) {
       const [cx, cy] = [
         latestElement.x + latestElement.width / 2,
         latestElement.y + latestElement.height / 2
       ];
-      const [topLeftX, topLeftY] = pointRotateRads20(
-        pointFrom30(latestElement.x, latestElement.y),
-        pointFrom30(cx, cy),
+      const [topLeftX, topLeftY] = pointRotateRads18(
+        pointFrom28(latestElement.x, latestElement.y),
+        pointFrom28(cx, cy),
         latestElement.angle
       );
       moveElement(
@@ -26510,9 +26390,9 @@ var handlePositionChange = ({
             origElement.x + origElement.width / 2,
             origElement.y + origElement.height / 2
           ];
-          const [topLeftX, topLeftY] = pointRotateRads20(
-            pointFrom30(origElement.x, origElement.y),
-            pointFrom30(cx, cy),
+          const [topLeftX, topLeftY] = pointRotateRads18(
+            pointFrom28(origElement.x, origElement.y),
+            pointFrom28(cx, cy),
             origElement.angle
           );
           const newTopLeftX = property === "x" ? nextValue : topLeftX;
@@ -26563,9 +26443,9 @@ var MultiPosition = ({
       }
       const [el] = elementsInUnit;
       const [cx, cy] = [el.x + el.width / 2, el.y + el.height / 2];
-      const [topLeftX, topLeftY] = pointRotateRads20(
-        pointFrom30(el.x, el.y),
-        pointFrom30(cx, cy),
+      const [topLeftX, topLeftY] = pointRotateRads18(
+        pointFrom28(el.x, el.y),
+        pointFrom28(cx, cy),
         el.angle
       );
       return Math.round((property === "x" ? topLeftX : topLeftY) * 100) / 100;
@@ -26589,7 +26469,7 @@ var MultiPosition = ({
 var MultiPosition_default = MultiPosition;
 
 // components/Stats/Position.tsx
-import { clamp as clamp6, pointFrom as pointFrom31, pointRotateRads as pointRotateRads21, round as round4 } from "@excalidraw/math";
+import { clamp as clamp6, pointFrom as pointFrom29, pointRotateRads as pointRotateRads19, round as round4 } from "@excalidraw/math";
 import {
   getFlipAdjustedCropPosition,
   getUncroppedWidthAndHeight as getUncroppedWidthAndHeight2
@@ -26614,9 +26494,9 @@ var handlePositionChange2 = ({
     origElement.x + origElement.width / 2,
     origElement.y + origElement.height / 2
   ];
-  const [topLeftX, topLeftY] = pointRotateRads21(
-    pointFrom31(origElement.x, origElement.y),
-    pointFrom31(cx, cy),
+  const [topLeftX, topLeftY] = pointRotateRads19(
+    pointFrom29(origElement.x, origElement.y),
+    pointFrom29(cx, cy),
     origElement.angle
   );
   if (originalAppState.croppingElementId === origElement.id) {
@@ -26716,9 +26596,9 @@ var Position = ({
   scene,
   appState
 }) => {
-  const [topLeftX, topLeftY] = pointRotateRads21(
-    pointFrom31(element.x, element.y),
-    pointFrom31(element.x + element.width / 2, element.y + element.height / 2),
+  const [topLeftX, topLeftY] = pointRotateRads19(
+    pointFrom29(element.x, element.y),
+    pointFrom29(element.x + element.width / 2, element.y + element.height / 2),
     element.angle
   );
   let value = round4(property === "x" ? topLeftX : topLeftY, 2);
@@ -28047,10 +27927,10 @@ import { CANVAS_SEARCH_TAB as CANVAS_SEARCH_TAB3, DEFAULT_SIDEBAR as DEFAULT_SID
 import {
   isFlowchartNodeElement,
   isImageElement as isImageElement7,
-  isLinearElement as isLinearElement10,
+  isLinearElement as isLinearElement9,
   isLineElement as isLineElement6,
   isTextBindableContainer as isTextBindableContainer2,
-  isTextElement as isTextElement17
+  isTextElement as isTextElement16
 } from "@excalidraw/element";
 import { isNodeInFlowchart } from "@excalidraw/element";
 import { jsx as jsx124 } from "react/jsx-runtime";
@@ -28108,7 +27988,7 @@ var getHints = ({
   }
   if (isResizing && lastPointerDownWith === "mouse" && selectedElements.length === 1) {
     const targetElement = selectedElements[0];
-    if (isLinearElement10(targetElement) && targetElement.points.length === 2) {
+    if (isLinearElement9(targetElement) && targetElement.points.length === 2) {
       return t("hints.lockAngle", {
         shortcut: getTaggedShortcutKey("Shift")
       });
@@ -28126,7 +28006,7 @@ var getHints = ({
       shortcut: getTaggedShortcutKey("Shift")
     });
   }
-  if (selectedElements.length === 1 && isTextElement17(selectedElements[0])) {
+  if (selectedElements.length === 1 && isTextElement16(selectedElements[0])) {
     return t("hints.text_selected", {
       shortcut: getTaggedShortcutKey("Enter")
     });
@@ -28166,7 +28046,7 @@ var getHints = ({
       });
     }
     if (selectedElements.length === 1) {
-      if (isLinearElement10(selectedElements[0])) {
+      if (isLinearElement9(selectedElements[0])) {
         if (appState.selectedLinearElement?.isEditing) {
           return appState.selectedLinearElement.selectedPointsIndices ? t("hints.lineEditor_pointSelected", {
             shortcut_1: getTaggedShortcutKey("Delete"),
@@ -28822,7 +28702,7 @@ var DefaultMainMenu = ({ UIOptions }) => {
     /* @__PURE__ */ jsx130(MainMenu_default.Separator, {}),
     /* @__PURE__ */ jsx130(MainMenu_default.Group, { title: "Excalidraw links", children: /* @__PURE__ */ jsx130(MainMenu_default.DefaultItems.Socials, {}) }),
     /* @__PURE__ */ jsx130(MainMenu_default.Separator, {}),
-    /* @__PURE__ */ jsx130(MainMenu_default.DefaultItems.ToggleTheme, {}),
+    /* @__PURE__ */ jsx130(MainMenu_default.DefaultItems.ToggleTheme, { allowSystemTheme: false }),
     /* @__PURE__ */ jsx130(MainMenu_default.DefaultItems.ChangeCanvasBackground, {})
   ] });
 };
@@ -29202,7 +29082,7 @@ var LayerUI = ({
           }
           if (selectedElements.length) {
             for (const element of selectedElements) {
-              mutateElement5(element, arrayToMap28(elements), {
+              mutateElement5(element, arrayToMap27(elements), {
                 [altKey && eyeDropperState.swapPreviewOnAlt ? colorPickerType === "elementBackground" ? "strokeColor" : "backgroundColor" : colorPickerType === "elementBackground" ? "backgroundColor" : "strokeColor"]: color
               });
               ShapeCache3.delete(element);
@@ -29416,14 +29296,14 @@ import {
 // renderer/interactiveScene.ts
 import {
   clamp as clamp7,
-  pointFrom as pointFrom33,
+  pointFrom as pointFrom31,
   pointsEqual as pointsEqual8,
   bezierEquation as bezierEquation2,
-  pointRotateRads as pointRotateRads22,
+  pointRotateRads as pointRotateRads20,
   pointDistance as pointDistance8
 } from "@excalidraw/math";
 import {
-  arrayToMap as arrayToMap29,
+  arrayToMap as arrayToMap28,
   BIND_MODE_TIMEOUT,
   DEFAULT_TRANSFORM_HANDLE_SPACING as DEFAULT_TRANSFORM_HANDLE_SPACING2,
   FRAME_STYLE as FRAME_STYLE3,
@@ -29442,15 +29322,15 @@ import {
   getTransformHandlesFromCoords,
   hasBoundingBox,
   hitElementItself as hitElementItself2,
-  isArrowElement as isArrowElement13,
+  isArrowElement as isArrowElement12,
   isBindableElement as isBindableElement2,
   isElbowArrow as isElbowArrow9,
   isFrameLikeElement as isFrameLikeElement14,
   isImageElement as isImageElement8,
-  isLinearElement as isLinearElement11,
+  isLinearElement as isLinearElement10,
   isLineElement as isLineElement7,
   maxBindingDistance_simple as maxBindingDistance_simple2,
-  isTextElement as isTextElement18,
+  isTextElement as isTextElement17,
   getActiveTextElement
 } from "@excalidraw/element";
 import { LinearElementEditor as LinearElementEditor10 } from "@excalidraw/element/linearElementEditor";
@@ -29468,7 +29348,7 @@ import {
 } from "@excalidraw/element";
 
 // renderer/renderSnaps.ts
-import { pointFrom as pointFrom32 } from "@excalidraw/math";
+import { pointFrom as pointFrom30 } from "@excalidraw/math";
 import { THEME as THEME15 } from "@excalidraw/common";
 var SNAP_COLOR_LIGHT = "#ff6b6b";
 var SNAP_COLOR_DARK = "#ff0000";
@@ -29546,25 +29426,25 @@ var drawGapLine = (from, to, direction, appState, context) => {
     const halfPoint = [(from[0] + to[0]) / 2, from[1]];
     if (!appState.zenModeEnabled) {
       drawLine(
-        pointFrom32(from[0], from[1] - FULL),
-        pointFrom32(from[0], from[1] + FULL),
+        pointFrom30(from[0], from[1] - FULL),
+        pointFrom30(from[0], from[1] + FULL),
         context
       );
     }
     drawLine(
-      pointFrom32(halfPoint[0] - QUARTER, halfPoint[1] - HALF),
-      pointFrom32(halfPoint[0] - QUARTER, halfPoint[1] + HALF),
+      pointFrom30(halfPoint[0] - QUARTER, halfPoint[1] - HALF),
+      pointFrom30(halfPoint[0] - QUARTER, halfPoint[1] + HALF),
       context
     );
     drawLine(
-      pointFrom32(halfPoint[0] + QUARTER, halfPoint[1] - HALF),
-      pointFrom32(halfPoint[0] + QUARTER, halfPoint[1] + HALF),
+      pointFrom30(halfPoint[0] + QUARTER, halfPoint[1] - HALF),
+      pointFrom30(halfPoint[0] + QUARTER, halfPoint[1] + HALF),
       context
     );
     if (!appState.zenModeEnabled) {
       drawLine(
-        pointFrom32(to[0], to[1] - FULL),
-        pointFrom32(to[0], to[1] + FULL),
+        pointFrom30(to[0], to[1] - FULL),
+        pointFrom30(to[0], to[1] + FULL),
         context
       );
       drawLine(from, to, context);
@@ -29573,25 +29453,25 @@ var drawGapLine = (from, to, direction, appState, context) => {
     const halfPoint = [from[0], (from[1] + to[1]) / 2];
     if (!appState.zenModeEnabled) {
       drawLine(
-        pointFrom32(from[0] - FULL, from[1]),
-        pointFrom32(from[0] + FULL, from[1]),
+        pointFrom30(from[0] - FULL, from[1]),
+        pointFrom30(from[0] + FULL, from[1]),
         context
       );
     }
     drawLine(
-      pointFrom32(halfPoint[0] - HALF, halfPoint[1] - QUARTER),
-      pointFrom32(halfPoint[0] + HALF, halfPoint[1] - QUARTER),
+      pointFrom30(halfPoint[0] - HALF, halfPoint[1] - QUARTER),
+      pointFrom30(halfPoint[0] + HALF, halfPoint[1] - QUARTER),
       context
     );
     drawLine(
-      pointFrom32(halfPoint[0] - HALF, halfPoint[1] + QUARTER),
-      pointFrom32(halfPoint[0] + HALF, halfPoint[1] + QUARTER),
+      pointFrom30(halfPoint[0] - HALF, halfPoint[1] + QUARTER),
+      pointFrom30(halfPoint[0] + HALF, halfPoint[1] + QUARTER),
       context
     );
     if (!appState.zenModeEnabled) {
       drawLine(
-        pointFrom32(to[0] - FULL, to[1]),
-        pointFrom32(to[0] + FULL, to[1]),
+        pointFrom30(to[0] - FULL, to[1]),
+        pointFrom30(to[0] + FULL, to[1]),
         context
       );
       drawLine(from, to, context);
@@ -29837,12 +29717,12 @@ var renderBindingHighlightForBindableElement_simple = (context, suggestedBinding
         midpoints = getDiamondBaseCorners(suggestedBinding.element).map(
           (curve3) => {
             const point = bezierEquation2(curve3, 0.5);
-            const rotatedPoint = pointRotateRads22(
+            const rotatedPoint = pointRotateRads20(
               point,
               center2,
               suggestedBinding.element.angle
             );
-            return pointFrom33(rotatedPoint[0], rotatedPoint[1]);
+            return pointFrom31(rotatedPoint[0], rotatedPoint[1]);
           }
         );
       } else {
@@ -29863,16 +29743,16 @@ var renderBindingHighlightForBindableElement_simple = (context, suggestedBinding
           // TOP
         ];
         midpoints = basePoints.map((point) => {
-          const globalPoint = pointFrom33(
+          const globalPoint = pointFrom31(
             point.x + suggestedBinding.element.x,
             point.y + suggestedBinding.element.y
           );
-          const rotatedPoint = pointRotateRads22(
+          const rotatedPoint = pointRotateRads20(
             globalPoint,
             center,
             suggestedBinding.element.angle
           );
-          return pointFrom33(rotatedPoint[0], rotatedPoint[1]);
+          return pointFrom31(rotatedPoint[0], rotatedPoint[1]);
         });
       }
       const hoveredMidpoint = pointerCoords && midpoints.reduce(
@@ -30116,7 +29996,7 @@ var renderBindingHighlightForBindableElement_complex = (app, context, element, a
         const center = elementCenterPoint2(element, allElementsMap);
         midpoints = curves.map((curve3) => {
           const point = bezierEquation2(curve3, 0.5);
-          const rotatedPoint = pointRotateRads22(point, center, element.angle);
+          const rotatedPoint = pointRotateRads20(point, center, element.angle);
           return {
             x: rotatedPoint[0] - element.x,
             y: rotatedPoint[1] - element.y
@@ -30135,11 +30015,11 @@ var renderBindingHighlightForBindableElement_complex = (app, context, element, a
           // LEFT
         ];
         midpoints = basePoints.map((point) => {
-          const globalPoint = pointFrom33(
+          const globalPoint = pointFrom31(
             point.x + element.x,
             point.y + element.y
           );
-          const rotatedPoint = pointRotateRads22(
+          const rotatedPoint = pointRotateRads20(
             globalPoint,
             center,
             element.angle
@@ -30188,7 +30068,7 @@ var renderBindingHighlightForBindableElement = (app, context, suggestedBinding,
   }
   context.save();
   context.translate(appState.scrollX, appState.scrollY);
-  const pointerCoords = app.lastPointerMoveCoords ? pointFrom33(
+  const pointerCoords = app.lastPointerMoveCoords ? pointFrom31(
     app.lastPointerMoveCoords.x,
     app.lastPointerMoveCoords.y
   ) : null;
@@ -30353,7 +30233,7 @@ var renderLinearPointHandles = (context, appState, element, elementsMap) => {
         renderSingleLinearPoint(
           context,
           appState,
-          pointFrom33(
+          pointFrom31(
             (p[0] + points[idx + 1][0]) / 2,
             (p[1] + points[idx + 1][1]) / 2
           ),
@@ -30769,7 +30649,7 @@ var _renderInteractiveScene = ({
         renderLinearElementPointHighlight(context, appState, elementsMap);
       }
     }
-    if (isArrowElement13(selectedLinearElement)) {
+    if (isArrowElement12(selectedLinearElement)) {
       renderFocusPointIndicator({
         arrow: selectedLinearElement,
         elementsMap: allElementsMap,
@@ -30792,7 +30672,7 @@ var _renderInteractiveScene = ({
       appState,
       editorInterface
     );
-    const isSingleLinearElementSelected = selectedElements.length === 1 && isLinearElement11(selectedElements[0]);
+    const isSingleLinearElementSelected = selectedElements.length === 1 && isLinearElement10(selectedElements[0]);
     if (isSingleLinearElementSelected && appState.selectedLinearElement?.elementId === selectedElements[0].id && !selectedElements[0].locked) {
       renderLinearPointHandles(
         context,
@@ -30803,7 +30683,7 @@ var _renderInteractiveScene = ({
     }
     const selectionColor = renderConfig.selectionColor || "#000";
     if (showBoundingBox) {
-      const locallySelectedIds = arrayToMap29(selectedElements);
+      const locallySelectedIds = arrayToMap28(selectedElements);
       const selections = [];
       for (const element of elementsMap.values()) {
         const selectionColors = [];
@@ -30887,7 +30767,7 @@ var _renderInteractiveScene = ({
         getOmitSidesForEditorInterface(editorInterface)
       );
       if (!appState.viewModeEnabled && showBoundingBox && // do not show transform handles when text is being edited
-      !isTextElement18(appState.editingTextElement) && // do not show transform handles when image is being cropped
+      !isTextElement17(appState.editingTextElement) && // do not show transform handles when image is being cropped
       !appState.croppingElementId) {
         renderTransformHandles(
           context,
@@ -31930,7 +31810,10 @@ var App = class _App extends React40.Component {
                 }
               },
               style: {
-                background: isDarkTheme ? applyDarkModeFilter4(this.state.viewBackgroundColor) : this.state.viewBackgroundColor,
+                background: applyDarkModeFilter4(
+                  this.state.viewBackgroundColor,
+                  isDarkTheme
+                ),
                 zIndex: 2,
                 border: "none",
                 display: "block",
@@ -32164,6 +32047,7 @@ var App = class _App extends React40.Component {
         this.addNewImagesToImageCache();
       }
       if (actionResult.appState || editingTextElement || this.state.contextMenu) {
+        const viewModeOnly = this.props.viewModeOnly ?? actionResult?.appState?.viewModeOnly ?? this.state.viewModeOnly;
         let viewModeEnabled = actionResult?.appState?.viewModeEnabled || false;
         let zenModeEnabled = actionResult?.appState?.zenModeEnabled || false;
         const theme = actionResult?.appState?.theme || this.props.theme || THEME17.LIGHT;
@@ -32172,13 +32056,16 @@ var App = class _App extends React40.Component {
         if (typeof this.props.viewModeEnabled !== "undefined") {
           viewModeEnabled = this.props.viewModeEnabled;
         }
+        if (this.props.viewModeOnly ?? viewModeOnly) {
+          viewModeEnabled = true;
+        }
         if (typeof this.props.zenModeEnabled !== "undefined") {
           zenModeEnabled = this.props.zenModeEnabled;
         }
         editingTextElement = actionResult.appState?.editingTextElement || null;
         if (actionResult.elements && editingTextElement) {
           actionResult.elements.forEach((element) => {
-            if (editingTextElement?.id === element.id && editingTextElement !== element && isNonDeletedElement(element) && isTextElement19(element)) {
+            if (editingTextElement?.id === element.id && editingTextElement !== element && isNonDeletedElement(element) && isTextElement18(element)) {
               editingTextElement = element;
             }
           });
@@ -32197,6 +32084,7 @@ var App = class _App extends React40.Component {
             contextMenu: null,
             editingTextElement,
             viewModeEnabled,
+            viewModeOnly,
             zenModeEnabled,
             theme,
             name,
@@ -32471,8 +32359,8 @@ var App = class _App extends React40.Component {
       if (didTapTwice && event.touches.length === 1 && firstTapPosition) {
         const touch = event.touches[0];
         const distance3 = pointDistance9(
-          pointFrom34(touch.clientX, touch.clientY),
-          pointFrom34(firstTapPosition.x, firstTapPosition.y)
+          pointFrom32(touch.clientX, touch.clientY),
+          pointFrom32(firstTapPosition.x, firstTapPosition.y)
         );
         if (distance3 <= DOUBLE_TAP_POSITION_THRESHOLD) {
           this.lassoTrail.endPath();
@@ -32580,7 +32468,7 @@ var App = class _App extends React40.Component {
         prevElements
       );
       nextElements = mappedNewSceneElements || nextElements;
-      syncMovedIndices5(nextElements, arrayToMap30(duplicatedElements));
+      syncMovedIndices5(nextElements, arrayToMap29(duplicatedElements));
       const topLayerFrame = this.getTopLayerFrameAtSceneCoords({ x, y });
       if (topLayerFrame) {
         const eligibleElements = filterElementsEligibleAsFrameChildren(
@@ -32595,7 +32483,7 @@ var App = class _App extends React40.Component {
       }
       this.scene.replaceAllElements(nextElements);
       duplicatedElements.forEach((newElement7) => {
-        if (isTextElement19(newElement7) && isBoundToContainer9(newElement7)) {
+        if (isTextElement18(newElement7) && isBoundToContainer9(newElement7)) {
           const container = getContainerElement5(
             newElement7,
             this.scene.getElementsMapIncludingDeleted()
@@ -32650,7 +32538,33 @@ var App = class _App extends React40.Component {
       }
     });
     __publicField(this, "setAppState", (state, callback) => {
-      this.setState(state, callback);
+      const normalizeViewModeOnlyState = (nextState, prevState) => {
+        if (!nextState) {
+          return nextState;
+        }
+        const nextAppState = nextState;
+        const viewModeOnly = this.props.viewModeOnly ?? nextAppState.viewModeOnly ?? prevState.viewModeOnly;
+        if (viewModeOnly) {
+          return {
+            ...nextState,
+            viewModeEnabled: true
+          };
+        }
+        return nextState;
+      };
+      if (typeof state === "function") {
+        this.setState((prevState, props) => {
+          return normalizeViewModeOnlyState(
+            state(prevState, props),
+            prevState
+          );
+        }, callback);
+        return;
+      }
+      this.setState(
+        normalizeViewModeOnlyState(state, this.state),
+        callback
+      );
     });
     __publicField(this, "removePointer", (event) => {
       if (touchTimeout) {
@@ -32925,7 +32839,7 @@ var App = class _App extends React40.Component {
           });
         }
         if (appState) {
-          this.setState(appState);
+          this.setAppState(appState);
         }
         if (elements) {
           this.scene.replaceAllElements(elements);
@@ -33219,7 +33133,7 @@ var App = class _App extends React40.Component {
           event.preventDefault();
           return;
         }
-        const shouldPreventToolSwitching = this.props.viewModeEnabled === true;
+        const shouldPreventToolSwitching = this.props.viewModeEnabled === true || this.props.viewModeOnly === true || this.state.viewModeOnly;
         if (!shouldPreventToolSwitching && this.state.viewModeEnabled && event.key === KEYS50.ESCAPE) {
           this.setActiveTool({ type: "selection" });
           return;
@@ -33324,7 +33238,7 @@ var App = class _App extends React40.Component {
           if (selectedElements.length === 1) {
             const selectedElement = selectedElements[0];
             if (event[KEYS50.CTRL_OR_CMD] || isLineElement8(selectedElement)) {
-              if (isLinearElement12(selectedElement)) {
+              if (isLinearElement11(selectedElement)) {
                 if (!this.state.selectedLinearElement?.isEditing || this.state.selectedLinearElement.elementId !== selectedElement.id) {
                   this.store.scheduleCapture();
                   if (!isElbowArrow10(selectedElement)) {
@@ -33332,9 +33246,9 @@ var App = class _App extends React40.Component {
                   }
                 }
               }
-            } else if (isTextElement19(selectedElement) || isValidTextContainer(selectedElement)) {
+            } else if (isTextElement18(selectedElement) || isValidTextContainer(selectedElement)) {
               let container;
-              if (!isTextElement19(selectedElement)) {
+              if (!isTextElement18(selectedElement)) {
                 container = selectedElement;
               }
               const midPoint = getContainerCenter(
@@ -33383,7 +33297,7 @@ var App = class _App extends React40.Component {
             return;
           }
           if (this.state.activeTool.type === "text" || selectedElements.find(
-            (element) => isTextElement19(element) || getBoundTextElement15(
+            (element) => isTextElement18(element) || getBoundTextElement15(
               element,
               this.scene.getNonDeletedElementsMap()
             )
@@ -33439,7 +33353,7 @@ var App = class _App extends React40.Component {
             this.state
           );
           const hoveredElement = getHoveredElementForBinding2(
-            pointFrom34(scenePointer.x, scenePointer.y),
+            pointFrom32(scenePointer.x, scenePointer.y),
             this.scene.getNonDeletedElements(),
             this.scene.getNonDeletedElementsMap()
           );
@@ -33465,7 +33379,7 @@ var App = class _App extends React40.Component {
       }
       if (isArrowKey2(event.key)) {
         bindOrUnbindBindingElements2(
-          this.scene.getSelectedElements(this.state).filter(isArrowElement14),
+          this.scene.getSelectedElements(this.state).filter(isArrowElement13),
           this.scene,
           this.state
         );
@@ -33753,7 +33667,7 @@ var App = class _App extends React40.Component {
       const fontFamily = existingTextElement?.fontFamily || this.state.currentItemFontFamily;
       const lineHeight = existingTextElement?.lineHeight || getLineHeight6(fontFamily);
       const fontSize = this.state.currentItemFontSize;
-      if (!existingTextElement && shouldBindToContainer && container && !isArrowElement14(container)) {
+      if (!existingTextElement && shouldBindToContainer && container && !isArrowElement13(container)) {
         const fontString = {
           fontSize,
           fontFamily
@@ -33817,7 +33731,7 @@ var App = class _App extends React40.Component {
         containerId: shouldBindToContainer ? container?.id : void 0,
         groupIds: container?.groupIds ?? [],
         lineHeight,
-        angle: container ? isArrowElement14(container) ? 0 : container.angle : 0,
+        angle: container ? isArrowElement13(container) ? 0 : container.angle : 0,
         frameId
       });
       if (!existingTextElement && shouldBindToContainer && container) {
@@ -33875,8 +33789,8 @@ var App = class _App extends React40.Component {
       }
       const [firstClick, secondClick] = this.lastCompletedCanvasClicks;
       return pointDistance9(
-        pointFrom34(firstClick.x, firstClick.y),
-        pointFrom34(secondClick.x, secondClick.y)
+        pointFrom32(firstClick.x, firstClick.y),
+        pointFrom32(secondClick.x, secondClick.y)
       ) <= DOUBLE_TAP_POSITION_THRESHOLD;
     });
     __publicField(this, "handleCanvasDoubleClick", (event) => {
@@ -33894,7 +33808,7 @@ var App = class _App extends React40.Component {
         event,
         this.state
       );
-      if (selectedElements.length === 1 && isLinearElement12(selectedElements[0])) {
+      if (selectedElements.length === 1 && isLinearElement11(selectedElements[0])) {
         const selectedLinearElement = selectedElements[0];
         if ((event[KEYS50.CTRL_OR_CMD] && isSimpleArrow(selectedLinearElement) || isLineElement8(selectedLinearElement)) && (!this.state.selectedLinearElement?.isEditing || this.state.selectedLinearElement.elementId !== selectedLinearElement.id)) {
           this.actionManager.executeAction(actionToggleLinearEditor);
@@ -33996,7 +33910,7 @@ var App = class _App extends React40.Component {
           );
           if (container) {
             if (hasBoundTextElement9(container) || !isTransparent6(container.backgroundColor) || hitElementItself3({
-              point: pointFrom34(sceneX, sceneY),
+              point: pointFrom32(sceneX, sceneY),
               element: container,
               elementsMap: this.scene.getNonDeletedElementsMap(),
               threshold: this.getElementHitThreshold(container)
@@ -34047,7 +33961,7 @@ var App = class _App extends React40.Component {
           element,
           this.scene.getNonDeletedElementsMap(),
           this.state,
-          pointFrom34(scenePointer.x, scenePointer.y),
+          pointFrom32(scenePointer.x, scenePointer.y),
           this.editorInterface.formFactor === "phone"
         )) {
           return element;
@@ -34055,12 +33969,15 @@ var App = class _App extends React40.Component {
       }
     });
     __publicField(this, "handleElementLinkClick", (event) => {
+      if (event.button !== POINTER_BUTTON2.MAIN) {
+        return;
+      }
       const draggedDistance = pointDistance9(
-        pointFrom34(
+        pointFrom32(
           this.lastPointerDownEvent.clientX,
           this.lastPointerDownEvent.clientY
         ),
-        pointFrom34(
+        pointFrom32(
           this.lastPointerUpEvent.clientX,
           this.lastPointerUpEvent.clientY
         )
@@ -34077,7 +33994,7 @@ var App = class _App extends React40.Component {
         this.hitLinkElement,
         elementsMap,
         this.state,
-        pointFrom34(lastPointerDownCoords.x, lastPointerDownCoords.y),
+        pointFrom32(lastPointerDownCoords.x, lastPointerDownCoords.y),
         this.editorInterface.formFactor === "phone"
       );
       const lastPointerUpCoords = viewportCoordsToSceneCoords3(
@@ -34088,33 +34005,37 @@ var App = class _App extends React40.Component {
         this.hitLinkElement,
         elementsMap,
         this.state,
-        pointFrom34(lastPointerUpCoords.x, lastPointerUpCoords.y),
+        pointFrom32(lastPointerUpCoords.x, lastPointerUpCoords.y),
         this.editorInterface.formFactor === "phone"
       );
       if (lastPointerDownHittingLinkIcon && lastPointerUpHittingLinkIcon) {
         hideHyperlinkToolip();
-        let url = this.hitLinkElement.link;
-        if (url) {
-          url = normalizeLink3(url);
-          let customEvent;
-          if (this.props.onLinkOpen) {
-            customEvent = wrapEvent2(EVENT10.EXCALIDRAW_LINK, event.nativeEvent);
-            this.props.onLinkOpen(
-              {
-                ...this.hitLinkElement,
-                link: url
-              },
-              customEvent
-            );
-          }
-          if (!customEvent?.defaultPrevented) {
-            const target = isLocalLink2(url) ? "_self" : "_blank";
-            const newWindow = window.open(void 0, target);
-            if (newWindow) {
-              newWindow.opener = null;
-              newWindow.location = url;
-            }
-          }
+        this.openElementLink(this.hitLinkElement, event.nativeEvent);
+      }
+    });
+    __publicField(this, "openElementLink", (element, nativeEvent = new MouseEvent("click")) => {
+      let url = element.link;
+      if (!url) {
+        return;
+      }
+      url = normalizeLink3(url);
+      let customEvent;
+      if (this.props.onLinkOpen) {
+        customEvent = wrapEvent2(EVENT10.EXCALIDRAW_LINK, nativeEvent);
+        this.props.onLinkOpen(
+          {
+            ...element,
+            link: url
+          },
+          customEvent
+        );
+      }
+      if (!customEvent?.defaultPrevented) {
+        const target = isLocalLink2(url) ? "_self" : "_blank";
+        const newWindow = window.open(void 0, target);
+        if (newWindow) {
+          newWindow.opener = null;
+          newWindow.location = url;
         }
       }
     });
@@ -34320,7 +34241,7 @@ var App = class _App extends React40.Component {
       if (isBindingElementType(this.state.activeTool.type)) {
         const { newElement: newElement7 } = this.state;
         if (!newElement7 && isBindingEnabled2(this.state)) {
-          const globalPoint = pointFrom34(
+          const globalPoint = pointFrom32(
             scenePointerX,
             scenePointerY
           );
@@ -34357,8 +34278,8 @@ var App = class _App extends React40.Component {
         const { lastCommittedPoint } = selectedLinearElement;
         setCursorForShape(this.interactiveCanvas, this.state);
         if (lastPoint === lastCommittedPoint) {
-          const hoveredElement = isArrowElement14(this.state.newElement) && isBindingEnabled2(this.state) && getHoveredElementForBinding2(
-            pointFrom34(scenePointerX, scenePointerY),
+          const hoveredElement = isArrowElement13(this.state.newElement) && isBindingEnabled2(this.state) && getHoveredElementForBinding2(
+            pointFrom32(scenePointerX, scenePointerY),
             this.scene.getNonDeletedElements(),
             this.scene.getNonDeletedElementsMap(),
             maxBindingDistance_simple3(this.state.zoom)
@@ -34396,7 +34317,7 @@ var App = class _App extends React40.Component {
             // if we haven't yet created a temp point and we're beyond commit-zone
             // threshold, add a point
             pointDistance9(
-              pointFrom34(scenePointerX - rx, scenePointerY - ry),
+              pointFrom32(scenePointerX - rx, scenePointerY - ry),
               lastPoint
             ) >= LINE_CONFIRM_THRESHOLD2
           ) {
@@ -34405,7 +34326,7 @@ var App = class _App extends React40.Component {
               {
                 points: [
                   ...points,
-                  pointFrom34(scenePointerX - rx, scenePointerY - ry)
+                  pointFrom32(scenePointerX - rx, scenePointerY - ry)
                 ]
               },
               { informMutation: false, isDragging: false }
@@ -34429,7 +34350,7 @@ var App = class _App extends React40.Component {
             setCursor(this.interactiveCanvas, CURSOR_TYPE4.POINTER);
           }
         } else if (points.length > 2 && lastCommittedPoint && pointDistance9(
-          pointFrom34(scenePointerX - rx, scenePointerY - ry),
+          pointFrom32(scenePointerX - rx, scenePointerY - ry),
           lastCommittedPoint
         ) < LINE_CONFIRM_THRESHOLD2) {
           setCursor(this.interactiveCanvas, CURSOR_TYPE4.POINTER);
@@ -34465,7 +34386,7 @@ var App = class _App extends React40.Component {
           const elementsMap = this.scene.getNonDeletedElementsMap();
           if (isSimpleArrow(multiElement)) {
             const hoveredElement = getHoveredElementForBinding2(
-              pointFrom34(scenePointerX, scenePointerY),
+              pointFrom32(scenePointerX, scenePointerY),
               this.scene.getNonDeletedElements(),
               elementsMap
             );
@@ -34492,12 +34413,12 @@ var App = class _App extends React40.Component {
       }
       if (this.state.activeTool.type === "arrow") {
         const hit = getHoveredElementForBinding2(
-          pointFrom34(scenePointerX, scenePointerY),
+          pointFrom32(scenePointerX, scenePointerY),
           this.scene.getNonDeletedElements(),
           this.scene.getNonDeletedElementsMap(),
           maxBindingDistance_simple3(this.state.zoom)
         );
-        const scenePointer2 = pointFrom34(scenePointerX, scenePointerY);
+        const scenePointer2 = pointFrom32(scenePointerX, scenePointerY);
         const elementsMap = this.scene.getNonDeletedElementsMap();
         if (hit && !isPointInElement3(scenePointer2, hit, elementsMap)) {
           this.setState({
@@ -34536,7 +34457,7 @@ var App = class _App extends React40.Component {
         }
         if ((!this.state.selectedLinearElement || this.state.selectedLinearElement.hoverPointIndex === -1) && this.state.openDialog?.name !== "elementLinkSelector" && !(selectedElements.length === 1 && isElbowArrow10(selectedElements[0])) && // HACK: Disable transform handles for linear elements on mobile until a
         // better way of showing them is found
-        !(isLinearElement12(selectedElements[0]) && (this.editorInterface.userAgent.isMobileDevice || selectedElements[0].points.length === 2))) {
+        !(isLinearElement11(selectedElements[0]) && (this.editorInterface.userAgent.isMobileDevice || selectedElements[0].points.length === 2))) {
           const elementWithTransformHandleType = getElementWithTransformHandleType(
             elements,
             this.state,
@@ -34618,7 +34539,7 @@ var App = class _App extends React40.Component {
         } else if (this.state.activeTool.type === "text") {
           setCursor(
             this.interactiveCanvas,
-            isTextElement19(hitElement) ? CURSOR_TYPE4.TEXT : CURSOR_TYPE4.CROSSHAIR
+            isTextElement18(hitElement) ? CURSOR_TYPE4.TEXT : CURSOR_TYPE4.CROSSHAIR
           );
         } else if (!event[KEYS50.CTRL_OR_CMD] && this.isHittingCommonBoundingBoxOfSelectedElements(
           scenePointer,
@@ -35218,7 +35139,7 @@ var App = class _App extends React40.Component {
         const elements = this.scene.getNonDeletedElements();
         const elementsMap = this.scene.getNonDeletedElementsMap();
         const selectedElements = this.scene.getSelectedElements(this.state);
-        if (selectedElements.length === 1 && !this.state.selectedLinearElement?.isEditing && !isElbowArrow10(selectedElements[0]) && !(isLinearElement12(selectedElements[0]) && (this.editorInterface.userAgent.isMobileDevice || selectedElements[0].points.length === 2)) && !(this.state.selectedLinearElement && this.state.selectedLinearElement.hoverPointIndex !== -1)) {
+        if (selectedElements.length === 1 && !this.state.selectedLinearElement?.isEditing && !isElbowArrow10(selectedElements[0]) && !(isLinearElement11(selectedElements[0]) && (this.editorInterface.userAgent.isMobileDevice || selectedElements[0].points.length === 2)) && !(this.state.selectedLinearElement && this.state.selectedLinearElement.hoverPointIndex !== -1)) {
           const elementWithTransformHandleType = getElementWithTransformHandleType(
             elements,
             this.state,
@@ -35265,7 +35186,7 @@ var App = class _App extends React40.Component {
               pointerDownState.origin.y
             )
           );
-          if (selectedElements.length === 1 && isLinearElement12(selectedElements[0]) && selectedElements[0].points.length === 2) {
+          if (selectedElements.length === 1 && isLinearElement11(selectedElements[0]) && selectedElements[0].points.length === 2) {
             pointerDownState.resize.arrowDirection = getResizeArrowDirection(
               pointerDownState.resize.handleType,
               selectedElements[0]
@@ -35560,7 +35481,7 @@ var App = class _App extends React40.Component {
         simulatePressure,
         locked: false,
         frameId: topLayerFrame ? topLayerFrame.id : null,
-        points: [pointFrom34(0, 0)],
+        points: [pointFrom32(0, 0)],
         pressures: simulatePressure ? [] : [event.pressure]
       });
       this.insertNewElement(element);
@@ -35731,7 +35652,7 @@ var App = class _App extends React40.Component {
         const { x: rx, y: ry } = multiElement;
         const { lastCommittedPoint } = selectedLinearElement;
         const hoveredElementForBinding = isBindingEnabled2(this.state) && getHoveredElementForBinding2(
-          pointFrom34(
+          pointFrom32(
             this.lastPointerMoveCoords?.x ?? rx + multiElement.points[multiElement.points.length - 1][0],
             this.lastPointerMoveCoords?.y ?? ry + multiElement.points[multiElement.points.length - 1][1]
           ),
@@ -35739,7 +35660,7 @@ var App = class _App extends React40.Component {
           this.scene.getNonDeletedElementsMap()
         );
         if (isBindingElement4(multiElement) && hoveredElementForBinding || multiElement.points.length > 1 && lastCommittedPoint && pointDistance9(
-          pointFrom34(
+          pointFrom32(
             pointerDownState.origin.x - rx,
             pointerDownState.origin.y - ry
           ),
@@ -35813,7 +35734,7 @@ var App = class _App extends React40.Component {
           locked: false,
           frameId: topLayerFrame ? topLayerFrame.id : null
         });
-        const point = pointFrom34(
+        const point = pointFrom32(
           pointerDownState.origin.x,
           pointerDownState.origin.y
         );
@@ -35824,7 +35745,7 @@ var App = class _App extends React40.Component {
           elementsMap
         ) : null;
         this.scene.mutateElement(element, {
-          points: [pointFrom34(0, 0), pointFrom34(0, 0)]
+          points: [pointFrom32(0, 0), pointFrom32(0, 0)]
         });
         this.insertNewElement(element);
         if (isBindingElement4(element)) {
@@ -35834,7 +35755,7 @@ var App = class _App extends React40.Component {
               [
                 0,
                 {
-                  point: pointFrom34(0, 0),
+                  point: pointFrom32(0, 0),
                   isDragging: false
                 }
               ]
@@ -35855,7 +35776,7 @@ var App = class _App extends React40.Component {
           this.setState((prevState) => {
             let linearElementEditor = null;
             let nextSelectedElementIds = prevState.selectedElementIds;
-            if (isLinearElement12(element)) {
+            if (isLinearElement11(element)) {
               linearElementEditor = new LinearElementEditor11(
                 element,
                 this.scene.getNonDeletedElementsMap()
@@ -35868,7 +35789,7 @@ var App = class _App extends React40.Component {
                   ...linearElementEditor.initialState,
                   arrowStartIsInside: event.altKey,
                   lastClickedPoint: endIdx,
-                  origin: pointFrom34(
+                  origin: pointFrom32(
                     pointerDownState.origin.x,
                     pointerDownState.origin.y
                   )
@@ -36311,14 +36232,14 @@ var App = class _App extends React40.Component {
           }
         })
       );
-      const initializedMap = arrayToMap30(initialized);
+      const initializedMap = arrayToMap29(initialized);
       const positioned = positionElementsOnGrid(
         initialized.filter((el) => !el.isDeleted),
         sceneX,
         sceneY,
         gridPadding
       );
-      const positionedMap = arrayToMap30(positioned);
+      const positionedMap = arrayToMap29(positioned);
       const nextElements = this.scene.getElementsIncludingDeleted().map((el) => positionedMap.get(el.id) ?? initializedMap.get(el.id) ?? el);
       this.updateScene({
         appState: {
@@ -36544,7 +36465,7 @@ var App = class _App extends React40.Component {
               this.state,
               this
             ),
-            selectedLinearElement: isLinearElement12(element) ? new LinearElementEditor11(
+            selectedLinearElement: isLinearElement11(element) ? new LinearElementEditor11(
               element,
               this.scene.getNonDeletedElementsMap()
             ) : null
@@ -36553,7 +36474,11 @@ var App = class _App extends React40.Component {
         },
         () => {
           this.setState({
-            contextMenu: { top, left, items: this.getContextMenuItems(type) }
+            contextMenu: {
+              top,
+              left,
+              items: this.getContextMenuItems(type, element)
+            }
           });
         }
       );
@@ -36798,13 +36723,17 @@ var App = class _App extends React40.Component {
       }
       return false;
     });
-    __publicField(this, "getContextMenuItems", (type) => {
+    __publicField(this, "getContextMenuItems", (type, contextMenuElement) => {
       const options = [];
-      const imageContextMenuItems = this.getImageContextMenuItems();
+      const imageContextMenuItems = this.getImageContextMenuItems(contextMenuElement);
       const imageContextMenuSection = imageContextMenuItems.length > 0 ? [CONTEXT_MENU_SEPARATOR, ...imageContextMenuItems] : [];
       if (type === "canvas") {
         if (this.state.viewModeEnabled) {
-          return [actionToggleGridMode, actionToggleViewMode, actionToggleStats];
+          return [
+            actionToggleGridMode,
+            !this.state.viewModeOnly && actionToggleViewMode,
+            actionToggleStats
+          ];
         }
         return [
           actionPaste,
@@ -36818,13 +36747,22 @@ var App = class _App extends React40.Component {
           actionToggleObjectsSnapMode,
           actionToggleArrowBinding,
           actionToggleMidpointSnapping,
-          actionToggleViewMode,
+          !this.state.viewModeOnly && actionToggleViewMode,
           actionToggleStats
         ];
       }
       options.push(copyText);
       if (this.state.viewModeEnabled) {
         const viewModeItems = [actionCopy];
+        const selectedElements = this.scene.getSelectedElements(this.state);
+        const linkedElement = contextMenuElement?.link && !contextMenuElement.locked ? contextMenuElement : selectedElements.length === 1 && selectedElements[0].link ? selectedElements[0] : null;
+        if (linkedElement) {
+          viewModeItems.push({
+            key: "openLink",
+            label: "Open link",
+            onSelect: () => this.openElementLink(linkedElement)
+          });
+        }
         viewModeItems.push(...imageContextMenuSection, ...options);
         return viewModeItems;
       }
@@ -36881,19 +36819,22 @@ var App = class _App extends React40.Component {
       );
       return elementItems;
     });
-    __publicField(this, "getImageContextMenuItems", () => {
+    __publicField(this, "getImageContextMenuItems", (contextMenuElement) => {
       if (!this.props.imageContextMenuItems) {
         return [];
       }
       const selectedElements = this.scene.getSelectedElements(this.state);
-      if (selectedElements.length === 0 || !selectedElements.every((element) => isImageElement9(element))) {
+      const selectedElementsAreImages = selectedElements.length > 0 && selectedElements.every((element) => isImageElement9(element));
+      const selectionContainsGroupedElement = selectedElements.some(
+        (element) => element.groupIds.length > 0
+      );
+      const imageIds = contextMenuElement && isImageElement9(contextMenuElement) ? !selectedElementsAreImages || selectionContainsGroupedElement || !selectedElements.some(
+        (element) => element.id === contextMenuElement.id
+      ) ? [contextMenuElement.id] : selectedElements.map((element) => element.id) : selectedElementsAreImages ? selectedElements.map((element) => element.id) : [];
+      if (imageIds.length === 0) {
         return [];
       }
-      return [
-        ...this.props.imageContextMenuItems(
-          selectedElements.map((element) => element.id)
-        )
-      ];
+      return [...this.props.imageContextMenuItems(imageIds)];
     });
     __publicField(this, "handleWheel", withBatchedUpdates(
       (event) => {
@@ -37014,6 +36955,7 @@ var App = class _App extends React40.Component {
     const defaultAppState = getDefaultAppState();
     const {
       viewModeEnabled = false,
+      viewModeOnly = false,
       zenModeEnabled = false,
       gridModeEnabled = false,
       objectsSnapModeEnabled = false,
@@ -37027,7 +36969,8 @@ var App = class _App extends React40.Component {
       exportWithDarkMode: theme === THEME17.DARK,
       isLoading: true,
       ...this.getCanvasOffsets(),
-      viewModeEnabled,
+      viewModeEnabled: viewModeOnly || viewModeEnabled,
+      viewModeOnly,
       zenModeEnabled,
       objectsSnapModeEnabled,
       gridModeEnabled: gridModeEnabled ?? defaultAppState.gridModeEnabled,
@@ -37164,7 +37107,7 @@ var App = class _App extends React40.Component {
       );
       const elementsMap = this.scene.getNonDeletedElementsMap();
       const hoveredElement = getHoveredElementForBinding2(
-        pointFrom34(
+        pointFrom32(
           this.lastPointerMoveCoords.x,
           this.lastPointerMoveCoords.y
         ),
@@ -37259,7 +37202,7 @@ var App = class _App extends React40.Component {
       }
       const { x, y } = this.lastPointerMoveCoords;
       const hoveredElement2 = getHoveredElementForBinding2(
-        pointFrom34(x, y),
+        pointFrom32(x, y),
         this.scene.getNonDeletedElements(),
         this.scene.getNonDeletedElementsMap()
       );
@@ -37316,8 +37259,8 @@ var App = class _App extends React40.Component {
       );
       const startElement = startDragged2 ? hoveredElement : arrow.startBinding && elementsMap.get(arrow.startBinding.elementId);
       const endElement = endDragged2 ? hoveredElement : arrow.endBinding && elementsMap.get(arrow.endBinding.elementId);
-      const startBounds = startElement && getElementBounds5(startElement, elementsMap);
-      const endBounds = endElement && getElementBounds5(endElement, elementsMap);
+      const startBounds = startElement && getElementBounds4(startElement, elementsMap);
+      const endBounds = endElement && getElementBounds4(endElement, elementsMap);
       isOverlapping = !!(startBounds && endBounds && startElement.id !== endElement.id && doBoundsIntersect4(startBounds, endBounds));
     }
     const startDragged = this.state.selectedLinearElement?.selectedPointsIndices?.includes(0);
@@ -37376,7 +37319,7 @@ var App = class _App extends React40.Component {
     !oneOf(this.state.activeTool.type, ["laser", "selection", "lasso"])) {
       return false;
     }
-    const viewportClickStart_scenePoint = pointFrom34(
+    const viewportClickStart_scenePoint = pointFrom32(
       viewportCoordsToSceneCoords3(
         {
           clientX: this.lastPointerDownEvent.clientX,
@@ -37385,7 +37328,7 @@ var App = class _App extends React40.Component {
         this.state
       )
     );
-    const viewportClickEnd_scenePoint = pointFrom34(
+    const viewportClickEnd_scenePoint = pointFrom32(
       viewportCoordsToSceneCoords3(
         {
           clientX: this.lastPointerUpEvent.clientX,
@@ -38432,8 +38375,13 @@ var App = class _App extends React40.Component {
     if (isEraserActive(prevState) && !isEraserActive(this.state)) {
       this.eraserTrail.endPath();
     }
-    if (prevProps.viewModeEnabled !== this.props.viewModeEnabled) {
-      this.setState({ viewModeEnabled: !!this.props.viewModeEnabled });
+    if (prevProps.viewModeEnabled !== this.props.viewModeEnabled || prevProps.viewModeOnly !== this.props.viewModeOnly) {
+      const viewModeOnly = this.props.viewModeOnly ?? this.state.viewModeOnly;
+      const viewModeEnabled = viewModeOnly ? true : typeof this.props.viewModeEnabled !== "undefined" ? !!this.props.viewModeEnabled : this.state.viewModeEnabled;
+      this.setState({
+        viewModeEnabled,
+        viewModeOnly
+      });
     }
     if (prevState.viewModeEnabled !== this.state.viewModeEnabled) {
       this.addEventListeners();
@@ -38721,7 +38669,7 @@ var App = class _App extends React40.Component {
       this.scene.replaceAllElements([
         // Not sure why we include deleted elements as well hence using deleted elements map
         ...this.scene.getElementsIncludingDeleted().map((_element) => {
-          if (_element.id === element.id && isTextElement19(_element)) {
+          if (_element.id === element.id && isTextElement18(_element)) {
             return newElementWith10(_element, {
               originalText: nextOriginalText,
               isDeleted: isDeleted ?? _element.isDeleted,
@@ -38823,7 +38771,7 @@ var App = class _App extends React40.Component {
       return null;
     }
     const selectedElement = selectedElements[0];
-    if (isTextElement19(selectedElement)) {
+    if (isTextElement18(selectedElement)) {
       return selectedElement;
     }
     if (!container) {
@@ -38840,7 +38788,7 @@ var App = class _App extends React40.Component {
       return null;
     }
     const selectedElement = selectedElements[0];
-    if (isTextElement19(selectedElement)) {
+    if (isTextElement18(selectedElement)) {
       return null;
     }
     if (!isValidTextContainer(selectedElement)) {
@@ -38860,7 +38808,7 @@ var App = class _App extends React40.Component {
     const element = this.getElementAtPosition(x, y, {
       includeBoundTextElement: true
     });
-    if (element && isTextElement19(element) && !element.isDeleted) {
+    if (element && isTextElement18(element) && !element.isDeleted) {
       return element;
     }
     return null;
@@ -38886,7 +38834,7 @@ var App = class _App extends React40.Component {
       }
       const elementWithHighestZIndex = allHitElements[allHitElements.length - 1];
       return hitElementItself3({
-        point: pointFrom34(x, y),
+        point: pointFrom32(x, y),
         element: elementWithHighestZIndex,
         // when overlapping, we would like to be more precise
         // this also avoids the need to update past tests
@@ -38905,7 +38853,7 @@ var App = class _App extends React40.Component {
     const iframeLikes = [];
     const elementsMap = this.scene.getNonDeletedElementsMap();
     const elements = (opts?.includeBoundTextElement && opts?.includeLockedElements ? this.scene.getNonDeletedElements() : this.scene.getNonDeletedElements().filter(
-      (element) => (opts?.includeLockedElements || !element.locked) && (opts?.includeBoundTextElement || !(isTextElement19(element) && element.containerId))
+      (element) => (opts?.includeLockedElements || !element.locked) && (opts?.includeBoundTextElement || !(isTextElement18(element) && element.containerId))
     )).filter((el) => this.hitElement(x, y, el)).filter((element) => {
       const containingFrame = getContainingFrame3(element, elementsMap);
       return containingFrame && this.state.frameRendering.enabled && this.state.frameRendering.clip ? isCursorInFrame({ x, y }, containingFrame, elementsMap) : true;
@@ -38930,7 +38878,7 @@ var App = class _App extends React40.Component {
   hitElement(x, y, element, considerBoundingBox = true) {
     if (considerBoundingBox && this.state.selectedElementIds[element.id] && hasBoundingBox2([element], this.state, this.editorInterface)) {
       if (hitElementBoundingBox2(
-        pointFrom34(x, y),
+        pointFrom32(x, y),
         element,
         this.scene.getNonDeletedElementsMap(),
         this.getElementHitThreshold(element)
@@ -38939,7 +38887,7 @@ var App = class _App extends React40.Component {
       }
     }
     const hitBoundTextOfElement = hitElementBoundText(
-      pointFrom34(x, y),
+      pointFrom32(x, y),
       element,
       this.scene.getNonDeletedElementsMap()
     );
@@ -38947,7 +38895,7 @@ var App = class _App extends React40.Component {
       return true;
     }
     return hitElementItself3({
-      point: pointFrom34(x, y),
+      point: pointFrom32(x, y),
       element,
       threshold: this.getElementHitThreshold(element),
       elementsMap: this.scene.getNonDeletedElementsMap(),
@@ -38969,8 +38917,8 @@ var App = class _App extends React40.Component {
         elements[index],
         this.scene.getNonDeletedElementsMap()
       );
-      if (isArrowElement14(elements[index]) && hitElementItself3({
-        point: pointFrom34(x, y),
+      if (isArrowElement13(elements[index]) && hitElementItself3({
+        point: pointFrom32(x, y),
         element: elements[index],
         elementsMap: this.scene.getNonDeletedElementsMap(),
         threshold: this.getElementHitThreshold(elements[index])
@@ -39000,7 +38948,7 @@ var App = class _App extends React40.Component {
       let hoverPointIndex = -1;
       let segmentMidPointHoveredCoords = null;
       if (hitElementItself3({
-        point: pointFrom34(scenePointerX, scenePointerY),
+        point: pointFrom32(scenePointerX, scenePointerY),
         element,
         elementsMap,
         threshold: this.getElementHitThreshold(element)
@@ -39420,7 +39368,7 @@ var App = class _App extends React40.Component {
           }
           if (isBindingElement4(element)) {
             const hoveredElement = getHoveredElementForBinding2(
-              pointFrom34(pointerCoords.x, pointerCoords.y),
+              pointFrom32(pointerCoords.x, pointerCoords.y),
               this.scene.getNonDeletedElements(),
               elementsMap
             );
@@ -39517,24 +39465,24 @@ var App = class _App extends React40.Component {
                   croppingElement,
                   elementsMap
                 );
-                const topLeft = vectorFromPoint10(
-                  pointRotateRads23(
-                    pointFrom34(x1, y1),
-                    pointFrom34(cx, cy),
+                const topLeft = vectorFromPoint9(
+                  pointRotateRads21(
+                    pointFrom32(x1, y1),
+                    pointFrom32(cx, cy),
                     croppingElement.angle
                   )
                 );
-                const topRight = vectorFromPoint10(
-                  pointRotateRads23(
-                    pointFrom34(x2, y1),
-                    pointFrom34(cx, cy),
+                const topRight = vectorFromPoint9(
+                  pointRotateRads21(
+                    pointFrom32(x2, y1),
+                    pointFrom32(cx, cy),
                     croppingElement.angle
                   )
                 );
-                const bottomLeft = vectorFromPoint10(
-                  pointRotateRads23(
-                    pointFrom34(x1, y2),
-                    pointFrom34(cx, cy),
+                const bottomLeft = vectorFromPoint9(
+                  pointRotateRads21(
+                    pointFrom32(x1, y2),
+                    pointFrom32(cx, cy),
                     croppingElement.angle
                   )
                 );
@@ -39660,7 +39608,7 @@ var App = class _App extends React40.Component {
             );
             const elementsWithIndices = syncMovedIndices5(
               mappedNewSceneElements || mappedClonedElements,
-              arrayToMap30(duplicatedElements)
+              arrayToMap29(duplicatedElements)
             );
             flushSync2(() => {
               if (pointerDownState.hit.element) {
@@ -39755,7 +39703,7 @@ var App = class _App extends React40.Component {
             this.scene.mutateElement(
               newElement7,
               {
-                points: [...points, pointFrom34(dx, dy)],
+                points: [...points, pointFrom32(dx, dy)],
                 pressures
               },
               {
@@ -39767,7 +39715,7 @@ var App = class _App extends React40.Component {
               newElement: newElement7
             });
           }
-        } else if (isLinearElement12(newElement7) && !newElement7.isDeleted) {
+        } else if (isLinearElement11(newElement7) && !newElement7.isDeleted) {
           pointerDownState.drag.hasOccurred = true;
           const points = newElement7.points;
           invariant16(
@@ -39881,7 +39829,7 @@ var App = class _App extends React40.Component {
                 this
               ),
               // select linear element only when we haven't box-selected anything else
-              selectedLinearElement: elementsWithinSelection.length === 1 && isLinearElement12(elementsWithinSelection[0]) ? new LinearElementEditor11(
+              selectedLinearElement: elementsWithinSelection.length === 1 && isLinearElement11(elementsWithinSelection[0]) ? new LinearElementEditor11(
                 elementsWithinSelection[0],
                 this.scene.getNonDeletedElementsMap()
               ) : null,
@@ -40054,7 +40002,7 @@ var App = class _App extends React40.Component {
             sceneCoords
           });
         }
-        if (this.state.newElement && this.state.multiElement && isLinearElement12(this.state.newElement) && this.state.selectedLinearElement) {
+        if (this.state.newElement && this.state.multiElement && isLinearElement11(this.state.newElement) && this.state.selectedLinearElement) {
           const { multiElement: multiElement2 } = this.state;
           this.setState({
             selectedLinearElement: {
@@ -40101,13 +40049,13 @@ var App = class _App extends React40.Component {
         }
         const pressures = newElement7.simulatePressure ? [] : [...newElement7.pressures, childEvent.pressure];
         this.scene.mutateElement(newElement7, {
-          points: [...points, pointFrom34(dx, dy)],
+          points: [...points, pointFrom32(dx, dy)],
           pressures
         });
         this.actionManager.executeAction(actionFinalize);
         return;
       }
-      if (isLinearElement12(newElement7)) {
+      if (isLinearElement11(newElement7)) {
         if (newElement7.points.length > 1 && newElement7.points[1][0] !== 0 && newElement7.points[1][1] !== 0) {
           this.store.scheduleCapture();
         }
@@ -40116,8 +40064,8 @@ var App = class _App extends React40.Component {
           this.state
         );
         const dragDistance = pointDistance9(
-          pointFrom34(pointerCoords.x, pointerCoords.y),
-          pointFrom34(pointerDownState.origin.x, pointerDownState.origin.y)
+          pointFrom32(pointerCoords.x, pointerCoords.y),
+          pointFrom32(pointerDownState.origin.x, pointerDownState.origin.y)
         ) * this.state.zoom.value;
         if ((!pointerDownState.drag.hasOccurred || dragDistance < MINIMUM_ARROW_SIZE) && newElement7 && !multiElement) {
           if (this.editorInterface.isTouchScreen) {
@@ -40130,8 +40078,8 @@ var App = class _App extends React40.Component {
               {
                 x: newElement7.x - FIXED_DELTA_X / 2,
                 points: [
-                  pointFrom34(0, 0),
-                  pointFrom34(FIXED_DELTA_X, 0)
+                  pointFrom32(0, 0),
+                  pointFrom32(FIXED_DELTA_X, 0)
                 ]
               },
               { informMutation: false, isDragging: false }
@@ -40143,7 +40091,7 @@ var App = class _App extends React40.Component {
             this.scene.mutateElement(
               newElement7,
               {
-                points: [newElement7.points[0], pointFrom34(dx, dy)]
+                points: [newElement7.points[0], pointFrom32(dx, dy)]
               },
               { informMutation: false, isDragging: false }
             );
@@ -40153,7 +40101,7 @@ var App = class _App extends React40.Component {
             });
           }
         } else if (pointerDownState.drag.hasOccurred && !multiElement) {
-          if (isLinearElement12(newElement7)) {
+          if (isLinearElement11(newElement7)) {
             this.actionManager.executeAction(actionFinalize, "ui", {
               event: childEvent,
               sceneCoords
@@ -40188,7 +40136,7 @@ var App = class _App extends React40.Component {
         }
         return;
       }
-      if (isTextElement19(newElement7)) {
+      if (isTextElement18(newElement7)) {
         const minWidth = getMinTextElementWidth(
           getFontString11({
             fontSize: newElement7.fontSize,
@@ -40370,7 +40318,7 @@ var App = class _App extends React40.Component {
         this.scene.replaceAllElements(nextElements);
       }
       const hitElement = pointerDownState.hit.element;
-      if (this.state.selectedLinearElement?.elementId !== hitElement?.id && isLinearElement12(hitElement)) {
+      if (this.state.selectedLinearElement?.elementId !== hitElement?.id && isLinearElement11(hitElement)) {
         const selectedElements = this.scene.getSelectedElements(this.state);
         if (selectedElements.length === 1) {
           this.setState({
@@ -40395,8 +40343,8 @@ var App = class _App extends React40.Component {
       if (isEraserActive(this.state) && pointerStart && pointerEnd) {
         this.eraserTrail.endPath();
         const draggedDistance = pointDistance9(
-          pointFrom34(pointerStart.clientX, pointerStart.clientY),
-          pointFrom34(pointerEnd.clientX, pointerEnd.clientY)
+          pointFrom32(pointerStart.clientX, pointerStart.clientY),
+          pointFrom32(pointerEnd.clientX, pointerEnd.clientY)
         );
         if (draggedDistance === 0) {
           const scenePointer = viewportCoordsToSceneCoords3(
@@ -40471,7 +40419,7 @@ var App = class _App extends React40.Component {
                     this
                   ),
                   // set selectedLinearElement only if thats the only element selected
-                  selectedLinearElement: newSelectedElements.length === 1 && isLinearElement12(newSelectedElements[0]) ? new LinearElementEditor11(
+                  selectedLinearElement: newSelectedElements.length === 1 && isLinearElement11(newSelectedElements[0]) ? new LinearElementEditor11(
                     newSelectedElements[0],
                     this.scene.getNonDeletedElementsMap()
                   ) : prevState.selectedLinearElement
@@ -40525,7 +40473,7 @@ var App = class _App extends React40.Component {
               prevState,
               this
             ),
-            selectedLinearElement: isLinearElement12(hitElement) && // Don't set `selectedLinearElement` if its same as the hitElement, this is mainly to prevent resetting the `hoverPointIndex` to -1.
+            selectedLinearElement: isLinearElement11(hitElement) && // Don't set `selectedLinearElement` if its same as the hitElement, this is mainly to prevent resetting the `hoverPointIndex` to -1.
             // Future we should update the API to take care of setting the correct `hoverPointIndex` when initialized
             prevState.selectedLinearElement?.elementId !== hitElement.id ? new LinearElementEditor11(
               hitElement,
@@ -40542,7 +40490,7 @@ var App = class _App extends React40.Component {
         !this.state.isResizing && // only hitting the bounding box of the previous hit element
         (hitElement && hitElementBoundingBoxOnly(
           {
-            point: pointFrom34(
+            point: pointFrom32(
               pointerDownState.origin.x,
               pointerDownState.origin.y
             ),
@@ -40568,7 +40516,7 @@ var App = class _App extends React40.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[KEYS50.CTRL_OR_CMD] && !childEvent.altKey && childEvent.pointerType !== "touch" && hitElement && (isTextElement19(hitElement) && this.state.selectedElementIds[hitElement.id] && this.scene.getSelectedElements(this.state).length === 1 || selectedTextEditingContainer)) {
+      if (activeTool.type === this.state.preferredSelectionTool.type && !this.state.editingTextElement && !pointerDownState.drag.hasOccurred && !pointerDownState.hit.wasAddedToSelection && !childEvent.shiftKey && !childEvent[KEYS50.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,
@@ -40596,7 +40544,7 @@ var App = class _App extends React40.Component {
         this.store.scheduleCapture();
       }
       if (pointerDownState.drag.hasOccurred && !this.state.selectedLinearElement || isResizing || isRotating || isCropping) {
-        const linearElements = this.scene.getSelectedElements(this.state).filter(isArrowElement14);
+        const linearElements = this.scene.getSelectedElements(this.state).filter(isArrowElement13);
         bindOrUnbindBindingElements2(linearElements, this.scene, this.state);
       }
       if (activeTool.type === "laser") {
@@ -41198,7 +41146,7 @@ import { isInvisiblySmallElement as isInvisiblySmallElement4 } from "@excalidraw
 
 // data/reconcile.ts
 import throttle3 from "lodash.throttle";
-import { arrayToMap as arrayToMap31, isDevEnv as isDevEnv10, isTestEnv as isTestEnv6 } from "@excalidraw/common";
+import { arrayToMap as arrayToMap30, isDevEnv as isDevEnv10, isTestEnv as isTestEnv6 } from "@excalidraw/common";
 import {
   orderByFractionalIndex as orderByFractionalIndex2,
   syncInvalidIndices as syncInvalidIndices2,
@@ -41235,7 +41183,7 @@ var validateIndicesThrottled = throttle3(
   { leading: true, trailing: false }
 );
 var reconcileElements = (localElements, remoteElements, localAppState) => {
-  const localElementsMap = arrayToMap31(localElements);
+  const localElementsMap = arrayToMap30(localElements);
   const reconciledElements = [];
   const added = /* @__PURE__ */ new Set();
   for (const remoteElement of remoteElements) {
@@ -41268,7 +41216,7 @@ var reconcileElements = (localElements, remoteElements, localAppState) => {
 };
 
 // index.tsx
-import { isLinearElement as isLinearElement13 } from "@excalidraw/element";
+import { isLinearElement as isLinearElement12 } from "@excalidraw/element";
 import {
   FONT_FAMILY as FONT_FAMILY7,
   THEME as THEME18,
@@ -41293,6 +41241,7 @@ import {
   getVisibleSceneBounds as getVisibleSceneBounds2,
   convertToExcalidrawElements as convertToExcalidrawElements2
 } from "@excalidraw/element";
+import { elementsOverlappingBBox as elementsOverlappingBBox3 } from "@excalidraw/element";
 
 // components/DiagramToCodePlugin/DiagramToCodePlugin.tsx
 import { useLayoutEffect as useLayoutEffect9 } from "react";
@@ -41321,6 +41270,7 @@ var ExcalidrawBase = (props) => {
   const {
     onExport,
     onChange,
+    onThemeChange,
     onIncrement,
     initialData,
     onExcalidrawAPI,
@@ -41333,6 +41283,7 @@ var ExcalidrawBase = (props) => {
     renderTopRightUI,
     langCode = defaultLang.code,
     viewModeEnabled,
+    viewModeOnly,
     zenModeEnabled,
     gridModeEnabled,
     theme,
@@ -41377,7 +41328,7 @@ var ExcalidrawBase = (props) => {
   if (canvasActions?.export) {
     UIOptions.canvasActions.export.saveFileToDisk = canvasActions.export?.saveFileToDisk ?? DEFAULT_UI_OPTIONS.canvasActions.export.saveFileToDisk;
   }
-  if (UIOptions.canvasActions.toggleTheme === null && typeof theme === "undefined") {
+  if (UIOptions.canvasActions.toggleTheme === null && (theme == null || onThemeChange)) {
     UIOptions.canvasActions.toggleTheme = true;
   }
   const normalizedImageOptions = {
@@ -41416,6 +41367,7 @@ var ExcalidrawBase = (props) => {
     {
       onExport,
       onChange,
+      onThemeChange,
       onIncrement,
       initialData,
       onExcalidrawAPI: handleExcalidrawAPI,
@@ -41428,6 +41380,7 @@ var ExcalidrawBase = (props) => {
       renderTopRightUI,
       langCode,
       viewModeEnabled,
+      viewModeOnly,
       zenModeEnabled,
       gridModeEnabled,
       theme,
@@ -41529,11 +41482,11 @@ export {
   THEME18 as THEME,
   UserIdleState2 as UserIdleState,
   WelcomeScreen_default as WelcomeScreen,
+  applyDarkModeFilter5 as applyDarkModeFilter,
   bumpVersion3 as bumpVersion,
   convertToExcalidrawElements2 as convertToExcalidrawElements,
   defaultLang,
-  elementPartiallyOverlapsWithOrContainsBBox,
-  elementsOverlappingBBox,
+  elementsOverlappingBBox3 as elementsOverlappingBBox,
   exportToBlob,
   exportToCanvas2 as exportToCanvas,
   exportToClipboard,
@@ -41547,10 +41500,9 @@ export {
   getVisibleSceneBounds2 as getVisibleSceneBounds,
   hashElementsVersion,
   hashString,
-  isElementInsideBBox,
   isElementLink3 as isElementLink,
   isInvisiblySmallElement4 as isInvisiblySmallElement,
-  isLinearElement13 as isLinearElement,
+  isLinearElement12 as isLinearElement,
   isSpreadsheetValidForChartType,
   languages,
   loadFromBlob,