@myoc/element 0.19.518 → 0.19.520

package/dist/dev/index.js

@@ -1832,9 +1832,9 @@ init_define_import_meta_env();
 function rotatePoints(points, center, degrees) {
   if (points && points.length) {
     const [cx, cy] = center;
-    const angle = Math.PI / 180 * degrees;
-    const cos = Math.cos(angle);
-    const sin = Math.sin(angle);
+    const angle2 = Math.PI / 180 * degrees;
+    const cos = Math.cos(angle2);
+    const sin = Math.sin(angle2);
     for (const p of points) {
       const [x, y] = p;
       p[0] = (x - cx) * cos - (y - cy) * sin + cx;
@@ -1851,21 +1851,21 @@ function areSamePoints(p1, p2) {
   return p1[0] === p2[0] && p1[1] === p2[1];
 }
 function hachureLines(polygons, hachureGap, hachureAngle, hachureStepOffset = 1) {
-  const angle = hachureAngle;
+  const angle2 = hachureAngle;
   const gap = Math.max(hachureGap, 0.1);
   const polygonList = polygons[0] && polygons[0][0] && typeof polygons[0][0] === "number" ? [polygons] : polygons;
   const rotationCenter = [0, 0];
-  if (angle) {
+  if (angle2) {
     for (const polygon3 of polygonList) {
-      rotatePoints(polygon3, rotationCenter, angle);
+      rotatePoints(polygon3, rotationCenter, angle2);
     }
   }
   const lines = straightHachureLines(polygonList, gap, hachureStepOffset);
-  if (angle) {
+  if (angle2) {
     for (const polygon3 of polygonList) {
-      rotatePoints(polygon3, rotationCenter, -angle);
+      rotatePoints(polygon3, rotationCenter, -angle2);
     }
-    rotateLines(lines, rotationCenter, -angle);
+    rotateLines(lines, rotationCenter, -angle2);
   }
   return lines;
 }
@@ -1976,7 +1976,7 @@ function straightHachureLines(polygons, gap, hachureStepOffset) {
 // ../../node_modules/roughjs/bin/fillers/scan-line-hachure.js
 function polygonHachureLines(polygonList, o) {
   var _a;
-  const angle = o.hachureAngle + 90;
+  const angle2 = o.hachureAngle + 90;
   let gap = o.hachureGap;
   if (gap < 0) {
     gap = o.strokeWidth * 4;
@@ -1988,7 +1988,7 @@ function polygonHachureLines(polygonList, o) {
       skipOffset = gap;
     }
   }
-  return hachureLines(polygonList, gap, angle, skipOffset || 1);
+  return hachureLines(polygonList, gap, angle2, skipOffset || 1);
 }
 
 // ../../node_modules/roughjs/bin/fillers/hachure-filler.js
@@ -2526,7 +2526,7 @@ function normalize(segments) {
       case "A": {
         const r1 = Math.abs(data[0]);
         const r2 = Math.abs(data[1]);
-        const angle = data[2];
+        const angle2 = data[2];
         const largeArcFlag = data[3];
         const sweepFlag = data[4];
         const x = data[5];
@@ -2537,7 +2537,7 @@ function normalize(segments) {
           cy = y;
         } else {
           if (cx !== x || cy !== y) {
-            const curves = arcToCubicCurves(cx, cy, x, y, r1, r2, angle, largeArcFlag, sweepFlag);
+            const curves = arcToCubicCurves(cx, cy, x, y, r1, r2, angle2, largeArcFlag, sweepFlag);
             curves.forEach(function(curve4) {
               out.push({ key: "C", data: curve4 });
             });
@@ -2565,8 +2565,8 @@ function rotate(x, y, angleRad) {
   const Y = x * Math.sin(angleRad) + y * Math.cos(angleRad);
   return [X, Y];
 }
-function arcToCubicCurves(x1, y1, x2, y2, r1, r2, angle, largeArcFlag, sweepFlag, recursive) {
-  const angleRad = degToRad(angle);
+function arcToCubicCurves(x1, y1, x2, y2, r1, r2, angle2, largeArcFlag, sweepFlag, recursive) {
+  const angleRad = degToRad(angle2);
   let params = [];
   let f1 = 0, f2 = 0, cx = 0, cy = 0;
   if (recursive) {
@@ -2623,7 +2623,7 @@ function arcToCubicCurves(x1, y1, x2, y2, r1, r2, angle, largeArcFlag, sweepFlag
     }
     x2 = cx + r1 * Math.cos(f2);
     y2 = cy + r2 * Math.sin(f2);
-    params = arcToCubicCurves(x2, y2, x2old, y2old, r1, r2, angle, 0, sweepFlag, [f2, f2old, cx, cy]);
+    params = arcToCubicCurves(x2, y2, x2old, y2old, r1, r2, angle2, 0, sweepFlag, [f2, f2old, cx, cy]);
   }
   df = f2 - f1;
   const c1 = Math.cos(f1);
@@ -2829,8 +2829,8 @@ function patternFillArc(x, y, width, height, start2, stop2, o) {
   }
   const increment = (stp - strt) / o.curveStepCount;
   const points = [];
-  for (let angle = strt; angle <= stp; angle = angle + increment) {
-    points.push([cx + rx * Math.cos(angle), cy + ry * Math.sin(angle)]);
+  for (let angle2 = strt; angle2 <= stp; angle2 = angle2 + increment) {
+    points.push([cx + rx * Math.cos(angle2), cy + ry * Math.sin(angle2)]);
   }
   points.push([cx + rx * Math.cos(stp), cy + ry * Math.sin(stp)]);
   points.push([cx, cy]);
@@ -3016,10 +3016,10 @@ function _computeEllipsePoints(increment, cx, cy, rx, ry, offset, overlap, o) {
       cx + rx * Math.cos(-increment),
       cy + ry * Math.sin(-increment)
     ]);
-    for (let angle = 0; angle <= Math.PI * 2; angle = angle + increment) {
+    for (let angle2 = 0; angle2 <= Math.PI * 2; angle2 = angle2 + increment) {
       const p = [
-        cx + rx * Math.cos(angle),
-        cy + ry * Math.sin(angle)
+        cx + rx * Math.cos(angle2),
+        cy + ry * Math.sin(angle2)
       ];
       corePoints.push(p);
       allPoints.push(p);
@@ -3039,10 +3039,10 @@ function _computeEllipsePoints(increment, cx, cy, rx, ry, offset, overlap, o) {
       _offsetOpt(offset, o) + cy + 0.9 * ry * Math.sin(radOffset - increment)
     ]);
     const endAngle = Math.PI * 2 + radOffset - 0.01;
-    for (let angle = radOffset; angle < endAngle; angle = angle + increment) {
+    for (let angle2 = radOffset; angle2 < endAngle; angle2 = angle2 + increment) {
       const p = [
-        _offsetOpt(offset, o) + cx + rx * Math.cos(angle),
-        _offsetOpt(offset, o) + cy + ry * Math.sin(angle)
+        _offsetOpt(offset, o) + cx + rx * Math.cos(angle2),
+        _offsetOpt(offset, o) + cy + ry * Math.sin(angle2)
       ];
       corePoints.push(p);
       allPoints.push(p);
@@ -3069,10 +3069,10 @@ function _arc(increment, cx, cy, rx, ry, strt, stp, offset, o) {
     _offsetOpt(offset, o) + cx + 0.9 * rx * Math.cos(radOffset - increment),
     _offsetOpt(offset, o) + cy + 0.9 * ry * Math.sin(radOffset - increment)
   ]);
-  for (let angle = radOffset; angle <= stp; angle = angle + increment) {
+  for (let angle2 = radOffset; angle2 <= stp; angle2 = angle2 + increment) {
     points.push([
-      _offsetOpt(offset, o) + cx + rx * Math.cos(angle),
-      _offsetOpt(offset, o) + cy + ry * Math.sin(angle)
+      _offsetOpt(offset, o) + cx + rx * Math.cos(angle2),
+      _offsetOpt(offset, o) + cy + ry * Math.sin(angle2)
     ]);
   }
   points.push([
@@ -3869,11 +3869,11 @@ import {
 } from "@excalidraw/common";
 import {
   degreesToRadians,
-  lineSegment as lineSegment7,
+  lineSegment as lineSegment6,
   pointDistance as pointDistance7,
-  pointFrom as pointFrom14,
+  pointFrom as pointFrom13,
   pointFromArray as pointFromArray3,
-  pointRotateRads as pointRotateRads13
+  pointRotateRads as pointRotateRads12
 } from "@excalidraw/math";
 
 // ../utils/src/shape.ts
@@ -3898,24 +3898,24 @@ import {
 } from "@excalidraw/math";
 import { getElementAbsoluteCoords } from "@excalidraw/element";
 var getPolygonShape = (element) => {
-  const { angle, width, height, x, y } = element;
+  const { angle: angle2, width, height, x, y } = element;
   const cx = x + width / 2;
   const cy = y + height / 2;
   const center = pointFrom(cx, cy);
   let data;
   if (element.type === "diamond") {
     data = polygon2(
-      pointRotateRads(pointFrom(cx, y), center, angle),
-      pointRotateRads(pointFrom(x + width, cy), center, angle),
-      pointRotateRads(pointFrom(cx, y + height), center, angle),
-      pointRotateRads(pointFrom(x, cy), center, angle)
+      pointRotateRads(pointFrom(cx, y), center, angle2),
+      pointRotateRads(pointFrom(x + width, cy), center, angle2),
+      pointRotateRads(pointFrom(cx, y + height), center, angle2),
+      pointRotateRads(pointFrom(x, cy), center, angle2)
     );
   } else {
     data = polygon2(
-      pointRotateRads(pointFrom(x, y), center, angle),
-      pointRotateRads(pointFrom(x + width, y), center, angle),
-      pointRotateRads(pointFrom(x + width, y + height), center, angle),
-      pointRotateRads(pointFrom(x, y + height), center, angle)
+      pointRotateRads(pointFrom(x, y), center, angle2),
+      pointRotateRads(pointFrom(x + width, y), center, angle2),
+      pointRotateRads(pointFrom(x + width, y + height), center, angle2),
+      pointRotateRads(pointFrom(x, y + height), center, angle2)
     );
   }
   return {
@@ -3924,12 +3924,12 @@ var getPolygonShape = (element) => {
   };
 };
 var getEllipseShape = (element) => {
-  const { width, height, angle, x, y } = element;
+  const { width, height, angle: angle2, x, y } = element;
   return {
     type: "ellipse",
     data: {
       center: pointFrom(x + width / 2, y + height / 2),
-      angle,
+      angle: angle2,
       halfWidth: width / 2,
       halfHeight: height / 2
     }
@@ -4213,11 +4213,367 @@ function ae(e, t = {}) {
   return ce(me(e, t), t);
 }
 
+// ../laser-pointer/src/index.ts
+init_define_import_meta_env();
+
+// ../laser-pointer/src/state.ts
+init_define_import_meta_env();
+
+// ../laser-pointer/src/math.ts
+init_define_import_meta_env();
+function add([ax, ay, ar], [bx, by, br]) {
+  return [ax + bx, ay + by, ar + br];
+}
+function sub([ax, ay, ar], [bx, by, br]) {
+  return [ax - bx, ay - by, ar - br];
+}
+function smul([x, y, r], s) {
+  return [x * s, y * s, r * s];
+}
+function norm([x, y, r]) {
+  return [x / Math.sqrt(x ** 2 + y ** 2), y / Math.sqrt(x ** 2 + y ** 2), r];
+}
+function rot([x, y, r], rad) {
+  return [
+    Math.cos(rad) * x - Math.sin(rad) * y,
+    Math.sin(rad) * x + Math.cos(rad) * y,
+    r
+  ];
+}
+function plerp(a2, b2, t) {
+  return add(a2, smul(sub(b2, a2), t));
+}
+function angle(p, p1, p2) {
+  return Math.atan2(p2[1] - p[1], p2[0] - p[0]) - Math.atan2(p1[1] - p[1], p1[0] - p[0]);
+}
+function normAngle(a2) {
+  return Math.atan2(Math.sin(a2), Math.cos(a2));
+}
+function mag([x, y]) {
+  return Math.sqrt(x ** 2 + y ** 2);
+}
+function dist([ax, ay], [bx, by]) {
+  return Math.sqrt((bx - ax) ** 2 + (by - ay) ** 2);
+}
+function runLength(ps) {
+  if (ps.length < 2) {
+    return 0;
+  }
+  let len = 0;
+  for (let i = 1; i <= ps.length - 1; i++) {
+    len += dist(ps[i - 1], ps[i]);
+  }
+  len += dist(ps[ps.length - 2], ps[ps.length - 1]);
+  return len;
+}
+var clamp = (v, min, max) => Math.max(min, Math.min(max, v));
+function distancePointToSegment(p3, p1, p2) {
+  const sMag = dist(p1, p2);
+  if (sMag === 0) {
+    return dist(p3, p1);
+  }
+  const u = clamp(
+    ((p3[0] - p1[0]) * (p2[0] - p1[0]) + (p3[1] - p1[1]) * (p2[1] - p1[1])) / sMag ** 2,
+    0,
+    1
+  );
+  const pi = [
+    p1[0] + u * (p2[0] - p1[0]),
+    p1[1] + u * (p2[1] - p1[1]),
+    p3[2]
+  ];
+  return dist(pi, p3);
+}
+
+// ../laser-pointer/src/simplify.ts
+init_define_import_meta_env();
+function douglasPeucker(points, epsilon) {
+  if (epsilon === 0) {
+    return points;
+  }
+  if (points.length <= 2) {
+    return points;
+  }
+  const first = points[0];
+  const last = points[points.length - 1];
+  const [maxDistance, maxIndex] = points.reduce(
+    ([maxDistance2, maxIndex2], point, index) => {
+      const distance3 = distancePointToSegment(point, first, last);
+      return distance3 > maxDistance2 ? [distance3, index] : [maxDistance2, maxIndex2];
+    },
+    [0, -1]
+  );
+  if (maxDistance >= epsilon) {
+    const maxIndexPoint = points[maxIndex];
+    return [
+      ...douglasPeucker(
+        [first, ...points.slice(1, maxIndex), maxIndexPoint],
+        epsilon
+      ).slice(0, -1),
+      maxIndexPoint,
+      ...douglasPeucker(
+        [maxIndexPoint, ...points.slice(maxIndex, -1), last],
+        epsilon
+      ).slice(1)
+    ];
+  }
+  return [first, last];
+}
+
+// ../laser-pointer/src/state.ts
+var LaserPointer = class _LaserPointer {
+  static defaults = {
+    size: 2,
+    streamline: 0.45,
+    simplify: 0.1,
+    simplifyPhase: "output",
+    keepHead: false,
+    sizeMapping: () => 1
+  };
+  static constants = {
+    cornerDetectionMaxAngle: 75,
+    cornerDetectionVariance: (s) => s > 35 ? 0.5 : 1,
+    maxTailLength: 50
+  };
+  options;
+  constructor(options) {
+    this.options = Object.assign({}, _LaserPointer.defaults, options);
+  }
+  originalPoints = [];
+  stablePoints = [];
+  tailPoints = [];
+  isFresh = true;
+  get lastPoint() {
+    return this.tailPoints[this.tailPoints.length - 1] ?? this.stablePoints[this.stablePoints.length - 1];
+  }
+  addPoint(point) {
+    const lastPoint = this.originalPoints[this.originalPoints.length - 1];
+    if (lastPoint && lastPoint[0] === point[0] && lastPoint[1] === point[1]) {
+      return;
+    }
+    this.originalPoints.push(point);
+    if (this.isFresh) {
+      this.isFresh = false;
+      this.stablePoints.push(point);
+      return;
+    }
+    if (this.options.streamline > 0) {
+      point = plerp(this.lastPoint, point, 1 - this.options.streamline);
+    }
+    this.tailPoints.push(point);
+    if (runLength(this.tailPoints) > _LaserPointer.constants.maxTailLength) {
+      this.stabilizeTail();
+    }
+  }
+  close() {
+    this.stabilizeTail();
+  }
+  stabilizeTail() {
+    if (this.options.simplify > 0 && this.options.simplifyPhase === "tail") {
+      throw new Error("Not implemented yet");
+    } else {
+      this.stablePoints.push(...this.tailPoints);
+      this.tailPoints = [];
+    }
+  }
+  getSize(sizeOverride, pressure, index, totalLength, runningLength) {
+    return (sizeOverride ?? this.options.size) * this.options.sizeMapping({
+      pressure,
+      runningLength,
+      currentIndex: index,
+      totalLength
+    });
+  }
+  getStrokeOutline(sizeOverride) {
+    if (this.isFresh) {
+      return [];
+    }
+    let points = [...this.stablePoints, ...this.tailPoints];
+    if (this.options.simplify > 0 && this.options.simplifyPhase === "input") {
+      points = douglasPeucker(points, this.options.simplify);
+    }
+    const len = points.length;
+    if (len === 0) {
+      return [];
+    }
+    if (len === 1) {
+      const c = points[0];
+      const size = this.getSize(sizeOverride, c[2], 0, len, 0);
+      if (size < 0.5) {
+        return [];
+      }
+      const ps = [];
+      for (let theta = 0; theta <= Math.PI * 2; theta += Math.PI / 16) {
+        ps.push(add(c, smul(rot([1, 0, 0], theta), size)));
+      }
+      ps.push(
+        add(
+          c,
+          smul(
+            [1, 0, 0],
+            this.getSize(sizeOverride, c[2], 0, len, 0)
+          )
+        )
+      );
+      return ps;
+    }
+    if (len === 2) {
+      const c = points[0];
+      const n = points[1];
+      const cSize = this.getSize(sizeOverride, c[2], 0, len, 0);
+      const nSize = this.getSize(sizeOverride, n[2], 0, len, 0);
+      if (cSize < 0.5 || nSize < 0.5) {
+        return [];
+      }
+      const ps = [];
+      const pAngle = angle(c, [c[0], c[1] - 100, c[2]], n);
+      for (let theta = pAngle; theta <= Math.PI + pAngle; theta += Math.PI / 16) {
+        ps.push(add(c, smul(rot([1, 0, 0], theta), cSize)));
+      }
+      for (let theta = Math.PI + pAngle; theta <= Math.PI * 2 + pAngle; theta += Math.PI / 16) {
+        ps.push(add(n, smul(rot([1, 0, 0], theta), nSize)));
+      }
+      ps.push(ps[0]);
+      return ps;
+    }
+    const forwardPoints = [];
+    const backwardPoints = [];
+    let speed = 0;
+    let prevSpeed = 0;
+    let visibleStartIndex = 0;
+    let runningLength = 0;
+    for (let i = 1; i < len - 1; i++) {
+      const p = points[i - 1];
+      const c = points[i];
+      const n = points[i + 1];
+      const pressure = c[2];
+      const d = dist(p, c);
+      runningLength += d;
+      speed = prevSpeed + (d - prevSpeed) * 0.2;
+      const cSize = this.getSize(sizeOverride, pressure, i, len, runningLength);
+      if (cSize === 0) {
+        visibleStartIndex = i + 1;
+        continue;
+      }
+      const dirPC = norm(sub(p, c));
+      const dirNC = norm(sub(n, c));
+      const p1dirPC = rot(dirPC, Math.PI / 2);
+      const p2dirPC = rot(dirPC, -Math.PI / 2);
+      const p1dirNC = rot(dirNC, Math.PI / 2);
+      const p2dirNC = rot(dirNC, -Math.PI / 2);
+      const p1PC = add(c, smul(p1dirPC, cSize));
+      const p2PC = add(c, smul(p2dirPC, cSize));
+      const p1NC = add(c, smul(p1dirNC, cSize));
+      const p2NC = add(c, smul(p2dirNC, cSize));
+      const ftdir = add(p1dirPC, p2dirNC);
+      const btdir = add(p2dirPC, p1dirNC);
+      const paPC = add(
+        c,
+        smul(mag(ftdir) === 0 ? dirPC : norm(ftdir), cSize)
+      );
+      const paNC = add(
+        c,
+        smul(mag(btdir) === 0 ? dirNC : norm(btdir), cSize)
+      );
+      const cAngle = normAngle(angle(c, p, n));
+      const D_ANGLE = _LaserPointer.constants.cornerDetectionMaxAngle / 180 * Math.PI * _LaserPointer.constants.cornerDetectionVariance(speed);
+      if (Math.abs(cAngle) < D_ANGLE) {
+        const tAngle = Math.abs(normAngle(Math.PI - cAngle));
+        if (tAngle === 0) {
+          continue;
+        }
+        if (cAngle < 0) {
+          backwardPoints.push(p2PC, paNC);
+          for (let theta = 0; theta <= tAngle; theta += tAngle / 4) {
+            forwardPoints.push(add(c, rot(smul(p1dirPC, cSize), theta)));
+          }
+          for (let theta = tAngle; theta >= 0; theta -= tAngle / 4) {
+            backwardPoints.push(add(c, rot(smul(p1dirPC, cSize), theta)));
+          }
+          backwardPoints.push(paNC, p1NC);
+        } else {
+          forwardPoints.push(p1PC, paPC);
+          for (let theta = 0; theta <= tAngle; theta += tAngle / 4) {
+            backwardPoints.push(
+              add(c, rot(smul(p1dirPC, -cSize), -theta))
+            );
+          }
+          for (let theta = tAngle; theta >= 0; theta -= tAngle / 4) {
+            forwardPoints.push(
+              add(c, rot(smul(p1dirPC, -cSize), -theta))
+            );
+          }
+          forwardPoints.push(paPC, p2NC);
+        }
+      } else {
+        forwardPoints.push(paPC);
+        backwardPoints.push(paNC);
+      }
+      prevSpeed = speed;
+    }
+    if (visibleStartIndex >= len - 2) {
+      if (this.options.keepHead) {
+        const c = points[len - 1];
+        const ps = [];
+        for (let theta = 0; theta <= Math.PI * 2; theta += Math.PI / 16) {
+          ps.push(
+            add(
+              c,
+              smul(rot([1, 0, 0], theta), this.options.size)
+            )
+          );
+        }
+        ps.push(add(c, smul([1, 0, 0], this.options.size)));
+        return ps;
+      }
+      return [];
+    }
+    const first = points[visibleStartIndex];
+    const second = points[visibleStartIndex + 1];
+    const penultimate = points[len - 2];
+    const ultimate = points[len - 1];
+    const dirFS = norm(sub(second, first));
+    const dirPU = norm(sub(penultimate, ultimate));
+    const ppdirFS = rot(dirFS, -Math.PI / 2);
+    const ppdirPU = rot(dirPU, Math.PI / 2);
+    const startCapSize = this.getSize(sizeOverride, first[2], 0, len, 0);
+    const startCap = [];
+    const endCapSize = this.options.keepHead ? this.options.size : this.getSize(sizeOverride, penultimate[2], len - 2, len, runningLength);
+    const endCap = [];
+    if (startCapSize > 0.1) {
+      for (let theta = 0; theta <= Math.PI; theta += Math.PI / 16) {
+        startCap.unshift(
+          add(first, rot(smul(ppdirFS, startCapSize), -theta))
+        );
+      }
+      startCap.unshift(add(first, smul(ppdirFS, -startCapSize)));
+    } else {
+      startCap.push(first);
+    }
+    for (let theta = 0; theta <= Math.PI * 3; theta += Math.PI / 16) {
+      endCap.push(add(ultimate, rot(smul(ppdirPU, -endCapSize), -theta)));
+    }
+    const strokeOutline = [
+      ...startCap,
+      ...forwardPoints,
+      ...endCap.reverse(),
+      ...backwardPoints.reverse()
+    ];
+    if (startCap.length > 0) {
+      strokeOutline.push(startCap[0]);
+    }
+    if (this.options.simplify > 0 && this.options.simplifyPhase === "output") {
+      return douglasPeucker(strokeOutline, this.options.simplify);
+    }
+    return strokeOutline;
+  }
+};
+
 // src/shape.ts
 import {
-  pointFrom as pointFrom13,
+  pointFrom as pointFrom12,
   pointDistance as pointDistance6,
-  pointRotateRads as pointRotateRads12
+  pointRotateRads as pointRotateRads11
 } from "@excalidraw/math";
 import {
   ROUGHNESS,
@@ -4226,16 +4582,17 @@ import {
   assertNever as assertNever2,
   COLOR_PALETTE,
   LINE_POLYGON_POINT_MERGE_DISTANCE,
-  applyDarkModeFilter as applyDarkModeFilter2
+  applyDarkModeFilter as applyDarkModeFilter2,
+  DEFAULT_STROKE_STREAMLINE
 } from "@excalidraw/common";
 
 // src/renderElement.ts
 init_define_import_meta_env();
 import {
   isRightAngleRads,
-  lineSegment as lineSegment6,
-  pointFrom as pointFrom12,
-  pointRotateRads as pointRotateRads11
+  lineSegment as lineSegment5,
+  pointFrom as pointFrom11,
+  pointRotateRads as pointRotateRads10
 } from "@excalidraw/math";
 import {
   BOUND_TEXT_PADDING as BOUND_TEXT_PADDING3,
@@ -4243,7 +4600,7 @@ import {
   ELEMENT_READY_TO_ERASE_OPACITY,
   FRAME_STYLE,
   DARK_THEME_FILTER,
-  MIME_TYPES,
+  MIME_TYPES as MIME_TYPES2,
   THEME,
   distance as distance2,
   getFontString as getFontString3,
@@ -4266,7 +4623,7 @@ import {
   vectorAdd as vectorAdd2,
   vectorScale as vectorScale2,
   pointFromVector as pointFromVector2,
-  clamp,
+  clamp as clamp2,
   isCloseTo
 } from "@excalidraw/math";
 var MINIMAL_CROP_SIZE = 10;
@@ -4300,7 +4657,7 @@ var cropElement = (element, elementsMap, transformHandle, naturalWidth, naturalH
   let changeInHeight = pointerY - element.y;
   let changeInWidth = pointerX - element.x;
   if (transformHandle.includes("n")) {
-    nextHeight = clamp(
+    nextHeight = clamp2(
       element.height - changeInHeight,
       MINIMAL_CROP_SIZE,
       isFlippedByY ? uncroppedHeight - croppedTop : element.height + croppedTop
@@ -4308,7 +4665,7 @@ var cropElement = (element, elementsMap, transformHandle, naturalWidth, naturalH
   }
   if (transformHandle.includes("s")) {
     changeInHeight = pointerY - element.y - element.height;
-    nextHeight = clamp(
+    nextHeight = clamp2(
       element.height + changeInHeight,
       MINIMAL_CROP_SIZE,
       isFlippedByY ? element.height + croppedTop : uncroppedHeight - croppedTop
@@ -4316,14 +4673,14 @@ var cropElement = (element, elementsMap, transformHandle, naturalWidth, naturalH
   }
   if (transformHandle.includes("e")) {
     changeInWidth = pointerX - element.x - element.width;
-    nextWidth = clamp(
+    nextWidth = clamp2(
       element.width + changeInWidth,
       MINIMAL_CROP_SIZE,
       isFlippedByX ? element.width + croppedLeft : uncroppedWidth - croppedLeft
     );
   }
   if (transformHandle.includes("w")) {
-    nextWidth = clamp(
+    nextWidth = clamp2(
       element.width - changeInWidth,
       MINIMAL_CROP_SIZE,
       isFlippedByX ? uncroppedWidth - croppedLeft : element.width + croppedLeft
@@ -4363,7 +4720,7 @@ var cropElement = (element, elementsMap, transformHandle, naturalWidth, naturalH
         const distanceToLeft = croppedLeft + element.width / 2;
         const distanceToRight = uncroppedWidth - croppedLeft - element.width / 2;
         const MAX_WIDTH = Math.min(distanceToLeft, distanceToRight) * 2;
-        nextWidth = clamp(
+        nextWidth = clamp2(
           nextHeight * widthAspectRatio,
           MINIMAL_CROP_SIZE,
           MAX_WIDTH
@@ -4381,7 +4738,7 @@ var cropElement = (element, elementsMap, transformHandle, naturalWidth, naturalH
         const distanceToLeft = croppedLeft + element.width / 2;
         const distanceToRight = uncroppedWidth - croppedLeft - element.width / 2;
         const MAX_WIDTH = Math.min(distanceToLeft, distanceToRight) * 2;
-        nextWidth = clamp(
+        nextWidth = clamp2(
           nextHeight * widthAspectRatio,
           MINIMAL_CROP_SIZE,
           MAX_WIDTH
@@ -4399,7 +4756,7 @@ var cropElement = (element, elementsMap, transformHandle, naturalWidth, naturalH
         const distanceToTop = croppedTop + element.height / 2;
         const distanceToBottom = uncroppedHeight - croppedTop - element.height / 2;
         const MAX_HEIGHT = Math.min(distanceToTop, distanceToBottom) * 2;
-        nextHeight = clamp(
+        nextHeight = clamp2(
           nextWidth / widthAspectRatio,
           MINIMAL_CROP_SIZE,
           MAX_HEIGHT
@@ -4417,7 +4774,7 @@ var cropElement = (element, elementsMap, transformHandle, naturalWidth, naturalH
         const distanceToTop = croppedTop + element.height / 2;
         const distanceToBottom = uncroppedHeight - croppedTop - element.height / 2;
         const MAX_HEIGHT = Math.min(distanceToTop, distanceToBottom) * 2;
-        nextHeight = clamp(
+        nextHeight = clamp2(
           nextWidth / widthAspectRatio,
           MINIMAL_CROP_SIZE,
           MAX_HEIGHT
@@ -4434,7 +4791,7 @@ var cropElement = (element, elementsMap, transformHandle, naturalWidth, naturalH
       if (widthAspectRatio) {
         if (changeInWidth > -changeInHeight) {
           const MAX_HEIGHT = isFlippedByY ? uncroppedHeight - croppedTop : croppedTop + element.height;
-          nextHeight = clamp(
+          nextHeight = clamp2(
             nextWidth / widthAspectRatio,
             MINIMAL_CROP_SIZE,
             MAX_HEIGHT
@@ -4442,7 +4799,7 @@ var cropElement = (element, elementsMap, transformHandle, naturalWidth, naturalH
           nextWidth = nextHeight * widthAspectRatio;
         } else {
           const MAX_WIDTH = isFlippedByX ? croppedLeft + element.width : uncroppedWidth - croppedLeft;
-          nextWidth = clamp(
+          nextWidth = clamp2(
             nextHeight * widthAspectRatio,
             MINIMAL_CROP_SIZE,
             MAX_WIDTH
@@ -4457,7 +4814,7 @@ var cropElement = (element, elementsMap, transformHandle, naturalWidth, naturalH
       if (widthAspectRatio) {
         if (changeInWidth < changeInHeight) {
           const MAX_HEIGHT = isFlippedByY ? uncroppedHeight - croppedTop : croppedTop + element.height;
-          nextHeight = clamp(
+          nextHeight = clamp2(
             nextWidth / widthAspectRatio,
             MINIMAL_CROP_SIZE,
             MAX_HEIGHT
@@ -4465,7 +4822,7 @@ var cropElement = (element, elementsMap, transformHandle, naturalWidth, naturalH
           nextWidth = nextHeight * widthAspectRatio;
         } else {
           const MAX_WIDTH = isFlippedByX ? uncroppedWidth - croppedLeft : croppedLeft + element.width;
-          nextWidth = clamp(
+          nextWidth = clamp2(
             nextHeight * widthAspectRatio,
             MINIMAL_CROP_SIZE,
             MAX_WIDTH
@@ -4480,7 +4837,7 @@ var cropElement = (element, elementsMap, transformHandle, naturalWidth, naturalH
       if (widthAspectRatio) {
         if (changeInWidth > changeInHeight) {
           const MAX_HEIGHT = isFlippedByY ? croppedTop + element.height : uncroppedHeight - croppedTop;
-          nextHeight = clamp(
+          nextHeight = clamp2(
             nextWidth / widthAspectRatio,
             MINIMAL_CROP_SIZE,
             MAX_HEIGHT
@@ -4488,7 +4845,7 @@ var cropElement = (element, elementsMap, transformHandle, naturalWidth, naturalH
           nextWidth = nextHeight * widthAspectRatio;
         } else {
           const MAX_WIDTH = isFlippedByX ? croppedLeft + element.width : uncroppedWidth - croppedLeft;
-          nextWidth = clamp(
+          nextWidth = clamp2(
             nextHeight * widthAspectRatio,
             MINIMAL_CROP_SIZE,
             MAX_WIDTH
@@ -4503,7 +4860,7 @@ var cropElement = (element, elementsMap, transformHandle, naturalWidth, naturalH
       if (widthAspectRatio) {
         if (-changeInWidth > changeInHeight) {
           const MAX_HEIGHT = isFlippedByY ? croppedTop + element.height : uncroppedHeight - croppedTop;
-          nextHeight = clamp(
+          nextHeight = clamp2(
             nextWidth / widthAspectRatio,
             MINIMAL_CROP_SIZE,
             MAX_HEIGHT
@@ -4511,7 +4868,7 @@ var cropElement = (element, elementsMap, transformHandle, naturalWidth, naturalH
           nextWidth = nextHeight * widthAspectRatio;
         } else {
           const MAX_WIDTH = isFlippedByX ? uncroppedWidth - croppedLeft : croppedLeft + element.width;
-          nextWidth = clamp(
+          nextWidth = clamp2(
             nextHeight * widthAspectRatio,
             MINIMAL_CROP_SIZE,
             MAX_WIDTH
@@ -4579,17 +4936,17 @@ var recomputeOrigin = (stateAtCropStart, transformHandle, width, height, shouldM
       newTopLeft[1] = startCenter[1] - newBoundsHeight / 2;
     }
   }
-  const angle = stateAtCropStart.angle;
-  const rotatedTopLeft = pointRotateRads2(newTopLeft, startCenter, angle);
+  const angle2 = stateAtCropStart.angle;
+  const rotatedTopLeft = pointRotateRads2(newTopLeft, startCenter, angle2);
   const newCenter = [
     newTopLeft[0] + Math.abs(newBoundsWidth) / 2,
     newTopLeft[1] + Math.abs(newBoundsHeight) / 2
   ];
-  const rotatedNewCenter = pointRotateRads2(newCenter, startCenter, angle);
+  const rotatedNewCenter = pointRotateRads2(newCenter, startCenter, angle2);
   newTopLeft = pointRotateRads2(
     rotatedTopLeft,
     rotatedNewCenter,
-    -angle
+    -angle2
   );
   const newOrigin = [...newTopLeft];
   newOrigin[0] += stateAtCropStart.x - newBoundsX1;
@@ -4716,11 +5073,11 @@ var getFlipAdjustedCropPosition = (element, natural = false) => {
 init_define_import_meta_env();
 import {
   pointCenter as pointCenter2,
-  pointFrom as pointFrom11,
-  pointRotateRads as pointRotateRads10,
+  pointFrom as pointFrom10,
+  pointRotateRads as pointRotateRads9,
   pointsEqual as pointsEqual6,
   pointDistance as pointDistance5,
-  vectorFromPoint as vectorFromPoint9,
+  vectorFromPoint as vectorFromPoint8,
   curveLength,
   curvePointAtLength
 } from "@excalidraw/math";
@@ -4744,7 +5101,7 @@ import {
 } from "@excalidraw/common";
 import {
   PRECISION as PRECISION2,
-  clamp as clamp3,
+  clamp as clamp4,
   lineSegment as lineSegment4,
   pointDistance as pointDistance4,
   pointDistanceSq,
@@ -6290,8 +6647,8 @@ var computeBoundTextPosition = (container, boundTextElement, elementsMap) => {
   } else {
     x = containerCoords.x + (maxContainerWidth / 2 - boundTextElement.width / 2);
   }
-  const angle = container.angle ?? 0;
-  if (angle !== 0) {
+  const angle2 = container.angle ?? 0;
+  if (angle2 !== 0) {
     const contentCenter = pointFrom4(
       containerCoords.x + maxContainerWidth / 2,
       containerCoords.y + maxContainerHeight / 2
@@ -6300,7 +6657,7 @@ var computeBoundTextPosition = (container, boundTextElement, elementsMap) => {
       x + boundTextElement.width / 2,
       y + boundTextElement.height / 2
     );
-    const [rx, ry] = pointRotateRads4(textCenter, contentCenter, angle);
+    const [rx, ry] = pointRotateRads4(textCenter, contentCenter, angle2);
     return {
       x: rx - boundTextElement.width / 2,
       y: ry - boundTextElement.height / 2
@@ -6557,6 +6914,7 @@ var hasBackground = (type) => type === "rectangle" || type === "iframe" || type
 var hasStrokeColor = (type) => type === "rectangle" || type === "ellipse" || type === "diamond" || type === "freedraw" || type === "arrow" || type === "line" || type === "text" || type === "embeddable";
 var hasStrokeWidth = (type) => type === "rectangle" || type === "iframe" || type === "embeddable" || type === "ellipse" || type === "diamond" || type === "freedraw" || type === "arrow" || type === "line";
 var hasStrokeStyle = (type) => type === "rectangle" || type === "iframe" || type === "embeddable" || type === "ellipse" || type === "diamond" || type === "arrow" || type === "line";
+var hasFreedrawMode = (type) => type === "freedraw";
 var canChangeRoundness = (type) => type === "rectangle" || type === "iframe" || type === "embeddable" || type === "line" || type === "diamond" || type === "image";
 var toolIsArrow = (type) => type === "arrow";
 var canHaveArrowheads = (type) => type === "arrow";
@@ -6625,8 +6983,8 @@ var hitElementItself = ({
   cachedHit = result;
   return result;
 };
-var isPointInRotatedBounds = (point, bounds, angle, tolerance = 0) => {
-  const adjustedPoint = angle === 0 ? point : pointRotateRads6(point, getCenterForBounds(bounds), -angle);
+var isPointInRotatedBounds = (point, bounds, angle2, tolerance = 0) => {
+  const adjustedPoint = angle2 === 0 ? point : pointRotateRads6(point, getCenterForBounds(bounds), -angle2);
   return isPointWithinBounds(
     pointFrom5(bounds[0] - tolerance, bounds[1] - tolerance),
     adjustedPoint,
@@ -6802,7 +7160,7 @@ var intersectElementWithLineSegment = (element, elementsMap, line2, offset = 0,
       );
   }
 };
-var curveIntersections = (curves, segment, intersections, center, angle, onlyFirst = false) => {
+var curveIntersections = (curves, segment, intersections, center, angle2, onlyFirst = false) => {
   for (const c of curves) {
     const b1 = getCubicBezierCurveBound(c[0], c[1], c[2], c[3]);
     const b2 = [
@@ -6817,7 +7175,7 @@ var curveIntersections = (curves, segment, intersections, center, angle, onlyFir
     const hits = curveIntersectLineSegment(c, segment);
     if (hits.length > 0) {
       for (const j of hits) {
-        intersections.push(pointRotateRads6(j, center, angle));
+        intersections.push(pointRotateRads6(j, center, angle2));
       }
       if (onlyFirst) {
         return intersections;
@@ -6826,11 +7184,11 @@ var curveIntersections = (curves, segment, intersections, center, angle, onlyFir
   }
   return intersections;
 };
-var lineIntersections = (lines, segment, intersections, center, angle, onlyFirst = false) => {
+var lineIntersections = (lines, segment, intersections, center, angle2, onlyFirst = false) => {
   for (const l2 of lines) {
     const intersection = lineSegmentIntersectionPoints2(l2, segment);
     if (intersection) {
-      intersections.push(pointRotateRads6(intersection, center, angle));
+      intersections.push(pointRotateRads6(intersection, center, angle2));
       if (onlyFirst) {
         return intersections;
       }
@@ -6976,7 +7334,7 @@ var isPointInElement = (point, element, elementsMap) => {
 };
 var isBindableElementInsideOtherBindable = (innerElement, outerElement, elementsMap) => {
   const getCornerPoints = (element, offset2) => {
-    const { x, y, width, height, angle } = element;
+    const { x, y, width, height, angle: angle2 } = element;
     const center = elementCenterPoint(element, elementsMap);
     if (element.type === "diamond") {
       const [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY] = getDiamondPoints(element);
@@ -6990,7 +7348,7 @@ var isBindableElementInsideOtherBindable = (innerElement, outerElement, elements
         pointFrom5(x + leftX - offset2, y + leftY)
         // left
       ];
-      return corners2.map((corner) => pointRotateRads6(corner, center, angle));
+      return corners2.map((corner) => pointRotateRads6(corner, center, angle2));
     }
     if (element.type === "ellipse") {
       const cx = x + width / 2;
@@ -7007,7 +7365,7 @@ var isBindableElementInsideOtherBindable = (innerElement, outerElement, elements
         pointFrom5(cx - rx - offset2, cy)
         // left
       ];
-      return corners2.map((corner) => pointRotateRads6(corner, center, angle));
+      return corners2.map((corner) => pointRotateRads6(corner, center, angle2));
     }
     const corners = [
       pointFrom5(x - offset2, y - offset2),
@@ -7019,7 +7377,7 @@ var isBindableElementInsideOtherBindable = (innerElement, outerElement, elements
       pointFrom5(x - offset2, y + height + offset2)
       // bottom-left
     ];
-    return corners.map((corner) => pointRotateRads6(corner, center, angle));
+    return corners.map((corner) => pointRotateRads6(corner, center, angle2));
   };
   const offset = -1 * Math.max(innerElement.width, innerElement.height) / 20;
   const innerCorners = getCornerPoints(innerElement, offset);
@@ -7245,7 +7603,7 @@ import {
 // src/elbowArrow.ts
 init_define_import_meta_env();
 import {
-  clamp as clamp2,
+  clamp as clamp3,
   pointDistance as pointDistance3,
   pointFrom as pointFrom7,
   pointScaleFromOrigin as pointScaleFromOrigin2,
@@ -8589,12 +8947,12 @@ var normalizeArrowElementUpdate = (global2, nextFixedSegments, startIsSpecial, e
     );
   }
   points = points.map(
-    ([x, y]) => pointFrom7(clamp2(x, -1e6, 1e6), clamp2(y, -1e6, 1e6))
+    ([x, y]) => pointFrom7(clamp3(x, -1e6, 1e6), clamp3(y, -1e6, 1e6))
   );
   return {
     points,
-    x: clamp2(offsetX, -1e6, 1e6),
-    y: clamp2(offsetY, -1e6, 1e6),
+    x: clamp3(offsetX, -1e6, 1e6),
+    y: clamp3(offsetY, -1e6, 1e6),
     fixedSegments: (nextFixedSegments?.length ?? 0) > 0 ? nextFixedSegments : null,
     ...getSizeFromPoints(points),
     startIsSpecial,
@@ -8806,7 +9164,7 @@ var getBindingGap = (bindTarget, opts) => {
 var maxBindingDistance_simple = (zoom) => {
   const BASE_BINDING_DISTANCE = Math.max(BASE_BINDING_GAP, 15);
   const zoomValue = zoom?.value && zoom.value < 1 ? zoom.value : 1;
-  return clamp3(
+  return clamp4(
     // reducing zoom impact so that the diff between binding distance and
     // binding gap is kept to minimum when possible
     BASE_BINDING_DISTANCE / (zoomValue * 1.5),
@@ -9118,10 +9476,12 @@ var getBindingStrategyForDraggingBindingElementEndpoints_simple = (arrow, draggi
   const endDragged = draggingPoints.has(endIdx);
   let start2 = { mode: void 0 };
   let end = { mode: void 0 };
-  invariant7(
-    arrow.points.length > 1,
-    "Do not attempt to bind linear elements with a single point"
-  );
+  if (arrow.points.length < 2) {
+    console.error(
+      "Attempting to bind a linear element with less than 2 points"
+    );
+    return { start: { mode: void 0 }, end: { mode: void 0 } };
+  }
   if (!startDragged && !endDragged) {
     return { start: start2, end };
   }
@@ -9282,10 +9642,12 @@ var getBindingStrategyForDraggingBindingElementEndpoints_complex = (arrow, dragg
   const endDragged = draggingPoints.has(endIdx);
   let start2 = { mode: void 0 };
   let end = { mode: void 0 };
-  invariant7(
-    arrow.points.length > 1,
-    "Do not attempt to bind linear elements with a single point"
-  );
+  if (arrow.points.length < 2) {
+    console.error(
+      "Attempting to bind a linear element with less than 2 points"
+    );
+    return { start: { mode: void 0 }, end: { mode: void 0 } };
+  }
   if (!startDragged && !endDragged) {
     return { start: start2, end };
   }
@@ -9770,12 +10132,12 @@ var avoidRectangularCorner = (arrowElement, bindTarget, elementsMap, p) => {
   return p;
 };
 var snapToMid = (bindTarget, elementsMap, p, tolerance = 0.05, arrowElement) => {
-  const { x, y, width, height, angle } = bindTarget;
+  const { x, y, width, height, angle: angle2 } = bindTarget;
   const center = elementCenterPoint(bindTarget, elementsMap, -0.1, -0.1);
-  const nonRotated = pointRotateRads8(p, center, -angle);
+  const nonRotated = pointRotateRads8(p, center, -angle2);
   const bindingGap = arrowElement ? getBindingGap(bindTarget, arrowElement) : 0;
-  const verticalThreshold = clamp3(tolerance * height, 5, 80);
-  const horizontalThreshold = clamp3(tolerance * width, 5, 80);
+  const verticalThreshold = clamp4(tolerance * height, 5, 80);
+  const horizontalThreshold = clamp4(tolerance * width, 5, 80);
   if (pointDistance4(center, nonRotated) < bindingGap) {
     return void 0;
   }
@@ -9783,25 +10145,25 @@ var snapToMid = (bindTarget, elementsMap, p, tolerance = 0.05, arrowElement) =>
     return pointRotateRads8(
       pointFrom8(x - bindingGap, center[1]),
       center,
-      angle
+      angle2
     );
   } else if (nonRotated[1] <= y + height / 2 && nonRotated[0] > center[0] - horizontalThreshold && nonRotated[0] < center[0] + horizontalThreshold) {
     return pointRotateRads8(
       pointFrom8(center[0], y - bindingGap),
       center,
-      angle
+      angle2
     );
   } else if (nonRotated[0] >= x + width / 2 && nonRotated[1] > center[1] - verticalThreshold && nonRotated[1] < center[1] + verticalThreshold) {
     return pointRotateRads8(
       pointFrom8(x + width + bindingGap, center[1]),
       center,
-      angle
+      angle2
     );
   } else if (nonRotated[1] >= y + height / 2 && nonRotated[0] > center[0] - horizontalThreshold && nonRotated[0] < center[0] + horizontalThreshold) {
     return pointRotateRads8(
       pointFrom8(center[0], y + height + bindingGap),
       center,
-      angle
+      angle2
     );
   } else if (bindTarget.type === "diamond") {
     const distance3 = bindingGap;
@@ -9822,16 +10184,16 @@ var snapToMid = (bindTarget, elementsMap, p, tolerance = 0.05, arrowElement) =>
       y + 3 * height / 4 + distance3
     );
     if (pointDistance4(topLeft, nonRotated) < Math.max(horizontalThreshold, verticalThreshold)) {
-      return pointRotateRads8(topLeft, center, angle);
+      return pointRotateRads8(topLeft, center, angle2);
     }
     if (pointDistance4(topRight, nonRotated) < Math.max(horizontalThreshold, verticalThreshold)) {
-      return pointRotateRads8(topRight, center, angle);
+      return pointRotateRads8(topRight, center, angle2);
     }
     if (pointDistance4(bottomLeft, nonRotated) < Math.max(horizontalThreshold, verticalThreshold)) {
-      return pointRotateRads8(bottomLeft, center, angle);
+      return pointRotateRads8(bottomLeft, center, angle2);
     }
     if (pointDistance4(bottomRight, nonRotated) < Math.max(horizontalThreshold, verticalThreshold)) {
-      return pointRotateRads8(bottomRight, center, angle);
+      return pointRotateRads8(bottomRight, center, angle2);
     }
   }
   return void 0;
@@ -10338,10 +10700,10 @@ var normalizeFixedPoint = (fixedPoint) => {
   if (!isFixedPoint(fixedPoint)) {
     return [0.5001, 0.5001];
   }
-  const EPSILON2 = 1e-4;
-  if (Math.abs(fixedPoint[0] - 0.5) < EPSILON2 || Math.abs(fixedPoint[1] - 0.5) < EPSILON2) {
+  const EPSILON = 1e-4;
+  if (Math.abs(fixedPoint[0] - 0.5) < EPSILON || Math.abs(fixedPoint[1] - 0.5) < EPSILON) {
     return fixedPoint.map(
-      (ratio) => Math.abs(ratio - 0.5) < EPSILON2 ? 0.5001 : ratio
+      (ratio) => Math.abs(ratio - 0.5) < EPSILON ? 0.5001 : ratio
     );
   }
   return fixedPoint;
@@ -10401,11 +10763,11 @@ var getShapeSideAdaptive = (fixedPoint, shapeType) => {
   const [x, y] = fixedPoint;
   const centerX = x - 0.5;
   const centerY = y - 0.5;
-  let angle = Math.atan2(centerY, centerX);
-  if (angle < 0) {
-    angle += 2 * Math.PI;
+  let angle2 = Math.atan2(centerY, centerX);
+  if (angle2 < 0) {
+    angle2 += 2 * Math.PI;
   }
-  const degrees = angle * 180 / Math.PI;
+  const degrees = angle2 * 180 / Math.PI;
   const config = SHAPE_CONFIGS[shapeType];
   const boundaries = getSectorBoundaries(config);
   for (const boundary of boundaries) {
@@ -10560,33 +10922,33 @@ var getBindingSideMidPoint = (binding, elementsMap) => {
         break;
       }
       case "top-right": {
-        const angle = -Math.PI / 4;
-        const ellipseX = radiusX * Math.cos(angle);
-        const ellipseY = radiusY * Math.sin(angle);
+        const angle2 = -Math.PI / 4;
+        const ellipseX = radiusX * Math.cos(angle2);
+        const ellipseY = radiusY * Math.sin(angle2);
         x = ellipseCenterX + ellipseX + OFFSET * 0.707;
         y = ellipseCenterY + ellipseY - OFFSET * 0.707;
         break;
       }
       case "bottom-right": {
-        const angle = Math.PI / 4;
-        const ellipseX = radiusX * Math.cos(angle);
-        const ellipseY = radiusY * Math.sin(angle);
+        const angle2 = Math.PI / 4;
+        const ellipseX = radiusX * Math.cos(angle2);
+        const ellipseY = radiusY * Math.sin(angle2);
         x = ellipseCenterX + ellipseX + OFFSET * 0.707;
         y = ellipseCenterY + ellipseY + OFFSET * 0.707;
         break;
       }
       case "bottom-left": {
-        const angle = 3 * Math.PI / 4;
-        const ellipseX = radiusX * Math.cos(angle);
-        const ellipseY = radiusY * Math.sin(angle);
+        const angle2 = 3 * Math.PI / 4;
+        const ellipseX = radiusX * Math.cos(angle2);
+        const ellipseY = radiusY * Math.sin(angle2);
         x = ellipseCenterX + ellipseX - OFFSET * 0.707;
         y = ellipseCenterY + ellipseY + OFFSET * 0.707;
         break;
       }
       case "top-left": {
-        const angle = -3 * Math.PI / 4;
-        const ellipseX = radiusX * Math.cos(angle);
-        const ellipseY = radiusY * Math.sin(angle);
+        const angle2 = -3 * Math.PI / 4;
+        const ellipseX = radiusX * Math.cos(angle2);
+        const ellipseY = radiusY * Math.sin(angle2);
         x = ellipseCenterX + ellipseX - OFFSET * 0.707;
         y = ellipseCenterY + ellipseY - OFFSET * 0.707;
         break;
@@ -10700,6 +11062,7 @@ var getMidPoint = (p1, p2) => {
 // src/zindex.ts
 init_define_import_meta_env();
 import { arrayToMap as arrayToMap6, findIndex, findLastIndex } from "@excalidraw/common";
+import { isFiniteNumber } from "@excalidraw/math";
 
 // src/groups.ts
 init_define_import_meta_env();
@@ -10707,52 +11070,15 @@ init_define_import_meta_env();
 // src/selection.ts
 init_define_import_meta_env();
 import { arrayToMap as arrayToMap5, isShallowEqual } from "@excalidraw/common";
-import {
-  lineSegment as lineSegment5,
-  pointFrom as pointFrom10,
-  pointRotateRads as pointRotateRads9
-} from "@excalidraw/math";
 
 // src/frame.ts
 init_define_import_meta_env();
 import { arrayToMap as arrayToMap4 } from "@excalidraw/common";
-import { isPointWithinBounds as isPointWithinBounds2, pointFrom as pointFrom9 } from "@excalidraw/math";
-
-// ../utils/src/bbox.ts
-init_define_import_meta_env();
 import {
-  vectorCross as vectorCross3,
-  vectorFromPoint as vectorFromPoint8
+  isPointWithinBounds as isPointWithinBounds2,
+  pointFrom as pointFrom9,
+  segmentsIntersectAt as segmentsIntersectAt2
 } from "@excalidraw/math";
-function getBBox(line2) {
-  return [
-    Math.min(line2[0][0], line2[1][0]),
-    Math.min(line2[0][1], line2[1][1]),
-    Math.max(line2[0][0], line2[1][0]),
-    Math.max(line2[0][1], line2[1][1])
-  ];
-}
-function doBBoxesIntersect(a2, b2) {
-  return a2[0] <= b2[2] && a2[2] >= b2[0] && a2[1] <= b2[3] && a2[3] >= b2[1];
-}
-var EPSILON = 1e-6;
-function isPointOnLine(l2, p) {
-  const p1 = vectorFromPoint8(l2[1], l2[0]);
-  const p2 = vectorFromPoint8(p, l2[0]);
-  const r = vectorCross3(p1, p2);
-  return Math.abs(r) < EPSILON;
-}
-function isPointRightOfLine(l2, p) {
-  const p1 = vectorFromPoint8(l2[1], l2[0]);
-  const p2 = vectorFromPoint8(p, l2[0]);
-  return vectorCross3(p1, p2) < 0;
-}
-function isLineSegmentTouchingOrCrossingLine(a2, b2) {
-  return isPointOnLine(a2, b2[0]) || isPointOnLine(a2, b2[1]) || (isPointRightOfLine(a2, b2[0]) ? !isPointRightOfLine(a2, b2[1]) : isPointRightOfLine(a2, b2[1]));
-}
-function doLineSegmentsIntersect(a2, b2) {
-  return doBBoxesIntersect(getBBox(a2), getBBox(b2)) && isLineSegmentTouchingOrCrossingLine(a2, b2) && isLineSegmentTouchingOrCrossingLine(b2, a2);
-}
 
 // src/fractionalIndex.ts
 init_define_import_meta_env();
@@ -11025,7 +11351,7 @@ function isElementIntersectingFrame(element, frame, elementsMap) {
   const elementLineSegments = getElementLineSegments(element, elementsMap);
   const intersecting = frameLineSegments.some(
     (frameLineSegment) => elementLineSegments.some(
-      (elementLineSegment) => doLineSegmentsIntersect(frameLineSegment, elementLineSegment)
+      (elementLineSegment) => segmentsIntersectAt2(frameLineSegment, elementLineSegment)
     )
   );
   return intersecting;
@@ -11313,9 +11639,6 @@ var addElementsToFrame = (allElements, elementsToAdd, frame) => {
     if (isFrameLikeElement(element) || element.frameId && otherFrames.has(element.frameId)) {
       continue;
     }
-    if (element.frameId && element.frameId !== frame.id) {
-      continue;
-    }
     finalElementsToAdd.add(element);
     const boundTextElement = getBoundTextElement(element, elementsMap);
     if (boundTextElement && !finalElementsToAdd.has(boundTextElement)) {
@@ -11598,283 +11921,100 @@ var getElementsWithinSelection = (elements, selection, elementsMap, excludeEleme
     selectionX2,
     selectionY2
   ];
-  const selectionEdges = [
-    lineSegment5(
-      pointFrom10(selectionX1, selectionY1),
-      pointFrom10(selectionX2, selectionY1)
-    ),
-    lineSegment5(
-      pointFrom10(selectionX2, selectionY1),
-      pointFrom10(selectionX2, selectionY2)
-    ),
-    lineSegment5(
-      pointFrom10(selectionX2, selectionY2),
-      pointFrom10(selectionX1, selectionY2)
-    ),
-    lineSegment5(
-      pointFrom10(selectionX1, selectionY2),
-      pointFrom10(selectionX1, selectionY1)
-    )
-  ];
-  const framesInSelection = excludeElementsInFrames ? /* @__PURE__ */ new Set() : null;
-  const groups = {};
-  const elementsInSelection = /* @__PURE__ */ new Set();
-  for (const element of elements) {
-    if (shouldIgnoreElementFromSelection(element)) {
+  return elementsOverlappingBBox({
+    elements,
+    bounds: selectionBounds,
+    elementsMap,
+    type: boxSelectionMode,
+    shouldIgnoreElementFromSelection,
+    excludeElementsInFrames
+  });
+};
+var getVisibleAndNonSelectedElements = (elements, selectedElements, appState, elementsMap) => {
+  const selectedElementsSet = new Set(
+    selectedElements.map((element) => element.id)
+  );
+  return elements.filter((element) => {
+    const isVisible = isElementInViewport(
+      element,
+      appState.width,
+      appState.height,
+      appState,
+      elementsMap
+    );
+    return !selectedElementsSet.has(element.id) && isVisible;
+  });
+};
+var isSomeElementSelected = function() {
+  let lastElements = null;
+  let lastSelectedElementIds = null;
+  let isSelected = null;
+  const ret = (elements, appState) => {
+    if (isSelected != null && elements === lastElements && appState.selectedElementIds === lastSelectedElementIds) {
+      return isSelected;
+    }
+    isSelected = elements.some(
+      (element) => appState.selectedElementIds[element.id]
+    );
+    lastElements = elements;
+    lastSelectedElementIds = appState.selectedElementIds;
+    return isSelected;
+  };
+  ret.clearCache = () => {
+    lastElements = null;
+    lastSelectedElementIds = null;
+    isSelected = null;
+  };
+  return ret;
+}();
+var getSelectedElements = (elements, appState, opts) => {
+  const addedElements = /* @__PURE__ */ new Set();
+  const selectedElements = [];
+  for (const element of elements.values()) {
+    if (appState.selectedElementIds[element.id]) {
+      selectedElements.push(element);
+      addedElements.add(element.id);
       continue;
     }
-    const groupId = element.groupIds.at(-1);
-    if (groupId) {
-      if (!groups[groupId]) {
-        groups[groupId] = [];
+    if (opts?.includeBoundTextElement && isBoundToContainer(element) && appState.selectedElementIds[element?.containerId]) {
+      selectedElements.push(element);
+      addedElements.add(element.id);
+      continue;
+    }
+  }
+  if (opts?.includeElementsInFrames) {
+    const elementsToInclude = [];
+    selectedElements.forEach((element) => {
+      if (isFrameLikeElement(element)) {
+        getFrameChildren(elements, element.id).forEach(
+          (e) => !addedElements.has(e.id) && elementsToInclude.push(e)
+        );
       }
-      groups[groupId].push(element);
-    }
-    const strokeWidth = element.strokeWidth;
-    let labelAABB = null;
-    let elementAABB = getElementBounds(element, elementsMap);
-    elementAABB = [
-      elementAABB[0] - strokeWidth / 2,
-      elementAABB[1] - strokeWidth / 2,
-      elementAABB[2] + strokeWidth / 2,
-      elementAABB[3] + strokeWidth / 2
-    ];
-    const boundTextElement = isArrowElement(element) && getBoundTextElement(element, elementsMap);
-    if (boundTextElement) {
-      const { x, y } = LinearElementEditor.getBoundTextElementPosition(
-        element,
-        boundTextElement,
-        elementsMap
-      );
-      labelAABB = [
-        x,
-        y,
-        x + boundTextElement.width,
-        y + boundTextElement.height
-      ];
-    }
-    const associatedFrame = getContainingFrame(element, elementsMap);
-    if (associatedFrame && elementOverlapsWithFrame(element, associatedFrame, elementsMap)) {
-      const frameAABB = getElementBounds(associatedFrame, elementsMap);
-      elementAABB = [
-        Math.max(elementAABB[0], frameAABB[0]),
-        Math.max(elementAABB[1], frameAABB[1]),
-        Math.min(elementAABB[2], frameAABB[2]),
-        Math.min(elementAABB[3], frameAABB[3])
-      ];
-      labelAABB = labelAABB ? [
-        Math.max(labelAABB[0], frameAABB[0]),
-        Math.max(labelAABB[1], frameAABB[1]),
-        Math.min(labelAABB[2], frameAABB[2]),
-        Math.min(labelAABB[3], frameAABB[3])
-      ] : null;
-    }
-    const commonAABB2 = labelAABB ? [
-      Math.min(labelAABB[0], elementAABB[0]),
-      Math.min(labelAABB[1], elementAABB[1]),
-      Math.max(labelAABB[2], elementAABB[2]),
-      Math.max(labelAABB[3], elementAABB[3])
-    ] : elementAABB;
-    if (boundsContainBounds(selectionBounds, commonAABB2)) {
-      if (framesInSelection && isFrameLikeElement(element)) {
-        framesInSelection.add(element.id);
-      }
-      elementsInSelection.add(element);
-      continue;
-    }
-    if (boxSelectionMode === "overlap" && labelAABB && doBoundsIntersect(selectionBounds, labelAABB)) {
-      elementsInSelection.add(element);
-      continue;
-    }
-    if (boxSelectionMode === "overlap" && doBoundsIntersect(selectionBounds, elementAABB)) {
-      let hasIntersection = false;
-      if (isLinearElement(element) || isFreeDrawElement(element)) {
-        const center = elementCenterPoint(element, elementsMap);
-        hasIntersection = element.points.some((point) => {
-          const rotatedPoint = pointRotateRads9(
-            pointFrom10(element.x + point[0], element.y + point[1]),
-            center,
-            element.angle
-          );
-          return pointInsideBounds(rotatedPoint, selectionBounds);
-        });
-      } else {
-        const nonRotatedElementBounds = getElementBounds(
-          element,
-          elementsMap,
-          true
-        );
-        const center = elementCenterPoint(element, elementsMap);
-        hasIntersection = [
-          pointRotateRads9(
-            pointFrom10(
-              (nonRotatedElementBounds[0] + nonRotatedElementBounds[2]) / 2,
-              nonRotatedElementBounds[1]
-            ),
-            center,
-            element.angle
-          ),
-          pointRotateRads9(
-            pointFrom10(
-              nonRotatedElementBounds[2],
-              (nonRotatedElementBounds[1] + nonRotatedElementBounds[3]) / 2
-            ),
-            center,
-            element.angle
-          ),
-          pointRotateRads9(
-            pointFrom10(
-              (nonRotatedElementBounds[0] + nonRotatedElementBounds[2]) / 2,
-              nonRotatedElementBounds[3]
-            ),
-            center,
-            element.angle
-          ),
-          pointRotateRads9(
-            pointFrom10(
-              nonRotatedElementBounds[0],
-              (nonRotatedElementBounds[1] + nonRotatedElementBounds[3]) / 2
-            ),
-            center,
-            element.angle
-          )
-        ].some((point) => {
-          return pointInsideBounds(
-            pointRotateRads9(point, center, element.angle),
-            selectionBounds
-          );
-        });
-      }
-      if (!hasIntersection) {
-        hasIntersection = selectionEdges.some(
-          (selectionEdge) => intersectElementWithLineSegment(
-            element,
-            elementsMap,
-            selectionEdge,
-            strokeWidth / 2,
-            true
-            // Stop at first hit for better performance
-          ).length > 0
-        );
-      }
-      if (hasIntersection) {
-        if (framesInSelection && isFrameLikeElement(element)) {
-          framesInSelection.add(element.id);
-        }
-        elementsInSelection.add(element);
-        continue;
-      }
-    }
-  }
-  if (framesInSelection) {
-    elementsInSelection.forEach((element) => {
-      if (element.frameId && framesInSelection.has(element.frameId)) {
-        elementsInSelection.delete(element);
-      }
-    });
-  }
-  if (boxSelectionMode === "overlap") {
-    Array.from(elementsInSelection).forEach((element) => {
-      const groupId = element.groupIds.at(-1);
-      const group = groupId ? groups[groupId] : null;
-      group?.forEach((groupElement) => elementsInSelection.add(groupElement));
-    });
-  } else if (boxSelectionMode === "contain") {
-    elementsInSelection.forEach((element) => {
-      const groupId = element.groupIds.at(-1);
-      const group = groupId ? groups[groupId] : null;
-      if (group && !group.every((groupElement) => elementsInSelection.has(groupElement))) {
-        elementsInSelection.delete(element);
-      }
-    });
-  }
-  return elements.filter((element) => elementsInSelection.has(element));
-};
-var getVisibleAndNonSelectedElements = (elements, selectedElements, appState, elementsMap) => {
-  const selectedElementsSet = new Set(
-    selectedElements.map((element) => element.id)
-  );
-  return elements.filter((element) => {
-    const isVisible = isElementInViewport(
-      element,
-      appState.width,
-      appState.height,
-      appState,
-      elementsMap
-    );
-    return !selectedElementsSet.has(element.id) && isVisible;
-  });
-};
-var isSomeElementSelected = function() {
-  let lastElements = null;
-  let lastSelectedElementIds = null;
-  let isSelected = null;
-  const ret = (elements, appState) => {
-    if (isSelected != null && elements === lastElements && appState.selectedElementIds === lastSelectedElementIds) {
-      return isSelected;
-    }
-    isSelected = elements.some(
-      (element) => appState.selectedElementIds[element.id]
-    );
-    lastElements = elements;
-    lastSelectedElementIds = appState.selectedElementIds;
-    return isSelected;
-  };
-  ret.clearCache = () => {
-    lastElements = null;
-    lastSelectedElementIds = null;
-    isSelected = null;
-  };
-  return ret;
-}();
-var getSelectedElements = (elements, appState, opts) => {
-  const addedElements = /* @__PURE__ */ new Set();
-  const selectedElements = [];
-  for (const element of elements.values()) {
-    if (appState.selectedElementIds[element.id]) {
-      selectedElements.push(element);
-      addedElements.add(element.id);
-      continue;
-    }
-    if (opts?.includeBoundTextElement && isBoundToContainer(element) && appState.selectedElementIds[element?.containerId]) {
-      selectedElements.push(element);
-      addedElements.add(element.id);
-      continue;
-    }
-  }
-  if (opts?.includeElementsInFrames) {
-    const elementsToInclude = [];
-    selectedElements.forEach((element) => {
-      if (isFrameLikeElement(element)) {
-        getFrameChildren(elements, element.id).forEach(
-          (e) => !addedElements.has(e.id) && elementsToInclude.push(e)
-        );
-      }
-      elementsToInclude.push(element);
-    });
-    return elementsToInclude;
-  }
-  return selectedElements;
-};
-var getTargetElements = (elements, appState) => appState.editingTextElement ? [appState.editingTextElement] : appState.newElement ? [appState.newElement] : getSelectedElements(elements, appState, {
-  includeBoundTextElement: true
-});
-var makeNextSelectedElementIds = (nextSelectedElementIds, prevState) => {
-  if (isShallowEqual(prevState.selectedElementIds, nextSelectedElementIds)) {
-    return prevState.selectedElementIds;
-  }
-  return nextSelectedElementIds;
-};
-var _getLinearElementEditor = (targetElements, allElements) => {
-  const linears = targetElements.filter(isLinearElement);
-  if (linears.length === 1) {
-    const linear = linears[0];
-    const boundElements = linear.boundElements?.map((def) => def.id) ?? [];
-    const onlySingleLinearSelected = targetElements.every(
-      (el) => el.id === linear.id || boundElements.includes(el.id)
-    );
-    if (onlySingleLinearSelected) {
-      return new LinearElementEditor(linear, arrayToMap5(allElements));
+      elementsToInclude.push(element);
+    });
+    return elementsToInclude;
+  }
+  return selectedElements;
+};
+var getTargetElements = (elements, appState) => appState.editingTextElement ? [appState.editingTextElement] : appState.newElement ? [appState.newElement] : getSelectedElements(elements, appState, {
+  includeBoundTextElement: true
+});
+var makeNextSelectedElementIds = (nextSelectedElementIds, prevState) => {
+  if (isShallowEqual(prevState.selectedElementIds, nextSelectedElementIds)) {
+    return prevState.selectedElementIds;
+  }
+  return nextSelectedElementIds;
+};
+var _getLinearElementEditor = (targetElements, allElements) => {
+  const linears = targetElements.filter(isLinearElement);
+  if (linears.length === 1) {
+    const linear = linears[0];
+    const boundElements = linear.boundElements?.map((def) => def.id) ?? [];
+    const onlySingleLinearSelected = targetElements.every(
+      (el) => el.id === linear.id || boundElements.includes(el.id)
+    );
+    if (onlySingleLinearSelected) {
+      return new LinearElementEditor(linear, arrayToMap5(allElements));
     }
   }
   return null;
@@ -12357,7 +12497,34 @@ var getTargetElementsMap = (elements, indices) => {
     return acc;
   }, /* @__PURE__ */ new Map());
 };
+var hasSameElementIds = (prevElements, nextElements) => {
+  if (prevElements.length !== nextElements.length) {
+    console.error(
+      "z-index reordering failed: resulting array have different lengths"
+    );
+    return false;
+  }
+  const prevElementIdCounts = /* @__PURE__ */ new Map();
+  for (const element of prevElements) {
+    prevElementIdCounts.set(
+      element.id,
+      (prevElementIdCounts.get(element.id) || 0) + 1
+    );
+  }
+  for (const element of nextElements) {
+    const count = prevElementIdCounts.get(element.id);
+    if (!count) {
+      console.error(
+        "z-index reordering failed: element id mismatch / duplicate ids"
+      );
+      return false;
+    }
+    prevElementIdCounts.set(element.id, count - 1);
+  }
+  return true;
+};
 var shiftElementsByOne = (elements, appState, direction, scene) => {
+  const originalElements = elements;
   const indicesToMove = getIndicesToMove(elements, appState);
   const targetElementsMap = getTargetElementsMap(elements, indicesToMove);
   let groupedIndices = toContiguousGroups(indicesToMove);
@@ -12402,11 +12569,17 @@ var shiftElementsByOne = (elements, appState, direction, scene) => {
       ...trailingElements
     ];
   });
+  if (!hasSameElementIds(originalElements, elements)) {
+    return originalElements;
+  }
   syncMovedIndices(elements, targetElementsMap);
   return elements;
 };
 var shiftElementsToEnd = (elements, appState, direction, containingFrame, elementsToBeMoved) => {
   const indicesToMove = getIndicesToMove(elements, appState, elementsToBeMoved);
+  if (indicesToMove.length === 0) {
+    return elements;
+  }
   const targetElementsMap = getTargetElementsMap(elements, indicesToMove);
   const displacedElements = [];
   let leadingIndex;
@@ -12453,6 +12626,12 @@ var shiftElementsToEnd = (elements, appState, direction, containingFrame, elemen
   if (leadingIndex === -1) {
     leadingIndex = 0;
   }
+  const isValidIndex = (index) => {
+    return isFiniteNumber(index) && index >= 0;
+  };
+  if (!isValidIndex(leadingIndex) || !isValidIndex(trailingIndex) || leadingIndex > trailingIndex || indicesToMove.some((index) => index < leadingIndex || index > trailingIndex)) {
+    return elements;
+  }
   for (let index = leadingIndex; index < trailingIndex + 1; index++) {
     if (!indicesToMove.includes(index)) {
       displacedElements.push(elements[index]);
@@ -12472,6 +12651,9 @@ var shiftElementsToEnd = (elements, appState, direction, containingFrame, elemen
     ...targetElements,
     ...trailingElements
   ];
+  if (!hasSameElementIds(elements, nextElements)) {
+    return elements;
+  }
   syncMovedIndices(nextElements, targetElementsMap);
   return nextElements;
 };
@@ -12513,7 +12695,7 @@ function shiftElementsAccountingForFrames(allElements, appState, direction, shif
   );
   for (const [frameId, children] of frameChildrenSets) {
     nextElements = shiftFunction(
-      allElements,
+      nextElements,
       appState,
       direction,
       frameId,
@@ -12559,7 +12741,7 @@ var getNormalizedPoints = ({
   const offsetY = points[0][1];
   return {
     points: points.map((p) => {
-      return pointFrom11(p[0] - offsetX, p[1] - offsetY);
+      return pointFrom10(p[0] - offsetX, p[1] - offsetY);
     }),
     offsetX,
     offsetY
@@ -12588,7 +12770,7 @@ var LinearElementEditor = class _LinearElementEditor {
   pointerDownState;
   constructor(element, elementsMap, isEditing = false) {
     this.elementId = element.id;
-    if (!pointsEqual6(element.points[0], pointFrom11(0, 0))) {
+    if (!pointsEqual6(element.points[0], pointFrom10(0, 0))) {
       console.error("Linear element is not normalized", Error().stack);
       mutateElement(
         element,
@@ -12687,11 +12869,11 @@ var LinearElementEditor = class _LinearElementEditor {
         element,
         elementsMap,
         pivotPoint,
-        pointFrom11(scenePointerX, scenePointerY),
+        pointFrom10(scenePointerX, scenePointerY),
         event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
         customLineAngle
       );
-      const target = pointFrom11(
+      const target = pointFrom10(
         width + pivotPoint[0],
         height + pivotPoint[1]
       );
@@ -12768,7 +12950,7 @@ var LinearElementEditor = class _LinearElementEditor {
         ...linearElementEditor.initialState,
         altFocusPoint: !linearElementEditor.initialState.altFocusPoint && startBindingElement && updates?.suggestedBinding?.element.id !== startBindingElement.id ? projectFixedPointOntoDiagonal(
           element,
-          pointFrom11(element.x, element.y),
+          pointFrom10(element.x, element.y),
           startBindingElement,
           "start",
           elementsMap,
@@ -12830,11 +13012,11 @@ var LinearElementEditor = class _LinearElementEditor {
         element,
         elementsMap,
         pivotPoint,
-        pointFrom11(scenePointerX, scenePointerY),
+        pointFrom10(scenePointerX, scenePointerY),
         event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
         customLineAngle
       );
-      const target = pointFrom11(
+      const target = pointFrom10(
         width + pivotPoint[0],
         height + pivotPoint[1]
       );
@@ -12928,7 +13110,7 @@ var LinearElementEditor = class _LinearElementEditor {
         altFocusPoint: !linearElementEditor.initialState.altFocusPoint && // We only set it once per arrow drag
         isBindingElement(element) && altFocusPointBindableElement ? projectFixedPointOntoDiagonal(
           element,
-          pointFrom11(element.x, element.y),
+          pointFrom10(element.x, element.y),
           altFocusPointBindableElement,
           "start",
           elementsMap,
@@ -13072,11 +13254,11 @@ var LinearElementEditor = class _LinearElementEditor {
     const existingSegmentMidpointHitCoords = linearElementEditor.segmentMidPointHoveredCoords;
     if (existingSegmentMidpointHitCoords) {
       const distance3 = pointDistance5(
-        pointFrom11(
+        pointFrom10(
           existingSegmentMidpointHitCoords[0],
           existingSegmentMidpointHitCoords[1]
         ),
-        pointFrom11(scenePointer.x, scenePointer.y)
+        pointFrom10(scenePointer.x, scenePointer.y)
       );
       if (distance3 <= threshold) {
         return existingSegmentMidpointHitCoords;
@@ -13092,7 +13274,7 @@ var LinearElementEditor = class _LinearElementEditor {
       if (midPoints[index] !== null) {
         const distance3 = pointDistance5(
           midPoints[index],
-          pointFrom11(scenePointer.x, scenePointer.y)
+          pointFrom10(scenePointer.x, scenePointer.y)
         );
         if (distance3 <= threshold) {
           return midPoints[index];
@@ -13134,7 +13316,7 @@ var LinearElementEditor = class _LinearElementEditor {
         "Invalid segment index while calculating elbow arrow mid point"
       );
       const p = pointCenter2(element.points[index - 1], element.points[index]);
-      return pointFrom11(element.x + p[0], element.y + p[1]);
+      return pointFrom10(element.x + p[0], element.y + p[1]);
     }
     const [lines, curves] = deconstructLinearOrFreeDrawElement(
       element,
@@ -13202,7 +13384,7 @@ var LinearElementEditor = class _LinearElementEditor {
       appState,
       elementsMap
     );
-    const point = pointFrom11(scenePointer.x, scenePointer.y);
+    const point = pointFrom10(scenePointer.x, scenePointer.y);
     let segmentMidpointIndex = null;
     if (segmentMidpoint) {
       segmentMidpointIndex = _LinearElementEditor.getSegmentMidPointIndex(
@@ -13261,12 +13443,12 @@ var LinearElementEditor = class _LinearElementEditor {
     const [x1, y1, x2, y2] = getElementAbsoluteCoords2(element, elementsMap);
     const cx = (x1 + x2) / 2;
     const cy = (y1 + y2) / 2;
-    const targetPoint = clickedPointIndex > -1 && pointRotateRads10(
-      pointFrom11(
+    const targetPoint = clickedPointIndex > -1 && pointRotateRads9(
+      pointFrom10(
         element.x + element.points[clickedPointIndex][0],
         element.y + element.points[clickedPointIndex][1]
       ),
-      pointFrom11(cx, cy),
+      pointFrom10(cx, cy),
       element.angle
     );
     const nextSelectedPointsIndices = clickedPointIndex > -1 || event.shiftKey ? event.shiftKey || linearElementEditor.selectedPointsIndices?.includes(clickedPointIndex) ? normalizeSelectedPoints([
@@ -13333,10 +13515,10 @@ var LinearElementEditor = class _LinearElementEditor {
         element,
         elementsMap,
         anchor,
-        pointFrom11(scenePointerX, scenePointerY),
+        pointFrom10(scenePointerX, scenePointerY),
         event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize()
       );
-      newPoint = pointFrom11(width + anchor[0], height + anchor[1]);
+      newPoint = pointFrom10(width + anchor[0], height + anchor[1]);
     } else {
       newPoint = _LinearElementEditor.createPointAt(
         element,
@@ -13373,9 +13555,9 @@ var LinearElementEditor = class _LinearElementEditor {
     const cx = (x1 + x2) / 2;
     const cy = (y1 + y2) / 2;
     const { x, y } = element;
-    return pointRotateRads10(
-      pointFrom11(x + p[0], y + p[1]),
-      pointFrom11(cx, cy),
+    return pointRotateRads9(
+      pointFrom10(x + p[0], y + p[1]),
+      pointFrom10(cx, cy),
       element.angle
     );
   }
@@ -13386,9 +13568,9 @@ var LinearElementEditor = class _LinearElementEditor {
     const cy = (y1 + y2) / 2;
     return element.points.map((p) => {
       const { x, y } = element;
-      return pointRotateRads10(
-        pointFrom11(x + p[0], y + p[1]),
-        pointFrom11(cx, cy),
+      return pointRotateRads9(
+        pointFrom10(x + p[0], y + p[1]),
+        pointFrom10(cx, cy),
         element.angle
       );
     });
@@ -13396,18 +13578,18 @@ var LinearElementEditor = class _LinearElementEditor {
   static getPointAtIndexGlobalCoordinates(element, indexMaybeFromEnd, elementsMap) {
     const index = indexMaybeFromEnd < 0 ? element.points.length + indexMaybeFromEnd : indexMaybeFromEnd;
     const [, , , , cx, cy] = getElementAbsoluteCoords2(element, elementsMap);
-    const center = pointFrom11(cx, cy);
+    const center = pointFrom10(cx, cy);
     const p = element.points[index];
     const { x, y } = element;
-    return p ? pointRotateRads10(
-      pointFrom11(x + p[0], y + p[1]),
+    return p ? pointRotateRads9(
+      pointFrom10(x + p[0], y + p[1]),
       center,
       element.angle
-    ) : pointRotateRads10(pointFrom11(x, y), center, element.angle);
+    ) : pointRotateRads9(pointFrom10(x, y), center, element.angle);
   }
   static pointFromAbsoluteCoords(element, absoluteCoords, elementsMap) {
     if (isElbowArrow(element)) {
-      return pointFrom11(
+      return pointFrom10(
         absoluteCoords[0] - element.x,
         absoluteCoords[1] - element.y
       );
@@ -13415,12 +13597,12 @@ var LinearElementEditor = class _LinearElementEditor {
     const [x1, y1, x2, y2] = getElementAbsoluteCoords2(element, elementsMap);
     const cx = (x1 + x2) / 2;
     const cy = (y1 + y2) / 2;
-    const [x, y] = pointRotateRads10(
-      pointFrom11(absoluteCoords[0], absoluteCoords[1]),
-      pointFrom11(cx, cy),
+    const [x, y] = pointRotateRads9(
+      pointFrom10(absoluteCoords[0], absoluteCoords[1]),
+      pointFrom10(cx, cy),
       -element.angle
     );
-    return pointFrom11(x - element.x, y - element.y);
+    return pointFrom10(x - element.x, y - element.y);
   }
   static getPointIndexUnderCursor(element, elementsMap, zoom, x, y) {
     const pointHandles = _LinearElementEditor.getPointsGlobalCoordinates(
@@ -13430,7 +13612,7 @@ var LinearElementEditor = class _LinearElementEditor {
     let idx = pointHandles.length;
     while (--idx > -1) {
       const p = pointHandles[idx];
-      if (pointDistance5(pointFrom11(x, y), pointFrom11(p[0], p[1])) * zoom.value < // +1px to account for outline stroke
+      if (pointDistance5(pointFrom10(x, y), pointFrom10(p[0], p[1])) * zoom.value < // +1px to account for outline stroke
       _LinearElementEditor.POINT_HANDLE_SIZE + 1) {
         return idx;
       }
@@ -13442,12 +13624,12 @@ var LinearElementEditor = class _LinearElementEditor {
     const [x1, y1, x2, y2] = getElementAbsoluteCoords2(element, elementsMap);
     const cx = (x1 + x2) / 2;
     const cy = (y1 + y2) / 2;
-    const [rotatedX, rotatedY] = pointRotateRads10(
-      pointFrom11(pointerOnGrid[0], pointerOnGrid[1]),
-      pointFrom11(cx, cy),
+    const [rotatedX, rotatedY] = pointRotateRads9(
+      pointFrom10(pointerOnGrid[0], pointerOnGrid[1]),
+      pointFrom10(cx, cy),
       -element.angle
     );
-    return pointFrom11(rotatedX - element.x, rotatedY - element.y);
+    return pointFrom10(rotatedX - element.x, rotatedY - element.y);
   }
   /**
    * Normalizes line points so that the start point is at [0,0]. This is
@@ -13496,7 +13678,7 @@ var LinearElementEditor = class _LinearElementEditor {
           pointAddedToEnd = true;
         }
         acc.push(
-          nextPoint ? pointFrom11((p[0] + nextPoint[0]) / 2, (p[1] + nextPoint[1]) / 2) : pointFrom11(p[0], p[1])
+          nextPoint ? pointFrom10((p[0] + nextPoint[0]) / 2, (p[1] + nextPoint[1]) / 2) : pointFrom10(p[0], p[1])
         );
         nextSelectedIndices.push(indexCursor + 1);
         ++indexCursor;
@@ -13512,7 +13694,7 @@ var LinearElementEditor = class _LinearElementEditor {
         /* @__PURE__ */ new Map([
           [
             element.points.length - 1,
-            { point: pointFrom11(lastPoint[0] + 30, lastPoint[1] + 30) }
+            { point: pointFrom10(lastPoint[0] + 30, lastPoint[1] + 30) }
           ]
         ])
       );
@@ -13532,7 +13714,7 @@ var LinearElementEditor = class _LinearElementEditor {
     });
     const isPolygon = isLineElement(element) && element.polygon;
     if (isPolygon && (isUncommittedPoint || pointIndices.includes(0) || pointIndices.includes(element.points.length - 1))) {
-      nextPoints[0] = pointFrom11(
+      nextPoints[0] = pointFrom10(
         nextPoints[nextPoints.length - 1][0],
         nextPoints[nextPoints.length - 1][1]
       );
@@ -13553,7 +13735,7 @@ var LinearElementEditor = class _LinearElementEditor {
   static addPoints(element, scene, addedPoints) {
     const nextPoints = [...element.points, ...addedPoints];
     if (isLineElement(element) && element.polygon) {
-      nextPoints[0] = pointFrom11(
+      nextPoints[0] = pointFrom10(
         nextPoints[nextPoints.length - 1][0],
         nextPoints[nextPoints.length - 1][1]
       );
@@ -13578,7 +13760,7 @@ var LinearElementEditor = class _LinearElementEditor {
       const lastPointUpdate = pointUpdates.get(points.length - 1);
       if (firstPointUpdate) {
         pointUpdates.set(points.length - 1, {
-          point: pointFrom11(
+          point: pointFrom10(
             firstPointUpdate.point[0],
             firstPointUpdate.point[1]
           ),
@@ -13586,12 +13768,12 @@ var LinearElementEditor = class _LinearElementEditor {
         });
       } else if (lastPointUpdate) {
         pointUpdates.set(0, {
-          point: pointFrom11(lastPointUpdate.point[0], lastPointUpdate.point[1]),
+          point: pointFrom10(lastPointUpdate.point[0], lastPointUpdate.point[1]),
           isDragging: lastPointUpdate.isDragging
         });
       }
     }
-    const updatedOriginPoint = pointUpdates.get(0)?.point ?? pointFrom11(0, 0);
+    const updatedOriginPoint = pointUpdates.get(0)?.point ?? pointFrom10(0, 0);
     const [offsetX, offsetY] = updatedOriginPoint;
     const nextPoints = isElbowArrow(element) ? [
       pointUpdates.get(0)?.point ?? points[0],
@@ -13601,7 +13783,7 @@ var LinearElementEditor = class _LinearElementEditor {
       if (otherUpdates?.moveMidPointsWithElement && idx !== 0 && idx !== points.length - 1 && !pointUpdates.has(idx)) {
         return current;
       }
-      return pointFrom11(
+      return pointFrom10(
         current[0] - offsetX,
         current[1] - offsetY
       );
@@ -13636,11 +13818,11 @@ var LinearElementEditor = class _LinearElementEditor {
       return false;
     }
     const origin = linearElementEditor.initialState.origin;
-    const dist = pointDistance5(
+    const dist2 = pointDistance5(
       origin,
-      pointFrom11(pointerCoords.x, pointerCoords.y)
+      pointFrom10(pointerCoords.x, pointerCoords.y)
     );
-    if (!appState.selectedLinearElement?.isEditing && dist < DRAGGING_THRESHOLD / appState.zoom.value) {
+    if (!appState.selectedLinearElement?.isEditing && dist2 < DRAGGING_THRESHOLD / appState.zoom.value) {
       return false;
     }
     return true;
@@ -13708,9 +13890,9 @@ var LinearElementEditor = class _LinearElementEditor {
       const prevCenterY = (prevCoords[1] + prevCoords[3]) / 2;
       const dX = prevCenterX - nextCenterX;
       const dY = prevCenterY - nextCenterY;
-      const rotatedOffset = pointRotateRads10(
-        pointFrom11(offsetX, offsetY),
-        pointFrom11(dX, dY),
+      const rotatedOffset = pointRotateRads9(
+        pointFrom10(offsetX, offsetY),
+        pointFrom10(dX, dY),
         element.angle
       );
       scene.mutateElement(element, {
@@ -13745,9 +13927,9 @@ var LinearElementEditor = class _LinearElementEditor {
       gridY,
       customLineAngle
     );
-    return pointRotateRads10(
-      pointFrom11(width, height),
-      pointFrom11(0, 0),
+    return pointRotateRads9(
+      pointFrom10(width, height),
+      pointFrom10(0, 0),
       -element.angle
     );
   }
@@ -13793,34 +13975,34 @@ var LinearElementEditor = class _LinearElementEditor {
     );
     const boundTextX2 = boundTextX1 + boundTextElement.width;
     const boundTextY2 = boundTextY1 + boundTextElement.height;
-    const centerPoint = pointFrom11(cx, cy);
-    const topLeftRotatedPoint = pointRotateRads10(
-      pointFrom11(x1, y1),
+    const centerPoint = pointFrom10(cx, cy);
+    const topLeftRotatedPoint = pointRotateRads9(
+      pointFrom10(x1, y1),
       centerPoint,
       element.angle
     );
-    const topRightRotatedPoint = pointRotateRads10(
-      pointFrom11(x2, y1),
+    const topRightRotatedPoint = pointRotateRads9(
+      pointFrom10(x2, y1),
       centerPoint,
       element.angle
     );
-    const counterRotateBoundTextTopLeft = pointRotateRads10(
-      pointFrom11(boundTextX1, boundTextY1),
+    const counterRotateBoundTextTopLeft = pointRotateRads9(
+      pointFrom10(boundTextX1, boundTextY1),
       centerPoint,
       -element.angle
     );
-    const counterRotateBoundTextTopRight = pointRotateRads10(
-      pointFrom11(boundTextX2, boundTextY1),
+    const counterRotateBoundTextTopRight = pointRotateRads9(
+      pointFrom10(boundTextX2, boundTextY1),
       centerPoint,
       -element.angle
     );
-    const counterRotateBoundTextBottomLeft = pointRotateRads10(
-      pointFrom11(boundTextX1, boundTextY2),
+    const counterRotateBoundTextBottomLeft = pointRotateRads9(
+      pointFrom10(boundTextX1, boundTextY2),
       centerPoint,
       -element.angle
     );
-    const counterRotateBoundTextBottomRight = pointRotateRads10(
-      pointFrom11(boundTextX2, boundTextY2),
+    const counterRotateBoundTextBottomRight = pointRotateRads9(
+      pointFrom10(boundTextX2, boundTextY2),
       centerPoint,
       -element.angle
     );
@@ -13898,7 +14080,7 @@ var LinearElementEditor = class _LinearElementEditor {
     if (index && index > 0 && index < element.points.length) {
       const isHorizontal = headingIsHorizontal(
         vectorToHeading(
-          vectorFromPoint9(element.points[index], element.points[index - 1])
+          vectorFromPoint8(element.points[index], element.points[index - 1])
         )
       );
       const fixedSegments = (element.fixedSegments ?? []).reduce(
@@ -13910,11 +14092,11 @@ var LinearElementEditor = class _LinearElementEditor {
       );
       fixedSegments[index] = {
         index,
-        start: pointFrom11(
+        start: pointFrom10(
           !isHorizontal ? x - element.x : element.points[index - 1][0],
           isHorizontal ? y - element.y : element.points[index - 1][1]
         ),
-        end: pointFrom11(
+        end: pointFrom10(
           !isHorizontal ? x - element.x : element.points[index][0],
           isHorizontal ? y - element.y : element.points[index][1]
         )
@@ -13926,7 +14108,7 @@ var LinearElementEditor = class _LinearElementEditor {
       scene.mutateElement(element, {
         fixedSegments: nextFixedSegments
       });
-      const point = pointFrom11(
+      const point = pointFrom10(
         element.x + (element.fixedSegments[offset].start[0] + element.fixedSegments[offset].end[0]) / 2,
         element.y + (element.fixedSegments[offset].start[1] + element.fixedSegments[offset].end[1]) / 2
       );
@@ -13967,7 +14149,7 @@ var pointDraggingUpdates = (selectedPointsIndices, deltaX, deltaY, scenePointerX
       return [
         pointIndex,
         {
-          point: pointFrom11(point[0] + deltaX, point[1] + deltaY),
+          point: pointFrom10(point[0] + deltaX, point[1] + deltaY),
           isDragging: true
         }
       ];
@@ -14006,7 +14188,7 @@ var pointDraggingUpdates = (selectedPointsIndices, deltaX, deltaY, scenePointerX
           midPoint: app.state.isMidpointSnappingEnabled ? snapToMid(
             suggestedBindingElement,
             elementsMap,
-            pointFrom11(
+            pointFrom10(
               scenePointerX - linearElementEditor.pointerOffset.x,
               scenePointerY - linearElementEditor.pointerOffset.y
             )
@@ -14086,7 +14268,7 @@ var pointDraggingUpdates = (selectedPointsIndices, deltaX, deltaY, scenePointerX
       updates.suggestedBinding = start2.element ? {
         element: start2.element,
         midPoint: getSnapOutlineMidPoint(
-          pointFrom11(
+          pointFrom10(
             scenePointerX - linearElementEditor.pointerOffset.x,
             scenePointerY - linearElementEditor.pointerOffset.y
           ),
@@ -14117,7 +14299,7 @@ var pointDraggingUpdates = (selectedPointsIndices, deltaX, deltaY, scenePointerX
       updates.suggestedBinding = end.element ? {
         element: end.element,
         midPoint: getSnapOutlineMidPoint(
-          pointFrom11(
+          pointFrom10(
             scenePointerX - linearElementEditor.pointerOffset.x,
             scenePointerY - linearElementEditor.pointerOffset.y
           ),
@@ -14130,11 +14312,11 @@ var pointDraggingUpdates = (selectedPointsIndices, deltaX, deltaY, scenePointerX
   } else if (endIsDragged) {
     updates.suggestedBinding = app.state.suggestedBinding;
   }
-  const offsetStartLocalPoint = startIsDragged ? pointFrom11(
+  const offsetStartLocalPoint = startIsDragged ? pointFrom10(
     element.points[0][0] + deltaX,
     element.points[0][1] + deltaY
   ) : element.points[0];
-  const offsetEndLocalPoint = endIsDragged ? pointFrom11(
+  const offsetEndLocalPoint = endIsDragged ? pointFrom10(
     element.points[element.points.length - 1][0] + deltaX,
     element.points[element.points.length - 1][1] + deltaY
   ) : element.points[element.points.length - 1];
@@ -14203,11 +14385,338 @@ var pointDraggingUpdates = (selectedPointsIndices, deltaX, deltaY, scenePointerX
 };
 var determineCustomLinearAngle = (pivotPoint, draggedPoint) => Math.atan2(draggedPoint[1] - pivotPoint[1], draggedPoint[0] - pivotPoint[0]);
 
-// src/renderElement.ts
-var isPendingImageElement = (element, renderConfig) => isInitializedImageElement(element) && !renderConfig.imageCache.has(element.fileId);
-var getCanvasPadding = (element) => {
-  switch (element.type) {
-    case "freedraw":
+// src/image.ts
+init_define_import_meta_env();
+import { MIME_TYPES, SVG_NS } from "@excalidraw/common";
+
+// ../../node_modules/thumbhash/thumbhash.js
+init_define_import_meta_env();
+function rgbaToThumbHash(w, h, rgba) {
+  if (w > 100 || h > 100)
+    throw new Error(`${w}x${h} doesn't fit in 100x100`);
+  let { PI, round, max, cos, abs } = Math;
+  let avg_r = 0, avg_g = 0, avg_b = 0, avg_a = 0;
+  for (let i = 0, j = 0; i < w * h; i++, j += 4) {
+    let alpha = rgba[j + 3] / 255;
+    avg_r += alpha / 255 * rgba[j];
+    avg_g += alpha / 255 * rgba[j + 1];
+    avg_b += alpha / 255 * rgba[j + 2];
+    avg_a += alpha;
+  }
+  if (avg_a) {
+    avg_r /= avg_a;
+    avg_g /= avg_a;
+    avg_b /= avg_a;
+  }
+  let hasAlpha = avg_a < w * h;
+  let l_limit = hasAlpha ? 5 : 7;
+  let lx = max(1, round(l_limit * w / max(w, h)));
+  let ly = max(1, round(l_limit * h / max(w, h)));
+  let l2 = [];
+  let p = [];
+  let q = [];
+  let a2 = [];
+  for (let i = 0, j = 0; i < w * h; i++, j += 4) {
+    let alpha = rgba[j + 3] / 255;
+    let r = avg_r * (1 - alpha) + alpha / 255 * rgba[j];
+    let g = avg_g * (1 - alpha) + alpha / 255 * rgba[j + 1];
+    let b2 = avg_b * (1 - alpha) + alpha / 255 * rgba[j + 2];
+    l2[i] = (r + g + b2) / 3;
+    p[i] = (r + g) / 2 - b2;
+    q[i] = r - g;
+    a2[i] = alpha;
+  }
+  let encodeChannel = (channel, nx, ny) => {
+    let dc = 0, ac = [], scale = 0, fx = [];
+    for (let cy = 0; cy < ny; cy++) {
+      for (let cx = 0; cx * ny < nx * (ny - cy); cx++) {
+        let f = 0;
+        for (let x = 0; x < w; x++)
+          fx[x] = cos(PI / w * cx * (x + 0.5));
+        for (let y = 0; y < h; y++)
+          for (let x = 0, fy = cos(PI / h * cy * (y + 0.5)); x < w; x++)
+            f += channel[x + y * w] * fx[x] * fy;
+        f /= w * h;
+        if (cx || cy) {
+          ac.push(f);
+          scale = max(scale, abs(f));
+        } else {
+          dc = f;
+        }
+      }
+    }
+    if (scale)
+      for (let i = 0; i < ac.length; i++)
+        ac[i] = 0.5 + 0.5 / scale * ac[i];
+    return [dc, ac, scale];
+  };
+  let [l_dc, l_ac, l_scale] = encodeChannel(l2, max(3, lx), max(3, ly));
+  let [p_dc, p_ac, p_scale] = encodeChannel(p, 3, 3);
+  let [q_dc, q_ac, q_scale] = encodeChannel(q, 3, 3);
+  let [a_dc, a_ac, a_scale] = hasAlpha ? encodeChannel(a2, 5, 5) : [];
+  let isLandscape = w > h;
+  let header24 = round(63 * l_dc) | round(31.5 + 31.5 * p_dc) << 6 | round(31.5 + 31.5 * q_dc) << 12 | round(31 * l_scale) << 18 | hasAlpha << 23;
+  let header16 = (isLandscape ? ly : lx) | round(63 * p_scale) << 3 | round(63 * q_scale) << 9 | isLandscape << 15;
+  let hash = [header24 & 255, header24 >> 8 & 255, header24 >> 16, header16 & 255, header16 >> 8];
+  let ac_start = hasAlpha ? 6 : 5;
+  let ac_index = 0;
+  if (hasAlpha)
+    hash.push(round(15 * a_dc) | round(15 * a_scale) << 4);
+  for (let ac of hasAlpha ? [l_ac, p_ac, q_ac, a_ac] : [l_ac, p_ac, q_ac])
+    for (let f of ac)
+      hash[ac_start + (ac_index >> 1)] |= round(15 * f) << ((ac_index++ & 1) << 2);
+  return new Uint8Array(hash);
+}
+function thumbHashToRGBA(hash) {
+  let { PI, min, max, cos, round } = Math;
+  let header24 = hash[0] | hash[1] << 8 | hash[2] << 16;
+  let header16 = hash[3] | hash[4] << 8;
+  let l_dc = (header24 & 63) / 63;
+  let p_dc = (header24 >> 6 & 63) / 31.5 - 1;
+  let q_dc = (header24 >> 12 & 63) / 31.5 - 1;
+  let l_scale = (header24 >> 18 & 31) / 31;
+  let hasAlpha = header24 >> 23;
+  let p_scale = (header16 >> 3 & 63) / 63;
+  let q_scale = (header16 >> 9 & 63) / 63;
+  let isLandscape = header16 >> 15;
+  let lx = max(3, isLandscape ? hasAlpha ? 5 : 7 : header16 & 7);
+  let ly = max(3, isLandscape ? header16 & 7 : hasAlpha ? 5 : 7);
+  let a_dc = hasAlpha ? (hash[5] & 15) / 15 : 1;
+  let a_scale = (hash[5] >> 4) / 15;
+  let ac_start = hasAlpha ? 6 : 5;
+  let ac_index = 0;
+  let decodeChannel = (nx, ny, scale) => {
+    let ac = [];
+    for (let cy = 0; cy < ny; cy++)
+      for (let cx = cy ? 0 : 1; cx * ny < nx * (ny - cy); cx++)
+        ac.push(((hash[ac_start + (ac_index >> 1)] >> ((ac_index++ & 1) << 2) & 15) / 7.5 - 1) * scale);
+    return ac;
+  };
+  let l_ac = decodeChannel(lx, ly, l_scale);
+  let p_ac = decodeChannel(3, 3, p_scale * 1.25);
+  let q_ac = decodeChannel(3, 3, q_scale * 1.25);
+  let a_ac = hasAlpha && decodeChannel(5, 5, a_scale);
+  let ratio = thumbHashToApproximateAspectRatio(hash);
+  let w = round(ratio > 1 ? 32 : 32 * ratio);
+  let h = round(ratio > 1 ? 32 / ratio : 32);
+  let rgba = new Uint8Array(w * h * 4), fx = [], fy = [];
+  for (let y = 0, i = 0; y < h; y++) {
+    for (let x = 0; x < w; x++, i += 4) {
+      let l2 = l_dc, p = p_dc, q = q_dc, a2 = a_dc;
+      for (let cx = 0, n = max(lx, hasAlpha ? 5 : 3); cx < n; cx++)
+        fx[cx] = cos(PI / w * (x + 0.5) * cx);
+      for (let cy = 0, n = max(ly, hasAlpha ? 5 : 3); cy < n; cy++)
+        fy[cy] = cos(PI / h * (y + 0.5) * cy);
+      for (let cy = 0, j = 0; cy < ly; cy++)
+        for (let cx = cy ? 0 : 1, fy2 = fy[cy] * 2; cx * ly < lx * (ly - cy); cx++, j++)
+          l2 += l_ac[j] * fx[cx] * fy2;
+      for (let cy = 0, j = 0; cy < 3; cy++) {
+        for (let cx = cy ? 0 : 1, fy2 = fy[cy] * 2; cx < 3 - cy; cx++, j++) {
+          let f = fx[cx] * fy2;
+          p += p_ac[j] * f;
+          q += q_ac[j] * f;
+        }
+      }
+      if (hasAlpha)
+        for (let cy = 0, j = 0; cy < 5; cy++)
+          for (let cx = cy ? 0 : 1, fy2 = fy[cy] * 2; cx < 5 - cy; cx++, j++)
+            a2 += a_ac[j] * fx[cx] * fy2;
+      let b2 = l2 - 2 / 3 * p;
+      let r = (3 * l2 - b2 + q) / 2;
+      let g = r - q;
+      rgba[i] = max(0, 255 * min(1, r));
+      rgba[i + 1] = max(0, 255 * min(1, g));
+      rgba[i + 2] = max(0, 255 * min(1, b2));
+      rgba[i + 3] = max(0, 255 * min(1, a2));
+    }
+  }
+  return { w, h, rgba };
+}
+function thumbHashToApproximateAspectRatio(hash) {
+  let header = hash[3];
+  let hasAlpha = hash[2] & 128;
+  let isLandscape = hash[4] & 128;
+  let lx = isLandscape ? hasAlpha ? 5 : 7 : header & 7;
+  let ly = isLandscape ? header & 7 : hasAlpha ? 5 : 7;
+  return lx / ly;
+}
+
+// src/image.ts
+var THUMB_HASH_MAX_DIMENSION = 100;
+var thumbHashCanvasCache = /* @__PURE__ */ new Map();
+var invalidThumbHashes = /* @__PURE__ */ new Set();
+var bytesToBase64 = (bytes) => {
+  let binary = "";
+  for (const byte of bytes) {
+    binary += String.fromCharCode(byte);
+  }
+  return btoa(binary);
+};
+var base64ToBytes = (base64) => {
+  const binary = atob(base64);
+  const bytes = new Uint8Array(binary.length);
+  for (let index = 0; index < binary.length; index++) {
+    bytes[index] = binary.charCodeAt(index);
+  }
+  return bytes;
+};
+var generateThumbHash = (image) => {
+  const naturalWidth = image.naturalWidth || image.width;
+  const naturalHeight = image.naturalHeight || image.height;
+  if (!naturalWidth || !naturalHeight) {
+    return null;
+  }
+  const scale = Math.min(
+    1,
+    THUMB_HASH_MAX_DIMENSION / Math.max(naturalWidth, naturalHeight)
+  );
+  const width = Math.max(1, Math.round(naturalWidth * scale));
+  const height = Math.max(1, Math.round(naturalHeight * scale));
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const context = canvas.getContext("2d");
+  if (!context) {
+    return null;
+  }
+  context.drawImage(image, 0, 0, width, height);
+  const imageData = context.getImageData(0, 0, width, height);
+  return bytesToBase64(rgbaToThumbHash(width, height, imageData.data));
+};
+var getThumbHashPlaceholder = (thumbHash) => {
+  if (invalidThumbHashes.has(thumbHash)) {
+    return null;
+  }
+  const cached = thumbHashCanvasCache.get(thumbHash);
+  if (cached) {
+    return cached;
+  }
+  try {
+    const { w, h, rgba } = thumbHashToRGBA(base64ToBytes(thumbHash));
+    const canvas = document.createElement("canvas");
+    canvas.width = w;
+    canvas.height = h;
+    const context = canvas.getContext("2d");
+    if (!context) {
+      return null;
+    }
+    const imageData = context.createImageData(w, h);
+    imageData.data.set(rgba);
+    context.putImageData(imageData, 0, 0);
+    thumbHashCanvasCache.set(thumbHash, canvas);
+    return canvas;
+  } catch (error) {
+    invalidThumbHashes.add(thumbHash);
+    console.warn("Invalid ThumbHash", error);
+    return null;
+  }
+};
+var loadHTMLImageElement = (dataURL) => {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.onload = () => {
+      resolve(image);
+    };
+    image.onerror = (error) => {
+      reject(error);
+    };
+    image.src = dataURL;
+  });
+};
+var updateImageCache = async ({
+  fileIds,
+  files,
+  imageCache
+}) => {
+  const updatedFiles = /* @__PURE__ */ new Map();
+  const erroredFiles = /* @__PURE__ */ new Map();
+  await Promise.all(
+    fileIds.reduce((promises, fileId) => {
+      const fileData = files[fileId];
+      if (fileData && !updatedFiles.has(fileId)) {
+        updatedFiles.set(fileId, true);
+        return promises.concat(
+          (async () => {
+            try {
+              if (fileData.mimeType === MIME_TYPES.binary) {
+                throw new Error("Only images can be added to ImageCache");
+              }
+              const imagePromise = loadHTMLImageElement(fileData.dataURL);
+              const data = {
+                image: imagePromise,
+                mimeType: fileData.mimeType
+              };
+              imageCache.set(fileId, data);
+              const image = await imagePromise;
+              imageCache.set(fileId, { ...data, image });
+            } catch (error) {
+              erroredFiles.set(fileId, true);
+            }
+          })()
+        );
+      }
+      return promises;
+    }, [])
+  );
+  return {
+    imageCache,
+    /** includes errored files because they cache was updated nonetheless */
+    updatedFiles,
+    /** files that failed when creating HTMLImageElement */
+    erroredFiles
+  };
+};
+var getInitializedImageElements = (elements) => elements.filter(
+  (element) => isInitializedImageElement(element)
+);
+var isHTMLSVGElement = (node) => {
+  return node?.nodeName.toLowerCase() === "svg";
+};
+var normalizeSVG = (SVGString) => {
+  const doc = new DOMParser().parseFromString(SVGString, MIME_TYPES.svg);
+  const svg = doc.querySelector("svg");
+  const errorNode = doc.querySelector("parsererror");
+  if (errorNode || !isHTMLSVGElement(svg)) {
+    throw new Error("Invalid SVG");
+  } else {
+    if (!svg.hasAttribute("xmlns")) {
+      svg.setAttribute("xmlns", SVG_NS);
+    }
+    let width = svg.getAttribute("width");
+    let height = svg.getAttribute("height");
+    if (width?.includes("%") || width === "auto") {
+      width = null;
+    }
+    if (height?.includes("%") || height === "auto") {
+      height = null;
+    }
+    const viewBox = svg.getAttribute("viewBox");
+    if (!width || !height) {
+      width = width || "50";
+      height = height || "50";
+      if (viewBox) {
+        const match = viewBox.match(
+          /\d+ +\d+ +(\d+(?:\.\d+)?) +(\d+(?:\.\d+)?)/
+        );
+        if (match) {
+          [, width, height] = match;
+        }
+      }
+      svg.setAttribute("width", width);
+      svg.setAttribute("height", height);
+    }
+    if (!viewBox) {
+      svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+    }
+    return svg.outerHTML;
+  }
+};
+
+// src/renderElement.ts
+var isPendingImageElement = (element, renderConfig) => isInitializedImageElement(element) && !renderConfig.imageCache.has(element.fileId);
+var getCanvasPadding = (element) => {
+  switch (element.type) {
+    case "freedraw":
       return element.strokeWidth * 12;
     case "text":
       return element.fontSize / 2;
@@ -14332,14 +14841,27 @@ var generateElementCanvas = (element, elementsMap, zoom, renderConfig, appState)
 };
 var DEFAULT_LINK_SIZE = 14;
 var IMAGE_PLACEHOLDER_IMG = typeof document !== "undefined" ? document.createElement("img") : { src: "" };
-IMAGE_PLACEHOLDER_IMG.src = `data:${MIME_TYPES.svg},${encodeURIComponent(
+IMAGE_PLACEHOLDER_IMG.src = `data:${MIME_TYPES2.svg},${encodeURIComponent(
   `<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="image" class="svg-inline--fa fa-image fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#888" d="M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56zM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48z"></path></svg>`
 )}`;
 var IMAGE_ERROR_PLACEHOLDER_IMG = typeof document !== "undefined" ? document.createElement("img") : { src: "" };
-IMAGE_ERROR_PLACEHOLDER_IMG.src = `data:${MIME_TYPES.svg},${encodeURIComponent(
+IMAGE_ERROR_PLACEHOLDER_IMG.src = `data:${MIME_TYPES2.svg},${encodeURIComponent(
   `<svg viewBox="0 0 668 668" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48ZM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56ZM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48Z" style="fill:#888;fill-rule:nonzero" transform="matrix(.81709 0 0 .81709 124.825 145.825)"/><path d="M256 8C119.034 8 8 119.033 8 256c0 136.967 111.034 248 248 248s248-111.034 248-248S392.967 8 256 8Zm130.108 117.892c65.448 65.448 70 165.481 20.677 235.637L150.47 105.216c70.204-49.356 170.226-44.735 235.638 20.676ZM125.892 386.108c-65.448-65.448-70-165.481-20.677-235.637L361.53 406.784c-70.203 49.356-170.226 44.736-235.638-20.676Z" style="fill:#888;fill-rule:nonzero" transform="matrix(.30366 0 0 .30366 506.822 60.065)"/></svg>`
 )}`;
 var drawImagePlaceholder = (element, context, theme) => {
+  if (element.status !== "error" && element.thumbHash) {
+    const thumbHashPlaceholder = getThumbHashPlaceholder(element.thumbHash);
+    if (thumbHashPlaceholder) {
+      context.drawImage(
+        thumbHashPlaceholder,
+        0,
+        0,
+        element.width,
+        element.height
+      );
+      return;
+    }
+  }
   context.fillStyle = theme === THEME.DARK ? "#2E2E2E" : "#E7E7E7";
   context.fillRect(0, 0, element.width, element.height);
   const imageMinWidthOrHeight = Math.min(element.width, element.height);
@@ -14383,7 +14905,10 @@ var drawElementOnCanvas = (element, rc, context, renderConfig) => {
       const shapes = ShapeCache.generateElementShape(element, renderConfig);
       for (const shape of shapes) {
         if (typeof shape === "string") {
-          context.fillStyle = renderConfig.theme === THEME.DARK ? applyDarkModeFilter(element.strokeColor) : element.strokeColor;
+          context.fillStyle = applyDarkModeFilter(
+            element.strokeColor,
+            renderConfig.theme === THEME.DARK
+          );
           context.fill(new Path2D(shape));
         } else {
           rc.draw(shape);
@@ -14408,13 +14933,42 @@ var drawElementOnCanvas = (element, rc, context, renderConfig) => {
           );
           context.clip();
         }
+        const transitionDuration = renderConfig.imageTransitionDuration ?? 0;
+        if (!renderConfig.isExporting && cacheEntry?.transitionStart !== void 0) {
+          if (transitionDuration > 0) {
+            const transitionProgress = Math.min(
+              1,
+              (performance.now() - cacheEntry.transitionStart) / transitionDuration
+            );
+            if (transitionProgress < 1) {
+              if (cacheEntry.placeholderImage) {
+                context.drawImage(
+                  cacheEntry.placeholderImage,
+                  0,
+                  0,
+                  element.width,
+                  element.height
+                );
+              } else {
+                drawImagePlaceholder(element, context, renderConfig.theme);
+              }
+              context.globalAlpha *= transitionProgress;
+            } else {
+              delete cacheEntry.placeholderImage;
+              delete cacheEntry.transitionStart;
+            }
+          } else {
+            delete cacheEntry.placeholderImage;
+            delete cacheEntry.transitionStart;
+          }
+        }
         const { x, y, width, height } = element.crop ? element.crop : {
           x: 0,
           y: 0,
           width: img.naturalWidth,
           height: img.naturalHeight
         };
-        const shouldInvertImage = renderConfig.theme === THEME.DARK && cacheEntry?.mimeType === MIME_TYPES.svg;
+        const shouldInvertImage = renderConfig.theme === THEME.DARK && cacheEntry?.mimeType === MIME_TYPES2.svg;
         if (shouldInvertImage && isSafari) {
           const devicePixelRatio = window.devicePixelRatio || 1;
           const tempCanvas = document.createElement("canvas");
@@ -14491,7 +15045,10 @@ var drawElementOnCanvas = (element, rc, context, renderConfig) => {
         context.canvas.setAttribute("dir", rtl ? "rtl" : "ltr");
         context.save();
         context.font = getFontString3(element);
-        context.fillStyle = renderConfig.theme === THEME.DARK ? applyDarkModeFilter(element.strokeColor) : element.strokeColor;
+        context.fillStyle = applyDarkModeFilter(
+          element.strokeColor,
+          renderConfig.theme === THEME.DARK
+        );
         context.textAlign = element.textAlign;
         const lines = element.text.replace(/\r\n?/g, "\n").split("\n");
         const horizontalOffset = element.textAlign === "center" ? element.width / 2 : element.textAlign === "right" ? element.width : 0;
@@ -14531,8 +15088,9 @@ var generateElementWithCanvas = (element, elementsMap, renderConfig, appState) =
   const boundTextElement = getBoundTextElement(element, elementsMap);
   const boundTextElementVersion = boundTextElement?.version || null;
   const imageCrop = isImageElement(element) ? element.crop : null;
+  const hasActiveImageTransition = isInitializedImageElement(element) && renderConfig.imageCache.get(element.fileId)?.transitionStart !== void 0;
   const containingFrameOpacity = getContainingFrame(element, elementsMap)?.opacity || 100;
-  if (!prevElementWithCanvas || shouldRegenerateBecauseZoom || prevElementWithCanvas.theme !== appState.theme || prevElementWithCanvas.boundTextElementVersion !== boundTextElementVersion || prevElementWithCanvas.imageCrop !== imageCrop || prevElementWithCanvas.containingFrameOpacity !== containingFrameOpacity || // since we rotate the canvas when copying from cached canvas, we don't
+  if (!prevElementWithCanvas || shouldRegenerateBecauseZoom || prevElementWithCanvas.theme !== appState.theme || prevElementWithCanvas.boundTextElementVersion !== boundTextElementVersion || prevElementWithCanvas.imageCrop !== imageCrop || hasActiveImageTransition || prevElementWithCanvas.containingFrameOpacity !== containingFrameOpacity || // since we rotate the canvas when copying from cached canvas, we don't
   // regenerate the cached canvas. But we need to in case of labels which are
   // cached alongside the arrow, and we want the labels to remain unrotated
   // with respect to the arrow.
@@ -14639,7 +15197,10 @@ var renderElement = (element, elementsMap, allElementsMap, rc, context, renderCo
         );
         context.fillStyle = "rgba(0, 0, 200, 0.04)";
         context.lineWidth = FRAME_STYLE.strokeWidth / appState.zoom.value;
-        context.strokeStyle = appState.theme === THEME.DARK ? applyDarkModeFilter(FRAME_STYLE.strokeColor) : FRAME_STYLE.strokeColor;
+        context.strokeStyle = applyDarkModeFilter(
+          FRAME_STYLE.strokeColor,
+          appState.theme === THEME.DARK
+        );
         if (isMagicFrameElement(element)) {
           context.strokeStyle = appState.theme === THEME.LIGHT ? "#7affd7" : applyDarkModeFilter("#1d8264");
         }
@@ -14705,8 +15266,10 @@ var renderElement = (element, elementsMap, allElementsMap, rc, context, renderCo
     case "embeddable": {
       if (renderConfig.isExporting) {
         const [x1, y1, x2, y2] = getElementAbsoluteCoords2(element, elementsMap);
-        const cx = (x1 + x2) / 2 + appState.scrollX;
-        const cy = (y1 + y2) / 2 + appState.scrollY;
+        const centerX = (x1 + x2) / 2;
+        const centerY = (y1 + y2) / 2;
+        const cx = centerX + appState.scrollX;
+        const cy = centerY + appState.scrollY;
         let shiftX = (x2 - x1) / 2 - (element.x - x1);
         let shiftY = (y2 - y1) / 2 - (element.y - y1);
         if (isTextElement(element)) {
@@ -14725,46 +15288,33 @@ var renderElement = (element, elementsMap, allElementsMap, rc, context, renderCo
         context.translate(cx, cy);
         const boundTextElement = getBoundTextElement(element, elementsMap);
         if (isArrowElement(element) && boundTextElement) {
-          const tempCanvas = document.createElement("canvas");
-          const tempCanvasContext = tempCanvas.getContext("2d");
-          const maxDim = Math.max(distance2(x1, x2), distance2(y1, y2));
-          const padding = getCanvasPadding(element);
-          tempCanvas.width = maxDim * appState.exportScale + padding * 10 * appState.exportScale;
-          tempCanvas.height = maxDim * appState.exportScale + padding * 10 * appState.exportScale;
-          tempCanvasContext.translate(
-            tempCanvas.width / 2,
-            tempCanvas.height / 2
-          );
-          tempCanvasContext.scale(appState.exportScale, appState.exportScale);
           shiftX = element.width / 2 - (element.x - x1);
           shiftY = element.height / 2 - (element.y - y1);
-          tempCanvasContext.rotate(element.angle);
-          const tempRc = rough_default.canvas(tempCanvas);
-          tempCanvasContext.translate(-shiftX, -shiftY);
-          drawElementOnCanvas(element, tempRc, tempCanvasContext, renderConfig);
-          tempCanvasContext.translate(shiftX, shiftY);
-          tempCanvasContext.rotate(-element.angle);
+          context.save();
+          context.rotate(element.angle);
+          context.translate(-shiftX, -shiftY);
+          drawElementOnCanvas(element, rc, context, renderConfig);
+          context.restore();
           const [, , , , boundTextCx, boundTextCy] = getElementAbsoluteCoords2(
             boundTextElement,
             elementsMap
           );
-          const boundTextShiftX = (x1 + x2) / 2 - boundTextCx;
-          const boundTextShiftY = (y1 + y2) / 2 - boundTextCy;
-          tempCanvasContext.translate(-boundTextShiftX, -boundTextShiftY);
-          tempCanvasContext.clearRect(
-            -boundTextElement.width / 2,
-            -boundTextElement.height / 2,
-            boundTextElement.width,
-            boundTextElement.height
-          );
-          context.scale(1 / appState.exportScale, 1 / appState.exportScale);
-          context.drawImage(
-            tempCanvas,
-            -tempCanvas.width / 2,
-            -tempCanvas.height / 2,
-            tempCanvas.width,
-            tempCanvas.height
-          );
+          const holeX = boundTextCx - centerX - boundTextElement.width / 2 - BOUND_TEXT_PADDING3;
+          const holeY = boundTextCy - centerY - boundTextElement.height / 2 - BOUND_TEXT_PADDING3;
+          const holeWidth = boundTextElement.width + BOUND_TEXT_PADDING3 * 2;
+          const holeHeight = boundTextElement.height + BOUND_TEXT_PADDING3 * 2;
+          const isTransparentHole = "viewBackgroundColor" in appState && (appState.viewBackgroundColor === "transparent" || !appState.viewBackgroundColor);
+          if (!isTransparentHole) {
+            context.save();
+            context.fillStyle = applyDarkModeFilter(
+              renderConfig.canvasBackgroundColor,
+              renderConfig.theme === THEME.DARK
+            );
+            context.fillRect(holeX, holeY, holeWidth, holeHeight);
+            context.restore();
+          } else {
+            context.clearRect(holeX, holeY, holeWidth, holeHeight);
+          }
         } else {
           context.rotate(element.angle);
           if (element.type === "image") {
@@ -14842,7 +15392,7 @@ function getFreedrawOutlineAsSegments(element, points, elementsMap) {
     },
     elementsMap
   );
-  const center = pointFrom12(
+  const center = pointFrom11(
     (bounds[0] + bounds[2]) / 2,
     (bounds[1] + bounds[3]) / 2
   );
@@ -14850,10 +15400,10 @@ function getFreedrawOutlineAsSegments(element, points, elementsMap) {
   return points.slice(2).reduce(
     (acc, curr) => {
       acc.push(
-        lineSegment6(
+        lineSegment5(
           acc[acc.length - 1][1],
-          pointRotateRads11(
-            pointFrom12(curr[0] + element.x, curr[1] + element.y),
+          pointRotateRads10(
+            pointFrom11(curr[0] + element.x, curr[1] + element.y),
             center,
             element.angle
           )
@@ -14862,17 +15412,17 @@ function getFreedrawOutlineAsSegments(element, points, elementsMap) {
       return acc;
     },
     [
-      lineSegment6(
-        pointRotateRads11(
-          pointFrom12(
+      lineSegment5(
+        pointRotateRads10(
+          pointFrom11(
             points[0][0] + element.x,
             points[0][1] + element.y
           ),
           center,
           element.angle
         ),
-        pointRotateRads11(
-          pointFrom12(
+        pointRotateRads10(
+          pointFrom11(
             points[1][0] + element.x,
             points[1][1] + element.y
           ),
@@ -14967,7 +15517,7 @@ var generateRoughOptions = (element, continuousPath = false, isDarkMode = false)
     fillWeight: element.strokeWidth / 2,
     hachureGap: element.strokeWidth * 4,
     roughness: adjustRoughness(element),
-    stroke: isDarkMode ? applyDarkModeFilter2(element.strokeColor) : element.strokeColor,
+    stroke: applyDarkModeFilter2(element.strokeColor, isDarkMode),
     preserveVertices: continuousPath || element.roughness < ROUGHNESS.cartoonist
   };
   switch (element.type) {
@@ -14977,7 +15527,7 @@ var generateRoughOptions = (element, continuousPath = false, isDarkMode = false)
     case "diamond":
     case "ellipse": {
       options.fillStyle = element.fillStyle;
-      options.fill = isTransparent3(element.backgroundColor) ? void 0 : isDarkMode ? applyDarkModeFilter2(element.backgroundColor) : element.backgroundColor;
+      options.fill = isTransparent3(element.backgroundColor) ? void 0 : applyDarkModeFilter2(element.backgroundColor, isDarkMode);
       if (element.type === "ellipse") {
         options.curveFitting = 1;
       }
@@ -14987,7 +15537,7 @@ var generateRoughOptions = (element, continuousPath = false, isDarkMode = false)
     case "freedraw": {
       if (isPathALoop(element.points)) {
         options.fillStyle = element.fillStyle;
-        options.fill = element.backgroundColor === "transparent" ? void 0 : isDarkMode ? applyDarkModeFilter2(element.backgroundColor) : element.backgroundColor;
+        options.fill = element.backgroundColor === "transparent" ? void 0 : applyDarkModeFilter2(element.backgroundColor, isDarkMode);
       }
       return options;
     }
@@ -15062,8 +15612,11 @@ var getArrowheadShapes = (element, shape, position, arrowhead, generator, option
   if (arrowhead === null) {
     return [];
   }
-  const strokeColor = isDarkMode ? applyDarkModeFilter2(element.strokeColor) : element.strokeColor;
-  const backgroundFillColor = isDarkMode ? applyDarkModeFilter2(canvasBackgroundColor) : canvasBackgroundColor;
+  const strokeColor = applyDarkModeFilter2(element.strokeColor, isDarkMode);
+  const backgroundFillColor = applyDarkModeFilter2(
+    canvasBackgroundColor,
+    isDarkMode
+  );
   const cardinalityOneOrManyOffset = -0.25;
   const cardinalityZeroCircleScale = 0.8;
   switch (arrowhead) {
@@ -15248,26 +15801,26 @@ var generateLinearCollisionShape = (element, elementsMap) => {
   switch (element.type) {
     case "line":
     case "arrow": {
-      const points = element.points.length ? element.points : [pointFrom13(0, 0)];
+      const points = element.points.length ? element.points : [pointFrom12(0, 0)];
       if (isElbowArrow(element)) {
         return generator.path(generateElbowArrowShape(points, 16), options).sets[0].ops;
       } else if (!element.roundness) {
         return points.map((point, idx) => {
-          const p = pointRotateRads12(
-            pointFrom13(element.x + point[0], element.y + point[1]),
+          const p = pointRotateRads11(
+            pointFrom12(element.x + point[0], element.y + point[1]),
             center,
             element.angle
           );
           return {
             op: idx === 0 ? "move" : "lineTo",
-            data: pointFrom13(p[0] - element.x, p[1] - element.y)
+            data: pointFrom12(p[0] - element.x, p[1] - element.y)
           };
         });
       }
       return generator.curve(points, options).sets[0].ops.slice(0, element.points.length).map((op, i) => {
         if (i === 0) {
-          const p = pointRotateRads12(
-            pointFrom13(
+          const p = pointRotateRads11(
+            pointFrom12(
               element.x + op.data[0],
               element.y + op.data[1]
             ),
@@ -15276,30 +15829,30 @@ var generateLinearCollisionShape = (element, elementsMap) => {
           );
           return {
             op: "move",
-            data: pointFrom13(p[0] - element.x, p[1] - element.y)
+            data: pointFrom12(p[0] - element.x, p[1] - element.y)
           };
         }
         return {
           op: "bcurveTo",
           data: [
-            pointRotateRads12(
-              pointFrom13(
+            pointRotateRads11(
+              pointFrom12(
                 element.x + op.data[0],
                 element.y + op.data[1]
               ),
               center,
               element.angle
             ),
-            pointRotateRads12(
-              pointFrom13(
+            pointRotateRads11(
+              pointFrom12(
                 element.x + op.data[2],
                 element.y + op.data[3]
               ),
               center,
               element.angle
             ),
-            pointRotateRads12(
-              pointFrom13(
+            pointRotateRads11(
+              pointFrom12(
                 element.x + op.data[4],
                 element.y + op.data[5]
               ),
@@ -15307,7 +15860,7 @@ var generateLinearCollisionShape = (element, elementsMap) => {
               element.angle
             )
           ].map(
-            (p) => pointFrom13(p[0] - element.x, p[1] - element.y)
+            (p) => pointFrom12(p[0] - element.x, p[1] - element.y)
           ).flat()
         };
       });
@@ -15322,8 +15875,8 @@ var generateLinearCollisionShape = (element, elementsMap) => {
       );
       return generator.curve(simplifiedPoints, options).sets[0].ops.slice(0, element.points.length).map((op, i) => {
         if (i === 0) {
-          const p = pointRotateRads12(
-            pointFrom13(
+          const p = pointRotateRads11(
+            pointFrom12(
               element.x + op.data[0],
               element.y + op.data[1]
             ),
@@ -15332,30 +15885,30 @@ var generateLinearCollisionShape = (element, elementsMap) => {
           );
           return {
             op: "move",
-            data: pointFrom13(p[0] - element.x, p[1] - element.y)
+            data: pointFrom12(p[0] - element.x, p[1] - element.y)
           };
         }
         return {
           op: "bcurveTo",
           data: [
-            pointRotateRads12(
-              pointFrom13(
+            pointRotateRads11(
+              pointFrom12(
                 element.x + op.data[0],
                 element.y + op.data[1]
               ),
               center,
               element.angle
             ),
-            pointRotateRads12(
-              pointFrom13(
+            pointRotateRads11(
+              pointFrom12(
                 element.x + op.data[2],
                 element.y + op.data[3]
               ),
               center,
               element.angle
             ),
-            pointRotateRads12(
-              pointFrom13(
+            pointRotateRads11(
+              pointFrom12(
                 element.x + op.data[4],
                 element.y + op.data[5]
               ),
@@ -15363,7 +15916,7 @@ var generateLinearCollisionShape = (element, elementsMap) => {
               element.angle
             )
           ].map(
-            (p) => pointFrom13(p[0] - element.x, p[1] - element.y)
+            (p) => pointFrom12(p[0] - element.x, p[1] - element.y)
           ).flat()
         };
       });
@@ -15464,7 +16017,7 @@ var _generateElementShape = (element, generator, {
     case "arrow": {
       let shape;
       const options = generateRoughOptions(element, false, isDarkMode);
-      const points = element.points.length ? element.points : [pointFrom13(0, 0)];
+      const points = element.points.length ? element.points : [pointFrom12(0, 0)];
       if (isElbowArrow(element)) {
         if (!points.every(
           (point) => Math.abs(point[0]) <= 1e6 && Math.abs(point[1]) <= 1e6
@@ -15628,14 +16181,14 @@ var getElementShape = (element, elementsMap) => {
       return shouldTestInside(element) ? getClosedCurveShape(
         element,
         roughShape,
-        pointFrom13(element.x, element.y),
+        pointFrom12(element.x, element.y),
         element.angle,
-        pointFrom13(cx, cy)
+        pointFrom12(cx, cy)
       ) : getCurveShape(
         roughShape,
-        pointFrom13(element.x, element.y),
+        pointFrom12(element.x, element.y),
         element.angle,
-        pointFrom13(cx, cy)
+        pointFrom12(cx, cy)
       );
     }
     case "ellipse":
@@ -15644,7 +16197,7 @@ var getElementShape = (element, elementsMap) => {
       const [, , , , cx, cy] = getElementAbsoluteCoords2(element, elementsMap);
       return getFreedrawShape(
         element,
-        pointFrom13(cx, cy),
+        pointFrom12(cx, cy),
         shouldTestInside(element)
       );
     }
@@ -15663,9 +16216,9 @@ var toggleLinePolygonState = (element, nextPolygonState) => {
       firstPoint[1] - lastPoint[1]
     );
     if (distance3 > LINE_POLYGON_POINT_MERGE_DISTANCE || updatedPoints.length < 4) {
-      updatedPoints.push(pointFrom13(firstPoint[0], firstPoint[1]));
+      updatedPoints.push(pointFrom12(firstPoint[0], firstPoint[1]));
     } else {
-      updatedPoints[updatedPoints.length - 1] = pointFrom13(
+      updatedPoints[updatedPoints.length - 1] = pointFrom12(
         firstPoint[0],
         firstPoint[1]
       );
@@ -15682,19 +16235,46 @@ var getFreeDrawSvgPath = (element) => {
     getFreedrawOutlinePoints(element)
   );
 };
-var getFreedrawOutlinePoints = (element) => {
-  const inputPoints = element.simulatePressure ? element.points : element.points.length ? element.points.map(([x, y], i) => [x, y, element.pressures[i]]) : [[0, 0, 0.5]];
+var VARIABLE_WIDTH_FREEDRAW = {
+  /** Stroke size relative to `strokeWidth` for pressure-sensitive strokes. */
+  SIZE_FACTOR: 4.25,
+  THINNING: 0.6,
+  SMOOTHING: 0.5
+};
+var CONSTANT_WIDTH_FREEDRAW = {
+  /** Stroke size relative to `strokeWidth` for uniform (laser) strokes. */
+  SIZE_FACTOR: 1.4
+};
+var getFreedrawStreamline = (element) => element.strokeOptions?.streamline ?? DEFAULT_STROKE_STREAMLINE;
+var getVariableWidthFreedrawOutline = (element) => {
+  const inputPoints = element.simulatePressure ? element.points : element.points.length ? element.points.map(
+    ([x, y], i) => [x, y, element.pressures[i]]
+  ) : [[0, 0, 0.5]];
   return ae(inputPoints, {
     simulatePressure: element.simulatePressure,
-    size: element.strokeWidth * 4.25,
-    thinning: 0.6,
-    smoothing: 0.5,
-    streamline: 0.5,
+    size: element.strokeWidth * VARIABLE_WIDTH_FREEDRAW.SIZE_FACTOR,
+    thinning: VARIABLE_WIDTH_FREEDRAW.THINNING,
+    smoothing: VARIABLE_WIDTH_FREEDRAW.SMOOTHING,
+    streamline: getFreedrawStreamline(element),
     easing: (t) => Math.sin(t * Math.PI / 2),
     // https://easings.net/#easeOutSine
     last: true
   });
 };
+var createLaserPointer = (element) => new LaserPointer({
+  size: element.strokeWidth * CONSTANT_WIDTH_FREEDRAW.SIZE_FACTOR,
+  streamline: getFreedrawStreamline(element),
+  simplify: 0,
+  sizeMapping: (details) => Math.max(0.1, details.pressure)
+});
+var getConstantWidthFreedrawOutline = (element) => {
+  const laserPointer = createLaserPointer(element);
+  element.points.map(([x, y]) => laserPointer.addPoint([x, y, 1]));
+  return laserPointer.getStrokeOutline().map(([x, y]) => [x, y]);
+};
+var getFreedrawOutlinePoints = (element) => {
+  return element.strokeOptions?.variability === "constant" ? getConstantWidthFreedrawOutline(element) : getVariableWidthFreedrawOutline(element);
+};
 var med = (A2, B2) => {
   return [(A2[0] + B2[0]) / 2, (A2[1] + B2[1]) / 2];
 };
@@ -15758,9 +16338,9 @@ var ElementBounds = class _ElementBounds {
     if (isFreeDrawElement(element)) {
       const [minX, minY, maxX, maxY] = getBoundsFromPoints(
         element.points.map(
-          ([x, y]) => pointRotateRads13(
-            pointFrom14(x, y),
-            pointFrom14(cx - element.x, cy - element.y),
+          ([x, y]) => pointRotateRads12(
+            pointFrom13(x, y),
+            pointFrom13(cx - element.x, cy - element.y),
             element.angle
           )
         )
@@ -15774,24 +16354,24 @@ var ElementBounds = class _ElementBounds {
     } else if (isLinearElement(element)) {
       bounds = getLinearElementRotatedBounds(element, cx, cy, elementsMap);
     } else if (element.type === "diamond") {
-      const [x11, y11] = pointRotateRads13(
-        pointFrom14(cx, y1),
-        pointFrom14(cx, cy),
+      const [x11, y11] = pointRotateRads12(
+        pointFrom13(cx, y1),
+        pointFrom13(cx, cy),
         element.angle
       );
-      const [x12, y12] = pointRotateRads13(
-        pointFrom14(cx, y2),
-        pointFrom14(cx, cy),
+      const [x12, y12] = pointRotateRads12(
+        pointFrom13(cx, y2),
+        pointFrom13(cx, cy),
         element.angle
       );
-      const [x22, y22] = pointRotateRads13(
-        pointFrom14(x1, cy),
-        pointFrom14(cx, cy),
+      const [x22, y22] = pointRotateRads12(
+        pointFrom13(x1, cy),
+        pointFrom13(cx, cy),
         element.angle
       );
-      const [x21, y21] = pointRotateRads13(
-        pointFrom14(x2, cy),
-        pointFrom14(cx, cy),
+      const [x21, y21] = pointRotateRads12(
+        pointFrom13(x2, cy),
+        pointFrom13(cx, cy),
         element.angle
       );
       const minX = Math.min(x11, x12, x22, x21);
@@ -15808,24 +16388,24 @@ 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] = pointRotateRads13(
-        pointFrom14(x1, y1),
-        pointFrom14(cx, cy),
+      const [x11, y11] = pointRotateRads12(
+        pointFrom13(x1, y1),
+        pointFrom13(cx, cy),
         element.angle
       );
-      const [x12, y12] = pointRotateRads13(
-        pointFrom14(x1, y2),
-        pointFrom14(cx, cy),
+      const [x12, y12] = pointRotateRads12(
+        pointFrom13(x1, y2),
+        pointFrom13(cx, cy),
         element.angle
       );
-      const [x22, y22] = pointRotateRads13(
-        pointFrom14(x2, y2),
-        pointFrom14(cx, cy),
+      const [x22, y22] = pointRotateRads12(
+        pointFrom13(x2, y2),
+        pointFrom13(cx, cy),
         element.angle
       );
-      const [x21, y21] = pointRotateRads13(
-        pointFrom14(x2, y1),
-        pointFrom14(cx, cy),
+      const [x21, y21] = pointRotateRads12(
+        pointFrom13(x2, y1),
+        pointFrom13(cx, cy),
         element.angle
       );
       const minX = Math.min(x11, x12, x22, x21);
@@ -15879,7 +16459,7 @@ var getElementLineSegments = (element, elementsMap) => {
     element,
     elementsMap
   );
-  const center = pointFrom14(cx, cy);
+  const center = pointFrom13(cx, cy);
   if (shape.type === "polycurve") {
     const curves = shape.data;
     const pointsOnCurves = curves.map(
@@ -15891,9 +16471,9 @@ var getElementLineSegments = (element, elementsMap) => {
         let i = 0;
         while (i < points.length - 1) {
           segments.push(
-            lineSegment7(
-              pointFrom14(points[i][0], points[i][1]),
-              pointFrom14(points[i + 1][0], points[i + 1][1])
+            lineSegment6(
+              pointFrom13(points[i][0], points[i][1]),
+              pointFrom13(points[i + 1][0], points[i + 1][1])
             )
           );
           i++;
@@ -15904,9 +16484,9 @@ var getElementLineSegments = (element, elementsMap) => {
       let i = 0;
       while (i < points.length - 1) {
         segments.push(
-          lineSegment7(
-            pointFrom14(points[i][0], points[i][1]),
-            pointFrom14(points[i + 1][0], points[i + 1][1])
+          lineSegment6(
+            pointFrom13(points[i][0], points[i][1]),
+            pointFrom13(points[i + 1][0], points[i + 1][1])
           )
         );
         i++;
@@ -15930,10 +16510,10 @@ var getElementLineSegments = (element, elementsMap) => {
       const container = getContainerElement(element, elementsMap);
       if (container && isLinearElement(container)) {
         const segments2 = [
-          lineSegment7(pointFrom14(x1, y1), pointFrom14(x2, y1)),
-          lineSegment7(pointFrom14(x2, y1), pointFrom14(x2, y2)),
-          lineSegment7(pointFrom14(x2, y2), pointFrom14(x1, y2)),
-          lineSegment7(pointFrom14(x1, y2), pointFrom14(x1, y1))
+          lineSegment6(pointFrom13(x1, y1), pointFrom13(x2, y1)),
+          lineSegment6(pointFrom13(x2, y1), pointFrom13(x2, y2)),
+          lineSegment6(pointFrom13(x2, y2), pointFrom13(x1, y2)),
+          lineSegment6(pointFrom13(x1, y2), pointFrom13(x1, y1))
         ];
         return segments2;
       }
@@ -15941,7 +16521,7 @@ var getElementLineSegments = (element, elementsMap) => {
     const points = shape.data;
     const segments = [];
     for (let i = 0; i < points.length - 1; i++) {
-      segments.push(lineSegment7(points[i], points[i + 1]));
+      segments.push(lineSegment6(points[i], points[i + 1]));
     }
     return segments;
   } else if (shape.type === "ellipse") {
@@ -15956,45 +16536,45 @@ var getElementLineSegments = (element, elementsMap) => {
     [cx, y2],
     [x1, cy],
     [x2, cy]
-  ].map((point) => pointRotateRads13(point, center, element.angle));
+  ].map((point) => pointRotateRads12(point, center, element.angle));
   return [
-    lineSegment7(nw, ne),
-    lineSegment7(sw, se2),
-    lineSegment7(nw, sw),
-    lineSegment7(ne, se2),
-    lineSegment7(nw, e),
-    lineSegment7(sw, e),
-    lineSegment7(ne, w),
-    lineSegment7(se2, w)
+    lineSegment6(nw, ne),
+    lineSegment6(sw, se2),
+    lineSegment6(nw, sw),
+    lineSegment6(ne, se2),
+    lineSegment6(nw, e),
+    lineSegment6(sw, e),
+    lineSegment6(ne, w),
+    lineSegment6(se2, w)
   ];
 };
 var _isRectanguloidElement = (element) => {
   return element != null && (element.type === "rectangle" || element.type === "image" || element.type === "iframe" || element.type === "embeddable" || element.type === "frame" || element.type === "magicframe" || element.type === "text" && !element.containerId);
 };
-var getRotatedSides = (sides, center, angle) => {
+var getRotatedSides = (sides, center, angle2) => {
   return sides.map((side) => {
-    return lineSegment7(
-      pointRotateRads13(side[0], center, angle),
-      pointRotateRads13(side[1], center, angle)
+    return lineSegment6(
+      pointRotateRads12(side[0], center, angle2),
+      pointRotateRads12(side[1], center, angle2)
     );
   });
 };
-var getSegmentsOnCurve = (curve4, center, angle) => {
+var getSegmentsOnCurve = (curve4, center, angle2) => {
   const points = pointsOnBezierCurves(curve4, 10);
   let i = 0;
   const segments = [];
   while (i < points.length - 1) {
     segments.push(
-      lineSegment7(
-        pointRotateRads13(
-          pointFrom14(points[i][0], points[i][1]),
+      lineSegment6(
+        pointRotateRads12(
+          pointFrom13(points[i][0], points[i][1]),
           center,
-          angle
+          angle2
         ),
-        pointRotateRads13(
-          pointFrom14(points[i + 1][0], points[i + 1][1]),
+        pointRotateRads12(
+          pointFrom13(points[i + 1][0], points[i + 1][1]),
           center,
-          angle
+          angle2
         )
       )
     );
@@ -16003,7 +16583,7 @@ var getSegmentsOnCurve = (curve4, center, angle) => {
   return segments;
 };
 var getSegmentsOnEllipse = (ellipse4) => {
-  const center = pointFrom14(
+  const center = pointFrom13(
     ellipse4.x + ellipse4.width / 2,
     ellipse4.y + ellipse4.height / 2
   );
@@ -16017,12 +16597,12 @@ var getSegmentsOnEllipse = (ellipse4) => {
     const t = i * deltaT;
     const x = center[0] + a2 * Math.cos(t);
     const y = center[1] + b2 * Math.sin(t);
-    points.push(pointRotateRads13(pointFrom14(x, y), center, ellipse4.angle));
+    points.push(pointRotateRads12(pointFrom13(x, y), center, ellipse4.angle));
   }
   for (let i = 0; i < points.length - 1; i++) {
-    segments.push(lineSegment7(points[i], points[i + 1]));
+    segments.push(lineSegment6(points[i], points[i + 1]));
   }
-  segments.push(lineSegment7(points[points.length - 1], points[0]));
+  segments.push(lineSegment6(points[points.length - 1], points[0]));
   return segments;
 };
 var getRectangleBoxAbsoluteCoords = (boxSceneCoords) => {
@@ -16100,7 +16680,7 @@ var getCubicBezierCurveBound = (p0, p1, p2, p3) => {
   return [minX, minY, maxX, maxY];
 };
 var getMinMaxXYFromCurvePathOps = (ops, transformXY) => {
-  let currentP = pointFrom14(0, 0);
+  let currentP = pointFrom13(0, 0);
   const { minX, minY, maxX, maxY } = ops.reduce(
     (limits, { op, data }) => {
       if (op === "move") {
@@ -16108,9 +16688,9 @@ var getMinMaxXYFromCurvePathOps = (ops, transformXY) => {
         invariant10(p != null, "Op data is not a point");
         currentP = p;
       } else if (op === "bcurveTo") {
-        const _p1 = pointFrom14(data[0], data[1]);
-        const _p2 = pointFrom14(data[2], data[3]);
-        const _p3 = pointFrom14(data[4], data[5]);
+        const _p1 = pointFrom13(data[0], data[1]);
+        const _p2 = pointFrom13(data[2], data[3]);
+        const _p3 = pointFrom13(data[4], data[5]);
         const p1 = transformXY ? transformXY(_p1) : _p1;
         const p2 = transformXY ? transformXY(_p2) : _p2;
         const p3 = transformXY ? transformXY(_p3) : _p3;
@@ -16201,17 +16781,17 @@ var getArrowheadPoints = (element, shape, position, arrowhead, offsetMultiplier
   const index = position === "start" ? 1 : ops.length - 1;
   const data = ops[index].data;
   invariant10(data.length === 6, "Op data length is not 6");
-  const p3 = pointFrom14(data[4], data[5]);
-  const p2 = pointFrom14(data[2], data[3]);
-  const p1 = pointFrom14(data[0], data[1]);
+  const p3 = pointFrom13(data[4], data[5]);
+  const p2 = pointFrom13(data[2], data[3]);
+  const p1 = pointFrom13(data[0], data[1]);
   const prevOp = ops[index - 1];
-  let p0 = pointFrom14(0, 0);
+  let p0 = pointFrom13(0, 0);
   if (prevOp.op === "move") {
     const p = pointFromArray3(prevOp.data);
     invariant10(p != null, "Op data is not a point");
     p0 = p;
   } else if (prevOp.op === "bcurveTo") {
-    p0 = pointFrom14(prevOp.data[4], prevOp.data[5]);
+    p0 = pointFrom13(prevOp.data[4], prevOp.data[5]);
   }
   const equation = (t, idx) => Math.pow(1 - t, 3) * p3[idx] + 3 * t * Math.pow(1 - t, 2) * p2[idx] + 3 * Math.pow(t, 2) * (1 - t) * p1[idx] + p0[idx] * Math.pow(t, 3);
   const [x2, y2] = position === "start" ? p0 : p3;
@@ -16236,45 +16816,45 @@ var getArrowheadPoints = (element, shape, position, arrowhead, offsetMultiplier
     const diameter = Math.hypot(ys - ty, xs - tx) + element.strokeWidth - 2;
     return [tx, ty, diameter];
   }
-  const angle = getArrowheadAngle(arrowhead);
+  const angle2 = getArrowheadAngle(arrowhead);
   if (arrowhead === "cardinality_many" || arrowhead === "cardinality_one_or_many") {
-    const [x32, y32] = pointRotateRads13(
-      pointFrom14(tx, ty),
-      pointFrom14(xs, ys),
-      degreesToRadians(-angle)
+    const [x32, y32] = pointRotateRads12(
+      pointFrom13(tx, ty),
+      pointFrom13(xs, ys),
+      degreesToRadians(-angle2)
     );
-    const [x42, y42] = pointRotateRads13(
-      pointFrom14(tx, ty),
-      pointFrom14(xs, ys),
-      degreesToRadians(angle)
+    const [x42, y42] = pointRotateRads12(
+      pointFrom13(tx, ty),
+      pointFrom13(xs, ys),
+      degreesToRadians(angle2)
     );
     return [xs, ys, x32, y32, x42, y42];
   }
-  const [x3, y3] = pointRotateRads13(
-    pointFrom14(xs, ys),
-    pointFrom14(tx, ty),
-    -angle * Math.PI / 180
+  const [x3, y3] = pointRotateRads12(
+    pointFrom13(xs, ys),
+    pointFrom13(tx, ty),
+    -angle2 * Math.PI / 180
   );
-  const [x4, y4] = pointRotateRads13(
-    pointFrom14(xs, ys),
-    pointFrom14(tx, ty),
-    degreesToRadians(angle)
+  const [x4, y4] = pointRotateRads12(
+    pointFrom13(xs, ys),
+    pointFrom13(tx, ty),
+    degreesToRadians(angle2)
   );
   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] = pointRotateRads13(
-        pointFrom14(tx + minSize * 2, ty),
-        pointFrom14(tx, ty),
+      [ox, oy] = pointRotateRads12(
+        pointFrom13(tx + minSize * 2, ty),
+        pointFrom13(tx, ty),
         Math.atan2(py - ty, px - tx)
       );
     } else {
       const [px, py] = element.points.length > 1 ? element.points[element.points.length - 2] : [0, 0];
-      [ox, oy] = pointRotateRads13(
-        pointFrom14(tx - minSize * 2, ty),
-        pointFrom14(tx, ty),
+      [ox, oy] = pointRotateRads12(
+        pointFrom13(tx - minSize * 2, ty),
+        pointFrom13(tx, ty),
         Math.atan2(ty - py, tx - px)
       );
     }
@@ -16303,9 +16883,9 @@ 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] = pointRotateRads13(
-      pointFrom14(element.x + pointX, element.y + pointY),
-      pointFrom14(cx, cy),
+    const [x, y] = pointRotateRads12(
+      pointFrom13(element.x + pointX, element.y + pointY),
+      pointFrom13(cx, cy),
       element.angle
     );
     let coords2 = [x, y, x, y];
@@ -16328,9 +16908,9 @@ var getLinearElementRotatedBounds = (element, cx, cy, elementsMap) => {
   const cachedShape = ShapeCache.get(element, null)?.[0];
   const shape = cachedShape ?? generateLinearElementShape(element);
   const ops = getCurvePathOps(shape);
-  const transformXY = ([x, y]) => pointRotateRads13(
-    pointFrom14(element.x + x, element.y + y),
-    pointFrom14(cx, cy),
+  const transformXY = ([x, y]) => pointRotateRads12(
+    pointFrom13(element.x + x, element.y + y),
+    pointFrom13(cx, cy),
     element.angle
   );
   const res = getMinMaxXYFromCurvePathOps(ops, transformXY);
@@ -16441,8 +17021,8 @@ var getClosestElementBounds = (elements, from) => {
   elements.forEach((element) => {
     const [x1, y1, x2, y2] = getElementBounds(element, elementsMap);
     const distance3 = pointDistance7(
-      pointFrom14((x1 + x2) / 2, (y1 + y2) / 2),
-      pointFrom14(from.x, from.y)
+      pointFrom13((x1 + x2) / 2, (y1 + y2) / 2),
+      pointFrom13(from.x, from.y)
     );
     if (distance3 < minDistance) {
       minDistance = distance3;
@@ -16478,7 +17058,7 @@ var getVisibleSceneBounds = ({
     -scrollY + height / zoom.value
   ];
 };
-var getCenterForBounds = (bounds) => pointFrom14(
+var getCenterForBounds = (bounds) => pointFrom13(
   bounds[0] + (bounds[2] - bounds[0]) / 2,
   bounds[1] + (bounds[3] - bounds[1]) / 2
 );
@@ -16492,23 +17072,23 @@ var aabbForElement = (element, elementsMap, offset) => {
     midY: element.y + element.height / 2
   };
   const center = elementCenterPoint(element, elementsMap);
-  const [topLeftX, topLeftY] = pointRotateRads13(
-    pointFrom14(bbox.minX, bbox.minY),
+  const [topLeftX, topLeftY] = pointRotateRads12(
+    pointFrom13(bbox.minX, bbox.minY),
     center,
     element.angle
   );
-  const [topRightX, topRightY] = pointRotateRads13(
-    pointFrom14(bbox.maxX, bbox.minY),
+  const [topRightX, topRightY] = pointRotateRads12(
+    pointFrom13(bbox.maxX, bbox.minY),
     center,
     element.angle
   );
-  const [bottomRightX, bottomRightY] = pointRotateRads13(
-    pointFrom14(bbox.maxX, bbox.maxY),
+  const [bottomRightX, bottomRightY] = pointRotateRads12(
+    pointFrom13(bbox.maxX, bbox.maxY),
     center,
     element.angle
   );
-  const [bottomLeftX, bottomLeftY] = pointRotateRads13(
-    pointFrom14(bbox.minX, bbox.maxY),
+  const [bottomLeftX, bottomLeftY] = pointRotateRads12(
+    pointFrom13(bbox.minX, bbox.maxY),
     center,
     element.angle
   );
@@ -16527,32 +17107,237 @@ var aabbForElement = (element, elementsMap, offset) => {
       bounds[3] + downOffset
     ];
   }
-  return bounds;
-};
-var pointInsideBounds = (p, bounds) => p[0] > bounds[0] && p[0] < bounds[2] && p[1] > bounds[1] && p[1] < bounds[3];
-var pointInsideBoundsInclusive = (p, bounds) => p[0] >= bounds[0] && p[0] <= bounds[2] && p[1] >= bounds[1] && p[1] <= bounds[3];
-var doBoundsIntersect = (bounds1, bounds2) => {
-  if (bounds1 == null || bounds2 == null) {
-    return false;
+  return bounds;
+};
+var pointInsideBounds = (p, bounds) => p[0] > bounds[0] && p[0] < bounds[2] && p[1] > bounds[1] && p[1] < bounds[3];
+var pointInsideBoundsInclusive = (p, bounds) => p[0] >= bounds[0] && p[0] <= bounds[2] && p[1] >= bounds[1] && p[1] <= bounds[3];
+var doBoundsIntersect = (bounds1, bounds2) => {
+  if (bounds1 == null || bounds2 == null) {
+    return false;
+  }
+  const [minX1, minY1, maxX1, maxY1] = bounds1;
+  const [minX2, minY2, maxX2, maxY2] = bounds2;
+  return minX1 < maxX2 && maxX1 > minX2 && minY1 < maxY2 && maxY1 > minY2;
+};
+var boundsContainBounds = (outerBounds, innerBounds) => [
+  pointFrom13(innerBounds[0], innerBounds[1]),
+  pointFrom13(innerBounds[0], innerBounds[3]),
+  pointFrom13(innerBounds[2], innerBounds[1]),
+  pointFrom13(innerBounds[2], innerBounds[3])
+].every((point) => pointInsideBoundsInclusive(point, outerBounds));
+var elementsOverlappingBBox = ({
+  elements,
+  elementsMap,
+  bounds,
+  type,
+  excludeElementsInFrames,
+  shouldIgnoreElementFromSelection: shouldIgnoreElementFromSelection2
+}) => {
+  if (!elementsMap) {
+    elementsMap = arrayToMap7(elements);
+  }
+  const selectionBounds = isExcalidrawElement(bounds) ? getElementBounds(bounds, elementsMap) : bounds;
+  const [selectionX1, selectionY1, selectionX2, selectionY2] = selectionBounds;
+  const selectionEdges = [
+    lineSegment6(
+      pointFrom13(selectionX1, selectionY1),
+      pointFrom13(selectionX2, selectionY1)
+    ),
+    lineSegment6(
+      pointFrom13(selectionX2, selectionY1),
+      pointFrom13(selectionX2, selectionY2)
+    ),
+    lineSegment6(
+      pointFrom13(selectionX2, selectionY2),
+      pointFrom13(selectionX1, selectionY2)
+    ),
+    lineSegment6(
+      pointFrom13(selectionX1, selectionY2),
+      pointFrom13(selectionX1, selectionY1)
+    )
+  ];
+  const framesInSelection = excludeElementsInFrames ? /* @__PURE__ */ new Set() : null;
+  const groups = {};
+  const elementsInSelection = /* @__PURE__ */ new Set();
+  for (const element of elements) {
+    if (shouldIgnoreElementFromSelection2?.(element)) {
+      continue;
+    }
+    const groupId = element.groupIds.at(-1);
+    if (groupId) {
+      if (!groups[groupId]) {
+        groups[groupId] = [];
+      }
+      groups[groupId].push(element);
+    }
+    const strokeWidth = element.strokeWidth;
+    let labelAABB = null;
+    let elementAABB = getElementBounds(element, elementsMap);
+    elementAABB = [
+      elementAABB[0] - strokeWidth / 2,
+      elementAABB[1] - strokeWidth / 2,
+      elementAABB[2] + strokeWidth / 2,
+      elementAABB[3] + strokeWidth / 2
+    ];
+    const boundTextElement = isArrowElement(element) && getBoundTextElement(element, elementsMap);
+    if (boundTextElement) {
+      const { x, y } = LinearElementEditor.getBoundTextElementPosition(
+        element,
+        boundTextElement,
+        elementsMap
+      );
+      labelAABB = [
+        x,
+        y,
+        x + boundTextElement.width,
+        y + boundTextElement.height
+      ];
+    }
+    const associatedFrame = getContainingFrame(element, elementsMap);
+    if (associatedFrame && elementOverlapsWithFrame(element, associatedFrame, elementsMap)) {
+      const frameAABB = getElementBounds(associatedFrame, elementsMap);
+      elementAABB = [
+        Math.max(elementAABB[0], frameAABB[0]),
+        Math.max(elementAABB[1], frameAABB[1]),
+        Math.min(elementAABB[2], frameAABB[2]),
+        Math.min(elementAABB[3], frameAABB[3])
+      ];
+      labelAABB = labelAABB ? [
+        Math.max(labelAABB[0], frameAABB[0]),
+        Math.max(labelAABB[1], frameAABB[1]),
+        Math.min(labelAABB[2], frameAABB[2]),
+        Math.min(labelAABB[3], frameAABB[3])
+      ] : null;
+    }
+    const commonAABB2 = labelAABB ? [
+      Math.min(labelAABB[0], elementAABB[0]),
+      Math.min(labelAABB[1], elementAABB[1]),
+      Math.max(labelAABB[2], elementAABB[2]),
+      Math.max(labelAABB[3], elementAABB[3])
+    ] : elementAABB;
+    if (boundsContainBounds(selectionBounds, commonAABB2)) {
+      if (framesInSelection && isFrameLikeElement(element)) {
+        framesInSelection.add(element.id);
+      }
+      elementsInSelection.add(element);
+      continue;
+    }
+    if (type === "overlap" && labelAABB && doBoundsIntersect(selectionBounds, labelAABB)) {
+      elementsInSelection.add(element);
+      continue;
+    }
+    if (type === "overlap" && doBoundsIntersect(selectionBounds, elementAABB)) {
+      let hasIntersection = false;
+      if (isLinearElement(element) || isFreeDrawElement(element)) {
+        const center = elementCenterPoint(element, elementsMap);
+        hasIntersection = element.points.some((point) => {
+          const rotatedPoint = pointRotateRads12(
+            pointFrom13(element.x + point[0], element.y + point[1]),
+            center,
+            element.angle
+          );
+          return pointInsideBounds(rotatedPoint, selectionBounds);
+        });
+      } else {
+        const nonRotatedElementBounds = getElementBounds(
+          element,
+          elementsMap,
+          true
+        );
+        const center = elementCenterPoint(element, elementsMap);
+        hasIntersection = [
+          pointRotateRads12(
+            pointFrom13(
+              (nonRotatedElementBounds[0] + nonRotatedElementBounds[2]) / 2,
+              nonRotatedElementBounds[1]
+            ),
+            center,
+            element.angle
+          ),
+          pointRotateRads12(
+            pointFrom13(
+              nonRotatedElementBounds[2],
+              (nonRotatedElementBounds[1] + nonRotatedElementBounds[3]) / 2
+            ),
+            center,
+            element.angle
+          ),
+          pointRotateRads12(
+            pointFrom13(
+              (nonRotatedElementBounds[0] + nonRotatedElementBounds[2]) / 2,
+              nonRotatedElementBounds[3]
+            ),
+            center,
+            element.angle
+          ),
+          pointRotateRads12(
+            pointFrom13(
+              nonRotatedElementBounds[0],
+              (nonRotatedElementBounds[1] + nonRotatedElementBounds[3]) / 2
+            ),
+            center,
+            element.angle
+          )
+        ].some((point) => {
+          return pointInsideBounds(
+            pointRotateRads12(point, center, element.angle),
+            selectionBounds
+          );
+        });
+      }
+      if (!hasIntersection) {
+        hasIntersection = selectionEdges.some(
+          (selectionEdge) => intersectElementWithLineSegment(
+            element,
+            elementsMap,
+            selectionEdge,
+            strokeWidth / 2,
+            true
+            // Stop at first hit for better performance
+          ).length > 0
+        );
+      }
+      if (hasIntersection) {
+        if (framesInSelection && isFrameLikeElement(element)) {
+          framesInSelection.add(element.id);
+        }
+        elementsInSelection.add(element);
+        continue;
+      }
+    }
+  }
+  if (framesInSelection) {
+    elementsInSelection.forEach((element) => {
+      if (element.frameId && framesInSelection.has(element.frameId)) {
+        elementsInSelection.delete(element);
+      }
+    });
   }
-  const [minX1, minY1, maxX1, maxY1] = bounds1;
-  const [minX2, minY2, maxX2, maxY2] = bounds2;
-  return minX1 < maxX2 && maxX1 > minX2 && minY1 < maxY2 && maxY1 > minY2;
+  if (type === "overlap") {
+    Array.from(elementsInSelection).forEach((element) => {
+      const groupId = element.groupIds.at(-1);
+      const group = groupId ? groups[groupId] : null;
+      group?.forEach((groupElement) => elementsInSelection.add(groupElement));
+    });
+  } else if (type === "contain") {
+    elementsInSelection.forEach((element) => {
+      const groupId = element.groupIds.at(-1);
+      const group = groupId ? groups[groupId] : null;
+      if (group && !group.every((groupElement) => elementsInSelection.has(groupElement))) {
+        elementsInSelection.delete(element);
+      }
+    });
+  }
+  return elements.filter((element) => elementsInSelection.has(element));
 };
-var boundsContainBounds = (outerBounds, innerBounds) => [
-  pointFrom14(innerBounds[0], innerBounds[1]),
-  pointFrom14(innerBounds[0], innerBounds[3]),
-  pointFrom14(innerBounds[2], innerBounds[1]),
-  pointFrom14(innerBounds[2], innerBounds[3])
-].every((point) => pointInsideBoundsInclusive(point, outerBounds));
 var elementCenterPoint = (element, elementsMap, xOffset = 0, yOffset = 0) => {
   if (isLinearElement(element) || isFreeDrawElement(element)) {
     const [x1, y1, x2, y2] = getElementAbsoluteCoords2(element, elementsMap);
-    const [x3, y3] = pointFrom14((x1 + x2) / 2, (y1 + y2) / 2);
-    return pointFrom14(x3 + xOffset, y3 + yOffset);
+    const [x3, y3] = pointFrom13((x1 + x2) / 2, (y1 + y2) / 2);
+    return pointFrom13(x3 + xOffset, y3 + yOffset);
   }
   const [x, y] = getCenterForBounds(getElementBounds(element, elementsMap));
-  return pointFrom14(x + xOffset, y + yOffset);
+  return pointFrom13(x + xOffset, y + yOffset);
 };
 
 // src/sizeHelpers.ts
@@ -16623,18 +17408,18 @@ var getPerfectElementSize = (elementType, width, height) => {
 var getLockedLinearCursorAlignSize = (originX, originY, x, y, customAngle) => {
   let width = x - originX;
   let height = y - originY;
-  const angle = Math.atan2(height, width);
-  let lockedAngle = Math.round(angle / SHIFT_LOCKING_ANGLE) * SHIFT_LOCKING_ANGLE;
+  const angle2 = Math.atan2(height, width);
+  let lockedAngle = Math.round(angle2 / SHIFT_LOCKING_ANGLE) * SHIFT_LOCKING_ANGLE;
   if (customAngle) {
     const lower = Math.floor(customAngle / SHIFT_LOCKING_ANGLE) * SHIFT_LOCKING_ANGLE;
     if (radiansBetweenAngles(
-      angle,
+      angle2,
       lower,
       lower + SHIFT_LOCKING_ANGLE
     )) {
-      if (radiansDifference(angle, customAngle) < SHIFT_LOCKING_ANGLE / 6) {
+      if (radiansDifference(angle2, customAngle) < SHIFT_LOCKING_ANGLE / 6) {
         lockedAngle = customAngle;
-      } else if (normalizeRadians(angle) > normalizeRadians(customAngle)) {
+      } else if (normalizeRadians(angle2) > normalizeRadians(customAngle)) {
         lockedAngle = lower + SHIFT_LOCKING_ANGLE;
       } else {
         lockedAngle = lower;
@@ -16849,7 +17634,7 @@ var compareScores = (a2, b2) => {
   return 0;
 };
 var compareBlocks = (a2, b2) => b2.packedW * b2.packedH - a2.packedW * a2.packedH || Math.max(b2.packedW, b2.packedH) - Math.max(a2.packedW, a2.packedH) || b2.packedH - a2.packedH || b2.packedW - a2.packedW;
-var clamp4 = (value, min, max) => Math.min(Math.max(value, min), max);
+var clamp5 = (value, min, max) => Math.min(Math.max(value, min), max);
 var intersects = (a2, b2) => a2.x < b2.x + b2.w && a2.x + a2.w > b2.x && a2.y < b2.y + b2.h && a2.y + a2.h > b2.y;
 var contains = (outer, inner) => inner.x >= outer.x && inner.y >= outer.y && inner.x + inner.w <= outer.x + outer.w && inner.y + inner.h <= outer.y + outer.h;
 var getLayoutBounds = (blocks) => {
@@ -16961,8 +17746,8 @@ var getCandidatePositions = (freeRect, block, heuristic, targetCenter) => {
   ];
   if (heuristic === "center-distance") {
     positions.push({
-      x: clamp4(targetCenter.x - block.actualW / 2, freeRect.x, maxX),
-      y: clamp4(targetCenter.y - block.actualH / 2, freeRect.y, maxY)
+      x: clamp5(targetCenter.x - block.actualW / 2, freeRect.x, maxX),
+      y: clamp5(targetCenter.y - block.actualH / 2, freeRect.y, maxY)
     });
   }
   return positions.filter(
@@ -20213,6 +20998,7 @@ import {
   DEFAULT_FONT_SIZE as DEFAULT_FONT_SIZE3,
   DEFAULT_TEXT_ALIGN,
   DEFAULT_VERTICAL_ALIGN,
+  DEFAULT_STROKE_STREAMLINE as DEFAULT_STROKE_STREAMLINE2,
   VERTICAL_ALIGN as VERTICAL_ALIGN2,
   randomInteger as randomInteger5,
   randomId as randomId3,
@@ -20232,7 +21018,7 @@ var _newElementBase = (type, {
   opacity = DEFAULT_ELEMENT_PROPS.opacity,
   width = 0,
   height = 0,
-  angle = 0,
+  angle: angle2 = 0,
   groupIds = [],
   frameId = null,
   index = null,
@@ -20259,7 +21045,7 @@ var _newElementBase = (type, {
     y,
     width,
     height,
-    angle,
+    angle: angle2,
     strokeColor,
     backgroundColor,
     fillStyle,
@@ -20416,9 +21202,9 @@ var getAdjustedDimensions = (element, elementsMap, nextText) => {
     y: Number.isFinite(y) ? y : element.y
   };
 };
-var adjustXYWithRotation = (sides, x, y, angle, deltaX1, deltaY1, deltaX2, deltaY2) => {
-  const cos = Math.cos(angle);
-  const sin = Math.sin(angle);
+var adjustXYWithRotation = (sides, x, y, angle2, deltaX1, deltaY1, deltaX2, deltaY2) => {
+  const cos = Math.cos(angle2);
+  const sin = Math.sin(angle2);
   if (sides.e && sides.w) {
     x += deltaX1 + deltaX2;
   } else if (sides.e) {
@@ -20466,7 +21252,11 @@ var newFreeDrawElement = (opts) => {
     ..._newElementBase(opts.type, opts),
     points: opts.points || [],
     pressures: opts.pressures || [],
-    simulatePressure: opts.simulatePressure
+    simulatePressure: opts.simulatePressure,
+    strokeOptions: opts.strokeOptions ?? {
+      variability: "variable",
+      streamline: DEFAULT_STROKE_STREAMLINE2
+    }
   };
 };
 var newLinearElement = (opts) => {
@@ -20521,6 +21311,7 @@ var newImageElement = (opts) => {
     status: opts.status ?? "pending",
     fileId: opts.fileId ?? null,
     fileName: opts.fileName ?? null,
+    thumbHash: opts.thumbHash ?? null,
     scale: opts.scale ?? [1, 1],
     crop: opts.crop ?? null
   };
@@ -20936,7 +21727,7 @@ var embeddableURLValidator = (url, validateEmbeddable) => {
 // src/flowchart.ts
 init_define_import_meta_env();
 import { KEYS as KEYS2, invariant as invariant11, toBrandedType as toBrandedType2 } from "@excalidraw/common";
-import { pointFrom as pointFrom15 } from "@excalidraw/math";
+import { pointFrom as pointFrom14 } from "@excalidraw/math";
 var VERTICAL_OFFSET = 100;
 var HORIZONTAL_OFFSET = 100;
 var getLinkDirectionFromKey = (key) => {
@@ -21216,7 +22007,7 @@ var createBindingArrow = (startBindingElement, endBindingElement, direction, app
     strokeWidth: startBindingElement.strokeWidth,
     opacity: startBindingElement.opacity,
     roughness: startBindingElement.roughness,
-    points: [pointFrom15(0, 0), pointFrom15(endX, endY)],
+    points: [pointFrom14(0, 0), pointFrom14(endX, endY)],
     elbowed: true
   });
   const elementsMap = scene.getNonDeletedElementsMap();
@@ -21404,7 +22195,7 @@ var isNodeInFlowchart = (element, elementsMap) => {
 
 // src/arrows/focus.ts
 init_define_import_meta_env();
-import { pointDistance as pointDistance8, pointFrom as pointFrom16 } from "@excalidraw/math";
+import { pointDistance as pointDistance8, pointFrom as pointFrom15 } from "@excalidraw/math";
 import { invariant as invariant12 } from "@excalidraw/common";
 var isFocusPointVisible = (focusPoint, arrow, bindableElement, elementsMap, appState, startOrEnd, ignoreOverlap = false) => {
   if (isElbowArrow(arrow) || !isBindingEnabled(appState) || arrow.points.length !== 2) {
@@ -21516,7 +22307,7 @@ var handleFocusPointDrag = (linearElementEditor, elementsMap, pointerCoords, sce
   const isStartBinding = linearElementEditor.draggedFocusPointBinding === "start";
   const binding = isStartBinding ? arrow.startBinding : arrow.endBinding;
   const { x: offsetX, y: offsetY } = linearElementEditor.pointerOffset;
-  const point = pointFrom16(
+  const point = pointFrom15(
     pointerCoords.x - offsetX,
     pointerCoords.y - offsetY
   );
@@ -21599,7 +22390,7 @@ var handleFocusPointDrag = (linearElementEditor, elementsMap, pointerCoords, sce
   }
 };
 var handleFocusPointPointerDown = (arrow, pointerDownState, elementsMap, appState) => {
-  const pointerPos = pointFrom16(
+  const pointerPos = pointFrom15(
     pointerDownState.origin.x,
     pointerDownState.origin.y
   );
@@ -21702,7 +22493,7 @@ var handleFocusPointPointerUp = (linearElementEditor, scene) => {
 };
 var handleFocusPointHover = (arrow, scenePointerX, scenePointerY, scene, appState) => {
   const elementsMap = scene.getNonDeletedElementsMap();
-  const pointerPos = pointFrom16(scenePointerX, scenePointerY);
+  const pointerPos = pointFrom15(scenePointerX, scenePointerY);
   const hitThreshold = FOCUS_POINT_SIZE * 1.5 / appState.zoom.value;
   if (arrow.startBinding?.elementId) {
     const bindableElement = elementsMap.get(arrow.startBinding.elementId);
@@ -21747,110 +22538,6 @@ var handleFocusPointHover = (arrow, scenePointerX, scenePointerY, scene, appStat
   return null;
 };
 
-// src/image.ts
-init_define_import_meta_env();
-import { MIME_TYPES as MIME_TYPES2, SVG_NS } from "@excalidraw/common";
-var loadHTMLImageElement = (dataURL) => {
-  return new Promise((resolve, reject) => {
-    const image = new Image();
-    image.onload = () => {
-      resolve(image);
-    };
-    image.onerror = (error) => {
-      reject(error);
-    };
-    image.src = dataURL;
-  });
-};
-var updateImageCache = async ({
-  fileIds,
-  files,
-  imageCache
-}) => {
-  const updatedFiles = /* @__PURE__ */ new Map();
-  const erroredFiles = /* @__PURE__ */ new Map();
-  await Promise.all(
-    fileIds.reduce((promises, fileId) => {
-      const fileData = files[fileId];
-      if (fileData && !updatedFiles.has(fileId)) {
-        updatedFiles.set(fileId, true);
-        return promises.concat(
-          (async () => {
-            try {
-              if (fileData.mimeType === MIME_TYPES2.binary) {
-                throw new Error("Only images can be added to ImageCache");
-              }
-              const imagePromise = loadHTMLImageElement(fileData.dataURL);
-              const data = {
-                image: imagePromise,
-                mimeType: fileData.mimeType
-              };
-              imageCache.set(fileId, data);
-              const image = await imagePromise;
-              imageCache.set(fileId, { ...data, image });
-            } catch (error) {
-              erroredFiles.set(fileId, true);
-            }
-          })()
-        );
-      }
-      return promises;
-    }, [])
-  );
-  return {
-    imageCache,
-    /** includes errored files because they cache was updated nonetheless */
-    updatedFiles,
-    /** files that failed when creating HTMLImageElement */
-    erroredFiles
-  };
-};
-var getInitializedImageElements = (elements) => elements.filter(
-  (element) => isInitializedImageElement(element)
-);
-var isHTMLSVGElement = (node) => {
-  return node?.nodeName.toLowerCase() === "svg";
-};
-var normalizeSVG = (SVGString) => {
-  const doc = new DOMParser().parseFromString(SVGString, MIME_TYPES2.svg);
-  const svg = doc.querySelector("svg");
-  const errorNode = doc.querySelector("parsererror");
-  if (errorNode || !isHTMLSVGElement(svg)) {
-    throw new Error("Invalid SVG");
-  } else {
-    if (!svg.hasAttribute("xmlns")) {
-      svg.setAttribute("xmlns", SVG_NS);
-    }
-    let width = svg.getAttribute("width");
-    let height = svg.getAttribute("height");
-    if (width?.includes("%") || width === "auto") {
-      width = null;
-    }
-    if (height?.includes("%") || height === "auto") {
-      height = null;
-    }
-    const viewBox = svg.getAttribute("viewBox");
-    if (!width || !height) {
-      width = width || "50";
-      height = height || "50";
-      if (viewBox) {
-        const match = viewBox.match(
-          /\d+ +\d+ +(\d+(?:\.\d+)?) +(\d+(?:\.\d+)?)/
-        );
-        if (match) {
-          [, width, height] = match;
-        }
-      }
-      svg.setAttribute("width", width);
-      svg.setAttribute("height", height);
-    }
-    if (!viewBox) {
-      svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
-    }
-    return svg.outerHTML;
-  }
-};
-
 // src/normalise.ts
 init_define_import_meta_env();
 var getGroupCenter = (boundingBox) => ({
@@ -22008,8 +22695,8 @@ init_define_import_meta_env();
 import {
   pointCenter as pointCenter3,
   normalizeRadians as normalizeRadians2,
-  pointFrom as pointFrom17,
-  pointRotateRads as pointRotateRads14
+  pointFrom as pointFrom16,
+  pointRotateRads as pointRotateRads13
 } from "@excalidraw/math";
 import {
   MIN_FONT_SIZE,
@@ -22121,20 +22808,20 @@ var rotateSingleElement = (element, scene, pointerX, pointerY, shouldRotateWithD
   );
   const cx = (x1 + x2) / 2;
   const cy = (y1 + y2) / 2;
-  let angle;
+  let angle2;
   if (isFrameLikeElement(element)) {
-    angle = 0;
+    angle2 = 0;
   } else {
-    angle = 5 * Math.PI / 2 + Math.atan2(pointerY - cy, pointerX - cx);
+    angle2 = 5 * Math.PI / 2 + Math.atan2(pointerY - cy, pointerX - cx);
     if (shouldRotateWithDiscreteAngle2) {
-      angle = angle + SHIFT_LOCKING_ANGLE2 / 2;
-      angle = angle - angle % SHIFT_LOCKING_ANGLE2;
+      angle2 = angle2 + SHIFT_LOCKING_ANGLE2 / 2;
+      angle2 = angle2 - angle2 % SHIFT_LOCKING_ANGLE2;
     }
-    angle = normalizeRadians2(angle);
+    angle2 = normalizeRadians2(angle2);
   }
   const boundTextElementId = getBoundTextElementId(element);
   let update = {
-    angle
+    angle: angle2
   };
   if (isBindingElement(element)) {
     update = {
@@ -22157,7 +22844,7 @@ var rotateSingleElement = (element, scene, pointerX, pointerY, shouldRotateWithD
         scene.getNonDeletedElementsMap()
       );
       scene.mutateElement(textElement, {
-        angle,
+        angle: angle2,
         x,
         y
       });
@@ -22197,7 +22884,7 @@ var resizeSingleTextElement = (origElement, element, scene, transformHandleType,
     return;
   }
   if (transformHandleType.includes("n") || transformHandleType.includes("s")) {
-    const previousOrigin = pointFrom17(origElement.x, origElement.y);
+    const previousOrigin = pointFrom16(origElement.x, origElement.y);
     const newOrigin = getResizedOrigin(
       previousOrigin,
       origElement.width,
@@ -22238,7 +22925,7 @@ var resizeSingleTextElement = (origElement, element, scene, transformHandleType,
       element.lineHeight
     );
     const newHeight = metrics2.height;
-    const previousOrigin = pointFrom17(origElement.x, origElement.y);
+    const previousOrigin = pointFrom16(origElement.x, origElement.y);
     const newOrigin = getResizedOrigin(
       previousOrigin,
       origElement.width,
@@ -22275,9 +22962,9 @@ var rotateMultipleElements = (originalElements, elements, scene, pointerX, point
       const cx = (x1 + x2) / 2;
       const cy = (y1 + y2) / 2;
       const origAngle = originalElements.get(element.id)?.angle ?? element.angle;
-      const [rotatedCX, rotatedCY] = pointRotateRads14(
-        pointFrom17(cx, cy),
-        pointFrom17(centerX, centerY),
+      const [rotatedCX, rotatedCY] = pointRotateRads13(
+        pointFrom16(cx, cy),
+        pointFrom16(centerX, centerY),
         centerAngle + origAngle - element.angle
       );
       const updates = isElbowArrow(element) ? {
@@ -22325,45 +23012,45 @@ var getResizeOffsetXY = (transformHandleType, selectedElements, elementsMap, x,
   const [x1, y1, x2, y2] = selectedElements.length === 1 ? getElementAbsoluteCoords2(selectedElements[0], elementsMap) : getCommonBounds(selectedElements);
   const cx = (x1 + x2) / 2;
   const cy = (y1 + y2) / 2;
-  const angle = selectedElements.length === 1 ? selectedElements[0].angle : 0;
-  [x, y] = pointRotateRads14(
-    pointFrom17(x, y),
-    pointFrom17(cx, cy),
-    -angle
+  const angle2 = selectedElements.length === 1 ? selectedElements[0].angle : 0;
+  [x, y] = pointRotateRads13(
+    pointFrom16(x, y),
+    pointFrom16(cx, cy),
+    -angle2
   );
   switch (transformHandleType) {
     case "n":
-      return pointRotateRads14(
-        pointFrom17(x - (x1 + x2) / 2, y - y1),
-        pointFrom17(0, 0),
-        angle
+      return pointRotateRads13(
+        pointFrom16(x - (x1 + x2) / 2, y - y1),
+        pointFrom16(0, 0),
+        angle2
       );
     case "s":
-      return pointRotateRads14(
-        pointFrom17(x - (x1 + x2) / 2, y - y2),
-        pointFrom17(0, 0),
-        angle
+      return pointRotateRads13(
+        pointFrom16(x - (x1 + x2) / 2, y - y2),
+        pointFrom16(0, 0),
+        angle2
       );
     case "w":
-      return pointRotateRads14(
-        pointFrom17(x - x1, y - (y1 + y2) / 2),
-        pointFrom17(0, 0),
-        angle
+      return pointRotateRads13(
+        pointFrom16(x - x1, y - (y1 + y2) / 2),
+        pointFrom16(0, 0),
+        angle2
       );
     case "e":
-      return pointRotateRads14(
-        pointFrom17(x - x2, y - (y1 + y2) / 2),
-        pointFrom17(0, 0),
-        angle
+      return pointRotateRads13(
+        pointFrom16(x - x2, y - (y1 + y2) / 2),
+        pointFrom16(0, 0),
+        angle2
       );
     case "nw":
-      return pointRotateRads14(pointFrom17(x - x1, y - y1), pointFrom17(0, 0), angle);
+      return pointRotateRads13(pointFrom16(x - x1, y - y1), pointFrom16(0, 0), angle2);
     case "ne":
-      return pointRotateRads14(pointFrom17(x - x2, y - y1), pointFrom17(0, 0), angle);
+      return pointRotateRads13(pointFrom16(x - x2, y - y1), pointFrom16(0, 0), angle2);
     case "sw":
-      return pointRotateRads14(pointFrom17(x - x1, y - y2), pointFrom17(0, 0), angle);
+      return pointRotateRads13(pointFrom16(x - x1, y - y2), pointFrom16(0, 0), angle2);
     case "se":
-      return pointRotateRads14(pointFrom17(x - x2, y - y2), pointFrom17(0, 0), angle);
+      return pointRotateRads13(pointFrom16(x - x2, y - y2), pointFrom16(0, 0), angle2);
     default:
       return [0, 0];
   }
@@ -22407,7 +23094,7 @@ var getResizeAnchor = (handleDirection, shouldMaintainAspectRatio, shouldResizeF
   }
   return "top-right";
 };
-var getResizedOrigin = (prevOrigin, prevWidth, prevHeight, newWidth, newHeight, angle, handleDirection, shouldMaintainAspectRatio, shouldResizeFromCenter) => {
+var getResizedOrigin = (prevOrigin, prevWidth, prevHeight, newWidth, newHeight, angle2, handleDirection, shouldMaintainAspectRatio, shouldResizeFromCenter) => {
   const anchor = getResizeAnchor(
     handleDirection,
     shouldMaintainAspectRatio,
@@ -22417,23 +23104,23 @@ var getResizedOrigin = (prevOrigin, prevWidth, prevHeight, newWidth, newHeight,
   switch (anchor) {
     case "top-left":
       return {
-        x: x + (prevWidth - newWidth) / 2 + (newWidth - prevWidth) / 2 * Math.cos(angle) + (prevHeight - newHeight) / 2 * Math.sin(angle),
-        y: y + (prevHeight - newHeight) / 2 + (newWidth - prevWidth) / 2 * Math.sin(angle) + (newHeight - prevHeight) / 2 * Math.cos(angle)
+        x: x + (prevWidth - newWidth) / 2 + (newWidth - prevWidth) / 2 * Math.cos(angle2) + (prevHeight - newHeight) / 2 * Math.sin(angle2),
+        y: y + (prevHeight - newHeight) / 2 + (newWidth - prevWidth) / 2 * Math.sin(angle2) + (newHeight - prevHeight) / 2 * Math.cos(angle2)
       };
     case "top-right":
       return {
-        x: x + (prevWidth - newWidth) / 2 * (Math.cos(angle) + 1) + (prevHeight - newHeight) / 2 * Math.sin(angle),
-        y: y + (prevHeight - newHeight) / 2 + (prevWidth - newWidth) / 2 * Math.sin(angle) + (newHeight - prevHeight) / 2 * Math.cos(angle)
+        x: x + (prevWidth - newWidth) / 2 * (Math.cos(angle2) + 1) + (prevHeight - newHeight) / 2 * Math.sin(angle2),
+        y: y + (prevHeight - newHeight) / 2 + (prevWidth - newWidth) / 2 * Math.sin(angle2) + (newHeight - prevHeight) / 2 * Math.cos(angle2)
       };
     case "bottom-left":
       return {
-        x: x + (prevWidth - newWidth) / 2 * (1 - Math.cos(angle)) + (newHeight - prevHeight) / 2 * Math.sin(angle),
-        y: y + (prevHeight - newHeight) / 2 * (Math.cos(angle) + 1) + (newWidth - prevWidth) / 2 * Math.sin(angle)
+        x: x + (prevWidth - newWidth) / 2 * (1 - Math.cos(angle2)) + (newHeight - prevHeight) / 2 * Math.sin(angle2),
+        y: y + (prevHeight - newHeight) / 2 * (Math.cos(angle2) + 1) + (newWidth - prevWidth) / 2 * Math.sin(angle2)
       };
     case "bottom-right":
       return {
-        x: x + (prevWidth - newWidth) / 2 * (Math.cos(angle) + 1) + (newHeight - prevHeight) / 2 * Math.sin(angle),
-        y: y + (prevHeight - newHeight) / 2 * (Math.cos(angle) + 1) + (prevWidth - newWidth) / 2 * Math.sin(angle)
+        x: x + (prevWidth - newWidth) / 2 * (Math.cos(angle2) + 1) + (newHeight - prevHeight) / 2 * Math.sin(angle2),
+        y: y + (prevHeight - newHeight) / 2 * (Math.cos(angle2) + 1) + (prevWidth - newWidth) / 2 * Math.sin(angle2)
       };
     case "center":
       return {
@@ -22442,23 +23129,23 @@ var getResizedOrigin = (prevOrigin, prevWidth, prevHeight, newWidth, newHeight,
       };
     case "east-side":
       return {
-        x: x + (prevWidth - newWidth) / 2 * (Math.cos(angle) + 1),
-        y: y + (prevWidth - newWidth) / 2 * Math.sin(angle) + (prevHeight - newHeight) / 2
+        x: x + (prevWidth - newWidth) / 2 * (Math.cos(angle2) + 1),
+        y: y + (prevWidth - newWidth) / 2 * Math.sin(angle2) + (prevHeight - newHeight) / 2
       };
     case "west-side":
       return {
-        x: x + (prevWidth - newWidth) / 2 * (1 - Math.cos(angle)),
-        y: y + (newWidth - prevWidth) / 2 * Math.sin(angle) + (prevHeight - newHeight) / 2
+        x: x + (prevWidth - newWidth) / 2 * (1 - Math.cos(angle2)),
+        y: y + (newWidth - prevWidth) / 2 * Math.sin(angle2) + (prevHeight - newHeight) / 2
       };
     case "north-side":
       return {
-        x: x + (prevWidth - newWidth) / 2 + (prevHeight - newHeight) / 2 * Math.sin(angle),
-        y: y + (newHeight - prevHeight) / 2 * (Math.cos(angle) - 1)
+        x: x + (prevWidth - newWidth) / 2 + (prevHeight - newHeight) / 2 * Math.sin(angle2),
+        y: y + (newHeight - prevHeight) / 2 * (Math.cos(angle2) - 1)
       };
     case "south-side":
       return {
-        x: x + (prevWidth - newWidth) / 2 + (newHeight - prevHeight) / 2 * Math.sin(angle),
-        y: y + (prevHeight - newHeight) / 2 * (Math.cos(angle) + 1)
+        x: x + (prevWidth - newWidth) / 2 + (newHeight - prevHeight) / 2 * Math.sin(angle2),
+        y: y + (prevHeight - newHeight) / 2 * (Math.cos(angle2) + 1)
       };
   }
 };
@@ -22526,10 +23213,10 @@ var resizeSingleElement = (nextWidth, nextHeight, latestElement, origElement, or
     nextHeight,
     true
   );
-  let previousOrigin = pointFrom17(origElement.x, origElement.y);
+  let previousOrigin = pointFrom16(origElement.x, origElement.y);
   if (isLinearElement(origElement)) {
     const [x1, y1] = getElementBounds(origElement, originalElementsMap);
-    previousOrigin = pointFrom17(x1, y1);
+    previousOrigin = pointFrom16(x1, y1);
   }
   const newOrigin = getResizedOrigin(
     previousOrigin,
@@ -22552,7 +23239,7 @@ var resizeSingleElement = (nextWidth, nextHeight, latestElement, origElement, or
     newOrigin.x += scaledX;
     newOrigin.y += scaledY;
     rescaledPoints.points = rescaledPoints.points.map(
-      (p) => pointFrom17(p[0] - scaledX, p[1] - scaledY)
+      (p) => pointFrom16(p[0] - scaledX, p[1] - scaledY)
     );
   }
   if (nextWidth < 0) {
@@ -22628,11 +23315,11 @@ var getNextSingleWidthAndHeightFromPointer = (latestElement, origElement, handle
     origElement.height,
     true
   );
-  const startTopLeft = pointFrom17(x1, y1);
-  const startBottomRight = pointFrom17(x2, y2);
+  const startTopLeft = pointFrom16(x1, y1);
+  const startBottomRight = pointFrom16(x2, y2);
   const startCenter = pointCenter3(startTopLeft, startBottomRight);
-  const rotatedPointer = pointRotateRads14(
-    pointFrom17(pointerX, pointerY),
+  const rotatedPointer = pointRotateRads13(
+    pointFrom16(pointerX, pointerY),
     startCenter,
     -origElement.angle
   );
@@ -22880,7 +23567,7 @@ var resizeMultipleElements = (selectedElements, elementsMap, handleDirection, sc
       }
       const width2 = orig.width * scaleX;
       const height2 = orig.height * scaleY;
-      const angle = normalizeRadians2(
+      const angle2 = normalizeRadians2(
         orig.angle * flipFactorX * flipFactorY
       );
       const isLinearOrFreeDraw = isLinearElement(orig) || isFreeDrawElement(orig);
@@ -22901,7 +23588,7 @@ var resizeMultipleElements = (selectedElements, elementsMap, handleDirection, sc
         y,
         width: width2,
         height: height2,
-        angle,
+        angle: angle2,
         ...rescaledPoints
       };
       if (isElbowArrow(orig)) {
@@ -22969,7 +23656,7 @@ var resizeMultipleElements = (selectedElements, elementsMap, handleDirection, sc
       element,
       update: { boundTextFontSize, ...update }
     } of elementsAndUpdates) {
-      const { angle } = update;
+      const { angle: angle2 } = update;
       scene.mutateElement(element, update);
       updateBoundElements(element, scene, {
         simultaneouslyUpdated: elementsToUpdate
@@ -22990,7 +23677,7 @@ var resizeMultipleElements = (selectedElements, elementsMap, handleDirection, sc
       if (boundTextElement && boundTextFontSize) {
         scene.mutateElement(boundTextElement, {
           fontSize: boundTextFontSize,
-          angle: isLinearElement(element) ? void 0 : angle
+          angle: isLinearElement(element) ? void 0 : angle2
         });
         handleBindTextResize(element, scene, handleDirection, true);
       }
@@ -23002,9 +23689,9 @@ var resizeMultipleElements = (selectedElements, elementsMap, handleDirection, sc
 // src/resizeTest.ts
 init_define_import_meta_env();
 import {
-  pointFrom as pointFrom19,
+  pointFrom as pointFrom18,
   pointOnLineSegment,
-  pointRotateRads as pointRotateRads16
+  pointRotateRads as pointRotateRads15
 } from "@excalidraw/math";
 import {
   SIDE_RESIZING_THRESHOLD
@@ -23015,7 +23702,7 @@ init_define_import_meta_env();
 import {
   DEFAULT_TRANSFORM_HANDLE_SPACING
 } from "@excalidraw/common";
-import { pointFrom as pointFrom18, pointRotateRads as pointRotateRads15 } from "@excalidraw/math";
+import { pointFrom as pointFrom17, pointRotateRads as pointRotateRads14 } from "@excalidraw/math";
 var transformHandleSizes = {
   mouse: 8,
   pen: 16,
@@ -23055,11 +23742,11 @@ var OMIT_SIDES_FOR_LINE_BACKSLASH = {
   n: true,
   w: true
 };
-var generateTransformHandle = (x, y, width, height, cx, cy, angle) => {
-  const [xx, yy] = pointRotateRads15(
-    pointFrom18(x + width / 2, y + height / 2),
-    pointFrom18(cx, cy),
-    angle
+var generateTransformHandle = (x, y, width, height, cx, cy, angle2) => {
+  const [xx, yy] = pointRotateRads14(
+    pointFrom17(x + width / 2, y + height / 2),
+    pointFrom17(cx, cy),
+    angle2
   );
   return [xx - width / 2, yy - height / 2, width, height];
 };
@@ -23075,7 +23762,7 @@ var getOmitSidesForEditorInterface = (editorInterface) => {
   }
   return {};
 };
-var getTransformHandlesFromCoords = ([x1, y1, x2, y2, cx, cy], angle, zoom, pointerType, omitSides = {}, margin = 4, spacing = DEFAULT_TRANSFORM_HANDLE_SPACING) => {
+var getTransformHandlesFromCoords = ([x1, y1, x2, y2, cx, cy], angle2, zoom, pointerType, omitSides = {}, margin = 4, spacing = DEFAULT_TRANSFORM_HANDLE_SPACING) => {
   const size = transformHandleSizes[pointerType];
   const handleWidth = size / zoom.value;
   const handleHeight = size / zoom.value;
@@ -23093,7 +23780,7 @@ var getTransformHandlesFromCoords = ([x1, y1, x2, y2, cx, cy], angle, zoom, poin
       handleHeight,
       cx,
       cy,
-      angle
+      angle2
     ),
     ne: omitSides.ne ? void 0 : generateTransformHandle(
       x2 + dashedLineMargin - centeringOffset,
@@ -23102,7 +23789,7 @@ var getTransformHandlesFromCoords = ([x1, y1, x2, y2, cx, cy], angle, zoom, poin
       handleHeight,
       cx,
       cy,
-      angle
+      angle2
     ),
     sw: omitSides.sw ? void 0 : generateTransformHandle(
       x1 - dashedLineMargin - handleMarginX + centeringOffset,
@@ -23111,7 +23798,7 @@ var getTransformHandlesFromCoords = ([x1, y1, x2, y2, cx, cy], angle, zoom, poin
       handleHeight,
       cx,
       cy,
-      angle
+      angle2
     ),
     se: omitSides.se ? void 0 : generateTransformHandle(
       x2 + dashedLineMargin - centeringOffset,
@@ -23120,7 +23807,7 @@ var getTransformHandlesFromCoords = ([x1, y1, x2, y2, cx, cy], angle, zoom, poin
       handleHeight,
       cx,
       cy,
-      angle
+      angle2
     ),
     rotation: omitSides.rotation ? void 0 : generateTransformHandle(
       x1 + width / 2 - handleWidth / 2,
@@ -23129,7 +23816,7 @@ var getTransformHandlesFromCoords = ([x1, y1, x2, y2, cx, cy], angle, zoom, poin
       handleHeight,
       cx,
       cy,
-      angle
+      angle2
     )
   };
   const minimumSizeForEightHandles = 5 * transformHandleSizes.mouse / zoom.value;
@@ -23142,7 +23829,7 @@ var getTransformHandlesFromCoords = ([x1, y1, x2, y2, cx, cy], angle, zoom, poin
         handleHeight,
         cx,
         cy,
-        angle
+        angle2
       );
     }
     if (!omitSides.s) {
@@ -23153,7 +23840,7 @@ var getTransformHandlesFromCoords = ([x1, y1, x2, y2, cx, cy], angle, zoom, poin
         handleHeight,
         cx,
         cy,
-        angle
+        angle2
       );
     }
   }
@@ -23166,7 +23853,7 @@ var getTransformHandlesFromCoords = ([x1, y1, x2, y2, cx, cy], angle, zoom, poin
         handleHeight,
         cx,
         cy,
-        angle
+        angle2
       );
     }
     if (!omitSides.e) {
@@ -23177,7 +23864,7 @@ var getTransformHandlesFromCoords = ([x1, y1, x2, y2, cx, cy], angle, zoom, poin
         handleHeight,
         cx,
         cy,
-        angle
+        angle2
       );
     }
   }
@@ -23272,14 +23959,14 @@ var resizeTest = (element, elementsMap, appState, x, y, zoom, pointerType, edito
       const SPACING = isImageElement(element) ? 0 : SIDE_RESIZING_THRESHOLD / zoom.value;
       const ZOOMED_SIDE_RESIZING_THRESHOLD = SIDE_RESIZING_THRESHOLD / zoom.value;
       const sides = getSelectionBorders(
-        pointFrom19(x1 - SPACING, y1 - SPACING),
-        pointFrom19(x2 + SPACING, y2 + SPACING),
-        pointFrom19(cx, cy),
+        pointFrom18(x1 - SPACING, y1 - SPACING),
+        pointFrom18(x2 + SPACING, y2 + SPACING),
+        pointFrom18(cx, cy),
         element.angle
       );
       for (const [dir, side] of Object.entries(sides)) {
         if (pointOnLineSegment(
-          pointFrom19(x, y),
+          pointFrom18(x, y),
           side,
           ZOOMED_SIDE_RESIZING_THRESHOLD
         )) {
@@ -23328,14 +24015,14 @@ var getTransformHandleTypeFromCoords = ([x1, y1, x2, y2], scenePointerX, scenePo
     const cy = (y1 + y2) / 2;
     const SPACING = SIDE_RESIZING_THRESHOLD / zoom.value;
     const sides = getSelectionBorders(
-      pointFrom19(x1 - SPACING, y1 - SPACING),
-      pointFrom19(x2 + SPACING, y2 + SPACING),
-      pointFrom19(cx, cy),
+      pointFrom18(x1 - SPACING, y1 - SPACING),
+      pointFrom18(x2 + SPACING, y2 + SPACING),
+      pointFrom18(cx, cy),
       0
     );
     for (const [dir, side] of Object.entries(sides)) {
       if (pointOnLineSegment(
-        pointFrom19(scenePointerX, scenePointerY),
+        pointFrom18(scenePointerX, scenePointerY),
         side,
         SPACING
       )) {
@@ -23346,10 +24033,10 @@ var getTransformHandleTypeFromCoords = ([x1, y1, x2, y2], scenePointerX, scenePo
   return false;
 };
 var RESIZE_CURSORS = ["ns", "nesw", "ew", "nwse"];
-var rotateResizeCursor = (cursor, angle) => {
+var rotateResizeCursor = (cursor, angle2) => {
   const index = RESIZE_CURSORS.indexOf(cursor);
   if (index >= 0) {
-    const a2 = Math.round(angle / (Math.PI / 4));
+    const a2 = Math.round(angle2 / (Math.PI / 4));
     cursor = RESIZE_CURSORS[(index + a2) % RESIZE_CURSORS.length];
   }
   return cursor;
@@ -23391,11 +24078,11 @@ var getCursorForResizingElement = (resizingElement) => {
   }
   return cursor ? `${cursor}-resize` : "";
 };
-var getSelectionBorders = ([x1, y1], [x2, y2], center, angle) => {
-  const topLeft = pointRotateRads16(pointFrom19(x1, y1), center, angle);
-  const topRight = pointRotateRads16(pointFrom19(x2, y1), center, angle);
-  const bottomLeft = pointRotateRads16(pointFrom19(x1, y2), center, angle);
-  const bottomRight = pointRotateRads16(pointFrom19(x2, y2), center, angle);
+var getSelectionBorders = ([x1, y1], [x2, y2], center, angle2) => {
+  const topLeft = pointRotateRads15(pointFrom18(x1, y1), center, angle2);
+  const topRight = pointRotateRads15(pointFrom18(x2, y1), center, angle2);
+  const bottomLeft = pointRotateRads15(pointFrom18(x1, y2), center, angle2);
+  const bottomRight = pointRotateRads15(pointFrom18(x2, y2), center, angle2);
   return {
     n: [topLeft, topRight],
     e: [topRight, bottomRight],
@@ -24634,6 +25321,96 @@ var SloppinessCartoonistIcon = createIcon(
   ),
   modifiedTablerIconProps
 );
+var strokeVariabilityConstantIcon = createIcon(
+  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "path",
+      {
+        d: "M4 12 C 5 8, 6 8, 8 12",
+        fill: "none",
+        strokeWidth: "1",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "path",
+      {
+        d: "M8 12 C 9 16, 10 16, 12 12",
+        fill: "none",
+        strokeWidth: "1",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "path",
+      {
+        d: "M12 12 C 14 8, 15 8, 16 12",
+        fill: "none",
+        strokeWidth: "1",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "path",
+      {
+        d: "M16 12 C 17 16, 18 16, 19 12",
+        fill: "none",
+        strokeWidth: "1",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] }),
+  tablerIconProps
+);
+var strokeVariabilityVariableIcon = createIcon(
+  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "path",
+      {
+        d: "M4 12 C 5 8, 6 8, 8 12",
+        fill: "none",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "path",
+      {
+        d: "M8 12 C 9 16, 10 16, 12 12",
+        fill: "none",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "path",
+      {
+        d: "M12 12 C 14 8, 15 8, 16 12",
+        fill: "none",
+        strokeWidth: "2.75",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "path",
+      {
+        d: "M16 12 C 17 16, 18 16, 19 12",
+        fill: "none",
+        strokeWidth: "3.25",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] }),
+  tablerIconProps
+);
 var EdgeSharpIcon = createIcon(
   /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { strokeWidth: "1.5", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3.33334 9.99998V6.66665C3.33334 6.04326 3.33403 4.9332 3.33539 3.33646C4.95233 3.33436 6.06276 3.33331 6.66668 3.33331H10" }),
@@ -25999,7 +26776,7 @@ var showSelectedShapeActions = (appState, elements) => Boolean(
 
 // src/transform.ts
 init_define_import_meta_env();
-import { pointFrom as pointFrom20 } from "@excalidraw/math";
+import { pointFrom as pointFrom19 } from "@excalidraw/math";
 import {
   DEFAULT_FONT_FAMILY as DEFAULT_FONT_FAMILY3,
   DEFAULT_FONT_SIZE as DEFAULT_FONT_SIZE4,
@@ -26281,7 +27058,7 @@ var convertToExcalidrawElements = (elementsSkeleton, opts) => {
         excalidrawElement = newLinearElement({
           width,
           height,
-          points: [pointFrom20(0, 0), pointFrom20(width, height)],
+          points: [pointFrom19(0, 0), pointFrom19(width, height)],
           ...element
         });
         break;
@@ -26293,7 +27070,7 @@ var convertToExcalidrawElements = (elementsSkeleton, opts) => {
           width,
           height,
           endArrowhead: "arrow",
-          points: [pointFrom20(0, 0), pointFrom20(width, height)],
+          points: [pointFrom19(0, 0), pointFrom19(width, height)],
           ...element,
           type: "arrow"
         });
@@ -26673,6 +27450,7 @@ export {
   elementWithCanvasCache,
   elementsAreInFrameBounds,
   elementsAreInSameGroup,
+  elementsOverlappingBBox,
   embeddableURLValidator,
   excludeElementsInFramesFromSelection,
   filterElementsEligibleAsFrameChildren,
@@ -26683,6 +27461,7 @@ export {
   frameAndChildrenSelectedTogether,
   generateLinearCollisionShape,
   generateRoughOptions,
+  generateThumbHash,
   getActiveTextElement,
   getAllHoveredElementAtPoint,
   getApproxMinLineHeight,
@@ -26787,6 +27566,7 @@ export {
   getTextFromElements,
   getTextHeight,
   getTextWidth,
+  getThumbHashPlaceholder,
   getToolbarTools,
   getTransformHandleTypeFromCoords,
   getTransformHandles,
@@ -26808,6 +27588,7 @@ export {
   hasBackground,
   hasBoundTextElement,
   hasBoundingBox,
+  hasFreedrawMode,
   hasStrokeColor,
   hasStrokeStyle,
   hasStrokeWidth,