@dwelle/excalidraw 0.5.0-bb58eff → 0.5.0-bcfbd91

package/dist/browser/dev/excalidraw-assets-dev/{chunk-FG5PX37Z.js → chunk-7ZK24NYG.js}

@@ -1,10 +1,10 @@
 import {
   define_import_meta_env_default,
   init_define_import_meta_env
-} from "./chunk-OBKV4VWD.js";
+} from "./chunk-OGN4DE2Q.js";
 import {
   en_default
-} from "./chunk-2WPXONHI.js";
+} from "./chunk-WFIY45QO.js";
 import {
   percentages_default
 } from "./chunk-YZTYRBEQ.js";
@@ -5588,7 +5588,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
           return x3 === y3 && (x3 !== 0 || 1 / x3 === 1 / y3) || x3 !== x3 && y3 !== y3;
         }
         var objectIs = typeof Object.is === "function" ? Object.is : is;
-        var useState35 = React49.useState, useEffect37 = React49.useEffect, useLayoutEffect11 = React49.useLayoutEffect, useDebugValue3 = React49.useDebugValue;
+        var useState35 = React49.useState, useEffect37 = React49.useEffect, useLayoutEffect10 = React49.useLayoutEffect, useDebugValue3 = React49.useDebugValue;
         var didWarnOld18Alpha = false;
         var didWarnUncachedGetSnapshot = false;
         function useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
@@ -5616,7 +5616,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
               getSnapshot
             }
           }), inst = _useState[0].inst, forceUpdate = _useState[1];
