@excalidraw/element 0.18.0-51ad895 → 0.18.0-54a9826

package/dist/dev/index.js

@@ -199,7 +199,7 @@ import {
   radiansBetweenAngles,
   radiansDifference
 } from "@excalidraw/math";
-import { pointsEqual as pointsEqual6 } from "@excalidraw/math";
+import { pointsEqual as pointsEqual7 } from "@excalidraw/math";
 
 // src/bounds.ts
 init_define_import_meta_env();
@@ -2447,21 +2447,6 @@ var getClosedCurveShape = (element, roughShape, startingPoint = pointFrom(0, 0),
 
 // src/shape.ts
 init_define_import_meta_env();
-import {
-  pointFrom as pointFrom13,
-  pointDistance as pointDistance6,
-  pointRotateRads as pointRotateRads12
-} from "@excalidraw/math";
-import {
-  ROUGHNESS,
-  isTransparent as isTransparent3,
-  assertNever as assertNever2,
-  COLOR_PALETTE,
-  LINE_POLYGON_POINT_MERGE_DISTANCE
-} from "@excalidraw/common";
-
-// src/renderElement.ts
-init_define_import_meta_env();
 
 // ../../node_modules/perfect-freehand/dist/esm/index.js
 init_define_import_meta_env();
@@ -2626,7 +2611,24 @@ function ae(e, t = {}) {
   return ce(me(e, t), t);
 }
 
+// src/shape.ts
+import {
+  pointFrom as pointFrom13,
+  pointDistance as pointDistance6,
+  pointRotateRads as pointRotateRads12
+} from "@excalidraw/math";
+import {
+  ROUGHNESS,
+  THEME as THEME2,
+  isTransparent as isTransparent3,
+  assertNever as assertNever2,
+  COLOR_PALETTE,
+  LINE_POLYGON_POINT_MERGE_DISTANCE,
+  applyDarkModeFilter as applyDarkModeFilter2
+} from "@excalidraw/common";
+
 // src/renderElement.ts
+init_define_import_meta_env();
 import {
   isRightAngleRads,
   lineSegment as lineSegment6,
@@ -2638,13 +2640,16 @@ import {
   DEFAULT_REDUCED_GLOBAL_ALPHA,
   ELEMENT_READY_TO_ERASE_OPACITY,
   FRAME_STYLE,
+  DARK_THEME_FILTER,
   MIME_TYPES,
   THEME,
   distance as distance2,
   getFontString as getFontString3,
   isRTL,
   getVerticalOffset,
-  invariant as invariant9
+  invariant as invariant9,
+  applyDarkModeFilter,
+  isSafari
 } from "@excalidraw/common";
 
 // src/cropElement.ts
@@ -3111,7 +3116,7 @@ import {
   pointCenter as pointCenter2,
   pointFrom as pointFrom9,
   pointRotateRads as pointRotateRads9,
-  pointsEqual as pointsEqual5,
+  pointsEqual as pointsEqual6,
   pointDistance as pointDistance5,
   vectorFromPoint as vectorFromPoint8,
   curveLength,
@@ -3129,7 +3134,6 @@ import {
 } from "@excalidraw/common";
 import {
   deconstructLinearOrFreeDrawElement as deconstructLinearOrFreeDrawElement2,
-  getHoveredElementForBinding as getHoveredElementForBinding2,
   isPathALoop as isPathALoop2,
   moveArrowAboveBindable,
   projectFixedPointOntoDiagonal as projectFixedPointOntoDiagonal2
@@ -3153,6 +3157,7 @@ import {
   pointFrom as pointFrom8,
   pointFromVector as pointFromVector6,
   pointRotateRads as pointRotateRads8,
+  pointsEqual as pointsEqual5,
   vectorFromPoint as vectorFromPoint7,
   vectorNormalize as vectorNormalize4,
   vectorScale as vectorScale7
@@ -3350,7 +3355,6 @@ var getDefaultRoundnessTypeForElement = (element) => {
   }
   return null;
 };
-var isBounds = (box) => Array.isArray(box) && box.length === 4 && typeof box[0] === "number" && typeof box[1] === "number" && typeof box[2] === "number" && typeof box[3] === "number";
 var getLinearElementSubType = (element) => {
   if (isSharpArrow(element)) {
     return "sharpArrow";
@@ -4776,6 +4780,11 @@ var shouldTestInside = (element) => {
   }
   return isDraggableFromInside || isImageElement(element);
 };
+var cachedPoint = null;
+var cachedElement = null;
+var cachedThreshold = Infinity;
+var cachedHit = false;
+var cachedOverrideShouldTestInside = false;
 var hitElementItself = ({
   point,
   element,
@@ -4784,6 +4793,12 @@ var hitElementItself = ({
   frameNameBound = null,
   overrideShouldTestInside = false
 }) => {
+  if (cachedPoint && pointsEqual2(point, cachedPoint) && cachedThreshold <= threshold && overrideShouldTestInside === cachedOverrideShouldTestInside) {
+    const derefElement = cachedElement?.deref();
+    if (derefElement && derefElement.id === element.id && derefElement.version === element.version && derefElement.versionNonce === element.versionNonce) {
+      return cachedHit;
+    }
+  }
   const hitFrameName = frameNameBound ? isPointWithinBounds(
     pointFrom5(frameNameBound.x - threshold, frameNameBound.y - threshold),
     point,
@@ -4810,7 +4825,13 @@ var hitElementItself = ({
     // we would need `onShape` as well to include the "borders"
     isPointInElement(point, element, elementsMap) || isPointOnElementOutline(point, element, elementsMap, threshold)
   ) : isPointOnElementOutline(point, element, elementsMap, threshold);
-  return hitElement || hitFrameName;
+  const result = hitElement || hitFrameName;
+  cachedPoint = point;
+  cachedElement = new WeakRef(element);
+  cachedThreshold = threshold;
+  cachedOverrideShouldTestInside = overrideShouldTestInside;
+  cachedHit = result;
+  return result;
 };
 var hitElementBoundingBox = (point, element, elementsMap, tolerance = 0) => {
   let [x1, y1, x2, y2] = getElementBounds(element, elementsMap);
@@ -4872,7 +4893,7 @@ var bindingBorderTest = (element, [x, y], elementsMap, tolerance = 0) => {
   const distance3 = distanceToElement(element, elementsMap, p);
   return shouldTestInside2 ? intersections.length === 0 || distance3 <= tolerance : intersections.length > 0 && distance3 <= t;
 };
-var getAllHoveredElementAtPoint = (point, elements, elementsMap, toleranceFn) => {
+var getAllHoveredElementAtPoint = (point, elements, elementsMap, tolerance) => {
   const candidateElements = [];
   for (let index = elements.length - 1; index >= 0; --index) {
     const element = elements[index];
@@ -4880,7 +4901,7 @@ var getAllHoveredElementAtPoint = (point, elements, elementsMap, toleranceFn) =>
       !element.isDeleted,
       "Elements in the function parameter for getAllElementsAtPositionForBinding() should not contain deleted elements"
     );
-    if (isBindableElement(element, false) && bindingBorderTest(element, point, elementsMap, toleranceFn?.(element))) {
+    if (isBindableElement(element, false) && bindingBorderTest(element, point, elementsMap, tolerance)) {
       candidateElements.push(element);
       if (!isTransparent(element.backgroundColor)) {
         break;
@@ -4889,12 +4910,12 @@ var getAllHoveredElementAtPoint = (point, elements, elementsMap, toleranceFn) =>
   }
   return candidateElements;
 };
-var getHoveredElementForBinding = (point, elements, elementsMap, toleranceFn) => {
+var getHoveredElementForBinding = (point, elements, elementsMap, tolerance) => {
   const candidateElements = getAllHoveredElementAtPoint(
     point,
     elements,
     elementsMap,
-    toleranceFn
+    tolerance
   );
   if (!candidateElements || candidateElements.length === 0) {
     return null;
@@ -4906,6 +4927,32 @@ var getHoveredElementForBinding = (point, elements, elementsMap, toleranceFn) =>
     (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];
+    invariant4(
+      !element.isDeleted,
+      "Elements in the function parameter for getAllElementsAtPositionForBinding() should not contain deleted elements"
+    );
+    if (isBindableElement(element, false) && bindingBorderTest(element, point, elementsMap, tolerance)) {
+      candidateElements.push(element);
+    }
+  }
+  if (!candidateElements || candidateElements.length === 0) {
+    return null;
+  }
+  if (candidateElements.length === 1) {
+    return candidateElements[0];
+  }
+  const distanceFilteredCandidateElements = candidateElements.filter(
+    (el) => distanceToElement(el, elementsMap, point) <= getBindingGap(el, arrow) || isPointInElement(point, el, elementsMap)
+  );
+  if (distanceFilteredCandidateElements.length === 0) {
+    return null;
+  }
+  return distanceFilteredCandidateElements[0];
+};
 var intersectElementWithLineSegment = (element, elementsMap, line2, offset = 0, onlyFirst = false) => {
   const intersectorBounds = [
     Math.min(line2[0][0] - offset, line2[1][0] - offset),
@@ -5177,7 +5224,11 @@ var isBindableElementInsideOtherBindable = (innerElement, outerElement, elements
 
 // src/heading.ts
 init_define_import_meta_env();
-import { invariant as invariant5, isDevEnv as isDevEnv2, isTestEnv as isTestEnv3 } from "@excalidraw/common";
+import {
+  invariant as invariant5,
+  isDevEnv as isDevEnv2,
+  isTestEnv as isTestEnv3
+} from "@excalidraw/common";
 import {
   pointFrom as pointFrom6,
   pointFromVector as pointFromVector5,
@@ -6822,7 +6873,7 @@ var getHoveredElement = (origPoint, elementsMap, elements, zoom) => {
     origPoint,
     elements,
     elementsMap,
-    (element) => maxBindingDistance_simple(zoom)
+    maxBindingDistance_simple(zoom)
   );
 };
 var gridAddressesEqual = (a2, b2) => a2[0] === b2[0] && a2[1] === b2[1];
@@ -6935,6 +6986,7 @@ var bumpVersion = (element, version) => {
 // src/binding.ts
 var BASE_BINDING_GAP = 10;
 var BASE_BINDING_GAP_ELBOW = 5;
+var FOCUS_POINT_SIZE = 10 / 1.5;
 var getBindingGap = (bindTarget, opts) => {
   return (opts.elbowed ? BASE_BINDING_GAP_ELBOW : BASE_BINDING_GAP) + bindTarget.strokeWidth / 2;
 };
@@ -6955,10 +7007,12 @@ var shouldEnableBindingForPointerEvent = (event) => {
 var isBindingEnabled = (appState) => {
   return appState.isBindingEnabled;
 };
-var bindOrUnbindBindingElement = (arrow, draggingPoints, scene, appState, opts) => {
+var bindOrUnbindBindingElement = (arrow, draggingPoints, scenePointerX, scenePointerY, scene, appState, opts) => {
   const { start, end } = getBindingStrategyForDraggingBindingElementEndpoints(
     arrow,
     draggingPoints,
+    scenePointerX,
+    scenePointerY,
     scene.getNonDeletedElementsMap(),
     scene.getNonDeletedElements(),
     appState,
@@ -7021,7 +7075,7 @@ var bindingStrategyForElbowArrowEndpointDragging = (arrow, draggingPoints, eleme
     globalPoint,
     elements,
     elementsMap,
-    (element) => maxBindingDistance_simple(zoom)
+    maxBindingDistance_simple(zoom)
   );
   const current = hit ? {
     element: hit,
@@ -7205,7 +7259,7 @@ var bindingStrategyForSimpleArrowEndpointDragging_complex = (point, currentBindi
   }
   return { current, other: isMultiPoint ? { mode: void 0 } : other };
 };
-var getBindingStrategyForDraggingBindingElementEndpoints = (arrow, draggingPoints, elementsMap, elements, appState, opts) => {
+var getBindingStrategyForDraggingBindingElementEndpoints = (arrow, draggingPoints, screenPointerX, screenPointerY, elementsMap, elements, appState, opts) => {
   if (getFeatureFlag("COMPLEX_BINDINGS")) {
     return getBindingStrategyForDraggingBindingElementEndpoints_complex(
       arrow,
@@ -7219,13 +7273,15 @@ var getBindingStrategyForDraggingBindingElementEndpoints = (arrow, draggingPoint
   return getBindingStrategyForDraggingBindingElementEndpoints_simple(
     arrow,
     draggingPoints,
+    screenPointerX,
+    screenPointerY,
     elementsMap,
     elements,
     appState,
     opts
   );
 };
-var getBindingStrategyForDraggingBindingElementEndpoints_simple = (arrow, draggingPoints, elementsMap, elements, appState, opts) => {
+var getBindingStrategyForDraggingBindingElementEndpoints_simple = (arrow, draggingPoints, scenePointerX, scenePointerY, elementsMap, elements, appState, opts) => {
   const startIdx = 0;
   const endIdx = arrow.points.length - 1;
   const startDragged = draggingPoints.has(startIdx);
@@ -7273,9 +7329,13 @@ var getBindingStrategyForDraggingBindingElementEndpoints_simple = (arrow, draggi
     globalPoint,
     elements,
     elementsMap,
-    (e) => maxBindingDistance_simple(appState.zoom)
+    maxBindingDistance_simple(appState.zoom)
   );
-  const pointInElement = hit && isPointInElement(globalPoint, hit, elementsMap);
+  const pointInElement = hit && (opts?.angleLocked ? isPointInElement(
+    pointFrom8(scenePointerX, scenePointerY),
+    hit,
+    elementsMap
+  ) : isPointInElement(globalPoint, hit, elementsMap));
   const otherBindableElement = otherBinding ? elementsMap.get(
     otherBinding.elementId
   ) : void 0;
@@ -7284,7 +7344,13 @@ var getBindingStrategyForDraggingBindingElementEndpoints_simple = (arrow, draggi
     otherBindableElement,
     elementsMap
   );
-  const otherFocusPointIsInElement = otherBindableElement && otherFocusPoint && isPointInElement(otherFocusPoint, otherBindableElement, elementsMap);
+  const otherFocusPointIsInElement = otherBindableElement && otherFocusPoint && hitElementItself({
+    point: otherFocusPoint,
+    element: otherBindableElement,
+    elementsMap,
+    threshold: 0,
+    overrideShouldTestInside: true
+  });
   if (otherBinding && otherBinding.elementId === hit?.id) {
     invariant7(
       !opts?.newArrow || appState.selectedLinearElement?.initialState.origin,
@@ -7345,10 +7411,25 @@ var getBindingStrategyForDraggingBindingElementEndpoints_simple = (arrow, draggi
       elementsMap
     ) || globalPoint
   } : { mode: null };
+  const otherEndpoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(
+    arrow,
+    startDragged ? -1 : 0,
+    elementsMap
+  );
   const other = otherBindableElement && !otherFocusPointIsInElement && appState.selectedLinearElement?.initialState.altFocusPoint ? {
     mode: "orbit",
     element: otherBindableElement,
     focusPoint: appState.selectedLinearElement.initialState.altFocusPoint
+  } : opts?.angleLocked && otherBindableElement ? {
+    mode: "orbit",
+    element: otherBindableElement,
+    focusPoint: projectFixedPointOntoDiagonal(
+      arrow,
+      otherEndpoint,
+      otherBindableElement,
+      startDragged ? "end" : "start",
+      elementsMap
+    ) || otherEndpoint
   } : { mode: void 0 };
   return {
     start: startDragged ? current : other,
@@ -7450,6 +7531,8 @@ var bindOrUnbindBindingElements = (selectedArrows, scene, appState) => {
       arrow,
       /* @__PURE__ */ new Map(),
       // No dragging points in this case
+      Infinity,
+      Infinity,
       scene,
       appState
     );
@@ -7576,9 +7659,71 @@ var updateBoundElements = (changedElement, scene, options) => {
     }
   });
 };
+var updateArrowBindings = (latestElement, startOrEnd, elementsMap, scene, appState) => {
+  invariant7(
+    !isElbowArrow(latestElement),
+    "Elbow arrows not supported for indirect updates"
+  );
+  const binding = latestElement[startOrEnd];
+  const bindableElement = binding && elementsMap.get(binding.elementId);
+  const point = LinearElementEditor.getPointAtIndexGlobalCoordinates(
+    latestElement,
+    startOrEnd === "startBinding" ? 0 : -1,
+    elementsMap
+  );
+  const hit = bindableElement && hitElementItself({
+    element: bindableElement,
+    point,
+    elementsMap,
+    threshold: maxBindingDistance_simple(appState.zoom)
+  });
+  const strategyName = startOrEnd === "startBinding" ? "start" : "end";
+  unbindBindingElement(latestElement, strategyName, scene);
+  if (hit) {
+    const pointIdx = startOrEnd === "startBinding" ? 0 : latestElement.points.length - 1;
+    const localPoint = latestElement.points[pointIdx];
+    const strategy = getBindingStrategyForDraggingBindingElementEndpoints_simple(
+      latestElement,
+      /* @__PURE__ */ new Map([[pointIdx, { point: localPoint }]]),
+      point[0],
+      point[1],
+      elementsMap,
+      scene.getNonDeletedElements(),
+      appState
+    );
+    if (strategy[strategyName] && strategy[strategyName].element?.id === bindableElement.id && strategy[strategyName].mode) {
+      bindBindingElement(
+        latestElement,
+        bindableElement,
+        strategy[strategyName].mode,
+        strategyName,
+        scene,
+        strategy[strategyName].focusPoint
+      );
+    }
+  }
+};
 var updateBindings = (latestElement, scene, appState, options) => {
   if (isArrowElement(latestElement)) {
-    bindOrUnbindBindingElement(latestElement, /* @__PURE__ */ new Map(), scene, appState);
+    const elementsMap = scene.getNonDeletedElementsMap();
+    if (latestElement.startBinding) {
+      updateArrowBindings(
+        latestElement,
+        "startBinding",
+        elementsMap,
+        scene,
+        appState
+      );
+    }
+    if (latestElement.endBinding) {
+      updateArrowBindings(
+        latestElement,
+        "endBinding",
+        elementsMap,
+        scene,
+        appState
+      );
+    }
   } else {
     updateBoundElements(latestElement, scene, {
       ...options,
@@ -7852,9 +7997,13 @@ var snapToMid = (arrowElement, bindTarget, elementsMap, p, tolerance = 0.05) =>
   return p;
 };
 var compareElementArea = (a2, b2) => b2.width ** 2 + b2.height ** 2 - (a2.width ** 2 + a2.height ** 2);
-var updateBoundPoint = (arrow, startOrEnd, binding, bindableElement, elementsMap, customIntersector) => {
+var updateBoundPoint = (arrow, startOrEnd, binding, bindableElement, elementsMap, opts) => {
   if (binding == null || // We only need to update the other end if this is a 2 point line element
-  binding.elementId !== bindableElement.id && arrow.points.length > 2) {
+  binding.elementId !== bindableElement.id && arrow.points.length > 2 || // Initial arrow created on pointer down needs to not update the points
+  pointsEqual5(
+    arrow.points[arrow.points.length - 1],
+    pointFrom8(0, 0)
+  )) {
     return null;
   }
   const global2 = getGlobalFixedPointForBindableElement(
@@ -7904,14 +8053,14 @@ var updateBoundPoint = (arrow, startOrEnd, binding, bindableElement, elementsMap
     }
   }
   const isNested = (arrowTooShort || isOverlapping) && isLargerThanOther;
-  let _customIntersector = customIntersector;
+  let _customIntersector = opts?.customIntersector;
   if (!elbowed && !_customIntersector) {
     const [x1, y1, x2, y2] = LinearElementEditor.getElementAbsoluteCoords(
       arrow,
       elementsMap
     );
     const center = pointFrom8((x1 + x2) / 2, (y1 + y2) / 2);
-    const edgePoint = isRectanguloidElement(bindableElement) ? avoidRectangularCorner(arrow, bindableElement, elementsMap, global2) : global2;
+    const edgePoint = global2;
     const adjacentPoint = pointRotateRads8(
       pointFrom8(
         arrow.x + arrow.points[pointIndex === 0 ? 1 : arrow.points.length - 2][0],
@@ -7999,10 +8148,7 @@ var calculateFixedPointForNonElbowArrowBinding = (linearElement, hoveredElement,
     startOrEnd === "start" ? 0 : -1,
     elementsMap
   );
-  const elementCenter = pointFrom8(
-    hoveredElement.x + hoveredElement.width / 2,
-    hoveredElement.y + hoveredElement.height / 2
-  );
+  const elementCenter = elementCenterPoint(hoveredElement, elementsMap);
   const nonRotatedPoint = pointRotateRads8(
     edgePoint,
     elementCenter,
@@ -8339,6 +8485,356 @@ var normalizeFixedPoint = (fixedPoint) => {
   }
   return fixedPoint;
 };
+var getShapeType = (element) => {
+  if (element.type === "ellipse" || element.type === "diamond") {
+    return element.type;
+  }
+  return "rectangle";
+};
+var SHAPE_CONFIGS = {
+  // rectangle: 15° corners, 75° edges
+  rectangle: [
+    { centerAngle: 0, sectorWidth: 75, side: "right" },
+    { centerAngle: 45, sectorWidth: 15, side: "bottom-right" },
+    { centerAngle: 90, sectorWidth: 75, side: "bottom" },
+    { centerAngle: 135, sectorWidth: 15, side: "bottom-left" },
+    { centerAngle: 180, sectorWidth: 75, side: "left" },
+    { centerAngle: 225, sectorWidth: 15, side: "top-left" },
+    { centerAngle: 270, sectorWidth: 75, side: "top" },
+    { centerAngle: 315, sectorWidth: 15, side: "top-right" }
+  ],
+  // diamond: 15° vertices, 75° edges
+  diamond: [
+    { centerAngle: 0, sectorWidth: 15, side: "right" },
+    { centerAngle: 45, sectorWidth: 75, side: "bottom-right" },
+    { centerAngle: 90, sectorWidth: 15, side: "bottom" },
+    { centerAngle: 135, sectorWidth: 75, side: "bottom-left" },
+    { centerAngle: 180, sectorWidth: 15, side: "left" },
+    { centerAngle: 225, sectorWidth: 75, side: "top-left" },
+    { centerAngle: 270, sectorWidth: 15, side: "top" },
+    { centerAngle: 315, sectorWidth: 75, side: "top-right" }
+  ],
+  // ellipse: 15° cardinal points, 75° diagonals
+  ellipse: [
+    { centerAngle: 0, sectorWidth: 15, side: "right" },
+    { centerAngle: 45, sectorWidth: 75, side: "bottom-right" },
+    { centerAngle: 90, sectorWidth: 15, side: "bottom" },
+    { centerAngle: 135, sectorWidth: 75, side: "bottom-left" },
+    { centerAngle: 180, sectorWidth: 15, side: "left" },
+    { centerAngle: 225, sectorWidth: 75, side: "top-left" },
+    { centerAngle: 270, sectorWidth: 15, side: "top" },
+    { centerAngle: 315, sectorWidth: 75, side: "top-right" }
+  ]
+};
+var getSectorBoundaries = (config) => {
+  return config.map((sector, index) => {
+    const halfWidth = sector.sectorWidth / 2;
+    let start = sector.centerAngle - halfWidth;
+    let end = sector.centerAngle + halfWidth;
+    start = (start % 360 + 360) % 360;
+    end = (end % 360 + 360) % 360;
+    return { start, end, side: sector.side };
+  });
+};
+var getShapeSideAdaptive = (fixedPoint, shapeType) => {
+  const [x, y] = fixedPoint;
+  const centerX = x - 0.5;
+  const centerY = y - 0.5;
+  let angle = Math.atan2(centerY, centerX);
+  if (angle < 0) {
+    angle += 2 * Math.PI;
+  }
+  const degrees = angle * 180 / Math.PI;
+  const config = SHAPE_CONFIGS[shapeType];
+  const boundaries = getSectorBoundaries(config);
+  for (const boundary of boundaries) {
+    if (boundary.start <= boundary.end) {
+      if (degrees >= boundary.start && degrees <= boundary.end) {
+        return boundary.side;
+      }
+    } else if (degrees >= boundary.start || degrees <= boundary.end) {
+      return boundary.side;
+    }
+  }
+  let minDiff = Infinity;
+  let nearestSide = config[0].side;
+  for (const sector of config) {
+    let diff = Math.abs(degrees - sector.centerAngle);
+    if (diff > 180) {
+      diff = 360 - diff;
+    }
+    if (diff < minDiff) {
+      minDiff = diff;
+      nearestSide = sector.side;
+    }
+  }
+  return nearestSide;
+};
+var getBindingSideMidPoint = (binding, elementsMap) => {
+  const bindableElement = elementsMap.get(binding.elementId);
+  if (!bindableElement || bindableElement.isDeleted || !isBindableElement(bindableElement)) {
+    return null;
+  }
+  const center = elementCenterPoint(bindableElement, elementsMap);
+  const shapeType = getShapeType(bindableElement);
+  const side = getShapeSideAdaptive(
+    normalizeFixedPoint(binding.fixedPoint),
+    shapeType
+  );
+  const OFFSET = 0.01;
+  if (bindableElement.type === "diamond") {
+    const [sides, corners] = deconstructDiamondElement(bindableElement);
+    const [bottomRight, bottomLeft, topLeft, topRight] = sides;
+    let x;
+    let y;
+    switch (side) {
+      case "left": {
+        if (corners.length >= 3) {
+          const leftCorner = corners[2];
+          const midPoint = leftCorner[1];
+          x = midPoint[0] - OFFSET;
+          y = midPoint[1];
+        } else {
+          const midPoint = getMidPoint(bottomLeft[1], topLeft[0]);
+          x = midPoint[0] - OFFSET;
+          y = midPoint[1];
+        }
+        break;
+      }
+      case "right": {
+        if (corners.length >= 1) {
+          const rightCorner = corners[0];
+          const midPoint = rightCorner[1];
+          x = midPoint[0] + OFFSET;
+          y = midPoint[1];
+        } else {
+          const midPoint = getMidPoint(topRight[1], bottomRight[0]);
+          x = midPoint[0] + OFFSET;
+          y = midPoint[1];
+        }
+        break;
+      }
+      case "top": {
+        if (corners.length >= 4) {
+          const topCorner = corners[3];
+          const midPoint = topCorner[1];
+          x = midPoint[0];
+          y = midPoint[1] - OFFSET;
+        } else {
+          const midPoint = getMidPoint(topLeft[1], topRight[0]);
+          x = midPoint[0];
+          y = midPoint[1] - OFFSET;
+        }
+        break;
+      }
+      case "bottom": {
+        if (corners.length >= 2) {
+          const bottomCorner = corners[1];
+          const midPoint = bottomCorner[1];
+          x = midPoint[0];
+          y = midPoint[1] + OFFSET;
+        } else {
+          const midPoint = getMidPoint(bottomRight[1], bottomLeft[0]);
+          x = midPoint[0];
+          y = midPoint[1] + OFFSET;
+        }
+        break;
+      }
+      case "top-right": {
+        const midPoint = getMidPoint(topRight[0], topRight[1]);
+        x = midPoint[0] + OFFSET * 0.707;
+        y = midPoint[1] - OFFSET * 0.707;
+        break;
+      }
+      case "bottom-right": {
+        const midPoint = getMidPoint(bottomRight[0], bottomRight[1]);
+        x = midPoint[0] + OFFSET * 0.707;
+        y = midPoint[1] + OFFSET * 0.707;
+        break;
+      }
+      case "bottom-left": {
+        const midPoint = getMidPoint(bottomLeft[0], bottomLeft[1]);
+        x = midPoint[0] - OFFSET * 0.707;
+        y = midPoint[1] + OFFSET * 0.707;
+        break;
+      }
+      case "top-left": {
+        const midPoint = getMidPoint(topLeft[0], topLeft[1]);
+        x = midPoint[0] - OFFSET * 0.707;
+        y = midPoint[1] - OFFSET * 0.707;
+        break;
+      }
+      default: {
+        return null;
+      }
+    }
+    return pointRotateRads8(pointFrom8(x, y), center, bindableElement.angle);
+  }
+  if (bindableElement.type === "ellipse") {
+    const ellipseCenterX = bindableElement.x + bindableElement.width / 2;
+    const ellipseCenterY = bindableElement.y + bindableElement.height / 2;
+    const radiusX = bindableElement.width / 2;
+    const radiusY = bindableElement.height / 2;
+    let x;
+    let y;
+    switch (side) {
+      case "top": {
+        x = ellipseCenterX;
+        y = ellipseCenterY - radiusY - OFFSET;
+        break;
+      }
+      case "right": {
+        x = ellipseCenterX + radiusX + OFFSET;
+        y = ellipseCenterY;
+        break;
+      }
+      case "bottom": {
+        x = ellipseCenterX;
+        y = ellipseCenterY + radiusY + OFFSET;
+        break;
+      }
+      case "left": {
+        x = ellipseCenterX - radiusX - OFFSET;
+        y = ellipseCenterY;
+        break;
+      }
+      case "top-right": {
+        const angle = -Math.PI / 4;
+        const ellipseX = radiusX * Math.cos(angle);
+        const ellipseY = radiusY * Math.sin(angle);
+        x = ellipseCenterX + ellipseX + OFFSET * 0.707;
+        y = ellipseCenterY + ellipseY - OFFSET * 0.707;
+        break;
+      }
+      case "bottom-right": {
+        const angle = Math.PI / 4;
+        const ellipseX = radiusX * Math.cos(angle);
+        const ellipseY = radiusY * Math.sin(angle);
+        x = ellipseCenterX + ellipseX + OFFSET * 0.707;
+        y = ellipseCenterY + ellipseY + OFFSET * 0.707;
+        break;
+      }
+      case "bottom-left": {
+        const angle = 3 * Math.PI / 4;
+        const ellipseX = radiusX * Math.cos(angle);
+        const ellipseY = radiusY * Math.sin(angle);
+        x = ellipseCenterX + ellipseX - OFFSET * 0.707;
+        y = ellipseCenterY + ellipseY + OFFSET * 0.707;
+        break;
+      }
+      case "top-left": {
+        const angle = -3 * Math.PI / 4;
+        const ellipseX = radiusX * Math.cos(angle);
+        const ellipseY = radiusY * Math.sin(angle);
+        x = ellipseCenterX + ellipseX - OFFSET * 0.707;
+        y = ellipseCenterY + ellipseY - OFFSET * 0.707;
+        break;
+      }
+      default: {
+        return null;
+      }
+    }
+    return pointRotateRads8(pointFrom8(x, y), center, bindableElement.angle);
+  }
+  if (isRectangularElement(bindableElement)) {
+    const [sides, corners] = deconstructRectanguloidElement(
+      bindableElement
+    );
+    const [top, right, bottom, left] = sides;
+    let x;
+    let y;
+    switch (side) {
+      case "top": {
+        const midPoint = getMidPoint(top[0], top[1]);
+        x = midPoint[0];
+        y = midPoint[1] - OFFSET;
+        break;
+      }
+      case "right": {
+        const midPoint = getMidPoint(right[0], right[1]);
+        x = midPoint[0] + OFFSET;
+        y = midPoint[1];
+        break;
+      }
+      case "bottom": {
+        const midPoint = getMidPoint(bottom[0], bottom[1]);
+        x = midPoint[0];
+        y = midPoint[1] + OFFSET;
+        break;
+      }
+      case "left": {
+        const midPoint = getMidPoint(left[0], left[1]);
+        x = midPoint[0] - OFFSET;
+        y = midPoint[1];
+        break;
+      }
+      case "top-left": {
+        if (corners.length >= 1) {
+          const corner = corners[0];
+          const p1 = corner[0];
+          const p2 = corner[3];
+          const midPoint = getMidPoint(p1, p2);
+          x = midPoint[0] - OFFSET * 0.707;
+          y = midPoint[1] - OFFSET * 0.707;
+        } else {
+          x = bindableElement.x - OFFSET;
+          y = bindableElement.y - OFFSET;
+        }
+        break;
+      }
+      case "top-right": {
+        if (corners.length >= 2) {
+          const corner = corners[1];
+          const p1 = corner[0];
+          const p2 = corner[3];
+          const midPoint = getMidPoint(p1, p2);
+          x = midPoint[0] + OFFSET * 0.707;
+          y = midPoint[1] - OFFSET * 0.707;
+        } else {
+          x = bindableElement.x + bindableElement.width + OFFSET;
+          y = bindableElement.y - OFFSET;
+        }
+        break;
+      }
+      case "bottom-right": {
+        if (corners.length >= 3) {
+          const corner = corners[2];
+          const p1 = corner[0];
+          const p2 = corner[3];
+          const midPoint = getMidPoint(p1, p2);
+          x = midPoint[0] + OFFSET * 0.707;
+          y = midPoint[1] + OFFSET * 0.707;
+        } else {
+          x = bindableElement.x + bindableElement.width + OFFSET;
+          y = bindableElement.y + bindableElement.height + OFFSET;
+        }
+        break;
+      }
+      case "bottom-left": {
+        if (corners.length >= 4) {
+          const corner = corners[3];
+          const p1 = corner[0];
+          const p2 = corner[3];
+          const midPoint = getMidPoint(p1, p2);
+          x = midPoint[0] - OFFSET * 0.707;
+          y = midPoint[1] + OFFSET * 0.707;
+        } else {
+          x = bindableElement.x - OFFSET;
+          y = bindableElement.y + bindableElement.height + OFFSET;
+        }
+        break;
+      }
+      default: {
+        return null;
+      }
+    }
+    return pointRotateRads8(pointFrom8(x, y), center, bindableElement.angle);
+  }
+  return null;
+};
+var getMidPoint = (p1, p2) => {
+  return pointFrom8((p1[0] + p2[0]) / 2, (p1[1] + p2[1]) / 2);
+};
 
 // src/linearElementEditor.ts
 var getNormalizedPoints = ({
@@ -8366,6 +8862,8 @@ var LinearElementEditor = class _LinearElementEditor {
   pointerOffset;
   hoverPointIndex;
   segmentMidPointHoveredCoords;
+  hoveredFocusPointBinding;
+  draggedFocusPointBinding;
   elbowed;
   customLineAngle;
   isEditing;
@@ -8375,7 +8873,7 @@ var LinearElementEditor = class _LinearElementEditor {
   pointerDownState;
   constructor(element, elementsMap, isEditing = false) {
     this.elementId = element.id;
-    if (!pointsEqual5(element.points[0], pointFrom9(0, 0))) {
+    if (!pointsEqual6(element.points[0], pointFrom9(0, 0))) {
       console.error("Linear element is not normalized", Error().stack);
       mutateElement(
         element,
@@ -8402,6 +8900,8 @@ var LinearElementEditor = class _LinearElementEditor {
     };
     this.hoverPointIndex = -1;
     this.segmentMidPointHoveredCoords = null;
+    this.hoveredFocusPointBinding = null;
+    this.draggedFocusPointBinding = null;
     this.elbowed = isElbowArrow(element) && element.elbowed;
     this.customLineAngle = null;
     this.isEditing = isEditing;
@@ -8465,14 +8965,9 @@ var LinearElementEditor = class _LinearElementEditor {
     const point = element.points[idx];
     const pivotPoint = element.points[idx - 1];
     const customLineAngle = linearElementEditor.customLineAngle ?? determineCustomLinearAngle(pivotPoint, element.points[idx]);
-    const hoveredElement = getHoveredElementForBinding2(
-      pointFrom9(scenePointerX, scenePointerY),
-      elements,
-      elementsMap
-    );
     let deltaX = 0;
     let deltaY = 0;
-    if (shouldRotateWithDiscreteAngle(event) && !hoveredElement && !element.startBinding && !element.endBinding) {
+    if (shouldRotateWithDiscreteAngle(event)) {
       const [width, height] = _LinearElementEditor._getShiftLockedDelta(
         element,
         elementsMap,
@@ -8503,11 +8998,13 @@ var LinearElementEditor = class _LinearElementEditor {
       [idx],
       deltaX,
       deltaY,
+      scenePointerX,
+      scenePointerY,
       elementsMap,
       element,
       elements,
       app,
-      event.shiftKey,
+      shouldRotateWithDiscreteAngle(event),
       event.altKey
     );
     _LinearElementEditor.movePoints(element, app.scene, positions, {
@@ -8597,14 +9094,9 @@ var LinearElementEditor = class _LinearElementEditor {
     const endIsSelected = selectedPointsIndices.includes(
       element.points.length - 1
     );
-    const hoveredElement = getHoveredElementForBinding2(
-      pointFrom9(scenePointerX, scenePointerY),
-      elements,
-      elementsMap
-    );
     let deltaX = 0;
     let deltaY = 0;
-    if (shouldRotateWithDiscreteAngle(event) && singlePointDragged && !hoveredElement && !element.startBinding && !element.endBinding) {
+    if (shouldRotateWithDiscreteAngle(event) && singlePointDragged) {
       const [width, height] = _LinearElementEditor._getShiftLockedDelta(
         element,
         elementsMap,
@@ -8635,11 +9127,13 @@ var LinearElementEditor = class _LinearElementEditor {
       selectedPointsIndices,
       deltaX,
       deltaY,
+      scenePointerX,
+      scenePointerY,
       elementsMap,
       element,
       elements,
       app,
-      event.shiftKey,
+      shouldRotateWithDiscreteAngle(event) && singlePointDragged,
       event.altKey
     );
     _LinearElementEditor.movePoints(element, app.scene, positions, {
@@ -8768,7 +9262,6 @@ var LinearElementEditor = class _LinearElementEditor {
         (pointIndex) => pointIndex !== pointerDownState.lastClickedPoint
       ) : selectedPointsIndices : selectedPointsIndices?.includes(pointerDownState.lastClickedPoint) ? [pointerDownState.lastClickedPoint] : selectedPointsIndices,
       isDragging: false,
-      pointerOffset: { x: 0, y: 0 },
       customLineAngle: null,
       initialState: {
         ...editingLinearElement.initialState,
@@ -9060,7 +9553,7 @@ var LinearElementEditor = class _LinearElementEditor {
     if (!point1 || !point2) {
       return false;
     }
-    return pointsEqual5(point1, point2);
+    return pointsEqual6(point1, point2);
   }
   static handlePointerMoveInEditMode(event, scenePointerX, scenePointerY, app) {
     const appState = app.state;
@@ -9713,7 +10206,7 @@ var normalizeSelectedPoints = (points) => {
   nextPoints = nextPoints.sort((a2, b2) => a2 - b2);
   return nextPoints.length ? nextPoints : null;
 };
-var pointDraggingUpdates = (selectedPointsIndices, deltaX, deltaY, elementsMap, element, elements, app, shiftKey, altKey) => {
+var pointDraggingUpdates = (selectedPointsIndices, deltaX, deltaY, scenePointerX, scenePointerY, elementsMap, element, elements, app, angleLocked, altKey) => {
   const naiveDraggingPoints = new Map(
     selectedPointsIndices.map((pointIndex) => {
       return [
@@ -9740,12 +10233,14 @@ var pointDraggingUpdates = (selectedPointsIndices, deltaX, deltaY, elementsMap,
   const { start, end } = getBindingStrategyForDraggingBindingElementEndpoints(
     element,
     naiveDraggingPoints,
+    scenePointerX,
+    scenePointerY,
     elementsMap,
     elements,
     app.state,
     {
       newArrow: !!app.state.newElement,
-      shiftKey,
+      angleLocked,
       altKey
     }
   );
@@ -9757,6 +10252,51 @@ var pointDraggingUpdates = (selectedPointsIndices, deltaX, deltaY, elementsMap,
       }
     };
   }
+  if (!startIsDragged && !endIsDragged) {
+    const nextArrow2 = {
+      ...element,
+      points: element.points.map((p, idx) => {
+        return naiveDraggingPoints.get(idx)?.point ?? p;
+      })
+    };
+    const positions = new Map(naiveDraggingPoints);
+    if (element.startBinding) {
+      const startBindable2 = elementsMap.get(element.startBinding.elementId);
+      if (startBindable2) {
+        const startPoint = updateBoundPoint(
+          nextArrow2,
+          "startBinding",
+          element.startBinding,
+          startBindable2,
+          elementsMap
+        ) ?? null;
+        if (startPoint) {
+          positions.set(0, { point: startPoint, isDragging: true });
+        }
+      }
+    }
+    if (element.endBinding) {
+      const endBindable2 = elementsMap.get(element.endBinding.elementId);
+      if (endBindable2) {
+        const endPoint = updateBoundPoint(
+          nextArrow2,
+          "endBinding",
+          element.endBinding,
+          endBindable2,
+          elementsMap
+        ) ?? null;
+        if (endPoint) {
+          positions.set(element.points.length - 1, {
+            point: endPoint,
+            isDragging: true
+          });
+        }
+      }
+    }
+    return {
+      positions
+    };
+  }
   if (startIsDragged === endIsDragged) {
     return {
       positions: naiveDraggingPoints
@@ -9823,7 +10363,8 @@ var pointDraggingUpdates = (selectedPointsIndices, deltaX, deltaY, elementsMap,
     startBinding: updates.startBinding === void 0 ? element.startBinding : updates.startBinding === null ? null : updates.startBinding,
     endBinding: updates.endBinding === void 0 ? element.endBinding : updates.endBinding === null ? null : updates.endBinding
   };
-  const customIntersector = start.focusPoint && end.focusPoint ? lineSegment5(start.focusPoint, end.focusPoint) : void 0;
+  const startCustomIntersector = start.focusPoint && end.focusPoint ? lineSegment5(start.focusPoint, end.focusPoint) : void 0;
+  const endCustomIntersector = start.focusPoint && end.focusPoint ? lineSegment5(end.focusPoint, start.focusPoint) : void 0;
   const startIsDraggingOverEndElement = element.endBinding && nextArrow.startBinding && startIsDragged && nextArrow.startBinding.elementId === element.endBinding.elementId;
   const endIsDraggingOverStartElement = element.startBinding && nextArrow.endBinding && endIsDragged && element.startBinding.elementId === nextArrow.endBinding.elementId;
   const endBindable = nextArrow.endBinding ? end.element ?? elementsMap.get(
@@ -9835,24 +10376,23 @@ var pointDraggingUpdates = (selectedPointsIndices, deltaX, deltaY, elementsMap,
     nextArrow.endBinding,
     endBindable,
     elementsMap,
-    customIntersector
+    {
+      customIntersector: endCustomIntersector
+    }
   ) || nextArrow.points[nextArrow.points.length - 1] : nextArrow.points[nextArrow.points.length - 1];
   nextArrow.points[nextArrow.points.length - 1] = endLocalPoint;
   const startBindable = nextArrow.startBinding ? start.element ?? elementsMap.get(
     nextArrow.startBinding.elementId
   ) : null;
-  const startLocalPoint = endIsDraggingOverStartElement && getFeatureFlag2("COMPLEX_BINDINGS") ? nextArrow.points[0] : startIsDraggingOverEndElement && app.state.bindMode !== "inside" && getFeatureFlag2("COMPLEX_BINDINGS") ? nextArrow.points[nextArrow.points.length - 1] : startBindable ? updateBoundPoint(
+  const startLocalPoint = endIsDraggingOverStartElement && getFeatureFlag2("COMPLEX_BINDINGS") ? nextArrow.points[0] : startIsDraggingOverEndElement && app.state.bindMode !== "inside" && getFeatureFlag2("COMPLEX_BINDINGS") ? endLocalPoint : startBindable ? updateBoundPoint(
     element,
     "startBinding",
     nextArrow.startBinding,
     startBindable,
     elementsMap,
-    customIntersector
+    { customIntersector: startCustomIntersector }
   ) || nextArrow.points[0] : nextArrow.points[0];
-  const endChanged = pointDistance5(
-    endLocalPoint,
-    nextArrow.points[nextArrow.points.length - 1]
-  ) !== 0;
+  const endChanged = !startIsDraggingOverEndElement && !(endIsDraggingOverStartElement && app.state.bindMode !== "inside" && getFeatureFlag2("COMPLEX_BINDINGS")) && !!endBindable;
   const startChanged = pointDistance5(startLocalPoint, nextArrow.points[0]) !== 0;
   const indicesSet = new Set(selectedPointsIndices);
   if (startBindable && startChanged) {
@@ -9863,10 +10403,7 @@ var pointDraggingUpdates = (selectedPointsIndices, deltaX, deltaY, elementsMap,
   }
   const indices = Array.from(indicesSet);
   return {
-    updates: updates.startBinding || updates.suggestedBinding ? {
-      startBinding: updates.startBinding,
-      suggestedBinding: updates.suggestedBinding
-    } : void 0,
+    updates,
     positions: new Map(
       indices.map((idx) => {
         return [
@@ -11019,11 +11556,7 @@ var frameAndChildrenSelectedTogether = (selectedElements) => {
 };
 
 // src/renderElement.ts
-var IMAGE_INVERT_FILTER = "invert(100%) hue-rotate(180deg) saturate(1.25)";
 var isPendingImageElement = (element, renderConfig) => isInitializedImageElement(element) && !renderConfig.imageCache.has(element.fileId);
-var shouldResetImageFilter = (element, renderConfig, appState) => {
-  return appState.theme === THEME.DARK && isInitializedImageElement(element) && !isPendingImageElement(element, renderConfig) && renderConfig.imageCache.get(element.fileId)?.mimeType !== MIME_TYPES.svg;
-};
 var getCanvasPadding = (element) => {
   switch (element.type) {
     case "freedraw":
@@ -11095,9 +11628,6 @@ var generateElementCanvas = (element, elementsMap, zoom, renderConfig, appState)
     window.devicePixelRatio * scale
   );
   const rc = rough_default.canvas(canvas);
-  if (shouldResetImageFilter(element, renderConfig, appState)) {
-    context.filter = IMAGE_INVERT_FILTER;
-  }
   drawElementOnCanvas(element, rc, context, renderConfig);
   context.restore();
   const boundTextElement = getBoundTextElement(element, elementsMap);
@@ -11161,8 +11691,8 @@ var IMAGE_ERROR_PLACEHOLDER_IMG = typeof document !== "undefined" ? document.cre
 IMAGE_ERROR_PLACEHOLDER_IMG.src = `data:${MIME_TYPES.svg},${encodeURIComponent(
   `<svg viewBox="0 0 668 668" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48ZM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56ZM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48Z" style="fill:#888;fill-rule:nonzero" transform="matrix(.81709 0 0 .81709 124.825 145.825)"/><path d="M256 8C119.034 8 8 119.033 8 256c0 136.967 111.034 248 248 248s248-111.034 248-248S392.967 8 256 8Zm130.108 117.892c65.448 65.448 70 165.481 20.677 235.637L150.47 105.216c70.204-49.356 170.226-44.735 235.638 20.676ZM125.892 386.108c-65.448-65.448-70-165.481-20.677-235.637L361.53 406.784c-70.203 49.356-170.226 44.736-235.638-20.676Z" style="fill:#888;fill-rule:nonzero" transform="matrix(.30366 0 0 .30366 506.822 60.065)"/></svg>`
 )}`;
-var drawImagePlaceholder = (element, context) => {
-  context.fillStyle = "#E7E7E7";
+var drawImagePlaceholder = (element, context, theme) => {
+  context.fillStyle = theme === THEME.DARK ? "#2E2E2E" : "#E7E7E7";
   context.fillRect(0, 0, element.width, element.height);
   const imageMinWidthOrHeight = Math.min(element.width, element.height);
   const size = Math.min(
@@ -11186,33 +11716,38 @@ var drawElementOnCanvas = (element, rc, context, renderConfig) => {
     case "ellipse": {
       context.lineJoin = "round";
       context.lineCap = "round";
-      rc.draw(ShapeCache.get(element));
+      rc.draw(ShapeCache.generateElementShape(element, renderConfig));
       break;
     }
     case "arrow":
     case "line": {
       context.lineJoin = "round";
       context.lineCap = "round";
-      ShapeCache.get(element).forEach((shape) => {
-        rc.draw(shape);
-      });
+      ShapeCache.generateElementShape(element, renderConfig).forEach(
+        (shape) => {
+          rc.draw(shape);
+        }
+      );
       break;
     }
     case "freedraw": {
       context.save();
-      context.fillStyle = element.strokeColor;
-      const path = getFreeDrawPath2D(element);
-      const fillShape = ShapeCache.get(element);
-      if (fillShape) {
-        rc.draw(fillShape);
-      }
-      context.fillStyle = element.strokeColor;
-      context.fill(path);
+      const shapes = ShapeCache.generateElementShape(element, renderConfig);
+      for (const shape of shapes) {
+        if (typeof shape === "string") {
+          context.fillStyle = renderConfig.theme === THEME.DARK ? applyDarkModeFilter(element.strokeColor) : element.strokeColor;
+          context.fill(new Path2D(shape));
+        } else {
+          rc.draw(shape);
+        }
+      }
       context.restore();
       break;
     }
     case "image": {
-      const img = isInitializedImageElement(element) ? renderConfig.imageCache.get(element.fileId)?.image : void 0;
+      context.save();
+      const cacheEntry = element.fileId !== null ? renderConfig.imageCache.get(element.fileId) : null;
+      const img = isInitializedImageElement(element) ? cacheEntry?.image : void 0;
       if (img != null && !(img instanceof Promise)) {
         if (element.roundness && context.roundRect) {
           context.beginPath();
@@ -11231,33 +11766,84 @@ var drawElementOnCanvas = (element, rc, context, renderConfig) => {
           width: img.naturalWidth,
           height: img.naturalHeight
         };
-        context.drawImage(
-          img,
-          x,
-          y,
-          width,
-          height,
-          0,
-          0,
-          element.width,
-          element.height
-        );
-      } else {
-        drawImagePlaceholder(element, context);
-      }
-      break;
-    }
-    default: {
-      if (isTextElement(element)) {
-        const rtl = isRTL(element.text);
-        const shouldTemporarilyAttach = rtl && !context.canvas.isConnected;
-        if (shouldTemporarilyAttach) {
-          document.body.appendChild(context.canvas);
-        }
-        context.canvas.setAttribute("dir", rtl ? "rtl" : "ltr");
-        context.save();
+        const shouldInvertImage = renderConfig.theme === THEME.DARK && cacheEntry?.mimeType === MIME_TYPES.svg;
+        if (shouldInvertImage && isSafari) {
+          const devicePixelRatio = window.devicePixelRatio || 1;
+          const tempCanvas = document.createElement("canvas");
+          tempCanvas.width = element.width * devicePixelRatio;
+          tempCanvas.height = element.height * devicePixelRatio;
+          const tempContext = tempCanvas.getContext("2d");
+          if (tempContext) {
+            tempContext.scale(devicePixelRatio, devicePixelRatio);
+            tempContext.drawImage(
+              img,
+              x,
+              y,
+              width,
+              height,
+              0,
+              0,
+              element.width,
+              element.height
+            );
+            const imageData = tempContext.getImageData(
+              0,
+              0,
+              tempCanvas.width,
+              tempCanvas.height
+            );
+            const data = imageData.data;
+            for (let i = 0; i < data.length; i += 4) {
+              data[i] = 255 - data[i];
+              data[i + 1] = 255 - data[i + 1];
+              data[i + 2] = 255 - data[i + 2];
+            }
+            tempContext.putImageData(imageData, 0, 0);
+            context.drawImage(
+              tempCanvas,
+              0,
+              0,
+              tempCanvas.width,
+              tempCanvas.height,
+              0,
+              0,
+              element.width,
+              element.height
+            );
+          }
+        } else {
+          if (shouldInvertImage) {
+            context.filter = DARK_THEME_FILTER;
+          }
+          context.drawImage(
+            img,
+            x,
+            y,
+            width,
+            height,
+            0,
+            0,
+            element.width,
+            element.height
+          );
+        }
+      } else {
+        drawImagePlaceholder(element, context, renderConfig.theme);
+      }
+      context.restore();
+      break;
+    }
+    default: {
+      if (isTextElement(element)) {
+        const rtl = isRTL(element.text);
+        const shouldTemporarilyAttach = rtl && !context.canvas.isConnected;
+        if (shouldTemporarilyAttach) {
+          document.body.appendChild(context.canvas);
+        }
+        context.canvas.setAttribute("dir", rtl ? "rtl" : "ltr");
+        context.save();
         context.font = getFontString3(element);
-        context.fillStyle = element.strokeColor;
+        context.fillStyle = renderConfig.theme === THEME.DARK ? applyDarkModeFilter(element.strokeColor) : element.strokeColor;
         context.textAlign = element.textAlign;
         const lines = element.text.replace(/\r\n?/g, "\n").split("\n");
         const horizontalOffset = element.textAlign === "center" ? element.width / 2 : element.textAlign === "right" ? element.width : 0;
@@ -11405,9 +11991,9 @@ var renderElement = (element, elementsMap, allElementsMap, rc, context, renderCo
         );
         context.fillStyle = "rgba(0, 0, 200, 0.04)";
         context.lineWidth = FRAME_STYLE.strokeWidth / appState.zoom.value;
-        context.strokeStyle = FRAME_STYLE.strokeColor;
+        context.strokeStyle = appState.theme === THEME.DARK ? applyDarkModeFilter(FRAME_STYLE.strokeColor) : FRAME_STYLE.strokeColor;
         if (isMagicFrameElement(element)) {
-          context.strokeStyle = appState.theme === THEME.LIGHT ? "#7affd7" : "#1d8264";
+          context.strokeStyle = appState.theme === THEME.LIGHT ? "#7affd7" : applyDarkModeFilter("#1d8264");
         }
         if (FRAME_STYLE.radius && context.roundRect) {
           context.beginPath();
@@ -11428,7 +12014,6 @@ var renderElement = (element, elementsMap, allElementsMap, rc, context, renderCo
       break;
     }
     case "freedraw": {
-      ShapeCache.generateElementShape(element, null);
       if (renderConfig.isExporting) {
         const [x1, y1, x2, y2] = getElementAbsoluteCoords2(element, elementsMap);
         const cx = (x1 + x2) / 2 + appState.scrollX;
@@ -11470,7 +12055,6 @@ var renderElement = (element, elementsMap, allElementsMap, rc, context, renderCo
     case "text":
     case "iframe":
     case "embeddable": {
-      ShapeCache.generateElementShape(element, renderConfig);
       if (renderConfig.isExporting) {
         const [x1, y1, x2, y2] = getElementAbsoluteCoords2(element, elementsMap);
         const cx = (x1 + x2) / 2 + appState.scrollX;
@@ -11491,9 +12075,6 @@ var renderElement = (element, elementsMap, allElementsMap, rc, context, renderCo
         }
         context.save();
         context.translate(cx, cy);
-        if (shouldResetImageFilter(element, renderConfig, appState)) {
-          context.filter = "none";
-        }
         const boundTextElement = getBoundTextElement(element, elementsMap);
         if (isArrowElement(element) && boundTextElement) {
           const tempCanvas = document.createElement("canvas");
@@ -11605,19 +12186,6 @@ var renderElement = (element, elementsMap, allElementsMap, rc, context, renderCo
   }
   context.globalAlpha = 1;
 };
-var pathsCache = /* @__PURE__ */ new WeakMap([]);
-function generateFreeDrawShape(element) {
-  const svgPathData = getFreeDrawSvgPath(element);
-  const path = new Path2D(svgPathData);
-  pathsCache.set(element, path);
-  return path;
-}
-function getFreeDrawPath2D(element) {
-  return pathsCache.get(element);
-}
-function getFreeDrawSvgPath(element) {
-  return getSvgPathFromStroke(getFreedrawOutlinePoints(element));
-}
 function getFreedrawOutlineAsSegments(element, points, elementsMap) {
   const bounds = getElementBounds(
     {
@@ -11667,46 +12235,11 @@ function getFreedrawOutlineAsSegments(element, points, elementsMap) {
     ]
   );
 }
-function getFreedrawOutlinePoints(element) {
-  const inputPoints = element.simulatePressure ? element.points : element.points.length ? element.points.map(([x, y], i) => [x, y, element.pressures[i]]) : [[0, 0, 0.5]];
-  const options = {
-    simulatePressure: element.simulatePressure,
-    size: element.strokeWidth * 4.25,
-    thinning: 0.6,
-    smoothing: 0.5,
-    streamline: 0.5,
-    easing: (t) => Math.sin(t * Math.PI / 2),
-    // https://easings.net/#easeOutSine
-    last: true
-  };
-  return ae(inputPoints, options);
-}
-function med(A2, B2) {
-  return [(A2[0] + B2[0]) / 2, (A2[1] + B2[1]) / 2];
-}
-var TO_FIXED_PRECISION = /(\s?[A-Z]?,?-?[0-9]*\.[0-9]{0,2})(([0-9]|e|-)*)/g;
-function getSvgPathFromStroke(points) {
-  if (!points.length) {
-    return "";
-  }
-  const max = points.length - 1;
-  return points.reduce(
-    (acc, point, i, arr) => {
-      if (i === max) {
-        acc.push(point, med(point, arr[0]), "L", arr[0], "Z");
-      } else {
-        acc.push(point, med(point, arr[i + 1]));
-      }
-      return acc;
-    },
-    ["M", points[0], "Q"]
-  ).join(" ").replace(TO_FIXED_PRECISION, "$1");
-}
 
 // src/comparisons.ts
 init_define_import_meta_env();
 var hasBackground = (type) => type === "rectangle" || type === "iframe" || type === "embeddable" || type === "ellipse" || type === "diamond" || type === "line" || type === "freedraw";
-var hasStrokeColor = (type) => type === "rectangle" || type === "ellipse" || type === "diamond" || type === "freedraw" || type === "arrow" || type === "line" || type === "text";
+var hasStrokeColor = (type) => type === "rectangle" || type === "ellipse" || type === "diamond" || type === "freedraw" || type === "arrow" || type === "line" || type === "text" || type === "embeddable";
 var hasStrokeWidth = (type) => type === "rectangle" || type === "iframe" || type === "embeddable" || type === "ellipse" || type === "diamond" || type === "freedraw" || type === "arrow" || type === "line";
 var hasStrokeStyle = (type) => type === "rectangle" || type === "iframe" || type === "embeddable" || type === "ellipse" || type === "diamond" || type === "arrow" || type === "line";
 var canChangeRoundness = (type) => type === "rectangle" || type === "iframe" || type === "embeddable" || type === "line" || type === "diamond" || type === "image";
@@ -11721,13 +12254,17 @@ var ShapeCache = class _ShapeCache {
    * Retrieves shape from cache if available. Use this only if shape
    * is optional and you have a fallback in case it's not cached.
    */
-  static get = (element) => {
-    return _ShapeCache.cache.get(
-      element
-    );
+  static get = (element, theme) => {
+    const cached = _ShapeCache.cache.get(element);
+    if (cached && (theme === null || cached.theme === theme)) {
+      return cached.shape;
+    }
+    return void 0;
+  };
+  static delete = (element) => {
+    _ShapeCache.cache.delete(element);
+    elementWithCanvasCache.delete(element);
   };
-  static set = (element, shape) => _ShapeCache.cache.set(element, shape);
-  static delete = (element) => _ShapeCache.cache.delete(element);
   static destroy = () => {
     _ShapeCache.cache = /* @__PURE__ */ new WeakMap();
   };
@@ -11736,21 +12273,27 @@ var ShapeCache = class _ShapeCache {
    * returns cached shape.
    */
   static generateElementShape = (element, renderConfig) => {
-    const cachedShape = renderConfig?.isExporting ? void 0 : _ShapeCache.get(element);
+    const cachedShape = renderConfig?.isExporting ? void 0 : _ShapeCache.get(element, renderConfig ? renderConfig.theme : null);
     if (cachedShape !== void 0) {
       return cachedShape;
     }
     elementWithCanvasCache.delete(element);
-    const shape = generateElementShape(
+    const shape = _generateElementShape(
       element,
       _ShapeCache.rg,
       renderConfig || {
         isExporting: false,
         canvasBackgroundColor: COLOR_PALETTE.white,
-        embedsValidationStatus: null
+        embedsValidationStatus: null,
+        theme: THEME2.LIGHT
       }
     );
-    _ShapeCache.cache.set(element, shape);
+    if (!renderConfig?.isExporting) {
+      _ShapeCache.cache.set(element, {
+        shape,
+        theme: renderConfig?.theme || THEME2.LIGHT
+      });
+    }
     return shape;
   };
 };
@@ -11770,7 +12313,7 @@ function adjustRoughness(element) {
   }
   return Math.min(roughness / (maxSize < 10 ? 3 : 2), 2.5);
 }
-var generateRoughOptions = (element, continuousPath = false) => {
+var generateRoughOptions = (element, continuousPath = false, isDarkMode = false) => {
   const options = {
     seed: element.seed,
     strokeLineDash: element.strokeStyle === "dashed" ? getDashArrayDashed(element.strokeWidth) : element.strokeStyle === "dotted" ? getDashArrayDotted(element.strokeWidth) : void 0,
@@ -11786,7 +12329,7 @@ var generateRoughOptions = (element, continuousPath = false) => {
     fillWeight: element.strokeWidth / 2,
     hachureGap: element.strokeWidth * 4,
     roughness: adjustRoughness(element),
-    stroke: element.strokeColor,
+    stroke: isDarkMode ? applyDarkModeFilter2(element.strokeColor) : element.strokeColor,
     preserveVertices: continuousPath || element.roughness < ROUGHNESS.cartoonist
   };
   switch (element.type) {
@@ -11796,7 +12339,7 @@ var generateRoughOptions = (element, continuousPath = false) => {
     case "diamond":
     case "ellipse": {
       options.fillStyle = element.fillStyle;
-      options.fill = isTransparent3(element.backgroundColor) ? void 0 : element.backgroundColor;
+      options.fill = isTransparent3(element.backgroundColor) ? void 0 : isDarkMode ? applyDarkModeFilter2(element.backgroundColor) : element.backgroundColor;
       if (element.type === "ellipse") {
         options.curveFitting = 1;
       }
@@ -11806,7 +12349,7 @@ var generateRoughOptions = (element, continuousPath = false) => {
     case "freedraw": {
       if (isPathALoop(element.points)) {
         options.fillStyle = element.fillStyle;
-        options.fill = element.backgroundColor === "transparent" ? void 0 : element.backgroundColor;
+        options.fill = element.backgroundColor === "transparent" ? void 0 : isDarkMode ? applyDarkModeFilter2(element.backgroundColor) : element.backgroundColor;
       }
       return options;
     }
@@ -11834,7 +12377,7 @@ var modifyIframeLikeForRoughOptions = (element, isExporting, embedsValidationSta
   }
   return element;
 };
-var getArrowheadShapes = (element, shape, position, arrowhead, generator, options, canvasBackgroundColor) => {
+var getArrowheadShapes = (element, shape, position, arrowhead, generator, options, canvasBackgroundColor, isDarkMode) => {
   const arrowheadPoints = getArrowheadPoints(
     element,
     shape,
@@ -11851,6 +12394,7 @@ var getArrowheadShapes = (element, shape, position, arrowhead, generator, option
     const [, , x3, y3, x4, y4] = arrowheadPoints2;
     return [generator.line(x3, y3, x4, y4, options2)];
   };
+  const strokeColor = isDarkMode ? applyDarkModeFilter2(element.strokeColor) : element.strokeColor;
   switch (arrowhead) {
     case "dot":
     case "circle":
@@ -11860,9 +12404,9 @@ var getArrowheadShapes = (element, shape, position, arrowhead, generator, option
       return [
         generator.circle(x, y, diameter, {
           ...options,
-          fill: arrowhead === "circle_outline" ? canvasBackgroundColor : element.strokeColor,
+          fill: arrowhead === "circle_outline" ? canvasBackgroundColor : strokeColor,
           fillStyle: "solid",
-          stroke: element.strokeColor,
+          stroke: strokeColor,
           roughness: Math.min(0.5, options.roughness || 0)
         })
       ];
@@ -11881,7 +12425,7 @@ var getArrowheadShapes = (element, shape, position, arrowhead, generator, option
           ],
           {
             ...options,
-            fill: arrowhead === "triangle_outline" ? canvasBackgroundColor : element.strokeColor,
+            fill: arrowhead === "triangle_outline" ? canvasBackgroundColor : strokeColor,
             fillStyle: "solid",
             roughness: Math.min(1, options.roughness || 0)
           }
@@ -11903,7 +12447,7 @@ var getArrowheadShapes = (element, shape, position, arrowhead, generator, option
           ],
           {
             ...options,
-            fill: arrowhead === "diamond_outline" ? canvasBackgroundColor : element.strokeColor,
+            fill: arrowhead === "diamond_outline" ? canvasBackgroundColor : strokeColor,
             fillStyle: "solid",
             roughness: Math.min(1, options.roughness || 0)
           }
@@ -12084,11 +12628,13 @@ var generateLinearCollisionShape = (element) => {
     }
   }
 };
-var generateElementShape = (element, generator, {
+var _generateElementShape = (element, generator, {
   isExporting,
   canvasBackgroundColor,
-  embedsValidationStatus
+  embedsValidationStatus,
+  theme
 }) => {
+  const isDarkMode = theme === THEME2.DARK;
   switch (element.type) {
     case "rectangle":
     case "iframe":
@@ -12106,7 +12652,8 @@ var generateElementShape = (element, generator, {
               isExporting,
               embedsValidationStatus
             ),
-            true
+            true,
+            isDarkMode
           )
         );
       } else {
@@ -12121,7 +12668,8 @@ var generateElementShape = (element, generator, {
               isExporting,
               embedsValidationStatus
             ),
-            false
+            false,
+            isDarkMode
           )
         );
       }
@@ -12145,7 +12693,7 @@ var generateElementShape = (element, generator, {
             C ${leftX} ${leftY}, ${leftX} ${leftY}, ${leftX + verticalRadius} ${leftY - horizontalRadius}
             L ${topX - verticalRadius} ${topY + horizontalRadius}
             C ${topX} ${topY}, ${topX} ${topY}, ${topX + verticalRadius} ${topY + horizontalRadius}`,
-          generateRoughOptions(element, true)
+          generateRoughOptions(element, true, isDarkMode)
         );
       } else {
         shape = generator.polygon(
@@ -12155,7 +12703,7 @@ var generateElementShape = (element, generator, {
             [bottomX, bottomY],
             [leftX, leftY]
           ],
-          generateRoughOptions(element)
+          generateRoughOptions(element, false, isDarkMode)
         );
       }
       return shape;
@@ -12166,14 +12714,14 @@ var generateElementShape = (element, generator, {
         element.height / 2,
         element.width,
         element.height,
-        generateRoughOptions(element)
+        generateRoughOptions(element, false, isDarkMode)
       );
       return shape;
     }
     case "line":
     case "arrow": {
       let shape;
-      const options = generateRoughOptions(element);
+      const options = generateRoughOptions(element, false, isDarkMode);
       const points = element.points.length ? element.points : [pointFrom13(0, 0)];
       if (isElbowArrow(element)) {
         if (!points.every(
@@ -12189,7 +12737,7 @@ var generateElementShape = (element, generator, {
           shape = [
             generator.path(
               generateElbowArrowShape(points, 16),
-              generateRoughOptions(element, true)
+              generateRoughOptions(element, true, isDarkMode)
             )
           ];
         }
@@ -12216,7 +12764,8 @@ var generateElementShape = (element, generator, {
             startArrowhead,
             generator,
             options,
-            canvasBackgroundColor
+            canvasBackgroundColor,
+            isDarkMode
           );
           shape.push(...shapes);
         }
@@ -12230,7 +12779,8 @@ var generateElementShape = (element, generator, {
             endArrowhead,
             generator,
             options,
-            canvasBackgroundColor
+            canvasBackgroundColor,
+            isDarkMode
           );
           shape.push(...shapes);
         }
@@ -12238,21 +12788,21 @@ var generateElementShape = (element, generator, {
       return shape;
     }
     case "freedraw": {
-      let shape;
-      generateFreeDrawShape(element);
+      const shapes = [];
       if (isPathALoop(element.points)) {
         const simplifiedPoints = simplify(
           element.points,
           0.75
         );
-        shape = generator.curve(simplifiedPoints, {
-          ...generateRoughOptions(element),
-          stroke: "none"
-        });
-      } else {
-        shape = null;
+        shapes.push(
+          generator.curve(simplifiedPoints, {
+            ...generateRoughOptions(element, false, isDarkMode),
+            stroke: "none"
+          })
+        );
       }
-      return shape;
+      shapes.push(getFreeDrawSvgPath(element));
+      return shapes;
     }
     case "frame":
     case "magicframe":
@@ -12331,7 +12881,7 @@ var getElementShape = (element, elementsMap) => {
       return getPolygonShape(element);
     case "arrow":
     case "line": {
-      const roughShape = ShapeCache.get(element)?.[0] ?? ShapeCache.generateElementShape(element, null)[0];
+      const roughShape = ShapeCache.generateElementShape(element, null)[0];
       const [, , , , cx, cy] = getElementAbsoluteCoords2(element, elementsMap);
       return shouldTestInside(element) ? getClosedCurveShape(
         element,
@@ -12385,6 +12935,45 @@ var toggleLinePolygonState = (element, nextPolygonState) => {
   };
   return ret;
 };
+var getFreeDrawSvgPath = (element) => {
+  return getSvgPathFromStroke(
+    getFreedrawOutlinePoints(element)
+  );
+};
+var getFreedrawOutlinePoints = (element) => {
+  const inputPoints = element.simulatePressure ? element.points : element.points.length ? element.points.map(([x, y], i) => [x, y, element.pressures[i]]) : [[0, 0, 0.5]];
+  return ae(inputPoints, {
+    simulatePressure: element.simulatePressure,
+    size: element.strokeWidth * 4.25,
+    thinning: 0.6,
+    smoothing: 0.5,
+    streamline: 0.5,
+    easing: (t) => Math.sin(t * Math.PI / 2),
+    // https://easings.net/#easeOutSine
+    last: true
+  });
+};
+var med = (A2, B2) => {
+  return [(A2[0] + B2[0]) / 2, (A2[1] + B2[1]) / 2];
+};
+var TO_FIXED_PRECISION = /(\s?[A-Z]?,?-?[0-9]*\.[0-9]{0,2})(([0-9]|e|-)*)/g;
+var getSvgPathFromStroke = (points) => {
+  if (!points.length) {
+    return "";
+  }
+  const max = points.length - 1;
+  return points.reduce(
+    (acc, point, i, arr) => {
+      if (i === max) {
+        acc.push(point, med(point, arr[0]), "L", arr[0], "Z");
+      } else {
+        acc.push(point, med(point, arr[i + 1]));
+      }
+      return acc;
+    },
+    ["M", points[0], "Q"]
+  ).join(" ").replace(TO_FIXED_PRECISION, "$1");
+};
 
 // src/bounds.ts
 var ElementBounds = class _ElementBounds {
@@ -12983,7 +13572,7 @@ var getLinearElementRotatedBounds = (element, cx, cy, elementsMap) => {
     }
     return coords2;
   }
-  const cachedShape = ShapeCache.get(element)?.[0];
+  const cachedShape = ShapeCache.get(element, null)?.[0];
   const shape = cachedShape ?? generateLinearElementShape(element);
   const ops = getCurvePathOps(shape);
   const transformXY = ([x, y]) => pointRotateRads13(
@@ -13210,7 +13799,7 @@ var elementCenterPoint = (element, elementsMap, xOffset = 0, yOffset = 0) => {
 var INVISIBLY_SMALL_ELEMENT_SIZE = 0.1;
 var isInvisiblySmallElement = (element) => {
   if (isLinearElement(element) || isFreeDrawElement(element)) {
-    return element.points.length < 2 || element.points.length === 2 && isArrowElement(element) && pointsEqual6(
+    return element.points.length < 2 || element.points.length === 2 && isArrowElement(element) && pointsEqual7(
       element.points[0],
       element.points[element.points.length - 1],
       INVISIBLY_SMALL_ELEMENT_SIZE
@@ -16435,7 +17024,7 @@ var ElementsDelta = class _ElementsDelta {
 
 // src/distribute.ts
 init_define_import_meta_env();
-var distributeElements = (selectedElements, elementsMap, distribution, appState) => {
+var distributeElements = (selectedElements, elementsMap, distribution, appState, scene) => {
   const [start, mid, end, extent] = distribution.axis === "x" ? ["minX", "midX", "maxX", "width"] : ["minY", "midY", "maxY", "height"];
   const bounds = getCommonBoundingBox(selectedElements);
   const groups = getSelectedElementsByGroup(
@@ -16462,12 +17051,16 @@ var distributeElements = (selectedElements, elementsMap, distribution, appState)
         pos2 += step2;
         translation[distribution.axis] = pos2 - box[mid];
       }
-      return group.map(
-        (element) => newElementWith(element, {
+      return group.map((element) => {
+        const updatedElement = scene.mutateElement(element, {
           x: element.x + translation.x,
           y: element.y + translation.y
-        })
-      );
+        });
+        updateBoundElements(element, scene, {
+          simultaneouslyUpdated: group
+        });
+        return updatedElement;
+      });
     });
   }
   let pos = bounds[start];
@@ -16479,12 +17072,16 @@ var distributeElements = (selectedElements, elementsMap, distribution, appState)
     translation[distribution.axis] = pos - box[start];
     pos += step;
     pos += box[extent];
-    return group.map(
-      (element) => newElementWith(element, {
+    return group.map((element) => {
+      const updatedElement = scene.mutateElement(element, {
         x: element.x + translation.x,
         y: element.y + translation.y
-      })
-    );
+      });
+      updateBoundElements(element, scene, {
+        simultaneouslyUpdated: group
+      });
+      return updatedElement;
+    });
   });
 };
 
@@ -17921,116 +18518,829 @@ var isNodeInFlowchart = (element, elementsMap) => {
   return false;
 };
 
-// src/image.ts
+// src/arrows/focus.ts
 init_define_import_meta_env();
-import { MIME_TYPES as MIME_TYPES2, SVG_NS } from "@excalidraw/common";
-var loadHTMLImageElement = (dataURL) => {
-  return new Promise((resolve, reject) => {
-    const image = new Image();
-    image.onload = () => {
-      resolve(image);
-    };
-    image.onerror = (error) => {
-      reject(error);
-    };
-    image.src = dataURL;
-  });
+import { pointDistance as pointDistance8, pointFrom as pointFrom16 } from "@excalidraw/math";
+import { invariant as invariant12 } from "@excalidraw/common";
+
+// src/zindex.ts
+init_define_import_meta_env();
+import { arrayToMap as arrayToMap11, findIndex, findLastIndex as findLastIndex2 } from "@excalidraw/common";
+var isOfTargetFrame = (element, frameId) => {
+  return element.frameId === frameId || element.id === frameId;
 };
-var updateImageCache = async ({
-  fileIds,
-  files,
-  imageCache
-}) => {
-  const updatedFiles = /* @__PURE__ */ new Map();
-  const erroredFiles = /* @__PURE__ */ new Map();
-  await Promise.all(
-    fileIds.reduce((promises, fileId) => {
-      const fileData = files[fileId];
-      if (fileData && !updatedFiles.has(fileId)) {
-        updatedFiles.set(fileId, true);
-        return promises.concat(
-          (async () => {
-            try {
-              if (fileData.mimeType === MIME_TYPES2.binary) {
-                throw new Error("Only images can be added to ImageCache");
-              }
-              const imagePromise = loadHTMLImageElement(fileData.dataURL);
-              const data = {
-                image: imagePromise,
-                mimeType: fileData.mimeType
-              };
-              imageCache.set(fileId, data);
-              const image = await imagePromise;
-              imageCache.set(fileId, { ...data, image });
-            } catch (error) {
-              erroredFiles.set(fileId, true);
-            }
-          })()
-        );
-      }
-      return promises;
-    }, [])
+var getIndicesToMove = (elements, appState, elementsToBeMoved) => {
+  let selectedIndices = [];
+  let deletedIndices = [];
+  let includeDeletedIndex = null;
+  let index = -1;
+  const selectedElementIds = arrayToMap11(
+    elementsToBeMoved ? elementsToBeMoved : getSelectedElements(elements, appState, {
+      includeBoundTextElement: true,
+      includeElementsInFrames: true
+    })
   );
-  return {
-    imageCache,
-    /** includes errored files because they cache was updated nonetheless */
-    updatedFiles,
-    /** files that failed when creating HTMLImageElement */
-    erroredFiles
-  };
-};
-var getInitializedImageElements = (elements) => elements.filter(
-  (element) => isInitializedImageElement(element)
-);
-var isHTMLSVGElement = (node) => {
-  return node?.nodeName.toLowerCase() === "svg";
-};
-var normalizeSVG = (SVGString) => {
-  const doc = new DOMParser().parseFromString(SVGString, MIME_TYPES2.svg);
-  const svg = doc.querySelector("svg");
-  const errorNode = doc.querySelector("parsererror");
-  if (errorNode || !isHTMLSVGElement(svg)) {
-    throw new Error("Invalid SVG");
-  } else {
-    if (!svg.hasAttribute("xmlns")) {
-      svg.setAttribute("xmlns", SVG_NS);
-    }
-    let width = svg.getAttribute("width");
-    let height = svg.getAttribute("height");
-    if (width?.includes("%") || width === "auto") {
-      width = null;
-    }
-    if (height?.includes("%") || height === "auto") {
-      height = null;
-    }
-    const viewBox = svg.getAttribute("viewBox");
-    if (!width || !height) {
-      width = width || "50";
-      height = height || "50";
-      if (viewBox) {
-        const match = viewBox.match(
-          /\d+ +\d+ +(\d+(?:\.\d+)?) +(\d+(?:\.\d+)?)/
-        );
-        if (match) {
-          [, width, height] = match;
-        }
+  while (++index < elements.length) {
+    const element = elements[index];
+    if (selectedElementIds.get(element.id)) {
+      if (deletedIndices.length) {
+        selectedIndices = selectedIndices.concat(deletedIndices);
+        deletedIndices = [];
       }
-      svg.setAttribute("width", width);
-      svg.setAttribute("height", height);
-    }
-    if (!viewBox) {
-      svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+      selectedIndices.push(index);
+      includeDeletedIndex = index + 1;
+    } else if (element.isDeleted && includeDeletedIndex === index) {
+      includeDeletedIndex = index + 1;
+      deletedIndices.push(index);
+    } else {
+      deletedIndices = [];
     }
-    return svg.outerHTML;
   }
+  return selectedIndices;
 };
-
-// src/positionElementsOnGrid.ts
-init_define_import_meta_env();
-var positionElementsOnGrid = (elements, centerX, centerY, padding = 50) => {
-  if (!elements || elements.length === 0) {
-    return [];
-  }
+var toContiguousGroups = (array) => {
+  let cursor = 0;
+  return array.reduce((acc, value, index) => {
+    if (index > 0 && array[index - 1] !== value - 1) {
+      cursor = ++cursor;
+    }
+    (acc[cursor] || (acc[cursor] = [])).push(value);
+    return acc;
+  }, []);
+};
+var getTargetIndexAccountingForBinding = (nextElement, elements, direction, scene) => {
+  if ("containerId" in nextElement && nextElement.containerId) {
+    const containerElement = scene.getElement(nextElement.containerId);
+    if (containerElement) {
+      return direction === "left" ? Math.min(
+        elements.indexOf(containerElement),
+        elements.indexOf(nextElement)
+      ) : Math.max(
+        elements.indexOf(containerElement),
+        elements.indexOf(nextElement)
+      );
+    }
+  } else {
+    const boundElementId = nextElement.boundElements?.find(
+      (binding) => binding.type !== "arrow"
+    )?.id;
+    if (boundElementId) {
+      const boundTextElement = scene.getElement(boundElementId);
+      if (boundTextElement) {
+        return direction === "left" ? Math.min(
+          elements.indexOf(boundTextElement),
+          elements.indexOf(nextElement)
+        ) : Math.max(
+          elements.indexOf(boundTextElement),
+          elements.indexOf(nextElement)
+        );
+      }
+    }
+  }
+};
+var getContiguousFrameRangeElements = (allElements, frameId) => {
+  let rangeStart = -1;
+  let rangeEnd = -1;
+  allElements.forEach((element, index) => {
+    if (isOfTargetFrame(element, frameId)) {
+      if (rangeStart === -1) {
+        rangeStart = index;
+      }
+      rangeEnd = index;
+    }
+  });
+  if (rangeStart === -1) {
+    return [];
+  }
+  return allElements.slice(rangeStart, rangeEnd + 1);
+};
+var moveArrowAboveBindable2 = (point, arrow, elements, elementsMap, scene, hit) => {
+  const hoveredElement = hit ? hit : getHoveredElementForBinding(point, elements, elementsMap);
+  if (!hoveredElement) {
+    return elements;
+  }
+  const boundTextElement = getBoundTextElement(hoveredElement, elementsMap);
+  const containerElement = isTextElement(hoveredElement) ? getContainerElement(hoveredElement, elementsMap) : null;
+  const bindableIds = [
+    hoveredElement.id,
+    boundTextElement?.id,
+    containerElement?.id
+  ].filter((id) => !!id);
+  const bindableIdx = elements.findIndex((el) => bindableIds.includes(el.id));
+  const arrowIdx = elements.findIndex((el) => el.id === arrow.id);
+  if (arrowIdx !== -1 && bindableIdx !== -1 && arrowIdx < bindableIdx) {
+    const updatedElements = Array.from(elements);
+    const arrow2 = updatedElements.splice(arrowIdx, 1)[0];
+    updatedElements.splice(bindableIdx, 0, arrow2);
+    scene.replaceAllElements(updatedElements);
+  }
+  return elements;
+};
+var getTargetIndex = (appState, elements, boundaryIndex, direction, containingFrame, scene) => {
+  const sourceElement = elements[boundaryIndex];
+  const indexFilter = (element) => {
+    if (element.isDeleted) {
+      return false;
+    }
+    if (containingFrame) {
+      return element.frameId === containingFrame;
+    }
+    if (appState.editingGroupId) {
+      return element.groupIds.includes(appState.editingGroupId);
+    }
+    return true;
+  };
+  const candidateIndex = direction === "left" ? findLastIndex2(
+    elements,
+    (el) => indexFilter(el),
+    Math.max(0, boundaryIndex - 1)
+  ) : findIndex(elements, (el) => indexFilter(el), boundaryIndex + 1);
+  const nextElement = elements[candidateIndex];
+  if (!nextElement) {
+    return -1;
+  }
+  if (appState.editingGroupId) {
+    if (
+      // candidate element is a sibling in current editing group → return
+      sourceElement?.groupIds.join("") === nextElement?.groupIds.join("")
+    ) {
+      return getTargetIndexAccountingForBinding(
+        nextElement,
+        elements,
+        direction,
+        scene
+      ) ?? candidateIndex;
+    } else if (!nextElement?.groupIds.includes(appState.editingGroupId)) {
+      return -1;
+    }
+  }
+  if (!containingFrame && (nextElement.frameId || isFrameLikeElement(nextElement))) {
+    const frameElements = getContiguousFrameRangeElements(
+      elements,
+      nextElement.frameId || nextElement.id
+    );
+    return direction === "left" ? elements.indexOf(frameElements[0]) : elements.indexOf(frameElements[frameElements.length - 1]);
+  }
+  if (!nextElement.groupIds.length) {
+    return getTargetIndexAccountingForBinding(
+      nextElement,
+      elements,
+      direction,
+      scene
+    ) ?? candidateIndex;
+  }
+  const siblingGroupId = appState.editingGroupId ? nextElement.groupIds[nextElement.groupIds.indexOf(appState.editingGroupId) - 1] : nextElement.groupIds[nextElement.groupIds.length - 1];
+  const elementsInSiblingGroup = getElementsInGroup(elements, siblingGroupId);
+  if (elementsInSiblingGroup.length) {
+    return direction === "left" ? elements.indexOf(elementsInSiblingGroup[0]) : elements.indexOf(
+      elementsInSiblingGroup[elementsInSiblingGroup.length - 1]
+    );
+  }
+  return candidateIndex;
+};
+var getTargetElementsMap = (elements, indices) => {
+  return indices.reduce((acc, index) => {
+    const element = elements[index];
+    acc.set(element.id, element);
+    return acc;
+  }, /* @__PURE__ */ new Map());
+};
+var shiftElementsByOne = (elements, appState, direction, scene) => {
+  const indicesToMove = getIndicesToMove(elements, appState);
+  const targetElementsMap = getTargetElementsMap(elements, indicesToMove);
+  let groupedIndices = toContiguousGroups(indicesToMove);
+  if (direction === "right") {
+    groupedIndices = groupedIndices.reverse();
+  }
+  const selectedFrames = new Set(
+    indicesToMove.filter((idx) => isFrameLikeElement(elements[idx])).map((idx) => elements[idx].id)
+  );
+  groupedIndices.forEach((indices, i) => {
+    const leadingIndex = indices[0];
+    const trailingIndex = indices[indices.length - 1];
+    const boundaryIndex = direction === "left" ? leadingIndex : trailingIndex;
+    const containingFrame = indices.some((idx) => {
+      const el = elements[idx];
+      return el.frameId && selectedFrames.has(el.frameId);
+    }) ? null : elements[boundaryIndex]?.frameId;
+    const targetIndex = getTargetIndex(
+      appState,
+      elements,
+      boundaryIndex,
+      direction,
+      containingFrame,
+      scene
+    );
+    if (targetIndex === -1 || boundaryIndex === targetIndex) {
+      return;
+    }
+    const leadingElements = direction === "left" ? elements.slice(0, targetIndex) : elements.slice(0, leadingIndex);
+    const targetElements = elements.slice(leadingIndex, trailingIndex + 1);
+    const displacedElements = direction === "left" ? elements.slice(targetIndex, leadingIndex) : elements.slice(trailingIndex + 1, targetIndex + 1);
+    const trailingElements = direction === "left" ? elements.slice(trailingIndex + 1) : elements.slice(targetIndex + 1);
+    elements = direction === "left" ? [
+      ...leadingElements,
+      ...targetElements,
+      ...displacedElements,
+      ...trailingElements
+    ] : [
+      ...leadingElements,
+      ...displacedElements,
+      ...targetElements,
+      ...trailingElements
+    ];
+  });
+  syncMovedIndices(elements, targetElementsMap);
+  return elements;
+};
+var shiftElementsToEnd = (elements, appState, direction, containingFrame, elementsToBeMoved) => {
+  const indicesToMove = getIndicesToMove(elements, appState, elementsToBeMoved);
+  const targetElementsMap = getTargetElementsMap(elements, indicesToMove);
+  const displacedElements = [];
+  let leadingIndex;
+  let trailingIndex;
+  if (direction === "left") {
+    if (containingFrame) {
+      leadingIndex = findIndex(
+        elements,
+        (el) => isOfTargetFrame(el, containingFrame)
+      );
+    } else if (appState.editingGroupId) {
+      const groupElements = getElementsInGroup(
+        elements,
+        appState.editingGroupId
+      );
+      if (!groupElements.length) {
+        return elements;
+      }
+      leadingIndex = elements.indexOf(groupElements[0]);
+    } else {
+      leadingIndex = 0;
+    }
+    trailingIndex = indicesToMove[indicesToMove.length - 1];
+  } else {
+    if (containingFrame) {
+      trailingIndex = findLastIndex2(
+        elements,
+        (el) => isOfTargetFrame(el, containingFrame)
+      );
+    } else if (appState.editingGroupId) {
+      const groupElements = getElementsInGroup(
+        elements,
+        appState.editingGroupId
+      );
+      if (!groupElements.length) {
+        return elements;
+      }
+      trailingIndex = elements.indexOf(groupElements[groupElements.length - 1]);
+    } else {
+      trailingIndex = elements.length - 1;
+    }
+    leadingIndex = indicesToMove[0];
+  }
+  if (leadingIndex === -1) {
+    leadingIndex = 0;
+  }
+  for (let index = leadingIndex; index < trailingIndex + 1; index++) {
+    if (!indicesToMove.includes(index)) {
+      displacedElements.push(elements[index]);
+    }
+  }
+  const targetElements = Array.from(targetElementsMap.values());
+  const leadingElements = elements.slice(0, leadingIndex);
+  const trailingElements = elements.slice(trailingIndex + 1);
+  const nextElements = direction === "left" ? [
+    ...leadingElements,
+    ...targetElements,
+    ...displacedElements,
+    ...trailingElements
+  ] : [
+    ...leadingElements,
+    ...displacedElements,
+    ...targetElements,
+    ...trailingElements
+  ];
+  syncMovedIndices(nextElements, targetElementsMap);
+  return nextElements;
+};
+function shiftElementsAccountingForFrames(allElements, appState, direction, shiftFunction) {
+  const elementsToMove = arrayToMap11(
+    getSelectedElements(allElements, appState, {
+      includeBoundTextElement: true,
+      includeElementsInFrames: true
+    })
+  );
+  const frameAwareContiguousElementsToMove = { regularElements: [], frameChildren: /* @__PURE__ */ new Map() };
+  const fullySelectedFrames = /* @__PURE__ */ new Set();
+  for (const element of allElements) {
+    if (elementsToMove.has(element.id) && isFrameLikeElement(element)) {
+      fullySelectedFrames.add(element.id);
+    }
+  }
+  for (const element of allElements) {
+    if (elementsToMove.has(element.id)) {
+      if (isFrameLikeElement(element) || element.frameId && fullySelectedFrames.has(element.frameId)) {
+        frameAwareContiguousElementsToMove.regularElements.push(element);
+      } else if (!element.frameId) {
+        frameAwareContiguousElementsToMove.regularElements.push(element);
+      } else {
+        const frameChildren = frameAwareContiguousElementsToMove.frameChildren.get(
+          element.frameId
+        ) || [];
+        frameChildren.push(element);
+        frameAwareContiguousElementsToMove.frameChildren.set(
+          element.frameId,
+          frameChildren
+        );
+      }
+    }
+  }
+  let nextElements = allElements;
+  const frameChildrenSets = Array.from(
+    frameAwareContiguousElementsToMove.frameChildren.entries()
+  );
+  for (const [frameId, children] of frameChildrenSets) {
+    nextElements = shiftFunction(
+      allElements,
+      appState,
+      direction,
+      frameId,
+      children
+    );
+  }
+  return shiftFunction(
+    nextElements,
+    appState,
+    direction,
+    null,
+    frameAwareContiguousElementsToMove.regularElements
+  );
+}
+var moveOneLeft = (allElements, appState, scene) => {
+  return shiftElementsByOne(allElements, appState, "left", scene);
+};
+var moveOneRight = (allElements, appState, scene) => {
+  return shiftElementsByOne(allElements, appState, "right", scene);
+};
+var moveAllLeft = (allElements, appState) => {
+  return shiftElementsAccountingForFrames(
+    allElements,
+    appState,
+    "left",
+    shiftElementsToEnd
+  );
+};
+var moveAllRight = (allElements, appState) => {
+  return shiftElementsAccountingForFrames(
+    allElements,
+    appState,
+    "right",
+    shiftElementsToEnd
+  );
+};
+
+// src/arrows/focus.ts
+var isFocusPointVisible = (focusPoint, arrow, bindableElement, elementsMap, appState, ignoreOverlap = false) => {
+  if (isElbowArrow(arrow) || !isBindingEnabled(appState) || arrow.points.length !== 2) {
+    return false;
+  }
+  if (!ignoreOverlap) {
+    const associatedPointIdx = arrow.startBinding?.elementId === bindableElement.id ? 0 : arrow.points.length - 1;
+    const associatedArrowPoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(
+      arrow,
+      associatedPointIdx,
+      elementsMap
+    );
+    if (pointDistance8(focusPoint, associatedArrowPoint) < FOCUS_POINT_SIZE * 1.5 / appState.zoom.value) {
+      return false;
+    }
+  }
+  return hitElementItself({
+    element: bindableElement,
+    elementsMap,
+    point: focusPoint,
+    threshold: getBindingGap(bindableElement, arrow),
+    overrideShouldTestInside: true
+  });
+};
+var focusPointUpdate = (arrow, bindableElement, isStartBinding, elementsMap, scene, appState, switchToInsideBinding) => {
+  const pointUpdates = /* @__PURE__ */ new Map();
+  const bindingField = isStartBinding ? "startBinding" : "endBinding";
+  const adjacentBindingField = isStartBinding ? "endBinding" : "startBinding";
+  let currentBinding = arrow[bindingField];
+  let adjacentBinding = arrow[adjacentBindingField];
+  if (currentBinding && bindableElement) {
+    const boundToSameElement = bindableElement && adjacentBinding && currentBinding.elementId === adjacentBinding.elementId;
+    if (switchToInsideBinding || boundToSameElement) {
+      currentBinding = {
+        ...currentBinding,
+        mode: "inside"
+      };
+    } else {
+      currentBinding = {
+        ...currentBinding,
+        mode: "orbit"
+      };
+    }
+    const pointIndex = isStartBinding ? 0 : arrow.points.length - 1;
+    const newPoint = updateBoundPoint(
+      arrow,
+      bindingField,
+      currentBinding,
+      bindableElement,
+      elementsMap
+    );
+    if (newPoint) {
+      pointUpdates.set(pointIndex, { point: newPoint });
+    }
+  }
+  if (adjacentBinding) {
+    const adjacentBindableElement = elementsMap.get(
+      adjacentBinding.elementId
+    );
+    if (adjacentBindableElement && isBindableElement(adjacentBindableElement) && isBindingEnabled(appState)) {
+      const boundToSameElementAfterUpdate = bindableElement && adjacentBinding.elementId === bindableElement.id;
+      if (switchToInsideBinding || boundToSameElementAfterUpdate) {
+        adjacentBinding = {
+          ...adjacentBinding,
+          mode: "inside"
+        };
+      } else {
+        adjacentBinding = {
+          ...adjacentBinding,
+          mode: "orbit"
+        };
+      }
+      const adjacentPointIndex = isStartBinding ? arrow.points.length - 1 : 0;
+      const adjacentNewPoint = updateBoundPoint(
+        arrow,
+        adjacentBindingField,
+        adjacentBinding,
+        adjacentBindableElement,
+        elementsMap
+      );
+      if (adjacentNewPoint) {
+        pointUpdates.set(adjacentPointIndex, {
+          point: adjacentNewPoint
+        });
+      }
+    }
+  }
+  if (pointUpdates.size > 0) {
+    LinearElementEditor.movePoints(arrow, scene, pointUpdates, {
+      [bindingField]: currentBinding,
+      [adjacentBindingField]: adjacentBinding
+    });
+  }
+};
+var handleFocusPointDrag = (linearElementEditor, elementsMap, pointerCoords, scene, appState, gridSize, switchToInsideBinding) => {
+  const arrow = LinearElementEditor.getElement(
+    linearElementEditor.elementId,
+    elementsMap
+  );
+  if (!arrow || !isBindingElement(arrow) || isElbowArrow(arrow) || !linearElementEditor.hoveredFocusPointBinding || !linearElementEditor.draggedFocusPointBinding) {
+    return;
+  }
+  const isStartBinding = linearElementEditor.draggedFocusPointBinding === "start";
+  const binding = isStartBinding ? arrow.startBinding : arrow.endBinding;
+  const { x: offsetX, y: offsetY } = linearElementEditor.pointerOffset;
+  const point = pointFrom16(
+    pointerCoords.x - offsetX,
+    pointerCoords.y - offsetY
+  );
+  const bindingField = isStartBinding ? "startBinding" : "endBinding";
+  const hit = getHoveredElementForFocusPoint(
+    point,
+    arrow,
+    scene.getNonDeletedElements(),
+    elementsMap,
+    maxBindingDistance_simple(appState.zoom)
+  );
+  if (hit && isBindingEnabled(appState)) {
+    if (arrow[bindingField] && hit.id !== binding?.elementId) {
+      unbindBindingElement(
+        arrow,
+        linearElementEditor.draggedFocusPointBinding,
+        scene
+      );
+    }
+    const newMode = switchToInsideBinding && arrow[bindingField]?.mode === "orbit" ? "inside" : !switchToInsideBinding && arrow[bindingField]?.mode === "inside" ? "orbit" : null;
+    if (!arrow[bindingField] || newMode) {
+      bindBindingElement(
+        arrow,
+        hit,
+        newMode || "orbit",
+        linearElementEditor.draggedFocusPointBinding,
+        scene,
+        point
+      );
+    }
+    scene.mutateElement(arrow, {
+      [bindingField]: {
+        ...arrow[bindingField],
+        elementId: hit.id,
+        mode: newMode || arrow[bindingField]?.mode || "orbit",
+        ...calculateFixedPointForNonElbowArrowBinding(
+          arrow,
+          hit,
+          linearElementEditor.draggedFocusPointBinding,
+          elementsMap,
+          point
+        )
+      }
+    });
+  } else {
+    const pointUpdates = /* @__PURE__ */ new Map();
+    const pointIndex = isStartBinding ? 0 : arrow.points.length - 1;
+    pointUpdates.set(pointIndex, {
+      point: LinearElementEditor.createPointAt(
+        arrow,
+        elementsMap,
+        point[0],
+        point[1],
+        gridSize
+      )
+    });
+    LinearElementEditor.movePoints(arrow, scene, pointUpdates);
+    if (arrow[bindingField]) {
+      unbindBindingElement(arrow, isStartBinding ? "start" : "end", scene);
+    }
+  }
+  focusPointUpdate(
+    arrow,
+    hit,
+    isStartBinding,
+    elementsMap,
+    scene,
+    appState,
+    switchToInsideBinding
+  );
+  if (hit && isBindingEnabled(appState)) {
+    moveArrowAboveBindable2(
+      point,
+      arrow,
+      scene.getElementsIncludingDeleted(),
+      elementsMap,
+      scene,
+      hit
+    );
+  }
+};
+var handleFocusPointPointerDown = (arrow, pointerDownState, elementsMap, appState) => {
+  const pointerPos = pointFrom16(
+    pointerDownState.origin.x,
+    pointerDownState.origin.y
+  );
+  const hitThreshold = FOCUS_POINT_SIZE * 1.5 / appState.zoom.value;
+  if (arrow.startBinding?.elementId) {
+    const bindableElement = elementsMap.get(arrow.startBinding.elementId);
+    if (bindableElement && isBindableElement(bindableElement) && !bindableElement.isDeleted) {
+      const focusPoint = getGlobalFixedPointForBindableElement(
+        arrow.startBinding.fixedPoint,
+        bindableElement,
+        elementsMap
+      );
+      if (isFocusPointVisible(
+        focusPoint,
+        arrow,
+        bindableElement,
+        elementsMap,
+        appState
+      ) && pointDistance8(pointerPos, focusPoint) <= hitThreshold) {
+        return {
+          hitFocusPoint: "start",
+          pointerOffset: {
+            x: pointerPos[0] - focusPoint[0],
+            y: pointerPos[1] - focusPoint[1]
+          }
+        };
+      }
+    }
+  }
+  if (arrow.endBinding?.elementId) {
+    const bindableElement = elementsMap.get(arrow.endBinding.elementId);
+    if (bindableElement && isBindableElement(bindableElement) && !bindableElement.isDeleted) {
+      const focusPoint = getGlobalFixedPointForBindableElement(
+        arrow.endBinding.fixedPoint,
+        bindableElement,
+        elementsMap
+      );
+      if (isFocusPointVisible(
+        focusPoint,
+        arrow,
+        bindableElement,
+        elementsMap,
+        appState
+      ) && pointDistance8(pointerPos, focusPoint) <= hitThreshold) {
+        return {
+          hitFocusPoint: "end",
+          pointerOffset: {
+            x: pointerPos[0] - focusPoint[0],
+            y: pointerPos[1] - focusPoint[1]
+          }
+        };
+      }
+    }
+  }
+  return {
+    hitFocusPoint: null,
+    pointerOffset: { x: 0, y: 0 }
+  };
+};
+var handleFocusPointPointerUp = (linearElementEditor, scene) => {
+  invariant12(
+    linearElementEditor.draggedFocusPointBinding,
+    "Must have a dragged focus point at pointer release"
+  );
+  const arrow = LinearElementEditor.getElement(
+    linearElementEditor.elementId,
+    scene.getNonDeletedElementsMap()
+  );
+  invariant12(arrow, "Arrow must be in the scene");
+  const bindingKey = linearElementEditor.draggedFocusPointBinding === "start" ? "startBinding" : "endBinding";
+  const otherBindingKey = linearElementEditor.draggedFocusPointBinding === "start" ? "endBinding" : "startBinding";
+  const boundElementId = arrow[bindingKey]?.elementId;
+  const otherBoundElementId = arrow[otherBindingKey]?.elementId;
+  const oldBoundElement = boundElementId && scene.getNonDeletedElements().find(
+    (element) => element.id !== boundElementId && element.id !== otherBoundElementId && isBindableElement(element) && element.boundElements?.find(({ id }) => id === arrow.id)
+  );
+  if (oldBoundElement) {
+    scene.mutateElement(oldBoundElement, {
+      boundElements: oldBoundElement.boundElements?.filter(
+        ({ id }) => id !== arrow.id
+      )
+    });
+  }
+  const boundElement = boundElementId && scene.getNonDeletedElementsMap().get(boundElementId);
+  if (boundElement) {
+    scene.mutateElement(boundElement, {
+      boundElements: [
+        ...(boundElement.boundElements || [])?.filter(
+          ({ id }) => id !== arrow.id
+        ),
+        {
+          id: arrow.id,
+          type: "arrow"
+        }
+      ]
+    });
+  }
+};
+var handleFocusPointHover = (arrow, scenePointerX, scenePointerY, scene, appState) => {
+  const elementsMap = scene.getNonDeletedElementsMap();
+  const pointerPos = pointFrom16(scenePointerX, scenePointerY);
+  const hitThreshold = FOCUS_POINT_SIZE * 1.5 / appState.zoom.value;
+  if (arrow.startBinding?.elementId) {
+    const bindableElement = elementsMap.get(arrow.startBinding.elementId);
+    if (bindableElement && isBindableElement(bindableElement) && !bindableElement.isDeleted) {
+      const focusPoint = getGlobalFixedPointForBindableElement(
+        arrow.startBinding.fixedPoint,
+        bindableElement,
+        elementsMap
+      );
+      if (isFocusPointVisible(
+        focusPoint,
+        arrow,
+        bindableElement,
+        elementsMap,
+        appState
+      ) && pointDistance8(pointerPos, focusPoint) <= hitThreshold) {
+        return "start";
+      }
+    }
+  }
+  if (arrow.endBinding?.elementId) {
+    const bindableElement = elementsMap.get(arrow.endBinding.elementId);
+    if (bindableElement && isBindableElement(bindableElement) && !bindableElement.isDeleted) {
+      const focusPoint = getGlobalFixedPointForBindableElement(
+        arrow.endBinding.fixedPoint,
+        bindableElement,
+        elementsMap
+      );
+      if (isFocusPointVisible(
+        focusPoint,
+        arrow,
+        bindableElement,
+        elementsMap,
+        appState
+      ) && pointDistance8(pointerPos, focusPoint) <= hitThreshold) {
+        return "end";
+      }
+    }
+  }
+  return null;
+};
+
+// src/image.ts
+init_define_import_meta_env();
+import { MIME_TYPES as MIME_TYPES2, SVG_NS } from "@excalidraw/common";
+var loadHTMLImageElement = (dataURL) => {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.onload = () => {
+      resolve(image);
+    };
+    image.onerror = (error) => {
+      reject(error);
+    };
+    image.src = dataURL;
+  });
+};
+var updateImageCache = async ({
+  fileIds,
+  files,
+  imageCache
+}) => {
+  const updatedFiles = /* @__PURE__ */ new Map();
+  const erroredFiles = /* @__PURE__ */ new Map();
+  await Promise.all(
+    fileIds.reduce((promises, fileId) => {
+      const fileData = files[fileId];
+      if (fileData && !updatedFiles.has(fileId)) {
+        updatedFiles.set(fileId, true);
+        return promises.concat(
+          (async () => {
+            try {
+              if (fileData.mimeType === MIME_TYPES2.binary) {
+                throw new Error("Only images can be added to ImageCache");
+              }
+              const imagePromise = loadHTMLImageElement(fileData.dataURL);
+              const data = {
+                image: imagePromise,
+                mimeType: fileData.mimeType
+              };
+              imageCache.set(fileId, data);
+              const image = await imagePromise;
+              imageCache.set(fileId, { ...data, image });
+            } catch (error) {
+              erroredFiles.set(fileId, true);
+            }
+          })()
+        );
+      }
+      return promises;
+    }, [])
+  );
+  return {
+    imageCache,
+    /** includes errored files because they cache was updated nonetheless */
+    updatedFiles,
+    /** files that failed when creating HTMLImageElement */
+    erroredFiles
+  };
+};
+var getInitializedImageElements = (elements) => elements.filter(
+  (element) => isInitializedImageElement(element)
+);
+var isHTMLSVGElement = (node) => {
+  return node?.nodeName.toLowerCase() === "svg";
+};
+var normalizeSVG = (SVGString) => {
+  const doc = new DOMParser().parseFromString(SVGString, MIME_TYPES2.svg);
+  const svg = doc.querySelector("svg");
+  const errorNode = doc.querySelector("parsererror");
+  if (errorNode || !isHTMLSVGElement(svg)) {
+    throw new Error("Invalid SVG");
+  } else {
+    if (!svg.hasAttribute("xmlns")) {
+      svg.setAttribute("xmlns", SVG_NS);
+    }
+    let width = svg.getAttribute("width");
+    let height = svg.getAttribute("height");
+    if (width?.includes("%") || width === "auto") {
+      width = null;
+    }
+    if (height?.includes("%") || height === "auto") {
+      height = null;
+    }
+    const viewBox = svg.getAttribute("viewBox");
+    if (!width || !height) {
+      width = width || "50";
+      height = height || "50";
+      if (viewBox) {
+        const match = viewBox.match(
+          /\d+ +\d+ +(\d+(?:\.\d+)?) +(\d+(?:\.\d+)?)/
+        );
+        if (match) {
+          [, width, height] = match;
+        }
+      }
+      svg.setAttribute("width", width);
+      svg.setAttribute("height", height);
+    }
+    if (!viewBox) {
+      svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+    }
+    return svg.outerHTML;
+  }
+};
+
+// src/positionElementsOnGrid.ts
+init_define_import_meta_env();
+var positionElementsOnGrid = (elements, centerX, centerY, padding = 50) => {
+  if (!elements || elements.length === 0) {
+    return [];
+  }
   const res = [];
   const atomicUnits = Array.isArray(elements[0]) ? elements : elements.map((element) => [element]);
   const numUnits = atomicUnits.length;
@@ -18097,7 +19407,7 @@ init_define_import_meta_env();
 import {
   pointCenter as pointCenter3,
   normalizeRadians as normalizeRadians2,
-  pointFrom as pointFrom16,
+  pointFrom as pointFrom17,
   pointRotateRads as pointRotateRads14
 } from "@excalidraw/math";
 import {
@@ -18286,7 +19596,7 @@ var resizeSingleTextElement = (origElement, element, scene, transformHandleType,
     return;
   }
   if (transformHandleType.includes("n") || transformHandleType.includes("s")) {
-    const previousOrigin = pointFrom16(origElement.x, origElement.y);
+    const previousOrigin = pointFrom17(origElement.x, origElement.y);
     const newOrigin = getResizedOrigin(
       previousOrigin,
       origElement.width,
@@ -18327,7 +19637,7 @@ var resizeSingleTextElement = (origElement, element, scene, transformHandleType,
       element.lineHeight
     );
     const newHeight = metrics2.height;
-    const previousOrigin = pointFrom16(origElement.x, origElement.y);
+    const previousOrigin = pointFrom17(origElement.x, origElement.y);
     const newOrigin = getResizedOrigin(
       previousOrigin,
       origElement.width,
@@ -18365,8 +19675,8 @@ var rotateMultipleElements = (originalElements, elements, scene, pointerX, point
       const cy = (y1 + y2) / 2;
       const origAngle = originalElements.get(element.id)?.angle ?? element.angle;
       const [rotatedCX, rotatedCY] = pointRotateRads14(
-        pointFrom16(cx, cy),
-        pointFrom16(centerX, centerY),
+        pointFrom17(cx, cy),
+        pointFrom17(centerX, centerY),
         centerAngle + origAngle - element.angle
       );
       const updates = isElbowArrow(element) ? {
@@ -18416,43 +19726,43 @@ var getResizeOffsetXY = (transformHandleType, selectedElements, elementsMap, x,
   const cy = (y1 + y2) / 2;
   const angle = selectedElements.length === 1 ? selectedElements[0].angle : 0;
   [x, y] = pointRotateRads14(
-    pointFrom16(x, y),
-    pointFrom16(cx, cy),
+    pointFrom17(x, y),
+    pointFrom17(cx, cy),
     -angle
   );
   switch (transformHandleType) {
     case "n":
       return pointRotateRads14(
-        pointFrom16(x - (x1 + x2) / 2, y - y1),
-        pointFrom16(0, 0),
+        pointFrom17(x - (x1 + x2) / 2, y - y1),
+        pointFrom17(0, 0),
         angle
       );
     case "s":
       return pointRotateRads14(
-        pointFrom16(x - (x1 + x2) / 2, y - y2),
-        pointFrom16(0, 0),
+        pointFrom17(x - (x1 + x2) / 2, y - y2),
+        pointFrom17(0, 0),
         angle
       );
     case "w":
       return pointRotateRads14(
-        pointFrom16(x - x1, y - (y1 + y2) / 2),
-        pointFrom16(0, 0),
+        pointFrom17(x - x1, y - (y1 + y2) / 2),
+        pointFrom17(0, 0),
         angle
       );
     case "e":
       return pointRotateRads14(
-        pointFrom16(x - x2, y - (y1 + y2) / 2),
-        pointFrom16(0, 0),
+        pointFrom17(x - x2, y - (y1 + y2) / 2),
+        pointFrom17(0, 0),
         angle
       );
     case "nw":
-      return pointRotateRads14(pointFrom16(x - x1, y - y1), pointFrom16(0, 0), angle);
+      return pointRotateRads14(pointFrom17(x - x1, y - y1), pointFrom17(0, 0), angle);
     case "ne":
-      return pointRotateRads14(pointFrom16(x - x2, y - y1), pointFrom16(0, 0), angle);
+      return pointRotateRads14(pointFrom17(x - x2, y - y1), pointFrom17(0, 0), angle);
     case "sw":
-      return pointRotateRads14(pointFrom16(x - x1, y - y2), pointFrom16(0, 0), angle);
+      return pointRotateRads14(pointFrom17(x - x1, y - y2), pointFrom17(0, 0), angle);
     case "se":
-      return pointRotateRads14(pointFrom16(x - x2, y - y2), pointFrom16(0, 0), angle);
+      return pointRotateRads14(pointFrom17(x - x2, y - y2), pointFrom17(0, 0), angle);
     default:
       return [0, 0];
   }
@@ -18615,10 +19925,10 @@ var resizeSingleElement = (nextWidth, nextHeight, latestElement, origElement, or
     nextHeight,
     true
   );
-  let previousOrigin = pointFrom16(origElement.x, origElement.y);
+  let previousOrigin = pointFrom17(origElement.x, origElement.y);
   if (isLinearElement(origElement)) {
     const [x1, y1] = getElementBounds(origElement, originalElementsMap);
-    previousOrigin = pointFrom16(x1, y1);
+    previousOrigin = pointFrom17(x1, y1);
   }
   const newOrigin = getResizedOrigin(
     previousOrigin,
@@ -18641,7 +19951,7 @@ var resizeSingleElement = (nextWidth, nextHeight, latestElement, origElement, or
     newOrigin.x += scaledX;
     newOrigin.y += scaledY;
     rescaledPoints.points = rescaledPoints.points.map(
-      (p) => pointFrom16(p[0] - scaledX, p[1] - scaledY)
+      (p) => pointFrom17(p[0] - scaledX, p[1] - scaledY)
     );
   }
   if (nextWidth < 0) {
@@ -18717,11 +20027,11 @@ var getNextSingleWidthAndHeightFromPointer = (latestElement, origElement, handle
     origElement.height,
     true
   );
-  const startTopLeft = pointFrom16(x1, y1);
-  const startBottomRight = pointFrom16(x2, y2);
+  const startTopLeft = pointFrom17(x1, y1);
+  const startBottomRight = pointFrom17(x2, y2);
   const startCenter = pointCenter3(startTopLeft, startBottomRight);
   const rotatedPointer = pointRotateRads14(
-    pointFrom16(pointerX, pointerY),
+    pointFrom17(pointerX, pointerY),
     startCenter,
     -origElement.angle
   );
@@ -19091,7 +20401,7 @@ var resizeMultipleElements = (selectedElements, elementsMap, handleDirection, sc
 // src/resizeTest.ts
 init_define_import_meta_env();
 import {
-  pointFrom as pointFrom18,
+  pointFrom as pointFrom19,
   pointOnLineSegment,
   pointRotateRads as pointRotateRads16
 } from "@excalidraw/math";
@@ -19104,7 +20414,7 @@ init_define_import_meta_env();
 import {
   DEFAULT_TRANSFORM_HANDLE_SPACING
 } from "@excalidraw/common";
-import { pointFrom as pointFrom17, pointRotateRads as pointRotateRads15 } from "@excalidraw/math";
+import { pointFrom as pointFrom18, pointRotateRads as pointRotateRads15 } from "@excalidraw/math";
 var transformHandleSizes = {
   mouse: 8,
   pen: 16,
@@ -19146,8 +20456,8 @@ var OMIT_SIDES_FOR_LINE_BACKSLASH = {
 };
 var generateTransformHandle = (x, y, width, height, cx, cy, angle) => {
   const [xx, yy] = pointRotateRads15(
-    pointFrom17(x + width / 2, y + height / 2),
-    pointFrom17(cx, cy),
+    pointFrom18(x + width / 2, y + height / 2),
+    pointFrom18(cx, cy),
     angle
   );
   return [xx - width / 2, yy - height / 2, width, height];
@@ -19361,14 +20671,14 @@ var resizeTest = (element, elementsMap, appState, x, y, zoom, pointerType, edito
       const SPACING = isImageElement(element) ? 0 : SIDE_RESIZING_THRESHOLD / zoom.value;
       const ZOOMED_SIDE_RESIZING_THRESHOLD = SIDE_RESIZING_THRESHOLD / zoom.value;
       const sides = getSelectionBorders(
-        pointFrom18(x1 - SPACING, y1 - SPACING),
-        pointFrom18(x2 + SPACING, y2 + SPACING),
-        pointFrom18(cx, cy),
+        pointFrom19(x1 - SPACING, y1 - SPACING),
+        pointFrom19(x2 + SPACING, y2 + SPACING),
+        pointFrom19(cx, cy),
         element.angle
       );
       for (const [dir, side] of Object.entries(sides)) {
         if (pointOnLineSegment(
-          pointFrom18(x, y),
+          pointFrom19(x, y),
           side,
           ZOOMED_SIDE_RESIZING_THRESHOLD
         )) {
@@ -19417,14 +20727,14 @@ var getTransformHandleTypeFromCoords = ([x1, y1, x2, y2], scenePointerX, scenePo
     const cy = (y1 + y2) / 2;
     const SPACING = SIDE_RESIZING_THRESHOLD / zoom.value;
     const sides = getSelectionBorders(
-      pointFrom18(x1 - SPACING, y1 - SPACING),
-      pointFrom18(x2 + SPACING, y2 + SPACING),
-      pointFrom18(cx, cy),
+      pointFrom19(x1 - SPACING, y1 - SPACING),
+      pointFrom19(x2 + SPACING, y2 + SPACING),
+      pointFrom19(cx, cy),
       0
     );
     for (const [dir, side] of Object.entries(sides)) {
       if (pointOnLineSegment(
-        pointFrom18(scenePointerX, scenePointerY),
+        pointFrom19(scenePointerX, scenePointerY),
         side,
         SPACING
       )) {
@@ -19481,10 +20791,10 @@ var getCursorForResizingElement = (resizingElement) => {
   return cursor ? `${cursor}-resize` : "";
 };
 var getSelectionBorders = ([x1, y1], [x2, y2], center, angle) => {
-  const topLeft = pointRotateRads16(pointFrom18(x1, y1), center, angle);
-  const topRight = pointRotateRads16(pointFrom18(x2, y1), center, angle);
-  const bottomLeft = pointRotateRads16(pointFrom18(x1, y2), center, angle);
-  const bottomRight = pointRotateRads16(pointFrom18(x2, y2), center, angle);
+  const topLeft = pointRotateRads16(pointFrom19(x1, y1), center, angle);
+  const topRight = pointRotateRads16(pointFrom19(x2, y1), center, angle);
+  const bottomLeft = pointRotateRads16(pointFrom19(x1, y2), center, angle);
+  const bottomRight = pointRotateRads16(pointFrom19(x2, y2), center, angle);
   return {
     n: [topLeft, topRight],
     e: [topRight, bottomRight],
@@ -19497,386 +20807,545 @@ var getSelectionBorders = ([x1, y1], [x2, y2], center, angle) => {
 init_define_import_meta_env();
 var showSelectedShapeActions = (appState, elements) => Boolean(
   !appState.viewModeEnabled && appState.openDialog?.name !== "elementLinkSelector" && (appState.activeTool.type !== "custom" && (appState.editingTextElement || appState.activeTool.type !== "selection" && appState.activeTool.type !== "lasso" && appState.activeTool.type !== "eraser" && appState.activeTool.type !== "hand" && appState.activeTool.type !== "laser") || getSelectedElements(elements, appState).length)
-);
-
-// src/zindex.ts
-init_define_import_meta_env();
-import { arrayToMap as arrayToMap11, findIndex, findLastIndex as findLastIndex2 } from "@excalidraw/common";
-var isOfTargetFrame = (element, frameId) => {
-  return element.frameId === frameId || element.id === frameId;
-};
-var getIndicesToMove = (elements, appState, elementsToBeMoved) => {
-  let selectedIndices = [];
-  let deletedIndices = [];
-  let includeDeletedIndex = null;
-  let index = -1;
-  const selectedElementIds = arrayToMap11(
-    elementsToBeMoved ? elementsToBeMoved : getSelectedElements(elements, appState, {
-      includeBoundTextElement: true,
-      includeElementsInFrames: true
-    })
-  );
-  while (++index < elements.length) {
-    const element = elements[index];
-    if (selectedElementIds.get(element.id)) {
-      if (deletedIndices.length) {
-        selectedIndices = selectedIndices.concat(deletedIndices);
-        deletedIndices = [];
-      }
-      selectedIndices.push(index);
-      includeDeletedIndex = index + 1;
-    } else if (element.isDeleted && includeDeletedIndex === index) {
-      includeDeletedIndex = index + 1;
-      deletedIndices.push(index);
-    } else {
-      deletedIndices = [];
-    }
-  }
-  return selectedIndices;
-};
-var toContiguousGroups = (array) => {
-  let cursor = 0;
-  return array.reduce((acc, value, index) => {
-    if (index > 0 && array[index - 1] !== value - 1) {
-      cursor = ++cursor;
-    }
-    (acc[cursor] || (acc[cursor] = [])).push(value);
-    return acc;
-  }, []);
-};
-var getTargetIndexAccountingForBinding = (nextElement, elements, direction, scene) => {
-  if ("containerId" in nextElement && nextElement.containerId) {
-    const containerElement = scene.getElement(nextElement.containerId);
-    if (containerElement) {
-      return direction === "left" ? Math.min(
-        elements.indexOf(containerElement),
-        elements.indexOf(nextElement)
-      ) : Math.max(
-        elements.indexOf(containerElement),
-        elements.indexOf(nextElement)
-      );
-    }
-  } else {
-    const boundElementId = nextElement.boundElements?.find(
-      (binding) => binding.type !== "arrow"
-    )?.id;
-    if (boundElementId) {
-      const boundTextElement = scene.getElement(boundElementId);
-      if (boundTextElement) {
-        return direction === "left" ? Math.min(
-          elements.indexOf(boundTextElement),
-          elements.indexOf(nextElement)
-        ) : Math.max(
-          elements.indexOf(boundTextElement),
-          elements.indexOf(nextElement)
-        );
-      }
-    }
-  }
-};
-var getContiguousFrameRangeElements = (allElements, frameId) => {
-  let rangeStart = -1;
-  let rangeEnd = -1;
-  allElements.forEach((element, index) => {
-    if (isOfTargetFrame(element, frameId)) {
-      if (rangeStart === -1) {
-        rangeStart = index;
-      }
-      rangeEnd = index;
-    }
-  });
-  if (rangeStart === -1) {
-    return [];
-  }
-  return allElements.slice(rangeStart, rangeEnd + 1);
-};
-var moveArrowAboveBindable2 = (point, arrow, elements, elementsMap, scene) => {
-  const hoveredElement = getHoveredElementForBinding(
-    point,
-    elements,
-    elementsMap
-  );
-  if (!hoveredElement) {
-    return elements;
-  }
-  const boundTextElement = getBoundTextElement(hoveredElement, elementsMap);
-  const containerElement = isTextElement(hoveredElement) ? getContainerElement(hoveredElement, elementsMap) : null;
-  const bindableIds = [
-    hoveredElement.id,
-    boundTextElement?.id,
-    containerElement?.id
-  ].filter((id) => !!id);
-  const bindableIdx = elements.findIndex((el) => bindableIds.includes(el.id));
-  const arrowIdx = elements.findIndex((el) => el.id === arrow.id);
-  if (arrowIdx !== -1 && bindableIdx !== -1 && arrowIdx < bindableIdx) {
-    const updatedElements = Array.from(elements);
-    const arrow2 = updatedElements.splice(arrowIdx, 1)[0];
-    updatedElements.splice(bindableIdx, 0, arrow2);
-    scene.replaceAllElements(updatedElements);
-  }
-  return elements;
-};
-var getTargetIndex = (appState, elements, boundaryIndex, direction, containingFrame, scene) => {
-  const sourceElement = elements[boundaryIndex];
-  const indexFilter = (element) => {
-    if (element.isDeleted) {
-      return false;
-    }
-    if (containingFrame) {
-      return element.frameId === containingFrame;
-    }
-    if (appState.editingGroupId) {
-      return element.groupIds.includes(appState.editingGroupId);
-    }
-    return true;
-  };
-  const candidateIndex = direction === "left" ? findLastIndex2(
-    elements,
-    (el) => indexFilter(el),
-    Math.max(0, boundaryIndex - 1)
-  ) : findIndex(elements, (el) => indexFilter(el), boundaryIndex + 1);
-  const nextElement = elements[candidateIndex];
-  if (!nextElement) {
-    return -1;
-  }
-  if (appState.editingGroupId) {
-    if (
-      // candidate element is a sibling in current editing group → return
-      sourceElement?.groupIds.join("") === nextElement?.groupIds.join("")
-    ) {
-      return getTargetIndexAccountingForBinding(
-        nextElement,
-        elements,
-        direction,
-        scene
-      ) ?? candidateIndex;
-    } else if (!nextElement?.groupIds.includes(appState.editingGroupId)) {
-      return -1;
-    }
-  }
-  if (!containingFrame && (nextElement.frameId || isFrameLikeElement(nextElement))) {
-    const frameElements = getContiguousFrameRangeElements(
-      elements,
-      nextElement.frameId || nextElement.id
-    );
-    return direction === "left" ? elements.indexOf(frameElements[0]) : elements.indexOf(frameElements[frameElements.length - 1]);
-  }
-  if (!nextElement.groupIds.length) {
-    return getTargetIndexAccountingForBinding(
-      nextElement,
-      elements,
-      direction,
-      scene
-    ) ?? candidateIndex;
-  }
-  const siblingGroupId = appState.editingGroupId ? nextElement.groupIds[nextElement.groupIds.indexOf(appState.editingGroupId) - 1] : nextElement.groupIds[nextElement.groupIds.length - 1];
-  const elementsInSiblingGroup = getElementsInGroup(elements, siblingGroupId);
-  if (elementsInSiblingGroup.length) {
-    return direction === "left" ? elements.indexOf(elementsInSiblingGroup[0]) : elements.indexOf(
-      elementsInSiblingGroup[elementsInSiblingGroup.length - 1]
-    );
-  }
-  return candidateIndex;
-};
-var getTargetElementsMap = (elements, indices) => {
-  return indices.reduce((acc, index) => {
-    const element = elements[index];
-    acc.set(element.id, element);
-    return acc;
-  }, /* @__PURE__ */ new Map());
-};
-var shiftElementsByOne = (elements, appState, direction, scene) => {
-  const indicesToMove = getIndicesToMove(elements, appState);
-  const targetElementsMap = getTargetElementsMap(elements, indicesToMove);
-  let groupedIndices = toContiguousGroups(indicesToMove);
-  if (direction === "right") {
-    groupedIndices = groupedIndices.reverse();
-  }
-  const selectedFrames = new Set(
-    indicesToMove.filter((idx) => isFrameLikeElement(elements[idx])).map((idx) => elements[idx].id)
-  );
-  groupedIndices.forEach((indices, i) => {
-    const leadingIndex = indices[0];
-    const trailingIndex = indices[indices.length - 1];
-    const boundaryIndex = direction === "left" ? leadingIndex : trailingIndex;
-    const containingFrame = indices.some((idx) => {
-      const el = elements[idx];
-      return el.frameId && selectedFrames.has(el.frameId);
-    }) ? null : elements[boundaryIndex]?.frameId;
-    const targetIndex = getTargetIndex(
-      appState,
-      elements,
-      boundaryIndex,
-      direction,
-      containingFrame,
-      scene
-    );
-    if (targetIndex === -1 || boundaryIndex === targetIndex) {
-      return;
-    }
-    const leadingElements = direction === "left" ? elements.slice(0, targetIndex) : elements.slice(0, leadingIndex);
-    const targetElements = elements.slice(leadingIndex, trailingIndex + 1);
-    const displacedElements = direction === "left" ? elements.slice(targetIndex, leadingIndex) : elements.slice(trailingIndex + 1, targetIndex + 1);
-    const trailingElements = direction === "left" ? elements.slice(trailingIndex + 1) : elements.slice(targetIndex + 1);
-    elements = direction === "left" ? [
-      ...leadingElements,
-      ...targetElements,
-      ...displacedElements,
-      ...trailingElements
-    ] : [
-      ...leadingElements,
-      ...displacedElements,
-      ...targetElements,
-      ...trailingElements
-    ];
-  });
-  syncMovedIndices(elements, targetElementsMap);
-  return elements;
-};
-var shiftElementsToEnd = (elements, appState, direction, containingFrame, elementsToBeMoved) => {
-  const indicesToMove = getIndicesToMove(elements, appState, elementsToBeMoved);
-  const targetElementsMap = getTargetElementsMap(elements, indicesToMove);
-  const displacedElements = [];
-  let leadingIndex;
-  let trailingIndex;
-  if (direction === "left") {
-    if (containingFrame) {
-      leadingIndex = findIndex(
-        elements,
-        (el) => isOfTargetFrame(el, containingFrame)
-      );
-    } else if (appState.editingGroupId) {
-      const groupElements = getElementsInGroup(
-        elements,
-        appState.editingGroupId
-      );
-      if (!groupElements.length) {
-        return elements;
+);
+
+// src/transform.ts
+init_define_import_meta_env();
+import { pointFrom as pointFrom20 } from "@excalidraw/math";
+import {
+  DEFAULT_FONT_FAMILY as DEFAULT_FONT_FAMILY3,
+  DEFAULT_FONT_SIZE as DEFAULT_FONT_SIZE4,
+  TEXT_ALIGN as TEXT_ALIGN2,
+  VERTICAL_ALIGN as VERTICAL_ALIGN4,
+  getSizeFromPoints as getSizeFromPoints3,
+  randomId as randomId4,
+  arrayToMap as arrayToMap12,
+  assertNever as assertNever5,
+  cloneJSON,
+  getFontString as getFontString8,
+  isDevEnv as isDevEnv7,
+  toBrandedType as toBrandedType3,
+  getLineHeight as getLineHeight2
+} from "@excalidraw/common";
+var DEFAULT_LINEAR_ELEMENT_PROPS = {
+  width: 100,
+  height: 0
+};
+var DEFAULT_DIMENSION = 100;
+var bindTextToContainer = (container, textProps, scene) => {
+  const textElement = newTextElement({
+    x: 0,
+    y: 0,
+    textAlign: TEXT_ALIGN2.CENTER,
+    verticalAlign: VERTICAL_ALIGN4.MIDDLE,
+    ...textProps,
+    containerId: container.id,
+    strokeColor: textProps.strokeColor || container.strokeColor
+  });
+  Object.assign(container, {
+    boundElements: (container.boundElements || []).concat({
+      type: "text",
+      id: textElement.id
+    })
+  });
+  redrawTextBoundingBox(textElement, container, scene);
+  return [container, textElement];
+};
+var bindLinearElementToElement = (linearElement, start, end, elementStore, scene) => {
+  let startBoundElement;
+  let endBoundElement;
+  Object.assign(linearElement, {
+    startBinding: linearElement?.startBinding || null,
+    endBinding: linearElement.endBinding || null
+  });
+  if (start) {
+    const width = start?.width ?? DEFAULT_DIMENSION;
+    const height = start?.height ?? DEFAULT_DIMENSION;
+    let existingElement;
+    if (start.id) {
+      existingElement = elementStore.getElement(start.id);
+      if (!existingElement) {
+        console.error(`No element for start binding with id ${start.id} found`);
+      }
+    }
+    const startX = start.x || linearElement.x - width;
+    const startY = start.y || linearElement.y - height / 2;
+    const startType = existingElement ? existingElement.type : start.type;
+    if (startType) {
+      if (startType === "text") {
+        let text = "";
+        if (existingElement && existingElement.type === "text") {
+          text = existingElement.text;
+        } else if (start.type === "text") {
+          text = start.text;
+        }
+        if (!text) {
+          console.error(
+            `No text found for start binding text element for ${linearElement.id}`
+          );
+        }
+        startBoundElement = newTextElement({
+          x: startX,
+          y: startY,
+          type: "text",
+          ...existingElement,
+          ...start,
+          text
+        });
+        Object.assign(startBoundElement, {
+          x: start.x || linearElement.x - startBoundElement.width,
+          y: start.y || linearElement.y - startBoundElement.height / 2
+        });
+      } else {
+        switch (startType) {
+          case "rectangle":
+          case "ellipse":
+          case "diamond": {
+            startBoundElement = newElement({
+              x: startX,
+              y: startY,
+              width,
+              height,
+              ...existingElement,
+              ...start,
+              type: startType
+            });
+            break;
+          }
+          default: {
+            assertNever5(
+              linearElement,
+              `Unhandled element start type "${start.type}"`,
+              true
+            );
+          }
+        }
       }
-      leadingIndex = elements.indexOf(groupElements[0]);
-    } else {
-      leadingIndex = 0;
-    }
-    trailingIndex = indicesToMove[indicesToMove.length - 1];
-  } else {
-    if (containingFrame) {
-      trailingIndex = findLastIndex2(
-        elements,
-        (el) => isOfTargetFrame(el, containingFrame)
-      );
-    } else if (appState.editingGroupId) {
-      const groupElements = getElementsInGroup(
-        elements,
-        appState.editingGroupId
+      bindBindingElement(
+        linearElement,
+        startBoundElement,
+        "orbit",
+        "start",
+        scene
       );
-      if (!groupElements.length) {
-        return elements;
+    }
+  }
+  if (end) {
+    const height = end?.height ?? DEFAULT_DIMENSION;
+    const width = end?.width ?? DEFAULT_DIMENSION;
+    let existingElement;
+    if (end.id) {
+      existingElement = elementStore.getElement(end.id);
+      if (!existingElement) {
+        console.error(`No element for end binding with id ${end.id} found`);
+      }
+    }
+    const endX = end.x || linearElement.x + linearElement.width;
+    const endY = end.y || linearElement.y - height / 2;
+    const endType = existingElement ? existingElement.type : end.type;
+    if (endType) {
+      if (endType === "text") {
+        let text = "";
+        if (existingElement && existingElement.type === "text") {
+          text = existingElement.text;
+        } else if (end.type === "text") {
+          text = end.text;
+        }
+        if (!text) {
+          console.error(
+            `No text found for end binding text element for ${linearElement.id}`
+          );
+        }
+        endBoundElement = newTextElement({
+          x: endX,
+          y: endY,
+          type: "text",
+          ...existingElement,
+          ...end,
+          text
+        });
+        Object.assign(endBoundElement, {
+          y: end.y || linearElement.y - endBoundElement.height / 2
+        });
+      } else {
+        switch (endType) {
+          case "rectangle":
+          case "ellipse":
+          case "diamond": {
+            endBoundElement = newElement({
+              x: endX,
+              y: endY,
+              width,
+              height,
+              ...existingElement,
+              ...end,
+              type: endType
+            });
+            break;
+          }
+          default: {
+            assertNever5(
+              linearElement,
+              `Unhandled element end type "${endType}"`,
+              true
+            );
+          }
+        }
       }
-      trailingIndex = elements.indexOf(groupElements[groupElements.length - 1]);
-    } else {
-      trailingIndex = elements.length - 1;
+      bindBindingElement(
+        linearElement,
+        endBoundElement,
+        "orbit",
+        "end",
+        scene
+      );
     }
-    leadingIndex = indicesToMove[0];
   }
-  if (leadingIndex === -1) {
-    leadingIndex = 0;
+  if (linearElement.points.length < 2) {
+    return {
+      linearElement,
+      startBoundElement,
+      endBoundElement
+    };
   }
-  for (let index = leadingIndex; index < trailingIndex + 1; index++) {
-    if (!indicesToMove.includes(index)) {
-      displacedElements.push(elements[index]);
-    }
+  const endPointIndex = linearElement.points.length - 1;
+  const delta = 0.5;
+  const newPoints = cloneJSON(linearElement.points);
+  if (linearElement.points[endPointIndex][0] > linearElement.points[endPointIndex - 1][0]) {
+    newPoints[0][0] = delta;
+    newPoints[endPointIndex][0] -= delta;
   }
-  const targetElements = Array.from(targetElementsMap.values());
-  const leadingElements = elements.slice(0, leadingIndex);
-  const trailingElements = elements.slice(trailingIndex + 1);
-  const nextElements = direction === "left" ? [
-    ...leadingElements,
-    ...targetElements,
-    ...displacedElements,
-    ...trailingElements
-  ] : [
-    ...leadingElements,
-    ...displacedElements,
-    ...targetElements,
-    ...trailingElements
-  ];
-  syncMovedIndices(nextElements, targetElementsMap);
-  return nextElements;
-};
-function shiftElementsAccountingForFrames(allElements, appState, direction, shiftFunction) {
-  const elementsToMove = arrayToMap11(
-    getSelectedElements(allElements, appState, {
-      includeBoundTextElement: true,
-      includeElementsInFrames: true
+  if (linearElement.points[endPointIndex][0] < linearElement.points[endPointIndex - 1][0]) {
+    newPoints[0][0] = -delta;
+    newPoints[endPointIndex][0] += delta;
+  }
+  if (linearElement.points[endPointIndex][1] > linearElement.points[endPointIndex - 1][1]) {
+    newPoints[0][1] = delta;
+    newPoints[endPointIndex][1] -= delta;
+  }
+  if (linearElement.points[endPointIndex][1] < linearElement.points[endPointIndex - 1][1]) {
+    newPoints[0][1] = -delta;
+    newPoints[endPointIndex][1] += delta;
+  }
+  Object.assign(
+    linearElement,
+    LinearElementEditor.getNormalizeElementPointsAndCoords({
+      ...linearElement,
+      points: newPoints
     })
   );
-  const frameAwareContiguousElementsToMove = { regularElements: [], frameChildren: /* @__PURE__ */ new Map() };
-  const fullySelectedFrames = /* @__PURE__ */ new Set();
-  for (const element of allElements) {
-    if (elementsToMove.has(element.id) && isFrameLikeElement(element)) {
-      fullySelectedFrames.add(element.id);
+  return {
+    linearElement,
+    startBoundElement,
+    endBoundElement
+  };
+};
+var ElementStore = class {
+  excalidrawElements = /* @__PURE__ */ new Map();
+  add = (ele) => {
+    if (!ele) {
+      return;
     }
+    this.excalidrawElements.set(ele.id, ele);
+  };
+  getElements = () => {
+    return syncInvalidIndices(Array.from(this.excalidrawElements.values()));
+  };
+  getElementsMap = () => {
+    return toBrandedType3(
+      arrayToMap12(this.getElements())
+    );
+  };
+  getElement = (id) => {
+    return this.excalidrawElements.get(id);
+  };
+};
+var convertToExcalidrawElements = (elementsSkeleton, opts) => {
+  if (!elementsSkeleton) {
+    return [];
   }
-  for (const element of allElements) {
-    if (elementsToMove.has(element.id)) {
-      if (isFrameLikeElement(element) || element.frameId && fullySelectedFrames.has(element.frameId)) {
-        frameAwareContiguousElementsToMove.regularElements.push(element);
-      } else if (!element.frameId) {
-        frameAwareContiguousElementsToMove.regularElements.push(element);
-      } else {
-        const frameChildren = frameAwareContiguousElementsToMove.frameChildren.get(
-          element.frameId
-        ) || [];
-        frameChildren.push(element);
-        frameAwareContiguousElementsToMove.frameChildren.set(
-          element.frameId,
-          frameChildren
+  const elements = cloneJSON(elementsSkeleton);
+  const elementStore = new ElementStore();
+  const elementsWithIds = /* @__PURE__ */ new Map();
+  const oldToNewElementIdMap = /* @__PURE__ */ new Map();
+  for (const element of elements) {
+    let excalidrawElement;
+    const originalId = element.id;
+    if (opts?.regenerateIds !== false) {
+      Object.assign(element, { id: randomId4() });
+    }
+    switch (element.type) {
+      case "rectangle":
+      case "ellipse":
+      case "diamond": {
+        const width = element?.label?.text && element.width === void 0 ? 0 : element?.width || DEFAULT_DIMENSION;
+        const height = element?.label?.text && element.height === void 0 ? 0 : element?.height || DEFAULT_DIMENSION;
+        excalidrawElement = newElement({
+          ...element,
+          width,
+          height
+        });
+        break;
+      }
+      case "line": {
+        const width = element.width || DEFAULT_LINEAR_ELEMENT_PROPS.width;
+        const height = element.height || DEFAULT_LINEAR_ELEMENT_PROPS.height;
+        excalidrawElement = newLinearElement({
+          width,
+          height,
+          points: [pointFrom20(0, 0), pointFrom20(width, height)],
+          ...element
+        });
+        break;
+      }
+      case "arrow": {
+        const width = element.width || DEFAULT_LINEAR_ELEMENT_PROPS.width;
+        const height = element.height || DEFAULT_LINEAR_ELEMENT_PROPS.height;
+        excalidrawElement = newArrowElement({
+          width,
+          height,
+          endArrowhead: "arrow",
+          points: [pointFrom20(0, 0), pointFrom20(width, height)],
+          ...element,
+          type: "arrow"
+        });
+        Object.assign(
+          excalidrawElement,
+          getSizeFromPoints3(excalidrawElement.points)
+        );
+        break;
+      }
+      case "text": {
+        const fontFamily = element?.fontFamily || DEFAULT_FONT_FAMILY3;
+        const fontSize = element?.fontSize || DEFAULT_FONT_SIZE4;
+        const lineHeight = element?.lineHeight || getLineHeight2(fontFamily);
+        const text = element.text ?? "";
+        const normalizedText = normalizeText(text);
+        const metrics = measureText(
+          normalizedText,
+          getFontString8({ fontFamily, fontSize }),
+          lineHeight
+        );
+        excalidrawElement = newTextElement({
+          width: metrics.width,
+          height: metrics.height,
+          fontFamily,
+          fontSize,
+          ...element
+        });
+        break;
+      }
+      case "image": {
+        excalidrawElement = newImageElement({
+          width: element?.width || DEFAULT_DIMENSION,
+          height: element?.height || DEFAULT_DIMENSION,
+          ...element
+        });
+        break;
+      }
+      case "frame": {
+        excalidrawElement = newFrameElement({
+          x: 0,
+          y: 0,
+          ...element
+        });
+        break;
+      }
+      case "magicframe": {
+        excalidrawElement = newMagicFrameElement({
+          x: 0,
+          y: 0,
+          ...element
+        });
+        break;
+      }
+      case "freedraw":
+      case "iframe":
+      case "embeddable": {
+        excalidrawElement = element;
+        break;
+      }
+      default: {
+        excalidrawElement = element;
+        assertNever5(
+          element,
+          `Unhandled element type "${element.type}"`,
+          true
         );
       }
     }
+    const existingElement = elementStore.getElement(excalidrawElement.id);
+    if (existingElement) {
+      console.error(`Duplicate id found for ${excalidrawElement.id}`);
+    } else {
+      elementStore.add(excalidrawElement);
+      elementsWithIds.set(excalidrawElement.id, element);
+      if (originalId) {
+        oldToNewElementIdMap.set(originalId, excalidrawElement.id);
+      }
+    }
+  }
+  const elementsMap = elementStore.getElementsMap();
+  const scene = new Scene(elementsMap);
+  for (const [id, element] of elementsWithIds) {
+    const excalidrawElement = elementStore.getElement(id);
+    switch (element.type) {
+      case "rectangle":
+      case "ellipse":
+      case "diamond":
+      case "arrow": {
+        if (element.label?.text) {
+          let [container, text] = bindTextToContainer(
+            excalidrawElement,
+            element?.label,
+            scene
+          );
+          elementStore.add(container);
+          elementStore.add(text);
+          if (isArrowElement(container)) {
+            const originalStart = element.type === "arrow" ? element?.start : void 0;
+            const originalEnd = element.type === "arrow" ? element?.end : void 0;
+            if (originalStart && originalStart.id) {
+              const newStartId = oldToNewElementIdMap.get(originalStart.id);
+              if (newStartId) {
+                Object.assign(originalStart, { id: newStartId });
+              }
+            }
+            if (originalEnd && originalEnd.id) {
+              const newEndId = oldToNewElementIdMap.get(originalEnd.id);
+              if (newEndId) {
+                Object.assign(originalEnd, { id: newEndId });
+              }
+            }
+            const { linearElement, startBoundElement, endBoundElement } = bindLinearElementToElement(
+              container,
+              originalStart,
+              originalEnd,
+              elementStore,
+              scene
+            );
+            container = linearElement;
+            elementStore.add(linearElement);
+            elementStore.add(startBoundElement);
+            elementStore.add(endBoundElement);
+          }
+        } else {
+          switch (element.type) {
+            case "arrow": {
+              const { start, end } = element;
+              if (start && start.id) {
+                const newStartId = oldToNewElementIdMap.get(start.id);
+                Object.assign(start, { id: newStartId });
+              }
+              if (end && end.id) {
+                const newEndId = oldToNewElementIdMap.get(end.id);
+                Object.assign(end, { id: newEndId });
+              }
+              const { linearElement, startBoundElement, endBoundElement } = bindLinearElementToElement(
+                excalidrawElement,
+                start,
+                end,
+                elementStore,
+                scene
+              );
+              elementStore.add(linearElement);
+              elementStore.add(startBoundElement);
+              elementStore.add(endBoundElement);
+              break;
+            }
+          }
+        }
+        break;
+      }
+    }
   }
-  let nextElements = allElements;
-  const frameChildrenSets = Array.from(
-    frameAwareContiguousElementsToMove.frameChildren.entries()
-  );
-  for (const [frameId, children] of frameChildrenSets) {
-    nextElements = shiftFunction(
-      allElements,
-      appState,
-      direction,
-      frameId,
-      children
-    );
+  for (const [id, element] of elementsWithIds) {
+    if (element.type !== "frame" && element.type !== "magicframe") {
+      continue;
+    }
+    const frame = elementStore.getElement(id);
+    if (!frame) {
+      throw new Error(`Excalidraw element with id ${id} doesn't exist`);
+    }
+    const childrenElements = [];
+    element.children.forEach((id2) => {
+      const newElementId = oldToNewElementIdMap.get(id2);
+      if (!newElementId) {
+        throw new Error(`Element with ${id2} wasn't mapped correctly`);
+      }
+      const elementInFrame = elementStore.getElement(newElementId);
+      if (!elementInFrame) {
+        throw new Error(`Frame element with id ${newElementId} doesn't exist`);
+      }
+      Object.assign(elementInFrame, { frameId: frame.id });
+      elementInFrame?.boundElements?.forEach((boundElement) => {
+        const ele = elementStore.getElement(boundElement.id);
+        if (!ele) {
+          throw new Error(
+            `Bound element with id ${boundElement.id} doesn't exist`
+          );
+        }
+        Object.assign(ele, { frameId: frame.id });
+        childrenElements.push(ele);
+      });
+      childrenElements.push(elementInFrame);
+    });
+    let [minX, minY, maxX, maxY] = getCommonBounds(childrenElements);
+    const PADDING = 10;
+    minX = minX - PADDING;
+    minY = minY - PADDING;
+    maxX = maxX + PADDING;
+    maxY = maxY + PADDING;
+    const frameX = frame?.x || minX;
+    const frameY = frame?.y || minY;
+    const frameWidth = frame?.width || maxX - minX;
+    const frameHeight = frame?.height || maxY - minY;
+    Object.assign(frame, {
+      x: frameX,
+      y: frameY,
+      width: frameWidth,
+      height: frameHeight
+    });
+    if (isDevEnv7() && element.children.length && (frame?.x || frame?.y || frame?.width || frame?.height)) {
+      console.info(
+        "User provided frame attributes are being considered, if you find this inaccurate, please remove any of the attributes - x, y, width and height so frame coordinates and dimensions are calculated automatically"
+      );
+    }
   }
-  return shiftFunction(
-    nextElements,
-    appState,
-    direction,
-    null,
-    frameAwareContiguousElementsToMove.regularElements
-  );
-}
-var moveOneLeft = (allElements, appState, scene) => {
-  return shiftElementsByOne(allElements, appState, "left", scene);
-};
-var moveOneRight = (allElements, appState, scene) => {
-  return shiftElementsByOne(allElements, appState, "right", scene);
-};
-var moveAllLeft = (allElements, appState) => {
-  return shiftElementsAccountingForFrames(
-    allElements,
-    appState,
-    "left",
-    shiftElementsToEnd
-  );
+  return elementStore.getElements();
 };
-var moveAllRight = (allElements, appState) => {
-  return shiftElementsAccountingForFrames(
-    allElements,
-    appState,
-    "right",
-    shiftElementsToEnd
-  );
+
+// src/arrows/helpers.ts
+init_define_import_meta_env();
+var maybeHandleArrowPointlikeDrag = ({
+  app,
+  event
+}) => {
+  const appState = app.state;
+  if (appState.selectedLinearElement && app.lastPointerMoveCoords) {
+    if (appState.selectedLinearElement.draggedFocusPointBinding) {
+      handleFocusPointDrag(
+        appState.selectedLinearElement,
+        app.scene.getNonDeletedElementsMap(),
+        app.lastPointerMoveCoords,
+        app.scene,
+        appState,
+        app.getEffectiveGridSize(),
+        event.altKey
+      );
+      return true;
+    } else if (appState.selectedLinearElement.hoverPointIndex !== null && app.lastPointerMoveEvent && appState.selectedLinearElement.initialState.lastClickedPoint >= 0 && appState.selectedLinearElement.isDragging) {
+      LinearElementEditor.handlePointDragging(
+        app.lastPointerMoveEvent,
+        app,
+        app.lastPointerMoveCoords.x,
+        app.lastPointerMoveCoords.y,
+        appState.selectedLinearElement
+      );
+      return true;
+    }
+  }
+  return false;
 };
 
 // src/index.ts
@@ -19916,13 +21385,13 @@ export {
   ElementBounds,
   ElementsDelta,
   EphemeralIncrement,
+  FOCUS_POINT_SIZE,
   FlowChartCreator,
   FlowChartNavigator,
   HEADING_DOWN,
   HEADING_LEFT,
   HEADING_RIGHT,
   HEADING_UP,
-  IMAGE_INVERT_FILTER,
   INVISIBLY_SMALL_ELEMENT_SIZE,
   InvalidFractionalIndexError,
   LinearElementEditor,
@@ -19962,6 +21431,7 @@ export {
   computeBoundTextPosition,
   computeContainerDimensionForBoundText,
   containsCJK,
+  convertToExcalidrawElements,
   createPlaceholderEmbeddableLabel,
   createSrcDoc,
   cropElement,
@@ -19991,7 +21461,6 @@ export {
   fixDuplicatedBindingsAfterDuplication,
   flipHeading,
   frameAndChildrenSelectedTogether,
-  generateFreeDrawShape,
   generateLinearCollisionShape,
   generateRoughOptions,
   getAllHoveredElementAtPoint,
@@ -20002,6 +21471,7 @@ export {
   getArrowheadPoints,
   getArrowheadSize,
   getBindingGap,
+  getBindingSideMidPoint,
   getBindingStrategyForDraggingBindingElementEndpoints,
   getBoundTextElement,
   getBoundTextElementId,
@@ -20043,14 +21513,13 @@ export {
   getFrameChildren,
   getFrameLikeElements,
   getFrameLikeTitle,
-  getFreeDrawPath2D,
-  getFreeDrawSvgPath,
   getFreedrawOutlineAsSegments,
   getFreedrawOutlinePoints,
   getGlobalFixedPointForBindableElement,
   getGlobalFixedPoints,
   getHeadingForElbowArrowSnap,
   getHoveredElementForBinding,
+  getHoveredElementForFocusPoint,
   getInitializedImageElements,
   getLineHeightInPx,
   getLineWidth,
@@ -20103,6 +21572,10 @@ export {
   groupsAreAtLeastIntersectingTheFrame,
   groupsAreCompletelyOutOfFrame,
   handleBindTextResize,
+  handleFocusPointDrag,
+  handleFocusPointHover,
+  handleFocusPointPointerDown,
+  handleFocusPointPointerUp,
   hasBackground,
   hasBoundTextElement,
   hasBoundingBox,
@@ -20129,7 +21602,6 @@ export {
   isBindingElementType,
   isBindingEnabled,
   isBoundToContainer,
-  isBounds,
   isCursorInFrame,
   isCurvedArrow,
   isElbowArrow,
@@ -20143,6 +21615,7 @@ export {
   isEmbeddableElement,
   isExcalidrawElement,
   isFlowchartNodeElement,
+  isFocusPointVisible,
   isFrameElement,
   isFrameLikeElement,
   isFreeDrawElement,
@@ -20178,6 +21651,7 @@ export {
   loadHTMLImageElement,
   makeNextSelectedElementIds,
   maxBindingDistance_simple,
+  maybeHandleArrowPointlikeDrag,
   maybeParseEmbedSrc,
   measureFontSizeFromWidth,
   measureText,
@@ -20208,7 +21682,6 @@ export {
   originalContainerCache,
   parseElementLinkFromURL,
   parseTokens,
-  pathsCache,
   pointInsideBounds,
   positionElementsOnGrid,
   projectFixedPointOntoDiagonal,