@excalidraw/element 0.18.0-b1c6bfc → 0.18.0-b2b2815

package/dist/dev/index.js

@@ -2260,7 +2260,7 @@ var rough_default = {
 
 // src/bounds.ts
 import {
-  arrayToMap as arrayToMap5,
+  arrayToMap as arrayToMap6,
   invariant as invariant10,
   rescalePoints,
   sizeOf
@@ -3374,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();
@@ -3820,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,
@@ -4937,12 +4956,22 @@ var distanceToLinearOrFreeDraElement = (element, elementsMap, 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);
   }
@@ -5075,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;
       }
     }
@@ -6953,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)",
       {
@@ -7557,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",
@@ -8371,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)
     ])
   };
 };
@@ -8388,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])
   };
@@ -9337,7 +9362,7 @@ var LinearElementEditor = class _LinearElementEditor {
       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})`
+        )}) points(0..${element.points.length - 1}) lastClickedPoint(${lastClickedPoint}) isElbowArrow: ${elbowed}`
       );
       lastClickedPoint = element.points.length - 1;
     }
@@ -10185,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,
@@ -10194,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 });
@@ -10489,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
         }
       ];
@@ -10733,7 +10756,7 @@ var determineCustomLinearAngle = (pivotPoint, draggedPoint) => Math.atan2(dragge
 
 // src/frame.ts
 init_define_import_meta_env();
-import { arrayToMap as arrayToMap4 } from "@excalidraw/common";
+import { arrayToMap as arrayToMap5 } from "@excalidraw/common";
 import { isPointWithinBounds as isPointWithinBounds2, pointFrom as pointFrom11 } from "@excalidraw/math";
 
 // ../utils/src/bbox.ts
@@ -11104,11 +11127,19 @@ var getElementsWithinSelection = (elements, selection, elementsMap, excludeEleme
     )
   ];
   const framesInSelection = excludeElementsInFrames ? /* @__PURE__ */ new Set() : null;
