@myoc/element 0.19.505 → 0.19.508

package/dist/dev/index.js

@@ -3862,14 +3862,14 @@ var rough_default = {
 
 // src/bounds.ts
 import {
-  arrayToMap as arrayToMap8,
+  arrayToMap as arrayToMap7,
   invariant as invariant10,
   rescalePoints,
   sizeOf
 } from "@excalidraw/common";
 import {
   degreesToRadians,
-  lineSegment as lineSegment6,
+  lineSegment as lineSegment7,
   pointDistance as pointDistance7,
   pointFrom as pointFrom14,
   pointFromArray as pointFromArray3,
@@ -4233,7 +4233,7 @@ import {
 init_define_import_meta_env();
 import {
   isRightAngleRads,
-  lineSegment as lineSegment5,
+  lineSegment as lineSegment6,
   pointFrom as pointFrom12,
   pointRotateRads as pointRotateRads11
 } from "@excalidraw/math";
@@ -4969,6 +4969,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();
@@ -5003,12 +5022,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) {
@@ -5415,7 +5434,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,
@@ -6340,7 +6359,8 @@ var getContainerCenter = (container, appState, elementsMap) => {
   if (!midSegmentMidpoint) {
     midSegmentMidpoint = LinearElementEditor.getSegmentMidPoint(
       container,
-      index + 1
+      index + 1,
+      elementsMap
     );
   }
   return { x: midSegmentMidpoint[0], y: midSegmentMidpoint[1] };
@@ -6491,7 +6511,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) => {
@@ -6520,20 +6540,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);
   }
@@ -6570,14 +6603,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;
@@ -6595,13 +6625,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);
@@ -6665,7 +6699,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;
       }
     }
@@ -6760,7 +6794,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) => {
@@ -6799,8 +6838,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);
@@ -6822,7 +6864,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) {
@@ -8533,7 +8577,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)",
       {
@@ -9137,11 +9181,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",
@@ -9951,8 +9991,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)
     ])
   };
 };
@@ -9968,8 +10008,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])
   };
@@ -10659,7 +10699,7 @@ var getMidPoint = (p1, p2) => {
 
 // src/zindex.ts
 init_define_import_meta_env();
-import { arrayToMap as arrayToMap7, findIndex, findLastIndex } from "@excalidraw/common";
+import { arrayToMap as arrayToMap6, findIndex, findLastIndex } from "@excalidraw/common";
 
 // src/groups.ts
 init_define_import_meta_env();
@@ -10667,11 +10707,16 @@ init_define_import_meta_env();
 // src/selection.ts
 init_define_import_meta_env();
 import { arrayToMap as arrayToMap5, isShallowEqual } from "@excalidraw/common";
+import {
+  lineSegment as lineSegment5,
+  pointFrom as pointFrom10,
+  pointRotateRads as pointRotateRads9
+} from "@excalidraw/math";
 
 // src/frame.ts
 init_define_import_meta_env();
 import { arrayToMap as arrayToMap4 } from "@excalidraw/common";
-import { isPointWithinBounds as isPointWithinBounds2, pointFrom as pointFrom10 } from "@excalidraw/math";
+import { isPointWithinBounds as isPointWithinBounds2, pointFrom as pointFrom9 } from "@excalidraw/math";
 
 // ../utils/src/bbox.ts
 init_define_import_meta_env();
@@ -10709,163 +10754,272 @@ function doLineSegmentsIntersect(a2, b2) {
   return doBBoxesIntersect(getBBox(a2), getBBox(b2)) && isLineSegmentTouchingOrCrossingLine(a2, b2) && isLineSegmentTouchingOrCrossingLine(b2, a2);
 }
 
-// ../utils/src/withinBounds.ts
+// src/fractionalIndex.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,
-  pointFrom as pointFrom9,
-  pointRotateRads as pointRotateRads9,
-  rangeInclusive
-} from "@excalidraw/math";
-var getNonLinearElementRelativePoints = (element) => {
-  if (element.type === "diamond") {
-    return [
-      pointFrom9(element.width / 2, 0),
-      pointFrom9(element.width, element.height / 2),
-      pointFrom9(element.width / 2, element.height),
-      pointFrom9(0, element.height / 2)
-    ];
-  }
-  return [
-    pointFrom9(0, 0),
-    pointFrom9(0 + element.width, 0),
-    pointFrom9(0 + element.width, element.height),
-    pointFrom9(0, element.height)
-  ];
+  validateOrderKey,
+  generateNKeysBetween
+} from "@excalidraw/fractional-indexing";
+var InvalidFractionalIndexError = class extends Error {
+  code = "ELEMENT_HAS_INVALID_INDEX";
 };
-var getElementRelativePoints = (element) => {
-  if (isLinearElement2(element) || isFreeDrawElement2(element)) {
-    return element.points;
+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, arrayToMap3(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;
+    }
   }
-  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
+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;
     }
