@myoc/element 0.19.519 → 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([
@@ -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,6 +4213,362 @@ 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 pointFrom12,
@@ -4226,7 +4582,8 @@ 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
@@ -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;
@@ -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;
@@ -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();
@@ -11276,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)) {
@@ -12137,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);
@@ -12182,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;
@@ -12233,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]);
@@ -12252,6 +12651,9 @@ var shiftElementsToEnd = (elements, appState, direction, containingFrame, elemen
     ...targetElements,
     ...trailingElements
   ];
+  if (!hasSameElementIds(elements, nextElements)) {
+    return elements;
+  }
   syncMovedIndices(nextElements, targetElementsMap);
   return nextElements;
 };
@@ -12293,7 +12695,7 @@ function shiftElementsAccountingForFrames(allElements, appState, direction, shif
   );
   for (const [frameId, children] of frameChildrenSets) {
     nextElements = shiftFunction(
-      allElements,
+      nextElements,
       appState,
       direction,
       frameId,
@@ -13416,11 +13818,11 @@ var LinearElementEditor = class _LinearElementEditor {
       return false;
     }
     const origin = linearElementEditor.initialState.origin;
-    const dist = pointDistance5(
+    const dist2 = pointDistance5(
       origin,
       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;
@@ -13983,6 +14385,333 @@ var pointDraggingUpdates = (selectedPointsIndices, deltaX, deltaY, scenePointerX
 };
 var determineCustomLinearAngle = (pivotPoint, draggedPoint) => Math.atan2(draggedPoint[1] - pivotPoint[1], draggedPoint[0] - pivotPoint[0]);
 
+// 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) => {
@@ -14112,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);
@@ -14191,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");
@@ -14317,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.
@@ -14494,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)) {
@@ -14514,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") {
@@ -15474,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];
 };
@@ -15763,15 +16551,15 @@ var getElementLineSegments = (element, elementsMap) => {
 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 lineSegment6(
-      pointRotateRads12(side[0], center, angle),
-      pointRotateRads12(side[1], center, angle)
+      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 = [];
@@ -15781,12 +16569,12 @@ var getSegmentsOnCurve = (curve4, center, angle) => {
         pointRotateRads12(
           pointFrom13(points[i][0], points[i][1]),
           center,
-          angle
+          angle2
         ),
         pointRotateRads12(
           pointFrom13(points[i + 1][0], points[i + 1][1]),
           center,
-          angle
+          angle2
         )
       )
     );
@@ -16028,29 +16816,29 @@ 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] = pointRotateRads12(
       pointFrom13(tx, ty),
       pointFrom13(xs, ys),
-      degreesToRadians(-angle)
+      degreesToRadians(-angle2)
     );
     const [x42, y42] = pointRotateRads12(
       pointFrom13(tx, ty),
       pointFrom13(xs, ys),
-      degreesToRadians(angle)
+      degreesToRadians(angle2)
     );
     return [xs, ys, x32, y32, x42, y42];
   }
   const [x3, y3] = pointRotateRads12(
     pointFrom13(xs, ys),
     pointFrom13(tx, ty),
-    -angle * Math.PI / 180
+    -angle2 * Math.PI / 180
   );
   const [x4, y4] = pointRotateRads12(
     pointFrom13(xs, ys),
     pointFrom13(tx, ty),
-    degreesToRadians(angle)
+    degreesToRadians(angle2)
   );
   if (arrowhead === "diamond" || arrowhead === "diamond_outline") {
     let ox;
@@ -16620,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;
@@ -16846,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) => {
@@ -16958,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(
@@ -20210,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,
@@ -20229,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,
@@ -20256,7 +21045,7 @@ var _newElementBase = (type, {
     y,
     width,
     height,
-    angle,
+    angle: angle2,
     strokeColor,
     backgroundColor,
     fillStyle,
@@ -20413,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) {
@@ -20463,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) => {
@@ -20518,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
   };
@@ -21744,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) => ({
@@ -22118,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 = {
@@ -22154,7 +22844,7 @@ var rotateSingleElement = (element, scene, pointerX, pointerY, shouldRotateWithD
         scene.getNonDeletedElementsMap()
       );
       scene.mutateElement(textElement, {
-        angle,
+        angle: angle2,
         x,
         y
       });
@@ -22322,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;
+  const angle2 = selectedElements.length === 1 ? selectedElements[0].angle : 0;
   [x, y] = pointRotateRads13(
     pointFrom16(x, y),
     pointFrom16(cx, cy),
-    -angle
+    -angle2
   );
   switch (transformHandleType) {
     case "n":
       return pointRotateRads13(
         pointFrom16(x - (x1 + x2) / 2, y - y1),
         pointFrom16(0, 0),
-        angle
+        angle2
       );
     case "s":
       return pointRotateRads13(
         pointFrom16(x - (x1 + x2) / 2, y - y2),
         pointFrom16(0, 0),
-        angle
+        angle2
       );
     case "w":
       return pointRotateRads13(
         pointFrom16(x - x1, y - (y1 + y2) / 2),
         pointFrom16(0, 0),
-        angle
+        angle2
       );
     case "e":
       return pointRotateRads13(
         pointFrom16(x - x2, y - (y1 + y2) / 2),
         pointFrom16(0, 0),
-        angle
+        angle2
       );
     case "nw":
-      return pointRotateRads13(pointFrom16(x - x1, y - y1), pointFrom16(0, 0), angle);
+      return pointRotateRads13(pointFrom16(x - x1, y - y1), pointFrom16(0, 0), angle2);
     case "ne":
-      return pointRotateRads13(pointFrom16(x - x2, y - y1), pointFrom16(0, 0), angle);
+      return pointRotateRads13(pointFrom16(x - x2, y - y1), pointFrom16(0, 0), angle2);
     case "sw":
-      return pointRotateRads13(pointFrom16(x - x1, y - y2), pointFrom16(0, 0), angle);
+      return pointRotateRads13(pointFrom16(x - x1, y - y2), pointFrom16(0, 0), angle2);
     case "se":
-      return pointRotateRads13(pointFrom16(x - x2, y - y2), pointFrom16(0, 0), angle);
+      return pointRotateRads13(pointFrom16(x - x2, y - y2), pointFrom16(0, 0), angle2);
     default:
       return [0, 0];
   }
@@ -22404,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,
@@ -22414,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 {
@@ -22439,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)
       };
   }
 };
@@ -22877,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);
@@ -22898,7 +23588,7 @@ var resizeMultipleElements = (selectedElements, elementsMap, handleDirection, sc
         y,
         width: width2,
         height: height2,
-        angle,
+        angle: angle2,
         ...rescaledPoints
       };
       if (isElbowArrow(orig)) {
@@ -22966,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
@@ -22987,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);
       }
