@dwelle/excalidraw 0.5.0-ef89e88 → 0.5.0-efddbb7

package/dist/dev/{chunk-VLJRILK3.js → chunk-OKDHCI5V.js}

@@ -1,6 +1,6 @@
 import {
   define_import_meta_env_default
-} from "./chunk-H5SL5I5R.js";
+} from "./chunk-UEBEBUE2.js";
 import {
   __publicField
 } from "./chunk-XDFCUUT6.js";
@@ -348,8 +348,15 @@ var initial_guesses = [
   [0.2, 0],
   [0.8, 0]
 ];
-var calculate = ([t0, s0], l, c) => {
-  const solution = solveWithAnalyticalJacobian(c, l, t0, s0, 0.01, 4);
+var calculate = ([t0, s0], l, c, tolerance = 0.01, iterLimit = 4) => {
+  const solution = solveWithAnalyticalJacobian(
+    c,
+    l,
+    t0,
+    s0,
+    tolerance,
+    iterLimit
+  );
   if (!solution) {
     return null;
   }
@@ -359,16 +366,34 @@ var calculate = ([t0, s0], l, c) => {
   }
   return bezierEquation(c, t);
 };
-function curveIntersectLineSegment(c, l) {
-  let solution = calculate(initial_guesses[0], l, c);
+function curveIntersectLineSegment(c, l, opts) {
+  let solution = calculate(
+    initial_guesses[0],
+    l,
+    c,
+    opts?.tolerance,
+    opts?.iterLimit
+  );
   if (solution) {
     return [solution];
   }
-  solution = calculate(initial_guesses[1], l, c);
+  solution = calculate(
+    initial_guesses[1],
+    l,
+    c,
+    opts?.tolerance,
+    opts?.iterLimit
+  );
   if (solution) {
     return [solution];
   }
-  solution = calculate(initial_guesses[2], l, c);
+  solution = calculate(
+    initial_guesses[2],
+    l,
+    c,
+    opts?.tolerance,
+    opts?.iterLimit
+  );
   if (solution) {
     return [solution];
   }
@@ -1846,32 +1871,23 @@ var debounce = (fn, timeout) => {
   };
   return ret;
 };
-var throttleRAF = (fn, opts) => {
+var throttleRAF = (fn) => {
   let timerId = null;
   let lastArgs = null;
-  let lastArgsTrailing = null;
-  const scheduleFunc = (args) => {
+  const scheduleFunc = () => {
     timerId = window.requestAnimationFrame(() => {
       timerId = null;
-      fn(...args);
+      const args = lastArgs;
       lastArgs = null;
-      if (lastArgsTrailing) {
-        lastArgs = lastArgsTrailing;
-        lastArgsTrailing = null;
-        scheduleFunc(lastArgs);
+      if (args) {
+        fn(...args);
       }
     });
   };
   const ret = (...args) => {
-    if (isTestEnv()) {
-      fn(...args);
-      return;
-    }
     lastArgs = args;
     if (timerId === null) {
-      scheduleFunc(lastArgs);
-    } else if (opts?.trailing) {
-      lastArgsTrailing = args;
+      scheduleFunc();
     }
   };
   ret.flush = () => {
@@ -1880,12 +1896,12 @@ var throttleRAF = (fn, opts) => {
       timerId = null;
     }
     if (lastArgs) {
-      fn(...lastArgsTrailing || lastArgs);
-      lastArgs = lastArgsTrailing = null;
+      fn(...lastArgs);
+      lastArgs = null;
     }
   };
   ret.cancel = () => {
-    lastArgs = lastArgsTrailing = null;
+    lastArgs = null;
     if (timerId !== null) {
       cancelAnimationFrame(timerId);
       timerId = null;
@@ -2117,10 +2133,6 @@ var arrayToMap = (items) => {
     return acc;
   }, /* @__PURE__ */ new Map());
 };
-var arrayToMapWithIndex = (elements) => elements.reduce((acc, element, idx) => {
-  acc.set(element.id, [element, idx]);
-  return acc;
-}, /* @__PURE__ */ new Map());
 var arrayToObject = (array, groupBy) => array.reduce((acc, value, idx) => {
   acc[groupBy ? groupBy(value) : idx] = value;
   return acc;
@@ -2473,6 +2485,81 @@ var Emitter = class {
   }
 };
 
+// ../common/src/appEventBus.ts
+var AppEventBus = class {
+  constructor(behavior) {
+    this.behavior = behavior;
+    __publicField(this, "emitters", /* @__PURE__ */ new Map());
+    __publicField(this, "lastPayload", /* @__PURE__ */ new Map());
+    __publicField(this, "emittedOnce", /* @__PURE__ */ new Set());
+  }
+  getEmitter(name) {
+    let emitter = this.emitters.get(name);
+    if (!emitter) {
+      emitter = new Emitter();
+      this.emitters.set(name, emitter);
+    }
+    return emitter;
+  }
+  toPromiseValue(args) {
+    return args.length === 1 ? args[0] : args;
+  }
+  on(name, callback) {
+    const eventBehavior = this.behavior[name];
+    const cachedPayload = this.lastPayload.get(name);
+    if (callback) {
+      if (eventBehavior.replay === "last" && cachedPayload) {
+        queueMicrotask(() => callback(...cachedPayload));
+        if (eventBehavior.cardinality === "once") {
+          return () => {
+          };
+        }
+      }
+      return this.getEmitter(name).on(callback);
+    }
+    if (eventBehavior.cardinality !== "once" || eventBehavior.replay !== "last") {
+      throw new Error(`Event "${String(name)}" requires a callback`);
+    }
+    if (cachedPayload) {
+      return Promise.resolve(this.toPromiseValue(cachedPayload));
+    }
+    return new Promise((resolve) => {
+      this.getEmitter(name).once((...args) => {
+        resolve(this.toPromiseValue(args));
+      });
+    });
+  }
+  emit(name, ...args) {
+    const eventBehavior = this.behavior[name];
+    if (!isProdEnv()) {
+      if (eventBehavior.cardinality === "once") {
+        if (this.emittedOnce.has(name)) {
+          throw new Error(`Event "${String(name)}" can only be emitted once`);
+        }
+        this.emittedOnce.add(name);
+      }
+    }
+    if (eventBehavior.replay === "last") {
+      this.lastPayload.set(name, args);
+    }
+    try {
+      this.getEmitter(name).trigger(...args);
+    } finally {
+      if (eventBehavior.cardinality === "once") {
+        this.getEmitter(name).clear();
+      }
+    }
+  }
+  clear() {
+    this.lastPayload.clear();
+    this.emittedOnce.clear();
+    for (const emitter of this.emitters.values()) {
+      emitter.clear();
+    }
+    this.emitters.clear();
+  }
+};
+
 // ../common/debug.ts
 var lessPrecise = (num, precision = 5) => parseFloat(num.toPrecision(precision));
 var getAvgFrameTime = (times) => lessPrecise(times.reduce((a, b) => a + b) / times.length);
@@ -2722,7 +2809,6 @@ var getDefaultAppState = () => {
       open: false,
       panels: STATS_PANELS.generalStats | STATS_PANELS.elementProperties
     },
-    startBoundElement: null,
     suggestedBinding: null,
     frameRendering: { enabled: true, clip: true, name: true, outline: true },
     frameToHighlight: null,
@@ -2750,7 +2836,8 @@ var getDefaultAppState = () => {
     searchMatches: null,
     lockedMultiSelections: {},
     activeLockedId: null,
-    bindMode: "orbit"
+    bindMode: "orbit",
+    boxSelectionMode: "contain"
   };
 };
 var APP_STATE_STORAGE_CONF = /* @__PURE__ */ ((config) => config)({
@@ -2800,6 +2887,7 @@ var APP_STATE_STORAGE_CONF = /* @__PURE__ */ ((config) => config)({
   gridModeEnabled: { browser: true, export: true, server: true },
   height: { browser: false, export: false, server: false },
   isBindingEnabled: { browser: true, export: false, server: false },
+  boxSelectionMode: { browser: true, export: false, server: false },
   bindingPreference: { browser: true, export: false, server: false },
   isMidpointSnappingEnabled: { browser: true, export: false, server: false },
   defaultSidebarDockedPreference: {
@@ -2836,7 +2924,6 @@ var APP_STATE_STORAGE_CONF = /* @__PURE__ */ ((config) => config)({
   selectionElement: { browser: false, export: false, server: false },
   shouldCacheIgnoreZoom: { browser: true, export: false, server: false },
   stats: { browser: true, export: false, server: false },
-  startBoundElement: { browser: false, export: false, server: false },
   suggestedBinding: { browser: false, export: false, server: false },
   frameRendering: { browser: false, export: false, server: false },
   frameToHighlight: { browser: false, export: false, server: false },
@@ -3724,6 +3811,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;
+    }
+  }
+};
 
 // ../element/src/utils.ts
 var ElementShapesCache = /* @__PURE__ */ new WeakMap();
@@ -3758,12 +3864,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) {
@@ -4170,7 +4276,7 @@ var getSnapOutlineMidPoint = (point, element, elementsMap, zoom) => {
     )
   ];
   const candidate = sideMidpoints.find(
-    (midpoint) => pointDistance(point, midpoint) <= maxBindingDistance_simple(zoom) + element.strokeWidth / 2 && !hitElementItself({
+    (midpoint2) => pointDistance(point, midpoint2) <= maxBindingDistance_simple(zoom) + element.strokeWidth / 2 && !hitElementItself({
       point,
       element,
       threshold: 0,
@@ -5060,7 +5166,8 @@ var getContainerCenter = (container, appState, elementsMap) => {
   if (!midSegmentMidpoint) {
     midSegmentMidpoint = LinearElementEditor.getSegmentMidPoint(
       container,
-      index + 1
+      index + 1,
+      elementsMap
     );
   }
   return { x: midSegmentMidpoint[0], y: midSegmentMidpoint[1] };
@@ -5195,7 +5302,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) => {
@@ -5224,20 +5331,32 @@ var distanceToEllipseElement = (element, elementsMap, p) => {
     ellipse(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((a) => curvePointDistance(a, p))
   );
 };
 
+// ../element/src/comparisons.ts
+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";
+
 // ../element/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);
   }
@@ -5274,14 +5393,11 @@ var hitElementItself = ({
     )
   ) : false;
   const bounds = getElementBounds(element, elementsMap, true);
-  const hitBounds = isPointWithinBounds(
-    pointFrom(bounds[0] - threshold, bounds[1] - threshold),
-    pointRotateRads(
-      point,
-      getCenterForBounds(bounds),
-      -element.angle
-    ),
-    pointFrom(bounds[2] + threshold, bounds[3] + threshold)
+  const hitBounds = isPointInRotatedBounds(
+    point,
+    bounds,
+    element.angle,
+    threshold
   );
   if (!hitBounds && !hitFrameName) {
     return false;
@@ -5299,13 +5415,17 @@ var hitElementItself = ({
   cachedHit = result;
   return result;
 };
+var isPointInRotatedBounds = (point, bounds, angle, tolerance = 0) => {
+  const adjustedPoint = angle === 0 ? point : pointRotateRads(point, getCenterForBounds(bounds), -angle);
+  return isPointWithinBounds(
+    pointFrom(bounds[0] - tolerance, bounds[1] - tolerance),
+    adjustedPoint,
+    pointFrom(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(pointFrom(x1, y1), point, pointFrom(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);
@@ -5369,7 +5489,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;
       }
     }
@@ -5464,7 +5584,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) => {
@@ -5503,8 +5628,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 l of lines) {
     const intersection = lineSegmentIntersectionPoints(l, segment);
@@ -5526,7 +5654,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) {
@@ -7190,7 +7320,7 @@ var normalizeArrowElementUpdate = (global, nextFixedSegments, startIsSpecial, en
       vectorScale(vectorFromPoint(global[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)",
       {
@@ -7794,11 +7924,7 @@ var getBindingStrategyForDraggingBindingElementEndpoints_simple = (arrow, draggi
     threshold: 0,
     overrideShouldTestInside: true
   });
-  if (otherBinding && otherBinding.elementId === hit?.id) {
-    invariant(
-      !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",
@@ -8608,8 +8734,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, PRECISION),
+      (nonRotatedSnappedGlobalPoint[1] - hoveredElement.y) / Math.max(hoveredElement.height, PRECISION)
     ])
   };
 };
@@ -8625,8 +8751,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, PRECISION);
+  const fixedPointY = (nonRotatedPoint[1] - hoveredElement.y) / Math.max(hoveredElement.height, PRECISION);
   return {
     fixedPoint: normalizeFixedPoint([fixedPointX, fixedPointY])
   };
@@ -9216,12 +9342,14 @@ var _LinearElementEditor = class _LinearElementEditor {
         return false;
       });
     }
-    invariant(
-      lastClickedPoint > -1 && selectedPointsIndices.includes(lastClickedPoint) && element.points[lastClickedPoint],
-      `There must be a valid lastClickedPoint in order to drag it. selectedPointsIndices(${JSON.stringify(
-        selectedPointsIndices
-      )}) points(0..${element.points.length - 1}) lastClickedPoint(${lastClickedPoint})`
-    );
+    if (lastClickedPoint < 0 || !selectedPointsIndices.includes(lastClickedPoint) || !element.points[lastClickedPoint]) {
+      console.error(
+        `There must be a valid lastClickedPoint in order to drag it. selectedPointsIndices(${JSON.stringify(
+          selectedPointsIndices
+        )}) points(0..${element.points.length - 1}) lastClickedPoint(${lastClickedPoint}) isElbowArrow: ${elbowed}`
+      );
+      lastClickedPoint = element.points.length - 1;
+    }
     const draggingPoint = element.points[lastClickedPoint];
     const pivotPoint = element.points[lastClickedPoint === 0 ? 1 : lastClickedPoint - 1];
     const singlePointDragged = selectedPointsIndices.length === 1;
@@ -9418,7 +9546,7 @@ var _LinearElementEditor = class _LinearElementEditor {
       }
     };
   }
-  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 pointDistance(startPoint, endPoint) * zoom.value < _LinearElementEditor.POINT_HANDLE_SIZE / 2;
@@ -9427,7 +9555,10 @@ var _LinearElementEditor = class _LinearElementEditor {
     }
     let distance2 = pointDistance(startPoint, endPoint);
     if (element.points.length > 2 && element.roundness) {
-      const [lines, curves] = deconstructLinearOrFreeDrawElement(element);
+      const [lines, curves] = deconstructLinearOrFreeDrawElement(
+        element,
+        elementsMap
+      );
       invariant(
         lines.length === 0 && curves.length > 0,
         "Only linears built out of curves are supported"
@@ -9440,7 +9571,7 @@ var _LinearElementEditor = class _LinearElementEditor {
     }
     return distance2 * zoom.value < _LinearElementEditor.POINT_HANDLE_SIZE * 4;
   }
-  static getSegmentMidPoint(element, index) {
+  static getSegmentMidPoint(element, index, elementsMap) {
     if (isElbowArrow(element)) {
       invariant(
         element.points.length >= index,
@@ -9449,7 +9580,10 @@ var _LinearElementEditor = class _LinearElementEditor {
       const p = pointCenter(element.points[index - 1], element.points[index]);
       return pointFrom(element.x + p[0], element.y + p[1]);
     }
-    const [lines, curves] = deconstructLinearOrFreeDrawElement(element);
+    const [lines, curves] = deconstructLinearOrFreeDrawElement(
+      element,
+      elementsMap
+    );
     invariant(
       lines.length === 0 && curves.length > 0 || lines.length > 0 && curves.length === 0,
       "Only linears built out of either segments or curves are supported"
@@ -9969,7 +10103,7 @@ var _LinearElementEditor = class _LinearElementEditor {
       pointerDownState: linearElementEditor.initialState,
       selectedPointsIndices: linearElementEditor.selectedPointsIndices
     };
-    const midpoint = _LinearElementEditor.createPointAt(
+    const midpoint2 = _LinearElementEditor.createPointAt(
       element,
       elementsMap,
       pointerCoords.x,
@@ -9978,7 +10112,7 @@ var _LinearElementEditor = class _LinearElementEditor {
     );
     const points = [
       ...element.points.slice(0, segmentMidpoint.index),
-      midpoint,
+      midpoint2,
       ...element.points.slice(segmentMidpoint.index)
     ];
     scene.mutateElement(element, { points });
@@ -10149,7 +10283,8 @@ __publicField(_LinearElementEditor, "getEditorMidPoints", (element, elementsMap,
       element.points[index],
       element.points[index + 1],
       index,
-      appState.zoom
+      appState.zoom,
+      elementsMap
     )) {
       midpoints.push(null);
       index++;
@@ -10157,7 +10292,8 @@ __publicField(_LinearElementEditor, "getEditorMidPoints", (element, elementsMap,
     }
     const segmentMidPoint = _LinearElementEditor.getSegmentMidPoint(
       element,
-      index + 1
+      index + 1,
+      elementsMap
     );
     midpoints.push(segmentMidPoint);
     index++;
@@ -10244,7 +10380,8 @@ __publicField(_LinearElementEditor, "getBoundTextElementPosition", (element, bou
     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;
@@ -10366,13 +10503,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: pointFrom(
-            element.points[pointIndex][0] + deltaX,
-            element.points[pointIndex][1] + deltaY
-          ),
+          point: pointFrom(point[0] + deltaX, point[1] + deltaY),
           isDragging: true
         }
       ];
@@ -10559,7 +10694,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" && getFeatureFlag("COMPLEX_BINDINGS") ? nextArrow.points[0] : endBindable ? updateBoundPoint(
-    element,
+    nextArrow,
     "endBinding",
     nextArrow.endBinding,
     endBindable,
@@ -10571,7 +10706,7 @@ var pointDraggingUpdates = (selectedPointsIndices, deltaX, deltaY, scenePointerX
     nextArrow.startBinding.elementId
   ) : null;
   const startLocalPoint = endIsDraggingOverStartElement && getFeatureFlag("COMPLEX_BINDINGS") ? nextArrow.points[0] : startIsDraggingOverEndElement && app.state.bindMode !== "inside" && getFeatureFlag("COMPLEX_BINDINGS") ? endLocalPoint : startBindable ? updateBoundPoint(
-    element,
+    nextArrow,
     "startBinding",
     nextArrow.startBinding,
     startBindable,
@@ -10639,131 +10774,6 @@ function doLineSegmentsIntersect(a, b) {
   return doBBoxesIntersect(getBBox(a), getBBox(b)) && isLineSegmentTouchingOrCrossingLine(a, b) && isLineSegmentTouchingOrCrossingLine(b, a);
 }
 
-// ../utils/src/withinBounds.ts
-var getNonLinearElementRelativePoints = (element) => {
-  if (element.type === "diamond") {
-    return [
-      pointFrom(element.width / 2, 0),
-      pointFrom(element.width, element.height / 2),
-      pointFrom(element.width / 2, element.height),
-      pointFrom(0, element.height / 2)
-    ];
-  }
-  return [
-    pointFrom(0, 0),
-    pointFrom(0 + element.width, 0),
-    pointFrom(0 + element.width, element.height),
-    pointFrom(0, element.height)
-  ];
-};
-var getElementRelativePoints = (element) => {
-  if (isLinearElement(element) || isFreeDrawElement(element)) {
-    return element.points;
-  }
-  return getNonLinearElementRelativePoints(element);
-};
-var getMinMaxPoints = (points) => {
-  const ret = points.reduce(
-    (limits, [x, y]) => {
-      limits.minY = Math.min(limits.minY, y);
-      limits.minX = Math.min(limits.minX, x);
-      limits.maxX = Math.max(limits.maxX, x);
-      limits.maxY = Math.max(limits.maxY, y);
-      return limits;
-    },
-    {
-      minX: Infinity,
-      minY: Infinity,
-      maxX: -Infinity,
-      maxY: -Infinity,
-      cx: 0,
-      cy: 0
-    }
-  );
-  ret.cx = (ret.maxX + ret.minX) / 2;
-  ret.cy = (ret.maxY + ret.minY) / 2;
-  return ret;
-};
-var getRotatedBBox = (element) => {
-  const points = getElementRelativePoints(element);
-  const { cx, cy } = getMinMaxPoints(points);
-  const centerPoint = pointFrom(cx, cy);
-  const rotatedPoints = points.map(
-    (p) => pointRotateRads(p, centerPoint, element.angle)
-  );
-  const { minX, minY, maxX, maxY } = getMinMaxPoints(rotatedPoints);
-  return [
-    minX + element.x,
-    minY + element.y,
-    maxX + element.x,
-    maxY + element.y
-  ];
-};
-var isElementInsideBBox = (element, bbox, eitherDirection = false) => {
-  const elementBBox = getRotatedBBox(element);
-  const elementInsideBbox = bbox[0] <= elementBBox[0] && bbox[2] >= elementBBox[2] && bbox[1] <= elementBBox[1] && bbox[3] >= elementBBox[3];
-  if (!eitherDirection) {
-    return elementInsideBbox;
-  }
-  if (elementInsideBbox) {
-    return true;
-  }
-  return elementBBox[0] <= bbox[0] && elementBBox[2] >= bbox[2] && elementBBox[1] <= bbox[1] && elementBBox[3] >= bbox[3];
-};
-var elementPartiallyOverlapsWithOrContainsBBox = (element, bbox) => {
-  const elementBBox = getRotatedBBox(element);
-  return (rangeIncludesValue(elementBBox[0], rangeInclusive(bbox[0], bbox[2])) || rangeIncludesValue(
-    bbox[0],
-    rangeInclusive(elementBBox[0], elementBBox[2])
-  )) && (rangeIncludesValue(elementBBox[1], rangeInclusive(bbox[1], bbox[3])) || rangeIncludesValue(
-    bbox[1],
-    rangeInclusive(elementBBox[1], elementBBox[3])
-  ));
-};
-var elementsOverlappingBBox = ({
-  elements,
-  bounds,
-  type,
-  errorMargin = 0
-}) => {
-  if (isExcalidrawElement(bounds)) {
-    bounds = getElementBounds(bounds, arrayToMap(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 (isTextElement(element) && element.containerId) {
-        includedElementSet.add(element.containerId);
-      }
-      if (isArrowElement(element)) {
-        if (element.startBinding) {
-          includedElementSet.add(element.startBinding.elementId);
-        }
-        if (element.endBinding) {
-          includedElementSet.add(element.endBinding?.elementId);
-        }
-      }
-    }
-  }
-  return elements.filter((element) => includedElementSet.has(element.id));
-};
-
 // ../element/src/groups.ts
 var selectGroup = (groupId, appState, elements) => {
   const elementsInGroup = elements.reduce(
@@ -11037,13 +11047,8 @@ var getSelectedElementsByGroup = (selectedElements, elementsMap, appState) => {
 };
 
 // ../element/src/selection.ts
-var excludeElementsInFramesFromSelection = (selectedElements) => {
-  const framesInSelection = /* @__PURE__ */ new Set();
-  selectedElements.forEach((element) => {
-    if (isFrameLikeElement(element)) {
-      framesInSelection.add(element.id);
-    }
-  });
+var shouldIgnoreElementFromSelection = (element) => element.locked || isBoundToContainer(element);
+var excludeElementsFromFrames = (selectedElements, framesInSelection) => {
   return selectedElements.filter((element) => {
     if (element.frameId && framesInSelection.has(element.frameId)) {
       return false;
@@ -11051,90 +11056,273 @@ var excludeElementsInFramesFromSelection = (selectedElements) => {
     return true;
   });
 };
-var getElementsWithinSelection = (elements, selection, elementsMap, excludeElementsInFrames = true) => {
-  const [selectionX1, selectionY1, selectionX2, selectionY2] = getElementAbsoluteCoords(selection, elementsMap);
-  let elementsInSelection = elements.filter((element) => {
-    let [elementX1, elementY1, elementX2, elementY2] = getElementBounds(
-      element,
-      elementsMap
-    );
-    const containingFrame = getContainingFrame(element, elementsMap);
-    if (containingFrame) {
-      const [fx1, fy1, fx2, fy2] = getElementBounds(
-        containingFrame,
-        elementsMap
-      );
-      elementX1 = Math.max(fx1, elementX1);
-      elementY1 = Math.max(fy1, elementY1);
-      elementX2 = Math.min(fx2, elementX2);
-      elementY2 = Math.min(fy2, elementY2);
+var excludeElementsInFramesFromSelection = (selectedElements) => {
+  const framesInSelection = /* @__PURE__ */ new Set();
+  selectedElements.forEach((element) => {
+    if (isFrameLikeElement(element)) {
+      framesInSelection.add(element.id);
     }
-    return element.locked === false && element.type !== "selection" && !isBoundToContainer(element) && selectionX1 <= elementX1 && selectionY1 <= elementY1 && selectionX2 >= elementX2 && selectionY2 >= elementY2;
   });
-  elementsInSelection = excludeElementsInFrames ? excludeElementsInFramesFromSelection(elementsInSelection) : elementsInSelection;
-  elementsInSelection = elementsInSelection.filter((element) => {
-    const containingFrame = getContainingFrame(element, elementsMap);
-    if (containingFrame) {
-      return elementOverlapsWithFrame(element, containingFrame, elementsMap);
+  return excludeElementsFromFrames(selectedElements, framesInSelection);
+};
+var getElementsWithinSelection = (elements, selection, elementsMap, excludeElementsInFrames = true, boxSelectionMode = "contain") => {
+  const [selectionStartX, selectionStartY, selectionEndX, selectionEndY] = getElementAbsoluteCoords(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 = [
+    lineSegment(
+      pointFrom(selectionX1, selectionY1),
+      pointFrom(selectionX2, selectionY1)
+    ),
+    lineSegment(
+      pointFrom(selectionX2, selectionY1),
+      pointFrom(selectionX2, selectionY2)
+    ),
+    lineSegment(
+      pointFrom(selectionX2, selectionY2),
+      pointFrom(selectionX1, selectionY2)
+    ),
+    lineSegment(
+      pointFrom(selectionX1, selectionY2),
+      pointFrom(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;
-  });
-  return elementsInSelection;
-};
-var getVisibleAndNonSelectedElements = (elements, selectedElements, appState, elementsMap) => {
-  const selectedElementsSet = new Set(
-    selectedElements.map((element) => element.id)
-  );
-  return elements.filter((element) => {
-    const isVisible = isElementInViewport(
-      element,
-      appState.width,
-      appState.height,
-      appState,
-      elementsMap
-    );
-    return !selectedElementsSet.has(element.id) && isVisible;
-  });
-};
-var isSomeElementSelected = function() {
-  let lastElements = null;
-  let lastSelectedElementIds = null;
-  let isSelected = null;
-  const ret = (elements, appState) => {
-    if (isSelected != null && elements === lastElements && appState.selectedElementIds === lastSelectedElementIds) {
-      return isSelected;
+    const groupId = element.groupIds.at(-1);
+    if (groupId) {
+      if (!groups[groupId]) {
+        groups[groupId] = [];
+      }
+      groups[groupId].push(element);
+    }
+    const strokeWidth = element.strokeWidth;
+    let labelAABB = null;
+    let elementAABB = getElementBounds(element, elementsMap);
+    elementAABB = [
+      elementAABB[0] - strokeWidth / 2,
+      elementAABB[1] - strokeWidth / 2,
+      elementAABB[2] + strokeWidth / 2,
+      elementAABB[3] + strokeWidth / 2
+    ];
+    const boundTextElement = isArrowElement(element) && getBoundTextElement(element, elementsMap);
+    if (boundTextElement) {
+      const { x, y } = LinearElementEditor.getBoundTextElementPosition(
+        element,
+        boundTextElement,
+        elementsMap
+      );
+      labelAABB = [
+        x,
+        y,
+        x + boundTextElement.width,
+        y + boundTextElement.height
+      ];
     }
-    isSelected = elements.some(
-      (element) => appState.selectedElementIds[element.id]
-    );
-    lastElements = elements;
-    lastSelectedElementIds = appState.selectedElementIds;
-    return isSelected;
-  };
-  ret.clearCache = () => {
-    lastElements = null;
-    lastSelectedElementIds = null;
-    isSelected = null;
-  };
-  return ret;
-}();
-var getSelectedElements = (elements, appState, opts) => {
-  const addedElements = /* @__PURE__ */ new Set();
-  const selectedElements = [];
-  for (const element of elements.values()) {
-    if (appState.selectedElementIds[element.id]) {
-      selectedElements.push(element);
-      addedElements.add(element.id);
+    const associatedFrame = getContainingFrame(element, elementsMap);
+    if (associatedFrame && elementOverlapsWithFrame(element, associatedFrame, elementsMap)) {
+      const frameAABB = getElementBounds(associatedFrame, elementsMap);
+      elementAABB = [
+        Math.max(elementAABB[0], frameAABB[0]),
+        Math.max(elementAABB[1], frameAABB[1]),
+        Math.min(elementAABB[2], frameAABB[2]),
+        Math.min(elementAABB[3], frameAABB[3])
+      ];
+      labelAABB = labelAABB ? [
+        Math.max(labelAABB[0], frameAABB[0]),
+        Math.max(labelAABB[1], frameAABB[1]),
+        Math.min(labelAABB[2], frameAABB[2]),
+        Math.min(labelAABB[3], frameAABB[3])
+      ] : null;
+    }
+    const commonAABB2 = labelAABB ? [
+      Math.min(labelAABB[0], elementAABB[0]),
+      Math.min(labelAABB[1], elementAABB[1]),
+      Math.max(labelAABB[2], elementAABB[2]),
+      Math.max(labelAABB[3], elementAABB[3])
+    ] : elementAABB;
+    if (boundsContainBounds(selectionBounds, commonAABB2)) {
+      if (framesInSelection && isFrameLikeElement(element)) {
+        framesInSelection.add(element.id);
+      }
+      elementsInSelection.add(element);
       continue;
     }
-    if (opts?.includeBoundTextElement && isBoundToContainer(element) && appState.selectedElementIds[element?.containerId]) {
-      selectedElements.push(element);
-      addedElements.add(element.id);
+    if (boxSelectionMode === "overlap" && labelAABB && doBoundsIntersect(selectionBounds, labelAABB)) {
+      elementsInSelection.add(element);
       continue;
     }
-  }
-  if (opts?.includeElementsInFrames) {
-    const elementsToInclude = [];
+    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 = pointRotateRads(
+            pointFrom(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 = [
+          pointRotateRads(
+            pointFrom(
+              (nonRotatedElementBounds[0] + nonRotatedElementBounds[2]) / 2,
+              nonRotatedElementBounds[1]
+            ),
+            center,
+            element.angle
+          ),
+          pointRotateRads(
+            pointFrom(
+              nonRotatedElementBounds[2],
+              (nonRotatedElementBounds[1] + nonRotatedElementBounds[3]) / 2
+            ),
+            center,
+            element.angle
+          ),
+          pointRotateRads(
+            pointFrom(
+              (nonRotatedElementBounds[0] + nonRotatedElementBounds[2]) / 2,
+              nonRotatedElementBounds[3]
+            ),
+            center,
+            element.angle
+          ),
+          pointRotateRads(
+            pointFrom(
+              nonRotatedElementBounds[0],
+              (nonRotatedElementBounds[1] + nonRotatedElementBounds[3]) / 2
+            ),
+            center,
+            element.angle
+          )
+        ].some((point) => {
+          return pointInsideBounds(
+            pointRotateRads(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(
+    selectedElements.map((element) => element.id)
+  );
+  return elements.filter((element) => {
+    const isVisible = isElementInViewport(
+      element,
+      appState.width,
+      appState.height,
+      appState,
+      elementsMap
+    );
+    return !selectedElementsSet.has(element.id) && isVisible;
+  });
+};
+var isSomeElementSelected = function() {
+  let lastElements = null;
+  let lastSelectedElementIds = null;
+  let isSelected = null;
+  const ret = (elements, appState) => {
+    if (isSelected != null && elements === lastElements && appState.selectedElementIds === lastSelectedElementIds) {
+      return isSelected;
+    }
+    isSelected = elements.some(
+      (element) => appState.selectedElementIds[element.id]
+    );
+    lastElements = elements;
+    lastSelectedElementIds = appState.selectedElementIds;
+    return isSelected;
+  };
+  ret.clearCache = () => {
+    lastElements = null;
+    lastSelectedElementIds = null;
+    isSelected = null;
+  };
+  return ret;
+}();
+var getSelectedElements = (elements, appState, opts) => {
+  const addedElements = /* @__PURE__ */ new Set();
+  const selectedElements = [];
+  for (const element of elements.values()) {
+    if (appState.selectedElementIds[element.id]) {
+      selectedElements.push(element);
+      addedElements.add(element.id);
+      continue;
+    }
+    if (opts?.includeBoundTextElement && isBoundToContainer(element) && appState.selectedElementIds[element?.containerId]) {
+      selectedElements.push(element);
+      addedElements.add(element.id);
+      continue;
+    }
+  }
+  if (opts?.includeElementsInFrames) {
+    const elementsToInclude = [];
     selectedElements.forEach((element) => {
       if (isFrameLikeElement(element)) {
         getFrameChildren(elements, element.id).forEach(
@@ -11196,486 +11384,984 @@ var getActiveTextElement = (selectedElements, appState) => {
   return activeTextElement || null;
 };
 
-// ../element/src/frame.ts
-var bindElementsToFramesAfterDuplication = (nextElements, origElements, origIdToDuplicateId) => {
-  const nextElementMap = arrayToMap(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
-        });
-      }
+// ../fractional-indexing/src/index.ts
+var BASE_62_DIGITS = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
+function midpoint(a, b, digits) {
+  const zero = digits[0];
+  if (b != null && a >= b) {
+    throw new Error(`${a} >= ${b}`);
+  }
+  if (a.slice(-1) === zero || b && b.slice(-1) === zero) {
+    throw new Error("trailing zero");
+  }
+  if (b) {
+    let n = 0;
+    while ((a[n] || zero) === b[n]) {
+      n++;
+    }
+    if (n > 0) {
+      return b.slice(0, n) + midpoint(a.slice(n), b.slice(n), digits);
     }
   }
-};
-function isElementIntersectingFrame(element, frame, elementsMap) {
-  const frameLineSegments = getElementLineSegments(frame, elementsMap);
-  const elementLineSegments = getElementLineSegments(element, elementsMap);
-  const intersecting = frameLineSegments.some(
-    (frameLineSegment) => elementLineSegments.some(
-      (elementLineSegment) => doLineSegmentsIntersect(frameLineSegment, elementLineSegment)
-    )
-  );
-  return intersecting;
+  const digitA = a ? digits.indexOf(a[0]) : 0;
+  const digitB = b != null ? digits.indexOf(b[0]) : digits.length;
+  if (digitB - digitA > 1) {
+    const midDigit = Math.round(0.5 * (digitA + digitB));
+    return digits[midDigit];
+  }
+  if (b && b.length > 1) {
+    return b.slice(0, 1);
+  }
+  return digits[digitA] + midpoint(a.slice(1), null, digits);
 }
-var getElementsCompletelyInFrame = (elements, frame, elementsMap) => omitGroupsContainingFrameLikes(
-  getElementsWithinSelection(elements, frame, elementsMap, false)
-).filter(
-  (element) => !isFrameLikeElement(element) && !element.frameId || element.frameId === frame.id
-);
-var isElementContainingFrame = (element, frame, elementsMap) => {
-  return getElementsWithinSelection([frame], element, elementsMap).some(
-    (e) => e.id === frame.id
-  );
-};
-var elementsAreInFrameBounds = (elements, frame, elementsMap) => {
-  const [frameX1, frameY1, frameX2, frameY2] = getElementAbsoluteCoords(
-    frame,
-    elementsMap
-  );
-  const [elementX1, elementY1, elementX2, elementY2] = getCommonBounds(elements);
-  return frameX1 <= elementX1 && frameY1 <= elementY1 && frameX2 >= elementX2 && frameY2 >= elementY2;
-};
-var elementOverlapsWithFrame = (element, frame, elementsMap) => {
-  return elementsAreInFrameBounds([element], frame, elementsMap) || isElementIntersectingFrame(element, frame, elementsMap) || isElementContainingFrame(element, frame, elementsMap);
-};
-var isCursorInFrame = (cursorCoords, frame, elementsMap) => {
-  const [fx1, fy1, fx2, fy2] = getElementAbsoluteCoords(frame, elementsMap);
-  return isPointWithinBounds(
-    pointFrom(fx1, fy1),
-    pointFrom(cursorCoords.x, cursorCoords.y),
-    pointFrom(fx2, fy2)
-  );
-};
-var groupByFrameLikes = (elements) => {
-  const frameElementsMap = /* @__PURE__ */ new Map();
-  for (const element of elements) {
-    const frameId = isFrameLikeElement(element) ? element.id : element.frameId;
-    if (frameId && !frameElementsMap.has(frameId)) {
-      frameElementsMap.set(frameId, getFrameChildren(elements, frameId));
+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;
+  }
+  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 = BASE_62_DIGITS) {
+  const validChars = key.split("").every((char) => digits.includes(char));
+  if (key === `A${digits[0].repeat(26)}` || !validChars) {
+    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;
     }
   }
-  return frameElementsMap;
-};
-var getFrameChildren = (allElements, frameId) => {
-  const frameChildren = [];
-  for (const element of allElements.values()) {
-    if (element.frameId === frameId) {
-      frameChildren.push(element);
+  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("");
   }
-  return frameChildren;
-};
-var getFrameLikeElements = (allElements) => {
-  return allElements.filter(
-    (element) => isFrameLikeElement(element)
-  );
-};
-var getRootElements = (allElements) => {
-  const frameElements = arrayToMap(getFrameLikeElements(allElements));
-  return allElements.filter(
-    (element) => frameElements.has(element.id) || !element.frameId || !frameElements.has(element.frameId)
-  );
-};
-var getElementsInResizingFrame = (allElements, frame, appState, elementsMap) => {
-  const prevElementsInFrame = getFrameChildren(allElements, frame.id);
-  const nextElementsInFrame = new Set(prevElementsInFrame);
-  const elementsCompletelyInFrame = /* @__PURE__ */ new Set([
-    ...getElementsCompletelyInFrame(allElements, frame, elementsMap),
-    ...prevElementsInFrame.filter(
-      (element) => isElementContainingFrame(element, frame, elementsMap)
-    )
-  ]);
-  const elementsNotCompletelyInFrame = prevElementsInFrame.filter(
-    (element) => !elementsCompletelyInFrame.has(element)
-  );
-  const groupsToKeep = new Set(
-    Array.from(elementsCompletelyInFrame).flatMap(
-      (element) => element.groupIds
-    )
-  );
-  for (const element of elementsNotCompletelyInFrame) {
-    if (!isElementIntersectingFrame(element, frame, elementsMap)) {
-      if (element.groupIds.length === 0) {
-        nextElementsInFrame.delete(element);
-      }
-    } else if (element.groupIds.length > 0) {
-      for (const id of element.groupIds) {
-        groupsToKeep.add(id);
-      }
+  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;
     }
   }
-  for (const element of elementsNotCompletelyInFrame) {
-    if (element.groupIds.length > 0) {
-      let shouldRemoveElement = true;
-      for (const id of element.groupIds) {
-        if (groupsToKeep.has(id)) {
-          shouldRemoveElement = false;
-        }
-      }
-      if (shouldRemoveElement) {
-        nextElementsInFrame.delete(element);
-      }
+  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("");
   }
-  const individualElementsCompletelyInFrame = Array.from(
-    elementsCompletelyInFrame
-  ).filter((element) => element.groupIds.length === 0);
-  for (const element of individualElementsCompletelyInFrame) {
-    nextElementsInFrame.add(element);
+  return head + digs.join("");
+}
+function generateKeyBetween(a, b, digits = BASE_62_DIGITS) {
+  if (a != null) {
+    validateOrderKey(a, digits);
   }
-  const newGroupElementsCompletelyInFrame = Array.from(
-    elementsCompletelyInFrame
-  ).filter((element) => element.groupIds.length > 0);
-  const groupIds = selectGroupsFromGivenElements(
-    newGroupElementsCompletelyInFrame,
-    appState
-  );
-  for (const [id, isSelected] of Object.entries(groupIds)) {
-    if (isSelected) {
-      const elementsInGroup = getElementsInGroup(allElements, id);
-      if (elementsAreInFrameBounds(elementsInGroup, frame, elementsMap)) {
-        for (const element of elementsInGroup) {
-          nextElementsInFrame.add(element);
-        }
-      }
-    }
+  if (b != null) {
+    validateOrderKey(b, digits);
   }
-  return [...nextElementsInFrame].filter((element) => {
-    return !(isTextElement(element) && element.containerId);
-  });
-};
-var getElementsInNewFrame = (elements, frame, elementsMap) => {
-  return omitPartialGroups(
-    omitGroupsContainingFrameLikes(
-      elements,
-      getElementsCompletelyInFrame(elements, frame, elementsMap)
-    ),
-    frame,
-    elementsMap
-  );
-};
-var omitPartialGroups = (elements, frame, allElementsMap) => {
-  const elementsToReturn = [];
-  const checkedGroups = /* @__PURE__ */ new Map();
-  for (const element of elements) {
-    let shouldOmit = false;
-    if (element.groupIds.length > 0) {
-      if (element.groupIds.some((gid) => checkedGroups.get(gid))) {
-        shouldOmit = true;
-      } else {
-        const allElementsInGroup = new Set(
-          element.groupIds.flatMap(
-            (gid) => getElementsInGroup(allElementsMap, gid)
-          )
-        );
-        shouldOmit = !elementsAreInFrameBounds(
-          Array.from(allElementsInGroup),
-          frame,
-          allElementsMap
-        );
-      }
-      element.groupIds.forEach((gid) => {
-        checkedGroups.set(gid, shouldOmit);
-      });
+  if (a != null && b != null && a >= b) {
+    throw new Error(`${a} >= ${b}`);
+  }
+  if (a == null) {
+    if (b == null) {
+      return `a${digits[0]}`;
     }
-    if (!shouldOmit) {
-      elementsToReturn.push(element);
+    const ib2 = getIntegerPart(b);
+    const fb2 = b.slice(ib2.length);
+    if (ib2 === `A${digits[0].repeat(26)}`) {
+      return ib2 + midpoint("", fb2, digits);
     }
+    if (ib2 < b) {
+      return ib2;
+    }
+    const res = decrementInteger(ib2, digits);
+    if (res == null) {
+      throw new Error("cannot decrement any more");
+    }
+    return res;
   }
-  return elementsToReturn;
-};
-var getContainingFrame = (element, elementsMap) => {
-  if (!element.frameId) {
-    return null;
+  if (b == null) {
+    const ia2 = getIntegerPart(a);
+    const fa2 = a.slice(ia2.length);
+    const i2 = incrementInteger(ia2, digits);
+    return i2 == null ? ia2 + midpoint(fa2, null, digits) : i2;
   }
-  return elementsMap.get(element.frameId) || null;
-};
-var filterElementsEligibleAsFrameChildren = (elements, frame) => {
-  const otherFrames = /* @__PURE__ */ new Set();
-  const elementsMap = arrayToMap(elements);
-  elements = omitGroupsContainingFrameLikes(elements);
-  for (const element of elements) {
-    if (isFrameLikeElement(element) && element.id !== frame.id) {
-      otherFrames.add(element.id);
-    }
+  const ia = getIntegerPart(a);
+  const fa = a.slice(ia.length);
+  const ib = getIntegerPart(b);
+  const fb = b.slice(ib.length);
+  if (ia === ib) {
+    return ia + midpoint(fa, fb, digits);
   }
-  const processedGroups = /* @__PURE__ */ new Set();
-  const eligibleElements = [];
-  for (const element of elements) {
-    if (isFrameLikeElement(element) || element.frameId && otherFrames.has(element.frameId)) {
-      continue;
+  const i = incrementInteger(ia, digits);
+  if (i == null) {
+    throw new Error("cannot increment any more");
+  }
+  if (i < b) {
+    return i;
+  }
+  return ia + midpoint(fa, null, digits);
+}
+function generateNKeysBetween(a, b, n, digits = BASE_62_DIGITS) {
+  if (n === 0) {
+    return [];
+  }
+  if (n === 1) {
+    return [generateKeyBetween(a, b, digits)];
+  }
+  if (b == null) {
+    let c2 = generateKeyBetween(a, b, digits);
+    const result = [c2];
+    for (let i = 0; i < n - 1; i++) {
+      c2 = generateKeyBetween(c2, b, digits);
+      result.push(c2);
     }
-    if (element.groupIds.length) {
-      const shallowestGroupId = element.groupIds.at(-1);
-      if (!processedGroups.has(shallowestGroupId)) {
-        processedGroups.add(shallowestGroupId);
-        const groupElements = getElementsInGroup(elements, shallowestGroupId);
-        if (groupElements.some(
-          (el) => elementOverlapsWithFrame(el, frame, elementsMap)
-        )) {
-          for (const child of groupElements) {
-            eligibleElements.push(child);
-          }
-        }
-      }
-    } else {
-      const overlaps = elementOverlapsWithFrame(element, frame, elementsMap);
-      if (overlaps) {
-        eligibleElements.push(element);
-      }
+    return result;
+  }
+  if (a == null) {
+    let c2 = generateKeyBetween(a, b, digits);
+    const result = [c2];
+    for (let i = 0; i < n - 1; i++) {
+      c2 = generateKeyBetween(a, c2, digits);
+      result.push(c2);
     }
+    result.reverse();
+    return result;
+  }
+  const mid = Math.floor(n / 2);
+  const c = generateKeyBetween(a, b, digits);
+  return [
+    ...generateNKeysBetween(a, c, mid, digits),
+    c,
+    ...generateNKeysBetween(c, b, n - mid - 1, digits)
+  ];
+}
+
+// ../element/src/fractionalIndex.ts
+var InvalidFractionalIndexError = class extends Error {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "code", "ELEMENT_HAS_INVALID_INDEX");
   }
-  return eligibleElements;
 };
-var addElementsToFrame = (allElements, elementsToAdd, frame, appState) => {
-  const elementsMap = arrayToMap(allElements);
-  const currTargetFrameChildrenMap = /* @__PURE__ */ new Map();
-  for (const element of allElements.values()) {
-    if (element.frameId === frame.id) {
-      currTargetFrameChildrenMap.set(element.id, true);
+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]
+        )}"`
+      );
     }
-  }
-  const suppliedElementsToAddSet = new Set(elementsToAdd.map((el) => el.id));
-  const finalElementsToAdd = [];
-  const otherFrames = /* @__PURE__ */ new Set();
-  for (const element of elementsToAdd) {
-    if (isFrameLikeElement(element) && element.id !== frame.id) {
-      otherFrames.add(element.id);
+    if (includeBoundTextValidation && hasBoundTextElement(elements[i])) {
+      const container = elements[i];
+      const text = getBoundTextElement(container, arrayToMap(elements));
+      if (text && text.index <= container.index) {
+        errorMessages.push(
+          `Fractional indices invariant for bound elements has been compromised: "${stringifyElement(
+            text
+          )}", "${stringifyElement(container)}"`
+        );
+      }
     }
   }
-  for (const element of omitGroupsContainingFrameLikes(
-    allElements,
-    elementsToAdd
-  )) {
-    if (isFrameLikeElement(element) || element.frameId && otherFrames.has(element.frameId)) {
-      continue;
-    }
-    if (element.frameId && appState.selectedElementIds[element.id] && appState.selectedElementIds[element.frameId]) {
-      continue;
+  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 (!currTargetFrameChildrenMap.has(element.id)) {
-      finalElementsToAdd.push(element);
+    if (!ignoreLogs) {
+      console.error(
+        errorMessages.join("\n\n"),
+        error.stack,
+        elements.map((x) => stringifyElement(x)),
+        ...additionalContext
+      );
     }
-    const boundTextElement = getBoundTextElement(element, elementsMap);
-    if (boundTextElement && !suppliedElementsToAddSet.has(boundTextElement.id) && !currTargetFrameChildrenMap.has(boundTextElement.id)) {
-      finalElementsToAdd.push(boundTextElement);
+    if (shouldThrow) {
+      throw error;
     }
   }
-  for (const element of finalElementsToAdd) {
-    mutateElement(element, elementsMap, {
-      frameId: frame.id
-    });
-  }
-  return allElements;
 };
-var removeElementsFromFrame = (elementsToRemove, elementsMap) => {
-  const _elementsToRemove = /* @__PURE__ */ new Map();
-  const toRemoveElementsByFrame = /* @__PURE__ */ new Map();
-  for (const element of elementsToRemove) {
-    if (element.frameId) {
-      _elementsToRemove.set(element.id, element);
-      const arr = toRemoveElementsByFrame.get(element.frameId) || [];
-      arr.push(element);
-      const boundTextElement = getBoundTextElement(element, elementsMap);
-      if (boundTextElement) {
-        _elementsToRemove.set(boundTextElement.id, boundTextElement);
-        arr.push(boundTextElement);
+var orderByFractionalIndex = (elements) => {
+  return elements.sort((a, b) => {
+    if (isOrderedElement(a) && isOrderedElement(b)) {
+      if (a.index < b.index) {
+        return -1;
+      } else if (a.index > b.index) {
+        return 1;
       }
-      toRemoveElementsByFrame.set(element.frameId, arr);
+      return a.id < b.id ? -1 : 1;
     }
-  }
-  for (const [, element] of _elementsToRemove) {
-    mutateElement(element, elementsMap, {
-      frameId: null
+    return 1;
+  });
+};
+var syncMovedIndices = (elements, movedElements) => {
+  try {
+    const elementsMap = arrayToMap(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 removeAllElementsFromFrame = (allElements, frame) => {
-  const elementsInFrame = getFrameChildren(allElements, frame.id);
-  removeElementsFromFrame(elementsInFrame, arrayToMap(allElements));
-  return allElements;
-};
-var replaceAllElementsInFrame = (allElements, nextElementsInFrame, frame, app) => {
-  return addElementsToFrame(
-    removeAllElementsFromFrame(allElements, frame),
-    nextElementsInFrame,
-    frame,
-    app.state
-  ).slice();
+var syncInvalidIndices = (elements) => {
+  const elementsMap = arrayToMap(elements);
+  const indicesGroups = getInvalidIndicesGroups(elements);
+  const elementsUpdates = generateIndices(elements, indicesGroups);
+  for (const [element, { index }] of elementsUpdates) {
+    mutateElement(element, elementsMap, { index });
+  }
+  return elements;
 };
-var updateFrameMembershipOfSelectedElements = (allElements, appState, app) => {
-  const selectedElements = app.scene.getSelectedElements({
-    selectedElementIds: appState.selectedElementIds,
-    // supplying elements explicitly in case we're passed non-state elements
-    elements: allElements
-  });
-  const elementsToFilter = new Set(selectedElements);
-  if (appState.editingGroupId) {
-    for (const element of selectedElements) {
-      if (element.groupIds.length === 0) {
-        elementsToFilter.add(element);
-      } else {
-        element.groupIds.flatMap((gid) => getElementsInGroup(allElements, gid)).forEach((element2) => elementsToFilter.add(element2));
-      }
-    }
+var syncInvalidIndicesImmutable = (elements) => {
+  const syncedElements = arrayToMap(elements);
+  const indicesGroups = getInvalidIndicesGroups(elements);
+  const elementsUpdates = generateIndices(elements, indicesGroups);
+  for (const [element, { index }] of elementsUpdates) {
+    syncedElements.set(element.id, newElementWith(element, { index }));
   }
-  const elementsToRemove = /* @__PURE__ */ new Set();
-  const elementsMap = arrayToMap(allElements);
-  elementsToFilter.forEach((element) => {
-    if (element.frameId && !isFrameLikeElement(element) && !isElementInFrame(element, elementsMap, appState)) {
-      elementsToRemove.add(element);
+  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++;
     }
-  });
-  if (elementsToRemove.size > 0) {
-    removeElementsFromFrame(elementsToRemove, elementsMap);
   }
-  return allElements;
+  return indicesGroups;
 };
-var omitGroupsContainingFrameLikes = (allElements, selectedElements) => {
-  const uniqueGroupIds = /* @__PURE__ */ new Set();
-  const elements = selectedElements || allElements;
-  for (const el of elements.values()) {
-    const topMostGroupId = el.groupIds[el.groupIds.length - 1];
-    if (topMostGroupId) {
-      uniqueGroupIds.add(topMostGroupId);
+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];
     }
-  }
-  const rejectedGroupIds = /* @__PURE__ */ new Set();
-  for (const groupId of uniqueGroupIds) {
-    if (getElementsInGroup(allElements, groupId).some(
-      (el) => isFrameLikeElement(el)
-    )) {
-      rejectedGroupIds.add(groupId);
+    return [lowerBound2, lowerBoundIndex];
+  };
+  const getUpperBound = (index) => {
+    const upperBound2 = elements[upperBoundIndex] ? elements[upperBoundIndex].index : void 0;
+    if (upperBound2 && index < upperBoundIndex) {
+      return [upperBound2, upperBoundIndex];
     }
-  }
-  const ret = [];
-  for (const element of elements.values()) {
-    if (!rejectedGroupIds.has(element.groupIds[element.groupIds.length - 1])) {
-      ret.push(element);
+    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 ret;
+  return indicesGroups;
 };
-var getTargetFrame = (element, elementsMap, appState) => {
-  const _element = isTextElement(element) ? getContainerElement(element, elementsMap) || element : element;
-  if (_element.frameId && appState.selectedElementIds[_element.id] && appState.selectedElementIds[_element.frameId]) {
-    return getContainingFrame(_element, elementsMap);
+var isValidFractionalIndex = (index, predecessor, successor) => {
+  if (!index) {
+    return false;
   }
-  return appState.selectedElementIds[_element.id] && appState.selectedElementsAreBeingDragged ? appState.frameToHighlight : getContainingFrame(_element, elementsMap);
-};
-var isElementInFrame = (element, allElementsMap, appState, opts) => {
-  const frame = opts?.targetFrame ?? getTargetFrame(element, allElementsMap, appState);
-  if (!frame) {
+  try {
+    validateOrderKey(index);
+  } catch {
     return false;
   }
-  const _element = isTextElement(element) ? getContainerElement(element, allElementsMap) || element : element;
-  const setGroupsInFrame = (isInFrame) => {
-    if (opts?.checkedGroups) {
-      _element.groupIds.forEach((groupId) => {
-        opts.checkedGroups?.set(groupId, isInFrame);
-      });
-    }
-  };
-  if (
-    // if the element is not selected, or it is selected but not being dragged,
-    // frame membership won't update, so return true
-    !appState.selectedElementIds[_element.id] || !appState.selectedElementsAreBeingDragged || // if both frame and element are selected, won't update membership, so return true
-    appState.selectedElementIds[_element.id] && appState.selectedElementIds[frame.id]
-  ) {
-    return true;
+  if (predecessor && successor) {
+    return predecessor < index && index < successor;
   }
-  if (_element.groupIds.length === 0) {
-    return elementOverlapsWithFrame(_element, frame, allElementsMap);
+  if (!predecessor && successor) {
+    return index < successor;
   }
-  for (const gid of _element.groupIds) {
-    if (opts?.checkedGroups?.has(gid)) {
-      return opts.checkedGroups.get(gid);
-    }
+  if (predecessor && !successor) {
+    return predecessor < index;
   }
-  const allElementsInGroup = new Set(
-    _element.groupIds.filter((gid) => {
-      if (opts?.checkedGroups) {
-        return !opts.checkedGroups.has(gid);
-      }
-      return true;
-    }).flatMap((gid) => getElementsInGroup(allElementsMap, gid))
-  );
-  if (appState.editingGroupId && appState.selectedElementsAreBeingDragged) {
-    const selectedElements = new Set(
-      getSelectedElements(allElementsMap, appState)
+  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
     );
-    const editingGroupOverlapsFrame = appState.frameToHighlight !== null;
-    if (editingGroupOverlapsFrame) {
-      return true;
-    }
-    selectedElements.forEach((selectedElement) => {
-      allElementsInGroup.delete(selectedElement);
-    });
-  }
-  for (const elementInGroup of allElementsInGroup) {
-    if (isFrameLikeElement(elementInGroup)) {
-      setGroupsInFrame(false);
-      return false;
-    }
-  }
-  for (const elementInGroup of allElementsInGroup) {
-    if (elementOverlapsWithFrame(elementInGroup, frame, allElementsMap)) {
-      setGroupsInFrame(true);
-      return true;
+    for (let i = 0; i < indices.length; i++) {
+      const element = elements[indices[i]];
+      elementsUpdates.set(element, {
+        index: fractionalIndices[i]
+      });
     }
   }
-  return false;
+  return elementsUpdates;
 };
-var shouldApplyFrameClip = (element, frame, appState, elementsMap, checkedGroups) => {
-  if (!appState.frameRendering || !appState.frameRendering.clip) {
-    return false;
-  }
-  const shouldClipElementItself = isElementIntersectingFrame(element, frame, elementsMap) || isElementContainingFrame(element, frame, elementsMap);
-  if (shouldClipElementItself) {
-    for (const groupId of element.groupIds) {
-      checkedGroups?.set(groupId, true);
-    }
+var isOrderedElement = (element) => {
+  if (element.index) {
     return true;
   }
-  if (!shouldClipElementItself && element.groupIds.length > 0 && !elementsAreInFrameBounds([element], frame, elementsMap)) {
-    let shouldClip = false;
-    if (!appState.selectedElementsAreBeingDragged) {
-      shouldClip = element.frameId === frame.id;
-      for (const groupId of element.groupIds) {
-        checkedGroups?.set(groupId, shouldClip);
+  return false;
+};
+
+// ../element/src/frame.ts
+var bindElementsToFramesAfterDuplication = (nextElements, origElements, origIdToDuplicateId) => {
+  const nextElementMap = arrayToMap(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
+        });
       }
-    } else {
-      shouldClip = isElementInFrame(element, elementsMap, appState, {
-        targetFrame: frame,
-        checkedGroups
-      });
     }
-    for (const groupId of element.groupIds) {
-      checkedGroups?.set(groupId, shouldClip);
-    }
-    return shouldClip;
   }
-  return false;
-};
-var DEFAULT_FRAME_NAME = "Frame";
-var DEFAULT_AI_FRAME_NAME = "AI Frame";
-var getDefaultFrameName = (element) => {
-  return isFrameElement(element) ? DEFAULT_FRAME_NAME : DEFAULT_AI_FRAME_NAME;
 };
-var getFrameLikeTitle = (element) => {
-  return element.name === null ? getDefaultFrameName(element) : element.name;
+function isElementIntersectingFrame(element, frame, elementsMap) {
+  const frameLineSegments = getElementLineSegments(frame, elementsMap);
+  const elementLineSegments = getElementLineSegments(element, elementsMap);
+  const intersecting = frameLineSegments.some(
+    (frameLineSegment) => elementLineSegments.some(
+      (elementLineSegment) => doLineSegmentsIntersect(frameLineSegment, elementLineSegment)
+    )
+  );
+  return intersecting;
+}
+var getElementsCompletelyInFrame = (elements, frame, elementsMap) => omitGroupsContainingFrameLikes(
+  getElementsWithinSelection(elements, frame, elementsMap, false)
+).filter(
+  (element) => !isFrameLikeElement(element) && !element.frameId || element.frameId === frame.id
+);
+var isElementContainingFrame = (element, frame, elementsMap) => {
+  return boundsContainBounds(
+    getElementBounds(element, elementsMap),
+    getElementBounds(frame, elementsMap)
+  );
+};
+var elementsAreInFrameBounds = (elements, frame, elementsMap) => {
+  const [frameX1, frameY1, frameX2, frameY2] = getElementAbsoluteCoords(
+    frame,
+    elementsMap
+  );
+  const [elementX1, elementY1, elementX2, elementY2] = getCommonBounds(elements);
+  return frameX1 <= elementX1 && frameY1 <= elementY1 && frameX2 >= elementX2 && frameY2 >= elementY2;
+};
+var elementOverlapsWithFrame = (element, frame, elementsMap) => {
+  return elementsAreInFrameBounds([element], frame, elementsMap) || isElementIntersectingFrame(element, frame, elementsMap) || isElementContainingFrame(element, frame, elementsMap);
+};
+var isCursorInFrame = (cursorCoords, frame, elementsMap) => {
+  const [fx1, fy1, fx2, fy2] = getElementAbsoluteCoords(frame, elementsMap);
+  return isPointWithinBounds(
+    pointFrom(fx1, fy1),
+    pointFrom(cursorCoords.x, cursorCoords.y),
+    pointFrom(fx2, fy2)
+  );
+};
+var groupByFrameLikes = (elements) => {
+  const frameElementsMap = /* @__PURE__ */ new Map();
+  for (const element of elements) {
+    const frameId = isFrameLikeElement(element) ? element.id : element.frameId;
+    if (frameId && !frameElementsMap.has(frameId)) {
+      frameElementsMap.set(frameId, getFrameChildren(elements, frameId));
+    }
+  }
+  return frameElementsMap;
+};
+var getFrameChildren = (allElements, frameId) => {
+  const frameChildren = [];
+  for (const element of allElements.values()) {
+    if (element.frameId === frameId) {
+      frameChildren.push(element);
+    }
+  }
+  return frameChildren;
+};
+var getFrameLikeElements = (allElements) => {
+  return allElements.filter(
+    (element) => isFrameLikeElement(element)
+  );
+};
+var getRootElements = (allElements) => {
+  const frameElements = arrayToMap(getFrameLikeElements(allElements));
+  return allElements.filter(
+    (element) => frameElements.has(element.id) || !element.frameId || !frameElements.has(element.frameId)
+  );
+};
+var getElementsInResizingFrame = (allElements, frame, appState, elementsMap) => {
+  const prevElementsInFrame = getFrameChildren(allElements, frame.id);
+  const nextElementsInFrame = new Set(prevElementsInFrame);
+  const elementsCompletelyInFrame = /* @__PURE__ */ new Set([
+    ...getElementsCompletelyInFrame(allElements, frame, elementsMap),
+    ...prevElementsInFrame.filter(
+      (element) => isElementContainingFrame(element, frame, elementsMap)
+    )
+  ]);
+  const elementsNotCompletelyInFrame = prevElementsInFrame.filter(
+    (element) => !elementsCompletelyInFrame.has(element)
+  );
+  const groupsToKeep = new Set(
+    Array.from(elementsCompletelyInFrame).flatMap(
+      (element) => element.groupIds
+    )
+  );
+  for (const element of elementsNotCompletelyInFrame) {
+    if (!isElementIntersectingFrame(element, frame, elementsMap)) {
+      if (element.groupIds.length === 0) {
+        nextElementsInFrame.delete(element);
+      }
+    } else if (element.groupIds.length > 0) {
+      for (const id of element.groupIds) {
+        groupsToKeep.add(id);
+      }
+    }
+  }
+  for (const element of elementsNotCompletelyInFrame) {
+    if (element.groupIds.length > 0) {
+      let shouldRemoveElement = true;
+      for (const id of element.groupIds) {
+        if (groupsToKeep.has(id)) {
+          shouldRemoveElement = false;
+        }
+      }
+      if (shouldRemoveElement) {
+        nextElementsInFrame.delete(element);
+      }
+    }
+  }
+  const individualElementsCompletelyInFrame = Array.from(
+    elementsCompletelyInFrame
+  ).filter((element) => element.groupIds.length === 0);
+  for (const element of individualElementsCompletelyInFrame) {
+    nextElementsInFrame.add(element);
+  }
+  const newGroupElementsCompletelyInFrame = Array.from(
+    elementsCompletelyInFrame
+  ).filter((element) => element.groupIds.length > 0);
+  const groupIds = selectGroupsFromGivenElements(
+    newGroupElementsCompletelyInFrame,
+    appState
+  );
+  for (const [id, isSelected] of Object.entries(groupIds)) {
+    if (isSelected) {
+      const elementsInGroup = getElementsInGroup(allElements, id);
+      if (elementsAreInFrameBounds(elementsInGroup, frame, elementsMap)) {
+        for (const element of elementsInGroup) {
+          nextElementsInFrame.add(element);
+        }
+      }
+    }
+  }
+  return [...nextElementsInFrame].filter((element) => {
+    return !(isTextElement(element) && element.containerId);
+  });
+};
+var getElementsInNewFrame = (elements, frame, elementsMap) => {
+  return omitPartialGroups(
+    omitGroupsContainingFrameLikes(
+      elements,
+      getElementsCompletelyInFrame(elements, frame, elementsMap)
+    ),
+    frame,
+    elementsMap
+  );
+};
+var omitPartialGroups = (elements, frame, allElementsMap) => {
+  const elementsToReturn = [];
+  const checkedGroups = /* @__PURE__ */ new Map();
+  for (const element of elements) {
+    let shouldOmit = false;
+    if (element.groupIds.length > 0) {
+      if (element.groupIds.some((gid) => checkedGroups.get(gid))) {
+        shouldOmit = true;
+      } else {
+        const allElementsInGroup = new Set(
+          element.groupIds.flatMap(
+            (gid) => getElementsInGroup(allElementsMap, gid)
+          )
+        );
+        shouldOmit = !elementsAreInFrameBounds(
+          Array.from(allElementsInGroup),
+          frame,
+          allElementsMap
+        );
+      }
+      element.groupIds.forEach((gid) => {
+        checkedGroups.set(gid, shouldOmit);
+      });
+    }
+    if (!shouldOmit) {
+      elementsToReturn.push(element);
+    }
+  }
+  return elementsToReturn;
+};
+var getContainingFrame = (element, elementsMap) => {
+  if (!element.frameId) {
+    return null;
+  }
+  return elementsMap.get(element.frameId) || null;
+};
+var filterElementsEligibleAsFrameChildren = (elements, frame) => {
+  const otherFrames = /* @__PURE__ */ new Set();
+  const elementsMap = arrayToMap(elements);
+  elements = omitGroupsContainingFrameLikes(elements);
+  for (const element of elements) {
+    if (isFrameLikeElement(element) && element.id !== frame.id) {
+      otherFrames.add(element.id);
+    }
+  }
+  const processedGroups = /* @__PURE__ */ new Set();
+  const eligibleElements = [];
+  for (const element of elements) {
+    if (isFrameLikeElement(element) || element.frameId && otherFrames.has(element.frameId)) {
+      continue;
+    }
+    if (element.groupIds.length) {
+      const shallowestGroupId = element.groupIds.at(-1);
+      if (!processedGroups.has(shallowestGroupId)) {
+        processedGroups.add(shallowestGroupId);
+        const groupElements = getElementsInGroup(elements, shallowestGroupId);
+        if (groupElements.some(
+          (el) => elementOverlapsWithFrame(el, frame, elementsMap)
+        )) {
+          for (const child of groupElements) {
+            eligibleElements.push(child);
+          }
+        }
+      }
+    } else {
+      const overlaps = elementOverlapsWithFrame(element, frame, elementsMap);
+      if (overlaps) {
+        eligibleElements.push(element);
+      }
+    }
+  }
+  return eligibleElements;
+};
+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;
+    }
+  }
+  return null;
+};
+var addElementsToFrame = (allElements, elementsToAdd, frame) => {
+  const elementsMap = arrayToMap(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) {
+      otherFrames.add(element.id);
+    }
+  }
+  for (const element of omitGroupsContainingFrameLikes(
+    allElements,
+    elementsToAdd
+  )) {
+    if (isFrameLikeElement(element) || element.frameId && otherFrames.has(element.frameId)) {
+      continue;
+    }
+    if (element.frameId && element.frameId !== frame.id) {
+      continue;
+    }
+    finalElementsToAdd.add(element);
+    const boundTextElement = getBoundTextElement(element, elementsMap);
+    if (boundTextElement && !finalElementsToAdd.has(boundTextElement)) {
+      finalElementsToAdd.add(boundTextElement);
+    }
+  }
+  for (const element of finalElementsToAdd) {
+    if (element.frameId !== frame.id) {
+      mutateElement(element, elementsMap, {
+        frameId: frame.id
+      });
+    }
+  }
+  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, arrayToMap([...finalElementsToAdd]));
+  return Array.isArray(allElements) ? reorderedElements : new Map(reorderedElements.map((element) => [element.id, element]));
+};
+var removeElementsFromFrame = (elementsToRemove, elementsMap) => {
+  const _elementsToRemove = /* @__PURE__ */ new Map();
+  const toRemoveElementsByFrame = /* @__PURE__ */ new Map();
+  for (const element of elementsToRemove) {
+    if (element.frameId) {
+      _elementsToRemove.set(element.id, element);
+      const arr = toRemoveElementsByFrame.get(element.frameId) || [];
+      arr.push(element);
+      const boundTextElement = getBoundTextElement(element, elementsMap);
+      if (boundTextElement) {
+        _elementsToRemove.set(boundTextElement.id, boundTextElement);
+        arr.push(boundTextElement);
+      }
+      toRemoveElementsByFrame.set(element.frameId, arr);
+    }
+  }
+  for (const [, element] of _elementsToRemove) {
+    mutateElement(element, elementsMap, {
+      frameId: null
+    });
+  }
+};
+var removeAllElementsFromFrame = (allElements, frame) => {
+  const elementsInFrame = getFrameChildren(allElements, frame.id);
+  removeElementsFromFrame(elementsInFrame, arrayToMap(allElements));
+  return allElements;
+};
+var replaceAllElementsInFrame = (allElements, nextElementsInFrame, frame) => {
+  return addElementsToFrame(
+    removeAllElementsFromFrame(allElements, frame),
+    nextElementsInFrame,
+    frame
+  ).slice();
+};
+var updateFrameMembershipOfSelectedElements = (allElements, appState, app) => {
+  const selectedElements = app.scene.getSelectedElements({
+    selectedElementIds: appState.selectedElementIds,
+    // supplying elements explicitly in case we're passed non-state elements
+    elements: allElements
+  });
+  const elementsToFilter = new Set(selectedElements);
+  if (appState.editingGroupId) {
+    for (const element of selectedElements) {
+      if (element.groupIds.length === 0) {
+        elementsToFilter.add(element);
+      } else {
+        element.groupIds.flatMap((gid) => getElementsInGroup(allElements, gid)).forEach((element2) => elementsToFilter.add(element2));
+      }
+    }
+  }
+  const elementsToRemove = /* @__PURE__ */ new Set();
+  const elementsMap = arrayToMap(allElements);
+  elementsToFilter.forEach((element) => {
+    if (element.frameId && !isFrameLikeElement(element) && !isElementInFrame(element, elementsMap, appState)) {
+      elementsToRemove.add(element);
+    }
+  });
+  if (elementsToRemove.size > 0) {
+    removeElementsFromFrame(elementsToRemove, elementsMap);
+  }
+  return allElements;
+};
+var omitGroupsContainingFrameLikes = (allElements, selectedElements) => {
+  const uniqueGroupIds = /* @__PURE__ */ new Set();
+  const elements = selectedElements || allElements;
+  for (const el of elements.values()) {
+    const topMostGroupId = el.groupIds[el.groupIds.length - 1];
+    if (topMostGroupId) {
+      uniqueGroupIds.add(topMostGroupId);
+    }
+  }
+  const rejectedGroupIds = /* @__PURE__ */ new Set();
+  for (const groupId of uniqueGroupIds) {
+    if (getElementsInGroup(allElements, groupId).some(
+      (el) => isFrameLikeElement(el)
+    )) {
+      rejectedGroupIds.add(groupId);
+    }
+  }
+  const ret = [];
+  for (const element of elements.values()) {
+    if (!rejectedGroupIds.has(element.groupIds[element.groupIds.length - 1])) {
+      ret.push(element);
+    }
+  }
+  return ret;
+};
+var getTargetFrame = (element, elementsMap, appState) => {
+  const _element = isTextElement(element) ? getContainerElement(element, elementsMap) || element : element;
+  if (_element.frameId && appState.selectedElementIds[_element.id] && appState.selectedElementIds[_element.frameId]) {
+    return getContainingFrame(_element, elementsMap);
+  }
+  return appState.selectedElementIds[_element.id] && appState.selectedElementsAreBeingDragged ? appState.frameToHighlight : getContainingFrame(_element, elementsMap);
+};
+var isElementInFrame = (element, allElementsMap, appState, opts) => {
+  const frame = opts?.targetFrame ?? getTargetFrame(element, allElementsMap, appState);
+  if (!frame) {
+    return false;
+  }
+  const _element = isTextElement(element) ? getContainerElement(element, allElementsMap) || element : element;
+  const setGroupsInFrame = (isInFrame) => {
+    if (opts?.checkedGroups) {
+      _element.groupIds.forEach((groupId) => {
+        opts.checkedGroups?.set(groupId, isInFrame);
+      });
+    }
+  };
+  if (
+    // if the element is not selected, or it is selected but not being dragged,
+    // frame membership won't update, so return true
+    !appState.selectedElementIds[_element.id] || !appState.selectedElementsAreBeingDragged || // if both frame and element are selected, won't update membership, so return true
+    appState.selectedElementIds[_element.id] && appState.selectedElementIds[frame.id]
+  ) {
+    return true;
+  }
+  if (_element.groupIds.length === 0) {
+    return elementOverlapsWithFrame(_element, frame, allElementsMap);
+  }
+  for (const gid of _element.groupIds) {
+    if (opts?.checkedGroups?.has(gid)) {
+      return opts.checkedGroups.get(gid);
+    }
+  }
+  const allElementsInGroup = new Set(
+    _element.groupIds.filter((gid) => {
+      if (opts?.checkedGroups) {
+        return !opts.checkedGroups.has(gid);
+      }
+      return true;
+    }).flatMap((gid) => getElementsInGroup(allElementsMap, gid))
+  );
+  if (appState.editingGroupId && appState.selectedElementsAreBeingDragged) {
+    const selectedElements = new Set(
+      getSelectedElements(allElementsMap, appState)
+    );
+    const editingGroupOverlapsFrame = appState.frameToHighlight !== null;
+    if (editingGroupOverlapsFrame) {
+      return true;
+    }
+    selectedElements.forEach((selectedElement) => {
+      allElementsInGroup.delete(selectedElement);
+    });
+  }
+  for (const elementInGroup of allElementsInGroup) {
+    if (isFrameLikeElement(elementInGroup)) {
+      setGroupsInFrame(false);
+      return false;
+    }
+  }
+  for (const elementInGroup of allElementsInGroup) {
+    if (elementOverlapsWithFrame(elementInGroup, frame, allElementsMap)) {
+      setGroupsInFrame(true);
+      return true;
+    }
+  }
+  return false;
 };
-var getElementsOverlappingFrame = (elements, frame) => {
-  return elementsOverlappingBBox({
-    elements,
-    bounds: frame,
-    type: "overlap"
-  }).filter((el) => !el.frameId || el.frameId === frame.id);
+var shouldApplyFrameClip = (element, frame, appState, elementsMap, checkedGroups) => {
+  if (!appState.frameRendering || !appState.frameRendering.clip) {
+    return false;
+  }
+  const shouldClipElementItself = isElementIntersectingFrame(element, frame, elementsMap) || isElementContainingFrame(element, frame, elementsMap);
+  if (shouldClipElementItself) {
+    for (const groupId of element.groupIds) {
+      checkedGroups?.set(groupId, true);
+    }
+    return true;
+  }
+  if (!shouldClipElementItself && element.groupIds.length > 0 && !elementsAreInFrameBounds([element], frame, elementsMap)) {
+    let shouldClip = false;
+    if (!appState.selectedElementsAreBeingDragged) {
+      shouldClip = element.frameId === frame.id;
+      for (const groupId of element.groupIds) {
+        checkedGroups?.set(groupId, shouldClip);
+      }
+    } else {
+      shouldClip = isElementInFrame(element, elementsMap, appState, {
+        targetFrame: frame,
+        checkedGroups
+      });
+    }
+    for (const groupId of element.groupIds) {
+      checkedGroups?.set(groupId, shouldClip);
+    }
+    return shouldClip;
+  }
+  return false;
+};
+var DEFAULT_FRAME_NAME = "Frame";
+var DEFAULT_AI_FRAME_NAME = "AI Frame";
+var getDefaultFrameName = (element) => {
+  return isFrameElement(element) ? DEFAULT_FRAME_NAME : DEFAULT_AI_FRAME_NAME;
+};
+var getFrameLikeTitle = (element) => {
+  return element.name === null ? getDefaultFrameName(element) : element.name;
+};
+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 = arrayToMap(selectedElements);
@@ -12367,15 +13053,6 @@ function getFreedrawOutlineAsSegments(element, points, elementsMap) {
   );
 }
 
-// ../element/src/comparisons.ts
-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";
-
 // ../element/src/shape.ts
 var _ShapeCache = class _ShapeCache {
 };
@@ -12552,7 +13229,6 @@ var generateArrowheadOutlineCircle = (generator, options, strokeColor, arrowhead
   return [generator.circle(x, y, diameter * diameterScale, circleOptions)];
 };
 var getArrowheadShapes = (element, shape, position, arrowhead, generator, options, canvasBackgroundColor, isDarkMode) => {
-  canvasBackgroundColor = canvasBackgroundColor || "transparent";
   if (arrowhead === null) {
     return [];
   }
@@ -12729,7 +13405,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,
@@ -12738,20 +13414,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": {
@@ -13633,7 +14296,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;
@@ -13644,7 +14307,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);
@@ -14028,6 +14691,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;
@@ -14036,8 +14700,14 @@ var doBoundsIntersect = (bounds1, bounds2) => {
   const [minX2, minY2, maxX2, maxY2] = bounds2;
   return minX1 < maxX2 && maxX1 > minX2 && minY1 < maxY2 && maxY1 > minY2;
 };
+var boundsContainBounds = (outerBounds, innerBounds) => [
+  pointFrom(innerBounds[0], innerBounds[1]),
+  pointFrom(innerBounds[0], innerBounds[3]),
+  pointFrom(innerBounds[2], innerBounds[1]),
+  pointFrom(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] = getElementAbsoluteCoords(element, elementsMap);
     const [x3, y3] = pointFrom((x1 + x2) / 2, (y1 + y2) / 2);
     return pointFrom(x3 + xOffset, y3 + yOffset);
@@ -14218,78 +14888,60 @@ var calculateTranslation = (group, selectionBoundingBox, { axis, position }) =>
 };
 
 // ../element/src/sortElements.ts
-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;
+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 = arrayToMap(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!"
@@ -14299,7 +14951,7 @@ var normalizeBoundElementsOrder = (elements) => {
   return [...sortedElements];
 };
 var normalizeElementOrder = (elements) => {
-  return normalizeBoundElementsOrder(normalizeGroupElementOrder(elements));
+  return normalizeBoundElementsOrder(defragmentGroups(elements));
 };
 
 // ../element/src/duplicate.ts
@@ -14341,6 +14993,7 @@ var duplicateElements = (opts) => {
   const duplicateElementsMap = /* @__PURE__ */ new Map();
   const elementsMap = arrayToMap(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));
@@ -14400,7 +15053,7 @@ var duplicateElements = (opts) => {
     const groupId = getSelectedGroupForElement(appState, element);
     if (groupId) {
       const groupElements = getElementsInGroup(elements, groupId).flatMap(
-        (element2) => isFrameLikeElement(element2) ? [...getFrameChildren(elements, element2.id), element2] : [element2]
+        (element2) => isFrameLikeElement(element2) && !preserveFrameChildrenOrder ? [...getFrameChildren(elements, element2.id), element2] : [element2]
       );
       const targetIndex = findLastIndex(elementsWithDuplicates, (el) => {
         return el.groupIds?.includes(groupId);
@@ -14408,11 +15061,18 @@ var duplicateElements = (opts) => {
       insertBeforeOrAfterIndex(targetIndex, copyElements(groupElements));
       continue;
     }
-    if (element.frameId && frameIdsToDuplicate.has(element.frameId)) {
+    if (!preserveFrameChildrenOrder && element.frameId && frameIdsToDuplicate.has(element.frameId)) {
       continue;
     }
     if (isFrameLikeElement(element)) {
       const frameId = element.id;
+      if (preserveFrameChildrenOrder) {
+        insertBeforeOrAfterIndex(
+          findLastIndex(elementsWithDuplicates, (el) => el.id === frameId),
+          copyElements(element)
+        );
+        continue;
+      }
       const frameChildren = getFrameChildren(elements, frameId);
       const targetIndex = findLastIndex(elementsWithDuplicates, (el) => {
         return el.frameId === frameId || el.id === frameId;
@@ -14839,602 +15499,359 @@ var StoreDelta = class _StoreDelta {
   /**
    * Create a new instance of `StoreDelta`.
    */
-  static create(elements, appState, opts = {
-    id: randomId()
-  }) {
-    return new this(opts.id, elements, appState);
-  }
-  /**
-   * Calculate the delta between the previous and next snapshot.
-   */
-  static calculate(prevSnapshot, nextSnapshot) {
-    const elementsDelta = nextSnapshot.metadata.didElementsChange ? ElementsDelta.calculate(prevSnapshot.elements, nextSnapshot.elements) : ElementsDelta.empty();
-    const appStateDelta = nextSnapshot.metadata.didAppStateChange ? AppStateDelta.calculate(prevSnapshot.appState, nextSnapshot.appState) : AppStateDelta.empty();
-    return this.create(elementsDelta, appStateDelta);
-  }
-  /**
-   * Restore a store delta instance from a DTO.
-   */
-  static restore(storeDeltaDTO) {
-    const { id, elements, appState } = storeDeltaDTO;
-    return new this(
-      id,
-      ElementsDelta.restore(elements),
-      AppStateDelta.restore(appState)
-    );
-  }
-  /**
-   * Parse and load the delta from the remote payload.
-   */
-  static load({
-    id,
-    elements: { added, removed, updated },
-    appState: { delta: appStateDelta }
-  }) {
-    const elements = ElementsDelta.create(added, removed, updated);
-    const appState = AppStateDelta.create(appStateDelta);
-    return new this(id, elements, appState);
-  }
-  /**
-   * Squash the passed deltas into the aggregated delta instance.
-   */
-  static squash(...deltas) {
-    const aggregatedDelta = _StoreDelta.empty();
-    for (const delta of deltas) {
-      aggregatedDelta.elements.squash(delta.elements);
-      aggregatedDelta.appState.squash(delta.appState);
-    }
-    return aggregatedDelta;
-  }
-  /**
-   * Inverse store delta, creates new instance of `StoreDelta`.
-   */
-  static inverse(delta) {
-    return this.create(delta.elements.inverse(), delta.appState.inverse());
-  }
-  /**
-   * Apply the delta to the passed elements and appState, does not modify the snapshot.
-   */
-  static applyTo(delta, elements, appState, options) {
-    const [nextElements, elementsContainVisibleChange] = delta.elements.applyTo(
-      elements,
-      StoreSnapshot.empty().elements,
-      options
-    );
-    const [nextAppState, appStateContainsVisibleChange] = delta.appState.applyTo(appState, nextElements);
-    const appliedVisibleChanges = elementsContainVisibleChange || appStateContainsVisibleChange;
-    return [nextElements, nextAppState, appliedVisibleChanges];
-  }
-  /**
-   * Apply latest (remote) changes to the delta, creates new instance of `StoreDelta`.
-   */
-  static applyLatestChanges(delta, prevElements, nextElements, modifierOptions) {
-    return this.create(
-      delta.elements.applyLatestChanges(
-        prevElements,
-        nextElements,
-        modifierOptions
-      ),
-      delta.appState,
-      {
-        id: delta.id
-      }
-    );
-  }
-  static empty() {
-    return _StoreDelta.create(ElementsDelta.empty(), AppStateDelta.empty());
-  }
-  isEmpty() {
-    return this.elements.isEmpty() && this.appState.isEmpty();
-  }
-};
-var StoreSnapshot = class _StoreSnapshot {
-  constructor(elements, appState, metadata = {
-    didElementsChange: false,
-    didAppStateChange: false,
-    isEmpty: false
-  }) {
-    this.elements = elements;
-    this.appState = appState;
-    this.metadata = metadata;
-    __publicField(this, "_lastChangedElementsHash", 0);
-    __publicField(this, "_lastChangedAppStateHash", 0);
-  }
-  static create(elements, appState, metadata = {
-    didElementsChange: false,
-    didAppStateChange: false
-  }) {
-    return new _StoreSnapshot(
-      elements,
-      isObservedAppState(appState) ? appState : getObservedAppState(appState),
-      metadata
-    );
-  }
-  static empty() {
-    return new _StoreSnapshot(
-      /* @__PURE__ */ new Map(),
-      getDefaultObservedAppState(),
-      {
-        didElementsChange: false,
-        didAppStateChange: false,
-        isEmpty: true
-      }
-    );
-  }
-  getChangedElements(prevSnapshot) {
-    const changedElements = {};
-    for (const prevElement of toIterable(prevSnapshot.elements)) {
-      const nextElement = this.elements.get(prevElement.id);
-      if (!nextElement) {
-        changedElements[prevElement.id] = newElementWith(prevElement, {
-          isDeleted: true
-        });
-      }
-    }
-    for (const nextElement of toIterable(this.elements)) {
-      if (prevSnapshot.elements.get(nextElement.id) !== nextElement) {
-        changedElements[nextElement.id] = nextElement;
-      }
-    }
-    return changedElements;
-  }
-  getChangedAppState(prevSnapshot) {
-    return Delta.getRightDifferences(
-      prevSnapshot.appState,
-      this.appState
-    ).reduce(
-      (acc, key) => Object.assign(acc, {
-        [key]: this.appState[key]
-      }),
-      {}
-    );
-  }
-  isEmpty() {
-    return this.metadata.isEmpty;
+  static create(elements, appState, opts = {
+    id: randomId()
+  }) {
+    return new this(opts.id, elements, appState);
   }
   /**
-   * Apply the change and return a new snapshot instance.
+   * Calculate the delta between the previous and next snapshot.
    */
-  applyChange(change) {
-    const nextElements = new Map(this.elements);
-    for (const [id, changedElement] of Object.entries(change.elements)) {
-      nextElements.set(id, changedElement);
-    }
-    const nextAppState = getObservedAppState({
-      ...this.appState,
-      ...change.appState
-    });
-    return _StoreSnapshot.create(nextElements, nextAppState, {
-      // by default we assume that change is different from what we have in the snapshot
-      // so that we trigger the delta calculation and if it isn't different, delta will be empty
-      didElementsChange: Object.keys(change.elements).length > 0,
-      didAppStateChange: Object.keys(change.appState).length > 0
-    });
+  static calculate(prevSnapshot, nextSnapshot) {
+    const elementsDelta = nextSnapshot.metadata.didElementsChange ? ElementsDelta.calculate(prevSnapshot.elements, nextSnapshot.elements) : ElementsDelta.empty();
+    const appStateDelta = nextSnapshot.metadata.didAppStateChange ? AppStateDelta.calculate(prevSnapshot.appState, nextSnapshot.appState) : AppStateDelta.empty();
+    return this.create(elementsDelta, appStateDelta);
   }
   /**
-   * Efficiently clone the existing snapshot, only if we detected changes.
-   *
-   * @returns same instance if there are no changes detected, new instance otherwise.
+   * Restore a store delta instance from a DTO.
    */
-  maybeClone(action, elements, appState) {
-    const options = {
-      shouldCompareHashes: false
-    };
-    if (action === CaptureUpdateAction.EVENTUALLY) {
-      options.shouldCompareHashes = true;
-    }
-    const nextElementsSnapshot = this.maybeCreateElementsSnapshot(
-      elements,
-      options
-    );
-    const nextAppStateSnapshot = this.maybeCreateAppStateSnapshot(
-      appState,
-      options
-    );
-    let didElementsChange = false;
-    let didAppStateChange = false;
-    if (this.elements !== nextElementsSnapshot) {
-      didElementsChange = true;
-    }
-    if (this.appState !== nextAppStateSnapshot) {
-      didAppStateChange = true;
-    }
-    if (!didElementsChange && !didAppStateChange) {
-      return this;
-    }
-    const snapshot = new _StoreSnapshot(
-      nextElementsSnapshot,
-      nextAppStateSnapshot,
-      {
-        didElementsChange,
-        didAppStateChange
-      }
+  static restore(storeDeltaDTO) {
+    const { id, elements, appState } = storeDeltaDTO;
+    return new this(
+      id,
+      ElementsDelta.restore(elements),
+      AppStateDelta.restore(appState)
     );
-    return snapshot;
   }
-  maybeCreateAppStateSnapshot(appState, options = {
-    shouldCompareHashes: false
+  /**
+   * Parse and load the delta from the remote payload.
+   */
+  static load({
+    id,
+    elements: { added, removed, updated },
+    appState: { delta: appStateDelta }
   }) {
-    if (!appState) {
-      return this.appState;
-    }
-    const nextAppStateSnapshot = !isObservedAppState(appState) ? getObservedAppState(appState) : appState;
-    const didAppStateChange = this.detectChangedAppState(
-      nextAppStateSnapshot,
-      options
-    );
-    if (!didAppStateChange) {
-      return this.appState;
-    }
-    return nextAppStateSnapshot;
+    const elements = ElementsDelta.create(added, removed, updated);
+    const appState = AppStateDelta.create(appStateDelta);
+    return new this(id, elements, appState);
   }
-  maybeCreateElementsSnapshot(elements, options = {
-    shouldCompareHashes: false
-  }) {
-    if (!elements) {
-      return this.elements;
-    }
-    const changedElements = this.detectChangedElements(elements, options);
-    if (!changedElements?.size) {
-      return this.elements;
+  /**
+   * Squash the passed deltas into the aggregated delta instance.
+   */
+  static squash(...deltas) {
+    const aggregatedDelta = _StoreDelta.empty();
+    for (const delta of deltas) {
+      aggregatedDelta.elements.squash(delta.elements);
+      aggregatedDelta.appState.squash(delta.appState);
     }
-    const elementsSnapshot = this.createElementsSnapshot(changedElements);
-    return elementsSnapshot;
+    return aggregatedDelta;
   }
-  detectChangedAppState(nextObservedAppState, options = {
-    shouldCompareHashes: false
-  }) {
-    if (this.appState === nextObservedAppState) {
-      return;
-    }
-    const didAppStateChange = Delta.isRightDifferent(
-      this.appState,
-      nextObservedAppState
-    );
-    if (!didAppStateChange) {
-      return;
-    }
-    const changedAppStateHash = hashString(
-      JSON.stringify(nextObservedAppState)
-    );
-    if (options.shouldCompareHashes && this._lastChangedAppStateHash === changedAppStateHash) {
-      return;
-    }
-    this._lastChangedAppStateHash = changedAppStateHash;
-    return didAppStateChange;
+  /**
+   * Inverse store delta, creates new instance of `StoreDelta`.
+   */
+  static inverse(delta) {
+    return this.create(delta.elements.inverse(), delta.appState.inverse());
   }
   /**
-   * Detect if there are any changed elements.
+   * Apply the delta to the passed elements and appState, does not modify the snapshot.
    */
-  detectChangedElements(nextElements, options = {
-    shouldCompareHashes: false
-  }) {
-    if (this.elements === nextElements) {
-      return;
-    }
-    const changedElements = /* @__PURE__ */ new Map();
-    for (const prevElement of toIterable(this.elements)) {
-      const nextElement = nextElements.get(prevElement.id);
-      if (!nextElement) {
-        changedElements.set(
-          prevElement.id,
-          newElementWith(prevElement, { isDeleted: true })
-        );
-      }
-    }
-    for (const nextElement of toIterable(nextElements)) {
-      const prevElement = this.elements.get(nextElement.id);
-      if (!prevElement || // element was added
-      prevElement.version < nextElement.version) {
-        if (isImageElement(nextElement) && !isInitializedImageElement(nextElement)) {
-          continue;
-        }
-        changedElements.set(nextElement.id, nextElement);
-      }
-    }
-    if (!changedElements.size) {
-      return;
-    }
-    const changedElementsHash = hashElementsVersion(changedElements);
-    if (options.shouldCompareHashes && this._lastChangedElementsHash === changedElementsHash) {
-      return;
-    }
-    this._lastChangedElementsHash = changedElementsHash;
-    return changedElements;
+  static applyTo(delta, elements, appState, options) {
+    const [nextElements, elementsContainVisibleChange] = delta.elements.applyTo(
+      elements,
+      StoreSnapshot.empty().elements,
+      options
+    );
+    const [nextAppState, appStateContainsVisibleChange] = delta.appState.applyTo(appState, nextElements);
+    const appliedVisibleChanges = elementsContainVisibleChange || appStateContainsVisibleChange;
+    return [nextElements, nextAppState, appliedVisibleChanges];
   }
   /**
-   * Perform structural clone, deep cloning only elements that changed.
+   * Apply latest (remote) changes to the delta, creates new instance of `StoreDelta`.
    */
-  createElementsSnapshot(changedElements) {
-    const clonedElements = /* @__PURE__ */ new Map();
-    for (const prevElement of toIterable(this.elements)) {
-      clonedElements.set(prevElement.id, prevElement);
-    }
-    for (const changedElement of toIterable(changedElements)) {
-      clonedElements.set(changedElement.id, deepCopyElement(changedElement));
-    }
-    return clonedElements;
+  static applyLatestChanges(delta, prevElements, nextElements, modifierOptions) {
+    return this.create(
+      delta.elements.applyLatestChanges(
+        prevElements,
+        nextElements,
+        modifierOptions
+      ),
+      delta.appState,
+      {
+        id: delta.id
+      }
+    );
   }
-};
-var hiddenObservedAppStateProp = "__observedAppState";
-var getDefaultObservedAppState = () => {
-  return {
-    name: null,
-    editingGroupId: null,
-    viewBackgroundColor: COLOR_PALETTE.white,
-    selectedElementIds: {},
-    selectedGroupIds: {},
-    selectedLinearElement: null,
-    croppingElementId: null,
-    activeLockedId: null,
-    lockedMultiSelections: {}
-  };
-};
-var getObservedAppState = (appState) => {
-  const observedAppState = {
-    name: appState.name,
-    editingGroupId: appState.editingGroupId,
-    viewBackgroundColor: appState.viewBackgroundColor,
-    selectedElementIds: appState.selectedElementIds,
-    selectedGroupIds: appState.selectedGroupIds,
-    croppingElementId: appState.croppingElementId,
-    activeLockedId: appState.activeLockedId,
-    lockedMultiSelections: appState.lockedMultiSelections,
-    selectedLinearElement: appState.selectedLinearElement ? {
-      elementId: appState.selectedLinearElement.elementId,
-      isEditing: !!appState.selectedLinearElement.isEditing
-    } : null
-  };
-  Reflect.defineProperty(observedAppState, hiddenObservedAppStateProp, {
-    value: true,
-    enumerable: false
-  });
-  return observedAppState;
-};
-var isObservedAppState = (appState) => !!Reflect.get(appState, hiddenObservedAppStateProp);
-
-// ../element/src/fractionalIndex.ts
-import { generateNKeysBetween } from "fractional-indexing";
-var InvalidFractionalIndexError = class extends Error {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "code", "ELEMENT_HAS_INVALID_INDEX");
+  static empty() {
+    return _StoreDelta.create(ElementsDelta.empty(), AppStateDelta.empty());
+  }
+  isEmpty() {
+    return this.elements.isEmpty() && this.appState.isEmpty();
   }
 };
-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]
-        )}"`
-      );
+var StoreSnapshot = class _StoreSnapshot {
+  constructor(elements, appState, metadata = {
+    didElementsChange: false,
+    didAppStateChange: false,
+    isEmpty: false
+  }) {
+    this.elements = elements;
+    this.appState = appState;
+    this.metadata = metadata;
+    __publicField(this, "_lastChangedElementsHash", 0);
+    __publicField(this, "_lastChangedAppStateHash", 0);
+  }
+  static create(elements, appState, metadata = {
+    didElementsChange: false,
+    didAppStateChange: false
+  }) {
+    return new _StoreSnapshot(
+      elements,
+      isObservedAppState(appState) ? appState : getObservedAppState(appState),
+      metadata
+    );
+  }
+  static empty() {
+    return new _StoreSnapshot(
+      /* @__PURE__ */ new Map(),
+      getDefaultObservedAppState(),
+      {
+        didElementsChange: false,
+        didAppStateChange: false,
+        isEmpty: true
+      }
+    );
+  }
+  getChangedElements(prevSnapshot) {
+    const changedElements = {};
+    for (const prevElement of toIterable(prevSnapshot.elements)) {
+      const nextElement = this.elements.get(prevElement.id);
+      if (!nextElement) {
+        changedElements[prevElement.id] = newElementWith(prevElement, {
+          isDeleted: true
+        });
+      }
     }
-    if (includeBoundTextValidation && hasBoundTextElement(elements[i])) {
-      const container = elements[i];
-      const text = getBoundTextElement(container, arrayToMap(elements));
-      if (text && text.index <= container.index) {
-        errorMessages.push(
-          `Fractional indices invariant for bound elements has been compromised: "${stringifyElement(
-            text
-          )}", "${stringifyElement(container)}"`
-        );
+    for (const nextElement of toIterable(this.elements)) {
+      if (prevSnapshot.elements.get(nextElement.id) !== nextElement) {
+        changedElements[nextElement.id] = nextElement;
       }
     }
+    return changedElements;
   }
-  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))
-      );
+  getChangedAppState(prevSnapshot) {
+    return Delta.getRightDifferences(
+      prevSnapshot.appState,
+      this.appState
+    ).reduce(
+      (acc, key) => Object.assign(acc, {
+        [key]: this.appState[key]
+      }),
+      {}
+    );
+  }
+  isEmpty() {
+    return this.metadata.isEmpty;
+  }
+  /**
+   * Apply the change and return a new snapshot instance.
+   */
+  applyChange(change) {
+    const nextElements = new Map(this.elements);
+    for (const [id, changedElement] of Object.entries(change.elements)) {
+      nextElements.set(id, changedElement);
     }
-    if (!ignoreLogs) {
-      console.error(
-        errorMessages.join("\n\n"),
-        error.stack,
-        elements.map((x) => stringifyElement(x)),
-        ...additionalContext
-      );
+    const nextAppState = getObservedAppState({
+      ...this.appState,
+      ...change.appState
+    });
+    return _StoreSnapshot.create(nextElements, nextAppState, {
+      // by default we assume that change is different from what we have in the snapshot
+      // so that we trigger the delta calculation and if it isn't different, delta will be empty
+      didElementsChange: Object.keys(change.elements).length > 0,
+      didAppStateChange: Object.keys(change.appState).length > 0
+    });
+  }
+  /**
+   * Efficiently clone the existing snapshot, only if we detected changes.
+   *
+   * @returns same instance if there are no changes detected, new instance otherwise.
+   */
+  maybeClone(action, elements, appState) {
+    const options = {
+      shouldCompareHashes: false
+    };
+    if (action === CaptureUpdateAction.EVENTUALLY) {
+      options.shouldCompareHashes = true;
     }
-    if (shouldThrow) {
-      throw error;
+    const nextElementsSnapshot = this.maybeCreateElementsSnapshot(
+      elements,
+      options
+    );
+    const nextAppStateSnapshot = this.maybeCreateAppStateSnapshot(
+      appState,
+      options
+    );
+    let didElementsChange = false;
+    let didAppStateChange = false;
+    if (this.elements !== nextElementsSnapshot) {
+      didElementsChange = true;
     }
-  }
-};
-var orderByFractionalIndex = (elements) => {
-  return elements.sort((a, b) => {
-    if (isOrderedElement(a) && isOrderedElement(b)) {
-      if (a.index < b.index) {
-        return -1;
-      } else if (a.index > b.index) {
-        return 1;
-      }
-      return a.id < b.id ? -1 : 1;
+    if (this.appState !== nextAppStateSnapshot) {
+      didAppStateChange = true;
     }
-    return 1;
-  });
-};
-var syncMovedIndices = (elements, movedElements) => {
-  try {
-    const elementsMap = arrayToMap(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
+    if (!didElementsChange && !didAppStateChange) {
+      return this;
+    }
+    const snapshot = new _StoreSnapshot(
+      nextElementsSnapshot,
+      nextAppStateSnapshot,
       {
-        includeBoundTextValidation: false,
-        shouldThrow: true,
-        ignoreLogs: true
+        didElementsChange,
+        didAppStateChange
       }
     );
-    for (const [element, { index }] of elementsUpdates) {
-      mutateElement(element, elementsMap, { index });
-    }
-  } catch (e) {
-    syncInvalidIndices(elements);
-  }
-  return elements;
-};
-var syncInvalidIndices = (elements) => {
-  const elementsMap = arrayToMap(elements);
-  const indicesGroups = getInvalidIndicesGroups(elements);
-  const elementsUpdates = generateIndices(elements, indicesGroups);
-  for (const [element, { index }] of elementsUpdates) {
-    mutateElement(element, elementsMap, { index });
+    return snapshot;
   }
-  return elements;
-};
-var syncInvalidIndicesImmutable = (elements) => {
-  const syncedElements = arrayToMap(elements);
-  const indicesGroups = getInvalidIndicesGroups(elements);
-  const elementsUpdates = generateIndices(elements, indicesGroups);
-  for (const [element, { index }] of elementsUpdates) {
-    syncedElements.set(element.id, newElementWith(element, { index }));
+  maybeCreateAppStateSnapshot(appState, options = {
+    shouldCompareHashes: false
+  }) {
+    if (!appState) {
+      return this.appState;
+    }
+    const nextAppStateSnapshot = !isObservedAppState(appState) ? getObservedAppState(appState) : appState;
+    const didAppStateChange = this.detectChangedAppState(
+      nextAppStateSnapshot,
+      options
+    );
+    if (!didAppStateChange) {
+      return this.appState;
+    }
+    return nextAppStateSnapshot;
   }
-  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++;
+  maybeCreateElementsSnapshot(elements, options = {
+    shouldCompareHashes: false
+  }) {
+    if (!elements) {
+      return this.elements;
+    }
+    const changedElements = this.detectChangedElements(elements, options);
+    if (!changedElements?.size) {
+      return this.elements;
     }
+    const elementsSnapshot = this.createElementsSnapshot(changedElements);
+    return elementsSnapshot;
   }
-  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];
+  detectChangedAppState(nextObservedAppState, options = {
+    shouldCompareHashes: false
+  }) {
+    if (this.appState === nextObservedAppState) {
+      return;
     }
-    return [lowerBound2, lowerBoundIndex];
-  };
-  const getUpperBound = (index) => {
-    const upperBound2 = elements[upperBoundIndex] ? elements[upperBoundIndex].index : void 0;
-    if (upperBound2 && index < upperBoundIndex) {
-      return [upperBound2, upperBoundIndex];
+    const didAppStateChange = Delta.isRightDifferent(
+      this.appState,
+      nextObservedAppState
+    );
+    if (!didAppStateChange) {
+      return;
     }
-    let i2 = upperBoundIndex;
-    while (++i2 < elements.length) {
-      const candidate = elements[i2]?.index;
-      if (!upperBound2 && candidate || // first upperBound
-      upperBound2 && candidate && candidate > upperBound2) {
-        return [candidate, i2];
+    const changedAppStateHash = hashString(
+      JSON.stringify(nextObservedAppState)
+    );
+    if (options.shouldCompareHashes && this._lastChangedAppStateHash === changedAppStateHash) {
+      return;
+    }
+    this._lastChangedAppStateHash = changedAppStateHash;
+    return didAppStateChange;
+  }
+  /**
+   * Detect if there are any changed elements.
+   */
+  detectChangedElements(nextElements, options = {
+    shouldCompareHashes: false
+  }) {
+    if (this.elements === nextElements) {
+      return;
+    }
+    const changedElements = /* @__PURE__ */ new Map();
+    for (const prevElement of toIterable(this.elements)) {
+      const nextElement = nextElements.get(prevElement.id);
+      if (!nextElement) {
+        changedElements.set(
+          prevElement.id,
+          newElementWith(prevElement, { isDeleted: true })
+        );
       }
     }
-    return [void 0, i2];
-  };
-  let i = 0;
-  while (i < elements.length) {
-    const current = elements[i].index;
-    [lowerBound, lowerBoundIndex] = getLowerBound(i);
-    [upperBound, upperBoundIndex] = getUpperBound(i);
-    if (!isValidFractionalIndex(current, lowerBound, upperBound)) {
-      const indicesGroup = [lowerBoundIndex, i];
-      while (++i < elements.length) {
-        const current2 = elements[i].index;
-        const [nextLowerBound, nextLowerBoundIndex] = getLowerBound(i);
-        const [nextUpperBound, nextUpperBoundIndex] = getUpperBound(i);
-        if (isValidFractionalIndex(current2, nextLowerBound, nextUpperBound)) {
-          break;
+    for (const nextElement of toIterable(nextElements)) {
+      const prevElement = this.elements.get(nextElement.id);
+      if (!prevElement || // element was added
+      prevElement.version < nextElement.version) {
+        if (isImageElement(nextElement) && !isInitializedImageElement(nextElement)) {
+          continue;
         }
-        [lowerBound, lowerBoundIndex] = [nextLowerBound, nextLowerBoundIndex];
-        [upperBound, upperBoundIndex] = [nextUpperBound, nextUpperBoundIndex];
-        indicesGroup.push(i);
+        changedElements.set(nextElement.id, nextElement);
       }
-      indicesGroup.push(upperBoundIndex);
-      indicesGroups.push(indicesGroup);
-    } else {
-      i++;
     }
+    if (!changedElements.size) {
+      return;
+    }
+    const changedElementsHash = hashElementsVersion(changedElements);
+    if (options.shouldCompareHashes && this._lastChangedElementsHash === changedElementsHash) {
+      return;
+    }
+    this._lastChangedElementsHash = changedElementsHash;
+    return changedElements;
   }
-  return indicesGroups;
-};
-var isValidFractionalIndex = (index, predecessor, successor) => {
-  if (!index) {
-    return false;
-  }
-  if (predecessor && successor) {
-    return predecessor < index && index < successor;
-  }
-  if (!predecessor && successor) {
-    return index < successor;
-  }
-  if (predecessor && !successor) {
-    return predecessor < index;
-  }
-  return !!index;
-};
-var generateIndices = (elements, indicesGroups) => {
-  const elementsUpdates = /* @__PURE__ */ new Map();
-  for (const indices of indicesGroups) {
-    const lowerBoundIndex = indices.shift();
-    const upperBoundIndex = indices.pop();
-    const fractionalIndices = generateNKeysBetween(
-      elements[lowerBoundIndex]?.index,
-      elements[upperBoundIndex]?.index,
-      indices.length
-    );
-    for (let i = 0; i < indices.length; i++) {
-      const element = elements[indices[i]];
-      elementsUpdates.set(element, {
-        index: fractionalIndices[i]
-      });
+  /**
+   * Perform structural clone, deep cloning only elements that changed.
+   */
+  createElementsSnapshot(changedElements) {
+    const clonedElements = /* @__PURE__ */ new Map();
+    for (const prevElement of toIterable(this.elements)) {
+      clonedElements.set(prevElement.id, prevElement);
+    }
+    for (const changedElement of toIterable(changedElements)) {
+      clonedElements.set(changedElement.id, deepCopyElement(changedElement));
     }
+    return clonedElements;
   }
-  return elementsUpdates;
 };
-var isOrderedElement = (element) => {
-  if (element.index) {
-    return true;
-  }
-  return false;
+var hiddenObservedAppStateProp = "__observedAppState";
+var getDefaultObservedAppState = () => {
+  return {
+    name: null,
+    editingGroupId: null,
+    viewBackgroundColor: COLOR_PALETTE.white,
+    selectedElementIds: {},
+    selectedGroupIds: {},
+    selectedLinearElement: null,
+    croppingElementId: null,
+    activeLockedId: null,
+    lockedMultiSelections: {}
+  };
+};
+var getObservedAppState = (appState) => {
+  const observedAppState = {
+    name: appState.name,
+    editingGroupId: appState.editingGroupId,
+    viewBackgroundColor: appState.viewBackgroundColor,
+    selectedElementIds: appState.selectedElementIds,
+    selectedGroupIds: appState.selectedGroupIds,
+    croppingElementId: appState.croppingElementId,
+    activeLockedId: appState.activeLockedId,
+    lockedMultiSelections: appState.lockedMultiSelections,
+    selectedLinearElement: appState.selectedLinearElement ? {
+      elementId: appState.selectedLinearElement.elementId,
+      isEditing: !!appState.selectedLinearElement.isEditing
+    } : null
+  };
+  Reflect.defineProperty(observedAppState, hiddenObservedAppStateProp, {
+    value: true,
+    enumerable: false
+  });
+  return observedAppState;
 };
+var isObservedAppState = (appState) => !!Reflect.get(appState, hiddenObservedAppStateProp);
 
 // ../element/src/Scene.ts
 import throttle from "lodash.throttle";
@@ -15500,16 +15917,9 @@ var Scene = class {
      * cache-invalidation nonce at the moment.
      */
     __publicField(this, "sceneNonce");
+    /** low-level - generally use app.insertNewElement() */
     __publicField(this, "insertElement", (element) => {
-      const index = element.frameId ? this.getElementIndex(element.frameId) : this.elements.length;
-      this.insertElementAtIndex(element, index);
-    });
-    __publicField(this, "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);
     });
     __publicField(this, "getContainerElement", (element) => {
       if (!element) {
@@ -15662,24 +16072,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)
-    ];
-    syncMovedIndices(nextElements, arrayToMap([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"
@@ -21484,7 +21884,6 @@ import {
   fileSave as _fileSave,
   supported as nativeFileSystemSupported
 } from "browser-fs-access";
-var INPUT_CHANGE_INTERVAL_MS = 5e3;
 var fileOpen = async (opts) => {
   const mimeTypes = opts.extensions?.reduce((mimeTypes2, type) => {
     mimeTypes2.push(MIME_TYPES[type]);
@@ -21500,39 +21899,7 @@ var fileOpen = async (opts) => {
     description: opts.description,
     extensions,
     mimeTypes,
-    multiple: opts.multiple ?? false,
-    legacySetup: (resolve, reject, input) => {
-      const scheduleRejection = debounce(reject, INPUT_CHANGE_INTERVAL_MS);
-      const focusHandler = () => {
-        checkForFile();
-        document.addEventListener("keyup" /* KEYUP */, scheduleRejection);
-        document.addEventListener("pointerup" /* POINTER_UP */, scheduleRejection);
-        scheduleRejection();
-      };
-      const checkForFile = () => {
-        if (input.files?.length) {
-          const ret = opts.multiple ? [...input.files] : input.files[0];
-          resolve(ret);
-        }
-      };
-      requestAnimationFrame(() => {
-        window.addEventListener("focus" /* FOCUS */, focusHandler);
-      });
-      const interval = window.setInterval(() => {
-        checkForFile();
-      }, INPUT_CHANGE_INTERVAL_MS);
-      return (rejectPromise) => {
-        clearInterval(interval);
-        scheduleRejection.cancel();
-        window.removeEventListener("focus" /* FOCUS */, focusHandler);
-        document.removeEventListener("keyup" /* KEYUP */, scheduleRejection);
-        document.removeEventListener("pointerup" /* POINTER_UP */, scheduleRejection);
-        if (rejectPromise) {
-          console.warn("Opening the file was canceled (legacy-fs).");
-          rejectPromise(new AbortError());
-        }
-      };
-    }
+    multiple: opts.multiple ?? false
   });
   if (Array.isArray(files)) {
     return await Promise.all(
@@ -21550,7 +21917,8 @@ var fileSave = (blob, opts) => {
       extensions: [`.${opts.extension}`],
       mimeTypes: opts.mimeTypes
     },
-    opts.fileHandle
+    opts.fileHandle,
+    false
   );
 };
 
@@ -21578,18 +21946,24 @@ var serializeAsJSON = (elements, appState, files, type) => {
   };
   return JSON.stringify(data, null, 2);
 };
-var saveAsJSON = async (elements, appState, files, name = appState.name || DEFAULT_FILENAME) => {
-  const serialized = serializeAsJSON(elements, appState, files, "local");
-  const blob = new Blob([serialized], {
-    type: MIME_TYPES.excalidraw
+var saveAsJSON = async ({
+  data,
+  filename,
+  fileHandle
+}) => {
+  const blob = Promise.resolve(data).then(({ elements, appState, files }) => {
+    const serialized = serializeAsJSON(elements, appState, files, "local");
+    return new Blob([serialized], {
+      type: MIME_TYPES.excalidraw
+    });
   });
-  const fileHandle = await fileSave(blob, {
-    name,
+  const savedFileHandle = await fileSave(blob, {
+    name: filename,
     extension: "excalidraw",
     description: "Excalidraw file",
-    fileHandle: isImageFileHandle(appState.fileHandle) ? null : appState.fileHandle
+    fileHandle: isImageFileHandle(fileHandle) ? null : fileHandle
   });
-  return { fileHandle };
+  return { fileHandle: savedFileHandle };
 };
 var loadFromJSON = async (localAppState, localElements) => {
   const file = await fileOpen({
@@ -24422,8 +24796,7 @@ var _renderStaticScene = ({
 var renderStaticSceneThrottled = throttleRAF(
   (config) => {
     _renderStaticScene(config);
-  },
-  { trailing: true }
+  }
 );
 var renderStaticScene = (renderConfig, throttle2) => {
   if (throttle2) {
@@ -24992,6 +25365,7 @@ var renderSceneToSvg = (elements, elementsMap, rsvg, svgRoot, files, renderConfi
 };
 
 // data/restore.ts
+var MAX_ARROW_PX = 75e3;
 var AllowedExcalidrawActiveTools = {
   selection: true,
   lasso: true,
@@ -25084,7 +25458,9 @@ var repairBinding = (element, binding, targetElementsMap, existingElementsMap, s
         fixedPoint
       };
     }
-    console.error(`could not repair binding for element`);
+    console.error(
+      `Could not repair binding for element "${boundElement?.id}" out of (${elementsMap?.size}) elements`
+    );
   } catch (error) {
     console.error("Error repairing binding:", error);
   }
@@ -25247,8 +25623,8 @@ var restoreElement = (element, targetElementsMap, existingElementsMap, opts) =>
         startArrowhead: startArrowhead2,
         endArrowhead: endArrowhead2,
         points: points2,
-        x: x2,
-        y: y2,
+        x: x2 ?? 0,
+        y: y2 ?? 0,
         elbowed: element.elbowed,
         ...getSizeFromPoints(points2)
       };
@@ -25259,12 +25635,30 @@ var restoreElement = (element, targetElementsMap, existingElementsMap, opts) =>
         startIsSpecial: element.startIsSpecial,
         endIsSpecial: element.endIsSpecial
       }) : restoreElementWithProperties(element, base);
-      return {
+      const normalizedRestoredElement = {
         ...restoredElement,
         ...LinearElementEditor.getNormalizeElementPointsAndCoords(
           restoredElement
         )
       };
+      if (normalizedRestoredElement.width > MAX_ARROW_PX || normalizedRestoredElement.height > MAX_ARROW_PX) {
+        console.error(
+          `Removing extremely large arrow ${normalizedRestoredElement.id} (type: ${isElbowArrow(normalizedRestoredElement) ? "elbow" : "simple"}, width: ${normalizedRestoredElement.width}, height: ${normalizedRestoredElement.height}, x: ${normalizedRestoredElement.x}, y: ${normalizedRestoredElement.y})`
+        );
+        return {
+          ...normalizedRestoredElement,
+          x: 0,
+          y: 0,
+          width: 100,
+          height: 100,
+          points: [
+            pointFrom(0, 0),
+            pointFrom(100, 100)
+          ],
+          isDeleted: true
+        };
+      }
+      return normalizedRestoredElement;
     }
     case "ellipse":
     case "rectangle":
@@ -25489,6 +25883,10 @@ var restoreAppState = (appState, localAppState) => {
     const localValue = localAppState ? localAppState[key] : void 0;
     nextAppState[key] = suppliedValue !== void 0 ? suppliedValue : localValue !== void 0 ? localValue : defaultValue;
   }
+  const boxSelectionMode = appState.boxSelectionMode ?? localAppState?.boxSelectionMode;
+  if (boxSelectionMode !== void 0) {
+    nextAppState.boxSelectionMode = boxSelectionMode;
+  }
   return {
     ...nextAppState,
     cursorButton: localAppState?.cursorButton || "up",
@@ -25619,7 +26017,11 @@ var prepareElementsForRender = ({
 }) => {
   let nextElements;
   if (exportingFrame) {
-    nextElements = getElementsOverlappingFrame(elements, exportingFrame);
+    nextElements = getElementsOverlappingFrame(
+      elements,
+      exportingFrame,
+      arrayToMap(elements)
+    );
   } else if (frameRendering.enabled && frameRendering.name) {
     nextElements = addFrameLabelsAsTextElements(elements, {
       exportWithDarkMode
@@ -26018,7 +26420,7 @@ var parseFileContents = async (blob) => {
   let contents;
   if (blob.type === MIME_TYPES.png) {
     try {
-      return await (await import("./data/image-JR54FB4B.js")).decodePngMetadata(blob);
+      return await (await import("./data/image-O7OJXMIJ.js")).decodePngMetadata(blob);
     } catch (error) {
       if (error.message === "INVALID") {
         throw new ImageSceneDataError(
@@ -26407,6 +26809,7 @@ export {
   rangeInclusive,
   rangesOverlap,
   rangeIntersection,
+  rangeIncludesValue,
   supportsResizeObserver,
   APP_NAME,
   DRAGGING_THRESHOLD,
@@ -26582,6 +26985,7 @@ export {
   isLocalLink,
   toValidURL,
   Emitter,
+  AppEventBus,
   MINIMAL_CROP_SIZE,
   cropElement,
   getUncroppedWidthAndHeight,
@@ -26616,6 +27020,7 @@ export {
   getLinearElementSubType,
   isValidPolygon,
   canBecomePolygon,
+  isEligibleFrameChildType,
   deconstructRectanguloidElement,
   getDiamondBaseCorners,
   deconstructDiamondElement,
@@ -26653,6 +27058,13 @@ export {
   getBoundTextMaxWidth,
   getBoundTextMaxHeight,
   getTextFromElements,
+  hasBackground,
+  hasStrokeColor,
+  hasStrokeWidth,
+  hasStrokeStyle,
+  canChangeRoundness,
+  toolIsArrow,
+  canHaveArrowheads,
   shouldTestInside,
   hitElementItself,
   hitElementBoundingBox,
@@ -26679,9 +27091,6 @@ export {
   fixBindingsAfterDeletion,
   getGlobalFixedPointForBindableElement,
   LinearElementEditor,
-  isElementInsideBBox,
-  elementPartiallyOverlapsWithOrContainsBBox,
-  elementsOverlappingBBox,
   selectGroup,
   selectGroupsForSelectedElements,
   isSelectedViaGroup,
@@ -26706,6 +27115,10 @@ export {
   makeNextSelectedElementIds,
   getSelectionStateForElements,
   getActiveTextElement,
+  validateFractionalIndices,
+  orderByFractionalIndex,
+  syncMovedIndices,
+  syncInvalidIndices,
   elementOverlapsWithFrame,
   isCursorInFrame,
   groupByFrameLikes,
@@ -26716,6 +27129,8 @@ export {
   getElementsInNewFrame,
   getContainingFrame,
   filterElementsEligibleAsFrameChildren,
+  getCommonFrameId,
+  getFrameChildrenInsertionIndex,
   addElementsToFrame,
   removeElementsFromFrame,
   removeAllElementsFromFrame,
@@ -26733,13 +27148,6 @@ export {
   renderSelectionElement,
   renderElement,
   getFreedrawOutlineAsSegments,
-  hasBackground,
-  hasStrokeColor,
-  hasStrokeWidth,
-  hasStrokeStyle,
-  canChangeRoundness,
-  toolIsArrow,
-  canHaveArrowheads,
   ShapeCache,
   toggleLinePolygonState,
   getFreedrawOutlinePoints,
@@ -26765,10 +27173,6 @@ export {
   StoreChange,
   StoreDelta,
   getObservedAppState,
-  validateFractionalIndices,
-  orderByFractionalIndex,
-  syncMovedIndices,
-  syncInvalidIndices,
   Scene,
   distributeElements,
   dragSelectedElements,
@@ -26896,4 +27300,4 @@ export {
   createFile,
   normalizeFile
 };
-//# sourceMappingURL=chunk-VLJRILK3.js.map
+//# sourceMappingURL=chunk-OKDHCI5V.js.map