-  );
-  ret.cx = (ret.maxX + ret.minX) / 2;
-  ret.cy = (ret.maxY + ret.minY) / 2;
-  return ret;
+    return 1;
+  });
 };
-var getRotatedBBox = (element) => {
-  const points = getElementRelativePoints(element);
-  const { cx, cy } = getMinMaxPoints(points);
-  const centerPoint = pointFrom9(cx, cy);
-  const rotatedPoints = points.map(
-    (p) => pointRotateRads9(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 syncMovedIndices = (elements, movedElements) => {
+  try {
+    const elementsMap = arrayToMap3(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 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;
+var syncInvalidIndices = (elements) => {
+  const elementsMap = arrayToMap3(elements);
+  const indicesGroups = getInvalidIndicesGroups(elements);
+  const elementsUpdates = generateIndices(elements, indicesGroups);
+  for (const [element, { index }] of elementsUpdates) {
+    mutateElement(element, elementsMap, { index });
   }
-  if (elementInsideBbox) {
-    return true;
+  return elements;
+};
+var syncInvalidIndicesImmutable = (elements) => {
+  const syncedElements = arrayToMap3(elements);
+  const indicesGroups = getInvalidIndicesGroups(elements);
+  const elementsUpdates = generateIndices(elements, indicesGroups);
+  for (const [element, { index }] of elementsUpdates) {
+    syncedElements.set(element.id, newElementWith(element, { index }));
   }
-  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 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 elements.filter((element) => includedElementSet.has(element.id));
+  return indicesGroups;
 };
-
-// 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
-        });
+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 = 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
+        });
+      }
+    }
+  }
+};
 function isElementIntersectingFrame(element, frame, elementsMap) {
   const frameLineSegments = getElementLineSegments(frame, elementsMap);
   const elementLineSegments = getElementLineSegments(element, elementsMap);
@@ -10882,8 +11036,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) => {
@@ -10906,9 +11061,9 @@ var elementOverlapsWithFrame = (element, frame, elementsMap) => {
 var isCursorInFrame = (cursorCoords, frame, elementsMap) => {
   const [fx1, fy1, fx2, fy2] = getElementAbsoluteCoords2(frame, elementsMap);
   return isPointWithinBounds2(
-    pointFrom10(fx1, fy1),
-    pointFrom10(cursorCoords.x, cursorCoords.y),
-    pointFrom10(fx2, fy2)
+    pointFrom9(fx1, fy1),
+    pointFrom9(cursorCoords.x, cursorCoords.y),
+    pointFrom9(fx2, fy2)
   );
 };
 var groupsAreAtLeastIntersectingTheFrame = (elements, groupIds, frame) => {
@@ -11116,16 +11271,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;
+    }
+  }
+  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 = arrayToMap4(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) {
@@ -11139,23 +11313,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, arrayToMap4([...finalElementsToAdd]));
+  return Array.isArray(allElements) ? reorderedElements : new Map(reorderedElements.map((element) => [element.id, element]));
 };
 var removeElementsFromFrame = (elementsToRemove, elementsMap) => {
   const _elementsToRemove = /* @__PURE__ */ new Map();
@@ -11184,12 +11379,11 @@ var removeAllElementsFromFrame = (allElements, frame) => {
   removeElementsFromFrame(elementsInFrame, arrayToMap4(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) => {
@@ -11354,12 +11548,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 = arrayToMap4(selectedElements);
@@ -11369,6 +11568,15 @@ var frameAndChildrenSelectedTogether = (selectedElements) => {
 };
 
 // src/selection.ts
+var shouldIgnoreElementFromSelection = (element) => element.locked || isBoundToContainer(element);
+var excludeElementsFromFrames = (selectedElements, framesInSelection) => {
+  return selectedElements.filter((element) => {
+    if (element.frameId && framesInSelection.has(element.frameId)) {
+      return false;
+    }
+    return true;
+  });
+};
 var excludeElementsInFramesFromSelection = (selectedElements) => {
   const framesInSelection = /* @__PURE__ */ new Set();
   selectedElements.forEach((element) => {
@@ -11376,42 +11584,211 @@ var excludeElementsInFramesFromSelection = (selectedElements) => {
       framesInSelection.add(element.id);
     }
   });
-  return selectedElements.filter((element) => {
-    if (element.frameId && framesInSelection.has(element.frameId)) {
-      return false;
+  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
+  ];
+  const selectionEdges = [
+    lineSegment5(
+      pointFrom10(selectionX1, selectionY1),
+      pointFrom10(selectionX2, selectionY1)
+    ),
+    lineSegment5(
+      pointFrom10(selectionX2, selectionY1),
+      pointFrom10(selectionX2, selectionY2)
+    ),
+    lineSegment5(
+      pointFrom10(selectionX2, selectionY2),
+      pointFrom10(selectionX1, selectionY2)
+    ),
+    lineSegment5(
+      pointFrom10(selectionX1, selectionY2),
+      pointFrom10(selectionX1, selectionY1)
+    )
+  ];
+  const framesInSelection = excludeElementsInFrames ? /* @__PURE__ */ new Set() : null;
+  const groups = {};
+  const elementsInSelection = /* @__PURE__ */ new Set();
+  for (const element of elements) {
+    if (shouldIgnoreElementFromSelection(element)) {
+      continue;
     }
-    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,
+    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
       );
-      elementX1 = Math.max(fx1, elementX1);
-      elementY1 = Math.max(fy1, elementY1);
-      elementX2 = Math.min(fx2, elementX2);
-      elementY2 = Math.min(fy2, elementY2);
+      labelAABB = [
+        x,
+        y,
+        x + boundTextElement.width,
+        y + boundTextElement.height
+      ];
     }
-    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);
+    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;
     }
-    return true;
-  });
-  return elementsInSelection;
+    if (boxSelectionMode === "overlap" && labelAABB && doBoundsIntersect(selectionBounds, labelAABB)) {
+      elementsInSelection.add(element);
+      continue;
+    }
+    if (boxSelectionMode === "overlap" && doBoundsIntersect(selectionBounds, elementAABB)) {
+      let hasIntersection = false;
+      if (isLinearElement(element) || isFreeDrawElement(element)) {
+        const center = elementCenterPoint(element, elementsMap);
+        hasIntersection = element.points.some((point) => {
+          const rotatedPoint = pointRotateRads9(
+            pointFrom10(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 = [
+          pointRotateRads9(
+            pointFrom10(
+              (nonRotatedElementBounds[0] + nonRotatedElementBounds[2]) / 2,
+              nonRotatedElementBounds[1]
+            ),
+            center,
+            element.angle
+          ),
+          pointRotateRads9(
+            pointFrom10(
+              nonRotatedElementBounds[2],
+              (nonRotatedElementBounds[1] + nonRotatedElementBounds[3]) / 2
+            ),
+            center,
+            element.angle
+          ),
+          pointRotateRads9(
+            pointFrom10(
+              (nonRotatedElementBounds[0] + nonRotatedElementBounds[2]) / 2,
+              nonRotatedElementBounds[3]
+            ),
+            center,
+            element.angle
+          ),
+          pointRotateRads9(
+            pointFrom10(
+              nonRotatedElementBounds[0],
+              (nonRotatedElementBounds[1] + nonRotatedElementBounds[3]) / 2
+            ),
+            center,
+            element.angle
+          )
+        ].some((point) => {
+          return pointInsideBounds(
+            pointRotateRads9(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 (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(
@@ -11654,604 +12031,150 @@ var selectGroupsFromGivenElements = (elements, appState) => {
     ...appState,
     selectedGroupIds: {}
   };
-  for (const element of elements) {
-    let groupIds = element.groupIds;
-    if (appState.editingGroupId) {
-      const indexOfEditingGroup = groupIds.indexOf(appState.editingGroupId);
-      if (indexOfEditingGroup > -1) {
-        groupIds = groupIds.slice(0, indexOfEditingGroup);
-      }
-    }
-    if (groupIds.length > 0) {
-      const groupId = groupIds[groupIds.length - 1];
-      nextAppState = {
-        ...nextAppState,
-        ...selectGroup(groupId, nextAppState, elements)
-      };
-    }
-  }
-  return nextAppState.selectedGroupIds;
-};
-var editGroupForSelectedElement = (appState, element) => {
-  return {
-    ...appState,
-    editingGroupId: element.groupIds.length ? element.groupIds[0] : null,
-    selectedGroupIds: {},
-    selectedElementIds: {
-      [element.id]: true
-    }
-  };
-};
-var isElementInGroup = (element, groupId) => element.groupIds.includes(groupId);
-var getElementsInGroup = (elements, groupId) => {
-  const elementsInGroup = [];
-  for (const element of elements.values()) {
-    if (isElementInGroup(element, groupId)) {
-      elementsInGroup.push(element);
-    }
-  }
-  return elementsInGroup;
-};
-var getSelectedGroupIdForElement = (element, selectedGroupIds) => element.groupIds.find((groupId) => selectedGroupIds[groupId]);
-var addToGroup = (prevGroupIds, newGroupId, editingGroupId) => {
-  const groupIds = [...prevGroupIds];
-  const positionOfEditingGroupId = editingGroupId ? groupIds.indexOf(editingGroupId) : -1;
-  const positionToInsert = positionOfEditingGroupId > -1 ? positionOfEditingGroupId : groupIds.length;
-  groupIds.splice(positionToInsert, 0, newGroupId);
-  return groupIds;
-};
-var removeFromSelectedGroups = (groupIds, selectedGroupIds) => groupIds.filter((groupId) => !selectedGroupIds[groupId]);
-var getMaximumGroups = (elements, elementsMap) => {
-  const groups = /* @__PURE__ */ new Map();
-  elements.forEach((element) => {
-    const groupId = element.groupIds.length === 0 ? element.id : element.groupIds[element.groupIds.length - 1];
-    const currentGroupMembers = groups.get(groupId) || [];
-    const boundTextElement = getBoundTextElement(element, elementsMap);
-    if (boundTextElement) {
-      currentGroupMembers.push(boundTextElement);
-    }
-    groups.set(groupId, [...currentGroupMembers, element]);
-  });
-  return Array.from(groups.values());
-};
-var getNonDeletedGroupIds = (elements) => {
-  const nonDeletedGroupIds = /* @__PURE__ */ new Set();
-  for (const [, element] of elements) {
-    if (element.isDeleted) {
-      continue;
-    }
-    for (const groupId of element.groupIds ?? []) {
-      nonDeletedGroupIds.add(groupId);
-    }
-  }
-  return nonDeletedGroupIds;
-};
-var elementsAreInSameGroup = (elements) => {
-  const allGroups = elements.flatMap((element) => element.groupIds);
-  const groupCount = /* @__PURE__ */ new Map();
-  let maxGroup = 0;
-  for (const group of allGroups) {
-    groupCount.set(group, (groupCount.get(group) ?? 0) + 1);
-    if (groupCount.get(group) > maxGroup) {
-      maxGroup = groupCount.get(group);
-    }
-  }
-  return maxGroup === elements.length;
-};
-var isInGroup = (element) => {
-  return element.groupIds.length > 0;
-};
-var getNewGroupIdsForDuplication = (groupIds, editingGroupId, mapper) => {
-  const copy = [...groupIds];
-  const positionOfEditingGroupId = editingGroupId ? groupIds.indexOf(editingGroupId) : -1;
-  const endIndex = positionOfEditingGroupId > -1 ? positionOfEditingGroupId : groupIds.length;
-  for (let index = 0; index < endIndex; index++) {
-    copy[index] = mapper(copy[index]);
-  }
-  return copy;
-};
-var getSelectedElementsByGroup = (selectedElements, elementsMap, appState) => {
-  const selectedGroupIds = getSelectedGroupIds(appState);
-  const unboundElements = selectedElements.filter(
-    (element) => !isBoundToContainer(element)
-  );
-  const groups = /* @__PURE__ */ new Map();
-  const elements = /* @__PURE__ */ new Map();
-  const addToElementsMap = (element) => {
-    const currentElementMembers = elements.get(element.id) || [];
-    const boundTextElement = getBoundTextElement(element, elementsMap);
-    if (boundTextElement) {
-      currentElementMembers.push(boundTextElement);
-    }
-    elements.set(element.id, [...currentElementMembers, element]);
-  };
-  const addToGroupsMap = (element, groupId) => {
-    const currentGroupMembers = groups.get(groupId) || [];
-    const boundTextElement = getBoundTextElement(element, elementsMap);
-    if (boundTextElement) {
-      currentGroupMembers.push(boundTextElement);
-    }
-    groups.set(groupId, [...currentGroupMembers, element]);
-  };
-  const handleSingleSelectedGroupCase = (element, selectedGroupId) => {
-    const indexOfSelectedGroupId = element.groupIds.indexOf(selectedGroupId, 0);
-    const nestedGroupCount = element.groupIds.slice(
-      0,
-      indexOfSelectedGroupId
-    ).length;
-    return nestedGroupCount > 0 ? addToGroupsMap(element, element.groupIds[indexOfSelectedGroupId - 1]) : addToElementsMap(element);
-  };
-  const isAllInSameGroup = selectedElements.every(
-    (element) => isSelectedViaGroup(appState, element)
-  );
-  unboundElements.forEach((element) => {
-    const selectedGroupId = getSelectedGroupIdForElement(
-      element,
-      appState.selectedGroupIds
-    );
-    if (!selectedGroupId) {
-      addToElementsMap(element);
-    } else if (selectedGroupIds.length === 1 && isAllInSameGroup) {
-      handleSingleSelectedGroupCase(element, selectedGroupId);
-    } else {
-      addToGroupsMap(element, selectedGroupId);
-    }
-  });
-  return Array.from(groups.values()).concat(Array.from(elements.values()));
-};
-
-// 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 arrayToMap6 } 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, arrayToMap6(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 = arrayToMap6(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 = arrayToMap6(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 = arrayToMap6(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);
+  for (const element of elements) {
+    let groupIds = element.groupIds;
+    if (appState.editingGroupId) {
+      const indexOfEditingGroup = groupIds.indexOf(appState.editingGroupId);
+      if (indexOfEditingGroup > -1) {
+        groupIds = groupIds.slice(0, indexOfEditingGroup);
       }
-      indicesGroup.push(upperBoundIndex);
-      indicesGroups.push(indicesGroup);
-    } else {
-      i++;
+    }
+    if (groupIds.length > 0) {
+      const groupId = groupIds[groupIds.length - 1];
+      nextAppState = {
+        ...nextAppState,
+        ...selectGroup(groupId, nextAppState, elements)
+      };
     }
   }
-  return indicesGroups;
+  return nextAppState.selectedGroupIds;
 };
-var isValidFractionalIndex = (index, predecessor, successor) => {
-  if (!index) {
-    return false;
-  }
-  if (predecessor && successor) {
-    return predecessor < index && index < successor;
-  }
-  if (!predecessor && successor) {
-    return index < successor;
+var editGroupForSelectedElement = (appState, element) => {
+  return {
+    ...appState,
+    editingGroupId: element.groupIds.length ? element.groupIds[0] : null,
+    selectedGroupIds: {},
+    selectedElementIds: {
+      [element.id]: true
+    }
+  };
+};
+var isElementInGroup = (element, groupId) => element.groupIds.includes(groupId);
+var getElementsInGroup = (elements, groupId) => {
+  const elementsInGroup = [];
+  for (const element of elements.values()) {
+    if (isElementInGroup(element, groupId)) {
+      elementsInGroup.push(element);
+    }
   }
-  if (predecessor && !successor) {
-    return predecessor < index;
+  return elementsInGroup;
+};
+var getSelectedGroupIdForElement = (element, selectedGroupIds) => element.groupIds.find((groupId) => selectedGroupIds[groupId]);
+var addToGroup = (prevGroupIds, newGroupId, editingGroupId) => {
+  const groupIds = [...prevGroupIds];
+  const positionOfEditingGroupId = editingGroupId ? groupIds.indexOf(editingGroupId) : -1;
+  const positionToInsert = positionOfEditingGroupId > -1 ? positionOfEditingGroupId : groupIds.length;
+  groupIds.splice(positionToInsert, 0, newGroupId);
+  return groupIds;
+};
+var removeFromSelectedGroups = (groupIds, selectedGroupIds) => groupIds.filter((groupId) => !selectedGroupIds[groupId]);
+var getMaximumGroups = (elements, elementsMap) => {
+  const groups = /* @__PURE__ */ new Map();
+  elements.forEach((element) => {
+    const groupId = element.groupIds.length === 0 ? element.id : element.groupIds[element.groupIds.length - 1];
+    const currentGroupMembers = groups.get(groupId) || [];
+    const boundTextElement = getBoundTextElement(element, elementsMap);
+    if (boundTextElement) {
+      currentGroupMembers.push(boundTextElement);
+    }
+    groups.set(groupId, [...currentGroupMembers, element]);
+  });
+  return Array.from(groups.values());
+};
+var getNonDeletedGroupIds = (elements) => {
+  const nonDeletedGroupIds = /* @__PURE__ */ new Set();
+  for (const [, element] of elements) {
+    if (element.isDeleted) {
+      continue;
+    }
+    for (const groupId of element.groupIds ?? []) {
+      nonDeletedGroupIds.add(groupId);
+    }
   }
-  return !!index;
+  return nonDeletedGroupIds;
 };
-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]
-      });
+var elementsAreInSameGroup = (elements) => {
+  const allGroups = elements.flatMap((element) => element.groupIds);
+  const groupCount = /* @__PURE__ */ new Map();
+  let maxGroup = 0;
+  for (const group of allGroups) {
+    groupCount.set(group, (groupCount.get(group) ?? 0) + 1);
+    if (groupCount.get(group) > maxGroup) {
+      maxGroup = groupCount.get(group);
     }
   }
-  return elementsUpdates;
+  return maxGroup === elements.length;
 };
-var isOrderedElement = (element) => {
-  if (element.index) {
-    return true;
+var isInGroup = (element) => {
+  return element.groupIds.length > 0;
+};
+var getNewGroupIdsForDuplication = (groupIds, editingGroupId, mapper) => {
+  const copy = [...groupIds];
+  const positionOfEditingGroupId = editingGroupId ? groupIds.indexOf(editingGroupId) : -1;
+  const endIndex = positionOfEditingGroupId > -1 ? positionOfEditingGroupId : groupIds.length;
+  for (let index = 0; index < endIndex; index++) {
+    copy[index] = mapper(copy[index]);
   }
-  return false;
+  return copy;
+};
+var getSelectedElementsByGroup = (selectedElements, elementsMap, appState) => {
+  const selectedGroupIds = getSelectedGroupIds(appState);
+  const unboundElements = selectedElements.filter(
+    (element) => !isBoundToContainer(element)
+  );
+  const groups = /* @__PURE__ */ new Map();
+  const elements = /* @__PURE__ */ new Map();
+  const addToElementsMap = (element) => {
+    const currentElementMembers = elements.get(element.id) || [];
+    const boundTextElement = getBoundTextElement(element, elementsMap);
+    if (boundTextElement) {
+      currentElementMembers.push(boundTextElement);
+    }
+    elements.set(element.id, [...currentElementMembers, element]);
+  };
+  const addToGroupsMap = (element, groupId) => {
+    const currentGroupMembers = groups.get(groupId) || [];
+    const boundTextElement = getBoundTextElement(element, elementsMap);
+    if (boundTextElement) {
+      currentGroupMembers.push(boundTextElement);
+    }
+    groups.set(groupId, [...currentGroupMembers, element]);
+  };
+  const handleSingleSelectedGroupCase = (element, selectedGroupId) => {
+    const indexOfSelectedGroupId = element.groupIds.indexOf(selectedGroupId, 0);
+    const nestedGroupCount = element.groupIds.slice(
+      0,
+      indexOfSelectedGroupId
+    ).length;
+    return nestedGroupCount > 0 ? addToGroupsMap(element, element.groupIds[indexOfSelectedGroupId - 1]) : addToElementsMap(element);
+  };
+  const isAllInSameGroup = selectedElements.every(
+    (element) => isSelectedViaGroup(appState, element)
+  );
+  unboundElements.forEach((element) => {
+    const selectedGroupId = getSelectedGroupIdForElement(
+      element,
+      appState.selectedGroupIds
+    );
+    if (!selectedGroupId) {
+      addToElementsMap(element);
+    } else if (selectedGroupIds.length === 1 && isAllInSameGroup) {
+      handleSingleSelectedGroupCase(element, selectedGroupId);
+    } else {
+      addToGroupsMap(element, selectedGroupId);
+    }
+  });
+  return Array.from(groups.values()).concat(Array.from(elements.values()));
 };
 
 // src/zindex.ts
@@ -12263,7 +12186,7 @@ var getIndicesToMove = (elements, appState, elementsToBeMoved) => {
   let deletedIndices = [];
   let includeDeletedIndex = null;
   let index = -1;
-  const selectedElementIds = arrayToMap7(
+  const selectedElementIds = arrayToMap6(
     elementsToBeMoved ? elementsToBeMoved : getSelectedElements(elements, appState, {
       includeBoundTextElement: true,
       includeElementsInFrames: true
@@ -12553,7 +12476,7 @@ var shiftElementsToEnd = (elements, appState, direction, containingFrame, elemen
   return nextElements;
 };
 function shiftElementsAccountingForFrames(allElements, appState, direction, shiftFunction) {
-  const elementsToMove = arrayToMap7(
+  const elementsToMove = arrayToMap6(
     getSelectedElements(allElements, appState, {
       includeBoundTextElement: true,
       includeElementsInFrames: true
@@ -12888,7 +12811,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;
     }
@@ -13105,7 +13028,8 @@ var LinearElementEditor = class _LinearElementEditor {
         element.points[index],
         element.points[index + 1],
         index,
-        appState.zoom
+        appState.zoom,
+        elementsMap
       )) {
         midpoints.push(null);
         index++;
@@ -13113,7 +13037,8 @@ var LinearElementEditor = class _LinearElementEditor {
       }
       const segmentMidPoint = _LinearElementEditor.getSegmentMidPoint(
         element,
-        index + 1
+        index + 1,
+        elementsMap
       );
       midpoints.push(segmentMidPoint);
       index++;
@@ -13177,7 +13102,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;
@@ -13186,7 +13111,10 @@ var LinearElementEditor = class _LinearElementEditor {
     }
     let distance3 = pointDistance5(startPoint, endPoint);
     if (element.points.length > 2 && element.roundness) {
-      const [lines, curves] = deconstructLinearOrFreeDrawElement(element);
+      const [lines, curves] = deconstructLinearOrFreeDrawElement(
+        element,
+        elementsMap
+      );
       invariant8(
         lines.length === 0 && curves.length > 0,
         "Only linears built out of curves are supported"
@@ -13199,7 +13127,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,
@@ -13208,7 +13136,10 @@ var LinearElementEditor = class _LinearElementEditor {
       const p = pointCenter2(element.points[index - 1], element.points[index]);
       return pointFrom11(element.x + p[0], element.y + p[1]);
     }
-    const [lines, curves] = deconstructLinearOrFreeDrawElement(element);
+    const [lines, curves] = deconstructLinearOrFreeDrawElement(
+      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"
@@ -13728,7 +13659,7 @@ var LinearElementEditor = class _LinearElementEditor {
       pointerDownState: linearElementEditor.initialState,
       selectedPointsIndices: linearElementEditor.selectedPointsIndices
     };
-    const midpoint2 = _LinearElementEditor.createPointAt(
+    const midpoint = _LinearElementEditor.createPointAt(
       element,
       elementsMap,
       pointerCoords.x,
@@ -13737,7 +13668,7 @@ var LinearElementEditor = class _LinearElementEditor {
     );
     const points = [
       ...element.points.slice(0, segmentMidpoint.index),
-      midpoint2,
+      midpoint,
       ...element.points.slice(segmentMidpoint.index)
     ];
     scene.mutateElement(element, { points });
@@ -13843,7 +13774,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;
@@ -14031,13 +13963,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: pointFrom11(
-            element.points[pointIndex][0] + deltaX,
-            element.points[pointIndex][1] + deltaY
-          ),
+          point: pointFrom11(point[0] + deltaX, point[1] + deltaY),
           isDragging: true
         }
       ];
@@ -14224,7 +14154,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,
@@ -14236,7 +14166,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,
@@ -14920,7 +14850,7 @@ function getFreedrawOutlineAsSegments(element, points, elementsMap) {
   return points.slice(2).reduce(
     (acc, curr) => {
       acc.push(
-        lineSegment5(
+        lineSegment6(
           acc[acc.length - 1][1],
           pointRotateRads11(
             pointFrom12(curr[0] + element.x, curr[1] + element.y),
@@ -14932,7 +14862,7 @@ function getFreedrawOutlineAsSegments(element, points, elementsMap) {
       return acc;
     },
     [
-      lineSegment5(
+      lineSegment6(
         pointRotateRads11(
           pointFrom12(
             points[0][0] + element.x,
@@ -14954,16 +14884,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();
@@ -15315,7 +15235,7 @@ var getArrowheadShapes = (element, shape, position, arrowhead, generator, option
     }
   }
 };
-var generateLinearCollisionShape = (element) => {
+var generateLinearCollisionShape = (element, elementsMap) => {
   const generator = new RoughGenerator();
   const options = {
     seed: element.seed,
@@ -15324,20 +15244,7 @@ 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": {
@@ -15984,7 +15891,7 @@ var getElementLineSegments = (element, elementsMap) => {
         let i = 0;
         while (i < points.length - 1) {
           segments.push(
-            lineSegment6(
+            lineSegment7(
               pointFrom14(points[i][0], points[i][1]),
               pointFrom14(points[i + 1][0], points[i + 1][1])
             )
@@ -15997,7 +15904,7 @@ var getElementLineSegments = (element, elementsMap) => {
       let i = 0;
       while (i < points.length - 1) {
         segments.push(
-          lineSegment6(
+          lineSegment7(
             pointFrom14(points[i][0], points[i][1]),
             pointFrom14(points[i + 1][0], points[i + 1][1])
           )
@@ -16023,10 +15930,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))
+          lineSegment7(pointFrom14(x1, y1), pointFrom14(x2, y1)),
+          lineSegment7(pointFrom14(x2, y1), pointFrom14(x2, y2)),
+          lineSegment7(pointFrom14(x2, y2), pointFrom14(x1, y2)),
+          lineSegment7(pointFrom14(x1, y2), pointFrom14(x1, y1))
         ];
         return segments2;
       }
@@ -16034,7 +15941,7 @@ var getElementLineSegments = (element, elementsMap) => {
     const points = shape.data;
     const segments = [];
     for (let i = 0; i < points.length - 1; i++) {
-      segments.push(lineSegment6(points[i], points[i + 1]));
+      segments.push(lineSegment7(points[i], points[i + 1]));
     }
     return segments;
   } else if (shape.type === "ellipse") {
@@ -16051,14 +15958,14 @@ var getElementLineSegments = (element, elementsMap) => {
     [x2, cy]
   ].map((point) => pointRotateRads13(point, center, element.angle));
   return [
-    lineSegment6(nw, ne),
-    lineSegment6(sw, se2),
-    lineSegment6(nw, sw),
-    lineSegment6(ne, se2),
-    lineSegment6(nw, e),
-    lineSegment6(sw, e),
-    lineSegment6(ne, w),
-    lineSegment6(se2, w)
+    lineSegment7(nw, ne),
+    lineSegment7(sw, se2),
+    lineSegment7(nw, sw),
+    lineSegment7(ne, se2),
+    lineSegment7(nw, e),
+    lineSegment7(sw, e),
+    lineSegment7(ne, w),
+    lineSegment7(se2, w)
   ];
 };
 var _isRectanguloidElement = (element) => {
@@ -16066,7 +15973,7 @@ var _isRectanguloidElement = (element) => {
 };
 var getRotatedSides = (sides, center, angle) => {
   return sides.map((side) => {
-    return lineSegment6(
+    return lineSegment7(
       pointRotateRads13(side[0], center, angle),
       pointRotateRads13(side[1], center, angle)
     );
@@ -16078,7 +15985,7 @@ var getSegmentsOnCurve = (curve4, center, angle) => {
   const segments = [];
   while (i < points.length - 1) {
     segments.push(
-      lineSegment6(
+      lineSegment7(
         pointRotateRads13(
           pointFrom14(points[i][0], points[i][1]),
           center,
@@ -16113,9 +16020,9 @@ var getSegmentsOnEllipse = (ellipse4) => {
     points.push(pointRotateRads13(pointFrom14(x, y), center, ellipse4.angle));
   }
   for (let i = 0; i < points.length - 1; i++) {
-    segments.push(lineSegment6(points[i], points[i + 1]));
+    segments.push(lineSegment7(points[i], points[i + 1]));
   }
-  segments.push(lineSegment6(points[points.length - 1], points[0]));
+  segments.push(lineSegment7(points[points.length - 1], points[0]));
   return segments;
 };
 var getRectangleBoxAbsoluteCoords = (boxSceneCoords) => {
@@ -16228,7 +16135,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;
@@ -16239,7 +16146,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);
@@ -16455,7 +16362,7 @@ var getCommonBounds = (elements, elementsMap) => {
   let maxX = -Infinity;
   let minY = Infinity;
   let maxY = -Infinity;
-  const _elementsMap = elementsMap || arrayToMap8(elements);
+  const _elementsMap = elementsMap || arrayToMap7(elements);
   elements.forEach((element) => {
     const [x1, y1, x2, y2] = getElementBounds(element, _elementsMap);
     minX = Math.min(minX, x1);
@@ -16530,7 +16437,7 @@ var getClosestElementBounds = (elements, from) => {
   }
   let minDistance = Infinity;
   let closestElement = elements[0];
-  const elementsMap = arrayToMap8(elements);
+  const elementsMap = arrayToMap7(elements);
   elements.forEach((element) => {
     const [x1, y1, x2, y2] = getElementBounds(element, elementsMap);
     const distance3 = pointDistance7(
@@ -16623,6 +16530,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;
@@ -16631,8 +16539,14 @@ var doBoundsIntersect = (bounds1, bounds2) => {
   const [minX2, minY2, maxX2, maxY2] = bounds2;
   return minX1 < maxX2 && maxX1 > minX2 && minY1 < maxY2 && maxY1 > minY2;
 };
+var boundsContainBounds = (outerBounds, innerBounds) => [
+  pointFrom14(innerBounds[0], innerBounds[1]),
+  pointFrom14(innerBounds[0], innerBounds[3]),
+  pointFrom14(innerBounds[2], innerBounds[1]),
+  pointFrom14(innerBounds[2], innerBounds[3])
+].every((point) => pointInsideBoundsInclusive(point, outerBounds));
 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);
@@ -17398,79 +17312,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 arrayToMap8 } 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 = arrayToMap8(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!"
@@ -17480,7 +17376,7 @@ var normalizeBoundElementsOrder = (elements) => {
   return [...sortedElements];
 };
 var normalizeElementOrder = (elements) => {
-  return normalizeBoundElementsOrder(normalizeGroupElementOrder(elements));
+  return normalizeBoundElementsOrder(defragmentGroups(elements));
 };
 
 // src/duplicate.ts
@@ -17522,6 +17418,7 @@ var duplicateElements = (opts) => {
   const duplicateElementsMap = /* @__PURE__ */ new Map();
   const elementsMap = arrayToMap9(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));
@@ -17581,7 +17478,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 = findLastIndex2(elementsWithDuplicates, (el) => {
         return el.groupIds?.includes(groupId);
@@ -17589,11 +17486,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(
+          findLastIndex2(elementsWithDuplicates, (el) => el.id === frameId),
+          copyElements(element)
+        );
+        continue;
+      }
       const frameChildren = getFrameChildren(elements, frameId);
       const targetIndex = findLastIndex2(elementsWithDuplicates, (el) => {
         return el.frameId === frameId || el.id === frameId;
@@ -18591,24 +18495,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, arrayToMap10([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"
@@ -18622,16 +18516,9 @@ var Scene = class {
     syncMovedIndices2(nextElements, arrayToMap10(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);
@@ -26758,6 +26645,7 @@ export {
   bindOrUnbindBindingElements,
   bindPointToSnapToElementOutline,
   bindingProperties,
+  boundsContainBounds,
   bumpVersion,
   calculateFixedPointForElbowArrowBinding,
   calculateFixedPointForNonElbowArrowBinding,
@@ -26828,6 +26716,7 @@ export {
   getClosestElementBounds,
   getCommonBoundingBox,
   getCommonBounds,
+  getCommonFrameId,
   getContainerCenter,
   getContainerCoords,
   getContainerElement,
@@ -26857,6 +26746,7 @@ export {
   getEmbedLink,
   getFlipAdjustedCropPosition,
   getFrameChildren,
+  getFrameChildrenInsertionIndex,
   getFrameLikeElements,
   getFrameLikeTitle,
   getFreedrawOutlineAsSegments,
@@ -26961,6 +26851,7 @@ export {
   isElementInViewport,
   isElementIntersectingFrame,
   isElementLink,
+  isEligibleFrameChildType,
   isEmbeddableElement,
   isExcalidrawElement,
   isFixedPoint,
@@ -27035,6 +26926,7 @@ export {
   parseElementLinkFromURL,
   parseTokens,
   pointInsideBounds,
+  pointInsideBoundsInclusive,
   positionElementsOnGrid,
   projectFixedPointOntoDiagonal,
   redrawTextBoundingBox,