@excalidraw/excalidraw 0.17.1-1d71f84 → 0.17.1-4689a6b

package/dist/browser/dev/excalidraw-assets-dev/{chunk-RWZVJAQU.js → chunk-7D5BMEAB.js}

@@ -5127,7 +5127,6 @@ var ROUNDNESS = {
   // (see DEFAULT_ADAPTIVE_RADIUS constant)
   ADAPTIVE_RADIUS: 3
 };
-var PRECEDING_ELEMENT_KEY = "__precedingElement__";
 var ROUGHNESS = {
   architect: 0,
   artist: 1,
@@ -5777,6 +5776,7 @@ var arrayToMapWithIndex = (elements) => elements.reduce((acc, element, idx) => {
   return acc;
 }, /* @__PURE__ */ new Map());
 var isTestEnv = () => define_import_meta_env_default.MODE === "test";
+var isDevEnv = () => define_import_meta_env_default.MODE === "development";
 var wrapEvent = (name, nativeEvent) => {
   return new CustomEvent(name, {
     detail: {
@@ -6967,14 +6967,14 @@ var helper = {
 function line(x1, y1, x2, y2, o2) {
   return { type: "path", ops: _doubleLine(x1, y1, x2, y2, o2) };
 }
-function linearPath(points, close, o2) {
+function linearPath(points, close2, o2) {
   const len = (points || []).length;
   if (len > 2) {
     const ops = [];
     for (let i2 = 0; i2 < len - 1; i2++) {
       ops.push(..._doubleLine(points[i2][0], points[i2][1], points[i2 + 1][0], points[i2 + 1][1], o2));
     }
-    if (close) {
+    if (close2) {
       ops.push(..._doubleLine(points[len - 1][0], points[len - 1][1], points[0][0], points[0][1], o2));
     }
     return { type: "path", ops };
@@ -7527,8 +7527,8 @@ function getPointsOnBezierCurveWithSplitting(points, offset2, tolerance, newPoin
   }
   return outPoints;
 }
-function simplify(points, distance5) {
-  return simplifyPoints(points, 0, points.length, distance5);
+function simplify(points, distance4) {
+  return simplifyPoints(points, 0, points.length, distance4);
 }
 function simplifyPoints(points, start, end, epsilon, newPoints) {
   const outPoints = newPoints || [];
@@ -7554,22 +7554,22 @@ function simplifyPoints(points, start, end, epsilon, newPoints) {
   }
   return outPoints;
 }
-function pointsOnBezierCurves(points, tolerance = 0.15, distance5) {
+function pointsOnBezierCurves(points, tolerance = 0.15, distance4) {
   const newPoints = [];
   const numSegments = (points.length - 1) / 3;
   for (let i2 = 0; i2 < numSegments; i2++) {
     const offset2 = i2 * 3;
     getPointsOnBezierCurveWithSplitting(points, offset2, tolerance, newPoints);
   }
-  if (distance5 && distance5 > 0) {
-    return simplifyPoints(newPoints, 0, newPoints.length, distance5);
+  if (distance4 && distance4 > 0) {
+    return simplifyPoints(newPoints, 0, newPoints.length, distance4);
   }
   return newPoints;
 }
 
 // ../../node_modules/points-on-path/lib/index.js
 init_define_import_meta_env();
-function pointsOnPath(path, tolerance, distance5) {
+function pointsOnPath(path, tolerance, distance4) {
   const segments = parsePath(path);
   const normalized2 = normalize(absolutize(segments));
   const sets = [];
@@ -7616,12 +7616,12 @@ function pointsOnPath(path, tolerance, distance5) {
     }
   }
   appendPendingPoints();
-  if (!distance5) {
+  if (!distance4) {
     return sets;
   }
   const out = [];
   for (const set of sets) {
-    const simplifiedSet = simplify(set, distance5);
+    const simplifiedSet = simplify(set, distance4);
     if (simplifiedSet.length) {
       out.push(simplifiedSet);
     }
@@ -7786,8 +7786,8 @@ var RoughGenerator = class {
     const hasFill = o2.fill && o2.fill !== "transparent" && o2.fill !== NOS;
     const hasStroke = o2.stroke !== NOS;
     const simplified = !!(o2.simplification && o2.simplification < 1);
-    const distance5 = simplified ? 4 - 4 * (o2.simplification || 1) : (1 + o2.roughness) / 2;
-    const sets = pointsOnPath(d, 1, distance5);
+    const distance4 = simplified ? 4 - 4 * (o2.simplification || 1) : (1 + o2.roughness) / 2;
+    const sets = pointsOnPath(d, 1, distance4);
     const shape = svgPath(d, o2);
     if (hasFill) {
       if (o2.fillStyle === "solid") {
@@ -8341,127 +8341,6 @@ init_define_import_meta_env();
 // element/binding.ts
 init_define_import_meta_env();
 
-// scene/index.ts
-init_define_import_meta_env();
-
-// scene/scroll.ts
-init_define_import_meta_env();
-var isOutsideViewPort = (appState, cords) => {
-  const [x1, y1, x2, y2] = cords;
-  const { x: viewportX1, y: viewportY1 } = sceneCoordsToViewportCoords(
-    { sceneX: x1, sceneY: y1 },
-    appState
-  );
-  const { x: viewportX2, y: viewportY2 } = sceneCoordsToViewportCoords(
-    { sceneX: x2, sceneY: y2 },
-    appState
-  );
-  return viewportX2 - viewportX1 > appState.width || viewportY2 - viewportY1 > appState.height;
-};
-var centerScrollOn = ({
-  scenePoint,
-  viewportDimensions,
-  zoom
-}) => {
-  return {
-    scrollX: viewportDimensions.width / 2 / zoom.value - scenePoint.x,
-    scrollY: viewportDimensions.height / 2 / zoom.value - scenePoint.y
-  };
-};
-var calculateScrollCenter = (elements, appState) => {
-  elements = getVisibleElements(elements);
-  if (!elements.length) {
-    return {
-      scrollX: 0,
-      scrollY: 0
-    };
-  }
-  let [x1, y1, x2, y2] = getCommonBounds(elements);
-  if (isOutsideViewPort(appState, [x1, y1, x2, y2])) {
-    [x1, y1, x2, y2] = getClosestElementBounds(
-      elements,
-      viewportCoordsToSceneCoords(
-        { clientX: appState.scrollX, clientY: appState.scrollY },
-        appState
-      )
-    );
-  }
-  const centerX = (x1 + x2) / 2;
-  const centerY = (y1 + y2) / 2;
-  return centerScrollOn({
-    scenePoint: { x: centerX, y: centerY },
-    viewportDimensions: { width: appState.width, height: appState.height },
-    zoom: appState.zoom
-  });
-};
-
-// scene/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 !== "image" && type !== "frame" && type !== "magicframe";
-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 === "arrow" || type === "line" || type === "diamond" || type === "image";
-var canHaveArrowheads = (type) => type === "arrow";
-var getElementAtPosition = (elements, isAtPositionFn) => {
-  let hitElement = null;
-  for (let index = elements.length - 1; index >= 0; --index) {
-    const element = elements[index];
-    if (element.isDeleted) {
-      continue;
-    }
-    if (isAtPositionFn(element)) {
-      hitElement = element;
-      break;
-    }
-  }
-  return hitElement;
-};
-var getElementsAtPosition = (elements, isAtPositionFn) => {
-  const iframeLikes = [];
-  const elsAtPos = elements.filter((element) => {
-    const hit = !element.isDeleted && isAtPositionFn(element);
-    if (hit) {
-      if (isIframeElement(element)) {
-        iframeLikes.push(element);
-        return false;
-      }
-      return true;
-    }
-    return false;
-  });
-  return elsAtPos.concat(iframeLikes);
-};
-
-// scene/zoom.ts
-init_define_import_meta_env();
-var getNormalizedZoom = (zoom) => {
-  return Math.max(MIN_ZOOM, Math.min(zoom, 30));
-};
-var getStateForZoom = ({
-  viewportX,
-  viewportY,
-  nextZoom
-}, appState) => {
-  const appLayerX = viewportX - appState.offsetLeft;
-  const appLayerY = viewportY - appState.offsetTop;
-  const currentZoom = appState.zoom.value;
-  const baseScrollX = appState.scrollX + (appLayerX - appLayerX / currentZoom);
-  const baseScrollY = appState.scrollY + (appLayerY - appLayerY / currentZoom);
-  const zoomOffsetScrollX = -(appLayerX - appLayerX / nextZoom);
-  const zoomOffsetScrollY = -(appLayerY - appLayerY / nextZoom);
-  return {
-    scrollX: baseScrollX + zoomOffsetScrollX,
-    scrollY: baseScrollY + zoomOffsetScrollY,
-    zoom: {
-      value: nextZoom
-    }
-  };
-};
-
-// element/collision.ts
-init_define_import_meta_env();
-
 // ga.ts
 init_define_import_meta_env();
 var point = (x, y) => [0, 0, 0, 0, y, x, 1, 0];
@@ -8671,1728 +8550,1373 @@ var translation = (direction) => [
   0,
   0
 ];
-var translationOrthogonal = (direction, distance5) => {
-  const scale = 0.5 * distance5;
+var translationOrthogonal = (direction, distance4) => {
+  const scale = 0.5 * distance4;
   return [1, 0, 0, 0, scale * direction[4], scale * direction[5], 0, 0];
 };
 var compose = (motor1, motor2) => mul(motor2, motor1);
 var apply = (motor, nvector2) => normalized(mul(mul(motor, nvector2), reverse(motor)));
 
-// node_modules/points-on-curve/lib/index.js
+// ../utils/collision.ts
 init_define_import_meta_env();
-function distance4(p1, p2) {
-  return Math.sqrt(distanceSq2(p1, p2));
-}
-function distanceSq2(p1, p2) {
-  return Math.pow(p1[0] - p2[0], 2) + Math.pow(p1[1] - p2[1], 2);
-}
-function distanceToSegmentSq2(p, v, w) {
-  const l2 = distanceSq2(v, w);
-  if (l2 === 0) {
-    return distanceSq2(p, v);
-  }
-  let t2 = ((p[0] - v[0]) * (w[0] - v[0]) + (p[1] - v[1]) * (w[1] - v[1])) / l2;
-  t2 = Math.max(0, Math.min(1, t2));
-  return distanceSq2(p, lerp2(v, w, t2));
-}
-function lerp2(a2, b2, t2) {
+
+// ../utils/geometry/geometry.ts
+init_define_import_meta_env();
+var DEFAULT_THRESHOLD = 1e-4;
+var isClosed = (polygon2) => {
+  const first = polygon2[0];
+  const last = polygon2[polygon2.length - 1];
+  return first[0] === last[0] && first[1] === last[1];
+};
+var close = (polygon2) => {
+  return isClosed(polygon2) ? polygon2 : [...polygon2, polygon2[0]];
+};
+var angleToDegrees = (angle) => {
+  return angle * 180 / Math.PI;
+};
+var angleToRadians = (angle) => {
+  return angle / 180 * Math.PI;
+};
+var rotate2 = (point2, angle) => {
   return [
-    a2[0] + (b2[0] - a2[0]) * t2,
-    a2[1] + (b2[1] - a2[1]) * t2
+    point2[0] * Math.cos(angle) - point2[1] * Math.sin(angle),
+    point2[0] * Math.sin(angle) + point2[1] * Math.cos(angle)
   ];
-}
-function flatness2(points, offset2) {
-  const p1 = points[offset2 + 0];
-  const p2 = points[offset2 + 1];
-  const p3 = points[offset2 + 2];
-  const p4 = points[offset2 + 3];
-  let ux = 3 * p2[0] - 2 * p1[0] - p4[0];
-  ux *= ux;
-  let uy = 3 * p2[1] - 2 * p1[1] - p4[1];
-  uy *= uy;
-  let vx = 3 * p3[0] - 2 * p4[0] - p1[0];
-  vx *= vx;
-  let vy = 3 * p3[1] - 2 * p4[1] - p1[1];
-  vy *= vy;
-  if (ux < vx) {
-    ux = vx;
-  }
-  if (uy < vy) {
-    uy = vy;
+};
+var isOrigin = (point2) => {
+  return point2[0] === 0 && point2[1] === 0;
+};
+var pointRotate = (point2, angle, origin) => {
+  const r = angleToRadians(angle);
+  if (!origin || isOrigin(origin)) {
+    return rotate2(point2, r);
   }
-  return ux + uy;
-}
-function getPointsOnBezierCurveWithSplitting2(points, offset2, tolerance, newPoints) {
-  const outPoints = newPoints || [];
-  if (flatness2(points, offset2) < tolerance) {
-    const p0 = points[offset2 + 0];
-    if (outPoints.length) {
-      const d = distance4(outPoints[outPoints.length - 1], p0);
-      if (d > 1) {
-        outPoints.push(p0);
-      }
-    } else {
-      outPoints.push(p0);
-    }
-    outPoints.push(points[offset2 + 3]);
+  return rotate2(point2.map((c, i2) => c - origin[i2]), r).map(
+    (c, i2) => c + origin[i2]
+  );
+};
+var pointInverse = (point2) => {
+  return [-point2[0], -point2[1]];
+};
+var pointAdd = (pointA, pointB) => {
+  return [pointA[0] + pointB[0], pointA[1] + pointB[1]];
+};
+var distanceToPoint = (p1, p2) => {
+  return distance2d(...p1, ...p2);
+};
+var pointRelativeToCenter = (point2, center, angle) => {
+  const translated = pointAdd(point2, pointInverse(center));
+  const rotated = pointRotate(translated, -angleToDegrees(angle));
+  return rotated;
+};
+var distanceToSegment = (point2, line2) => {
+  const [x, y] = point2;
+  const [[x1, y1], [x2, y2]] = line2;
+  const A2 = x - x1;
+  const B2 = y - y1;
+  const C2 = x2 - x1;
+  const D = y2 - y1;
+  const dot2 = A2 * C2 + B2 * D;
+  const len_sq = C2 * C2 + D * D;
+  let param = -1;
+  if (len_sq !== 0) {
+    param = dot2 / len_sq;
+  }
+  let xx;
+  let yy;
+  if (param < 0) {
+    xx = x1;
+    yy = y1;
+  } else if (param > 1) {
+    xx = x2;
+    yy = y2;
   } else {
-    const t2 = 0.5;
-    const p1 = points[offset2 + 0];
-    const p2 = points[offset2 + 1];
-    const p3 = points[offset2 + 2];
-    const p4 = points[offset2 + 3];
-    const q1 = lerp2(p1, p2, t2);
-    const q2 = lerp2(p2, p3, t2);
-    const q3 = lerp2(p3, p4, t2);
-    const r1 = lerp2(q1, q2, t2);
-    const r2 = lerp2(q2, q3, t2);
-    const red = lerp2(r1, r2, t2);
-    getPointsOnBezierCurveWithSplitting2([p1, q1, r1, red], 0, tolerance, outPoints);
-    getPointsOnBezierCurveWithSplitting2([red, r2, q3, p4], 0, tolerance, outPoints);
+    xx = x1 + param * C2;
+    yy = y1 + param * D;
   }
-  return outPoints;
-}
-function simplify2(points, distance5) {
-  return simplifyPoints2(points, 0, points.length, distance5);
-}
-function simplifyPoints2(points, start, end, epsilon, newPoints) {
-  const outPoints = newPoints || [];
-  const s2 = points[start];
-  const e2 = points[end - 1];
-  let maxDistSq = 0;
-  let maxNdx = 1;
-  for (let i2 = start + 1; i2 < end - 1; ++i2) {
-    const distSq = distanceToSegmentSq2(points[i2], s2, e2);
-    if (distSq > maxDistSq) {
-      maxDistSq = distSq;
-      maxNdx = i2;
-    }
+  const dx = x - xx;
+  const dy = y - yy;
+  return Math.sqrt(dx * dx + dy * dy);
+};
+var pointOnLine = (point2, line2, threshold = DEFAULT_THRESHOLD) => {
+  const distance4 = distanceToSegment(point2, line2);
+  if (distance4 === 0) {
+    return true;
   }
-  if (Math.sqrt(maxDistSq) > epsilon) {
-    simplifyPoints2(points, start, maxNdx + 1, epsilon, outPoints);
-    simplifyPoints2(points, maxNdx, end, epsilon, outPoints);
-  } else {
-    if (!outPoints.length) {
-      outPoints.push(s2);
+  return distance4 < threshold;
+};
+var pointOnPolyline = (point2, polyline, threshold = DEFAULT_THRESHOLD) => {
+  return polyline.some((line2) => pointOnLine(point2, line2, threshold));
+};
+var cubicBezierEquation = (curve2) => {
+  const [p0, p1, p2, p3] = curve2;
+  return (t2, idx) => Math.pow(1 - t2, 3) * p3[idx] + 3 * t2 * Math.pow(1 - t2, 2) * p2[idx] + 3 * Math.pow(t2, 2) * (1 - t2) * p1[idx] + p0[idx] * Math.pow(t2, 3);
+};
+var polyLineFromCurve = (curve2, segments = 10) => {
+  const equation2 = cubicBezierEquation(curve2);
+  let startingPoint = [equation2(0, 0), equation2(0, 1)];
+  const lineSegments = [];
+  let t2 = 0;
+  const increment = 1 / segments;
+  for (let i2 = 0; i2 < segments; i2++) {
+    t2 += increment;
+    if (t2 <= 1) {
+      const nextPoint = [equation2(t2, 0), equation2(t2, 1)];
+      lineSegments.push([startingPoint, nextPoint]);
+      startingPoint = nextPoint;
+    }
+  }
+  return lineSegments;
+};
+var pointOnCurve = (point2, curve2, threshold = DEFAULT_THRESHOLD) => {
+  return pointOnPolyline(point2, polyLineFromCurve(curve2), threshold);
+};
+var pointOnPolycurve = (point2, polycurve, threshold = DEFAULT_THRESHOLD) => {
+  return polycurve.some((curve2) => pointOnCurve(point2, curve2, threshold));
+};
+var pointInPolygon = (point2, polygon2) => {
+  const x = point2[0];
+  const y = point2[1];
+  let inside = false;
+  for (let i2 = 0, j = polygon2.length - 1; i2 < polygon2.length; j = i2++) {
+    const xi = polygon2[i2][0];
+    const yi = polygon2[i2][1];
+    const xj = polygon2[j][0];
+    const yj = polygon2[j][1];
+    if ((yi > y && yj <= y || yi <= y && yj > y) && x < (xj - xi) * (y - yi) / (yj - yi) + xi) {
+      inside = !inside;
+    }
+  }
+  return inside;
+};
+var pointOnPolygon = (point2, polygon2, threshold = DEFAULT_THRESHOLD) => {
+  let on = false;
+  const closed = close(polygon2);
+  for (let i2 = 0, l2 = closed.length - 1; i2 < l2; i2++) {
+    if (pointOnLine(point2, [closed[i2], closed[i2 + 1]], threshold)) {
+      on = true;
+      break;
     }
-    outPoints.push(e2);
-  }
-  return outPoints;
-}
-function pointsOnBezierCurves2(points, tolerance = 0.15, distance5) {
-  const newPoints = [];
-  const numSegments = (points.length - 1) / 3;
-  for (let i2 = 0; i2 < numSegments; i2++) {
-    const offset2 = i2 * 3;
-    getPointsOnBezierCurveWithSplitting2(points, offset2, tolerance, newPoints);
   }
-  if (distance5 && distance5 > 0) {
-    return simplifyPoints2(newPoints, 0, newPoints.length, distance5);
+  return on;
+};
+var distanceToEllipse = (point2, ellipse2) => {
+  const { angle, halfWidth, halfHeight, center } = ellipse2;
+  const a2 = halfWidth;
+  const b2 = halfHeight;
+  const [rotatedPointX, rotatedPointY] = pointRelativeToCenter(
+    point2,
+    center,
+    angle
+  );
+  const px = Math.abs(rotatedPointX);
+  const py = Math.abs(rotatedPointY);
+  let tx = 0.707;
+  let ty = 0.707;
+  for (let i2 = 0; i2 < 3; i2++) {
+    const x = a2 * tx;
+    const y = b2 * ty;
+    const ex = (a2 * a2 - b2 * b2) * tx ** 3 / a2;
+    const ey = (b2 * b2 - a2 * a2) * ty ** 3 / b2;
+    const rx = x - ex;
+    const ry = y - ey;
+    const qx = px - ex;
+    const qy = py - ey;
+    const r = Math.hypot(ry, rx);
+    const q = Math.hypot(qy, qx);
+    tx = Math.min(1, Math.max(0, (qx * r / q + ex) / a2));
+    ty = Math.min(1, Math.max(0, (qy * r / q + ey) / b2));
+    const t2 = Math.hypot(ty, tx);
+    tx /= t2;
+    ty /= t2;
   }
-  return newPoints;
-}
-
-// element/transformHandles.ts
-init_define_import_meta_env();
-var transformHandleSizes = {
-  mouse: 8,
-  pen: 16,
-  touch: 28
+  const [minX, minY] = [
+    a2 * tx * Math.sign(rotatedPointX),
+    b2 * ty * Math.sign(rotatedPointY)
+  ];
+  return distanceToPoint([rotatedPointX, rotatedPointY], [minX, minY]);
 };
-var ROTATION_RESIZE_HANDLE_GAP = 16;
-var OMIT_SIDES_FOR_MULTIPLE_ELEMENTS = {
-  e: true,
-  s: true,
-  n: true,
-  w: true
+var pointOnEllipse = (point2, ellipse2, threshold = DEFAULT_THRESHOLD) => {
+  return distanceToEllipse(point2, ellipse2) <= threshold;
 };
-var OMIT_SIDES_FOR_FRAME = {
-  e: true,
-  s: true,
-  n: true,
-  w: true,
-  rotation: true
+var pointInEllipse = (point2, ellipse2) => {
+  const { center, angle, halfWidth, halfHeight } = ellipse2;
+  const [rotatedPointX, rotatedPointY] = pointRelativeToCenter(
+    point2,
+    center,
+    angle
+  );
+  return rotatedPointX / halfWidth * (rotatedPointX / halfWidth) + rotatedPointY / halfHeight * (rotatedPointY / halfHeight) <= 1;
 };
-var OMIT_SIDES_FOR_TEXT_ELEMENT = {
-  e: true,
-  s: true,
-  n: true,
-  w: true
-};
-var OMIT_SIDES_FOR_LINE_SLASH = {
-  e: true,
-  s: true,
-  n: true,
-  w: true,
-  nw: true,
-  se: true
-};
-var OMIT_SIDES_FOR_LINE_BACKSLASH = {
-  e: true,
-  s: true,
-  n: true,
-  w: true
-};
-var generateTransformHandle = (x, y, width, height, cx, cy, angle) => {
-  const [xx, yy] = rotate2(x + width / 2, y + height / 2, cx, cy, angle);
-  return [xx - width / 2, yy - height / 2, width, height];
-};
-var getTransformHandlesFromCoords = ([x1, y1, x2, y2, cx, cy], angle, zoom, pointerType, omitSides = {}, margin = 4) => {
-  const size = transformHandleSizes[pointerType];
-  const handleWidth = size / zoom.value;
-  const handleHeight = size / zoom.value;
-  const handleMarginX = size / zoom.value;
-  const handleMarginY = size / zoom.value;
-  const width = x2 - x1;
-  const height = y2 - y1;
-  const dashedLineMargin = margin / zoom.value;
-  const centeringOffset = (size - DEFAULT_TRANSFORM_HANDLE_SPACING * 2) / (2 * zoom.value);
-  const transformHandles = {
-    nw: omitSides.nw ? void 0 : generateTransformHandle(
-      x1 - dashedLineMargin - handleMarginX + centeringOffset,
-      y1 - dashedLineMargin - handleMarginY + centeringOffset,
-      handleWidth,
-      handleHeight,
-      cx,
-      cy,
-      angle
-    ),
-    ne: omitSides.ne ? void 0 : generateTransformHandle(
-      x2 + dashedLineMargin - centeringOffset,
-      y1 - dashedLineMargin - handleMarginY + centeringOffset,
-      handleWidth,
-      handleHeight,
-      cx,
-      cy,
-      angle
-    ),
-    sw: omitSides.sw ? void 0 : generateTransformHandle(
-      x1 - dashedLineMargin - handleMarginX + centeringOffset,
-      y2 + dashedLineMargin - centeringOffset,
-      handleWidth,
-      handleHeight,
-      cx,
-      cy,
-      angle
-    ),
-    se: omitSides.se ? void 0 : generateTransformHandle(
-      x2 + dashedLineMargin - centeringOffset,
-      y2 + dashedLineMargin - centeringOffset,
-      handleWidth,
-      handleHeight,
-      cx,
-      cy,
-      angle
-    ),
-    rotation: omitSides.rotation ? void 0 : generateTransformHandle(
-      x1 + width / 2 - handleWidth / 2,
-      y1 - dashedLineMargin - handleMarginY + centeringOffset - ROTATION_RESIZE_HANDLE_GAP / zoom.value,
-      handleWidth,
-      handleHeight,
-      cx,
-      cy,
-      angle
-    )
-  };
-  const minimumSizeForEightHandles = 5 * transformHandleSizes.mouse / zoom.value;
-  if (Math.abs(width) > minimumSizeForEightHandles) {
-    if (!omitSides.n) {
-      transformHandles.n = generateTransformHandle(
-        x1 + width / 2 - handleWidth / 2,
-        y1 - dashedLineMargin - handleMarginY + centeringOffset,
-        handleWidth,
-        handleHeight,
-        cx,
-        cy,
-        angle
-      );
-    }
-    if (!omitSides.s) {
-      transformHandles.s = generateTransformHandle(
-        x1 + width / 2 - handleWidth / 2,
-        y2 + dashedLineMargin - centeringOffset,
-        handleWidth,
-        handleHeight,
-        cx,
-        cy,
-        angle
-      );
-    }
+
+// ../utils/collision.ts
+var isPointOnShape = (point2, shape, tolerance = 0) => {
+  switch (shape.type) {
+    case "polygon":
+      return pointOnPolygon(point2, shape.data, tolerance);
+    case "ellipse":
+      return pointOnEllipse(point2, shape.data, tolerance);
+    case "line":
+      return pointOnLine(point2, shape.data, tolerance);
+    case "polyline":
+      return pointOnPolyline(point2, shape.data, tolerance);
+    case "curve":
+      return pointOnCurve(point2, shape.data, tolerance);
+    case "polycurve":
+      return pointOnPolycurve(point2, shape.data, tolerance);
+    default:
+      throw Error(`shape ${shape} is not implemented`);
   }
-  if (Math.abs(height) > minimumSizeForEightHandles) {
-    if (!omitSides.w) {
-      transformHandles.w = generateTransformHandle(
-        x1 - dashedLineMargin - handleMarginX + centeringOffset,
-        y1 + height / 2 - handleHeight / 2,
-        handleWidth,
-        handleHeight,
-        cx,
-        cy,
-        angle
-      );
+};
+var isPointInShape = (point2, shape) => {
+  switch (shape.type) {
+    case "polygon":
+      return pointInPolygon(point2, shape.data);
+    case "line":
+      return false;
+    case "curve":
+      return false;
+    case "ellipse":
+      return pointInEllipse(point2, shape.data);
+    case "polyline": {
+      const polygon2 = close(shape.data.flat());
+      return pointInPolygon(point2, polygon2);
     }
-    if (!omitSides.e) {
-      transformHandles.e = generateTransformHandle(
-        x2 + dashedLineMargin - centeringOffset,
-        y1 + height / 2 - handleHeight / 2,
-        handleWidth,
-        handleHeight,
-        cx,
-        cy,
-        angle
-      );
+    case "polycurve": {
+      return false;
     }
+    default:
+      throw Error(`shape ${shape} is not implemented`);
   }
-  return transformHandles;
 };
-var getTransformHandles = (element, zoom, elementsMap, pointerType = "mouse") => {
-  if (element.locked) {
-    return {};
-  }
-  let omitSides = {};
-  if (element.type === "freedraw" || isLinearElement(element)) {
-    if (element.points.length === 2) {
-      const [, p1] = element.points;
-      if (p1[0] === 0 || p1[1] === 0) {
-        omitSides = OMIT_SIDES_FOR_LINE_BACKSLASH;
-      } else if (p1[0] > 0 && p1[1] < 0) {
-        omitSides = OMIT_SIDES_FOR_LINE_SLASH;
-      } else if (p1[0] > 0 && p1[1] > 0) {
-        omitSides = OMIT_SIDES_FOR_LINE_BACKSLASH;
-      } else if (p1[0] < 0 && p1[1] > 0) {
-        omitSides = OMIT_SIDES_FOR_LINE_SLASH;
-      } else if (p1[0] < 0 && p1[1] < 0) {
-        omitSides = OMIT_SIDES_FOR_LINE_BACKSLASH;
-      }
-    }
-  } else if (isTextElement(element)) {
-    omitSides = OMIT_SIDES_FOR_TEXT_ELEMENT;
-  } else if (isFrameLikeElement(element)) {
-    omitSides = {
-      rotation: true
-    };
-  }
-  const dashedLineMargin = isLinearElement(element) ? DEFAULT_TRANSFORM_HANDLE_SPACING + 8 : DEFAULT_TRANSFORM_HANDLE_SPACING;
-  return getTransformHandlesFromCoords(
-    getElementAbsoluteCoords(element, elementsMap, true),
-    element.angle,
-    zoom,
-    pointerType,
-    omitSides,
-    dashedLineMargin
+
+// scene/index.ts
+init_define_import_meta_env();
+
+// scene/scroll.ts
+init_define_import_meta_env();
+var isOutsideViewPort = (appState, cords) => {
+  const [x1, y1, x2, y2] = cords;
+  const { x: viewportX1, y: viewportY1 } = sceneCoordsToViewportCoords(
+    { sceneX: x1, sceneY: y1 },
+    appState
+  );
+  const { x: viewportX2, y: viewportY2 } = sceneCoordsToViewportCoords(
+    { sceneX: x2, sceneY: y2 },
+    appState
   );
+  return viewportX2 - viewportX1 > appState.width || viewportY2 - viewportY1 > appState.height;
 };
-var shouldShowBoundingBox = (elements, appState) => {
-  if (appState.editingLinearElement) {
-    return false;
+var centerScrollOn = ({
+  scenePoint,
+  viewportDimensions,
+  zoom
+}) => {
+  return {
+    scrollX: viewportDimensions.width / 2 / zoom.value - scenePoint.x,
+    scrollY: viewportDimensions.height / 2 / zoom.value - scenePoint.y
+  };
+};
+var calculateScrollCenter = (elements, appState) => {
+  elements = getVisibleElements(elements);
+  if (!elements.length) {
+    return {
+      scrollX: 0,
+      scrollY: 0
+    };
   }
-  if (elements.length > 1) {
-    return true;
+  let [x1, y1, x2, y2] = getCommonBounds(elements);
+  if (isOutsideViewPort(appState, [x1, y1, x2, y2])) {
+    [x1, y1, x2, y2] = getClosestElementBounds(
+      elements,
+      viewportCoordsToSceneCoords(
+        { clientX: appState.scrollX, clientY: appState.scrollY },
+        appState
+      )
+    );
   }
-  const element = elements[0];
-  if (!isLinearElement(element)) {
-    return true;
+  const centerX = (x1 + x2) / 2;
+  const centerY = (y1 + y2) / 2;
+  return centerScrollOn({
+    scenePoint: { x: centerX, y: centerY },
+    viewportDimensions: { width: appState.width, height: appState.height },
+    zoom: appState.zoom
+  });
+};
+
+// scene/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 !== "image" && type !== "frame" && type !== "magicframe";
+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 === "arrow" || type === "line" || type === "diamond" || type === "image";
+var canHaveArrowheads = (type) => type === "arrow";
+var getElementAtPosition = (elements, isAtPositionFn) => {
+  let hitElement = null;
+  for (let index = elements.length - 1; index >= 0; --index) {
+    const element = elements[index];
+    if (element.isDeleted) {
+      continue;
+    }
+    if (isAtPositionFn(element)) {
+      hitElement = element;
+      break;
+    }
   }
-  return element.points.length > 2;
+  return hitElement;
 };
 
-// scene/ShapeCache.ts
+// scene/zoom.ts
 init_define_import_meta_env();
-var ShapeCache = class _ShapeCache {
-  static rg = new RoughGenerator();
-  static cache = /* @__PURE__ */ new WeakMap();
-  /**
-   * 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 set = (element, shape) => _ShapeCache.cache.set(element, shape);
-  static delete = (element) => _ShapeCache.cache.delete(element);
-  static destroy = () => {
-    _ShapeCache.cache = /* @__PURE__ */ new WeakMap();
-  };
-  /**
-   * Generates & caches shape for element if not already cached, otherwise
-   * returns cached shape.
-   */
-  static generateElementShape = (element, renderConfig) => {
-    const cachedShape = renderConfig?.isExporting ? void 0 : _ShapeCache.get(element);
-    if (cachedShape !== void 0) {
-      return cachedShape;
+var getNormalizedZoom = (zoom) => {
+  return Math.max(MIN_ZOOM, Math.min(zoom, 30));
+};
+var getStateForZoom = ({
+  viewportX,
+  viewportY,
+  nextZoom
+}, appState) => {
+  const appLayerX = viewportX - appState.offsetLeft;
+  const appLayerY = viewportY - appState.offsetTop;
+  const currentZoom = appState.zoom.value;
+  const baseScrollX = appState.scrollX + (appLayerX - appLayerX / currentZoom);
+  const baseScrollY = appState.scrollY + (appLayerY - appLayerY / currentZoom);
+  const zoomOffsetScrollX = -(appLayerX - appLayerX / nextZoom);
+  const zoomOffsetScrollY = -(appLayerY - appLayerY / nextZoom);
+  return {
+    scrollX: baseScrollX + zoomOffsetScrollX,
+    scrollY: baseScrollY + zoomOffsetScrollY,
+    zoom: {
+      value: nextZoom
     }
-    elementWithCanvasCache.delete(element);
-    const shape = _generateElementShape(
-      element,
-      _ShapeCache.rg,
-      renderConfig || {
-        isExporting: false,
-        canvasBackgroundColor: COLOR_PALETTE.white,
-        embedsValidationStatus: null
-      }
-    );
-    _ShapeCache.cache.set(element, shape);
-    return shape;
   };
 };
 
-// element/collision.ts
-var isElementDraggableFromInside = (element) => {
-  if (element.type === "arrow") {
-    return false;
-  }
-  if (element.type === "freedraw") {
-    return true;
-  }
-  const isDraggableFromInside = !isTransparent(element.backgroundColor) || hasBoundTextElement(element) || isIframeLikeElement(element);
-  if (element.type === "line") {
-    return isDraggableFromInside && isPathALoop(element.points);
-  }
-  return isDraggableFromInside || isImageElement(element);
+// keys.ts
+init_define_import_meta_env();
+var CODES = {
+  EQUAL: "Equal",
+  MINUS: "Minus",
+  NUM_ADD: "NumpadAdd",
+  NUM_SUBTRACT: "NumpadSubtract",
+  NUM_ZERO: "Numpad0",
+  BRACKET_RIGHT: "BracketRight",
+  BRACKET_LEFT: "BracketLeft",
+  ONE: "Digit1",
+  TWO: "Digit2",
+  THREE: "Digit3",
+  NINE: "Digit9",
+  QUOTE: "Quote",
+  ZERO: "Digit0",
+  SLASH: "Slash",
+  C: "KeyC",
+  D: "KeyD",
+  H: "KeyH",
+  V: "KeyV",
+  Z: "KeyZ",
+  R: "KeyR",
+  S: "KeyS"
 };
-var hitTest = (element, appState, frameNameBoundsCache, x, y, elementsMap) => {
-  const threshold = 10 / appState.zoom.value;
-  const point2 = [x, y];
-  if (isElementSelected(appState, element) && shouldShowBoundingBox([element], appState)) {
-    return isPointHittingElementBoundingBox(
-      element,
-      elementsMap,
-      point2,
-      threshold,
-      frameNameBoundsCache
-    );
-  }
-  const boundTextElement = getBoundTextElement(element, elementsMap);
-  if (boundTextElement) {
-    const isHittingBoundTextElement = hitTest(
-      boundTextElement,
-      appState,
-      frameNameBoundsCache,
-      x,
-      y,
-      elementsMap
-    );
-    if (isHittingBoundTextElement) {
-      return true;
+var KEYS = {
+  ARROW_DOWN: "ArrowDown",
+  ARROW_LEFT: "ArrowLeft",
+  ARROW_RIGHT: "ArrowRight",
+  ARROW_UP: "ArrowUp",
+  PAGE_UP: "PageUp",
+  PAGE_DOWN: "PageDown",
+  BACKSPACE: "Backspace",
+  ALT: "Alt",
+  CTRL_OR_CMD: isDarwin ? "metaKey" : "ctrlKey",
+  DELETE: "Delete",
+  ENTER: "Enter",
+  ESCAPE: "Escape",
+  QUESTION_MARK: "?",
+  SPACE: " ",
+  TAB: "Tab",
+  CHEVRON_LEFT: "<",
+  CHEVRON_RIGHT: ">",
+  PERIOD: ".",
+  COMMA: ",",
+  SUBTRACT: "-",
+  SLASH: "/",
+  A: "a",
+  C: "c",
+  D: "d",
+  E: "e",
+  F: "f",
+  G: "g",
+  H: "h",
+  I: "i",
+  L: "l",
+  O: "o",
+  P: "p",
+  Q: "q",
+  R: "r",
+  S: "s",
+  T: "t",
+  V: "v",
+  X: "x",
+  Y: "y",
+  Z: "z",
+  K: "k",
+  W: "w",
+  0: "0",
+  1: "1",
+  2: "2",
+  3: "3",
+  4: "4",
+  5: "5",
+  6: "6",
+  7: "7",
+  8: "8",
+  9: "9"
+};
+var isArrowKey = (key) => key === KEYS.ARROW_LEFT || key === KEYS.ARROW_RIGHT || key === KEYS.ARROW_DOWN || key === KEYS.ARROW_UP;
+var shouldResizeFromCenter = (event) => event.altKey;
+var shouldMaintainAspectRatio = (event) => event.shiftKey;
+var shouldRotateWithDiscreteAngle = (event) => event.shiftKey;
+
+// element/binding.ts
+var shouldEnableBindingForPointerEvent = (event) => {
+  return !event[KEYS.CTRL_OR_CMD];
+};
+var isBindingEnabled = (appState) => {
+  return appState.isBindingEnabled;
+};
+var getNonDeletedElements = (scene, ids) => {
+  const result = [];
+  ids.forEach((id) => {
+    const element = scene.getNonDeletedElement(id);
+    if (element != null) {
+      result.push(element);
     }
-  }
-  return isHittingElementNotConsideringBoundingBox(
-    element,
-    appState,
-    frameNameBoundsCache,
-    point2,
+  });
+  return result;
+};
+var bindOrUnbindLinearElement = (linearElement, startBindingElement, endBindingElement, elementsMap) => {
+  const boundToElementIds = /* @__PURE__ */ new Set();
+  const unboundFromElementIds = /* @__PURE__ */ new Set();
+  bindOrUnbindLinearElementEdge(
+    linearElement,
+    startBindingElement,
+    endBindingElement,
+    "start",
+    boundToElementIds,
+    unboundFromElementIds,
     elementsMap
   );
-};
-var isHittingElementBoundingBoxWithoutHittingElement = (element, appState, frameNameBoundsCache, x, y, elementsMap) => {
-  const threshold = 10 / appState.zoom.value;
-  const boundTextElement = getBoundTextElement(element, elementsMap);
-  if (boundTextElement && hitTest(boundTextElement, appState, frameNameBoundsCache, x, y, elementsMap)) {
-    return false;
-  }
-  return !isHittingElementNotConsideringBoundingBox(
-    element,
-    appState,
-    frameNameBoundsCache,
-    [x, y],
+  bindOrUnbindLinearElementEdge(
+    linearElement,
+    endBindingElement,
+    startBindingElement,
+    "end",
+    boundToElementIds,
+    unboundFromElementIds,
     elementsMap
-  ) && isPointHittingElementBoundingBox(
-    element,
-    elementsMap,
-    [x, y],
-    threshold,
-    frameNameBoundsCache
   );
-};
-var isHittingElementNotConsideringBoundingBox = (element, appState, frameNameBoundsCache, point2, elementsMap) => {
-  const threshold = 10 / appState.zoom.value;
-  const check = isTextElement(element) ? isStrictlyInside : isElementDraggableFromInside(element) ? isInsideCheck : isNearCheck;
-  return hitTestPointAgainstElement({
-    element,
-    elementsMap,
-    point: point2,
-    threshold,
-    check,
-    frameNameBoundsCache
-  });
-};
-var isElementSelected = (appState, element) => appState.selectedElementIds[element.id];
-var isPointHittingElementBoundingBox = (element, elementsMap, [x, y], threshold, frameNameBoundsCache) => {
-  if (isFrameLikeElement(element)) {
-    return hitTestPointAgainstElement({
-      element,
-      elementsMap,
-      point: [x, y],
-      threshold,
-      check: isInsideCheck,
-      frameNameBoundsCache
-    });
-  }
-  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
-  const elementCenterX = (x1 + x2) / 2;
-  const elementCenterY = (y1 + y2) / 2;
-  const [rotatedX, rotatedY] = rotate2(
-    x,
-    y,
-    elementCenterX,
-    elementCenterY,
-    -element.angle
+  const onlyUnbound = Array.from(unboundFromElementIds).filter(
+    (id) => !boundToElementIds.has(id)
+  );
+  getNonDeletedElements(Scene_default.getScene(linearElement), onlyUnbound).forEach(
+    (element) => {
+      mutateElement(element, {
+        boundElements: element.boundElements?.filter(
+          (element2) => element2.type !== "arrow" || element2.id !== linearElement.id
+        )
+      });
+    }
   );
-  return rotatedX > x1 - threshold && rotatedX < x2 + threshold && rotatedY > y1 - threshold && rotatedY < y2 + threshold;
 };
-var bindingBorderTest = (element, { x, y }, elementsMap) => {
-  const threshold = maxBindingGap(element, element.width, element.height);
-  const check = isOutsideCheck;
-  const point2 = [x, y];
-  return hitTestPointAgainstElement({
-    element,
-    elementsMap,
-    point: point2,
-    threshold,
-    check,
-    frameNameBoundsCache: null
-  });
+var bindOrUnbindLinearElementEdge = (linearElement, bindableElement, otherEdgeBindableElement, startOrEnd, boundToElementIds, unboundFromElementIds, elementsMap) => {
+  if (bindableElement !== "keep") {
+    if (bindableElement != null) {
+      if (otherEdgeBindableElement == null || (otherEdgeBindableElement === "keep" ? !isLinearElementSimpleAndAlreadyBoundOnOppositeEdge(
+        linearElement,
+        bindableElement,
+        startOrEnd
+      ) : startOrEnd === "start" || otherEdgeBindableElement.id !== bindableElement.id)) {
+        bindLinearElement(
+          linearElement,
+          bindableElement,
+          startOrEnd,
+          elementsMap
+        );
+        boundToElementIds.add(bindableElement.id);
+      }
+    } else {
+      const unbound = unbindLinearElement(linearElement, startOrEnd);
+      if (unbound != null) {
+        unboundFromElementIds.add(unbound);
+      }
+    }
+  }
 };
-var maxBindingGap = (element, elementWidth, elementHeight) => {
-  const shapeRatio = element.type === "diamond" ? 1 / Math.sqrt(2) : 1;
-  const smallerDimension = shapeRatio * Math.min(elementWidth, elementHeight);
-  return Math.max(16, Math.min(0.25 * smallerDimension, 32));
-};
-var hitTestPointAgainstElement = (args) => {
-  switch (args.element.type) {
-    case "rectangle":
-    case "iframe":
-    case "embeddable":
-    case "image":
-    case "text":
-    case "diamond":
-    case "ellipse":
-      const distance5 = distanceToBindableElement(
-        args.element,
-        args.point,
-        args.elementsMap
-      );
-      return args.check(distance5, args.threshold);
-    case "freedraw": {
-      if (!args.check(
-        distanceToRectangle(args.element, args.point, args.elementsMap),
-        args.threshold
-      )) {
-        return false;
-      }
-      return hitTestFreeDrawElement(
-        args.element,
-        args.point,
-        args.threshold,
-        args.elementsMap
+var bindOrUnbindSelectedElements = (selectedElements, app) => {
+  selectedElements.forEach((selectedElement) => {
+    if (isBindingElement(selectedElement)) {
+      bindOrUnbindLinearElement(
+        selectedElement,
+        getElligibleElementForBindingElement(selectedElement, "start", app),
+        getElligibleElementForBindingElement(selectedElement, "end", app),
+        app.scene.getNonDeletedElementsMap()
       );
-    }
-    case "arrow":
-    case "line":
-      return hitTestLinear(args);
-    case "selection":
-      console.warn(
-        "This should not happen, we need to investigate why it does."
+    } else if (isBindableElement(selectedElement)) {
+      maybeBindBindableElement(
+        selectedElement,
+        app.scene.getNonDeletedElementsMap(),
+        app
       );
-      return false;
-    case "frame":
-    case "magicframe": {
-      if (args.check(
-        distanceToBindableElement(args.element, args.point, args.elementsMap),
-        args.threshold
-      )) {
-        return true;
-      }
-      const frameNameBounds = args.frameNameBoundsCache?.get(args.element);
-      if (frameNameBounds) {
-        return args.check(
-          distanceToRectangleBox(frameNameBounds, args.point),
-          args.threshold
-        );
-      }
-      return false;
     }
-  }
+  });
 };
-var distanceToBindableElement = (element, point2, elementsMap) => {
-  switch (element.type) {
-    case "rectangle":
-    case "image":
-    case "text":
-    case "iframe":
-    case "embeddable":
-    case "frame":
-    case "magicframe":
-      return distanceToRectangle(element, point2, elementsMap);
-    case "diamond":
-      return distanceToDiamond(element, point2, elementsMap);
-    case "ellipse":
-      return distanceToEllipse(element, point2, elementsMap);
+var maybeBindBindableElement = (bindableElement, elementsMap, app) => {
+  getElligibleElementsForBindableElementAndWhere(bindableElement, app).forEach(
+    ([linearElement, where]) => bindOrUnbindLinearElement(
+      linearElement,
+      where === "end" ? "keep" : bindableElement,
+      where === "start" ? "keep" : bindableElement,
+      elementsMap
+    )
+  );
+};
+var maybeBindLinearElement = (linearElement, appState, pointerCoords, app) => {
+  if (appState.startBoundElement != null) {
+    bindLinearElement(
+      linearElement,
+      appState.startBoundElement,
+      "start",
+      app.scene.getNonDeletedElementsMap()
+    );
+  }
+  const hoveredElement = getHoveredElementForBinding(pointerCoords, app);
+  if (hoveredElement != null && !isLinearElementSimpleAndAlreadyBoundOnOppositeEdge(
+    linearElement,
+    hoveredElement,
+    "end"
+  )) {
+    bindLinearElement(
+      linearElement,
+      hoveredElement,
+      "end",
+      app.scene.getNonDeletedElementsMap()
+    );
   }
 };
-var isStrictlyInside = (distance5, threshold) => {
-  return distance5 < 0;
+var bindLinearElement = (linearElement, hoveredElement, startOrEnd, elementsMap) => {
+  mutateElement(linearElement, {
+    [startOrEnd === "start" ? "startBinding" : "endBinding"]: {
+      elementId: hoveredElement.id,
+      ...calculateFocusAndGap(
+        linearElement,
+        hoveredElement,
+        startOrEnd,
+        elementsMap
+      )
+    }
+  });
+  const boundElementsMap = arrayToMap(hoveredElement.boundElements || []);
+  if (!boundElementsMap.has(linearElement.id)) {
+    mutateElement(hoveredElement, {
+      boundElements: (hoveredElement.boundElements || []).concat({
+        id: linearElement.id,
+        type: "arrow"
+      })
+    });
+  }
 };
-var isInsideCheck = (distance5, threshold) => {
-  return distance5 < threshold;
+var isLinearElementSimpleAndAlreadyBoundOnOppositeEdge = (linearElement, bindableElement, startOrEnd) => {
+  const otherBinding = linearElement[startOrEnd === "start" ? "endBinding" : "startBinding"];
+  return isLinearElementSimpleAndAlreadyBound(
+    linearElement,
+    otherBinding?.elementId,
+    bindableElement
+  );
 };
-var isNearCheck = (distance5, threshold) => {
-  return Math.abs(distance5) < threshold;
+var isLinearElementSimpleAndAlreadyBound = (linearElement, alreadyBoundToId, bindableElement) => {
+  return alreadyBoundToId === bindableElement.id && linearElement.points.length < 3;
 };
-var isOutsideCheck = (distance5, threshold) => {
-  return 0 <= distance5 && distance5 < threshold;
+var unbindLinearElements = (elements, elementsMap) => {
+  elements.forEach((element) => {
+    if (isBindingElement(element)) {
+      bindOrUnbindLinearElement(element, null, null, elementsMap);
+    }
+  });
 };
-var distanceToRectangle = (element, point2, elementsMap) => {
-  const [, pointRel, hwidth, hheight] = pointRelativeToElement(
-    element,
-    point2,
-    elementsMap
-  );
-  return Math.max(
-    distanceToLine(pointRel, equation(0, 1, -hheight)),
-    distanceToLine(pointRel, equation(1, 0, -hwidth))
-  );
+var unbindLinearElement = (linearElement, startOrEnd) => {
+  const field = startOrEnd === "start" ? "startBinding" : "endBinding";
+  const binding = linearElement[field];
+  if (binding == null) {
+    return null;
+  }
+  mutateElement(linearElement, { [field]: null });
+  return binding.elementId;
 };
-var distanceToRectangleBox = (box, point2) => {
-  const [, pointRel, hwidth, hheight] = pointRelativeToDivElement(point2, box);
-  return Math.max(
-    distanceToLine(pointRel, equation(0, 1, -hheight)),
-    distanceToLine(pointRel, equation(1, 0, -hwidth))
+var getHoveredElementForBinding = (pointerCoords, app) => {
+  const hoveredElement = getElementAtPosition(
+    app.scene.getNonDeletedElements(),
+    (element) => isBindableElement(element, false) && bindingBorderTest(element, pointerCoords, app)
   );
+  return hoveredElement;
 };
-var distanceToDiamond = (element, point2, elementsMap) => {
-  const [, pointRel, hwidth, hheight] = pointRelativeToElement(
-    element,
-    point2,
+var calculateFocusAndGap = (linearElement, hoveredElement, startOrEnd, elementsMap) => {
+  const direction = startOrEnd === "start" ? -1 : 1;
+  const edgePointIndex = direction === -1 ? 0 : linearElement.points.length - 1;
+  const adjacentPointIndex = edgePointIndex - direction;
+  const edgePoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(
+    linearElement,
+    edgePointIndex,
     elementsMap
   );
-  const side = equation(hheight, hwidth, -hheight * hwidth);
-  return distanceToLine(pointRel, side);
-};
-var distanceToEllipse = (element, point2, elementsMap) => {
-  const [pointRel, tangent] = ellipseParamsForTest(element, point2, elementsMap);
-  return -sign(tangent) * distanceToLine(pointRel, tangent);
-};
-var ellipseParamsForTest = (element, point2, elementsMap) => {
-  const [, pointRel, hwidth, hheight] = pointRelativeToElement(
-    element,
-    point2,
+  const adjacentPoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(
+    linearElement,
+    adjacentPointIndex,
     elementsMap
   );
-  const [px, py] = toTuple(pointRel);
-  let tx = 0.707;
-  let ty = 0.707;
-  const a2 = hwidth;
-  const b2 = hheight;
-  [0, 1, 2, 3].forEach((_) => {
-    const xx = a2 * tx;
-    const yy = b2 * ty;
-    const ex = (a2 * a2 - b2 * b2) * tx ** 3 / a2;
-    const ey = (b2 * b2 - a2 * a2) * ty ** 3 / b2;
-    const rx = xx - ex;
-    const ry = yy - ey;
-    const qx = px - ex;
-    const qy = py - ey;
-    const r = Math.hypot(ry, rx);
-    const q = Math.hypot(qy, qx);
-    tx = Math.min(1, Math.max(0, (qx * r / q + ex) / a2));
-    ty = Math.min(1, Math.max(0, (qy * r / q + ey) / b2));
-    const t2 = Math.hypot(ty, tx);
-    tx /= t2;
-    ty /= t2;
-  });
-  const closestPoint = point(a2 * tx, b2 * ty);
-  const tangent = orthogonalThrough(pointRel, closestPoint);
-  return [pointRel, tangent];
-};
-var hitTestFreeDrawElement = (element, point2, threshold, elementsMap) => {
-  let x;
-  let y;
-  if (element.angle === 0) {
-    x = point2[0] - element.x;
-    y = point2[1] - element.y;
-  } else {
-    const [minX, minY, maxX, maxY] = getElementAbsoluteCoords(
-      element,
+  return {
+    focus: determineFocusDistance(
+      hoveredElement,
+      adjacentPoint,
+      edgePoint,
       elementsMap
-    );
-    const rotatedPoint = rotatePoint(
-      point2,
-      [minX + (maxX - minX) / 2, minY + (maxY - minY) / 2],
-      -element.angle
-    );
-    x = rotatedPoint[0] - element.x;
-    y = rotatedPoint[1] - element.y;
-  }
-  let [A2, B2] = element.points;
-  let P;
-  if (distance2d(A2[0], A2[1], x, y) < threshold || distance2d(B2[0], B2[1], x, y) < threshold) {
-    return true;
-  }
-  for (let i2 = 0; i2 < element.points.length; i2++) {
-    const delta = [B2[0] - A2[0], B2[1] - A2[1]];
-    const length = Math.hypot(delta[1], delta[0]);
-    const U = [delta[0] / length, delta[1] / length];
-    const C2 = [x - A2[0], y - A2[1]];
-    const d = (C2[0] * U[0] + C2[1] * U[1]) / Math.hypot(U[1], U[0]);
-    P = [A2[0] + U[0] * d, A2[1] + U[1] * d];
-    const da = distance2d(P[0], P[1], A2[0], A2[1]);
-    const db = distance2d(P[0], P[1], B2[0], B2[1]);
-    P = db < da && da > length ? B2 : da < db && db > length ? A2 : P;
-    if (Math.hypot(y - P[1], x - P[0]) < threshold) {
-      return true;
-    }
-    A2 = B2;
-    B2 = element.points[i2 + 1];
-  }
-  const shape = ShapeCache.get(element);
-  if (shape && shape.sets.length) {
-    return element.fillStyle === "solid" ? hitTestCurveInside(shape, x, y, "round") : hitTestRoughShape(shape, x, y, threshold);
-  }
-  return false;
+    ),
+    gap: Math.max(
+      1,
+      distanceToBindableElement(hoveredElement, edgePoint, elementsMap)
+    )
+  };
 };
-var hitTestLinear = (args) => {
-  const { element, threshold } = args;
-  if (!ShapeCache.get(element)) {
-    return false;
-  }
-  const [point2, pointAbs, hwidth, hheight] = pointRelativeToElement(
-    args.element,
-    args.point,
-    args.elementsMap
+var updateBoundElements = (changedElement, elementsMap, options) => {
+  const boundLinearElements = (changedElement.boundElements ?? []).filter(
+    (el) => el.type === "arrow"
   );
-  const side1 = equation(0, 1, -hheight);
-  const side2 = equation(1, 0, -hwidth);
-  if (!isInsideCheck(distanceToLine(pointAbs, side1), threshold) || !isInsideCheck(distanceToLine(pointAbs, side2), threshold)) {
-    return false;
-  }
-  const [relX, relY] = toTuple(point2);
-  const shape = ShapeCache.get(element);
-  if (!shape) {
-    return false;
+  if (boundLinearElements.length === 0) {
+    return;
   }
-  if (args.check === isInsideCheck) {
-    const hit = shape.some(
-      (subshape) => hitTestCurveInside(
-        subshape,
-        relX,
-        relY,
-        element.roundness ? "round" : "sharp"
-      )
+  const { newSize, simultaneouslyUpdated } = options ?? {};
+  const simultaneouslyUpdatedElementIds = getSimultaneouslyUpdatedElementIds(
+    simultaneouslyUpdated
+  );
+  const scene = Scene_default.getScene(changedElement);
+  getNonDeletedElements(
+    scene,
+    boundLinearElements.map((el) => el.id)
+  ).forEach((element) => {
+    if (!isLinearElement(element)) {
+      return;
+    }
+    const bindableElement = changedElement;
+    if (!doesNeedUpdate(element, bindableElement)) {
+      return;
+    }
+    const startBinding = maybeCalculateNewGapWhenScaling(
+      bindableElement,
+      element.startBinding,
+      newSize
     );
-    if (hit) {
-      return true;
+    const endBinding = maybeCalculateNewGapWhenScaling(
+      bindableElement,
+      element.endBinding,
+      newSize
+    );
+    if (simultaneouslyUpdatedElementIds.has(element.id)) {
+      mutateElement(element, { startBinding, endBinding });
+      return;
     }
-  }
-  return shape.some(
-    (subshape) => hitTestRoughShape(subshape, relX, relY, threshold)
-  );
-};
-var pointRelativeToElement = (element, pointTuple, elementsMap) => {
-  const point2 = from(pointTuple);
-  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
-  const center = coordsCenter(x1, y1, x2, y2);
-  const rotate3 = rotation(center, element.angle);
-  const pointRotated = apply(rotate3, point2);
-  const pointRelToCenter = sub(pointRotated, from2(center));
-  const pointRelToCenterAbs = abs(pointRelToCenter);
-  const elementPos = offset(element.x, element.y);
-  const pointRelToPos = sub(pointRotated, elementPos);
-  const halfWidth = (x2 - x1) / 2;
-  const halfHeight = (y2 - y1) / 2;
-  return [pointRelToPos, pointRelToCenterAbs, halfWidth, halfHeight];
-};
-var pointRelativeToDivElement = (pointTuple, rectangle2) => {
-  const point2 = from(pointTuple);
-  const [x1, y1, x2, y2] = getRectangleBoxAbsoluteCoords(rectangle2);
-  const center = coordsCenter(x1, y1, x2, y2);
-  const rotate3 = rotation(center, rectangle2.angle);
-  const pointRotated = apply(rotate3, point2);
-  const pointRelToCenter = sub(pointRotated, from2(center));
-  const pointRelToCenterAbs = abs(pointRelToCenter);
-  const elementPos = offset(rectangle2.x, rectangle2.y);
-  const pointRelToPos = sub(pointRotated, elementPos);
-  const halfWidth = (x2 - x1) / 2;
-  const halfHeight = (y2 - y1) / 2;
-  return [pointRelToPos, pointRelToCenterAbs, halfWidth, halfHeight];
-};
-var relativizationToElementCenter = (element, elementsMap) => {
-  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
-  const center = coordsCenter(x1, y1, x2, y2);
-  const rotate3 = rotation(center, element.angle);
-  const translate2 = reverse(
-    translation(from2(center))
-  );
-  return compose(rotate3, translate2);
+    updateBoundPoint(
+      element,
+      "start",
+      startBinding,
+      changedElement,
+      elementsMap
+    );
+    updateBoundPoint(
+      element,
+      "end",
+      endBinding,
+      changedElement,
+      elementsMap
+    );
+    const boundText = getBoundTextElement(
+      element,
+      scene.getNonDeletedElementsMap()
+    );
+    if (boundText) {
+      handleBindTextResize(element, scene.getNonDeletedElementsMap(), false);
+    }
+  });
 };
-var coordsCenter = (x1, y1, x2, y2) => {
-  return point((x1 + x2) / 2, (y1 + y2) / 2);
+var doesNeedUpdate = (boundElement, changedElement) => {
+  return boundElement.startBinding?.elementId === changedElement.id || boundElement.endBinding?.elementId === changedElement.id;
 };
-var determineFocusDistance = (element, a2, b2, elementsMap) => {
-  const relateToCenter = relativizationToElementCenter(element, elementsMap);
-  const aRel = apply(relateToCenter, from(a2));
-  const bRel = apply(relateToCenter, from(b2));
-  const line2 = through(aRel, bRel);
-  const q = element.height / element.width;
-  const hwidth = element.width / 2;
-  const hheight = element.height / 2;
-  const n2 = line2[2];
-  const m = line2[3];
-  const c = line2[1];
-  const mabs = Math.abs(m);
-  const nabs = Math.abs(n2);
-  let ret;
-  switch (element.type) {
-    case "rectangle":
-    case "image":
-    case "text":
-    case "iframe":
-    case "embeddable":
-    case "frame":
-    case "magicframe":
-      ret = c / (hwidth * (nabs + q * mabs));
-      break;
-    case "diamond":
-      ret = mabs < nabs ? c / (nabs * hwidth) : c / (mabs * hheight);
-      break;
-    case "ellipse":
-      ret = c / (hwidth * Math.sqrt(n2 ** 2 + q ** 2 * m ** 2));
-      break;
-  }
-  return ret || 0;
+var getSimultaneouslyUpdatedElementIds = (simultaneouslyUpdated) => {
+  return new Set((simultaneouslyUpdated || []).map((element) => element.id));
 };
-var determineFocusPoint = (element, focus, adjecentPoint, elementsMap) => {
-  if (focus === 0) {
-    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
-    const center = coordsCenter(x1, y1, x2, y2);
-    return toTuple(center);
+var updateBoundPoint = (linearElement, startOrEnd, binding, changedElement, elementsMap) => {
+  if (binding == null || // We only need to update the other end if this is a 2 point line element
+  binding.elementId !== changedElement.id && linearElement.points.length > 2) {
+    return;
   }
-  const relateToCenter = relativizationToElementCenter(element, elementsMap);
-  const adjecentPointRel = apply(
-    relateToCenter,
-    from(adjecentPoint)
+  const bindingElement = Scene_default.getScene(linearElement).getElement(
+    binding.elementId
   );
-  const reverseRelateToCenter = reverse(relateToCenter);
-  let point2;
-  switch (element.type) {
-    case "rectangle":
-    case "image":
-    case "text":
-    case "diamond":
-    case "iframe":
-    case "embeddable":
-    case "frame":
-    case "magicframe":
-      point2 = findFocusPointForRectangulars(element, focus, adjecentPointRel);
-      break;
-    case "ellipse":
-      point2 = findFocusPointForEllipse(element, focus, adjecentPointRel);
-      break;
+  if (bindingElement == null) {
+    return;
   }
-  return toTuple(apply(reverseRelateToCenter, point2));
-};
-var intersectElementWithLine = (element, a2, b2, gap = 0, elementsMap) => {
-  const relateToCenter = relativizationToElementCenter(element, elementsMap);
-  const aRel = apply(relateToCenter, from(a2));
-  const bRel = apply(relateToCenter, from(b2));
-  const line2 = through(aRel, bRel);
-  const reverseRelateToCenter = reverse(relateToCenter);
-  const intersections = getSortedElementLineIntersections(
-    element,
-    line2,
-    aRel,
-    gap
+  const direction = startOrEnd === "start" ? -1 : 1;
+  const edgePointIndex = direction === -1 ? 0 : linearElement.points.length - 1;
+  const adjacentPointIndex = edgePointIndex - direction;
+  const adjacentPoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(
+    linearElement,
+    adjacentPointIndex,
+    elementsMap
   );
-  return intersections.map(
-    (point2) => toTuple(apply(reverseRelateToCenter, point2))
+  const focusPointAbsolute = determineFocusPoint(
+    bindingElement,
+    binding.focus,
+    adjacentPoint,
+    elementsMap
   );
-};
-var getSortedElementLineIntersections = (element, line2, nearPoint, gap = 0) => {
-  let intersections;
-  switch (element.type) {
-    case "rectangle":
-    case "image":
-    case "text":
-    case "diamond":
-    case "iframe":
-    case "embeddable":
-    case "frame":
-    case "magicframe":
-      const corners = getCorners(element);
-      intersections = corners.flatMap((point2, i2) => {
-        const edge = [point2, corners[(i2 + 1) % 4]];
-        return intersectSegment(line2, offsetSegment(edge, gap));
-      }).concat(
-        corners.flatMap((point2) => getCircleIntersections(point2, gap, line2))
-      );
-      break;
-    case "ellipse":
-      intersections = getEllipseIntersections(element, gap, line2);
-      break;
-  }
-  if (intersections.length < 2) {
-    return [];
+  let newEdgePoint;
+  if (binding.gap === 0) {
+    newEdgePoint = focusPointAbsolute;
+  } else {
+    const intersections = intersectElementWithLine(
+      bindingElement,
+      adjacentPoint,
+      focusPointAbsolute,
+      binding.gap,
+      elementsMap
+    );
+    if (intersections.length === 0) {
+      newEdgePoint = focusPointAbsolute;
+    } else {
+      newEdgePoint = intersections[0];
+    }
   }
-  const sortedIntersections = intersections.sort(
-    (i1, i2) => distance3(i1, nearPoint) - distance3(i2, nearPoint)
+  LinearElementEditor.movePoints(
+    linearElement,
+    [
+      {
+        index: edgePointIndex,
+        point: LinearElementEditor.pointFromAbsoluteCoords(
+          linearElement,
+          newEdgePoint,
+          elementsMap
+        )
+      }
+    ],
+    { [startOrEnd === "start" ? "startBinding" : "endBinding"]: binding }
   );
-  return [
-    sortedIntersections[0],
-    sortedIntersections[sortedIntersections.length - 1]
-  ];
-};
-var getCorners = (element, scale = 1) => {
-  const hx = scale * element.width / 2;
-  const hy = scale * element.height / 2;
-  switch (element.type) {
-    case "rectangle":
-    case "image":
-    case "text":
-    case "iframe":
-    case "embeddable":
-    case "frame":
-    case "magicframe":
-      return [
-        point(hx, hy),
-        point(hx, -hy),
-        point(-hx, -hy),
-        point(-hx, hy)
-      ];
-    case "diamond":
-      return [
-        point(0, hy),
-        point(hx, 0),
-        point(0, -hy),
-        point(-hx, 0)
-      ];
-  }
 };
-var intersectSegment = (line2, segment) => {
-  const [a2, b2] = segment;
-  const aDist = distanceToLine(a2, line2);
-  const bDist = distanceToLine(b2, line2);
-  if (aDist * bDist >= 0) {
-    return [];
+var maybeCalculateNewGapWhenScaling = (changedElement, currentBinding, newSize) => {
+  if (currentBinding == null || newSize == null) {
+    return currentBinding;
   }
-  return [intersect(line2, through(a2, b2))];
-};
-var offsetSegment = (segment, distance5) => {
-  const [a2, b2] = segment;
-  const offset2 = translationOrthogonal(
-    fromTo(a2, b2),
-    distance5
+  const { gap, focus, elementId } = currentBinding;
+  const { width: newWidth, height: newHeight } = newSize;
+  const { width, height } = changedElement;
+  const newGap = Math.max(
+    1,
+    Math.min(
+      maxBindingGap(changedElement, newWidth, newHeight),
+      gap * (newWidth < newHeight ? newWidth / width : newHeight / height)
+    )
   );
-  return [apply(offset2, a2), apply(offset2, b2)];
+  return { elementId, gap: newGap, focus };
 };
-var getEllipseIntersections = (element, gap, line2) => {
-  const a2 = element.width / 2 + gap;
-  const b2 = element.height / 2 + gap;
-  const m = line2[2];
-  const n2 = line2[3];
-  const c = line2[1];
-  const squares = a2 * a2 * m * m + b2 * b2 * n2 * n2;
-  const discr = squares - c * c;
-  if (squares === 0 || discr <= 0) {
-    return [];
-  }
-  const discrRoot = Math.sqrt(discr);
-  const xn = -a2 * a2 * m * c;
-  const yn = -b2 * b2 * n2 * c;
-  return [
-    point(
-      (xn + a2 * b2 * n2 * discrRoot) / squares,
-      (yn - a2 * b2 * m * discrRoot) / squares
-    ),
-    point(
-      (xn - a2 * b2 * n2 * discrRoot) / squares,
-      (yn + a2 * b2 * m * discrRoot) / squares
-    )
-  ];
+var getEligibleElementsForBinding = (selectedElements, app) => {
+  const includedElementIds = new Set(selectedElements.map(({ id }) => id));
+  return selectedElements.flatMap(
+    (selectedElement) => isBindingElement(selectedElement, false) ? getElligibleElementsForBindingElement(
+      selectedElement,
+      app
+    ).filter(
+      (element) => !includedElementIds.has(element.id)
+    ) : isBindableElement(selectedElement, false) ? getElligibleElementsForBindableElementAndWhere(
+      selectedElement,
+      app
+    ).filter((binding) => !includedElementIds.has(binding[0].id)) : []
+  );
 };
-var getCircleIntersections = (center, radius, line2) => {
-  if (radius === 0) {
-    return distanceToLine(line2, center) === 0 ? [center] : [];
-  }
-  const m = line2[2];
-  const n2 = line2[3];
-  const c = line2[1];
-  const [a2, b2] = toTuple(center);
-  const r = radius;
-  const squares = m * m + n2 * n2;
-  const discr = r * r * squares - (m * a2 + n2 * b2 + c) ** 2;
-  if (squares === 0 || discr <= 0) {
-    return [];
-  }
-  const discrRoot = Math.sqrt(discr);
-  const xn = a2 * n2 * n2 - b2 * m * n2 - m * c;
-  const yn = b2 * m * m - a2 * m * n2 - n2 * c;
+var getElligibleElementsForBindingElement = (linearElement, app) => {
   return [
-    point((xn + n2 * discrRoot) / squares, (yn - m * discrRoot) / squares),
-    point((xn - n2 * discrRoot) / squares, (yn + m * discrRoot) / squares)
-  ];
+    getElligibleElementForBindingElement(linearElement, "start", app),
+    getElligibleElementForBindingElement(linearElement, "end", app)
+  ].filter(
+    (element) => element != null
+  );
 };
-var findFocusPointForEllipse = (ellipse2, relativeDistance, point2) => {
-  const relativeDistanceAbs = Math.abs(relativeDistance);
-  const a2 = ellipse2.width * relativeDistanceAbs / 2;
-  const b2 = ellipse2.height * relativeDistanceAbs / 2;
-  const orientation = Math.sign(relativeDistance);
-  const [px, pyo] = toTuple(point2);
-  const py = pyo === 0 ? 1e-4 : pyo;
-  const squares = px ** 2 * b2 ** 2 + py ** 2 * a2 ** 2;
-  const m = (-px * b2 ** 2 + orientation * py * Math.sqrt(Math.max(0, squares - a2 ** 2 * b2 ** 2))) / squares;
-  let n2 = (-m * px - 1) / py;
-  if (n2 === 0) {
-    n2 = (Object.is(n2, -0) ? -1 : 1) * 0.01;
-  }
-  const x = -(a2 ** 2 * m) / (n2 ** 2 * b2 ** 2 + m ** 2 * a2 ** 2);
-  return point(x, (-m * x - 1) / n2);
+var getElligibleElementForBindingElement = (linearElement, startOrEnd, app) => {
+  return getHoveredElementForBinding(
+    getLinearElementEdgeCoors(
+      linearElement,
+      startOrEnd,
+      app.scene.getNonDeletedElementsMap()
+    ),
+    app
+  );
 };
-var findFocusPointForRectangulars = (element, relativeDistance, point2) => {
-  const relativeDistanceAbs = Math.abs(relativeDistance);
-  const orientation = Math.sign(relativeDistance);
-  const corners = getCorners(element, relativeDistanceAbs);
-  let maxDistance = 0;
-  let tangentPoint = null;
-  corners.forEach((corner) => {
-    const distance5 = orientation * through(point2, corner)[1];
-    if (distance5 > maxDistance) {
-      maxDistance = distance5;
-      tangentPoint = corner;
-    }
-  });
-  return tangentPoint;
+var getLinearElementEdgeCoors = (linearElement, startOrEnd, elementsMap) => {
+  const index = startOrEnd === "start" ? 0 : -1;
+  return tupleToCoors(
+    LinearElementEditor.getPointAtIndexGlobalCoordinates(
+      linearElement,
+      index,
+      elementsMap
+    )
+  );
 };
-var pointInBezierEquation = (p0, p1, p2, p3, [mx, my], lineThreshold) => {
-  const equation2 = (t3, idx) => Math.pow(1 - t3, 3) * p3[idx] + 3 * t3 * Math.pow(1 - t3, 2) * p2[idx] + 3 * Math.pow(t3, 2) * (1 - t3) * p1[idx] + p0[idx] * Math.pow(t3, 3);
-  let t2 = 0;
-  while (t2 <= 1) {
-    const tx = equation2(t2, 0);
-    const ty = equation2(t2, 1);
-    const diff = Math.sqrt(Math.pow(tx - mx, 2) + Math.pow(ty - my, 2));
-    if (diff < lineThreshold) {
-      return true;
+var getElligibleElementsForBindableElementAndWhere = (bindableElement, app) => {
+  const scene = Scene_default.getScene(bindableElement);
+  return scene.getNonDeletedElements().map((element) => {
+    if (!isBindingElement(element, false)) {
+      return null;
     }
-    t2 += 0.01;
-  }
-  return false;
+    const canBindStart = isLinearElementEligibleForNewBindingByBindable(
+      element,
+      "start",
+      bindableElement,
+      scene.getNonDeletedElementsMap(),
+      app
+    );
+    const canBindEnd = isLinearElementEligibleForNewBindingByBindable(
+      element,
+      "end",
+      bindableElement,
+      scene.getNonDeletedElementsMap(),
+      app
+    );
+    if (!canBindStart && !canBindEnd) {
+      return null;
+    }
+    return [
+      element,
+      canBindStart && canBindEnd ? "both" : canBindStart ? "start" : "end",
+      bindableElement
+    ];
+  }).filter((maybeElement) => maybeElement != null);
 };
-var hitTestCurveInside = (drawable, x, y, roundness) => {
-  const ops = getCurvePathOps(drawable);
-  const points = [];
-  let odd = false;
-  for (const operation of ops) {
-    if (operation.op === "move") {
-      odd = !odd;
-      if (odd) {
-        points.push([operation.data[0], operation.data[1]]);
+var isLinearElementEligibleForNewBindingByBindable = (linearElement, startOrEnd, bindableElement, elementsMap, app) => {
+  const existingBinding = linearElement[startOrEnd === "start" ? "startBinding" : "endBinding"];
+  return existingBinding == null && !isLinearElementSimpleAndAlreadyBoundOnOppositeEdge(
+    linearElement,
+    bindableElement,
+    startOrEnd
+  ) && bindingBorderTest(
+    bindableElement,
+    getLinearElementEdgeCoors(linearElement, startOrEnd, elementsMap),
+    app
+  );
+};
+var fixBindingsAfterDuplication = (sceneElements, oldElements, oldIdToDuplicatedId, duplicatesServeAsOld) => {
+  const allBoundElementIds = /* @__PURE__ */ new Set();
+  const allBindableElementIds = /* @__PURE__ */ new Set();
+  const shouldReverseRoles = duplicatesServeAsOld === "duplicatesServeAsOld";
+  oldElements.forEach((oldElement) => {
+    const { boundElements } = oldElement;
+    if (boundElements != null && boundElements.length > 0) {
+      boundElements.forEach((boundElement) => {
+        if (shouldReverseRoles && !oldIdToDuplicatedId.has(boundElement.id)) {
+          allBoundElementIds.add(boundElement.id);
+        }
+      });
+      allBindableElementIds.add(oldIdToDuplicatedId.get(oldElement.id));
+    }
+    if (isBindingElement(oldElement)) {
+      if (oldElement.startBinding != null) {
+        const { elementId } = oldElement.startBinding;
+        if (shouldReverseRoles && !oldIdToDuplicatedId.has(elementId)) {
+          allBindableElementIds.add(elementId);
+        }
       }
-    } else if (operation.op === "bcurveTo") {
-      if (odd) {
-        points.push([operation.data[0], operation.data[1]]);
-        points.push([operation.data[2], operation.data[3]]);
-        points.push([operation.data[4], operation.data[5]]);
+      if (oldElement.endBinding != null) {
+        const { elementId } = oldElement.endBinding;
+        if (shouldReverseRoles && !oldIdToDuplicatedId.has(elementId)) {
+          allBindableElementIds.add(elementId);
+        }
       }
-    } else if (operation.op === "lineTo") {
-      if (odd) {
-        points.push([operation.data[0], operation.data[1]]);
+      if (oldElement.startBinding != null || oldElement.endBinding != null) {
+        allBoundElementIds.add(oldIdToDuplicatedId.get(oldElement.id));
       }
     }
-  }
-  if (points.length >= 4) {
-    if (roundness === "sharp") {
-      return isPointInPolygon(points, x, y);
+  });
+  sceneElements.filter(
+    ({ id }) => allBoundElementIds.has(id)
+  ).forEach((element) => {
+    const { startBinding, endBinding } = element;
+    mutateElement(element, {
+      startBinding: newBindingAfterDuplication(
+        startBinding,
+        oldIdToDuplicatedId
+      ),
+      endBinding: newBindingAfterDuplication(endBinding, oldIdToDuplicatedId)
+    });
+  });
+  sceneElements.filter(({ id }) => allBindableElementIds.has(id)).forEach((bindableElement) => {
+    const { boundElements } = bindableElement;
+    if (boundElements != null && boundElements.length > 0) {
+      mutateElement(bindableElement, {
+        boundElements: boundElements.map(
+          (boundElement) => oldIdToDuplicatedId.has(boundElement.id) ? {
+            id: oldIdToDuplicatedId.get(boundElement.id),
+            type: boundElement.type
+          } : boundElement
+        )
+      });
     }
-    const polygonPoints = pointsOnBezierCurves2(points, 10, 5);
-    return isPointInPolygon(polygonPoints, x, y);
+  });
+};
+var newBindingAfterDuplication = (binding, oldIdToDuplicatedId) => {
+  if (binding == null) {
+    return null;
   }
-  return false;
+  const { elementId, focus, gap } = binding;
+  return {
+    focus,
+    gap,
+    elementId: oldIdToDuplicatedId.get(elementId) ?? elementId
+  };
 };
-var hitTestRoughShape = (drawable, x, y, lineThreshold) => {
-  const ops = getCurvePathOps(drawable);
-  let currentP = [0, 0];
-  return ops.some(({ op, data }, idx) => {
-    if (op === "move") {
-      currentP = data;
-    } else if (op === "bcurveTo") {
-      const p1 = [data[0], data[1]];
-      const p2 = [data[2], data[3]];
-      const p3 = [data[4], data[5]];
-      const p0 = currentP;
-      currentP = p3;
-      const retVal = pointInBezierEquation(
-        p0,
-        p1,
-        p2,
-        p3,
-        [x, y],
-        lineThreshold
-      );
-      return retVal;
-    } else if (op === "lineTo") {
-      return hitTestCurveInside(drawable, x, y, "sharp");
-    } else if (op === "qcurveTo") {
-      console.warn("qcurveTo is not implemented yet");
+var fixBindingsAfterDeletion = (sceneElements, deletedElements) => {
+  const deletedElementIds = new Set(
+    deletedElements.map((element) => element.id)
+  );
+  const affectedElements = /* @__PURE__ */ new Set();
+  deletedElements.forEach((deletedElement) => {
+    if (isBindableElement(deletedElement)) {
+      deletedElement.boundElements?.forEach((element) => {
+        if (!deletedElementIds.has(element.id)) {
+          affectedElements.add(element.id);
+        }
+      });
+    } else if (isBindingElement(deletedElement)) {
+      if (deletedElement.startBinding) {
+        affectedElements.add(deletedElement.startBinding.elementId);
+      }
+      if (deletedElement.endBinding) {
+        affectedElements.add(deletedElement.endBinding.elementId);
+      }
     }
-    return false;
   });
-};
-
-// keys.ts
-init_define_import_meta_env();
-var CODES = {
-  EQUAL: "Equal",
-  MINUS: "Minus",
-  NUM_ADD: "NumpadAdd",
-  NUM_SUBTRACT: "NumpadSubtract",
-  NUM_ZERO: "Numpad0",
-  BRACKET_RIGHT: "BracketRight",
-  BRACKET_LEFT: "BracketLeft",
-  ONE: "Digit1",
-  TWO: "Digit2",
-  THREE: "Digit3",
-  NINE: "Digit9",
-  QUOTE: "Quote",
-  ZERO: "Digit0",
-  SLASH: "Slash",
-  C: "KeyC",
-  D: "KeyD",
-  H: "KeyH",
-  V: "KeyV",
-  Z: "KeyZ",
-  R: "KeyR",
-  S: "KeyS"
-};
-var KEYS = {
-  ARROW_DOWN: "ArrowDown",
-  ARROW_LEFT: "ArrowLeft",
-  ARROW_RIGHT: "ArrowRight",
-  ARROW_UP: "ArrowUp",
-  PAGE_UP: "PageUp",
-  PAGE_DOWN: "PageDown",
-  BACKSPACE: "Backspace",
-  ALT: "Alt",
-  CTRL_OR_CMD: isDarwin ? "metaKey" : "ctrlKey",
-  DELETE: "Delete",
-  ENTER: "Enter",
-  ESCAPE: "Escape",
-  QUESTION_MARK: "?",
-  SPACE: " ",
-  TAB: "Tab",
-  CHEVRON_LEFT: "<",
-  CHEVRON_RIGHT: ">",
-  PERIOD: ".",
-  COMMA: ",",
-  SUBTRACT: "-",
-  SLASH: "/",
-  A: "a",
-  C: "c",
-  D: "d",
-  E: "e",
-  F: "f",
-  G: "g",
-  H: "h",
-  I: "i",
-  L: "l",
-  O: "o",
-  P: "p",
-  Q: "q",
-  R: "r",
-  S: "s",
-  T: "t",
-  V: "v",
-  X: "x",
-  Y: "y",
-  Z: "z",
-  K: "k",
-  W: "w",
-  0: "0",
-  1: "1",
-  2: "2",
-  3: "3",
-  4: "4",
-  5: "5",
-  6: "6",
-  7: "7",
-  8: "8",
-  9: "9"
-};
-var isArrowKey = (key) => key === KEYS.ARROW_LEFT || key === KEYS.ARROW_RIGHT || key === KEYS.ARROW_DOWN || key === KEYS.ARROW_UP;
-var shouldResizeFromCenter = (event) => event.altKey;
-var shouldMaintainAspectRatio = (event) => event.shiftKey;
-var shouldRotateWithDiscreteAngle = (event) => event.shiftKey;
-
-// element/binding.ts
-var shouldEnableBindingForPointerEvent = (event) => {
-  return !event[KEYS.CTRL_OR_CMD];
-};
-var isBindingEnabled = (appState) => {
-  return appState.isBindingEnabled;
-};
-var getNonDeletedElements = (scene, ids) => {
-  const result = [];
-  ids.forEach((id) => {
-    const element = scene.getNonDeletedElement(id);
-    if (element != null) {
-      result.push(element);
-    }
-  });
-  return result;
-};
-var bindOrUnbindLinearElement = (linearElement, startBindingElement, endBindingElement, elementsMap) => {
-  const boundToElementIds = /* @__PURE__ */ new Set();
-  const unboundFromElementIds = /* @__PURE__ */ new Set();
-  bindOrUnbindLinearElementEdge(
-    linearElement,
-    startBindingElement,
-    endBindingElement,
-    "start",
-    boundToElementIds,
-    unboundFromElementIds,
-    elementsMap
-  );
-  bindOrUnbindLinearElementEdge(
-    linearElement,
-    endBindingElement,
-    startBindingElement,
-    "end",
-    boundToElementIds,
-    unboundFromElementIds,
-    elementsMap
-  );
-  const onlyUnbound = Array.from(unboundFromElementIds).filter(
-    (id) => !boundToElementIds.has(id)
-  );
-  getNonDeletedElements(Scene_default.getScene(linearElement), onlyUnbound).forEach(
-    (element) => {
+  sceneElements.filter(({ id }) => affectedElements.has(id)).forEach((element) => {
+    if (isBindableElement(element)) {
       mutateElement(element, {
-        boundElements: element.boundElements?.filter(
-          (element2) => element2.type !== "arrow" || element2.id !== linearElement.id
+        boundElements: newBoundElementsAfterDeletion(
+          element.boundElements,
+          deletedElementIds
+        )
+      });
+    } else if (isBindingElement(element)) {
+      mutateElement(element, {
+        startBinding: newBindingAfterDeletion(
+          element.startBinding,
+          deletedElementIds
+        ),
+        endBinding: newBindingAfterDeletion(
+          element.endBinding,
+          deletedElementIds
         )
       });
     }
-  );
+  });
 };
-var bindOrUnbindLinearElementEdge = (linearElement, bindableElement, otherEdgeBindableElement, startOrEnd, boundToElementIds, unboundFromElementIds, elementsMap) => {
-  if (bindableElement !== "keep") {
-    if (bindableElement != null) {
-      if (otherEdgeBindableElement == null || (otherEdgeBindableElement === "keep" ? !isLinearElementSimpleAndAlreadyBoundOnOppositeEdge(
-        linearElement,
-        bindableElement,
-        startOrEnd
-      ) : startOrEnd === "start" || otherEdgeBindableElement.id !== bindableElement.id)) {
-        bindLinearElement(
-          linearElement,
-          bindableElement,
-          startOrEnd,
-          elementsMap
-        );
-        boundToElementIds.add(bindableElement.id);
-      }
-    } else {
-      const unbound = unbindLinearElement(linearElement, startOrEnd);
-      if (unbound != null) {
-        unboundFromElementIds.add(unbound);
-      }
-    }
+var newBindingAfterDeletion = (binding, deletedElementIds) => {
+  if (binding == null || deletedElementIds.has(binding.elementId)) {
+    return null;
   }
+  return binding;
 };
-var bindOrUnbindSelectedElements = (selectedElements, elements, elementsMap) => {
-  selectedElements.forEach((selectedElement) => {
-    if (isBindingElement(selectedElement)) {
-      bindOrUnbindLinearElement(
-        selectedElement,
-        getElligibleElementForBindingElement(
-          selectedElement,
-          "start",
-          elements,
-          elementsMap
-        ),
-        getElligibleElementForBindingElement(
-          selectedElement,
-          "end",
-          elements,
-          elementsMap
-        ),
-        elementsMap
-      );
-    } else if (isBindableElement(selectedElement)) {
-      maybeBindBindableElement(selectedElement, elementsMap);
-    }
-  });
+var newBoundElementsAfterDeletion = (boundElements, deletedElementIds) => {
+  if (!boundElements) {
+    return null;
+  }
+  return boundElements.filter((ele) => !deletedElementIds.has(ele.id));
 };
-var maybeBindBindableElement = (bindableElement, elementsMap) => {
-  getElligibleElementsForBindableElementAndWhere(
-    bindableElement,
+var bindingBorderTest = (element, { x, y }, app) => {
+  const threshold = maxBindingGap(element, element.width, element.height);
+  const shape = app.getElementShape(element);
+  return isPointOnShape([x, y], shape, threshold);
+};
+var maxBindingGap = (element, elementWidth, elementHeight) => {
+  const shapeRatio = element.type === "diamond" ? 1 / Math.sqrt(2) : 1;
+  const smallerDimension = shapeRatio * Math.min(elementWidth, elementHeight);
+  return Math.max(16, Math.min(0.25 * smallerDimension, 32));
+};
+var distanceToBindableElement = (element, point2, elementsMap) => {
+  switch (element.type) {
+    case "rectangle":
+    case "image":
+    case "text":
+    case "iframe":
+    case "embeddable":
+    case "frame":
+    case "magicframe":
+      return distanceToRectangle(element, point2, elementsMap);
+    case "diamond":
+      return distanceToDiamond(element, point2, elementsMap);
+    case "ellipse":
+      return distanceToEllipse2(element, point2, elementsMap);
+  }
+};
+var distanceToRectangle = (element, point2, elementsMap) => {
+  const [, pointRel, hwidth, hheight] = pointRelativeToElement(
+    element,
+    point2,
     elementsMap
-  ).forEach(
-    ([linearElement, where]) => bindOrUnbindLinearElement(
-      linearElement,
-      where === "end" ? "keep" : bindableElement,
-      where === "start" ? "keep" : bindableElement,
-      elementsMap
-    )
+  );
+  return Math.max(
+    distanceToLine(pointRel, equation(0, 1, -hheight)),
+    distanceToLine(pointRel, equation(1, 0, -hwidth))
   );
 };
-var maybeBindLinearElement = (linearElement, appState, scene, pointerCoords, elementsMap) => {
-  if (appState.startBoundElement != null) {
-    bindLinearElement(
-      linearElement,
-      appState.startBoundElement,
-      "start",
-      elementsMap
-    );
-  }
-  const hoveredElement = getHoveredElementForBinding(
-    pointerCoords,
-    scene.getNonDeletedElements(),
+var distanceToDiamond = (element, point2, elementsMap) => {
+  const [, pointRel, hwidth, hheight] = pointRelativeToElement(
+    element,
+    point2,
     elementsMap
   );
-  if (hoveredElement != null && !isLinearElementSimpleAndAlreadyBoundOnOppositeEdge(
-    linearElement,
-    hoveredElement,
-    "end"
-  )) {
-    bindLinearElement(linearElement, hoveredElement, "end", elementsMap);
-  }
+  const side = equation(hheight, hwidth, -hheight * hwidth);
+  return distanceToLine(pointRel, side);
 };
-var bindLinearElement = (linearElement, hoveredElement, startOrEnd, elementsMap) => {
-  mutateElement(linearElement, {
-    [startOrEnd === "start" ? "startBinding" : "endBinding"]: {
-      elementId: hoveredElement.id,
-      ...calculateFocusAndGap(
-        linearElement,
-        hoveredElement,
-        startOrEnd,
-        elementsMap
-      )
-    }
-  });
-  const boundElementsMap = arrayToMap(hoveredElement.boundElements || []);
-  if (!boundElementsMap.has(linearElement.id)) {
-    mutateElement(hoveredElement, {
-      boundElements: (hoveredElement.boundElements || []).concat({
-        id: linearElement.id,
-        type: "arrow"
-      })
-    });
-  }
+var distanceToEllipse2 = (element, point2, elementsMap) => {
+  const [pointRel, tangent] = ellipseParamsForTest(element, point2, elementsMap);
+  return -sign(tangent) * distanceToLine(pointRel, tangent);
 };
-var isLinearElementSimpleAndAlreadyBoundOnOppositeEdge = (linearElement, bindableElement, startOrEnd) => {
-  const otherBinding = linearElement[startOrEnd === "start" ? "endBinding" : "startBinding"];
-  return isLinearElementSimpleAndAlreadyBound(
-    linearElement,
-    otherBinding?.elementId,
-    bindableElement
+var ellipseParamsForTest = (element, point2, elementsMap) => {
+  const [, pointRel, hwidth, hheight] = pointRelativeToElement(
+    element,
+    point2,
+    elementsMap
   );
-};
-var isLinearElementSimpleAndAlreadyBound = (linearElement, alreadyBoundToId, bindableElement) => {
-  return alreadyBoundToId === bindableElement.id && linearElement.points.length < 3;
-};
-var unbindLinearElements = (elements, elementsMap) => {
-  elements.forEach((element) => {
-    if (isBindingElement(element)) {
-      bindOrUnbindLinearElement(element, null, null, elementsMap);
-    }
+  const [px, py] = toTuple(pointRel);
+  let tx = 0.707;
+  let ty = 0.707;
+  const a2 = hwidth;
+  const b2 = hheight;
+  [0, 1, 2, 3].forEach((_) => {
+    const xx = a2 * tx;
+    const yy = b2 * ty;
+    const ex = (a2 * a2 - b2 * b2) * tx ** 3 / a2;
+    const ey = (b2 * b2 - a2 * a2) * ty ** 3 / b2;
+    const rx = xx - ex;
+    const ry = yy - ey;
+    const qx = px - ex;
+    const qy = py - ey;
+    const r = Math.hypot(ry, rx);
+    const q = Math.hypot(qy, qx);
+    tx = Math.min(1, Math.max(0, (qx * r / q + ex) / a2));
+    ty = Math.min(1, Math.max(0, (qy * r / q + ey) / b2));
+    const t2 = Math.hypot(ty, tx);
+    tx /= t2;
+    ty /= t2;
   });
+  const closestPoint = point(a2 * tx, b2 * ty);
+  const tangent = orthogonalThrough(pointRel, closestPoint);
+  return [pointRel, tangent];
 };
-var unbindLinearElement = (linearElement, startOrEnd) => {
-  const field = startOrEnd === "start" ? "startBinding" : "endBinding";
-  const binding = linearElement[field];
-  if (binding == null) {
-    return null;
-  }
-  mutateElement(linearElement, { [field]: null });
-  return binding.elementId;
+var pointRelativeToElement = (element, pointTuple, elementsMap) => {
+  const point2 = from(pointTuple);
+  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
+  const center = coordsCenter(x1, y1, x2, y2);
+  const rotate4 = rotation(center, element.angle);
+  const pointRotated = apply(rotate4, point2);
+  const pointRelToCenter = sub(pointRotated, from2(center));
+  const pointRelToCenterAbs = abs(pointRelToCenter);
+  const elementPos = offset(element.x, element.y);
+  const pointRelToPos = sub(pointRotated, elementPos);
+  const halfWidth = (x2 - x1) / 2;
+  const halfHeight = (y2 - y1) / 2;
+  return [pointRelToPos, pointRelToCenterAbs, halfWidth, halfHeight];
 };
-var getHoveredElementForBinding = (pointerCoords, elements, elementsMap) => {
-  const hoveredElement = getElementAtPosition(
-    elements,
-    (element) => isBindableElement(element, false) && bindingBorderTest(element, pointerCoords, elementsMap)
+var relativizationToElementCenter = (element, elementsMap) => {
+  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
+  const center = coordsCenter(x1, y1, x2, y2);
+  const rotate4 = rotation(center, element.angle);
+  const translate2 = reverse(
+    translation(from2(center))
   );
-  return hoveredElement;
+  return compose(rotate4, translate2);
 };
-var calculateFocusAndGap = (linearElement, hoveredElement, startOrEnd, elementsMap) => {
-  const direction = startOrEnd === "start" ? -1 : 1;
-  const edgePointIndex = direction === -1 ? 0 : linearElement.points.length - 1;
-  const adjacentPointIndex = edgePointIndex - direction;
-  const edgePoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(
-    linearElement,
-    edgePointIndex,
-    elementsMap
-  );
-  const adjacentPoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(
-    linearElement,
-    adjacentPointIndex,
-    elementsMap
-  );
-  return {
-    focus: determineFocusDistance(
-      hoveredElement,
-      adjacentPoint,
-      edgePoint,
-      elementsMap
-    ),
-    gap: Math.max(
-      1,
-      distanceToBindableElement(hoveredElement, edgePoint, elementsMap)
-    )
-  };
+var coordsCenter = (x1, y1, x2, y2) => {
+  return point((x1 + x2) / 2, (y1 + y2) / 2);
 };
-var updateBoundElements = (changedElement, elementsMap, options) => {
-  const boundLinearElements = (changedElement.boundElements ?? []).filter(
-    (el) => el.type === "arrow"
-  );
-  if (boundLinearElements.length === 0) {
-    return;
+var determineFocusDistance = (element, a2, b2, elementsMap) => {
+  const relateToCenter = relativizationToElementCenter(element, elementsMap);
+  const aRel = apply(relateToCenter, from(a2));
+  const bRel = apply(relateToCenter, from(b2));
+  const line2 = through(aRel, bRel);
+  const q = element.height / element.width;
+  const hwidth = element.width / 2;
+  const hheight = element.height / 2;
+  const n2 = line2[2];
+  const m = line2[3];
+  const c = line2[1];
+  const mabs = Math.abs(m);
+  const nabs = Math.abs(n2);
+  let ret;
+  switch (element.type) {
+    case "rectangle":
+    case "image":
+    case "text":
+    case "iframe":
+    case "embeddable":
+    case "frame":
+    case "magicframe":
+      ret = c / (hwidth * (nabs + q * mabs));
+      break;
+    case "diamond":
+      ret = mabs < nabs ? c / (nabs * hwidth) : c / (mabs * hheight);
+      break;
+    case "ellipse":
+      ret = c / (hwidth * Math.sqrt(n2 ** 2 + q ** 2 * m ** 2));
+      break;
   }
-  const { newSize, simultaneouslyUpdated } = options ?? {};
-  const simultaneouslyUpdatedElementIds = getSimultaneouslyUpdatedElementIds(
-    simultaneouslyUpdated
-  );
-  const scene = Scene_default.getScene(changedElement);
-  getNonDeletedElements(
-    scene,
-    boundLinearElements.map((el) => el.id)
-  ).forEach((element) => {
-    if (!isLinearElement(element)) {
-      return;
-    }
-    const bindableElement = changedElement;
-    if (!doesNeedUpdate(element, bindableElement)) {
-      return;
-    }
-    const startBinding = maybeCalculateNewGapWhenScaling(
-      bindableElement,
-      element.startBinding,
-      newSize
-    );
-    const endBinding = maybeCalculateNewGapWhenScaling(
-      bindableElement,
-      element.endBinding,
-      newSize
-    );
-    if (simultaneouslyUpdatedElementIds.has(element.id)) {
-      mutateElement(element, { startBinding, endBinding });
-      return;
-    }
-    updateBoundPoint(
-      element,
-      "start",
-      startBinding,
-      changedElement,
-      elementsMap
-    );
-    updateBoundPoint(
-      element,
-      "end",
-      endBinding,
-      changedElement,
-      elementsMap
-    );
-    const boundText = getBoundTextElement(
-      element,
-      scene.getNonDeletedElementsMap()
-    );
-    if (boundText) {
-      handleBindTextResize(element, scene.getNonDeletedElementsMap(), false);
-    }
-  });
-};
-var doesNeedUpdate = (boundElement, changedElement) => {
-  return boundElement.startBinding?.elementId === changedElement.id || boundElement.endBinding?.elementId === changedElement.id;
-};
-var getSimultaneouslyUpdatedElementIds = (simultaneouslyUpdated) => {
-  return new Set((simultaneouslyUpdated || []).map((element) => element.id));
+  return ret || 0;
 };
-var updateBoundPoint = (linearElement, startOrEnd, binding, changedElement, elementsMap) => {
-  if (binding == null || // We only need to update the other end if this is a 2 point line element
-  binding.elementId !== changedElement.id && linearElement.points.length > 2) {
-    return;
+var determineFocusPoint = (element, focus, adjecentPoint, elementsMap) => {
+  if (focus === 0) {
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
+    const center = coordsCenter(x1, y1, x2, y2);
+    return toTuple(center);
   }
-  const bindingElement = Scene_default.getScene(linearElement).getElement(
-    binding.elementId
+  const relateToCenter = relativizationToElementCenter(element, elementsMap);
+  const adjecentPointRel = apply(
+    relateToCenter,
+    from(adjecentPoint)
   );
-  if (bindingElement == null) {
-    return;
+  const reverseRelateToCenter = reverse(relateToCenter);
+  let point2;
+  switch (element.type) {
+    case "rectangle":
+    case "image":
+    case "text":
+    case "diamond":
+    case "iframe":
+    case "embeddable":
+    case "frame":
+    case "magicframe":
+      point2 = findFocusPointForRectangulars(element, focus, adjecentPointRel);
+      break;
+    case "ellipse":
+      point2 = findFocusPointForEllipse(element, focus, adjecentPointRel);
+      break;
   }
-  const direction = startOrEnd === "start" ? -1 : 1;
-  const edgePointIndex = direction === -1 ? 0 : linearElement.points.length - 1;
-  const adjacentPointIndex = edgePointIndex - direction;
-  const adjacentPoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(
-    linearElement,
-    adjacentPointIndex,
-    elementsMap
-  );
-  const focusPointAbsolute = determineFocusPoint(
-    bindingElement,
-    binding.focus,
-    adjacentPoint,
-    elementsMap
+  return toTuple(apply(reverseRelateToCenter, point2));
+};
+var intersectElementWithLine = (element, a2, b2, gap = 0, elementsMap) => {
+  const relateToCenter = relativizationToElementCenter(element, elementsMap);
+  const aRel = apply(relateToCenter, from(a2));
+  const bRel = apply(relateToCenter, from(b2));
+  const line2 = through(aRel, bRel);
+  const reverseRelateToCenter = reverse(relateToCenter);
+  const intersections = getSortedElementLineIntersections(
+    element,
+    line2,
+    aRel,
+    gap
   );
-  let newEdgePoint;
-  if (binding.gap === 0) {
-    newEdgePoint = focusPointAbsolute;
-  } else {
-    const intersections = intersectElementWithLine(
-      bindingElement,
-      adjacentPoint,
-      focusPointAbsolute,
-      binding.gap,
-      elementsMap
-    );
-    if (intersections.length === 0) {
-      newEdgePoint = focusPointAbsolute;
-    } else {
-      newEdgePoint = intersections[0];
-    }
-  }
-  LinearElementEditor.movePoints(
-    linearElement,
-    [
-      {
-        index: edgePointIndex,
-        point: LinearElementEditor.pointFromAbsoluteCoords(
-          linearElement,
-          newEdgePoint,
-          elementsMap
-        )
-      }
-    ],
-    { [startOrEnd === "start" ? "startBinding" : "endBinding"]: binding }
+  return intersections.map(
+    (point2) => toTuple(apply(reverseRelateToCenter, point2))
   );
 };
-var maybeCalculateNewGapWhenScaling = (changedElement, currentBinding, newSize) => {
-  if (currentBinding == null || newSize == null) {
-    return currentBinding;
+var getSortedElementLineIntersections = (element, line2, nearPoint, gap = 0) => {
+  let intersections;
+  switch (element.type) {
+    case "rectangle":
+    case "image":
+    case "text":
+    case "diamond":
+    case "iframe":
+    case "embeddable":
+    case "frame":
+    case "magicframe":
+      const corners = getCorners(element);
+      intersections = corners.flatMap((point2, i2) => {
+        const edge = [point2, corners[(i2 + 1) % 4]];
+        return intersectSegment(line2, offsetSegment(edge, gap));
+      }).concat(
+        corners.flatMap((point2) => getCircleIntersections(point2, gap, line2))
+      );
+      break;
+    case "ellipse":
+      intersections = getEllipseIntersections(element, gap, line2);
+      break;
   }
-  const { gap, focus, elementId } = currentBinding;
-  const { width: newWidth, height: newHeight } = newSize;
-  const { width, height } = changedElement;
-  const newGap = Math.max(
-    1,
-    Math.min(
-      maxBindingGap(changedElement, newWidth, newHeight),
-      gap * (newWidth < newHeight ? newWidth / width : newHeight / height)
-    )
-  );
-  return { elementId, gap: newGap, focus };
-};
-var getEligibleElementsForBinding = (selectedElements, elements, elementsMap) => {
-  const includedElementIds = new Set(selectedElements.map(({ id }) => id));
-  return selectedElements.flatMap(
-    (selectedElement) => isBindingElement(selectedElement, false) ? getElligibleElementsForBindingElement(
-      selectedElement,
-      elements,
-      elementsMap
-    ).filter(
-      (element) => !includedElementIds.has(element.id)
-    ) : isBindableElement(selectedElement, false) ? getElligibleElementsForBindableElementAndWhere(
-      selectedElement,
-      elementsMap
-    ).filter((binding) => !includedElementIds.has(binding[0].id)) : []
+  if (intersections.length < 2) {
+    return [];
+  }
+  const sortedIntersections = intersections.sort(
+    (i1, i2) => distance3(i1, nearPoint) - distance3(i2, nearPoint)
   );
-};
-var getElligibleElementsForBindingElement = (linearElement, elements, elementsMap) => {
   return [
-    getElligibleElementForBindingElement(
-      linearElement,
-      "start",
-      elements,
-      elementsMap
-    ),
-    getElligibleElementForBindingElement(
-      linearElement,
-      "end",
-      elements,
-      elementsMap
-    )
-  ].filter(
-    (element) => element != null
-  );
-};
-var getElligibleElementForBindingElement = (linearElement, startOrEnd, elements, elementsMap) => {
-  return getHoveredElementForBinding(
-    getLinearElementEdgeCoors(linearElement, startOrEnd, elementsMap),
-    elements,
-    elementsMap
-  );
-};
-var getLinearElementEdgeCoors = (linearElement, startOrEnd, elementsMap) => {
-  const index = startOrEnd === "start" ? 0 : -1;
-  return tupleToCoors(
-    LinearElementEditor.getPointAtIndexGlobalCoordinates(
-      linearElement,
-      index,
-      elementsMap
-    )
-  );
-};
-var getElligibleElementsForBindableElementAndWhere = (bindableElement, elementsMap) => {
-  const scene = Scene_default.getScene(bindableElement);
-  return scene.getNonDeletedElements().map((element) => {
-    if (!isBindingElement(element, false)) {
-      return null;
-    }
-    const canBindStart = isLinearElementEligibleForNewBindingByBindable(
-      element,
-      "start",
-      bindableElement,
-      elementsMap
-    );
-    const canBindEnd = isLinearElementEligibleForNewBindingByBindable(
-      element,
-      "end",
-      bindableElement,
-      elementsMap
-    );
-    if (!canBindStart && !canBindEnd) {
-      return null;
-    }
-    return [
-      element,
-      canBindStart && canBindEnd ? "both" : canBindStart ? "start" : "end",
-      bindableElement
-    ];
-  }).filter((maybeElement) => maybeElement != null);
-};
-var isLinearElementEligibleForNewBindingByBindable = (linearElement, startOrEnd, bindableElement, elementsMap) => {
-  const existingBinding = linearElement[startOrEnd === "start" ? "startBinding" : "endBinding"];
-  return existingBinding == null && !isLinearElementSimpleAndAlreadyBoundOnOppositeEdge(
-    linearElement,
-    bindableElement,
-    startOrEnd
-  ) && bindingBorderTest(
-    bindableElement,
-    getLinearElementEdgeCoors(linearElement, startOrEnd, elementsMap),
-    elementsMap
-  );
+    sortedIntersections[0],
+    sortedIntersections[sortedIntersections.length - 1]
+  ];
 };
-var fixBindingsAfterDuplication = (sceneElements, oldElements, oldIdToDuplicatedId, duplicatesServeAsOld) => {
-  const allBoundElementIds = /* @__PURE__ */ new Set();
-  const allBindableElementIds = /* @__PURE__ */ new Set();
-  const shouldReverseRoles = duplicatesServeAsOld === "duplicatesServeAsOld";
-  oldElements.forEach((oldElement) => {
-    const { boundElements } = oldElement;
-    if (boundElements != null && boundElements.length > 0) {
-      boundElements.forEach((boundElement) => {
-        if (shouldReverseRoles && !oldIdToDuplicatedId.has(boundElement.id)) {
-          allBoundElementIds.add(boundElement.id);
-        }
-      });
-      allBindableElementIds.add(oldIdToDuplicatedId.get(oldElement.id));
-    }
-    if (isBindingElement(oldElement)) {
-      if (oldElement.startBinding != null) {
-        const { elementId } = oldElement.startBinding;
-        if (shouldReverseRoles && !oldIdToDuplicatedId.has(elementId)) {
-          allBindableElementIds.add(elementId);
-        }
-      }
-      if (oldElement.endBinding != null) {
-        const { elementId } = oldElement.endBinding;
-        if (shouldReverseRoles && !oldIdToDuplicatedId.has(elementId)) {
-          allBindableElementIds.add(elementId);
-        }
-      }
-      if (oldElement.startBinding != null || oldElement.endBinding != null) {
-        allBoundElementIds.add(oldIdToDuplicatedId.get(oldElement.id));
-      }
-    }
-  });
-  sceneElements.filter(
-    ({ id }) => allBoundElementIds.has(id)
-  ).forEach((element) => {
-    const { startBinding, endBinding } = element;
-    mutateElement(element, {
-      startBinding: newBindingAfterDuplication(
-        startBinding,
-        oldIdToDuplicatedId
-      ),
-      endBinding: newBindingAfterDuplication(endBinding, oldIdToDuplicatedId)
-    });
-  });
-  sceneElements.filter(({ id }) => allBindableElementIds.has(id)).forEach((bindableElement) => {
-    const { boundElements } = bindableElement;
-    if (boundElements != null && boundElements.length > 0) {
-      mutateElement(bindableElement, {
-        boundElements: boundElements.map(
-          (boundElement) => oldIdToDuplicatedId.has(boundElement.id) ? {
-            id: oldIdToDuplicatedId.get(boundElement.id),
-            type: boundElement.type
-          } : boundElement
-        )
-      });
-    }
-  });
+var getCorners = (element, scale = 1) => {
+  const hx = scale * element.width / 2;
+  const hy = scale * element.height / 2;
+  switch (element.type) {
+    case "rectangle":
+    case "image":
+    case "text":
+    case "iframe":
+    case "embeddable":
+    case "frame":
+    case "magicframe":
+      return [
+        point(hx, hy),
+        point(hx, -hy),
+        point(-hx, -hy),
+        point(-hx, hy)
+      ];
+    case "diamond":
+      return [
+        point(0, hy),
+        point(hx, 0),
+        point(0, -hy),
+        point(-hx, 0)
+      ];
+  }
 };
-var newBindingAfterDuplication = (binding, oldIdToDuplicatedId) => {
-  if (binding == null) {
-    return null;
+var intersectSegment = (line2, segment) => {
+  const [a2, b2] = segment;
+  const aDist = distanceToLine(a2, line2);
+  const bDist = distanceToLine(b2, line2);
+  if (aDist * bDist >= 0) {
+    return [];
   }
-  const { elementId, focus, gap } = binding;
-  return {
-    focus,
-    gap,
-    elementId: oldIdToDuplicatedId.get(elementId) ?? elementId
-  };
+  return [intersect(line2, through(a2, b2))];
 };
-var fixBindingsAfterDeletion = (sceneElements, deletedElements) => {
-  const deletedElementIds = new Set(
-    deletedElements.map((element) => element.id)
+var offsetSegment = (segment, distance4) => {
+  const [a2, b2] = segment;
+  const offset2 = translationOrthogonal(
+    fromTo(a2, b2),
+    distance4
   );
-  const affectedElements = /* @__PURE__ */ new Set();
-  deletedElements.forEach((deletedElement) => {
-    if (isBindableElement(deletedElement)) {
-      deletedElement.boundElements?.forEach((element) => {
-        if (!deletedElementIds.has(element.id)) {
-          affectedElements.add(element.id);
-        }
-      });
-    } else if (isBindingElement(deletedElement)) {
-      if (deletedElement.startBinding) {
-        affectedElements.add(deletedElement.startBinding.elementId);
-      }
-      if (deletedElement.endBinding) {
-        affectedElements.add(deletedElement.endBinding.elementId);
-      }
-    }
-  });
-  sceneElements.filter(({ id }) => affectedElements.has(id)).forEach((element) => {
-    if (isBindableElement(element)) {
-      mutateElement(element, {
-        boundElements: newBoundElementsAfterDeletion(
-          element.boundElements,
-          deletedElementIds
-        )
-      });
-    } else if (isBindingElement(element)) {
-      mutateElement(element, {
-        startBinding: newBindingAfterDeletion(
-          element.startBinding,
-          deletedElementIds
-        ),
-        endBinding: newBindingAfterDeletion(
-          element.endBinding,
-          deletedElementIds
-        )
-      });
-    }
-  });
+  return [apply(offset2, a2), apply(offset2, b2)];
 };
-var newBindingAfterDeletion = (binding, deletedElementIds) => {
-  if (binding == null || deletedElementIds.has(binding.elementId)) {
-    return null;
+var getEllipseIntersections = (element, gap, line2) => {
+  const a2 = element.width / 2 + gap;
+  const b2 = element.height / 2 + gap;
+  const m = line2[2];
+  const n2 = line2[3];
+  const c = line2[1];
+  const squares = a2 * a2 * m * m + b2 * b2 * n2 * n2;
+  const discr = squares - c * c;
+  if (squares === 0 || discr <= 0) {
+    return [];
   }
-  return binding;
+  const discrRoot = Math.sqrt(discr);
+  const xn = -a2 * a2 * m * c;
+  const yn = -b2 * b2 * n2 * c;
+  return [
+    point(
+      (xn + a2 * b2 * n2 * discrRoot) / squares,
+      (yn - a2 * b2 * m * discrRoot) / squares
+    ),
+    point(
+      (xn - a2 * b2 * n2 * discrRoot) / squares,
+      (yn + a2 * b2 * m * discrRoot) / squares
+    )
+  ];
 };
-var newBoundElementsAfterDeletion = (boundElements, deletedElementIds) => {
-  if (!boundElements) {
-    return null;
+var getCircleIntersections = (center, radius, line2) => {
+  if (radius === 0) {
+    return distanceToLine(line2, center) === 0 ? [center] : [];
   }
-  return boundElements.filter((ele) => !deletedElementIds.has(ele.id));
+  const m = line2[2];
+  const n2 = line2[3];
+  const c = line2[1];
+  const [a2, b2] = toTuple(center);
+  const r = radius;
+  const squares = m * m + n2 * n2;
+  const discr = r * r * squares - (m * a2 + n2 * b2 + c) ** 2;
+  if (squares === 0 || discr <= 0) {
+    return [];
+  }
+  const discrRoot = Math.sqrt(discr);
+  const xn = a2 * n2 * n2 - b2 * m * n2 - m * c;
+  const yn = b2 * m * m - a2 * m * n2 - n2 * c;
+  return [
+    point((xn + n2 * discrRoot) / squares, (yn - m * discrRoot) / squares),
+    point((xn - n2 * discrRoot) / squares, (yn + m * discrRoot) / squares)
+  ];
+};
+var findFocusPointForEllipse = (ellipse2, relativeDistance, point2) => {
+  const relativeDistanceAbs = Math.abs(relativeDistance);
+  const a2 = ellipse2.width * relativeDistanceAbs / 2;
+  const b2 = ellipse2.height * relativeDistanceAbs / 2;
+  const orientation = Math.sign(relativeDistance);
+  const [px, pyo] = toTuple(point2);
+  const py = pyo === 0 ? 1e-4 : pyo;
+  const squares = px ** 2 * b2 ** 2 + py ** 2 * a2 ** 2;
+  const m = (-px * b2 ** 2 + orientation * py * Math.sqrt(Math.max(0, squares - a2 ** 2 * b2 ** 2))) / squares;
+  let n2 = (-m * px - 1) / py;
+  if (n2 === 0) {
+    n2 = (Object.is(n2, -0) ? -1 : 1) * 0.01;
+  }
+  const x = -(a2 ** 2 * m) / (n2 ** 2 * b2 ** 2 + m ** 2 * a2 ** 2);
+  return point(x, (-m * x - 1) / n2);
+};
+var findFocusPointForRectangulars = (element, relativeDistance, point2) => {
+  const relativeDistanceAbs = Math.abs(relativeDistance);
+  const orientation = Math.sign(relativeDistance);
+  const corners = getCorners(element, relativeDistanceAbs);
+  let maxDistance = 0;
+  let tangentPoint = null;
+  corners.forEach((corner) => {
+    const distance4 = orientation * through(point2, corner)[1];
+    if (distance4 > maxDistance) {
+      maxDistance = distance4;
+      tangentPoint = corner;
+    }
+  });
+  return tangentPoint;
+};
+
+// scene/ShapeCache.ts
+init_define_import_meta_env();
+var ShapeCache = class _ShapeCache {
+  static rg = new RoughGenerator();
+  static cache = /* @__PURE__ */ new WeakMap();
+  /**
+   * 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 set = (element, shape) => _ShapeCache.cache.set(element, shape);
+  static delete = (element) => _ShapeCache.cache.delete(element);
+  static destroy = () => {
+    _ShapeCache.cache = /* @__PURE__ */ new WeakMap();
+  };
+  /**
+   * Generates & caches shape for element if not already cached, otherwise
+   * returns cached shape.
+   */
+  static generateElementShape = (element, renderConfig) => {
+    const cachedShape = renderConfig?.isExporting ? void 0 : _ShapeCache.get(element);
+    if (cachedShape !== void 0) {
+      return cachedShape;
+    }
+    elementWithCanvasCache.delete(element);
+    const shape = _generateElementShape(
+      element,
+      _ShapeCache.rg,
+      renderConfig || {
+        isExporting: false,
+        canvasBackgroundColor: COLOR_PALETTE.white,
+        embedsValidationStatus: null
+      }
+    );
+    _ShapeCache.cache.set(element, shape);
+    return shape;
+  };
 };
 
 // element/linearElementEditor.ts
@@ -10576,7 +10100,8 @@ var LinearElementEditor = class _LinearElementEditor {
     }
     return false;
   }
-  static handlePointerUp(event, editingLinearElement, appState, elements, elementsMap) {
+  static handlePointerUp(event, editingLinearElement, appState, app) {
+    const elementsMap = app.scene.getNonDeletedElementsMap();
     const { elementId, selectedPointsIndices, isDragging, pointerDownState } = editingLinearElement;
     const element = _LinearElementEditor.getElement(elementId, elementsMap);
     if (!element) {
@@ -10602,8 +10127,7 @@ var LinearElementEditor = class _LinearElementEditor {
                 elementsMap
               )
             ),
-            elements,
-            elementsMap
+            app
           ) : null;
           bindings[selectedPoint === 0 ? "startBindingElement" : "endBindingElement"] = bindingElement;
         }
@@ -10697,13 +10221,13 @@ var LinearElementEditor = class _LinearElementEditor {
     const threshold = _LinearElementEditor.POINT_HANDLE_SIZE / appState.zoom.value;
     const existingSegmentMidpointHitCoords = linearElementEditor.segmentMidPointHoveredCoords;
     if (existingSegmentMidpointHitCoords) {
-      const distance5 = distance2d(
+      const distance4 = distance2d(
         existingSegmentMidpointHitCoords[0],
         existingSegmentMidpointHitCoords[1],
         scenePointer.x,
         scenePointer.y
       );
-      if (distance5 <= threshold) {
+      if (distance4 <= threshold) {
         return existingSegmentMidpointHitCoords;
       }
     }
@@ -10711,13 +10235,13 @@ var LinearElementEditor = class _LinearElementEditor {
     const midPoints = _LinearElementEditor.getEditorMidPoints(element, elementsMap, appState);
     while (index < midPoints.length) {
       if (midPoints[index] !== null) {
-        const distance5 = distance2d(
+        const distance4 = distance2d(
           midPoints[index][0],
           midPoints[index][1],
           scenePointer.x,
           scenePointer.y
         );
-        if (distance5 <= threshold) {
+        if (distance4 <= threshold) {
           return midPoints[index];
         }
       }
@@ -10726,16 +10250,16 @@ var LinearElementEditor = class _LinearElementEditor {
     return null;
   };
   static isSegmentTooShort(element, startPoint, endPoint, zoom) {
-    let distance5 = distance2d(
+    let distance4 = distance2d(
       startPoint[0],
       startPoint[1],
       endPoint[0],
       endPoint[1]
     );
     if (element.points.length > 2 && element.roundness) {
-      distance5 = getBezierCurveLength(element, endPoint);
+      distance4 = getBezierCurveLength(element, endPoint);
     }
-    return distance5 * zoom.value < _LinearElementEditor.POINT_HANDLE_SIZE * 4;
+    return distance4 * zoom.value < _LinearElementEditor.POINT_HANDLE_SIZE * 4;
   }
   static getSegmentMidPoint(element, startPoint, endPoint, endPointIndex, elementsMap) {
     let segmentMidPoint = centerPoint(startPoint, endPoint);
@@ -10788,7 +10312,8 @@ var LinearElementEditor = class _LinearElementEditor {
     }
     return -1;
   }
-  static handlePointerDown(event, appState, history, scenePointer, linearElementEditor, elements, elementsMap) {
+  static handlePointerDown(event, appState, history, scenePointer, linearElementEditor, app) {
+    const elementsMap = app.scene.getNonDeletedElementsMap();
     const ret = {
       didAddPoint: false,
       hitElement: null,
@@ -10848,11 +10373,7 @@ var LinearElementEditor = class _LinearElementEditor {
         },
         selectedPointsIndices: [element.points.length - 1],
         lastUncommittedPoint: null,
-        endBindingElement: getHoveredElementForBinding(
-          scenePointer,
-          elements,
-          elementsMap
-        )
+        endBindingElement: getHoveredElementForBinding(scenePointer, app)
       };
       ret.didAddPoint = true;
       return ret;
@@ -10880,7 +10401,7 @@ var LinearElementEditor = class _LinearElementEditor {
     const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
     const cx = (x1 + x2) / 2;
     const cy = (y1 + y2) / 2;
-    const targetPoint = clickedPointIndex > -1 && rotate2(
+    const targetPoint = clickedPointIndex > -1 && rotate3(
       element.x + element.points[clickedPointIndex][0],
       element.y + element.points[clickedPointIndex][1],
       cx,
@@ -10984,7 +10505,7 @@ var LinearElementEditor = class _LinearElementEditor {
     const cx = (x1 + x2) / 2;
     const cy = (y1 + y2) / 2;
     let { x, y } = element;
-    [x, y] = rotate2(x + point2[0], y + point2[1], cx, cy, element.angle);
+    [x, y] = rotate3(x + point2[0], y + point2[1], cx, cy, element.angle);
     return [x, y];
   }
   /** scene coords */
@@ -10994,7 +10515,7 @@ var LinearElementEditor = class _LinearElementEditor {
     const cy = (y1 + y2) / 2;
     return element.points.map((point2) => {
       let { x, y } = element;
-      [x, y] = rotate2(x + point2[0], y + point2[1], cx, cy, element.angle);
+      [x, y] = rotate3(x + point2[0], y + point2[1], cx, cy, element.angle);
       return [x, y];
     });
   }
@@ -11005,13 +10526,13 @@ var LinearElementEditor = class _LinearElementEditor {
     const cy = (y1 + y2) / 2;
     const point2 = element.points[index];
     const { x, y } = element;
-    return point2 ? rotate2(x + point2[0], y + point2[1], cx, cy, element.angle) : rotate2(x, y, cx, cy, element.angle);
+    return point2 ? rotate3(x + point2[0], y + point2[1], cx, cy, element.angle) : rotate3(x, y, cx, cy, element.angle);
   }
   static pointFromAbsoluteCoords(element, absoluteCoords, elementsMap) {
     const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
     const cx = (x1 + x2) / 2;
     const cy = (y1 + y2) / 2;
-    const [x, y] = rotate2(
+    const [x, y] = rotate3(
       absoluteCoords[0],
       absoluteCoords[1],
       cx,
@@ -11040,7 +10561,7 @@ var LinearElementEditor = class _LinearElementEditor {
     const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
     const cx = (x1 + x2) / 2;
     const cy = (y1 + y2) / 2;
-    const [rotatedX, rotatedY] = rotate2(
+    const [rotatedX, rotatedY] = rotate3(
       pointerOnGrid[0],
       pointerOnGrid[1],
       cx,
@@ -11216,7 +10737,7 @@ var LinearElementEditor = class _LinearElementEditor {
       pointerDownState: linearElementEditor.pointerDownState,
       selectedPointsIndices: linearElementEditor.selectedPointsIndices
     };
-    const midpoint = _LinearElementEditor.createPointAt(
+    const midpoint2 = _LinearElementEditor.createPointAt(
       element,
       elementsMap,
       pointerCoords.x,
@@ -11225,7 +10746,7 @@ var LinearElementEditor = class _LinearElementEditor {
     );
     const points = [
       ...element.points.slice(0, segmentMidpoint.index),
-      midpoint,
+      midpoint2,
       ...element.points.slice(segmentMidpoint.index)
     ];
     mutateElement(element, {
@@ -11251,7 +10772,7 @@ var LinearElementEditor = class _LinearElementEditor {
     const prevCenterY = (prevCoords[1] + prevCoords[3]) / 2;
     const dX = prevCenterX - nextCenterX;
     const dY = prevCenterY - nextCenterY;
-    const rotated = rotate2(offsetX, offsetY, dX, dY, element.angle);
+    const rotated = rotate3(offsetX, offsetY, dX, dY, element.angle);
     mutateElement(element, {
       ...otherUpdates,
       points: nextPoints,
@@ -11941,36 +11462,6 @@ var suppportsHorizontalAlign = (selectedElements, elementsMap) => {
     return isTextElement(element);
   });
 };
-var getTextBindableContainerAtPosition = (elements, appState, x, y, elementsMap) => {
-  const selectedElements = getSelectedElements(elements, appState);
-  if (selectedElements.length === 1) {
-    return isTextBindableContainer(selectedElements[0], false) ? selectedElements[0] : null;
-  }
-  let hitElement = null;
-  for (let index = elements.length - 1; index >= 0; --index) {
-    if (elements[index].isDeleted) {
-      continue;
-    }
-    const [x1, y1, x2, y2] = getElementAbsoluteCoords(
-      elements[index],
-      elementsMap
-    );
-    if (isArrowElement(elements[index]) && isHittingElementNotConsideringBoundingBox(
-      elements[index],
-      appState,
-      null,
-      [x, y],
-      elementsMap
-    )) {
-      hitElement = elements[index];
-      break;
-    } else if (x1 < x && x < x2 && y1 < y && y < y2) {
-      hitElement = elements[index];
-      break;
-    }
-  }
-  return isTextBindableContainer(hitElement, false) ? hitElement : null;
-};
 var VALID_CONTAINER_TYPES = /* @__PURE__ */ new Set([
   "rectangle",
   "ellipse",
@@ -12076,7 +11567,7 @@ var IMAGE_INVERT_FILTER = "invert(100%) hue-rotate(180deg) saturate(1.25)";
 var defaultAppState = getDefaultAppState();
 var isPendingImageElement = (element, renderConfig) => isInitializedImageElement(element) && !renderConfig.imageCache.has(element.fileId);
 var shouldResetImageFilter = (element, renderConfig, appState) => {
-  return appState.theme === "dark" && isInitializedImageElement(element) && !isPendingImageElement(element, renderConfig) && renderConfig.imageCache.get(element.fileId)?.mimeType !== MIME_TYPES.svg;
+  return appState.theme === THEME.DARK && isInitializedImageElement(element) && !isPendingImageElement(element, renderConfig) && renderConfig.imageCache.get(element.fileId)?.mimeType !== MIME_TYPES.svg;
 };
 var getCanvasPadding = (element) => element.type === "freedraw" ? element.strokeWidth * 12 : 20;
 var getRenderOpacity = (element, containingFrame, elementsPendingErasure) => {
@@ -12414,7 +11905,7 @@ var renderElement = (element, elementsMap, allElementsMap, rc, context, renderCo
         context.lineWidth = FRAME_STYLE.strokeWidth / appState.zoom.value;
         context.strokeStyle = FRAME_STYLE.strokeColor;
         if (isMagicFrameElement(element)) {
-          context.strokeStyle = appState.theme === "light" ? "#7affd7" : "#1d8264";
+          context.strokeStyle = appState.theme === THEME.LIGHT ? "#7affd7" : "#1d8264";
         }
         if (FRAME_STYLE.radius && context.roundRect) {
           context.beginPath();
@@ -12637,6 +12128,54 @@ function getSvgPathFromStroke2(points) {
   ).join(" ").replace(TO_FIXED_PRECISION, "$1");
 }
 
+// node_modules/points-on-curve/lib/index.js
+init_define_import_meta_env();
+function distanceSq2(p1, p2) {
+  return Math.pow(p1[0] - p2[0], 2) + Math.pow(p1[1] - p2[1], 2);
+}
+function distanceToSegmentSq2(p, v, w) {
+  const l2 = distanceSq2(v, w);
+  if (l2 === 0) {
+    return distanceSq2(p, v);
+  }
+  let t2 = ((p[0] - v[0]) * (w[0] - v[0]) + (p[1] - v[1]) * (w[1] - v[1])) / l2;
+  t2 = Math.max(0, Math.min(1, t2));
+  return distanceSq2(p, lerp2(v, w, t2));
+}
+function lerp2(a2, b2, t2) {
+  return [
+    a2[0] + (b2[0] - a2[0]) * t2,
+    a2[1] + (b2[1] - a2[1]) * t2
+  ];
+}
+function simplify2(points, distance4) {
+  return simplifyPoints2(points, 0, points.length, distance4);
+}
+function simplifyPoints2(points, start, end, epsilon, newPoints) {
+  const outPoints = newPoints || [];
+  const s2 = points[start];
+  const e2 = points[end - 1];
+  let maxDistSq = 0;
+  let maxNdx = 1;
+  for (let i2 = start + 1; i2 < end - 1; ++i2) {
+    const distSq = distanceToSegmentSq2(points[i2], s2, e2);
+    if (distSq > maxDistSq) {
+      maxDistSq = distSq;
+      maxNdx = i2;
+    }
+  }
+  if (Math.sqrt(maxDistSq) > epsilon) {
+    simplifyPoints2(points, start, maxNdx + 1, epsilon, outPoints);
+    simplifyPoints2(points, maxNdx, end, epsilon, outPoints);
+  } else {
+    if (!outPoints.length) {
+      outPoints.push(s2);
+    }
+    outPoints.push(e2);
+  }
+  return outPoints;
+}
+
 // scene/Shape.ts
 var getDashArrayDashed = (strokeWidth) => [8, 8 + strokeWidth];
 var getDashArrayDotted = (strokeWidth) => [1.5, 6 + strokeWidth];
@@ -13034,7 +12573,7 @@ var ElementBounds = class _ElementBounds {
     if (isFreeDrawElement(element)) {
       const [minX, minY, maxX, maxY] = getBoundsFromPoints(
         element.points.map(
-          ([x, y]) => rotate2(x, y, cx - element.x, cy - element.y, element.angle)
+          ([x, y]) => rotate3(x, y, cx - element.x, cy - element.y, element.angle)
         )
       );
       return [
@@ -13046,10 +12585,10 @@ var ElementBounds = class _ElementBounds {
     } else if (isLinearElement(element)) {
       bounds = getLinearElementRotatedBounds(element, cx, cy, elementsMap);
     } else if (element.type === "diamond") {
-      const [x11, y11] = rotate2(cx, y1, cx, cy, element.angle);
-      const [x12, y12] = rotate2(cx, y2, cx, cy, element.angle);
-      const [x22, y22] = rotate2(x1, cy, cx, cy, element.angle);
-      const [x21, y21] = rotate2(x2, cy, cx, cy, element.angle);
+      const [x11, y11] = rotate3(cx, y1, cx, cy, element.angle);
+      const [x12, y12] = rotate3(cx, y2, cx, cy, element.angle);
+      const [x22, y22] = rotate3(x1, cy, cx, cy, element.angle);
+      const [x21, y21] = rotate3(x2, cy, cx, cy, element.angle);
       const minX = Math.min(x11, x12, x22, x21);
       const minY = Math.min(y11, y12, y22, y21);
       const maxX = Math.max(x11, x12, x22, x21);
@@ -13064,10 +12603,10 @@ var ElementBounds = class _ElementBounds {
       const hh = Math.hypot(h * cos, w * sin);
       bounds = [cx - ww, cy - hh, cx + ww, cy + hh];
     } else {
-      const [x11, y11] = rotate2(x1, y1, cx, cy, element.angle);
-      const [x12, y12] = rotate2(x1, y2, cx, cy, element.angle);
-      const [x22, y22] = rotate2(x2, y2, cx, cy, element.angle);
-      const [x21, y21] = rotate2(x2, y1, cx, cy, element.angle);
+      const [x11, y11] = rotate3(x1, y1, cx, cy, element.angle);
+      const [x12, y12] = rotate3(x1, y2, cx, cy, element.angle);
+      const [x22, y22] = rotate3(x2, y2, cx, cy, element.angle);
+      const [x21, y21] = rotate3(x2, y1, cx, cy, element.angle);
       const minX = Math.min(x11, x12, x22, x21);
       const minY = Math.min(y11, y12, y22, y21);
       const maxX = Math.max(x11, x12, x22, x21);
@@ -13186,16 +12725,6 @@ var getElementLineSegments = (element, elementsMap) => {
     [se2, w]
   ];
 };
-var getRectangleBoxAbsoluteCoords = (boxSceneCoords) => {
-  return [
-    boxSceneCoords.x,
-    boxSceneCoords.y,
-    boxSceneCoords.x + boxSceneCoords.width,
-    boxSceneCoords.y + boxSceneCoords.height,
-    boxSceneCoords.x + boxSceneCoords.width / 2,
-    boxSceneCoords.y + boxSceneCoords.height / 2
-  ];
-};
 var getDiamondPoints = (element) => {
   const topX = Math.floor(element.width / 2) + 1;
   const topY = 0;
@@ -13364,9 +12893,9 @@ var getArrowheadPoints = (element, shape, position, arrowhead) => {
   const equation2 = (t2, idx) => Math.pow(1 - t2, 3) * p3[idx] + 3 * t2 * Math.pow(1 - t2, 2) * p2[idx] + 3 * Math.pow(t2, 2) * (1 - t2) * p1[idx] + p0[idx] * Math.pow(t2, 3);
   const [x2, y2] = position === "start" ? p0 : p3;
   const [x1, y1] = [equation2(0.3, 0), equation2(0.3, 1)];
-  const distance5 = Math.hypot(x2 - x1, y2 - y1);
-  const nx = (x2 - x1) / distance5;
-  const ny = (y2 - y1) / distance5;
+  const distance4 = Math.hypot(x2 - x1, y2 - y1);
+  const nx = (x2 - x1) / distance4;
+  const ny = (y2 - y1) / distance4;
   const size = getArrowheadSize(arrowhead);
   let length = 0;
   {
@@ -13383,14 +12912,14 @@ var getArrowheadPoints = (element, shape, position, arrowhead) => {
     return [x2, y2, diameter];
   }
   const angle = getArrowheadAngle(arrowhead);
-  const [x3, y3] = rotate2(xs, ys, x2, y2, -angle * Math.PI / 180);
-  const [x4, y4] = rotate2(xs, ys, x2, y2, angle * Math.PI / 180);
+  const [x3, y3] = rotate3(xs, ys, x2, y2, -angle * Math.PI / 180);
+  const [x4, y4] = rotate3(xs, ys, x2, y2, angle * Math.PI / 180);
   if (arrowhead === "diamond" || arrowhead === "diamond_outline") {
     let ox;
     let oy;
     if (position === "start") {
       const [px, py] = element.points.length > 1 ? element.points[1] : [0, 0];
-      [ox, oy] = rotate2(
+      [ox, oy] = rotate3(
         x2 + minSize * 2,
         y2,
         x2,
@@ -13399,7 +12928,7 @@ var getArrowheadPoints = (element, shape, position, arrowhead) => {
       );
     } else {
       const [px, py] = element.points.length > 1 ? element.points[element.points.length - 2] : [0, 0];
-      [ox, oy] = rotate2(
+      [ox, oy] = rotate3(
         x2 - minSize * 2,
         y2,
         x2,
@@ -13429,7 +12958,7 @@ var getLinearElementRotatedBounds = (element, cx, cy, elementsMap) => {
   const boundTextElement = getBoundTextElement(element, elementsMap);
   if (element.points.length < 2) {
     const [pointX, pointY] = element.points[0];
-    const [x, y] = rotate2(
+    const [x, y] = rotate3(
       element.x + pointX,
       element.y + pointY,
       cx,
@@ -13456,7 +12985,7 @@ var getLinearElementRotatedBounds = (element, cx, cy, elementsMap) => {
   const cachedShape = ShapeCache.get(element)?.[0];
   const shape = cachedShape ?? generateLinearElementShape(element);
   const ops = getCurvePathOps(shape);
-  const transformXY = (x, y) => rotate2(element.x + x, element.y + y, cx, cy, element.angle);
+  const transformXY = (x, y) => rotate3(element.x + x, element.y + y, cx, cy, element.angle);
   const res = getMinMaxXYFromCurvePathOps(ops, transformXY);
   let coords = [res[0], res[1], res[2], res[3]];
   if (boundTextElement) {
@@ -13564,9 +13093,9 @@ var getClosestElementBounds = (elements, from3) => {
   const elementsMap = arrayToMap(elements);
   elements.forEach((element) => {
     const [x1, y1, x2, y2] = getElementBounds(element, elementsMap);
-    const distance5 = distance2d((x1 + x2) / 2, (y1 + y2) / 2, from3.x, from3.y);
-    if (distance5 < minDistance) {
-      minDistance = distance5;
+    const distance4 = distance2d((x1 + x2) / 2, (y1 + y2) / 2, from3.x, from3.y);
+    if (distance4 < minDistance) {
+      minDistance = distance4;
       closestElement = element;
     }
   });
@@ -13601,7 +13130,7 @@ var getVisibleSceneBounds = ({
 };
 
 // math.ts
-var rotate2 = (x, y, cx, cy, angle) => (
+var rotate3 = (x, y, cx, cy, angle) => (
   // 𝑎′𝑥=(𝑎𝑥−𝑐𝑥)cos𝜃−(𝑎𝑦−𝑐𝑦)sin𝜃+𝑐𝑥
   // 𝑎′𝑦=(𝑎𝑥−𝑐𝑥)sin𝜃+(𝑎𝑦−𝑐𝑦)cos𝜃+𝑐𝑦.
   // https://math.stackexchange.com/questions/2204520/how-do-i-rotate-a-line-segment-in-a-specific-point-on-the-line
@@ -13610,7 +13139,7 @@ var rotate2 = (x, y, cx, cy, angle) => (
     (x - cx) * Math.sin(angle) + (y - cy) * Math.cos(angle) + cy
   ]
 );
-var rotatePoint = (point2, center, angle) => rotate2(point2[0], point2[1], center[0], center[1], angle);
+var rotatePoint = (point2, center, angle) => rotate3(point2[0], point2[1], center[0], center[1], angle);
 var adjustXYWithRotation = (sides, x, y, angle, deltaX1, deltaY1, deltaX2, deltaY2) => {
   const cos = Math.cos(angle);
   const sin = Math.sin(angle);
@@ -13653,63 +13182,14 @@ var centerPoint = (a2, b2) => {
 var isPathALoop = (points, zoomValue = 1) => {
   if (points.length >= 3) {
     const [first, last] = [points[0], points[points.length - 1]];
-    const distance5 = distance2d(first[0], first[1], last[0], last[1]);
-    return distance5 <= LINE_CONFIRM_THRESHOLD / zoomValue;
+    const distance4 = distance2d(first[0], first[1], last[0], last[1]);
+    return distance4 <= LINE_CONFIRM_THRESHOLD / zoomValue;
   }
   return false;
 };
-var isPointInPolygon = (points, x, y) => {
-  const vertices = points.length;
-  if (vertices < 3) {
-    return false;
-  }
-  const extreme = [Number.MAX_SAFE_INTEGER, y];
-  const p = [x, y];
-  let count = 0;
-  for (let i2 = 0; i2 < vertices; i2++) {
-    const current = points[i2];
-    const next = points[(i2 + 1) % vertices];
-    if (doSegmentsIntersect(current, next, p, extreme)) {
-      if (orderedColinearOrientation(current, p, next) === 0) {
-        return isPointWithinBounds(current, p, next);
-      }
-      count++;
-    }
-  }
-  return count % 2 === 1;
-};
 var isPointWithinBounds = (p, q, r) => {
   return q[0] <= Math.max(p[0], r[0]) && q[0] >= Math.min(p[0], r[0]) && q[1] <= Math.max(p[1], r[1]) && q[1] >= Math.min(p[1], r[1]);
 };
-var orderedColinearOrientation = (p, q, r) => {
-  const val = (q[1] - p[1]) * (r[0] - q[0]) - (q[0] - p[0]) * (r[1] - q[1]);
-  if (val === 0) {
-    return 0;
-  }
-  return val > 0 ? 1 : 2;
-};
-var doSegmentsIntersect = (p1, q1, p2, q2) => {
-  const o1 = orderedColinearOrientation(p1, q1, p2);
-  const o2 = orderedColinearOrientation(p1, q1, q2);
-  const o3 = orderedColinearOrientation(p2, q2, p1);
-  const o4 = orderedColinearOrientation(p2, q2, q1);
-  if (o1 !== o2 && o3 !== o4) {
-    return true;
-  }
-  if (o1 === 0 && isPointWithinBounds(p1, p2, q1)) {
-    return true;
-  }
-  if (o2 === 0 && isPointWithinBounds(p1, q2, q1)) {
-    return true;
-  }
-  if (o3 === 0 && isPointWithinBounds(p2, p1, q2)) {
-    return true;
-  }
-  if (o4 === 0 && isPointWithinBounds(p2, q1, q2)) {
-    return true;
-  }
-  return false;
-};
 var getGridPoint = (x, y, gridSize) => {
   if (gridSize) {
     return [
@@ -13753,9 +13233,9 @@ var getControlPointsForBezierCurve = (element, endPoint) => {
       const p1 = [data[0], data[1]];
       const p2 = [data[2], data[3]];
       const p3 = [data[4], data[5]];
-      const distance5 = distance2d(p3[0], p3[1], endPoint[0], endPoint[1]);
-      if (distance5 < minDistance) {
-        minDistance = distance5;
+      const distance4 = distance2d(p3[0], p3[1], endPoint[0], endPoint[1]);
+      if (distance4 < minDistance) {
+        minDistance = distance4;
         controlPoints = [p0, p1, p2, p3];
       }
       currentP = p3;
@@ -13803,7 +13283,7 @@ var getBezierCurveArcLengths = (element, endPoint) => {
   arcLengths[0] = 0;
   const points = getPointsInBezierCurve(element, endPoint);
   let index = 0;
-  let distance5 = 0;
+  let distance4 = 0;
   while (index < points.length - 1) {
     const segmentDistance = distance2d(
       points[index][0],
@@ -13811,8 +13291,8 @@ var getBezierCurveArcLengths = (element, endPoint) => {
       points[index + 1][0],
       points[index + 1][1]
     );
-    distance5 += segmentDistance;
-    arcLengths.push(distance5);
+    distance4 += segmentDistance;
+    arcLengths.push(distance4);
     index++;
   }
   return arcLengths;
@@ -14216,6 +13696,7 @@ var _newElementBase = (type, {
   angle = 0,
   groupIds = [],
   frameId = null,
+  index = null,
   roundness = null,
   boundElements = null,
   link = null,
@@ -14239,6 +13720,7 @@ var _newElementBase = (type, {
     opacity,
     groupIds,
     frameId,
+    index,
     roundness,
     seed: rest.seed ?? randomInteger(),
     version: rest.version || 1,
@@ -14578,13 +14060,13 @@ var duplicateElements = (elements, opts) => {
 // element/embeddable.ts
 var embeddedLinkCache = /* @__PURE__ */ new Map();
 var RE_YOUTUBE = /^(?:http(?:s)?:\/\/)?(?:www\.)?youtu(?:be\.com|\.be)\/(embed\/|watch\?v=|shorts\/|playlist\?list=|embed\/videoseries\?list=)?([a-zA-Z0-9_-]+)(?:\?t=|&t=|\?start=|&start=)?([a-zA-Z0-9_-]+)?[^\s]*$/;
-var RE_VIMEO = /^(?:http(?:s)?:\/\/)?(?:(?:w){3}.)?(?:player\.)?vimeo\.com\/(?:video\/)?([^?\s]+)(?:\?.*)?$/;
+var RE_VIMEO = /^(?:http(?:s)?:\/\/)?(?:(?:w){3}\.)?(?:player\.)?vimeo\.com\/(?:video\/)?([^?\s]+)(?:\?.*)?$/;
 var RE_FIGMA = /^https:\/\/(?:www\.)?figma\.com/;
 var RE_GH_GIST = /^https:\/\/gist\.github\.com/;
-var RE_GH_GIST_EMBED = /^<script[\s\S]*?\ssrc=["'](https:\/\/gist.github.com\/.*?)\.js["']/i;
-var RE_TWITTER = /(?:http(?:s)?:\/\/)?(?:(?:w){3}.)?(?:twitter|x).com/;
-var RE_TWITTER_EMBED = /^<blockquote[\s\S]*?\shref=["'](https:\/\/(?:twitter|x).com\/[^"']*)/i;
-var RE_VALTOWN = /^https:\/\/(?:www\.)?val.town\/(v|embed)\/[a-zA-Z_$][0-9a-zA-Z_$]+\.[a-zA-Z_$][0-9a-zA-Z_$]+/;
+var RE_GH_GIST_EMBED = /https?:\/\/gist\.github\.com\/([\w_-]+)\/([\w_-]+)\.js["']/i;
+var RE_TWITTER = /(?:https?:\/\/)?(?:(?:w){3}\.)?(?:twitter|x)\.com/;
+var RE_TWITTER_EMBED = /^<blockquote[\s\S]*?\shref=["'](https?:\/\/(?:twitter|x)\.com\/[^"']*)/i;
+var RE_VALTOWN = /^https:\/\/(?:www\.)?val\.town\/(v|embed)\/[a-zA-Z_$][0-9a-zA-Z_$]+\.[a-zA-Z_$][0-9a-zA-Z_$]+/;
 var RE_GENERIC_EMBED = /^<(?:iframe|blockquote)[\s\S]*?\s(?:src|href)=["']([^"']*)["'][\s\S]*?>$/i;
 var RE_GIPHY = /giphy.com\/(?:clips|embed|gifs)\/[a-zA-Z0-9]*?-?([a-zA-Z0-9]+)(?:[^a-zA-Z0-9]|$)/;
 var ALLOWED_DOMAINS = /* @__PURE__ */ new Set([
@@ -14683,39 +14165,21 @@ var getEmbedLink = (link) => {
   }
   if (RE_TWITTER.test(link)) {
     link = link.replace(/\bx.com\b/, "twitter.com");
-    let ret;
-    if (/<blockquote/.test(link)) {
-      const srcDoc = createSrcDoc(link);
-      ret = {
-        type: "document",
-        srcdoc: () => srcDoc,
-        intrinsicSize: { w: 480, h: 480 }
-      };
-    } else {
-      ret = {
-        type: "document",
-        srcdoc: (theme) => createSrcDoc(
-          `<blockquote class="twitter-tweet" data-dnt="true" data-theme="${theme}"><a href="${link}"></a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"><\/script>`
-        ),
-        intrinsicSize: { w: 480, h: 480 }
-      };
-    }
+    const ret = {
+      type: "document",
+      srcdoc: (theme) => createSrcDoc(
+        `<blockquote class="twitter-tweet" data-dnt="true" data-theme="${theme}"><a href="${link}"></a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"><\/script>`
+      ),
+      intrinsicSize: { w: 480, h: 480 },
+      sandbox: { allowSameOrigin: true }
+    };
     embeddedLinkCache.set(originalLink, ret);
     return ret;
   }
   if (RE_GH_GIST.test(link)) {
-    let ret;
-    if (/<script>/.test(link)) {
-      const srcDoc = createSrcDoc(link);
-      ret = {
-        type: "document",
-        srcdoc: () => srcDoc,
-        intrinsicSize: { w: 550, h: 720 }
-      };
-    } else {
-      ret = {
-        type: "document",
-        srcdoc: () => createSrcDoc(`
+    const ret = {
+      type: "document",
+      srcdoc: () => createSrcDoc(`
           <script src="${link}.js"><\/script>
           <style type="text/css">
             * { margin: 0px; }
@@ -14723,9 +14187,8 @@ var getEmbedLink = (link) => {
             .gist .gist-file { height: calc(100vh - 2px); padding: 0px; display: grid; grid-template-rows: 1fr auto; }
           </style>
         `),
-        intrinsicSize: { w: 550, h: 720 }
-      };
-    }
+      intrinsicSize: { w: 550, h: 720 }
+    };
     embeddedLinkCache.set(link, ret);
     return ret;
   }
@@ -14810,8 +14273,8 @@ var maybeParseEmbedSrc = (str) => {
     return twitterMatch[1];
   }
   const gistMatch = str.match(RE_GH_GIST_EMBED);
-  if (gistMatch && gistMatch.length === 2) {
-    return gistMatch[1];
+  if (gistMatch && gistMatch.length === 3) {
+    return `https://gist.github.com/${gistMatch[1]}/${gistMatch[2]}`;
   }
   if (RE_GIPHY.test(str)) {
     return `https://giphy.com/embed/${RE_GIPHY.exec(str)[1]}`;
@@ -15382,6 +14845,9 @@ var ImageSceneDataError = class extends Error {
     this.code = code;
   }
 };
+var InvalidFractionalIndexError = class extends Error {
+  code = "ELEMENT_HAS_INVALID_INDEX";
+};
 
 // data/filesystem.ts
 var INPUT_CHANGE_INTERVAL_MS = 500;
@@ -15616,12 +15082,576 @@ var normalizeSVG = async (SVGString) => {
     return svg.outerHTML;
   }
 };
-
-// renderer/staticScene.ts
-init_define_import_meta_env();
+
+// fractionalIndex.ts
+init_define_import_meta_env();
+
+// ../../node_modules/fractional-indexing/src/index.js
+init_define_import_meta_env();
+var BASE_62_DIGITS = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
+function midpoint(a2, b2, digits) {
+  const zero = digits[0];
+  if (b2 != null && a2 >= b2) {
+    throw new Error(a2 + " >= " + b2);
+  }
+  if (a2.slice(-1) === zero || b2 && b2.slice(-1) === zero) {
+    throw new Error("trailing zero");
+  }
+  if (b2) {
+    let n2 = 0;
+    while ((a2[n2] || zero) === b2[n2]) {
+      n2++;
+    }
+    if (n2 > 0) {
+      return b2.slice(0, n2) + midpoint(a2.slice(n2), b2.slice(n2), digits);
+    }
+  }
+  const digitA = a2 ? digits.indexOf(a2[0]) : 0;
+  const digitB = b2 != null ? digits.indexOf(b2[0]) : digits.length;
+  if (digitB - digitA > 1) {
+    const midDigit = Math.round(0.5 * (digitA + digitB));
+    return digits[midDigit];
+  } else {
+    if (b2 && b2.length > 1) {
+      return b2.slice(0, 1);
+    } else {
+      return digits[digitA] + midpoint(a2.slice(1), null, digits);
+    }
+  }
+}
+function validateInteger(int) {
+  if (int.length !== getIntegerLength(int[0])) {
+    throw new Error("invalid integer part of order key: " + int);
+  }
+}
+function getIntegerLength(head) {
+  if (head >= "a" && head <= "z") {
+    return head.charCodeAt(0) - "a".charCodeAt(0) + 2;
+  } else if (head >= "A" && head <= "Z") {
+    return "Z".charCodeAt(0) - head.charCodeAt(0) + 2;
+  } else {
+    throw new Error("invalid order key head: " + head);
+  }
+}
+function getIntegerPart(key) {
+  const integerPartLength = getIntegerLength(key[0]);
+  if (integerPartLength > key.length) {
+    throw new Error("invalid order key: " + key);
+  }
+  return key.slice(0, integerPartLength);
+}
+function validateOrderKey(key, digits) {
+  if (key === "A" + digits[0].repeat(26)) {
+    throw new Error("invalid order key: " + key);
+  }
+  const i2 = getIntegerPart(key);
+  const f = key.slice(i2.length);
+  if (f.slice(-1) === digits[0]) {
+    throw new Error("invalid order key: " + key);
+  }
+}
+function incrementInteger(x, digits) {
+  validateInteger(x);
+  const [head, ...digs] = x.split("");
+  let carry = true;
+  for (let i2 = digs.length - 1; carry && i2 >= 0; i2--) {
+    const d = digits.indexOf(digs[i2]) + 1;
+    if (d === digits.length) {
+      digs[i2] = digits[0];
+    } else {
+      digs[i2] = digits[d];
+      carry = false;
+    }
+  }
+  if (carry) {
+    if (head === "Z") {
+      return "a" + digits[0];
+    }
+    if (head === "z") {
+      return null;
+    }
+    const h = String.fromCharCode(head.charCodeAt(0) + 1);
+    if (h > "a") {
+      digs.push(digits[0]);
+    } else {
+      digs.pop();
+    }
+    return h + digs.join("");
+  } else {
+    return head + digs.join("");
+  }
+}
+function decrementInteger(x, digits) {
+  validateInteger(x);
+  const [head, ...digs] = x.split("");
+  let borrow = true;
+  for (let i2 = digs.length - 1; borrow && i2 >= 0; i2--) {
+    const d = digits.indexOf(digs[i2]) - 1;
+    if (d === -1) {
+      digs[i2] = digits.slice(-1);
+    } else {
+      digs[i2] = digits[d];
+      borrow = false;
+    }
+  }
+  if (borrow) {
+    if (head === "a") {
+      return "Z" + digits.slice(-1);
+    }
+    if (head === "A") {
+      return null;
+    }
+    const h = String.fromCharCode(head.charCodeAt(0) - 1);
+    if (h < "Z") {
+      digs.push(digits.slice(-1));
+    } else {
+      digs.pop();
+    }
+    return h + digs.join("");
+  } else {
+    return head + digs.join("");
+  }
+}
+function generateKeyBetween(a2, b2, digits = BASE_62_DIGITS) {
+  if (a2 != null) {
+    validateOrderKey(a2, digits);
+  }
+  if (b2 != null) {
+    validateOrderKey(b2, digits);
+  }
+  if (a2 != null && b2 != null && a2 >= b2) {
+    throw new Error(a2 + " >= " + b2);
+  }
+  if (a2 == null) {
+    if (b2 == null) {
+      return "a" + digits[0];
+    }
+    const ib2 = getIntegerPart(b2);
+    const fb2 = b2.slice(ib2.length);
+    if (ib2 === "A" + digits[0].repeat(26)) {
+      return ib2 + midpoint("", fb2, digits);
+    }
+    if (ib2 < b2) {
+      return ib2;
+    }
+    const res = decrementInteger(ib2, digits);
+    if (res == null) {
+      throw new Error("cannot decrement any more");
+    }
+    return res;
+  }
+  if (b2 == null) {
+    const ia2 = getIntegerPart(a2);
+    const fa2 = a2.slice(ia2.length);
+    const i3 = incrementInteger(ia2, digits);
+    return i3 == null ? ia2 + midpoint(fa2, null, digits) : i3;
+  }
+  const ia = getIntegerPart(a2);
+  const fa = a2.slice(ia.length);
+  const ib = getIntegerPart(b2);
+  const fb = b2.slice(ib.length);
+  if (ia === ib) {
+    return ia + midpoint(fa, fb, digits);
+  }
+  const i2 = incrementInteger(ia, digits);
+  if (i2 == null) {
+    throw new Error("cannot increment any more");
+  }
+  if (i2 < b2) {
+    return i2;
+  }
+  return ia + midpoint(fa, null, digits);
+}
+function generateNKeysBetween(a2, b2, n2, digits = BASE_62_DIGITS) {
+  if (n2 === 0) {
+    return [];
+  }
+  if (n2 === 1) {
+    return [generateKeyBetween(a2, b2, digits)];
+  }
+  if (b2 == null) {
+    let c2 = generateKeyBetween(a2, b2, digits);
+    const result = [c2];
+    for (let i2 = 0; i2 < n2 - 1; i2++) {
+      c2 = generateKeyBetween(c2, b2, digits);
+      result.push(c2);
+    }
+    return result;
+  }
+  if (a2 == null) {
+    let c2 = generateKeyBetween(a2, b2, digits);
+    const result = [c2];
+    for (let i2 = 0; i2 < n2 - 1; i2++) {
+      c2 = generateKeyBetween(a2, c2, digits);
+      result.push(c2);
+    }
+    result.reverse();
+    return result;
+  }
+  const mid = Math.floor(n2 / 2);
+  const c = generateKeyBetween(a2, b2, digits);
+  return [
+    ...generateNKeysBetween(a2, c, mid, digits),
+    c,
+    ...generateNKeysBetween(c, b2, n2 - mid - 1, digits)
+  ];
+}
+
+// fractionalIndex.ts
+var validateFractionalIndices = (indices) => {
+  for (const [i2, index] of indices.entries()) {
+    const predecessorIndex = indices[i2 - 1];
+    const successorIndex = indices[i2 + 1];
+    if (!isValidFractionalIndex(index, predecessorIndex, successorIndex)) {
+      throw new InvalidFractionalIndexError(
+        `Fractional indices invariant for element has been compromised - ["${predecessorIndex}", "${index}", "${successorIndex}"] [predecessor, current, successor]`
+      );
+    }
+  }
+};
+var syncMovedIndices = (elements, movedElements) => {
+  try {
+    const indicesGroups = getMovedIndicesGroups(elements, movedElements);
+    const elementsUpdates = generateIndices(elements, indicesGroups);
+    validateFractionalIndices(
+      elements.map((x) => elementsUpdates.get(x)?.index || x.index)
+    );
+    for (const [element, update] of elementsUpdates) {
+      mutateElement(element, update, false);
+    }
+  } catch (e2) {
+    syncInvalidIndices(elements);
+  }
+  return elements;
+};
+var syncInvalidIndices = (elements) => {
+  const indicesGroups = getInvalidIndicesGroups(elements);
+  const elementsUpdates = generateIndices(elements, indicesGroups);
+  for (const [element, update] of elementsUpdates) {
+    mutateElement(element, update, false);
+  }
+  return elements;
+};
+var getMovedIndicesGroups = (elements, movedElements) => {
+  const indicesGroups = [];
+  let i2 = 0;
+  while (i2 < elements.length) {
+    if (movedElements.has(elements[i2].id) && !isValidFractionalIndex(
+      elements[i2]?.index,
+      elements[i2 - 1]?.index,
+      elements[i2 + 1]?.index
+    )) {
+      const indicesGroup = [i2 - 1, i2];
+      while (++i2 < elements.length) {
+        if (!(movedElements.has(elements[i2].id) && !isValidFractionalIndex(
+          elements[i2]?.index,
+          elements[i2 - 1]?.index,
+          elements[i2 + 1]?.index
+        ))) {
+          break;
+        }
+        indicesGroup.push(i2);
+      }
+      indicesGroup.push(i2);
+      indicesGroups.push(indicesGroup);
+    } else {
+      i2++;
+    }
+  }
+  return indicesGroups;
+};
+var getInvalidIndicesGroups = (elements) => {
+  const indicesGroups = [];
+  let lowerBound = void 0;
+  let upperBound = void 0;
+  let lowerBoundIndex = -1;
+  let upperBoundIndex = 0;
+  const getLowerBound = (index) => {
+    const lowerBound2 = elements[lowerBoundIndex] ? elements[lowerBoundIndex].index : void 0;
+    const candidate = elements[index - 1]?.index;
+    if (!lowerBound2 && candidate || // first lowerBound
+    lowerBound2 && candidate && candidate > lowerBound2) {
+      return [candidate, index - 1];
+    }
+    return [lowerBound2, lowerBoundIndex];
+  };
+  const getUpperBound = (index) => {
+    const upperBound2 = elements[upperBoundIndex] ? elements[upperBoundIndex].index : void 0;
+    if (upperBound2 && index < upperBoundIndex) {
+      return [upperBound2, upperBoundIndex];
+    }
+    let i3 = upperBoundIndex;
+    while (++i3 < elements.length) {
+      const candidate = elements[i3]?.index;
+      if (!upperBound2 && candidate || // first upperBound
+      upperBound2 && candidate && candidate > upperBound2) {
+        return [candidate, i3];
+      }
+    }
+    return [void 0, i3];
+  };
+  let i2 = 0;
+  while (i2 < elements.length) {
+    const current = elements[i2].index;
+    [lowerBound, lowerBoundIndex] = getLowerBound(i2);
+    [upperBound, upperBoundIndex] = getUpperBound(i2);
+    if (!isValidFractionalIndex(current, lowerBound, upperBound)) {
+      const indicesGroup = [lowerBoundIndex, i2];
+      while (++i2 < elements.length) {
+        const current2 = elements[i2].index;
+        const [nextLowerBound, nextLowerBoundIndex] = getLowerBound(i2);
+        const [nextUpperBound, nextUpperBoundIndex] = getUpperBound(i2);
+        if (isValidFractionalIndex(current2, nextLowerBound, nextUpperBound)) {
+          break;
+        }
+        [lowerBound, lowerBoundIndex] = [nextLowerBound, nextLowerBoundIndex];
+        [upperBound, upperBoundIndex] = [nextUpperBound, nextUpperBoundIndex];
+        indicesGroup.push(i2);
+      }
+      indicesGroup.push(upperBoundIndex);
+      indicesGroups.push(indicesGroup);
+    } else {
+      i2++;
+    }
+  }
+  return indicesGroups;
+};
+var isValidFractionalIndex = (index, predecessor, successor) => {
+  if (!index) {
+    return false;
+  }
+  if (predecessor && successor) {
+    return predecessor < index && index < successor;
+  }
+  if (!predecessor && successor) {
+    return index < successor;
+  }
+  if (predecessor && !successor) {
+    return predecessor < index;
+  }
+  return !!index;
+};
+var generateIndices = (elements, indicesGroups) => {
+  const elementsUpdates = /* @__PURE__ */ new Map();
+  for (const indices of indicesGroups) {
+    const lowerBoundIndex = indices.shift();
+    const upperBoundIndex = indices.pop();
+    const fractionalIndices = generateNKeysBetween(
+      elements[lowerBoundIndex]?.index,
+      elements[upperBoundIndex]?.index,
+      indices.length
+    );
+    for (let i2 = 0; i2 < indices.length; i2++) {
+      const element = elements[indices[i2]];
+      elementsUpdates.set(element, {
+        index: fractionalIndices[i2]
+      });
+    }
+  }
+  return elementsUpdates;
+};
+
+// renderer/staticScene.ts
+init_define_import_meta_env();
+
+// components/hyperlink/helpers.ts
+init_define_import_meta_env();
+
+// element/collision.ts
+init_define_import_meta_env();
+
+// ../utils/geometry/shape.ts
+init_define_import_meta_env();
+var getPolygonShape = (element) => {
+  const { angle, width, height, x, y } = element;
+  const angleInDegrees = angleToDegrees(angle);
+  const cx = x + width / 2;
+  const cy = y + height / 2;
+  const center = [cx, cy];
+  let data = [];
+  if (element.type === "diamond") {
+    data = [
+      pointRotate([cx, y], angleInDegrees, center),
+      pointRotate([x + width, cy], angleInDegrees, center),
+      pointRotate([cx, y + height], angleInDegrees, center),
+      pointRotate([x, cy], angleInDegrees, center)
+    ];
+  } else {
+    data = [
+      pointRotate([x, y], angleInDegrees, center),
+      pointRotate([x + width, y], angleInDegrees, center),
+      pointRotate([x + width, y + height], angleInDegrees, center),
+      pointRotate([x, y + height], angleInDegrees, center)
+    ];
+  }
+  return {
+    type: "polygon",
+    data
+  };
+};
+var getEllipseShape = (element) => {
+  const { width, height, angle, x, y } = element;
+  return {
+    type: "ellipse",
+    data: {
+      center: [x + width / 2, y + height / 2],
+      angle,
+      halfWidth: width / 2,
+      halfHeight: height / 2
+    }
+  };
+};
+var getCurvePathOps2 = (shape) => {
+  for (const set of shape.sets) {
+    if (set.type === "path") {
+      return set.ops;
+    }
+  }
+  return shape.sets[0].ops;
+};
+var getCurveShape = (roughShape, startingPoint = [0, 0], angleInRadian, center) => {
+  const transform = (p) => pointRotate(
+    [p[0] + startingPoint[0], p[1] + startingPoint[1]],
+    angleToDegrees(angleInRadian),
+    center
+  );
+  const ops = getCurvePathOps2(roughShape);
+  const polycurve = [];
+  let p0 = [0, 0];
+  for (const op of ops) {
+    if (op.op === "move") {
+      p0 = transform(op.data);
+    }
+    if (op.op === "bcurveTo") {
+      const p1 = transform([op.data[0], op.data[1]]);
+      const p2 = transform([op.data[2], op.data[3]]);
+      const p3 = transform([op.data[4], op.data[5]]);
+      polycurve.push([p0, p1, p2, p3]);
+      p0 = p3;
+    }
+  }
+  return {
+    type: "polycurve",
+    data: polycurve
+  };
+};
+var polylineFromPoints = (points) => {
+  let previousPoint = points[0];
+  const polyline = [];
+  for (let i2 = 1; i2 < points.length; i2++) {
+    const nextPoint = points[i2];
+    polyline.push([previousPoint, nextPoint]);
+    previousPoint = nextPoint;
+  }
+  return polyline;
+};
+var getFreedrawShape = (element, center, isClosed2 = false) => {
+  const angle = angleToDegrees(element.angle);
+  const transform = (p) => pointRotate(pointAdd(p, [element.x, element.y]), angle, center);
+  const polyline = polylineFromPoints(
+    element.points.map((p) => transform(p))
+  );
+  return isClosed2 ? {
+    type: "polygon",
+    data: close(polyline.flat())
+  } : {
+    type: "polyline",
+    data: polyline
+  };
+};
+var getClosedCurveShape = (element, roughShape, startingPoint = [0, 0], angleInRadian, center) => {
+  const transform = (p) => pointRotate(
+    [p[0] + startingPoint[0], p[1] + startingPoint[1]],
+    angleToDegrees(angleInRadian),
+    center
+  );
+  if (element.roundness === null) {
+    return {
+      type: "polygon",
+      data: close(element.points.map((p) => transform(p)))
+    };
+  }
+  const ops = getCurvePathOps2(roughShape);
+  const points = [];
+  let odd = false;
+  for (const operation of ops) {
+    if (operation.op === "move") {
+      odd = !odd;
+      if (odd) {
+        points.push([operation.data[0], operation.data[1]]);
+      }
+    } else if (operation.op === "bcurveTo") {
+      if (odd) {
+        points.push([operation.data[0], operation.data[1]]);
+        points.push([operation.data[2], operation.data[3]]);
+        points.push([operation.data[4], operation.data[5]]);
+      }
+    } else if (operation.op === "lineTo") {
+      if (odd) {
+        points.push([operation.data[0], operation.data[1]]);
+      }
+    }
+  }
+  const polygonPoints = pointsOnBezierCurves(points, 10, 5).map(
+    (p) => transform(p)
+  );
+  return {
+    type: "polygon",
+    data: polygonPoints
+  };
+};
+
+// element/collision.ts
+var shouldTestInside = (element) => {
+  if (element.type === "arrow") {
+    return false;
+  }
+  const isDraggableFromInside = !isTransparent(element.backgroundColor) || hasBoundTextElement(element) || isIframeLikeElement(element) || isTextElement(element);
+  if (element.type === "line") {
+    return isDraggableFromInside && isPathALoop(element.points);
+  }
+  if (element.type === "freedraw") {
+    return isDraggableFromInside && isPathALoop(element.points);
+  }
+  return isDraggableFromInside || isImageElement(element);
+};
+var hitElementItself = ({
+  x,
+  y,
+  element,
+  shape,
+  threshold = 10,
+  frameNameBound = null
+}) => {
+  let hit = shouldTestInside(element) ? (
+    // Since `inShape` tests STRICTLY againt the insides of a shape
+    // we would need `onShape` as well to include the "borders"
+    isPointInShape([x, y], shape) || isPointOnShape([x, y], shape, threshold)
+  ) : isPointOnShape([x, y], shape, threshold);
+  if (!hit && frameNameBound) {
+    hit = isPointInShape([x, y], {
+      type: "polygon",
+      data: getPolygonShape(frameNameBound).data
+    });
+  }
+  return hit;
+};
+var hitElementBoundingBox = (x, y, element, elementsMap, tolerance = 0) => {
+  let [x1, y1, x2, y2] = getElementBounds(element, elementsMap);
+  x1 -= tolerance;
+  y1 -= tolerance;
+  x2 += tolerance;
+  y2 += tolerance;
+  return isPointWithinBounds([x1, y1], [x, y], [x2, y2]);
+};
+var hitElementBoundingBoxOnly = (hitArgs, elementsMap) => {
+  return !hitElementItself(hitArgs) && hitElementBoundingBox(hitArgs.x, hitArgs.y, hitArgs.element, elementsMap);
+};
+var hitElementBoundText = (x, y, textShape) => {
+  return textShape && isPointInShape([x, y], textShape);
+};
 
 // components/hyperlink/helpers.ts
-init_define_import_meta_env();
 var EXTERNAL_LINK_IMG = document.createElement("img");
 EXTERNAL_LINK_IMG.src = `data:${MIME_TYPES.svg}, ${encodeURIComponent(
   `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#1971c2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>`
@@ -15637,7 +15667,7 @@ var getLinkHandleFromCoords = ([x1, y1, x2, y2], angle, appState) => {
   const dashedLineMargin = 4 / appState.zoom.value;
   const x = x2 + dashedLineMargin - centeringOffset;
   const y = y1 - dashedLineMargin - linkMarginY + centeringOffset;
-  const [rotatedX, rotatedY] = rotate2(
+  const [rotatedX, rotatedY] = rotate3(
     x + linkWidth / 2,
     y + linkHeight / 2,
     centerX,
@@ -15666,14 +15696,7 @@ var isPointHittingLink = (element, elementsMap, appState, [x, y], isMobile) => {
   if (!element.link || appState.selectedElementIds[element.id]) {
     return false;
   }
-  const threshold = 4 / appState.zoom.value;
-  if (!isMobile && appState.viewModeEnabled && isPointHittingElementBoundingBox(
-    element,
-    elementsMap,
-    [x, y],
-    threshold,
-    null
-  )) {
+  if (!isMobile && appState.viewModeEnabled && hitElementBoundingBox(x, y, element, elementsMap)) {
     return true;
   }
   return isPointHittingLinkIcon(element, elementsMap, appState, [x, y]);
@@ -15704,7 +15727,7 @@ var bootstrapCanvas = ({
   const context = canvas2.getContext("2d");
   context.setTransform(1, 0, 0, 1, 0, 0);
   context.scale(scale, scale);
-  if (isExporting && theme === "dark") {
+  if (isExporting && theme === THEME.DARK) {
     context.filter = THEME_FILTER;
   }
   if (typeof viewBackgroundColor === "string") {
@@ -16100,7 +16123,7 @@ var exportToCanvas = async (elements, appState, files, {
       arrayToMap(elementsForRender)
     ),
     allElementsMap: toBrandedType(
-      arrayToMap(elements)
+      arrayToMap(syncInvalidIndices(elements))
     ),
     visibleElements: elementsForRender,
     scale,
@@ -16112,7 +16135,7 @@ var exportToCanvas = async (elements, appState, files, {
       scrollY: -minY + exportPadding,
       zoom: defaultAppState2.zoom,
       shouldCacheIgnoreZoom: false,
-      theme: appState.exportWithDarkMode ? "dark" : "light"
+      theme: appState.exportWithDarkMode ? THEME.DARK : THEME.LIGHT
     },
     renderConfig: {
       canvasBackgroundColor: viewBackgroundColor,
@@ -16151,7 +16174,7 @@ var exportToSvg = async (elements, appState, files, opts) => {
   let metadata = "";
   if (exportEmbedScene) {
     try {
-      metadata = await (await import("./image-EDKQZH7Z.js")).encodeSvgMetadata({
+      metadata = await (await import("./image-JKT6GXZD.js")).encodeSvgMetadata({
         // when embedding scene, we want to embed the origionally supplied
         // elements which don't contain the temp frame labels.
         // But it also requires that the exportToSvg is being supplied with
@@ -16305,6 +16328,7 @@ var restoreElementWithProperties = (element, extra) => {
     // newly added elements
     version: element.version || 1,
     versionNonce: element.versionNonce ?? 0,
+    index: element.index ?? null,
     isDeleted: element.isDeleted ?? false,
     id: element.id || randomId(),
     fillStyle: element.fillStyle || DEFAULT_ELEMENT_PROPS.fillStyle,
@@ -16335,9 +16359,6 @@ var restoreElementWithProperties = (element, extra) => {
   if ("customData" in element || "customData" in extra) {
     base.customData = "customData" in extra ? extra.customData : element.customData;
   }
-  if (PRECEDING_ELEMENT_KEY in element) {
-    base[PRECEDING_ELEMENT_KEY] = element[PRECEDING_ELEMENT_KEY];
-  }
   return {
     ...base,
     ...getNormalizedDimensions(base),
@@ -16488,23 +16509,28 @@ var repairFrameMembership = (element, elementsMap) => {
 var restoreElements = (elements, localElements, opts) => {
   const existingIds = /* @__PURE__ */ new Set();
   const localElementsMap = localElements ? arrayToMap(localElements) : null;
-  const restoredElements = (elements || []).reduce((elements2, element) => {
-    if (element.type !== "selection" && !isInvisiblySmallElement(element)) {
-      let migratedElement = restoreElement(element);
-      if (migratedElement) {
-        const localElement = localElementsMap?.get(element.id);
-        if (localElement && localElement.version > migratedElement.version) {
-          migratedElement = bumpVersion(migratedElement, localElement.version);
-        }
-        if (existingIds.has(migratedElement.id)) {
-          migratedElement = { ...migratedElement, id: randomId() };
+  const restoredElements = syncInvalidIndices(
+    (elements || []).reduce((elements2, element) => {
+      if (element.type !== "selection" && !isInvisiblySmallElement(element)) {
+        let migratedElement = restoreElement(element);
+        if (migratedElement) {
+          const localElement = localElementsMap?.get(element.id);
+          if (localElement && localElement.version > migratedElement.version) {
+            migratedElement = bumpVersion(
+              migratedElement,
+              localElement.version
+            );
+          }
+          if (existingIds.has(migratedElement.id)) {
+            migratedElement = { ...migratedElement, id: randomId() };
+          }
+          existingIds.add(migratedElement.id);
+          elements2.push(migratedElement);
         }
-        existingIds.add(migratedElement.id);
-        elements2.push(migratedElement);
       }
-    }
-    return elements2;
-  }, []);
+      return elements2;
+    }, [])
+  );
   if (!opts?.repairBindings) {
     return restoredElements;
   }
@@ -18117,7 +18143,10 @@ var getNonDeletedElements3 = (allElements) => {
   for (const element of allElements) {
     if (!element.isDeleted) {
       elements.push(element);
-      elementsMap.set(element.id, element);
+      elementsMap.set(
+        element.id,
+        element
+      );
     }
   }
   return { elementsMap, elements };
@@ -18164,6 +18193,7 @@ var Scene = class _Scene {
   nonDeletedElementsMap = toBrandedType(
     /* @__PURE__ */ new Map()
   );
+  // ideally all elements within the scene should be wrapped around with `Ordered` type, but right now there is no real benefit doing so
   elements = [];
   nonDeletedFramesLikes = [];
   frames = [];
@@ -18255,9 +18285,15 @@ var Scene = class _Scene {
     return didChange;
   }
   replaceAllElements(nextElements) {
-    this.elements = // ts doesn't like `Array.isArray` of `instanceof Map`
-    nextElements instanceof Array ? nextElements : Array.from(nextElements.values());
+    const _nextElements = (
+      // ts doesn't like `Array.isArray` of `instanceof Map`
+      nextElements instanceof Array ? nextElements : Array.from(nextElements.values())
+    );
     const nextFrameLikes = [];
+    if (define_import_meta_env_default.DEV || define_import_meta_env_default.MODE === ENV.TEST) {
+      validateFractionalIndices(_nextElements.map((x) => x.index));
+    }
+    this.elements = syncInvalidIndices(_nextElements);
     this.elementsMap.clear();
     this.elements.forEach((element) => {
       if (isFrameLikeElement(element)) {
@@ -18292,8 +18328,8 @@ var Scene = class _Scene {
     };
   }
   destroy() {
-    this.nonDeletedElements = [];
     this.elements = [];
+    this.nonDeletedElements = [];
     this.nonDeletedFramesLikes = [];
     this.frames = [];
     this.elementsMap.clear();
@@ -18318,6 +18354,7 @@ var Scene = class _Scene {
       element,
       ...this.elements.slice(index)
     ];
+    syncMovedIndices(nextElements, arrayToMap([element]));
     this.replaceAllElements(nextElements);
   }
   insertElementsAtIndex(elements, index) {
@@ -18331,14 +18368,16 @@ var Scene = class _Scene {
       ...elements,
       ...this.elements.slice(index)
     ];
+    syncMovedIndices(nextElements, arrayToMap(elements));
     this.replaceAllElements(nextElements);
   }
-  addNewElement = (element) => {
-    if (element.frameId) {
-      this.insertElementAtIndex(element, this.getElementIndex(element.frameId));
-    } else {
-      this.replaceAllElements([...this.elements, element]);
-    }
+  insertElement = (element) => {
+    const index = element.frameId ? this.getElementIndex(element.frameId) : this.elements.length;
+    this.insertElementAtIndex(element, index);
+  };
+  insertElements = (elements) => {
+    const index = elements[0].frameId ? this.getElementIndex(elements[0].frameId) : this.elements.length;
+    this.insertElementsAtIndex(elements, index);
   };
   getElementIndex(elementId) {
     return this.elements.findIndex((element) => element.id === elementId);
@@ -18527,6 +18566,210 @@ var getNormalizedDimensions = (element) => {
   return ret;
 };
 
+// element/transformHandles.ts
+init_define_import_meta_env();
+var transformHandleSizes = {
+  mouse: 8,
+  pen: 16,
+  touch: 28
+};
+var ROTATION_RESIZE_HANDLE_GAP = 16;
+var OMIT_SIDES_FOR_MULTIPLE_ELEMENTS = {
+  e: true,
+  s: true,
+  n: true,
+  w: true
+};
+var OMIT_SIDES_FOR_FRAME = {
+  e: true,
+  s: true,
+  n: true,
+  w: true,
+  rotation: true
+};
+var OMIT_SIDES_FOR_TEXT_ELEMENT = {
+  e: true,
+  s: true,
+  n: true,
+  w: true
+};
+var OMIT_SIDES_FOR_LINE_SLASH = {
+  e: true,
+  s: true,
+  n: true,
+  w: true,
+  nw: true,
+  se: true
+};
+var OMIT_SIDES_FOR_LINE_BACKSLASH = {
+  e: true,
+  s: true,
+  n: true,
+  w: true
+};
+var generateTransformHandle = (x, y, width, height, cx, cy, angle) => {
+  const [xx, yy] = rotate3(x + width / 2, y + height / 2, cx, cy, angle);
+  return [xx - width / 2, yy - height / 2, width, height];
+};
+var getTransformHandlesFromCoords = ([x1, y1, x2, y2, cx, cy], angle, zoom, pointerType, omitSides = {}, margin = 4) => {
+  const size = transformHandleSizes[pointerType];
+  const handleWidth = size / zoom.value;
+  const handleHeight = size / zoom.value;
+  const handleMarginX = size / zoom.value;
+  const handleMarginY = size / zoom.value;
+  const width = x2 - x1;
+  const height = y2 - y1;
+  const dashedLineMargin = margin / zoom.value;
+  const centeringOffset = (size - DEFAULT_TRANSFORM_HANDLE_SPACING * 2) / (2 * zoom.value);
+  const transformHandles = {
+    nw: omitSides.nw ? void 0 : generateTransformHandle(
+      x1 - dashedLineMargin - handleMarginX + centeringOffset,
+      y1 - dashedLineMargin - handleMarginY + centeringOffset,
+      handleWidth,
+      handleHeight,
+      cx,
+      cy,
+      angle
+    ),
+    ne: omitSides.ne ? void 0 : generateTransformHandle(
+      x2 + dashedLineMargin - centeringOffset,
+      y1 - dashedLineMargin - handleMarginY + centeringOffset,
+      handleWidth,
+      handleHeight,
+      cx,
+      cy,
+      angle
+    ),
+    sw: omitSides.sw ? void 0 : generateTransformHandle(
+      x1 - dashedLineMargin - handleMarginX + centeringOffset,
+      y2 + dashedLineMargin - centeringOffset,
+      handleWidth,
+      handleHeight,
+      cx,
+      cy,
+      angle
+    ),
+    se: omitSides.se ? void 0 : generateTransformHandle(
+      x2 + dashedLineMargin - centeringOffset,
+      y2 + dashedLineMargin - centeringOffset,
+      handleWidth,
+      handleHeight,
+      cx,
+      cy,
+      angle
+    ),
+    rotation: omitSides.rotation ? void 0 : generateTransformHandle(
+      x1 + width / 2 - handleWidth / 2,
+      y1 - dashedLineMargin - handleMarginY + centeringOffset - ROTATION_RESIZE_HANDLE_GAP / zoom.value,
+      handleWidth,
+      handleHeight,
+      cx,
+      cy,
+      angle
+    )
+  };
+  const minimumSizeForEightHandles = 5 * transformHandleSizes.mouse / zoom.value;
+  if (Math.abs(width) > minimumSizeForEightHandles) {
+    if (!omitSides.n) {
+      transformHandles.n = generateTransformHandle(
+        x1 + width / 2 - handleWidth / 2,
+        y1 - dashedLineMargin - handleMarginY + centeringOffset,
+        handleWidth,
+        handleHeight,
+        cx,
+        cy,
+        angle
+      );
+    }
+    if (!omitSides.s) {
+      transformHandles.s = generateTransformHandle(
+        x1 + width / 2 - handleWidth / 2,
+        y2 + dashedLineMargin - centeringOffset,
+        handleWidth,
+        handleHeight,
+        cx,
+        cy,
+        angle
+      );
+    }
+  }
+  if (Math.abs(height) > minimumSizeForEightHandles) {
+    if (!omitSides.w) {
+      transformHandles.w = generateTransformHandle(
+        x1 - dashedLineMargin - handleMarginX + centeringOffset,
+        y1 + height / 2 - handleHeight / 2,
+        handleWidth,
+        handleHeight,
+        cx,
+        cy,
+        angle
+      );
+    }
+    if (!omitSides.e) {
+      transformHandles.e = generateTransformHandle(
+        x2 + dashedLineMargin - centeringOffset,
+        y1 + height / 2 - handleHeight / 2,
+        handleWidth,
+        handleHeight,
+        cx,
+        cy,
+        angle
+      );
+    }
+  }
+  return transformHandles;
+};
+var getTransformHandles = (element, zoom, elementsMap, pointerType = "mouse") => {
+  if (element.locked) {
+    return {};
+  }
+  let omitSides = {};
+  if (element.type === "freedraw" || isLinearElement(element)) {
+    if (element.points.length === 2) {
+      const [, p1] = element.points;
+      if (p1[0] === 0 || p1[1] === 0) {
+        omitSides = OMIT_SIDES_FOR_LINE_BACKSLASH;
+      } else if (p1[0] > 0 && p1[1] < 0) {
+        omitSides = OMIT_SIDES_FOR_LINE_SLASH;
+      } else if (p1[0] > 0 && p1[1] > 0) {
+        omitSides = OMIT_SIDES_FOR_LINE_BACKSLASH;
+      } else if (p1[0] < 0 && p1[1] > 0) {
+        omitSides = OMIT_SIDES_FOR_LINE_SLASH;
+      } else if (p1[0] < 0 && p1[1] < 0) {
+        omitSides = OMIT_SIDES_FOR_LINE_BACKSLASH;
+      }
+    }
+  } else if (isTextElement(element)) {
+    omitSides = OMIT_SIDES_FOR_TEXT_ELEMENT;
+  } else if (isFrameLikeElement(element)) {
+    omitSides = {
+      rotation: true
+    };
+  }
+  const dashedLineMargin = isLinearElement(element) ? DEFAULT_TRANSFORM_HANDLE_SPACING + 8 : DEFAULT_TRANSFORM_HANDLE_SPACING;
+  return getTransformHandlesFromCoords(
+    getElementAbsoluteCoords(element, elementsMap, true),
+    element.angle,
+    zoom,
+    pointerType,
+    omitSides,
+    dashedLineMargin
+  );
+};
+var shouldShowBoundingBox = (elements, appState) => {
+  if (appState.editingLinearElement) {
+    return false;
+  }
+  if (elements.length > 1) {
+    return true;
+  }
+  const element = elements[0];
+  if (!isLinearElement(element)) {
+    return true;
+  }
+  return element.points.length > 2;
+};
+
 // element/resizeTest.ts
 init_define_import_meta_env();
 var isInsideTransformHandle = (transformHandle, x, y) => x >= transformHandle[0] && x <= transformHandle[0] + transformHandle[2] && y >= transformHandle[1] && y <= transformHandle[1] + transformHandle[3];
@@ -18765,7 +19008,7 @@ var resizeSingleTextElement = (element, elementsMap, transformHandleType, should
   const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
   const cx = (x1 + x2) / 2;
   const cy = (y1 + y2) / 2;
-  const [rotatedX, rotatedY] = rotate2(
+  const [rotatedX, rotatedY] = rotate3(
     pointerX,
     pointerY,
     cx,
@@ -19229,7 +19472,7 @@ var rotateMultipleElements = (originalElements, elements, elementsMap, pointerX,
     const cx = (x1 + x2) / 2;
     const cy = (y1 + y2) / 2;
     const origAngle = originalElements.get(element.id)?.angle ?? element.angle;
-    const [rotatedCX, rotatedCY] = rotate2(
+    const [rotatedCX, rotatedCY] = rotate3(
       cx,
       cy,
       centerX,
@@ -19268,24 +19511,24 @@ var getResizeOffsetXY = (transformHandleType, selectedElements, elementsMap, x,
   const cx = (x1 + x2) / 2;
   const cy = (y1 + y2) / 2;
   const angle = selectedElements.length === 1 ? selectedElements[0].angle : 0;
-  [x, y] = rotate2(x, y, cx, cy, -angle);
+  [x, y] = rotate3(x, y, cx, cy, -angle);
   switch (transformHandleType) {
     case "n":
-      return rotate2(x - (x1 + x2) / 2, y - y1, 0, 0, angle);
+      return rotate3(x - (x1 + x2) / 2, y - y1, 0, 0, angle);
     case "s":
-      return rotate2(x - (x1 + x2) / 2, y - y2, 0, 0, angle);
+      return rotate3(x - (x1 + x2) / 2, y - y2, 0, 0, angle);
     case "w":
-      return rotate2(x - x1, y - (y1 + y2) / 2, 0, 0, angle);
+      return rotate3(x - x1, y - (y1 + y2) / 2, 0, 0, angle);
     case "e":
-      return rotate2(x - x2, y - (y1 + y2) / 2, 0, 0, angle);
+      return rotate3(x - x2, y - (y1 + y2) / 2, 0, 0, angle);
     case "nw":
-      return rotate2(x - x1, y - y1, 0, 0, angle);
+      return rotate3(x - x1, y - y1, 0, 0, angle);
     case "ne":
-      return rotate2(x - x2, y - y1, 0, 0, angle);
+      return rotate3(x - x2, y - y1, 0, 0, angle);
     case "sw":
-      return rotate2(x - x1, y - y2, 0, 0, angle);
+      return rotate3(x - x1, y - y2, 0, 0, angle);
     case "se":
-      return rotate2(x - x2, y - y2, 0, 0, angle);
+      return rotate3(x - x2, y - y2, 0, 0, angle);
     default:
       return [0, 0];
   }
@@ -19455,7 +19698,7 @@ var parseFileContents = async (blob) => {
   let contents;
   if (blob.type === MIME_TYPES.png) {
     try {
-      return await (await import("./image-EDKQZH7Z.js")).decodePngMetadata(blob);
+      return await (await import("./image-JKT6GXZD.js")).decodePngMetadata(blob);
     } catch (error) {
       if (error.message === "INVALID") {
         throw new ImageSceneDataError(
@@ -19482,7 +19725,7 @@ var parseFileContents = async (blob) => {
     }
     if (blob.type === MIME_TYPES.svg) {
       try {
-        return await (await import("./image-EDKQZH7Z.js")).decodeSvgMetadata({
+        return await (await import("./image-JKT6GXZD.js")).decodeSvgMetadata({
           svg: contents
         });
       } catch (error) {
@@ -20054,6 +20297,7 @@ export {
   arrayToMap,
   arrayToMapWithIndex,
   isTestEnv,
+  isDevEnv,
   wrapEvent,
   updateObject,
   getFrame,
@@ -20095,6 +20339,10 @@ export {
   getDefaultRoundnessTypeForElement,
   randomInteger,
   randomId,
+  AbortError,
+  ImageSceneDataError,
+  syncMovedIndices,
+  syncInvalidIndices,
   Scene_default,
   getSizeFromPoints,
   rotatePoint,
@@ -20110,17 +20358,7 @@ export {
   hasStrokeStyle,
   canChangeRoundness,
   canHaveArrowheads,
-  getElementsAtPosition,
-  OMIT_SIDES_FOR_MULTIPLE_ELEMENTS,
-  OMIT_SIDES_FOR_FRAME,
-  getTransformHandlesFromCoords,
-  getTransformHandles,
-  shouldShowBoundingBox,
-  hitTest,
-  isHittingElementBoundingBoxWithoutHittingElement,
-  isHittingElementNotConsideringBoundingBox,
-  isPointHittingElementBoundingBox,
-  maxBindingGap,
+  isPointInShape,
   CODES,
   KEYS,
   isArrowKey,
@@ -20140,6 +20378,7 @@ export {
   getEligibleElementsForBinding,
   fixBindingsAfterDuplication,
   fixBindingsAfterDeletion,
+  maxBindingGap,
   LinearElementEditor,
   originalContainerCache,
   updateOriginalContainerCache,
@@ -20162,7 +20401,6 @@ export {
   getTextElementAngle,
   shouldAllowVerticalAlign,
   suppportsHorizontalAlign,
-  getTextBindableContainerAtPosition,
   isValidTextContainer,
   computeContainerDimensionForBoundText,
   getBoundTextMaxWidth,
@@ -20218,8 +20456,6 @@ export {
   maybeParseEmbedSrc,
   embeddableURLValidator,
   e,
-  AbortError,
-  ImageSceneDataError,
   fileOpen,
   fileSave,
   restoreElements,
@@ -20257,6 +20493,16 @@ export {
   updateImageCache,
   getInitializedImageElements,
   normalizeSVG,
+  getPolygonShape,
+  getEllipseShape,
+  getCurveShape,
+  getFreedrawShape,
+  getClosedCurveShape,
+  shouldTestInside,
+  hitElementItself,
+  hitElementBoundingBox,
+  hitElementBoundingBoxOnly,
+  hitElementBoundText,
   getLinkHandleFromCoords,
   isPointHittingLinkIcon,
   isPointHittingLink,
@@ -20313,6 +20559,11 @@ export {
   isElementInViewport,
   getLockedLinearCursorAlignSize,
   getNormalizedDimensions,
+  OMIT_SIDES_FOR_MULTIPLE_ELEMENTS,
+  OMIT_SIDES_FOR_FRAME,
+  getTransformHandlesFromCoords,
+  getTransformHandles,
+  shouldShowBoundingBox,
   getElementWithTransformHandleType,
   getTransformHandleTypeFromCoords,
   getCursorForResizingElement,
@@ -20342,4 +20593,4 @@ export {
   getNormalizedZoom,
   getStateForZoom
 };
-//# sourceMappingURL=chunk-RWZVJAQU.js.map
+//# sourceMappingURL=chunk-7D5BMEAB.js.map