v0.16.2

* refactor: move excalidraw-app outside src

* move some tests to excal app and fix some

* fix tests

* fix

* port remaining tests

* fix

* update snap

* move tests inside test folder

* fix

* fix

excalidraw-app/CustomStats.tsx

@@ -1,14 +1,14 @@
 import { useEffect, useState } from "react";
-import { debounce, getVersion, nFormatter } from "../utils";
+import { debounce, getVersion, nFormatter } from "../src/utils";
 import {
   getElementsStorageSize,
   getTotalStorageSize,
 } from "./data/localStorage";
-import { DEFAULT_VERSION } from "../constants";
+import { DEFAULT_VERSION } from "../src/constants";
-import { t } from "../i18n";
+import { t } from "../src/i18n";
-import { copyTextToSystemClipboard } from "../clipboard";
+import { copyTextToSystemClipboard } from "../src/clipboard";
-import { NonDeletedExcalidrawElement } from "../element/types";
+import { NonDeletedExcalidrawElement } from "../src/element/types";
-import { UIAppState } from "../types";
+import { UIAppState } from "../src/types";
 
 type StorageSizes = { scene: number; total: number };
 

excalidraw-app/collab/Collab.tsx

@@ -1,23 +1,23 @@
 import throttle from "lodash.throttle";
 import { PureComponent } from "react";
-import { ExcalidrawImperativeAPI } from "../../types";
+import { ExcalidrawImperativeAPI } from "../../src/types";
-import { ErrorDialog } from "../../components/ErrorDialog";
+import { ErrorDialog } from "../../src/components/ErrorDialog";
-import { APP_NAME, ENV, EVENT } from "../../constants";
+import { APP_NAME, ENV, EVENT } from "../../src/constants";
-import { ImportedDataState } from "../../data/types";
+import { ImportedDataState } from "../../src/data/types";
 import {
   ExcalidrawElement,
   InitializedExcalidrawImageElement,
-} from "../../element/types";
+} from "../../src/element/types";
 import {
   getSceneVersion,
   restoreElements,
-} from "../../packages/excalidraw/index";
+} from "../../src/packages/excalidraw/index";
-import { Collaborator, Gesture } from "../../types";
+import { Collaborator, Gesture } from "../../src/types";
 import {
   preventUnload,
   resolvablePromise,
   withBatchedUpdates,
-} from "../../utils";
+} from "../../src/utils";
 import {
   CURSOR_SYNC_TIMEOUT,
   FILE_UPLOAD_MAX_BYTES,
@@ -48,25 +48,25 @@ import {
 } from "../data/localStorage";
 import Portal from "./Portal";
 import RoomDialog from "./RoomDialog";
-import { t } from "../../i18n";
+import { t } from "../../src/i18n";
-import { UserIdleState } from "../../types";
+import { UserIdleState } from "../../src/types";
-import { IDLE_THRESHOLD, ACTIVE_THRESHOLD } from "../../constants";
+import { IDLE_THRESHOLD, ACTIVE_THRESHOLD } from "../../src/constants";
 import {
   encodeFilesForUpload,
   FileManager,
   updateStaleImageStatuses,
 } from "../data/FileManager";
-import { AbortError } from "../../errors";
+import { AbortError } from "../../src/errors";
 import {
   isImageElement,
   isInitializedImageElement,
-} from "../../element/typeChecks";
+} from "../../src/element/typeChecks";
-import { newElementWith } from "../../element/mutateElement";
+import { newElementWith } from "../../src/element/mutateElement";
 import {
   ReconciledElements,
   reconcileElements as _reconcileElements,
 } from "./reconciliation";
-import { decryptData } from "../../data/encryption";
+import { decryptData } from "../../src/data/encryption";
 import { resetBrowserStateVersions } from "../data/tabSync";
 import { LocalData } from "../data/LocalData";
 import { atom, useAtom } from "jotai";

excalidraw-app/collab/Portal.tsx

