@myoc/excalidraw 0.19.519 → 0.19.520

package/dist/dev/index.js

@@ -35,6 +35,7 @@ import {
   getSelectedElements,
   getTargetElements,
   hasBackground,
+  hasFreedrawMode,
   hasStrokeStyle,
   hasStrokeWidth,
   isEraserActive,
@@ -57,13 +58,13 @@ import {
   saveAsJSON,
   serializeAsJSON,
   strokeRectWithRotation_simple
-} from "./chunk-RIK6B6HD.js";
+} from "./chunk-FQHULQ5P.js";
 import {
   define_import_meta_env_default
-} from "./chunk-MCPNWEHU.js";
+} from "./chunk-SJJUXTTF.js";
 import {
   en_default
-} from "./chunk-ZGRXNVW4.js";
+} from "./chunk-IU2VFRFU.js";
 import {
   percentages_default
 } from "./chunk-URPEKBQ3.js";
@@ -85,6 +86,7 @@ import {
   applyDarkModeFilter as applyDarkModeFilter5,
   DEFAULT_IMAGE_OPTIONS,
   DEFAULT_UI_OPTIONS,
+  getStrokeWidthByKey as getStrokeWidthByKey4,
   isShallowEqual as isShallowEqual9
 } from "@excalidraw/common";
 
