@excalidraw/element 0.18.0-c65b684e9 → 0.18.0-d1f3982

package/dist/dev/index.js

@@ -2261,17 +2261,17 @@ var rough_default = {
 // src/bounds.ts
 import {
   arrayToMap as arrayToMap6,
-  invariant as invariant7,
+  invariant as invariant8,
   rescalePoints,
   sizeOf
 } from "@excalidraw/common";
 import {
   degreesToRadians,
-  lineSegment as lineSegment5,
+  lineSegment as lineSegment6,
   pointDistance as pointDistance7,
-  pointFrom as pointFrom12,
+  pointFrom as pointFrom14,
   pointFromArray as pointFromArray3,
-  pointRotateRads as pointRotateRads10
+  pointRotateRads as pointRotateRads12
 } from "@excalidraw/math";
 
 // ../utils/src/shape.ts
@@ -2448,9 +2448,9 @@ var getClosedCurveShape = (element, roughShape, startingPoint = pointFrom(0, 0),
 // src/shape.ts
 init_define_import_meta_env();
 import {
-  pointFrom as pointFrom11,
+  pointFrom as pointFrom13,
   pointDistance as pointDistance6,
-  pointRotateRads as pointRotateRads9
+  pointRotateRads as pointRotateRads11
 } from "@excalidraw/math";
 import {
   ROUGHNESS,
@@ -2627,7 +2627,12 @@ function ae(e, t = {}) {
 }
 
 // src/renderElement.ts
-import { isRightAngleRads } from "@excalidraw/math";
+import {
+  isRightAngleRads,
+  lineSegment as lineSegment5,
+  pointFrom as pointFrom12,
+  pointRotateRads as pointRotateRads10
+} from "@excalidraw/math";
 import {
   BOUND_TEXT_PADDING as BOUND_TEXT_PADDING3,
   DEFAULT_REDUCED_GLOBAL_ALPHA,
@@ -2638,7 +2643,8 @@ import {
   distance as distance2,
   getFontString as getFontString3,
   isRTL,
-  getVerticalOffset
+  getVerticalOffset,
+  invariant as invariant7
 } from "@excalidraw/common";
 
 // src/cropElement.ts
@@ -3103,8 +3109,8 @@ var getFlipAdjustedCropPosition = (element, natural = false) => {
 init_define_import_meta_env();
 import {
   pointCenter as pointCenter2,
-  pointFrom as pointFrom8,
-  pointRotateRads as pointRotateRads7,
+  pointFrom as pointFrom9,
+  pointRotateRads as pointRotateRads8,
   pointsEqual as pointsEqual6,
   pointDistance as pointDistance5,
   vectorFromPoint as vectorFromPoint7,
@@ -3138,8 +3144,8 @@ import {
 } from "@excalidraw/common";
 import {
   lineSegment as lineSegment4,
-  pointFrom as pointFrom7,
-  pointRotateRads as pointRotateRads6,
+  pointFrom as pointFrom8,
+  pointRotateRads as pointRotateRads7,
   vectorFromPoint as vectorFromPoint6,
   pointDistanceSq,
   clamp as clamp3,
@@ -3161,9 +3167,9 @@ import {
   isPointWithinBounds,
   lineSegment as lineSegment3,
   lineSegmentIntersectionPoints,
-  pointFrom as pointFrom4,
+  pointFrom as pointFrom5,
   pointFromVector as pointFromVector3,
-  pointRotateRads as pointRotateRads4,
+  pointRotateRads as pointRotateRads5,
   pointsEqual as pointsEqual2,
   vectorFromPoint as vectorFromPoint3,
   vectorNormalize as vectorNormalize2,
@@ -3711,6 +3717,7 @@ import {
   isProdEnv,
   invariant as invariant2
 } from "@excalidraw/common";
+import { pointFrom as pointFrom4, pointRotateRads as pointRotateRads3 } from "@excalidraw/math";
 
 // src/containerCache.ts
 init_define_import_meta_env();
@@ -4390,6 +4397,22 @@ var computeBoundTextPosition = (container, boundTextElement, elementsMap) => {
   } else {
     x = containerCoords.x + (maxContainerWidth / 2 - boundTextElement.width / 2);
   }
+  const angle = container.angle ?? 0;
+  if (angle !== 0) {
+    const contentCenter = pointFrom4(
+      containerCoords.x + maxContainerWidth / 2,
+      containerCoords.y + maxContainerHeight / 2
+    );
+    const textCenter = pointFrom4(
+      x + boundTextElement.width / 2,
+      y + boundTextElement.height / 2
+    );
+    const [rx, ry] = pointRotateRads3(textCenter, contentCenter, angle);
+    return {
+      x: rx - boundTextElement.width / 2,
+      y: ry - boundTextElement.height / 2
+    };
+  }
   return { x, y };
 };
 var getBoundTextElementId = (container) => {
@@ -4573,7 +4596,7 @@ init_define_import_meta_env();
 import {
   curvePointDistance,
   distanceToLineSegment,
-  pointRotateRads as pointRotateRads3
+  pointRotateRads as pointRotateRads4
 } from "@excalidraw/math";
 import { ellipse as ellipse2, ellipseDistanceFromPoint } from "@excalidraw/math/ellipse";
 var distanceToElement = (element, elementsMap, p) => {
@@ -4599,7 +4622,7 @@ var distanceToElement = (element, elementsMap, p) => {
 };
 var distanceToRectanguloidElement = (element, elementsMap, p) => {
   const center = elementCenterPoint(element, elementsMap);
-  const rotatedPoint = pointRotateRads3(p, center, -element.angle);
+  const rotatedPoint = pointRotateRads4(p, center, -element.angle);
   const [sides, corners] = deconstructRectanguloidElement(element);
   return Math.min(
     ...sides.map((s) => distanceToLineSegment(rotatedPoint, s)),
@@ -4608,7 +4631,7 @@ var distanceToRectanguloidElement = (element, elementsMap, p) => {
 };
 var distanceToDiamondElement = (element, elementsMap, p) => {
   const center = elementCenterPoint(element, elementsMap);
-  const rotatedPoint = pointRotateRads3(p, center, -element.angle);
+  const rotatedPoint = pointRotateRads4(p, center, -element.angle);
   const [sides, curves] = deconstructDiamondElement(element);
   return Math.min(
     ...sides.map((s) => distanceToLineSegment(rotatedPoint, s)),
@@ -4619,7 +4642,7 @@ var distanceToEllipseElement = (element, elementsMap, p) => {
   const center = elementCenterPoint(element, elementsMap);
   return ellipseDistanceFromPoint(
     // Instead of rotating the ellipse, rotate the point to the inverse angle
-    pointRotateRads3(p, center, -element.angle),
+    pointRotateRads4(p, center, -element.angle),
     ellipse2(center, element.width / 2, element.height / 2)
   );
 };
@@ -4653,22 +4676,22 @@ var hitElementItself = ({
   frameNameBound = null
 }) => {
   const hitFrameName = frameNameBound ? isPointWithinBounds(
-    pointFrom4(frameNameBound.x - threshold, frameNameBound.y - threshold),
+    pointFrom5(frameNameBound.x - threshold, frameNameBound.y - threshold),
     point,
-    pointFrom4(
+    pointFrom5(
       frameNameBound.x + frameNameBound.width + threshold,
       frameNameBound.y + frameNameBound.height + threshold
     )
   ) : false;
   const bounds = getElementBounds(element, elementsMap, true);
   const hitBounds = isPointWithinBounds(
-    pointFrom4(bounds[0] - threshold, bounds[1] - threshold),
-    pointRotateRads4(
+    pointFrom5(bounds[0] - threshold, bounds[1] - threshold),
+    pointRotateRads5(
       point,
       getCenterForBounds(bounds),
       -element.angle
     ),
-    pointFrom4(bounds[2] + threshold, bounds[3] + threshold)
+    pointFrom5(bounds[2] + threshold, bounds[3] + threshold)
   );
   if (!hitBounds && !hitFrameName) {
     return false;
@@ -4686,7 +4709,7 @@ var hitElementBoundingBox = (point, element, elementsMap, tolerance = 0) => {
   y1 -= tolerance;
   x2 += tolerance;
   y2 += tolerance;
-  return isPointWithinBounds(pointFrom4(x1, y1), point, pointFrom4(x2, y2));
+  return isPointWithinBounds(pointFrom5(x1, y1), point, pointFrom5(x2, y2));
 };
 var hitElementBoundingBoxOnly = (hitArgs, elementsMap) => !hitElementItself(hitArgs) && // bound text is considered part of the element (even if it's outside the bounding box)
 !hitElementBoundText(hitArgs.point, hitArgs.element, elementsMap) && hitElementBoundingBox(hitArgs.point, hitArgs.element, elementsMap);
@@ -4770,7 +4793,7 @@ var curveIntersections = (curves, segment, intersections, center, angle, onlyFir
     const hits = curveIntersectLineSegment(c, segment);
     if (hits.length > 0) {
       for (const j of hits) {
-        intersections.push(pointRotateRads4(j, center, angle));
+        intersections.push(pointRotateRads5(j, center, angle));
       }
       if (onlyFirst) {
         return intersections;
@@ -4783,7 +4806,7 @@ var lineIntersections = (lines, segment, intersections, center, angle, onlyFirst
   for (const l2 of lines) {
     const intersection = lineSegmentIntersectionPoints(l2, segment);
     if (intersection) {
-      intersections.push(pointRotateRads4(intersection, center, angle));
+      intersections.push(pointRotateRads5(intersection, center, angle));
       if (onlyFirst) {
         return intersections;
       }
@@ -4826,12 +4849,12 @@ var intersectLinearOrFreeDrawWithLineSegment = (element, segment, onlyFirst = fa
 };
 var intersectRectanguloidWithLineSegment = (element, elementsMap, segment, offset = 0, onlyFirst = false) => {
   const center = elementCenterPoint(element, elementsMap);
-  const rotatedA = pointRotateRads4(
+  const rotatedA = pointRotateRads5(
     segment[0],
     center,
     -element.angle
   );
-  const rotatedB = pointRotateRads4(
+  const rotatedB = pointRotateRads5(
     segment[1],
     center,
     -element.angle
@@ -4862,8 +4885,8 @@ var intersectRectanguloidWithLineSegment = (element, elementsMap, segment, offse
 };
 var intersectDiamondWithLineSegment = (element, elementsMap, l2, offset = 0, onlyFirst = false) => {
   const center = elementCenterPoint(element, elementsMap);
-  const rotatedA = pointRotateRads4(l2[0], center, -element.angle);
-  const rotatedB = pointRotateRads4(l2[1], center, -element.angle);
+  const rotatedA = pointRotateRads5(l2[0], center, -element.angle);
+  const rotatedB = pointRotateRads5(l2[1], center, -element.angle);
   const rotatedIntersector = lineSegment3(rotatedA, rotatedB);
   const [sides, corners] = deconstructDiamondElement(element, offset);
   const intersections = [];
@@ -4890,12 +4913,12 @@ var intersectDiamondWithLineSegment = (element, elementsMap, l2, offset = 0, onl
 };
 var intersectEllipseWithLineSegment = (element, elementsMap, l2, offset = 0) => {
   const center = elementCenterPoint(element, elementsMap);
-  const rotatedA = pointRotateRads4(l2[0], center, -element.angle);
-  const rotatedB = pointRotateRads4(l2[1], center, -element.angle);
+  const rotatedA = pointRotateRads5(l2[0], center, -element.angle);
+  const rotatedB = pointRotateRads5(l2[1], center, -element.angle);
   return ellipseSegmentInterceptPoints(
     ellipse3(center, element.width / 2 + offset, element.height / 2 + offset),
     lineSegment3(rotatedA, rotatedB)
-  ).map((p) => pointRotateRads4(p, center, element.angle));
+  ).map((p) => pointRotateRads5(p, center, element.angle));
 };
 var isPointOnElementOutline = (point, element, elementsMap, tolerance = 1) => distanceToElement(element, elementsMap, point) <= tolerance;
 var isPointInElement = (point, element, elementsMap) => {
@@ -4903,10 +4926,10 @@ var isPointInElement = (point, element, elementsMap) => {
     return false;
   }
   const [x1, y1, x2, y2] = getElementBounds(element, elementsMap);
-  if (!isPointWithinBounds(pointFrom4(x1, y1), point, pointFrom4(x2, y2))) {
+  if (!isPointWithinBounds(pointFrom5(x1, y1), point, pointFrom5(x2, y2))) {
     return false;
   }
-  const center = pointFrom4((x1 + x2) / 2, (y1 + y2) / 2);
+  const center = pointFrom5((x1 + x2) / 2, (y1 + y2) / 2);
   const otherPoint = pointFromVector3(
     vectorScale3(
       vectorNormalize2(vectorFromPoint3(point, center, 0.1)),
@@ -4927,9 +4950,9 @@ var isPointInElement = (point, element, elementsMap) => {
 init_define_import_meta_env();
 import { invariant as invariant3, isDevEnv as isDevEnv2, isTestEnv as isTestEnv3 } from "@excalidraw/common";
 import {
-  pointFrom as pointFrom5,
+  pointFrom as pointFrom6,
   pointFromVector as pointFromVector4,
-  pointRotateRads as pointRotateRads5,
+  pointRotateRads as pointRotateRads6,
   pointScaleFromOrigin,
   pointsEqual as pointsEqual3,
   triangleIncludesPoint,
@@ -4975,8 +4998,8 @@ var headingForPointFromDiamondElement = (element, aabb, point) => {
   const top = pointFromVector4(
     vectorScale4(
       vectorFromPoint4(
-        pointRotateRads5(
-          pointFrom5(element.x + element.width / 2, element.y),
+        pointRotateRads6(
+          pointFrom6(element.x + element.width / 2, element.y),
           midPoint,
           element.angle
         ),
@@ -4989,8 +5012,8 @@ var headingForPointFromDiamondElement = (element, aabb, point) => {
   const right = pointFromVector4(
     vectorScale4(
       vectorFromPoint4(
-        pointRotateRads5(
-          pointFrom5(
+        pointRotateRads6(
+          pointFrom6(
             element.x + element.width,
             element.y + element.height / 2
           ),
@@ -5006,8 +5029,8 @@ var headingForPointFromDiamondElement = (element, aabb, point) => {
   const bottom = pointFromVector4(
     vectorScale4(
       vectorFromPoint4(
-        pointRotateRads5(
-          pointFrom5(
+        pointRotateRads6(
+          pointFrom6(
             element.x + element.width / 2,
             element.y + element.height
           ),
@@ -5023,8 +5046,8 @@ var headingForPointFromDiamondElement = (element, aabb, point) => {
   const left = pointFromVector4(
     vectorScale4(
       vectorFromPoint4(
-        pointRotateRads5(
-          pointFrom5(element.x, element.y + element.height / 2),
+        pointRotateRads6(
+          pointFrom6(element.x, element.y + element.height / 2),
           midPoint,
           element.angle
         ),
@@ -5090,22 +5113,22 @@ var headingForPointFromElement = (element, aabb, p) => {
     return headingForPointFromDiamondElement(element, aabb, p);
   }
   const topLeft = pointScaleFromOrigin(
-    pointFrom5(aabb[0], aabb[1]),
+    pointFrom6(aabb[0], aabb[1]),
     midPoint,
     SEARCH_CONE_MULTIPLIER
   );
   const topRight = pointScaleFromOrigin(
-    pointFrom5(aabb[2], aabb[1]),
+    pointFrom6(aabb[2], aabb[1]),
     midPoint,
     SEARCH_CONE_MULTIPLIER
   );
   const bottomLeft = pointScaleFromOrigin(
-    pointFrom5(aabb[0], aabb[3]),
+    pointFrom6(aabb[0], aabb[3]),
     midPoint,
     SEARCH_CONE_MULTIPLIER
   );
   const bottomRight = pointScaleFromOrigin(
-    pointFrom5(aabb[2], aabb[3]),
+    pointFrom6(aabb[2], aabb[3]),
     midPoint,
     SEARCH_CONE_MULTIPLIER
   );
@@ -5138,7 +5161,7 @@ init_define_import_meta_env();
 import {
   clamp as clamp2,
   pointDistance as pointDistance3,
-  pointFrom as pointFrom6,
+  pointFrom as pointFrom7,
   pointScaleFromOrigin as pointScaleFromOrigin2,
   pointsEqual as pointsEqual4,
   pointTranslate,
@@ -5162,7 +5185,7 @@ var handleSegmentRenormalization = (arrow, elementsMap) => {
   const nextFixedSegments = arrow.fixedSegments ? arrow.fixedSegments.slice() : null;
   if (nextFixedSegments) {
     const _nextPoints = [];
-    arrow.points.map((p) => pointFrom6(arrow.x + p[0], arrow.y + p[1])).forEach((p, i, points) => {
+    arrow.points.map((p) => pointFrom7(arrow.x + p[0], arrow.y + p[1])).forEach((p, i, points) => {
       if (i < 2) {
         return _nextPoints.push(p);
       }
@@ -5180,7 +5203,7 @@ var handleSegmentRenormalization = (arrow, elementsMap) => {
         ) ?? -1;
         const segmentIdx = nextFixedSegments?.findIndex((segment) => segment.index === i) ?? -1;
         if (segmentIdx !== -1) {
-          nextFixedSegments[segmentIdx].start = pointFrom6(
+          nextFixedSegments[segmentIdx].start = pointFrom7(
             points[i - 2][0] - arrow.x,
             points[i - 2][1] - arrow.y
           );
@@ -5222,7 +5245,7 @@ var handleSegmentRenormalization = (arrow, elementsMap) => {
         });
         const isHorizontal = headingForPointIsHorizontal(p, points[i - 1]);
         return nextPoints.push(
-          pointFrom6(
+          pointFrom7(
             !isHorizontal ? points[i - 2][0] : p[0],
             isHorizontal ? points[i - 2][1] : p[1]
           )
@@ -5243,7 +5266,7 @@ var handleSegmentRenormalization = (arrow, elementsMap) => {
                 arrow,
                 elementsMap,
                 nextPoints.map(
-                  (p) => pointFrom6(p[0] - arrow.x, p[1] - arrow.y)
+                  (p) => pointFrom7(p[0] - arrow.x, p[1] - arrow.y)
                 )
               )
             ) ?? []
@@ -5312,8 +5335,8 @@ var handleSegmentRelease = (arrow, fixedSegments, elementsMap) => {
     },
     elementsMap,
     [
-      pointFrom6(0, 0),
-      pointFrom6(
+      pointFrom7(0, 0),
+      pointFrom7(
         arrow.x + (nextSegment?.start[0] ?? arrow.points[arrow.points.length - 1][0]) - x,
         arrow.y + (nextSegment?.start[1] ?? arrow.points[arrow.points.length - 1][1]) - y
       )
@@ -5338,11 +5361,16 @@ var handleSegmentRelease = (arrow, fixedSegments, elementsMap) => {
     null,
     null
   );
+  if (!restoredPoints || restoredPoints.length < 2) {
+    throw new Error(
+      "Property 'points' is required in the update returned by normalizeArrowElementUpdate()"
+    );
+  }
   const nextPoints = [];
   if (prevSegment) {
     for (let i = 0; i < prevSegment.index; i++) {
       nextPoints.push(
-        pointFrom6(
+        pointFrom7(
           arrow.x + arrow.points[i][0],
           arrow.y + arrow.points[i][1]
         )
@@ -5351,7 +5379,7 @@ var handleSegmentRelease = (arrow, fixedSegments, elementsMap) => {
   }
   restoredPoints.forEach((p) => {
     nextPoints.push(
-      pointFrom6(
+      pointFrom7(
         arrow.x + (prevSegment ? prevSegment.end[0] : 0) + p[0],
         arrow.y + (prevSegment ? prevSegment.end[1] : 0) + p[1]
       )
@@ -5360,7 +5388,7 @@ var handleSegmentRelease = (arrow, fixedSegments, elementsMap) => {
   if (nextSegment) {
     for (let i = nextSegment.index; i < arrow.points.length; i++) {
       nextPoints.push(
-        pointFrom6(
+        pointFrom7(
           arrow.x + arrow.points[i][0],
           arrow.y + arrow.points[i][1]
         )
@@ -5431,7 +5459,7 @@ var handleSegmentMove = (arrow, fixedSegments, startHeading, endHeading, hovered
     const startIsHorizontal = headingIsHorizontal(startHeading);
     const startIsPositive = startIsHorizontal ? compareHeading(startHeading, HEADING_RIGHT) : compareHeading(startHeading, HEADING_DOWN);
     const padding = startIsPositive ? segmentIsTooShort ? segmentLength / 2 : BASE_PADDING : segmentIsTooShort ? -segmentLength / 2 : -BASE_PADDING;
-    fixedSegments[activelyModifiedSegmentIdx].start = pointFrom6(
+    fixedSegments[activelyModifiedSegmentIdx].start = pointFrom7(
       fixedSegments[activelyModifiedSegmentIdx].start[0] + (startIsHorizontal ? padding : 0),
       fixedSegments[activelyModifiedSegmentIdx].start[1] + (!startIsHorizontal ? padding : 0)
     );
@@ -5440,24 +5468,24 @@ var handleSegmentMove = (arrow, fixedSegments, startHeading, endHeading, hovered
     const endIsHorizontal = headingIsHorizontal(endHeading);
     const endIsPositive = endIsHorizontal ? compareHeading(endHeading, HEADING_RIGHT) : compareHeading(endHeading, HEADING_DOWN);
     const padding = endIsPositive ? segmentIsTooShort ? segmentLength / 2 : BASE_PADDING : segmentIsTooShort ? -segmentLength / 2 : -BASE_PADDING;
-    fixedSegments[activelyModifiedSegmentIdx].end = pointFrom6(
+    fixedSegments[activelyModifiedSegmentIdx].end = pointFrom7(
       fixedSegments[activelyModifiedSegmentIdx].end[0] + (endIsHorizontal ? padding : 0),
       fixedSegments[activelyModifiedSegmentIdx].end[1] + (!endIsHorizontal ? padding : 0)
     );
   }
   const nextFixedSegments = fixedSegments.map((segment) => ({
     ...segment,
-    start: pointFrom6(
+    start: pointFrom7(
       arrow.x + segment.start[0],
       arrow.y + segment.start[1]
     ),
-    end: pointFrom6(
+    end: pointFrom7(
       arrow.x + segment.end[0],
       arrow.y + segment.end[1]
     )
   }));
   const newPoints = arrow.points.map(
-    (p, i) => pointFrom6(arrow.x + p[0], arrow.y + p[1])
+    (p, i) => pointFrom7(arrow.x + p[0], arrow.y + p[1])
   );
   const startIdx = nextFixedSegments[activelyModifiedSegmentIdx].index - 1;
   const endIdx = nextFixedSegments[activelyModifiedSegmentIdx].index;
@@ -5503,14 +5531,14 @@ var handleSegmentMove = (arrow, fixedSegments, startHeading, endHeading, hovered
   if (firstSegmentIdx === -1 && startIdx === 0) {
     const startIsHorizontal = hoveredStartElement ? headingIsHorizontal(startHeading) : headingForPointIsHorizontal(newPoints[1], newPoints[0]);
     newPoints.unshift(
-      pointFrom6(
+      pointFrom7(
         startIsHorizontal ? start[0] : arrow.x + arrow.points[0][0],
         !startIsHorizontal ? start[1] : arrow.y + arrow.points[0][1]
       )
     );
     if (hoveredStartElement) {
       newPoints.unshift(
-        pointFrom6(
+        pointFrom7(
           arrow.x + arrow.points[0][0],
           arrow.y + arrow.points[0][1]
         )
@@ -5523,14 +5551,14 @@ var handleSegmentMove = (arrow, fixedSegments, startHeading, endHeading, hovered
   if (lastSegmentIdx === -1 && endIdx === arrow.points.length - 1) {
     const endIsHorizontal = headingIsHorizontal(endHeading);
     newPoints.push(
-      pointFrom6(
+      pointFrom7(
         endIsHorizontal ? end[0] : arrow.x + arrow.points[arrow.points.length - 1][0],
         !endIsHorizontal ? end[1] : arrow.y + arrow.points[arrow.points.length - 1][1]
       )
     );
     if (hoveredEndElement) {
       newPoints.push(
-        pointFrom6(
+        pointFrom7(
           arrow.x + arrow.points[arrow.points.length - 1][0],
           arrow.y + arrow.points[arrow.points.length - 1][1]
         )
@@ -5541,11 +5569,11 @@ var handleSegmentMove = (arrow, fixedSegments, startHeading, endHeading, hovered
     newPoints,
     nextFixedSegments.map((segment) => ({
       ...segment,
-      start: pointFrom6(
+      start: pointFrom7(
         segment.start[0] - arrow.x,
         segment.start[1] - arrow.y
       ),
-      end: pointFrom6(
+      end: pointFrom7(
         segment.end[0] - arrow.x,
         segment.end[1] - arrow.y
       )
@@ -5560,18 +5588,18 @@ var handleEndpointDrag = (arrow, updatedPoints, fixedSegments, startHeading, end
   let startIsSpecial = arrow.startIsSpecial ?? null;
   let endIsSpecial = arrow.endIsSpecial ?? null;
   const globalUpdatedPoints = updatedPoints.map(
-    (p, i) => i === 0 ? pointFrom6(arrow.x + p[0], arrow.y + p[1]) : i === updatedPoints.length - 1 ? pointFrom6(arrow.x + p[0], arrow.y + p[1]) : pointFrom6(
+    (p, i) => i === 0 ? pointFrom7(arrow.x + p[0], arrow.y + p[1]) : i === updatedPoints.length - 1 ? pointFrom7(arrow.x + p[0], arrow.y + p[1]) : pointFrom7(
       arrow.x + arrow.points[i][0],
       arrow.y + arrow.points[i][1]
     )
   );
   const nextFixedSegments = fixedSegments.map((segment) => ({
     ...segment,
-    start: pointFrom6(
+    start: pointFrom7(
       arrow.x + (segment.start[0] - updatedPoints[0][0]),
       arrow.y + (segment.start[1] - updatedPoints[0][1])
     ),
-    end: pointFrom6(
+    end: pointFrom7(
       arrow.x + (segment.end[0] - updatedPoints[0][0]),
       arrow.y + (segment.end[1] - updatedPoints[0][1])
     )
@@ -5583,8 +5611,13 @@ var handleEndpointDrag = (arrow, updatedPoints, fixedSegments, startHeading, end
     newPoints.push(globalUpdatedPoints[newPoints.length + offset]);
   }
   {
-    const secondPoint = globalUpdatedPoints[startIsSpecial ? 2 : 1];
-    const thirdPoint = globalUpdatedPoints[startIsSpecial ? 3 : 2];
+    const secondPoint = globalUpdatedPoints.at(startIsSpecial ? 2 : 1);
+    const thirdPoint = globalUpdatedPoints.at(startIsSpecial ? 3 : 2);
+    if (!secondPoint || !thirdPoint) {
+      throw new Error(
+        `Second and third points must exist when handling endpoint drag (${startIsSpecial})`
+      );
+    }
     const startIsHorizontal = headingIsHorizontal(startHeading);
     const secondIsHorizontal = headingIsHorizontal(
       vectorToHeading(vectorFromPoint5(secondPoint, thirdPoint))
@@ -5592,13 +5625,13 @@ var handleEndpointDrag = (arrow, updatedPoints, fixedSegments, startHeading, end
     if (hoveredStartElement && startIsHorizontal === secondIsHorizontal) {
       const positive = startIsHorizontal ? compareHeading(startHeading, HEADING_RIGHT) : compareHeading(startHeading, HEADING_DOWN);
       newPoints.unshift(
-        pointFrom6(
+        pointFrom7(
           !secondIsHorizontal ? thirdPoint[0] : startGlobalPoint[0] + (positive ? BASE_PADDING : -BASE_PADDING),
           secondIsHorizontal ? thirdPoint[1] : startGlobalPoint[1] + (positive ? BASE_PADDING : -BASE_PADDING)
         )
       );
       newPoints.unshift(
-        pointFrom6(
+        pointFrom7(
           startIsHorizontal ? startGlobalPoint[0] + (positive ? BASE_PADDING : -BASE_PADDING) : startGlobalPoint[0],
           !startIsHorizontal ? startGlobalPoint[1] + (positive ? BASE_PADDING : -BASE_PADDING) : startGlobalPoint[1]
         )
@@ -5613,7 +5646,7 @@ var handleEndpointDrag = (arrow, updatedPoints, fixedSegments, startHeading, end
       }
     } else {
       newPoints.unshift(
-        pointFrom6(
+        pointFrom7(
           !secondIsHorizontal ? secondPoint[0] : startGlobalPoint[0],
           secondIsHorizontal ? secondPoint[1] : startGlobalPoint[1]
         )
@@ -5630,8 +5663,17 @@ var handleEndpointDrag = (arrow, updatedPoints, fixedSegments, startHeading, end
     newPoints.unshift(startGlobalPoint);
   }
   {
-    const secondToLastPoint = globalUpdatedPoints[globalUpdatedPoints.length - (endIsSpecial ? 3 : 2)];
-    const thirdToLastPoint = globalUpdatedPoints[globalUpdatedPoints.length - (endIsSpecial ? 4 : 3)];
+    const secondToLastPoint = globalUpdatedPoints.at(
+      globalUpdatedPoints.length - (endIsSpecial ? 3 : 2)
+    );
+    const thirdToLastPoint = globalUpdatedPoints.at(
+      globalUpdatedPoints.length - (endIsSpecial ? 4 : 3)
+    );
+    if (!secondToLastPoint || !thirdToLastPoint) {
+      throw new Error(
+        `Second and third to last points must exist when handling endpoint drag (${endIsSpecial})`
+      );
+    }
     const endIsHorizontal = headingIsHorizontal(endHeading);
     const secondIsHorizontal = headingForPointIsHorizontal(
       thirdToLastPoint,
@@ -5640,13 +5682,13 @@ var handleEndpointDrag = (arrow, updatedPoints, fixedSegments, startHeading, end
     if (hoveredEndElement && endIsHorizontal === secondIsHorizontal) {
       const positive = endIsHorizontal ? compareHeading(endHeading, HEADING_RIGHT) : compareHeading(endHeading, HEADING_DOWN);
       newPoints.push(
-        pointFrom6(
+        pointFrom7(
           !secondIsHorizontal ? thirdToLastPoint[0] : endGlobalPoint[0] + (positive ? BASE_PADDING : -BASE_PADDING),
           secondIsHorizontal ? thirdToLastPoint[1] : endGlobalPoint[1] + (positive ? BASE_PADDING : -BASE_PADDING)
         )
       );
       newPoints.push(
-        pointFrom6(
+        pointFrom7(
           endIsHorizontal ? endGlobalPoint[0] + (positive ? BASE_PADDING : -BASE_PADDING) : endGlobalPoint[0],
           !endIsHorizontal ? endGlobalPoint[1] + (positive ? BASE_PADDING : -BASE_PADDING) : endGlobalPoint[1]
         )
@@ -5656,7 +5698,7 @@ var handleEndpointDrag = (arrow, updatedPoints, fixedSegments, startHeading, end
       }
     } else {
       newPoints.push(
-        pointFrom6(
+        pointFrom7(
           !secondIsHorizontal ? secondToLastPoint[0] : endGlobalPoint[0],
           secondIsHorizontal ? secondToLastPoint[1] : endGlobalPoint[1]
         )
@@ -5675,11 +5717,11 @@ var handleEndpointDrag = (arrow, updatedPoints, fixedSegments, startHeading, end
       end: newPoints[index]
     })).map((segment) => ({
       ...segment,
-      start: pointFrom6(
+      start: pointFrom7(
         segment.start[0] - startGlobalPoint[0],
         segment.start[1] - startGlobalPoint[1]
       ),
-      end: pointFrom6(
+      end: pointFrom7(
         segment.end[0] - startGlobalPoint[0],
         segment.end[1] - startGlobalPoint[1]
       )
@@ -5741,7 +5783,7 @@ var updateElbowArrowPoints = (arrow, elementsMap, updates, options) => {
   if (startBinding && !startElement && areUpdatedPointsValid || endBinding && !endElement && areUpdatedPointsValid || elementsMap.size === 0 && areUpdatedPointsValid || Object.keys(restOfTheUpdates).length === 0 && (startElement?.id !== startBinding?.elementId || endElement?.id !== endBinding?.elementId)) {
     return normalizeArrowElementUpdate(
       updatedPoints.map(
-        (p) => pointFrom6(arrow.x + p[0], arrow.y + p[1])
+        (p) => pointFrom7(arrow.x + p[0], arrow.y + p[1])
       ),
       arrow.fixedSegments,
       arrow.startIsSpecial,
@@ -5773,7 +5815,7 @@ var updateElbowArrowPoints = (arrow, elementsMap, updates, options) => {
   if (elementsMap.size === 0 && areUpdatedPointsValid) {
     return normalizeArrowElementUpdate(
       updatedPoints.map(
-        (p) => pointFrom6(arrow.x + p[0], arrow.y + p[1])
+        (p) => pointFrom7(arrow.x + p[0], arrow.y + p[1])
       ),
       arrow.fixedSegments,
       arrow.startIsSpecial,
@@ -5786,7 +5828,7 @@ var updateElbowArrowPoints = (arrow, elementsMap, updates, options) => {
   if (updates.startBinding === arrow.startBinding && updates.endBinding === arrow.endBinding && (updates.points ?? []).every(
     (p, i) => pointsEqual4(
       p,
-      arrow.points[i] ?? pointFrom6(Infinity, Infinity)
+      arrow.points[i] ?? pointFrom7(Infinity, Infinity)
     )
   ) && areUpdatedPointsValid) {
     return {};
@@ -6280,13 +6322,13 @@ var calculateGrid = (aabbs, start, startHeading, end, endHeading, common) => {
 var getDonglePosition = (bounds, heading, p) => {
   switch (heading) {
     case HEADING_UP:
-      return pointFrom6(p[0], bounds[1]);
+      return pointFrom7(p[0], bounds[1]);
     case HEADING_RIGHT:
-      return pointFrom6(bounds[2], p[1]);
+      return pointFrom7(bounds[2], p[1]);
     case HEADING_DOWN:
-      return pointFrom6(p[0], bounds[3]);
+      return pointFrom7(p[0], bounds[3]);
   }
-  return pointFrom6(bounds[0], p[1]);
+  return pointFrom7(bounds[0], p[1]);
 };
 var estimateSegmentCount = (start, end, startHeading, endHeading) => {
   if (endHeading === HEADING_RIGHT) {
@@ -6454,7 +6496,7 @@ var normalizeArrowElementUpdate = (global2, nextFixedSegments, startIsSpecial, e
     );
   }
   points = points.map(
-    ([x, y]) => pointFrom6(clamp2(x, -1e6, 1e6), clamp2(y, -1e6, 1e6))
+    ([x, y]) => pointFrom7(clamp2(x, -1e6, 1e6), clamp2(y, -1e6, 1e6))
   );
   return {
     points,
@@ -7192,7 +7234,7 @@ var bindPointToSnapToElementOutline = (arrow, bindableElement, startOrEnd, eleme
   }
   const aabb = aabbForElement(bindableElement, elementsMap);
   const localP = arrow.points[startOrEnd === "start" ? 0 : arrow.points.length - 1];
-  const globalP = pointFrom7(
+  const globalP = pointFrom8(
     arrow.x + localP[0],
     arrow.y + localP[1]
   );
@@ -7200,8 +7242,8 @@ var bindPointToSnapToElementOutline = (arrow, bindableElement, startOrEnd, eleme
   const elbowed = isElbowArrow(arrow);
   const center = getCenterForBounds(aabb);
   const adjacentPointIdx = startOrEnd === "start" ? 1 : arrow.points.length - 2;
-  const adjacentPoint = pointRotateRads6(
-    pointFrom7(
+  const adjacentPoint = pointRotateRads7(
+    pointFrom8(
       arrow.x + arrow.points[adjacentPointIdx][0],
       arrow.y + arrow.points[adjacentPointIdx][1]
     ),
@@ -7214,7 +7256,7 @@ var bindPointToSnapToElementOutline = (arrow, bindableElement, startOrEnd, eleme
       headingForPointFromElement(bindableElement, aabb, globalP)
     );
     const snapPoint = snapToMid(bindableElement, elementsMap, edgePoint);
-    const otherPoint = pointFrom7(
+    const otherPoint = pointFrom8(
       isHorizontal ? center[0] : snapPoint[0],
       !isHorizontal ? center[1] : snapPoint[1]
     );
@@ -7234,6 +7276,28 @@ var bindPointToSnapToElementOutline = (arrow, bindableElement, startOrEnd, eleme
       intersector,
       FIXED_BINDING_DISTANCE
     ).sort(pointDistanceSq)[0];
+    if (!intersection) {
+      const anotherPoint = pointFrom8(
+        !isHorizontal ? center[0] : snapPoint[0],
+        isHorizontal ? center[1] : snapPoint[1]
+      );
+      const anotherIntersector = lineSegment4(
+        anotherPoint,
+        pointFromVector5(
+          vectorScale6(
+            vectorNormalize3(vectorFromPoint6(snapPoint, anotherPoint)),
+            Math.max(bindableElement.width, bindableElement.height) * 2
+          ),
+          anotherPoint
+        )
+      );
+      intersection = intersectElementWithLineSegment(
+        bindableElement,
+        elementsMap,
+        anotherIntersector,
+        FIXED_BINDING_DISTANCE
+      ).sort(pointDistanceSq)[0];
+    }
   } else {
     intersection = intersectElementWithLineSegment(
       bindableElement,
@@ -7261,24 +7325,24 @@ var bindPointToSnapToElementOutline = (arrow, bindableElement, startOrEnd, eleme
 };
 var avoidRectangularCorner = (element, elementsMap, p) => {
   const center = elementCenterPoint(element, elementsMap);
-  const nonRotatedPoint = pointRotateRads6(p, center, -element.angle);
+  const nonRotatedPoint = pointRotateRads7(p, center, -element.angle);
   if (nonRotatedPoint[0] < element.x && nonRotatedPoint[1] < element.y) {
     if (nonRotatedPoint[1] - element.y > -FIXED_BINDING_DISTANCE) {
-      return pointRotateRads6(
-        pointFrom7(element.x - FIXED_BINDING_DISTANCE, element.y),
+      return pointRotateRads7(
+        pointFrom8(element.x - FIXED_BINDING_DISTANCE, element.y),
         center,
         element.angle
       );
     }
-    return pointRotateRads6(
-      pointFrom7(element.x, element.y - FIXED_BINDING_DISTANCE),
+    return pointRotateRads7(
+      pointFrom8(element.x, element.y - FIXED_BINDING_DISTANCE),
       center,
       element.angle
     );
   } else if (nonRotatedPoint[0] < element.x && nonRotatedPoint[1] > element.y + element.height) {
     if (nonRotatedPoint[0] - element.x > -FIXED_BINDING_DISTANCE) {
-      return pointRotateRads6(
-        pointFrom7(
+      return pointRotateRads7(
+        pointFrom8(
           element.x,
           element.y + element.height + FIXED_BINDING_DISTANCE
         ),
@@ -7286,15 +7350,15 @@ var avoidRectangularCorner = (element, elementsMap, p) => {
         element.angle
       );
     }
-    return pointRotateRads6(
-      pointFrom7(element.x - FIXED_BINDING_DISTANCE, element.y + element.height),
+    return pointRotateRads7(
+      pointFrom8(element.x - FIXED_BINDING_DISTANCE, element.y + element.height),
       center,
       element.angle
     );
   } else if (nonRotatedPoint[0] > element.x + element.width && nonRotatedPoint[1] > element.y + element.height) {
     if (nonRotatedPoint[0] - element.x < element.width + FIXED_BINDING_DISTANCE) {
-      return pointRotateRads6(
-        pointFrom7(
+      return pointRotateRads7(
+        pointFrom8(
           element.x + element.width,
           element.y + element.height + FIXED_BINDING_DISTANCE
         ),
@@ -7302,8 +7366,8 @@ var avoidRectangularCorner = (element, elementsMap, p) => {
         element.angle
       );
     }
-    return pointRotateRads6(
-      pointFrom7(
+    return pointRotateRads7(
+      pointFrom8(
         element.x + element.width + FIXED_BINDING_DISTANCE,
         element.y + element.height
       ),
@@ -7312,8 +7376,8 @@ var avoidRectangularCorner = (element, elementsMap, p) => {
     );
   } else if (nonRotatedPoint[0] > element.x + element.width && nonRotatedPoint[1] < element.y) {
     if (nonRotatedPoint[0] - element.x < element.width + FIXED_BINDING_DISTANCE) {
-      return pointRotateRads6(
-        pointFrom7(
+      return pointRotateRads7(
+        pointFrom8(
           element.x + element.width,
           element.y - FIXED_BINDING_DISTANCE
         ),
@@ -7321,8 +7385,8 @@ var avoidRectangularCorner = (element, elementsMap, p) => {
         element.angle
       );
     }
-    return pointRotateRads6(
-      pointFrom7(element.x + element.width + FIXED_BINDING_DISTANCE, element.y),
+    return pointRotateRads7(
+      pointFrom8(element.x + element.width + FIXED_BINDING_DISTANCE, element.y),
       center,
       element.angle
     );
@@ -7332,62 +7396,62 @@ var avoidRectangularCorner = (element, elementsMap, p) => {
 var snapToMid = (element, elementsMap, p, tolerance = 0.05) => {
   const { x, y, width, height, angle } = element;
   const center = elementCenterPoint(element, elementsMap, -0.1, -0.1);
-  const nonRotated = pointRotateRads6(p, center, -angle);
+  const nonRotated = pointRotateRads7(p, center, -angle);
   const verticalThreshold = clamp3(tolerance * height, 5, 80);
   const horizontalThreshold = clamp3(tolerance * width, 5, 80);
   if (nonRotated[0] <= x + width / 2 && nonRotated[1] > center[1] - verticalThreshold && nonRotated[1] < center[1] + verticalThreshold) {
-    return pointRotateRads6(
-      pointFrom7(x - FIXED_BINDING_DISTANCE, center[1]),
+    return pointRotateRads7(
+      pointFrom8(x - FIXED_BINDING_DISTANCE, center[1]),
       center,
       angle
     );
   } else if (nonRotated[1] <= y + height / 2 && nonRotated[0] > center[0] - horizontalThreshold && nonRotated[0] < center[0] + horizontalThreshold) {
-    return pointRotateRads6(
-      pointFrom7(center[0], y - FIXED_BINDING_DISTANCE),
+    return pointRotateRads7(
+      pointFrom8(center[0], y - FIXED_BINDING_DISTANCE),
       center,
       angle
     );
   } else if (nonRotated[0] >= x + width / 2 && nonRotated[1] > center[1] - verticalThreshold && nonRotated[1] < center[1] + verticalThreshold) {
-    return pointRotateRads6(
-      pointFrom7(x + width + FIXED_BINDING_DISTANCE, center[1]),
+    return pointRotateRads7(
+      pointFrom8(x + width + FIXED_BINDING_DISTANCE, center[1]),
       center,
       angle
     );
   } else if (nonRotated[1] >= y + height / 2 && nonRotated[0] > center[0] - horizontalThreshold && nonRotated[0] < center[0] + horizontalThreshold) {
-    return pointRotateRads6(
-      pointFrom7(center[0], y + height + FIXED_BINDING_DISTANCE),
+    return pointRotateRads7(
+      pointFrom8(center[0], y + height + FIXED_BINDING_DISTANCE),
       center,
       angle
     );
   } else if (element.type === "diamond") {
     const distance3 = FIXED_BINDING_DISTANCE;
-    const topLeft = pointFrom7(
+    const topLeft = pointFrom8(
       x + width / 4 - distance3,
       y + height / 4 - distance3
     );
-    const topRight = pointFrom7(
+    const topRight = pointFrom8(
       x + 3 * width / 4 + distance3,
       y + height / 4 - distance3
     );
-    const bottomLeft = pointFrom7(
+    const bottomLeft = pointFrom8(
       x + width / 4 - distance3,
       y + 3 * height / 4 + distance3
     );
-    const bottomRight = pointFrom7(
+    const bottomRight = pointFrom8(
       x + 3 * width / 4 + distance3,
       y + 3 * height / 4 + distance3
     );
     if (pointDistance4(topLeft, nonRotated) < Math.max(horizontalThreshold, verticalThreshold)) {
-      return pointRotateRads6(topLeft, center, angle);
+      return pointRotateRads7(topLeft, center, angle);
     }
     if (pointDistance4(topRight, nonRotated) < Math.max(horizontalThreshold, verticalThreshold)) {
-      return pointRotateRads6(topRight, center, angle);
+      return pointRotateRads7(topRight, center, angle);
     }
     if (pointDistance4(bottomLeft, nonRotated) < Math.max(horizontalThreshold, verticalThreshold)) {
-      return pointRotateRads6(bottomLeft, center, angle);
+      return pointRotateRads7(bottomLeft, center, angle);
     }
     if (pointDistance4(bottomRight, nonRotated) < Math.max(horizontalThreshold, verticalThreshold)) {
-      return pointRotateRads6(bottomRight, center, angle);
+      return pointRotateRads7(bottomRight, center, angle);
     }
   }
   return p;
@@ -7407,11 +7471,11 @@ var updateBoundPoint = (linearElement, startOrEnd, binding, bindableElement, ele
       elementsMap
     ).fixedPoint;
     const globalMidPoint = elementCenterPoint(bindableElement, elementsMap);
-    const global2 = pointFrom7(
+    const global2 = pointFrom8(
       bindableElement.x + fixedPoint[0] * bindableElement.width,
       bindableElement.y + fixedPoint[1] * bindableElement.height
     );
-    const rotatedGlobal = pointRotateRads6(
+    const rotatedGlobal = pointRotateRads7(
       global2,
       globalMidPoint,
       bindableElement.angle
@@ -7501,11 +7565,11 @@ var calculateFixedPointForElbowArrowBinding = (linearElement, hoveredElement, st
     startOrEnd,
     elementsMap
   );
-  const globalMidPoint = pointFrom7(
+  const globalMidPoint = pointFrom8(
     bounds[0] + (bounds[2] - bounds[0]) / 2,
     bounds[1] + (bounds[3] - bounds[1]) / 2
   );
-  const nonRotatedSnappedGlobalPoint = pointRotateRads6(
+  const nonRotatedSnappedGlobalPoint = pointRotateRads7(
     snappedPoint,
     globalMidPoint,
     -hoveredElement.angle
@@ -7638,7 +7702,7 @@ var newBoundElements = (boundElements, idsToRemove, elementsToAdd = []) => {
   return nextBoundElements;
 };
 var bindingBorderTest = (element, { x, y }, elementsMap, zoom, fullShape) => {
-  const p = pointFrom7(x, y);
+  const p = pointFrom8(x, y);
   const threshold = maxBindingGap(element, element.width, element.height, zoom);
   const shouldTestInside2 = (
     // disable fullshape snapping for frame elements so we
@@ -7680,8 +7744,8 @@ var determineFocusDistance = (element, elementsMap, a2, b2) => {
   if (pointsEqual5(a2, b2)) {
     return 0;
   }
-  const rotatedA = pointRotateRads6(a2, center, -element.angle);
-  const rotatedB = pointRotateRads6(b2, center, -element.angle);
+  const rotatedA = pointRotateRads7(a2, center, -element.angle);
+  const rotatedB = pointRotateRads7(b2, center, -element.angle);
   const sign = Math.sign(
     vectorCross3(
       vectorFromPoint6(rotatedB, a2),
@@ -7700,70 +7764,70 @@ var determineFocusDistance = (element, elementsMap, a2, b2) => {
   );
   const axes = element.type === "diamond" ? [
     lineSegment4(
-      pointFrom7(element.x + element.width / 2, element.y),
-      pointFrom7(
+      pointFrom8(element.x + element.width / 2, element.y),
+      pointFrom8(
         element.x + element.width / 2,
         element.y + element.height
       )
     ),
     lineSegment4(
-      pointFrom7(element.x, element.y + element.height / 2),
-      pointFrom7(
+      pointFrom8(element.x, element.y + element.height / 2),
+      pointFrom8(
         element.x + element.width,
         element.y + element.height / 2
       )
     )
   ] : [
     lineSegment4(
-      pointFrom7(element.x, element.y),
-      pointFrom7(
+      pointFrom8(element.x, element.y),
+      pointFrom8(
         element.x + element.width,
         element.y + element.height
       )
     ),
     lineSegment4(
-      pointFrom7(element.x + element.width, element.y),
-      pointFrom7(element.x, element.y + element.height)
+      pointFrom8(element.x + element.width, element.y),
+      pointFrom8(element.x, element.y + element.height)
     )
   ];
   const interceptees = element.type === "diamond" ? [
     lineSegment4(
-      pointFrom7(
+      pointFrom8(
         element.x + element.width / 2,
         element.y - element.height
       ),
-      pointFrom7(
+      pointFrom8(
         element.x + element.width / 2,
         element.y + element.height * 2
       )
     ),
     lineSegment4(
-      pointFrom7(
+      pointFrom8(
         element.x - element.width,
         element.y + element.height / 2
       ),
-      pointFrom7(
+      pointFrom8(
         element.x + element.width * 2,
         element.y + element.height / 2
       )
     )
   ] : [
     lineSegment4(
-      pointFrom7(
+      pointFrom8(
         element.x - element.width,
         element.y - element.height
       ),
-      pointFrom7(
+      pointFrom8(
         element.x + element.width * 2,
         element.y + element.height * 2
       )
     ),
     lineSegment4(
-      pointFrom7(
+      pointFrom8(
         element.x + element.width * 2,
         element.y - element.height
       ),
-      pointFrom7(
+      pointFrom8(
         element.x - element.width,
         element.y + element.height * 2
       )
@@ -7784,30 +7848,30 @@ var determineFocusPoint = (element, elementsMap, focus, adjacentPoint) => {
     return center;
   }
   const candidates = (element.type === "diamond" ? [
-    pointFrom7(element.x, element.y + element.height / 2),
-    pointFrom7(element.x + element.width / 2, element.y),
-    pointFrom7(
+    pointFrom8(element.x, element.y + element.height / 2),
+    pointFrom8(element.x + element.width / 2, element.y),
+    pointFrom8(
       element.x + element.width,
       element.y + element.height / 2
     ),
-    pointFrom7(
+    pointFrom8(
       element.x + element.width / 2,
       element.y + element.height
     )
   ] : [
-    pointFrom7(element.x, element.y),
-    pointFrom7(element.x + element.width, element.y),
-    pointFrom7(
+    pointFrom8(element.x, element.y),
+    pointFrom8(element.x + element.width, element.y),
+    pointFrom8(
       element.x + element.width,
       element.y + element.height
     ),
-    pointFrom7(element.x, element.y + element.height)
+    pointFrom8(element.x, element.y + element.height)
   ]).map(
     (p) => pointFromVector5(
       vectorScale6(vectorFromPoint6(p, center), Math.abs(focus)),
       center
     )
-  ).map((p) => pointRotateRads6(p, center, element.angle));
+  ).map((p) => pointRotateRads7(p, center, element.angle));
   const selected = [
     vectorCross3(
       vectorFromPoint6(adjacentPoint, candidates[0]),
@@ -8052,8 +8116,8 @@ var BindableElement = class {
 };
 var getGlobalFixedPointForBindableElement = (fixedPointRatio, element, elementsMap) => {
   const [fixedX, fixedY] = normalizeFixedPoint(fixedPointRatio);
-  return pointRotateRads6(
-    pointFrom7(
+  return pointRotateRads7(
+    pointFrom8(
       element.x + element.width * fixedX,
       element.y + element.height * fixedY
     ),
@@ -8068,7 +8132,7 @@ var getGlobalFixedPoints = (arrow, elementsMap) => {
     arrow.startBinding.fixedPoint,
     startElement,
     elementsMap
-  ) : pointFrom7(
+  ) : pointFrom8(
     arrow.x + arrow.points[0][0],
     arrow.y + arrow.points[0][1]
   );
@@ -8076,7 +8140,7 @@ var getGlobalFixedPoints = (arrow, elementsMap) => {
     arrow.endBinding.fixedPoint,
     endElement,
     elementsMap
-  ) : pointFrom7(
+  ) : pointFrom8(
     arrow.x + arrow.points[arrow.points.length - 1][0],
     arrow.y + arrow.points[arrow.points.length - 1][1]
   );
@@ -8106,7 +8170,7 @@ var getNormalizedPoints = ({
   const offsetY = points[0][1];
   return {
     points: points.map((p) => {
-      return pointFrom8(p[0] - offsetX, p[1] - offsetY);
+      return pointFrom9(p[0] - offsetX, p[1] - offsetY);
     }),
     offsetX,
     offsetY
@@ -8130,7 +8194,7 @@ var LinearElementEditor = class _LinearElementEditor {
   isEditing;
   constructor(element, elementsMap, isEditing = false) {
     this.elementId = element.id;
-    if (!pointsEqual6(element.points[0], pointFrom8(0, 0))) {
+    if (!pointsEqual6(element.points[0], pointFrom9(0, 0))) {
       console.error("Linear element is not normalized", Error().stack);
       mutateElement(
         element,
@@ -8244,7 +8308,7 @@ var LinearElementEditor = class _LinearElementEditor {
           element,
           elementsMap,
           referencePoint,
-          pointFrom8(scenePointerX, scenePointerY),
+          pointFrom9(scenePointerX, scenePointerY),
           event[KEYS2.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
           customLineAngle
         );
@@ -8255,7 +8319,7 @@ var LinearElementEditor = class _LinearElementEditor {
             [
               selectedIndex,
               {
-                point: pointFrom8(
+                point: pointFrom9(
                   width + referencePoint[0],
                   height + referencePoint[1]
                 ),
@@ -8285,7 +8349,7 @@ var LinearElementEditor = class _LinearElementEditor {
                 scenePointerX - linearElementEditor.pointerOffset.x,
                 scenePointerY - linearElementEditor.pointerOffset.y,
                 event[KEYS2.CTRL_OR_CMD] ? null : app.getEffectiveGridSize()
-              ) : pointFrom8(
+              ) : pointFrom9(
                 element.points[pointIndex][0] + deltaX,
                 element.points[pointIndex][1] + deltaY
               );
@@ -8498,11 +8562,11 @@ var LinearElementEditor = class _LinearElementEditor {
     const existingSegmentMidpointHitCoords = linearElementEditor.segmentMidPointHoveredCoords;
     if (existingSegmentMidpointHitCoords) {
       const distance3 = pointDistance5(
-        pointFrom8(
+        pointFrom9(
           existingSegmentMidpointHitCoords[0],
           existingSegmentMidpointHitCoords[1]
         ),
-        pointFrom8(scenePointer.x, scenePointer.y)
+        pointFrom9(scenePointer.x, scenePointer.y)
       );
       if (distance3 <= threshold) {
         return existingSegmentMidpointHitCoords;
@@ -8518,7 +8582,7 @@ var LinearElementEditor = class _LinearElementEditor {
       if (midPoints[index] !== null) {
         const distance3 = pointDistance5(
           midPoints[index],
-          pointFrom8(scenePointer.x, scenePointer.y)
+          pointFrom9(scenePointer.x, scenePointer.y)
         );
         if (distance3 <= threshold) {
           return midPoints[index];
@@ -8557,7 +8621,7 @@ var LinearElementEditor = class _LinearElementEditor {
         "Invalid segment index while calculating elbow arrow mid point"
       );
       const p = pointCenter2(element.points[index - 1], element.points[index]);
-      return pointFrom8(element.x + p[0], element.y + p[1]);
+      return pointFrom9(element.x + p[0], element.y + p[1]);
     }
     const [lines, curves] = deconstructLinearOrFreeDrawElement2(element);
     invariant6(
@@ -8697,12 +8761,12 @@ var LinearElementEditor = class _LinearElementEditor {
     const [x1, y1, x2, y2] = getElementAbsoluteCoords2(element, elementsMap);
     const cx = (x1 + x2) / 2;
     const cy = (y1 + y2) / 2;
-    const targetPoint = clickedPointIndex > -1 && pointRotateRads7(
-      pointFrom8(
+    const targetPoint = clickedPointIndex > -1 && pointRotateRads8(
+      pointFrom9(
         element.x + element.points[clickedPointIndex][0],
         element.y + element.points[clickedPointIndex][1]
       ),
-      pointFrom8(cx, cy),
+      pointFrom9(cx, cy),
       element.angle
     );
     const nextSelectedPointsIndices = clickedPointIndex > -1 || event.shiftKey ? event.shiftKey || linearElementEditor.selectedPointsIndices?.includes(clickedPointIndex) ? normalizeSelectedPoints([
@@ -8768,10 +8832,10 @@ var LinearElementEditor = class _LinearElementEditor {
         element,
         elementsMap,
         lastCommittedPoint,
-        pointFrom8(scenePointerX, scenePointerY),
+        pointFrom9(scenePointerX, scenePointerY),
         event[KEYS2.CTRL_OR_CMD] ? null : app.getEffectiveGridSize()
       );
-      newPoint = pointFrom8(
+      newPoint = pointFrom9(
         width + lastCommittedPoint[0],
         height + lastCommittedPoint[1]
       );
@@ -8811,9 +8875,9 @@ var LinearElementEditor = class _LinearElementEditor {
     const cx = (x1 + x2) / 2;
     const cy = (y1 + y2) / 2;
     const { x, y } = element;
-    return pointRotateRads7(
-      pointFrom8(x + p[0], y + p[1]),
-      pointFrom8(cx, cy),
+    return pointRotateRads8(
+      pointFrom9(x + p[0], y + p[1]),
+      pointFrom9(cx, cy),
       element.angle
     );
   }
@@ -8824,9 +8888,9 @@ var LinearElementEditor = class _LinearElementEditor {
     const cy = (y1 + y2) / 2;
     return element.points.map((p) => {
       const { x, y } = element;
-      return pointRotateRads7(
-        pointFrom8(x + p[0], y + p[1]),
-        pointFrom8(cx, cy),
+      return pointRotateRads8(
+        pointFrom9(x + p[0], y + p[1]),
+        pointFrom9(cx, cy),
         element.angle
       );
     });
@@ -8838,15 +8902,15 @@ var LinearElementEditor = class _LinearElementEditor {
     const cy = (y1 + y2) / 2;
     const p = element.points[index];
     const { x, y } = element;
-    return p ? pointRotateRads7(
-      pointFrom8(x + p[0], y + p[1]),
-      pointFrom8(cx, cy),
+    return p ? pointRotateRads8(
+      pointFrom9(x + p[0], y + p[1]),
+      pointFrom9(cx, cy),
       element.angle
-    ) : pointRotateRads7(pointFrom8(x, y), pointFrom8(cx, cy), element.angle);
+    ) : pointRotateRads8(pointFrom9(x, y), pointFrom9(cx, cy), element.angle);
   }
   static pointFromAbsoluteCoords(element, absoluteCoords, elementsMap) {
     if (isElbowArrow(element)) {
-      return pointFrom8(
+      return pointFrom9(
         absoluteCoords[0] - element.x,
         absoluteCoords[1] - element.y
       );
@@ -8854,12 +8918,12 @@ var LinearElementEditor = class _LinearElementEditor {
     const [x1, y1, x2, y2] = getElementAbsoluteCoords2(element, elementsMap);
     const cx = (x1 + x2) / 2;
     const cy = (y1 + y2) / 2;
-    const [x, y] = pointRotateRads7(
-      pointFrom8(absoluteCoords[0], absoluteCoords[1]),
-      pointFrom8(cx, cy),
+    const [x, y] = pointRotateRads8(
+      pointFrom9(absoluteCoords[0], absoluteCoords[1]),
+      pointFrom9(cx, cy),
       -element.angle
     );
-    return pointFrom8(x - element.x, y - element.y);
+    return pointFrom9(x - element.x, y - element.y);
   }
   static getPointIndexUnderCursor(element, elementsMap, zoom, x, y) {
     const pointHandles = _LinearElementEditor.getPointsGlobalCoordinates(
@@ -8869,7 +8933,7 @@ var LinearElementEditor = class _LinearElementEditor {
     let idx = pointHandles.length;
     while (--idx > -1) {
       const p = pointHandles[idx];
-      if (pointDistance5(pointFrom8(x, y), pointFrom8(p[0], p[1])) * zoom.value < // +1px to account for outline stroke
+      if (pointDistance5(pointFrom9(x, y), pointFrom9(p[0], p[1])) * zoom.value < // +1px to account for outline stroke
       _LinearElementEditor.POINT_HANDLE_SIZE + 1) {
         return idx;
       }
@@ -8881,12 +8945,12 @@ var LinearElementEditor = class _LinearElementEditor {
     const [x1, y1, x2, y2] = getElementAbsoluteCoords2(element, elementsMap);
     const cx = (x1 + x2) / 2;
     const cy = (y1 + y2) / 2;
-    const [rotatedX, rotatedY] = pointRotateRads7(
-      pointFrom8(pointerOnGrid[0], pointerOnGrid[1]),
-      pointFrom8(cx, cy),
+    const [rotatedX, rotatedY] = pointRotateRads8(
+      pointFrom9(pointerOnGrid[0], pointerOnGrid[1]),
+      pointFrom9(cx, cy),
       -element.angle
     );
-    return pointFrom8(rotatedX - element.x, rotatedY - element.y);
+    return pointFrom9(rotatedX - element.x, rotatedY - element.y);
   }
   /**
    * Normalizes line points so that the start point is at [0,0]. This is
@@ -8935,7 +8999,7 @@ var LinearElementEditor = class _LinearElementEditor {
           pointAddedToEnd = true;
         }
         acc.push(
-          nextPoint ? pointFrom8((p[0] + nextPoint[0]) / 2, (p[1] + nextPoint[1]) / 2) : pointFrom8(p[0], p[1])
+          nextPoint ? pointFrom9((p[0] + nextPoint[0]) / 2, (p[1] + nextPoint[1]) / 2) : pointFrom9(p[0], p[1])
         );
         nextSelectedIndices.push(indexCursor + 1);
         ++indexCursor;
@@ -8951,7 +9015,7 @@ var LinearElementEditor = class _LinearElementEditor {
         /* @__PURE__ */ new Map([
           [
             element.points.length - 1,
-            { point: pointFrom8(lastPoint[0] + 30, lastPoint[1] + 30) }
+            { point: pointFrom9(lastPoint[0] + 30, lastPoint[1] + 30) }
           ]
         ])
       );
@@ -8971,7 +9035,7 @@ var LinearElementEditor = class _LinearElementEditor {
     });
     const isPolygon = isLineElement(element) && element.polygon;
     if (isPolygon && (isUncommittedPoint || pointIndices.includes(0) || pointIndices.includes(element.points.length - 1))) {
-      nextPoints[0] = pointFrom8(
+      nextPoints[0] = pointFrom9(
         nextPoints[nextPoints.length - 1][0],
         nextPoints[nextPoints.length - 1][1]
       );
@@ -8992,7 +9056,7 @@ var LinearElementEditor = class _LinearElementEditor {
   static addPoints(element, scene, addedPoints) {
     const nextPoints = [...element.points, ...addedPoints];
     if (isLineElement(element) && element.polygon) {
-      nextPoints[0] = pointFrom8(
+      nextPoints[0] = pointFrom9(
         nextPoints[nextPoints.length - 1][0],
         nextPoints[nextPoints.length - 1][1]
       );
@@ -9017,7 +9081,7 @@ var LinearElementEditor = class _LinearElementEditor {
       const lastPointUpdate = pointUpdates.get(points.length - 1);
       if (firstPointUpdate) {
         pointUpdates.set(points.length - 1, {
-          point: pointFrom8(
+          point: pointFrom9(
             firstPointUpdate.point[0],
             firstPointUpdate.point[1]
           ),
@@ -9025,19 +9089,19 @@ var LinearElementEditor = class _LinearElementEditor {
         });
       } else if (lastPointUpdate) {
         pointUpdates.set(0, {
-          point: pointFrom8(lastPointUpdate.point[0], lastPointUpdate.point[1]),
+          point: pointFrom9(lastPointUpdate.point[0], lastPointUpdate.point[1]),
           isDragging: lastPointUpdate.isDragging
         });
       }
     }
-    const updatedOriginPoint = pointUpdates.get(0)?.point ?? pointFrom8(0, 0);
+    const updatedOriginPoint = pointUpdates.get(0)?.point ?? pointFrom9(0, 0);
     const [offsetX, offsetY] = updatedOriginPoint;
     const nextPoints = isElbowArrow(element) ? [
       pointUpdates.get(0)?.point ?? points[0],
       pointUpdates.get(points.length - 1)?.point ?? points[points.length - 1]
     ] : points.map((p, idx) => {
       const current = pointUpdates.get(idx)?.point ?? p;
-      return pointFrom8(
+      return pointFrom9(
         current[0] - offsetX,
         current[1] - offsetY
       );
@@ -9071,8 +9135,8 @@ var LinearElementEditor = class _LinearElementEditor {
     }
     const origin = linearElementEditor.pointerDownState.origin;
     const dist = pointDistance5(
-      pointFrom8(origin.x, origin.y),
-      pointFrom8(pointerCoords.x, pointerCoords.y)
+      pointFrom9(origin.x, origin.y),
+      pointFrom9(pointerCoords.x, pointerCoords.y)
     );
     if (!appState.selectedLinearElement?.isEditing && dist < DRAGGING_THRESHOLD / appState.zoom.value) {
       return false;
@@ -9140,9 +9204,9 @@ var LinearElementEditor = class _LinearElementEditor {
       const prevCenterY = (prevCoords[1] + prevCoords[3]) / 2;
       const dX = prevCenterX - nextCenterX;
       const dY = prevCenterY - nextCenterY;
-      const rotatedOffset = pointRotateRads7(
-        pointFrom8(offsetX, offsetY),
-        pointFrom8(dX, dY),
+      const rotatedOffset = pointRotateRads8(
+        pointFrom9(offsetX, offsetY),
+        pointFrom9(dX, dY),
         element.angle
       );
       scene.mutateElement(element, {
@@ -9177,9 +9241,9 @@ var LinearElementEditor = class _LinearElementEditor {
       gridY,
       customLineAngle
     );
-    return pointRotateRads7(
-      pointFrom8(width, height),
-      pointFrom8(0, 0),
+    return pointRotateRads8(
+      pointFrom9(width, height),
+      pointFrom9(0, 0),
       -element.angle
     );
   }
@@ -9224,34 +9288,34 @@ var LinearElementEditor = class _LinearElementEditor {
     );
     const boundTextX2 = boundTextX1 + boundTextElement.width;
     const boundTextY2 = boundTextY1 + boundTextElement.height;
-    const centerPoint = pointFrom8(cx, cy);
-    const topLeftRotatedPoint = pointRotateRads7(
-      pointFrom8(x1, y1),
+    const centerPoint = pointFrom9(cx, cy);
+    const topLeftRotatedPoint = pointRotateRads8(
+      pointFrom9(x1, y1),
       centerPoint,
       element.angle
     );
-    const topRightRotatedPoint = pointRotateRads7(
-      pointFrom8(x2, y1),
+    const topRightRotatedPoint = pointRotateRads8(
+      pointFrom9(x2, y1),
       centerPoint,
       element.angle
     );
-    const counterRotateBoundTextTopLeft = pointRotateRads7(
-      pointFrom8(boundTextX1, boundTextY1),
+    const counterRotateBoundTextTopLeft = pointRotateRads8(
+      pointFrom9(boundTextX1, boundTextY1),
       centerPoint,
       -element.angle
     );
-    const counterRotateBoundTextTopRight = pointRotateRads7(
-      pointFrom8(boundTextX2, boundTextY1),
+    const counterRotateBoundTextTopRight = pointRotateRads8(
+      pointFrom9(boundTextX2, boundTextY1),
       centerPoint,
       -element.angle
     );
-    const counterRotateBoundTextBottomLeft = pointRotateRads7(
-      pointFrom8(boundTextX1, boundTextY2),
+    const counterRotateBoundTextBottomLeft = pointRotateRads8(
+      pointFrom9(boundTextX1, boundTextY2),
       centerPoint,
       -element.angle
     );
-    const counterRotateBoundTextBottomRight = pointRotateRads7(
-      pointFrom8(boundTextX2, boundTextY2),
+    const counterRotateBoundTextBottomRight = pointRotateRads8(
+      pointFrom9(boundTextX2, boundTextY2),
       centerPoint,
       -element.angle
     );
@@ -9367,11 +9431,11 @@ var LinearElementEditor = class _LinearElementEditor {
       );
       fixedSegments[index] = {
         index,
-        start: pointFrom8(
+        start: pointFrom9(
           !isHorizontal ? x - element.x : element.points[index - 1][0],
           isHorizontal ? y - element.y : element.points[index - 1][1]
         ),
-        end: pointFrom8(
+        end: pointFrom9(
           !isHorizontal ? x - element.x : element.points[index][0],
           isHorizontal ? y - element.y : element.points[index][1]
         )
@@ -9383,7 +9447,7 @@ var LinearElementEditor = class _LinearElementEditor {
       scene.mutateElement(element, {
         fixedSegments: nextFixedSegments
       });
-      const point = pointFrom8(
+      const point = pointFrom9(
         element.x + (element.fixedSegments[offset].start[0] + element.fixedSegments[offset].end[0]) / 2,
         element.y + (element.fixedSegments[offset].start[1] + element.fixedSegments[offset].end[1]) / 2
       );
@@ -9421,7 +9485,7 @@ var normalizeSelectedPoints = (points) => {
 // src/frame.ts
 init_define_import_meta_env();
 import { arrayToMap as arrayToMap5 } from "@excalidraw/common";
-import { isPointWithinBounds as isPointWithinBounds2, pointFrom as pointFrom10 } from "@excalidraw/math";
+import { isPointWithinBounds as isPointWithinBounds2, pointFrom as pointFrom11 } from "@excalidraw/math";
 
 // ../utils/src/bbox.ts
 init_define_import_meta_env();
@@ -9472,24 +9536,24 @@ import {
 } from "@excalidraw/element";
 import {
   rangeIncludesValue,
-  pointFrom as pointFrom9,
-  pointRotateRads as pointRotateRads8,
+  pointFrom as pointFrom10,
+  pointRotateRads as pointRotateRads9,
   rangeInclusive
 } from "@excalidraw/math";
 var getNonLinearElementRelativePoints = (element) => {
   if (element.type === "diamond") {
     return [
-      pointFrom9(element.width / 2, 0),
-      pointFrom9(element.width, element.height / 2),
-      pointFrom9(element.width / 2, element.height),
-      pointFrom9(0, element.height / 2)
+      pointFrom10(element.width / 2, 0),
+      pointFrom10(element.width, element.height / 2),
+      pointFrom10(element.width / 2, element.height),
+      pointFrom10(0, element.height / 2)
     ];
   }
   return [
-    pointFrom9(0, 0),
-    pointFrom9(0 + element.width, 0),
-    pointFrom9(0 + element.width, element.height),
-    pointFrom9(0, element.height)
+    pointFrom10(0, 0),
+    pointFrom10(0 + element.width, 0),
+    pointFrom10(0 + element.width, element.height),
+    pointFrom10(0, element.height)
   ];
 };
 var getElementRelativePoints = (element) => {
@@ -9523,9 +9587,9 @@ var getMinMaxPoints = (points) => {
 var getRotatedBBox = (element) => {
   const points = getElementRelativePoints(element);
   const { cx, cy } = getMinMaxPoints(points);
-  const centerPoint = pointFrom9(cx, cy);
+  const centerPoint = pointFrom10(cx, cy);
   const rotatedPoints = points.map(
-    (p) => pointRotateRads8(p, centerPoint, element.angle)
+    (p) => pointRotateRads9(p, centerPoint, element.angle)
   );
   const { minX, minY, maxX, maxY } = getMinMaxPoints(rotatedPoints);
   return [
@@ -10089,9 +10153,9 @@ var elementOverlapsWithFrame = (element, frame, elementsMap) => {
 var isCursorInFrame = (cursorCoords, frame, elementsMap) => {
   const [fx1, fy1, fx2, fy2] = getElementAbsoluteCoords2(frame, elementsMap);
   return isPointWithinBounds2(
-    pointFrom10(fx1, fy1),
-    pointFrom10(cursorCoords.x, cursorCoords.y),
-    pointFrom10(fx2, fy2)
+    pointFrom11(fx1, fy1),
+    pointFrom11(cursorCoords.x, cursorCoords.y),
+    pointFrom11(fx2, fy2)
   );
 };
 var groupsAreAtLeastIntersectingTheFrame = (elements, groupIds, frame) => {
@@ -11155,6 +11219,58 @@ function getFreeDrawPath2D(element) {
   return pathsCache.get(element);
 }
 function getFreeDrawSvgPath(element) {
+  return getSvgPathFromStroke(getFreedrawOutlinePoints(element));
+}
+function getFreedrawOutlineAsSegments(element, points, elementsMap) {
+  const bounds = getElementBounds(
+    {
+      ...element,
+      angle: 0
+    },
+    elementsMap
+  );
+  const center = pointFrom12(
+    (bounds[0] + bounds[2]) / 2,
+    (bounds[1] + bounds[3]) / 2
+  );
+  invariant7(points.length >= 2, "Freepath outline must have at least 2 points");
+  return points.slice(2).reduce(
+    (acc, curr) => {
+      acc.push(
+        lineSegment5(
+          acc[acc.length - 1][1],
+          pointRotateRads10(
+            pointFrom12(curr[0] + element.x, curr[1] + element.y),
+            center,
+            element.angle
+          )
+        )
+      );
+      return acc;
+    },
+    [
+      lineSegment5(
+        pointRotateRads10(
+          pointFrom12(
+            points[0][0] + element.x,
+            points[0][1] + element.y
+          ),
+          center,
+          element.angle
+        ),
+        pointRotateRads10(
+          pointFrom12(
+            points[1][0] + element.x,
+            points[1][1] + element.y
+          ),
+          center,
+          element.angle
+        )
+      )
+    ]
+  );
+}
+function getFreedrawOutlinePoints(element) {
   const inputPoints = element.simulatePressure ? element.points : element.points.length ? element.points.map(([x, y], i) => [x, y, element.pressures[i]]) : [[0, 0, 0.5]];
   const options = {
     simulatePressure: element.simulatePressure,
@@ -11167,7 +11283,7 @@ function getFreeDrawSvgPath(element) {
     last: !!element.lastCommittedPoint
     // LastCommittedPoint is added on pointerup
   };
-  return getSvgPathFromStroke(ae(inputPoints, options));
+  return ae(inputPoints, options);
 }
 function med(A2, B2) {
   return [(A2[0] + B2[0]) / 2, (A2[1] + B2[1]) / 2];
@@ -11194,7 +11310,7 @@ function getSvgPathFromStroke(points) {
 // src/comparisons.ts
 init_define_import_meta_env();
 var hasBackground = (type) => type === "rectangle" || type === "iframe" || type === "embeddable" || type === "ellipse" || type === "diamond" || type === "line" || type === "freedraw";
-var hasStrokeColor = (type) => type !== "image" && type !== "frame" && type !== "magicframe";
+var hasStrokeColor = (type) => type === "rectangle" || type === "ellipse" || type === "diamond" || type === "freedraw" || type === "arrow" || type === "line" || type === "text";
 var hasStrokeWidth = (type) => type === "rectangle" || type === "iframe" || type === "embeddable" || type === "ellipse" || type === "diamond" || type === "freedraw" || type === "arrow" || type === "line";
 var hasStrokeStyle = (type) => type === "rectangle" || type === "iframe" || type === "embeddable" || type === "ellipse" || type === "diamond" || type === "arrow" || type === "line";
 var canChangeRoundness = (type) => type === "rectangle" || type === "iframe" || type === "embeddable" || type === "line" || type === "diamond" || type === "image";
@@ -11450,26 +11566,26 @@ var generateLinearCollisionShape = (element) => {
   switch (element.type) {
     case "line":
     case "arrow": {
-      const points = element.points.length ? element.points : [pointFrom11(0, 0)];
+      const points = element.points.length ? element.points : [pointFrom13(0, 0)];
       if (isElbowArrow(element)) {
         return generator.path(generateElbowArrowShape(points, 16), options).sets[0].ops;
       } else if (!element.roundness) {
         return points.map((point, idx) => {
-          const p = pointRotateRads9(
-            pointFrom11(element.x + point[0], element.y + point[1]),
+          const p = pointRotateRads11(
+            pointFrom13(element.x + point[0], element.y + point[1]),
             center,
             element.angle
           );
           return {
             op: idx === 0 ? "move" : "lineTo",
-            data: pointFrom11(p[0] - element.x, p[1] - element.y)
+            data: pointFrom13(p[0] - element.x, p[1] - element.y)
           };
         });
       }
       return generator.curve(points, options).sets[0].ops.slice(0, element.points.length).map((op, i) => {
         if (i === 0) {
-          const p = pointRotateRads9(
-            pointFrom11(
+          const p = pointRotateRads11(
+            pointFrom13(
               element.x + op.data[0],
               element.y + op.data[1]
             ),
@@ -11478,30 +11594,30 @@ var generateLinearCollisionShape = (element) => {
           );
           return {
             op: "move",
-            data: pointFrom11(p[0] - element.x, p[1] - element.y)
+            data: pointFrom13(p[0] - element.x, p[1] - element.y)
           };
         }
         return {
           op: "bcurveTo",
           data: [
-            pointRotateRads9(
-              pointFrom11(
+            pointRotateRads11(
+              pointFrom13(
                 element.x + op.data[0],
                 element.y + op.data[1]
               ),
               center,
               element.angle
             ),
-            pointRotateRads9(
-              pointFrom11(
+            pointRotateRads11(
+              pointFrom13(
                 element.x + op.data[2],
                 element.y + op.data[3]
               ),
               center,
               element.angle
             ),
-            pointRotateRads9(
-              pointFrom11(
+            pointRotateRads11(
+              pointFrom13(
                 element.x + op.data[4],
                 element.y + op.data[5]
               ),
@@ -11509,7 +11625,7 @@ var generateLinearCollisionShape = (element) => {
               element.angle
             )
           ].map(
-            (p) => pointFrom11(p[0] - element.x, p[1] - element.y)
+            (p) => pointFrom13(p[0] - element.x, p[1] - element.y)
           ).flat()
         };
       });
@@ -11524,8 +11640,8 @@ var generateLinearCollisionShape = (element) => {
       );
       return generator.curve(simplifiedPoints, options).sets[0].ops.slice(0, element.points.length).map((op, i) => {
         if (i === 0) {
-          const p = pointRotateRads9(
-            pointFrom11(
+          const p = pointRotateRads11(
+            pointFrom13(
               element.x + op.data[0],
               element.y + op.data[1]
             ),
@@ -11534,30 +11650,30 @@ var generateLinearCollisionShape = (element) => {
           );
           return {
             op: "move",
-            data: pointFrom11(p[0] - element.x, p[1] - element.y)
+            data: pointFrom13(p[0] - element.x, p[1] - element.y)
           };
         }
         return {
           op: "bcurveTo",
           data: [
-            pointRotateRads9(
-              pointFrom11(
+            pointRotateRads11(
+              pointFrom13(
                 element.x + op.data[0],
                 element.y + op.data[1]
               ),
               center,
               element.angle
             ),
-            pointRotateRads9(
-              pointFrom11(
+            pointRotateRads11(
+              pointFrom13(
                 element.x + op.data[2],
                 element.y + op.data[3]
               ),
               center,
               element.angle
             ),
-            pointRotateRads9(
-              pointFrom11(
+            pointRotateRads11(
+              pointFrom13(
                 element.x + op.data[4],
                 element.y + op.data[5]
               ),
@@ -11565,7 +11681,7 @@ var generateLinearCollisionShape = (element) => {
               element.angle
             )
           ].map(
-            (p) => pointFrom11(p[0] - element.x, p[1] - element.y)
+            (p) => pointFrom13(p[0] - element.x, p[1] - element.y)
           ).flat()
         };
       });
@@ -11662,7 +11778,7 @@ var generateElementShape = (element, generator, {
     case "arrow": {
       let shape;
       const options = generateRoughOptions(element);
-      const points = element.points.length ? element.points : [pointFrom11(0, 0)];
+      const points = element.points.length ? element.points : [pointFrom13(0, 0)];
       if (isElbowArrow(element)) {
         if (!points.every(
           (point) => Math.abs(point[0]) <= 1e6 && Math.abs(point[1]) <= 1e6
@@ -11824,14 +11940,14 @@ var getElementShape = (element, elementsMap) => {
       return shouldTestInside(element) ? getClosedCurveShape(
         element,
         roughShape,
-        pointFrom11(element.x, element.y),
+        pointFrom13(element.x, element.y),
         element.angle,
-        pointFrom11(cx, cy)
+        pointFrom13(cx, cy)
       ) : getCurveShape(
         roughShape,
-        pointFrom11(element.x, element.y),
+        pointFrom13(element.x, element.y),
         element.angle,
-        pointFrom11(cx, cy)
+        pointFrom13(cx, cy)
       );
     }
     case "ellipse":
@@ -11840,7 +11956,7 @@ var getElementShape = (element, elementsMap) => {
       const [, , , , cx, cy] = getElementAbsoluteCoords2(element, elementsMap);
       return getFreedrawShape(
         element,
-        pointFrom11(cx, cy),
+        pointFrom13(cx, cy),
         shouldTestInside(element)
       );
     }
@@ -11859,9 +11975,9 @@ var toggleLinePolygonState = (element, nextPolygonState) => {
       firstPoint[1] - lastPoint[1]
     );
     if (distance3 > LINE_POLYGON_POINT_MERGE_DISTANCE || updatedPoints.length < 4) {
-      updatedPoints.push(pointFrom11(firstPoint[0], firstPoint[1]));
+      updatedPoints.push(pointFrom13(firstPoint[0], firstPoint[1]));
     } else {
-      updatedPoints[updatedPoints.length - 1] = pointFrom11(
+      updatedPoints[updatedPoints.length - 1] = pointFrom13(
         firstPoint[0],
         firstPoint[1]
       );
@@ -11915,9 +12031,9 @@ var ElementBounds = class _ElementBounds {
     if (isFreeDrawElement(element)) {
       const [minX, minY, maxX, maxY] = getBoundsFromPoints(
         element.points.map(
-          ([x, y]) => pointRotateRads10(
-            pointFrom12(x, y),
-            pointFrom12(cx - element.x, cy - element.y),
+          ([x, y]) => pointRotateRads12(
+            pointFrom14(x, y),
+            pointFrom14(cx - element.x, cy - element.y),
             element.angle
           )
         )
@@ -11931,24 +12047,24 @@ var ElementBounds = class _ElementBounds {
     } else if (isLinearElement(element)) {
       bounds = getLinearElementRotatedBounds(element, cx, cy, elementsMap);
     } else if (element.type === "diamond") {
-      const [x11, y11] = pointRotateRads10(
-        pointFrom12(cx, y1),
-        pointFrom12(cx, cy),
+      const [x11, y11] = pointRotateRads12(
+        pointFrom14(cx, y1),
+        pointFrom14(cx, cy),
         element.angle
       );
-      const [x12, y12] = pointRotateRads10(
-        pointFrom12(cx, y2),
-        pointFrom12(cx, cy),
+      const [x12, y12] = pointRotateRads12(
+        pointFrom14(cx, y2),
+        pointFrom14(cx, cy),
         element.angle
       );
-      const [x22, y22] = pointRotateRads10(
-        pointFrom12(x1, cy),
-        pointFrom12(cx, cy),
+      const [x22, y22] = pointRotateRads12(
+        pointFrom14(x1, cy),
+        pointFrom14(cx, cy),
         element.angle
       );
-      const [x21, y21] = pointRotateRads10(
-        pointFrom12(x2, cy),
-        pointFrom12(cx, cy),
+      const [x21, y21] = pointRotateRads12(
+        pointFrom14(x2, cy),
+        pointFrom14(cx, cy),
         element.angle
       );
       const minX = Math.min(x11, x12, x22, x21);
@@ -11965,24 +12081,24 @@ var ElementBounds = class _ElementBounds {
       const hh = Math.hypot(h * cos, w * sin);
       bounds = [cx - ww, cy - hh, cx + ww, cy + hh];
     } else {
-      const [x11, y11] = pointRotateRads10(
-        pointFrom12(x1, y1),
-        pointFrom12(cx, cy),
+      const [x11, y11] = pointRotateRads12(
+        pointFrom14(x1, y1),
+        pointFrom14(cx, cy),
         element.angle
       );
-      const [x12, y12] = pointRotateRads10(
-        pointFrom12(x1, y2),
-        pointFrom12(cx, cy),
+      const [x12, y12] = pointRotateRads12(
+        pointFrom14(x1, y2),
+        pointFrom14(cx, cy),
         element.angle
       );
-      const [x22, y22] = pointRotateRads10(
-        pointFrom12(x2, y2),
-        pointFrom12(cx, cy),
+      const [x22, y22] = pointRotateRads12(
+        pointFrom14(x2, y2),
+        pointFrom14(cx, cy),
         element.angle
       );
-      const [x21, y21] = pointRotateRads10(
-        pointFrom12(x2, y1),
-        pointFrom12(cx, cy),
+      const [x21, y21] = pointRotateRads12(
+        pointFrom14(x2, y1),
+        pointFrom14(cx, cy),
         element.angle
       );
       const minX = Math.min(x11, x12, x22, x21);
@@ -12036,20 +12152,38 @@ var getElementLineSegments = (element, elementsMap) => {
     element,
     elementsMap
   );
-  const center = pointFrom12(cx, cy);
+  const center = pointFrom14(cx, cy);
   if (shape.type === "polycurve") {
     const curves = shape.data;
-    const points = curves.map((curve4) => pointsOnBezierCurves(curve4, 10)).flat();
-    let i = 0;
+    const pointsOnCurves = curves.map(
+      (curve4) => pointsOnBezierCurves(curve4, 10)
+    );
     const segments = [];
-    while (i < points.length - 1) {
-      segments.push(
-        lineSegment5(
-          pointFrom12(points[i][0], points[i][1]),
-          pointFrom12(points[i + 1][0], points[i + 1][1])
-        )
-      );
-      i++;
+    if (isLineElement(element) && !element.polygon || isArrowElement(element)) {
+      for (const points of pointsOnCurves) {
+        let i = 0;
+        while (i < points.length - 1) {
+          segments.push(
+            lineSegment6(
+              pointFrom14(points[i][0], points[i][1]),
+              pointFrom14(points[i + 1][0], points[i + 1][1])
+            )
+          );
+          i++;
+        }
+      }
+    } else {
+      const points = pointsOnCurves.flat();
+      let i = 0;
+      while (i < points.length - 1) {
+        segments.push(
+          lineSegment6(
+            pointFrom14(points[i][0], points[i][1]),
+            pointFrom14(points[i + 1][0], points[i + 1][1])
+          )
+        );
+        i++;
+      }
     }
     return segments;
   } else if (shape.type === "polyline") {
@@ -12069,10 +12203,10 @@ var getElementLineSegments = (element, elementsMap) => {
       const container = getContainerElement(element, elementsMap);
       if (container && isLinearElement(container)) {
         const segments2 = [
-          lineSegment5(pointFrom12(x1, y1), pointFrom12(x2, y1)),
-          lineSegment5(pointFrom12(x2, y1), pointFrom12(x2, y2)),
-          lineSegment5(pointFrom12(x2, y2), pointFrom12(x1, y2)),
-          lineSegment5(pointFrom12(x1, y2), pointFrom12(x1, y1))
+          lineSegment6(pointFrom14(x1, y1), pointFrom14(x2, y1)),
+          lineSegment6(pointFrom14(x2, y1), pointFrom14(x2, y2)),
+          lineSegment6(pointFrom14(x2, y2), pointFrom14(x1, y2)),
+          lineSegment6(pointFrom14(x1, y2), pointFrom14(x1, y1))
         ];
         return segments2;
       }
@@ -12080,7 +12214,7 @@ var getElementLineSegments = (element, elementsMap) => {
     const points = shape.data;
     const segments = [];
     for (let i = 0; i < points.length - 1; i++) {
-      segments.push(lineSegment5(points[i], points[i + 1]));
+      segments.push(lineSegment6(points[i], points[i + 1]));
     }
     return segments;
   } else if (shape.type === "ellipse") {
@@ -12095,16 +12229,16 @@ var getElementLineSegments = (element, elementsMap) => {
     [cx, y2],
     [x1, cy],
     [x2, cy]
-  ].map((point) => pointRotateRads10(point, center, element.angle));
+  ].map((point) => pointRotateRads12(point, center, element.angle));
   return [
-    lineSegment5(nw, ne),
-    lineSegment5(sw, se2),
-    lineSegment5(nw, sw),
-    lineSegment5(ne, se2),
-    lineSegment5(nw, e),
-    lineSegment5(sw, e),
-    lineSegment5(ne, w),
-    lineSegment5(se2, w)
+    lineSegment6(nw, ne),
+    lineSegment6(sw, se2),
+    lineSegment6(nw, sw),
+    lineSegment6(ne, se2),
+    lineSegment6(nw, e),
+    lineSegment6(sw, e),
+    lineSegment6(ne, w),
+    lineSegment6(se2, w)
   ];
 };
 var _isRectanguloidElement = (element) => {
@@ -12112,9 +12246,9 @@ var _isRectanguloidElement = (element) => {
 };
 var getRotatedSides = (sides, center, angle) => {
   return sides.map((side) => {
-    return lineSegment5(
-      pointRotateRads10(side[0], center, angle),
-      pointRotateRads10(side[1], center, angle)
+    return lineSegment6(
+      pointRotateRads12(side[0], center, angle),
+      pointRotateRads12(side[1], center, angle)
     );
   });
 };
@@ -12124,14 +12258,14 @@ var getSegmentsOnCurve = (curve4, center, angle) => {
   const segments = [];
   while (i < points.length - 1) {
     segments.push(
-      lineSegment5(
-        pointRotateRads10(
-          pointFrom12(points[i][0], points[i][1]),
+      lineSegment6(
+        pointRotateRads12(
+          pointFrom14(points[i][0], points[i][1]),
           center,
           angle
         ),
-        pointRotateRads10(
-          pointFrom12(points[i + 1][0], points[i + 1][1]),
+        pointRotateRads12(
+          pointFrom14(points[i + 1][0], points[i + 1][1]),
           center,
           angle
         )
@@ -12142,7 +12276,7 @@ var getSegmentsOnCurve = (curve4, center, angle) => {
   return segments;
 };
 var getSegmentsOnEllipse = (ellipse4) => {
-  const center = pointFrom12(
+  const center = pointFrom14(
     ellipse4.x + ellipse4.width / 2,
     ellipse4.y + ellipse4.height / 2
   );
@@ -12156,12 +12290,12 @@ var getSegmentsOnEllipse = (ellipse4) => {
     const t = i * deltaT;
     const x = center[0] + a2 * Math.cos(t);
     const y = center[1] + b2 * Math.sin(t);
-    points.push(pointRotateRads10(pointFrom12(x, y), center, ellipse4.angle));
+    points.push(pointRotateRads12(pointFrom14(x, y), center, ellipse4.angle));
   }
   for (let i = 0; i < points.length - 1; i++) {
-    segments.push(lineSegment5(points[i], points[i + 1]));
+    segments.push(lineSegment6(points[i], points[i + 1]));
   }
-  segments.push(lineSegment5(points[points.length - 1], points[0]));
+  segments.push(lineSegment6(points[points.length - 1], points[0]));
   return segments;
 };
 var getRectangleBoxAbsoluteCoords = (boxSceneCoords) => {
@@ -12239,17 +12373,17 @@ var getCubicBezierCurveBound = (p0, p1, p2, p3) => {
   return [minX, minY, maxX, maxY];
 };
 var getMinMaxXYFromCurvePathOps = (ops, transformXY) => {
-  let currentP = pointFrom12(0, 0);
+  let currentP = pointFrom14(0, 0);
   const { minX, minY, maxX, maxY } = ops.reduce(
     (limits, { op, data }) => {
       if (op === "move") {
         const p = pointFromArray3(data);
-        invariant7(p != null, "Op data is not a point");
+        invariant8(p != null, "Op data is not a point");
         currentP = p;
       } else if (op === "bcurveTo") {
-        const _p1 = pointFrom12(data[0], data[1]);
-        const _p2 = pointFrom12(data[2], data[3]);
-        const _p3 = pointFrom12(data[4], data[5]);
+        const _p1 = pointFrom14(data[0], data[1]);
+        const _p2 = pointFrom14(data[2], data[3]);
+        const _p3 = pointFrom14(data[4], data[5]);
         const p1 = transformXY ? transformXY(_p1) : _p1;
         const p2 = transformXY ? transformXY(_p2) : _p2;
         const p3 = transformXY ? transformXY(_p3) : _p3;
@@ -12330,18 +12464,18 @@ var getArrowheadPoints = (element, shape, position, arrowhead) => {
   }
   const index = position === "start" ? 1 : ops.length - 1;
   const data = ops[index].data;
-  invariant7(data.length === 6, "Op data length is not 6");
-  const p3 = pointFrom12(data[4], data[5]);
-  const p2 = pointFrom12(data[2], data[3]);
-  const p1 = pointFrom12(data[0], data[1]);
+  invariant8(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 prevOp = ops[index - 1];
-  let p0 = pointFrom12(0, 0);
+  let p0 = pointFrom14(0, 0);
   if (prevOp.op === "move") {
     const p = pointFromArray3(prevOp.data);
-    invariant7(p != null, "Op data is not a point");
+    invariant8(p != null, "Op data is not a point");
     p0 = p;
   } else if (prevOp.op === "bcurveTo") {
-    p0 = pointFrom12(prevOp.data[4], prevOp.data[5]);
+    p0 = pointFrom14(prevOp.data[4], prevOp.data[5]);
   }
   const equation = (t, idx) => Math.pow(1 - t, 3) * p3[idx] + 3 * t * Math.pow(1 - t, 2) * p2[idx] + 3 * Math.pow(t, 2) * (1 - t) * p1[idx] + p0[idx] * Math.pow(t, 3);
   const [x2, y2] = position === "start" ? p0 : p3;
@@ -12366,26 +12500,26 @@ var getArrowheadPoints = (element, shape, position, arrowhead) => {
   }
   const angle = getArrowheadAngle(arrowhead);
   if (arrowhead === "crowfoot_many" || arrowhead === "crowfoot_one_or_many") {
-    const [x32, y32] = pointRotateRads10(
-      pointFrom12(x2, y2),
-      pointFrom12(xs, ys),
+    const [x32, y32] = pointRotateRads12(
+      pointFrom14(x2, y2),
+      pointFrom14(xs, ys),
       degreesToRadians(-angle)
     );
-    const [x42, y42] = pointRotateRads10(
-      pointFrom12(x2, y2),
-      pointFrom12(xs, ys),
+    const [x42, y42] = pointRotateRads12(
+      pointFrom14(x2, y2),
+      pointFrom14(xs, ys),
       degreesToRadians(angle)
     );
     return [xs, ys, x32, y32, x42, y42];
   }
-  const [x3, y3] = pointRotateRads10(
-    pointFrom12(xs, ys),
-    pointFrom12(x2, y2),
+  const [x3, y3] = pointRotateRads12(
+    pointFrom14(xs, ys),
+    pointFrom14(x2, y2),
     -angle * Math.PI / 180
   );
-  const [x4, y4] = pointRotateRads10(
-    pointFrom12(xs, ys),
-    pointFrom12(x2, y2),
+  const [x4, y4] = pointRotateRads12(
+    pointFrom14(xs, ys),
+    pointFrom14(x2, y2),
     degreesToRadians(angle)
   );
   if (arrowhead === "diamond" || arrowhead === "diamond_outline") {
@@ -12393,16 +12527,16 @@ var getArrowheadPoints = (element, shape, position, arrowhead) => {
     let oy;
     if (position === "start") {
       const [px, py] = element.points.length > 1 ? element.points[1] : [0, 0];
-      [ox, oy] = pointRotateRads10(
-        pointFrom12(x2 + minSize * 2, y2),
-        pointFrom12(x2, y2),
+      [ox, oy] = pointRotateRads12(
+        pointFrom14(x2 + minSize * 2, y2),
+        pointFrom14(x2, y2),
         Math.atan2(py - y2, px - x2)
       );
     } else {
       const [px, py] = element.points.length > 1 ? element.points[element.points.length - 2] : [0, 0];
-      [ox, oy] = pointRotateRads10(
-        pointFrom12(x2 - minSize * 2, y2),
-        pointFrom12(x2, y2),
+      [ox, oy] = pointRotateRads12(
+        pointFrom14(x2 - minSize * 2, y2),
+        pointFrom14(x2, y2),
         Math.atan2(y2 - py, x2 - px)
       );
     }
@@ -12431,9 +12565,9 @@ var getLinearElementRotatedBounds = (element, cx, cy, elementsMap) => {
   const boundTextElement = getBoundTextElement(element, elementsMap);
   if (element.points.length < 2) {
     const [pointX, pointY] = element.points[0];
-    const [x, y] = pointRotateRads10(
-      pointFrom12(element.x + pointX, element.y + pointY),
-      pointFrom12(cx, cy),
+    const [x, y] = pointRotateRads12(
+      pointFrom14(element.x + pointX, element.y + pointY),
+      pointFrom14(cx, cy),
       element.angle
     );
     let coords2 = [x, y, x, y];
@@ -12456,9 +12590,9 @@ var getLinearElementRotatedBounds = (element, cx, cy, elementsMap) => {
   const cachedShape = ShapeCache.get(element)?.[0];
   const shape = cachedShape ?? generateLinearElementShape(element);
   const ops = getCurvePathOps(shape);
-  const transformXY = ([x, y]) => pointRotateRads10(
-    pointFrom12(element.x + x, element.y + y),
-    pointFrom12(cx, cy),
+  const transformXY = ([x, y]) => pointRotateRads12(
+    pointFrom14(element.x + x, element.y + y),
+    pointFrom14(cx, cy),
     element.angle
   );
   const res = getMinMaxXYFromCurvePathOps(ops, transformXY);
@@ -12569,8 +12703,8 @@ var getClosestElementBounds = (elements, from) => {
   elements.forEach((element) => {
     const [x1, y1, x2, y2] = getElementBounds(element, elementsMap);
     const distance3 = pointDistance7(
-      pointFrom12((x1 + x2) / 2, (y1 + y2) / 2),
-      pointFrom12(from.x, from.y)
+      pointFrom14((x1 + x2) / 2, (y1 + y2) / 2),
+      pointFrom14(from.x, from.y)
     );
     if (distance3 < minDistance) {
       minDistance = distance3;
@@ -12606,7 +12740,7 @@ var getVisibleSceneBounds = ({
     -scrollY + height / zoom.value
   ];
 };
-var getCenterForBounds = (bounds) => pointFrom12(
+var getCenterForBounds = (bounds) => pointFrom14(
   bounds[0] + (bounds[2] - bounds[0]) / 2,
   bounds[1] + (bounds[3] - bounds[1]) / 2
 );
@@ -12620,23 +12754,23 @@ var aabbForElement = (element, elementsMap, offset) => {
     midY: element.y + element.height / 2
   };
   const center = elementCenterPoint(element, elementsMap);
-  const [topLeftX, topLeftY] = pointRotateRads10(
-    pointFrom12(bbox.minX, bbox.minY),
+  const [topLeftX, topLeftY] = pointRotateRads12(
+    pointFrom14(bbox.minX, bbox.minY),
     center,
     element.angle
   );
-  const [topRightX, topRightY] = pointRotateRads10(
-    pointFrom12(bbox.maxX, bbox.minY),
+  const [topRightX, topRightY] = pointRotateRads12(
+    pointFrom14(bbox.maxX, bbox.minY),
     center,
     element.angle
   );
-  const [bottomRightX, bottomRightY] = pointRotateRads10(
-    pointFrom12(bbox.maxX, bbox.maxY),
+  const [bottomRightX, bottomRightY] = pointRotateRads12(
+    pointFrom14(bbox.maxX, bbox.maxY),
     center,
     element.angle
   );
-  const [bottomLeftX, bottomLeftY] = pointRotateRads10(
-    pointFrom12(bbox.minX, bbox.maxY),
+  const [bottomLeftX, bottomLeftY] = pointRotateRads12(
+    pointFrom14(bbox.minX, bbox.maxY),
     center,
     element.angle
   );
@@ -12668,7 +12802,7 @@ var doBoundsIntersect = (bounds1, bounds2) => {
 };
 var elementCenterPoint = (element, elementsMap, xOffset = 0, yOffset = 0) => {
   const [x, y] = getCenterForBounds(getElementBounds(element, elementsMap));
-  return pointFrom12(x + xOffset, y + yOffset);
+  return pointFrom14(x + xOffset, y + yOffset);
 };
 
 // src/sizeHelpers.ts
@@ -12849,7 +12983,6 @@ import {
   arrayToMap as arrayToMap10,
   arrayToObject,
   assertNever as assertNever4,
-  invariant as invariant8,
   isDevEnv as isDevEnv7,
   isShallowEqual as isShallowEqual2,
   isTestEnv as isTestEnv8,
@@ -13496,7 +13629,7 @@ var EphemeralIncrement = class extends StoreIncrement {
     this.change = change;
   }
 };
-var StoreDelta = class {
+var StoreDelta = class _StoreDelta {
   constructor(id, elements, appState) {
     this.id = id;
     this.elements = elements;
@@ -13534,10 +13667,23 @@ var StoreDelta = class {
    */
   static load({
     id,
-    elements: { added, removed, updated }
+    elements: { added, removed, updated },
+    appState: { delta: appStateDelta }
   }) {
     const elements = ElementsDelta.create(added, removed, updated);
-    return new this(id, elements, AppStateDelta.empty());
+    const appState = AppStateDelta.create(appStateDelta);
+    return new this(id, elements, appState);
+  }
+  /**
+   * Squash the passed deltas into the aggregated delta instance.
+   */
+  static squash(...deltas) {
+    const aggregatedDelta = _StoreDelta.empty();
+    for (const delta of deltas) {
+      aggregatedDelta.elements.squash(delta.elements);
+      aggregatedDelta.appState.squash(delta.appState);
+    }
+    return aggregatedDelta;
   }
   /**
    * Inverse store delta, creates new instance of `StoreDelta`.
@@ -13548,9 +13694,7 @@ var StoreDelta = class {
   /**
    * Apply the delta to the passed elements and appState, does not modify the snapshot.
    */
-  static applyTo(delta, elements, appState, options = {
-    excludedProperties: /* @__PURE__ */ new Set()
-  }) {
+  static applyTo(delta, elements, appState, options) {
     const [nextElements, elementsContainVisibleChange] = delta.elements.applyTo(
       elements,
       StoreSnapshot.empty().elements,
@@ -13576,6 +13720,9 @@ var StoreDelta = class {
       }
     );
   }
+  static empty() {
+    return _StoreDelta.create(ElementsDelta.empty(), AppStateDelta.empty());
+  }
   isEmpty() {
     return this.elements.isEmpty() && this.appState.isEmpty();
   }
@@ -13816,8 +13963,7 @@ var getDefaultObservedAppState = () => {
     viewBackgroundColor: COLOR_PALETTE2.white,
     selectedElementIds: {},
     selectedGroupIds: {},
-    selectedLinearElementId: null,
-    selectedLinearElementIsEditing: null,
+    selectedLinearElement: null,
     croppingElementId: null,
     activeLockedId: null,
     lockedMultiSelections: {}
@@ -13833,8 +13979,10 @@ var getObservedAppState = (appState) => {
     croppingElementId: appState.croppingElementId,
     activeLockedId: appState.activeLockedId,
     lockedMultiSelections: appState.lockedMultiSelections,
-    selectedLinearElementId: appState.selectedLinearElement?.elementId ?? appState.selectedLinearElementId ?? null,
-    selectedLinearElementIsEditing: appState.selectedLinearElement?.isEditing ?? appState.selectedLinearElementIsEditing ?? null
+    selectedLinearElement: appState.selectedLinearElement ? {
+      elementId: appState.selectedLinearElement.elementId,
+      isEditing: !!appState.selectedLinearElement.isEditing
+    } : null
   };
   Reflect.defineProperty(observedAppState, hiddenObservedAppStateProp, {
     value: true,
@@ -14398,9 +14546,9 @@ var Scene = class {
   getFramesIncludingDeleted() {
     return this.frames;
   }
-  constructor(elements = null) {
+  constructor(elements = null, options) {
     if (elements) {
-      this.replaceAllElements(elements);
+      this.replaceAllElements(elements, options);
     }
   }
   getSelectedElements(opts) {
@@ -14465,10 +14613,12 @@ var Scene = class {
     }
     return didChange;
   }
-  replaceAllElements(nextElements) {
+  replaceAllElements(nextElements, options) {
     const _nextElements = toArray(nextElements);
     const nextFrameLikes = [];
-    validateIndicesThrottled(_nextElements);
+    if (!options?.skipValidation) {
+      validateIndicesThrottled(_nextElements);
+    }
     this.elements = syncInvalidIndices2(_nextElements);
     this.elementsMap.clear();
     this.elements.forEach((element) => {
@@ -14641,16 +14791,16 @@ var Delta = class _Delta {
   /**
    * Merges two deltas into a new one.
    */
-  static merge(delta1, delta2) {
+  static merge(delta1, delta2, delta3 = _Delta.empty()) {
     return _Delta.create(
-      { ...delta1.deleted, ...delta2.deleted },
-      { ...delta1.inserted, ...delta2.inserted }
+      { ...delta1.deleted, ...delta2.deleted, ...delta3.deleted },
+      { ...delta1.inserted, ...delta2.inserted, ...delta3.inserted }
     );
   }
   /**
    * Merges deleted and inserted object partials.
    */
-  static mergeObjects(prev, added, removed) {
+  static mergeObjects(prev, added, removed = {}) {
     const cloned = { ...prev };
     for (const key of Object.keys(removed)) {
       delete cloned[key];
@@ -14871,6 +15021,9 @@ var AppStateDelta = class _AppStateDelta {
   constructor(delta) {
     this.delta = delta;
   }
+  static create(delta) {
+    return new _AppStateDelta(delta);
+  }
   static calculate(prevAppState, nextAppState) {
     const delta = Delta.calculate(
       prevAppState,
@@ -14893,65 +15046,97 @@ var AppStateDelta = class _AppStateDelta {
     return new _AppStateDelta(inversedDelta);
   }
   squash(delta) {
-    this.delta = Delta.merge(this.delta, delta.delta);
+    if (delta.isEmpty()) {
+      return this;
+    }
+    const mergedDeletedSelectedElementIds = Delta.mergeObjects(
+      this.delta.deleted.selectedElementIds ?? {},
+      delta.delta.deleted.selectedElementIds ?? {}
+    );
+    const mergedInsertedSelectedElementIds = Delta.mergeObjects(
+      this.delta.inserted.selectedElementIds ?? {},
+      delta.delta.inserted.selectedElementIds ?? {}
+    );
+    const mergedDeletedSelectedGroupIds = Delta.mergeObjects(
+      this.delta.deleted.selectedGroupIds ?? {},
+      delta.delta.deleted.selectedGroupIds ?? {}
+    );
+    const mergedInsertedSelectedGroupIds = Delta.mergeObjects(
+      this.delta.inserted.selectedGroupIds ?? {},
+      delta.delta.inserted.selectedGroupIds ?? {}
+    );
+    const mergedDeletedLockedMultiSelections = Delta.mergeObjects(
+      this.delta.deleted.lockedMultiSelections ?? {},
+      delta.delta.deleted.lockedMultiSelections ?? {}
+    );
+    const mergedInsertedLockedMultiSelections = Delta.mergeObjects(
+      this.delta.inserted.lockedMultiSelections ?? {},
+      delta.delta.inserted.lockedMultiSelections ?? {}
+    );
+    const mergedInserted = {};
+    const mergedDeleted = {};
+    if (Object.keys(mergedDeletedSelectedElementIds).length || Object.keys(mergedInsertedSelectedElementIds).length) {
+      mergedDeleted.selectedElementIds = mergedDeletedSelectedElementIds;
+      mergedInserted.selectedElementIds = mergedInsertedSelectedElementIds;
+    }
+    if (Object.keys(mergedDeletedSelectedGroupIds).length || Object.keys(mergedInsertedSelectedGroupIds).length) {
+      mergedDeleted.selectedGroupIds = mergedDeletedSelectedGroupIds;
+      mergedInserted.selectedGroupIds = mergedInsertedSelectedGroupIds;
+    }
+    if (Object.keys(mergedDeletedLockedMultiSelections).length || Object.keys(mergedInsertedLockedMultiSelections).length) {
+      mergedDeleted.lockedMultiSelections = mergedDeletedLockedMultiSelections;
+      mergedInserted.lockedMultiSelections = mergedInsertedLockedMultiSelections;
+    }
+    this.delta = Delta.merge(
+      this.delta,
+      delta.delta,
+      Delta.create(mergedDeleted, mergedInserted)
+    );
     return this;
   }
   applyTo(appState, nextElements) {
     try {
       const {
-        selectedElementIds: removedSelectedElementIds = {},
-        selectedGroupIds: removedSelectedGroupIds = {}
+        selectedElementIds: deletedSelectedElementIds = {},
+        selectedGroupIds: deletedSelectedGroupIds = {},
+        lockedMultiSelections: deletedLockedMultiSelections = {}
       } = this.delta.deleted;
       const {
-        selectedElementIds: addedSelectedElementIds = {},
-        selectedGroupIds: addedSelectedGroupIds = {},
-        selectedLinearElementId,
-        selectedLinearElementIsEditing,
+        selectedElementIds: insertedSelectedElementIds = {},
+        selectedGroupIds: insertedSelectedGroupIds = {},
+        lockedMultiSelections: insertedLockedMultiSelections = {},
+        selectedLinearElement: insertedSelectedLinearElement,
         ...directlyApplicablePartial
       } = this.delta.inserted;
       const mergedSelectedElementIds = Delta.mergeObjects(
         appState.selectedElementIds,
-        addedSelectedElementIds,
-        removedSelectedElementIds
+        insertedSelectedElementIds,
+        deletedSelectedElementIds
       );
       const mergedSelectedGroupIds = Delta.mergeObjects(
         appState.selectedGroupIds,
-        addedSelectedGroupIds,
-        removedSelectedGroupIds
+        insertedSelectedGroupIds,
+        deletedSelectedGroupIds
       );
-      let selectedLinearElement = appState.selectedLinearElement;
-      if (selectedLinearElementId === null) {
-        selectedLinearElement = null;
-      } else if (selectedLinearElementId && nextElements.has(selectedLinearElementId)) {
-        selectedLinearElement = new LinearElementEditor(
-          nextElements.get(
-            selectedLinearElementId
-          ),
-          nextElements,
-          selectedLinearElementIsEditing === true
-          // Can be unknown which is defaulted to false
-        );
-      }
-      if (
-        // Value being 'null' is equivaluent to unknown in this case because it only gets set
-        // to null when 'selectedLinearElementId' is set to null
-        selectedLinearElementIsEditing != null
-      ) {
-        invariant8(
-          selectedLinearElement,
-          `selectedLinearElement is null when selectedLinearElementIsEditing is set to ${selectedLinearElementIsEditing}`
-        );
-        selectedLinearElement = {
-          ...selectedLinearElement,
-          isEditing: selectedLinearElementIsEditing
-        };
-      }
+      const mergedLockedMultiSelections = Delta.mergeObjects(
+        appState.lockedMultiSelections,
+        insertedLockedMultiSelections,
+        deletedLockedMultiSelections
+      );
+      const selectedLinearElement = insertedSelectedLinearElement && nextElements.has(insertedSelectedLinearElement.elementId) ? new LinearElementEditor(
+        nextElements.get(
+          insertedSelectedLinearElement.elementId
+        ),
+        nextElements,
+        insertedSelectedLinearElement.isEditing
+      ) : null;
       const nextAppState = {
         ...appState,
         ...directlyApplicablePartial,
         selectedElementIds: mergedSelectedElementIds,
         selectedGroupIds: mergedSelectedGroupIds,
-        selectedLinearElement
+        lockedMultiSelections: mergedLockedMultiSelections,
+        selectedLinearElement: typeof insertedSelectedLinearElement !== "undefined" ? selectedLinearElement : appState.selectedLinearElement
       };
       const constainsVisibleChanges = this.filterInvisibleChanges(
         appState,
@@ -15041,63 +15226,44 @@ var AppStateDelta = class _AppStateDelta {
               nextAppState[key] = null;
             }
             break;
-          case "selectedLinearElementId": {
-            const appStateKey = _AppStateDelta.convertToAppStateKey(key);
-            const linearElement = nextAppState[appStateKey];
-            if (!linearElement) {
+          case "selectedLinearElement":
+            const nextLinearElement = nextAppState[key];
+            if (!nextLinearElement) {
               visibleDifferenceFlag.value = true;
             } else {
-              const element = nextElements.get(linearElement.elementId);
+              const element = nextElements.get(nextLinearElement.elementId);
               if (element && !element.isDeleted) {
                 visibleDifferenceFlag.value = true;
               } else {
-                nextAppState[appStateKey] = null;
+                nextAppState[key] = null;
               }
             }
             break;
-          }
-          case "selectedLinearElementIsEditing": {
-            const prevIsEditing = prevAppState.selectedLinearElement?.isEditing ?? false;
-            const nextIsEditing = nextAppState.selectedLinearElement?.isEditing ?? false;
-            if (prevIsEditing !== nextIsEditing) {
-              visibleDifferenceFlag.value = true;
-            }
-            break;
-          }
-          case "lockedMultiSelections": {
+          case "lockedMultiSelections":
             const prevLockedUnits = prevAppState[key] || {};
             const nextLockedUnits = nextAppState[key] || {};
             if (!isShallowEqual2(prevLockedUnits, nextLockedUnits)) {
               visibleDifferenceFlag.value = true;
             }
             break;
-          }
-          case "activeLockedId": {
+          case "activeLockedId":
             const prevHitLockedId = prevAppState[key] || null;
             const nextHitLockedId = nextAppState[key] || null;
             if (prevHitLockedId !== nextHitLockedId) {
               visibleDifferenceFlag.value = true;
             }
             break;
-          }
-          default: {
+          default:
             assertNever4(
               key,
               `Unknown ObservedElementsAppState's key "${key}"`,
               true
             );
-          }
         }
       }
     }
     return visibleDifferenceFlag.value;
   }
-  static convertToAppStateKey(key) {
-    switch (key) {
-      case "selectedLinearElementId":
-        return "selectedLinearElement";
-    }
-  }
   static filterSelectedElements(selectedElementIds, elements, visibleDifferenceFlag) {
     const ids = Object.keys(selectedElementIds);
     if (!ids.length) {
@@ -15136,8 +15302,7 @@ var AppStateDelta = class _AppStateDelta {
       editingGroupId,
       selectedGroupIds,
       selectedElementIds,
-      selectedLinearElementId,
-      selectedLinearElementIsEditing,
+      selectedLinearElement,
       croppingElementId,
       lockedMultiSelections,
       activeLockedId,
@@ -15174,12 +15339,6 @@ var AppStateDelta = class _AppStateDelta {
         "lockedMultiSelections",
         (prevValue) => prevValue ?? {}
       );
-      Delta.diffObjects(
-        deleted,
-        inserted,
-        "activeLockedId",
-        (prevValue) => prevValue ?? null
-      );
     } catch (e) {
       console.error(`Couldn't postprocess appstate change deltas.`);
       if (isTestEnv8() || isDevEnv7()) {
@@ -15258,13 +15417,17 @@ var ElementsDelta = class _ElementsDelta {
   static satisfiesCommmonInvariants = ({
     deleted,
     inserted
-  }) => !!(deleted.version && inserted.version && // versions are required integers
-  Number.isInteger(deleted.version) && Number.isInteger(inserted.version) && // versions should be positive, zero included
+  }) => !!// versions are required integers
+  (Number.isInteger(deleted.version) && Number.isInteger(inserted.version) && // versions should be positive, zero included
   deleted.version >= 0 && inserted.version >= 0 && // versions should never be the same
   deleted.version !== inserted.version);
+  static satisfiesUniqueInvariants = (elementsDelta, id) => {
+    const { added, removed, updated } = elementsDelta;
+    return [added[id], removed[id], updated[id]].filter(Boolean).length === 1;
+  };
   static validate(elementsDelta, type, satifiesSpecialInvariants) {
     for (const [id, delta] of Object.entries(elementsDelta[type])) {
-      if (!this.satisfiesCommmonInvariants(delta) || !satifiesSpecialInvariants(delta)) {
+      if (!this.satisfiesCommmonInvariants(delta) || !this.satisfiesUniqueInvariants(elementsDelta, id) || !satifiesSpecialInvariants(delta)) {
         console.error(
           `Broken invariant for "${type}" delta, element "${id}", delta:`,
           delta
@@ -15291,7 +15454,7 @@ var ElementsDelta = class _ElementsDelta {
     for (const prevElement of prevElements.values()) {
       const nextElement = nextElements.get(prevElement.id);
       if (!nextElement) {
-        const deleted = { ...prevElement, isDeleted: false };
+        const deleted = { ...prevElement };
         const inserted = {
           isDeleted: true,
           version: prevElement.version + 1,
@@ -15302,7 +15465,11 @@ var ElementsDelta = class _ElementsDelta {
           inserted,
           _ElementsDelta.stripIrrelevantProps
         );
-        removed[prevElement.id] = delta;
+        if (!prevElement.isDeleted) {
+          removed[prevElement.id] = delta;
+        } else {
+          updated[prevElement.id] = delta;
+        }
       }
     }
     for (const nextElement of nextElements.values()) {
@@ -15314,15 +15481,18 @@ var ElementsDelta = class _ElementsDelta {
           versionNonce: randomInteger4()
         };
         const inserted = {
-          ...nextElement,
-          isDeleted: false
+          ...nextElement
         };
         const delta = Delta.create(
           deleted,
           inserted,
           _ElementsDelta.stripIrrelevantProps
         );
-        added[nextElement.id] = delta;
+        if (!nextElement.isDeleted) {
+          added[nextElement.id] = delta;
+        } else {
+          updated[nextElement.id] = delta;
+        }
         continue;
       }
       if (prevElement.versionNonce !== nextElement.versionNonce) {
@@ -15343,9 +15513,7 @@ var ElementsDelta = class _ElementsDelta {
           }
           continue;
         }
-        if (!Delta.isEmpty(delta)) {
-          updated[nextElement.id] = delta;
-        }
+        updated[nextElement.id] = delta;
       }
     }
     return _ElementsDelta.create(added, removed, updated);
@@ -15435,26 +15603,30 @@ var ElementsDelta = class _ElementsDelta {
       // redistribute the deltas as `isDeleted` could have been updated
     });
   }
-  applyTo(elements, snapshot = StoreSnapshot.empty().elements, options = {
-    excludedProperties: /* @__PURE__ */ new Set()
-  }) {
+  applyTo(elements, snapshot = StoreSnapshot.empty().elements, options) {
     let nextElements = new Map(elements);
     let changedElements;
     const flags = {
       containsVisibleDifference: false,
-      containsZindexDifference: false
+      containsZindexDifference: false,
+      applyDirection: void 0
     };
     try {
       const applyDeltas = _ElementsDelta.createApplier(
+        elements,
         nextElements,
         snapshot,
-        options,
-        flags
+        flags,
+        options
       );
       const addedElements = applyDeltas(this.added);
       const removedElements = applyDeltas(this.removed);
       const updatedElements = applyDeltas(this.updated);
-      const affectedElements = this.resolveConflicts(elements, nextElements);
+      const affectedElements = this.resolveConflicts(
+        elements,
+        nextElements,
+        flags.applyDirection
+      );
       changedElements = new Map([
         ...addedElements,
         ...removedElements,
@@ -15474,9 +15646,7 @@ var ElementsDelta = class _ElementsDelta {
         changedElements,
         flags
       );
-      const tempScene = new Scene(nextElements);
-      _ElementsDelta.redrawTextBoundingBoxes(tempScene, changedElements);
-      _ElementsDelta.redrawBoundArrows(tempScene, changedElements);
+      _ElementsDelta.redrawElements(nextElements, changedElements);
     } catch (e) {
       console.error(
         `Couldn't mutate elements after applying elements change`,
@@ -15490,34 +15660,81 @@ var ElementsDelta = class _ElementsDelta {
     }
   }
   squash(delta) {
+    if (delta.isEmpty()) {
+      return this;
+    }
     const { added, removed, updated } = delta;
+    const mergeBoundElements = (prevDelta, nextDelta) => {
+      const mergedDeletedBoundElements = Delta.mergeArrays(
+        prevDelta.deleted.boundElements ?? [],
+        nextDelta.deleted.boundElements ?? [],
+        void 0,
+        (x) => x.id
+      ) ?? [];
+      const mergedInsertedBoundElements = Delta.mergeArrays(
+        prevDelta.inserted.boundElements ?? [],
+        nextDelta.inserted.boundElements ?? [],
+        void 0,
+        (x) => x.id
+      ) ?? [];
+      if (!mergedDeletedBoundElements.length && !mergedInsertedBoundElements.length) {
+        return;
+      }
+      return Delta.create(
+        {
+          boundElements: mergedDeletedBoundElements
+        },
+        {
+          boundElements: mergedInsertedBoundElements
+        }
+      );
+    };
     for (const [id, nextDelta] of Object.entries(added)) {
-      const prevDelta = this.added[id];
+      const prevDelta = this.added[id] ?? this.removed[id] ?? this.updated[id];
       if (!prevDelta) {
         this.added[id] = nextDelta;
       } else {
-        this.added[id] = Delta.merge(prevDelta, nextDelta);
+        const mergedDelta = mergeBoundElements(prevDelta, nextDelta);
+        delete this.removed[id];
+        delete this.updated[id];
+        this.added[id] = Delta.merge(prevDelta, nextDelta, mergedDelta);
       }
     }
     for (const [id, nextDelta] of Object.entries(removed)) {
-      const prevDelta = this.removed[id];
+      const prevDelta = this.added[id] ?? this.removed[id] ?? this.updated[id];
       if (!prevDelta) {
         this.removed[id] = nextDelta;
       } else {
-        this.removed[id] = Delta.merge(prevDelta, nextDelta);
+        const mergedDelta = mergeBoundElements(prevDelta, nextDelta);
+        delete this.added[id];
+        delete this.updated[id];
+        this.removed[id] = Delta.merge(prevDelta, nextDelta, mergedDelta);
       }
     }
     for (const [id, nextDelta] of Object.entries(updated)) {
-      const prevDelta = this.updated[id];
+      const prevDelta = this.added[id] ?? this.removed[id] ?? this.updated[id];
       if (!prevDelta) {
         this.updated[id] = nextDelta;
       } else {
-        this.updated[id] = Delta.merge(prevDelta, nextDelta);
+        const mergedDelta = mergeBoundElements(prevDelta, nextDelta);
+        const updatedDelta = Delta.merge(prevDelta, nextDelta, mergedDelta);
+        if (prevDelta === this.added[id]) {
+          this.added[id] = updatedDelta;
+        } else if (prevDelta === this.removed[id]) {
+          this.removed[id] = updatedDelta;
+        } else {
+          this.updated[id] = updatedDelta;
+        }
       }
     }
+    if (isTestEnv8() || isDevEnv7()) {
+      _ElementsDelta.validate(this, "added", _ElementsDelta.satisfiesAddition);
+      _ElementsDelta.validate(this, "removed", _ElementsDelta.satisfiesRemoval);
+      _ElementsDelta.validate(this, "updated", _ElementsDelta.satisfiesUpdate);
+    }
     return this;
   }
-  static createApplier = (nextElements, snapshot, options, flags) => (deltas) => {
+  static createApplier = (prevElements, nextElements, snapshot, flags, options) => (deltas) => {
     const getElement = _ElementsDelta.createGetter(
       nextElements,
       snapshot,
@@ -15526,14 +15743,20 @@ var ElementsDelta = class _ElementsDelta {
     return Object.entries(deltas).reduce((acc, [id, delta]) => {
       const element = getElement(id, delta.inserted);
       if (element) {
-        const newElement2 = _ElementsDelta.applyDelta(
+        const nextElement = _ElementsDelta.applyDelta(
           element,
           delta,
-          options,
-          flags
+          flags,
+          options
         );
-        nextElements.set(newElement2.id, newElement2);
-        acc.set(newElement2.id, newElement2);
+        nextElements.set(nextElement.id, nextElement);
+        acc.set(nextElement.id, nextElement);
+        if (!flags.applyDirection) {
+          const prevElement = prevElements.get(id);
+          if (prevElement) {
+            flags.applyDirection = prevElement.version > nextElement.version ? "backward" : "forward";
+          }
+        }
       }
       return acc;
     }, /* @__PURE__ */ new Map());
@@ -15558,13 +15781,13 @@ var ElementsDelta = class _ElementsDelta {
     }
     return element;
   };
-  static applyDelta(element, delta, options, flags) {
+  static applyDelta(element, delta, flags, options) {
     const directlyApplicablePartial = {};
     for (const key of Object.keys(delta.inserted)) {
       if (key === "boundElements") {
         continue;
       }
-      if (options.excludedProperties.has(key)) {
+      if (options?.excludedProperties?.has(key)) {
         continue;
       }
       const value = delta.inserted[key];
@@ -15592,7 +15815,7 @@ var ElementsDelta = class _ElementsDelta {
     if (!flags.containsZindexDifference) {
       flags.containsZindexDifference = delta.deleted.index !== delta.inserted.index;
     }
-    return newElementWith(element, directlyApplicablePartial);
+    return newElementWith(element, directlyApplicablePartial, true);
   }
   /**
    * Check for visible changes regardless of whether they were removed, added or updated.
@@ -15617,25 +15840,32 @@ var ElementsDelta = class _ElementsDelta {
    *
    * @returns all elements affected by the conflict resolution
    */
-  resolveConflicts(prevElements, nextElements) {
+  resolveConflicts(prevElements, nextElements, applyDirection = "forward") {
     const nextAffectedElements = /* @__PURE__ */ new Map();
     const updater = (element, updates) => {
       const nextElement = nextElements.get(element.id);
       if (!nextElement) {
         return;
       }
+      const prevElement = prevElements.get(element.id);
+      const nextVersion = applyDirection === "forward" ? nextElement.version + 1 : nextElement.version - 1;
+      const elementUpdates = updates;
       let affectedElement;
-      if (prevElements.get(element.id) === nextElement) {
+      if (prevElement === nextElement) {
         affectedElement = newElementWith(
           nextElement,
-          updates
+          {
+            ...elementUpdates,
+            version: nextVersion
+          },
+          true
         );
       } else {
-        affectedElement = mutateElement(
-          nextElement,
-          nextElements,
-          updates
-        );
+        affectedElement = mutateElement(nextElement, nextElements, {
+          ...elementUpdates,
+          // don't modify the version further, if it's already different
+          version: prevElement?.version !== nextElement.version ? nextElement.version : nextVersion
+        });
       }
       nextAffectedElements.set(affectedElement.id, affectedElement);
       nextElements.set(affectedElement.id, affectedElement);
@@ -15698,6 +15928,20 @@ var ElementsDelta = class _ElementsDelta {
     );
     BindableElement.rebindAffected(nextElements, nextElement(), updater);
   }
+  static redrawElements(nextElements, changedElements) {
+    try {
+      const tempScene = new Scene(nextElements, { skipValidation: true });
+      _ElementsDelta.redrawTextBoundingBoxes(tempScene, changedElements);
+      _ElementsDelta.redrawBoundArrows(tempScene, changedElements);
+    } catch (e) {
+      console.error(`Couldn't redraw elements`, e);
+      if (isTestEnv8() || isDevEnv7()) {
+        throw e;
+      }
+    } finally {
+      return nextElements;
+    }
+  }
   static redrawTextBoundingBoxes(scene, changed) {
     const elements = scene.getNonDeletedElementsMap();
     const boxesToRedraw = /* @__PURE__ */ new Map();
@@ -16790,7 +17034,7 @@ var embeddableURLValidator = (url, validateEmbeddable) => {
 // src/flowchart.ts
 init_define_import_meta_env();
 import { KEYS as KEYS3, invariant as invariant9, toBrandedType as toBrandedType2 } from "@excalidraw/common";
-import { pointFrom as pointFrom13 } from "@excalidraw/math";
+import { pointFrom as pointFrom15 } from "@excalidraw/math";
 var VERTICAL_OFFSET = 100;
 var HORIZONTAL_OFFSET = 100;
 var getLinkDirectionFromKey = (key) => {
@@ -17070,7 +17314,7 @@ var createBindingArrow = (startBindingElement, endBindingElement, direction, app
     strokeWidth: startBindingElement.strokeWidth,
     opacity: startBindingElement.opacity,
     roughness: startBindingElement.roughness,
-    points: [pointFrom13(0, 0), pointFrom13(endX, endY)],
+    points: [pointFrom15(0, 0), pointFrom15(endX, endY)],
     elbowed: true
   });
   const elementsMap = scene.getNonDeletedElementsMap();
@@ -17354,13 +17598,80 @@ var normalizeSVG = (SVGString) => {
   }
 };
 
+// src/positionElementsOnGrid.ts
+init_define_import_meta_env();
+var positionElementsOnGrid = (elements, centerX, centerY, padding = 50) => {
+  if (!elements || elements.length === 0) {
+    return [];
+  }
+  const res = [];
+  const atomicUnits = Array.isArray(elements[0]) ? elements : elements.map((element) => [element]);
+  const numUnits = atomicUnits.length;
+  const numColumns = Math.max(1, Math.ceil(Math.sqrt(numUnits)));
+  const rows = [];
+  for (let i = 0; i < numUnits; i += numColumns) {
+    rows.push(atomicUnits.slice(i, i + numColumns));
+  }
+  let totalGridActualHeight = 0;
+  const rowProperties = rows.map((rowUnits) => {
+    let rowWidth = 0;
+    let maxUnitHeightInRow = 0;
+    const unitBounds = rowUnits.map((unit) => {
+      const [minX, minY, maxX, maxY] = getCommonBounds(unit);
+      return {
+        elements: unit,
+        bounds: [minX, minY, maxX, maxY],
+        width: maxX - minX,
+        height: maxY - minY
+      };
+    });
+    unitBounds.forEach((unitBound, index) => {
+      rowWidth += unitBound.width;
+      if (index < unitBounds.length - 1) {
+        rowWidth += padding;
+      }
+      if (unitBound.height > maxUnitHeightInRow) {
+        maxUnitHeightInRow = unitBound.height;
+      }
+    });
+    totalGridActualHeight += maxUnitHeightInRow;
+    return {
+      unitBounds,
+      width: rowWidth,
+      maxHeight: maxUnitHeightInRow
+    };
+  });
+  const totalGridHeightWithPadding = totalGridActualHeight + Math.max(0, rows.length - 1) * padding;
+  let currentY = centerY - totalGridHeightWithPadding / 2;
+  rowProperties.forEach((rowProp) => {
+    const { unitBounds, width: rowWidth, maxHeight: rowMaxHeight } = rowProp;
+    let currentX = centerX - rowWidth / 2;
+    unitBounds.forEach((unitBound) => {
+      const [originalMinX, originalMinY] = unitBound.bounds;
+      const offsetX = currentX - originalMinX;
+      const offsetY = currentY - originalMinY;
+      unitBound.elements.forEach((element) => {
+        res.push(
+          newElementWith(element, {
+            x: element.x + offsetX,
+            y: element.y + offsetY
+          })
+        );
+      });
+      currentX += unitBound.width + padding;
+    });
+    currentY += rowMaxHeight + padding;
+  });
+  return res;
+};
+
 // src/resizeElements.ts
 init_define_import_meta_env();
 import {
   pointCenter as pointCenter3,
   normalizeRadians as normalizeRadians2,
-  pointFrom as pointFrom14,
-  pointRotateRads as pointRotateRads11
+  pointFrom as pointFrom16,
+  pointRotateRads as pointRotateRads13
 } from "@excalidraw/math";
 import {
   MIN_FONT_SIZE,
@@ -17488,7 +17799,16 @@ var rotateSingleElement = (element, scene, pointerX, pointerY, shouldRotateWithD
   if (boundTextElementId) {
     const textElement = scene.getElement(boundTextElementId);
     if (textElement && !isArrowElement(element)) {
-      scene.mutateElement(textElement, { angle });
+      const { x, y } = computeBoundTextPosition(
+        element,
+        textElement,
+        scene.getNonDeletedElementsMap()
+      );
+      scene.mutateElement(textElement, {
+        angle,
+        x,
+        y
+      });
     }
   }
 };
@@ -17525,7 +17845,7 @@ var resizeSingleTextElement = (origElement, element, scene, transformHandleType,
     return;
   }
   if (transformHandleType.includes("n") || transformHandleType.includes("s")) {
-    const previousOrigin = pointFrom14(origElement.x, origElement.y);
+    const previousOrigin = pointFrom16(origElement.x, origElement.y);
     const newOrigin = getResizedOrigin(
       previousOrigin,
       origElement.width,
@@ -17566,7 +17886,7 @@ var resizeSingleTextElement = (origElement, element, scene, transformHandleType,
       element.lineHeight
     );
     const newHeight = metrics2.height;
-    const previousOrigin = pointFrom14(origElement.x, origElement.y);
+    const previousOrigin = pointFrom16(origElement.x, origElement.y);
     const newOrigin = getResizedOrigin(
       previousOrigin,
       origElement.width,
@@ -17602,9 +17922,9 @@ var rotateMultipleElements = (originalElements, elements, scene, pointerX, point
       const cx = (x1 + x2) / 2;
       const cy = (y1 + y2) / 2;
       const origAngle = originalElements.get(element.id)?.angle ?? element.angle;
-      const [rotatedCX, rotatedCY] = pointRotateRads11(
-        pointFrom14(cx, cy),
-        pointFrom14(centerX, centerY),
+      const [rotatedCX, rotatedCY] = pointRotateRads13(
+        pointFrom16(cx, cy),
+        pointFrom16(centerX, centerY),
         centerAngle + origAngle - element.angle
       );
       const updates = isElbowArrow(element) ? {
@@ -17621,9 +17941,14 @@ var rotateMultipleElements = (originalElements, elements, scene, pointerX, point
       });
       const boundText = getBoundTextElement(element, elementsMap);
       if (boundText && !isArrowElement(element)) {
+        const { x, y } = computeBoundTextPosition(
+          element,
+          boundText,
+          elementsMap
+        );
         scene.mutateElement(boundText, {
-          x: boundText.x + (rotatedCX - cx),
-          y: boundText.y + (rotatedCY - cy),
+          x,
+          y,
           angle: normalizeRadians2(centerAngle + origAngle)
         });
       }
@@ -17636,44 +17961,44 @@ var getResizeOffsetXY = (transformHandleType, selectedElements, elementsMap, x,
   const cx = (x1 + x2) / 2;
   const cy = (y1 + y2) / 2;
   const angle = selectedElements.length === 1 ? selectedElements[0].angle : 0;
-  [x, y] = pointRotateRads11(
-    pointFrom14(x, y),
-    pointFrom14(cx, cy),
+  [x, y] = pointRotateRads13(
+    pointFrom16(x, y),
+    pointFrom16(cx, cy),
     -angle
   );
   switch (transformHandleType) {
     case "n":
-      return pointRotateRads11(
-        pointFrom14(x - (x1 + x2) / 2, y - y1),
-        pointFrom14(0, 0),
+      return pointRotateRads13(
+        pointFrom16(x - (x1 + x2) / 2, y - y1),
+        pointFrom16(0, 0),
         angle
       );
     case "s":
-      return pointRotateRads11(
-        pointFrom14(x - (x1 + x2) / 2, y - y2),
-        pointFrom14(0, 0),
+      return pointRotateRads13(
+        pointFrom16(x - (x1 + x2) / 2, y - y2),
+        pointFrom16(0, 0),
         angle
       );
     case "w":
-      return pointRotateRads11(
-        pointFrom14(x - x1, y - (y1 + y2) / 2),
-        pointFrom14(0, 0),
+      return pointRotateRads13(
+        pointFrom16(x - x1, y - (y1 + y2) / 2),
+        pointFrom16(0, 0),
         angle
       );
     case "e":
-      return pointRotateRads11(
-        pointFrom14(x - x2, y - (y1 + y2) / 2),
-        pointFrom14(0, 0),
+      return pointRotateRads13(
+        pointFrom16(x - x2, y - (y1 + y2) / 2),
+        pointFrom16(0, 0),
         angle
       );
     case "nw":
-      return pointRotateRads11(pointFrom14(x - x1, y - y1), pointFrom14(0, 0), angle);
+      return pointRotateRads13(pointFrom16(x - x1, y - y1), pointFrom16(0, 0), angle);
     case "ne":
-      return pointRotateRads11(pointFrom14(x - x2, y - y1), pointFrom14(0, 0), angle);
+      return pointRotateRads13(pointFrom16(x - x2, y - y1), pointFrom16(0, 0), angle);
     case "sw":
-      return pointRotateRads11(pointFrom14(x - x1, y - y2), pointFrom14(0, 0), angle);
+      return pointRotateRads13(pointFrom16(x - x1, y - y2), pointFrom16(0, 0), angle);
     case "se":
-      return pointRotateRads11(pointFrom14(x - x2, y - y2), pointFrom14(0, 0), angle);
+      return pointRotateRads13(pointFrom16(x - x2, y - y2), pointFrom16(0, 0), angle);
     default:
       return [0, 0];
   }
@@ -17836,10 +18161,10 @@ var resizeSingleElement = (nextWidth, nextHeight, latestElement, origElement, or
     nextHeight,
     true
   );
-  let previousOrigin = pointFrom14(origElement.x, origElement.y);
+  let previousOrigin = pointFrom16(origElement.x, origElement.y);
   if (isLinearElement(origElement)) {
     const [x1, y1] = getElementBounds(origElement, originalElementsMap);
-    previousOrigin = pointFrom14(x1, y1);
+    previousOrigin = pointFrom16(x1, y1);
   }
   const newOrigin = getResizedOrigin(
     previousOrigin,
@@ -17862,7 +18187,7 @@ var resizeSingleElement = (nextWidth, nextHeight, latestElement, origElement, or
     newOrigin.x += scaledX;
     newOrigin.y += scaledY;
     rescaledPoints.points = rescaledPoints.points.map(
-      (p) => pointFrom14(p[0] - scaledX, p[1] - scaledY)
+      (p) => pointFrom16(p[0] - scaledX, p[1] - scaledY)
     );
   }
   if (nextWidth < 0) {
@@ -17925,11 +18250,11 @@ var getNextSingleWidthAndHeightFromPointer = (latestElement, origElement, handle
     origElement.height,
     true
   );
-  const startTopLeft = pointFrom14(x1, y1);
-  const startBottomRight = pointFrom14(x2, y2);
+  const startTopLeft = pointFrom16(x1, y1);
+  const startBottomRight = pointFrom16(x2, y2);
   const startCenter = pointCenter3(startTopLeft, startBottomRight);
-  const rotatedPointer = pointRotateRads11(
-    pointFrom14(pointerX, pointerY),
+  const rotatedPointer = pointRotateRads13(
+    pointFrom16(pointerX, pointerY),
     startCenter,
     -origElement.angle
   );
@@ -18287,20 +18612,20 @@ var resizeMultipleElements = (selectedElements, elementsMap, handleDirection, sc
 // src/resizeTest.ts
 init_define_import_meta_env();
 import {
-  pointFrom as pointFrom16,
+  pointFrom as pointFrom18,
   pointOnLineSegment,
-  pointRotateRads as pointRotateRads13
+  pointRotateRads as pointRotateRads15
 } from "@excalidraw/math";
-import { SIDE_RESIZING_THRESHOLD } from "@excalidraw/common";
+import {
+  SIDE_RESIZING_THRESHOLD
+} from "@excalidraw/common";
 
 // src/transformHandles.ts
 init_define_import_meta_env();
 import {
-  DEFAULT_TRANSFORM_HANDLE_SPACING,
-  isAndroid,
-  isIOS
+  DEFAULT_TRANSFORM_HANDLE_SPACING
 } from "@excalidraw/common";
-import { pointFrom as pointFrom15, pointRotateRads as pointRotateRads12 } from "@excalidraw/math";
+import { pointFrom as pointFrom17, pointRotateRads as pointRotateRads14 } from "@excalidraw/math";
 var transformHandleSizes = {
   mouse: 8,
   pen: 16,
@@ -18341,24 +18666,21 @@ var OMIT_SIDES_FOR_LINE_BACKSLASH = {
   w: true
 };
 var generateTransformHandle = (x, y, width, height, cx, cy, angle) => {
-  const [xx, yy] = pointRotateRads12(
-    pointFrom15(x + width / 2, y + height / 2),
-    pointFrom15(cx, cy),
+  const [xx, yy] = pointRotateRads14(
+    pointFrom17(x + width / 2, y + height / 2),
+    pointFrom17(cx, cy),
     angle
   );
   return [xx - width / 2, yy - height / 2, width, height];
 };
-var canResizeFromSides = (device) => {
-  if (device.viewport.isMobile) {
-    return false;
-  }
-  if (device.isTouchScreen && (isAndroid || isIOS)) {
+var canResizeFromSides = (editorInterface) => {
+  if (editorInterface.formFactor === "phone" && editorInterface.userAgent.isMobileDevice) {
     return false;
   }
   return true;
 };
-var getOmitSidesForDevice = (device) => {
-  if (canResizeFromSides(device)) {
+var getOmitSidesForEditorInterface = (editorInterface) => {
+  if (canResizeFromSides(editorInterface)) {
     return DEFAULT_OMIT_SIDES;
   }
   return {};
@@ -18508,7 +18830,7 @@ var getTransformHandles = (element, zoom, elementsMap, pointerType = "mouse", om
     isImageElement(element) ? 0 : void 0
   );
 };
-var shouldShowBoundingBox = (elements, appState) => {
+var hasBoundingBox = (elements, appState, editorInterface) => {
   if (appState.selectedLinearElement?.isEditing) {
     return false;
   }
@@ -18522,12 +18844,12 @@ var shouldShowBoundingBox = (elements, appState) => {
   if (!isLinearElement(element)) {
     return true;
   }
-  return element.points.length > 2;
+  return element.points.length > 2 && !editorInterface.userAgent.isMobileDevice;
 };
 
 // src/resizeTest.ts
 var isInsideTransformHandle = (transformHandle, x, y) => x >= transformHandle[0] && x <= transformHandle[0] + transformHandle[2] && y >= transformHandle[1] && y <= transformHandle[1] + transformHandle[3];
-var resizeTest = (element, elementsMap, appState, x, y, zoom, pointerType, device) => {
+var resizeTest = (element, elementsMap, appState, x, y, zoom, pointerType, editorInterface) => {
   if (!appState.selectedElementIds[element.id]) {
     return false;
   }
@@ -18536,7 +18858,7 @@ var resizeTest = (element, elementsMap, appState, x, y, zoom, pointerType, devic
     zoom,
     elementsMap,
     pointerType,
-    getOmitSidesForDevice(device)
+    getOmitSidesForEditorInterface(editorInterface)
   );
   if (rotationTransformHandle && isInsideTransformHandle(rotationTransformHandle, x, y)) {
     return "rotation";
@@ -18551,7 +18873,7 @@ var resizeTest = (element, elementsMap, appState, x, y, zoom, pointerType, devic
   if (filter.length > 0) {
     return filter[0];
   }
-  if (canResizeFromSides(device)) {
+  if (canResizeFromSides(editorInterface)) {
     const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords2(
       element,
       elementsMap
@@ -18560,14 +18882,14 @@ var resizeTest = (element, elementsMap, appState, x, y, zoom, pointerType, devic
       const SPACING = isImageElement(element) ? 0 : SIDE_RESIZING_THRESHOLD / zoom.value;
       const ZOOMED_SIDE_RESIZING_THRESHOLD = SIDE_RESIZING_THRESHOLD / zoom.value;
       const sides = getSelectionBorders(
-        pointFrom16(x1 - SPACING, y1 - SPACING),
-        pointFrom16(x2 + SPACING, y2 + SPACING),
-        pointFrom16(cx, cy),
+        pointFrom18(x1 - SPACING, y1 - SPACING),
+        pointFrom18(x2 + SPACING, y2 + SPACING),
+        pointFrom18(cx, cy),
         element.angle
       );
       for (const [dir, side] of Object.entries(sides)) {
         if (pointOnLineSegment(
-          pointFrom16(x, y),
+          pointFrom18(x, y),
           side,
           ZOOMED_SIDE_RESIZING_THRESHOLD
         )) {
@@ -18578,7 +18900,7 @@ var resizeTest = (element, elementsMap, appState, x, y, zoom, pointerType, devic
   }
   return false;
 };
-var getElementWithTransformHandleType = (elements, appState, scenePointerX, scenePointerY, zoom, pointerType, elementsMap, device) => {
+var getElementWithTransformHandleType = (elements, appState, scenePointerX, scenePointerY, zoom, pointerType, elementsMap, editorInterface) => {
   return elements.reduce((result, element) => {
     if (result) {
       return result;
@@ -18591,18 +18913,18 @@ var getElementWithTransformHandleType = (elements, appState, scenePointerX, scen
       scenePointerY,
       zoom,
       pointerType,
-      device
+      editorInterface
     );
     return transformHandleType ? { element, transformHandleType } : null;
   }, null);
 };
-var getTransformHandleTypeFromCoords = ([x1, y1, x2, y2], scenePointerX, scenePointerY, zoom, pointerType, device) => {
+var getTransformHandleTypeFromCoords = ([x1, y1, x2, y2], scenePointerX, scenePointerY, zoom, pointerType, editorInterface) => {
   const transformHandles = getTransformHandlesFromCoords(
     [x1, y1, x2, y2, (x1 + x2) / 2, (y1 + y2) / 2],
     0,
     zoom,
     pointerType,
-    getOmitSidesForDevice(device)
+    getOmitSidesForEditorInterface(editorInterface)
   );
   const found = Object.keys(transformHandles).find((key) => {
     const transformHandle = transformHandles[key];
@@ -18611,19 +18933,19 @@ var getTransformHandleTypeFromCoords = ([x1, y1, x2, y2], scenePointerX, scenePo
   if (found) {
     return found;
   }
-  if (canResizeFromSides(device)) {
+  if (canResizeFromSides(editorInterface)) {
     const cx = (x1 + x2) / 2;
     const cy = (y1 + y2) / 2;
     const SPACING = SIDE_RESIZING_THRESHOLD / zoom.value;
     const sides = getSelectionBorders(
-      pointFrom16(x1 - SPACING, y1 - SPACING),
-      pointFrom16(x2 + SPACING, y2 + SPACING),
-      pointFrom16(cx, cy),
+      pointFrom18(x1 - SPACING, y1 - SPACING),
+      pointFrom18(x2 + SPACING, y2 + SPACING),
+      pointFrom18(cx, cy),
       0
     );
     for (const [dir, side] of Object.entries(sides)) {
       if (pointOnLineSegment(
-        pointFrom16(scenePointerX, scenePointerY),
+        pointFrom18(scenePointerX, scenePointerY),
         side,
         SPACING
       )) {
@@ -18680,10 +19002,10 @@ var getCursorForResizingElement = (resizingElement) => {
   return cursor ? `${cursor}-resize` : "";
 };
 var getSelectionBorders = ([x1, y1], [x2, y2], center, angle) => {
-  const topLeft = pointRotateRads13(pointFrom16(x1, y1), center, angle);
-  const topRight = pointRotateRads13(pointFrom16(x2, y1), center, angle);
-  const bottomLeft = pointRotateRads13(pointFrom16(x1, y2), center, angle);
-  const bottomRight = pointRotateRads13(pointFrom16(x2, y2), center, angle);
+  const topLeft = pointRotateRads15(pointFrom18(x1, y1), center, angle);
+  const topRight = pointRotateRads15(pointFrom18(x2, y1), center, angle);
+  const bottomLeft = pointRotateRads15(pointFrom18(x1, y2), center, angle);
+  const bottomRight = pointRotateRads15(pointFrom18(x2, y2), center, angle);
   return {
     n: [topLeft, topRight],
     e: [topRight, bottomRight],
@@ -19224,6 +19546,8 @@ export {
   getFrameLikeTitle,
   getFreeDrawPath2D,
   getFreeDrawSvgPath,
+  getFreedrawOutlineAsSegments,
+  getFreedrawOutlinePoints,
   getGlobalFixedPointForBindableElement,
   getGlobalFixedPoints,
   getHeadingForElbowArrowSnap,
@@ -19245,7 +19569,7 @@ export {
   getNonDeletedGroupIds,
   getNormalizedDimensions,
   getObservedAppState,
-  getOmitSidesForDevice,
+  getOmitSidesForEditorInterface,
   getOriginalContainerHeightFromCache,
   getPerfectElementSize,
   getPredecessors,
@@ -19283,6 +19607,7 @@ export {
   handleBindTextResize,
   hasBackground,
   hasBoundTextElement,
+  hasBoundingBox,
   hasStrokeColor,
   hasStrokeStyle,
   hasStrokeWidth,
@@ -19389,6 +19714,7 @@ export {
   parseTokens,
   pathsCache,
   pointInsideBounds,
+  positionElementsOnGrid,
   redrawTextBoundingBox,
   refreshTextDimensions,
   removeAllElementsFromFrame,
@@ -19410,7 +19736,6 @@ export {
   shouldAllowVerticalAlign,
   shouldApplyFrameClip,
   shouldEnableBindingForPointerEvent,
-  shouldShowBoundingBox,
   shouldTestInside,
   showSelectedShapeActions,
   snapToMid,