@dwelle/excalidraw 0.5.0-bb58eff → 0.5.0-bcfbd91

package/dist/dev/index.js

@@ -18,7 +18,7 @@ var __export = (target, all) => {
 var define_import_meta_env_default;
 var init_define_import_meta_env = __esm({
   "<define:import.meta.env>"() {
-    define_import_meta_env_default = { VITE_APP_BACKEND_V2_GET_URL: "https://json-dev.excalidraw.com/api/v2/", VITE_APP_BACKEND_V2_POST_URL: "https://json-dev.excalidraw.com/api/v2/post/", VITE_APP_LIBRARY_URL: "https://libraries.excalidraw.com", VITE_APP_LIBRARY_BACKEND: "https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries", VITE_APP_WS_SERVER_URL: "http://localhost:3002", VITE_APP_PLUS_LP: "https://plus.excalidraw.com", VITE_APP_PLUS_APP: "https://app.excalidraw.com", VITE_APP_AI_BACKEND: "http://localhost:3015", VITE_APP_FIREBASE_CONFIG: '{"apiKey":"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8","authDomain":"excalidraw-oss-dev.firebaseapp.com","projectId":"excalidraw-oss-dev","storageBucket":"excalidraw-oss-dev.appspot.com","messagingSenderId":"664559512677","appId":"1:664559512677:web:a385181f2928d328a7aa8c"}', VITE_APP_DEV_ENABLE_SW: "", VITE_APP_DEV_DISABLE_LIVE_RELOAD: "", VITE_APP_DISABLE_TRACKING: "true", FAST_REFRESH: "false", VITE_APP_PORT: "3000", VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX: "", VITE_APP_COLLAPSE_OVERLAY: "true", VITE_APP_ENABLE_ESLINT: "true", VITE_PKG_NAME: "@excalidraw/excalidraw", VITE_PKG_VERSION: "0.5.0-bb58eff", VITE_IS_EXCALIDRAW_NPM_PACKAGE: true, DEV: true };
+    define_import_meta_env_default = { VITE_APP_BACKEND_V2_GET_URL: "https://json-dev.excalidraw.com/api/v2/", VITE_APP_BACKEND_V2_POST_URL: "https://json-dev.excalidraw.com/api/v2/post/", VITE_APP_LIBRARY_URL: "https://libraries.excalidraw.com", VITE_APP_LIBRARY_BACKEND: "https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries", VITE_APP_WS_SERVER_URL: "http://localhost:3002", VITE_APP_PLUS_LP: "https://plus.excalidraw.com", VITE_APP_PLUS_APP: "https://app.excalidraw.com", VITE_APP_AI_BACKEND: "http://localhost:3015", VITE_APP_FIREBASE_CONFIG: '{"apiKey":"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8","authDomain":"excalidraw-oss-dev.firebaseapp.com","projectId":"excalidraw-oss-dev","storageBucket":"excalidraw-oss-dev.appspot.com","messagingSenderId":"664559512677","appId":"1:664559512677:web:a385181f2928d328a7aa8c"}', VITE_APP_DEV_ENABLE_SW: "", VITE_APP_DEV_DISABLE_LIVE_RELOAD: "", VITE_APP_DISABLE_TRACKING: "true", FAST_REFRESH: "false", VITE_APP_PORT: "3000", VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX: "", VITE_APP_COLLAPSE_OVERLAY: "true", VITE_APP_ENABLE_ESLINT: "true", VITE_PKG_NAME: "@excalidraw/excalidraw", VITE_PKG_VERSION: "0.5.0-bcfbd91", VITE_IS_EXCALIDRAW_NPM_PACKAGE: true, DEV: true };
   }
 });
 
@@ -49,7 +49,7 @@ var init_ = __esm({
       "./locales/da-DK.json": () => import("./da-DK-WBEQB3CJ.json"),
       "./locales/de-DE.json": () => import("./de-DE-VEIMCP7R.json"),
       "./locales/el-GR.json": () => import("./el-GR-TKRKG5GQ.json"),
-      "./locales/en.json": () => import("./en-54AU74IP.json"),
+      "./locales/en.json": () => import("./en-JBWHKG2R.json"),
       "./locales/es-ES.json": () => import("./es-ES-TOLWEZNW.json"),
       "./locales/eu-ES.json": () => import("./eu-ES-7CDRJQWJ.json"),
       "./locales/fa-IR.json": () => import("./fa-IR-527E2XGU.json"),
@@ -100,7 +100,7 @@ var init_ = __esm({
 });
 
 // i18n.ts
-import fallbackLangData from "./en-54AU74IP.json";
+import fallbackLangData from "./en-JBWHKG2R.json";
 import percentages from "./percentages-UCQDHIQF.json";
 import { atom, useAtomValue } from "jotai";
 var COMPLETION_THRESHOLD, defaultLang, languages, TEST_LANG_CODE, currentLang, currentLangData, setLanguage, getLanguage, findPartsForData, t, editorLangCodeAtom, useI18n;
@@ -287,7 +287,7 @@ var init_Spinner2 = __esm({
 });
 
 // constants.ts
-var isDarwin, isWindows, isAndroid, isFirefox, isChrome, isSafari, isIOS, isBrave, supportsResizeObserver, APP_NAME, DRAGGING_THRESHOLD, LINE_CONFIRM_THRESHOLD, ELEMENT_SHIFT_TRANSLATE_AMOUNT, ELEMENT_TRANSLATE_AMOUNT, TEXT_TO_CENTER_SNAP_THRESHOLD, SHIFT_LOCKING_ANGLE, DEFAULT_LASER_COLOR, CURSOR_TYPE, POINTER_BUTTON, POINTER_EVENTS, YOUTUBE_STATES, ENV, CLASSES, FONT_FAMILY, THEME, FRAME_STYLE, WINDOWS_EMOJI_FALLBACK_FONT, MIN_FONT_SIZE, DEFAULT_FONT_SIZE, DEFAULT_FONT_FAMILY, DEFAULT_TEXT_ALIGN, DEFAULT_VERTICAL_ALIGN, DEFAULT_TRANSFORM_HANDLE_SPACING, DEFAULT_ZOOM_VALUE, COLOR_WHITE, COLOR_CHARCOAL_BLACK, COLOR_TRANSPARENT, COLOR_VOICE_CALL, GRID_SIZE, IMAGE_MIME_TYPES, ALLOWED_PASTE_MIME_TYPES, MIME_TYPES, EXPORT_IMAGE_TYPES, EXPORT_DATA_TYPES, EXPORT_SOURCE, IMAGE_RENDER_TIMEOUT, TAP_TWICE_TIMEOUT, TOUCH_CTX_MENU_TIMEOUT, SCROLL_TIMEOUT, ZOOM_STEP, MIN_ZOOM, HYPERLINK_TOOLTIP_DELAY, THEME_FILTER, URL_QUERY_KEYS, URL_HASH_KEYS, DEFAULT_UI_OPTIONS, MQ_MAX_WIDTH_PORTRAIT, MQ_MAX_WIDTH_LANDSCAPE, MQ_MAX_HEIGHT_LANDSCAPE, MQ_RIGHT_SIDEBAR_MIN_WIDTH, LIBRARY_SIDEBAR_WIDTH, MAX_DECIMALS_FOR_SVG_EXPORT, EXPORT_SCALES, DEFAULT_EXPORT_PADDING, DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT, MAX_ALLOWED_FILE_BYTES, SVG_NS, VERSIONS, BOUND_TEXT_PADDING, ARROW_LABEL_WIDTH_FRACTION, ARROW_LABEL_FONT_SIZE_TO_MIN_WIDTH_RATIO, VERTICAL_ALIGN, TEXT_ALIGN, ELEMENT_READY_TO_ERASE_OPACITY, DEFAULT_PROPORTIONAL_RADIUS, DEFAULT_ADAPTIVE_RADIUS, ROUNDNESS, ROUGHNESS, STROKE_WIDTH, DEFAULT_ELEMENT_PROPS, LIBRARY_SIDEBAR_TAB, DEFAULT_SIDEBAR, LIBRARY_DISABLED_TYPES, TOOL_TYPE, EDITOR_LS_KEYS, DEFAULT_FILENAME;
+var isDarwin, isWindows, isAndroid, isFirefox, isChrome, isSafari, isIOS, isBrave, APP_NAME, DRAGGING_THRESHOLD, LINE_CONFIRM_THRESHOLD, ELEMENT_SHIFT_TRANSLATE_AMOUNT, ELEMENT_TRANSLATE_AMOUNT, TEXT_TO_CENTER_SNAP_THRESHOLD, SHIFT_LOCKING_ANGLE, DEFAULT_LASER_COLOR, CURSOR_TYPE, POINTER_BUTTON, POINTER_EVENTS, YOUTUBE_STATES, ENV, CLASSES, FONT_FAMILY, THEME, FRAME_STYLE, WINDOWS_EMOJI_FALLBACK_FONT, MIN_FONT_SIZE, DEFAULT_FONT_SIZE, DEFAULT_FONT_FAMILY, DEFAULT_TEXT_ALIGN, DEFAULT_VERTICAL_ALIGN, DEFAULT_TRANSFORM_HANDLE_SPACING, DEFAULT_ZOOM_VALUE, COLOR_WHITE, COLOR_CHARCOAL_BLACK, COLOR_TRANSPARENT, GRID_SIZE, IMAGE_MIME_TYPES, ALLOWED_PASTE_MIME_TYPES, MIME_TYPES, EXPORT_IMAGE_TYPES, EXPORT_DATA_TYPES, EXPORT_SOURCE, IMAGE_RENDER_TIMEOUT, TAP_TWICE_TIMEOUT, TOUCH_CTX_MENU_TIMEOUT, SCROLL_TIMEOUT, ZOOM_STEP, MIN_ZOOM, HYPERLINK_TOOLTIP_DELAY, THEME_FILTER, URL_QUERY_KEYS, URL_HASH_KEYS, DEFAULT_UI_OPTIONS, MQ_MAX_WIDTH_PORTRAIT, MQ_MAX_WIDTH_LANDSCAPE, MQ_MAX_HEIGHT_LANDSCAPE, MQ_RIGHT_SIDEBAR_MIN_WIDTH, LIBRARY_SIDEBAR_WIDTH, MAX_DECIMALS_FOR_SVG_EXPORT, EXPORT_SCALES, DEFAULT_EXPORT_PADDING, DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT, MAX_ALLOWED_FILE_BYTES, SVG_NS, VERSIONS, BOUND_TEXT_PADDING, ARROW_LABEL_WIDTH_FRACTION, ARROW_LABEL_FONT_SIZE_TO_MIN_WIDTH_RATIO, VERTICAL_ALIGN, TEXT_ALIGN, ELEMENT_READY_TO_ERASE_OPACITY, DEFAULT_PROPORTIONAL_RADIUS, DEFAULT_ADAPTIVE_RADIUS, ROUNDNESS, PRECEDING_ELEMENT_KEY, ROUGHNESS, STROKE_WIDTH, DEFAULT_ELEMENT_PROPS, LIBRARY_SIDEBAR_TAB, DEFAULT_SIDEBAR, LIBRARY_DISABLED_TYPES, TOOL_TYPE, EDITOR_LS_KEYS, DEFAULT_FILENAME;
 var init_constants = __esm({
   "constants.ts"() {
     "use strict";
@@ -301,7 +301,6 @@ var init_constants = __esm({
     isIOS = /iPad|iPhone/.test(navigator.platform) || // iPadOS 13+
     navigator.userAgent.includes("Mac") && "ontouchend" in document;
     isBrave = () => navigator.brave?.isBrave?.name === "isBrave";
-    supportsResizeObserver = typeof window !== "undefined" && "ResizeObserver" in window;
     APP_NAME = "Excalidraw";
     DRAGGING_THRESHOLD = 10;
     LINE_CONFIRM_THRESHOLD = 8;
@@ -383,7 +382,6 @@ var init_constants = __esm({
     COLOR_WHITE = "#ffffff";
     COLOR_CHARCOAL_BLACK = "#1e1e1e";
     COLOR_TRANSPARENT = "transparent";
-    COLOR_VOICE_CALL = "#a2f1a6";
     GRID_SIZE = 20;
     IMAGE_MIME_TYPES = {
       svg: "image/svg+xml",
@@ -497,6 +495,7 @@ var init_constants = __esm({
       // (see DEFAULT_ADAPTIVE_RADIUS constant)
       ADAPTIVE_RADIUS: 3
     };
+    PRECEDING_ELEMENT_KEY = "__precedingElement__";
     ROUGHNESS = {
       architect: 0,
       artist: 1,
@@ -1061,14 +1060,6 @@ var init_utils = __esm({
       const aKeys = Object.keys(objA);
       const bKeys = Object.keys(objB);
       if (aKeys.length !== bKeys.length) {
-        if (debug) {
-          console.warn(
-            `%cisShallowEqual: objects don't have same properties ->`,
-            "color: #8B4000",
-            objA,
-            objB
-          );
-        }
         return false;
       }
       if (comparators && Array.isArray(comparators)) {
@@ -1324,202 +1315,6 @@ var init_random = __esm({
   }
 });
 
-// errors.ts
-var CanvasError, AbortError, ImageSceneDataError, InvalidFractionalIndexError;
-var init_errors = __esm({
-  "errors.ts"() {
-    "use strict";
-    init_define_import_meta_env();
-    CanvasError = class extends Error {
-      constructor(message = "Couldn't export canvas.", name = "CANVAS_ERROR") {
-        super();
-        this.name = name;
-        this.message = message;
-      }
-    };
-    AbortError = class extends DOMException {
-      constructor(message = "Request Aborted") {
-        super(message, "AbortError");
-      }
-    };
-    ImageSceneDataError = class extends Error {
-      code;
-      constructor(message = "Image Scene Data Error", code = "IMAGE_SCENE_DATA_ERROR") {
-        super(message);
-        this.name = "EncodingError";
-        this.code = code;
-      }
-    };
-    InvalidFractionalIndexError = class extends Error {
-      code = "ELEMENT_HAS_INVALID_INDEX";
-    };
-  }
-});
-
-// fractionalIndex.ts
-import { generateNKeysBetween } from "fractional-indexing";
-var validateFractionalIndices, syncMovedIndices, syncInvalidIndices, getMovedIndicesGroups, getInvalidIndicesGroups, isValidFractionalIndex, generateIndices;
-var init_fractionalIndex = __esm({
-  "fractionalIndex.ts"() {
-    "use strict";
-    init_define_import_meta_env();
-    init_mutateElement();
-    init_errors();
-    validateFractionalIndices = (indices) => {
-      for (const [i, index] of indices.entries()) {
-        const predecessorIndex = indices[i - 1];
-        const successorIndex = indices[i + 1];
-        if (!isValidFractionalIndex(index, predecessorIndex, successorIndex)) {
-          throw new InvalidFractionalIndexError(
-            `Fractional indices invariant for element has been compromised - ["${predecessorIndex}", "${index}", "${successorIndex}"] [predecessor, current, successor]`
-          );
-        }
-      }
-    };
-    syncMovedIndices = (elements, movedElements) => {
-      try {
-        const indicesGroups = getMovedIndicesGroups(elements, movedElements);
-        const elementsUpdates = generateIndices(elements, indicesGroups);
-        validateFractionalIndices(
-          elements.map((x) => elementsUpdates.get(x)?.index || x.index)
-        );
-        for (const [element, update] of elementsUpdates) {
-          mutateElement(element, update, false);
-        }
-      } catch (e) {
-        syncInvalidIndices(elements);
-      }
-      return elements;
-    };
-    syncInvalidIndices = (elements) => {
-      const indicesGroups = getInvalidIndicesGroups(elements);
-      const elementsUpdates = generateIndices(elements, indicesGroups);
-      for (const [element, update] of elementsUpdates) {
-        mutateElement(element, update, false);
-      }
-      return elements;
-    };
-    getMovedIndicesGroups = (elements, movedElements) => {
-      const indicesGroups = [];
-      let i = 0;
-      while (i < elements.length) {
-        if (movedElements.has(elements[i].id) && !isValidFractionalIndex(
-          elements[i]?.index,
-          elements[i - 1]?.index,
-          elements[i + 1]?.index
-        )) {
-          const indicesGroup = [i - 1, i];
-          while (++i < elements.length) {
-            if (!(movedElements.has(elements[i].id) && !isValidFractionalIndex(
-              elements[i]?.index,
-              elements[i - 1]?.index,
-              elements[i + 1]?.index
-            ))) {
-              break;
-            }
-            indicesGroup.push(i);
-          }
-          indicesGroup.push(i);
-          indicesGroups.push(indicesGroup);
-        } else {
-          i++;
-        }
-      }
-      return indicesGroups;
-    };
-    getInvalidIndicesGroups = (elements) => {
-      const indicesGroups = [];
-      let lowerBound = void 0;
-      let upperBound = void 0;
-      let lowerBoundIndex = -1;
-      let upperBoundIndex = 0;
-      const getLowerBound = (index) => {
-        const lowerBound2 = elements[lowerBoundIndex] ? elements[lowerBoundIndex].index : void 0;
-        const candidate = elements[index - 1]?.index;
-        if (!lowerBound2 && candidate || // first lowerBound
-        lowerBound2 && candidate && candidate > lowerBound2) {
-          return [candidate, index - 1];
-        }
-        return [lowerBound2, lowerBoundIndex];
-      };
-      const getUpperBound = (index) => {
-        const upperBound2 = elements[upperBoundIndex] ? elements[upperBoundIndex].index : void 0;
-        if (upperBound2 && index < upperBoundIndex) {
-          return [upperBound2, upperBoundIndex];
-        }
-        let i2 = upperBoundIndex;
-        while (++i2 < elements.length) {
-          const candidate = elements[i2]?.index;
-          if (!upperBound2 && candidate || // first upperBound
-          upperBound2 && candidate && candidate > upperBound2) {
-            return [candidate, i2];
-          }
-        }
-        return [void 0, i2];
-      };
-      let i = 0;
-      while (i < elements.length) {
-        const current = elements[i].index;
-        [lowerBound, lowerBoundIndex] = getLowerBound(i);
-        [upperBound, upperBoundIndex] = getUpperBound(i);
-        if (!isValidFractionalIndex(current, lowerBound, upperBound)) {
-          const indicesGroup = [lowerBoundIndex, i];
-          while (++i < elements.length) {
-            const current2 = elements[i].index;
-            const [nextLowerBound, nextLowerBoundIndex] = getLowerBound(i);
-            const [nextUpperBound, nextUpperBoundIndex] = getUpperBound(i);
-            if (isValidFractionalIndex(current2, nextLowerBound, nextUpperBound)) {
-              break;
-            }
-            [lowerBound, lowerBoundIndex] = [nextLowerBound, nextLowerBoundIndex];
-            [upperBound, upperBoundIndex] = [nextUpperBound, nextUpperBoundIndex];
-            indicesGroup.push(i);
-          }
-          indicesGroup.push(upperBoundIndex);
-          indicesGroups.push(indicesGroup);
-        } else {
-          i++;
-        }
-      }
-      return indicesGroups;
-    };
-    isValidFractionalIndex = (index, predecessor, successor) => {
-      if (!index) {
-        return false;
-      }
-      if (predecessor && successor) {
-        return predecessor < index && index < successor;
-      }
-      if (!predecessor && successor) {
-        return index < successor;
-      }
-      if (predecessor && !successor) {
-        return predecessor < index;
-      }
-      return !!index;
-    };
-    generateIndices = (elements, indicesGroups) => {
-      const elementsUpdates = /* @__PURE__ */ new Map();
-      for (const indices of indicesGroups) {
-        const lowerBoundIndex = indices.shift();
-        const upperBoundIndex = indices.pop();
-        const fractionalIndices = generateNKeysBetween(
-          elements[lowerBoundIndex]?.index,
-          elements[upperBoundIndex]?.index,
-          indices.length
-        );
-        for (let i = 0; i < indices.length; i++) {
-          const element = elements[indices[i]];
-          elementsUpdates.set(element, {
-            index: fractionalIndices[i]
-          });
-        }
-      }
-      return elementsUpdates;
-    };
-  }
-});
-
 // scene/Scene.ts
 var getNonDeletedElements, hashSelectionOpts, isIdKey, Scene, Scene_default;
 var init_Scene = __esm({
@@ -1530,20 +1325,14 @@ var init_Scene = __esm({
     init_typeChecks();
     init_selection();
     init_random();
-    init_fractionalIndex();
-    init_utils();
     init_utils();
-    init_constants();
     getNonDeletedElements = (allElements) => {
       const elementsMap = /* @__PURE__ */ new Map();
       const elements = [];
       for (const element of allElements) {
         if (!element.isDeleted) {
           elements.push(element);
-          elementsMap.set(
-            element.id,
-            element
-          );
+          elementsMap.set(element.id, element);
         }
       }
       return { elementsMap, elements };
@@ -1590,7 +1379,6 @@ var init_Scene = __esm({
       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
       elements = [];
       nonDeletedFramesLikes = [];
       frames = [];
@@ -1682,15 +1470,9 @@ var init_Scene = __esm({
         return didChange;
       }
       replaceAllElements(nextElements) {
-        const _nextElements = (
-          // ts doesn't like `Array.isArray` of `instanceof Map`
-          nextElements instanceof Array ? nextElements : Array.from(nextElements.values())
-        );
+        this.elements = // ts doesn't like `Array.isArray` of `instanceof Map`
+        nextElements instanceof Array ? nextElements : Array.from(nextElements.values());
         const nextFrameLikes = [];
-        if (define_import_meta_env_default.DEV || define_import_meta_env_default.MODE === ENV.TEST) {
-          validateFractionalIndices(_nextElements.map((x) => x.index));
-        }
-        this.elements = syncInvalidIndices(_nextElements);
         this.elementsMap.clear();
         this.elements.forEach((element) => {
           if (isFrameLikeElement(element)) {
@@ -1725,8 +1507,8 @@ var init_Scene = __esm({
         };
       }
       destroy() {
-        this.elements = [];
         this.nonDeletedElements = [];
+        this.elements = [];
         this.nonDeletedFramesLikes = [];
         this.frames = [];
         this.elementsMap.clear();
@@ -1751,7 +1533,6 @@ var init_Scene = __esm({
           element,
           ...this.elements.slice(index)
         ];
-        syncMovedIndices(nextElements, arrayToMap([element]));
         this.replaceAllElements(nextElements);
       }
       insertElementsAtIndex(elements, index) {
@@ -1765,16 +1546,14 @@ var init_Scene = __esm({
           ...elements,
           ...this.elements.slice(index)
         ];
-        syncMovedIndices(nextElements, arrayToMap(elements));
         this.replaceAllElements(nextElements);
       }
-      insertElement = (element) => {
-        const index = element.frameId ? this.getElementIndex(element.frameId) : this.elements.length;
-        this.insertElementAtIndex(element, index);
-      };
-      insertElements = (elements) => {
-        const index = elements[0].frameId ? this.getElementIndex(elements[0].frameId) : this.elements.length;
-        this.insertElementsAtIndex(elements, index);
+      addNewElement = (element) => {
+        if (element.frameId) {
+          this.insertElementAtIndex(element, this.getElementIndex(element.frameId));
+        } else {
+          this.replaceAllElements([...this.elements, element]);
+        }
       };
       getElementIndex(elementId) {
         return this.elements.findIndex((element) => element.id === elementId);
@@ -7304,7 +7083,6 @@ var init_newElement = __esm({
       angle = 0,
       groupIds = [],
       frameId = null,
-      index = null,
       roundness = null,
       boundElements = null,
       link = null,
@@ -7328,7 +7106,6 @@ var init_newElement = __esm({
         opacity,
         groupIds,
         frameId,
-        index,
         roundness,
         seed: rest.seed ?? randomInteger(),
         version: rest.version || 1,
@@ -8452,6 +8229,35 @@ var init_staticSvgScene = __esm({
   }
 });
 
+// errors.ts
+var CanvasError, AbortError, ImageSceneDataError;
+var init_errors = __esm({
+  "errors.ts"() {
+    "use strict";
+    init_define_import_meta_env();
+    CanvasError = class extends Error {
+      constructor(message = "Couldn't export canvas.", name = "CANVAS_ERROR") {
+        super();
+        this.name = name;
+        this.message = message;
+      }
+    };
+    AbortError = class extends DOMException {
+      constructor(message = "Request Aborted") {
+        super(message, "AbortError");
+      }
+    };
+    ImageSceneDataError = class extends Error {
+      code;
+      constructor(message = "Image Scene Data Error", code = "IMAGE_SCENE_DATA_ERROR") {
+        super(message);
+        this.name = "EncodingError";
+        this.code = code;
+      }
+    };
+  }
+});
+
 // data/filesystem.ts
 import {
   fileOpen as _fileOpen,
@@ -8548,7 +8354,6 @@ var init_restore = __esm({
     init_utils();
     init_textElement();
     init_url();
-    init_fractionalIndex();
     AllowedExcalidrawActiveTools = {
       selection: true,
       text: true,
@@ -8586,7 +8391,6 @@ var init_restore = __esm({
         // newly added elements
         version: element.version || 1,
         versionNonce: element.versionNonce ?? 0,
-        index: element.index ?? null,
         isDeleted: element.isDeleted ?? false,
         id: element.id || randomId(),
         fillStyle: element.fillStyle || DEFAULT_ELEMENT_PROPS.fillStyle,
@@ -8617,6 +8421,9 @@ var init_restore = __esm({
       if ("customData" in element || "customData" in extra) {
         base.customData = "customData" in extra ? extra.customData : element.customData;
       }
+      if (PRECEDING_ELEMENT_KEY in element) {
+        base[PRECEDING_ELEMENT_KEY] = element[PRECEDING_ELEMENT_KEY];
+      }
       return {
         ...base,
         ...getNormalizedDimensions(base),
@@ -8767,28 +8574,23 @@ var init_restore = __esm({
     restoreElements = (elements, localElements, opts) => {
       const existingIds = /* @__PURE__ */ new Set();
       const localElementsMap = localElements ? arrayToMap(localElements) : null;
-      const restoredElements = syncInvalidIndices(
-        (elements || []).reduce((elements2, element) => {
-          if (element.type !== "selection" && !isInvisiblySmallElement(element)) {
-            let migratedElement = restoreElement(element);
-            if (migratedElement) {
-              const localElement = localElementsMap?.get(element.id);
-              if (localElement && localElement.version > migratedElement.version) {
-                migratedElement = bumpVersion(
-                  migratedElement,
-                  localElement.version
-                );
-              }
-              if (existingIds.has(migratedElement.id)) {
-                migratedElement = { ...migratedElement, id: randomId() };
-              }
-              existingIds.add(migratedElement.id);
-              elements2.push(migratedElement);
+      const restoredElements = (elements || []).reduce((elements2, element) => {
+        if (element.type !== "selection" && !isInvisiblySmallElement(element)) {
+          let migratedElement = restoreElement(element);
+          if (migratedElement) {
+            const localElement = localElementsMap?.get(element.id);
+            if (localElement && localElement.version > migratedElement.version) {
+              migratedElement = bumpVersion(migratedElement, localElement.version);
+            }
+            if (existingIds.has(migratedElement.id)) {
+              migratedElement = { ...migratedElement, id: randomId() };
             }
+            existingIds.add(migratedElement.id);
+            elements2.push(migratedElement);
           }
-          return elements2;
-        }, [])
-      );
+        }
+        return elements2;
+      }, []);
       if (!opts?.repairBindings) {
         return restoredElements;
       }
@@ -9794,11 +9596,10 @@ var init_staticScene = __esm({
     init_utils();
     strokeGrid = (context, gridSize, scrollX, scrollY, zoom, width, height) => {
       const BOLD_LINE_FREQUENCY = 5;
-      let GridLineColor;
-      ((GridLineColor2) => {
-        GridLineColor2["Bold"] = "#cccccc";
-        GridLineColor2["Regular"] = "#e5e5e5";
-      })(GridLineColor || (GridLineColor = {}));
+      const GridLineColor = {
+        Bold: "#cccccc",
+        Regular: "#e5e5e5"
+      };
       const offsetX = -Math.round(zoom.value / gridSize) * gridSize + scrollX % gridSize;
       const offsetY = -Math.round(zoom.value / gridSize) * gridSize + scrollY % gridSize;
       const lineWidth = Math.min(1 / zoom.value, 1);
@@ -9810,7 +9611,7 @@ var init_staticScene = __esm({
         const isBold = Math.round(x - scrollX) % (BOLD_LINE_FREQUENCY * gridSize) === 0;
         context.beginPath();
         context.setLineDash(isBold ? [] : lineDash);
-        context.strokeStyle = isBold ? "#cccccc" /* Bold */ : "#e5e5e5" /* Regular */;
+        context.strokeStyle = isBold ? GridLineColor.Bold : GridLineColor.Regular;
         context.moveTo(x, offsetY - gridSize);
         context.lineTo(x, offsetY + height + gridSize * 2);
         context.stroke();
@@ -9819,7 +9620,7 @@ var init_staticScene = __esm({
         const isBold = Math.round(y - scrollY) % (BOLD_LINE_FREQUENCY * gridSize) === 0;
         context.beginPath();
         context.setLineDash(isBold ? [] : lineDash);
-        context.strokeStyle = isBold ? "#cccccc" /* Bold */ : "#e5e5e5" /* Regular */;
+        context.strokeStyle = isBold ? GridLineColor.Bold : GridLineColor.Regular;
         context.moveTo(offsetX - gridSize, y);
         context.lineTo(offsetX + width + gridSize * 2, y);
         context.stroke();
@@ -10060,7 +9861,6 @@ var init_export = __esm({
     init_element();
     init_mutateElement();
     init_typeChecks();
-    init_fractionalIndex();
     init_staticScene();
     SVG_EXPORT_TAG = `<!-- svg-source:excalidraw -->`;
     truncateText = (element, maxWidth) => {
@@ -10297,7 +10097,7 @@ var init_export = __esm({
           arrayToMap(elementsForRender)
         ),
         allElementsMap: toBrandedType(
-          arrayToMap(syncInvalidIndices(elements))
+          arrayToMap(elements)
         ),
         visibleElements: elementsForRender,
         appState: {
@@ -14316,8 +14116,6 @@ __export(icons_exports, {
   laserPointerToolIcon: () => laserPointerToolIcon,
   menu: () => menu,
   mermaidLogoIcon: () => mermaidLogoIcon,
-  microphoneIcon: () => microphoneIcon,
-  microphoneMutedIcon: () => microphoneMutedIcon,
   palette: () => palette,
   playerPlayIcon: () => playerPlayIcon,
   playerStopFilledIcon: () => playerStopFilledIcon,
@@ -14343,7 +14141,7 @@ import React4 from "react";
 import oc2 from "open-color";
 import clsx3 from "clsx";
 import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var iconFillColor, handlerColor, createIcon, tablerIconProps, modifiedTablerIconProps, HomeIcon, LibraryIcon, PlusIcon, DotsIcon, PinIcon, UnlockedIcon, LockedIcon, WelcomeScreenMenuArrow, WelcomeScreenHelpArrow, WelcomeScreenTopToolbarArrow, ExcalLogo, SelectionIcon, RectangleIcon, DiamondIcon, EllipseIcon, ArrowIcon, LineIcon, PenModeIcon, FreedrawIcon, TextIcon, ImageIcon, EraserIcon, ZoomInIcon, ZoomOutIcon, TrashIcon, EmbedIcon, DuplicateIcon, MoonIcon, SunIcon, HamburgerMenuIcon, ExportIcon, HelpIcon, ExternalLinkIcon, GithubIcon, DiscordIcon, XBrandIcon, checkIcon, LinkIcon, save, saveAs, LoadIcon, clipboard, palette, ExportImageIcon, exportToFileIcon, zoomIn, zoomOut, done, menu, UndoIcon, RedoIcon, questionCircle, share, warning, shareIOS, shareWindows, resetZoom, BringForwardIcon, SendBackwardIcon, BringToFrontIcon, SendToBackIcon, AlignTopIcon, AlignBottomIcon, AlignLeftIcon, AlignRightIcon, DistributeHorizontallyIcon, DistributeVerticallyIcon, CenterVerticallyIcon, CenterHorizontallyIcon, usersIcon, start, stop, CloseIcon, back, clone, shield, file, GroupIcon, UngroupIcon, FillZigZagIcon, FillHachureIcon, FillCrossHatchIcon, FillSolidIcon, StrokeWidthBaseIcon, StrokeWidthBoldIcon, StrokeWidthExtraBoldIcon, StrokeStyleSolidIcon, StrokeStyleDashedIcon, StrokeStyleDottedIcon, SloppinessArchitectIcon, SloppinessArtistIcon, SloppinessCartoonistIcon, EdgeSharpIcon, EdgeRoundIcon, ArrowheadNoneIcon, ArrowheadArrowIcon, ArrowheadCircleIcon, ArrowheadCircleOutlineIcon, ArrowheadBarIcon, ArrowheadTriangleIcon, ArrowheadTriangleOutlineIcon, ArrowheadDiamondIcon, ArrowheadDiamondOutlineIcon, FontSizeSmallIcon, FontSizeMediumIcon, FontSizeLargeIcon, FontSizeExtraLargeIcon, FontFamilyNormalIcon, FontFamilyCodeIcon, TextAlignLeftIcon, TextAlignCenterIcon, TextAlignRightIcon, TextAlignTopIcon, TextAlignBottomIcon, TextAlignMiddleIcon, publishIcon, eraser, handIcon, downloadIcon, copyIcon, helpIcon, playerPlayIcon, playerStopFilledIcon, tablerCheckIcon, alertTriangleIcon, eyeDropperIcon, extraToolsIcon, frameToolIcon, mermaidLogoIcon, ArrowRightIcon, laserPointerToolIcon, MagicIcon, OpenAIIcon, fullscreenIcon, eyeIcon, eyeClosedIcon, brainIcon, searchIcon, microphoneIcon, microphoneMutedIcon;
+var iconFillColor, handlerColor, createIcon, tablerIconProps, modifiedTablerIconProps, HomeIcon, LibraryIcon, PlusIcon, DotsIcon, PinIcon, UnlockedIcon, LockedIcon, WelcomeScreenMenuArrow, WelcomeScreenHelpArrow, WelcomeScreenTopToolbarArrow, ExcalLogo, SelectionIcon, RectangleIcon, DiamondIcon, EllipseIcon, ArrowIcon, LineIcon, PenModeIcon, FreedrawIcon, TextIcon, ImageIcon, EraserIcon, ZoomInIcon, ZoomOutIcon, TrashIcon, EmbedIcon, DuplicateIcon, MoonIcon, SunIcon, HamburgerMenuIcon, ExportIcon, HelpIcon, ExternalLinkIcon, GithubIcon, DiscordIcon, XBrandIcon, checkIcon, LinkIcon, save, saveAs, LoadIcon, clipboard, palette, ExportImageIcon, exportToFileIcon, zoomIn, zoomOut, done, menu, UndoIcon, RedoIcon, questionCircle, share, warning, shareIOS, shareWindows, resetZoom, BringForwardIcon, SendBackwardIcon, BringToFrontIcon, SendToBackIcon, AlignTopIcon, AlignBottomIcon, AlignLeftIcon, AlignRightIcon, DistributeHorizontallyIcon, DistributeVerticallyIcon, CenterVerticallyIcon, CenterHorizontallyIcon, usersIcon, start, stop, CloseIcon, back, clone, shield, file, GroupIcon, UngroupIcon, FillZigZagIcon, FillHachureIcon, FillCrossHatchIcon, FillSolidIcon, StrokeWidthBaseIcon, StrokeWidthBoldIcon, StrokeWidthExtraBoldIcon, StrokeStyleSolidIcon, StrokeStyleDashedIcon, StrokeStyleDottedIcon, SloppinessArchitectIcon, SloppinessArtistIcon, SloppinessCartoonistIcon, EdgeSharpIcon, EdgeRoundIcon, ArrowheadNoneIcon, ArrowheadArrowIcon, ArrowheadCircleIcon, ArrowheadCircleOutlineIcon, ArrowheadBarIcon, ArrowheadTriangleIcon, ArrowheadTriangleOutlineIcon, ArrowheadDiamondIcon, ArrowheadDiamondOutlineIcon, FontSizeSmallIcon, FontSizeMediumIcon, FontSizeLargeIcon, FontSizeExtraLargeIcon, FontFamilyNormalIcon, FontFamilyCodeIcon, TextAlignLeftIcon, TextAlignCenterIcon, TextAlignRightIcon, TextAlignTopIcon, TextAlignBottomIcon, TextAlignMiddleIcon, publishIcon, eraser, handIcon, downloadIcon, copyIcon, helpIcon, playerPlayIcon, playerStopFilledIcon, tablerCheckIcon, alertTriangleIcon, eyeDropperIcon, extraToolsIcon, frameToolIcon, mermaidLogoIcon, ArrowRightIcon, laserPointerToolIcon, MagicIcon, OpenAIIcon, fullscreenIcon, eyeIcon, eyeClosedIcon, brainIcon, searchIcon;
 var init_icons = __esm({
   "components/icons.tsx"() {
     "use strict";
@@ -16134,7 +15932,7 @@ var init_icons = __esm({
       tablerIconProps
     );
     eyeIcon = createIcon(
-      /* @__PURE__ */ jsxs3("g", { stroke: "currentColor", fill: "none", strokeWidth: 1.5, children: [
+      /* @__PURE__ */ jsxs3("g", { stroke: "currentColor", fill: "none", children: [
         /* @__PURE__ */ jsx5("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
         /* @__PURE__ */ jsx5("path", { d: "M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" }),
         /* @__PURE__ */ jsx5("path", { d: "M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" })
@@ -16170,27 +15968,6 @@ var init_icons = __esm({
       ] }),
       tablerIconProps
     );
-    microphoneIcon = createIcon(
-      /* @__PURE__ */ jsxs3("g", { strokeWidth: 1.5, children: [
-        /* @__PURE__ */ jsx5("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
-        /* @__PURE__ */ jsx5("path", { d: "M9 2m0 3a3 3 0 0 1 3 -3h0a3 3 0 0 1 3 3v5a3 3 0 0 1 -3 3h0a3 3 0 0 1 -3 -3z" }),
-        /* @__PURE__ */ jsx5("path", { d: "M5 10a7 7 0 0 0 14 0" }),
-        /* @__PURE__ */ jsx5("path", { d: "M8 21l8 0" }),
-        /* @__PURE__ */ jsx5("path", { d: "M12 17l0 4" })
-      ] }),
-      tablerIconProps
-    );
-    microphoneMutedIcon = createIcon(
-      /* @__PURE__ */ jsxs3("g", { strokeWidth: 1.5, children: [
-        /* @__PURE__ */ jsx5("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
-        /* @__PURE__ */ jsx5("path", { d: "M3 3l18 18" }),
-        /* @__PURE__ */ jsx5("path", { d: "M9 5a3 3 0 0 1 6 0v5a3 3 0 0 1 -.13 .874m-2 2a3 3 0 0 1 -3.87 -2.872v-1" }),
-        /* @__PURE__ */ jsx5("path", { d: "M5 10a7 7 0 0 0 10.846 5.85m2 -2a6.967 6.967 0 0 0 1.152 -3.85" }),
-        /* @__PURE__ */ jsx5("path", { d: "M8 21l8 0" }),
-        /* @__PURE__ */ jsx5("path", { d: "M12 17l0 4" })
-      ] }),
-      tablerIconProps
-    );
   }
 });
 
@@ -16408,8 +16185,8 @@ var init_zindex = __esm({
   "zindex.ts"() {
     "use strict";
     init_define_import_meta_env();
+    init_mutateElement();
     init_typeChecks();
-    init_fractionalIndex();
     init_groups();
     init_scene();
     init_Scene();
@@ -16554,9 +16331,9 @@ var init_zindex = __esm({
     getTargetElementsMap = (elements, indices) => {
       return indices.reduce((acc, index) => {
         const element = elements[index];
-        acc.set(element.id, element);
+        acc[element.id] = element;
         return acc;
-      }, /* @__PURE__ */ new Map());
+      }, {});
     };
     shiftElementsByOne = (elements, appState, direction) => {
       const indicesToMove = getIndicesToMove(elements, appState);
@@ -16602,8 +16379,12 @@ var init_zindex = __esm({
           ...trailingElements
         ];
       });
-      syncMovedIndices(elements, targetElementsMap);
-      return elements;
+      return elements.map((element) => {
+        if (targetElementsMap[element.id]) {
+          return bumpVersion(element);
+        }
+        return element;
+      });
     };
     shiftElementsToEnd = (elements, appState, direction, containingFrame, elementsToBeMoved) => {
       const indicesToMove = getIndicesToMove(elements, appState, elementsToBeMoved);
@@ -16658,10 +16439,12 @@ var init_zindex = __esm({
           displacedElements.push(elements[index]);
         }
       }
-      const targetElements = Array.from(targetElementsMap.values());
+      const targetElements = Object.values(targetElementsMap).map((element) => {
+        return bumpVersion(element);
+      });
       const leadingElements = elements.slice(0, leadingIndex);
       const trailingElements = elements.slice(trailingIndex + 1);
-      const nextElements = direction === "left" ? [
+      return direction === "left" ? [
         ...leadingElements,
         ...targetElements,
         ...displacedElements,
@@ -16672,8 +16455,6 @@ var init_zindex = __esm({
         ...targetElements,
         ...trailingElements
       ];
-      syncMovedIndices(nextElements, targetElementsMap);
-      return nextElements;
     };
     moveOneLeft = (allElements, appState) => {
       return shiftElementsByOne(allElements, appState, "left");
@@ -16983,7 +16764,6 @@ var init_actionDuplicateSelection = __esm({
     init_icons();
     init_frame();
     init_selection();
-    init_fractionalIndex();
     actionDuplicateSelection = register({
       name: "duplicateSelection",
       trackEvent: { category: "element" },
@@ -17030,7 +16810,6 @@ var init_actionDuplicateSelection = __esm({
       const newElements = [];
       const oldElements = [];
       const oldIdToDuplicatedId = /* @__PURE__ */ new Map();
-      const duplicatedElementsMap = /* @__PURE__ */ new Map();
       const duplicateAndOffsetElement = (element) => {
         const newElement2 = duplicateElement(
           appState.editingGroupId,
@@ -17041,7 +16820,6 @@ var init_actionDuplicateSelection = __esm({
             y: element.y + GRID_SIZE / 2
           }
         );
-        duplicatedElementsMap.set(newElement2.id, newElement2);
         oldIdToDuplicatedId.set(element.id, newElement2.id);
         oldElements.push(element);
         newElements.push(newElement2);
@@ -17133,7 +16911,6 @@ var init_actionDuplicateSelection = __esm({
         }
       }
       const finalElements = finalElementsReversed.reverse();
-      syncMovedIndices(finalElements, arrayToMap([...oldElements, ...newElements]));
       bindTextToShapeAfterDuplication(
         elementsWithClones,
         oldElements,
@@ -21526,7 +21303,6 @@ var init_actionGroup = __esm({
     init_ToolButton();
     init_typeChecks();
     init_frame();
-    init_fractionalIndex();
     allElementsInSameGroup = (elements) => {
       if (elements.length >= 2) {
         const groupIds = elements[0].groupIds;
@@ -21610,12 +21386,11 @@ var init_actionGroup = __esm({
         const elementsBeforeGroup = nextElements.slice(0, lastGroupElementIndex).filter(
           (updatedElement) => !isElementInGroup(updatedElement, newGroupId)
         );
-        const reorderedElements = [
+        nextElements = [
           ...elementsBeforeGroup,
           ...elementsInGroup,
           ...elementsAfterGroup
         ];
-        syncMovedIndices(reorderedElements, arrayToMap(elementsInGroup));
         return {
           appState: {
             ...appState,
@@ -21625,7 +21400,7 @@ var init_actionGroup = __esm({
               getNonDeletedElements3(nextElements)
             )
           },
-          elements: reorderedElements,
+          elements: nextElements,
           commitToHistory: true
         };
       },
@@ -21735,46 +21510,6 @@ var init_actionGroup = __esm({
   }
 });
 
-// renderer/roundRect.ts
-var roundRect;
-var init_roundRect = __esm({
-  "renderer/roundRect.ts"() {
-    "use strict";
-    init_define_import_meta_env();
-    roundRect = (context, x, y, width, height, radius, strokeColor) => {
-      context.beginPath();
-      context.moveTo(x + radius, y);
-      context.lineTo(x + width - radius, y);
-      context.quadraticCurveTo(x + width, y, x + width, y + radius);
-      context.lineTo(x + width, y + height - radius);
-      context.quadraticCurveTo(
-        x + width,
-        y + height,
-        x + width - radius,
-        y + height
-      );
-      context.lineTo(x + radius, y + height);
-      context.quadraticCurveTo(x, y + height, x, y + height - radius);
-      context.lineTo(x, y + radius);
-      context.quadraticCurveTo(x, y, x + radius, y);
-      context.closePath();
-      context.fill();
-      if (strokeColor) {
-        context.strokeStyle = strokeColor;
-      }
-      context.stroke();
-    };
-  }
-});
-
-// types.ts
-var init_types = __esm({
-  "types.ts"() {
-    "use strict";
-    init_define_import_meta_env();
-  }
-});
-
 // clients.ts
 function hashToInteger(id) {
   let hash = 0;
@@ -21787,16 +21522,13 @@ function hashToInteger(id) {
   }
   return hash;
 }
-var getClientColor, getNameInitial, renderRemoteCursors;
+var getClientColor, getNameInitial;
 var init_clients = __esm({
   "clients.ts"() {
     "use strict";
     init_define_import_meta_env();
-    init_constants();
-    init_roundRect();
-    init_types();
-    getClientColor = (socketId, collaborator) => {
-      const hash = Math.abs(hashToInteger(collaborator?.id || socketId));
+    getClientColor = (id) => {
+      const hash = Math.abs(hashToInteger(id));
       const hue = hash % 37 * 10;
       const saturation = 100;
       const lightness = 83;
@@ -21806,162 +21538,6 @@ var init_clients = __esm({
       const firstCodePoint = name?.trim()?.codePointAt(0);
       return (firstCodePoint ? String.fromCodePoint(firstCodePoint) : "?").toUpperCase();
     };
-    renderRemoteCursors = ({
-      context,
-      renderConfig,
-      appState,
-      normalizedWidth,
-      normalizedHeight
-    }) => {
-      for (const [socketId, pointer] of renderConfig.remotePointerViewportCoords) {
-        let { x, y } = pointer;
-        const collaborator = appState.collaborators.get(socketId);
-        x -= appState.offsetLeft;
-        y -= appState.offsetTop;
-        const width = 11;
-        const height = 14;
-        const isOutOfBounds = x < 0 || x > normalizedWidth - width || y < 0 || y > normalizedHeight - height;
-        x = Math.max(x, 0);
-        x = Math.min(x, normalizedWidth - width);
-        y = Math.max(y, 0);
-        y = Math.min(y, normalizedHeight - height);
-        const background = getClientColor(socketId, collaborator);
-        context.save();
-        context.strokeStyle = background;
-        context.fillStyle = background;
-        const userState = renderConfig.remotePointerUserStates.get(socketId);
-        const isInactive = isOutOfBounds || userState === "idle" /* IDLE */ || userState === "away" /* AWAY */;
-        if (isInactive) {
-          context.globalAlpha = 0.3;
-        }
-        if (renderConfig.remotePointerButton.get(socketId) === "down") {
-          context.beginPath();
-          context.arc(x, y, 15, 0, 2 * Math.PI, false);
-          context.lineWidth = 3;
-          context.strokeStyle = "#ffffff88";
-          context.stroke();
-          context.closePath();
-          context.beginPath();
-          context.arc(x, y, 15, 0, 2 * Math.PI, false);
-          context.lineWidth = 1;
-          context.strokeStyle = background;
-          context.stroke();
-          context.closePath();
-        }
-        const IS_SPEAKING_COLOR = appState.theme === THEME.DARK ? "#2f6330" : COLOR_VOICE_CALL;
-        const isSpeaking = collaborator?.isSpeaking;
-        if (isSpeaking) {
-          context.fillStyle = IS_SPEAKING_COLOR;
-          context.strokeStyle = IS_SPEAKING_COLOR;
-          context.lineWidth = 10;
-          context.lineJoin = "round";
-          context.beginPath();
-          context.moveTo(x, y);
-          context.lineTo(x + 0, y + 14);
-          context.lineTo(x + 4, y + 9);
-          context.lineTo(x + 11, y + 8);
-          context.closePath();
-          context.stroke();
-          context.fill();
-        }
-        context.fillStyle = COLOR_WHITE;
-        context.strokeStyle = COLOR_WHITE;
-        context.lineWidth = 6;
-        context.lineJoin = "round";
-        context.beginPath();
-        context.moveTo(x, y);
-        context.lineTo(x + 0, y + 14);
-        context.lineTo(x + 4, y + 9);
-        context.lineTo(x + 11, y + 8);
-        context.closePath();
-        context.stroke();
-        context.fill();
-        context.fillStyle = background;
-        context.strokeStyle = background;
-        context.lineWidth = 2;
-        context.lineJoin = "round";
-        context.beginPath();
-        if (isInactive) {
-          context.moveTo(x - 1, y - 1);
-          context.lineTo(x - 1, y + 15);
-          context.lineTo(x + 5, y + 10);
-          context.lineTo(x + 12, y + 9);
-          context.closePath();
-          context.fill();
-        } else {
-          context.moveTo(x, y);
-          context.lineTo(x + 0, y + 14);
-          context.lineTo(x + 4, y + 9);
-          context.lineTo(x + 11, y + 8);
-          context.closePath();
-          context.fill();
-          context.stroke();
-        }
-        const username = renderConfig.remotePointerUsernames.get(socketId) || "";
-        if (!isOutOfBounds && username) {
-          context.font = "600 12px sans-serif";
-          const offsetX = (isSpeaking ? x + 0 : x) + width / 2;
-          const offsetY = (isSpeaking ? y + 0 : y) + height + 2;
-          const paddingHorizontal = 5;
-          const paddingVertical = 3;
-          const measure = context.measureText(username);
-          const measureHeight = measure.actualBoundingBoxDescent + measure.actualBoundingBoxAscent;
-          const finalHeight = Math.max(measureHeight, 12);
-          const boxX = offsetX - 1;
-          const boxY = offsetY - 1;
-          const boxWidth = measure.width + 2 + paddingHorizontal * 2 + 2;
-          const boxHeight = finalHeight + 2 + paddingVertical * 2 + 2;
-          if (context.roundRect) {
-            context.beginPath();
-            context.roundRect(boxX, boxY, boxWidth, boxHeight, 8);
-            context.fillStyle = background;
-            context.fill();
-            context.strokeStyle = COLOR_WHITE;
-            context.stroke();
-            if (isSpeaking) {
-              context.beginPath();
-              context.roundRect(boxX - 2, boxY - 2, boxWidth + 4, boxHeight + 4, 8);
-              context.strokeStyle = IS_SPEAKING_COLOR;
-              context.stroke();
-            }
-          } else {
-            roundRect(context, boxX, boxY, boxWidth, boxHeight, 8, COLOR_WHITE);
-          }
-          context.fillStyle = COLOR_CHARCOAL_BLACK;
-          context.fillText(
-            username,
-            offsetX + paddingHorizontal + 1,
-            offsetY + paddingVertical + measure.actualBoundingBoxAscent + Math.floor((finalHeight - measureHeight) / 2) + 2
-          );
-          if (isSpeaking) {
-            context.fillStyle = IS_SPEAKING_COLOR;
-            const barheight = 8;
-            const margin = 8;
-            const gap = 5;
-            context.fillRect(
-              boxX + boxWidth + margin,
-              boxY + (boxHeight / 2 - barheight / 2),
-              2,
-              barheight
-            );
-            context.fillRect(
-              boxX + boxWidth + margin + gap,
-              boxY + (boxHeight / 2 - barheight * 2 / 2),
-              2,
-              barheight * 2
-            );
-            context.fillRect(
-              boxX + boxWidth + margin + gap * 2,
-              boxY + (boxHeight / 2 - barheight / 2),
-              2,
-              barheight
-            );
-          }
-        }
-        context.restore();
-        context.closePath();
-      }
-    };
   }
 });
 
@@ -21987,28 +21563,39 @@ var init_Avatar2 = __esm({
       onClick,
       name,
       src,
-      className
+      isBeingFollowed,
+      isCurrentUser
     }) => {
       const shortName = getNameInitial(name);
       const [error, setError] = useState8(false);
       const loadImg = !error && src;
       const style = loadImg ? void 0 : { background: color };
-      return /* @__PURE__ */ jsx31("div", { className: clsx13("Avatar", className), style, onClick, children: loadImg ? /* @__PURE__ */ jsx31(
-        "img",
+      return /* @__PURE__ */ jsx31(
+        "div",
         {
-          className: "Avatar-img",
-          src,
-          alt: shortName,
-          referrerPolicy: "no-referrer",
-          onError: () => setError(true)
+          className: clsx13("Avatar", {
+            "Avatar--is-followed": isBeingFollowed,
+            "Avatar--is-current-user": isCurrentUser
+          }),
+          style,
+          onClick,
+          children: loadImg ? /* @__PURE__ */ jsx31(
+            "img",
+            {
+              className: "Avatar-img",
+              src,
+              alt: shortName,
+              referrerPolicy: "no-referrer",
+              onError: () => setError(true)
+            }
+          ) : shortName
         }
-      ) : shortName });
+      );
     };
   }
 });
 
 // actions/actionNavigate.tsx
-import clsx14 from "clsx";
 import { jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
 var actionGoToCollaborator;
 var init_actionNavigate = __esm({
@@ -22048,39 +21635,12 @@ var init_actionNavigate = __esm({
         };
       },
       PanelComponent: ({ updateData, data, appState }) => {
-        const { socketId, collaborator, withName, isBeingFollowed } = data;
-        const background = getClientColor(socketId, collaborator);
-        const statusClassNames = clsx14({
-          "is-followed": isBeingFollowed,
-          "is-current-user": collaborator.isCurrentUser === true,
-          "is-speaking": collaborator.isSpeaking,
-          "is-in-call": collaborator.isInCall,
-          "is-muted": collaborator.isMuted
-        });
-        const statusIconJSX = collaborator.isInCall ? collaborator.isSpeaking ? /* @__PURE__ */ jsxs18(
-          "div",
-          {
-            className: "UserList__collaborator-status-icon-speaking-indicator",
-            title: t("userList.hint.isSpeaking"),
-            children: [
-              /* @__PURE__ */ jsx32("div", {}),
-              /* @__PURE__ */ jsx32("div", {}),
-              /* @__PURE__ */ jsx32("div", {})
-            ]
-          }
-        ) : collaborator.isMuted ? /* @__PURE__ */ jsx32(
-          "div",
-          {
-            className: "UserList__collaborator-status-icon-microphone-muted",
-            title: t("userList.hint.micMuted"),
-            children: microphoneMutedIcon
-          }
-        ) : /* @__PURE__ */ jsx32("div", { title: t("userList.hint.inCall"), children: microphoneIcon }) : null;
+        const { clientId, collaborator, withName, isBeingFollowed } = data;
+        const background = getClientColor(clientId);
         return withName ? /* @__PURE__ */ jsxs18(
           "div",
           {
-            className: `dropdown-menu-item dropdown-menu-item-base UserList__collaborator ${statusClassNames}`,
-            style: { [`--avatar-size`]: "1.5rem" },
+            className: "dropdown-menu-item dropdown-menu-item-base UserList__collaborator",
             onClick: () => updateData(collaborator),
             children: [
               /* @__PURE__ */ jsx32(
@@ -22091,43 +21651,35 @@ var init_actionNavigate = __esm({
                   },
                   name: collaborator.username || "",
                   src: collaborator.avatarUrl,
-                  className: statusClassNames
+                  isBeingFollowed,
+                  isCurrentUser: collaborator.isCurrentUser === true
                 }
               ),
               /* @__PURE__ */ jsx32("div", { className: "UserList__collaborator-name", children: collaborator.username }),
-              /* @__PURE__ */ jsxs18("div", { className: "UserList__collaborator-status-icons", "aria-hidden": true, children: [
-                isBeingFollowed && /* @__PURE__ */ jsx32(
-                  "div",
-                  {
-                    className: "UserList__collaborator-status-icon-is-followed",
-                    title: t("userList.hint.followStatus"),
-                    children: eyeIcon
-                  }
-                ),
-                statusIconJSX
-              ] })
-            ]
-          }
-        ) : /* @__PURE__ */ jsxs18(
-          "div",
-          {
-            className: `UserList__collaborator UserList__collaborator--avatar-only ${statusClassNames}`,
-            children: [
               /* @__PURE__ */ jsx32(
-                Avatar,
+                "div",
                 {
-                  color: background,
-                  onClick: () => {
-                    updateData(collaborator);
-                  },
-                  name: collaborator.username || "",
-                  src: collaborator.avatarUrl,
-                  className: statusClassNames
+                  className: "UserList__collaborator-follow-status-icon",
+                  style: { visibility: isBeingFollowed ? "visible" : "hidden" },
+                  title: isBeingFollowed ? t("userList.hint.followStatus") : void 0,
+                  "aria-hidden": true,
+                  children: eyeIcon
                 }
-              ),
-              statusIconJSX && /* @__PURE__ */ jsx32("div", { className: "UserList__collaborator-status-icon", children: statusIconJSX })
+              )
             ]
           }
+        ) : /* @__PURE__ */ jsx32(
+          Avatar,
+          {
+            color: background,
+            onClick: () => {
+              updateData(collaborator);
+            },
+            name: collaborator.username || "",
+            src: collaborator.avatarUrl,
+            isBeingFollowed,
+            isCurrentUser: collaborator.isCurrentUser === true
+          }
         );
       }
     });
@@ -23102,7 +22654,6 @@ var init_actionBoundText = __esm({
     init_typeChecks();
     init_utils();
     init_register();
-    init_fractionalIndex();
     actionUnbindText = register({
       name: "unbindText",
       contextItemLabel: "labels.unbindText",
@@ -23223,7 +22774,6 @@ var init_actionBoundText = __esm({
         (ele) => ele.id === container.id
       );
       updatedElements.splice(containerIndex + 1, 0, textElement);
-      syncMovedIndices(updatedElements, arrayToMap([container, textElement]));
       return updatedElements;
     };
     pushContainerBelowText = (elements, container, textElement) => {
@@ -23236,7 +22786,6 @@ var init_actionBoundText = __esm({
         (ele) => ele.id === textElement.id
       );
       updatedElements.splice(textElementIndex, 0, container);
-      syncMovedIndices(updatedElements, arrayToMap([container, textElement]));
       return updatedElements;
     };
     actionWrapTextInContainer = register({
@@ -23357,7 +22906,7 @@ import {
   useRef as useRef10,
   useState as useState9
 } from "react";
-import clsx15 from "clsx";
+import clsx14 from "clsx";
 import { jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
 var CONTAINER_WIDTH, SPACE_BOTTOM, CONTAINER_PADDING, CONTAINER_HEIGHT, AUTO_HIDE_TIMEOUT, IS_HYPERLINK_TOOLTIP_VISIBLE, embeddableLinkCache, Hyperlink, getCoordsForPopover, getContextMenuLabel, HYPERLINK_TOOLTIP_TIMEOUT_ID, showHyperlinkTooltip, renderTooltip, hideHyperlinkToolip, shouldHideLinkPopup;
 var init_Hyperlink2 = __esm({
@@ -23532,7 +23081,7 @@ var init_Hyperlink2 = __esm({
             isEditing ? /* @__PURE__ */ jsx35(
               "input",
               {
-                className: clsx15("excalidraw-hyperlinkContainer-input"),
+                className: clsx14("excalidraw-hyperlinkContainer-input"),
                 placeholder: "Type or paste your link here",
                 ref: inputRef,
                 value: inputVal,
@@ -24014,7 +23563,6 @@ var init_actionHistory = __esm({
     init_binding();
     init_utils();
     init_constants();
-    init_fractionalIndex();
     writeData = (prevElements, appState, updater) => {
       const commitToHistory = false;
       if (!appState.multiElement && !appState.resizingElement && !appState.editingElement && !appState.draggingElement) {
@@ -24039,7 +23587,6 @@ var init_actionHistory = __esm({
           )
         );
         fixBindingsAfterDeletion(elements, deletedElements);
-        syncInvalidIndices(elements);
         return {
           elements,
           appState: { ...appState, ...data.appState },
@@ -25288,7 +24835,7 @@ var init_shortcuts = __esm({
 });
 
 // components/ContextMenu.tsx
-import clsx16 from "clsx";
+import clsx15 from "clsx";
 import React12 from "react";
 import { jsx as jsx39, jsxs as jsxs20 } from "react/jsx-runtime";
 var CONTEXT_MENU_SEPARATOR, ContextMenu;
@@ -25369,7 +24916,7 @@ var init_ContextMenu2 = __esm({
                       children: /* @__PURE__ */ jsxs20(
                         "button",
                         {
-                          className: clsx16("context-menu-item", {
+                          className: clsx15("context-menu-item", {
                             dangerous: actionName === "deleteSelectedElements",
                             checkmark: item.checked?.(appState)
                           }),
@@ -25400,7 +24947,7 @@ var init_Stack = __esm({
 
 // components/Stack.tsx
 import { forwardRef } from "react";
-import clsx17 from "clsx";
+import clsx16 from "clsx";
 import { jsx as jsx40 } from "react/jsx-runtime";
 var RowStack, ColStack, Stack_default;
 var init_Stack2 = __esm({
@@ -25413,7 +24960,7 @@ var init_Stack2 = __esm({
         return /* @__PURE__ */ jsx40(
           "div",
           {
-            className: clsx17("Stack Stack_horizontal", className),
+            className: clsx16("Stack Stack_horizontal", className),
             style: {
               "--gap": gap,
               alignItems: align,
@@ -25431,7 +24978,7 @@ var init_Stack2 = __esm({
         return /* @__PURE__ */ jsx40(
           "div",
           {
-            className: clsx17("Stack Stack_vertical", className),
+            className: clsx16("Stack Stack_vertical", className),
             style: {
               "--gap": gap,
               justifyItems: align,
@@ -25458,7 +25005,7 @@ var init_Actions = __esm({
 });
 
 // components/dropdownMenu/DropdownMenuTrigger.tsx
-import clsx18 from "clsx";
+import clsx17 from "clsx";
 import { jsx as jsx41 } from "react/jsx-runtime";
 var MenuTrigger, DropdownMenuTrigger_default;
 var init_DropdownMenuTrigger = __esm({
@@ -25474,7 +25021,7 @@ var init_DropdownMenuTrigger = __esm({
       ...rest
     }) => {
       const device = useDevice();
-      const classNames = clsx18(
+      const classNames = clsx17(
         `dropdown-menu-button ${className}`,
         "zen-mode-transition",
         {
@@ -25664,7 +25211,7 @@ var init_Island = __esm({
 
 // components/Island.tsx
 import React15 from "react";
-import clsx19 from "clsx";
+import clsx18 from "clsx";
 import { jsx as jsx46 } from "react/jsx-runtime";
 var Island;
 var init_Island2 = __esm({
@@ -25676,7 +25223,7 @@ var init_Island2 = __esm({
       ({ children, padding, className, style }, ref) => /* @__PURE__ */ jsx46(
         "div",
         {
-          className: clsx19("Island", className),
+          className: clsx18("Island", className),
           style: { "--padding": padding, ...style },
           ref,
           children
@@ -25687,7 +25234,7 @@ var init_Island2 = __esm({
 });
 
 // components/dropdownMenu/DropdownMenuContent.tsx
-import clsx20 from "clsx";
+import clsx19 from "clsx";
 import { useEffect as useEffect16, useRef as useRef12 } from "react";
 import { jsx as jsx47 } from "react/jsx-runtime";
 var MenuContent, DropdownMenuContent_default;
@@ -25732,7 +25279,7 @@ var init_DropdownMenuContent = __esm({
           document.removeEventListener("keydown" /* KEYDOWN */, onKeyDown);
         };
       }, [callbacksRef]);
-      const classNames = clsx20(`dropdown-menu ${className}`, {
+      const classNames = clsx19(`dropdown-menu ${className}`, {
         "dropdown-menu--mobile": device.editor.isMobile
       }).trim();
       return /* @__PURE__ */ jsx47(DropdownMenuContentPropsContext.Provider, { value: { onSelect }, children: /* @__PURE__ */ jsx47(
@@ -25933,7 +25480,7 @@ var init_tunnels = __esm({
 
 // components/Actions.tsx
 import { useState as useState11 } from "react";
-import clsx21 from "clsx";
+import clsx20 from "clsx";
 import { Fragment as Fragment8, jsx as jsx50, jsxs as jsxs24 } from "react/jsx-runtime";
 var SelectedShapeActions, ShapesSwitcher, ZoomActions, UndoRedoActions, ExitZenModeAction, FinalizeAction;
 var init_Actions2 = __esm({
@@ -26078,7 +25625,7 @@ var init_Actions2 = __esm({
           return /* @__PURE__ */ jsx50(
             ToolButton,
             {
-              className: clsx21("Shape", { fillable }),
+              className: clsx20("Shape", { fillable }),
               type: "radio",
               icon,
               checked: activeTool.type === value,
@@ -26115,7 +25662,7 @@ var init_Actions2 = __esm({
           /* @__PURE__ */ jsxs24(
             DropdownMenu_default.Trigger,
             {
-              className: clsx21("App-toolbar__extra-tools-trigger", {
+              className: clsx20("App-toolbar__extra-tools-trigger", {
                 "App-toolbar__extra-tools-trigger--selected": frameToolSelected || embeddableToolSelected || // in collab we're already highlighting the laser button
                 // outside toolbar, so let's not highlight extra-tools button
                 // on top of it
@@ -26257,7 +25804,7 @@ var init_Actions2 = __esm({
     }) => /* @__PURE__ */ jsx50(
       "button",
       {
-        className: clsx21("disable-zen-mode", {
+        className: clsx20("disable-zen-mode", {
           "disable-zen-mode--visible": showExitZenModeBtn
         }),
         onClick: () => actionManager.executeAction(actionToggleZenMode),
@@ -26300,7 +25847,7 @@ var init_Modal = __esm({
 
 // components/Modal.tsx
 import { createPortal as createPortal2 } from "react-dom";
-import clsx22 from "clsx";
+import clsx21 from "clsx";
 import { jsx as jsx51, jsxs as jsxs25 } from "react/jsx-runtime";
 var Modal;
 var init_Modal2 = __esm({
@@ -26329,7 +25876,7 @@ var init_Modal2 = __esm({
         /* @__PURE__ */ jsxs25(
           "div",
           {
-            className: clsx22("Modal", props.className),
+            className: clsx21("Modal", props.className),
             role: "dialog",
             "aria-modal": "true",
             onKeyDown: handleKeydown,
@@ -26391,7 +25938,7 @@ var init_LibraryMenuBrowseButton = __esm({
 });
 
 // components/LibraryMenuControlButtons.tsx
-import clsx23 from "clsx";
+import clsx22 from "clsx";
 import { jsx as jsx53, jsxs as jsxs26 } from "react/jsx-runtime";
 var LibraryMenuControlButtons;
 var init_LibraryMenuControlButtons = __esm({
@@ -26410,7 +25957,7 @@ var init_LibraryMenuControlButtons = __esm({
       return /* @__PURE__ */ jsxs26(
         "div",
         {
-          className: clsx23("library-menu-control-buttons", className),
+          className: clsx22("library-menu-control-buttons", className),
           style,
           children: [
             /* @__PURE__ */ jsx53(
@@ -26529,7 +26076,7 @@ var init_DialogActionButton = __esm({
 });
 
 // components/DialogActionButton.tsx
-import clsx24 from "clsx";
+import clsx23 from "clsx";
 import { jsx as jsx54, jsxs as jsxs27 } from "react/jsx-runtime";
 var DialogActionButton, DialogActionButton_default;
 var init_DialogActionButton2 = __esm({
@@ -26552,7 +26099,7 @@ var init_DialogActionButton2 = __esm({
       return /* @__PURE__ */ jsxs27(
         "button",
         {
-          className: clsx24("Dialog__action-button", cs, className),
+          className: clsx23("Dialog__action-button", cs, className),
           type,
           "aria-label": label,
           onClick,
@@ -27172,7 +26719,7 @@ var init_PublishLibrary2 = __esm({
 // components/LibraryMenuHeaderContent.tsx
 import { useCallback as useCallback5, useState as useState14 } from "react";
 import { useAtom as useAtom9 } from "jotai";
-import clsx25 from "clsx";
+import clsx24 from "clsx";
 import { jsx as jsx57, jsxs as jsxs30 } from "react/jsx-runtime";
 var getSelectedItems, LibraryDropdownMenuButton, LibraryDropdownMenu;
 var init_LibraryMenuHeaderContent = __esm({
@@ -27378,7 +26925,7 @@ var init_LibraryMenuHeaderContent = __esm({
           )
         ] });
       };
-      return /* @__PURE__ */ jsxs30("div", { className: clsx25("library-menu-dropdown-container", className), children: [
+      return /* @__PURE__ */ jsxs30("div", { className: clsx24("library-menu-dropdown-container", className), children: [
         renderLibraryMenu(),
         selectedItems.length > 0 && /* @__PURE__ */ jsx57("div", { className: "library-actions-counter", children: selectedItems.length }),
         showRemoveLibAlert && renderRemoveLibAlert(),
@@ -27448,7 +26995,7 @@ var init_LibraryUnit = __esm({
 });
 
 // components/LibraryUnit.tsx
-import clsx26 from "clsx";
+import clsx25 from "clsx";
 import { memo, useEffect as useEffect18, useRef as useRef14, useState as useState15 } from "react";
 import { jsx as jsx58, jsxs as jsxs31 } from "react/jsx-runtime";
 var LibraryUnit, EmptyLibraryUnit;
@@ -27492,7 +27039,7 @@ var init_LibraryUnit2 = __esm({
         return /* @__PURE__ */ jsxs31(
           "div",
           {
-            className: clsx26("library-unit", {
+            className: clsx25("library-unit", {
               "library-unit__active": elements,
               "library-unit--hover": elements && isHovered,
               "library-unit--selected": selected,
@@ -27504,7 +27051,7 @@ var init_LibraryUnit2 = __esm({
               /* @__PURE__ */ jsx58(
                 "div",
                 {
-                  className: clsx26("library-unit__dragger", {
+                  className: clsx25("library-unit__dragger", {
                     "library-unit__pulse": !!isPending
                   }),
                   ref,
@@ -28104,7 +27651,7 @@ var init_LibraryMenu2 = __esm({
 });
 
 // components/Dialog.tsx
-import clsx27 from "clsx";
+import clsx26 from "clsx";
 import { useEffect as useEffect22, useState as useState19 } from "react";
 import { useSetAtom as useSetAtom2 } from "jotai";
 import { jsx as jsx62, jsxs as jsxs34 } from "react/jsx-runtime";
@@ -28181,7 +27728,7 @@ var init_Dialog2 = __esm({
       return /* @__PURE__ */ jsx62(
         Modal,
         {
-          className: clsx27("Dialog", props.className, {
+          className: clsx26("Dialog", props.className, {
             "Dialog--fullscreen": isFullscreen
           }),
           labelledBy: "dialog-title",
@@ -28252,7 +27799,7 @@ var init_RadioGroup = __esm({
 });
 
 // components/RadioGroup.tsx
-import clsx28 from "clsx";
+import clsx27 from "clsx";
 import { jsx as jsx64, jsxs as jsxs35 } from "react/jsx-runtime";
 var RadioGroup;
 var init_RadioGroup2 = __esm({
@@ -28269,7 +27816,7 @@ var init_RadioGroup2 = __esm({
       return /* @__PURE__ */ jsx64("div", { className: "RadioGroup", children: choices.map((choice) => /* @__PURE__ */ jsxs35(
         "div",
         {
-          className: clsx28("RadioGroup__choice", {
+          className: clsx27("RadioGroup__choice", {
             active: choice.value === value
           }),
           children: [
@@ -28298,7 +27845,7 @@ var init_Switch = __esm({
 });
 
 // components/Switch.tsx
-import clsx29 from "clsx";
+import clsx28 from "clsx";
 import { jsx as jsx65 } from "react/jsx-runtime";
 var Switch;
 var init_Switch2 = __esm({
@@ -28313,7 +27860,7 @@ var init_Switch2 = __esm({
       onChange,
       disabled = false
     }) => {
-      return /* @__PURE__ */ jsx65("div", { className: clsx29("Switch", { toggled: checked, disabled }), children: /* @__PURE__ */ jsx65(
+      return /* @__PURE__ */ jsx65("div", { className: clsx28("Switch", { toggled: checked, disabled }), children: /* @__PURE__ */ jsx65(
         "input",
         {
           name,
@@ -28348,7 +27895,7 @@ var init_FilledButton = __esm({
 
 // components/FilledButton.tsx
 import { forwardRef as forwardRef2, useState as useState21 } from "react";
-import clsx30 from "clsx";
+import clsx29 from "clsx";
 import { jsx as jsx66, jsxs as jsxs36 } from "react/jsx-runtime";
 var FilledButton;
 var init_FilledButton2 = __esm({
@@ -28392,7 +27939,7 @@ var init_FilledButton2 = __esm({
         return /* @__PURE__ */ jsx66(
           "button",
           {
-            className: clsx30(
+            className: clsx29(
               "ExcButton",
               `ExcButton--color-${color}`,
               `ExcButton--variant-${variant}`,
@@ -28767,7 +28314,7 @@ var init_FixedSideContainer = __esm({
 });
 
 // components/FixedSideContainer.tsx
-import clsx31 from "clsx";
+import clsx30 from "clsx";
 import { jsx as jsx68 } from "react/jsx-runtime";
 var FixedSideContainer;
 var init_FixedSideContainer2 = __esm({
@@ -28782,7 +28329,7 @@ var init_FixedSideContainer2 = __esm({
     }) => /* @__PURE__ */ jsx68(
       "div",
       {
-        className: clsx31(
+        className: clsx30(
           "FixedSideContainer",
           `FixedSideContainer_side_${side}`,
           className
@@ -28901,7 +28448,7 @@ var init_HintViewer2 = __esm({
 });
 
 // components/LockButton.tsx
-import clsx32 from "clsx";
+import clsx31 from "clsx";
 import { jsx as jsx70, jsxs as jsxs38 } from "react/jsx-runtime";
 var DEFAULT_SIZE, ICONS2, LockButton;
 var init_LockButton = __esm({
@@ -28919,7 +28466,7 @@ var init_LockButton = __esm({
       return /* @__PURE__ */ jsxs38(
         "label",
         {
-          className: clsx32(
+          className: clsx31(
             "ToolIcon ToolIcon__lock",
             `ToolIcon_size_${DEFAULT_SIZE}`,
             {
@@ -29036,7 +28583,7 @@ var init_scrollbars = __esm({
 });
 
 // components/PenModeButton.tsx
-import clsx33 from "clsx";
+import clsx32 from "clsx";
 import { jsx as jsx72, jsxs as jsxs40 } from "react/jsx-runtime";
 var DEFAULT_SIZE2, PenModeButton;
 var init_PenModeButton = __esm({
@@ -29053,7 +28600,7 @@ var init_PenModeButton = __esm({
       return /* @__PURE__ */ jsxs40(
         "label",
         {
-          className: clsx33(
+          className: clsx32(
             "ToolIcon ToolIcon__penMode",
             `ToolIcon_size_${DEFAULT_SIZE2}`,
             {
@@ -29165,7 +28712,7 @@ var init_Stats2 = __esm({
 });
 
 // components/HandButton.tsx
-import clsx34 from "clsx";
+import clsx33 from "clsx";
 import { jsx as jsx74 } from "react/jsx-runtime";
 var HandButton;
 var init_HandButton = __esm({
@@ -29180,7 +28727,7 @@ var init_HandButton = __esm({
       return /* @__PURE__ */ jsx74(
         ToolButton,
         {
-          className: clsx34("Shape", { fillable: false }),
+          className: clsx33("Shape", { fillable: false }),
           type: "radio",
           icon: handIcon,
           name: "editor-current-shape",
@@ -30180,11 +29727,11 @@ var init_UserList = __esm({
 });
 
 // components/UserList.tsx
-import React30, { useLayoutEffect as useLayoutEffect6 } from "react";
-import clsx35 from "clsx";
+import React30 from "react";
+import clsx34 from "clsx";
 import * as Popover3 from "@radix-ui/react-popover";
 import { jsx as jsx79, jsxs as jsxs45 } from "react/jsx-runtime";
-var DEFAULT_MAX_AVATARS, SHOW_COLLABORATORS_FILTER_AT, ConditionalTooltipWrapper, renderCollaborator, collaboratorComparatorKeys, UserList;
+var FIRST_N_AVATARS, SHOW_COLLABORATORS_FILTER_AT, ConditionalTooltipWrapper, renderCollaborator, collaboratorComparatorKeys, UserList;
 var init_UserList2 = __esm({
   "components/UserList.tsx"() {
     "use strict";
@@ -30196,24 +29743,24 @@ var init_UserList2 = __esm({
     init_icons();
     init_i18n();
     init_utils();
-    init_constants();
-    DEFAULT_MAX_AVATARS = 4;
+    FIRST_N_AVATARS = 3;
     SHOW_COLLABORATORS_FILTER_AT = 8;
     ConditionalTooltipWrapper = ({
       shouldWrap,
       children,
+      clientId,
       username
-    }) => shouldWrap ? /* @__PURE__ */ jsx79(Tooltip, { label: username || "Unknown user", children }) : /* @__PURE__ */ jsx79(React30.Fragment, { children });
+    }) => shouldWrap ? /* @__PURE__ */ jsx79(Tooltip, { label: username || "Unknown user", children }, clientId) : /* @__PURE__ */ jsx79(React30.Fragment, { children }, clientId);
     renderCollaborator = ({
       actionManager,
       collaborator,
-      socketId,
+      clientId,
       withName = false,
       shouldWrapWithTooltip = false,
       isBeingFollowed
     }) => {
       const data = {
-        socketId,
+        clientId,
         collaborator,
         withName,
         isBeingFollowed
@@ -30222,21 +29769,19 @@ var init_UserList2 = __esm({
       return /* @__PURE__ */ jsx79(
         ConditionalTooltipWrapper,
         {
+          clientId,
           username: collaborator.username,
           shouldWrap: shouldWrapWithTooltip,
           children: avatarJSX
         },
-        socketId
+        clientId
       );
     };
     collaboratorComparatorKeys = [
       "avatarUrl",
       "id",
       "socketId",
-      "username",
-      "isInCall",
-      "isSpeaking",
-      "isMuted"
+      "username"
     ];
     UserList = React30.memo(
       ({ className, mobile, collaborators, userToFollow }) => {
@@ -30250,138 +29795,107 @@ var init_UserList2 = __esm({
             { ...collaborator, socketId }
           );
         });
-        const uniqueCollaboratorsArray = Array.from(
-          uniqueCollaboratorsMap.values()
-        ).filter((collaborator) => collaborator.username?.trim());
+        const uniqueCollaboratorsArray = Array.from(uniqueCollaboratorsMap).filter(
+          ([_, collaborator]) => collaborator.username?.trim()
+        );
         const [searchTerm, setSearchTerm] = React30.useState("");
-        const userListWrapper = React30.useRef(null);
-        useLayoutEffect6(() => {
-          if (userListWrapper.current) {
-            const updateMaxAvatars = (width) => {
-              const maxAvatars2 = Math.max(1, Math.min(8, Math.floor(width / 38)));
-              setMaxAvatars(maxAvatars2);
-            };
-            updateMaxAvatars(userListWrapper.current.clientWidth);
-            if (!supportsResizeObserver) {
-              return;
-            }
-            const resizeObserver = new ResizeObserver((entries) => {
-              for (const entry of entries) {
-                const { width } = entry.contentRect;
-                updateMaxAvatars(width);
-              }
-            });
-            resizeObserver.observe(userListWrapper.current);
-            return () => {
-              resizeObserver.disconnect();
-            };
-          }
-        }, []);
-        const [maxAvatars, setMaxAvatars] = React30.useState(DEFAULT_MAX_AVATARS);
+        if (uniqueCollaboratorsArray.length === 0) {
+          return null;
+        }
         const searchTermNormalized = searchTerm.trim().toLowerCase();
         const filteredCollaborators = searchTermNormalized ? uniqueCollaboratorsArray.filter(
-          (collaborator) => collaborator.username?.toLowerCase().includes(searchTerm)
+          ([, collaborator]) => collaborator.username?.toLowerCase().includes(searchTerm)
         ) : uniqueCollaboratorsArray;
         const firstNCollaborators = uniqueCollaboratorsArray.slice(
           0,
-          maxAvatars - 1
+          FIRST_N_AVATARS
         );
         const firstNAvatarsJSX = firstNCollaborators.map(
-          (collaborator) => renderCollaborator({
+          ([clientId, collaborator]) => renderCollaborator({
             actionManager,
             collaborator,
-            socketId: collaborator.socketId,
+            clientId,
             shouldWrapWithTooltip: true,
             isBeingFollowed: collaborator.socketId === userToFollow
           })
         );
-        return mobile ? /* @__PURE__ */ jsx79("div", { className: clsx35("UserList UserList_mobile", className), children: uniqueCollaboratorsArray.map(
-          (collaborator) => renderCollaborator({
+        return mobile ? /* @__PURE__ */ jsx79("div", { className: clsx34("UserList UserList_mobile", className), children: uniqueCollaboratorsArray.map(
+          ([clientId, collaborator]) => renderCollaborator({
             actionManager,
             collaborator,
-            socketId: collaborator.socketId,
+            clientId,
             shouldWrapWithTooltip: true,
             isBeingFollowed: collaborator.socketId === userToFollow
           })
-        ) }) : /* @__PURE__ */ jsx79("div", { className: "UserList-wrapper", ref: userListWrapper, children: /* @__PURE__ */ jsxs45(
-          "div",
-          {
-            className: clsx35("UserList", className),
-            style: { [`--max-avatars`]: maxAvatars },
-            children: [
-              firstNAvatarsJSX,
-              uniqueCollaboratorsArray.length > maxAvatars - 1 && /* @__PURE__ */ jsxs45(
-                Popover3.Root,
-                {
-                  onOpenChange: (isOpen) => {
-                    if (!isOpen) {
-                      setSearchTerm("");
-                    }
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxs45(Popover3.Trigger, { className: "UserList__more", children: [
-                      "+",
-                      uniqueCollaboratorsArray.length - maxAvatars + 1
-                    ] }),
-                    /* @__PURE__ */ jsx79(
-                      Popover3.Content,
-                      {
-                        style: {
-                          zIndex: 2,
-                          width: "15rem",
-                          textAlign: "left"
-                        },
-                        align: "end",
-                        sideOffset: 10,
-                        children: /* @__PURE__ */ jsxs45(Island, { style: { overflow: "hidden" }, children: [
-                          uniqueCollaboratorsArray.length >= SHOW_COLLABORATORS_FILTER_AT && /* @__PURE__ */ jsxs45("div", { className: "UserList__search-wrapper", children: [
-                            searchIcon,
-                            /* @__PURE__ */ jsx79(
-                              "input",
-                              {
-                                className: "UserList__search",
-                                type: "text",
-                                placeholder: t("userList.search.placeholder"),
-                                value: searchTerm,
-                                onChange: (e) => {
-                                  setSearchTerm(e.target.value);
-                                }
-                              }
-                            )
-                          ] }),
-                          /* @__PURE__ */ jsxs45("div", { className: "dropdown-menu UserList__collaborators", children: [
-                            filteredCollaborators.length === 0 && /* @__PURE__ */ jsx79("div", { className: "UserList__collaborators__empty", children: t("userList.search.empty") }),
-                            /* @__PURE__ */ jsx79("div", { className: "UserList__hint", children: t("userList.hint.text") }),
-                            filteredCollaborators.map(
-                              (collaborator) => renderCollaborator({
-                                actionManager,
-                                collaborator,
-                                socketId: collaborator.socketId,
-                                withName: true,
-                                isBeingFollowed: collaborator.socketId === userToFollow
-                              })
-                            )
-                          ] })
-                        ] })
-                      }
-                    )
-                  ]
+        ) }) : /* @__PURE__ */ jsxs45("div", { className: clsx34("UserList", className), children: [
+          firstNAvatarsJSX,
+          uniqueCollaboratorsArray.length > FIRST_N_AVATARS && /* @__PURE__ */ jsxs45(
+            Popover3.Root,
+            {
+              onOpenChange: (isOpen) => {
+                if (!isOpen) {
+                  setSearchTerm("");
                 }
-              )
-            ]
-          }
-        ) });
+              },
+              children: [
+                /* @__PURE__ */ jsxs45(Popover3.Trigger, { className: "UserList__more", children: [
+                  "+",
+                  uniqueCollaboratorsArray.length - FIRST_N_AVATARS
+                ] }),
+                /* @__PURE__ */ jsx79(
+                  Popover3.Content,
+                  {
+                    style: {
+                      zIndex: 2,
+                      width: "13rem",
+                      textAlign: "left"
+                    },
+                    align: "end",
+                    sideOffset: 10,
+                    children: /* @__PURE__ */ jsxs45(Island, { style: { overflow: "hidden" }, children: [
+                      uniqueCollaboratorsArray.length >= SHOW_COLLABORATORS_FILTER_AT && /* @__PURE__ */ jsxs45("div", { className: "UserList__search-wrapper", children: [
+                        searchIcon,
+                        /* @__PURE__ */ jsx79(
+                          "input",
+                          {
+                            className: "UserList__search",
+                            type: "text",
+                            placeholder: t("userList.search.placeholder"),
+                            value: searchTerm,
+                            onChange: (e) => {
+                              setSearchTerm(e.target.value);
+                            }
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsxs45("div", { className: "dropdown-menu UserList__collaborators", children: [
+                        filteredCollaborators.length === 0 && /* @__PURE__ */ jsx79("div", { className: "UserList__collaborators__empty", children: t("userList.search.empty") }),
+                        /* @__PURE__ */ jsx79("div", { className: "UserList__hint", children: t("userList.hint.text") }),
+                        filteredCollaborators.map(
+                          ([clientId, collaborator]) => renderCollaborator({
+                            actionManager,
+                            collaborator,
+                            clientId,
+                            withName: true,
+                            isBeingFollowed: collaborator.socketId === userToFollow
+                          })
+                        )
+                      ] })
+                    ] })
+                  }
+                )
+              ]
+            }
+          )
+        ] });
       },
       (prev, next) => {
         if (prev.collaborators.size !== next.collaborators.size || prev.mobile !== next.mobile || prev.className !== next.className || prev.userToFollow !== next.userToFollow) {
           return false;
         }
-        const nextCollaboratorSocketIds = next.collaborators.keys();
         for (const [socketId, collaborator] of prev.collaborators) {
           const nextCollaborator = next.collaborators.get(socketId);
-          if (!nextCollaborator || // this checks order of collaborators in the map is the same
-          // as previous render
-          socketId !== nextCollaboratorSocketIds.next().value || !isShallowEqual(
+          if (!nextCollaborator || !isShallowEqual(
             collaborator,
             nextCollaborator,
             collaboratorComparatorKeys
@@ -30564,7 +30078,7 @@ var init_HelpButton = __esm({
 });
 
 // components/footer/Footer.tsx
-import clsx36 from "clsx";
+import clsx35 from "clsx";
 import { jsx as jsx83, jsxs as jsxs47 } from "react/jsx-runtime";
 var Footer, Footer_default;
 var init_Footer = __esm({
@@ -30596,7 +30110,7 @@ var init_Footer = __esm({
             /* @__PURE__ */ jsx83(
               "div",
               {
-                className: clsx36("layer-ui__wrapper__footer-left zen-mode-transition", {
+                className: clsx35("layer-ui__wrapper__footer-left zen-mode-transition", {
                   "layer-ui__wrapper__footer-left--transition-left": appState.zenModeEnabled
                 }),
                 children: /* @__PURE__ */ jsx83(Stack_default.Col, { gap: 2, children: /* @__PURE__ */ jsxs47(Section, { heading: "canvasActions", children: [
@@ -30611,7 +30125,7 @@ var init_Footer = __esm({
                     UndoRedoActions,
                     {
                       renderAction: actionManager.renderAction,
-                      className: clsx36("zen-mode-transition", {
+                      className: clsx35("zen-mode-transition", {
                         "layer-ui__wrapper__footer-left--transition-bottom": appState.zenModeEnabled
                       })
                     }
@@ -30620,7 +30134,7 @@ var init_Footer = __esm({
                     FinalizeAction,
                     {
                       renderAction: actionManager.renderAction,
-                      className: clsx36("zen-mode-transition", {
+                      className: clsx35("zen-mode-transition", {
                         "layer-ui__wrapper__footer-left--transition-left": appState.zenModeEnabled
                       })
                     }
@@ -30632,7 +30146,7 @@ var init_Footer = __esm({
             /* @__PURE__ */ jsx83(
               "div",
               {
-                className: clsx36("layer-ui__wrapper__footer-right zen-mode-transition", {
+                className: clsx35("layer-ui__wrapper__footer-right zen-mode-transition", {
                   "transition-right": appState.zenModeEnabled
                 }),
                 children: /* @__PURE__ */ jsxs47("div", { style: { position: "relative" }, children: [
@@ -30680,7 +30194,7 @@ var init_Button = __esm({
 });
 
 // components/Button.tsx
-import clsx37 from "clsx";
+import clsx36 from "clsx";
 import { jsx as jsx84 } from "react/jsx-runtime";
 var Button;
 var init_Button2 = __esm({
@@ -30704,7 +30218,7 @@ var init_Button2 = __esm({
             onSelect();
           }),
           type,
-          className: clsx37("excalidraw-button", className, { selected }),
+          className: clsx36("excalidraw-button", className, { selected }),
           ...rest,
           children
         }
@@ -30714,7 +30228,7 @@ var init_Button2 = __esm({
 });
 
 // components/Sidebar/SidebarHeader.tsx
-import clsx38 from "clsx";
+import clsx37 from "clsx";
 import { useContext as useContext2 } from "react";
 import { jsx as jsx85, jsxs as jsxs48 } from "react/jsx-runtime";
 var SidebarHeader;
@@ -30738,7 +30252,7 @@ var init_SidebarHeader = __esm({
       return /* @__PURE__ */ jsxs48(
         "div",
         {
-          className: clsx38("sidebar__header", className),
+          className: clsx37("sidebar__header", className),
           "data-testid": "sidebar-header",
           children: [
             children,
@@ -30780,7 +30294,7 @@ var init_SidebarTrigger = __esm({
 });
 
 // components/Sidebar/SidebarTrigger.tsx
-import clsx39 from "clsx";
+import clsx38 from "clsx";
 import { jsx as jsx86, jsxs as jsxs49 } from "react/jsx-runtime";
 var SidebarTrigger;
 var init_SidebarTrigger2 = __esm({
@@ -30819,7 +30333,7 @@ var init_SidebarTrigger2 = __esm({
             "aria-keyshortcuts": "0"
           }
         ),
-        /* @__PURE__ */ jsxs49("div", { className: clsx39("sidebar-trigger", className), style, children: [
+        /* @__PURE__ */ jsxs49("div", { className: clsx38("sidebar-trigger", className), style, children: [
           icon && /* @__PURE__ */ jsx86("div", { children: icon }),
           children && /* @__PURE__ */ jsx86("div", { className: "sidebar-trigger__label", children })
         ] })
@@ -30941,7 +30455,7 @@ var init_Sidebar = __esm({
 // components/Sidebar/Sidebar.tsx
 import {
   useEffect as useEffect24,
-  useLayoutEffect as useLayoutEffect7,
+  useLayoutEffect as useLayoutEffect6,
   useRef as useRef19,
   useState as useState24,
   forwardRef as forwardRef3,
@@ -30949,7 +30463,7 @@ import {
   useCallback as useCallback9
 } from "react";
 import { atom as atom8, useSetAtom as useSetAtom3 } from "jotai";
-import clsx40 from "clsx";
+import clsx39 from "clsx";
 import { jsx as jsx91 } from "react/jsx-runtime";
 import { createElement } from "react";
 var isSidebarDockedAtom, SidebarInner, Sidebar;
@@ -30990,7 +30504,7 @@ var init_Sidebar2 = __esm({
         }
         const setAppState = useExcalidrawSetAppState();
         const setIsSidebarDockedAtom = useSetAtom3(isSidebarDockedAtom, jotaiScope);
-        useLayoutEffect7(() => {
+        useLayoutEffect6(() => {
           setIsSidebarDockedAtom(!!docked);
           return () => {
             setIsSidebarDockedAtom(false);
@@ -31049,7 +30563,7 @@ var init_Sidebar2 = __esm({
           Island,
           {
             ...rest,
-            className: clsx40("sidebar", { "sidebar--docked": docked }, className),
+            className: clsx39("sidebar", { "sidebar--docked": docked }, className),
             ref: islandRef,
             children: /* @__PURE__ */ jsx91(SidebarPropsContext.Provider, { value: headerPropsRef.current, children })
           }
@@ -31076,7 +30590,7 @@ var init_Sidebar2 = __esm({
           refPrevOpenSidebar.current = appState.openSidebar;
         }, [appState.openSidebar, onStateChange, props.name]);
         const [mounted, setMounted] = useState24(false);
-        useLayoutEffect7(() => {
+        useLayoutEffect6(() => {
           setMounted(true);
           return () => setMounted(false);
         }, []);
@@ -31197,7 +30711,7 @@ __export(DefaultItems_exports, {
   Socials: () => Socials,
   ToggleTheme: () => ToggleTheme
 });
-import clsx41 from "clsx";
+import clsx40 from "clsx";
 import { useSetAtom as useSetAtom4 } from "jotai";
 import { Fragment as Fragment17, jsx as jsx93, jsxs as jsxs51 } from "react/jsx-runtime";
 var LoadScene, SaveToActiveFile, SaveAsImage, Help, ClearCanvas, ToggleTheme, ChangeCanvasBackground, Export, Socials, LiveCollaborationTrigger;
@@ -31435,7 +30949,7 @@ var init_DefaultItems2 = __esm({
         {
           "data-testid": "collab-button",
           icon: usersIcon,
-          className: clsx41({
+          className: clsx40({
             "active-collab": isCollaborating
           }),
           onSelect,
@@ -31449,7 +30963,7 @@ var init_DefaultItems2 = __esm({
 
 // components/hoc/withInternalFallback.tsx
 import { atom as atom11, useAtom as useAtom13 } from "jotai";
-import { useLayoutEffect as useLayoutEffect8, useRef as useRef20 } from "react";
+import { useLayoutEffect as useLayoutEffect7, useRef as useRef20 } from "react";
 import { jsx as jsx94 } from "react/jsx-runtime";
 var withInternalFallback;
 var init_withInternalFallback = __esm({
@@ -31470,7 +30984,7 @@ var init_withInternalFallback = __esm({
           preferHost: false,
           counter: 0
         });
-        useLayoutEffect8(() => {
+        useLayoutEffect7(() => {
           const meta = metaRef.current;
           setCounter((c) => {
             const next = c + 1;
@@ -31746,7 +31260,7 @@ var init_OverwriteConfirm2 = __esm({
 });
 
 // components/DefaultSidebar.tsx
-import clsx42 from "clsx";
+import clsx41 from "clsx";
 import { jsx as jsx98, jsxs as jsxs55 } from "react/jsx-runtime";
 import { createElement as createElement2 } from "react";
 var DefaultSidebarTrigger, DefaultTabTriggers, DefaultSidebar;
@@ -31805,7 +31319,7 @@ var init_DefaultSidebar = __esm({
               ...rest,
               name: "default",
               key: "default",
-              className: clsx42("default-sidebar", className),
+              className: clsx41("default-sidebar", className),
               docked: docked ?? appState.defaultSidebarDockedPreference,
               onDock: (
                 // `onDock=false` disables docking.
@@ -31864,7 +31378,7 @@ var init_Toolbar = __esm({
 });
 
 // components/LaserPointerButton.tsx
-import clsx43 from "clsx";
+import clsx42 from "clsx";
 import { jsx as jsx99, jsxs as jsxs56 } from "react/jsx-runtime";
 var DEFAULT_SIZE3, LaserPointerButton;
 var init_LaserPointerButton = __esm({
@@ -31878,7 +31392,7 @@ var init_LaserPointerButton = __esm({
       return /* @__PURE__ */ jsxs56(
         "label",
         {
-          className: clsx43(
+          className: clsx42(
             "ToolIcon ToolIcon__LaserPointer",
             `ToolIcon_size_${DEFAULT_SIZE3}`,
             {
@@ -31918,10 +31432,10 @@ import {
   forwardRef as forwardRef4,
   useRef as useRef21,
   useImperativeHandle as useImperativeHandle2,
-  useLayoutEffect as useLayoutEffect9,
+  useLayoutEffect as useLayoutEffect8,
   useState as useState25
 } from "react";
-import clsx44 from "clsx";
+import clsx43 from "clsx";
 import { jsx as jsx100, jsxs as jsxs57 } from "react/jsx-runtime";
 var TextField;
 var init_TextField2 = __esm({
@@ -31945,7 +31459,7 @@ var init_TextField2 = __esm({
       }, ref) => {
         const innerRef = useRef21(null);
         useImperativeHandle2(ref, () => innerRef.current);
-        useLayoutEffect9(() => {
+        useLayoutEffect8(() => {
           if (selectOnRender) {
             innerRef.current?.select();
           }
@@ -31954,7 +31468,7 @@ var init_TextField2 = __esm({
         return /* @__PURE__ */ jsxs57(
           "div",
           {
-            className: clsx44("ExcTextField", {
+            className: clsx43("ExcTextField", {
               "ExcTextField--fullWidth": fullWidth
             }),
             onClick: () => {
@@ -31965,14 +31479,14 @@ var init_TextField2 = __esm({
               /* @__PURE__ */ jsxs57(
                 "div",
                 {
-                  className: clsx44("ExcTextField__input", {
+                  className: clsx43("ExcTextField__input", {
                     "ExcTextField__input--readonly": readonly
                   }),
                   children: [
                     /* @__PURE__ */ jsx100(
                       "input",
                       {
-                        className: clsx44({
+                        className: clsx43({
                           "is-redacted": "value" in rest && rest.value && isRedacted && !isTemporarilyUnredacted
                         }),
                         readOnly: readonly,
@@ -32407,7 +31921,7 @@ var init_TTDDialogPanels = __esm({
 });
 
 // components/TTDDialog/TTDDialogPanel.tsx
-import clsx45 from "clsx";
+import clsx44 from "clsx";
 import { jsx as jsx107, jsxs as jsxs59 } from "react/jsx-runtime";
 var TTDDialogPanel;
 var init_TTDDialogPanel = __esm({
@@ -32435,7 +31949,7 @@ var init_TTDDialogPanel = __esm({
         /* @__PURE__ */ jsxs59(
           "div",
           {
-            className: clsx45("ttd-dialog-panel-button-container", {
+            className: clsx44("ttd-dialog-panel-button-container", {
               invisible: !panelAction
             }),
             style: { display: "flex", alignItems: "center" },
@@ -32448,7 +31962,7 @@ var init_TTDDialogPanel = __esm({
                   },
                   disabled: panelActionDisabled || onTextSubmitInProgess,
                   children: [
-                    /* @__PURE__ */ jsxs59("div", { className: clsx45({ invisible: onTextSubmitInProgess }), children: [
+                    /* @__PURE__ */ jsxs59("div", { className: clsx44({ invisible: onTextSubmitInProgess }), children: [
                       panelAction?.label,
                       panelAction?.icon && /* @__PURE__ */ jsx107("span", { children: panelAction.icon })
                     ] }),
@@ -33052,7 +32566,7 @@ TTD mermaid definition render errror: ${error3.message}`,
 });
 
 // components/LayerUI.tsx
-import clsx46 from "clsx";
+import clsx45 from "clsx";
 import React35 from "react";
 import { Provider, useAtom as useAtom16, useAtomValue as useAtomValue2 } from "jotai";
 import { Fragment as Fragment19, jsx as jsx115, jsxs as jsxs64 } from "react/jsx-runtime";
@@ -33202,7 +32716,7 @@ var init_LayerUI2 = __esm({
         Section,
         {
           heading: "selectedShapeActions",
-          className: clsx46("selected-shape-actions zen-mode-transition", {
+          className: clsx45("selected-shape-actions zen-mode-transition", {
             "transition-left": appState.zenModeEnabled
           }),
           children: /* @__PURE__ */ jsx115(
@@ -33233,7 +32747,7 @@ var init_LayerUI2 = __esm({
           elements
         );
         return /* @__PURE__ */ jsx115(FixedSideContainer, { side: "top", children: /* @__PURE__ */ jsxs64("div", { className: "App-menu App-menu_top", children: [
-          /* @__PURE__ */ jsxs64(Stack_default.Col, { gap: 6, className: clsx46("App-menu_top__left"), children: [
+          /* @__PURE__ */ jsxs64(Stack_default.Col, { gap: 6, className: clsx45("App-menu_top__left"), children: [
             renderCanvasActions(),
             shouldRenderSelectedShapeActions && renderSelectedShapeActions()
           ] }),
@@ -33243,7 +32757,7 @@ var init_LayerUI2 = __esm({
               Stack_default.Row,
               {
                 gap: 1,
-                className: clsx46("App-toolbar-container", {
+                className: clsx45("App-toolbar-container", {
                   "zen-mode": appState.zenModeEnabled
                 }),
                 children: [
@@ -33251,7 +32765,7 @@ var init_LayerUI2 = __esm({
                     Island,
                     {
                       padding: 1,
-                      className: clsx46("App-toolbar", {
+                      className: clsx45("App-toolbar", {
                         "zen-mode": appState.zenModeEnabled
                       }),
                       children: [
@@ -33333,7 +32847,7 @@ var init_LayerUI2 = __esm({
           /* @__PURE__ */ jsxs64(
             "div",
             {
-              className: clsx46(
+              className: clsx45(
                 "layer-ui__wrapper__top-right zen-mode-transition",
                 {
                   "transition-right": appState.zenModeEnabled
@@ -34918,7 +34432,6 @@ var init_transform = __esm({
     init_utils();
     init_points();
     init_random();
-    init_fractionalIndex();
     DEFAULT_LINEAR_ELEMENT_PROPS = {
       width: 100,
       height: 0
@@ -35126,12 +34639,10 @@ var init_transform = __esm({
         this.excalidrawElements.set(ele.id, ele);
       };
       getElements = () => {
-        return syncInvalidIndices(Array.from(this.excalidrawElements.values()));
+        return Array.from(this.excalidrawElements.values());
       };
       getElementsMap = () => {
-        return toBrandedType(
-          arrayToMap(this.getElements())
-        );
+        return toBrandedType(this.excalidrawElements);
       };
       getElement = (id) => {
         return this.excalidrawElements.get(id);
@@ -35431,6 +34942,46 @@ var init_reactUtils = __esm({
   }
 });
 
+// renderer/roundRect.ts
+var roundRect;
+var init_roundRect = __esm({
+  "renderer/roundRect.ts"() {
+    "use strict";
+    init_define_import_meta_env();
+    roundRect = (context, x, y, width, height, radius, strokeColor) => {
+      context.beginPath();
+      context.moveTo(x + radius, y);
+      context.lineTo(x + width - radius, y);
+      context.quadraticCurveTo(x + width, y, x + width, y + radius);
+      context.lineTo(x + width, y + height - radius);
+      context.quadraticCurveTo(
+        x + width,
+        y + height,
+        x + width - radius,
+        y + height
+      );
+      context.lineTo(x + radius, y + height);
+      context.quadraticCurveTo(x, y + height, x, y + height - radius);
+      context.lineTo(x, y + radius);
+      context.quadraticCurveTo(x, y, x + radius, y);
+      context.closePath();
+      context.fill();
+      if (strokeColor) {
+        context.strokeStyle = strokeColor;
+      }
+      context.stroke();
+    };
+  }
+});
+
+// types.ts
+var init_types = __esm({
+  "types.ts"() {
+    "use strict";
+    init_define_import_meta_env();
+  }
+});
+
 // renderer/renderSnaps.ts
 var SNAP_COLOR_LIGHT, SNAP_COLOR_DARK, SNAP_WIDTH, SNAP_CROSS_SIZE, renderSnaps, drawPointsSnapLine, drawPointerSnapLine, drawCross, drawLine, drawGapLine;
 var init_renderSnaps = __esm({
@@ -35567,6 +35118,7 @@ var init_interactiveScene = __esm({
     init_groups();
     init_transformHandles();
     init_utils();
+    init_types();
     init_constants();
     init_renderSnaps();
     init_collision();
@@ -36029,18 +35581,15 @@ var init_interactiveScene = __esm({
             if (locallySelectedIds.has(element.id) && !isSelectedViaGroup(appState, element)) {
               selectionColors.push(selectionColor);
             }
-            const remoteClients = renderConfig.remoteSelectedElementIds.get(
-              element.id
-            );
-            if (remoteClients) {
+            if (renderConfig.remoteSelectedElementIds[element.id]) {
               selectionColors.push(
-                ...remoteClients.map((socketId) => {
-                  const background = getClientColor(
-                    socketId,
-                    appState.collaborators.get(socketId)
-                  );
-                  return background;
-                })
+                ...renderConfig.remoteSelectedElementIds[element.id].map(
+                  (socketId) => {
+                    const { id } = renderConfig.remotePointerViewportCoords[socketId];
+                    const background = getClientColor(id);
+                    return background;
+                  }
+                )
               );
             }
             if (selectionColors.length) {
@@ -36052,7 +35601,7 @@ var init_interactiveScene = __esm({
                 elementX2,
                 elementY2,
                 selectionColors,
-                dashed: !!remoteClients,
+                dashed: !!renderConfig.remoteSelectedElementIds[element.id],
                 cx,
                 cy,
                 activeEmbeddable: appState.activeEmbeddable?.element === element && appState.activeEmbeddable.state === "active"
@@ -36147,13 +35696,107 @@ var init_interactiveScene = __esm({
       }
       renderSnaps(context, appState);
       context.restore();
-      renderRemoteCursors({
-        context,
-        renderConfig,
-        appState,
-        normalizedWidth,
-        normalizedHeight
-      });
+      for (const clientId in renderConfig.remotePointerViewportCoords) {
+        let { x, y, id } = renderConfig.remotePointerViewportCoords[clientId];
+        x -= appState.offsetLeft;
+        y -= appState.offsetTop;
+        const width = 11;
+        const height = 14;
+        const isOutOfBounds = x < 0 || x > normalizedWidth - width || y < 0 || y > normalizedHeight - height;
+        x = Math.max(x, 0);
+        x = Math.min(x, normalizedWidth - width);
+        y = Math.max(y, 0);
+        y = Math.min(y, normalizedHeight - height);
+        const background = getClientColor(id);
+        context.save();
+        context.strokeStyle = background;
+        context.fillStyle = background;
+        const userState = renderConfig.remotePointerUserStates[clientId];
+        const isInactive = isOutOfBounds || userState === "idle" /* IDLE */ || userState === "away" /* AWAY */;
+        if (isInactive) {
+          context.globalAlpha = 0.3;
+        }
+        if (renderConfig.remotePointerButton && renderConfig.remotePointerButton[clientId] === "down") {
+          context.beginPath();
+          context.arc(x, y, 15, 0, 2 * Math.PI, false);
+          context.lineWidth = 3;
+          context.strokeStyle = "#ffffff88";
+          context.stroke();
+          context.closePath();
+          context.beginPath();
+          context.arc(x, y, 15, 0, 2 * Math.PI, false);
+          context.lineWidth = 1;
+          context.strokeStyle = background;
+          context.stroke();
+          context.closePath();
+        }
+        context.fillStyle = oc3.white;
+        context.strokeStyle = oc3.white;
+        context.lineWidth = 6;
+        context.lineJoin = "round";
+        context.beginPath();
+        context.moveTo(x, y);
+        context.lineTo(x + 0, y + 14);
+        context.lineTo(x + 4, y + 9);
+        context.lineTo(x + 11, y + 8);
+        context.closePath();
+        context.stroke();
+        context.fill();
+        context.fillStyle = background;
+        context.strokeStyle = background;
+        context.lineWidth = 2;
+        context.lineJoin = "round";
+        context.beginPath();
+        if (isInactive) {
+          context.moveTo(x - 1, y - 1);
+          context.lineTo(x - 1, y + 15);
+          context.lineTo(x + 5, y + 10);
+          context.lineTo(x + 12, y + 9);
+          context.closePath();
+          context.fill();
+        } else {
+          context.moveTo(x, y);
+          context.lineTo(x + 0, y + 14);
+          context.lineTo(x + 4, y + 9);
+          context.lineTo(x + 11, y + 8);
+          context.closePath();
+          context.fill();
+          context.stroke();
+        }
+        const username = renderConfig.remotePointerUsernames[clientId] || "";
+        if (!isOutOfBounds && username) {
+          context.font = "600 12px sans-serif";
+          const offsetX = x + width / 2;
+          const offsetY = y + height + 2;
+          const paddingHorizontal = 5;
+          const paddingVertical = 3;
+          const measure = context.measureText(username);
+          const measureHeight = measure.actualBoundingBoxDescent + measure.actualBoundingBoxAscent;
+          const finalHeight = Math.max(measureHeight, 12);
+          const boxX = offsetX - 1;
+          const boxY = offsetY - 1;
+          const boxWidth = measure.width + 2 + paddingHorizontal * 2 + 2;
+          const boxHeight = finalHeight + 2 + paddingVertical * 2 + 2;
+          if (context.roundRect) {
+            context.beginPath();
+            context.roundRect(boxX, boxY, boxWidth, boxHeight, 8);
+            context.fillStyle = background;
+            context.fill();
+            context.strokeStyle = oc3.white;
+            context.stroke();
+          } else {
+            roundRect(context, boxX, boxY, boxWidth, boxHeight, 8, oc3.white);
+          }
+          context.fillStyle = oc3.black;
+          context.fillText(
+            username,
+            offsetX + paddingHorizontal + 1,
+            offsetY + paddingVertical + measure.actualBoundingBoxAscent + Math.floor((finalHeight - measureHeight) / 2) + 2
+          );
+        }
+        context.restore();
+        context.closePath();
+      }
       let scrollBars;
       if (renderConfig.renderScrollbars) {
         scrollBars = getScrollBars(
@@ -36224,40 +35867,40 @@ var init_InteractiveCanvas = __esm({
           isComponentMounted.current = true;
           return;
         }
-        const remotePointerButton = /* @__PURE__ */ new Map();
-        const remotePointerViewportCoords = /* @__PURE__ */ new Map();
-        const remoteSelectedElementIds = /* @__PURE__ */ new Map();
-        const remotePointerUsernames = /* @__PURE__ */ new Map();
-        const remotePointerUserStates = /* @__PURE__ */ new Map();
+        const cursorButton = {};
+        const pointerViewportCoords = {};
+        const remoteSelectedElementIds = {};
+        const pointerUsernames = {};
+        const pointerUserStates = {};
         props.appState.collaborators.forEach((user, socketId) => {
           if (user.selectedElementIds) {
             for (const id of Object.keys(user.selectedElementIds)) {
-              if (!remoteSelectedElementIds.has(id)) {
-                remoteSelectedElementIds.set(id, []);
+              if (!(id in remoteSelectedElementIds)) {
+                remoteSelectedElementIds[id] = [];
               }
-              remoteSelectedElementIds.get(id).push(socketId);
+              remoteSelectedElementIds[id].push(socketId);
             }
           }
           if (!user.pointer || user.pointer.renderCursor === false) {
             return;
           }
           if (user.username) {
-            remotePointerUsernames.set(socketId, user.username);
+            pointerUsernames[socketId] = user.username;
           }
           if (user.userState) {
-            remotePointerUserStates.set(socketId, user.userState);
+            pointerUserStates[socketId] = user.userState;
           }
-          remotePointerViewportCoords.set(
-            socketId,
-            sceneCoordsToViewportCoords(
+          pointerViewportCoords[socketId] = {
+            ...sceneCoordsToViewportCoords(
               {
                 sceneX: user.pointer.x,
                 sceneY: user.pointer.y
               },
               props.appState
-            )
-          );
-          remotePointerButton.set(socketId, user.button);
+            ),
+            id: user.id || socketId
+          };
+          cursorButton[socketId] = user.button;
         });
         const selectionColor = props.containerRef?.current && getComputedStyle(props.containerRef.current).getPropertyValue(
           "--color-selection"
@@ -36271,11 +35914,11 @@ var init_InteractiveCanvas = __esm({
             scale: window.devicePixelRatio,
             appState: props.appState,
             renderConfig: {
-              remotePointerViewportCoords,
-              remotePointerButton,
+              remotePointerViewportCoords: pointerViewportCoords,
+              remotePointerButton: cursorButton,
               remoteSelectedElementIds,
-              remotePointerUsernames,
-              remotePointerUserStates,
+              remotePointerUsernames: pointerUsernames,
+              remotePointerUserStates: pointerUserStates,
               selectionColor,
               renderScrollbars: false
             },
@@ -36749,7 +36392,7 @@ Please output JUST THE HTML file containing your best attempt at implementing th
 });
 
 // components/MagicButton.tsx
-import clsx47 from "clsx";
+import clsx46 from "clsx";
 import { jsx as jsx122, jsxs as jsxs67 } from "react/jsx-runtime";
 var DEFAULT_SIZE4, ElementCanvasButton;
 var init_MagicButton = __esm({
@@ -36762,7 +36405,7 @@ var init_MagicButton = __esm({
       return /* @__PURE__ */ jsxs67(
         "label",
         {
-          className: clsx47(
+          className: clsx46(
             "ToolIcon ToolIcon__MagicButton",
             `ToolIcon_size_${DEFAULT_SIZE4}`,
             {
@@ -37068,7 +36711,7 @@ var init_laser_trails = __esm({
           if (!this.collabTrails.has(key)) {
             trail = new AnimatedTrail(this.animationFrameHandler, this.app, {
               ...this.getTrailOptions(),
-              fill: () => collaborator.pointer?.laserColor || getClientColor(key, collaborator)
+              fill: () => collaborator.pointer?.laserColor || getClientColor(collaborator.id || key)
             });
             trail.start(this.container);
             this.collabTrails.set(key, trail);
@@ -37592,11 +37235,11 @@ var init_textWysiwyg = __esm({
 import React38, { useContext as useContext3 } from "react";
 import { flushSync } from "react-dom";
 import rough4 from "roughjs/bin/rough";
-import clsx48 from "clsx";
+import clsx47 from "clsx";
 import { nanoid as nanoid3 } from "nanoid";
 import throttle2 from "lodash.throttle";
 import { Fragment as Fragment20, jsx as jsx124, jsxs as jsxs69 } from "react/jsx-runtime";
-var AppContext, AppPropsContext, deviceContextInitialValue, DeviceContext, ExcalidrawContainerContext, ExcalidrawElementsContext, ExcalidrawAppStateContext, ExcalidrawSetAppStateContext, ExcalidrawActionManagerContext, useApp, useAppProps, useDevice, useExcalidrawContainer, useExcalidrawElements, useExcalidrawAppState, useExcalidrawSetAppState, useExcalidrawActionManager, didTapTwice, tappedTwiceTimer, isHoldingSpace, isPanning, isDraggingScrollBar, currentScrollBars, touchTimeout, invalidateContextMenu, YOUTUBE_VIDEO_STATES, IS_PLAIN_PASTE, IS_PLAIN_PASTE_TIMER, PLAIN_PASTE_TOAST_SHOWN, lastPointerUp, gesture, App, createTestHook, App_default;
+var AppContext, AppPropsContext, deviceContextInitialValue, DeviceContext, ExcalidrawContainerContext, ExcalidrawElementsContext, ExcalidrawAppStateContext, ExcalidrawSetAppStateContext, ExcalidrawActionManagerContext, useApp, useAppProps, useDevice, useExcalidrawContainer, useExcalidrawElements, useExcalidrawAppState, useExcalidrawSetAppState, useExcalidrawActionManager, supportsResizeObserver, didTapTwice, tappedTwiceTimer, isHoldingSpace, isPanning, isDraggingScrollBar, currentScrollBars, touchTimeout, invalidateContextMenu, YOUTUBE_VIDEO_STATES, IS_PLAIN_PASTE, IS_PLAIN_PASTE_TIMER, PLAIN_PASTE_TOAST_SHOWN, lastPointerUp, gesture, App, createTestHook, App_default;
 var init_App = __esm({
   "components/App.tsx"() {
     "use strict";
@@ -37681,7 +37324,6 @@ var init_App = __esm({
     init_renderElement();
     init_textWysiwyg();
     init_scrollbars();
-    init_fractionalIndex();
     init_helpers();
     AppContext = React38.createContext(null);
     AppPropsContext = React38.createContext(null);
@@ -37726,6 +37368,7 @@ var init_App = __esm({
     useExcalidrawAppState = () => useContext3(ExcalidrawAppStateContext);
     useExcalidrawSetAppState = () => useContext3(ExcalidrawSetAppStateContext);
     useExcalidrawActionManager = () => useContext3(ExcalidrawActionManagerContext);
+    supportsResizeObserver = typeof window !== "undefined" && "ResizeObserver" in window;
     didTapTwice = false;
     tappedTwiceTimer = 0;
     isHoldingSpace = false;
@@ -38216,7 +37859,7 @@ var init_App = __esm({
           return /* @__PURE__ */ jsx124(
             "div",
             {
-              className: clsx48("excalidraw__embeddable-container", {
+              className: clsx47("excalidraw__embeddable-container", {
                 "is-hovered": isHovered
               }),
               style: {
@@ -38469,7 +38112,7 @@ var init_App = __esm({
         return /* @__PURE__ */ jsx124(
           "div",
           {
-            className: clsx48("excalidraw excalidraw-container", {
+            className: clsx47("excalidraw excalidraw-container", {
               "excalidraw--view-mode": this.state.viewModeEnabled,
               "excalidraw--mobile": this.device.editor.isMobile,
               "excalidraw--zen-mode": this.state.zenModeEnabled
@@ -38964,7 +38607,7 @@ var init_App = __esm({
               opacity: 100,
               locked: false
             });
-            this.scene.insertElement(frame);
+            this.scene.addNewElement(frame);
             for (const child of selectedElements) {
               mutateElement(child, { frameId: frame.id });
             }
@@ -39809,18 +39452,19 @@ var init_App = __esm({
             randomizeSeed: !opts.retainSeed
           }
         );
-        const prevElements = this.scene.getElementsIncludingDeleted();
-        const nextElements = [...prevElements, ...newElements];
-        syncMovedIndices(nextElements, arrayToMap(newElements));
+        const allElements = [
+          ...this.scene.getElementsIncludingDeleted(),
+          ...newElements
+        ];
         const topLayerFrame = this.getTopLayerFrameAtSceneCoords({ x, y });
         if (topLayerFrame) {
           const eligibleElements = filterElementsEligibleAsFrameChildren(
             newElements,
             topLayerFrame
           );
-          addElementsToFrame(nextElements, eligibleElements, topLayerFrame);
+          addElementsToFrame(allElements, eligibleElements, topLayerFrame);
         }
-        this.scene.replaceAllElements(nextElements);
+        this.scene.replaceAllElements(allElements);
         newElements.forEach((newElement2) => {
           if (isTextElement(newElement2) && isBoundToContainer(newElement2)) {
             const container = getContainerElement(
@@ -40008,7 +39652,18 @@ var init_App = __esm({
         if (textElements.length === 0) {
           return;
         }
-        this.scene.insertElements(textElements);
+        const frameId = textElements[0].frameId;
+        if (frameId) {
+          this.scene.insertElementsAtIndex(
+            textElements,
+            this.scene.getElementIndex(frameId)
+          );
+        } else {
+          this.scene.replaceAllElements([
+            ...this.scene.getElementsIncludingDeleted(),
+            ...textElements
+          ]);
+        }
         this.setState({
           selectedElementIds: makeNextSelectedElementIds(
             Object.fromEntries(textElements.map((el) => [el.id, true])),
@@ -40871,7 +40526,7 @@ var init_App = __esm({
             const containerIndex = this.scene.getElementIndex(container.id);
             this.scene.insertElementAtIndex(element, containerIndex + 1);
           } else {
-            this.scene.insertElement(element);
+            this.scene.addNewElement(element);
           }
         }
         this.setState({
@@ -42263,7 +41918,7 @@ var init_App = __esm({
           this.scene.getNonDeletedElements(),
           this.scene.getNonDeletedElementsMap()
         );
-        this.scene.insertElement(element);
+        this.scene.addNewElement(element);
         this.setState({
           draggingElement: element,
           editingElement: element,
@@ -42298,7 +41953,10 @@ var init_App = __esm({
           width,
           height
         });
-        this.scene.insertElement(element);
+        this.scene.replaceAllElements([
+          ...this.scene.getElementsIncludingDeleted(),
+          element
+        ]);
         return element;
       };
       //create rectangle element with youtube top left on nearest grid point width / hight 640/360
@@ -42339,7 +41997,10 @@ var init_App = __esm({
           height: embedLink.intrinsicSize.h,
           link
         });
-        this.scene.insertElement(element);
+        this.scene.replaceAllElements([
+          ...this.scene.getElementsIncludingDeleted(),
+          element
+        ]);
         return element;
       };
       createImageElement = ({
@@ -42455,7 +42116,7 @@ var init_App = __esm({
             this.scene.getNonDeletedElements(),
             this.scene.getNonDeletedElementsMap()
           );
-          this.scene.insertElement(element);
+          this.scene.addNewElement(element);
           this.setState({
             draggingElement: element,
             editingElement: element,
@@ -42511,7 +42172,7 @@ var init_App = __esm({
             draggingElement: element
           });
         } else {
-          this.scene.insertElement(element);
+          this.scene.addNewElement(element);
           this.setState({
             multiElement: null,
             draggingElement: element,
@@ -42533,7 +42194,10 @@ var init_App = __esm({
           ...FRAME_STYLE
         };
         const frame = type === TOOL_TYPE.magicframe ? newMagicFrameElement(constructorOpts) : newFrameElement(constructorOpts);
-        this.scene.insertElement(frame);
+        this.scene.replaceAllElements([
+          ...this.scene.getElementsIncludingDeleted(),
+          frame
+        ]);
         this.setState({
           multiElement: null,
           draggingElement: frame,
@@ -42821,7 +42485,6 @@ var init_App = __esm({
                   }
                 }
                 const nextSceneElements = [...nextElements, ...elementsToAppend];
-                syncMovedIndices(nextSceneElements, arrayToMap(elementsToAppend));
                 bindTextToShapeAfterDuplication(
                   nextElements,
                   elementsToAppend,
@@ -43715,7 +43378,7 @@ var init_App = __esm({
           this.setState({ errorMessage: t("errors.imageToolNotSupported") });
           return;
         }
-        this.scene.insertElement(imageElement);
+        this.scene.addNewElement(imageElement);
         try {
           return await this.initializeImage({
             imageFile,
@@ -44589,9 +44252,7 @@ var init_App = __esm({
               return this.app?.scene.getElementsIncludingDeleted();
             },
             set(elements) {
-              return this.app?.scene.replaceAllElements(
-                syncInvalidIndices(elements)
-              );
+              return this.app?.scene.replaceAllElements(elements);
             }
           }
         });
@@ -44662,7 +44323,7 @@ var init_FooterCenter = __esm({
 });
 
 // components/footer/FooterCenter.tsx
-import clsx49 from "clsx";
+import clsx48 from "clsx";
 import { jsx as jsx125 } from "react/jsx-runtime";
 var FooterCenter, FooterCenter_default;
 var init_FooterCenter2 = __esm({
@@ -44678,7 +44339,7 @@ var init_FooterCenter2 = __esm({
       return /* @__PURE__ */ jsx125(FooterCenterTunnel.In, { children: /* @__PURE__ */ jsx125(
         "div",
         {
-          className: clsx49("footer-center zen-mode-transition", {
+          className: clsx48("footer-center zen-mode-transition", {
             "layer-ui__wrapper__footer-left--transition-bottom": appState.zenModeEnabled
           }),
           children
@@ -44989,7 +44650,7 @@ var init_LiveCollaborationTrigger = __esm({
 });
 
 // components/live-collaboration/LiveCollaborationTrigger.tsx
-import clsx50 from "clsx";
+import clsx49 from "clsx";
 import { jsx as jsx130, jsxs as jsxs74 } from "react/jsx-runtime";
 var LiveCollaborationTrigger2, LiveCollaborationTrigger_default;
 var init_LiveCollaborationTrigger2 = __esm({
@@ -45012,7 +44673,7 @@ var init_LiveCollaborationTrigger2 = __esm({
         Button,
         {
           ...rest,
-          className: clsx50("collab-button", { active: isCollaborating }),
+          className: clsx49("collab-button", { active: isCollaborating }),
           type: "button",
           onSelect,
           style: { position: "relative", width: showIconOnly ? void 0 : "auto" },