-  let elementsInSelection = [];
+  const groups = {};
+  const elementsInSelection = /* @__PURE__ */ new Set();
   for (const element of elements) {
     if (shouldIgnoreElementFromSelection(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);
@@ -11133,7 +11164,7 @@ var getElementsWithinSelection = (elements, selection, elementsMap, excludeEleme
       ];
     }
     const associatedFrame = getContainingFrame(element, elementsMap);
-    if (associatedFrame && isElementIntersectingFrame(element, associatedFrame, elementsMap)) {
+    if (associatedFrame && elementOverlapsWithFrame(element, associatedFrame, elementsMap)) {
       const frameAABB = getElementBounds(associatedFrame, elementsMap);
       elementAABB = [
         Math.max(elementAABB[0], frameAABB[0]),
@@ -11157,13 +11188,12 @@ var getElementsWithinSelection = (elements, selection, elementsMap, excludeEleme
     if (boundsContainBounds(selectionBounds, commonAABB2)) {
       if (framesInSelection && isFrameLikeElement(element)) {
         framesInSelection.add(element.id);
-      } else {
-        elementsInSelection.push(element);
-        continue;
       }
+      elementsInSelection.add(element);
+      continue;
     }
     if (boxSelectionMode === "overlap" && labelAABB && doBoundsIntersect(selectionBounds, labelAABB)) {
-      elementsInSelection.push(element);
+      elementsInSelection.add(element);
       continue;
     }
     if (boxSelectionMode === "overlap" && doBoundsIntersect(selectionBounds, elementAABB)) {
@@ -11241,20 +11271,34 @@ var getElementsWithinSelection = (elements, selection, elementsMap, excludeEleme
         if (framesInSelection && isFrameLikeElement(element)) {
           framesInSelection.add(element.id);
         }
-        elementsInSelection.push(element);
+        elementsInSelection.add(element);
         continue;
       }
     }
   }
-  elementsInSelection = framesInSelection ? excludeElementsFromFrames(elementsInSelection, framesInSelection) : elementsInSelection;
-  elementsInSelection = elementsInSelection.filter((element) => {
-    const containingFrame = getContainingFrame(element, elementsMap);
-    if (containingFrame) {
-      return elementOverlapsWithFrame(element, containingFrame, elementsMap);
-    }
-    return true;
-  });
-  return elementsInSelection;
+  if (framesInSelection) {
+    elementsInSelection.forEach((element) => {
+      if (element.frameId && framesInSelection.has(element.frameId)) {
+        elementsInSelection.delete(element);
+      }
+    });
+  }
+  if (boxSelectionMode === "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 (boxSelectionMode === "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 getVisibleAndNonSelectedElements = (elements, selectedElements, appState, elementsMap) => {
   const selectedElementsSet = new Set(
@@ -11371,100 +11415,351 @@ var getActiveTextElement = (selectedElements, appState) => {
   return activeTextElement || null;
 };
 
-// src/frame.ts
-var bindElementsToFramesAfterDuplication = (nextElements, origElements, origIdToDuplicateId) => {
-  const nextElementMap = arrayToMap4(nextElements);
-  for (const element of origElements) {
-    if (element.frameId) {
-      const nextElementId = origIdToDuplicateId.get(element.id);
-      const nextFrameId = origIdToDuplicateId.get(element.frameId);
-      const nextElement = nextElementId && nextElementMap.get(nextElementId);
-      if (nextElement) {
-        mutateElement(nextElement, nextElementMap, {
-          frameId: nextFrameId ?? null
-        });
+// 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;
+    }
+  }
 };
-function isElementIntersectingFrame(element, frame, elementsMap) {
-  const frameLineSegments = getElementLineSegments(frame, elementsMap);
-  const elementLineSegments = getElementLineSegments(element, elementsMap);
-  const intersecting = frameLineSegments.some(
-    (frameLineSegment) => elementLineSegments.some(
-      (elementLineSegment) => doLineSegmentsIntersect(frameLineSegment, elementLineSegment)
-    )
-  );
-  return intersecting;
-}
-var getElementsCompletelyInFrame = (elements, frame, elementsMap) => omitGroupsContainingFrameLikes(
-  getElementsWithinSelection(elements, frame, elementsMap, false)
-).filter(
-  (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
-  );
-};
-var getElementsIntersectingFrame = (elements, frame) => {
-  const elementsMap = arrayToMap4(elements);
-  return elements.filter(
-    (element) => isElementIntersectingFrame(element, frame, elementsMap)
-  );
-};
-var elementsAreInFrameBounds = (elements, frame, elementsMap) => {
-  const [frameX1, frameY1, frameX2, frameY2] = getElementAbsoluteCoords2(
-    frame,
-    elementsMap
-  );
-  const [elementX1, elementY1, elementX2, elementY2] = getCommonBounds(elements);
-  return frameX1 <= elementX1 && frameY1 <= elementY1 && frameX2 >= elementX2 && frameY2 >= elementY2;
-};
-var elementOverlapsWithFrame = (element, frame, elementsMap) => {
-  return elementsAreInFrameBounds([element], frame, elementsMap) || isElementIntersectingFrame(element, frame, elementsMap) || isElementContainingFrame(element, frame, elementsMap);
+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 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)
-  );
+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 groupsAreAtLeastIntersectingTheFrame = (elements, groupIds, frame) => {
+var syncInvalidIndices = (elements) => {
   const elementsMap = arrayToMap4(elements);
-  const elementsInGroup = groupIds.flatMap(
-    (groupId) => getElementsInGroup(elements, groupId)
-  );
-  if (elementsInGroup.length === 0) {
-    return true;
+  const indicesGroups = getInvalidIndicesGroups(elements);
+  const elementsUpdates = generateIndices(elements, indicesGroups);
+  for (const [element, { index }] of elementsUpdates) {
+    mutateElement(element, elementsMap, { index });
   }
-  return !!elementsInGroup.find(
-    (element) => elementsAreInFrameBounds([element], frame, elementsMap) || isElementIntersectingFrame(element, frame, elementsMap)
-  );
+  return elements;
 };
-var groupsAreCompletelyOutOfFrame = (elements, groupIds, frame) => {
-  const elementsMap = arrayToMap4(elements);
-  const elementsInGroup = groupIds.flatMap(
-    (groupId) => getElementsInGroup(elements, groupId)
-  );
-  if (elementsInGroup.length === 0) {
-    return true;
+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 elementsInGroup.find(
-    (element) => elementsAreInFrameBounds([element], frame, elementsMap) || isElementIntersectingFrame(element, frame, elementsMap)
-  ) === void 0;
+  return syncedElements;
 };
-var groupByFrameLikes = (elements) => {
-  const frameElementsMap = /* @__PURE__ */ new Map();
-  for (const element of elements) {
-    const frameId = isFrameLikeElement(element) ? element.id : element.frameId;
-    if (frameId && !frameElementsMap.has(frameId)) {
-      frameElementsMap.set(frameId, getFrameChildren(elements, frameId));
+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 frameElementsMap;
+  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) {
+      const nextElementId = origIdToDuplicateId.get(element.id);
+      const nextFrameId = origIdToDuplicateId.get(element.frameId);
+      const nextElement = nextElementId && nextElementMap.get(nextElementId);
+      if (nextElement) {
+        mutateElement(nextElement, nextElementMap, {
+          frameId: nextFrameId ?? null
+        });
+      }
+    }
+  }
+};
+function isElementIntersectingFrame(element, frame, elementsMap) {
+  const frameLineSegments = getElementLineSegments(frame, elementsMap);
+  const elementLineSegments = getElementLineSegments(element, elementsMap);
+  const intersecting = frameLineSegments.some(
+    (frameLineSegment) => elementLineSegments.some(
+      (elementLineSegment) => doLineSegmentsIntersect(frameLineSegment, elementLineSegment)
+    )
+  );
+  return intersecting;
+}
+var getElementsCompletelyInFrame = (elements, frame, elementsMap) => omitGroupsContainingFrameLikes(
+  getElementsWithinSelection(elements, frame, elementsMap, false)
+).filter(
+  (element) => !isFrameLikeElement(element) && !element.frameId || element.frameId === frame.id
+);
+var isElementContainingFrame = (element, frame, elementsMap) => {
+  return boundsContainBounds(
+    getElementBounds(element, elementsMap),
+    getElementBounds(frame, elementsMap)
+  );
+};
+var getElementsIntersectingFrame = (elements, frame) => {
+  const elementsMap = arrayToMap5(elements);
+  return elements.filter(
+    (element) => isElementIntersectingFrame(element, frame, elementsMap)
+  );
+};
+var elementsAreInFrameBounds = (elements, frame, elementsMap) => {
+  const [frameX1, frameY1, frameX2, frameY2] = getElementAbsoluteCoords2(
+    frame,
+    elementsMap
+  );
+  const [elementX1, elementY1, elementX2, elementY2] = getCommonBounds(elements);
+  return frameX1 <= elementX1 && frameY1 <= elementY1 && frameX2 >= elementX2 && frameY2 >= elementY2;
+};
+var elementOverlapsWithFrame = (element, frame, elementsMap) => {
+  return elementsAreInFrameBounds([element], frame, elementsMap) || isElementIntersectingFrame(element, frame, elementsMap) || isElementContainingFrame(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)
+  );
+};
+var groupsAreAtLeastIntersectingTheFrame = (elements, groupIds, frame) => {
+  const elementsMap = arrayToMap5(elements);
+  const elementsInGroup = groupIds.flatMap(
+    (groupId) => getElementsInGroup(elements, groupId)
+  );
+  if (elementsInGroup.length === 0) {
+    return true;
+  }
+  return !!elementsInGroup.find(
+    (element) => elementsAreInFrameBounds([element], frame, elementsMap) || isElementIntersectingFrame(element, frame, elementsMap)
+  );
+};
+var groupsAreCompletelyOutOfFrame = (elements, groupIds, frame) => {
+  const elementsMap = arrayToMap5(elements);
+  const elementsInGroup = groupIds.flatMap(
+    (groupId) => getElementsInGroup(elements, groupId)
+  );
+  if (elementsInGroup.length === 0) {
+    return true;
+  }
+  return elementsInGroup.find(
+    (element) => elementsAreInFrameBounds([element], frame, elementsMap) || isElementIntersectingFrame(element, frame, elementsMap)
+  ) === void 0;
+};
+var groupByFrameLikes = (elements) => {
+  const frameElementsMap = /* @__PURE__ */ new Map();
+  for (const element of elements) {
+    const frameId = isFrameLikeElement(element) ? element.id : element.frameId;
+    if (frameId && !frameElementsMap.has(frameId)) {
+      frameElementsMap.set(frameId, getFrameChildren(elements, frameId));
+    }
+  }
+  return frameElementsMap;
 };
 var getFrameChildren = (allElements, frameId) => {
   const frameChildren = [];
@@ -11481,7 +11776,7 @@ var getFrameLikeElements = (allElements) => {
   );
 };
 var getRootElements = (allElements) => {
-  const frameElements = arrayToMap4(getFrameLikeElements(allElements));
+  const frameElements = arrayToMap5(getFrameLikeElements(allElements));
   return allElements.filter(
     (element) => frameElements.has(element.id) || !element.frameId || !frameElements.has(element.frameId)
   );
@@ -11602,7 +11897,7 @@ var getContainingFrame = (element, elementsMap) => {
 };
 var filterElementsEligibleAsFrameChildren = (elements, frame) => {
   const otherFrames = /* @__PURE__ */ new Set();
-  const elementsMap = arrayToMap4(elements);
+  const elementsMap = arrayToMap5(elements);
   elements = omitGroupsContainingFrameLikes(elements);
   for (const element of elements) {
     if (isFrameLikeElement(element) && element.id !== frame.id) {
@@ -11637,16 +11932,35 @@ var filterElementsEligibleAsFrameChildren = (elements, frame) => {
   }
   return eligibleElements;
 };
-var addElementsToFrame = (allElements, elementsToAdd, frame, appState) => {
-  const elementsMap = arrayToMap4(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;
     }
   }
-  const suppliedElementsToAddSet = new Set(elementsToAdd.map((el) => el.id));
-  const finalElementsToAdd = [];
+  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;
+    }
+  }
+  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) {
@@ -11660,23 +11974,44 @@ 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]) {
+    if (element.frameId && element.frameId !== frame.id) {
       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();
@@ -11702,15 +12037,14 @@ var removeElementsFromFrame = (elementsToRemove, elementsMap) => {
 };
 var removeAllElementsFromFrame = (allElements, frame) => {
   const elementsInFrame = getFrameChildren(allElements, frame.id);
-  removeElementsFromFrame(elementsInFrame, arrayToMap4(allElements));
+  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) => {
@@ -11730,7 +12064,7 @@ var updateFrameMembershipOfSelectedElements = (allElements, appState, app) => {
     }
   }
   const elementsToRemove = /* @__PURE__ */ new Set();
-  const elementsMap = arrayToMap4(allElements);
+  const elementsMap = arrayToMap5(allElements);
   elementsToFilter.forEach((element) => {
     if (element.frameId && !isFrameLikeElement(element) && !isElementInFrame(element, elementsMap, appState)) {
       elementsToRemove.add(element);
@@ -11888,7 +12222,7 @@ var getElementsOverlappingFrame = (elements, frame, elementsMap) => {
   );
 };
 var frameAndChildrenSelectedTogether = (selectedElements) => {
-  const selectedElementsMap = arrayToMap4(selectedElements);
+  const selectedElementsMap = arrayToMap5(selectedElements);
   return selectedElements.length > 1 && selectedElements.some(
     (element) => element.frameId && selectedElementsMap.has(element.frameId)
   );
@@ -12575,16 +12909,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();
@@ -14063,7 +14387,7 @@ var getCommonBounds = (elements, elementsMap) => {
   let maxX = -Infinity;
   let minY = Infinity;
   let maxY = -Infinity;
-  const _elementsMap = elementsMap || arrayToMap5(elements);
+  const _elementsMap = elementsMap || arrayToMap6(elements);
   elements.forEach((element) => {
     const [x1, y1, x2, y2] = getElementBounds(element, _elementsMap);
     minX = Math.min(minX, x1);
@@ -14138,7 +14462,7 @@ var getClosestElementBounds = (elements, from) => {
   }
   let minDistance = Infinity;
   let closestElement = elements[0];
-  const elementsMap = arrayToMap5(elements);
+  const elementsMap = arrayToMap6(elements);
   elements.forEach((element) => {
     const [x1, y1, x2, y2] = getElementBounds(element, elementsMap);
     const distance3 = pointDistance7(
@@ -14431,7 +14755,7 @@ var calculateTranslation = (group, selectionBoundingBox, { axis, position }) =>
 // src/delta.ts
 init_define_import_meta_env();
 import {
-  arrayToMap as arrayToMap9,
+  arrayToMap as arrayToMap10,
   arrayToObject,
   assertNever as assertNever4,
   isDevEnv as isDevEnv6,
@@ -14458,7 +14782,7 @@ import {
   ORIG_ID,
   randomId,
   randomInteger as randomInteger2,
-  arrayToMap as arrayToMap6,
+  arrayToMap as arrayToMap8,
   castArray,
   findLastIndex,
   getUpdatedTimestamp as getUpdatedTimestamp2,
@@ -14467,79 +14791,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!"
@@ -14549,7 +14855,7 @@ var normalizeBoundElementsOrder = (elements) => {
   return [...sortedElements];
 };
 var normalizeElementOrder = (elements) => {
-  return normalizeBoundElementsOrder(normalizeGroupElementOrder(elements));
+  return normalizeBoundElementsOrder(defragmentGroups(elements));
 };
 
 // src/duplicate.ts
@@ -14589,8 +14895,9 @@ var duplicateElements = (opts) => {
   const origIdToDuplicateId = /* @__PURE__ */ new Map();
   const duplicateIdToOrigElement = /* @__PURE__ */ new Map();
   const duplicateElementsMap = /* @__PURE__ */ new Map();
-  const elementsMap = arrayToMap6(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));
@@ -14650,7 +14957,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);
@@ -14658,11 +14965,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;
@@ -15443,466 +15757,12 @@ var getObservedAppState = (appState) => {
 };
 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 arrayToMap7 } 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, arrayToMap7(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 = arrayToMap7(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 = arrayToMap7(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 = arrayToMap7(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;
-  }
-  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/Scene.ts
 init_define_import_meta_env();
 var import_lodash = __toESM(require_lodash(), 1);
 import {
   randomInteger as randomInteger3,
-  arrayToMap as arrayToMap8,
+  arrayToMap as arrayToMap9,
   toBrandedType,
   isDevEnv as isDevEnv5,
   isTestEnv as isTestEnv6,
@@ -16114,24 +15974,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, arrayToMap8([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"
@@ -16142,19 +15992,12 @@ var Scene = class {
       ...elements,
       ...this.elements.slice(index)
     ];
-    syncMovedIndices2(nextElements, arrayToMap8(elements));
+    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);
@@ -17453,7 +17296,7 @@ var ElementsDelta = class _ElementsDelta {
     if (!flags.containsVisibleDifference && moved.size) {
       flags.containsVisibleDifference = true;
     }
-    return arrayToMap9(syncMovedIndices(ordered, moved));
+    return arrayToMap10(syncMovedIndices(ordered, moved));
   }
   /**
    * It is necessary to post process the partials in case of reference values,
@@ -19044,7 +18887,7 @@ import { invariant as invariant12 } from "@excalidraw/common";
 
 // src/zindex.ts
 init_define_import_meta_env();
-import { arrayToMap as arrayToMap10, findIndex, findLastIndex as findLastIndex2 } from "@excalidraw/common";
+import { arrayToMap as arrayToMap11, findIndex, findLastIndex as findLastIndex2 } from "@excalidraw/common";
 var isOfTargetFrame = (element, frameId) => {
   return element.frameId === frameId || element.id === frameId;
 };
@@ -19053,7 +18896,7 @@ var getIndicesToMove = (elements, appState, elementsToBeMoved) => {
   let deletedIndices = [];
   let includeDeletedIndex = null;
   let index = -1;
-  const selectedElementIds = arrayToMap10(
+  const selectedElementIds = arrayToMap11(
     elementsToBeMoved ? elementsToBeMoved : getSelectedElements(elements, appState, {
       includeBoundTextElement: true,
       includeElementsInFrames: true
@@ -19343,7 +19186,7 @@ var shiftElementsToEnd = (elements, appState, direction, containingFrame, elemen
   return nextElements;
 };
 function shiftElementsAccountingForFrames(allElements, appState, direction, shiftFunction) {
-  const elementsToMove = arrayToMap10(
+  const elementsToMove = arrayToMap11(
     getSelectedElements(allElements, appState, {
       includeBoundTextElement: true,
       includeElementsInFrames: true
@@ -21348,7 +21191,7 @@ import {
   VERTICAL_ALIGN as VERTICAL_ALIGN4,
   getSizeFromPoints as getSizeFromPoints3,
   randomId as randomId4,
-  arrayToMap as arrayToMap11,
+  arrayToMap as arrayToMap12,
   assertNever as assertNever5,
   cloneJSON,
   getFontString as getFontString8,
@@ -21582,7 +21425,7 @@ var ElementStore = class {
   };
   getElementsMap = () => {
     return toBrandedType3(
-      arrayToMap11(this.getElements())
+      arrayToMap12(this.getElements())
     );
   };
   getElement = (id) => {
@@ -22043,6 +21886,7 @@ export {
   getClosestElementBounds,
   getCommonBoundingBox,
   getCommonBounds,
+  getCommonFrameId,
   getContainerCenter,
   getContainerCoords,
   getContainerElement,
@@ -22072,6 +21916,7 @@ export {
   getEmbedLink,
   getFlipAdjustedCropPosition,
   getFrameChildren,
+  getFrameChildrenInsertionIndex,
   getFrameLikeElements,
   getFrameLikeTitle,
   getFreedrawOutlineAsSegments,
@@ -22175,6 +22020,7 @@ export {
   isElementInViewport,
   isElementIntersectingFrame,
   isElementLink,
+  isEligibleFrameChildType,
   isEmbeddableElement,
   isExcalidrawElement,
   isFixedPoint,