From b1c6bfcf40cba255d208d8d525060684b10cb3cc Mon Sep 17 00:00:00 2001
From: David Luzar <5153846+dwelle@users.noreply.github.com>
Date: Mon, 20 Apr 2026 22:07:00 +0200
Subject: [PATCH 01/17] chore(docker): bump node (#11208)

---
 .codesandbox/Dockerfile | 2 +-
 Dockerfile              | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.codesandbox/Dockerfile b/.codesandbox/Dockerfile
index fd5b38d1e8..ce8c857650 100644
--- a/.codesandbox/Dockerfile
+++ b/.codesandbox/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:18-bullseye
+FROM node:24-bullseye
 
 # Vite wants to open the browser using `open`, so we
 # need to install those utils.
diff --git a/Dockerfile b/Dockerfile
index c08385d654..e15b425704 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,4 +1,4 @@
-FROM --platform=${BUILDPLATFORM} node:18 AS build
+FROM --platform=${BUILDPLATFORM} node:24 AS build
 
 WORKDIR /opt/node_app
 
@@ -13,7 +13,7 @@ ARG NODE_ENV=production
 
 RUN npm_config_target_arch=${TARGETARCH} yarn build:app:docker
 
-FROM --platform=${TARGETPLATFORM} nginx:1.27-alpine
+FROM nginx:1.27-alpine
 
 COPY --from=build /opt/node_app/excalidraw-app/build /usr/share/nginx/html
 

From 2e1a529c6781b1534d27ca79198dccd40b97ec7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rk=20Tolm=C3=A1cs?= <mark@lazycat.hu>
Date: Sat, 25 Apr 2026 12:03:50 +0200
Subject: [PATCH 02/17] fix(editor): remove extremely large arrows on restore
 (#11235)

* fix: Temp fix for elbow arrow at restore

Co-authored-by: Copilot <copilot@github.com>
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

* fix: Speculative fixes to avoid Infinity

Co-authored-by: Copilot <copilot@github.com>
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

* validate/remove arrow size after point normalization & move binding repairs back

* validate even simple arrows

* remove x/y check

* remove duplicate constant

---------

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Co-authored-by: Copilot <copilot@github.com>
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
---
 packages/element/src/binding.ts     | 10 +++---
 packages/element/src/elbowArrow.ts  |  4 +--
 packages/excalidraw/data/restore.ts | 47 +++++++++++++++++++++++++----
 packages/math/src/constants.ts      |  2 --
 4 files changed, 49 insertions(+), 14 deletions(-)

diff --git a/packages/element/src/binding.ts b/packages/element/src/binding.ts
index 566ef3c4e4..3f80ffbae2 100644
--- a/packages/element/src/binding.ts
+++ b/packages/element/src/binding.ts
@@ -1943,9 +1943,9 @@ export const calculateFixedPointForElbowArrowBinding = (
   return {
     fixedPoint: normalizeFixedPoint([
       (nonRotatedSnappedGlobalPoint[0] - hoveredElement.x) /
-        hoveredElement.width,
+        Math.max(hoveredElement.width, PRECISION),
       (nonRotatedSnappedGlobalPoint[1] - hoveredElement.y) /
-        hoveredElement.height,
+        Math.max(hoveredElement.height, PRECISION),
     ]),
   };
 };
@@ -1976,9 +1976,11 @@ export const calculateFixedPointForNonElbowArrowBinding = (
 
   // Calculate the ratio relative to the element's bounds
   const fixedPointX =
-    (nonRotatedPoint[0] - hoveredElement.x) / hoveredElement.width;
+    (nonRotatedPoint[0] - hoveredElement.x) /
+    Math.max(hoveredElement.width, PRECISION);
   const fixedPointY =
-    (nonRotatedPoint[1] - hoveredElement.y) / hoveredElement.height;
+    (nonRotatedPoint[1] - hoveredElement.y) /
+    Math.max(hoveredElement.height, PRECISION);
 
   return {
     fixedPoint: normalizeFixedPoint([fixedPointX, fixedPointY]),
diff --git a/packages/element/src/elbowArrow.ts b/packages/element/src/elbowArrow.ts
index 9543b4182f..024b846b12 100644
--- a/packages/element/src/elbowArrow.ts
+++ b/packages/element/src/elbowArrow.ts
@@ -2124,8 +2124,8 @@ const normalizeArrowElementUpdate = (
     offsetY < -MAX_POS ||
     offsetY > MAX_POS ||
     offsetX + points[points.length - 1][0] < -MAX_POS ||
-    offsetY + points[points.length - 1][0] > MAX_POS ||
-    offsetX + points[points.length - 1][1] < -MAX_POS ||
+    offsetX + points[points.length - 1][0] > MAX_POS ||
+    offsetY + points[points.length - 1][1] < -MAX_POS ||
     offsetY + points[points.length - 1][1] > MAX_POS
   ) {
     console.error(
diff --git a/packages/excalidraw/data/restore.ts b/packages/excalidraw/data/restore.ts
index 7a8b9e586c..7ffe9b712f 100644
--- a/packages/excalidraw/data/restore.ts
+++ b/packages/excalidraw/data/restore.ts
@@ -96,6 +96,8 @@ type RestoredAppState = Omit<
   "offsetTop" | "offsetLeft" | "width" | "height"
 >;
 
+const MAX_ARROW_PX = 75_000;
+
 export const AllowedExcalidrawActiveTools: Record<
   AppState["activeTool"]["type"],
   boolean
@@ -467,8 +469,8 @@ export const restoreElement = (
         element.endArrowhead === undefined
           ? "arrow"
           : normalizeArrowhead(element.endArrowhead);
-      const x: number | undefined = element.x;
-      const y: number | undefined = element.y;
+      const x = element.x as number | undefined;
+      const y = element.y as number | undefined;
       const points: readonly LocalPoint[] | undefined = // migrate old arrow model to new one
         !Array.isArray(element.points) || element.points.length < 2
           ? [pointFrom(0, 0), pointFrom(element.width, element.height)]
@@ -493,8 +495,8 @@ export const restoreElement = (
         startArrowhead,
         endArrowhead,
         points,
-        x,
-        y,
+        x: x ?? 0,
+        y: y ?? 0,
         elbowed: (element as ExcalidrawArrowElement).elbowed,
         ...getSizeFromPoints(points),
       };
@@ -513,12 +515,44 @@ export const restoreElement = (
           })
         : restoreElementWithProperties(element as ExcalidrawArrowElement, base);
 
-      return {
+      const normalizedRestoredElement = {
         ...restoredElement,
         ...LinearElementEditor.getNormalizeElementPointsAndCoords(
           restoredElement,
         ),
       };
+
+      // Last resort fix for extremely large arrows
+      if (
+        normalizedRestoredElement.width > MAX_ARROW_PX ||
+        normalizedRestoredElement.height > MAX_ARROW_PX
+      ) {
+        console.error(
+          `Removing extremely large arrow ${
+            normalizedRestoredElement.id
+          } (type: ${
+            isElbowArrow(normalizedRestoredElement) ? "elbow" : "simple"
+          }, width: ${normalizedRestoredElement.width}, height: ${
+            normalizedRestoredElement.height
+          }, x: ${normalizedRestoredElement.x}, y: ${
+            normalizedRestoredElement.y
+          })`,
+        );
+        return {
+          ...normalizedRestoredElement,
+          x: 0,
+          y: 0,
+          width: 100,
+          height: 100,
+          points: [
+            pointFrom<LocalPoint>(0, 0),
+            pointFrom<LocalPoint>(100, 100),
+          ],
+          isDeleted: true,
+        };
+      }
+
+      return normalizedRestoredElement;
     }
 
     // generic elements
@@ -666,6 +700,7 @@ export const restoreElements = <T extends ExcalidrawElement>(
   const existingElementsMap = existingElements
     ? arrayToMap(existingElements)
     : null;
+
   const restoredElements = syncInvalidIndices(
     (targetElements || []).reduce((elements, element) => {
       // filtering out selection, which is legacy, no longer kept in elements,
@@ -762,7 +797,7 @@ export const restoreElements = <T extends ExcalidrawElement>(
     }
   }
 
-  // NOTE (mtolmacs): Temporary fix for extremely large arrows
+  // NOTE (mtolmacs): Temporary fix for invalid/self-bound elbow arrows
   // Need to iterate again so we have attached text nodes in elementsMap
   return restoredElements.map((element) => {
     if (
diff --git a/packages/math/src/constants.ts b/packages/math/src/constants.ts
index ce39e42682..6ba5eb8f7f 100644
--- a/packages/math/src/constants.ts
+++ b/packages/math/src/constants.ts
@@ -1,5 +1,3 @@
-export const PRECISION = 10e-5;
-
 // Legendre-Gauss abscissae (x values) and weights for n=24
 // Refeerence: https://pomax.github.io/bezierinfo/legendre-gauss.html
 export const LegendreGaussN24TValues = [

From 43fa4b56028478f53dbb65045df1f9f7737c4321 Mon Sep 17 00:00:00 2001
From: David Luzar <5153846+dwelle@users.noreply.github.com>
Date: Tue, 28 Apr 2026 18:23:10 +0200
Subject: [PATCH 03/17] fix: frame selection and membership (#11250)

fix: element fully overlapping frame
---
 packages/element/src/frame.ts                |  6 ++-
 packages/element/src/selection.ts            |  8 ++--
 packages/element/tests/frame.test.tsx        | 44 +++++++++++++++++++-
 packages/excalidraw/tests/selection.test.tsx | 26 ++++++++++++
 4 files changed, 76 insertions(+), 8 deletions(-)

diff --git a/packages/element/src/frame.ts b/packages/element/src/frame.ts
index 787c2692f9..6138633ff4 100644
--- a/packages/element/src/frame.ts
+++ b/packages/element/src/frame.ts
@@ -19,6 +19,7 @@ import {
   getElementAbsoluteCoords,
   doBoundsIntersect,
   getElementBounds,
+  boundsContainBounds,
 } from "./bounds";
 import { mutateElement } from "./mutateElement";
 import { getBoundTextElement, getContainerElement } from "./textElement";
@@ -101,8 +102,9 @@ export const isElementContainingFrame = (
   frame: ExcalidrawFrameLikeElement,
   elementsMap: ElementsMap,
 ) => {
-  return getElementsWithinSelection([frame], element, elementsMap).some(
-    (e) => e.id === frame.id,
+  return boundsContainBounds(
+    getElementBounds(element, elementsMap),
+    getElementBounds(frame, elementsMap),
   );
 };
 
diff --git a/packages/element/src/selection.ts b/packages/element/src/selection.ts
index 8e9c4e8086..88bb1c2c80 100644
--- a/packages/element/src/selection.ts
+++ b/packages/element/src/selection.ts
@@ -34,7 +34,6 @@ import {
   elementOverlapsWithFrame,
   getContainingFrame,
   getFrameChildren,
-  isElementIntersectingFrame,
 } from "./frame";
 
 import { LinearElementEditor } from "./linearElementEditor";
@@ -170,7 +169,7 @@ export const getElementsWithinSelection = (
     const associatedFrame = getContainingFrame(element, elementsMap);
     if (
       associatedFrame &&
-      isElementIntersectingFrame(element, associatedFrame, elementsMap)
+      elementOverlapsWithFrame(element, associatedFrame, elementsMap)
     ) {
       const frameAABB = getElementBounds(associatedFrame, elementsMap);
       elementAABB = [
@@ -209,10 +208,9 @@ export const getElementsWithinSelection = (
     if (boundsContainBounds(selectionBounds, commonAABB)) {
       if (framesInSelection && isFrameLikeElement(element)) {
         framesInSelection.add(element.id);
-      } else {
-        elementsInSelection.push(element);
-        continue;
       }
+      elementsInSelection.push(element);
+      continue;
     }
 
     // 2. Handle the case where the label is overlapped by the selection box
diff --git a/packages/element/tests/frame.test.tsx b/packages/element/tests/frame.test.tsx
index 47f2160ac3..e92267130a 100644
--- a/packages/element/tests/frame.test.tsx
+++ b/packages/element/tests/frame.test.tsx
@@ -2,6 +2,7 @@ import {
   convertToExcalidrawElements,
   Excalidraw,
 } from "@excalidraw/excalidraw";
+import { arrayToMap } from "@excalidraw/common";
 
 import { API } from "@excalidraw/excalidraw/tests/helpers/api";
 import { Keyboard, Pointer } from "@excalidraw/excalidraw/tests/helpers/ui";
@@ -10,7 +11,12 @@ import {
   render,
 } from "@excalidraw/excalidraw/tests/test-utils";
 
-import type { ExcalidrawElement } from "../src/types";
+import { elementOverlapsWithFrame } from "../src/frame";
+
+import type {
+  ExcalidrawElement,
+  ExcalidrawFrameLikeElement,
+} from "../src/types";
 
 const { h } = window;
 const mouse = new Pointer("mouse");
@@ -125,6 +131,26 @@ describe("adding elements to frames", () => {
     });
   });
 
+  it("should treat an element fully containing a frame as overlapping the frame", () => {
+    const containingRect = API.createElement({
+      type: "rectangle",
+      x: -50,
+      y: -50,
+      width: 250,
+      height: 250,
+    });
+
+    API.setElements([containingRect, frame]);
+
+    expect(
+      elementOverlapsWithFrame(
+        containingRect,
+        frame as ExcalidrawFrameLikeElement,
+        arrayToMap(h.elements),
+      ),
+    ).toBe(true);
+  });
+
   const commonTestCases = async (
     func: typeof resizeFrameOverElement | typeof dragElementIntoFrame,
   ) => {
@@ -415,6 +441,22 @@ describe("adding elements to frames", () => {
   describe("dragging elements into the frame", async () => {
     await commonTestCases(dragElementIntoFrame);
 
+    it("should add a dragged element fully containing the frame", () => {
+      const containingRect = API.createElement({
+        type: "rectangle",
+        x: 220,
+        y: 20,
+        width: 300,
+        height: 300,
+      });
+
+      API.setElements([frame, containingRect]);
+
+      dragElementIntoFrame(frame, containingRect);
+
+      expect(API.getElement(containingRect).frameId).toBe(frame.id);
+    });
+
     it.skip("should drag element inside, duplicate it and keep it in frame", () => {
       API.setElements([frame, rect2]);
 
diff --git a/packages/excalidraw/tests/selection.test.tsx b/packages/excalidraw/tests/selection.test.tsx
index ef0bd46b2c..5fd7a303d7 100644
--- a/packages/excalidraw/tests/selection.test.tsx
+++ b/packages/excalidraw/tests/selection.test.tsx
@@ -615,6 +615,32 @@ describe("box-selection overlap mode", () => {
 
     assertSelectedElements([]);
   });
+
+  it("should not select a framed element when selection only overlaps its clipped-out outline", () => {
+    const frame = API.createElement({
+      type: "frame",
+      x: 100,
+      y: 100,
+      width: 100,
+      height: 100,
+    });
+    const rect1 = API.createElement({
+      type: "rectangle",
+      x: 50,
+      y: 50,
+      width: 200,
+      height: 200,
+      frameId: frame.id,
+      backgroundColor: "red",
+      fillStyle: "solid",
+    });
+
+    API.setElements([frame, rect1]);
+
+    boxSelect(40, 170, 70, 220);
+
+    assertSelectedElements([]);
+  });
 });
 
 describe("inner box-selection", () => {

From 278cd357724b17e1119b6c76416520c42958d0e3 Mon Sep 17 00:00:00 2001
From: David Luzar <5153846+dwelle@users.noreply.github.com>
Date: Tue, 28 Apr 2026 21:49:40 +0200
Subject: [PATCH 04/17] feat(editor): scale video embeddables based on zoom
 (#11251)

---
 packages/excalidraw/components/App.tsx | 75 +++++++++++++++++---------
 packages/excalidraw/css/styles.scss    |  8 +++
 2 files changed, 58 insertions(+), 25 deletions(-)

diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx
index 4db823c2d4..299304eb0e 100644
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@@ -603,6 +603,8 @@ const YOUTUBE_VIDEO_STATES = new Map<
   ValueOf<typeof YOUTUBE_STATES>
 >();
 
+const MAX_EMBEDDABLE_VIEWPORT_SCALE = 4;
+
 let IS_PLAIN_PASTE = false;
 let IS_PLAIN_PASTE_TIMER = 0;
 let PLAIN_PASTE_TOAST_SHOWN = false;
@@ -1735,6 +1737,18 @@ class App extends React.Component<AppProps, AppState> {
             this.state.activeEmbeddable?.element === el &&
             this.state.activeEmbeddable?.state === "hover";
 
+          // scale video embeds based on zoom (capped) so that smaller embeds
+          // on canvas when zoomed are still of legible quality
+          // (note: for some embed types like gdrive, the quality is poor when
+          // scaling mid playback and works only when you initially start the
+          // playback at the higher zoom level)
+          const shouldScaleEmbeddableViewport = src?.type === "video";
+          const embeddableViewportScale = clamp(
+            shouldScaleEmbeddableViewport ? scale : 1,
+            0.75,
+            MAX_EMBEDDABLE_VIEWPORT_SCALE,
+          );
+
           return (
             <div
               key={el.id}
@@ -1801,31 +1815,42 @@ class App extends React.Component<AppProps, AppState> {
                     padding: `${el.strokeWidth}px`,
                   }}
                 >
-                  {(isEmbeddableElement(el)
-                    ? this.props.renderEmbeddable?.(el, this.state)
-                    : null) ?? (
-                    <iframe
-                      ref={(ref) => this.cacheEmbeddableRef(el, ref)}
-                      className="excalidraw__embeddable"
-                      srcDoc={
-                        src?.type === "document"
-                          ? src.srcdoc(this.state.theme)
-                          : undefined
-                      }
-                      src={
-                        src?.type !== "document" ? src?.link ?? "" : undefined
-                      }
-                      // https://stackoverflow.com/q/18470015
-                      scrolling="no"
-                      referrerPolicy="no-referrer-when-downgrade"
-                      title="Excalidraw Embedded Content"
-                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                      allowFullScreen={true}
-                      sandbox={`${
-                        src?.sandbox?.allowSameOrigin ? "allow-same-origin" : ""
-                      } allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation allow-downloads`}
-                    />
-                  )}
+                  <div
+                    className="excalidraw__embeddable__content"
+                    style={{
+                      width: `${embeddableViewportScale * 100}%`,
+                      height: `${embeddableViewportScale * 100}%`,
+                      transform: `scale(${1 / embeddableViewportScale})`,
+                    }}
+                  >
+                    {(isEmbeddableElement(el)
+                      ? this.props.renderEmbeddable?.(el, this.state)
+                      : null) ?? (
+                      <iframe
+                        ref={(ref) => this.cacheEmbeddableRef(el, ref)}
+                        className="excalidraw__embeddable"
+                        srcDoc={
+                          src?.type === "document"
+                            ? src.srcdoc(this.state.theme)
+                            : undefined
+                        }
+                        src={
+                          src?.type !== "document" ? src?.link ?? "" : undefined
+                        }
+                        // https://stackoverflow.com/q/18470015
+                        scrolling="no"
+                        referrerPolicy="no-referrer-when-downgrade"
+                        title="Excalidraw Embedded Content"
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                        allowFullScreen={true}
+                        sandbox={`${
+                          src?.sandbox?.allowSameOrigin
+                            ? "allow-same-origin"
+                            : ""
+                        } allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation allow-downloads`}
+                      />
+                    )}
+                  </div>
                 </div>
               </div>
             </div>
diff --git a/packages/excalidraw/css/styles.scss b/packages/excalidraw/css/styles.scss
index 1891a1f2ef..2cc5125713 100644
--- a/packages/excalidraw/css/styles.scss
+++ b/packages/excalidraw/css/styles.scss
@@ -814,6 +814,14 @@ body.excalidraw-cursor-resize * {
   .excalidraw__embeddable__outer {
     width: 100%;
     height: 100%;
+  }
+
+  .excalidraw__embeddable__content {
+    width: 100%;
+    height: 100%;
+    transform-origin: top left;
+
+    &,
     & > * {
       border-radius: var(--embeddable-radius);
     }

From 3f5fdec04e2fdb7239432a436a6580c4d5e465b0 Mon Sep 17 00:00:00 2001
From: David Luzar <5153846+dwelle@users.noreply.github.com>
Date: Sat, 2 May 2026 15:50:58 +0200
Subject: [PATCH 05/17] fix: group defragmenting (#11269)

---
 packages/element/src/duplicate.ts           |   3 +
 packages/element/src/sortElements.ts        | 128 ++++++++++----------
 packages/element/tests/sortElements.test.ts |  46 ++++++-
 3 files changed, 109 insertions(+), 68 deletions(-)

diff --git a/packages/element/src/duplicate.ts b/packages/element/src/duplicate.ts
index c2cee4c089..235fd1e47d 100644
--- a/packages/element/src/duplicate.ts
+++ b/packages/element/src/duplicate.ts
@@ -250,6 +250,9 @@ export const duplicateElements = (
     elementsWithDuplicates.splice(index + 1, 0, ...castArray(elements));
   };
 
+  // main
+  // ---------------------------------------------------------------------------
+
   const frameIdsToDuplicate = new Set(
     elements
       .filter(
diff --git a/packages/element/src/sortElements.ts b/packages/element/src/sortElements.ts
index c98ff9d523..0f9e8da0f1 100644
--- a/packages/element/src/sortElements.ts
+++ b/packages/element/src/sortElements.ts
@@ -1,59 +1,56 @@
-import { arrayToMapWithIndex } from "@excalidraw/common";
+import { arrayToMap } from "@excalidraw/common";
 
 import type { ExcalidrawElement } from "./types";
 
-const normalizeGroupElementOrder = (elements: readonly ExcalidrawElement[]) => {
-  const origElements: ExcalidrawElement[] = elements.slice();
-  const sortedElements = new Set<ExcalidrawElement>();
-
-  const orderInnerGroups = (
-    elements: readonly ExcalidrawElement[],
-  ): ExcalidrawElement[] => {
-    const firstGroupSig = elements[0]?.groupIds?.join("");
-    const aGroup: ExcalidrawElement[] = [elements[0]];
-    const bGroup: ExcalidrawElement[] = [];
-    for (const element of elements.slice(1)) {
-      if (element.groupIds?.join("") === firstGroupSig) {
-        aGroup.push(element);
-      } else {
-        bGroup.push(element);
-      }
-    }
-    return bGroup.length ? [...aGroup, ...orderInnerGroups(bGroup)] : aGroup;
+const defragmentGroups = (elements: readonly ExcalidrawElement[]) => {
+  const groupIdAtLevel = (element: ExcalidrawElement, level: number) => {
+    return element.groupIds[element.groupIds.length - level - 1];
   };
 
-  const groupHandledElements = new Map<string, true>();
+  const orderLevel = (
+    levelElements: readonly ExcalidrawElement[],
+    level: number,
+  ): ExcalidrawElement[] => {
+    const buckets = new Map<string, ExcalidrawElement[]>();
+    // Slots preserve first-occurrence order: a groupId reserves its slot
+    // the first time one of its members is seen; loose elements occupy
+    // their own slot. Groups are then expanded (and recursed into) in place.
+    const slots: (ExcalidrawElement | string)[] = [];
 
-  origElements.forEach((element, idx) => {
-    if (groupHandledElements.has(element.id)) {
-      return;
-    }
-    if (element.groupIds?.length) {
-      const topGroup = element.groupIds[element.groupIds.length - 1];
-      const groupElements = origElements.slice(idx).filter((element) => {
-        const ret = element?.groupIds?.some((id) => id === topGroup);
-        if (ret) {
-          groupHandledElements.set(element!.id, true);
-        }
-        return ret;
-      });
-
-      for (const elem of orderInnerGroups(groupElements)) {
-        sortedElements.add(elem);
+    for (const element of levelElements) {
+      const groupId = groupIdAtLevel(element, level);
+      if (groupId === undefined) {
+        slots.push(element);
+        continue;
       }
-    } else {
-      sortedElements.add(element);
+      let bucket = buckets.get(groupId);
+      if (!bucket) {
+        bucket = [];
+        buckets.set(groupId, bucket);
+        slots.push(groupId);
+      }
+      bucket.push(element);
     }
-  });
+
+    return slots.flatMap((slot) =>
+      typeof slot === "string"
+        ? orderLevel(buckets.get(slot)!, level + 1)
+        : [slot],
+    );
+  };
+
+  // `groupIds` is stored innermost-first, so the outermost group is the
+  // last entry. We recurse from level 0 (outermost) inward.
+  const sortedElements = orderLevel(elements, 0);
 
   // if there's a bug which resulted in losing some of the elements, return
   // original instead as that's better than losing data
-  if (sortedElements.size !== elements.length) {
-    console.error("normalizeGroupElementOrder: lost some elements... bailing!");
+  if (sortedElements.length !== elements.length) {
+    console.error("defragmentGroups: lost some elements... bailing!");
     return elements;
   }
 
-  return [...sortedElements];
+  return sortedElements;
 };
 
 /**
@@ -68,39 +65,40 @@ const normalizeGroupElementOrder = (elements: readonly ExcalidrawElement[]) => {
 const normalizeBoundElementsOrder = (
   elements: readonly ExcalidrawElement[],
 ) => {
-  const elementsMap = arrayToMapWithIndex(elements);
+  const elementsMap = arrayToMap(elements);
 
-  const origElements: (ExcalidrawElement | null)[] = elements.slice();
   const sortedElements = new Set<ExcalidrawElement>();
 
-  origElements.forEach((element, idx) => {
-    if (!element) {
-      return;
+  for (const element of elements) {
+    if (sortedElements.has(element)) {
+      continue;
     }
+
     if (element.boundElements?.length) {
       sortedElements.add(element);
-      origElements[idx] = null;
-      element.boundElements.forEach((boundElement) => {
+      for (const boundElement of element.boundElements) {
         const child = elementsMap.get(boundElement.id);
         if (child && boundElement.type === "text") {
-          sortedElements.add(child[0]);
-          origElements[child[1]] = null;
+          sortedElements.add(child);
         }
-      });
-    } else if (element.type === "text" && element.containerId) {
-      const parent = elementsMap.get(element.containerId);
-      if (!parent?.[0].boundElements?.find((x) => x.id === element.id)) {
-        sortedElements.add(element);
-        origElements[idx] = null;
-
-        // if element has a container and container lists it, skip this element
-        // as it'll be taken care of by the container
       }
-    } else {
-      sortedElements.add(element);
-      origElements[idx] = null;
+      continue;
     }
-  });
+
+    // if element has a container and container lists it, skip this element
+    // as it'll be taken care of by the container
+    if (
+      element.type === "text" &&
+      element.containerId &&
+      elementsMap
+        .get(element.containerId)
+        ?.boundElements?.some((el) => el.id === element.id)
+    ) {
+      continue;
+    }
+
+    sortedElements.add(element);
+  }
 
   // if there's a bug which resulted in losing some of the elements, return
   // original instead as that's better than losing data
@@ -117,5 +115,5 @@ const normalizeBoundElementsOrder = (
 export const normalizeElementOrder = (
   elements: readonly ExcalidrawElement[],
 ) => {
-  return normalizeBoundElementsOrder(normalizeGroupElementOrder(elements));
+  return normalizeBoundElementsOrder(defragmentGroups(elements));
 };
diff --git a/packages/element/tests/sortElements.test.ts b/packages/element/tests/sortElements.test.ts
index 0928b84f29..0554d38e35 100644
--- a/packages/element/tests/sortElements.test.ts
+++ b/packages/element/tests/sortElements.test.ts
@@ -326,19 +326,59 @@ describe("normalizeElementsOrder", () => {
       ]),
       [
         "BA_rect1",
+        "CBA_rect3",
+        "CBA_rect7",
         "BA_rect5",
         "BA_rect6",
         "A_rect2",
         "A_rect5",
-        "CBA_rect3",
-        "CBA_rect7",
         "rect4",
         "X_rect8",
-        "X_rect11",
         "YX_rect10",
+        "X_rect11",
         "rect9",
       ],
     );
+    assertOrder(
+      normalizeElementOrder([
+        API.createElement({
+          id: "A_rect1",
+          type: "rectangle",
+          groupIds: ["A"],
+        }),
+        API.createElement({
+          id: "CBA_rect2",
+          type: "rectangle",
+          groupIds: ["C", "B", "A"],
+        }),
+        API.createElement({
+          id: "A_rect3",
+          type: "rectangle",
+          groupIds: ["A"],
+        }),
+      ]),
+      ["A_rect1", "CBA_rect2", "A_rect3"],
+    );
+    assertOrder(
+      normalizeElementOrder([
+        API.createElement({
+          id: "abcT_rect1",
+          type: "rectangle",
+          groupIds: ["ab", "c", "T"],
+        }),
+        API.createElement({
+          id: "abcT_rect2",
+          type: "rectangle",
+          groupIds: ["a", "bc", "T"],
+        }),
+        API.createElement({
+          id: "abcT_rect3",
+          type: "rectangle",
+          groupIds: ["ab", "c", "T"],
+        }),
+      ]),
+      ["abcT_rect1", "abcT_rect3", "abcT_rect2"],
+    );
   });
 
   // TODO

From 2dfcc6f0ce4ce007e0360324e63f02ffc7b7fc1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rk=20Tolm=C3=A1cs?= <mark@lazycat.hu>
Date: Sat, 2 May 2026 16:36:42 +0200
Subject: [PATCH 06/17] chore: Remove startBoundElement from state (#11264)

---
 .../excalidraw/actions/actionFinalize.tsx     |  1 -
 packages/excalidraw/appState.ts               |  2 -
 packages/excalidraw/components/App.tsx        | 19 +---
 packages/excalidraw/components/LayerUI.tsx    |  3 +-
 .../__snapshots__/contextmenu.test.tsx.snap   | 17 ----
 .../tests/__snapshots__/history.test.tsx.snap | 87 ++++++++-----------
 .../regressionTests.test.tsx.snap             | 46 ----------
 packages/excalidraw/types.ts                  | 22 +++--
 .../tests/__snapshots__/export.test.ts.snap   |  1 -
 9 files changed, 56 insertions(+), 142 deletions(-)

diff --git a/packages/excalidraw/actions/actionFinalize.tsx b/packages/excalidraw/actions/actionFinalize.tsx
index 37332c4124..c52bbe00a4 100644
--- a/packages/excalidraw/actions/actionFinalize.tsx
+++ b/packages/excalidraw/actions/actionFinalize.tsx
@@ -329,7 +329,6 @@ export const actionFinalize = register<FormData>({
         selectionElement: null,
         multiElement: null,
         editingTextElement: null,
-        startBoundElement: null,
         suggestedBinding: null,
         selectedElementIds:
           element &&
diff --git a/packages/excalidraw/appState.ts b/packages/excalidraw/appState.ts
index 93fe770286..a64eed8ca7 100644
--- a/packages/excalidraw/appState.ts
+++ b/packages/excalidraw/appState.ts
@@ -99,7 +99,6 @@ export const getDefaultAppState = (): Omit<
       open: false,
       panels: STATS_PANELS.generalStats | STATS_PANELS.elementProperties,
     },
-    startBoundElement: null,
     suggestedBinding: null,
     frameRendering: { enabled: true, clip: true, name: true, outline: true },
     frameToHighlight: null,
@@ -231,7 +230,6 @@ const APP_STATE_STORAGE_CONF = (<
   selectionElement: { browser: false, export: false, server: false },
   shouldCacheIgnoreZoom: { browser: true, export: false, server: false },
   stats: { browser: true, export: false, server: false },
-  startBoundElement: { browser: false, export: false, server: false },
   suggestedBinding: { browser: false, export: false, server: false },
   frameRendering: { browser: false, export: false, server: false },
   frameToHighlight: { browser: false, export: false, server: false },
diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx
index 299304eb0e..3fd81e2ac7 100644
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@@ -6947,7 +6947,7 @@ class App extends React.Component<AppProps, AppState> {
               y: scenePointerY,
             },
           });
-          this.setState({ suggestedBinding: null, startBoundElement: null });
+          this.setState({ suggestedBinding: null });
           if (!this.state.activeTool.locked) {
             resetCursor(this.interactiveCanvas);
             this.setState((prevState) => ({
@@ -7591,7 +7591,6 @@ class App extends React.Component<AppProps, AppState> {
         appState: {
           newElement: null,
           editingTextElement: null,
-          startBoundElement: null,
           suggestedBinding: null,
           selectedElementIds: makeNextSelectedElementIds(
             Object.keys(this.state.selectedElementIds)
@@ -8879,18 +8878,8 @@ class App extends React.Component<AppProps, AppState> {
       };
     });
 
-    const boundElement = getHoveredElementForBinding(
-      pointFrom<GlobalPoint>(
-        pointerDownState.origin.x,
-        pointerDownState.origin.y,
-      ),
-      this.scene.getNonDeletedElements(),
-      this.scene.getNonDeletedElementsMap(),
-    );
-
     this.setState({
       newElement: element,
-      startBoundElement: boundElement,
       suggestedBinding: null,
     });
   };
@@ -10743,7 +10732,7 @@ class App extends React.Component<AppProps, AppState> {
               sceneCoords,
             });
           }
-          this.setState({ suggestedBinding: null, startBoundElement: null });
+          this.setState({ suggestedBinding: null });
           if (!activeTool.locked) {
             resetCursor(this.interactiveCanvas);
             this.setState((prevState) => ({
@@ -10764,9 +10753,9 @@ class App extends React.Component<AppProps, AppState> {
               ),
             }));
           } else {
-            this.setState((prevState) => ({
+            this.setState({
               newElement: null,
-            }));
+            });
           }
           // so that the scene gets rendered again to display the newly drawn linear as well
           this.scene.triggerUpdate();
diff --git a/packages/excalidraw/components/LayerUI.tsx b/packages/excalidraw/components/LayerUI.tsx
index bf774bfebc..b653722147 100644
--- a/packages/excalidraw/components/LayerUI.tsx
+++ b/packages/excalidraw/components/LayerUI.tsx
@@ -650,8 +650,7 @@ const LayerUI = ({
 };
 
 const stripIrrelevantAppStateProps = (appState: AppState): UIAppState => {
-  const { startBoundElement, cursorButton, scrollX, scrollY, ...ret } =
-    appState;
+  const { cursorButton, scrollX, scrollY, ...ret } = appState;
   return ret;
 };
 
diff --git a/packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap
index cb548f5b62..7162ed5f91 100644
--- a/packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap
+++ b/packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap
@@ -979,7 +979,6 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -1173,7 +1172,6 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -1388,7 +1386,6 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -1720,7 +1717,6 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -2052,7 +2048,6 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -2265,7 +2260,6 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -2509,7 +2503,6 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -2813,7 +2806,6 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -3181,7 +3173,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -3675,7 +3666,6 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -3999,7 +3989,6 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -4326,7 +4315,6 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -5612,7 +5600,6 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -6832,7 +6819,6 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -7786,7 +7772,6 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -8786,7 +8771,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -9781,7 +9765,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
diff --git a/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap
index 2923e9b321..fd57911e3e 100644
--- a/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap
+++ b/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap
@@ -1293,7 +1293,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -1654,7 +1653,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -2017,7 +2015,6 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -2280,7 +2277,40 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
+  "startBoundElement": {
+    "angle": 0,
+    "backgroundColor": "transparent",
+    "boundElements": [
+      {
+        "id": "id4",
+        "type": "arrow",
+      },
+    ],
+    "customData": undefined,
+    "fillStyle": "solid",
+    "frameId": null,
+    "groupIds": [],
+    "height": 100,
+    "id": "id0",
+    "index": "a0",
+    "isDeleted": false,
+    "link": null,
+    "locked": false,
+    "opacity": 100,
+    "roughness": 1,
+    "roundness": null,
+    "seed": 1,
+    "strokeColor": "#1e1e1e",
+    "strokeStyle": "solid",
+    "strokeWidth": 2,
+    "type": "rectangle",
+    "updated": 1,
+    "version": 3,
+    "versionNonce": 493213705,
+    "width": 100,
+    "x": -100,
+    "y": -50,
+  },
   "stats": {
     "open": false,
     "panels": 3,
@@ -2735,7 +2765,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -3039,7 +3068,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -3359,7 +3387,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -3654,7 +3681,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -3941,7 +3967,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -4177,7 +4202,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -4435,7 +4459,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -4707,7 +4730,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -4937,7 +4959,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -5167,7 +5188,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -5415,7 +5435,6 @@ exports[`history > multiplayer undo/redo > conflicts in bound text elements and
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -5672,7 +5691,6 @@ exports[`history > multiplayer undo/redo > conflicts in frames and their childre
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -5930,7 +5948,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -6260,7 +6277,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -6691,7 +6707,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -7072,7 +7087,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -7667,7 +7681,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -7898,7 +7911,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -8251,7 +8263,6 @@ exports[`history > multiplayer undo/redo > should iterate through the history wh
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -8610,7 +8621,6 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -9011,7 +9021,6 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -9293,7 +9302,6 @@ exports[`history > multiplayer undo/redo > should not let remote changes to inte
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -9558,7 +9566,6 @@ exports[`history > multiplayer undo/redo > should not override remote changes on
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -9824,7 +9831,6 @@ exports[`history > multiplayer undo/redo > should not override remote changes on
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -10058,7 +10064,6 @@ exports[`history > multiplayer undo/redo > should override remotely added groups
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -10671,7 +10676,6 @@ exports[`history > multiplayer undo/redo > should redistribute deltas when eleme
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -10911,7 +10915,6 @@ exports[`history > multiplayer undo/redo > should redraw arrows on undo > [end o
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -11836,7 +11839,6 @@ exports[`history > multiplayer undo/redo > should update history entries after r
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -12095,7 +12097,6 @@ exports[`history > singleplayer undo/redo > remounting undo/redo buttons should
   "showHyperlinkPopup": false,
   "showWelcomeScreen": false,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -12333,7 +12334,6 @@ exports[`history > singleplayer undo/redo > should clear the redo stack on eleme
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -12569,7 +12569,6 @@ exports[`history > singleplayer undo/redo > should create entry when selecting f
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -12966,7 +12965,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on e
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -13174,7 +13172,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on e
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -13386,7 +13383,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on i
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -13685,7 +13681,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on i
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -13984,7 +13979,6 @@ exports[`history > singleplayer undo/redo > should create new history entry on s
   "showHyperlinkPopup": false,
   "showWelcomeScreen": false,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -14229,7 +14223,6 @@ exports[`history > singleplayer undo/redo > should disable undo/redo buttons whe
   "showHyperlinkPopup": false,
   "showWelcomeScreen": false,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -14467,7 +14460,6 @@ exports[`history > singleplayer undo/redo > should end up with no history entry
   "showHyperlinkPopup": false,
   "showWelcomeScreen": false,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -14705,7 +14697,6 @@ exports[`history > singleplayer undo/redo > should iterate through the history w
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -14953,7 +14944,6 @@ exports[`history > singleplayer undo/redo > should not clear the redo stack on s
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -15286,7 +15276,6 @@ exports[`history > singleplayer undo/redo > should not collapse when applying co
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -15459,7 +15448,6 @@ exports[`history > singleplayer undo/redo > should not end up with history entry
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -15742,7 +15730,6 @@ exports[`history > singleplayer undo/redo > should not end up with history entry
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -16006,7 +15993,6 @@ exports[`history > singleplayer undo/redo > should not modify anything on unrela
   "showHyperlinkPopup": false,
   "showWelcomeScreen": false,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -16161,7 +16147,6 @@ exports[`history > singleplayer undo/redo > should not override appstate changes
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -16443,7 +16428,6 @@ exports[`history > singleplayer undo/redo > should support appstate name or view
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -20170,7 +20154,6 @@ exports[`history > singleplayer undo/redo > should support changes in elements'
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -20653,7 +20636,6 @@ exports[`history > singleplayer undo/redo > should support duplication of groups
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -21160,7 +21142,6 @@ exports[`history > singleplayer undo/redo > should support element creation, del
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
diff --git a/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap
index e502925b25..3f836165fc 100644
--- a/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap
+++ b/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap
@@ -106,7 +106,6 @@ exports[`given element A and group of elements B and given both are selected whe
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -535,7 +534,6 @@ exports[`given element A and group of elements B and given both are selected whe
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -943,7 +941,6 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -1510,7 +1507,6 @@ exports[`regression tests > Drags selected element when hitting only bounding bo
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -1723,7 +1719,6 @@ exports[`regression tests > adjusts z order when grouping > [end of test] appSta
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -2105,7 +2100,6 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] appSt
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -2349,7 +2343,6 @@ exports[`regression tests > arrow keys > [end of test] appState 1`] = `
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -2532,7 +2525,6 @@ exports[`regression tests > can drag element that covers another element, while
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -2856,7 +2848,6 @@ exports[`regression tests > change the properties of a shape > [end of test] app
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -3114,7 +3105,6 @@ exports[`regression tests > click on an element and drag it > [dragged] appState
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -3356,7 +3346,6 @@ exports[`regression tests > click on an element and drag it > [end of test] appS
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -3593,7 +3582,6 @@ exports[`regression tests > click to select a shape > [end of test] appState 1`]
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -3853,7 +3841,6 @@ exports[`regression tests > click-drag to select a group > [end of test] appStat
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -4167,7 +4154,6 @@ exports[`regression tests > deleting last but one element in editing group shoul
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -4631,7 +4617,6 @@ exports[`regression tests > deselects group of selected elements on pointer down
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -4887,7 +4872,6 @@ exports[`regression tests > deselects group of selected elements on pointer up w
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -5191,7 +5175,6 @@ exports[`regression tests > deselects selected element on pointer down when poin
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -5372,7 +5355,6 @@ exports[`regression tests > deselects selected element, on pointer up, when clic
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -5573,7 +5555,6 @@ exports[`regression tests > double click to edit a group > [end of test] appStat
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -5971,7 +5952,6 @@ exports[`regression tests > drags selected elements from point inside common bou
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -7057,7 +7037,6 @@ exports[`regression tests > given a group of selected elements with an element t
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -7392,7 +7371,6 @@ exports[`regression tests > given a selected element A and a not selected elemen
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -7671,7 +7649,6 @@ exports[`regression tests > given selected element A with lower z-index than uns
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -7907,7 +7884,6 @@ exports[`regression tests > given selected element A with lower z-index than uns
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -8146,7 +8122,6 @@ exports[`regression tests > key 2 selects rectangle tool > [end of test] appStat
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -8327,7 +8302,6 @@ exports[`regression tests > key 3 selects diamond tool > [end of test] appState
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -8508,7 +8482,6 @@ exports[`regression tests > key 4 selects ellipse tool > [end of test] appState
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -9151,7 +9124,6 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] appState
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -9579,7 +9551,6 @@ exports[`regression tests > key d selects diamond tool > [end of test] appState
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -9991,7 +9962,6 @@ exports[`regression tests > key o selects ellipse tool > [end of test] appState
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -10170,7 +10140,6 @@ exports[`regression tests > key p selects freedraw tool > [end of test] appState
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -10365,7 +10334,6 @@ exports[`regression tests > key r selects rectangle tool > [end of test] appStat
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -10554,7 +10522,6 @@ exports[`regression tests > make a group and duplicate it > [end of test] appSta
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -11080,7 +11047,6 @@ exports[`regression tests > noop interaction after undo shouldn't create history
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -11357,7 +11323,6 @@ exports[`regression tests > pinch-to-zoom works > [end of test] appState 1`] = `
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -11483,7 +11448,6 @@ exports[`regression tests > shift click on selected element should deselect it o
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -11688,7 +11652,6 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -12010,7 +11973,6 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -12444,7 +12406,6 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -13076,7 +13037,6 @@ exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] a
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -13204,7 +13164,6 @@ exports[`regression tests > supports nested groups > [end of test] appState 1`]
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -13865,7 +13824,6 @@ exports[`regression tests > switches from group of selected elements to another
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -14204,7 +14162,6 @@ exports[`regression tests > switches selected element on pointer down > [end of
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -14437,7 +14394,6 @@ exports[`regression tests > two-finger scroll works > [end of test] appState 1`]
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -14926,7 +14882,6 @@ exports[`regression tests > updates fontSize & fontFamily appState > [end of tes
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
@@ -15053,7 +15008,6 @@ exports[`regression tests > zoom hotkeys > [end of test] appState 1`] = `
   "showHyperlinkPopup": false,
   "showWelcomeScreen": true,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,
diff --git a/packages/excalidraw/types.ts b/packages/excalidraw/types.ts
index a41512fe64..c4fb15243b 100644
--- a/packages/excalidraw/types.ts
+++ b/packages/excalidraw/types.ts
@@ -315,7 +315,10 @@ export interface AppState {
   bindingPreference: "enabled" | "disabled";
   /** user preference whether arrow snap to midpoints while binding */
   isMidpointSnappingEnabled: boolean;
-  startBoundElement: NonDeleted<ExcalidrawBindableElement> | null;
+  /**
+   * The bindable element the UI highlights for the user when an arrow is
+   * dragged or otherwise its endpoint being close to said element.
+   */
   suggestedBinding: {
     element: NonDeleted<ExcalidrawBindableElement>;
     midPoint?: GlobalPoint;
@@ -347,8 +350,11 @@ export interface AppState {
     type: "selection" | "lasso";
     initialized: boolean;
   };
+
+  // Pen handling
   penMode: boolean;
   penDetected: boolean;
+
   exportBackground: boolean;
   exportEmbedScene: boolean;
   exportWithDarkMode: boolean;
@@ -472,6 +478,9 @@ export interface AppState {
   // as elements are unlocked, we remove the groupId from the elements
   // and also remove groupId from this map
   lockedMultiSelections: { [groupId: string]: true };
+  // Stores the current bind mode which is detemined at various points during
+  // a drag operation (like pointer position vs bindable element) but needed
+  // globally for calculating the binding strategy
   bindMode: BindMode;
 }
 
@@ -487,10 +496,7 @@ export type SearchMatch = {
   }[];
 };
 
-export type UIAppState = Omit<
-  AppState,
-  "startBoundElement" | "cursorButton" | "scrollX" | "scrollY"
->;
+export type UIAppState = Omit<AppState, "cursorButton" | "scrollX" | "scrollY">;
 
 export type NormalizedZoomValue = number & { _brand: "normalizedZoom" };
 
@@ -870,8 +876,13 @@ export type PointerDownState = Readonly<{
     // Whether selected element(s) were duplicated, might change during the
     // pointer interaction
     hasBeenDuplicated: boolean;
+    // Whether the pointer is hitting the common bounding box of selected
+    // elements, which is useful for discriminating between selecitng
+    // the entire selection vs a specific element
     hasHitCommonBoundingBoxOfSelectedElements: boolean;
   };
+  // This is determined on the initial pointer down event to
+  // set various interaction modalities
   withCmdOrCtrl: boolean;
   drag: {
     // Might change during the pointer interaction
@@ -897,6 +908,7 @@ export type PointerDownState = Readonly<{
     onKeyUp: null | ((event: KeyboardEvent) => void);
   };
   boxSelection: {
+    // If the box selection tool is activated on pointer down
     hasOccurred: boolean;
   };
 }>;
diff --git a/packages/utils/tests/__snapshots__/export.test.ts.snap b/packages/utils/tests/__snapshots__/export.test.ts.snap
index f59d0a9e84..67c2273766 100644
--- a/packages/utils/tests/__snapshots__/export.test.ts.snap
+++ b/packages/utils/tests/__snapshots__/export.test.ts.snap
@@ -98,7 +98,6 @@ exports[`exportToSvg > with default arguments 1`] = `
   "showHyperlinkPopup": false,
   "showWelcomeScreen": false,
   "snapLines": [],
-  "startBoundElement": null,
   "stats": {
     "open": false,
     "panels": 3,

From 3004c642dab239b4e060f7da5c3ac12d2dc9691d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rk=20Tolm=C3=A1cs?= <mark@lazycat.hu>
Date: Mon, 4 May 2026 11:37:17 +0200
Subject: [PATCH 07/17] fix: Fractional index validation (#11258)

- Vendored fractional-indexing and converted to TypeScript
- Stricter index format validation in fractional-indexing
- Added format validation to fractional index validation

---
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
---
 excalidraw-app/vite.config.mts                |   7 +
 package.json                                  |   3 +-
 packages/element/package.json                 |   3 +-
 packages/element/src/fractionalIndex.ts       |  14 +-
 .../element/tests/fractionalIndex.test.ts     |  66 +++-
 packages/excalidraw/package.json              |   1 -
 packages/fractional-indexing/global.d.ts      |   0
 packages/fractional-indexing/package.json     |  45 +++
 packages/fractional-indexing/src/index.ts     | 322 ++++++++++++++++++
 packages/fractional-indexing/tsconfig.json    |   8 +
 packages/tsconfig.base.json                   |   4 +-
 scripts/buildBase.js                          |   7 +-
 scripts/buildPackage.js                       |   7 +-
 scripts/buildUtils.js                         |   4 +
 scripts/release.js                            |   8 +-
 tsconfig.json                                 |   2 +
 vitest.config.mts                             |  14 +
 yarn.lock                                     |  10 +-
 18 files changed, 508 insertions(+), 17 deletions(-)
 create mode 100644 packages/fractional-indexing/global.d.ts
 create mode 100644 packages/fractional-indexing/package.json
 create mode 100644 packages/fractional-indexing/src/index.ts
 create mode 100644 packages/fractional-indexing/tsconfig.json

diff --git a/excalidraw-app/vite.config.mts b/excalidraw-app/vite.config.mts
index fa8d63d956..dfb213ef3a 100644
--- a/excalidraw-app/vite.config.mts
+++ b/excalidraw-app/vite.config.mts
@@ -75,6 +75,13 @@ export default defineConfig(({ mode }) => {
           find: /^@excalidraw\/utils\/(.*?)/,
           replacement: path.resolve(__dirname, "../packages/utils/src/$1"),
         },
+        {
+          find: /^@excalidraw\/fractional-indexing$/,
+          replacement: path.resolve(
+            __dirname,
+            "../packages/fractional-indexing/src/index.ts",
+          ),
+        },
       ],
     },
     build: {
diff --git a/package.json b/package.json
index 65ff221a49..df5c4e8a79 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,8 @@
     "build:element": "yarn --cwd ./packages/element build:esm",
     "build:excalidraw": "yarn --cwd ./packages/excalidraw build:esm",
     "build:math": "yarn --cwd ./packages/math build:esm",
-    "build:packages": "yarn build:common && yarn build:math && yarn build:element && yarn build:excalidraw",
+    "build:fractional-indexing": "yarn --cwd ./packages/fractional-indexing build:esm",
+    "build:packages": "yarn build:common && yarn build:fractional-indexing && yarn build:math && yarn build:element && yarn build:excalidraw",
     "build:version": "yarn --cwd ./excalidraw-app build:version",
     "build": "yarn --cwd ./excalidraw-app build",
     "build:preview": "yarn --cwd ./excalidraw-app build:preview",
diff --git a/packages/element/package.json b/packages/element/package.json
index 7dff00a750..408f2c9d10 100644
--- a/packages/element/package.json
+++ b/packages/element/package.json
@@ -64,6 +64,7 @@
   },
   "dependencies": {
     "@excalidraw/common": "0.18.0",
-    "@excalidraw/math": "0.18.0"
+    "@excalidraw/math": "0.18.0",
+    "@excalidraw/fractional-indexing": "3.3.0"
   }
 }
diff --git a/packages/element/src/fractionalIndex.ts b/packages/element/src/fractionalIndex.ts
index 44ca523c80..90a2e7c217 100644
--- a/packages/element/src/fractionalIndex.ts
+++ b/packages/element/src/fractionalIndex.ts
@@ -1,7 +1,10 @@
-import { generateNKeysBetween } from "fractional-indexing";
-
 import { arrayToMap } from "@excalidraw/common";
 
+import {
+  validateOrderKey,
+  generateNKeysBetween,
+} from "@excalidraw/fractional-indexing";
+
 import { mutateElement, newElementWith } from "./mutateElement";
 import { getBoundTextElement } from "./textElement";
 import { hasBoundTextElement } from "./typeChecks";
@@ -382,6 +385,13 @@ const isValidFractionalIndex = (
     return false;
   }
 
+  try {
+    // Format validation
+    validateOrderKey(index);
+  } catch {
+    return false;
+  }
+
   if (predecessor && successor) {
     return predecessor < index && index < successor;
   }
diff --git a/packages/element/tests/fractionalIndex.test.ts b/packages/element/tests/fractionalIndex.test.ts
index 1cc3ca5af3..2834a831e1 100644
--- a/packages/element/tests/fractionalIndex.test.ts
+++ b/packages/element/tests/fractionalIndex.test.ts
@@ -1,9 +1,8 @@
 /* eslint-disable no-lone-blocks */
-import { generateKeyBetween } from "fractional-indexing";
-
 import { arrayToMap } from "@excalidraw/common";
 
 import {
+  InvalidFractionalIndexError,
   syncInvalidIndices,
   syncMovedIndices,
   validateFractionalIndices,
@@ -13,13 +12,34 @@ import { deepCopyElement } from "@excalidraw/element";
 
 import { API } from "@excalidraw/excalidraw/tests/helpers/api";
 
+import {
+  generateKeyBetween,
+  validateOrderKey,
+} from "@excalidraw/fractional-indexing";
+
 import type {
   ElementsMap,
   ExcalidrawElement,
   FractionalIndex,
 } from "@excalidraw/element/types";
 
-import { InvalidFractionalIndexError } from "../src/fractionalIndex";
+describe("fractional index format validation", () => {
+  it("should reject malformed base62 order keys", () => {
+    expect(() => validateOrderKey("a!")).toThrow();
+    expect(() => validateOrderKey("a_")).toThrow();
+    expect(() => validateOrderKey("a1!")).toThrow();
+    expect(() => validateOrderKey("a1_")).toThrow();
+    expect(() => validateOrderKey("zd0032")).toThrow();
+  });
+
+  it("should accept valid base62 order keys", () => {
+    expect(() => validateOrderKey("Zz")).not.toThrow();
+    expect(() => validateOrderKey("a0")).not.toThrow();
+    expect(() => validateOrderKey("a1")).not.toThrow();
+    expect(() => validateOrderKey("a1V")).not.toThrow();
+    expect(() => validateOrderKey("z".padEnd(28, "z"))).not.toThrow();
+  });
+});
 
 describe("sync invalid indices with array order", () => {
   describe("should NOT sync empty array", () => {
@@ -104,6 +124,46 @@ describe("sync invalid indices with array order", () => {
     });
   });
 
+  describe("should sync when fractional index is malformed", () => {
+    // "zd0032" has head "z" which requires length 28 per getIntegerLength,
+    // but the string is far too short, so validateOrderKey throws for it
+    testInvalidIndicesSync({
+      elements: [{ id: "A", index: "zd0032" }],
+      expect: {
+        unchangedElements: [],
+      },
+    });
+
+    testInvalidIndicesSync({
+      elements: [
+        { id: "A", index: "a1" },
+        { id: "B", index: "zd0032" },
+        { id: "C", index: "a3" },
+      ],
+      expect: {
+        unchangedElements: ["A", "C"],
+      },
+    });
+
+    testInvalidIndicesSync({
+      elements: [{ id: "A", index: "a!" }],
+      expect: {
+        unchangedElements: [],
+      },
+    });
+
+    testInvalidIndicesSync({
+      elements: [
+        { id: "A", index: "a1" },
+        { id: "B", index: "a!" },
+        { id: "C", index: "a2" },
+      ],
+      expect: {
+        unchangedElements: ["A", "C"],
+      },
+    });
+  });
+
   describe("should sync when fractional indices are duplicated", () => {
     testInvalidIndicesSync({
       elements: [
diff --git a/packages/excalidraw/package.json b/packages/excalidraw/package.json
index 1d01b82bd8..d2f3d9f0b2 100644
--- a/packages/excalidraw/package.json
+++ b/packages/excalidraw/package.json
@@ -95,7 +95,6 @@
     "clsx": "1.1.1",
     "cross-env": "7.0.3",
     "es6-promise-pool": "2.5.0",
-    "fractional-indexing": "3.2.0",
     "fuzzy": "0.1.3",
     "image-blob-reduce": "3.0.1",
     "jotai": "2.11.0",
diff --git a/packages/fractional-indexing/global.d.ts b/packages/fractional-indexing/global.d.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/fractional-indexing/package.json b/packages/fractional-indexing/package.json
new file mode 100644
index 0000000000..36082678e3
--- /dev/null
+++ b/packages/fractional-indexing/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "@excalidraw/fractional-indexing",
+  "version": "3.3.0",
+  "description": "Provides functions for generating ordering strings",
+  "type": "module",
+  "types": "./dist/types/fractional-indexing/src/index.d.ts",
+  "main": "./dist/prod/index.js",
+  "module": "./dist/prod/index.js",
+  "engines": {
+    "node": "^14.13.1 || >=16.0.0"
+  },
+  "scripts": {
+    "gen:types": "rimraf types && tsc",
+    "build:esm": "rimraf dist && node ../../scripts/buildBase.js && yarn gen:types"
+  },
+  "keywords": [
+    "fractional",
+    "indexing",
+    "ordering",
+    "order"
+  ],
+  "homepage": "https://github.com/rocicorp/fractional-indexing#readme",
+  "bugs": "https://github.com/excalidraw/excalidraw/issues",
+  "repository": "https://github.com/excalidraw/excalidraw",
+  "author": "arv@rocicorp.dev",
+  "license": "CC0-1.0",
+  "devDependencies": {
+    "prettier": "^2.6.0",
+    "typescript": "5.9.3"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/types/fractional-indexing/src/index.d.ts",
+      "development": "./dist/dev/index.js",
+      "production": "./dist/prod/index.js",
+      "default": "./dist/prod/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist/*"
+  ]
+}
diff --git a/packages/fractional-indexing/src/index.ts b/packages/fractional-indexing/src/index.ts
new file mode 100644
index 0000000000..9f3bf31a6a
--- /dev/null
+++ b/packages/fractional-indexing/src/index.ts
@@ -0,0 +1,322 @@
+// Vendored from https://www.npmjs.com/package/fractional-indexing
+// License: CC0 (no rights reserved).
+// This is based on https://observablehq.com/@dgreensp/implementing-fractional-indexing
+
+export const BASE_62_DIGITS =
+  "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
+
+// `a` may be empty string, `b` is null or non-empty string.
+// `a < b` lexicographically if `b` is non-null.
+// no trailing zeros allowed.
+// digits is a string such as '0123456789' for base 10.  Digits must be in
+// ascending character code order!
+/**
+ * @param {string} a
+ * @param {string | null | undefined} b
+ * @param {string} digits
+ * @returns {string}
+ */
+function midpoint(
+  a: string,
+  b: string | null | undefined,
+  digits: string,
+): string {
+  const zero = digits[0];
+  if (b != null && a >= b) {
+    throw new Error(`${a} >= ${b}`);
+  }
+  if (a.slice(-1) === zero || (b && b.slice(-1) === zero)) {
+    throw new Error("trailing zero");
+  }
+  if (b) {
+    // remove longest common prefix.  pad `a` with 0s as we
+    // go.  note that we don't need to pad `b`, because it can't
+    // end before `a` while traversing the common prefix.
+    let n = 0;
+    while ((a[n] || zero) === b[n]) {
+      n++;
+    }
+    if (n > 0) {
+      return b.slice(0, n) + midpoint(a.slice(n), b.slice(n), digits);
+    }
+  }
+  // first digits (or lack of digit) are different
+  const digitA = a ? digits.indexOf(a[0]) : 0;
+  const digitB = b != null ? digits.indexOf(b[0]) : digits.length;
+  if (digitB - digitA > 1) {
+    const midDigit = Math.round(0.5 * (digitA + digitB));
+    return digits[midDigit];
+  }
+  // first digits are consecutive
+  if (b && b.length > 1) {
+    return b.slice(0, 1);
+  }
+
+  // `b` is null or has length 1 (a single digit).
+  // the first digit of `a` is the previous digit to `b`,
+  // or 9 if `b` is null.
+  // given, for example, midpoint('49', '5'), return
+  // '4' + midpoint('9', null), which will become
+  // '4' + '9' + midpoint('', null), which is '495'
+  return digits[digitA] + midpoint(a.slice(1), null, digits);
+}
+
+/**
+ * @param {string} int
+ * @return {void}
+ */
+
+function validateInteger(int: string): void {
+  if (int.length !== getIntegerLength(int[0])) {
+    throw new Error(`invalid integer part of order key: ${int}`);
+  }
+}
+
+/**
+ * @param {string} head
+ * @return {number}
+ */
+
+function getIntegerLength(head: string): number {
+  if (head >= "a" && head <= "z") {
+    return head.charCodeAt(0) - "a".charCodeAt(0) + 2;
+  } else if (head >= "A" && head <= "Z") {
+    return "Z".charCodeAt(0) - head.charCodeAt(0) + 2;
+  }
+
+  throw new Error(`invalid order key head: ${head}`);
+}
+
+/**
+ * @param {string} key
+ * @return {string}
+ */
+
+function getIntegerPart(key: string): string {
+  const integerPartLength = getIntegerLength(key[0]);
+
+  if (integerPartLength > key.length) {
+    throw new Error(`invalid order key: ${key}`);
+  }
+  return key.slice(0, integerPartLength);
+}
+
+/**
+ * @param {string} key
+ * @param {string} digits
+ * @return {void}
+ */
+export function validateOrderKey(
+  key: string,
+  digits: string = BASE_62_DIGITS,
+): void {
+  const validChars = key.split("").every((char) => digits.includes(char));
+  if (key === `A${digits[0].repeat(26)}` || !validChars) {
+    throw new Error(`invalid order key: ${key}`);
+  }
+  // getIntegerPart will throw if the first character is bad,
+  // or the key is too short.  we'd call it to check these things
+  // even if we didn't need the result
+  const i = getIntegerPart(key);
+  const f = key.slice(i.length);
+  if (f.slice(-1) === digits[0]) {
+    throw new Error(`invalid order key: ${key}`);
+  }
+}
+
+// note that this may return null, as there is a largest integer
+/**
+ * @param {string} x
+ * @param {string} digits
+ * @return {string | null}
+ */
+function incrementInteger(x: string, digits: string): string | null {
+  validateInteger(x);
+  const [head, ...digs] = x.split("");
+  let carry = true;
+  for (let i = digs.length - 1; carry && i >= 0; i--) {
+    const d = digits.indexOf(digs[i]) + 1;
+    if (d === digits.length) {
+      digs[i] = digits[0];
+    } else {
+      digs[i] = digits[d];
+      carry = false;
+    }
+  }
+  if (carry) {
+    if (head === "Z") {
+      return `a${digits[0]}`;
+    }
+    if (head === "z") {
+      return null;
+    }
+    const h = String.fromCharCode(head.charCodeAt(0) + 1);
+    if (h > "a") {
+      digs.push(digits[0]);
+    } else {
+      digs.pop();
+    }
+    return h + digs.join("");
+  }
+  return head + digs.join("");
+}
+
+// note that this may return null, as there is a smallest integer
+/**
+ * @param {string} x
+ * @param {string} digits
+ * @return {string | null}
+ */
+function decrementInteger(x: string, digits: string): string | null {
+  validateInteger(x);
+  const [head, ...digs] = x.split("");
+  let borrow = true;
+  for (let i = digs.length - 1; borrow && i >= 0; i--) {
+    const d = digits.indexOf(digs[i]) - 1;
+    if (d === -1) {
+      digs[i] = digits.slice(-1);
+    } else {
+      digs[i] = digits[d];
+      borrow = false;
+    }
+  }
+  if (borrow) {
+    if (head === "a") {
+      return `Z${digits.slice(-1)}`;
+    }
+    if (head === "A") {
+      return null;
+    }
+    const h = String.fromCharCode(head.charCodeAt(0) - 1);
+    if (h < "Z") {
+      digs.push(digits.slice(-1));
+    } else {
+      digs.pop();
+    }
+    return h + digs.join("");
+  }
+  return head + digs.join("");
+}
+
+// `a` is an order key or null (START).
+// `b` is an order key or null (END).
+// `a < b` lexicographically if both are non-null.
+// digits is a string such as '0123456789' for base 10.  Digits must be in
+// ascending character code order!
+/**
+ * @param {string | null | undefined} a
+ * @param {string | null | undefined} b
+ * @param {string=} digits
+ * @return {string}
+ */
+export function generateKeyBetween(
+  a: string | null | undefined,
+  b: string | null | undefined,
+  digits = BASE_62_DIGITS,
+): string {
+  if (a != null) {
+    validateOrderKey(a, digits);
+  }
+  if (b != null) {
+    validateOrderKey(b, digits);
+  }
+  if (a != null && b != null && a >= b) {
+    throw new Error(`${a} >= ${b}`);
+  }
+  if (a == null) {
+    if (b == null) {
+      return `a${digits[0]}`;
+    }
+
+    const ib = getIntegerPart(b);
+    const fb = b.slice(ib.length);
+    if (ib === `A${digits[0].repeat(26)}`) {
+      return ib + midpoint("", fb, digits);
+    }
+    if (ib < b) {
+      return ib;
+    }
+    const res = decrementInteger(ib, digits);
+    if (res == null) {
+      throw new Error("cannot decrement any more");
+    }
+    return res;
+  }
+
+  if (b == null) {
+    const ia = getIntegerPart(a);
+    const fa = a.slice(ia.length);
+    const i = incrementInteger(ia, digits);
+    return i == null ? ia + midpoint(fa, null, digits) : i;
+  }
+
+  const ia = getIntegerPart(a);
+  const fa = a.slice(ia.length);
+  const ib = getIntegerPart(b);
+  const fb = b.slice(ib.length);
+  if (ia === ib) {
+    return ia + midpoint(fa, fb, digits);
+  }
+  const i = incrementInteger(ia, digits);
+  if (i == null) {
+    throw new Error("cannot increment any more");
+  }
+  if (i < b) {
+    return i;
+  }
+  return ia + midpoint(fa, null, digits);
+}
+
+/**
+ * same preconditions as generateKeysBetween.
+ * n >= 0.
+ * Returns an array of n distinct keys in sorted order.
+ * If a and b are both null, returns [a0, a1, ...]
+ * If one or the other is null, returns consecutive "integer"
+ * keys.  Otherwise, returns relatively short keys between
+ * a and b.
+ * @param {string | null | undefined} a
+ * @param {string | null | undefined} b
+ * @param {number} n
+ * @param {string} digits
+ * @return {string[]}
+ */
+export function generateNKeysBetween(
+  a: string | null | undefined,
+  b: string | null | undefined,
+  n: number,
+  digits = BASE_62_DIGITS,
+): string[] {
+  if (n === 0) {
+    return [];
+  }
+  if (n === 1) {
+    return [generateKeyBetween(a, b, digits)];
+  }
+  if (b == null) {
+    let c = generateKeyBetween(a, b, digits);
+    const result = [c];
+    for (let i = 0; i < n - 1; i++) {
+      c = generateKeyBetween(c, b, digits);
+      result.push(c);
+    }
+    return result;
+  }
+  if (a == null) {
+    let c = generateKeyBetween(a, b, digits);
+    const result = [c];
+    for (let i = 0; i < n - 1; i++) {
+      c = generateKeyBetween(a, c, digits);
+      result.push(c);
+    }
+    result.reverse();
+    return result;
+  }
+  const mid = Math.floor(n / 2);
+  const c = generateKeyBetween(a, b, digits);
+  return [
+    ...generateNKeysBetween(a, c, mid, digits),
+    c,
+    ...generateNKeysBetween(c, b, n - mid - 1, digits),
+  ];
+}
diff --git a/packages/fractional-indexing/tsconfig.json b/packages/fractional-indexing/tsconfig.json
new file mode 100644
index 0000000000..6450145b1c
--- /dev/null
+++ b/packages/fractional-indexing/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist/types"
+  },
+  "include": ["src/**/*", "global.d.ts"],
+  "exclude": ["**/*.test.*", "tests", "types", "examples", "dist"]
+}
diff --git a/packages/tsconfig.base.json b/packages/tsconfig.base.json
index b1d145ad87..1bd75695b5 100644
--- a/packages/tsconfig.base.json
+++ b/packages/tsconfig.base.json
@@ -20,7 +20,9 @@
       "@excalidraw/math": ["./math/src/index.ts"],
       "@excalidraw/math/*": ["./math/src/*"],
       "@excalidraw/utils": ["./utils/src/index.ts"],
-      "@excalidraw/utils/*": ["./utils/src/*"]
+      "@excalidraw/utils/*": ["./utils/src/*"],
+      "@excalidraw/fractional-indexing": ["./fractional-indexing/src/index.ts"],
+      "@excalidraw/fractional-indexing/*": ["./fractional-indexing/src/*"]
     }
   }
 }
diff --git a/scripts/buildBase.js b/scripts/buildBase.js
index 25c0874f28..0b82b0a488 100644
--- a/scripts/buildBase.js
+++ b/scripts/buildBase.js
@@ -13,7 +13,12 @@ const getConfig = (outdir) => ({
   alias: {
     "@excalidraw/utils": path.resolve(__dirname, "../packages/utils/src"),
   },
-  external: ["@excalidraw/common", "@excalidraw/element", "@excalidraw/math"],
+  external: [
+    "@excalidraw/common",
+    "@excalidraw/element",
+    "@excalidraw/math",
+    "@excalidraw/fractional-indexing",
+  ],
 });
 
 function buildDev(config) {
diff --git a/scripts/buildPackage.js b/scripts/buildPackage.js
index 96c97cbbd5..839e135855 100644
--- a/scripts/buildPackage.js
+++ b/scripts/buildPackage.js
@@ -74,7 +74,12 @@ const getConfig = (outdir) => ({
   alias: {
     "@excalidraw/utils": path.resolve(__dirname, "../packages/utils/src"),
   },
-  external: ["@excalidraw/common", "@excalidraw/element", "@excalidraw/math"],
+  external: [
+    "@excalidraw/common",
+    "@excalidraw/element",
+    "@excalidraw/math",
+    "@excalidraw/fractional-indexing",
+  ],
   loader: {
     ".woff2": "file",
   },
diff --git a/scripts/buildUtils.js b/scripts/buildUtils.js
index 1cf3ffbaaf..24d9e0a7c0 100644
--- a/scripts/buildUtils.js
+++ b/scripts/buildUtils.js
@@ -18,6 +18,10 @@ const getConfig = (outdir) => ({
     "@excalidraw/element": path.resolve(__dirname, "../packages/element/src"),
     "@excalidraw/excalidraw": path.resolve(__dirname, "../packages/excalidraw"),
     "@excalidraw/math": path.resolve(__dirname, "../packages/math/src"),
+    "@excalidraw/fractional-indexing": path.resolve(
+      __dirname,
+      "../packages/fractional-indexing/src",
+    ),
     "@excalidraw/utils": path.resolve(__dirname, "../packages/utils/src"),
   },
 });
diff --git a/scripts/release.js b/scripts/release.js
index f45afc66d2..b6f3ca5c87 100644
--- a/scripts/release.js
+++ b/scripts/release.js
@@ -6,7 +6,13 @@ const { execSync } = require("child_process");
 const updateChangelog = require("./updateChangelog");
 
 // skipping utils for now, as it has independent release process
-const PACKAGES = ["common", "math", "element", "excalidraw"];
+const PACKAGES = [
+  "common",
+  "fractional-indexing",
+  "math",
+  "element",
+  "excalidraw",
+];
 const PACKAGES_DIR = path.resolve(__dirname, "../packages");
 
 /**
diff --git a/tsconfig.json b/tsconfig.json
index 45a29dd618..5948a866aa 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -25,6 +25,8 @@
       "@excalidraw/excalidraw/*": ["./packages/excalidraw/*"],
       "@excalidraw/element": ["./packages/element/src/index.ts"],
       "@excalidraw/element/*": ["./packages/element/src/*"],
+      "@excalidraw/fractional-indexing": ["./packages/fractional-indexing/src/index.ts"],
+      "@excalidraw/fractional-indexing/*": ["./packages/fractional-indexing/src/*"],
       "@excalidraw/math": ["./packages/math/src/index.ts"],
       "@excalidraw/math/*": ["./packages/math/src/*"],
       "@excalidraw/utils": ["./packages/utils/src/index.ts"],
diff --git a/vitest.config.mts b/vitest.config.mts
index 353f84ccfc..7c45c43f25 100644
--- a/vitest.config.mts
+++ b/vitest.config.mts
@@ -45,6 +45,20 @@ export default defineConfig({
         find: /^@excalidraw\/utils\/(.*?)/,
         replacement: path.resolve(__dirname, "./packages/utils/src/$1"),
       },
+      {
+        find: /^@excalidraw\/fractional-indexing$/,
+        replacement: path.resolve(
+          __dirname,
+          "./packages/fractional-indexing/src/index.ts",
+        ),
+      },
+      {
+        find: /^@excalidraw\/fractional-indexing\/(.*?)/,
+        replacement: path.resolve(
+          __dirname,
+          "./packages/fractional-indexing/src/$1",
+        ),
+      },
     ],
   },
   //@ts-ignore
diff --git a/yarn.lock b/yarn.lock
index dd87b52426..09381a0264 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6572,11 +6572,6 @@ fraction.js@^4.2.0:
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
-fractional-indexing@3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/fractional-indexing/-/fractional-indexing-3.2.0.tgz#1193e63d54ff4e0cbe0c79a9ed6cfbab25d91628"
-  integrity sha512-PcOxmqwYCW7O2ovKRU8OoQQj2yqTfEB/yeTYk4gPid6dN5ODRfU1hXd9tTVZzax/0NkO7AxpHykvZnT1aYp/BQ==
-
 fs-constants@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
@@ -8525,6 +8520,11 @@ prettier@2.6.2:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.6.2.tgz#e26d71a18a74c3d0f0597f55f01fb6c06c206032"
   integrity sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==
 
+prettier@^2.6.0:
+  version "2.8.8"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
+  integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
+
 pretty-bytes@^5.3.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"

From d2557474e2a9cfccd0a94ab950a2e763ab12823a Mon Sep 17 00:00:00 2001
From: David Luzar <5153846+dwelle@users.noreply.github.com>
Date: Tue, 5 May 2026 21:35:32 +0200
Subject: [PATCH 08/17] fix(editor): fix target element index when
 creating/adding elements to frames (#11257)

---
 packages/element/src/Scene.ts                 |  48 +-
 packages/element/src/collision.ts             |   9 +-
 packages/element/src/duplicate.ts             |  21 +-
 packages/element/src/frame.ts                 | 130 +++--
 packages/element/src/typeChecks.ts            |  20 +
 packages/element/tests/frame.test.tsx         | 552 +++++++++++++++++-
 packages/excalidraw/actions/actionDeselect.ts |   2 +
 .../excalidraw/actions/actionFinalize.tsx     |   1 +
 packages/excalidraw/actions/actionFrame.ts    |   1 -
 packages/excalidraw/actions/actionGroup.tsx   |   1 -
 packages/excalidraw/components/App.tsx        | 307 ++++++++--
 .../components/LibraryMenuItems.tsx           |   1 +
 .../excalidraw/components/Stats/Dimension.tsx |   2 -
 .../components/Stats/MultiDimension.tsx       |   2 -
 .../components/canvases/InteractiveCanvas.tsx |   6 +-
 .../components/canvases/NewElementCanvas.tsx  |   3 +-
 .../components/canvases/StaticCanvas.tsx      |   6 +-
 packages/excalidraw/polyfill.ts               |  88 +++
 packages/excalidraw/scene/Renderer.ts         | 313 ++++++----
 packages/excalidraw/tests/clipboard.test.tsx  |  97 ++-
 .../excalidraw/wysiwyg/textWysiwyg.test.tsx   |  57 ++
 21 files changed, 1405 insertions(+), 262 deletions(-)

diff --git a/packages/element/src/Scene.ts b/packages/element/src/Scene.ts
index 4ba663ceba..35b0cf4b95 100644
--- a/packages/element/src/Scene.ts
+++ b/packages/element/src/Scene.ts
@@ -338,29 +338,20 @@ export class Scene {
     this.callbacks.clear();
   }
 
-  insertElementAtIndex(element: ExcalidrawElement, index: number) {
-    if (!Number.isFinite(index) || index < 0) {
-      throw new Error(
-        "insertElementAtIndex can only be called with index >= 0",
-      );
-    }
-
-    const nextElements = [
-      ...this.elements.slice(0, index),
-      element,
-      ...this.elements.slice(index),
-    ];
-
-    syncMovedIndices(nextElements, arrayToMap([element]));
-
-    this.replaceAllElements(nextElements);
-  }
-
-  insertElementsAtIndex(elements: ExcalidrawElement[], index: number) {
+  /** low-level - generally use app.insertNewElements() */
+  insertElementsAtIndex(
+    elements: ExcalidrawElement[],
+    /** null indicates end of the array */
+    index: number | null,
+  ) {
     if (!elements.length) {
       return;
     }
 
+    if (index === null) {
+      index = this.elements.length;
+    }
+
     if (!Number.isFinite(index) || index < 0) {
       throw new Error(
         "insertElementAtIndex can only be called with index >= 0",
@@ -378,24 +369,9 @@ export class Scene {
     this.replaceAllElements(nextElements);
   }
 
+  /** low-level - generally use app.insertNewElement() */
   insertElement = (element: ExcalidrawElement) => {
-    const index = element.frameId
-      ? this.getElementIndex(element.frameId)
-      : this.elements.length;
-
-    this.insertElementAtIndex(element, index);
-  };
-
-  insertElements = (elements: ExcalidrawElement[]) => {
-    if (!elements.length) {
-      return;
-    }
-
-    const index = elements[0]?.frameId
-      ? this.getElementIndex(elements[0].frameId)
-      : this.elements.length;
-
-    this.insertElementsAtIndex(elements, index);
+    this.insertElementsAtIndex([element], null);
   };
 
   getElementIndex(elementId: string) {
diff --git a/packages/element/src/collision.ts b/packages/element/src/collision.ts
index c260ae5267..6999512b44 100644
--- a/packages/element/src/collision.ts
+++ b/packages/element/src/collision.ts
@@ -61,6 +61,8 @@ import { distanceToElement } from "./distance";
 
 import { getBindingGap } from "./binding";
 
+import { hasBackground } from "./comparisons";
+
 import type {
   ElementsMap,
   ExcalidrawArrowElement,
@@ -83,7 +85,7 @@ export const shouldTestInside = (element: ExcalidrawElement) => {
   }
 
   const isDraggableFromInside =
-    !isTransparent(element.backgroundColor) ||
+    (hasBackground(element.type) && !isTransparent(element.backgroundColor)) ||
     hasBoundTextElement(element) ||
     isIframeLikeElement(element) ||
     isTextElement(element);
@@ -324,7 +326,10 @@ export const getAllHoveredElementAtPoint = (
     ) {
       candidateElements.push(element);
 
-      if (!isTransparent(element.backgroundColor)) {
+      if (
+        hasBackground(element.type) &&
+        !isTransparent(element.backgroundColor)
+      ) {
         break;
       }
     }
diff --git a/packages/element/src/duplicate.ts b/packages/element/src/duplicate.ts
index 235fd1e47d..24135c0879 100644
--- a/packages/element/src/duplicate.ts
+++ b/packages/element/src/duplicate.ts
@@ -111,6 +111,9 @@ export const duplicateElements = (
          * user interaction.
          */
         type: "everything";
+        // TODO remove/review this once we add frame children order migration
+        // and invariant checks
+        preserveFrameChildrenOrder?: boolean;
       }
     | {
         /**
@@ -170,6 +173,8 @@ export const duplicateElements = (
     opts.type === "in-place"
       ? opts.idsOfElementsToDuplicate
       : new Map(elements.map((el) => [el.id, el]));
+  const preserveFrameChildrenOrder =
+    opts.type === "everything" && opts.preserveFrameChildrenOrder;
 
   // For sanity
   if (opts.type === "in-place") {
@@ -277,7 +282,7 @@ export const duplicateElements = (
     if (groupId) {
       const groupElements = getElementsInGroup(elements, groupId).flatMap(
         (element) =>
-          isFrameLikeElement(element)
+          isFrameLikeElement(element) && !preserveFrameChildrenOrder
             ? [...getFrameChildren(elements, element.id), element]
             : [element],
       );
@@ -293,13 +298,25 @@ export const duplicateElements = (
     // frame duplication
     // -------------------------------------------------------------------------
 
-    if (element.frameId && frameIdsToDuplicate.has(element.frameId)) {
+    if (
+      !preserveFrameChildrenOrder &&
+      element.frameId &&
+      frameIdsToDuplicate.has(element.frameId)
+    ) {
       continue;
     }
 
     if (isFrameLikeElement(element)) {
       const frameId = element.id;
 
+      if (preserveFrameChildrenOrder) {
+        insertBeforeOrAfterIndex(
+          findLastIndex(elementsWithDuplicates, (el) => el.id === frameId),
+          copyElements(element),
+        );
+        continue;
+      }
+
       const frameChildren = getFrameChildren(elements, frameId);
 
       const targetIndex = findLastIndex(elementsWithDuplicates, (el) => {
diff --git a/packages/element/src/frame.ts b/packages/element/src/frame.ts
index 6138633ff4..3d1449a072 100644
--- a/packages/element/src/frame.ts
+++ b/packages/element/src/frame.ts
@@ -23,6 +23,7 @@ import {
 } from "./bounds";
 import { mutateElement } from "./mutateElement";
 import { getBoundTextElement, getContainerElement } from "./textElement";
+import { syncMovedIndices } from "./fractionalIndex";
 import {
   isFrameElement,
   isFrameLikeElement,
@@ -491,10 +492,44 @@ export const filterElementsEligibleAsFrameChildren = (
   return eligibleElements;
 };
 
+export const getCommonFrameId = (elements: readonly ExcalidrawElement[]) => {
+  let commonFrameId: ExcalidrawElement["frameId"] | undefined;
+
+  for (const element of elements) {
+    if (isFrameLikeElement(element) || !element.frameId) {
+      return null;
+    }
+
+    if (commonFrameId === undefined) {
+      commonFrameId = element.frameId;
+    } else if (commonFrameId !== element.frameId) {
+      return null;
+    }
+  }
+
+  return commonFrameId ?? null;
+};
+
+export const getFrameChildrenInsertionIndex = (
+  elements: readonly ExcalidrawElement[],
+  frameId: ExcalidrawFrameLikeElement["id"],
+): number | null => {
+  for (let index = elements.length - 1; index >= 0; index--) {
+    const element = elements[index];
+
+    if (element.id === frameId) {
+      return index;
+    } else if (element.frameId === frameId) {
+      return index + 1;
+    }
+  }
+
+  return null;
+};
+
 /**
- * Retains (or repairs for target frame) the ordering invriant where children
- * elements come right before the parent frame:
- * [el, el, child, child, frame, el]
+ * Adds elements and their bound elements to frame. Reorders added elements to
+ * be just below frame, or just above its highest child (whichever is higher).
  *
  * @returns mutated allElements (same data structure)
  */
@@ -502,19 +537,11 @@ export const addElementsToFrame = <T extends ElementsMapOrArray>(
   allElements: T,
   elementsToAdd: NonDeletedExcalidrawElement[],
   frame: ExcalidrawFrameLikeElement,
-  appState: AppState,
 ): T => {
   const elementsMap = arrayToMap(allElements);
-  const currTargetFrameChildrenMap = new Map<ExcalidrawElement["id"], true>();
-  for (const element of allElements.values()) {
-    if (element.frameId === frame.id) {
-      currTargetFrameChildrenMap.set(element.id, true);
-    }
-  }
+  const commonFrameId = getCommonFrameId(elementsToAdd);
 
-  const suppliedElementsToAddSet = new Set(elementsToAdd.map((el) => el.id));
-
-  const finalElementsToAdd: ExcalidrawElement[] = [];
+  const finalElementsToAdd = new Set<ExcalidrawElement>();
 
   const otherFrames = new Set<ExcalidrawFrameLikeElement["id"]>();
 
@@ -525,7 +552,8 @@ export const addElementsToFrame = <T extends ElementsMapOrArray>(
   }
 
   // - add bound text elements if not already in the array
-  // - filter out elements that are already in the frame
+  // - keep elements already in the frame so mixed selections can be reordered
+  //   together
   for (const element of omitGroupsContainingFrameLikes(
     allElements,
     elementsToAdd,
@@ -538,38 +566,68 @@ export const addElementsToFrame = <T extends ElementsMapOrArray>(
       continue;
     }
 
-    // if the element is already in another frame (which is also in elementsToAdd),
-    // it means that frame and children are selected at the same time
-    // => keep original frame membership, do not add to the target frame
-    if (
-      element.frameId &&
-      appState.selectedElementIds[element.id] &&
-      appState.selectedElementIds[element.frameId]
-    ) {
+    if (element.frameId && element.frameId !== frame.id) {
       continue;
     }
 
-    if (!currTargetFrameChildrenMap.has(element.id)) {
-      finalElementsToAdd.push(element);
-    }
+    finalElementsToAdd.add(element);
 
     const boundTextElement = getBoundTextElement(element, elementsMap);
-    if (
-      boundTextElement &&
-      !suppliedElementsToAddSet.has(boundTextElement.id) &&
-      !currTargetFrameChildrenMap.has(boundTextElement.id)
-    ) {
-      finalElementsToAdd.push(boundTextElement);
+    if (boundTextElement && !finalElementsToAdd.has(boundTextElement)) {
+      finalElementsToAdd.add(boundTextElement);
     }
   }
 
   for (const element of finalElementsToAdd) {
-    mutateElement(element, elementsMap, {
-      frameId: frame.id,
-    });
+    // we don't always need to update the element if it's already in the frame,
+    // but we still need to accumulate in finalElementsToAdd so we potentially
+    // reorder them if added together
+    if (element.frameId !== frame.id) {
+      mutateElement(element, elementsMap, {
+        frameId: frame.id,
+      });
+    }
   }
 
-  return allElements;
+  // (re)order elements to be just below the frame,
+  // or just above the highest child if that is higher
+  // (latter case is denormalized order until we migrate)
+  // ---------------------------------------------------------------------------
+
+  if (
+    !finalElementsToAdd.size ||
+    // if all elements to add already belong to the frame, then we don't want to
+    // reorder (case: we're dragging element children within the frame)
+    commonFrameId === frame.id
+  ) {
+    return allElements;
+  }
+
+  const otherElements = Array.from(allElements.values()).filter(
+    (element) => !finalElementsToAdd.has(element),
+  );
+  const insertionIndex = getFrameChildrenInsertionIndex(
+    otherElements,
+    frame.id,
+  );
+
+  if (insertionIndex === null) {
+    return allElements;
+  }
+
+  const reorderedElements = [
+    ...otherElements.slice(0, insertionIndex),
+    ...finalElementsToAdd,
+    ...otherElements.slice(insertionIndex),
+  ];
+
+  syncMovedIndices(reorderedElements, arrayToMap([...finalElementsToAdd]));
+
+  return (
+    Array.isArray(allElements)
+      ? reorderedElements
+      : new Map(reorderedElements.map((element) => [element.id, element]))
+  ) as T;
 };
 
 export const removeElementsFromFrame = (
@@ -623,13 +681,11 @@ export const replaceAllElementsInFrame = <T extends ExcalidrawElement>(
   allElements: readonly T[],
   nextElementsInFrame: ExcalidrawElement[],
   frame: ExcalidrawFrameLikeElement,
-  app: AppClassProperties,
 ): T[] => {
   return addElementsToFrame(
     removeAllElementsFromFrame(allElements, frame),
     nextElementsInFrame,
     frame,
-    app.state,
   ).slice();
 };
 
diff --git a/packages/element/src/typeChecks.ts b/packages/element/src/typeChecks.ts
index b609cc3f8a..3a8f5e36ef 100644
--- a/packages/element/src/typeChecks.ts
+++ b/packages/element/src/typeChecks.ts
@@ -392,3 +392,23 @@ export const canBecomePolygon = (
     (points.length === 3 && !pointsEqual(points[0], points[points.length - 1]))
   );
 };
+
+export const isEligibleFrameChildType = (type: ElementOrToolType) => {
+  switch (type) {
+    case "rectangle":
+    case "diamond":
+    case "ellipse":
+    case "arrow":
+    case "line":
+    case "freedraw":
+    case "text":
+    case "image":
+    case "frame":
+    case "embeddable": {
+      return true;
+    }
+    default: {
+      return false;
+    }
+  }
+};
diff --git a/packages/element/tests/frame.test.tsx b/packages/element/tests/frame.test.tsx
index e92267130a..b419d00f02 100644
--- a/packages/element/tests/frame.test.tsx
+++ b/packages/element/tests/frame.test.tsx
@@ -5,12 +5,15 @@ import {
 import { arrayToMap } from "@excalidraw/common";
 
 import { API } from "@excalidraw/excalidraw/tests/helpers/api";
-import { Keyboard, Pointer } from "@excalidraw/excalidraw/tests/helpers/ui";
+import { Keyboard, Pointer, UI } from "@excalidraw/excalidraw/tests/helpers/ui";
+import { getTextEditor } from "@excalidraw/excalidraw/tests/queries/dom";
 import {
   getCloneByOrigId,
   render,
 } from "@excalidraw/excalidraw/tests/test-utils";
 
+import { getSelectedElements } from "@excalidraw/excalidraw/scene";
+
 import { elementOverlapsWithFrame } from "../src/frame";
 
 import type {
@@ -151,6 +154,230 @@ describe("adding elements to frames", () => {
     ).toBe(true);
   });
 
+  it("should not add a newly created element to a frame behind a non-frame element", () => {
+    const cover = API.createElement({
+      id: "cover",
+      type: "rectangle",
+      x: 10,
+      y: 10,
+      width: 80,
+      height: 80,
+      backgroundColor: "#ffc9c9",
+    });
+
+    API.setElements([frame, cover]);
+
+    UI.clickTool("rectangle");
+    mouse.downAt(20, 20);
+    mouse.moveTo(40, 40);
+    mouse.upAt(40, 40);
+
+    const createdElement = h.elements.find(
+      (element) => element.id !== frame.id && element.id !== cover.id,
+    );
+
+    expect(createdElement?.frameId).toBe(null);
+    expect(h.elements.map((element) => element.id)).toEqual([
+      frame.id,
+      cover.id,
+      createdElement?.id,
+    ]);
+  });
+
+  it("should add a newly created element to a frame over a non-frame element", () => {
+    const cover = API.createElement({
+      id: "cover",
+      type: "rectangle",
+      x: 10,
+      y: 10,
+      width: 80,
+      height: 80,
+      backgroundColor: "#ffc9c9",
+    });
+
+    API.setElements([cover, frame]);
+
+    UI.clickTool("rectangle");
+    mouse.downAt(20, 20);
+    mouse.moveTo(40, 40);
+    mouse.upAt(40, 40);
+
+    const createdElement = h.elements.find(
+      (element) => element.id !== frame.id && element.id !== cover.id,
+    );
+
+    expect(createdElement?.frameId).toBe(frame.id);
+  });
+
+  it("should highlight the target frame while creating a new element", () => {
+    API.setElements([frame]);
+
+    UI.clickTool("rectangle");
+    mouse.downAt(20, 20);
+    mouse.moveTo(40, 40);
+
+    expect(h.state.frameToHighlight?.id).toBe(frame.id);
+
+    mouse.upAt(40, 40);
+
+    expect(h.state.frameToHighlight).toBe(null);
+  });
+
+  it("should highlight the target frame while hovering with a creation tool", () => {
+    API.setElements([frame]);
+
+    UI.clickTool("rectangle");
+    mouse.moveTo(20, 20);
+
+    expect(h.state.frameToHighlight?.id).toBe(frame.id);
+
+    mouse.moveTo(200, 200);
+
+    expect(h.state.frameToHighlight).toBe(null);
+  });
+
+  it("should not add grid-snapped text outside the frame to the clicked frame", async () => {
+    const offsetFrame = API.createElement({
+      id: "offsetFrame",
+      type: "frame",
+      x: 10,
+      y: 0,
+      width: 150,
+      height: 150,
+    });
+
+    API.setElements([offsetFrame]);
+    API.setAppState({
+      gridModeEnabled: true,
+    });
+
+    UI.clickTool("text");
+    mouse.clickAt(12, 0);
+
+    await getTextEditor();
+
+    const createdText = h.elements.find(
+      (element) => element.id !== offsetFrame.id,
+    );
+
+    expect(createdText?.x).toBe(0);
+    expect(createdText?.y).toBe(0);
+    expect(createdText?.frameId).toBe(null);
+  });
+
+  it("should add a newly created element to a frame behind another frame", () => {
+    const lockedFrame = API.createElement({
+      id: "lockedFrame",
+      type: "frame",
+      x: 10,
+      y: 10,
+      width: 80,
+      height: 80,
+      locked: true,
+    });
+
+    API.setElements([frame, lockedFrame]);
+
+    UI.clickTool("rectangle");
+    mouse.downAt(20, 20);
+    mouse.moveTo(40, 40);
+    mouse.upAt(40, 40);
+
+    const createdElement = h.elements.find(
+      (element) => element.id !== frame.id && element.id !== lockedFrame.id,
+    );
+
+    expect(createdElement?.frameId).toBe(frame.id);
+  });
+
+  it("should insert a newly created frame child just below its frame", () => {
+    const frameChildUnderCursor = API.createElement({
+      id: "frameChildUnderCursor",
+      type: "rectangle",
+      x: 10,
+      y: 10,
+      width: 80,
+      height: 80,
+      backgroundColor: "#ffc9c9",
+      frameId: frame.id,
+    });
+    const otherFrameChild = API.createElement({
+      id: "otherFrameChild",
+      type: "rectangle",
+      x: 100,
+      y: 20,
+      width: 20,
+      height: 20,
+      frameId: frame.id,
+    });
+
+    API.setElements([frameChildUnderCursor, otherFrameChild, frame]);
+
+    UI.clickTool("rectangle");
+    mouse.downAt(20, 20);
+    mouse.moveTo(40, 40);
+    mouse.upAt(40, 40);
+
+    const createdElement = h.elements.find(
+      (element) =>
+        element.id !== frame.id &&
+        element.id !== frameChildUnderCursor.id &&
+        element.id !== otherFrameChild.id,
+    );
+
+    expect(createdElement?.frameId).toBe(frame.id);
+    expect(h.elements.map((element) => element.id)).toEqual([
+      frameChildUnderCursor.id,
+      otherFrameChild.id,
+      createdElement?.id,
+      frame.id,
+    ]);
+  });
+
+  it("should insert a newly created frame child above the highest frame child", () => {
+    const frameChildUnderCursor = API.createElement({
+      id: "frameChildUnderCursor",
+      type: "rectangle",
+      x: 10,
+      y: 10,
+      width: 80,
+      height: 80,
+      backgroundColor: "#ffc9c9",
+      frameId: frame.id,
+    });
+    const otherFrameChild = API.createElement({
+      id: "otherFrameChild",
+      type: "rectangle",
+      x: 100,
+      y: 20,
+      width: 20,
+      height: 20,
+      frameId: frame.id,
+    });
+
+    API.setElements([frame, frameChildUnderCursor, otherFrameChild]);
+
+    UI.clickTool("rectangle");
+    mouse.downAt(20, 20);
+    mouse.moveTo(40, 40);
+    mouse.upAt(40, 40);
+
+    const createdElement = h.elements.find(
+      (element) =>
+        element.id !== frame.id &&
+        element.id !== frameChildUnderCursor.id &&
+        element.id !== otherFrameChild.id,
+    );
+
+    expect(createdElement?.frameId).toBe(frame.id);
+    expect(h.elements.map((element) => element.id)).toEqual([
+      frame.id,
+      frameChildUnderCursor.id,
+      otherFrameChild.id,
+      createdElement?.id,
+    ]);
+  });
+
   const commonTestCases = async (
     func: typeof resizeFrameOverElement | typeof dragElementIntoFrame,
   ) => {
@@ -457,6 +684,329 @@ describe("adding elements to frames", () => {
       expect(API.getElement(containingRect).frameId).toBe(frame.id);
     });
 
+    it("should drag an element into a frame", () => {
+      API.setElements([rect2, frame]);
+
+      dragElementIntoFrame(frame, rect2);
+
+      expect(rect2.frameId).toBe(frame.id);
+    });
+
+    it("should layer a dragged element above the highest frame child", () => {
+      const frameChild = API.createElement({
+        id: "frameChild",
+        type: "rectangle",
+        x: 10,
+        y: 10,
+        width: 20,
+        height: 20,
+        frameId: frame.id,
+      });
+
+      API.setElements([frame, frameChild, rect2]);
+
+      dragElementIntoFrame(frame, rect2);
+
+      expect(rect2.frameId).toBe(frame.id);
+      expect(h.elements.map((element) => element.id)).toEqual([
+        frame.id,
+        frameChild.id,
+        rect2.id,
+      ]);
+      expect(rect2.index! > frameChild.index!).toBe(true);
+      expect(rect2.index! > frame.index!).toBe(true);
+    });
+
+    it("should preview a dragged element above the highest frame child before pointerup", () => {
+      const frameChild = API.createElement({
+        id: "frameChild",
+        type: "rectangle",
+        x: 10,
+        y: 10,
+        width: 20,
+        height: 20,
+        frameId: frame.id,
+      });
+
+      API.setElements([rect2, frame, frameChild]);
+      API.setSelectedElements([rect2]);
+      API.updateElement(rect2, {
+        x: 10,
+        y: 10,
+      });
+
+      const getRenderableElementIds = (
+        selectedElementsAreBeingDragged: boolean,
+      ) => {
+        return h.app.renderer
+          .getRenderableElements({
+            zoom: h.state.zoom,
+            offsetLeft: 0,
+            offsetTop: 0,
+            scrollX: 0,
+            scrollY: 0,
+            height: 1000,
+            width: 1000,
+            editingTextElement: h.state.editingTextElement,
+            newElement: h.state.newElement,
+            selectedElements: getSelectedElements(h.elements, h.state),
+            selectedElementsAreBeingDragged,
+            frameToHighlight: frame as ExcalidrawFrameLikeElement,
+          })
+          .visibleElements.map((element) => element.id);
+      };
+
+      expect(h.elements.map((element) => element.id)).toEqual([
+        rect2.id,
+        frame.id,
+        frameChild.id,
+      ]);
+      expect(getRenderableElementIds(false)).toEqual([
+        rect2.id,
+        frame.id,
+        frameChild.id,
+      ]);
+      expect(getRenderableElementIds(true)).toEqual([
+        frame.id,
+        frameChild.id,
+        rect2.id,
+      ]);
+      expect(h.elements.map((element) => element.id)).toEqual([
+        rect2.id,
+        frame.id,
+        frameChild.id,
+      ]);
+      expect(rect2.frameId).toBe(null);
+    });
+
+    it("should not preview reorder dragged elements already in the highlighted frame", () => {
+      const frameChild = API.createElement({
+        id: "frameChild",
+        type: "rectangle",
+        x: 10,
+        y: 10,
+        width: 20,
+        height: 20,
+        frameId: frame.id,
+      });
+      const otherFrameChild = API.createElement({
+        id: "otherFrameChild",
+        type: "rectangle",
+        x: 40,
+        y: 10,
+        width: 20,
+        height: 20,
+        frameId: frame.id,
+      });
+
+      API.setElements([frameChild, frame, otherFrameChild]);
+      API.setSelectedElements([frameChild]);
+
+      const renderableElementIds = h.app.renderer
+        .getRenderableElements({
+          zoom: h.state.zoom,
+          offsetLeft: 0,
+          offsetTop: 0,
+          scrollX: 0,
+          scrollY: 0,
+          height: 1000,
+          width: 1000,
+          editingTextElement: h.state.editingTextElement,
+          newElement: h.state.newElement,
+          selectedElements: getSelectedElements(h.elements, h.state),
+          selectedElementsAreBeingDragged: true,
+          frameToHighlight: frame as ExcalidrawFrameLikeElement,
+        })
+        .visibleElements.map((element) => element.id);
+
+      expect(renderableElementIds).toEqual([
+        frameChild.id,
+        frame.id,
+        otherFrameChild.id,
+      ]);
+    });
+
+    it("should put a dragged mixed selection above the highest frame child", () => {
+      const frameChild = API.createElement({
+        id: "frameChild",
+        type: "rectangle",
+        x: 50,
+        y: 10,
+        width: 20,
+        height: 20,
+        frameId: frame.id,
+        boundElements: [{ id: "boundText", type: "text" }],
+      });
+      const boundText = API.createElement({
+        id: "boundText",
+        type: "text",
+        x: 50,
+        y: 10,
+        width: 20,
+        height: 20,
+        containerId: frameChild.id,
+        frameId: frame.id,
+      });
+      const otherFrameChild = API.createElement({
+        id: "otherFrameChild",
+        type: "rectangle",
+        x: 80,
+        y: 10,
+        width: 20,
+        height: 20,
+        frameId: frame.id,
+      });
+      const nonFrameElement = API.createElement({
+        id: "nonFrameElement",
+        type: "rectangle",
+        x: 155,
+        y: 10,
+        width: 20,
+        height: 20,
+      });
+
+      API.setElements([
+        frame,
+        frameChild,
+        boundText,
+        otherFrameChild,
+        nonFrameElement,
+      ]);
+      API.setSelectedElements([frameChild, nonFrameElement]);
+
+      mouse.downAt(
+        nonFrameElement.x + nonFrameElement.width / 2,
+        nonFrameElement.y + nonFrameElement.height / 2,
+      );
+      mouse.moveTo(frame.x + frame.width - 5, nonFrameElement.y + 10);
+      mouse.up();
+
+      expect(frameChild.frameId).toBe(frame.id);
+      expect(boundText.frameId).toBe(frame.id);
+      expect(nonFrameElement.frameId).toBe(frame.id);
+      expect(h.elements.map((element) => element.id)).toEqual([
+        frame.id,
+        otherFrameChild.id,
+        frameChild.id,
+        boundText.id,
+        nonFrameElement.id,
+      ]);
+    });
+
+    it("should not reorder dragged elements already in the highlighted frame", () => {
+      const frameChild = API.createElement({
+        id: "frameChild",
+        type: "rectangle",
+        x: 50,
+        y: 10,
+        width: 20,
+        height: 20,
+        frameId: frame.id,
+      });
+      const otherFrameChild = API.createElement({
+        id: "otherFrameChild",
+        type: "rectangle",
+        x: 80,
+        y: 10,
+        width: 20,
+        height: 20,
+        frameId: frame.id,
+      });
+
+      API.setElements([frame, frameChild, otherFrameChild]);
+      API.setSelectedElements([frameChild]);
+
+      mouse.downAt(
+        frameChild.x + frameChild.width / 2,
+        frameChild.y + frameChild.height / 2,
+      );
+      mouse.moveTo(frameChild.x + frameChild.width / 2 + 5, frameChild.y + 10);
+      mouse.up();
+
+      expect(frameChild.frameId).toBe(frame.id);
+      expect(h.elements.map((element) => element.id)).toEqual([
+        frame.id,
+        frameChild.id,
+        otherFrameChild.id,
+      ]);
+    });
+
+    it("should not drag an element into a frame behind a non-frame element", () => {
+      const cover = API.createElement({
+        id: "cover",
+        type: "rectangle",
+        x: 10,
+        y: 10,
+        width: 80,
+        height: 80,
+        backgroundColor: "#ffc9c9",
+      });
+      API.setElements([frame, cover, rect2]);
+
+      mouse.clickAt(rect2.x, rect2.y);
+      mouse.downAt(rect2.x + rect2.width / 2, rect2.y + rect2.height / 2);
+      mouse.moveTo(20, 20);
+      mouse.upAt(20, 20);
+
+      expect(rect2.frameId).toBe(null);
+    });
+
+    it("should drag an element into a frame over a non-frame element", () => {
+      const cover = API.createElement({
+        id: "cover",
+        type: "rectangle",
+        x: 10,
+        y: 10,
+        width: 80,
+        height: 80,
+        backgroundColor: "#ffc9c9",
+      });
+      API.setElements([cover, rect2, frame]);
+
+      mouse.clickAt(rect2.x, rect2.y);
+      mouse.downAt(rect2.x + rect2.width / 2, rect2.y + rect2.height / 2);
+      mouse.moveTo(20, 20);
+      mouse.upAt(20, 20);
+
+      expect(rect2.frameId).toBe(frame.id);
+    });
+
+    it("should keep dragging a frame child over a non-frame element above its frame", () => {
+      const cover = API.createElement({
+        id: "cover",
+        type: "rectangle",
+        x: 10,
+        y: 10,
+        width: 80,
+        height: 80,
+        backgroundColor: "#ffc9c9",
+      });
+      const frameChild = API.createElement({
+        id: "frameChild",
+        type: "rectangle",
+        x: 100,
+        y: 20,
+        width: 20,
+        height: 20,
+        frameId: frame.id,
+      });
+
+      API.setElements([frameChild, frame, cover]);
+      API.setSelectedElements([frameChild]);
+
+      mouse.downAt(
+        frameChild.x + frameChild.width / 2,
+        frameChild.y + frameChild.height / 2,
+      );
+      mouse.moveTo(20, 20);
+
+      expect(h.state.frameToHighlight?.id).toBe(frame.id);
+
+      mouse.upAt(20, 20);
+
+      expect(frameChild.frameId).toBe(frame.id);
+    });
+
     it.skip("should drag element inside, duplicate it and keep it in frame", () => {
       API.setElements([frame, rect2]);
 
diff --git a/packages/excalidraw/actions/actionDeselect.ts b/packages/excalidraw/actions/actionDeselect.ts
index 2b48eb825e..c9a92c7138 100644
--- a/packages/excalidraw/actions/actionDeselect.ts
+++ b/packages/excalidraw/actions/actionDeselect.ts
@@ -101,6 +101,7 @@ export const actionDeselect = register({
           selectionElement: null,
           showHyperlinkPopup: false,
           suggestedBinding: null,
+          frameToHighlight: null,
         },
         captureUpdate: CaptureUpdateAction.IMMEDIATELY,
       };
@@ -118,6 +119,7 @@ export const actionDeselect = register({
         selectionElement: null,
         showHyperlinkPopup: false,
         suggestedBinding: null,
+        frameToHighlight: null,
       },
       captureUpdate: CaptureUpdateAction.IMMEDIATELY,
     };
diff --git a/packages/excalidraw/actions/actionFinalize.tsx b/packages/excalidraw/actions/actionFinalize.tsx
index c52bbe00a4..f2e5db5613 100644
--- a/packages/excalidraw/actions/actionFinalize.tsx
+++ b/packages/excalidraw/actions/actionFinalize.tsx
@@ -330,6 +330,7 @@ export const actionFinalize = register<FormData>({
         multiElement: null,
         editingTextElement: null,
         suggestedBinding: null,
+        frameToHighlight: null,
         selectedElementIds:
           element &&
           !appState.activeTool.locked &&
diff --git a/packages/excalidraw/actions/actionFrame.ts b/packages/excalidraw/actions/actionFrame.ts
index 3a1b3635d3..81a43e243e 100644
--- a/packages/excalidraw/actions/actionFrame.ts
+++ b/packages/excalidraw/actions/actionFrame.ts
@@ -205,7 +205,6 @@ export const actionWrapSelectionInFrame = register({
       [...app.scene.getElementsIncludingDeleted(), frame],
       selectedElements,
       frame,
-      appState,
     );
 
     return {
diff --git a/packages/excalidraw/actions/actionGroup.tsx b/packages/excalidraw/actions/actionGroup.tsx
index c72216b761..c9bb8cf21d 100644
--- a/packages/excalidraw/actions/actionGroup.tsx
+++ b/packages/excalidraw/actions/actionGroup.tsx
@@ -277,7 +277,6 @@ export const actionUngroup = register({
             elementsMap,
           ),
           frame,
-          app,
         );
       }
     });
diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx
index 3fd81e2ac7..4601808950 100644
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@@ -176,7 +176,9 @@ import {
   isValidTextContainer,
   redrawTextBoundingBox,
   hasBoundingBox,
+  getCommonFrameId,
   getFrameChildren,
+  getFrameChildrenInsertionIndex,
   isCursorInFrame,
   addElementsToFrame,
   replaceAllElementsInFrame,
@@ -259,6 +261,7 @@ import {
   maybeHandleArrowPointlikeDrag,
   getUncroppedWidthAndHeight,
   getActiveTextElement,
+  isEligibleFrameChildType,
 } from "@excalidraw/element";
 
 import type { GlobalPoint, LocalPoint, Radians } from "@excalidraw/math";
@@ -2092,20 +2095,30 @@ class App extends React.Component<AppProps, AppState> {
     const selectedElements = this.scene.getSelectedElements(this.state);
     const { renderTopRightUI, renderTopLeftUI, renderCustomStats } = this.props;
 
-    const sceneNonce = this.scene.getSceneNonce();
-    const { elementsMap, visibleElements } =
-      this.renderer.getRenderableElements({
-        sceneNonce,
-        zoom: this.state.zoom,
-        offsetLeft: this.state.offsetLeft,
-        offsetTop: this.state.offsetTop,
-        scrollX: this.state.scrollX,
-        scrollY: this.state.scrollY,
-        height: this.state.height,
-        width: this.state.width,
-        editingTextElement: this.state.editingTextElement,
-        newElementId: this.state.newElement?.id,
-      });
+    const {
+      elementsMap,
+      visibleElements,
+      canvasNonce,
+      /**
+       * element to draw on the <NewElementCanvas> for optimization purposes.
+       * Can be null even if this.state.newElement defined
+       * (e.g. when its zIndex isn't on top) */
+      newElementCanvasElement,
+    } = this.renderer.getRenderableElements({
+      zoom: this.state.zoom,
+      offsetLeft: this.state.offsetLeft,
+      offsetTop: this.state.offsetTop,
+      scrollX: this.state.scrollX,
+      scrollY: this.state.scrollY,
+      height: this.state.height,
+      width: this.state.width,
+      editingTextElement: this.state.editingTextElement,
+      newElement: this.state.newElement,
+      selectedElements,
+      selectedElementsAreBeingDragged:
+        this.state.selectedElementsAreBeingDragged,
+      frameToHighlight: this.state.frameToHighlight,
+    });
     this.visibleElements = visibleElements;
 
     const allElementsMap = this.scene.getNonDeletedElementsMap();
@@ -2324,7 +2337,7 @@ class App extends React.Component<AppProps, AppState> {
                             elementsMap={elementsMap}
                             allElementsMap={allElementsMap}
                             visibleElements={visibleElements}
-                            sceneNonce={sceneNonce}
+                            canvasNonce={canvasNonce}
                             selectionNonce={
                               this.state.selectionElement?.versionNonce
                             }
@@ -2345,9 +2358,10 @@ class App extends React.Component<AppProps, AppState> {
                               theme: this.state.theme,
                             }}
                           />
-                          {this.state.newElement && (
+                          {newElementCanvasElement && (
                             <NewElementCanvas
                               appState={this.state}
+                              newElement={newElementCanvasElement}
                               scale={window.devicePixelRatio}
                               rc={this.rc}
                               elementsMap={elementsMap}
@@ -2375,7 +2389,7 @@ class App extends React.Component<AppProps, AppState> {
                             visibleElements={visibleElements}
                             allElementsMap={allElementsMap}
                             selectedElements={selectedElements}
-                            sceneNonce={sceneNonce}
+                            canvasNonce={canvasNonce}
                             selectionNonce={
                               this.state.selectionElement?.versionNonce
                             }
@@ -2687,7 +2701,7 @@ class App extends React.Component<AppProps, AppState> {
           locked: false,
         });
 
-        this.scene.insertElement(frame);
+        this.insertNewElement(frame);
 
         for (const child of selectedElements) {
           this.scene.mutateElement(child, { frameId: frame.id });
@@ -3765,6 +3779,7 @@ class App extends React.Component<AppProps, AppState> {
         position:
           this.editorInterface.formFactor === "desktop" ? "cursor" : "center",
         retainSeed: isPlainPaste,
+        preserveFrameChildrenOrder: true,
       });
       return;
     }
@@ -3908,6 +3923,7 @@ class App extends React.Component<AppProps, AppState> {
     position: { clientX: number; clientY: number } | "cursor" | "center";
     retainSeed?: boolean;
     fitToContent?: boolean;
+    preserveFrameChildrenOrder?: boolean;
   }) => {
     const elements = restoreElements(opts.elements, null, {
       deleteInvisibleElements: true,
@@ -3949,6 +3965,7 @@ class App extends React.Component<AppProps, AppState> {
         });
       }),
       randomizeSeed: !opts.retainSeed,
+      preserveFrameChildrenOrder: opts.preserveFrameChildrenOrder,
     });
 
     const prevElements = this.scene.getElementsIncludingDeleted();
@@ -3970,11 +3987,10 @@ class App extends React.Component<AppProps, AppState> {
         duplicatedElements,
         topLayerFrame,
       );
-      addElementsToFrame(
+      nextElements = addElementsToFrame(
         nextElements,
         eligibleElements,
         topLayerFrame,
-        this.state,
       );
     }
 
@@ -4200,7 +4216,7 @@ class App extends React.Component<AppProps, AppState> {
       return;
     }
 
-    this.scene.insertElements(textElements);
+    this.insertNewElements(textElements);
     this.store.scheduleCapture();
     this.setState({
       selectedElementIds: makeNextSelectedElementIds(
@@ -5456,7 +5472,7 @@ class App extends React.Component<AppProps, AppState> {
     if (!event[KEYS.CTRL_OR_CMD]) {
       if (this.flowChartCreator.isCreatingChart) {
         if (this.flowChartCreator.pendingNodes?.length) {
-          this.scene.insertElements(this.flowChartCreator.pendingNodes);
+          this.insertNewElements(this.flowChartCreator.pendingNodes);
         }
 
         const firstNode = this.flowChartCreator.pendingNodes?.[0];
@@ -5554,6 +5570,7 @@ class App extends React.Component<AppProps, AppState> {
         selectedLinearElement: isSelectionLikeTool(nextActiveTool.type)
           ? prevState.selectedLinearElement
           : null,
+        frameToHighlight: null,
       } as const;
 
       if (nextActiveTool.type === "freedraw") {
@@ -6151,6 +6168,12 @@ class App extends React.Component<AppProps, AppState> {
         hitElement = elements[index];
         break;
       } else if (x1 < x && x < x2 && y1 < y && y < y2) {
+        // to allow binding to containers within frames,
+        // ignore frames in hit testing
+        if (isFrameLikeElement(elements[index])) {
+          continue;
+        }
+
         hitElement = elements[index];
         break;
       }
@@ -6240,11 +6263,6 @@ class App extends React.Component<AppProps, AppState> {
       }
     }
 
-    const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
-      x: sceneX,
-      y: sceneY,
-    });
-
     const textCreationGridPoint = this.getTextCreationGridPoint(sceneX, sceneY);
 
     const newTextElementPosition = parentCenterPosition
@@ -6266,6 +6284,20 @@ class App extends React.Component<AppProps, AppState> {
           y: sceneY,
         };
 
+    const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
+      x: newTextElementPosition.x,
+      y: newTextElementPosition.y,
+    });
+
+    // container has higher priority. Only add to frame if container is in the same frame.
+    const frameId =
+      topLayerFrame &&
+      (!shouldBindToContainer ||
+        !container ||
+        container.frameId === topLayerFrame.id)
+        ? topLayerFrame.id
+        : null;
+
     const element =
       existingTextElement ||
       newTextElement({
@@ -6295,7 +6327,7 @@ class App extends React.Component<AppProps, AppState> {
             ? (0 as Radians)
             : container.angle
           : (0 as Radians),
-        frameId: topLayerFrame ? topLayerFrame.id : null,
+        frameId,
       });
 
     if (!existingTextElement && shouldBindToContainer && container) {
@@ -6311,9 +6343,12 @@ class App extends React.Component<AppProps, AppState> {
     if (!existingTextElement) {
       if (container && shouldBindToContainer) {
         const containerIndex = this.scene.getElementIndex(container.id);
-        this.scene.insertElementAtIndex(element, containerIndex + 1);
+        // TODO should use insertNewElement, after we update it to handle
+        // elements with containerId + frameId at the same time (containerId
+        // should take precedence when it comes to z-index)
+        this.scene.insertElementsAtIndex([element], containerIndex + 1);
       } else {
-        this.scene.insertElement(element);
+        this.insertNewElement(element);
       }
     }
 
@@ -6695,19 +6730,161 @@ class App extends React.Component<AppProps, AppState> {
     }
   };
 
-  private getTopLayerFrameAtSceneCoords = (sceneCoords: {
-    x: number;
-    y: number;
-  }) => {
+  /**
+   * finds candidate frame under cursor (when dragging frame children/elements
+   * inside frames)
+   */
+  private getTopLayerFrameAtSceneCoords = (
+    /**
+     * should be already grid aligned (basically should be what the call site
+     * sets the element's coords to, if applicable)
+     */
+    sceneCoords: {
+      x: number;
+      y: number;
+    },
+    opts?: {
+      /** to exclude selected elements when dragging, etc. */
+      excludeElementIds?: AppState["selectedElementIds"];
+      currentFrameId?: ExcalidrawElement["frameId"];
+    },
+  ) => {
     const elementsMap = this.scene.getNonDeletedElementsMap();
-    const frames = this.scene
+    const framesUnderCursor = this.scene
       .getNonDeletedFramesLikes()
       .filter(
         (frame): frame is ExcalidrawFrameLikeElement =>
           !frame.locked && isCursorInFrame(sceneCoords, frame, elementsMap),
       );
 
-    return frames.length ? frames[frames.length - 1] : null;
+    if (!framesUnderCursor.length) {
+      return null;
+    }
+
+    const topLayerFrame = framesUnderCursor.at(-1)!;
+
+    const hitElement = this.getElementsAtPosition(
+      sceneCoords.x,
+      sceneCoords.y,
+      {
+        includeLockedElements: true,
+      },
+    ).findLast((element) => !opts?.excludeElementIds?.[element.id]);
+
+    if (hitElement) {
+      if (
+        isFrameLikeElement(hitElement) &&
+        // case: we're hitting a locked frame itself (frame's outline
+        // or later its bg once implemented)
+        !hitElement.locked
+      ) {
+        return topLayerFrame;
+      }
+
+      const hitElementIndex = this.scene.getElementIndex(hitElement.id);
+      const topLayerFrameIndex = this.scene.getElementIndex(topLayerFrame.id);
+
+      if (
+        hitElementIndex !== -1 &&
+        topLayerFrameIndex !== -1 &&
+        hitElementIndex <= topLayerFrameIndex
+      ) {
+        return topLayerFrame;
+      }
+
+      // to support a case of dragging a pre-existing frame child underneath
+      // a non-frame element covering the cursor
+      const currentFrame = opts?.currentFrameId
+        ? framesUnderCursor.find((frame) => frame.id === opts.currentFrameId) ??
+          null
+        : null;
+
+      if (currentFrame) {
+        return currentFrame;
+      }
+
+      return hitElement.frameId
+        ? framesUnderCursor.find((frame) => frame.id === hitElement.frameId) ??
+            null
+        : null;
+    }
+
+    return topLayerFrame;
+  };
+
+  private updateFrameToHighlight = (
+    frameToHighlight: AppState["frameToHighlight"],
+  ) => {
+    if (this.state.frameToHighlight !== frameToHighlight) {
+      this.setState({ frameToHighlight });
+    }
+  };
+
+  private maybeUpdateFrameToHighlightOnPointerMove = (
+    sceneCoords: { x: number; y: number },
+    isOverScrollBar: boolean,
+  ) => {
+    // currently this function is being called even during pointerdown so we
+    // need to make sure we don't re-set the state when dragging and similar
+    //
+    // But, we still want to reset on pointermove in case the state is stale
+    // so we updte even for non-eligible tool types
+    if (
+      this.state.newElement ||
+      this.state.multiElement ||
+      this.state.selectionElement ||
+      this.state.selectedElementsAreBeingDragged
+    ) {
+      return;
+    }
+
+    this.updateFrameToHighlight(
+      !isOverScrollBar && isEligibleFrameChildType(this.state.activeTool.type)
+        ? this.getTopLayerFrameAtSceneCoords(sceneCoords)
+        : null,
+    );
+  };
+
+  private insertNewElements = (elements: readonly ExcalidrawElement[]) => {
+    if (!elements.length) {
+      return;
+    }
+
+    const chunkedElements: ExcalidrawElement[][] = [];
+
+    for (const element of elements) {
+      const currentChunk = chunkedElements[chunkedElements.length - 1];
+
+      if (currentChunk?.[0].frameId === element.frameId) {
+        currentChunk.push(element);
+      } else {
+        chunkedElements.push([element]);
+      }
+    }
+
+    for (const chunk of chunkedElements) {
+      const frameId = chunk[0].frameId;
+
+      const insertionIndex = frameId
+        ? getFrameChildrenInsertionIndex(
+            this.scene.getElementsIncludingDeleted(),
+            frameId,
+          )
+        : null;
+      this.scene.insertElementsAtIndex(chunk, insertionIndex);
+    }
+  };
+
+  private insertNewElement = (element: ExcalidrawElement) => {
+    this.insertNewElements([element]);
+
+    const frame = element.frameId
+      ? this.scene.getNonDeletedElement(element.frameId)
+      : null;
+
+    this.updateFrameToHighlight(
+      frame && isFrameLikeElement(frame) ? frame : null,
+    );
   };
 
   private handleCanvasPointerMove = (
@@ -6809,6 +6986,14 @@ class App extends React.Component<AppProps, AppState> {
       }
     }
 
+    this.maybeUpdateFrameToHighlightOnPointerMove(
+      {
+        x: scenePointerX,
+        y: scenePointerY,
+      },
+      isOverScrollBar,
+    );
+
     if (
       !this.state.newElement &&
       isActiveToolNonLinearSnappable(this.state.activeTool.type)
@@ -8863,7 +9048,7 @@ class App extends React.Component<AppProps, AppState> {
       pressures: simulatePressure ? [] : [event.pressure],
     });
 
-    this.scene.insertElement(element);
+    this.insertNewElement(element);
 
     this.setState((prevState) => {
       const nextSelectedElementIds = {
@@ -8920,7 +9105,7 @@ class App extends React.Component<AppProps, AppState> {
       height,
     });
 
-    this.scene.insertElement(element);
+    this.insertNewElement(element);
 
     return element;
   };
@@ -8974,7 +9159,7 @@ class App extends React.Component<AppProps, AppState> {
       link,
     });
 
-    this.scene.insertElement(element);
+    this.insertNewElement(element);
 
     return element;
   };
@@ -9218,7 +9403,7 @@ class App extends React.Component<AppProps, AppState> {
         points: [pointFrom<LocalPoint>(0, 0), pointFrom<LocalPoint>(0, 0)],
       });
 
-      this.scene.insertElement(element);
+      this.insertNewElement(element);
 
       if (isBindingElement(element)) {
         // Do the initial binding so the binding strategy has the initial state
@@ -9376,7 +9561,7 @@ class App extends React.Component<AppProps, AppState> {
         selectionElement: element,
       });
     } else {
-      this.scene.insertElement(element);
+      this.insertNewElement(element);
       this.setState({
         multiElement: null,
         newElement: element,
@@ -9409,7 +9594,7 @@ class App extends React.Component<AppProps, AppState> {
         ? newMagicFrameElement(constructorOpts)
         : newFrameElement(constructorOpts);
 
-    this.scene.insertElement(frame);
+    this.insertNewElement(frame);
 
     this.setState({
       multiElement: null,
@@ -9777,18 +9962,17 @@ class App extends React.Component<AppProps, AppState> {
           return;
         }
 
-        const selectedElementsHasAFrame = selectedElements.find((e) =>
+        const selectedElementsHasAFrame = selectedElements.some((e) =>
           isFrameLikeElement(e),
         );
-        const topLayerFrame = this.getTopLayerFrameAtSceneCoords(pointerCoords);
-        const frameToHighlight =
-          topLayerFrame && !selectedElementsHasAFrame ? topLayerFrame : null;
+        const frameToHighlight = selectedElementsHasAFrame
+          ? null
+          : this.getTopLayerFrameAtSceneCoords(pointerCoords, {
+              currentFrameId: getCommonFrameId(selectedElements),
+              excludeElementIds: this.state.selectedElementIds,
+            });
         // Only update the state if there is a difference
-        if (this.state.frameToHighlight !== frameToHighlight) {
-          flushSync(() => {
-            this.setState({ frameToHighlight });
-          });
-        }
+        this.updateFrameToHighlight(frameToHighlight);
 
         // Marking that click was used for dragging to check
         // if elements should be deselected on pointerup
@@ -10817,7 +11001,6 @@ class App extends React.Component<AppProps, AppState> {
             this.scene.getElementsMapIncludingDeleted(),
             elementsInsideFrame,
             newElement,
-            this.state,
           ),
         );
       }
@@ -10877,9 +11060,14 @@ class App extends React.Component<AppProps, AppState> {
           }
         } else {
           // update the relationships between selected elements and frames
-          const topLayerFrame = this.getTopLayerFrameAtSceneCoords(sceneCoords);
-
           const selectedElements = this.scene.getSelectedElements(this.state);
+          const topLayerFrame = this.getTopLayerFrameAtSceneCoords(
+            sceneCoords,
+            {
+              currentFrameId: getCommonFrameId(selectedElements),
+              excludeElementIds: this.state.selectedElementIds,
+            },
+          );
           let nextElements = this.scene.getElementsMapIncludingDeleted();
 
           const updateGroupIdsAfterEditingGroup = (
@@ -10928,10 +11116,8 @@ class App extends React.Component<AppProps, AppState> {
             topLayerFrame &&
             !this.state.selectedElementIds[topLayerFrame.id]
           ) {
-            const elementsToAdd = selectedElements.filter(
-              (element) =>
-                element.frameId !== topLayerFrame.id &&
-                isElementInFrame(element, nextElements, this.state),
+            const elementsToAdd = selectedElements.filter((element) =>
+              isElementInFrame(element, nextElements, this.state),
             );
 
             if (this.state.editingGroupId) {
@@ -10942,7 +11128,6 @@ class App extends React.Component<AppProps, AppState> {
               nextElements,
               elementsToAdd,
               topLayerFrame,
-              this.state,
             );
           } else if (!topLayerFrame) {
             if (this.state.editingGroupId) {
@@ -11004,7 +11189,6 @@ class App extends React.Component<AppProps, AppState> {
               elementsMap,
             ),
             frame,
-            this,
           );
         }
 
@@ -11820,7 +12004,7 @@ class App extends React.Component<AppProps, AppState> {
       sceneY,
       gridPadding,
     );
-    placeholders.forEach((el) => this.scene.insertElement(el));
+    this.insertNewElements(placeholders);
 
     // Create, position, insert and select initialized (replacing placeholders)
     const initialized = await Promise.all(
@@ -11948,6 +12132,7 @@ class App extends React.Component<AppProps, AppState> {
               type: "everything",
               elements: item.elements,
               randomizeSeed: true,
+              preserveFrameChildrenOrder: true,
             }).duplicatedElements,
           }));
 
diff --git a/packages/excalidraw/components/LibraryMenuItems.tsx b/packages/excalidraw/components/LibraryMenuItems.tsx
index 547c3bd66f..e619342ca6 100644
--- a/packages/excalidraw/components/LibraryMenuItems.tsx
+++ b/packages/excalidraw/components/LibraryMenuItems.tsx
@@ -199,6 +199,7 @@ export default function LibraryMenuItems({
             type: "everything",
             elements: item.elements,
             randomizeSeed: true,
+            preserveFrameChildrenOrder: true,
           }).duplicatedElements,
         };
       });
diff --git a/packages/excalidraw/components/Stats/Dimension.tsx b/packages/excalidraw/components/Stats/Dimension.tsx
index cfc0f2dda1..a83cf835fc 100644
--- a/packages/excalidraw/components/Stats/Dimension.tsx
+++ b/packages/excalidraw/components/Stats/Dimension.tsx
@@ -206,7 +206,6 @@ const handleDimensionChange: DragInputCallbackType<
           scene.getElementsIncludingDeleted(),
           nextElementsInFrame,
           latestElement,
-          app,
         );
 
         scene.replaceAllElements(updatedElements);
@@ -302,7 +301,6 @@ const handleDragFinished: DragFinishedCallbackType = ({
       app.scene.getElementsIncludingDeleted(),
       nextElementsInFrame,
       latestElement,
-      app,
     );
 
     app.scene.replaceAllElements(updatedElements);
diff --git a/packages/excalidraw/components/Stats/MultiDimension.tsx b/packages/excalidraw/components/Stats/MultiDimension.tsx
index 4680858dcd..5224928ce7 100644
--- a/packages/excalidraw/components/Stats/MultiDimension.tsx
+++ b/packages/excalidraw/components/Stats/MultiDimension.tsx
@@ -261,7 +261,6 @@ const handleDimensionChange: DragInputCallbackType<
               scene.getElementsIncludingDeleted(),
               nextElementsInFrame,
               latestElement,
-              app,
             );
 
             scene.replaceAllElements(updatedElements);
@@ -416,7 +415,6 @@ const handleDragFinished: DragFinishedCallbackType = ({
       app.scene.getElementsIncludingDeleted(),
       nextElementsInFrame,
       latestElement,
-      app,
     );
 
     app.scene.replaceAllElements(updatedElements);
diff --git a/packages/excalidraw/components/canvases/InteractiveCanvas.tsx b/packages/excalidraw/components/canvases/InteractiveCanvas.tsx
index 2aabddfbab..dc7dcd9f9b 100644
--- a/packages/excalidraw/components/canvases/InteractiveCanvas.tsx
+++ b/packages/excalidraw/components/canvases/InteractiveCanvas.tsx
@@ -39,7 +39,7 @@ type InteractiveCanvasProps = {
   visibleElements: readonly NonDeletedExcalidrawElement[];
   selectedElements: readonly NonDeletedExcalidrawElement[];
   allElementsMap: NonDeletedSceneElementsMap;
-  sceneNonce: number | undefined;
+  canvasNonce: string;
   selectionNonce: number | undefined;
   scale: number;
   appState: InteractiveCanvasAppState;
@@ -279,10 +279,10 @@ const areEqual = (
   // This could be further optimised if needed, as we don't have to render interactive canvas on each scene mutation
   if (
     prevProps.selectionNonce !== nextProps.selectionNonce ||
-    prevProps.sceneNonce !== nextProps.sceneNonce ||
+    prevProps.canvasNonce !== nextProps.canvasNonce ||
     prevProps.scale !== nextProps.scale ||
     // we need to memoize on elementsMap because they may have renewed
-    // even if sceneNonce didn't change (e.g. we filter elements out based
+    // even if canvasNonce didn't change (e.g. we filter elements out based
     // on appState)
     prevProps.elementsMap !== nextProps.elementsMap ||
     prevProps.visibleElements !== nextProps.visibleElements ||
diff --git a/packages/excalidraw/components/canvases/NewElementCanvas.tsx b/packages/excalidraw/components/canvases/NewElementCanvas.tsx
index 4310f1bd1a..dd8948b1f3 100644
--- a/packages/excalidraw/components/canvases/NewElementCanvas.tsx
+++ b/packages/excalidraw/components/canvases/NewElementCanvas.tsx
@@ -14,6 +14,7 @@ import type { RoughCanvas } from "roughjs/bin/canvas";
 
 interface NewElementCanvasProps {
   appState: AppState;
+  newElement: NonNullable<AppState["newElement"]>;
   elementsMap: RenderableElementsMap;
   allElementsMap: NonDeletedSceneElementsMap;
   scale: number;
@@ -31,7 +32,7 @@ const NewElementCanvas = (props: NewElementCanvasProps) => {
       {
         canvas: canvasRef.current,
         scale: props.scale,
-        newElement: props.appState.newElement,
+        newElement: props.newElement,
         elementsMap: props.elementsMap,
         allElementsMap: props.allElementsMap,
         rc: props.rc,
diff --git a/packages/excalidraw/components/canvases/StaticCanvas.tsx b/packages/excalidraw/components/canvases/StaticCanvas.tsx
index 9e6a3324a4..e46ac041bc 100644
--- a/packages/excalidraw/components/canvases/StaticCanvas.tsx
+++ b/packages/excalidraw/components/canvases/StaticCanvas.tsx
@@ -23,7 +23,7 @@ type StaticCanvasProps = {
   elementsMap: RenderableElementsMap;
   allElementsMap: NonDeletedSceneElementsMap;
   visibleElements: readonly NonDeletedExcalidrawElement[];
-  sceneNonce: number | undefined;
+  canvasNonce: string;
   selectionNonce: number | undefined;
   scale: number;
   appState: StaticCanvasAppState;
@@ -110,10 +110,10 @@ const areEqual = (
   nextProps: StaticCanvasProps,
 ) => {
   if (
-    prevProps.sceneNonce !== nextProps.sceneNonce ||
+    prevProps.canvasNonce !== nextProps.canvasNonce ||
     prevProps.scale !== nextProps.scale ||
     // we need to memoize on elementsMap because they may have renewed
-    // even if sceneNonce didn't change (e.g. we filter elements out based
+    // even if canvasNonce didn't change (e.g. we filter elements out based
     // on appState)
     prevProps.elementsMap !== nextProps.elementsMap ||
     prevProps.visibleElements !== nextProps.visibleElements
diff --git a/packages/excalidraw/polyfill.ts b/packages/excalidraw/polyfill.ts
index b8b080f754..6de2c40eab 100644
--- a/packages/excalidraw/polyfill.ts
+++ b/packages/excalidraw/polyfill.ts
@@ -23,6 +23,94 @@ const polyfill = () => {
     });
   }
 
+  if (!Array.prototype.findLast) {
+    Object.defineProperty(Array.prototype, "findLast", {
+      value: function <T>(
+        this: T[],
+        predicate: (value: T, index: number, array: T[]) => unknown,
+        thisArg?: unknown,
+      ) {
+        return this
+          .slice()
+          .reverse()
+          .find((value, index) =>
+            predicate.call(thisArg, value, this.length - index - 1, this),
+          );
+      },
+      writable: true,
+      enumerable: false,
+      configurable: true,
+    });
+  }
+
+  if (!Array.prototype.findIndex) {
+    Object.defineProperty(Array.prototype, "findIndex", {
+      value: function <T>(
+        this: T[],
+        predicate: (value: T, index: number, array: T[]) => unknown,
+        thisArg?: unknown,
+      ) {
+        for (let index = 0; index < this.length; index++) {
+          if (predicate.call(thisArg, this[index], index, this)) {
+            return index;
+          }
+        }
+
+        return -1;
+      },
+      writable: true,
+      enumerable: false,
+      configurable: true,
+    });
+  }
+
+  if (!Array.prototype.findLastIndex) {
+    Object.defineProperty(Array.prototype, "findLastIndex", {
+      value: function <T>(
+        this: T[],
+        predicate: (value: T, index: number, array: T[]) => unknown,
+        thisArg?: unknown,
+      ) {
+        const index = this
+          .slice()
+          .reverse()
+          .findIndex((value, index) =>
+            predicate.call(thisArg, value, this.length - index - 1, this),
+          );
+
+        return index === -1 ? -1 : this.length - index - 1;
+      },
+      writable: true,
+      enumerable: false,
+      configurable: true,
+    });
+  }
+
+  if (!Array.prototype.toReversed) {
+    Object.defineProperty(Array.prototype, "toReversed", {
+      value: function <T>(this: T[]) {
+        return this.slice().reverse();
+      },
+      writable: true,
+      enumerable: false,
+      configurable: true,
+    });
+  }
+
+  if (!Array.prototype.toSorted) {
+    Object.defineProperty(Array.prototype, "toSorted", {
+      value: function <T>(
+        this: T[],
+        compareFn?: (a: T, b: T) => number,
+      ) {
+        return this.slice().sort(compareFn);
+      },
+      writable: true,
+      enumerable: false,
+      configurable: true,
+    });
+  }
+
   if (!Element.prototype.replaceChildren) {
     Element.prototype.replaceChildren = function (...nodes) {
       this.innerHTML = "";
diff --git a/packages/excalidraw/scene/Renderer.ts b/packages/excalidraw/scene/Renderer.ts
index 56ae3e5c58..fdcee2a68d 100644
--- a/packages/excalidraw/scene/Renderer.ts
+++ b/packages/excalidraw/scene/Renderer.ts
@@ -1,9 +1,15 @@
-import { isElementInViewport } from "@excalidraw/element";
+import {
+  getCommonFrameId,
+  getFrameChildrenInsertionIndex,
+  isElementInViewport,
+} from "@excalidraw/element";
 
-import { memoize, toBrandedType } from "@excalidraw/common";
+import { arrayToMap, memoize, toBrandedType } from "@excalidraw/common";
 
 import type {
   ExcalidrawElement,
+  ExcalidrawFrameLikeElement,
+  NonDeleted,
   NonDeletedElementsMap,
   NonDeletedExcalidrawElement,
 } from "@excalidraw/element/types";
@@ -16,6 +22,21 @@ import type { RenderableElementsMap } from "./types";
 
 import type { AppState } from "../types";
 
+type GetRenderableElementsOpts = {
+  zoom: AppState["zoom"];
+  offsetLeft: AppState["offsetLeft"];
+  offsetTop: AppState["offsetTop"];
+  scrollX: AppState["scrollX"];
+  scrollY: AppState["scrollY"];
+  height: AppState["height"];
+  width: AppState["width"];
+  editingTextElement: AppState["editingTextElement"];
+  newElement: AppState["newElement"];
+  selectedElements: readonly NonDeletedExcalidrawElement[];
+  selectedElementsAreBeingDragged: AppState["selectedElementsAreBeingDragged"];
+  frameToHighlight: AppState["frameToHighlight"];
+};
+
 export class Renderer {
   private scene: Scene;
 
@@ -23,9 +44,121 @@ export class Renderer {
     this.scene = scene;
   }
 
-  public getRenderableElements = (() => {
-    const getVisibleCanvasElements = ({
-      elementsMap,
+  private getVisibleCanvasElements({
+    elementsMap,
+    zoom,
+    offsetLeft,
+    offsetTop,
+    scrollX,
+    scrollY,
+    height,
+    width,
+  }: {
+    elementsMap: NonDeletedElementsMap;
+    zoom: AppState["zoom"];
+    offsetLeft: AppState["offsetLeft"];
+    offsetTop: AppState["offsetTop"];
+    scrollX: AppState["scrollX"];
+    scrollY: AppState["scrollY"];
+    height: AppState["height"];
+    width: AppState["width"];
+  }): readonly NonDeletedExcalidrawElement[] {
+    const visibleElements: NonDeletedExcalidrawElement[] = [];
+    for (const element of elementsMap.values()) {
+      if (
+        isElementInViewport(
+          element,
+          width,
+          height,
+          {
+            zoom,
+            offsetLeft,
+            offsetTop,
+            scrollX,
+            scrollY,
+          },
+          elementsMap,
+        )
+      ) {
+        visibleElements.push(element);
+      }
+    }
+    return visibleElements;
+  }
+
+  private getRenderableElementsMap({
+    elements,
+    editingTextElement,
+    newElement,
+  }: {
+    elements: readonly NonDeletedExcalidrawElement[];
+    editingTextElement: AppState["editingTextElement"];
+    newElement: AppState["newElement"];
+  }) {
+    const elementsMap = toBrandedType<RenderableElementsMap>(new Map());
+    const newElementCanvasElement = newElement?.frameId ? null : newElement;
+
+    for (const element of elements) {
+      if (newElementCanvasElement?.id === element.id) {
+        continue;
+      }
+
+      // we don't want to render text element that's being currently edited
+      // (it's rendered on remote only)
+      if (
+        !editingTextElement ||
+        editingTextElement.type !== "text" ||
+        element.id !== editingTextElement.id
+      ) {
+        elementsMap.set(element.id, element);
+      }
+    }
+    return { elementsMap, newElementCanvasElement };
+  }
+
+  private sortSelectedElementsIntoHighlightedFrame<
+    T extends ExcalidrawElement,
+  >({
+    visibleElements,
+    selectedElements,
+    frameToHighlight,
+  }: {
+    selectedElements: readonly NonDeletedExcalidrawElement[];
+    visibleElements: readonly T[];
+    frameToHighlight: NonDeleted<ExcalidrawFrameLikeElement>;
+  }): readonly T[] {
+    if (!selectedElements.length) {
+      return visibleElements;
+    }
+
+    // we assume all selected elements are eligible frame children if
+    // frameToHighlight is defined
+    const selectedElementsMap = arrayToMap(selectedElements);
+
+    // thus, all deselected elements are the ones we won't reorder
+    const deselectedElements = visibleElements.filter(
+      (element) => !selectedElementsMap.has(element.id),
+    );
+
+    const insertionIndex = getFrameChildrenInsertionIndex(
+      deselectedElements,
+      frameToHighlight.id,
+    );
+
+    if (insertionIndex === null) {
+      return visibleElements;
+    }
+
+    return [
+      ...deselectedElements.slice(0, insertionIndex),
+      ...selectedElements,
+      ...deselectedElements.slice(insertionIndex),
+    ] as readonly T[];
+  }
+
+  private _getRenderableElements = memoize(
+    ({
+      canvasNonce,
       zoom,
       offsetLeft,
       offsetTop,
@@ -33,70 +166,27 @@ export class Renderer {
       scrollY,
       height,
       width,
-    }: {
-      elementsMap: NonDeletedElementsMap;
-      zoom: AppState["zoom"];
-      offsetLeft: AppState["offsetLeft"];
-      offsetTop: AppState["offsetTop"];
-      scrollX: AppState["scrollX"];
-      scrollY: AppState["scrollY"];
-      height: AppState["height"];
-      width: AppState["width"];
-    }): readonly NonDeletedExcalidrawElement[] => {
-      const visibleElements: NonDeletedExcalidrawElement[] = [];
-      for (const element of elementsMap.values()) {
-        if (
-          isElementInViewport(
-            element,
-            width,
-            height,
-            {
-              zoom,
-              offsetLeft,
-              offsetTop,
-              scrollX,
-              scrollY,
-            },
-            elementsMap,
-          )
-        ) {
-          visibleElements.push(element);
-        }
-      }
-      return visibleElements;
-    };
-
-    const getRenderableElements = ({
-      elements,
       editingTextElement,
-      newElementId,
-    }: {
-      elements: readonly NonDeletedExcalidrawElement[];
-      editingTextElement: AppState["editingTextElement"];
-      newElementId: ExcalidrawElement["id"] | undefined;
+      newElement,
+    }: Omit<
+      GetRenderableElementsOpts,
+      | "selectedElements"
+      | "selectedElementsAreBeingDragged"
+      | "frameToHighlight"
+    > & {
+      canvasNonce: string;
     }) => {
-      const elementsMap = toBrandedType<RenderableElementsMap>(new Map());
+      const elements = this.scene.getNonDeletedElements();
 
-      for (const element of elements) {
-        if (newElementId === element.id) {
-          continue;
-        }
+      const { elementsMap, newElementCanvasElement } =
+        this.getRenderableElementsMap({
+          elements,
+          editingTextElement,
+          newElement,
+        });
 
-        // we don't want to render text element that's being currently edited
-        // (it's rendered on remote only)
-        if (
-          !editingTextElement ||
-          editingTextElement.type !== "text" ||
-          element.id !== editingTextElement.id
-        ) {
-          elementsMap.set(element.id, element);
-        }
-      }
-      return elementsMap;
-    };
-
-    return memoize(
-      ({
+      const visibleElements = this.getVisibleCanvasElements({
+        elementsMap,
         zoom,
         offsetLeft,
         offsetTop,
@@ -104,52 +194,69 @@ export class Renderer {
         scrollY,
         height,
         width,
-        editingTextElement,
-        newElementId,
-        // cache-invalidation nonce
-        sceneNonce: _sceneNonce,
-      }: {
-        zoom: AppState["zoom"];
-        offsetLeft: AppState["offsetLeft"];
-        offsetTop: AppState["offsetTop"];
-        scrollX: AppState["scrollX"];
-        scrollY: AppState["scrollY"];
-        height: AppState["height"];
-        width: AppState["width"];
-        editingTextElement: AppState["editingTextElement"];
-        /** note: first render of newElement will always bust the cache
-         * (we'd have to prefilter elements outside of this function) */
-        newElementId: ExcalidrawElement["id"] | undefined;
-        sceneNonce: ReturnType<InstanceType<typeof Scene>["getSceneNonce"]>;
-      }) => {
-        const elements = this.scene.getNonDeletedElements();
+      });
 
-        const elementsMap = getRenderableElements({
-          elements,
-          editingTextElement,
-          newElementId,
+      return {
+        elementsMap,
+        visibleElements,
+        newElementCanvasElement,
+        canvasNonce,
+      };
+    },
+  );
+
+  public getRenderableElements = (opts: GetRenderableElementsOpts) => {
+    const { newElement } = opts;
+    const canvasNonce = `${this.scene.getSceneNonce()}${
+      newElement?.frameId ? `:${newElement.versionNonce}` : ""
+    }`;
+
+    const ret = this._getRenderableElements({
+      canvasNonce,
+
+      // don't spread `opts` because we don't want to memoize on some props
+
+      zoom: opts.zoom,
+      offsetLeft: opts.offsetLeft,
+      offsetTop: opts.offsetTop,
+      scrollX: opts.scrollX,
+      scrollY: opts.scrollY,
+      height: opts.height,
+      width: opts.width,
+      editingTextElement: opts.editingTextElement,
+      newElement: opts.newElement,
+    });
+
+    // if we're dragging elements over a frame, reorder the selected elements
+    // inside the frame during render (we don't set the `element.frameId` until
+    // pointerup else we'd have to painstainly restore the orig index if user
+    // didn't end up adding elements to the frame)
+    if (
+      opts.frameToHighlight &&
+      opts.selectedElementsAreBeingDragged &&
+      // if all dragged elements are already in the frame, don't reorder
+      getCommonFrameId(opts.selectedElements) !== opts.frameToHighlight.id
+    ) {
+      const reorderedVisibleElements =
+        this.sortSelectedElementsIntoHighlightedFrame({
+          visibleElements: ret.visibleElements,
+          selectedElements: opts.selectedElements,
+          frameToHighlight: opts.frameToHighlight,
         });
 
-        const visibleElements = getVisibleCanvasElements({
-          elementsMap,
-          zoom,
-          offsetLeft,
-          offsetTop,
-          scrollX,
-          scrollY,
-          height,
-          width,
-        });
+      return {
+        ...ret,
+        visibleElements: reorderedVisibleElements,
+      };
+    }
 
-        return { elementsMap, visibleElements };
-      },
-    );
-  })();
+    return ret;
+  };
 
   // NOTE Doesn't destroy everything (scene, rc, etc.) because it may not be
   // safe to break TS contract here (for upstream cases)
   public destroy() {
     renderStaticSceneThrottled.cancel();
-    this.getRenderableElements.clear();
+    this._getRenderableElements.clear();
   }
 }
diff --git a/packages/excalidraw/tests/clipboard.test.tsx b/packages/excalidraw/tests/clipboard.test.tsx
index f3fda88d11..9520810583 100644
--- a/packages/excalidraw/tests/clipboard.test.tsx
+++ b/packages/excalidraw/tests/clipboard.test.tsx
@@ -305,8 +305,88 @@ describe("pasting & frames", () => {
 
     await waitFor(() => {
       expect(h.elements.length).toBe(2);
+      expect(h.elements[0].type).toBe(rect.type);
+      expect(h.elements[0].frameId).toBe(frame.id);
+      expect(h.elements[1].id).toBe(frame.id);
+      expect(h.elements[0].index! < frame.index!).toBe(true);
+    });
+  });
+
+  it("should layer pasted elements above the highest frame child", async () => {
+    const frame = API.createElement({
+      type: "frame",
+      width: 100,
+      height: 100,
+      x: 0,
+      y: 0,
+    });
+    const frameChild = API.createElement({
+      id: "frameChild",
+      type: "rectangle",
+      x: 10,
+      y: 10,
+      width: 20,
+      height: 20,
+      frameId: frame.id,
+    });
+    const rect = API.createElement({ type: "rectangle" });
+
+    API.setElements([frameChild, frame]);
+
+    const clipboardJSON = await serializeAsClipboardJSON({
+      elements: [rect],
+      files: null,
+    });
+
+    mouse.moveTo(50, 50);
+
+    pasteWithCtrlCmdV(clipboardJSON);
+
+    await waitFor(() => {
+      expect(h.elements.length).toBe(3);
       expect(h.elements[1].type).toBe(rect.type);
       expect(h.elements[1].frameId).toBe(frame.id);
+      expect(h.elements.map((element) => element.id)).toEqual([
+        frameChild.id,
+        h.elements[1].id,
+        frame.id,
+      ]);
+      expect(h.elements[1].index! > frameChild.index!).toBe(true);
+      expect(h.elements[1].index! < frame.index!).toBe(true);
+    });
+  });
+
+  it("should preserve denormalized pasted frame child order", async () => {
+    const frame = API.createElement({
+      type: "frame",
+      width: 100,
+      height: 100,
+      x: 0,
+      y: 0,
+    });
+    const frameChild = API.createElement({
+      type: "rectangle",
+      x: 10,
+      y: 10,
+      width: 20,
+      height: 20,
+      frameId: frame.id,
+    });
+
+    const clipboardJSON = await serializeAsClipboardJSON({
+      elements: [frame, frameChild],
+      files: null,
+    });
+
+    mouse.moveTo(200, 200);
+
+    pasteWithCtrlCmdV(clipboardJSON);
+
+    await waitFor(() => {
+      expect(h.elements.length).toBe(2);
+      expect(h.elements[0].type).toBe(frame.type);
+      expect(h.elements[1].type).toBe(frameChild.type);
+      expect(h.elements[1].frameId).toBe(h.elements[0].id);
     });
   });
 
@@ -379,8 +459,9 @@ describe("pasting & frames", () => {
 
     await waitFor(() => {
       expect(h.elements.length).toBe(3);
-      expect(h.elements[1].type).toBe(rect.type);
-      expect(h.elements[1].frameId).toBe(frame.id);
+      expect(h.elements[0].type).toBe(rect.type);
+      expect(h.elements[0].frameId).toBe(frame.id);
+      expect(h.elements[1].id).toBe(frame.id);
       expect(h.elements[2].type).toBe(rect2.type);
       expect(h.elements[2].frameId).toBe(null);
     });
@@ -422,10 +503,11 @@ describe("pasting & frames", () => {
 
     await waitFor(() => {
       expect(h.elements.length).toBe(3);
-      expect(h.elements[1].type).toBe(rect.type);
+      expect(h.elements[0].type).toBe(rect.type);
+      expect(h.elements[0].frameId).toBe(frame.id);
+      expect(h.elements[1].type).toBe(rect2.type);
       expect(h.elements[1].frameId).toBe(frame.id);
-      expect(h.elements[2].type).toBe(rect2.type);
-      expect(h.elements[2].frameId).toBe(frame.id);
+      expect(h.elements[2].id).toBe(frame.id);
     });
   });
 
@@ -473,8 +555,9 @@ describe("pasting & frames", () => {
 
     await waitFor(() => {
       expect(h.elements.length).toBe(4);
-      expect(h.elements[1].type).toBe(rect.type);
-      expect(h.elements[1].frameId).toBe(frame.id);
+      expect(h.elements[0].type).toBe(rect.type);
+      expect(h.elements[0].frameId).toBe(frame.id);
+      expect(h.elements[1].id).toBe(frame.id);
       expect(h.elements[2].type).toBe(rect2.type);
       expect(h.elements[2].frameId).toBe(h.elements[3].id);
       expect(h.elements[3].type).toBe(frame2.type);
diff --git a/packages/excalidraw/wysiwyg/textWysiwyg.test.tsx b/packages/excalidraw/wysiwyg/textWysiwyg.test.tsx
index a092576de0..f044553fd5 100644
--- a/packages/excalidraw/wysiwyg/textWysiwyg.test.tsx
+++ b/packages/excalidraw/wysiwyg/textWysiwyg.test.tsx
@@ -769,6 +769,63 @@ describe("textWysiwyg", () => {
       ]);
     });
 
+    it("should not add bound text to a frame when its container is not a frame child", async () => {
+      const frame = API.createElement({
+        type: "frame",
+        x: 0,
+        y: 0,
+        width: 200,
+        height: 200,
+      });
+      const rectangle = API.createElement({
+        type: "rectangle",
+        x: 10,
+        y: 20,
+        width: 90,
+        height: 75,
+        backgroundColor: "red",
+      });
+      API.setElements([frame, rectangle]);
+
+      mouse.doubleClickAt(rectangle.x + 10, rectangle.y + 10);
+
+      const text = h.elements[2] as ExcalidrawTextElementWithContainer;
+      expect(text.type).toBe("text");
+      expect(text.containerId).toBe(rectangle.id);
+      expect(text.frameId).toBe(null);
+    });
+
+    it("should bind text to a frame child container when single clicking its center", async () => {
+      const frame = API.createElement({
+        type: "frame",
+        x: 0,
+        y: 0,
+        width: 200,
+        height: 200,
+      });
+      const rectangle = API.createElement({
+        type: "rectangle",
+        x: 10,
+        y: 20,
+        width: 90,
+        height: 75,
+        backgroundColor: "red",
+        frameId: frame.id,
+      });
+      API.setElements([rectangle, frame]);
+
+      UI.clickTool("text");
+      mouse.clickAt(
+        rectangle.x + rectangle.width / 2,
+        rectangle.y + rectangle.height / 2,
+      );
+
+      const text = h.elements[1] as ExcalidrawTextElementWithContainer;
+      expect(text.type).toBe("text");
+      expect(text.containerId).toBe(rectangle.id);
+      expect(text.frameId).toBe(frame.id);
+    });
+
     it("should set the text element angle to same as container angle when binding to rotated container", async () => {
       const rectangle = API.createElement({
         type: "rectangle",

From 974b338b7e5fed5176cfd83b7a120b137751a1db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rk=20Tolm=C3=A1cs?= <mark@lazycat.hu>
Date: Wed, 6 May 2026 15:27:34 +0200
Subject: [PATCH 09/17] fix: Group selection (#11234)

* fix: Group selection

Co-authored-by: Copilot <copilot@github.com>
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

* fix: Tests

Co-authored-by: Copilot <copilot@github.com>
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

* fix: Frames and overlap

Co-authored-by: Copilot <copilot@github.com>
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

* fix: Remove unnecessary crust

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

* revert unused Set signature

* skip ignored elements from group condition

when wrap-mode selecting grouped elements, we should not require to select those we ignore (bound elements or locked ones), else it's impossible to select grouped text containers

unclear whether locked elements should also be excluded - but it feels like a good heuristic on the whole

* apply exclusion

* simplify

* feat: return all elements in group for overlap selection

---------

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Co-authored-by: Copilot <copilot@github.com>
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
---
 packages/element/src/selection.ts            |  61 +++-
 packages/excalidraw/tests/selection.test.tsx | 313 ++++++++++++++++++-
 2 files changed, 356 insertions(+), 18 deletions(-)

diff --git a/packages/element/src/selection.ts b/packages/element/src/selection.ts
index 88bb1c2c80..a65d1d3ce3 100644
--- a/packages/element/src/selection.ts
+++ b/packages/element/src/selection.ts
@@ -129,13 +129,24 @@ export const getElementsWithinSelection = (
   const framesInSelection = excludeElementsInFrames
     ? new Set<NonDeletedExcalidrawElement["id"]>()
     : null;
-  let elementsInSelection: NonDeletedExcalidrawElement[] = [];
+  const groups: Record<string, NonDeletedExcalidrawElement[]> = {};
+  const elementsInSelection: Set<NonDeletedExcalidrawElement> = new Set();
 
   for (const element of elements) {
     if (shouldIgnoreElementFromSelection(element)) {
       continue;
     }
 
+    // Track only selectable top-level group members, so ignored elements such
+    // as bound text and locked elements don't affect group selection.
+    const groupId = element.groupIds.at(-1);
+    if (groupId) {
+      if (!groups[groupId]) {
+        groups[groupId] = [];
+      }
+      groups[groupId].push(element);
+    }
+
     const strokeWidth = element.strokeWidth;
     let labelAABB: Bounds | null = null;
     let elementAABB = getElementBounds(element, elementsMap);
@@ -209,7 +220,7 @@ export const getElementsWithinSelection = (
       if (framesInSelection && isFrameLikeElement(element)) {
         framesInSelection.add(element.id);
       }
-      elementsInSelection.push(element);
+      elementsInSelection.add(element);
       continue;
     }
 
@@ -219,7 +230,7 @@ export const getElementsWithinSelection = (
       labelAABB &&
       doBoundsIntersect(selectionBounds, labelAABB)
     ) {
-      elementsInSelection.push(element);
+      elementsInSelection.add(element);
       continue;
     }
 
@@ -309,7 +320,7 @@ export const getElementsWithinSelection = (
           framesInSelection.add(element.id);
         }
 
-        elementsInSelection.push(element);
+        elementsInSelection.add(element);
         continue;
       }
     }
@@ -318,21 +329,41 @@ export const getElementsWithinSelection = (
     //    as it is separately handled in App.
   }
 
-  elementsInSelection = framesInSelection
-    ? excludeElementsFromFrames(elementsInSelection, framesInSelection)
-    : elementsInSelection;
+  if (framesInSelection) {
+    elementsInSelection.forEach((element) => {
+      if (element.frameId && framesInSelection.has(element.frameId)) {
+        elementsInSelection.delete(element);
+      }
+    });
+  }
 
-  elementsInSelection = elementsInSelection.filter((element) => {
-    const containingFrame = getContainingFrame(element, elementsMap);
+  if (boxSelectionMode === "overlap") {
+    Array.from(elementsInSelection).forEach((element) => {
+      const groupId = element.groupIds.at(-1);
+      const group = groupId ? groups[groupId] : null;
 
-    if (containingFrame) {
-      return elementOverlapsWithFrame(element, containingFrame, elementsMap);
-    }
+      group?.forEach((groupElement) => elementsInSelection.add(groupElement));
+    });
+  } else if (boxSelectionMode === "contain") {
+    elementsInSelection.forEach((element) => {
+      // note: currently we only support top-level group handling since
+      // we don't support box selecting while editing the group/subgroup
+      // see https://github.com/excalidraw/excalidraw/pull/11234#issuecomment-4387654451
+      const groupId = element.groupIds.at(-1);
 
-    return true;
-  });
+      const group = groupId ? groups[groupId] : null;
 
-  return elementsInSelection;
+      if (
+        group &&
+        !group.every((groupElement) => elementsInSelection.has(groupElement))
+      ) {
+        elementsInSelection.delete(element);
+      }
+    });
+  }
+
+  // to maintain original order elements (namely for group selection)
+  return elements.filter((element) => elementsInSelection.has(element));
 };
 
 export const getVisibleAndNonSelectedElements = (
diff --git a/packages/excalidraw/tests/selection.test.tsx b/packages/excalidraw/tests/selection.test.tsx
index 5fd7a303d7..683f46b6f2 100644
--- a/packages/excalidraw/tests/selection.test.tsx
+++ b/packages/excalidraw/tests/selection.test.tsx
@@ -1,8 +1,12 @@
 import React from "react";
 import { vi } from "vitest";
 
-import { KEYS, ROUNDNESS, reseed } from "@excalidraw/common";
-import { getElementBounds, getElementLineSegments } from "@excalidraw/element";
+import { KEYS, ROUNDNESS, arrayToMap, reseed } from "@excalidraw/common";
+import {
+  getElementBounds,
+  getElementLineSegments,
+  getElementsWithinSelection,
+} from "@excalidraw/element";
 import { pointFrom, pointRotateRads, type LocalPoint } from "@excalidraw/math";
 
 import { SHAPES } from "../components/shapes";
@@ -269,6 +273,145 @@ describe("box-selection overlap mode", () => {
     assertSelectedElements([rect1.id]);
   });
 
+  it("should select the whole group when overlapping one group member", () => {
+    const rect1 = API.createElement({
+      type: "rectangle",
+      x: 0,
+      y: 0,
+      width: 50,
+      height: 50,
+      groupIds: ["A"],
+    });
+    const rect2 = API.createElement({
+      type: "rectangle",
+      x: 100,
+      y: 0,
+      width: 50,
+      height: 50,
+      groupIds: ["A"],
+    });
+
+    API.setElements([rect1, rect2]);
+
+    boxSelect(25, -20, 75, 70);
+
+    assertSelectedElements([rect1.id, rect2.id]);
+    expect(h.state.selectedGroupIds).toEqual({ A: true });
+  });
+
+  it("should return all group elements when overlapping one group member", () => {
+    const rect1 = API.createElement({
+      type: "rectangle",
+      id: "rect1",
+      x: 0,
+      y: 0,
+      width: 50,
+      height: 50,
+      groupIds: ["A"],
+    });
+    const rect2 = API.createElement({
+      type: "rectangle",
+      id: "rect2",
+      x: 100,
+      y: 0,
+      width: 50,
+      height: 50,
+      groupIds: ["A"],
+    });
+    const rect3 = API.createElement({
+      type: "rectangle",
+      id: "rect3",
+      x: 200,
+      y: 0,
+      width: 50,
+      height: 50,
+    });
+    const selection = API.createElement({
+      type: "rectangle",
+      x: 125,
+      y: -10,
+      width: 10,
+      height: 70,
+    });
+    const elements = [rect1, rect2, rect3];
+
+    expect(
+      getElementsWithinSelection(
+        elements,
+        selection,
+        arrayToMap([...elements, selection]),
+        false,
+        "overlap",
+      ).map((element) => element.id),
+    ).toEqual([rect1.id, rect2.id]);
+  });
+
+  it("should retain nested and interleaved group element order", () => {
+    const outerNested1 = API.createElement({
+      type: "rectangle",
+      id: "outerNested1",
+      x: 0,
+      y: 0,
+      width: 50,
+      height: 50,
+      groupIds: ["inner", "outer"],
+    });
+    const other1 = API.createElement({
+      type: "rectangle",
+      id: "other1",
+      x: 70,
+      y: 0,
+      width: 50,
+      height: 50,
+      groupIds: ["other"],
+    });
+    const outerOnly = API.createElement({
+      type: "rectangle",
+      id: "outerOnly",
+      x: 140,
+      y: 0,
+      width: 50,
+      height: 50,
+      groupIds: ["outer"],
+    });
+    const other2 = API.createElement({
+      type: "rectangle",
+      id: "other2",
+      x: 210,
+      y: 0,
+      width: 50,
+      height: 50,
+      groupIds: ["other"],
+    });
+    const outerNested2 = API.createElement({
+      type: "rectangle",
+      id: "outerNested2",
+      x: 280,
+      y: 0,
+      width: 50,
+      height: 50,
+      groupIds: ["inner", "outer"],
+    });
+    const selection = API.createElement({
+      type: "rectangle",
+      x: 295,
+      y: -10,
+      width: 10,
+      height: 70,
+    });
+    const elements = [outerNested1, other1, outerOnly, other2, outerNested2];
+
+    expect(
+      getElementsWithinSelection(
+        elements,
+        selection,
+        arrayToMap([...elements, selection]),
+        false,
+        "overlap",
+      ).map((element) => element.id),
+    ).toEqual([outerNested1.id, outerOnly.id, outerNested2.id]);
+  });
+
   it("should not select a transparent rectangle when the selection box stays inside it", () => {
     const rect1 = API.createElement({
       type: "rectangle",
@@ -716,11 +859,175 @@ describe("inner box-selection", () => {
       mouse.moveTo(rect2.x + rect2.width + 10, rect2.y + rect2.height + 10);
       mouse.up();
 
+      assertSelectedElements([rect1.id]);
+      expect(h.state.selectedGroupIds).toEqual({});
+    });
+
+    Keyboard.withModifierKeys({ ctrl: true }, () => {
+      mouse.downAt(40, 40);
+      mouse.move(-1000, -1000);
+      mouse.moveTo(rect3.x + rect3.width + 10, rect3.y + rect3.height + 10);
+      mouse.up();
+
       assertSelectedElements([rect2.id, rect3.id]);
       expect(h.state.selectedGroupIds).toEqual({ A: true });
     });
   });
 
+  it("does not select a nested outer group until all members are contained", async () => {
+    const innerRect1 = API.createElement({
+      type: "rectangle",
+      x: 50,
+      y: 50,
+      width: 50,
+      height: 50,
+      groupIds: ["inner", "outer"],
+    });
+    const innerRect2 = API.createElement({
+      type: "rectangle",
+      x: 120,
+      y: 50,
+      width: 50,
+      height: 50,
+      groupIds: ["inner", "outer"],
+    });
+    const outerRect = API.createElement({
+      type: "rectangle",
+      x: 190,
+      y: 50,
+      width: 50,
+      height: 50,
+      groupIds: ["outer"],
+    });
+    API.setElements([innerRect1, innerRect2, outerRect]);
+
+    Keyboard.withModifierKeys({ ctrl: true }, () => {
+      mouse.downAt(0, 0);
+      mouse.move(-1000, -1000);
+      mouse.moveTo(
+        innerRect2.x + innerRect2.width + 10,
+        innerRect2.y + innerRect2.height + 10,
+      );
+      mouse.up();
+
+      assertSelectedElements([]);
+      expect(h.state.selectedGroupIds).toEqual({});
+    });
+
+    Keyboard.withModifierKeys({ ctrl: true }, () => {
+      mouse.downAt(0, 0);
+      mouse.move(-1000, -1000);
+      mouse.moveTo(
+        outerRect.x + outerRect.width + 10,
+        outerRect.y + outerRect.height + 10,
+      );
+      mouse.up();
+
+      assertSelectedElements([innerRect1.id, innerRect2.id, outerRect.id]);
+      expect(h.state.selectedGroupIds).toEqual({ outer: true });
+    });
+  });
+
+  it.skip("checks nested containment against the current editing depth", async () => {
+    const innerRect1 = API.createElement({
+      type: "rectangle",
+      x: 50,
+      y: 50,
+      width: 50,
+      height: 50,
+      groupIds: ["inner", "outer"],
+    });
+    const innerRect2 = API.createElement({
+      type: "rectangle",
+      x: 120,
+      y: 50,
+      width: 50,
+      height: 50,
+      groupIds: ["inner", "outer"],
+    });
+    const outerRect = API.createElement({
+      type: "rectangle",
+      x: 190,
+      y: 50,
+      width: 50,
+      height: 50,
+      groupIds: ["outer"],
+    });
+    const selection = API.createElement({
+      type: "rectangle",
+      x: 40,
+      y: 40,
+      width: 140,
+      height: 70,
+    });
+    const elements = [innerRect1, innerRect2, outerRect];
+    const elementsMap = arrayToMap([...elements, selection]);
+
+    expect(
+      getElementsWithinSelection(
+        elements,
+        selection,
+        elementsMap,
+        false,
+        "contain",
+      ).map((element) => element.id),
+    ).toEqual([]);
+
+    expect(
+      getElementsWithinSelection(
+        elements,
+        selection,
+        elementsMap,
+        false,
+        "contain",
+        // "outer", /* editingGroupId - add as param once we implement nested group handling */
+      ).map((element) => element.id),
+    ).toEqual([innerRect1.id, innerRect2.id]);
+  });
+
+  it("ignores grouped bound text when checking box-selection containment", async () => {
+    const container = API.createElement({
+      type: "rectangle",
+      id: "container",
+      x: 50,
+      y: 50,
+      width: 50,
+      height: 50,
+      groupIds: ["A"],
+      boundElements: [{ type: "text", id: "bound-text" }],
+    });
+    const boundText = API.createElement({
+      type: "text",
+      id: "bound-text",
+      x: 50,
+      y: 50,
+      width: 50,
+      height: 20,
+      containerId: container.id,
+      groupIds: ["A"],
+    });
+    const rect = API.createElement({
+      type: "rectangle",
+      x: 150,
+      y: 150,
+      width: 50,
+      height: 50,
+      groupIds: ["A"],
+    });
+    API.setElements([container, boundText, rect]);
+
+    Keyboard.withModifierKeys({ ctrl: true }, () => {
+      mouse.downAt(40, 40);
+      mouse.move(-1000, -1000);
+      mouse.moveTo(rect.x + rect.width + 10, rect.y + rect.height + 10);
+      mouse.up();
+
+      expect(h.state.selectedElementIds[container.id]).toBe(true);
+      expect(h.state.selectedElementIds[rect.id]).toBe(true);
+      expect(h.state.selectedGroupIds).toEqual({ A: true });
+    });
+  });
+
   it("selecting & deselecting grouped elements visually nested inside another", async () => {
     const rect1 = API.createElement({
       type: "rectangle",
@@ -751,7 +1058,7 @@ describe("inner box-selection", () => {
     Keyboard.withModifierKeys({ ctrl: true }, () => {
       mouse.downAt(rect2.x - 20, rect2.y - 20);
       mouse.move(-1000, -1000);
-      mouse.moveTo(rect2.x + rect2.width + 10, rect2.y + rect2.height + 10);
+      mouse.moveTo(rect3.x + rect3.width + 10, rect3.y + rect3.height + 10);
       assertSelectedElements([rect2.id, rect3.id]);
       expect(h.state.selectedGroupIds).toEqual({ A: true });
       mouse.moveTo(rect2.x - 10, rect2.y - 10);

From 7f56cc0cf3458e9ef6e5071b4594740cae36a0aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rk=20Tolm=C3=A1cs?= <mark@lazycat.hu>
Date: Wed, 6 May 2026 16:39:45 +0200
Subject: [PATCH 10/17] fix: Speculative fixes for arrow invariant failures
 (#11241)

Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
---
 packages/element/src/binding.ts             | 11 +++++-----
 packages/element/src/linearElementEditor.ts | 10 ++++-----
 packages/excalidraw/components/App.tsx      | 24 ++++++++++++++++++---
 3 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/packages/element/src/binding.ts b/packages/element/src/binding.ts
index 3f80ffbae2..e21542ebb8 100644
--- a/packages/element/src/binding.ts
+++ b/packages/element/src/binding.ts
@@ -734,12 +734,11 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
     });
 
   // Handle outside-outside binding to the same element
-  if (otherBinding && otherBinding.elementId === hit?.id) {
-    invariant(
-      !opts?.newArrow || appState.selectedLinearElement?.initialState.origin,
-      "appState.selectedLinearElement.initialState.origin must be defined for new arrows",
-    );
-
+  if (
+    otherBinding &&
+    otherBinding.elementId === hit?.id &&
+    (!opts?.newArrow || appState.selectedLinearElement?.initialState.origin)
+  ) {
     return {
       start: {
         mode: "inside",
diff --git a/packages/element/src/linearElementEditor.ts b/packages/element/src/linearElementEditor.ts
index 8af8ecd858..d2f80a50b3 100644
--- a/packages/element/src/linearElementEditor.ts
+++ b/packages/element/src/linearElementEditor.ts
@@ -486,7 +486,7 @@ export class LinearElementEditor {
           selectedPointsIndices,
         )}) points(0..${
           element.points.length - 1
-        }) lastClickedPoint(${lastClickedPoint})`,
+        }) lastClickedPoint(${lastClickedPoint}) isElbowArrow: ${elbowed}`,
       );
 
       // Fall back to the actual last point as a last resort.
@@ -2139,13 +2139,13 @@ const pointDraggingUpdates = (
 } => {
   const naiveDraggingPoints = new Map(
     selectedPointsIndices.map((pointIndex) => {
+      // NOTE: Avoid stale point index issue potentially caused by elbow
+      // arrows unpredictably changing the number of points during dragging
+      const point = element.points[pointIndex] ?? element.points.at(-1);
       return [
         pointIndex,
         {
-          point: pointFrom<LocalPoint>(
-            element.points[pointIndex][0] + deltaX,
-            element.points[pointIndex][1] + deltaY,
-          ),
+          point: pointFrom<LocalPoint>(point[0] + deltaX, point[1] + deltaY),
           isDragging: true,
         },
       ];
diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx
index 4601808950..118147fafa 100644
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@@ -10408,20 +10408,38 @@ class App extends React.Component<AppProps, AppState> {
           );
 
           let linearElementEditor = this.state.selectedLinearElement;
-          if (!linearElementEditor) {
+
+          if (
+            !linearElementEditor ||
+            linearElementEditor.elementId !== newElement.id
+          ) {
             linearElementEditor = new LinearElementEditor(
               newElement,
               this.scene.getNonDeletedElementsMap(),
             );
+          }
+
+          const lastClickedPointOutOfBounds =
+            linearElementEditor &&
+            (linearElementEditor.initialState.lastClickedPoint < 0 ||
+              linearElementEditor.initialState.lastClickedPoint >=
+                points.length);
+          if (lastClickedPointOutOfBounds) {
+            console.warn(
+              "Last clicked point is out of bounds. Attempting to fix it.",
+            );
             linearElementEditor = {
               ...linearElementEditor,
-              selectedPointsIndices: [1],
+              selectedPointsIndices: [points.length - 1],
               initialState: {
                 ...linearElementEditor.initialState,
-                lastClickedPoint: 1,
+                prevSelectedPointsIndices: null,
+                lastClickedPoint: points.length - 1,
               },
+              hoverPointIndex: points.length - 1,
             };
           }
+
           this.setState({
             newElement,
             ...LinearElementEditor.handlePointDragging(

From c59fb8dcbc8a63b5db2de5e0bfe49551f35ded7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rk=20Tolm=C3=A1cs?= <mark@lazycat.hu>
Date: Wed, 6 May 2026 17:42:36 +0200
Subject: [PATCH 11/17] fix: LocalStorage is empty object on node@25 which
 breaks tests (#11240)

Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
---
 .../excalidraw/tests/helpers/polyfills.ts     | 39 +++++++++++++++++++
 setupTests.ts                                 | 10 +++--
 2 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/packages/excalidraw/tests/helpers/polyfills.ts b/packages/excalidraw/tests/helpers/polyfills.ts
index d02c7290be..59c490cf9a 100644
--- a/packages/excalidraw/tests/helpers/polyfills.ts
+++ b/packages/excalidraw/tests/helpers/polyfills.ts
@@ -94,3 +94,42 @@ export const testPolyfills = {
   // https://github.com/vitest-dev/vitest/pull/4164#issuecomment-2172729965
   URL,
 };
+
+export const PolyfillLocalStorage = () => {
+  // Node.js 25+ provides a native localStorage global that shadows jsdom's,
+  // and jsdom's own localStorage also uses the native one -- both are broken
+  // (empty objects without Storage methods). On older Node versions, jsdom
+  // provides a working localStorage. This polyfill replaces localStorage on
+  // all supported versions with a standard Storage implementation backed by
+  // a Map, ensuring consistent behavior regardless of the Node.js version.
+  const storage = new Map<string, string>();
+  const storagePolyfill: Storage = {
+    get length() {
+      return storage.size;
+    },
+    clear() {
+      storage.clear();
+    },
+    key(index) {
+      return Array.from(storage.keys())[index] ?? null;
+    },
+    getItem(key) {
+      return storage.get(key) ?? null;
+    },
+    setItem(key, value) {
+      storage.set(key, value);
+    },
+    removeItem(key) {
+      storage.delete(key);
+    },
+    *[Symbol.iterator]() {
+      yield* storage.entries();
+    },
+  };
+
+  Object.defineProperty(window, "localStorage", {
+    value: storagePolyfill,
+    writable: true,
+    configurable: true,
+  });
+};
diff --git a/setupTests.ts b/setupTests.ts
index 41bc8e165c..4a690f43cb 100644
--- a/setupTests.ts
+++ b/setupTests.ts
@@ -8,7 +8,13 @@ import { vi } from "vitest";
 import polyfill from "./packages/excalidraw/polyfill";
 import { mockThrottleRAF } from "./packages/excalidraw/tests/helpers/mocks";
 import { yellow } from "./packages/excalidraw/tests/helpers/colorize";
-import { testPolyfills } from "./packages/excalidraw/tests/helpers/polyfills";
+import {
+  PolyfillLocalStorage,
+  testPolyfills,
+} from "./packages/excalidraw/tests/helpers/polyfills";
+
+Object.assign(globalThis, testPolyfills);
+PolyfillLocalStorage();
 
 vi.mock("@excalidraw/common", async (importOriginal) => {
   const module = await importOriginal<typeof import("@excalidraw/common")>();
@@ -22,8 +28,6 @@ vi.mock("@excalidraw/common", async (importOriginal) => {
 // mock for pep.js not working with setPointerCapture()
 HTMLElement.prototype.setPointerCapture = vi.fn();
 
-Object.assign(globalThis, testPolyfills);
-
 require("fake-indexeddb/auto");
 
 polyfill();

From 97274a74b2d075d60335c4e9cd8dbf56de935df8 Mon Sep 17 00:00:00 2001
From: David Luzar <5153846+dwelle@users.noreply.github.com>
Date: Wed, 6 May 2026 19:54:30 +0200
Subject: [PATCH 12/17] ci(repo): enforce scopes (#11292)

---
 .github/workflows/semantic-pr-title.yml | 86 +++++++++++++++++++++++++
 1 file changed, 86 insertions(+)

diff --git a/.github/workflows/semantic-pr-title.yml b/.github/workflows/semantic-pr-title.yml
index 8bfc1327b4..0dc2c879f4 100644
--- a/.github/workflows/semantic-pr-title.yml
+++ b/.github/workflows/semantic-pr-title.yml
@@ -6,11 +6,97 @@ on:
       - opened
       - edited
       - synchronize
+      - labeled
+      - unlabeled
 
 jobs:
   semantic:
     runs-on: ubuntu-latest
+    permissions:
+      pull-requests: read
     steps:
       - uses: amannn/action-semantic-pull-request@e32d7e603df1aa1ba07e981f2a23455dee596825 # v5
+        with:
+          requireScope: true
+          scopes: |
+            app
+            editor
+            packages/excalidraw
+            packages/utils
+            docker
+            repo
+          ignoreLabels: |
+            skip-semantic-title
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  label-scope:
+    needs: semantic
+    if: github.event.pull_request.head.repo.full_name == github.repository
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+    steps:
+      - name: Label scoped PR
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+          PR_TITLE: ${{ github.event.pull_request.title }}
+          REPOSITORY: ${{ github.repository }}
+        run: |
+          set -euo pipefail
+
+          scope_labels=(s-app s-editor s-package)
+
+          readarray -t desired_labels < <(
+            node <<'NODE'
+          const title = process.env.PR_TITLE;
+          const match = title.match(/^[a-z]+(?:\(([^)]+)\))?!?:/i);
+          const scopes = match?.[1]?.split(",").map((scope) => scope.trim()) ?? [];
+          const labels = new Set();
+
+          for (const scope of scopes) {
+            if (scope === "app") {
+              labels.add("s-app");
+            } else if (scope === "editor") {
+              labels.add("s-editor");
+            } else if (scope.startsWith("packages/")) {
+              labels.add("s-package");
+            }
+          }
+
+          process.stdout.write([...labels].join("\n"));
+          NODE
+          )
+
+          should_apply_label() {
+            local label="$1"
+
+            for desired_label in "${desired_labels[@]}"; do
+              if [[ "$desired_label" == "$label" ]]; then
+                return 0
+              fi
+            done
+
+            return 1
+          }
+
+          for label in "${scope_labels[@]}"; do
+            if ! should_apply_label "$label"; then
+              gh api \
+                --method DELETE \
+                "repos/${REPOSITORY}/issues/${PR_NUMBER}/labels/${label}" \
+                --silent 2>/dev/null || true
+            fi
+          done
+
+          for label in "${desired_labels[@]}"; do
+            if ! gh api \
+              --method POST \
+              "repos/${REPOSITORY}/issues/${PR_NUMBER}/labels" \
+              --field "labels[]=${label}" \
+              --silent; then
+              echo "::warning::Could not apply ${label}. The workflow token likely does not have issues:write permission for this PR."
+            fi
+          done

From 091b9053a3db8ef702c0b65bc8d351290f685362 Mon Sep 17 00:00:00 2001
From: melvin <143811697+sznmelvin@users.noreply.github.com>
Date: Wed, 6 May 2026 16:59:28 -0400
Subject: [PATCH 13/17] fix(editor): enabled ctrl+y redo shortcut on linux and
 mac (#11179)

* enabled ctrl+y redo shortcut on linux and mac

* Apply suggestion from @dwelle

---------

Co-authored-by: David Luzar <5153846+dwelle@users.noreply.github.com>
---
 packages/excalidraw/actions/actionHistory.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/excalidraw/actions/actionHistory.tsx b/packages/excalidraw/actions/actionHistory.tsx
index 1b530adeaf..5db66670b7 100644
--- a/packages/excalidraw/actions/actionHistory.tsx
+++ b/packages/excalidraw/actions/actionHistory.tsx
@@ -1,5 +1,4 @@
 import {
-  isWindows,
   KEYS,
   matchKey,
   arrayToMap,
@@ -114,7 +113,7 @@ export const createRedoAction: ActionCreator = (history) => ({
     ),
   keyTest: (event) =>
     (event[KEYS.CTRL_OR_CMD] && event.shiftKey && matchKey(event, KEYS.Z)) ||
-    (isWindows && event.ctrlKey && !event.shiftKey && matchKey(event, KEYS.Y)),
+    (event[KEYS.CTRL_OR_CMD] && !event.shiftKey && matchKey(event, KEYS.Y)),
   PanelComponent: ({ appState, updateData, data, app }) => {
     const { isRedoStackEmpty } = useEmitter(
       history.onHistoryChangedEmitter,

From d992c10bc1c3ad87eff4e0a45091810242f01ce7 Mon Sep 17 00:00:00 2001
From: alechulkin <oleksandr.chulkin@yahoo.com>
Date: Thu, 7 May 2026 00:03:10 +0300
Subject: [PATCH 14/17] fix(app): resolve app-jotai import path in LocalData
 (#11290)

Co-authored-by: chulkin-mdb <oleksandr.chulkin@mongodb.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
---
 excalidraw-app/data/LocalData.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/excalidraw-app/data/LocalData.ts b/excalidraw-app/data/LocalData.ts
index 634fdc4f1c..d09d8aa88e 100644
--- a/excalidraw-app/data/LocalData.ts
+++ b/excalidraw-app/data/LocalData.ts
@@ -26,7 +26,6 @@ import {
   get,
 } from "idb-keyval";
 
-import { appJotaiStore, atom } from "excalidraw-app/app-jotai";
 import { getNonDeletedElements } from "@excalidraw/element";
 
 import type { LibraryPersistedData } from "@excalidraw/excalidraw/data/library";
@@ -39,6 +38,7 @@ import type {
 } from "@excalidraw/excalidraw/types";
 import type { MaybePromise } from "@excalidraw/common/utility-types";
 
+import { appJotaiStore, atom } from "../app-jotai";
 import { SAVE_TO_LOCAL_STORAGE_TIMEOUT, STORAGE_KEYS } from "../app_constants";
 
 import { FileManager } from "./FileManager";

From b2b2815954f6561f0980bef8997750dabec16e87 Mon Sep 17 00:00:00 2001
From: Praneeth Kodumagulla <64239307+praneethhere@users.noreply.github.com>
Date: Wed, 6 May 2026 16:10:50 -0500
Subject: [PATCH 15/17] fix(editor): prevent duplicate lasso toolbar item
 (#11286)

---
 packages/excalidraw/components/shapes.tsx |  9 +++-----
 packages/excalidraw/tests/tool.test.tsx   | 28 ++++++++++++++++++++++-
 2 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/packages/excalidraw/components/shapes.tsx b/packages/excalidraw/components/shapes.tsx
index 999dfe1c14..d69a34505f 100644
--- a/packages/excalidraw/components/shapes.tsx
+++ b/packages/excalidraw/components/shapes.tsx
@@ -119,15 +119,12 @@ export const SHAPES = [
 export const getToolbarTools = (app: AppClassProperties) => {
   return app.state.preferredSelectionTool.type === "lasso"
     ? ([
+        SHAPES[0],
         {
+          ...SHAPES[1],
           value: "lasso",
-          icon: SelectionIcon,
-          key: KEYS.V,
-          numericKey: KEYS["1"],
-          fillable: true,
-          toolbar: true,
         },
-        ...SHAPES.slice(1),
+        ...SHAPES.slice(2),
       ] as const)
     : SHAPES;
 };
diff --git a/packages/excalidraw/tests/tool.test.tsx b/packages/excalidraw/tests/tool.test.tsx
index f82997dd7c..cf85f86eee 100644
--- a/packages/excalidraw/tests/tool.test.tsx
+++ b/packages/excalidraw/tests/tool.test.tsx
@@ -4,10 +4,12 @@ import { resolvablePromise } from "@excalidraw/common";
 
 import { Excalidraw } from "../index";
 
+import { getToolbarTools } from "../components/shapes";
+
 import { Pointer } from "./helpers/ui";
 import { act, render } from "./test-utils";
 
-import type { ExcalidrawImperativeAPI } from "../types";
+import type { AppClassProperties, ExcalidrawImperativeAPI } from "../types";
 
 describe("setActiveTool()", () => {
   const h = window.h;
@@ -66,3 +68,27 @@ describe("setActiveTool()", () => {
     expect(h.state.activeTool.customType).toBe("comment");
   });
 });
+describe("getToolbarTools()", () => {
+  const getToolValues = (preferredSelectionTool: "selection" | "lasso") =>
+    getToolbarTools({
+      state: {
+        preferredSelectionTool: {
+          type: preferredSelectionTool,
+        },
+      },
+    } as AppClassProperties).map((tool) => tool.value);
+
+  it("does not include lasso when selection is preferred", () => {
+    const toolValues = getToolValues("selection");
+
+    expect(toolValues.filter((value) => value === "selection")).toHaveLength(1);
+    expect(toolValues.filter((value) => value === "lasso")).toHaveLength(0);
+  });
+
+  it("replaces selection with lasso when lasso is preferred", () => {
+    const toolValues = getToolValues("lasso");
+
+    expect(toolValues.filter((value) => value === "lasso")).toHaveLength(1);
+    expect(toolValues.filter((value) => value === "selection")).toHaveLength(0);
+  });
+});

From 0457ac90634b8556feaa9c0e56be94d3f13fd9bd Mon Sep 17 00:00:00 2001
From: David Luzar <5153846+dwelle@users.noreply.github.com>
Date: Tue, 12 May 2026 18:44:49 +0200
Subject: [PATCH 16/17] fix(editor): handle invalid points on restore (#11321)

* fix: handle invalid points on restore

* move isValidPoint to @excalidraw/math
---
 packages/excalidraw/data/restore.ts           | 109 +++++++++++++++---
 .../excalidraw/tests/data/restore.test.ts     |  79 +++++++++++++
 packages/math/src/point.ts                    |  11 +-
 3 files changed, 183 insertions(+), 16 deletions(-)

diff --git a/packages/excalidraw/data/restore.ts b/packages/excalidraw/data/restore.ts
index 7ffe9b712f..58c2ec26e2 100644
--- a/packages/excalidraw/data/restore.ts
+++ b/packages/excalidraw/data/restore.ts
@@ -1,4 +1,4 @@
-import { isFiniteNumber, pointFrom } from "@excalidraw/math";
+import { isFiniteNumber, isValidPoint, pointFrom } from "@excalidraw/math";
 
 import {
   type CombineBrandsIfNeeded,
@@ -98,6 +98,67 @@ type RestoredAppState = Omit<
 
 const MAX_ARROW_PX = 75_000;
 
+const restoreLinearElementPoints = (
+  points: unknown,
+  width: unknown,
+  height: unknown,
+): LocalPoint[] => {
+  const restoredPoints = Array.isArray(points)
+    ? points.reduce<LocalPoint[]>((acc, point) => {
+        if (isValidPoint(point)) {
+          acc.push(pointFrom<LocalPoint>(point[0], point[1]));
+        }
+        return acc;
+      }, [])
+    : [];
+
+  return restoredPoints.length < 2
+    ? [
+        pointFrom<LocalPoint>(0, 0),
+        pointFrom<LocalPoint>(
+          isFiniteNumber(width) ? width : 0,
+          isFiniteNumber(height) ? height : 0,
+        ),
+      ]
+    : restoredPoints;
+};
+
+const restoreFreedrawPoints = (
+  points: unknown,
+  pressures: unknown,
+): {
+  points: LocalPoint[];
+  pressures: number[];
+} => {
+  if (!Array.isArray(points)) {
+    return {
+      points: [],
+      pressures: [],
+    };
+  }
+
+  const pressureValues: readonly unknown[] = Array.isArray(pressures)
+    ? pressures
+    : [];
+  const restoredPoints: LocalPoint[] = [];
+  const restoredPressures: number[] = [];
+
+  points.forEach((point, index) => {
+    if (isValidPoint(point)) {
+      restoredPoints.push(pointFrom<LocalPoint>(point[0], point[1]));
+      if (index in pressureValues) {
+        const pressure = pressureValues[index];
+        restoredPressures.push(isFiniteNumber(pressure) ? pressure : 0.5);
+      }
+    }
+  });
+
+  return {
+    points: restoredPoints,
+    pressures: restoredPressures,
+  };
+};
+
 export const AllowedExcalidrawActiveTools: Record<
   AppState["activeTool"]["type"],
   boolean
@@ -414,10 +475,15 @@ export const restoreElement = (
 
       return element;
     case "freedraw": {
+      const { points, pressures } = restoreFreedrawPoints(
+        element.points,
+        element.pressures,
+      );
+
       return restoreElementWithProperties(element, {
-        points: element.points,
+        points,
         simulatePressure: element.simulatePressure,
-        pressures: element.pressures,
+        pressures,
       });
     }
     case "image":
@@ -435,14 +501,20 @@ export const restoreElement = (
       const endArrowhead = normalizeArrowhead(element.endArrowhead);
       let x = element.x;
       let y = element.y;
-      let points = // migrate old arrow model to new one
-        !Array.isArray(element.points) || element.points.length < 2
-          ? [pointFrom(0, 0), pointFrom(element.width, element.height)]
-          : element.points;
+      let points = restoreLinearElementPoints(
+        element.points,
+        element.width,
+        element.height,
+      );
 
       if (points[0][0] !== 0 || points[0][1] !== 0) {
         ({ points, x, y } =
-          LinearElementEditor.getNormalizeElementPointsAndCoords(element));
+          LinearElementEditor.getNormalizeElementPointsAndCoords({
+            ...element,
+            points,
+            x: x ?? 0,
+            y: y ?? 0,
+          } as ExcalidrawLinearElement));
       }
 
       return restoreElementWithProperties(element, {
@@ -456,7 +528,7 @@ export const restoreElement = (
         y,
         ...(isLineElement(element)
           ? {
-              polygon: isValidPolygon(element.points)
+              polygon: isValidPolygon(points)
                 ? element.polygon ?? false
                 : false,
             }
@@ -471,22 +543,29 @@ export const restoreElement = (
           : normalizeArrowhead(element.endArrowhead);
       const x = element.x as number | undefined;
       const y = element.y as number | undefined;
-      const points: readonly LocalPoint[] | undefined = // migrate old arrow model to new one
-        !Array.isArray(element.points) || element.points.length < 2
-          ? [pointFrom(0, 0), pointFrom(element.width, element.height)]
-          : element.points;
+      const points = restoreLinearElementPoints(
+        element.points,
+        element.width,
+        element.height,
+      );
+      const elementWithRestoredPoints = {
+        ...element,
+        points,
+        x: x ?? 0,
+        y: y ?? 0,
+      } as ExcalidrawArrowElement;
 
       const base = {
         type: element.type,
         startBinding: repairBinding(
-          element as ExcalidrawArrowElement,
+          elementWithRestoredPoints,
           element.startBinding,
           targetElementsMap,
           existingElementsMap,
           "start",
         ),
         endBinding: repairBinding(
-          element as ExcalidrawArrowElement,
+          elementWithRestoredPoints,
           element.endBinding,
           targetElementsMap,
           existingElementsMap,
diff --git a/packages/excalidraw/tests/data/restore.test.ts b/packages/excalidraw/tests/data/restore.test.ts
index bd11424b6f..aa634d32dc 100644
--- a/packages/excalidraw/tests/data/restore.test.ts
+++ b/packages/excalidraw/tests/data/restore.test.ts
@@ -160,6 +160,39 @@ describe("restoreElements", () => {
     });
   });
 
+  it("should restore only valid freedraw points and keep pressures aligned", () => {
+    const freedrawElement = API.createElement({
+      type: "freedraw",
+      id: "id-freedraw-invalid-points",
+      points: [pointFrom(0, 0), pointFrom(10, 10)],
+    });
+
+    const restoredFreedraw = restore.restoreElements(
+      [
+        {
+          ...freedrawElement,
+          simulatePressure: false,
+          points: [
+            pointFrom(0, 0),
+            [Infinity, 10],
+            null,
+            pointFrom(20, 20),
+            [NaN, 30],
+            [40, null],
+          ],
+          pressures: [0.1, 0.2, 0.3, 0.4, 0.5, 0.6],
+        } as any,
+      ],
+      null,
+    )[0] as ExcalidrawFreeDrawElement;
+
+    expect(restoredFreedraw.points).toEqual([
+      pointFrom(0, 0),
+      pointFrom(20, 20),
+    ]);
+    expect(restoredFreedraw.pressures).toEqual([0.1, 0.4]);
+  });
+
   it("should restore line and draw elements correctly", () => {
     const lineElement = API.createElement({ type: "line", id: "id-line01" });
 
@@ -400,6 +433,52 @@ describe("restoreElements", () => {
     expect(restoredLine.points).toMatchObject(expectedLinePoints);
   });
 
+  it("should restore only valid linear points", () => {
+    const lineElement: any = API.createElement({
+      type: "line",
+      x: 10,
+      y: 20,
+      width: 100,
+      height: 200,
+    });
+    const arrowElement: any = API.createElement({
+      type: "arrow",
+      width: 100,
+      height: 200,
+    });
+
+    lineElement.points = [
+      [2, 3],
+      null,
+      [Infinity, 4],
+      [5, 7],
+      [NaN, 8],
+      [9, null],
+    ];
+    arrowElement.points = [
+      [null, 0],
+      [Infinity, 4],
+    ];
+
+    const restoredElements = restore.restoreElements(
+      [lineElement, arrowElement],
+      null,
+    );
+    const restoredLine = restoredElements[0] as ExcalidrawLinearElement;
+    const restoredArrow = restoredElements[1] as ExcalidrawArrowElement;
+
+    expect(restoredLine.points).toEqual([pointFrom(0, 0), pointFrom(3, 4)]);
+    expect(restoredLine.x).toBe(12);
+    expect(restoredLine.y).toBe(23);
+    expect(restoredLine.width).toBe(3);
+    expect(restoredLine.height).toBe(4);
+
+    expect(restoredArrow.points).toEqual([
+      pointFrom(0, 0),
+      pointFrom(100, 200),
+    ]);
+  });
+
   it("when the number of points of a line is greater or equal 2", () => {
     const lineElement_0 = API.createElement({
       type: "line",
diff --git a/packages/math/src/point.ts b/packages/math/src/point.ts
index 13121d681b..68fd9bb3da 100644
--- a/packages/math/src/point.ts
+++ b/packages/math/src/point.ts
@@ -1,5 +1,5 @@
 import { degreesToRadians } from "./angle";
-import { PRECISION } from "./utils";
+import { isFiniteNumber, PRECISION } from "./utils";
 import { vectorFromPoint, vectorScale } from "./vector";
 
 import type {
@@ -253,3 +253,12 @@ export const isPointWithinBounds = <P extends GlobalPoint | LocalPoint>(
     q[1] >= Math.min(p[1], r[1])
   );
 };
+
+export const isValidPoint = (point: unknown): point is LocalPoint => {
+  return (
+    Array.isArray(point) &&
+    point.length === 2 &&
+    isFiniteNumber(point[0]) &&
+    isFiniteNumber(point[1])
+  );
+};

From f6d85bc80fe328e8f472636eb0d541f7bb891aa0 Mon Sep 17 00:00:00 2001
From: David Luzar <5153846+dwelle@users.noreply.github.com>
Date: Thu, 14 May 2026 22:45:03 +0200
Subject: [PATCH 17/17] feat(packages/excalidraw): expose image size config and
 optimize resizing (#11332)

---
 packages/common/src/constants.ts         |  7 +--
 packages/excalidraw/components/App.tsx   | 10 ++--
 packages/excalidraw/data/blob.ts         | 60 ++++++++++++++++++++--
 packages/excalidraw/index.tsx            | 29 ++++++++++-
 packages/excalidraw/tests/image.test.tsx | 65 +++++++++++++++++++++++-
 packages/excalidraw/types.ts             | 10 ++++
 6 files changed, 165 insertions(+), 16 deletions(-)

diff --git a/packages/common/src/constants.ts b/packages/common/src/constants.ts
index 4ff50335ef..0e94df5af6 100644
--- a/packages/common/src/constants.ts
+++ b/packages/common/src/constants.ts
@@ -337,9 +337,10 @@ export const MAX_DECIMALS_FOR_SVG_EXPORT = 2;
 export const EXPORT_SCALES = [1, 2, 3];
 export const DEFAULT_EXPORT_PADDING = 10; // px
 
-export const DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT = 1440;
-
-export const MAX_ALLOWED_FILE_BYTES = 4 * 1024 * 1024;
+export const DEFAULT_IMAGE_OPTIONS: AppProps["imageOptions"] = {
+  maxWidthOrHeight: 1440,
+  maxFileSizeBytes: 4 * 1024 * 1024,
+};
 
 export const SVG_NS = "http://www.w3.org/2000/svg";
 export const SVG_DOCUMENT_PREAMBLE = `<?xml version="1.0" standalone="no"?>
diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx
index 118147fafa..8d390d4ad9 100644
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@@ -28,7 +28,6 @@ import {
   APP_NAME,
   CURSOR_TYPE,
   DEFAULT_TRANSFORM_HANDLE_SPACING,
-  DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT,
   DEFAULT_VERTICAL_ALIGN,
   DRAGGING_THRESHOLD,
   ELEMENT_SHIFT_TRANSLATE_AMOUNT,
@@ -38,7 +37,6 @@ import {
   IMAGE_MIME_TYPES,
   IMAGE_RENDER_TIMEOUT,
   LINE_CONFIRM_THRESHOLD,
-  MAX_ALLOWED_FILE_BYTES,
   MIME_TYPES,
   MQ_RIGHT_SIDEBAR_MIN_WIDTH,
   POINTER_BUTTON,
@@ -11721,9 +11719,11 @@ class App extends React.Component<AppProps, AppState> {
 
     const existingFileData = this.files[fileId];
     if (!existingFileData?.dataURL) {
+      const { maxWidthOrHeight, maxFileSizeBytes } = this.props.imageOptions;
+
       try {
         imageFile = await resizeImageFile(imageFile, {
-          maxWidthOrHeight: DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT,
+          maxWidthOrHeight,
         });
       } catch (error: any) {
         console.error(
@@ -11732,10 +11732,10 @@ class App extends React.Component<AppProps, AppState> {
         );
       }
 
-      if (imageFile.size > MAX_ALLOWED_FILE_BYTES) {
+      if (imageFile.size > maxFileSizeBytes) {
         throw new Error(
           t("errors.fileTooBig", {
-            maxSize: `${Math.trunc(MAX_ALLOWED_FILE_BYTES / 1024 / 1024)}MB`,
+            maxSize: `${Math.trunc(maxFileSizeBytes / 1024 / 1024)}MB`,
           }),
         );
       }
diff --git a/packages/excalidraw/data/blob.ts b/packages/excalidraw/data/blob.ts
index 65f1809497..9cb77a3560 100644
--- a/packages/excalidraw/data/blob.ts
+++ b/packages/excalidraw/data/blob.ts
@@ -311,6 +311,48 @@ export const dataURLToString = (dataURL: DataURL) => {
   return base64ToString(dataURL.slice(dataURL.indexOf(",") + 1));
 };
 
+const getImageFileDimensions = async (file: File) => {
+  const browserURL = typeof window !== "undefined" ? window.URL : undefined;
+  let objectURL: string | null = null;
+  let imageSource: string;
+
+  try {
+    imageSource = browserURL?.createObjectURL
+      ? (objectURL = browserURL.createObjectURL(file))
+      : await getDataURL(file);
+  } catch {
+    objectURL = null;
+    imageSource = await getDataURL(file);
+  }
+
+  return new Promise<{ width: number; height: number }>((resolve, reject) => {
+    const image = new Image();
+
+    const cleanup = () => {
+      image.onload = null;
+      image.onerror = null;
+
+      if (objectURL && browserURL?.revokeObjectURL) {
+        browserURL.revokeObjectURL(objectURL);
+      }
+    };
+
+    image.onload = () => {
+      cleanup();
+      resolve({
+        width: image.naturalWidth || image.width,
+        height: image.naturalHeight || image.height,
+      });
+    };
+    image.onerror = (error) => {
+      cleanup();
+      reject(error);
+    };
+
+    image.src = imageSource;
+  });
+};
+
 export const resizeImageFile = async (
   file: File,
   opts: {
@@ -324,6 +366,20 @@ export const resizeImageFile = async (
     return file;
   }
 
+  if (!isSupportedImageFile(file)) {
+    throw new Error("Error: unsupported file type", { cause: "UNSUPPORTED" });
+  }
+
+  if (!opts.outputType || opts.outputType === file.type) {
+    const dimensions = await getImageFileDimensions(file);
+
+    if (
+      Math.max(dimensions.width, dimensions.height) <= opts.maxWidthOrHeight
+    ) {
+      return file;
+    }
+  }
+
   const [pica, imageBlobReduce] = await Promise.all([
     import("pica").then((res) => res.default),
     // a wrapper for pica for better API
@@ -347,10 +403,6 @@ export const resizeImageFile = async (
     };
   }
 
-  if (!isSupportedImageFile(file)) {
-    throw new Error("Error: unsupported file type", { cause: "UNSUPPORTED" });
-  }
-
   return new File(
     [await reduce.toBlob(file, { max: opts.maxWidthOrHeight, alpha: true })],
     file.name,
diff --git a/packages/excalidraw/index.tsx b/packages/excalidraw/index.tsx
index c935f31468..64cedb3a8e 100644
--- a/packages/excalidraw/index.tsx
+++ b/packages/excalidraw/index.tsx
@@ -6,7 +6,11 @@ import React, {
   useState,
 } from "react";
 
-import { DEFAULT_UI_OPTIONS, isShallowEqual } from "@excalidraw/common";
+import {
+  DEFAULT_IMAGE_OPTIONS,
+  DEFAULT_UI_OPTIONS,
+  isShallowEqual,
+} from "@excalidraw/common";
 
 import App, {
   ExcalidrawAPIContext,
@@ -98,6 +102,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
     aiEnabled,
     showDeprecatedFonts,
     renderScrollbars,
+    imageOptions,
   } = props;
 
   const canvasActions = props.UIOptions?.canvasActions;
@@ -128,6 +133,13 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
     UIOptions.canvasActions.toggleTheme = true;
   }
 
+  const normalizedImageOptions: AppProps["imageOptions"] = {
+    maxFileSizeBytes:
+      imageOptions?.maxFileSizeBytes ?? DEFAULT_IMAGE_OPTIONS.maxFileSizeBytes,
+    maxWidthOrHeight:
+      imageOptions?.maxWidthOrHeight ?? DEFAULT_IMAGE_OPTIONS.maxWidthOrHeight,
+  };
+
   const setExcalidrawAPI = useContext(ExcalidrawAPISetContext);
 
   const onExcalidrawAPIRef = useRef(onExcalidrawAPI);
@@ -208,6 +220,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
           aiEnabled={aiEnabled !== false}
           showDeprecatedFonts={showDeprecatedFonts}
           renderScrollbars={renderScrollbars}
+          imageOptions={normalizedImageOptions}
         >
           {children}
         </App>
@@ -225,11 +238,13 @@ const areEqual = (prevProps: ExcalidrawProps, nextProps: ExcalidrawProps) => {
   const {
     initialData: prevInitialData,
     UIOptions: prevUIOptions = {},
+    imageOptions: prevImageOptions,
     ...prev
   } = prevProps;
   const {
     initialData: nextInitialData,
     UIOptions: nextUIOptions = {},
+    imageOptions: nextImageOptions,
     ...next
   } = nextProps;
 
@@ -273,7 +288,17 @@ const areEqual = (prevProps: ExcalidrawProps, nextProps: ExcalidrawProps) => {
     return prevUIOptions[key] === nextUIOptions[key];
   });
 
-  return isUIOptionsSame && isShallowEqual(prev, next);
+  const isImageOptionsSame =
+    (prevImageOptions?.maxWidthOrHeight ??
+      DEFAULT_IMAGE_OPTIONS.maxWidthOrHeight) ===
+      (nextImageOptions?.maxWidthOrHeight ??
+        DEFAULT_IMAGE_OPTIONS.maxWidthOrHeight) &&
+    (prevImageOptions?.maxFileSizeBytes ??
+      DEFAULT_IMAGE_OPTIONS.maxFileSizeBytes) ===
+      (nextImageOptions?.maxFileSizeBytes ??
+        DEFAULT_IMAGE_OPTIONS.maxFileSizeBytes);
+
+  return isUIOptionsSame && isImageOptionsSame && isShallowEqual(prev, next);
 };
 
 export const Excalidraw = React.memo(ExcalidrawBase, areEqual);
diff --git a/packages/excalidraw/tests/image.test.tsx b/packages/excalidraw/tests/image.test.tsx
index 23b4fda6fc..0c94791856 100644
--- a/packages/excalidraw/tests/image.test.tsx
+++ b/packages/excalidraw/tests/image.test.tsx
@@ -1,4 +1,4 @@
-import { randomId, reseed } from "@excalidraw/common";
+import { MIME_TYPES, randomId, reseed } from "@excalidraw/common";
 
 import type { FileId } from "@excalidraw/element/types";
 
@@ -17,18 +17,41 @@ import {
 } from "./fixtures/constants";
 import { INITIALIZED_IMAGE_PROPS } from "./helpers/constants";
 
+import type { ExcalidrawProps } from "../types";
+
 const { h } = window;
 
 export const setupImageTest = async (
   sizes: { width: number; height: number }[],
+  props?: ExcalidrawProps,
 ) => {
-  await render(<Excalidraw autoFocus={true} handleKeyboardGlobally={true} />);
+  await render(
+    <Excalidraw autoFocus={true} handleKeyboardGlobally={true} {...props} />,
+  );
 
   h.state.height = 1000;
 
   mockMultipleHTMLImageElements(sizes.map((size) => [size.width, size.height]));
 };
 
+describe("resizeImageFile", () => {
+  beforeEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("returns the original file when it already fits the max dimensions", async () => {
+    mockMultipleHTMLImageElements([[100, 100]]);
+
+    const imageFile = new File([new Uint8Array([1, 2, 3])], "image.png", {
+      type: MIME_TYPES.png,
+    });
+
+    await expect(
+      blobModule.resizeImageFile(imageFile, { maxWidthOrHeight: 200 }),
+    ).resolves.toBe(imageFile);
+  });
+});
+
 describe("image insertion", () => {
   beforeEach(() => {
     vi.clearAllMocks();
@@ -112,4 +135,42 @@ describe("image insertion", () => {
 
     await assert();
   });
+
+  it("passes host-configured max image dimensions to the resize helper", async () => {
+    await setupImageTest([DEER_IMAGE_DIMENSIONS], {
+      imageOptions: { maxWidthOrHeight: 2048 },
+    });
+
+    await API.drop([
+      { kind: "file", file: await API.loadFile("./fixtures/deer.png") },
+    ]);
+
+    await waitFor(() => {
+      expect(blobModule.resizeImageFile).toHaveBeenCalledWith(
+        expect.any(File),
+        { maxWidthOrHeight: 2048 },
+      );
+    });
+  });
+
+  it("enforces host-configured max image file size", async () => {
+    await setupImageTest([DEER_IMAGE_DIMENSIONS], {
+      imageOptions: { maxFileSizeBytes: 1024 * 1024 },
+    });
+
+    await API.drop([
+      {
+        kind: "file",
+        file: new File([new Uint8Array(2 * 1024 * 1024)], "image.png", {
+          type: MIME_TYPES.png,
+        }),
+      },
+    ]);
+
+    await waitFor(() => {
+      expect(h.state.errorMessage).toBe(
+        "File is too big. Maximum allowed size is 1MB.",
+      );
+    });
+  });
 });
diff --git a/packages/excalidraw/types.ts b/packages/excalidraw/types.ts
index c4fb15243b..b40ec1b4e1 100644
--- a/packages/excalidraw/types.ts
+++ b/packages/excalidraw/types.ts
@@ -645,6 +645,10 @@ export interface ExcalidrawProps {
     appState: UIAppState,
   ) => JSX.Element;
   UIOptions?: Partial<UIOptions>;
+  /**
+   * dimensions and size constraints for inserted images
+   */
+  imageOptions?: ImageOptions;
   detectScroll?: boolean;
   handleKeyboardGlobally?: boolean;
   onLibraryChange?: (libraryItems: LibraryItems) => void | Promise<any>;
@@ -731,6 +735,11 @@ export type ExportOpts = {
   ) => JSX.Element;
 };
 
+export type ImageOptions = Partial<{
+  maxWidthOrHeight: number;
+  maxFileSizeBytes: number;
+}>;
+
 // NOTE at the moment, if action name corresponds to canvasAction prop, its
 // truthiness value will determine whether the action is rendered or not
 // (see manager renderAction). We also override canvasAction values in
@@ -772,6 +781,7 @@ export type AppProps = Merge<
         canvasActions: Required<CanvasActions> & { export: ExportOpts };
       }
     >;
+    imageOptions: Required<ImageOptions>;
     detectScroll: boolean;
     handleKeyboardGlobally: boolean;
     isCollaborating: boolean;