@excalidraw/excalidraw 0.18.0-39ce38a0d-200a6bd94 → 0.18.0-414182f

package/dist/dev/index.js

@@ -28,7 +28,7 @@ import {
   getDefaultAppState,
   getElementsWithinSelection,
   getExportSize,
-  getFileFromEvent,
+  getFileHandle,
   getFileHandleType,
   getLinkHandleFromCoords,
   getNormalizedCanvasDimensions,
@@ -60,6 +60,7 @@ import {
   resizeImageFile,
   restore,
   restoreAppState,
+  restoreElement,
   restoreElements,
   restoreLibraryItems,
   saveAsJSON,
@@ -68,10 +69,10 @@ import {
   serializeLibraryAsJSON,
   strokeEllipseWithRotation,
   strokeRectWithRotation
-} from "./chunk-GZYPVQVV.js";
+} from "./chunk-WWDIUJ2Q.js";
 import {
   define_import_meta_env_default
-} from "./chunk-Y7B3JU7D.js";
+} from "./chunk-CP5DND7P.js";
 import {
   en_default
 } from "./chunk-QF5FRM6O.js";
@@ -97,10 +98,10 @@ import rough3 from "roughjs/bin/rough";
 import { nanoid } from "nanoid";
 import {
   clamp as clamp7,
-  pointFrom as pointFrom28,
+  pointFrom as pointFrom29,
   pointDistance as pointDistance8,
   vector as vector3,
-  pointRotateRads as pointRotateRads16,
+  pointRotateRads as pointRotateRads17,
   vectorScale as vectorScale7,
   vectorFromPoint as vectorFromPoint9,
   vectorSubtract as vectorSubtract2,
@@ -122,14 +123,14 @@ import {
   DRAGGING_THRESHOLD as DRAGGING_THRESHOLD2,
   ELEMENT_SHIFT_TRANSLATE_AMOUNT,
   ELEMENT_TRANSLATE_AMOUNT,
-  EVENT as EVENT13,
+  EVENT as EVENT14,
   FRAME_STYLE as FRAME_STYLE4,
   IMAGE_MIME_TYPES as IMAGE_MIME_TYPES2,
   IMAGE_RENDER_TIMEOUT,
   isBrave,
   LINE_CONFIRM_THRESHOLD as LINE_CONFIRM_THRESHOLD2,
   MAX_ALLOWED_FILE_BYTES,
-  MIME_TYPES as MIME_TYPES8,
+  MIME_TYPES as MIME_TYPES9,
   MQ_MAX_HEIGHT_LANDSCAPE,
   MQ_MAX_WIDTH_LANDSCAPE,
   MQ_MAX_WIDTH_PORTRAIT,
@@ -188,7 +189,9 @@ import {
   randomInteger as randomInteger4,
   CLASSES as CLASSES7,
   Emitter as Emitter3,
-  MINIMUM_ARROW_SIZE
+  isMobile,
+  MINIMUM_ARROW_SIZE,
+  DOUBLE_TAP_POSITION_THRESHOLD
 } from "@excalidraw/common";
 import {
   getObservedAppState,
@@ -203,7 +206,7 @@ import {
   updateBoundElements as updateBoundElements3,
   getSuggestedBindingsForArrows,
   LinearElementEditor as LinearElementEditor12,
-  newElementWith as newElementWith10,
+  newElementWith as newElementWith11,
   newFrameElement as newFrameElement3,
   newFreeDrawElement,
   newEmbeddableElement,
@@ -318,7 +321,9 @@ import {
   CaptureUpdateAction as CaptureUpdateAction37,
   hitElementBoundingBox as hitElementBoundingBox2,
   isLineElement as isLineElement7,
-  isSimpleArrow
+  isSimpleArrow,
+  StoreDelta as StoreDelta2,
+  positionElementsOnGrid
 } from "@excalidraw/element";
 
 // actions/actionDeleteSelected.tsx
@@ -3119,7 +3124,9 @@ var actionDeleteSelected = register({
       elements: nextElements,
       appState: {
         ...nextAppState,
-        activeTool: updateActiveTool(appState, { type: "selection" }),
+        activeTool: updateActiveTool(appState, {
+          type: app.defaultSelectionTool
+        }),
         multiElement: null,
         activeEmbeddable: null,
         selectedLinearElement: null
@@ -7375,7 +7382,7 @@ var actionClearCanvas = register({
         gridModeEnabled: appState.gridModeEnabled,
         stats: appState.stats,
         pasteDialog: appState.pasteDialog,
-        activeTool: appState.activeTool.type === "image" ? { ...appState.activeTool, type: "selection" } : appState.activeTool
+        activeTool: appState.activeTool.type === "image" ? { ...appState.activeTool, type: app.defaultSelectionTool } : appState.activeTool
       },
       captureUpdate: CaptureUpdateAction6.IMMEDIATELY
     };
@@ -7674,12 +7681,12 @@ var actionToggleEraserTool = register({
   name: "toggleEraserTool",
   label: "toolBar.eraser",
   trackEvent: { category: "toolbar" },
-  perform: (elements, appState) => {
+  perform: (elements, appState, _, app) => {
     let activeTool;
     if (isEraserActive(appState)) {
       activeTool = updateActiveTool2(appState, {
         ...appState.activeTool.lastActiveTool || {
-          type: "selection"
+          type: app.defaultSelectionTool
         },
         lastActiveToolBeforeEraser: null
       });
@@ -7707,6 +7714,9 @@ var actionToggleLassoTool = register({
   label: "toolBar.lasso",
   icon: LassoIcon,
   trackEvent: { category: "toolbar" },
+  predicate: (elements, appState, props, app) => {
+    return app.defaultSelectionTool !== "lasso";
+  },
   perform: (elements, appState, _, app) => {
     let activeTool;
     if (appState.activeTool.type !== "lasso") {
@@ -7804,7 +7814,11 @@ import {
   bindOrUnbindLinearElement,
   isBindingEnabled
 } from "@excalidraw/element/binding";
-import { isValidPolygon, LinearElementEditor as LinearElementEditor5 } from "@excalidraw/element";
+import {
+  isValidPolygon,
+  LinearElementEditor as LinearElementEditor5,
+  newElementWith as newElementWith4
+} from "@excalidraw/element";
 import {
   isBindingElement,
   isFreeDrawElement,
@@ -7849,7 +7863,14 @@ var actionFinalize = register({
       if (linearElementEditor !== appState.selectedLinearElement) {
         let newElements2 = elements;
         if (element2 && isInvisiblySmallElement(element2)) {
-          newElements2 = newElements2.filter((el) => el.id !== element2.id);
+          newElements2 = newElements2.map((el) => {
+            if (el.id === element2.id) {
+              return newElementWith4(el, {
+                isDeleted: true
+              });
+            }
+            return el;
+          });
         }
         return {
           elements: newElements2,
@@ -7882,7 +7903,12 @@ var actionFinalize = register({
           });
         }
         return {
-          elements: element2.points.length < 2 || isInvisiblySmallElement(element2) ? elements.filter((el) => el.id !== element2.id) : void 0,
+          elements: element2.points.length < 2 || isInvisiblySmallElement(element2) ? elements.map((el) => {
+            if (el.id === element2.id) {
+              return newElementWith4(el, { isDeleted: true });
+            }
+            return el;
+          }) : void 0,
           appState: {
             ...appState,
             cursorButton: "up",
@@ -7924,7 +7950,12 @@ var actionFinalize = register({
         }
       }
       if (element && isInvisiblySmallElement(element)) {
-        newElements = newElements.filter((el) => el.id !== element.id);
+        newElements = newElements.map((el) => {
+          if (el.id === element?.id) {
+            return newElementWith4(el, { isDeleted: true });
+          }
+          return el;
+        });
       }
       if (isLinearElement3(element) || isFreeDrawElement(element)) {
         const isLoop = isPathALoop(element.points, appState.zoom.value);
@@ -7969,13 +8000,13 @@ var actionFinalize = register({
     if (appState.activeTool.type === "eraser") {
       activeTool = updateActiveTool4(appState, {
         ...appState.activeTool.lastActiveTool || {
-          type: "selection"
+          type: app.defaultSelectionTool
         },
         lastActiveToolBeforeEraser: null
       });
     } else {
       activeTool = updateActiveTool4(appState, {
-        type: "selection"
+        type: app.defaultSelectionTool
       });
     }
     return {
@@ -8156,7 +8187,8 @@ import {
   MIME_TYPES as MIME_TYPES2,
   arrayToMap as arrayToMap5,
   isMemberOf,
-  isPromiseLike as isPromiseLike2
+  isPromiseLike as isPromiseLike2,
+  EVENT as EVENT5
 } from "@excalidraw/common";
 import { mutateElement } from "@excalidraw/element";
 import { deepCopyElement } from "@excalidraw/element";
@@ -8535,7 +8567,7 @@ var createPasteEvent = ({
   if (!types && !files) {
     console.warn("createPasteEvent: no types or files provided");
   }
-  const event = new ClipboardEvent("paste", {
+  const event = new ClipboardEvent(EVENT5.PASTE, {
     clipboardData: new DataTransfer()
   });
   if (types) {
@@ -8543,10 +8575,11 @@ var createPasteEvent = ({
       if (typeof value !== "string") {
         files = files || [];
         files.push(value);
+        event.clipboardData?.items.add(value);
         continue;
       }
       try {
-        event.clipboardData?.setData(type, value);
+        event.clipboardData?.items.add(value, type);
         if (event.clipboardData?.getData(type) !== value) {
           throw new Error(`Failed to set "${type}" as clipboardData item`);
         }
@@ -8644,11 +8677,8 @@ function parseHTMLTree(el) {
   }
   return result;
 }
-var maybeParseHTMLPaste = (event) => {
-  const html = event.clipboardData?.getData(MIME_TYPES2.html);
-  if (!html) {
-    return null;
-  }
+var maybeParseHTMLDataItem = (dataItem) => {
+  const html = dataItem.value;
   try {
     const doc = new DOMParser().parseFromString(html, MIME_TYPES2.html);
     const content = parseHTMLTree(doc.body);
@@ -8721,27 +8751,90 @@ var readSystemClipboard = async () => {
   }
   return types;
 };
-var parseClipboardEventTextData = async (event, isPlainPaste = false) => {
+var parseClipboardEventTextData = async (dataList, isPlainPaste = false) => {
   try {
-    const mixedContent = !isPlainPaste && event && maybeParseHTMLPaste(event);
+    const htmlItem = dataList.findByType(MIME_TYPES2.html);
+    const mixedContent = !isPlainPaste && htmlItem && maybeParseHTMLDataItem(htmlItem);
     if (mixedContent) {
       if (mixedContent.value.every((item) => item.type === "text")) {
         return {
           type: "text",
-          value: event.clipboardData?.getData(MIME_TYPES2.text) || mixedContent.value.map((item) => item.value).join("\n").trim()
+          value: dataList.getData(MIME_TYPES2.text) ?? mixedContent.value.map((item) => item.value).join("\n").trim()
         };
       }
       return mixedContent;
     }
-    const text = event.clipboardData?.getData(MIME_TYPES2.text);
-    return { type: "text", value: (text || "").trim() };
+    return {
+      type: "text",
+      value: (dataList.getData(MIME_TYPES2.text) || "").trim()
+    };
   } catch {
     return { type: "text", value: "" };
   }
 };
-var parseClipboard = async (event, isPlainPaste = false) => {
+var findDataTransferItemType = function(type) {
+  return this.find(
+    (item) => item.type === type
+  ) || null;
+};
+var getDataTransferItemData = function(type) {
+  const item = this.find(
+    (item2) => item2.type === type
+  );
+  return item?.value ?? null;
+};
+var getDataTransferFiles = function() {
+  return this.filter(
+    (item) => item.kind === "file"
+  );
+};
+var parseDataTransferEvent = async (event) => {
+  let items = void 0;
+  if (isClipboardEvent(event)) {
+    items = event.clipboardData?.items;
+  } else {
+    const dragEvent = event;
+    items = dragEvent.dataTransfer?.items;
+  }
+  const dataItems = (await Promise.all(
+    Array.from(items || []).map(
+      async (item) => {
+        if (item.kind === "file") {
+          const file2 = item.getAsFile();
+          if (file2) {
+            const fileHandle = await getFileHandle(item);
+            return {
+              type: file2.type,
+              kind: "file",
+              file: await normalizeFile(file2),
+              fileHandle
+            };
+          }
+        } else if (item.kind === "string") {
+          const { type } = item;
+          let value;
+          if ("clipboardData" in event && event.clipboardData) {
+            value = event.clipboardData?.getData(type);
+          } else {
+            value = await new Promise((resolve) => {
+              item.getAsString((str) => resolve(str));
+            });
+          }
+          return { type, kind: "string", value };
+        }
+        return null;
+      }
+    )
+  )).filter((data) => data != null);
+  return Object.assign(dataItems, {
+    findByType: findDataTransferItemType,
+    getData: getDataTransferItemData,
+    getFiles: getDataTransferFiles
+  });
+};
+var parseClipboard = async (dataList, isPlainPaste = false) => {
   const parsedEventData = await parseClipboardEventTextData(
-    event,
+    dataList,
     isPlainPaste
   );
   if (parsedEventData.type === "mixedContent") {
@@ -8843,6 +8936,9 @@ var copyTextViaExecCommand = (text) => {
   textarea.remove();
   return success;
 };
+var isClipboardEvent = (event) => {
+  return event.type === EVENT5.PASTE || event.type === EVENT5.COPY || event.type === EVENT5.CUT;
+};
 
 // data/index.ts
 var prepareElementsForExport = (elements, { selectedElementIds }, exportSelectionOnly) => {
@@ -8936,7 +9032,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-V3RGFWEQ.js").then(
+        (blob2) => import("./data/image-VTYIFRQE.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -9277,7 +9373,7 @@ import {
   KEYS as KEYS16,
   getLineHeight as getLineHeight2
 } from "@excalidraw/common";
-import { newElementWith as newElementWith4 } from "@excalidraw/element";
+import { newElementWith as newElementWith5 } from "@excalidraw/element";
 import {
   hasBoundTextElement,
   canApplyRoundnessTypeToElement,
@@ -9348,7 +9444,7 @@ var actionPasteStyles = register({
           if (!elementStylesToCopyFrom) {
             return element;
           }
-          let newElement6 = newElementWith4(element, {
+          let newElement6 = newElementWith5(element, {
             backgroundColor: elementStylesToCopyFrom?.backgroundColor,
             strokeWidth: elementStylesToCopyFrom?.strokeWidth,
             strokeColor: elementStylesToCopyFrom?.strokeColor,
@@ -9364,7 +9460,7 @@ var actionPasteStyles = register({
           if (isTextElement3(newElement6)) {
             const fontSize = elementStylesToCopyFrom.fontSize || DEFAULT_FONT_SIZE3;
             const fontFamily = elementStylesToCopyFrom.fontFamily || DEFAULT_FONT_FAMILY3;
-            newElement6 = newElementWith4(newElement6, {
+            newElement6 = newElementWith5(newElement6, {
               fontSize,
               fontFamily,
               textAlign: elementStylesToCopyFrom.textAlign || DEFAULT_TEXT_ALIGN,
@@ -9379,13 +9475,13 @@ var actionPasteStyles = register({
             redrawTextBoundingBox2(newElement6, container, app.scene);
           }
           if (newElement6.type === "arrow" && isArrowElement2(elementStylesToCopyFrom)) {
-            newElement6 = newElementWith4(newElement6, {
+            newElement6 = newElementWith5(newElement6, {
               startArrowhead: elementStylesToCopyFrom.startArrowhead,
               endArrowhead: elementStylesToCopyFrom.endArrowhead
             });
           }
           if (isFrameLikeElement4(element)) {
-            newElement6 = newElementWith4(newElement6, {
+            newElement6 = newElementWith5(newElement6, {
               roundness: null,
               backgroundColor: "transparent"
             });
@@ -9479,7 +9575,7 @@ var actionShortcuts = register({
 
 // actions/actionGroup.tsx
 import { getNonDeletedElements as getNonDeletedElements9 } from "@excalidraw/element";
-import { newElementWith as newElementWith5 } from "@excalidraw/element";
+import { newElementWith as newElementWith6 } from "@excalidraw/element";
 import { isBoundToContainer as isBoundToContainer3 } from "@excalidraw/element";
 import {
   frameAndChildrenSelectedTogether,
@@ -9583,7 +9679,7 @@ var actionGroup = register({
       if (!selectElementIds.get(element.id)) {
         return element;
       }
-      return newElementWith5(element, {
+      return newElementWith6(element, {
         groupIds: addToGroup(
           element.groupIds,
           newGroupId,
@@ -9660,7 +9756,7 @@ var actionUngroup = register({
       if (nextGroupIds.length === element.groupIds.length) {
         return element;
       }
-      return newElementWith5(element, {
+      return newElementWith6(element, {
         groupIds: nextGroupIds
       });
     });
@@ -10459,7 +10555,7 @@ import {
   isBindingEnabled as isBindingEnabled2
 } from "@excalidraw/element";
 import { getCommonBoundingBox } from "@excalidraw/element";
-import { newElementWith as newElementWith6 } from "@excalidraw/element";
+import { newElementWith as newElementWith7 } from "@excalidraw/element";
 import { deepCopyElement as deepCopyElement3 } from "@excalidraw/element";
 import { resizeMultipleElements } from "@excalidraw/element";
 import {
@@ -10545,7 +10641,7 @@ var flipElements = (selectedElements, elementsMap, appState, flipDirection, app)
   )) {
     return selectedElements.map((element) => {
       const _element = element;
-      return newElementWith6(_element, {
+      return newElementWith7(_element, {
         startArrowhead: _element.endArrowhead,
         endArrowhead: _element.startArrowhead
       });
@@ -11222,7 +11318,7 @@ import {
   useRef as useRef12,
   useState as useState9
 } from "react";
-import { EVENT as EVENT5, HYPERLINK_TOOLTIP_DELAY, KEYS as KEYS27 } from "@excalidraw/common";
+import { EVENT as EVENT6, HYPERLINK_TOOLTIP_DELAY, KEYS as KEYS27 } from "@excalidraw/common";
 import { getElementAbsoluteCoords } from "@excalidraw/element";
 import { hitElementBoundingBox } from "@excalidraw/element";
 import { isElementLink } from "@excalidraw/element";
@@ -11353,9 +11449,9 @@ var Hyperlink = ({
         }, AUTO_HIDE_TIMEOUT);
       }
     };
-    window.addEventListener(EVENT5.POINTER_MOVE, handlePointerMove, false);
+    window.addEventListener(EVENT6.POINTER_MOVE, handlePointerMove, false);
     return () => {
-      window.removeEventListener(EVENT5.POINTER_MOVE, handlePointerMove, false);
+      window.removeEventListener(EVENT6.POINTER_MOVE, handlePointerMove, false);
       if (timeoutId) {
         clearTimeout(timeoutId);
       }
@@ -11414,7 +11510,7 @@ var Hyperlink = ({
             onClick: (event) => {
               if (element.link && onLinkOpen) {
                 const customEvent = wrapEvent(
-                  EVENT5.EXCALIDRAW_LINK,
+                  EVENT6.EXCALIDRAW_LINK,
                   event.nativeEvent
                 );
                 onLinkOpen(
@@ -11616,7 +11712,7 @@ var actionLink = register({
 import { KEYS as KEYS29, arrayToMap as arrayToMap11, randomId as randomId4 } from "@excalidraw/common";
 import {
   elementsAreInSameGroup,
-  newElementWith as newElementWith7,
+  newElementWith as newElementWith8,
   selectGroupsFromGivenElements
 } from "@excalidraw/element";
 import { CaptureUpdateAction as CaptureUpdateAction25 } from "@excalidraw/element";
@@ -11677,7 +11773,7 @@ var actionToggleElementLock = register({
           (groupId) => !appState.lockedMultiSelections[groupId]
         );
       }
-      return newElementWith7(element, {
+      return newElementWith8(element, {
         locked: nextLockState,
         // do not recreate the array unncessarily
         groupIds: nextGroupIds.length !== element.groupIds.length ? nextGroupIds : element.groupIds
@@ -11726,7 +11822,7 @@ var actionUnlockAllElements = register({
         const nextGroupIds = element.groupIds.filter(
           (gid) => !appState.lockedMultiSelections[gid]
         );
-        return newElementWith7(element, {
+        return newElementWith8(element, {
           locked: false,
           groupIds: (
             // do not recreate the array unncessarily
@@ -11778,7 +11874,7 @@ import fuzzy from "fuzzy";
 import { useEffect as useEffect27, useRef as useRef23, useState as useState22 } from "react";
 import {
   DEFAULT_SIDEBAR as DEFAULT_SIDEBAR2,
-  EVENT as EVENT8,
+  EVENT as EVENT9,
   KEYS as KEYS35,
   capitalizeString as capitalizeString2,
   getShortcutKey as getShortcutKey11,
@@ -12813,7 +12909,7 @@ import {
   URL_HASH_KEYS,
   URL_QUERY_KEYS,
   APP_NAME,
-  EVENT as EVENT6,
+  EVENT as EVENT7,
   DEFAULT_SIDEBAR,
   LIBRARY_SIDEBAR_TAB,
   arrayToMap as arrayToMap12,
@@ -12842,7 +12938,8 @@ var exportToCanvas2 = ({
   const { elements: restoredElements, appState: restoredAppState } = restore(
     { elements, appState },
     null,
-    null
+    null,
+    { deleteInvisibleElements: true }
   );
   const { exportBackground, viewBackgroundColor } = restoredAppState;
   return exportToCanvas(
@@ -12936,7 +13033,8 @@ var exportToSvg2 = async ({
   const { elements: restoredElements, appState: restoredAppState } = restore(
     { elements, appState },
     null,
-    null
+    null,
+    { deleteInvisibleElements: true }
   );
   const exportAppState = {
     ...restoredAppState,
@@ -13519,9 +13617,9 @@ var useHandleLibrary = (opts) => {
         isLibraryLoadedRef.current = true;
       });
     }
-    window.addEventListener(EVENT6.HASHCHANGE, onHashChange);
+    window.addEventListener(EVENT7.HASHCHANGE, onHashChange);
     return () => {
-      window.removeEventListener(EVENT6.HASHCHANGE, onHashChange);
+      window.removeEventListener(EVENT7.HASHCHANGE, onHashChange);
     };
   }, [
     // important this useEffect only depends on excalidrawAPI so it only reruns
@@ -13566,9 +13664,9 @@ var useHandleLibrary = (opts) => {
           preventUnload(event);
         }
       };
-      window.addEventListener(EVENT6.BEFORE_UNLOAD, onUnload);
+      window.addEventListener(EVENT7.BEFORE_UNLOAD, onUnload);
       return () => {
-        window.removeEventListener(EVENT6.BEFORE_UNLOAD, onUnload);
+        window.removeEventListener(EVENT7.BEFORE_UNLOAD, onUnload);
         unsubOnLibraryUpdate();
         lastSavedLibraryItemsHash = 0;
         librarySaveCounter = 0;
@@ -14353,7 +14451,7 @@ var PublishLibrary_default = PublishLibrary;
 // components/dropdownMenu/DropdownMenuContent.tsx
 import clsx23 from "clsx";
 import { useEffect as useEffect21, useRef as useRef16 } from "react";
-import { EVENT as EVENT7, KEYS as KEYS30 } from "@excalidraw/common";
+import { EVENT as EVENT8, KEYS as KEYS30 } from "@excalidraw/common";
 
 // components/Stack.tsx
 import { forwardRef as forwardRef2 } from "react";
@@ -14427,9 +14525,9 @@ var MenuContent = ({
       // event handlers that were bound before this one
       capture: true
     };
-    document.addEventListener(EVENT7.KEYDOWN, onKeyDown, option);
+    document.addEventListener(EVENT8.KEYDOWN, onKeyDown, option);
     return () => {
-      document.removeEventListener(EVENT7.KEYDOWN, onKeyDown, option);
+      document.removeEventListener(EVENT8.KEYDOWN, onKeyDown, option);
     };
   }, [callbacksRef]);
   const classNames = clsx23(`dropdown-menu ${className}`, {
@@ -14893,7 +14991,7 @@ var LibraryUnit = memo(
       };
     }, [svg]);
     const [isHovered, setIsHovered] = useState15(false);
-    const isMobile = useDevice().editor.isMobile;
+    const isMobile2 = useDevice().editor.isMobile;
     const adder = isPending && /* @__PURE__ */ jsx63("div", { className: "library-unit__adder", children: PlusIcon });
     return /* @__PURE__ */ jsxs33(
       "div",
@@ -14933,7 +15031,7 @@ var LibraryUnit = memo(
             }
           ),
           adder,
-          id && elements && (isHovered || isMobile || selected) && /* @__PURE__ */ jsx63(
+          id && elements && (isHovered || isMobile2 || selected) && /* @__PURE__ */ jsx63(
             CheckboxItem,
             {
               checked: selected,
@@ -15766,8 +15864,20 @@ var SHAPES = [
     fillable: false
   }
 ];
-var findShapeByKey = (key) => {
-  const shape = SHAPES.find((shape2, index) => {
+var getToolbarTools = (app) => {
+  return app.defaultSelectionTool === "lasso" ? [
+    {
+      value: "lasso",
+      icon: SelectionIcon,
+      key: KEYS33.V,
+      numericKey: KEYS33["1"],
+      fillable: true
+    },
+    ...SHAPES.slice(1)
+  ] : SHAPES;
+};
+var findShapeByKey = (key, app) => {
+  const shape = getToolbarTools(app).find((shape2, index) => {
     return shape2.numericKey != null && key === shape2.numericKey.toString() || shape2.key && (typeof shape2.key === "string" ? shape2.key === key : shape2.key.includes(key));
   });
   return shape?.value || null;
@@ -15943,58 +16053,60 @@ var ShapesSwitcher = ({
   const [isExtraToolsMenuOpen, setIsExtraToolsMenuOpen] = useState21(false);
   const frameToolSelected = activeTool.type === "frame";
   const laserToolSelected = activeTool.type === "laser";
-  const lassoToolSelected = activeTool.type === "lasso";
+  const lassoToolSelected = activeTool.type === "lasso" && app.defaultSelectionTool !== "lasso";
   const embeddableToolSelected = activeTool.type === "embeddable";
   const { TTDDialogTriggerTunnel } = useTunnels();
   return /* @__PURE__ */ jsxs39(Fragment11, { children: [
-    SHAPES.map(({ value, icon, key, numericKey, fillable }, index) => {
-      if (UIOptions.tools?.[value] === false) {
-        return null;
-      }
-      const label = t(`toolBar.${value}`);
-      const letter = key && capitalizeString(typeof key === "string" ? key : key[0]);
-      const shortcut = letter ? `${letter} ${t("helpDialog.or")} ${numericKey}` : `${numericKey}`;
-      return /* @__PURE__ */ jsx71(
-        ToolButton,
-        {
-          className: clsx31("Shape", { fillable }),
-          type: "radio",
-          icon,
-          checked: activeTool.type === value,
-          name: "editor-current-shape",
-          title: `${capitalizeString(label)} \u2014 ${shortcut}`,
-          keyBindingLabel: numericKey || letter,
-          "aria-label": capitalizeString(label),
-          "aria-keyshortcuts": shortcut,
-          "data-testid": `toolbar-${value}`,
-          onPointerDown: ({ pointerType }) => {
-            if (!appState.penDetected && pointerType === "pen") {
-              app.togglePenMode(true);
-            }
-            if (value === "selection") {
-              if (appState.activeTool.type === "selection") {
-                app.setActiveTool({ type: "lasso" });
+    getToolbarTools(app).map(
+      ({ value, icon, key, numericKey, fillable }, index) => {
+        if (UIOptions.tools?.[value] === false) {
+          return null;
+        }
+        const label = t(`toolBar.${value}`);
+        const letter = key && capitalizeString(typeof key === "string" ? key : key[0]);
+        const shortcut = letter ? `${letter} ${t("helpDialog.or")} ${numericKey}` : `${numericKey}`;
+        return /* @__PURE__ */ jsx71(
+          ToolButton,
+          {
+            className: clsx31("Shape", { fillable }),
+            type: "radio",
+            icon,
+            checked: activeTool.type === value,
+            name: "editor-current-shape",
+            title: `${capitalizeString(label)} \u2014 ${shortcut}`,
+            keyBindingLabel: numericKey || letter,
+            "aria-label": capitalizeString(label),
+            "aria-keyshortcuts": shortcut,
+            "data-testid": `toolbar-${value}`,
+            onPointerDown: ({ pointerType }) => {
+              if (!appState.penDetected && pointerType === "pen") {
+                app.togglePenMode(true);
+              }
+              if (value === "selection") {
+                if (appState.activeTool.type === "selection") {
+                  app.setActiveTool({ type: "lasso" });
+                } else {
+                  app.setActiveTool({ type: "selection" });
+                }
+              }
+            },
+            onChange: ({ pointerType }) => {
+              if (appState.activeTool.type !== value) {
+                trackEvent("toolbar", value, "ui");
+              }
+              if (value === "image") {
+                app.setActiveTool({
+                  type: value
+                });
               } else {
-                app.setActiveTool({ type: "selection" });
+                app.setActiveTool({ type: value });
               }
             }
           },
-          onChange: ({ pointerType }) => {
-            if (appState.activeTool.type !== value) {
-              trackEvent("toolbar", value, "ui");
-            }
-            if (value === "image") {
-              app.setActiveTool({
-                type: value
-              });
-            } else {
-              app.setActiveTool({ type: value });
-            }
-          }
-        },
-        value
-      );
-    }),
+          value
+        );
+      }
+    ),
     /* @__PURE__ */ jsx71("div", { className: "App-toolbar__divider" }),
     /* @__PURE__ */ jsxs39(DropdownMenu_default, { open: isExtraToolsMenuOpen, children: [
       /* @__PURE__ */ jsx71(
@@ -16050,7 +16162,7 @@ var ShapesSwitcher = ({
                 children: t("toolBar.laser")
               }
             ),
-            /* @__PURE__ */ jsx71(
+            app.defaultSelectionTool !== "lasso" && /* @__PURE__ */ jsx71(
               DropdownMenu_default.Item,
               {
                 onSelect: () => app.setActiveTool({ type: "lasso" }),
@@ -16243,10 +16355,10 @@ var CommandPalette = Object.assign(
           });
         }
       };
-      window.addEventListener(EVENT8.KEYDOWN, commandPaletteShortcut, {
+      window.addEventListener(EVENT9.KEYDOWN, commandPaletteShortcut, {
         capture: true
       });
-      return () => window.removeEventListener(EVENT8.KEYDOWN, commandPaletteShortcut, {
+      return () => window.removeEventListener(EVENT9.KEYDOWN, commandPaletteShortcut, {
         capture: true
       });
     }, [setAppState]);
@@ -16740,10 +16852,10 @@ function CommandPaletteInner({
     event.preventDefault();
   });
   useEffect27(() => {
-    window.addEventListener(EVENT8.KEYDOWN, handleKeyDown, {
+    window.addEventListener(EVENT9.KEYDOWN, handleKeyDown, {
       capture: true
     });
-    return () => window.removeEventListener(EVENT8.KEYDOWN, handleKeyDown, {
+    return () => window.removeEventListener(EVENT9.KEYDOWN, handleKeyDown, {
       capture: true
     });
   }, [handleKeyDown]);
@@ -16954,9 +17066,9 @@ var getCurvePathOps = (shape) => {
 
 // ../element/src/shape.ts
 import {
-  pointFrom as pointFrom17,
+  pointFrom as pointFrom18,
   pointDistance as pointDistance7,
-  pointRotateRads as pointRotateRads11
+  pointRotateRads as pointRotateRads12
 } from "@excalidraw/math";
 import {
   ROUGHNESS,
@@ -16996,17 +17108,17 @@ import {
   degreesToRadians,
   lineSegment as lineSegment5,
   pointDistance as pointDistance6,
-  pointFrom as pointFrom13,
+  pointFrom as pointFrom14,
   pointFromArray as pointFromArray3,
-  pointRotateRads as pointRotateRads8
+  pointRotateRads as pointRotateRads9
 } from "@excalidraw/math";
 import { pointsOnBezierCurves as pointsOnBezierCurves2 } from "points-on-curve";
 
 // ../element/src/linearElementEditor.ts
 import {
   pointCenter,
-  pointFrom as pointFrom12,
-  pointRotateRads as pointRotateRads7,
+  pointFrom as pointFrom13,
+  pointRotateRads as pointRotateRads8,
   pointsEqual as pointsEqual7,
   pointDistance as pointDistance5,
   vectorFromPoint as vectorFromPoint6,
@@ -17039,8 +17151,8 @@ import {
 } from "@excalidraw/common";
 import {
   lineSegment as lineSegment4,
-  pointFrom as pointFrom11,
-  pointRotateRads as pointRotateRads6,
+  pointFrom as pointFrom12,
+  pointRotateRads as pointRotateRads7,
   vectorFromPoint as vectorFromPoint5,
   pointDistanceSq,
   clamp as clamp3,
@@ -17061,9 +17173,9 @@ import {
   isPointWithinBounds,
   lineSegment as lineSegment3,
   lineSegmentIntersectionPoints,
-  pointFrom as pointFrom8,
+  pointFrom as pointFrom9,
   pointFromVector as pointFromVector2,
-  pointRotateRads as pointRotateRads4,
+  pointRotateRads as pointRotateRads5,
   pointsEqual as pointsEqual2,
   vectorFromPoint as vectorFromPoint2,
   vectorNormalize,
@@ -17160,6 +17272,7 @@ import {
   isProdEnv as isProdEnv2,
   invariant as invariant2
 } from "@excalidraw/common";
+import { pointFrom as pointFrom8, pointRotateRads as pointRotateRads3 } from "@excalidraw/math";
 
 // ../element/src/textMeasurements.ts
 import {
@@ -17179,16 +17292,16 @@ import { isDevEnv as isDevEnv4, isTestEnv as isTestEnv2 } from "@excalidraw/comm
 import {
   curvePointDistance,
   distanceToLineSegment,
-  pointRotateRads as pointRotateRads3
+  pointRotateRads as pointRotateRads4
 } from "@excalidraw/math";
 import { ellipse, ellipseDistanceFromPoint } from "@excalidraw/math/ellipse";
 
 // ../element/src/heading.ts
 import { invariant as invariant3, isDevEnv as isDevEnv5, isTestEnv as isTestEnv3 } from "@excalidraw/common";
 import {
-  pointFrom as pointFrom9,
+  pointFrom as pointFrom10,
   pointFromVector as pointFromVector3,
-  pointRotateRads as pointRotateRads5,
+  pointRotateRads as pointRotateRads6,
   pointScaleFromOrigin,
   pointsEqual as pointsEqual3,
   triangleIncludesPoint,
@@ -17222,7 +17335,7 @@ var headingIsHorizontal = (a) => compareHeading(a, HEADING_RIGHT) || compareHead
 import {
   clamp as clamp2,
   pointDistance as pointDistance3,
-  pointFrom as pointFrom10,
+  pointFrom as pointFrom11,
   pointScaleFromOrigin as pointScaleFromOrigin2,
   pointsEqual as pointsEqual4,
   pointTranslate,
@@ -17301,17 +17414,17 @@ var getArrowheadPoints = (element, shape, position, arrowhead) => {
   const index = position === "start" ? 1 : ops.length - 1;
   const data = ops[index].data;
   invariant7(data.length === 6, "Op data length is not 6");
-  const p3 = pointFrom13(data[4], data[5]);
-  const p2 = pointFrom13(data[2], data[3]);
-  const p1 = pointFrom13(data[0], data[1]);
+  const p3 = pointFrom14(data[4], data[5]);
+  const p2 = pointFrom14(data[2], data[3]);
+  const p1 = pointFrom14(data[0], data[1]);
   const prevOp = ops[index - 1];
-  let p0 = pointFrom13(0, 0);
+  let p0 = pointFrom14(0, 0);
   if (prevOp.op === "move") {
     const p = pointFromArray3(prevOp.data);
     invariant7(p != null, "Op data is not a point");
     p0 = p;
   } else if (prevOp.op === "bcurveTo") {
-    p0 = pointFrom13(prevOp.data[4], prevOp.data[5]);
+    p0 = pointFrom14(prevOp.data[4], prevOp.data[5]);
   }
   const equation = (t2, idx) => Math.pow(1 - t2, 3) * p3[idx] + 3 * t2 * Math.pow(1 - t2, 2) * p2[idx] + 3 * Math.pow(t2, 2) * (1 - t2) * p1[idx] + p0[idx] * Math.pow(t2, 3);
   const [x2, y2] = position === "start" ? p0 : p3;
@@ -17336,26 +17449,26 @@ var getArrowheadPoints = (element, shape, position, arrowhead) => {
   }
   const angle = getArrowheadAngle(arrowhead);
   if (arrowhead === "crowfoot_many" || arrowhead === "crowfoot_one_or_many") {
-    const [x32, y32] = pointRotateRads8(
-      pointFrom13(x2, y2),
-      pointFrom13(xs, ys),
+    const [x32, y32] = pointRotateRads9(
+      pointFrom14(x2, y2),
+      pointFrom14(xs, ys),
       degreesToRadians(-angle)
     );
-    const [x42, y42] = pointRotateRads8(
-      pointFrom13(x2, y2),
-      pointFrom13(xs, ys),
+    const [x42, y42] = pointRotateRads9(
+      pointFrom14(x2, y2),
+      pointFrom14(xs, ys),
       degreesToRadians(angle)
     );
     return [xs, ys, x32, y32, x42, y42];
   }
-  const [x3, y3] = pointRotateRads8(
-    pointFrom13(xs, ys),
-    pointFrom13(x2, y2),
+  const [x3, y3] = pointRotateRads9(
+    pointFrom14(xs, ys),
+    pointFrom14(x2, y2),
     -angle * Math.PI / 180
   );
-  const [x4, y4] = pointRotateRads8(
-    pointFrom13(xs, ys),
-    pointFrom13(x2, y2),
+  const [x4, y4] = pointRotateRads9(
+    pointFrom14(xs, ys),
+    pointFrom14(x2, y2),
     degreesToRadians(angle)
   );
   if (arrowhead === "diamond" || arrowhead === "diamond_outline") {
@@ -17363,16 +17476,16 @@ var getArrowheadPoints = (element, shape, position, arrowhead) => {
     let oy;
     if (position === "start") {
       const [px, py] = element.points.length > 1 ? element.points[1] : [0, 0];
-      [ox, oy] = pointRotateRads8(
-        pointFrom13(x2 + minSize * 2, y2),
-        pointFrom13(x2, y2),
+      [ox, oy] = pointRotateRads9(
+        pointFrom14(x2 + minSize * 2, y2),
+        pointFrom14(x2, y2),
         Math.atan2(py - y2, px - x2)
       );
     } else {
       const [px, py] = element.points.length > 1 ? element.points[element.points.length - 2] : [0, 0];
-      [ox, oy] = pointRotateRads8(
-        pointFrom13(x2 - minSize * 2, y2),
-        pointFrom13(x2, y2),
+      [ox, oy] = pointRotateRads9(
+        pointFrom14(x2 - minSize * 2, y2),
+        pointFrom14(x2, y2),
         Math.atan2(y2 - py, x2 - px)
       );
     }
@@ -17383,9 +17496,9 @@ var getArrowheadPoints = (element, shape, position, arrowhead) => {
 
 // ../element/src/cropElement.ts
 import {
-  pointFrom as pointFrom14,
+  pointFrom as pointFrom15,
   pointCenter as pointCenter2,
-  pointRotateRads as pointRotateRads9,
+  pointRotateRads as pointRotateRads10,
   vectorFromPoint as vectorFromPoint7,
   vectorNormalize as vectorNormalize3,
   vectorSubtract,
@@ -17398,7 +17511,7 @@ import {
 
 // ../element/src/frame.ts
 import { arrayToMap as arrayToMap19 } from "@excalidraw/common";
-import { isPointWithinBounds as isPointWithinBounds2, pointFrom as pointFrom16 } from "@excalidraw/math";
+import { isPointWithinBounds as isPointWithinBounds2, pointFrom as pointFrom17 } from "@excalidraw/math";
 
 // ../utils/src/bbox.ts
 import {
@@ -17418,24 +17531,24 @@ import {
 } from "@excalidraw/element";
 import {
   rangeIncludesValue,
-  pointFrom as pointFrom15,
-  pointRotateRads as pointRotateRads10,
+  pointFrom as pointFrom16,
+  pointRotateRads as pointRotateRads11,
   rangeInclusive
 } from "@excalidraw/math";
 var getNonLinearElementRelativePoints = (element) => {
   if (element.type === "diamond") {
     return [
-      pointFrom15(element.width / 2, 0),
-      pointFrom15(element.width, element.height / 2),
-      pointFrom15(element.width / 2, element.height),
-      pointFrom15(0, element.height / 2)
+      pointFrom16(element.width / 2, 0),
+      pointFrom16(element.width, element.height / 2),
+      pointFrom16(element.width / 2, element.height),
+      pointFrom16(0, element.height / 2)
     ];
   }
   return [
-    pointFrom15(0, 0),
-    pointFrom15(0 + element.width, 0),
-    pointFrom15(0 + element.width, element.height),
-    pointFrom15(0, element.height)
+    pointFrom16(0, 0),
+    pointFrom16(0 + element.width, 0),
+    pointFrom16(0 + element.width, element.height),
+    pointFrom16(0, element.height)
   ];
 };
 var getElementRelativePoints = (element) => {
@@ -17469,9 +17582,9 @@ var getMinMaxPoints = (points) => {
 var getRotatedBBox = (element) => {
   const points = getElementRelativePoints(element);
   const { cx, cy } = getMinMaxPoints(points);
-  const centerPoint = pointFrom15(cx, cy);
+  const centerPoint = pointFrom16(cx, cy);
   const rotatedPoints = points.map(
-    (p) => pointRotateRads10(p, centerPoint, element.angle)
+    (p) => pointRotateRads11(p, centerPoint, element.angle)
   );
   const { minX, minY, maxX, maxY } = getMinMaxPoints(rotatedPoints);
   return [
@@ -18080,7 +18193,7 @@ var generateElementShape = (element, generator, {
     case "arrow": {
       let shape;
       const options = generateRoughOptions(element);
-      const points = element.points.length ? element.points : [pointFrom17(0, 0)];
+      const points = element.points.length ? element.points : [pointFrom18(0, 0)];
       if (isElbowArrow6(element)) {
         if (!points.every(
           (point) => Math.abs(point[0]) <= 1e6 && Math.abs(point[1]) <= 1e6
@@ -18225,7 +18338,7 @@ var generateElbowArrowShape = (points, radius) => {
 };
 
 // ../element/src/mutateElement.ts
-var newElementWith8 = (element, updates, force = false) => {
+var newElementWith9 = (element, updates, force = false) => {
   let didChange = false;
   for (const key in updates) {
     const value = updates[key];
@@ -18354,7 +18467,7 @@ var actionTogglePolygon = register({
         if (!targetElementsMap.has(element.id) || !isLineElement4(element)) {
           return element;
         }
-        return newElementWith8(element, {
+        return newElementWith9(element, {
           backgroundColor: nextPolygonState ? element.backgroundColor : "transparent",
           ...toggleLinePolygonState3(element, nextPolygonState)
         });
@@ -18946,7 +19059,7 @@ var createRedoAction = (history) => ({
 
 // actions/actionTextAutoResize.ts
 import { getFontString as getFontString6 } from "@excalidraw/common";
-import { newElementWith as newElementWith9 } from "@excalidraw/element";
+import { newElementWith as newElementWith10 } from "@excalidraw/element";
 import { measureText as measureText4 } from "@excalidraw/element";
 import { isTextElement as isTextElement9 } from "@excalidraw/element";
 import { CaptureUpdateAction as CaptureUpdateAction34 } from "@excalidraw/element";
@@ -18970,7 +19083,7 @@ var actionTextAutoResize = register({
             getFontString6(element),
             element.lineHeight
           );
-          return newElementWith9(element, {
+          return newElementWith10(element, {
             autoResize: true,
             width: metrics.width,
             height: metrics.height,
@@ -19209,8 +19322,8 @@ var sum = (array, mapper) => array.reduce((acc, item) => acc + mapper(item), 0);
 
 // snapping.ts
 import {
-  pointFrom as pointFrom18,
-  pointRotateRads as pointRotateRads12,
+  pointFrom as pointFrom19,
+  pointRotateRads as pointRotateRads13,
   rangeInclusive as rangeInclusive2,
   rangeIntersection,
   rangesOverlap
@@ -19260,7 +19373,8 @@ var isSnappingEnabled = ({
   selectedElements
 }) => {
   if (event) {
-    return app.state.activeTool.type !== "lasso" && (app.state.objectsSnapModeEnabled && !event[KEYS42.CTRL_OR_CMD] || !app.state.objectsSnapModeEnabled && event[KEYS42.CTRL_OR_CMD] && !isGridModeEnabled(app));
+    const isLassoDragging = app.state.activeTool.type === "lasso" && app.state.selectedElementsAreBeingDragged;
+    return (app.state.activeTool.type !== "lasso" || isLassoDragging) && (app.state.objectsSnapModeEnabled && !event[KEYS42.CTRL_OR_CMD] || !app.state.objectsSnapModeEnabled && event[KEYS42.CTRL_OR_CMD] && !isGridModeEnabled(app));
   }
   if (selectedElements.length === 1 && selectedElements[0].type === "arrow") {
     return false;
@@ -19296,50 +19410,50 @@ var getElementsCorners = (elements, elementsMap, {
     const halfWidth = (x2 - x1) / 2;
     const halfHeight = (y2 - y1) / 2;
     if ((element.type === "diamond" || element.type === "ellipse") && !boundingBoxCorners) {
-      const leftMid = pointRotateRads12(
-        pointFrom18(x1, y1 + halfHeight),
-        pointFrom18(cx, cy),
+      const leftMid = pointRotateRads13(
+        pointFrom19(x1, y1 + halfHeight),
+        pointFrom19(cx, cy),
         element.angle
       );
-      const topMid = pointRotateRads12(
-        pointFrom18(x1 + halfWidth, y1),
-        pointFrom18(cx, cy),
+      const topMid = pointRotateRads13(
+        pointFrom19(x1 + halfWidth, y1),
+        pointFrom19(cx, cy),
         element.angle
       );
-      const rightMid = pointRotateRads12(
-        pointFrom18(x2, y1 + halfHeight),
-        pointFrom18(cx, cy),
+      const rightMid = pointRotateRads13(
+        pointFrom19(x2, y1 + halfHeight),
+        pointFrom19(cx, cy),
         element.angle
       );
-      const bottomMid = pointRotateRads12(
-        pointFrom18(x1 + halfWidth, y2),
-        pointFrom18(cx, cy),
+      const bottomMid = pointRotateRads13(
+        pointFrom19(x1 + halfWidth, y2),
+        pointFrom19(cx, cy),
         element.angle
       );
-      const center = pointFrom18(cx, cy);
+      const center = pointFrom19(cx, cy);
       result = omitCenter ? [leftMid, topMid, rightMid, bottomMid] : [leftMid, topMid, rightMid, bottomMid, center];
     } else {
-      const topLeft = pointRotateRads12(
-        pointFrom18(x1, y1),
-        pointFrom18(cx, cy),
+      const topLeft = pointRotateRads13(
+        pointFrom19(x1, y1),
+        pointFrom19(cx, cy),
         element.angle
       );
-      const topRight = pointRotateRads12(
-        pointFrom18(x2, y1),
-        pointFrom18(cx, cy),
+      const topRight = pointRotateRads13(
+        pointFrom19(x2, y1),
+        pointFrom19(cx, cy),
         element.angle
       );
-      const bottomLeft = pointRotateRads12(
-        pointFrom18(x1, y2),
-        pointFrom18(cx, cy),
+      const bottomLeft = pointRotateRads13(
+        pointFrom19(x1, y2),
+        pointFrom19(cx, cy),
         element.angle
       );
-      const bottomRight = pointRotateRads12(
-        pointFrom18(x2, y2),
-        pointFrom18(cx, cy),
+      const bottomRight = pointRotateRads13(
+        pointFrom19(x2, y2),
+        pointFrom19(cx, cy),
         element.angle
       );
-      const center = pointFrom18(cx, cy);
+      const center = pointFrom19(cx, cy);
       result = omitCenter ? [topLeft, topRight, bottomLeft, bottomRight] : [topLeft, topRight, bottomLeft, bottomRight, center];
     }
   } else if (elements.length > 1) {
@@ -19349,14 +19463,14 @@ var getElementsCorners = (elements, elementsMap, {
     );
     const width = maxX - minX;
     const height = maxY - minY;
-    const topLeft = pointFrom18(minX, minY);
-    const topRight = pointFrom18(maxX, minY);
-    const bottomLeft = pointFrom18(minX, maxY);
-    const bottomRight = pointFrom18(maxX, maxY);
-    const center = pointFrom18(minX + width / 2, minY + height / 2);
+    const topLeft = pointFrom19(minX, minY);
+    const topRight = pointFrom19(maxX, minY);
+    const bottomLeft = pointFrom19(minX, maxY);
+    const bottomRight = pointFrom19(maxX, maxY);
+    const center = pointFrom19(minX + width / 2, minY + height / 2);
     result = omitCenter ? [topLeft, topRight, bottomLeft, bottomRight] : [topLeft, topRight, bottomLeft, bottomRight, center];
   }
-  return result.map((p) => pointFrom18(round(p[0]), round(p[1])));
+  return result.map((p) => pointFrom19(round(p[0]), round(p[1])));
 };
 var getReferenceElements = (elements, selectedElements, appState, elementsMap) => getVisibleAndNonSelectedElements(
   elements,
@@ -19399,10 +19513,10 @@ var getVisibleGaps = (elements, selectedElements, appState, elementsMap) => {
             startBounds,
             endBounds,
             startSide: [
-              pointFrom18(startMaxX, startMinY),
-              pointFrom18(startMaxX, startMaxY)
+              pointFrom19(startMaxX, startMinY),
+              pointFrom19(startMaxX, startMaxY)
             ],
-            endSide: [pointFrom18(endMinX, endMinY), pointFrom18(endMinX, endMaxY)],
+            endSide: [pointFrom19(endMinX, endMinY), pointFrom19(endMinX, endMaxY)],
             length: endMinX - startMaxX,
             overlap: rangeIntersection(
               rangeInclusive2(startMinY, startMaxY),
@@ -19433,10 +19547,10 @@ var getVisibleGaps = (elements, selectedElements, appState, elementsMap) => {
             startBounds,
             endBounds,
             startSide: [
-              pointFrom18(startMinX, startMaxY),
-              pointFrom18(startMaxX, startMaxY)
+              pointFrom19(startMinX, startMaxY),
+              pointFrom19(startMaxX, startMaxY)
             ],
-            endSide: [pointFrom18(endMinX, endMinY), pointFrom18(endMaxX, endMinY)],
+            endSide: [pointFrom19(endMinX, endMinY), pointFrom19(endMaxX, endMinY)],
             length: endMinY - startMaxY,
             overlap: rangeIntersection(
               rangeInclusive2(startMinX, startMaxX),
@@ -19741,7 +19855,7 @@ var createPointSnapLines = (nearestSnapsX, nearestSnapsY) => {
         }
         snapsX[key].push(
           ...snap.points.map(
-            (p) => pointFrom18(round(p[0]), round(p[1]))
+            (p) => pointFrom19(round(p[0]), round(p[1]))
           )
         );
       }
@@ -19756,7 +19870,7 @@ var createPointSnapLines = (nearestSnapsX, nearestSnapsY) => {
         }
         snapsY[key].push(
           ...snap.points.map(
-            (p) => pointFrom18(round(p[0]), round(p[1]))
+            (p) => pointFrom19(round(p[0]), round(p[1]))
           )
         );
       }
@@ -19767,7 +19881,7 @@ var createPointSnapLines = (nearestSnapsX, nearestSnapsY) => {
       type: "points",
       points: dedupePoints(
         points.map((p) => {
-          return pointFrom18(Number(key), p[1]);
+          return pointFrom19(Number(key), p[1]);
         }).sort((a, b) => a[1] - b[1])
       )
     };
@@ -19777,7 +19891,7 @@ var createPointSnapLines = (nearestSnapsX, nearestSnapsY) => {
         type: "points",
         points: dedupePoints(
           points.map((p) => {
-            return pointFrom18(p[0], Number(key));
+            return pointFrom19(p[0], Number(key));
           }).sort((a, b) => a[0] - b[0])
         )
       };
@@ -19820,16 +19934,16 @@ var createGapSnapLines = (selectedElements, dragOffset, gapSnaps) => {
               type: "gap",
               direction: "horizontal",
               points: [
-                pointFrom18(gapSnap.gap.startSide[0][0], gapLineY),
-                pointFrom18(minX, gapLineY)
+                pointFrom19(gapSnap.gap.startSide[0][0], gapLineY),
+                pointFrom19(minX, gapLineY)
               ]
             },
             {
               type: "gap",
               direction: "horizontal",
               points: [
-                pointFrom18(maxX, gapLineY),
-                pointFrom18(gapSnap.gap.endSide[0][0], gapLineY)
+                pointFrom19(maxX, gapLineY),
+                pointFrom19(gapSnap.gap.endSide[0][0], gapLineY)
               ]
             }
           );
@@ -19844,16 +19958,16 @@ var createGapSnapLines = (selectedElements, dragOffset, gapSnaps) => {
               type: "gap",
               direction: "vertical",
               points: [
-                pointFrom18(gapLineX, gapSnap.gap.startSide[0][1]),
-                pointFrom18(gapLineX, minY)
+                pointFrom19(gapLineX, gapSnap.gap.startSide[0][1]),
+                pointFrom19(gapLineX, minY)
               ]
             },
             {
               type: "gap",
               direction: "vertical",
               points: [
-                pointFrom18(gapLineX, maxY),
-                pointFrom18(gapLineX, gapSnap.gap.endSide[0][1])
+                pointFrom19(gapLineX, maxY),
+                pointFrom19(gapLineX, gapSnap.gap.endSide[0][1])
               ]
             }
           );
@@ -19868,14 +19982,14 @@ var createGapSnapLines = (selectedElements, dragOffset, gapSnaps) => {
               type: "gap",
               direction: "horizontal",
               points: [
-                pointFrom18(startMaxX, gapLineY),
-                pointFrom18(endMinX, gapLineY)
+                pointFrom19(startMaxX, gapLineY),
+                pointFrom19(endMinX, gapLineY)
               ]
             },
             {
               type: "gap",
               direction: "horizontal",
-              points: [pointFrom18(endMaxX, gapLineY), pointFrom18(minX, gapLineY)]
+              points: [pointFrom19(endMaxX, gapLineY), pointFrom19(minX, gapLineY)]
             }
           );
         }
@@ -19889,16 +20003,16 @@ var createGapSnapLines = (selectedElements, dragOffset, gapSnaps) => {
               type: "gap",
               direction: "horizontal",
               points: [
-                pointFrom18(maxX, gapLineY),
-                pointFrom18(startMinX, gapLineY)
+                pointFrom19(maxX, gapLineY),
+                pointFrom19(startMinX, gapLineY)
               ]
             },
             {
               type: "gap",
               direction: "horizontal",
               points: [
-                pointFrom18(startMaxX, gapLineY),
-                pointFrom18(endMinX, gapLineY)
+                pointFrom19(startMaxX, gapLineY),
+                pointFrom19(endMinX, gapLineY)
               ]
             }
           );
@@ -19913,16 +20027,16 @@ var createGapSnapLines = (selectedElements, dragOffset, gapSnaps) => {
               type: "gap",
               direction: "vertical",
               points: [
-                pointFrom18(gapLineX, maxY),
-                pointFrom18(gapLineX, startMinY)
+                pointFrom19(gapLineX, maxY),
+                pointFrom19(gapLineX, startMinY)
               ]
             },
             {
               type: "gap",
               direction: "vertical",
               points: [
-                pointFrom18(gapLineX, startMaxY),
-                pointFrom18(gapLineX, endMinY)
+                pointFrom19(gapLineX, startMaxY),
+                pointFrom19(gapLineX, endMinY)
               ]
             }
           );
@@ -19937,14 +20051,14 @@ var createGapSnapLines = (selectedElements, dragOffset, gapSnaps) => {
               type: "gap",
               direction: "vertical",
               points: [
-                pointFrom18(gapLineX, startMaxY),
-                pointFrom18(gapLineX, endMinY)
+                pointFrom19(gapLineX, startMaxY),
+                pointFrom19(gapLineX, endMinY)
               ]
             },
             {
               type: "gap",
               direction: "vertical",
-              points: [pointFrom18(gapLineX, endMaxY), pointFrom18(gapLineX, minY)]
+              points: [pointFrom19(gapLineX, endMaxY), pointFrom19(gapLineX, minY)]
             }
           );
         }
@@ -19957,7 +20071,7 @@ var createGapSnapLines = (selectedElements, dragOffset, gapSnaps) => {
       return {
         ...gapSnapLine,
         points: gapSnapLine.points.map(
-          (p) => pointFrom18(round(p[0]), round(p[1]))
+          (p) => pointFrom19(round(p[0]), round(p[1]))
         )
       };
     })
@@ -19987,35 +20101,35 @@ var snapResizingElements = (selectedElements, selectedOriginalElements, app, eve
   if (transformHandle) {
     switch (transformHandle) {
       case "e": {
-        selectionSnapPoints.push(pointFrom18(maxX, minY), pointFrom18(maxX, maxY));
+        selectionSnapPoints.push(pointFrom19(maxX, minY), pointFrom19(maxX, maxY));
         break;
       }
       case "w": {
-        selectionSnapPoints.push(pointFrom18(minX, minY), pointFrom18(minX, maxY));
+        selectionSnapPoints.push(pointFrom19(minX, minY), pointFrom19(minX, maxY));
         break;
       }
       case "n": {
-        selectionSnapPoints.push(pointFrom18(minX, minY), pointFrom18(maxX, minY));
+        selectionSnapPoints.push(pointFrom19(minX, minY), pointFrom19(maxX, minY));
         break;
       }
       case "s": {
-        selectionSnapPoints.push(pointFrom18(minX, maxY), pointFrom18(maxX, maxY));
+        selectionSnapPoints.push(pointFrom19(minX, maxY), pointFrom19(maxX, maxY));
         break;
       }
       case "ne": {
-        selectionSnapPoints.push(pointFrom18(maxX, minY));
+        selectionSnapPoints.push(pointFrom19(maxX, minY));
         break;
       }
       case "nw": {
-        selectionSnapPoints.push(pointFrom18(minX, minY));
+        selectionSnapPoints.push(pointFrom19(minX, minY));
         break;
       }
       case "se": {
-        selectionSnapPoints.push(pointFrom18(maxX, maxY));
+        selectionSnapPoints.push(pointFrom19(maxX, maxY));
         break;
       }
       case "sw": {
-        selectionSnapPoints.push(pointFrom18(minX, maxY));
+        selectionSnapPoints.push(pointFrom19(minX, maxY));
         break;
       }
     }
@@ -20048,10 +20162,10 @@ var snapResizingElements = (selectedElements, selectedOriginalElements, app, eve
     (bound) => round(bound)
   );
   const corners = [
-    pointFrom18(x1, y1),
-    pointFrom18(x1, y2),
-    pointFrom18(x2, y1),
-    pointFrom18(x2, y2)
+    pointFrom19(x1, y1),
+    pointFrom19(x1, y2),
+    pointFrom19(x2, y1),
+    pointFrom19(x2, y2)
   ];
   getPointSnaps(
     selectedElements,
@@ -20076,7 +20190,7 @@ var snapNewElement = (newElement6, app, event, origin, dragOffset, elementsMap)
     };
   }
   const selectionSnapPoints = [
-    pointFrom18(origin.x + dragOffset.x, origin.y + dragOffset.y)
+    pointFrom19(origin.x + dragOffset.x, origin.y + dragOffset.y)
   ];
   const snapDistance = getSnapDistance(app.state.zoom.value);
   const minOffset = {
@@ -20151,7 +20265,7 @@ var getSnapLinesAtPointer = (elements, app, pointer, event, elementsMap) => {
         }
         verticalSnapLines.push({
           type: "pointer",
-          points: [corner, pointFrom18(corner[0], pointer.y)],
+          points: [corner, pointFrom19(corner[0], pointer.y)],
           direction: "vertical"
         });
         minOffset.x = offsetX;
@@ -20163,7 +20277,7 @@ var getSnapLinesAtPointer = (elements, app, pointer, event, elementsMap) => {
         }
         horizontalSnapLines.push({
           type: "pointer",
-          points: [corner, pointFrom18(pointer.x, corner[1])],
+          points: [corner, pointFrom19(pointer.x, corner[1])],
           direction: "horizontal"
         });
         minOffset.y = offsetY;
@@ -20183,7 +20297,7 @@ var isActiveToolNonLinearSnappable = (activeToolType) => {
 };
 
 // data/transform.ts
-import { pointFrom as pointFrom19 } from "@excalidraw/math";
+import { pointFrom as pointFrom20 } from "@excalidraw/math";
 import {
   DEFAULT_FONT_FAMILY as DEFAULT_FONT_FAMILY5,
   DEFAULT_FONT_SIZE as DEFAULT_FONT_SIZE6,
@@ -20482,7 +20596,7 @@ var convertToExcalidrawElements = (elementsSkeleton, opts) => {
         excalidrawElement = newLinearElement3({
           width,
           height,
-          points: [pointFrom19(0, 0), pointFrom19(width, height)],
+          points: [pointFrom20(0, 0), pointFrom20(width, height)],
           ...element
         });
         break;
@@ -20494,7 +20608,7 @@ var convertToExcalidrawElements = (elementsSkeleton, opts) => {
           width,
           height,
           endArrowhead: "arrow",
-          points: [pointFrom19(0, 0), pointFrom19(width, height)],
+          points: [pointFrom20(0, 0), pointFrom20(width, height)],
           ...element,
           type: "arrow"
         });
@@ -20710,7 +20824,7 @@ import { memoize, toBrandedType as toBrandedType2 } from "@excalidraw/common";
 
 // renderer/interactiveScene.ts
 import {
-  pointFrom as pointFrom21,
+  pointFrom as pointFrom22,
   pointsEqual as pointsEqual8
 } from "@excalidraw/math";
 import oc2 from "open-color";
@@ -20748,7 +20862,7 @@ import {
 import { getCommonBounds as getCommonBounds7, getElementAbsoluteCoords as getElementAbsoluteCoords6 } from "@excalidraw/element";
 
 // renderer/renderSnaps.ts
-import { pointFrom as pointFrom20 } from "@excalidraw/math";
+import { pointFrom as pointFrom21 } from "@excalidraw/math";
 import { THEME as THEME10 } from "@excalidraw/common";
 var SNAP_COLOR_LIGHT = "#ff6b6b";
 var SNAP_COLOR_DARK = "#ff0000";
@@ -20826,25 +20940,25 @@ var drawGapLine = (from, to, direction, appState, context) => {
     const halfPoint = [(from[0] + to[0]) / 2, from[1]];
     if (!appState.zenModeEnabled) {
       drawLine(
-        pointFrom20(from[0], from[1] - FULL),
-        pointFrom20(from[0], from[1] + FULL),
+        pointFrom21(from[0], from[1] - FULL),
+        pointFrom21(from[0], from[1] + FULL),
         context
       );
     }
     drawLine(
-      pointFrom20(halfPoint[0] - QUARTER, halfPoint[1] - HALF),
-      pointFrom20(halfPoint[0] - QUARTER, halfPoint[1] + HALF),
+      pointFrom21(halfPoint[0] - QUARTER, halfPoint[1] - HALF),
+      pointFrom21(halfPoint[0] - QUARTER, halfPoint[1] + HALF),
       context
     );
     drawLine(
-      pointFrom20(halfPoint[0] + QUARTER, halfPoint[1] - HALF),
-      pointFrom20(halfPoint[0] + QUARTER, halfPoint[1] + HALF),
+      pointFrom21(halfPoint[0] + QUARTER, halfPoint[1] - HALF),
+      pointFrom21(halfPoint[0] + QUARTER, halfPoint[1] + HALF),
       context
     );
     if (!appState.zenModeEnabled) {
       drawLine(
-        pointFrom20(to[0], to[1] - FULL),
-        pointFrom20(to[0], to[1] + FULL),
+        pointFrom21(to[0], to[1] - FULL),
+        pointFrom21(to[0], to[1] + FULL),
         context
       );
       drawLine(from, to, context);
@@ -20853,25 +20967,25 @@ var drawGapLine = (from, to, direction, appState, context) => {
     const halfPoint = [from[0], (from[1] + to[1]) / 2];
     if (!appState.zenModeEnabled) {
       drawLine(
-        pointFrom20(from[0] - FULL, from[1]),
-        pointFrom20(from[0] + FULL, from[1]),
+        pointFrom21(from[0] - FULL, from[1]),
+        pointFrom21(from[0] + FULL, from[1]),
         context
       );
     }
     drawLine(
-      pointFrom20(halfPoint[0] - HALF, halfPoint[1] - QUARTER),
-      pointFrom20(halfPoint[0] + HALF, halfPoint[1] - QUARTER),
+      pointFrom21(halfPoint[0] - HALF, halfPoint[1] - QUARTER),
+      pointFrom21(halfPoint[0] + HALF, halfPoint[1] - QUARTER),
       context
     );
     drawLine(
-      pointFrom20(halfPoint[0] - HALF, halfPoint[1] + QUARTER),
-      pointFrom20(halfPoint[0] + HALF, halfPoint[1] + QUARTER),
+      pointFrom21(halfPoint[0] - HALF, halfPoint[1] + QUARTER),
+      pointFrom21(halfPoint[0] + HALF, halfPoint[1] + QUARTER),
       context
     );
     if (!appState.zenModeEnabled) {
       drawLine(
-        pointFrom20(to[0] - FULL, to[1]),
-        pointFrom20(to[0] + FULL, to[1]),
+        pointFrom21(to[0] - FULL, to[1]),
+        pointFrom21(to[0] + FULL, to[1]),
         context
       );
       drawLine(from, to, context);
@@ -21224,7 +21338,7 @@ var renderLinearPointHandles = (context, appState, element, elementsMap) => {
         renderSingleLinearPoint(
           context,
           appState,
-          pointFrom21(
+          pointFrom22(
             (p[0] + points[idx + 1][0]) / 2,
             (p[1] + points[idx + 1][1]) / 2
           ),
@@ -22169,7 +22283,8 @@ import {
   isWritableElement as isWritableElement2,
   getFontString as getFontString8,
   getFontFamilyString as getFontFamilyString3,
-  isTestEnv as isTestEnv5
+  isTestEnv as isTestEnv5,
+  MIME_TYPES as MIME_TYPES8
 } from "@excalidraw/common";
 import {
   originalContainerCache,
@@ -22304,11 +22419,12 @@ var textWysiwyg = ({
           );
           app.scene.mutateElement(container, { height: targetContainerHeight });
         } else {
-          const { y } = computeBoundTextPosition2(
+          const { x, y } = computeBoundTextPosition2(
             container,
             updatedTextElement,
             elementsMap
           );
+          coordX = x;
           coordY = y;
         }
       }
@@ -22396,12 +22512,14 @@ var textWysiwyg = ({
   updateWysiwygStyle();
   if (onChange) {
     editable.onpaste = async (event) => {
-      const clipboardData = await parseClipboard(event, true);
-      if (!clipboardData.text) {
+      const textItem = (await parseDataTransferEvent(event)).findByType(
+        MIME_TYPES8.text
+      );
+      if (!textItem) {
         return;
       }
-      const data = normalizeText2(clipboardData.text);
-      if (!data) {
+      const text = normalizeText2(textItem.value);
+      if (!text) {
         return;
       }
       const container = getContainerElement3(
@@ -22418,7 +22536,7 @@ var textWysiwyg = ({
           app.scene.getNonDeletedElementsMap()
         );
         const wrappedText = wrapText3(
-          `${editable.value}${data}`,
+          `${editable.value}${text}`,
           font,
           getBoundTextMaxWidth3(container, boundTextElement)
         );
@@ -22720,7 +22838,7 @@ var isMaybeMermaidDefinition = (text) => {
 
 // lasso/index.ts
 import {
-  pointFrom as pointFrom22
+  pointFrom as pointFrom23
 } from "@excalidraw/math";
 import { getElementLineSegments as getElementLineSegments2 } from "@excalidraw/element";
 import { LinearElementEditor as LinearElementEditor11 } from "@excalidraw/element";
@@ -22919,7 +23037,7 @@ var LassoTrail = class extends AnimatedTrail {
       this.updateSelection();
     });
     __publicField(this, "updateSelection", () => {
-      const lassoPath = super.getCurrentTrail()?.originalPoints?.map((p) => pointFrom22(p[0], p[1]));
+      const lassoPath = super.getCurrentTrail()?.originalPoints?.map((p) => pointFrom23(p[0], p[1]));
       const currentCanvasTranslate = {
         scrollX: this.app.state.scrollX,
         scrollY: this.app.state.scrollY,
@@ -22979,7 +23097,7 @@ import {
   intersectElementWithLineSegment as intersectElementWithLineSegment3,
   isPointInElement
 } from "@excalidraw/element";
-import { lineSegment as lineSegment7, pointFrom as pointFrom23 } from "@excalidraw/math";
+import { lineSegment as lineSegment7, pointFrom as pointFrom24 } from "@excalidraw/math";
 import { getElementsInGroup as getElementsInGroup6 } from "@excalidraw/element";
 import { shouldTestInside as shouldTestInside2 } from "@excalidraw/element";
 import { hasBoundTextElement as hasBoundTextElement6, isBoundToContainer as isBoundToContainer7 } from "@excalidraw/element";
@@ -23016,7 +23134,7 @@ var EraserTrail = class extends AnimatedTrail {
     return elementsToEraser;
   }
   updateElementsToBeErased(restoreToErase) {
-    const eraserPath = super.getCurrentTrail()?.originalPoints?.map((p) => pointFrom23(p[0], p[1])) || [];
+    const eraserPath = super.getCurrentTrail()?.originalPoints?.map((p) => pointFrom24(p[0], p[1])) || [];
     if (eraserPath.length < 2) {
       return [];
     }
@@ -23543,7 +23661,7 @@ import { isNodeInFlowchart } from "@excalidraw/element";
 import { jsx as jsx87 } from "react/jsx-runtime";
 var getHints = ({
   appState,
-  isMobile,
+  isMobile: isMobile2,
   device,
   app
 }) => {
@@ -23606,7 +23724,7 @@ var getHints = ({
     if (isGridModeEnabled(app) && appState.selectedElementsAreBeingDragged) {
       return t("hints.disableSnapping");
     }
-    if (!selectedElements.length && !isMobile) {
+    if (!selectedElements.length && !isMobile2) {
       return [t("hints.canvasPanning")];
     }
     if (selectedElements.length === 1) {
@@ -23634,13 +23752,13 @@ var getHints = ({
 };
 var HintViewer = ({
   appState,
-  isMobile,
+  isMobile: isMobile2,
   device,
   app
 }) => {
   const hints = getHints({
     appState,
-    isMobile,
+    isMobile: isMobile2,
     device,
     app
   });
@@ -24260,7 +24378,7 @@ import {
   useImperativeHandle as useImperativeHandle3,
   useCallback as useCallback11
 } from "react";
-import { EVENT as EVENT9, isDevEnv as isDevEnv9, KEYS as KEYS46, updateObject } from "@excalidraw/common";
+import { EVENT as EVENT10, isDevEnv as isDevEnv9, KEYS as KEYS46, updateObject } from "@excalidraw/common";
 
 // components/Sidebar/SidebarHeader.tsx
 import clsx41 from "clsx";
@@ -24498,9 +24616,9 @@ var SidebarInner = forwardRef4(
           closeLibrary();
         }
       };
-      document.addEventListener(EVENT9.KEYDOWN, handleKeyDown);
+      document.addEventListener(EVENT10.KEYDOWN, handleKeyDown);
       return () => {
-        document.removeEventListener(EVENT9.KEYDOWN, handleKeyDown);
+        document.removeEventListener(EVENT10.KEYDOWN, handleKeyDown);
       };
     }, [closeLibrary, docked, device.editor.canFitSidebar]);
     return /* @__PURE__ */ jsx101(
@@ -25284,7 +25402,7 @@ import debounce2 from "lodash.debounce";
 import { Fragment as Fragment17, memo as memo4, useEffect as useEffect32, useMemo as useMemo8, useRef as useRef28, useState as useState28 } from "react";
 import {
   CLASSES as CLASSES5,
-  EVENT as EVENT10,
+  EVENT as EVENT11,
   FONT_FAMILY as FONT_FAMILY4,
   FRAME_STYLE as FRAME_STYLE3,
   getLineHeight as getLineHeight4
@@ -25505,7 +25623,7 @@ var SearchMenu2 = () => {
         }
       }
     };
-    return addEventListener(window, EVENT10.KEYDOWN, eventHandler, {
+    return addEventListener(window, EVENT11.KEYDOWN, eventHandler, {
       capture: true,
       passive: false
     });
@@ -25976,7 +26094,7 @@ import { EDITOR_LS_KEYS as EDITOR_LS_KEYS3, debounce as debounce3, isDevEnv as i
 
 // components/TTDDialog/TTDDialogInput.tsx
 import { useEffect as useEffect33, useRef as useRef29 } from "react";
-import { EVENT as EVENT11, KEYS as KEYS48 } from "@excalidraw/common";
+import { EVENT as EVENT12, KEYS as KEYS48 } from "@excalidraw/common";
 import { jsx as jsx112 } from "react/jsx-runtime";
 var TTDDialogInput = ({
   input,
@@ -26000,9 +26118,9 @@ var TTDDialogInput = ({
         }
       };
       textarea.focus();
-      textarea.addEventListener(EVENT11.KEYDOWN, handleKeyDown);
+      textarea.addEventListener(EVENT12.KEYDOWN, handleKeyDown);
       return () => {
-        textarea.removeEventListener(EVENT11.KEYDOWN, handleKeyDown);
+        textarea.removeEventListener(EVENT12.KEYDOWN, handleKeyDown);
       };
     }
   }, []);
@@ -26701,12 +26819,12 @@ import { updateBindings as updateBindings3 } from "@excalidraw/element";
 // components/Stats/DragInput.tsx
 import clsx50 from "clsx";
 import { useEffect as useEffect36, useRef as useRef33, useState as useState31 } from "react";
-import { EVENT as EVENT12, KEYS as KEYS49, cloneJSON as cloneJSON4 } from "@excalidraw/common";
+import { EVENT as EVENT13, KEYS as KEYS49, cloneJSON as cloneJSON4 } from "@excalidraw/common";
 import { deepCopyElement as deepCopyElement4 } from "@excalidraw/element";
 import { CaptureUpdateAction as CaptureUpdateAction36 } from "@excalidraw/element";
 
 // components/Stats/utils.ts
-import { pointFrom as pointFrom24, pointRotateRads as pointRotateRads13 } from "@excalidraw/math";
+import { pointFrom as pointFrom25, pointRotateRads as pointRotateRads14 } from "@excalidraw/math";
 import { getBoundTextElement as getBoundTextElement9 } from "@excalidraw/element";
 import { isFrameLikeElement as isFrameLikeElement12 } from "@excalidraw/element";
 import {
@@ -26744,16 +26862,16 @@ var moveElement = (newTopLeftX, newTopLeftY, originalElement, scene, originalEle
     originalElement.x + originalElement.width / 2,
     originalElement.y + originalElement.height / 2
   ];
-  const [topLeftX, topLeftY] = pointRotateRads13(
-    pointFrom24(originalElement.x, originalElement.y),
-    pointFrom24(cx, cy),
+  const [topLeftX, topLeftY] = pointRotateRads14(
+    pointFrom25(originalElement.x, originalElement.y),
+    pointFrom25(cx, cy),
     originalElement.angle
   );
   const changeInX = newTopLeftX - topLeftX;
   const changeInY = newTopLeftY - topLeftY;
-  const [x, y] = pointRotateRads13(
-    pointFrom24(newTopLeftX, newTopLeftY),
-    pointFrom24(cx + changeInX, cy + changeInY),
+  const [x, y] = pointRotateRads14(
+    pointFrom25(newTopLeftX, newTopLeftY),
+    pointFrom25(cx + changeInX, cy + changeInY),
     -originalElement.angle
   );
   scene.mutateElement(
@@ -26794,16 +26912,16 @@ var moveElement = (newTopLeftX, newTopLeftY, originalElement, scene, originalEle
         child.x + child.width / 2,
         child.y + child.height / 2
       ];
-      const [childTopLeftX, childTopLeftY] = pointRotateRads13(
-        pointFrom24(child.x, child.y),
-        pointFrom24(childCX, childCY),
+      const [childTopLeftX, childTopLeftY] = pointRotateRads14(
+        pointFrom25(child.x, child.y),
+        pointFrom25(childCX, childCY),
         child.angle
       );
       const childNewTopLeftX = Math.round(childTopLeftX + changeInX);
       const childNewTopLeftY = Math.round(childTopLeftY + changeInY);
-      const [childX, childY] = pointRotateRads13(
-        pointFrom24(childNewTopLeftX, childNewTopLeftY),
-        pointFrom24(childCX + changeInX, childCY + changeInY),
+      const [childX, childY] = pointRotateRads14(
+        pointFrom25(childNewTopLeftX, childNewTopLeftY),
+        pointFrom25(childCX + changeInX, childCY + changeInY),
         -child.angle
       );
       scene.mutateElement(
@@ -26920,12 +27038,12 @@ var StatsDragInput = ({
         );
       }
       window.removeEventListener(
-        EVENT12.POINTER_MOVE,
+        EVENT13.POINTER_MOVE,
         callbacks.onPointerMove,
         false
       );
       window.removeEventListener(
-        EVENT12.POINTER_UP,
+        EVENT13.POINTER_UP,
         callbacks.onPointerUp,
         false
       );
@@ -27004,7 +27122,7 @@ var StatsDragInput = ({
                 };
                 const onPointerUp = () => {
                   window.removeEventListener(
-                    EVENT12.POINTER_MOVE,
+                    EVENT13.POINTER_MOVE,
                     onPointerMove,
                     false
                   );
@@ -27023,12 +27141,12 @@ var StatsDragInput = ({
                   originalElements = null;
                   originalElementsMap = null;
                   document.body.classList.remove("excalidraw-cursor-resize");
-                  window.removeEventListener(EVENT12.POINTER_UP, onPointerUp, false);
+                  window.removeEventListener(EVENT13.POINTER_UP, onPointerUp, false);
                 };
                 callbacksRef.current.onPointerMove = onPointerMove;
                 callbacksRef.current.onPointerUp = onPointerUp;
-                window.addEventListener(EVENT12.POINTER_MOVE, onPointerMove, false);
-                window.addEventListener(EVENT12.POINTER_UP, onPointerUp, false);
+                window.addEventListener(EVENT13.POINTER_MOVE, onPointerMove, false);
+                window.addEventListener(EVENT13.POINTER_UP, onPointerUp, false);
               }
             },
             onPointerEnter: () => {
@@ -27633,7 +27751,7 @@ var MultiAngle = ({
 var MultiAngle_default = MultiAngle;
 
 // components/Stats/MultiDimension.tsx
-import { pointFrom as pointFrom25 } from "@excalidraw/math";
+import { pointFrom as pointFrom26 } from "@excalidraw/math";
 import { useMemo as useMemo9 } from "react";
 import { MIN_WIDTH_OR_HEIGHT as MIN_WIDTH_OR_HEIGHT2 } from "@excalidraw/common";
 import {
@@ -27761,7 +27879,7 @@ var handleDimensionChange2 = ({
           nextHeight,
           initialHeight,
           aspectRatio,
-          pointFrom25(x1, y1),
+          pointFrom26(x1, y1),
           property,
           latestElements,
           originalElements2,
@@ -27863,7 +27981,7 @@ var handleDimensionChange2 = ({
         nextHeight,
         initialHeight,
         aspectRatio,
-        pointFrom25(x1, y1),
+        pointFrom26(x1, y1),
         property,
         latestElements,
         originalElements2,
@@ -28108,7 +28226,7 @@ var MultiFontSize = ({
 var MultiFontSize_default = MultiFontSize;
 
 // components/Stats/MultiPosition.tsx
-import { pointFrom as pointFrom26, pointRotateRads as pointRotateRads14 } from "@excalidraw/math";
+import { pointFrom as pointFrom27, pointRotateRads as pointRotateRads15 } from "@excalidraw/math";
 import { useMemo as useMemo10 } from "react";
 import { isTextElement as isTextElement18 } from "@excalidraw/element";
 import { getCommonBounds as getCommonBounds9 } from "@excalidraw/element";
@@ -28120,9 +28238,9 @@ var moveElements = (property, changeInTopX, changeInTopY, originalElements, orig
       origElement.x + origElement.width / 2,
       origElement.y + origElement.height / 2
     ];
-    const [topLeftX, topLeftY] = pointRotateRads14(
-      pointFrom26(origElement.x, origElement.y),
-      pointFrom26(cx, cy),
+    const [topLeftX, topLeftY] = pointRotateRads15(
+      pointFrom27(origElement.x, origElement.y),
+      pointFrom27(cx, cy),
       origElement.angle
     );
     const newTopLeftX = property === "x" ? Math.round(topLeftX + changeInTopX) : topLeftX;
@@ -28153,9 +28271,9 @@ var moveGroupTo = (nextX, nextY, originalElements, originalElementsMap, scene) =
         latestElement.x + latestElement.width / 2,
         latestElement.y + latestElement.height / 2
       ];
-      const [topLeftX, topLeftY] = pointRotateRads14(
-        pointFrom26(latestElement.x, latestElement.y),
-        pointFrom26(cx, cy),
+      const [topLeftX, topLeftY] = pointRotateRads15(
+        pointFrom27(latestElement.x, latestElement.y),
+        pointFrom27(cx, cy),
         latestElement.angle
       );
       moveElement(
@@ -28211,9 +28329,9 @@ var handlePositionChange = ({
             origElement.x + origElement.width / 2,
             origElement.y + origElement.height / 2
           ];
-          const [topLeftX, topLeftY] = pointRotateRads14(
-            pointFrom26(origElement.x, origElement.y),
-            pointFrom26(cx, cy),
+          const [topLeftX, topLeftY] = pointRotateRads15(
+            pointFrom27(origElement.x, origElement.y),
+            pointFrom27(cx, cy),
             origElement.angle
           );
           const newTopLeftX = property === "x" ? nextValue : topLeftX;
@@ -28262,9 +28380,9 @@ var MultiPosition = ({
       }
       const [el] = elementsInUnit;
       const [cx, cy] = [el.x + el.width / 2, el.y + el.height / 2];
-      const [topLeftX, topLeftY] = pointRotateRads14(
-        pointFrom26(el.x, el.y),
-        pointFrom26(cx, cy),
+      const [topLeftX, topLeftY] = pointRotateRads15(
+        pointFrom27(el.x, el.y),
+        pointFrom27(cx, cy),
         el.angle
       );
       return Math.round((property === "x" ? topLeftX : topLeftY) * 100) / 100;
@@ -28288,7 +28406,7 @@ var MultiPosition = ({
 var MultiPosition_default = MultiPosition;
 
 // components/Stats/Position.tsx
-import { clamp as clamp6, pointFrom as pointFrom27, pointRotateRads as pointRotateRads15, round as round4 } from "@excalidraw/math";
+import { clamp as clamp6, pointFrom as pointFrom28, pointRotateRads as pointRotateRads16, round as round4 } from "@excalidraw/math";
 import {
   getFlipAdjustedCropPosition,
   getUncroppedWidthAndHeight as getUncroppedWidthAndHeight2
@@ -28312,9 +28430,9 @@ var handlePositionChange2 = ({
     origElement.x + origElement.width / 2,
     origElement.y + origElement.height / 2
   ];
-  const [topLeftX, topLeftY] = pointRotateRads15(
-    pointFrom27(origElement.x, origElement.y),
-    pointFrom27(cx, cy),
+  const [topLeftX, topLeftY] = pointRotateRads16(
+    pointFrom28(origElement.x, origElement.y),
+    pointFrom28(cx, cy),
     origElement.angle
   );
   if (originalAppState.croppingElementId === origElement.id) {
@@ -28412,9 +28530,9 @@ var Position = ({
   scene,
   appState
 }) => {
-  const [topLeftX, topLeftY] = pointRotateRads15(
-    pointFrom27(element.x, element.y),
-    pointFrom27(element.x + element.width / 2, element.y + element.height / 2),
+  const [topLeftX, topLeftY] = pointRotateRads16(
+    pointFrom28(element.x, element.y),
+    pointFrom28(element.x + element.width / 2, element.y + element.height / 2),
     element.angle
   );
   let value = round4(property === "x" ? topLeftX : topLeftY, 2);
@@ -31183,6 +31301,7 @@ var useExcalidrawSetAppState = () => useContext3(ExcalidrawSetAppStateContext);
 var useExcalidrawActionManager = () => useContext3(ExcalidrawActionManagerContext);
 var didTapTwice = false;
 var tappedTwiceTimer = 0;
+var firstTapPosition = null;
 var isHoldingSpace = false;
 var isPanning = false;
 var isDraggingScrollBar = false;
@@ -31258,6 +31377,7 @@ var App = class _App extends React43.Component {
     __publicField(this, "onScrollChangeEmitter", new Emitter3());
     __publicField(this, "missingPointerEventCleanupEmitter", new Emitter3());
     __publicField(this, "onRemoveEventListenersEmitter", new Emitter3());
+    __publicField(this, "defaultSelectionTool", "selection");
     __publicField(this, "updateEditorAtom", (atom2, ...args) => {
       const result = editorJotaiStore.set(atom2, ...args);
       this.triggerRender();
@@ -31600,7 +31720,7 @@ var App = class _App extends React43.Component {
             this.updateScene({
               elements: this.scene.getElementsIncludingDeleted().map((el) => {
                 if (this.state.selectedElementIds[el.id]) {
-                  return newElementWith10(el, {
+                  return newElementWith11(el, {
                     [shouldUpdateStrokeColor ? "strokeColor" : "backgroundColor"]: color
                   });
                 }
@@ -31764,7 +31884,11 @@ var App = class _App extends React43.Component {
           }
         };
       }
-      const scene = restore(initialData, null, null, { repairBindings: true });
+      const scene = restore(initialData, null, null, {
+        repairBindings: true,
+        deleteInvisibleElements: true
+      });
+      const activeTool = scene.appState.activeTool;
       scene.appState = {
         ...scene.appState,
         theme: this.props.theme || scene.appState.theme,
@@ -31773,7 +31897,10 @@ var App = class _App extends React43.Component {
         // update the state outside of initialData (e.g. when loading the app
         // with a library install link, which should auto-open the library)
         openSidebar: scene.appState?.openSidebar || this.state.openSidebar,
-        activeTool: scene.appState.activeTool.type === "image" ? { ...scene.appState.activeTool, type: "selection" } : scene.appState.activeTool,
+        activeTool: activeTool.type === "image" || activeTool.type === "lasso" || activeTool.type === "selection" ? {
+          ...activeTool,
+          type: this.defaultSelectionTool
+        } : scene.appState.activeTool,
         isLoading: false,
         toast: this.state.toast
       };
@@ -31803,6 +31930,12 @@ var App = class _App extends React43.Component {
         this.scrollToContent(window.location.href, { animate: false });
       }
     });
+    __publicField(this, "isMobileOrTablet", () => {
+      const hasTouch = "ontouchstart" in window || navigator.maxTouchPoints > 0;
+      const hasCoarsePointer = "matchMedia" in window && window?.matchMedia("(pointer: coarse)")?.matches;
+      const isTouchMobile = hasTouch && hasCoarsePointer;
+      return isMobile || isTouchMobile;
+    });
     __publicField(this, "isMobileBreakpoint", (width, height) => {
       return width < MQ_MAX_WIDTH_PORTRAIT || height < MQ_MAX_HEIGHT_LANDSCAPE && width < MQ_MAX_WIDTH_LANDSCAPE;
     });
@@ -31916,6 +32049,12 @@ var App = class _App extends React43.Component {
       }
       if (!didTapTwice) {
         didTapTwice = true;
+        if (event.touches.length === 1) {
+          firstTapPosition = {
+            x: event.touches[0].clientX,
+            y: event.touches[0].clientY
+          };
+        }
         clearTimeout(tappedTwiceTimer);
         tappedTwiceTimer = window.setTimeout(
           _App.resetTapTwice,
@@ -31923,12 +32062,20 @@ var App = class _App extends React43.Component {
         );
         return;
       }
-      if (didTapTwice && event.touches.length === 1) {
+      if (didTapTwice && event.touches.length === 1 && firstTapPosition) {
         const touch = event.touches[0];
-        this.handleCanvasDoubleClick({
-          clientX: touch.clientX,
-          clientY: touch.clientY
-        });
+        const distance3 = pointDistance8(
+          pointFrom29(touch.clientX, touch.clientY),
+          pointFrom29(firstTapPosition.x, firstTapPosition.y)
+        );
+        if (distance3 <= DOUBLE_TAP_POSITION_THRESHOLD) {
+          this.lassoTrail.endPath();
+          this.deselectElements();
+          this.handleCanvasDoubleClick({
+            clientX: touch.clientX,
+            clientY: touch.clientY
+          });
+        }
         didTapTwice = false;
         clearTimeout(tappedTwiceTimer);
       }
@@ -31953,7 +32100,6 @@ var App = class _App extends React43.Component {
         gesture.pointers.clear();
       }
     });
-    // TODO: this is so spaghetti, we should refactor it and cover it with tests
     __publicField(this, "pasteFromClipboard", withBatchedUpdates(
       async (event) => {
         const isPlainPaste = !!IS_PLAIN_PASTE;
@@ -31969,37 +32115,9 @@ var App = class _App extends React43.Component {
         if (event && (!(elementUnderCursor instanceof HTMLCanvasElement) || isWritableElement3(target))) {
           return;
         }
-        const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords4(
-          {
-            clientX: this.lastViewportPosition.x,
-            clientY: this.lastViewportPosition.y
-          },
-          this.state
-        );
-        let file2 = event?.clipboardData?.files[0];
-        const data = await parseClipboard(event, isPlainPaste);
-        if (!file2 && !isPlainPaste) {
-          if (data.mixedContent) {
-            return this.addElementsFromMixedContentPaste(data.mixedContent, {
-              isPlainPaste,
-              sceneX,
-              sceneY
-            });
-          } else if (data.text) {
-            const string = data.text.trim();
-            if (string.startsWith("<svg") && string.endsWith("</svg>")) {
-              file2 = SVGStringToFile(string);
-            }
-          }
-        }
-        if (isSupportedImageFile(file2) && !data.spreadsheet) {
-          if (!this.isToolSupported("image")) {
-            this.setState({ errorMessage: t("errors.imageToolNotSupported") });
-            return;
-          }
-          this.createImageElement({ sceneX, sceneY, imageFile: file2 });
-          return;
-        }
+        const dataTransferList = await parseDataTransferEvent(event);
+        const filesList = dataTransferList.getFiles();
+        const data = await parseClipboard(dataTransferList, isPlainPaste);
         if (this.props.onPaste) {
           try {
             if (await this.props.onPaste(data, event) === false) {
@@ -32009,82 +32127,15 @@ var App = class _App extends React43.Component {
             console.error(error);
           }
         }
-        if (data.errorMessage) {
-          this.setState({ errorMessage: data.errorMessage });
-        } else if (data.spreadsheet && !isPlainPaste) {
-          this.setState({
-            pasteDialog: {
-              data: data.spreadsheet,
-              shown: true
-            }
-          });
-        } else if (data.elements) {
-          const elements = data.programmaticAPI ? convertToExcalidrawElements(
-            data.elements
-          ) : data.elements;
-          this.addElementsFromPasteOrLibrary({
-            elements,
-            files: data.files || null,
-            position: "cursor",
-            retainSeed: isPlainPaste
-          });
-        } else if (data.text) {
-          if (data.text && isMaybeMermaidDefinition(data.text)) {
-            const api = await import("@excalidraw/mermaid-to-excalidraw");
-            try {
-              const { elements: skeletonElements, files } = await api.parseMermaidToExcalidraw(data.text);
-              const elements = convertToExcalidrawElements(skeletonElements, {
-                regenerateIds: true
-              });
-              this.addElementsFromPasteOrLibrary({
-                elements,
-                files,
-                position: "cursor"
-              });
-              return;
-            } catch (err) {
-              console.warn(
-                `parsing pasted text as mermaid definition failed: ${err.message}`
-              );
-            }
-          }
-          const nonEmptyLines = normalizeEOL2(data.text).split(/\n+/).map((s) => s.trim()).filter(Boolean);
-          const embbeddableUrls = nonEmptyLines.map((str) => maybeParseEmbedSrc(str)).filter((string) => {
-            return embeddableURLValidator2(string, this.props.validateEmbeddable) && (/^(http|https):\/\/[^\s/$.?#].[^\s]*$/.test(string) || getEmbedLink2(string)?.type === "video");
-          });
-          if (!IS_PLAIN_PASTE && embbeddableUrls.length > 0 && // if there were non-embeddable text (lines) mixed in with embeddable
-          // urls, ignore and paste as text
-          embbeddableUrls.length === nonEmptyLines.length) {
-            const embeddables = [];
-            for (const url of embbeddableUrls) {
-              const prevEmbeddable = embeddables[embeddables.length - 1];
-              const embeddable = this.insertEmbeddableElement({
-                sceneX: prevEmbeddable ? prevEmbeddable.x + prevEmbeddable.width + 20 : sceneX,
-                sceneY,
-                link: normalizeLink3(url)
-              });
-              if (embeddable) {
-                embeddables.push(embeddable);
-              }
-            }
-            if (embeddables.length) {
-              this.store.scheduleCapture();
-              this.setState({
-                selectedElementIds: Object.fromEntries(
-                  embeddables.map((embeddable) => [embeddable.id, true])
-                )
-              });
-            }
-            return;
-          }
-          this.addTextFromPaste(data.text, isPlainPaste);
-        }
-        this.setActiveTool({ type: "selection" });
+        await this.insertClipboardContent(data, filesList, isPlainPaste);
+        this.setActiveTool({ type: this.defaultSelectionTool }, true);
         event?.preventDefault();
       }
     ));
     __publicField(this, "addElementsFromPasteOrLibrary", (opts) => {
-      const elements = restoreElements(opts.elements, null, void 0);
+      const elements = restoreElements(opts.elements, null, {
+        deleteInvisibleElements: true
+      });
       const [minX, minY, maxX, maxY] = getCommonBounds12(elements);
       const elementsCenterX = distance2(minX, maxX) / 2;
       const elementsCenterY = distance2(minY, maxY) / 2;
@@ -32100,7 +32151,7 @@ var App = class _App extends React43.Component {
       const { duplicatedElements } = duplicateElements3({
         type: "everything",
         elements: elements.map((element) => {
-          return newElementWith10(element, {
+          return newElementWith11(element, {
             x: element.x + gridX - minX,
             y: element.y + gridY - minY
           });
@@ -32181,7 +32232,7 @@ var App = class _App extends React43.Component {
           }
         }
       );
-      this.setActiveTool({ type: "selection" });
+      this.setActiveTool({ type: this.defaultSelectionTool }, true);
       if (opts.fitToContent) {
         this.scrollToContent(duplicatedElements, {
           fitToContent: true,
@@ -32212,7 +32263,7 @@ var App = class _App extends React43.Component {
             ...prevState.activeTool,
             ...updateActiveTool7(
               this.state,
-              prevState.activeTool.locked ? { type: "selection" } : prevState.activeTool
+              prevState.activeTool.locked ? { type: this.defaultSelectionTool } : prevState.activeTool
             ),
             locked: !prevState.activeTool.locked
           }
@@ -32403,11 +32454,11 @@ var App = class _App extends React43.Component {
         }
         addedFiles[fileData.id] = fileData;
         nextFiles[fileData.id] = fileData;
-        if (fileData.mimeType === MIME_TYPES8.svg) {
+        if (fileData.mimeType === MIME_TYPES9.svg) {
           try {
             const restoredDataURL = getDataURL_sync(
               normalizeSVG(dataURLToString(fileData.dataURL)),
-              MIME_TYPES8.svg
+              MIME_TYPES9.svg
             );
             if (fileData.dataURL !== restoredDataURL) {
               fileData.version = (fileData.version ?? 1) + 1;
@@ -32447,6 +32498,19 @@ var App = class _App extends React43.Component {
         }
       }
     ));
+    __publicField(this, "applyDeltas", (deltas, options) => {
+      const aggregatedDelta = StoreDelta2.squash(...deltas);
+      const nextAppState = { ...this.state };
+      const nextElements = new Map(
+        this.scene.getElementsMapIncludingDeleted()
+      );
+      return StoreDelta2.applyTo(
+        aggregatedDelta,
+        nextElements,
+        nextAppState,
+        options
+      );
+    });
     __publicField(this, "mutateElement", (element, updates, informMutation = true) => {
       return this.scene.mutateElement(element, updates, {
         informMutation,
@@ -32814,7 +32878,7 @@ var App = class _App extends React43.Component {
             }
           }
         } else if (!event.ctrlKey && !event.altKey && !event.metaKey && !this.state.newElement && !this.state.selectionElement && !this.state.selectedElementsAreBeingDragged) {
-          const shape = findShapeByKey(event.key);
+          const shape = findShapeByKey(event.key, this);
           if (shape) {
             if (this.state.activeTool.type !== shape) {
               trackEvent(
@@ -32871,7 +32935,7 @@ var App = class _App extends React43.Component {
         }
         if (event.key === KEYS52.K && !event.altKey && !event[KEYS52.CTRL_OR_CMD]) {
           if (this.state.activeTool.type === "laser") {
-            this.setActiveTool({ type: "selection" });
+            this.setActiveTool({ type: this.defaultSelectionTool });
           } else {
             this.setActiveTool({ type: "laser" });
           }
@@ -32999,7 +33063,7 @@ var App = class _App extends React43.Component {
         this.setState({ suggestedBindings: [] });
       }
       if (nextActiveTool.type === "image") {
-        this.onImageAction();
+        this.onImageToolbarButtonClick();
       }
       this.setState((prevState) => {
         const commonResets = {
@@ -33246,7 +33310,7 @@ var App = class _App extends React43.Component {
       if (this.state.multiElement) {
         return;
       }
-      if (this.state.activeTool.type !== "selection") {
+      if (this.state.activeTool.type !== this.defaultSelectionTool) {
         return;
       }
       const selectedElements = this.scene.getSelectedElements(this.state);
@@ -33356,7 +33420,7 @@ var App = class _App extends React43.Component {
           );
           if (container) {
             if (hasBoundTextElement9(container) || !isTransparent6(container.backgroundColor) || hitElementItself({
-              point: pointFrom28(sceneX, sceneY),
+              point: pointFrom29(sceneX, sceneY),
               element: container,
               elementsMap: this.scene.getNonDeletedElementsMap(),
               threshold: this.getElementHitThreshold(container)
@@ -33394,7 +33458,7 @@ var App = class _App extends React43.Component {
           element,
           this.scene.getNonDeletedElementsMap(),
           this.state,
-          pointFrom28(scenePointer.x, scenePointer.y),
+          pointFrom29(scenePointer.x, scenePointer.y),
           this.device.editor.isMobile
         )) {
           return element;
@@ -33403,11 +33467,11 @@ var App = class _App extends React43.Component {
     });
     __publicField(this, "redirectToLink", (event, isTouchScreen) => {
       const draggedDistance = pointDistance8(
-        pointFrom28(
+        pointFrom29(
           this.lastPointerDownEvent.clientX,
           this.lastPointerDownEvent.clientY
         ),
-        pointFrom28(
+        pointFrom29(
           this.lastPointerUpEvent.clientX,
           this.lastPointerUpEvent.clientY
         )
@@ -33424,7 +33488,7 @@ var App = class _App extends React43.Component {
         this.hitLinkElement,
         elementsMap,
         this.state,
-        pointFrom28(lastPointerDownCoords.x, lastPointerDownCoords.y),
+        pointFrom29(lastPointerDownCoords.x, lastPointerDownCoords.y),
         this.device.editor.isMobile
       );
       const lastPointerUpCoords = viewportCoordsToSceneCoords4(
@@ -33435,7 +33499,7 @@ var App = class _App extends React43.Component {
         this.hitLinkElement,
         elementsMap,
         this.state,
-        pointFrom28(lastPointerUpCoords.x, lastPointerUpCoords.y),
+        pointFrom29(lastPointerUpCoords.x, lastPointerUpCoords.y),
         this.device.editor.isMobile
       );
       if (lastPointerDownHittingLinkIcon && lastPointerUpHittingLinkIcon) {
@@ -33445,7 +33509,7 @@ var App = class _App extends React43.Component {
           url = normalizeLink3(url);
           let customEvent;
           if (this.props.onLinkOpen) {
-            customEvent = wrapEvent2(EVENT13.EXCALIDRAW_LINK, event.nativeEvent);
+            customEvent = wrapEvent2(EVENT14.EXCALIDRAW_LINK, event.nativeEvent);
             this.props.onLinkOpen(
               {
                 ...this.hitLinkElement,
@@ -33468,7 +33532,7 @@ var App = class _App extends React43.Component {
     __publicField(this, "getTopLayerFrameAtSceneCoords", (sceneCoords) => {
       const elementsMap = this.scene.getNonDeletedElementsMap();
       const frames = this.scene.getNonDeletedFramesLikes().filter(
-        (frame) => isCursorInFrame(sceneCoords, frame, elementsMap)
+        (frame) => !frame.locked && isCursorInFrame(sceneCoords, frame, elementsMap)
       );
       return frames.length ? frames[frames.length - 1] : null;
     });
@@ -33611,7 +33675,7 @@ var App = class _App extends React43.Component {
         setCursorForShape(this.interactiveCanvas, this.state);
         if (lastPoint === lastCommittedPoint) {
           if (pointDistance8(
-            pointFrom28(scenePointerX - rx, scenePointerY - ry),
+            pointFrom29(scenePointerX - rx, scenePointerY - ry),
             lastPoint
           ) >= LINE_CONFIRM_THRESHOLD2) {
             this.scene.mutateElement(
@@ -33619,7 +33683,7 @@ var App = class _App extends React43.Component {
               {
                 points: [
                   ...points,
-                  pointFrom28(scenePointerX - rx, scenePointerY - ry)
+                  pointFrom29(scenePointerX - rx, scenePointerY - ry)
                 ]
               },
               { informMutation: false, isDragging: false }
@@ -33628,7 +33692,7 @@ var App = class _App extends React43.Component {
             setCursor(this.interactiveCanvas, CURSOR_TYPE4.POINTER);
           }
         } else if (points.length > 2 && lastCommittedPoint && pointDistance8(
-          pointFrom28(scenePointerX - rx, scenePointerY - ry),
+          pointFrom29(scenePointerX - rx, scenePointerY - ry),
           lastCommittedPoint
         ) < LINE_CONFIRM_THRESHOLD2) {
           setCursor(this.interactiveCanvas, CURSOR_TYPE4.POINTER);
@@ -33666,7 +33730,7 @@ var App = class _App extends React43.Component {
             {
               points: [
                 ...points.slice(0, -1),
-                pointFrom28(
+                pointFrom29(
                   lastCommittedX + dxFromLastCommitted,
                   lastCommittedY + dyFromLastCommitted
                 )
@@ -33682,7 +33746,7 @@ var App = class _App extends React43.Component {
         return;
       }
       const hasDeselectedButton = Boolean(event.buttons);
-      if (hasDeselectedButton || this.state.activeTool.type !== "selection" && this.state.activeTool.type !== "text" && this.state.activeTool.type !== "eraser") {
+      if (hasDeselectedButton || this.state.activeTool.type !== "selection" && this.state.activeTool.type !== "lasso" && this.state.activeTool.type !== "text" && this.state.activeTool.type !== "eraser") {
         return;
       }
       const elements = this.scene.getNonDeletedElements();
@@ -33796,7 +33860,9 @@ var App = class _App extends React43.Component {
               });
             } else if (!hitElement || // Ebow arrows can only be moved when unconnected
             !isElbowArrow11(hitElement) || !(hitElement.startBinding || hitElement.endBinding)) {
-              setCursor(this.interactiveCanvas, CURSOR_TYPE4.MOVE);
+              if (this.state.activeTool.type !== "lasso" || selectedElements.length > 0) {
+                setCursor(this.interactiveCanvas, CURSOR_TYPE4.MOVE);
+              }
               if (this.state.activeEmbeddable?.state === "hover") {
                 this.setState({ activeEmbeddable: null });
               }
@@ -33957,7 +34023,7 @@ var App = class _App extends React43.Component {
             };
             const unsubPointerUp = addEventListener2(
               window,
-              EVENT13.POINTER_UP,
+              EVENT14.POINTER_UP,
               onPointerUp2,
               {
                 once: true
@@ -33994,11 +34060,76 @@ var App = class _App extends React43.Component {
         return;
       }
       if (this.state.activeTool.type === "lasso") {
-        this.lassoTrail.startPath(
-          pointerDownState.origin.x,
-          pointerDownState.origin.y,
-          event.shiftKey
-        );
+        const hitSelectedElement = pointerDownState.hit.element && this.isASelectedElement(pointerDownState.hit.element);
+        const isMobileOrTablet = this.isMobileOrTablet();
+        if (!pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements && !pointerDownState.resize.handleType && !hitSelectedElement) {
+          this.lassoTrail.startPath(
+            pointerDownState.origin.x,
+            pointerDownState.origin.y,
+            event.shiftKey
+          );
+          pointerDownState.drag.blockDragging = !isMobileOrTablet;
+        }
+        if (isMobileOrTablet && pointerDownState.hit.element && !hitSelectedElement) {
+          this.setState((prevState) => {
+            const nextSelectedElementIds = {
+              ...prevState.selectedElementIds,
+              [pointerDownState.hit.element.id]: true
+            };
+            const previouslySelectedElements = [];
+            Object.keys(prevState.selectedElementIds).forEach((id) => {
+              const element = this.scene.getElement(id);
+              element && previouslySelectedElements.push(element);
+            });
+            const hitElement = pointerDownState.hit.element;
+            if (isFrameLikeElement15(hitElement)) {
+              getFrameChildren6(previouslySelectedElements, hitElement.id).forEach(
+                (element) => {
+                  delete nextSelectedElementIds[element.id];
+                }
+              );
+            } else if (hitElement.frameId) {
+              if (nextSelectedElementIds[hitElement.frameId]) {
+                delete nextSelectedElementIds[hitElement.id];
+              }
+            } else {
+              const groupIds = hitElement.groupIds;
+              const framesInGroups = new Set(
+                groupIds.flatMap(
+                  (gid) => getElementsInGroup9(this.scene.getNonDeletedElements(), gid)
+                ).filter((element) => isFrameLikeElement15(element)).map((frame) => frame.id)
+              );
+              if (framesInGroups.size > 0) {
+                previouslySelectedElements.forEach((element) => {
+                  if (element.frameId && framesInGroups.has(element.frameId)) {
+                    delete nextSelectedElementIds[element.id];
+                    element.groupIds.flatMap(
+                      (gid) => getElementsInGroup9(
+                        this.scene.getNonDeletedElements(),
+                        gid
+                      )
+                    ).forEach((element2) => {
+                      delete nextSelectedElementIds[element2.id];
+                    });
+                  }
+                });
+              }
+            }
+            return {
+              ...selectGroupsForSelectedElements6(
+                {
+                  editingGroupId: prevState.editingGroupId,
+                  selectedElementIds: nextSelectedElementIds
+                },
+                this.scene.getNonDeletedElements(),
+                prevState,
+                this
+              ),
+              showHyperlinkPopup: hitElement.link || isEmbeddableElement4(hitElement) ? "info" : false
+            };
+          });
+          pointerDownState.hit.wasAddedToSelection = true;
+        }
       } else if (this.state.activeTool.type === "text") {
         this.handleTextOnPointerDown(event, pointerDownState);
       } else if (this.state.activeTool.type === "arrow" || this.state.activeTool.type === "line") {
@@ -34051,10 +34182,10 @@ var App = class _App extends React43.Component {
         (_event) => onPointerUp(_event || event.nativeEvent)
       );
       if (!this.state.viewModeEnabled || this.state.activeTool.type === "laser") {
-        window.addEventListener(EVENT13.POINTER_MOVE, onPointerMove);
-        window.addEventListener(EVENT13.POINTER_UP, onPointerUp);
-        window.addEventListener(EVENT13.KEYDOWN, onKeyDown);
-        window.addEventListener(EVENT13.KEYUP, onKeyUp);
+        window.addEventListener(EVENT14.POINTER_MOVE, onPointerMove);
+        window.addEventListener(EVENT14.POINTER_UP, onPointerUp);
+        window.addEventListener(EVENT14.KEYDOWN, onKeyDown);
+        window.addEventListener(EVENT14.KEYUP, onKeyUp);
         pointerDownState.eventListeners.onMove = onPointerMove;
         pointerDownState.eventListeners.onUp = onPointerUp;
         pointerDownState.eventListeners.onKeyUp = onKeyUp;
@@ -34102,7 +34233,7 @@ var App = class _App extends React43.Component {
           this.hitLinkElement,
           this.scene.getNonDeletedElementsMap(),
           this.state,
-          pointFrom28(scenePointer.x, scenePointer.y)
+          pointFrom29(scenePointer.x, scenePointer.y)
         )) {
           this.handleEmbeddableCenterClick(this.hitLinkElement);
         } else {
@@ -34166,17 +34297,17 @@ var App = class _App extends React43.Component {
         if (isLinux && !nextPastePrevented && (Math.abs(deltaX) > 1 || Math.abs(deltaY) > 1)) {
           nextPastePrevented = true;
           const preventNextPaste = (event3) => {
-            document.body.removeEventListener(EVENT13.PASTE, preventNextPaste);
+            document.body.removeEventListener(EVENT14.PASTE, preventNextPaste);
             event3.stopPropagation();
           };
           const enableNextPaste = () => {
             setTimeout(() => {
-              document.body.removeEventListener(EVENT13.PASTE, preventNextPaste);
-              window.removeEventListener(EVENT13.POINTER_UP, enableNextPaste);
+              document.body.removeEventListener(EVENT14.PASTE, preventNextPaste);
+              window.removeEventListener(EVENT14.POINTER_UP, enableNextPaste);
             }, 100);
           };
-          document.body.addEventListener(EVENT13.PASTE, preventNextPaste);
-          window.addEventListener(EVENT13.POINTER_UP, enableNextPaste);
+          document.body.addEventListener(EVENT14.PASTE, preventNextPaste);
+          window.addEventListener(EVENT14.POINTER_UP, enableNextPaste);
         }
         this.translateCanvas({
           scrollX: this.state.scrollX - deltaX / this.state.zoom.value,
@@ -34198,17 +34329,17 @@ var App = class _App extends React43.Component {
             cursorButton: "up"
           });
           this.savePointer(event.clientX, event.clientY, "up");
-          window.removeEventListener(EVENT13.POINTER_MOVE, onPointerMove);
-          window.removeEventListener(EVENT13.POINTER_UP, teardown);
-          window.removeEventListener(EVENT13.BLUR, teardown);
+          window.removeEventListener(EVENT14.POINTER_MOVE, onPointerMove);
+          window.removeEventListener(EVENT14.POINTER_UP, teardown);
+          window.removeEventListener(EVENT14.BLUR, teardown);
           onPointerMove.flush();
         }
       );
-      window.addEventListener(EVENT13.BLUR, teardown);
-      window.addEventListener(EVENT13.POINTER_MOVE, onPointerMove, {
+      window.addEventListener(EVENT14.BLUR, teardown);
+      window.addEventListener(EVENT14.POINTER_MOVE, onPointerMove, {
         passive: true
       });
-      window.addEventListener(EVENT13.POINTER_UP, teardown);
+      window.addEventListener(EVENT14.POINTER_UP, teardown);
       return true;
     });
     __publicField(this, "clearSelectionIfNotUsingSelection", () => {
@@ -34225,7 +34356,7 @@ var App = class _App extends React43.Component {
      * @returns whether the pointer event has been completely handled
      */
     __publicField(this, "handleSelectionOnPointerDown", (event, pointerDownState) => {
-      if (this.state.activeTool.type === "selection") {
+      if (this.state.activeTool.type === "selection" || this.state.activeTool.type === "lasso") {
         const elements = this.scene.getNonDeletedElements();
         const elementsMap = this.scene.getNonDeletedElementsMap();
         const selectedElements = this.scene.getSelectedElements(this.state);
@@ -34375,6 +34506,15 @@ var App = class _App extends React43.Component {
           } else if (hitElement != null) {
             if (event[KEYS52.CTRL_OR_CMD]) {
               if (event.altKey) {
+                if (this.state.openDialog?.name === "elementLinkSelector") {
+                  this.setOpenDialog(null);
+                }
+                this.lassoTrail.startPath(
+                  pointerDownState.origin.x,
+                  pointerDownState.origin.y,
+                  event.shiftKey
+                );
+                this.setActiveTool({ type: "lasso", fromSelection: true });
                 return false;
               }
               if (!this.state.selectedElementIds[hitElement.id]) {
@@ -34501,7 +34641,9 @@ var App = class _App extends React43.Component {
       resetCursor(this.interactiveCanvas);
       if (!this.state.activeTool.locked) {
         this.setState({
-          activeTool: updateActiveTool7(this.state, { type: "selection" })
+          activeTool: updateActiveTool7(this.state, {
+            type: this.defaultSelectionTool
+          })
         });
       }
     });
@@ -34531,7 +34673,7 @@ var App = class _App extends React43.Component {
         simulatePressure,
         locked: false,
         frameId: topLayerFrame ? topLayerFrame.id : null,
-        points: [pointFrom28(0, 0)],
+        points: [pointFrom29(0, 0)],
         pressures: simulatePressure ? [] : [event.pressure]
       });
       this.scene.insertElement(element);
@@ -34630,11 +34772,10 @@ var App = class _App extends React43.Component {
       this.scene.insertElement(element);
       return element;
     });
-    __publicField(this, "createImageElement", async ({
+    __publicField(this, "newImagePlaceholder", ({
       sceneX,
       sceneY,
-      addToFrameUnderCursor = true,
-      imageFile
+      addToFrameUnderCursor = true
     }) => {
       const [gridX, gridY] = getGridPoint2(
         sceneX,
@@ -34646,7 +34787,7 @@ var App = class _App extends React43.Component {
         y: gridY
       }) : null;
       const placeholderSize = 100 / this.state.zoom.value;
-      const placeholderImageElement = newImageElement2({
+      return newImageElement2({
         type: "image",
         strokeColor: this.state.currentItemStrokeColor,
         backgroundColor: this.state.currentItemBackgroundColor,
@@ -34663,11 +34804,6 @@ var App = class _App extends React43.Component {
         width: placeholderSize,
         height: placeholderSize
       });
-      const initializedImageElement = await this.insertImageElement(
-        placeholderImageElement,
-        imageFile
-      );
-      return initializedImageElement;
     });
     __publicField(this, "handleLinearElementOnPointerDown", (event, elementType, pointerDownState) => {
       if (this.state.multiElement) {
@@ -34688,7 +34824,7 @@ var App = class _App extends React43.Component {
         }
         const { x: rx, y: ry, lastCommittedPoint } = multiElement;
         if (multiElement.points.length > 1 && lastCommittedPoint && pointDistance8(
-          pointFrom28(
+          pointFrom29(
             pointerDownState.origin.x - rx,
             pointerDownState.origin.y - ry
           ),
@@ -34772,7 +34908,7 @@ var App = class _App extends React43.Component {
           };
         });
         this.scene.mutateElement(element, {
-          points: [...element.points, pointFrom28(0, 0)]
+          points: [...element.points, pointFrom29(0, 0)]
         });
         const boundElement = getHoveredElementForBinding2(
           pointerDownState.origin,
@@ -34867,7 +35003,7 @@ var App = class _App extends React43.Component {
       const elements = this.scene.getElementsIncludingDeleted().map((ele) => {
         if (this.elementsPendingErasure.has(ele.id) || ele.frameId && this.elementsPendingErasure.has(ele.frameId) || isBoundToContainer8(ele) && this.elementsPendingErasure.has(ele.containerId)) {
           didChange = true;
-          return newElementWith10(ele, { isDeleted: true });
+          return newElementWith11(ele, { isDeleted: true });
         }
         return ele;
       });
@@ -34883,7 +35019,7 @@ var App = class _App extends React43.Component {
       }
       const mimeType = imageFile.type;
       setCursor(this.interactiveCanvas, "wait");
-      if (mimeType === MIME_TYPES8.svg) {
+      if (mimeType === MIME_TYPES9.svg) {
         try {
           imageFile = SVGStringToFile(
             normalizeSVG(await imageFile.text()),
@@ -34976,57 +35112,14 @@ var App = class _App extends React43.Component {
      */
     __publicField(this, "getLatestInitializedImageElement", (imagePlaceholder, fileId) => {
       const latestImageElement = this.scene.getElement(imagePlaceholder.id) ?? imagePlaceholder;
-      return newElementWith10(
+      return newElementWith11(
         latestImageElement,
         {
           fileId
         }
       );
     });
-    /**
-     * inserts image into elements array and rerenders
-     */
-    __publicField(this, "insertImageElement", async (placeholderImageElement, imageFile) => {
-      if (!this.isToolSupported("image")) {
-        this.setState({ errorMessage: t("errors.imageToolNotSupported") });
-        return;
-      }
-      this.scene.insertElement(placeholderImageElement);
-      try {
-        const initializedImageElement = await this.initializeImage(
-          placeholderImageElement,
-          imageFile
-        );
-        const nextElements = this.scene.getElementsIncludingDeleted().map((element) => {
-          if (element.id === initializedImageElement.id) {
-            return initializedImageElement;
-          }
-          return element;
-        });
-        this.updateScene({
-          captureUpdate: CaptureUpdateAction37.IMMEDIATELY,
-          elements: nextElements,
-          appState: {
-            selectedElementIds: makeNextSelectedElementIds2(
-              { [initializedImageElement.id]: true },
-              this.state
-            )
-          }
-        });
-        return initializedImageElement;
-      } catch (error) {
-        this.store.scheduleAction(CaptureUpdateAction37.NEVER);
-        this.scene.mutateElement(placeholderImageElement, {
-          isDeleted: true
-        });
-        this.actionManager.executeAction(actionFinalize);
-        this.setState({
-          errorMessage: error.message || t("errors.imageInsertError")
-        });
-        return null;
-      }
-    });
-    __publicField(this, "onImageAction", async () => {
+    __publicField(this, "onImageToolbarButtonClick", async () => {
       try {
         const clientX = this.state.width / 2 + this.state.offsetLeft;
         const clientY = this.state.height / 2 + this.state.offsetTop;
@@ -35034,21 +35127,14 @@ var App = class _App extends React43.Component {
           { clientX, clientY },
           this.state
         );
-        const imageFile = await fileOpen({
+        const imageFiles = await fileOpen({
           description: "Image",
           extensions: Object.keys(
             IMAGE_MIME_TYPES2
-          )
-        });
-        await this.createImageElement({
-          sceneX: x,
-          sceneY: y,
-          addToFrameUnderCursor: false,
-          imageFile
-        });
-        this.setState({}, () => {
-          this.actionManager.executeAction(actionFinalize);
+          ),
+          multiple: true
         });
+        this.insertImages(imageFiles, x, y);
       } catch (error) {
         if (error.name !== "AbortError") {
           console.error(error);
@@ -35058,7 +35144,9 @@ var App = class _App extends React43.Component {
         this.setState(
           {
             newElement: null,
-            activeTool: updateActiveTool7(this.state, { type: "selection" })
+            activeTool: updateActiveTool7(this.state, {
+              type: this.defaultSelectionTool
+            })
           },
           () => {
             this.actionManager.executeAction(actionFinalize);
@@ -35095,9 +35183,9 @@ var App = class _App extends React43.Component {
       if (erroredFiles.size) {
         this.store.scheduleAction(CaptureUpdateAction37.NEVER);
         this.scene.replaceAllElements(
-          elements.map((element) => {
+          this.scene.getElementsIncludingDeleted().map((element) => {
             if (isInitializedImageElement3(element) && erroredFiles.has(element.fileId)) {
-              return newElementWith10(element, {
+              return newElementWith11(element, {
                 status: "error"
               });
             }
@@ -35159,64 +35247,105 @@ var App = class _App extends React43.Component {
       if (canvas !== null) {
         this.interactiveCanvas = canvas;
         this.interactiveCanvas.addEventListener(
-          EVENT13.TOUCH_START,
+          EVENT14.TOUCH_START,
           this.onTouchStart,
           { passive: false }
         );
-        this.interactiveCanvas.addEventListener(EVENT13.TOUCH_END, this.onTouchEnd);
+        this.interactiveCanvas.addEventListener(EVENT14.TOUCH_END, this.onTouchEnd);
       } else {
         this.interactiveCanvas?.removeEventListener(
-          EVENT13.TOUCH_START,
+          EVENT14.TOUCH_START,
           this.onTouchStart
         );
         this.interactiveCanvas?.removeEventListener(
-          EVENT13.TOUCH_END,
+          EVENT14.TOUCH_END,
           this.onTouchEnd
         );
       }
     });
+    __publicField(this, "insertImages", async (imageFiles, sceneX, sceneY) => {
+      const gridPadding = 50 / this.state.zoom.value;
+      const placeholders = positionElementsOnGrid(
+        imageFiles.map(() => this.newImagePlaceholder({ sceneX, sceneY })),
+        sceneX,
+        sceneY,
+        gridPadding
+      );
+      placeholders.forEach((el) => this.scene.insertElement(el));
+      const initialized = await Promise.all(
+        placeholders.map(async (placeholder, i) => {
+          try {
+            return await this.initializeImage(placeholder, imageFiles[i]);
+          } catch (error) {
+            this.setState({
+              errorMessage: error.message || t("errors.imageInsertError")
+            });
+            return newElementWith11(placeholder, { isDeleted: true });
+          }
+        })
+      );
+      const initializedMap = arrayToMap27(initialized);
+      const positioned = positionElementsOnGrid(
+        initialized.filter((el) => !el.isDeleted),
+        sceneX,
+        sceneY,
+        gridPadding
+      );
+      const positionedMap = arrayToMap27(positioned);
+      const nextElements = this.scene.getElementsIncludingDeleted().map((el) => positionedMap.get(el.id) ?? initializedMap.get(el.id) ?? el);
+      this.updateScene({
+        appState: {
+          selectedElementIds: makeNextSelectedElementIds2(
+            Object.fromEntries(positioned.map((el) => [el.id, true])),
+            this.state
+          )
+        },
+        elements: nextElements,
+        captureUpdate: CaptureUpdateAction37.IMMEDIATELY
+      });
+      this.setState({}, () => {
+        this.actionManager.executeAction(actionFinalize);
+      });
+    });
     __publicField(this, "handleAppOnDrop", async (event) => {
-      const { file: file2, fileHandle } = await getFileFromEvent(event);
       const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords4(
         event,
         this.state
       );
-      try {
-        if (isSupportedImageFile(file2) && this.isToolSupported("image")) {
-          if (file2?.type === MIME_TYPES8.png || file2?.type === MIME_TYPES8.svg) {
-            try {
-              const scene = await loadFromBlob(
-                file2,
-                this.state,
-                this.scene.getElementsIncludingDeleted(),
-                fileHandle
-              );
-              this.syncActionResult({
-                ...scene,
-                appState: {
-                  ...scene.appState || this.state,
-                  isLoading: false
-                },
-                replaceFiles: true,
-                captureUpdate: CaptureUpdateAction37.IMMEDIATELY
-              });
-              return;
-            } catch (error) {
-              if (error.name !== "EncodingError") {
-                throw new Error(t("alerts.couldNotLoadInvalidFile"));
-              }
+      const dataTransferList = await parseDataTransferEvent(event);
+      const fileItems = dataTransferList.getFiles();
+      if (fileItems.length === 1) {
+        const { file: file2, fileHandle } = fileItems[0];
+        if (file2 && (file2.type === MIME_TYPES9.png || file2.type === MIME_TYPES9.svg)) {
+          try {
+            const scene = await loadFromBlob(
+              file2,
+              this.state,
+              this.scene.getElementsIncludingDeleted(),
+              fileHandle
+            );
+            this.syncActionResult({
+              ...scene,
+              appState: {
+                ...scene.appState || this.state,
+                isLoading: false
+              },
+              replaceFiles: true,
+              captureUpdate: CaptureUpdateAction37.IMMEDIATELY
+            });
+            return;
+          } catch (error) {
+            if (error.name !== "EncodingError") {
+              throw new Error(t("alerts.couldNotLoadInvalidFile"));
             }
           }
-          this.createImageElement({ sceneX, sceneY, imageFile: file2 });
-          return;
         }
-      } catch (error) {
-        return this.setState({
-          isLoading: false,
-          errorMessage: error.message
-        });
       }
-      const libraryJSON = event.dataTransfer.getData(MIME_TYPES8.excalidrawlib);
+      const imageFiles = fileItems.map((data) => data.file).filter((file2) => isSupportedImageFile(file2));
+      if (imageFiles.length > 0 && this.isToolSupported("image")) {
+        return this.insertImages(imageFiles, sceneX, sceneY);
+      }
+      const libraryJSON = dataTransferList.getData(MIME_TYPES9.excalidrawlib);
       if (libraryJSON && typeof libraryJSON === "string") {
         try {
           const libraryItems = parseLibraryJSON(libraryJSON);
@@ -35230,11 +35359,15 @@ var App = class _App extends React43.Component {
         }
         return;
       }
-      if (file2) {
-        await this.loadFileToCanvas(file2, fileHandle);
+      if (fileItems.length > 0) {
+        const { file: file2, fileHandle } = fileItems[0];
+        if (file2) {
+          await this.loadFileToCanvas(file2, fileHandle);
+        }
       }
-      if (event.dataTransfer?.types?.includes("text/plain")) {
-        const text = event.dataTransfer?.getData("text");
+      const textItem = dataTransferList.findByType(MIME_TYPES9.text);
+      if (textItem) {
+        const text = textItem.value;
         if (text && embeddableURLValidator2(text, this.props.validateEmbeddable) && (/^(http|https):\/\/[^\s/$.?#].[^\s]*$/.test(text) || getEmbedLink2(text)?.type === "video")) {
           const embeddable = this.insertEmbeddableElement({
             sceneX,
@@ -35278,7 +35411,7 @@ var App = class _App extends React43.Component {
         if (!ret) {
           return;
         }
-        if (ret.type === MIME_TYPES8.excalidraw) {
+        if (ret.type === MIME_TYPES9.excalidraw) {
           syncInvalidIndices2(elements.concat(ret.data.elements));
           this.store.scheduleMicroAction({
             action: CaptureUpdateAction37.NEVER,
@@ -35295,7 +35428,7 @@ var App = class _App extends React43.Component {
             replaceFiles: true,
             captureUpdate: CaptureUpdateAction37.IMMEDIATELY
           });
-        } else if (ret.type === MIME_TYPES8.excalidrawlib) {
+        } else if (ret.type === MIME_TYPES9.excalidrawlib) {
           await this.library.updateLibrary({
             libraryItems: file2,
             merge: true,
@@ -35312,7 +35445,7 @@ var App = class _App extends React43.Component {
     __publicField(this, "handleCanvasContextMenu", (event) => {
       event.preventDefault();
       if (("pointerType" in event.nativeEvent && event.nativeEvent.pointerType === "touch" || "pointerType" in event.nativeEvent && event.nativeEvent.pointerType === "pen" && // always allow if user uses a pen secondary button
-      event.button !== POINTER_BUTTON2.SECONDARY) && this.state.activeTool.type !== "selection") {
+      event.button !== POINTER_BUTTON2.SECONDARY) && this.state.activeTool.type !== this.defaultSelectionTool) {
         return;
       }
       const { x, y } = viewportCoordsToSceneCoords4(event, this.state);
@@ -35801,6 +35934,7 @@ var App = class _App extends React43.Component {
       this.setState({ ...this.getCanvasOffsets() });
     });
     const defaultAppState = getDefaultAppState();
+    this.defaultSelectionTool = this.isMobileOrTablet() ? "lasso" : "selection";
     const {
       excalidrawAPI,
       viewModeEnabled = false,
@@ -35841,6 +35975,7 @@ var App = class _App extends React43.Component {
     if (excalidrawAPI) {
       const api = {
         updateScene: this.updateScene,
+        applyDeltas: this.applyDeltas,
         mutateElement: this.mutateElement,
         updateLibrary: this.library.updateLibrary,
         addFiles: this.addFiles,
@@ -36320,7 +36455,7 @@ var App = class _App extends React43.Component {
                             showExitZenModeBtn: typeof this.props?.zenModeEnabled === "undefined" && this.state.zenModeEnabled,
                             UIOptions: this.props.UIOptions,
                             onExportImage: this.onExportImage,
-                            renderWelcomeScreen: !this.state.isLoading && this.state.showWelcomeScreen && this.state.activeTool.type === "selection" && !this.state.zenModeEnabled && !this.scene.getElementsIncludingDeleted().length,
+                            renderWelcomeScreen: !this.state.isLoading && this.state.showWelcomeScreen && this.state.activeTool.type === this.defaultSelectionTool && !this.state.zenModeEnabled && !this.scene.getElementsIncludingDeleted().length,
                             app: this,
                             isCollaborating: this.props.isCollaborating,
                             generateLinkForSelection: this.props.generateLinkForSelection,
@@ -36754,26 +36889,26 @@ var App = class _App extends React43.Component {
     this.removeEventListeners();
     if (this.props.handleKeyboardGlobally) {
       this.onRemoveEventListenersEmitter.once(
-        addEventListener2(document, EVENT13.KEYDOWN, this.onKeyDown, false)
+        addEventListener2(document, EVENT14.KEYDOWN, this.onKeyDown, false)
       );
     }
     this.onRemoveEventListenersEmitter.once(
       addEventListener2(
         this.excalidrawContainerRef.current,
-        EVENT13.WHEEL,
+        EVENT14.WHEEL,
         this.handleWheel,
         { passive: false }
       ),
-      addEventListener2(window, EVENT13.MESSAGE, this.onWindowMessage, false),
-      addEventListener2(document, EVENT13.POINTER_UP, this.removePointer, {
+      addEventListener2(window, EVENT14.MESSAGE, this.onWindowMessage, false),
+      addEventListener2(document, EVENT14.POINTER_UP, this.removePointer, {
         passive: false
       }),
       // #3553
-      addEventListener2(document, EVENT13.COPY, this.onCopy, { passive: false }),
-      addEventListener2(document, EVENT13.KEYUP, this.onKeyUp, { passive: true }),
+      addEventListener2(document, EVENT14.COPY, this.onCopy, { passive: false }),
+      addEventListener2(document, EVENT14.KEYUP, this.onKeyUp, { passive: true }),
       addEventListener2(
         document,
-        EVENT13.POINTER_MOVE,
+        EVENT14.POINTER_MOVE,
         this.updateCurrentCursorPosition,
         { passive: false }
       ),
@@ -36790,25 +36925,25 @@ var App = class _App extends React43.Component {
       // Safari-only desktop pinch zoom
       addEventListener2(
         document,
-        EVENT13.GESTURE_START,
+        EVENT14.GESTURE_START,
         this.onGestureStart,
         false
       ),
       addEventListener2(
         document,
-        EVENT13.GESTURE_CHANGE,
+        EVENT14.GESTURE_CHANGE,
         this.onGestureChange,
         false
       ),
       addEventListener2(
         document,
-        EVENT13.GESTURE_END,
+        EVENT14.GESTURE_END,
         this.onGestureEnd,
         false
       ),
       addEventListener2(
         window,
-        EVENT13.FOCUS,
+        EVENT14.FOCUS,
         () => {
           this.maybeCleanupAfterMissingPointerUp(null);
           this.triggerRender(true);
@@ -36822,32 +36957,32 @@ var App = class _App extends React43.Component {
     this.onRemoveEventListenersEmitter.once(
       addEventListener2(
         document,
-        EVENT13.FULLSCREENCHANGE,
+        EVENT14.FULLSCREENCHANGE,
         this.onFullscreenChange,
         { passive: false }
       ),
-      addEventListener2(document, EVENT13.PASTE, this.pasteFromClipboard, {
+      addEventListener2(document, EVENT14.PASTE, this.pasteFromClipboard, {
         passive: false
       }),
-      addEventListener2(document, EVENT13.CUT, this.onCut, { passive: false }),
-      addEventListener2(window, EVENT13.RESIZE, this.onResize, false),
-      addEventListener2(window, EVENT13.UNLOAD, this.onUnload, false),
-      addEventListener2(window, EVENT13.BLUR, this.onBlur, false),
+      addEventListener2(document, EVENT14.CUT, this.onCut, { passive: false }),
+      addEventListener2(window, EVENT14.RESIZE, this.onResize, false),
+      addEventListener2(window, EVENT14.UNLOAD, this.onUnload, false),
+      addEventListener2(window, EVENT14.BLUR, this.onBlur, false),
       addEventListener2(
         this.excalidrawContainerRef.current,
-        EVENT13.WHEEL,
+        EVENT14.WHEEL,
         this.handleWheel,
         { passive: false }
       ),
       addEventListener2(
         this.excalidrawContainerRef.current,
-        EVENT13.DRAG_OVER,
+        EVENT14.DRAG_OVER,
         this.disableEvent,
         false
       ),
       addEventListener2(
         this.excalidrawContainerRef.current,
-        EVENT13.DROP,
+        EVENT14.DROP,
         this.disableEvent,
         false
       )
@@ -36856,7 +36991,7 @@ var App = class _App extends React43.Component {
       this.onRemoveEventListenersEmitter.once(
         addEventListener2(
           getNearestScrollableContainer(this.excalidrawContainerRef.current),
-          EVENT13.SCROLL,
+          EVENT14.SCROLL,
           this.onScroll,
           { passive: false }
         )
@@ -36962,6 +37097,115 @@ var App = class _App extends React43.Component {
   }
   static resetTapTwice() {
     didTapTwice = false;
+    firstTapPosition = null;
+  }
+  // TODO: Cover with tests
+  async insertClipboardContent(data, dataTransferFiles, isPlainPaste) {
+    const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords4(
+      {
+        clientX: this.lastViewportPosition.x,
+        clientY: this.lastViewportPosition.y
+      },
+      this.state
+    );
+    if (data.errorMessage) {
+      this.setState({ errorMessage: data.errorMessage });
+      return;
+    }
+    if (dataTransferFiles.length === 0 && !isPlainPaste && data.mixedContent) {
+      await this.addElementsFromMixedContentPaste(data.mixedContent, {
+        isPlainPaste,
+        sceneX,
+        sceneY
+      });
+      return;
+    }
+    if (data.spreadsheet && !isPlainPaste) {
+      this.setState({
+        pasteDialog: {
+          data: data.spreadsheet,
+          shown: true
+        }
+      });
+      return;
+    }
+    const imageFiles = dataTransferFiles.map((data2) => data2.file);
+    if (imageFiles.length === 0 && data.text && !isPlainPaste) {
+      const trimmedText = data.text.trim();
+      if (trimmedText.startsWith("<svg") && trimmedText.endsWith("</svg>")) {
+        imageFiles.push(SVGStringToFile(trimmedText));
+      }
+    }
+    if (imageFiles.length > 0) {
+      if (this.isToolSupported("image")) {
+        await this.insertImages(imageFiles, sceneX, sceneY);
+      } else {
+        this.setState({ errorMessage: t("errors.imageToolNotSupported") });
+      }
+      return;
+    }
+    if (data.elements) {
+      const elements = data.programmaticAPI ? convertToExcalidrawElements(
+        data.elements
+      ) : data.elements;
+      this.addElementsFromPasteOrLibrary({
+        elements,
+        files: data.files || null,
+        position: this.isMobileOrTablet() ? "center" : "cursor",
+        retainSeed: isPlainPaste
+      });
+      return;
+    }
+    if (!data.text) {
+      return;
+    }
+    if (!isPlainPaste && isMaybeMermaidDefinition(data.text)) {
+      const api = await import("@excalidraw/mermaid-to-excalidraw");
+      try {
+        const { elements: skeletonElements, files } = await api.parseMermaidToExcalidraw(data.text);
+        const elements = convertToExcalidrawElements(skeletonElements, {
+          regenerateIds: true
+        });
+        this.addElementsFromPasteOrLibrary({
+          elements,
+          files,
+          position: this.isMobileOrTablet() ? "center" : "cursor"
+        });
+        return;
+      } catch (err) {
+        console.warn(
+          `parsing pasted text as mermaid definition failed: ${err.message}`
+        );
+      }
+    }
+    const nonEmptyLines = normalizeEOL2(data.text).split(/\n+/).map((s) => s.trim()).filter(Boolean);
+    const embbeddableUrls = nonEmptyLines.map((str) => maybeParseEmbedSrc(str)).filter(
+      (string) => embeddableURLValidator2(string, this.props.validateEmbeddable) && (/^(http|https):\/\/[^\s/$.?#].[^\s]*$/.test(string) || getEmbedLink2(string)?.type === "video")
+    );
+    if (!isPlainPaste && embbeddableUrls.length > 0 && embbeddableUrls.length === nonEmptyLines.length) {
+      const embeddables = [];
+      for (const url of embbeddableUrls) {
+        const prevEmbeddable = embeddables[embeddables.length - 1];
+        const embeddable = this.insertEmbeddableElement({
+          sceneX: prevEmbeddable ? prevEmbeddable.x + prevEmbeddable.width + 20 : sceneX,
+          sceneY,
+          link: normalizeLink3(url)
+        });
+        if (embeddable) {
+          embeddables.push(embeddable);
+        }
+      }
+      if (embeddables.length) {
+        this.store.scheduleCapture();
+        this.setState({
+          selectedElementIds: Object.fromEntries(
+            embeddables.map((embeddable) => [embeddable.id, true])
+          )
+        });
+      }
+      return;
+    }
+    this.addTextFromPaste(data.text, isPlainPaste);
   }
   // TODO rewrite this to paste both text & images at the same time if
   // pasted data contains both
@@ -36987,37 +37231,8 @@ var App = class _App extends React43.Component {
           }
         })
       );
-      let y = sceneY;
-      let firstImageYOffsetDone = false;
-      const nextSelectedIds = {};
-      for (const response of responses) {
-        if (response.file) {
-          const initializedImageElement = await this.createImageElement({
-            sceneX,
-            sceneY: y,
-            imageFile: response.file
-          });
-          if (initializedImageElement) {
-            if (!firstImageYOffsetDone) {
-              firstImageYOffsetDone = true;
-              y -= initializedImageElement.height / 2;
-            }
-            this.scene.mutateElement(
-              initializedImageElement,
-              { y },
-              { informMutation: false, isDragging: false }
-            );
-            y = initializedImageElement.y + initializedImageElement.height + 25;
-            nextSelectedIds[initializedImageElement.id] = true;
-          }
-        }
-      }
-      this.setState({
-        selectedElementIds: makeNextSelectedElementIds2(
-          nextSelectedIds,
-          this.state
-        )
-      });
+      const imageFiles = responses.filter((response) => !!response.file).map((response) => response.file);
+      await this.insertImages(imageFiles, sceneX, sceneY);
       const error = responses.find((response) => !!response.errorMessage);
       if (error && error.errorMessage) {
         this.setState({ errorMessage: error.errorMessage });
@@ -37134,7 +37349,7 @@ var App = class _App extends React43.Component {
         // Not sure why we include deleted elements as well hence using deleted elements map
         ...this.scene.getElementsIncludingDeleted().map((_element) => {
           if (_element.id === element.id && isTextElement19(_element)) {
-            return newElementWith10(_element, {
+            return newElementWith11(_element, {
               originalText: nextOriginalText,
               isDeleted: isDeleted ?? _element.isDeleted,
               // returns (wrapped) text and new dimensions
@@ -37174,13 +37389,7 @@ var App = class _App extends React43.Component {
       }),
       onSubmit: withBatchedUpdates(({ viaKeyboard, nextOriginalText }) => {
         const isDeleted = !nextOriginalText.trim();
-        if (isDeleted && !isExistingElement) {
-          this.scene.replaceAllElements(
-            this.scene.getElementsIncludingDeleted().filter((x) => x.id !== element.id)
-          );
-        } else {
-          updateElement(nextOriginalText, isDeleted);
-        }
+        updateElement(nextOriginalText, isDeleted);
         if (!isDeleted && viaKeyboard) {
           const elementIdToSelect = element.containerId ? element.containerId : element.id;
           flushSync3(() => {
@@ -37200,7 +37409,9 @@ var App = class _App extends React43.Component {
             element
           ]);
         }
-        this.store.scheduleCapture();
+        if (!isDeleted || isExistingElement) {
+          this.store.scheduleCapture();
+        }
         flushSync3(() => {
           this.setState({
             newElement: null,
@@ -37262,7 +37473,7 @@ var App = class _App extends React43.Component {
       }
       const elementWithHighestZIndex = allHitElements[allHitElements.length - 1];
       return hitElementItself({
-        point: pointFrom28(x, y),
+        point: pointFrom29(x, y),
         element: elementWithHighestZIndex,
         // when overlapping, we would like to be more precise
         // this also avoids the need to update past tests
@@ -37306,7 +37517,7 @@ var App = class _App extends React43.Component {
   hitElement(x, y, element, considerBoundingBox = true) {
     if (considerBoundingBox && this.state.selectedElementIds[element.id] && shouldShowBoundingBox2([element], this.state)) {
       if (hitElementBoundingBox2(
-        pointFrom28(x, y),
+        pointFrom29(x, y),
         element,
         this.scene.getNonDeletedElementsMap(),
         this.getElementHitThreshold(element)
@@ -37315,7 +37526,7 @@ var App = class _App extends React43.Component {
       }
     }
     const hitBoundTextOfElement = hitElementBoundText(
-      pointFrom28(x, y),
+      pointFrom29(x, y),
       element,
       this.scene.getNonDeletedElementsMap()
     );
@@ -37323,7 +37534,7 @@ var App = class _App extends React43.Component {
       return true;
     }
     return hitElementItself({
-      point: pointFrom28(x, y),
+      point: pointFrom29(x, y),
       element,
       threshold: this.getElementHitThreshold(element),
       elementsMap: this.scene.getNonDeletedElementsMap(),
@@ -37346,7 +37557,7 @@ var App = class _App extends React43.Component {
         this.scene.getNonDeletedElementsMap()
       );
       if (isArrowElement12(elements[index]) && hitElementItself({
-        point: pointFrom28(x, y),
+        point: pointFrom29(x, y),
         element: elements[index],
         elementsMap: this.scene.getNonDeletedElementsMap(),
         threshold: this.getElementHitThreshold(elements[index])
@@ -37373,7 +37584,7 @@ var App = class _App extends React43.Component {
       let hoverPointIndex = -1;
       let segmentMidPointHoveredCoords = null;
       if (hitElementItself({
-        point: pointFrom28(scenePointerX, scenePointerY),
+        point: pointFrom29(scenePointerX, scenePointerY),
         element,
         elementsMap,
         threshold: this.getElementHitThreshold(element)
@@ -37399,7 +37610,9 @@ var App = class _App extends React43.Component {
             // Ebow arrows can only be moved when unconnected
             !isElbowArrow11(element) || !(element.startBinding || element.endBinding)
           ) {
-            setCursor(this.interactiveCanvas, CURSOR_TYPE4.MOVE);
+            if (this.state.activeTool.type !== "lasso" || Object.keys(this.state.selectedElementIds).length > 0) {
+              setCursor(this.interactiveCanvas, CURSOR_TYPE4.MOVE);
+            }
           }
         }
       } else if (this.hitElement(scenePointerX, scenePointerY, element)) {
@@ -37407,7 +37620,9 @@ var App = class _App extends React43.Component {
           // Ebow arrows can only be moved when unconnected
           !isElbowArrow11(element) || !(element.startBinding || element.endBinding)
         ) {
-          setCursor(this.interactiveCanvas, CURSOR_TYPE4.MOVE);
+          if (this.state.activeTool.type !== "lasso" || Object.keys(this.state.selectedElementIds).length > 0) {
+            setCursor(this.interactiveCanvas, CURSOR_TYPE4.MOVE);
+          }
         }
       }
       if (this.state.selectedLinearElement.hoverPointIndex !== hoverPointIndex) {
@@ -37492,7 +37707,8 @@ var App = class _App extends React43.Component {
       drag: {
         hasOccurred: false,
         offset: null,
-        origin: { ...origin }
+        origin: { ...origin },
+        blockDragging: false
       },
       eventListeners: {
         onMove: null,
@@ -37528,13 +37744,13 @@ var App = class _App extends React43.Component {
         cursorButton: "up"
       });
       this.savePointer(event.clientX, event.clientY, "up");
-      window.removeEventListener(EVENT13.POINTER_MOVE, onPointerMove);
-      window.removeEventListener(EVENT13.POINTER_UP, onPointerUp);
+      window.removeEventListener(EVENT14.POINTER_MOVE, onPointerMove);
+      window.removeEventListener(EVENT14.POINTER_UP, onPointerUp);
       onPointerMove.flush();
     });
     lastPointerUp = onPointerUp;
-    window.addEventListener(EVENT13.POINTER_MOVE, onPointerMove);
-    window.addEventListener(EVENT13.POINTER_UP, onPointerUp);
+    window.addEventListener(EVENT14.POINTER_MOVE, onPointerMove);
+    window.addEventListener(EVENT14.POINTER_UP, onPointerUp);
     return true;
   }
   isASelectedElement(hitElement) {
@@ -37688,8 +37904,8 @@ var App = class _App extends React43.Component {
       );
       if (!pointerDownState.drag.hasOccurred && (this.state.activeTool.type === "arrow" || this.state.activeTool.type === "line")) {
         if (pointDistance8(
-          pointFrom28(pointerCoords.x, pointerCoords.y),
-          pointFrom28(pointerDownState.origin.x, pointerDownState.origin.y)
+          pointFrom29(pointerCoords.x, pointerCoords.y),
+          pointFrom29(pointerDownState.origin.x, pointerDownState.origin.y)
         ) * this.state.zoom.value < MINIMUM_ARROW_SIZE) {
           return;
         }
@@ -37758,9 +37974,9 @@ var App = class _App extends React43.Component {
         (element) => this.isASelectedElement(element)
       );
       const isSelectingPointsInLineEditor = this.state.selectedLinearElement?.isEditing && event.shiftKey && this.state.selectedLinearElement.elementId === pointerDownState.hit.element?.id;
-      if ((hasHitASelectedElement || pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements) && !isSelectingPointsInLineEditor && this.state.activeTool.type !== "lasso") {
+      if ((hasHitASelectedElement || pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements) && !isSelectingPointsInLineEditor && !pointerDownState.drag.blockDragging) {
         const selectedElements = this.scene.getSelectedElements(this.state);
-        if (selectedElements.every((element) => element.locked)) {
+        if (selectedElements.length > 0 && selectedElements.every((element) => element.locked)) {
           return;
         }
         const selectedElementsHasAFrame = selectedElements.find(
@@ -37774,6 +37990,12 @@ var App = class _App extends React43.Component {
           });
         }
         pointerDownState.drag.hasOccurred = true;
+        if (this.state.activeTool.type === "lasso" && this.lassoTrail.hasCurrentTrail && !(this.isMobileOrTablet() && pointerDownState.hit.element) && !this.state.activeTool.fromSelection) {
+          return;
+        }
+        if (this.state.activeTool.type === "lasso" && selectedElements.length > 0 && pointerDownState.drag.hasOccurred && !this.state.activeTool.fromSelection) {
+          this.lassoTrail.endPath();
+        }
         if (selectedElements.length > 0 && !pointerDownState.withCmdOrCtrl && !this.state.editingTextElement && this.state.activeEmbeddable?.state !== "active") {
           const dragOffset = {
             x: pointerCoords.x - pointerDownState.drag.origin.x,
@@ -37813,23 +38035,23 @@ var App = class _App extends React43.Component {
                   elementsMap
                 );
                 const topLeft = vectorFromPoint9(
-                  pointRotateRads16(
-                    pointFrom28(x1, y1),
-                    pointFrom28(cx, cy),
+                  pointRotateRads17(
+                    pointFrom29(x1, y1),
+                    pointFrom29(cx, cy),
                     croppingElement.angle
                   )
                 );
                 const topRight = vectorFromPoint9(
-                  pointRotateRads16(
-                    pointFrom28(x2, y1),
-                    pointFrom28(cx, cy),
+                  pointRotateRads17(
+                    pointFrom29(x2, y1),
+                    pointFrom29(cx, cy),
                     croppingElement.angle
                   )
                 );
                 const bottomLeft = vectorFromPoint9(
-                  pointRotateRads16(
-                    pointFrom28(x1, y2),
-                    pointFrom28(cx, cy),
+                  pointRotateRads17(
+                    pointFrom29(x1, y2),
+                    pointFrom29(cx, cy),
                     croppingElement.angle
                   )
                 );
@@ -37950,7 +38172,7 @@ var App = class _App extends React43.Component {
               if (idsOfElementsToDuplicate.has(el.id)) {
                 const origEl = pointerDownState.originalElements.get(el.id);
                 if (origEl) {
-                  return newElementWith10(el, {
+                  return newElementWith11(el, {
                     x: origEl.x,
                     y: origEl.y
                   });
@@ -38054,7 +38276,7 @@ var App = class _App extends React43.Component {
             this.scene.mutateElement(
               newElement6,
               {
-                points: [...points, pointFrom28(dx, dy)],
+                points: [...points, pointFrom29(dx, dy)],
                 pressures
               },
               {
@@ -38083,7 +38305,7 @@ var App = class _App extends React43.Component {
             this.scene.mutateElement(
               newElement6,
               {
-                points: [...points, pointFrom28(dx, dy)]
+                points: [...points, pointFrom29(dx, dy)]
               },
               { informMutation: false, isDragging: false }
             );
@@ -38091,7 +38313,7 @@ var App = class _App extends React43.Component {
             this.scene.mutateElement(
               newElement6,
               {
-                points: [...points.slice(0, -1), pointFrom28(dx, dy)]
+                points: [...points.slice(0, -1), pointFrom29(dx, dy)]
               },
               { isDragging: true, informMutation: false }
             );
@@ -38219,6 +38441,7 @@ var App = class _App extends React43.Component {
   onPointerUpFromPointerDownHandler(pointerDownState) {
     return withBatchedUpdates((childEvent) => {
       this.removePointer(childEvent);
+      pointerDownState.drag.blockDragging = false;
       if (pointerDownState.eventListeners.onMove) {
         pointerDownState.eventListeners.onMove.flush();
       }
@@ -38333,19 +38556,19 @@ var App = class _App extends React43.Component {
       }
       this.missingPointerEventCleanupEmitter.clear();
       window.removeEventListener(
-        EVENT13.POINTER_MOVE,
+        EVENT14.POINTER_MOVE,
         pointerDownState.eventListeners.onMove
       );
       window.removeEventListener(
-        EVENT13.POINTER_UP,
+        EVENT14.POINTER_UP,
         pointerDownState.eventListeners.onUp
       );
       window.removeEventListener(
-        EVENT13.KEYDOWN,
+        EVENT14.KEYDOWN,
         pointerDownState.eventListeners.onKeyDown
       );
       window.removeEventListener(
-        EVENT13.KEYUP,
+        EVENT14.KEYUP,
         pointerDownState.eventListeners.onKeyUp
       );
       this.props?.onPointerUp?.(activeTool, pointerDownState);
@@ -38368,9 +38591,9 @@ var App = class _App extends React43.Component {
         }
         const pressures = newElement6.simulatePressure ? [] : [...newElement6.pressures, childEvent.pressure];
         this.scene.mutateElement(newElement6, {
-          points: [...points, pointFrom28(dx, dy)],
+          points: [...points, pointFrom29(dx, dy)],
           pressures,
-          lastCommittedPoint: pointFrom28(dx, dy)
+          lastCommittedPoint: pointFrom29(dx, dy)
         });
         this.actionManager.executeAction(actionFinalize);
         return;
@@ -38384,8 +38607,8 @@ var App = class _App extends React43.Component {
           this.state
         );
         const dragDistance = pointDistance8(
-          pointFrom28(pointerCoords.x, pointerCoords.y),
-          pointFrom28(pointerDownState.origin.x, pointerDownState.origin.y)
+          pointFrom29(pointerCoords.x, pointerCoords.y),
+          pointFrom29(pointerDownState.origin.x, pointerDownState.origin.y)
         ) * this.state.zoom.value;
         if ((!pointerDownState.drag.hasOccurred || dragDistance < MINIMUM_ARROW_SIZE) && newElement6 && !multiElement) {
           if (this.device.isTouchScreen) {
@@ -38398,8 +38621,8 @@ var App = class _App extends React43.Component {
               {
                 x: newElement6.x - FIXED_DELTA_X / 2,
                 points: [
-                  pointFrom28(0, 0),
-                  pointFrom28(FIXED_DELTA_X, 0)
+                  pointFrom29(0, 0),
+                  pointFrom29(FIXED_DELTA_X, 0)
                 ]
               },
               { informMutation: false, isDragging: false }
@@ -38411,7 +38634,7 @@ var App = class _App extends React43.Component {
             this.scene.mutateElement(
               newElement6,
               {
-                points: [...newElement6.points, pointFrom28(dx, dy)]
+                points: [...newElement6.points, pointFrom29(dx, dy)]
               },
               { informMutation: false, isDragging: false }
             );
@@ -38433,7 +38656,7 @@ var App = class _App extends React43.Component {
             this.setState((prevState) => ({
               newElement: null,
               activeTool: updateActiveTool7(this.state, {
-                type: "selection"
+                type: this.defaultSelectionTool
               }),
               selectedElementIds: makeNextSelectedElementIds2(
                 {
@@ -38660,8 +38883,8 @@ var App = class _App extends React43.Component {
       if (isEraserActive(this.state) && pointerStart && pointerEnd) {
         this.eraserTrail.endPath();
         const draggedDistance = pointDistance8(
-          pointFrom28(pointerStart.clientX, pointerStart.clientY),
-          pointFrom28(pointerEnd.clientX, pointerEnd.clientY)
+          pointFrom29(pointerStart.clientX, pointerStart.clientY),
+          pointFrom29(pointerEnd.clientX, pointerEnd.clientY)
         );
         if (draggedDistance === 0) {
           const scenePointer = viewportCoordsToSceneCoords4(
@@ -38807,7 +39030,7 @@ var App = class _App extends React43.Component {
         !this.state.isResizing && // only hitting the bounding box of the previous hit element
         (hitElement && hitElementBoundingBoxOnly(
           {
-            point: pointFrom28(
+            point: pointFrom29(
               pointerDownState.origin.x,
               pointerDownState.origin.y
             ),
@@ -38870,7 +39093,9 @@ var App = class _App extends React43.Component {
         this.setState({
           newElement: null,
           suggestedBindings: [],
-          activeTool: updateActiveTool7(this.state, { type: "selection" })
+          activeTool: updateActiveTool7(this.state, {
+            type: this.defaultSelectionTool
+          })
         });
       } else {
         this.setState({
@@ -39393,7 +39618,7 @@ import { isLinearElement as isLinearElement14 } from "@excalidraw/element";
 import {
   FONT_FAMILY as FONT_FAMILY5,
   THEME as THEME16,
-  MIME_TYPES as MIME_TYPES9,
+  MIME_TYPES as MIME_TYPES10,
   ROUNDNESS as ROUNDNESS3,
   DEFAULT_LASER_COLOR as DEFAULT_LASER_COLOR2,
   UserIdleState as UserIdleState2,
@@ -39401,7 +39626,7 @@ import {
 } from "@excalidraw/common";
 import {
   mutateElement as mutateElement2,
-  newElementWith as newElementWith11,
+  newElementWith as newElementWith12,
   bumpVersion
 } from "@excalidraw/element";
 import { CaptureUpdateAction as CaptureUpdateAction38 } from "@excalidraw/element";
@@ -39613,7 +39838,7 @@ export {
   FONT_FAMILY5 as FONT_FAMILY,
   FooterCenter_default as Footer,
   LiveCollaborationTrigger_default as LiveCollaborationTrigger,
-  MIME_TYPES9 as MIME_TYPES,
+  MIME_TYPES10 as MIME_TYPES,
   MainMenu_default as MainMenu,
   ROUNDNESS3 as ROUNDNESS,
   Sidebar,
@@ -39652,12 +39877,13 @@ export {
   loadSceneOrLibraryFromBlob,
   mergeLibraryItems,
   mutateElement2 as mutateElement,
-  newElementWith11 as newElementWith,
+  newElementWith12 as newElementWith,
   normalizeLink4 as normalizeLink,
   parseLibraryTokensFromUrl,
   reconcileElements,
   restore,
   restoreAppState,
+  restoreElement,
   restoreElements,
   restoreLibraryItems,
   sceneCoordsToViewportCoords2 as sceneCoordsToViewportCoords,