@@ -96,7 +98,7 @@ import { flushSync as flushSync2 } from "react-dom";
 import rough3 from "roughjs/bin/rough";
 import { nanoid } from "nanoid";
 import {
-  clamp as clamp8,
+  clamp as clamp10,
   pointFrom as pointFrom32,
   pointDistance as pointDistance9,
   vector as vector3,
@@ -116,6 +118,8 @@ import {
   KEYS as KEYS50,
   APP_NAME,
   CURSOR_TYPE as CURSOR_TYPE4,
+  DEFAULT_STROKE_STREAMLINE as DEFAULT_STROKE_STREAMLINE2,
+  DEFAULT_STROKE_STREAMLINE_PRECISE,
   DEFAULT_TRANSFORM_HANDLE_SPACING as DEFAULT_TRANSFORM_HANDLE_SPACING3,
   DEFAULT_VERTICAL_ALIGN,
   DRAGGING_THRESHOLD as DRAGGING_THRESHOLD3,
@@ -126,7 +130,7 @@ import {
   IMAGE_MIME_TYPES as IMAGE_MIME_TYPES2,
   IMAGE_RENDER_TIMEOUT,
   LINE_CONFIRM_THRESHOLD as LINE_CONFIRM_THRESHOLD2,
-  MIME_TYPES as MIME_TYPES7,
+  MIME_TYPES as MIME_TYPES8,
   MQ_RIGHT_SIDEBAR_MIN_WIDTH,
   POINTER_BUTTON as POINTER_BUTTON2,
   ROUNDNESS as ROUNDNESS7,
@@ -164,11 +168,9 @@ import {
   updateObject as updateObject2,
   updateActiveTool as updateActiveTool8,
   isTransparent as isTransparent6,
-  easeToValuesRAF,
   muteFSAbortError,
   isTestEnv as isTestEnv5,
   isDevEnv as isDevEnv9,
-  easeOut as easeOut4,
   updateStable,
   addEventListener as addEventListener2,
   normalizeEOL as normalizeEOL2,
@@ -195,7 +197,9 @@ import {
   setDesktopUIMode,
   isSelectionLikeTool,
   oneOf,
-  matchKey as matchKey3
+  easeOut as easeOut5,
+  matchKey as matchKey3,
+  getStrokeWidthByKey as getStrokeWidthByKey3
 } from "@excalidraw/common";
 import {
   getObservedAppState,
@@ -251,6 +255,8 @@ import {
   maybeParseEmbedSrc,
   getEmbedLink as getEmbedLink2,
   getInitializedImageElements,
+  generateThumbHash,
+  loadHTMLImageElement,
   normalizeSVG,
   updateImageCache as _updateImageCache,
   getBoundTextElement as getBoundTextElement15,
@@ -285,7 +291,6 @@ import {
   cropElement,
   wrapText as wrapText5,
   isElementLink as isElementLink2,
-  parseElementLinkFromURL,
   isMeasureTextSupported,
   normalizeText as normalizeText2,
   measureText as measureText8,
@@ -341,7 +346,9 @@ import {
   maybeHandleArrowPointlikeDrag,
   getUncroppedWidthAndHeight as getUncroppedWidthAndHeight4,
   getActiveTextElement as getActiveTextElement2,
-  isEligibleFrameChildType
+  isEligibleFrameChildType,
+  getBindingStrategyForDraggingBindingElementEndpoints as getBindingStrategyForDraggingBindingElementEndpoints2,
+  parseElementLinkFromURL
 } from "@excalidraw/element";
 import { LinearElementEditor as LinearElementEditor11 } from "@excalidraw/element/linearElementEditor";
 import { findShapeByKey } from "@excalidraw/element/shapes";
@@ -396,7 +403,7 @@ var globImport_locales_json = __glob({
   "./locales/de-CH.json": () => import("./locales/de-CH-QSJHIHEN.js"),
   "./locales/de-DE.json": () => import("./locales/de-DE-2WQ5IRPT.js"),
   "./locales/el-GR.json": () => import("./locales/el-GR-N7JWYMV5.js"),
-  "./locales/en.json": () => import("./locales/en-RQFAMS2U.js"),
+  "./locales/en.json": () => import("./locales/en-25BPHB4T.js"),
   "./locales/es-ES.json": () => import("./locales/es-ES-37LJTLHM.js"),
   "./locales/eu-ES.json": () => import("./locales/eu-ES-2IFCUP7K.js"),
   "./locales/fa-IR.json": () => import("./locales/fa-IR-VDT7BNM4.js"),
@@ -1754,6 +1761,96 @@ var SloppinessCartoonistIcon = createIcon(
   ),
   modifiedTablerIconProps
 );
+var strokeVariabilityConstantIcon = createIcon(
+  /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M4 12 C 5 8, 6 8, 8 12",
+        fill: "none",
+        strokeWidth: "1",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M8 12 C 9 16, 10 16, 12 12",
+        fill: "none",
+        strokeWidth: "1",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M12 12 C 14 8, 15 8, 16 12",
+        fill: "none",
+        strokeWidth: "1",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ 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__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M4 12 C 5 8, 6 8, 8 12",
+        fill: "none",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M8 12 C 9 16, 10 16, 12 12",
+        fill: "none",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M12 12 C 14 8, 15 8, 16 12",
+        fill: "none",
+        strokeWidth: "2.75",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ 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__ */ jsxs("svg", { strokeWidth: "1.5", children: [
     /* @__PURE__ */ 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" }),
@@ -3691,7 +3788,7 @@ import {
   DEFAULT_FONT_SIZE,
   FONT_FAMILY as FONT_FAMILY3,
   ROUNDNESS,
-  STROKE_WIDTH,
+  STROKE_WIDTH_KEYS,
   VERTICAL_ALIGN,
   KEYS as KEYS11,
   randomInteger,
@@ -3699,6 +3796,7 @@ import {
   getFontFamilyString as getFontFamilyString2,
   getLineHeight,
   isTransparent,
+  getStrokeWidthByKey,
   reduceToCommonValue,
   invariant,
   FONT_SIZES
@@ -6348,19 +6446,19 @@ var changeProperty = (elements, appState, callback, includeBoundText = false) =>
     return element;
   });
 };
-var getFormValue = function(elements, app, getAttribute, elementPredicate, defaultValue) {
+var getFormValue = function(elements, app, getValue, elementPredicate, defaultValue) {
   const editingTextElement = app.state.editingTextElement;
   const nonDeletedElements = getNonDeletedElements4(elements);
   let ret = null;
   if (editingTextElement) {
-    ret = getAttribute(editingTextElement);
+    ret = getValue(editingTextElement);
   }
   if (!ret) {
     const hasSelection = isSomeElementSelected(nonDeletedElements, app.state);
     if (hasSelection) {
       const selectedElements = app.scene.getSelectedElements(app.state);
       const targetElements = elementPredicate === true ? selectedElements : selectedElements.filter((el) => elementPredicate(el));
-      ret = reduceToCommonValue(targetElements, getAttribute) ?? (typeof defaultValue === "function" ? defaultValue(true) : defaultValue);
+      ret = reduceToCommonValue(targetElements, getValue) ?? (typeof defaultValue === "function" ? defaultValue(true) : defaultValue);
     } else {
       ret = typeof defaultValue === "function" ? defaultValue(false) : defaultValue;
     }
@@ -6619,20 +6717,29 @@ var actionChangeFillStyle = register({
     ] });
   }
 });
+var getStrokeWidthKeyForElement = (element) => {
+  return STROKE_WIDTH_KEYS.find(
+    (key) => getStrokeWidthByKey(element.type, key) === element.strokeWidth
+  ) ?? null;
+};
+var getStrokeWidthForElement = (element, strokeWidthKey) => {
+  return getStrokeWidthByKey(element.type, strokeWidthKey);
+};
 var actionChangeStrokeWidth = register({
   name: "changeStrokeWidth",
   label: "labels.strokeWidth",
   trackEvent: false,
   perform: (elements, appState, value) => {
+    invariant(value, "actionChangeStrokeWidth: value must be defined");
     return {
       elements: changeProperty(
         elements,
         appState,
         (el) => newElementWith2(el, {
-          strokeWidth: value
+          strokeWidth: getStrokeWidthForElement(el, value)
         })
       ),
-      appState: { ...appState, currentItemStrokeWidth: value },
+      appState: { ...appState, currentItemStrokeWidthKey: value },
       captureUpdate: CaptureUpdateAction5.IMMEDIATELY
     };
   },
@@ -6644,30 +6751,30 @@ var actionChangeStrokeWidth = register({
         group: "stroke-width",
         options: [
           {
-            value: STROKE_WIDTH.thin,
+            value: "thin",
             text: t("labels.thin"),
             icon: StrokeWidthBaseIcon,
             testId: "strokeWidth-thin"
           },
           {
-            value: STROKE_WIDTH.bold,
-            text: t("labels.bold"),
+            value: "medium",
+            text: t("labels.medium"),
             icon: StrokeWidthBoldIcon,
-            testId: "strokeWidth-bold"
+            testId: "strokeWidth-medium"
           },
           {
-            value: STROKE_WIDTH.extraBold,
-            text: t("labels.extraBold"),
+            value: "bold",
+            text: t("labels.bold"),
             icon: StrokeWidthExtraBoldIcon,
-            testId: "strokeWidth-extraBold"
+            testId: "strokeWidth-bold"
           }
         ],
         value: getFormValue(
           elements,
           app,
-          (element) => element.strokeWidth,
+          getStrokeWidthKeyForElement,
           (element) => element.hasOwnProperty("strokeWidth"),
-          (hasSelection) => hasSelection ? null : appState.currentItemStrokeWidth
+          (hasSelection) => hasSelection ? null : appState.currentItemStrokeWidthKey
         ),
         onChange: (value) => updateData(value)
       }
@@ -6727,6 +6834,74 @@ var actionChangeSloppiness = register({
     ) })
   ] })
 });
+var actionChangeFreedrawMode = register({
+  name: "changeFreedrawMode",
+  label: "labels.pressure",
+  trackEvent: false,
+  perform: (elements, appState, value) => {
+    const variability = value || "constant";
+    return {
+      elements: changeProperty(elements, appState, (el) => {
+        if (el.type !== "freedraw") {
+          return el;
+        }
+        return newElementWith2(el, {
+          strokeOptions: {
+            ...el.strokeOptions,
+            variability
+          }
+        });
+      }),
+      appState: { ...appState, currentItemStrokeVariability: variability },
+      captureUpdate: CaptureUpdateAction5.IMMEDIATELY
+    };
+  },
+  PanelComponent: ({ elements, appState, updateData, app, data }) => {
+    const strokeVariability = getFormValue(
+      elements,
+      app,
+      (element) => element.strokeOptions?.variability,
+      (element) => element.type === "freedraw",
+      (hasSelection) => hasSelection ? null : appState.currentItemStrokeVariability
+    ) ?? appState.currentItemStrokeVariability;
+    if (data?.cycle) {
+      const isVariable = strokeVariability === "variable";
+      return /* @__PURE__ */ jsx34(
+        ToolButton,
+        {
+          type: "button",
+          icon: isVariable ? strokeVariabilityVariableIcon : strokeVariabilityConstantIcon,
+          title: t("labels.pressure"),
+          "aria-label": t("labels.pressure"),
+          onClick: () => updateData(isVariable ? "constant" : "variable")
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs20("fieldset", { children: [
+      /* @__PURE__ */ jsx34("legend", { children: t("labels.pressure") }),
+      /* @__PURE__ */ jsx34("div", { className: "buttonList", children: /* @__PURE__ */ jsx34(
+        RadioSelection,
+        {
+          group: "strokeOptions.variability",
+          options: [
+            {
+              value: "constant",
+              text: t("labels.pressure_constant"),
+              icon: strokeVariabilityConstantIcon
+            },
+            {
+              value: "variable",
+              text: t("labels.pressure_variable"),
+              icon: strokeVariabilityVariableIcon
+            }
+          ],
+          value: strokeVariability,
+          onChange: (value) => updateData(value)
+        }
+      ) })
+    ] });
+  }
+});
 var actionChangeStrokeStyle = register({
   name: "changeStrokeStyle",
   label: "labels.strokeStyle",
@@ -8567,6 +8742,7 @@ var actionFinalize = register({
   label: "",
   trackEvent: false,
   perform: (elements, appState, data, app) => {
+    let shouldCommit = true;
     let newElements = elements;
     const { interactiveCanvas, focusContainer, scene } = app;
     const elementsMap = scene.getNonDeletedElementsMap();
@@ -8688,9 +8864,39 @@ var actionFinalize = register({
         const { points } = element;
         const { lastCommittedPoint } = appState.selectedLinearElement;
         if (!lastCommittedPoint || points[points.length - 1] !== lastCommittedPoint) {
+          shouldCommit = false;
           scene.mutateElement(element, {
             points: element.points.slice(0, -1)
           });
+          if (isBindingElement(element) && element.endBinding && // after slicing the trailing point a <2-point arrow may be left
+          element.points.length > 1) {
+            const newArrow = !!appState.newElement;
+            const draggedPoints = /* @__PURE__ */ new Map([
+              [
+                element.points.length - 1,
+                {
+                  point: element.points[element.points.length - 1],
+                  isDragging: false
+                }
+              ]
+            ]);
+            const globalPoint = LinearElementEditor5.getPointAtIndexGlobalCoordinates(
+              element,
+              -1,
+              elementsMap
+            );
+            bindOrUnbindBindingElement(
+              element,
+              draggedPoints,
+              globalPoint[0],
+              globalPoint[1],
+              scene,
+              appState,
+              {
+                newArrow
+              }
+            );
+          }
         }
       }
       if (element && isInvisiblySmallElement(element)) {
@@ -8773,7 +8979,7 @@ var actionFinalize = register({
         selectedLinearElement
       },
       // TODO: #7348 we should not capture everything, but if we don't, it leads to incosistencies -> revisit
-      captureUpdate: CaptureUpdateAction8.IMMEDIATELY
+      captureUpdate: shouldCommit ? CaptureUpdateAction8.IMMEDIATELY : CaptureUpdateAction8.NEVER
     };
   },
   keyTest: (event, appState) => event.key === KEYS13.ESCAPE && appState.selectedLinearElement?.isEditing || (event.key === KEYS13.ESCAPE || event.key === KEYS13.ENTER) && appState.multiElement !== null,
@@ -9617,7 +9823,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-IRC25PM5.js").then(
+        (blob2) => import("./data/image-X3JCQEUX.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -11812,7 +12018,8 @@ import {
   TEXT_ALIGN,
   VERTICAL_ALIGN as VERTICAL_ALIGN2,
   arrayToMap as arrayToMap13,
-  getFontString
+  getFontString,
+  getStrokeWidthByKey as getStrokeWidthByKey2
 } from "@excalidraw/common";
 import {
   getOriginalContainerHeightFromCache,
@@ -11999,7 +12206,10 @@ var actionWrapTextInContainer = register({
           fillStyle: appState.currentItemFillStyle,
           strokeColor: appState.currentItemStrokeColor,
           roughness: appState.currentItemRoughness,
-          strokeWidth: appState.currentItemStrokeWidth,
+          strokeWidth: getStrokeWidthByKey2(
+            "rectangle",
+            appState.currentItemStrokeWidthKey
+          ),
           strokeStyle: appState.currentItemStrokeStyle,
           roundness: appState.currentItemRoundness === "round" ? {
             type: isUsingAdaptiveRadius2("rectangle") ? ROUNDNESS2.ADAPTIVE_RADIUS : ROUNDNESS2.PROPORTIONAL_RADIUS
@@ -12647,6 +12857,355 @@ import {
 import { simplify } from "points-on-curve";
 import { getStroke } from "perfect-freehand";
 
+// ../laser-pointer/src/math.ts
+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(a, b, t2) {
+  return add(a, smul(sub(b, a), t2));
+}
+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(a) {
+  return Math.atan2(Math.sin(a), Math.cos(a));
+}
+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 clamp2 = (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 = clamp2(
+    ((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
+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 {
+  constructor(options) {
+    __publicField(this, "options");
+    __publicField(this, "originalPoints", []);
+    __publicField(this, "stablePoints", []);
+    __publicField(this, "tailPoints", []);
+    __publicField(this, "isFresh", true);
+    this.options = Object.assign({}, _LaserPointer.defaults, options);
+  }
+  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;
+  }
+};
+__publicField(_LaserPointer, "defaults", {
+  size: 2,
+  streamline: 0.45,
+  simplify: 0.1,
+  simplifyPhase: "output",
+  keepHead: false,
+  sizeMapping: () => 1
+});
+__publicField(_LaserPointer, "constants", {
+  cornerDetectionMaxAngle: 75,
+  cornerDetectionVariance: (s) => s > 35 ? 0.5 : 1,
+  maxTailLength: 50
+});
+var LaserPointer = _LaserPointer;
+
 // ../utils/src/shape.ts
 import { pointsOnBezierCurves } from "points-on-curve";
 import { invariant as invariant4 } from "@excalidraw/common";
@@ -12693,7 +13252,8 @@ import {
   assertNever as assertNever2,
   COLOR_PALETTE as COLOR_PALETTE3,
   LINE_POLYGON_POINT_MERGE_DISTANCE,
-  applyDarkModeFilter as applyDarkModeFilter2
+  applyDarkModeFilter as applyDarkModeFilter2,
+  DEFAULT_STROKE_STREAMLINE
 } from "@excalidraw/common";
 import { RoughGenerator } from "roughjs/bin/generator";
 
@@ -12711,7 +13271,7 @@ import {
   ELEMENT_READY_TO_ERASE_OPACITY,
   FRAME_STYLE,
   DARK_THEME_FILTER,
-  MIME_TYPES as MIME_TYPES4,
+  MIME_TYPES as MIME_TYPES5,
   THEME as THEME9,
   distance,
   getFontString as getFontString4,
@@ -12770,7 +13330,7 @@ import {
 } from "@excalidraw/common";
 import {
   PRECISION as PRECISION2,
-  clamp as clamp3,
+  clamp as clamp4,
   lineSegment as lineSegment4,
   pointDistance as pointDistance4,
   pointDistanceSq,
@@ -12968,7 +13528,7 @@ var headingIsHorizontal = (a) => compareHeading(a, HEADING_RIGHT) || compareHead
 
 // ../element/src/elbowArrow.ts
 import {
-  clamp as clamp2,
+  clamp as clamp3,
   pointDistance as pointDistance3,
   pointFrom as pointFrom9,
   pointScaleFromOrigin as pointScaleFromOrigin2,
@@ -13005,6 +13565,7 @@ import { pointsEqual as pointsEqual6 } from "@excalidraw/math";
 
 // ../element/src/zindex.ts
 import { arrayToMap as arrayToMap20, findIndex, findLastIndex } from "@excalidraw/common";
+import { isFiniteNumber } from "@excalidraw/math";
 
 // ../element/src/selection.ts
 import { arrayToMap as arrayToMap19, isShallowEqual } from "@excalidraw/common";
@@ -13276,29 +13837,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] = pointRotateRads9(
       pointFrom13(tx, ty),
       pointFrom13(xs, ys),
-      degreesToRadians(-angle)
+      degreesToRadians(-angle2)
     );
     const [x42, y42] = pointRotateRads9(
       pointFrom13(tx, ty),
       pointFrom13(xs, ys),
-      degreesToRadians(angle)
+      degreesToRadians(angle2)
     );
     return [xs, ys, x32, y32, x42, y42];
   }
   const [x3, y3] = pointRotateRads9(
     pointFrom13(xs, ys),
     pointFrom13(tx, ty),
-    -angle * Math.PI / 180
+    -angle2 * Math.PI / 180
   );
   const [x4, y4] = pointRotateRads9(
     pointFrom13(xs, ys),
     pointFrom13(tx, ty),
-    degreesToRadians(angle)
+    degreesToRadians(angle2)
   );
   if (arrowhead === "diamond" || arrowhead === "diamond_outline") {
     let ox;
@@ -13334,17 +13895,21 @@ import {
   vectorAdd as vectorAdd2,
   vectorScale as vectorScale7,
   pointFromVector as pointFromVector6,
-  clamp as clamp4,
+  clamp as clamp5,
   isCloseTo
 } from "@excalidraw/math";
 
+// ../element/src/image.ts
+import { MIME_TYPES as MIME_TYPES4, SVG_NS } from "@excalidraw/common";
+import { rgbaToThumbHash, thumbHashToRGBA } from "thumbhash";
+
 // ../element/src/renderElement.ts
 var IMAGE_PLACEHOLDER_IMG = typeof document !== "undefined" ? document.createElement("img") : { src: "" };
-IMAGE_PLACEHOLDER_IMG.src = `data:${MIME_TYPES4.svg},${encodeURIComponent(
+IMAGE_PLACEHOLDER_IMG.src = `data:${MIME_TYPES5.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_TYPES4.svg},${encodeURIComponent(
+IMAGE_ERROR_PLACEHOLDER_IMG.src = `data:${MIME_TYPES5.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 elementWithCanvasCache = /* @__PURE__ */ new WeakMap();
@@ -13948,19 +14513,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 getStroke(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: (t2) => Math.sin(t2 * 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 = (A, B) => {
   return [(A[0] + B[0]) / 2, (A[1] + B[1]) / 2];
 };
@@ -16170,56 +16762,9 @@ var Renderer = class {
   }
 };
 
-// components/ElementCanvasButtons.tsx
-import { sceneCoordsToViewportCoords as sceneCoordsToViewportCoords2 } from "@excalidraw/common";
-import { getElementAbsoluteCoords as getElementAbsoluteCoords5 } from "@excalidraw/element";
-import { jsx as jsx57 } from "react/jsx-runtime";
-var CONTAINER_PADDING = 5;
-var getContainerCoords2 = (element, appState, elementsMap) => {
-  const [x1, y1] = getElementAbsoluteCoords5(element, elementsMap);
-  const { x: viewportX, y: viewportY } = sceneCoordsToViewportCoords2(
-    { sceneX: x1 + element.width, sceneY: y1 },
-    appState
-  );
-  const x = viewportX - appState.offsetLeft + 10;
-  const y = viewportY - appState.offsetTop;
-  return { x, y };
-};
-var ElementCanvasButtons = ({
-  children,
-  element,
-  elementsMap
-}) => {
-  const appState = useExcalidrawAppState();
-  if (appState.contextMenu || appState.newElement || appState.resizingElement || appState.isRotating || appState.openMenu || appState.viewModeEnabled) {
-    return null;
-  }
-  const { x, y } = getContainerCoords2(element, appState, elementsMap);
-  return /* @__PURE__ */ jsx57(
-    "div",
-    {
-      className: "excalidraw-canvas-buttons",
-      style: {
-        top: `${y}px`,
-        left: `${x}px`,
-        // width: CONTAINER_WIDTH,
-        padding: CONTAINER_PADDING
-      },
-      children
-    }
-  );
-};
-
-// laserTrails.ts
-import { DEFAULT_LASER_COLOR, easeOut } from "@excalidraw/common";
-
-// animatedTrail.ts
-import { LaserPointer } from "@excalidraw/laser-pointer";
-import {
-  SVG_NS,
-  getSvgPathFromStroke as getSvgPathFromStroke2,
-  sceneCoordsToViewportCoords as sceneCoordsToViewportCoords3
-} from "@excalidraw/common";
+// scroll.ts
+import { easeOut } from "@excalidraw/common";
+import { clamp as clamp6 } from "@excalidraw/math";
 
 // reactUtils.ts
 import { version as ReactVersion } from "react";
@@ -16345,12 +16890,139 @@ var _AnimationController = class _AnimationController {
     _AnimationController.animations.delete(key);
     _AnimationController.cancelScheduledFrameIfIdle();
   }
+  static reset() {
+    _AnimationController.animations.clear();
+    _AnimationController.cancelScheduledFrame();
+  }
 };
 __publicField(_AnimationController, "scheduledFrame", null);
 __publicField(_AnimationController, "animations", /* @__PURE__ */ new Map());
 var AnimationController = _AnimationController;
 
+// scroll.ts
+var SCROLL_TO_CONTENT_ANIMATION_KEY = "animateScrollToContent";
+var DEFAULT_ANIMATION_DURATION = 500;
+var scrollToElements = (state, target, onFrame, opts) => {
+  AnimationController.cancel(SCROLL_TO_CONTENT_ANIMATION_KEY);
+  const viewport = getTargetViewport(state, target, opts);
+  if (opts?.animate) {
+    animateToViewport(
+      state,
+      viewport,
+      opts.duration ?? DEFAULT_ANIMATION_DURATION,
+      onFrame
+    );
+  } else {
+    onFrame({ ...viewport, shouldCacheIgnoreZoom: false });
+  }
+};
+var getTargetViewport = (state, targetElements, opts) => {
+  if (opts?.fitToContent || opts?.fitToViewport) {
+    const { appState } = zoomToFit({
+      canvasOffsets: opts.canvasOffsets,
+      targetElements,
+      appState: state,
+      fitToViewport: !!opts.fitToViewport,
+      viewportZoomFactor: opts.viewportZoomFactor,
+      minZoom: opts.minZoom,
+      maxZoom: opts.maxZoom
+    });
+    return {
+      scrollX: appState.scrollX,
+      scrollY: appState.scrollY,
+      zoom: appState.zoom
+    };
+  }
+  const { scrollX, scrollY } = calculateScrollCenter(targetElements, state);
+  return { scrollX, scrollY, zoom: state.zoom };
+};
+var interpolateViewport = ({
+  from,
+  target,
+  factor
+}) => {
+  const zoom = from.zoom.value * Math.pow(
+    target.zoom.value / from.zoom.value,
+    factor
+  );
+  const fromCenterX = from.width / 2 / from.zoom.value - from.scrollX;
+  const fromCenterY = from.height / 2 / from.zoom.value - from.scrollY;
+  const toCenterX = from.width / 2 / target.zoom.value - target.scrollX;
+  const toCenterY = from.height / 2 / target.zoom.value - target.scrollY;
+  const centerX = fromCenterX + (toCenterX - fromCenterX) * factor;
+  const centerY = fromCenterY + (toCenterY - fromCenterY) * factor;
+  return {
+    scrollX: from.width / 2 / zoom - centerX,
+    scrollY: from.height / 2 / zoom - centerY,
+    zoom: { value: zoom }
+  };
+};
+var animateToViewport = (from, target, duration, onFrame) => {
+  AnimationController.start(
+    SCROLL_TO_CONTENT_ANIMATION_KEY,
+    ({ deltaTime, state }) => {
+      const elapsed = (state?.elapsed ?? 0) + deltaTime;
+      const progress = Math.min(elapsed / duration, 1);
+      const factor = easeOut(clamp6(progress, 0, 1));
+      onFrame({
+        ...interpolateViewport({ from, target, factor }),
+        shouldCacheIgnoreZoom: progress < 1
+        // ignore zoom caching while animating
+      });
+      return progress < 1 ? { elapsed } : null;
+    }
+  );
+};
+
+// components/ElementCanvasButtons.tsx
+import { sceneCoordsToViewportCoords as sceneCoordsToViewportCoords2 } from "@excalidraw/common";
+import { getElementAbsoluteCoords as getElementAbsoluteCoords5 } from "@excalidraw/element";
+import { jsx as jsx57 } from "react/jsx-runtime";
+var CONTAINER_PADDING = 5;
+var getContainerCoords2 = (element, appState, elementsMap) => {
+  const [x1, y1] = getElementAbsoluteCoords5(element, elementsMap);
+  const { x: viewportX, y: viewportY } = sceneCoordsToViewportCoords2(
+    { sceneX: x1 + element.width, sceneY: y1 },
+    appState
+  );
+  const x = viewportX - appState.offsetLeft + 10;
+  const y = viewportY - appState.offsetTop;
+  return { x, y };
+};
+var ElementCanvasButtons = ({
+  children,
+  element,
+  elementsMap
+}) => {
+  const appState = useExcalidrawAppState();
+  if (appState.contextMenu || appState.newElement || appState.resizingElement || appState.isRotating || appState.openMenu || appState.viewModeEnabled) {
+    return null;
+  }
+  const { x, y } = getContainerCoords2(element, appState, elementsMap);
+  return /* @__PURE__ */ jsx57(
+    "div",
+    {
+      className: "excalidraw-canvas-buttons",
+      style: {
+        top: `${y}px`,
+        left: `${x}px`,
+        // width: CONTAINER_WIDTH,
+        padding: CONTAINER_PADDING
+      },
+      children
+    }
+  );
+};
+
+// laserTrails.ts
+import { DEFAULT_LASER_COLOR, easeOut as easeOut2 } from "@excalidraw/common";
+
 // animatedTrail.ts
+import {
+  SVG_NS as SVG_NS2,
+  getSvgPathFromStroke as getSvgPathFromStroke2,
+  sceneCoordsToViewportCoords as sceneCoordsToViewportCoords3
+} from "@excalidraw/common";
 var _AnimatedTrail = class _AnimatedTrail {
   constructor(app, options) {
     this.app = app;
@@ -16362,9 +17034,9 @@ var _AnimatedTrail = class _AnimatedTrail {
     __publicField(this, "trailAnimation");
     __publicField(this, "key");
     this.key = `animated-trail-${_AnimatedTrail.counter++}`;
-    this.trailElement = document.createElementNS(SVG_NS, "path");
+    this.trailElement = document.createElementNS(SVG_NS2, "path");
     if (this.options.animateTrail) {
-      this.trailAnimation = document.createElementNS(SVG_NS, "animate");
+      this.trailAnimation = document.createElementNS(SVG_NS2, "animate");
       this.trailAnimation.setAttribute("attributeName", "stroke-dashoffset");
       this.trailElement.setAttribute("stroke-dasharray", "7 7");
       this.trailElement.setAttribute("stroke-dashoffset", "10");
@@ -16522,7 +17194,7 @@ var LaserTrails = class {
           1 - (performance.now() - c.pressure) / DECAY_TIME
         );
         const l = (DECAY_LENGTH - Math.min(DECAY_LENGTH, c.totalLength - c.currentIndex)) / DECAY_LENGTH;
-        return Math.min(easeOut(l), easeOut(t2));
+        return Math.min(easeOut2(l), easeOut2(t2));
       }
     };
   }
@@ -16662,7 +17334,7 @@ import {
   getFontString as getFontString6,
   getFontFamilyString as getFontFamilyString3,
   isTestEnv as isTestEnv4,
-  MIME_TYPES as MIME_TYPES5,
+  MIME_TYPES as MIME_TYPES6,
   applyDarkModeFilter as applyDarkModeFilter3,
   isRTL as isRTL2
 } from "@excalidraw/common";
@@ -16697,9 +17369,9 @@ import {
   isBoundToContainer as isBoundToContainer7,
   isTextElement as isTextElement8
 } from "@excalidraw/element";
-var getTransform = (width, height, angle, appState, maxWidth, maxHeight) => {
+var getTransform = (width, height, angle2, appState, maxWidth, maxHeight) => {
   const { zoom } = appState;
-  const degree = 180 * angle / Math.PI;
+  const degree = 180 * angle2 / Math.PI;
   let translateX = width * (zoom.value - 1) / 2;
   let translateY = height * (zoom.value - 1) / 2;
   if (width > maxWidth && zoom.value !== 1) {
@@ -16905,7 +17577,7 @@ var textWysiwyg = ({
       }
       height *= 1.05;
       const font = getFontString6(updatedTextElement);
-      const angle = getTextElementAngle(updatedTextElement, container);
+      const angle2 = getTextElementAngle(updatedTextElement, container);
       const editorMaxHeight = (appState.height - viewportY) / appState.zoom.value;
       Object.assign(editable.style, {
         font,
@@ -16918,7 +17590,7 @@ var textWysiwyg = ({
         transform: getTransform(
           width,
           height,
-          angle,
+          angle2,
           appState,
           maxWidth,
           editorMaxHeight
@@ -16933,7 +17605,7 @@ var textWysiwyg = ({
         maxHeight: `${editorMaxHeight}px`
       });
       currentTextLayout = {
-        angle,
+        angle: angle2,
         font,
         height: updatedTextElement.height,
         lineHeightPx: getLineHeightInPx2(
@@ -17042,7 +17714,7 @@ var textWysiwyg = ({
     editable.onpaste = async (event) => {
       const mimeTypes = parseDataTransferEventMimeTypes(event);
       let dataList = null;
-      if (mimeTypes.has(MIME_TYPES5.excalidrawClipboard) || mimeTypes.has(MIME_TYPES5.excalidraw)) {
+      if (mimeTypes.has(MIME_TYPES6.excalidrawClipboard) || mimeTypes.has(MIME_TYPES6.excalidraw)) {
         event.preventDefault();
         dataList = await parseDataTransferEvent(event);
         try {
@@ -17063,7 +17735,7 @@ var textWysiwyg = ({
         }
       }
       dataList = dataList || await parseDataTransferEvent(event);
-      const textItem = dataList.findByType(MIME_TYPES5.text);
+      const textItem = dataList.findByType(MIME_TYPES6.text);
       if (!textItem) {
         return;
       }
@@ -17455,7 +18127,7 @@ import {
 import { getFrameChildren as getFrameChildren4 } from "@excalidraw/element";
 import { selectGroupsForSelectedElements as selectGroupsForSelectedElements6 } from "@excalidraw/element";
 import { getContainerElement as getContainerElement4 } from "@excalidraw/element";
-import { arrayToMap as arrayToMap25, easeOut as easeOut2, isShallowEqual as isShallowEqual3 } from "@excalidraw/common";
+import { arrayToMap as arrayToMap25, easeOut as easeOut3, isShallowEqual as isShallowEqual3 } from "@excalidraw/common";
 
 // lasso/utils.ts
 import { simplify as simplify2 } from "points-on-curve";
@@ -17567,7 +18239,7 @@ var LassoTrail = class extends AnimatedTrail {
           1 - (performance.now() - c.pressure) / DECAY_TIME
         );
         const l = (DECAY_LENGTH - Math.min(DECAY_LENGTH, c.totalLength - c.currentIndex)) / DECAY_LENGTH;
-        return Math.min(easeOut2(l), easeOut2(t2));
+        return Math.min(easeOut3(l), easeOut3(t2));
       },
       fill: () => "rgba(105,101,219,0.05)",
       stroke: () => "rgba(105,101,219)"
@@ -17735,7 +18407,7 @@ var actionSmartZoom = register({
 });
 
 // eraser/index.ts
-import { arrayToMap as arrayToMap26, easeOut as easeOut3, THEME as THEME12 } from "@excalidraw/common";
+import { arrayToMap as arrayToMap26, easeOut as easeOut4, THEME as THEME12 } from "@excalidraw/common";
 import {
   computeBoundTextPosition as computeBoundTextPosition4,
   doBoundsIntersect as doBoundsIntersect3,
@@ -17775,7 +18447,7 @@ var EraserTrail = class extends AnimatedTrail {
           1 - (performance.now() - c.pressure) / DECAY_TIME
         );
         const l = (DECAY_LENGTH - Math.min(DECAY_LENGTH, c.totalLength - c.currentIndex)) / DECAY_LENGTH;
-        return Math.min(easeOut3(l), easeOut3(t2));
+        return Math.min(easeOut4(l), easeOut4(t2));
       },
       fill: () => app.state.theme === THEME12.LIGHT ? "rgba(0, 0, 0, 0.2)" : "rgba(255, 255, 255, 0.2)"
     });
@@ -18165,7 +18837,7 @@ var createRadarAxisLabels = (labels, angles, centerX, centerY, radius, backgroun
   );
   const minLabelWidth = getApproxMinLineWidth(fontString, lineHeight);
   const axisLabels = labels.map((label, index) => {
-    const angle = angles[index];
+    const angle2 = angles[index];
     const longestWordWidth = Math.max(
       0,
       ...label.trim().split(/\s+/).filter(Boolean).map((word) => measureText4(word, fontString, lineHeight).width)
@@ -18177,8 +18849,8 @@ var createRadarAxisLabels = (labels, angles, centerX, centerY, radius, backgroun
     );
     const displayLabel = getRadarDisplayText(label, fontString, maxLabelWidth);
     const metrics = measureText4(displayLabel, fontString, lineHeight);
-    const cos = Math.cos(angle);
-    const sin = Math.sin(angle);
+    const cos = Math.cos(angle2);
+    const sin = Math.sin(angle2);
     const textAlign = cos > RADAR_AXIS_LABEL_ALIGNMENT_THRESHOLD ? "left" : cos < -RADAR_AXIS_LABEL_ALIGNMENT_THRESHOLD ? "right" : "center";
     const centerAlignedXExtent = textAlign === "center" ? metrics.width / 2 : 0;
     const projectedExtent = Math.abs(cos) * centerAlignedXExtent + Math.abs(sin) * (metrics.height / 2);
@@ -18324,9 +18996,9 @@ var wrapOrEllipsifyTextToWidth = (text, maxWidth, fontString, lineHeight) => {
     text: ellipsifyTextToWidth(text, maxWidth, fontString, lineHeight)
   };
 };
-var getRotatedBoundingBox = (width, height, angle) => {
-  const cos = Math.abs(Math.cos(angle));
-  const sin = Math.abs(Math.sin(angle));
+var getRotatedBoundingBox = (width, height, angle2) => {
+  const cos = Math.abs(Math.cos(angle2));
+  const sin = Math.abs(Math.sin(angle2));
   return {
     width: width * cos + height * sin,
     height: width * sin + height * cos
@@ -18900,9 +19572,9 @@ var renderRadarChart = (spreadsheet, x, y, colorSeed) => {
     const levelRatio = (levelIndex + 1) / RADAR_GRID_LEVELS;
     const levelRadius = radius * levelRatio;
     const points = angles.map(
-      (angle) => pointFrom24(
-        Math.cos(angle) * levelRadius,
-        Math.sin(angle) * levelRadius
+      (angle2) => pointFrom24(
+        Math.cos(angle2) * levelRadius,
+        Math.sin(angle2) * levelRadius
       )
     );
     points.push(pointFrom24(points[0][0], points[0][1]));
@@ -18921,9 +19593,9 @@ var renderRadarChart = (spreadsheet, x, y, colorSeed) => {
       points
     });
   }) : [];
-  const spokes = angles.map((angle) => {
-    const px = Math.cos(angle) * radius;
-    const py = Math.sin(angle) * radius;
+  const spokes = angles.map((angle2) => {
+    const px = Math.cos(angle2) * radius;
+    const py = Math.sin(angle2) * radius;
     return newLinearElement3({
       backgroundColor: "transparent",
       ...commonProps,
@@ -18939,12 +19611,12 @@ var renderRadarChart = (spreadsheet, x, y, colorSeed) => {
     });
   });
   const seriesPolygons = series.map((seriesData, index) => {
-    const points = angles.map((angle, axisIndex) => {
+    const points = angles.map((angle2, axisIndex) => {
       const value = seriesData.values[axisIndex] ?? 0;
       const pointRadius = normalize(value, axisIndex) * radius;
       return pointFrom24(
-        Math.cos(angle) * pointRadius,
-        Math.sin(angle) * pointRadius
+        Math.cos(angle2) * pointRadius,
+        Math.sin(angle2) * pointRadius
       );
     });
     points.push(pointFrom24(points[0][0], points[0][1]));
@@ -19430,7 +20102,7 @@ var filterLinearConvertibleElements = (elements) => elements.filter(
 var THRESHOLD = 20;
 var isVert = (a, b) => a[0] === b[0];
 var isHorz = (a, b) => a[1] === b[1];
-var dist = (a, b) => isVert(a, b) ? Math.abs(a[1] - b[1]) : Math.abs(a[0] - b[0]);
+var dist2 = (a, b) => isVert(a, b) ? Math.abs(a[1] - b[1]) : Math.abs(a[0] - b[0]);
 var convertLineToElbow = (line) => {
   const ortho = [line.points[0]];
   const src = sanitizePoints(line.points);
@@ -19464,8 +20136,8 @@ var convertLineToElbow = (line) => {
     const v1 = isVert(a, b);
     const v2 = isVert(b, c);
     if (v1 !== v2) {
-      const d1 = dist(a, b);
-      const d2 = dist(b, c);
+      const d1 = dist2(a, b);
+      const d2 = dist2(b, c);
       if (d1 < THRESHOLD || d2 < THRESHOLD) {
         if (d2 < d1) {
           if (v1) {
@@ -19522,7 +20194,7 @@ var convertElementType = (element, targetType, app) => {
       newElement5({
         ...element,
         type: targetType,
-        roundness: targetType === "diamond" && element.roundness ? {
+        roundness: element.roundness ? {
           type: isUsingAdaptiveRadius3(targetType) ? ROUNDNESS6.ADAPTIVE_RADIUS : ROUNDNESS6.PROPORTIONAL_RADIUS
         } : element.roundness
       })
@@ -20645,7 +21317,7 @@ var SelectedShapeActions = ({
     canChangeBackgroundColor(appState, targetElements) && /* @__PURE__ */ jsx75("div", { children: renderAction("changeBackgroundColor") }),
     showFillIcons && renderAction("changeFillStyle"),
     (hasStrokeWidth(appState.activeTool.type) || targetElements.some((element) => hasStrokeWidth(element.type))) && renderAction("changeStrokeWidth"),
-    (appState.activeTool.type === "freedraw" || targetElements.some((element) => element.type === "freedraw")) && renderAction("changeStrokeShape"),
+    (hasFreedrawMode(appState.activeTool.type) || targetElements.some((element) => hasFreedrawMode(element.type))) && renderAction("changeFreedrawMode"),
     (hasStrokeStyle(appState.activeTool.type) || targetElements.some((element) => hasStrokeStyle(element.type))) && /* @__PURE__ */ jsxs35(Fragment8, { children: [
       renderAction("changeStrokeStyle"),
       renderAction("changeSloppiness")
@@ -20778,6 +21450,13 @@ var CombinedShapeProperties = ({
               (hasStrokeWidth(appState.activeTool.type) || targetElements.some(
                 (element) => hasStrokeWidth(element.type)
               )) && renderAction("changeStrokeWidth"),
+              /* in compact UI the freedraw pressure setting is rendered as a
+                standalone cycle button in the compact actions list; we render
+                it in the combined properties popup as well for clarity
+              */
+              (hasFreedrawMode(appState.activeTool.type) || targetElements.some(
+                (element) => hasFreedrawMode(element.type)
+              )) && renderAction("changeFreedrawMode"),
               (hasStrokeStyle(appState.activeTool.type) || targetElements.some(
                 (element) => hasStrokeStyle(element.type)
               )) && /* @__PURE__ */ jsxs35(Fragment8, { children: [
@@ -21105,6 +21784,7 @@ var CompactShapeActions = ({
   return /* @__PURE__ */ jsxs35("div", { className: "compact-shape-actions", children: [
     canChangeStrokeColor(appState, targetElements) && /* @__PURE__ */ jsx75("div", { className: clsx29("compact-action-item"), children: renderAction("changeStrokeColor") }),
     canChangeBackgroundColor(appState, targetElements) && /* @__PURE__ */ jsx75("div", { className: "compact-action-item", children: renderAction("changeBackgroundColor") }),
+    (hasFreedrawMode(appState.activeTool.type) || targetElements.some((element) => hasFreedrawMode(element.type))) && /* @__PURE__ */ jsx75("div", { className: "compact-action-item", children: renderAction("changeFreedrawMode", { cycle: true }) }),
     /* @__PURE__ */ jsx75(
       CombinedShapeProperties,
       {
@@ -21293,6 +21973,7 @@ var ShapesSwitcher = ({
   const stylesPanelMode = useStylesPanelMode();
   const isFullStylesPanel = stylesPanelMode === "full";
   const isCompactStylesPanel = stylesPanelMode === "compact";
+  const pendingPenDetectionRef = useRef16(false);
   const SELECTION_TOOLS2 = [
     {
       type: "selection",
@@ -21418,7 +22099,7 @@ var ShapesSwitcher = ({
           "data-testid": `toolbar-${value}`,
           onPointerDown: ({ pointerType }) => {
             if (!app.state.penDetected && pointerType === "pen") {
-              app.togglePenMode(true);
+              pendingPenDetectionRef.current = true;
             }
             if (value === "selection") {
               if (app.state.activeTool.type === "selection") {
@@ -21428,16 +22109,14 @@ var ShapesSwitcher = ({
               }
             }
           },
-          onChange: ({ pointerType }) => {
+          onChange: () => {
             if (app.state.activeTool.type !== value) {
               trackEvent("toolbar", value, "ui");
             }
-            if (value === "image") {
-              app.setActiveTool({
-                type: value
-              });
-            } else {
-              app.setActiveTool({ type: value });
+            app.setActiveTool({ type: value });
+            if (pendingPenDetectionRef.current) {
+              pendingPenDetectionRef.current = false;
+              requestAnimationFrame(() => app.togglePenMode(true));
             }
           }
         },
@@ -25250,7 +25929,7 @@ var CanvasGrid = ({
 var CanvasGrid_default = CanvasGrid;
 
 // components/Stats/Dimension.tsx
-import { clamp as clamp5, round as round3 } from "@excalidraw/math";
+import { clamp as clamp7, round as round3 } from "@excalidraw/math";
 import { MIN_WIDTH_OR_HEIGHT } from "@excalidraw/common";
 import {
   MINIMAL_CROP_SIZE,
@@ -25305,7 +25984,7 @@ var handleDimensionChange = ({
       if (nextValue !== void 0) {
         if (property === "width") {
           const nextValueInNatural = nextValue * naturalToUncroppedWidthRatio;
-          const nextCropWidth2 = clamp5(
+          const nextCropWidth2 = clamp7(
             nextValueInNatural,
             MIN_WIDTH,
             MAX_POSSIBLE_WIDTH
@@ -25317,7 +25996,7 @@ var handleDimensionChange = ({
           };
         } else if (property === "height") {
           const nextValueInNatural = nextValue * naturalToUncroppedHeightRatio;
-          const nextCropHeight2 = clamp5(
+          const nextCropHeight2 = clamp7(
             nextValueInNatural,
             MIN_HEIGHT,
             MAX_POSSIBLE_HEIGHT
@@ -25337,12 +26016,12 @@ var handleDimensionChange = ({
       }
       const changeInWidth = property === "width" ? instantChange : 0;
       const changeInHeight = property === "height" ? instantChange : 0;
-      const nextCropWidth = clamp5(
+      const nextCropWidth = clamp7(
         crop.width + changeInWidth,
         MIN_WIDTH,
         MAX_POSSIBLE_WIDTH
       );
-      const nextCropHeight = clamp5(
+      const nextCropHeight = clamp7(
         crop.height + changeInHeight,
         MIN_WIDTH,
         MAX_POSSIBLE_HEIGHT
@@ -25696,7 +26375,7 @@ import { getBoundTextElement as getBoundTextElement13, handleBindTextResize as h
 import { isTextElement as isTextElement13 } from "@excalidraw/element";
 
 // ../utils/src/export.ts
-import { MIME_TYPES as MIME_TYPES6 } from "@excalidraw/common";
+import { MIME_TYPES as MIME_TYPES7 } from "@excalidraw/common";
 var exportToCanvas2 = ({
   elements,
   appState,
@@ -25744,16 +26423,16 @@ var exportToCanvas2 = ({
   );
 };
 var exportToBlob = async (opts) => {
-  let { mimeType = MIME_TYPES6.png, quality } = opts;
-  if (mimeType === MIME_TYPES6.png && typeof quality === "number") {
-    console.warn(`"quality" will be ignored for "${MIME_TYPES6.png}" mimeType`);
+  let { mimeType = MIME_TYPES7.png, quality } = opts;
+  if (mimeType === MIME_TYPES7.png && typeof quality === "number") {
+    console.warn(`"quality" will be ignored for "${MIME_TYPES7.png}" mimeType`);
   }
   if (mimeType === "image/jpg") {
-    mimeType = MIME_TYPES6.jpg;
+    mimeType = MIME_TYPES7.jpg;
   }
-  if (mimeType === MIME_TYPES6.jpg && !opts.appState?.exportBackground) {
+  if (mimeType === MIME_TYPES7.jpg && !opts.appState?.exportBackground) {
     console.warn(
-      `Defaulting "exportBackground" to "true" for "${MIME_TYPES6.jpg}" mimeType`
+      `Defaulting "exportBackground" to "true" for "${MIME_TYPES7.jpg}" mimeType`
     );
     opts = {
       ...opts,
@@ -25768,7 +26447,7 @@ var exportToBlob = async (opts) => {
         if (!blob) {
           return reject(new Error("couldn't export to blob"));
         }
-        if (blob && mimeType === MIME_TYPES6.png && opts.appState?.exportEmbedScene) {
+        if (blob && mimeType === MIME_TYPES7.png && opts.appState?.exportEmbedScene) {
           blob = await encodePngMetadata({
             blob,
             metadata: serializeAsJSON(
@@ -26469,7 +27148,7 @@ var MultiPosition = ({
 var MultiPosition_default = MultiPosition;
 
 // components/Stats/Position.tsx
-import { clamp as clamp6, pointFrom as pointFrom29, pointRotateRads as pointRotateRads19, round as round4 } from "@excalidraw/math";
+import { clamp as clamp8, pointFrom as pointFrom29, pointRotateRads as pointRotateRads19, round as round4 } from "@excalidraw/math";
 import {
   getFlipAdjustedCropPosition,
   getUncroppedWidthAndHeight as getUncroppedWidthAndHeight2
@@ -26515,7 +27194,7 @@ var handlePositionChange2 = ({
         if (isFlippedByX) {
           nextCrop = {
             ...crop,
-            x: clamp6(
+            x: clamp8(
               crop.naturalWidth - nextValueInNatural - crop.width,
               0,
               crop.naturalWidth - crop.width
@@ -26524,7 +27203,7 @@ var handlePositionChange2 = ({
         } else {
           nextCrop = {
             ...crop,
-            x: clamp6(
+            x: clamp8(
               nextValue * (crop.naturalWidth / uncroppedWidth),
               0,
               crop.naturalWidth - crop.width
@@ -26535,7 +27214,7 @@ var handlePositionChange2 = ({
       if (property === "y") {
         nextCrop = {
           ...crop,
-          y: clamp6(
+          y: clamp8(
             nextValue * (crop.naturalHeight / uncroppedHeight),
             0,
             crop.naturalHeight - crop.height
@@ -26551,8 +27230,8 @@ var handlePositionChange2 = ({
     const changeInY = (property === "y" ? instantChange : 0) * (isFlippedByY ? -1 : 1);
     nextCrop = {
       ...crop,
-      x: clamp6(crop.x + changeInX, 0, crop.naturalWidth - crop.width),
-      y: clamp6(crop.y + changeInY, 0, crop.naturalHeight - crop.height)
+      x: clamp8(crop.x + changeInX, 0, crop.naturalWidth - crop.width),
+      y: clamp8(crop.y + changeInY, 0, crop.naturalHeight - crop.height)
     };
     scene.mutateElement(element, {
       crop: nextCrop
@@ -28794,7 +29473,6 @@ var LayerUI = ({
     renderWelcomeScreen && /* @__PURE__ */ jsx130(tunnels.WelcomeScreenMenuHintTunnel.Out, {})
   ] });
   const renderSelectedShapeActions = () => {
-    const isCompactMode = isCompactStylesPanel;
     return /* @__PURE__ */ jsx130(
       Section,
       {
@@ -28802,7 +29480,7 @@ var LayerUI = ({
         className: clsx55("selected-shape-actions zen-mode-transition", {
           "transition-left": appState.zenModeEnabled
         }),
-        children: isCompactMode ? /* @__PURE__ */ jsx130(
+        children: isCompactStylesPanel ? /* @__PURE__ */ jsx130(
           Island,
           {
             className: clsx55("compact-shape-actions-island"),
@@ -28873,6 +29551,17 @@ var LayerUI = ({
                 }),
                 children: shouldRenderSelectedShapeActions && renderSelectedShapeActions()
               }
+            ),
+            isCompactStylesPanel && !appState.viewModeEnabled && shouldRenderSelectedShapeActions && /* @__PURE__ */ jsx130(
+              PenModeButton,
+              {
+                zenModeEnabled: appState.zenModeEnabled,
+                checked: appState.penMode,
+                onChange: () => onPenModeToggle(null),
+                title: t("toolBar.penMode"),
+                isMobile: true,
+                penDetected: appState.penDetected
+              }
             )
           ]
         }
@@ -28907,7 +29596,7 @@ var LayerUI = ({
                     ),
                     heading,
                     /* @__PURE__ */ jsxs67(Stack_default.Row, { gap: spacing.toolbarInnerRowGap, children: [
-                      /* @__PURE__ */ jsx130(
+                      !isCompactStylesPanel && /* @__PURE__ */ jsx130(
                         PenModeButton,
                         {
                           zenModeEnabled: appState.zenModeEnabled,
@@ -29295,7 +29984,7 @@ import {
 
 // renderer/interactiveScene.ts
 import {
-  clamp as clamp7,
+  clamp as clamp9,
   pointFrom as pointFrom31,
   pointsEqual as pointsEqual8,
   bezierEquation as bezierEquation2,
@@ -29601,7 +30290,7 @@ var renderBindingHighlightForBindableElement_simple = (context, suggestedBinding
       context.rotate(suggestedBinding.element.angle);
       context.translate(-center[0], -center[1]);
       context.translate(suggestedBinding.element.x, suggestedBinding.element.y);
-      context.lineWidth = clamp7(1.75, suggestedBinding.element.strokeWidth, 4) / Math.max(0.25, appState.zoom.value);
+      context.lineWidth = clamp9(1.75, suggestedBinding.element.strokeWidth, 4) / Math.max(0.25, appState.zoom.value);
       context.strokeStyle = appState.theme === THEME16.DARK ? `rgba(3, 93, 161, 1)` : `rgba(106, 189, 252, 1)`;
       switch (suggestedBinding.element.type) {
         case "ellipse":
@@ -29792,7 +30481,7 @@ var renderBindingHighlightForBindableElement_simple = (context, suggestedBinding
 var renderBindingHighlightForBindableElement_complex = (app, context, element, allElementsMap, appState, deltaTime, state) => {
   const countdownInProgress = app.state.bindMode === "orbit" && app.bindModeHandler !== null;
   const remainingTime = BIND_MODE_TIMEOUT - (state?.runtime ?? (countdownInProgress ? 0 : BIND_MODE_TIMEOUT));
-  const opacity = clamp7(1 / BIND_MODE_TIMEOUT * remainingTime, 1e-4, 1);
+  const opacity = clamp9(1 / BIND_MODE_TIMEOUT * remainingTime, 1e-4, 1);
   const offset = element.strokeWidth / 2;
   const enclosingFrame = element.frameId && allElementsMap.get(element.frameId);
   if (enclosingFrame && isFrameLikeElement14(enclosingFrame)) {
@@ -29847,7 +30536,7 @@ var renderBindingHighlightForBindableElement_complex = (app, context, element, a
         element.x + appState.scrollX - offset,
         element.y + appState.scrollY - offset
       );
-      context.lineWidth = clamp7(2.5, element.strokeWidth * 1.75, 4) / Math.max(0.25, appState.zoom.value);
+      context.lineWidth = clamp9(2.5, element.strokeWidth * 1.75, 4) / Math.max(0.25, appState.zoom.value);
       context.strokeStyle = appState.theme === THEME16.DARK ? `rgba(3, 93, 161, ${opacity / 2})` : `rgba(106, 189, 252, ${opacity / 2})`;
       switch (element.type) {
         case "ellipse":
@@ -30083,7 +30772,7 @@ var renderBindingHighlightForBindableElement = (app, context, suggestedBinding,
 };
 var renderSelectionBorder = (context, appState, elementProperties) => {
   const {
-    angle,
+    angle: angle2,
     x1,
     y1,
     x2,
@@ -30121,7 +30810,7 @@ var renderSelectionBorder = (context, appState, elementProperties) => {
       elementHeight + linePadding * 2,
       cx,
       cy,
-      angle
+      angle2
     );
   }
   context.restore();
@@ -30353,7 +31042,7 @@ var renderFocusPointIndicator = ({
     );
   }
 };
-var renderTransformHandles = (context, renderConfig, appState, transformHandles, angle) => {
+var renderTransformHandles = (context, renderConfig, appState, transformHandles, angle2) => {
   Object.keys(transformHandles).forEach((key) => {
     const transformHandle = transformHandles[key];
     if (transformHandle !== void 0) {
@@ -30379,7 +31068,7 @@ var renderTransformHandles = (context, renderConfig, appState, transformHandles,
           height,
           x + width / 2,
           y + height / 2,
-          angle,
+          angle2,
           true
           // fill before stroke
         );
@@ -30511,6 +31200,46 @@ var renderResetAutoResizeHandle = (text, context, appState, selectionColor, form
   context.stroke();
   context.restore();
 };
+var renderImageLoadingProgress = (context, visibleElements, elementsMap, app, appState, selectionColor) => {
+  for (const element of visibleElements) {
+    if (!isImageElement8(element) || !element.fileId || element.status === "error") {
+      continue;
+    }
+    const progress = app.imageLoadingProgress.get(element.fileId);
+    if (progress === void 0) {
+      continue;
+    }
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords7(element, elementsMap);
+    const centerX = (x1 + x2) / 2 + appState.scrollX;
+    const centerY = (y1 + y2) / 2 + appState.scrollY;
+    const zoom = appState.zoom.value;
+    const radius = Math.min(14, Math.min(x2 - x1, y2 - y1) * zoom / 4) / zoom;
+    const lineWidth = Math.min(3 / zoom, radius / 2);
+    if (radius <= 0 || lineWidth <= 0) {
+      continue;
+    }
+    context.save();
+    context.lineWidth = lineWidth;
+    context.lineCap = "round";
+    context.strokeStyle = appState.theme === THEME16.DARK ? "rgba(255, 255, 255, 0.35)" : "rgba(0, 0, 0, 0.25)";
+    context.beginPath();
+    context.arc(centerX, centerY, radius, 0, Math.PI * 2);
+    context.stroke();
+    if (progress > 0) {
+      context.strokeStyle = selectionColor;
+      context.beginPath();
+      context.arc(
+        centerX,
+        centerY,
+        radius,
+        -Math.PI / 2,
+        -Math.PI / 2 + Math.PI * 2 * progress
+      );
+      context.stroke();
+    }
+    context.restore();
+  }
+};
 var _renderInteractiveScene = ({
   app,
   canvas,
@@ -30868,6 +31597,14 @@ var _renderInteractiveScene = ({
     }
   });
   renderSnaps(context, appState);
+  renderImageLoadingProgress(
+    context,
+    visibleElements,
+    elementsMap,
+    app,
+    appState,
+    renderConfig.selectionColor
+  );
   context.restore();
   renderRemoteCursors({
     context,
@@ -30920,6 +31657,31 @@ var INTERACTIVE_SCENE_ANIMATION_KEY = "animateInteractiveScene";
 var InteractiveCanvas = (props) => {
   const isComponentMounted = useRef27(false);
   const rendererParams = useRef27(null);
+  useEffect31(() => {
+    let scheduledFrame = null;
+    const unsubscribe = props.app.imageLoadingProgressEmitter.on(() => {
+      if (scheduledFrame !== null) {
+        return;
+      }
+      scheduledFrame = requestAnimationFrame(() => {
+        scheduledFrame = null;
+        if (!rendererParams.current) {
+          return;
+        }
+        renderInteractiveScene({
+          ...rendererParams.current,
+          callback: () => {
+          }
+        });
+      });
+    });
+    return () => {
+      unsubscribe();
+      if (scheduledFrame !== null) {
+        cancelAnimationFrame(scheduledFrame);
+      }
+    };
+  }, [props.app]);
   useEffect31(() => {
     if (!isComponentMounted.current) {
       isComponentMounted.current = true;
@@ -31099,6 +31861,54 @@ import { jsx as jsx134 } from "react/jsx-runtime";
 var StaticCanvas = (props) => {
   const wrapperRef = useRef28(null);
   const isComponentMounted = useRef28(false);
+  const propsRef = useRef28(props);
+  const renderCanvasRef = useRef28(() => {
+  });
+  const transitionFrameRef = useRef28(null);
+  propsRef.current = props;
+  const renderCanvas = React39.useCallback(() => {
+    const currentProps = propsRef.current;
+    const wrapper = wrapperRef.current;
+    if (!wrapper) {
+      return;
+    }
+    const gridColorBold = getComputedStyle(wrapper).getPropertyValue("--color-grid-bold").trim();
+    const gridColorRegular = getComputedStyle(wrapper).getPropertyValue("--color-grid-regular").trim();
+    renderStaticScene(
+      {
+        canvas: currentProps.canvas,
+        rc: currentProps.rc,
+        scale: currentProps.scale,
+        elementsMap: currentProps.elementsMap,
+        allElementsMap: currentProps.allElementsMap,
+        visibleElements: currentProps.visibleElements,
+        appState: currentProps.appState,
+        renderConfig: {
+          ...currentProps.renderConfig,
+          gridColorBold,
+          gridColorRegular
+        }
+      },
+      isRenderThrottlingEnabled()
+    );
+    const transitionDuration = currentProps.renderConfig.imageTransitionDuration ?? 0;
+    const hasActiveTransition = transitionDuration > 0 && currentProps.visibleElements.some((element) => {
+      if (element.type !== "image" || !element.fileId) {
+        return false;
+      }
+      const transitionStart = currentProps.renderConfig.imageCache.get(
+        element.fileId
+      )?.transitionStart;
+      return transitionStart !== void 0 && performance.now() - transitionStart < transitionDuration;
+    });
+    if (hasActiveTransition && transitionFrameRef.current === null) {
+      transitionFrameRef.current = requestAnimationFrame(() => {
+        transitionFrameRef.current = null;
+        renderCanvasRef.current();
+      });
+    }
+  }, []);
+  renderCanvasRef.current = renderCanvas;
   useEffect32(() => {
     props.canvas.style.width = `${props.appState.width}px`;
     props.canvas.style.height = `${props.appState.height}px`;
@@ -31116,26 +31926,34 @@ var StaticCanvas = (props) => {
       wrapper.replaceChildren(canvas);
       canvas.classList.add("excalidraw__canvas", "static");
     }
-    const gridColorBold = getComputedStyle(wrapper).getPropertyValue("--color-grid-bold").trim();
-    const gridColorRegular = getComputedStyle(wrapper).getPropertyValue("--color-grid-regular").trim();
-    renderStaticScene(
-      {
-        canvas,
-        rc: props.rc,
-        scale: props.scale,
-        elementsMap: props.elementsMap,
-        allElementsMap: props.allElementsMap,
-        visibleElements: props.visibleElements,
-        appState: props.appState,
-        renderConfig: {
-          ...props.renderConfig,
-          gridColorBold,
-          gridColorRegular
-        }
-      },
-      isRenderThrottlingEnabled()
-    );
+    renderCanvas();
   });
+  useEffect32(() => {
+    let scheduledFrame = null;
+    const unsubscribe = props.app.imagePlaceholderUpdateEmitter.on(() => {
+      if (scheduledFrame !== null) {
+        return;
+      }
+      scheduledFrame = requestAnimationFrame(() => {
+        scheduledFrame = null;
+        renderCanvas();
+      });
+    });
+    return () => {
+      unsubscribe();
+      if (scheduledFrame !== null) {
+        cancelAnimationFrame(scheduledFrame);
+      }
+    };
+  }, [props.app, renderCanvas]);
+  useEffect32(
+    () => () => {
+      if (transitionFrameRef.current !== null) {
+        cancelAnimationFrame(transitionFrameRef.current);
+      }
+    },
+    []
+  );
   return /* @__PURE__ */ jsx134("div", { className: "excalidraw__canvas-wrapper", ref: wrapperRef });
 };
 var getRelevantAppStateProps2 = (appState) => {
@@ -31571,6 +32389,10 @@ var App = class _App extends React40.Component {
     __publicField(this, "excalidrawContainerValue");
     __publicField(this, "files", {});
     __publicField(this, "imageCache", /* @__PURE__ */ new Map());
+    __publicField(this, "imageLoadingProgress", /* @__PURE__ */ new Map());
+    __publicField(this, "imageLoadingProgressEmitter", new Emitter2());
+    __publicField(this, "imagePlaceholderUpdateEmitter", new Emitter2());
+    __publicField(this, "imageTransitionPlaceholders", /* @__PURE__ */ new Map());
     __publicField(this, "iFrameRefs", /* @__PURE__ */ new Map());
     /**
      * Indicates whether the embeddable's url has been validated for rendering.
@@ -32610,7 +33432,8 @@ var App = class _App extends React40.Component {
       this.setState((prevState) => {
         return {
           penMode: force ?? !prevState.penMode,
-          penDetected: true
+          penDetected: true,
+          currentItemStrokeVariability: !prevState.penDetected ? "variable" : prevState.currentItemStrokeVariability
         };
       });
     });
@@ -32635,120 +33458,92 @@ var App = class _App extends React40.Component {
     __publicField(this, "cancelInProgressAnimation", null);
     __publicField(this, "scrollToViewport", (target, opts) => {
       this.cancelInProgressAnimation?.();
+      AnimationController.cancel(SCROLL_TO_CONTENT_ANIMATION_KEY);
       const zoom = { value: getNormalizedZoom(target.zoom) };
       const animateDuration = opts?.duration ?? 500;
       if (opts?.animate && animateDuration > 0) {
-        const origScrollX = this.state.scrollX;
-        const origScrollY = this.state.scrollY;
-        const origZoom = this.state.zoom.value;
-        const cancel = easeToValuesRAF({
-          fromValues: {
-            scrollX: origScrollX,
-            scrollY: origScrollY,
-            zoom: origZoom
-          },
-          toValues: {
-            scrollX: target.scrollX,
-            scrollY: target.scrollY,
-            zoom: zoom.value
-          },
-          interpolateValue: (from, to, progress, key) => {
-            if (key === "zoom") {
-              return from * Math.pow(to / from, easeOut4(progress));
-            }
-            return void 0;
-          },
-          onStep: ({ scrollX, scrollY, zoom: zoom2 }) => {
-            this.setState({
-              scrollX,
-              scrollY,
-              zoom: { value: zoom2 }
-            });
-          },
-          onStart: () => {
-            this.setState({ shouldCacheIgnoreZoom: true });
-          },
-          onEnd: () => {
-            this.cancelInProgressAnimation = null;
-            this.setState({ shouldCacheIgnoreZoom: false });
-          },
-          onCancel: () => {
+        const from = this.state;
+        let startTime = null;
+        let frameId = null;
+        let cancelled = false;
+        const targetViewport = {
+          scrollX: target.scrollX,
+          scrollY: target.scrollY,
+          zoom
+        };
+        const step = (timestamp) => {
+          if (cancelled) {
+            return;
+          }
+          startTime ?? (startTime = timestamp);
+          const progress = Math.min((timestamp - startTime) / animateDuration, 1);
+          this.setState({
+            ...interpolateViewport({
+              from,
+              target: targetViewport,
+              factor: easeOut5(progress)
+            }),
+            shouldCacheIgnoreZoom: progress < 1
+          });
+          if (progress < 1) {
+            frameId = requestAnimationFrame(step);
+          } else {
             this.cancelInProgressAnimation = null;
-            this.setState({ shouldCacheIgnoreZoom: false });
-          },
-          duration: animateDuration
-        });
+          }
+        };
         this.cancelInProgressAnimation = () => {
-          cancel();
+          cancelled = true;
+          if (frameId !== null) {
+            cancelAnimationFrame(frameId);
+          }
           this.cancelInProgressAnimation = null;
+          this.setState({ shouldCacheIgnoreZoom: false });
         };
+        frameId = requestAnimationFrame(step);
       } else {
         this.setState({
           scrollX: target.scrollX,
           scrollY: target.scrollY,
-          zoom
+          zoom,
+          shouldCacheIgnoreZoom: false
         });
       }
     });
-    __publicField(this, "scrollToContent", (target = this.scene.getNonDeletedElements(), opts) => {
+    __publicField(this, "scrollToContent", (target, opts) => {
+      let elements;
       if (typeof target === "string") {
-        let id;
-        if (isElementLink2(target)) {
-          id = parseElementLinkFromURL(target);
-        } else {
-          id = target;
-        }
-        if (id) {
-          const elements = this.scene.getElementsFromId(id);
-          if (elements?.length) {
-            this.scrollToContent(elements, {
-              fitToContent: opts?.fitToContent ?? true,
-              animate: opts?.animate ?? true
-            });
-          } else if (isElementLink2(target)) {
-            this.setState({
-              toast: {
-                message: t("elementLink.notFound"),
-                duration: 3e3,
-                closable: true
-              }
-            });
-          }
-        }
-        return;
-      }
-      const targetElements = Array.isArray(target) ? target : [target];
-      let zoom = this.state.zoom;
-      let scrollX = this.state.scrollX;
-      let scrollY = this.state.scrollY;
-      if (opts?.fitToContent || opts?.fitToViewport) {
-        const { appState } = zoomToFit({
-          canvasOffsets: opts.canvasOffsets,
-          targetElements,
-          appState: this.state,
-          fitToViewport: !!opts?.fitToViewport,
-          viewportZoomFactor: opts?.viewportZoomFactor,
-          minZoom: opts?.minZoom,
-          maxZoom: opts?.maxZoom
-        });
-        zoom = appState.zoom;
-        scrollX = appState.scrollX;
-        scrollY = appState.scrollY;
+        const id = isElementLink2(target) ? parseElementLinkFromURL(target) : target;
+        elements = id ? this.scene.getElementsFromId(id) : [];
+      } else if (Array.isArray(target)) {
+        elements = target;
+      } else if (target) {
+        elements = [target];
       } else {
-        const scroll = calculateScrollCenter(targetElements, this.state);
-        scrollX = scroll.scrollX;
-        scrollY = scroll.scrollY;
+        elements = this.scene.getNonDeletedElements();
       }
-      this.scrollToViewport(
-        {
-          scrollX,
-          scrollY,
-          zoom: zoom.value
-        },
-        {
-          animate: opts?.animate,
-          duration: opts?.duration
+      if (!elements.length) {
+        if (typeof target === "string" && isElementLink2(target)) {
+          this.setState({
+            toast: {
+              message: t("elementLink.notFound"),
+              duration: 3e3,
+              closable: true
+            }
+          });
         }
+        return;
+      }
+      const resolvedOpts = typeof target === "string" ? {
+        ...opts,
+        fitToViewport: void 0,
+        fitToContent: opts?.fitToContent ?? true,
+        animate: opts?.animate ?? true
+      } : opts;
+      scrollToElements(
+        this.state,
+        elements,
+        this.setState.bind(this),
+        resolvedOpts
       );
     });
     __publicField(this, "maybeUnfollowRemoteUser", () => {
@@ -32759,6 +33554,8 @@ var App = class _App extends React40.Component {
     /** use when changing scrollX/scrollY/zoom based on user interaction */
     __publicField(this, "translateCanvas", (state) => {
       this.cancelInProgressAnimation?.();
+      AnimationController.cancel(SCROLL_TO_CONTENT_ANIMATION_KEY);
+      this.setState({ shouldCacheIgnoreZoom: false });
       this.maybeUnfollowRemoteUser();
       this.setState(state);
     });
@@ -32790,11 +33587,93 @@ var App = class _App extends React40.Component {
     __publicField(this, "addFiles", withBatchedUpdates(
       (files) => {
         const { addedFiles } = this.addMissingFiles(files);
+        for (const fileId of Object.keys(addedFiles)) {
+          const cacheEntry = this.imageCache.get(fileId);
+          if (cacheEntry?.isPlaceholder && !(cacheEntry.image instanceof Promise)) {
+            this.imageTransitionPlaceholders.set(fileId, cacheEntry.image);
+          }
+        }
         this.clearImageShapeCache(addedFiles);
         this.scene.triggerUpdate();
-        this.addNewImagesToImageCache();
+        this.addNewImagesToImageCache().then(() => {
+          for (const fileId of Object.keys(addedFiles)) {
+            const cacheEntry = this.imageCache.get(fileId);
+            if (cacheEntry && !(cacheEntry.image instanceof Promise)) {
+              this.clearImageLoadingProgress(fileId);
+            }
+            this.imageTransitionPlaceholders.delete(fileId);
+          }
+        });
       }
     ));
+    __publicField(this, "addImagePlaceholder", async (fileId, file2) => {
+      if (this.files[fileId]) {
+        return;
+      }
+      let normalizedFile = await normalizeFile(file2);
+      if (!isSupportedImageFile(normalizedFile)) {
+        throw new Error(t("errors.unsupportedFileType"));
+      }
+      if (normalizedFile.type === MIME_TYPES8.svg) {
+        normalizedFile = SVGStringToFile(
+          normalizeSVG(await normalizedFile.text()),
+          normalizedFile.name
+        );
+      }
+      const dataURL = await getDataURL(normalizedFile);
+      if (this.files[fileId]) {
+        return;
+      }
+      const imagePromise = loadHTMLImageElement(dataURL);
+      const placeholderEntry = {
+        image: imagePromise,
+        mimeType: normalizedFile.type,
+        isPlaceholder: true
+      };
+      this.imageCache.set(fileId, placeholderEntry);
+      try {
+        const image = await imagePromise;
+        if (this.imageCache.get(fileId) !== placeholderEntry || this.files[fileId]) {
+          return;
+        }
+        this.imageCache.set(fileId, { ...placeholderEntry, image });
+        this.clearImageShapeCacheForFileId(fileId);
+        this.imagePlaceholderUpdateEmitter.trigger();
+      } catch (error) {
+        if (this.imageCache.get(fileId) === placeholderEntry) {
+          this.imageCache.delete(fileId);
+          this.imagePlaceholderUpdateEmitter.trigger();
+        }
+        throw error;
+      }
+    });
+    __publicField(this, "setImageLoadingProgress", (fileId, progress) => {
+      if (progress === null) {
+        this.clearImageLoadingProgress(fileId);
+        return;
+      }
+      if (!Number.isFinite(progress)) {
+        return;
+      }
+      const nextProgress = clamp10(progress, 0, 1);
+      if (this.imageLoadingProgress.get(fileId) === nextProgress) {
+        return;
+      }
+      this.imageLoadingProgress.set(fileId, nextProgress);
+      this.imageLoadingProgressEmitter.trigger();
+    });
+    __publicField(this, "clearImageLoadingProgress", (fileId) => {
+      if (this.imageLoadingProgress.delete(fileId)) {
+        this.imageLoadingProgressEmitter.trigger();
+      }
+    });
+    __publicField(this, "clearImageShapeCacheForFileId", (fileId) => {
+      for (const element of this.scene.getNonDeletedElements()) {
+        if (isInitializedImageElement3(element) && element.fileId === fileId) {
+          ShapeCache4.delete(element);
+        }
+      }
+    });
     __publicField(this, "addMissingFiles", (files, replace = false) => {
       const nextFiles = replace ? {} : { ...this.files };
       const addedFiles = {};
@@ -32805,11 +33684,11 @@ var App = class _App extends React40.Component {
         }
         addedFiles[fileData.id] = fileData;
         nextFiles[fileData.id] = fileData;
-        if (fileData.mimeType === MIME_TYPES7.svg) {
+        if (fileData.mimeType === MIME_TYPES8.svg) {
           try {
             const restoredDataURL = getDataURL_sync(
               normalizeSVG(dataURLToString(fileData.dataURL)),
-              MIME_TYPES7.svg
+              MIME_TYPES8.svg
             );
             if (fileData.dataURL !== restoredDataURL) {
               fileData.version = (fileData.version ?? 1) + 1;
@@ -33719,7 +34598,7 @@ var App = class _App extends React40.Component {
         strokeColor: this.state.currentItemStrokeColor,
         backgroundColor: this.state.currentItemBackgroundColor,
         fillStyle: this.state.currentItemFillStyle,
-        strokeWidth: this.state.currentItemStrokeWidth,
+        strokeWidth: this.getCurrentItemStrokeWidth("text"),
         strokeStyle: this.state.currentItemStrokeStyle,
         roughness: this.state.currentItemRoughness,
         opacity: this.state.currentItemOpacity,
@@ -34278,42 +35157,7 @@ var App = class _App extends React40.Component {
         const { lastCommittedPoint } = selectedLinearElement;
         setCursorForShape(this.interactiveCanvas, this.state);
         if (lastPoint === lastCommittedPoint) {
-          const hoveredElement = isArrowElement13(this.state.newElement) && isBindingEnabled2(this.state) && getHoveredElementForBinding2(
-            pointFrom32(scenePointerX, scenePointerY),
-            this.scene.getNonDeletedElements(),
-            this.scene.getNonDeletedElementsMap(),
-            maxBindingDistance_simple3(this.state.zoom)
-          );
-          if (hoveredElement) {
-            this.actionManager.executeAction(actionFinalize, "ui", {
-              event: event.nativeEvent,
-              sceneCoords: {
-                x: scenePointerX,
-                y: scenePointerY
-              }
-            });
-            this.setState({ suggestedBinding: null });
-            if (!this.state.activeTool.locked) {
-              resetCursor(this.interactiveCanvas);
-              this.setState((prevState) => ({
-                newElement: null,
-                activeTool: updateActiveTool8(this.state, {
-                  type: this.state.preferredSelectionTool.type
-                }),
-                selectedElementIds: makeNextSelectedElementIds3(
-                  {
-                    ...prevState.selectedElementIds,
-                    [multiElement.id]: true
-                  },
-                  prevState
-                ),
-                selectedLinearElement: new LinearElementEditor11(
-                  multiElement,
-                  this.scene.getNonDeletedElementsMap()
-                )
-              }));
-            }
-          } else if (
+          if (
             // if we haven't yet created a temp point and we're beyond commit-zone
             // threshold, add a point
             pointDistance9(
@@ -34321,6 +35165,24 @@ var App = class _App extends React40.Component {
               lastPoint
             ) >= LINE_CONFIRM_THRESHOLD2
           ) {
+            this.store.scheduleCapture();
+            flushSync2(() => {
+              invariant16(
+                this.state.selectedLinearElement?.initialState,
+                "initialState must be set"
+              );
+              this.setState({
+                selectedLinearElement: {
+                  ...this.state.selectedLinearElement,
+                  lastCommittedPoint: points[points.length - 1],
+                  selectedPointsIndices: [multiElement.points.length],
+                  initialState: {
+                    ...this.state.selectedLinearElement.initialState,
+                    lastClickedPoint: multiElement.points.length
+                  }
+                }
+              });
+            });
             this.scene.mutateElement(
               multiElement,
               {
@@ -34331,21 +35193,6 @@ var App = class _App extends React40.Component {
               },
               { informMutation: false, isDragging: false }
             );
-            invariant16(
-              this.state.selectedLinearElement?.initialState,
-              "initialState must be set"
-            );
-            this.setState({
-              selectedLinearElement: {
-                ...this.state.selectedLinearElement,
-                lastCommittedPoint: points[points.length - 1],
-                selectedPointsIndices: [multiElement.points.length - 1],
-                initialState: {
-                  ...this.state.selectedLinearElement.initialState,
-                  lastClickedPoint: multiElement.points.length - 1
-                }
-              }
-            });
           } else {
             setCursor(this.interactiveCanvas, CURSOR_TYPE4.POINTER);
           }
@@ -34693,7 +35540,8 @@ var App = class _App extends React40.Component {
         this.setState((prevState) => {
           return {
             penMode: true,
-            penDetected: true
+            penDetected: true,
+            currentItemStrokeVariability: "variable"
           };
         });
       }
@@ -35466,6 +36314,7 @@ var App = class _App extends React40.Component {
         y: gridY
       });
       const simulatePressure = event.pressure === 0.5;
+      const strokeVariability = this.state.currentItemStrokeVariability;
       const element = newFreeDrawElement({
         type: elementType,
         x: gridX,
@@ -35473,15 +36322,21 @@ var App = class _App extends React40.Component {
         strokeColor: this.state.currentItemStrokeColor,
         backgroundColor: this.state.currentItemBackgroundColor,
         fillStyle: this.state.currentItemFillStyle,
-        strokeWidth: this.state.currentItemStrokeWidth,
+        strokeWidth: this.getCurrentItemStrokeWidth("freedraw"),
         strokeStyle: this.state.currentItemStrokeStyle,
         roughness: this.state.currentItemRoughness,
         opacity: this.state.currentItemOpacity,
         roundness: null,
         simulatePressure,
+        strokeOptions: {
+          variability: strokeVariability,
+          streamline: event.pointerType !== "mouse" ? DEFAULT_STROKE_STREAMLINE_PRECISE : DEFAULT_STROKE_STREAMLINE2
+        },
         locked: false,
         frameId: topLayerFrame ? topLayerFrame.id : null,
         points: [pointFrom32(0, 0)],
+        // pressures are only consumed when rendering a real-pressure stroke, so
+        // skip persisting them while pressure is being simulated
         pressures: simulatePressure ? [] : [event.pressure]
       });
       this.insertNewElement(element);
@@ -35520,7 +36375,7 @@ var App = class _App extends React40.Component {
         strokeColor: "transparent",
         backgroundColor: "transparent",
         fillStyle: this.state.currentItemFillStyle,
-        strokeWidth: this.state.currentItemStrokeWidth,
+        strokeWidth: this.getCurrentItemStrokeWidth("iframe"),
         strokeStyle: this.state.currentItemStrokeStyle,
         roughness: this.state.currentItemRoughness,
         roundness: this.getCurrentItemRoundness("iframe"),
@@ -35560,7 +36415,7 @@ var App = class _App extends React40.Component {
         strokeColor: "transparent",
         backgroundColor: "transparent",
         fillStyle: this.state.currentItemFillStyle,
-        strokeWidth: this.state.currentItemStrokeWidth,
+        strokeWidth: this.getCurrentItemStrokeWidth("embeddable"),
         strokeStyle: this.state.currentItemStrokeStyle,
         roughness: this.state.currentItemRoughness,
         roundness: this.getCurrentItemRoundness("embeddable"),
@@ -35594,7 +36449,7 @@ var App = class _App extends React40.Component {
         strokeColor: this.state.currentItemStrokeColor,
         backgroundColor: this.state.currentItemBackgroundColor,
         fillStyle: this.state.currentItemFillStyle,
-        strokeWidth: this.state.currentItemStrokeWidth,
+        strokeWidth: this.getCurrentItemStrokeWidth("image"),
         strokeStyle: this.state.currentItemStrokeStyle,
         roughness: this.state.currentItemRoughness,
         roundness: null,
@@ -35651,21 +36506,41 @@ var App = class _App extends React40.Component {
         }
         const { x: rx, y: ry } = multiElement;
         const { lastCommittedPoint } = selectedLinearElement;
-        const hoveredElementForBinding = isBindingEnabled2(this.state) && getHoveredElementForBinding2(
-          pointFrom32(
-            this.lastPointerMoveCoords?.x ?? rx + multiElement.points[multiElement.points.length - 1][0],
-            this.lastPointerMoveCoords?.y ?? ry + multiElement.points[multiElement.points.length - 1][1]
-          ),
+        const sceneCoords = viewportCoordsToSceneCoords3(event, this.state);
+        const { start: start2, end } = isBindingElement4(multiElement) && isBindingEnabled2(this.state) ? getBindingStrategyForDraggingBindingElementEndpoints2(
+          multiElement,
+          /* @__PURE__ */ new Map([
+            [
+              multiElement.points.length - 1,
+              {
+                point: multiElement.points[multiElement.points.length - 1],
+                isDragging: false
+              }
+            ]
+          ]),
+          sceneCoords.x,
+          sceneCoords.y,
+          this.scene.getNonDeletedElementsMap(),
           this.scene.getNonDeletedElements(),
-          this.scene.getNonDeletedElementsMap()
-        );
-        if (isBindingElement4(multiElement) && hoveredElementForBinding || multiElement.points.length > 1 && lastCommittedPoint && pointDistance9(
+          this.state,
+          {
+            newArrow: Boolean(this.state.newElement),
+            zoom: this.state.zoom
+          }
+        ) : { end: { mode: void 0 } };
+        const elementsMap = this.scene.getNonDeletedElementsMap();
+        const endOutsideSameElement = start2?.mode != null && end.mode != null && start2.element.id === end.element.id && !isPointInElement3(end.focusPoint, end.element, elementsMap);
+        const boundOutsideFromElsewhere = end.mode === "orbit" && multiElement.startBinding?.elementId !== end.element?.id;
+        const lastCommittedPointIsInsideCommitZone = lastCommittedPoint && pointDistance9(
           pointFrom32(
             pointerDownState.origin.x - rx,
             pointerDownState.origin.y - ry
           ),
           lastCommittedPoint
-        ) < LINE_CONFIRM_THRESHOLD2) {
+        ) < LINE_CONFIRM_THRESHOLD2;
+        if (boundOutsideFromElsewhere || // Outside -> orbit: Bind immediately
+        endOutsideSameElement || // End outside the start's element: Bind immediately
+        multiElement.points.length > 1 && lastCommittedPointIsInsideCommitZone) {
           this.actionManager.executeAction(actionFinalize, "ui", {
             event: event.nativeEvent,
             sceneCoords: {
@@ -35704,7 +36579,7 @@ var App = class _App extends React40.Component {
           strokeColor: this.state.currentItemStrokeColor,
           backgroundColor: this.state.currentItemBackgroundColor,
           fillStyle: this.state.currentItemFillStyle,
-          strokeWidth: this.state.currentItemStrokeWidth,
+          strokeWidth: this.getCurrentItemStrokeWidth(elementType),
           strokeStyle: this.state.currentItemStrokeStyle,
           roughness: this.state.currentItemRoughness,
           opacity: this.state.currentItemOpacity,
@@ -35726,7 +36601,7 @@ var App = class _App extends React40.Component {
           strokeColor: this.state.currentItemStrokeColor,
           backgroundColor: this.state.currentItemBackgroundColor,
           fillStyle: this.state.currentItemFillStyle,
-          strokeWidth: this.state.currentItemStrokeWidth,
+          strokeWidth: this.getCurrentItemStrokeWidth(elementType),
           strokeStyle: this.state.currentItemStrokeStyle,
           roughness: this.state.currentItemRoughness,
           opacity: this.state.currentItemOpacity,
@@ -35837,7 +36712,7 @@ var App = class _App extends React40.Component {
         strokeColor: this.state.currentItemStrokeColor,
         backgroundColor: this.state.currentItemBackgroundColor,
         fillStyle: this.state.currentItemFillStyle,
-        strokeWidth: this.state.currentItemStrokeWidth,
+        strokeWidth: this.getCurrentItemStrokeWidth(elementType),
         strokeStyle: this.state.currentItemStrokeStyle,
         roughness: this.state.currentItemRoughness,
         opacity: this.state.currentItemOpacity,
@@ -35965,7 +36840,7 @@ var App = class _App extends React40.Component {
       let fileName = imageFile.name;
       const fileNeedsResizing = imageFile.size >= this.state.dontResizeLimitMBs * 1024 * 1024;
       setCursor(this.interactiveCanvas, "wait");
-      if (mimeType === MIME_TYPES7.svg) {
+      if (mimeType === MIME_TYPES8.svg) {
         try {
           imageFile = SVGStringToFile(
             normalizeSVG(await imageFile.text()),
@@ -36030,8 +36905,15 @@ var App = class _App extends React40.Component {
                 lastRetrieved: Date.now()
               }
             ]);
+            if (this.imageCache.get(fileId)?.isPlaceholder) {
+              const cacheEntry = this.imageCache.get(fileId);
+              if (cacheEntry && !(cacheEntry.image instanceof Promise)) {
+                this.imageTransitionPlaceholders.set(fileId, cacheEntry.image);
+              }
+              this.imageCache.delete(fileId);
+              this.clearImageShapeCacheForFileId(fileId);
+            }
             if (!this.imageCache.get(fileId)) {
-              this.addNewImagesToImageCache();
               const { erroredFiles } = await this.updateImageCache([
                 initializedImageElement
               ]);
@@ -36040,18 +36922,33 @@ var App = class _App extends React40.Component {
               }
             }
             const imageHTML = await this.imageCache.get(fileId)?.image;
-            if (imageHTML && this.state.newElement?.id !== initializedImageElement.id) {
+            let thumbHash = null;
+            if (imageHTML) {
+              try {
+                thumbHash = generateThumbHash(imageHTML);
+              } catch (error) {
+                console.warn("Failed to generate image ThumbHash", error);
+              }
+            }
+            if (thumbHash && this.files[fileId]) {
+              this.files[fileId].thumbHash = thumbHash;
+            }
+            if (imageHTML) {
               initializedImageElement = this.getLatestInitializedImageElement(
                 placeholderImageElement,
                 fileId,
-                fileName
-              );
-              const naturalDimensions = this.getImageNaturalDimensions(
-                initializedImageElement,
-                imageHTML
+                fileName,
+                thumbHash
               );
-              Object.assign(initializedImageElement, naturalDimensions);
+              if (this.state.newElement?.id !== initializedImageElement.id) {
+                const naturalDimensions = this.getImageNaturalDimensions(
+                  initializedImageElement,
+                  imageHTML
+                );
+                Object.assign(initializedImageElement, naturalDimensions);
+              }
             }
+            this.clearImageLoadingProgress(fileId);
             resolve(initializedImageElement);
           } catch (error) {
             console.error(error);
@@ -36065,13 +36962,14 @@ var App = class _App extends React40.Component {
      * when the placeholder image could have been modified in the meantime,
      * and when you don't want to loose those modifications
      */
-    __publicField(this, "getLatestInitializedImageElement", (imagePlaceholder, fileId, fileName) => {
+    __publicField(this, "getLatestInitializedImageElement", (imagePlaceholder, fileId, fileName, thumbHash = null) => {
       const latestImageElement = this.scene.getElement(imagePlaceholder.id) ?? imagePlaceholder;
       return newElementWith10(
         latestImageElement,
         {
           fileId,
-          fileName
+          fileName,
+          thumbHash
         }
       );
     });
@@ -36142,7 +37040,23 @@ var App = class _App extends React40.Component {
         fileIds: elements.map((element) => element.fileId),
         files
       });
+      const transitionStart = performance.now();
+      for (const fileId of updatedFiles.keys()) {
+        const cacheEntry = this.imageCache.get(fileId);
+        if (cacheEntry && !(cacheEntry.image instanceof Promise)) {
+          this.imageCache.set(fileId, {
+            ...cacheEntry,
+            placeholderImage: this.imageTransitionPlaceholders.get(fileId),
+            transitionStart
+          });
+        }
+        this.imageTransitionPlaceholders.delete(fileId);
+      }
       if (erroredFiles.size) {
+        for (const fileId of erroredFiles.keys()) {
+          this.imageTransitionPlaceholders.delete(fileId);
+          this.clearImageLoadingProgress(fileId);
+        }
         this.store.scheduleAction(CaptureUpdateAction41.NEVER);
         this.scene.replaceAllElements(
           this.scene.getElementsIncludingDeleted().map((element) => {
@@ -36264,7 +37178,7 @@ var App = class _App extends React40.Component {
       const fileItems = dataTransferList.getFiles();
       if (fileItems.length === 1) {
         const { file: file2, fileHandle } = fileItems[0];
-        if (file2 && (file2.type === MIME_TYPES7.png || file2.type === MIME_TYPES7.svg)) {
+        if (file2 && (file2.type === MIME_TYPES8.png || file2.type === MIME_TYPES8.svg)) {
           try {
             const scene = await loadFromBlob(
               file2,
@@ -36306,11 +37220,11 @@ var App = class _App extends React40.Component {
               if (item.kind !== "string") {
                 return;
               }
-              if (item.type === MIME_TYPES7.html) {
+              if (item.type === MIME_TYPES8.html) {
                 try {
                   const doc = new DOMParser().parseFromString(
                     item.value,
-                    MIME_TYPES7.html
+                    MIME_TYPES8.html
                   );
                   for (const img of Array.from(
                     doc.body.querySelectorAll("img")
@@ -36320,7 +37234,7 @@ var App = class _App extends React40.Component {
                   }
                 } catch {
                 }
-              } else if (item.type === MIME_TYPES7.text) {
+              } else if (item.type === MIME_TYPES8.text) {
                 pushUnique(textImageSources, item.value);
               }
             });
@@ -36369,7 +37283,7 @@ var App = class _App extends React40.Component {
           await this.loadFileToCanvas(file2, fileHandle);
         }
       }
-      const textItem = dataTransferList.findByType(MIME_TYPES7.text);
+      const textItem = dataTransferList.findByType(MIME_TYPES8.text);
       if (textItem) {
         const text = textItem.value;
         if (text && embeddableURLValidator2(text, this.props.validateEmbeddable) && (/^(http|https):\/\/[^\s/$.?#].[^\s]*$/.test(text) || getEmbedLink2(text)?.type === "video")) {
@@ -37013,6 +37927,8 @@ var App = class _App extends React40.Component {
       applyDeltas: this.applyDeltas,
       mutateElement: this.mutateElement,
       addFiles: this.addFiles,
+      addImagePlaceholder: this.addImagePlaceholder,
+      setImageLoadingProgress: this.setImageLoadingProgress,
       addImageElementsToScene: this.addImageElementsToScene,
       resetScene: this.resetScene,
       getSceneElementsIncludingDeleted: this.getSceneElementsIncludingDeleted,
@@ -37592,7 +38508,7 @@ var App = class _App extends React40.Component {
       const isActive = this.state.activeEmbeddable?.element === el && this.state.activeEmbeddable?.state === "active";
       const isHovered = this.state.activeEmbeddable?.element === el && this.state.activeEmbeddable?.state === "hover";
       const shouldScaleEmbeddableViewport = src?.type === "video";
-      const embeddableViewportScale = clamp8(
+      const embeddableViewportScale = clamp10(
         shouldScaleEmbeddableViewport ? scale : 1,
         0.75,
         MAX_EMBEDDABLE_VIEWPORT_SCALE
@@ -37878,6 +38794,7 @@ var App = class _App extends React40.Component {
                             /* @__PURE__ */ jsx137(
                               StaticCanvas_default,
                               {
+                                app: this,
                                 canvas: this.canvas,
                                 rc: this.rc,
                                 elementsMap,
@@ -37889,6 +38806,7 @@ var App = class _App extends React40.Component {
                                 appState: this.state,
                                 renderConfig: {
                                   imageCache: this.imageCache,
+                                  imageTransitionDuration: this.props.imageOptions.placeholderTransitionDuration,
                                   isExporting: false,
                                   renderGrid: isGridModeEnabled(this),
                                   canvasBackgroundColor: this.state.viewBackgroundColor,
@@ -37910,6 +38828,7 @@ var App = class _App extends React40.Component {
                                 allElementsMap,
                                 renderConfig: {
                                   imageCache: this.imageCache,
+                                  imageTransitionDuration: this.props.imageOptions.placeholderTransitionDuration,
                                   isExporting: false,
                                   renderGrid: false,
                                   canvasBackgroundColor: this.state.viewBackgroundColor,
@@ -38177,6 +39096,10 @@ var App = class _App extends React40.Component {
     this.renderer = new Renderer(this.scene);
     this.files = {};
     this.imageCache.clear();
+    this.imageLoadingProgress.clear();
+    this.imageTransitionPlaceholders.clear();
+    this.imageLoadingProgressEmitter.clear();
+    this.imagePlaceholderUpdateEmitter.clear();
     this.resizeObserver?.disconnect();
     this.unmounted = true;
     this.removeEventListeners();
@@ -38581,7 +39504,7 @@ var App = class _App extends React40.Component {
       strokeColor: this.state.currentItemStrokeColor,
       backgroundColor: this.state.currentItemBackgroundColor,
       fillStyle: this.state.currentItemFillStyle,
-      strokeWidth: this.state.currentItemStrokeWidth,
+      strokeWidth: this.getCurrentItemStrokeWidth("text"),
       strokeStyle: this.state.currentItemStrokeStyle,
       roundness: null,
       roughness: this.state.currentItemRoughness,
@@ -39160,6 +40083,12 @@ var App = class _App extends React40.Component {
       type: isUsingAdaptiveRadius4(elementType) ? ROUNDNESS7.ADAPTIVE_RADIUS : ROUNDNESS7.PROPORTIONAL_RADIUS
     } : null;
   }
+  getCurrentItemStrokeWidth(elementType) {
+    return getStrokeWidthByKey3(
+      elementType,
+      this.state.currentItemStrokeWidthKey
+    );
+  }
   maybeCacheReferenceSnapPoints(event, selectedElements, recomputeAnyways = false) {
     if (isSnappingEnabled({
       event,
@@ -39498,12 +40427,12 @@ var App = class _App extends React40.Component {
                 );
                 const nextCrop = {
                   ...crop,
-                  x: clamp8(
+                  x: clamp10(
                     crop.x - offsetVector[0] * Math.sign(croppingElement.scale[0]),
                     0,
                     image.naturalWidth - crop.width
                   ),
-                  y: clamp8(
+                  y: clamp10(
                     crop.y - offsetVector[1] * Math.sign(croppingElement.scale[1]),
                     0,
                     image.naturalHeight - crop.height
@@ -40056,9 +40985,6 @@ var App = class _App extends React40.Component {
         return;
       }
       if (isLinearElement11(newElement7)) {
-        if (newElement7.points.length > 1 && newElement7.points[1][0] !== 0 && newElement7.points[1][1] !== 0) {
-          this.store.scheduleCapture();
-        }
         const pointerCoords = viewportCoordsToSceneCoords3(
           childEvent,
           this.state
@@ -40086,21 +41012,13 @@ var App = class _App extends React40.Component {
             );
             this.actionManager.executeAction(actionFinalize);
           } else {
-            const dx = pointerCoords.x - newElement7.x;
-            const dy = pointerCoords.y - newElement7.y;
-            this.scene.mutateElement(
-              newElement7,
-              {
-                points: [newElement7.points[0], pointFrom32(dx, dy)]
-              },
-              { informMutation: false, isDragging: false }
-            );
             this.setState({
               multiElement: newElement7,
               newElement: newElement7
             });
           }
         } else if (pointerDownState.drag.hasOccurred && !multiElement) {
+          this.store.scheduleCapture();
           if (isLinearElement11(newElement7)) {
             this.actionManager.executeAction(actionFinalize, "ui", {
               event: childEvent,
@@ -41220,7 +42138,7 @@ import { isLinearElement as isLinearElement12 } from "@excalidraw/element";
 import {
   FONT_FAMILY as FONT_FAMILY7,
   THEME as THEME18,
-  MIME_TYPES as MIME_TYPES8,
+  MIME_TYPES as MIME_TYPES9,
   ROUNDNESS as ROUNDNESS8,
   DEFAULT_LASER_COLOR as DEFAULT_LASER_COLOR2,
   UserIdleState as UserIdleState2,
@@ -41333,7 +42251,8 @@ var ExcalidrawBase = (props) => {
   }
   const normalizedImageOptions = {
     maxFileSizeBytes: imageOptions?.maxFileSizeBytes ?? DEFAULT_IMAGE_OPTIONS.maxFileSizeBytes,
-    maxWidthOrHeight: imageOptions?.maxWidthOrHeight ?? DEFAULT_IMAGE_OPTIONS.maxWidthOrHeight
+    maxWidthOrHeight: imageOptions?.maxWidthOrHeight ?? DEFAULT_IMAGE_OPTIONS.maxWidthOrHeight,
+    placeholderTransitionDuration: imageOptions?.placeholderTransitionDuration ?? DEFAULT_IMAGE_OPTIONS.placeholderTransitionDuration
   };
   const setExcalidrawAPI = useContext4(ExcalidrawAPISetContext);
   const onExcalidrawAPIRef = useRef31(onExcalidrawAPI);
@@ -41452,7 +42371,7 @@ var areEqual5 = (prevProps, nextProps) => {
     }
     return prevUIOptions[key] === nextUIOptions[key];
   });
-  const isImageOptionsSame = (prevImageOptions?.maxWidthOrHeight ?? DEFAULT_IMAGE_OPTIONS.maxWidthOrHeight) === (nextImageOptions?.maxWidthOrHeight ?? DEFAULT_IMAGE_OPTIONS.maxWidthOrHeight) && (prevImageOptions?.maxFileSizeBytes ?? DEFAULT_IMAGE_OPTIONS.maxFileSizeBytes) === (nextImageOptions?.maxFileSizeBytes ?? DEFAULT_IMAGE_OPTIONS.maxFileSizeBytes);
+  const isImageOptionsSame = (prevImageOptions?.maxWidthOrHeight ?? DEFAULT_IMAGE_OPTIONS.maxWidthOrHeight) === (nextImageOptions?.maxWidthOrHeight ?? DEFAULT_IMAGE_OPTIONS.maxWidthOrHeight) && (prevImageOptions?.maxFileSizeBytes ?? DEFAULT_IMAGE_OPTIONS.maxFileSizeBytes) === (nextImageOptions?.maxFileSizeBytes ?? DEFAULT_IMAGE_OPTIONS.maxFileSizeBytes) && (prevImageOptions?.placeholderTransitionDuration ?? DEFAULT_IMAGE_OPTIONS.placeholderTransitionDuration) === (nextImageOptions?.placeholderTransitionDuration ?? DEFAULT_IMAGE_OPTIONS.placeholderTransitionDuration);
   return isUIOptionsSame && isImageOptionsSame && isShallowEqual9(prev, next);
 };
 var Excalidraw = React42.memo(ExcalidrawBase, areEqual5);
@@ -41474,7 +42393,7 @@ export {
   Fonts,
   FooterCenter_default as Footer,
   LiveCollaborationTrigger_default as LiveCollaborationTrigger,
-  MIME_TYPES8 as MIME_TYPES,
+  MIME_TYPES9 as MIME_TYPES,
   MainMenu_default as MainMenu,
   ROUNDNESS8 as ROUNDNESS,
   Sidebar,
@@ -41496,6 +42415,7 @@ export {
   getFormFactor2 as getFormFactor,
   getNonDeletedElements13 as getNonDeletedElements,
   getSceneVersion,
+  getStrokeWidthByKey4 as getStrokeWidthByKey,
   getTextFromElements3 as getTextFromElements,
   getVisibleSceneBounds2 as getVisibleSceneBounds,
   hashElementsVersion,