@excalidraw/element 0.18.0-4e758db → 0.18.0-4f68076

package/dist/dev/index.js

@@ -2970,7 +2970,8 @@ var LaserPointer = class _LaserPointer {
 import {
   pointFrom as pointFrom12,
   pointDistance as pointDistance6,
-  pointRotateRads as pointRotateRads11
+  pointRotateRads as pointRotateRads11,
+  polygonFromPoints as polygonFromPoints2
 } from "@excalidraw/math";
 import {
   ROUGHNESS,
@@ -2986,6 +2987,7 @@ import {
 // src/renderElement.ts
 init_define_import_meta_env();
 import {
+  clamp as clamp8,
   isRightAngleRads,
   lineSegment as lineSegment5,
   pointFrom as pointFrom11,
@@ -3009,7 +3011,8 @@ import {
   STICKY_NOTE_EDGE_SHADOW_OPACITY,
   STICKY_NOTE_EDGE_SHADOW_WIDTH,
   STICKY_NOTE_FOOTER as STICKY_NOTE_FOOTER2,
-  STICKY_NOTE_SHADOW_OPACITY
+  STICKY_NOTE_SHADOW_OPACITY,
+  DEFAULT_ZOOM as DEFAULT_ZOOM2
 } from "@excalidraw/common";
 
 // src/cropElement.ts
@@ -3485,7 +3488,7 @@ import {
   lineSegmentClosestParameter,
   lineSegmentPointAt,
   curveClosestParameter,
-  clamp as clamp6,
+  clamp as clamp7,
   bezierEquation as bezierEquation2,
   isCurve
 } from "@excalidraw/math";
@@ -3518,7 +3521,7 @@ import {
 } from "@excalidraw/common";
 import {
   PRECISION as PRECISION2,
-  clamp as clamp5,
+  clamp as clamp6,
   lineSegment as lineSegment4,
   pointDistance as pointDistance4,
   pointDistanceSq,
@@ -3544,6 +3547,7 @@ import {
   pointFromVector as pointFromVector5,
   pointRotateRads as pointRotateRads7,
   pointsEqual as pointsEqual4,
+  polygonIncludesPoint,
   vectorFromPoint as vectorFromPoint6,
   vectorNormalize as vectorNormalize3,
   vectorScale as vectorScale6
@@ -3564,6 +3568,7 @@ import {
 } from "@excalidraw/common";
 import {
   bezierEquation,
+  clamp as clamp5,
   curve as curve3,
   curveCatmullRomCubicApproxPoints,
   curveOffsetPoints,
@@ -3820,7 +3825,8 @@ import {
   isAnyTrue,
   getSizeFromPoints,
   isDevEnv as isDevEnv2,
-  arrayToMap
+  arrayToMap,
+  DEFAULT_ZOOM
 } from "@excalidraw/common";
 
 // src/distance.ts
@@ -3828,7 +3834,8 @@ init_define_import_meta_env();
 import {
   curvePointDistance,
   distanceToLineSegment,
-  pointRotateRads as pointRotateRads3
+  pointRotateRads as pointRotateRads3,
+  polygonIncludesPointNonZero
 } from "@excalidraw/math";
 import { ellipse as ellipse2, ellipseDistanceFromPoint } from "@excalidraw/math/ellipse";
 var distanceToElement = (element, elementsMap, p) => {
@@ -3849,8 +3856,9 @@ var distanceToElement = (element, elementsMap, p) => {
       return distanceToEllipseElement(element, elementsMap, p);
     case "line":
     case "arrow":
-    case "freedraw":
       return distanceToLinearOrFreeDraElement(element, elementsMap, p);
+    case "freedraw":
+      return distanceToFreeDrawElement(element, elementsMap, p);
   }
 };
 var distanceToRectanguloidElement = (element, elementsMap, p) => {
@@ -3889,6 +3897,17 @@ var distanceToLinearOrFreeDraElement = (element, elementsMap, p) => {
     ...curves.map((a2) => curvePointDistance(a2, p))
   );
 };
+var distanceToFreeDrawElement = (element, elementsMap, p) => {
+  const [lines] = deconstructLinearOrFreeDrawElement(element, elementsMap);
+  if (lines.length === 0) {
+    return Infinity;
+  }
+  const polygon3 = lines.map((line2) => line2[0]);
+  if (polygonIncludesPointNonZero(p, polygon3)) {
+    return 0;
+  }
+  return Math.min(...lines.map((s) => distanceToLineSegment(p, s)));
+};
 
 // src/heading.ts
 init_define_import_meta_env();
@@ -4802,22 +4821,13 @@ var updateElbowArrowPoints = (arrow, elementsMap, updates, options) => {
 var getElbowArrowData = (arrow, elementsMap, nextPoints, options) => {
   const origStartGlobalPoint = pointTranslate(nextPoints[0], vector2(arrow.x, arrow.y));
   const origEndGlobalPoint = pointTranslate(nextPoints[nextPoints.length - 1], vector2(arrow.x, arrow.y));
+  const zoom = options?.zoom ?? DEFAULT_ZOOM;
   let hoveredStartElement = null;
   let hoveredEndElement = null;
   if (options?.isDragging && options?.isBindingEnabled !== false) {
     const elements = Array.from(elementsMap.values());
-    hoveredStartElement = getHoveredElement(
-      origStartGlobalPoint,
-      elementsMap,
-      elements,
-      options?.zoom
-    ) || null;
-    hoveredEndElement = getHoveredElement(
-      origEndGlobalPoint,
-      elementsMap,
-      elements,
-      options?.zoom
-    ) || null;
+    hoveredStartElement = getHoveredElement(origStartGlobalPoint, elementsMap, elements, zoom) || null;
+    hoveredEndElement = getHoveredElement(origEndGlobalPoint, elementsMap, elements, zoom) || null;
   } else {
     hoveredStartElement = arrow.startBinding ? getBindableElementForId(arrow.startBinding.elementId, elementsMap) || null : null;
     hoveredEndElement = arrow.endBinding ? getBindableElementForId(arrow.endBinding.elementId, elementsMap) || null : null;
@@ -4833,6 +4843,7 @@ var getElbowArrowData = (arrow, elementsMap, nextPoints, options) => {
     "start",
     arrow.startBinding?.fixedPoint,
     origStartGlobalPoint,
+    zoom,
     hoveredStartElement,
     elementsMap,
     options?.isDragging,
@@ -4850,6 +4861,7 @@ var getElbowArrowData = (arrow, elementsMap, nextPoints, options) => {
     "end",
     arrow.endBinding?.fixedPoint,
     origEndGlobalPoint,
+    zoom,
     hoveredEndElement,
     elementsMap,
     options?.isDragging,
@@ -4862,7 +4874,7 @@ var getElbowArrowData = (arrow, elementsMap, nextPoints, options) => {
     hoveredStartElement,
     origStartGlobalPoint,
     elementsMap,
-    options?.zoom
+    zoom
   );
   const endHeading = getBindPointHeading(
     endGlobalPoint,
@@ -4870,7 +4882,7 @@ var getElbowArrowData = (arrow, elementsMap, nextPoints, options) => {
     hoveredEndElement,
     origEndGlobalPoint,
     elementsMap,
-    options?.zoom
+    zoom
   );
   const startPointBounds = [
     startGlobalPoint[0] - 2,
@@ -4889,7 +4901,7 @@ var getElbowArrowData = (arrow, elementsMap, nextPoints, options) => {
     elementsMap,
     offsetFromHeading(
       startHeading,
-      arrow.startArrowhead ? getBindingGap(hoveredStartElement, { elbowed: true }) * 6 : getBindingGap(hoveredStartElement, { elbowed: true }) * 2,
+      arrow.startArrowhead ? getBindingGap(hoveredStartElement) * 6 : getBindingGap(hoveredStartElement) * 2,
       1
     )
   ) : startPointBounds;
@@ -4898,7 +4910,7 @@ var getElbowArrowData = (arrow, elementsMap, nextPoints, options) => {
     elementsMap,
     offsetFromHeading(
       endHeading,
-      arrow.endArrowhead ? getBindingGap(hoveredEndElement, { elbowed: true }) * 6 : getBindingGap(hoveredEndElement, { elbowed: true }) * 2,
+      arrow.endArrowhead ? getBindingGap(hoveredEndElement) * 6 : getBindingGap(hoveredEndElement) * 2,
       1
     )
   ) : endPointBounds;
@@ -4930,7 +4942,7 @@ var getElbowArrowData = (arrow, elementsMap, nextPoints, options) => {
       0
     ) : offsetFromHeading(
       startHeading,
-      !hoveredStartElement && !hoveredEndElement ? 0 : BASE_PADDING - (arrow.startArrowhead ? BASE_BINDING_GAP_ELBOW * 6 : BASE_BINDING_GAP_ELBOW * 2),
+      !hoveredStartElement && !hoveredEndElement ? 0 : BASE_PADDING - (arrow.startArrowhead ? BASE_BINDING_GAP * 6 : BASE_BINDING_GAP * 2),
       BASE_PADDING
     ),
     boundsOverlap ? offsetFromHeading(
@@ -4939,7 +4951,7 @@ var getElbowArrowData = (arrow, elementsMap, nextPoints, options) => {
       0
     ) : offsetFromHeading(
       endHeading,
-      !hoveredStartElement && !hoveredEndElement ? 0 : BASE_PADDING - (arrow.endArrowhead ? BASE_BINDING_GAP_ELBOW * 6 : BASE_BINDING_GAP_ELBOW * 2),
+      !hoveredStartElement && !hoveredEndElement ? 0 : BASE_PADDING - (arrow.endArrowhead ? BASE_BINDING_GAP * 6 : BASE_BINDING_GAP * 2),
       BASE_PADDING
     ),
     boundsOverlap,
@@ -5477,7 +5489,7 @@ var neighborIndexToHeading = (idx) => {
   }
   return HEADING_LEFT;
 };
-var getGlobalPoint = (arrow, startOrEnd, fixedPointRatio, initialPoint, element, elementsMap, isDragging, isBindingEnabled2 = true, isMidpointSnappingEnabled = true) => {
+var getGlobalPoint = (arrow, startOrEnd, fixedPointRatio, initialPoint, zoom, element, elementsMap, isDragging, isBindingEnabled2 = true, isMidpointSnappingEnabled = true) => {
   if (isDragging) {
     if (isBindingEnabled2 && element && elementsMap) {
       return bindPointToSnapToElementOutline(
@@ -5485,6 +5497,7 @@ var getGlobalPoint = (arrow, startOrEnd, fixedPointRatio, initialPoint, element,
         element,
         startOrEnd,
         elementsMap,
+        zoom,
         void 0,
         isMidpointSnappingEnabled
       );
@@ -5514,12 +5527,7 @@ var getBindPointHeading = (p, otherPoint, hoveredElement, origPoint, elementsMap
   zoom
 );
 var getHoveredElement = (origPoint, elementsMap, elements, zoom) => {
-  return getHoveredElementForBinding(
-    origPoint,
-    elements,
-    elementsMap,
-    maxBindingDistance_simple(zoom)
-  );
+  return getHoveredElementForBinding(origPoint, elements, elementsMap, zoom);
 };
 var gridAddressesEqual = (a2, b2) => a2[0] === b2[0] && a2[1] === b2[1];
 var validateElbowPoints = (points, tolerance = DEDUP_TRESHOLD) => points.slice(1).map(
@@ -6526,6 +6534,23 @@ var getBoundTextElementPosition = (container, boundTextElement, elementsMap) =>
     );
   }
 };
+var getTextElementWithAccuratePosition = (textElement, elementsMap) => {
+  if (!textElement.containerId) {
+    return textElement;
+  }
+  const container = elementsMap.get(textElement.containerId);
+  if (!container || !isArrowElement(container)) {
+    return textElement;
+  }
+  return {
+    ...textElement,
+    ...LinearElementEditor.getBoundTextElementPosition(
+      container,
+      textElement,
+      elementsMap
+    )
+  };
+};
 var shouldAllowVerticalAlign = (selectedElements, elementsMap) => {
   return selectedElements.some((element) => {
     if (isBoundToContainer(element)) {
@@ -7580,71 +7605,127 @@ var getDiagonalsForBindableElement = (element, elementsMap) => {
   );
   return [diagonalOne, diagonalTwo];
 };
-var getSnapOutlineMidPoint = (point, element, elementsMap, zoom) => {
-  const center = elementCenterPoint(element, elementsMap);
-  const sideMidpoints = element.type === "diamond" ? getDiamondBaseCorners(element).map((curve4) => {
-    const point2 = bezierEquation(curve4, 0.5);
-    const rotatedPoint = pointRotateRads6(point2, center, element.angle);
-    return pointFrom6(rotatedPoint[0], rotatedPoint[1]);
-  }) : [
-    // RIGHT midpoint
-    pointRotateRads6(
-      pointFrom6(
-        element.x + element.width,
-        element.y + element.height / 2
-      ),
-      center,
-      element.angle
-    ),
-    // BOTTOM midpoint
-    pointRotateRads6(
-      pointFrom6(
-        element.x + element.width / 2,
-        element.y + element.height
-      ),
-      center,
-      element.angle
-    ),
-    // LEFT midpoint
-    pointRotateRads6(
-      pointFrom6(element.x, element.y + element.height / 2),
-      center,
-      element.angle
-    ),
-    // TOP midpoint
-    pointRotateRads6(
-      pointFrom6(element.x + element.width / 2, element.y),
-      center,
-      element.angle
-    )
-  ];
-  const candidate = sideMidpoints.find(
-    (midpoint) => pointDistance3(point, midpoint) <= maxBindingDistance_simple(zoom) + element.strokeWidth / 2 && !hitElementItself({
+var getSnappedMidpointForElbowArrow = (element, point, elementsMap, center, horizontalThreshold, verticalThreshold) => {
+  const { x, y, width, height, angle: angle2 } = element;
+  const nonRotated = pointRotateRads6(point, center, -angle2);
+  const bindingGap = getBindingGap(element);
+  if (pointDistance3(center, nonRotated) < bindingGap) {
+    return void 0;
+  }
+  const [right, bottom, left, top] = getAllMidpoints(element, elementsMap);
+  if (nonRotated[0] <= x + width / 2 && nonRotated[1] > center[1] - verticalThreshold && nonRotated[1] < center[1] + verticalThreshold) {
+    return { point: left, onAxis: true };
+  } else if (nonRotated[1] <= y + height / 2 && nonRotated[0] > center[0] - horizontalThreshold && nonRotated[0] < center[0] + horizontalThreshold) {
+    return { point: top, onAxis: true };
+  } else if (nonRotated[0] >= x + width / 2 && nonRotated[1] > center[1] - verticalThreshold && nonRotated[1] < center[1] + verticalThreshold) {
+    return { point: right, onAxis: true };
+  } else if (nonRotated[1] >= y + height / 2 && nonRotated[0] > center[0] - horizontalThreshold && nonRotated[0] < center[0] + horizontalThreshold) {
+    return { point: bottom, onAxis: true };
+  } else if (element.type === "diamond") {
+    const threshold = Math.max(horizontalThreshold, verticalThreshold);
+    const edgeMidpoints = [
+      // top-left, top-right, bottom-left, bottom-right
+      [x + width / 4, y + height / 4, -1, -1],
+      [x + 3 * width / 4, y + height / 4, 1, -1],
+      [x + width / 4, y + 3 * height / 4, -1, 1],
+      [x + 3 * width / 4, y + 3 * height / 4, 1, 1]
+    ];
+    for (const [edgeX, edgeY, dirX, dirY] of edgeMidpoints) {
+      const zoneCenter = pointFrom6(
+        edgeX + dirX * bindingGap,
+        edgeY + dirY * bindingGap
+      );
+      if (pointDistance3(zoneCenter, nonRotated) < threshold) {
+        return {
+          point: pointRotateRads6(
+            pointFrom6(edgeX, edgeY),
+            center,
+            angle2
+          ),
+          onAxis: false
+        };
+      }
+    }
+  }
+  return void 0;
+};
+var getSnappedMidpointIndexForSimpleArrow = (element, point, elementsMap, threshold) => {
+  const baseMidpoints = getAllMidpoints(element, elementsMap);
+  for (let i = 0; i < baseMidpoints.length; i++) {
+    if (pointDistance3(baseMidpoints[i], point) <= threshold && !hitElementItself({
       point,
       element,
       threshold: 0,
       elementsMap,
       overrideShouldTestInside: true
-    })
+    })) {
+      return i;
+    }
+  }
+  return -1;
+};
+var getAllMidpoints = (element, elementsMap) => {
+  const center = elementCenterPoint(element, elementsMap);
+  if (element.type === "diamond") {
+    return getDiamondBaseCorners(element).map(
+      (curve4) => pointRotateRads6(bezierEquation(curve4, 0.5), center, element.angle)
+    );
+  }
+  return [
+    pointFrom6(element.width, element.height / 2),
+    pointFrom6(element.width / 2, element.height),
+    pointFrom6(0, element.height / 2),
+    pointFrom6(element.width / 2, 0)
+  ].map(
+    ([x, y]) => pointRotateRads6(
+      pointFrom6(element.x + x, element.y + y),
+      center,
+      element.angle
+    )
+  );
+};
+var getElbowArrowSnapMidPoint = (point, element, elementsMap, zoom) => {
+  const TOLERANCE = 0.05;
+  const maxDistance = maxBindingDistance_simple(zoom) + element.strokeWidth / 2;
+  return getSnappedMidpointForElbowArrow(
+    element,
+    point,
+    elementsMap,
+    elementCenterPoint(element, elementsMap),
+    clamp5(TOLERANCE * element.width, 5, maxDistance),
+    clamp5(TOLERANCE * element.height, 5, maxDistance)
+  );
+};
+var getSnapOutlineMidPoint = (point, element, elementsMap, zoom, arrow) => {
+  if (arrow.elbowed) {
+    return getElbowArrowSnapMidPoint(point, element, elementsMap, zoom)?.point;
+  }
+  const maxDistance = maxBindingDistance_simple(zoom) + element.strokeWidth / 2;
+  const idx = getSnappedMidpointIndexForSimpleArrow(
+    element,
+    point,
+    elementsMap,
+    maxDistance
   );
-  return candidate;
+  return idx === -1 ? void 0 : getAllMidpoints(element, elementsMap)[idx];
 };
 var projectFixedPointOntoDiagonal = (arrow, point, element, startOrEnd, elementsMap, zoom, isMidpointSnappingEnabled = true) => {
   invariant5(arrow.points.length >= 2, "Arrow must have at least two points");
-  if (arrow.width < 3 && arrow.height < 3) {
-    return null;
-  }
   if (isMidpointSnappingEnabled) {
     const sideMidPoint = getSnapOutlineMidPoint(
       point,
       element,
       elementsMap,
-      zoom
+      zoom,
+      arrow
     );
     if (sideMidPoint) {
       return sideMidPoint;
     }
   }
+  if (arrow.width < 3 && arrow.height < 3) {
+    return null;
+  }
   const [diagonalOne, diagonalTwo] = getDiagonalsForBindableElement(
     element,
     elementsMap
@@ -7736,7 +7817,7 @@ var hitElementItself = ({
   frameNameBound = null,
   overrideShouldTestInside = false
 }) => {
-  if (cachedPoint && pointsEqual4(point, cachedPoint) && (cachedHit ? cachedThreshold <= threshold : cachedThreshold >= threshold) && overrideShouldTestInside === cachedOverrideShouldTestInside && frameNameBoundsEqual(frameNameBound, cachedFrameNameBound)) {
+  if (!isBoundToContainer(element) && cachedPoint && pointsEqual4(point, cachedPoint) && (cachedHit ? cachedThreshold <= threshold : cachedThreshold >= threshold) && overrideShouldTestInside === cachedOverrideShouldTestInside && frameNameBoundsEqual(frameNameBound, cachedFrameNameBound)) {
     const derefElement = cachedElement?.deref();
     if (derefElement && derefElement.id === element.id && derefElement.version === element.version && derefElement.versionNonce === element.versionNonce) {
       return cachedHit;
@@ -7755,11 +7836,15 @@ var hitElementItself = ({
     point,
     bounds,
     element.angle,
-    threshold
+    // Freedraw bounds follow the centerline points, but the ink extends past them
+    isFreeDrawElement(element) ? threshold + getFreedrawMaxStrokeRadius(element) : threshold
   );
   if (!hitBounds && !hitFrameName) {
     return false;
   }
+  if (isTextElement(element)) {
+    element = getTextElementWithAccuratePosition(element, elementsMap);
+  }
   const hitElement = (overrideShouldTestInside ? true : shouldTestInside(element)) ? (
     // Since `inShape` tests STRICTLY againt the insides of a shape
     // we would need `onShape` as well to include the "borders"
@@ -7793,110 +7878,111 @@ var hitElementBoundText = (point, element, elementsMap) => {
   if (!boundTextElementCandidate) {
     return false;
   }
-  const boundTextElement = isLinearElement(element) ? {
-    ...boundTextElementCandidate,
-    // arrow's bound text accurate position is not stored in the element's property
-    // but rather calculated and returned from the following static method
-    ...LinearElementEditor.getBoundTextElementPosition(
-      element,
-      boundTextElementCandidate,
-      elementsMap
-    )
-  } : boundTextElementCandidate;
+  const boundTextElement = getTextElementWithAccuratePosition(
+    boundTextElementCandidate,
+    elementsMap
+  );
   return isPointInElement(point, boundTextElement, elementsMap);
 };
-var bindingBorderTest = (element, [x, y], elementsMap, tolerance = 0) => {
-  const p = pointFrom7(x, y);
-  const shouldTestInside2 = (
-    // disable fullshape snapping for frame elements so we
-    // can bind to frame children
-    !isFrameLikeElement(element)
-  );
+var isPointClippedByEnclosingFrame = (element, point, elementsMap) => {
+  if (!element.frameId) {
+    return false;
+  }
+  const enclosingFrame = elementsMap.get(element.frameId);
+  return !!enclosingFrame && isFrameLikeElement(enclosingFrame) && !pointInsideBounds(point, getElementBounds(enclosingFrame, elementsMap));
+};
+var bindableElementBorderDistanceIfClose = (element, point, elementsMap, tolerance = 0) => {
+  const [x, y] = point;
   const t = Math.max(1, tolerance);
   const bounds = [x - t, y - t, x + t, y + t];
   const elementBounds = getElementBounds(element, elementsMap);
   if (!doBoundsIntersect(bounds, elementBounds)) {
-    return false;
+    return -Infinity;
   }
-  if (element.frameId) {
-    const enclosingFrame = elementsMap.get(element.frameId);
-    if (enclosingFrame && isFrameLikeElement(enclosingFrame)) {
-      const enclosingFrameBounds = getElementBounds(
-        enclosingFrame,
-        elementsMap
-      );
-      if (!pointInsideBounds(p, enclosingFrameBounds)) {
-        return false;
-      }
-    }
+  if (isPointClippedByEnclosingFrame(element, point, elementsMap)) {
+    return -Infinity;
   }
-  const intersections = intersectElementWithLineSegment(
-    element,
-    elementsMap,
-    lineSegment3(elementCenterPoint(element, elementsMap), p)
-  );
-  const distance3 = distanceToElement(element, elementsMap, p);
-  return shouldTestInside2 ? intersections.length === 0 || distance3 <= tolerance : intersections.length > 0 && distance3 <= t;
+  const isInside = isPointInElement(point, element, elementsMap);
+  if (isInside && isFrameLikeElement(element)) {
+    return -Infinity;
+  }
+  const distance3 = distanceToElement(element, elementsMap, point);
+  if (isInside) {
+    return distance3;
+  }
+  return distance3 > tolerance ? -Infinity : -distance3;
 };
-var getAllHoveredElementAtPoint = (point, elements, elementsMap, tolerance) => {
-  const candidateElements = [];
+var isOpaqueForBinding = (element) => isImageElement(element) || hasBackground(element.type) && !isTransparent2(element.backgroundColor);
+var getBindingCandidates = (point, elements, elementsMap, zoom) => {
+  const maxDistance = maxBindingDistance_simple(zoom);
+  const candidates = [];
+  let occludingFrameId = null;
   for (let index = elements.length - 1; index >= 0; --index) {
     const element = elements[index];
     invariant6(
       !element.isDeleted,
-      "Elements in the function parameter for getAllElementsAtPositionForBinding() should not contain deleted elements"
+      "Elements passed to binding hit tests should not contain deleted elements"
     );
-    if (isBindableElement(element, false) && bindingBorderTest(element, point, elementsMap, tolerance)) {
-      candidateElements.push(element);
-      if (hasBackground(element.type) && !isTransparent2(element.backgroundColor)) {
-        break;
+    if (occludingFrameId && element.frameId !== occludingFrameId) {
+      continue;
+    }
+    if (!isBindableElement(element)) {
+      continue;
+    }
+    if (isFrameLikeElement(element)) {
+      if (isOpaqueForBinding(element) && isPointInElement(point, element, elementsMap)) {
+        occludingFrameId = element.id;
       }
     }
-  }
-  return candidateElements;
-};
-var getHoveredElementForBinding = (point, elements, elementsMap, tolerance) => {
-  const candidateElements = getAllHoveredElementAtPoint(
-    point,
-    elements,
-    elementsMap,
-    tolerance
-  );
-  if (!candidateElements || candidateElements.length === 0) {
-    return null;
-  }
-  if (candidateElements.length === 1) {
-    return candidateElements[0];
-  }
-  return candidateElements.sort(
-    (a2, b2) => b2.width ** 2 + b2.height ** 2 - (a2.width ** 2 + a2.height ** 2)
-  ).pop();
-};
-var getHoveredElementForFocusPoint = (point, arrow, elements, elementsMap, tolerance) => {
-  const candidateElements = [];
-  for (let index = elements.length - 1; index >= 0; --index) {
-    const element = elements[index];
-    invariant6(
-      !element.isDeleted,
-      "Elements in the function parameter for getAllElementsAtPositionForBinding() should not contain deleted elements"
+    const distance3 = bindableElementBorderDistanceIfClose(
+      element,
+      point,
+      elementsMap,
+      maxDistance
     );
-    if (isBindableElement(element, false) && bindingBorderTest(element, point, elementsMap, tolerance)) {
-      candidateElements.push(element);
+    if (distance3 > -maxDistance) {
+      if (!element.locked) {
+        candidates.push({ element, distance: distance3 });
+      }
+      if (distance3 >= 0 && isOpaqueForBinding(element)) {
+        break;
+      }
     }
   }
-  if (!candidateElements || candidateElements.length === 0) {
+  return candidates;
+};
+var getAllHoveredElementAtPoint = (point, elements, elementsMap, zoom) => getBindingCandidates(point, elements, elementsMap, zoom).map(
+  ({ element }) => element
+);
+var getHoveredElementForBinding = (point, elements, elementsMap, zoom) => {
+  const candidates = getBindingCandidates(point, elements, elementsMap, zoom);
+  if (candidates.length === 0) {
     return null;
   }
-  if (candidateElements.length === 1) {
-    return candidateElements[0];
+  if (candidates.length === 1) {
+    return candidates[0].element;
   }
-  const distanceFilteredCandidateElements = candidateElements.filter(
-    (el) => distanceToElement(el, elementsMap, point) <= getBindingGap(el, arrow) || isPointInElement(point, el, elementsMap)
+  const closestElements = candidates.sort(
+    (a2, b2) => Math.abs(a2.distance) - Math.abs(b2.distance)
   );
-  if (distanceFilteredCandidateElements.length === 0) {
-    return null;
-  }
-  return distanceFilteredCandidateElements[0];
+  const candidate = closestElements[0];
+  const [cx1, cy1, cx2, cy2] = getElementBounds(candidate.element, elementsMap);
+  const candidateArea = Math.max(
+    1e-5,
+    Math.abs(cx2 - cx1) * Math.abs(cy2 - cy1)
+  );
+  const overlaps = closestElements.filter((c) => c.element !== candidate.element && c.distance >= 0).map((c) => {
+    const [x1, y1, x2, y2] = getElementBounds(c.element, elementsMap);
+    const overlapWidth = Math.max(0, Math.min(x2, cx2) - Math.max(x1, cx1));
+    const overlapHeight = Math.max(0, Math.min(y2, cy2) - Math.max(y1, cy1));
+    const area = Math.max(1e-5, Math.abs(x2 - x1) * Math.abs(y2 - y1));
+    return {
+      ...c,
+      overlapPercent: overlapHeight * overlapWidth / area,
+      relativeArea: area / candidateArea
+    };
+  }).filter((c) => c.overlapPercent > 0.25 && c.relativeArea < 0.75);
+  return candidate.distance >= 0 && overlaps.length > 0 ? overlaps[0].element : candidate.element;
 };
 var intersectElementWithLineSegment = (element, elementsMap, line2, offset = 0, onlyFirst = false) => {
   const intersectorBounds = [
@@ -7952,15 +8038,16 @@ var intersectElementWithLineSegment = (element, elementsMap, line2, offset = 0,
       );
   }
 };
+var CURVE_BOUNDS_EPSILON = 1e-6;
 var curveIntersections = (curves, segment, intersections, center, angle2, onlyFirst = false) => {
+  const b2 = [
+    Math.min(segment[0][0], segment[1][0]) - CURVE_BOUNDS_EPSILON,
+    Math.min(segment[0][1], segment[1][1]) - CURVE_BOUNDS_EPSILON,
+    Math.max(segment[0][0], segment[1][0]) + CURVE_BOUNDS_EPSILON,
+    Math.max(segment[0][1], segment[1][1]) + CURVE_BOUNDS_EPSILON
+  ];
   for (const c of curves) {
     const b1 = getCubicBezierCurveBound(c[0], c[1], c[2], c[3]);
-    const b2 = [
-      Math.min(segment[0][0], segment[1][0]),
-      Math.min(segment[0][1], segment[1][1]),
-      Math.max(segment[0][0], segment[1][0]),
-      Math.max(segment[0][1], segment[1][1])
-    ];
     if (!doBoundsIntersect(b1, b2)) {
       continue;
     }
@@ -8104,6 +8191,18 @@ var isPointInElement = (point, element, elementsMap) => {
   if ((isLinearElement(element) || isFreeDrawElement(element)) && !isPathALoop(element.points)) {
     return false;
   }
+  if (isFreeDrawElement(element)) {
+    const [x12, y12, x22, y22] = getElementBounds(element, elementsMap, true);
+    const [px, py] = pointRotateRads7(
+      point,
+      pointFrom7((x12 + x22) / 2, (y12 + y22) / 2),
+      -element.angle
+    );
+    return polygonIncludesPoint(
+      pointFrom7(px - element.x, py - element.y),
+      getFreedrawFillPolygon(element)
+    );
+  }
   const [x1, y1, x2, y2] = getElementBounds(element, elementsMap);
   if (!isPointWithinBounds(pointFrom7(x1, y1), point, pointFrom7(x2, y2))) {
     return false;
@@ -8180,17 +8279,16 @@ var isBindableElementInsideOtherBindable = (innerElement, outerElement, elements
 
 // src/binding.ts
 var BASE_BINDING_GAP = 5;
-var BASE_BINDING_GAP_ELBOW = 5;
 var BASE_ARROW_MIN_LENGTH = 10;
 var FOCUS_POINT_SIZE = 10 / 1.5;
 var MIN_BINDABLE_SIZE = 1;
-var getBindingGap = (bindTarget, opts) => {
-  return (opts.elbowed ? BASE_BINDING_GAP_ELBOW : BASE_BINDING_GAP) + bindTarget.strokeWidth / 2;
+var getBindingGap = (bindTarget) => {
+  return BASE_BINDING_GAP + bindTarget.strokeWidth / 2;
 };
 var maxBindingDistance_simple = (zoom) => {
   const BASE_BINDING_DISTANCE = Math.max(BASE_BINDING_GAP, 15);
   const zoomValue = zoom?.value && zoom.value < 1 ? zoom.value : 1;
-  return clamp5(
+  return clamp6(
     // reducing zoom impact so that the diff between binding distance and
     // binding gap is kept to minimum when possible
     BASE_BINDING_DISTANCE / (zoomValue * 1.5),
@@ -8221,6 +8319,7 @@ var bindOrUnbindBindingElement = (arrow, draggingPoints, scenePointerX, scenePoi
     start,
     "start",
     scene,
+    appState.zoom,
     appState.isBindingEnabled,
     isMidpointSnappingEnabled
   );
@@ -8229,6 +8328,7 @@ var bindOrUnbindBindingElement = (arrow, draggingPoints, scenePointerX, scenePoi
     end,
     "end",
     scene,
+    appState.zoom,
     appState.isBindingEnabled,
     isMidpointSnappingEnabled
   );
@@ -8260,7 +8360,7 @@ var bindOrUnbindBindingElement = (arrow, draggingPoints, scenePointerX, scenePoi
   }
   return { start, end };
 };
-var bindOrUnbindBindingElementEdge = (arrow, { mode, element, focusPoint }, startOrEnd, scene, shouldSnapToOutline = true, isMidpointSnappingEnabled = true) => {
+var bindOrUnbindBindingElementEdge = (arrow, { mode, element, focusPoint }, startOrEnd, scene, zoom, shouldSnapToOutline = true, isMidpointSnappingEnabled = true) => {
   if (mode === null) {
     unbindBindingElement(arrow, startOrEnd, scene);
   } else if (mode !== void 0) {
@@ -8270,6 +8370,7 @@ var bindOrUnbindBindingElementEdge = (arrow, { mode, element, focusPoint }, star
       mode,
       startOrEnd,
       scene,
+      zoom,
       focusPoint,
       shouldSnapToOutline,
       isMidpointSnappingEnabled
@@ -8293,7 +8394,7 @@ var bindingStrategyForElbowArrowEndpointDragging = (arrow, draggingPoints, eleme
     globalPoint,
     elements,
     elementsMap,
-    maxBindingDistance_simple(zoom)
+    zoom
   );
   const current = hit ? {
     element: hit,
@@ -8318,7 +8419,12 @@ var bindingStrategyForNewSimpleArrowEndpointDragging = (arrow, draggingPoints, e
     draggingPoints.get(startDragged ? startIdx : endIdx).point,
     elementsMap
   );
-  const hit = getHoveredElementForBinding(point, elements, elementsMap);
+  const hit = getHoveredElementForBinding(
+    point,
+    elements,
+    elementsMap,
+    appState.zoom
+  );
   if (startDragged) {
     if (hit) {
       start = {
@@ -8349,7 +8455,12 @@ var bindingStrategyForNewSimpleArrowEndpointDragging = (arrow, draggingPoints, e
     }
     if (hit && arrow.startBinding) {
       const startBinding = arrow.startBinding;
-      const allHits = getAllHoveredElementAtPoint(point, elements, elementsMap);
+      const allHits = getAllHoveredElementAtPoint(
+        point,
+        elements,
+        elementsMap,
+        appState.zoom
+      );
       if (allHits.find((el) => el.id === startBinding.elementId)) {
         const otherElement = elementsMap.get(
           arrow.startBinding.elementId
@@ -8413,12 +8524,12 @@ var bindingStrategyForNewSimpleArrowEndpointDragging = (arrow, draggingPoints, e
   }
   invariant7(false, "New arrow creation should not reach here");
 };
-var bindingStrategyForSimpleArrowEndpointDragging_complex = (point, currentBinding, oppositeBinding, elementsMap, elements, globalBindMode, arrow, finalize) => {
+var bindingStrategyForSimpleArrowEndpointDragging_complex = (point, currentBinding, oppositeBinding, elementsMap, elements, globalBindMode, arrow, zoom, finalize) => {
   let current = { mode: void 0 };
   let other = { mode: void 0 };
   const isMultiPoint = arrow.points.length > 2;
-  const hit = getHoveredElementForBinding(point, elements, elementsMap);
-  const isOverlapping = oppositeBinding ? getAllHoveredElementAtPoint(point, elements, elementsMap).some(
+  const hit = getHoveredElementForBinding(point, elements, elementsMap, zoom);
+  const isOverlapping = oppositeBinding ? getAllHoveredElementAtPoint(point, elements, elementsMap, zoom).some(
     (el) => el.id === oppositeBinding.elementId
   ) : false;
   const oppositeElement = oppositeBinding ? elementsMap.get(
@@ -8531,7 +8642,7 @@ var getBindingStrategyForDraggingBindingElementEndpoints_simple = (arrow, draggi
       draggingPoints,
       elementsMap,
       elements,
-      opts?.zoom
+      appState.zoom
     );
   }
   const otherBinding = startDragged ? arrow.endBinding : arrow.startBinding;
@@ -8551,7 +8662,7 @@ var getBindingStrategyForDraggingBindingElementEndpoints_simple = (arrow, draggi
     opts?.angleLocked || appState.gridModeEnabled ? pointFrom8(scenePointerX, scenePointerY) : globalPoint,
     elements,
     elementsMap,
-    maxBindingDistance_simple(appState.zoom)
+    appState.zoom
   );
   const pointInElement = hit && (opts?.angleLocked ? isPointInElement(
     pointFrom8(scenePointerX, scenePointerY),
@@ -8736,7 +8847,8 @@ var getBindingStrategyForDraggingBindingElementEndpoints_complex = (arrow, dragg
       arrow,
       draggingPoints,
       elementsMap,
-      elements
+      elements,
+      appState.zoom
     );
   }
   if (opts?.newArrow) {
@@ -8771,6 +8883,7 @@ var getBindingStrategyForDraggingBindingElementEndpoints_complex = (arrow, dragg
       elements,
       globalBindMode,
       arrow,
+      appState.zoom,
       opts?.finalize
     );
     return { start: current, end: other };
@@ -8791,6 +8904,7 @@ var getBindingStrategyForDraggingBindingElementEndpoints_complex = (arrow, dragg
       elements,
       globalBindMode,
       arrow,
+      appState.zoom,
       opts?.finalize
     );
     return { start: other, end: current };
@@ -8824,7 +8938,7 @@ var applyBinding = (arrow, bindableElement, binding, startOrEnd, scene) => {
     });
   }
 };
-var bindBindingElement = (arrow, hoveredElement, mode, startOrEnd, scene, focusPoint, shouldSnapToOutline = true, isMidpointSnappingEnabled = true) => {
+var bindBindingElement = (arrow, hoveredElement, mode, startOrEnd, scene, zoom, focusPoint, shouldSnapToOutline = true, isMidpointSnappingEnabled = true) => {
   const elementsMap = scene.getNonDeletedElementsMap();
   let binding;
   if (isElbowArrow(arrow)) {
@@ -8836,6 +8950,7 @@ var bindBindingElement = (arrow, hoveredElement, mode, startOrEnd, scene, focusP
         hoveredElement,
         startOrEnd,
         elementsMap,
+        zoom,
         shouldSnapToOutline,
         isMidpointSnappingEnabled
       )
@@ -8873,6 +8988,84 @@ var unbindBindingElement = (arrow, startOrEnd, scene) => {
   scene.mutateElement(arrow, { [field]: null });
   return binding.elementId;
 };
+var reanchorBindingsToOutline = (changedElement, scene, zoom) => {
+  const elementsMap = scene.getNonDeletedElementsMap();
+  const center = elementCenterPoint(changedElement, elementsMap);
+  const reach = Math.max(changedElement.width, changedElement.height) * 2;
+  boundElementsVisitor(elementsMap, changedElement, (element) => {
+    if (!isArrowElement(element) || !isNonDeletedElement(element)) {
+      return;
+    }
+    const updates = {};
+    for (const startOrEnd of ["startBinding", "endBinding"]) {
+      const binding = element[startOrEnd];
+      if (binding?.elementId !== changedElement.id) {
+        continue;
+      }
+      const startOrEndName = startOrEnd === "startBinding" ? "start" : "end";
+      if (isElbowArrow(element)) {
+        updates[startOrEnd] = {
+          ...binding,
+          ...calculateFixedPointForElbowArrowBinding(
+            element,
+            changedElement,
+            startOrEndName,
+            elementsMap,
+            zoom
+          )
+        };
+        continue;
+      }
+      const focusPoint = getGlobalFixedPointForBindableElement(
+        binding.fixedPoint,
+        changedElement,
+        elementsMap
+      );
+      if (hitElementItself({
+        element: changedElement,
+        point: focusPoint,
+        elementsMap,
+        threshold: getBindingGap(changedElement),
+        overrideShouldTestInside: true
+      })) {
+        continue;
+      }
+      const direction = vectorFromPoint7(focusPoint, center);
+      if (direction[0] === 0 && direction[1] === 0) {
+        continue;
+      }
+      const outlinePoint = intersectElementWithLineSegment(
+        changedElement,
+        elementsMap,
+        lineSegment4(
+          center,
+          pointFromVector6(
+            vectorScale7(vectorNormalize4(direction), reach),
+            center
+          )
+        )
+      ).sort(
+        (a2, b2) => pointDistanceSq(a2, focusPoint) - pointDistanceSq(b2, focusPoint)
+      )[0];
+      if (!outlinePoint) {
+        continue;
+      }
+      updates[startOrEnd] = {
+        ...binding,
+        ...calculateFixedPointForNonElbowArrowBinding(
+          element,
+          changedElement,
+          startOrEndName,
+          elementsMap,
+          outlinePoint
+        )
+      };
+    }
+    if (updates.startBinding || updates.endBinding) {
+      mutateElement(element, elementsMap, updates);
+    }
+  });
+};
 var updateBoundElements = (changedElement, scene, options) => {
   if (!isBindableElement(changedElement)) {
     return;
@@ -8983,6 +9176,7 @@ var updateArrowBindings = (latestElement, startOrEnd, elementsMap, scene, appSta
         strategy[strategyName].mode,
         strategyName,
         scene,
+        appState.zoom,
         strategy[strategyName].focusPoint
       );
     }
@@ -9019,8 +9213,17 @@ var updateBindings = (latestElement, scene, appState, options) => {
 var doesNeedUpdate = (boundElement, changedElement) => {
   return boundElement.startBinding?.elementId === changedElement.id || boundElement.endBinding?.elementId === changedElement.id;
 };
+var simultaneouslyUpdatedElementIdsCache = /* @__PURE__ */ new WeakMap();
 var getSimultaneouslyUpdatedElementIds = (simultaneouslyUpdated) => {
-  return new Set((simultaneouslyUpdated || []).map((element) => element.id));
+  if (!simultaneouslyUpdated) {
+    return /* @__PURE__ */ new Set();
+  }
+  let ids = simultaneouslyUpdatedElementIdsCache.get(simultaneouslyUpdated);
+  if (!ids) {
+    ids = new Set(simultaneouslyUpdated.map((element) => element.id));
+    simultaneouslyUpdatedElementIdsCache.set(simultaneouslyUpdated, ids);
+  }
+  return ids;
 };
 var getHeadingForElbowArrowSnap = (p, otherPoint, bindableElement, aabb, origPoint, elementsMap, zoom) => {
   const otherPointHeading = vectorToHeading(vectorFromPoint7(otherPoint, p));
@@ -9045,7 +9248,7 @@ var getDistanceForBinding = (point, bindableElement, elementsMap, zoom) => {
   const bindDistance = maxBindingDistance_simple(zoom);
   return distance3 > bindDistance ? null : distance3;
 };
-var bindPointToSnapToElementOutline = (arrowElement, bindableElement, startOrEnd, elementsMap, customIntersector, isMidpointSnappingEnabled = true) => {
+var bindPointToSnapToElementOutline = (arrowElement, bindableElement, startOrEnd, elementsMap, zoom, customIntersector, isMidpointSnappingEnabled = true) => {
   const elbowed = isElbowArrow(arrowElement);
   const point = LinearElementEditor.getPointAtIndexGlobalCoordinates(
     arrowElement,
@@ -9066,16 +9269,16 @@ var bindPointToSnapToElementOutline = (arrowElement, bindableElement, startOrEnd
     startOrEnd === "start" ? 1 : -2,
     elementsMap
   );
-  const bindingGap = getBindingGap(bindableElement, arrowElement);
+  const bindingGap = getBindingGap(bindableElement);
   const aabb = aabbForElement(bindableElement, elementsMap);
   const bindableCenter = getCenterForBounds(aabb);
   let intersection = null;
   if (elbowed) {
+    const snap = isMidpointSnappingEnabled ? getElbowArrowSnapMidPoint(edgePoint, bindableElement, elementsMap, zoom) : void 0;
+    const resolved = snap?.point ?? point;
     const isHorizontal = headingIsHorizontal(
-      headingForPointFromElement(bindableElement, aabb, point)
+      snap?.onAxis ? vectorToHeading(vectorFromPoint7(snap.point, bindableCenter)) : headingForPointFromElement(bindableElement, aabb, point)
     );
-    const snapPoint = isMidpointSnappingEnabled ? snapToMid(bindableElement, elementsMap, edgePoint, 0.05, arrowElement) : void 0;
-    const resolved = snapPoint || point;
     const otherPoint = pointFrom8(
       isHorizontal ? bindableCenter[0] : resolved[0],
       !isHorizontal ? bindableCenter[1] : resolved[1]
@@ -9090,12 +9293,13 @@ var bindPointToSnapToElementOutline = (arrowElement, bindableElement, startOrEnd
         otherPoint
       )
     );
+    const byDistanceToResolved = (a2, b2) => pointDistanceSq(a2, resolved) - pointDistanceSq(b2, resolved);
     intersection = intersectElementWithLineSegment(
       bindableElement,
       elementsMap,
       intersector,
       bindingGap
-    ).sort(pointDistanceSq)[0];
+    ).sort(byDistanceToResolved)[0];
     if (!intersection) {
       const anotherPoint = pointFrom8(
         !isHorizontal ? bindableCenter[0] : resolved[0],
@@ -9115,8 +9319,8 @@ var bindPointToSnapToElementOutline = (arrowElement, bindableElement, startOrEnd
         bindableElement,
         elementsMap,
         anotherIntersector,
-        BASE_BINDING_GAP_ELBOW
-      ).sort(pointDistanceSq)[0];
+        BASE_BINDING_GAP
+      ).sort(byDistanceToResolved)[0];
     }
   } else {
     let intersector = customIntersector;
@@ -9152,7 +9356,7 @@ var avoidRectangularCorner = (arrowElement, bindTarget, elementsMap, p) => {
     center,
     -bindTarget.angle
   );
-  const bindingGap = getBindingGap(bindTarget, arrowElement);
+  const bindingGap = getBindingGap(bindTarget);
   if (nonRotatedPoint[0] < bindTarget.x && nonRotatedPoint[1] < bindTarget.y) {
     if (nonRotatedPoint[1] - bindTarget.y > -bindingGap) {
       return pointRotateRads8(
@@ -9214,73 +9418,6 @@ var avoidRectangularCorner = (arrowElement, bindTarget, elementsMap, p) => {
   }
   return p;
 };
-var snapToMid = (bindTarget, elementsMap, p, tolerance = 0.05, arrowElement) => {
-  const { x, y, width, height, angle: angle2 } = bindTarget;
-  const center = elementCenterPoint(bindTarget, elementsMap, -0.1, -0.1);
-  const nonRotated = pointRotateRads8(p, center, -angle2);
-  const bindingGap = arrowElement ? getBindingGap(bindTarget, arrowElement) : 0;
-  const verticalThreshold = clamp5(tolerance * height, 5, 80);
-  const horizontalThreshold = clamp5(tolerance * width, 5, 80);
-  if (pointDistance4(center, nonRotated) < bindingGap) {
-    return void 0;
-  }
-  if (nonRotated[0] <= x + width / 2 && nonRotated[1] > center[1] - verticalThreshold && nonRotated[1] < center[1] + verticalThreshold) {
-    return pointRotateRads8(
-      pointFrom8(x - bindingGap, center[1]),
-      center,
-      angle2
-    );
-  } else if (nonRotated[1] <= y + height / 2 && nonRotated[0] > center[0] - horizontalThreshold && nonRotated[0] < center[0] + horizontalThreshold) {
-    return pointRotateRads8(
-      pointFrom8(center[0], y - bindingGap),
-      center,
-      angle2
-    );
-  } else if (nonRotated[0] >= x + width / 2 && nonRotated[1] > center[1] - verticalThreshold && nonRotated[1] < center[1] + verticalThreshold) {
-    return pointRotateRads8(
-      pointFrom8(x + width + bindingGap, center[1]),
-      center,
-      angle2
-    );
-  } else if (nonRotated[1] >= y + height / 2 && nonRotated[0] > center[0] - horizontalThreshold && nonRotated[0] < center[0] + horizontalThreshold) {
-    return pointRotateRads8(
-      pointFrom8(center[0], y + height + bindingGap),
-      center,
-      angle2
-    );
-  } else if (bindTarget.type === "diamond") {
-    const distance3 = bindingGap;
-    const topLeft = pointFrom8(
-      x + width / 4 - distance3,
-      y + height / 4 - distance3
-    );
-    const topRight = pointFrom8(
-      x + 3 * width / 4 + distance3,
-      y + height / 4 - distance3
-    );
-    const bottomLeft = pointFrom8(
-      x + width / 4 - distance3,
-      y + 3 * height / 4 + distance3
-    );
-    const bottomRight = pointFrom8(
-      x + 3 * width / 4 + distance3,
-      y + 3 * height / 4 + distance3
-    );
-    if (pointDistance4(topLeft, nonRotated) < Math.max(horizontalThreshold, verticalThreshold)) {
-      return pointRotateRads8(topLeft, center, angle2);
-    }
-    if (pointDistance4(topRight, nonRotated) < Math.max(horizontalThreshold, verticalThreshold)) {
-      return pointRotateRads8(topRight, center, angle2);
-    }
-    if (pointDistance4(bottomLeft, nonRotated) < Math.max(horizontalThreshold, verticalThreshold)) {
-      return pointRotateRads8(bottomLeft, center, angle2);
-    }
-    if (pointDistance4(bottomRight, nonRotated) < Math.max(horizontalThreshold, verticalThreshold)) {
-      return pointRotateRads8(bottomRight, center, angle2);
-    }
-  }
-  return void 0;
-};
 var extractBinding = (arrow, startOrEnd, elementsMap) => {
   const binding = arrow[startOrEnd];
   if (!binding) {
@@ -9313,7 +9450,7 @@ var snapBoundPointToGrid = (outlinePoint, bindableElement, elementsMap, gridSize
   }
   const aabb = aabbForElement(bindableElement, elementsMap);
   const heading = adjacentPoint && (bindableElement.type === "ellipse" || bindableElement.type === "diamond") ? vectorToHeading(vectorFromPoint7(adjacentPoint, outlinePoint)) : headingForPointFromElement(bindableElement, aabb, outlinePoint);
-  const bindingGap = getBindingGap(bindableElement, arrowElement);
+  const bindingGap = getBindingGap(bindableElement);
   const extent = Math.max(bindableElement.width, bindableElement.height) + bindingGap * 2;
   const center = getCenterForBounds(aabb);
   const absNX = Math.abs(heading[0]);
@@ -9393,7 +9530,7 @@ var updateBoundPoint = (arrow, startOrEnd, binding, bindableElement, elementsMap
     otherBindable,
     elementsMap,
     intersector,
-    getBindingGap(otherBindable, arrow)
+    getBindingGap(otherBindable)
   ).sort(
     (a2, b2) => pointDistanceSq(a2, focusPoint) - pointDistanceSq(b2, focusPoint)
   )[0];
@@ -9401,7 +9538,7 @@ var updateBoundPoint = (arrow, startOrEnd, binding, bindableElement, elementsMap
     bindableElement,
     elementsMap,
     intersector,
-    getBindingGap(bindableElement, arrow)
+    getBindingGap(bindableElement)
   ).sort(
     (a2, b2) => pointDistanceSq(a2, otherFocusPointOrArrowPoint) - pointDistanceSq(b2, otherFocusPointOrArrowPoint)
   )[0];
@@ -9413,7 +9550,7 @@ var updateBoundPoint = (arrow, startOrEnd, binding, bindableElement, elementsMap
     element: otherBindable,
     point: outlinePoint,
     elementsMap,
-    threshold: getBindingGap(otherBindable, arrow),
+    threshold: getBindingGap(otherBindable),
     overrideShouldTestInside: true
   })) {
     return LinearElementEditor.createPointAt(
@@ -9452,7 +9589,7 @@ var updateBoundPoint = (arrow, startOrEnd, binding, bindableElement, elementsMap
     null
   );
 };
-var calculateFixedPointForElbowArrowBinding = (linearElement, hoveredElement, startOrEnd, elementsMap, shouldSnapToOutline = true, isMidpointSnappingEnabled = true) => {
+var calculateFixedPointForElbowArrowBinding = (linearElement, hoveredElement, startOrEnd, elementsMap, zoom, shouldSnapToOutline = true, isMidpointSnappingEnabled = true) => {
   const bounds = [
     hoveredElement.x,
     hoveredElement.y,
@@ -9464,6 +9601,7 @@ var calculateFixedPointForElbowArrowBinding = (linearElement, hoveredElement, st
     hoveredElement,
     startOrEnd,
     elementsMap,
+    zoom,
     void 0,
     isMidpointSnappingEnabled
   ) : LinearElementEditor.getPointAtIndexGlobalCoordinates(
@@ -9483,7 +9621,7 @@ var calculateFixedPointForElbowArrowBinding = (linearElement, hoveredElement, st
   if (hoveredElement.width < MIN_BINDABLE_SIZE || hoveredElement.height < MIN_BINDABLE_SIZE) {
     return { fixedPoint: normalizeFixedPoint([0.5, 0.5]) };
   }
-  const sizeFloor = getBindingGap(hoveredElement, linearElement);
+  const sizeFloor = getBindingGap(hoveredElement);
   return {
     fixedPoint: normalizeFixedPoint([
       (nonRotatedSnappedGlobalPoint[0] - hoveredElement.x) / Math.max(hoveredElement.width, sizeFloor),
@@ -9506,7 +9644,7 @@ var calculateFixedPointForNonElbowArrowBinding = (linearElement, hoveredElement,
   if (hoveredElement.width < MIN_BINDABLE_SIZE || hoveredElement.height < MIN_BINDABLE_SIZE) {
     return { fixedPoint: normalizeFixedPoint([0.5, 0.5]) };
   }
-  const sizeFloor = getBindingGap(hoveredElement, linearElement);
+  const sizeFloor = getBindingGap(hoveredElement);
   const fixedPointX = (nonRotatedPoint[0] - hoveredElement.x) / Math.max(hoveredElement.width, sizeFloor);
   const fixedPointY = (nonRotatedPoint[1] - hoveredElement.y) / Math.max(hoveredElement.height, sizeFloor);
   return {
@@ -9840,7 +9978,7 @@ var normalizeFixedPoint = (fixedPoint) => {
   }
   const EPSILON = 1e-4;
   const clamped = fixedPoint.map(
-    (ratio) => clamp5(ratio, -FIXED_POINT_BOUND, FIXED_POINT_BOUND)
+    (ratio) => clamp6(ratio, -FIXED_POINT_BOUND, FIXED_POINT_BOUND)
   );
   if (Math.abs(clamped[0] - 0.5) < EPSILON || Math.abs(clamped[1] - 0.5) < EPSILON) {
     return clamped.map(
@@ -10373,7 +10511,7 @@ var LinearElementEditor = class _LinearElementEditor {
       deltaY = newDraggingPointPosition[1] - point[1];
     }
     let suggestedBinding = null;
-    const { positions, updates } = pointDraggingUpdates(
+    const { positions, updates, hit } = pointDraggingUpdates(
       [idx],
       deltaX,
       deltaY,
@@ -10408,17 +10546,20 @@ var LinearElementEditor = class _LinearElementEditor {
       }
     }
     if (isBindingElement(element)) {
-      moveArrowAboveBindable(
-        _LinearElementEditor.getPointGlobalCoordinates(
+      if (hit) {
+        moveArrowAboveBindable(
+          _LinearElementEditor.getPointGlobalCoordinates(
+            element,
+            element.points[element.points.length - 1],
+            elementsMap
+          ),
           element,
-          element.points[element.points.length - 1],
-          elementsMap
-        ),
-        element,
-        elements,
-        elementsMap,
-        app.scene
-      );
+          elements,
+          elementsMap,
+          app.scene,
+          hit
+        );
+      }
     }
     if (app.state.selectedLinearElement?.customLineAngle === customLineAngle && linearElementEditor.initialState.altFocusPoint && (!suggestedBinding || isShallowEqual(app.state.suggestedBinding ?? [], suggestedBinding))) {
       return null;
@@ -10517,7 +10658,7 @@ var LinearElementEditor = class _LinearElementEditor {
       deltaY = newDraggingPointPosition[1] - draggingPoint[1];
     }
     let suggestedBinding = null;
-    const { positions, updates } = pointDraggingUpdates(
+    const { positions, updates, hit } = pointDraggingUpdates(
       selectedPointsIndices,
       deltaX,
       deltaY,
@@ -10552,17 +10693,20 @@ var LinearElementEditor = class _LinearElementEditor {
       }
     }
     if (isBindingElement(element) && startIsSelected !== endIsSelected) {
-      moveArrowAboveBindable(
-        _LinearElementEditor.getPointGlobalCoordinates(
+      if (hit) {
+        moveArrowAboveBindable(
+          _LinearElementEditor.getPointGlobalCoordinates(
+            element,
+            startIsSelected ? element.points[0] : element.points[element.points.length - 1],
+            elementsMap
+          ),
           element,
-          startIsSelected ? element.points[0] : element.points[element.points.length - 1],
-          elementsMap
-        ),
-        element,
-        elements,
-        elementsMap,
-        app.scene
-      );
+          elements,
+          elementsMap,
+          app.scene,
+          hit
+        );
+      }
     }
     const boundTextElement = getBoundTextElement(element, elementsMap);
     if (boundTextElement) {
@@ -11511,7 +11655,7 @@ var LinearElementEditor = class _LinearElementEditor {
       bestParameter,
       lengths[bestSegmentIndex]
     );
-    const labelPosition = clamp6(
+    const labelPosition = clamp7(
       (prefixSums[bestSegmentIndex] + lengthWithinSegment) / totalLength,
       0,
       1
@@ -11542,12 +11686,12 @@ var LinearElementEditor = class _LinearElementEditor {
     if (segments.length === 0) {
       return null;
     }
-    const targetLength = clamp6(pathParameter, 0, 1) * totalLength;
+    const targetLength = clamp7(pathParameter, 0, 1) * totalLength;
     const found = segments.findIndex(
       (_, i2) => targetLength <= prefixSums[i2 + 1]
     );
     const i = found === -1 ? segments.length - 1 : found;
-    const lengthFraction = lengths[i] === 0 ? 0 : clamp6((targetLength - prefixSums[i]) / lengths[i], 0, 1);
+    const lengthFraction = lengths[i] === 0 ? 0 : clamp7((targetLength - prefixSums[i]) / lengths[i], 0, 1);
     return pathSegmentPointAtLength(segments[i], lengthFraction, lengths[i]);
   }
   static getBoundTextElementPosition = (element, boundTextElement, elementsMap) => {
@@ -11815,16 +11959,19 @@ var pointDraggingUpdates = (selectedPointsIndices, deltaX, deltaY, scenePointerX
       updates: {
         suggestedBinding: suggestedBindingElement ? {
           element: suggestedBindingElement,
-          midPoint: app.state.isMidpointSnappingEnabled ? snapToMid(
-            suggestedBindingElement,
-            elementsMap,
+          midPoint: app.state.isMidpointSnappingEnabled ? getSnapOutlineMidPoint2(
             pointFrom9(
               scenePointerX - linearElementEditor.pointerOffset.x,
               scenePointerY - linearElementEditor.pointerOffset.y
-            )
+            ),
+            suggestedBindingElement,
+            elementsMap,
+            app.state.zoom,
+            element
           ) : void 0
         } : null
-      }
+      },
+      hit: suggestedBindingElement
     };
   }
   if (!startIsDragged && !endIsDragged) {
@@ -11904,7 +12051,8 @@ var pointDraggingUpdates = (selectedPointsIndices, deltaX, deltaY, scenePointerX
           ),
           start.element,
           elementsMap,
-          app.state.zoom
+          app.state.zoom,
+          element
         )
       } : null;
     }
@@ -11935,7 +12083,8 @@ var pointDraggingUpdates = (selectedPointsIndices, deltaX, deltaY, scenePointerX
           ),
           end.element,
           elementsMap,
-          app.state.zoom
+          app.state.zoom,
+          element
         )
       } : null;
     }
@@ -12010,7 +12159,8 @@ var pointDraggingUpdates = (selectedPointsIndices, deltaX, deltaY, scenePointerX
           } : naiveDraggingPoints.get(idx)
         ];
       })
-    )
+    ),
+    hit: startIsDragged ? start.element : end.element
   };
 };
 var determineCustomLinearAngle = (pivotPoint, draggedPoint) => Math.atan2(draggedPoint[1] - pivotPoint[1], draggedPoint[0] - pivotPoint[0]);
@@ -13318,12 +13468,44 @@ var getCanvasPadding = (element) => {
       return 20;
   }
 };
-var getRenderOpacity = (element, containingFrame, elementsPendingErasure, pendingNodes, globalAlpha = 1) => {
-  let opacity = (containingFrame?.opacity ?? 100) * element.opacity / 1e4 * globalAlpha;
-  if (elementsPendingErasure.has(element.id) || pendingNodes && pendingNodes.some((node) => node.id === element.id) || containingFrame && elementsPendingErasure.has(containingFrame.id)) {
+var ZERO_RENDER_OFFSET = { x: 0, y: 0 };
+var getElementRenderOffset = (element, elementsMap, overrides) => {
+  const container = isTextElement(element) ? getContainerElement(element, elementsMap) : null;
+  return overrides?.get((container ?? element).id)?.offset;
+};
+var getRenderElementWithPositionOverride = (element, positionOffset) => {
+  if (positionOffset.x === 0 && positionOffset.y === 0) {
+    return element;
+  }
+  return {
+    ...element,
+    x: element.x + positionOffset.x,
+    y: element.y + positionOffset.y
+  };
+};
+var resolveElementRenderState = (element, elementsMap, renderConfig, allElementsMap = elementsMap) => {
+  const {
+    elementRenderOverrides,
+    elementsPendingErasure,
+    pendingFlowchartNodes
+  } = renderConfig;
+  const override = elementRenderOverrides?.get(element.id);
+  const containingFrame = getContainingFrame(element, elementsMap);
+  const frameOpacity = containingFrame ? clamp8(
+    elementRenderOverrides?.get(containingFrame.id)?.opacity ?? containingFrame.opacity,
+    0,
+    100
+  ) : 100;
+  let opacity = frameOpacity * clamp8(override?.opacity ?? element.opacity, 0, 100) / 1e4;
+  if (elementsPendingErasure.has(element.id) || pendingFlowchartNodes?.some((node) => node.id === element.id) || containingFrame && elementsPendingErasure.has(containingFrame.id)) {
     opacity *= ELEMENT_READY_TO_ERASE_OPACITY / 100;
   }
-  return opacity;
+  const offset = getElementRenderOffset(
+    element,
+    allElementsMap,
+    elementRenderOverrides
+  );
+  return { opacity, offset: offset ?? ZERO_RENDER_OFFSET };
 };
 var cappedElementCanvasSize = (element, elementsMap, zoom) => {
   const AREA_LIMIT = 16777216;
@@ -13648,9 +13830,7 @@ var drawElementOnCanvas = (element, rc, context, renderConfig) => {
 };
 var elementWithCanvasCache = /* @__PURE__ */ new WeakMap();
 var generateElementWithCanvas = (element, elementsMap, renderConfig, appState) => {
-  const zoom = renderConfig ? appState.zoom : {
-    value: 1
-  };
+  const zoom = renderConfig ? appState.zoom : DEFAULT_ZOOM2;
   const prevElementWithCanvas = elementWithCanvasCache.get(element);
   const shouldRegenerateBecauseZoom = prevElementWithCanvas && prevElementWithCanvas.zoomValue !== zoom.value && !appState?.shouldCacheIgnoreZoom;
   const imageCrop = isImageElement(element) ? element.crop : null;
@@ -13673,13 +13853,13 @@ var generateElementWithCanvas = (element, elementsMap, renderConfig, appState) =
 };
 var canSnapElement = (element, appState) => !appState?.shouldCacheIgnoreZoom && (!element.angle || isRightAngleRads(element.angle));
 var SNAP_TIE_BIAS = 1e-6;
-var drawElementFromCanvas = (elementWithCanvas, context, renderConfig, appState, allElementsMap) => {
+var drawElementFromCanvas = (elementWithCanvas, context, renderConfig, appState, allElementsMap, positionOffset) => {
   const element = elementWithCanvas.element;
   const devicePixelRatio = window.devicePixelRatio;
   const padding = getCanvasPadding(element);
   const [x1, y1, x2, y2] = getElementAbsoluteCoords2(element, allElementsMap);
-  const cx = ((x1 + x2) / 2 + appState.scrollX) * devicePixelRatio;
-  const cy = ((y1 + y2) / 2 + appState.scrollY) * devicePixelRatio;
+  const cx = ((x1 + x2) / 2 + positionOffset.x + appState.scrollX) * devicePixelRatio;
+  const cy = ((y1 + y2) / 2 + positionOffset.y + appState.scrollY) * devicePixelRatio;
   context.save();
   context.scale(1 / devicePixelRatio, 1 / devicePixelRatio);
   const boundTextElement = getBoundTextElement(element, allElementsMap);
@@ -13692,8 +13872,8 @@ var drawElementFromCanvas = (elementWithCanvas, context, renderConfig, appState,
     context.beginPath();
     context.rect(cx - outerHalf, cy - outerHalf, outerHalf * 2, outerHalf * 2);
     context.rect(
-      (boundTextCx - boundTextElement.width / 2 - BOUND_TEXT_PADDING3 + appState.scrollX) * devicePixelRatio,
-      (boundTextCy - boundTextElement.height / 2 - BOUND_TEXT_PADDING3 + appState.scrollY) * devicePixelRatio,
+      (boundTextCx - boundTextElement.width / 2 - BOUND_TEXT_PADDING3 + positionOffset.x + appState.scrollX) * devicePixelRatio,
+      (boundTextCy - boundTextElement.height / 2 - BOUND_TEXT_PADDING3 + positionOffset.y + appState.scrollY) * devicePixelRatio,
       (boundTextElement.width + BOUND_TEXT_PADDING3 * 2) * devicePixelRatio,
       (boundTextElement.height + BOUND_TEXT_PADDING3 * 2) * devicePixelRatio
     );
@@ -13708,8 +13888,8 @@ var drawElementFromCanvas = (elementWithCanvas, context, renderConfig, appState,
     );
   }
   context.translate(-cx, -cy);
-  let drawX = (x1 + appState.scrollX) * devicePixelRatio - padding;
-  let drawY = (y1 + appState.scrollY) * devicePixelRatio - padding;
+  let drawX = (x1 + positionOffset.x + appState.scrollX) * devicePixelRatio - padding;
+  let drawY = (y1 + positionOffset.y + appState.scrollY) * devicePixelRatio - padding;
   const transform = context.getTransform();
   if (canSnapElement(element, appState)) {
     const { a: a2, b: b2, c, d, e, f } = transform;
@@ -13719,8 +13899,8 @@ var drawElementFromCanvas = (elementWithCanvas, context, renderConfig, appState,
     const anchorSceneX = anchorCoords?.[0] ?? x1;
     const anchorSceneY = anchorCoords?.[1] ?? y1;
     const anchorPadding = anchor === element ? padding : getCanvasPadding(anchor);
-    const anchorX = (anchorSceneX + appState.scrollX) * devicePixelRatio - anchorPadding;
-    const anchorY = (anchorSceneY + appState.scrollY) * devicePixelRatio - anchorPadding;
+    const anchorX = (anchorSceneX + positionOffset.x + appState.scrollX) * devicePixelRatio - anchorPadding;
+    const anchorY = (anchorSceneY + positionOffset.y + appState.scrollY) * devicePixelRatio - anchorPadding;
     const dx = (x1 - anchorSceneX) * devicePixelRatio + anchorPadding - padding;
     const dy = (y1 - anchorSceneY) * devicePixelRatio + anchorPadding - padding;
     context.setTransform(
@@ -13751,8 +13931,8 @@ var drawElementFromCanvas = (elementWithCanvas, context, renderConfig, appState,
     context.strokeStyle = "#c92a2a";
     context.lineWidth = 3;
     context.strokeRect(
-      (coords.x + appState.scrollX) * devicePixelRatio,
-      (coords.y + appState.scrollY) * devicePixelRatio,
+      (coords.x + positionOffset.x + appState.scrollX) * devicePixelRatio,
+      (coords.y + positionOffset.y + appState.scrollY) * devicePixelRatio,
       getBoundTextMaxWidth(element, textElement) * devicePixelRatio,
       getBoundTextMaxHeight(element, textElement) * devicePixelRatio
     );
@@ -13773,15 +13953,34 @@ var renderSelectionElement = (element, context, appState, selectionColor) => {
   context.strokeRect(offset, offset, element.width, element.height);
   context.restore();
 };
-var renderElement = (element, elementsMap, allElementsMap, rc, context, renderConfig, appState) => {
+var renderElement = (element, elementsMap, allElementsMap, rc, context, renderConfig, appState, renderState = resolveElementRenderState(
+  element,
+  elementsMap,
+  renderConfig,
+  allElementsMap
+)) => {
   const reduceAlphaForSelection = appState.openDialog?.name === "elementLinkSelector" && !appState.selectedElementIds[element.id] && !appState.hoveredElementIds[element.id];
-  context.globalAlpha = getRenderOpacity(
-    element,
-    getContainingFrame(element, elementsMap),
-    renderConfig.elementsPendingErasure,
-    renderConfig.pendingFlowchartNodes,
-    reduceAlphaForSelection ? DEFAULT_REDUCED_GLOBAL_ALPHA : 1
-  );
+  context.save();
+  context.globalAlpha = renderState.opacity * (reduceAlphaForSelection ? DEFAULT_REDUCED_GLOBAL_ALPHA : 1);
+  if ((renderConfig.isExporting || isFrameLikeElement(element)) && (renderState.offset.x || renderState.offset.y)) {
+    context.translate(renderState.offset.x, renderState.offset.y);
+  }
+  try {
+    drawElement(
+      element,
+      elementsMap,
+      allElementsMap,
+      rc,
+      context,
+      renderConfig,
+      appState,
+      renderState
+    );
+  } finally {
+    context.restore();
+  }
+};
+var drawElement = (element, elementsMap, allElementsMap, rc, context, renderConfig, appState, renderState) => {
   switch (element.type) {
     case "magicframe":
     case "frame": {
@@ -13846,7 +14045,8 @@ var renderElement = (element, elementsMap, allElementsMap, rc, context, renderCo
           context,
           renderConfig,
           appState,
-          allElementsMap
+          allElementsMap,
+          renderState.offset
         );
       }
       break;
@@ -13947,7 +14147,9 @@ var renderElement = (element, elementsMap, allElementsMap, rc, context, renderCo
               context,
               renderConfig,
               appState,
-              allElementsMap
+              allElementsMap,
+              // The crop editor's uncropped preview stays at document coordinates.
+              ZERO_RENDER_OFFSET
             );
           }
           context.restore();
@@ -13957,7 +14159,8 @@ var renderElement = (element, elementsMap, allElementsMap, rc, context, renderCo
           context,
           renderConfig,
           appState,
-          allElementsMap
+          allElementsMap,
+          renderState.offset
         );
         context.imageSmoothingEnabled = currentImageSmoothingStatus;
       }
@@ -13967,7 +14170,6 @@ var renderElement = (element, elementsMap, allElementsMap, rc, context, renderCo
       throw new Error(`Unimplemented type ${element.type}`);
     }
   }
-  context.globalAlpha = 1;
 };
 function getFreedrawOutlineAsSegments(element, points, elementsMap) {
   const bounds = getElementBounds(
@@ -14373,6 +14575,29 @@ var getArrowheadShapes = (element, shape, position, arrowhead, generator, option
     }
   }
 };
+var getFreedrawFillCurvePoints = (element) => simplify(element.points, 0.75);
+var freedrawFillPolygonCache = /* @__PURE__ */ new WeakMap();
+var getFreedrawFillPolygon = (element) => {
+  const cached = freedrawFillPolygonCache.get(element);
+  if (cached?.version === element.version) {
+    return cached.polygon;
+  }
+  const ops = new RoughGenerator().curve(getFreedrawFillCurvePoints(element), {
+    roughness: 0,
+    disableMultiStroke: true
+  }).sets[0].ops;
+  const bezierPoints = [];
+  for (const { data } of ops) {
+    for (let i = 0; i < data.length; i += 2) {
+      bezierPoints.push(pointFrom12(data[i], data[i + 1]));
+    }
+  }
+  const polygon3 = polygonFromPoints2(
+    pointsOnBezierCurves(bezierPoints, 0.5)
+  );
+  freedrawFillPolygonCache.set(element, { version: element.version, polygon: polygon3 });
+  return polygon3;
+};
 var generateLinearCollisionShape = (element, elementsMap) => {
   const generator = new RoughGenerator();
   const options = {
@@ -14451,58 +14676,29 @@ var generateLinearCollisionShape = (element, elementsMap) => {
       });
     }
     case "freedraw": {
-      if (element.points.length < 2) {
+      const outlinePoints = getFreedrawOutlinePoints(element);
+      if (outlinePoints.length < 2) {
         return [];
       }
-      const simplifiedPoints = simplify(
-        element.points,
-        0.75
-      );
-      return generator.curve(simplifiedPoints, options).sets[0].ops.slice(0, element.points.length).map((op, i) => {
-        if (i === 0) {
-          const p = pointRotateRads11(
-            pointFrom12(
-              element.x + op.data[0],
-              element.y + op.data[1]
-            ),
-            center,
-            element.angle
-          );
-          return {
-            op: "move",
-            data: pointFrom12(p[0] - element.x, p[1] - element.y)
-          };
-        }
+      const collisionOutline = element.strokeOptions?.variability === "constant" ? simplify(
+        outlinePoints,
+        CONSTANT_WIDTH_FREEDRAW.COLLISION_SIMPLIFY_TOLERANCE
+      ) : outlinePoints;
+      if (collisionOutline.length < 2) {
+        return [];
+      }
+      const [firstX, firstY] = collisionOutline[0];
+      const [lastX, lastY] = collisionOutline[collisionOutline.length - 1];
+      const closedOutline = firstX === lastX && firstY === lastY ? collisionOutline : [...collisionOutline, collisionOutline[0]];
+      return closedOutline.map((point, idx) => {
+        const p = pointRotateRads11(
+          pointFrom12(element.x + point[0], element.y + point[1]),
+          center,
+          element.angle
+        );
         return {
-          op: "bcurveTo",
-          data: [
-            pointRotateRads11(
-              pointFrom12(
-                element.x + op.data[0],
-                element.y + op.data[1]
-              ),
-              center,
-              element.angle
-            ),
-            pointRotateRads11(
-              pointFrom12(
-                element.x + op.data[2],
-                element.y + op.data[3]
-              ),
-              center,
-              element.angle
-            ),
-            pointRotateRads11(
-              pointFrom12(
-                element.x + op.data[4],
-                element.y + op.data[5]
-              ),
-              center,
-              element.angle
-            )
-          ].map(
-            (p) => pointFrom12(p[0] - element.x, p[1] - element.y)
-          ).flat()
+          op: idx === 0 ? "move" : "lineTo",
+          data: pointFrom12(p[0] - element.x, p[1] - element.y)
         };
       });
     }
@@ -14670,12 +14866,8 @@ var _generateElementShape = (element, generator, {
     case "freedraw": {
       const shapes = [];
       if (isPathALoop(element.points)) {
-        const simplifiedPoints = simplify(
-          element.points,
-          0.75
-        );
         shapes.push(
-          generator.curve(simplifiedPoints, {
+          generator.curve(getFreedrawFillCurvePoints(element), {
             ...generateRoughOptions(element, false, isDarkMode),
             stroke: "none"
           })
@@ -14830,7 +15022,12 @@ var VARIABLE_WIDTH_FREEDRAW = {
 };
 var CONSTANT_WIDTH_FREEDRAW = {
   /** Stroke size relative to `strokeWidth` for uniform (laser) strokes. */
-  SIZE_FACTOR: 1.4
+  SIZE_FACTOR: 1.4,
+  /**
+   * Max deviation (px) when dropping vertices of the dense laser outline for
+   * collision. Perfect-freehand outlines are already thinned by `smoothing`.
+   */
+  COLLISION_SIMPLIFY_TOLERANCE: 0.2
 };
 var getFreedrawStreamline = (element) => element.strokeOptions?.streamline ?? DEFAULT_STROKE_STREAMLINE;
 var getVariableWidthFreedrawOutline = (element) => {
@@ -14862,6 +15059,7 @@ var getConstantWidthFreedrawOutline = (element) => {
 var getFreedrawOutlinePoints = (element) => {
   return element.strokeOptions?.variability === "constant" ? getConstantWidthFreedrawOutline(element) : getVariableWidthFreedrawOutline(element);
 };
+var getFreedrawMaxStrokeRadius = (element) => element.strokeOptions?.variability === "constant" ? element.strokeWidth * CONSTANT_WIDTH_FREEDRAW.SIZE_FACTOR : element.strokeWidth * VARIABLE_WIDTH_FREEDRAW.SIZE_FACTOR + 3;
 var getFreedrawStrokeCenterPoints = (element) => me(element.points, {
   size: element.strokeWidth * VARIABLE_WIDTH_FREEDRAW.SIZE_FACTOR,
   streamline: getFreedrawStreamline(element),
@@ -16313,13 +16511,15 @@ var newTextElement = (opts) => {
   );
   return textElement;
 };
-var getAdjustedDimensions = (element, elementsMap, nextText) => {
+var getAdjustedDimensions = (element, elementsMap, nextText, nextFixedWidth) => {
   let { width: nextWidth, height: nextHeight } = measureText(
     nextText,
     getFontString5(element),
     element.lineHeight
   );
-  if (!element.autoResize) {
+  if (nextFixedWidth !== void 0) {
+    nextWidth = nextFixedWidth;
+  } else if (!element.autoResize) {
     nextWidth = element.width;
   }
   const { textAlign, verticalAlign } = element;
@@ -16403,10 +16603,26 @@ var adjustXYWithRotation = (sides, x, y, angle2, deltaX1, deltaY1, deltaX2, delt
   }
   return [x, y];
 };
-var refreshTextDimensions = (textElement, container, elementsMap, text = textElement.text) => {
+var refreshTextDimensions = (textElement, container, elementsMap, text = textElement.text, maxWidth) => {
   if (textElement.isDeleted) {
     return;
   }
+  if (maxWidth !== void 0 && !container && textElement.autoResize && textElement.width <= maxWidth) {
+    const font = getFontString5(textElement);
+    if (measureText(text, font, textElement.lineHeight).width > maxWidth) {
+      const wrappedText = wrapText(text, font, maxWidth);
+      return {
+        text: wrappedText,
+        autoResize: false,
+        ...getAdjustedDimensions(
+          textElement,
+          elementsMap,
+          wrappedText,
+          maxWidth
+        )
+      };
+    }
+  }
   if (container || !textElement.autoResize) {
     text = wrapText(
       text,
@@ -16530,7 +16746,7 @@ var getTextBindingForArrowEndpoint = (arrow, startOrEnd, elementsMap, targetStro
   }
   const direction = vectorFromPoint9(endpoint, neighbor);
   const heading = Math.abs(direction[0]) >= Math.abs(direction[1]) ? direction[0] >= 0 ? HEADING_RIGHT : HEADING_LEFT : direction[1] >= 0 ? HEADING_DOWN : HEADING_UP;
-  const gap = isElbowArrow(arrow) ? 0 : getBindingGap({ strokeWidth: targetStrokeWidth }, arrow);
+  const gap = isElbowArrow(arrow) ? 0 : getBindingGap({ strokeWidth: targetStrokeWidth });
   const awayFromTip = vectorNormalize5(vectorFromPoint9(neighbor, endpoint));
   const alongHeading = Math.abs(
     vectorDot(awayFromTip, vector3(heading[0], heading[1]))
@@ -16595,8 +16811,8 @@ import {
   pointFrom as pointFrom14,
   pointRotateRads as pointRotateRads13,
   polygonArea,
-  polygonIncludesPoint,
-  polygonIncludesPointNonZero,
+  polygonIncludesPoint as polygonIncludesPoint2,
+  polygonIncludesPointNonZero as polygonIncludesPointNonZero2,
   polygonSignedArea
 } from "@excalidraw/math";
 import { isOpaqueColor, isTransparent as isTransparent5 } from "@excalidraw/common";
@@ -17267,7 +17483,7 @@ var selectFaceFromArrangement = (faces, point, options) => {
     if (absArea < options.minArea) {
       continue;
     }
-    if (!polygonIncludesPointNonZero(point, face.ring)) {
+    if (!polygonIncludesPointNonZero2(point, face.ring)) {
       continue;
     }
     if (absArea < bestArea) {
@@ -17283,13 +17499,13 @@ var selectFaceFromArrangement = (faces, point, options) => {
     (face) => face.componentId !== selected.componentId && // a component's outside contour shares the unbounded face's orientation
     Math.sign(areaOf.get(face)) === outerSign && Math.abs(areaOf.get(face)) >= options.minArea && // the click face never sits inside one of its own holes (defensive —
     // the smallest-containing-face selection above already guarantees it)
-    !polygonIncludesPointNonZero(point, face.ring) && // components never intersect (crossings would have merged them), so a
+    !polygonIncludesPointNonZero2(point, face.ring) && // components never intersect (crossings would have merged them), so a
     // single-vertex test decides containment
-    polygonIncludesPointNonZero(face.ring[0], selected.ring)
+    polygonIncludesPointNonZero2(face.ring[0], selected.ring)
   );
   const holes = islandCandidates.filter(
     (hole) => !islandCandidates.some(
-      (other) => other !== hole && polygonIncludesPointNonZero(hole.ring[0], other.ring)
+      (other) => other !== hole && polygonIncludesPointNonZero2(hole.ring[0], other.ring)
     )
   );
   return { face: selected, holes };
@@ -17575,7 +17791,7 @@ var computeBucketFillPolygon = (args) => {
         );
       }
     }
-    return samples.some((sample) => polygonIncludesPoint(sample, fillRegion));
+    return samples.some((sample) => polygonIncludesPoint2(sample, fillRegion));
   };
   const paintOverlapsRegion = (element) => {
     const [minX, minY, maxX, maxY] = getElementBounds(element, elementsMap);
@@ -17588,7 +17804,7 @@ var computeBucketFillPolygon = (args) => {
     const outline = getElementLineSegments(element, elementsMap);
     const outlineStep = Math.max(1, Math.floor(outline.length / 16));
     for (let i = 0; i < outline.length; i += outlineStep) {
-      if (polygonIncludesPoint(outline[i][0], fillRegion)) {
+      if (polygonIncludesPoint2(outline[i][0], fillRegion)) {
         return true;
       }
     }
@@ -17789,8 +18005,9 @@ var duplicateElements = (opts) => {
   const duplicatedElements = [];
   const origElements = [];
   const origIdToDuplicateId = /* @__PURE__ */ new Map();
-  const duplicateIdToOrigElement = /* @__PURE__ */ new Map();
+  const duplicateIdToOrigId = /* @__PURE__ */ new Map();
   const duplicateElementsMap = /* @__PURE__ */ new Map();
+  const origElementsMap = /* @__PURE__ */ new Map();
   const elementsMap = arrayToMap9(elements);
   const _idsOfElementsToDuplicate = opts.type === "in-place" ? opts.idsOfElementsToDuplicate : new Map(elements.map((el) => [el.id, el]));
   const preserveFrameChildrenOrder = opts.type === "everything" && opts.preserveFrameChildrenOrder;
@@ -17822,8 +18039,9 @@ var duplicateElements = (opts) => {
         );
         processedIds.set(newElement3.id, true);
         duplicateElementsMap.set(newElement3.id, newElement3);
+        origElementsMap.set(element2.id, element2);
         origIdToDuplicateId.set(element2.id, newElement3.id);
-        duplicateIdToOrigElement.set(newElement3.id, element2);
+        duplicateIdToOrigId.set(newElement3.id, element2.id);
         origElements.push(element2);
         duplicatedElements.push(newElement3);
         acc.push(newElement3);
@@ -17935,7 +18153,9 @@ var duplicateElements = (opts) => {
   );
   if (opts.overrides) {
     for (const duplicateElement2 of duplicatedElements) {
-      const origElement = duplicateIdToOrigElement.get(duplicateElement2.id);
+      const origElement = origElementsMap.get(
+        duplicateIdToOrigId.get(duplicateElement2.id)
+      );
       if (origElement) {
         Object.assign(
           duplicateElement2,
@@ -17951,10 +18171,82 @@ var duplicateElements = (opts) => {
   return {
     duplicatedElements,
     duplicateElementsMap,
+    origElementsMap,
     elementsWithDuplicates,
-    origIdToDuplicateId
+    origIdToDuplicateId,
+    duplicateIdToOrigId
   };
 };
+var reconcileDuplicatedElements = (hostElements, nextElements, duplicatedElements) => {
+  if (hostElements === false) {
+    return { elements: nextElements, duplicatedElements: [] };
+  }
+  if (!hostElements) {
+    return { elements: nextElements, duplicatedElements };
+  }
+  const duplicatesMap = arrayToMap9(duplicatedElements);
+  const hostDuplicates = /* @__PURE__ */ new Map();
+  for (const element of hostElements) {
+    if (duplicatesMap.has(element.id)) {
+      hostDuplicates.set(element.id, element);
+    }
+  }
+  const survivedIds = /* @__PURE__ */ new Set();
+  for (const [id, element] of hostDuplicates) {
+    const duplicate = duplicatesMap.get(id);
+    if (element !== duplicate) {
+      Object.assign(duplicate, element);
+      ShapeCache.delete(duplicate);
+      bumpVersion(duplicate);
+    }
+    if (!duplicate.isDeleted) {
+      survivedIds.add(id);
+    }
+  }
+  const isVetoed = (id) => duplicatesMap.has(id) && !survivedIds.has(id);
+  for (const id of survivedIds) {
+    const duplicate = duplicatesMap.get(id);
+    if (isBoundToContainer(duplicate) && isVetoed(duplicate.containerId)) {
+      survivedIds.delete(id);
+    }
+  }
+  const elements = [];
+  for (const element of hostElements) {
+    const duplicate = duplicatesMap.get(element.id);
+    if (!duplicate) {
+      elements.push(element);
+    } else if (survivedIds.has(element.id) && hostDuplicates.get(element.id) === element) {
+      elements.push(duplicate);
+    }
+  }
+  if (survivedIds.size === duplicatedElements.length) {
+    return { elements, duplicatedElements };
+  }
+  const survivedDuplicates = duplicatedElements.filter(
+    (duplicate) => survivedIds.has(duplicate.id)
+  );
+  for (const duplicate of survivedDuplicates) {
+    const updates = {};
+    if (duplicate.boundElements?.some((binding) => isVetoed(binding.id))) {
+      updates.boundElements = duplicate.boundElements.filter(
+        (binding) => !isVetoed(binding.id)
+      );
+    }
+    if (duplicate.frameId && isVetoed(duplicate.frameId)) {
+      updates.frameId = null;
+    }
+    if (isArrowElement(duplicate)) {
+      if (duplicate.startBinding && isVetoed(duplicate.startBinding.elementId)) {
+        updates.startBinding = null;
+      }
+      if (duplicate.endBinding && isVetoed(duplicate.endBinding.elementId)) {
+        updates.endBinding = null;
+      }
+    }
+    Object.assign(duplicate, updates);
+  }
+  return { elements, duplicatedElements: survivedDuplicates };
+};
 var _deepCopyElement = (val, depth = 0) => {
   if (val == null || typeof val !== "object") {
     return val;
@@ -20430,13 +20722,11 @@ var dragSelectedElements = (pointerDownState, _selectedElements, offset, scene,
     snapOffset,
     gridSize
   );
-  const elementsToUpdateIds = new Set(
-    Array.from(elementsToUpdate, (el) => el.id)
+  const elementsToUpdateArray = Array.from(elementsToUpdate);
+  const elementsToUpdateIds = getSimultaneouslyUpdatedElementIds(
+    elementsToUpdateArray
   );
   elementsToUpdate.forEach((element) => {
-    const isArrow = !isArrowElement(element);
-    const isStartBoundElementSelected = isArrow || (element.startBinding ? elementsToUpdateIds.has(element.startBinding.elementId) : false);
-    const isEndBoundElementSelected = isArrow || (element.endBinding ? elementsToUpdateIds.has(element.endBinding.elementId) : false);
     if (!isArrowElement(element)) {
       updateElementCoords(pointerDownState, element, scene, adjustedOffset);
       const textElement = getBoundTextElement(
@@ -20452,7 +20742,7 @@ var dragSelectedElements = (pointerDownState, _selectedElements, offset, scene,
         );
       }
       updateBoundElements(element, scene, {
-        simultaneouslyUpdated: Array.from(elementsToUpdate)
+        simultaneouslyUpdated: elementsToUpdateArray
       });
     } else if (
       // NOTE: Add a little initial drag to the arrow dragging when the arrow
@@ -20461,8 +20751,8 @@ var dragSelectedElements = (pointerDownState, _selectedElements, offset, scene,
       elementsToUpdate.size > 1 || Math.max(Math.abs(adjustedOffset.x), Math.abs(adjustedOffset.y)) > DRAGGING_THRESHOLD2 || !element.startBinding && !element.endBinding
     ) {
       updateElementCoords(pointerDownState, element, scene, adjustedOffset);
-      const shouldUnbindStart = element.startBinding && !isStartBoundElementSelected;
-      const shouldUnbindEnd = element.endBinding && !isEndBoundElementSelected;
+      const shouldUnbindStart = element.startBinding ? !elementsToUpdateIds.has(element.startBinding.elementId) : true;
+      const shouldUnbindEnd = element.endBinding ? !elementsToUpdateIds.has(element.endBinding.elementId) : true;
       if (shouldUnbindStart || shouldUnbindEnd) {
         if (shouldUnbindStart) {
           unbindBindingElement(element, "start", scene);
@@ -20701,7 +20991,7 @@ import {
   getFontString as getFontString7
 } from "@excalidraw/common";
 var embeddedLinkCache = /* @__PURE__ */ new Map();
-var RE_YOUTUBE = /^(?:http(?:s)?:\/\/)?(?:www\.)?youtu(?:be\.com|\.be)\/(embed\/|watch\?v=|shorts\/|playlist\?list=|embed\/videoseries\?list=)?([a-zA-Z0-9_-]+)/;
+var RE_YOUTUBE = /^(?:http(?:s)?:\/\/)?(?:www\.)?youtu(?:be\.com|\.be)\/(embed\/|watch\?v=|shorts\/|live\/|playlist\?list=|embed\/videoseries\?list=)?([a-zA-Z0-9_-]+)/;
 var RE_VIMEO = /^(?:http(?:s)?:\/\/)?(?:(?:w){3}\.)?(?:player\.)?vimeo\.com\/(?:video\/)?([^?\s]+)(?:\?.*)?$/;
 var RE_FIGMA = /^https:\/\/(?:www\.)?figma\.com/;
 var RE_GH_GIST = /^https:\/\/gist\.github\.com\/([\w_-]+)\/([\w_-]+)/;
@@ -21110,7 +21400,7 @@ var embeddableURLValidator = (url, validateEmbeddable) => {
 init_define_import_meta_env();
 import { invariant as invariant11, toBrandedType as toBrandedType2 } from "@excalidraw/common";
 import {
-  clamp as clamp7,
+  clamp as clamp9,
   pointFrom as pointFrom15
 } from "@excalidraw/math";
 var VERTICAL_OFFSET = 100;
@@ -21141,7 +21431,7 @@ var findNearestFreeSlot = (ideal, size, occupied) => {
     if (gapEnds[i] - gapStarts[i] < size) {
       continue;
     }
-    const start = clamp7(ideal, gapStarts[i], gapEnds[i] - size);
+    const start = clamp9(ideal, gapStarts[i], gapEnds[i] - size);
     const distance3 = Math.abs(start - ideal);
     if (distance3 <= bestDistance) {
       best = start;
@@ -21339,9 +21629,17 @@ var createBindingArrow = (startBindingElement, endBindingElement, direction, app
     startBindingElement,
     "orbit",
     "start",
-    scene
+    scene,
+    appState.zoom
+  );
+  bindBindingElement(
+    bindingArrow,
+    endBindingElement,
+    "orbit",
+    "end",
+    scene,
+    appState.zoom
   );
-  bindBindingElement(bindingArrow, endBindingElement, "orbit", "end", scene);
   const changedElements = /* @__PURE__ */ new Map();
   changedElements.set(
     startBindingElement.id,
@@ -21670,13 +21968,7 @@ var getContiguousFrameRangeElements = (allElements, frameId) => {
   }
   return allElements.slice(rangeStart, rangeEnd + 1);
 };
-var moveArrowAboveBindable2 = (point, arrow, elements, elementsMap, scene, hit) => {
-  const hoveredElement = hit ? hit : getHoveredElementForBinding(
-    point,
-    // SAFETY: callers that omit `hit` pass non-deleted elements
-    getNonDeletedElements(elements),
-    elementsMap
-  );
+var moveArrowAboveBindable2 = (point, arrow, elements, elementsMap, scene, hoveredElement) => {
   if (!hoveredElement) {
     return elements;
   }
@@ -22027,7 +22319,7 @@ var isFocusPointVisible = (focusPoint, arrow, bindableElement, elementsMap, appS
     element: bindableElement,
     elementsMap,
     point: focusPoint,
-    threshold: getBindingGap(bindableElement, arrow),
+    threshold: getBindingGap(bindableElement),
     overrideShouldTestInside: true
   });
 };
@@ -22119,12 +22411,11 @@ var handleFocusPointDrag = (linearElementEditor, elementsMap, pointerCoords, sce
     pointerCoords.y - offsetY
   );
   const bindingField = isStartBinding ? "startBinding" : "endBinding";
-  const hit = getHoveredElementForFocusPoint(
+  const hit = getHoveredElementForBinding(
     point,
-    arrow,
     scene.getNonDeletedElements(),
     elementsMap,
-    maxBindingDistance_simple(appState.zoom)
+    appState.zoom
   );
   if (hit && isBindingEnabled(appState)) {
     if (arrow[bindingField] && hit.id !== binding?.elementId) {
@@ -22142,6 +22433,7 @@ var handleFocusPointDrag = (linearElementEditor, elementsMap, pointerCoords, sce
         newMode || "orbit",
         linearElementEditor.draggedFocusPointBinding,
         scene,
+        appState.zoom,
         point
       );
     }
@@ -22455,6 +22747,198 @@ var normalizeSVG = (SVGString) => {
   }
 };
 
+// src/listMarker.ts
+init_define_import_meta_env();
+import { arrayToMap as arrayToMap13 } from "@excalidraw/common";
+var LIST_MARKER_REGEX = /^(\s*)(?:\((\d{1,9}|[a-zA-Z]+)\)|\[(\d{1,9})\]|(\d{1,9}|[a-zA-Z]+)([.)]))(?=\s|$)/;
+var LONE_NUMBER_REGEX = /^(\s*)(\d{1,9})\s*$/;
+var LAST_ALPHA_ORDINAL = "h".charCodeAt(0) - "a".charCodeAt(0) + 1;
+var MAX_ORDINAL = {
+  decimal: 42,
+  alpha: 9,
+  // i. (then switching to roman)
+  roman: 99
+};
+var toRoman = (value) => ["", "x", "xx", "xxx", "xl", "l", "lx", "lxx", "lxxx", "xc"][Math.floor(value / 10)] + ["", "i", "ii", "iii", "iv", "v", "vi", "vii", "viii", "ix"][value % 10];
+var ROMAN_VALUES = new Map(
+  Array.from({ length: MAX_ORDINAL.roman }, (_, index) => [
+    toRoman(index + 1),
+    index + 1
+  ])
+);
+var parseLoneNumber = (text) => {
+  const match = text.match(LONE_NUMBER_REGEX);
+  if (!match) {
+    return null;
+  }
+  const [, indent, value] = match;
+  return {
+    index: indent.length,
+    value,
+    kind: "decimal",
+    isUpperCase: false,
+    style: "decimal",
+    ordinal: parseInt(value, 10),
+    contentIndex: text.length
+  };
+};
+var parseListMarker = (text) => {
+  const match = text.match(LIST_MARKER_REGEX);
+  if (!match) {
+    return null;
+  }
+  const [, indent, parenValue, bracketValue, plainValue, plainSuffix] = match;
+  const value = parenValue ?? bracketValue ?? plainValue;
+  const lowerCaseValue = value.toLowerCase();
+  const isUpperCase = /[A-Z]/.test(value);
+  const alphaOrdinal = lowerCaseValue.charCodeAt(0) - "a".charCodeAt(0) + 1;
+  let kind;
+  let ordinal;
+  if (/\d/.test(value)) {
+    kind = "decimal";
+    ordinal = parseInt(value, 10);
+  } else if (isUpperCase && /[a-z]/.test(value)) {
+    return null;
+  } else if (value.length === 1 && alphaOrdinal <= LAST_ALPHA_ORDINAL) {
+    kind = "alpha";
+    ordinal = alphaOrdinal;
+  } else if (ROMAN_VALUES.has(lowerCaseValue)) {
+    kind = "roman";
+    ordinal = ROMAN_VALUES.get(lowerCaseValue);
+  } else {
+    return null;
+  }
+  const affixes = parenValue !== void 0 ? "()" : bracketValue !== void 0 ? "[]" : plainSuffix;
+  return {
+    index: indent.length + (plainValue !== void 0 ? 0 : 1),
+    value,
+    kind,
+    isUpperCase,
+    style: `${kind}${isUpperCase ? "-upper" : ""}${affixes}`,
+    ordinal,
+    contentIndex: match[0].length + text.slice(match[0].length).match(/^\s*/)[0].length
+  };
+};
+var getListItemMarker = (text) => {
+  const marker = parseLoneNumber(text) ?? parseListMarker(text);
+  if (!marker || marker.ordinal > MAX_ORDINAL[marker.kind]) {
+    return null;
+  }
+  const otherLines = text.slice(marker.index).split("\n").slice(1);
+  if (otherLines.some((line2) => parseListMarker(line2)?.style === marker.style)) {
+    return null;
+  }
+  return marker;
+};
+var renumberListMarker = (text, marker, ordinal) => {
+  if (ordinal > MAX_ORDINAL[marker.kind]) {
+    return null;
+  }
+  let value;
+  if (marker.kind === "decimal") {
+    value = String(ordinal).padStart(
+      marker.value.startsWith("0") ? marker.value.length : 0,
+      "0"
+    );
+  } else if (marker.kind === "alpha") {
+    value = String.fromCharCode("a".charCodeAt(0) + ordinal - 1);
+  } else {
+    value = toRoman(ordinal);
+  }
+  if (marker.isUpperCase) {
+    value = value.toUpperCase();
+  }
+  return text.slice(0, marker.index) + value + text.slice(marker.index + marker.value.length);
+};
+var setText = (element, container, originalText, scene) => {
+  if (container) {
+    scene.mutateElement(element, { originalText });
+    redrawTextBoundingBox(element, container, scene);
+  } else {
+    scene.mutateElement(element, {
+      originalText,
+      // re-wraps the text, and keeps it anchored as per its alignment
+      ...refreshTextDimensions(
+        element,
+        null,
+        scene.getNonDeletedElementsMap(),
+        originalText
+      )
+    });
+  }
+};
+var advanceDuplicatedListMarkers = (duplicatedElements, scene) => {
+  const duplicatesMap = arrayToMap13(duplicatedElements);
+  const elementsMap = scene.getNonDeletedElementsMap();
+  const itemsByStyle = /* @__PURE__ */ new Map();
+  for (const element of duplicatedElements) {
+    if (isBoundToContainer(element) && duplicatesMap.has(element.containerId)) {
+      continue;
+    }
+    const text = isTextElement(element) ? element : getBoundTextElement(element, elementsMap);
+    const marker = text && getListItemMarker(text.originalText);
+    if (!text || !marker) {
+      return [];
+    }
+    const items = itemsByStyle.get(marker.style) ?? [];
+    items.push({
+      element: text,
+      container: text === element ? null : element,
+      marker
+    });
+    itemsByStyle.set(marker.style, items);
+  }
+  const allItems = [...itemsByStyle.values()].flat();
+  if (allItems.length > 1 && allItems.some(
+    ({ element, marker }) => marker.contentIndex < element.originalText.length
+  )) {
+    return [];
+  }
+  const advances = [];
+  for (const items of itemsByStyle.values()) {
+    const maxOrdinal = Math.max(...items.map((item) => item.marker.ordinal));
+    items.sort((a2, b2) => a2.marker.ordinal - b2.marker.ordinal);
+    for (const [index, { element, container, marker }] of items.entries()) {
+      const nextOriginalText = renumberListMarker(
+        element.originalText,
+        marker,
+        maxOrdinal + 1 + index
+      );
+      if (nextOriginalText === null) {
+        continue;
+      }
+      advances.push({
+        elementId: element.id,
+        prevOriginalText: element.originalText,
+        nextOriginalText,
+        contentStart: marker.contentIndex + nextOriginalText.length - element.originalText.length,
+        prevContainerSize: container ? { width: container.width, height: container.height } : null
+      });
+      setText(element, container, nextOriginalText, scene);
+    }
+  }
+  return advances;
+};
+var applyListMarkerAdvances = (advances, direction, scene) => {
+  const elementsMap = scene.getNonDeletedElementsMap();
+  for (const advance of advances) {
+    const element = elementsMap.get(advance.elementId);
+    if (!element || !isTextElement(element)) {
+      continue;
+    }
+    const container = getContainerElement(element, elementsMap);
+    if (direction === "prev" && container && advance.prevContainerSize) {
+      scene.mutateElement(container, advance.prevContainerSize);
+    }
+    setText(
+      element,
+      container,
+      direction === "prev" ? advance.prevOriginalText : advance.nextOriginalText,
+      scene
+    );
+  }
+};
+
 // src/positionElementsOnGrid.ts
 init_define_import_meta_env();
 var positionElementsOnGrid = (elements, centerX, centerY, padding = 50) => {
@@ -24008,7 +24492,7 @@ import {
   VERTICAL_ALIGN as VERTICAL_ALIGN5,
   getSizeFromPoints as getSizeFromPoints3,
   randomId as randomId4,
-  arrayToMap as arrayToMap13,
+  arrayToMap as arrayToMap14,
   assertNever as assertNever5,
   cloneJSON,
   getFontString as getFontString9,
@@ -24017,7 +24501,8 @@ import {
   toBrandedType as toBrandedType3,
   getLineHeight as getLineHeight3,
   DEFAULT_STICKY_NOTE_SIZE as DEFAULT_STICKY_NOTE_SIZE2,
-  isTransparent as isTransparent6
+  isTransparent as isTransparent6,
+  DEFAULT_ZOOM as DEFAULT_ZOOM3
 } from "@excalidraw/common";
 var DEFAULT_LINEAR_ELEMENT_PROPS = {
   width: 100,
@@ -24048,7 +24533,7 @@ var bindTextToContainer = (container, textProps, scene) => {
   redrawTextBoundingBox(textElement, container, scene);
   return [container, textElement];
 };
-var bindLinearElementToElement = (linearElement, start, end, elementStore, scene) => {
+var bindLinearElementToElement = (linearElement, start, end, elementStore, scene, zoom) => {
   let startBoundElement;
   let endBoundElement;
   Object.assign(linearElement, {
@@ -24123,7 +24608,8 @@ var bindLinearElementToElement = (linearElement, start, end, elementStore, scene
         startBoundElement,
         "orbit",
         "start",
-        scene
+        scene,
+        zoom
       );
     }
   }
@@ -24194,7 +24680,8 @@ var bindLinearElementToElement = (linearElement, start, end, elementStore, scene
         endBoundElement,
         "orbit",
         "end",
-        scene
+        scene,
+        zoom
       );
     }
   }
@@ -24252,7 +24739,7 @@ var ElementStore = class {
   };
   getElementsMap = () => {
     return toBrandedType3(
-      arrayToMap13(this.getElements())
+      arrayToMap14(this.getElements())
     );
   };
   getElement = (id) => {
@@ -24443,7 +24930,8 @@ var convertToExcalidrawElements = (elementsSkeleton, opts) => {
               originalStart,
               originalEnd,
               elementStore,
-              scene
+              scene,
+              DEFAULT_ZOOM3
             );
             container = linearElement;
             elementStore.add(linearElement);
@@ -24467,7 +24955,8 @@ var convertToExcalidrawElements = (elementsSkeleton, opts) => {
                 start,
                 end,
                 elementStore,
-                scene
+                scene,
+                DEFAULT_ZOOM3
               );
               elementStore.add(linearElement);
               elementStore.add(startBoundElement);
@@ -25117,7 +25606,6 @@ export {
   AppStateDelta,
   BASE_ARROW_MIN_LENGTH,
   BASE_BINDING_GAP,
-  BASE_BINDING_GAP_ELBOW,
   BASE_PADDING,
   BindableElement,
   BoundElement,
@@ -25155,7 +25643,9 @@ export {
   addElementsToFrame,
   addNewNodes,
   addToGroup,
+  advanceDuplicatedListMarkers,
   alignElements,
+  applyListMarkerAdvances,
   avoidRectangularCorner,
   bindBindingElement,
   bindBindingElementToFixedPoint,
@@ -25218,6 +25708,7 @@ export {
   generateRoughOptions,
   getActiveTextElement,
   getAllHoveredElementAtPoint,
+  getAllMidpoints,
   getApproxMinLineHeight,
   getApproxMinLineWidth,
   getArrowLocalFixedPoints,
@@ -25255,10 +25746,12 @@ export {
   getDiamondPoints,
   getDragOffsetXY,
   getDraggedElementsBounds,
+  getElbowArrowSnapMidPoint,
   getElementAbsoluteCoords2 as getElementAbsoluteCoords,
   getElementBounds,
   getElementLineSegments,
   getElementPointsCoords,
+  getElementRenderOffset,
   getElementShape,
   getElementWithTransformHandleType,
   getElementsCompletelyInFrame,
@@ -25275,6 +25768,8 @@ export {
   getFrameChildrenInsertionIndex,
   getFrameLikeElements,
   getFrameLikeTitle,
+  getFreedrawFillPolygon,
+  getFreedrawMaxStrokeRadius,
   getFreedrawOutlineAsSegments,
   getFreedrawOutlinePoints,
   getFreedrawStrokeCenterPoints,
@@ -25282,7 +25777,6 @@ export {
   getGlobalFixedPoints,
   getHeadingForElbowArrowSnap,
   getHoveredElementForBinding,
-  getHoveredElementForFocusPoint,
   getInitializedImageElements,
   getLineHeightInPx,
   getLineWidth,
@@ -25305,7 +25799,7 @@ export {
   getPerfectElementSize,
   getPositionAfterHeightChange,
   getRectangleBoxAbsoluteCoords,
-  getRenderOpacity,
+  getRenderElementWithPositionOverride,
   getResizeArrowDirection,
   getResizeOffsetXY,
   getResizedElementAbsoluteCoords,
@@ -25317,6 +25811,7 @@ export {
   getSelectedGroupIdForElement,
   getSelectedGroupIds,
   getSelectionStateForElements,
+  getSimultaneouslyUpdatedElementIds,
   getSnapOutlineMidPoint,
   getStickyNoteCornerRadius,
   getStickyNoteDateLabel,
@@ -25331,6 +25826,7 @@ export {
   getTextAnchorRatios,
   getTextBindingForArrowEndpoint,
   getTextElementAngle,
+  getTextElementWithAccuratePosition,
   getTextFromElements,
   getTextHeight,
   getTextWidth,
@@ -25417,6 +25913,7 @@ export {
   isMeasureTextSupported,
   isNodeInFlowchart,
   isNonDeletedElement,
+  isOpaqueForBinding,
   isPathALoop,
   isPointInElement,
   isRectangularElement,
@@ -25481,7 +25978,9 @@ export {
   pointInsideBoundsInclusive,
   positionElementsOnGrid,
   projectFixedPointOntoDiagonal,
+  reanchorBindingsToOutline,
   recognizeShape,
+  reconcileDuplicatedElements,
   redrawTextBoundingBox,
   refreshTextDimensions,
   relayoutStickyNotes,
@@ -25498,6 +25997,7 @@ export {
   resizeSingleElement,
   resizeSingleTextElement,
   resizeTest,
+  resolveElementRenderState,
   selectGroup,
   selectGroupsForSelectedElements,
   selectGroupsFromGivenElements,
@@ -25506,7 +26006,6 @@ export {
   shouldApplyFrameClip,
   shouldTestInside,
   showSelectedShapeActions,
-  snapToMid,
   suppportsHorizontalAlign,
   syncInvalidIndices,
   syncInvalidIndicesImmutable,