-          useLayoutEffect11(function() {
+          useLayoutEffect10(function() {
             inst.value = value;
             inst.getSnapshot = getSnapshot;
             if (checkIfSnapshotChanged(inst)) {
@@ -5959,7 +5959,6 @@ var isSafari = !isChrome && navigator.userAgent.indexOf("Safari") !== -1;
 var isIOS = /iPad|iPhone/.test(navigator.platform) || // iPadOS 13+
 navigator.userAgent.includes("Mac") && "ontouchend" in document;
 var isBrave = () => navigator.brave?.isBrave?.name === "isBrave";
-var supportsResizeObserver = typeof window !== "undefined" && "ResizeObserver" in window;
 var APP_NAME = "Excalidraw";
 var DRAGGING_THRESHOLD = 10;
 var LINE_CONFIRM_THRESHOLD = 8;
@@ -6041,7 +6040,6 @@ var DEFAULT_ZOOM_VALUE = 1;
 var COLOR_WHITE = "#ffffff";
 var COLOR_CHARCOAL_BLACK = "#1e1e1e";
 var COLOR_TRANSPARENT = "transparent";
-var COLOR_VOICE_CALL = "#a2f1a6";
 var GRID_SIZE = 20;
 var IMAGE_MIME_TYPES = {
   svg: "image/svg+xml",
@@ -6155,6 +6153,7 @@ var ROUNDNESS = {
   // (see DEFAULT_ADAPTIVE_RADIUS constant)
   ADAPTIVE_RADIUS: 3
 };
+var PRECEDING_ELEMENT_KEY = "__precedingElement__";
 var ROUGHNESS = {
   architect: 0,
   artist: 1,
@@ -6863,14 +6862,6 @@ var isShallowEqual = (objA, objB, comparators, debug = false) => {
   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)) {
@@ -12520,7 +12511,7 @@ var LinearElementEditor = class _LinearElementEditor {
       pointerDownState: linearElementEditor.pointerDownState,
       selectedPointsIndices: linearElementEditor.selectedPointsIndices
     };
-    const midpoint2 = _LinearElementEditor.createPointAt(
+    const midpoint = _LinearElementEditor.createPointAt(
       element,
       elementsMap,
       pointerCoords.x,
@@ -12529,7 +12520,7 @@ var LinearElementEditor = class _LinearElementEditor {
     );
     const points = [
       ...element.points.slice(0, segmentMidpoint.index),
-      midpoint2,
+      midpoint,
       ...element.points.slice(segmentMidpoint.index)
     ];
     mutateElement(element, {
@@ -15540,7 +15531,6 @@ var _newElementBase = (type, {
   angle = 0,
   groupIds = [],
   frameId = null,
-  index: index2 = null,
   roundness = null,
   boundElements = null,
   link = null,
@@ -15564,7 +15554,6 @@ var _newElementBase = (type, {
     opacity,
     groupIds,
     frameId,
-    index: index2,
     roundness,
     seed: rest.seed ?? randomInteger(),
     version: rest.version || 1,
@@ -16674,12 +16663,12 @@ var e = (() => {
     return "showOpenFilePicker";
   return false;
 })();
-var t = e ? import("./file-open-002ab408-K7UWK3UX.js") : import("./file-open-7c801643-PUS6AQBV.js");
+var t = e ? import("./file-open-002ab408-2OQEKDVS.js") : import("./file-open-7c801643-7IDWBVQC.js");
 async function n(...e3) {
   return (await t).default(...e3);
 }
-var i = e ? import("./directory-open-4ed118d0-FYNYOZXP.js") : import("./directory-open-01563666-VWSBJ543.js");
-var o = e ? import("./file-save-745eba88-FCWOWXVA.js") : import("./file-save-3189631c-AVBJT4K7.js");
+var i = e ? import("./directory-open-4ed118d0-EEZTUAOR.js") : import("./directory-open-01563666-HET5VGVW.js");
+var o = e ? import("./file-save-745eba88-3NARDH2Z.js") : import("./file-save-3189631c-D66DZOSK.js");
 async function s(...e3) {
   return (await o).default(...e3);
 }
@@ -16706,9 +16695,6 @@ var ImageSceneDataError = class extends Error {
     this.code = code;
   }
 };
-var InvalidFractionalIndexError = class extends Error {
-  code = "ELEMENT_HAS_INVALID_INDEX";
-};
 
 // data/filesystem.ts
 var INPUT_CHANGE_INTERVAL_MS = 500;
@@ -16946,376 +16932,6 @@ var normalizeSVG = async (SVGString) => {
 
 // data/restore.ts
 init_define_import_meta_env();
-
-// fractionalIndex.ts
-init_define_import_meta_env();
-
-// ../../node_modules/fractional-indexing/src/index.js
-init_define_import_meta_env();
-var BASE_62_DIGITS = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
-function midpoint(a4, b4, digits) {
-  const zero = digits[0];
-  if (b4 != null && a4 >= b4) {
-    throw new Error(a4 + " >= " + b4);
-  }
-  if (a4.slice(-1) === zero || b4 && b4.slice(-1) === zero) {
-    throw new Error("trailing zero");
-  }
-  if (b4) {
-    let n4 = 0;
-    while ((a4[n4] || zero) === b4[n4]) {
-      n4++;
-    }
-    if (n4 > 0) {
-      return b4.slice(0, n4) + midpoint(a4.slice(n4), b4.slice(n4), digits);
-    }
-  }
-  const digitA = a4 ? digits.indexOf(a4[0]) : 0;
-  const digitB = b4 != null ? digits.indexOf(b4[0]) : digits.length;
-  if (digitB - digitA > 1) {
-    const midDigit = Math.round(0.5 * (digitA + digitB));
-    return digits[midDigit];
-  } else {
-    if (b4 && b4.length > 1) {
-      return b4.slice(0, 1);
-    } else {
-      return digits[digitA] + midpoint(a4.slice(1), null, digits);
-    }
-  }
-}
-function validateInteger(int) {
-  if (int.length !== getIntegerLength(int[0])) {
-    throw new Error("invalid integer part of order key: " + int);
-  }
-}
-function getIntegerLength(head) {
-  if (head >= "a" && head <= "z") {
-    return head.charCodeAt(0) - "a".charCodeAt(0) + 2;
-  } else if (head >= "A" && head <= "Z") {
-    return "Z".charCodeAt(0) - head.charCodeAt(0) + 2;
-  } else {
-    throw new Error("invalid order key head: " + head);
-  }
-}
-function getIntegerPart(key) {
-  const integerPartLength = getIntegerLength(key[0]);
-  if (integerPartLength > key.length) {
-    throw new Error("invalid order key: " + key);
-  }
-  return key.slice(0, integerPartLength);
-}
-function validateOrderKey(key, digits) {
-  if (key === "A" + digits[0].repeat(26)) {
-    throw new Error("invalid order key: " + key);
-  }
-  const i4 = getIntegerPart(key);
-  const f3 = key.slice(i4.length);
-  if (f3.slice(-1) === digits[0]) {
-    throw new Error("invalid order key: " + key);
-  }
-}
-function incrementInteger(x3, digits) {
-  validateInteger(x3);
-  const [head, ...digs] = x3.split("");
-  let carry = true;
-  for (let i4 = digs.length - 1; carry && i4 >= 0; i4--) {
-    const d3 = digits.indexOf(digs[i4]) + 1;
-    if (d3 === digits.length) {
-      digs[i4] = digits[0];
-    } else {
-      digs[i4] = digits[d3];
-      carry = false;
-    }
-  }
-  if (carry) {
-    if (head === "Z") {
-      return "a" + digits[0];
-    }
-    if (head === "z") {
-      return null;
-    }
-    const h3 = String.fromCharCode(head.charCodeAt(0) + 1);
-    if (h3 > "a") {
-      digs.push(digits[0]);
-    } else {
-      digs.pop();
-    }
-    return h3 + digs.join("");
-  } else {
-    return head + digs.join("");
-  }
-}
-function decrementInteger(x3, digits) {
-  validateInteger(x3);
-  const [head, ...digs] = x3.split("");
-  let borrow = true;
-  for (let i4 = digs.length - 1; borrow && i4 >= 0; i4--) {
-    const d3 = digits.indexOf(digs[i4]) - 1;
-    if (d3 === -1) {
-      digs[i4] = digits.slice(-1);
-    } else {
-      digs[i4] = digits[d3];
-      borrow = false;
-    }
-  }
-  if (borrow) {
-    if (head === "a") {
-      return "Z" + digits.slice(-1);
-    }
-    if (head === "A") {
-      return null;
-    }
-    const h3 = String.fromCharCode(head.charCodeAt(0) - 1);
-    if (h3 < "Z") {
-      digs.push(digits.slice(-1));
-    } else {
-      digs.pop();
-    }
-    return h3 + digs.join("");
-  } else {
-    return head + digs.join("");
-  }
-}
-function generateKeyBetween(a4, b4, digits = BASE_62_DIGITS) {
-  if (a4 != null) {
-    validateOrderKey(a4, digits);
-  }
-  if (b4 != null) {
-    validateOrderKey(b4, digits);
-  }
-  if (a4 != null && b4 != null && a4 >= b4) {
-    throw new Error(a4 + " >= " + b4);
-  }
-  if (a4 == null) {
-    if (b4 == null) {
-      return "a" + digits[0];
-    }
-    const ib2 = getIntegerPart(b4);
-    const fb2 = b4.slice(ib2.length);
-    if (ib2 === "A" + digits[0].repeat(26)) {
-      return ib2 + midpoint("", fb2, digits);
-    }
-    if (ib2 < b4) {
-      return ib2;
-    }
-    const res = decrementInteger(ib2, digits);
-    if (res == null) {
-      throw new Error("cannot decrement any more");
-    }
-    return res;
-  }
-  if (b4 == null) {
-    const ia2 = getIntegerPart(a4);
-    const fa2 = a4.slice(ia2.length);
-    const i5 = incrementInteger(ia2, digits);
-    return i5 == null ? ia2 + midpoint(fa2, null, digits) : i5;
-  }
-  const ia = getIntegerPart(a4);
-  const fa = a4.slice(ia.length);
-  const ib = getIntegerPart(b4);
-  const fb = b4.slice(ib.length);
-  if (ia === ib) {
-    return ia + midpoint(fa, fb, digits);
-  }
-  const i4 = incrementInteger(ia, digits);
-  if (i4 == null) {
-    throw new Error("cannot increment any more");
-  }
-  if (i4 < b4) {
-    return i4;
-  }
-  return ia + midpoint(fa, null, digits);
-}
-function generateNKeysBetween(a4, b4, n4, digits = BASE_62_DIGITS) {
-  if (n4 === 0) {
-    return [];
-  }
-  if (n4 === 1) {
-    return [generateKeyBetween(a4, b4, digits)];
-  }
-  if (b4 == null) {
-    let c4 = generateKeyBetween(a4, b4, digits);
-    const result = [c4];
-    for (let i4 = 0; i4 < n4 - 1; i4++) {
-      c4 = generateKeyBetween(c4, b4, digits);
-      result.push(c4);
-    }
-    return result;
-  }
-  if (a4 == null) {
-    let c4 = generateKeyBetween(a4, b4, digits);
-    const result = [c4];
-    for (let i4 = 0; i4 < n4 - 1; i4++) {
-      c4 = generateKeyBetween(a4, c4, digits);
-      result.push(c4);
-    }
-    result.reverse();
-    return result;
-  }
-  const mid = Math.floor(n4 / 2);
-  const c3 = generateKeyBetween(a4, b4, digits);
-  return [
-    ...generateNKeysBetween(a4, c3, mid, digits),
-    c3,
-    ...generateNKeysBetween(c3, b4, n4 - mid - 1, digits)
-  ];
-}
-
-// fractionalIndex.ts
-var validateFractionalIndices = (indices) => {
-  for (const [i4, index2] of indices.entries()) {
-    const predecessorIndex = indices[i4 - 1];
-    const successorIndex = indices[i4 + 1];
-    if (!isValidFractionalIndex(index2, predecessorIndex, successorIndex)) {
-      throw new InvalidFractionalIndexError(
-        `Fractional indices invariant for element has been compromised - ["${predecessorIndex}", "${index2}", "${successorIndex}"] [predecessor, current, successor]`
-      );
-    }
-  }
-};
-var syncMovedIndices = (elements, movedElements) => {
-  try {
-    const indicesGroups = getMovedIndicesGroups(elements, movedElements);
-    const elementsUpdates = generateIndices(elements, indicesGroups);
-    validateFractionalIndices(
-      elements.map((x3) => elementsUpdates.get(x3)?.index || x3.index)
-    );
-    for (const [element, update] of elementsUpdates) {
-      mutateElement(element, update, false);
-    }
-  } catch (e3) {
-    syncInvalidIndices(elements);
-  }
-  return elements;
-};
-var syncInvalidIndices = (elements) => {
-  const indicesGroups = getInvalidIndicesGroups(elements);
-  const elementsUpdates = generateIndices(elements, indicesGroups);
-  for (const [element, update] of elementsUpdates) {
-    mutateElement(element, update, false);
-  }
-  return elements;
-};
-var getMovedIndicesGroups = (elements, movedElements) => {
-  const indicesGroups = [];
-  let i4 = 0;
-  while (i4 < elements.length) {
-    if (movedElements.has(elements[i4].id) && !isValidFractionalIndex(
-      elements[i4]?.index,
-      elements[i4 - 1]?.index,
-      elements[i4 + 1]?.index
-    )) {
-      const indicesGroup = [i4 - 1, i4];
-      while (++i4 < elements.length) {
-        if (!(movedElements.has(elements[i4].id) && !isValidFractionalIndex(
-          elements[i4]?.index,
-          elements[i4 - 1]?.index,
-          elements[i4 + 1]?.index
-        ))) {
-          break;
-        }
-        indicesGroup.push(i4);
-      }
-      indicesGroup.push(i4);
-      indicesGroups.push(indicesGroup);
-    } else {
-      i4++;
-    }
-  }
-  return indicesGroups;
-};
-var getInvalidIndicesGroups = (elements) => {
-  const indicesGroups = [];
-  let lowerBound = void 0;
-  let upperBound = void 0;
-  let lowerBoundIndex = -1;
-  let upperBoundIndex = 0;
-  const getLowerBound = (index2) => {
-    const lowerBound2 = elements[lowerBoundIndex] ? elements[lowerBoundIndex].index : void 0;
-    const candidate = elements[index2 - 1]?.index;
-    if (!lowerBound2 && candidate || // first lowerBound
-    lowerBound2 && candidate && candidate > lowerBound2) {
-      return [candidate, index2 - 1];
-    }
-    return [lowerBound2, lowerBoundIndex];
-  };
-  const getUpperBound = (index2) => {
-    const upperBound2 = elements[upperBoundIndex] ? elements[upperBoundIndex].index : void 0;
-    if (upperBound2 && index2 < upperBoundIndex) {
-      return [upperBound2, upperBoundIndex];
-    }
-    let i5 = upperBoundIndex;
-    while (++i5 < elements.length) {
-      const candidate = elements[i5]?.index;
-      if (!upperBound2 && candidate || // first upperBound
-      upperBound2 && candidate && candidate > upperBound2) {
-        return [candidate, i5];
-      }
-    }
-    return [void 0, i5];
-  };
-  let i4 = 0;
-  while (i4 < elements.length) {
-    const current = elements[i4].index;
-    [lowerBound, lowerBoundIndex] = getLowerBound(i4);
-    [upperBound, upperBoundIndex] = getUpperBound(i4);
-    if (!isValidFractionalIndex(current, lowerBound, upperBound)) {
-      const indicesGroup = [lowerBoundIndex, i4];
-      while (++i4 < elements.length) {
-        const current2 = elements[i4].index;
-        const [nextLowerBound, nextLowerBoundIndex] = getLowerBound(i4);
-        const [nextUpperBound, nextUpperBoundIndex] = getUpperBound(i4);
-        if (isValidFractionalIndex(current2, nextLowerBound, nextUpperBound)) {
-          break;
-        }
-        [lowerBound, lowerBoundIndex] = [nextLowerBound, nextLowerBoundIndex];
-        [upperBound, upperBoundIndex] = [nextUpperBound, nextUpperBoundIndex];
-        indicesGroup.push(i4);
-      }
-      indicesGroup.push(upperBoundIndex);
-      indicesGroups.push(indicesGroup);
-    } else {
-      i4++;
-    }
-  }
-  return indicesGroups;
-};
-var isValidFractionalIndex = (index2, predecessor, successor) => {
-  if (!index2) {
-    return false;
-  }
-  if (predecessor && successor) {
-    return predecessor < index2 && index2 < successor;
-  }
-  if (!predecessor && successor) {
-    return index2 < successor;
-  }
-  if (predecessor && !successor) {
-    return predecessor < index2;
-  }
-  return !!index2;
-};
-var 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 i4 = 0; i4 < indices.length; i4++) {
-      const element = elements[indices[i4]];
-      elementsUpdates.set(element, {
-        index: fractionalIndices[i4]
-      });
-    }
-  }
-  return elementsUpdates;
-};
-
-// data/restore.ts
 var AllowedExcalidrawActiveTools = {
   selection: true,
   text: true,
@@ -17353,7 +16969,6 @@ var restoreElementWithProperties = (element, extra) => {
     // 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,
@@ -17384,6 +16999,9 @@ var restoreElementWithProperties = (element, extra) => {
   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),
@@ -17534,28 +17152,23 @@ var repairFrameMembership = (element, elementsMap) => {
 var 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;
   }
@@ -17794,11 +17407,10 @@ var bootstrapCanvas = ({
 // renderer/staticScene.ts
 var 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);
@@ -17810,7 +17422,7 @@ var strokeGrid = (context, gridSize, scrollX, scrollY, zoom, width, height) => {
     const isBold = Math.round(x3 - 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(x3, offsetY - gridSize);
     context.lineTo(x3, offsetY + height + gridSize * 2);
     context.stroke();
@@ -17819,7 +17431,7 @@ var strokeGrid = (context, gridSize, scrollX, scrollY, zoom, width, height) => {
     const isBold = Math.round(y3 - 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, y3);
     context.lineTo(offsetX + width + gridSize * 2, y3);
     context.stroke();
@@ -18276,7 +17888,7 @@ var exportToCanvas = async ({
       arrayToMap(elementsForRender)
     ),
     allElementsMap: toBrandedType(
-      arrayToMap(syncInvalidIndices(elements))
+      arrayToMap(elements)
     ),
     visibleElements: elementsForRender,
     appState: {
@@ -18338,7 +17950,7 @@ var exportToSvg = async ({
   let metadata = "";
   if (exportEmbedScene) {
     try {
-      metadata = await (await import("./image-J27XZPQC.js")).encodeSvgMetadata({
+      metadata = await (await import("./image-DG6G3CCZ.js")).encodeSvgMetadata({
         // when embedding scene, we want to embed the origionally supplied
         // elements which don't contain the temp frame labels.
         // But it also requires that the exportToSvg is being supplied with
@@ -19999,7 +19611,7 @@ var globImport_locales_json = __glob({
   "./locales/da-DK.json": () => import("./da-DK-6OKJ2GQ6.js"),
   "./locales/de-DE.json": () => import("./de-DE-BD5ICOQ2.js"),
   "./locales/el-GR.json": () => import("./el-GR-JFDBTDHS.js"),
-  "./locales/en.json": () => import("./en-OFPNSLTO.js"),
+  "./locales/en.json": () => import("./en-CJBKYSM5.js"),
   "./locales/es-ES.json": () => import("./es-ES-CBBTGYGR.js"),
   "./locales/eu-ES.json": () => import("./eu-ES-CHAPMSLE.js"),
   "./locales/fa-IR.json": () => import("./fa-IR-LOJOKEJO.js"),
@@ -20625,8 +20237,6 @@ __export(icons_exports, {
   laserPointerToolIcon: () => laserPointerToolIcon,
   menu: () => menu,
   mermaidLogoIcon: () => mermaidLogoIcon,
-  microphoneIcon: () => microphoneIcon,
-  microphoneMutedIcon: () => microphoneMutedIcon,
   palette: () => palette,
   playerPlayIcon: () => playerPlayIcon,
   playerStopFilledIcon: () => playerStopFilledIcon,
@@ -22436,7 +22046,7 @@ var fullscreenIcon = createIcon(
   tablerIconProps
 );
 var eyeIcon = createIcon(
-  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { stroke: "currentColor", fill: "none", strokeWidth: 1.5, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { stroke: "currentColor", fill: "none", children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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" })
@@ -22472,27 +22082,6 @@ var searchIcon = createIcon(
   ] }),
   tablerIconProps
 );
-var microphoneIcon = createIcon(
-  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { strokeWidth: 1.5, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M5 10a7 7 0 0 0 14 0" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M8 21l8 0" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12 17l0 4" })
-  ] }),
-  tablerIconProps
-);
-var microphoneMutedIcon = createIcon(
-  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { strokeWidth: 1.5, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M3 3l18 18" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M5 10a7 7 0 0 0 10.846 5.85m2 -2a6.967 6.967 0 0 0 1.152 -3.85" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M8 21l8 0" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12 17l0 4" })
-  ] }),
-  tablerIconProps
-);
 
 // actions/actionDeleteSelected.tsx
 var import_jsx_runtime6 = __toESM(require_jsx_runtime(), 1);
@@ -22774,9 +22363,9 @@ var getTargetIndex = (appState, elements, boundaryIndex, direction, containingFr
 var getTargetElementsMap = (elements, indices) => {
   return indices.reduce((acc, index2) => {
     const element = elements[index2];
-    acc.set(element.id, element);
+    acc[element.id] = element;
     return acc;
-  }, /* @__PURE__ */ new Map());
+  }, {});
 };
 var shiftElementsByOne = (elements, appState, direction) => {
   const indicesToMove = getIndicesToMove(elements, appState);
@@ -22822,8 +22411,12 @@ var shiftElementsByOne = (elements, appState, direction) => {
       ...trailingElements
     ];
   });
-  syncMovedIndices(elements, targetElementsMap);
-  return elements;
+  return elements.map((element) => {
+    if (targetElementsMap[element.id]) {
+      return bumpVersion(element);
+    }
+    return element;
+  });
 };
 var shiftElementsToEnd = (elements, appState, direction, containingFrame, elementsToBeMoved) => {
   const indicesToMove = getIndicesToMove(elements, appState, elementsToBeMoved);
@@ -22878,10 +22471,12 @@ var shiftElementsToEnd = (elements, appState, direction, containingFrame, elemen
       displacedElements.push(elements[index2]);
     }
   }
-  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,
@@ -22892,8 +22487,6 @@ var shiftElementsToEnd = (elements, appState, direction, containingFrame, elemen
     ...targetElements,
     ...trailingElements
   ];
-  syncMovedIndices(nextElements, targetElementsMap);
-  return nextElements;
 };
 function shiftElementsAccountingForFrames(allElements, appState, direction, shiftFunction) {
   const elementsToMove = arrayToMap(
@@ -23247,7 +22840,6 @@ var duplicateElements2 = (elements, appState) => {
   const newElements = [];
   const oldElements = [];
   const oldIdToDuplicatedId = /* @__PURE__ */ new Map();
-  const duplicatedElementsMap = /* @__PURE__ */ new Map();
   const duplicateAndOffsetElement = (element) => {
     const newElement2 = duplicateElement(
       appState.editingGroupId,
@@ -23258,7 +22850,6 @@ var duplicateElements2 = (elements, appState) => {
         y: element.y + GRID_SIZE / 2
       }
     );
-    duplicatedElementsMap.set(newElement2.id, newElement2);
     oldIdToDuplicatedId.set(element.id, newElement2.id);
     oldElements.push(element);
     newElements.push(newElement2);
@@ -23350,7 +22941,6 @@ var duplicateElements2 = (elements, appState) => {
     }
   }
   const finalElements = finalElementsReversed.reverse();
-  syncMovedIndices(finalElements, arrayToMap([...oldElements, ...newElements]));
   bindTextToShapeAfterDuplication(
     elementsWithClones,
     oldElements,
@@ -29805,7 +29395,7 @@ var exportAsImage = async ({
     const blob = canvasToBlob(tempCanvas);
     if (data.appState.exportEmbedScene) {
       blob.then(
-        (blob2) => import("./image-J27XZPQC.js").then(
+        (blob2) => import("./image-DG6G3CCZ.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(
@@ -30434,12 +30024,11 @@ var actionGroup = register({
     const elementsBeforeGroup = nextElements.slice(0, lastGroupElementIndex).filter(
       (updatedElement) => !isElementInGroup(updatedElement, newGroupId)
     );
-    const reorderedElements = [
+    nextElements = [
       ...elementsBeforeGroup,
       ...elementsInGroup,
       ...elementsAfterGroup
     ];
-    syncMovedIndices(reorderedElements, arrayToMap(elementsInGroup));
     return {
       appState: {
         ...appState,
@@ -30449,7 +30038,7 @@ var actionGroup = register({
           getNonDeletedElements2(nextElements)
         )
       },
-      elements: reorderedElements,
+      elements: nextElements,
       commitToHistory: true
     };
   },
@@ -30562,37 +30151,6 @@ init_define_import_meta_env();
 
 // clients.ts
 init_define_import_meta_env();
-
-// renderer/roundRect.ts
-init_define_import_meta_env();
-var roundRect = (context, x3, y3, width, height, radius, strokeColor) => {
-  context.beginPath();
-  context.moveTo(x3 + radius, y3);
-  context.lineTo(x3 + width - radius, y3);
-  context.quadraticCurveTo(x3 + width, y3, x3 + width, y3 + radius);
-  context.lineTo(x3 + width, y3 + height - radius);
-  context.quadraticCurveTo(
-    x3 + width,
-    y3 + height,
-    x3 + width - radius,
-    y3 + height
-  );
-  context.lineTo(x3 + radius, y3 + height);
-  context.quadraticCurveTo(x3, y3 + height, x3, y3 + height - radius);
-  context.lineTo(x3, y3 + radius);
-  context.quadraticCurveTo(x3, y3, x3 + radius, y3);
-  context.closePath();
-  context.fill();
-  if (strokeColor) {
-    context.strokeStyle = strokeColor;
-  }
-  context.stroke();
-};
-
-// types.ts
-init_define_import_meta_env();
-
-// clients.ts
 function hashToInteger(id) {
   let hash = 0;
   if (id.length === 0) {
@@ -30604,8 +30162,8 @@ function hashToInteger(id) {
   }
   return hash;
 }
-var getClientColor = (socketId, collaborator) => {
-  const hash = Math.abs(hashToInteger(collaborator?.id || socketId));
+var getClientColor = (id) => {
+  const hash = Math.abs(hashToInteger(id));
   const hue = hash % 37 * 10;
   const saturation = 100;
   const lightness = 83;
@@ -30615,162 +30173,6 @@ var getNameInitial = (name) => {
   const firstCodePoint = name?.trim()?.codePointAt(0);
   return (firstCodePoint ? String.fromCodePoint(firstCodePoint) : "?").toUpperCase();
 };
-var renderRemoteCursors = ({
-  context,
-  renderConfig,
-  appState,
-  normalizedWidth,
-  normalizedHeight
-}) => {
-  for (const [socketId, pointer] of renderConfig.remotePointerViewportCoords) {
-    let { x: x3, y: y3 } = pointer;
-    const collaborator = appState.collaborators.get(socketId);
-    x3 -= appState.offsetLeft;
-    y3 -= appState.offsetTop;
-    const width = 11;
-    const height = 14;
-    const isOutOfBounds = x3 < 0 || x3 > normalizedWidth - width || y3 < 0 || y3 > normalizedHeight - height;
-    x3 = Math.max(x3, 0);
-    x3 = Math.min(x3, normalizedWidth - width);
-    y3 = Math.max(y3, 0);
-    y3 = Math.min(y3, 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(x3, y3, 15, 0, 2 * Math.PI, false);
-      context.lineWidth = 3;
-      context.strokeStyle = "#ffffff88";
-      context.stroke();
-      context.closePath();
-      context.beginPath();
-      context.arc(x3, y3, 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(x3, y3);
-      context.lineTo(x3 + 0, y3 + 14);
-      context.lineTo(x3 + 4, y3 + 9);
-      context.lineTo(x3 + 11, y3 + 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(x3, y3);
-    context.lineTo(x3 + 0, y3 + 14);
-    context.lineTo(x3 + 4, y3 + 9);
-    context.lineTo(x3 + 11, y3 + 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(x3 - 1, y3 - 1);
-      context.lineTo(x3 - 1, y3 + 15);
-      context.lineTo(x3 + 5, y3 + 10);
-      context.lineTo(x3 + 12, y3 + 9);
-      context.closePath();
-      context.fill();
-    } else {
-      context.moveTo(x3, y3);
-      context.lineTo(x3 + 0, y3 + 14);
-      context.lineTo(x3 + 4, y3 + 9);
-      context.lineTo(x3 + 11, y3 + 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 ? x3 + 0 : x3) + width / 2;
-      const offsetY = (isSpeaking ? y3 + 0 : y3) + 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();
-  }
-};
 
 // components/Avatar.tsx
 init_define_import_meta_env();
@@ -30781,22 +30183,34 @@ var Avatar = ({
   onClick,
   name,
   src,
-  className
+  isBeingFollowed,
+  isCurrentUser
 }) => {
   const shortName = getNameInitial(name);
   const [error, setError] = (0, import_react42.useState)(false);
   const loadImg = !error && src;
   const style = loadImg ? void 0 : { background: color };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: clsx_m_default("Avatar", className), style, onClick, children: loadImg ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-    "img",
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    "div",
     {
-      className: "Avatar-img",
-      src,
-      alt: shortName,
-      referrerPolicy: "no-referrer",
-      onError: () => setError(true)
+      className: clsx_m_default("Avatar", {
+        "Avatar--is-followed": isBeingFollowed,
+        "Avatar--is-current-user": isCurrentUser
+      }),
+      style,
+      onClick,
+      children: loadImg ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        "img",
+        {
+          className: "Avatar-img",
+          src,
+          alt: shortName,
+          referrerPolicy: "no-referrer",
+          onError: () => setError(true)
+        }
+      ) : shortName
     }
-  ) : shortName });
+  );
 };
 
 // actions/actionNavigate.tsx
@@ -30829,39 +30243,12 @@ var actionGoToCollaborator = register({
     };
   },
   PanelComponent: ({ updateData, data, appState }) => {
-    const { socketId, collaborator, withName, isBeingFollowed } = data;
-    const background = getClientColor(socketId, collaborator);
-    const statusClassNames = clsx_m_default({
-      "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__ */ (0, import_jsx_runtime33.jsxs)(
-      "div",
-      {
-        className: "UserList__collaborator-status-icon-speaking-indicator",
-        title: t2("userList.hint.isSpeaking"),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", {})
-        ]
-      }
-    ) : collaborator.isMuted ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-      "div",
-      {
-        className: "UserList__collaborator-status-icon-microphone-muted",
-        title: t2("userList.hint.micMuted"),
-        children: microphoneMutedIcon
-      }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { title: t2("userList.hint.inCall"), children: microphoneIcon }) : null;
+    const { clientId, collaborator, withName, isBeingFollowed } = data;
+    const background = getClientColor(clientId);
     return withName ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
       "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__ */ (0, import_jsx_runtime33.jsx)(
@@ -30872,43 +30259,35 @@ var actionGoToCollaborator = register({
               },
               name: collaborator.username || "",
               src: collaborator.avatarUrl,
-              className: statusClassNames
+              isBeingFollowed,
+              isCurrentUser: collaborator.isCurrentUser === true
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "UserList__collaborator-name", children: collaborator.username }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "UserList__collaborator-status-icons", "aria-hidden": true, children: [
-            isBeingFollowed && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-              "div",
-              {
-                className: "UserList__collaborator-status-icon-is-followed",
-                title: t2("userList.hint.followStatus"),
-                children: eyeIcon
-              }
-            ),
-            statusIconJSX
-          ] })
-        ]
-      }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-      "div",
-      {
-        className: `UserList__collaborator UserList__collaborator--avatar-only ${statusClassNames}`,
-        children: [
           /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-            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 ? t2("userList.hint.followStatus") : void 0,
+              "aria-hidden": true,
+              children: eyeIcon
             }
-          ),
-          statusIconJSX && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "UserList__collaborator-status-icon", children: statusIconJSX })
+          )
         ]
       }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      Avatar,
+      {
+        color: background,
+        onClick: () => {
+          updateData(collaborator);
+        },
+        name: collaborator.username || "",
+        src: collaborator.avatarUrl,
+        isBeingFollowed,
+        isCurrentUser: collaborator.isCurrentUser === true
+      }
     );
   }
 });
@@ -32537,7 +31916,6 @@ var pushTextAboveContainer = (elements, container, textElement) => {
     (ele) => ele.id === container.id
   );
   updatedElements.splice(containerIndex + 1, 0, textElement);
-  syncMovedIndices(updatedElements, arrayToMap([container, textElement]));
   return updatedElements;
 };
 var pushContainerBelowText = (elements, container, textElement) => {
@@ -32550,7 +31928,6 @@ var pushContainerBelowText = (elements, container, textElement) => {
     (ele) => ele.id === textElement.id
   );
   updatedElements.splice(textElementIndex, 0, container);
-  syncMovedIndices(updatedElements, arrayToMap([container, textElement]));
   return updatedElements;
 };
 var actionWrapTextInContainer = register({
@@ -33169,7 +32546,6 @@ var writeData = (prevElements, appState, updater) => {
       )
     );
     fixBindingsAfterDeletion(elements, deletedElements);
-    syncInvalidIndices(elements);
     return {
       elements,
       appState: { ...appState, ...data.appState },
@@ -38682,23 +38058,24 @@ var HelpDialog = ({ onClose }) => {
 init_define_import_meta_env();
 var import_react72 = __toESM(require_react(), 1);
 var import_jsx_runtime81 = __toESM(require_jsx_runtime(), 1);
-var DEFAULT_MAX_AVATARS = 4;
+var FIRST_N_AVATARS = 3;
 var SHOW_COLLABORATORS_FILTER_AT = 8;
 var ConditionalTooltipWrapper = ({
   shouldWrap,
   children,
+  clientId,
   username
-}) => shouldWrap ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Tooltip, { label: username || "Unknown user", children }) : /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_react72.default.Fragment, { children });
+}) => shouldWrap ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Tooltip, { label: username || "Unknown user", children }, clientId) : /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_react72.default.Fragment, { children }, clientId);
 var renderCollaborator = ({
   actionManager,
   collaborator,
-  socketId,
+  clientId,
   withName = false,
   shouldWrapWithTooltip = false,
   isBeingFollowed
 }) => {
   const data = {
-    socketId,
+    clientId,
     collaborator,
     withName,
     isBeingFollowed
@@ -38707,21 +38084,19 @@ var renderCollaborator = ({
   return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
     ConditionalTooltipWrapper,
     {
+      clientId,
       username: collaborator.username,
       shouldWrap: shouldWrapWithTooltip,
       children: avatarJSX
     },
-    socketId
+    clientId
   );
 };
 var collaboratorComparatorKeys = [
   "avatarUrl",
   "id",
   "socketId",
-  "username",
-  "isInCall",
-  "isSpeaking",
-  "isMuted"
+  "username"
 ];
 var UserList = import_react72.default.memo(
   ({ className, mobile, collaborators, userToFollow }) => {
@@ -38735,138 +38110,107 @@ var UserList = import_react72.default.memo(
         { ...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] = import_react72.default.useState("");
-    const userListWrapper = import_react72.default.useRef(null);
-    (0, import_react72.useLayoutEffect)(() => {
-      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] = import_react72.default.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__ */ (0, import_jsx_runtime81.jsx)("div", { className: clsx_m_default("UserList UserList_mobile", className), children: uniqueCollaboratorsArray.map(
-      (collaborator) => renderCollaborator({
+      ([clientId, collaborator]) => renderCollaborator({
         actionManager,
         collaborator,
-        socketId: collaborator.socketId,
+        clientId,
         shouldWrapWithTooltip: true,
         isBeingFollowed: collaborator.socketId === userToFollow
       })
-    ) }) : /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "UserList-wrapper", ref: userListWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
-      "div",
-      {
-        className: clsx_m_default("UserList", className),
-        style: { [`--max-avatars`]: maxAvatars },
-        children: [
-          firstNAvatarsJSX,
-          uniqueCollaboratorsArray.length > maxAvatars - 1 && /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
-            $cb5cc270b50c6fcd$export$be92b6f5f03c0fe9,
-            {
-              onOpenChange: (isOpen) => {
-                if (!isOpen) {
-                  setSearchTerm("");
-                }
-              },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)($cb5cc270b50c6fcd$export$41fb9f06171c75f4, { className: "UserList__more", children: [
-                  "+",
-                  uniqueCollaboratorsArray.length - maxAvatars + 1
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
-                  $cb5cc270b50c6fcd$export$7c6e2c02157bb7d2,
-                  {
-                    style: {
-                      zIndex: 2,
-                      width: "15rem",
-                      textAlign: "left"
-                    },
-                    align: "end",
-                    sideOffset: 10,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(Island, { style: { overflow: "hidden" }, children: [
-                      uniqueCollaboratorsArray.length >= SHOW_COLLABORATORS_FILTER_AT && /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "UserList__search-wrapper", children: [
-                        searchIcon,
-                        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
-                          "input",
-                          {
-                            className: "UserList__search",
-                            type: "text",
-                            placeholder: t2("userList.search.placeholder"),
-                            value: searchTerm,
-                            onChange: (e3) => {
-                              setSearchTerm(e3.target.value);
-                            }
-                          }
-                        )
-                      ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "dropdown-menu UserList__collaborators", children: [
-                        filteredCollaborators.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "UserList__collaborators__empty", children: t2("userList.search.empty") }),
-                        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "UserList__hint", children: t2("userList.hint.text") }),
-                        filteredCollaborators.map(
-                          (collaborator) => renderCollaborator({
-                            actionManager,
-                            collaborator,
-                            socketId: collaborator.socketId,
-                            withName: true,
-                            isBeingFollowed: collaborator.socketId === userToFollow
-                          })
-                        )
-                      ] })
-                    ] })
-                  }
-                )
-              ]
+    ) }) : /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: clsx_m_default("UserList", className), children: [
+      firstNAvatarsJSX,
+      uniqueCollaboratorsArray.length > FIRST_N_AVATARS && /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
+        $cb5cc270b50c6fcd$export$be92b6f5f03c0fe9,
+        {
+          onOpenChange: (isOpen) => {
+            if (!isOpen) {
+              setSearchTerm("");
             }
-          )
-        ]
-      }
-    ) });
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)($cb5cc270b50c6fcd$export$41fb9f06171c75f4, { className: "UserList__more", children: [
+              "+",
+              uniqueCollaboratorsArray.length - FIRST_N_AVATARS
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+              $cb5cc270b50c6fcd$export$7c6e2c02157bb7d2,
+              {
+                style: {
+                  zIndex: 2,
+                  width: "13rem",
+                  textAlign: "left"
+                },
+                align: "end",
+                sideOffset: 10,
+                children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(Island, { style: { overflow: "hidden" }, children: [
+                  uniqueCollaboratorsArray.length >= SHOW_COLLABORATORS_FILTER_AT && /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "UserList__search-wrapper", children: [
+                    searchIcon,
+                    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+                      "input",
+                      {
+                        className: "UserList__search",
+                        type: "text",
+                        placeholder: t2("userList.search.placeholder"),
+                        value: searchTerm,
+                        onChange: (e3) => {
+                          setSearchTerm(e3.target.value);
+                        }
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "dropdown-menu UserList__collaborators", children: [
+                    filteredCollaborators.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "UserList__collaborators__empty", children: t2("userList.search.empty") }),
+                    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "UserList__hint", children: t2("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
@@ -41348,7 +40692,7 @@ TTD mermaid definition render errror: ${error3.message}`,
     refOnGenerate.current = onGenerate;
     const [mermaidToExcalidrawLib, setMermaidToExcalidrawLib] = (0, import_react89.useState)({
       loaded: false,
-      api: import("./dist-HOOQ44NM.js")
+      api: import("./dist-MMLCHBGE.js")
     });
     (0, import_react89.useEffect)(() => {
       const fn = async () => {
@@ -43464,12 +42808,10 @@ var ElementStore = class {
     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);
@@ -43770,6 +43112,35 @@ var isRenderThrottlingEnabled = (() => {
 // renderer/interactiveScene.ts
 init_define_import_meta_env();
 
+// renderer/roundRect.ts
+init_define_import_meta_env();
+var roundRect = (context, x3, y3, width, height, radius, strokeColor) => {
+  context.beginPath();
+  context.moveTo(x3 + radius, y3);
+  context.lineTo(x3 + width - radius, y3);
+  context.quadraticCurveTo(x3 + width, y3, x3 + width, y3 + radius);
+  context.lineTo(x3 + width, y3 + height - radius);
+  context.quadraticCurveTo(
+    x3 + width,
+    y3 + height,
+    x3 + width - radius,
+    y3 + height
+  );
+  context.lineTo(x3 + radius, y3 + height);
+  context.quadraticCurveTo(x3, y3 + height, x3, y3 + height - radius);
+  context.lineTo(x3, y3 + radius);
+  context.quadraticCurveTo(x3, y3, x3 + radius, y3);
+  context.closePath();
+  context.fill();
+  if (strokeColor) {
+    context.strokeStyle = strokeColor;
+  }
+  context.stroke();
+};
+
+// types.ts
+init_define_import_meta_env();
+
 // renderer/renderSnaps.ts
 init_define_import_meta_env();
 var SNAP_COLOR_LIGHT = "#ff6b6b";
@@ -44342,18 +43713,15 @@ var _renderInteractiveScene = ({
         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) {
@@ -44365,7 +43733,7 @@ var _renderInteractiveScene = ({
             elementX2,
             elementY2,
             selectionColors,
-            dashed: !!remoteClients,
+            dashed: !!renderConfig.remoteSelectedElementIds[element.id],
             cx,
             cy,
             activeEmbeddable: appState.activeEmbeddable?.element === element && appState.activeEmbeddable.state === "active"
@@ -44460,13 +43828,107 @@ var _renderInteractiveScene = ({
   }
   renderSnaps(context, appState);
   context.restore();
-  renderRemoteCursors({
-    context,
-    renderConfig,
-    appState,
-    normalizedWidth,
-    normalizedHeight
-  });
+  for (const clientId in renderConfig.remotePointerViewportCoords) {
+    let { x: x3, y: y3, id } = renderConfig.remotePointerViewportCoords[clientId];
+    x3 -= appState.offsetLeft;
+    y3 -= appState.offsetTop;
+    const width = 11;
+    const height = 14;
+    const isOutOfBounds = x3 < 0 || x3 > normalizedWidth - width || y3 < 0 || y3 > normalizedHeight - height;
+    x3 = Math.max(x3, 0);
+    x3 = Math.min(x3, normalizedWidth - width);
+    y3 = Math.max(y3, 0);
+    y3 = Math.min(y3, 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(x3, y3, 15, 0, 2 * Math.PI, false);
+      context.lineWidth = 3;
+      context.strokeStyle = "#ffffff88";
+      context.stroke();
+      context.closePath();
+      context.beginPath();
+      context.arc(x3, y3, 15, 0, 2 * Math.PI, false);
+      context.lineWidth = 1;
+      context.strokeStyle = background;
+      context.stroke();
+      context.closePath();
+    }
+    context.fillStyle = open_color_default.white;
+    context.strokeStyle = open_color_default.white;
+    context.lineWidth = 6;
+    context.lineJoin = "round";
+    context.beginPath();
+    context.moveTo(x3, y3);
+    context.lineTo(x3 + 0, y3 + 14);
+    context.lineTo(x3 + 4, y3 + 9);
+    context.lineTo(x3 + 11, y3 + 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(x3 - 1, y3 - 1);
+      context.lineTo(x3 - 1, y3 + 15);
+      context.lineTo(x3 + 5, y3 + 10);
+      context.lineTo(x3 + 12, y3 + 9);
+      context.closePath();
+      context.fill();
+    } else {
+      context.moveTo(x3, y3);
+      context.lineTo(x3 + 0, y3 + 14);
+      context.lineTo(x3 + 4, y3 + 9);
+      context.lineTo(x3 + 11, y3 + 8);
+      context.closePath();
+      context.fill();
+      context.stroke();
+    }
+    const username = renderConfig.remotePointerUsernames[clientId] || "";
+    if (!isOutOfBounds && username) {
+      context.font = "600 12px sans-serif";
+      const offsetX = x3 + width / 2;
+      const offsetY = y3 + 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 = open_color_default.white;
+        context.stroke();
+      } else {
+        roundRect(context, boxX, boxY, boxWidth, boxHeight, 8, open_color_default.white);
+      }
+      context.fillStyle = open_color_default.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(
@@ -44524,40 +43986,40 @@ var InteractiveCanvas = (props) => {
       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"
@@ -44571,11 +44033,11 @@ var InteractiveCanvas = (props) => {
         scale: window.devicePixelRatio,
         appState: props.appState,
         renderConfig: {
-          remotePointerViewportCoords,
-          remotePointerButton,
+          remotePointerViewportCoords: pointerViewportCoords,
+          remotePointerButton: cursorButton,
           remoteSelectedElementIds,
-          remotePointerUsernames,
-          remotePointerUserStates,
+          remotePointerUsernames: pointerUsernames,
+          remotePointerUserStates: pointerUserStates,
           selectionColor,
           renderScrollbars: false
         },
@@ -45611,7 +45073,7 @@ var LaserTrails = class {
       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);
@@ -46156,6 +45618,7 @@ var useExcalidrawElements = () => (0, import_react96.useContext)(ExcalidrawEleme
 var useExcalidrawAppState = () => (0, import_react96.useContext)(ExcalidrawAppStateContext);
 var useExcalidrawSetAppState = () => (0, import_react96.useContext)(ExcalidrawSetAppStateContext);
 var useExcalidrawActionManager = () => (0, import_react96.useContext)(ExcalidrawActionManagerContext);
+var supportsResizeObserver = typeof window !== "undefined" && "ResizeObserver" in window;
 var didTapTwice = false;
 var tappedTwiceTimer = 0;
 var isHoldingSpace = false;
@@ -47394,7 +46857,7 @@ var App = class _App extends import_react96.default.Component {
           opacity: 100,
           locked: false
         });
-        this.scene.insertElement(frame);
+        this.scene.addNewElement(frame);
         for (const child of selectedElements) {
           mutateElement(child, { frameId: frame.id });
         }
@@ -48239,18 +47702,19 @@ var App = class _App extends import_react96.default.Component {
         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: x3, y: y3 });
     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(
@@ -48438,7 +47902,18 @@ var App = class _App extends import_react96.default.Component {
     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])),
@@ -49301,7 +48776,7 @@ var App = class _App extends import_react96.default.Component {
         const containerIndex = this.scene.getElementIndex(container.id);
         this.scene.insertElementAtIndex(element, containerIndex + 1);
       } else {
-        this.scene.insertElement(element);
+        this.scene.addNewElement(element);
       }
     }
     this.setState({
@@ -50693,7 +50168,7 @@ var App = class _App extends import_react96.default.Component {
       this.scene.getNonDeletedElements(),
       this.scene.getNonDeletedElementsMap()
     );
-    this.scene.insertElement(element);
+    this.scene.addNewElement(element);
     this.setState({
       draggingElement: element,
       editingElement: element,
@@ -50728,7 +50203,10 @@ var App = class _App extends import_react96.default.Component {
       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
@@ -50769,7 +50247,10 @@ var App = class _App extends import_react96.default.Component {
       height: embedLink.intrinsicSize.h,
       link
     });
-    this.scene.insertElement(element);
+    this.scene.replaceAllElements([
+      ...this.scene.getElementsIncludingDeleted(),
+      element
+    ]);
     return element;
   };
   createImageElement = ({
@@ -50885,7 +50366,7 @@ var App = class _App extends import_react96.default.Component {
         this.scene.getNonDeletedElements(),
         this.scene.getNonDeletedElementsMap()
       );
-      this.scene.insertElement(element);
+      this.scene.addNewElement(element);
       this.setState({
         draggingElement: element,
         editingElement: element,
@@ -50941,7 +50422,7 @@ var App = class _App extends import_react96.default.Component {
         draggingElement: element
       });
     } else {
-      this.scene.insertElement(element);
+      this.scene.addNewElement(element);
       this.setState({
         multiElement: null,
         draggingElement: element,
@@ -50963,7 +50444,10 @@ var App = class _App extends import_react96.default.Component {
       ...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,
@@ -51251,7 +50735,6 @@ var App = class _App extends import_react96.default.Component {
               }
             }
             const nextSceneElements = [...nextElements, ...elementsToAppend];
-            syncMovedIndices(nextSceneElements, arrayToMap(elementsToAppend));
             bindTextToShapeAfterDuplication(
               nextElements,
               elementsToAppend,
@@ -52145,7 +51628,7 @@ var App = class _App extends import_react96.default.Component {
       this.setState({ errorMessage: t2("errors.imageToolNotSupported") });
       return;
     }
-    this.scene.insertElement(imageElement);
+    this.scene.addNewElement(imageElement);
     try {
       return await this.initializeImage({
         imageFile,
@@ -53019,9 +52502,7 @@ var createTestHook = () => {
           return this.app?.scene.getElementsIncludingDeleted();
         },
         set(elements) {
-          return this.app?.scene.replaceAllElements(
-            syncInvalidIndices(elements)
-          );
+          return this.app?.scene.replaceAllElements(elements);
         }
       }
     });
@@ -53556,7 +53037,7 @@ var ExcalidrawBase = (props) => {
   }
   (0, import_react97.useEffect)(() => {
     const importPolyfill = async () => {
-      await import("./roundRect-ZNZYUVWJ.js");
+      await import("./roundRect-5HI6M3OA.js");
     };
     importPolyfill();
     const handleTouchMove = (event) => {
@@ -54314,10 +53795,7 @@ var getNonDeletedElements3 = (allElements) => {
   for (const element of allElements) {
     if (!element.isDeleted) {
       elements.push(element);
-      elementsMap.set(
-        element.id,
-        element
-      );
+      elementsMap.set(element.id, element);
     }
   }
   return { elementsMap, elements };
@@ -54364,7 +53842,6 @@ var Scene = class _Scene {
   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 = [];
@@ -54456,15 +53933,9 @@ var Scene = class _Scene {
     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((x3) => x3.index));
-    }
-    this.elements = syncInvalidIndices(_nextElements);
     this.elementsMap.clear();
     this.elements.forEach((element) => {
       if (isFrameLikeElement(element)) {
@@ -54499,8 +53970,8 @@ var Scene = class _Scene {
     };
   }
   destroy() {
-    this.elements = [];
     this.nonDeletedElements = [];
+    this.elements = [];
     this.nonDeletedFramesLikes = [];
     this.frames = [];
     this.elementsMap.clear();
@@ -54525,7 +53996,6 @@ var Scene = class _Scene {
       element,
       ...this.elements.slice(index2)
     ];
-    syncMovedIndices(nextElements, arrayToMap([element]));
     this.replaceAllElements(nextElements);
   }
   insertElementsAtIndex(elements, index2) {
@@ -54539,16 +54009,14 @@ var Scene = class _Scene {
       ...elements,
       ...this.elements.slice(index2)
     ];
-    syncMovedIndices(nextElements, arrayToMap(elements));
     this.replaceAllElements(nextElements);
   }
-  insertElement = (element) => {
-    const index2 = element.frameId ? this.getElementIndex(element.frameId) : this.elements.length;
-    this.insertElementAtIndex(element, index2);
-  };
-  insertElements = (elements) => {
-    const index2 = elements[0].frameId ? this.getElementIndex(elements[0].frameId) : this.elements.length;
-    this.insertElementsAtIndex(elements, index2);
+  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);
@@ -54997,7 +54465,7 @@ var parseFileContents = async (blob) => {
   let contents;
   if (blob.type === MIME_TYPES.png) {
     try {
-      return await (await import("./image-J27XZPQC.js")).decodePngMetadata(blob);
+      return await (await import("./image-DG6G3CCZ.js")).decodePngMetadata(blob);
     } catch (error) {
       if (error.message === "INVALID") {
         throw new ImageSceneDataError(
@@ -55024,7 +54492,7 @@ var parseFileContents = async (blob) => {
     }
     if (blob.type === MIME_TYPES.svg) {
       try {
-        return await (await import("./image-J27XZPQC.js")).decodeSvgMetadata({
+        return await (await import("./image-DG6G3CCZ.js")).decodeSvgMetadata({
           svg: contents
         });
       } catch (error) {
@@ -55187,9 +54655,9 @@ var resizeImageFile = async (file2, opts) => {
     return file2;
   }
   const [pica, imageBlobReduce] = await Promise.all([
-    import("./pica-GXUQBC7B.js").then((res) => res.default),
+    import("./pica-RRHXYZO2.js").then((res) => res.default),
     // a wrapper for pica for better API
-    import("./image-blob-reduce.esm-BDWVJKFQ.js").then((res) => res.default)
+    import("./image-blob-reduce.esm-OJYOZNL4.js").then((res) => res.default)
   ]);
   const reduce = imageBlobReduce({
     pica: pica({ features: ["js", "wasm"] })
@@ -55589,4 +55057,4 @@ use-sync-external-store/cjs/use-sync-external-store-shim/with-selector.developme
    * LICENSE file in the root directory of this source tree.
    *)
 */
-//# sourceMappingURL=chunk-FG5PX37Z.js.map
+//# sourceMappingURL=chunk-7ZK24NYG.js.map