build(deps): bump webpack-dev-middleware in /dev-docs

Bumps [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware) from 5.3.3 to 5.3.4. - [Release notes](https://github.com/webpack/webpack-dev-middleware/releases) - [Changelog](https://github.com/webpack/webpack-dev-middleware/blob/v5.3.4/CHANGELOG.md) - [Commits](https://github.com/webpack/webpack-dev-middleware/compare/v5.3.3...v5.3.4) --- updated-dependencies: - dependency-name: webpack-dev-middleware dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>
feat: support to not render remote cursor & username (#7130 )
2024-03-23 07:56:35 +00:00 · 2024-03-18 10:41:06 +01:00 · 2024-03-18 10:20:07 +01:00 · 2024-03-11 09:57:01 +01:00 · 2024-03-11 09:40:51 +01:00 · 2024-03-08 22:29:19 +01:00
150 changed files with 6164 additions and 3310 deletions
@@ -25,4 +25,5 @@ packages/excalidraw/types
 coverage
 dev-dist
 html
-examples/**/bundle.*
+examples/**/bundle.*
+meta*.json
@@ -58,7 +58,7 @@ If you are using `pages router` then importing the wrapper dynamically would wor

  ```jsx showLineNumbers
  "use client";
-  import { Excalidraw. convertToExcalidrawElements } from "@excalidraw/excalidraw";
+  import { Excalidraw, convertToExcalidrawElements } from "@excalidraw/excalidraw";

  import "@excalidraw/excalidraw/index.css";

@@ -70,7 +70,7 @@ If you are using `pages router` then importing the wrapper dynamically would wor
      height: 141.9765625,
    },]));
    return (
-      <div style={{height:"500px", width:"500px"}}  
+      <div style={{height:"500px", width:"500px"}}>  
        <Excalidraw />
      </div> 
    );
@@ -7614,9 +7614,9 @@ webpack-bundle-analyzer@^4.5.0:
    ws "^7.3.1"

 webpack-dev-middleware@^5.3.1:
-  version "5.3.3"
-  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-5.3.3.tgz#efae67c2793908e7311f1d9b06f2a08dcc97e51f"
-  integrity sha512-hj5CYrY0bZLB+eTO+x/j67Pkrquiy7kWepMHmUMoPsmcUaeEnQJqFzHJOyxgWlq746/wUuA64p9ta34Kyb01pA==
+  version "5.3.4"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz#eb7b39281cbce10e104eb2b8bf2b63fce49a3517"
+  integrity sha512-BVdTqhhs+0IfoeAf7EoH5WE+exCmqGerHfDM0IL096Px60Tq2Mn9MAbnaGUe6HiMa41KMCYF19gyzZmBcq/o4Q==
  dependencies:
    colorette "^2.0.10"
    memfs "^3.4.3"
@@ -1,6 +1,6 @@
 import polyfill from "../packages/excalidraw/polyfill";
 import LanguageDetector from "i18next-browser-languagedetector";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { trackEvent } from "../packages/excalidraw/analytics";
 import { getDefaultAppState } from "../packages/excalidraw/appState";
 import { ErrorDialog } from "../packages/excalidraw/components/ErrorDialog";
@@ -30,7 +30,6 @@ import {
 } from "../packages/excalidraw/index";
 import {
  AppState,
-  LibraryItems,
  ExcalidrawImperativeAPI,
  BinaryFiles,
  ExcalidrawInitialDataState,
@@ -54,7 +53,6 @@ import {
 import Collab, {
  CollabAPI,
  collabAPIAtom,
-  collabDialogShownAtom,
  isCollaboratingAtom,
  isOfflineAtom,
 } from "./collab/Collab";
@@ -65,7 +63,6 @@ import {
  loadScene,
 } from "./data";
 import {
-  getLibraryItemsFromStorage,
  importFromLocalStorage,
  importUsernameFromLocalStorage,
 } from "./data/localStorage";
@@ -83,7 +80,11 @@ import { updateStaleImageStatuses } from "./data/FileManager";
 import { newElementWith } from "../packages/excalidraw/element/mutateElement";
 import { isInitializedImageElement } from "../packages/excalidraw/element/typeChecks";
 import { loadFilesFromFirebase } from "./data/firebase";
-import { LocalData } from "./data/LocalData";
+import {
+  LibraryIndexedDBAdapter,
+  LibraryLocalStorageMigrationAdapter,
+  LocalData,
+} from "./data/LocalData";
 import { isBrowserStorageStateNewer } from "./data/tabSync";
 import clsx from "clsx";
 import { reconcileElements } from "./collab/reconciliation";
@@ -104,6 +105,8 @@ import { ShareableLinkDialog } from "../packages/excalidraw/components/Shareable
 import { openConfirmModal } from "../packages/excalidraw/components/OverwriteConfirm/OverwriteConfirmState";
 import { OverwriteConfirmDialog } from "../packages/excalidraw/components/OverwriteConfirm/OverwriteConfirm";
 import Trans from "../packages/excalidraw/components/Trans";
+import { ShareDialog, shareDialogStateAtom } from "./share/ShareDialog";
+import CollabError, { collabErrorIndicatorAtom } from "./collab/CollabError";

 polyfill();

@@ -305,15 +308,18 @@ const ExcalidrawWrapper = () => {
  const [excalidrawAPI, excalidrawRefCallback] =
    useCallbackRefState<ExcalidrawImperativeAPI>();

+  const [, setShareDialogState] = useAtom(shareDialogStateAtom);
  const [collabAPI] = useAtom(collabAPIAtom);
-  const [, setCollabDialogShown] = useAtom(collabDialogShownAtom);
  const [isCollaborating] = useAtomWithInitialValue(isCollaboratingAtom, () => {
    return isCollaborationLink(window.location.href);
  });
+  const collabError = useAtomValue(collabErrorIndicatorAtom);

  useHandleLibrary({
    excalidrawAPI,
-    getInitialLibraryItems: getLibraryItemsFromStorage,
+    adapter: LibraryIndexedDBAdapter,
+    // TODO maybe remove this in several months (shipped: 24-03-11)
+    migrationAdapter: LibraryLocalStorageMigrationAdapter,
  });

  useEffect(() => {
@@ -443,8 +449,12 @@ const ExcalidrawWrapper = () => {
          excalidrawAPI.updateScene({
            ...localDataState,
          });
-          excalidrawAPI.updateLibrary({
-            libraryItems: getLibraryItemsFromStorage(),
+          LibraryIndexedDBAdapter.load().then((data) => {
+            if (data) {
+              excalidrawAPI.updateLibrary({
+                libraryItems: data.libraryItems,
+              });
+            }
          });
          collabAPI?.setUsername(username || "");
        }
@@ -607,37 +617,38 @@ const ExcalidrawWrapper = () => {
    exportedElements: readonly NonDeletedExcalidrawElement[],
    appState: Partial<AppState>,
    files: BinaryFiles,
-    canvas: HTMLCanvasElement,
  ) => {
    if (exportedElements.length === 0) {
      throw new Error(t("alerts.cannotExportEmptyCanvas"));
    }
-    if (canvas) {
-      try {
-        const { url, errorMessage } = await exportToBackend(
-          exportedElements,
-          {
-            ...appState,
-            viewBackgroundColor: appState.exportBackground
-              ? appState.viewBackgroundColor
-              : getDefaultAppState().viewBackgroundColor,
-          },
-          files,
-        );
+    try {
+      const { url, errorMessage } = await exportToBackend(
+        exportedElements,
+        {
+          ...appState,
+          viewBackgroundColor: appState.exportBackground
+            ? appState.viewBackgroundColor
+            : getDefaultAppState().viewBackgroundColor,
+        },
+        files,
+      );

-        if (errorMessage) {
-          throw new Error(errorMessage);
-        }
+      if (errorMessage) {
+        throw new Error(errorMessage);
+      }

-        if (url) {
-          setLatestShareableLink(url);
-        }
-      } catch (error: any) {
-        if (error.name !== "AbortError") {
-          const { width, height } = canvas;
-          console.error(error, { width, height });
-          throw new Error(error.message);
-        }
+      if (url) {
+        setLatestShareableLink(url);
+      }
+    } catch (error: any) {
+      if (error.name !== "AbortError") {
+        const { width, height } = appState;
+        console.error(error, {
+          width,
+          height,
+          devicePixelRatio: window.devicePixelRatio,
+        });
+        throw new Error(error.message);
      }
    }
  };
@@ -655,17 +666,13 @@ const ExcalidrawWrapper = () => {
    );
  };

-  const onLibraryChange = async (items: LibraryItems) => {
-    if (!items.length) {
-      localStorage.removeItem(STORAGE_KEYS.LOCAL_STORAGE_LIBRARY);
-      return;
-    }
-    const serializedItems = JSON.stringify(items);
-    localStorage.setItem(STORAGE_KEYS.LOCAL_STORAGE_LIBRARY, serializedItems);
-  };
-
  const isOffline = useAtomValue(isOfflineAtom);

+  const onCollabDialogOpen = useCallback(
+    () => setShareDialogState({ isOpen: true, type: "collaborationOnly" }),
+    [setShareDialogState],
+  );
+
  // browsers generally prevent infinite self-embedding, there are
  // cases where it still happens, and while we disallow self-embedding
  // by not whitelisting our own origin, this serves as an additional guard
@@ -703,27 +710,30 @@ const ExcalidrawWrapper = () => {
            toggleTheme: true,
            export: {
              onExportToBackend,
-              renderCustomUI: (elements, appState, files) => {
-                return (
-                  <ExportToExcalidrawPlus
-                    elements={elements}
-                    appState={appState}
-                    files={files}
-                    onError={(error) => {
-                      excalidrawAPI?.updateScene({
-                        appState: {
-                          errorMessage: error.message,
-                        },
-                      });
-                    }}
-                    onSuccess={() => {
-                      excalidrawAPI?.updateScene({
-                        appState: { openDialog: null },
-                      });
-                    }}
-                  />
-                );
-              },
+              renderCustomUI: excalidrawAPI
+                ? (elements, appState, files) => {
+                    return (
+                      <ExportToExcalidrawPlus
+                        elements={elements}
+                        appState={appState}
+                        files={files}
+                        name={excalidrawAPI.getName()}
+                        onError={(error) => {
+                          excalidrawAPI?.updateScene({
+                            appState: {
+                              errorMessage: error.message,
+                            },
+                          });
+                        }}
+                        onSuccess={() => {
+                          excalidrawAPI.updateScene({
+                            appState: { openDialog: null },
+                          });
+                        }}
+                      />
+                    );
+                  }
+                : undefined,
            },
          },
        }}
@@ -731,7 +741,6 @@ const ExcalidrawWrapper = () => {
        renderCustomStats={renderCustomStats}
        detectScroll={false}
        handleKeyboardGlobally={true}
-        onLibraryChange={onLibraryChange}
        autoFocus={true}
        theme={theme}
        renderTopRightUI={(isMobile) => {
@@ -739,20 +748,25 @@ const ExcalidrawWrapper = () => {
            return null;
          }
          return (
-            <LiveCollaborationTrigger
-              isCollaborating={isCollaborating}
-              onSelect={() => setCollabDialogShown(true)}
-            />
+            <div className="top-right-ui">
+              {collabError.message && <CollabError collabError={collabError} />}
+              <LiveCollaborationTrigger
+                isCollaborating={isCollaborating}
+                onSelect={() =>
+                  setShareDialogState({ isOpen: true, type: "share" })
+                }
+              />
+            </div>
          );
        }}
      >
        <AppMainMenu
-          setCollabDialogShown={setCollabDialogShown}
+          onCollabDialogOpen={onCollabDialogOpen}
          isCollaborating={isCollaborating}
          isCollabEnabled={!isCollabDisabled}
        />
        <AppWelcomeScreen
-          setCollabDialogShown={setCollabDialogShown}
+          onCollabDialogOpen={onCollabDialogOpen}
          isCollabEnabled={!isCollabDisabled}
        />
        <OverwriteConfirmDialog>
@@ -767,6 +781,7 @@ const ExcalidrawWrapper = () => {
                  excalidrawAPI.getSceneElements(),
                  excalidrawAPI.getAppState(),
                  excalidrawAPI.getFiles(),
+                  excalidrawAPI.getName(),
                );
              }}
            >
@@ -848,6 +863,24 @@ const ExcalidrawWrapper = () => {
        {excalidrawAPI && !isCollabDisabled && (
          <Collab excalidrawAPI={excalidrawAPI} />
        )}
+
+        <ShareDialog
+          collabAPI={collabAPI}
+          onExportToBackend={async () => {
+            if (excalidrawAPI) {
+              try {
+                await onExportToBackend(
+                  excalidrawAPI.getSceneElements(),
+                  excalidrawAPI.getAppState(),
+                  excalidrawAPI.getFiles(),
+                );
+              } catch (error: any) {
+                setErrorMessage(error.message);
+              }
+            }
+          }}
+        />
+
        {errorMessage && (
          <ErrorDialog onClose={() => setErrorMessage("")}>
            {errorMessage}
@@ -39,10 +39,14 @@ export const STORAGE_KEYS = {
  LOCAL_STORAGE_ELEMENTS: "excalidraw",
  LOCAL_STORAGE_APP_STATE: "excalidraw-state",
  LOCAL_STORAGE_COLLAB: "excalidraw-collab",
-  LOCAL_STORAGE_LIBRARY: "excalidraw-library",
  LOCAL_STORAGE_THEME: "excalidraw-theme",
  VERSION_DATA_STATE: "version-dataState",
  VERSION_FILES: "version-files",
+
+  IDB_LIBRARY: "excalidraw-library",
+
+  // do not use apart from migrations
+  __LEGACY_LOCAL_STORAGE_LIBRARY: "excalidraw-library",
 } as const;

 export const COOKIES = {
@@ -52,7 +52,6 @@ import {
  saveUsernameToLocalStorage,
 } from "../data/localStorage";
 import Portal from "./Portal";
-import RoomDialog from "./RoomDialog";
 import { t } from "../../packages/excalidraw/i18n";
 import { UserIdleState } from "../../packages/excalidraw/types";
 import {
@@ -77,23 +76,27 @@ import {
 import { decryptData } from "../../packages/excalidraw/data/encryption";
 import { resetBrowserStateVersions } from "../data/tabSync";
 import { LocalData } from "../data/LocalData";
-import { atom, useAtom } from "jotai";
+import { atom } from "jotai";
 import { appJotaiStore } from "../app-jotai";
 import { Mutable, ValueOf } from "../../packages/excalidraw/utility-types";
 import { getVisibleSceneBounds } from "../../packages/excalidraw/element/bounds";
 import { withBatchedUpdates } from "../../packages/excalidraw/reactUtils";
+import { collabErrorIndicatorAtom } from "./CollabError";

 export const collabAPIAtom = atom<CollabAPI | null>(null);
-export const collabDialogShownAtom = atom(false);
 export const isCollaboratingAtom = atom(false);
 export const isOfflineAtom = atom(false);

 interface CollabState {
-  errorMessage: string;
+  errorMessage: string | null;
+  /** errors related to saving */
+  dialogNotifiedErrors: Record<string, boolean>;
  username: string;
-  activeRoomLink: string;
+  activeRoomLink: string | null;
 }

+export const activeRoomLinkAtom = atom<string | null>(null);
+
 type CollabInstance = InstanceType<typeof Collab>;

 export interface CollabAPI {
@@ -104,19 +107,20 @@ export interface CollabAPI {
  stopCollaboration: CollabInstance["stopCollaboration"];
  syncElements: CollabInstance["syncElements"];
  fetchImageFilesFromFirebase: CollabInstance["fetchImageFilesFromFirebase"];
-  setUsername: (username: string) => void;
+  setUsername: CollabInstance["setUsername"];
+  getUsername: CollabInstance["getUsername"];
+  getActiveRoomLink: CollabInstance["getActiveRoomLink"];
+  setCollabError: CollabInstance["setErrorDialog"];
 }

-interface PublicProps {
+interface CollabProps {
  excalidrawAPI: ExcalidrawImperativeAPI;
 }

-type Props = PublicProps & { modalIsShown: boolean };
-
-class Collab extends PureComponent<Props, CollabState> {
+class Collab extends PureComponent<CollabProps, CollabState> {
  portal: Portal;
  fileManager: FileManager;
-  excalidrawAPI: Props["excalidrawAPI"];
+  excalidrawAPI: CollabProps["excalidrawAPI"];
  activeIntervalId: number | null;
  idleTimeoutId: number | null;

@@ -124,12 +128,13 @@ class Collab extends PureComponent<Props, CollabState> {
  private lastBroadcastedOrReceivedSceneVersion: number = -1;
  private collaborators = new Map<SocketId, Collaborator>();

-  constructor(props: Props) {
+  constructor(props: CollabProps) {
    super(props);
    this.state = {
-      errorMessage: "",
+      errorMessage: null,
+      dialogNotifiedErrors: {},
      username: importUsernameFromLocalStorage() || "",
-      activeRoomLink: "",
+      activeRoomLink: null,
    };
    this.portal = new Portal(this);
    this.fileManager = new FileManager({
@@ -194,6 +199,9 @@ class Collab extends PureComponent<Props, CollabState> {
      fetchImageFilesFromFirebase: this.fetchImageFilesFromFirebase,
      stopCollaboration: this.stopCollaboration,
      setUsername: this.setUsername,
+      getUsername: this.getUsername,
+      getActiveRoomLink: this.getActiveRoomLink,
+      setCollabError: this.setErrorDialog,
    };

    appJotaiStore.set(collabAPIAtom, collabAPI);
@@ -272,18 +280,35 @@ class Collab extends PureComponent<Props, CollabState> {
        this.excalidrawAPI.getAppState(),
      );

+      this.resetErrorIndicator();
+
      if (this.isCollaborating() && savedData && savedData.reconciledElements) {
        this.handleRemoteSceneUpdate(
          this.reconcileElements(savedData.reconciledElements),
        );
      }
    } catch (error: any) {
-      this.setState({
-        // firestore doesn't return a specific error code when size exceeded
-        errorMessage: /is longer than.*?bytes/.test(error.message)
-          ? t("errors.collabSaveFailed_sizeExceeded")
-          : t("errors.collabSaveFailed"),
-      });
+      const errorMessage = /is longer than.*?bytes/.test(error.message)
+        ? t("errors.collabSaveFailed_sizeExceeded")
+        : t("errors.collabSaveFailed");
+
+      if (
+        !this.state.dialogNotifiedErrors[errorMessage] ||
+        !this.isCollaborating()
+      ) {
+        this.setErrorDialog(errorMessage);
+        this.setState({
+          dialogNotifiedErrors: {
+            ...this.state.dialogNotifiedErrors,
+            [errorMessage]: true,
+          },
+        });
+      }
+
+      if (this.isCollaborating()) {
+        this.setErrorIndicator(errorMessage);
+      }
+
      console.error(error);
    }
  };
@@ -292,6 +317,7 @@ class Collab extends PureComponent<Props, CollabState> {
    this.queueBroadcastAllElements.cancel();
    this.queueSaveToFirebase.cancel();
    this.loadImageFiles.cancel();
+    this.resetErrorIndicator(true);

    this.saveCollabRoomToFirebase(
      getSyncableElements(
@@ -341,9 +367,7 @@ class Collab extends PureComponent<Props, CollabState> {
    this.fileManager.reset();
    if (!opts?.isUnload) {
      this.setIsCollaborating(false);
-      this.setState({
-        activeRoomLink: "",
-      });
+      this.setActiveRoomLink(null);
      this.collaborators = new Map();
      this.excalidrawAPI.updateScene({
        collaborators: this.collaborators,
@@ -409,7 +433,7 @@ class Collab extends PureComponent<Props, CollabState> {
    if (!this.state.username) {
      import("@excalidraw/random-username").then(({ getRandomUsername }) => {
        const username = getRandomUsername();
-        this.onUsernameChange(username);
+        this.setUsername(username);
      });
    }

@@ -462,7 +486,7 @@ class Collab extends PureComponent<Props, CollabState> {
      this.portal.socket.once("connect_error", fallbackInitializationHandler);
    } catch (error: any) {
      console.error(error);
-      this.setState({ errorMessage: error.message });
+      this.setErrorDialog(error.message);
      return null;
    }

@@ -624,9 +648,7 @@ class Collab extends PureComponent<Props, CollabState> {

    this.initializeIdleDetector();

-    this.setState({
-      activeRoomLink: window.location.href,
-    });
+    this.setActiveRoomLink(window.location.href);

    return scenePromise;
  };
@@ -909,41 +931,49 @@ class Collab extends PureComponent<Props, CollabState> {
    { leading: false },
  );

-  handleClose = () => {
-    appJotaiStore.set(collabDialogShownAtom, false);
-  };
-
  setUsername = (username: string) => {
    this.setState({ username });
-  };
-
-  onUsernameChange = (username: string) => {
-    this.setUsername(username);
    saveUsernameToLocalStorage(username);
  };

-  render() {
-    const { username, errorMessage, activeRoomLink } = this.state;
+  getUsername = () => this.state.username;

-    const { modalIsShown } = this.props;
+  setActiveRoomLink = (activeRoomLink: string | null) => {
+    this.setState({ activeRoomLink });
+    appJotaiStore.set(activeRoomLinkAtom, activeRoomLink);
+  };
+
+  getActiveRoomLink = () => this.state.activeRoomLink;
+
+  setErrorIndicator = (errorMessage: string | null) => {
+    appJotaiStore.set(collabErrorIndicatorAtom, {
+      message: errorMessage,
+      nonce: Date.now(),
+    });
+  };
+
+  resetErrorIndicator = (resetDialogNotifiedErrors = false) => {
+    appJotaiStore.set(collabErrorIndicatorAtom, { message: null, nonce: 0 });
+    if (resetDialogNotifiedErrors) {
+      this.setState({
+        dialogNotifiedErrors: {},
+      });
+    }
+  };
+
+  setErrorDialog = (errorMessage: string | null) => {
+    this.setState({
+      errorMessage,
+    });
+  };
+
+  render() {
+    const { errorMessage } = this.state;

    return (
      <>
-        {modalIsShown && (
-          <RoomDialog
-            handleClose={this.handleClose}
-            activeRoomLink={activeRoomLink}
-            username={username}
-            onUsernameChange={this.onUsernameChange}
-            onRoomCreate={() => this.startCollaboration(null)}
-            onRoomDestroy={this.stopCollaboration}
-            setErrorMessage={(errorMessage) => {
-              this.setState({ errorMessage });
-            }}
-          />
-        )}
-        {errorMessage && (
-          <ErrorDialog onClose={() => this.setState({ errorMessage: "" })}>
+        {errorMessage != null && (
+          <ErrorDialog onClose={() => this.setErrorDialog(null)}>
            {errorMessage}
          </ErrorDialog>
        )}
@@ -962,11 +992,6 @@ if (import.meta.env.MODE === ENV.TEST || import.meta.env.DEV) {
  window.collab = window.collab || ({} as Window["collab"]);
 }

-const _Collab: React.FC<PublicProps> = (props) => {
-  const [collabDialogShown] = useAtom(collabDialogShownAtom);
-  return <Collab {...props} modalIsShown={collabDialogShown} />;
-};
-
-export default _Collab;
+export default Collab;

 export type TCollabClass = Collab;
@@ -0,0 +1,35 @@
+@import "../../packages/excalidraw/css/variables.module.scss";
+
+.excalidraw {
+  .collab-errors-button {
+    width: 26px;
+    height: 26px;
+    margin-inline-end: 1rem;
+
+    color: var(--color-danger);
+
+    flex-shrink: 0;
+  }
+
+  .collab-errors-button-shake {
+    animation: strong-shake 0.15s 6;
+  }
+
+  @keyframes strong-shake {
+    0% {
+      transform: rotate(0deg);
+    }
+    25% {
+      transform: rotate(10deg);
+    }
+    50% {
+      transform: rotate(0eg);
+    }
+    75% {
+      transform: rotate(-10deg);
+    }
+    100% {
+      transform: rotate(0deg);
+    }
+  }
+}
@@ -0,0 +1,54 @@
+import { Tooltip } from "../../packages/excalidraw/components/Tooltip";
+import { warning } from "../../packages/excalidraw/components/icons";
+import clsx from "clsx";
+import { useEffect, useRef, useState } from "react";
+
+import "./CollabError.scss";
+import { atom } from "jotai";
+
+type ErrorIndicator = {
+  message: string | null;
+  /** used to rerun the useEffect responsible for animation */
+  nonce: number;
+};
+
+export const collabErrorIndicatorAtom = atom<ErrorIndicator>({
+  message: null,
+  nonce: 0,
+});
+
+const CollabError = ({ collabError }: { collabError: ErrorIndicator }) => {
+  const [isAnimating, setIsAnimating] = useState(false);
+  const clearAnimationRef = useRef<string | number | NodeJS.Timeout>();
+
+  useEffect(() => {
+    setIsAnimating(true);
+    clearAnimationRef.current = setTimeout(() => {
+      setIsAnimating(false);
+    }, 1000);
+
+    return () => {
+      clearTimeout(clearAnimationRef.current);
+    };
+  }, [collabError.message, collabError.nonce]);
+
+  if (!collabError.message) {
+    return null;
+  }
+
+  return (
+    <Tooltip label={collabError.message} long={true}>
+      <div
+        className={clsx("collab-errors-button", {
+          "collab-errors-button-shake": isAnimating,
+        })}
+      >
+        {warning}
+      </div>
+    </Tooltip>
+  );
+};
+
+CollabError.displayName = "CollabError";
+
+export default CollabError;
@@ -65,19 +65,18 @@ export const RoomModal = ({
  const copyRoomLink = async () => {
    try {
      await copyTextToSystemClipboard(activeRoomLink);
-
-      setJustCopied(true);
-
-      if (timerRef.current) {
-        window.clearTimeout(timerRef.current);
-      }
-
-      timerRef.current = window.setTimeout(() => {
-        setJustCopied(false);
-      }, 3000);
-    } catch (error: any) {
-      setErrorMessage(error.message);
+    } catch (e) {
+      setErrorMessage(t("errors.copyToSystemClipboardFailed"));
    }
+    setJustCopied(true);
+
+    if (timerRef.current) {
+      window.clearTimeout(timerRef.current);
+    }
+
+    timerRef.current = window.setTimeout(() => {
+      setJustCopied(false);
+    }, 3000);

    ref.current?.select();
  };
@@ -120,7 +119,7 @@ export const RoomModal = ({
              size="large"
              variant="icon"
              label="Share"
-              startIcon={getShareIcon()}
+              icon={getShareIcon()}
              className="RoomDialog__active__share"
              onClick={shareRoomLink}
            />
@@ -130,7 +129,7 @@ export const RoomModal = ({
              <FilledButton
                size="large"
                label="Copy link"
-                startIcon={copyIcon}
+                icon={copyIcon}
                onClick={copyRoomLink}
              />
            </Popover.Trigger>
@@ -166,7 +165,7 @@ export const RoomModal = ({
            variant="outlined"
            color="danger"
            label={t("roomDialog.button_stopSession")}
-            startIcon={playerStopFilledIcon}
+            icon={playerStopFilledIcon}
            onClick={() => {
              trackEvent("share", "room closed");
              onRoomDestroy();
@@ -195,7 +194,7 @@ export const RoomModal = ({
        <FilledButton
          size="large"
          label={t("roomDialog.button_startSession")}
-          startIcon={playerPlayIcon}
+          icon={playerPlayIcon}
          onClick={() => {
            trackEvent("share", "room creation", `ui (${getFrame()})`);
            onRoomCreate();
@@ -4,7 +4,7 @@ import { MainMenu } from "../../packages/excalidraw/index";
 import { LanguageList } from "./LanguageList";

 export const AppMainMenu: React.FC<{
-  setCollabDialogShown: (toggle: boolean) => any;
+  onCollabDialogOpen: () => any;
  isCollaborating: boolean;
  isCollabEnabled: boolean;
 }> = React.memo((props) => {
@@ -17,7 +17,7 @@ export const AppMainMenu: React.FC<{
      {props.isCollabEnabled && (
        <MainMenu.DefaultItems.LiveCollaborationTrigger
          isCollaborating={props.isCollaborating}
-          onSelect={() => props.setCollabDialogShown(true)}
+          onSelect={() => props.onCollabDialogOpen()}
        />
      )}

@@ -6,7 +6,7 @@ import { isExcalidrawPlusSignedUser } from "../app_constants";
 import { POINTER_EVENTS } from "../../packages/excalidraw/constants";

 export const AppWelcomeScreen: React.FC<{
-  setCollabDialogShown: (toggle: boolean) => any;
+  onCollabDialogOpen: () => any;
  isCollabEnabled: boolean;
 }> = React.memo((props) => {
  const { t } = useI18n();
@@ -52,7 +52,7 @@ export const AppWelcomeScreen: React.FC<{
          <WelcomeScreen.Center.MenuItemHelp />
          {props.isCollabEnabled && (
            <WelcomeScreen.Center.MenuItemLiveCollaborationTrigger
-              onSelect={() => props.setCollabDialogShown(true)}
+              onSelect={() => props.onCollabDialogOpen()}
            />
          )}
          {!isExcalidrawPlusSignedUser && (
@@ -30,6 +30,7 @@ export const exportToExcalidrawPlus = async (
  elements: readonly NonDeletedExcalidrawElement[],
  appState: Partial<AppState>,
  files: BinaryFiles,
+  name: string,
 ) => {
  const firebase = await loadFirebaseStorage();

@@ -53,7 +54,7 @@ export const exportToExcalidrawPlus = async (
    .ref(`/migrations/scenes/${id}`)
    .put(blob, {
      customMetadata: {
-        data: JSON.stringify({ version: 2, name: appState.name }),
+        data: JSON.stringify({ version: 2, name }),
        created: Date.now().toString(),
      },
    });
@@ -89,9 +90,10 @@ export const ExportToExcalidrawPlus: React.FC<{
  elements: readonly NonDeletedExcalidrawElement[];
  appState: Partial<AppState>;
  files: BinaryFiles;
+  name: string;
  onError: (error: Error) => void;
  onSuccess: () => void;
-}> = ({ elements, appState, files, onError, onSuccess }) => {
+}> = ({ elements, appState, files, name, onError, onSuccess }) => {
  const { t } = useI18n();
  return (
    <Card color="primary">
@@ -117,7 +119,7 @@ export const ExportToExcalidrawPlus: React.FC<{
        onClick={async () => {
          try {
            trackEvent("export", "eplus", `ui (${getFrame()})`);
-            await exportToExcalidrawPlus(elements, appState, files);
+            await exportToExcalidrawPlus(elements, appState, files, name);
            onSuccess();
          } catch (error: any) {
            console.error(error);
@@ -10,8 +10,18 @@
 *   (localStorage, indexedDB).
 */

-import { createStore, entries, del, getMany, set, setMany } from "idb-keyval";
+import {
+  createStore,
+  entries,
+  del,
+  getMany,
+  set,
+  setMany,
+  get,
+} from "idb-keyval";
 import { clearAppStateForLocalStorage } from "../../packages/excalidraw/appState";
+import { LibraryPersistedData } from "../../packages/excalidraw/data/library";
+import { ImportedDataState } from "../../packages/excalidraw/data/types";
 import { clearElementsForLocalStorage } from "../../packages/excalidraw/element";
 import {
  ExcalidrawElement,
@@ -22,6 +32,7 @@ import {
  BinaryFileData,
  BinaryFiles,
 } from "../../packages/excalidraw/types";
+import { MaybePromise } from "../../packages/excalidraw/utility-types";
 import { debounce } from "../../packages/excalidraw/utils";
 import { SAVE_TO_LOCAL_STORAGE_TIMEOUT, STORAGE_KEYS } from "../app_constants";
 import { FileManager } from "./FileManager";
@@ -183,3 +194,52 @@ export class LocalData {
    },
  });
 }
+export class LibraryIndexedDBAdapter {
+  /** IndexedDB database and store name */
+  private static idb_name = STORAGE_KEYS.IDB_LIBRARY;
+  /** library data store key */
+  private static key = "libraryData";
+
+  private static store = createStore(
+    `${LibraryIndexedDBAdapter.idb_name}-db`,
+    `${LibraryIndexedDBAdapter.idb_name}-store`,
+  );
+
+  static async load() {
+    const IDBData = await get<LibraryPersistedData>(
+      LibraryIndexedDBAdapter.key,
+      LibraryIndexedDBAdapter.store,
+    );
+
+    return IDBData || null;
+  }
+
+  static save(data: LibraryPersistedData): MaybePromise<void> {
+    return set(
+      LibraryIndexedDBAdapter.key,
+      data,
+      LibraryIndexedDBAdapter.store,
+    );
+  }
+}
+
+/** LS Adapter used only for migrating LS library data
+ * to indexedDB */
+export class LibraryLocalStorageMigrationAdapter {
+  static load() {
+    const LSData = localStorage.getItem(
+      STORAGE_KEYS.__LEGACY_LOCAL_STORAGE_LIBRARY,
+    );
+    if (LSData != null) {
+      const libraryItems: ImportedDataState["libraryItems"] =
+        JSON.parse(LSData);
+      if (libraryItems) {
+        return { libraryItems };
+      }
+    }
+    return null;
+  }
+  static clear() {
+    localStorage.removeItem(STORAGE_KEYS.__LEGACY_LOCAL_STORAGE_LIBRARY);
+  }
+}
@@ -6,7 +6,6 @@ import {
 } from "../../packages/excalidraw/appState";
 import { clearElementsForLocalStorage } from "../../packages/excalidraw/element";
 import { STORAGE_KEYS } from "../app_constants";
-import { ImportedDataState } from "../../packages/excalidraw/data/types";

 export const saveUsernameToLocalStorage = (username: string) => {
  try {
@@ -88,28 +87,13 @@ export const getTotalStorageSize = () => {
  try {
    const appState = localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_APP_STATE);
    const collab = localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_COLLAB);
-    const library = localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_LIBRARY);

    const appStateSize = appState?.length || 0;
    const collabSize = collab?.length || 0;
-    const librarySize = library?.length || 0;

-    return appStateSize + collabSize + librarySize + getElementsStorageSize();
+    return appStateSize + collabSize + getElementsStorageSize();
  } catch (error: any) {
    console.error(error);
    return 0;
  }
 };
-
-export const getLibraryItemsFromStorage = () => {
-  try {
-    const libraryItems: ImportedDataState["libraryItems"] = JSON.parse(
-      localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_LIBRARY) as string,
-    );
-
-    return libraryItems || [];
-  } catch (error) {
-    console.error(error);
-    return [];
-  }
-};
@@ -4,6 +4,13 @@
  &.theme--dark {
    --color-primary-contrast-offset: #726dff; // to offset Chubb illusion
  }
+
+  .top-right-ui {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+  }
+
  .footer-center {
    justify-content: flex-end;
    margin-top: auto;
@@ -1,7 +1,7 @@
@import "../../packages/excalidraw/css/variables.module.scss";

 .excalidraw {
-  .RoomDialog {
+  .ShareDialog {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
@@ -10,8 +10,25 @@
      height: calc(100vh - 5rem);
    }

+    &__separator {
+      border-top: 1px solid var(--dialog-border-color);
+      text-align: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-top: 1em;
+
+      span {
+        background: var(--island-bg-color);
+        padding: 0px 0.75rem;
+        transform: translateY(-1ch);
+        display: inline-flex;
+        line-height: 1;
+      }
+    }
+
    &__popover {
-      @keyframes RoomDialog__popover__scaleIn {
+      @keyframes ShareDialog__popover__scaleIn {
        from {
          opacity: 0;
        }
@@ -50,10 +67,10 @@
      }

      transform-origin: var(--radix-popover-content-transform-origin);
-      animation: RoomDialog__popover__scaleIn 150ms ease-out;
+      animation: ShareDialog__popover__scaleIn 150ms ease-out;
    }

-    &__inactive {
+    &__picker {
      font-family: "Assistant";

      &__illustration {
@@ -95,7 +112,7 @@
        }
      }

-      &__start_session {
+      &__button {
        display: flex;

        align-items: center;
@@ -0,0 +1,290 @@
+import { useRef, useState } from "react";
+import * as Popover from "@radix-ui/react-popover";
+import { copyTextToSystemClipboard } from "../../packages/excalidraw/clipboard";
+import { trackEvent } from "../../packages/excalidraw/analytics";
+import { getFrame } from "../../packages/excalidraw/utils";
+import { useI18n } from "../../packages/excalidraw/i18n";
+import { KEYS } from "../../packages/excalidraw/keys";
+import { Dialog } from "../../packages/excalidraw/components/Dialog";
+import {
+  copyIcon,
+  LinkIcon,
+  playerPlayIcon,
+  playerStopFilledIcon,
+  share,
+  shareIOS,
+  shareWindows,
+  tablerCheckIcon,
+} from "../../packages/excalidraw/components/icons";
+import { TextField } from "../../packages/excalidraw/components/TextField";
+import { FilledButton } from "../../packages/excalidraw/components/FilledButton";
+import { activeRoomLinkAtom, CollabAPI } from "../collab/Collab";
+import { atom, useAtom, useAtomValue } from "jotai";
+
+import "./ShareDialog.scss";
+
+type OnExportToBackend = () => void;
+type ShareDialogType = "share" | "collaborationOnly";
+
+export const shareDialogStateAtom = atom<
+  { isOpen: false } | { isOpen: true; type: ShareDialogType }
+>({ isOpen: false });
+
+const getShareIcon = () => {
+  const navigator = window.navigator as any;
+  const isAppleBrowser = /Apple/.test(navigator.vendor);
+  const isWindowsBrowser = navigator.appVersion.indexOf("Win") !== -1;
+
+  if (isAppleBrowser) {
+    return shareIOS;
+  } else if (isWindowsBrowser) {
+    return shareWindows;
+  }
+
+  return share;
+};
+
+export type ShareDialogProps = {
+  collabAPI: CollabAPI | null;
+  handleClose: () => void;
+  onExportToBackend: OnExportToBackend;
+  type: ShareDialogType;
+};
+
+const ActiveRoomDialog = ({
+  collabAPI,
+  activeRoomLink,
+  handleClose,
+}: {
+  collabAPI: CollabAPI;
+  activeRoomLink: string;
+  handleClose: () => void;
+}) => {
+  const { t } = useI18n();
+  const [justCopied, setJustCopied] = useState(false);
+  const timerRef = useRef<number>(0);
+  const ref = useRef<HTMLInputElement>(null);
+  const isShareSupported = "share" in navigator;
+
+  const copyRoomLink = async () => {
+    try {
+      await copyTextToSystemClipboard(activeRoomLink);
+    } catch (e) {
+      collabAPI.setCollabError(t("errors.copyToSystemClipboardFailed"));
+    }
+
+    setJustCopied(true);
+
+    if (timerRef.current) {
+      window.clearTimeout(timerRef.current);
+    }
+
+    timerRef.current = window.setTimeout(() => {
+      setJustCopied(false);
+    }, 3000);
+
+    ref.current?.select();
+  };
+
+  const shareRoomLink = async () => {
+    try {
+      await navigator.share({
+        title: t("roomDialog.shareTitle"),
+        text: t("roomDialog.shareTitle"),
+        url: activeRoomLink,
+      });
+    } catch (error: any) {
+      // Just ignore.
+    }
+  };
+
+  return (
+    <>
+      <h3 className="ShareDialog__active__header">
+        {t("labels.liveCollaboration").replace(/\./g, "")}
+      </h3>
+      <TextField
+        defaultValue={collabAPI.getUsername()}
+        placeholder="Your name"
+        label="Your name"
+        onChange={collabAPI.setUsername}
+        onKeyDown={(event) => event.key === KEYS.ENTER && handleClose()}
+      />
+      <div className="ShareDialog__active__linkRow">
+        <TextField
+          ref={ref}
+          label="Link"
+          readonly
+          fullWidth
+          value={activeRoomLink}
+        />
+        {isShareSupported && (
+          <FilledButton
+            size="large"
+            variant="icon"
+            label="Share"
+            icon={getShareIcon()}
+            className="ShareDialog__active__share"
+            onClick={shareRoomLink}
+          />
+        )}
+        <Popover.Root open={justCopied}>
+          <Popover.Trigger asChild>
+            <FilledButton
+              size="large"
+              label="Copy link"
+              icon={copyIcon}
+              onClick={copyRoomLink}
+            />
+          </Popover.Trigger>
+          <Popover.Content
+            onOpenAutoFocus={(event) => event.preventDefault()}
+            onCloseAutoFocus={(event) => event.preventDefault()}
+            className="ShareDialog__popover"
+            side="top"
+            align="end"
+            sideOffset={5.5}
+          >
+            {tablerCheckIcon} copied
+          </Popover.Content>
+        </Popover.Root>
+      </div>
+      <div className="ShareDialog__active__description">
+        <p>
+          <span
+            role="img"
+            aria-hidden="true"
+            className="ShareDialog__active__description__emoji"
+          >
+            🔒{" "}
+          </span>
+          {t("roomDialog.desc_privacy")}
+        </p>
+        <p>{t("roomDialog.desc_exitSession")}</p>
+      </div>
+
+      <div className="ShareDialog__active__actions">
+        <FilledButton
+          size="large"
+          variant="outlined"
+          color="danger"
+          label={t("roomDialog.button_stopSession")}
+          icon={playerStopFilledIcon}
+          onClick={() => {
+            trackEvent("share", "room closed");
+            collabAPI.stopCollaboration();
+            if (!collabAPI.isCollaborating()) {
+              handleClose();
+            }
+          }}
+        />
+      </div>
+    </>
+  );
+};
+
+const ShareDialogPicker = (props: ShareDialogProps) => {
+  const { t } = useI18n();
+
+  const { collabAPI } = props;
+
+  const startCollabJSX = collabAPI ? (
+    <>
+      <div className="ShareDialog__picker__header">
+        {t("labels.liveCollaboration").replace(/\./g, "")}
+      </div>
+
+      <div className="ShareDialog__picker__description">
+        <div style={{ marginBottom: "1em" }}>{t("roomDialog.desc_intro")}</div>
+        {t("roomDialog.desc_privacy")}
+      </div>
+
+      <div className="ShareDialog__picker__button">
+        <FilledButton
+          size="large"
+          label={t("roomDialog.button_startSession")}
+          icon={playerPlayIcon}
+          onClick={() => {
+            trackEvent("share", "room creation", `ui (${getFrame()})`);
+            collabAPI.startCollaboration(null);
+          }}
+        />
+      </div>
+
+      {props.type === "share" && (
+        <div className="ShareDialog__separator">
+          <span>{t("shareDialog.or")}</span>
+        </div>
+      )}
+    </>
+  ) : null;
+
+  return (
+    <>
+      {startCollabJSX}
+
+      {props.type === "share" && (
+        <>
+          <div className="ShareDialog__picker__header">
+            {t("exportDialog.link_title")}
+          </div>
+          <div className="ShareDialog__picker__description">
+            {t("exportDialog.link_details")}
+          </div>
+
+          <div className="ShareDialog__picker__button">
+            <FilledButton
+              size="large"
+              label={t("exportDialog.link_button")}
+              icon={LinkIcon}
+              onClick={async () => {
+                await props.onExportToBackend();
+                props.handleClose();
+              }}
+            />
+          </div>
+        </>
+      )}
+    </>
+  );
+};
+
+const ShareDialogInner = (props: ShareDialogProps) => {
+  const activeRoomLink = useAtomValue(activeRoomLinkAtom);
+
+  return (
+    <Dialog size="small" onCloseRequest={props.handleClose} title={false}>
+      <div className="ShareDialog">
+        {props.collabAPI && activeRoomLink ? (
+          <ActiveRoomDialog
+            collabAPI={props.collabAPI}
+            activeRoomLink={activeRoomLink}
+            handleClose={props.handleClose}
+          />
+        ) : (
+          <ShareDialogPicker {...props} />
+        )}
+      </div>
+    </Dialog>
+  );
+};
+
+export const ShareDialog = (props: {
+  collabAPI: CollabAPI | null;
+  onExportToBackend: OnExportToBackend;
+}) => {
+  const [shareDialogState, setShareDialogState] = useAtom(shareDialogStateAtom);
+
+  if (!shareDialogState.isOpen) {
+    return null;
+  }
+
+  return (
+    <ShareDialogInner
+      handleClose={() => setShareDialogState({ isOpen: false })}
+      collabAPI={props.collabAPI}
+      onExportToBackend={props.onExportToBackend}
+      type={shareDialogState.type}
+    ></ShareDialogInner>
+  );
+};
@@ -15,14 +15,24 @@ Please add the latest change on the top under the correct section.

 ### Features

+- Add `useHandleLibrary`'s `opts.adapter` as the new recommended pattern to handle library initialization and persistence on library updates. [#7655](https://github.com/excalidraw/excalidraw/pull/7655)
+- Add `useHandleLibrary`'s `opts.migrationAdapter` adapter to handle library migration during init, when migrating from one data store to another (e.g. from LocalStorage to IndexedDB). [#7655](https://github.com/excalidraw/excalidraw/pull/7655)
+- Soft-deprecate `useHandleLibrary`'s `opts.getInitialLibraryItems` in favor of `opts.adapter`. [#7655](https://github.com/excalidraw/excalidraw/pull/7655)
+
 - Add `onPointerUp` prop [#7638](https://github.com/excalidraw/excalidraw/pull/7638).

 - Expose `getVisibleSceneBounds` helper to get scene bounds of visible canvas area. [#7450](https://github.com/excalidraw/excalidraw/pull/7450)

+### Fixes
+
+- Keep customData when converting to ExcalidrawElement. [#7656](https://github.com/excalidraw/excalidraw/pull/7656)
+
 ### Breaking Changes

 - `ExcalidrawEmbeddableElement.validated` was removed and moved to private editor state. This should largely not affect your apps unless you were reading from this attribute. We keep validating embeddable urls internally, and the public [`props.validateEmbeddable`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/props#validateembeddable) still applies. [#7539](https://github.com/excalidraw/excalidraw/pull/7539)

+- `ExcalidrawTextElement.baseline` was removed and replaced with a vertical offset computation based on font metrics, performed on each text element re-render. In case of custom font usage, extend the `FONT_METRICS` object with the related properties.
+
 - Create an `ESM` build for `@excalidraw/excalidraw`. The API is in progress and subject to change before stable release. There are some changes on how the package will be consumed

  #### Bundler
@@ -57,10 +67,12 @@ Please add the latest change on the top under the correct section.

 - `appState.openDialog` type was changed from `null | string` to `null | { name: string }`. [#7336](https://github.com/excalidraw/excalidraw/pull/7336)

-## 0.17.1 (2023-11-28)
+## 0.17.3 (2024-02-09)

 ### Fixes

+- Keep customData when converting to ExcalidrawElement. [#7656](https://github.com/excalidraw/excalidraw/pull/7656)
+
 - Umd build for browser since it was breaking in v0.17.0 [#7349](https://github.com/excalidraw/excalidraw/pull/7349). Also make sure that when using `Vite`, the `process.env.IS_PREACT` is set as `"true"` (string) and not a boolean.

 ```
@@ -69,6 +81,10 @@ define: {
 }
 ```

+- Disable caching bounds for arrow labels [#7343](https://github.com/excalidraw/excalidraw/pull/7343)
+
+- Bounds cached prematurely resulting in incorrectly rendered labels [#7339](https://github.com/excalidraw/excalidraw/pull/7339)
+
 ## Excalidraw Library

 ### Fixes
@@ -49,7 +49,7 @@ export const actionUnbindText = register({
    selectedElements.forEach((element) => {
      const boundTextElement = getBoundTextElement(element, elementsMap);
      if (boundTextElement) {
-        const { width, height, baseline } = measureText(
+        const { width, height } = measureText(
          boundTextElement.originalText,
          getFontString(boundTextElement),
          boundTextElement.lineHeight,
@@ -58,12 +58,15 @@ export const actionUnbindText = register({
          element.id,
        );
        resetOriginalContainerCache(element.id);
-        const { x, y } = computeBoundTextPosition(element, boundTextElement);
+        const { x, y } = computeBoundTextPosition(
+          element,
+          boundTextElement,
+          elementsMap,
+        );
        mutateElement(boundTextElement as ExcalidrawTextElement, {
          containerId: null,
          width,
          height,
-          baseline,
          text: boundTextElement.originalText,
          x,
          y,
@@ -145,7 +148,11 @@ export const actionBindText = register({
      }),
    });
    const originalContainerHeight = container.height;
-    redrawTextBoundingBox(textElement, container);
+    redrawTextBoundingBox(
+      textElement,
+      container,
+      app.scene.getNonDeletedElementsMap(),
+    );
    // overwritting the cache with original container height so
    // it can be restored when unbind
    updateOriginalContainerCache(container.id, originalContainerHeight);
@@ -286,7 +293,11 @@ export const actionWrapTextInContainer = register({
          },
          false,
        );
-        redrawTextBoundingBox(textElement, container);
+        redrawTextBoundingBox(
+          textElement,
+          container,
+          app.scene.getNonDeletedElementsMap(),
+        );

        updatedElements = pushContainerBelowText(
          [...updatedElements, container],
@@ -107,7 +107,7 @@ export const actionCut = register({
  trackEvent: { category: "element" },
  perform: (elements, appState, event: ClipboardEvent | null, app) => {
    actionCopy.perform(elements, appState, event, app);
-    return actionDeleteSelected.perform(elements, appState);
+    return actionDeleteSelected.perform(elements, appState, null, app);
  },
  contextItemLabel: "labels.cut",
  keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.X,
@@ -138,6 +138,7 @@ export const actionCopyAsSvg = register({
        {
          ...appState,
          exportingFrame,
+          name: app.getName(),
        },
      );
      return {
@@ -184,6 +185,7 @@ export const actionCopyAsPng = register({
      await exportCanvas("clipboard", exportedElements, appState, app.files, {
        ...appState,
        exportingFrame,
+        name: app.getName(),
      });
      return {
        appState: {
@@ -236,7 +238,11 @@ export const copyText = register({
        return acc;
      }, [])
      .join("\n\n");
-    copyTextToSystemClipboard(text);
+    try {
+      copyTextToSystemClipboard(text);
+    } catch (e) {
+      throw new Error(t("errors.copyToSystemClipboardFailed"));
+    }
    return {
      commitToHistory: false,
    };
@@ -73,7 +73,7 @@ const handleGroupEditingState = (
 export const actionDeleteSelected = register({
  name: "deleteSelectedElements",
  trackEvent: { category: "element", action: "delete" },
-  perform: (elements, appState) => {
+  perform: (elements, appState, formData, app) => {
    if (appState.editingLinearElement) {
      const {
        elementId,
@@ -81,7 +81,8 @@ export const actionDeleteSelected = register({
        startBindingElement,
        endBindingElement,
      } = appState.editingLinearElement;
-      const element = LinearElementEditor.getElement(elementId);
+      const elementsMap = app.scene.getNonDeletedElementsMap();
+      const element = LinearElementEditor.getElement(elementId, elementsMap);
      if (!element) {
        return false;
      }
@@ -35,10 +35,14 @@ import {
 export const actionDuplicateSelection = register({
  name: "duplicateSelection",
  trackEvent: { category: "element" },
-  perform: (elements, appState) => {
+  perform: (elements, appState, formData, app) => {
+    const elementsMap = app.scene.getNonDeletedElementsMap();
    // duplicate selected point(s) if editing a line
    if (appState.editingLinearElement) {
-      const ret = LinearElementEditor.duplicateSelectedPoints(appState);
+      const ret = LinearElementEditor.duplicateSelectedPoints(
+        appState,
+        elementsMap,
+      );

      if (!ret) {
        return false;
@@ -26,14 +26,11 @@ export const actionChangeProjectName = register({
  perform: (_elements, appState, value) => {
    return { appState: { ...appState, name: value }, commitToHistory: false };
  },
-  PanelComponent: ({ appState, updateData, appProps, data }) => (
+  PanelComponent: ({ appState, updateData, appProps, data, app }) => (
    <ProjectName
      label={t("labels.fileTitle")}
-      value={appState.name || "Unnamed"}
+      value={app.getName()}
      onChange={(name: string) => updateData(name)}
-      isNameEditable={
-        typeof appProps.name === "undefined" && !appState.viewModeEnabled
-      }
      ignoreFocus={data?.ignoreFocus ?? false}
    />
  ),
@@ -144,8 +141,13 @@ export const actionSaveToActiveFile = register({

    try {
      const { fileHandle } = isImageFileHandle(appState.fileHandle)
-        ? await resaveAsImageWithScene(elements, appState, app.files)
-        : await saveAsJSON(elements, appState, app.files);
+        ? await resaveAsImageWithScene(
+            elements,
+            appState,
+            app.files,
+            app.getName(),
+          )
+        : await saveAsJSON(elements, appState, app.files, app.getName());

      return {
        commitToHistory: false,
@@ -190,6 +192,7 @@ export const actionSaveFileToDisk = register({
          fileHandle: null,
        },
        app.files,
+        app.getName(),
      );
      return {
        commitToHistory: false,
@@ -1,6 +1,6 @@
 import { KEYS } from "../keys";
 import { isInvisiblySmallElement } from "../element";
-import { updateActiveTool } from "../utils";
+import { arrayToMap, updateActiveTool } from "../utils";
 import { ToolButton } from "../components/ToolButton";
 import { done } from "../components/icons";
 import { t } from "../i18n";
@@ -26,10 +26,12 @@ export const actionFinalize = register({
    _,
    { interactiveCanvas, focusContainer, scene },
  ) => {
+    const elementsMap = scene.getNonDeletedElementsMap();
+
    if (appState.editingLinearElement) {
      const { elementId, startBindingElement, endBindingElement } =
        appState.editingLinearElement;
-      const element = LinearElementEditor.getElement(elementId);
+      const element = LinearElementEditor.getElement(elementId, elementsMap);

      if (element) {
        if (isBindingElement(element)) {
@@ -37,6 +39,7 @@ export const actionFinalize = register({
            element,
            startBindingElement,
            endBindingElement,
+            elementsMap,
          );
        }
        return {
@@ -125,12 +128,14 @@ export const actionFinalize = register({
        const [x, y] = LinearElementEditor.getPointAtIndexGlobalCoordinates(
          multiPointElement,
          -1,
+          arrayToMap(elements),
        );
        maybeBindLinearElement(
          multiPointElement,
          appState,
          Scene.getScene(multiPointElement)!,
          { x, y },
+          elementsMap,
        );
      }
    }
@@ -186,7 +191,7 @@ export const actionFinalize = register({
        // To select the linear element when user has finished mutipoint editing
        selectedLinearElement:
          multiPointElement && isLinearElement(multiPointElement)
-            ? new LinearElementEditor(multiPointElement, scene)
+            ? new LinearElementEditor(multiPointElement)
            : appState.selectedLinearElement,
        pendingImageElementId: null,
      },
@@ -4,7 +4,6 @@ import { getNonDeletedElements } from "../element";
 import {
  ExcalidrawElement,
  NonDeleted,
-  NonDeletedElementsMap,
  NonDeletedSceneElementsMap,
 } from "../element/types";
 import { resizeMultipleElements } from "../element/resizeElements";
@@ -68,7 +67,7 @@ export const actionFlipVertical = register({

 const flipSelectedElements = (
  elements: readonly ExcalidrawElement[],
-  elementsMap: NonDeletedElementsMap | NonDeletedSceneElementsMap,
+  elementsMap: NonDeletedSceneElementsMap,
  appState: Readonly<AppState>,
  flipDirection: "horizontal" | "vertical",
 ) => {
@@ -83,6 +82,7 @@ const flipSelectedElements = (

  const updatedElements = flipElements(
    selectedElements,
+    elements,
    elementsMap,
    appState,
    flipDirection,
@@ -97,7 +97,8 @@ const flipSelectedElements = (

 const flipElements = (
  selectedElements: NonDeleted<ExcalidrawElement>[],
-  elementsMap: NonDeletedElementsMap | NonDeletedSceneElementsMap,
+  elements: readonly ExcalidrawElement[],
+  elementsMap: NonDeletedSceneElementsMap,
  appState: AppState,
  flipDirection: "horizontal" | "vertical",
 ): ExcalidrawElement[] => {
@@ -113,9 +114,9 @@ const flipElements = (
    flipDirection === "horizontal" ? minY : maxY,
  );

-  (isBindingEnabled(appState)
-    ? bindOrUnbindSelectedElements
-    : unbindLinearElements)(selectedElements);
+  isBindingEnabled(appState)
+    ? bindOrUnbindSelectedElements(selectedElements, elements, elementsMap)
+    : unbindLinearElements(selectedElements, elementsMap);

  return selectedElements;
 };
@@ -180,6 +180,8 @@ export const actionUngroup = register({
  trackEvent: { category: "element" },
  perform: (elements, appState, _, app) => {
    const groupIds = getSelectedGroupIds(appState);
+    const elementsMap = arrayToMap(elements);
+
    if (groupIds.length === 0) {
      return { appState, elements, commitToHistory: false };
    }
@@ -226,7 +228,12 @@ export const actionUngroup = register({
      if (frame) {
        nextElements = replaceAllElementsInFrame(
          nextElements,
-          getElementsInResizingFrame(nextElements, frame, appState),
+          getElementsInResizingFrame(
+            nextElements,
+            frame,
+            appState,
+            elementsMap,
+          ),
          frame,
          app,
        );
@@ -24,7 +24,7 @@ export const actionToggleLinearEditor = register({
    const editingLinearElement =
      appState.editingLinearElement?.elementId === selectedElement.id
        ? null
-        : new LinearElementEditor(selectedElement, app.scene);
+        : new LinearElementEditor(selectedElement);
    return {
      appState: {
        ...appState,
@@ -0,0 +1,54 @@
+import { getContextMenuLabel } from "../components/hyperlink/Hyperlink";
+import { LinkIcon } from "../components/icons";
+import { ToolButton } from "../components/ToolButton";
+import { isEmbeddableElement } from "../element/typeChecks";
+import { t } from "../i18n";
+import { KEYS } from "../keys";
+import { getSelectedElements } from "../scene";
+import { getShortcutKey } from "../utils";
+import { register } from "./register";
+
+export const actionLink = register({
+  name: "hyperlink",
+  perform: (elements, appState) => {
+    if (appState.showHyperlinkPopup === "editor") {
+      return false;
+    }
+
+    return {
+      elements,
+      appState: {
+        ...appState,
+        showHyperlinkPopup: "editor",
+        openMenu: null,
+      },
+      commitToHistory: true,
+    };
+  },
+  trackEvent: { category: "hyperlink", action: "click" },
+  keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.K,
+  contextItemLabel: (elements, appState) =>
+    getContextMenuLabel(elements, appState),
+  predicate: (elements, appState) => {
+    const selectedElements = getSelectedElements(elements, appState);
+    return selectedElements.length === 1;
+  },
+  PanelComponent: ({ elements, appState, updateData }) => {
+    const selectedElements = getSelectedElements(elements, appState);
+
+    return (
+      <ToolButton
+        type="button"
+        icon={LinkIcon}
+        aria-label={t(getContextMenuLabel(elements, appState))}
+        title={`${
+          isEmbeddableElement(elements[0])
+            ? t("labels.link.labelEmbed")
+            : t("labels.link.label")
+        } - ${getShortcutKey("CtrlOrCmd+K")}`}
+        onClick={() => updateData(null)}
+        selected={selectedElements.length === 1 && !!selectedElements[0].link}
+      />
+    );
+  },
+});
@@ -1,10 +1,15 @@
 import { getClientColor } from "../clients";
 import { Avatar } from "../components/Avatar";
 import { GoToCollaboratorComponentProps } from "../components/UserList";
-import { eyeIcon } from "../components/icons";
+import {
+  eyeIcon,
+  microphoneIcon,
+  microphoneMutedIcon,
+} from "../components/icons";
 import { t } from "../i18n";
 import { Collaborator } from "../types";
 import { register } from "./register";
+import clsx from "clsx";

 export const actionGoToCollaborator = register({
  name: "goToCollaborator",
@@ -39,14 +44,45 @@ export const actionGoToCollaborator = register({
    };
  },
  PanelComponent: ({ updateData, data, appState }) => {
-    const { clientId, collaborator, withName, isBeingFollowed } =
+    const { socketId, collaborator, withName, isBeingFollowed } =
      data as GoToCollaboratorComponentProps;

-    const background = getClientColor(clientId);
+    const background = getClientColor(socketId, collaborator);
+
+    const statusClassNames = clsx({
+      "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 ? (
+        <div
+          className="UserList__collaborator-status-icon-speaking-indicator"
+          title={t("userList.hint.isSpeaking")}
+        >
+          <div />
+          <div />
+          <div />
+        </div>
+      ) : collaborator.isMuted ? (
+        <div
+          className="UserList__collaborator-status-icon-microphone-muted"
+          title={t("userList.hint.micMuted")}
+        >
+          {microphoneMutedIcon}
+        </div>
+      ) : (
+        <div title={t("userList.hint.inCall")}>{microphoneIcon}</div>
+      )
+    ) : null;

    return withName ? (
      <div
-        className="dropdown-menu-item dropdown-menu-item-base UserList__collaborator"
+        className={`dropdown-menu-item dropdown-menu-item-base UserList__collaborator ${statusClassNames}`}
+        style={{ [`--avatar-size` as any]: "1.5rem" }}
        onClick={() => updateData<Collaborator>(collaborator)}
      >
        <Avatar
@@ -54,32 +90,42 @@ export const actionGoToCollaborator = register({
          onClick={() => {}}
          name={collaborator.username || ""}
          src={collaborator.avatarUrl}
-          isBeingFollowed={isBeingFollowed}
-          isCurrentUser={collaborator.isCurrentUser === true}
+          className={statusClassNames}
        />
        <div className="UserList__collaborator-name">
          {collaborator.username}
        </div>
-        <div
-          className="UserList__collaborator-follow-status-icon"
-          style={{ visibility: isBeingFollowed ? "visible" : "hidden" }}
-          title={isBeingFollowed ? t("userList.hint.followStatus") : undefined}
-          aria-hidden
-        >
-          {eyeIcon}
+        <div className="UserList__collaborator-status-icons" aria-hidden>
+          {isBeingFollowed && (
+            <div
+              className="UserList__collaborator-status-icon-is-followed"
+              title={t("userList.hint.followStatus")}
+            >
+              {eyeIcon}
+            </div>
+          )}
+          {statusIconJSX}
        </div>
      </div>
    ) : (
-      <Avatar
-        color={background}
-        onClick={() => {
-          updateData(collaborator);
-        }}
-        name={collaborator.username || ""}
-        src={collaborator.avatarUrl}
-        isBeingFollowed={isBeingFollowed}
-        isCurrentUser={collaborator.isCurrentUser === true}
-      />
+      <div
+        className={`UserList__collaborator UserList__collaborator--avatar-only ${statusClassNames}`}
+      >
+        <Avatar
+          color={background}
+          onClick={() => {
+            updateData(collaborator);
+          }}
+          name={collaborator.username || ""}
+          src={collaborator.avatarUrl}
+          className={statusClassNames}
+        />
+        {statusIconJSX && (
+          <div className="UserList__collaborator-status-icon">
+            {statusIconJSX}
+          </div>
+        )}
+      </div>
    );
  },
 });
@@ -209,6 +209,7 @@ const changeFontSize = (
          redrawTextBoundingBox(
            newElement,
            app.scene.getContainerElement(oldElement),
+            app.scene.getNonDeletedElementsMap(),
          );

          newElement = offsetElementAfterFontResize(oldElement, newElement);
@@ -730,6 +731,7 @@ export const actionChangeFontFamily = register({
            redrawTextBoundingBox(
              newElement,
              app.scene.getContainerElement(oldElement),
+              app.scene.getNonDeletedElementsMap(),
            );
            return newElement;
          }
@@ -829,6 +831,7 @@ export const actionChangeTextAlign = register({
            redrawTextBoundingBox(
              newElement,
              app.scene.getContainerElement(oldElement),
+              app.scene.getNonDeletedElementsMap(),
            );
            return newElement;
          }
@@ -918,6 +921,7 @@ export const actionChangeVerticalAlign = register({
            redrawTextBoundingBox(
              newElement,
              app.scene.getContainerElement(oldElement),
+              app.scene.getNonDeletedElementsMap(),
            );
            return newElement;
          }
@@ -43,7 +43,7 @@ export const actionSelectAll = register({
          // single linear element selected
          Object.keys(selectedElementIds).length === 1 &&
          isLinearElement(elements[0])
-            ? new LinearElementEditor(elements[0], app.scene)
+            ? new LinearElementEditor(elements[0])
            : null,
      },
      commitToHistory: true,
@@ -128,7 +128,11 @@ export const actionPasteStyles = register({
                    element.id === newElement.containerId,
                ) || null;
            }
-            redrawTextBoundingBox(newElement, container);
+            redrawTextBoundingBox(
+              newElement,
+              container,
+              app.scene.getNonDeletedElementsMap(),
+            );
          }

          if (
@@ -83,6 +83,6 @@ export { actionToggleObjectsSnapMode } from "./actionToggleObjectsSnapMode";

 export { actionToggleStats } from "./actionToggleStats";
 export { actionUnbindText, actionBindText } from "./actionBoundText";
-export { actionLink } from "../element/Hyperlink";
+export { actionLink } from "./actionLink";
 export { actionToggleElementLock } from "./actionElementLock";
 export { actionToggleLinearEditor } from "./actionLinearEditor";
@@ -10,6 +10,7 @@ import {
 import { ExcalidrawElement } from "../element/types";
 import { AppClassProperties, AppState } from "../types";
 import { trackEvent } from "../analytics";
+import { isPromiseLike } from "../utils";

 const trackAction = (
  action: Action,
@@ -55,7 +56,7 @@ export class ActionManager {
    app: AppClassProperties,
  ) {
    this.updater = (actionResult) => {
-      if (actionResult && "then" in actionResult) {
+      if (isPromiseLike(actionResult)) {
        actionResult.then((actionResult) => {
          return updater(actionResult);
        });
@@ -7,9 +7,7 @@ import {
  EXPORT_SCALES,
  THEME,
 } from "./constants";
-import { t } from "./i18n";
 import { AppState, NormalizedZoomValue } from "./types";
-import { getDateTime } from "./utils";

 const defaultExportScale = EXPORT_SCALES.includes(devicePixelRatio)
  ? devicePixelRatio
@@ -65,7 +63,7 @@ export const getDefaultAppState = (): Omit<
    isRotating: false,
    lastPointerDownWith: "mouse",
    multiElement: null,
-    name: `${t("labels.untitled")}-${getDateTime()}`,
+    name: null,
    contextMenu: null,
    openMenu: null,
    openPopup: null,
@@ -1,20 +0,0 @@
-<svg width="178" height="162" viewBox="0 0 178 162" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M40.3329 54.3823L38.5547 94.3134L39.7731 111.754L40.1282 118.907L41.0832 123.59L44.3502 131.942L48.9438 137.693L52.5472 143.333L58.5544 147.755L62.5364 150.239L72.3634 154.486L83.15 156.361L91.1212 158.708L101.174 157.525L110.808 156.719L115.983 154.049L124.511 151.377L129.276 148.71L133.701 143.947L139.666 135.877L142.001 128.136L145.746 118.192L145.188 111.065L145.489 94.3675L145.873 75.2546L143.227 59.7779L142.022 47.4695L138.595 46.8345L102.952 45.4703L56.9173 46.7498L46.0719 49.1207L41.9323 50.6825L39.5684 53.4297" fill="#E3E2FE"/>
-<path d="M41.0014 54.2859C41.0861 64.8796 38.3765 102.581 40.9779 117.876C43.5793 133.17 48.2646 139.346 56.6121 146.047C64.9596 152.746 79.1214 157.662 91.0653 158.078C103.009 158.492 119.347 155.242 128.277 148.543C137.206 141.842 142.112 133.527 144.641 117.874C147.169 102.221 146.061 66.4132 143.446 54.6222C140.83 42.8289 143.97 48.2857 128.948 47.1238C113.925 45.9619 67.9608 46.477 53.3051 47.6483C38.6493 48.8197 43.2053 53.0675 41.0155 54.1518M40.5263 53.9801C40.5404 64.6138 37.9249 103.418 40.5921 118.587C43.257 133.755 48.147 138.325 56.5251 144.991C64.9008 151.655 78.7263 157.935 90.8536 158.577C102.981 159.221 120.212 155.413 129.289 148.844C138.368 142.277 142.872 134.995 145.321 119.168C147.767 103.343 146.805 65.8698 143.977 53.8837C141.148 41.8975 143.615 48.4292 128.348 47.2508C113.081 46.0724 67.14 45.6726 52.3737 46.8157C37.6074 47.9564 41.7776 53.091 39.7524 54.1024" stroke="#6965DB" stroke-width="2" stroke-linecap="round"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M64.7935 45.726L66.36 36.6964L65.5979 34.4501L67.3384 30.7668L70.4197 26.5048L74.8157 21.0598L81.9095 16.9131L89.9419 14.4951L95.6127 12.8534L97.7555 13.2133L103.819 15.269L106.552 18.5807L109.967 22.3793L114.45 27.2387L114.904 34.3937L117.153 38.9214L116.031 44.5005L116.765 45.5448L118.863 47.3559L126.164 47.6782L127.744 46.7797L128.76 44.7052L123.882 25.8227L120.641 20.4835L116.351 15.8758L112.809 11.0729L108.617 7.36601L101.352 5.43025L93.263 3.31104L84.2451 5.1433L77.7299 7.86229L76.0011 8.0975L62.1168 19.8532L59.5366 24.5597L55.7733 32.3215L55.0371 39.5282L56.0626 44.8933L56.5636 47.1725L59.6401 46.8644L66.1648 46.0388" fill="#E3E2FE"/>
-<path d="M65.0037 46.0106C65.1166 43.8231 64.9237 36.8492 66.1421 33.2412C67.3605 29.6307 69.0799 27.2857 72.314 24.3527C75.5481 21.422 81.273 17.6093 85.5444 15.6453C89.8157 13.6813 94.3317 12.1148 97.9421 12.5664C101.555 13.0157 104.544 15.857 107.219 18.3478C109.893 20.8387 112.356 24.0869 113.986 27.5115C115.618 30.9338 116.389 35.8684 117.006 38.8861C117.622 41.9038 115.992 44.2888 117.69 45.6178C119.388 46.949 125.617 48.1721 127.195 46.8667C128.773 45.5613 127.717 41.1888 127.157 37.7877C126.597 34.3866 125.494 30.1247 123.838 26.4601C122.183 22.7956 119.746 18.9029 117.222 15.7982C114.698 12.6934 112.791 9.9086 108.696 7.83642C104.601 5.76189 97.8081 3.42863 92.6547 3.35337C87.5013 3.2781 81.5529 5.74308 77.7708 7.38717C73.991 9.03127 72.8879 10.6166 69.9666 13.218C67.043 15.8217 62.4306 19.6768 60.2384 23.0026C58.0486 26.3284 57.4818 29.252 56.8185 33.1753C56.1529 37.0962 54.6499 44.39 56.2517 46.5327C57.8511 48.6731 64.7756 45.98 66.4267 46.0247M65.9704 45.5096C65.9845 43.348 64.2652 37.5525 65.5423 33.8456C66.8172 30.1364 70.2959 26.4789 73.6264 23.259C76.9546 20.039 81.3177 16.3015 85.5208 14.5281C89.7216 12.7523 95.1079 11.7903 98.8383 12.6111C102.569 13.432 105.283 16.8072 107.903 19.4486C110.526 22.09 113.146 25.3029 114.567 28.4664C115.987 31.6276 116.03 35.4051 116.425 38.4204C116.82 41.4334 115.124 45.1426 116.937 46.5515C118.751 47.9604 125.539 48.2968 127.31 46.8761C129.081 45.4578 127.978 41.4428 127.562 38.0347C127.145 34.6265 126.501 30.1646 124.81 26.4296C123.116 22.6921 120.195 18.7594 117.413 15.6194C114.63 12.4818 112.247 9.39349 108.117 7.58945C103.987 5.78541 97.5776 5.02099 92.6335 4.79519C87.6895 4.56939 82.3503 4.78813 78.4505 6.23466C74.5484 7.68118 72.0882 10.6542 69.228 13.4696C66.3679 16.2851 63.4725 19.7873 61.2898 23.1319C59.1071 26.4789 56.9761 29.4896 56.1293 33.5469C55.285 37.6043 54.577 45.2132 56.2117 47.4759C57.8487 49.7409 64.2675 47.3418 65.9445 47.1301" stroke="#6965DB" stroke-width="2" stroke-linecap="round"/>
-<path d="M140.37 54.8958C137.884 58.1322 127.704 71.2286 125.185 74.5427M139.697 54.209C137.098 57.5466 127.005 71.7884 124.51 75.3565" stroke="#6965DB" stroke-width="2" stroke-linecap="round"/>
-<path d="M141.663 63.1765C139.661 66.0413 131.311 77.1501 129.077 79.9726M141.065 62.5908C139.021 65.2792 130.631 76.1364 128.717 78.8625" stroke="#6965DB" stroke-width="2" stroke-linecap="round"/>
-<path d="M141.888 72.9917C139.475 75.8589 130.268 86.8478 127.966 89.7455M141.02 72.726C138.503 75.6496 129.775 87.2476 127.58 90.3242" stroke="#6965DB" stroke-width="2" stroke-linecap="round"/>
-<path d="M141.948 82.215C139.815 85.1057 130.308 96.8214 127.961 99.7709M141.459 81.7375C139.298 84.4119 129.816 95.9888 127.479 98.8606" stroke="#6965DB" stroke-width="2" stroke-linecap="round"/>
-<path d="M141.357 91.7838C138.885 95.2484 128.808 108.535 126.428 111.76M142.474 91.4757C139.917 94.7921 128.38 107.493 125.781 110.883" stroke="#6965DB" stroke-width="2" stroke-linecap="round"/>
-<path d="M142.568 101.479C140.028 104.403 129.867 115.528 127.195 118.356M141.811 101.018C139.212 104.055 129.477 115.975 126.828 118.97" stroke="#6965DB" stroke-width="2" stroke-linecap="round"/>
-<path d="M141.023 112.172C138.591 114.775 128.028 125.905 125.422 128.664M140.51 113.465C138.008 116.147 127.36 125.233 124.742 127.582" stroke="#6965DB" stroke-width="2" stroke-linecap="round"/>
-<path d="M139.004 123.69C136.501 126.275 125.952 137.248 123.287 140.108M138.343 124.817C135.805 127.454 125.487 138.261 122.848 140.75" stroke="#6965DB" stroke-width="2" stroke-linecap="round"/>
-<path d="M132.192 139.862C129.854 141.624 120.87 148.168 118.574 150.012M131.39 139.496C128.97 141.333 120.524 148.89 118.322 150.621" stroke="#6965DB" stroke-width="2" stroke-linecap="round"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M82.6351 92.3124L78.2767 89.0148L78.6718 88.8784L75.6282 79.6865L74.4922 76.0525L75.0379 74.1074L78.6248 69.5444L83.6182 65.186L86.6924 64.0711L93.7768 63.9864L99.9181 63.9276L103.905 64.4215L106.038 66.068L109.333 67.6392L110.251 69.4479L112.438 73.1877L112.702 81.928L111.674 82.93L110.907 85.5573L107.828 89.2336L101.273 92.9193L102.785 120.401L99.5488 125.521L98.0059 127.838L96.1313 129.414L93.17 130.237L92.2198 130.033L90.1358 129.233L88.8328 126.594L87.8378 95.2549L88.9386 93.3215L86.0409 91.294L80.9533 91.1552" fill="white"/>
-<path d="M82.8214 92.0607C82.0664 91.4327 79.291 90.7201 77.8539 88.2033C76.4167 85.6866 73.5284 80.4438 74.1964 76.9581C74.862 73.4723 78.6959 69.6384 81.8524 67.2887C85.0089 64.939 88.9227 63.1138 93.1353 62.8574C97.3478 62.6034 103.957 63.9888 107.132 65.7575C110.31 67.5263 111.416 70.5651 112.196 73.4747C112.977 76.3842 112.606 80.6626 111.82 83.2122C111.035 85.7642 109.078 87.1661 107.481 88.7749C105.883 90.3837 103.106 91.2751 102.233 92.8651C101.363 94.4551 102.327 95.3254 102.25 98.3125C102.172 101.3 101.76 107.227 101.767 110.788C101.772 114.349 102.487 116.981 102.285 119.676C102.085 122.374 101.52 125.126 100.556 126.965C99.5917 128.805 98.077 130.256 96.5011 130.715C94.9275 131.171 92.4485 130.36 91.1101 129.713C89.7742 129.066 89.0144 128.341 88.4805 126.836C87.9489 125.331 87.9678 123.964 87.9137 120.681C87.8596 117.397 88.1159 111.599 88.1583 107.14C88.203 102.68 89.2779 96.445 88.1724 93.9236C87.0693 91.4022 82.7791 92.4347 81.5325 92.0137M82.0194 91.6068C81.222 90.7624 78.4536 89.7886 77.3623 87.1567C76.2733 84.5247 74.6621 79.3125 75.4783 75.815C76.2921 72.3151 79.1428 68.3166 82.2522 66.1597C85.3617 64.0029 90.1693 63.062 94.1302 62.8739C98.0911 62.6857 102.925 63.0832 106.02 65.0331C109.118 66.9853 111.834 71.5836 112.705 74.5801C113.572 77.5743 111.949 80.7731 111.234 83.0076C110.519 85.2444 109.835 86.3711 108.417 87.9916C107.001 89.6146 103.738 90.9623 102.732 92.7358C101.725 94.5092 102.351 95.6382 102.377 98.6301C102.405 101.62 102.866 106.949 102.894 110.682C102.922 114.417 102.955 118.291 102.544 121.038C102.13 123.783 101.408 125.54 100.42 127.161C99.4318 128.781 98.1005 130.233 96.6163 130.759C95.1322 131.286 92.9353 130.893 91.51 130.322C90.0846 129.753 88.7769 128.889 88.0618 127.335C87.3468 125.78 87.0128 124.317 87.2198 120.998C87.4268 117.68 89.0874 112.046 89.299 107.422C89.5107 102.798 89.8494 95.9322 88.4946 93.2509C87.1398 90.5695 82.4804 91.4845 81.1679 91.3316" stroke="#6965DB" stroke-width="2" stroke-linecap="round"/>
-<path d="M28.1943 139.31C26.7936 139.432 25.332 140.402 23.8703 140.523C23.1395 140.766 22.5914 140.16 21.9824 139.735C21.5561 139.553 21.008 138.461 20.8253 138.219C20.5817 136.884 19.9118 134.276 20.0336 133.002C19.7291 131.364 21.5561 129.787 23.0786 129.727C23.2613 129.727 23.8094 129.787 23.8703 129.787C25.7583 130.151 27.5853 131.546 29.5341 131.728C29.595 131.728 29.6559 131.728 29.6559 131.668C30.4476 130.333 30.204 126.937 30.813 125.542C30.813 125.36 31.1784 123.54 31.1784 123.237C31.6048 122.327 32.1529 121.781 33.1273 122.084C33.7972 122.266 34.6498 122.388 34.6498 123.237V128.635C34.8325 129.242 36.1114 128.999 36.5986 128.999C38.7911 128.028 40.8617 127.422 43.3586 127.058C45.6729 127.179 46.7082 129.242 46.5864 131.304C46.6473 132.396 45.4293 133.245 44.6985 133.973C44.4549 134.094 43.4804 134.519 43.115 134.397C42.2624 133.791 41.1662 134.033 40.1309 134.094C40.1309 134.155 40.0091 134.337 40.07 134.397C41.288 135.853 43.5413 136.096 45.0639 137.066C46.1601 138.34 47.4999 138.643 47.1345 140.341C47.0736 141.191 47.1345 142.1 46.221 142.404C45.9774 142.586 44.5767 142.828 44.2722 142.828C43.9677 142.768 43.3586 142.343 43.115 142.04C40.9835 141.13 38.6693 140.402 36.2332 140.159V145.133C35.9896 146.468 35.6851 147.923 34.6498 148.955C34.2844 149.015 33.1273 149.015 32.7619 148.955C32.4574 148.773 31.4221 147.741 31.1784 147.438C30.5694 145.133 30.4476 142.404 29.6559 140.159C29.1687 139.553 28.986 139.25 28.1943 139.31Z" fill="#6965DB"/>
-<path d="M59.5964 139.31C58.1956 139.432 56.734 140.402 55.2724 140.523C54.5416 140.766 53.9935 140.16 53.3845 139.735C52.9582 139.553 52.41 138.461 52.2273 138.219C51.9837 136.884 51.3138 134.276 51.4356 133.002C51.1311 131.364 52.9582 129.787 54.4807 129.727C54.6634 129.727 55.2115 129.787 55.2724 129.787C57.1603 130.151 58.9874 131.546 60.9362 131.728C60.9971 131.728 61.058 131.728 61.058 131.668C61.8497 130.333 61.6061 126.937 62.2151 125.542C62.2151 125.36 62.5805 123.54 62.5805 123.237C63.0068 122.327 63.5549 121.781 64.5293 122.084C65.1992 122.266 66.0519 122.388 66.0519 123.237V128.635C66.2346 129.242 67.5135 128.999 68.0007 128.999C70.1931 128.028 72.2638 127.422 74.7607 127.058C77.0749 127.179 78.1103 129.242 77.9885 131.304C78.0494 132.396 76.8313 133.245 76.1005 133.973C75.8569 134.094 74.8825 134.519 74.5171 134.397C73.6645 133.791 72.5683 134.033 71.5329 134.094C71.5329 134.155 71.4112 134.337 71.4721 134.397C72.6901 135.853 74.9434 136.096 76.4659 137.066C77.5621 138.34 78.902 138.643 78.5366 140.341C78.4757 141.191 78.5366 142.1 77.623 142.404C77.3794 142.586 75.9787 142.828 75.6742 142.828C75.3697 142.768 74.7607 142.343 74.5171 142.04C72.3856 141.13 70.0713 140.402 67.6353 140.159V145.133C67.3917 146.468 67.0872 147.923 66.0519 148.955C65.6865 149.015 64.5293 149.015 64.1639 148.955C63.8594 148.773 62.8241 147.741 62.5805 147.438C61.9715 145.133 61.8497 142.404 61.058 140.159C60.5708 139.553 60.3881 139.25 59.5964 139.31Z" fill="#6965DB"/>
-<path d="M90.9984 139.31C89.5977 139.432 88.1361 140.402 86.6745 140.523C85.9436 140.766 85.3955 140.16 84.7865 139.735C84.3602 139.553 83.8121 138.461 83.6294 138.219C83.3858 136.884 82.7159 134.276 82.8377 133.002C82.5332 131.364 84.3602 129.787 85.8827 129.727C86.0654 129.727 86.6136 129.787 86.6745 129.787C88.5624 130.151 90.3894 131.546 92.3382 131.728C92.3991 131.728 92.46 131.728 92.46 131.668C93.2518 130.333 93.0082 126.937 93.6172 125.542C93.6172 125.36 93.9826 123.54 93.9826 123.237C94.4089 122.327 94.957 121.781 95.9314 122.084C96.6013 122.266 97.4539 122.388 97.4539 123.237V128.635C97.6366 129.242 98.9155 128.999 99.4028 128.999C101.595 128.028 103.666 127.422 106.163 127.058C108.477 127.179 109.512 129.242 109.391 131.304C109.451 132.396 108.233 133.245 107.503 133.973C107.259 134.094 106.285 134.519 105.919 134.397C105.067 133.791 103.97 134.033 102.935 134.094C102.935 134.155 102.813 134.337 102.874 134.397C104.092 135.853 106.345 136.096 107.868 137.066C108.964 138.34 110.304 138.643 109.939 140.341C109.878 141.191 109.939 142.1 109.025 142.404C108.782 142.586 107.381 142.828 107.076 142.828C106.772 142.768 106.163 142.343 105.919 142.04C103.788 141.13 101.473 140.402 99.0373 140.159V145.133C98.7937 146.468 98.4892 147.923 97.4539 148.955C97.0885 149.015 95.9314 149.015 95.566 148.955C95.2615 148.773 94.2262 147.741 93.9826 147.438C93.3736 145.133 93.2518 142.404 92.46 140.159C91.9728 139.553 91.7901 139.25 90.9984 139.31Z" fill="#6965DB"/>
-</svg>
@@ -1,3 +1,18 @@
+import {
+  COLOR_CHARCOAL_BLACK,
+  COLOR_VOICE_CALL,
+  COLOR_WHITE,
+  THEME,
+} from "./constants";
+import { roundRect } from "./renderer/roundRect";
+import { InteractiveCanvasRenderConfig } from "./scene/types";
+import {
+  Collaborator,
+  InteractiveCanvasAppState,
+  SocketId,
+  UserIdleState,
+} from "./types";
+
 function hashToInteger(id: string) {
  let hash = 0;
  if (id.length === 0) {
@@ -11,14 +26,12 @@ function hashToInteger(id: string) {
 }

 export const getClientColor = (
-  /**
-   * any uniquely identifying key, such as user id or socket id
-   */
-  id: string,
+  socketId: SocketId,
+  collaborator: Collaborator | undefined,
 ) => {
  // to get more even distribution in case `id` is not uniformly distributed to
  // begin with, we hash it
-  const hash = Math.abs(hashToInteger(id));
+  const hash = Math.abs(hashToInteger(collaborator?.id || socketId));
  // we want to get a multiple of 10 number in the range of 0-360 (in other
  // words a hue value of step size 10). There are 37 such values including 0.
  const hue = (hash % 37) * 10;
@@ -38,3 +51,209 @@ export const getNameInitial = (name?: string | null) => {
    firstCodePoint ? String.fromCodePoint(firstCodePoint) : "?"
  ).toUpperCase();
 };
+
+export const renderRemoteCursors = ({
+  context,
+  renderConfig,
+  appState,
+  normalizedWidth,
+  normalizedHeight,
+}: {
+  context: CanvasRenderingContext2D;
+  renderConfig: InteractiveCanvasRenderConfig;
+  appState: InteractiveCanvasAppState;
+  normalizedWidth: number;
+  normalizedHeight: number;
+}) => {
+  // Paint remote pointers
+  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 === UserIdleState.IDLE ||
+      userState === UserIdleState.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();
+    }
+
+    // TODO remove the dark theme color after we stop inverting canvas colors
+    const IS_SPEAKING_COLOR =
+      appState.theme === THEME.DARK ? "#2f6330" : COLOR_VOICE_CALL;
+
+    const isSpeaking = collaborator?.isSpeaking;
+
+    if (isSpeaking) {
+      // cursor outline for currently speaking user
+      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();
+    }
+
+    // Background (white outline) for arrow
+    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();
+
+    // Arrow
+    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"; // font has to be set before context.measureText()
+
+      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,
+      );
+
+      // draw three vertical bars signalling someone is speaking
+      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();
+  }
+};
@@ -16,8 +16,7 @@ import {
 import { deepCopyElement } from "./element/newElement";
 import { mutateElement } from "./element/mutateElement";
 import { getContainingFrame } from "./frame";
-import { isMemberOf, isPromiseLike } from "./utils";
-import { t } from "./i18n";
+import { arrayToMap, isMemberOf, isPromiseLike } from "./utils";

 type ElementsClipboard = {
  type: typeof EXPORT_DATA_TYPES.excalidrawClipboard;
@@ -126,6 +125,7 @@ export const serializeAsClipboardJSON = ({
  elements: readonly NonDeletedExcalidrawElement[];
  files: BinaryFiles | null;
 }) => {
+  const elementsMap = arrayToMap(elements);
  const framesToCopy = new Set(
    elements.filter((element) => isFrameLikeElement(element)),
  );
@@ -152,8 +152,8 @@ export const serializeAsClipboardJSON = ({
    type: EXPORT_DATA_TYPES.excalidrawClipboard,
    elements: elements.map((element) => {
      if (
-        getContainingFrame(element) &&
-        !framesToCopy.has(getContainingFrame(element)!)
+        getContainingFrame(element, elementsMap) &&
+        !framesToCopy.has(getContainingFrame(element, elementsMap)!)
      ) {
        const copiedElement = deepCopyElement(element);
        mutateElement(copiedElement, {
@@ -434,7 +434,7 @@ export const copyTextToSystemClipboard = async (

  // (3) if that fails, use document.execCommand
  if (!copyTextViaExecCommand(text)) {
-    throw new Error(t("errors.copyToSystemClipboardFailed"));
+    throw new Error("Error copying to clipboard.");
  }
 };

@@ -306,6 +306,25 @@ export const ShapesSwitcher = ({
          title={t("toolBar.extraTools")}
        >
          {extraToolsIcon}
+          {app.props.aiEnabled !== false && (
+            <div
+              style={{
+                display: "inline-flex",
+                marginLeft: "auto",
+                padding: "2px 4px",
+                borderRadius: 6,
+                fontSize: 8,
+                fontFamily: "Cascadia, monospace",
+                position: "absolute",
+                background: "pink",
+                color: "black",
+                bottom: 3,
+                right: 4,
+              }}
+            >
+              AI
+            </div>
+          )}
        </DropdownMenu.Trigger>
        <DropdownMenu.Content
          onClickOutside={() => setIsExtraToolsMenuOpen(false)}
@@ -89,6 +89,7 @@ import {
  TOOL_TYPE,
  EDITOR_LS_KEYS,
  isIOS,
+  supportsResizeObserver,
 } from "../constants";
 import { ExportedElements, exportCanvas, loadFromBlob } from "../data";
 import Library, { distributeLibraryItemsOnSquareGrid } from "../data/library";
@@ -270,6 +271,7 @@ import {
  updateStable,
  addEventListener,
  normalizeEOL,
+  getDateTime,
 } from "../utils";
 import {
  createSrcDoc,
@@ -325,9 +327,7 @@ import {
  showHyperlinkTooltip,
  hideHyperlinkToolip,
  Hyperlink,
-  isPointHittingLink,
-  isPointHittingLinkIcon,
-} from "../element/Hyperlink";
+} from "../components/hyperlink/Hyperlink";
 import { isLocalLink, normalizeLink, toValidURL } from "../data/url";
 import { shouldShowBoundingBox } from "../element/transformHandles";
 import { actionUnlockAllElements } from "../actions/actionElementLock";
@@ -409,6 +409,10 @@ import { withBatchedUpdates, withBatchedUpdatesThrottled } from "../reactUtils";
 import { getRenderOpacity } from "../renderer/renderElement";
 import { textWysiwyg } from "../element/textWysiwyg";
 import { isOverScrollBars } from "../scene/scrollbars";
+import {
+  isPointHittingLink,
+  isPointHittingLinkIcon,
+} from "./hyperlink/helpers";

 const AppContext = React.createContext<AppClassProperties>(null!);
 const AppPropsContext = React.createContext<AppProps>(null!);
@@ -473,9 +477,6 @@ export const useExcalidrawSetAppState = () =>
 export const useExcalidrawActionManager = () =>
  useContext(ExcalidrawActionManagerContext);

-const supportsResizeObserver =
-  typeof window !== "undefined" && "ResizeObserver" in window;
-
 let didTapTwice: boolean = false;
 let tappedTwiceTimer = 0;
 let isHoldingSpace: boolean = false;
@@ -619,7 +620,7 @@ class App extends React.Component<AppProps, AppState> {
      gridModeEnabled = false,
      objectsSnapModeEnabled = false,
      theme = defaultAppState.theme,
-      name = defaultAppState.name,
+      name = `${t("labels.untitled")}-${getDateTime()}`,
    } = props;
    this.state = {
      ...defaultAppState,
@@ -662,6 +663,7 @@ class App extends React.Component<AppProps, AppState> {
        getSceneElements: this.getSceneElements,
        getAppState: () => this.state,
        getFiles: () => this.files,
+        getName: this.getName,
        registerAction: (action: Action) => {
          this.actionManager.registerAction(action);
        },
@@ -951,6 +953,7 @@ class App extends React.Component<AppProps, AppState> {
            normalizedWidth,
            normalizedHeight,
            this.state,
+            this.scene.getNonDeletedElementsMap(),
          );
          const hasBeenInitialized = this.initializedEmbeds.has(el.id);

@@ -1126,7 +1129,7 @@ class App extends React.Component<AppProps, AppState> {
                display: isVisible ? "block" : "none",
                opacity: getRenderOpacity(
                  el,
-                  getContainingFrame(el),
+                  getContainingFrame(el, this.scene.getNonDeletedElementsMap()),
                  this.elementsPendingErasure,
                ),
                ["--embeddable-radius" as string]: `${getCornerRadius(
@@ -1285,6 +1288,7 @@ class App extends React.Component<AppProps, AppState> {
            scrollY: this.state.scrollY,
            zoom: this.state.zoom,
          },
+          this.scene.getNonDeletedElementsMap(),
        )
      ) {
        // if frame not visible, don't render its name
@@ -1410,6 +1414,13 @@ class App extends React.Component<AppProps, AppState> {
    });
  };

+  private toggleOverscrollBehavior(event: React.PointerEvent) {
+    // when pointer inside editor, disable overscroll behavior to prevent
+    // panning to trigger history back/forward on MacOS Chrome
+    document.documentElement.style.overscrollBehaviorX =
+      event.type === "pointerenter" ? "none" : "auto";
+  }
+
  public render() {
    const selectedElements = this.scene.getSelectedElements(this.state);
    const { renderTopRightUI, renderCustomStats } = this.props;
@@ -1463,6 +1474,8 @@ class App extends React.Component<AppProps, AppState> {
        onKeyDown={
          this.props.handleKeyboardGlobally ? undefined : this.onKeyDown
        }
+        onPointerEnter={this.toggleOverscrollBehavior}
+        onPointerLeave={this.toggleOverscrollBehavior}
      >
        <AppContext.Provider value={this}>
          <AppPropsContext.Provider value={this.props}>
@@ -1525,6 +1538,7 @@ class App extends React.Component<AppProps, AppState> {
                            <Hyperlink
                              key={firstSelectedElement.id}
                              element={firstSelectedElement}
+                              elementsMap={allElementsMap}
                              setAppState={this.setAppState}
                              onLinkOpen={this.props.onLinkOpen}
                              setToast={this.setToast}
@@ -1538,6 +1552,7 @@ class App extends React.Component<AppProps, AppState> {
                          isMagicFrameElement(firstSelectedElement) && (
                            <ElementCanvasButtons
                              element={firstSelectedElement}
+                              elementsMap={elementsMap}
                            >
                              <ElementCanvasButton
                                title={t("labels.convertToCode")}
@@ -1558,6 +1573,7 @@ class App extends React.Component<AppProps, AppState> {
                            ?.status === "done" && (
                            <ElementCanvasButtons
                              element={firstSelectedElement}
+                              elementsMap={elementsMap}
                            >
                              <ElementCanvasButton
                                title={t("labels.copySource")}
@@ -1725,7 +1741,7 @@ class App extends React.Component<AppProps, AppState> {
      this.files,
      {
        exportBackground: this.state.exportBackground,
-        name: this.state.name,
+        name: this.getName(),
        viewBackgroundColor: this.state.viewBackgroundColor,
        exportingFrame: opts.exportingFrame,
      },
@@ -2124,7 +2140,7 @@ class App extends React.Component<AppProps, AppState> {
        let gridSize = actionResult?.appState?.gridSize || null;
        const theme =
          actionResult?.appState?.theme || this.props.theme || THEME.LIGHT;
-        let name = actionResult?.appState?.name ?? this.state.name;
+        const name = actionResult?.appState?.name ?? this.state.name;
        const errorMessage =
          actionResult?.appState?.errorMessage ?? this.state.errorMessage;
        if (typeof this.props.viewModeEnabled !== "undefined") {
@@ -2139,10 +2155,6 @@ class App extends React.Component<AppProps, AppState> {
          gridSize = this.props.gridModeEnabled ? GRID_SIZE : null;
        }

-        if (typeof this.props.name !== "undefined") {
-          name = this.props.name;
-        }
-
        editingElement =
          editingElement || actionResult.appState?.editingElement || null;

@@ -2455,6 +2467,7 @@ class App extends React.Component<AppProps, AppState> {
    isSomeElementSelected.clearCache();
    selectGroupsForSelectedElements.clearCache();
    touchTimeout = 0;
+    document.documentElement.style.overscrollBehaviorX = "";
  }

  private onResize = withBatchedUpdates(() => {
@@ -2591,10 +2604,10 @@ class App extends React.Component<AppProps, AppState> {

  componentDidUpdate(prevProps: AppProps, prevState: AppState) {
    this.updateEmbeddables();
-    if (
-      !this.state.showWelcomeScreen &&
-      !this.scene.getElementsIncludingDeleted().length
-    ) {
+    const elements = this.scene.getElementsIncludingDeleted();
+    const elementsMap = this.scene.getNonDeletedElementsMap();
+
+    if (!this.state.showWelcomeScreen && !elements.length) {
      this.setState({ showWelcomeScreen: true });
    }

@@ -2699,12 +2712,6 @@ class App extends React.Component<AppProps, AppState> {
      });
    }

-    if (this.props.name && prevProps.name !== this.props.name) {
-      this.setState({
-        name: this.props.name,
-      });
-    }
-
    this.excalidrawContainerRef.current?.classList.toggle(
      "theme--dark",
      this.state.theme === "dark",
@@ -2754,27 +2761,21 @@ class App extends React.Component<AppProps, AppState> {
          LinearElementEditor.getPointAtIndexGlobalCoordinates(
            multiElement,
            -1,
+            elementsMap,
          ),
        ),
+        elementsMap,
      );
    }
-    this.history.record(this.state, this.scene.getElementsIncludingDeleted());
+    this.history.record(this.state, elements);

    // Do not notify consumers if we're still loading the scene. Among other
    // potential issues, this fixes a case where the tab isn't focused during
    // init, which would trigger onChange with empty elements, which would then
    // override whatever is in localStorage currently.
    if (!this.state.isLoading) {
-      this.props.onChange?.(
-        this.scene.getElementsIncludingDeleted(),
-        this.state,
-        this.files,
-      );
-      this.onChangeEmitter.trigger(
-        this.scene.getElementsIncludingDeleted(),
-        this.state,
-        this.files,
-      );
+      this.props.onChange?.(elements, this.state, this.files);
+      this.onChangeEmitter.trigger(elements, this.state, this.files);
    }
  }

@@ -3124,7 +3125,11 @@ class App extends React.Component<AppProps, AppState> {
          newElement,
          this.scene.getElementsMapIncludingDeleted(),
        );
-        redrawTextBoundingBox(newElement, container);
+        redrawTextBoundingBox(
+          newElement,
+          container,
+          this.scene.getElementsMapIncludingDeleted(),
+        );
      }
    });

@@ -3207,7 +3212,13 @@ class App extends React.Component<AppProps, AppState> {
          try {
            return { file: await ImageURLToFile(url) };
          } catch (error: any) {
-            return { errorMessage: error.message as string };
+            let errorMessage = error.message;
+            if (error.cause === "FETCH_ERROR") {
+              errorMessage = t("errors.failedToFetchImage");
+            } else if (error.cause === "UNSUPPORTED") {
+              errorMessage = t("errors.unsupportedFileType");
+            }
+            return { errorMessage };
          }
        }),
      );
@@ -3834,7 +3845,7 @@ class App extends React.Component<AppProps, AppState> {
            y: element.y + offsetY,
          });

-          updateBoundElements(element, {
+          updateBoundElements(element, this.scene.getNonDeletedElementsMap(), {
            simultaneouslyUpdated: selectedElements,
          });
        });
@@ -3857,7 +3868,6 @@ class App extends React.Component<AppProps, AppState> {
                this.setState({
                  editingLinearElement: new LinearElementEditor(
                    selectedElement,
-                    this.scene,
                  ),
                });
              }
@@ -4008,9 +4018,14 @@ class App extends React.Component<AppProps, AppState> {
    }
    if (isArrowKey(event.key)) {
      const selectedElements = this.scene.getSelectedElements(this.state);
+      const elementsMap = this.scene.getNonDeletedElementsMap();
      isBindingEnabled(this.state)
-        ? bindOrUnbindSelectedElements(selectedElements)
-        : unbindLinearElements(selectedElements);
+        ? bindOrUnbindSelectedElements(
+            selectedElements,
+            this.scene.getNonDeletedElements(),
+            elementsMap,
+          )
+        : unbindLinearElements(selectedElements, elementsMap);
      this.setState({ suggestedBindings: [] });
    }
  });
@@ -4112,6 +4127,14 @@ class App extends React.Component<AppProps, AppState> {
    return gesture.pointers.size >= 2;
  };

+  public getName = () => {
+    return (
+      this.state.name ||
+      this.props.name ||
+      `${t("labels.untitled")}-${getDateTime()}`
+    );
+  };
+
  // fires only on Safari
  private onGestureStart = withBatchedUpdates((event: GestureEvent) => {
    event.preventDefault();
@@ -4183,20 +4206,21 @@ class App extends React.Component<AppProps, AppState> {
      isExistingElement?: boolean;
    },
  ) {
+    const elementsMap = this.scene.getElementsMapIncludingDeleted();
+
    const updateElement = (
      text: string,
      originalText: string,
      isDeleted: boolean,
    ) => {
      this.scene.replaceAllElements([
+        // Not sure why we include deleted elements as well hence using deleted elements map
        ...this.scene.getElementsIncludingDeleted().map((_element) => {
          if (_element.id === element.id && isTextElement(_element)) {
            return updateTextElement(
              _element,
-              getContainerElement(
-                _element,
-                this.scene.getElementsMapIncludingDeleted(),
-              ),
+              getContainerElement(_element, elementsMap),
+              elementsMap,
              {
                text,
                isDeleted,
@@ -4228,7 +4252,7 @@ class App extends React.Component<AppProps, AppState> {
      onChange: withBatchedUpdates((text) => {
        updateElement(text, text, false);
        if (isNonDeletedElement(element)) {
-          updateBoundElements(element);
+          updateBoundElements(element, elementsMap);
        }
      }),
      onSubmit: withBatchedUpdates(({ text, viaKeyboard, originalText }) => {
@@ -4367,6 +4391,7 @@ class App extends React.Component<AppProps, AppState> {
                  !(isTextElement(element) && element.containerId)),
            );

+    const elementsMap = this.scene.getNonDeletedElementsMap();
    return getElementsAtPosition(elements, (element) =>
      hitTest(
        element,
@@ -4374,15 +4399,15 @@ class App extends React.Component<AppProps, AppState> {
        this.frameNameBoundsCache,
        x,
        y,
-        this.scene.getNonDeletedElementsMap(),
+        elementsMap,
      ),
    ).filter((element) => {
      // hitting a frame's element from outside the frame is not considered a hit
-      const containingFrame = getContainingFrame(element);
+      const containingFrame = getContainingFrame(element, elementsMap);
      return containingFrame &&
        this.state.frameRendering.enabled &&
        this.state.frameRendering.clip
-        ? isCursorInFrame({ x, y }, containingFrame)
+        ? isCursorInFrame({ x, y }, containingFrame, elementsMap)
        : true;
    });
  }
@@ -4564,10 +4589,7 @@ class App extends React.Component<AppProps, AppState> {
      ) {
        this.history.resumeRecording();
        this.setState({
-          editingLinearElement: new LinearElementEditor(
-            selectedElements[0],
-            this.scene,
-          ),
+          editingLinearElement: new LinearElementEditor(selectedElements[0]),
        });
        return;
      } else if (
@@ -4627,6 +4649,7 @@ class App extends React.Component<AppProps, AppState> {
        this.state,
        sceneX,
        sceneY,
+        this.scene.getNonDeletedElementsMap(),
      );

      if (container) {
@@ -4638,6 +4661,7 @@ class App extends React.Component<AppProps, AppState> {
            this.state,
            this.frameNameBoundsCache,
            [sceneX, sceneY],
+            this.scene.getNonDeletedElementsMap(),
          )
        ) {
          const midPoint = getContainerCenter(
@@ -4678,6 +4702,7 @@ class App extends React.Component<AppProps, AppState> {
        index <= hitElementIndex &&
        isPointHittingLink(
          element,
+          this.scene.getNonDeletedElementsMap(),
          this.state,
          [scenePointer.x, scenePointer.y],
          this.device.editor.isMobile,
@@ -4708,8 +4733,10 @@ class App extends React.Component<AppProps, AppState> {
      this.lastPointerDownEvent!,
      this.state,
    );
+    const elementsMap = this.scene.getNonDeletedElementsMap();
    const lastPointerDownHittingLinkIcon = isPointHittingLink(
      this.hitLinkElement,
+      elementsMap,
      this.state,
      [lastPointerDownCoords.x, lastPointerDownCoords.y],
      this.device.editor.isMobile,
@@ -4720,6 +4747,7 @@ class App extends React.Component<AppProps, AppState> {
    );
    const lastPointerUpHittingLinkIcon = isPointHittingLink(
      this.hitLinkElement,
+      elementsMap,
      this.state,
      [lastPointerUpCoords.x, lastPointerUpCoords.y],
      this.device.editor.isMobile,
@@ -4756,10 +4784,11 @@ class App extends React.Component<AppProps, AppState> {
    x: number;
    y: number;
  }) => {
+    const elementsMap = this.scene.getNonDeletedElementsMap();
    const frames = this.scene
      .getNonDeletedFramesLikes()
      .filter((frame): frame is ExcalidrawFrameLikeElement =>
-        isCursorInFrame(sceneCoords, frame),
+        isCursorInFrame(sceneCoords, frame, elementsMap),
      );

    return frames.length ? frames[frames.length - 1] : null;
@@ -4863,6 +4892,7 @@ class App extends React.Component<AppProps, AppState> {
          y: scenePointerY,
        },
        event,
+        this.scene.getNonDeletedElementsMap(),
      );

      this.setState((prevState) => {
@@ -4902,6 +4932,7 @@ class App extends React.Component<AppProps, AppState> {
        scenePointerX,
        scenePointerY,
        this.state,
+        this.scene.getNonDeletedElementsMap(),
      );

      if (
@@ -5052,6 +5083,7 @@ class App extends React.Component<AppProps, AppState> {
        scenePointerY,
        this.state.zoom,
        event.pointerType,
+        this.scene.getNonDeletedElementsMap(),
      );
      if (
        elementWithTransformHandleType &&
@@ -5099,7 +5131,11 @@ class App extends React.Component<AppProps, AppState> {
      !this.state.selectedElementIds[this.hitLinkElement.id]
    ) {
      setCursor(this.interactiveCanvas, CURSOR_TYPE.POINTER);
-      showHyperlinkTooltip(this.hitLinkElement, this.state);
+      showHyperlinkTooltip(
+        this.hitLinkElement,
+        this.state,
+        this.scene.getNonDeletedElementsMap(),
+      );
    } else {
      hideHyperlinkToolip();
      if (
@@ -5277,10 +5313,12 @@ class App extends React.Component<AppProps, AppState> {
    scenePointerX: number,
    scenePointerY: number,
  ) {
+    const elementsMap = this.scene.getNonDeletedElementsMap();
+
    const element = LinearElementEditor.getElement(
      linearElementEditor.elementId,
+      elementsMap,
    );
-    const elementsMap = this.scene.getNonDeletedElementsMap();
    const boundTextElement = getBoundTextElement(element, elementsMap);

    if (!element) {
@@ -5295,10 +5333,12 @@ class App extends React.Component<AppProps, AppState> {
          this.state,
          this.frameNameBoundsCache,
          [scenePointerX, scenePointerY],
+          elementsMap,
        )
      ) {
        hoverPointIndex = LinearElementEditor.getPointIndexUnderCursor(
          element,
+          elementsMap,
          this.state.zoom,
          scenePointerX,
          scenePointerY,
@@ -5728,10 +5768,12 @@ class App extends React.Component<AppProps, AppState> {
      if (
        clicklength < 300 &&
        isIframeLikeElement(this.hitLinkElement) &&
-        !isPointHittingLinkIcon(this.hitLinkElement, this.state, [
-          scenePointer.x,
-          scenePointer.y,
-        ])
+        !isPointHittingLinkIcon(
+          this.hitLinkElement,
+          this.scene.getNonDeletedElementsMap(),
+          this.state,
+          [scenePointer.x, scenePointer.y],
+        )
      ) {
        this.handleEmbeddableCenterClick(this.hitLinkElement);
      } else {
@@ -6029,7 +6071,9 @@ class App extends React.Component<AppProps, AppState> {
  ): boolean => {
    if (this.state.activeTool.type === "selection") {
      const elements = this.scene.getNonDeletedElements();
+      const elementsMap = this.scene.getNonDeletedElementsMap();
      const selectedElements = this.scene.getSelectedElements(this.state);
+
      if (selectedElements.length === 1 && !this.state.editingLinearElement) {
        const elementWithTransformHandleType =
          getElementWithTransformHandleType(
@@ -6039,6 +6083,7 @@ class App extends React.Component<AppProps, AppState> {
            pointerDownState.origin.y,
            this.state.zoom,
            event.pointerType,
+            this.scene.getNonDeletedElementsMap(),
          );
        if (elementWithTransformHandleType != null) {
          this.setState({
@@ -6062,6 +6107,7 @@ class App extends React.Component<AppProps, AppState> {
          getResizeOffsetXY(
            pointerDownState.resize.handleType,
            selectedElements,
+            elementsMap,
            pointerDownState.origin.x,
            pointerDownState.origin.y,
          ),
@@ -6086,7 +6132,8 @@ class App extends React.Component<AppProps, AppState> {
            this.history,
            pointerDownState.origin,
            linearElementEditor,
-            this.scene.getNonDeletedElementsMap(),
+            this.scene.getNonDeletedElements(),
+            elementsMap,
          );
          if (ret.hitElement) {
            pointerDownState.hit.element = ret.hitElement;
@@ -6342,6 +6389,7 @@ class App extends React.Component<AppProps, AppState> {
      this.state,
      sceneX,
      sceneY,
+      this.scene.getNonDeletedElementsMap(),
    );

    if (hasBoundTextElement(element)) {
@@ -6422,7 +6470,8 @@ class App extends React.Component<AppProps, AppState> {

    const boundElement = getHoveredElementForBinding(
      pointerDownState.origin,
-      this.scene,
+      this.scene.getNonDeletedElements(),
+      this.scene.getNonDeletedElementsMap(),
    );
    this.scene.addNewElement(element);
    this.setState({
@@ -6690,7 +6739,8 @@ class App extends React.Component<AppProps, AppState> {
      });
      const boundElement = getHoveredElementForBinding(
        pointerDownState.origin,
-        this.scene,
+        this.scene.getNonDeletedElements(),
+        this.scene.getNonDeletedElementsMap(),
      );

      this.scene.addNewElement(element);
@@ -6836,6 +6886,7 @@ class App extends React.Component<AppProps, AppState> {
          this.scene.getNonDeletedElements(),
          selectedElements,
          this.state,
+          this.scene.getNonDeletedElementsMap(),
        ),
      );
    }
@@ -6859,6 +6910,7 @@ class App extends React.Component<AppProps, AppState> {
          this.scene.getNonDeletedElements(),
          selectedElements,
          this.state,
+          this.scene.getNonDeletedElementsMap(),
        ),
      );
    }
@@ -6958,6 +7010,7 @@ class App extends React.Component<AppProps, AppState> {
          return true;
        }
      }
+      const elementsMap = this.scene.getNonDeletedElementsMap();

      if (this.state.selectedLinearElement) {
        const linearElementEditor =
@@ -6968,6 +7021,7 @@ class App extends React.Component<AppProps, AppState> {
            this.state.selectedLinearElement,
            pointerCoords,
            this.state,
+            elementsMap,
          )
        ) {
          const ret = LinearElementEditor.addMidpoint(
@@ -6975,6 +7029,7 @@ class App extends React.Component<AppProps, AppState> {
            pointerCoords,
            this.state,
            !event[KEYS.CTRL_OR_CMD],
+            elementsMap,
          );
          if (!ret) {
            return;
@@ -7133,10 +7188,11 @@ class App extends React.Component<AppProps, AppState> {
          this.maybeCacheReferenceSnapPoints(event, selectedElements);

          const { snapOffset, snapLines } = snapDraggedElements(
-            getSelectedElements(originalElements, this.state),
+            originalElements,
            dragOffset,
            this.state,
            event,
+            this.scene.getNonDeletedElementsMap(),
          );

          this.setState({ snapLines });
@@ -7320,6 +7376,7 @@ class App extends React.Component<AppProps, AppState> {
            event,
            this.state,
            this.setState.bind(this),
+            this.scene.getNonDeletedElementsMap(),
          );
          // regular box-select
        } else {
@@ -7350,6 +7407,7 @@ class App extends React.Component<AppProps, AppState> {
          const elementsWithinSelection = getElementsWithinSelection(
            elements,
            draggingElement,
+            this.scene.getNonDeletedElementsMap(),
          );

          this.setState((prevState) => {
@@ -7392,10 +7450,7 @@ class App extends React.Component<AppProps, AppState> {
              selectedLinearElement:
                elementsWithinSelection.length === 1 &&
                isLinearElement(elementsWithinSelection[0])
-                  ? new LinearElementEditor(
-                      elementsWithinSelection[0],
-                      this.scene,
-                    )
+                  ? new LinearElementEditor(elementsWithinSelection[0])
                  : null,
              showHyperlinkPopup:
                elementsWithinSelection.length === 1 &&
@@ -7481,7 +7536,7 @@ class App extends React.Component<AppProps, AppState> {
      this.setState({
        selectedElementsAreBeingDragged: false,
      });
-
+      const elementsMap = this.scene.getNonDeletedElementsMap();
      // Handle end of dragging a point of a linear element, might close a loop
      // and sets binding element
      if (this.state.editingLinearElement) {
@@ -7496,6 +7551,8 @@ class App extends React.Component<AppProps, AppState> {
            childEvent,
            this.state.editingLinearElement,
            this.state,
+            this.scene.getNonDeletedElements(),
+            elementsMap,
          );
          if (editingLinearElement !== this.state.editingLinearElement) {
            this.setState({
@@ -7519,6 +7576,8 @@ class App extends React.Component<AppProps, AppState> {
            childEvent,
            this.state.selectedLinearElement,
            this.state,
+            this.scene.getNonDeletedElements(),
+            elementsMap,
          );

          const { startBindingElement, endBindingElement } =
@@ -7529,6 +7588,7 @@ class App extends React.Component<AppProps, AppState> {
              element,
              startBindingElement,
              endBindingElement,
+              elementsMap,
            );
          }

@@ -7668,6 +7728,7 @@ class App extends React.Component<AppProps, AppState> {
              this.state,
              this.scene,
              pointerCoords,
+              elementsMap,
            );
          }
          this.setState({ suggestedBindings: [], startBoundElement: null });
@@ -7685,10 +7746,7 @@ class App extends React.Component<AppProps, AppState> {
                },
                prevState,
              ),
-              selectedLinearElement: new LinearElementEditor(
-                draggingElement,
-                this.scene,
-              ),
+              selectedLinearElement: new LinearElementEditor(draggingElement),
            }));
          } else {
            this.setState((prevState) => ({
@@ -7735,10 +7793,16 @@ class App extends React.Component<AppProps, AppState> {
            );

            if (linearElement?.frameId) {
-              const frame = getContainingFrame(linearElement);
+              const frame = getContainingFrame(linearElement, elementsMap);

              if (frame && linearElement) {
-                if (!elementOverlapsWithFrame(linearElement, frame)) {
+                if (
+                  !elementOverlapsWithFrame(
+                    linearElement,
+                    frame,
+                    this.scene.getNonDeletedElementsMap(),
+                  )
+                ) {
                  // remove the linear element from all groups
                  // before removing it from the frame as well
                  mutateElement(linearElement, {
@@ -7849,6 +7913,7 @@ class App extends React.Component<AppProps, AppState> {
          const elementsInsideFrame = getElementsInNewFrame(
            this.scene.getElementsIncludingDeleted(),
            draggingElement,
+            this.scene.getNonDeletedElementsMap(),
          );

          this.scene.replaceAllElements(
@@ -7899,6 +7964,7 @@ class App extends React.Component<AppProps, AppState> {
              this.scene.getElementsIncludingDeleted(),
              frame,
              this.state,
+              elementsMap,
            ),
            frame,
            this,
@@ -7920,10 +7986,7 @@ class App extends React.Component<AppProps, AppState> {
        // the one we've hit
        if (selectedELements.length === 1) {
          this.setState({
-            selectedLinearElement: new LinearElementEditor(
-              hitElement,
-              this.scene,
-            ),
+            selectedLinearElement: new LinearElementEditor(hitElement),
          });
        }
      }
@@ -8036,10 +8099,7 @@ class App extends React.Component<AppProps, AppState> {
                  selectedLinearElement:
                    newSelectedElements.length === 1 &&
                    isLinearElement(newSelectedElements[0])
-                      ? new LinearElementEditor(
-                          newSelectedElements[0],
-                          this.scene,
-                        )
+                      ? new LinearElementEditor(newSelectedElements[0])
                      : prevState.selectedLinearElement,
                };
              });
@@ -8113,7 +8173,7 @@ class App extends React.Component<AppProps, AppState> {
              // Don't set `selectedLinearElement` if its same as the hitElement, this is mainly to prevent resetting the `hoverPointIndex` to -1.
              // Future we should update the API to take care of setting the correct `hoverPointIndex` when initialized
              prevState.selectedLinearElement?.elementId !== hitElement.id
-                ? new LinearElementEditor(hitElement, this.scene)
+                ? new LinearElementEditor(hitElement)
                : prevState.selectedLinearElement,
          }));
        }
@@ -8177,9 +8237,16 @@ class App extends React.Component<AppProps, AppState> {
      }

      if (pointerDownState.drag.hasOccurred || isResizing || isRotating) {
-        (isBindingEnabled(this.state)
-          ? bindOrUnbindSelectedElements
-          : unbindLinearElements)(this.scene.getSelectedElements(this.state));
+        isBindingEnabled(this.state)
+          ? bindOrUnbindSelectedElements(
+              this.scene.getSelectedElements(this.state),
+              this.scene.getNonDeletedElements(),
+              elementsMap,
+            )
+          : unbindLinearElements(
+              this.scene.getSelectedElements(this.state),
+              elementsMap,
+            );
      }

      if (activeTool.type === "laser") {
@@ -8415,10 +8482,18 @@ class App extends React.Component<AppProps, AppState> {
    // mustn't be larger than 128 px
    // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property
    const cursorImageSizePx = 96;
+    let imagePreview;

-    const imagePreview = await resizeImageFile(imageFile, {
-      maxWidthOrHeight: cursorImageSizePx,
-    });
+    try {
+      imagePreview = await resizeImageFile(imageFile, {
+        maxWidthOrHeight: cursorImageSizePx,
+      });
+    } catch (e: any) {
+      if (e.cause === "UNSUPPORTED") {
+        throw new Error(t("errors.unsupportedFileType"));
+      }
+      throw e;
+    }

    let previewDataURL = await getDataURL(imagePreview);

@@ -8656,7 +8731,8 @@ class App extends React.Component<AppProps, AppState> {
  }): void => {
    const hoveredBindableElement = getHoveredElementForBinding(
      pointerCoords,
-      this.scene,
+      this.scene.getNonDeletedElements(),
+      this.scene.getNonDeletedElementsMap(),
    );
    this.setState({
      suggestedBindings:
@@ -8683,7 +8759,8 @@ class App extends React.Component<AppProps, AppState> {
      (acc: NonDeleted<ExcalidrawBindableElement>[], coords) => {
        const hoveredBindableElement = getHoveredElementForBinding(
          coords,
-          this.scene,
+          this.scene.getNonDeletedElements(),
+          this.scene.getNonDeletedElementsMap(),
        );
        if (
          hoveredBindableElement != null &&
@@ -8709,7 +8786,11 @@ class App extends React.Component<AppProps, AppState> {
    if (selectedElements.length > 50) {
      return;
    }
-    const suggestedBindings = getEligibleElementsForBinding(selectedElements);
+    const suggestedBindings = getEligibleElementsForBinding(
+      selectedElements,
+      this.scene.getNonDeletedElements(),
+      this.scene.getNonDeletedElementsMap(),
+    );
    this.setState({ suggestedBindings });
  }

@@ -8801,8 +8882,9 @@ class App extends React.Component<AppProps, AppState> {
            });
            return;
          } catch (error: any) {
+            // Don't throw for image scene daa
            if (error.name !== "EncodingError") {
-              throw error;
+              throw new Error(t("alerts.couldNotLoadInvalidFile"));
            }
          }
        }
@@ -8876,12 +8958,39 @@ class App extends React.Component<AppProps, AppState> {
  ) => {
    file = await normalizeFile(file);
    try {
-      const ret = await loadSceneOrLibraryFromBlob(
-        file,
-        this.state,
-        this.scene.getElementsIncludingDeleted(),
-        fileHandle,
-      );
+      let ret;
+      try {
+        ret = await loadSceneOrLibraryFromBlob(
+          file,
+          this.state,
+          this.scene.getElementsIncludingDeleted(),
+          fileHandle,
+        );
+      } catch (error: any) {
+        const imageSceneDataError = error instanceof ImageSceneDataError;
+        if (
+          imageSceneDataError &&
+          error.code === "IMAGE_NOT_CONTAINS_SCENE_DATA" &&
+          !this.isToolSupported("image")
+        ) {
+          this.setState({
+            isLoading: false,
+            errorMessage: t("errors.imageToolNotSupported"),
+          });
+          return;
+        }
+        const errorMessage = imageSceneDataError
+          ? t("alerts.cannotRestoreFromImage")
+          : t("alerts.couldNotLoadInvalidFile");
+        this.setState({
+          isLoading: false,
+          errorMessage,
+        });
+      }
+      if (!ret) {
+        return;
+      }
+
      if (ret.type === MIME_TYPES.excalidraw) {
        this.setState({ isLoading: true });
        this.syncActionResult({
@@ -8906,17 +9015,6 @@ class App extends React.Component<AppProps, AppState> {
          });
      }
    } catch (error: any) {
-      if (
-        error instanceof ImageSceneDataError &&
-        error.code === "IMAGE_NOT_CONTAINS_SCENE_DATA" &&
-        !this.isToolSupported("image")
-      ) {
-        this.setState({
-          isLoading: false,
-          errorMessage: t("errors.imageToolNotSupported"),
-        });
-        return;
-      }
      this.setState({ isLoading: false, errorMessage: error.message });
    }
  };
@@ -8976,7 +9074,7 @@ class App extends React.Component<AppProps, AppState> {
                this,
              ),
              selectedLinearElement: isLinearElement(element)
-                ? new LinearElementEditor(element, this.scene)
+                ? new LinearElementEditor(element)
                : null,
            }
          : this.state),
@@ -9048,6 +9146,7 @@ class App extends React.Component<AppProps, AppState> {
          x: gridX - pointerDownState.originInGrid.x,
          y: gridY - pointerDownState.originInGrid.y,
        },
+        this.scene.getNonDeletedElementsMap(),
      );

      gridX += snapOffset.x;
@@ -9086,6 +9185,7 @@ class App extends React.Component<AppProps, AppState> {
            this.scene.getNonDeletedElements(),
            draggingElement as ExcalidrawFrameLikeElement,
            this.state,
+            this.scene.getNonDeletedElementsMap(),
          ),
        });
      }
@@ -9205,6 +9305,7 @@ class App extends React.Component<AppProps, AppState> {
          this.scene.getNonDeletedElements(),
          frame,
          this.state,
+          this.scene.getNonDeletedElementsMap(),
        ).forEach((element) => elementsToHighlight.add(element));
      });

@@ -9501,7 +9602,6 @@ class App extends React.Component<AppProps, AppState> {
 // -----------------------------------------------------------------------------
 // TEST HOOKS
 // -----------------------------------------------------------------------------
-
 declare global {
  interface Window {
    h: {
@@ -9514,20 +9614,23 @@ declare global {
  }
 }

-if (import.meta.env.MODE === ENV.TEST || import.meta.env.DEV) {
-  window.h = window.h || ({} as Window["h"]);
+export const createTestHook = () => {
+  if (import.meta.env.MODE === ENV.TEST || import.meta.env.DEV) {
+    window.h = window.h || ({} as Window["h"]);

-  Object.defineProperties(window.h, {
-    elements: {
-      configurable: true,
-      get() {
-        return this.app?.scene.getElementsIncludingDeleted();
+    Object.defineProperties(window.h, {
+      elements: {
+        configurable: true,
+        get() {
+          return this.app?.scene.getElementsIncludingDeleted();
+        },
+        set(elements: ExcalidrawElement[]) {
+          return this.app?.scene.replaceAllElements(elements);
+        },
      },
-      set(elements: ExcalidrawElement[]) {
-        return this.app?.scene.replaceAllElements(elements);
-      },
-    },
-  });
-}
+    });
+  }
+};

+createTestHook();
 export default App;
@@ -9,8 +9,7 @@ type AvatarProps = {
  color: string;
  name: string;
  src?: string;
-  isBeingFollowed?: boolean;
-  isCurrentUser: boolean;
+  className?: string;
 };

 export const Avatar = ({
@@ -18,22 +17,14 @@ export const Avatar = ({
  onClick,
  name,
  src,
-  isBeingFollowed,
-  isCurrentUser,
+  className,
 }: AvatarProps) => {
  const shortName = getNameInitial(name);
  const [error, setError] = useState(false);
  const loadImg = !error && src;
  const style = loadImg ? undefined : { background: color };
  return (
-    <div
-      className={clsx("Avatar", {
-        "Avatar--is-followed": isBeingFollowed,
-        "Avatar--is-current-user": isCurrentUser,
-      })}
-      style={style}
-      onClick={onClick}
-    >
+    <div className={clsx("Avatar", className)} style={style} onClick={onClick}>
      {loadImg ? (
        <img
          className="Avatar-img"
@@ -1,4 +1,5 @@
 import clsx from "clsx";
+import React from "react";
 import { composeEventHandlers } from "../utils";
 import "./Button.scss";

@@ -10,11 +10,40 @@
    background-color: var(--back-color);
    border-color: var(--border-color);

+    .Spinner {
+      --spinner-color: var(--color-surface-lowest);
+      position: absolute;
+      visibility: visible;
+    }
+
+    &[disabled] {
+      pointer-events: none;
+
+      .ExcButton__contents {
+        visibility: hidden;
+      }
+    }
+
+    &,
+    &__contents {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-shrink: 0;
+      flex-wrap: nowrap;
+      // needed because of .Spinner
+      position: relative;
+    }
+
    &--color-primary {
      &.ExcButton--variant-filled {
        --text-color: var(--color-surface-lowest);
        --back-color: var(--color-primary);

+        .Spinner {
+          --spinner-color: var(--text-color);
+        }
+
        &:hover {
          --back-color: var(--color-brand-hover);
        }
@@ -27,9 +56,13 @@
      &.ExcButton--variant-outlined,
      &.ExcButton--variant-icon {
        --text-color: var(--color-primary);
-        --border-color: var(--color-border-outline);
+        --border-color: var(--color-primary);
        --back-color: transparent;

+        .Spinner {
+          --spinner-color: var(--text-color);
+        }
+
        &:hover {
          --text-color: var(--color-brand-hover);
          --border-color: var(--color-brand-hover);
@@ -47,6 +80,10 @@
        --text-color: var(--color-danger-text);
        --back-color: var(--color-danger-dark);

+        .Spinner {
+          --spinner-color: var(--text-color);
+        }
+
        &:hover {
          --back-color: var(--color-danger-darker);
        }
@@ -62,6 +99,10 @@
        --border-color: var(--color-danger);
        --back-color: transparent;

+        .Spinner {
+          --spinner-color: var(--text-color);
+        }
+
        &:hover {
          --text-color: var(--color-danger-darkest);
          --border-color: var(--color-danger-darkest);
@@ -79,6 +120,10 @@
        --text-color: var(--island-bg-color);
        --back-color: var(--color-gray-50);

+        .Spinner {
+          --spinner-color: var(--text-color);
+        }
+
        &:hover {
          --back-color: var(--color-gray-60);
        }
@@ -94,6 +139,10 @@
        --border-color: var(--color-muted);
        --back-color: var(--island-bg-color);

+        .Spinner {
+          --spinner-color: var(--text-color);
+        }
+
        &:hover {
          --text-color: var(--color-muted-background-darker);
          --border-color: var(--color-muted-darker);
@@ -111,6 +160,10 @@
        --text-color: black;
        --back-color: var(--color-warning-dark);

+        .Spinner {
+          --spinner-color: var(--text-color);
+        }
+
        &:hover {
          --back-color: var(--color-warning-darker);
        }
@@ -126,6 +179,10 @@
        --border-color: var(--color-warning-dark);
        --back-color: var(--input-bg-color);

+        .Spinner {
+          --spinner-color: var(--text-color);
+        }
+
        &:hover {
          --text-color: var(--color-warning-darker);
          --border-color: var(--color-warning-darker);
@@ -138,17 +195,11 @@
      }
    }

-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-shrink: 0;
-    flex-wrap: nowrap;
-
    border-radius: 0.5rem;
    border-width: 1px;
    border-style: solid;

-    font-family: "Assistant";
+    font-family: var(--font-family);

    user-select: none;

@@ -159,9 +210,12 @@
      font-size: 0.875rem;
      min-height: 3rem;
      padding: 0.5rem 1.5rem;
-      gap: 0.75rem;

      letter-spacing: 0.4px;
+
+      .ExcButton__contents {
+        gap: 0.75rem;
+      }
    }

    &--size-medium {
@@ -169,9 +223,12 @@
      font-size: 0.75rem;
      min-height: 2.5rem;
      padding: 0.5rem 1rem;
-      gap: 0.5rem;

      letter-spacing: normal;
+
+      .ExcButton__contents {
+        gap: 0.5rem;
+      }
    }

    &--variant-icon {
@@ -1,7 +1,10 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useState } from "react";
 import clsx from "clsx";

 import "./FilledButton.scss";
+import { AbortError } from "../errors";
+import Spinner from "./Spinner";
+import { isPromiseLike } from "../utils";

 export type ButtonVariant = "filled" | "outlined" | "icon";
 export type ButtonColor = "primary" | "danger" | "warning" | "muted";
@@ -11,7 +14,7 @@ export type FilledButtonProps = {
  label: string;

  children?: React.ReactNode;
-  onClick?: () => void;
+  onClick?: (event: React.MouseEvent) => void;

  variant?: ButtonVariant;
  color?: ButtonColor;
@@ -19,14 +22,14 @@ export type FilledButtonProps = {
  className?: string;
  fullWidth?: boolean;

-  startIcon?: React.ReactNode;
+  icon?: React.ReactNode;
 };

 export const FilledButton = forwardRef<HTMLButtonElement, FilledButtonProps>(
  (
    {
      children,
-      startIcon,
+      icon,
      onClick,
      label,
      variant = "filled",
@@ -37,6 +40,27 @@ export const FilledButton = forwardRef<HTMLButtonElement, FilledButtonProps>(
    },
    ref,
  ) => {
+    const [isLoading, setIsLoading] = useState(false);
+
+    const _onClick = async (event: React.MouseEvent) => {
+      const ret = onClick?.(event);
+
+      if (isPromiseLike(ret)) {
+        try {
+          setIsLoading(true);
+          await ret;
+        } catch (error: any) {
+          if (!(error instanceof AbortError)) {
+            throw error;
+          } else {
+            console.warn(error);
+          }
+        } finally {
+          setIsLoading(false);
+        }
+      }
+    };
+
    return (
      <button
        className={clsx(
@@ -47,17 +71,21 @@ export const FilledButton = forwardRef<HTMLButtonElement, FilledButtonProps>(
          { "ExcButton--fullWidth": fullWidth },
          className,
        )}
-        onClick={onClick}
+        onClick={_onClick}
        type="button"
        aria-label={label}
        ref={ref}
+        disabled={isLoading}
      >
-        {startIcon && (
-          <div className="ExcButton__icon" aria-hidden>
-            {startIcon}
-          </div>
-        )}
-        {variant !== "icon" && (children ?? label)}
+        <div className="ExcButton__contents">
+          {isLoading && <Spinner />}
+          {icon && (
+            <div className="ExcButton__icon" aria-hidden>
+              {icon}
+            </div>
+          )}
+          {variant !== "icon" && (children ?? label)}
+        </div>
      </button>
    );
  },
@@ -12,6 +12,8 @@
    flex-direction: row;
    justify-content: space-between;

+    user-select: none;
+
    & h3 {
      font-family: "Assistant";
      font-style: normal;
@@ -32,7 +32,6 @@ import { Switch } from "./Switch";
 import { Tooltip } from "./Tooltip";

 import "./ImageExportDialog.scss";
-import { useAppProps } from "./App";
 import { FilledButton } from "./FilledButton";
 import { cloneJSON } from "../utils";
 import { prepareElementsForExport } from "../data";
@@ -58,6 +57,7 @@ type ImageExportModalProps = {
  files: BinaryFiles;
  actionManager: ActionManager;
  onExportImage: AppClassProperties["onExportImage"];
+  name: string;
 };

 const ImageExportModal = ({
@@ -66,14 +66,14 @@ const ImageExportModal = ({
  files,
  actionManager,
  onExportImage,
+  name,
 }: ImageExportModalProps) => {
  const hasSelection = isSomeElementSelected(
    elementsSnapshot,
    appStateSnapshot,
  );

-  const appProps = useAppProps();
-  const [projectName, setProjectName] = useState(appStateSnapshot.name);
+  const [projectName, setProjectName] = useState(name);
  const [exportSelectionOnly, setExportSelectionOnly] = useState(hasSelection);
  const [exportWithBackground, setExportWithBackground] = useState(
    appStateSnapshot.exportBackground,
@@ -124,9 +124,16 @@ const ImageExportModal = ({
        setRenderError(null);
        // if converting to blob fails, there's some problem that will
        // likely prevent preview and export (e.g. canvas too big)
-        return canvasToBlob(canvas).then(() => {
-          previewNode.replaceChildren(canvas);
-        });
+        return canvasToBlob(canvas)
+          .then(() => {
+            previewNode.replaceChildren(canvas);
+          })
+          .catch((e) => {
+            if (e.name === "CANVAS_POSSIBLY_TOO_BIG") {
+              throw new Error(t("canvasError.canvasTooBig"));
+            }
+            throw e;
+          });
      })
      .catch((error) => {
        console.error(error);
@@ -158,10 +165,6 @@ const ImageExportModal = ({
              className="TextInput"
              value={projectName}
              style={{ width: "30ch" }}
-              disabled={
-                typeof appProps.name !== "undefined" ||
-                appStateSnapshot.viewModeEnabled
-              }
              onChange={(event) => {
                setProjectName(event.target.value);
                actionManager.executeAction(
@@ -271,7 +274,7 @@ const ImageExportModal = ({
                exportingFrame,
              })
            }
-            startIcon={downloadIcon}
+            icon={downloadIcon}
          >
            {t("imageExportDialog.button.exportToPng")}
          </FilledButton>
@@ -283,7 +286,7 @@ const ImageExportModal = ({
                exportingFrame,
              })
            }
-            startIcon={downloadIcon}
+            icon={downloadIcon}
          >
            {t("imageExportDialog.button.exportToSvg")}
          </FilledButton>
@@ -296,7 +299,7 @@ const ImageExportModal = ({
                  exportingFrame,
                })
              }
-              startIcon={copyIcon}
+              icon={copyIcon}
            >
              {t("imageExportDialog.button.copyPngToClipboard")}
            </FilledButton>
@@ -347,6 +350,7 @@ export const ImageExportDialog = ({
  actionManager,
  onExportImage,
  onCloseRequest,
+  name,
 }: {
  appState: UIAppState;
  elements: readonly NonDeletedExcalidrawElement[];
@@ -354,6 +358,7 @@ export const ImageExportDialog = ({
  actionManager: ActionManager;
  onExportImage: AppClassProperties["onExportImage"];
  onCloseRequest: () => void;
+  name: string;
 }) => {
  // we need to take a snapshot so that the exported state can't be modified
  // while the dialog is open
@@ -372,6 +377,7 @@ export const ImageExportDialog = ({
        files={files}
        actionManager={actionManager}
        onExportImage={onExportImage}
+        name={name}
      />
    </Dialog>
  );
@@ -78,7 +78,7 @@ const JSONExportModal = ({
              onClick={async () => {
                try {
                  trackEvent("export", "link", `ui (${getFrame()})`);
-                  await onExportToBackend(elements, appState, files, canvas);
+                  await onExportToBackend(elements, appState, files);
                  onCloseRequest();
                } catch (error: any) {
                  setAppState({ errorMessage: error.message });
@@ -19,7 +19,14 @@

    &__top-right {
      display: flex;
+      width: 100%;
+      justify-content: flex-end;
      gap: 0.75rem;
+      pointer-events: none !important;
+
+      & > * {
+        pointer-events: var(--ui-pointerEvents);
+      }
    }

    &__footer {
@@ -195,6 +195,7 @@ const LayerUI = ({
        actionManager={actionManager}
        onExportImage={onExportImage}
        onCloseRequest={() => setAppState({ openDialog: null })}
+        name={app.getName()}
      />
    );
  };
@@ -11,7 +11,6 @@ type Props = {
  value: string;
  onChange: (value: string) => void;
  label: string;
-  isNameEditable: boolean;
  ignoreFocus?: boolean;
 };

@@ -42,23 +41,17 @@ export const ProjectName = (props: Props) => {
  return (
    <div className="ProjectName">
      <label className="ProjectName-label" htmlFor="filename">
-        {`${props.label}${props.isNameEditable ? "" : ":"}`}
+        {`${props.label}:`}
      </label>
-      {props.isNameEditable ? (
-        <input
-          type="text"
-          className="TextInput"
-          onBlur={handleBlur}
-          onKeyDown={handleKeyDown}
-          id={`${id}-filename`}
-          value={fileName}
-          onChange={(event) => setFileName(event.target.value)}
-        />
-      ) : (
-        <span className="TextInput TextInput--readonly" id={`${id}-filename`}>
-          {props.value}
-        </span>
-      )}
+      <input
+        type="text"
+        className="TextInput"
+        onBlur={handleBlur}
+        onKeyDown={handleKeyDown}
+        id={`${id}-filename`}
+        value={fileName}
+        onChange={(event) => setFileName(event.target.value)}
+      />
    </div>
  );
 };
@@ -22,7 +22,7 @@
    }

    &__popover {
-      @keyframes RoomDialog__popover__scaleIn {
+      @keyframes ShareableLinkDialog__popover__scaleIn {
        from {
          opacity: 0;
        }
@@ -61,7 +61,7 @@
      }

      transform-origin: var(--radix-popover-content-transform-origin);
-      animation: RoomDialog__popover__scaleIn 150ms ease-out;
+      animation: ShareableLinkDialog__popover__scaleIn 150ms ease-out;
    }

    &__linkRow {
@@ -31,19 +31,18 @@ export const ShareableLinkDialog = ({
  const copyRoomLink = async () => {
    try {
      await copyTextToSystemClipboard(link);
-
-      setJustCopied(true);
-
-      if (timerRef.current) {
-        window.clearTimeout(timerRef.current);
-      }
-
-      timerRef.current = window.setTimeout(() => {
-        setJustCopied(false);
-      }, 3000);
-    } catch (error: any) {
-      setErrorMessage(error.message);
+    } catch (e) {
+      setErrorMessage(t("errors.copyToSystemClipboardFailed"));
    }
+    setJustCopied(true);
+
+    if (timerRef.current) {
+      window.clearTimeout(timerRef.current);
+    }
+
+    timerRef.current = window.setTimeout(() => {
+      setJustCopied(false);
+    }, 3000);

    ref.current?.select();
  };
@@ -66,7 +65,7 @@ export const ShareableLinkDialog = ({
              <FilledButton
                size="large"
                label="Copy link"
-                startIcon={copyIcon}
+                icon={copyIcon}
                onClick={copyRoomLink}
              />
            </Popover.Trigger>
@@ -10,6 +10,7 @@ import { NonDeletedExcalidrawElement } from "../../element/types";
 import { AppClassProperties, BinaryFiles } from "../../types";
 import { canvasToBlob } from "../../data/blob";
 import { EditorLocalStorage } from "../../data/EditorLocalStorage";
+import { t } from "../../i18n";

 const resetPreview = ({
  canvasRef,
@@ -108,7 +109,14 @@ export const convertMermaidToExcalidraw = async ({
    });
    // if converting to blob fails, there's some problem that will
    // likely prevent preview and export (e.g. canvas too big)
-    await canvasToBlob(canvas);
+    try {
+      await canvasToBlob(canvas);
+    } catch (e: any) {
+      if (e.name === "CANVAS_POSSIBLY_TOO_BIG") {
+        throw new Error(t("canvasError.canvasTooBig"));
+      }
+      throw e;
+    }
    parent.style.background = "var(--default-bg-color)";
    canvasNode.replaceChildren(canvas);
  } catch (err: any) {
@@ -13,8 +13,6 @@ import { Button } from "./Button";
 import { eyeIcon, eyeClosedIcon } from "./icons";

 type TextFieldProps = {
-  value?: string;
-
  onChange?: (value: string) => void;
  onClick?: () => void;
  onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
@@ -26,12 +24,11 @@ type TextFieldProps = {
  label?: string;
  placeholder?: string;
  isRedacted?: boolean;
-};
+} & ({ value: string } | { defaultValue: string });

 export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
  (
    {
-      value,
      onChange,
      label,
      fullWidth,
@@ -40,6 +37,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
      selectOnRender,
      onKeyDown,
      isRedacted = false,
+      ...rest
    },
    ref,
  ) => {
@@ -73,10 +71,17 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
        >
          <input
            className={clsx({
-              "is-redacted": value && isRedacted && !isTemporarilyUnredacted,
+              "is-redacted":
+                "value" in rest &&
+                rest.value &&
+                isRedacted &&
+                !isTemporarilyUnredacted,
            })}
            readOnly={readonly}
-            value={value}
+            value={"value" in rest ? rest.value : undefined}
+            defaultValue={
+              "defaultValue" in rest ? rest.defaultValue : undefined
+            }
            placeholder={placeholder}
            ref={innerRef}
            onChange={(event) => onChange?.(event.target.value)}
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from "react";
+import { CSSProperties, useCallback, useEffect, useRef } from "react";
 import { CloseIcon } from "./icons";
 import "./Toast.scss";
 import { ToolButton } from "./ToolButton";
@@ -11,11 +11,13 @@ export const Toast = ({
  closable = false,
  // To prevent autoclose, pass duration as Infinity
  duration = DEFAULT_TOAST_TIMEOUT,
+  style,
 }: {
  message: string;
  onClose: () => void;
  closable?: boolean;
  duration?: number;
+  style?: CSSProperties;
 }) => {
  const timerRef = useRef<number>(0);
  const shouldAutoClose = duration !== Infinity;
@@ -43,6 +45,7 @@ export const Toast = ({
      className="Toast"
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
+      style={style}
    >
      <p className="Toast__message">{message}</p>
      {closable && (
@@ -6,6 +6,7 @@ import { useExcalidrawContainer } from "./App";
 import { AbortError } from "../errors";
 import Spinner from "./Spinner";
 import { PointerType } from "../element/types";
+import { isPromiseLike } from "../utils";

 export type ToolButtonSize = "small" | "medium";

@@ -65,7 +66,7 @@ export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {
  const onClick = async (event: React.MouseEvent) => {
    const ret = "onClick" in props && props.onClick?.(event);

-    if (ret && "then" in ret) {
+    if (isPromiseLike(ret)) {
      try {
        setIsLoading(true);
        await ret;
@@ -1,16 +1,25 @@
@import "../css/variables.module";

 .excalidraw {
+  --avatar-size: 1.75rem;
+  --avatarList-gap: 0.625rem;
+  --userList-padding: var(--space-factor);
+
+  .UserList-wrapper {
+    display: flex;
+    width: 100%;
+    justify-content: flex-end;
+    pointer-events: none !important;
+  }
+
  .UserList {
    pointer-events: none;
-    /*github corner*/
-    padding: var(--space-factor) var(--space-factor) var(--space-factor)
-      var(--space-factor);
+    padding: var(--userList-padding);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
-    gap: 0.625rem;
+    gap: var(--avatarList-gap);

    &:empty {
      display: none;
@@ -18,15 +27,16 @@

    box-sizing: border-box;

-    // can fit max 4 avatars (3 avatars + show more) in a column
-    max-height: 120px;
+    --max-size: calc(
+      var(--avatar-size) * var(--max-avatars, 2) + var(--avatarList-gap) *
+        (var(--max-avatars, 2) - 1) + var(--userList-padding) * 2
+    );

-    // can fit max 4 avatars (3 avatars + show more) when there's enough space
-    max-width: 120px;
+    // max width & height set to fix the max-avatars
+    max-height: var(--max-size);
+    max-width: var(--max-size);

    // Tweak in 30px increments to fit more/fewer avatars in a row/column ^^
-
-    overflow: hidden;
  }

  .UserList > * {
@@ -45,10 +55,11 @@
    @include avatarStyles;
    background-color: var(--color-gray-20);
    border: 0 !important;
-    font-size: 0.5rem;
+    font-size: 0.625rem;
    font-weight: 400;
    flex-shrink: 0;
    color: var(--color-gray-100);
+    font-weight: bold;
  }

  .UserList__collaborator-name {
@@ -57,13 +68,82 @@
    white-space: nowrap;
  }

-  .UserList__collaborator-follow-status-icon {
+  .UserList__collaborator--avatar-only {
+    position: relative;
+    display: flex;
+    flex: 0 0 auto;
+    .UserList__collaborator-status-icon {
+      --size: 14px;
+      position: absolute;
+      display: flex;
+      flex: 0 0 auto;
+      bottom: -0.25rem;
+      right: -0.25rem;
+      width: var(--size);
+      height: var(--size);
+      svg {
+        flex: 0 0 auto;
+        width: var(--size);
+        height: var(--size);
+      }
+    }
+  }
+
+  .UserList__collaborator-status-icons {
    margin-left: auto;
    flex: 0 0 auto;
-    width: 1rem;
+    min-width: 2.25rem;
+    gap: 0.25rem;
+    justify-content: flex-end;
    display: flex;
  }

+  .UserList__collaborator.is-muted
+    .UserList__collaborator-status-icon-microphone-muted {
+    color: var(--color-danger);
+    filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.5));
+  }
+
+  .UserList__collaborator-status-icon-speaking-indicator {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: space-between;
+    width: 1rem;
+    padding: 0 3px;
+    box-sizing: border-box;
+
+    div {
+      width: 0.125rem;
+      height: 0.4rem;
+      // keep this in sync with constants.ts
+      background-color: #a2f1a6;
+    }
+
+    div:nth-of-type(1) {
+      animation: speaking-indicator-anim 1s -0.45s ease-in-out infinite;
+    }
+
+    div:nth-of-type(2) {
+      animation: speaking-indicator-anim 1s -0.9s ease-in-out infinite;
+    }
+
+    div:nth-of-type(3) {
+      animation: speaking-indicator-anim 1s -0.15s ease-in-out infinite;
+    }
+  }
+
+  @keyframes speaking-indicator-anim {
+    0%,
+    100% {
+      transform: scaleY(1);
+    }
+
+    50% {
+      transform: scaleY(2);
+    }
+  }
+
  --userlist-hint-bg-color: var(--color-gray-10);
  --userlist-hint-heading-color: var(--color-gray-80);
  --userlist-hint-text-color: var(--color-gray-60);
@@ -80,7 +160,7 @@
    position: static;
    top: auto;
    margin-top: 0;
-    max-height: 12rem;
+    max-height: 50vh;
    overflow-y: auto;
    padding: 0.25rem 0.5rem;
    border-top: 1px solid var(--userlist-collaborators-border-color);
@@ -1,6 +1,6 @@
 import "./UserList.scss";

-import React from "react";
+import React, { useLayoutEffect } from "react";
 import clsx from "clsx";
 import { Collaborator, SocketId } from "../types";
 import { Tooltip } from "./Tooltip";
@@ -12,9 +12,11 @@ import { Island } from "./Island";
 import { searchIcon } from "./icons";
 import { t } from "../i18n";
 import { isShallowEqual } from "../utils";
+import { supportsResizeObserver } from "../constants";
+import { MarkRequired } from "../utility-types";

 export type GoToCollaboratorComponentProps = {
-  clientId: ClientId;
+  socketId: SocketId;
  collaborator: Collaborator;
  withName: boolean;
  isBeingFollowed: boolean;
@@ -23,45 +25,41 @@ export type GoToCollaboratorComponentProps = {
 /** collaborator user id or socket id (fallback) */
 type ClientId = string & { _brand: "UserId" };

-const FIRST_N_AVATARS = 3;
+const DEFAULT_MAX_AVATARS = 4;
 const SHOW_COLLABORATORS_FILTER_AT = 8;

 const ConditionalTooltipWrapper = ({
  shouldWrap,
  children,
-  clientId,
  username,
 }: {
  shouldWrap: boolean;
  children: React.ReactNode;
  username?: string | null;
-  clientId: ClientId;
 }) =>
  shouldWrap ? (
-    <Tooltip label={username || "Unknown user"} key={clientId}>
-      {children}
-    </Tooltip>
+    <Tooltip label={username || "Unknown user"}>{children}</Tooltip>
  ) : (
-    <React.Fragment key={clientId}>{children}</React.Fragment>
+    <React.Fragment>{children}</React.Fragment>
  );

 const renderCollaborator = ({
  actionManager,
  collaborator,
-  clientId,
+  socketId,
  withName = false,
  shouldWrapWithTooltip = false,
  isBeingFollowed,
 }: {
  actionManager: ActionManager;
  collaborator: Collaborator;
-  clientId: ClientId;
+  socketId: SocketId;
  withName?: boolean;
  shouldWrapWithTooltip?: boolean;
  isBeingFollowed: boolean;
 }) => {
  const data: GoToCollaboratorComponentProps = {
-    clientId,
+    socketId,
    collaborator,
    withName,
    isBeingFollowed,
@@ -70,8 +68,7 @@ const renderCollaborator = ({

  return (
    <ConditionalTooltipWrapper
-      key={clientId}
-      clientId={clientId}
+      key={socketId}
      username={collaborator.username}
      shouldWrap={shouldWrapWithTooltip}
    >
@@ -82,7 +79,13 @@ const renderCollaborator = ({

 type UserListUserObject = Pick<
  Collaborator,
-  "avatarUrl" | "id" | "socketId" | "username"
+  | "avatarUrl"
+  | "id"
+  | "socketId"
+  | "username"
+  | "isInCall"
+  | "isSpeaking"
+  | "isMuted"
 >;

 type UserListProps = {
@@ -97,13 +100,19 @@ const collaboratorComparatorKeys = [
  "id",
  "socketId",
  "username",
+  "isInCall",
+  "isSpeaking",
+  "isMuted",
 ] as const;

 export const UserList = React.memo(
  ({ className, mobile, collaborators, userToFollow }: UserListProps) => {
    const actionManager = useExcalidrawActionManager();

-    const uniqueCollaboratorsMap = new Map<ClientId, Collaborator>();
+    const uniqueCollaboratorsMap = new Map<
+      ClientId,
+      MarkRequired<Collaborator, "socketId">
+    >();

    collaborators.forEach((collaborator, socketId) => {
      const userId = (collaborator.id || socketId) as ClientId;
@@ -114,115 +123,147 @@ export const UserList = React.memo(
      );
    });

-    const uniqueCollaboratorsArray = Array.from(uniqueCollaboratorsMap).filter(
-      ([_, collaborator]) => collaborator.username?.trim(),
-    );
+    const uniqueCollaboratorsArray = Array.from(
+      uniqueCollaboratorsMap.values(),
+    ).filter((collaborator) => collaborator.username?.trim());

    const [searchTerm, setSearchTerm] = React.useState("");

-    if (uniqueCollaboratorsArray.length === 0) {
-      return null;
-    }
+    const userListWrapper = React.useRef<HTMLDivElement | null>(null);
+
+    useLayoutEffect(() => {
+      if (userListWrapper.current) {
+        const updateMaxAvatars = (width: number) => {
+          const maxAvatars = Math.max(1, Math.min(8, Math.floor(width / 38)));
+          setMaxAvatars(maxAvatars);
+        };
+
+        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] = React.useState(DEFAULT_MAX_AVATARS);

    const searchTermNormalized = searchTerm.trim().toLowerCase();

    const filteredCollaborators = searchTermNormalized
-      ? uniqueCollaboratorsArray.filter(([, collaborator]) =>
+      ? uniqueCollaboratorsArray.filter((collaborator) =>
          collaborator.username?.toLowerCase().includes(searchTerm),
        )
      : uniqueCollaboratorsArray;

    const firstNCollaborators = uniqueCollaboratorsArray.slice(
      0,
-      FIRST_N_AVATARS,
+      maxAvatars - 1,
    );

-    const firstNAvatarsJSX = firstNCollaborators.map(
-      ([clientId, collaborator]) =>
-        renderCollaborator({
-          actionManager,
-          collaborator,
-          clientId,
-          shouldWrapWithTooltip: true,
-          isBeingFollowed: collaborator.socketId === userToFollow,
-        }),
+    const firstNAvatarsJSX = firstNCollaborators.map((collaborator) =>
+      renderCollaborator({
+        actionManager,
+        collaborator,
+        socketId: collaborator.socketId,
+        shouldWrapWithTooltip: true,
+        isBeingFollowed: collaborator.socketId === userToFollow,
+      }),
    );

    return mobile ? (
      <div className={clsx("UserList UserList_mobile", className)}>
-        {uniqueCollaboratorsArray.map(([clientId, collaborator]) =>
+        {uniqueCollaboratorsArray.map((collaborator) =>
          renderCollaborator({
            actionManager,
            collaborator,
-            clientId,
+            socketId: collaborator.socketId,
            shouldWrapWithTooltip: true,
            isBeingFollowed: collaborator.socketId === userToFollow,
          }),
        )}
      </div>
    ) : (
-      <div className={clsx("UserList", className)}>
-        {firstNAvatarsJSX}
+      <div className="UserList-wrapper" ref={userListWrapper}>
+        <div
+          className={clsx("UserList", className)}
+          style={{ [`--max-avatars` as any]: maxAvatars }}
+        >
+          {firstNAvatarsJSX}

-        {uniqueCollaboratorsArray.length > FIRST_N_AVATARS && (
-          <Popover.Root
-            onOpenChange={(isOpen) => {
-              if (!isOpen) {
-                setSearchTerm("");
-              }
-            }}
-          >
-            <Popover.Trigger className="UserList__more">
-              +{uniqueCollaboratorsArray.length - FIRST_N_AVATARS}
-            </Popover.Trigger>
-            <Popover.Content
-              style={{
-                zIndex: 2,
-                width: "13rem",
-                textAlign: "left",
+          {uniqueCollaboratorsArray.length > maxAvatars - 1 && (
+            <Popover.Root
+              onOpenChange={(isOpen) => {
+                if (!isOpen) {
+                  setSearchTerm("");
+                }
              }}
-              align="end"
-              sideOffset={10}
            >
-              <Island style={{ overflow: "hidden" }}>
-                {uniqueCollaboratorsArray.length >=
-                  SHOW_COLLABORATORS_FILTER_AT && (
-                  <div className="UserList__search-wrapper">
-                    {searchIcon}
-                    <input
-                      className="UserList__search"
-                      type="text"
-                      placeholder={t("userList.search.placeholder")}
-                      value={searchTerm}
-                      onChange={(e) => {
-                        setSearchTerm(e.target.value);
-                      }}
-                    />
-                  </div>
-                )}
-                <div className="dropdown-menu UserList__collaborators">
-                  {filteredCollaborators.length === 0 && (
-                    <div className="UserList__collaborators__empty">
-                      {t("userList.search.empty")}
+              <Popover.Trigger className="UserList__more">
+                +{uniqueCollaboratorsArray.length - maxAvatars + 1}
+              </Popover.Trigger>
+              <Popover.Content
+                style={{
+                  zIndex: 2,
+                  width: "15rem",
+                  textAlign: "left",
+                }}
+                align="end"
+                sideOffset={10}
+              >
+                <Island style={{ overflow: "hidden" }}>
+                  {uniqueCollaboratorsArray.length >=
+                    SHOW_COLLABORATORS_FILTER_AT && (
+                    <div className="UserList__search-wrapper">
+                      {searchIcon}
+                      <input
+                        className="UserList__search"
+                        type="text"
+                        placeholder={t("userList.search.placeholder")}
+                        value={searchTerm}
+                        onChange={(e) => {
+                          setSearchTerm(e.target.value);
+                        }}
+                      />
                    </div>
                  )}
-                  <div className="UserList__hint">
-                    {t("userList.hint.text")}
+                  <div className="dropdown-menu UserList__collaborators">
+                    {filteredCollaborators.length === 0 && (
+                      <div className="UserList__collaborators__empty">
+                        {t("userList.search.empty")}
+                      </div>
+                    )}
+                    <div className="UserList__hint">
+                      {t("userList.hint.text")}
+                    </div>
+                    {filteredCollaborators.map((collaborator) =>
+                      renderCollaborator({
+                        actionManager,
+                        collaborator,
+                        socketId: collaborator.socketId,
+                        withName: true,
+                        isBeingFollowed: collaborator.socketId === userToFollow,
+                      }),
+                    )}
                  </div>
-                  {filteredCollaborators.map(([clientId, collaborator]) =>
-                    renderCollaborator({
-                      actionManager,
-                      collaborator,
-                      clientId,
-                      withName: true,
-                      isBeingFollowed: collaborator.socketId === userToFollow,
-                    }),
-                  )}
-                </div>
-              </Island>
-            </Popover.Content>
-          </Popover.Root>
-        )}
+                </Island>
+              </Popover.Content>
+            </Popover.Root>
+          )}
+        </div>
      </div>
    );
  },
@@ -236,10 +277,15 @@ export const UserList = React.memo(
      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(
          collaborator,
          nextCollaborator,
@@ -1,5 +1,4 @@
 import React, { useEffect, useRef } from "react";
-import { renderInteractiveScene } from "../../renderer/renderScene";
 import { isShallowEqual, sceneCoordsToViewportCoords } from "../../utils";
 import { CURSOR_TYPE } from "../../constants";
 import { t } from "../../i18n";
@@ -12,6 +11,7 @@ import type {
 } from "../../scene/types";
 import type { NonDeletedExcalidrawElement } from "../../element/types";
 import { isRenderThrottlingEnabled } from "../../reactUtils";
+import { renderInteractiveScene } from "../../renderer/interactiveScene";

 type InteractiveCanvasProps = {
  containerRef: React.RefObject<HTMLDivElement>;
@@ -66,42 +66,46 @@ const InteractiveCanvas = (props: InteractiveCanvasProps) => {
      return;
    }

-    const cursorButton: {
-      [id: string]: string | undefined;
-    } = {};
-    const pointerViewportCoords: InteractiveCanvasRenderConfig["remotePointerViewportCoords"] =
-      {};
+    const remotePointerButton: InteractiveCanvasRenderConfig["remotePointerButton"] =
+      new Map();
+    const remotePointerViewportCoords: InteractiveCanvasRenderConfig["remotePointerViewportCoords"] =
+      new Map();
    const remoteSelectedElementIds: InteractiveCanvasRenderConfig["remoteSelectedElementIds"] =
-      {};
-    const pointerUsernames: { [id: string]: string } = {};
-    const pointerUserStates: { [id: string]: string } = {};
+      new Map();
+    const remotePointerUsernames: InteractiveCanvasRenderConfig["remotePointerUsernames"] =
+      new Map();
+    const remotePointerUserStates: InteractiveCanvasRenderConfig["remotePointerUserStates"] =
+      new Map();

    props.appState.collaborators.forEach((user, socketId) => {
      if (user.selectedElementIds) {
        for (const id of Object.keys(user.selectedElementIds)) {
-          if (!(id in remoteSelectedElementIds)) {
-            remoteSelectedElementIds[id] = [];
+          if (!remoteSelectedElementIds.has(id)) {
+            remoteSelectedElementIds.set(id, []);
          }
-          remoteSelectedElementIds[id].push(socketId);
+          remoteSelectedElementIds.get(id)!.push(socketId);
        }
      }
-      if (!user.pointer) {
+      if (!user.pointer || user.pointer.renderCursor === false) {
        return;
      }
      if (user.username) {
-        pointerUsernames[socketId] = user.username;
+        remotePointerUsernames.set(socketId, user.username);
      }
      if (user.userState) {
-        pointerUserStates[socketId] = user.userState;
+        remotePointerUserStates.set(socketId, user.userState);
      }
-      pointerViewportCoords[socketId] = sceneCoordsToViewportCoords(
-        {
-          sceneX: user.pointer.x,
-          sceneY: user.pointer.y,
-        },
-        props.appState,
+      remotePointerViewportCoords.set(
+        socketId,
+        sceneCoordsToViewportCoords(
+          {
+            sceneX: user.pointer.x,
+            sceneY: user.pointer.y,
+          },
+          props.appState,
+        ),
      );
-      cursorButton[socketId] = user.button;
+      remotePointerButton.set(socketId, user.button);
    });

    const selectionColor =
@@ -120,11 +124,11 @@ const InteractiveCanvas = (props: InteractiveCanvasProps) => {
        scale: window.devicePixelRatio,
        appState: props.appState,
        renderConfig: {
-          remotePointerViewportCoords: pointerViewportCoords,
-          remotePointerButton: cursorButton,
+          remotePointerViewportCoords,
+          remotePointerButton,
          remoteSelectedElementIds,
-          remotePointerUsernames: pointerUsernames,
-          remotePointerUserStates: pointerUserStates,
+          remotePointerUsernames,
+          remotePointerUserStates,
          selectionColor,
          renderScrollbars: false,
        },
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from "react";
 import { RoughCanvas } from "roughjs/bin/canvas";
-import { renderStaticScene } from "../../renderer/renderScene";
+import { renderStaticScene } from "../../renderer/staticScene";
 import { isShallowEqual } from "../../utils";
 import type { AppState, StaticCanvasAppState } from "../../types";
 import type {
@@ -0,0 +1,20 @@
+import { Excalidraw } from "../../index";
+import { KEYS } from "../../keys";
+import { Keyboard } from "../../tests/helpers/ui";
+import { render, waitFor, getByTestId } from "../../tests/test-utils";
+
+describe("Test <DropdownMenu/>", () => {
+  it("should", async () => {
+    const { container } = await render(<Excalidraw />);
+
+    expect(window.h.state.openMenu).toBe(null);
+
+    getByTestId(container, "main-menu-trigger").click();
+    expect(window.h.state.openMenu).toBe("canvas");
+
+    await waitFor(() => {
+      Keyboard.keyDown(KEYS.ESCAPE);
+      expect(window.h.state.openMenu).toBe(null);
+    });
+  });
+});
@@ -2,9 +2,12 @@ import { Island } from "../Island";
 import { useDevice } from "../App";
 import clsx from "clsx";
 import Stack from "../Stack";
-import React, { useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import { DropdownMenuContentPropsContext } from "./common";
 import { useOutsideClick } from "../../hooks/useOutsideClick";
+import { KEYS } from "../../keys";
+import { EVENT } from "../../constants";
+import { useStable } from "../../hooks/useStable";

 const MenuContent = ({
  children,
@@ -25,10 +28,30 @@ const MenuContent = ({
  const device = useDevice();
  const menuRef = useRef<HTMLDivElement>(null);

+  const callbacksRef = useStable({ onClickOutside });
+
  useOutsideClick(menuRef, () => {
-    onClickOutside?.();
+    callbacksRef.onClickOutside?.();
  });

+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === KEYS.ESCAPE) {
+        event.stopImmediatePropagation();
+        callbacksRef.onClickOutside?.();
+      }
+    };
+
+    document.addEventListener(EVENT.KEYDOWN, onKeyDown, {
+      // so that we can stop propagation of the event before it reaches
+      // event handlers that were bound before this one
+      capture: true,
+    });
+    return () => {
+      document.removeEventListener(EVENT.KEYDOWN, onKeyDown);
+    };
+  }, [callbacksRef]);
+
  const classNames = clsx(`dropdown-menu ${className}`, {
    "dropdown-menu--mobile": device.editor.isMobile,
  }).trim();
@@ -1,4 +1,4 @@
-@import "../css/variables.module.scss";
+@import "../../css/variables.module.scss";

 .excalidraw-hyperlinkContainer {
  display: flex;
@@ -1,21 +1,20 @@
-import { AppState, ExcalidrawProps, Point, UIAppState } from "../types";
+import { AppState, ExcalidrawProps, Point } from "../../types";
 import {
-  getShortcutKey,
  sceneCoordsToViewportCoords,
  viewportCoordsToSceneCoords,
  wrapEvent,
-} from "../utils";
-import { getEmbedLink, embeddableURLValidator } from "./embeddable";
-import { mutateElement } from "./mutateElement";
+} from "../../utils";
+import { getEmbedLink, embeddableURLValidator } from "../../element/embeddable";
+import { mutateElement } from "../../element/mutateElement";
 import {
+  ElementsMap,
  ExcalidrawEmbeddableElement,
  NonDeletedExcalidrawElement,
-} from "./types";
+} from "../../element/types";

-import { register } from "../actions/register";
-import { ToolButton } from "../components/ToolButton";
-import { FreedrawIcon, LinkIcon, TrashIcon } from "../components/icons";
-import { t } from "../i18n";
+import { ToolButton } from "../ToolButton";
+import { FreedrawIcon, TrashIcon } from "../icons";
+import { t } from "../../i18n";
 import {
  useCallback,
  useEffect,
@@ -24,21 +23,19 @@ import {
  useState,
 } from "react";
 import clsx from "clsx";
-import { KEYS } from "../keys";
-import { DEFAULT_LINK_SIZE } from "../renderer/renderElement";
-import { rotate } from "../math";
-import { EVENT, HYPERLINK_TOOLTIP_DELAY, MIME_TYPES } from "../constants";
-import { Bounds } from "./bounds";
-import { getTooltipDiv, updateTooltipPosition } from "../components/Tooltip";
-import { getSelectedElements } from "../scene";
-import { isPointHittingElementBoundingBox } from "./collision";
-import { getElementAbsoluteCoords } from ".";
-import { isLocalLink, normalizeLink } from "../data/url";
+import { KEYS } from "../../keys";
+import { EVENT, HYPERLINK_TOOLTIP_DELAY } from "../../constants";
+import { getElementAbsoluteCoords } from "../../element/bounds";
+import { getTooltipDiv, updateTooltipPosition } from "../Tooltip";
+import { getSelectedElements } from "../../scene";
+import { isPointHittingElementBoundingBox } from "../../element/collision";
+import { isLocalLink, normalizeLink } from "../../data/url";

 import "./Hyperlink.scss";
-import { trackEvent } from "../analytics";
-import { useAppProps, useExcalidrawAppState } from "../components/App";
-import { isEmbeddableElement } from "./typeChecks";
+import { trackEvent } from "../../analytics";
+import { useAppProps, useExcalidrawAppState } from "../App";
+import { isEmbeddableElement } from "../../element/typeChecks";
+import { getLinkHandleFromCoords } from "./helpers";

 const CONTAINER_WIDTH = 320;
 const SPACE_BOTTOM = 85;
@@ -46,11 +43,6 @@ const CONTAINER_PADDING = 5;
 const CONTAINER_HEIGHT = 42;
 const AUTO_HIDE_TIMEOUT = 500;

-export const EXTERNAL_LINK_IMG = document.createElement("img");
-EXTERNAL_LINK_IMG.src = `data:${MIME_TYPES.svg}, ${encodeURIComponent(
-  `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#1971c2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>`,
-)}`;
-
 let IS_HYPERLINK_TOOLTIP_VISIBLE = false;

 const embeddableLinkCache = new Map<
@@ -60,12 +52,14 @@ const embeddableLinkCache = new Map<

 export const Hyperlink = ({
  element,
+  elementsMap,
  setAppState,
  onLinkOpen,
  setToast,
  updateEmbedValidationStatus,
 }: {
  element: NonDeletedExcalidrawElement;
+  elementsMap: ElementsMap;
  setAppState: React.Component<any, AppState>["setState"];
  onLinkOpen: ExcalidrawProps["onLinkOpen"];
  setToast: (
@@ -182,7 +176,7 @@ export const Hyperlink = ({
      if (timeoutId) {
        clearTimeout(timeoutId);
      }
-      const shouldHide = shouldHideLinkPopup(element, appState, [
+      const shouldHide = shouldHideLinkPopup(element, elementsMap, appState, [
        event.clientX,
        event.clientY,
      ]) as boolean;
@@ -199,7 +193,7 @@ export const Hyperlink = ({
        clearTimeout(timeoutId);
      }
    };
-  }, [appState, element, isEditing, setAppState]);
+  }, [appState, element, isEditing, setAppState, elementsMap]);

  const handleRemove = useCallback(() => {
    trackEvent("hyperlink", "delete");
@@ -214,7 +208,7 @@ export const Hyperlink = ({
    trackEvent("hyperlink", "edit", "popup-ui");
    setAppState({ showHyperlinkPopup: "editor" });
  };
-  const { x, y } = getCoordsForPopover(element, appState);
+  const { x, y } = getCoordsForPopover(element, appState, elementsMap);
  if (
    appState.contextMenu ||
    appState.draggingElement ||
@@ -324,8 +318,9 @@ export const Hyperlink = ({
 const getCoordsForPopover = (
  element: NonDeletedExcalidrawElement,
  appState: AppState,
+  elementsMap: ElementsMap,
 ) => {
-  const [x1, y1] = getElementAbsoluteCoords(element);
+  const [x1, y1] = getElementAbsoluteCoords(element, elementsMap);
  const { x: viewportX, y: viewportY } = sceneCoordsToViewportCoords(
    { sceneX: x1 + element.width / 2, sceneY: y1 },
    appState,
@@ -335,51 +330,6 @@ const getCoordsForPopover = (
  return { x, y };
 };

-export const actionLink = register({
-  name: "hyperlink",
-  perform: (elements, appState) => {
-    if (appState.showHyperlinkPopup === "editor") {
-      return false;
-    }
-
-    return {
-      elements,
-      appState: {
-        ...appState,
-        showHyperlinkPopup: "editor",
-        openMenu: null,
-      },
-      commitToHistory: true,
-    };
-  },
-  trackEvent: { category: "hyperlink", action: "click" },
-  keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.K,
-  contextItemLabel: (elements, appState) =>
-    getContextMenuLabel(elements, appState),
-  predicate: (elements, appState) => {
-    const selectedElements = getSelectedElements(elements, appState);
-    return selectedElements.length === 1;
-  },
-  PanelComponent: ({ elements, appState, updateData }) => {
-    const selectedElements = getSelectedElements(elements, appState);
-
-    return (
-      <ToolButton
-        type="button"
-        icon={LinkIcon}
-        aria-label={t(getContextMenuLabel(elements, appState))}
-        title={`${
-          isEmbeddableElement(elements[0])
-            ? t("labels.link.labelEmbed")
-            : t("labels.link.label")
-        } - ${getShortcutKey("CtrlOrCmd+K")}`}
-        onClick={() => updateData(null)}
-        selected={selectedElements.length === 1 && !!selectedElements[0].link}
-      />
-    );
-  },
-});
-
 export const getContextMenuLabel = (
  elements: readonly NonDeletedExcalidrawElement[],
  appState: AppState,
@@ -395,89 +345,17 @@ export const getContextMenuLabel = (
  return label;
 };

-export const getLinkHandleFromCoords = (
-  [x1, y1, x2, y2]: Bounds,
-  angle: number,
-  appState: Pick<UIAppState, "zoom">,
-): Bounds => {
-  const size = DEFAULT_LINK_SIZE;
-  const linkWidth = size / appState.zoom.value;
-  const linkHeight = size / appState.zoom.value;
-  const linkMarginY = size / appState.zoom.value;
-  const centerX = (x1 + x2) / 2;
-  const centerY = (y1 + y2) / 2;
-  const centeringOffset = (size - 8) / (2 * appState.zoom.value);
-  const dashedLineMargin = 4 / appState.zoom.value;
-
-  // Same as `ne` resize handle
-  const x = x2 + dashedLineMargin - centeringOffset;
-  const y = y1 - dashedLineMargin - linkMarginY + centeringOffset;
-
-  const [rotatedX, rotatedY] = rotate(
-    x + linkWidth / 2,
-    y + linkHeight / 2,
-    centerX,
-    centerY,
-    angle,
-  );
-  return [
-    rotatedX - linkWidth / 2,
-    rotatedY - linkHeight / 2,
-    linkWidth,
-    linkHeight,
-  ];
-};
-
-export const isPointHittingLinkIcon = (
-  element: NonDeletedExcalidrawElement,
-  appState: AppState,
-  [x, y]: Point,
-) => {
-  const threshold = 4 / appState.zoom.value;
-  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
-  const [linkX, linkY, linkWidth, linkHeight] = getLinkHandleFromCoords(
-    [x1, y1, x2, y2],
-    element.angle,
-    appState,
-  );
-  const hitLink =
-    x > linkX - threshold &&
-    x < linkX + threshold + linkWidth &&
-    y > linkY - threshold &&
-    y < linkY + linkHeight + threshold;
-  return hitLink;
-};
-
-export const isPointHittingLink = (
-  element: NonDeletedExcalidrawElement,
-  appState: AppState,
-  [x, y]: Point,
-  isMobile: boolean,
-) => {
-  if (!element.link || appState.selectedElementIds[element.id]) {
-    return false;
-  }
-  const threshold = 4 / appState.zoom.value;
-  if (
-    !isMobile &&
-    appState.viewModeEnabled &&
-    isPointHittingElementBoundingBox(element, [x, y], threshold, null)
-  ) {
-    return true;
-  }
-  return isPointHittingLinkIcon(element, appState, [x, y]);
-};
-
 let HYPERLINK_TOOLTIP_TIMEOUT_ID: number | null = null;
 export const showHyperlinkTooltip = (
  element: NonDeletedExcalidrawElement,
  appState: AppState,
+  elementsMap: ElementsMap,
 ) => {
  if (HYPERLINK_TOOLTIP_TIMEOUT_ID) {
    clearTimeout(HYPERLINK_TOOLTIP_TIMEOUT_ID);
  }
  HYPERLINK_TOOLTIP_TIMEOUT_ID = window.setTimeout(
-    () => renderTooltip(element, appState),
+    () => renderTooltip(element, appState, elementsMap),
    HYPERLINK_TOOLTIP_DELAY,
  );
 };
@@ -485,6 +363,7 @@ export const showHyperlinkTooltip = (
 const renderTooltip = (
  element: NonDeletedExcalidrawElement,
  appState: AppState,
+  elementsMap: ElementsMap,
 ) => {
  if (!element.link) {
    return;
@@ -496,7 +375,7 @@ const renderTooltip = (
  tooltipDiv.style.maxWidth = "20rem";
  tooltipDiv.textContent = element.link;

-  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);

  const [linkX, linkY, linkWidth, linkHeight] = getLinkHandleFromCoords(
    [x1, y1, x2, y2],
@@ -533,8 +412,9 @@ export const hideHyperlinkToolip = () => {
  }
 };

-export const shouldHideLinkPopup = (
+const shouldHideLinkPopup = (
  element: NonDeletedExcalidrawElement,
+  elementsMap: ElementsMap,
  appState: AppState,
  [clientX, clientY]: Point,
 ): Boolean => {
@@ -546,11 +426,17 @@ export const shouldHideLinkPopup = (
  const threshold = 15 / appState.zoom.value;
  // hitbox to prevent hiding when hovered in element bounding box
  if (
-    isPointHittingElementBoundingBox(element, [sceneX, sceneY], threshold, null)
+    isPointHittingElementBoundingBox(
+      element,
+      elementsMap,
+      [sceneX, sceneY],
+      threshold,
+      null,
+    )
  ) {
    return false;
  }
-  const [x1, y1, x2] = getElementAbsoluteCoords(element);
+  const [x1, y1, x2] = getElementAbsoluteCoords(element, elementsMap);
  // hit box to prevent hiding when hovered in the vertical area between element and popover
  if (
    sceneX >= x1 &&
@@ -561,7 +447,11 @@ export const shouldHideLinkPopup = (
    return false;
  }
  // hit box to prevent hiding when hovered around popover within threshold
-  const { x: popoverX, y: popoverY } = getCoordsForPopover(element, appState);
+  const { x: popoverX, y: popoverY } = getCoordsForPopover(
+    element,
+    appState,
+    elementsMap,
+  );

  if (
    clientX >= popoverX - threshold &&
@@ -0,0 +1,93 @@
+import { MIME_TYPES } from "../../constants";
+import { Bounds, getElementAbsoluteCoords } from "../../element/bounds";
+import { isPointHittingElementBoundingBox } from "../../element/collision";
+import { ElementsMap, NonDeletedExcalidrawElement } from "../../element/types";
+import { rotate } from "../../math";
+import { DEFAULT_LINK_SIZE } from "../../renderer/renderElement";
+import { AppState, Point, UIAppState } from "../../types";
+
+export const EXTERNAL_LINK_IMG = document.createElement("img");
+EXTERNAL_LINK_IMG.src = `data:${MIME_TYPES.svg}, ${encodeURIComponent(
+  `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#1971c2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>`,
+)}`;
+
+export const getLinkHandleFromCoords = (
+  [x1, y1, x2, y2]: Bounds,
+  angle: number,
+  appState: Pick<UIAppState, "zoom">,
+): Bounds => {
+  const size = DEFAULT_LINK_SIZE;
+  const linkWidth = size / appState.zoom.value;
+  const linkHeight = size / appState.zoom.value;
+  const linkMarginY = size / appState.zoom.value;
+  const centerX = (x1 + x2) / 2;
+  const centerY = (y1 + y2) / 2;
+  const centeringOffset = (size - 8) / (2 * appState.zoom.value);
+  const dashedLineMargin = 4 / appState.zoom.value;
+
+  // Same as `ne` resize handle
+  const x = x2 + dashedLineMargin - centeringOffset;
+  const y = y1 - dashedLineMargin - linkMarginY + centeringOffset;
+
+  const [rotatedX, rotatedY] = rotate(
+    x + linkWidth / 2,
+    y + linkHeight / 2,
+    centerX,
+    centerY,
+    angle,
+  );
+  return [
+    rotatedX - linkWidth / 2,
+    rotatedY - linkHeight / 2,
+    linkWidth,
+    linkHeight,
+  ];
+};
+
+export const isPointHittingLinkIcon = (
+  element: NonDeletedExcalidrawElement,
+  elementsMap: ElementsMap,
+  appState: AppState,
+  [x, y]: Point,
+) => {
+  const threshold = 4 / appState.zoom.value;
+  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
+  const [linkX, linkY, linkWidth, linkHeight] = getLinkHandleFromCoords(
+    [x1, y1, x2, y2],
+    element.angle,
+    appState,
+  );
+  const hitLink =
+    x > linkX - threshold &&
+    x < linkX + threshold + linkWidth &&
+    y > linkY - threshold &&
+    y < linkY + linkHeight + threshold;
+  return hitLink;
+};
+
+export const isPointHittingLink = (
+  element: NonDeletedExcalidrawElement,
+  elementsMap: ElementsMap,
+  appState: AppState,
+  [x, y]: Point,
+  isMobile: boolean,
+) => {
+  if (!element.link || appState.selectedElementIds[element.id]) {
+    return false;
+  }
+  const threshold = 4 / appState.zoom.value;
+  if (
+    !isMobile &&
+    appState.viewModeEnabled &&
+    isPointHittingElementBoundingBox(
+      element,
+      elementsMap,
+      [x, y],
+      threshold,
+      null,
+    )
+  ) {
+    return true;
+  }
+  return isPointHittingLinkIcon(element, elementsMap, appState, [x, y]);
+};
@@ -604,6 +604,10 @@ export const share = createIcon(
  modifiedTablerIconProps,
 );

+export const warning = createIcon(
+  "M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z",
+);
+
 export const shareIOS = createIcon(
  "M16 5l-1.42 1.42-1.59-1.59V16h-1.98V4.83L9.42 6.42 8 5l4-4 4 4zm4 5v11c0 1.1-.9 2-2 2H6c-1.11 0-2-.9-2-2V10c0-1.11.89-2 2-2h3v2H6v11h12V10h-3V8h3c1.1 0 2 .89 2 2z",
  { width: 24, height: 24 },
@@ -1794,7 +1798,7 @@ export const fullscreenIcon = createIcon(
 );

 export const eyeIcon = createIcon(
-  <g stroke="currentColor" fill="none">
+  <g stroke="currentColor" fill="none" strokeWidth={1.5}>
    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
    <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
    <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" />
@@ -1833,3 +1837,26 @@ export const searchIcon = createIcon(
  </g>,
  tablerIconProps,
 );
+
+export const microphoneIcon = createIcon(
+  <g strokeWidth={1.5}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <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" />
+    <path d="M5 10a7 7 0 0 0 14 0" />
+    <path d="M8 21l8 0" />
+    <path d="M12 17l0 4" />
+  </g>,
+  tablerIconProps,
+);
+
+export const microphoneMutedIcon = createIcon(
+  <g strokeWidth={1.5}>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M3 3l18 18" />
+    <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" />
+    <path d="M5 10a7 7 0 0 0 10.846 5.85m2 -2a6.967 6.967 0 0 0 1.152 -3.85" />
+    <path d="M8 21l8 0" />
+    <path d="M12 17l0 4" />
+  </g>,
+  tablerIconProps,
+);
@@ -3,7 +3,7 @@
 .excalidraw {
  .collab-button {
    --button-bg: var(--color-primary);
-    --button-color: white;
+    --button-color: var(--color-surface-lowest);
    --button-border: var(--color-primary);

    --button-width: var(--lg-button-size);
@@ -35,12 +35,6 @@
    }
  }

-  &.theme--dark {
-    .collab-button {
-      color: var(--color-gray-90);
-    }
-  }
-
  .CollabButton.is-collaborating {
    background-color: var(--button-special-active-bg-color);

@@ -1,5 +1,5 @@
 import { t } from "../../i18n";
-import { usersIcon } from "../icons";
+import { share } from "../icons";
 import { Button } from "../Button";

 import clsx from "clsx";
@@ -17,16 +17,18 @@ const LiveCollaborationTrigger = ({
 } & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
  const appState = useUIAppState();

+  const showIconOnly = appState.width < 830;
+
  return (
    <Button
      {...rest}
      className={clsx("collab-button", { active: isCollaborating })}
      type="button"
      onSelect={onSelect}
-      style={{ position: "relative" }}
+      style={{ position: "relative", width: showIconOnly ? undefined : "auto" }}
      title={t("labels.liveCollaboration")}
    >
-      {usersIcon}
+      {showIconOnly ? share : t("labels.share")}
      {appState.collaborators.size > 0 && (
        <div className="CollabButton-collaborators">
          {appState.collaborators.size}
@@ -20,6 +20,9 @@ export const isIOS =
 export const isBrave = () =>
  (navigator as any).brave?.isBrave?.name === "isBrave";

+export const supportsResizeObserver =
+  typeof window !== "undefined" && "ResizeObserver" in window;
+
 export const APP_NAME = "Excalidraw";

 export const DRAGGING_THRESHOLD = 10; // px
@@ -28,6 +31,7 @@ export const ELEMENT_SHIFT_TRANSLATE_AMOUNT = 5;
 export const ELEMENT_TRANSLATE_AMOUNT = 1;
 export const TEXT_TO_CENTER_SNAP_THRESHOLD = 30;
 export const SHIFT_LOCKING_ANGLE = Math.PI / 12;
+export const DEFAULT_LASER_COLOR = "red";
 export const CURSOR_TYPE = {
  TEXT: "text",
  CROSSHAIR: "crosshair",
@@ -144,6 +148,11 @@ export const DEFAULT_VERTICAL_ALIGN = "top";
 export const DEFAULT_VERSION = "{version}";
 export const DEFAULT_TRANSFORM_HANDLE_SPACING = 2;

+export const COLOR_WHITE = "#ffffff";
+export const COLOR_CHARCOAL_BLACK = "#1e1e1e";
+// keep this in sync with CSS
+export const COLOR_VOICE_CALL = "#a2f1a6";
+
 export const CANVAS_ONLY_ACTIONS = ["selectAll"];

 export const GRID_SIZE = 20; // TODO make it configurable?
@@ -381,3 +390,9 @@ export const EDITOR_LS_KEYS = {
  MERMAID_TO_EXCALIDRAW: "mermaid-to-excalidraw",
  PUBLISH_LIBRARY: "publish-library-data",
 } as const;
+
+/**
+ * not translated as this is used only in public, stateless API as default value
+ * where filename is optional and we can't retrieve name from app state
+ */
+export const DEFAULT_FILENAME = "Untitled";
@@ -68,6 +68,7 @@
  cursor: pointer;
  background-color: var(--button-bg, var(--island-bg-color));
  color: var(--button-color, var(--color-on-surface));
+  font-family: var(--ui-font);

  svg {
    width: var(--button-width, var(--lg-icon-size));
@@ -115,8 +116,8 @@
 }

@mixin avatarStyles {
-  width: 1.25rem;
-  height: 1.25rem;
+  width: var(--avatar-size, 1.5rem);
+  height: var(--avatar-size, 1.5rem);
  position: relative;
  border-radius: 100%;
  outline-offset: 2px;
@@ -130,6 +131,10 @@
  color: var(--color-gray-90);
  flex: 0 0 auto;

+  &:active {
+    transform: scale(0.94);
+  }
+
  &-img {
    width: 100%;
    height: 100%;
@@ -143,14 +148,14 @@
    right: -3px;
    bottom: -3px;
    left: -3px;
-    border: 1px solid var(--avatar-border-color);
    border-radius: 100%;
  }

-  &--is-followed::before {
+  &.is-followed::before {
    border-color: var(--color-primary-hover);
+    box-shadow: 0 0 0 1px var(--color-primary-hover);
  }
-  &--is-current-user {
+  &.is-current-user {
    cursor: auto;
  }
 }
@@ -14,6 +14,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
      "type": "arrow",
    },
  ],
+  "customData": undefined,
  "fillStyle": "solid",
  "frameId": null,
  "groupIds": [],
@@ -49,6 +50,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
      "type": "arrow",
    },
  ],
+  "customData": undefined,
  "fillStyle": "solid",
  "frameId": null,
  "groupIds": [],
@@ -79,6 +81,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
  "angle": 0,
  "backgroundColor": "transparent",
  "boundElements": null,
+  "customData": undefined,
  "endArrowhead": "arrow",
  "endBinding": {
    "elementId": "ellipse-1",
@@ -132,6 +135,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
  "angle": 0,
  "backgroundColor": "transparent",
  "boundElements": null,
+  "customData": undefined,
  "endArrowhead": "arrow",
  "endBinding": {
    "elementId": "ellipse-1",
@@ -190,6 +194,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
      "type": "arrow",
    },
  ],
+  "customData": undefined,
  "fillStyle": "solid",
  "frameId": null,
  "groupIds": [],
@@ -219,7 +224,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": [
    {
      "id": "id48",
@@ -227,6 +231,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
    },
  ],
  "containerId": null,
+  "customData": undefined,
  "fillStyle": "solid",
  "fontFamily": 1,
  "fontSize": 20,
@@ -263,7 +268,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": [
    {
      "id": "id48",
@@ -271,6 +275,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
    },
  ],
  "containerId": null,
+  "customData": undefined,
  "fillStyle": "solid",
  "fontFamily": 1,
  "fontSize": 20,
@@ -313,6 +318,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
      "type": "text",
    },
  ],
+  "customData": undefined,
  "endArrowhead": "arrow",
  "endBinding": {
    "elementId": "text-2",
@@ -365,9 +371,9 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": null,
  "containerId": "id48",
+  "customData": undefined,
  "fillStyle": "solid",
  "fontFamily": 1,
  "fontSize": 20,
@@ -410,6 +416,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
      "type": "text",
    },
  ],
+  "customData": undefined,
  "endArrowhead": "arrow",
  "endBinding": {
    "elementId": "id40",
@@ -462,9 +469,9 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": null,
  "containerId": "id37",
+  "customData": undefined,
  "fillStyle": "solid",
  "fontFamily": 1,
  "fontSize": 20,
@@ -507,6 +514,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
      "type": "arrow",
    },
  ],
+  "customData": undefined,
  "fillStyle": "solid",
  "frameId": null,
  "groupIds": [],
@@ -542,6 +550,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
      "type": "arrow",
    },
  ],
+  "customData": undefined,
  "fillStyle": "solid",
  "frameId": null,
  "groupIds": [],
@@ -577,6 +586,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
      "type": "text",
    },
  ],
+  "customData": undefined,
  "endArrowhead": "arrow",
  "endBinding": {
    "elementId": "id44",
@@ -629,9 +639,9 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": null,
  "containerId": "id41",
+  "customData": undefined,
  "fillStyle": "solid",
  "fontFamily": 1,
  "fontSize": 20,
@@ -668,7 +678,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": [
    {
      "id": "id41",
@@ -676,6 +685,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
    },
  ],
  "containerId": null,
+  "customData": undefined,
  "fillStyle": "solid",
  "fontFamily": 1,
  "fontSize": 20,
@@ -712,7 +722,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": [
    {
      "id": "id41",
@@ -720,6 +729,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
    },
  ],
  "containerId": null,
+  "customData": undefined,
  "fillStyle": "solid",
  "fontFamily": 1,
  "fontSize": 20,
@@ -757,6 +767,7 @@ exports[`Test Transform > should not allow duplicate ids 1`] = `
  "angle": 0,
  "backgroundColor": "transparent",
  "boundElements": null,
+  "customData": undefined,
  "fillStyle": "solid",
  "frameId": null,
  "groupIds": [],
@@ -787,6 +798,7 @@ exports[`Test Transform > should transform linear elements 1`] = `
  "angle": 0,
  "backgroundColor": "transparent",
  "boundElements": null,
+  "customData": undefined,
  "endArrowhead": "arrow",
  "endBinding": null,
  "fillStyle": "solid",
@@ -832,6 +844,7 @@ exports[`Test Transform > should transform linear elements 2`] = `
  "angle": 0,
  "backgroundColor": "transparent",
  "boundElements": null,
+  "customData": undefined,
  "endArrowhead": "triangle",
  "endBinding": null,
  "fillStyle": "solid",
@@ -877,6 +890,7 @@ exports[`Test Transform > should transform linear elements 3`] = `
  "angle": 0,
  "backgroundColor": "transparent",
  "boundElements": null,
+  "customData": undefined,
  "endArrowhead": null,
  "endBinding": null,
  "fillStyle": "solid",
@@ -922,6 +936,7 @@ exports[`Test Transform > should transform linear elements 4`] = `
  "angle": 0,
  "backgroundColor": "transparent",
  "boundElements": null,
+  "customData": undefined,
  "endArrowhead": null,
  "endBinding": null,
  "fillStyle": "solid",
@@ -967,6 +982,7 @@ exports[`Test Transform > should transform regular shapes 1`] = `
  "angle": 0,
  "backgroundColor": "transparent",
  "boundElements": null,
+  "customData": undefined,
  "fillStyle": "solid",
  "frameId": null,
  "groupIds": [],
@@ -997,6 +1013,7 @@ exports[`Test Transform > should transform regular shapes 2`] = `
  "angle": 0,
  "backgroundColor": "transparent",
  "boundElements": null,
+  "customData": undefined,
  "fillStyle": "solid",
  "frameId": null,
  "groupIds": [],
@@ -1027,6 +1044,7 @@ exports[`Test Transform > should transform regular shapes 3`] = `
  "angle": 0,
  "backgroundColor": "transparent",
  "boundElements": null,
+  "customData": undefined,
  "fillStyle": "solid",
  "frameId": null,
  "groupIds": [],
@@ -1057,6 +1075,7 @@ exports[`Test Transform > should transform regular shapes 4`] = `
  "angle": 0,
  "backgroundColor": "#c0eb75",
  "boundElements": null,
+  "customData": undefined,
  "fillStyle": "solid",
  "frameId": null,
  "groupIds": [],
@@ -1087,6 +1106,7 @@ exports[`Test Transform > should transform regular shapes 5`] = `
  "angle": 0,
  "backgroundColor": "#ffc9c9",
  "boundElements": null,
+  "customData": undefined,
  "fillStyle": "solid",
  "frameId": null,
  "groupIds": [],
@@ -1117,6 +1137,7 @@ exports[`Test Transform > should transform regular shapes 6`] = `
  "angle": 0,
  "backgroundColor": "#a5d8ff",
  "boundElements": null,
+  "customData": undefined,
  "fillStyle": "cross-hatch",
  "frameId": null,
  "groupIds": [],
@@ -1146,9 +1167,9 @@ exports[`Test Transform > should transform text element 1`] = `
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": null,
  "containerId": null,
+  "customData": undefined,
  "fillStyle": "solid",
  "fontFamily": 1,
  "fontSize": 20,
@@ -1185,9 +1206,9 @@ exports[`Test Transform > should transform text element 2`] = `
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": null,
  "containerId": null,
+  "customData": undefined,
  "fillStyle": "solid",
  "fontFamily": 1,
  "fontSize": 20,
@@ -1230,6 +1251,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
      "type": "text",
    },
  ],
+  "customData": undefined,
  "endArrowhead": "arrow",
  "endBinding": null,
  "fillStyle": "solid",
@@ -1280,6 +1302,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
      "type": "text",
    },
  ],
+  "customData": undefined,
  "endArrowhead": "arrow",
  "endBinding": null,
  "fillStyle": "solid",
@@ -1330,6 +1353,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
      "type": "text",
    },
  ],
+  "customData": undefined,
  "endArrowhead": "arrow",
  "endBinding": null,
  "fillStyle": "solid",
@@ -1380,6 +1404,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
      "type": "text",
    },
  ],
+  "customData": undefined,
  "endArrowhead": "arrow",
  "endBinding": null,
  "fillStyle": "solid",
@@ -1424,9 +1449,9 @@ exports[`Test Transform > should transform to labelled arrows when label provide
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": null,
  "containerId": "id25",
+  "customData": undefined,
  "fillStyle": "solid",
  "fontFamily": 1,
  "fontSize": 20,
@@ -1463,9 +1488,9 @@ exports[`Test Transform > should transform to labelled arrows when label provide
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": null,
  "containerId": "id26",
+  "customData": undefined,
  "fillStyle": "solid",
  "fontFamily": 1,
  "fontSize": 20,
@@ -1502,9 +1527,9 @@ exports[`Test Transform > should transform to labelled arrows when label provide
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": null,
  "containerId": "id27",
+  "customData": undefined,
  "fillStyle": "solid",
  "fontFamily": 1,
  "fontSize": 20,
@@ -1542,9 +1567,9 @@ exports[`Test Transform > should transform to labelled arrows when label provide
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": null,
  "containerId": "id28",
+  "customData": undefined,
  "fillStyle": "solid",
  "fontFamily": 1,
  "fontSize": 20,
@@ -1588,6 +1613,7 @@ exports[`Test Transform > should transform to text containers when label provide
      "type": "text",
    },
  ],
+  "customData": undefined,
  "fillStyle": "solid",
  "frameId": null,
  "groupIds": [],
@@ -1623,6 +1649,7 @@ exports[`Test Transform > should transform to text containers when label provide
      "type": "text",
    },
  ],
+  "customData": undefined,
  "fillStyle": "solid",
  "frameId": null,
  "groupIds": [],
@@ -1658,6 +1685,7 @@ exports[`Test Transform > should transform to text containers when label provide
      "type": "text",
    },
  ],
+  "customData": undefined,
  "fillStyle": "solid",
  "frameId": null,
  "groupIds": [],
@@ -1693,6 +1721,7 @@ exports[`Test Transform > should transform to text containers when label provide
      "type": "text",
    },
  ],
+  "customData": undefined,
  "fillStyle": "solid",
  "frameId": null,
  "groupIds": [],
@@ -1728,6 +1757,7 @@ exports[`Test Transform > should transform to text containers when label provide
      "type": "text",
    },
  ],
+  "customData": undefined,
  "fillStyle": "solid",
  "frameId": null,
  "groupIds": [],
@@ -1763,6 +1793,7 @@ exports[`Test Transform > should transform to text containers when label provide
      "type": "text",
    },
  ],
+  "customData": undefined,
  "fillStyle": "solid",
  "frameId": null,
  "groupIds": [],
@@ -1792,9 +1823,9 @@ exports[`Test Transform > should transform to text containers when label provide
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": null,
  "containerId": "id13",
+  "customData": undefined,
  "fillStyle": "solid",
  "fontFamily": 1,
  "fontSize": 20,
@@ -1831,9 +1862,9 @@ exports[`Test Transform > should transform to text containers when label provide
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": null,
  "containerId": "id14",
+  "customData": undefined,
  "fillStyle": "solid",
  "fontFamily": 1,
  "fontSize": 20,
@@ -1871,9 +1902,9 @@ exports[`Test Transform > should transform to text containers when label provide
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": null,
  "containerId": "id15",
+  "customData": undefined,
  "fillStyle": "solid",
  "fontFamily": 1,
  "fontSize": 20,
@@ -1913,9 +1944,9 @@ exports[`Test Transform > should transform to text containers when label provide
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": null,
  "containerId": "id16",
+  "customData": undefined,
  "fillStyle": "solid",
  "fontFamily": 1,
  "fontSize": 20,
@@ -1953,9 +1984,9 @@ exports[`Test Transform > should transform to text containers when label provide
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": null,
  "containerId": "id17",
+  "customData": undefined,
  "fillStyle": "solid",
  "fontFamily": 1,
  "fontSize": 20,
@@ -1994,9 +2025,9 @@ exports[`Test Transform > should transform to text containers when label provide
 {
  "angle": 0,
  "backgroundColor": "transparent",
-  "baseline": 0,
  "boundElements": null,
  "containerId": "id18",
+  "customData": undefined,
  "fillStyle": "solid",
  "fontFamily": 1,
  "fontSize": 20,
@@ -4,7 +4,6 @@ import { IMAGE_MIME_TYPES, MIME_TYPES } from "../constants";
 import { clearElementsForExport } from "../element";
 import { ExcalidrawElement, FileId } from "../element/types";
 import { CanvasError, ImageSceneDataError } from "../errors";
-import { t } from "../i18n";
 import { calculateScrollCenter } from "../scene";
 import { AppState, DataURL, LibraryItem } from "../types";
 import { ValueOf } from "../utility-types";
@@ -23,11 +22,11 @@ const parseFileContents = async (blob: Blob | File) => {
    } catch (error: any) {
      if (error.message === "INVALID") {
        throw new ImageSceneDataError(
-          t("alerts.imageDoesNotContainScene"),
+          "Image doesn't contain scene",
          "IMAGE_NOT_CONTAINS_SCENE_DATA",
        );
      } else {
-        throw new ImageSceneDataError(t("alerts.cannotRestoreFromImage"));
+        throw new ImageSceneDataError("Error: cannot restore image");
      }
    }
  } else {
@@ -54,11 +53,11 @@ const parseFileContents = async (blob: Blob | File) => {
      } catch (error: any) {
        if (error.message === "INVALID") {
          throw new ImageSceneDataError(
-            t("alerts.imageDoesNotContainScene"),
+            "Image doesn't contain scene",
            "IMAGE_NOT_CONTAINS_SCENE_DATA",
          );
        } else {
-          throw new ImageSceneDataError(t("alerts.cannotRestoreFromImage"));
+          throw new ImageSceneDataError("Error: cannot restore image");
        }
      }
    }
@@ -130,7 +129,7 @@ export const loadSceneOrLibraryFromBlob = async (
    } catch (error: any) {
      if (isSupportedImageFile(blob)) {
        throw new ImageSceneDataError(
-          t("alerts.imageDoesNotContainScene"),
+          "Image doesn't contain scene",
          "IMAGE_NOT_CONTAINS_SCENE_DATA",
        );
      }
@@ -163,12 +162,12 @@ export const loadSceneOrLibraryFromBlob = async (
        data,
      };
    }
-    throw new Error(t("alerts.couldNotLoadInvalidFile"));
+    throw new Error("Error: invalid file");
  } catch (error: any) {
    if (error instanceof ImageSceneDataError) {
      throw error;
    }
-    throw new Error(t("alerts.couldNotLoadInvalidFile"));
+    throw new Error("Error: invalid file");
  }
 };

@@ -187,7 +186,7 @@ export const loadFromBlob = async (
    fileHandle,
  );
  if (ret.type !== MIME_TYPES.excalidraw) {
-    throw new Error(t("alerts.couldNotLoadInvalidFile"));
+    throw new Error("Error: invalid file");
  }
  return ret.data;
 };
@@ -222,10 +221,7 @@ export const canvasToBlob = async (
      canvas.toBlob((blob) => {
        if (!blob) {
          return reject(
-            new CanvasError(
-              t("canvasError.canvasTooBig"),
-              "CANVAS_POSSIBLY_TOO_BIG",
-            ),
+            new CanvasError("Error: Canvas too big", "CANVAS_POSSIBLY_TOO_BIG"),
          );
        }
        resolve(blob);
@@ -314,7 +310,7 @@ export const resizeImageFile = async (
  }

  if (!isSupportedImageFile(file)) {
-    throw new Error(t("errors.unsupportedFileType"));
+    throw new Error("Error: unsupported file type", { cause: "UNSUPPORTED" });
  }

  return new File(
@@ -340,11 +336,11 @@ export const ImageURLToFile = async (
  try {
    response = await fetch(imageUrl);
  } catch (error: any) {
-    throw new Error(t("errors.failedToFetchImage"));
+    throw new Error("Error: failed to fetch image", { cause: "FETCH_ERROR" });
  }

  if (!response.ok) {
-    throw new Error(t("errors.failedToFetchImage"));
+    throw new Error("Error: failed to fetch image", { cause: "FETCH_ERROR" });
  }

  const blob = await response.blob();
@@ -354,7 +350,7 @@ export const ImageURLToFile = async (
    return new File([blob], name, { type: blob.type });
  }

-  throw new Error(t("errors.unsupportedFileType"));
+  throw new Error("Error: unsupported file type", { cause: "UNSUPPORTED" });
 };

 export const getFileFromEvent = async (
@@ -76,7 +76,7 @@ export const fileOpen = <M extends boolean | undefined = false>(opts: {
 };

 export const fileSave = (
-  blob: Blob,
+  blob: Blob | Promise<Blob>,
  opts: {
    /** supply without the extension */
    name: string;
@@ -2,7 +2,12 @@ import {
  copyBlobToClipboardAsPng,
  copyTextToSystemClipboard,
 } from "../clipboard";
-import { DEFAULT_EXPORT_PADDING, isFirefox, MIME_TYPES } from "../constants";
+import {
+  DEFAULT_EXPORT_PADDING,
+  DEFAULT_FILENAME,
+  isFirefox,
+  MIME_TYPES,
+} from "../constants";
 import { getNonDeletedElements } from "../element";
 import { isFrameLikeElement } from "../element/typeChecks";
 import {
@@ -84,14 +89,15 @@ export const exportCanvas = async (
    exportBackground,
    exportPadding = DEFAULT_EXPORT_PADDING,
    viewBackgroundColor,
-    name,
+    name = appState.name || DEFAULT_FILENAME,
    fileHandle = null,
    exportingFrame = null,
  }: {
    exportBackground: boolean;
    exportPadding?: number;
    viewBackgroundColor: string;
-    name: string;
+    /** filename, if applicable */
+    name?: string;
    fileHandle?: FileSystemHandle | null;
    exportingFrame: ExcalidrawFrameLikeElement | null;
  },
@@ -100,7 +106,7 @@ export const exportCanvas = async (
    throw new Error(t("alerts.cannotExportEmptyCanvas"));
  }
  if (type === "svg" || type === "clipboard-svg") {
-    const tempSvg = await exportToSvg(
+    const svgPromise = exportToSvg(
      elements,
      {
        exportBackground,
@@ -113,9 +119,12 @@ export const exportCanvas = async (
      files,
      { exportingFrame },
    );
+
    if (type === "svg") {
-      return await fileSave(
-        new Blob([tempSvg.outerHTML], { type: MIME_TYPES.svg }),
+      return fileSave(
+        svgPromise.then((svg) => {
+          return new Blob([svg.outerHTML], { type: MIME_TYPES.svg });
+        }),
        {
          description: "Export to SVG",
          name,
@@ -124,7 +133,12 @@ export const exportCanvas = async (
        },
      );
    } else if (type === "clipboard-svg") {
-      await copyTextToSystemClipboard(tempSvg.outerHTML);
+      const svg = await svgPromise.then((svg) => svg.outerHTML);
+      try {
+        await copyTextToSystemClipboard(svg);
+      } catch (e) {
+        throw new Error(t("errors.copyToSystemClipboardFailed"));
+      }
      return;
    }
  }
@@ -137,17 +151,20 @@ export const exportCanvas = async (
  });

  if (type === "png") {
-    let blob = await canvasToBlob(tempCanvas);
+    let blob = canvasToBlob(tempCanvas);
+
    if (appState.exportEmbedScene) {
-      blob = await (
-        await import("./image")
-      ).encodePngMetadata({
-        blob,
-        metadata: serializeAsJSON(elements, appState, files, "local"),
-      });
+      blob = blob.then((blob) =>
+        import("./image").then(({ encodePngMetadata }) =>
+          encodePngMetadata({
+            blob,
+            metadata: serializeAsJSON(elements, appState, files, "local"),
+          }),
+        ),
+      );
    }

-    return await fileSave(blob, {
+    return fileSave(blob, {
      description: "Export to PNG",
      name,
      // FIXME reintroduce `excalidraw.png` when most people upgrade away
@@ -162,7 +179,7 @@ export const exportCanvas = async (
    } catch (error: any) {
      console.warn(error);
      if (error.name === "CANVAS_POSSIBLY_TOO_BIG") {
-        throw error;
+        throw new Error(t("canvasError.canvasTooBig"));
      }
      // TypeError *probably* suggests ClipboardItem not defined, which
      // people on Firefox can enable through a flag, so let's tell them.
@@ -1,6 +1,7 @@
 import { fileOpen, fileSave } from "./filesystem";
 import { cleanAppStateForExport, clearAppStateForDatabase } from "../appState";
 import {
+  DEFAULT_FILENAME,
  EXPORT_DATA_TYPES,
  EXPORT_SOURCE,
  MIME_TYPES,
@@ -71,6 +72,8 @@ export const saveAsJSON = async (
  elements: readonly ExcalidrawElement[],
  appState: AppState,
  files: BinaryFiles,
+  /** filename */
+  name: string = appState.name || DEFAULT_FILENAME,
 ) => {
  const serialized = serializeAsJSON(elements, appState, files, "local");
  const blob = new Blob([serialized], {
@@ -78,7 +81,7 @@ export const saveAsJSON = async (
  });

  const fileHandle = await fileSave(blob, {
-    name: appState.name,
+    name,
    extension: "excalidraw",
    description: "Excalidraw file",
    fileHandle: isImageFileHandle(appState.fileHandle)
@@ -4,6 +4,7 @@ import {
  LibraryItem,
  ExcalidrawImperativeAPI,
  LibraryItemsSource,
+  LibraryItems_anyVersion,
 } from "../types";
 import { restoreLibraryItems } from "./restore";
 import type App from "../components/App";
@@ -23,13 +24,72 @@ import {
  LIBRARY_SIDEBAR_TAB,
 } from "../constants";
 import { libraryItemSvgsCache } from "../hooks/useLibraryItemSvg";
-import { cloneJSON } from "../utils";
+import {
+  arrayToMap,
+  cloneJSON,
+  preventUnload,
+  promiseTry,
+  resolvablePromise,
+} from "../utils";
+import { MaybePromise } from "../utility-types";
+import { Emitter } from "../emitter";
+import { Queue } from "../queue";
+import { hashElementsVersion, hashString } from "../element";
+
+type LibraryUpdate = {
+  /** deleted library items since last onLibraryChange event */
+  deletedItems: Map<LibraryItem["id"], LibraryItem>;
+  /** newly added items in the library */
+  addedItems: Map<LibraryItem["id"], LibraryItem>;
+};
+
+// an object so that we can later add more properties to it without breaking,
+// such as schema version
+export type LibraryPersistedData = { libraryItems: LibraryItems };
+
+const onLibraryUpdateEmitter = new Emitter<
+  [update: LibraryUpdate, libraryItems: LibraryItems]
+>();
+
+export type LibraryAdatapterSource = "load" | "save";
+
+export interface LibraryPersistenceAdapter {
+  /**
+   * Should load data that were previously saved into the database using the
+   * `save` method. Should throw if saving fails.
+   *
+   * Will be used internally in multiple places, such as during save to
+   * in order to reconcile changes with latest store data.
+   */
+  load(metadata: {
+    /**
+     * Indicates whether we're loading data for save purposes, or reading
+     * purposes, in which case host app can implement more aggressive caching.
+     */
+    source: LibraryAdatapterSource;
+  }): MaybePromise<{ libraryItems: LibraryItems_anyVersion } | null>;
+  /** Should persist to the database as is (do no change the data structure). */
+  save(libraryData: LibraryPersistedData): MaybePromise<void>;
+}
+
+export interface LibraryMigrationAdapter {
+  /**
+   * loads data from legacy data source. Returns `null` if no data is
+   * to be migrated.
+   */
+  load(): MaybePromise<{ libraryItems: LibraryItems_anyVersion } | null>;
+
+  /** clears entire storage afterwards */
+  clear(): MaybePromise<void>;
+}

 export const libraryItemsAtom = atom<{
  status: "loading" | "loaded";
+  /** indicates whether library is initialized with library items (has gone
+   * through at least one update). Used in UI. Specific to this atom only. */
  isInitialized: boolean;
  libraryItems: LibraryItems;
-}>({ status: "loaded", isInitialized: true, libraryItems: [] });
+}>({ status: "loaded", isInitialized: false, libraryItems: [] });

 const cloneLibraryItems = (libraryItems: LibraryItems): LibraryItems =>
  cloneJSON(libraryItems);
@@ -74,12 +134,45 @@ export const mergeLibraryItems = (
  return [...newItems, ...localItems];
 };

+/**
+ * Returns { deletedItems, addedItems } maps of all added and deleted items
+ * since last onLibraryChange event.
+ *
+ * Host apps are recommended to diff with the latest state they have.
+ */
+const createLibraryUpdate = (
+  prevLibraryItems: LibraryItems,
+  nextLibraryItems: LibraryItems,
+): LibraryUpdate => {
+  const nextItemsMap = arrayToMap(nextLibraryItems);
+
+  const update: LibraryUpdate = {
+    deletedItems: new Map<LibraryItem["id"], LibraryItem>(),
+    addedItems: new Map<LibraryItem["id"], LibraryItem>(),
+  };
+
+  for (const item of prevLibraryItems) {
+    if (!nextItemsMap.has(item.id)) {
+      update.deletedItems.set(item.id, item);
+    }
+  }
+
+  const prevItemsMap = arrayToMap(prevLibraryItems);
+
+  for (const item of nextLibraryItems) {
+    if (!prevItemsMap.has(item.id)) {
+      update.addedItems.set(item.id, item);
+    }
+  }
+
+  return update;
+};
+
 class Library {
  /** latest libraryItems */
-  private lastLibraryItems: LibraryItems = [];
-  /** indicates whether library is initialized with library items (has gone
-   * though at least one update) */
-  private isInitialized = false;
+  private currLibraryItems: LibraryItems = [];
+  /** snapshot of library items since last onLibraryChange call */
+  private prevLibraryItems = cloneLibraryItems(this.currLibraryItems);

  private app: App;

@@ -95,21 +188,29 @@ class Library {

  private notifyListeners = () => {
    if (this.updateQueue.length > 0) {
-      jotaiStore.set(libraryItemsAtom, {
+      jotaiStore.set(libraryItemsAtom, (s) => ({
        status: "loading",
-        libraryItems: this.lastLibraryItems,
-        isInitialized: this.isInitialized,
-      });
+        libraryItems: this.currLibraryItems,
+        isInitialized: s.isInitialized,
+      }));
    } else {
-      this.isInitialized = true;
      jotaiStore.set(libraryItemsAtom, {
        status: "loaded",
-        libraryItems: this.lastLibraryItems,
-        isInitialized: this.isInitialized,
+        libraryItems: this.currLibraryItems,
+        isInitialized: true,
      });
      try {
-        this.app.props.onLibraryChange?.(
-          cloneLibraryItems(this.lastLibraryItems),
+        const prevLibraryItems = this.prevLibraryItems;
+        this.prevLibraryItems = cloneLibraryItems(this.currLibraryItems);
+
+        const nextLibraryItems = cloneLibraryItems(this.currLibraryItems);
+
+        this.app.props.onLibraryChange?.(nextLibraryItems);
+
+        // for internal use in `useHandleLibrary` hook
+        onLibraryUpdateEmitter.trigger(
+          createLibraryUpdate(prevLibraryItems, nextLibraryItems),
+          nextLibraryItems,
        );
      } catch (error) {
        console.error(error);
@@ -119,9 +220,8 @@ class Library {

  /** call on excalidraw instance unmount */
  destroy = () => {
-    this.isInitialized = false;
    this.updateQueue = [];
-    this.lastLibraryItems = [];
+    this.currLibraryItems = [];
    jotaiStore.set(libraryItemSvgsCache, new Map());
    // TODO uncomment after/if we make jotai store scoped to each excal instance
    // jotaiStore.set(libraryItemsAtom, {
@@ -142,14 +242,14 @@ class Library {
    return new Promise(async (resolve) => {
      try {
        const libraryItems = await (this.getLastUpdateTask() ||
-          this.lastLibraryItems);
+          this.currLibraryItems);
        if (this.updateQueue.length > 0) {
          resolve(this.getLatestLibrary());
        } else {
          resolve(cloneLibraryItems(libraryItems));
        }
      } catch (error) {
-        return resolve(this.lastLibraryItems);
+        return resolve(this.currLibraryItems);
      }
    });
  };
@@ -181,7 +281,7 @@ class Library {
        try {
          const source = await (typeof libraryItems === "function" &&
          !(libraryItems instanceof Blob)
-            ? libraryItems(this.lastLibraryItems)
+            ? libraryItems(this.currLibraryItems)
            : libraryItems);

          let nextItems;
@@ -207,7 +307,7 @@ class Library {
            }

            if (merge) {
-              resolve(mergeLibraryItems(this.lastLibraryItems, nextItems));
+              resolve(mergeLibraryItems(this.currLibraryItems, nextItems));
            } else {
              resolve(nextItems);
            }
@@ -244,12 +344,12 @@ class Library {
        await this.getLastUpdateTask();

        if (typeof libraryItems === "function") {
-          libraryItems = libraryItems(this.lastLibraryItems);
+          libraryItems = libraryItems(this.currLibraryItems);
        }

-        this.lastLibraryItems = cloneLibraryItems(await libraryItems);
+        this.currLibraryItems = cloneLibraryItems(await libraryItems);

-        resolve(this.lastLibraryItems);
+        resolve(this.currLibraryItems);
      } catch (error: any) {
        reject(error);
      }
@@ -257,7 +357,7 @@ class Library {
      .catch((error) => {
        if (error.name === "AbortError") {
          console.warn("Library update aborted by user");
-          return this.lastLibraryItems;
+          return this.currLibraryItems;
        }
        throw error;
      })
@@ -382,20 +482,165 @@ export const parseLibraryTokensFromUrl = () => {
  return libraryUrl ? { libraryUrl, idToken } : null;
 };

-export const useHandleLibrary = ({
-  excalidrawAPI,
-  getInitialLibraryItems,
-}: {
-  excalidrawAPI: ExcalidrawImperativeAPI | null;
-  getInitialLibraryItems?: () => LibraryItemsSource;
-}) => {
-  const getInitialLibraryRef = useRef(getInitialLibraryItems);
+class AdapterTransaction {
+  static queue = new Queue();
+
+  static async getLibraryItems(
+    adapter: LibraryPersistenceAdapter,
+    source: LibraryAdatapterSource,
+    _queue = true,
+  ): Promise<LibraryItems> {
+    const task = () =>
+      new Promise<LibraryItems>(async (resolve, reject) => {
+        try {
+          const data = await adapter.load({ source });
+          resolve(restoreLibraryItems(data?.libraryItems || [], "published"));
+        } catch (error: any) {
+          reject(error);
+        }
+      });
+
+    if (_queue) {
+      return AdapterTransaction.queue.push(task);
+    }
+
+    return task();
+  }
+
+  static run = async <T>(
+    adapter: LibraryPersistenceAdapter,
+    fn: (transaction: AdapterTransaction) => Promise<T>,
+  ) => {
+    const transaction = new AdapterTransaction(adapter);
+    return AdapterTransaction.queue.push(() => fn(transaction));
+  };
+
+  // ------------------
+
+  private adapter: LibraryPersistenceAdapter;
+
+  constructor(adapter: LibraryPersistenceAdapter) {
+    this.adapter = adapter;
+  }
+
+  getLibraryItems(source: LibraryAdatapterSource) {
+    return AdapterTransaction.getLibraryItems(this.adapter, source, false);
+  }
+}
+
+let lastSavedLibraryItemsHash = 0;
+let librarySaveCounter = 0;
+
+export const getLibraryItemsHash = (items: LibraryItems) => {
+  return hashString(
+    items
+      .map((item) => {
+        return `${item.id}:${hashElementsVersion(item.elements)}`;
+      })
+      .sort()
+      .join(),
+  );
+};
+
+const persistLibraryUpdate = async (
+  adapter: LibraryPersistenceAdapter,
+  update: LibraryUpdate,
+): Promise<LibraryItems> => {
+  try {
+    librarySaveCounter++;
+
+    return await AdapterTransaction.run(adapter, async (transaction) => {
+      const nextLibraryItemsMap = arrayToMap(
+        await transaction.getLibraryItems("save"),
+      );
+
+      for (const [id] of update.deletedItems) {
+        nextLibraryItemsMap.delete(id);
+      }
+
+      const addedItems: LibraryItem[] = [];
+
+      // we want to merge current library items with the ones stored in the
+      // DB so that we don't lose any elements that for some reason aren't
+      // in the current editor library, which could happen when:
+      //
+      // 1. we haven't received an update deleting some elements
+      //    (in which case it's still better to keep them in the DB lest
+      //     it was due to a different reason)
+      // 2. we keep a single DB for all active editors, but the editors'
+      //    libraries aren't synced or there's a race conditions during
+      //    syncing
+      // 3. some other race condition, e.g. during init where emit updates
+      //    for partial updates (e.g. you install a 3rd party library and
+      //    init from DB only after — we emit events for both updates)
+      for (const [id, item] of update.addedItems) {
+        if (nextLibraryItemsMap.has(id)) {
+          // replace item with latest version
+          // TODO we could prefer the newer item instead
+          nextLibraryItemsMap.set(id, item);
+        } else {
+          // we want to prepend the new items with the ones that are already
+          // in DB to preserve the ordering we do in editor (newly added
+          // items are added to the beginning)
+          addedItems.push(item);
+        }
+      }
+
+      const nextLibraryItems = addedItems.concat(
+        Array.from(nextLibraryItemsMap.values()),
+      );
+
+      const version = getLibraryItemsHash(nextLibraryItems);
+
+      if (version !== lastSavedLibraryItemsHash) {
+        await adapter.save({ libraryItems: nextLibraryItems });
+      }
+
+      lastSavedLibraryItemsHash = version;
+
+      return nextLibraryItems;
+    });
+  } finally {
+    librarySaveCounter--;
+  }
+};
+
+export const useHandleLibrary = (
+  opts: {
+    excalidrawAPI: ExcalidrawImperativeAPI | null;
+  } & (
+    | {
+        /** @deprecated we recommend using `opts.adapter` instead */
+        getInitialLibraryItems?: () => MaybePromise<LibraryItemsSource>;
+      }
+    | {
+        adapter: LibraryPersistenceAdapter;
+        /**
+         * Adapter that takes care of loading data from legacy data store.
+         * Supply this if you want to migrate data on initial load from legacy
+         * data store.
+         *
+         * Can be a different LibraryPersistenceAdapter.
+         */
+        migrationAdapter?: LibraryMigrationAdapter;
+      }
+  ),
+) => {
+  const { excalidrawAPI } = opts;
+
+  const optsRef = useRef(opts);
+  optsRef.current = opts;
+
+  const isLibraryLoadedRef = useRef(false);

  useEffect(() => {
    if (!excalidrawAPI) {
      return;
    }

+    // reset on editor remount (excalidrawAPI changed)
+    isLibraryLoadedRef.current = false;
+
    const importLibraryFromURL = async ({
      libraryUrl,
      idToken,
@@ -463,23 +708,209 @@ export const useHandleLibrary = ({
    };

    // -------------------------------------------------------------------------
-    // ------ init load --------------------------------------------------------
-    if (getInitialLibraryRef.current) {
-      excalidrawAPI.updateLibrary({
-        libraryItems: getInitialLibraryRef.current(),
-      });
-    }
+    // ---------------------------------- init ---------------------------------
+    // -------------------------------------------------------------------------

    const libraryUrlTokens = parseLibraryTokensFromUrl();

    if (libraryUrlTokens) {
      importLibraryFromURL(libraryUrlTokens);
    }
+
+    // ------ (A) init load (legacy) -------------------------------------------
+    if (
+      "getInitialLibraryItems" in optsRef.current &&
+      optsRef.current.getInitialLibraryItems
+    ) {
+      console.warn(
+        "useHandleLibrar `opts.getInitialLibraryItems` is deprecated. Use `opts.adapter` instead.",
+      );
+
+      Promise.resolve(optsRef.current.getInitialLibraryItems())
+        .then((libraryItems) => {
+          excalidrawAPI.updateLibrary({
+            libraryItems,
+            // merge with current library items because we may have already
+            // populated it (e.g. by installing 3rd party library which can
+            // happen before the DB data is loaded)
+            merge: true,
+          });
+        })
+        .catch((error: any) => {
+          console.error(
+            `UseHandeLibrary getInitialLibraryItems failed: ${error?.message}`,
+          );
+        });
+    }
+
+    // -------------------------------------------------------------------------
    // --------------------------------------------------------- init load -----
+    // -------------------------------------------------------------------------
+
+    // ------ (B) data source adapter ------------------------------------------
+
+    if ("adapter" in optsRef.current && optsRef.current.adapter) {
+      const adapter = optsRef.current.adapter;
+      const migrationAdapter = optsRef.current.migrationAdapter;
+
+      const initDataPromise = resolvablePromise<LibraryItems | null>();
+
+      // migrate from old data source if needed
+      // (note, if `migrate` function is defined, we always migrate even
+      //  if the data has already been migrated. In that case it'll be a no-op,
+      //  though with several unnecessary steps — we will still load latest
+      //  DB data during the `persistLibraryChange()` step)
+      // -----------------------------------------------------------------------
+      if (migrationAdapter) {
+        initDataPromise.resolve(
+          promiseTry(migrationAdapter.load)
+            .then(async (libraryData) => {
+              let restoredData: LibraryItems | null = null;
+              try {
+                // if no library data to migrate, assume no migration needed
+                // and skip persisting to new data store, as well as well
+                // clearing the old store via `migrationAdapter.clear()`
+                if (!libraryData) {
+                  return AdapterTransaction.getLibraryItems(adapter, "load");
+                }
+
+                restoredData = restoreLibraryItems(
+                  libraryData.libraryItems || [],
+                  "published",
+                );
+
+                // we don't queue this operation because it's running inside
+                // a promise that's running inside Library update queue itself
+                const nextItems = await persistLibraryUpdate(
+                  adapter,
+                  createLibraryUpdate([], restoredData),
+                );
+                try {
+                  await migrationAdapter.clear();
+                } catch (error: any) {
+                  console.error(
+                    `couldn't delete legacy library data: ${error.message}`,
+                  );
+                }
+                // migration suceeded, load migrated data
+                return nextItems;
+              } catch (error: any) {
+                console.error(
+                  `couldn't migrate legacy library data: ${error.message}`,
+                );
+                // migration failed, load data from previous store, if any
+                return restoredData;
+              }
+            })
+            // errors caught during `migrationAdapter.load()`
+            .catch((error: any) => {
+              console.error(`error during library migration: ${error.message}`);
+              // as a default, load latest library from current data source
+              return AdapterTransaction.getLibraryItems(adapter, "load");
+            }),
+        );
+      } else {
+        initDataPromise.resolve(
+          promiseTry(AdapterTransaction.getLibraryItems, adapter, "load"),
+        );
+      }
+
+      // load initial (or migrated) library
+      excalidrawAPI
+        .updateLibrary({
+          libraryItems: initDataPromise.then((libraryItems) => {
+            const _libraryItems = libraryItems || [];
+            lastSavedLibraryItemsHash = getLibraryItemsHash(_libraryItems);
+            return _libraryItems;
+          }),
+          // merge with current library items because we may have already
+          // populated it (e.g. by installing 3rd party library which can
+          // happen before the DB data is loaded)
+          merge: true,
+        })
+        .finally(() => {
+          isLibraryLoadedRef.current = true;
+        });
+    }
+    // ---------------------------------------------- data source datapter -----

    window.addEventListener(EVENT.HASHCHANGE, onHashChange);
    return () => {
      window.removeEventListener(EVENT.HASHCHANGE, onHashChange);
    };
-  }, [excalidrawAPI]);
+  }, [
+    // important this useEffect only depends on excalidrawAPI so it only reruns
+    // on editor remounts (the excalidrawAPI changes)
+    excalidrawAPI,
+  ]);
+
+  // This effect is run without excalidrawAPI dependency so that host apps
+  // can run this hook outside of an active editor instance and the library
+  // update queue/loop survives editor remounts
+  //
+  // This effect is still only meant to be run if host apps supply an persitence
+  // adapter. If we don't have access to it, it the update listener doesn't
+  // do anything.
+  useEffect(
+    () => {
+      // on update, merge with current library items and persist
+      // -----------------------------------------------------------------------
+      const unsubOnLibraryUpdate = onLibraryUpdateEmitter.on(
+        async (update, nextLibraryItems) => {
+          const isLoaded = isLibraryLoadedRef.current;
+          // we want to operate with the latest adapter, but we don't want this
+          // effect to rerun on every adapter change in case host apps' adapter
+          // isn't stable
+          const adapter =
+            ("adapter" in optsRef.current && optsRef.current.adapter) || null;
+          try {
+            if (adapter) {
+              if (
+                // if nextLibraryItems hash identical to previously saved hash,
+                // exit early, even if actual upstream state ends up being
+                // different (e.g. has more data than we have locally), as it'd
+                // be low-impact scenario.
+                lastSavedLibraryItemsHash !==
+                getLibraryItemsHash(nextLibraryItems)
+              ) {
+                await persistLibraryUpdate(adapter, update);
+              }
+            }
+          } catch (error: any) {
+            console.error(
+              `couldn't persist library update: ${error.message}`,
+              update,
+            );
+
+            // currently we only show error if an editor is loaded
+            if (isLoaded && optsRef.current.excalidrawAPI) {
+              optsRef.current.excalidrawAPI.updateScene({
+                appState: {
+                  errorMessage: t("errors.saveLibraryError"),
+                },
+              });
+            }
+          }
+        },
+      );
+
+      const onUnload = (event: Event) => {
+        if (librarySaveCounter) {
+          preventUnload(event);
+        }
+      };
+
+      window.addEventListener(EVENT.BEFORE_UNLOAD, onUnload);
+
+      return () => {
+        window.removeEventListener(EVENT.BEFORE_UNLOAD, onUnload);
+        unsubOnLibraryUpdate();
+        lastSavedLibraryItemsHash = 0;
+        librarySaveCounter = 0;
+      };
+    },
+    [
+      // this effect must not have any deps so it doesn't rerun
+    ],
+  );
 };
@@ -7,8 +7,9 @@ export const resaveAsImageWithScene = async (
  elements: readonly ExcalidrawElement[],
  appState: AppState,
  files: BinaryFiles,
+  name: string,
 ) => {
-  const { exportBackground, viewBackgroundColor, name, fileHandle } = appState;
+  const { exportBackground, viewBackgroundColor, fileHandle } = appState;

  const fileHandleType = getFileHandleType(fileHandle);

@@ -35,14 +35,13 @@ import {
 import { getDefaultAppState } from "../appState";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { bumpVersion } from "../element/mutateElement";
-import { getFontString, getUpdatedTimestamp, updateActiveTool } from "../utils";
+import { getUpdatedTimestamp, updateActiveTool } from "../utils";
 import { arrayToMap } from "../utils";
 import { MarkOptional, Mutable } from "../utility-types";
 import {
  detectLineHeight,
  getContainerElement,
  getDefaultLineHeight,
-  measureBaseline,
 } from "../element/textElement";
 import { normalizeLink } from "./url";

@@ -207,11 +206,6 @@ const restoreElement = (
          : // no element height likely means programmatic use, so default
            // to a fixed line height
            getDefaultLineHeight(element.fontFamily));
-      const baseline = measureBaseline(
-        element.text,
-        getFontString(element),
-        lineHeight,
-      );
      element = restoreElementWithProperties(element, {
        fontSize,
        fontFamily,
@@ -222,7 +216,6 @@ const restoreElement = (
        originalText: element.originalText || text,

        lineHeight,
-        baseline,
      });

      // if empty text, mark as deleted. We keep in array
@@ -462,6 +455,7 @@ export const restoreElements = (
        refreshTextDimensions(
          element,
          getContainerElement(element, restoredElementsMap),
+          restoredElementsMap,
        ),
      );
    }
@@ -822,4 +822,22 @@ describe("Test Transform", () => {
      "Duplicate id found for rect-1",
    );
  });
+
+  it("should contains customData if provided", () => {
+    const rawData = [
+      {
+        type: "rectangle",
+        x: 100,
+        y: 100,
+        customData: { createdBy: "user01" },
+      },
+    ];
+    const convertedElements = convertToExcalidrawElements(
+      rawData as ExcalidrawElementSkeleton[],
+      opts,
+    );
+    expect(convertedElements[0].customData).toStrictEqual({
+      createdBy: "user01",
+    });
+  });
 });
@@ -39,11 +39,12 @@ import {
  ExcalidrawTextElement,
  FileId,
  FontFamilyValues,
+  NonDeletedSceneElementsMap,
  TextAlign,
  VerticalAlign,
 } from "../element/types";
 import { MarkOptional } from "../utility-types";
-import { arrayToMap, assertNever, cloneJSON, getFontString } from "../utils";
+import { assertNever, cloneJSON, getFontString, toBrandedType } from "../utils";
 import { getSizeFromPoints } from "../points";
 import { randomId } from "../random";

@@ -222,7 +223,7 @@ const bindTextToContainer = (
    }),
  });

-  redrawTextBoundingBox(textElement, container);
+  redrawTextBoundingBox(textElement, container, elementsMap);
  return [container, textElement] as const;
 };

@@ -231,6 +232,7 @@ const bindLinearElementToElement = (
  start: ValidLinearElement["start"],
  end: ValidLinearElement["end"],
  elementStore: ElementStore,
+  elementsMap: NonDeletedSceneElementsMap,
 ): {
  linearElement: ExcalidrawLinearElement;
  startBoundElement?: ExcalidrawElement;
@@ -316,6 +318,7 @@ const bindLinearElementToElement = (
        linearElement,
        startBoundElement as ExcalidrawBindableElement,
        "start",
+        elementsMap,
      );
    }
  }
@@ -390,6 +393,7 @@ const bindLinearElementToElement = (
        linearElement,
        endBoundElement as ExcalidrawBindableElement,
        "end",
+        elementsMap,
      );
    }
  }
@@ -457,6 +461,10 @@ class ElementStore {
    return Array.from(this.excalidrawElements.values());
  };

+  getElementsMap = () => {
+    return toBrandedType<NonDeletedSceneElementsMap>(this.excalidrawElements);
+  };
+
  getElement = (id: string) => {
    return this.excalidrawElements.get(id);
  };
@@ -612,6 +620,7 @@ export const convertToExcalidrawElements = (
    }
  }

+  const elementsMap = elementStore.getElementsMap();
  // Add labels and arrow bindings
  for (const [id, element] of elementsWithIds) {
    const excalidrawElement = elementStore.getElement(id)!;
@@ -625,7 +634,7 @@ export const convertToExcalidrawElements = (
          let [container, text] = bindTextToContainer(
            excalidrawElement,
            element?.label,
-            arrayToMap(elementStore.getElements()),
+            elementsMap,
          );
          elementStore.add(container);
          elementStore.add(text);
@@ -653,6 +662,7 @@ export const convertToExcalidrawElements = (
                originalStart,
                originalEnd,
                elementStore,
+                elementsMap,
              );
            container = linearElement;
            elementStore.add(linearElement);
@@ -677,6 +687,7 @@ export const convertToExcalidrawElements = (
                  start,
                  end,
                  elementStore,
+                  elementsMap,
                );

              elementStore.add(linearElement);
@@ -1,6 +1,6 @@
 import { AppState } from "../types";
 import { sceneCoordsToViewportCoords } from "../utils";
-import { NonDeletedExcalidrawElement } from "./types";
+import { ElementsMap, NonDeletedExcalidrawElement } from "./types";
 import { getElementAbsoluteCoords } from ".";
 import { useExcalidrawAppState } from "../components/App";

@@ -11,8 +11,9 @@ const CONTAINER_PADDING = 5;
 const getContainerCoords = (
  element: NonDeletedExcalidrawElement,
  appState: AppState,
+  elementsMap: ElementsMap,
 ) => {
-  const [x1, y1] = getElementAbsoluteCoords(element);
+  const [x1, y1] = getElementAbsoluteCoords(element, elementsMap);
  const { x: viewportX, y: viewportY } = sceneCoordsToViewportCoords(
    { sceneX: x1 + element.width, sceneY: y1 },
    appState,
@@ -25,9 +26,11 @@ const getContainerCoords = (
 export const ElementCanvasButtons = ({
  children,
  element,
+  elementsMap,
 }: {
  children: React.ReactNode;
  element: NonDeletedExcalidrawElement;
+  elementsMap: ElementsMap;
 }) => {
  const appState = useExcalidrawAppState();

@@ -42,7 +45,7 @@ export const ElementCanvasButtons = ({
    return null;
  }

-  const { x, y } = getContainerCoords(element, appState);
+  const { x, y } = getContainerCoords(element, appState, elementsMap);

  return (
    <div
@@ -5,6 +5,8 @@ import {
  NonDeletedExcalidrawElement,
  PointBinding,
  ExcalidrawElement,
+  ElementsMap,
+  NonDeletedSceneElementsMap,
 } from "./types";
 import { getElementAtPosition } from "../scene";
 import { AppState } from "../types";
@@ -66,6 +68,7 @@ export const bindOrUnbindLinearElement = (
  linearElement: NonDeleted<ExcalidrawLinearElement>,
  startBindingElement: ExcalidrawBindableElement | null | "keep",
  endBindingElement: ExcalidrawBindableElement | null | "keep",
+  elementsMap: NonDeletedSceneElementsMap,
 ): void => {
  const boundToElementIds: Set<ExcalidrawBindableElement["id"]> = new Set();
  const unboundFromElementIds: Set<ExcalidrawBindableElement["id"]> = new Set();
@@ -76,6 +79,7 @@ export const bindOrUnbindLinearElement = (
    "start",
    boundToElementIds,
    unboundFromElementIds,
+    elementsMap,
  );
  bindOrUnbindLinearElementEdge(
    linearElement,
@@ -84,6 +88,7 @@ export const bindOrUnbindLinearElement = (
    "end",
    boundToElementIds,
    unboundFromElementIds,
+    elementsMap,
  );

  const onlyUnbound = Array.from(unboundFromElementIds).filter(
@@ -111,6 +116,7 @@ const bindOrUnbindLinearElementEdge = (
  boundToElementIds: Set<ExcalidrawBindableElement["id"]>,
  // Is mutated
  unboundFromElementIds: Set<ExcalidrawBindableElement["id"]>,
+  elementsMap: NonDeletedSceneElementsMap,
 ): void => {
  if (bindableElement !== "keep") {
    if (bindableElement != null) {
@@ -127,7 +133,12 @@ const bindOrUnbindLinearElementEdge = (
          : startOrEnd === "start" ||
            otherEdgeBindableElement.id !== bindableElement.id)
      ) {
-        bindLinearElement(linearElement, bindableElement, startOrEnd);
+        bindLinearElement(
+          linearElement,
+          bindableElement,
+          startOrEnd,
+          elementsMap,
+        );
        boundToElementIds.add(bindableElement.id);
      }
    } else {
@@ -140,31 +151,48 @@ const bindOrUnbindLinearElementEdge = (
 };

 export const bindOrUnbindSelectedElements = (
-  elements: NonDeleted<ExcalidrawElement>[],
+  selectedElements: NonDeleted<ExcalidrawElement>[],
+  elements: readonly ExcalidrawElement[],
+  elementsMap: NonDeletedSceneElementsMap,
 ): void => {
-  elements.forEach((element) => {
-    if (isBindingElement(element)) {
+  selectedElements.forEach((selectedElement) => {
+    if (isBindingElement(selectedElement)) {
      bindOrUnbindLinearElement(
-        element,
-        getElligibleElementForBindingElement(element, "start"),
-        getElligibleElementForBindingElement(element, "end"),
+        selectedElement,
+        getElligibleElementForBindingElement(
+          selectedElement,
+          "start",
+          elements,
+          elementsMap,
+        ),
+        getElligibleElementForBindingElement(
+          selectedElement,
+          "end",
+          elements,
+          elementsMap,
+        ),
+        elementsMap,
      );
-    } else if (isBindableElement(element)) {
-      maybeBindBindableElement(element);
+    } else if (isBindableElement(selectedElement)) {
+      maybeBindBindableElement(selectedElement, elementsMap);
    }
  });
 };

 const maybeBindBindableElement = (
  bindableElement: NonDeleted<ExcalidrawBindableElement>,
+  elementsMap: NonDeletedSceneElementsMap,
 ): void => {
-  getElligibleElementsForBindableElementAndWhere(bindableElement).forEach(
-    ([linearElement, where]) =>
-      bindOrUnbindLinearElement(
-        linearElement,
-        where === "end" ? "keep" : bindableElement,
-        where === "start" ? "keep" : bindableElement,
-      ),
+  getElligibleElementsForBindableElementAndWhere(
+    bindableElement,
+    elementsMap,
+  ).forEach(([linearElement, where]) =>
+    bindOrUnbindLinearElement(
+      linearElement,
+      where === "end" ? "keep" : bindableElement,
+      where === "start" ? "keep" : bindableElement,
+      elementsMap,
+    ),
  );
 };

@@ -173,11 +201,21 @@ export const maybeBindLinearElement = (
  appState: AppState,
  scene: Scene,
  pointerCoords: { x: number; y: number },
+  elementsMap: NonDeletedSceneElementsMap,
 ): void => {
  if (appState.startBoundElement != null) {
-    bindLinearElement(linearElement, appState.startBoundElement, "start");
+    bindLinearElement(
+      linearElement,
+      appState.startBoundElement,
+      "start",
+      elementsMap,
+    );
  }
-  const hoveredElement = getHoveredElementForBinding(pointerCoords, scene);
+  const hoveredElement = getHoveredElementForBinding(
+    pointerCoords,
+    scene.getNonDeletedElements(),
+    elementsMap,
+  );
  if (
    hoveredElement != null &&
    !isLinearElementSimpleAndAlreadyBoundOnOppositeEdge(
@@ -186,7 +224,7 @@ export const maybeBindLinearElement = (
      "end",
    )
  ) {
-    bindLinearElement(linearElement, hoveredElement, "end");
+    bindLinearElement(linearElement, hoveredElement, "end", elementsMap);
  }
 };

@@ -194,11 +232,17 @@ export const bindLinearElement = (
  linearElement: NonDeleted<ExcalidrawLinearElement>,
  hoveredElement: ExcalidrawBindableElement,
  startOrEnd: "start" | "end",
+  elementsMap: NonDeletedSceneElementsMap,
 ): void => {
  mutateElement(linearElement, {
    [startOrEnd === "start" ? "startBinding" : "endBinding"]: {
      elementId: hoveredElement.id,
-      ...calculateFocusAndGap(linearElement, hoveredElement, startOrEnd),
+      ...calculateFocusAndGap(
+        linearElement,
+        hoveredElement,
+        startOrEnd,
+        elementsMap,
+      ),
    } as PointBinding,
  });

@@ -240,10 +284,11 @@ export const isLinearElementSimpleAndAlreadyBound = (

 export const unbindLinearElements = (
  elements: NonDeleted<ExcalidrawElement>[],
+  elementsMap: NonDeletedSceneElementsMap,
 ): void => {
  elements.forEach((element) => {
    if (isBindingElement(element)) {
-      bindOrUnbindLinearElement(element, null, null);
+      bindOrUnbindLinearElement(element, null, null, elementsMap);
    }
  });
 };
@@ -266,13 +311,14 @@ export const getHoveredElementForBinding = (
    x: number;
    y: number;
  },
-  scene: Scene,
+  elements: readonly NonDeletedExcalidrawElement[],
+  elementsMap: NonDeletedSceneElementsMap,
 ): NonDeleted<ExcalidrawBindableElement> | null => {
  const hoveredElement = getElementAtPosition(
-    scene.getNonDeletedElements(),
+    elements,
    (element) =>
      isBindableElement(element, false) &&
-      bindingBorderTest(element, pointerCoords),
+      bindingBorderTest(element, pointerCoords, elementsMap),
  );
  return hoveredElement as NonDeleted<ExcalidrawBindableElement> | null;
 };
@@ -281,21 +327,33 @@ const calculateFocusAndGap = (
  linearElement: NonDeleted<ExcalidrawLinearElement>,
  hoveredElement: ExcalidrawBindableElement,
  startOrEnd: "start" | "end",
+  elementsMap: NonDeletedSceneElementsMap,
 ): { focus: number; gap: number } => {
  const direction = startOrEnd === "start" ? -1 : 1;
  const edgePointIndex = direction === -1 ? 0 : linearElement.points.length - 1;
  const adjacentPointIndex = edgePointIndex - direction;
+
  const edgePoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(
    linearElement,
    edgePointIndex,
+    elementsMap,
  );
  const adjacentPoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(
    linearElement,
    adjacentPointIndex,
+    elementsMap,
  );
  return {
-    focus: determineFocusDistance(hoveredElement, adjacentPoint, edgePoint),
-    gap: Math.max(1, distanceToBindableElement(hoveredElement, edgePoint)),
+    focus: determineFocusDistance(
+      hoveredElement,
+      adjacentPoint,
+      edgePoint,
+      elementsMap,
+    ),
+    gap: Math.max(
+      1,
+      distanceToBindableElement(hoveredElement, edgePoint, elementsMap),
+    ),
  };
 };

@@ -306,6 +364,8 @@ const calculateFocusAndGap = (
 // in explicitly.
 export const updateBoundElements = (
  changedElement: NonDeletedExcalidrawElement,
+  elementsMap: ElementsMap,
+
  options?: {
    simultaneouslyUpdated?: readonly ExcalidrawElement[];
    newSize?: { width: number; height: number };
@@ -355,12 +415,14 @@ export const updateBoundElements = (
      "start",
      startBinding,
      changedElement as ExcalidrawBindableElement,
+      elementsMap,
    );
    updateBoundPoint(
      element,
      "end",
      endBinding,
      changedElement as ExcalidrawBindableElement,
+      elementsMap,
    );
    const boundText = getBoundTextElement(
      element,
@@ -393,6 +455,7 @@ const updateBoundPoint = (
  startOrEnd: "start" | "end",
  binding: PointBinding | null | undefined,
  changedElement: ExcalidrawBindableElement,
+  elementsMap: ElementsMap,
 ): void => {
  if (
    binding == null ||
@@ -414,11 +477,13 @@ const updateBoundPoint = (
  const adjacentPoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(
    linearElement,
    adjacentPointIndex,
+    elementsMap,
  );
  const focusPointAbsolute = determineFocusPoint(
    bindingElement,
    binding.focus,
    adjacentPoint,
+    elementsMap,
  );
  let newEdgePoint;
  // The linear element was not originally pointing inside the bound shape,
@@ -431,6 +496,7 @@ const updateBoundPoint = (
      adjacentPoint,
      focusPointAbsolute,
      binding.gap,
+      elementsMap,
    );
    if (intersections.length === 0) {
      // This should never happen, since focusPoint should always be
@@ -449,6 +515,7 @@ const updateBoundPoint = (
        point: LinearElementEditor.pointFromAbsoluteCoords(
          linearElement,
          newEdgePoint,
+          elementsMap,
        ),
      },
    ],
@@ -479,30 +546,47 @@ const maybeCalculateNewGapWhenScaling = (

 // TODO: this is a bottleneck, optimise
 export const getEligibleElementsForBinding = (
-  elements: NonDeleted<ExcalidrawElement>[],
+  selectedElements: NonDeleted<ExcalidrawElement>[],
+  elements: readonly ExcalidrawElement[],
+  elementsMap: NonDeletedSceneElementsMap,
 ): SuggestedBinding[] => {
-  const includedElementIds = new Set(elements.map(({ id }) => id));
-  return elements.flatMap((element) =>
-    isBindingElement(element, false)
+  const includedElementIds = new Set(selectedElements.map(({ id }) => id));
+  return selectedElements.flatMap((selectedElement) =>
+    isBindingElement(selectedElement, false)
      ? (getElligibleElementsForBindingElement(
-          element as NonDeleted<ExcalidrawLinearElement>,
+          selectedElement as NonDeleted<ExcalidrawLinearElement>,
+          elements,
+          elementsMap,
        ).filter(
          (element) => !includedElementIds.has(element.id),
        ) as SuggestedBinding[])
-      : isBindableElement(element, false)
-      ? getElligibleElementsForBindableElementAndWhere(element).filter(
-          (binding) => !includedElementIds.has(binding[0].id),
-        )
+      : isBindableElement(selectedElement, false)
+      ? getElligibleElementsForBindableElementAndWhere(
+          selectedElement,
+          elementsMap,
+        ).filter((binding) => !includedElementIds.has(binding[0].id))
      : [],
  );
 };

 const getElligibleElementsForBindingElement = (
  linearElement: NonDeleted<ExcalidrawLinearElement>,
+  elements: readonly ExcalidrawElement[],
+  elementsMap: NonDeletedSceneElementsMap,
 ): NonDeleted<ExcalidrawBindableElement>[] => {
  return [
-    getElligibleElementForBindingElement(linearElement, "start"),
-    getElligibleElementForBindingElement(linearElement, "end"),
+    getElligibleElementForBindingElement(
+      linearElement,
+      "start",
+      elements,
+      elementsMap,
+    ),
+    getElligibleElementForBindingElement(
+      linearElement,
+      "end",
+      elements,
+      elementsMap,
+    ),
  ].filter(
    (element): element is NonDeleted<ExcalidrawBindableElement> =>
      element != null,
@@ -512,27 +596,37 @@ const getElligibleElementsForBindingElement = (
 const getElligibleElementForBindingElement = (
  linearElement: NonDeleted<ExcalidrawLinearElement>,
  startOrEnd: "start" | "end",
+  elements: readonly ExcalidrawElement[],
+  elementsMap: NonDeletedSceneElementsMap,
 ): NonDeleted<ExcalidrawBindableElement> | null => {
  return getHoveredElementForBinding(
-    getLinearElementEdgeCoors(linearElement, startOrEnd),
-    Scene.getScene(linearElement)!,
+    getLinearElementEdgeCoors(linearElement, startOrEnd, elementsMap),
+    elements,
+    elementsMap,
  );
 };

 const getLinearElementEdgeCoors = (
  linearElement: NonDeleted<ExcalidrawLinearElement>,
  startOrEnd: "start" | "end",
+  elementsMap: NonDeletedSceneElementsMap,
 ): { x: number; y: number } => {
  const index = startOrEnd === "start" ? 0 : -1;
  return tupleToCoors(
-    LinearElementEditor.getPointAtIndexGlobalCoordinates(linearElement, index),
+    LinearElementEditor.getPointAtIndexGlobalCoordinates(
+      linearElement,
+      index,
+      elementsMap,
+    ),
  );
 };

 const getElligibleElementsForBindableElementAndWhere = (
  bindableElement: NonDeleted<ExcalidrawBindableElement>,
+  elementsMap: NonDeletedSceneElementsMap,
 ): SuggestedPointBinding[] => {
-  return Scene.getScene(bindableElement)!
+  const scene = Scene.getScene(bindableElement)!;
+  return scene
    .getNonDeletedElements()
    .map((element) => {
      if (!isBindingElement(element, false)) {
@@ -542,11 +636,13 @@ const getElligibleElementsForBindableElementAndWhere = (
        element,
        "start",
        bindableElement,
+        elementsMap,
      );
      const canBindEnd = isLinearElementEligibleForNewBindingByBindable(
        element,
        "end",
        bindableElement,
+        elementsMap,
      );
      if (!canBindStart && !canBindEnd) {
        return null;
@@ -564,6 +660,7 @@ const isLinearElementEligibleForNewBindingByBindable = (
  linearElement: NonDeleted<ExcalidrawLinearElement>,
  startOrEnd: "start" | "end",
  bindableElement: NonDeleted<ExcalidrawBindableElement>,
+  elementsMap: NonDeletedSceneElementsMap,
 ): boolean => {
  const existingBinding =
    linearElement[startOrEnd === "start" ? "startBinding" : "endBinding"];
@@ -576,7 +673,8 @@ const isLinearElementEligibleForNewBindingByBindable = (
    ) &&
    bindingBorderTest(
      bindableElement,
-      getLinearElementEdgeCoors(linearElement, startOrEnd),
+      getLinearElementEdgeCoors(linearElement, startOrEnd, elementsMap),
+      elementsMap,
    )
  );
 };
@@ -1,4 +1,5 @@
 import { ROUNDNESS } from "../constants";
+import { arrayToMap } from "../utils";
 import { getElementAbsoluteCoords, getElementBounds } from "./bounds";
 import { ExcalidrawElement, ExcalidrawLinearElement } from "./types";

@@ -35,35 +36,41 @@ const _ce = ({

 describe("getElementAbsoluteCoords", () => {
  it("test x1 coordinate", () => {
-    const [x1] = getElementAbsoluteCoords(_ce({ x: 10, y: 0, w: 10, h: 0 }));
+    const element = _ce({ x: 10, y: 20, w: 10, h: 0 });
+    const [x1] = getElementAbsoluteCoords(element, arrayToMap([element]));
    expect(x1).toEqual(10);
  });

  it("test x2 coordinate", () => {
-    const [, , x2] = getElementAbsoluteCoords(
-      _ce({ x: 10, y: 0, w: 10, h: 0 }),
-    );
+    const element = _ce({ x: 10, y: 20, w: 10, h: 0 });
+    const [, , x2] = getElementAbsoluteCoords(element, arrayToMap([element]));
    expect(x2).toEqual(20);
  });

  it("test y1 coordinate", () => {
-    const [, y1] = getElementAbsoluteCoords(_ce({ x: 0, y: 10, w: 0, h: 10 }));
+    const element = _ce({ x: 0, y: 10, w: 0, h: 10 });
+    const [, y1] = getElementAbsoluteCoords(element, arrayToMap([element]));
    expect(y1).toEqual(10);
  });

  it("test y2 coordinate", () => {
-    const [, , , y2] = getElementAbsoluteCoords(
-      _ce({ x: 0, y: 10, w: 0, h: 10 }),
-    );
+    const element = _ce({ x: 0, y: 10, w: 0, h: 10 });
+    const [, , , y2] = getElementAbsoluteCoords(element, arrayToMap([element]));
    expect(y2).toEqual(20);
  });
 });

 describe("getElementBounds", () => {
  it("rectangle", () => {
-    const [x1, y1, x2, y2] = getElementBounds(
-      _ce({ x: 40, y: 30, w: 20, h: 10, a: Math.PI / 4, t: "rectangle" }),
-    );
+    const element = _ce({
+      x: 40,
+      y: 30,
+      w: 20,
+      h: 10,
+      a: Math.PI / 4,
+      t: "rectangle",
+    });
+    const [x1, y1, x2, y2] = getElementBounds(element, arrayToMap([element]));
    expect(x1).toEqual(39.39339828220179);
    expect(y1).toEqual(24.393398282201787);
    expect(x2).toEqual(60.60660171779821);
@@ -71,9 +78,17 @@ describe("getElementBounds", () => {
  });

  it("diamond", () => {
-    const [x1, y1, x2, y2] = getElementBounds(
-      _ce({ x: 40, y: 30, w: 20, h: 10, a: Math.PI / 4, t: "diamond" }),
-    );
+    const element = _ce({
+      x: 40,
+      y: 30,
+      w: 20,
+      h: 10,
+      a: Math.PI / 4,
+      t: "diamond",
+    });
+
+    const [x1, y1, x2, y2] = getElementBounds(element, arrayToMap([element]));
+
    expect(x1).toEqual(42.928932188134524);
    expect(y1).toEqual(27.928932188134524);
    expect(x2).toEqual(57.071067811865476);
@@ -81,9 +96,16 @@ describe("getElementBounds", () => {
  });

  it("ellipse", () => {
-    const [x1, y1, x2, y2] = getElementBounds(
-      _ce({ x: 40, y: 30, w: 20, h: 10, a: Math.PI / 4, t: "ellipse" }),
-    );
+    const element = _ce({
+      x: 40,
+      y: 30,
+      w: 20,
+      h: 10,
+      a: Math.PI / 4,
+      t: "ellipse",
+    });
+
+    const [x1, y1, x2, y2] = getElementBounds(element, arrayToMap([element]));
    expect(x1).toEqual(42.09430584957905);
    expect(y1).toEqual(27.09430584957905);
    expect(x2).toEqual(57.90569415042095);
@@ -91,7 +113,7 @@ describe("getElementBounds", () => {
  });

  it("curved line", () => {
-    const [x1, y1, x2, y2] = getElementBounds({
+    const element = {
      ..._ce({
        t: "line",
        x: 449.58203125,
@@ -105,7 +127,9 @@ describe("getElementBounds", () => {
        [67.33984375, 92.48828125] as [number, number],
        [-102.7890625, 52.15625] as [number, number],
      ],
-    } as ExcalidrawLinearElement);
+    } as ExcalidrawLinearElement;
+
+    const [x1, y1, x2, y2] = getElementBounds(element, arrayToMap([element]));
    expect(x1).toEqual(360.3176068760539);
    expect(y1).toEqual(185.90654264413516);
    expect(x2).toEqual(480.87005902729743);
@@ -5,7 +5,6 @@ import {
  ExcalidrawFreeDrawElement,
  NonDeleted,
  ExcalidrawTextElementWithContainer,
-  ElementsMapOrArray,
  ElementsMap,
 } from "./types";
 import { distance2d, rotate, rotatePoint } from "../math";
@@ -25,7 +24,7 @@ import { getBoundTextElement, getContainerElement } from "./textElement";
 import { LinearElementEditor } from "./linearElementEditor";
 import { Mutable } from "../utility-types";
 import { ShapeCache } from "../scene/ShapeCache";
-import Scene from "../scene/Scene";
+import { arrayToMap } from "../utils";

 export type RectangleBox = {
  x: number;
@@ -63,7 +62,7 @@ export class ElementBounds {
    }
  >();

-  static getBounds(element: ExcalidrawElement) {
+  static getBounds(element: ExcalidrawElement, elementsMap: ElementsMap) {
    const cachedBounds = ElementBounds.boundsCache.get(element);

    if (
@@ -75,23 +74,12 @@ export class ElementBounds {
    ) {
      return cachedBounds.bounds;
    }
-    const scene = Scene.getScene(element);
-    const bounds = ElementBounds.calculateBounds(
-      element,
-      scene?.getNonDeletedElementsMap() || new Map(),
-    );
+    const bounds = ElementBounds.calculateBounds(element, elementsMap);

-    // hack to ensure that downstream checks could retrieve element Scene
-    // so as to have correctly calculated bounds
-    // FIXME remove when we get rid of all the id:Scene / element:Scene mapping
-    const shouldCache = !!scene;
-
-    if (shouldCache) {
-      ElementBounds.boundsCache.set(element, {
-        version: element.version,
-        bounds,
-      });
-    }
+    ElementBounds.boundsCache.set(element, {
+      version: element.version,
+      bounds,
+    });

    return bounds;
  }
@@ -102,8 +90,10 @@ export class ElementBounds {
  ): Bounds {
    let bounds: Bounds;

-    const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(element);
-
+    const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(
+      element,
+      elementsMap,
+    );
    if (isFreeDrawElement(element)) {
      const [minX, minY, maxX, maxY] = getBoundsFromPoints(
        element.points.map(([x, y]) =>
@@ -159,10 +149,9 @@ export class ElementBounds {
 // This set of functions retrieves the absolute position of the 4 points.
 export const getElementAbsoluteCoords = (
  element: ExcalidrawElement,
+  elementsMap: ElementsMap,
  includeBoundText: boolean = false,
 ): [number, number, number, number, number, number] => {
-  const elementsMap =
-    Scene.getScene(element)?.getElementsMapIncludingDeleted() || new Map();
  if (isFreeDrawElement(element)) {
    return getFreeDrawElementAbsoluteCoords(element);
  } else if (isLinearElement(element)) {
@@ -179,6 +168,7 @@ export const getElementAbsoluteCoords = (
      const coords = LinearElementEditor.getBoundTextElementPosition(
        container,
        element as ExcalidrawTextElementWithContainer,
+        elementsMap,
      );
      return [
        coords.x,
@@ -207,8 +197,12 @@ export const getElementAbsoluteCoords = (
 */
 export const getElementLineSegments = (
  element: ExcalidrawElement,
+  elementsMap: ElementsMap,
 ): [Point, Point][] => {
-  const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(element);
+  const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(
+    element,
+    elementsMap,
+  );

  const center: Point = [cx, cy];

@@ -703,6 +697,7 @@ const getLinearElementRotatedBounds = (
    if (boundTextElement) {
      const coordsWithBoundText = LinearElementEditor.getMinMaxXYWithBoundText(
        element,
+        elementsMap,
        [x, y, x, y],
        boundTextElement,
      );
@@ -727,6 +722,7 @@ const getLinearElementRotatedBounds = (
  if (boundTextElement) {
    const coordsWithBoundText = LinearElementEditor.getMinMaxXYWithBoundText(
      element,
+      elementsMap,
      coords,
      boundTextElement,
    );
@@ -740,11 +736,17 @@ const getLinearElementRotatedBounds = (
  return coords;
 };

-export const getElementBounds = (element: ExcalidrawElement): Bounds => {
-  return ElementBounds.getBounds(element);
+export const getElementBounds = (
+  element: ExcalidrawElement,
+  elementsMap: ElementsMap,
+): Bounds => {
+  return ElementBounds.getBounds(element, elementsMap);
 };
-export const getCommonBounds = (elements: ElementsMapOrArray): Bounds => {
-  if ("size" in elements ? !elements.size : !elements.length) {
+
+export const getCommonBounds = (
+  elements: readonly ExcalidrawElement[],
+): Bounds => {
+  if (!elements.length) {
    return [0, 0, 0, 0];
  }

@@ -753,8 +755,10 @@ export const getCommonBounds = (elements: ElementsMapOrArray): Bounds => {
  let minY = Infinity;
  let maxY = -Infinity;

+  const elementsMap = arrayToMap(elements);
+
  elements.forEach((element) => {
-    const [x1, y1, x2, y2] = getElementBounds(element);
+    const [x1, y1, x2, y2] = getElementBounds(element, elementsMap);
    minX = Math.min(minX, x1);
    minY = Math.min(minY, y1);
    maxX = Math.max(maxX, x2);
@@ -860,9 +864,9 @@ export const getClosestElementBounds = (

  let minDistance = Infinity;
  let closestElement = elements[0];
-
+  const elementsMap = arrayToMap(elements);
  elements.forEach((element) => {
-    const [x1, y1, x2, y2] = getElementBounds(element);
+    const [x1, y1, x2, y2] = getElementBounds(element, elementsMap);
    const distance = distance2d((x1 + x2) / 2, (y1 + y2) / 2, from.x, from.y);

    if (distance < minDistance) {
@@ -871,7 +875,7 @@ export const getClosestElementBounds = (
    }
  });

-  return getElementBounds(closestElement);
+  return getElementBounds(closestElement, elementsMap);
 };

 export interface BoundingBox {
@@ -91,6 +91,7 @@ export const hitTest = (
  ) {
    return isPointHittingElementBoundingBox(
      element,
+      elementsMap,
      point,
      threshold,
      frameNameBoundsCache,
@@ -116,6 +117,7 @@ export const hitTest = (
    appState,
    frameNameBoundsCache,
    point,
+    elementsMap,
  );
 };

@@ -145,9 +147,11 @@ export const isHittingElementBoundingBoxWithoutHittingElement = (
      appState,
      frameNameBoundsCache,
      [x, y],
+      elementsMap,
    ) &&
    isPointHittingElementBoundingBox(
      element,
+      elementsMap,
      [x, y],
      threshold,
      frameNameBoundsCache,
@@ -160,6 +164,7 @@ export const isHittingElementNotConsideringBoundingBox = (
  appState: AppState,
  frameNameBoundsCache: FrameNameBoundsCache | null,
  point: Point,
+  elementsMap: ElementsMap,
 ): boolean => {
  const threshold = 10 / appState.zoom.value;
  const check = isTextElement(element)
@@ -169,6 +174,7 @@ export const isHittingElementNotConsideringBoundingBox = (
    : isNearCheck;
  return hitTestPointAgainstElement({
    element,
+    elementsMap,
    point,
    threshold,
    check,
@@ -183,6 +189,7 @@ const isElementSelected = (

 export const isPointHittingElementBoundingBox = (
  element: NonDeleted<ExcalidrawElement>,
+  elementsMap: ElementsMap,
  [x, y]: Point,
  threshold: number,
  frameNameBoundsCache: FrameNameBoundsCache | null,
@@ -194,6 +201,7 @@ export const isPointHittingElementBoundingBox = (
  if (isFrameLikeElement(element)) {
    return hitTestPointAgainstElement({
      element,
+      elementsMap,
      point: [x, y],
      threshold,
      check: isInsideCheck,
@@ -201,7 +209,7 @@ export const isPointHittingElementBoundingBox = (
    });
  }

-  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
  const elementCenterX = (x1 + x2) / 2;
  const elementCenterY = (y1 + y2) / 2;
  // reverse rotate to take element's angle into account.
@@ -224,12 +232,14 @@ export const isPointHittingElementBoundingBox = (
 export const bindingBorderTest = (
  element: NonDeleted<ExcalidrawBindableElement>,
  { x, y }: { x: number; y: number },
+  elementsMap: ElementsMap,
 ): boolean => {
  const threshold = maxBindingGap(element, element.width, element.height);
  const check = isOutsideCheck;
  const point: Point = [x, y];
  return hitTestPointAgainstElement({
    element,
+    elementsMap,
    point,
    threshold,
    check,
@@ -251,6 +261,7 @@ export const maxBindingGap = (

 type HitTestArgs = {
  element: NonDeletedExcalidrawElement;
+  elementsMap: ElementsMap;
  point: Point;
  threshold: number;
  check: (distance: number, threshold: number) => boolean;
@@ -266,19 +277,28 @@ const hitTestPointAgainstElement = (args: HitTestArgs): boolean => {
    case "text":
    case "diamond":
    case "ellipse":
-      const distance = distanceToBindableElement(args.element, args.point);
+      const distance = distanceToBindableElement(
+        args.element,
+        args.point,
+        args.elementsMap,
+      );
      return args.check(distance, args.threshold);
    case "freedraw": {
      if (
        !args.check(
-          distanceToRectangle(args.element, args.point),
+          distanceToRectangle(args.element, args.point, args.elementsMap),
          args.threshold,
        )
      ) {
        return false;
      }

-      return hitTestFreeDrawElement(args.element, args.point, args.threshold);
+      return hitTestFreeDrawElement(
+        args.element,
+        args.point,
+        args.threshold,
+        args.elementsMap,
+      );
    }
    case "arrow":
    case "line":
@@ -293,7 +313,7 @@ const hitTestPointAgainstElement = (args: HitTestArgs): boolean => {
      // check distance to frame element first
      if (
        args.check(
-          distanceToBindableElement(args.element, args.point),
+          distanceToBindableElement(args.element, args.point, args.elementsMap),
          args.threshold,
        )
      ) {
@@ -316,6 +336,7 @@ const hitTestPointAgainstElement = (args: HitTestArgs): boolean => {
 export const distanceToBindableElement = (
  element: ExcalidrawBindableElement,
  point: Point,
+  elementsMap: ElementsMap,
 ): number => {
  switch (element.type) {
    case "rectangle":
@@ -325,11 +346,11 @@ export const distanceToBindableElement = (
    case "embeddable":
    case "frame":
    case "magicframe":
-      return distanceToRectangle(element, point);
+      return distanceToRectangle(element, point, elementsMap);
    case "diamond":
-      return distanceToDiamond(element, point);
+      return distanceToDiamond(element, point, elementsMap);
    case "ellipse":
-      return distanceToEllipse(element, point);
+      return distanceToEllipse(element, point, elementsMap);
  }
 };

@@ -358,8 +379,13 @@ const distanceToRectangle = (
    | ExcalidrawIframeLikeElement
    | ExcalidrawFrameLikeElement,
  point: Point,
+  elementsMap: ElementsMap,
 ): number => {
-  const [, pointRel, hwidth, hheight] = pointRelativeToElement(element, point);
+  const [, pointRel, hwidth, hheight] = pointRelativeToElement(
+    element,
+    point,
+    elementsMap,
+  );
  return Math.max(
    GAPoint.distanceToLine(pointRel, GALine.equation(0, 1, -hheight)),
    GAPoint.distanceToLine(pointRel, GALine.equation(1, 0, -hwidth)),
@@ -377,8 +403,13 @@ const distanceToRectangleBox = (box: RectangleBox, point: Point): number => {
 const distanceToDiamond = (
  element: ExcalidrawDiamondElement,
  point: Point,
+  elementsMap: ElementsMap,
 ): number => {
-  const [, pointRel, hwidth, hheight] = pointRelativeToElement(element, point);
+  const [, pointRel, hwidth, hheight] = pointRelativeToElement(
+    element,
+    point,
+    elementsMap,
+  );
  const side = GALine.equation(hheight, hwidth, -hheight * hwidth);
  return GAPoint.distanceToLine(pointRel, side);
 };
@@ -386,16 +417,22 @@ const distanceToDiamond = (
 const distanceToEllipse = (
  element: ExcalidrawEllipseElement,
  point: Point,
+  elementsMap: ElementsMap,
 ): number => {
-  const [pointRel, tangent] = ellipseParamsForTest(element, point);
+  const [pointRel, tangent] = ellipseParamsForTest(element, point, elementsMap);
  return -GALine.sign(tangent) * GAPoint.distanceToLine(pointRel, tangent);
 };

 const ellipseParamsForTest = (
  element: ExcalidrawEllipseElement,
  point: Point,
+  elementsMap: ElementsMap,
 ): [GA.Point, GA.Line] => {
-  const [, pointRel, hwidth, hheight] = pointRelativeToElement(element, point);
+  const [, pointRel, hwidth, hheight] = pointRelativeToElement(
+    element,
+    point,
+    elementsMap,
+  );
  const [px, py] = GAPoint.toTuple(pointRel);

  // We're working in positive quadrant, so start with `t = 45deg`, `tx=cos(t)`
@@ -440,6 +477,7 @@ const hitTestFreeDrawElement = (
  element: ExcalidrawFreeDrawElement,
  point: Point,
  threshold: number,
+  elementsMap: ElementsMap,
 ): boolean => {
  // Check point-distance-to-line-segment for every segment in the
  // element's points (its input points, not its outline points).
@@ -454,7 +492,10 @@ const hitTestFreeDrawElement = (
    y = point[1] - element.y;
  } else {
    // Counter-rotate the point around center before testing
-    const [minX, minY, maxX, maxY] = getElementAbsoluteCoords(element);
+    const [minX, minY, maxX, maxY] = getElementAbsoluteCoords(
+      element,
+      elementsMap,
+    );
    const rotatedPoint = rotatePoint(
      point,
      [minX + (maxX - minX) / 2, minY + (maxY - minY) / 2],
@@ -520,6 +561,7 @@ const hitTestLinear = (args: HitTestArgs): boolean => {
  const [point, pointAbs, hwidth, hheight] = pointRelativeToElement(
    args.element,
    args.point,
+    args.elementsMap,
  );
  const side1 = GALine.equation(0, 1, -hheight);
  const side2 = GALine.equation(1, 0, -hwidth);
@@ -572,9 +614,10 @@ const hitTestLinear = (args: HitTestArgs): boolean => {
 const pointRelativeToElement = (
  element: ExcalidrawElement,
  pointTuple: Point,
+  elementsMap: ElementsMap,
 ): [GA.Point, GA.Point, number, number] => {
  const point = GAPoint.from(pointTuple);
-  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
  const center = coordsCenter(x1, y1, x2, y2);
  // GA has angle orientation opposite to `rotate`
  const rotate = GATransform.rotation(center, element.angle);
@@ -609,11 +652,12 @@ const pointRelativeToDivElement = (
 // Returns point in absolute coordinates
 export const pointInAbsoluteCoords = (
  element: ExcalidrawElement,
+  elementsMap: ElementsMap,
  // Point relative to the element position
  point: Point,
 ): Point => {
  const [x, y] = point;
-  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
  const cx = (x2 - x1) / 2;
  const cy = (y2 - y1) / 2;
  const [rotatedX, rotatedY] = rotate(x, y, cx, cy, element.angle);
@@ -622,8 +666,9 @@ export const pointInAbsoluteCoords = (

 const relativizationToElementCenter = (
  element: ExcalidrawElement,
+  elementsMap: ElementsMap,
 ): GA.Transform => {
-  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
  const center = coordsCenter(x1, y1, x2, y2);
  // GA has angle orientation opposite to `rotate`
  const rotate = GATransform.rotation(center, element.angle);
@@ -649,12 +694,14 @@ const coordsCenter = (
 // of the element.
 export const determineFocusDistance = (
  element: ExcalidrawBindableElement,
+
  // Point on the line, in absolute coordinates
  a: Point,
  // Another point on the line, in absolute coordinates (closer to element)
  b: Point,
+  elementsMap: ElementsMap,
 ): number => {
-  const relateToCenter = relativizationToElementCenter(element);
+  const relateToCenter = relativizationToElementCenter(element, elementsMap);
  const aRel = GATransform.apply(relateToCenter, GAPoint.from(a));
  const bRel = GATransform.apply(relateToCenter, GAPoint.from(b));
  const line = GALine.through(aRel, bRel);
@@ -693,13 +740,14 @@ export const determineFocusPoint = (
  // returned focusPoint
  focus: number,
  adjecentPoint: Point,
+  elementsMap: ElementsMap,
 ): Point => {
  if (focus === 0) {
-    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
    const center = coordsCenter(x1, y1, x2, y2);
    return GAPoint.toTuple(center);
  }
-  const relateToCenter = relativizationToElementCenter(element);
+  const relateToCenter = relativizationToElementCenter(element, elementsMap);
  const adjecentPointRel = GATransform.apply(
    relateToCenter,
    GAPoint.from(adjecentPoint),
@@ -728,14 +776,16 @@ export const determineFocusPoint = (
 // and the `element`, in ascending order of distance from `a`.
 export const intersectElementWithLine = (
  element: ExcalidrawBindableElement,
+
  // Point on the line, in absolute coordinates
  a: Point,
  // Another point on the line, in absolute coordinates
  b: Point,
  // If given, the element is inflated by this value
  gap: number = 0,
+  elementsMap: ElementsMap,
 ): Point[] => {
-  const relateToCenter = relativizationToElementCenter(element);
+  const relateToCenter = relativizationToElementCenter(element, elementsMap);
  const aRel = GATransform.apply(relateToCenter, GAPoint.from(a));
  const bRel = GATransform.apply(relateToCenter, GAPoint.from(b));
  const line = GALine.through(aRel, bRel);
@@ -65,7 +65,7 @@ export const dragSelectedElements = (
        updateElementCoords(pointerDownState, textElement, adjustedOffset);
      }
    }
-    updateBoundElements(element, {
+    updateBoundElements(element, scene.getElementsMapIncludingDeleted(), {
      simultaneouslyUpdated: Array.from(elementsToUpdate),
    });
  });
@@ -3,7 +3,6 @@
 // -----------------------------------------------------------------------------

 import { MIME_TYPES, SVG_NS } from "../constants";
-import { t } from "../i18n";
 import { AppClassProperties, DataURL, BinaryFiles } from "../types";
 import { isInitializedImageElement } from "./typeChecks";
 import {
@@ -100,7 +99,7 @@ export const normalizeSVG = async (SVGString: string) => {
  const svg = doc.querySelector("svg");
  const errorNode = doc.querySelector("parsererror");
  if (errorNode || !isHTMLSVGElement(svg)) {
-    throw new Error(t("errors.invalidSVGString"));
+    throw new Error("Invalid SVG");
  } else {
    if (!svg.hasAttribute("xmlns")) {
      svg.setAttribute("xmlns", SVG_NS);
@@ -60,9 +60,36 @@ export {
 } from "./sizeHelpers";
 export { showSelectedShapeActions } from "./showSelectedShapeActions";

+/**
+ * @deprecated unsafe, use hashElementsVersion instead
+ */
 export const getSceneVersion = (elements: readonly ExcalidrawElement[]) =>
  elements.reduce((acc, el) => acc + el.version, 0);

+/**
+ * Hashes elements' versionNonce (using djb2 algo). Order of elements matters.
+ */
+export const hashElementsVersion = (
+  elements: readonly ExcalidrawElement[],
+): number => {
+  let hash = 5381;
+  for (let i = 0; i < elements.length; i++) {
+    hash = (hash << 5) + hash + elements[i].versionNonce;
+  }
+  return hash >>> 0; // Ensure unsigned 32-bit integer
+};
+
+// string hash function (using djb2). Not cryptographically secure, use only
+// for versioning and such.
+export const hashString = (s: string): number => {
+  let hash: number = 5381;
+  for (let i = 0; i < s.length; i++) {
+    const char: number = s.charCodeAt(i);
+    hash = (hash << 5) + hash + char;
+  }
+  return hash >>> 0; // Ensure unsigned 32-bit integer
+};
+
 export const getVisibleElements = (elements: readonly ExcalidrawElement[]) =>
  elements.filter(
    (el) => !el.isDeleted && !isInvisiblySmallElement(el),
@@ -6,6 +6,8 @@ import {
  ExcalidrawBindableElement,
  ExcalidrawTextElementWithContainer,
  ElementsMap,
+  NonDeletedExcalidrawElement,
+  NonDeletedSceneElementsMap,
 } from "./types";
 import {
  distance2d,
@@ -36,7 +38,6 @@ import {
 import { mutateElement } from "./mutateElement";
 import History from "../history";

-import Scene from "../scene/Scene";
 import {
  bindOrUnbindLinearElement,
  getHoveredElementForBinding,
@@ -86,11 +87,10 @@ export class LinearElementEditor {
  public readonly hoverPointIndex: number;
  public readonly segmentMidPointHoveredCoords: Point | null;

-  constructor(element: NonDeleted<ExcalidrawLinearElement>, scene: Scene) {
+  constructor(element: NonDeleted<ExcalidrawLinearElement>) {
    this.elementId = element.id as string & {
      _brand: "excalidrawLinearElementId";
    };
-    Scene.mapElementToScene(this.elementId, scene);
    LinearElementEditor.normalizePoints(element);

    this.selectedPointsIndices = null;
@@ -123,8 +123,11 @@ export class LinearElementEditor {
   * @param id the `elementId` from the instance of this class (so that we can
   *  statically guarantee this method returns an ExcalidrawLinearElement)
   */
-  static getElement(id: InstanceType<typeof LinearElementEditor>["elementId"]) {
-    const element = Scene.getScene(id)?.getNonDeletedElement(id);
+  static getElement(
+    id: InstanceType<typeof LinearElementEditor>["elementId"],
+    elementsMap: ElementsMap,
+  ) {
+    const element = elementsMap.get(id);
    if (element) {
      return element as NonDeleted<ExcalidrawLinearElement>;
    }
@@ -135,6 +138,7 @@ export class LinearElementEditor {
    event: PointerEvent,
    appState: AppState,
    setState: React.Component<any, AppState>["setState"],
+    elementsMap: NonDeletedSceneElementsMap,
  ) {
    if (
      !appState.editingLinearElement ||
@@ -145,16 +149,18 @@ export class LinearElementEditor {
    const { editingLinearElement } = appState;
    const { selectedPointsIndices, elementId } = editingLinearElement;

-    const element = LinearElementEditor.getElement(elementId);
+    const element = LinearElementEditor.getElement(elementId, elementsMap);
    if (!element) {
      return false;
    }

    const [selectionX1, selectionY1, selectionX2, selectionY2] =
-      getElementAbsoluteCoords(appState.draggingElement);
+      getElementAbsoluteCoords(appState.draggingElement, elementsMap);

-    const pointsSceneCoords =
-      LinearElementEditor.getPointsGlobalCoordinates(element);
+    const pointsSceneCoords = LinearElementEditor.getPointsGlobalCoordinates(
+      element,
+      elementsMap,
+    );

    const nextSelectedPoints = pointsSceneCoords.reduce(
      (acc: number[], point, index) => {
@@ -194,13 +200,13 @@ export class LinearElementEditor {
      pointSceneCoords: { x: number; y: number }[],
    ) => void,
    linearElementEditor: LinearElementEditor,
-    elementsMap: ElementsMap,
+    elementsMap: NonDeletedSceneElementsMap,
  ): boolean {
    if (!linearElementEditor) {
      return false;
    }
    const { selectedPointsIndices, elementId } = linearElementEditor;
-    const element = LinearElementEditor.getElement(elementId);
+    const element = LinearElementEditor.getElement(elementId, elementsMap);
    if (!element) {
      return false;
    }
@@ -222,6 +228,7 @@ export class LinearElementEditor {

        const [width, height] = LinearElementEditor._getShiftLockedDelta(
          element,
+          elementsMap,
          referencePoint,
          [scenePointerX, scenePointerY],
          event[KEYS.CTRL_OR_CMD] ? null : appState.gridSize,
@@ -239,6 +246,7 @@ export class LinearElementEditor {
      } else {
        const newDraggingPointPosition = LinearElementEditor.createPointAt(
          element,
+          elementsMap,
          scenePointerX - linearElementEditor.pointerOffset.x,
          scenePointerY - linearElementEditor.pointerOffset.y,
          event[KEYS.CTRL_OR_CMD] ? null : appState.gridSize,
@@ -255,6 +263,7 @@ export class LinearElementEditor {
              linearElementEditor.pointerDownState.lastClickedPoint
                ? LinearElementEditor.createPointAt(
                    element,
+                    elementsMap,
                    scenePointerX - linearElementEditor.pointerOffset.x,
                    scenePointerY - linearElementEditor.pointerOffset.y,
                    event[KEYS.CTRL_OR_CMD] ? null : appState.gridSize,
@@ -290,6 +299,7 @@ export class LinearElementEditor {
              LinearElementEditor.getPointGlobalCoordinates(
                element,
                element.points[0],
+                elementsMap,
              ),
            ),
          );
@@ -303,6 +313,7 @@ export class LinearElementEditor {
              LinearElementEditor.getPointGlobalCoordinates(
                element,
                element.points[lastSelectedIndex],
+                elementsMap,
              ),
            ),
          );
@@ -323,10 +334,12 @@ export class LinearElementEditor {
    event: PointerEvent,
    editingLinearElement: LinearElementEditor,
    appState: AppState,
+    elements: readonly NonDeletedExcalidrawElement[],
+    elementsMap: NonDeletedSceneElementsMap,
  ): LinearElementEditor {
    const { elementId, selectedPointsIndices, isDragging, pointerDownState } =
      editingLinearElement;
-    const element = LinearElementEditor.getElement(elementId);
+    const element = LinearElementEditor.getElement(elementId, elementsMap);
    if (!element) {
      return editingLinearElement;
    }
@@ -364,9 +377,11 @@ export class LinearElementEditor {
                  LinearElementEditor.getPointAtIndexGlobalCoordinates(
                    element,
                    selectedPoint!,
+                    elementsMap,
                  ),
                ),
-                Scene.getScene(element)!,
+                elements,
+                elementsMap,
              )
            : null;

@@ -425,15 +440,23 @@ export class LinearElementEditor {
    ) {
      return editorMidPointsCache.points;
    }
-    LinearElementEditor.updateEditorMidPointsCache(element, appState);
+    LinearElementEditor.updateEditorMidPointsCache(
+      element,
+      elementsMap,
+      appState,
+    );
    return editorMidPointsCache.points!;
  };

  static updateEditorMidPointsCache = (
    element: NonDeleted<ExcalidrawLinearElement>,
+    elementsMap: ElementsMap,
    appState: InteractiveCanvasAppState,
  ) => {
-    const points = LinearElementEditor.getPointsGlobalCoordinates(element);
+    const points = LinearElementEditor.getPointsGlobalCoordinates(
+      element,
+      elementsMap,
+    );

    let index = 0;
    const midpoints: (Point | null)[] = [];
@@ -455,6 +478,7 @@ export class LinearElementEditor {
        points[index],
        points[index + 1],
        index + 1,
+        elementsMap,
      );
      midpoints.push(segmentMidPoint);
      index++;
@@ -471,12 +495,13 @@ export class LinearElementEditor {
    elementsMap: ElementsMap,
  ) => {
    const { elementId } = linearElementEditor;
-    const element = LinearElementEditor.getElement(elementId);
+    const element = LinearElementEditor.getElement(elementId, elementsMap);
    if (!element) {
      return null;
    }
    const clickedPointIndex = LinearElementEditor.getPointIndexUnderCursor(
      element,
+      elementsMap,
      appState.zoom,
      scenePointer.x,
      scenePointer.y,
@@ -484,7 +509,10 @@ export class LinearElementEditor {
    if (clickedPointIndex >= 0) {
      return null;
    }
-    const points = LinearElementEditor.getPointsGlobalCoordinates(element);
+    const points = LinearElementEditor.getPointsGlobalCoordinates(
+      element,
+      elementsMap,
+    );
    if (points.length >= 3 && !appState.editingLinearElement) {
      return null;
    }
@@ -550,6 +578,7 @@ export class LinearElementEditor {
    startPoint: Point,
    endPoint: Point,
    endPointIndex: number,
+    elementsMap: ElementsMap,
  ) {
    let segmentMidPoint = centerPoint(startPoint, endPoint);
    if (element.points.length > 2 && element.roundness) {
@@ -574,6 +603,7 @@ export class LinearElementEditor {
        segmentMidPoint = LinearElementEditor.getPointGlobalCoordinates(
          element,
          [tx, ty],
+          elementsMap,
        );
      }
    }
@@ -589,6 +619,7 @@ export class LinearElementEditor {
  ) {
    const element = LinearElementEditor.getElement(
      linearElementEditor.elementId,
+      elementsMap,
    );
    if (!element) {
      return -1;
@@ -614,7 +645,8 @@ export class LinearElementEditor {
    history: History,
    scenePointer: { x: number; y: number },
    linearElementEditor: LinearElementEditor,
-    elementsMap: ElementsMap,
+    elements: readonly NonDeletedExcalidrawElement[],
+    elementsMap: NonDeletedSceneElementsMap,
  ): {
    didAddPoint: boolean;
    hitElement: NonDeleted<ExcalidrawElement> | null;
@@ -631,7 +663,7 @@ export class LinearElementEditor {
    }

    const { elementId } = linearElementEditor;
-    const element = LinearElementEditor.getElement(elementId);
+    const element = LinearElementEditor.getElement(elementId, elementsMap);

    if (!element) {
      return ret;
@@ -658,6 +690,7 @@ export class LinearElementEditor {
            ...element.points,
            LinearElementEditor.createPointAt(
              element,
+              elementsMap,
              scenePointer.x,
              scenePointer.y,
              event[KEYS.CTRL_OR_CMD] ? null : appState.gridSize,
@@ -683,7 +716,8 @@ export class LinearElementEditor {
        lastUncommittedPoint: null,
        endBindingElement: getHoveredElementForBinding(
          scenePointer,
-          Scene.getScene(element)!,
+          elements,
+          elementsMap,
        ),
      };

@@ -693,6 +727,7 @@ export class LinearElementEditor {

    const clickedPointIndex = LinearElementEditor.getPointIndexUnderCursor(
      element,
+      elementsMap,
      appState.zoom,
      scenePointer.x,
      scenePointer.y,
@@ -713,11 +748,12 @@ export class LinearElementEditor {
          element,
          startBindingElement,
          endBindingElement,
+          elementsMap,
        );
      }
    }

-    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
    const cx = (x1 + x2) / 2;
    const cy = (y1 + y2) / 2;
    const targetPoint =
@@ -779,12 +815,13 @@ export class LinearElementEditor {
    scenePointerX: number,
    scenePointerY: number,
    appState: AppState,
+    elementsMap: ElementsMap,
  ): LinearElementEditor | null {
    if (!appState.editingLinearElement) {
      return null;
    }
    const { elementId, lastUncommittedPoint } = appState.editingLinearElement;
-    const element = LinearElementEditor.getElement(elementId);
+    const element = LinearElementEditor.getElement(elementId, elementsMap);
    if (!element) {
      return appState.editingLinearElement;
    }
@@ -809,6 +846,7 @@ export class LinearElementEditor {

      const [width, height] = LinearElementEditor._getShiftLockedDelta(
        element,
+        elementsMap,
        lastCommittedPoint,
        [scenePointerX, scenePointerY],
        event[KEYS.CTRL_OR_CMD] ? null : appState.gridSize,
@@ -821,6 +859,7 @@ export class LinearElementEditor {
    } else {
      newPoint = LinearElementEditor.createPointAt(
        element,
+        elementsMap,
        scenePointerX - appState.editingLinearElement.pointerOffset.x,
        scenePointerY - appState.editingLinearElement.pointerOffset.y,
        event[KEYS.CTRL_OR_CMD] ? null : appState.gridSize,
@@ -847,8 +886,9 @@ export class LinearElementEditor {
  static getPointGlobalCoordinates(
    element: NonDeleted<ExcalidrawLinearElement>,
    point: Point,
+    elementsMap: ElementsMap,
  ) {
-    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
    const cx = (x1 + x2) / 2;
    const cy = (y1 + y2) / 2;

@@ -860,8 +900,9 @@ export class LinearElementEditor {
  /** scene coords */
  static getPointsGlobalCoordinates(
    element: NonDeleted<ExcalidrawLinearElement>,
+    elementsMap: ElementsMap,
  ): Point[] {
-    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
    const cx = (x1 + x2) / 2;
    const cy = (y1 + y2) / 2;
    return element.points.map((point) => {
@@ -873,13 +914,15 @@ export class LinearElementEditor {

  static getPointAtIndexGlobalCoordinates(
    element: NonDeleted<ExcalidrawLinearElement>,
+
    indexMaybeFromEnd: number, // -1 for last element
+    elementsMap: ElementsMap,
  ): Point {
    const index =
      indexMaybeFromEnd < 0
        ? element.points.length + indexMaybeFromEnd
        : indexMaybeFromEnd;
-    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
    const cx = (x1 + x2) / 2;
    const cy = (y1 + y2) / 2;

@@ -893,8 +936,9 @@ export class LinearElementEditor {
  static pointFromAbsoluteCoords(
    element: NonDeleted<ExcalidrawLinearElement>,
    absoluteCoords: Point,
+    elementsMap: ElementsMap,
  ): Point {
-    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
    const cx = (x1 + x2) / 2;
    const cy = (y1 + y2) / 2;
    const [x, y] = rotate(
@@ -909,12 +953,15 @@ export class LinearElementEditor {

  static getPointIndexUnderCursor(
    element: NonDeleted<ExcalidrawLinearElement>,
+    elementsMap: ElementsMap,
    zoom: AppState["zoom"],
    x: number,
    y: number,
  ) {
-    const pointHandles =
-      LinearElementEditor.getPointsGlobalCoordinates(element);
+    const pointHandles = LinearElementEditor.getPointsGlobalCoordinates(
+      element,
+      elementsMap,
+    );
    let idx = pointHandles.length;
    // loop from right to left because points on the right are rendered over
    // points on the left, thus should take precedence when clicking, if they
@@ -934,12 +981,13 @@ export class LinearElementEditor {

  static createPointAt(
    element: NonDeleted<ExcalidrawLinearElement>,
+    elementsMap: ElementsMap,
    scenePointerX: number,
    scenePointerY: number,
    gridSize: number | null,
  ): Point {
    const pointerOnGrid = getGridPoint(scenePointerX, scenePointerY, gridSize);
-    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
    const cx = (x1 + x2) / 2;
    const cy = (y1 + y2) / 2;
    const [rotatedX, rotatedY] = rotate(
@@ -980,14 +1028,14 @@ export class LinearElementEditor {
    mutateElement(element, LinearElementEditor.getNormalizedPoints(element));
  }

-  static duplicateSelectedPoints(appState: AppState) {
+  static duplicateSelectedPoints(appState: AppState, elementsMap: ElementsMap) {
    if (!appState.editingLinearElement) {
      return false;
    }

    const { selectedPointsIndices, elementId } = appState.editingLinearElement;

-    const element = LinearElementEditor.getElement(elementId);
+    const element = LinearElementEditor.getElement(elementId, elementsMap);

    if (!element || selectedPointsIndices === null) {
      return false;
@@ -1149,9 +1197,11 @@ export class LinearElementEditor {
    linearElementEditor: LinearElementEditor,
    pointerCoords: PointerCoords,
    appState: AppState,
+    elementsMap: ElementsMap,
  ) {
    const element = LinearElementEditor.getElement(
      linearElementEditor.elementId,
+      elementsMap,
    );

    if (!element) {
@@ -1190,9 +1240,11 @@ export class LinearElementEditor {
    pointerCoords: PointerCoords,
    appState: AppState,
    snapToGrid: boolean,
+    elementsMap: ElementsMap,
  ) {
    const element = LinearElementEditor.getElement(
      linearElementEditor.elementId,
+      elementsMap,
    );
    if (!element) {
      return;
@@ -1208,6 +1260,7 @@ export class LinearElementEditor {

    const midpoint = LinearElementEditor.createPointAt(
      element,
+      elementsMap,
      pointerCoords.x,
      pointerCoords.y,
      snapToGrid ? appState.gridSize : null,
@@ -1260,6 +1313,7 @@ export class LinearElementEditor {

  private static _getShiftLockedDelta(
    element: NonDeleted<ExcalidrawLinearElement>,
+    elementsMap: ElementsMap,
    referencePoint: Point,
    scenePointer: Point,
    gridSize: number | null,
@@ -1267,6 +1321,7 @@ export class LinearElementEditor {
    const referencePointCoords = LinearElementEditor.getPointGlobalCoordinates(
      element,
      referencePoint,
+      elementsMap,
    );

    const [gridX, gridY] = getGridPoint(
@@ -1288,8 +1343,12 @@ export class LinearElementEditor {
  static getBoundTextElementPosition = (
    element: ExcalidrawLinearElement,
    boundTextElement: ExcalidrawTextElementWithContainer,
+    elementsMap: ElementsMap,
  ): { x: number; y: number } => {
-    const points = LinearElementEditor.getPointsGlobalCoordinates(element);
+    const points = LinearElementEditor.getPointsGlobalCoordinates(
+      element,
+      elementsMap,
+    );
    if (points.length < 2) {
      mutateElement(boundTextElement, { isDeleted: true });
    }
@@ -1300,6 +1359,7 @@ export class LinearElementEditor {
      const midPoint = LinearElementEditor.getPointGlobalCoordinates(
        element,
        element.points[index],
+        elementsMap,
      );
      x = midPoint[0] - boundTextElement.width / 2;
      y = midPoint[1] - boundTextElement.height / 2;
@@ -1319,6 +1379,7 @@ export class LinearElementEditor {
          points[index],
          points[index + 1],
          index + 1,
+          elementsMap,
        );
      }
      x = midSegmentMidpoint[0] - boundTextElement.width / 2;
@@ -1329,6 +1390,7 @@ export class LinearElementEditor {

  static getMinMaxXYWithBoundText = (
    element: ExcalidrawLinearElement,
+    elementsMap: ElementsMap,
    elementBounds: Bounds,
    boundTextElement: ExcalidrawTextElementWithContainer,
  ): [number, number, number, number, number, number] => {
@@ -1339,6 +1401,7 @@ export class LinearElementEditor {
      LinearElementEditor.getBoundTextElementPosition(
        element,
        boundTextElement,
+        elementsMap,
      );
    const boundTextX2 = boundTextX1 + boundTextElement.width;
    const boundTextY2 = boundTextY1 + boundTextElement.height;
@@ -1479,6 +1542,7 @@ export class LinearElementEditor {
    if (boundTextElement) {
      coords = LinearElementEditor.getMinMaxXYWithBoundText(
        element,
+        elementsMap,
        [x1, y1, x2, y2],
        boundTextElement,
      );
@@ -16,6 +16,7 @@ import {
  ExcalidrawEmbeddableElement,
  ExcalidrawMagicFrameElement,
  ExcalidrawIframeElement,
+  ElementsMap,
 } from "./types";
 import {
  arrayToMap,
@@ -68,6 +69,7 @@ export type ElementConstructorOpts = MarkOptional<
  | "roundness"
  | "locked"
  | "opacity"
+  | "customData"
 >;

 const _newElementBase = <T extends ExcalidrawElement>(
@@ -121,6 +123,7 @@ const _newElementBase = <T extends ExcalidrawElement>(
    updated: getUpdatedTimestamp(),
    link,
    locked,
+    customData: rest.customData,
  };
  return element;
 };
@@ -246,7 +249,6 @@ export const newTextElement = (
      y: opts.y - offsets.y,
      width: metrics.width,
      height: metrics.height,
-      baseline: metrics.baseline,
      containerId: opts.containerId || null,
      originalText: text,
      lineHeight,
@@ -258,19 +260,19 @@ export const newTextElement = (

 const getAdjustedDimensions = (
  element: ExcalidrawTextElement,
+  elementsMap: ElementsMap,
  nextText: string,
 ): {
  x: number;
  y: number;
  width: number;
  height: number;
-  baseline: number;
 } => {
-  const {
-    width: nextWidth,
-    height: nextHeight,
-    baseline: nextBaseline,
-  } = measureText(nextText, getFontString(element), element.lineHeight);
+  const { width: nextWidth, height: nextHeight } = measureText(
+    nextText,
+    getFontString(element),
+    element.lineHeight,
+  );
  const { textAlign, verticalAlign } = element;
  let x: number;
  let y: number;
@@ -292,7 +294,7 @@ const getAdjustedDimensions = (
    x = element.x - offsets.x;
    y = element.y - offsets.y;
  } else {
-    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);

    const [nextX1, nextY1, nextX2, nextY2] = getResizedElementAbsoluteCoords(
      element,
@@ -324,7 +326,6 @@ const getAdjustedDimensions = (
  return {
    width: nextWidth,
    height: nextHeight,
-    baseline: nextBaseline,
    x: Number.isFinite(x) ? x : element.x,
    y: Number.isFinite(y) ? y : element.y,
  };
@@ -333,6 +334,7 @@ const getAdjustedDimensions = (
 export const refreshTextDimensions = (
  textElement: ExcalidrawTextElement,
  container: ExcalidrawTextContainer | null,
+  elementsMap: ElementsMap,
  text = textElement.text,
 ) => {
  if (textElement.isDeleted) {
@@ -345,13 +347,14 @@ export const refreshTextDimensions = (
      getBoundTextMaxWidth(container, textElement),
    );
  }
-  const dimensions = getAdjustedDimensions(textElement, text);
+  const dimensions = getAdjustedDimensions(textElement, elementsMap, text);
  return { text, ...dimensions };
 };

 export const updateTextElement = (
  textElement: ExcalidrawTextElement,
  container: ExcalidrawTextContainer | null,
+  elementsMap: ElementsMap,
  {
    text,
    isDeleted,
@@ -365,7 +368,7 @@ export const updateTextElement = (
  return newElementWith(textElement, {
    originalText,
    isDeleted: isDeleted ?? textElement.isDeleted,
-    ...refreshTextDimensions(textElement, container, originalText),
+    ...refreshTextDimensions(textElement, container, elementsMap, originalText),
  });
 };

@@ -52,8 +52,6 @@ import {
  handleBindTextResize,
  getBoundTextMaxWidth,
  getApproxMinLineHeight,
-  measureText,
-  getBoundTextMaxHeight,
 } from "./textElement";
 import { LinearElementEditor } from "./linearElementEditor";

@@ -86,11 +84,12 @@ export const transformElements = (
    if (transformHandleType === "rotation") {
      rotateSingleElement(
        element,
+        elementsMap,
        pointerX,
        pointerY,
        shouldRotateWithDiscreteAngle,
      );
-      updateBoundElements(element);
+      updateBoundElements(element, elementsMap);
    } else if (
      isTextElement(element) &&
      (transformHandleType === "nw" ||
@@ -106,7 +105,7 @@ export const transformElements = (
        pointerX,
        pointerY,
      );
-      updateBoundElements(element);
+      updateBoundElements(element, elementsMap);
    } else if (transformHandleType) {
      resizeSingleElement(
        originalElements,
@@ -157,11 +156,12 @@ export const transformElements = (

 const rotateSingleElement = (
  element: NonDeletedExcalidrawElement,
+  elementsMap: ElementsMap,
  pointerX: number,
  pointerY: number,
  shouldRotateWithDiscreteAngle: boolean,
 ) => {
-  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
  const cx = (x1 + x2) / 2;
  const cy = (y1 + y2) / 2;
  let angle: number;
@@ -211,8 +211,7 @@ const measureFontSizeFromWidth = (
  element: NonDeleted<ExcalidrawTextElement>,
  elementsMap: ElementsMap,
  nextWidth: number,
-  nextHeight: number,
-): { size: number; baseline: number } | null => {
+): { size: number } | null => {
  // We only use width to scale font on resize
  let width = element.width;

@@ -227,14 +226,9 @@ const measureFontSizeFromWidth = (
  if (nextFontSize < MIN_FONT_SIZE) {
    return null;
  }
-  const metrics = measureText(
-    element.text,
-    getFontString({ fontSize: nextFontSize, fontFamily: element.fontFamily }),
-    element.lineHeight,
-  );
+
  return {
    size: nextFontSize,
-    baseline: metrics.baseline + (nextHeight - metrics.height),
  };
 };

@@ -266,7 +260,7 @@ const resizeSingleTextElement = (
  pointerX: number,
  pointerY: number,
 ) => {
-  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
  const cx = (x1 + x2) / 2;
  const cy = (y1 + y2) / 2;
  // rotation pointer with reverse angle
@@ -307,12 +301,7 @@ const resizeSingleTextElement = (
  if (scale > 0) {
    const nextWidth = element.width * scale;
    const nextHeight = element.height * scale;
-    const metrics = measureFontSizeFromWidth(
-      element,
-      elementsMap,
-      nextWidth,
-      nextHeight,
-    );
+    const metrics = measureFontSizeFromWidth(element, elementsMap, nextWidth);
    if (metrics === null) {
      return;
    }
@@ -340,7 +329,6 @@ const resizeSingleTextElement = (
      fontSize: metrics.size,
      width: nextWidth,
      height: nextHeight,
-      baseline: metrics.baseline,
      x: nextElementX,
      y: nextElementY,
    });
@@ -394,7 +382,7 @@ export const resizeSingleElement = (
  let scaleX = atStartBoundsWidth / boundsCurrentWidth;
  let scaleY = atStartBoundsHeight / boundsCurrentHeight;

-  let boundTextFont: { fontSize?: number; baseline?: number } = {};
+  let boundTextFont: { fontSize?: number } = {};
  const boundTextElement = getBoundTextElement(element, elementsMap);

  if (transformHandleDirection.includes("e")) {
@@ -446,7 +434,6 @@ export const resizeSingleElement = (
    if (stateOfBoundTextElementAtResize) {
      boundTextFont = {
        fontSize: stateOfBoundTextElementAtResize.fontSize,
-        baseline: stateOfBoundTextElementAtResize.baseline,
      };
    }
    if (shouldMaintainAspectRatio) {
@@ -460,14 +447,12 @@ export const resizeSingleElement = (
        boundTextElement,
        elementsMap,
        getBoundTextMaxWidth(updatedElement, boundTextElement),
-        getBoundTextMaxHeight(updatedElement, boundTextElement),
      );
      if (nextFont === null) {
        return;
      }
      boundTextFont = {
        fontSize: nextFont.size,
-        baseline: nextFont.baseline,
      };
    } else {
      const minWidth = getApproxMinLineWidth(
@@ -629,14 +614,13 @@ export const resizeSingleElement = (
  ) {
    mutateElement(element, resizedElement);

-    updateBoundElements(element, {
+    updateBoundElements(element, elementsMap, {
      newSize: { width: resizedElement.width, height: resizedElement.height },
    });

    if (boundTextElement && boundTextFont != null) {
      mutateElement(boundTextElement, {
        fontSize: boundTextFont.fontSize,
-        baseline: boundTextFont.baseline,
      });
    }
    handleBindTextResize(
@@ -696,7 +680,11 @@ export const resizeMultipleElements = (
    if (!isBoundToContainer(text)) {
      return acc;
    }
-    const xy = LinearElementEditor.getBoundTextElementPosition(orig, text);
+    const xy = LinearElementEditor.getBoundTextElementPosition(
+      orig,
+      text,
+      elementsMap,
+    );
    return [...acc, { ...text, ...xy }];
  }, [] as ExcalidrawTextElementWithContainer[]);

@@ -763,7 +751,6 @@ export const resizeMultipleElements = (
    > & {
      points?: ExcalidrawLinearElement["points"];
      fontSize?: ExcalidrawTextElement["fontSize"];
-      baseline?: ExcalidrawTextElement["baseline"];
      scale?: ExcalidrawImageElement["scale"];
      boundTextFontSize?: ExcalidrawTextElement["fontSize"];
    };
@@ -838,17 +825,11 @@ export const resizeMultipleElements = (
    }

    if (isTextElement(orig)) {
-      const metrics = measureFontSizeFromWidth(
-        orig,
-        elementsMap,
-        width,
-        height,
-      );
+      const metrics = measureFontSizeFromWidth(orig, elementsMap, width);
      if (!metrics) {
        return;
      }
      update.fontSize = metrics.size;
-      update.baseline = metrics.baseline;
    }

    const boundTextElement = originalElements.get(
@@ -879,7 +860,7 @@ export const resizeMultipleElements = (

    mutateElement(element, update, false);

-    updateBoundElements(element, {
+    updateBoundElements(element, elementsMap, {
      simultaneouslyUpdated: elementsToUpdate,
      newSize: { width, height },
    });
@@ -921,7 +902,7 @@ const rotateMultipleElements = (
  elements
    .filter((element) => !isFrameLikeElement(element))
    .forEach((element) => {
-      const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+      const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
      const cx = (x1 + x2) / 2;
      const cy = (y1 + y2) / 2;
      const origAngle =
@@ -942,7 +923,9 @@ const rotateMultipleElements = (
        },
        false,
      );
-      updateBoundElements(element, { simultaneouslyUpdated: elements });
+      updateBoundElements(element, elementsMap, {
+        simultaneouslyUpdated: elements,
+      });

      const boundText = getBoundTextElement(element, elementsMap);
      if (boundText && !isArrowElement(element)) {
@@ -964,12 +947,13 @@ const rotateMultipleElements = (
 export const getResizeOffsetXY = (
  transformHandleType: MaybeTransformHandleType,
  selectedElements: NonDeletedExcalidrawElement[],
+  elementsMap: ElementsMap,
  x: number,
  y: number,
 ): [number, number] => {
  const [x1, y1, x2, y2] =
    selectedElements.length === 1
-      ? getElementAbsoluteCoords(selectedElements[0])
+      ? getElementAbsoluteCoords(selectedElements[0], elementsMap)
      : getCommonBounds(selectedElements);
  const cx = (x1 + x2) / 2;
  const cy = (y1 + y2) / 2;
@@ -2,6 +2,7 @@ import {
  ExcalidrawElement,
  PointerType,
  NonDeletedExcalidrawElement,
+  ElementsMap,
 } from "./types";

 import {
@@ -27,6 +28,7 @@ const isInsideTransformHandle = (

 export const resizeTest = (
  element: NonDeletedExcalidrawElement,
+  elementsMap: ElementsMap,
  appState: AppState,
  x: number,
  y: number,
@@ -38,7 +40,7 @@ export const resizeTest = (
  }

  const { rotation: rotationTransformHandle, ...transformHandles } =
-    getTransformHandles(element, zoom, pointerType);
+    getTransformHandles(element, zoom, elementsMap, pointerType);

  if (
    rotationTransformHandle &&
@@ -70,6 +72,7 @@ export const getElementWithTransformHandleType = (
  scenePointerY: number,
  zoom: Zoom,
  pointerType: PointerType,
+  elementsMap: ElementsMap,
 ) => {
  return elements.reduce((result, element) => {
    if (result) {
@@ -77,6 +80,7 @@ export const getElementWithTransformHandleType = (
    }
    const transformHandleType = resizeTest(
      element,
+      elementsMap,
      appState,
      scenePointerX,
      scenePointerY,
@@ -1,4 +1,4 @@
-import { ExcalidrawElement } from "./types";
+import { ElementsMap, ExcalidrawElement } from "./types";
 import { mutateElement } from "./mutateElement";
 import { isFreeDrawElement, isLinearElement } from "./typeChecks";
 import { SHIFT_LOCKING_ANGLE } from "../constants";
@@ -26,8 +26,9 @@ export const isElementInViewport = (
    scrollX: number;
    scrollY: number;
  },
+  elementsMap: ElementsMap,
 ) => {
-  const [x1, y1, x2, y2] = getElementBounds(element); // scene coordinates
+  const [x1, y1, x2, y2] = getElementBounds(element, elementsMap); // scene coordinates
  const topLeftSceneCoords = viewportCoordsToSceneCoords(
    {
      clientX: viewTransformations.offsetLeft,
@@ -18,7 +18,6 @@ import {
  DEFAULT_FONT_FAMILY,
  DEFAULT_FONT_SIZE,
  FONT_FAMILY,
-  isSafari,
  TEXT_ALIGN,
  VERTICAL_ALIGN,
 } from "../constants";
@@ -32,7 +31,7 @@ import { getElementAbsoluteCoords } from ".";
 import { getSelectedElements } from "../scene";
 import { isHittingElementNotConsideringBoundingBox } from "./collision";

-import { ExtractSetType } from "../utility-types";
+import { ExtractSetType, MakeBrand } from "../utility-types";
 import {
  resetOriginalContainerCache,
  updateOriginalContainerCache,
@@ -53,6 +52,7 @@ const splitIntoLines = (text: string) => {
 export const redrawTextBoundingBox = (
  textElement: ExcalidrawTextElement,
  container: ExcalidrawElement | null,
+  elementsMap: ElementsMap,
 ) => {
  let maxWidth = undefined;
  const boundTextUpdates = {
@@ -61,7 +61,6 @@ export const redrawTextBoundingBox = (
    text: textElement.text,
    width: textElement.width,
    height: textElement.height,
-    baseline: textElement.baseline,
  };

  boundTextUpdates.text = textElement.text;
@@ -82,7 +81,6 @@ export const redrawTextBoundingBox = (

  boundTextUpdates.width = metrics.width;
  boundTextUpdates.height = metrics.height;
-  boundTextUpdates.baseline = metrics.baseline;

  if (container) {
    const maxContainerHeight = getBoundTextMaxHeight(
@@ -110,7 +108,11 @@ export const redrawTextBoundingBox = (
      ...textElement,
      ...boundTextUpdates,
    } as ExcalidrawTextElementWithContainer;
-    const { x, y } = computeBoundTextPosition(container, updatedTextElement);
+    const { x, y } = computeBoundTextPosition(
+      container,
+      updatedTextElement,
+      elementsMap,
+    );
    boundTextUpdates.x = x;
    boundTextUpdates.y = y;
  }
@@ -119,11 +121,11 @@ export const redrawTextBoundingBox = (
 };

 export const bindTextToShapeAfterDuplication = (
-  sceneElements: ExcalidrawElement[],
+  newElements: ExcalidrawElement[],
  oldElements: ExcalidrawElement[],
  oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>,
 ): void => {
-  const sceneElementMap = arrayToMap(sceneElements) as Map<
+  const newElementsMap = arrayToMap(newElements) as Map<
    ExcalidrawElement["id"],
    ExcalidrawElement
  >;
@@ -134,7 +136,7 @@ export const bindTextToShapeAfterDuplication = (
    if (boundTextElementId) {
      const newTextElementId = oldIdToDuplicatedId.get(boundTextElementId);
      if (newTextElementId) {
-        const newContainer = sceneElementMap.get(newElementId);
+        const newContainer = newElementsMap.get(newElementId);
        if (newContainer) {
          mutateElement(newContainer, {
            boundElements: (element.boundElements || [])
@@ -149,7 +151,7 @@ export const bindTextToShapeAfterDuplication = (
              }),
          });
        }
-        const newTextElement = sceneElementMap.get(newTextElementId);
+        const newTextElement = newElementsMap.get(newTextElementId);
        if (newTextElement && isTextElement(newTextElement)) {
          mutateElement(newTextElement, {
            containerId: newContainer ? newElementId : null,
@@ -183,7 +185,6 @@ export const handleBindTextResize = (
    const maxWidth = getBoundTextMaxWidth(container, textElement);
    const maxHeight = getBoundTextMaxHeight(container, textElement);
    let containerHeight = container.height;
-    let nextBaseLine = textElement.baseline;
    if (
      shouldMaintainAspectRatio ||
      (transformHandleType !== "n" && transformHandleType !== "s")
@@ -202,7 +203,6 @@ export const handleBindTextResize = (
      );
      nextHeight = metrics.height;
      nextWidth = metrics.width;
-      nextBaseLine = metrics.baseline;
    }
    // increase height in case text element height exceeds
    if (nextHeight > maxHeight) {
@@ -230,13 +230,12 @@ export const handleBindTextResize = (
      text,
      width: nextWidth,
      height: nextHeight,
-      baseline: nextBaseLine,
    });

    if (!isArrowElement(container)) {
      mutateElement(
        textElement,
-        computeBoundTextPosition(container, textElement),
+        computeBoundTextPosition(container, textElement, elementsMap),
      );
    }
  }
@@ -245,11 +244,13 @@ export const handleBindTextResize = (
 export const computeBoundTextPosition = (
  container: ExcalidrawElement,
  boundTextElement: ExcalidrawTextElementWithContainer,
+  elementsMap: ElementsMap,
 ) => {
  if (isArrowElement(container)) {
    return LinearElementEditor.getBoundTextElementPosition(
      container,
      boundTextElement,
+      elementsMap,
    );
  }
  const containerCoords = getContainerCoords(container);
@@ -278,8 +279,6 @@ export const computeBoundTextPosition = (
  return { x, y };
 };

-// https://github.com/grassator/canvas-text-editor/blob/master/lib/FontMetrics.js
-
 export const measureText = (
  text: string,
  font: FontString,
@@ -294,59 +293,7 @@ export const measureText = (
  const fontSize = parseFloat(font);
  const height = getTextHeight(text, fontSize, lineHeight);
  const width = getTextWidth(text, font);
-  const baseline = measureBaseline(text, font, lineHeight);
-  return { width, height, baseline };
-};
-
-export const measureBaseline = (
-  text: string,
-  font: FontString,
-  lineHeight: ExcalidrawTextElement["lineHeight"],
-  wrapInContainer?: boolean,
-) => {
-  const container = document.createElement("div");
-  container.style.position = "absolute";
-  container.style.whiteSpace = "pre";
-  container.style.font = font;
-  container.style.minHeight = "1em";
-  if (wrapInContainer) {
-    container.style.overflow = "hidden";
-    container.style.wordBreak = "break-word";
-    container.style.whiteSpace = "pre-wrap";
-  }
-
-  container.style.lineHeight = String(lineHeight);
-
-  container.innerText = text;
-
-  // Baseline is important for positioning text on canvas
-  document.body.appendChild(container);
-
-  const span = document.createElement("span");
-  span.style.display = "inline-block";
-  span.style.overflow = "hidden";
-  span.style.width = "1px";
-  span.style.height = "1px";
-  container.appendChild(span);
-  let baseline = span.offsetTop + span.offsetHeight;
-  const height = container.offsetHeight;
-
-  if (isSafari) {
-    const canvasHeight = getTextHeight(text, parseFloat(font), lineHeight);
-    const fontSize = parseFloat(font);
-    // In Safari the font size gets rounded off when rendering hence calculating the safari height and shifting the baseline if it differs
-    // from the actual canvas height
-    const domHeight = getTextHeight(text, Math.round(fontSize), lineHeight);
-    if (canvasHeight > height) {
-      baseline += canvasHeight - domHeight;
-    }
-
-    if (height > canvasHeight) {
-      baseline -= domHeight - canvasHeight;
-    }
-  }
-  document.body.removeChild(container);
-  return baseline;
+  return { width, height };
 };

 /**
@@ -371,6 +318,24 @@ export const getLineHeightInPx = (
  return fontSize * lineHeight;
 };

+/**
+ * Calculates vertical offset for a text with alphabetic baseline.
+ */
+export const getVerticalOffset = (
+  fontFamily: ExcalidrawTextElement["fontFamily"],
+  fontSize: ExcalidrawTextElement["fontSize"],
+  lineHeightPx: number,
+) => {
+  const { unitsPerEm, ascender, descender } =
+    FONT_METRICS[fontFamily] || FONT_METRICS[FONT_FAMILY.Helvetica];
+
+  const fontSizeEm = fontSize / unitsPerEm;
+  const lineGap = lineHeightPx - fontSizeEm * ascender + fontSizeEm * descender;
+
+  const verticalOffset = fontSizeEm * ascender + lineGap;
+  return verticalOffset;
+};
+
 // FIXME rename to getApproxMinContainerHeight
 export const getApproxMinLineHeight = (
  fontSize: ExcalidrawTextElement["fontSize"],
@@ -698,12 +663,16 @@ export const getContainerCenter = (
      y: container.y + container.height / 2,
    };
  }
-  const points = LinearElementEditor.getPointsGlobalCoordinates(container);
+  const points = LinearElementEditor.getPointsGlobalCoordinates(
+    container,
+    elementsMap,
+  );
  if (points.length % 2 === 1) {
    const index = Math.floor(container.points.length / 2);
    const midPoint = LinearElementEditor.getPointGlobalCoordinates(
      container,
      container.points[index],
+      elementsMap,
    );
    return { x: midPoint[0], y: midPoint[1] };
  }
@@ -719,6 +688,7 @@ export const getContainerCenter = (
      points[index],
      points[index + 1],
      index + 1,
+      elementsMap,
    );
  }
  return { x: midSegmentMidpoint[0], y: midSegmentMidpoint[1] };
@@ -757,11 +727,13 @@ export const getTextElementAngle = (
 export const getBoundTextElementPosition = (
  container: ExcalidrawElement,
  boundTextElement: ExcalidrawTextElementWithContainer,
+  elementsMap: ElementsMap,
 ) => {
  if (isArrowElement(container)) {
    return LinearElementEditor.getBoundTextElementPosition(
      container,
      boundTextElement,
+      elementsMap,
    );
  }
 };
@@ -804,6 +776,7 @@ export const getTextBindableContainerAtPosition = (
  appState: AppState,
  x: number,
  y: number,
+  elementsMap: ElementsMap,
 ): ExcalidrawTextContainer | null => {
  const selectedElements = getSelectedElements(elements, appState);
  if (selectedElements.length === 1) {
@@ -817,7 +790,10 @@ export const getTextBindableContainerAtPosition = (
    if (elements[index].isDeleted) {
      continue;
    }
-    const [x1, y1, x2, y2] = getElementAbsoluteCoords(elements[index]);
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(
+      elements[index],
+      elementsMap,
+    );
    if (
      isArrowElement(elements[index]) &&
      isHittingElementNotConsideringBoundingBox(
@@ -825,6 +801,7 @@ export const getTextBindableContainerAtPosition = (
        appState,
        null,
        [x, y],
+        elementsMap,
      )
    ) {
      hitElement = elements[index];
@@ -945,13 +922,57 @@ const DEFAULT_LINE_HEIGHT = {
  // ~1.25 is the average for Virgil in WebKit and Blink.
  // Gecko (FF) uses ~1.28.
  [FONT_FAMILY.Virgil]: 1.25 as ExcalidrawTextElement["lineHeight"],
-  // ~1.15 is the average for Virgil in WebKit and Blink.
-  // Gecko if all over the place.
+  // ~1.15 is the average for Helvetica in WebKit and Blink.
  [FONT_FAMILY.Helvetica]: 1.15 as ExcalidrawTextElement["lineHeight"],
-  // ~1.2 is the average for Virgil in WebKit and Blink, and kinda Gecko too
+  // ~1.2 is the average for Cascadia in WebKit and Blink, and kinda Gecko too
  [FONT_FAMILY.Cascadia]: 1.2 as ExcalidrawTextElement["lineHeight"],
 };

+/** OS/2 sTypoAscender, https://learn.microsoft.com/en-us/typography/opentype/spec/os2#stypoascender */
+type sTypoAscender = number & MakeBrand<"sTypoAscender">;
+
+/** OS/2 sTypoDescender, https://learn.microsoft.com/en-us/typography/opentype/spec/os2#stypodescender */
+type sTypoDescender = number & MakeBrand<"sTypoDescender">;
+
+/** head.unitsPerEm, usually either 1000 or 2048 */
+type unitsPerEm = number & MakeBrand<"unitsPerEm">;
+
+/**
+ * Hardcoded metrics for default fonts, read by https://opentype.js.org/font-inspector.html.
+ * For custom fonts, read these metrics from OS/2 table and extend this object.
+ *
+ * WARN: opentype does NOT open WOFF2 correctly, make sure to convert WOFF2 to TTF first.
+ */
+export const FONT_METRICS: Record<
+  number,
+  {
+    unitsPerEm: number;
+    ascender: sTypoAscender;
+    descender: sTypoDescender;
+  }
+> = {
+  [FONT_FAMILY.Virgil]: {
+    unitsPerEm: 1000 as unitsPerEm,
+    ascender: 886 as sTypoAscender,
+    descender: -374 as sTypoDescender,
+  },
+  [FONT_FAMILY.Helvetica]: {
+    unitsPerEm: 2048 as unitsPerEm,
+    ascender: 1577 as sTypoAscender,
+    descender: -471 as sTypoDescender,
+  },
+  [FONT_FAMILY.Cascadia]: {
+    unitsPerEm: 2048 as unitsPerEm,
+    ascender: 1977 as sTypoAscender,
+    descender: -480 as sTypoDescender,
+  },
+  [FONT_FAMILY.Assistant]: {
+    unitsPerEm: 1000 as unitsPerEm,
+    ascender: 1021 as sTypoAscender,
+    descender: -287 as sTypoDescender,
+  },
+};
+
 export const getDefaultLineHeight = (fontFamily: FontFamilyValues) => {
  if (fontFamily in DEFAULT_LINE_HEIGHT) {
    return DEFAULT_LINE_HEIGHT[fontFamily];
@@ -11,7 +11,7 @@ import {
  isBoundToContainer,
  isTextElement,
 } from "./typeChecks";
-import { CLASSES, isSafari } from "../constants";
+import { CLASSES } from "../constants";
 import {
  ExcalidrawElement,
  ExcalidrawLinearElement,
@@ -31,7 +31,6 @@ import {
  getBoundTextMaxHeight,
  getBoundTextMaxWidth,
  computeContainerDimensionForBoundText,
-  detectLineHeight,
  computeBoundTextPosition,
  getBoundTextElement,
 } from "./textElement";
@@ -121,13 +120,13 @@ export const textWysiwyg = ({
      return;
    }
    const { textAlign, verticalAlign } = updatedTextElement;
-
+    const elementsMap = app.scene.getNonDeletedElementsMap();
    if (updatedTextElement && isTextElement(updatedTextElement)) {
      let coordX = updatedTextElement.x;
      let coordY = updatedTextElement.y;
      const container = getContainerElement(
        updatedTextElement,
-        app.scene.getElementsMapIncludingDeleted(),
+        app.scene.getNonDeletedElementsMap(),
      );
      let maxWidth = updatedTextElement.width;

@@ -143,6 +142,7 @@ export const textWysiwyg = ({
            LinearElementEditor.getBoundTextElementPosition(
              container,
              updatedTextElement as ExcalidrawTextElementWithContainer,
+              elementsMap,
            );
          coordX = boundTextCoords.x;
          coordY = boundTextCoords.y;
@@ -200,6 +200,7 @@ export const textWysiwyg = ({
          const { y } = computeBoundTextPosition(
            container,
            updatedTextElement as ExcalidrawTextElementWithContainer,
+            elementsMap,
          );
          coordY = y;
        }
@@ -225,18 +226,6 @@ export const textWysiwyg = ({
      if (!container) {
        maxWidth = (appState.width - 8 - viewportX) / appState.zoom.value;
        textElementWidth = Math.min(textElementWidth, maxWidth);
-      } else {
-        textElementWidth += 0.5;
-      }
-
-      let lineHeight = updatedTextElement.lineHeight;
-
-      // In Safari the font size gets rounded off when rendering hence calculating the line height by rounding off font size
-      if (isSafari) {
-        lineHeight = detectLineHeight({
-          ...updatedTextElement,
-          fontSize: Math.round(updatedTextElement.fontSize),
-        });
      }

      // Make sure text editor height doesn't go beyond viewport
@@ -245,7 +234,7 @@ export const textWysiwyg = ({
      Object.assign(editable.style, {
        font: getFontString(updatedTextElement),
        // must be defined *after* font ¯\_(ツ)_/¯
-        lineHeight,
+        lineHeight: updatedTextElement.lineHeight,
        width: `${textElementWidth}px`,
        height: `${textElementHeight}px`,
        left: `${viewportX}px`,
@@ -326,7 +315,7 @@ export const textWysiwyg = ({
      }
      const container = getContainerElement(
        element,
-        app.scene.getElementsMapIncludingDeleted(),
+        app.scene.getNonDeletedElementsMap(),
      );

      const font = getFontString({
@@ -513,7 +502,7 @@ export const textWysiwyg = ({
    let text = editable.value;
    const container = getContainerElement(
      updateElement,
-      app.scene.getElementsMapIncludingDeleted(),
+      app.scene.getNonDeletedElementsMap(),
    );

    if (container) {
@@ -541,7 +530,11 @@ export const textWysiwyg = ({
          ),
        });
      }
-      redrawTextBoundingBox(updateElement, container);
+      redrawTextBoundingBox(
+        updateElement,
+        container,
+        app.scene.getNonDeletedElementsMap(),
+      );
    }

    onSubmit({
@@ -1,4 +1,5 @@
 import {
+  ElementsMap,
  ExcalidrawElement,
  NonDeletedExcalidrawElement,
  PointerType,
@@ -230,6 +231,8 @@ export const getTransformHandlesFromCoords = (
 export const getTransformHandles = (
  element: ExcalidrawElement,
  zoom: Zoom,
+  elementsMap: ElementsMap,
+
  pointerType: PointerType = "mouse",
 ): TransformHandles => {
  // so that when locked element is selected (especially when you toggle lock
@@ -267,7 +270,7 @@ export const getTransformHandles = (
    ? DEFAULT_TRANSFORM_HANDLE_SPACING + 8
    : DEFAULT_TRANSFORM_HANDLE_SPACING;
  return getTransformHandlesFromCoords(
-    getElementAbsoluteCoords(element, true),
+    getElementAbsoluteCoords(element, elementsMap, true),
    element.angle,
    zoom,
    pointerType,
@@ -176,7 +176,6 @@ export type ExcalidrawTextElement = _ExcalidrawElementBase &
    fontSize: number;
    fontFamily: FontFamilyValues;
    text: string;
-    baseline: number;
    textAlign: TextAlign;
    verticalAlign: VerticalAlign;
    containerId: ExcalidrawGenericElement["id"] | null;
@@ -21,12 +21,9 @@ import { mutateElement } from "./element/mutateElement";
 import { AppClassProperties, AppState, StaticCanvasAppState } from "./types";
 import { getElementsWithinSelection, getSelectedElements } from "./scene";
 import { getElementsInGroup, selectGroupsFromGivenElements } from "./groups";
-import Scene, { ExcalidrawElementsIncludingDeleted } from "./scene/Scene";
+import type { ExcalidrawElementsIncludingDeleted } from "./scene/Scene";
 import { getElementLineSegments } from "./element/bounds";
-import {
-  doLineSegmentsIntersect,
-  elementsOverlappingBBox,
-} from "../utils/export";
+import { doLineSegmentsIntersect, elementsOverlappingBBox } from "../utils/";
 import { isFrameElement, isFrameLikeElement } from "./element/typeChecks";
 import { ReadonlySetLike } from "./utility-types";

@@ -65,10 +62,11 @@ export const bindElementsToFramesAfterDuplication = (
 export function isElementIntersectingFrame(
  element: ExcalidrawElement,
  frame: ExcalidrawFrameLikeElement,
+  elementsMap: ElementsMap,
 ) {
-  const frameLineSegments = getElementLineSegments(frame);
+  const frameLineSegments = getElementLineSegments(frame, elementsMap);

-  const elementLineSegments = getElementLineSegments(element);
+  const elementLineSegments = getElementLineSegments(element, elementsMap);

  const intersecting = frameLineSegments.some((frameLineSegment) =>
    elementLineSegments.some((elementLineSegment) =>
@@ -82,9 +80,10 @@ export function isElementIntersectingFrame(
 export const getElementsCompletelyInFrame = (
  elements: readonly ExcalidrawElement[],
  frame: ExcalidrawFrameLikeElement,
+  elementsMap: ElementsMap,
 ) =>
  omitGroupsContainingFrameLikes(
-    getElementsWithinSelection(elements, frame, false),
+    getElementsWithinSelection(elements, frame, elementsMap, false),
  ).filter(
    (element) =>
      (!isFrameLikeElement(element) && !element.frameId) ||
@@ -95,8 +94,9 @@ export const isElementContainingFrame = (
  elements: readonly ExcalidrawElement[],
  element: ExcalidrawElement,
  frame: ExcalidrawFrameLikeElement,
+  elementsMap: ElementsMap,
 ) => {
-  return getElementsWithinSelection(elements, element).some(
+  return getElementsWithinSelection(elements, element, elementsMap).some(
    (e) => e.id === frame.id,
  );
 };
@@ -104,13 +104,22 @@ export const isElementContainingFrame = (
 export const getElementsIntersectingFrame = (
  elements: readonly ExcalidrawElement[],
  frame: ExcalidrawFrameLikeElement,
-) => elements.filter((element) => isElementIntersectingFrame(element, frame));
+) => {
+  const elementsMap = arrayToMap(elements);
+  return elements.filter((element) =>
+    isElementIntersectingFrame(element, frame, elementsMap),
+  );
+};

 export const elementsAreInFrameBounds = (
  elements: readonly ExcalidrawElement[],
  frame: ExcalidrawFrameLikeElement,
+  elementsMap: ElementsMap,
 ) => {
-  const [frameX1, frameY1, frameX2, frameY2] = getElementAbsoluteCoords(frame);
+  const [frameX1, frameY1, frameX2, frameY2] = getElementAbsoluteCoords(
+    frame,
+    elementsMap,
+  );

  const [elementX1, elementY1, elementX2, elementY2] =
    getCommonBounds(elements);
@@ -126,11 +135,12 @@ export const elementsAreInFrameBounds = (
 export const elementOverlapsWithFrame = (
  element: ExcalidrawElement,
  frame: ExcalidrawFrameLikeElement,
+  elementsMap: ElementsMap,
 ) => {
  return (
-    elementsAreInFrameBounds([element], frame) ||
-    isElementIntersectingFrame(element, frame) ||
-    isElementContainingFrame([frame], element, frame)
+    elementsAreInFrameBounds([element], frame, elementsMap) ||
+    isElementIntersectingFrame(element, frame, elementsMap) ||
+    isElementContainingFrame([frame], element, frame, elementsMap)
  );
 };

@@ -140,8 +150,9 @@ export const isCursorInFrame = (
    y: number;
  },
  frame: NonDeleted<ExcalidrawFrameLikeElement>,
+  elementsMap: ElementsMap,
 ) => {
-  const [fx1, fy1, fx2, fy2] = getElementAbsoluteCoords(frame);
+  const [fx1, fy1, fx2, fy2] = getElementAbsoluteCoords(frame, elementsMap);

  return isPointWithinBounds(
    [fx1, fy1],
@@ -155,6 +166,7 @@ export const groupsAreAtLeastIntersectingTheFrame = (
  groupIds: readonly string[],
  frame: ExcalidrawFrameLikeElement,
 ) => {
+  const elementsMap = arrayToMap(elements);
  const elementsInGroup = groupIds.flatMap((groupId) =>
    getElementsInGroup(elements, groupId),
  );
@@ -165,8 +177,8 @@ export const groupsAreAtLeastIntersectingTheFrame = (

  return !!elementsInGroup.find(
    (element) =>
-      elementsAreInFrameBounds([element], frame) ||
-      isElementIntersectingFrame(element, frame),
+      elementsAreInFrameBounds([element], frame, elementsMap) ||
+      isElementIntersectingFrame(element, frame, elementsMap),
  );
 };

@@ -175,6 +187,7 @@ export const groupsAreCompletelyOutOfFrame = (
  groupIds: readonly string[],
  frame: ExcalidrawFrameLikeElement,
 ) => {
+  const elementsMap = arrayToMap(elements);
  const elementsInGroup = groupIds.flatMap((groupId) =>
    getElementsInGroup(elements, groupId),
  );
@@ -186,8 +199,8 @@ export const groupsAreCompletelyOutOfFrame = (
  return (
    elementsInGroup.find(
      (element) =>
-        elementsAreInFrameBounds([element], frame) ||
-        isElementIntersectingFrame(element, frame),
+        elementsAreInFrameBounds([element], frame, elementsMap) ||
+        isElementIntersectingFrame(element, frame, elementsMap),
    ) === undefined
  );
 };
@@ -258,14 +271,15 @@ export const getElementsInResizingFrame = (
  allElements: ExcalidrawElementsIncludingDeleted,
  frame: ExcalidrawFrameLikeElement,
  appState: AppState,
+  elementsMap: ElementsMap,
 ): ExcalidrawElement[] => {
  const prevElementsInFrame = getFrameChildren(allElements, frame.id);
  const nextElementsInFrame = new Set<ExcalidrawElement>(prevElementsInFrame);

  const elementsCompletelyInFrame = new Set([
-    ...getElementsCompletelyInFrame(allElements, frame),
+    ...getElementsCompletelyInFrame(allElements, frame, elementsMap),
    ...prevElementsInFrame.filter((element) =>
-      isElementContainingFrame(allElements, element, frame),
+      isElementContainingFrame(allElements, element, frame, elementsMap),
    ),
  ]);

@@ -283,7 +297,7 @@ export const getElementsInResizingFrame = (
  );

  for (const element of elementsNotCompletelyInFrame) {
-    if (!isElementIntersectingFrame(element, frame)) {
+    if (!isElementIntersectingFrame(element, frame, elementsMap)) {
      if (element.groupIds.length === 0) {
        nextElementsInFrame.delete(element);
      }
@@ -334,7 +348,7 @@ export const getElementsInResizingFrame = (
    if (isSelected) {
      const elementsInGroup = getElementsInGroup(allElements, id);

-      if (elementsAreInFrameBounds(elementsInGroup, frame)) {
+      if (elementsAreInFrameBounds(elementsInGroup, frame, elementsMap)) {
        for (const element of elementsInGroup) {
          nextElementsInFrame.add(element);
        }
@@ -348,36 +362,25 @@ export const getElementsInResizingFrame = (
 };

 export const getElementsInNewFrame = (
-  allElements: ExcalidrawElementsIncludingDeleted,
+  elements: ExcalidrawElementsIncludingDeleted,
  frame: ExcalidrawFrameLikeElement,
+  elementsMap: ElementsMap,
 ) => {
  return omitGroupsContainingFrameLikes(
-    allElements,
-    getElementsCompletelyInFrame(allElements, frame),
+    elements,
+    getElementsCompletelyInFrame(elements, frame, elementsMap),
  );
 };

 export const getContainingFrame = (
  element: ExcalidrawElement,
-  /**
-   * Optionally an elements map, in case the elements aren't in the Scene yet.
-   * Takes precedence over Scene elements, even if the element exists
-   * in Scene elements and not the supplied elements map.
-   */
-  elementsMap?: Map<string, ExcalidrawElement>,
+  elementsMap: ElementsMap,
 ) => {
-  if (element.frameId) {
-    if (elementsMap) {
-      return (elementsMap.get(element.frameId) ||
-        null) as null | ExcalidrawFrameLikeElement;
-    }
-    return (
-      (Scene.getScene(element)?.getElement(
-        element.frameId,
-      ) as ExcalidrawFrameLikeElement) || null
-    );
+  if (!element.frameId) {
+    return null;
  }
-  return null;
+  return (elementsMap.get(element.frameId) ||
+    null) as null | ExcalidrawFrameLikeElement;
 };

 // --------------------------- Frame Operations -------------------------------
@@ -388,7 +391,7 @@ export const filterElementsEligibleAsFrameChildren = (
  frame: ExcalidrawFrameLikeElement,
 ) => {
  const otherFrames = new Set<ExcalidrawFrameLikeElement["id"]>();
-
+  const elementsMap = arrayToMap(elements);
  elements = omitGroupsContainingFrameLikes(elements);

  for (const element of elements) {
@@ -415,14 +418,18 @@ export const filterElementsEligibleAsFrameChildren = (
      if (!processedGroups.has(shallowestGroupId)) {
        processedGroups.add(shallowestGroupId);
        const groupElements = getElementsInGroup(elements, shallowestGroupId);
-        if (groupElements.some((el) => elementOverlapsWithFrame(el, frame))) {
+        if (
+          groupElements.some((el) =>
+            elementOverlapsWithFrame(el, frame, elementsMap),
+          )
+        ) {
          for (const child of groupElements) {
            eligibleElements.push(child);
          }
        }
      }
    } else {
-      const overlaps = elementOverlapsWithFrame(element, frame);
+      const overlaps = elementOverlapsWithFrame(element, frame, elementsMap);
      if (overlaps) {
        eligibleElements.push(element);
      }
@@ -675,19 +682,19 @@ export const getTargetFrame = (
  return appState.selectedElementIds[_element.id] &&
    appState.selectedElementsAreBeingDragged
    ? appState.frameToHighlight
-    : getContainingFrame(_element);
+    : getContainingFrame(_element, elementsMap);
 };

 // TODO: this a huge bottleneck for large scenes, optimise
 // given an element, return if the element is in some frame
 export const isElementInFrame = (
  element: ExcalidrawElement,
-  allElements: ElementsMap,
+  allElementsMap: ElementsMap,
  appState: StaticCanvasAppState,
 ) => {
-  const frame = getTargetFrame(element, allElements, appState);
+  const frame = getTargetFrame(element, allElementsMap, appState);
  const _element = isTextElement(element)
-    ? getContainerElement(element, allElements) || element
+    ? getContainerElement(element, allElementsMap) || element
    : element;

  if (frame) {
@@ -703,16 +710,18 @@ export const isElementInFrame = (
    }

    if (_element.groupIds.length === 0) {
-      return elementOverlapsWithFrame(_element, frame);
+      return elementOverlapsWithFrame(_element, frame, allElementsMap);
    }

    const allElementsInGroup = new Set(
-      _element.groupIds.flatMap((gid) => getElementsInGroup(allElements, gid)),
+      _element.groupIds.flatMap((gid) =>
+        getElementsInGroup(allElementsMap, gid),
+      ),
    );

    if (appState.editingGroupId && appState.selectedElementsAreBeingDragged) {
      const selectedElements = new Set(
-        getSelectedElements(allElements, appState),
+        getSelectedElements(allElementsMap, appState),
      );

      const editingGroupOverlapsFrame = appState.frameToHighlight !== null;
@@ -733,7 +742,7 @@ export const isElementInFrame = (
    }

    for (const elementInGroup of allElementsInGroup) {
-      if (elementOverlapsWithFrame(elementInGroup, frame)) {
+      if (elementOverlapsWithFrame(elementInGroup, frame, allElementsMap)) {
        return true;
      }
    }
@@ -207,6 +207,8 @@ Excalidraw.displayName = "Excalidraw";

 export {
  getSceneVersion,
+  hashElementsVersion,
+  hashString,
  isInvisiblySmallElement,
  getNonDeletedElements,
 } from "./element";
@@ -217,22 +219,31 @@ export {
  restoreElements,
  restoreLibraryItems,
 } from "./data/restore";
+
 export {
  exportToCanvas,
  exportToBlob,
  exportToSvg,
-  serializeAsJSON,
-  serializeLibraryAsJSON,
-  loadLibraryFromBlob,
+  exportToClipboard,
+} from "../utils/export";
+
+export { serializeAsJSON, serializeLibraryAsJSON } from "./data/json";
+export {
  loadFromBlob,
  loadSceneOrLibraryFromBlob,
-  getFreeDrawSvgPath,
-  exportToClipboard,
-  mergeLibraryItems,
-} from "../utils/export";
+  loadLibraryFromBlob,
+} from "./data/blob";
+export { getFreeDrawSvgPath } from "./renderer/renderElement";
+export { mergeLibraryItems, getLibraryItemsHash } from "./data/library";
 export { isLinearElement } from "./element/typeChecks";

-export { FONT_FAMILY, THEME, MIME_TYPES, ROUNDNESS } from "./constants";
+export {
+  FONT_FAMILY,
+  THEME,
+  MIME_TYPES,
+  ROUNDNESS,
+  DEFAULT_LASER_COLOR,
+} from "./constants";

 export {
  mutateElement,
@@ -268,4 +279,4 @@ export {
  elementsOverlappingBBox,
  isElementInsideBBox,
  elementPartiallyOverlapsWithOrContainsBBox,
-} from "../utils/export";
+} from "../utils/withinBounds";
@@ -5,6 +5,7 @@ import type App from "./components/App";
 import { SocketId } from "./types";
 import { easeOut } from "./utils";
 import { getClientColor } from "./clients";
+import { DEFAULT_LASER_COLOR } from "./constants";

 export class LaserTrails implements Trail {
  public localTrail: AnimatedTrail;
@@ -20,7 +21,7 @@ export class LaserTrails implements Trail {

    this.localTrail = new AnimatedTrail(animationFrameHandler, app, {
      ...this.getTrailOptions(),
-      fill: () => "red",
+      fill: () => DEFAULT_LASER_COLOR,
    });
  }

@@ -78,13 +79,15 @@ export class LaserTrails implements Trail {
      return;
    }

-    for (const [key, collabolator] of this.app.state.collaborators.entries()) {
+    for (const [key, collaborator] of this.app.state.collaborators.entries()) {
      let trail!: AnimatedTrail;

      if (!this.collabTrails.has(key)) {
        trail = new AnimatedTrail(this.animationFrameHandler, this.app, {
          ...this.getTrailOptions(),
-          fill: () => getClientColor(key),
+          fill: () =>
+            collaborator.pointer?.laserColor ||
+            getClientColor(key, collaborator),
        });
        trail.start(this.container);

@@ -93,21 +96,21 @@ export class LaserTrails implements Trail {
        trail = this.collabTrails.get(key)!;
      }

-      if (collabolator.pointer && collabolator.pointer.tool === "laser") {
-        if (collabolator.button === "down" && !trail.hasCurrentTrail) {
-          trail.startPath(collabolator.pointer.x, collabolator.pointer.y);
+      if (collaborator.pointer && collaborator.pointer.tool === "laser") {
+        if (collaborator.button === "down" && !trail.hasCurrentTrail) {
+          trail.startPath(collaborator.pointer.x, collaborator.pointer.y);
        }

        if (
-          collabolator.button === "down" &&
+          collaborator.button === "down" &&
          trail.hasCurrentTrail &&
-          !trail.hasLastPoint(collabolator.pointer.x, collabolator.pointer.y)
+          !trail.hasLastPoint(collaborator.pointer.x, collaborator.pointer.y)
        ) {
-          trail.addPointToPath(collabolator.pointer.x, collabolator.pointer.y);
+          trail.addPointToPath(collaborator.pointer.x, collaborator.pointer.y);
        }

-        if (collabolator.button === "up" && trail.hasCurrentTrail) {
-          trail.addPointToPath(collabolator.pointer.x, collabolator.pointer.y);
+        if (collaborator.button === "up" && trail.hasCurrentTrail) {
+          trail.addPointToPath(collaborator.pointer.x, collaborator.pointer.y);
          trail.endPath();
        }
      }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
dependabot[bot]	0bfdda610a	build(deps): bump webpack-dev-middleware in /dev-docs Bumps [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware) from 5.3.3 to 5.3.4. - [Release notes](https://github.com/webpack/webpack-dev-middleware/releases) - [Changelog](https://github.com/webpack/webpack-dev-middleware/blob/v5.3.4/CHANGELOG.md) - [Commits](https://github.com/webpack/webpack-dev-middleware/compare/v5.3.3...v5.3.4) --- updated-dependencies: - dependency-name: webpack-dev-middleware dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>	2024-03-23 07:56:35 +00:00
David Luzar	15bfa626b4	feat: support to not render remote cursor & username (#7130 )	2024-03-18 10:41:06 +01:00
David Luzar	068895db0e	feat: expose more collaborator status icons (#7777 )	2024-03-18 10:20:07 +01:00
dwelle	b7babe554b	feat: load old library if migration fails	2024-03-11 09:57:01 +01:00
dwelle	6a385d6663	feat: change LibraryPersistenceAdapter `load()` `source` -> `priority` to clarify the semantics	2024-03-11 09:40:51 +01:00
David Luzar	2382fad4f6	feat: store library to IndexedDB & support storage adapters (#7655 )	2024-03-08 22:29:19 +01:00
Marcel Mraz	480572f893	fix: correcting Assistant metrics (#7758 ) * Changed Assistant metrics to the corrrect ones from OS/2 table * Adding more information about font metrics * Adding branded types to avoid future mistakes	2024-03-07 16:54:36 +01:00
David Luzar	68b1fdb20e	fix: add missing font metrics for Assistant (#7752 )	2024-03-06 10:53:37 +01:00
David Luzar	a38e82f999	feat: close dropdown on escape (#7750 )	2024-03-05 23:22:34 +01:00
David Luzar	a07f6e9e3a	feat: show ai badge for discovery (#7749 )	2024-03-05 23:22:25 +01:00
Marcel Mraz	7e471b55eb	feat: text measurements based on font metrics (#7693 ) * Introduced vertical offset based on harcoded font metrics * Unified usage of alphabetic baseline for both canvas & svg export * Removed baseline property * Removed font-size rounding on Safari * Removed artificial width offset	2024-03-05 19:33:27 +00:00
Ryan Di	160440b860	feat: improve collab error notification (#7741 ) * identify cause * toast after dialog for error messages in collab * remove comment * shake tooltip instead for repeating collab errors * clear collab error * empty commit * simplify & fix reset race condition --------- Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>	2024-03-04 20:43:44 +08:00
Aakansha Doshi	f207bd0a1c	build: export types for @excalidraw/utils (#7736 ) * build: export types for @excalidraw/utils * fix * add types	2024-02-29 15:43:04 +05:30
Aakansha Doshi	99601baffc	build: create ESM build for utils package 🥳 (#7500 ) * build: create ESM build for utils package * add deps, exports and import.meta	2024-02-28 19:33:47 +05:30
Aakansha Doshi	af1a3d5b76	fix: export utils from excalidraw package in excalidraw library (#7731 ) * fix: export utils from excalidraw package in excalidraw library * don't export utils utilities * fix import path * fix export * don't export export utilites * fix export paths * reexport utils from excalidraw package * add exports from withinBounds * fix path	2024-02-28 11:14:57 +05:30
Wabweni Brian	36e56267c9	docs: add missing closing angle bracket in integration.mdx (#7729 ) Update integration.mdx: Fix missing closing angle bracket in code sample A closing angle bracket was missing in a code sample. Original code: <div style={{height:"500px", width:"500px"}} <Excalidraw /> </div> Changes: <div style={{height:"500px", width:"500px"}}> <Excalidraw /> </div>	2024-02-27 07:19:20 +00:00
Aakansha Doshi	b09b5cb5f4	fix: split renderScene so that locales aren't imported unnecessarily (#7718 ) * fix: split renderScene so that locales aren't imported unnecessarily * lint * split export code * rename renderScene to helpers.ts * add helpers * fix typo * fixes * move renderElementToSvg to export * lint * rename export to staticSvgScene * fix	2024-02-27 10:37:44 +05:30
Aashman Verma	dd8529743a	docs: type mistake in integration of excalidraw (#7723 )	2024-02-26 10:24:27 +01:00
Aakansha Doshi	f639d44a95	fix: remove dependency of t in blob.ts (#7717 ) * remove dependency of t in blob.ts * fix	2024-02-23 15:05:46 +05:30
Aakansha Doshi	f5ab3e4e12	fix: remove dependency of t from clipboard and image (#7712 ) * fix: remove dependency of t from clipboard and image * pass errorMessage to copyTextToSystemClipboard where needed * wrap copyTextToSystemClipboard and rethrow translated error in caller * review fix * typo	2024-02-21 19:45:33 +05:30
Aakansha Doshi	361a9449bb	fix: remove scene hack from export.ts & remove pass elementsMap to getContainingFrame (#7713 ) * fix: remove scene hack from export.ts as its not needed anymore * remove * pass elementsMap to getContainingFrame * remove unused `mapElementIds` param --------- Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>	2024-02-21 16:34:20 +05:30
Aakansha Doshi	2e719ff671	fix: decouple pure functions from hyperlink to prevent mermaid bundling (#7710 ) * move hyperlink code into its folder * move pure js functions to hyperlink/helpers and move actionLink to actions * fix tests * fix	2024-02-20 20:59:01 +05:30
Aakansha Doshi	79d9dc2f8f	fix: make bounds independent of scene (#7679 ) * fix: make bounds independent of scene * pass only elements to getCommonBounds * lint * pass elementsMap to getVisibleAndNonSelectedElements	2024-02-19 19:39:14 +05:30
Aakansha Doshi	9013c84524	fix: make LinearElementEditor independent of scene (#7670 ) * fix: make LinearElementEditor independent of scene * more fixes * pass elements and elementsMap to maybeBindBindableElement,getHoveredElementForBinding,bindingBorderTest,getElligibleElementsForBindableElementAndWhere,isLinearElementEligibleForNewBindingByBindable * replace `ElementsMap` with `NonDeletedSceneElementsMap` & remove unused params * fix lint --------- Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>	2024-02-19 11:49:01 +05:30
Aakansha Doshi	47f87f4ecb	fix: remove scene from getElementAbsoluteCoords and dependent functions and use elementsMap (#7663 ) * fix: remove scene from getElementAbsoluteCoords and dependent functions and use elementsMap * lint * fix * use non deleted elements where possible * use non deleted elements map in actions * pass elementsMap instead of array to elementOverlapsWithFrame * lint * fix * pass elementsMap to getElementsCorners * pass elementsMap to getEligibleElementsForBinding * pass elementsMap in bindOrUnbindSelectedElements and unbindLinearElements * pass elementsMap in elementsAreInFrameBounds,elementOverlapsWithFrame,isCursorInFrame,getElementsInResizingFrame * pass elementsMap in getElementsWithinSelection, getElementsCompletelyInFrame, isElementContainingFrame, getElementsInNewFrame * pass elementsMap to getElementWithTransformHandleType * pass elementsMap to getVisibleGaps, getMaximumGroups,getReferenceSnapPoints,snapDraggedElements * lint * pass elementsMap to bindTextToShapeAfterDuplication,bindLinearElementToElement,getTextBindableContainerAtPosition * revert changes for bindTextToShapeAfterDuplication	2024-02-16 11:35:01 +05:30
Aakansha Doshi	73bf50e8a8	fix: remove t from getDefaultAppState and allow name to be nullable (#7666 ) * fix: remove t and allow name to be nullable * pass name as required prop * remove Unnamed * pass name to excalidrawPlus as well for better type safe * render once we have excalidrawAPI to avoid defaulting * rename `getAppName` -> `getName` (temporary) * stop preventing editing filenames when `props.name` supplied * keep `name` as optional param for export functions * keep `appState.name` on `props.name` state separate * fix lint * assertive first * fix lint * Add TODO --------- Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>	2024-02-15 11:11:18 +05:30
Aakansha Doshi	48c3465b19	docs: release patch v0.17.3 (#7673 ) * docs: release patch v0.17.3 * update cl	2024-02-09 19:29:50 +05:30
David Luzar	adc4c9f484	fix: prevent panning to trigger history on macos chrome (#7671 )	2024-02-08 19:50:50 +01:00
YuBin, Hsu	def1df2c68	fix: keep customData when converting to ExcalidrawElement (#7656 ) * feat: keep customData when converting to ExcalidrawElement (#7654) * docs: add changelog for keeping customData when converting to ExcalidrawElement	2024-02-08 17:23:10 +05:30
David Luzar	0513b647ec	feat: change collab trigger & add share dialog (#7647 )	2024-02-03 14:04:23 +00:00
David Luzar	a289c42830	feat: add loading state to FilledButton (#7650 )	2024-02-03 14:53:31 +01:00
David Luzar	d67eaa8710	fix: file save timing out with big file sizes (#7649 )	2024-02-03 11:53:35 +01:00