From d797c2e2108a97f1eb80eac30c763240282e14a2 Mon Sep 17 00:00:00 2001
From: David Luzar <5153846+dwelle@users.noreply.github.com>
Date: Sat, 29 Mar 2025 19:31:16 +0100
Subject: [PATCH 01/23] fix: strip legacy attrs on element restore (#9318)

---
 packages/excalidraw/data/restore.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/excalidraw/data/restore.ts b/packages/excalidraw/data/restore.ts
index d1002e61f3..30702f130e 100644
--- a/packages/excalidraw/data/restore.ts
+++ b/packages/excalidraw/data/restore.ts
@@ -221,7 +221,7 @@ const restoreElementWithProperties = <
       "customData" in extra ? extra.customData : element.customData;
   }
 
-  return {
+  const ret = {
     // spread the original element properties to not lose unknown ones
     // for forward-compatibility
     ...element,
@@ -230,6 +230,12 @@ const restoreElementWithProperties = <
     ...getNormalizedDimensions(base),
     ...extra,
   } as unknown as T;
+
+  // strip legacy props (migrated in previous steps)
+  delete ret.strokeSharpness;
+  delete ret.boundElementIds;
+
+  return ret;
 };
 
 const restoreElement = (

From f2e8404c7bee230c12e78747492fd120a7929a67 Mon Sep 17 00:00:00 2001
From: David Luzar <5153846+dwelle@users.noreply.github.com>
Date: Sat, 29 Mar 2025 19:42:33 +0100
Subject: [PATCH 02/23] feat: allow to disable preventUnload in dev (#9319)

* feat: allow to disable preventUnload in dev

* add template
---
 .env.development                 | 3 +++
 excalidraw-app/App.tsx           | 8 +++++++-
 excalidraw-app/collab/Collab.tsx | 8 +++++++-
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/.env.development b/.env.development
index 5f69de1469..387ab6204d 100644
--- a/.env.development
+++ b/.env.development
@@ -48,3 +48,6 @@ UNWEjuqNMi/lwAErS9fFa2oJlWyT8U7zzv/5kQREkxZI6y9v0AF3qcbsy2731FnD
 s9ChJvOUW9toIab2gsIdrKW8ZNpu084ZFVKb6LNjvIXI1Se4oMTHeszXzNptzlot
 kdxxjOoaQMAyfljFSot1F1FlU6MQlag7UnFGvFjRHN1JI5q4K+n3a67DX+TMyRqS
 HQIDAQAB'
+
+# set to true in .env.development.local to disable the prevent unload dialog
+VITE_APP_DISABLE_PREVENT_UNLOAD=
diff --git a/excalidraw-app/App.tsx b/excalidraw-app/App.tsx
index 60e9b30083..bb62a0e96c 100644
--- a/excalidraw-app/App.tsx
+++ b/excalidraw-app/App.tsx
@@ -608,7 +608,13 @@ const ExcalidrawWrapper = () => {
           excalidrawAPI.getSceneElements(),
         )
       ) {
-        preventUnload(event);
+        if (import.meta.env.VITE_APP_DISABLE_PREVENT_UNLOAD !== "true") {
+          preventUnload(event);
+        } else {
+          console.warn(
+            "preventing unload disabled (VITE_APP_DISABLE_PREVENT_UNLOAD)",
+          );
+        }
       }
     };
     window.addEventListener(EVENT.BEFORE_UNLOAD, unloadHandler);
diff --git a/excalidraw-app/collab/Collab.tsx b/excalidraw-app/collab/Collab.tsx
index f6f7630412..98c66e4257 100644
--- a/excalidraw-app/collab/Collab.tsx
+++ b/excalidraw-app/collab/Collab.tsx
@@ -301,7 +301,13 @@ class Collab extends PureComponent<CollabProps, CollabState> {
       //  the purpose is to run in immediately after user decides to stay
       this.saveCollabRoomToFirebase(syncableElements);
 
-      preventUnload(event);
+      if (import.meta.env.VITE_APP_DISABLE_PREVENT_UNLOAD !== "true") {
+        preventUnload(event);
+      } else {
+        console.warn(
+          "preventing unload disabled (VITE_APP_DISABLE_PREVENT_UNLOAD)",
+        );
+      }
     }
   });
 

From 83fac6d0db2cceaecb35b66a4dd4e116e607816d Mon Sep 17 00:00:00 2001
From: David Luzar <5153846+dwelle@users.noreply.github.com>
Date: Sun, 30 Mar 2025 19:00:31 +0200
Subject: [PATCH 03/23] feat: tweak stats panel input styles (#9321)

---
 .../components/Stats/DragInput.scss           | 32 ++++---------------
 .../excalidraw/components/Stats/Stats.scss    |  4 +++
 .../excalidraw/components/Stats/index.tsx     |  6 +++-
 3 files changed, 15 insertions(+), 27 deletions(-)

diff --git a/packages/excalidraw/components/Stats/DragInput.scss b/packages/excalidraw/components/Stats/DragInput.scss
index 76b9d147b1..f31616d949 100644
--- a/packages/excalidraw/components/Stats/DragInput.scss
+++ b/packages/excalidraw/components/Stats/DragInput.scss
@@ -2,10 +2,12 @@
   .drag-input-container {
     display: flex;
     width: 100%;
+    border-radius: var(--border-radius-lg);
 
     &:focus-within {
       box-shadow: 0 0 0 1px var(--color-primary-darkest);
       border-radius: var(--border-radius-md);
+      background: transparent;
     }
   }
 
@@ -16,24 +18,14 @@
 
   .drag-input-label {
     flex-shrink: 0;
-    border: 1px solid var(--default-border-color);
-    border-right: 0;
-    padding: 0 0.5rem 0 0.75rem;
+    border: 0;
+    padding: 0 0.5rem 0 0.25rem;
     min-width: 1rem;
+    width: 1.5rem;
     height: 2rem;
-    box-sizing: border-box;
+    box-sizing: content-box;
     color: var(--popup-text-color);
 
-    :root[dir="ltr"] & {
-      border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);
-    }
-
-    :root[dir="rtl"] & {
-      border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
-      border-right: 1px solid var(--default-border-color);
-      border-left: 0;
-    }
-
     display: flex;
     align-items: center;
     justify-content: center;
@@ -51,20 +43,8 @@
     border: 0;
     outline: none;
     height: 2rem;
-    border: 1px solid var(--default-border-color);
-    border-left: 0;
     letter-spacing: 0.4px;
 
-    :root[dir="ltr"] & {
-      border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
-    }
-
-    :root[dir="rtl"] & {
-      border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);
-      border-left: 1px solid var(--default-border-color);
-      border-right: 0;
-    }
-
     padding: 0.5rem;
     padding-left: 0.25rem;
     appearance: none;
diff --git a/packages/excalidraw/components/Stats/Stats.scss b/packages/excalidraw/components/Stats/Stats.scss
index 106ecf303f..384e0fd3c5 100644
--- a/packages/excalidraw/components/Stats/Stats.scss
+++ b/packages/excalidraw/components/Stats/Stats.scss
@@ -41,6 +41,10 @@
     div + div {
       text-align: right;
     }
+
+    &:empty {
+      display: none;
+    }
   }
 
   &__row--heading {
diff --git a/packages/excalidraw/components/Stats/index.tsx b/packages/excalidraw/components/Stats/index.tsx
index 889f789717..11a5d6b5d3 100644
--- a/packages/excalidraw/components/Stats/index.tsx
+++ b/packages/excalidraw/components/Stats/index.tsx
@@ -289,7 +289,11 @@ export const StatsInner = memo(
                           </StatsRow>
                         )}
 
-                      <StatsRow heading data-testid="stats-element-type">
+                      <StatsRow
+                        heading
+                        data-testid="stats-element-type"
+                        style={{ margin: "0.3125rem 0" }}
+                      >
                         {appState.croppingElementId
                           ? t("labels.imageCropping")
                           : t(`element.${singleElement.type}`)}

From 7c58477382883026b65ca770f31b87ff153654f8 Mon Sep 17 00:00:00 2001
From: David Luzar <5153846+dwelle@users.noreply.github.com>
Date: Sun, 30 Mar 2025 19:20:13 +0200
Subject: [PATCH 04/23] feat: tweak properties panel styling (#9322)

---
 .../components/ColorPicker/ColorPicker.scss   | 36 ++++++++++---------
 packages/excalidraw/components/Range.scss     |  2 +-
 packages/excalidraw/css/styles.scss           | 12 +++++--
 3 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/packages/excalidraw/components/ColorPicker/ColorPicker.scss b/packages/excalidraw/components/ColorPicker/ColorPicker.scss
index 39e1845c3f..bcb39281d1 100644
--- a/packages/excalidraw/components/ColorPicker/ColorPicker.scss
+++ b/packages/excalidraw/components/ColorPicker/ColorPicker.scss
@@ -15,7 +15,7 @@
 
   .color-picker-container {
     display: grid;
-    grid-template-columns: 1fr 20px 1.625rem;
+    grid-template-columns: 1fr 8px 1.625rem;
     padding: 0.25rem 0px;
     align-items: center;
 
@@ -30,13 +30,14 @@
   }
 
   .color-picker__button {
-    --radius: 0.25rem;
+    --radius: 6px;
+    --size: 1.375rem;
 
     padding: 0;
-    margin: 0;
-    width: 1.35rem;
-    height: 1.35rem;
-    border: 1px solid var(--color-gray-30);
+    margin: 1px;
+    width: var(--size);
+    height: var(--size);
+    border: 0;
     border-radius: var(--radius);
     filter: var(--theme-filter);
     background-color: var(--swatch-color);
@@ -45,16 +46,16 @@
     font-family: inherit;
     box-sizing: border-box;
 
-    &:hover {
+    &:hover:not(.active) {
       &::after {
         content: "";
         position: absolute;
-        top: -2px;
-        left: -2px;
-        right: -2px;
-        bottom: -2px;
-        box-shadow: 0 0 0 1px var(--color-gray-30);
-        border-radius: calc(var(--radius) + 1px);
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        box-shadow: 0 0 0 1px var(--swatch-color);
+        border-radius: var(--radius);
         filter: var(--theme-filter);
       }
     }
@@ -62,10 +63,11 @@
     &.active {
       .color-picker__button-outline {
         position: absolute;
-        top: -2px;
-        left: -2px;
-        right: -2px;
-        bottom: -2px;
+        --offset: -1px;
+        top: var(--offset);
+        left: var(--offset);
+        right: var(--offset);
+        bottom: var(--offset);
         box-shadow: 0 0 0 1px var(--color-primary-darkest);
         z-index: 1; // due hover state so this has preference
         border-radius: calc(var(--radius) + 1px);
diff --git a/packages/excalidraw/components/Range.scss b/packages/excalidraw/components/Range.scss
index 01cb916897..8dcc705fea 100644
--- a/packages/excalidraw/components/Range.scss
+++ b/packages/excalidraw/components/Range.scss
@@ -6,7 +6,7 @@
   .range-wrapper {
     position: relative;
     padding-top: 10px;
-    padding-bottom: 30px;
+    padding-bottom: 25px;
   }
 
   .range-input {
diff --git a/packages/excalidraw/css/styles.scss b/packages/excalidraw/css/styles.scss
index 6f1d9cd48c..33f9b4df04 100644
--- a/packages/excalidraw/css/styles.scss
+++ b/packages/excalidraw/css/styles.scss
@@ -173,7 +173,7 @@ body.excalidraw-cursor-resize * {
     .buttonList {
       flex-wrap: wrap;
       display: flex;
-      column-gap: 0.5rem;
+      column-gap: 0.375rem;
       row-gap: 0.5rem;
 
       label {
@@ -386,10 +386,16 @@ body.excalidraw-cursor-resize * {
 
   .App-menu__left {
     overflow-y: auto;
-    padding: 0.75rem;
-    width: 12.5rem;
+    padding: 0.75rem 0.75rem 0.25rem 0.75rem;
+    width: 11.875rem;
     box-sizing: border-box;
     position: absolute;
+
+    .buttonList label,
+    .buttonList button,
+    .buttonList .zIndexButton {
+      --button-bg: transparent;
+    }
   }
 
   .dropdown-select {

From 57a9e301d44f319e160f618413e8fcbb7d2e1ad4 Mon Sep 17 00:00:00 2001
From: David Luzar <5153846+dwelle@users.noreply.github.com>
Date: Wed, 2 Apr 2025 14:36:13 +0200
Subject: [PATCH 05/23] feat: tweak color swatch, and button bgs (#9330)

* feat: tweak color swatch, and button bgs

* snapshots
---
 packages/common/src/colors.ts                 |  2 +
 .../components/ColorPicker/ColorPicker.scss   | 34 +++++++----
 .../components/ColorPicker/ColorPicker.tsx    |  9 ++-
 .../ColorPicker/CustomColorList.tsx           |  4 +-
 .../components/ColorPicker/HotkeyLabel.tsx    |  6 +-
 .../ColorPicker/PickerColorList.tsx           |  2 +-
 .../components/ColorPicker/ShadeList.tsx      |  2 +-
 .../components/ColorPicker/TopPicks.tsx       |  7 +++
 .../ColorPicker/colorPickerUtils.ts           | 58 +++++++++++++------
 packages/excalidraw/css/styles.scss           | 12 +---
 packages/excalidraw/css/theme.scss            |  4 +-
 .../__snapshots__/excalidraw.test.tsx.snap    | 12 ++--
 12 files changed, 94 insertions(+), 58 deletions(-)

diff --git a/packages/common/src/colors.ts b/packages/common/src/colors.ts
index 84d04bcf48..4dc45616f7 100644
--- a/packages/common/src/colors.ts
+++ b/packages/common/src/colors.ts
@@ -2,6 +2,8 @@ import oc from "open-color";
 
 import type { Merge } from "./utility-types";
 
+export const COLOR_OUTLINE_CONTRAST_THRESHOLD = 240;
+
 // FIXME can't put to utils.ts rn because of circular dependency
 const pick = <R extends Record<string, any>, K extends readonly (keyof R)[]>(
   source: R,
diff --git a/packages/excalidraw/components/ColorPicker/ColorPicker.scss b/packages/excalidraw/components/ColorPicker/ColorPicker.scss
index bcb39281d1..56b40869b0 100644
--- a/packages/excalidraw/components/ColorPicker/ColorPicker.scss
+++ b/packages/excalidraw/components/ColorPicker/ColorPicker.scss
@@ -15,7 +15,7 @@
 
   .color-picker-container {
     display: grid;
-    grid-template-columns: 1fr 8px 1.625rem;
+    grid-template-columns: 1fr 20px 1.625rem;
     padding: 0.25rem 0px;
     align-items: center;
 
@@ -27,14 +27,19 @@
   .color-picker__top-picks {
     display: flex;
     justify-content: space-between;
+    align-items: center;
   }
 
   .color-picker__button {
-    --radius: 6px;
+    --radius: 4px;
     --size: 1.375rem;
 
+    &.has-outline {
+      box-shadow: inset 0 0 0 1px #d9d9d9;
+    }
+
     padding: 0;
-    margin: 1px;
+    margin: 0;
     width: var(--size);
     height: var(--size);
     border: 0;
@@ -46,15 +51,19 @@
     font-family: inherit;
     box-sizing: border-box;
 
-    &:hover:not(.active) {
+    &:hover:not(.active):not(.color-picker__button--large) {
+      transform: scale(1.075);
+    }
+
+    &:hover:not(.active).color-picker__button--large {
       &::after {
         content: "";
         position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        box-shadow: 0 0 0 1px var(--swatch-color);
+        top: -1px;
+        left: -1px;
+        right: -1px;
+        bottom: -1px;
+        box-shadow: 0 0 0 1px var(--color-gray-30);
         border-radius: var(--radius);
         filter: var(--theme-filter);
       }
@@ -70,7 +79,7 @@
         bottom: var(--offset);
         box-shadow: 0 0 0 1px var(--color-primary-darkest);
         z-index: 1; // due hover state so this has preference
-        border-radius: calc(var(--radius) + 1px);
+        border-radius: var(--radius);
         filter: var(--theme-filter);
       }
     }
@@ -125,10 +134,11 @@
 
   .color-picker__button__hotkey-label {
     position: absolute;
-    right: 4px;
-    bottom: 4px;
+    right: 5px;
+    bottom: 3px;
     filter: none;
     font-size: 11px;
+    font-weight: 500;
   }
 
   .color-picker {
diff --git a/packages/excalidraw/components/ColorPicker/ColorPicker.tsx b/packages/excalidraw/components/ColorPicker/ColorPicker.tsx
index 34f6c6d126..eb6d82d9e5 100644
--- a/packages/excalidraw/components/ColorPicker/ColorPicker.tsx
+++ b/packages/excalidraw/components/ColorPicker/ColorPicker.tsx
@@ -2,7 +2,11 @@ import * as Popover from "@radix-ui/react-popover";
 import clsx from "clsx";
 import { useRef } from "react";
 
-import { COLOR_PALETTE, isTransparent } from "@excalidraw/common";
+import {
+  COLOR_OUTLINE_CONTRAST_THRESHOLD,
+  COLOR_PALETTE,
+  isTransparent,
+} from "@excalidraw/common";
 
 import type { ColorTuple, ColorPaletteCustom } from "@excalidraw/common";
 
@@ -19,7 +23,7 @@ import { ColorInput } from "./ColorInput";
 import { Picker } from "./Picker";
 import PickerHeading from "./PickerHeading";
 import { TopPicks } from "./TopPicks";
-import { activeColorPickerSectionAtom } from "./colorPickerUtils";
+import { activeColorPickerSectionAtom, isColorDark } from "./colorPickerUtils";
 
 import "./ColorPicker.scss";
 
@@ -190,6 +194,7 @@ const ColorPickerTrigger = ({
       type="button"
       className={clsx("color-picker__button active-color properties-trigger", {
         "is-transparent": color === "transparent" || !color,
+        "has-outline": !isColorDark(color, COLOR_OUTLINE_CONTRAST_THRESHOLD),
       })}
       aria-label={label}
       style={color ? { "--swatch-color": color } : undefined}
diff --git a/packages/excalidraw/components/ColorPicker/CustomColorList.tsx b/packages/excalidraw/components/ColorPicker/CustomColorList.tsx
index 2c735102a5..45d5db84c6 100644
--- a/packages/excalidraw/components/ColorPicker/CustomColorList.tsx
+++ b/packages/excalidraw/components/ColorPicker/CustomColorList.tsx
@@ -40,7 +40,7 @@ export const CustomColorList = ({
             tabIndex={-1}
             type="button"
             className={clsx(
-              "color-picker__button color-picker__button--large",
+              "color-picker__button color-picker__button--large has-outline",
               {
                 active: color === c,
                 "is-transparent": c === "transparent" || !c,
@@ -56,7 +56,7 @@ export const CustomColorList = ({
             key={i}
           >
             <div className="color-picker__button-outline" />
-            <HotkeyLabel color={c} keyLabel={i + 1} isCustomColor />
+            <HotkeyLabel color={c} keyLabel={i + 1} />
           </button>
         );
       })}
diff --git a/packages/excalidraw/components/ColorPicker/HotkeyLabel.tsx b/packages/excalidraw/components/ColorPicker/HotkeyLabel.tsx
index 6e4d5e39ce..898a289703 100644
--- a/packages/excalidraw/components/ColorPicker/HotkeyLabel.tsx
+++ b/packages/excalidraw/components/ColorPicker/HotkeyLabel.tsx
@@ -1,24 +1,22 @@
 import React from "react";
 
-import { getContrastYIQ } from "./colorPickerUtils";
+import { isColorDark } from "./colorPickerUtils";
 
 interface HotkeyLabelProps {
   color: string;
   keyLabel: string | number;
-  isCustomColor?: boolean;
   isShade?: boolean;
 }
 const HotkeyLabel = ({
   color,
   keyLabel,
-  isCustomColor = false,
   isShade = false,
 }: HotkeyLabelProps) => {
   return (
     <div
       className="color-picker__button__hotkey-label"
       style={{
-        color: getContrastYIQ(color, isCustomColor),
+        color: isColorDark(color) ? "#fff" : "#000",
       }}
     >
       {isShade && "⇧"}
diff --git a/packages/excalidraw/components/ColorPicker/PickerColorList.tsx b/packages/excalidraw/components/ColorPicker/PickerColorList.tsx
index 50594a59e1..38e5cf8c5e 100644
--- a/packages/excalidraw/components/ColorPicker/PickerColorList.tsx
+++ b/packages/excalidraw/components/ColorPicker/PickerColorList.tsx
@@ -65,7 +65,7 @@ const PickerColorList = ({
             tabIndex={-1}
             type="button"
             className={clsx(
-              "color-picker__button color-picker__button--large",
+              "color-picker__button color-picker__button--large has-outline",
               {
                 active: colorObj?.colorName === key,
                 "is-transparent": color === "transparent" || !color,
diff --git a/packages/excalidraw/components/ColorPicker/ShadeList.tsx b/packages/excalidraw/components/ColorPicker/ShadeList.tsx
index aa2c25ea0d..1c8e4c4eb4 100644
--- a/packages/excalidraw/components/ColorPicker/ShadeList.tsx
+++ b/packages/excalidraw/components/ColorPicker/ShadeList.tsx
@@ -55,7 +55,7 @@ export const ShadeList = ({ hex, onChange, palette }: ShadeListProps) => {
               key={i}
               type="button"
               className={clsx(
-                "color-picker__button color-picker__button--large",
+                "color-picker__button color-picker__button--large has-outline",
                 { active: i === shade },
               )}
               aria-label="Shade"
diff --git a/packages/excalidraw/components/ColorPicker/TopPicks.tsx b/packages/excalidraw/components/ColorPicker/TopPicks.tsx
index 6d18a95871..8531172fb3 100644
--- a/packages/excalidraw/components/ColorPicker/TopPicks.tsx
+++ b/packages/excalidraw/components/ColorPicker/TopPicks.tsx
@@ -1,11 +1,14 @@
 import clsx from "clsx";
 
 import {
+  COLOR_OUTLINE_CONTRAST_THRESHOLD,
   DEFAULT_CANVAS_BACKGROUND_PICKS,
   DEFAULT_ELEMENT_BACKGROUND_PICKS,
   DEFAULT_ELEMENT_STROKE_PICKS,
 } from "@excalidraw/common";
 
+import { isColorDark } from "./colorPickerUtils";
+
 import type { ColorPickerType } from "./colorPickerUtils";
 
 interface TopPicksProps {
@@ -51,6 +54,10 @@ export const TopPicks = ({
           className={clsx("color-picker__button", {
             active: color === activeColor,
             "is-transparent": color === "transparent" || !color,
+            "has-outline": !isColorDark(
+              color,
+              COLOR_OUTLINE_CONTRAST_THRESHOLD,
+            ),
           })}
           style={{ "--swatch-color": color }}
           key={color}
diff --git a/packages/excalidraw/components/ColorPicker/colorPickerUtils.ts b/packages/excalidraw/components/ColorPicker/colorPickerUtils.ts
index 4925a31451..f572bd49f3 100644
--- a/packages/excalidraw/components/ColorPicker/colorPickerUtils.ts
+++ b/packages/excalidraw/components/ColorPicker/colorPickerUtils.ts
@@ -93,19 +93,42 @@ export type ActiveColorPickerSectionAtomType =
 export const activeColorPickerSectionAtom =
   atom<ActiveColorPickerSectionAtomType>(null);
 
-const calculateContrast = (r: number, g: number, b: number) => {
+const calculateContrast = (r: number, g: number, b: number): number => {
   const yiq = (r * 299 + g * 587 + b * 114) / 1000;
-  return yiq >= 160 ? "black" : "white";
+  return yiq;
 };
 
-// inspiration from https://stackoverflow.com/a/11868398
-export const getContrastYIQ = (bgHex: string, isCustomColor: boolean) => {
-  if (isCustomColor) {
-    const style = new Option().style;
-    style.color = bgHex;
+// YIQ algo, inspiration from https://stackoverflow.com/a/11868398
+export const isColorDark = (color: string, threshold = 160): boolean => {
+  // no color ("") -> assume it default to black
+  if (!color) {
+    return true;
+  }
 
-    if (style.color) {
-      const rgb = style.color
+  if (color === "transparent") {
+    return false;
+  }
+
+  // a string color (white etc) or any other format -> convert to rgb by way
+  // of creating a DOM node and retrieving the computeStyle
+  if (!color.startsWith("#")) {
+    const node = document.createElement("div");
+    node.style.color = color;
+
+    if (node.style.color) {
+      // making invisible so document doesn't reflow (hopefully).
+      // display=none works too, but supposedly not in all browsers
+      node.style.position = "absolute";
+      node.style.visibility = "hidden";
+      node.style.width = "0";
+      node.style.height = "0";
+
+      // needs to be in DOM else browser won't compute the style
+      document.body.appendChild(node);
+      const computedColor = getComputedStyle(node).color;
+      document.body.removeChild(node);
+      // computed style is in rgb() format
+      const rgb = computedColor
         .replace(/^(rgb|rgba)\(/, "")
         .replace(/\)$/, "")
         .replace(/\s/g, "")
@@ -114,20 +137,17 @@ export const getContrastYIQ = (bgHex: string, isCustomColor: boolean) => {
       const g = parseInt(rgb[1]);
       const b = parseInt(rgb[2]);
 
-      return calculateContrast(r, g, b);
+      return calculateContrast(r, g, b) < threshold;
     }
+    // invalid color -> assume it default to black
+    return true;
   }
 
-  // TODO: ? is this wanted?
-  if (bgHex === "transparent") {
-    return "black";
-  }
+  const r = parseInt(color.slice(1, 3), 16);
+  const g = parseInt(color.slice(3, 5), 16);
+  const b = parseInt(color.slice(5, 7), 16);
 
-  const r = parseInt(bgHex.substring(1, 3), 16);
-  const g = parseInt(bgHex.substring(3, 5), 16);
-  const b = parseInt(bgHex.substring(5, 7), 16);
-
-  return calculateContrast(r, g, b);
+  return calculateContrast(r, g, b) < threshold;
 };
 
 export type ColorPickerType =
diff --git a/packages/excalidraw/css/styles.scss b/packages/excalidraw/css/styles.scss
index 33f9b4df04..6f1d9cd48c 100644
--- a/packages/excalidraw/css/styles.scss
+++ b/packages/excalidraw/css/styles.scss
@@ -173,7 +173,7 @@ body.excalidraw-cursor-resize * {
     .buttonList {
       flex-wrap: wrap;
       display: flex;
-      column-gap: 0.375rem;
+      column-gap: 0.5rem;
       row-gap: 0.5rem;
 
       label {
@@ -386,16 +386,10 @@ body.excalidraw-cursor-resize * {
 
   .App-menu__left {
     overflow-y: auto;
-    padding: 0.75rem 0.75rem 0.25rem 0.75rem;
-    width: 11.875rem;
+    padding: 0.75rem;
+    width: 12.5rem;
     box-sizing: border-box;
     position: absolute;
-
-    .buttonList label,
-    .buttonList button,
-    .buttonList .zIndexButton {
-      --button-bg: transparent;
-    }
   }
 
   .dropdown-select {
diff --git a/packages/excalidraw/css/theme.scss b/packages/excalidraw/css/theme.scss
index fd6a8dacb5..1d6a569665 100644
--- a/packages/excalidraw/css/theme.scss
+++ b/packages/excalidraw/css/theme.scss
@@ -148,7 +148,7 @@
   --border-radius-lg: 0.5rem;
 
   --color-surface-high: #f1f0ff;
-  --color-surface-mid: #f2f2f7;
+  --color-surface-mid: #f6f6f9;
   --color-surface-low: #ececf4;
   --color-surface-lowest: #ffffff;
   --color-on-surface: #1b1b1f;
@@ -252,7 +252,7 @@
 
     --color-logo-text: #e2dfff;
 
-    --color-surface-high: hsl(245, 10%, 21%);
+    --color-surface-high: #2e2d39;
     --color-surface-low: hsl(240, 8%, 15%);
     --color-surface-mid: hsl(240 6% 10%);
     --color-surface-lowest: hsl(0, 0%, 7%);
diff --git a/packages/excalidraw/tests/__snapshots__/excalidraw.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/excalidraw.test.tsx.snap
index e5e431dfc6..bbcc8d7e0b 100644
--- a/packages/excalidraw/tests/__snapshots__/excalidraw.test.tsx.snap
+++ b/packages/excalidraw/tests/__snapshots__/excalidraw.test.tsx.snap
@@ -572,7 +572,7 @@ exports[`<Excalidraw/> > Test UIOptions prop > Test canvasActions > should rende
               class="color-picker__top-picks"
             >
               <button
-                class="color-picker__button active"
+                class="color-picker__button active has-outline"
                 data-testid="color-top-pick-#ffffff"
                 style="--swatch-color: #ffffff;"
                 title="#ffffff"
@@ -583,7 +583,7 @@ exports[`<Excalidraw/> > Test UIOptions prop > Test canvasActions > should rende
                 />
               </button>
               <button
-                class="color-picker__button"
+                class="color-picker__button has-outline"
                 data-testid="color-top-pick-#f8f9fa"
                 style="--swatch-color: #f8f9fa;"
                 title="#f8f9fa"
@@ -594,7 +594,7 @@ exports[`<Excalidraw/> > Test UIOptions prop > Test canvasActions > should rende
                 />
               </button>
               <button
-                class="color-picker__button"
+                class="color-picker__button has-outline"
                 data-testid="color-top-pick-#f5faff"
                 style="--swatch-color: #f5faff;"
                 title="#f5faff"
@@ -605,7 +605,7 @@ exports[`<Excalidraw/> > Test UIOptions prop > Test canvasActions > should rende
                 />
               </button>
               <button
-                class="color-picker__button"
+                class="color-picker__button has-outline"
                 data-testid="color-top-pick-#fffce8"
                 style="--swatch-color: #fffce8;"
                 title="#fffce8"
@@ -616,7 +616,7 @@ exports[`<Excalidraw/> > Test UIOptions prop > Test canvasActions > should rende
                 />
               </button>
               <button
-                class="color-picker__button"
+                class="color-picker__button has-outline"
                 data-testid="color-top-pick-#fdf8f6"
                 style="--swatch-color: #fdf8f6;"
                 title="#fdf8f6"
@@ -635,7 +635,7 @@ exports[`<Excalidraw/> > Test UIOptions prop > Test canvasActions > should rende
               aria-expanded="false"
               aria-haspopup="dialog"
               aria-label="Canvas background"
-              class="color-picker__button active-color properties-trigger"
+              class="color-picker__button active-color properties-trigger has-outline"
               data-state="closed"
               style="--swatch-color: #ffffff;"
               title="Show background color picker"

From c79e892e558ca88de6623fd60517af7bb2086e77 Mon Sep 17 00:00:00 2001
From: Panagiotis Papadopoulos <102623907+pano9000@users.noreply.github.com>
Date: Wed, 2 Apr 2025 16:23:15 +0200
Subject: [PATCH 06/23] chore: bump @radix-ui/react-tabs version to 1.1.3
 (#9329)

* chore: bump @radix-ui/react-tabs version to 1.1.3

bumped the version to latest stable that includes
react ^19 as peerDepenecy.
This fixes peerDependency issues, as reported in #9253

* redeploy

---------

Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
---
 packages/excalidraw/package.json |   2 +-
 yarn.lock                        | 157 ++++++++-----------------------
 2 files changed, 39 insertions(+), 120 deletions(-)

diff --git a/packages/excalidraw/package.json b/packages/excalidraw/package.json
index 29239b4867..27fae8455b 100644
--- a/packages/excalidraw/package.json
+++ b/packages/excalidraw/package.json
@@ -76,7 +76,7 @@
     "@excalidraw/mermaid-to-excalidraw": "1.1.2",
     "@excalidraw/random-username": "1.1.0",
     "@radix-ui/react-popover": "1.1.6",
-    "@radix-ui/react-tabs": "1.0.2",
+    "@radix-ui/react-tabs": "1.1.3",
     "browser-fs-access": "0.29.1",
     "canvas-roundrect-polyfill": "0.0.1",
     "clsx": "1.1.1",
diff --git a/yarn.lock b/yarn.lock
index ccd0827fb0..86f64f9b5e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1003,7 +1003,7 @@
     "@babel/plugin-transform-modules-commonjs" "^7.25.9"
     "@babel/plugin-transform-typescript" "^7.25.9"
 
-"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.6", "@babel/runtime@^7.16.3", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.16.3", "@babel/runtime@^7.8.4":
   version "7.26.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.26.9.tgz#aa4c6facc65b9cb3f87d75125ffd47781b475433"
   integrity sha512-aA63XwOkcl4xxQa3HjPMqOP6LiK0ZDv3mUPYEFXkpHbaFjtGggE1A61FjFzJnB+p7/oy2gA8E+rcBNl/zC1tMg==
@@ -2220,13 +2220,6 @@
   resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570"
   integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==
 
-"@radix-ui/primitive@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.0.0.tgz#e1d8ef30b10ea10e69c76e896f608d9276352253"
-  integrity sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-
 "@radix-ui/primitive@1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.1.1.tgz#fc169732d755c7fbad33ba8d0cd7fd10c90dc8e3"
@@ -2239,47 +2232,30 @@
   dependencies:
     "@radix-ui/react-primitive" "2.0.2"
 
-"@radix-ui/react-collection@1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.0.1.tgz#259506f97c6703b36291826768d3c1337edd1de5"
-  integrity sha512-uuiFbs+YCKjn3X1DTSx9G7BHApu4GHbi3kgiwsnFUbOKCrwejAJv4eE4Vc8C0Oaxt9T0aV4ox0WCOdx+39Xo+g==
+"@radix-ui/react-collection@1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.1.2.tgz#b45eccca1cb902fd078b237316bd9fa81e621e15"
+  integrity sha512-9z54IEKRxIa9VityapoEYMuByaG42iSy1ZXlY2KcuLSEtq8x4987/N6m15ppoMffgZX72gER2uHe1D9Y6Unlcw==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-compose-refs" "1.0.0"
-    "@radix-ui/react-context" "1.0.0"
-    "@radix-ui/react-primitive" "1.0.1"
-    "@radix-ui/react-slot" "1.0.1"
-
-"@radix-ui/react-compose-refs@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz#37595b1f16ec7f228d698590e78eeed18ff218ae"
-  integrity sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.1.1"
+    "@radix-ui/react-context" "1.1.1"
+    "@radix-ui/react-primitive" "2.0.2"
+    "@radix-ui/react-slot" "1.1.2"
 
 "@radix-ui/react-compose-refs@1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz#6f766faa975f8738269ebb8a23bad4f5a8d2faec"
   integrity sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==
 
-"@radix-ui/react-context@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.0.0.tgz#f38e30c5859a9fb5e9aa9a9da452ee3ed9e0aee0"
-  integrity sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-
 "@radix-ui/react-context@1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.1.1.tgz#82074aa83a472353bb22e86f11bcbd1c61c4c71a"
   integrity sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==
 
-"@radix-ui/react-direction@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.0.0.tgz#a2e0b552352459ecf96342c79949dd833c1e6e45"
-  integrity sha512-2HV05lGUgYcA6xgLQ4BKPDmtL+QbIZYH5fCOTAOOcJ5O0QbWS3i9lKaurLzliYUDhORI2Qr3pyjhJh44lKA3rQ==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
+"@radix-ui/react-direction@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.1.0.tgz#a7d39855f4d077adc2a1922f9c353c5977a09cdc"
+  integrity sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==
 
 "@radix-ui/react-dismissable-layer@1.1.5":
   version "1.1.5"
@@ -2306,14 +2282,6 @@
     "@radix-ui/react-primitive" "2.0.2"
     "@radix-ui/react-use-callback-ref" "1.1.0"
 
-"@radix-ui/react-id@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.0.0.tgz#8d43224910741870a45a8c9d092f25887bb6d11e"
-  integrity sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-use-layout-effect" "1.0.0"
-
 "@radix-ui/react-id@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.1.0.tgz#de47339656594ad722eb87f94a6b25f9cffae0ed"
@@ -2366,15 +2334,6 @@
     "@radix-ui/react-primitive" "2.0.2"
     "@radix-ui/react-use-layout-effect" "1.1.0"
 
-"@radix-ui/react-presence@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.0.0.tgz#814fe46df11f9a468808a6010e3f3ca7e0b2e84a"
-  integrity sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-compose-refs" "1.0.0"
-    "@radix-ui/react-use-layout-effect" "1.0.0"
-
 "@radix-ui/react-presence@1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.1.2.tgz#bb764ed8a9118b7ec4512da5ece306ded8703cdc"
@@ -2383,14 +2342,6 @@
     "@radix-ui/react-compose-refs" "1.1.1"
     "@radix-ui/react-use-layout-effect" "1.1.0"
 
-"@radix-ui/react-primitive@1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.1.tgz#c1ebcce283dd2f02e4fbefdaa49d1cb13dbc990a"
-  integrity sha512-fHbmislWVkZaIdeF6GZxF0A/NH/3BjrGIYj+Ae6eTmTCr7EB0RQAAVEiqsXK6p3/JcRqVSBQoceZroj30Jj3XA==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-slot" "1.0.1"
-
 "@radix-ui/react-primitive@2.0.2":
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-2.0.2.tgz#ac8b7854d87b0d7af388d058268d9a7eb64ca8ef"
@@ -2398,29 +2349,20 @@
   dependencies:
     "@radix-ui/react-slot" "1.1.2"
 
-"@radix-ui/react-roving-focus@1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.2.tgz#d8ac2e3b8006697bdfc2b0eb06bef7e15b6245de"
-  integrity sha512-HLK+CqD/8pN6GfJm3U+cqpqhSKYAWiOJDe+A+8MfxBnOue39QEeMa43csUn2CXCHQT0/mewh1LrrG4tfkM9DMA==
+"@radix-ui/react-roving-focus@1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.2.tgz#815d051a54299114a68db6eb8d34c41a3c0a646f"
+  integrity sha512-zgMQWkNO169GtGqRvYrzb0Zf8NhMHS2DuEB/TiEmVnpr5OqPU3i8lfbxaAmC2J/KYuIQxyoQQ6DxepyXp61/xw==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/primitive" "1.0.0"
-    "@radix-ui/react-collection" "1.0.1"
-    "@radix-ui/react-compose-refs" "1.0.0"
-    "@radix-ui/react-context" "1.0.0"
-    "@radix-ui/react-direction" "1.0.0"
-    "@radix-ui/react-id" "1.0.0"
-    "@radix-ui/react-primitive" "1.0.1"
-    "@radix-ui/react-use-callback-ref" "1.0.0"
-    "@radix-ui/react-use-controllable-state" "1.0.0"
-
-"@radix-ui/react-slot@1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.1.tgz#e7868c669c974d649070e9ecbec0b367ee0b4d81"
-  integrity sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/primitive" "1.1.1"
+    "@radix-ui/react-collection" "1.1.2"
+    "@radix-ui/react-compose-refs" "1.1.1"
+    "@radix-ui/react-context" "1.1.1"
+    "@radix-ui/react-direction" "1.1.0"
+    "@radix-ui/react-id" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.2"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
 
 "@radix-ui/react-slot@1.1.2":
   version "1.1.2"
@@ -2429,41 +2371,25 @@
   dependencies:
     "@radix-ui/react-compose-refs" "1.1.1"
 
-"@radix-ui/react-tabs@1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-tabs/-/react-tabs-1.0.2.tgz#8f5ec73ca41b151a413bdd6e00553408ff34ce07"
-  integrity sha512-gOUwh+HbjCuL0UCo8kZ+kdUEG8QtpdO4sMQduJ34ZEz0r4922g9REOBM+vIsfwtGxSug4Yb1msJMJYN2Bk8TpQ==
+"@radix-ui/react-tabs@1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-tabs/-/react-tabs-1.1.3.tgz#c47c8202dc676dea47676215863d2ef9b141c17a"
+  integrity sha512-9mFyI30cuRDImbmFF6O2KUJdgEOsGh9Vmx9x/Dh9tOhL7BngmQPQfwW4aejKm5OHpfWIdmeV6ySyuxoOGjtNng==
   dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/primitive" "1.0.0"
-    "@radix-ui/react-context" "1.0.0"
-    "@radix-ui/react-direction" "1.0.0"
-    "@radix-ui/react-id" "1.0.0"
-    "@radix-ui/react-presence" "1.0.0"
-    "@radix-ui/react-primitive" "1.0.1"
-    "@radix-ui/react-roving-focus" "1.0.2"
-    "@radix-ui/react-use-controllable-state" "1.0.0"
-
-"@radix-ui/react-use-callback-ref@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz#9e7b8b6b4946fe3cbe8f748c82a2cce54e7b6a90"
-  integrity sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.1.1"
+    "@radix-ui/react-context" "1.1.1"
+    "@radix-ui/react-direction" "1.1.0"
+    "@radix-ui/react-id" "1.1.0"
+    "@radix-ui/react-presence" "1.1.2"
+    "@radix-ui/react-primitive" "2.0.2"
+    "@radix-ui/react-roving-focus" "1.1.2"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
 
 "@radix-ui/react-use-callback-ref@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz#bce938ca413675bc937944b0d01ef6f4a6dc5bf1"
   integrity sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==
 
-"@radix-ui/react-use-controllable-state@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.0.tgz#a64deaafbbc52d5d407afaa22d493d687c538b7f"
-  integrity sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-use-callback-ref" "1.0.0"
-
 "@radix-ui/react-use-controllable-state@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz#1321446857bb786917df54c0d4d084877aab04b0"
@@ -2478,13 +2404,6 @@
   dependencies:
     "@radix-ui/react-use-callback-ref" "1.1.0"
 
-"@radix-ui/react-use-layout-effect@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz#2fc19e97223a81de64cd3ba1dc42ceffd82374dc"
-  integrity sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-
 "@radix-ui/react-use-layout-effect@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz#3c2c8ce04827b26a39e442ff4888d9212268bd27"

From b3d5ba056771c0c2da26fd88e73b66486cc700c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rk=20Tolm=C3=A1cs?= <mark@lazycat.hu>
Date: Sun, 6 Apr 2025 13:41:11 +0200
Subject: [PATCH 07/23] fix: Linear element is not normalized (#9347)

* Fix #9292
---
 packages/element/src/linearElementEditor.ts   |  1 +
 .../data/__snapshots__/transform.test.ts.snap | 78 +++++++++----------
 packages/excalidraw/data/transform.test.ts    |  6 +-
 packages/excalidraw/data/transform.ts         | 10 ++-
 .../tests/linearElementEditor.test.tsx        | 22 +++++-
 5 files changed, 73 insertions(+), 44 deletions(-)

diff --git a/packages/element/src/linearElementEditor.ts b/packages/element/src/linearElementEditor.ts
index bd4e740b23..8a9117bf88 100644
--- a/packages/element/src/linearElementEditor.ts
+++ b/packages/element/src/linearElementEditor.ts
@@ -133,6 +133,7 @@ export class LinearElementEditor {
     };
     if (!pointsEqual(element.points[0], pointFrom(0, 0))) {
       console.error("Linear element is not normalized", Error().stack);
+      LinearElementEditor.normalizePoints(element);
     }
 
     this.selectedPointsIndices = null;
diff --git a/packages/excalidraw/data/__snapshots__/transform.test.ts.snap b/packages/excalidraw/data/__snapshots__/transform.test.ts.snap
index 917f3d95eb..70f8daa313 100644
--- a/packages/excalidraw/data/__snapshots__/transform.test.ts.snap
+++ b/packages/excalidraw/data/__snapshots__/transform.test.ts.snap
@@ -104,12 +104,12 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "opacity": 100,
   "points": [
     [
-      0.5,
-      0.5,
+      0,
+      0,
     ],
     [
-      394.5,
-      34.5,
+      394,
+      34,
     ],
   ],
   "roughness": 1,
@@ -129,8 +129,8 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "version": 4,
   "versionNonce": Any<Number>,
   "width": 395,
-  "x": 247,
-  "y": 420,
+  "x": 247.5,
+  "y": 420.5,
 }
 `;
 
@@ -160,11 +160,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "opacity": 100,
   "points": [
     [
-      0.5,
+      0,
       0,
     ],
     [
-      399.5,
+      399,
       0,
     ],
   ],
@@ -185,7 +185,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "version": 4,
   "versionNonce": Any<Number>,
   "width": 400,
-  "x": 227,
+  "x": 227.5,
   "y": 450,
 }
 `;
@@ -350,11 +350,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "opacity": 100,
   "points": [
     [
-      0.5,
+      0,
       0,
     ],
     [
-      99.5,
+      99,
       0,
     ],
   ],
@@ -375,7 +375,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "version": 4,
   "versionNonce": Any<Number>,
   "width": 100,
-  "x": 255,
+  "x": 255.5,
   "y": 239,
 }
 `;
@@ -452,11 +452,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "opacity": 100,
   "points": [
     [
-      0.5,
+      0,
       0,
     ],
     [
-      99.5,
+      99,
       0,
     ],
   ],
@@ -477,7 +477,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "version": 4,
   "versionNonce": Any<Number>,
   "width": 100,
-  "x": 255,
+  "x": 255.5,
   "y": 239,
 }
 `;
@@ -628,11 +628,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "opacity": 100,
   "points": [
     [
-      0.5,
+      0,
       0,
     ],
     [
-      99.5,
+      99,
       0,
     ],
   ],
@@ -653,7 +653,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "version": 4,
   "versionNonce": Any<Number>,
   "width": 100,
-  "x": 255,
+  "x": 255.5,
   "y": 239,
 }
 `;
@@ -845,11 +845,11 @@ exports[`Test Transform > should transform linear elements 1`] = `
   "opacity": 100,
   "points": [
     [
-      0.5,
+      0,
       0,
     ],
     [
-      99.5,
+      99,
       0,
     ],
   ],
@@ -866,7 +866,7 @@ exports[`Test Transform > should transform linear elements 1`] = `
   "version": 2,
   "versionNonce": Any<Number>,
   "width": 100,
-  "x": 100,
+  "x": 100.5,
   "y": 20,
 }
 `;
@@ -893,11 +893,11 @@ exports[`Test Transform > should transform linear elements 2`] = `
   "opacity": 100,
   "points": [
     [
-      0.5,
+      0,
       0,
     ],
     [
-      99.5,
+      99,
       0,
     ],
   ],
@@ -914,7 +914,7 @@ exports[`Test Transform > should transform linear elements 2`] = `
   "version": 2,
   "versionNonce": Any<Number>,
   "width": 100,
-  "x": 450,
+  "x": 450.5,
   "y": 20,
 }
 `;
@@ -1490,11 +1490,11 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "opacity": 100,
   "points": [
     [
-      0.5,
+      0,
       0,
     ],
     [
-      272.485,
+      271.985,
       0,
     ],
   ],
@@ -1517,7 +1517,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "version": 4,
   "versionNonce": Any<Number>,
   "width": 272.985,
-  "x": 111.262,
+  "x": 111.762,
   "y": 57,
 }
 `;
@@ -1862,11 +1862,11 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "opacity": 100,
   "points": [
     [
-      0.5,
+      0,
       0,
     ],
     [
-      99.5,
+      99,
       0,
     ],
   ],
@@ -1883,7 +1883,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "version": 2,
   "versionNonce": Any<Number>,
   "width": 100,
-  "x": 100,
+  "x": 100.5,
   "y": 100,
 }
 `;
@@ -1915,11 +1915,11 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "opacity": 100,
   "points": [
     [
-      0.5,
+      0,
       0,
     ],
     [
-      99.5,
+      99,
       0,
     ],
   ],
@@ -1936,7 +1936,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "version": 2,
   "versionNonce": Any<Number>,
   "width": 100,
-  "x": 100,
+  "x": 100.5,
   "y": 200,
 }
 `;
@@ -1968,11 +1968,11 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "opacity": 100,
   "points": [
     [
-      0.5,
+      0,
       0,
     ],
     [
-      99.5,
+      99,
       0,
     ],
   ],
@@ -1989,7 +1989,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "version": 2,
   "versionNonce": Any<Number>,
   "width": 100,
-  "x": 100,
+  "x": 100.5,
   "y": 300,
 }
 `;
@@ -2021,11 +2021,11 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "opacity": 100,
   "points": [
     [
-      0.5,
+      0,
       0,
     ],
     [
-      99.5,
+      99,
       0,
     ],
   ],
@@ -2042,7 +2042,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "version": 2,
   "versionNonce": Any<Number>,
   "width": 100,
-  "x": 100,
+  "x": 100.5,
   "y": 400,
 }
 `;
diff --git a/packages/excalidraw/data/transform.test.ts b/packages/excalidraw/data/transform.test.ts
index 27643e7e1e..0b0718e8e3 100644
--- a/packages/excalidraw/data/transform.test.ts
+++ b/packages/excalidraw/data/transform.test.ts
@@ -427,7 +427,7 @@ describe("Test Transform", () => {
       const [arrow, text, rectangle, ellipse] = excalidrawElements;
       expect(arrow).toMatchObject({
         type: "arrow",
-        x: 255,
+        x: 255.5,
         y: 239,
         boundElements: [{ id: text.id, type: "text" }],
         startBinding: {
@@ -512,7 +512,7 @@ describe("Test Transform", () => {
 
       expect(arrow).toMatchObject({
         type: "arrow",
-        x: 255,
+        x: 255.5,
         y: 239,
         boundElements: [{ id: text1.id, type: "text" }],
         startBinding: {
@@ -730,7 +730,7 @@ describe("Test Transform", () => {
       const [, , arrow, text] = excalidrawElements;
       expect(arrow).toMatchObject({
         type: "arrow",
-        x: 255,
+        x: 255.5,
         y: 239,
         boundElements: [
           {
diff --git a/packages/excalidraw/data/transform.ts b/packages/excalidraw/data/transform.ts
index 9def9f5fcc..15ad1ffde9 100644
--- a/packages/excalidraw/data/transform.ts
+++ b/packages/excalidraw/data/transform.ts
@@ -36,6 +36,8 @@ import { syncInvalidIndices } from "@excalidraw/element/fractionalIndex";
 
 import { redrawTextBoundingBox } from "@excalidraw/element/textElement";
 
+import { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
+
 import type { ElementConstructorOpts } from "@excalidraw/element/newElement";
 
 import type {
@@ -463,7 +465,13 @@ const bindLinearElementToElement = (
     newPoints[endPointIndex][1] += delta;
   }
 
-  Object.assign(linearElement, { points: newPoints });
+  Object.assign(
+    linearElement,
+    LinearElementEditor.getNormalizedPoints({
+      ...linearElement,
+      points: newPoints,
+    }),
+  );
 
   return {
     linearElement,
diff --git a/packages/excalidraw/tests/linearElementEditor.test.tsx b/packages/excalidraw/tests/linearElementEditor.test.tsx
index 741799d3be..8619985846 100644
--- a/packages/excalidraw/tests/linearElementEditor.test.tsx
+++ b/packages/excalidraw/tests/linearElementEditor.test.tsx
@@ -1,3 +1,5 @@
+import { newArrowElement } from "@excalidraw/element/newElement";
+
 import { pointCenter, pointFrom } from "@excalidraw/math";
 import { act, queryByTestId, queryByText } from "@testing-library/react";
 import React from "react";
@@ -19,7 +21,7 @@ import {
 import * as textElementUtils from "@excalidraw/element/textElement";
 import { wrapText } from "@excalidraw/element/textWrapping";
 
-import type { GlobalPoint } from "@excalidraw/math";
+import type { GlobalPoint, LocalPoint } from "@excalidraw/math";
 
 import type {
   ExcalidrawElement,
@@ -164,6 +166,24 @@ describe("Test Linear Elements", () => {
     Keyboard.keyPress(KEYS.DELETE);
   };
 
+  it("should normalize the element points at creation", () => {
+    const element = newArrowElement({
+      type: "arrow",
+      points: [pointFrom<LocalPoint>(0.5, 0), pointFrom<LocalPoint>(100, 100)],
+      x: 0,
+      y: 0,
+    });
+    expect(element.points).toEqual([
+      pointFrom<LocalPoint>(0.5, 0),
+      pointFrom<LocalPoint>(100, 100),
+    ]);
+    new LinearElementEditor(element);
+    expect(element.points).toEqual([
+      pointFrom<LocalPoint>(0, 0),
+      pointFrom<LocalPoint>(99.5, 100),
+    ]);
+  });
+
   it("should not drag line and add midpoint until dragged beyond a threshold", () => {
     createTwoPointerLinearElement("line");
     const line = h.elements[0] as ExcalidrawLinearElement;

From 6e47fadb598d3d9e7379cf12796621f6d8fbe7b7 Mon Sep 17 00:00:00 2001
From: Narek Malkhasyan <narek.mal@gmail.com>
Date: Mon, 7 Apr 2025 02:57:27 +0400
Subject: [PATCH 08/23] feat: add container to multiple text elements (#9348)

---
 packages/excalidraw/actions/actionBoundText.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/excalidraw/actions/actionBoundText.tsx b/packages/excalidraw/actions/actionBoundText.tsx
index 7cb10c045c..ae18c0d986 100644
--- a/packages/excalidraw/actions/actionBoundText.tsx
+++ b/packages/excalidraw/actions/actionBoundText.tsx
@@ -226,8 +226,8 @@ export const actionWrapTextInContainer = register({
   trackEvent: { category: "element" },
   predicate: (elements, appState, _, app) => {
     const selectedElements = app.scene.getSelectedElements(appState);
-    const areTextElements = selectedElements.every((el) => isTextElement(el));
-    return selectedElements.length > 0 && areTextElements;
+    const someTextElements = selectedElements.some((el) => isTextElement(el));
+    return selectedElements.length > 0 && someTextElements;
   },
   perform: (elements, appState, _, app) => {
     const selectedElements = app.scene.getSelectedElements(appState);

From ce267aa0d3bcaa639e72cd41581f030d1a0a3f3b Mon Sep 17 00:00:00 2001
From: Ryan Di <ryan.weihao.di@gmail.com>
Date: Mon, 7 Apr 2025 16:44:25 +1000
Subject: [PATCH 09/23] feat: lasso selection (#9169)

* lasso without 'real' shape detection

* select a single linear el

* improve ux

* feed segments to worker

* simplify path threshold adaptive to zoom

* add a tiny threshold for checks

* refactor code

* lasso tests

* fix: ts

* do not capture lasso tool

* try worker-loader in next config

* update config

* refactor

* lint

* feat: show active tool when using "more tools"

* keep lasso if selected from toolbar

* fix incorrect checks for resetting to selection

* shift for additive selection

* bound text related fixes

* lint

* keep alt toggled lasso selection if shift pressed

* fix regression

* fix 'dead' lassos

* lint

* use workerpool and polyfill

* fix worker bundled with window related code

* refactor

* add file extension for worker constructor error

* another attempt at constructor error

* attempt at build issue

* attempt with dynamic import

* test not importing from math

* narrow down imports

* Reusing existing workers infrastructure (fallback to the main thread, type-safety)

* Points on curve inside the shared chunk

* Give up on experimental code splitting

* Remove potentially unnecessary optimisation

* Removing workers as the complexit is much worse, while perf. does not seem to be much better

* fix selecting text containers and containing frames together

* render fill directly from animated trail

* do not re-render static when setting selected element ids in lasso

* remove unnecessary property

* tweak trail animation

* slice points to remove notch

* always start alt-lasso from initial point

* revert build & worker changes (unused)

* remove `lasso` from `hasStrokeColor`

* label change

* remove unused props

* remove unsafe optimization

* snaps

---------

Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
Co-authored-by: Marcel Mraz <marcel@excalidraw.com>
---
 examples/with-script-in-browser/package.json  |    3 +-
 excalidraw-app/vite.config.mts                |   22 +-
 packages/common/src/constants.ts              |    1 +
 packages/common/src/utils.ts                  |    3 +-
 packages/element/src/bounds.ts                |  202 +-
 .../element/src/showSelectedShapeActions.ts   |    1 +
 packages/excalidraw/actions/actionCanvas.tsx  |   37 +-
 .../excalidraw/actions/actionElementLock.ts   |    1 -
 .../excalidraw/actions/actionToggleStats.tsx  |    1 -
 .../actions/actionToggleViewMode.tsx          |    1 -
 .../actions/actionToggleZenMode.tsx           |    1 -
 packages/excalidraw/actions/types.ts          |    3 +-
 packages/excalidraw/animated-trail.ts         |   60 +-
 packages/excalidraw/appState.ts               |    1 +
 packages/excalidraw/components/Actions.tsx    |   32 +-
 packages/excalidraw/components/App.tsx        |   96 +-
 .../CommandPalette/CommandPalette.tsx         |    1 +
 packages/excalidraw/components/HintViewer.tsx |    4 +-
 .../components/canvases/StaticCanvas.tsx      |   58 +-
 packages/excalidraw/components/icons.tsx      |   17 +-
 packages/excalidraw/data/restore.ts           |    1 +
 packages/excalidraw/lasso/index.ts            |  201 ++
 packages/excalidraw/lasso/utils.ts            |  111 +
 packages/excalidraw/locales/en.json           |    1 +
 .../__snapshots__/contextmenu.test.tsx.snap   |   21 +-
 .../tests/__snapshots__/history.test.tsx.snap |   58 +
 .../regressionTests.test.tsx.snap             |   52 +
 packages/excalidraw/tests/helpers/ui.ts       |    5 +-
 packages/excalidraw/tests/lasso.test.tsx      | 1813 +++++++++++++++++
 packages/excalidraw/types.ts                  |    3 +
 packages/math/src/segment.ts                  |   10 +-
 .../tests/__snapshots__/export.test.ts.snap   |    1 +
 yarn.lock                                     |   33 +-
 33 files changed, 2709 insertions(+), 146 deletions(-)
 create mode 100644 packages/excalidraw/lasso/index.ts
 create mode 100644 packages/excalidraw/lasso/utils.ts
 create mode 100644 packages/excalidraw/tests/lasso.test.tsx

diff --git a/examples/with-script-in-browser/package.json b/examples/with-script-in-browser/package.json
index 3d61f1a1b7..2b43117117 100644
--- a/examples/with-script-in-browser/package.json
+++ b/examples/with-script-in-browser/package.json
@@ -15,7 +15,8 @@
   "scripts": {
     "start": "vite",
     "build": "vite build",
-    "build:preview": "yarn build && vite preview --port 5002",
+    "preview": "vite preview --port 5002",
+    "build:preview": "yarn build && yarn preview",
     "build:package": "yarn workspace @excalidraw/excalidraw run build:esm"
   }
 }
diff --git a/excalidraw-app/vite.config.mts b/excalidraw-app/vite.config.mts
index f10e742f5b..29e5c04300 100644
--- a/excalidraw-app/vite.config.mts
+++ b/excalidraw-app/vite.config.mts
@@ -25,7 +25,10 @@ export default defineConfig(({ mode }) => {
       alias: [
         {
           find: /^@excalidraw\/common$/,
-          replacement: path.resolve(__dirname, "../packages/common/src/index.ts"),
+          replacement: path.resolve(
+            __dirname,
+            "../packages/common/src/index.ts",
+          ),
         },
         {
           find: /^@excalidraw\/common\/(.*?)/,
@@ -33,7 +36,10 @@ export default defineConfig(({ mode }) => {
         },
         {
           find: /^@excalidraw\/element$/,
-          replacement: path.resolve(__dirname, "../packages/element/src/index.ts"),
+          replacement: path.resolve(
+            __dirname,
+            "../packages/element/src/index.ts",
+          ),
         },
         {
           find: /^@excalidraw\/element\/(.*?)/,
@@ -41,7 +47,10 @@ export default defineConfig(({ mode }) => {
         },
         {
           find: /^@excalidraw\/excalidraw$/,
-          replacement: path.resolve(__dirname, "../packages/excalidraw/index.tsx"),
+          replacement: path.resolve(
+            __dirname,
+            "../packages/excalidraw/index.tsx",
+          ),
         },
         {
           find: /^@excalidraw\/excalidraw\/(.*?)/,
@@ -57,7 +66,10 @@ export default defineConfig(({ mode }) => {
         },
         {
           find: /^@excalidraw\/utils$/,
-          replacement: path.resolve(__dirname, "../packages/utils/src/index.ts"),
+          replacement: path.resolve(
+            __dirname,
+            "../packages/utils/src/index.ts",
+          ),
         },
         {
           find: /^@excalidraw\/utils\/(.*?)/,
@@ -213,7 +225,7 @@ export default defineConfig(({ mode }) => {
             },
           ],
           start_url: "/",
-          id:"excalidraw",
+          id: "excalidraw",
           display: "standalone",
           theme_color: "#121212",
           background_color: "#ffffff",
diff --git a/packages/common/src/constants.ts b/packages/common/src/constants.ts
index 31046f1ef7..7e8c49ea1c 100644
--- a/packages/common/src/constants.ts
+++ b/packages/common/src/constants.ts
@@ -419,6 +419,7 @@ export const LIBRARY_DISABLED_TYPES = new Set([
 // use these constants to easily identify reference sites
 export const TOOL_TYPE = {
   selection: "selection",
+  lasso: "lasso",
   rectangle: "rectangle",
   diamond: "diamond",
   ellipse: "ellipse",
diff --git a/packages/common/src/utils.ts b/packages/common/src/utils.ts
index 10837a02f8..7fa98eb2da 100644
--- a/packages/common/src/utils.ts
+++ b/packages/common/src/utils.ts
@@ -385,7 +385,7 @@ export const updateActiveTool = (
         type: ToolType;
       }
     | { type: "custom"; customType: string }
-  ) & { locked?: boolean }) & {
+  ) & { locked?: boolean; fromSelection?: boolean }) & {
     lastActiveToolBeforeEraser?: ActiveTool | null;
   },
 ): AppState["activeTool"] => {
@@ -407,6 +407,7 @@ export const updateActiveTool = (
     type: data.type,
     customType: null,
     locked: data.locked ?? appState.activeTool.locked,
+    fromSelection: data.fromSelection ?? false,
   };
 };
 
diff --git a/packages/element/src/bounds.ts b/packages/element/src/bounds.ts
index bab1a1871f..9e723c2146 100644
--- a/packages/element/src/bounds.ts
+++ b/packages/element/src/bounds.ts
@@ -13,7 +13,10 @@ import {
 
 import { getCurvePathOps } from "@excalidraw/utils/shape";
 
+import { pointsOnBezierCurves } from "points-on-curve";
+
 import type {
+  Curve,
   Degrees,
   GlobalPoint,
   LineSegment,
@@ -37,6 +40,13 @@ import {
   isTextElement,
 } from "./typeChecks";
 
+import { getElementShape } from "./shapes";
+
+import {
+  deconstructDiamondElement,
+  deconstructRectanguloidElement,
+} from "./utils";
+
 import type {
   ExcalidrawElement,
   ExcalidrawLinearElement,
@@ -45,6 +55,8 @@ import type {
   NonDeleted,
   ExcalidrawTextElementWithContainer,
   ElementsMap,
+  ExcalidrawRectanguloidElement,
+  ExcalidrawEllipseElement,
 } from "./types";
 import type { Drawable, Op } from "roughjs/bin/core";
 import type { Point as RoughPoint } from "roughjs/bin/geometry";
@@ -254,50 +266,82 @@ export const getElementAbsoluteCoords = (
  * that can be used for visual collision detection (useful for frames)
  * as opposed to bounding box collision detection
  */
+/**
+ * Given an element, return the line segments that make up the element.
+ *
+ * Uses helpers from /math
+ */
 export const getElementLineSegments = (
   element: ExcalidrawElement,
   elementsMap: ElementsMap,
 ): LineSegment<GlobalPoint>[] => {
+  const shape = getElementShape(element, elementsMap);
   const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(
     element,
     elementsMap,
   );
+  const center = pointFrom<GlobalPoint>(cx, cy);
 
-  const center: GlobalPoint = pointFrom(cx, cy);
-
-  if (isLinearElement(element) || isFreeDrawElement(element)) {
-    const segments: LineSegment<GlobalPoint>[] = [];
-
+  if (shape.type === "polycurve") {
+    const curves = shape.data;
+    const points = curves
+      .map((curve) => pointsOnBezierCurves(curve, 10))
+      .flat();
     let i = 0;
-
-    while (i < element.points.length - 1) {
+    const segments: LineSegment<GlobalPoint>[] = [];
+    while (i < points.length - 1) {
       segments.push(
         lineSegment(
-          pointRotateRads(
-            pointFrom(
-              element.points[i][0] + element.x,
-              element.points[i][1] + element.y,
-            ),
-            center,
-            element.angle,
-          ),
-          pointRotateRads(
-            pointFrom(
-              element.points[i + 1][0] + element.x,
-              element.points[i + 1][1] + element.y,
-            ),
-            center,
-            element.angle,
-          ),
+          pointFrom(points[i][0], points[i][1]),
+          pointFrom(points[i + 1][0], points[i + 1][1]),
         ),
       );
       i++;
     }
 
     return segments;
+  } else if (shape.type === "polyline") {
+    return shape.data as LineSegment<GlobalPoint>[];
+  } else if (_isRectanguloidElement(element)) {
+    const [sides, corners] = deconstructRectanguloidElement(element);
+    const cornerSegments: LineSegment<GlobalPoint>[] = corners
+      .map((corner) => getSegmentsOnCurve(corner, center, element.angle))
+      .flat();
+    const rotatedSides = getRotatedSides(sides, center, element.angle);
+    return [...rotatedSides, ...cornerSegments];
+  } else if (element.type === "diamond") {
+    const [sides, corners] = deconstructDiamondElement(element);
+    const cornerSegments = corners
+      .map((corner) => getSegmentsOnCurve(corner, center, element.angle))
+      .flat();
+    const rotatedSides = getRotatedSides(sides, center, element.angle);
+
+    return [...rotatedSides, ...cornerSegments];
+  } else if (shape.type === "polygon") {
+    if (isTextElement(element)) {
+      const container = getContainerElement(element, elementsMap);
+      if (container && isLinearElement(container)) {
+        const segments: LineSegment<GlobalPoint>[] = [
+          lineSegment(pointFrom(x1, y1), pointFrom(x2, y1)),
+          lineSegment(pointFrom(x2, y1), pointFrom(x2, y2)),
+          lineSegment(pointFrom(x2, y2), pointFrom(x1, y2)),
+          lineSegment(pointFrom(x1, y2), pointFrom(x1, y1)),
+        ];
+        return segments;
+      }
+    }
+
+    const points = shape.data as GlobalPoint[];
+    const segments: LineSegment<GlobalPoint>[] = [];
+    for (let i = 0; i < points.length - 1; i++) {
+      segments.push(lineSegment(points[i], points[i + 1]));
+    }
+    return segments;
+  } else if (shape.type === "ellipse") {
+    return getSegmentsOnEllipse(element as ExcalidrawEllipseElement);
   }
 
-  const [nw, ne, sw, se, n, s, w, e] = (
+  const [nw, ne, sw, se, , , w, e] = (
     [
       [x1, y1],
       [x2, y1],
@@ -310,28 +354,6 @@ export const getElementLineSegments = (
     ] as GlobalPoint[]
   ).map((point) => pointRotateRads(point, center, element.angle));
 
-  if (element.type === "diamond") {
-    return [
-      lineSegment(n, w),
-      lineSegment(n, e),
-      lineSegment(s, w),
-      lineSegment(s, e),
-    ];
-  }
-
-  if (element.type === "ellipse") {
-    return [
-      lineSegment(n, w),
-      lineSegment(n, e),
-      lineSegment(s, w),
-      lineSegment(s, e),
-      lineSegment(n, w),
-      lineSegment(n, e),
-      lineSegment(s, w),
-      lineSegment(s, e),
-    ];
-  }
-
   return [
     lineSegment(nw, ne),
     lineSegment(sw, se),
@@ -344,6 +366,94 @@ export const getElementLineSegments = (
   ];
 };
 
+const _isRectanguloidElement = (
+  element: ExcalidrawElement,
+): element is ExcalidrawRectanguloidElement => {
+  return (
+    element != null &&
+    (element.type === "rectangle" ||
+      element.type === "image" ||
+      element.type === "iframe" ||
+      element.type === "embeddable" ||
+      element.type === "frame" ||
+      element.type === "magicframe" ||
+      (element.type === "text" && !element.containerId))
+  );
+};
+
+const getRotatedSides = (
+  sides: LineSegment<GlobalPoint>[],
+  center: GlobalPoint,
+  angle: Radians,
+) => {
+  return sides.map((side) => {
+    return lineSegment(
+      pointRotateRads<GlobalPoint>(side[0], center, angle),
+      pointRotateRads<GlobalPoint>(side[1], center, angle),
+    );
+  });
+};
+
+const getSegmentsOnCurve = (
+  curve: Curve<GlobalPoint>,
+  center: GlobalPoint,
+  angle: Radians,
+): LineSegment<GlobalPoint>[] => {
+  const points = pointsOnBezierCurves(curve, 10);
+  let i = 0;
+  const segments: LineSegment<GlobalPoint>[] = [];
+  while (i < points.length - 1) {
+    segments.push(
+      lineSegment(
+        pointRotateRads<GlobalPoint>(
+          pointFrom(points[i][0], points[i][1]),
+          center,
+          angle,
+        ),
+        pointRotateRads<GlobalPoint>(
+          pointFrom(points[i + 1][0], points[i + 1][1]),
+          center,
+          angle,
+        ),
+      ),
+    );
+    i++;
+  }
+
+  return segments;
+};
+
+const getSegmentsOnEllipse = (
+  ellipse: ExcalidrawEllipseElement,
+): LineSegment<GlobalPoint>[] => {
+  const center = pointFrom<GlobalPoint>(
+    ellipse.x + ellipse.width / 2,
+    ellipse.y + ellipse.height / 2,
+  );
+
+  const a = ellipse.width / 2;
+  const b = ellipse.height / 2;
+
+  const segments: LineSegment<GlobalPoint>[] = [];
+  const points: GlobalPoint[] = [];
+  const n = 90;
+  const deltaT = (Math.PI * 2) / n;
+
+  for (let i = 0; i < n; i++) {
+    const t = i * deltaT;
+    const x = center[0] + a * Math.cos(t);
+    const y = center[1] + b * Math.sin(t);
+    points.push(pointRotateRads(pointFrom(x, y), center, ellipse.angle));
+  }
+
+  for (let i = 0; i < points.length - 1; i++) {
+    segments.push(lineSegment(points[i], points[i + 1]));
+  }
+
+  segments.push(lineSegment(points[points.length - 1], points[0]));
+  return segments;
+};
+
 /**
  * Scene -> Scene coords, but in x1,x2,y1,y2 format.
  *
diff --git a/packages/element/src/showSelectedShapeActions.ts b/packages/element/src/showSelectedShapeActions.ts
index efcf83894a..6f918cfbdf 100644
--- a/packages/element/src/showSelectedShapeActions.ts
+++ b/packages/element/src/showSelectedShapeActions.ts
@@ -14,6 +14,7 @@ export const showSelectedShapeActions = (
       ((appState.activeTool.type !== "custom" &&
         (appState.editingTextElement ||
           (appState.activeTool.type !== "selection" &&
+            appState.activeTool.type !== "lasso" &&
             appState.activeTool.type !== "eraser" &&
             appState.activeTool.type !== "hand" &&
             appState.activeTool.type !== "laser"))) ||
diff --git a/packages/excalidraw/actions/actionCanvas.tsx b/packages/excalidraw/actions/actionCanvas.tsx
index 0aa83944f8..a8bd56e820 100644
--- a/packages/excalidraw/actions/actionCanvas.tsx
+++ b/packages/excalidraw/actions/actionCanvas.tsx
@@ -29,6 +29,7 @@ import { ToolButton } from "../components/ToolButton";
 import { Tooltip } from "../components/Tooltip";
 import {
   handIcon,
+  LassoIcon,
   MoonIcon,
   SunIcon,
   TrashIcon,
@@ -52,7 +53,6 @@ import type { AppState, Offsets } from "../types";
 export const actionChangeViewBackgroundColor = register({
   name: "changeViewBackgroundColor",
   label: "labels.canvasBackground",
-  paletteName: "Change canvas background color",
   trackEvent: false,
   predicate: (elements, appState, props, app) => {
     return (
@@ -90,7 +90,6 @@ export const actionChangeViewBackgroundColor = register({
 export const actionClearCanvas = register({
   name: "clearCanvas",
   label: "labels.clearCanvas",
-  paletteName: "Clear canvas",
   icon: TrashIcon,
   trackEvent: { category: "canvas" },
   predicate: (elements, appState, props, app) => {
@@ -525,10 +524,42 @@ export const actionToggleEraserTool = register({
   keyTest: (event) => event.key === KEYS.E,
 });
 
+export const actionToggleLassoTool = register({
+  name: "toggleLassoTool",
+  label: "toolBar.lasso",
+  icon: LassoIcon,
+  trackEvent: { category: "toolbar" },
+  perform: (elements, appState, _, app) => {
+    let activeTool: AppState["activeTool"];
+
+    if (appState.activeTool.type !== "lasso") {
+      activeTool = updateActiveTool(appState, {
+        type: "lasso",
+        fromSelection: false,
+      });
+      setCursor(app.interactiveCanvas, CURSOR_TYPE.CROSSHAIR);
+    } else {
+      activeTool = updateActiveTool(appState, {
+        type: "selection",
+      });
+    }
+
+    return {
+      appState: {
+        ...appState,
+        selectedElementIds: {},
+        selectedGroupIds: {},
+        activeEmbeddable: null,
+        activeTool,
+      },
+      captureUpdate: CaptureUpdateAction.NEVER,
+    };
+  },
+});
+
 export const actionToggleHandTool = register({
   name: "toggleHandTool",
   label: "toolBar.hand",
-  paletteName: "Toggle hand tool",
   trackEvent: { category: "toolbar" },
   icon: handIcon,
   viewMode: false,
diff --git a/packages/excalidraw/actions/actionElementLock.ts b/packages/excalidraw/actions/actionElementLock.ts
index 79d13c63ef..6bc238a59b 100644
--- a/packages/excalidraw/actions/actionElementLock.ts
+++ b/packages/excalidraw/actions/actionElementLock.ts
@@ -90,7 +90,6 @@ export const actionToggleElementLock = register({
 
 export const actionUnlockAllElements = register({
   name: "unlockAllElements",
-  paletteName: "Unlock all elements",
   trackEvent: { category: "canvas" },
   viewMode: false,
   icon: UnlockedIcon,
diff --git a/packages/excalidraw/actions/actionToggleStats.tsx b/packages/excalidraw/actions/actionToggleStats.tsx
index 93fd6395ba..ffa812e960 100644
--- a/packages/excalidraw/actions/actionToggleStats.tsx
+++ b/packages/excalidraw/actions/actionToggleStats.tsx
@@ -9,7 +9,6 @@ export const actionToggleStats = register({
   name: "stats",
   label: "stats.fullTitle",
   icon: abacusIcon,
-  paletteName: "Toggle stats",
   viewMode: true,
   trackEvent: { category: "menu" },
   keywords: ["edit", "attributes", "customize"],
diff --git a/packages/excalidraw/actions/actionToggleViewMode.tsx b/packages/excalidraw/actions/actionToggleViewMode.tsx
index 81faa9ee61..e42a7a102d 100644
--- a/packages/excalidraw/actions/actionToggleViewMode.tsx
+++ b/packages/excalidraw/actions/actionToggleViewMode.tsx
@@ -8,7 +8,6 @@ import { register } from "./register";
 export const actionToggleViewMode = register({
   name: "viewMode",
   label: "labels.viewMode",
-  paletteName: "Toggle view mode",
   icon: eyeIcon,
   viewMode: true,
   trackEvent: {
diff --git a/packages/excalidraw/actions/actionToggleZenMode.tsx b/packages/excalidraw/actions/actionToggleZenMode.tsx
index 4d45b32046..e56e02ca76 100644
--- a/packages/excalidraw/actions/actionToggleZenMode.tsx
+++ b/packages/excalidraw/actions/actionToggleZenMode.tsx
@@ -9,7 +9,6 @@ export const actionToggleZenMode = register({
   name: "zenMode",
   label: "buttons.zenMode",
   icon: coffeeIcon,
-  paletteName: "Toggle zen mode",
   viewMode: true,
   trackEvent: {
     category: "canvas",
diff --git a/packages/excalidraw/actions/types.ts b/packages/excalidraw/actions/types.ts
index 152b9a0c7e..c63a122e04 100644
--- a/packages/excalidraw/actions/types.ts
+++ b/packages/excalidraw/actions/types.ts
@@ -139,7 +139,8 @@ export type ActionName =
   | "copyElementLink"
   | "linkToElement"
   | "cropEditor"
-  | "wrapSelectionInFrame";
+  | "wrapSelectionInFrame"
+  | "toggleLassoTool";
 
 export type PanelComponentProps = {
   elements: readonly ExcalidrawElement[];
diff --git a/packages/excalidraw/animated-trail.ts b/packages/excalidraw/animated-trail.ts
index 286eff6f34..0ffec7cf58 100644
--- a/packages/excalidraw/animated-trail.ts
+++ b/packages/excalidraw/animated-trail.ts
@@ -23,6 +23,8 @@ export interface Trail {
 
 export interface AnimatedTrailOptions {
   fill: (trail: AnimatedTrail) => string;
+  stroke?: (trail: AnimatedTrail) => string;
+  animateTrail?: boolean;
 }
 
 export class AnimatedTrail implements Trail {
@@ -31,16 +33,28 @@ export class AnimatedTrail implements Trail {
 
   private container?: SVGSVGElement;
   private trailElement: SVGPathElement;
+  private trailAnimation?: SVGAnimateElement;
 
   constructor(
     private animationFrameHandler: AnimationFrameHandler,
-    private app: App,
+    protected app: App,
     private options: Partial<LaserPointerOptions> &
       Partial<AnimatedTrailOptions>,
   ) {
     this.animationFrameHandler.register(this, this.onFrame.bind(this));
 
     this.trailElement = document.createElementNS(SVG_NS, "path");
+    if (this.options.animateTrail) {
+      this.trailAnimation = document.createElementNS(SVG_NS, "animate");
+      // TODO: make this configurable
+      this.trailAnimation.setAttribute("attributeName", "stroke-dashoffset");
+      this.trailElement.setAttribute("stroke-dasharray", "7 7");
+      this.trailElement.setAttribute("stroke-dashoffset", "10");
+      this.trailAnimation.setAttribute("from", "0");
+      this.trailAnimation.setAttribute("to", `-14`);
+      this.trailAnimation.setAttribute("dur", "0.3s");
+      this.trailElement.appendChild(this.trailAnimation);
+    }
   }
 
   get hasCurrentTrail() {
@@ -104,8 +118,23 @@ export class AnimatedTrail implements Trail {
     }
   }
 
+  getCurrentTrail() {
+    return this.currentTrail;
+  }
+
+  clearTrails() {
+    this.pastTrails = [];
+    this.currentTrail = undefined;
+    this.update();
+  }
+
   private update() {
+    this.pastTrails = [];
     this.start();
+    if (this.trailAnimation) {
+      this.trailAnimation.setAttribute("begin", "indefinite");
+      this.trailAnimation.setAttribute("repeatCount", "indefinite");
+    }
   }
 
   private onFrame() {
@@ -132,14 +161,25 @@ export class AnimatedTrail implements Trail {
     const svgPaths = paths.join(" ").trim();
 
     this.trailElement.setAttribute("d", svgPaths);
-    this.trailElement.setAttribute(
-      "fill",
-      (this.options.fill ?? (() => "black"))(this),
-    );
+    if (this.trailAnimation) {
+      this.trailElement.setAttribute(
+        "fill",
+        (this.options.fill ?? (() => "black"))(this),
+      );
+      this.trailElement.setAttribute(
+        "stroke",
+        (this.options.stroke ?? (() => "black"))(this),
+      );
+    } else {
+      this.trailElement.setAttribute(
+        "fill",
+        (this.options.fill ?? (() => "black"))(this),
+      );
+    }
   }
 
   private drawTrail(trail: LaserPointer, state: AppState): string {
-    const stroke = trail
+    const _stroke = trail
       .getStrokeOutline(trail.options.size / state.zoom.value)
       .map(([x, y]) => {
         const result = sceneCoordsToViewportCoords(
@@ -150,6 +190,14 @@ export class AnimatedTrail implements Trail {
         return [result.x, result.y];
       });
 
+    const stroke = this.trailAnimation
+      ? _stroke.slice(
+          // slicing from 6th point to get rid of the initial notch type of thing
+          Math.min(_stroke.length, 6),
+          _stroke.length / 2,
+        )
+      : _stroke;
+
     return getSvgPathFromStroke(stroke, true);
   }
 }
diff --git a/packages/excalidraw/appState.ts b/packages/excalidraw/appState.ts
index 434392ce74..a75745f2a2 100644
--- a/packages/excalidraw/appState.ts
+++ b/packages/excalidraw/appState.ts
@@ -52,6 +52,7 @@ export const getDefaultAppState = (): Omit<
       type: "selection",
       customType: null,
       locked: DEFAULT_ELEMENT_PROPS.locked,
+      fromSelection: false,
       lastActiveTool: null,
     },
     penMode: false,
diff --git a/packages/excalidraw/components/Actions.tsx b/packages/excalidraw/components/Actions.tsx
index b692048673..3a7df37a85 100644
--- a/packages/excalidraw/components/Actions.tsx
+++ b/packages/excalidraw/components/Actions.tsx
@@ -62,6 +62,7 @@ import {
   mermaidLogoIcon,
   laserPointerToolIcon,
   MagicIcon,
+  LassoIcon,
 } from "./icons";
 
 import type { AppClassProperties, AppProps, UIAppState, Zoom } from "../types";
@@ -83,7 +84,6 @@ export const canChangeStrokeColor = (
 
   return (
     (hasStrokeColor(appState.activeTool.type) &&
-      appState.activeTool.type !== "image" &&
       commonSelectedType !== "image" &&
       commonSelectedType !== "frame" &&
       commonSelectedType !== "magicframe") ||
@@ -295,6 +295,8 @@ export const ShapesSwitcher = ({
 
   const frameToolSelected = activeTool.type === "frame";
   const laserToolSelected = activeTool.type === "laser";
+  const lassoToolSelected = activeTool.type === "lasso";
+
   const embeddableToolSelected = activeTool.type === "embeddable";
 
   const { TTDDialogTriggerTunnel } = useTunnels();
@@ -316,6 +318,7 @@ export const ShapesSwitcher = ({
         const shortcut = letter
           ? `${letter} ${t("helpDialog.or")} ${numericKey}`
           : `${numericKey}`;
+
         return (
           <ToolButton
             className={clsx("Shape", { fillable })}
@@ -333,6 +336,14 @@ export const ShapesSwitcher = ({
               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) {
@@ -358,6 +369,7 @@ export const ShapesSwitcher = ({
             "App-toolbar__extra-tools-trigger--selected":
               frameToolSelected ||
               embeddableToolSelected ||
+              lassoToolSelected ||
               // in collab we're already highlighting the laser button
               // outside toolbar, so let's not highlight extra-tools button
               // on top of it
@@ -366,7 +378,15 @@ export const ShapesSwitcher = ({
           onToggle={() => setIsExtraToolsMenuOpen(!isExtraToolsMenuOpen)}
           title={t("toolBar.extraTools")}
         >
-          {extraToolsIcon}
+          {frameToolSelected
+            ? frameToolIcon
+            : embeddableToolSelected
+            ? EmbedIcon
+            : laserToolSelected && !app.props.isCollaborating
+            ? laserPointerToolIcon
+            : lassoToolSelected
+            ? LassoIcon
+            : extraToolsIcon}
         </DropdownMenu.Trigger>
         <DropdownMenu.Content
           onClickOutside={() => setIsExtraToolsMenuOpen(false)}
@@ -399,6 +419,14 @@ export const ShapesSwitcher = ({
           >
             {t("toolBar.laser")}
           </DropdownMenu.Item>
+          <DropdownMenu.Item
+            onSelect={() => app.setActiveTool({ type: "lasso" })}
+            icon={LassoIcon}
+            data-testid="toolbar-lasso"
+            selected={lassoToolSelected}
+          >
+            {t("toolBar.lasso")}
+          </DropdownMenu.Item>
           <div style={{ margin: "6px 0", fontSize: 14, fontWeight: 600 }}>
             Generate
           </div>
diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx
index d5fb55e1d5..0ca525828a 100644
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@@ -461,6 +461,8 @@ import { isOverScrollBars } from "../scene/scrollbars";
 
 import { isMaybeMermaidDefinition } from "../mermaid";
 
+import { LassoTrail } from "../lasso";
+
 import { activeConfirmDialogAtom } from "./ActiveConfirmDialog";
 import BraveMeasureTextError from "./BraveMeasureTextError";
 import { ContextMenu, CONTEXT_MENU_SEPARATOR } from "./ContextMenu";
@@ -692,6 +694,7 @@ class App extends React.Component<AppProps, AppState> {
         ? "rgba(0, 0, 0, 0.2)"
         : "rgba(255, 255, 255, 0.2)",
   });
+  lassoTrail = new LassoTrail(this.animationFrameHandler, this);
 
   onChangeEmitter = new Emitter<
     [
@@ -1670,7 +1673,11 @@ class App extends React.Component<AppProps, AppState> {
                         <div className="excalidraw-contextMenuContainer" />
                         <div className="excalidraw-eye-dropper-container" />
                         <SVGLayer
-                          trails={[this.laserTrails, this.eraserTrail]}
+                          trails={[
+                            this.laserTrails,
+                            this.eraserTrail,
+                            this.lassoTrail,
+                          ]}
                         />
                         {selectedElements.length === 1 &&
                           this.state.openDialog?.name !==
@@ -4630,7 +4637,10 @@ class App extends React.Component<AppProps, AppState> {
         this.state.openDialog?.name === "elementLinkSelector"
       ) {
         setCursor(this.interactiveCanvas, CURSOR_TYPE.GRAB);
-      } else if (this.state.activeTool.type === "selection") {
+      } else if (
+        this.state.activeTool.type === "selection" ||
+        this.state.activeTool.type === "lasso"
+      ) {
         resetCursor(this.interactiveCanvas);
       } else {
         setCursorForShape(this.interactiveCanvas, this.state);
@@ -4738,7 +4748,8 @@ class App extends React.Component<AppProps, AppState> {
             }
         )
       | { type: "custom"; customType: string }
-    ) & { locked?: boolean },
+    ) & { locked?: boolean; fromSelection?: boolean },
+    keepSelection = false,
   ) => {
     if (!this.isToolSupported(tool.type)) {
       console.warn(
@@ -4780,7 +4791,21 @@ class App extends React.Component<AppProps, AppState> {
         this.store.shouldCaptureIncrement();
       }
 
-      if (nextActiveTool.type !== "selection") {
+      if (nextActiveTool.type === "lasso") {
+        return {
+          ...prevState,
+          activeTool: nextActiveTool,
+          ...(keepSelection
+            ? {}
+            : {
+                selectedElementIds: makeNextSelectedElementIds({}, prevState),
+                selectedGroupIds: makeNextSelectedElementIds({}, prevState),
+                editingGroupId: null,
+                multiElement: null,
+              }),
+          ...commonResets,
+        };
+      } else if (nextActiveTool.type !== "selection") {
         return {
           ...prevState,
           activeTool: nextActiveTool,
@@ -6603,6 +6628,7 @@ class App extends React.Component<AppProps, AppState> {
       !this.state.penMode ||
       event.pointerType !== "touch" ||
       this.state.activeTool.type === "selection" ||
+      this.state.activeTool.type === "lasso" ||
       this.state.activeTool.type === "text" ||
       this.state.activeTool.type === "image";
 
@@ -6610,7 +6636,13 @@ class App extends React.Component<AppProps, AppState> {
       return;
     }
 
-    if (this.state.activeTool.type === "text") {
+    if (this.state.activeTool.type === "lasso") {
+      this.lassoTrail.startPath(
+        pointerDownState.origin.x,
+        pointerDownState.origin.y,
+        event.shiftKey,
+      );
+    } else if (this.state.activeTool.type === "text") {
       this.handleTextOnPointerDown(event, pointerDownState);
     } else if (
       this.state.activeTool.type === "arrow" ||
@@ -7067,7 +7099,10 @@ class App extends React.Component<AppProps, AppState> {
   }
 
   private clearSelectionIfNotUsingSelection = (): void => {
-    if (this.state.activeTool.type !== "selection") {
+    if (
+      this.state.activeTool.type !== "selection" &&
+      this.state.activeTool.type !== "lasso"
+    ) {
       this.setState({
         selectedElementIds: makeNextSelectedElementIds({}, this.state),
         selectedGroupIds: {},
@@ -8267,7 +8302,8 @@ class App extends React.Component<AppProps, AppState> {
       if (
         (hasHitASelectedElement ||
           pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements) &&
-        !isSelectingPointsInLineEditor
+        !isSelectingPointsInLineEditor &&
+        this.state.activeTool.type !== "lasso"
       ) {
         const selectedElements = this.scene.getSelectedElements(this.state);
 
@@ -8539,7 +8575,37 @@ class App extends React.Component<AppProps, AppState> {
       if (this.state.selectionElement) {
         pointerDownState.lastCoords.x = pointerCoords.x;
         pointerDownState.lastCoords.y = pointerCoords.y;
-        this.maybeDragNewGenericElement(pointerDownState, event);
+        if (event.altKey) {
+          this.setActiveTool(
+            { type: "lasso", fromSelection: true },
+            event.shiftKey,
+          );
+          this.lassoTrail.startPath(
+            pointerDownState.origin.x,
+            pointerDownState.origin.y,
+            event.shiftKey,
+          );
+          this.setAppState({
+            selectionElement: null,
+          });
+        } else {
+          this.maybeDragNewGenericElement(pointerDownState, event);
+        }
+      } else if (this.state.activeTool.type === "lasso") {
+        if (!event.altKey && this.state.activeTool.fromSelection) {
+          this.setActiveTool({ type: "selection" });
+          this.createGenericElementOnPointerDown("selection", pointerDownState);
+          pointerDownState.lastCoords.x = pointerCoords.x;
+          pointerDownState.lastCoords.y = pointerCoords.y;
+          this.maybeDragNewGenericElement(pointerDownState, event);
+          this.lassoTrail.endPath();
+        } else {
+          this.lassoTrail.addPointToPath(
+            pointerCoords.x,
+            pointerCoords.y,
+            event.shiftKey,
+          );
+        }
       } else {
         // It is very important to read this.state within each move event,
         // otherwise we would read a stale one!
@@ -8794,6 +8860,8 @@ class App extends React.Component<AppProps, AppState> {
         originSnapOffset: null,
       }));
 
+      // just in case, tool changes mid drag, always clean up
+      this.lassoTrail.endPath();
       this.lastPointerMoveCoords = null;
 
       SnapCache.setReferenceSnapPoints(null);
@@ -9510,6 +9578,8 @@ class App extends React.Component<AppProps, AppState> {
       }
 
       if (
+        // do not clear selection if lasso is active
+        this.state.activeTool.type !== "lasso" &&
         // not elbow midpoint dragged
         !(hitElement && isElbowArrow(hitElement)) &&
         // not dragged
@@ -9608,7 +9678,13 @@ class App extends React.Component<AppProps, AppState> {
         return;
       }
 
-      if (!activeTool.locked && activeTool.type !== "freedraw") {
+      if (
+        !activeTool.locked &&
+        activeTool.type !== "freedraw" &&
+        (activeTool.type !== "lasso" ||
+          // if lasso is turned on but from selection => reset to selection
+          (activeTool.type === "lasso" && activeTool.fromSelection))
+      ) {
         resetCursor(this.interactiveCanvas);
         this.setState({
           newElement: null,
@@ -10463,7 +10539,7 @@ class App extends React.Component<AppProps, AppState> {
         width: distance(pointerDownState.origin.x, pointerCoords.x),
         height: distance(pointerDownState.origin.y, pointerCoords.y),
         shouldMaintainAspectRatio: shouldMaintainAspectRatio(event),
-        shouldResizeFromCenter: shouldResizeFromCenter(event),
+        shouldResizeFromCenter: false,
         zoom: this.state.zoom.value,
         informMutation,
       });
diff --git a/packages/excalidraw/components/CommandPalette/CommandPalette.tsx b/packages/excalidraw/components/CommandPalette/CommandPalette.tsx
index 4391759d9b..8b45e3377e 100644
--- a/packages/excalidraw/components/CommandPalette/CommandPalette.tsx
+++ b/packages/excalidraw/components/CommandPalette/CommandPalette.tsx
@@ -315,6 +315,7 @@ function CommandPaletteInner({
       const toolCommands: CommandPaletteItem[] = [
         actionManager.actions.toggleHandTool,
         actionManager.actions.setFrameAsActiveTool,
+        actionManager.actions.toggleLassoTool,
       ].map((action) => actionToCommand(action, DEFAULT_CATEGORIES.tools));
 
       const editorCommands: CommandPaletteItem[] = [
diff --git a/packages/excalidraw/components/HintViewer.tsx b/packages/excalidraw/components/HintViewer.tsx
index 6eb1a21867..5072e4471f 100644
--- a/packages/excalidraw/components/HintViewer.tsx
+++ b/packages/excalidraw/components/HintViewer.tsx
@@ -120,7 +120,7 @@ const getHints = ({
       !appState.editingTextElement &&
       !appState.editingLinearElement
     ) {
-      return t("hints.deepBoxSelect");
+      return [t("hints.deepBoxSelect")];
     }
 
     if (isGridModeEnabled(app) && appState.selectedElementsAreBeingDragged) {
@@ -128,7 +128,7 @@ const getHints = ({
     }
 
     if (!selectedElements.length && !isMobile) {
-      return t("hints.canvasPanning");
+      return [t("hints.canvasPanning")];
     }
 
     if (selectedElements.length === 1) {
diff --git a/packages/excalidraw/components/canvases/StaticCanvas.tsx b/packages/excalidraw/components/canvases/StaticCanvas.tsx
index b70c8ace6d..5a498ebacc 100644
--- a/packages/excalidraw/components/canvases/StaticCanvas.tsx
+++ b/packages/excalidraw/components/canvases/StaticCanvas.tsx
@@ -87,34 +87,36 @@ const StaticCanvas = (props: StaticCanvasProps) => {
   return <div className="excalidraw__canvas-wrapper" ref={wrapperRef} />;
 };
 
-const getRelevantAppStateProps = (
-  appState: AppState,
-): StaticCanvasAppState => ({
-  zoom: appState.zoom,
-  scrollX: appState.scrollX,
-  scrollY: appState.scrollY,
-  width: appState.width,
-  height: appState.height,
-  viewModeEnabled: appState.viewModeEnabled,
-  openDialog: appState.openDialog,
-  hoveredElementIds: appState.hoveredElementIds,
-  offsetLeft: appState.offsetLeft,
-  offsetTop: appState.offsetTop,
-  theme: appState.theme,
-  pendingImageElementId: appState.pendingImageElementId,
-  shouldCacheIgnoreZoom: appState.shouldCacheIgnoreZoom,
-  viewBackgroundColor: appState.viewBackgroundColor,
-  exportScale: appState.exportScale,
-  selectedElementsAreBeingDragged: appState.selectedElementsAreBeingDragged,
-  gridSize: appState.gridSize,
-  gridStep: appState.gridStep,
-  frameRendering: appState.frameRendering,
-  selectedElementIds: appState.selectedElementIds,
-  frameToHighlight: appState.frameToHighlight,
-  editingGroupId: appState.editingGroupId,
-  currentHoveredFontFamily: appState.currentHoveredFontFamily,
-  croppingElementId: appState.croppingElementId,
-});
+const getRelevantAppStateProps = (appState: AppState): StaticCanvasAppState => {
+  const relevantAppStateProps = {
+    zoom: appState.zoom,
+    scrollX: appState.scrollX,
+    scrollY: appState.scrollY,
+    width: appState.width,
+    height: appState.height,
+    viewModeEnabled: appState.viewModeEnabled,
+    openDialog: appState.openDialog,
+    hoveredElementIds: appState.hoveredElementIds,
+    offsetLeft: appState.offsetLeft,
+    offsetTop: appState.offsetTop,
+    theme: appState.theme,
+    pendingImageElementId: appState.pendingImageElementId,
+    shouldCacheIgnoreZoom: appState.shouldCacheIgnoreZoom,
+    viewBackgroundColor: appState.viewBackgroundColor,
+    exportScale: appState.exportScale,
+    selectedElementsAreBeingDragged: appState.selectedElementsAreBeingDragged,
+    gridSize: appState.gridSize,
+    gridStep: appState.gridStep,
+    frameRendering: appState.frameRendering,
+    selectedElementIds: appState.selectedElementIds,
+    frameToHighlight: appState.frameToHighlight,
+    editingGroupId: appState.editingGroupId,
+    currentHoveredFontFamily: appState.currentHoveredFontFamily,
+    croppingElementId: appState.croppingElementId,
+  };
+
+  return relevantAppStateProps;
+};
 
 const areEqual = (
   prevProps: StaticCanvasProps,
diff --git a/packages/excalidraw/components/icons.tsx b/packages/excalidraw/components/icons.tsx
index c6d7f94732..f3808a69d0 100644
--- a/packages/excalidraw/components/icons.tsx
+++ b/packages/excalidraw/components/icons.tsx
@@ -274,6 +274,21 @@ export const SelectionIcon = createIcon(
   { fill: "none", width: 22, height: 22, strokeWidth: 1.25 },
 );
 
+export const LassoIcon = createIcon(
+  <g
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth={1.5}
+  >
+    <path d="M4.028 13.252c-.657 -.972 -1.028 -2.078 -1.028 -3.252c0 -3.866 4.03 -7 9 -7s9 3.134 9 7s-4.03 7 -9 7c-1.913 0 -3.686 -.464 -5.144 -1.255" />
+    <path d="M5 15m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
+    <path d="M5 17c0 1.42 .316 2.805 1 4" />
+  </g>,
+
+  { fill: "none", width: 22, height: 22, strokeWidth: 1.25 },
+);
+
 // tabler-icons: square
 export const RectangleIcon = createIcon(
   <g strokeWidth="1.5">
@@ -406,7 +421,7 @@ export const TrashIcon = createIcon(
 );
 
 export const EmbedIcon = createIcon(
-  <g strokeWidth="1.25">
+  <g strokeWidth="1.5">
     <polyline points="12 16 18 10 12 4" />
     <polyline points="8 4 2 10 8 16" />
   </g>,
diff --git a/packages/excalidraw/data/restore.ts b/packages/excalidraw/data/restore.ts
index 30702f130e..4f050c922e 100644
--- a/packages/excalidraw/data/restore.ts
+++ b/packages/excalidraw/data/restore.ts
@@ -86,6 +86,7 @@ export const AllowedExcalidrawActiveTools: Record<
   boolean
 > = {
   selection: true,
+  lasso: true,
   text: true,
   rectangle: true,
   diamond: true,
diff --git a/packages/excalidraw/lasso/index.ts b/packages/excalidraw/lasso/index.ts
new file mode 100644
index 0000000000..d59b2d7439
--- /dev/null
+++ b/packages/excalidraw/lasso/index.ts
@@ -0,0 +1,201 @@
+import {
+  type GlobalPoint,
+  type LineSegment,
+  pointFrom,
+} from "@excalidraw/math";
+
+import { getElementLineSegments } from "@excalidraw/element/bounds";
+import { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
+import {
+  isFrameLikeElement,
+  isLinearElement,
+  isTextElement,
+} from "@excalidraw/element/typeChecks";
+
+import { getFrameChildren } from "@excalidraw/element/frame";
+import { selectGroupsForSelectedElements } from "@excalidraw/element/groups";
+
+import { getContainerElement } from "@excalidraw/element/textElement";
+
+import { arrayToMap, easeOut } from "@excalidraw/common";
+
+import type {
+  ExcalidrawElement,
+  ExcalidrawLinearElement,
+  NonDeleted,
+} from "@excalidraw/element/types";
+
+import { type AnimationFrameHandler } from "../animation-frame-handler";
+
+import { AnimatedTrail } from "../animated-trail";
+
+import { getLassoSelectedElementIds } from "./utils";
+
+import type App from "../components/App";
+
+export class LassoTrail extends AnimatedTrail {
+  private intersectedElements: Set<ExcalidrawElement["id"]> = new Set();
+  private enclosedElements: Set<ExcalidrawElement["id"]> = new Set();
+  private elementsSegments: Map<string, LineSegment<GlobalPoint>[]> | null =
+    null;
+  private keepPreviousSelection: boolean = false;
+
+  constructor(animationFrameHandler: AnimationFrameHandler, app: App) {
+    super(animationFrameHandler, app, {
+      animateTrail: true,
+      streamline: 0.4,
+      sizeMapping: (c) => {
+        const DECAY_TIME = Infinity;
+        const DECAY_LENGTH = 5000;
+        const t = Math.max(
+          0,
+          1 - (performance.now() - c.pressure) / DECAY_TIME,
+        );
+        const l =
+          (DECAY_LENGTH -
+            Math.min(DECAY_LENGTH, c.totalLength - c.currentIndex)) /
+          DECAY_LENGTH;
+
+        return Math.min(easeOut(l), easeOut(t));
+      },
+      fill: () => "rgba(105,101,219,0.05)",
+      stroke: () => "rgba(105,101,219)",
+    });
+  }
+
+  startPath(x: number, y: number, keepPreviousSelection = false) {
+    // clear any existing trails just in case
+    this.endPath();
+
+    super.startPath(x, y);
+    this.intersectedElements.clear();
+    this.enclosedElements.clear();
+
+    this.keepPreviousSelection = keepPreviousSelection;
+
+    if (!this.keepPreviousSelection) {
+      this.app.setState({
+        selectedElementIds: {},
+        selectedGroupIds: {},
+        selectedLinearElement: null,
+      });
+    }
+  }
+
+  selectElementsFromIds = (ids: string[]) => {
+    this.app.setState((prevState) => {
+      const nextSelectedElementIds = ids.reduce((acc, id) => {
+        acc[id] = true;
+        return acc;
+      }, {} as Record<ExcalidrawElement["id"], true>);
+
+      if (this.keepPreviousSelection) {
+        for (const id of Object.keys(prevState.selectedElementIds)) {
+          nextSelectedElementIds[id] = true;
+        }
+      }
+
+      for (const [id] of Object.entries(nextSelectedElementIds)) {
+        const element = this.app.scene.getNonDeletedElement(id);
+
+        if (element && isTextElement(element)) {
+          const container = getContainerElement(
+            element,
+            this.app.scene.getNonDeletedElementsMap(),
+          );
+          if (container) {
+            nextSelectedElementIds[container.id] = true;
+            delete nextSelectedElementIds[element.id];
+          }
+        }
+      }
+
+      // remove all children of selected frames
+      for (const [id] of Object.entries(nextSelectedElementIds)) {
+        const element = this.app.scene.getNonDeletedElement(id);
+
+        if (element && isFrameLikeElement(element)) {
+          const elementsInFrame = getFrameChildren(
+            this.app.scene.getNonDeletedElementsMap(),
+            element.id,
+          );
+          for (const child of elementsInFrame) {
+            delete nextSelectedElementIds[child.id];
+          }
+        }
+      }
+
+      const nextSelection = selectGroupsForSelectedElements(
+        {
+          editingGroupId: prevState.editingGroupId,
+          selectedElementIds: nextSelectedElementIds,
+        },
+        this.app.scene.getNonDeletedElements(),
+        prevState,
+        this.app,
+      );
+
+      const selectedIds = [...Object.keys(nextSelection.selectedElementIds)];
+      const selectedGroupIds = [...Object.keys(nextSelection.selectedGroupIds)];
+
+      return {
+        selectedElementIds: nextSelection.selectedElementIds,
+        selectedGroupIds: nextSelection.selectedGroupIds,
+        selectedLinearElement:
+          selectedIds.length === 1 &&
+          !selectedGroupIds.length &&
+          isLinearElement(this.app.scene.getNonDeletedElement(selectedIds[0]))
+            ? new LinearElementEditor(
+                this.app.scene.getNonDeletedElement(
+                  selectedIds[0],
+                ) as NonDeleted<ExcalidrawLinearElement>,
+              )
+            : null,
+      };
+    });
+  };
+
+  addPointToPath = (x: number, y: number, keepPreviousSelection = false) => {
+    super.addPointToPath(x, y);
+
+    this.keepPreviousSelection = keepPreviousSelection;
+
+    this.updateSelection();
+  };
+
+  private updateSelection = () => {
+    const lassoPath = super
+      .getCurrentTrail()
+      ?.originalPoints?.map((p) => pointFrom<GlobalPoint>(p[0], p[1]));
+
+    if (!this.elementsSegments) {
+      this.elementsSegments = new Map();
+      const visibleElementsMap = arrayToMap(this.app.visibleElements);
+      for (const element of this.app.visibleElements) {
+        const segments = getElementLineSegments(element, visibleElementsMap);
+        this.elementsSegments.set(element.id, segments);
+      }
+    }
+
+    if (lassoPath) {
+      const { selectedElementIds } = getLassoSelectedElementIds({
+        lassoPath,
+        elements: this.app.visibleElements,
+        elementsSegments: this.elementsSegments,
+        intersectedElements: this.intersectedElements,
+        enclosedElements: this.enclosedElements,
+        simplifyDistance: 5 / this.app.state.zoom.value,
+      });
+
+      this.selectElementsFromIds(selectedElementIds);
+    }
+  };
+
+  endPath(): void {
+    super.endPath();
+    super.clearTrails();
+    this.intersectedElements.clear();
+    this.enclosedElements.clear();
+    this.elementsSegments = null;
+  }
+}
diff --git a/packages/excalidraw/lasso/utils.ts b/packages/excalidraw/lasso/utils.ts
new file mode 100644
index 0000000000..b04e66db90
--- /dev/null
+++ b/packages/excalidraw/lasso/utils.ts
@@ -0,0 +1,111 @@
+import { simplify } from "points-on-curve";
+
+import {
+  polygonFromPoints,
+  polygonIncludesPoint,
+  lineSegment,
+  lineSegmentIntersectionPoints,
+} from "@excalidraw/math";
+
+import type { GlobalPoint, LineSegment } from "@excalidraw/math/types";
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+
+export type ElementsSegmentsMap = Map<string, LineSegment<GlobalPoint>[]>;
+
+export const getLassoSelectedElementIds = (input: {
+  lassoPath: GlobalPoint[];
+  elements: readonly ExcalidrawElement[];
+  elementsSegments: ElementsSegmentsMap;
+  intersectedElements: Set<ExcalidrawElement["id"]>;
+  enclosedElements: Set<ExcalidrawElement["id"]>;
+  simplifyDistance?: number;
+}): {
+  selectedElementIds: string[];
+} => {
+  const {
+    lassoPath,
+    elements,
+    elementsSegments,
+    intersectedElements,
+    enclosedElements,
+    simplifyDistance,
+  } = input;
+  // simplify the path to reduce the number of points
+  let path: GlobalPoint[] = lassoPath;
+  if (simplifyDistance) {
+    path = simplify(lassoPath, simplifyDistance) as GlobalPoint[];
+  }
+  // close the path to form a polygon for enclosure check
+  const closedPath = polygonFromPoints(path);
+  // as the path might not enclose a shape anymore, clear before checking
+  enclosedElements.clear();
+  for (const element of elements) {
+    if (
+      !intersectedElements.has(element.id) &&
+      !enclosedElements.has(element.id)
+    ) {
+      const enclosed = enclosureTest(closedPath, element, elementsSegments);
+      if (enclosed) {
+        enclosedElements.add(element.id);
+      } else {
+        const intersects = intersectionTest(
+          closedPath,
+          element,
+          elementsSegments,
+        );
+        if (intersects) {
+          intersectedElements.add(element.id);
+        }
+      }
+    }
+  }
+
+  const results = [...intersectedElements, ...enclosedElements];
+
+  return {
+    selectedElementIds: results,
+  };
+};
+
+const enclosureTest = (
+  lassoPath: GlobalPoint[],
+  element: ExcalidrawElement,
+  elementsSegments: ElementsSegmentsMap,
+): boolean => {
+  const lassoPolygon = polygonFromPoints(lassoPath);
+  const segments = elementsSegments.get(element.id);
+  if (!segments) {
+    return false;
+  }
+
+  return segments.some((segment) => {
+    return segment.some((point) => polygonIncludesPoint(point, lassoPolygon));
+  });
+};
+
+const intersectionTest = (
+  lassoPath: GlobalPoint[],
+  element: ExcalidrawElement,
+  elementsSegments: ElementsSegmentsMap,
+): boolean => {
+  const elementSegments = elementsSegments.get(element.id);
+  if (!elementSegments) {
+    return false;
+  }
+
+  const lassoSegments = lassoPath.reduce((acc, point, index) => {
+    if (index === 0) {
+      return acc;
+    }
+    acc.push(lineSegment(lassoPath[index - 1], point));
+    return acc;
+  }, [] as LineSegment<GlobalPoint>[]);
+
+  return lassoSegments.some((lassoSegment) =>
+    elementSegments.some(
+      (elementSegment) =>
+        // introduce a bit of tolerance to account for roughness and simplification of paths
+        lineSegmentIntersectionPoints(lassoSegment, elementSegment, 1) !== null,
+    ),
+  );
+};
diff --git a/packages/excalidraw/locales/en.json b/packages/excalidraw/locales/en.json
index f14b797055..381f2b67f8 100644
--- a/packages/excalidraw/locales/en.json
+++ b/packages/excalidraw/locales/en.json
@@ -276,6 +276,7 @@
   },
   "toolBar": {
     "selection": "Selection",
+    "lasso": "Lasso selection",
     "image": "Insert image",
     "rectangle": "Rectangle",
     "diamond": "Diamond",
diff --git a/packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap
index 89629b93e8..349dd9e648 100644
--- a/packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap
+++ b/packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap
@@ -5,6 +5,7 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -1088,6 +1089,7 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -1307,6 +1309,7 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -1641,6 +1644,7 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -1975,6 +1979,7 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -2194,6 +2199,7 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -2437,6 +2443,7 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -2741,6 +2748,7 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -3113,6 +3121,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -3591,6 +3600,7 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -3917,6 +3927,7 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -4243,6 +4254,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -4649,6 +4661,7 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -5870,6 +5883,7 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -7137,6 +7151,7 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -7408,7 +7423,6 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
         </svg>,
         "label": "labels.elementLock.unlockAll",
         "name": "unlockAllElements",
-        "paletteName": "Unlock all elements",
         "perform": [Function],
         "predicate": [Function],
         "trackEvent": {
@@ -7559,7 +7573,6 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
         "keyTest": [Function],
         "label": "buttons.zenMode",
         "name": "zenMode",
-        "paletteName": "Toggle zen mode",
         "perform": [Function],
         "predicate": [Function],
         "trackEvent": {
@@ -7603,7 +7616,6 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
         "keyTest": [Function],
         "label": "labels.viewMode",
         "name": "viewMode",
-        "paletteName": "Toggle view mode",
         "perform": [Function],
         "predicate": [Function],
         "trackEvent": {
@@ -7677,7 +7689,6 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
         ],
         "label": "stats.fullTitle",
         "name": "stats",
-        "paletteName": "Toggle stats",
         "perform": [Function],
         "trackEvent": {
           "category": "menu",
@@ -7814,6 +7825,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -8802,6 +8814,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
diff --git a/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap
index 3f523d005d..9ffb97128a 100644
--- a/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap
+++ b/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap
@@ -5,6 +5,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -604,6 +605,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -1111,6 +1113,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -1482,6 +1485,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -1854,6 +1858,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -2124,6 +2129,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -2563,6 +2569,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -2865,6 +2872,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -3152,6 +3160,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -3449,6 +3458,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -3738,6 +3748,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -3976,6 +3987,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -4238,6 +4250,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -4514,6 +4527,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -4748,6 +4762,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -4982,6 +4997,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -5214,6 +5230,7 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -5446,6 +5463,7 @@ exports[`history > multiplayer undo/redo > conflicts in frames and their childre
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -5708,6 +5726,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -6042,6 +6061,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -6470,6 +6490,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -6851,6 +6872,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -7173,6 +7195,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -7474,6 +7497,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -7706,6 +7730,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -8064,6 +8089,7 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -8422,6 +8448,7 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -8829,6 +8856,7 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "freedraw",
@@ -9119,6 +9147,7 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -9387,6 +9416,7 @@ exports[`history > multiplayer undo/redo > should not override remote changes on
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -9654,6 +9684,7 @@ exports[`history > multiplayer undo/redo > should not override remote changes on
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -9888,6 +9919,7 @@ exports[`history > multiplayer undo/redo > should override remotely added groups
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -10192,6 +10224,7 @@ exports[`history > multiplayer undo/redo > should override remotely added points
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -10535,6 +10568,7 @@ exports[`history > multiplayer undo/redo > should redistribute deltas when eleme
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -10773,6 +10807,7 @@ exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end o
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -11225,6 +11260,7 @@ exports[`history > multiplayer undo/redo > should update history entries after r
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -11482,6 +11518,7 @@ exports[`history > singleplayer undo/redo > remounting undo/redo buttons should
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -11724,6 +11761,7 @@ exports[`history > singleplayer undo/redo > should clear the redo stack on eleme
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -11968,6 +12006,7 @@ exports[`history > singleplayer undo/redo > should create entry when selecting f
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "freedraw",
@@ -12372,6 +12411,7 @@ exports[`history > singleplayer undo/redo > should create new history entry on s
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -12622,6 +12662,7 @@ exports[`history > singleplayer undo/redo > should disable undo/redo buttons whe
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -12866,6 +12907,7 @@ exports[`history > singleplayer undo/redo > should end up with no history entry
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -13110,6 +13152,7 @@ exports[`history > singleplayer undo/redo > should iterate through the history w
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -13360,6 +13403,7 @@ exports[`history > singleplayer undo/redo > should not clear the redo stack on s
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -13695,6 +13739,7 @@ exports[`history > singleplayer undo/redo > should not collapse when applying co
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -13870,6 +13915,7 @@ exports[`history > singleplayer undo/redo > should not end up with history entry
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -14161,6 +14207,7 @@ exports[`history > singleplayer undo/redo > should not end up with history entry
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -14431,6 +14478,7 @@ exports[`history > singleplayer undo/redo > should not override appstate changes
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -14709,6 +14757,7 @@ exports[`history > singleplayer undo/redo > should support appstate name or view
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -14873,6 +14922,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -15570,6 +15620,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -16189,6 +16240,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -16808,6 +16860,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -17518,6 +17571,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -18265,6 +18319,7 @@ exports[`history > singleplayer undo/redo > should support changes in elements'
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -18742,6 +18797,7 @@ exports[`history > singleplayer undo/redo > should support duplication of groups
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -19267,6 +19323,7 @@ exports[`history > singleplayer undo/redo > should support element creation, del
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -19726,6 +19783,7 @@ exports[`history > singleplayer undo/redo > should support linear element creati
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
diff --git a/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap
index 4e9c659d0f..319287792c 100644
--- a/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap
+++ b/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap
@@ -5,6 +5,7 @@ exports[`given element A and group of elements B and given both are selected whe
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -420,6 +421,7 @@ exports[`given element A and group of elements B and given both are selected whe
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -826,6 +828,7 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -1371,6 +1374,7 @@ exports[`regression tests > Drags selected element when hitting only bounding bo
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -1575,6 +1579,7 @@ exports[`regression tests > adjusts z order when grouping > [end of test] appSta
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -1950,6 +1955,7 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] appSt
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -2188,6 +2194,7 @@ exports[`regression tests > arrow keys > [end of test] appState 1`] = `
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -2368,6 +2375,7 @@ exports[`regression tests > can drag element that covers another element, while
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -2688,6 +2696,7 @@ exports[`regression tests > change the properties of a shape > [end of test] app
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -2934,6 +2943,7 @@ exports[`regression tests > click on an element and drag it > [dragged] appState
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -3177,6 +3187,7 @@ exports[`regression tests > click on an element and drag it > [end of test] appS
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -3407,6 +3418,7 @@ exports[`regression tests > click to select a shape > [end of test] appState 1`]
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -3663,6 +3675,7 @@ exports[`regression tests > click-drag to select a group > [end of test] appStat
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -3974,6 +3987,7 @@ exports[`regression tests > deleting last but one element in editing group shoul
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -4396,6 +4410,7 @@ exports[`regression tests > deselects group of selected elements on pointer down
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -4679,6 +4694,7 @@ exports[`regression tests > deselects group of selected elements on pointer up w
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -4932,6 +4948,7 @@ exports[`regression tests > deselects selected element on pointer down when poin
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -5142,6 +5159,7 @@ exports[`regression tests > deselects selected element, on pointer up, when clic
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -5341,6 +5359,7 @@ exports[`regression tests > double click to edit a group > [end of test] appStat
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -5723,6 +5742,7 @@ exports[`regression tests > drags selected elements from point inside common bou
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -6013,6 +6033,7 @@ exports[`regression tests > draw every type of shape > [end of test] appState 1`
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "freedraw",
@@ -6821,6 +6842,7 @@ exports[`regression tests > given a group of selected elements with an element t
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -7151,6 +7173,7 @@ exports[`regression tests > given a selected element A and a not selected elemen
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -7427,6 +7450,7 @@ exports[`regression tests > given selected element A with lower z-index than uns
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -7661,6 +7685,7 @@ exports[`regression tests > given selected element A with lower z-index than uns
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -7898,6 +7923,7 @@ exports[`regression tests > key 2 selects rectangle tool > [end of test] appStat
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -8078,6 +8104,7 @@ exports[`regression tests > key 3 selects diamond tool > [end of test] appState
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -8258,6 +8285,7 @@ exports[`regression tests > key 4 selects ellipse tool > [end of test] appState
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -8438,6 +8466,7 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1`
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -8661,6 +8690,7 @@ exports[`regression tests > key 6 selects line tool > [end of test] appState 1`]
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -8883,6 +8913,7 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] appState
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "freedraw",
@@ -9077,6 +9108,7 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1`
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -9300,6 +9332,7 @@ exports[`regression tests > key d selects diamond tool > [end of test] appState
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -9480,6 +9513,7 @@ exports[`regression tests > key l selects line tool > [end of test] appState 1`]
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -9702,6 +9736,7 @@ exports[`regression tests > key o selects ellipse tool > [end of test] appState
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -9882,6 +9917,7 @@ exports[`regression tests > key p selects freedraw tool > [end of test] appState
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "freedraw",
@@ -10076,6 +10112,7 @@ exports[`regression tests > key r selects rectangle tool > [end of test] appStat
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -10256,6 +10293,7 @@ exports[`regression tests > make a group and duplicate it > [end of test] appSta
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -10764,6 +10802,7 @@ exports[`regression tests > noop interaction after undo shouldn't create history
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -11041,6 +11080,7 @@ exports[`regression tests > pinch-to-zoom works > [end of test] appState 1`] = `
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -11167,6 +11207,7 @@ exports[`regression tests > shift click on selected element should deselect it o
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -11366,6 +11407,7 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -11677,6 +11719,7 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -12089,6 +12132,7 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -12702,6 +12746,7 @@ exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] a
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -12831,6 +12876,7 @@ exports[`regression tests > supports nested groups > [end of test] appState 1`]
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -13415,6 +13461,7 @@ exports[`regression tests > switches from group of selected elements to another
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -13753,6 +13800,7 @@ exports[`regression tests > switches selected element on pointer down > [end of
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -14018,6 +14066,7 @@ exports[`regression tests > two-finger scroll works > [end of test] appState 1`]
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -14144,6 +14193,7 @@ exports[`regression tests > undo/redo drawing an element > [end of test] appStat
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
@@ -14523,6 +14573,7 @@ exports[`regression tests > updates fontSize & fontFamily appState > [end of tes
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "text",
@@ -14649,6 +14700,7 @@ exports[`regression tests > zoom hotkeys > [end of test] appState 1`] = `
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
diff --git a/packages/excalidraw/tests/helpers/ui.ts b/packages/excalidraw/tests/helpers/ui.ts
index c328ae105a..0e5e433674 100644
--- a/packages/excalidraw/tests/helpers/ui.ts
+++ b/packages/excalidraw/tests/helpers/ui.ts
@@ -402,7 +402,10 @@ const proxy = <T extends ExcalidrawElement>(
 };
 
 /** Tools that can be used to draw shapes */
-type DrawingToolName = Exclude<ToolType, "lock" | "selection" | "eraser">;
+type DrawingToolName = Exclude<
+  ToolType,
+  "lock" | "selection" | "eraser" | "lasso"
+>;
 
 type Element<T extends DrawingToolName> = T extends "line" | "freedraw"
   ? ExcalidrawLinearElement
diff --git a/packages/excalidraw/tests/lasso.test.tsx b/packages/excalidraw/tests/lasso.test.tsx
new file mode 100644
index 0000000000..00e0ec2b4d
--- /dev/null
+++ b/packages/excalidraw/tests/lasso.test.tsx
@@ -0,0 +1,1813 @@
+/**
+ * Test case:
+ *
+ * create a few random elements on canvas
+ * creates a lasso path for each of these cases
+ * - do not intersect / enclose at all
+ * - intersects some, does not enclose/intersect the rest
+ * - intersects and encloses some
+ * - single linear element should be selected if lasso intersects/encloses it
+ *
+ *
+ * special cases:
+ * - selects only frame if frame and children both selected by lasso
+ * - selects group if any group from group is selected
+ */
+
+import {
+  type GlobalPoint,
+  type LocalPoint,
+  pointFrom,
+  type Radians,
+} from "@excalidraw/math";
+
+import { getElementLineSegments } from "@excalidraw/element/bounds";
+
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+
+import { Excalidraw } from "../index";
+
+import { getSelectedElements } from "../scene";
+
+import { getLassoSelectedElementIds } from "../lasso/utils";
+
+import { act, render } from "./test-utils";
+
+import type { ElementsSegmentsMap } from "../lasso/utils";
+
+const { h } = window;
+
+beforeEach(async () => {
+  localStorage.clear();
+  await render(<Excalidraw handleKeyboardGlobally={true} />);
+  h.state.width = 1000;
+  h.state.height = 1000;
+});
+
+const updatePath = (startPoint: GlobalPoint, points: LocalPoint[]) => {
+  act(() => {
+    h.app.lassoTrail.startPath(startPoint[0], startPoint[1]);
+
+    points.forEach((point) => {
+      h.app.lassoTrail.addPointToPath(
+        startPoint[0] + point[0],
+        startPoint[1] + point[1],
+      );
+    });
+
+    const elementsSegments: ElementsSegmentsMap = new Map();
+    for (const element of h.elements) {
+      const segments = getElementLineSegments(
+        element,
+        h.app.scene.getElementsMapIncludingDeleted(),
+      );
+      elementsSegments.set(element.id, segments);
+    }
+
+    const result = getLassoSelectedElementIds({
+      lassoPath:
+        h.app.lassoTrail
+          .getCurrentTrail()
+          ?.originalPoints?.map((p) => pointFrom<GlobalPoint>(p[0], p[1])) ??
+        [],
+      elements: h.elements,
+      elementsSegments,
+      intersectedElements: new Set(),
+      enclosedElements: new Set(),
+    });
+
+    act(() =>
+      h.app.lassoTrail.selectElementsFromIds(result.selectedElementIds),
+    );
+
+    h.app.lassoTrail.endPath();
+  });
+};
+
+describe("Basic lasso selection tests", () => {
+  beforeEach(() => {
+    const elements: ExcalidrawElement[] = [
+      {
+        id: "FLZN67ISZbMV-RH8SzS9W",
+        type: "rectangle",
+        x: 0,
+        y: 0,
+        width: 107.11328125,
+        height: 90.16015625,
+        angle: 5.40271241072378,
+        strokeColor: "#1e1e1e",
+        backgroundColor: "transparent",
+        fillStyle: "solid",
+        strokeWidth: 2,
+        strokeStyle: "solid",
+        roughness: 1,
+        opacity: 100,
+        groupIds: [],
+        frameId: null,
+        index: "a8",
+        roundness: {
+          type: 3,
+        },
+        seed: 1558764732,
+        version: 43,
+        versionNonce: 575357188,
+        isDeleted: false,
+        boundElements: [],
+        updated: 1740723127946,
+        link: null,
+        locked: false,
+      },
+      {
+        id: "T3TSAFUwp--pT2b_q7Y5U",
+        type: "diamond",
+        x: 349.822265625,
+        y: -201.244140625,
+        width: 123.3828125,
+        height: 74.66796875,
+        angle: 0.6498998717212414,
+        strokeColor: "#1e1e1e",
+        backgroundColor: "transparent",
+        fillStyle: "solid",
+        strokeWidth: 2,
+        strokeStyle: "solid",
+        roughness: 1,
+        opacity: 100,
+        groupIds: [],
+        frameId: null,
+        index: "a9",
+        roundness: {
+          type: 2,
+        },
+        seed: 1720937276,
+        version: 69,
+        versionNonce: 1991578556,
+        isDeleted: false,
+        boundElements: [],
+        updated: 1740723132096,
+        link: null,
+        locked: false,
+      },
+      {
+        id: "a9RZwSeqlZHyhses2iYZ0",
+        type: "ellipse",
+        x: 188.259765625,
+        y: -48.193359375,
+        width: 146.8984375,
+        height: 91.01171875,
+        angle: 0.6070652964532064,
+        strokeColor: "#1e1e1e",
+        backgroundColor: "transparent",
+        fillStyle: "solid",
+        strokeWidth: 2,
+        strokeStyle: "solid",
+        roughness: 1,
+        opacity: 100,
+        groupIds: [],
+        frameId: null,
+        index: "aA",
+        roundness: {
+          type: 2,
+        },
+        seed: 476696636,
+        version: 38,
+        versionNonce: 1903760444,
+        isDeleted: false,
+        boundElements: [],
+        updated: 1740723125079,
+        link: null,
+        locked: false,
+      },
+      {
+        id: "vCw17KEn9h4sY2KMdnq0G",
+        type: "arrow",
+        x: -257.388671875,
+        y: 78.583984375,
+        width: 168.4765625,
+        height: 153.38671875,
+        angle: 0,
+        strokeColor: "#1e1e1e",
+        backgroundColor: "transparent",
+        fillStyle: "solid",
+        strokeWidth: 2,
+        strokeStyle: "solid",
+        roughness: 1,
+        opacity: 100,
+        groupIds: [],
+        frameId: null,
+        index: "aB",
+        roundness: {
+          type: 2,
+        },
+        seed: 1302309508,
+        version: 19,
+        versionNonce: 1230691388,
+        isDeleted: false,
+        boundElements: [],
+        updated: 1740723110578,
+        link: null,
+        locked: false,
+        points: [
+          [0, 0],
+          [168.4765625, -153.38671875],
+        ],
+        lastCommittedPoint: null,
+        startBinding: null,
+        endBinding: null,
+        startArrowhead: null,
+        endArrowhead: "arrow",
+        elbowed: false,
+      },
+      {
+        id: "dMsLoKhGsWQXpiKGWZ6Cn",
+        type: "line",
+        x: -113.748046875,
+        y: -165.224609375,
+        width: 206.12890625,
+        height: 35.4140625,
+        angle: 0,
+        strokeColor: "#1e1e1e",
+        backgroundColor: "transparent",
+        fillStyle: "solid",
+        strokeWidth: 2,
+        strokeStyle: "solid",
+        roughness: 1,
+        opacity: 100,
+        groupIds: [],
+        frameId: null,
+        index: "aC",
+        roundness: {
+          type: 2,
+        },
+        seed: 514585788,
+        version: 18,
+        versionNonce: 1338507580,
+        isDeleted: false,
+        boundElements: [],
+        updated: 1740723112995,
+        link: null,
+        locked: false,
+        points: [
+          [0, 0],
+          [206.12890625, 35.4140625],
+        ],
+        lastCommittedPoint: null,
+        startBinding: null,
+        endBinding: null,
+        startArrowhead: null,
+        endArrowhead: null,
+      },
+      {
+        id: "1GUDjUg8ibE_4qMFtdQiK",
+        type: "freedraw",
+        x: 384.404296875,
+        y: 91.580078125,
+        width: 537.55078125,
+        height: 288.48046875,
+        angle: 5.5342222396022285,
+        strokeColor: "#1e1e1e",
+        backgroundColor: "transparent",
+        fillStyle: "solid",
+        strokeWidth: 2,
+        strokeStyle: "solid",
+        roughness: 1,
+        opacity: 100,
+        groupIds: [],
+        frameId: null,
+        index: "aD",
+        roundness: null,
+        seed: 103578044,
+        version: 167,
+        versionNonce: 1117299588,
+        isDeleted: false,
+        boundElements: [],
+        updated: 1740723137180,
+        link: null,
+        locked: false,
+        points: [
+          [0, 0],
+          [-0.10546875, 0],
+          [-3.23046875, -0.859375],
+          [-18.09765625, -4.6953125],
+          [-54.40625, -13.765625],
+          [-103.48046875, -23.05859375],
+          [-155.6640625, -27.5390625],
+          [-205.5703125, -27.96484375],
+          [-239, -24.4765625],
+          [-257.27734375, -17.0390625],
+          [-270.1015625, -5.43359375],
+          [-279.94140625, 12.12109375],
+          [-286.828125, 36.6875],
+          [-291.03515625, 65.63671875],
+          [-292.5546875, 94.96875],
+          [-291.8203125, 122.1875],
+          [-286.140625, 144.703125],
+          [-274.60546875, 160.01953125],
+          [-257.1171875, 170.375],
+          [-237.7890625, 176.1953125],
+          [-218.85546875, 178.69921875],
+          [-199.33984375, 181.56640625],
+          [-182.4609375, 188.4765625],
+          [-168.97265625, 200.14453125],
+          [-160.83984375, 211.1875],
+          [-156.40234375, 220.0703125],
+          [-153.60546875, 226.12890625],
+          [-151.3203125, 229.30078125],
+          [-146.28125, 231.7421875],
+          [-136.140625, 233.30859375],
+          [-122.1953125, 233.80078125],
+          [-108.66015625, 234.23828125],
+          [-97.0234375, 235.0546875],
+          [-89.6171875, 235.7421875],
+          [-85.84375, 237.52734375],
+          [-82.546875, 240.41796875],
+          [-79.64453125, 243.2734375],
+          [-75.71875, 245.99609375],
+          [-69.734375, 248.4453125],
+          [-59.6640625, 250.87890625],
+          [-45.1171875, 252.4453125],
+          [-23.9453125, 251.7265625],
+          [7.41796875, 244.0546875],
+          [48.58203125, 223.734375],
+          [93.5078125, 192.859375],
+          [135.8359375, 153.9453125],
+          [168.875, 114.015625],
+          [186.5625, 86.640625],
+          [194.9765625, 71.19140625],
+          [199.0234375, 62.671875],
+          [199.875, 59.6171875],
+          [200.1796875, 58.72265625],
+          [200.4140625, 58.62109375],
+          [200.87109375, 58.57421875],
+          [203.1796875, 58.2734375],
+          [208.72265625, 55.671875],
+          [216.421875, 50.89453125],
+          [224.546875, 45.265625],
+          [234.40625, 36.30859375],
+          [241.71484375, 28.14453125],
+          [243.6875, 24.1171875],
+          [244.6171875, 21.34375],
+          [244.99609375, 18.5625],
+          [243.78515625, 12.41015625],
+          [237.6328125, -4.8125],
+          [222.91796875, -36.03515625],
+          [222.91796875, -36.03515625],
+        ],
+        pressures: [],
+        simulatePressure: true,
+        lastCommittedPoint: null,
+      },
+    ].map(
+      (e) =>
+        ({
+          ...e,
+          angle: e.angle as Radians,
+          index: null,
+        } as ExcalidrawElement),
+    );
+
+    act(() => {
+      h.elements = elements;
+      h.app.setActiveTool({ type: "lasso" });
+    });
+  });
+
+  it("None should be selected", () => {
+    const startPoint = pointFrom<GlobalPoint>(-533, 611);
+
+    const points = [
+      [0, 0],
+      [0.1015625, -0.09765625],
+      [10.16796875, -8.15625],
+      [25.71484375, -18.5078125],
+      [46.078125, -28.63671875],
+      [90.578125, -41.9140625],
+      [113.04296875, -45.0859375],
+      [133.95703125, -46.2890625],
+      [152.92578125, -46.2890625],
+      [170.921875, -44.98828125],
+      [190.1640625, -39.61328125],
+      [213.73046875, -29],
+      [238.859375, -16.59375],
+      [261.87890625, -5.80078125],
+      [281.63671875, 2.4453125],
+      [300.125, 9.01953125],
+      [320.09375, 14.046875],
+      [339.140625, 16.95703125],
+      [358.3203125, 18.41796875],
+      [377.5234375, 17.890625],
+      [396.45703125, 14.53515625],
+      [416.4921875, 8.015625],
+      [438.796875, -1.54296875],
+      [461.6328125, -11.5703125],
+      [483.36328125, -21.48828125],
+      [503.37109375, -30.87109375],
+      [517.0546875, -36.49609375],
+      [525.62109375, -39.6640625],
+      [531.45703125, -41.46875],
+      [534.1328125, -41.9375],
+      [535.32421875, -42.09375],
+      [544.4140625, -42.09375],
+      [567.2265625, -42.09375],
+      [608.1875, -38.5625],
+      [665.203125, -27.66796875],
+      [725.8984375, -11.30078125],
+      [785.05078125, 8.17578125],
+      [832.12109375, 25.55078125],
+      [861.62109375, 36.32421875],
+      [881.91796875, 42.203125],
+      [896.75, 45.125],
+      [907.04296875, 46.46484375],
+      [917.44921875, 46.42578125],
+      [930.671875, 42.59765625],
+      [945.953125, 34.66796875],
+      [964.08984375, 22.43359375],
+      [989.8125, 2.328125],
+      [1014.6640625, -17.79296875],
+      [1032.7734375, -32.70703125],
+      [1045.984375, -43.9921875],
+      [1052.48828125, -50.1875],
+      [1054.97265625, -53.3046875],
+      [1055.65234375, -54.38671875],
+      [1060.48046875, -54.83984375],
+      [1073.03125, -55.2734375],
+      [1095.6484375, -54],
+      [1125.41796875, -49.05859375],
+      [1155.33984375, -41.21484375],
+      [1182.33203125, -33.6875],
+      [1204.1171875, -27.75390625],
+      [1220.95703125, -23.58203125],
+      [1235.390625, -21.06640625],
+      [1248.078125, -19.3515625],
+      [1257.78125, -18.6484375],
+      [1265.6640625, -19.22265625],
+      [1271.5703125, -20.42578125],
+      [1276.046875, -21.984375],
+      [1280.328125, -25.23828125],
+      [1284.19140625, -29.953125],
+      [1288.22265625, -35.8125],
+      [1292.87109375, -43.21484375],
+      [1296.6796875, -50.44921875],
+      [1299.3828125, -56.40234375],
+      [1301.48828125, -61.08203125],
+      [1302.89453125, -64.75],
+      [1303.890625, -67.37890625],
+      [1304.41796875, -68.953125],
+      [1304.65234375, -69.8046875],
+      [1304.80078125, -70.2578125],
+      [1304.80078125, -70.2578125],
+    ] as LocalPoint[];
+
+    updatePath(startPoint, points);
+
+    const selectedElements = getSelectedElements(h.elements, h.app.state);
+
+    expect(selectedElements.length).toBe(0);
+  });
+
+  it("Intersects some, does not enclose/intersect the rest", () => {
+    const startPoint = pointFrom<GlobalPoint>(-311, 50);
+    const points = [
+      [0, 0],
+      [0.1015625, 0],
+      [3.40234375, -2.25390625],
+      [12.25390625, -7.84375],
+      [22.71484375, -13.89453125],
+      [39.09765625, -22.3359375],
+      [58.5546875, -31.9609375],
+      [79.91796875, -41.21875],
+      [90.53125, -44.76953125],
+      [99.921875, -47.16796875],
+      [107.46484375, -48.640625],
+      [113.92578125, -49.65625],
+      [119.57421875, -50.1953125],
+      [124.640625, -50.1953125],
+      [129.49609375, -50.1953125],
+      [134.53125, -50.1953125],
+      [140.59375, -50.1953125],
+      [147.27734375, -49.87109375],
+      [154.32421875, -48.453125],
+      [160.93359375, -46.0390625],
+      [166.58203125, -42.8828125],
+      [172.0078125, -38.8671875],
+      [176.75390625, -34.1015625],
+      [180.41796875, -29.609375],
+      [183.09375, -25.0390625],
+      [185.11328125, -19.70703125],
+      [186.8828125, -13.04296875],
+      [188.515625, -6.39453125],
+      [189.8515625, -1.04296875],
+      [190.9609375, 4.34375],
+      [191.9296875, 9.3125],
+      [193.06640625, 13.73046875],
+      [194.21875, 17.51953125],
+      [195.32421875, 20.83984375],
+      [196.5625, 23.4296875],
+      [198.2109375, 25.5234375],
+      [200.04296875, 27.38671875],
+      [202.1640625, 28.80078125],
+      [204.43359375, 30.33984375],
+      [207.10546875, 31.7109375],
+      [210.69921875, 33.1640625],
+      [214.6015625, 34.48828125],
+      [218.5390625, 35.18359375],
+      [222.703125, 35.71875],
+      [227.16015625, 35.98828125],
+      [232.01171875, 35.98828125],
+      [237.265625, 35.98828125],
+      [242.59765625, 35.015625],
+      [247.421875, 33.4140625],
+      [251.61328125, 31.90625],
+      [255.84375, 30.1328125],
+      [260.25390625, 28.62109375],
+      [264.44140625, 27.41796875],
+      [268.5546875, 26.34765625],
+      [272.6171875, 25.42578125],
+      [276.72265625, 24.37890625],
+      [281.234375, 23.140625],
+      [286.69921875, 22.046875],
+      [293.5859375, 20.82421875],
+      [300.6328125, 19.4140625],
+      [309.83984375, 18.1640625],
+      [320.28125, 16.7578125],
+      [329.46875, 15.91015625],
+      [337.453125, 15.53515625],
+      [344.515625, 14.8203125],
+      [350.45703125, 14.4453125],
+      [354.64453125, 14.5546875],
+      [358.10546875, 14.921875],
+      [360.83203125, 15.5234375],
+      [362.796875, 16.3671875],
+      [364.1328125, 17.43359375],
+      [365.13671875, 18.6015625],
+      [365.8984375, 19.8203125],
+      [366.71484375, 21.30078125],
+      [368.34375, 23.59765625],
+      [370.37890625, 26.70703125],
+      [372.15625, 30.5],
+      [374.16015625, 34.390625],
+      [376.21875, 38.4921875],
+      [378.19140625, 43.921875],
+      [380.4140625, 50.31640625],
+      [382.671875, 56.2890625],
+      [384.48046875, 61.34765625],
+      [385.7890625, 65.14453125],
+      [386.5390625, 66.98828125],
+      [386.921875, 67.60546875],
+      [387.171875, 67.80859375],
+      [388.0390625, 68.32421875],
+      [392.23828125, 70.3671875],
+      [403.59765625, 76.4296875],
+      [419.5390625, 85.5],
+      [435.5078125, 93.82421875],
+      [451.3046875, 101.015625],
+      [465.05078125, 107.02734375],
+      [476.828125, 111.97265625],
+      [487.38671875, 115.578125],
+      [495.98046875, 118.03125],
+      [503.203125, 120.3515625],
+      [510.375, 122.3828125],
+      [517.8203125, 124.32421875],
+      [525.38671875, 126.9375],
+      [532.9765625, 130.12890625],
+      [539.046875, 133.22265625],
+      [543.85546875, 136.421875],
+      [549.28125, 140.84375],
+      [554.41015625, 146.04296875],
+      [558.34375, 151.4921875],
+      [561.859375, 157.09375],
+      [564.734375, 162.71875],
+      [566.95703125, 168.375],
+      [568.87109375, 174.33984375],
+      [570.41796875, 181.26953125],
+      [571.74609375, 189.37890625],
+      [572.55859375, 197.3515625],
+      [573.046875, 204.26171875],
+      [573.7421875, 210.9453125],
+      [574.38671875, 216.91796875],
+      [574.75, 222.8515625],
+      [575.0703125, 228.78515625],
+      [575.67578125, 234.0078125],
+      [576.26171875, 238.3515625],
+      [576.84765625, 242.64453125],
+      [577.328125, 247.53125],
+      [577.6484375, 252.56640625],
+      [577.80859375, 257.91015625],
+      [578.12890625, 263.2578125],
+      [578.44921875, 269.1875],
+      [578.16796875, 275.17578125],
+      [577.5234375, 281.078125],
+      [576.14453125, 287.59375],
+      [574.19921875, 296.390625],
+      [571.96484375, 306.03125],
+      [568.765625, 315.54296875],
+      [564.68359375, 325.640625],
+      [560.3671875, 335.03125],
+      [555.93359375, 343.68359375],
+      [551.56640625, 352.03515625],
+      [547.86328125, 359.2734375],
+      [543.82421875, 365.2421875],
+      [539.91015625, 370.0078125],
+      [537.37109375, 372.5546875],
+      [535.4765625, 374.23828125],
+      [533.37890625, 375.5859375],
+      [531.2578125, 376.75390625],
+      [528.46875, 378.96875],
+      [524.296875, 381.8359375],
+      [519.03515625, 385.31640625],
+      [513.50390625, 389.2890625],
+      [506.43359375, 394.55078125],
+      [497.18359375, 401.51953125],
+      [488.43359375, 408.40625],
+      [481.15234375, 414.0703125],
+      [475.64453125, 417.7578125],
+      [471.55078125, 420.32421875],
+      [468.73828125, 421.828125],
+      [467.1640625, 422.328125],
+      [465.9296875, 422.6953125],
+      [464.7109375, 422.91796875],
+      [463.2734375, 423.12890625],
+      [462.06640625, 423.33203125],
+      [460.88671875, 423.33203125],
+      [459.484375, 423.33203125],
+      [458.57421875, 423.33203125],
+      [457.9296875, 423.10546875],
+      [457.15234375, 422.796875],
+      [456.3984375, 422.5625],
+      [455.8828125, 422.41015625],
+      [455.55859375, 422.41015625],
+      [455.453125, 422.3203125],
+      [455.4453125, 422.06640625],
+      [455.4453125, 422.06640625],
+    ] as LocalPoint[];
+
+    updatePath(startPoint, points);
+    const selectedElements = getSelectedElements(h.elements, h.state);
+    expect(selectedElements.length).toBe(3);
+    expect(selectedElements.filter((e) => e.type === "arrow").length).toBe(1);
+    expect(selectedElements.filter((e) => e.type === "rectangle").length).toBe(
+      1,
+    );
+    expect(selectedElements.filter((e) => e.type === "freedraw").length).toBe(
+      1,
+    );
+  });
+
+  it("Intersects some and encloses some", () => {
+    const startPoint = pointFrom<GlobalPoint>(112, -190);
+    const points = [
+      [0, 0],
+      [-0.1015625, 0],
+      [-6.265625, 3.09375],
+      [-18.3671875, 9.015625],
+      [-28.3125, 13.94921875],
+      [-38.03125, 19.0625],
+      [-52.578125, 28.72265625],
+      [-54.51953125, 33.00390625],
+      [-55.39453125, 36.07421875],
+      [-56.046875, 39.890625],
+      [-57.06640625, 45.2734375],
+      [-57.76171875, 51.2265625],
+      [-57.76171875, 56.16796875],
+      [-57.76171875, 60.96875],
+      [-57.76171875, 65.796875],
+      [-57.76171875, 70.54296875],
+      [-57.33203125, 75.21484375],
+      [-56.17578125, 79.5078125],
+      [-54.55078125, 83.5625],
+      [-51.88671875, 88.09375],
+      [-48.72265625, 92.46875],
+      [-45.32421875, 96.2421875],
+      [-41.62890625, 100.5859375],
+      [-37.9375, 104.92578125],
+      [-33.94921875, 108.91796875],
+      [-29.703125, 113.51953125],
+      [-24.45703125, 118.49609375],
+      [-18.66796875, 123.5390625],
+      [-12.7109375, 128.96484375],
+      [-6.2578125, 133.984375],
+      [0.203125, 138.5078125],
+      [7.1640625, 143.71875],
+      [16.08984375, 149.9765625],
+      [25.01953125, 156.1640625],
+      [33.8203125, 162.25],
+      [42.05078125, 167.79296875],
+      [48.75390625, 172.46484375],
+      [55.3984375, 177.90625],
+      [61.296875, 184.12890625],
+      [66.02734375, 191.21484375],
+      [69.765625, 198.109375],
+      [73.03515625, 204.79296875],
+      [76.09375, 212.26171875],
+      [78.984375, 219.52734375],
+      [81.58203125, 226.34765625],
+      [84.1640625, 232.3046875],
+      [86.7265625, 237.16796875],
+      [89.68359375, 241.34765625],
+      [93.83984375, 245.12890625],
+      [100.12109375, 249.328125],
+      [107.109375, 253.65625],
+      [114.08203125, 257.89453125],
+      [122.578125, 262.31640625],
+      [130.83984375, 266.359375],
+      [138.33203125, 269.8671875],
+      [144.984375, 272.3515625],
+      [150.265625, 274.1953125],
+      [155.42578125, 275.9296875],
+      [159.1328125, 276.73828125],
+      [161.2421875, 276.73828125],
+      [165.11328125, 276.7578125],
+      [172.546875, 276.76171875],
+      [183.14453125, 276.76171875],
+      [194.015625, 276.76171875],
+      [204.1796875, 276.76171875],
+      [213.484375, 276.76171875],
+      [221.40625, 276.76171875],
+      [228.47265625, 276.76171875],
+      [234.40234375, 276.67578125],
+      [240.28515625, 275.9765625],
+      [246.12109375, 274.59375],
+      [250.75390625, 272.8515625],
+      [255.046875, 270.18359375],
+      [259.6328125, 266.60546875],
+      [264.04296875, 262.4375],
+      [268.69140625, 256.69921875],
+      [273.25390625, 249.9375],
+      [277.85546875, 243.0546875],
+      [282.19140625, 236.5859375],
+      [285.24609375, 231.484375],
+      [287.39453125, 227.1875],
+      [289.078125, 223.78125],
+      [290.328125, 221.28125],
+      [291.0390625, 219.2109375],
+      [291.40625, 217.83984375],
+      [291.546875, 216.75390625],
+      [291.546875, 215.84375],
+      [291.75390625, 214.7734375],
+      [291.9609375, 213.15234375],
+      [291.9609375, 211.125],
+      [291.9609375, 208.6953125],
+      [291.9609375, 205.25],
+      [291.9609375, 201.4453125],
+      [291.62890625, 197.68359375],
+      [291.0625, 194.29296875],
+      [290.6484375, 192.21875],
+      [290.25390625, 190.8203125],
+      [289.88671875, 189.94140625],
+      [289.75, 189.53125],
+      [289.75, 189.2109375],
+      [289.7265625, 188.29296875],
+      [290.09375, 186.3125],
+      [293.04296875, 182.46875],
+      [298.671875, 177.46484375],
+      [305.45703125, 172.13671875],
+      [312.4921875, 167.35546875],
+      [318.640625, 163.6875],
+      [323.1484375, 161.0703125],
+      [326.484375, 159.37109375],
+      [329.8046875, 157.39453125],
+      [332.98046875, 155.2265625],
+      [336.09765625, 152.6875],
+      [339.14453125, 149.640625],
+      [342.37890625, 146.5078125],
+      [345.96875, 143.03125],
+      [349.4609375, 139.24609375],
+      [353.23046875, 134.83203125],
+      [356.68359375, 129.72265625],
+      [359.48828125, 123.9140625],
+      [362.76953125, 116.09765625],
+      [367.91796875, 93.69140625],
+      [368.23828125, 88.5546875],
+      [368.34375, 86.2890625],
+      [369.94921875, 80.15234375],
+      [372.7578125, 72.04296875],
+      [375.703125, 62.5],
+      [378.33203125, 52.72265625],
+      [380.109375, 44.4453125],
+      [381.40625, 37.59375],
+      [382.26953125, 31.95703125],
+      [382.71875, 26.60546875],
+      [382.81640625, 21.76171875],
+      [382.81640625, 17.84375],
+      [382.55859375, 13.9609375],
+      [382.27734375, 9.65625],
+      [381.67578125, 5.3515625],
+      [380.40625, 1.0703125],
+      [378.71484375, -3.2109375],
+      [376.48046875, -7.52734375],
+      [373.93359375, -11.71875],
+      [370.44140625, -16.32421875],
+      [365.86328125, -21.49609375],
+      [359.94921875, -26.8359375],
+      [353.33984375, -32.046875],
+      [345.84765625, -37.30859375],
+      [336.55859375, -43.21484375],
+      [326.34765625, -48.5859375],
+      [315.515625, -53.15234375],
+      [305.375, -56.67578125],
+      [296, -59.47265625],
+      [286.078125, -61.984375],
+      [276.078125, -63.78125],
+      [266.578125, -65.09765625],
+      [258.90625, -66.11328125],
+      [249.8984375, -67.34765625],
+      [238.84765625, -68.6796875],
+      [229.19921875, -70.01171875],
+      [219.66015625, -71.50390625],
+      [209.109375, -72.99609375],
+      [197.14453125, -74.625],
+      [186.52734375, -76.421875],
+      [176.66796875, -77.8203125],
+      [167.26953125, -79.1328125],
+      [159.57421875, -80.6328125],
+      [152.75, -81.4609375],
+      [146.4609375, -81.89453125],
+      [139.97265625, -82.23828125],
+      [133.546875, -82.23828125],
+      [127.84765625, -82.23828125],
+      [123.01953125, -82.23828125],
+      [117.9375, -81.9140625],
+      [112.59765625, -81.046875],
+      [107.3046875, -79.90234375],
+      [100.41796875, -78.45703125],
+      [92.74609375, -76.87890625],
+      [85.40625, -75.359375],
+      [77.546875, -73.80859375],
+      [69.71875, -72.6640625],
+      [62.4921875, -71.9609375],
+      [56.02734375, -71.23046875],
+      [50.37109375, -70.26171875],
+      [46.20703125, -69.32421875],
+      [43.45703125, -68.48046875],
+      [41.48046875, -67.5703125],
+      [39.99609375, -66.90234375],
+      [38.51171875, -66.23828125],
+      [36.7734375, -65.3671875],
+      [35.4609375, -64.359375],
+      [34.18359375, -63.328125],
+      [33.0078125, -62.54296875],
+      [31.8125, -61.76953125],
+      [30.5234375, -60.8984375],
+      [29.4921875, -60.09765625],
+      [28.5078125, -59.3828125],
+      [27.24609375, -58.61328125],
+      [25.49609375, -57.73828125],
+      [23.7421875, -56.859375],
+      [21.99609375, -55.984375],
+      [20.51953125, -55.16796875],
+      [19.4921875, -54.44140625],
+      [18.81640625, -53.84375],
+      [18.35546875, -53.52734375],
+      [18.0859375, -53.46484375],
+      [17.85546875, -53.44921875],
+      [17.85546875, -53.44921875],
+    ] as LocalPoint[];
+
+    updatePath(startPoint, points);
+
+    const selectedElements = getSelectedElements(h.elements, h.state);
+    expect(selectedElements.length).toBe(4);
+    expect(selectedElements.filter((e) => e.type === "line").length).toBe(1);
+    expect(selectedElements.filter((e) => e.type === "ellipse").length).toBe(1);
+    expect(selectedElements.filter((e) => e.type === "diamond").length).toBe(1);
+    expect(selectedElements.filter((e) => e.type === "freedraw").length).toBe(
+      1,
+    );
+  });
+
+  it("Single linear element", () => {
+    const startPoint = pointFrom<GlobalPoint>(62, -200);
+    const points = [
+      [0, 0],
+      [0, 0.1015625],
+      [-1.65625, 2.2734375],
+      [-8.43359375, 12.265625],
+      [-17.578125, 25.83203125],
+      [-25.484375, 37.38671875],
+      [-31.453125, 47.828125],
+      [-34.92578125, 55.21875],
+      [-37.1171875, 60.05859375],
+      [-38.4375, 63.49609375],
+      [-39.5, 66.6328125],
+      [-40.57421875, 69.84375],
+      [-41.390625, 73.53515625],
+      [-41.9296875, 77.078125],
+      [-42.40625, 79.71484375],
+      [-42.66796875, 81.83203125],
+      [-42.70703125, 83.32421875],
+      [-42.70703125, 84.265625],
+      [-42.70703125, 85.171875],
+      [-42.70703125, 86.078125],
+      [-42.70703125, 86.6484375],
+      [-42.70703125, 87],
+      [-42.70703125, 87.1796875],
+      [-42.70703125, 87.4296875],
+      [-42.70703125, 87.83203125],
+      [-42.70703125, 88.86328125],
+      [-42.70703125, 91.27734375],
+      [-42.70703125, 95.0703125],
+      [-42.44140625, 98.46875],
+      [-42.17578125, 100.265625],
+      [-42.17578125, 101.16015625],
+      [-42.16015625, 101.76171875],
+      [-42.0625, 102.12109375],
+      [-42.0625, 102.12109375],
+    ] as LocalPoint[];
+    updatePath(startPoint, points);
+
+    const selectedElements = getSelectedElements(h.elements, h.state);
+    expect(selectedElements.length).toBe(1);
+    expect(h.app.state.selectedLinearElement).toBeDefined();
+  });
+});
+
+describe("Special cases", () => {
+  it("Select only frame if its children are also selected", () => {
+    act(() => {
+      const elements = [
+        {
+          id: "CaUA2mmuudojzY98_oVXo",
+          type: "rectangle",
+          x: -96.64353835077907,
+          y: -270.1600585741129,
+          width: 146.8359375,
+          height: 104.921875,
+          angle: 0,
+          strokeColor: "#1e1e1e",
+          backgroundColor: "transparent",
+          fillStyle: "solid",
+          strokeWidth: 2,
+          strokeStyle: "solid",
+          roughness: 1,
+          opacity: 100,
+          groupIds: [],
+          frameId: "85VShCn1P9k81JqSeOg-c",
+          index: "aE",
+          roundness: {
+            type: 3,
+          },
+          seed: 227442978,
+          version: 15,
+          versionNonce: 204983970,
+          isDeleted: false,
+          boundElements: [],
+          updated: 1740959550684,
+          link: null,
+          locked: false,
+        },
+        {
+          id: "RZzDDA1DBJHw5OzHVNDvc",
+          type: "diamond",
+          x: 126.64943039922093,
+          y: -212.4920898241129,
+          width: 102.55859375,
+          height: 93.80078125,
+          angle: 0,
+          strokeColor: "#1e1e1e",
+          backgroundColor: "transparent",
+          fillStyle: "solid",
+          strokeWidth: 2,
+          strokeStyle: "solid",
+          roughness: 1,
+          opacity: 100,
+          groupIds: [],
+          frameId: "85VShCn1P9k81JqSeOg-c",
+          index: "aH",
+          roundness: {
+            type: 2,
+          },
+          seed: 955233890,
+          version: 14,
+          versionNonce: 2135303358,
+          isDeleted: false,
+          boundElements: [],
+          updated: 1740959550684,
+          link: null,
+          locked: false,
+        },
+        {
+          id: "CSVDDbC9vxqgO2uDahcE9",
+          type: "ellipse",
+          x: -20.999007100779068,
+          y: -87.0272460741129,
+          width: 116.13671875,
+          height: 70.7734375,
+          angle: 0,
+          strokeColor: "#1e1e1e",
+          backgroundColor: "transparent",
+          fillStyle: "solid",
+          strokeWidth: 2,
+          strokeStyle: "solid",
+          roughness: 1,
+          opacity: 100,
+          groupIds: [],
+          frameId: "85VShCn1P9k81JqSeOg-c",
+          index: "aI",
+          roundness: {
+            type: 2,
+          },
+          seed: 807647870,
+          version: 16,
+          versionNonce: 455740962,
+          isDeleted: false,
+          boundElements: [],
+          updated: 1740959550684,
+          link: null,
+          locked: false,
+        },
+        {
+          id: "85VShCn1P9k81JqSeOg-c",
+          type: "frame",
+          x: -164.95603835077907,
+          y: -353.5155273241129,
+          width: 451.04296875,
+          height: 397.09765625,
+          angle: 0,
+          strokeColor: "#bbb",
+          backgroundColor: "transparent",
+          fillStyle: "solid",
+          strokeWidth: 2,
+          strokeStyle: "solid",
+          roughness: 0,
+          opacity: 100,
+          groupIds: [],
+          frameId: null,
+          index: "aJ",
+          roundness: null,
+          seed: 1134892578,
+          version: 57,
+          versionNonce: 1699466238,
+          isDeleted: false,
+          boundElements: [],
+          updated: 1740959550367,
+          link: null,
+          locked: false,
+          name: null,
+        },
+      ].map((e) => ({
+        ...e,
+        index: null,
+        angle: e.angle as Radians,
+      })) as ExcalidrawElement[];
+
+      h.elements = elements;
+    });
+
+    const startPoint = pointFrom<GlobalPoint>(-352, -64);
+    const points = [
+      [0, 0],
+      [0.1015625, 0],
+      [3.80078125, -1.05859375],
+      [14.38671875, -5.10546875],
+      [26.828125, -10.70703125],
+      [38.17578125, -16.10546875],
+      [49.6328125, -21.59375],
+      [79.890625, -34.078125],
+      [111.5859375, -46.4140625],
+      [125.61328125, -51.265625],
+      [139.20703125, -55.81640625],
+      [151.046875, -60.27734375],
+      [160.86328125, -64.140625],
+      [170.15625, -67.51171875],
+      [181.0234375, -71.5234375],
+      [192.6796875, -75.79296875],
+      [204.66015625, -80.19921875],
+      [218.22265625, -85.6875],
+      [233.359375, -91.9375],
+      [264.22265625, -103.91796875],
+      [280.390625, -109.80859375],
+      [295.48046875, -114.99609375],
+      [309.453125, -120.28125],
+      [323.5546875, -126.125],
+      [339.26953125, -132.6796875],
+      [354.67578125, -139.64453125],
+      [370.86328125, -146.53125],
+      [384.70703125, -152.4921875],
+      [394.7109375, -157.6796875],
+      [405.6171875, -163.07421875],
+      [416.390625, -167.96484375],
+      [425.41796875, -171.6484375],
+      [433.26171875, -174.78515625],
+      [440.76953125, -177.68359375],
+      [447.4140625, -179.71875],
+      [453.3828125, -181.11328125],
+      [458.421875, -182.13671875],
+      [462.82421875, -182.5546875],
+      [467.2109375, -182.640625],
+      [472.09765625, -182.640625],
+      [481.9609375, -182.640625],
+      [487.23828125, -182.5859375],
+      [492.03515625, -181.91796875],
+      [496.76953125, -180.640625],
+      [501.43359375, -179.2734375],
+      [505.203125, -177.73046875],
+      [508.33984375, -176.08984375],
+      [511.8671875, -174.16796875],
+      [515.9140625, -172.09375],
+      [519.703125, -170.125],
+      [523.6796875, -167.8828125],
+      [528.109375, -165.3984375],
+      [532.01953125, -163.3125],
+      [535.28125, -161.65625],
+      [537.62890625, -159.7734375],
+      [539.0859375, -157.53125],
+      [540.1640625, -155.7421875],
+      [540.98046875, -154.2578125],
+      [541.87890625, -152.33203125],
+      [542.69140625, -150.0078125],
+      [543.25390625, -147.671875],
+      [543.90625, -145.125],
+      [544.66796875, -142.01171875],
+      [545.34375, -138.1484375],
+      [546.03515625, -132.72265625],
+      [546.41015625, -126.80078125],
+      [546.44921875, -121.25390625],
+      [546.38671875, -116.3046875],
+      [545.21484375, -112],
+      [541.50390625, -107.2421875],
+      [536.515625, -102.83203125],
+      [531.44140625, -98.95703125],
+      [526.39453125, -95.23046875],
+      [521.15234375, -91.9921875],
+      [514.38671875, -87.984375],
+      [506.953125, -83.19140625],
+      [499.1171875, -77.52734375],
+      [491.37109375, -71.6484375],
+      [484.85546875, -66.3984375],
+      [477.8203125, -60.21875],
+      [469.921875, -53.26953125],
+      [460.84765625, -45.6171875],
+      [451.796875, -38.359375],
+      [444.33984375, -32.48046875],
+      [438.4296875, -27.68359375],
+      [435.2109375, -24.84375],
+      [433.07421875, -23.23828125],
+      [429.7421875, -21.125],
+      [424.8984375, -17.546875],
+      [418.7421875, -13.01171875],
+      [411.84375, -8.3359375],
+      [404.80078125, -3.65625],
+      [398.23828125, 0.6171875],
+      [392.32421875, 4.74609375],
+      [386.21875, 9.69921875],
+      [379.7421875, 14.734375],
+      [373.6015625, 19.95703125],
+      [367.34375, 26.72265625],
+      [360.73828125, 34.48046875],
+      [354.1484375, 42.51953125],
+      [347.21484375, 51.19140625],
+      [340.59765625, 59.7265625],
+      [334.46875, 67.703125],
+      [328.9921875, 74.82421875],
+      [323.78515625, 81.6796875],
+      [318.6640625, 88.34375],
+      [314.2109375, 93.8984375],
+      [309.10546875, 100.66015625],
+      [304.17578125, 107.2734375],
+      [299.97265625, 112.421875],
+      [295.890625, 117.99609375],
+      [291.8828125, 123.4453125],
+      [288.0078125, 128.25],
+      [284.91796875, 132.265625],
+      [282.453125, 135.66796875],
+      [279.80078125, 139.16015625],
+      [276.7734375, 143.53515625],
+      [274.3515625, 147.6484375],
+      [272.0859375, 151.0546875],
+      [269.5546875, 154.37890625],
+      [267.71484375, 156.73828125],
+      [266.62890625, 158.484375],
+      [265.5546875, 160.03125],
+      [264.73828125, 161.30078125],
+      [264.16015625, 162.51953125],
+      [263.46484375, 163.734375],
+      [262.9140625, 164.9453125],
+      [262.05078125, 166.3046875],
+      [261.234375, 167.390625],
+      [260.46484375, 168.53515625],
+      [259.5703125, 169.6640625],
+      [258.9296875, 170.1875],
+      [258.9296875, 170.1875],
+    ] as LocalPoint[];
+
+    updatePath(startPoint, points);
+
+    const selectedElements = getSelectedElements(h.elements, h.state);
+    expect(selectedElements.length).toBe(1);
+    expect(selectedElements[0].type).toBe("frame");
+  });
+
+  it("Selects group if any group from group is selected", () => {
+    act(() => {
+      const elements = [
+        {
+          type: "line",
+          version: 594,
+          versionNonce: 1548428815,
+          isDeleted: false,
+          id: "FBFkTIUB1trLc6nEdp1Pu",
+          fillStyle: "solid",
+          strokeWidth: 2,
+          strokeStyle: "solid",
+          roughness: 1,
+          opacity: 100,
+          angle: 0,
+          x: 170.81219641259787,
+          y: 391.1659993876855,
+          strokeColor: "#1e1e1e",
+          backgroundColor: "#846358",
+          width: 66.16406551308279,
+          height: 78.24124358133415,
+          seed: 838106785,
+          groupIds: ["ts5VcKn3YXMmP8ipg8J5v", "-9NzH7Fa5JaHu4ArEFpa_"],
+          frameId: null,
+          roundness: {
+            type: 2,
+          },
+          boundElements: [],
+          updated: 1740960278015,
+          link: null,
+          locked: false,
+          startBinding: null,
+          endBinding: null,
+          lastCommittedPoint: null,
+          startArrowhead: null,
+          endArrowhead: null,
+          points: [
+            [0, 0],
+            [-12.922669045523984, 78.24124358133415],
+            [53.24139646755881, 78.24124358133415],
+            [41.35254094567674, 4.2871914291142],
+            [0, 0],
+          ],
+          index: "aJ",
+        },
+        {
+          type: "line",
+          version: 947,
+          versionNonce: 1038960225,
+          isDeleted: false,
+          id: "RsALsOjcB5dAyH4JNlfqJ",
+          fillStyle: "solid",
+          strokeWidth: 2,
+          strokeStyle: "solid",
+          roughness: 1,
+          opacity: 100,
+          angle: 0,
+          x: 188.53119264021603,
+          y: 207.94959072391882,
+          strokeColor: "#1e1e1e",
+          backgroundColor: "#2f9e44",
+          width: 369.2312846526558,
+          height: 192.4489303545334,
+          seed: 319685249,
+          groupIds: ["ts5VcKn3YXMmP8ipg8J5v", "-9NzH7Fa5JaHu4ArEFpa_"],
+          frameId: null,
+          roundness: {
+            type: 2,
+          },
+          boundElements: [],
+          updated: 1740960278015,
+          link: null,
+          locked: false,
+          startBinding: null,
+          endBinding: null,
+          lastCommittedPoint: null,
+          startArrowhead: null,
+          endArrowhead: null,
+          points: [
+            [0, 0],
+            [-184.8271826294887, 192.4489303545334],
+            [184.4041020231671, 192.4489303545334],
+            [0, 0],
+          ],
+          index: "aK",
+        },
+        {
+          type: "line",
+          version: 726,
+          versionNonce: 1463389231,
+          isDeleted: false,
+          id: "YNXwgpVIEUFgUZpJ564wo",
+          fillStyle: "solid",
+          strokeWidth: 2,
+          strokeStyle: "solid",
+          roughness: 1,
+          opacity: 100,
+          angle: 0,
+          x: 184.66726071162367,
+          y: 123.16737006571739,
+          strokeColor: "#1e1e1e",
+          backgroundColor: "#2f9e44",
+          width: 290.9653230160535,
+          height: 173.62827429793325,
+          seed: 1108085345,
+          groupIds: ["ts5VcKn3YXMmP8ipg8J5v", "-9NzH7Fa5JaHu4ArEFpa_"],
+          frameId: null,
+          roundness: {
+            type: 2,
+          },
+          boundElements: [],
+          updated: 1740960278015,
+          link: null,
+          locked: false,
+          startBinding: null,
+          endBinding: null,
+          lastCommittedPoint: null,
+          startArrowhead: null,
+          endArrowhead: null,
+          points: [
+            [0, 0],
+            [-142.34630272423374, 173.62827429793325],
+            [148.61902029181974, 173.62827429793325],
+            [0, 0],
+          ],
+          index: "aL",
+        },
+        {
+          type: "line",
+          version: 478,
+          versionNonce: 2081935937,
+          isDeleted: false,
+          id: "NV7XOz9ZIB8CbuqQIjt5k",
+          fillStyle: "solid",
+          strokeWidth: 2,
+          strokeStyle: "solid",
+          roughness: 1,
+          opacity: 100,
+          angle: 0,
+          x: 189.05565121741444,
+          y: 54.65530340848173,
+          strokeColor: "#1e1e1e",
+          backgroundColor: "#2f9e44",
+          width: 194.196753378859,
+          height: 137.02921662223056,
+          seed: 398333505,
+          groupIds: ["ts5VcKn3YXMmP8ipg8J5v", "-9NzH7Fa5JaHu4ArEFpa_"],
+          frameId: null,
+          roundness: {
+            type: 2,
+          },
+          boundElements: [],
+          updated: 1740960278015,
+          link: null,
+          locked: false,
+          startBinding: null,
+          endBinding: null,
+          lastCommittedPoint: null,
+          startArrowhead: null,
+          endArrowhead: null,
+          points: [
+            [0, 0],
+            [-97.0316913876915, 135.70546644407042],
+            [97.1650619911675, 137.02921662223056],
+            [0, 0],
+          ],
+          index: "aM",
+        },
+        {
+          type: "ellipse",
+          version: 282,
+          versionNonce: 1337339471,
+          isDeleted: false,
+          id: "b7FzLnG0L3-50bqij9mGX",
+          fillStyle: "solid",
+          strokeWidth: 2,
+          strokeStyle: "solid",
+          roughness: 1,
+          opacity: 100,
+          angle: 0,
+          x: 73.9036924826674,
+          y: 334.3607129519222,
+          strokeColor: "#000000",
+          backgroundColor: "#c2255c",
+          width: 25.723148574685204,
+          height: 25.723148574685204,
+          seed: 654550561,
+          groupIds: ["ts5VcKn3YXMmP8ipg8J5v", "-9NzH7Fa5JaHu4ArEFpa_"],
+          frameId: null,
+          roundness: {
+            type: 2,
+          },
+          boundElements: [],
+          updated: 1740960278015,
+          link: null,
+          locked: false,
+          index: "aN",
+        },
+        {
+          type: "ellipse",
+          version: 292,
+          versionNonce: 1355145761,
+          isDeleted: false,
+          id: "XzVfrVf3-sFJFPdOo51sb",
+          fillStyle: "solid",
+          strokeWidth: 2,
+          strokeStyle: "solid",
+          roughness: 1,
+          opacity: 100,
+          angle: 0,
+          x: 138.21156391938035,
+          y: 380.4480208148999,
+          strokeColor: "#000000",
+          backgroundColor: "#f08c00",
+          width: 25.723148574685204,
+          height: 25.723148574685204,
+          seed: 2060204545,
+          groupIds: ["ts5VcKn3YXMmP8ipg8J5v", "-9NzH7Fa5JaHu4ArEFpa_"],
+          frameId: null,
+          roundness: {
+            type: 2,
+          },
+          boundElements: [],
+          updated: 1740960278015,
+          link: null,
+          locked: false,
+          index: "aO",
+        },
+        {
+          type: "ellipse",
+          version: 288,
+          versionNonce: 1889111151,
+          isDeleted: false,
+          id: "D4m0Ex4rPc1-8T-uv5vGh",
+          fillStyle: "solid",
+          strokeWidth: 2,
+          strokeStyle: "solid",
+          roughness: 1,
+          opacity: 100,
+          angle: 0,
+          x: 208.9502224997646,
+          y: 331.14531938008656,
+          strokeColor: "#000000",
+          backgroundColor: "#6741d9",
+          width: 25.723148574685204,
+          height: 25.723148574685204,
+          seed: 337072609,
+          groupIds: ["ts5VcKn3YXMmP8ipg8J5v", "-9NzH7Fa5JaHu4ArEFpa_"],
+          frameId: null,
+          roundness: {
+            type: 2,
+          },
+          boundElements: [],
+          updated: 1740960278015,
+          link: null,
+          locked: false,
+          index: "aP",
+        },
+        {
+          type: "ellipse",
+          version: 296,
+          versionNonce: 686224897,
+          isDeleted: false,
+          id: "E0wxH4dAzQsv7Mj6OngC8",
+          fillStyle: "solid",
+          strokeWidth: 2,
+          strokeStyle: "solid",
+          roughness: 1,
+          opacity: 100,
+          angle: 0,
+          x: 285.04787036654153,
+          y: 367.5864465275573,
+          strokeColor: "#000000",
+          backgroundColor: "#e8590c",
+          width: 25.723148574685204,
+          height: 25.723148574685204,
+          seed: 670330305,
+          groupIds: ["ts5VcKn3YXMmP8ipg8J5v", "-9NzH7Fa5JaHu4ArEFpa_"],
+          frameId: null,
+          roundness: {
+            type: 2,
+          },
+          boundElements: [],
+          updated: 1740960278015,
+          link: null,
+          locked: false,
+          index: "aQ",
+        },
+        {
+          type: "ellipse",
+          version: 290,
+          versionNonce: 1974216335,
+          isDeleted: false,
+          id: "yKv_UI6iqa6zjVgYtXVcg",
+          fillStyle: "solid",
+          strokeWidth: 2,
+          strokeStyle: "solid",
+          roughness: 1,
+          opacity: 100,
+          angle: 0,
+          x: 113.56021320197334,
+          y: 228.25272508134577,
+          strokeColor: "#000000",
+          backgroundColor: "#228be6",
+          width: 25.723148574685204,
+          height: 25.723148574685204,
+          seed: 495127969,
+          groupIds: ["ts5VcKn3YXMmP8ipg8J5v", "-9NzH7Fa5JaHu4ArEFpa_"],
+          frameId: null,
+          roundness: {
+            type: 2,
+          },
+          boundElements: [],
+          updated: 1740960278015,
+          link: null,
+          locked: false,
+          index: "aR",
+        },
+        {
+          type: "ellipse",
+          version: 290,
+          versionNonce: 662343137,
+          isDeleted: false,
+          id: "udyW842HtUTlqjDEOxoPN",
+          fillStyle: "solid",
+          strokeWidth: 2,
+          strokeStyle: "solid",
+          roughness: 1,
+          opacity: 100,
+          angle: 0,
+          x: 166.0783082086228,
+          y: 271.12463937248776,
+          strokeColor: "#000000",
+          backgroundColor: "#ffd43b",
+          width: 25.723148574685204,
+          height: 25.723148574685204,
+          seed: 1274196353,
+          groupIds: ["ts5VcKn3YXMmP8ipg8J5v", "-9NzH7Fa5JaHu4ArEFpa_"],
+          frameId: null,
+          roundness: {
+            type: 2,
+          },
+          boundElements: [],
+          updated: 1740960278015,
+          link: null,
+          locked: false,
+          index: "aS",
+        },
+        {
+          type: "ellipse",
+          version: 300,
+          versionNonce: 229014703,
+          isDeleted: false,
+          id: "R3VRfgkowIgnr5dFXwWXa",
+          fillStyle: "solid",
+          strokeWidth: 2,
+          strokeStyle: "solid",
+          roughness: 1,
+          opacity: 100,
+          angle: 0,
+          x: 234.67337107445002,
+          y: 237.89890579685272,
+          strokeColor: "#000000",
+          backgroundColor: "#38d9a9",
+          width: 25.723148574685204,
+          height: 25.723148574685204,
+          seed: 2021841249,
+          groupIds: ["ts5VcKn3YXMmP8ipg8J5v", "-9NzH7Fa5JaHu4ArEFpa_"],
+          frameId: null,
+          roundness: {
+            type: 2,
+          },
+          boundElements: [],
+          updated: 1740960278015,
+          link: null,
+          locked: false,
+          index: "aT",
+        },
+        {
+          type: "ellipse",
+          version: 332,
+          versionNonce: 1670392257,
+          isDeleted: false,
+          id: "90W2w6zgGHdYda8UBiG2R",
+          fillStyle: "solid",
+          strokeWidth: 2,
+          strokeStyle: "solid",
+          roughness: 1,
+          opacity: 100,
+          angle: 0,
+          x: 136.0679682048231,
+          y: 155.37047078640435,
+          strokeColor: "#000000",
+          backgroundColor: "#fa5252",
+          width: 25.723148574685204,
+          height: 25.723148574685204,
+          seed: 344130881,
+          groupIds: ["ts5VcKn3YXMmP8ipg8J5v", "-9NzH7Fa5JaHu4ArEFpa_"],
+          frameId: null,
+          roundness: {
+            type: 2,
+          },
+          boundElements: [],
+          updated: 1740960278015,
+          link: null,
+          locked: false,
+          index: "aU",
+        },
+        {
+          type: "ellipse",
+          version: 337,
+          versionNonce: 2083589839,
+          isDeleted: false,
+          id: "nTDHvOk2mXLUFNn--7JvS",
+          fillStyle: "solid",
+          strokeWidth: 2,
+          strokeStyle: "solid",
+          roughness: 1,
+          opacity: 100,
+          angle: 0,
+          x: 176.7962867814079,
+          y: 102.85237577975542,
+          strokeColor: "#000000",
+          backgroundColor: "#9775fa",
+          width: 25.723148574685204,
+          height: 25.723148574685204,
+          seed: 995276065,
+          groupIds: ["ts5VcKn3YXMmP8ipg8J5v", "-9NzH7Fa5JaHu4ArEFpa_"],
+          frameId: null,
+          roundness: {
+            type: 2,
+          },
+          boundElements: [],
+          updated: 1740960278015,
+          link: null,
+          locked: false,
+          index: "aV",
+        },
+        {
+          type: "ellipse",
+          version: 313,
+          versionNonce: 1715947937,
+          isDeleted: false,
+          id: "iS2Q6cvQ5n_kxINfwu0HS",
+          fillStyle: "solid",
+          strokeWidth: 2,
+          strokeStyle: "solid",
+          roughness: 1,
+          opacity: 100,
+          angle: 0,
+          x: 212.16561607160025,
+          y: 153.22687507184727,
+          strokeColor: "#000000",
+          backgroundColor: "#fab005",
+          width: 25.723148574685204,
+          height: 25.723148574685204,
+          seed: 1885432065,
+          groupIds: ["ts5VcKn3YXMmP8ipg8J5v", "-9NzH7Fa5JaHu4ArEFpa_"],
+          frameId: null,
+          roundness: {
+            type: 2,
+          },
+          boundElements: [],
+          updated: 1740960278015,
+          link: null,
+          locked: false,
+          index: "aW",
+        },
+        {
+          type: "line",
+          version: 1590,
+          versionNonce: 2078563567,
+          isDeleted: false,
+          id: "X4-EPaJDEnPZKN1bWhFvs",
+          fillStyle: "solid",
+          strokeWidth: 2,
+          strokeStyle: "solid",
+          roughness: 1,
+          opacity: 100,
+          angle: 0,
+          x: 158.19616469467843,
+          y: 72.35608879274483,
+          strokeColor: "#000000",
+          backgroundColor: "#fab005",
+          width: 84.29101925982515,
+          height: 84.66090652809709,
+          seed: 489595105,
+          groupIds: ["uRBC-GT117eEzaf2ehdX_", "-9NzH7Fa5JaHu4ArEFpa_"],
+          frameId: null,
+          roundness: null,
+          boundElements: [],
+          updated: 1740960278015,
+          link: null,
+          locked: false,
+          startBinding: null,
+          endBinding: null,
+          lastCommittedPoint: null,
+          startArrowhead: null,
+          endArrowhead: null,
+          points: [
+            [0, 0],
+            [20.062524675376327, -6.158183070239938],
+            [30.37468761946564, 12.304817735352257],
+            [40.379925616688446, -6.1461467434106165],
+            [60.1779773078079, -0.29196108982718233],
+            [54.38738874028317, -19.998927589317724],
+            [72.41919795710177, -30.209920701755497],
+            [54.27320673839876, -40.520131959038096],
+            [60.381292814514666, -60.13991664051316],
+            [40.445474389553596, -54.21058549574358],
+            [30.40022403822941, -72.35608879274483],
+            [20.373038782485533, -54.22107619387393],
+            [0.4211938029164521, -59.96466401524409],
+            [5.9466053348070105, -39.94020499773404],
+            [-11.871821302723378, -30.212694376435106],
+            [5.916318974536789, -20.128073448241587],
+            [0, 0],
+          ],
+          index: "aX",
+        },
+        {
+          type: "line",
+          version: 1719,
+          versionNonce: 1758424449,
+          isDeleted: false,
+          id: "MHWh6yM-hxZbKvIX473TA",
+          fillStyle: "solid",
+          strokeWidth: 2,
+          strokeStyle: "solid",
+          roughness: 1,
+          opacity: 100,
+          angle: 0,
+          x: 166.45958905094363,
+          y: 64.16037225967494,
+          strokeColor: "#000000",
+          backgroundColor: "#ffd43b",
+          width: 61.28316986803382,
+          height: 61.55209370467244,
+          seed: 1330240705,
+          groupIds: ["uRBC-GT117eEzaf2ehdX_", "-9NzH7Fa5JaHu4ArEFpa_"],
+          frameId: null,
+          roundness: null,
+          boundElements: [],
+          updated: 1740960278015,
+          link: null,
+          locked: false,
+          startBinding: null,
+          endBinding: null,
+          lastCommittedPoint: null,
+          startArrowhead: null,
+          endArrowhead: null,
+          points: [
+            [0, 0],
+            [14.586312023026041, -4.477262020152575],
+            [22.08369476864762, 8.946127856709843],
+            [29.357929973514253, -4.468511096647962],
+            [43.751958845119866, -0.2122681777946347],
+            [39.54195372315489, -14.540074226137776],
+            [52.651848904941595, -21.96390218462942],
+            [39.45893853270161, -29.459865970613833],
+            [43.89977789919855, -43.724287114968824],
+            [29.40558673003957, -39.41341021563198],
+            [22.102260835384786, -52.605965847962594],
+            [14.812069036519228, -39.4210374010807],
+            [0.30622587789485506, -43.5968709738604],
+            [4.323435973028119, -29.038234309343977],
+            [-8.631320963092225, -21.96591876454555],
+            [4.301416496013572, -14.633968779551441],
+            [0, 0],
+          ],
+          index: "aY",
+        },
+      ].map((e) => ({
+        ...e,
+        index: null,
+        angle: e.angle as Radians,
+      })) as ExcalidrawElement[];
+
+      h.elements = elements;
+    });
+
+    const startPoint = pointFrom<GlobalPoint>(117, 463);
+    const points = [
+      [0, 0],
+      [0.09765625, 0],
+      [3.24609375, 0],
+      [6.9765625, 0],
+      [10.76171875, 0],
+      [14.03125, 0],
+      [23.24609375, 0.32421875],
+      [28.65625, 0.6484375],
+      [32.0546875, 0.6484375],
+      [35.4296875, 0.6484375],
+      [38.86328125, 0.3828125],
+      [41.9765625, -0.109375],
+      [45.0390625, -0.4296875],
+      [47.74609375, -0.5234375],
+      [49.953125, -0.73046875],
+      [52.12890625, -0.9375],
+      [54.25, -1.14453125],
+      [55.9921875, -1.3828125],
+      [57.67578125, -1.58984375],
+      [58.8125, -1.76953125],
+      [59.453125, -1.76953125],
+      [60.09375, -1.76953125],
+      [60.09375, -1.76953125],
+    ] as LocalPoint[];
+
+    updatePath(startPoint, points);
+
+    const selectedElements = getSelectedElements(h.elements, h.state);
+    expect(selectedElements.length).toBe(16);
+    expect(h.app.state.selectedGroupIds["-9NzH7Fa5JaHu4ArEFpa_"]).toBe(true);
+  });
+});
diff --git a/packages/excalidraw/types.ts b/packages/excalidraw/types.ts
index 31ce332f8d..717993b436 100644
--- a/packages/excalidraw/types.ts
+++ b/packages/excalidraw/types.ts
@@ -136,6 +136,7 @@ export type BinaryFiles = Record<ExcalidrawElement["id"], BinaryFileData>;
 
 export type ToolType =
   | "selection"
+  | "lasso"
   | "rectangle"
   | "diamond"
   | "ellipse"
@@ -308,6 +309,8 @@ export interface AppState {
      */
     lastActiveTool: ActiveTool | null;
     locked: boolean;
+    // indicates if the current tool is temporarily switched on from the selection tool
+    fromSelection: boolean;
   } & ActiveTool;
   penMode: boolean;
   penDetected: boolean;
diff --git a/packages/math/src/segment.ts b/packages/math/src/segment.ts
index e38978b7e5..dade79039b 100644
--- a/packages/math/src/segment.ts
+++ b/packages/math/src/segment.ts
@@ -160,13 +160,17 @@ export const distanceToLineSegment = <Point extends LocalPoint | GlobalPoint>(
  */
 export function lineSegmentIntersectionPoints<
   Point extends GlobalPoint | LocalPoint,
->(l: LineSegment<Point>, s: LineSegment<Point>): Point | null {
+>(
+  l: LineSegment<Point>,
+  s: LineSegment<Point>,
+  threshold?: number,
+): Point | null {
   const candidate = linesIntersectAt(line(l[0], l[1]), line(s[0], s[1]));
 
   if (
     !candidate ||
-    !pointOnLineSegment(candidate, s) ||
-    !pointOnLineSegment(candidate, l)
+    !pointOnLineSegment(candidate, s, threshold) ||
+    !pointOnLineSegment(candidate, l, threshold)
   ) {
     return null;
   }
diff --git a/packages/utils/tests/__snapshots__/export.test.ts.snap b/packages/utils/tests/__snapshots__/export.test.ts.snap
index 54d4af4bc3..91108a6004 100644
--- a/packages/utils/tests/__snapshots__/export.test.ts.snap
+++ b/packages/utils/tests/__snapshots__/export.test.ts.snap
@@ -5,6 +5,7 @@ exports[`exportToSvg > with default arguments 1`] = `
   "activeEmbeddable": null,
   "activeTool": {
     "customType": null,
+    "fromSelection": false,
     "lastActiveTool": null,
     "locked": false,
     "type": "selection",
diff --git a/yarn.lock b/yarn.lock
index 86f64f9b5e..366a3f99fc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8770,16 +8770,8 @@ string-natural-compare@^3.0.1:
   resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
   integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -8881,14 +8873,7 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1, strip-ansi@^7.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@6.0.1, strip-ansi@^6.0.0, strip-ansi@^6.0.1, strip-ansi@^7.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -10021,7 +10006,8 @@ workbox-window@7.3.0, workbox-window@^7.3.0:
     "@types/trusted-types" "^2.0.2"
     workbox-core "7.3.0"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+  name wrap-ansi-cjs
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -10039,15 +10025,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"

From c2caf78e955bc17d595224025595bbbceb77721c Mon Sep 17 00:00:00 2001
From: David Luzar <5153846+dwelle@users.noreply.github.com>
Date: Mon, 7 Apr 2025 10:41:31 +0200
Subject: [PATCH 10/23] fix: deselected hit element being duplicated +
 incorrect re-seeding (#9333)

* fix: deselected hit element being duplicated + incorrect re-seeding

* snapshots

* Fix alt-drag binding

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

* Add alt-drag bound arrow test

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

---------

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Co-authored-by: Mark Tolmacs <mark@lazycat.hu>
---
 packages/element/src/binding.ts               | 193 +++++++++++++++++-
 packages/element/src/duplicate.ts             |  15 +-
 packages/element/tests/duplicate.test.tsx     |  32 ++-
 packages/excalidraw/components/App.tsx        |  23 ++-
 .../tests/__snapshots__/move.test.tsx.snap    |   8 +-
 5 files changed, 259 insertions(+), 12 deletions(-)

diff --git a/packages/element/src/binding.ts b/packages/element/src/binding.ts
index c84d80577c..7a67cf0a1f 100644
--- a/packages/element/src/binding.ts
+++ b/packages/element/src/binding.ts
@@ -55,6 +55,7 @@ import { getBoundTextElement, handleBindTextResize } from "./textElement";
 import {
   isArrowElement,
   isBindableElement,
+  isBindingElement,
   isBoundToContainer,
   isElbowArrow,
   isFixedPointBinding,
@@ -1422,7 +1423,7 @@ const getLinearElementEdgeCoors = (
   );
 };
 
-export const fixBindingsAfterDuplication = (
+export const fixDuplicatedBindingsAfterDuplication = (
   newElements: ExcalidrawElement[],
   oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>,
   duplicatedElementsMap: NonDeletedSceneElementsMap,
@@ -1493,6 +1494,196 @@ export const fixBindingsAfterDuplication = (
   }
 };
 
+const fixReversedBindingsForBindables = (
+  original: ExcalidrawBindableElement,
+  duplicate: ExcalidrawBindableElement,
+  originalElements: Map<string, ExcalidrawElement>,
+  elementsWithClones: ExcalidrawElement[],
+  oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>,
+) => {
+  original.boundElements?.forEach((binding, idx) => {
+    if (binding.type !== "arrow") {
+      return;
+    }
+
+    const oldArrow = elementsWithClones.find((el) => el.id === binding.id);
+
+    if (!isBindingElement(oldArrow)) {
+      return;
+    }
+
+    if (originalElements.has(binding.id)) {
+      // Linked arrow is in the selection, so find the duplicate pair
+      const newArrowId = oldIdToDuplicatedId.get(binding.id) ?? binding.id;
+      const newArrow = elementsWithClones.find(
+        (el) => el.id === newArrowId,
+      )! as ExcalidrawArrowElement;
+
+      mutateElement(newArrow, {
+        startBinding:
+          oldArrow.startBinding?.elementId === binding.id
+            ? {
+                ...oldArrow.startBinding,
+                elementId: duplicate.id,
+              }
+            : newArrow.startBinding,
+        endBinding:
+          oldArrow.endBinding?.elementId === binding.id
+            ? {
+                ...oldArrow.endBinding,
+                elementId: duplicate.id,
+              }
+            : newArrow.endBinding,
+      });
+      mutateElement(duplicate, {
+        boundElements: [
+          ...(duplicate.boundElements ?? []).filter(
+            (el) => el.id !== binding.id && el.id !== newArrowId,
+          ),
+          {
+            type: "arrow",
+            id: newArrowId,
+          },
+        ],
+      });
+    } else {
+      // Linked arrow is outside the selection,
+      // so we move the binding to the duplicate
+      mutateElement(oldArrow, {
+        startBinding:
+          oldArrow.startBinding?.elementId === original.id
+            ? {
+                ...oldArrow.startBinding,
+                elementId: duplicate.id,
+              }
+            : oldArrow.startBinding,
+        endBinding:
+          oldArrow.endBinding?.elementId === original.id
+            ? {
+                ...oldArrow.endBinding,
+                elementId: duplicate.id,
+              }
+            : oldArrow.endBinding,
+      });
+      mutateElement(duplicate, {
+        boundElements: [
+          ...(duplicate.boundElements ?? []),
+          {
+            type: "arrow",
+            id: oldArrow.id,
+          },
+        ],
+      });
+      mutateElement(original, {
+        boundElements:
+          original.boundElements?.filter((_, i) => i !== idx) ?? null,
+      });
+    }
+  });
+};
+
+const fixReversedBindingsForArrows = (
+  original: ExcalidrawArrowElement,
+  duplicate: ExcalidrawArrowElement,
+  originalElements: Map<string, ExcalidrawElement>,
+  bindingProp: "startBinding" | "endBinding",
+  oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>,
+  elementsWithClones: ExcalidrawElement[],
+) => {
+  const oldBindableId = original[bindingProp]?.elementId;
+
+  if (oldBindableId) {
+    if (originalElements.has(oldBindableId)) {
+      // Linked element is in the selection
+      const newBindableId =
+        oldIdToDuplicatedId.get(oldBindableId) ?? oldBindableId;
+      const newBindable = elementsWithClones.find(
+        (el) => el.id === newBindableId,
+      ) as ExcalidrawBindableElement;
+      mutateElement(duplicate, {
+        [bindingProp]: {
+          ...original[bindingProp],
+          elementId: newBindableId,
+        },
+      });
+      mutateElement(newBindable, {
+        boundElements: [
+          ...(newBindable.boundElements ?? []).filter(
+            (el) => el.id !== original.id && el.id !== duplicate.id,
+          ),
+          {
+            id: duplicate.id,
+            type: "arrow",
+          },
+        ],
+      });
+    } else {
+      // Linked element is outside the selection
+      const originalBindable = elementsWithClones.find(
+        (el) => el.id === oldBindableId,
+      );
+      if (originalBindable) {
+        mutateElement(duplicate, {
+          [bindingProp]: original[bindingProp],
+        });
+        mutateElement(original, {
+          [bindingProp]: null,
+        });
+        mutateElement(originalBindable, {
+          boundElements: [
+            ...(originalBindable.boundElements?.filter(
+              (el) => el.id !== original.id,
+            ) ?? []),
+            {
+              id: duplicate.id,
+              type: "arrow",
+            },
+          ],
+        });
+      }
+    }
+  }
+};
+
+export const fixReversedBindings = (
+  originalElements: Map<string, ExcalidrawElement>,
+  elementsWithClones: ExcalidrawElement[],
+  oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>,
+) => {
+  for (const original of originalElements.values()) {
+    const duplicate = elementsWithClones.find(
+      (el) => el.id === oldIdToDuplicatedId.get(original.id),
+    )!;
+
+    if (isBindableElement(original) && isBindableElement(duplicate)) {
+      fixReversedBindingsForBindables(
+        original,
+        duplicate,
+        originalElements,
+        elementsWithClones,
+        oldIdToDuplicatedId,
+      );
+    } else if (isArrowElement(original) && isArrowElement(duplicate)) {
+      fixReversedBindingsForArrows(
+        original,
+        duplicate,
+        originalElements,
+        "startBinding",
+        oldIdToDuplicatedId,
+        elementsWithClones,
+      );
+      fixReversedBindingsForArrows(
+        original,
+        duplicate,
+        originalElements,
+        "endBinding",
+        oldIdToDuplicatedId,
+        elementsWithClones,
+      );
+    }
+  }
+};
+
 export const fixBindingsAfterDeletion = (
   sceneElements: readonly ExcalidrawElement[],
   deletedElements: readonly ExcalidrawElement[],
diff --git a/packages/element/src/duplicate.ts b/packages/element/src/duplicate.ts
index 5b95f9085b..ded1fd26c1 100644
--- a/packages/element/src/duplicate.ts
+++ b/packages/element/src/duplicate.ts
@@ -36,7 +36,10 @@ import {
 
 import { getBoundTextElement, getContainerElement } from "./textElement";
 
-import { fixBindingsAfterDuplication } from "./binding";
+import {
+  fixDuplicatedBindingsAfterDuplication,
+  fixReversedBindings,
+} from "./binding";
 
 import type {
   ElementsMap,
@@ -381,12 +384,20 @@ export const duplicateElements = (
 
   // ---------------------------------------------------------------------------
 
-  fixBindingsAfterDuplication(
+  fixDuplicatedBindingsAfterDuplication(
     newElements,
     oldIdToDuplicatedId,
     duplicatedElementsMap as NonDeletedSceneElementsMap,
   );
 
+  if (reverseOrder) {
+    fixReversedBindings(
+      _idsOfElementsToDuplicate,
+      elementsWithClones,
+      oldIdToDuplicatedId,
+    );
+  }
+
   bindElementsToFramesAfterDuplication(
     elementsWithClones,
     oldElements,
diff --git a/packages/element/tests/duplicate.test.tsx b/packages/element/tests/duplicate.test.tsx
index d3b5cee963..7492bcc586 100644
--- a/packages/element/tests/duplicate.test.tsx
+++ b/packages/element/tests/duplicate.test.tsx
@@ -14,7 +14,7 @@ import { actionDuplicateSelection } from "@excalidraw/excalidraw/actions";
 
 import { API } from "@excalidraw/excalidraw/tests/helpers/api";
 
-import { Keyboard, Pointer } from "@excalidraw/excalidraw/tests/helpers/ui";
+import { UI, Keyboard, Pointer } from "@excalidraw/excalidraw/tests/helpers/ui";
 
 import {
   act,
@@ -699,4 +699,34 @@ describe("duplication z-order", () => {
       { id: text.id, containerId: arrow.id, selected: true },
     ]);
   });
+
+  it("reverse-duplicating bindable element with bound arrow should keep the arrow on the duplicate", () => {
+    const rect = UI.createElement("rectangle", {
+      x: 0,
+      y: 0,
+      width: 100,
+      height: 100,
+    });
+
+    const arrow = UI.createElement("arrow", {
+      x: -100,
+      y: 50,
+      width: 95,
+      height: 0,
+    });
+
+    expect(arrow.endBinding?.elementId).toBe(rect.id);
+
+    Keyboard.withModifierKeys({ alt: true }, () => {
+      mouse.down(5, 5);
+      mouse.up(15, 15);
+    });
+
+    expect(window.h.elements).toHaveLength(3);
+
+    const newRect = window.h.elements[0];
+
+    expect(arrow.endBinding?.elementId).toBe(newRect.id);
+    expect(newRect.boundElements?.[0]?.id).toBe(arrow.id);
+  });
 });
diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx
index 0ca525828a..276cde0274 100644
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@@ -99,6 +99,7 @@ import {
   isShallowEqual,
   arrayToMap,
   type EXPORT_IMAGE_TYPES,
+  randomInteger,
 } from "@excalidraw/common";
 
 import {
@@ -8521,20 +8522,26 @@ class App extends React.Component<AppProps, AppState> {
             });
             if (
               hitElement &&
+              // hit element may not end up being selected
+              // if we're alt-dragging a common bounding box
+              // over the hit element
+              pointerDownState.hit.wasAddedToSelection &&
               !selectedElements.find((el) => el.id === hitElement.id)
             ) {
               selectedElements.push(hitElement);
             }
 
+            const idsOfElementsToDuplicate = new Map(
+              selectedElements.map((el) => [el.id, el]),
+            );
+
             const { newElements: clonedElements, elementsWithClones } =
               duplicateElements({
                 type: "in-place",
                 elements,
                 appState: this.state,
                 randomizeSeed: true,
-                idsOfElementsToDuplicate: new Map(
-                  selectedElements.map((el) => [el.id, el]),
-                ),
+                idsOfElementsToDuplicate,
                 overrides: (el) => {
                   const origEl = pointerDownState.originalElements.get(el.id);
 
@@ -8542,6 +8549,7 @@ class App extends React.Component<AppProps, AppState> {
                     return {
                       x: origEl.x,
                       y: origEl.y,
+                      seed: origEl.seed,
                     };
                   }
 
@@ -8561,7 +8569,14 @@ class App extends React.Component<AppProps, AppState> {
             const nextSceneElements = syncMovedIndices(
               mappedNewSceneElements || elementsWithClones,
               arrayToMap(clonedElements),
-            );
+            ).map((el) => {
+              if (idsOfElementsToDuplicate.has(el.id)) {
+                return newElementWith(el, {
+                  seed: randomInteger(),
+                });
+              }
+              return el;
+            });
 
             this.scene.replaceAllElements(nextSceneElements);
             this.maybeCacheVisibleGaps(event, selectedElements, true);
diff --git a/packages/excalidraw/tests/__snapshots__/move.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/move.test.tsx.snap
index 4001c3b178..4b863d4e78 100644
--- a/packages/excalidraw/tests/__snapshots__/move.test.tsx.snap
+++ b/packages/excalidraw/tests/__snapshots__/move.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`duplicate element on move when ALT is clicked > rectangle 5`] = `
   "roundness": {
     "type": 3,
   },
-  "seed": 238820263,
+  "seed": 1278240551,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 2,
@@ -54,14 +54,14 @@ exports[`duplicate element on move when ALT is clicked > rectangle 6`] = `
   "roundness": {
     "type": 3,
   },
-  "seed": 1278240551,
+  "seed": 1505387817,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 2,
   "type": "rectangle",
   "updated": 1,
-  "version": 5,
-  "versionNonce": 23633383,
+  "version": 6,
+  "versionNonce": 915032327,
   "width": 30,
   "x": -10,
   "y": 60,

From e48b63a0aed48bce84e1b9741ffff17dc40341d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rk=20Tolm=C3=A1cs?= <mark@lazycat.hu>
Date: Mon, 7 Apr 2025 10:43:07 +0200
Subject: [PATCH 11/23] fix: Rounded diamond edge elbow arrow U route (#9349)

---
 packages/element/src/heading.ts | 255 +++++++++++++++++++++-----------
 1 file changed, 166 insertions(+), 89 deletions(-)

diff --git a/packages/element/src/heading.ts b/packages/element/src/heading.ts
index 474923515e..1e9ab37132 100644
--- a/packages/element/src/heading.ts
+++ b/packages/element/src/heading.ts
@@ -1,11 +1,15 @@
+import { invariant, isDevEnv, isTestEnv } from "@excalidraw/common";
+
 import {
-  normalizeRadians,
   pointFrom,
+  pointFromVector,
   pointRotateRads,
   pointScaleFromOrigin,
-  radiansToDegrees,
+  pointsEqual,
   triangleIncludesPoint,
+  vectorCross,
   vectorFromPoint,
+  vectorScale,
 } from "@excalidraw/math";
 
 import type {
@@ -13,7 +17,6 @@ import type {
   GlobalPoint,
   Triangle,
   Vector,
-  Radians,
 } from "@excalidraw/math";
 
 import { getCenterForBounds, type Bounds } from "./bounds";
@@ -26,24 +29,6 @@ export const HEADING_LEFT = [-1, 0] as Heading;
 export const HEADING_UP = [0, -1] as Heading;
 export type Heading = [1, 0] | [0, 1] | [-1, 0] | [0, -1];
 
-export const headingForDiamond = <Point extends GlobalPoint | LocalPoint>(
-  a: Point,
-  b: Point,
-) => {
-  const angle = radiansToDegrees(
-    normalizeRadians(Math.atan2(b[1] - a[1], b[0] - a[0]) as Radians),
-  );
-
-  if (angle >= 315 || angle < 45) {
-    return HEADING_UP;
-  } else if (angle >= 45 && angle < 135) {
-    return HEADING_RIGHT;
-  } else if (angle >= 135 && angle < 225) {
-    return HEADING_DOWN;
-  }
-  return HEADING_LEFT;
-};
-
 export const vectorToHeading = (vec: Vector): Heading => {
   const [x, y] = vec;
   const absX = Math.abs(x);
@@ -76,6 +61,165 @@ export const headingIsHorizontal = (a: Heading) =>
 
 export const headingIsVertical = (a: Heading) => !headingIsHorizontal(a);
 
+const headingForPointFromDiamondElement = (
+  element: Readonly<ExcalidrawBindableElement>,
+  aabb: Readonly<Bounds>,
+  point: Readonly<GlobalPoint>,
+): Heading => {
+  const midPoint = getCenterForBounds(aabb);
+
+  if (isDevEnv() || isTestEnv()) {
+    invariant(
+      element.width > 0 && element.height > 0,
+      "Diamond element has no width or height",
+    );
+    invariant(
+      !pointsEqual(midPoint, point),
+      "The point is too close to the element mid point to determine heading",
+    );
+  }
+
+  const SHRINK = 0.95; // Rounded elements tolerance
+  const top = pointFromVector(
+    vectorScale(
+      vectorFromPoint(
+        pointRotateRads(
+          pointFrom<GlobalPoint>(element.x + element.width / 2, element.y),
+          midPoint,
+          element.angle,
+        ),
+        midPoint,
+      ),
+      SHRINK,
+    ),
+    midPoint,
+  );
+  const right = pointFromVector(
+    vectorScale(
+      vectorFromPoint(
+        pointRotateRads(
+          pointFrom<GlobalPoint>(
+            element.x + element.width,
+            element.y + element.height / 2,
+          ),
+          midPoint,
+          element.angle,
+        ),
+        midPoint,
+      ),
+      SHRINK,
+    ),
+    midPoint,
+  );
+  const bottom = pointFromVector(
+    vectorScale(
+      vectorFromPoint(
+        pointRotateRads(
+          pointFrom<GlobalPoint>(
+            element.x + element.width / 2,
+            element.y + element.height,
+          ),
+          midPoint,
+          element.angle,
+        ),
+        midPoint,
+      ),
+      SHRINK,
+    ),
+    midPoint,
+  );
+  const left = pointFromVector(
+    vectorScale(
+      vectorFromPoint(
+        pointRotateRads(
+          pointFrom<GlobalPoint>(element.x, element.y + element.height / 2),
+          midPoint,
+          element.angle,
+        ),
+        midPoint,
+      ),
+      SHRINK,
+    ),
+    midPoint,
+  );
+
+  // Corners
+  if (
+    vectorCross(vectorFromPoint(point, top), vectorFromPoint(top, right)) <=
+      0 &&
+    vectorCross(vectorFromPoint(point, top), vectorFromPoint(top, left)) > 0
+  ) {
+    return headingForPoint(top, midPoint);
+  } else if (
+    vectorCross(
+      vectorFromPoint(point, right),
+      vectorFromPoint(right, bottom),
+    ) <= 0 &&
+    vectorCross(vectorFromPoint(point, right), vectorFromPoint(right, top)) > 0
+  ) {
+    return headingForPoint(right, midPoint);
+  } else if (
+    vectorCross(
+      vectorFromPoint(point, bottom),
+      vectorFromPoint(bottom, left),
+    ) <= 0 &&
+    vectorCross(
+      vectorFromPoint(point, bottom),
+      vectorFromPoint(bottom, right),
+    ) > 0
+  ) {
+    return headingForPoint(bottom, midPoint);
+  } else if (
+    vectorCross(vectorFromPoint(point, left), vectorFromPoint(left, top)) <=
+      0 &&
+    vectorCross(vectorFromPoint(point, left), vectorFromPoint(left, bottom)) > 0
+  ) {
+    return headingForPoint(left, midPoint);
+  }
+
+  // Sides
+  if (
+    vectorCross(
+      vectorFromPoint(point, midPoint),
+      vectorFromPoint(top, midPoint),
+    ) <= 0 &&
+    vectorCross(
+      vectorFromPoint(point, midPoint),
+      vectorFromPoint(right, midPoint),
+    ) > 0
+  ) {
+    const p = element.width > element.height ? top : right;
+    return headingForPoint(p, midPoint);
+  } else if (
+    vectorCross(
+      vectorFromPoint(point, midPoint),
+      vectorFromPoint(right, midPoint),
+    ) <= 0 &&
+    vectorCross(
+      vectorFromPoint(point, midPoint),
+      vectorFromPoint(bottom, midPoint),
+    ) > 0
+  ) {
+    const p = element.width > element.height ? bottom : right;
+    return headingForPoint(p, midPoint);
+  } else if (
+    vectorCross(
+      vectorFromPoint(point, midPoint),
+      vectorFromPoint(bottom, midPoint),
+    ) <= 0 &&
+    vectorCross(
+      vectorFromPoint(point, midPoint),
+      vectorFromPoint(left, midPoint),
+    ) > 0
+  ) {
+    const p = element.width > element.height ? bottom : left;
+    return headingForPoint(p, midPoint);
+  }
+
+  const p = element.width > element.height ? top : left;
+  return headingForPoint(p, midPoint);
+};
+
 // Gets the heading for the point by creating a bounding box around the rotated
 // close fitting bounding box, then creating 4 search cones around the center of
 // the external bbox.
@@ -89,74 +233,7 @@ export const headingForPointFromElement = <Point extends GlobalPoint>(
   const midPoint = getCenterForBounds(aabb);
 
   if (element.type === "diamond") {
-    if (p[0] < element.x) {
-      return HEADING_LEFT;
-    } else if (p[1] < element.y) {
-      return HEADING_UP;
-    } else if (p[0] > element.x + element.width) {
-      return HEADING_RIGHT;
-    } else if (p[1] > element.y + element.height) {
-      return HEADING_DOWN;
-    }
-
-    const top = pointRotateRads(
-      pointScaleFromOrigin(
-        pointFrom(element.x + element.width / 2, element.y),
-        midPoint,
-        SEARCH_CONE_MULTIPLIER,
-      ),
-      midPoint,
-      element.angle,
-    );
-    const right = pointRotateRads(
-      pointScaleFromOrigin(
-        pointFrom(element.x + element.width, element.y + element.height / 2),
-        midPoint,
-        SEARCH_CONE_MULTIPLIER,
-      ),
-      midPoint,
-      element.angle,
-    );
-    const bottom = pointRotateRads(
-      pointScaleFromOrigin(
-        pointFrom(element.x + element.width / 2, element.y + element.height),
-        midPoint,
-        SEARCH_CONE_MULTIPLIER,
-      ),
-      midPoint,
-      element.angle,
-    );
-    const left = pointRotateRads(
-      pointScaleFromOrigin(
-        pointFrom(element.x, element.y + element.height / 2),
-        midPoint,
-        SEARCH_CONE_MULTIPLIER,
-      ),
-      midPoint,
-      element.angle,
-    );
-
-    if (
-      triangleIncludesPoint<Point>([top, right, midPoint] as Triangle<Point>, p)
-    ) {
-      return headingForDiamond(top, right);
-    } else if (
-      triangleIncludesPoint<Point>(
-        [right, bottom, midPoint] as Triangle<Point>,
-        p,
-      )
-    ) {
-      return headingForDiamond(right, bottom);
-    } else if (
-      triangleIncludesPoint<Point>(
-        [bottom, left, midPoint] as Triangle<Point>,
-        p,
-      )
-    ) {
-      return headingForDiamond(bottom, left);
-    }
-
-    return headingForDiamond(left, top);
+    return headingForPointFromDiamondElement(element, aabb, p);
   }
 
   const topLeft = pointScaleFromOrigin(

From 6fc85022ae6ad14e74271e071afc51a60b7dc3c5 Mon Sep 17 00:00:00 2001
From: Ryan Di <ryan.weihao.di@gmail.com>
Date: Tue, 8 Apr 2025 00:50:52 +1000
Subject: [PATCH 12/23] fix: lasso selection issues (#9353)

* revert stroke slicing hack for knot

* fix incorrect closing of path

* nonzero enclosure

* lint
---
 packages/excalidraw/animated-trail.ts |  6 +-----
 packages/excalidraw/lasso/utils.ts    | 16 ++++++---------
 packages/math/src/polygon.ts          | 28 +++++++++++++++++++++++++++
 3 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/packages/excalidraw/animated-trail.ts b/packages/excalidraw/animated-trail.ts
index 0ffec7cf58..af6162e99b 100644
--- a/packages/excalidraw/animated-trail.ts
+++ b/packages/excalidraw/animated-trail.ts
@@ -191,11 +191,7 @@ export class AnimatedTrail implements Trail {
       });
 
     const stroke = this.trailAnimation
-      ? _stroke.slice(
-          // slicing from 6th point to get rid of the initial notch type of thing
-          Math.min(_stroke.length, 6),
-          _stroke.length / 2,
-        )
+      ? _stroke.slice(0, _stroke.length / 2)
       : _stroke;
 
     return getSvgPathFromStroke(stroke, true);
diff --git a/packages/excalidraw/lasso/utils.ts b/packages/excalidraw/lasso/utils.ts
index b04e66db90..f5a7eefdc9 100644
--- a/packages/excalidraw/lasso/utils.ts
+++ b/packages/excalidraw/lasso/utils.ts
@@ -2,9 +2,9 @@ import { simplify } from "points-on-curve";
 
 import {
   polygonFromPoints,
-  polygonIncludesPoint,
   lineSegment,
   lineSegmentIntersectionPoints,
+  polygonIncludesPointNonZero,
 } from "@excalidraw/math";
 
 import type { GlobalPoint, LineSegment } from "@excalidraw/math/types";
@@ -35,8 +35,6 @@ export const getLassoSelectedElementIds = (input: {
   if (simplifyDistance) {
     path = simplify(lassoPath, simplifyDistance) as GlobalPoint[];
   }
-  // close the path to form a polygon for enclosure check
-  const closedPath = polygonFromPoints(path);
   // as the path might not enclose a shape anymore, clear before checking
   enclosedElements.clear();
   for (const element of elements) {
@@ -44,15 +42,11 @@ export const getLassoSelectedElementIds = (input: {
       !intersectedElements.has(element.id) &&
       !enclosedElements.has(element.id)
     ) {
-      const enclosed = enclosureTest(closedPath, element, elementsSegments);
+      const enclosed = enclosureTest(path, element, elementsSegments);
       if (enclosed) {
         enclosedElements.add(element.id);
       } else {
-        const intersects = intersectionTest(
-          closedPath,
-          element,
-          elementsSegments,
-        );
+        const intersects = intersectionTest(path, element, elementsSegments);
         if (intersects) {
           intersectedElements.add(element.id);
         }
@@ -79,7 +73,9 @@ const enclosureTest = (
   }
 
   return segments.some((segment) => {
-    return segment.some((point) => polygonIncludesPoint(point, lassoPolygon));
+    return segment.some((point) =>
+      polygonIncludesPointNonZero(point, lassoPolygon),
+    );
   });
 };
 
diff --git a/packages/math/src/polygon.ts b/packages/math/src/polygon.ts
index 762c82dbfb..a50d4e8536 100644
--- a/packages/math/src/polygon.ts
+++ b/packages/math/src/polygon.ts
@@ -41,6 +41,34 @@ export const polygonIncludesPoint = <Point extends LocalPoint | GlobalPoint>(
   return inside;
 };
 
+export const polygonIncludesPointNonZero = <Point extends [number, number]>(
+  point: Point,
+  polygon: Point[],
+): boolean => {
+  const [x, y] = point;
+  let windingNumber = 0;
+
+  for (let i = 0; i < polygon.length; i++) {
+    const j = (i + 1) % polygon.length;
+    const [xi, yi] = polygon[i];
+    const [xj, yj] = polygon[j];
+
+    if (yi <= y) {
+      if (yj > y) {
+        if ((xj - xi) * (y - yi) - (x - xi) * (yj - yi) > 0) {
+          windingNumber++;
+        }
+      }
+    } else if (yj <= y) {
+      if ((xj - xi) * (y - yi) - (x - xi) * (yj - yi) < 0) {
+        windingNumber--;
+      }
+    }
+  }
+
+  return windingNumber !== 0;
+};
+
 export const pointOnPolygon = <Point extends LocalPoint | GlobalPoint>(
   p: Point,
   poly: Polygon<Point>,

From dff69e91912507bbfcc68b35277cc6031ce5b437 Mon Sep 17 00:00:00 2001
From: jhanma17dev <jhanmariobolivarpena@gmail.com>
Date: Wed, 9 Apr 2025 10:04:51 -0500
Subject: [PATCH 13/23] chore: Element center point util (#9298)

---
 packages/common/src/utils.ts            | 17 ++++++++-
 packages/element/src/binding.ts         | 46 ++++++-------------------
 packages/element/src/collision.ts       | 21 +++--------
 packages/element/src/cropElement.ts     |  4 ++-
 packages/element/src/distance.ts        | 18 +++-------
 packages/element/src/shapes.ts          |  3 +-
 packages/element/src/utils.ts           | 12 +++----
 packages/excalidraw/tests/helpers/ui.ts |  6 ++--
 8 files changed, 49 insertions(+), 78 deletions(-)

diff --git a/packages/common/src/utils.ts b/packages/common/src/utils.ts
index 7fa98eb2da..54eaa67cc4 100644
--- a/packages/common/src/utils.ts
+++ b/packages/common/src/utils.ts
@@ -1,9 +1,10 @@
-import { average } from "@excalidraw/math";
+import { average, pointFrom, type GlobalPoint } from "@excalidraw/math";
 
 import type {
   ExcalidrawBindableElement,
   FontFamilyValues,
   FontString,
+  ExcalidrawElement,
 } from "@excalidraw/element/types";
 
 import type {
@@ -1201,3 +1202,17 @@ export const escapeDoubleQuotes = (str: string) => {
 
 export const castArray = <T>(value: T | T[]): T[] =>
   Array.isArray(value) ? value : [value];
+
+export const elementCenterPoint = (
+  element: ExcalidrawElement,
+  xOffset: number = 0,
+  yOffset: number = 0,
+) => {
+  const { x, y, width, height } = element;
+
+  const centerXPoint = x + width / 2 + xOffset;
+
+  const centerYPoint = y + height / 2 + yOffset;
+
+  return pointFrom<GlobalPoint>(centerXPoint, centerYPoint);
+};
diff --git a/packages/element/src/binding.ts b/packages/element/src/binding.ts
index 7a67cf0a1f..5c32e8c81d 100644
--- a/packages/element/src/binding.ts
+++ b/packages/element/src/binding.ts
@@ -6,6 +6,7 @@ import {
   invariant,
   isDevEnv,
   isTestEnv,
+  elementCenterPoint,
 } from "@excalidraw/common";
 
 import {
@@ -904,13 +905,7 @@ export const getHeadingForElbowArrowSnap = (
 
   if (!distance) {
     return vectorToHeading(
-      vectorFromPoint(
-        p,
-        pointFrom<GlobalPoint>(
-          bindableElement.x + bindableElement.width / 2,
-          bindableElement.y + bindableElement.height / 2,
-        ),
-      ),
+      vectorFromPoint(p, elementCenterPoint(bindableElement)),
     );
   }
 
@@ -1040,10 +1035,7 @@ export const avoidRectangularCorner = (
   element: ExcalidrawBindableElement,
   p: GlobalPoint,
 ): GlobalPoint => {
-  const center = pointFrom<GlobalPoint>(
-    element.x + element.width / 2,
-    element.y + element.height / 2,
-  );
+  const center = elementCenterPoint(element);
   const nonRotatedPoint = pointRotateRads(p, center, -element.angle as Radians);
 
   if (nonRotatedPoint[0] < element.x && nonRotatedPoint[1] < element.y) {
@@ -1140,10 +1132,9 @@ export const snapToMid = (
   tolerance: number = 0.05,
 ): GlobalPoint => {
   const { x, y, width, height, angle } = element;
-  const center = pointFrom<GlobalPoint>(
-    x + width / 2 - 0.1,
-    y + height / 2 - 0.1,
-  );
+
+  const center = elementCenterPoint(element, -0.1, -0.1);
+
   const nonRotated = pointRotateRads(p, center, -angle as Radians);
 
   // snap-to-center point is adaptive to element size, but we don't want to go
@@ -1228,10 +1219,7 @@ const updateBoundPoint = (
         startOrEnd === "startBinding" ? "start" : "end",
         elementsMap,
       ).fixedPoint;
-    const globalMidPoint = pointFrom<GlobalPoint>(
-      bindableElement.x + bindableElement.width / 2,
-      bindableElement.y + bindableElement.height / 2,
-    );
+    const globalMidPoint = elementCenterPoint(bindableElement);
     const global = pointFrom<GlobalPoint>(
       bindableElement.x + fixedPoint[0] * bindableElement.width,
       bindableElement.y + fixedPoint[1] * bindableElement.height,
@@ -1275,10 +1263,7 @@ const updateBoundPoint = (
         elementsMap,
       );
 
-    const center = pointFrom<GlobalPoint>(
-      bindableElement.x + bindableElement.width / 2,
-      bindableElement.y + bindableElement.height / 2,
-    );
+    const center = elementCenterPoint(bindableElement);
     const interceptorLength =
       pointDistance(adjacentPoint, edgePointAbsolute) +
       pointDistance(adjacentPoint, center) +
@@ -1771,10 +1756,7 @@ const determineFocusDistance = (
   // Another point on the line, in absolute coordinates (closer to element)
   b: GlobalPoint,
 ): number => {
-  const center = pointFrom<GlobalPoint>(
-    element.x + element.width / 2,
-    element.y + element.height / 2,
-  );
+  const center = elementCenterPoint(element);
 
   if (pointsEqual(a, b)) {
     return 0;
@@ -1904,10 +1886,7 @@ const determineFocusPoint = (
   focus: number,
   adjacentPoint: GlobalPoint,
 ): GlobalPoint => {
-  const center = pointFrom<GlobalPoint>(
-    element.x + element.width / 2,
-    element.y + element.height / 2,
-  );
+  const center = elementCenterPoint(element);
 
   if (focus === 0) {
     return center;
@@ -2338,10 +2317,7 @@ export const getGlobalFixedPointForBindableElement = (
       element.x + element.width * fixedX,
       element.y + element.height * fixedY,
     ),
-    pointFrom<GlobalPoint>(
-      element.x + element.width / 2,
-      element.y + element.height / 2,
-    ),
+    elementCenterPoint(element),
     element.angle,
   );
 };
diff --git a/packages/element/src/collision.ts b/packages/element/src/collision.ts
index 0fabe98392..07b17bfde5 100644
--- a/packages/element/src/collision.ts
+++ b/packages/element/src/collision.ts
@@ -1,4 +1,4 @@
-import { isTransparent } from "@excalidraw/common";
+import { isTransparent, elementCenterPoint } from "@excalidraw/common";
 import {
   curveIntersectLineSegment,
   isPointWithinBounds,
@@ -16,7 +16,7 @@ import {
 } from "@excalidraw/math/ellipse";
 
 import { isPointInShape, isPointOnShape } from "@excalidraw/utils/collision";
-import { getPolygonShape } from "@excalidraw/utils/shape";
+import { type GeometricShape, getPolygonShape } from "@excalidraw/utils/shape";
 
 import type {
   GlobalPoint,
@@ -26,8 +26,6 @@ import type {
   Radians,
 } from "@excalidraw/math";
 
-import type { GeometricShape } from "@excalidraw/utils/shape";
-
 import type { FrameNameBounds } from "@excalidraw/excalidraw/types";
 
 import { getBoundTextShape, isPathALoop } from "./shapes";
@@ -191,10 +189,7 @@ const intersectRectanguloidWithLineSegment = (
   l: LineSegment<GlobalPoint>,
   offset: number = 0,
 ): GlobalPoint[] => {
-  const center = pointFrom<GlobalPoint>(
-    element.x + element.width / 2,
-    element.y + element.height / 2,
-  );
+  const center = elementCenterPoint(element);
   // To emulate a rotated rectangle we rotate the point in the inverse angle
   // instead. It's all the same distance-wise.
   const rotatedA = pointRotateRads<GlobalPoint>(
@@ -253,10 +248,7 @@ const intersectDiamondWithLineSegment = (
   l: LineSegment<GlobalPoint>,
   offset: number = 0,
 ): GlobalPoint[] => {
-  const center = pointFrom<GlobalPoint>(
-    element.x + element.width / 2,
-    element.y + element.height / 2,
-  );
+  const center = elementCenterPoint(element);
 
   // Rotate the point to the inverse direction to simulate the rotated diamond
   // points. It's all the same distance-wise.
@@ -304,10 +296,7 @@ const intersectEllipseWithLineSegment = (
   l: LineSegment<GlobalPoint>,
   offset: number = 0,
 ): GlobalPoint[] => {
-  const center = pointFrom<GlobalPoint>(
-    element.x + element.width / 2,
-    element.y + element.height / 2,
-  );
+  const center = elementCenterPoint(element);
 
   const rotatedA = pointRotateRads(l[0], center, -element.angle as Radians);
   const rotatedB = pointRotateRads(l[1], center, -element.angle as Radians);
diff --git a/packages/element/src/cropElement.ts b/packages/element/src/cropElement.ts
index dd75f9360f..2bc930d668 100644
--- a/packages/element/src/cropElement.ts
+++ b/packages/element/src/cropElement.ts
@@ -14,6 +14,8 @@ import {
 } from "@excalidraw/math";
 import { type Point } from "points-on-curve";
 
+import { elementCenterPoint } from "@excalidraw/common";
+
 import {
   getElementAbsoluteCoords,
   getResizedElementAbsoluteCoords,
@@ -61,7 +63,7 @@ export const cropElement = (
 
   const rotatedPointer = pointRotateRads(
     pointFrom(pointerX, pointerY),
-    pointFrom(element.x + element.width / 2, element.y + element.height / 2),
+    elementCenterPoint(element),
     -element.angle as Radians,
   );
 
diff --git a/packages/element/src/distance.ts b/packages/element/src/distance.ts
index d9db939e4d..d261faf7df 100644
--- a/packages/element/src/distance.ts
+++ b/packages/element/src/distance.ts
@@ -1,12 +1,13 @@
 import {
   curvePointDistance,
   distanceToLineSegment,
-  pointFrom,
   pointRotateRads,
 } from "@excalidraw/math";
 
 import { ellipse, ellipseDistanceFromPoint } from "@excalidraw/math/ellipse";
 
+import { elementCenterPoint } from "@excalidraw/common";
+
 import type { GlobalPoint, Radians } from "@excalidraw/math";
 
 import {
@@ -53,10 +54,7 @@ const distanceToRectanguloidElement = (
   element: ExcalidrawRectanguloidElement,
   p: GlobalPoint,
 ) => {
-  const center = pointFrom<GlobalPoint>(
-    element.x + element.width / 2,
-    element.y + element.height / 2,
-  );
+  const center = elementCenterPoint(element);
   // To emulate a rotated rectangle we rotate the point in the inverse angle
   // instead. It's all the same distance-wise.
   const rotatedPoint = pointRotateRads(p, center, -element.angle as Radians);
@@ -84,10 +82,7 @@ const distanceToDiamondElement = (
   element: ExcalidrawDiamondElement,
   p: GlobalPoint,
 ): number => {
-  const center = pointFrom<GlobalPoint>(
-    element.x + element.width / 2,
-    element.y + element.height / 2,
-  );
+  const center = elementCenterPoint(element);
 
   // Rotate the point to the inverse direction to simulate the rotated diamond
   // points. It's all the same distance-wise.
@@ -115,10 +110,7 @@ const distanceToEllipseElement = (
   element: ExcalidrawEllipseElement,
   p: GlobalPoint,
 ): number => {
-  const center = pointFrom(
-    element.x + element.width / 2,
-    element.y + element.height / 2,
-  );
+  const center = elementCenterPoint(element);
   return ellipseDistanceFromPoint(
     // Instead of rotating the ellipse, rotate the point to the inverse angle
     pointRotateRads(p, center, -element.angle as Radians),
diff --git a/packages/element/src/shapes.ts b/packages/element/src/shapes.ts
index 1d6e13340f..96542c5385 100644
--- a/packages/element/src/shapes.ts
+++ b/packages/element/src/shapes.ts
@@ -4,6 +4,7 @@ import {
   LINE_CONFIRM_THRESHOLD,
   ROUNDNESS,
   invariant,
+  elementCenterPoint,
 } from "@excalidraw/common";
 import {
   isPoint,
@@ -297,7 +298,7 @@ export const aabbForElement = (
     midY: element.y + element.height / 2,
   };
 
-  const center = pointFrom(bbox.midX, bbox.midY);
+  const center = elementCenterPoint(element);
   const [topLeftX, topLeftY] = pointRotateRads(
     pointFrom(bbox.minX, bbox.minY),
     center,
diff --git a/packages/element/src/utils.ts b/packages/element/src/utils.ts
index 7042b5d8f1..57b1e4346c 100644
--- a/packages/element/src/utils.ts
+++ b/packages/element/src/utils.ts
@@ -10,6 +10,8 @@ import {
   type GlobalPoint,
 } from "@excalidraw/math";
 
+import { elementCenterPoint } from "@excalidraw/common";
+
 import type { Curve, LineSegment } from "@excalidraw/math";
 
 import { getCornerRadius } from "./shapes";
@@ -68,10 +70,7 @@ export function deconstructRectanguloidElement(
     return [sides, []];
   }
 
-  const center = pointFrom<GlobalPoint>(
-    element.x + element.width / 2,
-    element.y + element.height / 2,
-  );
+  const center = elementCenterPoint(element);
 
   const r = rectangle(
     pointFrom(element.x, element.y),
@@ -254,10 +253,7 @@ export function deconstructDiamondElement(
     return [[topRight, bottomRight, bottomLeft, topLeft], []];
   }
 
-  const center = pointFrom<GlobalPoint>(
-    element.x + element.width / 2,
-    element.y + element.height / 2,
-  );
+  const center = elementCenterPoint(element);
 
   const [top, right, bottom, left]: GlobalPoint[] = [
     pointFrom(element.x + topX, element.y + topY),
diff --git a/packages/excalidraw/tests/helpers/ui.ts b/packages/excalidraw/tests/helpers/ui.ts
index 0e5e433674..32de489f15 100644
--- a/packages/excalidraw/tests/helpers/ui.ts
+++ b/packages/excalidraw/tests/helpers/ui.ts
@@ -20,7 +20,7 @@ import {
   isTextElement,
   isFrameLikeElement,
 } from "@excalidraw/element/typeChecks";
-import { KEYS, arrayToMap } from "@excalidraw/common";
+import { KEYS, arrayToMap, elementCenterPoint } from "@excalidraw/common";
 
 import type { GlobalPoint, LocalPoint, Radians } from "@excalidraw/math";
 
@@ -151,7 +151,7 @@ export class Keyboard {
 const getElementPointForSelection = (
   element: ExcalidrawElement,
 ): GlobalPoint => {
-  const { x, y, width, height, angle } = element;
+  const { x, y, width, angle } = element;
   const target = pointFrom<GlobalPoint>(
     x +
       (isLinearElement(element) || isFreeDrawElement(element) ? 0 : width / 2),
@@ -166,7 +166,7 @@ const getElementPointForSelection = (
       (bounds[1] + bounds[3]) / 2,
     );
   } else {
-    center = pointFrom(x + width / 2, y + height / 2);
+    center = elementCenterPoint(element);
   }
 
   if (isTextElement(element)) {

From 01304aac498f9b653bb7019cafc7f8a6eb5936c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rk=20Tolm=C3=A1cs?= <mark@lazycat.hu>
Date: Sun, 13 Apr 2025 21:21:49 +0200
Subject: [PATCH 14/23] feat: Keep text label horizontal (#9364)

Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
---
 packages/common/src/constants.ts              |  1 +
 packages/common/src/utils.ts                  |  2 +
 packages/element/src/textElement.ts           | 23 ++++-
 .../excalidraw/actions/actionBoundText.tsx    |  4 +
 packages/excalidraw/components/App.tsx        | 62 ++++++------
 packages/excalidraw/data/restore.ts           |  6 +-
 .../excalidraw/wysiwyg/textWysiwyg.test.tsx   | 97 +++++++++++++++++++
 7 files changed, 161 insertions(+), 34 deletions(-)

diff --git a/packages/common/src/constants.ts b/packages/common/src/constants.ts
index 7e8c49ea1c..7eb36d5d96 100644
--- a/packages/common/src/constants.ts
+++ b/packages/common/src/constants.ts
@@ -112,6 +112,7 @@ export const YOUTUBE_STATES = {
 export const ENV = {
   TEST: "test",
   DEVELOPMENT: "development",
+  PRODUCTION: "production",
 };
 
 export const CLASSES = {
diff --git a/packages/common/src/utils.ts b/packages/common/src/utils.ts
index 54eaa67cc4..b6e9fdd781 100644
--- a/packages/common/src/utils.ts
+++ b/packages/common/src/utils.ts
@@ -739,6 +739,8 @@ export const isTestEnv = () => import.meta.env.MODE === ENV.TEST;
 
 export const isDevEnv = () => import.meta.env.MODE === ENV.DEVELOPMENT;
 
+export const isProdEnv = () => import.meta.env.MODE === ENV.PRODUCTION;
+
 export const isServerEnv = () =>
   typeof process !== "undefined" && !!process?.env?.NODE_ENV;
 
diff --git a/packages/element/src/textElement.ts b/packages/element/src/textElement.ts
index ea27c318fd..55c3f692ce 100644
--- a/packages/element/src/textElement.ts
+++ b/packages/element/src/textElement.ts
@@ -6,6 +6,8 @@ import {
   TEXT_ALIGN,
   VERTICAL_ALIGN,
   getFontString,
+  isProdEnv,
+  invariant,
 } from "@excalidraw/common";
 
 import type { AppState } from "@excalidraw/excalidraw/types";
@@ -26,6 +28,8 @@ import {
   isTextElement,
 } from "./typeChecks";
 
+import type { Radians } from "../../math/src";
+
 import type { MaybeTransformHandleType } from "./transformHandles";
 import type {
   ElementsMap,
@@ -44,13 +48,25 @@ export const redrawTextBoundingBox = (
   informMutation = true,
 ) => {
   let maxWidth = undefined;
+
+  if (!isProdEnv()) {
+    invariant(
+      !container || !isArrowElement(container) || textElement.angle === 0,
+      "text element angle must be 0 if bound to arrow container",
+    );
+  }
+
   const boundTextUpdates = {
     x: textElement.x,
     y: textElement.y,
     text: textElement.text,
     width: textElement.width,
     height: textElement.height,
-    angle: container?.angle ?? textElement.angle,
+    angle: (container
+      ? isArrowElement(container)
+        ? 0
+        : container.angle
+      : textElement.angle) as Radians,
   };
 
   boundTextUpdates.text = textElement.text;
@@ -335,7 +351,10 @@ export const getTextElementAngle = (
   textElement: ExcalidrawTextElement,
   container: ExcalidrawTextContainer | null,
 ) => {
-  if (!container || isArrowElement(container)) {
+  if (isArrowElement(container)) {
+    return 0;
+  }
+  if (!container) {
     return textElement.angle;
   }
   return container.angle;
diff --git a/packages/excalidraw/actions/actionBoundText.tsx b/packages/excalidraw/actions/actionBoundText.tsx
index ae18c0d986..d08ad341ee 100644
--- a/packages/excalidraw/actions/actionBoundText.tsx
+++ b/packages/excalidraw/actions/actionBoundText.tsx
@@ -21,6 +21,7 @@ import {
 
 import {
   hasBoundTextElement,
+  isArrowElement,
   isTextBindableContainer,
   isTextElement,
   isUsingAdaptiveRadius,
@@ -46,6 +47,8 @@ import { CaptureUpdateAction } from "../store";
 
 import { register } from "./register";
 
+import type { Radians } from "../../math/src";
+
 import type { AppState } from "../types";
 
 export const actionUnbindText = register({
@@ -155,6 +158,7 @@ export const actionBindText = register({
       verticalAlign: VERTICAL_ALIGN.MIDDLE,
       textAlign: TEXT_ALIGN.CENTER,
       autoResize: true,
+      angle: (isArrowElement(container) ? 0 : container?.angle ?? 0) as Radians,
     });
     mutateElement(container, {
       boundElements: (container.boundElements || []).concat({
diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx
index 276cde0274..976abfd765 100644
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@@ -5352,37 +5352,37 @@ class App extends React.Component<AppProps, AppState> {
       y: sceneY,
     });
 
-    const element = existingTextElement
-      ? existingTextElement
-      : newTextElement({
-          x: parentCenterPosition
-            ? parentCenterPosition.elementCenterX
-            : sceneX,
-          y: parentCenterPosition
-            ? parentCenterPosition.elementCenterY
-            : sceneY,
-          strokeColor: this.state.currentItemStrokeColor,
-          backgroundColor: this.state.currentItemBackgroundColor,
-          fillStyle: this.state.currentItemFillStyle,
-          strokeWidth: this.state.currentItemStrokeWidth,
-          strokeStyle: this.state.currentItemStrokeStyle,
-          roughness: this.state.currentItemRoughness,
-          opacity: this.state.currentItemOpacity,
-          text: "",
-          fontSize,
-          fontFamily,
-          textAlign: parentCenterPosition
-            ? "center"
-            : this.state.currentItemTextAlign,
-          verticalAlign: parentCenterPosition
-            ? VERTICAL_ALIGN.MIDDLE
-            : DEFAULT_VERTICAL_ALIGN,
-          containerId: shouldBindToContainer ? container?.id : undefined,
-          groupIds: container?.groupIds ?? [],
-          lineHeight,
-          angle: container?.angle ?? (0 as Radians),
-          frameId: topLayerFrame ? topLayerFrame.id : null,
-        });
+    const element =
+      existingTextElement ||
+      newTextElement({
+        x: parentCenterPosition ? parentCenterPosition.elementCenterX : sceneX,
+        y: parentCenterPosition ? parentCenterPosition.elementCenterY : sceneY,
+        strokeColor: this.state.currentItemStrokeColor,
+        backgroundColor: this.state.currentItemBackgroundColor,
+        fillStyle: this.state.currentItemFillStyle,
+        strokeWidth: this.state.currentItemStrokeWidth,
+        strokeStyle: this.state.currentItemStrokeStyle,
+        roughness: this.state.currentItemRoughness,
+        opacity: this.state.currentItemOpacity,
+        text: "",
+        fontSize,
+        fontFamily,
+        textAlign: parentCenterPosition
+          ? "center"
+          : this.state.currentItemTextAlign,
+        verticalAlign: parentCenterPosition
+          ? VERTICAL_ALIGN.MIDDLE
+          : DEFAULT_VERTICAL_ALIGN,
+        containerId: shouldBindToContainer ? container?.id : undefined,
+        groupIds: container?.groupIds ?? [],
+        lineHeight,
+        angle: container
+          ? isArrowElement(container)
+            ? (0 as Radians)
+            : container.angle
+          : (0 as Radians),
+        frameId: topLayerFrame ? topLayerFrame.id : null,
+      });
 
     if (!existingTextElement && shouldBindToContainer && container) {
       mutateElement(container, {
diff --git a/packages/excalidraw/data/restore.ts b/packages/excalidraw/data/restore.ts
index 4f050c922e..1811cbb57c 100644
--- a/packages/excalidraw/data/restore.ts
+++ b/packages/excalidraw/data/restore.ts
@@ -439,7 +439,7 @@ const repairContainerElement = (
             // if defined, lest boundElements is stale
             !boundElement.containerId
           ) {
-            (boundElement as Mutable<ExcalidrawTextElement>).containerId =
+            (boundElement as Mutable<typeof boundElement>).containerId =
               container.id;
           }
         }
@@ -464,6 +464,10 @@ const repairBoundElement = (
     ? elementsMap.get(boundElement.containerId)
     : null;
 
+  (boundElement as Mutable<typeof boundElement>).angle = (
+    isArrowElement(container) ? 0 : container?.angle ?? 0
+  ) as Radians;
+
   if (!container) {
     boundElement.containerId = null;
     return;
diff --git a/packages/excalidraw/wysiwyg/textWysiwyg.test.tsx b/packages/excalidraw/wysiwyg/textWysiwyg.test.tsx
index 959c5a0129..0ba1960d6a 100644
--- a/packages/excalidraw/wysiwyg/textWysiwyg.test.tsx
+++ b/packages/excalidraw/wysiwyg/textWysiwyg.test.tsx
@@ -31,6 +31,7 @@ import {
   mockBoundingClientRect,
   restoreOriginalGetBoundingClientRect,
 } from "../tests/test-utils";
+import { actionBindText } from "../actions";
 
 unmountComponent();
 
@@ -1568,5 +1569,101 @@ describe("textWysiwyg", () => {
       expect(text.containerId).toBe(null);
       expect(text.text).toBe("Excalidraw");
     });
+
+    it("should reset the text element angle to the container's when binding to rotated non-arrow container", async () => {
+      const text = API.createElement({
+        type: "text",
+        text: "Hello World!",
+        angle: 45,
+      });
+      const rectangle = API.createElement({
+        type: "rectangle",
+        width: 90,
+        height: 75,
+        angle: 30,
+      });
+
+      API.setElements([rectangle, text]);
+
+      API.setSelectedElements([rectangle, text]);
+
+      h.app.actionManager.executeAction(actionBindText);
+
+      expect(text.angle).toBe(30);
+      expect(rectangle.angle).toBe(30);
+    });
+
+    it("should reset the text element angle to 0 when binding to rotated arrow container", async () => {
+      const text = API.createElement({
+        type: "text",
+        text: "Hello World!",
+        angle: 45,
+      });
+      const arrow = API.createElement({
+        type: "arrow",
+        width: 90,
+        height: 75,
+        angle: 30,
+      });
+
+      API.setElements([arrow, text]);
+
+      API.setSelectedElements([arrow, text]);
+
+      h.app.actionManager.executeAction(actionBindText);
+
+      expect(text.angle).toBe(0);
+      expect(arrow.angle).toBe(30);
+    });
+
+    it("should keep the text label at 0 degrees when used as an arrow label", async () => {
+      const arrow = API.createElement({
+        type: "arrow",
+        width: 90,
+        height: 75,
+        angle: 30,
+      });
+
+      API.setElements([arrow]);
+      API.setSelectedElements([arrow]);
+
+      mouse.doubleClickAt(
+        arrow.x + arrow.width / 2,
+        arrow.y + arrow.height / 2,
+      );
+
+      const editor = await getTextEditor(textEditorSelector, true);
+
+      updateTextEditor(editor, "Hello World!");
+
+      Keyboard.exitTextEditor(editor);
+
+      expect(h.elements[1].angle).toBe(0);
+    });
+
+    it("should keep the text label at the same degrees when used as a non-arrow label", async () => {
+      const rectangle = API.createElement({
+        type: "rectangle",
+        width: 90,
+        height: 75,
+        angle: 30,
+      });
+
+      API.setElements([rectangle]);
+      API.setSelectedElements([rectangle]);
+
+      mouse.doubleClickAt(
+        rectangle.x + rectangle.width / 2,
+        rectangle.y + rectangle.height / 2,
+      );
+
+      const editor = await getTextEditor(textEditorSelector, true);
+
+      updateTextEditor(editor, "Hello World!");
+
+      Keyboard.exitTextEditor(editor);
+
+      expect(h.elements[1].angle).toBe(30);
+    });
   });
 });

From 6fe7de802014d0c967e3b839ccda7711b1028029 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rub=C3=A9n=20Norte?= <rubennorte@gmail.com>
Date: Mon, 14 Apr 2025 20:25:18 +0100
Subject: [PATCH 15/23] fix: Add DOCTYPE and XML preamble in exported SVG
 documents (#9386)

* Add DOCTYPE and XML preamble in exported SVG documents

* Update packages/excalidraw/data/index.ts

---------

Co-authored-by: David Luzar <5153846+dwelle@users.noreply.github.com>
---
 packages/common/src/constants.ts  | 3 +++
 packages/excalidraw/data/index.ts | 7 ++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/common/src/constants.ts b/packages/common/src/constants.ts
index 7eb36d5d96..cd3bd7a157 100644
--- a/packages/common/src/constants.ts
+++ b/packages/common/src/constants.ts
@@ -319,6 +319,9 @@ export const DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT = 1440;
 export const MAX_ALLOWED_FILE_BYTES = 4 * 1024 * 1024;
 
 export const SVG_NS = "http://www.w3.org/2000/svg";
+export const SVG_DOCUMENT_PREAMBLE = `<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+`;
 
 export const ENCRYPTION_KEY_BITS = 128;
 
diff --git a/packages/excalidraw/data/index.ts b/packages/excalidraw/data/index.ts
index ac8147e854..93d5f5677e 100644
--- a/packages/excalidraw/data/index.ts
+++ b/packages/excalidraw/data/index.ts
@@ -5,6 +5,7 @@ import {
   isFirefox,
   MIME_TYPES,
   cloneJSON,
+  SVG_DOCUMENT_PREAMBLE,
 } from "@excalidraw/common";
 
 import { getNonDeletedElements } from "@excalidraw/element";
@@ -134,7 +135,11 @@ export const exportCanvas = async (
     if (type === "svg") {
       return fileSave(
         svgPromise.then((svg) => {
-          return new Blob([svg.outerHTML], { type: MIME_TYPES.svg });
+          // adding SVG preamble so that older software parse the SVG file
+          // properly
+          return new Blob([SVG_DOCUMENT_PREAMBLE + svg.outerHTML], {
+            type: MIME_TYPES.svg,
+          });
         }),
         {
           description: "Export to SVG",

From 58f7d33d80198a2a80c6d3eb38b3432e062dfbea Mon Sep 17 00:00:00 2001
From: Ryan Di <ryan.weihao.di@gmail.com>
Date: Wed, 16 Apr 2025 00:58:45 +1000
Subject: [PATCH 16/23] perf: make eraser great again (#9352)

* perf: make eraser great again

* lint

* refactor and improve perf

* lint
---
 packages/excalidraw/components/App.tsx   | 127 ++----------
 packages/excalidraw/eraser/index.ts      | 239 +++++++++++++++++++++++
 packages/excalidraw/lasso/utils.ts       |   8 +-
 packages/excalidraw/tests/lasso.test.tsx |   3 +-
 packages/math/src/types.ts               |   2 +
 5 files changed, 259 insertions(+), 120 deletions(-)
 create mode 100644 packages/excalidraw/eraser/index.ts

diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx
index 976abfd765..242fd8e46e 100644
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@@ -454,7 +454,6 @@ import {
 import { Emitter } from "../emitter";
 import { ElementCanvasButtons } from "../components/ElementCanvasButtons";
 import { Store, CaptureUpdateAction } from "../store";
-import { AnimatedTrail } from "../animated-trail";
 import { LaserTrails } from "../laser-trails";
 import { withBatchedUpdates, withBatchedUpdatesThrottled } from "../reactUtils";
 import { textWysiwyg } from "../wysiwyg/textWysiwyg";
@@ -464,6 +463,8 @@ import { isMaybeMermaidDefinition } from "../mermaid";
 
 import { LassoTrail } from "../lasso";
 
+import { EraserTrail } from "../eraser";
+
 import { activeConfirmDialogAtom } from "./ActiveConfirmDialog";
 import BraveMeasureTextError from "./BraveMeasureTextError";
 import { ContextMenu, CONTEXT_MENU_SEPARATOR } from "./ContextMenu";
@@ -675,26 +676,7 @@ class App extends React.Component<AppProps, AppState> {
   animationFrameHandler = new AnimationFrameHandler();
 
   laserTrails = new LaserTrails(this.animationFrameHandler, this);
-  eraserTrail = new AnimatedTrail(this.animationFrameHandler, this, {
-    streamline: 0.2,
-    size: 5,
-    keepHead: true,
-    sizeMapping: (c) => {
-      const DECAY_TIME = 200;
-      const DECAY_LENGTH = 10;
-      const t = Math.max(0, 1 - (performance.now() - c.pressure) / DECAY_TIME);
-      const l =
-        (DECAY_LENGTH -
-          Math.min(DECAY_LENGTH, c.totalLength - c.currentIndex)) /
-        DECAY_LENGTH;
-
-      return Math.min(easeOut(l), easeOut(t));
-    },
-    fill: () =>
-      this.state.theme === THEME.LIGHT
-        ? "rgba(0, 0, 0, 0.2)"
-        : "rgba(255, 255, 255, 0.2)",
-  });
+  eraserTrail = new EraserTrail(this.animationFrameHandler, this);
   lassoTrail = new LassoTrail(this.animationFrameHandler, this);
 
   onChangeEmitter = new Emitter<
@@ -1676,8 +1658,8 @@ class App extends React.Component<AppProps, AppState> {
                         <SVGLayer
                           trails={[
                             this.laserTrails,
-                            this.eraserTrail,
                             this.lassoTrail,
+                            this.eraserTrail,
                           ]}
                         />
                         {selectedElements.length === 1 &&
@@ -5163,7 +5145,7 @@ class App extends React.Component<AppProps, AppState> {
     return elements;
   }
 
-  private getElementHitThreshold() {
+  getElementHitThreshold() {
     return DEFAULT_COLLISION_THRESHOLD / this.state.zoom.value;
   }
 
@@ -6219,101 +6201,16 @@ class App extends React.Component<AppProps, AppState> {
 
   private handleEraser = (
     event: PointerEvent,
-    pointerDownState: PointerDownState,
     scenePointer: { x: number; y: number },
   ) => {
-    this.eraserTrail.addPointToPath(scenePointer.x, scenePointer.y);
-
-    let didChange = false;
-
-    const processedGroups = new Set<ExcalidrawElement["id"]>();
-    const nonDeletedElements = this.scene.getNonDeletedElements();
-
-    const processElements = (elements: ExcalidrawElement[]) => {
-      for (const element of elements) {
-        if (element.locked) {
-          return;
-        }
-
-        if (event.altKey) {
-          if (this.elementsPendingErasure.delete(element.id)) {
-            didChange = true;
-          }
-        } else if (!this.elementsPendingErasure.has(element.id)) {
-          didChange = true;
-          this.elementsPendingErasure.add(element.id);
-        }
-
-        // (un)erase groups atomically
-        if (didChange && element.groupIds?.length) {
-          const shallowestGroupId = element.groupIds.at(-1)!;
-          if (!processedGroups.has(shallowestGroupId)) {
-            processedGroups.add(shallowestGroupId);
-            const elems = getElementsInGroup(
-              nonDeletedElements,
-              shallowestGroupId,
-            );
-            for (const elem of elems) {
-              if (event.altKey) {
-                this.elementsPendingErasure.delete(elem.id);
-              } else {
-                this.elementsPendingErasure.add(elem.id);
-              }
-            }
-          }
-        }
-      }
-    };
-
-    const distance = pointDistance(
-      pointFrom(pointerDownState.lastCoords.x, pointerDownState.lastCoords.y),
-      pointFrom(scenePointer.x, scenePointer.y),
+    const elementsToErase = this.eraserTrail.addPointToPath(
+      scenePointer.x,
+      scenePointer.y,
+      event.altKey,
     );
-    const threshold = this.getElementHitThreshold();
-    const p = { ...pointerDownState.lastCoords };
-    let samplingInterval = 0;
-    while (samplingInterval <= distance) {
-      const hitElements = this.getElementsAtPosition(p.x, p.y);
-      processElements(hitElements);
 
-      // Exit since we reached current point
-      if (samplingInterval === distance) {
-        break;
-      }
-
-      // Calculate next point in the line at a distance of sampling interval
-      samplingInterval = Math.min(samplingInterval + threshold, distance);
-
-      const distanceRatio = samplingInterval / distance;
-      const nextX = (1 - distanceRatio) * p.x + distanceRatio * scenePointer.x;
-      const nextY = (1 - distanceRatio) * p.y + distanceRatio * scenePointer.y;
-      p.x = nextX;
-      p.y = nextY;
-    }
-
-    pointerDownState.lastCoords.x = scenePointer.x;
-    pointerDownState.lastCoords.y = scenePointer.y;
-
-    if (didChange) {
-      for (const element of this.scene.getNonDeletedElements()) {
-        if (
-          isBoundToContainer(element) &&
-          (this.elementsPendingErasure.has(element.id) ||
-            this.elementsPendingErasure.has(element.containerId))
-        ) {
-          if (event.altKey) {
-            this.elementsPendingErasure.delete(element.id);
-            this.elementsPendingErasure.delete(element.containerId);
-          } else {
-            this.elementsPendingErasure.add(element.id);
-            this.elementsPendingErasure.add(element.containerId);
-          }
-        }
-      }
-
-      this.elementsPendingErasure = new Set(this.elementsPendingErasure);
-      this.triggerRender();
-    }
+    this.elementsPendingErasure = new Set(elementsToErase);
+    this.triggerRender();
   };
 
   // set touch moving for mobile context menu
@@ -8159,7 +8056,7 @@ class App extends React.Component<AppProps, AppState> {
       }
 
       if (isEraserActive(this.state)) {
-        this.handleEraser(event, pointerDownState, pointerCoords);
+        this.handleEraser(event, pointerCoords);
         return;
       }
 
diff --git a/packages/excalidraw/eraser/index.ts b/packages/excalidraw/eraser/index.ts
new file mode 100644
index 0000000000..a9f9103f55
--- /dev/null
+++ b/packages/excalidraw/eraser/index.ts
@@ -0,0 +1,239 @@
+import { arrayToMap, easeOut, THEME } from "@excalidraw/common";
+import { getElementLineSegments } from "@excalidraw/element/bounds";
+import {
+  lineSegment,
+  lineSegmentIntersectionPoints,
+  pointFrom,
+} from "@excalidraw/math";
+
+import { getElementsInGroup } from "@excalidraw/element/groups";
+
+import { getElementShape } from "@excalidraw/element/shapes";
+import { shouldTestInside } from "@excalidraw/element/collision";
+import { isPointInShape } from "@excalidraw/utils/collision";
+import {
+  hasBoundTextElement,
+  isBoundToContainer,
+} from "@excalidraw/element/typeChecks";
+import { getBoundTextElementId } from "@excalidraw/element/textElement";
+
+import type { GeometricShape } from "@excalidraw/utils/shape";
+import type {
+  ElementsSegmentsMap,
+  GlobalPoint,
+  LineSegment,
+} from "@excalidraw/math/types";
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+
+import { AnimatedTrail } from "../animated-trail";
+
+import type { AnimationFrameHandler } from "../animation-frame-handler";
+
+import type App from "../components/App";
+
+// just enough to form a segment; this is sufficient for eraser
+const POINTS_ON_TRAIL = 2;
+
+export class EraserTrail extends AnimatedTrail {
+  private elementsToErase: Set<ExcalidrawElement["id"]> = new Set();
+  private groupsToErase: Set<ExcalidrawElement["id"]> = new Set();
+  private segmentsCache: Map<string, LineSegment<GlobalPoint>[]> = new Map();
+  private geometricShapesCache: Map<string, GeometricShape<GlobalPoint>> =
+    new Map();
+
+  constructor(animationFrameHandler: AnimationFrameHandler, app: App) {
+    super(animationFrameHandler, app, {
+      streamline: 0.2,
+      size: 5,
+      keepHead: true,
+      sizeMapping: (c) => {
+        const DECAY_TIME = 200;
+        const DECAY_LENGTH = 10;
+        const t = Math.max(
+          0,
+          1 - (performance.now() - c.pressure) / DECAY_TIME,
+        );
+        const l =
+          (DECAY_LENGTH -
+            Math.min(DECAY_LENGTH, c.totalLength - c.currentIndex)) /
+          DECAY_LENGTH;
+
+        return Math.min(easeOut(l), easeOut(t));
+      },
+      fill: () =>
+        app.state.theme === THEME.LIGHT
+          ? "rgba(0, 0, 0, 0.2)"
+          : "rgba(255, 255, 255, 0.2)",
+    });
+  }
+
+  startPath(x: number, y: number): void {
+    this.endPath();
+    super.startPath(x, y);
+    this.elementsToErase.clear();
+  }
+
+  addPointToPath(x: number, y: number, restore = false) {
+    super.addPointToPath(x, y);
+
+    const elementsToEraser = this.updateElementsToBeErased(restore);
+
+    return elementsToEraser;
+  }
+
+  private updateElementsToBeErased(restoreToErase?: boolean) {
+    let eraserPath: GlobalPoint[] =
+      super
+        .getCurrentTrail()
+        ?.originalPoints?.map((p) => pointFrom<GlobalPoint>(p[0], p[1])) || [];
+
+    // for efficiency and avoid unnecessary calculations,
+    // take only POINTS_ON_TRAIL points to form some number of segments
+    eraserPath = eraserPath?.slice(eraserPath.length - POINTS_ON_TRAIL);
+
+    const visibleElementsMap = arrayToMap(this.app.visibleElements);
+
+    const pathSegments = eraserPath.reduce((acc, point, index) => {
+      if (index === 0) {
+        return acc;
+      }
+      acc.push(lineSegment(eraserPath[index - 1], point));
+      return acc;
+    }, [] as LineSegment<GlobalPoint>[]);
+
+    if (pathSegments.length === 0) {
+      return [];
+    }
+
+    for (const element of this.app.visibleElements) {
+      // restore only if already added to the to-be-erased set
+      if (restoreToErase && this.elementsToErase.has(element.id)) {
+        const intersects = eraserTest(
+          pathSegments,
+          element,
+          this.segmentsCache,
+          this.geometricShapesCache,
+          visibleElementsMap,
+          this.app,
+        );
+
+        if (intersects) {
+          const shallowestGroupId = element.groupIds.at(-1)!;
+
+          if (this.groupsToErase.has(shallowestGroupId)) {
+            const elementsInGroup = getElementsInGroup(
+              this.app.scene.getNonDeletedElementsMap(),
+              shallowestGroupId,
+            );
+            for (const elementInGroup of elementsInGroup) {
+              this.elementsToErase.delete(elementInGroup.id);
+            }
+            this.groupsToErase.delete(shallowestGroupId);
+          }
+
+          if (isBoundToContainer(element)) {
+            this.elementsToErase.delete(element.containerId);
+          }
+
+          if (hasBoundTextElement(element)) {
+            const boundText = getBoundTextElementId(element);
+
+            if (boundText) {
+              this.elementsToErase.delete(boundText);
+            }
+          }
+
+          this.elementsToErase.delete(element.id);
+        }
+      } else if (!restoreToErase && !this.elementsToErase.has(element.id)) {
+        const intersects = eraserTest(
+          pathSegments,
+          element,
+          this.segmentsCache,
+          this.geometricShapesCache,
+          visibleElementsMap,
+          this.app,
+        );
+
+        if (intersects) {
+          const shallowestGroupId = element.groupIds.at(-1)!;
+
+          if (!this.groupsToErase.has(shallowestGroupId)) {
+            const elementsInGroup = getElementsInGroup(
+              this.app.scene.getNonDeletedElementsMap(),
+              shallowestGroupId,
+            );
+
+            for (const elementInGroup of elementsInGroup) {
+              this.elementsToErase.add(elementInGroup.id);
+            }
+            this.groupsToErase.add(shallowestGroupId);
+          }
+
+          if (hasBoundTextElement(element)) {
+            const boundText = getBoundTextElementId(element);
+
+            if (boundText) {
+              this.elementsToErase.add(boundText);
+            }
+          }
+
+          if (isBoundToContainer(element)) {
+            this.elementsToErase.add(element.containerId);
+          }
+
+          this.elementsToErase.add(element.id);
+        }
+      }
+    }
+
+    return Array.from(this.elementsToErase);
+  }
+
+  endPath(): void {
+    super.endPath();
+    super.clearTrails();
+    this.elementsToErase.clear();
+    this.groupsToErase.clear();
+    this.segmentsCache.clear();
+  }
+}
+
+const eraserTest = (
+  pathSegments: LineSegment<GlobalPoint>[],
+  element: ExcalidrawElement,
+  elementsSegments: ElementsSegmentsMap,
+  shapesCache = new Map<string, GeometricShape<GlobalPoint>>(),
+  visibleElementsMap = new Map<string, ExcalidrawElement>(),
+  app: App,
+): boolean => {
+  let shape = shapesCache.get(element.id);
+
+  if (!shape) {
+    shape = getElementShape<GlobalPoint>(element, visibleElementsMap);
+    shapesCache.set(element.id, shape);
+  }
+
+  const lastPoint = pathSegments[pathSegments.length - 1][1];
+  if (shouldTestInside(element) && isPointInShape(lastPoint, shape)) {
+    return true;
+  }
+
+  let elementSegments = elementsSegments.get(element.id);
+
+  if (!elementSegments) {
+    elementSegments = getElementLineSegments(element, visibleElementsMap);
+    elementsSegments.set(element.id, elementSegments);
+  }
+
+  return pathSegments.some((pathSegment) =>
+    elementSegments?.some(
+      (elementSegment) =>
+        lineSegmentIntersectionPoints(
+          pathSegment,
+          elementSegment,
+          app.getElementHitThreshold(),
+        ) !== null,
+    ),
+  );
+};
diff --git a/packages/excalidraw/lasso/utils.ts b/packages/excalidraw/lasso/utils.ts
index f5a7eefdc9..d05f39998a 100644
--- a/packages/excalidraw/lasso/utils.ts
+++ b/packages/excalidraw/lasso/utils.ts
@@ -7,11 +7,13 @@ import {
   polygonIncludesPointNonZero,
 } from "@excalidraw/math";
 
-import type { GlobalPoint, LineSegment } from "@excalidraw/math/types";
+import type {
+  ElementsSegmentsMap,
+  GlobalPoint,
+  LineSegment,
+} from "@excalidraw/math/types";
 import type { ExcalidrawElement } from "@excalidraw/element/types";
 
-export type ElementsSegmentsMap = Map<string, LineSegment<GlobalPoint>[]>;
-
 export const getLassoSelectedElementIds = (input: {
   lassoPath: GlobalPoint[];
   elements: readonly ExcalidrawElement[];
diff --git a/packages/excalidraw/tests/lasso.test.tsx b/packages/excalidraw/tests/lasso.test.tsx
index 00e0ec2b4d..aa32b13d61 100644
--- a/packages/excalidraw/tests/lasso.test.tsx
+++ b/packages/excalidraw/tests/lasso.test.tsx
@@ -19,6 +19,7 @@ import {
   type LocalPoint,
   pointFrom,
   type Radians,
+  type ElementsSegmentsMap,
 } from "@excalidraw/math";
 
 import { getElementLineSegments } from "@excalidraw/element/bounds";
@@ -33,8 +34,6 @@ import { getLassoSelectedElementIds } from "../lasso/utils";
 
 import { act, render } from "./test-utils";
 
-import type { ElementsSegmentsMap } from "../lasso/utils";
-
 const { h } = window;
 
 beforeEach(async () => {
diff --git a/packages/math/src/types.ts b/packages/math/src/types.ts
index a2a575bd7c..da7d5d6abd 100644
--- a/packages/math/src/types.ts
+++ b/packages/math/src/types.ts
@@ -138,3 +138,5 @@ export type Ellipse<Point extends GlobalPoint | LocalPoint> = {
 } & {
   _brand: "excalimath_ellipse";
 };
+
+export type ElementsSegmentsMap = Map<string, LineSegment<GlobalPoint>[]>;

From 0cf36d6b30fc84085aa903460a04d0d568518f30 Mon Sep 17 00:00:00 2001
From: David Luzar <5153846+dwelle@users.noreply.github.com>
Date: Wed, 16 Apr 2025 10:28:56 +0200
Subject: [PATCH 17/23] fix: erasing locked elements (#9400)

* fix: erasing locked elements

* signature tweaks
---
 packages/excalidraw/eraser/index.ts | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/excalidraw/eraser/index.ts b/packages/excalidraw/eraser/index.ts
index a9f9103f55..2ea668aef2 100644
--- a/packages/excalidraw/eraser/index.ts
+++ b/packages/excalidraw/eraser/index.ts
@@ -23,7 +23,7 @@ import type {
   GlobalPoint,
   LineSegment,
 } from "@excalidraw/math/types";
-import type { ExcalidrawElement } from "@excalidraw/element/types";
+import type { ElementsMap, ExcalidrawElement } from "@excalidraw/element/types";
 
 import { AnimatedTrail } from "../animated-trail";
 
@@ -91,7 +91,11 @@ export class EraserTrail extends AnimatedTrail {
     // take only POINTS_ON_TRAIL points to form some number of segments
     eraserPath = eraserPath?.slice(eraserPath.length - POINTS_ON_TRAIL);
 
-    const visibleElementsMap = arrayToMap(this.app.visibleElements);
+    const candidateElements = this.app.visibleElements.filter(
+      (el) => !el.locked,
+    );
+
+    const candidateElementsMap = arrayToMap(candidateElements);
 
     const pathSegments = eraserPath.reduce((acc, point, index) => {
       if (index === 0) {
@@ -105,7 +109,7 @@ export class EraserTrail extends AnimatedTrail {
       return [];
     }
 
-    for (const element of this.app.visibleElements) {
+    for (const element of candidateElements) {
       // restore only if already added to the to-be-erased set
       if (restoreToErase && this.elementsToErase.has(element.id)) {
         const intersects = eraserTest(
@@ -113,7 +117,7 @@ export class EraserTrail extends AnimatedTrail {
           element,
           this.segmentsCache,
           this.geometricShapesCache,
-          visibleElementsMap,
+          candidateElementsMap,
           this.app,
         );
 
@@ -151,7 +155,7 @@ export class EraserTrail extends AnimatedTrail {
           element,
           this.segmentsCache,
           this.geometricShapesCache,
-          visibleElementsMap,
+          candidateElementsMap,
           this.app,
         );
 
@@ -203,14 +207,14 @@ const eraserTest = (
   pathSegments: LineSegment<GlobalPoint>[],
   element: ExcalidrawElement,
   elementsSegments: ElementsSegmentsMap,
-  shapesCache = new Map<string, GeometricShape<GlobalPoint>>(),
-  visibleElementsMap = new Map<string, ExcalidrawElement>(),
+  shapesCache: Map<string, GeometricShape<GlobalPoint>>,
+  elementsMap: ElementsMap,
   app: App,
 ): boolean => {
   let shape = shapesCache.get(element.id);
 
   if (!shape) {
-    shape = getElementShape<GlobalPoint>(element, visibleElementsMap);
+    shape = getElementShape<GlobalPoint>(element, elementsMap);
     shapesCache.set(element.id, shape);
   }
 
@@ -222,7 +226,7 @@ const eraserTest = (
   let elementSegments = elementsSegments.get(element.id);
 
   if (!elementSegments) {
-    elementSegments = getElementLineSegments(element, visibleElementsMap);
+    elementSegments = getElementLineSegments(element, elementsMap);
     elementsSegments.set(element.id, elementSegments);
   }
 

From a5d69398266a993e590c020d5495e2e1b2f271e3 Mon Sep 17 00:00:00 2001
From: David Luzar <5153846+dwelle@users.noreply.github.com>
Date: Thu, 17 Apr 2025 16:08:07 +0200
Subject: [PATCH 18/23] fix: keep orig elem in place on alt-duplication (#9403)

* fix: keep orig elem in place on alt-duplication

* clarify comment

* fix: incorrect selection on duplicating labeled containers

* fix: duplicating within group outside frame should remove from group
---
 packages/element/src/binding.ts               | 244 ++----------------
 packages/element/src/duplicate.ts             | 137 +++++-----
 packages/element/src/frame.ts                 |  30 +--
 packages/element/src/selection.ts             |  54 +++-
 packages/element/tests/duplicate.test.tsx     | 225 ++++++++++++----
 .../actions/actionDuplicateSelection.tsx      | 101 +++-----
 packages/excalidraw/components/App.tsx        | 160 ++++++++----
 .../components/LibraryMenuItems.tsx           |   2 +-
 .../tests/__snapshots__/move.test.tsx.snap    |  72 +++---
 .../regressionTests.test.tsx.snap             | 114 ++++----
 packages/excalidraw/tests/clipboard.test.tsx  |  35 +++
 .../excalidraw/tests/cropElement.test.tsx     |   2 +-
 packages/excalidraw/types.ts                  |   6 +-
 13 files changed, 603 insertions(+), 579 deletions(-)

diff --git a/packages/element/src/binding.ts b/packages/element/src/binding.ts
index 5c32e8c81d..1d39ce2f06 100644
--- a/packages/element/src/binding.ts
+++ b/packages/element/src/binding.ts
@@ -56,7 +56,6 @@ import { getBoundTextElement, handleBindTextResize } from "./textElement";
 import {
   isArrowElement,
   isBindableElement,
-  isBindingElement,
   isBoundToContainer,
   isElbowArrow,
   isFixedPointBinding,
@@ -1409,19 +1408,19 @@ const getLinearElementEdgeCoors = (
 };
 
 export const fixDuplicatedBindingsAfterDuplication = (
-  newElements: ExcalidrawElement[],
-  oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>,
-  duplicatedElementsMap: NonDeletedSceneElementsMap,
+  duplicatedElements: ExcalidrawElement[],
+  origIdToDuplicateId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>,
+  duplicateElementsMap: NonDeletedSceneElementsMap,
 ) => {
-  for (const element of newElements) {
-    if ("boundElements" in element && element.boundElements) {
-      Object.assign(element, {
-        boundElements: element.boundElements.reduce(
+  for (const duplicateElement of duplicatedElements) {
+    if ("boundElements" in duplicateElement && duplicateElement.boundElements) {
+      Object.assign(duplicateElement, {
+        boundElements: duplicateElement.boundElements.reduce(
           (
             acc: Mutable<NonNullable<ExcalidrawElement["boundElements"]>>,
             binding,
           ) => {
-            const newBindingId = oldIdToDuplicatedId.get(binding.id);
+            const newBindingId = origIdToDuplicateId.get(binding.id);
             if (newBindingId) {
               acc.push({ ...binding, id: newBindingId });
             }
@@ -1432,46 +1431,47 @@ export const fixDuplicatedBindingsAfterDuplication = (
       });
     }
 
-    if ("containerId" in element && element.containerId) {
-      Object.assign(element, {
-        containerId: oldIdToDuplicatedId.get(element.containerId) ?? null,
+    if ("containerId" in duplicateElement && duplicateElement.containerId) {
+      Object.assign(duplicateElement, {
+        containerId:
+          origIdToDuplicateId.get(duplicateElement.containerId) ?? null,
       });
     }
 
-    if ("endBinding" in element && element.endBinding) {
-      const newEndBindingId = oldIdToDuplicatedId.get(
-        element.endBinding.elementId,
+    if ("endBinding" in duplicateElement && duplicateElement.endBinding) {
+      const newEndBindingId = origIdToDuplicateId.get(
+        duplicateElement.endBinding.elementId,
       );
-      Object.assign(element, {
+      Object.assign(duplicateElement, {
         endBinding: newEndBindingId
           ? {
-              ...element.endBinding,
+              ...duplicateElement.endBinding,
               elementId: newEndBindingId,
             }
           : null,
       });
     }
-    if ("startBinding" in element && element.startBinding) {
-      const newEndBindingId = oldIdToDuplicatedId.get(
-        element.startBinding.elementId,
+    if ("startBinding" in duplicateElement && duplicateElement.startBinding) {
+      const newEndBindingId = origIdToDuplicateId.get(
+        duplicateElement.startBinding.elementId,
       );
-      Object.assign(element, {
+      Object.assign(duplicateElement, {
         startBinding: newEndBindingId
           ? {
-              ...element.startBinding,
+              ...duplicateElement.startBinding,
               elementId: newEndBindingId,
             }
           : null,
       });
     }
 
-    if (isElbowArrow(element)) {
+    if (isElbowArrow(duplicateElement)) {
       Object.assign(
-        element,
-        updateElbowArrowPoints(element, duplicatedElementsMap, {
+        duplicateElement,
+        updateElbowArrowPoints(duplicateElement, duplicateElementsMap, {
           points: [
-            element.points[0],
-            element.points[element.points.length - 1],
+            duplicateElement.points[0],
+            duplicateElement.points[duplicateElement.points.length - 1],
           ],
         }),
       );
@@ -1479,196 +1479,6 @@ export const fixDuplicatedBindingsAfterDuplication = (
   }
 };
 
-const fixReversedBindingsForBindables = (
-  original: ExcalidrawBindableElement,
-  duplicate: ExcalidrawBindableElement,
-  originalElements: Map<string, ExcalidrawElement>,
-  elementsWithClones: ExcalidrawElement[],
-  oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>,
-) => {
-  original.boundElements?.forEach((binding, idx) => {
-    if (binding.type !== "arrow") {
-      return;
-    }
-
-    const oldArrow = elementsWithClones.find((el) => el.id === binding.id);
-
-    if (!isBindingElement(oldArrow)) {
-      return;
-    }
-
-    if (originalElements.has(binding.id)) {
-      // Linked arrow is in the selection, so find the duplicate pair
-      const newArrowId = oldIdToDuplicatedId.get(binding.id) ?? binding.id;
-      const newArrow = elementsWithClones.find(
-        (el) => el.id === newArrowId,
-      )! as ExcalidrawArrowElement;
-
-      mutateElement(newArrow, {
-        startBinding:
-          oldArrow.startBinding?.elementId === binding.id
-            ? {
-                ...oldArrow.startBinding,
-                elementId: duplicate.id,
-              }
-            : newArrow.startBinding,
-        endBinding:
-          oldArrow.endBinding?.elementId === binding.id
-            ? {
-                ...oldArrow.endBinding,
-                elementId: duplicate.id,
-              }
-            : newArrow.endBinding,
-      });
-      mutateElement(duplicate, {
-        boundElements: [
-          ...(duplicate.boundElements ?? []).filter(
-            (el) => el.id !== binding.id && el.id !== newArrowId,
-          ),
-          {
-            type: "arrow",
-            id: newArrowId,
-          },
-        ],
-      });
-    } else {
-      // Linked arrow is outside the selection,
-      // so we move the binding to the duplicate
-      mutateElement(oldArrow, {
-        startBinding:
-          oldArrow.startBinding?.elementId === original.id
-            ? {
-                ...oldArrow.startBinding,
-                elementId: duplicate.id,
-              }
-            : oldArrow.startBinding,
-        endBinding:
-          oldArrow.endBinding?.elementId === original.id
-            ? {
-                ...oldArrow.endBinding,
-                elementId: duplicate.id,
-              }
-            : oldArrow.endBinding,
-      });
-      mutateElement(duplicate, {
-        boundElements: [
-          ...(duplicate.boundElements ?? []),
-          {
-            type: "arrow",
-            id: oldArrow.id,
-          },
-        ],
-      });
-      mutateElement(original, {
-        boundElements:
-          original.boundElements?.filter((_, i) => i !== idx) ?? null,
-      });
-    }
-  });
-};
-
-const fixReversedBindingsForArrows = (
-  original: ExcalidrawArrowElement,
-  duplicate: ExcalidrawArrowElement,
-  originalElements: Map<string, ExcalidrawElement>,
-  bindingProp: "startBinding" | "endBinding",
-  oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>,
-  elementsWithClones: ExcalidrawElement[],
-) => {
-  const oldBindableId = original[bindingProp]?.elementId;
-
-  if (oldBindableId) {
-    if (originalElements.has(oldBindableId)) {
-      // Linked element is in the selection
-      const newBindableId =
-        oldIdToDuplicatedId.get(oldBindableId) ?? oldBindableId;
-      const newBindable = elementsWithClones.find(
-        (el) => el.id === newBindableId,
-      ) as ExcalidrawBindableElement;
-      mutateElement(duplicate, {
-        [bindingProp]: {
-          ...original[bindingProp],
-          elementId: newBindableId,
-        },
-      });
-      mutateElement(newBindable, {
-        boundElements: [
-          ...(newBindable.boundElements ?? []).filter(
-            (el) => el.id !== original.id && el.id !== duplicate.id,
-          ),
-          {
-            id: duplicate.id,
-            type: "arrow",
-          },
-        ],
-      });
-    } else {
-      // Linked element is outside the selection
-      const originalBindable = elementsWithClones.find(
-        (el) => el.id === oldBindableId,
-      );
-      if (originalBindable) {
-        mutateElement(duplicate, {
-          [bindingProp]: original[bindingProp],
-        });
-        mutateElement(original, {
-          [bindingProp]: null,
-        });
-        mutateElement(originalBindable, {
-          boundElements: [
-            ...(originalBindable.boundElements?.filter(
-              (el) => el.id !== original.id,
-            ) ?? []),
-            {
-              id: duplicate.id,
-              type: "arrow",
-            },
-          ],
-        });
-      }
-    }
-  }
-};
-
-export const fixReversedBindings = (
-  originalElements: Map<string, ExcalidrawElement>,
-  elementsWithClones: ExcalidrawElement[],
-  oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>,
-) => {
-  for (const original of originalElements.values()) {
-    const duplicate = elementsWithClones.find(
-      (el) => el.id === oldIdToDuplicatedId.get(original.id),
-    )!;
-
-    if (isBindableElement(original) && isBindableElement(duplicate)) {
-      fixReversedBindingsForBindables(
-        original,
-        duplicate,
-        originalElements,
-        elementsWithClones,
-        oldIdToDuplicatedId,
-      );
-    } else if (isArrowElement(original) && isArrowElement(duplicate)) {
-      fixReversedBindingsForArrows(
-        original,
-        duplicate,
-        originalElements,
-        "startBinding",
-        oldIdToDuplicatedId,
-        elementsWithClones,
-      );
-      fixReversedBindingsForArrows(
-        original,
-        duplicate,
-        originalElements,
-        "endBinding",
-        oldIdToDuplicatedId,
-        elementsWithClones,
-      );
-    }
-  }
-};
-
 export const fixBindingsAfterDeletion = (
   sceneElements: readonly ExcalidrawElement[],
   deletedElements: readonly ExcalidrawElement[],
diff --git a/packages/element/src/duplicate.ts b/packages/element/src/duplicate.ts
index ded1fd26c1..c2cee4c089 100644
--- a/packages/element/src/duplicate.ts
+++ b/packages/element/src/duplicate.ts
@@ -36,10 +36,7 @@ import {
 
 import { getBoundTextElement, getContainerElement } from "./textElement";
 
-import {
-  fixDuplicatedBindingsAfterDuplication,
-  fixReversedBindings,
-} from "./binding";
+import { fixDuplicatedBindingsAfterDuplication } from "./binding";
 
 import type {
   ElementsMap,
@@ -60,16 +57,14 @@ import type {
  *                               multiple elements at once, share this map
  *                               amongst all of them
  * @param element Element to duplicate
- * @param overrides Any element properties to override
  */
 export const duplicateElement = <TElement extends ExcalidrawElement>(
   editingGroupId: AppState["editingGroupId"],
   groupIdMapForOperation: Map<GroupId, GroupId>,
   element: TElement,
-  overrides?: Partial<TElement>,
   randomizeSeed?: boolean,
 ): Readonly<TElement> => {
-  let copy = deepCopyElement(element);
+  const copy = deepCopyElement(element);
 
   if (isTestEnv()) {
     __test__defineOrigId(copy, element.id);
@@ -92,9 +87,6 @@ export const duplicateElement = <TElement extends ExcalidrawElement>(
       return groupIdMapForOperation.get(groupId)!;
     },
   );
-  if (overrides) {
-    copy = Object.assign(copy, overrides);
-  }
   return copy;
 };
 
@@ -102,9 +94,14 @@ export const duplicateElements = (
   opts: {
     elements: readonly ExcalidrawElement[];
     randomizeSeed?: boolean;
-    overrides?: (
-      originalElement: ExcalidrawElement,
-    ) => Partial<ExcalidrawElement>;
+    overrides?: (data: {
+      duplicateElement: ExcalidrawElement;
+      origElement: ExcalidrawElement;
+      origIdToDuplicateId: Map<
+        ExcalidrawElement["id"],
+        ExcalidrawElement["id"]
+      >;
+    }) => Partial<ExcalidrawElement>;
   } & (
     | {
         /**
@@ -132,14 +129,6 @@ export const duplicateElements = (
           editingGroupId: AppState["editingGroupId"];
           selectedGroupIds: AppState["selectedGroupIds"];
         };
-        /**
-         * If true, duplicated elements are inserted _before_ specified
-         * elements. Case: alt-dragging elements to duplicate them.
-         *
-         * TODO: remove this once (if) we stop replacing the original element
-         * with the duplicated one in the scene array.
-         */
-        reverseOrder: boolean;
       }
   ),
 ) => {
@@ -153,8 +142,6 @@ export const duplicateElements = (
           selectedGroupIds: {},
         } as const);
 
-  const reverseOrder = opts.type === "in-place" ? opts.reverseOrder : false;
-
   // Ids of elements that have already been processed so we don't push them
   // into the array twice if we end up backtracking when retrieving
   // discontiguous group of elements (can happen due to a bug, or in edge
@@ -167,10 +154,17 @@ export const duplicateElements = (
   // loop over them.
   const processedIds = new Map<ExcalidrawElement["id"], true>();
   const groupIdMap = new Map();
-  const newElements: ExcalidrawElement[] = [];
-  const oldElements: ExcalidrawElement[] = [];
-  const oldIdToDuplicatedId = new Map();
-  const duplicatedElementsMap = new Map<string, ExcalidrawElement>();
+  const duplicatedElements: ExcalidrawElement[] = [];
+  const origElements: ExcalidrawElement[] = [];
+  const origIdToDuplicateId = new Map<
+    ExcalidrawElement["id"],
+    ExcalidrawElement["id"]
+  >();
+  const duplicateIdToOrigElement = new Map<
+    ExcalidrawElement["id"],
+    ExcalidrawElement
+  >();
+  const duplicateElementsMap = new Map<string, ExcalidrawElement>();
   const elementsMap = arrayToMap(elements) as ElementsMap;
   const _idsOfElementsToDuplicate =
     opts.type === "in-place"
@@ -188,7 +182,7 @@ export const duplicateElements = (
 
   elements = normalizeElementOrder(elements);
 
-  const elementsWithClones: ExcalidrawElement[] = elements.slice();
+  const elementsWithDuplicates: ExcalidrawElement[] = elements.slice();
 
   // helper functions
   // -------------------------------------------------------------------------
@@ -214,17 +208,17 @@ export const duplicateElements = (
           appState.editingGroupId,
           groupIdMap,
           element,
-          opts.overrides?.(element),
           opts.randomizeSeed,
         );
 
         processedIds.set(newElement.id, true);
 
-        duplicatedElementsMap.set(newElement.id, newElement);
-        oldIdToDuplicatedId.set(element.id, newElement.id);
+        duplicateElementsMap.set(newElement.id, newElement);
+        origIdToDuplicateId.set(element.id, newElement.id);
+        duplicateIdToOrigElement.set(newElement.id, element);
 
-        oldElements.push(element);
-        newElements.push(newElement);
+        origElements.push(element);
+        duplicatedElements.push(newElement);
 
         acc.push(newElement);
         return acc;
@@ -248,21 +242,12 @@ export const duplicateElements = (
       return;
     }
 
-    if (reverseOrder && index < 1) {
-      elementsWithClones.unshift(...castArray(elements));
+    if (index > elementsWithDuplicates.length - 1) {
+      elementsWithDuplicates.push(...castArray(elements));
       return;
     }
 
-    if (!reverseOrder && index > elementsWithClones.length - 1) {
-      elementsWithClones.push(...castArray(elements));
-      return;
-    }
-
-    elementsWithClones.splice(
-      index + (reverseOrder ? 0 : 1),
-      0,
-      ...castArray(elements),
-    );
+    elementsWithDuplicates.splice(index + 1, 0, ...castArray(elements));
   };
 
   const frameIdsToDuplicate = new Set(
@@ -294,13 +279,9 @@ export const duplicateElements = (
             : [element],
       );
 
-      const targetIndex = reverseOrder
-        ? elementsWithClones.findIndex((el) => {
-            return el.groupIds?.includes(groupId);
-          })
-        : findLastIndex(elementsWithClones, (el) => {
-            return el.groupIds?.includes(groupId);
-          });
+      const targetIndex = findLastIndex(elementsWithDuplicates, (el) => {
+        return el.groupIds?.includes(groupId);
+      });
 
       insertBeforeOrAfterIndex(targetIndex, copyElements(groupElements));
       continue;
@@ -318,7 +299,7 @@ export const duplicateElements = (
 
       const frameChildren = getFrameChildren(elements, frameId);
 
-      const targetIndex = findLastIndex(elementsWithClones, (el) => {
+      const targetIndex = findLastIndex(elementsWithDuplicates, (el) => {
         return el.frameId === frameId || el.id === frameId;
       });
 
@@ -335,7 +316,7 @@ export const duplicateElements = (
     if (hasBoundTextElement(element)) {
       const boundTextElement = getBoundTextElement(element, elementsMap);
 
-      const targetIndex = findLastIndex(elementsWithClones, (el) => {
+      const targetIndex = findLastIndex(elementsWithDuplicates, (el) => {
         return (
           el.id === element.id ||
           ("containerId" in el && el.containerId === element.id)
@@ -344,7 +325,7 @@ export const duplicateElements = (
 
       if (boundTextElement) {
         insertBeforeOrAfterIndex(
-          targetIndex + (reverseOrder ? -1 : 0),
+          targetIndex,
           copyElements([element, boundTextElement]),
         );
       } else {
@@ -357,7 +338,7 @@ export const duplicateElements = (
     if (isBoundToContainer(element)) {
       const container = getContainerElement(element, elementsMap);
 
-      const targetIndex = findLastIndex(elementsWithClones, (el) => {
+      const targetIndex = findLastIndex(elementsWithDuplicates, (el) => {
         return el.id === element.id || el.id === container?.id;
       });
 
@@ -377,7 +358,7 @@ export const duplicateElements = (
     // -------------------------------------------------------------------------
 
     insertBeforeOrAfterIndex(
-      findLastIndex(elementsWithClones, (el) => el.id === element.id),
+      findLastIndex(elementsWithDuplicates, (el) => el.id === element.id),
       copyElements(element),
     );
   }
@@ -385,28 +366,38 @@ export const duplicateElements = (
   // ---------------------------------------------------------------------------
 
   fixDuplicatedBindingsAfterDuplication(
-    newElements,
-    oldIdToDuplicatedId,
-    duplicatedElementsMap as NonDeletedSceneElementsMap,
+    duplicatedElements,
+    origIdToDuplicateId,
+    duplicateElementsMap as NonDeletedSceneElementsMap,
   );
 
-  if (reverseOrder) {
-    fixReversedBindings(
-      _idsOfElementsToDuplicate,
-      elementsWithClones,
-      oldIdToDuplicatedId,
-    );
-  }
-
   bindElementsToFramesAfterDuplication(
-    elementsWithClones,
-    oldElements,
-    oldIdToDuplicatedId,
+    elementsWithDuplicates,
+    origElements,
+    origIdToDuplicateId,
   );
 
+  if (opts.overrides) {
+    for (const duplicateElement of duplicatedElements) {
+      const origElement = duplicateIdToOrigElement.get(duplicateElement.id);
+      if (origElement) {
+        Object.assign(
+          duplicateElement,
+          opts.overrides({
+            duplicateElement,
+            origElement,
+            origIdToDuplicateId,
+          }),
+        );
+      }
+    }
+  }
+
   return {
-    newElements,
-    elementsWithClones,
+    duplicatedElements,
+    duplicateElementsMap,
+    elementsWithDuplicates,
+    origIdToDuplicateId,
   };
 };
 
diff --git a/packages/element/src/frame.ts b/packages/element/src/frame.ts
index 7f40148b7a..664c8d98fc 100644
--- a/packages/element/src/frame.ts
+++ b/packages/element/src/frame.ts
@@ -41,30 +41,28 @@ import type {
 // --------------------------- Frame State ------------------------------------
 export const bindElementsToFramesAfterDuplication = (
   nextElements: readonly ExcalidrawElement[],
-  oldElements: readonly ExcalidrawElement[],
-  oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>,
+  origElements: readonly ExcalidrawElement[],
+  origIdToDuplicateId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>,
 ) => {
   const nextElementMap = arrayToMap(nextElements) as Map<
     ExcalidrawElement["id"],
     ExcalidrawElement
   >;
 
-  for (const element of oldElements) {
+  for (const element of origElements) {
     if (element.frameId) {
       // use its frameId to get the new frameId
-      const nextElementId = oldIdToDuplicatedId.get(element.id);
-      const nextFrameId = oldIdToDuplicatedId.get(element.frameId);
-      if (nextElementId) {
-        const nextElement = nextElementMap.get(nextElementId);
-        if (nextElement) {
-          mutateElement(
-            nextElement,
-            {
-              frameId: nextFrameId ?? element.frameId,
-            },
-            false,
-          );
-        }
+      const nextElementId = origIdToDuplicateId.get(element.id);
+      const nextFrameId = origIdToDuplicateId.get(element.frameId);
+      const nextElement = nextElementId && nextElementMap.get(nextElementId);
+      if (nextElement) {
+        mutateElement(
+          nextElement,
+          {
+            frameId: nextFrameId ?? null,
+          },
+          false,
+        );
       }
     }
   }
diff --git a/packages/element/src/selection.ts b/packages/element/src/selection.ts
index a767039208..e07c96d383 100644
--- a/packages/element/src/selection.ts
+++ b/packages/element/src/selection.ts
@@ -7,13 +7,20 @@ import type {
 
 import { getElementAbsoluteCoords, getElementBounds } from "./bounds";
 import { isElementInViewport } from "./sizeHelpers";
-import { isBoundToContainer, isFrameLikeElement } from "./typeChecks";
+import {
+  isBoundToContainer,
+  isFrameLikeElement,
+  isLinearElement,
+} from "./typeChecks";
 import {
   elementOverlapsWithFrame,
   getContainingFrame,
   getFrameChildren,
 } from "./frame";
 
+import { LinearElementEditor } from "./linearElementEditor";
+import { selectGroupsForSelectedElements } from "./groups";
+
 import type {
   ElementsMap,
   ElementsMapOrArray,
@@ -254,3 +261,48 @@ export const makeNextSelectedElementIds = (
 
   return nextSelectedElementIds;
 };
+
+const _getLinearElementEditor = (
+  targetElements: readonly ExcalidrawElement[],
+) => {
+  const linears = targetElements.filter(isLinearElement);
+  if (linears.length === 1) {
+    const linear = linears[0];
+    const boundElements = linear.boundElements?.map((def) => def.id) ?? [];
+    const onlySingleLinearSelected = targetElements.every(
+      (el) => el.id === linear.id || boundElements.includes(el.id),
+    );
+
+    if (onlySingleLinearSelected) {
+      return new LinearElementEditor(linear);
+    }
+  }
+
+  return null;
+};
+
+export const getSelectionStateForElements = (
+  targetElements: readonly ExcalidrawElement[],
+  allElements: readonly NonDeletedExcalidrawElement[],
+  appState: AppState,
+) => {
+  return {
+    selectedLinearElement: _getLinearElementEditor(targetElements),
+    ...selectGroupsForSelectedElements(
+      {
+        editingGroupId: appState.editingGroupId,
+        selectedElementIds: excludeElementsInFramesFromSelection(
+          targetElements,
+        ).reduce((acc: Record<ExcalidrawElement["id"], true>, element) => {
+          if (!isBoundToContainer(element)) {
+            acc[element.id] = true;
+          }
+          return acc;
+        }, {}),
+      },
+      allElements,
+      appState,
+      null,
+    ),
+  };
+};
diff --git a/packages/element/tests/duplicate.test.tsx b/packages/element/tests/duplicate.test.tsx
index 7492bcc586..409200b6e6 100644
--- a/packages/element/tests/duplicate.test.tsx
+++ b/packages/element/tests/duplicate.test.tsx
@@ -67,7 +67,7 @@ describe("duplicating single elements", () => {
       points: [pointFrom<LocalPoint>(1, 2), pointFrom<LocalPoint>(3, 4)],
     });
 
-    const copy = duplicateElement(null, new Map(), element, undefined, true);
+    const copy = duplicateElement(null, new Map(), element, true);
 
     assertCloneObjects(element, copy);
 
@@ -173,7 +173,7 @@ describe("duplicating multiple elements", () => {
     // -------------------------------------------------------------------------
 
     const origElements = [rectangle1, text1, arrow1, arrow2, text2] as const;
-    const { newElements: clonedElements } = duplicateElements({
+    const { duplicatedElements } = duplicateElements({
       type: "everything",
       elements: origElements,
     });
@@ -181,10 +181,10 @@ describe("duplicating multiple elements", () => {
     // generic id in-equality checks
     // --------------------------------------------------------------------------
     expect(origElements.map((e) => e.type)).toEqual(
-      clonedElements.map((e) => e.type),
+      duplicatedElements.map((e) => e.type),
     );
     origElements.forEach((origElement, idx) => {
-      const clonedElement = clonedElements[idx];
+      const clonedElement = duplicatedElements[idx];
       expect(origElement).toEqual(
         expect.objectContaining({
           id: expect.not.stringMatching(clonedElement.id),
@@ -217,12 +217,12 @@ describe("duplicating multiple elements", () => {
     });
     // --------------------------------------------------------------------------
 
-    const clonedArrows = clonedElements.filter(
+    const clonedArrows = duplicatedElements.filter(
       (e) => e.type === "arrow",
     ) as ExcalidrawLinearElement[];
 
     const [clonedRectangle, clonedText1, , clonedArrow2, clonedArrowLabel] =
-      clonedElements as any as typeof origElements;
+      duplicatedElements as any as typeof origElements;
 
     expect(clonedText1.containerId).toBe(clonedRectangle.id);
     expect(
@@ -327,10 +327,10 @@ describe("duplicating multiple elements", () => {
     // -------------------------------------------------------------------------
 
     const origElements = [rectangle1, text1, arrow1, arrow2, arrow3] as const;
-    const { newElements: clonedElements } = duplicateElements({
+    const duplicatedElements = duplicateElements({
       type: "everything",
       elements: origElements,
-    }) as any as { newElements: typeof origElements };
+    }).duplicatedElements as any as typeof origElements;
 
     const [
       clonedRectangle,
@@ -338,7 +338,7 @@ describe("duplicating multiple elements", () => {
       clonedArrow1,
       clonedArrow2,
       clonedArrow3,
-    ] = clonedElements;
+    ] = duplicatedElements;
 
     expect(clonedRectangle.boundElements).toEqual([
       { id: clonedArrow1.id, type: "arrow" },
@@ -374,12 +374,12 @@ describe("duplicating multiple elements", () => {
       });
 
       const origElements = [rectangle1, rectangle2, rectangle3] as const;
-      const { newElements: clonedElements } = duplicateElements({
+      const { duplicatedElements } = duplicateElements({
         type: "everything",
         elements: origElements,
-      }) as any as { newElements: typeof origElements };
+      });
       const [clonedRectangle1, clonedRectangle2, clonedRectangle3] =
-        clonedElements;
+        duplicatedElements;
 
       expect(rectangle1.groupIds[0]).not.toBe(clonedRectangle1.groupIds[0]);
       expect(rectangle2.groupIds[0]).not.toBe(clonedRectangle2.groupIds[0]);
@@ -399,7 +399,7 @@ describe("duplicating multiple elements", () => {
       });
 
       const {
-        newElements: [clonedRectangle1],
+        duplicatedElements: [clonedRectangle1],
       } = duplicateElements({ type: "everything", elements: [rectangle1] });
 
       expect(typeof clonedRectangle1.groupIds[0]).toBe("string");
@@ -408,6 +408,117 @@ describe("duplicating multiple elements", () => {
   });
 });
 
+describe("group-related duplication", () => {
+  beforeEach(async () => {
+    await render(<Excalidraw />);
+  });
+
+  it("action-duplicating within group", async () => {
+    const rectangle1 = API.createElement({
+      type: "rectangle",
+      x: 0,
+      y: 0,
+      groupIds: ["group1"],
+    });
+    const rectangle2 = API.createElement({
+      type: "rectangle",
+      x: 10,
+      y: 10,
+      groupIds: ["group1"],
+    });
+
+    API.setElements([rectangle1, rectangle2]);
+    API.setSelectedElements([rectangle2], "group1");
+
+    act(() => {
+      h.app.actionManager.executeAction(actionDuplicateSelection);
+    });
+
+    assertElements(h.elements, [
+      { id: rectangle1.id },
+      { id: rectangle2.id },
+      { [ORIG_ID]: rectangle2.id, selected: true, groupIds: ["group1"] },
+    ]);
+    expect(h.state.editingGroupId).toBe("group1");
+  });
+
+  it("alt-duplicating within group", async () => {
+    const rectangle1 = API.createElement({
+      type: "rectangle",
+      x: 0,
+      y: 0,
+      groupIds: ["group1"],
+    });
+    const rectangle2 = API.createElement({
+      type: "rectangle",
+      x: 10,
+      y: 10,
+      groupIds: ["group1"],
+    });
+
+    API.setElements([rectangle1, rectangle2]);
+    API.setSelectedElements([rectangle2], "group1");
+
+    Keyboard.withModifierKeys({ alt: true }, () => {
+      mouse.down(rectangle2.x + 5, rectangle2.y + 5);
+      mouse.up(rectangle2.x + 50, rectangle2.y + 50);
+    });
+
+    assertElements(h.elements, [
+      { id: rectangle1.id },
+      { id: rectangle2.id },
+      { [ORIG_ID]: rectangle2.id, selected: true, groupIds: ["group1"] },
+    ]);
+    expect(h.state.editingGroupId).toBe("group1");
+  });
+
+  it.skip("alt-duplicating within group away outside frame", () => {
+    const frame = API.createElement({
+      type: "frame",
+      x: 0,
+      y: 0,
+      width: 100,
+      height: 100,
+    });
+    const rectangle1 = API.createElement({
+      type: "rectangle",
+      x: 0,
+      y: 0,
+      width: 50,
+      height: 50,
+      groupIds: ["group1"],
+      frameId: frame.id,
+    });
+    const rectangle2 = API.createElement({
+      type: "rectangle",
+      x: 10,
+      y: 10,
+      width: 50,
+      height: 50,
+      groupIds: ["group1"],
+      frameId: frame.id,
+    });
+
+    API.setElements([frame, rectangle1, rectangle2]);
+    API.setSelectedElements([rectangle2], "group1");
+
+    Keyboard.withModifierKeys({ alt: true }, () => {
+      mouse.down(rectangle2.x + 5, rectangle2.y + 5);
+      mouse.up(frame.x + frame.width + 50, frame.y + frame.height + 50);
+    });
+
+    // console.log(h.elements);
+
+    assertElements(h.elements, [
+      { id: frame.id },
+      { id: rectangle1.id, frameId: frame.id },
+      { id: rectangle2.id, frameId: frame.id },
+      { [ORIG_ID]: rectangle2.id, selected: true, groupIds: [], frameId: null },
+    ]);
+    expect(h.state.editingGroupId).toBe(null);
+  });
+});
+
 describe("duplication z-order", () => {
   beforeEach(async () => {
     await render(<Excalidraw />);
@@ -503,8 +614,8 @@ describe("duplication z-order", () => {
     });
 
     assertElements(h.elements, [
-      { [ORIG_ID]: rectangle1.id },
-      { id: rectangle1.id, selected: true },
+      { id: rectangle1.id },
+      { [ORIG_ID]: rectangle1.id, selected: true },
       { id: rectangle2.id },
       { id: rectangle3.id },
     ]);
@@ -538,8 +649,8 @@ describe("duplication z-order", () => {
     assertElements(h.elements, [
       { id: rectangle1.id },
       { id: rectangle2.id },
-      { [ORIG_ID]: rectangle3.id },
-      { id: rectangle3.id, selected: true },
+      { id: rectangle3.id },
+      { [ORIG_ID]: rectangle3.id, selected: true },
     ]);
   });
 
@@ -569,8 +680,8 @@ describe("duplication z-order", () => {
     });
 
     assertElements(h.elements, [
-      { [ORIG_ID]: rectangle1.id },
-      { id: rectangle1.id, selected: true },
+      { id: rectangle1.id },
+      { [ORIG_ID]: rectangle1.id, selected: true },
       { id: rectangle2.id },
       { id: rectangle3.id },
     ]);
@@ -605,19 +716,19 @@ describe("duplication z-order", () => {
     });
 
     assertElements(h.elements, [
-      { [ORIG_ID]: rectangle1.id },
-      { [ORIG_ID]: rectangle2.id },
-      { [ORIG_ID]: rectangle3.id },
-      { id: rectangle1.id, selected: true },
-      { id: rectangle2.id, selected: true },
-      { id: rectangle3.id, selected: true },
+      { id: rectangle1.id },
+      { id: rectangle2.id },
+      { id: rectangle3.id },
+      { [ORIG_ID]: rectangle1.id, selected: true },
+      { [ORIG_ID]: rectangle2.id, selected: true },
+      { [ORIG_ID]: rectangle3.id, selected: true },
     ]);
   });
 
-  it("reverse-duplicating text container (in-order)", async () => {
+  it("alt-duplicating text container (in-order)", async () => {
     const [rectangle, text] = API.createTextContainer();
     API.setElements([rectangle, text]);
-    API.setSelectedElements([rectangle, text]);
+    API.setSelectedElements([rectangle]);
 
     Keyboard.withModifierKeys({ alt: true }, () => {
       mouse.down(rectangle.x + 5, rectangle.y + 5);
@@ -625,20 +736,20 @@ describe("duplication z-order", () => {
     });
 
     assertElements(h.elements, [
-      { [ORIG_ID]: rectangle.id },
+      { id: rectangle.id },
+      { id: text.id, containerId: rectangle.id },
+      { [ORIG_ID]: rectangle.id, selected: true },
       {
         [ORIG_ID]: text.id,
         containerId: getCloneByOrigId(rectangle.id)?.id,
       },
-      { id: rectangle.id, selected: true },
-      { id: text.id, containerId: rectangle.id, selected: true },
     ]);
   });
 
-  it("reverse-duplicating text container (out-of-order)", async () => {
+  it("alt-duplicating text container (out-of-order)", async () => {
     const [rectangle, text] = API.createTextContainer();
     API.setElements([text, rectangle]);
-    API.setSelectedElements([rectangle, text]);
+    API.setSelectedElements([rectangle]);
 
     Keyboard.withModifierKeys({ alt: true }, () => {
       mouse.down(rectangle.x + 5, rectangle.y + 5);
@@ -646,21 +757,21 @@ describe("duplication z-order", () => {
     });
 
     assertElements(h.elements, [
-      { [ORIG_ID]: rectangle.id },
+      { id: rectangle.id },
+      { id: text.id, containerId: rectangle.id },
+      { [ORIG_ID]: rectangle.id, selected: true },
       {
         [ORIG_ID]: text.id,
         containerId: getCloneByOrigId(rectangle.id)?.id,
       },
-      { id: rectangle.id, selected: true },
-      { id: text.id, containerId: rectangle.id, selected: true },
     ]);
   });
 
-  it("reverse-duplicating labeled arrows (in-order)", async () => {
+  it("alt-duplicating labeled arrows (in-order)", async () => {
     const [arrow, text] = API.createLabeledArrow();
 
     API.setElements([arrow, text]);
-    API.setSelectedElements([arrow, text]);
+    API.setSelectedElements([arrow]);
 
     Keyboard.withModifierKeys({ alt: true }, () => {
       mouse.down(arrow.x + 5, arrow.y + 5);
@@ -668,21 +779,24 @@ describe("duplication z-order", () => {
     });
 
     assertElements(h.elements, [
-      { [ORIG_ID]: arrow.id },
+      { id: arrow.id },
+      { id: text.id, containerId: arrow.id },
+      { [ORIG_ID]: arrow.id, selected: true },
       {
         [ORIG_ID]: text.id,
         containerId: getCloneByOrigId(arrow.id)?.id,
       },
-      { id: arrow.id, selected: true },
-      { id: text.id, containerId: arrow.id, selected: true },
     ]);
+    expect(h.state.selectedLinearElement).toEqual(
+      expect.objectContaining({ elementId: getCloneByOrigId(arrow.id)?.id }),
+    );
   });
 
-  it("reverse-duplicating labeled arrows (out-of-order)", async () => {
+  it("alt-duplicating labeled arrows (out-of-order)", async () => {
     const [arrow, text] = API.createLabeledArrow();
 
     API.setElements([text, arrow]);
-    API.setSelectedElements([arrow, text]);
+    API.setSelectedElements([arrow]);
 
     Keyboard.withModifierKeys({ alt: true }, () => {
       mouse.down(arrow.x + 5, arrow.y + 5);
@@ -690,17 +804,17 @@ describe("duplication z-order", () => {
     });
 
     assertElements(h.elements, [
-      { [ORIG_ID]: arrow.id },
+      { id: arrow.id },
+      { id: text.id, containerId: arrow.id },
+      { [ORIG_ID]: arrow.id, selected: true },
       {
         [ORIG_ID]: text.id,
         containerId: getCloneByOrigId(arrow.id)?.id,
       },
-      { id: arrow.id, selected: true },
-      { id: text.id, containerId: arrow.id, selected: true },
     ]);
   });
 
-  it("reverse-duplicating bindable element with bound arrow should keep the arrow on the duplicate", () => {
+  it("alt-duplicating bindable element with bound arrow should keep the arrow on the duplicate", async () => {
     const rect = UI.createElement("rectangle", {
       x: 0,
       y: 0,
@@ -722,11 +836,18 @@ describe("duplication z-order", () => {
       mouse.up(15, 15);
     });
 
-    expect(window.h.elements).toHaveLength(3);
-
-    const newRect = window.h.elements[0];
-
-    expect(arrow.endBinding?.elementId).toBe(newRect.id);
-    expect(newRect.boundElements?.[0]?.id).toBe(arrow.id);
+    assertElements(h.elements, [
+      {
+        id: rect.id,
+        boundElements: expect.arrayContaining([
+          expect.objectContaining({ id: arrow.id }),
+        ]),
+      },
+      { [ORIG_ID]: rect.id, boundElements: [], selected: true },
+      {
+        id: arrow.id,
+        endBinding: expect.objectContaining({ elementId: rect.id }),
+      },
+    ]);
   });
 });
diff --git a/packages/excalidraw/actions/actionDuplicateSelection.tsx b/packages/excalidraw/actions/actionDuplicateSelection.tsx
index 231fe1913b..17b452c365 100644
--- a/packages/excalidraw/actions/actionDuplicateSelection.tsx
+++ b/packages/excalidraw/actions/actionDuplicateSelection.tsx
@@ -7,26 +7,17 @@ import {
 
 import { getNonDeletedElements } from "@excalidraw/element";
 
-import {
-  isBoundToContainer,
-  isLinearElement,
-} from "@excalidraw/element/typeChecks";
-
 import { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
 
-import { selectGroupsForSelectedElements } from "@excalidraw/element/groups";
-
 import {
-  excludeElementsInFramesFromSelection,
   getSelectedElements,
+  getSelectionStateForElements,
 } from "@excalidraw/element/selection";
 
 import { syncMovedIndices } from "@excalidraw/element/fractionalIndex";
 
 import { duplicateElements } from "@excalidraw/element/duplicate";
 
-import type { ExcalidrawElement } from "@excalidraw/element/types";
-
 import { ToolButton } from "../components/ToolButton";
 import { DuplicateIcon } from "../components/icons";
 
@@ -65,52 +56,49 @@ export const actionDuplicateSelection = register({
       }
     }
 
-    let { newElements: duplicatedElements, elementsWithClones: nextElements } =
-      duplicateElements({
-        type: "in-place",
-        elements,
-        idsOfElementsToDuplicate: arrayToMap(
-          getSelectedElements(elements, appState, {
-            includeBoundTextElement: true,
-            includeElementsInFrames: true,
-          }),
-        ),
-        appState,
-        randomizeSeed: true,
-        overrides: (element) => ({
-          x: element.x + DEFAULT_GRID_SIZE / 2,
-          y: element.y + DEFAULT_GRID_SIZE / 2,
+    let { duplicatedElements, elementsWithDuplicates } = duplicateElements({
+      type: "in-place",
+      elements,
+      idsOfElementsToDuplicate: arrayToMap(
+        getSelectedElements(elements, appState, {
+          includeBoundTextElement: true,
+          includeElementsInFrames: true,
         }),
-        reverseOrder: false,
-      });
+      ),
+      appState,
+      randomizeSeed: true,
+      overrides: ({ origElement, origIdToDuplicateId }) => {
+        const duplicateFrameId =
+          origElement.frameId && origIdToDuplicateId.get(origElement.frameId);
+        return {
+          x: origElement.x + DEFAULT_GRID_SIZE / 2,
+          y: origElement.y + DEFAULT_GRID_SIZE / 2,
+          frameId: duplicateFrameId ?? origElement.frameId,
+        };
+      },
+    });
 
-    if (app.props.onDuplicate && nextElements) {
-      const mappedElements = app.props.onDuplicate(nextElements, elements);
+    if (app.props.onDuplicate && elementsWithDuplicates) {
+      const mappedElements = app.props.onDuplicate(
+        elementsWithDuplicates,
+        elements,
+      );
       if (mappedElements) {
-        nextElements = mappedElements;
+        elementsWithDuplicates = mappedElements;
       }
     }
 
     return {
-      elements: syncMovedIndices(nextElements, arrayToMap(duplicatedElements)),
+      elements: syncMovedIndices(
+        elementsWithDuplicates,
+        arrayToMap(duplicatedElements),
+      ),
       appState: {
         ...appState,
-        ...updateLinearElementEditors(duplicatedElements),
-        ...selectGroupsForSelectedElements(
-          {
-            editingGroupId: appState.editingGroupId,
-            selectedElementIds: excludeElementsInFramesFromSelection(
-              duplicatedElements,
-            ).reduce((acc: Record<ExcalidrawElement["id"], true>, element) => {
-              if (!isBoundToContainer(element)) {
-                acc[element.id] = true;
-              }
-              return acc;
-            }, {}),
-          },
-          getNonDeletedElements(nextElements),
+        ...getSelectionStateForElements(
+          duplicatedElements,
+          getNonDeletedElements(elementsWithDuplicates),
           appState,
-          null,
         ),
       },
       captureUpdate: CaptureUpdateAction.IMMEDIATELY,
@@ -130,24 +118,3 @@ export const actionDuplicateSelection = register({
     />
   ),
 });
-
-const updateLinearElementEditors = (clonedElements: ExcalidrawElement[]) => {
-  const linears = clonedElements.filter(isLinearElement);
-  if (linears.length === 1) {
-    const linear = linears[0];
-    const boundElements = linear.boundElements?.map((def) => def.id) ?? [];
-    const onlySingleLinearSelected = clonedElements.every(
-      (el) => el.id === linear.id || boundElements.includes(el.id),
-    );
-
-    if (onlySingleLinearSelected) {
-      return {
-        selectedLinearElement: new LinearElementEditor(linear),
-      };
-    }
-  }
-
-  return {
-    selectedLinearElement: null,
-  };
-};
diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx
index 242fd8e46e..6a7306422b 100644
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@@ -279,6 +279,7 @@ import {
 
 import {
   excludeElementsInFramesFromSelection,
+  getSelectionStateForElements,
   makeNextSelectedElementIds,
 } from "@excalidraw/element/selection";
 
@@ -3267,7 +3268,7 @@ class App extends React.Component<AppProps, AppState> {
 
     const [gridX, gridY] = getGridPoint(dx, dy, this.getEffectiveGridSize());
 
-    const { newElements } = duplicateElements({
+    const { duplicatedElements } = duplicateElements({
       type: "everything",
       elements: elements.map((element) => {
         return newElementWith(element, {
@@ -3279,7 +3280,7 @@ class App extends React.Component<AppProps, AppState> {
     });
 
     const prevElements = this.scene.getElementsIncludingDeleted();
-    let nextElements = [...prevElements, ...newElements];
+    let nextElements = [...prevElements, ...duplicatedElements];
 
     const mappedNewSceneElements = this.props.onDuplicate?.(
       nextElements,
@@ -3288,13 +3289,13 @@ class App extends React.Component<AppProps, AppState> {
 
     nextElements = mappedNewSceneElements || nextElements;
 
-    syncMovedIndices(nextElements, arrayToMap(newElements));
+    syncMovedIndices(nextElements, arrayToMap(duplicatedElements));
 
     const topLayerFrame = this.getTopLayerFrameAtSceneCoords({ x, y });
 
     if (topLayerFrame) {
       const eligibleElements = filterElementsEligibleAsFrameChildren(
-        newElements,
+        duplicatedElements,
         topLayerFrame,
       );
       addElementsToFrame(
@@ -3307,7 +3308,7 @@ class App extends React.Component<AppProps, AppState> {
 
     this.scene.replaceAllElements(nextElements);
 
-    newElements.forEach((newElement) => {
+    duplicatedElements.forEach((newElement) => {
       if (isTextElement(newElement) && isBoundToContainer(newElement)) {
         const container = getContainerElement(
           newElement,
@@ -3323,7 +3324,7 @@ class App extends React.Component<AppProps, AppState> {
 
     // paste event may not fire FontFace loadingdone event in Safari, hence loading font faces manually
     if (isSafari) {
-      Fonts.loadElementsFonts(newElements).then((fontFaces) => {
+      Fonts.loadElementsFonts(duplicatedElements).then((fontFaces) => {
         this.fonts.onLoaded(fontFaces);
       });
     }
@@ -3335,7 +3336,7 @@ class App extends React.Component<AppProps, AppState> {
     this.store.shouldCaptureIncrement();
 
     const nextElementsToSelect =
-      excludeElementsInFramesFromSelection(newElements);
+      excludeElementsInFramesFromSelection(duplicatedElements);
 
     this.setState(
       {
@@ -3378,7 +3379,7 @@ class App extends React.Component<AppProps, AppState> {
     this.setActiveTool({ type: "selection" });
 
     if (opts.fitToContent) {
-      this.scrollToContent(newElements, {
+      this.scrollToContent(duplicatedElements, {
         fitToContent: true,
         canvasOffsets: this.getEditorUIOffsets(),
       });
@@ -6942,6 +6943,7 @@ class App extends React.Component<AppProps, AppState> {
       drag: {
         hasOccurred: false,
         offset: null,
+        origin: { ...origin },
       },
       eventListeners: {
         onMove: null,
@@ -8236,8 +8238,8 @@ class App extends React.Component<AppProps, AppState> {
           this.state.activeEmbeddable?.state !== "active"
         ) {
           const dragOffset = {
-            x: pointerCoords.x - pointerDownState.origin.x,
-            y: pointerCoords.y - pointerDownState.origin.y,
+            x: pointerCoords.x - pointerDownState.drag.origin.x,
+            y: pointerCoords.y - pointerDownState.drag.origin.y,
           };
 
           const originalElements = [
@@ -8432,52 +8434,112 @@ class App extends React.Component<AppProps, AppState> {
               selectedElements.map((el) => [el.id, el]),
             );
 
-            const { newElements: clonedElements, elementsWithClones } =
-              duplicateElements({
-                type: "in-place",
-                elements,
-                appState: this.state,
-                randomizeSeed: true,
-                idsOfElementsToDuplicate,
-                overrides: (el) => {
-                  const origEl = pointerDownState.originalElements.get(el.id);
-
-                  if (origEl) {
-                    return {
-                      x: origEl.x,
-                      y: origEl.y,
-                      seed: origEl.seed,
-                    };
-                  }
-
-                  return {};
-                },
-                reverseOrder: true,
-              });
-            clonedElements.forEach((element) => {
-              pointerDownState.originalElements.set(element.id, element);
+            const {
+              duplicatedElements,
+              duplicateElementsMap,
+              elementsWithDuplicates,
+              origIdToDuplicateId,
+            } = duplicateElements({
+              type: "in-place",
+              elements,
+              appState: this.state,
+              randomizeSeed: true,
+              idsOfElementsToDuplicate,
+              overrides: ({ duplicateElement, origElement }) => {
+                return {
+                  // reset to the original element's frameId (unless we've
+                  // duplicated alongside a frame in which case we need to
+                  // keep the duplicate frame's id) so that the element
+                  // frame membership is refreshed on pointerup
+                  // NOTE this is a hacky solution and should be done
+                  // differently
+                  frameId: duplicateElement.frameId ?? origElement.frameId,
+                  seed: randomInteger(),
+                };
+              },
+            });
+            duplicatedElements.forEach((element) => {
+              pointerDownState.originalElements.set(
+                element.id,
+                deepCopyElement(element),
+              );
             });
 
-            const mappedNewSceneElements = this.props.onDuplicate?.(
-              elementsWithClones,
-              elements,
-            );
-
-            const nextSceneElements = syncMovedIndices(
-              mappedNewSceneElements || elementsWithClones,
-              arrayToMap(clonedElements),
-            ).map((el) => {
+            const mappedClonedElements = elementsWithDuplicates.map((el) => {
               if (idsOfElementsToDuplicate.has(el.id)) {
-                return newElementWith(el, {
-                  seed: randomInteger(),
-                });
+                const origEl = pointerDownState.originalElements.get(el.id);
+
+                if (origEl) {
+                  return newElementWith(el, {
+                    x: origEl.x,
+                    y: origEl.y,
+                  });
+                }
               }
               return el;
             });
 
-            this.scene.replaceAllElements(nextSceneElements);
-            this.maybeCacheVisibleGaps(event, selectedElements, true);
-            this.maybeCacheReferenceSnapPoints(event, selectedElements, true);
+            const mappedNewSceneElements = this.props.onDuplicate?.(
+              mappedClonedElements,
+              elements,
+            );
+
+            const elementsWithIndices = syncMovedIndices(
+              mappedNewSceneElements || mappedClonedElements,
+              arrayToMap(duplicatedElements),
+            );
+
+            // we need to update synchronously so as to keep pointerDownState,
+            // appState, and scene elements in sync
+            flushSync(() => {
+              // swap hit element with the duplicated one
+              if (pointerDownState.hit.element) {
+                const cloneId = origIdToDuplicateId.get(
+                  pointerDownState.hit.element.id,
+                );
+                const clonedElement =
+                  cloneId && duplicateElementsMap.get(cloneId);
+                pointerDownState.hit.element = clonedElement || null;
+              }
+              // swap hit elements with the duplicated ones
+              pointerDownState.hit.allHitElements =
+                pointerDownState.hit.allHitElements.reduce(
+                  (
+                    acc: typeof pointerDownState.hit.allHitElements,
+                    origHitElement,
+                  ) => {
+                    const cloneId = origIdToDuplicateId.get(origHitElement.id);
+                    const clonedElement =
+                      cloneId && duplicateElementsMap.get(cloneId);
+                    if (clonedElement) {
+                      acc.push(clonedElement);
+                    }
+
+                    return acc;
+                  },
+                  [],
+                );
+
+              // update drag origin to the position at which we started
+              // the duplication so that the drag offset is correct
+              pointerDownState.drag.origin = viewportCoordsToSceneCoords(
+                event,
+                this.state,
+              );
+
+              // switch selected elements to the duplicated ones
+              this.setState((prevState) => ({
+                ...getSelectionStateForElements(
+                  duplicatedElements,
+                  this.scene.getNonDeletedElements(),
+                  prevState,
+                ),
+              }));
+
+              this.scene.replaceAllElements(elementsWithIndices);
+              this.maybeCacheVisibleGaps(event, selectedElements, true);
+              this.maybeCacheReferenceSnapPoints(event, selectedElements, true);
+            });
           }
 
           return;
diff --git a/packages/excalidraw/components/LibraryMenuItems.tsx b/packages/excalidraw/components/LibraryMenuItems.tsx
index f70315953d..160cc26405 100644
--- a/packages/excalidraw/components/LibraryMenuItems.tsx
+++ b/packages/excalidraw/components/LibraryMenuItems.tsx
@@ -166,7 +166,7 @@ export default function LibraryMenuItems({
             type: "everything",
             elements: item.elements,
             randomizeSeed: true,
-          }).newElements,
+          }).duplicatedElements,
         };
       });
     },
diff --git a/packages/excalidraw/tests/__snapshots__/move.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/move.test.tsx.snap
index 4b863d4e78..5078a31a0e 100644
--- a/packages/excalidraw/tests/__snapshots__/move.test.tsx.snap
+++ b/packages/excalidraw/tests/__snapshots__/move.test.tsx.snap
@@ -1,40 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`duplicate element on move when ALT is clicked > rectangle 5`] = `
-{
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "customData": undefined,
-  "fillStyle": "solid",
-  "frameId": null,
-  "groupIds": [],
-  "height": 50,
-  "id": "id2",
-  "index": "Zz",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": {
-    "type": 3,
-  },
-  "seed": 1278240551,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 2,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 6,
-  "versionNonce": 1604849351,
-  "width": 30,
-  "x": 30,
-  "y": 20,
-}
-`;
-
-exports[`duplicate element on move when ALT is clicked > rectangle 6`] = `
 {
   "angle": 0,
   "backgroundColor": "transparent",
@@ -54,13 +20,47 @@ exports[`duplicate element on move when ALT is clicked > rectangle 6`] = `
   "roundness": {
     "type": 3,
   },
-  "seed": 1505387817,
+  "seed": 1278240551,
   "strokeColor": "#1e1e1e",
   "strokeStyle": "solid",
   "strokeWidth": 2,
   "type": "rectangle",
   "updated": 1,
-  "version": 6,
+  "version": 5,
+  "versionNonce": 1505387817,
+  "width": 30,
+  "x": 30,
+  "y": 20,
+}
+`;
+
+exports[`duplicate element on move when ALT is clicked > rectangle 6`] = `
+{
+  "angle": 0,
+  "backgroundColor": "transparent",
+  "boundElements": null,
+  "customData": undefined,
+  "fillStyle": "solid",
+  "frameId": null,
+  "groupIds": [],
+  "height": 50,
+  "id": "id2",
+  "index": "a1",
+  "isDeleted": false,
+  "link": null,
+  "locked": false,
+  "opacity": 100,
+  "roughness": 1,
+  "roundness": {
+    "type": 3,
+  },
+  "seed": 1604849351,
+  "strokeColor": "#1e1e1e",
+  "strokeStyle": "solid",
+  "strokeWidth": 2,
+  "type": "rectangle",
+  "updated": 1,
+  "version": 7,
   "versionNonce": 915032327,
   "width": 30,
   "x": -10,
diff --git a/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap
index 319287792c..68d4d5d799 100644
--- a/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap
+++ b/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap
@@ -2038,7 +2038,7 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] appSt
   "scrolledOutside": false,
   "searchMatches": [],
   "selectedElementIds": {
-    "id0": true,
+    "id2": true,
   },
   "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": {},
@@ -2128,8 +2128,16 @@ History {
     HistoryEntry {
       "appStateChange": AppStateChange {
         "delta": Delta {
-          "deleted": {},
-          "inserted": {},
+          "deleted": {
+            "selectedElementIds": {
+              "id2": true,
+            },
+          },
+          "inserted": {
+            "selectedElementIds": {
+              "id0": true,
+            },
+          },
         },
       },
       "elementsChange": ElementsChange {
@@ -2145,7 +2153,7 @@ History {
               "frameId": null,
               "groupIds": [],
               "height": 10,
-              "index": "Zz",
+              "index": "a1",
               "isDeleted": false,
               "link": null,
               "locked": false,
@@ -2159,26 +2167,15 @@ History {
               "strokeWidth": 2,
               "type": "rectangle",
               "width": 10,
-              "x": 10,
-              "y": 10,
+              "x": 20,
+              "y": 20,
             },
             "inserted": {
               "isDeleted": true,
             },
           },
         },
-        "updated": Map {
-          "id0" => Delta {
-            "deleted": {
-              "x": 20,
-              "y": 20,
-            },
-            "inserted": {
-              "x": 10,
-              "y": 10,
-            },
-          },
-        },
+        "updated": Map {},
       },
     },
   ],
@@ -10378,13 +10375,13 @@ exports[`regression tests > make a group and duplicate it > [end of test] appSta
   "scrolledOutside": false,
   "searchMatches": [],
   "selectedElementIds": {
-    "id0": true,
-    "id1": true,
-    "id2": true,
+    "id6": true,
+    "id8": true,
+    "id9": true,
   },
   "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": {
-    "id4": true,
+    "id7": true,
   },
   "selectedLinearElement": null,
   "selectionElement": null,
@@ -10648,8 +10645,26 @@ History {
     HistoryEntry {
       "appStateChange": AppStateChange {
         "delta": Delta {
-          "deleted": {},
-          "inserted": {},
+          "deleted": {
+            "selectedElementIds": {
+              "id6": true,
+              "id8": true,
+              "id9": true,
+            },
+            "selectedGroupIds": {
+              "id7": true,
+            },
+          },
+          "inserted": {
+            "selectedElementIds": {
+              "id0": true,
+              "id1": true,
+              "id2": true,
+            },
+            "selectedGroupIds": {
+              "id4": true,
+            },
+          },
         },
       },
       "elementsChange": ElementsChange {
@@ -10667,7 +10682,7 @@ History {
                 "id7",
               ],
               "height": 10,
-              "index": "Zx",
+              "index": "a3",
               "isDeleted": false,
               "link": null,
               "locked": false,
@@ -10681,8 +10696,8 @@ History {
               "strokeWidth": 2,
               "type": "rectangle",
               "width": 10,
-              "x": 10,
-              "y": 10,
+              "x": 20,
+              "y": 20,
             },
             "inserted": {
               "isDeleted": true,
@@ -10700,7 +10715,7 @@ History {
                 "id7",
               ],
               "height": 10,
-              "index": "Zy",
+              "index": "a4",
               "isDeleted": false,
               "link": null,
               "locked": false,
@@ -10714,8 +10729,8 @@ History {
               "strokeWidth": 2,
               "type": "rectangle",
               "width": 10,
-              "x": 30,
-              "y": 10,
+              "x": 40,
+              "y": 20,
             },
             "inserted": {
               "isDeleted": true,
@@ -10733,7 +10748,7 @@ History {
                 "id7",
               ],
               "height": 10,
-              "index": "Zz",
+              "index": "a5",
               "isDeleted": false,
               "link": null,
               "locked": false,
@@ -10747,46 +10762,15 @@ History {
               "strokeWidth": 2,
               "type": "rectangle",
               "width": 10,
-              "x": 50,
-              "y": 10,
+              "x": 60,
+              "y": 20,
             },
             "inserted": {
               "isDeleted": true,
             },
           },
         },
-        "updated": Map {
-          "id0" => Delta {
-            "deleted": {
-              "x": 20,
-              "y": 20,
-            },
-            "inserted": {
-              "x": 10,
-              "y": 10,
-            },
-          },
-          "id1" => Delta {
-            "deleted": {
-              "x": 40,
-              "y": 20,
-            },
-            "inserted": {
-              "x": 30,
-              "y": 10,
-            },
-          },
-          "id2" => Delta {
-            "deleted": {
-              "x": 60,
-              "y": 20,
-            },
-            "inserted": {
-              "x": 50,
-              "y": 10,
-            },
-          },
-        },
+        "updated": Map {},
       },
     },
   ],
diff --git a/packages/excalidraw/tests/clipboard.test.tsx b/packages/excalidraw/tests/clipboard.test.tsx
index 0759afd94c..7d0e3906c0 100644
--- a/packages/excalidraw/tests/clipboard.test.tsx
+++ b/packages/excalidraw/tests/clipboard.test.tsx
@@ -307,6 +307,41 @@ describe("pasting & frames", () => {
     });
   });
 
+  it("should remove element from frame when pasted outside", async () => {
+    const frame = API.createElement({
+      type: "frame",
+      width: 100,
+      height: 100,
+      x: 0,
+      y: 0,
+    });
+    const rect = API.createElement({
+      type: "rectangle",
+      frameId: frame.id,
+      x: 10,
+      y: 10,
+      width: 50,
+      height: 50,
+    });
+
+    API.setElements([frame]);
+
+    const clipboardJSON = await serializeAsClipboardJSON({
+      elements: [rect],
+      files: null,
+    });
+
+    mouse.moveTo(150, 150);
+
+    pasteWithCtrlCmdV(clipboardJSON);
+
+    await waitFor(() => {
+      expect(h.elements.length).toBe(2);
+      expect(h.elements[1].type).toBe(rect.type);
+      expect(h.elements[1].frameId).toBe(null);
+    });
+  });
+
   it("should filter out elements not overlapping frame", async () => {
     const frame = API.createElement({
       type: "frame",
diff --git a/packages/excalidraw/tests/cropElement.test.tsx b/packages/excalidraw/tests/cropElement.test.tsx
index 8011483fa8..8764962fe4 100644
--- a/packages/excalidraw/tests/cropElement.test.tsx
+++ b/packages/excalidraw/tests/cropElement.test.tsx
@@ -218,7 +218,7 @@ describe("Cropping and other features", async () => {
       initialHeight / 2,
     ]);
     Keyboard.keyDown(KEYS.ESCAPE);
-    const duplicatedImage = duplicateElement(null, new Map(), image, {});
+    const duplicatedImage = duplicateElement(null, new Map(), image);
     act(() => {
       h.app.scene.insertElement(duplicatedImage);
     });
diff --git a/packages/excalidraw/types.ts b/packages/excalidraw/types.ts
index 717993b436..4d3fe4fdc6 100644
--- a/packages/excalidraw/types.ts
+++ b/packages/excalidraw/types.ts
@@ -724,7 +724,8 @@ export type PointerDownState = Readonly<{
   scrollbars: ReturnType<typeof isOverScrollBars>;
   // The previous pointer position
   lastCoords: { x: number; y: number };
-  // map of original elements data
+  // original element frozen snapshots so we can access the original
+  // element attribute values at time of pointerdown
   originalElements: Map<string, NonDeleted<ExcalidrawElement>>;
   resize: {
     // Handle when resizing, might change during the pointer interaction
@@ -758,6 +759,9 @@ export type PointerDownState = Readonly<{
     hasOccurred: boolean;
     // Might change during the pointer interaction
     offset: { x: number; y: number } | null;
+    // by default same as PointerDownState.origin. On alt-duplication, reset
+    // to current pointer position at time of duplication.
+    origin: { x: number; y: number };
   };
   // We need to have these in the state so that we can unsubscribe them
   eventListeners: {

From b5d60973b7188f58f543da23502d8de65c96b475 Mon Sep 17 00:00:00 2001
From: David Luzar <5153846+dwelle@users.noreply.github.com>
Date: Fri, 18 Apr 2025 11:11:12 +0200
Subject: [PATCH 19/23] fix: duplication tests pointer state leaking between
 tests (#9414)

* fix: duplication tests pointer state leaking between tests

* fix snapshots
---
 packages/element/tests/duplicate.test.tsx     |  3 +-
 .../tests/__snapshots__/history.test.tsx.snap | 28 +++++++++----------
 packages/excalidraw/tests/helpers/api.ts      |  1 -
 packages/excalidraw/tests/helpers/ui.ts       |  9 +++++-
 packages/excalidraw/tests/test-utils.ts       |  6 +++-
 setupTests.ts                                 |  5 ----
 6 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/packages/element/tests/duplicate.test.tsx b/packages/element/tests/duplicate.test.tsx
index 409200b6e6..fd748757bb 100644
--- a/packages/element/tests/duplicate.test.tsx
+++ b/packages/element/tests/duplicate.test.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { pointFrom } from "@excalidraw/math";
 
 import {
@@ -472,7 +471,7 @@ describe("group-related duplication", () => {
     expect(h.state.editingGroupId).toBe("group1");
   });
 
-  it.skip("alt-duplicating within group away outside frame", () => {
+  it("alt-duplicating within group away outside frame", () => {
     const frame = API.createElement({
       type: "frame",
       x: 0,
diff --git a/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap
index 9ffb97128a..7b249da278 100644
--- a/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap
+++ b/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap
@@ -7348,8 +7348,8 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "updated": 1,
   "version": 7,
   "width": 10,
-  "x": -10,
-  "y": -10,
+  "x": 0,
+  "y": 0,
 }
 `;
 
@@ -7422,8 +7422,8 @@ History {
               "strokeWidth": 2,
               "type": "arrow",
               "width": 10,
-              "x": -10,
-              "y": -10,
+              "x": 0,
+              "y": 0,
             },
             "inserted": {
               "isDeleted": true,
@@ -12138,8 +12138,8 @@ exports[`history > singleplayer undo/redo > should create entry when selecting f
   "updated": 1,
   "version": 3,
   "width": 10,
-  "x": 10,
-  "y": 10,
+  "x": -10,
+  "y": -10,
 }
 `;
 
@@ -12192,8 +12192,8 @@ exports[`history > singleplayer undo/redo > should create entry when selecting f
   "updated": 1,
   "version": 5,
   "width": 50,
-  "x": 60,
-  "y": 0,
+  "x": 40,
+  "y": -20,
 }
 `;
 
@@ -12246,8 +12246,8 @@ exports[`history > singleplayer undo/redo > should create entry when selecting f
   "updated": 1,
   "version": 4,
   "width": 50,
-  "x": 150,
-  "y": -10,
+  "x": 130,
+  "y": -30,
 }
 `;
 
@@ -12301,8 +12301,8 @@ History {
               "strokeWidth": 2,
               "type": "rectangle",
               "width": 10,
-              "x": 10,
-              "y": 10,
+              "x": -10,
+              "y": -10,
             },
             "inserted": {
               "isDeleted": true,
@@ -12387,8 +12387,8 @@ History {
               "strokeWidth": 2,
               "type": "freedraw",
               "width": 50,
-              "x": 150,
-              "y": -10,
+              "x": 130,
+              "y": -30,
             },
             "inserted": {
               "isDeleted": true,
diff --git a/packages/excalidraw/tests/helpers/api.ts b/packages/excalidraw/tests/helpers/api.ts
index 09aa308a5d..3a83f27635 100644
--- a/packages/excalidraw/tests/helpers/api.ts
+++ b/packages/excalidraw/tests/helpers/api.ts
@@ -444,7 +444,6 @@ export class API {
 
     const text = API.createElement({
       type: "text",
-      id: "text2",
       width: 50,
       height: 20,
       containerId: arrow.id,
diff --git a/packages/excalidraw/tests/helpers/ui.ts b/packages/excalidraw/tests/helpers/ui.ts
index 32de489f15..38070d38bc 100644
--- a/packages/excalidraw/tests/helpers/ui.ts
+++ b/packages/excalidraw/tests/helpers/ui.ts
@@ -180,10 +180,17 @@ export class Pointer {
   public clientX = 0;
   public clientY = 0;
 
+  static activePointers: Pointer[] = [];
+  static resetAll() {
+    Pointer.activePointers.forEach((pointer) => pointer.reset());
+  }
+
   constructor(
     private readonly pointerType: "mouse" | "touch" | "pen",
     private readonly pointerId = 1,
-  ) {}
+  ) {
+    Pointer.activePointers.push(this);
+  }
 
   reset() {
     this.clientX = 0;
diff --git a/packages/excalidraw/tests/test-utils.ts b/packages/excalidraw/tests/test-utils.ts
index b2b8aff9c9..894d748dd8 100644
--- a/packages/excalidraw/tests/test-utils.ts
+++ b/packages/excalidraw/tests/test-utils.ts
@@ -19,7 +19,7 @@ import type { AllPossibleKeys } from "@excalidraw/common/utility-types";
 
 import { STORAGE_KEYS } from "../../../excalidraw-app/app_constants";
 
-import { UI } from "./helpers/ui";
+import { Pointer, UI } from "./helpers/ui";
 import * as toolQueries from "./queries/toolQueries";
 
 import type { RenderResult, RenderOptions } from "@testing-library/react";
@@ -42,6 +42,10 @@ type TestRenderFn = (
 ) => Promise<RenderResult<typeof customQueries>>;
 
 const renderApp: TestRenderFn = async (ui, options) => {
+  // when tests reuse Pointer instances let's reset the last
+  // pointer poisitions so there's no leak between tests
+  Pointer.resetAll();
+
   if (options?.localStorageData) {
     initLocalStorage(options.localStorageData);
     delete options.localStorageData;
diff --git a/setupTests.ts b/setupTests.ts
index 2aec616b48..245c573267 100644
--- a/setupTests.ts
+++ b/setupTests.ts
@@ -94,11 +94,6 @@ vi.mock(
   },
 );
 
-vi.mock("nanoid", () => {
-  return {
-    nanoid: vi.fn(() => "test-id"),
-  };
-});
 // ReactDOM is located inside index.tsx file
 // as a result, we need a place for it to render into
 const element = document.createElement("div");

From 5fc13e43096d666d2b7d1f6d688860de92a0c9c8 Mon Sep 17 00:00:00 2001
From: Jack Walsh <jack_walsh1@hotmail.com>
Date: Sun, 20 Apr 2025 07:50:44 +1000
Subject: [PATCH 20/23] feat: add `props.renderScrollbars` (#9399)

* Expose renderScrollbars to AppState

* fix: scrollbar rendering should use al renderable elements

* remove `appState.renderScrollbars`

* clean unused

---------

Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
---
 .../@excalidraw/excalidraw/api/props/props.mdx    |  1 +
 .../components/ExampleApp.tsx                     | 10 ++++++++++
 packages/common/src/utils.ts                      | 15 +++++++++++++++
 packages/element/src/bounds.ts                    | 12 +++++++++---
 packages/excalidraw/components/App.tsx            |  3 +++
 .../components/canvases/InteractiveCanvas.tsx     |  6 ++++--
 packages/excalidraw/index.tsx                     |  2 ++
 packages/excalidraw/renderer/interactiveScene.ts  |  2 +-
 packages/excalidraw/scene/Scene.ts                |  9 ++++-----
 packages/excalidraw/scene/scrollbars.ts           |  8 +++-----
 packages/excalidraw/types.ts                      |  1 +
 11 files changed, 53 insertions(+), 16 deletions(-)

diff --git a/dev-docs/docs/@excalidraw/excalidraw/api/props/props.mdx b/dev-docs/docs/@excalidraw/excalidraw/api/props/props.mdx
index 5c2a5501b9..607e971826 100644
--- a/dev-docs/docs/@excalidraw/excalidraw/api/props/props.mdx
+++ b/dev-docs/docs/@excalidraw/excalidraw/api/props/props.mdx
@@ -31,6 +31,7 @@ All `props` are _optional_.
 | [`generateIdForFile`](#generateidforfile) | `function` | \_ | Allows you to override `id` generation for files added on canvas |
 | [`validateEmbeddable`](#validateembeddable) | `string[]` \| `boolean` \| `RegExp` \| `RegExp[]` \| <code>((link: string) => boolean &#124; undefined)</code> | \_ | use for custom src url validation |
 | [`renderEmbeddable`](/docs/@excalidraw/excalidraw/api/props/render-props#renderEmbeddable) | `function` | \_ | Render function that can override the built-in `<iframe>` |
+| [`renderScrollbars`] | `boolean`| | `false` | Indicates whether scrollbars will be shown
 
 ### Storing custom data on Excalidraw elements
 
diff --git a/examples/with-script-in-browser/components/ExampleApp.tsx b/examples/with-script-in-browser/components/ExampleApp.tsx
index 976004f041..294a11a58d 100644
--- a/examples/with-script-in-browser/components/ExampleApp.tsx
+++ b/examples/with-script-in-browser/components/ExampleApp.tsx
@@ -104,6 +104,7 @@ export default function ExampleApp({
   const [viewModeEnabled, setViewModeEnabled] = useState(false);
   const [zenModeEnabled, setZenModeEnabled] = useState(false);
   const [gridModeEnabled, setGridModeEnabled] = useState(false);
+  const [renderScrollbars, setRenderScrollbars] = useState(false);
   const [blobUrl, setBlobUrl] = useState<string>("");
   const [canvasUrl, setCanvasUrl] = useState<string>("");
   const [exportWithDarkMode, setExportWithDarkMode] = useState(false);
@@ -192,6 +193,7 @@ export default function ExampleApp({
         }) => setPointerData(payload),
         viewModeEnabled,
         zenModeEnabled,
+        renderScrollbars,
         gridModeEnabled,
         theme,
         name: "Custom name of drawing",
@@ -710,6 +712,14 @@ export default function ExampleApp({
             />
             Grid mode
           </label>
+          <label>
+            <input
+              type="checkbox"
+              checked={renderScrollbars}
+              onChange={() => setRenderScrollbars(!renderScrollbars)}
+            />
+            Render scrollbars
+          </label>
           <label>
             <input
               type="checkbox"
diff --git a/packages/common/src/utils.ts b/packages/common/src/utils.ts
index b6e9fdd781..d7ccb17bf7 100644
--- a/packages/common/src/utils.ts
+++ b/packages/common/src/utils.ts
@@ -1218,3 +1218,18 @@ export const elementCenterPoint = (
 
   return pointFrom<GlobalPoint>(centerXPoint, centerYPoint);
 };
+
+/** hack for Array.isArray type guard not working with readonly value[] */
+export const isReadonlyArray = (value?: any): value is readonly any[] => {
+  return Array.isArray(value);
+};
+
+export const sizeOf = (
+  value: readonly number[] | Readonly<Map<any, any>> | Record<any, any>,
+): number => {
+  return isReadonlyArray(value)
+    ? value.length
+    : value instanceof Map
+    ? value.size
+    : Object.keys(value).length;
+};
diff --git a/packages/element/src/bounds.ts b/packages/element/src/bounds.ts
index 9e723c2146..d0c071f2c8 100644
--- a/packages/element/src/bounds.ts
+++ b/packages/element/src/bounds.ts
@@ -1,6 +1,11 @@
 import rough from "roughjs/bin/rough";
 
-import { rescalePoints, arrayToMap, invariant } from "@excalidraw/common";
+import {
+  rescalePoints,
+  arrayToMap,
+  invariant,
+  sizeOf,
+} from "@excalidraw/common";
 
 import {
   degreesToRadians,
@@ -57,6 +62,7 @@ import type {
   ElementsMap,
   ExcalidrawRectanguloidElement,
   ExcalidrawEllipseElement,
+  ElementsMapOrArray,
 } from "./types";
 import type { Drawable, Op } from "roughjs/bin/core";
 import type { Point as RoughPoint } from "roughjs/bin/geometry";
@@ -938,10 +944,10 @@ export const getElementBounds = (
 };
 
 export const getCommonBounds = (
-  elements: readonly ExcalidrawElement[],
+  elements: ElementsMapOrArray,
   elementsMap?: ElementsMap,
 ): Bounds => {
-  if (!elements.length) {
+  if (!sizeOf(elements)) {
     return [0, 0, 0, 0];
   }
 
diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx
index 6a7306422b..19c856db77 100644
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@@ -1830,6 +1830,9 @@ class App extends React.Component<AppProps, AppState> {
                           }
                           scale={window.devicePixelRatio}
                           appState={this.state}
+                          renderScrollbars={
+                            this.props.renderScrollbars === true
+                          }
                           device={this.device}
                           renderInteractiveSceneCallback={
                             this.renderInteractiveSceneCallback
diff --git a/packages/excalidraw/components/canvases/InteractiveCanvas.tsx b/packages/excalidraw/components/canvases/InteractiveCanvas.tsx
index 1f4f574333..6505c788aa 100644
--- a/packages/excalidraw/components/canvases/InteractiveCanvas.tsx
+++ b/packages/excalidraw/components/canvases/InteractiveCanvas.tsx
@@ -34,6 +34,7 @@ type InteractiveCanvasProps = {
   selectionNonce: number | undefined;
   scale: number;
   appState: InteractiveCanvasAppState;
+  renderScrollbars: boolean;
   device: Device;
   renderInteractiveSceneCallback: (
     data: RenderInteractiveSceneCallback,
@@ -143,7 +144,7 @@ const InteractiveCanvas = (props: InteractiveCanvasProps) => {
           remotePointerUsernames,
           remotePointerUserStates,
           selectionColor,
-          renderScrollbars: false,
+          renderScrollbars: props.renderScrollbars,
         },
         device: props.device,
         callback: props.renderInteractiveSceneCallback,
@@ -230,7 +231,8 @@ const areEqual = (
     // on appState)
     prevProps.elementsMap !== nextProps.elementsMap ||
     prevProps.visibleElements !== nextProps.visibleElements ||
-    prevProps.selectedElements !== nextProps.selectedElements
+    prevProps.selectedElements !== nextProps.selectedElements ||
+    prevProps.renderScrollbars !== nextProps.renderScrollbars
   ) {
     return false;
   }
diff --git a/packages/excalidraw/index.tsx b/packages/excalidraw/index.tsx
index 5ea7467546..17c59a1b50 100644
--- a/packages/excalidraw/index.tsx
+++ b/packages/excalidraw/index.tsx
@@ -53,6 +53,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
     renderEmbeddable,
     aiEnabled,
     showDeprecatedFonts,
+    renderScrollbars,
   } = props;
 
   const canvasActions = props.UIOptions?.canvasActions;
@@ -143,6 +144,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
           renderEmbeddable={renderEmbeddable}
           aiEnabled={aiEnabled !== false}
           showDeprecatedFonts={showDeprecatedFonts}
+          renderScrollbars={renderScrollbars}
         >
           {children}
         </App>
diff --git a/packages/excalidraw/renderer/interactiveScene.ts b/packages/excalidraw/renderer/interactiveScene.ts
index 3000c206c3..69c6a8196e 100644
--- a/packages/excalidraw/renderer/interactiveScene.ts
+++ b/packages/excalidraw/renderer/interactiveScene.ts
@@ -1182,7 +1182,7 @@ const _renderInteractiveScene = ({
   let scrollBars;
   if (renderConfig.renderScrollbars) {
     scrollBars = getScrollBars(
-      visibleElements,
+      elementsMap,
       normalizedWidth,
       normalizedHeight,
       appState,
diff --git a/packages/excalidraw/scene/Scene.ts b/packages/excalidraw/scene/Scene.ts
index dc66837fba..5afe3a4c59 100644
--- a/packages/excalidraw/scene/Scene.ts
+++ b/packages/excalidraw/scene/Scene.ts
@@ -6,6 +6,7 @@ import {
   toBrandedType,
   isDevEnv,
   isTestEnv,
+  isReadonlyArray,
 } from "@excalidraw/common";
 import { isNonDeletedElement } from "@excalidraw/element";
 import { isFrameLikeElement } from "@excalidraw/element/typeChecks";
@@ -292,11 +293,9 @@ class Scene {
   }
 
   replaceAllElements(nextElements: ElementsMapOrArray) {
-    const _nextElements =
-      // ts doesn't like `Array.isArray` of `instanceof Map`
-      nextElements instanceof Array
-        ? nextElements
-        : Array.from(nextElements.values());
+    const _nextElements = isReadonlyArray(nextElements)
+      ? nextElements
+      : Array.from(nextElements.values());
     const nextFrameLikes: ExcalidrawFrameLikeElement[] = [];
 
     validateIndicesThrottled(_nextElements);
diff --git a/packages/excalidraw/scene/scrollbars.ts b/packages/excalidraw/scene/scrollbars.ts
index 4fa4349f2f..6c1bd8a8c0 100644
--- a/packages/excalidraw/scene/scrollbars.ts
+++ b/packages/excalidraw/scene/scrollbars.ts
@@ -2,24 +2,22 @@ import { getGlobalCSSVariable } from "@excalidraw/common";
 
 import { getCommonBounds } from "@excalidraw/element/bounds";
 
-import type { ExcalidrawElement } from "@excalidraw/element/types";
-
 import { getLanguage } from "../i18n";
 
 import type { InteractiveCanvasAppState } from "../types";
-import type { ScrollBars } from "./types";
+import type { RenderableElementsMap, ScrollBars } from "./types";
 
 export const SCROLLBAR_MARGIN = 4;
 export const SCROLLBAR_WIDTH = 6;
 export const SCROLLBAR_COLOR = "rgba(0,0,0,0.3)";
 
 export const getScrollBars = (
-  elements: readonly ExcalidrawElement[],
+  elements: RenderableElementsMap,
   viewportWidth: number,
   viewportHeight: number,
   appState: InteractiveCanvasAppState,
 ): ScrollBars => {
-  if (!elements.length) {
+  if (!elements.size) {
     return {
       horizontal: null,
       vertical: null,
diff --git a/packages/excalidraw/types.ts b/packages/excalidraw/types.ts
index 4d3fe4fdc6..cba9fbea7c 100644
--- a/packages/excalidraw/types.ts
+++ b/packages/excalidraw/types.ts
@@ -601,6 +601,7 @@ export interface ExcalidrawProps {
   ) => JSX.Element | null;
   aiEnabled?: boolean;
   showDeprecatedFonts?: boolean;
+  renderScrollbars?: boolean;
 }
 
 export type SceneData = {

From 8fb2f70414b91175464676ed0158b14a8f2d4ade Mon Sep 17 00:00:00 2001
From: David Luzar <5153846+dwelle@users.noreply.github.com>
Date: Sun, 20 Apr 2025 12:28:41 +0200
Subject: [PATCH 21/23] fix: scrollbar rendering and improve dragging (#9417)

* fix: scrollbar rendering and improve dragging

* tweak offsets
---
 packages/excalidraw/components/App.tsx  | 10 +++-
 packages/excalidraw/scene/scrollbars.ts | 71 +++++++++++++++++--------
 packages/excalidraw/scene/types.ts      |  2 +
 3 files changed, 60 insertions(+), 23 deletions(-)

diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx
index 19c856db77..a70cb9808a 100644
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@@ -8787,7 +8787,10 @@ class App extends React.Component<AppProps, AppState> {
       const x = event.clientX;
       const dx = x - pointerDownState.lastCoords.x;
       this.translateCanvas({
-        scrollX: this.state.scrollX - dx / this.state.zoom.value,
+        scrollX:
+          this.state.scrollX -
+          (dx * (currentScrollBars.horizontal?.deltaMultiplier || 1)) /
+            this.state.zoom.value,
       });
       pointerDownState.lastCoords.x = x;
       return true;
@@ -8797,7 +8800,10 @@ class App extends React.Component<AppProps, AppState> {
       const y = event.clientY;
       const dy = y - pointerDownState.lastCoords.y;
       this.translateCanvas({
-        scrollY: this.state.scrollY - dy / this.state.zoom.value,
+        scrollY:
+          this.state.scrollY -
+          (dy * (currentScrollBars.vertical?.deltaMultiplier || 1)) /
+            this.state.zoom.value,
       });
       pointerDownState.lastCoords.y = y;
       return true;
diff --git a/packages/excalidraw/scene/scrollbars.ts b/packages/excalidraw/scene/scrollbars.ts
index 6c1bd8a8c0..35fecba370 100644
--- a/packages/excalidraw/scene/scrollbars.ts
+++ b/packages/excalidraw/scene/scrollbars.ts
@@ -11,6 +11,7 @@ export const SCROLLBAR_MARGIN = 4;
 export const SCROLLBAR_WIDTH = 6;
 export const SCROLLBAR_COLOR = "rgba(0,0,0,0.3)";
 
+// The scrollbar represents where the viewport is in relationship to the scene
 export const getScrollBars = (
   elements: RenderableElementsMap,
   viewportWidth: number,
@@ -31,9 +32,6 @@ export const getScrollBars = (
   const viewportWidthWithZoom = viewportWidth / appState.zoom.value;
   const viewportHeightWithZoom = viewportHeight / appState.zoom.value;
 
-  const viewportWidthDiff = viewportWidth - viewportWidthWithZoom;
-  const viewportHeightDiff = viewportHeight - viewportHeightWithZoom;
-
   const safeArea = {
     top: parseInt(getGlobalCSSVariable("sat")) || 0,
     bottom: parseInt(getGlobalCSSVariable("sab")) || 0,
@@ -44,10 +42,8 @@ export const getScrollBars = (
   const isRTL = getLanguage().rtl;
 
   // The viewport is the rectangle currently visible for the user
-  const viewportMinX =
-    -appState.scrollX + viewportWidthDiff / 2 + safeArea.left;
-  const viewportMinY =
-    -appState.scrollY + viewportHeightDiff / 2 + safeArea.top;
+  const viewportMinX = -appState.scrollX + safeArea.left;
+  const viewportMinY = -appState.scrollY + safeArea.top;
   const viewportMaxX = viewportMinX + viewportWidthWithZoom - safeArea.right;
   const viewportMaxY = viewportMinY + viewportHeightWithZoom - safeArea.bottom;
 
@@ -57,8 +53,43 @@ export const getScrollBars = (
   const sceneMaxX = Math.max(elementsMaxX, viewportMaxX);
   const sceneMaxY = Math.max(elementsMaxY, viewportMaxY);
 
-  // The scrollbar represents where the viewport is in relationship to the scene
+  // the elements-only bbox
+  const sceneWidth = elementsMaxX - elementsMinX;
+  const sceneHeight = elementsMaxY - elementsMinY;
 
+  // scene (elements) bbox + the viewport bbox that extends outside of it
+  const extendedSceneWidth = sceneMaxX - sceneMinX;
+  const extendedSceneHeight = sceneMaxY - sceneMinY;
+
+  const scrollWidthOffset =
+    Math.max(SCROLLBAR_MARGIN * 2, safeArea.left + safeArea.right) +
+    SCROLLBAR_WIDTH * 2;
+
+  const scrollbarWidth =
+    viewportWidth * (viewportWidthWithZoom / extendedSceneWidth) -
+    scrollWidthOffset;
+
+  const scrollbarHeightOffset =
+    Math.max(SCROLLBAR_MARGIN * 2, safeArea.top + safeArea.bottom) +
+    SCROLLBAR_WIDTH * 2;
+
+  const scrollbarHeight =
+    viewportHeight * (viewportHeightWithZoom / extendedSceneHeight) -
+    scrollbarHeightOffset;
+  // NOTE the delta multiplier calculation isn't quite correct when viewport
+  // is extended outside the scene (elements) bbox as there's some small
+  // accumulation error. I'll let this be an exercise for others to fix. ^^
+  const horizontalDeltaMultiplier =
+    extendedSceneWidth > sceneWidth
+      ? (extendedSceneWidth * appState.zoom.value) /
+        (scrollbarWidth + scrollWidthOffset)
+      : viewportWidth / (scrollbarWidth + scrollWidthOffset);
+
+  const verticalDeltaMultiplier =
+    extendedSceneHeight > sceneHeight
+      ? (extendedSceneHeight * appState.zoom.value) /
+        (scrollbarHeight + scrollbarHeightOffset)
+      : viewportHeight / (scrollbarHeight + scrollbarHeightOffset);
   return {
     horizontal:
       viewportMinX === sceneMinX && viewportMaxX === sceneMaxX
@@ -66,18 +97,17 @@ export const getScrollBars = (
         : {
             x:
               Math.max(safeArea.left, SCROLLBAR_MARGIN) +
-              ((viewportMinX - sceneMinX) / (sceneMaxX - sceneMinX)) *
-                viewportWidth,
+              SCROLLBAR_WIDTH +
+              ((viewportMinX - sceneMinX) / extendedSceneWidth) * viewportWidth,
             y:
               viewportHeight -
               SCROLLBAR_WIDTH -
               Math.max(SCROLLBAR_MARGIN, safeArea.bottom),
-            width:
-              ((viewportMaxX - viewportMinX) / (sceneMaxX - sceneMinX)) *
-                viewportWidth -
-              Math.max(SCROLLBAR_MARGIN * 2, safeArea.left + safeArea.right),
+            width: scrollbarWidth,
             height: SCROLLBAR_WIDTH,
+            deltaMultiplier: horizontalDeltaMultiplier,
           },
+
     vertical:
       viewportMinY === sceneMinY && viewportMaxY === sceneMaxY
         ? null
@@ -88,14 +118,13 @@ export const getScrollBars = (
                 SCROLLBAR_WIDTH -
                 Math.max(safeArea.right, SCROLLBAR_MARGIN),
             y:
-              ((viewportMinY - sceneMinY) / (sceneMaxY - sceneMinY)) *
-                viewportHeight +
-              Math.max(safeArea.top, SCROLLBAR_MARGIN),
+              Math.max(safeArea.top, SCROLLBAR_MARGIN) +
+              SCROLLBAR_WIDTH +
+              ((viewportMinY - sceneMinY) / extendedSceneHeight) *
+                viewportHeight,
             width: SCROLLBAR_WIDTH,
-            height:
-              ((viewportMaxY - viewportMinY) / (sceneMaxY - sceneMinY)) *
-                viewportHeight -
-              Math.max(SCROLLBAR_MARGIN * 2, safeArea.top + safeArea.bottom),
+            height: scrollbarHeight,
+            deltaMultiplier: verticalDeltaMultiplier,
           },
   };
 };
diff --git a/packages/excalidraw/scene/types.ts b/packages/excalidraw/scene/types.ts
index 08b05a57de..12a5e27a8e 100644
--- a/packages/excalidraw/scene/types.ts
+++ b/packages/excalidraw/scene/types.ts
@@ -130,12 +130,14 @@ export type ScrollBars = {
     y: number;
     width: number;
     height: number;
+    deltaMultiplier: number;
   } | null;
   vertical: {
     x: number;
     y: number;
     width: number;
     height: number;
+    deltaMultiplier: number;
   } | null;
 };
 

From debf2ad60817cad40e0cdd3d5a9a0262b40cfbdc Mon Sep 17 00:00:00 2001
From: Vedant Mishra <122669445+vedantmishra69@users.noreply.github.com>
Date: Sun, 20 Apr 2025 16:05:38 +0530
Subject: [PATCH 22/23] docs: Fix missing verb in Footer component
 documentation (#9393)

---
 .../excalidraw/api/children-components/footer.mdx           | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/dev-docs/docs/@excalidraw/excalidraw/api/children-components/footer.mdx b/dev-docs/docs/@excalidraw/excalidraw/api/children-components/footer.mdx
index 3831268f0f..e7852cee94 100644
--- a/dev-docs/docs/@excalidraw/excalidraw/api/children-components/footer.mdx
+++ b/dev-docs/docs/@excalidraw/excalidraw/api/children-components/footer.mdx
@@ -2,7 +2,7 @@
 
 Earlier we were using `renderFooter` prop to render custom footer which was removed in [#5970](https://github.com/excalidraw/excalidraw/pull/5970). Now you can pass a `Footer` component instead to render the custom UI for footer.
 
-You will need to import the `Footer` component from the package and wrap your component with the Footer component. The `Footer` should a valid React Node.
+You will need to import the `Footer` component from the package and wrap your component with the Footer component. The `Footer` should be a valid React Node.
 
 **Usage**
 
@@ -25,7 +25,7 @@ function App() {
 }
 ```
 
-This will only for `Desktop` devices.
+This will only work for `Desktop` devices.
 
 For `mobile` you will need to render it inside the [MainMenu](#mainmenu). You can use the [`useDevice`](#useDevice) hook to check the type of device, this will be available only inside the `children` of `Excalidraw` component.
 
@@ -65,4 +65,4 @@ const App = () => (
 // Need to render when code is span across multiple components
 // in Live Code blocks editor
 render(<App />);
-```
\ No newline at end of file
+```

From 19135995942a671192a0182cbe30b580576a4f8a Mon Sep 17 00:00:00 2001
From: Marcel Mraz <marcel@excalidraw.com>
Date: Wed, 23 Apr 2025 13:45:08 +0200
Subject: [PATCH 23/23] refactor: remove dependency on the (static) Scene
 (#9389)

---
 packages/common/src/utils.ts                  |   2 +-
 .../scene => element/src}/Scene.ts            | 119 ++++----
 packages/element/src/align.ts                 |  14 +-
 packages/element/src/binding.ts               | 109 ++++---
 packages/element/src/dragElements.ts          |  25 +-
 packages/element/src/elbowArrow.ts            |   7 +-
 packages/element/src/flowchart.ts             |  48 ++--
 packages/element/src/fractionalIndex.ts       |  12 +-
 packages/element/src/frame.ts                 |  34 +--
 packages/element/src/linearElementEditor.ts   | 131 +++++----
 packages/element/src/mutateElement.ts         |  55 ++--
 packages/element/src/resizeElements.ts        | 114 ++++----
 packages/element/src/selection.ts             |   7 +-
 packages/element/src/sizeHelpers.ts           |  36 ---
 packages/element/src/textElement.ts           |  30 +-
 packages/element/src/zindex.ts                |   4 +-
 packages/element/tests/duplicate.test.tsx     |   5 +-
 packages/element/tests/elbowArrow.test.tsx    |  15 +-
 .../element/tests/fractionalIndex.test.ts     |   5 +-
 packages/element/tests/resize.test.tsx        |   6 +-
 packages/element/tests/sortElements.test.ts   |  10 +-
 packages/excalidraw/actions/actionAlign.tsx   |   8 +-
 .../excalidraw/actions/actionBoundText.tsx    |  49 ++--
 .../actions/actionDeleteSelected.test.tsx     |  10 +-
 .../actions/actionDeleteSelected.tsx          |  14 +-
 .../actions/actionDuplicateSelection.tsx      |   2 +-
 .../excalidraw/actions/actionFinalize.tsx     |  26 +-
 packages/excalidraw/actions/actionFlip.ts     |  13 +-
 packages/excalidraw/actions/actionFrame.ts    |  16 +-
 .../excalidraw/actions/actionLinearEditor.tsx |   4 +-
 .../excalidraw/actions/actionProperties.tsx   |  83 +++---
 .../excalidraw/actions/actionSelectAll.ts     |   4 +-
 packages/excalidraw/actions/actionStyles.ts   |   7 +-
 packages/excalidraw/change.ts                 |  27 +-
 packages/excalidraw/clipboard.ts              |   2 +-
 packages/excalidraw/components/App.tsx        | 265 +++++++++++-------
 .../components/ElementLinkDialog.tsx          |  17 +-
 packages/excalidraw/components/LayerUI.tsx    |  28 +-
 .../excalidraw/components/Stats/Angle.tsx     |  18 +-
 .../components/Stats/CanvasGrid.tsx           |   3 +-
 .../excalidraw/components/Stats/Dimension.tsx |  12 +-
 .../excalidraw/components/Stats/DragInput.tsx |  16 +-
 .../excalidraw/components/Stats/FontSize.tsx  |   8 +-
 .../components/Stats/MultiAngle.tsx           |  29 +-
 .../components/Stats/MultiDimension.tsx       |  36 ++-
 .../components/Stats/MultiFontSize.tsx        |  30 +-
 .../components/Stats/MultiPosition.tsx        |  28 +-
 .../excalidraw/components/Stats/Position.tsx  |  13 +-
 .../components/Stats/stats.test.tsx           |   4 +-
 packages/excalidraw/components/Stats/utils.ts |  32 +--
 .../components/hyperlink/Hyperlink.tsx        |  22 +-
 packages/excalidraw/data/transform.ts         |  27 +-
 packages/excalidraw/fonts/Fonts.ts            |   4 +-
 packages/excalidraw/lasso/index.ts            |   1 +
 packages/excalidraw/scene/Renderer.ts         |   3 +-
 .../tests/__snapshots__/history.test.tsx.snap |   6 +-
 .../multiPointCreate.test.tsx.snap            |   4 +-
 .../regressionTests.test.tsx.snap             |   4 +-
 packages/excalidraw/tests/dragCreate.test.tsx |   4 +-
 .../excalidraw/tests/elementLocking.test.tsx  |   8 +-
 packages/excalidraw/tests/helpers/api.ts      |  11 +-
 packages/excalidraw/tests/helpers/ui.ts       |   3 +-
 .../tests/linearElementEditor.test.tsx        |  10 +-
 packages/excalidraw/tests/move.test.tsx       |   8 +-
 .../tests/multiPointCreate.test.tsx           |   4 +-
 packages/excalidraw/types.ts                  |   1 +
 packages/excalidraw/wysiwyg/textWysiwyg.tsx   |  25 +-
 67 files changed, 812 insertions(+), 925 deletions(-)
 rename packages/{excalidraw/scene => element/src}/Scene.ts (85%)

diff --git a/packages/common/src/utils.ts b/packages/common/src/utils.ts
index d7ccb17bf7..e7053b181b 100644
--- a/packages/common/src/utils.ts
+++ b/packages/common/src/utils.ts
@@ -680,7 +680,7 @@ export const arrayToMap = <T extends { id: string } | string>(
   return items.reduce((acc: Map<string, T>, element) => {
     acc.set(typeof element === "string" ? element : element.id, element);
     return acc;
-  }, new Map());
+  }, new Map() as Map<string, T>);
 };
 
 export const arrayToMapWithIndex = <T extends { id: string }>(
diff --git a/packages/excalidraw/scene/Scene.ts b/packages/element/src/Scene.ts
similarity index 85%
rename from packages/excalidraw/scene/Scene.ts
rename to packages/element/src/Scene.ts
index 5afe3a4c59..b35c54cae1 100644
--- a/packages/excalidraw/scene/Scene.ts
+++ b/packages/element/src/Scene.ts
@@ -13,6 +13,7 @@ import { isFrameLikeElement } from "@excalidraw/element/typeChecks";
 import { getElementsInGroup } from "@excalidraw/element/groups";
 
 import {
+  orderByFractionalIndex,
   syncInvalidIndices,
   syncMovedIndices,
   validateFractionalIndices,
@@ -20,7 +21,11 @@ import {
 
 import { getSelectedElements } from "@excalidraw/element/selection";
 
-import type { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
+import {
+  mutateElement,
+  type ElementUpdate,
+} from "@excalidraw/element/mutateElement";
+
 import type {
   ExcalidrawElement,
   NonDeletedExcalidrawElement,
@@ -33,12 +38,13 @@ import type {
   Ordered,
 } from "@excalidraw/element/types";
 
-import type { Assert, SameType } from "@excalidraw/common/utility-types";
+import type {
+  Assert,
+  Mutable,
+  SameType,
+} from "@excalidraw/common/utility-types";
 
-import type { AppState } from "../types";
-
-type ElementIdKey = InstanceType<typeof LinearElementEditor>["elementId"];
-type ElementKey = ExcalidrawElement | ElementIdKey;
+import type { AppState } from "../../excalidraw/types";
 
 type SceneStateCallback = () => void;
 type SceneStateCallbackRemover = () => void;
@@ -103,44 +109,7 @@ const hashSelectionOpts = (
 // in our codebase
 export type ExcalidrawElementsIncludingDeleted = readonly ExcalidrawElement[];
 
-const isIdKey = (elementKey: ElementKey): elementKey is ElementIdKey => {
-  if (typeof elementKey === "string") {
-    return true;
-  }
-  return false;
-};
-
 class Scene {
-  // ---------------------------------------------------------------------------
-  // static methods/props
-  // ---------------------------------------------------------------------------
-
-  private static sceneMapByElement = new WeakMap<ExcalidrawElement, Scene>();
-  private static sceneMapById = new Map<string, Scene>();
-
-  static mapElementToScene(elementKey: ElementKey, scene: Scene) {
-    if (isIdKey(elementKey)) {
-      // for cases where we don't have access to the element object
-      // (e.g. restore serialized appState with id references)
-      this.sceneMapById.set(elementKey, scene);
-    } else {
-      this.sceneMapByElement.set(elementKey, scene);
-      // if mapping element objects, also cache the id string when later
-      // looking up by id alone
-      this.sceneMapById.set(elementKey.id, scene);
-    }
-  }
-
-  /**
-   * @deprecated pass down `app.scene` and use it directly
-   */
-  static getScene(elementKey: ElementKey): Scene | null {
-    if (isIdKey(elementKey)) {
-      return this.sceneMapById.get(elementKey) || null;
-    }
-    return this.sceneMapByElement.get(elementKey) || null;
-  }
-
   // ---------------------------------------------------------------------------
   // instance methods/props
   // ---------------------------------------------------------------------------
@@ -199,6 +168,12 @@ class Scene {
     return this.frames;
   }
 
+  constructor(elements: ElementsMapOrArray | null = null) {
+    if (elements) {
+      this.replaceAllElements(elements);
+    }
+  }
+
   getSelectedElements(opts: {
     // NOTE can be ommitted by making Scene constructor require App instance
     selectedElementIds: AppState["selectedElementIds"];
@@ -293,21 +268,25 @@ class Scene {
   }
 
   replaceAllElements(nextElements: ElementsMapOrArray) {
-    const _nextElements = isReadonlyArray(nextElements)
-      ? nextElements
-      : Array.from(nextElements.values());
+    // ts doesn't like `Array.isArray` of `instanceof Map`
+    if (!isReadonlyArray(nextElements)) {
+      // need to order by fractional indices to get the correct order
+      nextElements = orderByFractionalIndex(
+        Array.from(nextElements.values()) as OrderedExcalidrawElement[],
+      );
+    }
+
     const nextFrameLikes: ExcalidrawFrameLikeElement[] = [];
 
-    validateIndicesThrottled(_nextElements);
+    validateIndicesThrottled(nextElements);
 
-    this.elements = syncInvalidIndices(_nextElements);
+    this.elements = syncInvalidIndices(nextElements);
     this.elementsMap.clear();
     this.elements.forEach((element) => {
       if (isFrameLikeElement(element)) {
         nextFrameLikes.push(element);
       }
       this.elementsMap.set(element.id, element);
-      Scene.mapElementToScene(element, this);
     });
     const nonDeletedElements = getNonDeletedElements(this.elements);
     this.nonDeletedElements = nonDeletedElements.elements;
@@ -352,12 +331,6 @@ class Scene {
     this.selectedElementsCache.elements = null;
     this.selectedElementsCache.cache.clear();
 
-    Scene.sceneMapById.forEach((scene, elementKey) => {
-      if (scene === this) {
-        Scene.sceneMapById.delete(elementKey);
-      }
-    });
-
     // done not for memory leaks, but to guard against possible late fires
     // (I guess?)
     this.callbacks.clear();
@@ -454,6 +427,42 @@ class Scene {
     // then, check if the id is a group
     return getElementsInGroup(elementsMap, id);
   };
+
+  // Mutate an element with passed updates and trigger the component to update. Make sure you
+  // are calling it either from a React event handler or within unstable_batchedUpdates().
+  mutateElement<TElement extends Mutable<ExcalidrawElement>>(
+    element: TElement,
+    updates: ElementUpdate<TElement>,
+    options: {
+      informMutation: boolean;
+      isDragging: boolean;
+    } = {
+      informMutation: true,
+      isDragging: false,
+    },
+  ) {
+    const elementsMap = this.getNonDeletedElementsMap();
+
+    const { version: prevVersion } = element;
+    const { version: nextVersion } = mutateElement(
+      element,
+      elementsMap,
+      updates,
+      options,
+    );
+
+    if (
+      // skip if the element is not in the scene (i.e. selection)
+      this.elementsMap.has(element.id) &&
+      // skip if the element's version hasn't changed, as mutateElement returned the same element
+      prevVersion !== nextVersion &&
+      options.informMutation
+    ) {
+      this.triggerUpdate();
+    }
+
+    return element;
+  }
 }
 
 export default Scene;
diff --git a/packages/element/src/align.ts b/packages/element/src/align.ts
index 61535b4348..b6dd4d4548 100644
--- a/packages/element/src/align.ts
+++ b/packages/element/src/align.ts
@@ -1,12 +1,11 @@
-import type Scene from "@excalidraw/excalidraw/scene/Scene";
-
 import { updateBoundElements } from "./binding";
 import { getCommonBoundingBox } from "./bounds";
-import { mutateElement } from "./mutateElement";
 import { getMaximumGroups } from "./groups";
 
+import type Scene from "./Scene";
+
 import type { BoundingBox } from "./bounds";
-import type { ElementsMap, ExcalidrawElement } from "./types";
+import type { ExcalidrawElement } from "./types";
 
 export interface Alignment {
   position: "start" | "center" | "end";
@@ -15,10 +14,10 @@ export interface Alignment {
 
 export const alignElements = (
   selectedElements: ExcalidrawElement[],
-  elementsMap: ElementsMap,
   alignment: Alignment,
   scene: Scene,
 ): ExcalidrawElement[] => {
+  const elementsMap = scene.getNonDeletedElementsMap();
   const groups: ExcalidrawElement[][] = getMaximumGroups(
     selectedElements,
     elementsMap,
@@ -33,12 +32,13 @@ export const alignElements = (
     );
     return group.map((element) => {
       // update element
-      const updatedEle = mutateElement(element, {
+      const updatedEle = scene.mutateElement(element, {
         x: element.x + translation.x,
         y: element.y + translation.y,
       });
+
       // update bound elements
-      updateBoundElements(element, scene.getNonDeletedElementsMap(), {
+      updateBoundElements(element, scene, {
         simultaneouslyUpdated: group,
       });
       return updatedEle;
diff --git a/packages/element/src/binding.ts b/packages/element/src/binding.ts
index 1d39ce2f06..96d8a42801 100644
--- a/packages/element/src/binding.ts
+++ b/packages/element/src/binding.ts
@@ -31,8 +31,6 @@ import { isPointOnShape } from "@excalidraw/utils/collision";
 
 import type { LocalPoint, Radians } from "@excalidraw/math";
 
-import type Scene from "@excalidraw/excalidraw/scene/Scene";
-
 import type { AppState } from "@excalidraw/excalidraw/types";
 
 import type { Mutable } from "@excalidraw/common/utility-types";
@@ -68,6 +66,8 @@ import {
 import { aabbForElement, getElementShape, pointInsideBounds } from "./shapes";
 import { updateElbowArrowPoints } from "./elbowArrow";
 
+import type Scene from "./Scene";
+
 import type { Bounds } from "./bounds";
 import type { ElementUpdate } from "./mutateElement";
 import type {
@@ -84,7 +84,6 @@ import type {
   OrderedExcalidrawElement,
   ExcalidrawElbowArrowElement,
   FixedPoint,
-  SceneElementsMap,
   FixedPointBinding,
 } from "./types";
 
@@ -130,7 +129,6 @@ export const bindOrUnbindLinearElement = (
   linearElement: NonDeleted<ExcalidrawLinearElement>,
   startBindingElement: ExcalidrawBindableElement | null | "keep",
   endBindingElement: ExcalidrawBindableElement | null | "keep",
-  elementsMap: NonDeletedSceneElementsMap,
   scene: Scene,
 ): void => {
   const boundToElementIds: Set<ExcalidrawBindableElement["id"]> = new Set();
@@ -142,7 +140,7 @@ export const bindOrUnbindLinearElement = (
     "start",
     boundToElementIds,
     unboundFromElementIds,
-    elementsMap,
+    scene,
   );
   bindOrUnbindLinearElementEdge(
     linearElement,
@@ -151,7 +149,7 @@ export const bindOrUnbindLinearElement = (
     "end",
     boundToElementIds,
     unboundFromElementIds,
-    elementsMap,
+    scene,
   );
 
   const onlyUnbound = Array.from(unboundFromElementIds).filter(
@@ -159,7 +157,7 @@ export const bindOrUnbindLinearElement = (
   );
 
   getNonDeletedElements(scene, onlyUnbound).forEach((element) => {
-    mutateElement(element, {
+    scene.mutateElement(element, {
       boundElements: element.boundElements?.filter(
         (element) =>
           element.type !== "arrow" || element.id !== linearElement.id,
@@ -177,7 +175,7 @@ const bindOrUnbindLinearElementEdge = (
   boundToElementIds: Set<ExcalidrawBindableElement["id"]>,
   // Is mutated
   unboundFromElementIds: Set<ExcalidrawBindableElement["id"]>,
-  elementsMap: NonDeletedSceneElementsMap,
+  scene: Scene,
 ): void => {
   // "keep" is for method chaining convenience, a "no-op", so just bail out
   if (bindableElement === "keep") {
@@ -186,7 +184,7 @@ const bindOrUnbindLinearElementEdge = (
 
   // null means break the bind, so nothing to consider here
   if (bindableElement === null) {
-    const unbound = unbindLinearElement(linearElement, startOrEnd);
+    const unbound = unbindLinearElement(linearElement, startOrEnd, scene);
     if (unbound != null) {
       unboundFromElementIds.add(unbound);
     }
@@ -209,16 +207,11 @@ const bindOrUnbindLinearElementEdge = (
         : startOrEnd === "start" ||
           otherEdgeBindableElement.id !== bindableElement.id)
     ) {
-      bindLinearElement(
-        linearElement,
-        bindableElement,
-        startOrEnd,
-        elementsMap,
-      );
+      bindLinearElement(linearElement, bindableElement, startOrEnd, scene);
       boundToElementIds.add(bindableElement.id);
     }
   } else {
-    bindLinearElement(linearElement, bindableElement, startOrEnd, elementsMap);
+    bindLinearElement(linearElement, bindableElement, startOrEnd, scene);
     boundToElementIds.add(bindableElement.id);
   }
 };
@@ -362,11 +355,9 @@ const getBindingStrategyForDraggingArrowOrJoints = (
 
 export const bindOrUnbindLinearElements = (
   selectedElements: NonDeleted<ExcalidrawLinearElement>[],
-  elementsMap: NonDeletedSceneElementsMap,
-  elements: readonly NonDeletedExcalidrawElement[],
-  scene: Scene,
   isBindingEnabled: boolean,
   draggingPoints: readonly number[] | null,
+  scene: Scene,
   zoom?: AppState["zoom"],
 ): void => {
   selectedElements.forEach((selectedElement) => {
@@ -376,20 +367,20 @@ export const bindOrUnbindLinearElements = (
           selectedElement,
           isBindingEnabled,
           draggingPoints ?? [],
-          elementsMap,
-          elements,
+          scene.getNonDeletedElementsMap(),
+          scene.getNonDeletedElements(),
           zoom,
         )
       : // The arrow itself (the shaft) or the inner joins are dragged
         getBindingStrategyForDraggingArrowOrJoints(
           selectedElement,
-          elementsMap,
-          elements,
+          scene.getNonDeletedElementsMap(),
+          scene.getNonDeletedElements(),
           isBindingEnabled,
           zoom,
         );
 
-    bindOrUnbindLinearElement(selectedElement, start, end, elementsMap, scene);
+    bindOrUnbindLinearElement(selectedElement, start, end, scene);
   });
 };
 
@@ -429,15 +420,17 @@ export const maybeBindLinearElement = (
   linearElement: NonDeleted<ExcalidrawLinearElement>,
   appState: AppState,
   pointerCoords: { x: number; y: number },
-  elementsMap: NonDeletedSceneElementsMap,
-  elements: readonly NonDeletedExcalidrawElement[],
+  scene: Scene,
 ): void => {
+  const elements = scene.getNonDeletedElements();
+  const elementsMap = scene.getNonDeletedElementsMap();
+
   if (appState.startBoundElement != null) {
     bindLinearElement(
       linearElement,
       appState.startBoundElement,
       "start",
-      elementsMap,
+      scene,
     );
   }
 
@@ -458,7 +451,7 @@ export const maybeBindLinearElement = (
         "end",
       )
     ) {
-      bindLinearElement(linearElement, hoveredElement, "end", elementsMap);
+      bindLinearElement(linearElement, hoveredElement, "end", scene);
     }
   }
 };
@@ -487,7 +480,7 @@ export const bindLinearElement = (
   linearElement: NonDeleted<ExcalidrawLinearElement>,
   hoveredElement: ExcalidrawBindableElement,
   startOrEnd: "start" | "end",
-  elementsMap: NonDeletedSceneElementsMap,
+  scene: Scene,
 ): void => {
   if (!isArrowElement(linearElement)) {
     return;
@@ -500,7 +493,7 @@ export const bindLinearElement = (
         linearElement,
         hoveredElement,
         startOrEnd,
-        elementsMap,
+        scene.getNonDeletedElementsMap(),
       ),
       hoveredElement,
     ),
@@ -513,18 +506,17 @@ export const bindLinearElement = (
         linearElement,
         hoveredElement,
         startOrEnd,
-        elementsMap,
       ),
     };
   }
 
-  mutateElement(linearElement, {
+  scene.mutateElement(linearElement, {
     [startOrEnd === "start" ? "startBinding" : "endBinding"]: binding,
   });
 
   const boundElementsMap = arrayToMap(hoveredElement.boundElements || []);
   if (!boundElementsMap.has(linearElement.id)) {
-    mutateElement(hoveredElement, {
+    scene.mutateElement(hoveredElement, {
       boundElements: (hoveredElement.boundElements || []).concat({
         id: linearElement.id,
         type: "arrow",
@@ -566,13 +558,14 @@ const isLinearElementSimple = (
 const unbindLinearElement = (
   linearElement: NonDeleted<ExcalidrawLinearElement>,
   startOrEnd: "start" | "end",
+  scene: Scene,
 ): ExcalidrawBindableElement["id"] | null => {
   const field = startOrEnd === "start" ? "startBinding" : "endBinding";
   const binding = linearElement[field];
   if (binding == null) {
     return null;
   }
-  mutateElement(linearElement, { [field]: null });
+  scene.mutateElement(linearElement, { [field]: null });
   return binding.elementId;
 };
 
@@ -740,7 +733,7 @@ const calculateFocusAndGap = (
 // in explicitly.
 export const updateBoundElements = (
   changedElement: NonDeletedExcalidrawElement,
-  elementsMap: NonDeletedSceneElementsMap | SceneElementsMap,
+  scene: Scene,
   options?: {
     simultaneouslyUpdated?: readonly ExcalidrawElement[];
     newSize?: { width: number; height: number };
@@ -756,6 +749,8 @@ export const updateBoundElements = (
     return;
   }
 
+  const elementsMap = scene.getNonDeletedElementsMap();
+
   boundElementsVisitor(elementsMap, changedElement, (element) => {
     if (!isLinearElement(element) || element.isDeleted) {
       return;
@@ -796,7 +791,7 @@ export const updateBoundElements = (
 
     // `linearElement` is being moved/scaled already, just update the binding
     if (simultaneouslyUpdatedElementIds.has(element.id)) {
-      mutateElement(element, bindings, true);
+      scene.mutateElement(element, bindings);
       return;
     }
 
@@ -843,23 +838,18 @@ export const updateBoundElements = (
       }> => update !== null,
     );
 
-    LinearElementEditor.movePoints(
-      element,
-      updates,
-      {
-        ...(changedElement.id === element.startBinding?.elementId
-          ? { startBinding: bindings.startBinding }
-          : {}),
-        ...(changedElement.id === element.endBinding?.elementId
-          ? { endBinding: bindings.endBinding }
-          : {}),
-      },
-      elementsMap as NonDeletedSceneElementsMap,
-    );
+    LinearElementEditor.movePoints(element, scene, updates, {
+      ...(changedElement.id === element.startBinding?.elementId
+        ? { startBinding: bindings.startBinding }
+        : {}),
+      ...(changedElement.id === element.endBinding?.elementId
+        ? { endBinding: bindings.endBinding }
+        : {}),
+    });
 
     const boundText = getBoundTextElement(element, elementsMap);
     if (boundText && !boundText.isDeleted) {
-      handleBindTextResize(element, elementsMap, false);
+      handleBindTextResize(element, scene, false);
     }
   });
 };
@@ -885,7 +875,6 @@ export const getHeadingForElbowArrowSnap = (
   otherPoint: Readonly<GlobalPoint>,
   bindableElement: ExcalidrawBindableElement | undefined | null,
   aabb: Bounds | undefined | null,
-  elementsMap: ElementsMap,
   origPoint: GlobalPoint,
   zoom?: AppState["zoom"],
 ): Heading => {
@@ -895,12 +884,7 @@ export const getHeadingForElbowArrowSnap = (
     return otherPointHeading;
   }
 
-  const distance = getDistanceForBinding(
-    origPoint,
-    bindableElement,
-    elementsMap,
-    zoom,
-  );
+  const distance = getDistanceForBinding(origPoint, bindableElement, zoom);
 
   if (!distance) {
     return vectorToHeading(
@@ -914,7 +898,6 @@ export const getHeadingForElbowArrowSnap = (
 const getDistanceForBinding = (
   point: Readonly<GlobalPoint>,
   bindableElement: ExcalidrawBindableElement,
-  elementsMap: ElementsMap,
   zoom?: AppState["zoom"],
 ) => {
   const distance = distanceToBindableElement(bindableElement, point);
@@ -1216,7 +1199,6 @@ const updateBoundPoint = (
         linearElement,
         bindableElement,
         startOrEnd === "startBinding" ? "start" : "end",
-        elementsMap,
       ).fixedPoint;
     const globalMidPoint = elementCenterPoint(bindableElement);
     const global = pointFrom<GlobalPoint>(
@@ -1320,7 +1302,6 @@ export const calculateFixedPointForElbowArrowBinding = (
   linearElement: NonDeleted<ExcalidrawElbowArrowElement>,
   hoveredElement: ExcalidrawBindableElement,
   startOrEnd: "start" | "end",
-  elementsMap: ElementsMap,
 ): { fixedPoint: FixedPoint } => {
   const bounds = [
     hoveredElement.x,
@@ -1486,8 +1467,12 @@ export const fixBindingsAfterDeletion = (
   const elements = arrayToMap(sceneElements);
 
   for (const element of deletedElements) {
-    BoundElement.unbindAffected(elements, element, mutateElement);
-    BindableElement.unbindAffected(elements, element, mutateElement);
+    BoundElement.unbindAffected(elements, element, (element, updates) =>
+      mutateElement(element, elements, updates),
+    );
+    BindableElement.unbindAffected(elements, element, (element, updates) =>
+      mutateElement(element, elements, updates),
+    );
   }
 };
 
diff --git a/packages/element/src/dragElements.ts b/packages/element/src/dragElements.ts
index 669417a54e..4f9eb9ca4c 100644
--- a/packages/element/src/dragElements.ts
+++ b/packages/element/src/dragElements.ts
@@ -11,13 +11,10 @@ import type {
   PointerDownState,
 } from "@excalidraw/excalidraw/types";
 
-import type Scene from "@excalidraw/excalidraw/scene/Scene";
-
 import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
 
 import { updateBoundElements } from "./binding";
 import { getCommonBounds } from "./bounds";
-import { mutateElement } from "./mutateElement";
 import { getPerfectElementSize } from "./sizeHelpers";
 import { getBoundTextElement } from "./textElement";
 import { getMinTextElementWidth } from "./textMeasurements";
@@ -29,6 +26,8 @@ import {
   isTextElement,
 } from "./typeChecks";
 
+import type Scene from "./Scene";
+
 import type { Bounds } from "./bounds";
 import type { ExcalidrawElement } from "./types";
 
@@ -104,7 +103,7 @@ export const dragSelectedElements = (
   );
 
   elementsToUpdate.forEach((element) => {
-    updateElementCoords(pointerDownState, element, adjustedOffset);
+    updateElementCoords(pointerDownState, element, scene, adjustedOffset);
     if (!isArrowElement(element)) {
       // skip arrow labels since we calculate its position during render
       const textElement = getBoundTextElement(
@@ -112,9 +111,14 @@ export const dragSelectedElements = (
         scene.getNonDeletedElementsMap(),
       );
       if (textElement) {
-        updateElementCoords(pointerDownState, textElement, adjustedOffset);
+        updateElementCoords(
+          pointerDownState,
+          textElement,
+          scene,
+          adjustedOffset,
+        );
       }
-      updateBoundElements(element, scene.getElementsMapIncludingDeleted(), {
+      updateBoundElements(element, scene, {
         simultaneouslyUpdated: Array.from(elementsToUpdate),
       });
     }
@@ -155,6 +159,7 @@ const calculateOffset = (
 const updateElementCoords = (
   pointerDownState: PointerDownState,
   element: NonDeletedExcalidrawElement,
+  scene: Scene,
   dragOffset: { x: number; y: number },
 ) => {
   const originalElement =
@@ -163,7 +168,7 @@ const updateElementCoords = (
   const nextX = originalElement.x + dragOffset.x;
   const nextY = originalElement.y + dragOffset.y;
 
-  mutateElement(element, {
+  scene.mutateElement(element, {
     x: nextX,
     y: nextY,
   });
@@ -190,6 +195,7 @@ export const dragNewElement = ({
   shouldMaintainAspectRatio,
   shouldResizeFromCenter,
   zoom,
+  scene,
   widthAspectRatio = null,
   originOffset = null,
   informMutation = true,
@@ -205,6 +211,7 @@ export const dragNewElement = ({
   shouldMaintainAspectRatio: boolean;
   shouldResizeFromCenter: boolean;
   zoom: NormalizedZoomValue;
+  scene: Scene;
   /** whether to keep given aspect ratio when `isResizeWithSidesSameLength` is
       true */
   widthAspectRatio?: number | null;
@@ -285,7 +292,7 @@ export const dragNewElement = ({
       };
     }
 
-    mutateElement(
+    scene.mutateElement(
       newElement,
       {
         x: newX + (originOffset?.x ?? 0),
@@ -295,7 +302,7 @@ export const dragNewElement = ({
         ...textAutoResize,
         ...imageInitialDimension,
       },
-      informMutation,
+      { informMutation, isDragging: false },
     );
   }
 };
diff --git a/packages/element/src/elbowArrow.ts b/packages/element/src/elbowArrow.ts
index a70e265bc6..95a2aa8ef5 100644
--- a/packages/element/src/elbowArrow.ts
+++ b/packages/element/src/elbowArrow.ts
@@ -50,7 +50,6 @@ import { isBindableElement } from "./typeChecks";
 import {
   type ExcalidrawElbowArrowElement,
   type NonDeletedSceneElementsMap,
-  type SceneElementsMap,
 } from "./types";
 
 import { aabbForElement, pointInsideBounds } from "./shapes";
@@ -887,7 +886,7 @@ export const updateElbowArrowPoints = (
   elementsMap: NonDeletedSceneElementsMap,
   updates: {
     points?: readonly LocalPoint[];
-    fixedSegments?: FixedSegment[] | null;
+    fixedSegments?: readonly FixedSegment[] | null;
     startBinding?: FixedPointBinding | null;
     endBinding?: FixedPointBinding | null;
   },
@@ -1273,14 +1272,12 @@ const getElbowArrowData = (
   const startHeading = getBindPointHeading(
     startGlobalPoint,
     endGlobalPoint,
-    elementsMap,
     hoveredStartElement,
     origStartGlobalPoint,
   );
   const endHeading = getBindPointHeading(
     endGlobalPoint,
     startGlobalPoint,
-    elementsMap,
     hoveredEndElement,
     origEndGlobalPoint,
   );
@@ -2250,7 +2247,6 @@ const getGlobalPoint = (
 const getBindPointHeading = (
   p: GlobalPoint,
   otherPoint: GlobalPoint,
-  elementsMap: NonDeletedSceneElementsMap | SceneElementsMap,
   hoveredElement: ExcalidrawBindableElement | null | undefined,
   origPoint: GlobalPoint,
 ): Heading =>
@@ -2268,7 +2264,6 @@ const getBindPointHeading = (
           number,
         ],
       ),
-    elementsMap,
     origPoint,
   );
 
diff --git a/packages/element/src/flowchart.ts b/packages/element/src/flowchart.ts
index 8ee2ba530a..62acd1c4ea 100644
--- a/packages/element/src/flowchart.ts
+++ b/packages/element/src/flowchart.ts
@@ -39,6 +39,8 @@ import {
   type OrderedExcalidrawElement,
 } from "./types";
 
+import type Scene from "./Scene";
+
 type LinkDirection = "up" | "right" | "down" | "left";
 
 const VERTICAL_OFFSET = 100;
@@ -236,10 +238,11 @@ const getOffsets = (
 
 const addNewNode = (
   element: ExcalidrawFlowchartNodeElement,
-  elementsMap: ElementsMap,
   appState: AppState,
   direction: LinkDirection,
+  scene: Scene,
 ) => {
+  const elementsMap = scene.getNonDeletedElementsMap();
   const successors = getSuccessors(element, elementsMap, direction);
   const predeccessors = getPredecessors(element, elementsMap, direction);
 
@@ -274,9 +277,9 @@ const addNewNode = (
   const bindingArrow = createBindingArrow(
     element,
     nextNode,
-    elementsMap,
     direction,
     appState,
+    scene,
   );
 
   return {
@@ -287,9 +290,9 @@ const addNewNode = (
 
 export const addNewNodes = (
   startNode: ExcalidrawFlowchartNodeElement,
-  elementsMap: ElementsMap,
   appState: AppState,
   direction: LinkDirection,
+  scene: Scene,
   numberOfNodes: number,
 ) => {
   // always start from 0 and distribute evenly
@@ -352,9 +355,9 @@ export const addNewNodes = (
     const bindingArrow = createBindingArrow(
       startNode,
       nextNode,
-      elementsMap,
       direction,
       appState,
+      scene,
     );
 
     newNodes.push(nextNode);
@@ -367,9 +370,9 @@ export const addNewNodes = (
 const createBindingArrow = (
   startBindingElement: ExcalidrawFlowchartNodeElement,
   endBindingElement: ExcalidrawFlowchartNodeElement,
-  elementsMap: ElementsMap,
   direction: LinkDirection,
   appState: AppState,
+  scene: Scene,
 ) => {
   let startX: number;
   let startY: number;
@@ -440,18 +443,10 @@ const createBindingArrow = (
     elbowed: true,
   });
 
-  bindLinearElement(
-    bindingArrow,
-    startBindingElement,
-    "start",
-    elementsMap as NonDeletedSceneElementsMap,
-  );
-  bindLinearElement(
-    bindingArrow,
-    endBindingElement,
-    "end",
-    elementsMap as NonDeletedSceneElementsMap,
-  );
+  const elementsMap = scene.getNonDeletedElementsMap();
+
+  bindLinearElement(bindingArrow, startBindingElement, "start", scene);
+  bindLinearElement(bindingArrow, endBindingElement, "end", scene);
 
   const changedElements = new Map<string, OrderedExcalidrawElement>();
   changedElements.set(
@@ -467,7 +462,7 @@ const createBindingArrow = (
     bindingArrow as OrderedExcalidrawElement,
   );
 
-  LinearElementEditor.movePoints(bindingArrow, [
+  LinearElementEditor.movePoints(bindingArrow, scene, [
     {
       index: 1,
       point: bindingArrow.points[1],
@@ -632,16 +627,17 @@ export class FlowChartCreator {
 
   createNodes(
     startNode: ExcalidrawFlowchartNodeElement,
-    elementsMap: ElementsMap,
     appState: AppState,
     direction: LinkDirection,
+    scene: Scene,
   ) {
+    const elementsMap = scene.getNonDeletedElementsMap();
     if (direction !== this.direction) {
       const { nextNode, bindingArrow } = addNewNode(
         startNode,
-        elementsMap,
         appState,
         direction,
+        scene,
       );
 
       this.numberOfNodes = 1;
@@ -652,9 +648,9 @@ export class FlowChartCreator {
       this.numberOfNodes += 1;
       const newNodes = addNewNodes(
         startNode,
-        elementsMap,
         appState,
         direction,
+        scene,
         this.numberOfNodes,
       );
 
@@ -682,13 +678,9 @@ export class FlowChartCreator {
         )
       ) {
         this.pendingNodes = this.pendingNodes.map((node) =>
-          mutateElement(
-            node,
-            {
-              frameId: startNode.frameId,
-            },
-            false,
-          ),
+          mutateElement(node, elementsMap, {
+            frameId: startNode.frameId,
+          }),
         );
       }
     }
diff --git a/packages/element/src/fractionalIndex.ts b/packages/element/src/fractionalIndex.ts
index bbe739f29a..84505365ec 100644
--- a/packages/element/src/fractionalIndex.ts
+++ b/packages/element/src/fractionalIndex.ts
@@ -7,6 +7,7 @@ import { getBoundTextElement } from "./textElement";
 import { hasBoundTextElement } from "./typeChecks";
 
 import type {
+  ElementsMap,
   ExcalidrawElement,
   FractionalIndex,
   OrderedExcalidrawElement,
@@ -152,9 +153,10 @@ export const orderByFractionalIndex = (
  */
 export const syncMovedIndices = (
   elements: readonly ExcalidrawElement[],
-  movedElements: Map<string, ExcalidrawElement>,
+  movedElements: ElementsMap,
 ): OrderedExcalidrawElement[] => {
   try {
+    const elementsMap = arrayToMap(elements);
     const indicesGroups = getMovedIndicesGroups(elements, movedElements);
 
     // try generatating indices, throws on invalid movedElements
@@ -176,7 +178,7 @@ export const syncMovedIndices = (
 
     // split mutation so we don't end up in an incosistent state
     for (const [element, update] of elementsUpdates) {
-      mutateElement(element, update, false);
+      mutateElement(element, elementsMap, update);
     }
   } catch (e) {
     // fallback to default sync
@@ -194,10 +196,12 @@ export const syncMovedIndices = (
 export const syncInvalidIndices = (
   elements: readonly ExcalidrawElement[],
 ): OrderedExcalidrawElement[] => {
+  const elementsMap = arrayToMap(elements);
   const indicesGroups = getInvalidIndicesGroups(elements);
   const elementsUpdates = generateIndices(elements, indicesGroups);
+
   for (const [element, update] of elementsUpdates) {
-    mutateElement(element, update, false);
+    mutateElement(element, elementsMap, update);
   }
 
   return elements as OrderedExcalidrawElement[];
@@ -210,7 +214,7 @@ export const syncInvalidIndices = (
  */
 const getMovedIndicesGroups = (
   elements: readonly ExcalidrawElement[],
-  movedElements: Map<string, ExcalidrawElement>,
+  movedElements: ElementsMap,
 ) => {
   const indicesGroups: number[][] = [];
 
diff --git a/packages/element/src/frame.ts b/packages/element/src/frame.ts
index 664c8d98fc..74375a48d1 100644
--- a/packages/element/src/frame.ts
+++ b/packages/element/src/frame.ts
@@ -3,8 +3,6 @@ import { isPointWithinBounds, pointFrom } from "@excalidraw/math";
 import { doLineSegmentsIntersect } from "@excalidraw/utils/bbox";
 import { elementsOverlappingBBox } from "@excalidraw/utils/withinBounds";
 
-import type { ExcalidrawElementsIncludingDeleted } from "@excalidraw/excalidraw/scene/Scene";
-
 import type {
   AppClassProperties,
   AppState,
@@ -29,6 +27,8 @@ import {
   isTextElement,
 } from "./typeChecks";
 
+import type { ExcalidrawElementsIncludingDeleted } from "./Scene";
+
 import type {
   ElementsMap,
   ElementsMapOrArray,
@@ -56,13 +56,9 @@ export const bindElementsToFramesAfterDuplication = (
       const nextFrameId = origIdToDuplicateId.get(element.frameId);
       const nextElement = nextElementId && nextElementMap.get(nextElementId);
       if (nextElement) {
-        mutateElement(
-          nextElement,
-          {
-            frameId: nextFrameId ?? null,
-          },
-          false,
-        );
+        mutateElement(nextElement, nextElementMap, {
+          frameId: nextFrameId ?? null,
+        });
       }
     }
   }
@@ -565,13 +561,9 @@ export const addElementsToFrame = <T extends ElementsMapOrArray>(
   }
 
   for (const element of finalElementsToAdd) {
-    mutateElement(
-      element,
-      {
-        frameId: frame.id,
-      },
-      false,
-    );
+    mutateElement(element, elementsMap, {
+      frameId: frame.id,
+    });
   }
 
   return allElements;
@@ -609,13 +601,9 @@ export const removeElementsFromFrame = (
   }
 
   for (const [, element] of _elementsToRemove) {
-    mutateElement(
-      element,
-      {
-        frameId: null,
-      },
-      false,
-    );
+    mutateElement(element, elementsMap, {
+      frameId: null,
+    });
   }
 };
 
diff --git a/packages/element/src/linearElementEditor.ts b/packages/element/src/linearElementEditor.ts
index 8a9117bf88..55e3f5c4f7 100644
--- a/packages/element/src/linearElementEditor.ts
+++ b/packages/element/src/linearElementEditor.ts
@@ -20,10 +20,6 @@ import {
   tupleToCoors,
 } from "@excalidraw/common";
 
-// TODO: remove direct dependency on the scene, should be passed in or injected instead
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
-import Scene from "@excalidraw/excalidraw/scene/Scene";
-
 import type { Store } from "@excalidraw/excalidraw/store";
 
 import type { Radians } from "@excalidraw/math";
@@ -50,10 +46,8 @@ import {
   getMinMaxXYFromCurvePathOps,
 } from "./bounds";
 
-import { updateElbowArrowPoints } from "./elbowArrow";
-
 import { headingIsHorizontal, vectorToHeading } from "./heading";
-import { bumpVersion, mutateElement } from "./mutateElement";
+import { mutateElement } from "./mutateElement";
 import { getBoundTextElement, handleBindTextResize } from "./textElement";
 import {
   isBindingElement,
@@ -73,6 +67,8 @@ import {
 
 import { getLockedLinearCursorAlignSize } from "./sizeHelpers";
 
+import type Scene from "./Scene";
+
 import type { Bounds } from "./bounds";
 import type {
   NonDeleted,
@@ -84,7 +80,6 @@ import type {
   ElementsMap,
   NonDeletedSceneElementsMap,
   FixedPointBinding,
-  SceneElementsMap,
   FixedSegment,
   ExcalidrawElbowArrowElement,
 } from "./types";
@@ -127,15 +122,17 @@ export class LinearElementEditor {
   public readonly segmentMidPointHoveredCoords: GlobalPoint | null;
   public readonly elbowed: boolean;
 
-  constructor(element: NonDeleted<ExcalidrawLinearElement>) {
+  constructor(
+    element: NonDeleted<ExcalidrawLinearElement>,
+    elementsMap: ElementsMap,
+  ) {
     this.elementId = element.id as string & {
       _brand: "excalidrawLinearElementId";
     };
     if (!pointsEqual(element.points[0], pointFrom(0, 0))) {
       console.error("Linear element is not normalized", Error().stack);
-      LinearElementEditor.normalizePoints(element);
+      LinearElementEditor.normalizePoints(element, elementsMap);
     }
-
     this.selectedPointsIndices = null;
     this.lastUncommittedPoint = null;
     this.isDragging = false;
@@ -309,7 +306,7 @@ export class LinearElementEditor {
           event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
         );
 
-        LinearElementEditor.movePoints(element, [
+        LinearElementEditor.movePoints(element, scene, [
           {
             index: selectedIndex,
             point: pointFrom(
@@ -333,6 +330,7 @@ export class LinearElementEditor {
 
         LinearElementEditor.movePoints(
           element,
+          scene,
           selectedPointsIndices.map((pointIndex) => {
             const newPointPosition: LocalPoint =
               pointIndex === lastClickedPoint
@@ -358,7 +356,7 @@ export class LinearElementEditor {
 
       const boundTextElement = getBoundTextElement(element, elementsMap);
       if (boundTextElement) {
-        handleBindTextResize(element, elementsMap, false);
+        handleBindTextResize(element, scene, false);
       }
 
       // suggest bindings for first and last point if selected
@@ -453,7 +451,7 @@ export class LinearElementEditor {
           selectedPoint === element.points.length - 1
         ) {
           if (isPathALoop(element.points, appState.zoom.value)) {
-            LinearElementEditor.movePoints(element, [
+            LinearElementEditor.movePoints(element, scene, [
               {
                 index: selectedPoint,
                 point:
@@ -795,7 +793,7 @@ export class LinearElementEditor {
       );
     } else if (event.altKey && appState.editingLinearElement) {
       if (linearElementEditor.lastUncommittedPoint == null) {
-        mutateElement(element, {
+        scene.mutateElement(element, {
           points: [
             ...element.points,
             LinearElementEditor.createPointAt(
@@ -861,7 +859,6 @@ export class LinearElementEditor {
           element,
           startBindingElement,
           endBindingElement,
-          elementsMap,
           scene,
         );
       }
@@ -934,13 +931,13 @@ export class LinearElementEditor {
     scenePointerX: number,
     scenePointerY: number,
     app: AppClassProperties,
-    elementsMap: NonDeletedSceneElementsMap | SceneElementsMap,
   ): LinearElementEditor | null {
     const appState = app.state;
     if (!appState.editingLinearElement) {
       return null;
     }
     const { elementId, lastUncommittedPoint } = appState.editingLinearElement;
+    const elementsMap = app.scene.getNonDeletedElementsMap();
     const element = LinearElementEditor.getElement(elementId, elementsMap);
     if (!element) {
       return appState.editingLinearElement;
@@ -951,7 +948,9 @@ export class LinearElementEditor {
 
     if (!event.altKey) {
       if (lastPoint === lastUncommittedPoint) {
-        LinearElementEditor.deletePoints(element, [points.length - 1]);
+        LinearElementEditor.deletePoints(element, app.scene, [
+          points.length - 1,
+        ]);
       }
       return {
         ...appState.editingLinearElement,
@@ -989,14 +988,14 @@ export class LinearElementEditor {
     }
 
     if (lastPoint === lastUncommittedPoint) {
-      LinearElementEditor.movePoints(element, [
+      LinearElementEditor.movePoints(element, app.scene, [
         {
           index: element.points.length - 1,
           point: newPoint,
         },
       ]);
     } else {
-      LinearElementEditor.addPoints(element, [{ point: newPoint }]);
+      LinearElementEditor.addPoints(element, app.scene, [{ point: newPoint }]);
     }
     return {
       ...appState.editingLinearElement,
@@ -1160,23 +1159,26 @@ export class LinearElementEditor {
       y: element.y + offsetY,
     };
   }
-
   // element-mutating methods
   // ---------------------------------------------------------------------------
-
-  static normalizePoints(element: NonDeleted<ExcalidrawLinearElement>) {
-    mutateElement(element, LinearElementEditor.getNormalizedPoints(element));
+  static normalizePoints(
+    element: NonDeleted<ExcalidrawLinearElement>,
+    elementsMap: ElementsMap,
+  ) {
+    mutateElement(
+      element,
+      elementsMap,
+      LinearElementEditor.getNormalizedPoints(element),
+    );
   }
 
-  static duplicateSelectedPoints(
-    appState: AppState,
-    elementsMap: NonDeletedSceneElementsMap | SceneElementsMap,
-  ): AppState {
+  static duplicateSelectedPoints(appState: AppState, scene: Scene): AppState {
     invariant(
       appState.editingLinearElement,
       "Not currently editing a linear element",
     );
 
+    const elementsMap = scene.getNonDeletedElementsMap();
     const { selectedPointsIndices, elementId } = appState.editingLinearElement;
     const element = LinearElementEditor.getElement(elementId, elementsMap);
 
@@ -1219,13 +1221,13 @@ export class LinearElementEditor {
       return acc;
     }, []);
 
-    mutateElement(element, { points: nextPoints });
+    scene.mutateElement(element, { points: nextPoints });
 
     // temp hack to ensure the line doesn't move when adding point to the end,
     // potentially expanding the bounding box
     if (pointAddedToEnd) {
       const lastPoint = element.points[element.points.length - 1];
-      LinearElementEditor.movePoints(element, [
+      LinearElementEditor.movePoints(element, scene, [
         {
           index: element.points.length - 1,
           point: pointFrom(lastPoint[0] + 30, lastPoint[1] + 30),
@@ -1244,6 +1246,7 @@ export class LinearElementEditor {
 
   static deletePoints(
     element: NonDeleted<ExcalidrawLinearElement>,
+    scene: Scene,
     pointIndices: readonly number[],
   ) {
     let offsetX = 0;
@@ -1274,28 +1277,41 @@ export class LinearElementEditor {
       return acc;
     }, []);
 
-    LinearElementEditor._updatePoints(element, nextPoints, offsetX, offsetY);
+    LinearElementEditor._updatePoints(
+      element,
+      scene,
+      nextPoints,
+      offsetX,
+      offsetY,
+    );
   }
 
   static addPoints(
     element: NonDeleted<ExcalidrawLinearElement>,
+    scene: Scene,
     targetPoints: { point: LocalPoint }[],
   ) {
     const offsetX = 0;
     const offsetY = 0;
 
     const nextPoints = [...element.points, ...targetPoints.map((x) => x.point)];
-    LinearElementEditor._updatePoints(element, nextPoints, offsetX, offsetY);
+    LinearElementEditor._updatePoints(
+      element,
+      scene,
+      nextPoints,
+      offsetX,
+      offsetY,
+    );
   }
 
   static movePoints(
     element: NonDeleted<ExcalidrawLinearElement>,
+    scene: Scene,
     targetPoints: { index: number; point: LocalPoint; isDragging?: boolean }[],
     otherUpdates?: {
       startBinding?: PointBinding | null;
       endBinding?: PointBinding | null;
     },
-    sceneElementsMap?: NonDeletedSceneElementsMap,
   ) {
     const { points } = element;
 
@@ -1329,6 +1345,7 @@ export class LinearElementEditor {
 
     LinearElementEditor._updatePoints(
       element,
+      scene,
       nextPoints,
       offsetX,
       offsetY,
@@ -1339,7 +1356,6 @@ export class LinearElementEditor {
             dragging || targetPoint.isDragging === true,
           false,
         ),
-        sceneElementsMap,
       },
     );
   }
@@ -1394,8 +1410,9 @@ export class LinearElementEditor {
     pointerCoords: PointerCoords,
     app: AppClassProperties,
     snapToGrid: boolean,
-    elementsMap: ElementsMap,
+    scene: Scene,
   ) {
+    const elementsMap = scene.getNonDeletedElementsMap();
     const element = LinearElementEditor.getElement(
       linearElementEditor.elementId,
       elementsMap,
@@ -1425,9 +1442,7 @@ export class LinearElementEditor {
       ...element.points.slice(segmentMidpoint.index!),
     ];
 
-    mutateElement(element, {
-      points,
-    });
+    scene.mutateElement(element, { points });
 
     ret.pointerDownState = {
       ...linearElementEditor.pointerDownState,
@@ -1443,6 +1458,7 @@ export class LinearElementEditor {
 
   private static _updatePoints(
     element: NonDeleted<ExcalidrawLinearElement>,
+    scene: Scene,
     nextPoints: readonly LocalPoint[],
     offsetX: number,
     offsetY: number,
@@ -1479,28 +1495,10 @@ export class LinearElementEditor {
 
       updates.points = Array.from(nextPoints);
 
-      if (!options?.sceneElementsMap || Scene.getScene(element)) {
-        mutateElement(element, updates, true, {
-          isDragging: options?.isDragging,
-        });
-      } else {
-        // The element is not in the scene, so we need to use the provided
-        // scene map.
-        Object.assign(element, {
-          ...updates,
-          angle: 0 as Radians,
-
-          ...updateElbowArrowPoints(
-            element,
-            options.sceneElementsMap,
-            updates,
-            {
-              isDragging: options?.isDragging,
-            },
-          ),
-        });
-      }
-      bumpVersion(element);
+      scene.mutateElement(element, updates, {
+        informMutation: true,
+        isDragging: options?.isDragging ?? false,
+      });
     } else {
       const nextCoords = getElementPointsCoords(element, nextPoints);
       const prevCoords = getElementPointsCoords(element, element.points);
@@ -1515,7 +1513,7 @@ export class LinearElementEditor {
         pointFrom(dX, dY),
         element.angle,
       );
-      mutateElement(element, {
+      scene.mutateElement(element, {
         ...otherUpdates,
         points: nextPoints,
         x: element.x + rotated[0],
@@ -1574,7 +1572,7 @@ export class LinearElementEditor {
       elementsMap,
     );
     if (points.length < 2) {
-      mutateElement(boundTextElement, { isDeleted: true });
+      mutateElement(boundTextElement, elementsMap, { isDeleted: true });
     }
     let x = 0;
     let y = 0;
@@ -1781,8 +1779,9 @@ export class LinearElementEditor {
     index: number,
     x: number,
     y: number,
-    elementsMap: ElementsMap,
+    scene: Scene,
   ): LinearElementEditor {
+    const elementsMap = scene.getNonDeletedElementsMap();
     const element = LinearElementEditor.getElement(
       linearElement.elementId,
       elementsMap,
@@ -1825,7 +1824,7 @@ export class LinearElementEditor {
         .map((segment) => segment.index)
         .reduce((count, idx) => (idx < index ? count + 1 : count), 0);
 
-      mutateElement(element, {
+      scene.mutateElement(element, {
         fixedSegments: nextFixedSegments,
       });
 
@@ -1859,14 +1858,14 @@ export class LinearElementEditor {
 
   static deleteFixedSegment(
     element: ExcalidrawElbowArrowElement,
+    scene: Scene,
     index: number,
   ): void {
-    mutateElement(element, {
+    scene.mutateElement(element, {
       fixedSegments: element.fixedSegments?.filter(
         (segment) => segment.index !== index,
       ),
     });
-    mutateElement(element, {}, true);
   }
 }
 
diff --git a/packages/element/src/mutateElement.ts b/packages/element/src/mutateElement.ts
index d870073690..84785c31c9 100644
--- a/packages/element/src/mutateElement.ts
+++ b/packages/element/src/mutateElement.ts
@@ -2,13 +2,8 @@ import {
   getSizeFromPoints,
   randomInteger,
   getUpdatedTimestamp,
-  toBrandedType,
 } from "@excalidraw/common";
 
-// TODO: remove direct dependency on the scene, should be passed in or injected instead
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
-import Scene from "@excalidraw/excalidraw/scene/Scene";
-
 import type { Radians } from "@excalidraw/math";
 
 import type { Mutable } from "@excalidraw/common/utility-types";
@@ -16,35 +11,42 @@ import type { Mutable } from "@excalidraw/common/utility-types";
 import { ShapeCache } from "./ShapeCache";
 
 import { updateElbowArrowPoints } from "./elbowArrow";
+
 import { isElbowArrow } from "./typeChecks";
 
-import type { ExcalidrawElement, NonDeletedSceneElementsMap } from "./types";
+import type {
+  ElementsMap,
+  ExcalidrawElbowArrowElement,
+  ExcalidrawElement,
+  NonDeletedSceneElementsMap,
+} from "./types";
 
 export type ElementUpdate<TElement extends ExcalidrawElement> = Omit<
   Partial<TElement>,
   "id" | "version" | "versionNonce" | "updated"
 >;
 
-// This function tracks updates of text elements for the purposes for collaboration.
-// The version is used to compare updates when more than one user is working in
-// the same drawing. Note: this will trigger the component to update. Make sure you
-// are calling it either from a React event handler or within unstable_batchedUpdates().
+/**
+ * This function tracks updates of text elements for the purposes for collaboration.
+ * The version is used to compare updates when more than one user is working in
+ * the same drawing.
+ *
+ * WARNING: this won't trigger the component to update, so if you need to trigger component update,
+ * use `scene.mutateElement` or `ExcalidrawImperativeAPI.mutateElement` instead.
+ */
 export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
   element: TElement,
+  elementsMap: ElementsMap,
   updates: ElementUpdate<TElement>,
-  informMutation = true,
   options?: {
-    // Currently only for elbow arrows.
-    // If true, the elbow arrow tries to bind to the nearest element. If false
-    // it tries to keep the same bound element, if any.
     isDragging?: boolean;
   },
-): TElement => {
+) => {
   let didChange = false;
 
   // casting to any because can't use `in` operator
   // (see https://github.com/microsoft/TypeScript/issues/21732)
-  const { points, fixedSegments, fileId, startBinding, endBinding } =
+  const { points, fixedSegments, startBinding, endBinding, fileId } =
     updates as any;
 
   if (
@@ -55,10 +57,6 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
       typeof startBinding !== "undefined" ||
       typeof endBinding !== "undefined") // manual binding to element
   ) {
-    const elementsMap = toBrandedType<NonDeletedSceneElementsMap>(
-      Scene.getScene(element)?.getNonDeletedElementsMap() ?? new Map(),
-    );
-
     updates = {
       ...updates,
       angle: 0 as Radians,
@@ -68,16 +66,9 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
           x: updates.x || element.x,
           y: updates.y || element.y,
         },
-        elementsMap,
-        {
-          fixedSegments,
-          points,
-          startBinding,
-          endBinding,
-        },
-        {
-          isDragging: options?.isDragging,
-        },
+        elementsMap as NonDeletedSceneElementsMap,
+        updates as ElementUpdate<ExcalidrawElbowArrowElement>,
+        options,
       ),
     };
   } else if (typeof points !== "undefined") {
@@ -150,10 +141,6 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
   element.versionNonce = randomInteger();
   element.updated = getUpdatedTimestamp();
 
-  if (informMutation) {
-    Scene.getScene(element)?.triggerUpdate();
-  }
-
   return element;
 };
 
diff --git a/packages/element/src/resizeElements.ts b/packages/element/src/resizeElements.ts
index 3ff405603a..8a1702afac 100644
--- a/packages/element/src/resizeElements.ts
+++ b/packages/element/src/resizeElements.ts
@@ -17,8 +17,6 @@ import {
 
 import type { GlobalPoint } from "@excalidraw/math";
 
-import type Scene from "@excalidraw/excalidraw/scene/Scene";
-
 import type { PointerDownState } from "@excalidraw/excalidraw/types";
 
 import type { Mutable } from "@excalidraw/common/utility-types";
@@ -32,7 +30,6 @@ import {
   getElementBounds,
 } from "./bounds";
 import { LinearElementEditor } from "./linearElementEditor";
-import { mutateElement } from "./mutateElement";
 import {
   getBoundTextElement,
   getBoundTextElementId,
@@ -60,6 +57,8 @@ import {
 
 import { isInGroup } from "./groups";
 
+import type Scene from "./Scene";
+
 import type { BoundingBox } from "./bounds";
 import type {
   MaybeTransformHandleType,
@@ -74,7 +73,6 @@ import type {
   ExcalidrawTextElementWithContainer,
   ExcalidrawImageElement,
   ElementsMap,
-  SceneElementsMap,
   ExcalidrawElbowArrowElement,
 } from "./types";
 
@@ -83,7 +81,6 @@ export const transformElements = (
   originalElements: PointerDownState["originalElements"],
   transformHandleType: MaybeTransformHandleType,
   selectedElements: readonly NonDeletedExcalidrawElement[],
-  elementsMap: SceneElementsMap,
   scene: Scene,
   shouldRotateWithDiscreteAngle: boolean,
   shouldResizeFromCenter: boolean,
@@ -93,31 +90,31 @@ export const transformElements = (
   centerX: number,
   centerY: number,
 ): boolean => {
+  const elementsMap = scene.getNonDeletedElementsMap();
   if (selectedElements.length === 1) {
     const [element] = selectedElements;
     if (transformHandleType === "rotation") {
       if (!isElbowArrow(element)) {
         rotateSingleElement(
           element,
-          elementsMap,
           scene,
           pointerX,
           pointerY,
           shouldRotateWithDiscreteAngle,
         );
-        updateBoundElements(element, elementsMap);
+        updateBoundElements(element, scene);
       }
     } else if (isTextElement(element) && transformHandleType) {
       resizeSingleTextElement(
         originalElements,
         element,
-        elementsMap,
+        scene,
         transformHandleType,
         shouldResizeFromCenter,
         pointerX,
         pointerY,
       );
-      updateBoundElements(element, elementsMap);
+      updateBoundElements(element, scene);
       return true;
     } else if (transformHandleType) {
       const elementId = selectedElements[0].id;
@@ -129,8 +126,6 @@ export const transformElements = (
           getNextSingleWidthAndHeightFromPointer(
             latestElement,
             origElement,
-            elementsMap,
-            originalElements,
             transformHandleType,
             pointerX,
             pointerY,
@@ -145,8 +140,8 @@ export const transformElements = (
           nextHeight,
           latestElement,
           origElement,
-          elementsMap,
           originalElements,
+          scene,
           transformHandleType,
           {
             shouldMaintainAspectRatio,
@@ -161,7 +156,6 @@ export const transformElements = (
       rotateMultipleElements(
         originalElements,
         selectedElements,
-        elementsMap,
         scene,
         pointerX,
         pointerY,
@@ -210,13 +204,15 @@ export const transformElements = (
 
 const rotateSingleElement = (
   element: NonDeletedExcalidrawElement,
-  elementsMap: ElementsMap,
   scene: Scene,
   pointerX: number,
   pointerY: number,
   shouldRotateWithDiscreteAngle: boolean,
 ) => {
-  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
+  const [x1, y1, x2, y2] = getElementAbsoluteCoords(
+    element,
+    scene.getNonDeletedElementsMap(),
+  );
   const cx = (x1 + x2) / 2;
   const cy = (y1 + y2) / 2;
   let angle: Radians;
@@ -233,13 +229,13 @@ const rotateSingleElement = (
   }
   const boundTextElementId = getBoundTextElementId(element);
 
-  mutateElement(element, { angle });
+  scene.mutateElement(element, { angle });
   if (boundTextElementId) {
     const textElement =
       scene.getElement<ExcalidrawTextElementWithContainer>(boundTextElementId);
 
     if (textElement && !isArrowElement(element)) {
-      mutateElement(textElement, { angle });
+      scene.mutateElement(textElement, { angle });
     }
   }
 };
@@ -289,12 +285,13 @@ export const measureFontSizeFromWidth = (
 const resizeSingleTextElement = (
   originalElements: PointerDownState["originalElements"],
   element: NonDeleted<ExcalidrawTextElement>,
-  elementsMap: ElementsMap,
+  scene: Scene,
   transformHandleType: TransformHandleDirection,
   shouldResizeFromCenter: boolean,
   pointerX: number,
   pointerY: number,
 ) => {
+  const elementsMap = scene.getNonDeletedElementsMap();
   const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(
     element,
     elementsMap,
@@ -393,7 +390,7 @@ const resizeSingleTextElement = (
     );
     const [nextX, nextY] = newTopLeft;
 
-    mutateElement(element, {
+    scene.mutateElement(element, {
       fontSize: metrics.size,
       width: nextWidth,
       height: nextHeight,
@@ -508,14 +505,13 @@ const resizeSingleTextElement = (
       autoResize: false,
     };
 
-    mutateElement(element, resizedElement);
+    scene.mutateElement(element, resizedElement);
   }
 };
 
 const rotateMultipleElements = (
   originalElements: PointerDownState["originalElements"],
   elements: readonly NonDeletedExcalidrawElement[],
-  elementsMap: SceneElementsMap,
   scene: Scene,
   pointerX: number,
   pointerY: number,
@@ -523,6 +519,7 @@ const rotateMultipleElements = (
   centerX: number,
   centerY: number,
 ) => {
+  const elementsMap = scene.getNonDeletedElementsMap();
   let centerAngle =
     (5 * Math.PI) / 2 + Math.atan2(pointerY - centerY, pointerX - centerX);
   if (shouldRotateWithDiscreteAngle) {
@@ -543,38 +540,30 @@ const rotateMultipleElements = (
         (centerAngle + origAngle - element.angle) as Radians,
       );
 
-      if (isElbowArrow(element)) {
-        // Needed to re-route the arrow
-        mutateElement(element, {
-          points: getArrowLocalFixedPoints(element, elementsMap),
-        });
-      } else {
-        mutateElement(
-          element,
-          {
+      const updates = isElbowArrow(element)
+        ? {
+            // Needed to re-route the arrow
+            points: getArrowLocalFixedPoints(element, elementsMap),
+          }
+        : {
             x: element.x + (rotatedCX - cx),
             y: element.y + (rotatedCY - cy),
             angle: normalizeRadians((centerAngle + origAngle) as Radians),
-          },
-          false,
-        );
-      }
+          };
 
-      updateBoundElements(element, elementsMap, {
+      scene.mutateElement(element, updates);
+
+      updateBoundElements(element, scene, {
         simultaneouslyUpdated: elements,
       });
 
       const boundText = getBoundTextElement(element, elementsMap);
       if (boundText && !isArrowElement(element)) {
-        mutateElement(
-          boundText,
-          {
-            x: boundText.x + (rotatedCX - cx),
-            y: boundText.y + (rotatedCY - cy),
-            angle: normalizeRadians((centerAngle + origAngle) as Radians),
-          },
-          false,
-        );
+        scene.mutateElement(boundText, {
+          x: boundText.x + (rotatedCX - cx),
+          y: boundText.y + (rotatedCY - cy),
+          angle: normalizeRadians((centerAngle + origAngle) as Radians),
+        });
       }
     }
   }
@@ -819,8 +808,8 @@ export const resizeSingleElement = (
   nextHeight: number,
   latestElement: ExcalidrawElement,
   origElement: ExcalidrawElement,
-  elementsMap: ElementsMap,
   originalElementsMap: ElementsMap,
+  scene: Scene,
   handleDirection: TransformHandleDirection,
   {
     shouldInformMutation = true,
@@ -833,6 +822,7 @@ export const resizeSingleElement = (
   } = {},
 ) => {
   let boundTextFont: { fontSize?: number } = {};
+  const elementsMap = scene.getNonDeletedElementsMap();
   const boundTextElement = getBoundTextElement(latestElement, elementsMap);
 
   if (boundTextElement) {
@@ -932,7 +922,7 @@ export const resizeSingleElement = (
   }
 
   if ("scale" in latestElement && "scale" in origElement) {
-    mutateElement(latestElement, {
+    scene.mutateElement(latestElement, {
       scale: [
         // defaulting because scaleX/Y can be 0/-0
         (Math.sign(nextWidth) || origElement.scale[0]) * origElement.scale[0],
@@ -967,21 +957,24 @@ export const resizeSingleElement = (
       ...rescaledPoints,
     };
 
-    mutateElement(latestElement, updates, shouldInformMutation);
+    scene.mutateElement(latestElement, updates, {
+      informMutation: shouldInformMutation,
+      isDragging: false,
+    });
 
-    updateBoundElements(latestElement, elementsMap as SceneElementsMap, {
+    updateBoundElements(latestElement, scene, {
       // TODO: confirm with MARK if this actually makes sense
       newSize: { width: nextWidth, height: nextHeight },
     });
 
     if (boundTextElement && boundTextFont != null) {
-      mutateElement(boundTextElement, {
+      scene.mutateElement(boundTextElement, {
         fontSize: boundTextFont.fontSize,
       });
     }
     handleBindTextResize(
       latestElement,
-      elementsMap,
+      scene,
       handleDirection,
       shouldMaintainAspectRatio,
     );
@@ -991,8 +984,6 @@ export const resizeSingleElement = (
 const getNextSingleWidthAndHeightFromPointer = (
   latestElement: ExcalidrawElement,
   origElement: ExcalidrawElement,
-  elementsMap: ElementsMap,
-  originalElementsMap: ElementsMap,
   handleDirection: TransformHandleDirection,
   pointerX: number,
   pointerY: number,
@@ -1527,27 +1518,24 @@ export const resizeMultipleElements = (
     } of elementsAndUpdates) {
       const { width, height, angle } = update;
 
-      mutateElement(element, update, false, {
+      scene.mutateElement(element, update, {
+        informMutation: true,
         // needed for the fixed binding point udpate to take effect
         isDragging: true,
       });
 
-      updateBoundElements(element, elementsMap as SceneElementsMap, {
+      updateBoundElements(element, scene, {
         simultaneouslyUpdated: elementsToUpdate,
         newSize: { width, height },
       });
 
       const boundTextElement = getBoundTextElement(element, elementsMap);
       if (boundTextElement && boundTextFontSize) {
-        mutateElement(
-          boundTextElement,
-          {
-            fontSize: boundTextFontSize,
-            angle: isLinearElement(element) ? undefined : angle,
-          },
-          false,
-        );
-        handleBindTextResize(element, elementsMap, handleDirection, true);
+        scene.mutateElement(boundTextElement, {
+          fontSize: boundTextFontSize,
+          angle: isLinearElement(element) ? undefined : angle,
+        });
+        handleBindTextResize(element, scene, handleDirection, true);
       }
     }
 
diff --git a/packages/element/src/selection.ts b/packages/element/src/selection.ts
index e07c96d383..ca8c28d40c 100644
--- a/packages/element/src/selection.ts
+++ b/packages/element/src/selection.ts
@@ -1,4 +1,4 @@
-import { isShallowEqual } from "@excalidraw/common";
+import { arrayToMap, isShallowEqual } from "@excalidraw/common";
 
 import type {
   AppState,
@@ -264,6 +264,7 @@ export const makeNextSelectedElementIds = (
 
 const _getLinearElementEditor = (
   targetElements: readonly ExcalidrawElement[],
+  allElements: readonly NonDeletedExcalidrawElement[],
 ) => {
   const linears = targetElements.filter(isLinearElement);
   if (linears.length === 1) {
@@ -274,7 +275,7 @@ const _getLinearElementEditor = (
     );
 
     if (onlySingleLinearSelected) {
-      return new LinearElementEditor(linear);
+      return new LinearElementEditor(linear, arrayToMap(allElements));
     }
   }
 
@@ -287,7 +288,7 @@ export const getSelectionStateForElements = (
   appState: AppState,
 ) => {
   return {
-    selectedLinearElement: _getLinearElementEditor(targetElements),
+    selectedLinearElement: _getLinearElementEditor(targetElements, allElements),
     ...selectGroupsForSelectedElements(
       {
         editingGroupId: appState.editingGroupId,
diff --git a/packages/element/src/sizeHelpers.ts b/packages/element/src/sizeHelpers.ts
index 7a84dadba4..bd3d3fb0c4 100644
--- a/packages/element/src/sizeHelpers.ts
+++ b/packages/element/src/sizeHelpers.ts
@@ -6,7 +6,6 @@ import {
 import type { AppState, Offsets, Zoom } from "@excalidraw/excalidraw/types";
 
 import { getCommonBounds, getElementBounds } from "./bounds";
-import { mutateElement } from "./mutateElement";
 import { isFreeDrawElement, isLinearElement } from "./typeChecks";
 
 import type { ElementsMap, ExcalidrawElement } from "./types";
@@ -170,41 +169,6 @@ export const getLockedLinearCursorAlignSize = (
   return { width, height };
 };
 
-export const resizePerfectLineForNWHandler = (
-  element: ExcalidrawElement,
-  x: number,
-  y: number,
-) => {
-  const anchorX = element.x + element.width;
-  const anchorY = element.y + element.height;
-  const distanceToAnchorX = x - anchorX;
-  const distanceToAnchorY = y - anchorY;
-  if (Math.abs(distanceToAnchorX) < Math.abs(distanceToAnchorY) / 2) {
-    mutateElement(element, {
-      x: anchorX,
-      width: 0,
-      y,
-      height: -distanceToAnchorY,
-    });
-  } else if (Math.abs(distanceToAnchorY) < Math.abs(element.width) / 2) {
-    mutateElement(element, {
-      y: anchorY,
-      height: 0,
-    });
-  } else {
-    const nextHeight =
-      Math.sign(distanceToAnchorY) *
-      Math.sign(distanceToAnchorX) *
-      element.width;
-    mutateElement(element, {
-      x,
-      y: anchorY - nextHeight,
-      width: -distanceToAnchorX,
-      height: nextHeight,
-    });
-  }
-};
-
 export const getNormalizedDimensions = (
   element: Pick<ExcalidrawElement, "width" | "height" | "x" | "y">,
 ): {
diff --git a/packages/element/src/textElement.ts b/packages/element/src/textElement.ts
index 55c3f692ce..8ec0ef426a 100644
--- a/packages/element/src/textElement.ts
+++ b/packages/element/src/textElement.ts
@@ -14,12 +14,14 @@ import type { AppState } from "@excalidraw/excalidraw/types";
 
 import type { ExtractSetType } from "@excalidraw/common/utility-types";
 
+import type { Radians } from "@excalidraw/math";
+
 import {
   resetOriginalContainerCache,
   updateOriginalContainerCache,
 } from "./containerCache";
 import { LinearElementEditor } from "./linearElementEditor";
-import { mutateElement } from "./mutateElement";
+
 import { measureText } from "./textMeasurements";
 import { wrapText } from "./textWrapping";
 import {
@@ -28,7 +30,7 @@ import {
   isTextElement,
 } from "./typeChecks";
 
-import type { Radians } from "../../math/src";
+import type Scene from "./Scene";
 
 import type { MaybeTransformHandleType } from "./transformHandles";
 import type {
@@ -44,9 +46,10 @@ import type {
 export const redrawTextBoundingBox = (
   textElement: ExcalidrawTextElement,
   container: ExcalidrawElement | null,
-  elementsMap: ElementsMap,
-  informMutation = true,
+  scene: Scene,
 ) => {
+  const elementsMap = scene.getNonDeletedElementsMap();
+
   let maxWidth = undefined;
 
   if (!isProdEnv()) {
@@ -106,38 +109,43 @@ export const redrawTextBoundingBox = (
         metrics.height,
         container.type,
       );
-      mutateElement(container, { height: nextHeight }, informMutation);
+      scene.mutateElement(container, { height: nextHeight });
       updateOriginalContainerCache(container.id, nextHeight);
     }
+
     if (metrics.width > maxContainerWidth) {
       const nextWidth = computeContainerDimensionForBoundText(
         metrics.width,
         container.type,
       );
-      mutateElement(container, { width: nextWidth }, informMutation);
+      scene.mutateElement(container, { width: nextWidth });
     }
+
     const updatedTextElement = {
       ...textElement,
       ...boundTextUpdates,
     } as ExcalidrawTextElementWithContainer;
+
     const { x, y } = computeBoundTextPosition(
       container,
       updatedTextElement,
       elementsMap,
     );
+
     boundTextUpdates.x = x;
     boundTextUpdates.y = y;
   }
 
-  mutateElement(textElement, boundTextUpdates, informMutation);
+  scene.mutateElement(textElement, boundTextUpdates);
 };
 
 export const handleBindTextResize = (
   container: NonDeletedExcalidrawElement,
-  elementsMap: ElementsMap,
+  scene: Scene,
   transformHandleType: MaybeTransformHandleType,
   shouldMaintainAspectRatio = false,
 ) => {
+  const elementsMap = scene.getNonDeletedElementsMap();
   const boundTextElementId = getBoundTextElementId(container);
   if (!boundTextElementId) {
     return;
@@ -190,20 +198,20 @@ export const handleBindTextResize = (
           transformHandleType === "n")
           ? container.y - diff
           : container.y;
-      mutateElement(container, {
+      scene.mutateElement(container, {
         height: containerHeight,
         y: updatedY,
       });
     }
 
-    mutateElement(textElement, {
+    scene.mutateElement(textElement, {
       text,
       width: nextWidth,
       height: nextHeight,
     });
 
     if (!isArrowElement(container)) {
-      mutateElement(
+      scene.mutateElement(
         textElement,
         computeBoundTextPosition(container, textElement, elementsMap),
       );
diff --git a/packages/element/src/zindex.ts b/packages/element/src/zindex.ts
index e09142e4a0..b99cf833cc 100644
--- a/packages/element/src/zindex.ts
+++ b/packages/element/src/zindex.ts
@@ -2,8 +2,6 @@ import { arrayToMap, findIndex, findLastIndex } from "@excalidraw/common";
 
 import type { AppState } from "@excalidraw/excalidraw/types";
 
-import type Scene from "@excalidraw/excalidraw/scene/Scene";
-
 import { isFrameLikeElement } from "./typeChecks";
 
 import { getElementsInGroup } from "./groups";
@@ -12,6 +10,8 @@ import { syncMovedIndices } from "./fractionalIndex";
 
 import { getSelectedElements } from "./selection";
 
+import type Scene from "./Scene";
+
 import type { ExcalidrawElement, ExcalidrawFrameLikeElement } from "./types";
 
 const isOfTargetFrame = (element: ExcalidrawElement, frameId: string) => {
diff --git a/packages/element/tests/duplicate.test.tsx b/packages/element/tests/duplicate.test.tsx
index fd748757bb..ed25083904 100644
--- a/packages/element/tests/duplicate.test.tsx
+++ b/packages/element/tests/duplicate.test.tsx
@@ -7,7 +7,7 @@ import {
   isPrimitive,
 } from "@excalidraw/common";
 
-import { Excalidraw } from "@excalidraw/excalidraw";
+import { Excalidraw, mutateElement } from "@excalidraw/excalidraw";
 
 import { actionDuplicateSelection } from "@excalidraw/excalidraw/actions";
 
@@ -24,7 +24,6 @@ import {
 
 import type { LocalPoint } from "@excalidraw/math";
 
-import { mutateElement } from "../src/mutateElement";
 import { duplicateElement, duplicateElements } from "../src/duplicate";
 
 import type { ExcalidrawLinearElement } from "../src/types";
@@ -62,7 +61,7 @@ describe("duplicating single elements", () => {
     // @ts-ignore
     element.__proto__ = { hello: "world" };
 
-    mutateElement(element, {
+    mutateElement(element, new Map(), {
       points: [pointFrom<LocalPoint>(1, 2), pointFrom<LocalPoint>(3, 4)],
     });
 
diff --git a/packages/element/tests/elbowArrow.test.tsx b/packages/element/tests/elbowArrow.test.tsx
index b8b5a8b85d..25f64072e7 100644
--- a/packages/element/tests/elbowArrow.test.tsx
+++ b/packages/element/tests/elbowArrow.test.tsx
@@ -1,8 +1,7 @@
 import { ARROW_TYPE } from "@excalidraw/common";
 import { pointFrom } from "@excalidraw/math";
-import { Excalidraw, mutateElement } from "@excalidraw/excalidraw";
+import { Excalidraw } from "@excalidraw/excalidraw";
 
-import Scene from "@excalidraw/excalidraw/scene/Scene";
 import { actionSelectAll } from "@excalidraw/excalidraw/actions";
 import { actionDuplicateSelection } from "@excalidraw/excalidraw/actions/actionDuplicateSelection";
 
@@ -23,6 +22,8 @@ import type { LocalPoint } from "@excalidraw/math";
 
 import { bindLinearElement } from "../src/binding";
 
+import Scene from "../src/Scene";
+
 import type {
   ExcalidrawArrowElement,
   ExcalidrawBindableElement,
@@ -142,7 +143,7 @@ describe("elbow arrow routing", () => {
       elbowed: true,
     }) as ExcalidrawElbowArrowElement;
     scene.insertElement(arrow);
-    mutateElement(arrow, {
+    h.app.scene.mutateElement(arrow, {
       points: [
         pointFrom<LocalPoint>(-45 - arrow.x, -100.1 - arrow.y),
         pointFrom<LocalPoint>(45 - arrow.x, 99.9 - arrow.y),
@@ -187,14 +188,14 @@ describe("elbow arrow routing", () => {
     scene.insertElement(rectangle1);
     scene.insertElement(rectangle2);
     scene.insertElement(arrow);
-    const elementsMap = scene.getNonDeletedElementsMap();
-    bindLinearElement(arrow, rectangle1, "start", elementsMap);
-    bindLinearElement(arrow, rectangle2, "end", elementsMap);
+
+    bindLinearElement(arrow, rectangle1, "start", scene);
+    bindLinearElement(arrow, rectangle2, "end", scene);
 
     expect(arrow.startBinding).not.toBe(null);
     expect(arrow.endBinding).not.toBe(null);
 
-    mutateElement(arrow, {
+    h.app.scene.mutateElement(arrow, {
       points: [pointFrom<LocalPoint>(0, 0), pointFrom<LocalPoint>(90, 200)],
     });
 
diff --git a/packages/element/tests/fractionalIndex.test.ts b/packages/element/tests/fractionalIndex.test.ts
index 5d040e29f2..c8cc9ad2d1 100644
--- a/packages/element/tests/fractionalIndex.test.ts
+++ b/packages/element/tests/fractionalIndex.test.ts
@@ -14,6 +14,7 @@ import { deepCopyElement } from "@excalidraw/element/duplicate";
 import { API } from "@excalidraw/excalidraw/tests/helpers/api";
 
 import type {
+  ElementsMap,
   ExcalidrawElement,
   FractionalIndex,
 } from "@excalidraw/element/types";
@@ -749,7 +750,7 @@ function testInvalidIndicesSync(args: {
 function prepareArguments(
   elementsLike: { id: string; index?: string }[],
   movedElementsIds?: string[],
-): [ExcalidrawElement[], Map<string, ExcalidrawElement> | undefined] {
+): [ExcalidrawElement[], ElementsMap | undefined] {
   const elements = elementsLike.map((x) =>
     API.createElement({ id: x.id, index: x.index as FractionalIndex }),
   );
@@ -764,7 +765,7 @@ function prepareArguments(
 function test(
   name: string,
   elements: ExcalidrawElement[],
-  movedElements: Map<string, ExcalidrawElement> | undefined,
+  movedElements: ElementsMap | undefined,
   expectUnchangedElements: Map<string, { id: string }>,
   expectValidInput?: boolean,
 ) {
diff --git a/packages/element/tests/resize.test.tsx b/packages/element/tests/resize.test.tsx
index f3804e2a22..98fbf2a9a0 100644
--- a/packages/element/tests/resize.test.tsx
+++ b/packages/element/tests/resize.test.tsx
@@ -333,7 +333,7 @@ describe("line element", () => {
       element,
       element,
       h.app.scene.getNonDeletedElementsMap(),
-      h.app.scene.getNonDeletedElementsMap(),
+      h.app.scene,
       "ne",
     );
 
@@ -369,7 +369,7 @@ describe("line element", () => {
       element,
       element,
       h.app.scene.getNonDeletedElementsMap(),
-      h.app.scene.getNonDeletedElementsMap(),
+      h.app.scene,
       "se",
     );
 
@@ -424,7 +424,7 @@ describe("line element", () => {
       element,
       element,
       h.app.scene.getNonDeletedElementsMap(),
-      h.app.scene.getNonDeletedElementsMap(),
+      h.app.scene,
       "e",
       {
         shouldResizeFromCenter: true,
diff --git a/packages/element/tests/sortElements.test.ts b/packages/element/tests/sortElements.test.ts
index 509e5e9d0a..1735a6bece 100644
--- a/packages/element/tests/sortElements.test.ts
+++ b/packages/element/tests/sortElements.test.ts
@@ -1,10 +1,12 @@
 import { API } from "@excalidraw/excalidraw/tests/helpers/api";
 
-import { mutateElement } from "../src/mutateElement";
+import { mutateElement } from "@excalidraw/element/mutateElement";
+
 import { normalizeElementOrder } from "../src/sortElements";
 
 import type { ExcalidrawElement } from "../src/types";
 
+const { h } = window;
 const assertOrder = (
   elements: readonly ExcalidrawElement[],
   expectedOrder: string[],
@@ -35,7 +37,7 @@ describe("normalizeElementsOrder", () => {
       boundElements: [],
     });
 
-    mutateElement(container, {
+    mutateElement(container, new Map(), {
       boundElements: [{ type: "text", id: boundText.id }],
     });
 
@@ -352,7 +354,7 @@ describe("normalizeElementsOrder", () => {
       containerId: container.id,
     });
 
-    mutateElement(container, {
+    h.app.scene.mutateElement(container, {
       boundElements: [
         { type: "text", id: boundText.id },
         { type: "text", id: "xxx" },
@@ -387,7 +389,7 @@ describe("normalizeElementsOrder", () => {
           boundElements: [],
           groupIds: ["C", "A"],
         });
-        mutateElement(container, {
+        h.app.scene.mutateElement(container, {
           boundElements: [{ type: "text", id: boundText.id }],
         });
 
diff --git a/packages/excalidraw/actions/actionAlign.tsx b/packages/excalidraw/actions/actionAlign.tsx
index 46023d61ea..0ef938c67f 100644
--- a/packages/excalidraw/actions/actionAlign.tsx
+++ b/packages/excalidraw/actions/actionAlign.tsx
@@ -50,14 +50,8 @@ const alignSelectedElements = (
   alignment: Alignment,
 ) => {
   const selectedElements = app.scene.getSelectedElements(appState);
-  const elementsMap = arrayToMap(elements);
 
-  const updatedElements = alignElements(
-    selectedElements,
-    elementsMap,
-    alignment,
-    app.scene,
-  );
+  const updatedElements = alignElements(selectedElements, alignment, app.scene);
 
   const updatedElementsMap = arrayToMap(updatedElements);
 
diff --git a/packages/excalidraw/actions/actionBoundText.tsx b/packages/excalidraw/actions/actionBoundText.tsx
index d08ad341ee..c7843656cf 100644
--- a/packages/excalidraw/actions/actionBoundText.tsx
+++ b/packages/excalidraw/actions/actionBoundText.tsx
@@ -27,7 +27,6 @@ import {
   isUsingAdaptiveRadius,
 } from "@excalidraw/element/typeChecks";
 
-import { mutateElement } from "@excalidraw/element/mutateElement";
 import { measureText } from "@excalidraw/element/textMeasurements";
 
 import { syncMovedIndices } from "@excalidraw/element/fractionalIndex";
@@ -43,12 +42,12 @@ import type {
 
 import type { Mutable } from "@excalidraw/common/utility-types";
 
+import type { Radians } from "@excalidraw/math";
+
 import { CaptureUpdateAction } from "../store";
 
 import { register } from "./register";
 
-import type { Radians } from "../../math/src";
-
 import type { AppState } from "../types";
 
 export const actionUnbindText = register({
@@ -80,7 +79,7 @@ export const actionUnbindText = register({
           boundTextElement,
           elementsMap,
         );
-        mutateElement(boundTextElement as ExcalidrawTextElement, {
+        app.scene.mutateElement(boundTextElement as ExcalidrawTextElement, {
           containerId: null,
           width,
           height,
@@ -88,7 +87,7 @@ export const actionUnbindText = register({
           x,
           y,
         });
-        mutateElement(element, {
+        app.scene.mutateElement(element, {
           boundElements: element.boundElements?.filter(
             (ele) => ele.id !== boundTextElement.id,
           ),
@@ -153,25 +152,21 @@ export const actionBindText = register({
       textElement = selectedElements[1] as ExcalidrawTextElement;
       container = selectedElements[0] as ExcalidrawTextContainer;
     }
-    mutateElement(textElement, {
+    app.scene.mutateElement(textElement, {
       containerId: container.id,
       verticalAlign: VERTICAL_ALIGN.MIDDLE,
       textAlign: TEXT_ALIGN.CENTER,
       autoResize: true,
       angle: (isArrowElement(container) ? 0 : container?.angle ?? 0) as Radians,
     });
-    mutateElement(container, {
+    app.scene.mutateElement(container, {
       boundElements: (container.boundElements || []).concat({
         type: "text",
         id: textElement.id,
       }),
     });
     const originalContainerHeight = container.height;
-    redrawTextBoundingBox(
-      textElement,
-      container,
-      app.scene.getNonDeletedElementsMap(),
-    );
+    redrawTextBoundingBox(textElement, container, app.scene);
     // overwritting the cache with original container height so
     // it can be restored when unbind
     updateOriginalContainerCache(container.id, originalContainerHeight);
@@ -301,27 +296,23 @@ export const actionWrapTextInContainer = register({
             }
 
             if (startBinding || endBinding) {
-              mutateElement(ele, { startBinding, endBinding }, false);
+              app.scene.mutateElement(ele, {
+                startBinding,
+                endBinding,
+              });
             }
           });
         }
 
-        mutateElement(
-          textElement,
-          {
-            containerId: container.id,
-            verticalAlign: VERTICAL_ALIGN.MIDDLE,
-            boundElements: null,
-            textAlign: TEXT_ALIGN.CENTER,
-            autoResize: true,
-          },
-          false,
-        );
-        redrawTextBoundingBox(
-          textElement,
-          container,
-          app.scene.getNonDeletedElementsMap(),
-        );
+        app.scene.mutateElement(textElement, {
+          containerId: container.id,
+          verticalAlign: VERTICAL_ALIGN.MIDDLE,
+          boundElements: null,
+          textAlign: TEXT_ALIGN.CENTER,
+          autoResize: true,
+        });
+
+        redrawTextBoundingBox(textElement, container, app.scene);
 
         updatedElements = pushContainerBelowText(
           [...updatedElements, container],
diff --git a/packages/excalidraw/actions/actionDeleteSelected.test.tsx b/packages/excalidraw/actions/actionDeleteSelected.test.tsx
index 090c819418..708d2cc556 100644
--- a/packages/excalidraw/actions/actionDeleteSelected.test.tsx
+++ b/packages/excalidraw/actions/actionDeleteSelected.test.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Excalidraw, mutateElement } from "../index";
+import { Excalidraw } from "../index";
 import { API } from "../tests/helpers/api";
 import { act, assertElements, render } from "../tests/test-utils";
 
@@ -56,7 +56,7 @@ describe("deleting selected elements when frame selected should keep children +
       frameId: f1.id,
     });
 
-    mutateElement(r1, {
+    h.app.scene.mutateElement(r1, {
       boundElements: [{ type: "text", id: t1.id }],
     });
 
@@ -94,7 +94,7 @@ describe("deleting selected elements when frame selected should keep children +
       frameId: null,
     });
 
-    mutateElement(r1, {
+    h.app.scene.mutateElement(r1, {
       boundElements: [{ type: "text", id: t1.id }],
     });
 
@@ -132,7 +132,7 @@ describe("deleting selected elements when frame selected should keep children +
       frameId: null,
     });
 
-    mutateElement(r1, {
+    h.app.scene.mutateElement(r1, {
       boundElements: [{ type: "text", id: t1.id }],
     });
 
@@ -170,7 +170,7 @@ describe("deleting selected elements when frame selected should keep children +
       frameId: null,
     });
 
-    mutateElement(a1, {
+    h.app.scene.mutateElement(a1, {
       boundElements: [{ type: "text", id: t1.id }],
     });
 
diff --git a/packages/excalidraw/actions/actionDeleteSelected.tsx b/packages/excalidraw/actions/actionDeleteSelected.tsx
index 75e666df02..e183d05f49 100644
--- a/packages/excalidraw/actions/actionDeleteSelected.tsx
+++ b/packages/excalidraw/actions/actionDeleteSelected.tsx
@@ -3,10 +3,7 @@ import { KEYS, updateActiveTool } from "@excalidraw/common";
 import { getNonDeletedElements } from "@excalidraw/element";
 import { fixBindingsAfterDeletion } from "@excalidraw/element/binding";
 import { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
-import {
-  mutateElement,
-  newElementWith,
-} from "@excalidraw/element/mutateElement";
+import { newElementWith } from "@excalidraw/element/mutateElement";
 import { getContainerElement } from "@excalidraw/element/textElement";
 import {
   isBoundToContainer,
@@ -94,7 +91,7 @@ const deleteSelectedElements = (
         el.boundElements.forEach((candidate) => {
           const bound = app.scene.getNonDeletedElementsMap().get(candidate.id);
           if (bound && isElbowArrow(bound)) {
-            mutateElement(bound, {
+            app.scene.mutateElement(bound, {
               startBinding:
                 el.id === bound.startBinding?.elementId
                   ? null
@@ -102,7 +99,6 @@ const deleteSelectedElements = (
               endBinding:
                 el.id === bound.endBinding?.elementId ? null : bound.endBinding,
             });
-            mutateElement(bound, { points: bound.points });
           }
         });
       }
@@ -261,7 +257,11 @@ export const actionDeleteSelected = register({
           : endBindingElement,
       };
 
-      LinearElementEditor.deletePoints(element, selectedPointsIndices);
+      LinearElementEditor.deletePoints(
+        element,
+        app.scene,
+        selectedPointsIndices,
+      );
 
       return {
         elements,
diff --git a/packages/excalidraw/actions/actionDuplicateSelection.tsx b/packages/excalidraw/actions/actionDuplicateSelection.tsx
index 17b452c365..034edf5438 100644
--- a/packages/excalidraw/actions/actionDuplicateSelection.tsx
+++ b/packages/excalidraw/actions/actionDuplicateSelection.tsx
@@ -43,7 +43,7 @@ export const actionDuplicateSelection = register({
       try {
         const newAppState = LinearElementEditor.duplicateSelectedPoints(
           appState,
-          app.scene.getNonDeletedElementsMap(),
+          app.scene,
         );
 
         return {
diff --git a/packages/excalidraw/actions/actionFinalize.tsx b/packages/excalidraw/actions/actionFinalize.tsx
index 9849616562..22638ee917 100644
--- a/packages/excalidraw/actions/actionFinalize.tsx
+++ b/packages/excalidraw/actions/actionFinalize.tsx
@@ -5,7 +5,7 @@ import {
   bindOrUnbindLinearElement,
 } from "@excalidraw/element/binding";
 import { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
-import { mutateElement } from "@excalidraw/element/mutateElement";
+
 import {
   isBindingElement,
   isLinearElement,
@@ -46,7 +46,6 @@ export const actionFinalize = register({
             element,
             startBindingElement,
             endBindingElement,
-            elementsMap,
             scene,
           );
         }
@@ -72,7 +71,11 @@ export const actionFinalize = register({
       scene.getElement(appState.pendingImageElementId);
 
     if (pendingImageElement) {
-      mutateElement(pendingImageElement, { isDeleted: true }, false);
+      scene.mutateElement(
+        pendingImageElement,
+        { isDeleted: true },
+        { informMutation: false, isDragging: false },
+      );
     }
 
     if (window.document.activeElement instanceof HTMLElement) {
@@ -96,7 +99,7 @@ export const actionFinalize = register({
           !lastCommittedPoint ||
           points[points.length - 1] !== lastCommittedPoint
         ) {
-          mutateElement(multiPointElement, {
+          scene.mutateElement(multiPointElement, {
             points: multiPointElement.points.slice(0, -1),
           });
         }
@@ -120,7 +123,7 @@ export const actionFinalize = register({
         if (isLoop) {
           const linePoints = multiPointElement.points;
           const firstPoint = linePoints[0];
-          mutateElement(multiPointElement, {
+          scene.mutateElement(multiPointElement, {
             points: linePoints.map((p, index) =>
               index === linePoints.length - 1
                 ? pointFrom(firstPoint[0], firstPoint[1])
@@ -140,13 +143,7 @@ export const actionFinalize = register({
           -1,
           arrayToMap(elements),
         );
-        maybeBindLinearElement(
-          multiPointElement,
-          appState,
-          { x, y },
-          elementsMap,
-          elements,
-        );
+        maybeBindLinearElement(multiPointElement, appState, { x, y }, scene);
       }
     }
 
@@ -202,7 +199,10 @@ export const actionFinalize = register({
         // To select the linear element when user has finished mutipoint editing
         selectedLinearElement:
           multiPointElement && isLinearElement(multiPointElement)
-            ? new LinearElementEditor(multiPointElement)
+            ? new LinearElementEditor(
+                multiPointElement,
+                arrayToMap(newElements),
+              )
             : appState.selectedLinearElement,
         pendingImageElementId: null,
       },
diff --git a/packages/excalidraw/actions/actionFlip.ts b/packages/excalidraw/actions/actionFlip.ts
index 62be891cb7..becc8a976d 100644
--- a/packages/excalidraw/actions/actionFlip.ts
+++ b/packages/excalidraw/actions/actionFlip.ts
@@ -4,10 +4,7 @@ import {
   isBindingEnabled,
 } from "@excalidraw/element/binding";
 import { getCommonBoundingBox } from "@excalidraw/element/bounds";
-import {
-  mutateElement,
-  newElementWith,
-} from "@excalidraw/element/mutateElement";
+import { newElementWith } from "@excalidraw/element/mutateElement";
 import { deepCopyElement } from "@excalidraw/element/duplicate";
 import { resizeMultipleElements } from "@excalidraw/element/resizeElements";
 import {
@@ -162,11 +159,9 @@ const flipElements = (
 
   bindOrUnbindLinearElements(
     selectedElements.filter(isLinearElement),
-    elementsMap,
-    app.scene.getNonDeletedElements(),
-    app.scene,
     isBindingEnabled(appState),
     [],
+    app.scene,
     appState.zoom,
   );
 
@@ -194,13 +189,13 @@ const flipElements = (
     getCommonBoundingBox(selectedElements);
   const [diffX, diffY] = [midX - newMidX, midY - newMidY];
   otherElements.forEach((element) =>
-    mutateElement(element, {
+    app.scene.mutateElement(element, {
       x: element.x + diffX,
       y: element.y + diffY,
     }),
   );
   elbowArrows.forEach((element) =>
-    mutateElement(element, {
+    app.scene.mutateElement(element, {
       x: element.x + diffX,
       y: element.y + diffY,
     }),
diff --git a/packages/excalidraw/actions/actionFrame.ts b/packages/excalidraw/actions/actionFrame.ts
index 13d57b2a12..7882d26f6f 100644
--- a/packages/excalidraw/actions/actionFrame.ts
+++ b/packages/excalidraw/actions/actionFrame.ts
@@ -173,11 +173,9 @@ export const actionWrapSelectionInFrame = register({
   },
   perform: (elements, appState, _, app) => {
     const selectedElements = getSelectedElements(elements, appState);
+    const elementsMap = app.scene.getNonDeletedElementsMap();
 
-    const [x1, y1, x2, y2] = getCommonBounds(
-      selectedElements,
-      app.scene.getNonDeletedElementsMap(),
-    );
+    const [x1, y1, x2, y2] = getCommonBounds(selectedElements, elementsMap);
     const PADDING = 16;
     const frame = newFrameElement({
       x: x1 - PADDING,
@@ -196,13 +194,9 @@ export const actionWrapSelectionInFrame = register({
       for (const elementInGroup of elementsInGroup) {
         const index = elementInGroup.groupIds.indexOf(appState.editingGroupId);
 
-        mutateElement(
-          elementInGroup,
-          {
-            groupIds: elementInGroup.groupIds.slice(0, index),
-          },
-          false,
-        );
+        mutateElement(elementInGroup, elementsMap, {
+          groupIds: elementInGroup.groupIds.slice(0, index),
+        });
       }
     }
 
diff --git a/packages/excalidraw/actions/actionLinearEditor.tsx b/packages/excalidraw/actions/actionLinearEditor.tsx
index 56e327bd2e..1645554bf7 100644
--- a/packages/excalidraw/actions/actionLinearEditor.tsx
+++ b/packages/excalidraw/actions/actionLinearEditor.tsx
@@ -2,6 +2,8 @@ import { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
 
 import { isElbowArrow, isLinearElement } from "@excalidraw/element/typeChecks";
 
+import { arrayToMap } from "@excalidraw/common";
+
 import type { ExcalidrawLinearElement } from "@excalidraw/element/types";
 
 import { DEFAULT_CATEGORIES } from "../components/CommandPalette/CommandPalette";
@@ -50,7 +52,7 @@ export const actionToggleLinearEditor = register({
     const editingLinearElement =
       appState.editingLinearElement?.elementId === selectedElement.id
         ? null
-        : new LinearElementEditor(selectedElement);
+        : new LinearElementEditor(selectedElement, arrayToMap(elements));
     return {
       appState: {
         ...appState,
diff --git a/packages/excalidraw/actions/actionProperties.tsx b/packages/excalidraw/actions/actionProperties.tsx
index 5a309b6775..df07960aff 100644
--- a/packages/excalidraw/actions/actionProperties.tsx
+++ b/packages/excalidraw/actions/actionProperties.tsx
@@ -34,10 +34,7 @@ import {
 
 import { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
 
-import {
-  mutateElement,
-  newElementWith,
-} from "@excalidraw/element/mutateElement";
+import { newElementWith } from "@excalidraw/element/mutateElement";
 
 import {
   getBoundTextElement,
@@ -61,6 +58,7 @@ import type { LocalPoint } from "@excalidraw/math";
 
 import type {
   Arrowhead,
+  ElementsMap,
   ExcalidrawBindableElement,
   ExcalidrawElement,
   ExcalidrawLinearElement,
@@ -68,9 +66,10 @@ import type {
   FontFamilyValues,
   TextAlign,
   VerticalAlign,
-  NonDeletedSceneElementsMap,
 } from "@excalidraw/element/types";
 
+import type Scene from "@excalidraw/element/Scene";
+
 import { trackEvent } from "../analytics";
 import { ButtonIconSelect } from "../components/ButtonIconSelect";
 import { ColorPicker } from "../components/ColorPicker/ColorPicker";
@@ -207,25 +206,22 @@ export const getFormValue = function <T extends Primitive>(
 const offsetElementAfterFontResize = (
   prevElement: ExcalidrawTextElement,
   nextElement: ExcalidrawTextElement,
+  scene: Scene,
 ) => {
   if (isBoundToContainer(nextElement) || !nextElement.autoResize) {
     return nextElement;
   }
-  return mutateElement(
-    nextElement,
-    {
-      x:
-        prevElement.textAlign === "left"
-          ? prevElement.x
-          : prevElement.x +
-            (prevElement.width - nextElement.width) /
-              (prevElement.textAlign === "center" ? 2 : 1),
-      // centering vertically is non-standard, but for Excalidraw I think
-      // it makes sense
-      y: prevElement.y + (prevElement.height - nextElement.height) / 2,
-    },
-    false,
-  );
+  return scene.mutateElement(nextElement, {
+    x:
+      prevElement.textAlign === "left"
+        ? prevElement.x
+        : prevElement.x +
+          (prevElement.width - nextElement.width) /
+            (prevElement.textAlign === "center" ? 2 : 1),
+    // centering vertically is non-standard, but for Excalidraw I think
+    // it makes sense
+    y: prevElement.y + (prevElement.height - nextElement.height) / 2,
+  });
 };
 
 const changeFontSize = (
@@ -251,10 +247,14 @@ const changeFontSize = (
         redrawTextBoundingBox(
           newElement,
           app.scene.getContainerElement(oldElement),
-          app.scene.getNonDeletedElementsMap(),
+          app.scene,
         );
 
-        newElement = offsetElementAfterFontResize(oldElement, newElement);
+        newElement = offsetElementAfterFontResize(
+          oldElement,
+          newElement,
+          app.scene,
+        );
 
         return newElement;
       }
@@ -264,15 +264,11 @@ const changeFontSize = (
   );
 
   // Update arrow elements after text elements have been updated
-  const updatedElementsMap = arrayToMap(updatedElements);
   getSelectedElements(elements, appState, {
     includeBoundTextElement: true,
   }).forEach((element) => {
     if (isTextElement(element)) {
-      updateBoundElements(
-        element,
-        updatedElementsMap as NonDeletedSceneElementsMap,
-      );
+      updateBoundElements(element, app.scene);
     }
   });
 
@@ -778,7 +774,7 @@ type ChangeFontFamilyData = Partial<
   >
 > & {
   /** cache of selected & editing elements populated on opened popup */
-  cachedElements?: Map<string, ExcalidrawElement>;
+  cachedElements?: ElementsMap;
   /** flag to reset all elements to their cached versions  */
   resetAll?: true;
   /** flag to reset all containers to their cached versions */
@@ -919,7 +915,7 @@ export const actionChangeFontFamily = register({
 
               if (resetContainers && container && cachedContainer) {
                 // reset the container back to it's cached version
-                mutateElement(container, { ...cachedContainer }, false);
+                app.scene.mutateElement(container, { ...cachedContainer });
               }
 
               if (!skipFontFaceCheck) {
@@ -950,12 +946,7 @@ export const actionChangeFontFamily = register({
         // we either skip the check (have at least one font face loaded) or do the check and find out all the font faces have loaded
         for (const [element, container] of elementContainerMapping) {
           // trigger synchronous redraw
-          redrawTextBoundingBox(
-            element,
-            container,
-            app.scene.getNonDeletedElementsMap(),
-            false,
-          );
+          redrawTextBoundingBox(element, container, app.scene);
         }
       } else {
         // otherwise try to load all font faces for the given chars and redraw elements once our font faces loaded
@@ -972,8 +963,7 @@ export const actionChangeFontFamily = register({
               redrawTextBoundingBox(
                 latestElement as ExcalidrawTextElement,
                 latestContainer,
-                app.scene.getNonDeletedElementsMap(),
-                false,
+                app.scene,
               );
             }
           }
@@ -987,7 +977,7 @@ export const actionChangeFontFamily = register({
     return result;
   },
   PanelComponent: ({ elements, appState, app, updateData }) => {
-    const cachedElementsRef = useRef<Map<string, ExcalidrawElement>>(new Map());
+    const cachedElementsRef = useRef<ElementsMap>(new Map());
     const prevSelectedFontFamilyRef = useRef<number | null>(null);
     // relying on state batching as multiple `FontPicker` handlers could be called in rapid succession and we want to combine them
     const [batchedData, setBatchedData] = useState<ChangeFontFamilyData>({});
@@ -996,7 +986,7 @@ export const actionChangeFontFamily = register({
     const selectedFontFamily = useMemo(() => {
       const getFontFamily = (
         elementsArray: readonly ExcalidrawElement[],
-        elementsMap: Map<string, ExcalidrawElement>,
+        elementsMap: ElementsMap,
       ) =>
         getFormValue(
           elementsArray,
@@ -1179,7 +1169,7 @@ export const actionChangeTextAlign = register({
             redrawTextBoundingBox(
               newElement,
               app.scene.getContainerElement(oldElement),
-              app.scene.getNonDeletedElementsMap(),
+              app.scene,
             );
             return newElement;
           }
@@ -1270,7 +1260,7 @@ export const actionChangeVerticalAlign = register({
             redrawTextBoundingBox(
               newElement,
               app.scene.getContainerElement(oldElement),
-              app.scene.getNonDeletedElementsMap(),
+              app.scene,
             );
             return newElement;
           }
@@ -1670,10 +1660,10 @@ export const actionChangeArrowType = register({
             newElement,
             startHoveredElement,
             "start",
-            elementsMap,
+            app.scene,
           );
         endHoveredElement &&
-          bindLinearElement(newElement, endHoveredElement, "end", elementsMap);
+          bindLinearElement(newElement, endHoveredElement, "end", app.scene);
 
         const startBinding =
           startElement && newElement.startBinding
@@ -1684,7 +1674,6 @@ export const actionChangeArrowType = register({
                   newElement,
                   startElement,
                   "start",
-                  elementsMap,
                 ),
               }
             : null;
@@ -1697,7 +1686,6 @@ export const actionChangeArrowType = register({
                   newElement,
                   endElement,
                   "end",
-                  elementsMap,
                 ),
               }
             : null;
@@ -1729,7 +1717,7 @@ export const actionChangeArrowType = register({
             newElement.startBinding.elementId,
           ) as ExcalidrawBindableElement;
           if (startElement) {
-            bindLinearElement(newElement, startElement, "start", elementsMap);
+            bindLinearElement(newElement, startElement, "start", app.scene);
           }
         }
         if (newElement.endBinding) {
@@ -1737,7 +1725,7 @@ export const actionChangeArrowType = register({
             newElement.endBinding.elementId,
           ) as ExcalidrawBindableElement;
           if (endElement) {
-            bindLinearElement(newElement, endElement, "end", elementsMap);
+            bindLinearElement(newElement, endElement, "end", app.scene);
           }
         }
       }
@@ -1758,6 +1746,7 @@ export const actionChangeArrowType = register({
       if (selected) {
         newState.selectedLinearElement = new LinearElementEditor(
           selected as ExcalidrawLinearElement,
+          arrayToMap(elements),
         );
       }
     }
diff --git a/packages/excalidraw/actions/actionSelectAll.ts b/packages/excalidraw/actions/actionSelectAll.ts
index d7775774ae..ea13636b74 100644
--- a/packages/excalidraw/actions/actionSelectAll.ts
+++ b/packages/excalidraw/actions/actionSelectAll.ts
@@ -2,7 +2,7 @@ import { getNonDeletedElements } from "@excalidraw/element";
 import { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
 import { isLinearElement, isTextElement } from "@excalidraw/element/typeChecks";
 
-import { KEYS } from "@excalidraw/common";
+import { arrayToMap, KEYS } from "@excalidraw/common";
 
 import { selectGroupsForSelectedElements } from "@excalidraw/element/groups";
 
@@ -53,7 +53,7 @@ export const actionSelectAll = register({
           // single linear element selected
           Object.keys(selectedElementIds).length === 1 &&
           isLinearElement(elements[0])
-            ? new LinearElementEditor(elements[0])
+            ? new LinearElementEditor(elements[0], arrayToMap(elements))
             : null,
       },
       captureUpdate: CaptureUpdateAction.IMMEDIATELY,
diff --git a/packages/excalidraw/actions/actionStyles.ts b/packages/excalidraw/actions/actionStyles.ts
index ed3c91e304..08b32e227f 100644
--- a/packages/excalidraw/actions/actionStyles.ts
+++ b/packages/excalidraw/actions/actionStyles.ts
@@ -139,11 +139,8 @@ export const actionPasteStyles = register({
                     element.id === newElement.containerId,
                 ) || null;
             }
-            redrawTextBoundingBox(
-              newElement,
-              container,
-              app.scene.getNonDeletedElementsMap(),
-            );
+
+            redrawTextBoundingBox(newElement, container, app.scene);
           }
 
           if (
diff --git a/packages/excalidraw/change.ts b/packages/excalidraw/change.ts
index 28eaf994fc..e7ba76f603 100644
--- a/packages/excalidraw/change.ts
+++ b/packages/excalidraw/change.ts
@@ -37,6 +37,8 @@ import {
   syncMovedIndices,
 } from "@excalidraw/element/fractionalIndex";
 
+import Scene from "@excalidraw/element/Scene";
+
 import type { BindableProp, BindingProp } from "@excalidraw/element/binding";
 
 import type { ElementUpdate } from "@excalidraw/element/mutateElement";
@@ -490,6 +492,7 @@ export class AppStateChange implements Change<AppState> {
               nextElements.get(
                 selectedLinearElementId,
               ) as NonDeleted<ExcalidrawLinearElement>,
+              nextElements,
             )
           : null;
 
@@ -499,6 +502,7 @@ export class AppStateChange implements Change<AppState> {
               nextElements.get(
                 editingLinearElementId,
               ) as NonDeleted<ExcalidrawLinearElement>,
+              nextElements,
             )
           : null;
 
@@ -1132,9 +1136,6 @@ export class ElementsChange implements Change<SceneElementsMap> {
     }
 
     try {
-      // TODO: #7348 refactor away mutations below, so that we couldn't end up in an incosistent state
-      ElementsChange.redrawTextBoundingBoxes(nextElements, changedElements);
-
       // the following reorder performs also mutations, but only on new instances of changed elements
       // (unless something goes really bad and it fallbacks to fixing all invalid indices)
       nextElements = ElementsChange.reorderElements(
@@ -1143,8 +1144,14 @@ export class ElementsChange implements Change<SceneElementsMap> {
         flags,
       );
 
+      // we don't have an up-to-date scene, as we can be just in the middle of applying history entry
+      // we also don't have a scene on the server
+      // so we are creating a temp scene just to query and mutate elements
+      const tempScene = new Scene(nextElements);
+
+      ElementsChange.redrawTextBoundingBoxes(tempScene, changedElements);
       // Need ordered nextElements to avoid z-index binding issues
-      ElementsChange.redrawBoundArrows(nextElements, changedElements);
+      ElementsChange.redrawBoundArrows(tempScene, changedElements);
     } catch (e) {
       console.error(
         `Couldn't mutate elements after applying elements change`,
@@ -1337,8 +1344,9 @@ export class ElementsChange implements Change<SceneElementsMap> {
       } else {
         affectedElement = mutateElement(
           nextElement,
+          nextElements,
           updates as ElementUpdate<OrderedExcalidrawElement>,
-        );
+        ) as OrderedExcalidrawElement;
       }
 
       nextAffectedElements.set(affectedElement.id, affectedElement);
@@ -1456,9 +1464,10 @@ export class ElementsChange implements Change<SceneElementsMap> {
   }
 
   private static redrawTextBoundingBoxes(
-    elements: SceneElementsMap,
+    scene: Scene,
     changed: Map<string, OrderedExcalidrawElement>,
   ) {
+    const elements = scene.getNonDeletedElementsMap();
     const boxesToRedraw = new Map<
       string,
       { container: OrderedExcalidrawElement; boundText: ExcalidrawTextElement }
@@ -1498,17 +1507,17 @@ export class ElementsChange implements Change<SceneElementsMap> {
         continue;
       }
 
-      redrawTextBoundingBox(boundText, container, elements, false);
+      redrawTextBoundingBox(boundText, container, scene);
     }
   }
 
   private static redrawBoundArrows(
-    elements: SceneElementsMap,
+    scene: Scene,
     changed: Map<string, OrderedExcalidrawElement>,
   ) {
     for (const element of changed.values()) {
       if (!element.isDeleted && isBindableElement(element)) {
-        updateBoundElements(element, elements, {
+        updateBoundElements(element, scene, {
           changedElements: changed,
         });
       }
diff --git a/packages/excalidraw/clipboard.ts b/packages/excalidraw/clipboard.ts
index 40e4f8b96d..c9ee92cacc 100644
--- a/packages/excalidraw/clipboard.ts
+++ b/packages/excalidraw/clipboard.ts
@@ -172,7 +172,7 @@ export const serializeAsClipboardJSON = ({
         !framesToCopy.has(getContainingFrame(element, elementsMap)!)
       ) {
         const copiedElement = deepCopyElement(element);
-        mutateElement(copiedElement, {
+        mutateElement(copiedElement, elementsMap, {
           frameId: null,
         });
         return copiedElement;
diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx
index a70cb9808a..0381a2e393 100644
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@@ -122,10 +122,7 @@ import {
 
 import { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
 
-import {
-  mutateElement,
-  newElementWith,
-} from "@excalidraw/element/mutateElement";
+import { newElementWith } from "@excalidraw/element/mutateElement";
 
 import {
   newFrameElement,
@@ -303,6 +300,10 @@ import {
 
 import { isNonDeletedElement } from "@excalidraw/element";
 
+import Scene from "@excalidraw/element/Scene";
+
+import type { ElementUpdate } from "@excalidraw/element/mutateElement";
+
 import type { LocalPoint, Radians } from "@excalidraw/math";
 
 import type {
@@ -328,9 +329,10 @@ import type {
   MagicGenerationData,
   ExcalidrawNonSelectionElement,
   ExcalidrawArrowElement,
+  ExcalidrawElbowArrowElement,
 } from "@excalidraw/element/types";
 
-import type { ValueOf } from "@excalidraw/common/utility-types";
+import type { Mutable, ValueOf } from "@excalidraw/common/utility-types";
 
 import {
   actionAddToLibrary,
@@ -403,7 +405,6 @@ import {
   hasBackground,
   isSomeElementSelected,
 } from "../scene";
-import Scene from "../scene/Scene";
 import { getStateForZoom } from "../scene/zoom";
 import {
   dataURLToFile,
@@ -760,6 +761,7 @@ class App extends React.Component<AppProps, AppState> {
     if (excalidrawAPI) {
       const api: ExcalidrawImperativeAPI = {
         updateScene: this.updateScene,
+        mutateElement: this.mutateElement,
         updateLibrary: this.library.updateLibrary,
         addFiles: this.addFiles,
         resetScene: this.resetScene,
@@ -1387,7 +1389,7 @@ class App extends React.Component<AppProps, AppState> {
 
   private resetEditingFrame = (frame: ExcalidrawFrameLikeElement | null) => {
     if (frame) {
-      mutateElement(frame, { name: frame.name?.trim() || null });
+      this.scene.mutateElement(frame, { name: frame.name?.trim() || null });
     }
     this.setState({ editingFrame: null });
   };
@@ -1444,7 +1446,7 @@ class App extends React.Component<AppProps, AppState> {
             autoFocus
             value={frameNameInEdit}
             onChange={(e) => {
-              mutateElement(f, {
+              this.scene.mutateElement(f, {
                 name: e.target.value,
               });
             }}
@@ -1670,7 +1672,7 @@ class App extends React.Component<AppProps, AppState> {
                             <Hyperlink
                               key={firstSelectedElement.id}
                               element={firstSelectedElement}
-                              elementsMap={allElementsMap}
+                              scene={this.scene}
                               setAppState={this.setAppState}
                               onLinkOpen={this.props.onLinkOpen}
                               setToast={this.setToast}
@@ -1938,16 +1940,20 @@ class App extends React.Component<AppProps, AppState> {
       // state only.
       // Thus reset so that we prefer local cache (if there was some
       // generationData set previously)
-      mutateElement(
+      this.scene.mutateElement(
         frameElement,
-        { customData: { generationData: undefined } },
-        false,
+        {
+          customData: { generationData: undefined },
+        },
+        { informMutation: false, isDragging: false },
       );
     } else {
-      mutateElement(
+      this.scene.mutateElement(
         frameElement,
-        { customData: { generationData: data } },
-        false,
+        {
+          customData: { generationData: data },
+        },
+        { informMutation: false, isDragging: false },
       );
     }
     this.magicGenerations.set(frameElement.id, data);
@@ -2119,7 +2125,7 @@ class App extends React.Component<AppProps, AppState> {
         this.scene.insertElement(frame);
 
         for (const child of selectedElements) {
-          mutateElement(child, { frameId: frame.id });
+          this.scene.mutateElement(child, { frameId: frame.id });
         }
 
         this.setState({
@@ -2918,8 +2924,7 @@ class App extends React.Component<AppProps, AppState> {
             nonDeletedElementsMap,
           ),
         ),
-        this.scene.getNonDeletedElementsMap(),
-        this.scene.getNonDeletedElements(),
+        this.scene,
       );
     }
 
@@ -3317,11 +3322,7 @@ class App extends React.Component<AppProps, AppState> {
           newElement,
           this.scene.getElementsMapIncludingDeleted(),
         );
-        redrawTextBoundingBox(
-          newElement,
-          container,
-          this.scene.getElementsMapIncludingDeleted(),
-        );
+        redrawTextBoundingBox(newElement, container, this.scene);
       }
     });
 
@@ -3444,7 +3445,11 @@ class App extends React.Component<AppProps, AppState> {
             }
             // hack to reset the `y` coord because we vertically center during
             // insertImageElement
-            mutateElement(initializedImageElement, { y }, false);
+            this.scene.mutateElement(
+              initializedImageElement,
+              { y },
+              { informMutation: false, isDragging: false },
+            );
 
             y = imageElement.y + imageElement.height + 25;
 
@@ -3998,6 +4003,17 @@ class App extends React.Component<AppProps, AppState> {
     },
   );
 
+  public mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
+    element: TElement,
+    updates: ElementUpdate<TElement>,
+    informMutation = true,
+  ) => {
+    return this.scene.mutateElement(element, updates, {
+      informMutation,
+      isDragging: false,
+    });
+  };
+
   private triggerRender = (
     /** force always re-renders canvas even if no change */
     force?: boolean,
@@ -4166,9 +4182,9 @@ class App extends React.Component<AppProps, AppState> {
           ) {
             this.flowChartCreator.createNodes(
               selectedElements[0],
-              this.scene.getNonDeletedElementsMap(),
               this.state,
               getLinkDirectionFromKey(event.key),
+              this.scene,
             );
           }
 
@@ -4410,16 +4426,16 @@ class App extends React.Component<AppProps, AppState> {
         }
 
         selectedElements.forEach((element) => {
-          mutateElement(
+          this.scene.mutateElement(
             element,
             {
               x: element.x + offsetX,
               y: element.y + offsetY,
             },
-            false,
+            { informMutation: false, isDragging: false },
           );
 
-          updateBoundElements(element, this.scene.getNonDeletedElementsMap(), {
+          updateBoundElements(element, this.scene, {
             simultaneouslyUpdated: selectedElements,
           });
         });
@@ -4453,6 +4469,7 @@ class App extends React.Component<AppProps, AppState> {
                   this.setState({
                     editingLinearElement: new LinearElementEditor(
                       selectedElement,
+                      this.scene.getNonDeletedElementsMap(),
                     ),
                   });
                 }
@@ -4646,11 +4663,9 @@ class App extends React.Component<AppProps, AppState> {
     if (isArrowKey(event.key)) {
       bindOrUnbindLinearElements(
         this.scene.getSelectedElements(this.state).filter(isLinearElement),
-        this.scene.getNonDeletedElementsMap(),
-        this.scene.getNonDeletedElements(),
-        this.scene,
         isBindingEnabled(this.state),
         this.state.selectedLinearElement?.selectedPointsIndices ?? [],
+        this.scene,
         this.state.zoom,
       );
       this.setState({ suggestedBindings: [] });
@@ -4957,7 +4972,7 @@ class App extends React.Component<AppProps, AppState> {
       onChange: withBatchedUpdates((nextOriginalText) => {
         updateElement(nextOriginalText, false);
         if (isNonDeletedElement(element)) {
-          updateBoundElements(element, this.scene.getNonDeletedElementsMap());
+          updateBoundElements(element, this.scene);
         }
       }),
       onSubmit: withBatchedUpdates(({ viaKeyboard, nextOriginalText }) => {
@@ -5320,7 +5335,10 @@ class App extends React.Component<AppProps, AppState> {
       const minHeight = getApproxMinLineHeight(fontSize, lineHeight);
       const newHeight = Math.max(container.height, minHeight);
       const newWidth = Math.max(container.width, minWidth);
-      mutateElement(container, { height: newHeight, width: newWidth });
+      this.scene.mutateElement(container, {
+        height: newHeight,
+        width: newWidth,
+      });
       sceneX = container.x + newWidth / 2;
       sceneY = container.y + newHeight / 2;
       if (parentCenterPosition) {
@@ -5371,7 +5389,7 @@ class App extends React.Component<AppProps, AppState> {
       });
 
     if (!existingTextElement && shouldBindToContainer && container) {
-      mutateElement(container, {
+      this.scene.mutateElement(container, {
         boundElements: (container.boundElements || []).concat({
           type: "text",
           id: element.id,
@@ -5447,7 +5465,10 @@ class App extends React.Component<AppProps, AppState> {
       ) {
         this.store.shouldCaptureIncrement();
         this.setState({
-          editingLinearElement: new LinearElementEditor(selectedElements[0]),
+          editingLinearElement: new LinearElementEditor(
+            selectedElements[0],
+            this.scene.getNonDeletedElementsMap(),
+          ),
         });
         return;
       } else if (
@@ -5471,7 +5492,11 @@ class App extends React.Component<AppProps, AppState> {
 
         if (midPoint && midPoint > -1) {
           this.store.shouldCaptureIncrement();
-          LinearElementEditor.deleteFixedSegment(selectedElements[0], midPoint);
+          LinearElementEditor.deleteFixedSegment(
+            selectedElements[0],
+            this.scene,
+            midPoint,
+          );
 
           const nextCoords = LinearElementEditor.getSegmentMidpointHitCoords(
             {
@@ -5854,7 +5879,6 @@ class App extends React.Component<AppProps, AppState> {
         scenePointerX,
         scenePointerY,
         this,
-        this.scene.getNonDeletedElementsMap(),
       );
 
       if (
@@ -5916,7 +5940,7 @@ class App extends React.Component<AppProps, AppState> {
             lastPoint,
           ) >= LINE_CONFIRM_THRESHOLD
         ) {
-          mutateElement(
+          this.scene.mutateElement(
             multiElement,
             {
               points: [
@@ -5924,7 +5948,7 @@ class App extends React.Component<AppProps, AppState> {
                 pointFrom<LocalPoint>(scenePointerX - rx, scenePointerY - ry),
               ],
             },
-            false,
+            { informMutation: false, isDragging: false },
           );
         } else {
           setCursor(this.interactiveCanvas, CURSOR_TYPE.POINTER);
@@ -5940,12 +5964,12 @@ class App extends React.Component<AppProps, AppState> {
         ) < LINE_CONFIRM_THRESHOLD
       ) {
         setCursor(this.interactiveCanvas, CURSOR_TYPE.POINTER);
-        mutateElement(
+        this.scene.mutateElement(
           multiElement,
           {
             points: points.slice(0, -1),
           },
-          false,
+          { informMutation: false, isDragging: false },
         );
       } else {
         const [gridX, gridY] = getGridPoint(
@@ -5977,8 +6001,9 @@ class App extends React.Component<AppProps, AppState> {
         if (isPathALoop(points, this.state.zoom.value)) {
           setCursor(this.interactiveCanvas, CURSOR_TYPE.POINTER);
         }
+
         // update last uncommitted point
-        mutateElement(
+        this.scene.mutateElement(
           multiElement,
           {
             points: [
@@ -5989,9 +6014,9 @@ class App extends React.Component<AppProps, AppState> {
               ),
             ],
           },
-          false,
           {
             isDragging: true,
+            informMutation: false,
           },
         );
 
@@ -6578,7 +6603,7 @@ class App extends React.Component<AppProps, AppState> {
 
       const frame = this.getTopLayerFrameAtSceneCoords({ x, y });
 
-      mutateElement(pendingImageElement, {
+      this.scene.mutateElement(pendingImageElement, {
         x,
         y,
         frameId: frame ? frame.id : null,
@@ -7633,7 +7658,7 @@ class App extends React.Component<AppProps, AppState> {
         multiElement.type === "line" &&
         isPathALoop(multiElement.points, this.state.zoom.value)
       ) {
-        mutateElement(multiElement, {
+        this.scene.mutateElement(multiElement, {
           lastCommittedPoint:
             multiElement.points[multiElement.points.length - 1],
         });
@@ -7644,7 +7669,7 @@ class App extends React.Component<AppProps, AppState> {
       // Elbow arrows cannot be created by putting down points
       // only the start and end points can be defined
       if (isElbowArrow(multiElement) && multiElement.points.length > 1) {
-        mutateElement(multiElement, {
+        this.scene.mutateElement(multiElement, {
           lastCommittedPoint:
             multiElement.points[multiElement.points.length - 1],
         });
@@ -7681,7 +7706,7 @@ class App extends React.Component<AppProps, AppState> {
       }));
       // clicking outside commit zone → update reference for last committed
       // point
-      mutateElement(multiElement, {
+      this.scene.mutateElement(multiElement, {
         lastCommittedPoint: multiElement.points[multiElement.points.length - 1],
       });
       setCursor(this.interactiveCanvas, CURSOR_TYPE.POINTER);
@@ -7767,7 +7792,7 @@ class App extends React.Component<AppProps, AppState> {
           ),
         };
       });
-      mutateElement(element, {
+      this.scene.mutateElement(element, {
         points: [...element.points, pointFrom<LocalPoint>(0, 0)],
       });
       const boundElement = getHoveredElementForBinding(
@@ -8017,7 +8042,7 @@ class App extends React.Component<AppProps, AppState> {
           index,
           gridX,
           gridY,
-          this.scene.getNonDeletedElementsMap(),
+          this.scene,
         );
 
         flushSync(() => {
@@ -8122,7 +8147,7 @@ class App extends React.Component<AppProps, AppState> {
             pointerCoords,
             this,
             !event[KEYS.CTRL_OR_CMD],
-            elementsMap,
+            this.scene,
           );
           if (!ret) {
             return;
@@ -8349,7 +8374,7 @@ class App extends React.Component<AppProps, AppState> {
                   ),
                 };
 
-                mutateElement(croppingElement, {
+                this.scene.mutateElement(croppingElement, {
                   crop: nextCrop,
                 });
 
@@ -8606,13 +8631,16 @@ class App extends React.Component<AppProps, AppState> {
               ? newElement.pressures
               : [...newElement.pressures, event.pressure];
 
-            mutateElement(
+            this.scene.mutateElement(
               newElement,
               {
                 points: [...points, pointFrom<LocalPoint>(dx, dy)],
                 pressures,
               },
-              false,
+              {
+                informMutation: false,
+                isDragging: false,
+              },
             );
 
             this.setState({
@@ -8635,24 +8663,23 @@ class App extends React.Component<AppProps, AppState> {
           }
 
           if (points.length === 1) {
-            mutateElement(
+            this.scene.mutateElement(
               newElement,
               {
                 points: [...points, pointFrom<LocalPoint>(dx, dy)],
               },
-              false,
+              { informMutation: false, isDragging: false },
             );
           } else if (
             points.length === 2 ||
             (points.length > 1 && isElbowArrow(newElement))
           ) {
-            mutateElement(
+            this.scene.mutateElement(
               newElement,
               {
                 points: [...points.slice(0, -1), pointFrom<LocalPoint>(dx, dy)],
               },
-              false,
-              { isDragging: true },
+              { isDragging: true, informMutation: false },
             );
           }
 
@@ -8763,7 +8790,10 @@ class App extends React.Component<AppProps, AppState> {
               selectedLinearElement:
                 elementsWithinSelection.length === 1 &&
                 isLinearElement(elementsWithinSelection[0])
-                  ? new LinearElementEditor(elementsWithinSelection[0])
+                  ? new LinearElementEditor(
+                      elementsWithinSelection[0],
+                      this.scene.getNonDeletedElementsMap(),
+                    )
                   : null,
               showHyperlinkPopup:
                 elementsWithinSelection.length === 1 &&
@@ -8869,7 +8899,7 @@ class App extends React.Component<AppProps, AppState> {
             .map((e) => elementsMap.get(e.id))
             .filter((e) => isElbowArrow(e))
             .forEach((e) => {
-              !!e && mutateElement(e, {}, true);
+              !!e && this.scene.mutateElement(e, {});
             });
         }
       }
@@ -8905,7 +8935,10 @@ class App extends React.Component<AppProps, AppState> {
             this.scene.getNonDeletedElementsMap(),
           );
           if (element) {
-            mutateElement(element, {}, true);
+            this.scene.mutateElement(
+              element as ExcalidrawElbowArrowElement,
+              {},
+            );
           }
         }
 
@@ -8934,7 +8967,6 @@ class App extends React.Component<AppProps, AppState> {
               element,
               startBindingElement,
               endBindingElement,
-              elementsMap,
               this.scene,
             );
           }
@@ -9001,7 +9033,7 @@ class App extends React.Component<AppProps, AppState> {
           ? []
           : [...newElement.pressures, childEvent.pressure];
 
-        mutateElement(newElement, {
+        this.scene.mutateElement(newElement, {
           points: [...points, pointFrom<LocalPoint>(dx, dy)],
           pressures,
           lastCommittedPoint: pointFrom<LocalPoint>(dx, dy),
@@ -9048,15 +9080,20 @@ class App extends React.Component<AppProps, AppState> {
         );
 
         if (!pointerDownState.drag.hasOccurred && newElement && !multiElement) {
-          mutateElement(newElement, {
-            points: [
-              ...newElement.points,
-              pointFrom<LocalPoint>(
-                pointerCoords.x - newElement.x,
-                pointerCoords.y - newElement.y,
-              ),
-            ],
-          });
+          this.scene.mutateElement(
+            newElement,
+            {
+              points: [
+                ...newElement.points,
+                pointFrom<LocalPoint>(
+                  pointerCoords.x - newElement.x,
+                  pointerCoords.y - newElement.y,
+                ),
+              ],
+            },
+            { informMutation: false, isDragging: false },
+          );
+
           this.setState({
             multiElement: newElement,
             newElement,
@@ -9070,8 +9107,7 @@ class App extends React.Component<AppProps, AppState> {
               newElement,
               this.state,
               pointerCoords,
-              this.scene.getNonDeletedElementsMap(),
-              this.scene.getNonDeletedElements(),
+              this.scene,
             );
           }
           this.setState({ suggestedBindings: [], startBoundElement: null });
@@ -9089,7 +9125,10 @@ class App extends React.Component<AppProps, AppState> {
                 },
                 prevState,
               ),
-              selectedLinearElement: new LinearElementEditor(newElement),
+              selectedLinearElement: new LinearElementEditor(
+                newElement,
+                this.scene.getNonDeletedElementsMap(),
+              ),
             }));
           } else {
             this.setState((prevState) => ({
@@ -9112,7 +9151,7 @@ class App extends React.Component<AppProps, AppState> {
         );
 
         if (newElement.width < minWidth) {
-          mutateElement(newElement, {
+          this.scene.mutateElement(newElement, {
             autoResize: true,
           });
         }
@@ -9162,7 +9201,14 @@ class App extends React.Component<AppProps, AppState> {
       }
 
       if (newElement) {
-        mutateElement(newElement, getNormalizedDimensions(newElement));
+        this.scene.mutateElement(
+          newElement,
+          getNormalizedDimensions(newElement),
+          {
+            informMutation: false,
+            isDragging: false,
+          },
+        );
         // the above does not guarantee the scene to be rendered again, hence the trigger below
         this.scene.triggerUpdate();
       }
@@ -9194,7 +9240,7 @@ class App extends React.Component<AppProps, AppState> {
               ) {
                 // remove the linear element from all groups
                 // before removing it from the frame as well
-                mutateElement(linearElement, {
+                this.scene.mutateElement(linearElement, {
                   groupIds: [],
                 });
 
@@ -9223,12 +9269,12 @@ class App extends React.Component<AppProps, AppState> {
                   this.state.editingGroupId!,
                 );
 
-                mutateElement(
+                this.scene.mutateElement(
                   element,
                   {
                     groupIds: element.groupIds.slice(0, index),
                   },
-                  false,
+                  { informMutation: false, isDragging: false },
                 );
               }
 
@@ -9240,12 +9286,12 @@ class App extends React.Component<AppProps, AppState> {
                     element.groupIds[element.groupIds.length - 1],
                   ).length < 2
                 ) {
-                  mutateElement(
+                  this.scene.mutateElement(
                     element,
                     {
                       groupIds: [],
                     },
-                    false,
+                    { informMutation: false, isDragging: false },
                   );
                 }
               });
@@ -9355,7 +9401,10 @@ class App extends React.Component<AppProps, AppState> {
         // the one we've hit
         if (selectedElements.length === 1) {
           this.setState({
-            selectedLinearElement: new LinearElementEditor(hitElement),
+            selectedLinearElement: new LinearElementEditor(
+              hitElement,
+              this.scene.getNonDeletedElementsMap(),
+            ),
           });
         }
       }
@@ -9480,7 +9529,10 @@ class App extends React.Component<AppProps, AppState> {
                   selectedLinearElement:
                     newSelectedElements.length === 1 &&
                     isLinearElement(newSelectedElements[0])
-                      ? new LinearElementEditor(newSelectedElements[0])
+                      ? new LinearElementEditor(
+                          newSelectedElements[0],
+                          this.scene.getNonDeletedElementsMap(),
+                        )
                       : prevState.selectedLinearElement,
                 };
               });
@@ -9554,7 +9606,10 @@ class App extends React.Component<AppProps, AppState> {
               // Don't set `selectedLinearElement` if its same as the hitElement, this is mainly to prevent resetting the `hoverPointIndex` to -1.
               // Future we should update the API to take care of setting the correct `hoverPointIndex` when initialized
               prevState.selectedLinearElement?.elementId !== hitElement.id
-                ? new LinearElementEditor(hitElement)
+                ? new LinearElementEditor(
+                    hitElement,
+                    this.scene.getNonDeletedElementsMap(),
+                  )
                 : prevState.selectedLinearElement,
           }));
         }
@@ -9647,11 +9702,9 @@ class App extends React.Component<AppProps, AppState> {
 
         bindOrUnbindLinearElements(
           linearElements,
-          this.scene.getNonDeletedElementsMap(),
-          this.scene.getNonDeletedElements(),
-          this.scene,
           isBindingEnabled(this.state),
           this.state.selectedLinearElement?.selectedPointsIndices ?? [],
+          this.scene,
           this.state.zoom,
         );
       }
@@ -9808,12 +9861,12 @@ class App extends React.Component<AppProps, AppState> {
     const dataURL =
       this.files[fileId]?.dataURL || (await getDataURL(imageFile));
 
-    const imageElement = mutateElement(
+    const imageElement = this.scene.mutateElement(
       _imageElement,
       {
         fileId,
       },
-      false,
+      { informMutation: false, isDragging: false },
     ) as NonDeleted<InitializedExcalidrawImageElement>;
 
     return new Promise<NonDeleted<InitializedExcalidrawImageElement>>(
@@ -9879,7 +9932,7 @@ class App extends React.Component<AppProps, AppState> {
         showCursorImagePreview,
       });
     } catch (error: any) {
-      mutateElement(imageElement, {
+      this.scene.mutateElement(imageElement, {
         isDeleted: true,
       });
       this.actionManager.executeAction(actionFinalize);
@@ -10025,7 +10078,7 @@ class App extends React.Component<AppProps, AppState> {
         imageElement.height < DRAGGING_THRESHOLD / this.state.zoom.value
       ) {
         const placeholderSize = 100 / this.state.zoom.value;
-        mutateElement(imageElement, {
+        this.scene.mutateElement(imageElement, {
           x: imageElement.x - placeholderSize / 2,
           y: imageElement.y - placeholderSize / 2,
           width: placeholderSize,
@@ -10059,7 +10112,7 @@ class App extends React.Component<AppProps, AppState> {
       const x = imageElement.x + imageElement.width / 2 - width / 2;
       const y = imageElement.y + imageElement.height / 2 - height / 2;
 
-      mutateElement(imageElement, {
+      this.scene.mutateElement(imageElement, {
         x,
         y,
         width,
@@ -10490,7 +10543,10 @@ class App extends React.Component<AppProps, AppState> {
                 this,
               ),
               selectedLinearElement: isLinearElement(element)
-                ? new LinearElementEditor(element)
+                ? new LinearElementEditor(
+                    element,
+                    this.scene.getNonDeletedElementsMap(),
+                  )
                 : null,
             }
           : this.state),
@@ -10523,8 +10579,9 @@ class App extends React.Component<AppProps, AppState> {
         height: distance(pointerDownState.origin.y, pointerCoords.y),
         shouldMaintainAspectRatio: shouldMaintainAspectRatio(event),
         shouldResizeFromCenter: false,
+        scene: this.scene,
         zoom: this.state.zoom.value,
-        informMutation,
+        informMutation: false,
       });
       return;
     }
@@ -10588,6 +10645,7 @@ class App extends React.Component<AppProps, AppState> {
         : shouldMaintainAspectRatio(event),
       shouldResizeFromCenter: shouldResizeFromCenter(event),
       zoom: this.state.zoom.value,
+      scene: this.scene,
       widthAspectRatio: aspectRatio,
       originOffset: this.state.originSnapOffset,
       informMutation,
@@ -10675,7 +10733,7 @@ class App extends React.Component<AppProps, AppState> {
           transformHandleType,
         );
 
-        mutateElement(
+        this.scene.mutateElement(
           croppingElement,
           cropElement(
             croppingElement,
@@ -10690,16 +10748,12 @@ class App extends React.Component<AppProps, AppState> {
           ),
         );
 
-        updateBoundElements(
-          croppingElement,
-          this.scene.getNonDeletedElementsMap(),
-          {
-            newSize: {
-              width: croppingElement.width,
-              height: croppingElement.height,
-            },
+        updateBoundElements(croppingElement, this.scene, {
+          newSize: {
+            width: croppingElement.width,
+            height: croppingElement.height,
           },
-        );
+        });
 
         this.setState({
           isCropping: transformHandleType && transformHandleType !== "rotation",
@@ -10813,7 +10867,6 @@ class App extends React.Component<AppProps, AppState> {
         pointerDownState.originalElements,
         transformHandleType,
         selectedElements,
-        this.scene.getElementsMapIncludingDeleted(),
         this.scene,
         shouldRotateWithDiscreteAngle(event),
         shouldResizeFromCenter(event),
diff --git a/packages/excalidraw/components/ElementLinkDialog.tsx b/packages/excalidraw/components/ElementLinkDialog.tsx
index 5a0b9107ba..e9766f3d7b 100644
--- a/packages/excalidraw/components/ElementLinkDialog.tsx
+++ b/packages/excalidraw/components/ElementLinkDialog.tsx
@@ -6,9 +6,10 @@ import {
   defaultGetElementLinkFromSelection,
   getLinkIdAndTypeFromSelection,
 } from "@excalidraw/element/elementLink";
-import { mutateElement } from "@excalidraw/element/mutateElement";
 
-import type { ElementsMap, ExcalidrawElement } from "@excalidraw/element/types";
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+
+import type Scene from "@excalidraw/element/Scene";
 
 import { t } from "../i18n";
 import { getSelectedElements } from "../scene";
@@ -21,20 +22,20 @@ import { TrashIcon } from "./icons";
 import "./ElementLinkDialog.scss";
 
 import type { AppProps, AppState, UIAppState } from "../types";
-
 const ElementLinkDialog = ({
   sourceElementId,
   onClose,
-  elementsMap,
   appState,
+  scene,
   generateLinkForSelection = defaultGetElementLinkFromSelection,
 }: {
   sourceElementId: ExcalidrawElement["id"];
-  elementsMap: ElementsMap;
   appState: UIAppState;
+  scene: Scene;
   onClose?: () => void;
   generateLinkForSelection: AppProps["generateLinkForSelection"];
 }) => {
+  const elementsMap = scene.getNonDeletedElementsMap();
   const originalLink = elementsMap.get(sourceElementId)?.link ?? null;
 
   const [nextLink, setNextLink] = useState<string | null>(originalLink);
@@ -70,7 +71,7 @@ const ElementLinkDialog = ({
     if (nextLink && nextLink !== elementsMap.get(sourceElementId)?.link) {
       const elementToLink = elementsMap.get(sourceElementId);
       elementToLink &&
-        mutateElement(elementToLink, {
+        scene.mutateElement(elementToLink, {
           link: nextLink,
         });
     }
@@ -78,13 +79,13 @@ const ElementLinkDialog = ({
     if (!nextLink && linkEdited && sourceElementId) {
       const elementToLink = elementsMap.get(sourceElementId);
       elementToLink &&
-        mutateElement(elementToLink, {
+        scene.mutateElement(elementToLink, {
           link: null,
         });
     }
 
     onClose?.();
-  }, [sourceElementId, nextLink, elementsMap, linkEdited, onClose]);
+  }, [sourceElementId, nextLink, elementsMap, linkEdited, scene, onClose]);
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
diff --git a/packages/excalidraw/components/LayerUI.tsx b/packages/excalidraw/components/LayerUI.tsx
index b5491dedd7..b2e0d446fa 100644
--- a/packages/excalidraw/components/LayerUI.tsx
+++ b/packages/excalidraw/components/LayerUI.tsx
@@ -5,6 +5,7 @@ import {
   CLASSES,
   DEFAULT_SIDEBAR,
   TOOL_TYPE,
+  arrayToMap,
   capitalizeString,
   isShallowEqual,
 } from "@excalidraw/common";
@@ -17,7 +18,6 @@ import { ShapeCache } from "@excalidraw/element/ShapeCache";
 
 import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
 
-import Scene from "../scene/Scene";
 import { actionToggleStats } from "../actions";
 import { trackEvent } from "../analytics";
 import { isHandToolActive } from "../appState";
@@ -446,22 +446,18 @@ const LayerUI = ({
 
             if (selectedElements.length) {
               for (const element of selectedElements) {
-                mutateElement(
-                  element,
-                  {
-                    [altKey && eyeDropperState.swapPreviewOnAlt
-                      ? colorPickerType === "elementBackground"
-                        ? "strokeColor"
-                        : "backgroundColor"
-                      : colorPickerType === "elementBackground"
-                      ? "backgroundColor"
-                      : "strokeColor"]: color,
-                  },
-                  false,
-                );
+                mutateElement(element, arrayToMap(elements), {
+                  [altKey && eyeDropperState.swapPreviewOnAlt
+                    ? colorPickerType === "elementBackground"
+                      ? "strokeColor"
+                      : "backgroundColor"
+                    : colorPickerType === "elementBackground"
+                    ? "backgroundColor"
+                    : "strokeColor"]: color,
+                });
                 ShapeCache.delete(element);
               }
-              Scene.getScene(selectedElements[0])?.triggerUpdate();
+              app.scene.triggerUpdate();
             } else if (colorPickerType === "elementBackground") {
               setAppState({
                 currentItemBackgroundColor: color,
@@ -494,7 +490,7 @@ const LayerUI = ({
               openDialog: null,
             });
           }}
-          elementsMap={app.scene.getNonDeletedElementsMap()}
+          scene={app.scene}
           appState={appState}
           generateLinkForSelection={generateLinkForSelection}
         />
diff --git a/packages/excalidraw/components/Stats/Angle.tsx b/packages/excalidraw/components/Stats/Angle.tsx
index 67693551f6..d0cb187dac 100644
--- a/packages/excalidraw/components/Stats/Angle.tsx
+++ b/packages/excalidraw/components/Stats/Angle.tsx
@@ -1,7 +1,5 @@
 import { degreesToRadians, radiansToDegrees } from "@excalidraw/math";
 
-import { mutateElement } from "@excalidraw/element/mutateElement";
-
 import { getBoundTextElement } from "@excalidraw/element/textElement";
 import { isArrowElement, isElbowArrow } from "@excalidraw/element/typeChecks";
 
@@ -9,13 +7,14 @@ import type { Degrees } from "@excalidraw/math";
 
 import type { ExcalidrawElement } from "@excalidraw/element/types";
 
+import type Scene from "@excalidraw/element/Scene";
+
 import { angleIcon } from "../icons";
 
 import DragInput from "./DragInput";
 import { getStepSizedValue, isPropertyEditable, updateBindings } from "./utils";
 
 import type { DragInputCallbackType } from "./DragInput";
-import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
 
 interface AngleProps {
@@ -35,7 +34,6 @@ const handleDegreeChange: DragInputCallbackType<AngleProps["property"]> = ({
   scene,
 }) => {
   const elementsMap = scene.getNonDeletedElementsMap();
-  const elements = scene.getNonDeletedElements();
   const origElement = originalElements[0];
   if (origElement && !isElbowArrow(origElement)) {
     const latestElement = elementsMap.get(origElement.id);
@@ -45,14 +43,14 @@ const handleDegreeChange: DragInputCallbackType<AngleProps["property"]> = ({
 
     if (nextValue !== undefined) {
       const nextAngle = degreesToRadians(nextValue as Degrees);
-      mutateElement(latestElement, {
+      scene.mutateElement(latestElement, {
         angle: nextAngle,
       });
-      updateBindings(latestElement, elementsMap, elements, scene);
+      updateBindings(latestElement, scene);
 
       const boundTextElement = getBoundTextElement(latestElement, elementsMap);
       if (boundTextElement && !isArrowElement(latestElement)) {
-        mutateElement(boundTextElement, { angle: nextAngle });
+        scene.mutateElement(boundTextElement, { angle: nextAngle });
       }
 
       return;
@@ -71,14 +69,14 @@ const handleDegreeChange: DragInputCallbackType<AngleProps["property"]> = ({
 
     const nextAngle = degreesToRadians(nextAngleInDegrees as Degrees);
 
-    mutateElement(latestElement, {
+    scene.mutateElement(latestElement, {
       angle: nextAngle,
     });
-    updateBindings(latestElement, elementsMap, elements, scene);
+    updateBindings(latestElement, scene);
 
     const boundTextElement = getBoundTextElement(latestElement, elementsMap);
     if (boundTextElement && !isArrowElement(latestElement)) {
-      mutateElement(boundTextElement, { angle: nextAngle });
+      scene.mutateElement(boundTextElement, { angle: nextAngle });
     }
   }
 };
diff --git a/packages/excalidraw/components/Stats/CanvasGrid.tsx b/packages/excalidraw/components/Stats/CanvasGrid.tsx
index 4611365f43..4766f82041 100644
--- a/packages/excalidraw/components/Stats/CanvasGrid.tsx
+++ b/packages/excalidraw/components/Stats/CanvasGrid.tsx
@@ -1,9 +1,10 @@
+import type Scene from "@excalidraw/element/Scene";
+
 import { getNormalizedGridStep } from "../../scene";
 
 import StatsDragInput from "./DragInput";
 import { getStepSizedValue } from "./utils";
 
-import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
 
 interface PositionProps {
diff --git a/packages/excalidraw/components/Stats/Dimension.tsx b/packages/excalidraw/components/Stats/Dimension.tsx
index 142abc4074..c838b581f7 100644
--- a/packages/excalidraw/components/Stats/Dimension.tsx
+++ b/packages/excalidraw/components/Stats/Dimension.tsx
@@ -5,17 +5,17 @@ import {
   MINIMAL_CROP_SIZE,
   getUncroppedWidthAndHeight,
 } from "@excalidraw/element/cropElement";
-import { mutateElement } from "@excalidraw/element/mutateElement";
 import { resizeSingleElement } from "@excalidraw/element/resizeElements";
 import { isImageElement } from "@excalidraw/element/typeChecks";
 
 import type { ExcalidrawElement } from "@excalidraw/element/types";
 
+import type Scene from "@excalidraw/element/Scene";
+
 import DragInput from "./DragInput";
 import { getStepSizedValue, isPropertyEditable } from "./utils";
 
 import type { DragInputCallbackType } from "./DragInput";
-import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
 
 interface DimensionDragInputProps {
@@ -113,7 +113,7 @@ const handleDimensionChange: DragInputCallbackType<
           };
         }
 
-        mutateElement(element, {
+        scene.mutateElement(element, {
           crop: nextCrop,
           width: nextCrop.width / (crop.naturalWidth / uncroppedWidth),
           height: nextCrop.height / (crop.naturalHeight / uncroppedHeight),
@@ -144,7 +144,7 @@ const handleDimensionChange: DragInputCallbackType<
         height: nextCropHeight,
       };
 
-      mutateElement(element, {
+      scene.mutateElement(element, {
         crop: nextCrop,
         width: nextCrop.width / (crop.naturalWidth / uncroppedWidth),
         height: nextCrop.height / (crop.naturalHeight / uncroppedHeight),
@@ -176,8 +176,8 @@ const handleDimensionChange: DragInputCallbackType<
         nextHeight,
         latestElement,
         origElement,
-        elementsMap,
         originalElementsMap,
+        scene,
         property === "width" ? "e" : "s",
         {
           shouldMaintainAspectRatio: keepAspectRatio,
@@ -223,8 +223,8 @@ const handleDimensionChange: DragInputCallbackType<
       nextHeight,
       latestElement,
       origElement,
-      elementsMap,
       originalElementsMap,
+      scene,
       property === "width" ? "e" : "s",
       {
         shouldMaintainAspectRatio: keepAspectRatio,
diff --git a/packages/excalidraw/components/Stats/DragInput.tsx b/packages/excalidraw/components/Stats/DragInput.tsx
index b4795308d8..6fdf909b24 100644
--- a/packages/excalidraw/components/Stats/DragInput.tsx
+++ b/packages/excalidraw/components/Stats/DragInput.tsx
@@ -7,6 +7,8 @@ import { deepCopyElement } from "@excalidraw/element/duplicate";
 
 import type { ElementsMap, ExcalidrawElement } from "@excalidraw/element/types";
 
+import type Scene from "@excalidraw/element/Scene";
+
 import { CaptureUpdateAction } from "../../store";
 import { useApp } from "../App";
 import { InlineIcon } from "../InlineIcon";
@@ -16,7 +18,6 @@ import { SMALLEST_DELTA } from "./utils";
 import "./DragInput.scss";
 
 import type { StatsInputProperty } from "./utils";
-import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
 
 export type DragInputCallbackType<
@@ -216,13 +217,12 @@ const StatsDragInput = <
               y: number;
             } | null = null;
 
-            let originalElementsMap: Map<string, ExcalidrawElement> | null =
-              app.scene
-                .getNonDeletedElements()
-                .reduce((acc: ElementsMap, element) => {
-                  acc.set(element.id, deepCopyElement(element));
-                  return acc;
-                }, new Map());
+            let originalElementsMap: ElementsMap | null = app.scene
+              .getNonDeletedElements()
+              .reduce((acc: ElementsMap, element) => {
+                acc.set(element.id, deepCopyElement(element));
+                return acc;
+              }, new Map());
 
             let originalElements: readonly E[] | null = elements.map(
               (element) => originalElementsMap!.get(element.id) as E,
diff --git a/packages/excalidraw/components/Stats/FontSize.tsx b/packages/excalidraw/components/Stats/FontSize.tsx
index 90bdee5648..635f2cd5a2 100644
--- a/packages/excalidraw/components/Stats/FontSize.tsx
+++ b/packages/excalidraw/components/Stats/FontSize.tsx
@@ -1,4 +1,3 @@
-import { mutateElement } from "@excalidraw/element/mutateElement";
 import {
   getBoundTextElement,
   redrawTextBoundingBox,
@@ -13,13 +12,14 @@ import type {
   ExcalidrawTextElement,
 } from "@excalidraw/element/types";
 
+import type Scene from "@excalidraw/element/Scene";
+
 import { fontSizeIcon } from "../icons";
 
 import StatsDragInput from "./DragInput";
 import { getStepSizedValue } from "./utils";
 
 import type { DragInputCallbackType } from "./DragInput";
-import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
 
 interface FontSizeProps {
@@ -68,13 +68,13 @@ const handleFontSizeChange: DragInputCallbackType<
     }
 
     if (nextFontSize) {
-      mutateElement(latestElement, {
+      scene.mutateElement(latestElement, {
         fontSize: nextFontSize,
       });
       redrawTextBoundingBox(
         latestElement,
         scene.getContainerElement(latestElement),
-        scene.getNonDeletedElementsMap(),
+        scene,
       );
     }
   }
diff --git a/packages/excalidraw/components/Stats/MultiAngle.tsx b/packages/excalidraw/components/Stats/MultiAngle.tsx
index 3cabd19c03..a22a011477 100644
--- a/packages/excalidraw/components/Stats/MultiAngle.tsx
+++ b/packages/excalidraw/components/Stats/MultiAngle.tsx
@@ -1,7 +1,5 @@
 import { degreesToRadians, radiansToDegrees } from "@excalidraw/math";
 
-import { mutateElement } from "@excalidraw/element/mutateElement";
-
 import { getBoundTextElement } from "@excalidraw/element/textElement";
 import { isArrowElement } from "@excalidraw/element/typeChecks";
 
@@ -11,13 +9,14 @@ import type { Degrees } from "@excalidraw/math";
 
 import type { ExcalidrawElement } from "@excalidraw/element/types";
 
+import type Scene from "@excalidraw/element/Scene";
+
 import { angleIcon } from "../icons";
 
 import DragInput from "./DragInput";
 import { getStepSizedValue, isPropertyEditable } from "./utils";
 
 import type { DragInputCallbackType } from "./DragInput";
-import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
 
 interface MultiAngleProps {
@@ -54,17 +53,13 @@ const handleDegreeChange: DragInputCallbackType<
       if (!element) {
         continue;
       }
-      mutateElement(
-        element,
-        {
-          angle: nextAngle,
-        },
-        false,
-      );
+      scene.mutateElement(element, {
+        angle: nextAngle,
+      });
 
       const boundTextElement = getBoundTextElement(element, elementsMap);
       if (boundTextElement && !isArrowElement(element)) {
-        mutateElement(boundTextElement, { angle: nextAngle }, false);
+        scene.mutateElement(boundTextElement, { angle: nextAngle });
       }
     }
 
@@ -92,17 +87,13 @@ const handleDegreeChange: DragInputCallbackType<
 
     const nextAngle = degreesToRadians(nextAngleInDegrees as Degrees);
 
-    mutateElement(
-      latestElement,
-      {
-        angle: nextAngle,
-      },
-      false,
-    );
+    scene.mutateElement(latestElement, {
+      angle: nextAngle,
+    });
 
     const boundTextElement = getBoundTextElement(latestElement, elementsMap);
     if (boundTextElement && !isArrowElement(latestElement)) {
-      mutateElement(boundTextElement, { angle: nextAngle }, false);
+      scene.mutateElement(boundTextElement, { angle: nextAngle });
     }
   }
   scene.triggerUpdate();
diff --git a/packages/excalidraw/components/Stats/MultiDimension.tsx b/packages/excalidraw/components/Stats/MultiDimension.tsx
index b482611afa..ddac0ee3f2 100644
--- a/packages/excalidraw/components/Stats/MultiDimension.tsx
+++ b/packages/excalidraw/components/Stats/MultiDimension.tsx
@@ -3,7 +3,6 @@ import { useMemo } from "react";
 
 import { MIN_WIDTH_OR_HEIGHT } from "@excalidraw/common";
 import { updateBoundElements } from "@excalidraw/element/binding";
-import { mutateElement } from "@excalidraw/element/mutateElement";
 import {
   rescalePointsInElement,
   resizeSingleElement,
@@ -23,13 +22,14 @@ import type {
   NonDeletedSceneElementsMap,
 } from "@excalidraw/element/types";
 
+import type Scene from "@excalidraw/element/Scene";
+
 import DragInput from "./DragInput";
 import { getAtomicUnits, getStepSizedValue, isPropertyEditable } from "./utils";
 import { getElementsInAtomicUnit } from "./utils";
 
 import type { DragInputCallbackType } from "./DragInput";
 import type { AtomicUnit } from "./utils";
-import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
 
 interface MultiDimensionProps {
@@ -75,33 +75,31 @@ const resizeElementInGroup = (
   scale: number,
   latestElement: ExcalidrawElement,
   origElement: ExcalidrawElement,
-  elementsMap: NonDeletedSceneElementsMap,
   originalElementsMap: ElementsMap,
+  scene: Scene,
 ) => {
+  const elementsMap = scene.getNonDeletedElementsMap();
   const updates = getResizedUpdates(anchorX, anchorY, scale, origElement);
 
-  mutateElement(latestElement, updates, false);
+  scene.mutateElement(latestElement, updates);
+
   const boundTextElement = getBoundTextElement(
     origElement,
     originalElementsMap,
   );
   if (boundTextElement) {
     const newFontSize = boundTextElement.fontSize * scale;
-    updateBoundElements(latestElement, elementsMap, {
+    updateBoundElements(latestElement, scene, {
       newSize: { width: updates.width, height: updates.height },
     });
     const latestBoundTextElement = elementsMap.get(boundTextElement.id);
     if (latestBoundTextElement && isTextElement(latestBoundTextElement)) {
-      mutateElement(
-        latestBoundTextElement,
-        {
-          fontSize: newFontSize,
-        },
-        false,
-      );
+      scene.mutateElement(latestBoundTextElement, {
+        fontSize: newFontSize,
+      });
       handleBindTextResize(
         latestElement,
-        elementsMap,
+        scene,
         property === "width" ? "e" : "s",
         true,
       );
@@ -118,8 +116,8 @@ const resizeGroup = (
   property: MultiDimensionProps["property"],
   latestElements: ExcalidrawElement[],
   originalElements: ExcalidrawElement[],
-  elementsMap: NonDeletedSceneElementsMap,
   originalElementsMap: ElementsMap,
+  scene: Scene,
 ) => {
   // keep aspect ratio for groups
   if (property === "width") {
@@ -141,8 +139,8 @@ const resizeGroup = (
       scale,
       latestElement,
       origElement,
-      elementsMap,
       originalElementsMap,
+      scene,
     );
   }
 };
@@ -194,8 +192,8 @@ const handleDimensionChange: DragInputCallbackType<
           property,
           latestElements,
           originalElements,
-          elementsMap,
           originalElementsMap,
+          scene,
         );
       } else {
         const [el] = elementsInUnit;
@@ -237,8 +235,8 @@ const handleDimensionChange: DragInputCallbackType<
             nextHeight,
             latestElement,
             origElement,
-            elementsMap,
             originalElementsMap,
+            scene,
             property === "width" ? "e" : "s",
             {
               shouldInformMutation: false,
@@ -301,8 +299,8 @@ const handleDimensionChange: DragInputCallbackType<
         property,
         latestElements,
         originalElements,
-        elementsMap,
         originalElementsMap,
+        scene,
       );
     } else {
       const [el] = elementsInUnit;
@@ -340,8 +338,8 @@ const handleDimensionChange: DragInputCallbackType<
           nextHeight,
           latestElement,
           origElement,
-          elementsMap,
           originalElementsMap,
+          scene,
           property === "width" ? "e" : "s",
           {
             shouldInformMutation: false,
diff --git a/packages/excalidraw/components/Stats/MultiFontSize.tsx b/packages/excalidraw/components/Stats/MultiFontSize.tsx
index 6bac4bd3cd..075016ad19 100644
--- a/packages/excalidraw/components/Stats/MultiFontSize.tsx
+++ b/packages/excalidraw/components/Stats/MultiFontSize.tsx
@@ -1,4 +1,3 @@
-import { mutateElement } from "@excalidraw/element/mutateElement";
 import {
   getBoundTextElement,
   redrawTextBoundingBox,
@@ -16,13 +15,14 @@ import type {
   NonDeletedSceneElementsMap,
 } from "@excalidraw/element/types";
 
+import type Scene from "@excalidraw/element/Scene";
+
 import { fontSizeIcon } from "../icons";
 
 import StatsDragInput from "./DragInput";
 import { getStepSizedValue } from "./utils";
 
 import type { DragInputCallbackType } from "./DragInput";
-import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
 
 interface MultiFontSizeProps {
@@ -84,19 +84,14 @@ const handleFontSizeChange: DragInputCallbackType<
     nextFontSize = Math.max(Math.round(nextValue), MIN_FONT_SIZE);
 
     for (const textElement of latestTextElements) {
-      mutateElement(
-        textElement,
-        {
-          fontSize: nextFontSize,
-        },
-        false,
-      );
+      scene.mutateElement(textElement, {
+        fontSize: nextFontSize,
+      });
 
       redrawTextBoundingBox(
         textElement,
         scene.getContainerElement(textElement),
-        elementsMap,
-        false,
+        scene,
       );
     }
 
@@ -117,19 +112,14 @@ const handleFontSizeChange: DragInputCallbackType<
       if (shouldChangeByStepSize) {
         nextFontSize = getStepSizedValue(nextFontSize, STEP_SIZE);
       }
-      mutateElement(
-        latestElement,
-        {
-          fontSize: nextFontSize,
-        },
-        false,
-      );
+      scene.mutateElement(latestElement, {
+        fontSize: nextFontSize,
+      });
 
       redrawTextBoundingBox(
         latestElement,
         scene.getContainerElement(latestElement),
-        elementsMap,
-        false,
+        scene,
       );
     }
 
diff --git a/packages/excalidraw/components/Stats/MultiPosition.tsx b/packages/excalidraw/components/Stats/MultiPosition.tsx
index 98058efecd..ae6b52296b 100644
--- a/packages/excalidraw/components/Stats/MultiPosition.tsx
+++ b/packages/excalidraw/components/Stats/MultiPosition.tsx
@@ -5,12 +5,9 @@ import { isTextElement } from "@excalidraw/element/typeChecks";
 
 import { getCommonBounds } from "@excalidraw/element/bounds";
 
-import type {
-  ElementsMap,
-  ExcalidrawElement,
-  NonDeletedExcalidrawElement,
-  NonDeletedSceneElementsMap,
-} from "@excalidraw/element/types";
+import type { ElementsMap, ExcalidrawElement } from "@excalidraw/element/types";
+
+import type Scene from "@excalidraw/element/Scene";
 
 import StatsDragInput from "./DragInput";
 import { getAtomicUnits, getStepSizedValue, isPropertyEditable } from "./utils";
@@ -18,7 +15,6 @@ import { getElementsInAtomicUnit, moveElement } from "./utils";
 
 import type { DragInputCallbackType } from "./DragInput";
 import type { AtomicUnit } from "./utils";
-import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
 
 interface MultiPositionProps {
@@ -36,13 +32,11 @@ const moveElements = (
   property: MultiPositionProps["property"],
   changeInTopX: number,
   changeInTopY: number,
-  elements: readonly ExcalidrawElement[],
   originalElements: readonly ExcalidrawElement[],
-  elementsMap: NonDeletedSceneElementsMap,
   originalElementsMap: ElementsMap,
   scene: Scene,
 ) => {
-  for (let i = 0; i < elements.length; i++) {
+  for (let i = 0; i < originalElements.length; i++) {
     const origElement = originalElements[i];
 
     const [cx, cy] = [
@@ -65,8 +59,6 @@ const moveElements = (
       newTopLeftX,
       newTopLeftY,
       origElement,
-      elementsMap,
-      elements,
       scene,
       originalElementsMap,
       false,
@@ -78,11 +70,10 @@ const moveGroupTo = (
   nextX: number,
   nextY: number,
   originalElements: ExcalidrawElement[],
-  elementsMap: NonDeletedSceneElementsMap,
-  elements: readonly NonDeletedExcalidrawElement[],
   originalElementsMap: ElementsMap,
   scene: Scene,
 ) => {
+  const elementsMap = scene.getNonDeletedElementsMap();
   const [x1, y1, ,] = getCommonBounds(originalElements);
   const offsetX = nextX - x1;
   const offsetY = nextY - y1;
@@ -112,8 +103,6 @@ const moveGroupTo = (
         topLeftX + offsetX,
         topLeftY + offsetY,
         origElement,
-        elementsMap,
-        elements,
         scene,
         originalElementsMap,
         false,
@@ -135,7 +124,6 @@ const handlePositionChange: DragInputCallbackType<
   originalAppState,
 }) => {
   const elementsMap = scene.getNonDeletedElementsMap();
-  const elements = scene.getNonDeletedElements();
 
   if (nextValue !== undefined) {
     for (const atomicUnit of getAtomicUnits(
@@ -159,8 +147,6 @@ const handlePositionChange: DragInputCallbackType<
           newTopLeftX,
           newTopLeftY,
           elementsInUnit.map((el) => el.original),
-          elementsMap,
-          elements,
           originalElementsMap,
           scene,
         );
@@ -188,8 +174,6 @@ const handlePositionChange: DragInputCallbackType<
             newTopLeftX,
             newTopLeftY,
             origElement,
-            elementsMap,
-            elements,
             scene,
             originalElementsMap,
             false,
@@ -214,8 +198,6 @@ const handlePositionChange: DragInputCallbackType<
     changeInTopX,
     changeInTopY,
     originalElements,
-    originalElements,
-    elementsMap,
     originalElementsMap,
     scene,
   );
diff --git a/packages/excalidraw/components/Stats/Position.tsx b/packages/excalidraw/components/Stats/Position.tsx
index bf6dfd1613..5235385811 100644
--- a/packages/excalidraw/components/Stats/Position.tsx
+++ b/packages/excalidraw/components/Stats/Position.tsx
@@ -4,16 +4,16 @@ import {
   getFlipAdjustedCropPosition,
   getUncroppedWidthAndHeight,
 } from "@excalidraw/element/cropElement";
-import { mutateElement } from "@excalidraw/element/mutateElement";
 import { isImageElement } from "@excalidraw/element/typeChecks";
 
 import type { ElementsMap, ExcalidrawElement } from "@excalidraw/element/types";
 
+import type Scene from "@excalidraw/element/Scene";
+
 import StatsDragInput from "./DragInput";
 import { getStepSizedValue, moveElement } from "./utils";
 
 import type { DragInputCallbackType } from "./DragInput";
-import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
 
 interface PositionProps {
@@ -38,7 +38,6 @@ const handlePositionChange: DragInputCallbackType<"x" | "y"> = ({
   originalAppState,
 }) => {
   const elementsMap = scene.getNonDeletedElementsMap();
-  const elements = scene.getNonDeletedElements();
   const origElement = originalElements[0];
   const [cx, cy] = [
     origElement.x + origElement.width / 2,
@@ -101,7 +100,7 @@ const handlePositionChange: DragInputCallbackType<"x" | "y"> = ({
         };
       }
 
-      mutateElement(element, {
+      scene.mutateElement(element, {
         crop: nextCrop,
       });
 
@@ -119,7 +118,7 @@ const handlePositionChange: DragInputCallbackType<"x" | "y"> = ({
       y: clamp(crop.y + changeInY, 0, crop.naturalHeight - crop.height),
     };
 
-    mutateElement(element, {
+    scene.mutateElement(element, {
       crop: nextCrop,
     });
 
@@ -133,8 +132,6 @@ const handlePositionChange: DragInputCallbackType<"x" | "y"> = ({
       newTopLeftX,
       newTopLeftY,
       origElement,
-      elementsMap,
-      elements,
       scene,
       originalElementsMap,
     );
@@ -166,8 +163,6 @@ const handlePositionChange: DragInputCallbackType<"x" | "y"> = ({
     newTopLeftX,
     newTopLeftY,
     origElement,
-    elementsMap,
-    elements,
     scene,
     originalElementsMap,
   );
diff --git a/packages/excalidraw/components/Stats/stats.test.tsx b/packages/excalidraw/components/Stats/stats.test.tsx
index fc94da0564..cfb2b4ee41 100644
--- a/packages/excalidraw/components/Stats/stats.test.tsx
+++ b/packages/excalidraw/components/Stats/stats.test.tsx
@@ -17,7 +17,7 @@ import type {
   ExcalidrawTextElement,
 } from "@excalidraw/element/types";
 
-import { Excalidraw, getCommonBounds, mutateElement } from "../..";
+import { Excalidraw, getCommonBounds } from "../..";
 import { actionGroup } from "../../actions";
 import { t } from "../../i18n";
 import * as StaticScene from "../../renderer/staticScene";
@@ -478,7 +478,7 @@ describe("stats for a non-generic element", () => {
       containerId: container.id,
       fontSize: 20,
     });
-    mutateElement(container, {
+    h.app.scene.mutateElement(container, {
       boundElements: [{ type: "text", id: text.id }],
     });
     API.setElements([container, text]);
diff --git a/packages/excalidraw/components/Stats/utils.ts b/packages/excalidraw/components/Stats/utils.ts
index dbb47a2346..79e7ed18b2 100644
--- a/packages/excalidraw/components/Stats/utils.ts
+++ b/packages/excalidraw/components/Stats/utils.ts
@@ -4,7 +4,6 @@ import {
   bindOrUnbindLinearElements,
   updateBoundElements,
 } from "@excalidraw/element/binding";
-import { mutateElement } from "@excalidraw/element/mutateElement";
 import { getBoundTextElement } from "@excalidraw/element/textElement";
 import {
   isFrameLikeElement,
@@ -24,10 +23,10 @@ import type {
   ElementsMap,
   ExcalidrawElement,
   NonDeletedExcalidrawElement,
-  NonDeletedSceneElementsMap,
 } from "@excalidraw/element/types";
 
-import type Scene from "../../scene/Scene";
+import type Scene from "@excalidraw/element/Scene";
+
 import type { AppState } from "../../types";
 
 export type StatsInputProperty =
@@ -119,12 +118,11 @@ export const moveElement = (
   newTopLeftX: number,
   newTopLeftY: number,
   originalElement: ExcalidrawElement,
-  elementsMap: NonDeletedSceneElementsMap,
-  elements: readonly NonDeletedExcalidrawElement[],
   scene: Scene,
   originalElementsMap: ElementsMap,
   shouldInformMutation = true,
 ) => {
+  const elementsMap = scene.getNonDeletedElementsMap();
   const latestElement = elementsMap.get(originalElement.id);
   if (!latestElement) {
     return;
@@ -148,15 +146,15 @@ export const moveElement = (
     -originalElement.angle as Radians,
   );
 
-  mutateElement(
+  scene.mutateElement(
     latestElement,
     {
       x,
       y,
     },
-    shouldInformMutation,
+    { informMutation: shouldInformMutation, isDragging: false },
   );
-  updateBindings(latestElement, elementsMap, elements, scene);
+  updateBindings(latestElement, scene);
 
   const boundTextElement = getBoundTextElement(
     originalElement,
@@ -165,13 +163,13 @@ export const moveElement = (
   if (boundTextElement) {
     const latestBoundTextElement = elementsMap.get(boundTextElement.id);
     latestBoundTextElement &&
-      mutateElement(
+      scene.mutateElement(
         latestBoundTextElement,
         {
           x: boundTextElement.x + changeInX,
           y: boundTextElement.y + changeInY,
         },
-        shouldInformMutation,
+        { informMutation: shouldInformMutation, isDragging: false },
       );
   }
 };
@@ -199,8 +197,6 @@ export const getAtomicUnits = (
 
 export const updateBindings = (
   latestElement: ExcalidrawElement,
-  elementsMap: NonDeletedSceneElementsMap,
-  elements: readonly NonDeletedExcalidrawElement[],
   scene: Scene,
   options?: {
     simultaneouslyUpdated?: readonly ExcalidrawElement[];
@@ -209,16 +205,8 @@ export const updateBindings = (
   },
 ) => {
   if (isLinearElement(latestElement)) {
-    bindOrUnbindLinearElements(
-      [latestElement],
-      elementsMap,
-      elements,
-      scene,
-      true,
-      [],
-      options?.zoom,
-    );
+    bindOrUnbindLinearElements([latestElement], true, [], scene, options?.zoom);
   } else {
-    updateBoundElements(latestElement, elementsMap, options);
+    updateBoundElements(latestElement, scene, options);
   }
 };
diff --git a/packages/excalidraw/components/hyperlink/Hyperlink.tsx b/packages/excalidraw/components/hyperlink/Hyperlink.tsx
index 9a386a1635..65883017ea 100644
--- a/packages/excalidraw/components/hyperlink/Hyperlink.tsx
+++ b/packages/excalidraw/components/hyperlink/Hyperlink.tsx
@@ -21,8 +21,6 @@ import {
   embeddableURLValidator,
 } from "@excalidraw/element/embeddable";
 
-import { mutateElement } from "@excalidraw/element/mutateElement";
-
 import {
   sceneCoordsToViewportCoords,
   viewportCoordsToSceneCoords,
@@ -33,6 +31,8 @@ import {
 
 import { isEmbeddableElement } from "@excalidraw/element/typeChecks";
 
+import type Scene from "@excalidraw/element/Scene";
+
 import type {
   ElementsMap,
   ExcalidrawEmbeddableElement,
@@ -70,14 +70,14 @@ const embeddableLinkCache = new Map<
 
 export const Hyperlink = ({
   element,
-  elementsMap,
+  scene,
   setAppState,
   onLinkOpen,
   setToast,
   updateEmbedValidationStatus,
 }: {
   element: NonDeletedExcalidrawElement;
-  elementsMap: ElementsMap;
+  scene: Scene;
   setAppState: React.Component<any, AppState>["setState"];
   onLinkOpen: ExcalidrawProps["onLinkOpen"];
   setToast: (
@@ -88,6 +88,7 @@ export const Hyperlink = ({
     status: boolean,
   ) => void;
 }) => {
+  const elementsMap = scene.getNonDeletedElementsMap();
   const appState = useExcalidrawAppState();
   const appProps = useAppProps();
   const device = useDevice();
@@ -114,7 +115,7 @@ export const Hyperlink = ({
         setAppState({ activeEmbeddable: null });
       }
       if (!link) {
-        mutateElement(element, {
+        scene.mutateElement(element, {
           link: null,
         });
         updateEmbedValidationStatus(element, false);
@@ -126,7 +127,7 @@ export const Hyperlink = ({
           setToast({ message: t("toast.unableToEmbed"), closable: true });
         }
         element.link && embeddableLinkCache.set(element.id, element.link);
-        mutateElement(element, {
+        scene.mutateElement(element, {
           link,
         });
         updateEmbedValidationStatus(element, false);
@@ -144,7 +145,7 @@ export const Hyperlink = ({
           : 1;
         const hasLinkChanged =
           embeddableLinkCache.get(element.id) !== element.link;
-        mutateElement(element, {
+        scene.mutateElement(element, {
           ...(hasLinkChanged
             ? {
                 width:
@@ -169,10 +170,11 @@ export const Hyperlink = ({
         }
       }
     } else {
-      mutateElement(element, { link });
+      scene.mutateElement(element, { link });
     }
   }, [
     element,
+    scene,
     setToast,
     appProps.validateEmbeddable,
     appState.activeEmbeddable,
@@ -229,9 +231,9 @@ export const Hyperlink = ({
 
   const handleRemove = useCallback(() => {
     trackEvent("hyperlink", "delete");
-    mutateElement(element, { link: null });
+    scene.mutateElement(element, { link: null });
     setAppState({ showHyperlinkPopup: false });
-  }, [setAppState, element]);
+  }, [setAppState, element, scene]);
 
   const onEdit = () => {
     trackEvent("hyperlink", "edit", "popup-ui");
diff --git a/packages/excalidraw/data/transform.ts b/packages/excalidraw/data/transform.ts
index 15ad1ffde9..787f2489df 100644
--- a/packages/excalidraw/data/transform.ts
+++ b/packages/excalidraw/data/transform.ts
@@ -38,10 +38,13 @@ import { redrawTextBoundingBox } from "@excalidraw/element/textElement";
 
 import { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
 
+import { getCommonBounds } from "@excalidraw/element/bounds";
+
+import Scene from "@excalidraw/element/Scene";
+
 import type { ElementConstructorOpts } from "@excalidraw/element/newElement";
 
 import type {
-  ElementsMap,
   ExcalidrawArrowElement,
   ExcalidrawBindableElement,
   ExcalidrawElement,
@@ -63,8 +66,6 @@ import type {
 
 import type { MarkOptional } from "@excalidraw/common/utility-types";
 
-import { getCommonBounds } from "..";
-
 export type ValidLinearElement = {
   type: "arrow" | "line";
   x: number;
@@ -221,7 +222,7 @@ const DEFAULT_DIMENSION = 100;
 const bindTextToContainer = (
   container: ExcalidrawElement,
   textProps: { text: string } & MarkOptional<ElementConstructorOpts, "x" | "y">,
-  elementsMap: ElementsMap,
+  scene: Scene,
 ) => {
   const textElement: ExcalidrawTextElement = newTextElement({
     x: 0,
@@ -240,7 +241,8 @@ const bindTextToContainer = (
     }),
   });
 
-  redrawTextBoundingBox(textElement, container, elementsMap);
+  redrawTextBoundingBox(textElement, container, scene);
+
   return [container, textElement] as const;
 };
 
@@ -249,7 +251,7 @@ const bindLinearElementToElement = (
   start: ValidLinearElement["start"],
   end: ValidLinearElement["end"],
   elementStore: ElementStore,
-  elementsMap: NonDeletedSceneElementsMap,
+  scene: Scene,
 ): {
   linearElement: ExcalidrawLinearElement;
   startBoundElement?: ExcalidrawElement;
@@ -335,7 +337,7 @@ const bindLinearElementToElement = (
         linearElement,
         startBoundElement as ExcalidrawBindableElement,
         "start",
-        elementsMap,
+        scene,
       );
     }
   }
@@ -410,7 +412,7 @@ const bindLinearElementToElement = (
         linearElement,
         endBoundElement as ExcalidrawBindableElement,
         "end",
-        elementsMap,
+        scene,
       );
     }
   }
@@ -651,6 +653,9 @@ export const convertToExcalidrawElements = (
   }
 
   const elementsMap = elementStore.getElementsMap();
+  // we don't have a real scene, so we just use a temp scene to query and mutate elements
+  const scene = new Scene(elementsMap);
+
   // Add labels and arrow bindings
   for (const [id, element] of elementsWithIds) {
     const excalidrawElement = elementStore.getElement(id)!;
@@ -664,7 +669,7 @@ export const convertToExcalidrawElements = (
           let [container, text] = bindTextToContainer(
             excalidrawElement,
             element?.label,
-            elementsMap,
+            scene,
           );
           elementStore.add(container);
           elementStore.add(text);
@@ -692,7 +697,7 @@ export const convertToExcalidrawElements = (
                 originalStart,
                 originalEnd,
                 elementStore,
-                elementsMap,
+                scene,
               );
             container = linearElement;
             elementStore.add(linearElement);
@@ -717,7 +722,7 @@ export const convertToExcalidrawElements = (
                   start,
                   end,
                   elementStore,
-                  elementsMap,
+                  scene,
                 );
 
               elementStore.add(linearElement);
diff --git a/packages/excalidraw/fonts/Fonts.ts b/packages/excalidraw/fonts/Fonts.ts
index 79b5ea1af7..a9419892b3 100644
--- a/packages/excalidraw/fonts/Fonts.ts
+++ b/packages/excalidraw/fonts/Fonts.ts
@@ -28,6 +28,8 @@ import type {
 
 import type { ValueOf } from "@excalidraw/common/utility-types";
 
+import type Scene from "@excalidraw/element/Scene";
+
 import { CascadiaFontFaces } from "./Cascadia";
 import { ComicShannsFontFaces } from "./ComicShanns";
 import { EmojiFontFaces } from "./Emoji";
@@ -40,8 +42,6 @@ import { NunitoFontFaces } from "./Nunito";
 import { VirgilFontFaces } from "./Virgil";
 import { XiaolaiFontFaces } from "./Xiaolai";
 
-import type Scene from "../scene/Scene";
-
 export class Fonts {
   // it's ok to track fonts across multiple instances only once, so let's use
   // a static member to reduce memory footprint
diff --git a/packages/excalidraw/lasso/index.ts b/packages/excalidraw/lasso/index.ts
index d59b2d7439..f7e791665e 100644
--- a/packages/excalidraw/lasso/index.ts
+++ b/packages/excalidraw/lasso/index.ts
@@ -149,6 +149,7 @@ export class LassoTrail extends AnimatedTrail {
                 this.app.scene.getNonDeletedElement(
                   selectedIds[0],
                 ) as NonDeleted<ExcalidrawLinearElement>,
+                this.app.scene.getNonDeletedElementsMap(),
               )
             : null,
       };
diff --git a/packages/excalidraw/scene/Renderer.ts b/packages/excalidraw/scene/Renderer.ts
index e22c997edf..47d859cbf9 100644
--- a/packages/excalidraw/scene/Renderer.ts
+++ b/packages/excalidraw/scene/Renderer.ts
@@ -9,10 +9,11 @@ import type {
   NonDeletedExcalidrawElement,
 } from "@excalidraw/element/types";
 
+import type Scene from "@excalidraw/element/Scene";
+
 import { renderInteractiveSceneThrottled } from "../renderer/interactiveScene";
 import { renderStaticSceneThrottled } from "../renderer/staticScene";
 
-import type Scene from "./Scene";
 import type { RenderableElementsMap } from "./types";
 
 import type { AppState } from "../types";
diff --git a/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap
index 7b249da278..44dba2e346 100644
--- a/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap
+++ b/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap
@@ -7490,7 +7490,7 @@ History {
 
 exports[`history > multiplayer undo/redo > should iterate through the history when selected or editing linear element was remotely deleted > [end of test] number of elements 1`] = `1`;
 
-exports[`history > multiplayer undo/redo > should iterate through the history when selected or editing linear element was remotely deleted > [end of test] number of renders 1`] = `10`;
+exports[`history > multiplayer undo/redo > should iterate through the history when selected or editing linear element was remotely deleted > [end of test] number of renders 1`] = `9`;
 
 exports[`history > multiplayer undo/redo > should iterate through the history when when element change relates to remotely deleted element > [end of test] appState 1`] = `
 {
@@ -10561,7 +10561,7 @@ History {
 
 exports[`history > multiplayer undo/redo > should override remotely added points on undo, but restore them on redo > [end of test] number of elements 1`] = `1`;
 
-exports[`history > multiplayer undo/redo > should override remotely added points on undo, but restore them on redo > [end of test] number of renders 1`] = `15`;
+exports[`history > multiplayer undo/redo > should override remotely added points on undo, but restore them on redo > [end of test] number of renders 1`] = `14`;
 
 exports[`history > multiplayer undo/redo > should redistribute deltas when element gets removed locally but is restored remotely > [end of test] appState 1`] = `
 {
@@ -20188,4 +20188,4 @@ History {
 
 exports[`history > singleplayer undo/redo > should support linear element creation and points manipulation through the editor > [end of test] number of elements 1`] = `1`;
 
-exports[`history > singleplayer undo/redo > should support linear element creation and points manipulation through the editor > [end of test] number of renders 1`] = `21`;
+exports[`history > singleplayer undo/redo > should support linear element creation and points manipulation through the editor > [end of test] number of renders 1`] = `20`;
diff --git a/packages/excalidraw/tests/__snapshots__/multiPointCreate.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/multiPointCreate.test.tsx.snap
index 1b312a5512..3a0f3a58ad 100644
--- a/packages/excalidraw/tests/__snapshots__/multiPointCreate.test.tsx.snap
+++ b/packages/excalidraw/tests/__snapshots__/multiPointCreate.test.tsx.snap
@@ -50,7 +50,7 @@ exports[`multi point mode in linear elements > arrow 3`] = `
   "type": "arrow",
   "updated": 1,
   "version": 8,
-  "versionNonce": 1604849351,
+  "versionNonce": 400692809,
   "width": 70,
   "x": 30,
   "y": 30,
@@ -106,7 +106,7 @@ exports[`multi point mode in linear elements > line 3`] = `
   "type": "line",
   "updated": 1,
   "version": 8,
-  "versionNonce": 1604849351,
+  "versionNonce": 400692809,
   "width": 70,
   "x": 30,
   "y": 30,
diff --git a/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap
index 68d4d5d799..e98815d86e 100644
--- a/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap
+++ b/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap
@@ -6832,7 +6832,7 @@ History {
 
 exports[`regression tests > draw every type of shape > [end of test] number of elements 1`] = `0`;
 
-exports[`regression tests > draw every type of shape > [end of test] number of renders 1`] = `33`;
+exports[`regression tests > draw every type of shape > [end of test] number of renders 1`] = `31`;
 
 exports[`regression tests > given a group of selected elements with an element that is not selected inside the group common bounding box when element that is not selected is clicked should switch selection to not selected element on pointer up > [end of test] appState 1`] = `
 {
@@ -14550,7 +14550,7 @@ History {
 
 exports[`regression tests > undo/redo drawing an element > [end of test] number of elements 1`] = `0`;
 
-exports[`regression tests > undo/redo drawing an element > [end of test] number of renders 1`] = `20`;
+exports[`regression tests > undo/redo drawing an element > [end of test] number of renders 1`] = `19`;
 
 exports[`regression tests > updates fontSize & fontFamily appState > [end of test] appState 1`] = `
 {
diff --git a/packages/excalidraw/tests/dragCreate.test.tsx b/packages/excalidraw/tests/dragCreate.test.tsx
index c33da5e7ea..810efa973e 100644
--- a/packages/excalidraw/tests/dragCreate.test.tsx
+++ b/packages/excalidraw/tests/dragCreate.test.tsx
@@ -313,7 +313,7 @@ describe("Test dragCreate", () => {
       expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
         `6`,
       );
-      expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);
+      expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`5`);
       expect(h.state.selectionElement).toBeNull();
       expect(h.elements.length).toEqual(0);
     });
@@ -342,7 +342,7 @@ describe("Test dragCreate", () => {
       expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
         `6`,
       );
-      expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);
+      expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`5`);
       expect(h.state.selectionElement).toBeNull();
       expect(h.elements.length).toEqual(0);
     });
diff --git a/packages/excalidraw/tests/elementLocking.test.tsx b/packages/excalidraw/tests/elementLocking.test.tsx
index 45e370ed8a..8c4f348748 100644
--- a/packages/excalidraw/tests/elementLocking.test.tsx
+++ b/packages/excalidraw/tests/elementLocking.test.tsx
@@ -1,7 +1,5 @@
 import React from "react";
 
-import { mutateElement } from "@excalidraw/element/mutateElement";
-
 import { KEYS } from "@excalidraw/common";
 
 import { actionSelectAll } from "../actions";
@@ -298,7 +296,7 @@ describe("element locking", () => {
       height: textSize,
       containerId: container.id,
     });
-    mutateElement(container, {
+    h.app.scene.mutateElement(container, {
       boundElements: [{ id: text.id, type: "text" }],
     });
 
@@ -339,7 +337,7 @@ describe("element locking", () => {
       containerId: container.id,
       locked: true,
     });
-    mutateElement(container, {
+    h.app.scene.mutateElement(container, {
       boundElements: [{ id: text.id, type: "text" }],
     });
     API.setElements([container, text]);
@@ -373,7 +371,7 @@ describe("element locking", () => {
       containerId: container.id,
       locked: true,
     });
-    mutateElement(container, {
+    h.app.scene.mutateElement(container, {
       boundElements: [{ id: text.id, type: "text" }],
     });
     API.setElements([container, text]);
diff --git a/packages/excalidraw/tests/helpers/api.ts b/packages/excalidraw/tests/helpers/api.ts
index 3a83f27635..5ac1bca8cf 100644
--- a/packages/excalidraw/tests/helpers/api.ts
+++ b/packages/excalidraw/tests/helpers/api.ts
@@ -6,7 +6,6 @@ import { pointFrom, type LocalPoint, type Radians } from "@excalidraw/math";
 
 import { DEFAULT_VERTICAL_ALIGN, ROUNDNESS, assertNever } from "@excalidraw/common";
 
-import { mutateElement } from "@excalidraw/element/mutateElement";
 import {
   newArrowElement,
   newElement,
@@ -100,10 +99,10 @@ export class API {
 
   // eslint-disable-next-line prettier/prettier
   static updateElement = <T extends ExcalidrawElement>(
-    ...args: Parameters<typeof mutateElement<T>>
+    ...args: Parameters<typeof h.app.scene.mutateElement<T>>
   ) => {
     act(() => {
-      mutateElement<T>(...args);
+      h.app.scene.mutateElement(...args);
     });
   };
 
@@ -419,12 +418,11 @@ export class API {
 
     });
 
-    mutateElement(
+    h.app.scene.mutateElement(
       rectangle,
       {
         boundElements: [{ type: "text", id: text.id }],
       },
-      false,
     );
 
     return [rectangle, text];
@@ -453,12 +451,11 @@ export class API {
           : opts?.label?.frameId ?? null,
     });
 
-    mutateElement(
+    h.app.scene.mutateElement(
       arrow,
       {
         boundElements: [{ type: "text", id: text.id }],
       },
-      false,
     );
 
     return [arrow, text];
diff --git a/packages/excalidraw/tests/helpers/ui.ts b/packages/excalidraw/tests/helpers/ui.ts
index 38070d38bc..d60d488f1f 100644
--- a/packages/excalidraw/tests/helpers/ui.ts
+++ b/packages/excalidraw/tests/helpers/ui.ts
@@ -5,7 +5,6 @@ import {
   getElementPointsCoords,
 } from "@excalidraw/element/bounds";
 import { cropElement } from "@excalidraw/element/cropElement";
-import { mutateElement } from "@excalidraw/element/mutateElement";
 import {
   getTransformHandles,
   getTransformHandlesFromCoords,
@@ -526,7 +525,7 @@ export class UI {
 
     if (angle !== 0) {
       act(() => {
-        mutateElement(origElement, { angle });
+        h.app.scene.mutateElement(origElement, { angle });
       });
     }
 
diff --git a/packages/excalidraw/tests/linearElementEditor.test.tsx b/packages/excalidraw/tests/linearElementEditor.test.tsx
index 8619985846..2e32e88218 100644
--- a/packages/excalidraw/tests/linearElementEditor.test.tsx
+++ b/packages/excalidraw/tests/linearElementEditor.test.tsx
@@ -30,7 +30,7 @@ import type {
   FontString,
 } from "@excalidraw/element/types";
 
-import { Excalidraw, mutateElement } from "../index";
+import { Excalidraw } from "../index";
 import * as InteractiveCanvas from "../renderer/interactiveScene";
 import * as StaticScene from "../renderer/staticScene";
 import { API } from "../tests/helpers/api";
@@ -118,7 +118,7 @@ describe("Test Linear Elements", () => {
       ],
       roundness,
     });
-    mutateElement(line, { points: line.points });
+    h.app.scene.mutateElement(line, { points: line.points });
     API.setElements([line]);
     mouse.clickAt(p1[0], p1[1]);
     return line;
@@ -177,7 +177,7 @@ describe("Test Linear Elements", () => {
       pointFrom<LocalPoint>(0.5, 0),
       pointFrom<LocalPoint>(100, 100),
     ]);
-    new LinearElementEditor(element);
+    new LinearElementEditor(element, arrayToMap(h.elements));
     expect(element.points).toEqual([
       pointFrom<LocalPoint>(0, 0),
       pointFrom<LocalPoint>(99.5, 100),
@@ -1271,7 +1271,7 @@ describe("Test Linear Elements", () => {
       expect(rect.y).toBe(0);
       expect(handleBindTextResizeSpy).toHaveBeenCalledWith(
         h.elements[0],
-        arrayToMap(h.elements),
+        h.app.scene,
         "nw",
         false,
       );
@@ -1384,7 +1384,7 @@ describe("Test Linear Elements", () => {
       const [origStartX, origStartY] = [line.x, line.y];
 
       act(() => {
-        LinearElementEditor.movePoints(line, [
+        LinearElementEditor.movePoints(line, h.app.scene, [
           {
             index: 0,
             point: pointFrom(line.points[0][0] + 10, line.points[0][1] + 10),
diff --git a/packages/excalidraw/tests/move.test.tsx b/packages/excalidraw/tests/move.test.tsx
index 77fc7e57db..71a489561f 100644
--- a/packages/excalidraw/tests/move.test.tsx
+++ b/packages/excalidraw/tests/move.test.tsx
@@ -13,8 +13,6 @@ import type {
   ExcalidrawRectangleElement,
 } from "@excalidraw/element/types";
 
-import type Scene from "@excalidraw/excalidraw/scene/Scene";
-
 import { Excalidraw } from "../index";
 import * as InteractiveCanvas from "../renderer/interactiveScene";
 import * as StaticScene from "../renderer/staticScene";
@@ -85,15 +83,13 @@ describe("move element", () => {
     const rectA = UI.createElement("rectangle", { size: 100 });
     const rectB = UI.createElement("rectangle", { x: 200, y: 0, size: 300 });
     const arrow = UI.createElement("arrow", { x: 110, y: 50, size: 80 });
-    const elementsMap = h.app.scene.getNonDeletedElementsMap();
     act(() => {
       // bind line to two rectangles
       bindOrUnbindLinearElement(
         arrow.get() as NonDeleted<ExcalidrawLinearElement>,
         rectA.get() as ExcalidrawRectangleElement,
         rectB.get() as ExcalidrawRectangleElement,
-        elementsMap,
-        {} as Scene,
+        h.app.scene,
       );
     });
 
@@ -170,8 +166,6 @@ describe("duplicate element on move when ALT is clicked", () => {
     fireEvent.pointerMove(canvas, { clientX: 10, clientY: 60 });
     fireEvent.pointerUp(canvas);
 
-    // TODO: This used to be 4, but binding made it go up to 5. Do we need
-    // that additional render?
     expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(`4`);
     expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`3`);
     expect(h.state.selectionElement).toBeNull();
diff --git a/packages/excalidraw/tests/multiPointCreate.test.tsx b/packages/excalidraw/tests/multiPointCreate.test.tsx
index cde3c7f983..926c8d47f3 100644
--- a/packages/excalidraw/tests/multiPointCreate.test.tsx
+++ b/packages/excalidraw/tests/multiPointCreate.test.tsx
@@ -119,7 +119,7 @@ describe("multi point mode in linear elements", () => {
     });
 
     expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(`7`);
-    expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
+    expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);
     expect(h.elements.length).toEqual(1);
 
     const element = h.elements[0] as ExcalidrawLinearElement;
@@ -162,7 +162,7 @@ describe("multi point mode in linear elements", () => {
       key: KEYS.ENTER,
     });
     expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(`7`);
-    expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
+    expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);
     expect(h.elements.length).toEqual(1);
 
     const element = h.elements[0] as ExcalidrawLinearElement;
diff --git a/packages/excalidraw/types.ts b/packages/excalidraw/types.ts
index cba9fbea7c..ebc31029c6 100644
--- a/packages/excalidraw/types.ts
+++ b/packages/excalidraw/types.ts
@@ -784,6 +784,7 @@ export type UnsubscribeCallback = () => void;
 
 export interface ExcalidrawImperativeAPI {
   updateScene: InstanceType<typeof App>["updateScene"];
+  mutateElement: InstanceType<typeof App>["mutateElement"];
   updateLibrary: InstanceType<typeof Library>["updateLibrary"];
   resetScene: InstanceType<typeof App>["resetScene"];
   getSceneElementsIncludingDeleted: InstanceType<
diff --git a/packages/excalidraw/wysiwyg/textWysiwyg.tsx b/packages/excalidraw/wysiwyg/textWysiwyg.tsx
index b1610125f3..a7ddf659ee 100644
--- a/packages/excalidraw/wysiwyg/textWysiwyg.tsx
+++ b/packages/excalidraw/wysiwyg/textWysiwyg.tsx
@@ -15,7 +15,7 @@ import {
 } from "@excalidraw/element/containerCache";
 
 import { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
-import { bumpVersion, mutateElement } from "@excalidraw/element/mutateElement";
+import { bumpVersion } from "@excalidraw/element/mutateElement";
 import {
   getBoundTextElementId,
   getContainerElement,
@@ -45,7 +45,6 @@ import type {
 
 import { actionSaveToActiveFile } from "../actions";
 
-import Scene from "../scene/Scene";
 import { parseClipboard } from "../clipboard";
 import {
   actionDecreaseFontSize,
@@ -130,8 +129,7 @@ export const textWysiwyg = ({
 
   const updateWysiwygStyle = () => {
     const appState = app.state;
-    const updatedTextElement =
-      Scene.getScene(element)?.getElement<ExcalidrawTextElement>(id);
+    const updatedTextElement = app.scene.getElement<ExcalidrawTextElement>(id);
 
     if (!updatedTextElement) {
       return;
@@ -201,7 +199,7 @@ export const textWysiwyg = ({
             container.type,
           );
 
-          mutateElement(container, { height: targetContainerHeight });
+          app.scene.mutateElement(container, { height: targetContainerHeight });
           return;
         } else if (
           // autoshrink container height until original container height
@@ -214,7 +212,7 @@ export const textWysiwyg = ({
             height,
             container.type,
           );
-          mutateElement(container, { height: targetContainerHeight });
+          app.scene.mutateElement(container, { height: targetContainerHeight });
         } else {
           const { y } = computeBoundTextPosition(
             container,
@@ -287,7 +285,7 @@ export const textWysiwyg = ({
         editable.style.fontFamily = getFontFamilyString(updatedTextElement);
       }
 
-      mutateElement(updatedTextElement, { x: coordX, y: coordY });
+      app.scene.mutateElement(updatedTextElement, { x: coordX, y: coordY });
     }
   };
 
@@ -544,7 +542,7 @@ export const textWysiwyg = ({
     // it'd get stuck in an infinite loop of blur→onSubmit after we re-focus the
     // wysiwyg on update
     cleanup();
-    const updateElement = Scene.getScene(element)?.getElement(
+    const updateElement = app.scene.getElement(
       element.id,
     ) as ExcalidrawTextElement;
     if (!updateElement) {
@@ -559,7 +557,7 @@ export const textWysiwyg = ({
       if (editable.value.trim()) {
         const boundTextElementId = getBoundTextElementId(container);
         if (!boundTextElementId || boundTextElementId !== element.id) {
-          mutateElement(container, {
+          app.scene.mutateElement(container, {
             boundElements: (container.boundElements || []).concat({
               type: "text",
               id: element.id,
@@ -570,7 +568,7 @@ export const textWysiwyg = ({
           bumpVersion(container);
         }
       } else {
-        mutateElement(container, {
+        app.scene.mutateElement(container, {
           boundElements: container.boundElements?.filter(
             (ele) =>
               !isTextElement(
@@ -579,11 +577,8 @@ export const textWysiwyg = ({
           ),
         });
       }
-      redrawTextBoundingBox(
-        updateElement,
-        container,
-        app.scene.getNonDeletedElementsMap(),
-      );
+
+      redrawTextBoundingBox(updateElement, container, app.scene);
     }
 
     onSubmit({