@@ -6,19 +6,19 @@ import {
 
 import { TCollabClass } from "./Collab";
 
-import { ExcalidrawElement } from "../../element/types";
+import { ExcalidrawElement } from "../../src/element/types";
 import {
   WS_EVENTS,
   FILE_UPLOAD_TIMEOUT,
   WS_SCENE_EVENT_TYPES,
 } from "../app_constants";
-import { UserIdleState } from "../../types";
+import { UserIdleState } from "../../src/types";
-import { trackEvent } from "../../analytics";
+import { trackEvent } from "../../src/analytics";
 import throttle from "lodash.throttle";
-import { newElementWith } from "../../element/mutateElement";
+import { newElementWith } from "../../src/element/mutateElement";
 import { BroadcastedExcalidrawElement } from "./reconciliation";
-import { encryptData } from "../../data/encryption";
+import { encryptData } from "../../src/data/encryption";
-import { PRECEDING_ELEMENT_KEY } from "../../constants";
+import { PRECEDING_ELEMENT_KEY } from "../../src/constants";
 
 class Portal {
   collab: TCollabClass;

excalidraw-app/collab/RoomDialog.scss

@@ -1,4 +1,4 @@
-@import "../../css/variables.module";
+@import "../../src/css/variables.module";
 
 .excalidraw {
   .RoomDialog {

excalidraw-app/collab/RoomDialog.tsx

@@ -1,13 +1,13 @@
 import { useRef, useState } from "react";
 import * as Popover from "@radix-ui/react-popover";
 
-import { copyTextToSystemClipboard } from "../../clipboard";
+import { copyTextToSystemClipboard } from "../../src/clipboard";
-import { trackEvent } from "../../analytics";
+import { trackEvent } from "../../src/analytics";
-import { getFrame } from "../../utils";
+import { getFrame } from "../../src/utils";
-import { useI18n } from "../../i18n";
+import { useI18n } from "../../src/i18n";
-import { KEYS } from "../../keys";
+import { KEYS } from "../../src/keys";
 
-import { Dialog } from "../../components/Dialog";
+import { Dialog } from "../../src/components/Dialog";
 import {
   copyIcon,
   playerPlayIcon,
@@ -16,11 +16,11 @@ import {
   shareIOS,
   shareWindows,
   tablerCheckIcon,
-} from "../../components/icons";
+} from "../../src/components/icons";
-import { TextField } from "../../components/TextField";
+import { TextField } from "../../src/components/TextField";
-import { FilledButton } from "../../components/FilledButton";
+import { FilledButton } from "../../src/components/FilledButton";
 
-import { ReactComponent as CollabImage } from "../../assets/lock.svg";
+import { ReactComponent as CollabImage } from "../../src/assets/lock.svg";
 import "./RoomDialog.scss";
 
 const getShareIcon = () => {

excalidraw-app/collab/reconciliation.ts

@@ -1,7 +1,7 @@
-import { PRECEDING_ELEMENT_KEY } from "../../constants";
+import { PRECEDING_ELEMENT_KEY } from "../../src/constants";
-import { ExcalidrawElement } from "../../element/types";
+import { ExcalidrawElement } from "../../src/element/types";
-import { AppState } from "../../types";
+import { AppState } from "../../src/types";
-import { arrayToMapWithIndex } from "../../utils";
+import { arrayToMapWithIndex } from "../../src/utils";
 
 export type ReconciledElements = readonly ExcalidrawElement[] & {
   _brand: "reconciledElements";

excalidraw-app/components/AppFooter.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Footer } from "../../packages/excalidraw/index";
+import { Footer } from "../../src/packages/excalidraw/index";
 import { EncryptedIcon } from "./EncryptedIcon";
 import { ExcalidrawPlusAppLink } from "./ExcalidrawPlusAppLink";
 import { isExcalidrawPlusSignedUser } from "../app_constants";

excalidraw-app/components/AppMainMenu.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { PlusPromoIcon } from "../../components/icons";
+import { PlusPromoIcon } from "../../src/components/icons";
-import { MainMenu } from "../../packages/excalidraw/index";
+import { MainMenu } from "../../src/packages/excalidraw/index";
 import { LanguageList } from "./LanguageList";
 
 export const AppMainMenu: React.FC<{

excalidraw-app/components/AppWelcomeScreen.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import { PlusPromoIcon } from "../../components/icons";
+import { PlusPromoIcon } from "../../src/components/icons";
-import { useI18n } from "../../i18n";
+import { useI18n } from "../../src/i18n";
-import { WelcomeScreen } from "../../packages/excalidraw/index";
+import { WelcomeScreen } from "../../src/packages/excalidraw/index";
 import { isExcalidrawPlusSignedUser } from "../app_constants";
-import { POINTER_EVENTS } from "../../constants";
+import { POINTER_EVENTS } from "../../src/constants";
 
 export const AppWelcomeScreen: React.FC<{
   setCollabDialogShown: (toggle: boolean) => any;

excalidraw-app/components/EncryptedIcon.tsx

@@ -1,6 +1,6 @@
-import { shield } from "../../components/icons";
+import { shield } from "../../src/components/icons";
-import { Tooltip } from "../../components/Tooltip";
+import { Tooltip } from "../../src/components/Tooltip";
-import { useI18n } from "../../i18n";
+import { useI18n } from "../../src/i18n";
 
 export const EncryptedIcon = () => {
   const { t } = useI18n();

excalidraw-app/components/ExportToExcalidrawPlus.tsx

@@ -1,20 +1,20 @@
 import React from "react";
-import { Card } from "../../components/Card";
+import { Card } from "../../src/components/Card";
-import { ToolButton } from "../../components/ToolButton";
+import { ToolButton } from "../../src/components/ToolButton";
-import { serializeAsJSON } from "../../data/json";
+import { serializeAsJSON } from "../../src/data/json";
 import { loadFirebaseStorage, saveFilesToFirebase } from "../data/firebase";
-import { FileId, NonDeletedExcalidrawElement } from "../../element/types";
+import { FileId, NonDeletedExcalidrawElement } from "../../src/element/types";
-import { AppState, BinaryFileData, BinaryFiles } from "../../types";
+import { AppState, BinaryFileData, BinaryFiles } from "../../src/types";
 import { nanoid } from "nanoid";
-import { useI18n } from "../../i18n";
+import { useI18n } from "../../src/i18n";
-import { encryptData, generateEncryptionKey } from "../../data/encryption";
+import { encryptData, generateEncryptionKey } from "../../src/data/encryption";
-import { isInitializedImageElement } from "../../element/typeChecks";
+import { isInitializedImageElement } from "../../src/element/typeChecks";
 import { FILE_UPLOAD_MAX_BYTES } from "../app_constants";
 import { encodeFilesForUpload } from "../data/FileManager";
-import { MIME_TYPES } from "../../constants";
+import { MIME_TYPES } from "../../src/constants";
-import { trackEvent } from "../../analytics";
+import { trackEvent } from "../../src/analytics";
-import { getFrame } from "../../utils";
+import { getFrame } from "../../src/utils";
-import { ExcalidrawLogo } from "../../components/ExcalidrawLogo";
+import { ExcalidrawLogo } from "../../src/components/ExcalidrawLogo";
 
 export const exportToExcalidrawPlus = async (
   elements: readonly NonDeletedExcalidrawElement[],

excalidraw-app/components/GitHubCorner.tsx

@@ -1,7 +1,7 @@
 import oc from "open-color";
 import React from "react";
-import { THEME } from "../../constants";
+import { THEME } from "../../src/constants";
-import { Theme } from "../../element/types";
+import { Theme } from "../../src/element/types";
 
 // https://github.com/tholman/github-corners
 export const GitHubCorner = React.memo(

excalidraw-app/components/LanguageList.tsx

@@ -1,8 +1,8 @@
 import { useSetAtom } from "jotai";
 import React from "react";
 import { appLangCodeAtom } from "..";
-import { useI18n } from "../../i18n";
+import { useI18n } from "../../src/i18n";
-import { languages } from "../../i18n";
+import { languages } from "../../src/i18n";
 
 export const LanguageList = ({ style }: { style?: React.CSSProperties }) => {
   const { t, langCode } = useI18n();

excalidraw-app/data/FileManager.ts

@@ -1,19 +1,19 @@
-import { compressData } from "../../data/encode";
+import { compressData } from "../../src/data/encode";
-import { newElementWith } from "../../element/mutateElement";
+import { newElementWith } from "../../src/element/mutateElement";
-import { isInitializedImageElement } from "../../element/typeChecks";
+import { isInitializedImageElement } from "../../src/element/typeChecks";
 import {
   ExcalidrawElement,
   ExcalidrawImageElement,
   FileId,
   InitializedExcalidrawImageElement,
-} from "../../element/types";
+} from "../../src/element/types";
-import { t } from "../../i18n";
+import { t } from "../../src/i18n";
 import {
   BinaryFileData,
   BinaryFileMetadata,
   ExcalidrawImperativeAPI,
   BinaryFiles,
-} from "../../types";
+} from "../../src/types";
 
 export class FileManager {
   /** files being fetched */

excalidraw-app/data/LocalData.ts

@@ -11,11 +11,11 @@
  */
 
 import { createStore, entries, del, getMany, set, setMany } from "idb-keyval";
-import { clearAppStateForLocalStorage } from "../../appState";
+import { clearAppStateForLocalStorage } from "../../src/appState";
-import { clearElementsForLocalStorage } from "../../element";
+import { clearElementsForLocalStorage } from "../../src/element";
-import { ExcalidrawElement, FileId } from "../../element/types";
+import { ExcalidrawElement, FileId } from "../../src/element/types";
-import { AppState, BinaryFileData, BinaryFiles } from "../../types";
+import { AppState, BinaryFileData, BinaryFiles } from "../../src/types";
-import { debounce } from "../../utils";
+import { debounce } from "../../src/utils";
 import { SAVE_TO_LOCAL_STORAGE_TIMEOUT, STORAGE_KEYS } from "../app_constants";
 import { FileManager } from "./FileManager";
 import { Locker } from "./Locker";

excalidraw-app/data/firebase.ts

@@ -1,20 +1,20 @@
-import { ExcalidrawElement, FileId } from "../../element/types";
+import { ExcalidrawElement, FileId } from "../../src/element/types";
-import { getSceneVersion } from "../../element";
+import { getSceneVersion } from "../../src/element";
 import Portal from "../collab/Portal";
-import { restoreElements } from "../../data/restore";
+import { restoreElements } from "../../src/data/restore";
 import {
   AppState,
   BinaryFileData,
   BinaryFileMetadata,
   DataURL,
-} from "../../types";
+} from "../../src/types";
 import { FILE_CACHE_MAX_AGE_SEC } from "../app_constants";
-import { decompressData } from "../../data/encode";
+import { decompressData } from "../../src/data/encode";
-import { encryptData, decryptData } from "../../data/encryption";
+import { encryptData, decryptData } from "../../src/data/encryption";
-import { MIME_TYPES } from "../../constants";
+import { MIME_TYPES } from "../../src/constants";
 import { reconcileElements } from "../collab/reconciliation";
 import { getSyncableElements, SyncableExcalidrawElement } from ".";
-import { ResolutionType } from "../../utility-types";
+import { ResolutionType } from "../../src/utility-types";
 
 // private
 // -----------------------------------------------------------------------------

excalidraw-app/data/index.ts

@@ -1,23 +1,23 @@
-import { compressData, decompressData } from "../../data/encode";
+import { compressData, decompressData } from "../../src/data/encode";
 import {
   decryptData,
   generateEncryptionKey,
   IV_LENGTH_BYTES,
-} from "../../data/encryption";
+} from "../../src/data/encryption";
-import { serializeAsJSON } from "../../data/json";
+import { serializeAsJSON } from "../../src/data/json";
-import { restore } from "../../data/restore";
+import { restore } from "../../src/data/restore";
-import { ImportedDataState } from "../../data/types";
+import { ImportedDataState } from "../../src/data/types";
-import { isInvisiblySmallElement } from "../../element/sizeHelpers";
+import { isInvisiblySmallElement } from "../../src/element/sizeHelpers";
-import { isInitializedImageElement } from "../../element/typeChecks";
+import { isInitializedImageElement } from "../../src/element/typeChecks";
-import { ExcalidrawElement, FileId } from "../../element/types";
+import { ExcalidrawElement, FileId } from "../../src/element/types";
-import { t } from "../../i18n";
+import { t } from "../../src/i18n";
 import {
   AppState,
   BinaryFileData,
   BinaryFiles,
   UserIdleState,
-} from "../../types";
+} from "../../src/types";
-import { bytesToHexString } from "../../utils";
+import { bytesToHexString } from "../../src/utils";
 import {
   DELETED_ELEMENT_TIMEOUT,
   FILE_UPLOAD_MAX_BYTES,

excalidraw-app/data/localStorage.ts

@@ -1,12 +1,12 @@
-import { ExcalidrawElement } from "../../element/types";
+import { ExcalidrawElement } from "../../src/element/types";
-import { AppState } from "../../types";
+import { AppState } from "../../src/types";
 import {
   clearAppStateForLocalStorage,
   getDefaultAppState,
-} from "../../appState";
+} from "../../src/appState";
-import { clearElementsForLocalStorage } from "../../element";
+import { clearElementsForLocalStorage } from "../../src/element";
 import { STORAGE_KEYS } from "../app_constants";
-import { ImportedDataState } from "../../data/types";
+import { ImportedDataState } from "../../src/data/types";
 
 export const saveUsernameToLocalStorage = (username: string) => {
   try {

excalidraw-app/index.tsx

@@ -1,31 +1,31 @@
-import polyfill from "../polyfill";
+import polyfill from "../src/polyfill";
 import LanguageDetector from "i18next-browser-languagedetector";
 import { useEffect, useRef, useState } from "react";
-import { trackEvent } from "../analytics";
+import { trackEvent } from "../src/analytics";
-import { getDefaultAppState } from "../appState";
+import { getDefaultAppState } from "../src/appState";
-import { ErrorDialog } from "../components/ErrorDialog";
+import { ErrorDialog } from "../src/components/ErrorDialog";
-import { TopErrorBoundary } from "../components/TopErrorBoundary";
+import { TopErrorBoundary } from "../src/components/TopErrorBoundary";
 import {
   APP_NAME,
   EVENT,
   THEME,
   TITLE_TIMEOUT,
   VERSION_TIMEOUT,
-} from "../constants";
+} from "../src/constants";
-import { loadFromBlob } from "../data/blob";
+import { loadFromBlob } from "../src/data/blob";
 import {
   ExcalidrawElement,
   FileId,
   NonDeletedExcalidrawElement,
   Theme,
-} from "../element/types";
+} from "../src/element/types";
-import { useCallbackRefState } from "../hooks/useCallbackRefState";
+import { useCallbackRefState } from "../src/hooks/useCallbackRefState";
-import { t } from "../i18n";
+import { t } from "../src/i18n";
 import {
   Excalidraw,
   defaultLang,
   LiveCollaborationTrigger,
-} from "../packages/excalidraw/index";
+} from "../src/packages/excalidraw/index";
 import {
   AppState,
   LibraryItems,
@@ -33,7 +33,7 @@ import {
   BinaryFiles,
   ExcalidrawInitialDataState,
   UIAppState,
-} from "../types";
+} from "../src/types";
 import {
   debounce,
   getVersion,
@@ -43,7 +43,7 @@ import {
   ResolvablePromise,
   resolvablePromise,
   isRunningInIframe,
-} from "../utils";
+} from "../src/utils";
 import {
   FIREBASE_STORAGE_PREFIXES,
   STORAGE_KEYS,
@@ -68,33 +68,40 @@ import {
   importUsernameFromLocalStorage,
 } from "./data/localStorage";
 import CustomStats from "./CustomStats";
-import { restore, restoreAppState, RestoredDataState } from "../data/restore";
+import {
+  restore,
+  restoreAppState,
+  RestoredDataState,
+} from "../src/data/restore";
 import {
   ExportToExcalidrawPlus,
   exportToExcalidrawPlus,
 } from "./components/ExportToExcalidrawPlus";
 import { updateStaleImageStatuses } from "./data/FileManager";
-import { newElementWith } from "../element/mutateElement";
+import { newElementWith } from "../src/element/mutateElement";
-import { isInitializedImageElement } from "../element/typeChecks";
+import { isInitializedImageElement } from "../src/element/typeChecks";
 import { loadFilesFromFirebase } from "./data/firebase";
 import { LocalData } from "./data/LocalData";
 import { isBrowserStorageStateNewer } from "./data/tabSync";
 import clsx from "clsx";
 import { reconcileElements } from "./collab/reconciliation";
-import { parseLibraryTokensFromUrl, useHandleLibrary } from "../data/library";
+import {
+  parseLibraryTokensFromUrl,
+  useHandleLibrary,
+} from "../src/data/library";
 import { AppMainMenu } from "./components/AppMainMenu";
 import { AppWelcomeScreen } from "./components/AppWelcomeScreen";
 import { AppFooter } from "./components/AppFooter";
 import { atom, Provider, useAtom, useAtomValue } from "jotai";
-import { useAtomWithInitialValue } from "../jotai";
+import { useAtomWithInitialValue } from "../src/jotai";
 import { appJotaiStore } from "./app-jotai";
 
 import "./index.scss";
-import { ResolutionType } from "../utility-types";
+import { ResolutionType } from "../src/utility-types";
-import { ShareableLinkDialog } from "../components/ShareableLinkDialog";
+import { ShareableLinkDialog } from "../src/components/ShareableLinkDialog";
-import { openConfirmModal } from "../components/OverwriteConfirm/OverwriteConfirmState";
+import { openConfirmModal } from "../src/components/OverwriteConfirm/OverwriteConfirmState";
-import { OverwriteConfirmDialog } from "../components/OverwriteConfirm/OverwriteConfirm";
+import { OverwriteConfirmDialog } from "../src/components/OverwriteConfirm/OverwriteConfirm";
-import Trans from "../components/Trans";
+import Trans from "../src/components/Trans";
 
 polyfill();
 

excalidraw-app/tests/LanguageList.test.tsx

@@ -0,0 +1,29 @@
+import { defaultLang } from "../../src/i18n";
+import { UI } from "../../src/tests/helpers/ui";
+import { screen, fireEvent, waitFor, render } from "../../src/tests/test-utils";
+
+import ExcalidrawApp from "../../excalidraw-app";
+
+describe("Test LanguageList", () => {
+  it("rerenders UI on language change", async () => {
+    await render(<ExcalidrawApp />);
+
+    // select rectangle tool to show properties menu
+    UI.clickTool("rectangle");
+    // english lang should display `thin` label
+    expect(screen.queryByTitle(/thin/i)).not.toBeNull();
+    fireEvent.click(document.querySelector(".dropdown-menu-button")!);
+
+    fireEvent.change(document.querySelector(".dropdown-select__language")!, {
+      target: { value: "de-DE" },
+    });
+    // switching to german, `thin` label should no longer exist
+    await waitFor(() => expect(screen.queryByTitle(/thin/i)).toBeNull());
+    // reset language
+    fireEvent.change(document.querySelector(".dropdown-select__language")!, {
+      target: { value: defaultLang.code },
+    });
+    // switching back to English
+    await waitFor(() => expect(screen.queryByTitle(/thin/i)).not.toBeNull());
+  });
+});

excalidraw-app/tests/MobileMenu.test.tsx

@@ -1,11 +1,11 @@
-import ExcalidrawApp from "../excalidraw-app";
+import ExcalidrawApp from "../../excalidraw-app";
 import {
   mockBoundingClientRect,
   render,
   restoreOriginalGetBoundingClientRect,
-} from "./test-utils";
+} from "../../src/tests/test-utils";
 
-import { UI } from "./helpers/ui";
+import { UI } from "../../src/tests/helpers/ui";
 
 describe("Test MobileMenu", () => {
   const { h } = window;

excalidraw-app/tests/collab.test.tsx

@@ -1,8 +1,8 @@
 import { vi } from "vitest";
-import { render, updateSceneData, waitFor } from "./test-utils";
+import { render, updateSceneData, waitFor } from "../../src/tests/test-utils";
-import ExcalidrawApp from "../excalidraw-app";
+import ExcalidrawApp from "../../excalidraw-app";
-import { API } from "./helpers/api";
+import { API } from "../../src/tests/helpers/api";
-import { createUndoAction } from "../actions/actionHistory";
+import { createUndoAction } from "../../src/actions/actionHistory";
 const { h } = window;
 
 Object.defineProperty(window, "crypto", {
@@ -16,7 +16,7 @@ Object.defineProperty(window, "crypto", {
   },
 });
 
-vi.mock("../excalidraw-app/data/index.ts", async (importActual) => {
+vi.mock("../../excalidraw-app/data/index.ts", async (importActual) => {
   const module = (await importActual()) as any;
   return {
     __esmodule: true,
@@ -27,7 +27,7 @@ vi.mock("../excalidraw-app/data/index.ts", async (importActual) => {
   };
 });
 
-vi.mock("../excalidraw-app/data/firebase.ts", () => {
+vi.mock("../../excalidraw-app/data/firebase.ts", () => {
   const loadFromFirebase = async () => null;
   const saveToFirebase = () => {};
   const isSavedToFirebase = () => true;

excalidraw-app/tests/reconciliation.test.ts

@@ -1,13 +1,13 @@
 import { expect } from "chai";
-import { PRECEDING_ELEMENT_KEY } from "../constants";
+import { PRECEDING_ELEMENT_KEY } from "../../src/constants";
-import { ExcalidrawElement } from "../element/types";
+import { ExcalidrawElement } from "../../src/element/types";
 import {
   BroadcastedExcalidrawElement,
   ReconciledElements,
   reconcileElements,
-} from "../excalidraw-app/collab/reconciliation";
+} from "../../excalidraw-app/collab/reconciliation";
-import { randomInteger } from "../random";
+import { randomInteger } from "../../src/random";
-import { AppState } from "../types";
+import { AppState } from "../../src/types";
 
 type Id = string;
 type ElementLike = {

src/components/App.tsx

@@ -894,7 +894,11 @@ class App extends React.Component<AppProps, AppState> {
                       title="Excalidraw Embedded Content"
                       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                       allowFullScreen={true}
-                      sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation allow-downloads"
+                      sandbox={`${
+                        embedLink?.sandbox?.allowSameOrigin
+                          ? "allow-same-origin"
+                          : ""
+                      } allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation allow-downloads`}
                     />
                   )}
                 </div>
@@ -1330,7 +1334,8 @@ class App extends React.Component<AppProps, AppState> {
   private openEyeDropper = ({ type }: { type: "stroke" | "background" }) => {
     jotaiStore.set(activeEyeDropperAtom, {
       swapPreviewOnAlt: true,
-      previewType: type === "stroke" ? "strokeColor" : "backgroundColor",
+      colorPickerType:
+        type === "stroke" ? "elementStroke" : "elementBackground",
       onSelect: (color, event) => {
         const shouldUpdateStrokeColor =
           (type === "background" && event.altKey) ||
@@ -1341,12 +1346,14 @@ class App extends React.Component<AppProps, AppState> {
           this.state.activeTool.type !== "selection"
         ) {
           if (shouldUpdateStrokeColor) {
-            this.setState({
+            this.syncActionResult({
-              currentItemStrokeColor: color,
+              appState: { ...this.state, currentItemStrokeColor: color },
+              commitToHistory: true,
             });
           } else {
-            this.setState({
+            this.syncActionResult({
-              currentItemBackgroundColor: color,
+              appState: { ...this.state, currentItemBackgroundColor: color },
+              commitToHistory: true,
             });
           }
         } else {

src/components/ColorPicker/ColorInput.tsx

@@ -1,7 +1,10 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { getColor } from "./ColorPicker";
 import { useAtom } from "jotai";
-import { activeColorPickerSectionAtom } from "./colorPickerUtils";
+import {
+  ColorPickerType,
+  activeColorPickerSectionAtom,
+} from "./colorPickerUtils";
 import { eyeDropperIcon } from "../icons";
 import { jotaiScope } from "../../jotai";
 import { KEYS } from "../../keys";
@@ -15,14 +18,14 @@ interface ColorInputProps {
   color: string;
   onChange: (color: string) => void;
   label: string;
-  eyeDropperType: "strokeColor" | "backgroundColor";
+  colorPickerType: ColorPickerType;
 }
 
 export const ColorInput = ({
   color,
   onChange,
   label,
-  eyeDropperType,
+  colorPickerType,
 }: ColorInputProps) => {
   const device = useDevice();
   const [innerValue, setInnerValue] = useState(color);
@@ -116,7 +119,7 @@ export const ColorInput = ({
                   : {
                       keepOpenOnAlt: false,
                       onSelect: (color) => onChange(color),
-                      previewType: eyeDropperType,
+                      colorPickerType,
                     },
               )
             }

src/components/ColorPicker/ColorPicker.tsx

@@ -82,14 +82,7 @@ const ColorPickerPopupContent = ({
   const { container } = useExcalidrawContainer();
   const { isMobile, isLandscape } = useDevice();
 
-  const eyeDropperType =
+  const colorInputJSX = (
-    type === "canvasBackground"
-      ? undefined
-      : type === "elementBackground"
-      ? "backgroundColor"
-      : "strokeColor";
-
-  const colorInputJSX = eyeDropperType && (
     <div>
       <PickerHeading>{t("colorPicker.hexCode")}</PickerHeading>
       <ColorInput
@@ -98,7 +91,7 @@ const ColorPickerPopupContent = ({
         onChange={(color) => {
           onChange(color);
         }}
-        eyeDropperType={eyeDropperType}
+        colorPickerType={type}
       />
     </div>
   );
@@ -160,7 +153,7 @@ const ColorPickerPopupContent = ({
             "0px 7px 14px rgba(0, 0, 0, 0.05), 0px 0px 3.12708px rgba(0, 0, 0, 0.0798), 0px 0px 0.931014px rgba(0, 0, 0, 0.1702)",
         }}
       >
-        {palette && eyeDropperType ? (
+        {palette ? (
           <Picker
             palette={palette}
             color={color}
@@ -173,7 +166,7 @@ const ColorPickerPopupContent = ({
                   state = state || {
                     keepOpenOnAlt: true,
                     onSelect: onChange,
-                    previewType: eyeDropperType,
+                    colorPickerType: type,
                   };
                   state.keepOpenOnAlt = true;
                   return state;
@@ -184,7 +177,7 @@ const ColorPickerPopupContent = ({
                   : {
                       keepOpenOnAlt: false,
                       onSelect: onChange,
-                      previewType: eyeDropperType,
+                      colorPickerType: type,
                     };
               });
             }}

src/components/EyeDropper.tsx

@@ -1,35 +1,47 @@
 import { atom } from "jotai";
-import { useEffect, useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 import { rgbToHex } from "../colors";
 import { EVENT } from "../constants";
 import { useUIAppState } from "../context/ui-appState";
-import { mutateElement } from "../element/mutateElement";
 import { useCreatePortalContainer } from "../hooks/useCreatePortalContainer";
 import { useOutsideClick } from "../hooks/useOutsideClick";
 import { KEYS } from "../keys";
 import { getSelectedElements } from "../scene";
-import Scene from "../scene/Scene";
-import { ShapeCache } from "../scene/ShapeCache";
 import { useApp, useExcalidrawContainer, useExcalidrawElements } from "./App";
+import { useStable } from "../hooks/useStable";
 
 import "./EyeDropper.scss";
+import { ColorPickerType } from "./ColorPicker/colorPickerUtils";
+import { ExcalidrawElement } from "../element/types";
 
-type EyeDropperProperties = {
+export type EyeDropperProperties = {
   keepOpenOnAlt: boolean;
   swapPreviewOnAlt?: boolean;
+  /** called when user picks color (on pointerup) */
   onSelect: (color: string, event: PointerEvent) => void;
-  previewType: "strokeColor" | "backgroundColor";
+  /**
+   * property of selected elements to update live when alt-dragging.
+   * Supply `null` if not applicable (e.g. updating the canvas bg instead of
+   * elements)
+   **/
+  colorPickerType: ColorPickerType;
 };
 
 export const activeEyeDropperAtom = atom<null | EyeDropperProperties>(null);
 
 export const EyeDropper: React.FC<{
   onCancel: () => void;
-  onSelect: Required<EyeDropperProperties>["onSelect"];
+  onSelect: EyeDropperProperties["onSelect"];
-  swapPreviewOnAlt?: EyeDropperProperties["swapPreviewOnAlt"];
+  /** called when color changes, on pointerdown for preview */
-  previewType: EyeDropperProperties["previewType"];
+  onChange: (
-}> = ({ onCancel, onSelect, swapPreviewOnAlt, previewType }) => {
+    type: ColorPickerType,
+    color: string,
+    selectedElements: ExcalidrawElement[],
+    event: { altKey: boolean },
+  ) => void;
+  colorPickerType: EyeDropperProperties["colorPickerType"];
+}> = ({ onCancel, onChange, onSelect, colorPickerType }) => {
   const eyeDropperContainer = useCreatePortalContainer({
     className: "excalidraw-eye-dropper-backdrop",
     parentSelector: ".excalidraw-eye-dropper-container",
@@ -40,9 +52,13 @@ export const EyeDropper: React.FC<{
 
   const selectedElements = getSelectedElements(elements, appState);
 
-  const metaStuffRef = useRef({ selectedElements, app });
+  const stableProps = useStable({
-  metaStuffRef.current.selectedElements = selectedElements;
+    app,
-  metaStuffRef.current.app = app;
+    onCancel,
+    onChange,
+    onSelect,
+    selectedElements,
+  });
 
   const { container: excalidrawContainer } = useExcalidrawContainer();
 
@@ -90,28 +106,28 @@ export const EyeDropper: React.FC<{
       const currentColor = getCurrentColor({ clientX, clientY });
 
       if (isHoldingPointerDown) {
-        for (const element of metaStuffRef.current.selectedElements) {
+        stableProps.onChange(
-          mutateElement(
+          colorPickerType,
-            element,
+          currentColor,
-            {
+          stableProps.selectedElements,
-              [altKey && swapPreviewOnAlt
+          { altKey },
-                ? previewType === "strokeColor"
+        );
-                  ? "backgroundColor"
-                  : "strokeColor"
-                : previewType]: currentColor,
-            },
-            false,
-          );
-          ShapeCache.delete(element);
-        }
-        Scene.getScene(
-          metaStuffRef.current.selectedElements[0],
-        )?.informMutation();
       }
 
       colorPreviewDiv.style.background = currentColor;
     };
 
+    const onCancel = () => {
+      stableProps.onCancel();
+    };
+
+    const onSelect: Required<EyeDropperProperties>["onSelect"] = (
+      color,
+      event,
+    ) => {
+      stableProps.onSelect(color, event);
+    };
+
     const pointerDownListener = (event: PointerEvent) => {
       isHoldingPointerDown = true;
       // NOTE we can't event.preventDefault() as that would stop
@@ -148,8 +164,8 @@ export const EyeDropper: React.FC<{
 
     // init color preview else it would show only after the first mouse move
     mouseMoveListener({
-      clientX: metaStuffRef.current.app.lastViewportPosition.x,
+      clientX: stableProps.app.lastViewportPosition.x,
-      clientY: metaStuffRef.current.app.lastViewportPosition.y,
+      clientY: stableProps.app.lastViewportPosition.y,
       altKey: false,
     });
 
@@ -179,12 +195,10 @@ export const EyeDropper: React.FC<{
       window.removeEventListener(EVENT.BLUR, onCancel);
     };
   }, [
+    stableProps,
     app.canvas,
     eyeDropperContainer,
-    onCancel,
+    colorPickerType,
-    onSelect,
-    swapPreviewOnAlt,
-    previewType,
     excalidrawContainer,
     appState.offsetLeft,
     appState.offsetTop,

src/components/LayerUI.tsx

@@ -52,6 +52,9 @@ import { EyeDropper, activeEyeDropperAtom } from "./EyeDropper";
 
 import "./LayerUI.scss";
 import "./Toolbar.scss";
+import { mutateElement } from "../element/mutateElement";
+import { ShapeCache } from "../scene/ShapeCache";
+import Scene from "../scene/Scene";
 
 interface LayerUIProps {
   actionManager: ActionManager;
@@ -368,11 +371,44 @@ const LayerUI = ({
       )}
       {eyeDropperState && !device.isMobile && (
         <EyeDropper
-          swapPreviewOnAlt={eyeDropperState.swapPreviewOnAlt}
+          colorPickerType={eyeDropperState.colorPickerType}
-          previewType={eyeDropperState.previewType}
           onCancel={() => {
             setEyeDropperState(null);
           }}
+          onChange={(colorPickerType, color, selectedElements, { altKey }) => {
+            if (
+              colorPickerType !== "elementBackground" &&
+              colorPickerType !== "elementStroke"
+            ) {
+              return;
+            }
+
+            if (selectedElements.length) {
+              for (const element of selectedElements) {
+                mutateElement(
+                  element,
+                  {
+                    [altKey && eyeDropperState.swapPreviewOnAlt
+                      ? colorPickerType === "elementBackground"
+                        ? "strokeColor"
+                        : "backgroundColor"
+                      : colorPickerType === "elementBackground"
+                      ? "backgroundColor"
+                      : "strokeColor"]: color,
+                  },
+                  false,
+                );
+                ShapeCache.delete(element);
+              }
+              Scene.getScene(selectedElements[0])?.informMutation();
+            } else if (colorPickerType === "elementBackground") {
+              setAppState({
+                currentItemBackgroundColor: color,
+              });
+            } else {
+              setAppState({ currentItemStrokeColor: color });
+            }
+          }}
           onSelect={(color, event) => {
             setEyeDropperState((state) => {
               return state?.keepOpenOnAlt && event.altKey ? state : null;

src/element/embeddable.ts

@@ -17,6 +17,7 @@ type EmbeddedLink =
   | ({
       aspectRatio: { w: number; h: number };
       warning?: string;
+      sandbox?: { allowSameOrigin?: boolean };
     } & (
       | { type: "video" | "generic"; link: string }
       | { type: "document"; srcdoc: (theme: Theme) => string }
@@ -28,20 +29,20 @@ const embeddedLinkCache = new Map<string, EmbeddedLink>();
 const RE_YOUTUBE =
   /^(?:http(?:s)?:\/\/)?(?:www\.)?youtu(?:be\.com|\.be)\/(embed\/|watch\?v=|shorts\/|playlist\?list=|embed\/videoseries\?list=)?([a-zA-Z0-9_-]+)(?:\?t=|&t=|\?start=|&start=)?([a-zA-Z0-9_-]+)?[^\s]*$/;
 const RE_VIMEO =
-  /^(?:http(?:s)?:\/\/)?(?:(?:w){3}.)?(?:player\.)?vimeo\.com\/(?:video\/)?([^?\s]+)(?:\?.*)?$/;
+  /^(?:http(?:s)?:\/\/)?(?:(?:w){3}\.)?(?:player\.)?vimeo\.com\/(?:video\/)?([^?\s]+)(?:\?.*)?$/;
 const RE_FIGMA = /^https:\/\/(?:www\.)?figma\.com/;
 
 const RE_GH_GIST = /^https:\/\/gist\.github\.com/;
 const RE_GH_GIST_EMBED =
-  /^<script[\s\S]*?\ssrc=["'](https:\/\/gist.github.com\/.*?)\.js["']/i;
+  /https?:\/\/gist\.github\.com\/([\w_-]+)\/([\w_-]+)\.js["']/i;
 
 // not anchored to start to allow <blockquote> twitter embeds
-const RE_TWITTER = /(?:http(?:s)?:\/\/)?(?:(?:w){3}.)?twitter.com/;
+const RE_TWITTER = /(?:https?:\/\/)?(?:(?:w){3}\.)?(?:twitter|x)\.com/;
 const RE_TWITTER_EMBED =
-  /^<blockquote[\s\S]*?\shref=["'](https:\/\/twitter.com\/[^"']*)/i;
+  /^<blockquote[\s\S]*?\shref=["'](https?:\/\/(?:twitter|x)\.com\/[^"']*)/i;
 
 const RE_VALTOWN =
-  /^https:\/\/(?:www\.)?val.town\/(v|embed)\/[a-zA-Z_$][0-9a-zA-Z_$]+\.[a-zA-Z_$][0-9a-zA-Z_$]+/;
+  /^https:\/\/(?:www\.)?val\.town\/(v|embed)\/[a-zA-Z_$][0-9a-zA-Z_$]+\.[a-zA-Z_$][0-9a-zA-Z_$]+/;
 
 const RE_GENERIC_EMBED =
   /^<(?:iframe|blockquote)[\s\S]*?\s(?:src|href)=["']([^"']*)["'][\s\S]*?>$/i;
@@ -136,46 +137,27 @@ export const getEmbedLink = (link: string | null | undefined): EmbeddedLink => {
   }
 
   if (RE_TWITTER.test(link)) {
-    let ret: EmbeddedLink;
+    // the embed srcdoc still supports twitter.com domain only
-    // assume embed code
+    link = link.replace(/\bx.com\b/, "twitter.com");
-    if (/<blockquote/.test(link)) {
+
-      const srcDoc = createSrcDoc(link);
+    const ret: EmbeddedLink = {
-      ret = {
+      type: "document",
-        type: "document",
+      srcdoc: (theme: string) =>
-        srcdoc: () => srcDoc,
+        createSrcDoc(
-        aspectRatio: { w: 480, h: 480 },
+          `<blockquote class="twitter-tweet" data-dnt="true" data-theme="${theme}"><a href="${link}"></a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>`,
-      };
+        ),
-      // assume regular tweet url
+      aspectRatio: { w: 480, h: 480 },
-    } else {
+      sandbox: { allowSameOrigin: true },
-      ret = {
+    };
-        type: "document",
-        srcdoc: (theme: string) =>
-          createSrcDoc(
-            `<blockquote class="twitter-tweet" data-dnt="true" data-theme="${theme}"><a href="${link}"></a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>`,
-          ),
-        aspectRatio: { w: 480, h: 480 },
-      };
-    }
     embeddedLinkCache.set(originalLink, ret);
     return ret;
   }
 
   if (RE_GH_GIST.test(link)) {
-    let ret: EmbeddedLink;
+    const ret: EmbeddedLink = {
-    // assume embed code
+      type: "document",
-    if (/<script>/.test(link)) {
+      srcdoc: () =>
-      const srcDoc = createSrcDoc(link);
+        createSrcDoc(`
-      ret = {
-        type: "document",
-        srcdoc: () => srcDoc,
-        aspectRatio: { w: 550, h: 720 },
-      };
-      // assume regular url
-    } else {
-      ret = {
-        type: "document",
-        srcdoc: () =>
-          createSrcDoc(`
           <script src="${link}.js"></script>
           <style type="text/css">
             * { margin: 0px; }
@@ -183,9 +165,8 @@ export const getEmbedLink = (link: string | null | undefined): EmbeddedLink => {
             .gist .gist-file { height: calc(100vh - 2px); padding: 0px; display: grid; grid-template-rows: 1fr auto; }
           </style>
         `),
-        aspectRatio: { w: 550, h: 720 },
+      aspectRatio: { w: 550, h: 720 },
-      };
+    };
-    }
     embeddedLinkCache.set(link, ret);
     return ret;
   }
@@ -303,8 +284,8 @@ export const extractSrc = (htmlString: string): string => {
   }
 
   const gistMatch = htmlString.match(RE_GH_GIST_EMBED);
-  if (gistMatch && gistMatch.length === 2) {
+  if (gistMatch && gistMatch.length === 3) {
-    return gistMatch[1];
+    return `https://gist.github.com/${gistMatch[1]}/${gistMatch[2]}`;
   }
 
   const match = htmlString.match(RE_GENERIC_EMBED);

src/element/newElement.test.ts

@@ -203,7 +203,6 @@ describe("duplicating multiple elements", () => {
     );
 
     clonedArrows.forEach((arrow) => {
-      // console.log(arrow);
       expect(
         clonedRectangle.boundElements!.find((e) => e.id === arrow.id),
       ).toEqual(

src/element/textWysiwyg.test.tsx

@@ -1,5 +1,5 @@
 import ReactDOM from "react-dom";
-import ExcalidrawApp from "../excalidraw-app";
+import { Excalidraw } from "../packages/excalidraw/index";
 import { GlobalTestState, render, screen } from "../tests/test-utils";
 import { Keyboard, Pointer, UI } from "../tests/helpers/ui";
 import { CODES, KEYS } from "../keys";
@@ -41,7 +41,7 @@ describe("textWysiwyg", () => {
   describe("start text editing", () => {
     const { h } = window;
     beforeEach(async () => {
-      await render(<ExcalidrawApp />);
+      await render(<Excalidraw handleKeyboardGlobally={true} />);
       h.elements = [];
     });
 
@@ -243,7 +243,7 @@ describe("textWysiwyg", () => {
     });
 
     beforeEach(async () => {
-      await render(<ExcalidrawApp />);
+      await render(<Excalidraw handleKeyboardGlobally={true} />);
       //@ts-ignore
       h.app.refreshDeviceState(h.app.excalidrawContainerRef.current!);
 
@@ -477,7 +477,7 @@ describe("textWysiwyg", () => {
     const { h } = window;
 
     beforeEach(async () => {
-      await render(<ExcalidrawApp />);
+      await render(<Excalidraw handleKeyboardGlobally={true} />);
       h.elements = [];
 
       rectangle = UI.createElement("rectangle", {
@@ -1511,7 +1511,7 @@ describe("textWysiwyg", () => {
   });
 
   it("should bump the version of labelled arrow when label updated", async () => {
-    await render(<ExcalidrawApp />);
+    await render(<Excalidraw handleKeyboardGlobally={true} />);
     const arrow = UI.createElement("arrow", {
       width: 300,
       height: 0,

src/hooks/useStable.ts

@@ -0,0 +1,7 @@
+import { useRef } from "react";
+
+export const useStable = <T extends Record<string, any>>(value: T) => {
+  const ref = useRef<T>(value);
+  Object.assign(ref.current, value);
+  return ref.current;
+};

src/index.tsx

@@ -1,9 +1,9 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import ExcalidrawApp from "./excalidraw-app";
+import ExcalidrawApp from "../excalidraw-app";
 import { registerSW } from "virtual:pwa-register";
 
-import "./excalidraw-app/sentry";
+import "../excalidraw-app/sentry";
 window.__EXCALIDRAW_SHA__ = import.meta.env.VITE_APP_GIT_SHA;
 const rootElement = document.getElementById("root")!;
 const root = createRoot(rootElement);

src/packages/excalidraw/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@excalidraw/excalidraw",
-  "version": "0.16.0",
+  "version": "0.16.2",
   "main": "main.js",
   "types": "types/packages/excalidraw/index.d.ts",
   "files": [

src/tests/App.test.tsx

@@ -3,7 +3,7 @@ import * as Renderer from "../renderer/renderScene";
 import { reseed } from "../random";
 import { render, queryByTestId } from "../tests/test-utils";
 
-import ExcalidrawApp from "../excalidraw-app";
+import { Excalidraw } from "../packages/excalidraw/index";
 import { vi } from "vitest";
 
 const renderStaticScene = vi.spyOn(Renderer, "renderStaticScene");
@@ -35,7 +35,7 @@ describe("Test <App/>", () => {
       };
     };
 
-    await render(<ExcalidrawApp />);
+    await render(<Excalidraw />);
     expect(
       queryByTestId(
         document.querySelector(".excalidraw-modal-container")!,

src/tests/__snapshots__/App.test.tsx.snap

@@ -0,0 +1,50 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Test <App/> > should show error modal when using brave and measureText API is not working 1`] = `
+<div
+  data-testid="brave-measure-text-error"
+>
+  <p>
+    Looks like you are using Brave browser with the 
+    <span
+      style="font-weight: 600;"
+    >
+      Aggressively Block Fingerprinting
+    </span>
+     setting enabled.
+  </p>
+  <p>
+    This could result in breaking the 
+    <span
+      style="font-weight: 600;"
+    >
+      Text Elements
+    </span>
+     in your drawings.
+  </p>
+  <p>
+    We strongly recommend disabling this setting. You can follow 
+    <a
+      href="http://docs.excalidraw.com/docs/@excalidraw/excalidraw/faq#turning-off-aggresive-block-fingerprinting-in-brave-browser"
+    >
+      these steps
+    </a>
+     on how to do so.
+  </p>
+  <p>
+    If disabling this setting doesn't fix the display of text elements, please open an 
+    <a
+      href="https://github.com/excalidraw/excalidraw/issues/new"
+    >
+      issue
+    </a>
+     on our GitHub, or write us on 
+    <a
+      href="https://discord.gg/UexuTaE"
+    >
+      Discord
+      .
+    </a>
+  </p>
+</div>
+`;

src/tests/__snapshots__/regressionTests.test.tsx.snap

@@ -13089,126 +13089,6 @@ exports[`regression tests > pinch-to-zoom works > [end of test] number of elemen
 
 exports[`regression tests > pinch-to-zoom works > [end of test] number of renders 1`] = `7`;
 
-exports[`regression tests > rerenders UI on language change > [end of test] appState 1`] = `
-{
-  "activeEmbeddable": null,
-  "activeTool": {
-    "customType": null,
-    "lastActiveTool": null,
-    "locked": false,
-    "type": "rectangle",
-  },
-  "collaborators": Map {},
-  "contextMenu": null,
-  "currentChartType": "bar",
-  "currentItemBackgroundColor": "transparent",
-  "currentItemEndArrowhead": "arrow",
-  "currentItemFillStyle": "hachure",
-  "currentItemFontFamily": 1,
-  "currentItemFontSize": 20,
-  "currentItemOpacity": 100,
-  "currentItemRoughness": 1,
-  "currentItemRoundness": "round",
-  "currentItemStartArrowhead": null,
-  "currentItemStrokeColor": "#1e1e1e",
-  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 1,
-  "currentItemTextAlign": "left",
-  "cursorButton": "up",
-  "defaultSidebarDockedPreference": false,
-  "draggingElement": null,
-  "editingElement": null,
-  "editingFrame": null,
-  "editingGroupId": null,
-  "editingLinearElement": null,
-  "elementsToHighlight": null,
-  "errorMessage": null,
-  "exportBackground": true,
-  "exportEmbedScene": false,
-  "exportScale": 1,
-  "exportWithDarkMode": false,
-  "fileHandle": null,
-  "frameRendering": {
-    "clip": true,
-    "enabled": true,
-    "name": true,
-    "outline": true,
-  },
-  "frameToHighlight": null,
-  "gridSize": null,
-  "height": 768,
-  "isBindingEnabled": true,
-  "isLoading": false,
-  "isResizing": false,
-  "isRotating": false,
-  "lastPointerDownWith": "mouse",
-  "multiElement": null,
-  "name": "Untitled-201933152653",
-  "offsetLeft": 0,
-  "offsetTop": 0,
-  "openDialog": null,
-  "openMenu": "canvas",
-  "openPopup": null,
-  "openSidebar": null,
-  "pasteDialog": {
-    "data": null,
-    "shown": false,
-  },
-  "penDetected": false,
-  "penMode": false,
-  "pendingImageElementId": null,
-  "previousSelectedElementIds": {},
-  "resizingElement": null,
-  "scrollX": 0,
-  "scrollY": 0,
-  "scrolledOutside": false,
-  "selectedElementIds": {},
-  "selectedElementsAreBeingDragged": false,
-  "selectedGroupIds": {},
-  "selectedLinearElement": null,
-  "selectionElement": null,
-  "shouldCacheIgnoreZoom": false,
-  "showHyperlinkPopup": false,
-  "showStats": false,
-  "showWelcomeScreen": true,
-  "startBoundElement": null,
-  "suggestedBindings": [],
-  "theme": "light",
-  "toast": null,
-  "viewBackgroundColor": "#ffffff",
-  "viewModeEnabled": false,
-  "width": 1024,
-  "zenModeEnabled": false,
-  "zoom": {
-    "value": 1,
-  },
-}
-`;
-
-exports[`regression tests > rerenders UI on language change > [end of test] history 1`] = `
-{
-  "recording": false,
-  "redoStack": [],
-  "stateHistory": [
-    {
-      "appState": {
-        "editingGroupId": null,
-        "editingLinearElement": null,
-        "name": "Untitled-201933152653",
-        "selectedElementIds": {},
-        "selectedGroupIds": {},
-        "viewBackgroundColor": "#ffffff",
-      },
-      "elements": [],
-    },
-  ],
-}
-`;
-
-exports[`regression tests > rerenders UI on language change > [end of test] number of elements 1`] = `0`;
-
-exports[`regression tests > rerenders UI on language change > [end of test] number of renders 1`] = `5`;
-
 exports[`regression tests > shift click on selected element should deselect it on pointer up > [end of test] appState 1`] = `
 {
   "activeEmbeddable": null,

src/tests/actionStyles.test.tsx

@@ -1,4 +1,4 @@
-import ExcalidrawApp from "../excalidraw-app";
+import { Excalidraw } from "../packages/excalidraw/index";
 import { CODES } from "../keys";
 import { API } from "../tests/helpers/api";
 import { Keyboard, Pointer, UI } from "../tests/helpers/ui";
@@ -9,7 +9,7 @@ import {
   screen,
   togglePopover,
 } from "../tests/test-utils";
-import { copiedStyles } from "./actionStyles";
+import { copiedStyles } from "../actions/actionStyles";
 
 const { h } = window;
 
@@ -17,7 +17,7 @@ const mouse = new Pointer("mouse");
 
 describe("actionStyles", () => {
   beforeEach(async () => {
-    await render(<ExcalidrawApp />);
+    await render(<Excalidraw handleKeyboardGlobally={true} />);
   });
 
   afterEach(async () => {

src/tests/align.test.tsx

@@ -1,6 +1,6 @@
 import ReactDOM from "react-dom";
 import { render } from "./test-utils";
-import ExcalidrawApp from "../excalidraw-app";
+import { Excalidraw } from "../../src/packages/excalidraw/index";
 import { defaultLang, setLanguage } from "../i18n";
 import { UI, Pointer, Keyboard } from "./helpers/ui";
 import { API } from "./helpers/api";
@@ -60,7 +60,7 @@ describe("aligning", () => {
     mouse.reset();
 
     await setLanguage(defaultLang);
-    await render(<ExcalidrawApp />);
+    await render(<Excalidraw handleKeyboardGlobally={true} />);
   });
 
   it("aligns two objects correctly to the top", () => {

src/tests/appState.test.tsx

@@ -1,6 +1,6 @@
 import { queryByTestId, render, waitFor } from "./test-utils";
 
-import ExcalidrawApp from "../excalidraw-app";
+import { Excalidraw } from "../packages/excalidraw/index";
 import { API } from "./helpers/api";
 import { getDefaultAppState } from "../appState";
 import { EXPORT_DATA_TYPES, MIME_TYPES } from "../constants";
@@ -14,14 +14,17 @@ describe("appState", () => {
     const defaultAppState = getDefaultAppState();
     const exportBackground = !defaultAppState.exportBackground;
 
-    await render(<ExcalidrawApp />, {
+    await render(
-      localStorageData: {
+      <Excalidraw
-        appState: {
+        initialData={{
-          exportBackground,
+          appState: {
-          viewBackgroundColor: "#F00",
+            exportBackground,
-        },
+            viewBackgroundColor: "#F00",
-      },
+          },
-    });
+        }}
+      />,
+      {},
+    );
 
     await waitFor(() => {
       expect(h.state.exportBackground).toBe(exportBackground);
@@ -53,13 +56,15 @@ describe("appState", () => {
   });
 
   it("changing fontSize with text tool selected (no element created yet)", async () => {
-    const { container } = await render(<ExcalidrawApp />, {
+    const { container } = await render(
-      localStorageData: {
+      <Excalidraw
-        appState: {
+        initialData={{
-          currentItemFontSize: 30,
+          appState: {
-        },
+            currentItemFontSize: 30,
-      },
+          },
-    });
+        }}
+      />,
+    );
 
     UI.clickTool("text");
 

src/tests/binding.test.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render } from "./test-utils";
-import ExcalidrawApp from "../excalidraw-app";
+import { Excalidraw } from "../../src/packages/excalidraw/index";
 import { UI, Pointer, Keyboard } from "./helpers/ui";
 import { getTransformHandles } from "../element/transformHandles";
 import { API } from "./helpers/api";
@@ -12,7 +12,7 @@ const mouse = new Pointer("mouse");
 
 describe("element binding", () => {
   beforeEach(async () => {
-    await render(<ExcalidrawApp />);
+    await render(<Excalidraw handleKeyboardGlobally={true} />);
   });
 
   it("should create valid binding if duplicate start/end points", async () => {

src/tests/clipboard.test.tsx

@@ -7,7 +7,7 @@ import {
   createPasteEvent,
 } from "./test-utils";
 import { Pointer, Keyboard } from "./helpers/ui";
-import ExcalidrawApp from "../excalidraw-app";
+import { Excalidraw } from "../packages/excalidraw/index";
 import { KEYS } from "../keys";
 import {
   getDefaultLineHeight,
@@ -79,8 +79,13 @@ beforeEach(async () => {
 
   mouse.reset();
 
-  await render(<ExcalidrawApp />);
+  await render(
-  h.app.setAppState({ zoom: { value: 1 as NormalizedZoomValue } });
+    <Excalidraw
+      autoFocus={true}
+      handleKeyboardGlobally={true}
+      initialData={{ appState: { zoom: { value: 1 as NormalizedZoomValue } } }}
+    />,
+  );
   setClipboardText("");
   Object.assign(document, {
     elementFromPoint: () => GlobalTestState.canvas,
@@ -91,7 +96,6 @@ describe("general paste behavior", () => {
   it("should randomize seed on paste", async () => {
     const rectangle = API.createElement({ type: "rectangle" });
     const clipboardJSON = (await copyToClipboard([rectangle], null))!;
-
     pasteWithCtrlCmdV(clipboardJSON);
 
     await waitFor(() => {

src/tests/contextmenu.test.tsx

@@ -11,7 +11,7 @@ import {
   waitFor,
   togglePopover,
 } from "./test-utils";
-import ExcalidrawApp from "../excalidraw-app";
+import { Excalidraw } from "../packages/excalidraw/index";
 import * as Renderer from "../renderer/renderScene";
 import { reseed } from "../random";
 import { UI, Pointer, Keyboard } from "./helpers/ui";
@@ -20,7 +20,6 @@ import { ShortcutName } from "../actions/shortcuts";
 import { copiedStyles } from "../actions/actionStyles";
 import { API } from "./helpers/api";
 import { setDateTimeForTests } from "../utils";
-import { LibraryItem } from "../types";
 import { vi } from "vitest";
 
 const checkpoint = (name: string) => {
@@ -56,7 +55,7 @@ describe("contextMenu element", () => {
     reseed(7);
     setDateTimeForTests("201933152653");
 
-    await render(<ExcalidrawApp />);
+    await render(<Excalidraw handleKeyboardGlobally={true} />);
   });
 
   beforeAll(() => {
@@ -394,11 +393,9 @@ describe("contextMenu element", () => {
     const contextMenu = UI.queryContextMenu();
     fireEvent.click(queryByText(contextMenu!, "Add to library")!);
 
-    await waitFor(() => {
+    await waitFor(async () => {
-      const library = localStorage.getItem("excalidraw-library");
+      const libraryItems = await h.app.library.getLatestLibrary();
-      expect(library).not.toBeNull();
+      expect(libraryItems[0].elements[0]).toEqual(h.elements[0]);
-      const addedElement = JSON.parse(library!)[0] as LibraryItem;
-      expect(addedElement.elements[0]).toEqual(h.elements[0]);
     });
   });
 

src/tests/dragCreate.test.tsx

@@ -1,5 +1,5 @@
 import ReactDOM from "react-dom";
-import ExcalidrawApp from "../excalidraw-app";
+import { Excalidraw } from "../packages/excalidraw/index";
 import * as Renderer from "../renderer/renderScene";
 import { KEYS } from "../keys";
 import {
@@ -30,7 +30,7 @@ const { h } = window;
 describe("Test dragCreate", () => {
   describe("add element to the scene when pointer dragging long enough", () => {
     it("rectangle", async () => {
-      const { getByToolName, container } = await render(<ExcalidrawApp />);
+      const { getByToolName, container } = await render(<Excalidraw />);
       // select tool
       const tool = getByToolName("rectangle");
       fireEvent.click(tool);
@@ -62,7 +62,7 @@ describe("Test dragCreate", () => {
     });
 
     it("ellipse", async () => {
-      const { getByToolName, container } = await render(<ExcalidrawApp />);
+      const { getByToolName, container } = await render(<Excalidraw />);
       // select tool
       const tool = getByToolName("ellipse");
       fireEvent.click(tool);
@@ -95,7 +95,7 @@ describe("Test dragCreate", () => {
     });
 
     it("diamond", async () => {
-      const { getByToolName, container } = await render(<ExcalidrawApp />);
+      const { getByToolName, container } = await render(<Excalidraw />);
       // select tool
       const tool = getByToolName("diamond");
       fireEvent.click(tool);
@@ -127,7 +127,7 @@ describe("Test dragCreate", () => {
     });
 
     it("arrow", async () => {
-      const { getByToolName, container } = await render(<ExcalidrawApp />);
+      const { getByToolName, container } = await render(<Excalidraw />);
       // select tool
       const tool = getByToolName("arrow");
       fireEvent.click(tool);
@@ -163,7 +163,7 @@ describe("Test dragCreate", () => {
     });
 
     it("line", async () => {
-      const { getByToolName, container } = await render(<ExcalidrawApp />);
+      const { getByToolName, container } = await render(<Excalidraw />);
       // select tool
       const tool = getByToolName("line");
       fireEvent.click(tool);
@@ -207,7 +207,7 @@ describe("Test dragCreate", () => {
     });
 
     it("rectangle", async () => {
-      const { getByToolName, container } = await render(<ExcalidrawApp />);
+      const { getByToolName, container } = await render(<Excalidraw />);
       // select tool
       const tool = getByToolName("rectangle");
       fireEvent.click(tool);
@@ -227,7 +227,7 @@ describe("Test dragCreate", () => {
     });
 
     it("ellipse", async () => {
-      const { getByToolName, container } = await render(<ExcalidrawApp />);
+      const { getByToolName, container } = await render(<Excalidraw />);
       // select tool
       const tool = getByToolName("ellipse");
       fireEvent.click(tool);
@@ -247,7 +247,7 @@ describe("Test dragCreate", () => {
     });
 
     it("diamond", async () => {
-      const { getByToolName, container } = await render(<ExcalidrawApp />);
+      const { getByToolName, container } = await render(<Excalidraw />);
       // select tool
       const tool = getByToolName("diamond");
       fireEvent.click(tool);
@@ -267,7 +267,9 @@ describe("Test dragCreate", () => {
     });
 
     it("arrow", async () => {
-      const { getByToolName, container } = await render(<ExcalidrawApp />);
+      const { getByToolName, container } = await render(
+        <Excalidraw handleKeyboardGlobally={true} />,
+      );
       // select tool
       const tool = getByToolName("arrow");
       fireEvent.click(tool);
@@ -292,7 +294,9 @@ describe("Test dragCreate", () => {
     });
 
     it("line", async () => {
-      const { getByToolName, container } = await render(<ExcalidrawApp />);
+      const { getByToolName, container } = await render(
+        <Excalidraw handleKeyboardGlobally={true} />,
+      );
       // select tool
       const tool = getByToolName("line");
       fireEvent.click(tool);

src/tests/elementLocking.test.tsx

@@ -1,5 +1,5 @@
 import ReactDOM from "react-dom";
-import ExcalidrawApp from "../excalidraw-app";
+import { Excalidraw } from "../packages/excalidraw/index";
 import { render } from "../tests/test-utils";
 import { Keyboard, Pointer, UI } from "../tests/helpers/ui";
 import { KEYS } from "../keys";
@@ -15,7 +15,7 @@ const h = window.h;
 
 describe("element locking", () => {
   beforeEach(async () => {
-    await render(<ExcalidrawApp />);
+    await render(<Excalidraw handleKeyboardGlobally={true} />);
     h.elements = [];
   });
 

src/tests/export.test.tsx

@@ -1,5 +1,5 @@
 import { render, waitFor } from "./test-utils";
-import ExcalidrawApp from "../excalidraw-app";
+import { Excalidraw } from "../packages/excalidraw/index";
 import { API } from "./helpers/api";
 import {
   encodePngMetadata,
@@ -42,7 +42,7 @@ Object.defineProperty(window, "TextDecoder", {
 
 describe("export", () => {
   beforeEach(async () => {
-    await render(<ExcalidrawApp />);
+    await render(<Excalidraw />);
   });
 
   it("export embedded png and reimport", async () => {

src/tests/fitToContent.test.tsx

@@ -1,14 +1,14 @@
 import { render } from "./test-utils";
 import { API } from "./helpers/api";
 
-import ExcalidrawApp from "../excalidraw-app";
+import { Excalidraw } from "../packages/excalidraw/index";
 import { vi } from "vitest";
 
 const { h } = window;
 
 describe("fitToContent", () => {
   it("should zoom to fit the selected element", async () => {
-    await render(<ExcalidrawApp />);
+    await render(<Excalidraw />);
 
     h.state.width = 10;
     h.state.height = 10;
@@ -30,7 +30,7 @@ describe("fitToContent", () => {
   });
 
   it("should zoom to fit multiple elements", async () => {
-    await render(<ExcalidrawApp />);
+    await render(<Excalidraw />);
 
     const topLeft = API.createElement({
       width: 20,
@@ -61,7 +61,7 @@ describe("fitToContent", () => {
   });
 
   it("should scroll the viewport to the selected element", async () => {
-    await render(<ExcalidrawApp />);
+    await render(<Excalidraw />);
 
     h.state.width = 10;
     h.state.height = 10;
@@ -106,7 +106,7 @@ describe("fitToContent animated", () => {
   });
 
   it("should ease scroll the viewport to the selected element", async () => {
-    await render(<ExcalidrawApp />);
+    await render(<Excalidraw />);
 
     h.state.width = 10;
     h.state.height = 10;
@@ -142,7 +142,7 @@ describe("fitToContent animated", () => {
   });
 
   it("should animate the scroll but not the zoom", async () => {
-    await render(<ExcalidrawApp />);
+    await render(<Excalidraw />);
 
     h.state.width = 50;
     h.state.height = 50;

src/tests/flip.test.tsx

@@ -19,7 +19,7 @@ import {
   FileId,
 } from "../element/types";
 import { newLinearElement } from "../element";
-import ExcalidrawApp from "../excalidraw-app";
+import { Excalidraw } from "../packages/excalidraw/index";
 import { mutateElement } from "../element/mutateElement";
 import { NormalizedZoomValue } from "../types";
 import { ROUNDNESS } from "../constants";
@@ -52,7 +52,7 @@ beforeEach(async () => {
   Object.assign(document, {
     elementFromPoint: () => GlobalTestState.canvas,
   });
-  await render(<ExcalidrawApp />);
+  await render(<Excalidraw autoFocus={true} handleKeyboardGlobally={true} />);
   h.setState({
     zoom: {
       value: 1 as NormalizedZoomValue,

src/tests/history.test.tsx

@@ -1,5 +1,5 @@
 import { assertSelectedElements, render } from "./test-utils";
-import ExcalidrawApp from "../excalidraw-app";
+import { Excalidraw } from "../packages/excalidraw/index";
 import { Keyboard, Pointer, UI } from "./helpers/ui";
 import { API } from "./helpers/api";
 import { getDefaultAppState } from "../appState";
@@ -13,14 +13,16 @@ const mouse = new Pointer("mouse");
 
 describe("history", () => {
   it("initializing scene should end up with single history entry", async () => {
-    await render(<ExcalidrawApp />, {
+    await render(
-      localStorageData: {
+      <Excalidraw
-        elements: [API.createElement({ type: "rectangle", id: "A" })],
+        initialData={{
-        appState: {
+          elements: [API.createElement({ type: "rectangle", id: "A" })],
-          zenModeEnabled: true,
+          appState: {
-        },
+            zenModeEnabled: true,
-      },
+          },
-    });
+        }}
+      />,
+    );
 
     await waitFor(() => expect(h.state.zenModeEnabled).toBe(true));
     await waitFor(() =>
@@ -60,14 +62,16 @@ describe("history", () => {
   });
 
   it("scene import via drag&drop should create new history entry", async () => {
-    await render(<ExcalidrawApp />, {
+    await render(
-      localStorageData: {
+      <Excalidraw
-        elements: [API.createElement({ type: "rectangle", id: "A" })],
+        initialData={{
-        appState: {
+          elements: [API.createElement({ type: "rectangle", id: "A" })],
-          viewBackgroundColor: "#FFF",
+          appState: {
-        },
+            viewBackgroundColor: "#FFF",
-      },
+          },
-    });
+        }}
+      />,
+    );
 
     await waitFor(() => expect(h.state.viewBackgroundColor).toBe("#FFF"));
     await waitFor(() =>
@@ -113,7 +117,7 @@ describe("history", () => {
   });
 
   it("undo/redo works properly with groups", async () => {
-    await render(<ExcalidrawApp />);
+    await render(<Excalidraw handleKeyboardGlobally={true} />);
     const rect1 = API.createElement({ type: "rectangle", groupIds: ["A"] });
     const rect2 = API.createElement({ type: "rectangle", groupIds: ["A"] });
 

src/tests/library.test.tsx

@@ -2,7 +2,7 @@ import { vi } from "vitest";
 import { fireEvent, render, waitFor } from "./test-utils";
 import { queryByTestId } from "@testing-library/react";
 
-import ExcalidrawApp from "../excalidraw-app";
+import { Excalidraw } from "../packages/excalidraw/index";
 import { API } from "./helpers/api";
 import { MIME_TYPES } from "../constants";
 import { LibraryItem, LibraryItems } from "../types";
@@ -42,7 +42,7 @@ vi.mock("../data/filesystem.ts", async (importOriginal) => {
 
 describe("library", () => {
   beforeEach(async () => {
-    await render(<ExcalidrawApp />);
+    await render(<Excalidraw />);
     h.app.library.resetLibrary();
   });
 
@@ -189,7 +189,7 @@ describe("library", () => {
 
 describe("library menu", () => {
   it("should load library from file picker", async () => {
-    const { container } = await render(<ExcalidrawApp />);
+    const { container } = await render(<Excalidraw />);
 
     const latestLibrary = await h.app.library.getLatestLibrary();
     expect(latestLibrary.length).toBe(0);

src/tests/linearElementEditor.test.tsx

@@ -5,7 +5,7 @@ import {
   ExcalidrawTextElementWithContainer,
   FontString,
 } from "../element/types";
-import ExcalidrawApp from "../excalidraw-app";
+import { Excalidraw } from "../packages/excalidraw/index";
 import { centerPoint } from "../math";
 import { reseed } from "../random";
 import * as Renderer from "../renderer/renderScene";
@@ -43,7 +43,7 @@ describe("Test Linear Elements", () => {
     renderInteractiveScene.mockClear();
     renderStaticScene.mockClear();
     reseed(7);
-    const comp = await render(<ExcalidrawApp />);
+    const comp = await render(<Excalidraw handleKeyboardGlobally={true} />);
     h.state.width = 1000;
     h.state.height = 1000;
     container = comp.container;

src/tests/move.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import { render, fireEvent } from "./test-utils";
-import ExcalidrawApp from "../excalidraw-app";
+import { Excalidraw } from "../packages/excalidraw/index";
 import * as Renderer from "../renderer/renderScene";
 import { reseed } from "../random";
 import { bindOrUnbindLinearElement } from "../element/binding";
@@ -31,7 +31,7 @@ const { h } = window;
 
 describe("move element", () => {
   it("rectangle", async () => {
-    const { getByToolName, container } = await render(<ExcalidrawApp />);
+    const { getByToolName, container } = await render(<Excalidraw />);
     const canvas = container.querySelector("canvas.interactive")!;
 
     {
@@ -67,7 +67,7 @@ describe("move element", () => {
   });
 
   it("rectangles with binding arrow", async () => {
-    await render(<ExcalidrawApp />);
+    await render(<Excalidraw handleKeyboardGlobally={true} />);
 
     // create elements
     const rectA = UI.createElement("rectangle", { size: 100 });
@@ -119,7 +119,7 @@ describe("move element", () => {
 
 describe("duplicate element on move when ALT is clicked", () => {
   it("rectangle", async () => {
-    const { getByToolName, container } = await render(<ExcalidrawApp />);
+    const { getByToolName, container } = await render(<Excalidraw />);
     const canvas = container.querySelector("canvas.interactive")!;
 
     {

src/tests/multiPointCreate.test.tsx

@@ -5,7 +5,7 @@ import {
   mockBoundingClientRect,
   restoreOriginalGetBoundingClientRect,
 } from "./test-utils";
-import ExcalidrawApp from "../excalidraw-app";
+import { Excalidraw } from "../packages/excalidraw/index";
 import * as Renderer from "../renderer/renderScene";
 import { KEYS } from "../keys";
 import { ExcalidrawLinearElement } from "../element/types";
@@ -29,7 +29,7 @@ const { h } = window;
 
 describe("remove shape in non linear elements", () => {
   beforeAll(() => {
-    mockBoundingClientRect();
+    mockBoundingClientRect({ width: 1000, height: 1000 });
   });
 
   afterAll(() => {
@@ -37,12 +37,13 @@ describe("remove shape in non linear elements", () => {
   });
 
   it("rectangle", async () => {
-    const { getByToolName, container } = await render(<ExcalidrawApp />);
+    const { getByToolName, container } = await render(<Excalidraw />);
     // select tool
     const tool = getByToolName("rectangle");
     fireEvent.click(tool);
 
     const canvas = container.querySelector("canvas.interactive")!;
+
     fireEvent.pointerDown(canvas, { clientX: 30, clientY: 20 });
     fireEvent.pointerUp(canvas, { clientX: 30, clientY: 30 });
 
@@ -52,7 +53,7 @@ describe("remove shape in non linear elements", () => {
   });
 
   it("ellipse", async () => {
-    const { getByToolName, container } = await render(<ExcalidrawApp />);
+    const { getByToolName, container } = await render(<Excalidraw />);
     // select tool
     const tool = getByToolName("ellipse");
     fireEvent.click(tool);
@@ -67,7 +68,7 @@ describe("remove shape in non linear elements", () => {
   });
 
   it("diamond", async () => {
-    const { getByToolName, container } = await render(<ExcalidrawApp />);
+    const { getByToolName, container } = await render(<Excalidraw />);
     // select tool
     const tool = getByToolName("diamond");
     fireEvent.click(tool);
@@ -84,7 +85,7 @@ describe("remove shape in non linear elements", () => {
 
 describe("multi point mode in linear elements", () => {
   it("arrow", async () => {
-    const { getByToolName, container } = await render(<ExcalidrawApp />);
+    const { getByToolName, container } = await render(<Excalidraw />);
     // select tool
     const tool = getByToolName("arrow");
     fireEvent.click(tool);
@@ -109,8 +110,8 @@ describe("multi point mode in linear elements", () => {
       key: KEYS.ENTER,
     });
 
-    expect(renderInteractiveScene).toHaveBeenCalledTimes(10);
+    expect(renderInteractiveScene).toHaveBeenCalledTimes(9);
-    expect(renderStaticScene).toHaveBeenCalledTimes(11);
+    expect(renderStaticScene).toHaveBeenCalledTimes(10);
     expect(h.elements.length).toEqual(1);
 
     const element = h.elements[0] as ExcalidrawLinearElement;
@@ -128,7 +129,7 @@ describe("multi point mode in linear elements", () => {
   });
 
   it("line", async () => {
-    const { getByToolName, container } = await render(<ExcalidrawApp />);
+    const { getByToolName, container } = await render(<Excalidraw />);
     // select tool
     const tool = getByToolName("line");
     fireEvent.click(tool);
@@ -153,8 +154,8 @@ describe("multi point mode in linear elements", () => {
       key: KEYS.ENTER,
     });
 
-    expect(renderInteractiveScene).toHaveBeenCalledTimes(10);
+    expect(renderInteractiveScene).toHaveBeenCalledTimes(9);
-    expect(renderStaticScene).toHaveBeenCalledTimes(11);
+    expect(renderStaticScene).toHaveBeenCalledTimes(10);
     expect(h.elements.length).toEqual(1);
 
     const element = h.elements[0] as ExcalidrawLinearElement;

src/tests/regressionTests.test.tsx

@@ -1,7 +1,7 @@
 import ReactDOM from "react-dom";
 import { ExcalidrawElement } from "../element/types";
 import { CODES, KEYS } from "../keys";
-import ExcalidrawApp from "../excalidraw-app";
+import { Excalidraw } from "../packages/excalidraw/index";
 import { reseed } from "../random";
 import * as Renderer from "../renderer/renderScene";
 import { setDateTimeForTests } from "../utils";
@@ -13,9 +13,7 @@ import {
   render,
   screen,
   togglePopover,
-  waitFor,
 } from "./test-utils";
-import { defaultLang } from "../i18n";
 import { FONT_FAMILY } from "../constants";
 import { vi } from "vitest";
 
@@ -56,7 +54,7 @@ beforeEach(async () => {
   finger1.reset();
   finger2.reset();
 
-  await render(<ExcalidrawApp />);
+  await render(<Excalidraw handleKeyboardGlobally={true} />);
   h.setState({ height: 768, width: 1024 });
 });
 
@@ -443,26 +441,6 @@ describe("regression tests", () => {
     expect(h.state.zoom.value).toBe(1);
   });
 
-  it("rerenders UI on language change", async () => {
-    // select rectangle tool to show properties menu
-    UI.clickTool("rectangle");
-    // english lang should display `thin` label
-    expect(screen.queryByTitle(/thin/i)).not.toBeNull();
-    fireEvent.click(document.querySelector(".dropdown-menu-button")!);
-
-    fireEvent.change(document.querySelector(".dropdown-select__language")!, {
-      target: { value: "de-DE" },
-    });
-    // switching to german, `thin` label should no longer exist
-    await waitFor(() => expect(screen.queryByTitle(/thin/i)).toBeNull());
-    // reset language
-    fireEvent.change(document.querySelector(".dropdown-select__language")!, {
-      target: { value: defaultLang.code },
-    });
-    // switching back to English
-    await waitFor(() => expect(screen.queryByTitle(/thin/i)).not.toBeNull());
-  });
-
   it("make a group and duplicate it", () => {
     UI.clickTool("rectangle");
     mouse.down(10, 10);

src/tests/resize.test.tsx

@@ -6,7 +6,7 @@ import { reseed } from "../random";
 import { UI, Keyboard } from "./helpers/ui";
 import { resize } from "./utils";
 import { ExcalidrawTextElement } from "../element/types";
-import ExcalidrawApp from "../excalidraw-app";
+import { Excalidraw } from "../packages/excalidraw/index";
 import { API } from "./helpers/api";
 import { KEYS } from "../keys";
 import { vi } from "vitest";
@@ -126,7 +126,7 @@ describe("resize rectangle ellipses and diamond elements", () => {
 
 describe("Test text element", () => {
   it("should update font size via keyboard", async () => {
-    await render(<ExcalidrawApp />);
+    await render(<Excalidraw handleKeyboardGlobally={true} />);
 
     const textElement = API.createElement({
       type: "text",

src/tests/scroll.test.tsx

@@ -8,7 +8,6 @@ import { Excalidraw } from "../packages/excalidraw/index";
 import { API } from "./helpers/api";
 import { Keyboard } from "./helpers/ui";
 import { KEYS } from "../keys";
-import ExcalidrawApp from "../excalidraw-app";
 
 const { h } = window;
 
@@ -56,7 +55,7 @@ describe("appState", () => {
 
   it("moving by page up/down/left/right", async () => {
     mockBoundingClientRect();
-    await render(<ExcalidrawApp />, {});
+    await render(<Excalidraw handleKeyboardGlobally={true} />, {});
 
     const scrollTest = () => {
       const initialScrollY = h.state.scrollY;

src/tests/selection.test.tsx

@@ -6,7 +6,7 @@ import {
   restoreOriginalGetBoundingClientRect,
   assertSelectedElements,
 } from "./test-utils";
-import ExcalidrawApp from "../excalidraw-app";
+import { Excalidraw } from "../packages/excalidraw/index";
 import * as Renderer from "../renderer/renderScene";
 import { KEYS } from "../keys";
 import { reseed } from "../random";
@@ -34,7 +34,7 @@ const mouse = new Pointer("mouse");
 
 describe("box-selection", () => {
   beforeEach(async () => {
-    await render(<ExcalidrawApp />);
+    await render(<Excalidraw />);
   });
 
   it("should allow adding to selection via box-select when holding shift", async () => {
@@ -102,7 +102,7 @@ describe("box-selection", () => {
 
 describe("inner box-selection", () => {
   beforeEach(async () => {
-    await render(<ExcalidrawApp />);
+    await render(<Excalidraw />);
   });
   it("selecting elements visually nested inside another", async () => {
     const rect1 = API.createElement({
@@ -218,7 +218,7 @@ describe("inner box-selection", () => {
 
 describe("selection element", () => {
   it("create selection element on pointer down", async () => {
-    const { getByToolName, container } = await render(<ExcalidrawApp />);
+    const { getByToolName, container } = await render(<Excalidraw />);
     // select tool
     const tool = getByToolName("selection");
     fireEvent.click(tool);
@@ -239,7 +239,7 @@ describe("selection element", () => {
   });
 
   it("resize selection element on pointer move", async () => {
-    const { getByToolName, container } = await render(<ExcalidrawApp />);
+    const { getByToolName, container } = await render(<Excalidraw />);
     // select tool
     const tool = getByToolName("selection");
     fireEvent.click(tool);
@@ -261,7 +261,7 @@ describe("selection element", () => {
   });
 
   it("remove selection element on pointer up", async () => {
-    const { getByToolName, container } = await render(<ExcalidrawApp />);
+    const { getByToolName, container } = await render(<Excalidraw />);
     // select tool
     const tool = getByToolName("selection");
     fireEvent.click(tool);
@@ -287,7 +287,9 @@ describe("select single element on the scene", () => {
   });
 
   it("rectangle", async () => {
-    const { getByToolName, container } = await render(<ExcalidrawApp />);
+    const { getByToolName, container } = await render(
+      <Excalidraw handleKeyboardGlobally={true} />,
+    );
     const canvas = container.querySelector("canvas.interactive")!;
     {
       // create element
@@ -317,7 +319,9 @@ describe("select single element on the scene", () => {
   });
 
   it("diamond", async () => {
-    const { getByToolName, container } = await render(<ExcalidrawApp />);
+    const { getByToolName, container } = await render(
+      <Excalidraw handleKeyboardGlobally={true} />,
+    );
     const canvas = container.querySelector("canvas.interactive")!;
     {
       // create element
@@ -347,7 +351,9 @@ describe("select single element on the scene", () => {
   });
 
   it("ellipse", async () => {
-    const { getByToolName, container } = await render(<ExcalidrawApp />);
+    const { getByToolName, container } = await render(
+      <Excalidraw handleKeyboardGlobally={true} />,
+    );
     const canvas = container.querySelector("canvas.interactive")!;
     {
       // create element
@@ -377,7 +383,9 @@ describe("select single element on the scene", () => {
   });
 
   it("arrow", async () => {
-    const { getByToolName, container } = await render(<ExcalidrawApp />);
+    const { getByToolName, container } = await render(
+      <Excalidraw handleKeyboardGlobally={true} />,
+    );
     const canvas = container.querySelector("canvas.interactive")!;
     {
       // create element
@@ -419,7 +427,9 @@ describe("select single element on the scene", () => {
   });
 
   it("arrow escape", async () => {
-    const { getByToolName, container } = await render(<ExcalidrawApp />);
+    const { getByToolName, container } = await render(
+      <Excalidraw handleKeyboardGlobally={true} />,
+    );
     const canvas = container.querySelector("canvas.interactive")!;
     {
       // create element
@@ -464,7 +474,7 @@ describe("select single element on the scene", () => {
 
 describe("tool locking & selection", () => {
   it("should not select newly created element while tool is locked", async () => {
-    await render(<ExcalidrawApp />);
+    await render(<Excalidraw />);
 
     UI.clickTool("lock");
     expect(h.state.activeTool.locked).toBe(true);
@@ -480,7 +490,7 @@ describe("tool locking & selection", () => {
 
 describe("selectedElementIds stability", () => {
   beforeEach(async () => {
-    await render(<ExcalidrawApp />);
+    await render(<Excalidraw />);
   });
 
   it("box-selection should be stable when not changing selection", () => {

src/tests/test-utils.ts

@@ -11,7 +11,7 @@ import {
 
 import * as toolQueries from "./queries/toolQueries";
 import { ImportedDataState } from "../data/types";
-import { STORAGE_KEYS } from "../excalidraw-app/app_constants";
+import { STORAGE_KEYS } from "../../excalidraw-app/app_constants";
 
 import { SceneData } from "../types";
 import { getSelectedElements } from "../scene/selection";

src/tests/viewMode.test.tsx

@@ -1,5 +1,5 @@
 import { render, GlobalTestState } from "./test-utils";
-import ExcalidrawApp from "../excalidraw-app";
+import { Excalidraw } from "../packages/excalidraw/index";
 import { KEYS } from "../keys";
 import { Keyboard, Pointer, UI } from "./helpers/ui";
 import { CURSOR_TYPE } from "../constants";
@@ -12,7 +12,7 @@ const pointerTypes = [mouse, touch, pen];
 
 describe("view mode", () => {
   beforeEach(async () => {
-    await render(<ExcalidrawApp />);
+    await render(<Excalidraw />);
   });
 
   it("after switching to view mode – cursor type should be pointer", async () => {

src/tests/zindex.test.tsx

@@ -1,6 +1,6 @@
 import ReactDOM from "react-dom";
 import { render } from "./test-utils";
-import ExcalidrawApp from "../excalidraw-app";
+import { Excalidraw } from "../packages/excalidraw/index";
 import { reseed } from "../random";
 import {
   actionSendBackward,
@@ -121,7 +121,6 @@ const assertZindex = ({
   operations: [Actions, string[]][];
 }) => {
   const selectedElementIds = populateElements(elements, appState);
-
   operations.forEach(([action, expected]) => {
     h.app.actionManager.executeAction(action);
     expect(h.elements.map((element) => element.id)).toEqual(expected);
@@ -131,7 +130,7 @@ const assertZindex = ({
 
 describe("z-index manipulation", () => {
   beforeEach(async () => {
-    await render(<ExcalidrawApp />);
+    await render(<Excalidraw />);
   });
 
   it("send back", () => {

src/zindex.ts

@@ -96,9 +96,9 @@ const getTargetIndexAccountingForBinding = (
       if (direction === "left") {
         return elements.indexOf(nextElement);
       }
+
       const boundTextElement =
         Scene.getScene(nextElement)!.getElement(boundElementId);
-
       if (boundTextElement) {
         return elements.indexOf(boundTextElement);
       }

tsconfig.json

@@ -16,6 +16,6 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": ["src"],
+  "include": ["src", "excalidraw-app"],
   "exclude": ["src/packages/excalidraw/types"]
 }