@excalidraw/element 0.18.0-60b2758 → 0.18.0-699826

package/dist/dev/index.js

@@ -2269,9 +2269,9 @@ import {
   degreesToRadians,
   lineSegment as lineSegment6,
   pointDistance as pointDistance7,
-  pointFrom as pointFrom14,
+  pointFrom as pointFrom13,
   pointFromArray as pointFromArray3,
-  pointRotateRads as pointRotateRads13
+  pointRotateRads as pointRotateRads12
 } from "@excalidraw/math";
 
 // ../utils/src/shape.ts
@@ -2613,9 +2613,9 @@ function ae(e, t = {}) {
 
 // src/shape.ts
 import {
-  pointFrom as pointFrom13,
+  pointFrom as pointFrom12,
   pointDistance as pointDistance6,
-  pointRotateRads as pointRotateRads12
+  pointRotateRads as pointRotateRads11
 } from "@excalidraw/math";
 import {
   ROUGHNESS,
@@ -2632,8 +2632,8 @@ init_define_import_meta_env();
 import {
   isRightAngleRads,
   lineSegment as lineSegment5,
-  pointFrom as pointFrom12,
-  pointRotateRads as pointRotateRads11
+  pointFrom as pointFrom11,
+  pointRotateRads as pointRotateRads10
 } from "@excalidraw/math";
 import {
   BOUND_TEXT_PADDING as BOUND_TEXT_PADDING3,
@@ -3124,7 +3124,7 @@ import {
 } from "@excalidraw/math";
 import {
   DRAGGING_THRESHOLD,
-  KEYS as KEYS2,
+  KEYS,
   shouldRotateWithDiscreteAngle,
   getGridPoint,
   invariant as invariant8,
@@ -3142,7 +3142,6 @@ import {
 // src/binding.ts
 init_define_import_meta_env();
 import {
-  KEYS,
   arrayToMap as arrayToMap2,
   getFeatureFlag,
   invariant as invariant7,
@@ -3375,6 +3374,25 @@ var canBecomePolygon = (points) => {
   return points.length > 3 || // 3-point polygons can't have all points in a single line
   points.length === 3 && !pointsEqual(points[0], points[points.length - 1]);
 };
+var isEligibleFrameChildType = (type) => {
+  switch (type) {
+    case "rectangle":
+    case "diamond":
+    case "ellipse":
+    case "arrow":
+    case "line":
+    case "freedraw":
+    case "text":
+    case "image":
+    case "frame":
+    case "embeddable": {
+      return true;
+    }
+    default: {
+      return false;
+    }
+  }
+};
 
 // src/utils.ts
 var ElementShapesCache = /* @__PURE__ */ new WeakMap();
@@ -3409,12 +3427,12 @@ var setElementShapesCacheEntry = (element, shape, offset) => {
   }
   shapes.set(offset, shape);
 };
-function deconstructLinearOrFreeDrawElement(element) {
+function deconstructLinearOrFreeDrawElement(element, elementsMap) {
   const cachedShape = getElementShapesCacheEntry(element, 0);
   if (cachedShape) {
     return cachedShape;
   }
-  const ops = generateLinearCollisionShape(element);
+  const ops = generateLinearCollisionShape(element, elementsMap);
   const lines = [];
   const curves = [];
   for (let idx = 0; idx < ops.length; idx += 1) {
@@ -3821,7 +3839,7 @@ var getSnapOutlineMidPoint = (point, element, elementsMap, zoom) => {
     )
   ];
   const candidate = sideMidpoints.find(
-    (midpoint2) => pointDistance2(point, midpoint2) <= maxBindingDistance_simple(zoom) + element.strokeWidth / 2 && !hitElementItself({
+    (midpoint) => pointDistance2(point, midpoint) <= maxBindingDistance_simple(zoom) + element.strokeWidth / 2 && !hitElementItself({
       point,
       element,
       threshold: 0,
@@ -3831,19 +3849,21 @@ var getSnapOutlineMidPoint = (point, element, elementsMap, zoom) => {
   );
   return candidate;
 };
-var projectFixedPointOntoDiagonal = (arrow, point, element, startOrEnd, elementsMap, zoom) => {
+var projectFixedPointOntoDiagonal = (arrow, point, element, startOrEnd, elementsMap, zoom, isMidpointSnappingEnabled = true) => {
   invariant2(arrow.points.length >= 2, "Arrow must have at least two points");
   if (arrow.width < 3 && arrow.height < 3) {
     return null;
   }
-  const sideMidPoint = getSnapOutlineMidPoint(
-    point,
-    element,
-    elementsMap,
-    zoom
-  );
-  if (sideMidPoint) {
-    return sideMidPoint;
+  if (isMidpointSnappingEnabled) {
+    const sideMidPoint = getSnapOutlineMidPoint(
+      point,
+      element,
+      elementsMap,
+      zoom
+    );
+    if (sideMidPoint) {
+      return sideMidPoint;
+    }
   }
   const [diagonalOne, diagonalTwo] = getDiagonalsForBindableElement(
     element,
@@ -4315,91 +4335,168 @@ var parseTokens = (line2) => {
   return line2.normalize("NFC").split(breakLineRegex).filter(Boolean);
 };
 var wrapText = (text, font, maxWidth) => {
+  return getWrappedTextLines(text, font, maxWidth).map((line2) => line2.text).join("\n");
+};
+var getHardLineBreaks = (text) => {
+  let offset = 0;
+  return text.split("\n").map((line2) => {
+    const start = offset;
+    const end = start + line2.length;
+    offset = end + 1;
+    return {
+      text: line2,
+      start,
+      end
+    };
+  });
+};
+var getWrappedTextLines = (text, font, maxWidth) => {
   if (!Number.isFinite(maxWidth) || maxWidth < 0) {
-    return text;
+    return getHardLineBreaks(text);
   }
   const lines = [];
-  const originalLines = text.split("\n");
-  for (const originalLine of originalLines) {
-    const currentLineWidth = getLineWidth(originalLine, font);
-    if (currentLineWidth <= maxWidth) {
-      lines.push(originalLine);
-      continue;
+  let offset = 0;
+  for (const originalLine of text.split("\n")) {
+    const originalLineWidth = getLineWidth(originalLine, font);
+    if (originalLineWidth <= maxWidth) {
+      lines.push({
+        text: originalLine,
+        start: offset,
+        end: offset + originalLine.length
+      });
+    } else {
+      lines.push(...wrapLine(originalLine, font, maxWidth, offset));
     }
-    const wrappedLine = wrapLine(originalLine, font, maxWidth);
-    lines.push(...wrappedLine);
+    offset += originalLine.length + 1;
   }
-  return lines.join("\n");
+  return lines;
 };
-var wrapLine = (line2, font, maxWidth) => {
+var wrapLine = (line2, font, maxWidth, lineStart) => {
   const lines = [];
   const tokens = parseTokens(line2);
-  const tokenIterator = tokens[Symbol.iterator]();
   let currentLine = "";
+  let currentLineStart = lineStart;
+  let currentLineEnd = lineStart;
   let currentLineWidth = 0;
-  let iterator = tokenIterator.next();
-  while (!iterator.done) {
-    const token = iterator.value;
+  let tokenOffset = lineStart;
+  let tokenIndex = 0;
+  while (tokenIndex < tokens.length) {
+    const token = tokens[tokenIndex];
+    const tokenStart = tokenOffset;
+    const tokenEnd = tokenStart + token.length;
     const testLine = currentLine + token;
     const testLineWidth = isSingleCharacter(token) ? currentLineWidth + charWidth.calculate(token, font) : getLineWidth(testLine, font);
     if (/\s/.test(token) || testLineWidth <= maxWidth) {
+      if (!currentLine) {
+        currentLineStart = tokenStart;
+      }
       currentLine = testLine;
+      currentLineEnd = tokenEnd;
       currentLineWidth = testLineWidth;
-      iterator = tokenIterator.next();
+      tokenOffset = tokenEnd;
+      tokenIndex++;
       continue;
     }
     if (!currentLine) {
-      const wrappedWord = wrapWord(token, font, maxWidth);
-      const trailingLine = wrappedWord[wrappedWord.length - 1] ?? "";
+      const wrappedWord = wrapWord(token, font, maxWidth, tokenStart);
+      const trailingLine = wrappedWord[wrappedWord.length - 1] ?? {
+        text: "",
+        start: tokenStart,
+        end: tokenStart
+      };
       const precedingLines = wrappedWord.slice(0, -1);
       lines.push(...precedingLines);
-      currentLine = trailingLine;
-      currentLineWidth = getLineWidth(trailingLine, font);
-      iterator = tokenIterator.next();
+      currentLine = trailingLine.text;
+      currentLineStart = trailingLine.start;
+      currentLineEnd = trailingLine.end;
+      currentLineWidth = getLineWidth(trailingLine.text, font);
+      tokenOffset = tokenEnd;
+      tokenIndex++;
     } else {
-      lines.push(currentLine.trimEnd());
+      lines.push(
+        trimLineEndAtSoftBreak(currentLine, currentLineStart, currentLineEnd)
+      );
       currentLine = "";
+      currentLineStart = tokenStart;
+      currentLineEnd = tokenStart;
       currentLineWidth = 0;
     }
   }
   if (currentLine) {
-    const trailingLine = trimLine(currentLine, font, maxWidth);
+    const trailingLine = trimLine(
+      currentLine,
+      currentLineStart,
+      currentLineEnd,
+      font,
+      maxWidth
+    );
     lines.push(trailingLine);
   }
   return lines;
 };
-var wrapWord = (word, font, maxWidth) => {
+var wrapWord = (word, font, maxWidth, wordStart) => {
   if (getEmojiRegex().test(word)) {
-    return [word];
+    return [
+      {
+        text: word,
+        start: wordStart,
+        end: wordStart + word.length
+      }
+    ];
   }
   satisfiesWordInvariant(word);
   const lines = [];
   const chars = Array.from(word);
   let currentLine = "";
+  let currentLineStart = wordStart;
+  let currentLineEnd = wordStart;
   let currentLineWidth = 0;
+  let offset = wordStart;
   for (const char of chars) {
+    const charStart = offset;
+    const charEnd = charStart + char.length;
     const _charWidth = charWidth.calculate(char, font);
     const testLineWidth = currentLineWidth + _charWidth;
     if (testLineWidth <= maxWidth) {
+      if (!currentLine) {
+        currentLineStart = charStart;
+      }
       currentLine = currentLine + char;
+      currentLineEnd = charEnd;
       currentLineWidth = testLineWidth;
+      offset = charEnd;
       continue;
     }
     if (currentLine) {
-      lines.push(currentLine);
+      lines.push({
+        text: currentLine,
+        start: currentLineStart,
+        end: currentLineEnd
+      });
     }
     currentLine = char;
+    currentLineStart = charStart;
+    currentLineEnd = charEnd;
     currentLineWidth = _charWidth;
+    offset = charEnd;
   }
   if (currentLine) {
-    lines.push(currentLine);
+    lines.push({
+      text: currentLine,
+      start: currentLineStart,
+      end: currentLineEnd
+    });
   }
   return lines;
 };
-var trimLine = (line2, font, maxWidth) => {
+var trimLine = (line2, start, end, font, maxWidth) => {
   const shouldTrimWhitespaces = getLineWidth(line2, font) > maxWidth;
   if (!shouldTrimWhitespaces) {
-    return line2;
+    return {
+      text: line2,
+      start,
+      end
+    };
   }
   let [, trimmedLine, whitespaces] = line2.match(/^(.+?)(\s+)$/) ?? [
     line2,
@@ -4416,7 +4513,19 @@ var trimLine = (line2, font, maxWidth) => {
     trimmedLine = trimmedLine + whitespace;
     trimmedLineWidth = testLineWidth;
   }
-  return trimmedLine;
+  return {
+    text: trimmedLine,
+    start,
+    end: end - (line2.length - trimmedLine.length)
+  };
+};
+var trimLineEndAtSoftBreak = (line2, start, end) => {
+  const trimmedLine = line2.trimEnd();
+  return {
+    text: trimmedLine,
+    start,
+    end: end - (line2.length - trimmedLine.length)
+  };
 };
 var isSingleCharacter = (maybeSingleCharacter) => {
   return maybeSingleCharacter.codePointAt(0) !== void 0 && maybeSingleCharacter.codePointAt(1) === void 0;
@@ -4655,7 +4764,8 @@ var getContainerCenter = (container, appState, elementsMap) => {
   if (!midSegmentMidpoint) {
     midSegmentMidpoint = LinearElementEditor.getSegmentMidPoint(
       container,
-      index + 1
+      index + 1,
+      elementsMap
     );
   }
   return { x: midSegmentMidpoint[0], y: midSegmentMidpoint[1] };
@@ -4806,7 +4916,7 @@ var distanceToElement = (element, elementsMap, p) => {
     case "line":
     case "arrow":
     case "freedraw":
-      return distanceToLinearOrFreeDraElement(element, p);
+      return distanceToLinearOrFreeDraElement(element, elementsMap, p);
   }
 };
 var distanceToRectanguloidElement = (element, elementsMap, p) => {
@@ -4835,20 +4945,33 @@ var distanceToEllipseElement = (element, elementsMap, p) => {
     ellipse2(center, element.width / 2, element.height / 2)
   );
 };
-var distanceToLinearOrFreeDraElement = (element, p) => {
-  const [lines, curves] = deconstructLinearOrFreeDrawElement(element);
+var distanceToLinearOrFreeDraElement = (element, elementsMap, p) => {
+  const [lines, curves] = deconstructLinearOrFreeDrawElement(
+    element,
+    elementsMap
+  );
   return Math.min(
     ...lines.map((s) => distanceToLineSegment(p, s)),
     ...curves.map((a2) => curvePointDistance(a2, p))
   );
 };
 
+// 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 === "rectangle" || type === "ellipse" || type === "diamond" || type === "freedraw" || type === "arrow" || type === "line" || type === "text" || type === "embeddable";
+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";
+var toolIsArrow = (type) => type === "arrow";
+var canHaveArrowheads = (type) => type === "arrow";
+
 // src/collision.ts
 var shouldTestInside = (element) => {
   if (element.type === "arrow") {
     return false;
   }
-  const isDraggableFromInside = !isTransparent(element.backgroundColor) || hasBoundTextElement(element) || isIframeLikeElement(element) || isTextElement(element);
+  const isDraggableFromInside = hasBackground(element.type) && !isTransparent(element.backgroundColor) || hasBoundTextElement(element) || isIframeLikeElement(element) || isTextElement(element);
   if (element.type === "line") {
     return isDraggableFromInside && isPathALoop(element.points);
   }
@@ -4885,14 +5008,11 @@ var hitElementItself = ({
     )
   ) : false;
   const bounds = getElementBounds(element, elementsMap, true);
-  const hitBounds = isPointWithinBounds(
-    pointFrom5(bounds[0] - threshold, bounds[1] - threshold),
-    pointRotateRads6(
-      point,
-      getCenterForBounds(bounds),
-      -element.angle
-    ),
-    pointFrom5(bounds[2] + threshold, bounds[3] + threshold)
+  const hitBounds = isPointInRotatedBounds(
+    point,
+    bounds,
+    element.angle,
+    threshold
   );
   if (!hitBounds && !hitFrameName) {
     return false;
@@ -4910,13 +5030,17 @@ var hitElementItself = ({
   cachedHit = result;
   return result;
 };
+var isPointInRotatedBounds = (point, bounds, angle, tolerance = 0) => {
+  const adjustedPoint = angle === 0 ? point : pointRotateRads6(point, getCenterForBounds(bounds), -angle);
+  return isPointWithinBounds(
+    pointFrom5(bounds[0] - tolerance, bounds[1] - tolerance),
+    adjustedPoint,
+    pointFrom5(bounds[2] + tolerance, bounds[3] + tolerance)
+  );
+};
 var hitElementBoundingBox = (point, element, elementsMap, tolerance = 0) => {
-  let [x1, y1, x2, y2] = getElementBounds(element, elementsMap);
-  x1 -= tolerance;
-  y1 -= tolerance;
-  x2 += tolerance;
-  y2 += tolerance;
-  return isPointWithinBounds(pointFrom5(x1, y1), point, pointFrom5(x2, y2));
+  const bounds = getElementBounds(element, elementsMap, true);
+  return isPointInRotatedBounds(point, bounds, element.angle, tolerance);
 };
 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);
@@ -4980,7 +5104,7 @@ var getAllHoveredElementAtPoint = (point, elements, elementsMap, tolerance) => {
     );
     if (isBindableElement(element, false) && bindingBorderTest(element, point, elementsMap, tolerance)) {
       candidateElements.push(element);
-      if (!isTransparent(element.backgroundColor)) {
+      if (hasBackground(element.type) && !isTransparent(element.backgroundColor)) {
         break;
       }
     }
@@ -5075,7 +5199,12 @@ var intersectElementWithLineSegment = (element, elementsMap, line2, offset = 0,
     case "line":
     case "freedraw":
     case "arrow":
-      return intersectLinearOrFreeDrawWithLineSegment(element, line2, onlyFirst);
+      return intersectLinearOrFreeDrawWithLineSegment(
+        element,
+        line2,
+        elementsMap,
+        onlyFirst
+      );
   }
 };
 var curveIntersections = (curves, segment, intersections, center, angle, onlyFirst = false) => {
@@ -5114,8 +5243,11 @@ var lineIntersections = (lines, segment, intersections, center, angle, onlyFirst
   }
   return intersections;
 };
-var intersectLinearOrFreeDrawWithLineSegment = (element, segment, onlyFirst = false) => {
-  const [lines, curves] = deconstructLinearOrFreeDrawElement(element);
+var intersectLinearOrFreeDrawWithLineSegment = (element, segment, elementsMap, onlyFirst = false) => {
+  const [lines, curves] = deconstructLinearOrFreeDrawElement(
+    element,
+    elementsMap
+  );
   const intersections = [];
   for (const l2 of lines) {
     const intersection = lineSegmentIntersectionPoints2(l2, segment);
@@ -5137,7 +5269,9 @@ var intersectLinearOrFreeDrawWithLineSegment = (element, segment, onlyFirst = fa
     if (!doBoundsIntersect(b1, b2)) {
       continue;
     }
-    const hits = curveIntersectLineSegment(c, segment);
+    const hits = curveIntersectLineSegment(c, segment, {
+      iterLimit: 10
+    });
     if (hits.length > 0) {
       intersections.push(...hits);
       if (onlyFirst) {
@@ -6242,7 +6376,7 @@ var getElbowArrowData = (arrow, elementsMap, nextPoints, options) => {
   const origEndGlobalPoint = pointTranslate2(nextPoints[nextPoints.length - 1], vector2(arrow.x, arrow.y));
   let hoveredStartElement = null;
   let hoveredEndElement = null;
-  if (options?.isDragging) {
+  if (options?.isDragging && options?.isBindingEnabled !== false) {
     const elements = Array.from(elementsMap.values());
     hoveredStartElement = getHoveredElement(
       origStartGlobalPoint,
@@ -6273,7 +6407,9 @@ var getElbowArrowData = (arrow, elementsMap, nextPoints, options) => {
     origStartGlobalPoint,
     hoveredStartElement,
     elementsMap,
-    options?.isDragging
+    options?.isDragging,
+    options?.isBindingEnabled,
+    options?.isMidpointSnappingEnabled
   );
   const endGlobalPoint = getGlobalPoint(
     {
@@ -6288,7 +6424,9 @@ var getElbowArrowData = (arrow, elementsMap, nextPoints, options) => {
     origEndGlobalPoint,
     hoveredEndElement,
     elementsMap,
-    options?.isDragging
+    options?.isDragging,
+    options?.isBindingEnabled,
+    options?.isMidpointSnappingEnabled
   );
   const startHeading = getBindPointHeading(
     startGlobalPoint,
@@ -6844,7 +6982,7 @@ var normalizeArrowElementUpdate = (global2, nextFixedSegments, startIsSpecial, e
       vectorScale6(vectorFromPoint6(global2[0]), -1)
     )
   );
-  if (offsetX < -MAX_POS || offsetX > MAX_POS || offsetY < -MAX_POS || offsetY > MAX_POS || offsetX + points[points.length - 1][0] < -MAX_POS || offsetY + points[points.length - 1][0] > MAX_POS || offsetX + points[points.length - 1][1] < -MAX_POS || offsetY + points[points.length - 1][1] > MAX_POS) {
+  if (offsetX < -MAX_POS || offsetX > MAX_POS || offsetY < -MAX_POS || offsetY > MAX_POS || offsetX + points[points.length - 1][0] < -MAX_POS || offsetX + points[points.length - 1][0] > MAX_POS || offsetY + points[points.length - 1][1] < -MAX_POS || offsetY + points[points.length - 1][1] > MAX_POS) {
     console.error(
       "Elbow arrow normalization is outside reasonable bounds (> 1e6)",
       {
@@ -6911,14 +7049,16 @@ var neighborIndexToHeading = (idx) => {
   }
   return HEADING_LEFT;
 };
-var getGlobalPoint = (arrow, startOrEnd, fixedPointRatio, initialPoint, element, elementsMap, isDragging) => {
+var getGlobalPoint = (arrow, startOrEnd, fixedPointRatio, initialPoint, element, elementsMap, isDragging, isBindingEnabled2 = true, isMidpointSnappingEnabled = true) => {
   if (isDragging) {
-    if (element && elementsMap) {
+    if (isBindingEnabled2 && element && elementsMap) {
       return bindPointToSnapToElementOutline(
         arrow,
         element,
         startOrEnd,
-        elementsMap
+        elementsMap,
+        void 0,
+        isMidpointSnappingEnabled
       );
     }
     return initialPoint;
@@ -7079,9 +7219,6 @@ var maxBindingDistance_simple = (zoom) => {
     BASE_BINDING_DISTANCE * 2
   );
 };
-var shouldEnableBindingForPointerEvent = (event) => {
-  return !event[KEYS.CTRL_OR_CMD];
-};
 var isBindingEnabled = (appState) => {
   return appState.isBindingEnabled;
 };
@@ -7099,8 +7236,20 @@ var bindOrUnbindBindingElement = (arrow, draggingPoints, scenePointerX, scenePoi
       finalize: true
     }
   );
-  bindOrUnbindBindingElementEdge(arrow, start, "start", scene);
-  bindOrUnbindBindingElementEdge(arrow, end, "end", scene);
+  bindOrUnbindBindingElementEdge(
+    arrow,
+    start,
+    "start",
+    scene,
+    appState.isBindingEnabled
+  );
+  bindOrUnbindBindingElementEdge(
+    arrow,
+    end,
+    "end",
+    scene,
+    appState.isBindingEnabled
+  );
   if (start.focusPoint || end.focusPoint) {
     const updates = /* @__PURE__ */ new Map();
     if (start.focusPoint) {
@@ -7129,11 +7278,19 @@ var bindOrUnbindBindingElement = (arrow, draggingPoints, scenePointerX, scenePoi
   }
   return { start, end };
 };
-var bindOrUnbindBindingElementEdge = (arrow, { mode, element, focusPoint }, startOrEnd, scene) => {
+var bindOrUnbindBindingElementEdge = (arrow, { mode, element, focusPoint }, startOrEnd, scene, shouldSnapToOutline = true) => {
   if (mode === null) {
     unbindBindingElement(arrow, startOrEnd, scene);
   } else if (mode !== void 0) {
-    bindBindingElement(arrow, element, mode, startOrEnd, scene, focusPoint);
+    bindBindingElement(
+      arrow,
+      element,
+      mode,
+      startOrEnd,
+      scene,
+      focusPoint,
+      shouldSnapToOutline
+    );
   }
 };
 var bindingStrategyForElbowArrowEndpointDragging = (arrow, draggingPoints, elementsMap, elements, zoom) => {
@@ -7429,11 +7586,7 @@ var getBindingStrategyForDraggingBindingElementEndpoints_simple = (arrow, draggi
     threshold: 0,
     overrideShouldTestInside: true
   });
-  if (otherBinding && otherBinding.elementId === hit?.id) {
-    invariant7(
-      !opts?.newArrow || appState.selectedLinearElement?.initialState.origin,
-      "appState.selectedLinearElement.initialState.origin must be defined for new arrows"
-    );
+  if (otherBinding && otherBinding.elementId === hit?.id && (!opts?.newArrow || appState.selectedLinearElement?.initialState.origin)) {
     return {
       start: {
         mode: "inside",
@@ -7487,7 +7640,8 @@ var getBindingStrategyForDraggingBindingElementEndpoints_simple = (arrow, draggi
       hit,
       startDragged ? "start" : "end",
       elementsMap,
-      appState.zoom
+      appState.zoom,
+      appState.isMidpointSnappingEnabled
     ) || globalPoint
   } : { mode: null };
   const otherEndpoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(
@@ -7516,7 +7670,8 @@ var getBindingStrategyForDraggingBindingElementEndpoints_simple = (arrow, draggi
       otherBindableElement,
       startDragged ? "end" : "start",
       elementsMap,
-      appState.zoom
+      appState.zoom,
+      appState.isMidpointSnappingEnabled
     ) || otherEndpoint
   } : { mode: void 0 } : { mode: void 0 };
   return {
@@ -7626,7 +7781,7 @@ var bindOrUnbindBindingElements = (selectedArrows, scene, appState) => {
     );
   });
 };
-var bindBindingElement = (arrow, hoveredElement, mode, startOrEnd, scene, focusPoint) => {
+var bindBindingElement = (arrow, hoveredElement, mode, startOrEnd, scene, focusPoint, shouldSnapToOutline = true) => {
   const elementsMap = scene.getNonDeletedElementsMap();
   let binding;
   if (isElbowArrow(arrow)) {
@@ -7637,7 +7792,8 @@ var bindBindingElement = (arrow, hoveredElement, mode, startOrEnd, scene, focusP
         arrow,
         hoveredElement,
         startOrEnd,
-        elementsMap
+        elementsMap,
+        shouldSnapToOutline
       )
     };
   } else {
@@ -7849,7 +8005,7 @@ var getDistanceForBinding = (point, bindableElement, elementsMap, zoom) => {
   const bindDistance = maxBindingDistance_simple(zoom);
   return distance3 > bindDistance ? null : distance3;
 };
-var bindPointToSnapToElementOutline = (arrowElement, bindableElement, startOrEnd, elementsMap, customIntersector) => {
+var bindPointToSnapToElementOutline = (arrowElement, bindableElement, startOrEnd, elementsMap, customIntersector, isMidpointSnappingEnabled = true) => {
   const elbowed = isElbowArrow(arrowElement);
   const point = LinearElementEditor.getPointAtIndexGlobalCoordinates(
     arrowElement,
@@ -7878,13 +8034,7 @@ var bindPointToSnapToElementOutline = (arrowElement, bindableElement, startOrEnd
     const isHorizontal = headingIsHorizontal(
       headingForPointFromElement(bindableElement, aabb, point)
     );
-    const snapPoint = snapToMid(
-      bindableElement,
-      elementsMap,
-      edgePoint,
-      0.05,
-      arrowElement
-    );
+    const snapPoint = isMidpointSnappingEnabled ? snapToMid(bindableElement, elementsMap, edgePoint, 0.05, arrowElement) : void 0;
     const resolved = snapPoint || point;
     const otherPoint = pointFrom8(
       isHorizontal ? bindableCenter[0] : resolved[0],
@@ -8216,17 +8366,23 @@ var updateBoundPoint = (arrow, startOrEnd, binding, bindableElement, elementsMap
     null
   );
 };
-var calculateFixedPointForElbowArrowBinding = (linearElement, hoveredElement, startOrEnd, elementsMap) => {
+var calculateFixedPointForElbowArrowBinding = (linearElement, hoveredElement, startOrEnd, elementsMap, shouldSnapToOutline = true, isMidpointSnappingEnabled = true) => {
   const bounds = [
     hoveredElement.x,
     hoveredElement.y,
     hoveredElement.x + hoveredElement.width,
     hoveredElement.y + hoveredElement.height
   ];
-  const snappedPoint = bindPointToSnapToElementOutline(
+  const snappedPoint = shouldSnapToOutline ? bindPointToSnapToElementOutline(
     linearElement,
     hoveredElement,
     startOrEnd,
+    elementsMap,
+    void 0,
+    isMidpointSnappingEnabled
+  ) : LinearElementEditor.getPointAtIndexGlobalCoordinates(
+    linearElement,
+    startOrEnd === "start" ? 0 : -1,
     elementsMap
   );
   const globalMidPoint = pointFrom8(
@@ -8240,8 +8396,8 @@ var calculateFixedPointForElbowArrowBinding = (linearElement, hoveredElement, st
   );
   return {
     fixedPoint: normalizeFixedPoint([
-      (nonRotatedSnappedGlobalPoint[0] - hoveredElement.x) / hoveredElement.width,
-      (nonRotatedSnappedGlobalPoint[1] - hoveredElement.y) / hoveredElement.height
+      (nonRotatedSnappedGlobalPoint[0] - hoveredElement.x) / Math.max(hoveredElement.width, PRECISION2),
+      (nonRotatedSnappedGlobalPoint[1] - hoveredElement.y) / Math.max(hoveredElement.height, PRECISION2)
     ])
   };
 };
@@ -8257,8 +8413,8 @@ var calculateFixedPointForNonElbowArrowBinding = (linearElement, hoveredElement,
     elementCenter,
     -hoveredElement.angle
   );
-  const fixedPointX = (nonRotatedPoint[0] - hoveredElement.x) / hoveredElement.width;
-  const fixedPointY = (nonRotatedPoint[1] - hoveredElement.y) / hoveredElement.height;
+  const fixedPointX = (nonRotatedPoint[0] - hoveredElement.x) / Math.max(hoveredElement.width, PRECISION2);
+  const fixedPointY = (nonRotatedPoint[1] - hoveredElement.y) / Math.max(hoveredElement.height, PRECISION2);
   return {
     fixedPoint: normalizeFixedPoint([fixedPointX, fixedPointY])
   };
@@ -8587,10 +8743,10 @@ var normalizeFixedPoint = (fixedPoint) => {
   if (!isFixedPoint(fixedPoint)) {
     return [0.5001, 0.5001];
   }
-  const EPSILON2 = 1e-4;
-  if (Math.abs(fixedPoint[0] - 0.5) < EPSILON2 || Math.abs(fixedPoint[1] - 0.5) < EPSILON2) {
+  const EPSILON = 1e-4;
+  if (Math.abs(fixedPoint[0] - 0.5) < EPSILON || Math.abs(fixedPoint[1] - 0.5) < EPSILON) {
     return fixedPoint.map(
-      (ratio) => Math.abs(ratio - 0.5) < EPSILON2 ? 0.5001 : ratio
+      (ratio) => Math.abs(ratio - 0.5) < EPSILON ? 0.5001 : ratio
     );
   }
   return fixedPoint;
@@ -9083,7 +9239,7 @@ var LinearElementEditor = class _LinearElementEditor {
         elementsMap,
         pivotPoint,
         pointFrom9(scenePointerX, scenePointerY),
-        event[KEYS2.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
+        event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
         customLineAngle
       );
       const target = pointFrom9(
@@ -9098,7 +9254,7 @@ var LinearElementEditor = class _LinearElementEditor {
         elementsMap,
         scenePointerX - linearElementEditor.pointerOffset.x,
         scenePointerY - linearElementEditor.pointerOffset.y,
-        event[KEYS2.CTRL_OR_CMD] ? null : app.getEffectiveGridSize()
+        event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize()
       );
       deltaX = newDraggingPointPosition[0] - point[0];
       deltaY = newDraggingPointPosition[1] - point[1];
@@ -9118,11 +9274,20 @@ var LinearElementEditor = class _LinearElementEditor {
       event.altKey,
       linearElementEditor
     );
-    _LinearElementEditor.movePoints(element, app.scene, positions, {
-      startBinding: updates?.startBinding,
-      endBinding: updates?.endBinding,
-      moveMidPointsWithElement: updates?.moveMidPointsWithElement
-    });
+    _LinearElementEditor.movePoints(
+      element,
+      app.scene,
+      positions,
+      {
+        startBinding: updates?.startBinding,
+        endBinding: updates?.endBinding,
+        moveMidPointsWithElement: updates?.moveMidPointsWithElement
+      },
+      {
+        isBindingEnabled: app.state.isBindingEnabled,
+        isMidpointSnappingEnabled: app.state.isMidpointSnappingEnabled
+      }
+    );
     if (isBindingElement(element, false)) {
       if (isBindingEnabled(app.state)) {
         suggestedBinding = updates?.suggestedBinding ?? null;
@@ -9158,7 +9323,8 @@ var LinearElementEditor = class _LinearElementEditor {
           startBindingElement,
           "start",
           elementsMap,
-          app.state.zoom
+          app.state.zoom,
+          app.state.isMidpointSnappingEnabled
         ) : linearElementEditor.initialState.altFocusPoint
       }
     };
@@ -9192,12 +9358,14 @@ var LinearElementEditor = class _LinearElementEditor {
         return false;
       });
     }
-    invariant8(
-      lastClickedPoint > -1 && selectedPointsIndices.includes(lastClickedPoint) && element.points[lastClickedPoint],
-      `There must be a valid lastClickedPoint in order to drag it. selectedPointsIndices(${JSON.stringify(
-        selectedPointsIndices
-      )}) points(0..${element.points.length - 1}) lastClickedPoint(${lastClickedPoint})`
-    );
+    if (lastClickedPoint < 0 || !selectedPointsIndices.includes(lastClickedPoint) || !element.points[lastClickedPoint]) {
+      console.error(
+        `There must be a valid lastClickedPoint in order to drag it. selectedPointsIndices(${JSON.stringify(
+          selectedPointsIndices
+        )}) points(0..${element.points.length - 1}) lastClickedPoint(${lastClickedPoint}) isElbowArrow: ${elbowed}`
+      );
+      lastClickedPoint = element.points.length - 1;
+    }
     const draggingPoint = element.points[lastClickedPoint];
     const pivotPoint = element.points[lastClickedPoint === 0 ? 1 : lastClickedPoint - 1];
     const singlePointDragged = selectedPointsIndices.length === 1;
@@ -9214,7 +9382,7 @@ var LinearElementEditor = class _LinearElementEditor {
         elementsMap,
         pivotPoint,
         pointFrom9(scenePointerX, scenePointerY),
-        event[KEYS2.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
+        event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
         customLineAngle
       );
       const target = pointFrom9(
@@ -9229,7 +9397,7 @@ var LinearElementEditor = class _LinearElementEditor {
         elementsMap,
         scenePointerX - linearElementEditor.pointerOffset.x,
         scenePointerY - linearElementEditor.pointerOffset.y,
-        event[KEYS2.CTRL_OR_CMD] ? null : app.getEffectiveGridSize()
+        event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize()
       );
       deltaX = newDraggingPointPosition[0] - draggingPoint[0];
       deltaY = newDraggingPointPosition[1] - draggingPoint[1];
@@ -9249,11 +9417,20 @@ var LinearElementEditor = class _LinearElementEditor {
       event.altKey,
       linearElementEditor
     );
-    _LinearElementEditor.movePoints(element, app.scene, positions, {
-      startBinding: updates?.startBinding,
-      endBinding: updates?.endBinding,
-      moveMidPointsWithElement: updates?.moveMidPointsWithElement
-    });
+    _LinearElementEditor.movePoints(
+      element,
+      app.scene,
+      positions,
+      {
+        startBinding: updates?.startBinding,
+        endBinding: updates?.endBinding,
+        moveMidPointsWithElement: updates?.moveMidPointsWithElement
+      },
+      {
+        isBindingEnabled: app.state.isBindingEnabled,
+        isMidpointSnappingEnabled: app.state.isMidpointSnappingEnabled
+      }
+    );
     if (isBindingElement(element, false)) {
       if (isBindingEnabled(app.state) && (startIsSelected || endIsSelected)) {
         suggestedBinding = updates?.suggestedBinding ?? null;
@@ -9306,7 +9483,8 @@ var LinearElementEditor = class _LinearElementEditor {
           altFocusPointBindableElement,
           "start",
           elementsMap,
-          app.state.zoom
+          app.state.zoom,
+          app.state.isMidpointSnappingEnabled
         ) : linearElementEditor.initialState.altFocusPoint
       },
       segmentMidPointHoveredCoords: newSelectedMidPointHoveredCoords,
@@ -9401,7 +9579,8 @@ var LinearElementEditor = class _LinearElementEditor {
         element.points[index],
         element.points[index + 1],
         index,
-        appState.zoom
+        appState.zoom,
+        elementsMap
       )) {
         midpoints.push(null);
         index++;
@@ -9409,7 +9588,8 @@ var LinearElementEditor = class _LinearElementEditor {
       }
       const segmentMidPoint = _LinearElementEditor.getSegmentMidPoint(
         element,
-        index + 1
+        index + 1,
+        elementsMap
       );
       midpoints.push(segmentMidPoint);
       index++;
@@ -9473,7 +9653,7 @@ var LinearElementEditor = class _LinearElementEditor {
     }
     return null;
   };
-  static isSegmentTooShort(element, startPoint, endPoint, index, zoom) {
+  static isSegmentTooShort(element, startPoint, endPoint, index, zoom, elementsMap) {
     if (isElbowArrow(element)) {
       if (index >= 0 && index < element.points.length) {
         return pointDistance5(startPoint, endPoint) * zoom.value < _LinearElementEditor.POINT_HANDLE_SIZE / 2;
@@ -9482,7 +9662,10 @@ var LinearElementEditor = class _LinearElementEditor {
     }
     let distance3 = pointDistance5(startPoint, endPoint);
     if (element.points.length > 2 && element.roundness) {
-      const [lines, curves] = deconstructLinearOrFreeDrawElement2(element);
+      const [lines, curves] = deconstructLinearOrFreeDrawElement2(
+        element,
+        elementsMap
+      );
       invariant8(
         lines.length === 0 && curves.length > 0,
         "Only linears built out of curves are supported"
@@ -9495,7 +9678,7 @@ var LinearElementEditor = class _LinearElementEditor {
     }
     return distance3 * zoom.value < _LinearElementEditor.POINT_HANDLE_SIZE * 4;
   }
-  static getSegmentMidPoint(element, index) {
+  static getSegmentMidPoint(element, index, elementsMap) {
     if (isElbowArrow(element)) {
       invariant8(
         element.points.length >= index,
@@ -9504,7 +9687,10 @@ var LinearElementEditor = class _LinearElementEditor {
       const p = pointCenter2(element.points[index - 1], element.points[index]);
       return pointFrom9(element.x + p[0], element.y + p[1]);
     }
-    const [lines, curves] = deconstructLinearOrFreeDrawElement2(element);
+    const [lines, curves] = deconstructLinearOrFreeDrawElement2(
+      element,
+      elementsMap
+    );
     invariant8(
       lines.length === 0 && curves.length > 0 || lines.length > 0 && curves.length === 0,
       "Only linears built out of either segments or curves are supported"
@@ -9586,7 +9772,7 @@ var LinearElementEditor = class _LinearElementEditor {
               elementsMap,
               scenePointer.x,
               scenePointer.y,
-              event[KEYS2.CTRL_OR_CMD] ? null : app.getEffectiveGridSize()
+              event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize()
             )
           ]
         });
@@ -9699,7 +9885,7 @@ var LinearElementEditor = class _LinearElementEditor {
         elementsMap,
         anchor,
         pointFrom9(scenePointerX, scenePointerY),
-        event[KEYS2.CTRL_OR_CMD] ? null : app.getEffectiveGridSize()
+        event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize()
       );
       newPoint = pointFrom9(width + anchor[0], height + anchor[1]);
     } else {
@@ -9708,7 +9894,7 @@ var LinearElementEditor = class _LinearElementEditor {
         elementsMap,
         scenePointerX - appState.selectedLinearElement.pointerOffset.x,
         scenePointerY - appState.selectedLinearElement.pointerOffset.y,
-        event[KEYS2.CTRL_OR_CMD] || isElbowArrow(element) ? null : app.getEffectiveGridSize()
+        event[KEYS.CTRL_OR_CMD] || isElbowArrow(element) ? null : app.getEffectiveGridSize()
       );
     }
     if (lastPoint === lastUncommittedPoint) {
@@ -9936,7 +10122,7 @@ var LinearElementEditor = class _LinearElementEditor {
       offsetY
     );
   }
-  static movePoints(element, scene, pointUpdates, otherUpdates) {
+  static movePoints(element, scene, pointUpdates, otherUpdates, options) {
     const { points } = element;
     if (isLineElement(element) && element.polygon) {
       const firstPointUpdate = pointUpdates.get(0);
@@ -9979,7 +10165,9 @@ var LinearElementEditor = class _LinearElementEditor {
       offsetY,
       otherUpdates,
       {
-        isDragging: Array.from(pointUpdates.values()).some((t) => t.isDragging)
+        isDragging: Array.from(pointUpdates.values()).some((t) => t.isDragging),
+        isBindingEnabled: options?.isBindingEnabled,
+        isMidpointSnappingEnabled: options?.isMidpointSnappingEnabled
       }
     );
   }
@@ -10022,7 +10210,7 @@ var LinearElementEditor = class _LinearElementEditor {
       pointerDownState: linearElementEditor.initialState,
       selectedPointsIndices: linearElementEditor.selectedPointsIndices
     };
-    const midpoint2 = _LinearElementEditor.createPointAt(
+    const midpoint = _LinearElementEditor.createPointAt(
       element,
       elementsMap,
       pointerCoords.x,
@@ -10031,7 +10219,7 @@ var LinearElementEditor = class _LinearElementEditor {
     );
     const points = [
       ...element.points.slice(0, segmentMidpoint.index),
-      midpoint2,
+      midpoint,
       ...element.points.slice(segmentMidpoint.index)
     ];
     scene.mutateElement(element, { points });
@@ -10058,7 +10246,9 @@ var LinearElementEditor = class _LinearElementEditor {
       updates.points = Array.from(nextPoints);
       scene.mutateElement(element, updates, {
         informMutation: true,
-        isDragging: options?.isDragging ?? false
+        isDragging: options?.isDragging ?? false,
+        isBindingEnabled: options?.isBindingEnabled,
+        isMidpointSnappingEnabled: options?.isMidpointSnappingEnabled
       });
     } else {
       const nextCoords = getElementPointsCoords(element, nextPoints);
@@ -10135,7 +10325,8 @@ var LinearElementEditor = class _LinearElementEditor {
       const index = element.points.length / 2 - 1;
       const midSegmentMidpoint = _LinearElementEditor.getSegmentMidPoint(
         element,
-        index + 1
+        index + 1,
+        elementsMap
       );
       x = midSegmentMidpoint[0] - boundTextElement.width / 2;
       y = midSegmentMidpoint[1] - boundTextElement.height / 2;
@@ -10323,13 +10514,11 @@ var normalizeSelectedPoints = (points) => {
 var pointDraggingUpdates = (selectedPointsIndices, deltaX, deltaY, scenePointerX, scenePointerY, elementsMap, element, elements, app, angleLocked, altKey, linearElementEditor) => {
   const naiveDraggingPoints = new Map(
     selectedPointsIndices.map((pointIndex) => {
+      const point = element.points[pointIndex] ?? element.points.at(-1);
       return [
         pointIndex,
         {
-          point: pointFrom9(
-            element.points[pointIndex][0] + deltaX,
-            element.points[pointIndex][1] + deltaY
-          ),
+          point: pointFrom9(point[0] + deltaX, point[1] + deltaY),
           isDragging: true
         }
       ];
@@ -10365,14 +10554,14 @@ var pointDraggingUpdates = (selectedPointsIndices, deltaX, deltaY, scenePointerX
       updates: {
         suggestedBinding: suggestedBindingElement ? {
           element: suggestedBindingElement,
-          midPoint: snapToMid(
+          midPoint: app.state.isMidpointSnappingEnabled ? snapToMid(
             suggestedBindingElement,
             elementsMap,
             pointFrom9(
               scenePointerX - linearElementEditor.pointerOffset.x,
               scenePointerY - linearElementEditor.pointerOffset.y
             )
-          )
+          ) : void 0
         } : null
       }
     };
@@ -10516,7 +10705,7 @@ var pointDraggingUpdates = (selectedPointsIndices, deltaX, deltaY, scenePointerX
     nextArrow.endBinding.elementId
   ) : null;
   const endLocalPoint = startIsDraggingOverEndElement ? nextArrow.points[nextArrow.points.length - 1] : endIsDraggingOverStartElement && app.state.bindMode !== "inside" && getFeatureFlag2("COMPLEX_BINDINGS") ? nextArrow.points[0] : endBindable ? updateBoundPoint(
-    element,
+    nextArrow,
     "endBinding",
     nextArrow.endBinding,
     endBindable,
@@ -10528,7 +10717,7 @@ var pointDraggingUpdates = (selectedPointsIndices, deltaX, deltaY, scenePointerX
     nextArrow.startBinding.elementId
   ) : null;
   const startLocalPoint = endIsDraggingOverStartElement && getFeatureFlag2("COMPLEX_BINDINGS") ? nextArrow.points[0] : startIsDraggingOverEndElement && app.state.bindMode !== "inside" && getFeatureFlag2("COMPLEX_BINDINGS") ? endLocalPoint : startBindable ? updateBoundPoint(
-    element,
+    nextArrow,
     "startBinding",
     nextArrow.startBinding,
     startBindable,
@@ -10568,188 +10757,15 @@ var determineCustomLinearAngle = (pivotPoint, draggedPoint) => Math.atan2(dragge
 // src/frame.ts
 init_define_import_meta_env();
 import { arrayToMap as arrayToMap5 } from "@excalidraw/common";
-import { isPointWithinBounds as isPointWithinBounds2, pointFrom as pointFrom11 } from "@excalidraw/math";
-
-// ../utils/src/bbox.ts
-init_define_import_meta_env();
-import {
-  vectorCross as vectorCross3,
-  vectorFromPoint as vectorFromPoint9
-} from "@excalidraw/math";
-function getBBox(line2) {
-  return [
-    Math.min(line2[0][0], line2[1][0]),
-    Math.min(line2[0][1], line2[1][1]),
-    Math.max(line2[0][0], line2[1][0]),
-    Math.max(line2[0][1], line2[1][1])
-  ];
-}
-function doBBoxesIntersect(a2, b2) {
-  return a2[0] <= b2[2] && a2[2] >= b2[0] && a2[1] <= b2[3] && a2[3] >= b2[1];
-}
-var EPSILON = 1e-6;
-function isPointOnLine(l2, p) {
-  const p1 = vectorFromPoint9(l2[1], l2[0]);
-  const p2 = vectorFromPoint9(p, l2[0]);
-  const r = vectorCross3(p1, p2);
-  return Math.abs(r) < EPSILON;
-}
-function isPointRightOfLine(l2, p) {
-  const p1 = vectorFromPoint9(l2[1], l2[0]);
-  const p2 = vectorFromPoint9(p, l2[0]);
-  return vectorCross3(p1, p2) < 0;
-}
-function isLineSegmentTouchingOrCrossingLine(a2, b2) {
-  return isPointOnLine(a2, b2[0]) || isPointOnLine(a2, b2[1]) || (isPointRightOfLine(a2, b2[0]) ? !isPointRightOfLine(a2, b2[1]) : isPointRightOfLine(a2, b2[1]));
-}
-function doLineSegmentsIntersect(a2, b2) {
-  return doBBoxesIntersect(getBBox(a2), getBBox(b2)) && isLineSegmentTouchingOrCrossingLine(a2, b2) && isLineSegmentTouchingOrCrossingLine(b2, a2);
-}
-
-// ../utils/src/withinBounds.ts
-init_define_import_meta_env();
-import { arrayToMap as arrayToMap3 } from "@excalidraw/common";
-import { getElementBounds as getElementBounds2 } from "@excalidraw/element";
-import {
-  isArrowElement as isArrowElement2,
-  isExcalidrawElement as isExcalidrawElement2,
-  isFreeDrawElement as isFreeDrawElement2,
-  isLinearElement as isLinearElement2,
-  isTextElement as isTextElement2
-} from "@excalidraw/element";
 import {
-  rangeIncludesValue,
+  isPointWithinBounds as isPointWithinBounds2,
   pointFrom as pointFrom10,
-  pointRotateRads as pointRotateRads10,
-  rangeInclusive
+  segmentsIntersectAt as segmentsIntersectAt2
 } from "@excalidraw/math";
-var getNonLinearElementRelativePoints = (element) => {
-  if (element.type === "diamond") {
-    return [
-      pointFrom10(element.width / 2, 0),
-      pointFrom10(element.width, element.height / 2),
-      pointFrom10(element.width / 2, element.height),
-      pointFrom10(0, element.height / 2)
-    ];
-  }
-  return [
-    pointFrom10(0, 0),
-    pointFrom10(0 + element.width, 0),
-    pointFrom10(0 + element.width, element.height),
-    pointFrom10(0, element.height)
-  ];
-};
-var getElementRelativePoints = (element) => {
-  if (isLinearElement2(element) || isFreeDrawElement2(element)) {
-    return element.points;
-  }
-  return getNonLinearElementRelativePoints(element);
-};
-var getMinMaxPoints = (points) => {
-  const ret = points.reduce(
-    (limits, [x, y]) => {
-      limits.minY = Math.min(limits.minY, y);
-      limits.minX = Math.min(limits.minX, x);
-      limits.maxX = Math.max(limits.maxX, x);
-      limits.maxY = Math.max(limits.maxY, y);
-      return limits;
-    },
-    {
-      minX: Infinity,
-      minY: Infinity,
-      maxX: -Infinity,
-      maxY: -Infinity,
-      cx: 0,
-      cy: 0
-    }
-  );
-  ret.cx = (ret.maxX + ret.minX) / 2;
-  ret.cy = (ret.maxY + ret.minY) / 2;
-  return ret;
-};
-var getRotatedBBox = (element) => {
-  const points = getElementRelativePoints(element);
-  const { cx, cy } = getMinMaxPoints(points);
-  const centerPoint = pointFrom10(cx, cy);
-  const rotatedPoints = points.map(
-    (p) => pointRotateRads10(p, centerPoint, element.angle)
-  );
-  const { minX, minY, maxX, maxY } = getMinMaxPoints(rotatedPoints);
-  return [
-    minX + element.x,
-    minY + element.y,
-    maxX + element.x,
-    maxY + element.y
-  ];
-};
-var isElementInsideBBox = (element, bbox, eitherDirection = false) => {
-  const elementBBox = getRotatedBBox(element);
-  const elementInsideBbox = bbox[0] <= elementBBox[0] && bbox[2] >= elementBBox[2] && bbox[1] <= elementBBox[1] && bbox[3] >= elementBBox[3];
-  if (!eitherDirection) {
-    return elementInsideBbox;
-  }
-  if (elementInsideBbox) {
-    return true;
-  }
-  return elementBBox[0] <= bbox[0] && elementBBox[2] >= bbox[2] && elementBBox[1] <= bbox[1] && elementBBox[3] >= bbox[3];
-};
-var elementPartiallyOverlapsWithOrContainsBBox = (element, bbox) => {
-  const elementBBox = getRotatedBBox(element);
-  return (rangeIncludesValue(elementBBox[0], rangeInclusive(bbox[0], bbox[2])) || rangeIncludesValue(
-    bbox[0],
-    rangeInclusive(elementBBox[0], elementBBox[2])
-  )) && (rangeIncludesValue(elementBBox[1], rangeInclusive(bbox[1], bbox[3])) || rangeIncludesValue(
-    bbox[1],
-    rangeInclusive(elementBBox[1], elementBBox[3])
-  ));
-};
-var elementsOverlappingBBox = ({
-  elements,
-  bounds,
-  type,
-  errorMargin = 0
-}) => {
-  if (isExcalidrawElement2(bounds)) {
-    bounds = getElementBounds2(bounds, arrayToMap3(elements));
-  }
-  const adjustedBBox = [
-    bounds[0] - errorMargin,
-    bounds[1] - errorMargin,
-    bounds[2] + errorMargin,
-    bounds[3] + errorMargin
-  ];
-  const includedElementSet = /* @__PURE__ */ new Set();
-  for (const element of elements) {
-    if (includedElementSet.has(element.id)) {
-      continue;
-    }
-    const isOverlaping = type === "overlap" ? elementPartiallyOverlapsWithOrContainsBBox(element, adjustedBBox) : type === "inside" ? isElementInsideBBox(element, adjustedBBox) : isElementInsideBBox(element, adjustedBBox, true);
-    if (isOverlaping) {
-      includedElementSet.add(element.id);
-      if (element.boundElements) {
-        for (const boundElement of element.boundElements) {
-          includedElementSet.add(boundElement.id);
-        }
-      }
-      if (isTextElement2(element) && element.containerId) {
-        includedElementSet.add(element.containerId);
-      }
-      if (isArrowElement2(element)) {
-        if (element.startBinding) {
-          includedElementSet.add(element.startBinding.elementId);
-        }
-        if (element.endBinding) {
-          includedElementSet.add(element.endBinding?.elementId);
-        }
-      }
-    }
-  }
-  return elements.filter((element) => includedElementSet.has(element.id));
-};
 
 // src/selection.ts
 init_define_import_meta_env();
-import { arrayToMap as arrayToMap4, isShallowEqual as isShallowEqual2 } from "@excalidraw/common";
+import { arrayToMap as arrayToMap3, isShallowEqual as isShallowEqual2 } from "@excalidraw/common";
 
 // src/groups.ts
 init_define_import_meta_env();
@@ -11025,13 +11041,8 @@ var getSelectedElementsByGroup = (selectedElements, elementsMap, appState) => {
 };
 
 // src/selection.ts
-var excludeElementsInFramesFromSelection = (selectedElements) => {
-  const framesInSelection = /* @__PURE__ */ new Set();
-  selectedElements.forEach((element) => {
-    if (isFrameLikeElement(element)) {
-      framesInSelection.add(element.id);
-    }
-  });
+var shouldIgnoreElementFromSelection = (element) => element.locked || isBoundToContainer(element);
+var excludeElementsFromFrames = (selectedElements, framesInSelection) => {
   return selectedElements.filter((element) => {
     if (element.frameId && framesInSelection.has(element.frameId)) {
       return false;
@@ -11039,35 +11050,35 @@ var excludeElementsInFramesFromSelection = (selectedElements) => {
     return true;
   });
 };
-var getElementsWithinSelection = (elements, selection, elementsMap, excludeElementsInFrames = true) => {
-  const [selectionX1, selectionY1, selectionX2, selectionY2] = getElementAbsoluteCoords2(selection, elementsMap);
-  let elementsInSelection = elements.filter((element) => {
-    let [elementX1, elementY1, elementX2, elementY2] = getElementBounds(
-      element,
-      elementsMap
-    );
-    const containingFrame = getContainingFrame(element, elementsMap);
-    if (containingFrame) {
-      const [fx1, fy1, fx2, fy2] = getElementBounds(
-        containingFrame,
-        elementsMap
-      );
-      elementX1 = Math.max(fx1, elementX1);
-      elementY1 = Math.max(fy1, elementY1);
-      elementX2 = Math.min(fx2, elementX2);
-      elementY2 = Math.min(fy2, elementY2);
+var excludeElementsInFramesFromSelection = (selectedElements) => {
+  const framesInSelection = /* @__PURE__ */ new Set();
+  selectedElements.forEach((element) => {
+    if (isFrameLikeElement(element)) {
+      framesInSelection.add(element.id);
     }
-    return element.locked === false && element.type !== "selection" && !isBoundToContainer(element) && selectionX1 <= elementX1 && selectionY1 <= elementY1 && selectionX2 >= elementX2 && selectionY2 >= elementY2;
   });
-  elementsInSelection = excludeElementsInFrames ? excludeElementsInFramesFromSelection(elementsInSelection) : elementsInSelection;
-  elementsInSelection = elementsInSelection.filter((element) => {
-    const containingFrame = getContainingFrame(element, elementsMap);
-    if (containingFrame) {
-      return elementOverlapsWithFrame(element, containingFrame, elementsMap);
-    }
-    return true;
+  return excludeElementsFromFrames(selectedElements, framesInSelection);
+};
+var getElementsWithinSelection = (elements, selection, elementsMap, excludeElementsInFrames = true, boxSelectionMode = "contain") => {
+  const [selectionStartX, selectionStartY, selectionEndX, selectionEndY] = getElementAbsoluteCoords2(selection, elementsMap);
+  const selectionX1 = Math.min(selectionStartX, selectionEndX);
+  const selectionY1 = Math.min(selectionStartY, selectionEndY);
+  const selectionX2 = Math.max(selectionStartX, selectionEndX);
+  const selectionY2 = Math.max(selectionStartY, selectionEndY);
+  const selectionBounds = [
+    selectionX1,
+    selectionY1,
+    selectionX2,
+    selectionY2
+  ];
+  return elementsOverlappingBBox({
+    elements,
+    bounds: selectionBounds,
+    elementsMap,
+    type: boxSelectionMode,
+    shouldIgnoreElementFromSelection,
+    excludeElementsInFrames
   });
-  return elementsInSelection;
 };
 var getVisibleAndNonSelectedElements = (elements, selectedElements, appState, elementsMap) => {
   const selectedElementsSet = new Set(
@@ -11153,7 +11164,7 @@ var _getLinearElementEditor = (targetElements, allElements) => {
       (el) => el.id === linear.id || boundElements.includes(el.id)
     );
     if (onlySingleLinearSelected) {
-      return new LinearElementEditor(linear, arrayToMap4(allElements));
+      return new LinearElementEditor(linear, arrayToMap3(allElements));
     }
   }
   return null;
@@ -11179,9 +11190,263 @@ var getSelectionStateForElements = (targetElements, allElements, appState) => {
     )
   };
 };
+var getActiveTextElement = (selectedElements, appState) => {
+  const activeTextElement = appState.editingTextElement || selectedElements.length === 1 && isTextElement(selectedElements[0]) && selectedElements[0];
+  return activeTextElement || null;
+};
 
-// src/frame.ts
-var bindElementsToFramesAfterDuplication = (nextElements, origElements, origIdToDuplicateId) => {
+// src/fractionalIndex.ts
+init_define_import_meta_env();
+import { arrayToMap as arrayToMap4 } from "@excalidraw/common";
+import {
+  validateOrderKey,
+  generateNKeysBetween
+} from "@excalidraw/fractional-indexing";
+var InvalidFractionalIndexError = class extends Error {
+  code = "ELEMENT_HAS_INVALID_INDEX";
+};
+var validateFractionalIndices = (elements, {
+  shouldThrow = false,
+  includeBoundTextValidation = false,
+  ignoreLogs,
+  reconciliationContext
+}) => {
+  const errorMessages = [];
+  const stringifyElement = (element) => `${element?.index}:${element?.id}:${element?.type}:${element?.isDeleted}:${element?.version}:${element?.versionNonce}`;
+  const indices = elements.map((x) => x.index);
+  for (const [i, index] of indices.entries()) {
+    const predecessorIndex = indices[i - 1];
+    const successorIndex = indices[i + 1];
+    if (!isValidFractionalIndex(index, predecessorIndex, successorIndex)) {
+      errorMessages.push(
+        `Fractional indices invariant has been compromised: "${stringifyElement(
+          elements[i - 1]
+        )}", "${stringifyElement(elements[i])}", "${stringifyElement(
+          elements[i + 1]
+        )}"`
+      );
+    }
+    if (includeBoundTextValidation && hasBoundTextElement(elements[i])) {
+      const container = elements[i];
+      const text = getBoundTextElement(container, arrayToMap4(elements));
+      if (text && text.index <= container.index) {
+        errorMessages.push(
+          `Fractional indices invariant for bound elements has been compromised: "${stringifyElement(
+            text
+          )}", "${stringifyElement(container)}"`
+        );
+      }
+    }
+  }
+  if (errorMessages.length) {
+    const error = new InvalidFractionalIndexError();
+    const additionalContext = [];
+    if (reconciliationContext) {
+      additionalContext.push("Additional reconciliation context:");
+      additionalContext.push(
+        reconciliationContext.localElements.map((x) => stringifyElement(x))
+      );
+      additionalContext.push(
+        reconciliationContext.remoteElements.map((x) => stringifyElement(x))
+      );
+    }
+    if (!ignoreLogs) {
+      console.error(
+        errorMessages.join("\n\n"),
+        error.stack,
+        elements.map((x) => stringifyElement(x)),
+        ...additionalContext
+      );
+    }
+    if (shouldThrow) {
+      throw error;
+    }
+  }
+};
+var orderByFractionalIndex = (elements) => {
+  return elements.sort((a2, b2) => {
+    if (isOrderedElement(a2) && isOrderedElement(b2)) {
+      if (a2.index < b2.index) {
+        return -1;
+      } else if (a2.index > b2.index) {
+        return 1;
+      }
+      return a2.id < b2.id ? -1 : 1;
+    }
+    return 1;
+  });
+};
+var syncMovedIndices = (elements, movedElements) => {
+  try {
+    const elementsMap = arrayToMap4(elements);
+    const indicesGroups = getMovedIndicesGroups(elements, movedElements);
+    const elementsUpdates = generateIndices(elements, indicesGroups);
+    const elementsCandidates = elements.map((x) => {
+      const elementUpdates = elementsUpdates.get(x);
+      if (elementUpdates) {
+        return { ...x, index: elementUpdates.index };
+      }
+      return x;
+    });
+    validateFractionalIndices(
+      elementsCandidates,
+      // we don't autofix invalid bound text indices, hence don't include it in the validation
+      {
+        includeBoundTextValidation: false,
+        shouldThrow: true,
+        ignoreLogs: true
+      }
+    );
+    for (const [element, { index }] of elementsUpdates) {
+      mutateElement(element, elementsMap, { index });
+    }
+  } catch (e) {
+    syncInvalidIndices(elements);
+  }
+  return elements;
+};
+var syncInvalidIndices = (elements) => {
+  const elementsMap = arrayToMap4(elements);
+  const indicesGroups = getInvalidIndicesGroups(elements);
+  const elementsUpdates = generateIndices(elements, indicesGroups);
+  for (const [element, { index }] of elementsUpdates) {
+    mutateElement(element, elementsMap, { index });
+  }
+  return elements;
+};
+var syncInvalidIndicesImmutable = (elements) => {
+  const syncedElements = arrayToMap4(elements);
+  const indicesGroups = getInvalidIndicesGroups(elements);
+  const elementsUpdates = generateIndices(elements, indicesGroups);
+  for (const [element, { index }] of elementsUpdates) {
+    syncedElements.set(element.id, newElementWith(element, { index }));
+  }
+  return syncedElements;
+};
+var getMovedIndicesGroups = (elements, movedElements) => {
+  const indicesGroups = [];
+  let i = 0;
+  while (i < elements.length) {
+    if (movedElements.has(elements[i].id)) {
+      const indicesGroup = [i - 1, i];
+      while (++i < elements.length) {
+        if (!movedElements.has(elements[i].id)) {
+          break;
+        }
+        indicesGroup.push(i);
+      }
+      indicesGroup.push(i);
+      indicesGroups.push(indicesGroup);
+    } else {
+      i++;
+    }
+  }
+  return indicesGroups;
+};
+var getInvalidIndicesGroups = (elements) => {
+  const indicesGroups = [];
+  let lowerBound = void 0;
+  let upperBound = void 0;
+  let lowerBoundIndex = -1;
+  let upperBoundIndex = 0;
+  const getLowerBound = (index) => {
+    const lowerBound2 = elements[lowerBoundIndex] ? elements[lowerBoundIndex].index : void 0;
+    const candidate = elements[index - 1]?.index;
+    if (!lowerBound2 && candidate || // first lowerBound
+    lowerBound2 && candidate && candidate > lowerBound2) {
+      return [candidate, index - 1];
+    }
+    return [lowerBound2, lowerBoundIndex];
+  };
+  const getUpperBound = (index) => {
+    const upperBound2 = elements[upperBoundIndex] ? elements[upperBoundIndex].index : void 0;
+    if (upperBound2 && index < upperBoundIndex) {
+      return [upperBound2, upperBoundIndex];
+    }
+    let i2 = upperBoundIndex;
+    while (++i2 < elements.length) {
+      const candidate = elements[i2]?.index;
+      if (!upperBound2 && candidate || // first upperBound
+      upperBound2 && candidate && candidate > upperBound2) {
+        return [candidate, i2];
+      }
+    }
+    return [void 0, i2];
+  };
+  let i = 0;
+  while (i < elements.length) {
+    const current = elements[i].index;
+    [lowerBound, lowerBoundIndex] = getLowerBound(i);
+    [upperBound, upperBoundIndex] = getUpperBound(i);
+    if (!isValidFractionalIndex(current, lowerBound, upperBound)) {
+      const indicesGroup = [lowerBoundIndex, i];
+      while (++i < elements.length) {
+        const current2 = elements[i].index;
+        const [nextLowerBound, nextLowerBoundIndex] = getLowerBound(i);
+        const [nextUpperBound, nextUpperBoundIndex] = getUpperBound(i);
+        if (isValidFractionalIndex(current2, nextLowerBound, nextUpperBound)) {
+          break;
+        }
+        [lowerBound, lowerBoundIndex] = [nextLowerBound, nextLowerBoundIndex];
+        [upperBound, upperBoundIndex] = [nextUpperBound, nextUpperBoundIndex];
+        indicesGroup.push(i);
+      }
+      indicesGroup.push(upperBoundIndex);
+      indicesGroups.push(indicesGroup);
+    } else {
+      i++;
+    }
+  }
+  return indicesGroups;
+};
+var isValidFractionalIndex = (index, predecessor, successor) => {
+  if (!index) {
+    return false;
+  }
+  try {
+    validateOrderKey(index);
+  } catch {
+    return false;
+  }
+  if (predecessor && successor) {
+    return predecessor < index && index < successor;
+  }
+  if (!predecessor && successor) {
+    return index < successor;
+  }
+  if (predecessor && !successor) {
+    return predecessor < index;
+  }
+  return !!index;
+};
+var generateIndices = (elements, indicesGroups) => {
+  const elementsUpdates = /* @__PURE__ */ new Map();
+  for (const indices of indicesGroups) {
+    const lowerBoundIndex = indices.shift();
+    const upperBoundIndex = indices.pop();
+    const fractionalIndices = generateNKeysBetween(
+      elements[lowerBoundIndex]?.index,
+      elements[upperBoundIndex]?.index,
+      indices.length
+    );
+    for (let i = 0; i < indices.length; i++) {
+      const element = elements[indices[i]];
+      elementsUpdates.set(element, {
+        index: fractionalIndices[i]
+      });
+    }
+  }
+  return elementsUpdates;
+};
+var isOrderedElement = (element) => {
+  if (element.index) {
+    return true;
+  }
+  return false;
+};
+
+// src/frame.ts
+var bindElementsToFramesAfterDuplication = (nextElements, origElements, origIdToDuplicateId) => {
   const nextElementMap = arrayToMap5(nextElements);
   for (const element of origElements) {
     if (element.frameId) {
@@ -11201,7 +11466,7 @@ function isElementIntersectingFrame(element, frame, elementsMap) {
   const elementLineSegments = getElementLineSegments(element, elementsMap);
   const intersecting = frameLineSegments.some(
     (frameLineSegment) => elementLineSegments.some(
-      (elementLineSegment) => doLineSegmentsIntersect(frameLineSegment, elementLineSegment)
+      (elementLineSegment) => segmentsIntersectAt2(frameLineSegment, elementLineSegment)
     )
   );
   return intersecting;
@@ -11212,8 +11477,9 @@ var getElementsCompletelyInFrame = (elements, frame, elementsMap) => omitGroupsC
   (element) => !isFrameLikeElement(element) && !element.frameId || element.frameId === frame.id
 );
 var isElementContainingFrame = (element, frame, elementsMap) => {
-  return getElementsWithinSelection([frame], element, elementsMap).some(
-    (e) => e.id === frame.id
+  return boundsContainBounds(
+    getElementBounds(element, elementsMap),
+    getElementBounds(frame, elementsMap)
   );
 };
 var getElementsIntersectingFrame = (elements, frame) => {
@@ -11236,9 +11502,9 @@ var elementOverlapsWithFrame = (element, frame, elementsMap) => {
 var isCursorInFrame = (cursorCoords, frame, elementsMap) => {
   const [fx1, fy1, fx2, fy2] = getElementAbsoluteCoords2(frame, elementsMap);
   return isPointWithinBounds2(
-    pointFrom11(fx1, fy1),
-    pointFrom11(cursorCoords.x, cursorCoords.y),
-    pointFrom11(fx2, fy2)
+    pointFrom10(fx1, fy1),
+    pointFrom10(cursorCoords.x, cursorCoords.y),
+    pointFrom10(fx2, fy2)
   );
 };
 var groupsAreAtLeastIntersectingTheFrame = (elements, groupIds, frame) => {
@@ -11446,16 +11712,35 @@ var filterElementsEligibleAsFrameChildren = (elements, frame) => {
   }
   return eligibleElements;
 };
-var addElementsToFrame = (allElements, elementsToAdd, frame, appState) => {
-  const elementsMap = arrayToMap5(allElements);
-  const currTargetFrameChildrenMap = /* @__PURE__ */ new Map();
-  for (const element of allElements.values()) {
-    if (element.frameId === frame.id) {
-      currTargetFrameChildrenMap.set(element.id, true);
+var getCommonFrameId = (elements) => {
+  let commonFrameId;
+  for (const element of elements) {
+    if (isFrameLikeElement(element) || !element.frameId) {
+      return null;
+    }
+    if (commonFrameId === void 0) {
+      commonFrameId = element.frameId;
+    } else if (commonFrameId !== element.frameId) {
+      return null;
+    }
+  }
+  return commonFrameId ?? null;
+};
+var getFrameChildrenInsertionIndex = (elements, frameId) => {
+  for (let index = elements.length - 1; index >= 0; index--) {
+    const element = elements[index];
+    if (element.id === frameId) {
+      return index;
+    } else if (element.frameId === frameId) {
+      return index + 1;
     }
   }
-  const suppliedElementsToAddSet = new Set(elementsToAdd.map((el) => el.id));
-  const finalElementsToAdd = [];
+  return null;
+};
+var addElementsToFrame = (allElements, elementsToAdd, frame) => {
+  const elementsMap = arrayToMap5(allElements);
+  const commonFrameId = getCommonFrameId(elementsToAdd);
+  const finalElementsToAdd = /* @__PURE__ */ new Set();
   const otherFrames = /* @__PURE__ */ new Set();
   for (const element of elementsToAdd) {
     if (isFrameLikeElement(element) && element.id !== frame.id) {
@@ -11469,23 +11754,41 @@ var addElementsToFrame = (allElements, elementsToAdd, frame, appState) => {
     if (isFrameLikeElement(element) || element.frameId && otherFrames.has(element.frameId)) {
       continue;
     }
-    if (element.frameId && appState.selectedElementIds[element.id] && appState.selectedElementIds[element.frameId]) {
-      continue;
-    }
-    if (!currTargetFrameChildrenMap.has(element.id)) {
-      finalElementsToAdd.push(element);
-    }
+    finalElementsToAdd.add(element);
     const boundTextElement = getBoundTextElement(element, elementsMap);
-    if (boundTextElement && !suppliedElementsToAddSet.has(boundTextElement.id) && !currTargetFrameChildrenMap.has(boundTextElement.id)) {
-      finalElementsToAdd.push(boundTextElement);
+    if (boundTextElement && !finalElementsToAdd.has(boundTextElement)) {
+      finalElementsToAdd.add(boundTextElement);
     }
   }
   for (const element of finalElementsToAdd) {
-    mutateElement(element, elementsMap, {
-      frameId: frame.id
-    });
+    if (element.frameId !== frame.id) {
+      mutateElement(element, elementsMap, {
+        frameId: frame.id
+      });
+    }
   }
-  return allElements;
+  if (!finalElementsToAdd.size || // if all elements to add already belong to the frame, then we don't want to
+  // reorder (case: we're dragging element children within the frame)
+  commonFrameId === frame.id) {
+    return allElements;
+  }
+  const otherElements = Array.from(allElements.values()).filter(
+    (element) => !finalElementsToAdd.has(element)
+  );
+  const insertionIndex = getFrameChildrenInsertionIndex(
+    otherElements,
+    frame.id
+  );
+  if (insertionIndex === null) {
+    return allElements;
+  }
+  const reorderedElements = [
+    ...otherElements.slice(0, insertionIndex),
+    ...finalElementsToAdd,
+    ...otherElements.slice(insertionIndex)
+  ];
+  syncMovedIndices(reorderedElements, arrayToMap5([...finalElementsToAdd]));
+  return Array.isArray(allElements) ? reorderedElements : new Map(reorderedElements.map((element) => [element.id, element]));
 };
 var removeElementsFromFrame = (elementsToRemove, elementsMap) => {
   const _elementsToRemove = /* @__PURE__ */ new Map();
@@ -11514,12 +11817,11 @@ var removeAllElementsFromFrame = (allElements, frame) => {
   removeElementsFromFrame(elementsInFrame, arrayToMap5(allElements));
   return allElements;
 };
-var replaceAllElementsInFrame = (allElements, nextElementsInFrame, frame, app) => {
+var replaceAllElementsInFrame = (allElements, nextElementsInFrame, frame) => {
   return addElementsToFrame(
     removeAllElementsFromFrame(allElements, frame),
     nextElementsInFrame,
-    frame,
-    app.state
+    frame
   ).slice();
 };
 var updateFrameMembershipOfSelectedElements = (allElements, appState, app) => {
@@ -11684,12 +11986,17 @@ var getDefaultFrameName = (element) => {
 var getFrameLikeTitle = (element) => {
   return element.name === null ? getDefaultFrameName(element) : element.name;
 };
-var getElementsOverlappingFrame = (elements, frame) => {
-  return elementsOverlappingBBox({
-    elements,
-    bounds: frame,
-    type: "overlap"
-  }).filter((el) => !el.frameId || el.frameId === frame.id);
+var getElementsOverlappingFrame = (elements, frame, elementsMap) => {
+  return elements.filter(
+    (el) => (
+      // exclude elements which are overlapping, but are in a different frame,
+      // and thus invisible in target frame
+      (!el.frameId || el.frameId === frame.id) && doBoundsIntersect(
+        getElementBounds(el, elementsMap),
+        getElementBounds(frame, elementsMap)
+      )
+    )
+  );
 };
 var frameAndChildrenSelectedTogether = (selectedElements) => {
   const selectedElementsMap = arrayToMap5(selectedElements);
@@ -11878,7 +12185,10 @@ var drawElementOnCanvas = (element, rc, context, renderConfig) => {
       const shapes = ShapeCache.generateElementShape(element, renderConfig);
       for (const shape of shapes) {
         if (typeof shape === "string") {
-          context.fillStyle = renderConfig.theme === THEME.DARK ? applyDarkModeFilter(element.strokeColor) : element.strokeColor;
+          context.fillStyle = applyDarkModeFilter(
+            element.strokeColor,
+            renderConfig.theme === THEME.DARK
+          );
           context.fill(new Path2D(shape));
         } else {
           rc.draw(shape);
@@ -11986,7 +12296,10 @@ var drawElementOnCanvas = (element, rc, context, renderConfig) => {
         context.canvas.setAttribute("dir", rtl ? "rtl" : "ltr");
         context.save();
         context.font = getFontString3(element);
-        context.fillStyle = renderConfig.theme === THEME.DARK ? applyDarkModeFilter(element.strokeColor) : element.strokeColor;
+        context.fillStyle = applyDarkModeFilter(
+          element.strokeColor,
+          renderConfig.theme === THEME.DARK
+        );
         context.textAlign = element.textAlign;
         const lines = element.text.replace(/\r\n?/g, "\n").split("\n");
         const horizontalOffset = element.textAlign === "center" ? element.width / 2 : element.textAlign === "right" ? element.width : 0;
@@ -12134,7 +12447,10 @@ var renderElement = (element, elementsMap, allElementsMap, rc, context, renderCo
         );
         context.fillStyle = "rgba(0, 0, 200, 0.04)";
         context.lineWidth = FRAME_STYLE.strokeWidth / appState.zoom.value;
-        context.strokeStyle = appState.theme === THEME.DARK ? applyDarkModeFilter(FRAME_STYLE.strokeColor) : FRAME_STYLE.strokeColor;
+        context.strokeStyle = applyDarkModeFilter(
+          FRAME_STYLE.strokeColor,
+          appState.theme === THEME.DARK
+        );
         if (isMagicFrameElement(element)) {
           context.strokeStyle = appState.theme === THEME.LIGHT ? "#7affd7" : applyDarkModeFilter("#1d8264");
         }
@@ -12337,7 +12653,7 @@ function getFreedrawOutlineAsSegments(element, points, elementsMap) {
     },
     elementsMap
   );
-  const center = pointFrom12(
+  const center = pointFrom11(
     (bounds[0] + bounds[2]) / 2,
     (bounds[1] + bounds[3]) / 2
   );
@@ -12347,8 +12663,8 @@ function getFreedrawOutlineAsSegments(element, points, elementsMap) {
       acc.push(
         lineSegment5(
           acc[acc.length - 1][1],
-          pointRotateRads11(
-            pointFrom12(curr[0] + element.x, curr[1] + element.y),
+          pointRotateRads10(
+            pointFrom11(curr[0] + element.x, curr[1] + element.y),
             center,
             element.angle
           )
@@ -12358,16 +12674,16 @@ function getFreedrawOutlineAsSegments(element, points, elementsMap) {
     },
     [
       lineSegment5(
-        pointRotateRads11(
-          pointFrom12(
+        pointRotateRads10(
+          pointFrom11(
             points[0][0] + element.x,
             points[0][1] + element.y
           ),
           center,
           element.angle
         ),
-        pointRotateRads11(
-          pointFrom12(
+        pointRotateRads10(
+          pointFrom11(
             points[1][0] + element.x,
             points[1][1] + element.y
           ),
@@ -12379,16 +12695,6 @@ function getFreedrawOutlineAsSegments(element, points, elementsMap) {
   );
 }
 
-// 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 === "rectangle" || type === "ellipse" || type === "diamond" || type === "freedraw" || type === "arrow" || type === "line" || type === "text" || type === "embeddable";
-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";
-var toolIsArrow = (type) => type === "arrow";
-var canHaveArrowheads = (type) => type === "arrow";
-
 // src/shape.ts
 var ShapeCache = class _ShapeCache {
   static rg = new RoughGenerator();
@@ -12472,7 +12778,7 @@ var generateRoughOptions = (element, continuousPath = false, isDarkMode = false)
     fillWeight: element.strokeWidth / 2,
     hachureGap: element.strokeWidth * 4,
     roughness: adjustRoughness(element),
-    stroke: isDarkMode ? applyDarkModeFilter2(element.strokeColor) : element.strokeColor,
+    stroke: applyDarkModeFilter2(element.strokeColor, isDarkMode),
     preserveVertices: continuousPath || element.roughness < ROUGHNESS.cartoonist
   };
   switch (element.type) {
@@ -12482,7 +12788,7 @@ var generateRoughOptions = (element, continuousPath = false, isDarkMode = false)
     case "diamond":
     case "ellipse": {
       options.fillStyle = element.fillStyle;
-      options.fill = isTransparent3(element.backgroundColor) ? void 0 : isDarkMode ? applyDarkModeFilter2(element.backgroundColor) : element.backgroundColor;
+      options.fill = isTransparent3(element.backgroundColor) ? void 0 : applyDarkModeFilter2(element.backgroundColor, isDarkMode);
       if (element.type === "ellipse") {
         options.curveFitting = 1;
       }
@@ -12492,7 +12798,7 @@ var generateRoughOptions = (element, continuousPath = false, isDarkMode = false)
     case "freedraw": {
       if (isPathALoop(element.points)) {
         options.fillStyle = element.fillStyle;
-        options.fill = element.backgroundColor === "transparent" ? void 0 : isDarkMode ? applyDarkModeFilter2(element.backgroundColor) : element.backgroundColor;
+        options.fill = element.backgroundColor === "transparent" ? void 0 : applyDarkModeFilter2(element.backgroundColor, isDarkMode);
       }
       return options;
     }
@@ -12520,44 +12826,90 @@ var modifyIframeLikeForRoughOptions = (element, isExporting, embedsValidationSta
   }
   return element;
 };
-var getArrowheadShapes = (element, shape, position, arrowhead, generator, options, canvasBackgroundColor, isDarkMode) => {
-  const arrowheadPoints = getArrowheadPoints(
-    element,
-    shape,
-    position,
-    arrowhead
-  );
+var generateArrowheadCardinalityOne = (generator, arrowheadPoints, lineOptions) => {
   if (arrowheadPoints === null) {
     return [];
   }
-  const generateCrowfootOne = (arrowheadPoints2, options2) => {
-    if (arrowheadPoints2 === null) {
-      return [];
-    }
-    const [, , x3, y3, x4, y4] = arrowheadPoints2;
-    return [generator.line(x3, y3, x4, y4, options2)];
+  const [, , x3, y3, x4, y4] = arrowheadPoints;
+  return [generator.line(x3, y3, x4, y4, lineOptions)];
+};
+var generateArrowheadLinesToTip = (generator, arrowheadPoints, lineOptions) => {
+  if (arrowheadPoints === null) {
+    return [];
+  }
+  const [x2, y2, x3, y3, x4, y4] = arrowheadPoints;
+  return [
+    generator.line(x3, y3, x2, y2, lineOptions),
+    generator.line(x4, y4, x2, y2, lineOptions)
+  ];
+};
+var getArrowheadLineOptions = (element, options) => {
+  const lineOptions = { ...options };
+  if (element.strokeStyle === "dotted") {
+    const dash = getDashArrayDotted(element.strokeWidth - 1);
+    lineOptions.strokeLineDash = [dash[0], dash[1] - 1];
+  } else {
+    delete lineOptions.strokeLineDash;
+  }
+  lineOptions.roughness = Math.min(1, lineOptions.roughness || 0);
+  return lineOptions;
+};
+var generateArrowheadOutlineCircle = (generator, options, strokeColor, arrowheadPoints, fill, diameterScale = 1) => {
+  if (arrowheadPoints === null) {
+    return [];
+  }
+  const [x, y, diameter] = arrowheadPoints;
+  const circleOptions = {
+    ...options,
+    fill,
+    fillStyle: "solid",
+    stroke: strokeColor,
+    roughness: Math.min(0.5, options.roughness || 0)
   };
-  const strokeColor = isDarkMode ? applyDarkModeFilter2(element.strokeColor) : element.strokeColor;
+  delete circleOptions.strokeLineDash;
+  return [generator.circle(x, y, diameter * diameterScale, circleOptions)];
+};
+var getArrowheadShapes = (element, shape, position, arrowhead, generator, options, canvasBackgroundColor, isDarkMode) => {
+  if (arrowhead === null) {
+    return [];
+  }
+  const strokeColor = applyDarkModeFilter2(element.strokeColor, isDarkMode);
+  const backgroundFillColor = applyDarkModeFilter2(
+    canvasBackgroundColor,
+    isDarkMode
+  );
+  const cardinalityOneOrManyOffset = -0.25;
+  const cardinalityZeroCircleScale = 0.8;
   switch (arrowhead) {
-    case "dot":
     case "circle":
     case "circle_outline": {
-      const [x, y, diameter] = arrowheadPoints;
-      delete options.strokeLineDash;
-      return [
-        generator.circle(x, y, diameter, {
-          ...options,
-          fill: arrowhead === "circle_outline" ? canvasBackgroundColor : strokeColor,
-          fillStyle: "solid",
-          stroke: strokeColor,
-          roughness: Math.min(0.5, options.roughness || 0)
-        })
-      ];
+      return generateArrowheadOutlineCircle(
+        generator,
+        options,
+        strokeColor,
+        getArrowheadPoints(element, shape, position, arrowhead),
+        arrowhead === "circle_outline" ? backgroundFillColor : strokeColor
+      );
     }
     case "triangle":
     case "triangle_outline": {
+      const arrowheadPoints = getArrowheadPoints(
+        element,
+        shape,
+        position,
+        arrowhead
+      );
+      if (arrowheadPoints === null) {
+        return [];
+      }
       const [x, y, x2, y2, x3, y3] = arrowheadPoints;
-      delete options.strokeLineDash;
+      const triangleOptions = {
+        ...options,
+        fill: arrowhead === "triangle_outline" ? backgroundFillColor : strokeColor,
+        fillStyle: "solid",
+        roughness: Math.min(1, options.roughness || 0)
+      };
+      delete triangleOptions.strokeLineDash;
       return [
         generator.polygon(
           [
@@ -12566,19 +12918,29 @@ var getArrowheadShapes = (element, shape, position, arrowhead, generator, option
             [x3, y3],
             [x, y]
           ],
-          {
-            ...options,
-            fill: arrowhead === "triangle_outline" ? canvasBackgroundColor : strokeColor,
-            fillStyle: "solid",
-            roughness: Math.min(1, options.roughness || 0)
-          }
+          triangleOptions
         )
       ];
     }
     case "diamond":
     case "diamond_outline": {
+      const arrowheadPoints = getArrowheadPoints(
+        element,
+        shape,
+        position,
+        arrowhead
+      );
+      if (arrowheadPoints === null) {
+        return [];
+      }
       const [x, y, x2, y2, x3, y3, x4, y4] = arrowheadPoints;
-      delete options.strokeLineDash;
+      const diamondOptions = {
+        ...options,
+        fill: arrowhead === "diamond_outline" ? backgroundFillColor : strokeColor,
+        fillStyle: "solid",
+        roughness: Math.min(1, options.roughness || 0)
+      };
+      delete diamondOptions.strokeLineDash;
       return [
         generator.polygon(
           [
@@ -12588,42 +12950,106 @@ var getArrowheadShapes = (element, shape, position, arrowhead, generator, option
             [x4, y4],
             [x, y]
           ],
-          {
-            ...options,
-            fill: arrowhead === "diamond_outline" ? canvasBackgroundColor : strokeColor,
-            fillStyle: "solid",
-            roughness: Math.min(1, options.roughness || 0)
-          }
+          diamondOptions
+        )
+      ];
+    }
+    case "cardinality_one":
+      return generateArrowheadCardinalityOne(
+        generator,
+        getArrowheadPoints(element, shape, position, arrowhead),
+        getArrowheadLineOptions(element, options)
+      );
+    case "cardinality_many":
+      return generateArrowheadLinesToTip(
+        generator,
+        getArrowheadPoints(element, shape, position, arrowhead),
+        getArrowheadLineOptions(element, options)
+      );
+    case "cardinality_one_or_many": {
+      const lineOptions = getArrowheadLineOptions(element, options);
+      return [
+        ...generateArrowheadLinesToTip(
+          generator,
+          getArrowheadPoints(element, shape, position, "cardinality_many"),
+          lineOptions
+        ),
+        ...generateArrowheadCardinalityOne(
+          generator,
+          getArrowheadPoints(
+            element,
+            shape,
+            position,
+            "cardinality_one",
+            cardinalityOneOrManyOffset
+          ),
+          lineOptions
+        )
+      ];
+    }
+    case "cardinality_exactly_one": {
+      const lineOptions = getArrowheadLineOptions(element, options);
+      return [
+        ...generateArrowheadCardinalityOne(
+          generator,
+          getArrowheadPoints(element, shape, position, "cardinality_one", -0.5),
+          lineOptions
+        ),
+        ...generateArrowheadCardinalityOne(
+          generator,
+          getArrowheadPoints(element, shape, position, "cardinality_one"),
+          lineOptions
+        )
+      ];
+    }
+    case "cardinality_zero_or_one": {
+      const lineOptions = getArrowheadLineOptions(element, options);
+      return [
+        ...generateArrowheadOutlineCircle(
+          generator,
+          options,
+          strokeColor,
+          getArrowheadPoints(element, shape, position, "circle_outline", 1.5),
+          backgroundFillColor,
+          cardinalityZeroCircleScale
+        ),
+        ...generateArrowheadCardinalityOne(
+          generator,
+          getArrowheadPoints(element, shape, position, "cardinality_one", -0.5),
+          lineOptions
+        )
+      ];
+    }
+    case "cardinality_zero_or_many": {
+      const lineOptions = getArrowheadLineOptions(element, options);
+      return [
+        ...generateArrowheadLinesToTip(
+          generator,
+          getArrowheadPoints(element, shape, position, "cardinality_many"),
+          lineOptions
+        ),
+        ...generateArrowheadOutlineCircle(
+          generator,
+          options,
+          strokeColor,
+          getArrowheadPoints(element, shape, position, "circle_outline", 1.5),
+          backgroundFillColor,
+          cardinalityZeroCircleScale
         )
       ];
     }
-    case "crowfoot_one":
-      return generateCrowfootOne(arrowheadPoints, options);
     case "bar":
     case "arrow":
-    case "crowfoot_many":
-    case "crowfoot_one_or_many":
     default: {
-      const [x2, y2, x3, y3, x4, y4] = arrowheadPoints;
-      if (element.strokeStyle === "dotted") {
-        const dash = getDashArrayDotted(element.strokeWidth - 1);
-        options.strokeLineDash = [dash[0], dash[1] - 1];
-      } else {
-        delete options.strokeLineDash;
-      }
-      options.roughness = Math.min(1, options.roughness || 0);
-      return [
-        generator.line(x3, y3, x2, y2, options),
-        generator.line(x4, y4, x2, y2, options),
-        ...arrowhead === "crowfoot_one_or_many" ? generateCrowfootOne(
-          getArrowheadPoints(element, shape, position, "crowfoot_one"),
-          options
-        ) : []
-      ];
+      return generateArrowheadLinesToTip(
+        generator,
+        getArrowheadPoints(element, shape, position, arrowhead),
+        getArrowheadLineOptions(element, options)
+      );
     }
   }
 };
-var generateLinearCollisionShape = (element) => {
+var generateLinearCollisionShape = (element, elementsMap) => {
   const generator = new RoughGenerator();
   const options = {
     seed: element.seed,
@@ -12632,43 +13058,30 @@ var generateLinearCollisionShape = (element) => {
     roughness: 0,
     preserveVertices: true
   };
-  const center = getCenterForBounds(
-    // Need a non-rotated center point
-    element.points.reduce(
-      (acc, point) => {
-        return [
-          Math.min(element.x + point[0], acc[0]),
-          Math.min(element.y + point[1], acc[1]),
-          Math.max(element.x + point[0], acc[2]),
-          Math.max(element.y + point[1], acc[3])
-        ];
-      },
-      [Infinity, Infinity, -Infinity, -Infinity]
-    )
-  );
+  const center = elementCenterPoint(element, elementsMap);
   switch (element.type) {
     case "line":
     case "arrow": {
-      const points = element.points.length ? element.points : [pointFrom13(0, 0)];
+      const points = element.points.length ? element.points : [pointFrom12(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 = pointRotateRads12(
-            pointFrom13(element.x + point[0], element.y + point[1]),
+          const p = pointRotateRads11(
+            pointFrom12(element.x + point[0], element.y + point[1]),
             center,
             element.angle
           );
           return {
             op: idx === 0 ? "move" : "lineTo",
-            data: pointFrom13(p[0] - element.x, p[1] - element.y)
+            data: pointFrom12(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 = pointRotateRads12(
-            pointFrom13(
+          const p = pointRotateRads11(
+            pointFrom12(
               element.x + op.data[0],
               element.y + op.data[1]
             ),
@@ -12677,30 +13090,30 @@ var generateLinearCollisionShape = (element) => {
           );
           return {
             op: "move",
-            data: pointFrom13(p[0] - element.x, p[1] - element.y)
+            data: pointFrom12(p[0] - element.x, p[1] - element.y)
           };
         }
         return {
           op: "bcurveTo",
           data: [
-            pointRotateRads12(
-              pointFrom13(
+            pointRotateRads11(
+              pointFrom12(
                 element.x + op.data[0],
                 element.y + op.data[1]
               ),
               center,
               element.angle
             ),
-            pointRotateRads12(
-              pointFrom13(
+            pointRotateRads11(
+              pointFrom12(
                 element.x + op.data[2],
                 element.y + op.data[3]
               ),
               center,
               element.angle
             ),
-            pointRotateRads12(
-              pointFrom13(
+            pointRotateRads11(
+              pointFrom12(
                 element.x + op.data[4],
                 element.y + op.data[5]
               ),
@@ -12708,7 +13121,7 @@ var generateLinearCollisionShape = (element) => {
               element.angle
             )
           ].map(
-            (p) => pointFrom13(p[0] - element.x, p[1] - element.y)
+            (p) => pointFrom12(p[0] - element.x, p[1] - element.y)
           ).flat()
         };
       });
@@ -12723,8 +13136,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 = pointRotateRads12(
-            pointFrom13(
+          const p = pointRotateRads11(
+            pointFrom12(
               element.x + op.data[0],
               element.y + op.data[1]
             ),
@@ -12733,30 +13146,30 @@ var generateLinearCollisionShape = (element) => {
           );
           return {
             op: "move",
-            data: pointFrom13(p[0] - element.x, p[1] - element.y)
+            data: pointFrom12(p[0] - element.x, p[1] - element.y)
           };
         }
         return {
           op: "bcurveTo",
           data: [
-            pointRotateRads12(
-              pointFrom13(
+            pointRotateRads11(
+              pointFrom12(
                 element.x + op.data[0],
                 element.y + op.data[1]
               ),
               center,
               element.angle
             ),
-            pointRotateRads12(
-              pointFrom13(
+            pointRotateRads11(
+              pointFrom12(
                 element.x + op.data[2],
                 element.y + op.data[3]
               ),
               center,
               element.angle
             ),
-            pointRotateRads12(
-              pointFrom13(
+            pointRotateRads11(
+              pointFrom12(
                 element.x + op.data[4],
                 element.y + op.data[5]
               ),
@@ -12764,7 +13177,7 @@ var generateLinearCollisionShape = (element) => {
               element.angle
             )
           ].map(
-            (p) => pointFrom13(p[0] - element.x, p[1] - element.y)
+            (p) => pointFrom12(p[0] - element.x, p[1] - element.y)
           ).flat()
         };
       });
@@ -12865,7 +13278,7 @@ var _generateElementShape = (element, generator, {
     case "arrow": {
       let shape;
       const options = generateRoughOptions(element, false, isDarkMode);
-      const points = element.points.length ? element.points : [pointFrom13(0, 0)];
+      const points = element.points.length ? element.points : [pointFrom12(0, 0)];
       if (isElbowArrow(element)) {
         if (!points.every(
           (point) => Math.abs(point[0]) <= 1e6 && Math.abs(point[1]) <= 1e6
@@ -13029,14 +13442,14 @@ var getElementShape = (element, elementsMap) => {
       return shouldTestInside(element) ? getClosedCurveShape(
         element,
         roughShape,
-        pointFrom13(element.x, element.y),
+        pointFrom12(element.x, element.y),
         element.angle,
-        pointFrom13(cx, cy)
+        pointFrom12(cx, cy)
       ) : getCurveShape(
         roughShape,
-        pointFrom13(element.x, element.y),
+        pointFrom12(element.x, element.y),
         element.angle,
-        pointFrom13(cx, cy)
+        pointFrom12(cx, cy)
       );
     }
     case "ellipse":
@@ -13045,7 +13458,7 @@ var getElementShape = (element, elementsMap) => {
       const [, , , , cx, cy] = getElementAbsoluteCoords2(element, elementsMap);
       return getFreedrawShape(
         element,
-        pointFrom13(cx, cy),
+        pointFrom12(cx, cy),
         shouldTestInside(element)
       );
     }
@@ -13064,9 +13477,9 @@ var toggleLinePolygonState = (element, nextPolygonState) => {
       firstPoint[1] - lastPoint[1]
     );
     if (distance3 > LINE_POLYGON_POINT_MERGE_DISTANCE || updatedPoints.length < 4) {
-      updatedPoints.push(pointFrom13(firstPoint[0], firstPoint[1]));
+      updatedPoints.push(pointFrom12(firstPoint[0], firstPoint[1]));
     } else {
-      updatedPoints[updatedPoints.length - 1] = pointFrom13(
+      updatedPoints[updatedPoints.length - 1] = pointFrom12(
         firstPoint[0],
         firstPoint[1]
       );
@@ -13159,9 +13572,9 @@ var ElementBounds = class _ElementBounds {
     if (isFreeDrawElement(element)) {
       const [minX, minY, maxX, maxY] = getBoundsFromPoints(
         element.points.map(
-          ([x, y]) => pointRotateRads13(
-            pointFrom14(x, y),
-            pointFrom14(cx - element.x, cy - element.y),
+          ([x, y]) => pointRotateRads12(
+            pointFrom13(x, y),
+            pointFrom13(cx - element.x, cy - element.y),
             element.angle
           )
         )
@@ -13175,24 +13588,24 @@ var ElementBounds = class _ElementBounds {
     } else if (isLinearElement(element)) {
       bounds = getLinearElementRotatedBounds(element, cx, cy, elementsMap);
     } else if (element.type === "diamond") {
-      const [x11, y11] = pointRotateRads13(
-        pointFrom14(cx, y1),
-        pointFrom14(cx, cy),
+      const [x11, y11] = pointRotateRads12(
+        pointFrom13(cx, y1),
+        pointFrom13(cx, cy),
         element.angle
       );
-      const [x12, y12] = pointRotateRads13(
-        pointFrom14(cx, y2),
-        pointFrom14(cx, cy),
+      const [x12, y12] = pointRotateRads12(
+        pointFrom13(cx, y2),
+        pointFrom13(cx, cy),
         element.angle
       );
-      const [x22, y22] = pointRotateRads13(
-        pointFrom14(x1, cy),
-        pointFrom14(cx, cy),
+      const [x22, y22] = pointRotateRads12(
+        pointFrom13(x1, cy),
+        pointFrom13(cx, cy),
         element.angle
       );
-      const [x21, y21] = pointRotateRads13(
-        pointFrom14(x2, cy),
-        pointFrom14(cx, cy),
+      const [x21, y21] = pointRotateRads12(
+        pointFrom13(x2, cy),
+        pointFrom13(cx, cy),
         element.angle
       );
       const minX = Math.min(x11, x12, x22, x21);
@@ -13209,24 +13622,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] = pointRotateRads13(
-        pointFrom14(x1, y1),
-        pointFrom14(cx, cy),
+      const [x11, y11] = pointRotateRads12(
+        pointFrom13(x1, y1),
+        pointFrom13(cx, cy),
         element.angle
       );
-      const [x12, y12] = pointRotateRads13(
-        pointFrom14(x1, y2),
-        pointFrom14(cx, cy),
+      const [x12, y12] = pointRotateRads12(
+        pointFrom13(x1, y2),
+        pointFrom13(cx, cy),
         element.angle
       );
-      const [x22, y22] = pointRotateRads13(
-        pointFrom14(x2, y2),
-        pointFrom14(cx, cy),
+      const [x22, y22] = pointRotateRads12(
+        pointFrom13(x2, y2),
+        pointFrom13(cx, cy),
         element.angle
       );
-      const [x21, y21] = pointRotateRads13(
-        pointFrom14(x2, y1),
-        pointFrom14(cx, cy),
+      const [x21, y21] = pointRotateRads12(
+        pointFrom13(x2, y1),
+        pointFrom13(cx, cy),
         element.angle
       );
       const minX = Math.min(x11, x12, x22, x21);
@@ -13280,7 +13693,7 @@ var getElementLineSegments = (element, elementsMap) => {
     element,
     elementsMap
   );
-  const center = pointFrom14(cx, cy);
+  const center = pointFrom13(cx, cy);
   if (shape.type === "polycurve") {
     const curves = shape.data;
     const pointsOnCurves = curves.map(
@@ -13293,8 +13706,8 @@ var getElementLineSegments = (element, elementsMap) => {
         while (i < points.length - 1) {
           segments.push(
             lineSegment6(
-              pointFrom14(points[i][0], points[i][1]),
-              pointFrom14(points[i + 1][0], points[i + 1][1])
+              pointFrom13(points[i][0], points[i][1]),
+              pointFrom13(points[i + 1][0], points[i + 1][1])
             )
           );
           i++;
@@ -13306,8 +13719,8 @@ var getElementLineSegments = (element, elementsMap) => {
       while (i < points.length - 1) {
         segments.push(
           lineSegment6(
-            pointFrom14(points[i][0], points[i][1]),
-            pointFrom14(points[i + 1][0], points[i + 1][1])
+            pointFrom13(points[i][0], points[i][1]),
+            pointFrom13(points[i + 1][0], points[i + 1][1])
           )
         );
         i++;
@@ -13331,10 +13744,10 @@ var getElementLineSegments = (element, elementsMap) => {
       const container = getContainerElement(element, elementsMap);
       if (container && isLinearElement(container)) {
         const segments2 = [
-          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))
+          lineSegment6(pointFrom13(x1, y1), pointFrom13(x2, y1)),
+          lineSegment6(pointFrom13(x2, y1), pointFrom13(x2, y2)),
+          lineSegment6(pointFrom13(x2, y2), pointFrom13(x1, y2)),
+          lineSegment6(pointFrom13(x1, y2), pointFrom13(x1, y1))
         ];
         return segments2;
       }
@@ -13357,7 +13770,7 @@ var getElementLineSegments = (element, elementsMap) => {
     [cx, y2],
     [x1, cy],
     [x2, cy]
-  ].map((point) => pointRotateRads13(point, center, element.angle));
+  ].map((point) => pointRotateRads12(point, center, element.angle));
   return [
     lineSegment6(nw, ne),
     lineSegment6(sw, se2),
@@ -13375,8 +13788,8 @@ var _isRectanguloidElement = (element) => {
 var getRotatedSides = (sides, center, angle) => {
   return sides.map((side) => {
     return lineSegment6(
-      pointRotateRads13(side[0], center, angle),
-      pointRotateRads13(side[1], center, angle)
+      pointRotateRads12(side[0], center, angle),
+      pointRotateRads12(side[1], center, angle)
     );
   });
 };
@@ -13387,13 +13800,13 @@ var getSegmentsOnCurve = (curve4, center, angle) => {
   while (i < points.length - 1) {
     segments.push(
       lineSegment6(
-        pointRotateRads13(
-          pointFrom14(points[i][0], points[i][1]),
+        pointRotateRads12(
+          pointFrom13(points[i][0], points[i][1]),
           center,
           angle
         ),
-        pointRotateRads13(
-          pointFrom14(points[i + 1][0], points[i + 1][1]),
+        pointRotateRads12(
+          pointFrom13(points[i + 1][0], points[i + 1][1]),
           center,
           angle
         )
@@ -13404,7 +13817,7 @@ var getSegmentsOnCurve = (curve4, center, angle) => {
   return segments;
 };
 var getSegmentsOnEllipse = (ellipse4) => {
-  const center = pointFrom14(
+  const center = pointFrom13(
     ellipse4.x + ellipse4.width / 2,
     ellipse4.y + ellipse4.height / 2
   );
@@ -13418,7 +13831,7 @@ 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(pointRotateRads13(pointFrom14(x, y), center, ellipse4.angle));
+    points.push(pointRotateRads12(pointFrom13(x, y), center, ellipse4.angle));
   }
   for (let i = 0; i < points.length - 1; i++) {
     segments.push(lineSegment6(points[i], points[i + 1]));
@@ -13501,7 +13914,7 @@ var getCubicBezierCurveBound = (p0, p1, p2, p3) => {
   return [minX, minY, maxX, maxY];
 };
 var getMinMaxXYFromCurvePathOps = (ops, transformXY) => {
-  let currentP = pointFrom14(0, 0);
+  let currentP = pointFrom13(0, 0);
   const { minX, minY, maxX, maxY } = ops.reduce(
     (limits, { op, data }) => {
       if (op === "move") {
@@ -13509,9 +13922,9 @@ var getMinMaxXYFromCurvePathOps = (ops, transformXY) => {
         invariant10(p != null, "Op data is not a point");
         currentP = p;
       } else if (op === "bcurveTo") {
-        const _p1 = pointFrom14(data[0], data[1]);
-        const _p2 = pointFrom14(data[2], data[3]);
-        const _p3 = pointFrom14(data[4], data[5]);
+        const _p1 = pointFrom13(data[0], data[1]);
+        const _p2 = pointFrom13(data[2], data[3]);
+        const _p3 = pointFrom13(data[4], data[5]);
         const p1 = transformXY ? transformXY(_p1) : _p1;
         const p2 = transformXY ? transformXY(_p2) : _p2;
         const p3 = transformXY ? transformXY(_p3) : _p3;
@@ -13536,7 +13949,7 @@ var getMinMaxXYFromCurvePathOps = (ops, transformXY) => {
   );
   return [minX, minY, maxX, maxY];
 };
-var getBoundsFromPoints = (points) => {
+var getBoundsFromPoints = (points, padding = 0) => {
   let minX = Infinity;
   let minY = Infinity;
   let maxX = -Infinity;
@@ -13547,7 +13960,7 @@ var getBoundsFromPoints = (points) => {
     maxX = Math.max(maxX, x);
     maxY = Math.max(maxY, y);
   }
-  return [minX, minY, maxX, maxY];
+  return [minX - padding, minY - padding, maxX + padding, maxY + padding];
 };
 var getFreeDrawElementAbsoluteCoords = (element) => {
   const [minX, minY, maxX, maxY] = getBoundsFromPoints(element.points);
@@ -13557,6 +13970,8 @@ var getFreeDrawElementAbsoluteCoords = (element) => {
   const y2 = maxY + element.y;
   return [x1, y1, x2, y2, (x1 + x2) / 2, (y1 + y2) / 2];
 };
+var CARDINALITY_MARKER_SIZE = 20;
+var CROWFOOT_ARROWHEAD_SIZE = 15;
 var getArrowheadSize = (arrowhead) => {
   switch (arrowhead) {
     case "arrow":
@@ -13564,10 +13979,14 @@ var getArrowheadSize = (arrowhead) => {
     case "diamond":
     case "diamond_outline":
       return 12;
-    case "crowfoot_many":
-    case "crowfoot_one":
-    case "crowfoot_one_or_many":
-      return 20;
+    case "cardinality_many":
+    case "cardinality_one_or_many":
+    case "cardinality_zero_or_many":
+      return CROWFOOT_ARROWHEAD_SIZE;
+    case "cardinality_one":
+    case "cardinality_exactly_one":
+    case "cardinality_zero_or_one":
+      return CARDINALITY_MARKER_SIZE;
     default:
       return 15;
   }
@@ -13582,7 +14001,10 @@ var getArrowheadAngle = (arrowhead) => {
       return 25;
   }
 };
-var getArrowheadPoints = (element, shape, position, arrowhead) => {
+var getArrowheadPoints = (element, shape, position, arrowhead, offsetMultiplier = 0) => {
+  if (arrowhead === null) {
+    return null;
+  }
   if (shape.length < 1) {
     return null;
   }
@@ -13593,17 +14015,17 @@ var getArrowheadPoints = (element, shape, position, arrowhead) => {
   const index = position === "start" ? 1 : ops.length - 1;
   const data = ops[index].data;
   invariant10(data.length === 6, "Op data length is not 6");
-  const p3 = pointFrom14(data[4], data[5]);
-  const p2 = pointFrom14(data[2], data[3]);
-  const p1 = pointFrom14(data[0], data[1]);
+  const p3 = pointFrom13(data[4], data[5]);
+  const p2 = pointFrom13(data[2], data[3]);
+  const p1 = pointFrom13(data[0], data[1]);
   const prevOp = ops[index - 1];
-  let p0 = pointFrom14(0, 0);
+  let p0 = pointFrom13(0, 0);
   if (prevOp.op === "move") {
     const p = pointFromArray3(prevOp.data);
     invariant10(p != null, "Op data is not a point");
     p0 = p;
   } else if (prevOp.op === "bcurveTo") {
-    p0 = pointFrom14(prevOp.data[4], prevOp.data[5]);
+    p0 = pointFrom13(prevOp.data[4], prevOp.data[5]);
   }
   const equation = (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;
@@ -13620,34 +14042,36 @@ var getArrowheadPoints = (element, shape, position, arrowhead) => {
   }
   const lengthMultiplier = arrowhead === "diamond" || arrowhead === "diamond_outline" ? 0.25 : 0.5;
   const minSize = Math.min(size, length * lengthMultiplier);
-  const xs = x2 - nx * minSize;
-  const ys = y2 - ny * minSize;
-  if (arrowhead === "dot" || arrowhead === "circle" || arrowhead === "circle_outline") {
-    const diameter = Math.hypot(ys - y2, xs - x2) + element.strokeWidth - 2;
-    return [x2, y2, diameter];
+  const tx = x2 - nx * minSize * offsetMultiplier;
+  const ty = y2 - ny * minSize * offsetMultiplier;
+  const xs = tx - nx * minSize;
+  const ys = ty - ny * minSize;
+  if (arrowhead === "circle" || arrowhead === "circle_outline") {
+    const diameter = Math.hypot(ys - ty, xs - tx) + element.strokeWidth - 2;
+    return [tx, ty, diameter];
   }
   const angle = getArrowheadAngle(arrowhead);
-  if (arrowhead === "crowfoot_many" || arrowhead === "crowfoot_one_or_many") {
-    const [x32, y32] = pointRotateRads13(
-      pointFrom14(x2, y2),
-      pointFrom14(xs, ys),
+  if (arrowhead === "cardinality_many" || arrowhead === "cardinality_one_or_many") {
+    const [x32, y32] = pointRotateRads12(
+      pointFrom13(tx, ty),
+      pointFrom13(xs, ys),
       degreesToRadians(-angle)
     );
-    const [x42, y42] = pointRotateRads13(
-      pointFrom14(x2, y2),
-      pointFrom14(xs, ys),
+    const [x42, y42] = pointRotateRads12(
+      pointFrom13(tx, ty),
+      pointFrom13(xs, ys),
       degreesToRadians(angle)
     );
     return [xs, ys, x32, y32, x42, y42];
   }
-  const [x3, y3] = pointRotateRads13(
-    pointFrom14(xs, ys),
-    pointFrom14(x2, y2),
+  const [x3, y3] = pointRotateRads12(
+    pointFrom13(xs, ys),
+    pointFrom13(tx, ty),
     -angle * Math.PI / 180
   );
-  const [x4, y4] = pointRotateRads13(
-    pointFrom14(xs, ys),
-    pointFrom14(x2, y2),
+  const [x4, y4] = pointRotateRads12(
+    pointFrom13(xs, ys),
+    pointFrom13(tx, ty),
     degreesToRadians(angle)
   );
   if (arrowhead === "diamond" || arrowhead === "diamond_outline") {
@@ -13655,22 +14079,22 @@ 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] = pointRotateRads13(
-        pointFrom14(x2 + minSize * 2, y2),
-        pointFrom14(x2, y2),
-        Math.atan2(py - y2, px - x2)
+      [ox, oy] = pointRotateRads12(
+        pointFrom13(tx + minSize * 2, ty),
+        pointFrom13(tx, ty),
+        Math.atan2(py - ty, px - tx)
       );
     } else {
       const [px, py] = element.points.length > 1 ? element.points[element.points.length - 2] : [0, 0];
-      [ox, oy] = pointRotateRads13(
-        pointFrom14(x2 - minSize * 2, y2),
-        pointFrom14(x2, y2),
-        Math.atan2(y2 - py, x2 - px)
+      [ox, oy] = pointRotateRads12(
+        pointFrom13(tx - minSize * 2, ty),
+        pointFrom13(tx, ty),
+        Math.atan2(ty - py, tx - px)
       );
     }
-    return [x2, y2, x3, y3, ox, oy, x4, y4];
+    return [tx, ty, x3, y3, ox, oy, x4, y4];
   }
-  return [x2, y2, x3, y3, x4, y4];
+  return [tx, ty, x3, y3, x4, y4];
 };
 var generateLinearElementShape = (element) => {
   const generator = rough_default.generator();
@@ -13693,9 +14117,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] = pointRotateRads13(
-      pointFrom14(element.x + pointX, element.y + pointY),
-      pointFrom14(cx, cy),
+    const [x, y] = pointRotateRads12(
+      pointFrom13(element.x + pointX, element.y + pointY),
+      pointFrom13(cx, cy),
       element.angle
     );
     let coords2 = [x, y, x, y];
@@ -13718,9 +14142,9 @@ var getLinearElementRotatedBounds = (element, cx, cy, elementsMap) => {
   const cachedShape = ShapeCache.get(element, null)?.[0];
   const shape = cachedShape ?? generateLinearElementShape(element);
   const ops = getCurvePathOps(shape);
-  const transformXY = ([x, y]) => pointRotateRads13(
-    pointFrom14(element.x + x, element.y + y),
-    pointFrom14(cx, cy),
+  const transformXY = ([x, y]) => pointRotateRads12(
+    pointFrom13(element.x + x, element.y + y),
+    pointFrom13(cx, cy),
     element.angle
   );
   const res = getMinMaxXYFromCurvePathOps(ops, transformXY);
@@ -13831,8 +14255,8 @@ var getClosestElementBounds = (elements, from) => {
   elements.forEach((element) => {
     const [x1, y1, x2, y2] = getElementBounds(element, elementsMap);
     const distance3 = pointDistance7(
-      pointFrom14((x1 + x2) / 2, (y1 + y2) / 2),
-      pointFrom14(from.x, from.y)
+      pointFrom13((x1 + x2) / 2, (y1 + y2) / 2),
+      pointFrom13(from.x, from.y)
     );
     if (distance3 < minDistance) {
       minDistance = distance3;
@@ -13868,7 +14292,7 @@ var getVisibleSceneBounds = ({
     -scrollY + height / zoom.value
   ];
 };
-var getCenterForBounds = (bounds) => pointFrom14(
+var getCenterForBounds = (bounds) => pointFrom13(
   bounds[0] + (bounds[2] - bounds[0]) / 2,
   bounds[1] + (bounds[3] - bounds[1]) / 2
 );
@@ -13882,23 +14306,23 @@ var aabbForElement = (element, elementsMap, offset) => {
     midY: element.y + element.height / 2
   };
   const center = elementCenterPoint(element, elementsMap);
-  const [topLeftX, topLeftY] = pointRotateRads13(
-    pointFrom14(bbox.minX, bbox.minY),
+  const [topLeftX, topLeftY] = pointRotateRads12(
+    pointFrom13(bbox.minX, bbox.minY),
     center,
     element.angle
   );
-  const [topRightX, topRightY] = pointRotateRads13(
-    pointFrom14(bbox.maxX, bbox.minY),
+  const [topRightX, topRightY] = pointRotateRads12(
+    pointFrom13(bbox.maxX, bbox.minY),
     center,
     element.angle
   );
-  const [bottomRightX, bottomRightY] = pointRotateRads13(
-    pointFrom14(bbox.maxX, bbox.maxY),
+  const [bottomRightX, bottomRightY] = pointRotateRads12(
+    pointFrom13(bbox.maxX, bbox.maxY),
     center,
     element.angle
   );
-  const [bottomLeftX, bottomLeftY] = pointRotateRads13(
-    pointFrom14(bbox.minX, bbox.maxY),
+  const [bottomLeftX, bottomLeftY] = pointRotateRads12(
+    pointFrom13(bbox.minX, bbox.maxY),
     center,
     element.angle
   );
@@ -13920,6 +14344,7 @@ var aabbForElement = (element, elementsMap, offset) => {
   return bounds;
 };
 var pointInsideBounds = (p, bounds) => p[0] > bounds[0] && p[0] < bounds[2] && p[1] > bounds[1] && p[1] < bounds[3];
+var pointInsideBoundsInclusive = (p, bounds) => p[0] >= bounds[0] && p[0] <= bounds[2] && p[1] >= bounds[1] && p[1] <= bounds[3];
 var doBoundsIntersect = (bounds1, bounds2) => {
   if (bounds1 == null || bounds2 == null) {
     return false;
@@ -13928,14 +14353,225 @@ var doBoundsIntersect = (bounds1, bounds2) => {
   const [minX2, minY2, maxX2, maxY2] = bounds2;
   return minX1 < maxX2 && maxX1 > minX2 && minY1 < maxY2 && maxY1 > minY2;
 };
+var boundsContainBounds = (outerBounds, innerBounds) => [
+  pointFrom13(innerBounds[0], innerBounds[1]),
+  pointFrom13(innerBounds[0], innerBounds[3]),
+  pointFrom13(innerBounds[2], innerBounds[1]),
+  pointFrom13(innerBounds[2], innerBounds[3])
+].every((point) => pointInsideBoundsInclusive(point, outerBounds));
+var elementsOverlappingBBox = ({
+  elements,
+  elementsMap,
+  bounds,
+  type,
+  excludeElementsInFrames,
+  shouldIgnoreElementFromSelection: shouldIgnoreElementFromSelection2
+}) => {
+  if (!elementsMap) {
+    elementsMap = arrayToMap6(elements);
+  }
+  const selectionBounds = isExcalidrawElement(bounds) ? getElementBounds(bounds, elementsMap) : bounds;
+  const [selectionX1, selectionY1, selectionX2, selectionY2] = selectionBounds;
+  const selectionEdges = [
+    lineSegment6(
+      pointFrom13(selectionX1, selectionY1),
+      pointFrom13(selectionX2, selectionY1)
+    ),
+    lineSegment6(
+      pointFrom13(selectionX2, selectionY1),
+      pointFrom13(selectionX2, selectionY2)
+    ),
+    lineSegment6(
+      pointFrom13(selectionX2, selectionY2),
+      pointFrom13(selectionX1, selectionY2)
+    ),
+    lineSegment6(
+      pointFrom13(selectionX1, selectionY2),
+      pointFrom13(selectionX1, selectionY1)
+    )
+  ];
+  const framesInSelection = excludeElementsInFrames ? /* @__PURE__ */ new Set() : null;
+  const groups = {};
+  const elementsInSelection = /* @__PURE__ */ new Set();
+  for (const element of elements) {
+    if (shouldIgnoreElementFromSelection2?.(element)) {
+      continue;
+    }
+    const groupId = element.groupIds.at(-1);
+    if (groupId) {
+      if (!groups[groupId]) {
+        groups[groupId] = [];
+      }
+      groups[groupId].push(element);
+    }
+    const strokeWidth = element.strokeWidth;
+    let labelAABB = null;
+    let elementAABB = getElementBounds(element, elementsMap);
+    elementAABB = [
+      elementAABB[0] - strokeWidth / 2,
+      elementAABB[1] - strokeWidth / 2,
+      elementAABB[2] + strokeWidth / 2,
+      elementAABB[3] + strokeWidth / 2
+    ];
+    const boundTextElement = isArrowElement(element) && getBoundTextElement(element, elementsMap);
+    if (boundTextElement) {
+      const { x, y } = LinearElementEditor.getBoundTextElementPosition(
+        element,
+        boundTextElement,
+        elementsMap
+      );
+      labelAABB = [
+        x,
+        y,
+        x + boundTextElement.width,
+        y + boundTextElement.height
+      ];
+    }
+    const associatedFrame = getContainingFrame(element, elementsMap);
+    if (associatedFrame && elementOverlapsWithFrame(element, associatedFrame, elementsMap)) {
+      const frameAABB = getElementBounds(associatedFrame, elementsMap);
+      elementAABB = [
+        Math.max(elementAABB[0], frameAABB[0]),
+        Math.max(elementAABB[1], frameAABB[1]),
+        Math.min(elementAABB[2], frameAABB[2]),
+        Math.min(elementAABB[3], frameAABB[3])
+      ];
+      labelAABB = labelAABB ? [
+        Math.max(labelAABB[0], frameAABB[0]),
+        Math.max(labelAABB[1], frameAABB[1]),
+        Math.min(labelAABB[2], frameAABB[2]),
+        Math.min(labelAABB[3], frameAABB[3])
+      ] : null;
+    }
+    const commonAABB2 = labelAABB ? [
+      Math.min(labelAABB[0], elementAABB[0]),
+      Math.min(labelAABB[1], elementAABB[1]),
+      Math.max(labelAABB[2], elementAABB[2]),
+      Math.max(labelAABB[3], elementAABB[3])
+    ] : elementAABB;
+    if (boundsContainBounds(selectionBounds, commonAABB2)) {
+      if (framesInSelection && isFrameLikeElement(element)) {
+        framesInSelection.add(element.id);
+      }
+      elementsInSelection.add(element);
+      continue;
+    }
+    if (type === "overlap" && labelAABB && doBoundsIntersect(selectionBounds, labelAABB)) {
+      elementsInSelection.add(element);
+      continue;
+    }
+    if (type === "overlap" && doBoundsIntersect(selectionBounds, elementAABB)) {
+      let hasIntersection = false;
+      if (isLinearElement(element) || isFreeDrawElement(element)) {
+        const center = elementCenterPoint(element, elementsMap);
+        hasIntersection = element.points.some((point) => {
+          const rotatedPoint = pointRotateRads12(
+            pointFrom13(element.x + point[0], element.y + point[1]),
+            center,
+            element.angle
+          );
+          return pointInsideBounds(rotatedPoint, selectionBounds);
+        });
+      } else {
+        const nonRotatedElementBounds = getElementBounds(
+          element,
+          elementsMap,
+          true
+        );
+        const center = elementCenterPoint(element, elementsMap);
+        hasIntersection = [
+          pointRotateRads12(
+            pointFrom13(
+              (nonRotatedElementBounds[0] + nonRotatedElementBounds[2]) / 2,
+              nonRotatedElementBounds[1]
+            ),
+            center,
+            element.angle
+          ),
+          pointRotateRads12(
+            pointFrom13(
+              nonRotatedElementBounds[2],
+              (nonRotatedElementBounds[1] + nonRotatedElementBounds[3]) / 2
+            ),
+            center,
+            element.angle
+          ),
+          pointRotateRads12(
+            pointFrom13(
+              (nonRotatedElementBounds[0] + nonRotatedElementBounds[2]) / 2,
+              nonRotatedElementBounds[3]
+            ),
+            center,
+            element.angle
+          ),
+          pointRotateRads12(
+            pointFrom13(
+              nonRotatedElementBounds[0],
+              (nonRotatedElementBounds[1] + nonRotatedElementBounds[3]) / 2
+            ),
+            center,
+            element.angle
+          )
+        ].some((point) => {
+          return pointInsideBounds(
+            pointRotateRads12(point, center, element.angle),
+            selectionBounds
+          );
+        });
+      }
+      if (!hasIntersection) {
+        hasIntersection = selectionEdges.some(
+          (selectionEdge) => intersectElementWithLineSegment(
+            element,
+            elementsMap,
+            selectionEdge,
+            strokeWidth / 2,
+            true
+            // Stop at first hit for better performance
+          ).length > 0
+        );
+      }
+      if (hasIntersection) {
+        if (framesInSelection && isFrameLikeElement(element)) {
+          framesInSelection.add(element.id);
+        }
+        elementsInSelection.add(element);
+        continue;
+      }
+    }
+  }
+  if (framesInSelection) {
+    elementsInSelection.forEach((element) => {
+      if (element.frameId && framesInSelection.has(element.frameId)) {
+        elementsInSelection.delete(element);
+      }
+    });
+  }
+  if (type === "overlap") {
+    Array.from(elementsInSelection).forEach((element) => {
+      const groupId = element.groupIds.at(-1);
+      const group = groupId ? groups[groupId] : null;
+      group?.forEach((groupElement) => elementsInSelection.add(groupElement));
+    });
+  } else if (type === "contain") {
+    elementsInSelection.forEach((element) => {
+      const groupId = element.groupIds.at(-1);
+      const group = groupId ? groups[groupId] : null;
+      if (group && !group.every((groupElement) => elementsInSelection.has(groupElement))) {
+        elementsInSelection.delete(element);
+      }
+    });
+  }
+  return elements.filter((element) => elementsInSelection.has(element));
+};
 var elementCenterPoint = (element, elementsMap, xOffset = 0, yOffset = 0) => {
-  if (isLinearElement(element)) {
+  if (isLinearElement(element) || isFreeDrawElement(element)) {
     const [x1, y1, x2, y2] = getElementAbsoluteCoords2(element, elementsMap);
-    const [x3, y3] = pointFrom14((x1 + x2) / 2, (y1 + y2) / 2);
-    return pointFrom14(x3 + xOffset, y3 + yOffset);
+    const [x3, y3] = pointFrom13((x1 + x2) / 2, (y1 + y2) / 2);
+    return pointFrom13(x3 + xOffset, y3 + yOffset);
   }
   const [x, y] = getCenterForBounds(getElementBounds(element, elementsMap));
-  return pointFrom14(x + xOffset, y + yOffset);
+  return pointFrom13(x + xOffset, y + yOffset);
 };
 
 // src/sizeHelpers.ts
@@ -14140,7 +14776,7 @@ import {
   ORIG_ID,
   randomId,
   randomInteger as randomInteger2,
-  arrayToMap as arrayToMap7,
+  arrayToMap as arrayToMap8,
   castArray,
   findLastIndex,
   getUpdatedTimestamp as getUpdatedTimestamp2,
@@ -14149,79 +14785,61 @@ import {
 
 // src/sortElements.ts
 init_define_import_meta_env();
-import { arrayToMapWithIndex } from "@excalidraw/common";
-var normalizeGroupElementOrder = (elements) => {
-  const origElements = elements.slice();
-  const sortedElements = /* @__PURE__ */ new Set();
-  const orderInnerGroups = (elements2) => {
-    const firstGroupSig = elements2[0]?.groupIds?.join("");
-    const aGroup = [elements2[0]];
-    const bGroup = [];
-    for (const element of elements2.slice(1)) {
-      if (element.groupIds?.join("") === firstGroupSig) {
-        aGroup.push(element);
-      } else {
-        bGroup.push(element);
-      }
-    }
-    return bGroup.length ? [...aGroup, ...orderInnerGroups(bGroup)] : aGroup;
+import { arrayToMap as arrayToMap7 } from "@excalidraw/common";
+var defragmentGroups = (elements) => {
+  const groupIdAtLevel = (element, level) => {
+    return element.groupIds[element.groupIds.length - level - 1];
   };
-  const groupHandledElements = /* @__PURE__ */ new Map();
-  origElements.forEach((element, idx) => {
-    if (groupHandledElements.has(element.id)) {
-      return;
-    }
-    if (element.groupIds?.length) {
-      const topGroup = element.groupIds[element.groupIds.length - 1];
-      const groupElements = origElements.slice(idx).filter((element2) => {
-        const ret = element2?.groupIds?.some((id) => id === topGroup);
-        if (ret) {
-          groupHandledElements.set(element2.id, true);
-        }
-        return ret;
-      });
-      for (const elem of orderInnerGroups(groupElements)) {
-        sortedElements.add(elem);
+  const orderLevel = (levelElements, level) => {
+    const buckets = /* @__PURE__ */ new Map();
+    const slots = [];
+    for (const element of levelElements) {
+      const groupId = groupIdAtLevel(element, level);
+      if (groupId === void 0) {
+        slots.push(element);
+        continue;
       }
-    } else {
-      sortedElements.add(element);
+      let bucket = buckets.get(groupId);
+      if (!bucket) {
+        bucket = [];
+        buckets.set(groupId, bucket);
+        slots.push(groupId);
+      }
+      bucket.push(element);
     }
-  });
-  if (sortedElements.size !== elements.length) {
-    console.error("normalizeGroupElementOrder: lost some elements... bailing!");
+    return slots.flatMap(
+      (slot) => typeof slot === "string" ? orderLevel(buckets.get(slot), level + 1) : [slot]
+    );
+  };
+  const sortedElements = orderLevel(elements, 0);
+  if (sortedElements.length !== elements.length) {
+    console.error("defragmentGroups: lost some elements... bailing!");
     return elements;
   }
-  return [...sortedElements];
+  return sortedElements;
 };
 var normalizeBoundElementsOrder = (elements) => {
-  const elementsMap = arrayToMapWithIndex(elements);
-  const origElements = elements.slice();
+  const elementsMap = arrayToMap7(elements);
   const sortedElements = /* @__PURE__ */ new Set();
-  origElements.forEach((element, idx) => {
-    if (!element) {
-      return;
+  for (const element of elements) {
+    if (sortedElements.has(element)) {
+      continue;
     }
     if (element.boundElements?.length) {
       sortedElements.add(element);
-      origElements[idx] = null;
-      element.boundElements.forEach((boundElement) => {
+      for (const boundElement of element.boundElements) {
         const child = elementsMap.get(boundElement.id);
         if (child && boundElement.type === "text") {
-          sortedElements.add(child[0]);
-          origElements[child[1]] = null;
+          sortedElements.add(child);
         }
-      });
-    } else if (element.type === "text" && element.containerId) {
-      const parent = elementsMap.get(element.containerId);
-      if (!parent?.[0].boundElements?.find((x) => x.id === element.id)) {
-        sortedElements.add(element);
-        origElements[idx] = null;
       }
-    } else {
-      sortedElements.add(element);
-      origElements[idx] = null;
+      continue;
     }
-  });
+    if (element.type === "text" && element.containerId && elementsMap.get(element.containerId)?.boundElements?.some((el) => el.id === element.id)) {
+      continue;
+    }
+    sortedElements.add(element);
+  }
   if (sortedElements.size !== elements.length) {
     console.error(
       "normalizeBoundElementsOrder: lost some elements... bailing!"
@@ -14231,7 +14849,7 @@ var normalizeBoundElementsOrder = (elements) => {
   return [...sortedElements];
 };
 var normalizeElementOrder = (elements) => {
-  return normalizeBoundElementsOrder(normalizeGroupElementOrder(elements));
+  return normalizeBoundElementsOrder(defragmentGroups(elements));
 };
 
 // src/duplicate.ts
@@ -14271,8 +14889,9 @@ var duplicateElements = (opts) => {
   const origIdToDuplicateId = /* @__PURE__ */ new Map();
   const duplicateIdToOrigElement = /* @__PURE__ */ new Map();
   const duplicateElementsMap = /* @__PURE__ */ new Map();
-  const elementsMap = arrayToMap7(elements);
+  const elementsMap = arrayToMap8(elements);
   const _idsOfElementsToDuplicate = opts.type === "in-place" ? opts.idsOfElementsToDuplicate : new Map(elements.map((el) => [el.id, el]));
+  const preserveFrameChildrenOrder = opts.type === "everything" && opts.preserveFrameChildrenOrder;
   if (opts.type === "in-place") {
     for (const groupId of Object.keys(opts.appState.selectedGroupIds)) {
       elements.filter((el) => el.groupIds?.includes(groupId)).forEach((el) => _idsOfElementsToDuplicate.set(el.id, el));
@@ -14332,7 +14951,7 @@ var duplicateElements = (opts) => {
     const groupId = getSelectedGroupForElement(appState, element);
     if (groupId) {
       const groupElements = getElementsInGroup(elements, groupId).flatMap(
-        (element2) => isFrameLikeElement(element2) ? [...getFrameChildren(elements, element2.id), element2] : [element2]
+        (element2) => isFrameLikeElement(element2) && !preserveFrameChildrenOrder ? [...getFrameChildren(elements, element2.id), element2] : [element2]
       );
       const targetIndex = findLastIndex(elementsWithDuplicates, (el) => {
         return el.groupIds?.includes(groupId);
@@ -14340,11 +14959,18 @@ var duplicateElements = (opts) => {
       insertBeforeOrAfterIndex(targetIndex, copyElements(groupElements));
       continue;
     }
-    if (element.frameId && frameIdsToDuplicate.has(element.frameId)) {
+    if (!preserveFrameChildrenOrder && element.frameId && frameIdsToDuplicate.has(element.frameId)) {
       continue;
     }
     if (isFrameLikeElement(element)) {
       const frameId = element.id;
+      if (preserveFrameChildrenOrder) {
+        insertBeforeOrAfterIndex(
+          findLastIndex(elementsWithDuplicates, (el) => el.id === frameId),
+          copyElements(element)
+        );
+        continue;
+      }
       const frameChildren = getFrameChildren(elements, frameId);
       const targetIndex = findLastIndex(elementsWithDuplicates, (el) => {
         return el.frameId === frameId || el.id === frameId;
@@ -14998,586 +15624,132 @@ var StoreSnapshot = class _StoreSnapshot {
     if (!didAppStateChange) {
       return this.appState;
     }
-    return nextAppStateSnapshot;
-  }
-  maybeCreateElementsSnapshot(elements, options = {
-    shouldCompareHashes: false
-  }) {
-    if (!elements) {
-      return this.elements;
-    }
-    const changedElements = this.detectChangedElements(elements, options);
-    if (!changedElements?.size) {
-      return this.elements;
-    }
-    const elementsSnapshot = this.createElementsSnapshot(changedElements);
-    return elementsSnapshot;
-  }
-  detectChangedAppState(nextObservedAppState, options = {
-    shouldCompareHashes: false
-  }) {
-    if (this.appState === nextObservedAppState) {
-      return;
-    }
-    const didAppStateChange = Delta.isRightDifferent(
-      this.appState,
-      nextObservedAppState
-    );
-    if (!didAppStateChange) {
-      return;
-    }
-    const changedAppStateHash = hashString(
-      JSON.stringify(nextObservedAppState)
-    );
-    if (options.shouldCompareHashes && this._lastChangedAppStateHash === changedAppStateHash) {
-      return;
-    }
-    this._lastChangedAppStateHash = changedAppStateHash;
-    return didAppStateChange;
-  }
-  /**
-   * Detect if there are any changed elements.
-   */
-  detectChangedElements(nextElements, options = {
-    shouldCompareHashes: false
-  }) {
-    if (this.elements === nextElements) {
-      return;
-    }
-    const changedElements = /* @__PURE__ */ new Map();
-    for (const prevElement of toIterable(this.elements)) {
-      const nextElement = nextElements.get(prevElement.id);
-      if (!nextElement) {
-        changedElements.set(
-          prevElement.id,
-          newElementWith(prevElement, { isDeleted: true })
-        );
-      }
-    }
-    for (const nextElement of toIterable(nextElements)) {
-      const prevElement = this.elements.get(nextElement.id);
-      if (!prevElement || // element was added
-      prevElement.version < nextElement.version) {
-        if (isImageElement(nextElement) && !isInitializedImageElement(nextElement)) {
-          continue;
-        }
-        changedElements.set(nextElement.id, nextElement);
-      }
-    }
-    if (!changedElements.size) {
-      return;
-    }
-    const changedElementsHash = hashElementsVersion(changedElements);
-    if (options.shouldCompareHashes && this._lastChangedElementsHash === changedElementsHash) {
-      return;
-    }
-    this._lastChangedElementsHash = changedElementsHash;
-    return changedElements;
-  }
-  /**
-   * Perform structural clone, deep cloning only elements that changed.
-   */
-  createElementsSnapshot(changedElements) {
-    const clonedElements = /* @__PURE__ */ new Map();
-    for (const prevElement of toIterable(this.elements)) {
-      clonedElements.set(prevElement.id, prevElement);
-    }
-    for (const changedElement of toIterable(changedElements)) {
-      clonedElements.set(changedElement.id, deepCopyElement(changedElement));
-    }
-    return clonedElements;
-  }
-};
-var hiddenObservedAppStateProp = "__observedAppState";
-var getDefaultObservedAppState = () => {
-  return {
-    name: null,
-    editingGroupId: null,
-    viewBackgroundColor: COLOR_PALETTE2.white,
-    selectedElementIds: {},
-    selectedGroupIds: {},
-    selectedLinearElement: null,
-    croppingElementId: null,
-    activeLockedId: null,
-    lockedMultiSelections: {}
-  };
-};
-var getObservedAppState = (appState) => {
-  const observedAppState = {
-    name: appState.name,
-    editingGroupId: appState.editingGroupId,
-    viewBackgroundColor: appState.viewBackgroundColor,
-    selectedElementIds: appState.selectedElementIds,
-    selectedGroupIds: appState.selectedGroupIds,
-    croppingElementId: appState.croppingElementId,
-    activeLockedId: appState.activeLockedId,
-    lockedMultiSelections: appState.lockedMultiSelections,
-    selectedLinearElement: appState.selectedLinearElement ? {
-      elementId: appState.selectedLinearElement.elementId,
-      isEditing: !!appState.selectedLinearElement.isEditing
-    } : null
-  };
-  Reflect.defineProperty(observedAppState, hiddenObservedAppStateProp, {
-    value: true,
-    enumerable: false
-  });
-  return observedAppState;
-};
-var isObservedAppState = (appState) => !!Reflect.get(appState, hiddenObservedAppStateProp);
-
-// src/fractionalIndex.ts
-init_define_import_meta_env();
-
-// ../../node_modules/fractional-indexing/src/index.js
-init_define_import_meta_env();
-var BASE_62_DIGITS = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
-function midpoint(a2, b2, digits) {
-  const zero = digits[0];
-  if (b2 != null && a2 >= b2) {
-    throw new Error(a2 + " >= " + b2);
-  }
-  if (a2.slice(-1) === zero || b2 && b2.slice(-1) === zero) {
-    throw new Error("trailing zero");
-  }
-  if (b2) {
-    let n = 0;
-    while ((a2[n] || zero) === b2[n]) {
-      n++;
-    }
-    if (n > 0) {
-      return b2.slice(0, n) + midpoint(a2.slice(n), b2.slice(n), digits);
-    }
-  }
-  const digitA = a2 ? digits.indexOf(a2[0]) : 0;
-  const digitB = b2 != null ? digits.indexOf(b2[0]) : digits.length;
-  if (digitB - digitA > 1) {
-    const midDigit = Math.round(0.5 * (digitA + digitB));
-    return digits[midDigit];
-  } else {
-    if (b2 && b2.length > 1) {
-      return b2.slice(0, 1);
-    } else {
-      return digits[digitA] + midpoint(a2.slice(1), null, digits);
-    }
-  }
-}
-function validateInteger(int) {
-  if (int.length !== getIntegerLength(int[0])) {
-    throw new Error("invalid integer part of order key: " + int);
-  }
-}
-function getIntegerLength(head) {
-  if (head >= "a" && head <= "z") {
-    return head.charCodeAt(0) - "a".charCodeAt(0) + 2;
-  } else if (head >= "A" && head <= "Z") {
-    return "Z".charCodeAt(0) - head.charCodeAt(0) + 2;
-  } else {
-    throw new Error("invalid order key head: " + head);
-  }
-}
-function getIntegerPart(key) {
-  const integerPartLength = getIntegerLength(key[0]);
-  if (integerPartLength > key.length) {
-    throw new Error("invalid order key: " + key);
-  }
-  return key.slice(0, integerPartLength);
-}
-function validateOrderKey(key, digits) {
-  if (key === "A" + digits[0].repeat(26)) {
-    throw new Error("invalid order key: " + key);
-  }
-  const i = getIntegerPart(key);
-  const f = key.slice(i.length);
-  if (f.slice(-1) === digits[0]) {
-    throw new Error("invalid order key: " + key);
-  }
-}
-function incrementInteger(x, digits) {
-  validateInteger(x);
-  const [head, ...digs] = x.split("");
-  let carry = true;
-  for (let i = digs.length - 1; carry && i >= 0; i--) {
-    const d = digits.indexOf(digs[i]) + 1;
-    if (d === digits.length) {
-      digs[i] = digits[0];
-    } else {
-      digs[i] = digits[d];
-      carry = false;
-    }
-  }
-  if (carry) {
-    if (head === "Z") {
-      return "a" + digits[0];
-    }
-    if (head === "z") {
-      return null;
-    }
-    const h = String.fromCharCode(head.charCodeAt(0) + 1);
-    if (h > "a") {
-      digs.push(digits[0]);
-    } else {
-      digs.pop();
-    }
-    return h + digs.join("");
-  } else {
-    return head + digs.join("");
-  }
-}
-function decrementInteger(x, digits) {
-  validateInteger(x);
-  const [head, ...digs] = x.split("");
-  let borrow = true;
-  for (let i = digs.length - 1; borrow && i >= 0; i--) {
-    const d = digits.indexOf(digs[i]) - 1;
-    if (d === -1) {
-      digs[i] = digits.slice(-1);
-    } else {
-      digs[i] = digits[d];
-      borrow = false;
-    }
-  }
-  if (borrow) {
-    if (head === "a") {
-      return "Z" + digits.slice(-1);
-    }
-    if (head === "A") {
-      return null;
-    }
-    const h = String.fromCharCode(head.charCodeAt(0) - 1);
-    if (h < "Z") {
-      digs.push(digits.slice(-1));
-    } else {
-      digs.pop();
-    }
-    return h + digs.join("");
-  } else {
-    return head + digs.join("");
-  }
-}
-function generateKeyBetween(a2, b2, digits = BASE_62_DIGITS) {
-  if (a2 != null) {
-    validateOrderKey(a2, digits);
-  }
-  if (b2 != null) {
-    validateOrderKey(b2, digits);
-  }
-  if (a2 != null && b2 != null && a2 >= b2) {
-    throw new Error(a2 + " >= " + b2);
-  }
-  if (a2 == null) {
-    if (b2 == null) {
-      return "a" + digits[0];
-    }
-    const ib2 = getIntegerPart(b2);
-    const fb2 = b2.slice(ib2.length);
-    if (ib2 === "A" + digits[0].repeat(26)) {
-      return ib2 + midpoint("", fb2, digits);
-    }
-    if (ib2 < b2) {
-      return ib2;
-    }
-    const res = decrementInteger(ib2, digits);
-    if (res == null) {
-      throw new Error("cannot decrement any more");
-    }
-    return res;
-  }
-  if (b2 == null) {
-    const ia2 = getIntegerPart(a2);
-    const fa2 = a2.slice(ia2.length);
-    const i2 = incrementInteger(ia2, digits);
-    return i2 == null ? ia2 + midpoint(fa2, null, digits) : i2;
-  }
-  const ia = getIntegerPart(a2);
-  const fa = a2.slice(ia.length);
-  const ib = getIntegerPart(b2);
-  const fb = b2.slice(ib.length);
-  if (ia === ib) {
-    return ia + midpoint(fa, fb, digits);
-  }
-  const i = incrementInteger(ia, digits);
-  if (i == null) {
-    throw new Error("cannot increment any more");
-  }
-  if (i < b2) {
-    return i;
-  }
-  return ia + midpoint(fa, null, digits);
-}
-function generateNKeysBetween(a2, b2, n, digits = BASE_62_DIGITS) {
-  if (n === 0) {
-    return [];
-  }
-  if (n === 1) {
-    return [generateKeyBetween(a2, b2, digits)];
-  }
-  if (b2 == null) {
-    let c2 = generateKeyBetween(a2, b2, digits);
-    const result = [c2];
-    for (let i = 0; i < n - 1; i++) {
-      c2 = generateKeyBetween(c2, b2, digits);
-      result.push(c2);
-    }
-    return result;
-  }
-  if (a2 == null) {
-    let c2 = generateKeyBetween(a2, b2, digits);
-    const result = [c2];
-    for (let i = 0; i < n - 1; i++) {
-      c2 = generateKeyBetween(a2, c2, digits);
-      result.push(c2);
-    }
-    result.reverse();
-    return result;
-  }
-  const mid = Math.floor(n / 2);
-  const c = generateKeyBetween(a2, b2, digits);
-  return [
-    ...generateNKeysBetween(a2, c, mid, digits),
-    c,
-    ...generateNKeysBetween(c, b2, n - mid - 1, digits)
-  ];
-}
-
-// src/fractionalIndex.ts
-import { arrayToMap as arrayToMap8 } from "@excalidraw/common";
-var InvalidFractionalIndexError = class extends Error {
-  code = "ELEMENT_HAS_INVALID_INDEX";
-};
-var validateFractionalIndices = (elements, {
-  shouldThrow = false,
-  includeBoundTextValidation = false,
-  ignoreLogs,
-  reconciliationContext
-}) => {
-  const errorMessages = [];
-  const stringifyElement = (element) => `${element?.index}:${element?.id}:${element?.type}:${element?.isDeleted}:${element?.version}:${element?.versionNonce}`;
-  const indices = elements.map((x) => x.index);
-  for (const [i, index] of indices.entries()) {
-    const predecessorIndex = indices[i - 1];
-    const successorIndex = indices[i + 1];
-    if (!isValidFractionalIndex(index, predecessorIndex, successorIndex)) {
-      errorMessages.push(
-        `Fractional indices invariant has been compromised: "${stringifyElement(
-          elements[i - 1]
-        )}", "${stringifyElement(elements[i])}", "${stringifyElement(
-          elements[i + 1]
-        )}"`
-      );
-    }
-    if (includeBoundTextValidation && hasBoundTextElement(elements[i])) {
-      const container = elements[i];
-      const text = getBoundTextElement(container, arrayToMap8(elements));
-      if (text && text.index <= container.index) {
-        errorMessages.push(
-          `Fractional indices invariant for bound elements has been compromised: "${stringifyElement(
-            text
-          )}", "${stringifyElement(container)}"`
-        );
-      }
-    }
-  }
-  if (errorMessages.length) {
-    const error = new InvalidFractionalIndexError();
-    const additionalContext = [];
-    if (reconciliationContext) {
-      additionalContext.push("Additional reconciliation context:");
-      additionalContext.push(
-        reconciliationContext.localElements.map((x) => stringifyElement(x))
-      );
-      additionalContext.push(
-        reconciliationContext.remoteElements.map((x) => stringifyElement(x))
-      );
-    }
-    if (!ignoreLogs) {
-      console.error(
-        errorMessages.join("\n\n"),
-        error.stack,
-        elements.map((x) => stringifyElement(x)),
-        ...additionalContext
-      );
-    }
-    if (shouldThrow) {
-      throw error;
-    }
-  }
-};
-var orderByFractionalIndex = (elements) => {
-  return elements.sort((a2, b2) => {
-    if (isOrderedElement(a2) && isOrderedElement(b2)) {
-      if (a2.index < b2.index) {
-        return -1;
-      } else if (a2.index > b2.index) {
-        return 1;
-      }
-      return a2.id < b2.id ? -1 : 1;
-    }
-    return 1;
-  });
-};
-var syncMovedIndices = (elements, movedElements) => {
-  try {
-    const elementsMap = arrayToMap8(elements);
-    const indicesGroups = getMovedIndicesGroups(elements, movedElements);
-    const elementsUpdates = generateIndices(elements, indicesGroups);
-    const elementsCandidates = elements.map((x) => {
-      const elementUpdates = elementsUpdates.get(x);
-      if (elementUpdates) {
-        return { ...x, index: elementUpdates.index };
-      }
-      return x;
-    });
-    validateFractionalIndices(
-      elementsCandidates,
-      // we don't autofix invalid bound text indices, hence don't include it in the validation
-      {
-        includeBoundTextValidation: false,
-        shouldThrow: true,
-        ignoreLogs: true
-      }
-    );
-    for (const [element, { index }] of elementsUpdates) {
-      mutateElement(element, elementsMap, { index });
-    }
-  } catch (e) {
-    syncInvalidIndices(elements);
-  }
-  return elements;
-};
-var syncInvalidIndices = (elements) => {
-  const elementsMap = arrayToMap8(elements);
-  const indicesGroups = getInvalidIndicesGroups(elements);
-  const elementsUpdates = generateIndices(elements, indicesGroups);
-  for (const [element, { index }] of elementsUpdates) {
-    mutateElement(element, elementsMap, { index });
-  }
-  return elements;
-};
-var syncInvalidIndicesImmutable = (elements) => {
-  const syncedElements = arrayToMap8(elements);
-  const indicesGroups = getInvalidIndicesGroups(elements);
-  const elementsUpdates = generateIndices(elements, indicesGroups);
-  for (const [element, { index }] of elementsUpdates) {
-    syncedElements.set(element.id, newElementWith(element, { index }));
-  }
-  return syncedElements;
-};
-var getMovedIndicesGroups = (elements, movedElements) => {
-  const indicesGroups = [];
-  let i = 0;
-  while (i < elements.length) {
-    if (movedElements.has(elements[i].id)) {
-      const indicesGroup = [i - 1, i];
-      while (++i < elements.length) {
-        if (!movedElements.has(elements[i].id)) {
-          break;
-        }
-        indicesGroup.push(i);
-      }
-      indicesGroup.push(i);
-      indicesGroups.push(indicesGroup);
-    } else {
-      i++;
-    }
+    return nextAppStateSnapshot;
   }
-  return indicesGroups;
-};
-var getInvalidIndicesGroups = (elements) => {
-  const indicesGroups = [];
-  let lowerBound = void 0;
-  let upperBound = void 0;
-  let lowerBoundIndex = -1;
-  let upperBoundIndex = 0;
-  const getLowerBound = (index) => {
-    const lowerBound2 = elements[lowerBoundIndex] ? elements[lowerBoundIndex].index : void 0;
-    const candidate = elements[index - 1]?.index;
-    if (!lowerBound2 && candidate || // first lowerBound
-    lowerBound2 && candidate && candidate > lowerBound2) {
-      return [candidate, index - 1];
+  maybeCreateElementsSnapshot(elements, options = {
+    shouldCompareHashes: false
+  }) {
+    if (!elements) {
+      return this.elements;
     }
-    return [lowerBound2, lowerBoundIndex];
-  };
-  const getUpperBound = (index) => {
-    const upperBound2 = elements[upperBoundIndex] ? elements[upperBoundIndex].index : void 0;
-    if (upperBound2 && index < upperBoundIndex) {
-      return [upperBound2, upperBoundIndex];
+    const changedElements = this.detectChangedElements(elements, options);
+    if (!changedElements?.size) {
+      return this.elements;
     }
-    let i2 = upperBoundIndex;
-    while (++i2 < elements.length) {
-      const candidate = elements[i2]?.index;
-      if (!upperBound2 && candidate || // first upperBound
-      upperBound2 && candidate && candidate > upperBound2) {
-        return [candidate, i2];
+    const elementsSnapshot = this.createElementsSnapshot(changedElements);
+    return elementsSnapshot;
+  }
+  detectChangedAppState(nextObservedAppState, options = {
+    shouldCompareHashes: false
+  }) {
+    if (this.appState === nextObservedAppState) {
+      return;
+    }
+    const didAppStateChange = Delta.isRightDifferent(
+      this.appState,
+      nextObservedAppState
+    );
+    if (!didAppStateChange) {
+      return;
+    }
+    const changedAppStateHash = hashString(
+      JSON.stringify(nextObservedAppState)
+    );
+    if (options.shouldCompareHashes && this._lastChangedAppStateHash === changedAppStateHash) {
+      return;
+    }
+    this._lastChangedAppStateHash = changedAppStateHash;
+    return didAppStateChange;
+  }
+  /**
+   * Detect if there are any changed elements.
+   */
+  detectChangedElements(nextElements, options = {
+    shouldCompareHashes: false
+  }) {
+    if (this.elements === nextElements) {
+      return;
+    }
+    const changedElements = /* @__PURE__ */ new Map();
+    for (const prevElement of toIterable(this.elements)) {
+      const nextElement = nextElements.get(prevElement.id);
+      if (!nextElement) {
+        changedElements.set(
+          prevElement.id,
+          newElementWith(prevElement, { isDeleted: true })
+        );
       }
     }
-    return [void 0, i2];
-  };
-  let i = 0;
-  while (i < elements.length) {
-    const current = elements[i].index;
-    [lowerBound, lowerBoundIndex] = getLowerBound(i);
-    [upperBound, upperBoundIndex] = getUpperBound(i);
-    if (!isValidFractionalIndex(current, lowerBound, upperBound)) {
-      const indicesGroup = [lowerBoundIndex, i];
-      while (++i < elements.length) {
-        const current2 = elements[i].index;
-        const [nextLowerBound, nextLowerBoundIndex] = getLowerBound(i);
-        const [nextUpperBound, nextUpperBoundIndex] = getUpperBound(i);
-        if (isValidFractionalIndex(current2, nextLowerBound, nextUpperBound)) {
-          break;
+    for (const nextElement of toIterable(nextElements)) {
+      const prevElement = this.elements.get(nextElement.id);
+      if (!prevElement || // element was added
+      prevElement.version < nextElement.version) {
+        if (isImageElement(nextElement) && !isInitializedImageElement(nextElement)) {
+          continue;
         }
-        [lowerBound, lowerBoundIndex] = [nextLowerBound, nextLowerBoundIndex];
-        [upperBound, upperBoundIndex] = [nextUpperBound, nextUpperBoundIndex];
-        indicesGroup.push(i);
+        changedElements.set(nextElement.id, nextElement);
       }
-      indicesGroup.push(upperBoundIndex);
-      indicesGroups.push(indicesGroup);
-    } else {
-      i++;
     }
+    if (!changedElements.size) {
+      return;
+    }
+    const changedElementsHash = hashElementsVersion(changedElements);
+    if (options.shouldCompareHashes && this._lastChangedElementsHash === changedElementsHash) {
+      return;
+    }
+    this._lastChangedElementsHash = changedElementsHash;
+    return changedElements;
   }
-  return indicesGroups;
-};
-var isValidFractionalIndex = (index, predecessor, successor) => {
-  if (!index) {
-    return false;
-  }
-  if (predecessor && successor) {
-    return predecessor < index && index < successor;
-  }
-  if (!predecessor && successor) {
-    return index < successor;
-  }
-  if (predecessor && !successor) {
-    return predecessor < index;
-  }
-  return !!index;
-};
-var generateIndices = (elements, indicesGroups) => {
-  const elementsUpdates = /* @__PURE__ */ new Map();
-  for (const indices of indicesGroups) {
-    const lowerBoundIndex = indices.shift();
-    const upperBoundIndex = indices.pop();
-    const fractionalIndices = generateNKeysBetween(
-      elements[lowerBoundIndex]?.index,
-      elements[upperBoundIndex]?.index,
-      indices.length
-    );
-    for (let i = 0; i < indices.length; i++) {
-      const element = elements[indices[i]];
-      elementsUpdates.set(element, {
-        index: fractionalIndices[i]
-      });
+  /**
+   * Perform structural clone, deep cloning only elements that changed.
+   */
+  createElementsSnapshot(changedElements) {
+    const clonedElements = /* @__PURE__ */ new Map();
+    for (const prevElement of toIterable(this.elements)) {
+      clonedElements.set(prevElement.id, prevElement);
+    }
+    for (const changedElement of toIterable(changedElements)) {
+      clonedElements.set(changedElement.id, deepCopyElement(changedElement));
     }
+    return clonedElements;
   }
-  return elementsUpdates;
 };
-var isOrderedElement = (element) => {
-  if (element.index) {
-    return true;
-  }
-  return false;
+var hiddenObservedAppStateProp = "__observedAppState";
+var getDefaultObservedAppState = () => {
+  return {
+    name: null,
+    editingGroupId: null,
+    viewBackgroundColor: COLOR_PALETTE2.white,
+    selectedElementIds: {},
+    selectedGroupIds: {},
+    selectedLinearElement: null,
+    croppingElementId: null,
+    activeLockedId: null,
+    lockedMultiSelections: {}
+  };
+};
+var getObservedAppState = (appState) => {
+  const observedAppState = {
+    name: appState.name,
+    editingGroupId: appState.editingGroupId,
+    viewBackgroundColor: appState.viewBackgroundColor,
+    selectedElementIds: appState.selectedElementIds,
+    selectedGroupIds: appState.selectedGroupIds,
+    croppingElementId: appState.croppingElementId,
+    activeLockedId: appState.activeLockedId,
+    lockedMultiSelections: appState.lockedMultiSelections,
+    selectedLinearElement: appState.selectedLinearElement ? {
+      elementId: appState.selectedLinearElement.elementId,
+      isEditing: !!appState.selectedLinearElement.isEditing
+    } : null
+  };
+  Reflect.defineProperty(observedAppState, hiddenObservedAppStateProp, {
+    value: true,
+    enumerable: false
+  });
+  return observedAppState;
 };
+var isObservedAppState = (appState) => !!Reflect.get(appState, hiddenObservedAppStateProp);
 
 // src/Scene.ts
 init_define_import_meta_env();
@@ -15796,24 +15968,14 @@ var Scene = class {
     this.selectedElementsCache.cache.clear();
     this.callbacks.clear();
   }
-  insertElementAtIndex(element, index) {
-    if (!Number.isFinite(index) || index < 0) {
-      throw new Error(
-        "insertElementAtIndex can only be called with index >= 0"
-      );
-    }
-    const nextElements = [
-      ...this.elements.slice(0, index),
-      element,
-      ...this.elements.slice(index)
-    ];
-    syncMovedIndices2(nextElements, arrayToMap9([element]));
-    this.replaceAllElements(nextElements);
-  }
+  /** low-level - generally use app.insertNewElements() */
   insertElementsAtIndex(elements, index) {
     if (!elements.length) {
       return;
     }
+    if (index === null) {
+      index = this.elements.length;
+    }
     if (!Number.isFinite(index) || index < 0) {
       throw new Error(
         "insertElementAtIndex can only be called with index >= 0"
@@ -15827,16 +15989,9 @@ var Scene = class {
     syncMovedIndices2(nextElements, arrayToMap9(elements));
     this.replaceAllElements(nextElements);
   }
+  /** low-level - generally use app.insertNewElement() */
   insertElement = (element) => {
-    const index = element.frameId ? this.getElementIndex(element.frameId) : this.elements.length;
-    this.insertElementAtIndex(element, index);
-  };
-  insertElements = (elements) => {
-    if (!elements.length) {
-      return;
-    }
-    const index = elements[0]?.frameId ? this.getElementIndex(elements[0].frameId) : this.elements.length;
-    this.insertElementsAtIndex(elements, index);
+    this.insertElementsAtIndex([element], null);
   };
   getElementIndex(elementId) {
     return this.elements.findIndex((element) => element.id === elementId);
@@ -18252,19 +18407,19 @@ var embeddableURLValidator = (url, validateEmbeddable) => {
 
 // src/flowchart.ts
 init_define_import_meta_env();
-import { KEYS as KEYS3, invariant as invariant11, toBrandedType as toBrandedType2 } from "@excalidraw/common";
-import { pointFrom as pointFrom15 } from "@excalidraw/math";
+import { KEYS as KEYS2, invariant as invariant11, toBrandedType as toBrandedType2 } from "@excalidraw/common";
+import { pointFrom as pointFrom14 } from "@excalidraw/math";
 var VERTICAL_OFFSET = 100;
 var HORIZONTAL_OFFSET = 100;
 var getLinkDirectionFromKey = (key) => {
   switch (key) {
-    case KEYS3.ARROW_UP:
+    case KEYS2.ARROW_UP:
       return "up";
-    case KEYS3.ARROW_DOWN:
+    case KEYS2.ARROW_DOWN:
       return "down";
-    case KEYS3.ARROW_RIGHT:
+    case KEYS2.ARROW_RIGHT:
       return "right";
-    case KEYS3.ARROW_LEFT:
+    case KEYS2.ARROW_LEFT:
       return "left";
     default:
       return "right";
@@ -18533,7 +18688,7 @@ var createBindingArrow = (startBindingElement, endBindingElement, direction, app
     strokeWidth: startBindingElement.strokeWidth,
     opacity: startBindingElement.opacity,
     roughness: startBindingElement.roughness,
-    points: [pointFrom15(0, 0), pointFrom15(endX, endY)],
+    points: [pointFrom14(0, 0), pointFrom14(endX, endY)],
     elbowed: true
   });
   const elementsMap = scene.getNonDeletedElementsMap();
@@ -18721,12 +18876,13 @@ var isNodeInFlowchart = (element, elementsMap) => {
 
 // src/arrows/focus.ts
 init_define_import_meta_env();
-import { pointDistance as pointDistance8, pointFrom as pointFrom16 } from "@excalidraw/math";
+import { pointDistance as pointDistance8, pointFrom as pointFrom15 } from "@excalidraw/math";
 import { invariant as invariant12 } from "@excalidraw/common";
 
 // src/zindex.ts
 init_define_import_meta_env();
 import { arrayToMap as arrayToMap11, findIndex, findLastIndex as findLastIndex2 } from "@excalidraw/common";
+import { isFiniteNumber } from "@excalidraw/math";
 var isOfTargetFrame = (element, frameId) => {
   return element.frameId === frameId || element.id === frameId;
 };
@@ -18906,7 +19062,34 @@ var getTargetElementsMap = (elements, indices) => {
     return acc;
   }, /* @__PURE__ */ new Map());
 };
+var hasSameElementIds = (prevElements, nextElements) => {
+  if (prevElements.length !== nextElements.length) {
+    console.error(
+      "z-index reordering failed: resulting array have different lengths"
+    );
+    return false;
+  }
+  const prevElementIdCounts = /* @__PURE__ */ new Map();
+  for (const element of prevElements) {
+    prevElementIdCounts.set(
+      element.id,
+      (prevElementIdCounts.get(element.id) || 0) + 1
+    );
+  }
+  for (const element of nextElements) {
+    const count = prevElementIdCounts.get(element.id);
+    if (!count) {
+      console.error(
+        "z-index reordering failed: element id mismatch / duplicate ids"
+      );
+      return false;
+    }
+    prevElementIdCounts.set(element.id, count - 1);
+  }
+  return true;
+};
 var shiftElementsByOne = (elements, appState, direction, scene) => {
+  const originalElements = elements;
   const indicesToMove = getIndicesToMove(elements, appState);
   const targetElementsMap = getTargetElementsMap(elements, indicesToMove);
   let groupedIndices = toContiguousGroups(indicesToMove);
@@ -18951,11 +19134,17 @@ var shiftElementsByOne = (elements, appState, direction, scene) => {
       ...trailingElements
     ];
   });
+  if (!hasSameElementIds(originalElements, elements)) {
+    return originalElements;
+  }
   syncMovedIndices(elements, targetElementsMap);
   return elements;
 };
 var shiftElementsToEnd = (elements, appState, direction, containingFrame, elementsToBeMoved) => {
   const indicesToMove = getIndicesToMove(elements, appState, elementsToBeMoved);
+  if (indicesToMove.length === 0) {
+    return elements;
+  }
   const targetElementsMap = getTargetElementsMap(elements, indicesToMove);
   const displacedElements = [];
   let leadingIndex;
@@ -19002,6 +19191,12 @@ var shiftElementsToEnd = (elements, appState, direction, containingFrame, elemen
   if (leadingIndex === -1) {
     leadingIndex = 0;
   }
+  const isValidIndex = (index) => {
+    return isFiniteNumber(index) && index >= 0;
+  };
+  if (!isValidIndex(leadingIndex) || !isValidIndex(trailingIndex) || leadingIndex > trailingIndex || indicesToMove.some((index) => index < leadingIndex || index > trailingIndex)) {
+    return elements;
+  }
   for (let index = leadingIndex; index < trailingIndex + 1; index++) {
     if (!indicesToMove.includes(index)) {
       displacedElements.push(elements[index]);
@@ -19021,6 +19216,9 @@ var shiftElementsToEnd = (elements, appState, direction, containingFrame, elemen
     ...targetElements,
     ...trailingElements
   ];
+  if (!hasSameElementIds(elements, nextElements)) {
+    return elements;
+  }
   syncMovedIndices(nextElements, targetElementsMap);
   return nextElements;
 };
@@ -19062,7 +19260,7 @@ function shiftElementsAccountingForFrames(allElements, appState, direction, shif
   );
   for (const [frameId, children] of frameChildrenSets) {
     nextElements = shiftFunction(
-      allElements,
+      nextElements,
       appState,
       direction,
       frameId,
@@ -19211,7 +19409,7 @@ var handleFocusPointDrag = (linearElementEditor, elementsMap, pointerCoords, sce
   const isStartBinding = linearElementEditor.draggedFocusPointBinding === "start";
   const binding = isStartBinding ? arrow.startBinding : arrow.endBinding;
   const { x: offsetX, y: offsetY } = linearElementEditor.pointerOffset;
-  const point = pointFrom16(
+  const point = pointFrom15(
     pointerCoords.x - offsetX,
     pointerCoords.y - offsetY
   );
@@ -19294,7 +19492,7 @@ var handleFocusPointDrag = (linearElementEditor, elementsMap, pointerCoords, sce
   }
 };
 var handleFocusPointPointerDown = (arrow, pointerDownState, elementsMap, appState) => {
-  const pointerPos = pointFrom16(
+  const pointerPos = pointFrom15(
     pointerDownState.origin.x,
     pointerDownState.origin.y
   );
@@ -19397,7 +19595,7 @@ var handleFocusPointPointerUp = (linearElementEditor, scene) => {
 };
 var handleFocusPointHover = (arrow, scenePointerX, scenePointerY, scene, appState) => {
   const elementsMap = scene.getNonDeletedElementsMap();
-  const pointerPos = pointFrom16(scenePointerX, scenePointerY);
+  const pointerPos = pointFrom15(scenePointerX, scenePointerY);
   const hitThreshold = FOCUS_POINT_SIZE * 1.5 / appState.zoom.value;
   if (arrow.startBinding?.elementId) {
     const bindableElement = elementsMap.get(arrow.startBinding.elementId);
@@ -19618,8 +19816,8 @@ init_define_import_meta_env();
 import {
   pointCenter as pointCenter3,
   normalizeRadians as normalizeRadians2,
-  pointFrom as pointFrom17,
-  pointRotateRads as pointRotateRads14
+  pointFrom as pointFrom16,
+  pointRotateRads as pointRotateRads13
 } from "@excalidraw/math";
 import {
   MIN_FONT_SIZE,
@@ -19807,7 +20005,7 @@ var resizeSingleTextElement = (origElement, element, scene, transformHandleType,
     return;
   }
   if (transformHandleType.includes("n") || transformHandleType.includes("s")) {
-    const previousOrigin = pointFrom17(origElement.x, origElement.y);
+    const previousOrigin = pointFrom16(origElement.x, origElement.y);
     const newOrigin = getResizedOrigin(
       previousOrigin,
       origElement.width,
@@ -19848,7 +20046,7 @@ var resizeSingleTextElement = (origElement, element, scene, transformHandleType,
       element.lineHeight
     );
     const newHeight = metrics2.height;
-    const previousOrigin = pointFrom17(origElement.x, origElement.y);
+    const previousOrigin = pointFrom16(origElement.x, origElement.y);
     const newOrigin = getResizedOrigin(
       previousOrigin,
       origElement.width,
@@ -19885,9 +20083,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] = pointRotateRads14(
-        pointFrom17(cx, cy),
-        pointFrom17(centerX, centerY),
+      const [rotatedCX, rotatedCY] = pointRotateRads13(
+        pointFrom16(cx, cy),
+        pointFrom16(centerX, centerY),
         centerAngle + origAngle - element.angle
       );
       const updates = isElbowArrow(element) ? {
@@ -19936,44 +20134,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] = pointRotateRads14(
-    pointFrom17(x, y),
-    pointFrom17(cx, cy),
+  [x, y] = pointRotateRads13(
+    pointFrom16(x, y),
+    pointFrom16(cx, cy),
     -angle
   );
   switch (transformHandleType) {
     case "n":
-      return pointRotateRads14(
-        pointFrom17(x - (x1 + x2) / 2, y - y1),
-        pointFrom17(0, 0),
+      return pointRotateRads13(
+        pointFrom16(x - (x1 + x2) / 2, y - y1),
+        pointFrom16(0, 0),
         angle
       );
     case "s":
-      return pointRotateRads14(
-        pointFrom17(x - (x1 + x2) / 2, y - y2),
-        pointFrom17(0, 0),
+      return pointRotateRads13(
+        pointFrom16(x - (x1 + x2) / 2, y - y2),
+        pointFrom16(0, 0),
         angle
       );
     case "w":
-      return pointRotateRads14(
-        pointFrom17(x - x1, y - (y1 + y2) / 2),
-        pointFrom17(0, 0),
+      return pointRotateRads13(
+        pointFrom16(x - x1, y - (y1 + y2) / 2),
+        pointFrom16(0, 0),
         angle
       );
     case "e":
-      return pointRotateRads14(
-        pointFrom17(x - x2, y - (y1 + y2) / 2),
-        pointFrom17(0, 0),
+      return pointRotateRads13(
+        pointFrom16(x - x2, y - (y1 + y2) / 2),
+        pointFrom16(0, 0),
         angle
       );
     case "nw":
-      return pointRotateRads14(pointFrom17(x - x1, y - y1), pointFrom17(0, 0), angle);
+      return pointRotateRads13(pointFrom16(x - x1, y - y1), pointFrom16(0, 0), angle);
     case "ne":
-      return pointRotateRads14(pointFrom17(x - x2, y - y1), pointFrom17(0, 0), angle);
+      return pointRotateRads13(pointFrom16(x - x2, y - y1), pointFrom16(0, 0), angle);
     case "sw":
-      return pointRotateRads14(pointFrom17(x - x1, y - y2), pointFrom17(0, 0), angle);
+      return pointRotateRads13(pointFrom16(x - x1, y - y2), pointFrom16(0, 0), angle);
     case "se":
-      return pointRotateRads14(pointFrom17(x - x2, y - y2), pointFrom17(0, 0), angle);
+      return pointRotateRads13(pointFrom16(x - x2, y - y2), pointFrom16(0, 0), angle);
     default:
       return [0, 0];
   }
@@ -20136,10 +20334,10 @@ var resizeSingleElement = (nextWidth, nextHeight, latestElement, origElement, or
     nextHeight,
     true
   );
-  let previousOrigin = pointFrom17(origElement.x, origElement.y);
+  let previousOrigin = pointFrom16(origElement.x, origElement.y);
   if (isLinearElement(origElement)) {
     const [x1, y1] = getElementBounds(origElement, originalElementsMap);
-    previousOrigin = pointFrom17(x1, y1);
+    previousOrigin = pointFrom16(x1, y1);
   }
   const newOrigin = getResizedOrigin(
     previousOrigin,
@@ -20162,7 +20360,7 @@ var resizeSingleElement = (nextWidth, nextHeight, latestElement, origElement, or
     newOrigin.x += scaledX;
     newOrigin.y += scaledY;
     rescaledPoints.points = rescaledPoints.points.map(
-      (p) => pointFrom17(p[0] - scaledX, p[1] - scaledY)
+      (p) => pointFrom16(p[0] - scaledX, p[1] - scaledY)
     );
   }
   if (nextWidth < 0) {
@@ -20238,11 +20436,11 @@ var getNextSingleWidthAndHeightFromPointer = (latestElement, origElement, handle
     origElement.height,
     true
   );
-  const startTopLeft = pointFrom17(x1, y1);
-  const startBottomRight = pointFrom17(x2, y2);
+  const startTopLeft = pointFrom16(x1, y1);
+  const startBottomRight = pointFrom16(x2, y2);
   const startCenter = pointCenter3(startTopLeft, startBottomRight);
-  const rotatedPointer = pointRotateRads14(
-    pointFrom17(pointerX, pointerY),
+  const rotatedPointer = pointRotateRads13(
+    pointFrom16(pointerX, pointerY),
     startCenter,
     -origElement.angle
   );
@@ -20612,9 +20810,9 @@ var resizeMultipleElements = (selectedElements, elementsMap, handleDirection, sc
 // src/resizeTest.ts
 init_define_import_meta_env();
 import {
-  pointFrom as pointFrom19,
+  pointFrom as pointFrom18,
   pointOnLineSegment,
-  pointRotateRads as pointRotateRads16
+  pointRotateRads as pointRotateRads15
 } from "@excalidraw/math";
 import {
   SIDE_RESIZING_THRESHOLD
@@ -20625,7 +20823,7 @@ init_define_import_meta_env();
 import {
   DEFAULT_TRANSFORM_HANDLE_SPACING
 } from "@excalidraw/common";
-import { pointFrom as pointFrom18, pointRotateRads as pointRotateRads15 } from "@excalidraw/math";
+import { pointFrom as pointFrom17, pointRotateRads as pointRotateRads14 } from "@excalidraw/math";
 var transformHandleSizes = {
   mouse: 8,
   pen: 16,
@@ -20666,9 +20864,9 @@ var OMIT_SIDES_FOR_LINE_BACKSLASH = {
   w: true
 };
 var generateTransformHandle = (x, y, width, height, cx, cy, angle) => {
-  const [xx, yy] = pointRotateRads15(
-    pointFrom18(x + width / 2, y + height / 2),
-    pointFrom18(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];
@@ -20882,14 +21080,14 @@ var resizeTest = (element, elementsMap, appState, x, y, zoom, pointerType, edito
       const SPACING = isImageElement(element) ? 0 : SIDE_RESIZING_THRESHOLD / zoom.value;
       const ZOOMED_SIDE_RESIZING_THRESHOLD = SIDE_RESIZING_THRESHOLD / zoom.value;
       const sides = getSelectionBorders(
-        pointFrom19(x1 - SPACING, y1 - SPACING),
-        pointFrom19(x2 + SPACING, y2 + SPACING),
-        pointFrom19(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(
-          pointFrom19(x, y),
+          pointFrom18(x, y),
           side,
           ZOOMED_SIDE_RESIZING_THRESHOLD
         )) {
@@ -20938,14 +21136,14 @@ var getTransformHandleTypeFromCoords = ([x1, y1, x2, y2], scenePointerX, scenePo
     const cy = (y1 + y2) / 2;
     const SPACING = SIDE_RESIZING_THRESHOLD / zoom.value;
     const sides = getSelectionBorders(
-      pointFrom19(x1 - SPACING, y1 - SPACING),
-      pointFrom19(x2 + SPACING, y2 + SPACING),
-      pointFrom19(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(
-        pointFrom19(scenePointerX, scenePointerY),
+        pointFrom18(scenePointerX, scenePointerY),
         side,
         SPACING
       )) {
@@ -21002,10 +21200,10 @@ var getCursorForResizingElement = (resizingElement) => {
   return cursor ? `${cursor}-resize` : "";
 };
 var getSelectionBorders = ([x1, y1], [x2, y2], center, angle) => {
-  const topLeft = pointRotateRads16(pointFrom19(x1, y1), center, angle);
-  const topRight = pointRotateRads16(pointFrom19(x2, y1), center, angle);
-  const bottomLeft = pointRotateRads16(pointFrom19(x1, y2), center, angle);
-  const bottomRight = pointRotateRads16(pointFrom19(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],
@@ -21022,7 +21220,7 @@ var showSelectedShapeActions = (appState, elements) => Boolean(
 
 // src/transform.ts
 init_define_import_meta_env();
-import { pointFrom as pointFrom20 } from "@excalidraw/math";
+import { pointFrom as pointFrom19 } from "@excalidraw/math";
 import {
   DEFAULT_FONT_FAMILY as DEFAULT_FONT_FAMILY3,
   DEFAULT_FONT_SIZE as DEFAULT_FONT_SIZE4,
@@ -21304,7 +21502,7 @@ var convertToExcalidrawElements = (elementsSkeleton, opts) => {
         excalidrawElement = newLinearElement({
           width,
           height,
-          points: [pointFrom20(0, 0), pointFrom20(width, height)],
+          points: [pointFrom19(0, 0), pointFrom19(width, height)],
           ...element
         });
         break;
@@ -21316,7 +21514,7 @@ var convertToExcalidrawElements = (elementsSkeleton, opts) => {
           width,
           height,
           endArrowhead: "arrow",
-          points: [pointFrom20(0, 0), pointFrom20(width, height)],
+          points: [pointFrom19(0, 0), pointFrom19(width, height)],
           ...element,
           type: "arrow"
         });
@@ -21559,6 +21757,33 @@ var maybeHandleArrowPointlikeDrag = ({
   return false;
 };
 
+// src/arrowheads.ts
+init_define_import_meta_env();
+var normalizeArrowhead = (arrowhead) => {
+  switch (arrowhead) {
+    case void 0:
+    case null:
+      return null;
+    case "dot":
+      return "circle";
+    case "crowfoot_one":
+      return "cardinality_one";
+    case "crowfoot_many":
+      return "cardinality_many";
+    case "crowfoot_one_or_many":
+      return "cardinality_one_or_many";
+    default:
+      return arrowhead;
+  }
+};
+var getArrowheadForPicker = (arrowhead) => {
+  const normalizedArrowhead = normalizeArrowhead(arrowhead);
+  if (normalizedArrowhead === null) {
+    return null;
+  }
+  return normalizedArrowhead;
+};
+
 // src/index.ts
 var getSceneVersion = (elements) => elements.reduce((acc, el) => acc + el.version, 0);
 var hashElementsVersion = (elements) => {
@@ -21629,6 +21854,7 @@ export {
   bindOrUnbindBindingElements,
   bindPointToSnapToElementOutline,
   bindingProperties,
+  boundsContainBounds,
   bumpVersion,
   calculateFixedPointForElbowArrowBinding,
   calculateFixedPointForNonElbowArrowBinding,
@@ -21666,6 +21892,7 @@ export {
   elementWithCanvasCache,
   elementsAreInFrameBounds,
   elementsAreInSameGroup,
+  elementsOverlappingBBox,
   embeddableURLValidator,
   excludeElementsInFramesFromSelection,
   filterElementsEligibleAsFrameChildren,
@@ -21675,11 +21902,13 @@ export {
   frameAndChildrenSelectedTogether,
   generateLinearCollisionShape,
   generateRoughOptions,
+  getActiveTextElement,
   getAllHoveredElementAtPoint,
   getApproxMinLineHeight,
   getApproxMinLineWidth,
   getArrowLocalFixedPoints,
   getArrowheadAngle,
+  getArrowheadForPicker,
   getArrowheadPoints,
   getArrowheadSize,
   getBindingGap,
@@ -21695,6 +21924,7 @@ export {
   getClosestElementBounds,
   getCommonBoundingBox,
   getCommonBounds,
+  getCommonFrameId,
   getContainerCenter,
   getContainerCoords,
   getContainerElement,
@@ -21724,6 +21954,7 @@ export {
   getEmbedLink,
   getFlipAdjustedCropPosition,
   getFrameChildren,
+  getFrameChildrenInsertionIndex,
   getFrameLikeElements,
   getFrameLikeTitle,
   getFreedrawOutlineAsSegments,
@@ -21782,6 +22013,7 @@ export {
   getVisibleAndNonSelectedElements,
   getVisibleElements,
   getVisibleSceneBounds,
+  getWrappedTextLines,
   groupByFrameLikes,
   groupsAreAtLeastIntersectingTheFrame,
   groupsAreCompletelyOutOfFrame,
@@ -21826,6 +22058,7 @@ export {
   isElementInViewport,
   isElementIntersectingFrame,
   isElementLink,
+  isEligibleFrameChildType,
   isEmbeddableElement,
   isExcalidrawElement,
   isFixedPoint,
@@ -21887,6 +22120,7 @@ export {
   newLinearElement,
   newMagicFrameElement,
   newTextElement,
+  normalizeArrowhead,
   normalizeElementOrder,
   normalizeFixedPoint,
   normalizeSVG,
@@ -21898,6 +22132,7 @@ export {
   parseElementLinkFromURL,
   parseTokens,
   pointInsideBounds,
+  pointInsideBoundsInclusive,
   positionElementsOnGrid,
   projectFixedPointOntoDiagonal,
   redrawTextBoundingBox,
@@ -21920,7 +22155,6 @@ export {
   setCustomTextMetricsProvider,
   shouldAllowVerticalAlign,
   shouldApplyFrameClip,
-  shouldEnableBindingForPointerEvent,
   shouldTestInside,
   showSelectedShapeActions,
   snapToMid,