@@ -23052,11 +23742,11 @@ var OMIT_SIDES_FOR_LINE_BACKSLASH = {
   n: true,
   w: true
 };
-var generateTransformHandle = (x, y, width, height, 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),
-    angle
+    angle2
   );
   return [xx - width / 2, yy - height / 2, width, height];
 };
@@ -23072,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;
@@ -23090,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,
@@ -23099,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,
@@ -23108,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,
@@ -23117,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,
@@ -23126,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;
@@ -23139,7 +23829,7 @@ var getTransformHandlesFromCoords = ([x1, y1, x2, y2, cx, cy], angle, zoom, poin
         handleHeight,
         cx,
         cy,
-        angle
+        angle2
       );
     }
     if (!omitSides.s) {
@@ -23150,7 +23840,7 @@ var getTransformHandlesFromCoords = ([x1, y1, x2, y2, cx, cy], angle, zoom, poin
         handleHeight,
         cx,
         cy,
-        angle
+        angle2
       );
     }
   }
@@ -23163,7 +23853,7 @@ var getTransformHandlesFromCoords = ([x1, y1, x2, y2, cx, cy], angle, zoom, poin
         handleHeight,
         cx,
         cy,
-        angle
+        angle2
       );
     }
     if (!omitSides.e) {
@@ -23174,7 +23864,7 @@ var getTransformHandlesFromCoords = ([x1, y1, x2, y2, cx, cy], angle, zoom, poin
         handleHeight,
         cx,
         cy,
-        angle
+        angle2
       );
     }
   }
@@ -23343,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;
@@ -23388,11 +24078,11 @@ var getCursorForResizingElement = (resizingElement) => {
   }
   return cursor ? `${cursor}-resize` : "";
 };
-var getSelectionBorders = ([x1, y1], [x2, y2], center, angle) => {
-  const topLeft = pointRotateRads15(pointFrom18(x1, y1), center, angle);
-  const topRight = pointRotateRads15(pointFrom18(x2, y1), center, angle);
-  const bottomLeft = pointRotateRads15(pointFrom18(x1, y2), center, angle);
-  const bottomRight = pointRotateRads15(pointFrom18(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],
@@ -24631,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" }),
@@ -26681,6 +27461,7 @@ export {
   frameAndChildrenSelectedTogether,
   generateLinearCollisionShape,
   generateRoughOptions,
+  generateThumbHash,
   getActiveTextElement,
   getAllHoveredElementAtPoint,
   getApproxMinLineHeight,
@@ -26785,6 +27566,7 @@ export {
   getTextFromElements,
   getTextHeight,
   getTextWidth,
+  getThumbHashPlaceholder,
   getToolbarTools,
   getTransformHandleTypeFromCoords,
   getTransformHandles,
@@ -26806,6 +27588,7 @@ export {
   hasBackground,
   hasBoundTextElement,
   hasBoundingBox,
+  hasFreedrawMode,
   hasStrokeColor,
   hasStrokeStyle,
   hasStrokeWidth,