@excalidraw/excalidraw 0.18.0-6fc8502 → 0.18.0-a18b139

package/dist/dev/index.js

@@ -89,8 +89,8 @@ import {
   STATS_PANELS,
   STROKE_WIDTH,
   SVGStringToFile,
+  SVG_DOCUMENT_PREAMBLE,
   SVG_NS,
-  Scene_default,
   ShapeCache,
   TAP_TWICE_TIMEOUT,
   TEXT_ALIGN,
@@ -171,7 +171,6 @@ import {
   findLastIndex,
   fixBindingsAfterDeletion,
   fixDuplicatedBindingsAfterDuplication,
-  fixReversedBindings,
   focusNearestParent,
   frameAndChildrenSelectedTogether,
   generateIdFromFile,
@@ -248,6 +247,7 @@ import {
   getSelectedGroupIdForElement,
   getSelectedGroupIds,
   getSelectionBoxShape,
+  getSelectionStateForElements,
   getShortcutKey,
   getSizeFromPoints,
   getSuggestedBindingsForArrows,
@@ -328,6 +328,7 @@ import {
   isPointHittingLinkIcon,
   isPointInShape,
   isPromiseLike,
+  isReadonlyArray,
   isSafari,
   isSelectedViaGroup,
   isShallowEqual,
@@ -433,6 +434,7 @@ import {
   shouldMaintainAspectRatio,
   shouldResizeFromCenter,
   shouldRotateWithDiscreteAngle,
+  shouldTestInside,
   supportsResizeObserver,
   suppportsHorizontalAlign,
   syncInvalidIndices,
@@ -460,10 +462,10 @@ import {
   viewportCoordsToSceneCoords,
   wrapEvent,
   wrapText
-} from "./chunk-KYBDXI6F.js";
+} from "./chunk-U3G3LY5D.js";
 import {
   define_import_meta_env_default
-} from "./chunk-H7XJ5UVD.js";
+} from "./chunk-MJMGTOVG.js";
 import {
   en_default
 } from "./chunk-X3RYHLJU.js";
@@ -481,7 +483,7 @@ import React45, { useEffect as useEffect45 } from "react";
 
 // components/App.tsx
 import clsx56 from "clsx";
-import throttle3 from "lodash.throttle";
+import throttle4 from "lodash.throttle";
 import React43, { useContext as useContext3 } from "react";
 import { flushSync as flushSync2 } from "react-dom";
 import rough from "roughjs/bin/rough";
@@ -573,8 +575,8 @@ var normalizeElementOrder = (elements) => {
 };
 
 // ../element/src/duplicate.ts
-var duplicateElement = (editingGroupId, groupIdMapForOperation, element, overrides, randomizeSeed) => {
-  let copy = deepCopyElement(element);
+var duplicateElement = (editingGroupId, groupIdMapForOperation, element, randomizeSeed) => {
+  const copy = deepCopyElement(element);
   if (isTestEnv()) {
     __test__defineOrigId(copy, element.id);
   }
@@ -594,9 +596,6 @@ var duplicateElement = (editingGroupId, groupIdMapForOperation, element, overrid
       return groupIdMapForOperation.get(groupId);
     }
   );
-  if (overrides) {
-    copy = Object.assign(copy, overrides);
-  }
   return copy;
 };
 var duplicateElements = (opts) => {
@@ -605,13 +604,13 @@ var duplicateElements = (opts) => {
     editingGroupId: null,
     selectedGroupIds: {}
   };
-  const reverseOrder = opts.type === "in-place" ? opts.reverseOrder : false;
   const processedIds = /* @__PURE__ */ new Map();
   const groupIdMap = /* @__PURE__ */ new Map();
-  const newElements = [];
-  const oldElements = [];
-  const oldIdToDuplicatedId = /* @__PURE__ */ new Map();
-  const duplicatedElementsMap = /* @__PURE__ */ new Map();
+  const duplicatedElements = [];
+  const origElements = [];
+  const origIdToDuplicateId = /* @__PURE__ */ new Map();
+  const duplicateIdToOrigElement = /* @__PURE__ */ new Map();
+  const duplicateElementsMap = /* @__PURE__ */ new Map();
   const elementsMap = arrayToMap(elements);
   const _idsOfElementsToDuplicate = opts.type === "in-place" ? opts.idsOfElementsToDuplicate : new Map(elements.map((el) => [el.id, el]));
   if (opts.type === "in-place") {
@@ -620,7 +619,7 @@ var duplicateElements = (opts) => {
     }
   }
   elements = normalizeElementOrder(elements);
-  const elementsWithClones = elements.slice();
+  const elementsWithDuplicates = elements.slice();
   const copyElements = (element) => {
     const elements2 = castArray(element);
     const _newElements = elements2.reduce(
@@ -633,14 +632,14 @@ var duplicateElements = (opts) => {
           appState.editingGroupId,
           groupIdMap,
           element2,
-          opts.overrides?.(element2),
           opts.randomizeSeed
         );
         processedIds.set(newElement2.id, true);
-        duplicatedElementsMap.set(newElement2.id, newElement2);
-        oldIdToDuplicatedId.set(element2.id, newElement2.id);
-        oldElements.push(element2);
-        newElements.push(newElement2);
+        duplicateElementsMap.set(newElement2.id, newElement2);
+        origIdToDuplicateId.set(element2.id, newElement2.id);
+        duplicateIdToOrigElement.set(newElement2.id, element2);
+        origElements.push(element2);
+        duplicatedElements.push(newElement2);
         acc.push(newElement2);
         return acc;
       },
@@ -652,19 +651,11 @@ var duplicateElements = (opts) => {
     if (!elements2) {
       return;
     }
-    if (reverseOrder && index < 1) {
-      elementsWithClones.unshift(...castArray(elements2));
+    if (index > elementsWithDuplicates.length - 1) {
+      elementsWithDuplicates.push(...castArray(elements2));
       return;
     }
-    if (!reverseOrder && index > elementsWithClones.length - 1) {
-      elementsWithClones.push(...castArray(elements2));
-      return;
-    }
-    elementsWithClones.splice(
-      index + (reverseOrder ? 0 : 1),
-      0,
-      ...castArray(elements2)
-    );
+    elementsWithDuplicates.splice(index + 1, 0, ...castArray(elements2));
   };
   const frameIdsToDuplicate = new Set(
     elements.filter(
@@ -683,9 +674,7 @@ var duplicateElements = (opts) => {
       const groupElements = getElementsInGroup(elements, groupId).flatMap(
         (element2) => isFrameLikeElement(element2) ? [...getFrameChildren(elements, element2.id), element2] : [element2]
       );
-      const targetIndex = reverseOrder ? elementsWithClones.findIndex((el) => {
-        return el.groupIds?.includes(groupId);
-      }) : findLastIndex(elementsWithClones, (el) => {
+      const targetIndex = findLastIndex(elementsWithDuplicates, (el) => {
         return el.groupIds?.includes(groupId);
       });
       insertBeforeOrAfterIndex(targetIndex, copyElements(groupElements));
@@ -697,7 +686,7 @@ var duplicateElements = (opts) => {
     if (isFrameLikeElement(element)) {
       const frameId = element.id;
       const frameChildren = getFrameChildren(elements, frameId);
-      const targetIndex = findLastIndex(elementsWithClones, (el) => {
+      const targetIndex = findLastIndex(elementsWithDuplicates, (el) => {
         return el.frameId === frameId || el.id === frameId;
       });
       insertBeforeOrAfterIndex(
@@ -708,12 +697,12 @@ var duplicateElements = (opts) => {
     }
     if (hasBoundTextElement(element)) {
       const boundTextElement = getBoundTextElement(element, elementsMap);
-      const targetIndex = findLastIndex(elementsWithClones, (el) => {
+      const targetIndex = findLastIndex(elementsWithDuplicates, (el) => {
         return el.id === element.id || "containerId" in el && el.containerId === element.id;
       });
       if (boundTextElement) {
         insertBeforeOrAfterIndex(
-          targetIndex + (reverseOrder ? -1 : 0),
+          targetIndex,
           copyElements([element, boundTextElement])
         );
       } else {
@@ -723,7 +712,7 @@ var duplicateElements = (opts) => {
     }
     if (isBoundToContainer(element)) {
       const container = getContainerElement(element, elementsMap);
-      const targetIndex = findLastIndex(elementsWithClones, (el) => {
+      const targetIndex = findLastIndex(elementsWithDuplicates, (el) => {
         return el.id === element.id || el.id === container?.id;
       });
       if (container) {
@@ -737,30 +726,40 @@ var duplicateElements = (opts) => {
       continue;
     }
     insertBeforeOrAfterIndex(
-      findLastIndex(elementsWithClones, (el) => el.id === element.id),
+      findLastIndex(elementsWithDuplicates, (el) => el.id === element.id),
       copyElements(element)
     );
   }
   fixDuplicatedBindingsAfterDuplication(
-    newElements,
-    oldIdToDuplicatedId,
-    duplicatedElementsMap
-  );
-  if (reverseOrder) {
-    fixReversedBindings(
-      _idsOfElementsToDuplicate,
-      elementsWithClones,
-      oldIdToDuplicatedId
-    );
-  }
+    duplicatedElements,
+    origIdToDuplicateId,
+    duplicateElementsMap
+  );
   bindElementsToFramesAfterDuplication(
-    elementsWithClones,
-    oldElements,
-    oldIdToDuplicatedId
+    elementsWithDuplicates,
+    origElements,
+    origIdToDuplicateId
   );
+  if (opts.overrides) {
+    for (const duplicateElement2 of duplicatedElements) {
+      const origElement = duplicateIdToOrigElement.get(duplicateElement2.id);
+      if (origElement) {
+        Object.assign(
+          duplicateElement2,
+          opts.overrides({
+            duplicateElement: duplicateElement2,
+            origElement,
+            origIdToDuplicateId
+          })
+        );
+      }
+    }
+  }
   return {
-    newElements,
-    elementsWithClones
+    duplicatedElements,
+    duplicateElementsMap,
+    elementsWithDuplicates,
+    origIdToDuplicateId
   };
 };
 var _deepCopyElement = (val, depth = 0) => {
@@ -1139,7 +1138,8 @@ var getOffsets = (element, linkedNodes, direction) => {
     y
   };
 };
-var addNewNode = (element, elementsMap, appState, direction) => {
+var addNewNode = (element, appState, direction, scene) => {
+  const elementsMap = scene.getNonDeletedElementsMap();
   const successors = getSuccessors(element, elementsMap, direction);
   const predeccessors = getPredecessors(element, elementsMap, direction);
   const offsets = getOffsets(
@@ -1170,16 +1170,16 @@ var addNewNode = (element, elementsMap, appState, direction) => {
   const bindingArrow = createBindingArrow(
     element,
     nextNode,
-    elementsMap,
     direction,
-    appState
+    appState,
+    scene
   );
   return {
     nextNode,
     bindingArrow
   };
 };
-var addNewNodes = (startNode, elementsMap, appState, direction, numberOfNodes) => {
+var addNewNodes = (startNode, appState, direction, scene, numberOfNodes) => {
   const newNodes = [];
   for (let i = 0; i < numberOfNodes; i++) {
     let nextX;
@@ -1228,16 +1228,16 @@ var addNewNodes = (startNode, elementsMap, appState, direction, numberOfNodes) =
     const bindingArrow = createBindingArrow(
       startNode,
       nextNode,
-      elementsMap,
       direction,
-      appState
+      appState,
+      scene
     );
     newNodes.push(nextNode);
     newNodes.push(bindingArrow);
   }
   return newNodes;
 };
-var createBindingArrow = (startBindingElement, endBindingElement, elementsMap, direction, appState) => {
+var createBindingArrow = (startBindingElement, endBindingElement, direction, appState, scene) => {
   let startX;
   let startY;
   const PADDING = 6;
@@ -1301,18 +1301,9 @@ var createBindingArrow = (startBindingElement, endBindingElement, elementsMap, d
     points: [pointFrom(0, 0), pointFrom(endX, endY)],
     elbowed: true
   });
-  bindLinearElement(
-    bindingArrow,
-    startBindingElement,
-    "start",
-    elementsMap
-  );
-  bindLinearElement(
-    bindingArrow,
-    endBindingElement,
-    "end",
-    elementsMap
-  );
+  const elementsMap = scene.getNonDeletedElementsMap();
+  bindLinearElement(bindingArrow, startBindingElement, "start", scene);
+  bindLinearElement(bindingArrow, endBindingElement, "end", scene);
   const changedElements = /* @__PURE__ */ new Map();
   changedElements.set(
     startBindingElement.id,
@@ -1326,7 +1317,7 @@ var createBindingArrow = (startBindingElement, endBindingElement, elementsMap, d
     bindingArrow.id,
     bindingArrow
   );
-  LinearElementEditor.movePoints(bindingArrow, [
+  LinearElementEditor.movePoints(bindingArrow, scene, [
     {
       index: 1,
       point: bindingArrow.points[1]
@@ -1426,13 +1417,14 @@ var FlowChartCreator = class {
     __publicField(this, "direction", "right");
     __publicField(this, "pendingNodes", null);
   }
-  createNodes(startNode, elementsMap, appState, direction) {
+  createNodes(startNode, appState, direction, scene) {
+    const elementsMap = scene.getNonDeletedElementsMap();
     if (direction !== this.direction) {
       const { nextNode, bindingArrow } = addNewNode(
         startNode,
-        elementsMap,
         appState,
-        direction
+        direction,
+        scene
       );
       this.numberOfNodes = 1;
       this.isCreatingChart = true;
@@ -1442,9 +1434,9 @@ var FlowChartCreator = class {
       this.numberOfNodes += 1;
       const newNodes = addNewNodes(
         startNode,
-        elementsMap,
         appState,
         direction,
+        scene,
         this.numberOfNodes
       );
       this.isCreatingChart = true;
@@ -1461,13 +1453,9 @@ var FlowChartCreator = class {
         (node) => elementsAreInFrameBounds([node], frame, elementsMap) || elementOverlapsWithFrame(node, frame, elementsMap)
       )) {
         this.pendingNodes = this.pendingNodes.map(
-          (node) => mutateElement(
-            node,
-            {
-              frameId: startNode.frameId
-            },
-            false
-          )
+          (node) => mutateElement(node, elementsMap, {
+            frameId: startNode.frameId
+          })
         );
       }
     }
@@ -1489,32 +1477,32 @@ var isNodeInFlowchart = (element, elementsMap) => {
 };
 
 // ../element/src/resizeElements.ts
-var transformElements = (originalElements, transformHandleType, selectedElements, elementsMap, scene, shouldRotateWithDiscreteAngle2, shouldResizeFromCenter2, shouldMaintainAspectRatio2, pointerX, pointerY, centerX, centerY) => {
+var transformElements = (originalElements, transformHandleType, selectedElements, scene, shouldRotateWithDiscreteAngle2, shouldResizeFromCenter2, shouldMaintainAspectRatio2, pointerX, pointerY, centerX, centerY) => {
+  const elementsMap = scene.getNonDeletedElementsMap();
   if (selectedElements.length === 1) {
     const [element] = selectedElements;
     if (transformHandleType === "rotation") {
       if (!isElbowArrow(element)) {
         rotateSingleElement(
           element,
-          elementsMap,
           scene,
           pointerX,
           pointerY,
           shouldRotateWithDiscreteAngle2
         );
-        updateBoundElements(element, elementsMap);
+        updateBoundElements(element, scene);
       }
     } else if (isTextElement(element) && transformHandleType) {
       resizeSingleTextElement(
         originalElements,
         element,
-        elementsMap,
+        scene,
         transformHandleType,
         shouldResizeFromCenter2,
         pointerX,
         pointerY
       );
-      updateBoundElements(element, elementsMap);
+      updateBoundElements(element, scene);
       return true;
     } else if (transformHandleType) {
       const elementId = selectedElements[0].id;
@@ -1524,8 +1512,6 @@ var transformElements = (originalElements, transformHandleType, selectedElements
         const { nextWidth, nextHeight } = getNextSingleWidthAndHeightFromPointer(
           latestElement,
           origElement,
-          elementsMap,
-          originalElements,
           transformHandleType,
           pointerX,
           pointerY,
@@ -1539,8 +1525,8 @@ var transformElements = (originalElements, transformHandleType, selectedElements
           nextHeight,
           latestElement,
           origElement,
-          elementsMap,
           originalElements,
+          scene,
           transformHandleType,
           {
             shouldMaintainAspectRatio: shouldMaintainAspectRatio2,
@@ -1555,7 +1541,6 @@ var transformElements = (originalElements, transformHandleType, selectedElements
       rotateMultipleElements(
         originalElements,
         selectedElements,
-        elementsMap,
         scene,
         pointerX,
         pointerY,
@@ -1598,8 +1583,11 @@ var transformElements = (originalElements, transformHandleType, selectedElements
   }
   return false;
 };
-var rotateSingleElement = (element, elementsMap, scene, pointerX, pointerY, shouldRotateWithDiscreteAngle2) => {
-  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
+var rotateSingleElement = (element, scene, pointerX, pointerY, shouldRotateWithDiscreteAngle2) => {
+  const [x1, y1, x2, y2] = getElementAbsoluteCoords(
+    element,
+    scene.getNonDeletedElementsMap()
+  );
   const cx = (x1 + x2) / 2;
   const cy = (y1 + y2) / 2;
   let angle;
@@ -1614,11 +1602,11 @@ var rotateSingleElement = (element, elementsMap, scene, pointerX, pointerY, shou
     angle = normalizeRadians(angle);
   }
   const boundTextElementId = getBoundTextElementId(element);
-  mutateElement(element, { angle });
+  scene.mutateElement(element, { angle });
   if (boundTextElementId) {
     const textElement = scene.getElement(boundTextElementId);
     if (textElement && !isArrowElement(element)) {
-      mutateElement(textElement, { angle });
+      scene.mutateElement(textElement, { angle });
     }
   }
 };
@@ -1647,7 +1635,8 @@ var measureFontSizeFromWidth = (element, elementsMap, nextWidth) => {
     size: nextFontSize
   };
 };
-var resizeSingleTextElement = (originalElements, element, elementsMap, transformHandleType, shouldResizeFromCenter2, pointerX, pointerY) => {
+var resizeSingleTextElement = (originalElements, element, scene, transformHandleType, shouldResizeFromCenter2, pointerX, pointerY) => {
+  const elementsMap = scene.getNonDeletedElementsMap();
   const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(
     element,
     elementsMap
@@ -1736,7 +1725,7 @@ var resizeSingleTextElement = (originalElements, element, elementsMap, transform
       -angle
     );
     const [nextX, nextY] = newTopLeft;
-    mutateElement(element, {
+    scene.mutateElement(element, {
       fontSize: metrics.size,
       width: nextWidth,
       height: nextHeight,
@@ -1833,10 +1822,11 @@ var resizeSingleTextElement = (originalElements, element, elementsMap, transform
       text,
       autoResize: false
     };
-    mutateElement(element, resizedElement);
+    scene.mutateElement(element, resizedElement);
   }
 };
-var rotateMultipleElements = (originalElements, elements, elementsMap, scene, pointerX, pointerY, shouldRotateWithDiscreteAngle2, centerX, centerY) => {
+var rotateMultipleElements = (originalElements, elements, scene, pointerX, pointerY, shouldRotateWithDiscreteAngle2, centerX, centerY) => {
+  const elementsMap = scene.getNonDeletedElementsMap();
   let centerAngle = 5 * Math.PI / 2 + Math.atan2(pointerY - centerY, pointerX - centerX);
   if (shouldRotateWithDiscreteAngle2) {
     centerAngle += SHIFT_LOCKING_ANGLE / 2;
@@ -1853,35 +1843,25 @@ var rotateMultipleElements = (originalElements, elements, elementsMap, scene, po
         pointFrom(centerX, centerY),
         centerAngle + origAngle - element.angle
       );
-      if (isElbowArrow(element)) {
-        mutateElement(element, {
-          points: getArrowLocalFixedPoints(element, elementsMap)
-        });
-      } else {
-        mutateElement(
-          element,
-          {
-            x: element.x + (rotatedCX - cx),
-            y: element.y + (rotatedCY - cy),
-            angle: normalizeRadians(centerAngle + origAngle)
-          },
-          false
-        );
-      }
-      updateBoundElements(element, elementsMap, {
+      const updates = isElbowArrow(element) ? {
+        // Needed to re-route the arrow
+        points: getArrowLocalFixedPoints(element, elementsMap)
+      } : {
+        x: element.x + (rotatedCX - cx),
+        y: element.y + (rotatedCY - cy),
+        angle: normalizeRadians(centerAngle + origAngle)
+      };
+      scene.mutateElement(element, updates);
+      updateBoundElements(element, scene, {
         simultaneouslyUpdated: elements
       });
       const boundText = getBoundTextElement(element, elementsMap);
       if (boundText && !isArrowElement(element)) {
-        mutateElement(
-          boundText,
-          {
-            x: boundText.x + (rotatedCX - cx),
-            y: boundText.y + (rotatedCY - cy),
-            angle: normalizeRadians(centerAngle + origAngle)
-          },
-          false
-        );
+        scene.mutateElement(boundText, {
+          x: boundText.x + (rotatedCX - cx),
+          y: boundText.y + (rotatedCY - cy),
+          angle: normalizeRadians(centerAngle + origAngle)
+        });
       }
     }
   }
@@ -2028,12 +2008,13 @@ var getResizedOrigin = (prevOrigin, prevWidth, prevHeight, newWidth, newHeight,
       };
   }
 };
-var resizeSingleElement = (nextWidth, nextHeight, latestElement, origElement, elementsMap, originalElementsMap, handleDirection, {
+var resizeSingleElement = (nextWidth, nextHeight, latestElement, origElement, originalElementsMap, scene, handleDirection, {
   shouldInformMutation = true,
   shouldMaintainAspectRatio: shouldMaintainAspectRatio2 = false,
   shouldResizeFromCenter: shouldResizeFromCenter2 = false
 } = {}) => {
   let boundTextFont = {};
+  const elementsMap = scene.getNonDeletedElementsMap();
   const boundTextElement = getBoundTextElement(latestElement, elementsMap);
   if (boundTextElement) {
     const stateOfBoundTextElementAtResize = originalElementsMap.get(
@@ -2116,7 +2097,7 @@ var resizeSingleElement = (nextWidth, nextHeight, latestElement, origElement, el
     newOrigin.y = newOrigin.y + nextHeight;
   }
   if ("scale" in latestElement && "scale" in origElement) {
-    mutateElement(latestElement, {
+    scene.mutateElement(latestElement, {
       scale: [
         // defaulting because scaleX/Y can be 0/-0
         (Math.sign(nextWidth) || origElement.scale[0]) * origElement.scale[0],
@@ -2138,25 +2119,28 @@ var resizeSingleElement = (nextWidth, nextHeight, latestElement, origElement, el
       height: Math.abs(nextHeight),
       ...rescaledPoints
     };
-    mutateElement(latestElement, updates, shouldInformMutation);
-    updateBoundElements(latestElement, elementsMap, {
+    scene.mutateElement(latestElement, updates, {
+      informMutation: shouldInformMutation,
+      isDragging: false
+    });
+    updateBoundElements(latestElement, scene, {
       // TODO: confirm with MARK if this actually makes sense
       newSize: { width: nextWidth, height: nextHeight }
     });
     if (boundTextElement && boundTextFont != null) {
-      mutateElement(boundTextElement, {
+      scene.mutateElement(boundTextElement, {
         fontSize: boundTextFont.fontSize
       });
     }
     handleBindTextResize(
       latestElement,
-      elementsMap,
+      scene,
       handleDirection,
       shouldMaintainAspectRatio2
     );
   }
 };
-var getNextSingleWidthAndHeightFromPointer = (latestElement, origElement, elementsMap, originalElementsMap, handleDirection, pointerX, pointerY, {
+var getNextSingleWidthAndHeightFromPointer = (latestElement, origElement, handleDirection, pointerX, pointerY, {
   shouldMaintainAspectRatio: shouldMaintainAspectRatio2 = false,
   shouldResizeFromCenter: shouldResizeFromCenter2 = false
 } = {}) => {
@@ -2507,25 +2491,22 @@ var resizeMultipleElements = (selectedElements, elementsMap, handleDirection, sc
       update: { boundTextFontSize, ...update }
     } of elementsAndUpdates) {
       const { width: width2, height: height2, angle } = update;
-      mutateElement(element, update, false, {
+      scene.mutateElement(element, update, {
+        informMutation: true,
         // needed for the fixed binding point udpate to take effect
         isDragging: true
       });
-      updateBoundElements(element, elementsMap, {
+      updateBoundElements(element, scene, {
         simultaneouslyUpdated: elementsToUpdate,
         newSize: { width: width2, height: height2 }
       });
       const boundTextElement = getBoundTextElement(element, elementsMap);
       if (boundTextElement && boundTextFontSize) {
-        mutateElement(
-          boundTextElement,
-          {
-            fontSize: boundTextFontSize,
-            angle: isLinearElement(element) ? void 0 : angle
-          },
-          false
-        );
-        handleBindTextResize(element, elementsMap, handleDirection, true);
+        scene.mutateElement(boundTextElement, {
+          fontSize: boundTextFontSize,
+          angle: isLinearElement(element) ? void 0 : angle
+        });
+        handleBindTextResize(element, scene, handleDirection, true);
       }
     }
     scene.triggerUpdate();
@@ -2742,16 +2723,21 @@ var dragSelectedElements = (pointerDownState, _selectedElements, offset, scene,
     gridSize
   );
   elementsToUpdate.forEach((element) => {
-    updateElementCoords(pointerDownState, element, adjustedOffset);
+    updateElementCoords(pointerDownState, element, scene, adjustedOffset);
     if (!isArrowElement(element)) {
       const textElement = getBoundTextElement(
         element,
         scene.getNonDeletedElementsMap()
       );
       if (textElement) {
-        updateElementCoords(pointerDownState, textElement, adjustedOffset);
+        updateElementCoords(
+          pointerDownState,
+          textElement,
+          scene,
+          adjustedOffset
+        );
       }
-      updateBoundElements(element, scene.getElementsMapIncludingDeleted(), {
+      updateBoundElements(element, scene, {
         simultaneouslyUpdated: Array.from(elementsToUpdate)
       });
     }
@@ -2779,11 +2765,11 @@ var calculateOffset = (commonBounds, dragOffset, snapOffset, gridSize) => {
     y: nextY - y
   };
 };
-var updateElementCoords = (pointerDownState, element, dragOffset) => {
+var updateElementCoords = (pointerDownState, element, scene, dragOffset) => {
   const originalElement = pointerDownState.originalElements.get(element.id) ?? element;
   const nextX = originalElement.x + dragOffset.x;
   const nextY = originalElement.y + dragOffset.y;
-  mutateElement(element, {
+  scene.mutateElement(element, {
     x: nextX,
     y: nextY
   });
@@ -2804,6 +2790,7 @@ var dragNewElement = ({
   shouldMaintainAspectRatio: shouldMaintainAspectRatio2,
   shouldResizeFromCenter: shouldResizeFromCenter2,
   zoom,
+  scene,
   widthAspectRatio = null,
   originOffset = null,
   informMutation = true
@@ -2867,7 +2854,7 @@ var dragNewElement = ({
         initialHeight: height
       };
     }
-    mutateElement(
+    scene.mutateElement(
       newElement2,
       {
         x: newX + (originOffset?.x ?? 0),
@@ -2877,10 +2864,298 @@ var dragNewElement = ({
         ...textAutoResize,
         ...imageInitialDimension
       },
-      informMutation
+      { informMutation, isDragging: false }
+    );
+  }
+};
+
+// ../element/src/Scene.ts
+import throttle from "lodash.throttle";
+var getNonDeletedElements2 = (allElements) => {
+  const elementsMap = /* @__PURE__ */ new Map();
+  const elements = [];
+  for (const element of allElements) {
+    if (!element.isDeleted) {
+      elements.push(element);
+      elementsMap.set(
+        element.id,
+        element
+      );
+    }
+  }
+  return { elementsMap, elements };
+};
+var validateIndicesThrottled = throttle(
+  (elements) => {
+    if (isDevEnv() || isTestEnv() || window?.DEBUG_FRACTIONAL_INDICES) {
+      validateFractionalIndices(elements, {
+        // throw only in dev & test, to remain functional on `DEBUG_FRACTIONAL_INDICES`
+        shouldThrow: isDevEnv() || isTestEnv(),
+        includeBoundTextValidation: true
+      });
+    }
+  },
+  1e3 * 60,
+  { leading: true, trailing: false }
+);
+var hashSelectionOpts = (opts) => {
+  const keys = ["includeBoundTextElement", "includeElementsInFrames"];
+  let hash = "";
+  for (const key of keys) {
+    hash += `${key}:${opts[key] ? "1" : "0"}`;
+  }
+  return hash;
+};
+var Scene = class {
+  constructor(elements = null) {
+    // ---------------------------------------------------------------------------
+    // instance methods/props
+    // ---------------------------------------------------------------------------
+    __publicField(this, "callbacks", /* @__PURE__ */ new Set());
+    __publicField(this, "nonDeletedElements", []);
+    __publicField(this, "nonDeletedElementsMap", toBrandedType(
+      /* @__PURE__ */ new Map()
+    ));
+    // ideally all elements within the scene should be wrapped around with `Ordered` type, but right now there is no real benefit doing so
+    __publicField(this, "elements", []);
+    __publicField(this, "nonDeletedFramesLikes", []);
+    __publicField(this, "frames", []);
+    __publicField(this, "elementsMap", toBrandedType(/* @__PURE__ */ new Map()));
+    __publicField(this, "selectedElementsCache", {
+      selectedElementIds: null,
+      elements: null,
+      cache: /* @__PURE__ */ new Map()
+    });
+    /**
+     * Random integer regenerated each scene update.
+     *
+     * Does not relate to elements versions, it's only a renderer
+     * cache-invalidation nonce at the moment.
+     */
+    __publicField(this, "sceneNonce");
+    __publicField(this, "insertElement", (element) => {
+      const index = element.frameId ? this.getElementIndex(element.frameId) : this.elements.length;
+      this.insertElementAtIndex(element, index);
+    });
+    __publicField(this, "insertElements", (elements) => {
+      if (!elements.length) {
+        return;
+      }
+      const index = elements[0]?.frameId ? this.getElementIndex(elements[0].frameId) : this.elements.length;
+      this.insertElementsAtIndex(elements, index);
+    });
+    __publicField(this, "getContainerElement", (element) => {
+      if (!element) {
+        return null;
+      }
+      if (element.containerId) {
+        return this.getElement(element.containerId) || null;
+      }
+      return null;
+    });
+    __publicField(this, "getElementsFromId", (id) => {
+      const elementsMap = this.getNonDeletedElementsMap();
+      const el = elementsMap.get(id);
+      if (el) {
+        return [el];
+      }
+      return getElementsInGroup(elementsMap, id);
+    });
+    if (elements) {
+      this.replaceAllElements(elements);
+    }
+  }
+  getSceneNonce() {
+    return this.sceneNonce;
+  }
+  getNonDeletedElementsMap() {
+    return this.nonDeletedElementsMap;
+  }
+  getElementsIncludingDeleted() {
+    return this.elements;
+  }
+  getElementsMapIncludingDeleted() {
+    return this.elementsMap;
+  }
+  getNonDeletedElements() {
+    return this.nonDeletedElements;
+  }
+  getFramesIncludingDeleted() {
+    return this.frames;
+  }
+  getSelectedElements(opts) {
+    const hash = hashSelectionOpts(opts);
+    const elements = opts?.elements || this.nonDeletedElements;
+    if (this.selectedElementsCache.elements === elements && this.selectedElementsCache.selectedElementIds === opts.selectedElementIds) {
+      const cached = this.selectedElementsCache.cache.get(hash);
+      if (cached) {
+        return cached;
+      }
+    } else if (opts?.elements == null) {
+      this.selectedElementsCache.cache.clear();
+    }
+    const selectedElements = getSelectedElements(
+      elements,
+      { selectedElementIds: opts.selectedElementIds },
+      opts
     );
+    if (opts?.elements == null) {
+      this.selectedElementsCache.selectedElementIds = opts.selectedElementIds;
+      this.selectedElementsCache.elements = this.nonDeletedElements;
+      this.selectedElementsCache.cache.set(hash, selectedElements);
+    }
+    return selectedElements;
+  }
+  getNonDeletedFramesLikes() {
+    return this.nonDeletedFramesLikes;
+  }
+  getElement(id) {
+    return this.elementsMap.get(id) || null;
+  }
+  getNonDeletedElement(id) {
+    const element = this.getElement(id);
+    if (element && isNonDeletedElement(element)) {
+      return element;
+    }
+    return null;
+  }
+  /**
+   * A utility method to help with updating all scene elements, with the added
+   * performance optimization of not renewing the array if no change is made.
+   *
+   * Maps all current excalidraw elements, invoking the callback for each
+   * element. The callback should either return a new mapped element, or the
+   * original element if no changes are made. If no changes are made to any
+   * element, this results in a no-op. Otherwise, the newly mapped elements
+   * are set as the next scene's elements.
+   *
+   * @returns whether a change was made
+   */
+  mapElements(iteratee) {
+    let didChange = false;
+    const newElements = this.elements.map((element) => {
+      const nextElement = iteratee(element);
+      if (nextElement !== element) {
+        didChange = true;
+      }
+      return nextElement;
+    });
+    if (didChange) {
+      this.replaceAllElements(newElements);
+    }
+    return didChange;
+  }
+  replaceAllElements(nextElements) {
+    if (!isReadonlyArray(nextElements)) {
+      nextElements = orderByFractionalIndex(
+        Array.from(nextElements.values())
+      );
+    }
+    const nextFrameLikes = [];
+    validateIndicesThrottled(nextElements);
+    this.elements = syncInvalidIndices(nextElements);
+    this.elementsMap.clear();
+    this.elements.forEach((element) => {
+      if (isFrameLikeElement(element)) {
+        nextFrameLikes.push(element);
+      }
+      this.elementsMap.set(element.id, element);
+    });
+    const nonDeletedElements = getNonDeletedElements2(this.elements);
+    this.nonDeletedElements = nonDeletedElements.elements;
+    this.nonDeletedElementsMap = nonDeletedElements.elementsMap;
+    this.frames = nextFrameLikes;
+    this.nonDeletedFramesLikes = getNonDeletedElements2(this.frames).elements;
+    this.triggerUpdate();
+  }
+  triggerUpdate() {
+    this.sceneNonce = randomInteger();
+    for (const callback of Array.from(this.callbacks)) {
+      callback();
+    }
+  }
+  onUpdate(cb) {
+    if (this.callbacks.has(cb)) {
+      throw new Error();
+    }
+    this.callbacks.add(cb);
+    return () => {
+      if (!this.callbacks.has(cb)) {
+        throw new Error();
+      }
+      this.callbacks.delete(cb);
+    };
+  }
+  destroy() {
+    this.elements = [];
+    this.nonDeletedElements = [];
+    this.nonDeletedFramesLikes = [];
+    this.frames = [];
+    this.elementsMap.clear();
+    this.selectedElementsCache.selectedElementIds = null;
+    this.selectedElementsCache.elements = null;
+    this.selectedElementsCache.cache.clear();
+    this.callbacks.clear();
+  }
+  insertElementAtIndex(element, index) {
+    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, index) {
+    if (!elements.length) {
+      return;
+    }
+    if (!Number.isFinite(index) || index < 0) {
+      throw new Error(
+        "insertElementAtIndex can only be called with index >= 0"
+      );
+    }
+    const nextElements = [
+      ...this.elements.slice(0, index),
+      ...elements,
+      ...this.elements.slice(index)
+    ];
+    syncMovedIndices(nextElements, arrayToMap(elements));
+    this.replaceAllElements(nextElements);
+  }
+  getElementIndex(elementId) {
+    return this.elements.findIndex((element) => element.id === elementId);
+  }
+  // Mutate an element with passed updates and trigger the component to update. Make sure you
+  // are calling it either from a React event handler or within unstable_batchedUpdates().
+  mutateElement(element, updates, options = {
+    informMutation: true,
+    isDragging: false
+  }) {
+    const elementsMap = this.getNonDeletedElementsMap();
+    const { version: prevVersion } = element;
+    const { version: nextVersion } = mutateElement(
+      element,
+      elementsMap,
+      updates,
+      options
+    );
+    if (
+      // skip if the element is not in the scene (i.e. selection)
+      this.elementsMap.has(element.id) && // skip if the element's version hasn't changed, as mutateElement returned the same element
+      prevVersion !== nextVersion && options.informMutation
+    ) {
+      this.triggerUpdate();
+    }
+    return element;
   }
 };
+var Scene_default = Scene;
 
 // editor-jotai.ts
 import { atom, createStore } from "jotai";
@@ -3333,12 +3608,14 @@ var AppStateChange = class _AppStateChange {
       const selectedLinearElement = selectedLinearElementId && nextElements.has(selectedLinearElementId) ? new LinearElementEditor(
         nextElements.get(
           selectedLinearElementId
-        )
+        ),
+        nextElements
       ) : null;
       const editingLinearElement = editingLinearElementId && nextElements.has(editingLinearElementId) ? new LinearElementEditor(
         nextElements.get(
           editingLinearElementId
-        )
+        ),
+        nextElements
       ) : null;
       const nextAppState = {
         ...appState,
@@ -3757,13 +4034,14 @@ var _ElementsChange = class _ElementsChange {
       return [elements, true];
     }
     try {
-      _ElementsChange.redrawTextBoundingBoxes(nextElements, changedElements);
       nextElements = _ElementsChange.reorderElements(
         nextElements,
         changedElements,
         flags
       );
-      _ElementsChange.redrawBoundArrows(nextElements, changedElements);
+      const tempScene = new Scene_default(nextElements);
+      _ElementsChange.redrawTextBoundingBoxes(tempScene, changedElements);
+      _ElementsChange.redrawBoundArrows(tempScene, changedElements);
     } catch (e) {
       console.error(
         `Couldn't mutate elements after applying elements change`,
@@ -3849,6 +4127,7 @@ var _ElementsChange = class _ElementsChange {
       } else {
         affectedElement = mutateElement(
           nextElement,
+          nextElements,
           updates
         );
       }
@@ -3922,7 +4201,8 @@ var _ElementsChange = class _ElementsChange {
     );
     BindableElement.rebindAffected(nextElements, nextElement(), updater);
   }
-  static redrawTextBoundingBoxes(elements, changed) {
+  static redrawTextBoundingBoxes(scene, changed) {
+    const elements = scene.getNonDeletedElementsMap();
     const boxesToRedraw = /* @__PURE__ */ new Map();
     for (const element of changed.values()) {
       if (isBoundToContainer(element)) {
@@ -3950,13 +4230,13 @@ var _ElementsChange = class _ElementsChange {
       if (container.isDeleted || boundText.isDeleted) {
         continue;
       }
-      redrawTextBoundingBox(boundText, container, elements, false);
+      redrawTextBoundingBox(boundText, container, scene);
     }
   }
-  static redrawBoundArrows(elements, changed) {
+  static redrawBoundArrows(scene, changed) {
     for (const element of changed.values()) {
       if (!element.isDeleted && isBindableElement(element)) {
-        updateBoundElements(element, elements, {
+        updateBoundElements(element, scene, {
           changedElements: changed
         });
       }
@@ -6741,11 +7021,10 @@ var deleteSelectedElements = (elements, appState, app) => {
         el.boundElements.forEach((candidate) => {
           const bound = app.scene.getNonDeletedElementsMap().get(candidate.id);
           if (bound && isElbowArrow(bound)) {
-            mutateElement(bound, {
+            app.scene.mutateElement(bound, {
               startBinding: el.id === bound.startBinding?.elementId ? null : bound.startBinding,
               endBinding: el.id === bound.endBinding?.elementId ? null : bound.endBinding
             });
-            mutateElement(bound, { points: bound.points });
           }
         });
       }
@@ -6875,7 +7154,11 @@ var actionDeleteSelected = register({
           element.points.length - 1
         ) ? null : endBindingElement
       };
-      LinearElementEditor.deletePoints(element, selectedPointsIndices);
+      LinearElementEditor.deletePoints(
+        element,
+        app.scene,
+        selectedPointsIndices
+      );
       return {
         elements,
         appState: {
@@ -7412,7 +7695,7 @@ var actionSelectAll = register({
         ),
         selectedLinearElement: (
           // single linear element selected
-          Object.keys(selectedElementIds).length === 1 && isLinearElement(elements[0]) ? new LinearElementEditor(elements[0]) : null
+          Object.keys(selectedElementIds).length === 1 && isLinearElement(elements[0]) ? new LinearElementEditor(elements[0], arrayToMap(elements)) : null
         )
       },
       captureUpdate: CaptureUpdateAction.IMMEDIATELY
@@ -7436,7 +7719,7 @@ var actionDuplicateSelection = register({
       try {
         const newAppState = LinearElementEditor.duplicateSelectedPoints(
           appState,
-          app.scene.getNonDeletedElementsMap()
+          app.scene
         );
         return {
           elements,
@@ -7447,7 +7730,7 @@ var actionDuplicateSelection = register({
         return false;
       }
     }
-    let { newElements: duplicatedElements, elementsWithClones: nextElements } = duplicateElements({
+    let { duplicatedElements, elementsWithDuplicates } = duplicateElements({
       type: "in-place",
       elements,
       idsOfElementsToDuplicate: arrayToMap(
@@ -7458,38 +7741,35 @@ var actionDuplicateSelection = register({
       ),
       appState,
       randomizeSeed: true,
-      overrides: (element) => ({
-        x: element.x + DEFAULT_GRID_SIZE / 2,
-        y: element.y + DEFAULT_GRID_SIZE / 2
-      }),
-      reverseOrder: false
+      overrides: ({ origElement, origIdToDuplicateId }) => {
+        const duplicateFrameId = origElement.frameId && origIdToDuplicateId.get(origElement.frameId);
+        return {
+          x: origElement.x + DEFAULT_GRID_SIZE / 2,
+          y: origElement.y + DEFAULT_GRID_SIZE / 2,
+          frameId: duplicateFrameId ?? origElement.frameId
+        };
+      }
     });
-    if (app.props.onDuplicate && nextElements) {
-      const mappedElements = app.props.onDuplicate(nextElements, elements);
+    if (app.props.onDuplicate && elementsWithDuplicates) {
+      const mappedElements = app.props.onDuplicate(
+        elementsWithDuplicates,
+        elements
+      );
       if (mappedElements) {
-        nextElements = mappedElements;
+        elementsWithDuplicates = mappedElements;
       }
     }
     return {
-      elements: syncMovedIndices(nextElements, arrayToMap(duplicatedElements)),
+      elements: syncMovedIndices(
+        elementsWithDuplicates,
+        arrayToMap(duplicatedElements)
+      ),
       appState: {
         ...appState,
-        ...updateLinearElementEditors(duplicatedElements),
-        ...selectGroupsForSelectedElements(
-          {
-            editingGroupId: appState.editingGroupId,
-            selectedElementIds: excludeElementsInFramesFromSelection(
-              duplicatedElements
-            ).reduce((acc, element) => {
-              if (!isBoundToContainer(element)) {
-                acc[element.id] = true;
-              }
-              return acc;
-            }, {})
-          },
-          getNonDeletedElements(nextElements),
-          appState,
-          null
+        ...getSelectionStateForElements(
+          duplicatedElements,
+          getNonDeletedElements(elementsWithDuplicates),
+          appState
         )
       },
       captureUpdate: CaptureUpdateAction.IMMEDIATELY
@@ -7510,24 +7790,6 @@ var actionDuplicateSelection = register({
     }
   )
 });
-var updateLinearElementEditors = (clonedElements) => {
-  const linears = clonedElements.filter(isLinearElement);
-  if (linears.length === 1) {
-    const linear = linears[0];
-    const boundElements = linear.boundElements?.map((def) => def.id) ?? [];
-    const onlySingleLinearSelected = clonedElements.every(
-      (el) => el.id === linear.id || boundElements.includes(el.id)
-    );
-    if (onlySingleLinearSelected) {
-      return {
-        selectedLinearElement: new LinearElementEditor(linear)
-      };
-    }
-  }
-  return {
-    selectedLinearElement: null
-  };
-};
 
 // actions/actionProperties.tsx
 import { useEffect as useEffect13, useMemo as useMemo4, useRef as useRef11, useState as useState6 } from "react";
@@ -9782,20 +10044,16 @@ var getFormValue = function(elements, appState, getAttribute, isRelevantElement,
   }
   return ret;
 };
-var offsetElementAfterFontResize = (prevElement, nextElement) => {
+var offsetElementAfterFontResize = (prevElement, nextElement, scene) => {
   if (isBoundToContainer(nextElement) || !nextElement.autoResize) {
     return nextElement;
   }
-  return mutateElement(
-    nextElement,
-    {
-      x: prevElement.textAlign === "left" ? prevElement.x : prevElement.x + (prevElement.width - nextElement.width) / (prevElement.textAlign === "center" ? 2 : 1),
-      // centering vertically is non-standard, but for Excalidraw I think
-      // it makes sense
-      y: prevElement.y + (prevElement.height - nextElement.height) / 2
-    },
-    false
-  );
+  return scene.mutateElement(nextElement, {
+    x: prevElement.textAlign === "left" ? prevElement.x : prevElement.x + (prevElement.width - nextElement.width) / (prevElement.textAlign === "center" ? 2 : 1),
+    // centering vertically is non-standard, but for Excalidraw I think
+    // it makes sense
+    y: prevElement.y + (prevElement.height - nextElement.height) / 2
+  });
 };
 var changeFontSize = (elements, appState, app, getNewFontSize, fallbackValue) => {
   const newFontSizes = /* @__PURE__ */ new Set();
@@ -9812,24 +10070,24 @@ var changeFontSize = (elements, appState, app, getNewFontSize, fallbackValue) =>
         redrawTextBoundingBox(
           newElement2,
           app.scene.getContainerElement(oldElement),
-          app.scene.getNonDeletedElementsMap()
+          app.scene
+        );
+        newElement2 = offsetElementAfterFontResize(
+          oldElement,
+          newElement2,
+          app.scene
         );
-        newElement2 = offsetElementAfterFontResize(oldElement, newElement2);
         return newElement2;
       }
       return oldElement;
     },
     true
   );
-  const updatedElementsMap = arrayToMap(updatedElements);
   getSelectedElements(elements, appState, {
     includeBoundTextElement: true
   }).forEach((element) => {
     if (isTextElement(element)) {
-      updateBoundElements(
-        element,
-        updatedElementsMap
-      );
+      updateBoundElements(element, app.scene);
     }
   });
   return {
@@ -10393,7 +10651,7 @@ var actionChangeFontFamily = register({
               const cachedContainer = cachedElements?.get(oldElement.containerId || "") || {};
               const container = app.scene.getContainerElement(oldElement);
               if (resetContainers && container && cachedContainer) {
-                mutateElement(container, { ...cachedContainer }, false);
+                app.scene.mutateElement(container, { ...cachedContainer });
               }
               if (!skipFontFaceCheck) {
                 uniqueChars = /* @__PURE__ */ new Set([
@@ -10415,12 +10673,7 @@ var actionChangeFontFamily = register({
       const chars = Array.from(uniqueChars.values()).join();
       if (skipFontFaceCheck || window.document.fonts.check(fontString, chars)) {
         for (const [element, container] of elementContainerMapping) {
-          redrawTextBoundingBox(
-            element,
-            container,
-            app.scene.getNonDeletedElementsMap(),
-            false
-          );
+          redrawTextBoundingBox(element, container, app.scene);
         }
       } else {
         window.document.fonts.load(fontString, chars).then((fontFaces) => {
@@ -10431,8 +10684,7 @@ var actionChangeFontFamily = register({
               redrawTextBoundingBox(
                 latestElement,
                 latestContainer,
-                app.scene.getNonDeletedElementsMap(),
-                false
+                app.scene
               );
             }
           }
@@ -10592,7 +10844,7 @@ var actionChangeTextAlign = register({
             redrawTextBoundingBox(
               newElement2,
               app.scene.getContainerElement(oldElement),
-              app.scene.getNonDeletedElementsMap()
+              app.scene
             );
             return newElement2;
           }
@@ -10678,7 +10930,7 @@ var actionChangeVerticalAlign = register({
             redrawTextBoundingBox(
               newElement2,
               app.scene.getContainerElement(oldElement),
-              app.scene.getNonDeletedElementsMap()
+              app.scene
             );
             return newElement2;
           }
@@ -11020,17 +11272,16 @@ var actionChangeArrowType = register({
           newElement2,
           startHoveredElement,
           "start",
-          elementsMap
+          app.scene
         );
-        endHoveredElement && bindLinearElement(newElement2, endHoveredElement, "end", elementsMap);
+        endHoveredElement && bindLinearElement(newElement2, endHoveredElement, "end", app.scene);
         const startBinding = startElement && newElement2.startBinding ? {
           // @ts-ignore TS cannot discern check above
           ...newElement2.startBinding,
           ...calculateFixedPointForElbowArrowBinding(
             newElement2,
             startElement,
-            "start",
-            elementsMap
+            "start"
           )
         } : null;
         const endBinding = endElement && newElement2.endBinding ? {
@@ -11039,8 +11290,7 @@ var actionChangeArrowType = register({
           ...calculateFixedPointForElbowArrowBinding(
             newElement2,
             endElement,
-            "end",
-            elementsMap
+            "end"
           )
         } : null;
         newElement2 = {
@@ -11068,7 +11318,7 @@ var actionChangeArrowType = register({
             newElement2.startBinding.elementId
           );
           if (startElement) {
-            bindLinearElement(newElement2, startElement, "start", elementsMap);
+            bindLinearElement(newElement2, startElement, "start", app.scene);
           }
         }
         if (newElement2.endBinding) {
@@ -11076,7 +11326,7 @@ var actionChangeArrowType = register({
             newElement2.endBinding.elementId
           );
           if (endElement) {
-            bindLinearElement(newElement2, endElement, "end", elementsMap);
+            bindLinearElement(newElement2, endElement, "end", app.scene);
           }
         }
       }
@@ -11091,7 +11341,8 @@ var actionChangeArrowType = register({
       const selected = newElements.find((el) => el.id === selectedId);
       if (selected) {
         newState.selectedLinearElement = new LinearElementEditor(
-          selected
+          selected,
+          arrayToMap(elements)
         );
       }
     }
@@ -11823,7 +12074,6 @@ var actionFinalize = register({
             element,
             startBindingElement,
             endBindingElement,
-            elementsMap,
             scene
           );
         }
@@ -11841,7 +12091,11 @@ var actionFinalize = register({
     let newElements = elements;
     const pendingImageElement = appState.pendingImageElementId && scene.getElement(appState.pendingImageElementId);
     if (pendingImageElement) {
-      mutateElement(pendingImageElement, { isDeleted: true }, false);
+      scene.mutateElement(
+        pendingImageElement,
+        { isDeleted: true },
+        { informMutation: false, isDragging: false }
+      );
     }
     if (window.document.activeElement instanceof HTMLElement) {
       focusContainer();
@@ -11851,7 +12105,7 @@ var actionFinalize = register({
       if (multiPointElement.type !== "freedraw" && appState.lastPointerDownWith !== "touch") {
         const { points, lastCommittedPoint } = multiPointElement;
         if (!lastCommittedPoint || points[points.length - 1] !== lastCommittedPoint) {
-          mutateElement(multiPointElement, {
+          scene.mutateElement(multiPointElement, {
             points: multiPointElement.points.slice(0, -1)
           });
         }
@@ -11866,7 +12120,7 @@ var actionFinalize = register({
         if (isLoop) {
           const linePoints = multiPointElement.points;
           const firstPoint = linePoints[0];
-          mutateElement(multiPointElement, {
+          scene.mutateElement(multiPointElement, {
             points: linePoints.map(
               (p, index) => index === linePoints.length - 1 ? pointFrom(firstPoint[0], firstPoint[1]) : p
             )
@@ -11879,13 +12133,7 @@ var actionFinalize = register({
           -1,
           arrayToMap(elements)
         );
-        maybeBindLinearElement(
-          multiPointElement,
-          appState,
-          { x, y },
-          elementsMap,
-          elements
-        );
+        maybeBindLinearElement(multiPointElement, appState, { x, y }, scene);
       }
     }
     if (!appState.activeTool.locked && appState.activeTool.type !== "freedraw" || !multiPointElement) {
@@ -11922,7 +12170,10 @@ var actionFinalize = register({
           [multiPointElement.id]: true
         } : appState.selectedElementIds,
         // To select the linear element when user has finished mutipoint editing
-        selectedLinearElement: multiPointElement && isLinearElement(multiPointElement) ? new LinearElementEditor(multiPointElement) : appState.selectedLinearElement,
+        selectedLinearElement: multiPointElement && isLinearElement(multiPointElement) ? new LinearElementEditor(
+          multiPointElement,
+          arrayToMap(newElements)
+        ) : appState.selectedLinearElement,
         pendingImageElementId: null
       },
       // TODO: #7348 we should not capture everything, but if we don't, it leads to incosistencies -> revisit
@@ -12469,7 +12720,7 @@ var serializeAsClipboardJSON = ({
     elements: elements.map((element) => {
       if (getContainingFrame(element, elementsMap) && !framesToCopy.has(getContainingFrame(element, elementsMap))) {
         const copiedElement = deepCopyElement(element);
-        mutateElement(copiedElement, {
+        mutateElement(copiedElement, elementsMap, {
           frameId: null
         });
         return copiedElement;
@@ -12772,7 +13023,9 @@ var exportCanvas = async (type, elements, appState, files, {
     if (type === "svg") {
       return fileSave(
         svgPromise.then((svg) => {
-          return new Blob([svg.outerHTML], { type: MIME_TYPES.svg });
+          return new Blob([SVG_DOCUMENT_PREAMBLE + svg.outerHTML], {
+            type: MIME_TYPES.svg
+          });
         }),
         {
           description: "Export to SVG",
@@ -12802,7 +13055,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-NKFINVKH.js").then(
+        (blob2) => import("./data/image-Y366K5SN.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -13219,11 +13472,7 @@ var actionPasteStyles = register({
                 (element2) => isTextElement(newElement2) && element2.id === newElement2.containerId
               ) || null;
             }
-            redrawTextBoundingBox(
-              newElement2,
-              container,
-              app.scene.getNonDeletedElementsMap()
-            );
+            redrawTextBoundingBox(newElement2, container, app.scene);
           }
           if (newElement2.type === "arrow" && isArrowElement(elementStylesToCopyFrom)) {
             newElement2 = newElementWith(newElement2, {
@@ -13952,7 +14201,8 @@ var actionAddToLibrary = register({
 });
 
 // ../element/src/align.ts
-var alignElements = (selectedElements, elementsMap, alignment, scene) => {
+var alignElements = (selectedElements, alignment, scene) => {
+  const elementsMap = scene.getNonDeletedElementsMap();
   const groups = getMaximumGroups(
     selectedElements,
     elementsMap
@@ -13965,11 +14215,11 @@ var alignElements = (selectedElements, elementsMap, alignment, scene) => {
       alignment
     );
     return group.map((element) => {
-      const updatedEle = mutateElement(element, {
+      const updatedEle = scene.mutateElement(element, {
         x: element.x + translation.x,
         y: element.y + translation.y
       });
-      updateBoundElements(element, scene.getNonDeletedElementsMap(), {
+      updateBoundElements(element, scene, {
         simultaneouslyUpdated: group
       });
       return updatedEle;
@@ -14006,13 +14256,7 @@ var alignActionsPredicate = (appState, app) => {
 };
 var alignSelectedElements = (elements, appState, app, alignment) => {
   const selectedElements = app.scene.getSelectedElements(appState);
-  const elementsMap = arrayToMap(elements);
-  const updatedElements = alignElements(
-    selectedElements,
-    elementsMap,
-    alignment,
-    app.scene
-  );
+  const updatedElements = alignElements(selectedElements, alignment, app.scene);
   const updatedElementsMap = arrayToMap(updatedElements);
   return updateFrameMembershipOfSelectedElements(
     elements.map((element) => updatedElementsMap.get(element.id) || element),
@@ -14440,11 +14684,9 @@ var flipElements = (selectedElements, elementsMap, appState, flipDirection, app)
   );
   bindOrUnbindLinearElements(
     selectedElements.filter(isLinearElement),
-    elementsMap,
-    app.scene.getNonDeletedElements(),
-    app.scene,
     isBindingEnabled(appState),
     [],
+    app.scene,
     appState.zoom
   );
   const { elbowArrows, otherElements } = selectedElements.reduce(
@@ -14454,13 +14696,13 @@ var flipElements = (selectedElements, elementsMap, appState, flipDirection, app)
   const { midX: newMidX, midY: newMidY } = getCommonBoundingBox(selectedElements);
   const [diffX, diffY] = [midX - newMidX, midY - newMidY];
   otherElements.forEach(
-    (element) => mutateElement(element, {
+    (element) => app.scene.mutateElement(element, {
       x: element.x + diffX,
       y: element.y + diffY
     })
   );
   elbowArrows.forEach(
-    (element) => mutateElement(element, {
+    (element) => app.scene.mutateElement(element, {
       x: element.x + diffX,
       y: element.y + diffY
     })
@@ -14831,7 +15073,7 @@ var actionUnbindText = register({
           boundTextElement,
           elementsMap
         );
-        mutateElement(boundTextElement, {
+        app.scene.mutateElement(boundTextElement, {
           containerId: null,
           width,
           height,
@@ -14839,7 +15081,7 @@ var actionUnbindText = register({
           x,
           y
         });
-        mutateElement(element, {
+        app.scene.mutateElement(element, {
           boundElements: element.boundElements?.filter(
             (ele) => ele.id !== boundTextElement.id
           ),
@@ -14888,24 +15130,21 @@ var actionBindText = register({
       textElement = selectedElements[1];
       container = selectedElements[0];
     }
-    mutateElement(textElement, {
+    app.scene.mutateElement(textElement, {
       containerId: container.id,
       verticalAlign: VERTICAL_ALIGN.MIDDLE,
       textAlign: TEXT_ALIGN.CENTER,
-      autoResize: true
+      autoResize: true,
+      angle: isArrowElement(container) ? 0 : container?.angle ?? 0
     });
-    mutateElement(container, {
+    app.scene.mutateElement(container, {
       boundElements: (container.boundElements || []).concat({
         type: "text",
         id: textElement.id
       })
     });
     const originalContainerHeight = container.height;
-    redrawTextBoundingBox(
-      textElement,
-      container,
-      app.scene.getNonDeletedElementsMap()
-    );
+    redrawTextBoundingBox(textElement, container, app.scene);
     updateOriginalContainerCache(container.id, originalContainerHeight);
     return {
       elements: pushTextAboveContainer(elements, container, textElement),
@@ -15004,26 +15243,21 @@ var actionWrapTextInContainer = register({
               endBinding = { ...endBinding, elementId: container.id };
             }
             if (startBinding || endBinding) {
-              mutateElement(ele, { startBinding, endBinding }, false);
+              app.scene.mutateElement(ele, {
+                startBinding,
+                endBinding
+              });
             }
           });
         }
-        mutateElement(
-          textElement,
-          {
-            containerId: container.id,
-            verticalAlign: VERTICAL_ALIGN.MIDDLE,
-            boundElements: null,
-            textAlign: TEXT_ALIGN.CENTER,
-            autoResize: true
-          },
-          false
-        );
-        redrawTextBoundingBox(
-          textElement,
-          container,
-          app.scene.getNonDeletedElementsMap()
-        );
+        app.scene.mutateElement(textElement, {
+          containerId: container.id,
+          verticalAlign: VERTICAL_ALIGN.MIDDLE,
+          boundElements: null,
+          textAlign: TEXT_ALIGN.CENTER,
+          autoResize: true
+        });
+        redrawTextBoundingBox(textElement, container, app.scene);
         updatedElements = pushContainerBelowText(
           [...updatedElements, container],
           container,
@@ -15062,12 +15296,13 @@ var IS_HYPERLINK_TOOLTIP_VISIBLE = false;
 var embeddableLinkCache = /* @__PURE__ */ new Map();
 var Hyperlink = ({
   element,
-  elementsMap,
+  scene,
   setAppState,
   onLinkOpen,
   setToast,
   updateEmbedValidationStatus
 }) => {
+  const elementsMap = scene.getNonDeletedElementsMap();
   const appState = useExcalidrawAppState();
   const appProps = useAppProps();
   const device = useDevice();
@@ -15088,7 +15323,7 @@ var Hyperlink = ({
         setAppState({ activeEmbeddable: null });
       }
       if (!link) {
-        mutateElement(element, {
+        scene.mutateElement(element, {
           link: null
         });
         updateEmbedValidationStatus(element, false);
@@ -15099,7 +15334,7 @@ var Hyperlink = ({
           setToast({ message: t("toast.unableToEmbed"), closable: true });
         }
         element.link && embeddableLinkCache.set(element.id, element.link);
-        mutateElement(element, {
+        scene.mutateElement(element, {
           link
         });
         updateEmbedValidationStatus(element, false);
@@ -15114,7 +15349,7 @@ var Hyperlink = ({
         }
         const ar = embedLink ? embedLink.intrinsicSize.w / embedLink.intrinsicSize.h : 1;
         const hasLinkChanged = embeddableLinkCache.get(element.id) !== element.link;
-        mutateElement(element, {
+        scene.mutateElement(element, {
           ...hasLinkChanged ? {
             width: embedLink?.type === "video" ? width > height ? width : height * ar : width,
             height: embedLink?.type === "video" ? width > height ? width / ar : height : height
@@ -15127,10 +15362,11 @@ var Hyperlink = ({
         }
       }
     } else {
-      mutateElement(element, { link });
+      scene.mutateElement(element, { link });
     }
   }, [
     element,
+    scene,
     setToast,
     appProps.validateEmbeddable,
     appState.activeEmbeddable,
@@ -15178,9 +15414,9 @@ var Hyperlink = ({
   }, [appState, element, isEditing, setAppState, elementsMap]);
   const handleRemove = useCallback4(() => {
     trackEvent("hyperlink", "delete");
-    mutateElement(element, { link: null });
+    scene.mutateElement(element, { link: null });
     setAppState({ showHyperlinkPopup: false });
-  }, [setAppState, element]);
+  }, [setAppState, element, scene]);
   const onEdit = () => {
     trackEvent("hyperlink", "edit", "popup-ui");
     setAppState({ showHyperlinkPopup: "editor" });
@@ -16712,7 +16948,7 @@ import {
 } from "react";
 
 // hooks/useScrollPosition.ts
-import throttle from "lodash.throttle";
+import throttle2 from "lodash.throttle";
 import { useEffect as useEffect18 } from "react";
 var scrollPositionAtom = atom(0);
 var useScrollPosition = (elementRef) => {
@@ -16722,7 +16958,7 @@ var useScrollPosition = (elementRef) => {
     if (!element) {
       return;
     }
-    const handleScroll = throttle(() => {
+    const handleScroll = throttle2(() => {
       const { scrollTop } = element;
       setScrollPosition(scrollTop);
     }, 200);
@@ -18142,7 +18378,7 @@ function LibraryMenuItems({
             type: "everything",
             elements: item.elements,
             randomizeSeed: true
-          }).newElements
+          }).duplicatedElements
         };
       });
     },
@@ -19965,7 +20201,7 @@ var actionToggleLinearEditor = register({
       selectedElementIds: appState.selectedElementIds,
       includeBoundTextElement: true
     })[0];
-    const editingLinearElement = appState.editingLinearElement?.elementId === selectedElement.id ? null : new LinearElementEditor(selectedElement);
+    const editingLinearElement = appState.editingLinearElement?.elementId === selectedElement.id ? null : new LinearElementEditor(selectedElement, arrayToMap(elements));
     return {
       appState: {
         ...appState,
@@ -20201,10 +20437,8 @@ var actionWrapSelectionInFrame = register({
   },
   perform: (elements, appState, _, app) => {
     const selectedElements = getSelectedElements(elements, appState);
-    const [x1, y1, x2, y2] = getCommonBounds(
-      selectedElements,
-      app.scene.getNonDeletedElementsMap()
-    );
+    const elementsMap = app.scene.getNonDeletedElementsMap();
+    const [x1, y1, x2, y2] = getCommonBounds(selectedElements, elementsMap);
     const PADDING = 16;
     const frame = newFrameElement({
       x: x1 - PADDING,
@@ -20219,13 +20453,9 @@ var actionWrapSelectionInFrame = register({
       );
       for (const elementInGroup of elementsInGroup) {
         const index = elementInGroup.groupIds.indexOf(appState.editingGroupId);
-        mutateElement(
-          elementInGroup,
-          {
-            groupIds: elementInGroup.groupIds.slice(0, index)
-          },
-          false
-        );
+        mutateElement(elementInGroup, elementsMap, {
+          groupIds: elementInGroup.groupIds.slice(0, index)
+        });
       }
     }
     const nextElements = addElementsToFrame(
@@ -21707,7 +21937,7 @@ var DEFAULT_LINEAR_ELEMENT_PROPS = {
   height: 0
 };
 var DEFAULT_DIMENSION = 100;
-var bindTextToContainer = (container, textProps, elementsMap) => {
+var bindTextToContainer = (container, textProps, scene) => {
   const textElement = newTextElement({
     x: 0,
     y: 0,
@@ -21723,10 +21953,10 @@ var bindTextToContainer = (container, textProps, elementsMap) => {
       id: textElement.id
     })
   });
-  redrawTextBoundingBox(textElement, container, elementsMap);
+  redrawTextBoundingBox(textElement, container, scene);
   return [container, textElement];
 };
-var bindLinearElementToElement = (linearElement, start2, end, elementStore, elementsMap) => {
+var bindLinearElementToElement = (linearElement, start2, end, elementStore, scene) => {
   let startBoundElement;
   let endBoundElement;
   Object.assign(linearElement, {
@@ -21800,7 +22030,7 @@ var bindLinearElementToElement = (linearElement, start2, end, elementStore, elem
         linearElement,
         startBoundElement,
         "start",
-        elementsMap
+        scene
       );
     }
   }
@@ -21870,7 +22100,7 @@ var bindLinearElementToElement = (linearElement, start2, end, elementStore, elem
         linearElement,
         endBoundElement,
         "end",
-        elementsMap
+        scene
       );
     }
   }
@@ -22061,6 +22291,7 @@ var convertToExcalidrawElements = (elementsSkeleton, opts) => {
     }
   }
   const elementsMap = elementStore.getElementsMap();
+  const scene = new Scene_default(elementsMap);
   for (const [id, element] of elementsWithIds) {
     const excalidrawElement = elementStore.getElement(id);
     switch (element.type) {
@@ -22072,7 +22303,7 @@ var convertToExcalidrawElements = (elementsSkeleton, opts) => {
           let [container, text] = bindTextToContainer(
             excalidrawElement,
             element?.label,
-            elementsMap
+            scene
           );
           elementStore.add(container);
           elementStore.add(text);
@@ -22096,7 +22327,7 @@ var convertToExcalidrawElements = (elementsSkeleton, opts) => {
               originalStart,
               originalEnd,
               elementStore,
-              elementsMap
+              scene
             );
             container = linearElement;
             elementStore.add(linearElement);
@@ -22120,7 +22351,7 @@ var convertToExcalidrawElements = (elementsSkeleton, opts) => {
                 start2,
                 end,
                 elementStore,
-                elementsMap
+                scene
               );
               elementStore.add(linearElement);
               elementStore.add(startBoundElement);
@@ -22327,7 +22558,7 @@ var SCROLLBAR_MARGIN = 4;
 var SCROLLBAR_WIDTH = 6;
 var SCROLLBAR_COLOR = "rgba(0,0,0,0.3)";
 var getScrollBars = (elements, viewportWidth, viewportHeight, appState) => {
-  if (!elements.length) {
+  if (!elements.size) {
     return {
       horizontal: null,
       vertical: null
@@ -22336,8 +22567,6 @@ var getScrollBars = (elements, viewportWidth, viewportHeight, appState) => {
   const [elementsMinX, elementsMinY, elementsMaxX, elementsMaxY] = getCommonBounds(elements);
   const viewportWidthWithZoom = viewportWidth / appState.zoom.value;
   const viewportHeightWithZoom = viewportHeight / appState.zoom.value;
-  const viewportWidthDiff = viewportWidth - viewportWidthWithZoom;
-  const viewportHeightDiff = viewportHeight - viewportHeightWithZoom;
   const safeArea = {
     top: parseInt(getGlobalCSSVariable("sat")) || 0,
     bottom: parseInt(getGlobalCSSVariable("sab")) || 0,
@@ -22345,26 +22574,38 @@ var getScrollBars = (elements, viewportWidth, viewportHeight, appState) => {
     right: parseInt(getGlobalCSSVariable("sar")) || 0
   };
   const isRTL = getLanguage().rtl;
-  const viewportMinX = -appState.scrollX + viewportWidthDiff / 2 + safeArea.left;
-  const viewportMinY = -appState.scrollY + viewportHeightDiff / 2 + safeArea.top;
+  const viewportMinX = -appState.scrollX + safeArea.left;
+  const viewportMinY = -appState.scrollY + safeArea.top;
   const viewportMaxX = viewportMinX + viewportWidthWithZoom - safeArea.right;
   const viewportMaxY = viewportMinY + viewportHeightWithZoom - safeArea.bottom;
   const sceneMinX = Math.min(elementsMinX, viewportMinX);
   const sceneMinY = Math.min(elementsMinY, viewportMinY);
   const sceneMaxX = Math.max(elementsMaxX, viewportMaxX);
   const sceneMaxY = Math.max(elementsMaxY, viewportMaxY);
+  const sceneWidth = elementsMaxX - elementsMinX;
+  const sceneHeight = elementsMaxY - elementsMinY;
+  const extendedSceneWidth = sceneMaxX - sceneMinX;
+  const extendedSceneHeight = sceneMaxY - sceneMinY;
+  const scrollWidthOffset = Math.max(SCROLLBAR_MARGIN * 2, safeArea.left + safeArea.right) + SCROLLBAR_WIDTH * 2;
+  const scrollbarWidth = viewportWidth * (viewportWidthWithZoom / extendedSceneWidth) - scrollWidthOffset;
+  const scrollbarHeightOffset = Math.max(SCROLLBAR_MARGIN * 2, safeArea.top + safeArea.bottom) + SCROLLBAR_WIDTH * 2;
+  const scrollbarHeight = viewportHeight * (viewportHeightWithZoom / extendedSceneHeight) - scrollbarHeightOffset;
+  const horizontalDeltaMultiplier = extendedSceneWidth > sceneWidth ? extendedSceneWidth * appState.zoom.value / (scrollbarWidth + scrollWidthOffset) : viewportWidth / (scrollbarWidth + scrollWidthOffset);
+  const verticalDeltaMultiplier = extendedSceneHeight > sceneHeight ? extendedSceneHeight * appState.zoom.value / (scrollbarHeight + scrollbarHeightOffset) : viewportHeight / (scrollbarHeight + scrollbarHeightOffset);
   return {
     horizontal: viewportMinX === sceneMinX && viewportMaxX === sceneMaxX ? null : {
-      x: Math.max(safeArea.left, SCROLLBAR_MARGIN) + (viewportMinX - sceneMinX) / (sceneMaxX - sceneMinX) * viewportWidth,
+      x: Math.max(safeArea.left, SCROLLBAR_MARGIN) + SCROLLBAR_WIDTH + (viewportMinX - sceneMinX) / extendedSceneWidth * viewportWidth,
       y: viewportHeight - SCROLLBAR_WIDTH - Math.max(SCROLLBAR_MARGIN, safeArea.bottom),
-      width: (viewportMaxX - viewportMinX) / (sceneMaxX - sceneMinX) * viewportWidth - Math.max(SCROLLBAR_MARGIN * 2, safeArea.left + safeArea.right),
-      height: SCROLLBAR_WIDTH
+      width: scrollbarWidth,
+      height: SCROLLBAR_WIDTH,
+      deltaMultiplier: horizontalDeltaMultiplier
     },
     vertical: viewportMinY === sceneMinY && viewportMaxY === sceneMaxY ? null : {
       x: isRTL ? Math.max(safeArea.left, SCROLLBAR_MARGIN) : viewportWidth - SCROLLBAR_WIDTH - Math.max(safeArea.right, SCROLLBAR_MARGIN),
-      y: (viewportMinY - sceneMinY) / (sceneMaxY - sceneMinY) * viewportHeight + Math.max(safeArea.top, SCROLLBAR_MARGIN),
+      y: Math.max(safeArea.top, SCROLLBAR_MARGIN) + SCROLLBAR_WIDTH + (viewportMinY - sceneMinY) / extendedSceneHeight * viewportHeight,
       width: SCROLLBAR_WIDTH,
-      height: (viewportMaxY - viewportMinY) / (sceneMaxY - sceneMinY) * viewportHeight - Math.max(SCROLLBAR_MARGIN * 2, safeArea.top + safeArea.bottom)
+      height: scrollbarHeight,
+      deltaMultiplier: verticalDeltaMultiplier
     }
   };
 };
@@ -23166,7 +23407,7 @@ var _renderInteractiveScene = ({
   let scrollBars;
   if (renderConfig.renderScrollbars) {
     scrollBars = getScrollBars(
-      visibleElements,
+      elementsMap,
       normalizedWidth,
       normalizedHeight,
       appState
@@ -23201,8 +23442,8 @@ var renderInteractiveSceneThrottled = throttleRAF(
   },
   { trailing: true }
 );
-var renderInteractiveScene = (renderConfig, throttle5) => {
-  if (throttle5) {
+var renderInteractiveScene = (renderConfig, throttle6) => {
+  if (throttle6) {
     renderInteractiveSceneThrottled(renderConfig);
     return void 0;
   }
@@ -23435,7 +23676,6 @@ var AnimatedTrail = class {
     this.update();
   }
   update() {
-    this.pastTrails = [];
     this.start();
     if (this.trailAnimation) {
       this.trailAnimation.setAttribute("begin", "indefinite");
@@ -23655,7 +23895,7 @@ var textWysiwyg = ({
   };
   const updateWysiwygStyle = () => {
     const appState = app.state;
-    const updatedTextElement = Scene_default.getScene(element)?.getElement(id);
+    const updatedTextElement = app.scene.getElement(id);
     if (!updatedTextElement) {
       return;
     }
@@ -23711,7 +23951,7 @@ var textWysiwyg = ({
             height,
             container.type
           );
-          mutateElement(container, { height: targetContainerHeight });
+          app.scene.mutateElement(container, { height: targetContainerHeight });
           return;
         } else if (
           // autoshrink container height until original container height
@@ -23722,7 +23962,7 @@ var textWysiwyg = ({
             height,
             container.type
           );
-          mutateElement(container, { height: targetContainerHeight });
+          app.scene.mutateElement(container, { height: targetContainerHeight });
         } else {
           const { y } = computeBoundTextPosition(
             container,
@@ -23777,7 +24017,7 @@ var textWysiwyg = ({
       if (isTestEnv()) {
         editable.style.fontFamily = getFontFamilyString(updatedTextElement);
       }
-      mutateElement(updatedTextElement, { x: coordX, y: coordY });
+      app.scene.mutateElement(updatedTextElement, { x: coordX, y: coordY });
     }
   };
   const editable = document.createElement("textarea");
@@ -23978,7 +24218,7 @@ var textWysiwyg = ({
     }
     isDestroyed = true;
     cleanup();
-    const updateElement = Scene_default.getScene(element)?.getElement(
+    const updateElement = app.scene.getElement(
       element.id
     );
     if (!updateElement) {
@@ -23992,7 +24232,7 @@ var textWysiwyg = ({
       if (editable.value.trim()) {
         const boundTextElementId = getBoundTextElementId(container);
         if (!boundTextElementId || boundTextElementId !== element.id) {
-          mutateElement(container, {
+          app.scene.mutateElement(container, {
             boundElements: (container.boundElements || []).concat({
               type: "text",
               id: element.id
@@ -24002,7 +24242,7 @@ var textWysiwyg = ({
           bumpVersion(container);
         }
       } else {
-        mutateElement(container, {
+        app.scene.mutateElement(container, {
           boundElements: container.boundElements?.filter(
             (ele) => !isTextElement(
               ele
@@ -24010,11 +24250,7 @@ var textWysiwyg = ({
           )
         });
       }
-      redrawTextBoundingBox(
-        updateElement,
-        container,
-        app.scene.getNonDeletedElementsMap()
-      );
+      redrawTextBoundingBox(updateElement, container, app.scene);
     }
     onSubmit({
       viaKeyboard: submittedViaKeyboard,
@@ -24285,7 +24521,8 @@ var LassoTrail = class extends AnimatedTrail {
           selectedLinearElement: selectedIds.length === 1 && !selectedGroupIds.length && isLinearElement(this.app.scene.getNonDeletedElement(selectedIds[0])) ? new LinearElementEditor(
             this.app.scene.getNonDeletedElement(
               selectedIds[0]
-            )
+            ),
+            this.app.scene.getNonDeletedElementsMap()
           ) : null
         };
       });
@@ -24341,6 +24578,161 @@ var LassoTrail = class extends AnimatedTrail {
   }
 };
 
+// eraser/index.ts
+var POINTS_ON_TRAIL = 2;
+var EraserTrail = class extends AnimatedTrail {
+  constructor(animationFrameHandler, app) {
+    super(animationFrameHandler, app, {
+      streamline: 0.2,
+      size: 5,
+      keepHead: true,
+      sizeMapping: (c) => {
+        const DECAY_TIME = 200;
+        const DECAY_LENGTH = 10;
+        const t2 = Math.max(
+          0,
+          1 - (performance.now() - c.pressure) / DECAY_TIME
+        );
+        const l = (DECAY_LENGTH - Math.min(DECAY_LENGTH, c.totalLength - c.currentIndex)) / DECAY_LENGTH;
+        return Math.min(easeOut(l), easeOut(t2));
+      },
+      fill: () => app.state.theme === THEME.LIGHT ? "rgba(0, 0, 0, 0.2)" : "rgba(255, 255, 255, 0.2)"
+    });
+    __publicField(this, "elementsToErase", /* @__PURE__ */ new Set());
+    __publicField(this, "groupsToErase", /* @__PURE__ */ new Set());
+    __publicField(this, "segmentsCache", /* @__PURE__ */ new Map());
+    __publicField(this, "geometricShapesCache", /* @__PURE__ */ new Map());
+  }
+  startPath(x, y) {
+    this.endPath();
+    super.startPath(x, y);
+    this.elementsToErase.clear();
+  }
+  addPointToPath(x, y, restore2 = false) {
+    super.addPointToPath(x, y);
+    const elementsToEraser = this.updateElementsToBeErased(restore2);
+    return elementsToEraser;
+  }
+  updateElementsToBeErased(restoreToErase) {
+    let eraserPath = super.getCurrentTrail()?.originalPoints?.map((p) => pointFrom(p[0], p[1])) || [];
+    eraserPath = eraserPath?.slice(eraserPath.length - POINTS_ON_TRAIL);
+    const candidateElements = this.app.visibleElements.filter(
+      (el) => !el.locked
+    );
+    const candidateElementsMap = arrayToMap(candidateElements);
+    const pathSegments = eraserPath.reduce((acc, point, index) => {
+      if (index === 0) {
+        return acc;
+      }
+      acc.push(lineSegment(eraserPath[index - 1], point));
+      return acc;
+    }, []);
+    if (pathSegments.length === 0) {
+      return [];
+    }
+    for (const element of candidateElements) {
+      if (restoreToErase && this.elementsToErase.has(element.id)) {
+        const intersects = eraserTest(
+          pathSegments,
+          element,
+          this.segmentsCache,
+          this.geometricShapesCache,
+          candidateElementsMap,
+          this.app
+        );
+        if (intersects) {
+          const shallowestGroupId = element.groupIds.at(-1);
+          if (this.groupsToErase.has(shallowestGroupId)) {
+            const elementsInGroup = getElementsInGroup(
+              this.app.scene.getNonDeletedElementsMap(),
+              shallowestGroupId
+            );
+            for (const elementInGroup of elementsInGroup) {
+              this.elementsToErase.delete(elementInGroup.id);
+            }
+            this.groupsToErase.delete(shallowestGroupId);
+          }
+          if (isBoundToContainer(element)) {
+            this.elementsToErase.delete(element.containerId);
+          }
+          if (hasBoundTextElement(element)) {
+            const boundText = getBoundTextElementId(element);
+            if (boundText) {
+              this.elementsToErase.delete(boundText);
+            }
+          }
+          this.elementsToErase.delete(element.id);
+        }
+      } else if (!restoreToErase && !this.elementsToErase.has(element.id)) {
+        const intersects = eraserTest(
+          pathSegments,
+          element,
+          this.segmentsCache,
+          this.geometricShapesCache,
+          candidateElementsMap,
+          this.app
+        );
+        if (intersects) {
+          const shallowestGroupId = element.groupIds.at(-1);
+          if (!this.groupsToErase.has(shallowestGroupId)) {
+            const elementsInGroup = getElementsInGroup(
+              this.app.scene.getNonDeletedElementsMap(),
+              shallowestGroupId
+            );
+            for (const elementInGroup of elementsInGroup) {
+              this.elementsToErase.add(elementInGroup.id);
+            }
+            this.groupsToErase.add(shallowestGroupId);
+          }
+          if (hasBoundTextElement(element)) {
+            const boundText = getBoundTextElementId(element);
+            if (boundText) {
+              this.elementsToErase.add(boundText);
+            }
+          }
+          if (isBoundToContainer(element)) {
+            this.elementsToErase.add(element.containerId);
+          }
+          this.elementsToErase.add(element.id);
+        }
+      }
+    }
+    return Array.from(this.elementsToErase);
+  }
+  endPath() {
+    super.endPath();
+    super.clearTrails();
+    this.elementsToErase.clear();
+    this.groupsToErase.clear();
+    this.segmentsCache.clear();
+  }
+};
+var eraserTest = (pathSegments, element, elementsSegments, shapesCache, elementsMap, app) => {
+  let shape = shapesCache.get(element.id);
+  if (!shape) {
+    shape = getElementShape(element, elementsMap);
+    shapesCache.set(element.id, shape);
+  }
+  const lastPoint = pathSegments[pathSegments.length - 1][1];
+  if (shouldTestInside(element) && isPointInShape(lastPoint, shape)) {
+    return true;
+  }
+  let elementSegments = elementsSegments.get(element.id);
+  if (!elementSegments) {
+    elementSegments = getElementLineSegments(element, elementsMap);
+    elementsSegments.set(element.id, elementSegments);
+  }
+  return pathSegments.some(
+    (pathSegment) => elementSegments?.some(
+      (elementSegment) => lineSegmentIntersectionPoints(
+        pathSegment,
+        elementSegment,
+        app.getElementHitThreshold()
+      ) !== null
+    )
+  );
+};
+
 // components/BraveMeasureTextError.tsx
 import { jsx as jsx77, jsxs as jsxs42 } from "react/jsx-runtime";
 var BraveMeasureTextError = () => {
@@ -27754,7 +28146,7 @@ TTD mermaid definition render errror: ${error3.message}`,
 
 // components/Stats/index.tsx
 import clsx51 from "clsx";
-import throttle2 from "lodash.throttle";
+import throttle3 from "lodash.throttle";
 import { useEffect as useEffect36, useMemo as useMemo9, useState as useState31, memo as memo5 } from "react";
 
 // components/Stats/DragInput.tsx
@@ -27785,7 +28177,8 @@ var getElementsInAtomicUnit = (atomicUnit, elementsMap, originalElementsMap) =>
     latest: elementsMap.get(id)
   })).filter((el) => el.original !== void 0 && el.latest !== void 0);
 };
-var moveElement = (newTopLeftX, newTopLeftY, originalElement, elementsMap, elements, scene, originalElementsMap, shouldInformMutation = true) => {
+var moveElement = (newTopLeftX, newTopLeftY, originalElement, scene, originalElementsMap, shouldInformMutation = true) => {
+  const elementsMap = scene.getNonDeletedElementsMap();
   const latestElement = elementsMap.get(originalElement.id);
   if (!latestElement) {
     return;
@@ -27806,28 +28199,28 @@ var moveElement = (newTopLeftX, newTopLeftY, originalElement, elementsMap, eleme
     pointFrom(cx + changeInX, cy + changeInY),
     -originalElement.angle
   );
-  mutateElement(
+  scene.mutateElement(
     latestElement,
     {
       x,
       y
     },
-    shouldInformMutation
+    { informMutation: shouldInformMutation, isDragging: false }
   );
-  updateBindings(latestElement, elementsMap, elements, scene);
+  updateBindings(latestElement, scene);
   const boundTextElement = getBoundTextElement(
     originalElement,
     originalElementsMap
   );
   if (boundTextElement) {
     const latestBoundTextElement = elementsMap.get(boundTextElement.id);
-    latestBoundTextElement && mutateElement(
+    latestBoundTextElement && scene.mutateElement(
       latestBoundTextElement,
       {
         x: boundTextElement.x + changeInX,
         y: boundTextElement.y + changeInY
       },
-      shouldInformMutation
+      { informMutation: shouldInformMutation, isDragging: false }
     );
   }
 };
@@ -27846,19 +28239,11 @@ var getAtomicUnits = (targetElements, appState) => {
   });
   return _atomicUnits;
 };
-var updateBindings = (latestElement, elementsMap, elements, scene, options) => {
+var updateBindings = (latestElement, scene, options) => {
   if (isLinearElement(latestElement)) {
-    bindOrUnbindLinearElements(
-      [latestElement],
-      elementsMap,
-      elements,
-      scene,
-      true,
-      [],
-      options?.zoom
-    );
+    bindOrUnbindLinearElements([latestElement], true, [], scene, options?.zoom);
   } else {
-    updateBoundElements(latestElement, elementsMap, options);
+    updateBoundElements(latestElement, scene, options);
   }
 };
 
@@ -28110,7 +28495,6 @@ var handleDegreeChange = ({
   scene
 }) => {
   const elementsMap = scene.getNonDeletedElementsMap();
-  const elements = scene.getNonDeletedElements();
   const origElement = originalElements[0];
   if (origElement && !isElbowArrow(origElement)) {
     const latestElement = elementsMap.get(origElement.id);
@@ -28119,13 +28503,13 @@ var handleDegreeChange = ({
     }
     if (nextValue !== void 0) {
       const nextAngle2 = degreesToRadians(nextValue);
-      mutateElement(latestElement, {
+      scene.mutateElement(latestElement, {
         angle: nextAngle2
       });
-      updateBindings(latestElement, elementsMap, elements, scene);
+      updateBindings(latestElement, scene);
       const boundTextElement2 = getBoundTextElement(latestElement, elementsMap);
       if (boundTextElement2 && !isArrowElement(latestElement)) {
-        mutateElement(boundTextElement2, { angle: nextAngle2 });
+        scene.mutateElement(boundTextElement2, { angle: nextAngle2 });
       }
       return;
     }
@@ -28137,13 +28521,13 @@ var handleDegreeChange = ({
     }
     nextAngleInDegrees = nextAngleInDegrees < 0 ? nextAngleInDegrees + 360 : nextAngleInDegrees;
     const nextAngle = degreesToRadians(nextAngleInDegrees);
-    mutateElement(latestElement, {
+    scene.mutateElement(latestElement, {
       angle: nextAngle
     });
-    updateBindings(latestElement, elementsMap, elements, scene);
+    updateBindings(latestElement, scene);
     const boundTextElement = getBoundTextElement(latestElement, elementsMap);
     if (boundTextElement && !isArrowElement(latestElement)) {
-      mutateElement(boundTextElement, { angle: nextAngle });
+      scene.mutateElement(boundTextElement, { angle: nextAngle });
     }
   }
 };
@@ -28282,7 +28666,7 @@ var handleDimensionChange = ({
             y: isFlippedByY ? crop.y + crop.height - nextCropHeight2 : crop.y
           };
         }
-        mutateElement(element, {
+        scene.mutateElement(element, {
           crop: nextCrop,
           width: nextCrop.width / (crop.naturalWidth / uncroppedWidth),
           height: nextCrop.height / (crop.naturalHeight / uncroppedHeight)
@@ -28308,7 +28692,7 @@ var handleDimensionChange = ({
         width: nextCropWidth,
         height: nextCropHeight
       };
-      mutateElement(element, {
+      scene.mutateElement(element, {
         crop: nextCrop,
         width: nextCrop.width / (crop.naturalWidth / uncroppedWidth),
         height: nextCrop.height / (crop.naturalHeight / uncroppedHeight)
@@ -28329,8 +28713,8 @@ var handleDimensionChange = ({
         nextHeight2,
         latestElement,
         origElement,
-        elementsMap,
         originalElementsMap,
+        scene,
         property === "width" ? "e" : "s",
         {
           shouldMaintainAspectRatio: keepAspectRatio
@@ -28370,8 +28754,8 @@ var handleDimensionChange = ({
       nextHeight,
       latestElement,
       origElement,
-      elementsMap,
       originalElementsMap,
+      scene,
       property === "width" ? "e" : "s",
       {
         shouldMaintainAspectRatio: keepAspectRatio
@@ -28446,13 +28830,13 @@ var handleFontSizeChange = ({
       }
     }
     if (nextFontSize) {
-      mutateElement(latestElement, {
+      scene.mutateElement(latestElement, {
         fontSize: nextFontSize
       });
       redrawTextBoundingBox(
         latestElement,
         scene.getContainerElement(latestElement),
-        scene.getNonDeletedElementsMap()
+        scene
       );
     }
   }
@@ -28500,16 +28884,12 @@ var handleDegreeChange2 = ({
       if (!element) {
         continue;
       }
-      mutateElement(
-        element,
-        {
-          angle: nextAngle
-        },
-        false
-      );
+      scene.mutateElement(element, {
+        angle: nextAngle
+      });
       const boundTextElement = getBoundTextElement(element, elementsMap);
       if (boundTextElement && !isArrowElement(element)) {
-        mutateElement(boundTextElement, { angle: nextAngle }, false);
+        scene.mutateElement(boundTextElement, { angle: nextAngle });
       }
     }
     scene.triggerUpdate();
@@ -28529,16 +28909,12 @@ var handleDegreeChange2 = ({
     }
     nextAngleInDegrees = nextAngleInDegrees < 0 ? nextAngleInDegrees + 360 : nextAngleInDegrees;
     const nextAngle = degreesToRadians(nextAngleInDegrees);
-    mutateElement(
-      latestElement,
-      {
-        angle: nextAngle
-      },
-      false
-    );
+    scene.mutateElement(latestElement, {
+      angle: nextAngle
+    });
     const boundTextElement = getBoundTextElement(latestElement, elementsMap);
     if (boundTextElement && !isArrowElement(latestElement)) {
-      mutateElement(boundTextElement, { angle: nextAngle }, false);
+      scene.mutateElement(boundTextElement, { angle: nextAngle });
     }
   }
   scene.triggerUpdate();
@@ -28596,37 +28972,34 @@ var getResizedUpdates = (anchorX, anchorY, scale, origElement) => {
     ...isTextElement(origElement) ? { fontSize: origElement.fontSize * scale } : {}
   };
 };
-var resizeElementInGroup = (anchorX, anchorY, property, scale, latestElement, origElement, elementsMap, originalElementsMap) => {
+var resizeElementInGroup = (anchorX, anchorY, property, scale, latestElement, origElement, originalElementsMap, scene) => {
+  const elementsMap = scene.getNonDeletedElementsMap();
   const updates = getResizedUpdates(anchorX, anchorY, scale, origElement);
-  mutateElement(latestElement, updates, false);
+  scene.mutateElement(latestElement, updates);
   const boundTextElement = getBoundTextElement(
     origElement,
     originalElementsMap
   );
   if (boundTextElement) {
     const newFontSize = boundTextElement.fontSize * scale;
-    updateBoundElements(latestElement, elementsMap, {
+    updateBoundElements(latestElement, scene, {
       newSize: { width: updates.width, height: updates.height }
     });
     const latestBoundTextElement = elementsMap.get(boundTextElement.id);
     if (latestBoundTextElement && isTextElement(latestBoundTextElement)) {
-      mutateElement(
-        latestBoundTextElement,
-        {
-          fontSize: newFontSize
-        },
-        false
-      );
+      scene.mutateElement(latestBoundTextElement, {
+        fontSize: newFontSize
+      });
       handleBindTextResize(
         latestElement,
-        elementsMap,
+        scene,
         property === "width" ? "e" : "s",
         true
       );
     }
   }
 };
-var resizeGroup = (nextWidth, nextHeight, initialHeight, aspectRatio, anchor, property, latestElements, originalElements, elementsMap, originalElementsMap) => {
+var resizeGroup = (nextWidth, nextHeight, initialHeight, aspectRatio, anchor, property, latestElements, originalElements, originalElementsMap, scene) => {
   if (property === "width") {
     nextHeight = Math.round(nextWidth / aspectRatio * 100) / 100;
   } else {
@@ -28643,8 +29016,8 @@ var resizeGroup = (nextWidth, nextHeight, initialHeight, aspectRatio, anchor, pr
       scale,
       latestElement,
       origElement,
-      elementsMap,
-      originalElementsMap
+      originalElementsMap,
+      scene
     );
   }
 };
@@ -28691,8 +29064,8 @@ var handleDimensionChange2 = ({
           property,
           latestElements,
           originalElements2,
-          elementsMap,
-          originalElementsMap
+          originalElementsMap,
+          scene
         );
       } else {
         const [el] = elementsInUnit;
@@ -28722,8 +29095,8 @@ var handleDimensionChange2 = ({
             nextHeight,
             latestElement,
             origElement,
-            elementsMap,
             originalElementsMap,
+            scene,
             property === "width" ? "e" : "s",
             {
               shouldInformMutation: false
@@ -28777,8 +29150,8 @@ var handleDimensionChange2 = ({
         property,
         latestElements,
         originalElements2,
-        elementsMap,
-        originalElementsMap
+        originalElementsMap,
+        scene
       );
     } else {
       const [el] = elementsInUnit;
@@ -28808,8 +29181,8 @@ var handleDimensionChange2 = ({
           nextHeight,
           latestElement,
           origElement,
-          elementsMap,
           originalElementsMap,
+          scene,
           property === "width" ? "e" : "s",
           {
             shouldInformMutation: false
@@ -28901,18 +29274,13 @@ var handleFontSizeChange2 = ({
   if (nextValue) {
     nextFontSize = Math.max(Math.round(nextValue), MIN_FONT_SIZE3);
     for (const textElement of latestTextElements) {
-      mutateElement(
-        textElement,
-        {
-          fontSize: nextFontSize
-        },
-        false
-      );
+      scene.mutateElement(textElement, {
+        fontSize: nextFontSize
+      });
       redrawTextBoundingBox(
         textElement,
         scene.getContainerElement(textElement),
-        elementsMap,
-        false
+        scene
       );
     }
     scene.triggerUpdate();
@@ -28930,18 +29298,13 @@ var handleFontSizeChange2 = ({
       if (shouldChangeByStepSize) {
         nextFontSize2 = getStepSizedValue(nextFontSize2, STEP_SIZE7);
       }
-      mutateElement(
-        latestElement,
-        {
-          fontSize: nextFontSize2
-        },
-        false
-      );
+      scene.mutateElement(latestElement, {
+        fontSize: nextFontSize2
+      });
       redrawTextBoundingBox(
         latestElement,
         scene.getContainerElement(latestElement),
-        elementsMap,
-        false
+        scene
       );
     }
     scene.triggerUpdate();
@@ -28984,8 +29347,8 @@ var MultiFontSize_default = MultiFontSize;
 import { useMemo as useMemo8 } from "react";
 import { jsx as jsx129 } from "react/jsx-runtime";
 var STEP_SIZE8 = 10;
-var moveElements = (property, changeInTopX, changeInTopY, elements, originalElements, elementsMap, originalElementsMap, scene) => {
-  for (let i = 0; i < elements.length; i++) {
+var moveElements = (property, changeInTopX, changeInTopY, originalElements, originalElementsMap, scene) => {
+  for (let i = 0; i < originalElements.length; i++) {
     const origElement = originalElements[i];
     const [cx, cy] = [
       origElement.x + origElement.width / 2,
@@ -29002,15 +29365,14 @@ var moveElements = (property, changeInTopX, changeInTopY, elements, originalElem
       newTopLeftX,
       newTopLeftY,
       origElement,
-      elementsMap,
-      elements,
       scene,
       originalElementsMap,
       false
     );
   }
 };
-var moveGroupTo = (nextX, nextY, originalElements, elementsMap, elements, originalElementsMap, scene) => {
+var moveGroupTo = (nextX, nextY, originalElements, originalElementsMap, scene) => {
+  const elementsMap = scene.getNonDeletedElementsMap();
   const [x1, y1, ,] = getCommonBounds(originalElements);
   const offsetX = nextX - x1;
   const offsetY = nextY - y1;
@@ -29034,8 +29396,6 @@ var moveGroupTo = (nextX, nextY, originalElements, elementsMap, elements, origin
         topLeftX + offsetX,
         topLeftY + offsetY,
         origElement,
-        elementsMap,
-        elements,
         scene,
         originalElementsMap,
         false
@@ -29054,7 +29414,6 @@ var handlePositionChange = ({
   originalAppState
 }) => {
   const elementsMap = scene.getNonDeletedElementsMap();
-  const elements = scene.getNonDeletedElements();
   if (nextValue !== void 0) {
     for (const atomicUnit of getAtomicUnits(
       originalElements,
@@ -29075,8 +29434,6 @@ var handlePositionChange = ({
           newTopLeftX,
           newTopLeftY,
           elementsInUnit.map((el) => el.original),
-          elementsMap,
-          elements,
           originalElementsMap,
           scene
         );
@@ -29099,8 +29456,6 @@ var handlePositionChange = ({
             newTopLeftX,
             newTopLeftY,
             origElement,
-            elementsMap,
-            elements,
             scene,
             originalElementsMap,
             false
@@ -29119,8 +29474,6 @@ var handlePositionChange = ({
     changeInTopX,
     changeInTopY,
     originalElements,
-    originalElements,
-    elementsMap,
     originalElementsMap,
     scene
   );
@@ -29183,7 +29536,6 @@ var handlePositionChange2 = ({
   originalAppState
 }) => {
   const elementsMap = scene.getNonDeletedElementsMap();
-  const elements = scene.getNonDeletedElements();
   const origElement = originalElements[0];
   const [cx, cy] = [
     origElement.x + origElement.width / 2,
@@ -29237,7 +29589,7 @@ var handlePositionChange2 = ({
           )
         };
       }
-      mutateElement(element, {
+      scene.mutateElement(element, {
         crop: nextCrop
       });
       return;
@@ -29249,7 +29601,7 @@ var handlePositionChange2 = ({
       x: clamp(crop.x + changeInX, 0, crop.naturalWidth - crop.width),
       y: clamp(crop.y + changeInY, 0, crop.naturalHeight - crop.height)
     };
-    mutateElement(element, {
+    scene.mutateElement(element, {
       crop: nextCrop
     });
     return;
@@ -29261,8 +29613,6 @@ var handlePositionChange2 = ({
       newTopLeftX2,
       newTopLeftY2,
       origElement,
-      elementsMap,
-      elements,
       scene,
       originalElementsMap
     );
@@ -29280,8 +29630,6 @@ var handlePositionChange2 = ({
     newTopLeftX,
     newTopLeftY,
     origElement,
-    elementsMap,
-    elements,
     scene,
     originalElementsMap
   );
@@ -29396,7 +29744,7 @@ var StatsInner = memo5(
       height: 0
     });
     const throttledSetSceneDimension = useMemo9(
-      () => throttle2((elements2) => {
+      () => throttle3((elements2) => {
         const boundingBox = getCommonBounds(elements2);
         setSceneDimension({
           width: Math.round(boundingBox[2]) - Math.round(boundingBox[0]),
@@ -29653,10 +30001,11 @@ import { jsx as jsx132, jsxs as jsxs71 } from "react/jsx-runtime";
 var ElementLinkDialog = ({
   sourceElementId,
   onClose,
-  elementsMap,
   appState,
+  scene,
   generateLinkForSelection = defaultGetElementLinkFromSelection
 }) => {
+  const elementsMap = scene.getNonDeletedElementsMap();
   const originalLink = elementsMap.get(sourceElementId)?.link ?? null;
   const [nextLink, setNextLink] = useState32(originalLink);
   const [linkEdited, setLinkEdited] = useState32(false);
@@ -29685,18 +30034,18 @@ var ElementLinkDialog = ({
   const handleConfirm = useCallback12(() => {
     if (nextLink && nextLink !== elementsMap.get(sourceElementId)?.link) {
       const elementToLink = elementsMap.get(sourceElementId);
-      elementToLink && mutateElement(elementToLink, {
+      elementToLink && scene.mutateElement(elementToLink, {
         link: nextLink
       });
     }
     if (!nextLink && linkEdited && sourceElementId) {
       const elementToLink = elementsMap.get(sourceElementId);
-      elementToLink && mutateElement(elementToLink, {
+      elementToLink && scene.mutateElement(elementToLink, {
         link: null
       });
     }
     onClose?.();
-  }, [sourceElementId, nextLink, elementsMap, linkEdited, onClose]);
+  }, [sourceElementId, nextLink, elementsMap, linkEdited, scene, onClose]);
   useEffect37(() => {
     const handleKeyDown = (event) => {
       if (appState.openDialog?.name === "elementLinkSelector" && event.key === KEYS.ENTER) {
@@ -31338,16 +31687,12 @@ var LayerUI = ({
           }
           if (selectedElements.length) {
             for (const element of selectedElements) {
-              mutateElement(
-                element,
-                {
-                  [altKey && eyeDropperState.swapPreviewOnAlt ? colorPickerType === "elementBackground" ? "strokeColor" : "backgroundColor" : colorPickerType === "elementBackground" ? "backgroundColor" : "strokeColor"]: color
-                },
-                false
-              );
+              mutateElement(element, arrayToMap(elements), {
+                [altKey && eyeDropperState.swapPreviewOnAlt ? colorPickerType === "elementBackground" ? "strokeColor" : "backgroundColor" : colorPickerType === "elementBackground" ? "backgroundColor" : "strokeColor"]: color
+              });
               ShapeCache.delete(element);
             }
-            Scene_default.getScene(selectedElements[0])?.triggerUpdate();
+            app.scene.triggerUpdate();
           } else if (colorPickerType === "elementBackground") {
             setAppState({
               currentItemBackgroundColor: color
@@ -31382,7 +31727,7 @@ var LayerUI = ({
             openDialog: null
           });
         },
-        elementsMap: app.scene.getNonDeletedElementsMap(),
+        scene: app.scene,
         appState,
         generateLinkForSelection
       }
@@ -31608,7 +31953,7 @@ var InteractiveCanvas = (props) => {
           remotePointerUsernames,
           remotePointerUserStates,
           selectionColor,
-          renderScrollbars: false
+          renderScrollbars: props.renderScrollbars
         },
         device: props.device,
         callback: props.renderInteractiveSceneCallback
@@ -31677,7 +32022,7 @@ var areEqual3 = (prevProps, nextProps) => {
   if (prevProps.selectionNonce !== nextProps.selectionNonce || prevProps.sceneNonce !== nextProps.sceneNonce || 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
   // on appState)
-  prevProps.elementsMap !== nextProps.elementsMap || prevProps.visibleElements !== nextProps.visibleElements || prevProps.selectedElements !== nextProps.selectedElements) {
+  prevProps.elementsMap !== nextProps.elementsMap || prevProps.visibleElements !== nextProps.visibleElements || prevProps.selectedElements !== nextProps.selectedElements || prevProps.renderScrollbars !== nextProps.renderScrollbars) {
     return false;
   }
   return isShallowEqual(
@@ -31831,8 +32176,8 @@ var renderNewElementSceneThrottled = throttleRAF(
   },
   { trailing: true }
 );
-var renderNewElementScene = (renderConfig, throttle5) => {
-  if (throttle5) {
+var renderNewElementScene = (renderConfig, throttle6) => {
+  if (throttle6) {
     renderNewElementSceneThrottled(renderConfig);
     return;
   }
@@ -32040,19 +32385,7 @@ var App = class _App extends React43.Component {
     __publicField(this, "lastViewportPosition", { x: 0, y: 0 });
     __publicField(this, "animationFrameHandler", new AnimationFrameHandler());
     __publicField(this, "laserTrails", new LaserTrails(this.animationFrameHandler, this));
-    __publicField(this, "eraserTrail", new AnimatedTrail(this.animationFrameHandler, this, {
-      streamline: 0.2,
-      size: 5,
-      keepHead: true,
-      sizeMapping: (c) => {
-        const DECAY_TIME = 200;
-        const DECAY_LENGTH = 10;
-        const t2 = Math.max(0, 1 - (performance.now() - c.pressure) / DECAY_TIME);
-        const l = (DECAY_LENGTH - Math.min(DECAY_LENGTH, c.totalLength - c.currentIndex)) / DECAY_LENGTH;
-        return Math.min(easeOut(l), easeOut(t2));
-      },
-      fill: () => this.state.theme === THEME.LIGHT ? "rgba(0, 0, 0, 0.2)" : "rgba(255, 255, 255, 0.2)"
-    }));
+    __publicField(this, "eraserTrail", new EraserTrail(this.animationFrameHandler, this));
     __publicField(this, "lassoTrail", new LassoTrail(this.animationFrameHandler, this));
     __publicField(this, "onChangeEmitter", new Emitter());
     __publicField(this, "onPointerDownEmitter", new Emitter());
@@ -32143,7 +32476,7 @@ var App = class _App extends React43.Component {
     });
     __publicField(this, "resetEditingFrame", (frame) => {
       if (frame) {
-        mutateElement(frame, { name: frame.name?.trim() || null });
+        this.scene.mutateElement(frame, { name: frame.name?.trim() || null });
       }
       this.setState({ editingFrame: null });
     });
@@ -32189,7 +32522,7 @@ var App = class _App extends React43.Component {
               autoFocus: true,
               value: frameNameInEdit,
               onChange: (e) => {
-                mutateElement(f, {
+                this.scene.mutateElement(f, {
                   name: e.target.value
                 });
               },
@@ -32308,16 +32641,20 @@ var App = class _App extends React43.Component {
       data
     }) => {
       if (data.status === "pending") {
-        mutateElement(
+        this.scene.mutateElement(
           frameElement,
-          { customData: { generationData: void 0 } },
-          false
+          {
+            customData: { generationData: void 0 }
+          },
+          { informMutation: false, isDragging: false }
         );
       } else {
-        mutateElement(
+        this.scene.mutateElement(
           frameElement,
-          { customData: { generationData: data } },
-          false
+          {
+            customData: { generationData: data }
+          },
+          { informMutation: false, isDragging: false }
         );
       }
       this.magicGenerations.set(frameElement.id, data);
@@ -32355,7 +32692,7 @@ var App = class _App extends React43.Component {
           });
           this.scene.insertElement(frame);
           for (const child of selectedElements) {
-            mutateElement(child, { frameId: frame.id });
+            this.scene.mutateElement(child, { frameId: frame.id });
           }
           this.setState({
             selectedElementIds: { [frame.id]: true }
@@ -32891,7 +33228,7 @@ var App = class _App extends React43.Component {
       const dx = x - elementsCenterX;
       const dy = y - elementsCenterY;
       const [gridX, gridY] = getGridPoint(dx, dy, this.getEffectiveGridSize());
-      const { newElements } = duplicateElements({
+      const { duplicatedElements } = duplicateElements({
         type: "everything",
         elements: elements.map((element) => {
           return newElementWith(element, {
@@ -32902,17 +33239,17 @@ var App = class _App extends React43.Component {
         randomizeSeed: !opts.retainSeed
       });
       const prevElements = this.scene.getElementsIncludingDeleted();
-      let nextElements = [...prevElements, ...newElements];
+      let nextElements = [...prevElements, ...duplicatedElements];
       const mappedNewSceneElements = this.props.onDuplicate?.(
         nextElements,
         prevElements
       );
       nextElements = mappedNewSceneElements || nextElements;
-      syncMovedIndices(nextElements, arrayToMap(newElements));
+      syncMovedIndices(nextElements, arrayToMap(duplicatedElements));
       const topLayerFrame = this.getTopLayerFrameAtSceneCoords({ x, y });
       if (topLayerFrame) {
         const eligibleElements = filterElementsEligibleAsFrameChildren(
-          newElements,
+          duplicatedElements,
           topLayerFrame
         );
         addElementsToFrame(
@@ -32923,21 +33260,17 @@ var App = class _App extends React43.Component {
         );
       }
       this.scene.replaceAllElements(nextElements);
-      newElements.forEach((newElement2) => {
+      duplicatedElements.forEach((newElement2) => {
         if (isTextElement(newElement2) && isBoundToContainer(newElement2)) {
           const container = getContainerElement(
             newElement2,
             this.scene.getElementsMapIncludingDeleted()
           );
-          redrawTextBoundingBox(
-            newElement2,
-            container,
-            this.scene.getElementsMapIncludingDeleted()
-          );
+          redrawTextBoundingBox(newElement2, container, this.scene);
         }
       });
       if (isSafari) {
-        Fonts.loadElementsFonts(newElements).then((fontFaces) => {
+        Fonts.loadElementsFonts(duplicatedElements).then((fontFaces) => {
           this.fonts.onLoaded(fontFaces);
         });
       }
@@ -32945,7 +33278,7 @@ var App = class _App extends React43.Component {
         this.addMissingFiles(opts.files);
       }
       this.store.shouldCaptureIncrement();
-      const nextElementsToSelect = excludeElementsInFramesFromSelection(newElements);
+      const nextElementsToSelect = excludeElementsInFramesFromSelection(duplicatedElements);
       this.setState(
         {
           ...this.state,
@@ -32981,7 +33314,7 @@ var App = class _App extends React43.Component {
       );
       this.setActiveTool({ type: "selection" });
       if (opts.fitToContent) {
-        this.scrollToContent(newElements, {
+        this.scrollToContent(duplicatedElements, {
           fitToContent: true,
           canvasOffsets: this.getEditorUIOffsets()
         });
@@ -33255,6 +33588,12 @@ var App = class _App extends React43.Component {
         }
       }
     ));
+    __publicField(this, "mutateElement", (element, updates, informMutation = true) => {
+      return this.scene.mutateElement(element, updates, {
+        informMutation,
+        isDragging: false
+      });
+    });
     __publicField(this, "triggerRender", (force) => {
       if (force === true) {
         this.scene.triggerUpdate();
@@ -33358,9 +33697,9 @@ var App = class _App extends React43.Component {
             if (selectedElements2.length === 1 && isFlowchartNodeElement(selectedElements2[0])) {
               this.flowChartCreator.createNodes(
                 selectedElements2[0],
-                this.scene.getNonDeletedElementsMap(),
                 this.state,
-                getLinkDirectionFromKey(event.key)
+                getLinkDirectionFromKey(event.key),
+                this.scene
               );
             }
             if (this.flowChartCreator.pendingNodes?.length && !isElementCompletelyInViewport(
@@ -33533,15 +33872,15 @@ var App = class _App extends React43.Component {
             offsetY = step;
           }
           selectedElements.forEach((element) => {
-            mutateElement(
+            this.scene.mutateElement(
               element,
               {
                 x: element.x + offsetX,
                 y: element.y + offsetY
               },
-              false
+              { informMutation: false, isDragging: false }
             );
-            updateBoundElements(element, this.scene.getNonDeletedElementsMap(), {
+            updateBoundElements(element, this.scene, {
               simultaneouslyUpdated: selectedElements
             });
           });
@@ -33567,7 +33906,8 @@ var App = class _App extends React43.Component {
                   if (!isElbowArrow(selectedElement)) {
                     this.setState({
                       editingLinearElement: new LinearElementEditor(
-                        selectedElement
+                        selectedElement,
+                        this.scene.getNonDeletedElementsMap()
                       )
                     });
                   }
@@ -33698,11 +34038,9 @@ var App = class _App extends React43.Component {
       if (isArrowKey(event.key)) {
         bindOrUnbindLinearElements(
           this.scene.getSelectedElements(this.state).filter(isLinearElement),
-          this.scene.getNonDeletedElementsMap(),
-          this.scene.getNonDeletedElements(),
-          this.scene,
           isBindingEnabled(this.state),
           this.state.selectedLinearElement?.selectedPointsIndices ?? [],
+          this.scene,
           this.state.zoom
         );
         this.setState({ suggestedBindings: [] });
@@ -33949,7 +34287,10 @@ var App = class _App extends React43.Component {
         const minHeight = getApproxMinLineHeight(fontSize, lineHeight);
         const newHeight = Math.max(container.height, minHeight);
         const newWidth = Math.max(container.width, minWidth);
-        mutateElement(container, { height: newHeight, width: newWidth });
+        this.scene.mutateElement(container, {
+          height: newHeight,
+          width: newWidth
+        });
         sceneX = container.x + newWidth / 2;
         sceneY = container.y + newHeight / 2;
         if (parentCenterPosition) {
@@ -33965,7 +34306,7 @@ var App = class _App extends React43.Component {
         x: sceneX,
         y: sceneY
       });
-      const element = existingTextElement ? existingTextElement : newTextElement({
+      const element = existingTextElement || newTextElement({
         x: parentCenterPosition ? parentCenterPosition.elementCenterX : sceneX,
         y: parentCenterPosition ? parentCenterPosition.elementCenterY : sceneY,
         strokeColor: this.state.currentItemStrokeColor,
@@ -33983,11 +34324,11 @@ var App = class _App extends React43.Component {
         containerId: shouldBindToContainer ? container?.id : void 0,
         groupIds: container?.groupIds ?? [],
         lineHeight,
-        angle: container?.angle ?? 0,
+        angle: container ? isArrowElement(container) ? 0 : container.angle : 0,
         frameId: topLayerFrame ? topLayerFrame.id : null
       });
       if (!existingTextElement && shouldBindToContainer && container) {
-        mutateElement(container, {
+        this.scene.mutateElement(container, {
           boundElements: (container.boundElements || []).concat({
             type: "text",
             id: element.id
@@ -34044,7 +34385,10 @@ var App = class _App extends React43.Component {
         if (event[KEYS.CTRL_OR_CMD] && (!this.state.editingLinearElement || this.state.editingLinearElement.elementId !== selectedElements[0].id) && !isElbowArrow(selectedElements[0])) {
           this.store.shouldCaptureIncrement();
           this.setState({
-            editingLinearElement: new LinearElementEditor(selectedElements[0])
+            editingLinearElement: new LinearElementEditor(
+              selectedElements[0],
+              this.scene.getNonDeletedElementsMap()
+            )
           });
           return;
         } else if (this.state.selectedLinearElement && isElbowArrow(selectedElements[0])) {
@@ -34062,7 +34406,11 @@ var App = class _App extends React43.Component {
           ) : -1;
           if (midPoint && midPoint > -1) {
             this.store.shouldCaptureIncrement();
-            LinearElementEditor.deleteFixedSegment(selectedElements[0], midPoint);
+            LinearElementEditor.deleteFixedSegment(
+              selectedElements[0],
+              this.scene,
+              midPoint
+            );
             const nextCoords = LinearElementEditor.getSegmentMidpointHitCoords(
               {
                 ...this.state.selectedLinearElement,
@@ -34346,8 +34694,7 @@ var App = class _App extends React43.Component {
           event,
           scenePointerX,
           scenePointerY,
-          this,
-          this.scene.getNonDeletedElementsMap()
+          this
         );
         if (editingLinearElement && editingLinearElement !== this.state.editingLinearElement) {
           flushSync2(() => {
@@ -34390,7 +34737,7 @@ var App = class _App extends React43.Component {
             pointFrom(scenePointerX - rx, scenePointerY - ry),
             lastPoint
           ) >= LINE_CONFIRM_THRESHOLD) {
-            mutateElement(
+            this.scene.mutateElement(
               multiElement,
               {
                 points: [
@@ -34398,7 +34745,7 @@ var App = class _App extends React43.Component {
                   pointFrom(scenePointerX - rx, scenePointerY - ry)
                 ]
               },
-              false
+              { informMutation: false, isDragging: false }
             );
           } else {
             setCursor(this.interactiveCanvas, CURSOR_TYPE.POINTER);
@@ -34408,12 +34755,12 @@ var App = class _App extends React43.Component {
           lastCommittedPoint
         ) < LINE_CONFIRM_THRESHOLD) {
           setCursor(this.interactiveCanvas, CURSOR_TYPE.POINTER);
-          mutateElement(
+          this.scene.mutateElement(
             multiElement,
             {
               points: points.slice(0, -1)
             },
-            false
+            { informMutation: false, isDragging: false }
           );
         } else {
           const [gridX, gridY] = getGridPoint(
@@ -34437,7 +34784,7 @@ var App = class _App extends React43.Component {
           if (isPathALoop(points, this.state.zoom.value)) {
             setCursor(this.interactiveCanvas, CURSOR_TYPE.POINTER);
           }
-          mutateElement(
+          this.scene.mutateElement(
             multiElement,
             {
               points: [
@@ -34448,9 +34795,9 @@ var App = class _App extends React43.Component {
                 )
               ]
             },
-            false,
             {
-              isDragging: true
+              isDragging: true,
+              informMutation: false
             }
           );
           this.triggerRender(false);
@@ -34601,80 +34948,14 @@ var App = class _App extends React43.Component {
         }));
       }
     });
-    __publicField(this, "handleEraser", (event, pointerDownState, scenePointer) => {
-      this.eraserTrail.addPointToPath(scenePointer.x, scenePointer.y);
-      let didChange = false;
-      const processedGroups = /* @__PURE__ */ new Set();
-      const nonDeletedElements = this.scene.getNonDeletedElements();
-      const processElements = (elements) => {
-        for (const element of elements) {
-          if (element.locked) {
-            return;
-          }
-          if (event.altKey) {
-            if (this.elementsPendingErasure.delete(element.id)) {
-              didChange = true;
-            }
-          } else if (!this.elementsPendingErasure.has(element.id)) {
-            didChange = true;
-            this.elementsPendingErasure.add(element.id);
-          }
-          if (didChange && element.groupIds?.length) {
-            const shallowestGroupId = element.groupIds.at(-1);
-            if (!processedGroups.has(shallowestGroupId)) {
-              processedGroups.add(shallowestGroupId);
-              const elems = getElementsInGroup(
-                nonDeletedElements,
-                shallowestGroupId
-              );
-              for (const elem of elems) {
-                if (event.altKey) {
-                  this.elementsPendingErasure.delete(elem.id);
-                } else {
-                  this.elementsPendingErasure.add(elem.id);
-                }
-              }
-            }
-          }
-        }
-      };
-      const distance2 = pointDistance(
-        pointFrom(pointerDownState.lastCoords.x, pointerDownState.lastCoords.y),
-        pointFrom(scenePointer.x, scenePointer.y)
+    __publicField(this, "handleEraser", (event, scenePointer) => {
+      const elementsToErase = this.eraserTrail.addPointToPath(
+        scenePointer.x,
+        scenePointer.y,
+        event.altKey
       );
-      const threshold = this.getElementHitThreshold();
-      const p = { ...pointerDownState.lastCoords };
-      let samplingInterval = 0;
-      while (samplingInterval <= distance2) {
-        const hitElements = this.getElementsAtPosition(p.x, p.y);
-        processElements(hitElements);
-        if (samplingInterval === distance2) {
-          break;
-        }
-        samplingInterval = Math.min(samplingInterval + threshold, distance2);
-        const distanceRatio = samplingInterval / distance2;
-        const nextX = (1 - distanceRatio) * p.x + distanceRatio * scenePointer.x;
-        const nextY = (1 - distanceRatio) * p.y + distanceRatio * scenePointer.y;
-        p.x = nextX;
-        p.y = nextY;
-      }
-      pointerDownState.lastCoords.x = scenePointer.x;
-      pointerDownState.lastCoords.y = scenePointer.y;
-      if (didChange) {
-        for (const element of this.scene.getNonDeletedElements()) {
-          if (isBoundToContainer(element) && (this.elementsPendingErasure.has(element.id) || this.elementsPendingErasure.has(element.containerId))) {
-            if (event.altKey) {
-              this.elementsPendingErasure.delete(element.id);
-              this.elementsPendingErasure.delete(element.containerId);
-            } else {
-              this.elementsPendingErasure.add(element.id);
-              this.elementsPendingErasure.add(element.containerId);
-            }
-          }
-        }
-        this.elementsPendingErasure = new Set(this.elementsPendingErasure);
-        this.triggerRender();
-      }
+      this.elementsPendingErasure = new Set(elementsToErase);
+      this.triggerRender();
     });
     // set touch moving for mobile context menu
     __publicField(this, "handleTouchMove", (event) => {
@@ -34843,7 +35124,7 @@ var App = class _App extends React43.Component {
         });
         const { x, y } = viewportCoordsToSceneCoords(event, this.state);
         const frame = this.getTopLayerFrameAtSceneCoords({ x, y });
-        mutateElement(pendingImageElement, {
+        this.scene.mutateElement(pendingImageElement, {
           x,
           y,
           frameId: frame ? frame.id : null
@@ -35480,14 +35761,14 @@ var App = class _App extends React43.Component {
       if (this.state.multiElement) {
         const { multiElement } = this.state;
         if (multiElement.type === "line" && isPathALoop(multiElement.points, this.state.zoom.value)) {
-          mutateElement(multiElement, {
+          this.scene.mutateElement(multiElement, {
             lastCommittedPoint: multiElement.points[multiElement.points.length - 1]
           });
           this.actionManager.executeAction(actionFinalize);
           return;
         }
         if (isElbowArrow(multiElement) && multiElement.points.length > 1) {
-          mutateElement(multiElement, {
+          this.scene.mutateElement(multiElement, {
             lastCommittedPoint: multiElement.points[multiElement.points.length - 1]
           });
           this.actionManager.executeAction(actionFinalize);
@@ -35513,7 +35794,7 @@ var App = class _App extends React43.Component {
             prevState
           )
         }));
-        mutateElement(multiElement, {
+        this.scene.mutateElement(multiElement, {
           lastCommittedPoint: multiElement.points[multiElement.points.length - 1]
         });
         setCursor(this.interactiveCanvas, CURSOR_TYPE.POINTER);
@@ -35578,7 +35859,7 @@ var App = class _App extends React43.Component {
             )
           };
         });
-        mutateElement(element, {
+        this.scene.mutateElement(element, {
           points: [...element.points, pointFrom(0, 0)]
         });
         const boundElement = getHoveredElementForBinding(
@@ -35740,12 +36021,12 @@ var App = class _App extends React43.Component {
         this.setImagePreviewCursor(resizedFile || imageFile);
       }
       const dataURL = this.files[fileId]?.dataURL || await getDataURL(imageFile);
-      const imageElement = mutateElement(
+      const imageElement = this.scene.mutateElement(
         _imageElement,
         {
           fileId
         },
-        false
+        { informMutation: false, isDragging: false }
       );
       return new Promise(
         async (resolve, reject) => {
@@ -35798,7 +36079,7 @@ var App = class _App extends React43.Component {
           showCursorImagePreview
         });
       } catch (error) {
-        mutateElement(imageElement, {
+        this.scene.mutateElement(imageElement, {
           isDeleted: true
         });
         this.actionManager.executeAction(actionFinalize);
@@ -35914,7 +36195,7 @@ var App = class _App extends React43.Component {
       if (!image || image instanceof Promise) {
         if (imageElement.width < DRAGGING_THRESHOLD / this.state.zoom.value && imageElement.height < DRAGGING_THRESHOLD / this.state.zoom.value) {
           const placeholderSize = 100 / this.state.zoom.value;
-          mutateElement(imageElement, {
+          this.scene.mutateElement(imageElement, {
             x: imageElement.x - placeholderSize / 2,
             y: imageElement.y - placeholderSize / 2,
             width: placeholderSize,
@@ -35936,7 +36217,7 @@ var App = class _App extends React43.Component {
         const width = height * (image.naturalWidth / image.naturalHeight);
         const x = imageElement.x + imageElement.width / 2 - width / 2;
         const y = imageElement.y + imageElement.height / 2 - height / 2;
-        mutateElement(imageElement, {
+        this.scene.mutateElement(imageElement, {
           x,
           y,
           width,
@@ -35993,7 +36274,7 @@ var App = class _App extends React43.Component {
     });
     /** generally you should use `addNewImagesToImageCache()` directly if you need
      *  to render new images. This is just a failsafe  */
-    __publicField(this, "scheduleImageRefresh", throttle3(() => {
+    __publicField(this, "scheduleImageRefresh", throttle4(() => {
       this.addNewImagesToImageCache();
     }, IMAGE_RENDER_TIMEOUT));
     __publicField(this, "updateBindingEnabledOnPointerMove", (event) => {
@@ -36234,7 +36515,10 @@ var App = class _App extends React43.Component {
               this.state,
               this
             ),
-            selectedLinearElement: isLinearElement(element) ? new LinearElementEditor(element) : null
+            selectedLinearElement: isLinearElement(element) ? new LinearElementEditor(
+              element,
+              this.scene.getNonDeletedElementsMap()
+            ) : null
           } : this.state,
           showHyperlinkPopup: false
         },
@@ -36260,8 +36544,9 @@ var App = class _App extends React43.Component {
           height: distance(pointerDownState.origin.y, pointerCoords.y),
           shouldMaintainAspectRatio: shouldMaintainAspectRatio(event),
           shouldResizeFromCenter: false,
+          scene: this.scene,
           zoom: this.state.zoom.value,
-          informMutation
+          informMutation: false
         });
         return;
       }
@@ -36308,6 +36593,7 @@ var App = class _App extends React43.Component {
         shouldMaintainAspectRatio: isImageElement(newElement2) ? !shouldMaintainAspectRatio(event) : shouldMaintainAspectRatio(event),
         shouldResizeFromCenter: shouldResizeFromCenter(event),
         zoom: this.state.zoom.value,
+        scene: this.scene,
         widthAspectRatio: aspectRatio,
         originOffset: this.state.originSnapOffset,
         informMutation
@@ -36362,7 +36648,7 @@ var App = class _App extends React43.Component {
             dragOffset,
             transformHandleType
           );
-          mutateElement(
+          this.scene.mutateElement(
             croppingElement,
             cropElement(
               croppingElement,
@@ -36374,16 +36660,12 @@ var App = class _App extends React43.Component {
               event.shiftKey ? croppingAtStateStart.width / croppingAtStateStart.height : void 0
             )
           );
-          updateBoundElements(
-            croppingElement,
-            this.scene.getNonDeletedElementsMap(),
-            {
-              newSize: {
-                width: croppingElement.width,
-                height: croppingElement.height
-              }
+          updateBoundElements(croppingElement, this.scene, {
+            newSize: {
+              width: croppingElement.width,
+              height: croppingElement.height
             }
-          );
+          });
           this.setState({
             isCropping: transformHandleType && transformHandleType !== "rotation",
             snapLines
@@ -36464,7 +36746,6 @@ var App = class _App extends React43.Component {
         pointerDownState.originalElements,
         transformHandleType,
         selectedElements,
-        this.scene.getElementsMapIncludingDeleted(),
         this.scene,
         shouldRotateWithDiscreteAngle(event),
         shouldResizeFromCenter(event),
@@ -36730,6 +37011,7 @@ var App = class _App extends React43.Component {
     if (excalidrawAPI) {
       const api = {
         updateScene: this.updateScene,
+        mutateElement: this.mutateElement,
         updateLibrary: this.library.updateLibrary,
         addFiles: this.addFiles,
         resetScene: this.resetScene,
@@ -37225,8 +37507,8 @@ var App = class _App extends React43.Component {
                           {
                             trails: [
                               this.laserTrails,
-                              this.eraserTrail,
-                              this.lassoTrail
+                              this.lassoTrail,
+                              this.eraserTrail
                             ]
                           }
                         ),
@@ -37234,7 +37516,7 @@ var App = class _App extends React43.Component {
                           Hyperlink,
                           {
                             element: firstSelectedElement,
-                            elementsMap: allElementsMap,
+                            scene: this.scene,
                             setAppState: this.setAppState,
                             onLinkOpen: this.props.onLinkOpen,
                             setToast: this.setToast,
@@ -37392,6 +37674,7 @@ var App = class _App extends React43.Component {
                             selectionNonce: this.state.selectionElement?.versionNonce,
                             scale: window.devicePixelRatio,
                             appState: this.state,
+                            renderScrollbars: this.props.renderScrollbars === true,
                             device: this.device,
                             renderInteractiveSceneCallback: this.renderInteractiveSceneCallback,
                             handleCanvasRef: this.handleInteractiveCanvasRef,
@@ -37841,8 +38124,7 @@ var App = class _App extends React43.Component {
             nonDeletedElementsMap
           )
         ),
-        this.scene.getNonDeletedElementsMap(),
-        this.scene.getNonDeletedElements()
+        this.scene
       );
     }
     this.store.commit(elementsMap, this.state);
@@ -37896,7 +38178,11 @@ var App = class _App extends React43.Component {
               firstImageYOffsetDone = true;
               y -= initializedImageElement.height / 2;
             }
-            mutateElement(initializedImageElement, { y }, false);
+            this.scene.mutateElement(
+              initializedImageElement,
+              { y },
+              { informMutation: false, isDragging: false }
+            );
             y = imageElement.y + imageElement.height + 25;
             nextSelectedIds[imageElement.id] = true;
           }
@@ -38059,7 +38345,7 @@ var App = class _App extends React43.Component {
       onChange: withBatchedUpdates((nextOriginalText) => {
         updateElement(nextOriginalText, false);
         if (isNonDeletedElement(element)) {
-          updateBoundElements(element, this.scene.getNonDeletedElementsMap());
+          updateBoundElements(element, this.scene);
         }
       }),
       onSubmit: withBatchedUpdates(({ viaKeyboard, nextOriginalText }) => {
@@ -38378,7 +38664,8 @@ var App = class _App extends React43.Component {
       },
       drag: {
         hasOccurred: false,
-        offset: null
+        offset: null,
+        origin: { ...origin }
       },
       eventListeners: {
         onMove: null,
@@ -38523,7 +38810,7 @@ var App = class _App extends React43.Component {
           index,
           gridX2,
           gridY2,
-          this.scene.getNonDeletedElementsMap()
+          this.scene
         );
         flushSync2(() => {
           if (this.state.selectedLinearElement) {
@@ -38557,7 +38844,7 @@ var App = class _App extends React43.Component {
         return;
       }
       if (isEraserActive(this.state)) {
-        this.handleEraser(event, pointerDownState, pointerCoords);
+        this.handleEraser(event, pointerCoords);
         return;
       }
       if (this.state.activeTool.type === "laser") {
@@ -38600,7 +38887,7 @@ var App = class _App extends React43.Component {
             pointerCoords,
             this,
             !event[KEYS.CTRL_OR_CMD],
-            elementsMap
+            this.scene
           );
           if (!ret) {
             return;
@@ -38678,8 +38965,8 @@ var App = class _App extends React43.Component {
         pointerDownState.drag.hasOccurred = true;
         if (selectedElements.length > 0 && !pointerDownState.withCmdOrCtrl && !this.state.editingTextElement && this.state.activeEmbeddable?.state !== "active") {
           const dragOffset = {
-            x: pointerCoords.x - pointerDownState.origin.x,
-            y: pointerCoords.y - pointerDownState.origin.y
+            x: pointerCoords.x - pointerDownState.drag.origin.x,
+            y: pointerCoords.y - pointerDownState.drag.origin.y
           };
           const originalElements = [
             ...pointerDownState.originalElements.values()
@@ -38758,7 +39045,7 @@ var App = class _App extends React43.Component {
                     image.naturalHeight - crop.height
                   )
                 };
-                mutateElement(croppingElement, {
+                this.scene.mutateElement(croppingElement, {
                   crop: nextCrop
                 });
                 return;
@@ -38818,46 +39105,90 @@ var App = class _App extends React43.Component {
             const idsOfElementsToDuplicate = new Map(
               selectedElements2.map((el) => [el.id, el])
             );
-            const { newElements: clonedElements, elementsWithClones } = duplicateElements({
+            const {
+              duplicatedElements,
+              duplicateElementsMap,
+              elementsWithDuplicates,
+              origIdToDuplicateId
+            } = duplicateElements({
               type: "in-place",
               elements,
               appState: this.state,
               randomizeSeed: true,
               idsOfElementsToDuplicate,
-              overrides: (el) => {
+              overrides: ({ duplicateElement: duplicateElement2, origElement }) => {
+                return {
+                  // reset to the original element's frameId (unless we've
+                  // duplicated alongside a frame in which case we need to
+                  // keep the duplicate frame's id) so that the element
+                  // frame membership is refreshed on pointerup
+                  // NOTE this is a hacky solution and should be done
+                  // differently
+                  frameId: duplicateElement2.frameId ?? origElement.frameId,
+                  seed: randomInteger()
+                };
+              }
+            });
+            duplicatedElements.forEach((element) => {
+              pointerDownState.originalElements.set(
+                element.id,
+                deepCopyElement(element)
+              );
+            });
+            const mappedClonedElements = elementsWithDuplicates.map((el) => {
+              if (idsOfElementsToDuplicate.has(el.id)) {
                 const origEl = pointerDownState.originalElements.get(el.id);
                 if (origEl) {
-                  return {
+                  return newElementWith(el, {
                     x: origEl.x,
-                    y: origEl.y,
-                    seed: origEl.seed
-                  };
+                    y: origEl.y
+                  });
                 }
-                return {};
-              },
-              reverseOrder: true
-            });
-            clonedElements.forEach((element) => {
-              pointerDownState.originalElements.set(element.id, element);
+              }
+              return el;
             });
             const mappedNewSceneElements = this.props.onDuplicate?.(
-              elementsWithClones,
+              mappedClonedElements,
               elements
             );
-            const nextSceneElements = syncMovedIndices(
-              mappedNewSceneElements || elementsWithClones,
-              arrayToMap(clonedElements)
-            ).map((el) => {
-              if (idsOfElementsToDuplicate.has(el.id)) {
-                return newElementWith(el, {
-                  seed: randomInteger()
-                });
+            const elementsWithIndices = syncMovedIndices(
+              mappedNewSceneElements || mappedClonedElements,
+              arrayToMap(duplicatedElements)
+            );
+            flushSync2(() => {
+              if (pointerDownState.hit.element) {
+                const cloneId = origIdToDuplicateId.get(
+                  pointerDownState.hit.element.id
+                );
+                const clonedElement = cloneId && duplicateElementsMap.get(cloneId);
+                pointerDownState.hit.element = clonedElement || null;
               }
-              return el;
+              pointerDownState.hit.allHitElements = pointerDownState.hit.allHitElements.reduce(
+                (acc, origHitElement) => {
+                  const cloneId = origIdToDuplicateId.get(origHitElement.id);
+                  const clonedElement = cloneId && duplicateElementsMap.get(cloneId);
+                  if (clonedElement) {
+                    acc.push(clonedElement);
+                  }
+                  return acc;
+                },
+                []
+              );
+              pointerDownState.drag.origin = viewportCoordsToSceneCoords(
+                event,
+                this.state
+              );
+              this.setState((prevState) => ({
+                ...getSelectionStateForElements(
+                  duplicatedElements,
+                  this.scene.getNonDeletedElements(),
+                  prevState
+                )
+              }));
+              this.scene.replaceAllElements(elementsWithIndices);
+              this.maybeCacheVisibleGaps(event, selectedElements2, true);
+              this.maybeCacheReferenceSnapPoints(event, selectedElements2, true);
             });
-            this.scene.replaceAllElements(nextSceneElements);
-            this.maybeCacheVisibleGaps(event, selectedElements2, true);
-            this.maybeCacheReferenceSnapPoints(event, selectedElements2, true);
           }
           return;
         }
@@ -38909,13 +39240,16 @@ var App = class _App extends React43.Component {
           const discardPoint = lastPoint && lastPoint[0] === dx && lastPoint[1] === dy;
           if (!discardPoint) {
             const pressures = newElement2.simulatePressure ? newElement2.pressures : [...newElement2.pressures, event.pressure];
-            mutateElement(
+            this.scene.mutateElement(
               newElement2,
               {
                 points: [...points, pointFrom(dx, dy)],
                 pressures
               },
-              false
+              {
+                informMutation: false,
+                isDragging: false
+              }
             );
             this.setState({
               newElement: newElement2
@@ -38935,21 +39269,20 @@ var App = class _App extends React43.Component {
             ));
           }
           if (points.length === 1) {
-            mutateElement(
+            this.scene.mutateElement(
               newElement2,
               {
                 points: [...points, pointFrom(dx, dy)]
               },
-              false
+              { informMutation: false, isDragging: false }
             );
           } else if (points.length === 2 || points.length > 1 && isElbowArrow(newElement2)) {
-            mutateElement(
+            this.scene.mutateElement(
               newElement2,
               {
                 points: [...points.slice(0, -1), pointFrom(dx, dy)]
               },
-              false,
-              { isDragging: true }
+              { isDragging: true, informMutation: false }
             );
           }
           this.setState({
@@ -39035,7 +39368,10 @@ var App = class _App extends React43.Component {
                 this
               ),
               // select linear element only when we haven't box-selected anything else
-              selectedLinearElement: elementsWithinSelection.length === 1 && isLinearElement(elementsWithinSelection[0]) ? new LinearElementEditor(elementsWithinSelection[0]) : null,
+              selectedLinearElement: elementsWithinSelection.length === 1 && isLinearElement(elementsWithinSelection[0]) ? new LinearElementEditor(
+                elementsWithinSelection[0],
+                this.scene.getNonDeletedElementsMap()
+              ) : null,
               showHyperlinkPopup: elementsWithinSelection.length === 1 && (elementsWithinSelection[0].link || isEmbeddableElement(elementsWithinSelection[0])) ? "info" : false
             };
           });
@@ -39049,7 +39385,7 @@ var App = class _App extends React43.Component {
       const x = event.clientX;
       const dx = x - pointerDownState.lastCoords.x;
       this.translateCanvas({
-        scrollX: this.state.scrollX - dx / this.state.zoom.value
+        scrollX: this.state.scrollX - dx * (currentScrollBars.horizontal?.deltaMultiplier || 1) / this.state.zoom.value
       });
       pointerDownState.lastCoords.x = x;
       return true;
@@ -39058,7 +39394,7 @@ var App = class _App extends React43.Component {
       const y = event.clientY;
       const dy = y - pointerDownState.lastCoords.y;
       this.translateCanvas({
-        scrollY: this.state.scrollY - dy / this.state.zoom.value
+        scrollY: this.state.scrollY - dy * (currentScrollBars.vertical?.deltaMultiplier || 1) / this.state.zoom.value
       });
       pointerDownState.lastCoords.y = y;
       return true;
@@ -39106,7 +39442,7 @@ var App = class _App extends React43.Component {
         const element = elementsMap.get(pointerDownState.hit.element.id);
         if (isBindableElement(element)) {
           element.boundElements?.filter((e) => e.type === "arrow").map((e) => elementsMap.get(e.id)).filter((e) => isElbowArrow(e)).forEach((e) => {
-            !!e && mutateElement(e, {}, true);
+            !!e && this.scene.mutateElement(e, {});
           });
         }
       }
@@ -39134,7 +39470,10 @@ var App = class _App extends React43.Component {
             this.scene.getNonDeletedElementsMap()
           );
           if (element) {
-            mutateElement(element, {}, true);
+            this.scene.mutateElement(
+              element,
+              {}
+            );
           }
         }
         if (pointerDownState.hit?.element?.id !== this.state.selectedLinearElement.elementId) {
@@ -39156,7 +39495,6 @@ var App = class _App extends React43.Component {
               element,
               startBindingElement,
               endBindingElement,
-              elementsMap,
               this.scene
             );
           }
@@ -39210,7 +39548,7 @@ var App = class _App extends React43.Component {
           dx += 1e-4;
         }
         const pressures = newElement2.simulatePressure ? [] : [...newElement2.pressures, childEvent.pressure];
-        mutateElement(newElement2, {
+        this.scene.mutateElement(newElement2, {
           points: [...points, pointFrom(dx, dy)],
           pressures,
           lastCommittedPoint: pointFrom(dx, dy)
@@ -39251,15 +39589,19 @@ var App = class _App extends React43.Component {
           this.state
         );
         if (!pointerDownState.drag.hasOccurred && newElement2 && !multiElement) {
-          mutateElement(newElement2, {
-            points: [
-              ...newElement2.points,
-              pointFrom(
-                pointerCoords.x - newElement2.x,
-                pointerCoords.y - newElement2.y
-              )
-            ]
-          });
+          this.scene.mutateElement(
+            newElement2,
+            {
+              points: [
+                ...newElement2.points,
+                pointFrom(
+                  pointerCoords.x - newElement2.x,
+                  pointerCoords.y - newElement2.y
+                )
+              ]
+            },
+            { informMutation: false, isDragging: false }
+          );
           this.setState({
             multiElement: newElement2,
             newElement: newElement2
@@ -39270,8 +39612,7 @@ var App = class _App extends React43.Component {
               newElement2,
               this.state,
               pointerCoords,
-              this.scene.getNonDeletedElementsMap(),
-              this.scene.getNonDeletedElements()
+              this.scene
             );
           }
           this.setState({ suggestedBindings: [], startBoundElement: null });
@@ -39289,7 +39630,10 @@ var App = class _App extends React43.Component {
                 },
                 prevState
               ),
-              selectedLinearElement: new LinearElementEditor(newElement2)
+              selectedLinearElement: new LinearElementEditor(
+                newElement2,
+                this.scene.getNonDeletedElementsMap()
+              )
             }));
           } else {
             this.setState((prevState) => ({
@@ -39309,7 +39653,7 @@ var App = class _App extends React43.Component {
           newElement2.lineHeight
         );
         if (newElement2.width < minWidth) {
-          mutateElement(newElement2, {
+          this.scene.mutateElement(newElement2, {
             autoResize: true
           });
         }
@@ -39344,7 +39688,14 @@ var App = class _App extends React43.Component {
         );
       }
       if (newElement2) {
-        mutateElement(newElement2, getNormalizedDimensions(newElement2));
+        this.scene.mutateElement(
+          newElement2,
+          getNormalizedDimensions(newElement2),
+          {
+            informMutation: false,
+            isDragging: false
+          }
+        );
         this.scene.triggerUpdate();
       }
       if (pointerDownState.drag.hasOccurred) {
@@ -39361,7 +39712,7 @@ var App = class _App extends React43.Component {
                 frame,
                 this.scene.getNonDeletedElementsMap()
               )) {
-                mutateElement(linearElement, {
+                this.scene.mutateElement(linearElement, {
                   groupIds: []
                 });
                 removeElementsFromFrame(
@@ -39382,12 +39733,12 @@ var App = class _App extends React43.Component {
                 const index = element.groupIds.indexOf(
                   this.state.editingGroupId
                 );
-                mutateElement(
+                this.scene.mutateElement(
                   element,
                   {
                     groupIds: element.groupIds.slice(0, index)
                   },
-                  false
+                  { informMutation: false, isDragging: false }
                 );
               }
               nextElements.forEach((element) => {
@@ -39395,12 +39746,12 @@ var App = class _App extends React43.Component {
                   nextElements,
                   element.groupIds[element.groupIds.length - 1]
                 ).length < 2) {
-                  mutateElement(
+                  this.scene.mutateElement(
                     element,
                     {
                       groupIds: []
                     },
-                    false
+                    { informMutation: false, isDragging: false }
                   );
                 }
               });
@@ -39476,7 +39827,10 @@ var App = class _App extends React43.Component {
         const selectedElements = this.scene.getSelectedElements(this.state);
         if (selectedElements.length === 1) {
           this.setState({
-            selectedLinearElement: new LinearElementEditor(hitElement)
+            selectedLinearElement: new LinearElementEditor(
+              hitElement,
+              this.scene.getNonDeletedElementsMap()
+            )
           });
         }
       }
@@ -39568,7 +39922,10 @@ var App = class _App extends React43.Component {
                     this
                   ),
                   // set selectedLinearElement only if thats the only element selected
-                  selectedLinearElement: newSelectedElements.length === 1 && isLinearElement(newSelectedElements[0]) ? new LinearElementEditor(newSelectedElements[0]) : prevState.selectedLinearElement
+                  selectedLinearElement: newSelectedElements.length === 1 && isLinearElement(newSelectedElements[0]) ? new LinearElementEditor(
+                    newSelectedElements[0],
+                    this.scene.getNonDeletedElementsMap()
+                  ) : prevState.selectedLinearElement
                 };
               });
             }
@@ -39621,7 +39978,10 @@ var App = class _App extends React43.Component {
             ),
             selectedLinearElement: isLinearElement(hitElement) && // Don't set `selectedLinearElement` if its same as the hitElement, this is mainly to prevent resetting the `hoverPointIndex` to -1.
             // Future we should update the API to take care of setting the correct `hoverPointIndex` when initialized
-            prevState.selectedLinearElement?.elementId !== hitElement.id ? new LinearElementEditor(hitElement) : prevState.selectedLinearElement
+            prevState.selectedLinearElement?.elementId !== hitElement.id ? new LinearElementEditor(
+              hitElement,
+              this.scene.getNonDeletedElementsMap()
+            ) : prevState.selectedLinearElement
           }));
         }
       }
@@ -39681,11 +40041,9 @@ var App = class _App extends React43.Component {
         const linearElements = this.scene.getSelectedElements(this.state).filter(isLinearElement);
         bindOrUnbindLinearElements(
           linearElements,
-          this.scene.getNonDeletedElementsMap(),
-          this.scene.getNonDeletedElements(),
-          this.scene,
           isBindingEnabled(this.state),
           this.state.selectedLinearElement?.selectedPointsIndices ?? [],
+          this.scene,
           this.state.zoom
         );
       }
@@ -40136,7 +40494,7 @@ var polyfill = () => {
 var polyfill_default = polyfill;
 
 // data/reconcile.ts
-import throttle4 from "lodash.throttle";
+import throttle5 from "lodash.throttle";
 var shouldDiscardRemoteElement = (localAppState, local, remote) => {
   if (local && // local element is being edited
   (local.id === localAppState.editingTextElement?.id || local.id === localAppState.resizingElement?.id || local.id === localAppState.newElement?.id || // TODO: Is this still valid? As newElement is selection element, which is never part of the elements array
@@ -40148,7 +40506,7 @@ var shouldDiscardRemoteElement = (localAppState, local, remote) => {
   }
   return false;
 };
-var validateIndicesThrottled = throttle4(
+var validateIndicesThrottled2 = throttle5(
   (orderedElements, localElements, remoteElements) => {
     if (isDevEnv() || isTestEnv() || window?.DEBUG_FRACTIONAL_INDICES) {
       const elements = syncInvalidIndices(
@@ -40196,7 +40554,7 @@ var reconcileElements = (localElements, remoteElements, localAppState) => {
     }
   }
   const orderedElements = orderByFractionalIndex(reconciledElements);
-  validateIndicesThrottled(orderedElements, localElements, remoteElements);
+  validateIndicesThrottled2(orderedElements, localElements, remoteElements);
   syncInvalidIndices(orderedElements);
   return orderedElements;
 };
@@ -40273,7 +40631,8 @@ var ExcalidrawBase = (props) => {
     validateEmbeddable,
     renderEmbeddable,
     aiEnabled,
-    showDeprecatedFonts
+    showDeprecatedFonts,
+    renderScrollbars
   } = props;
   const canvasActions = props.UIOptions?.canvasActions;
   const UIOptions = {
@@ -40343,6 +40702,7 @@ var ExcalidrawBase = (props) => {
       renderEmbeddable,
       aiEnabled: aiEnabled !== false,
       showDeprecatedFonts,
+      renderScrollbars,
       children
     }
   ) }) });