diff --git a/.eslintrc.json b/.eslintrc.json
index 095543a85..8263b08a9 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,6 +1,21 @@
 {
   "extends": ["@excalidraw/eslint-config", "react-app"],
   "rules": {
+    "import/order": [
+      "warn",
+      {
+        "groups": ["builtin", "external", "internal", "parent", "sibling", "index", "object", "type"],
+        "pathGroups": [
+          {
+            "pattern": "@excalidraw/**",
+            "group": "external",
+            "position": "after"
+          }
+        ],
+        "newlines-between": "always-and-inside-groups",
+        "warnOnUnassignedImports": true
+      }
+    ],
     "import/no-anonymous-default-export": "off",
     "no-restricted-globals": "off",
     "@typescript-eslint/consistent-type-imports": [
diff --git a/dev-docs/docs/@excalidraw/excalidraw/api/props/props.mdx b/dev-docs/docs/@excalidraw/excalidraw/api/props/props.mdx
index e25aedcf4..5c2a5501b 100644
--- a/dev-docs/docs/@excalidraw/excalidraw/api/props/props.mdx
+++ b/dev-docs/docs/@excalidraw/excalidraw/api/props/props.mdx
@@ -3,7 +3,7 @@
 All `props` are _optional_.
 
 | Name | Type | Default | Description |
-| --- | --- | --- | --- | --- | --- | --- | --- | --- |
+| --- | --- | --- | --- |
 | [`initialData`](/docs/@excalidraw/excalidraw/api/props/initialdata) | `object` &#124; `null` &#124; <code>Promise<object &#124; null></code> | `null` | The initial data with which app loads. |
 | [`excalidrawAPI`](/docs/@excalidraw/excalidraw/api/props/excalidraw-api) | `function` | \_ | Callback triggered with the excalidraw api once rendered |
 | [`isCollaborating`](#iscollaborating) | `boolean` | \_ | This indicates if the app is in `collaboration` mode |
@@ -13,7 +13,7 @@ All `props` are _optional_.
 | [`onScrollChange`](#onscrollchange) | `function` | \_ | This prop if passed gets triggered when scrolling the canvas. |
 | [`onPaste`](#onpaste) | `function` | \_ | Callback to be triggered if passed when something is pasted into the scene |
 | [`onLibraryChange`](#onlibrarychange) | `function` | \_ | The callback if supplied is triggered when the library is updated and receives the library items. |
-| [`generateLinkForSelection`](#generateLinkForSelection) | `function` | \_ | Allows you to override `url` generation when linking to Excalidraw elements. |
+| [`generateLinkForSelection`](#generatelinkforselection) | `function` | \_ | Allows you to override `url` generation when linking to Excalidraw elements. |
 | [`onLinkOpen`](#onlinkopen) | `function` | \_ | The callback if supplied is triggered when any link is opened. |
 | [`langCode`](#langcode) | `string` | `en` | Language code string to be used in Excalidraw |
 | [`renderTopRightUI`](/docs/@excalidraw/excalidraw/api/props/render-props#rendertoprightui) | `function` | \_ | Render function that renders custom UI in top right corner |
@@ -29,7 +29,7 @@ All `props` are _optional_.
 | [`handleKeyboardGlobally`](#handlekeyboardglobally) | `boolean` | `false` | Indicates whether to bind the keyboard events to document. |
 | [`autoFocus`](#autofocus) | `boolean` | `false` | Indicates whether to focus the Excalidraw component on page load |
 | [`generateIdForFile`](#generateidforfile) | `function` | \_ | Allows you to override `id` generation for files added on canvas |
-| [`validateEmbeddable`](#validateEmbeddable) | string[] | `boolean | RegExp | RegExp[] | ((link: string) => boolean | undefined)` | \_ | use for custom src url validation |
+| [`validateEmbeddable`](#validateembeddable) | `string[]` \| `boolean` \| `RegExp` \| `RegExp[]` \| <code>((link: string) => boolean &#124; undefined)</code> | \_ | use for custom src url validation |
 | [`renderEmbeddable`](/docs/@excalidraw/excalidraw/api/props/render-props#renderEmbeddable) | `function` | \_ | Render function that can override the built-in `<iframe>` |
 
 ### Storing custom data on Excalidraw elements
diff --git a/dev-docs/src/components/Homepage/index.js b/dev-docs/src/components/Homepage/index.js
index e350e03a2..3c1c25f4f 100644
--- a/dev-docs/src/components/Homepage/index.js
+++ b/dev-docs/src/components/Homepage/index.js
@@ -1,5 +1,6 @@
-import React from "react";
 import clsx from "clsx";
+import React from "react";
+
 import styles from "./styles.module.css";
 
 const FeatureList = [
diff --git a/dev-docs/src/components/Homepage/index.tsx b/dev-docs/src/components/Homepage/index.tsx
index ee86e9195..613eaa556 100644
--- a/dev-docs/src/components/Homepage/index.tsx
+++ b/dev-docs/src/components/Homepage/index.tsx
@@ -1,5 +1,6 @@
-import React from "react";
 import clsx from "clsx";
+import React from "react";
+
 import styles from "./styles.module.css";
 
 type FeatureItem = {
diff --git a/dev-docs/src/pages/index.tsx b/dev-docs/src/pages/index.tsx
index f35c2e4a7..39b66bb79 100644
--- a/dev-docs/src/pages/index.tsx
+++ b/dev-docs/src/pages/index.tsx
@@ -1,10 +1,11 @@
-import React from "react";
-import clsx from "clsx";
-import Layout from "@theme/Layout";
 import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import styles from "./index.module.css";
 import HomepageFeatures from "@site/src/components/Homepage";
+import Layout from "@theme/Layout";
+import clsx from "clsx";
+import React from "react";
+
+import styles from "./index.module.css";
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
diff --git a/dev-docs/src/theme/MDXComponents.js b/dev-docs/src/theme/MDXComponents.js
index 35234301f..97ff4d054 100644
--- a/dev-docs/src/theme/MDXComponents.js
+++ b/dev-docs/src/theme/MDXComponents.js
@@ -1,6 +1,6 @@
 // Import the original mapper
-import MDXComponents from "@theme-original/MDXComponents";
 import Highlight from "@site/src/components/Highlight";
+import MDXComponents from "@theme-original/MDXComponents";
 
 export default {
   // Re-use the default mapping
diff --git a/examples/with-nextjs/src/app/page.tsx b/examples/with-nextjs/src/app/page.tsx
index 191aca120..e23255237 100644
--- a/examples/with-nextjs/src/app/page.tsx
+++ b/examples/with-nextjs/src/app/page.tsx
@@ -1,5 +1,6 @@
 import dynamic from "next/dynamic";
 import Script from "next/script";
+
 import "../common.scss";
 
 // Since client components get prerenderd on server as well hence importing the excalidraw stuff dynamically
diff --git a/examples/with-nextjs/src/excalidrawWrapper.tsx b/examples/with-nextjs/src/excalidrawWrapper.tsx
index b4c45fa7d..fab4df651 100644
--- a/examples/with-nextjs/src/excalidrawWrapper.tsx
+++ b/examples/with-nextjs/src/excalidrawWrapper.tsx
@@ -1,10 +1,11 @@
 "use client";
 import * as excalidrawLib from "@excalidraw/excalidraw";
 import { Excalidraw } from "@excalidraw/excalidraw";
-import App from "../../with-script-in-browser/components/ExampleApp";
 
 import "@excalidraw/excalidraw/index.css";
 
+import App from "../../with-script-in-browser/components/ExampleApp";
+
 const ExcalidrawWrapper: React.FC = () => {
   return (
     <>
diff --git a/examples/with-nextjs/src/pages/excalidraw-in-pages.tsx b/examples/with-nextjs/src/pages/excalidraw-in-pages.tsx
index 527a346b9..116bb96ce 100644
--- a/examples/with-nextjs/src/pages/excalidraw-in-pages.tsx
+++ b/examples/with-nextjs/src/pages/excalidraw-in-pages.tsx
@@ -1,4 +1,5 @@
 import dynamic from "next/dynamic";
+
 import "../common.scss";
 
 // Since client components get prerenderd on server as well hence importing the excalidraw stuff dynamically
diff --git a/examples/with-script-in-browser/components/CustomFooter.tsx b/examples/with-script-in-browser/components/CustomFooter.tsx
index 72fd199f6..a9c902ade 100644
--- a/examples/with-script-in-browser/components/CustomFooter.tsx
+++ b/examples/with-script-in-browser/components/CustomFooter.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+
 import type * as TExcalidraw from "@excalidraw/excalidraw";
 import type { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/types";
 
diff --git a/examples/with-script-in-browser/components/ExampleApp.tsx b/examples/with-script-in-browser/components/ExampleApp.tsx
index 08c8032d5..976004f04 100644
--- a/examples/with-script-in-browser/components/ExampleApp.tsx
+++ b/examples/with-script-in-browser/components/ExampleApp.tsx
@@ -1,3 +1,4 @@
+import { nanoid } from "nanoid";
 import React, {
   useEffect,
   useState,
@@ -6,13 +7,24 @@ import React, {
   Children,
   cloneElement,
 } from "react";
-import ExampleSidebar from "./sidebar/ExampleSidebar";
 
 import type * as TExcalidraw from "@excalidraw/excalidraw";
+import type { ImportedLibraryData } from "@excalidraw/excalidraw/data/types";
+import type {
+  NonDeletedExcalidrawElement,
+  Theme,
+} from "@excalidraw/excalidraw/element/types";
+import type {
+  AppState,
+  BinaryFileData,
+  ExcalidrawImperativeAPI,
+  ExcalidrawInitialDataState,
+  Gesture,
+  LibraryItems,
+  PointerDownState as ExcalidrawPointerDownState,
+} from "@excalidraw/excalidraw/types";
 
-import { nanoid } from "nanoid";
-
-import type { ResolvablePromise } from "../utils";
+import initialData from "../initialData";
 import {
   resolvablePromise,
   distance2d,
@@ -23,25 +35,12 @@ import {
 
 import CustomFooter from "./CustomFooter";
 import MobileFooter from "./MobileFooter";
-import initialData from "../initialData";
-
-import type {
-  AppState,
-  BinaryFileData,
-  ExcalidrawImperativeAPI,
-  ExcalidrawInitialDataState,
-  Gesture,
-  LibraryItems,
-  PointerDownState as ExcalidrawPointerDownState,
-} from "@excalidraw/excalidraw/types";
-import type {
-  NonDeletedExcalidrawElement,
-  Theme,
-} from "@excalidraw/excalidraw/element/types";
-import type { ImportedLibraryData } from "@excalidraw/excalidraw/data/types";
+import ExampleSidebar from "./sidebar/ExampleSidebar";
 
 import "./ExampleApp.scss";
 
+import type { ResolvablePromise } from "../utils";
+
 type Comment = {
   x: number;
   y: number;
diff --git a/examples/with-script-in-browser/components/MobileFooter.tsx b/examples/with-script-in-browser/components/MobileFooter.tsx
index c8fc0f113..a6e1fa1b2 100644
--- a/examples/with-script-in-browser/components/MobileFooter.tsx
+++ b/examples/with-script-in-browser/components/MobileFooter.tsx
@@ -1,7 +1,9 @@
 import React from "react";
-import type { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/types";
-import CustomFooter from "./CustomFooter";
+
 import type * as TExcalidraw from "@excalidraw/excalidraw";
+import type { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/types";
+
+import CustomFooter from "./CustomFooter";
 
 const MobileFooter = ({
   excalidrawAPI,
diff --git a/examples/with-script-in-browser/components/sidebar/ExampleSidebar.tsx b/examples/with-script-in-browser/components/sidebar/ExampleSidebar.tsx
index 193913410..88950b34b 100644
--- a/examples/with-script-in-browser/components/sidebar/ExampleSidebar.tsx
+++ b/examples/with-script-in-browser/components/sidebar/ExampleSidebar.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+
 import "./ExampleSidebar.scss";
 
 export default function Sidebar({ children }: { children: React.ReactNode }) {
diff --git a/examples/with-script-in-browser/index.tsx b/examples/with-script-in-browser/index.tsx
index 25ad96e37..8f92e7cc5 100644
--- a/examples/with-script-in-browser/index.tsx
+++ b/examples/with-script-in-browser/index.tsx
@@ -1,10 +1,11 @@
-import App from "./components/ExampleApp";
 import React, { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 
+import "@excalidraw/excalidraw/index.css";
+
 import type * as TExcalidraw from "@excalidraw/excalidraw";
 
-import "@excalidraw/excalidraw/index.css";
+import App from "./components/ExampleApp";
 
 declare global {
   interface Window {
diff --git a/examples/with-script-in-browser/utils.ts b/examples/with-script-in-browser/utils.ts
index a77b93fb0..285e9652d 100644
--- a/examples/with-script-in-browser/utils.ts
+++ b/examples/with-script-in-browser/utils.ts
@@ -1,6 +1,6 @@
-import { unstable_batchedUpdates } from "react-dom";
-import { fileOpen as _fileOpen } from "browser-fs-access";
 import { MIME_TYPES } from "@excalidraw/excalidraw";
+import { fileOpen as _fileOpen } from "browser-fs-access";
+import { unstable_batchedUpdates } from "react-dom";
 
 type FILE_EXTENSION = Exclude<keyof typeof MIME_TYPES, "binary">;
 
diff --git a/excalidraw-app/App.tsx b/excalidraw-app/App.tsx
index 2cb6e7715..60e9b3008 100644
--- a/excalidraw-app/App.tsx
+++ b/excalidraw-app/App.tsx
@@ -1,24 +1,3 @@
-import polyfill from "@excalidraw/excalidraw/polyfill";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { trackEvent } from "@excalidraw/excalidraw/analytics";
-import { getDefaultAppState } from "@excalidraw/excalidraw/appState";
-import { ErrorDialog } from "@excalidraw/excalidraw/components/ErrorDialog";
-import { TopErrorBoundary } from "./components/TopErrorBoundary";
-import {
-  APP_NAME,
-  EVENT,
-  THEME,
-  TITLE_TIMEOUT,
-  VERSION_TIMEOUT,
-} from "@excalidraw/excalidraw/constants";
-import { loadFromBlob } from "@excalidraw/excalidraw/data/blob";
-import type {
-  FileId,
-  NonDeletedExcalidrawElement,
-  OrderedExcalidrawElement,
-} from "@excalidraw/excalidraw/element/types";
-import { useCallbackRefState } from "@excalidraw/excalidraw/hooks/useCallbackRefState";
-import { t } from "@excalidraw/excalidraw/i18n";
 import {
   Excalidraw,
   LiveCollaborationTrigger,
@@ -26,15 +5,23 @@ import {
   CaptureUpdateAction,
   reconcileElements,
 } from "@excalidraw/excalidraw";
-import type {
-  AppState,
-  ExcalidrawImperativeAPI,
-  BinaryFiles,
-  ExcalidrawInitialDataState,
-  UIAppState,
-} from "@excalidraw/excalidraw/types";
-import type { ResolvablePromise } from "@excalidraw/excalidraw/utils";
+import { trackEvent } from "@excalidraw/excalidraw/analytics";
+import { getDefaultAppState } from "@excalidraw/excalidraw/appState";
 import {
+  CommandPalette,
+  DEFAULT_CATEGORIES,
+} from "@excalidraw/excalidraw/components/CommandPalette/CommandPalette";
+import { ErrorDialog } from "@excalidraw/excalidraw/components/ErrorDialog";
+import { OverwriteConfirmDialog } from "@excalidraw/excalidraw/components/OverwriteConfirm/OverwriteConfirm";
+import { openConfirmModal } from "@excalidraw/excalidraw/components/OverwriteConfirm/OverwriteConfirmState";
+import { ShareableLinkDialog } from "@excalidraw/excalidraw/components/ShareableLinkDialog";
+import Trans from "@excalidraw/excalidraw/components/Trans";
+import {
+  APP_NAME,
+  EVENT,
+  THEME,
+  TITLE_TIMEOUT,
+  VERSION_TIMEOUT,
   debounce,
   getVersion,
   getFrame,
@@ -42,75 +29,14 @@ import {
   preventUnload,
   resolvablePromise,
   isRunningInIframe,
-} from "@excalidraw/excalidraw/utils";
-import {
-  FIREBASE_STORAGE_PREFIXES,
-  isExcalidrawPlusSignedUser,
-  STORAGE_KEYS,
-  SYNC_BROWSER_TABS_TIMEOUT,
-} from "./app_constants";
-import type { CollabAPI } from "./collab/Collab";
-import Collab, {
-  collabAPIAtom,
-  isCollaboratingAtom,
-  isOfflineAtom,
-} from "./collab/Collab";
-import {
-  exportToBackend,
-  getCollaborationLinkData,
-  isCollaborationLink,
-  loadScene,
-} from "./data";
-import {
-  importFromLocalStorage,
-  importUsernameFromLocalStorage,
-} from "./data/localStorage";
-import CustomStats from "./CustomStats";
-import type { RestoredDataState } from "@excalidraw/excalidraw/data/restore";
-import { restore, restoreAppState } from "@excalidraw/excalidraw/data/restore";
-import {
-  ExportToExcalidrawPlus,
-  exportToExcalidrawPlus,
-} from "./components/ExportToExcalidrawPlus";
-import { updateStaleImageStatuses } from "./data/FileManager";
-import { newElementWith } from "@excalidraw/excalidraw/element/mutateElement";
-import { isInitializedImageElement } from "@excalidraw/excalidraw/element/typeChecks";
-import { loadFilesFromFirebase } from "./data/firebase";
-import {
-  LibraryIndexedDBAdapter,
-  LibraryLocalStorageMigrationAdapter,
-  LocalData,
-} from "./data/LocalData";
-import { isBrowserStorageStateNewer } from "./data/tabSync";
-import clsx from "clsx";
-import {
-  parseLibraryTokensFromUrl,
-  useHandleLibrary,
-} from "@excalidraw/excalidraw/data/library";
-import { AppMainMenu } from "./components/AppMainMenu";
-import { AppWelcomeScreen } from "./components/AppWelcomeScreen";
-import { AppFooter } from "./components/AppFooter";
-import {
-  Provider,
-  useAtom,
-  useAtomValue,
-  useAtomWithInitialValue,
-  appJotaiStore,
-} from "./app-jotai";
+  isDevEnv,
+} from "@excalidraw/common";
+import polyfill from "@excalidraw/excalidraw/polyfill";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { loadFromBlob } from "@excalidraw/excalidraw/data/blob";
+import { useCallbackRefState } from "@excalidraw/excalidraw/hooks/useCallbackRefState";
+import { t } from "@excalidraw/excalidraw/i18n";
 
-import "./index.scss";
-import type { ResolutionType } from "@excalidraw/excalidraw/utility-types";
-import { ShareableLinkDialog } from "@excalidraw/excalidraw/components/ShareableLinkDialog";
-import { openConfirmModal } from "@excalidraw/excalidraw/components/OverwriteConfirm/OverwriteConfirmState";
-import { OverwriteConfirmDialog } from "@excalidraw/excalidraw/components/OverwriteConfirm/OverwriteConfirm";
-import Trans from "@excalidraw/excalidraw/components/Trans";
-import { ShareDialog, shareDialogStateAtom } from "./share/ShareDialog";
-import CollabError, { collabErrorIndicatorAtom } from "./collab/CollabError";
-import type { RemoteExcalidrawElement } from "@excalidraw/excalidraw/data/reconcile";
-import {
-  CommandPalette,
-  DEFAULT_CATEGORIES,
-} from "@excalidraw/excalidraw/components/CommandPalette/CommandPalette";
 import {
   GithubIcon,
   XBrandIcon,
@@ -121,6 +47,83 @@ import {
   share,
   youtubeIcon,
 } from "@excalidraw/excalidraw/components/icons";
+import { isElementLink } from "@excalidraw/element/elementLink";
+import { restore, restoreAppState } from "@excalidraw/excalidraw/data/restore";
+import { newElementWith } from "@excalidraw/element/mutateElement";
+import { isInitializedImageElement } from "@excalidraw/element/typeChecks";
+import clsx from "clsx";
+import {
+  parseLibraryTokensFromUrl,
+  useHandleLibrary,
+} from "@excalidraw/excalidraw/data/library";
+
+import type { RemoteExcalidrawElement } from "@excalidraw/excalidraw/data/reconcile";
+import type { RestoredDataState } from "@excalidraw/excalidraw/data/restore";
+import type {
+  FileId,
+  NonDeletedExcalidrawElement,
+  OrderedExcalidrawElement,
+} from "@excalidraw/element/types";
+import type {
+  AppState,
+  ExcalidrawImperativeAPI,
+  BinaryFiles,
+  ExcalidrawInitialDataState,
+  UIAppState,
+} from "@excalidraw/excalidraw/types";
+import type { ResolutionType } from "@excalidraw/common/utility-types";
+import type { ResolvablePromise } from "@excalidraw/common/utils";
+
+import CustomStats from "./CustomStats";
+import {
+  Provider,
+  useAtom,
+  useAtomValue,
+  useAtomWithInitialValue,
+  appJotaiStore,
+} from "./app-jotai";
+import {
+  FIREBASE_STORAGE_PREFIXES,
+  isExcalidrawPlusSignedUser,
+  STORAGE_KEYS,
+  SYNC_BROWSER_TABS_TIMEOUT,
+} from "./app_constants";
+import Collab, {
+  collabAPIAtom,
+  isCollaboratingAtom,
+  isOfflineAtom,
+} from "./collab/Collab";
+import { AppFooter } from "./components/AppFooter";
+import { AppMainMenu } from "./components/AppMainMenu";
+import { AppWelcomeScreen } from "./components/AppWelcomeScreen";
+import {
+  ExportToExcalidrawPlus,
+  exportToExcalidrawPlus,
+} from "./components/ExportToExcalidrawPlus";
+import { TopErrorBoundary } from "./components/TopErrorBoundary";
+
+import {
+  exportToBackend,
+  getCollaborationLinkData,
+  isCollaborationLink,
+  loadScene,
+} from "./data";
+
+import { updateStaleImageStatuses } from "./data/FileManager";
+import {
+  importFromLocalStorage,
+  importUsernameFromLocalStorage,
+} from "./data/localStorage";
+
+import { loadFilesFromFirebase } from "./data/firebase";
+import {
+  LibraryIndexedDBAdapter,
+  LibraryLocalStorageMigrationAdapter,
+  LocalData,
+} from "./data/LocalData";
+import { isBrowserStorageStateNewer } from "./data/tabSync";
+import { ShareDialog, shareDialogStateAtom } from "./share/ShareDialog";
+import CollabError, { collabErrorIndicatorAtom } from "./collab/CollabError";
 import { useHandleAppTheme } from "./useHandleAppTheme";
 import { getPreferredLanguage } from "./app-language/language-detector";
 import { useAppLangCode } from "./app-language/language-state";
@@ -131,7 +134,10 @@ import DebugCanvas, {
 } from "./components/DebugCanvas";
 import { AIComponents } from "./components/AI";
 import { ExcalidrawPlusIframeExport } from "./ExcalidrawPlusIframeExport";
-import { isElementLink } from "@excalidraw/excalidraw/element/elementLink";
+
+import "./index.scss";
+
+import type { CollabAPI } from "./collab/Collab";
 
 polyfill();
 
@@ -377,7 +383,7 @@ const ExcalidrawWrapper = () => {
   const [, forceRefresh] = useState(false);
 
   useEffect(() => {
-    if (import.meta.env.DEV) {
+    if (isDevEnv()) {
       const debugState = loadSavedDebugState();
 
       if (debugState.enabled && !window.visualDebug) {
diff --git a/excalidraw-app/CustomStats.tsx b/excalidraw-app/CustomStats.tsx
index 96ca55d67..543af5cfd 100644
--- a/excalidraw-app/CustomStats.tsx
+++ b/excalidraw-app/CustomStats.tsx
@@ -1,15 +1,21 @@
+import { Stats } from "@excalidraw/excalidraw";
+import { copyTextToSystemClipboard } from "@excalidraw/excalidraw/clipboard";
+import {
+  DEFAULT_VERSION,
+  debounce,
+  getVersion,
+  nFormatter,
+} from "@excalidraw/common";
+import { t } from "@excalidraw/excalidraw/i18n";
 import { useEffect, useState } from "react";
-import { debounce, getVersion, nFormatter } from "@excalidraw/excalidraw/utils";
+
+import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
+import type { UIAppState } from "@excalidraw/excalidraw/types";
+
 import {
   getElementsStorageSize,
   getTotalStorageSize,
 } from "./data/localStorage";
-import { DEFAULT_VERSION } from "@excalidraw/excalidraw/constants";
-import { t } from "@excalidraw/excalidraw/i18n";
-import { copyTextToSystemClipboard } from "@excalidraw/excalidraw/clipboard";
-import type { NonDeletedExcalidrawElement } from "@excalidraw/excalidraw/element/types";
-import type { UIAppState } from "@excalidraw/excalidraw/types";
-import { Stats } from "@excalidraw/excalidraw";
 
 type StorageSizes = { scene: number; total: number };
 
diff --git a/excalidraw-app/ExcalidrawPlusIframeExport.tsx b/excalidraw-app/ExcalidrawPlusIframeExport.tsx
index 1f9cd631c..0ad27cafb 100644
--- a/excalidraw-app/ExcalidrawPlusIframeExport.tsx
+++ b/excalidraw-app/ExcalidrawPlusIframeExport.tsx
@@ -1,13 +1,15 @@
+import { base64urlToString } from "@excalidraw/excalidraw/data/encode";
+import { ExcalidrawError } from "@excalidraw/excalidraw/errors";
 import { useLayoutEffect, useRef } from "react";
-import { STORAGE_KEYS } from "./app_constants";
-import { LocalData } from "./data/LocalData";
+
 import type {
   FileId,
   OrderedExcalidrawElement,
-} from "@excalidraw/excalidraw/element/types";
+} from "@excalidraw/element/types";
 import type { AppState, BinaryFileData } from "@excalidraw/excalidraw/types";
-import { ExcalidrawError } from "@excalidraw/excalidraw/errors";
-import { base64urlToString } from "@excalidraw/excalidraw/data/encode";
+
+import { STORAGE_KEYS } from "./app_constants";
+import { LocalData } from "./data/LocalData";
 
 const EVENT_REQUEST_SCENE = "REQUEST_SCENE";
 
diff --git a/excalidraw-app/app-language/LanguageList.tsx b/excalidraw-app/app-language/LanguageList.tsx
index 001d4ea17..b4682f353 100644
--- a/excalidraw-app/app-language/LanguageList.tsx
+++ b/excalidraw-app/app-language/LanguageList.tsx
@@ -1,6 +1,8 @@
-import React from "react";
 import { useI18n, languages } from "@excalidraw/excalidraw/i18n";
+import React from "react";
+
 import { useSetAtom } from "../app-jotai";
+
 import { appLangCodeAtom } from "./language-state";
 
 export const LanguageList = ({ style }: { style?: React.CSSProperties }) => {
diff --git a/excalidraw-app/app-language/language-detector.ts b/excalidraw-app/app-language/language-detector.ts
index 52da4908f..535189d0a 100644
--- a/excalidraw-app/app-language/language-detector.ts
+++ b/excalidraw-app/app-language/language-detector.ts
@@ -1,5 +1,5 @@
-import LanguageDetector from "i18next-browser-languagedetector";
 import { defaultLang, languages } from "@excalidraw/excalidraw";
+import LanguageDetector from "i18next-browser-languagedetector";
 
 export const languageDetector = new LanguageDetector();
 
diff --git a/excalidraw-app/app-language/language-state.ts b/excalidraw-app/app-language/language-state.ts
index f491c2215..d9ec90322 100644
--- a/excalidraw-app/app-language/language-state.ts
+++ b/excalidraw-app/app-language/language-state.ts
@@ -1,5 +1,7 @@
 import { useEffect } from "react";
+
 import { atom, useAtom } from "../app-jotai";
+
 import { getPreferredLanguage, languageDetector } from "./language-detector";
 
 export const appLangCodeAtom = atom(getPreferredLanguage());
diff --git a/excalidraw-app/collab/Collab.tsx b/excalidraw-app/collab/Collab.tsx
index 9a16e0569..f6f763041 100644
--- a/excalidraw-app/collab/Collab.tsx
+++ b/excalidraw-app/collab/Collab.tsx
@@ -1,21 +1,3 @@
-import throttle from "lodash.throttle";
-import { PureComponent } from "react";
-import type {
-  BinaryFileData,
-  ExcalidrawImperativeAPI,
-  SocketId,
-  Collaborator,
-  Gesture,
-} from "@excalidraw/excalidraw/types";
-import { ErrorDialog } from "@excalidraw/excalidraw/components/ErrorDialog";
-import { APP_NAME, ENV, EVENT } from "@excalidraw/excalidraw/constants";
-import type { ImportedDataState } from "@excalidraw/excalidraw/data/types";
-import type {
-  ExcalidrawElement,
-  FileId,
-  InitializedExcalidrawImageElement,
-  OrderedExcalidrawElement,
-} from "@excalidraw/excalidraw/element/types";
 import {
   CaptureUpdateAction,
   getSceneVersion,
@@ -23,12 +5,54 @@ import {
   zoomToFitBounds,
   reconcileElements,
 } from "@excalidraw/excalidraw";
+import { ErrorDialog } from "@excalidraw/excalidraw/components/ErrorDialog";
+import { APP_NAME, EVENT } from "@excalidraw/common";
 import {
+  IDLE_THRESHOLD,
+  ACTIVE_THRESHOLD,
+  UserIdleState,
   assertNever,
+  isDevEnv,
+  isTestEnv,
   preventUnload,
   resolvablePromise,
   throttleRAF,
-} from "@excalidraw/excalidraw/utils";
+} from "@excalidraw/common";
+import { decryptData } from "@excalidraw/excalidraw/data/encryption";
+import { getVisibleSceneBounds } from "@excalidraw/element/bounds";
+import { newElementWith } from "@excalidraw/element/mutateElement";
+import {
+  isImageElement,
+  isInitializedImageElement,
+} from "@excalidraw/element/typeChecks";
+import { AbortError } from "@excalidraw/excalidraw/errors";
+import { t } from "@excalidraw/excalidraw/i18n";
+import { withBatchedUpdates } from "@excalidraw/excalidraw/reactUtils";
+
+import throttle from "lodash.throttle";
+import { PureComponent } from "react";
+
+import type {
+  ReconciledExcalidrawElement,
+  RemoteExcalidrawElement,
+} from "@excalidraw/excalidraw/data/reconcile";
+import type { ImportedDataState } from "@excalidraw/excalidraw/data/types";
+import type {
+  ExcalidrawElement,
+  FileId,
+  InitializedExcalidrawImageElement,
+  OrderedExcalidrawElement,
+} from "@excalidraw/element/types";
+import type {
+  BinaryFileData,
+  ExcalidrawImperativeAPI,
+  SocketId,
+  Collaborator,
+  Gesture,
+} from "@excalidraw/excalidraw/types";
+import type { Mutable, ValueOf } from "@excalidraw/common/utility-types";
+
+import { appJotaiStore, atom } from "../app-jotai";
 import {
   CURSOR_SYNC_TIMEOUT,
   FILE_UPLOAD_MAX_BYTES,
@@ -39,15 +63,17 @@ import {
   SYNC_FULL_SCENE_INTERVAL_MS,
   WS_EVENTS,
 } from "../app_constants";
-import type {
-  SocketUpdateDataSource,
-  SyncableExcalidrawElement,
-} from "../data";
 import {
   generateCollaborationLinkData,
   getCollaborationLink,
   getSyncableElements,
 } from "../data";
+import {
+  encodeFilesForUpload,
+  FileManager,
+  updateStaleImageStatuses,
+} from "../data/FileManager";
+import { LocalData } from "../data/LocalData";
 import {
   isSavedToFirebase,
   loadFilesFromFirebase,
@@ -59,36 +85,15 @@ import {
   importUsernameFromLocalStorage,
   saveUsernameToLocalStorage,
 } from "../data/localStorage";
-import Portal from "./Portal";
-import { t } from "@excalidraw/excalidraw/i18n";
-import {
-  IDLE_THRESHOLD,
-  ACTIVE_THRESHOLD,
-  UserIdleState,
-} from "@excalidraw/excalidraw/constants";
-import {
-  encodeFilesForUpload,
-  FileManager,
-  updateStaleImageStatuses,
-} from "../data/FileManager";
-import { AbortError } from "@excalidraw/excalidraw/errors";
-import {
-  isImageElement,
-  isInitializedImageElement,
-} from "@excalidraw/excalidraw/element/typeChecks";
-import { newElementWith } from "@excalidraw/excalidraw/element/mutateElement";
-import { decryptData } from "@excalidraw/excalidraw/data/encryption";
 import { resetBrowserStateVersions } from "../data/tabSync";
-import { LocalData } from "../data/LocalData";
-import { appJotaiStore, atom } from "../app-jotai";
-import type { Mutable, ValueOf } from "@excalidraw/excalidraw/utility-types";
-import { getVisibleSceneBounds } from "@excalidraw/excalidraw/element/bounds";
-import { withBatchedUpdates } from "@excalidraw/excalidraw/reactUtils";
+
 import { collabErrorIndicatorAtom } from "./CollabError";
+import Portal from "./Portal";
+
 import type {
-  ReconciledExcalidrawElement,
-  RemoteExcalidrawElement,
-} from "@excalidraw/excalidraw/data/reconcile";
+  SocketUpdateDataSource,
+  SyncableExcalidrawElement,
+} from "../data";
 
 export const collabAPIAtom = atom<CollabAPI | null>(null);
 export const isCollaboratingAtom = atom(false);
@@ -236,7 +241,7 @@ class Collab extends PureComponent<CollabProps, CollabState> {
 
     appJotaiStore.set(collabAPIAtom, collabAPI);
 
-    if (import.meta.env.MODE === ENV.TEST || import.meta.env.DEV) {
+    if (isTestEnv() || isDevEnv()) {
       window.collab = window.collab || ({} as Window["collab"]);
       Object.defineProperties(window, {
         collab: {
@@ -1009,7 +1014,7 @@ declare global {
   }
 }
 
-if (import.meta.env.MODE === ENV.TEST || import.meta.env.DEV) {
+if (isTestEnv() || isDevEnv()) {
   window.collab = window.collab || ({} as Window["collab"]);
 }
 
diff --git a/excalidraw-app/collab/CollabError.tsx b/excalidraw-app/collab/CollabError.tsx
index 76828cf1a..eb6f391bc 100644
--- a/excalidraw-app/collab/CollabError.tsx
+++ b/excalidraw-app/collab/CollabError.tsx
@@ -2,6 +2,7 @@ import { Tooltip } from "@excalidraw/excalidraw/components/Tooltip";
 import { warning } from "@excalidraw/excalidraw/components/icons";
 import clsx from "clsx";
 import { useEffect, useRef, useState } from "react";
+
 import { atom } from "../app-jotai";
 
 import "./CollabError.scss";
diff --git a/excalidraw-app/collab/Portal.tsx b/excalidraw-app/collab/Portal.tsx
index 1788d39f7..26a7d0d9e 100644
--- a/excalidraw-app/collab/Portal.tsx
+++ b/excalidraw-app/collab/Portal.tsx
@@ -1,25 +1,26 @@
+import { CaptureUpdateAction } from "@excalidraw/excalidraw";
+import { trackEvent } from "@excalidraw/excalidraw/analytics";
+import { encryptData } from "@excalidraw/excalidraw/data/encryption";
+import { newElementWith } from "@excalidraw/element/mutateElement";
+import throttle from "lodash.throttle";
+
+import type { UserIdleState } from "@excalidraw/common";
+import type { OrderedExcalidrawElement } from "@excalidraw/element/types";
+import type {
+  OnUserFollowedPayload,
+  SocketId,
+} from "@excalidraw/excalidraw/types";
+
+import { WS_EVENTS, FILE_UPLOAD_TIMEOUT, WS_SUBTYPES } from "../app_constants";
+import { isSyncableElement } from "../data";
+
 import type {
   SocketUpdateData,
   SocketUpdateDataSource,
   SyncableExcalidrawElement,
 } from "../data";
-import { isSyncableElement } from "../data";
-
 import type { TCollabClass } from "./Collab";
-
-import type { OrderedExcalidrawElement } from "@excalidraw/excalidraw/element/types";
-import { WS_EVENTS, FILE_UPLOAD_TIMEOUT, WS_SUBTYPES } from "../app_constants";
-import type {
-  OnUserFollowedPayload,
-  SocketId,
-} from "@excalidraw/excalidraw/types";
-import type { UserIdleState } from "@excalidraw/excalidraw/constants";
-import { trackEvent } from "@excalidraw/excalidraw/analytics";
-import throttle from "lodash.throttle";
-import { newElementWith } from "@excalidraw/excalidraw/element/mutateElement";
-import { encryptData } from "@excalidraw/excalidraw/data/encryption";
 import type { Socket } from "socket.io-client";
-import { CaptureUpdateAction } from "@excalidraw/excalidraw";
 
 class Portal {
   collab: TCollabClass;
diff --git a/excalidraw-app/components/AI.tsx b/excalidraw-app/components/AI.tsx
index fa5d12fa2..4469d74f6 100644
--- a/excalidraw-app/components/AI.tsx
+++ b/excalidraw-app/components/AI.tsx
@@ -1,4 +1,3 @@
-import type { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/types";
 import {
   DiagramToCodePlugin,
   exportToBlob,
@@ -7,7 +6,9 @@ import {
   TTDDialog,
 } from "@excalidraw/excalidraw";
 import { getDataURL } from "@excalidraw/excalidraw/data/blob";
-import { safelyParseJSON } from "@excalidraw/excalidraw/utils";
+import { safelyParseJSON } from "@excalidraw/common";
+
+import type { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/types";
 
 export const AIComponents = ({
   excalidrawAPI,
diff --git a/excalidraw-app/components/AppFooter.tsx b/excalidraw-app/components/AppFooter.tsx
index e81df7c41..7d42d46bf 100644
--- a/excalidraw-app/components/AppFooter.tsx
+++ b/excalidraw-app/components/AppFooter.tsx
@@ -1,9 +1,11 @@
-import React from "react";
 import { Footer } from "@excalidraw/excalidraw/index";
+import React from "react";
+
+import { isExcalidrawPlusSignedUser } from "../app_constants";
+
+import { DebugFooter, isVisualDebuggerEnabled } from "./DebugCanvas";
 import { EncryptedIcon } from "./EncryptedIcon";
 import { ExcalidrawPlusAppLink } from "./ExcalidrawPlusAppLink";
-import { isExcalidrawPlusSignedUser } from "../app_constants";
-import { DebugFooter, isVisualDebuggerEnabled } from "./DebugCanvas";
 
 export const AppFooter = React.memo(
   ({ onChange }: { onChange: () => void }) => {
diff --git a/excalidraw-app/components/AppMainMenu.tsx b/excalidraw-app/components/AppMainMenu.tsx
index cb741cf25..cd0aca268 100644
--- a/excalidraw-app/components/AppMainMenu.tsx
+++ b/excalidraw-app/components/AppMainMenu.tsx
@@ -1,13 +1,18 @@
-import React from "react";
 import {
   loginIcon,
   ExcalLogo,
   eyeIcon,
 } from "@excalidraw/excalidraw/components/icons";
-import type { Theme } from "@excalidraw/excalidraw/element/types";
 import { MainMenu } from "@excalidraw/excalidraw/index";
-import { isExcalidrawPlusSignedUser } from "../app_constants";
+import React from "react";
+
+import { isDevEnv } from "@excalidraw/common";
+
+import type { Theme } from "@excalidraw/element/types";
+
 import { LanguageList } from "../app-language/LanguageList";
+import { isExcalidrawPlusSignedUser } from "../app_constants";
+
 import { saveDebugState } from "./DebugCanvas";
 
 export const AppMainMenu: React.FC<{
@@ -54,7 +59,7 @@ export const AppMainMenu: React.FC<{
       >
         {isExcalidrawPlusSignedUser ? "Sign in" : "Sign up"}
       </MainMenu.ItemLink>
-      {import.meta.env.DEV && (
+      {isDevEnv() && (
         <MainMenu.Item
           icon={eyeIcon}
           onClick={() => {
diff --git a/excalidraw-app/components/AppWelcomeScreen.tsx b/excalidraw-app/components/AppWelcomeScreen.tsx
index bdc9859f8..5bb5073e9 100644
--- a/excalidraw-app/components/AppWelcomeScreen.tsx
+++ b/excalidraw-app/components/AppWelcomeScreen.tsx
@@ -1,9 +1,10 @@
-import React from "react";
 import { loginIcon } from "@excalidraw/excalidraw/components/icons";
+import { POINTER_EVENTS } from "@excalidraw/common";
 import { useI18n } from "@excalidraw/excalidraw/i18n";
 import { WelcomeScreen } from "@excalidraw/excalidraw/index";
+import React from "react";
+
 import { isExcalidrawPlusSignedUser } from "../app_constants";
-import { POINTER_EVENTS } from "@excalidraw/excalidraw/constants";
 
 export const AppWelcomeScreen: React.FC<{
   onCollabDialogOpen: () => any;
diff --git a/excalidraw-app/components/DebugCanvas.tsx b/excalidraw-app/components/DebugCanvas.tsx
index 31898ba57..e83a62647 100644
--- a/excalidraw-app/components/DebugCanvas.tsx
+++ b/excalidraw-app/components/DebugCanvas.tsx
@@ -1,24 +1,28 @@
-import { useCallback, useImperativeHandle, useRef } from "react";
-import { type AppState } from "@excalidraw/excalidraw/types";
-import { throttleRAF } from "@excalidraw/excalidraw/utils";
-import {
-  bootstrapCanvas,
-  getNormalizedCanvasDimensions,
-} from "@excalidraw/excalidraw/renderer/helpers";
-import type { DebugElement } from "@excalidraw/excalidraw/visualdebug";
 import {
   ArrowheadArrowIcon,
   CloseIcon,
   TrashIcon,
 } from "@excalidraw/excalidraw/components/icons";
-import { STORAGE_KEYS } from "../app_constants";
-import type { Curve } from "../../packages/math";
+import {
+  bootstrapCanvas,
+  getNormalizedCanvasDimensions,
+} from "@excalidraw/excalidraw/renderer/helpers";
+import { type AppState } from "@excalidraw/excalidraw/types";
+import { throttleRAF } from "@excalidraw/common";
+import { useCallback, useImperativeHandle, useRef } from "react";
+
 import {
   isLineSegment,
   type GlobalPoint,
   type LineSegment,
-} from "../../packages/math";
-import { isCurve } from "../../packages/math/curve";
+} from "@excalidraw/math";
+import { isCurve } from "@excalidraw/math/curve";
+
+import type { DebugElement } from "@excalidraw/excalidraw/visualdebug";
+
+import type { Curve } from "@excalidraw/math";
+
+import { STORAGE_KEYS } from "../app_constants";
 
 const renderLine = (
   context: CanvasRenderingContext2D,
diff --git a/excalidraw-app/components/EncryptedIcon.tsx b/excalidraw-app/components/EncryptedIcon.tsx
index a3a841783..552e7ca82 100644
--- a/excalidraw-app/components/EncryptedIcon.tsx
+++ b/excalidraw-app/components/EncryptedIcon.tsx
@@ -1,5 +1,5 @@
-import { shield } from "@excalidraw/excalidraw/components/icons";
 import { Tooltip } from "@excalidraw/excalidraw/components/Tooltip";
+import { shield } from "@excalidraw/excalidraw/components/icons";
 import { useI18n } from "@excalidraw/excalidraw/i18n";
 
 export const EncryptedIcon = () => {
diff --git a/excalidraw-app/components/ExportToExcalidrawPlus.tsx b/excalidraw-app/components/ExportToExcalidrawPlus.tsx
index 782ecd963..60f1608b2 100644
--- a/excalidraw-app/components/ExportToExcalidrawPlus.tsx
+++ b/excalidraw-app/components/ExportToExcalidrawPlus.tsx
@@ -1,31 +1,33 @@
 import React from "react";
+import { uploadBytes, ref } from "firebase/storage";
+import { nanoid } from "nanoid";
+
+import { trackEvent } from "@excalidraw/excalidraw/analytics";
 import { Card } from "@excalidraw/excalidraw/components/Card";
+import { ExcalidrawLogo } from "@excalidraw/excalidraw/components/ExcalidrawLogo";
 import { ToolButton } from "@excalidraw/excalidraw/components/ToolButton";
+import { MIME_TYPES, getFrame } from "@excalidraw/common";
+import {
+  encryptData,
+  generateEncryptionKey,
+} from "@excalidraw/excalidraw/data/encryption";
 import { serializeAsJSON } from "@excalidraw/excalidraw/data/json";
-import { loadFirebaseStorage, saveFilesToFirebase } from "../data/firebase";
+import { isInitializedImageElement } from "@excalidraw/element/typeChecks";
+import { useI18n } from "@excalidraw/excalidraw/i18n";
+
 import type {
   FileId,
   NonDeletedExcalidrawElement,
-} from "@excalidraw/excalidraw/element/types";
+} from "@excalidraw/element/types";
 import type {
   AppState,
   BinaryFileData,
   BinaryFiles,
 } from "@excalidraw/excalidraw/types";
-import { nanoid } from "nanoid";
-import { useI18n } from "@excalidraw/excalidraw/i18n";
-import {
-  encryptData,
-  generateEncryptionKey,
-} from "@excalidraw/excalidraw/data/encryption";
-import { isInitializedImageElement } from "@excalidraw/excalidraw/element/typeChecks";
+
 import { FILE_UPLOAD_MAX_BYTES } from "../app_constants";
 import { encodeFilesForUpload } from "../data/FileManager";
-import { uploadBytes, ref } from "firebase/storage";
-import { MIME_TYPES } from "@excalidraw/excalidraw/constants";
-import { trackEvent } from "@excalidraw/excalidraw/analytics";
-import { getFrame } from "@excalidraw/excalidraw/utils";
-import { ExcalidrawLogo } from "@excalidraw/excalidraw/components/ExcalidrawLogo";
+import { loadFirebaseStorage, saveFilesToFirebase } from "../data/firebase";
 
 export const exportToExcalidrawPlus = async (
   elements: readonly NonDeletedExcalidrawElement[],
diff --git a/excalidraw-app/components/GitHubCorner.tsx b/excalidraw-app/components/GitHubCorner.tsx
index 4d74242d1..6a4108813 100644
--- a/excalidraw-app/components/GitHubCorner.tsx
+++ b/excalidraw-app/components/GitHubCorner.tsx
@@ -1,7 +1,8 @@
+import { THEME } from "@excalidraw/common";
 import oc from "open-color";
 import React from "react";
-import { THEME } from "@excalidraw/excalidraw/constants";
-import type { Theme } from "@excalidraw/excalidraw/element/types";
+
+import type { Theme } from "@excalidraw/element/types";
 
 // https://github.com/tholman/github-corners
 export const GitHubCorner = React.memo(
diff --git a/excalidraw-app/components/TopErrorBoundary.tsx b/excalidraw-app/components/TopErrorBoundary.tsx
index e7e00be3b..77d9e5f4f 100644
--- a/excalidraw-app/components/TopErrorBoundary.tsx
+++ b/excalidraw-app/components/TopErrorBoundary.tsx
@@ -1,7 +1,7 @@
-import React from "react";
-import * as Sentry from "@sentry/browser";
-import { t } from "@excalidraw/excalidraw/i18n";
 import Trans from "@excalidraw/excalidraw/components/Trans";
+import { t } from "@excalidraw/excalidraw/i18n";
+import * as Sentry from "@sentry/browser";
+import React from "react";
 
 interface TopErrorBoundaryState {
   hasError: boolean;
diff --git a/excalidraw-app/data/FileManager.ts b/excalidraw-app/data/FileManager.ts
index f5f4eaca9..5d134144f 100644
--- a/excalidraw-app/data/FileManager.ts
+++ b/excalidraw-app/data/FileManager.ts
@@ -1,14 +1,15 @@
 import { CaptureUpdateAction } from "@excalidraw/excalidraw";
 import { compressData } from "@excalidraw/excalidraw/data/encode";
-import { newElementWith } from "@excalidraw/excalidraw/element/mutateElement";
-import { isInitializedImageElement } from "@excalidraw/excalidraw/element/typeChecks";
+import { newElementWith } from "@excalidraw/element/mutateElement";
+import { isInitializedImageElement } from "@excalidraw/element/typeChecks";
+import { t } from "@excalidraw/excalidraw/i18n";
+
 import type {
   ExcalidrawElement,
   ExcalidrawImageElement,
   FileId,
   InitializedExcalidrawImageElement,
-} from "@excalidraw/excalidraw/element/types";
-import { t } from "@excalidraw/excalidraw/i18n";
+} from "@excalidraw/element/types";
 import type {
   BinaryFileData,
   BinaryFileMetadata,
diff --git a/excalidraw-app/data/LocalData.ts b/excalidraw-app/data/LocalData.ts
index 3ab0ad931..9ad6dc925 100644
--- a/excalidraw-app/data/LocalData.ts
+++ b/excalidraw-app/data/LocalData.ts
@@ -10,6 +10,13 @@
  *   (localStorage, indexedDB).
  */
 
+import { clearAppStateForLocalStorage } from "@excalidraw/excalidraw/appState";
+import {
+  CANVAS_SEARCH_TAB,
+  DEFAULT_SIDEBAR,
+  debounce,
+} from "@excalidraw/common";
+import { clearElementsForLocalStorage } from "@excalidraw/element";
 import {
   createStore,
   entries,
@@ -19,26 +26,19 @@ import {
   setMany,
   get,
 } from "idb-keyval";
-import { clearAppStateForLocalStorage } from "@excalidraw/excalidraw/appState";
-import {
-  CANVAS_SEARCH_TAB,
-  DEFAULT_SIDEBAR,
-} from "@excalidraw/excalidraw/constants";
+
 import type { LibraryPersistedData } from "@excalidraw/excalidraw/data/library";
 import type { ImportedDataState } from "@excalidraw/excalidraw/data/types";
-import { clearElementsForLocalStorage } from "@excalidraw/excalidraw/element";
-import type {
-  ExcalidrawElement,
-  FileId,
-} from "@excalidraw/excalidraw/element/types";
+import type { ExcalidrawElement, FileId } from "@excalidraw/element/types";
 import type {
   AppState,
   BinaryFileData,
   BinaryFiles,
 } from "@excalidraw/excalidraw/types";
-import type { MaybePromise } from "@excalidraw/excalidraw/utility-types";
-import { debounce } from "@excalidraw/excalidraw/utils";
+import type { MaybePromise } from "@excalidraw/common/utility-types";
+
 import { SAVE_TO_LOCAL_STORAGE_TIMEOUT, STORAGE_KEYS } from "../app_constants";
+
 import { FileManager } from "./FileManager";
 import { Locker } from "./Locker";
 import { updateBrowserStateVersion } from "./tabSync";
diff --git a/excalidraw-app/data/firebase.ts b/excalidraw-app/data/firebase.ts
index a871b4895..568054f7e 100644
--- a/excalidraw-app/data/firebase.ts
+++ b/excalidraw-app/data/firebase.ts
@@ -1,27 +1,12 @@
 import { reconcileElements } from "@excalidraw/excalidraw";
-import type {
-  ExcalidrawElement,
-  FileId,
-  OrderedExcalidrawElement,
-} from "@excalidraw/excalidraw/element/types";
-import { getSceneVersion } from "@excalidraw/excalidraw/element";
-import type Portal from "../collab/Portal";
-import { restoreElements } from "@excalidraw/excalidraw/data/restore";
-import type {
-  AppState,
-  BinaryFileData,
-  BinaryFileMetadata,
-  DataURL,
-} from "@excalidraw/excalidraw/types";
-import { FILE_CACHE_MAX_AGE_SEC } from "../app_constants";
+import { MIME_TYPES } from "@excalidraw/common";
 import { decompressData } from "@excalidraw/excalidraw/data/encode";
 import {
   encryptData,
   decryptData,
 } from "@excalidraw/excalidraw/data/encryption";
-import { MIME_TYPES } from "@excalidraw/excalidraw/constants";
-import type { SyncableExcalidrawElement } from ".";
-import { getSyncableElements } from ".";
+import { restoreElements } from "@excalidraw/excalidraw/data/restore";
+import { getSceneVersion } from "@excalidraw/element";
 import { initializeApp } from "firebase/app";
 import {
   getFirestore,
@@ -31,8 +16,27 @@ import {
   Bytes,
 } from "firebase/firestore";
 import { getStorage, ref, uploadBytes } from "firebase/storage";
-import type { Socket } from "socket.io-client";
+
 import type { RemoteExcalidrawElement } from "@excalidraw/excalidraw/data/reconcile";
+import type {
+  ExcalidrawElement,
+  FileId,
+  OrderedExcalidrawElement,
+} from "@excalidraw/element/types";
+import type {
+  AppState,
+  BinaryFileData,
+  BinaryFileMetadata,
+  DataURL,
+} from "@excalidraw/excalidraw/types";
+
+import { FILE_CACHE_MAX_AGE_SEC } from "../app_constants";
+
+import { getSyncableElements } from ".";
+
+import type { SyncableExcalidrawElement } from ".";
+import type Portal from "../collab/Portal";
+import type { Socket } from "socket.io-client";
 
 // private
 // -----------------------------------------------------------------------------
diff --git a/excalidraw-app/data/index.ts b/excalidraw-app/data/index.ts
index 6ecb98f77..7bb0f9d8d 100644
--- a/excalidraw-app/data/index.ts
+++ b/excalidraw-app/data/index.ts
@@ -9,34 +9,38 @@ import {
 } from "@excalidraw/excalidraw/data/encryption";
 import { serializeAsJSON } from "@excalidraw/excalidraw/data/json";
 import { restore } from "@excalidraw/excalidraw/data/restore";
+import { isInvisiblySmallElement } from "@excalidraw/element/sizeHelpers";
+import { isInitializedImageElement } from "@excalidraw/element/typeChecks";
+import { t } from "@excalidraw/excalidraw/i18n";
+import { bytesToHexString } from "@excalidraw/common";
+
+import type { UserIdleState } from "@excalidraw/common";
 import type { ImportedDataState } from "@excalidraw/excalidraw/data/types";
-import type { SceneBounds } from "@excalidraw/excalidraw/element/bounds";
-import { isInvisiblySmallElement } from "@excalidraw/excalidraw/element/sizeHelpers";
-import { isInitializedImageElement } from "@excalidraw/excalidraw/element/typeChecks";
+import type { SceneBounds } from "@excalidraw/element/bounds";
 import type {
   ExcalidrawElement,
   FileId,
   OrderedExcalidrawElement,
-} from "@excalidraw/excalidraw/element/types";
-import { t } from "@excalidraw/excalidraw/i18n";
+} from "@excalidraw/element/types";
 import type {
   AppState,
   BinaryFileData,
   BinaryFiles,
   SocketId,
 } from "@excalidraw/excalidraw/types";
-import type { UserIdleState } from "@excalidraw/excalidraw/constants";
-import type { MakeBrand } from "@excalidraw/excalidraw/utility-types";
-import { bytesToHexString } from "@excalidraw/excalidraw/utils";
-import type { WS_SUBTYPES } from "../app_constants";
+import type { MakeBrand } from "@excalidraw/common/utility-types";
+
 import {
   DELETED_ELEMENT_TIMEOUT,
   FILE_UPLOAD_MAX_BYTES,
   ROOM_ID_BYTES,
 } from "../app_constants";
+
 import { encodeFilesForUpload } from "./FileManager";
 import { saveFilesToFirebase } from "./firebase";
 
+import type { WS_SUBTYPES } from "../app_constants";
+
 export type SyncableExcalidrawElement = OrderedExcalidrawElement &
   MakeBrand<"SyncableExcalidrawElement">;
 
diff --git a/excalidraw-app/data/localStorage.ts b/excalidraw-app/data/localStorage.ts
index 640dfdb60..bc0df4a67 100644
--- a/excalidraw-app/data/localStorage.ts
+++ b/excalidraw-app/data/localStorage.ts
@@ -1,10 +1,12 @@
-import type { ExcalidrawElement } from "@excalidraw/excalidraw/element/types";
-import type { AppState } from "@excalidraw/excalidraw/types";
 import {
   clearAppStateForLocalStorage,
   getDefaultAppState,
 } from "@excalidraw/excalidraw/appState";
-import { clearElementsForLocalStorage } from "@excalidraw/excalidraw/element";
+import { clearElementsForLocalStorage } from "@excalidraw/element";
+
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+import type { AppState } from "@excalidraw/excalidraw/types";
+
 import { STORAGE_KEYS } from "../app_constants";
 
 export const saveUsernameToLocalStorage = (username: string) => {
diff --git a/excalidraw-app/index.tsx b/excalidraw-app/index.tsx
index a28bd9e49..98c902e36 100644
--- a/excalidraw-app/index.tsx
+++ b/excalidraw-app/index.tsx
@@ -1,9 +1,11 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import ExcalidrawApp from "./App";
 import { registerSW } from "virtual:pwa-register";
 
 import "../excalidraw-app/sentry";
+
+import ExcalidrawApp from "./App";
+
 window.__EXCALIDRAW_SHA__ = import.meta.env.VITE_APP_GIT_SHA;
 const rootElement = document.getElementById("root")!;
 const root = createRoot(rootElement);
diff --git a/excalidraw-app/share/ShareDialog.tsx b/excalidraw-app/share/ShareDialog.tsx
index bba7e3678..884d64680 100644
--- a/excalidraw-app/share/ShareDialog.tsx
+++ b/excalidraw-app/share/ShareDialog.tsx
@@ -1,10 +1,8 @@
-import { useEffect, useRef, useState } from "react";
-import { copyTextToSystemClipboard } from "@excalidraw/excalidraw/clipboard";
 import { trackEvent } from "@excalidraw/excalidraw/analytics";
-import { getFrame } from "@excalidraw/excalidraw/utils";
-import { useI18n } from "@excalidraw/excalidraw/i18n";
-import { KEYS } from "@excalidraw/excalidraw/keys";
+import { copyTextToSystemClipboard } from "@excalidraw/excalidraw/clipboard";
 import { Dialog } from "@excalidraw/excalidraw/components/Dialog";
+import { FilledButton } from "@excalidraw/excalidraw/components/FilledButton";
+import { TextField } from "@excalidraw/excalidraw/components/TextField";
 import {
   copyIcon,
   LinkIcon,
@@ -14,16 +12,19 @@ import {
   shareIOS,
   shareWindows,
 } from "@excalidraw/excalidraw/components/icons";
-import { TextField } from "@excalidraw/excalidraw/components/TextField";
-import { FilledButton } from "@excalidraw/excalidraw/components/FilledButton";
-import type { CollabAPI } from "../collab/Collab";
-import { activeRoomLinkAtom } from "../collab/Collab";
 import { useUIAppState } from "@excalidraw/excalidraw/context/ui-appState";
 import { useCopyStatus } from "@excalidraw/excalidraw/hooks/useCopiedIndicator";
+import { useI18n } from "@excalidraw/excalidraw/i18n";
+import { KEYS, getFrame } from "@excalidraw/common";
+import { useEffect, useRef, useState } from "react";
+
 import { atom, useAtom, useAtomValue } from "../app-jotai";
+import { activeRoomLinkAtom } from "../collab/Collab";
 
 import "./ShareDialog.scss";
 
+import type { CollabAPI } from "../collab/Collab";
+
 type OnExportToBackend = () => void;
 type ShareDialogType = "share" | "collaborationOnly";
 
diff --git a/excalidraw-app/tests/MobileMenu.test.tsx b/excalidraw-app/tests/MobileMenu.test.tsx
index a6eef3b51..3b05e7296 100644
--- a/excalidraw-app/tests/MobileMenu.test.tsx
+++ b/excalidraw-app/tests/MobileMenu.test.tsx
@@ -1,11 +1,11 @@
-import ExcalidrawApp from "../App";
+import { UI } from "@excalidraw/excalidraw/tests/helpers/ui";
 import {
   mockBoundingClientRect,
   render,
   restoreOriginalGetBoundingClientRect,
 } from "@excalidraw/excalidraw/tests/test-utils";
 
-import { UI } from "@excalidraw/excalidraw/tests/helpers/ui";
+import ExcalidrawApp from "../App";
 
 describe("Test MobileMenu", () => {
   const { h } = window;
diff --git a/excalidraw-app/tests/collab.test.tsx b/excalidraw-app/tests/collab.test.tsx
index 80cf4b0b9..3572303f4 100644
--- a/excalidraw-app/tests/collab.test.tsx
+++ b/excalidraw-app/tests/collab.test.tsx
@@ -1,13 +1,14 @@
-import { vi } from "vitest";
-import { act, render, waitFor } from "@excalidraw/excalidraw/tests/test-utils";
-import ExcalidrawApp from "../App";
-import { API } from "@excalidraw/excalidraw/tests/helpers/api";
-import { syncInvalidIndices } from "@excalidraw/excalidraw/fractionalIndex";
+import { CaptureUpdateAction, newElementWith } from "@excalidraw/excalidraw";
 import {
   createRedoAction,
   createUndoAction,
 } from "@excalidraw/excalidraw/actions/actionHistory";
-import { CaptureUpdateAction, newElementWith } from "@excalidraw/excalidraw";
+import { syncInvalidIndices } from "@excalidraw/element/fractionalIndex";
+import { API } from "@excalidraw/excalidraw/tests/helpers/api";
+import { act, render, waitFor } from "@excalidraw/excalidraw/tests/test-utils";
+import { vi } from "vitest";
+
+import ExcalidrawApp from "../App";
 
 const { h } = window;
 
diff --git a/excalidraw-app/useHandleAppTheme.ts b/excalidraw-app/useHandleAppTheme.ts
index e31961174..94f5a3e58 100644
--- a/excalidraw-app/useHandleAppTheme.ts
+++ b/excalidraw-app/useHandleAppTheme.ts
@@ -1,8 +1,9 @@
-import { useEffect, useLayoutEffect, useState } from "react";
 import { THEME } from "@excalidraw/excalidraw";
-import { EVENT } from "@excalidraw/excalidraw/constants";
-import type { Theme } from "@excalidraw/excalidraw/element/types";
-import { CODES, KEYS } from "@excalidraw/excalidraw/keys";
+import { EVENT, CODES, KEYS } from "@excalidraw/common";
+import { useEffect, useLayoutEffect, useState } from "react";
+
+import type { Theme } from "@excalidraw/element/types";
+
 import { STORAGE_KEYS } from "./app_constants";
 
 const getDarkThemeMediaQuery = (): MediaQueryList | undefined =>
diff --git a/excalidraw-app/vite.config.mts b/excalidraw-app/vite.config.mts
index 57a4d19ec..f10e742f5 100644
--- a/excalidraw-app/vite.config.mts
+++ b/excalidraw-app/vite.config.mts
@@ -23,6 +23,22 @@ export default defineConfig(({ mode }) => {
     envDir: "../",
     resolve: {
       alias: [
+        {
+          find: /^@excalidraw\/common$/,
+          replacement: path.resolve(__dirname, "../packages/common/src/index.ts"),
+        },
+        {
+          find: /^@excalidraw\/common\/(.*?)/,
+          replacement: path.resolve(__dirname, "../packages/common/src/$1"),
+        },
+        {
+          find: /^@excalidraw\/element$/,
+          replacement: path.resolve(__dirname, "../packages/element/src/index.ts"),
+        },
+        {
+          find: /^@excalidraw\/element\/(.*?)/,
+          replacement: path.resolve(__dirname, "../packages/element/src/$1"),
+        },
         {
           find: /^@excalidraw\/excalidraw$/,
           replacement: path.resolve(__dirname, "../packages/excalidraw/index.tsx"),
@@ -31,21 +47,21 @@ export default defineConfig(({ mode }) => {
           find: /^@excalidraw\/excalidraw\/(.*?)/,
           replacement: path.resolve(__dirname, "../packages/excalidraw/$1"),
         },
-        {
-          find: /^@excalidraw\/utils$/,
-          replacement: path.resolve(__dirname, "../packages/utils/index.ts"),
-        },
-        {
-          find: /^@excalidraw\/utils\/(.*?)/,
-          replacement: path.resolve(__dirname, "../packages/utils/$1"),
-        },
         {
           find: /^@excalidraw\/math$/,
-          replacement: path.resolve(__dirname, "../packages/math/index.ts"),
+          replacement: path.resolve(__dirname, "../packages/math/src/index.ts"),
         },
         {
           find: /^@excalidraw\/math\/(.*?)/,
-          replacement: path.resolve(__dirname, "../packages/math/$1"),
+          replacement: path.resolve(__dirname, "../packages/math/src/$1"),
+        },
+        {
+          find: /^@excalidraw\/utils$/,
+          replacement: path.resolve(__dirname, "../packages/utils/src/index.ts"),
+        },
+        {
+          find: /^@excalidraw\/utils\/(.*?)/,
+          replacement: path.resolve(__dirname, "../packages/utils/src/$1"),
         },
       ],
     },
diff --git a/package.json b/package.json
index aaa8027a8..6f57f7e7c 100644
--- a/package.json
+++ b/package.json
@@ -4,9 +4,7 @@
   "packageManager": "yarn@1.22.22",
   "workspaces": [
     "excalidraw-app",
-    "packages/excalidraw",
-    "packages/utils",
-    "packages/math",
+    "packages/*",
     "examples/*"
   ],
   "devDependencies": {
@@ -26,6 +24,7 @@
     "dotenv": "16.0.1",
     "eslint-config-prettier": "8.5.0",
     "eslint-config-react-app": "7.0.1",
+    "eslint-plugin-import": "2.31.0",
     "eslint-plugin-prettier": "3.3.1",
     "http-server": "14.1.1",
     "husky": "7.0.4",
diff --git a/packages/common/.eslintrc.json b/packages/common/.eslintrc.json
new file mode 100644
index 000000000..a31aaa147
--- /dev/null
+++ b/packages/common/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": ["../eslintrc.base.json"]
+}
diff --git a/packages/common/README.md b/packages/common/README.md
new file mode 100644
index 000000000..76435e6ff
--- /dev/null
+++ b/packages/common/README.md
@@ -0,0 +1,19 @@
+# @excalidraw/common
+
+## Install
+
+```bash
+npm install @excalidraw/common
+```
+
+If you prefer Yarn over npm, use this command to install the Excalidraw utils package:
+
+```bash
+yarn add @excalidraw/common
+```
+
+With PNPM, similarly install the package with this command:
+
+```bash
+pnpm add @excalidraw/common
+```
diff --git a/packages/common/global.d.ts b/packages/common/global.d.ts
new file mode 100644
index 000000000..16ade7a7d
--- /dev/null
+++ b/packages/common/global.d.ts
@@ -0,0 +1,3 @@
+/// <reference types="vite/client" />
+import "@excalidraw/excalidraw/global";
+import "@excalidraw/excalidraw/css";
diff --git a/packages/common/package.json b/packages/common/package.json
new file mode 100644
index 000000000..3e5f6413a
--- /dev/null
+++ b/packages/common/package.json
@@ -0,0 +1,56 @@
+{
+  "name": "@excalidraw/common",
+  "version": "0.1.0",
+  "type": "module",
+  "types": "./dist/types/common/src/index.d.ts",
+  "main": "./dist/prod/index.js",
+  "module": "./dist/prod/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/types/common/src/index.d.ts",
+      "development": "./dist/dev/index.js",
+      "production": "./dist/prod/index.js",
+      "default": "./dist/prod/index.js"
+    },
+    "./*": {
+      "types": "./../common/dist/types/common/src/*.d.ts"
+    }
+  },
+  "files": [
+    "dist/*"
+  ],
+  "description": "Excalidraw common functions, constants, etc.",
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "keywords": [
+    "excalidraw",
+    "excalidraw-utils"
+  ],
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not ie <= 11",
+      "not op_mini all",
+      "not safari < 12",
+      "not kaios <= 2.5",
+      "not edge < 79",
+      "not chrome < 70",
+      "not and_uc < 13",
+      "not samsung < 10"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "bugs": "https://github.com/excalidraw/excalidraw/issues",
+  "repository": "https://github.com/excalidraw/excalidraw",
+  "scripts": {
+    "gen:types": "rm -rf types && tsc",
+    "build:esm": "rm -rf dist && node ../../scripts/buildBase.js && yarn gen:types"
+  }
+}
diff --git a/packages/excalidraw/binaryheap.ts b/packages/common/src/binary-heap.ts
similarity index 98%
rename from packages/excalidraw/binaryheap.ts
rename to packages/common/src/binary-heap.ts
index 0bacadceb..788a05c22 100644
--- a/packages/excalidraw/binaryheap.ts
+++ b/packages/common/src/binary-heap.ts
@@ -1,4 +1,4 @@
-export default class BinaryHeap<T> {
+export class BinaryHeap<T> {
   private content: T[] = [];
 
   constructor(private scoreFunction: (node: T) => number) {}
diff --git a/packages/excalidraw/colors.ts b/packages/common/src/colors.ts
similarity index 99%
rename from packages/excalidraw/colors.ts
rename to packages/common/src/colors.ts
index e4cd67a94..84d04bcf4 100644
--- a/packages/excalidraw/colors.ts
+++ b/packages/common/src/colors.ts
@@ -1,4 +1,5 @@
 import oc from "open-color";
+
 import type { Merge } from "./utility-types";
 
 // FIXME can't put to utils.ts rn because of circular dependency
diff --git a/packages/excalidraw/constants.ts b/packages/common/src/constants.ts
similarity index 98%
rename from packages/excalidraw/constants.ts
rename to packages/common/src/constants.ts
index 616ced1a7..31046f1ef 100644
--- a/packages/excalidraw/constants.ts
+++ b/packages/common/src/constants.ts
@@ -1,5 +1,9 @@
-import type { AppProps, AppState } from "./types";
-import type { ExcalidrawElement, FontFamilyValues } from "./element/types";
+import type {
+  ExcalidrawElement,
+  FontFamilyValues,
+} from "@excalidraw/element/types";
+import type { AppProps, AppState } from "@excalidraw/excalidraw/types";
+
 import { COLOR_PALETTE } from "./colors";
 
 export const isDarwin = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
diff --git a/packages/excalidraw/fonts/FontMetadata.ts b/packages/common/src/font-metadata.ts
similarity index 76%
rename from packages/excalidraw/fonts/FontMetadata.ts
rename to packages/common/src/font-metadata.ts
index e93380e81..de4cc57bf 100644
--- a/packages/excalidraw/fonts/FontMetadata.ts
+++ b/packages/common/src/font-metadata.ts
@@ -1,11 +1,9 @@
-import type { JSX } from "react";
-import {
-  FreedrawIcon,
-  FontFamilyNormalIcon,
-  FontFamilyHeadingIcon,
-  FontFamilyCodeIcon,
-} from "../components/icons";
-import { FONT_FAMILY, FONT_FAMILY_FALLBACKS } from "../constants";
+import type {
+  ExcalidrawTextElement,
+  FontFamilyValues,
+} from "@excalidraw/element/types";
+
+import { FONT_FAMILY, FONT_FAMILY_FALLBACKS } from "./constants";
 
 /**
  * Encapsulates font metrics with additional font metadata.
@@ -22,8 +20,6 @@ export interface FontMetadata {
     /** harcoded unitless line-height, https://github.com/excalidraw/excalidraw/pull/6360#issuecomment-1477635971 */
     lineHeight: number;
   };
-  /** element to be displayed as an icon  */
-  icon?: JSX.Element;
   /** flag to indicate a deprecated font */
   deprecated?: true;
   /** flag to indicate a server-side only font */
@@ -42,7 +38,6 @@ export const FONT_METADATA: Record<number, FontMetadata> = {
       descender: -374,
       lineHeight: 1.25,
     },
-    icon: FreedrawIcon,
   },
   [FONT_FAMILY.Nunito]: {
     metrics: {
@@ -51,7 +46,6 @@ export const FONT_METADATA: Record<number, FontMetadata> = {
       descender: -353,
       lineHeight: 1.35,
     },
-    icon: FontFamilyNormalIcon,
   },
   [FONT_FAMILY["Lilita One"]]: {
     metrics: {
@@ -60,7 +54,6 @@ export const FONT_METADATA: Record<number, FontMetadata> = {
       descender: -220,
       lineHeight: 1.15,
     },
-    icon: FontFamilyHeadingIcon,
   },
   [FONT_FAMILY["Comic Shanns"]]: {
     metrics: {
@@ -69,7 +62,6 @@ export const FONT_METADATA: Record<number, FontMetadata> = {
       descender: -250,
       lineHeight: 1.25,
     },
-    icon: FontFamilyCodeIcon,
   },
   [FONT_FAMILY.Virgil]: {
     metrics: {
@@ -78,7 +70,6 @@ export const FONT_METADATA: Record<number, FontMetadata> = {
       descender: -374,
       lineHeight: 1.25,
     },
-    icon: FreedrawIcon,
     deprecated: true,
   },
   [FONT_FAMILY.Helvetica]: {
@@ -88,7 +79,6 @@ export const FONT_METADATA: Record<number, FontMetadata> = {
       descender: -471,
       lineHeight: 1.15,
     },
-    icon: FontFamilyNormalIcon,
     deprecated: true,
     local: true,
   },
@@ -99,7 +89,6 @@ export const FONT_METADATA: Record<number, FontMetadata> = {
       descender: -480,
       lineHeight: 1.2,
     },
-    icon: FontFamilyCodeIcon,
     deprecated: true,
   },
   [FONT_FAMILY["Liberation Sans"]]: {
@@ -148,3 +137,34 @@ export const GOOGLE_FONTS_RANGES = {
 
 /** local protocol to skip the local font from registering or inlining */
 export const LOCAL_FONT_PROTOCOL = "local:";
+
+/**
+ * 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_METADATA[fontFamily]?.metrics ||
+    FONT_METADATA[FONT_FAMILY.Excalifont].metrics;
+
+  const fontSizeEm = fontSize / unitsPerEm;
+  const lineGap =
+    (lineHeightPx - fontSizeEm * ascender + fontSizeEm * descender) / 2;
+
+  const verticalOffset = fontSizeEm * ascender + lineGap;
+  return verticalOffset;
+};
+
+/**
+ * Gets line height for a selected family.
+ */
+export const getLineHeight = (fontFamily: FontFamilyValues) => {
+  const { lineHeight } =
+    FONT_METADATA[fontFamily]?.metrics ||
+    FONT_METADATA[FONT_FAMILY.Excalifont].metrics;
+
+  return lineHeight as ExcalidrawTextElement["lineHeight"];
+};
diff --git a/packages/common/src/index.ts b/packages/common/src/index.ts
new file mode 100644
index 000000000..d896ba98e
--- /dev/null
+++ b/packages/common/src/index.ts
@@ -0,0 +1,11 @@
+export * from "./binary-heap";
+export * from "./colors";
+export * from "./constants";
+export * from "./font-metadata";
+export * from "./queue";
+export * from "./keys";
+export * from "./points";
+export * from "./promise-pool";
+export * from "./random";
+export * from "./url";
+export * from "./utils";
diff --git a/packages/excalidraw/keys.ts b/packages/common/src/keys.ts
similarity index 99%
rename from packages/excalidraw/keys.ts
rename to packages/common/src/keys.ts
index 2088f89d6..948e7f568 100644
--- a/packages/excalidraw/keys.ts
+++ b/packages/common/src/keys.ts
@@ -1,4 +1,5 @@
 import { isDarwin } from "./constants";
+
 import type { ValueOf } from "./utility-types";
 
 export const CODES = {
diff --git a/packages/excalidraw/points.ts b/packages/common/src/points.ts
similarity index 81%
rename from packages/excalidraw/points.ts
rename to packages/common/src/points.ts
index 9d48857db..e8f988203 100644
--- a/packages/excalidraw/points.ts
+++ b/packages/common/src/points.ts
@@ -4,6 +4,8 @@ import {
   type LocalPoint,
 } from "@excalidraw/math";
 
+import type { NullableGridSize } from "@excalidraw/excalidraw/types";
+
 export const getSizeFromPoints = (
   points: readonly (GlobalPoint | LocalPoint)[],
 ) => {
@@ -61,3 +63,18 @@ export const rescalePoints = <Point extends GlobalPoint | LocalPoint>(
 
   return nextPoints;
 };
+
+// TODO: Rounding this point causes some shake when free drawing
+export const getGridPoint = (
+  x: number,
+  y: number,
+  gridSize: NullableGridSize,
+): [number, number] => {
+  if (gridSize) {
+    return [
+      Math.round(x / gridSize) * gridSize,
+      Math.round(y / gridSize) * gridSize,
+    ];
+  }
+  return [x, y];
+};
diff --git a/packages/common/src/promise-pool.ts b/packages/common/src/promise-pool.ts
new file mode 100644
index 000000000..79d22d8af
--- /dev/null
+++ b/packages/common/src/promise-pool.ts
@@ -0,0 +1,50 @@
+import Pool from "es6-promise-pool";
+
+// extending the missing types
+// relying on the [Index, T] to keep a correct order
+type TPromisePool<T, Index = number> = Pool<[Index, T][]> & {
+  addEventListener: (
+    type: "fulfilled",
+    listener: (event: { data: { result: [Index, T] } }) => void,
+  ) => (event: { data: { result: [Index, T] } }) => void;
+  removeEventListener: (
+    type: "fulfilled",
+    listener: (event: { data: { result: [Index, T] } }) => void,
+  ) => void;
+};
+
+export class PromisePool<T> {
+  private readonly pool: TPromisePool<T>;
+  private readonly entries: Record<number, T> = {};
+
+  constructor(
+    source: IterableIterator<Promise<void | readonly [number, T]>>,
+    concurrency: number,
+  ) {
+    this.pool = new Pool(
+      source as unknown as () => void | PromiseLike<[number, T][]>,
+      concurrency,
+    ) as TPromisePool<T>;
+  }
+
+  public all() {
+    const listener = (event: { data: { result: void | [number, T] } }) => {
+      if (event.data.result) {
+        // by default pool does not return the results, so we are gathering them manually
+        // with the correct call order (represented by the index in the tuple)
+        const [index, value] = event.data.result;
+        this.entries[index] = value;
+      }
+    };
+
+    this.pool.addEventListener("fulfilled", listener);
+
+    return this.pool.start().then(() => {
+      setTimeout(() => {
+        this.pool.removeEventListener("fulfilled", listener);
+      });
+
+      return Object.values(this.entries);
+    });
+  }
+}
diff --git a/packages/excalidraw/queue.ts b/packages/common/src/queue.ts
similarity index 90%
rename from packages/excalidraw/queue.ts
rename to packages/common/src/queue.ts
index 9cac2c5e9..2043f5e06 100644
--- a/packages/excalidraw/queue.ts
+++ b/packages/common/src/queue.ts
@@ -1,6 +1,8 @@
+import { promiseTry, resolvablePromise } from ".";
+
+import type { ResolvablePromise } from ".";
+
 import type { MaybePromise } from "./utility-types";
-import type { ResolvablePromise } from "./utils";
-import { promiseTry, resolvablePromise } from "./utils";
 
 type Job<T, TArgs extends unknown[]> = (...args: TArgs) => MaybePromise<T>;
 
diff --git a/packages/excalidraw/random.ts b/packages/common/src/random.ts
similarity index 99%
rename from packages/excalidraw/random.ts
rename to packages/common/src/random.ts
index 851bc28ec..4a4424a76 100644
--- a/packages/excalidraw/random.ts
+++ b/packages/common/src/random.ts
@@ -1,5 +1,6 @@
-import { Random } from "roughjs/bin/math";
 import { nanoid } from "nanoid";
+import { Random } from "roughjs/bin/math";
+
 import { isTestEnv } from "./utils";
 
 let random = new Random(Date.now());
diff --git a/packages/excalidraw/data/url.ts b/packages/common/src/url.ts
similarity index 94%
rename from packages/excalidraw/data/url.ts
rename to packages/common/src/url.ts
index 2ab553bb8..eaa89633a 100644
--- a/packages/excalidraw/data/url.ts
+++ b/packages/common/src/url.ts
@@ -1,5 +1,6 @@
 import { sanitizeUrl } from "@braintree/sanitize-url";
-import { escapeDoubleQuotes } from "../utils";
+
+import { escapeDoubleQuotes } from "./utils";
 
 export const normalizeLink = (link: string) => {
   link = link.trim();
diff --git a/packages/excalidraw/utility-types.ts b/packages/common/src/utility-types.ts
similarity index 100%
rename from packages/excalidraw/utility-types.ts
rename to packages/common/src/utility-types.ts
diff --git a/packages/excalidraw/utils.ts b/packages/common/src/utils.ts
similarity index 94%
rename from packages/excalidraw/utils.ts
rename to packages/common/src/utils.ts
index e3e18eb93..10837a02f 100644
--- a/packages/excalidraw/utils.ts
+++ b/packages/common/src/utils.ts
@@ -1,28 +1,33 @@
-import Pool from "es6-promise-pool";
 import { average } from "@excalidraw/math";
-import { COLOR_PALETTE } from "./colors";
-import type { EVENT } from "./constants";
-import {
-  DEFAULT_VERSION,
-  FONT_FAMILY,
-  getFontFamilyFallbacks,
-  isDarwin,
-  WINDOWS_EMOJI_FALLBACK_FONT,
-} from "./constants";
+
 import type {
   ExcalidrawBindableElement,
   FontFamilyValues,
   FontString,
-} from "./element/types";
+} from "@excalidraw/element/types";
+
 import type {
   ActiveTool,
   AppState,
   ToolType,
   UnsubscribeCallback,
   Zoom,
-} from "./types";
+} from "@excalidraw/excalidraw/types";
+
+import { COLOR_PALETTE } from "./colors";
+import {
+  DEFAULT_VERSION,
+  ENV,
+  FONT_FAMILY,
+  getFontFamilyFallbacks,
+  isDarwin,
+  WINDOWS_EMOJI_FALLBACK_FONT,
+} from "./constants";
+
 import type { MaybePromise, ResolutionType } from "./utility-types";
 
+import type { EVENT } from "./constants";
+
 let mockDateTime: string | null = null;
 
 export const setDateTimeForTests = (dateTime: string) => {
@@ -167,7 +172,7 @@ export const throttleRAF = <T extends any[]>(
   };
 
   const ret = (...args: T) => {
-    if (import.meta.env.MODE === "test") {
+    if (isTestEnv()) {
       fn(...args);
       return;
     }
@@ -728,9 +733,9 @@ export const arrayToList = <T>(array: readonly T[]): Node<T>[] =>
     return acc;
   }, [] as Node<T>[]);
 
-export const isTestEnv = () => import.meta.env.MODE === "test";
+export const isTestEnv = () => import.meta.env.MODE === ENV.TEST;
 
-export const isDevEnv = () => import.meta.env.MODE === "development";
+export const isDevEnv = () => import.meta.env.MODE === ENV.DEVELOPMENT;
 
 export const isServerEnv = () =>
   typeof process !== "undefined" && !!process?.env?.NODE_ENV;
@@ -1184,54 +1189,6 @@ export const safelyParseJSON = (json: string): Record<string, any> | null => {
     return null;
   }
 };
-// extending the missing types
-// relying on the [Index, T] to keep a correct order
-type TPromisePool<T, Index = number> = Pool<[Index, T][]> & {
-  addEventListener: (
-    type: "fulfilled",
-    listener: (event: { data: { result: [Index, T] } }) => void,
-  ) => (event: { data: { result: [Index, T] } }) => void;
-  removeEventListener: (
-    type: "fulfilled",
-    listener: (event: { data: { result: [Index, T] } }) => void,
-  ) => void;
-};
-
-export class PromisePool<T> {
-  private readonly pool: TPromisePool<T>;
-  private readonly entries: Record<number, T> = {};
-
-  constructor(
-    source: IterableIterator<Promise<void | readonly [number, T]>>,
-    concurrency: number,
-  ) {
-    this.pool = new Pool(
-      source as unknown as () => void | PromiseLike<[number, T][]>,
-      concurrency,
-    ) as TPromisePool<T>;
-  }
-
-  public all() {
-    const listener = (event: { data: { result: void | [number, T] } }) => {
-      if (event.data.result) {
-        // by default pool does not return the results, so we are gathering them manually
-        // with the correct call order (represented by the index in the tuple)
-        const [index, value] = event.data.result;
-        this.entries[index] = value;
-      }
-    };
-
-    this.pool.addEventListener("fulfilled", listener);
-
-    return this.pool.start().then(() => {
-      setTimeout(() => {
-        this.pool.removeEventListener("fulfilled", listener);
-      });
-
-      return Object.values(this.entries);
-    });
-  }
-}
 
 /**
  * use when you need to render unsafe string as HTML attribute, but MAKE SURE
diff --git a/packages/excalidraw/keys.test.ts b/packages/common/tests/keys.test.ts
similarity index 99%
rename from packages/excalidraw/keys.test.ts
rename to packages/common/tests/keys.test.ts
index df2a36746..bed2a0536 100644
--- a/packages/excalidraw/keys.test.ts
+++ b/packages/common/tests/keys.test.ts
@@ -1,4 +1,4 @@
-import { KEYS, matchKey } from "./keys";
+import { KEYS, matchKey } from "../src/keys";
 
 describe("key matcher", async () => {
   it("should not match unexpected key", async () => {
diff --git a/packages/excalidraw/queue.test.ts b/packages/common/tests/queue.test.ts
similarity index 97%
rename from packages/excalidraw/queue.test.ts
rename to packages/common/tests/queue.test.ts
index 66a10583e..d7623b354 100644
--- a/packages/excalidraw/queue.test.ts
+++ b/packages/common/tests/queue.test.ts
@@ -1,4 +1,4 @@
-import { Queue } from "./queue";
+import { Queue } from "../src/queue";
 
 describe("Queue", () => {
   const calls: any[] = [];
diff --git a/packages/excalidraw/data/url.test.tsx b/packages/common/tests/url.test.tsx
similarity index 96%
rename from packages/excalidraw/data/url.test.tsx
rename to packages/common/tests/url.test.tsx
index 9a40aad04..b04423456 100644
--- a/packages/excalidraw/data/url.test.tsx
+++ b/packages/common/tests/url.test.tsx
@@ -1,4 +1,4 @@
-import { normalizeLink } from "./url";
+import { normalizeLink } from "../src/url";
 
 describe("normalizeLink", () => {
   // NOTE not an extensive XSS test suite, just to check if we're not
diff --git a/packages/common/tsconfig.json b/packages/common/tsconfig.json
new file mode 100644
index 000000000..6450145b1
--- /dev/null
+++ b/packages/common/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist/types"
+  },
+  "include": ["src/**/*", "global.d.ts"],
+  "exclude": ["**/*.test.*", "tests", "types", "examples", "dist"]
+}
diff --git a/packages/element/.eslintrc.json b/packages/element/.eslintrc.json
new file mode 100644
index 000000000..a31aaa147
--- /dev/null
+++ b/packages/element/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": ["../eslintrc.base.json"]
+}
diff --git a/packages/element/README.md b/packages/element/README.md
new file mode 100644
index 000000000..9f003a9ea
--- /dev/null
+++ b/packages/element/README.md
@@ -0,0 +1,19 @@
+# @excalidraw/element
+
+## Install
+
+```bash
+npm install @excalidraw/element
+```
+
+If you prefer Yarn over npm, use this command to install the Excalidraw utils package:
+
+```bash
+yarn add @excalidraw/element
+```
+
+With PNPM, similarly install the package with this command:
+
+```bash
+pnpm add @excalidraw/element
+```
diff --git a/packages/element/global.d.ts b/packages/element/global.d.ts
new file mode 100644
index 000000000..16ade7a7d
--- /dev/null
+++ b/packages/element/global.d.ts
@@ -0,0 +1,3 @@
+/// <reference types="vite/client" />
+import "@excalidraw/excalidraw/global";
+import "@excalidraw/excalidraw/css";
diff --git a/packages/element/package.json b/packages/element/package.json
new file mode 100644
index 000000000..ae810e374
--- /dev/null
+++ b/packages/element/package.json
@@ -0,0 +1,56 @@
+{
+  "name": "@excalidraw/element",
+  "version": "0.1.0",
+  "type": "module",
+  "types": "./dist/types/element/src/index.d.ts",
+  "main": "./dist/prod/index.js",
+  "module": "./dist/prod/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/types/element/src/index.d.ts",
+      "development": "./dist/dev/index.js",
+      "production": "./dist/prod/index.js",
+      "default": "./dist/prod/index.js"
+    },
+    "./*": {
+      "types": "./../element/dist/types/element/src/*.d.ts"
+    }
+  },
+  "files": [
+    "dist/*"
+  ],
+  "description": "Excalidraw elements-related logic",
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "keywords": [
+    "excalidraw",
+    "excalidraw-utils"
+  ],
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not ie <= 11",
+      "not op_mini all",
+      "not safari < 12",
+      "not kaios <= 2.5",
+      "not edge < 79",
+      "not chrome < 70",
+      "not and_uc < 13",
+      "not samsung < 10"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "bugs": "https://github.com/excalidraw/excalidraw/issues",
+  "repository": "https://github.com/excalidraw/excalidraw",
+  "scripts": {
+    "gen:types": "rm -rf types && tsc",
+    "build:esm": "rm -rf dist && node ../../scripts/buildBase.js && yarn gen:types"
+  }
+}
diff --git a/packages/excalidraw/scene/Shape.ts b/packages/element/src/Shape.ts
similarity index 96%
rename from packages/excalidraw/scene/Shape.ts
rename to packages/element/src/Shape.ts
index 9c49db0c2..4def41957 100644
--- a/packages/excalidraw/scene/Shape.ts
+++ b/packages/element/src/Shape.ts
@@ -1,31 +1,38 @@
-import type { Point as RoughPoint } from "roughjs/bin/geometry";
-import type { Drawable, Options } from "roughjs/bin/core";
-import type { RoughGenerator } from "roughjs/bin/generator";
-import { getDiamondPoints, getArrowheadPoints } from "../element";
-import type { ElementShapes } from "./types";
-import type {
-  ExcalidrawElement,
-  NonDeletedExcalidrawElement,
-  ExcalidrawSelectionElement,
-  ExcalidrawLinearElement,
-  Arrowhead,
-} from "../element/types";
-import { generateFreeDrawShape } from "../renderer/renderElement";
-import { isTransparent, assertNever } from "../utils";
 import { simplify } from "points-on-curve";
-import { ROUGHNESS } from "../constants";
+
+import { pointFrom, pointDistance, type LocalPoint } from "@excalidraw/math";
+import { ROUGHNESS, isTransparent, assertNever } from "@excalidraw/common";
+
+import type { Mutable } from "@excalidraw/common/utility-types";
+
+import type { EmbedsValidationStatus } from "@excalidraw/excalidraw/types";
+import type { ElementShapes } from "@excalidraw/excalidraw/scene/types";
+
 import {
   isElbowArrow,
   isEmbeddableElement,
   isIframeElement,
   isIframeLikeElement,
   isLinearElement,
-} from "../element/typeChecks";
+} from "./typeChecks";
+import { getCornerRadius, isPathALoop } from "./shapes";
+import { headingForPointIsHorizontal } from "./heading";
+
 import { canChangeRoundness } from "./comparisons";
-import type { EmbedsValidationStatus } from "../types";
-import { pointFrom, pointDistance, type LocalPoint } from "@excalidraw/math";
-import { getCornerRadius, isPathALoop } from "../shapes";
-import { headingForPointIsHorizontal } from "../element/heading";
+import { generateFreeDrawShape } from "./renderElement";
+import { getArrowheadPoints, getDiamondPoints } from "./bounds";
+
+import type {
+  ExcalidrawElement,
+  NonDeletedExcalidrawElement,
+  ExcalidrawSelectionElement,
+  ExcalidrawLinearElement,
+  Arrowhead,
+} from "./types";
+
+import type { Drawable, Options } from "roughjs/bin/core";
+import type { RoughGenerator } from "roughjs/bin/generator";
+import type { Point as RoughPoint } from "roughjs/bin/geometry";
 
 const getDashArrayDashed = (strokeWidth: number) => [8, 8 + strokeWidth];
 
@@ -508,7 +515,10 @@ export const _generateElementShape = (
 
       if (isPathALoop(element.points)) {
         // generate rough polygon to fill freedraw shape
-        const simplifiedPoints = simplify(element.points, 0.75);
+        const simplifiedPoints = simplify(
+          element.points as Mutable<LocalPoint[]>,
+          0.75,
+        );
         shape = generator.curve(simplifiedPoints as [number, number][], {
           ...generateRoughOptions(element),
           stroke: "none",
diff --git a/packages/excalidraw/scene/ShapeCache.ts b/packages/element/src/ShapeCache.ts
similarity index 86%
rename from packages/excalidraw/scene/ShapeCache.ts
rename to packages/element/src/ShapeCache.ts
index 39d388a7b..8f0c94324 100644
--- a/packages/excalidraw/scene/ShapeCache.ts
+++ b/packages/element/src/ShapeCache.ts
@@ -1,14 +1,23 @@
-import type { Drawable } from "roughjs/bin/core";
 import { RoughGenerator } from "roughjs/bin/generator";
+
+import { COLOR_PALETTE } from "@excalidraw/common";
+
 import type {
-  ExcalidrawElement,
-  ExcalidrawSelectionElement,
-} from "../element/types";
-import { elementWithCanvasCache } from "../renderer/renderElement";
+  AppState,
+  EmbedsValidationStatus,
+} from "@excalidraw/excalidraw/types";
+import type {
+  ElementShape,
+  ElementShapes,
+} from "@excalidraw/excalidraw/scene/types";
+
 import { _generateElementShape } from "./Shape";
-import type { ElementShape, ElementShapes } from "./types";
-import { COLOR_PALETTE } from "../colors";
-import type { AppState, EmbedsValidationStatus } from "../types";
+
+import { elementWithCanvasCache } from "./renderElement";
+
+import type { ExcalidrawElement, ExcalidrawSelectionElement } from "./types";
+
+import type { Drawable } from "roughjs/bin/core";
 
 export class ShapeCache {
   private static rg = new RoughGenerator();
diff --git a/packages/excalidraw/align.ts b/packages/element/src/align.ts
similarity index 84%
rename from packages/excalidraw/align.ts
rename to packages/element/src/align.ts
index 113ba274c..61535b434 100644
--- a/packages/excalidraw/align.ts
+++ b/packages/element/src/align.ts
@@ -1,10 +1,12 @@
-import type { ElementsMap, ExcalidrawElement } from "./element/types";
-import { mutateElement } from "./element/mutateElement";
-import type { BoundingBox } from "./element/bounds";
-import { getCommonBoundingBox } from "./element/bounds";
+import type Scene from "@excalidraw/excalidraw/scene/Scene";
+
+import { updateBoundElements } from "./binding";
+import { getCommonBoundingBox } from "./bounds";
+import { mutateElement } from "./mutateElement";
 import { getMaximumGroups } from "./groups";
-import { updateBoundElements } from "./element/binding";
-import type Scene from "./scene/Scene";
+
+import type { BoundingBox } from "./bounds";
+import type { ElementsMap, ExcalidrawElement } from "./types";
 
 export interface Alignment {
   position: "start" | "center" | "end";
diff --git a/packages/excalidraw/element/binding.ts b/packages/element/src/binding.ts
similarity index 87%
rename from packages/excalidraw/element/binding.ts
rename to packages/element/src/binding.ts
index e716b860f..c84d80577 100644
--- a/packages/excalidraw/element/binding.ts
+++ b/packages/element/src/binding.ts
@@ -1,3 +1,74 @@
+import {
+  KEYS,
+  arrayToMap,
+  isBindingFallthroughEnabled,
+  tupleToCoors,
+  invariant,
+  isDevEnv,
+  isTestEnv,
+} from "@excalidraw/common";
+
+import {
+  lineSegment,
+  pointFrom,
+  pointRotateRads,
+  type GlobalPoint,
+  vectorFromPoint,
+  pointDistanceSq,
+  clamp,
+  pointDistance,
+  pointFromVector,
+  vectorScale,
+  vectorNormalize,
+  vectorCross,
+  pointsEqual,
+  lineSegmentIntersectionPoints,
+  PRECISION,
+} from "@excalidraw/math";
+
+import { isPointOnShape } from "@excalidraw/utils/collision";
+
+import type { LocalPoint, Radians } from "@excalidraw/math";
+
+import type Scene from "@excalidraw/excalidraw/scene/Scene";
+
+import type { AppState } from "@excalidraw/excalidraw/types";
+
+import type { Mutable } from "@excalidraw/common/utility-types";
+
+import {
+  getCenterForBounds,
+  getElementBounds,
+  doBoundsIntersect,
+} from "./bounds";
+import { intersectElementWithLineSegment } from "./collision";
+import { distanceToBindableElement } from "./distance";
+import {
+  headingForPointFromElement,
+  headingIsHorizontal,
+  vectorToHeading,
+  type Heading,
+} from "./heading";
+import { LinearElementEditor } from "./linearElementEditor";
+import { mutateElement } from "./mutateElement";
+import { getBoundTextElement, handleBindTextResize } from "./textElement";
+import {
+  isArrowElement,
+  isBindableElement,
+  isBoundToContainer,
+  isElbowArrow,
+  isFixedPointBinding,
+  isFrameLikeElement,
+  isLinearElement,
+  isRectanguloidElement,
+  isTextElement,
+} from "./typeChecks";
+
+import { aabbForElement, getElementShape, pointInsideBounds } from "./shapes";
+import { updateElbowArrowPoints } from "./elbowArrow";
+
+import type { Bounds } from "./bounds";
+import type { ElementUpdate } from "./mutateElement";
 import type {
   ExcalidrawBindableElement,
   ExcalidrawElement,
@@ -16,69 +87,6 @@ import type {
   FixedPointBinding,
 } from "./types";
 
-import type { Bounds } from "./bounds";
-import {
-  getCenterForBounds,
-  getElementBounds,
-  doBoundsIntersect,
-} from "./bounds";
-import type { AppState } from "../types";
-import { isPointOnShape } from "@excalidraw/utils/collision";
-import {
-  isArrowElement,
-  isBindableElement,
-  isBindingElement,
-  isBoundToContainer,
-  isElbowArrow,
-  isFixedPointBinding,
-  isFrameLikeElement,
-  isLinearElement,
-  isRectanguloidElement,
-  isTextElement,
-} from "./typeChecks";
-import type { ElementUpdate } from "./mutateElement";
-import { mutateElement } from "./mutateElement";
-import type Scene from "../scene/Scene";
-import { LinearElementEditor } from "./linearElementEditor";
-import {
-  arrayToMap,
-  isBindingFallthroughEnabled,
-  tupleToCoors,
-} from "../utils";
-import { KEYS } from "../keys";
-import { getBoundTextElement, handleBindTextResize } from "./textElement";
-import { aabbForElement, getElementShape, pointInsideBounds } from "../shapes";
-import {
-  compareHeading,
-  HEADING_DOWN,
-  HEADING_RIGHT,
-  HEADING_UP,
-  headingForPointFromElement,
-  vectorToHeading,
-  type Heading,
-} from "./heading";
-import type { LocalPoint, Radians } from "@excalidraw/math";
-import {
-  lineSegment,
-  pointFrom,
-  pointRotateRads,
-  type GlobalPoint,
-  vectorFromPoint,
-  pointDistanceSq,
-  clamp,
-  pointDistance,
-  pointFromVector,
-  vectorScale,
-  vectorNormalize,
-  vectorCross,
-  pointsEqual,
-  lineSegmentIntersectionPoints,
-  round,
-  PRECISION,
-} from "@excalidraw/math";
-import { intersectElementWithLineSegment } from "./collision";
-import { distanceToBindableElement } from "./distance";
-
 export type SuggestedBinding =
   | NonDeleted<ExcalidrawBindableElement>
   | SuggestedPointBinding;
@@ -484,32 +492,31 @@ export const bindLinearElement = (
     return;
   }
 
-  const binding: PointBinding | FixedPointBinding = {
+  let binding: PointBinding | FixedPointBinding = {
     elementId: hoveredElement.id,
-    ...(isElbowArrow(linearElement)
-      ? {
-          ...calculateFixedPointForElbowArrowBinding(
-            linearElement,
-            hoveredElement,
-            startOrEnd,
-            elementsMap,
-          ),
-          focus: 0,
-          gap: 0,
-        }
-      : {
-          ...normalizePointBinding(
-            calculateFocusAndGap(
-              linearElement,
-              hoveredElement,
-              startOrEnd,
-              elementsMap,
-            ),
-            hoveredElement,
-          ),
-        }),
+    ...normalizePointBinding(
+      calculateFocusAndGap(
+        linearElement,
+        hoveredElement,
+        startOrEnd,
+        elementsMap,
+      ),
+      hoveredElement,
+    ),
   };
 
+  if (isElbowArrow(linearElement)) {
+    binding = {
+      ...binding,
+      ...calculateFixedPointForElbowArrowBinding(
+        linearElement,
+        hoveredElement,
+        startOrEnd,
+        elementsMap,
+      ),
+    };
+  }
+
   mutateElement(linearElement, {
     [startOrEnd === "start" ? "startBinding" : "endBinding"]: binding,
   });
@@ -835,14 +842,19 @@ export const updateBoundElements = (
       }> => update !== null,
     );
 
-    LinearElementEditor.movePoints(element, updates, {
-      ...(changedElement.id === element.startBinding?.elementId
-        ? { startBinding: bindings.startBinding }
-        : {}),
-      ...(changedElement.id === element.endBinding?.elementId
-        ? { endBinding: bindings.endBinding }
-        : {}),
-    });
+    LinearElementEditor.movePoints(
+      element,
+      updates,
+      {
+        ...(changedElement.id === element.startBinding?.elementId
+          ? { startBinding: bindings.startBinding }
+          : {}),
+        ...(changedElement.id === element.endBinding?.elementId
+          ? { endBinding: bindings.endBinding }
+          : {}),
+      },
+      elementsMap as NonDeletedSceneElementsMap,
+    );
 
     const boundText = getBoundTextElement(element, elementsMap);
     if (boundText && !boundText.isDeleted) {
@@ -923,103 +935,104 @@ const getDistanceForBinding = (
 
 export const bindPointToSnapToElementOutline = (
   arrow: ExcalidrawElbowArrowElement,
-  bindableElement: ExcalidrawBindableElement | undefined,
+  bindableElement: ExcalidrawBindableElement,
   startOrEnd: "start" | "end",
 ): GlobalPoint => {
-  const aabb = bindableElement && aabbForElement(bindableElement);
+  if (isDevEnv() || isTestEnv()) {
+    invariant(arrow.points.length > 1, "Arrow should have at least 2 points");
+  }
+
+  const aabb = aabbForElement(bindableElement);
   const localP =
     arrow.points[startOrEnd === "start" ? 0 : arrow.points.length - 1];
   const globalP = pointFrom<GlobalPoint>(
     arrow.x + localP[0],
     arrow.y + localP[1],
   );
-  const p = isRectanguloidElement(bindableElement)
+  const edgePoint = isRectanguloidElement(bindableElement)
     ? avoidRectangularCorner(bindableElement, globalP)
     : globalP;
+  const elbowed = isElbowArrow(arrow);
+  const center = getCenterForBounds(aabb);
+  const adjacentPointIdx = startOrEnd === "start" ? 1 : arrow.points.length - 2;
+  const adjacentPoint = pointRotateRads(
+    pointFrom<GlobalPoint>(
+      arrow.x + arrow.points[adjacentPointIdx][0],
+      arrow.y + arrow.points[adjacentPointIdx][1],
+    ),
+    center,
+    arrow.angle ?? 0,
+  );
 
-  if (bindableElement && aabb) {
-    const center = getCenterForBounds(aabb);
-
-    const intersection = intersectElementWithLineSegment(
+  let intersection: GlobalPoint | null = null;
+  if (elbowed) {
+    const isHorizontal = headingIsHorizontal(
+      headingForPointFromElement(bindableElement, aabb, globalP),
+    );
+    const otherPoint = pointFrom<GlobalPoint>(
+      isHorizontal ? center[0] : edgePoint[0],
+      !isHorizontal ? center[1] : edgePoint[1],
+    );
+    intersection = intersectElementWithLineSegment(
       bindableElement,
       lineSegment(
-        center,
+        otherPoint,
         pointFromVector(
           vectorScale(
-            vectorNormalize(vectorFromPoint(p, center)),
-            Math.max(bindableElement.width, bindableElement.height),
+            vectorNormalize(vectorFromPoint(edgePoint, otherPoint)),
+            Math.max(bindableElement.width, bindableElement.height) * 2,
           ),
-          center,
+          otherPoint,
         ),
       ),
     )[0];
-    const currentDistance = pointDistance(p, center);
-    const fullDistance = Math.max(
-      pointDistance(intersection ?? p, center),
-      PRECISION,
-    );
-    const ratio = round(currentDistance / fullDistance, 6);
-
-    switch (true) {
-      case ratio > 0.9:
-        if (
-          currentDistance - fullDistance > FIXED_BINDING_DISTANCE ||
-          // Too close to determine vector from intersection to p
-          pointDistanceSq(p, intersection) < PRECISION
-        ) {
-          return p;
-        }
-
-        return pointFromVector(
+  } else {
+    intersection = intersectElementWithLineSegment(
+      bindableElement,
+      lineSegment(
+        adjacentPoint,
+        pointFromVector(
           vectorScale(
-            vectorNormalize(vectorFromPoint(p, intersection ?? center)),
-            ratio > 1 ? FIXED_BINDING_DISTANCE : -FIXED_BINDING_DISTANCE,
+            vectorNormalize(vectorFromPoint(edgePoint, adjacentPoint)),
+            pointDistance(edgePoint, adjacentPoint) +
+              Math.max(bindableElement.width, bindableElement.height) * 2,
           ),
-          intersection ?? center,
-        );
-
-      default:
-        return headingToMidBindPoint(p, bindableElement, aabb);
-    }
+          adjacentPoint,
+        ),
+      ),
+      FIXED_BINDING_DISTANCE,
+    ).sort(
+      (g, h) =>
+        pointDistanceSq(g, adjacentPoint) - pointDistanceSq(h, adjacentPoint),
+    )[0];
   }
 
-  return p;
-};
-
-const headingToMidBindPoint = (
-  p: GlobalPoint,
-  bindableElement: ExcalidrawBindableElement,
-  aabb: Bounds,
-): GlobalPoint => {
-  const center = getCenterForBounds(aabb);
-  const heading = vectorToHeading(vectorFromPoint(p, center));
-
-  switch (true) {
-    case compareHeading(heading, HEADING_UP):
-      return pointRotateRads(
-        pointFrom((aabb[0] + aabb[2]) / 2 + 0.1, aabb[1]),
-        center,
-        bindableElement.angle,
-      );
-    case compareHeading(heading, HEADING_RIGHT):
-      return pointRotateRads(
-        pointFrom(aabb[2], (aabb[1] + aabb[3]) / 2 + 0.1),
-        center,
-        bindableElement.angle,
-      );
-    case compareHeading(heading, HEADING_DOWN):
-      return pointRotateRads(
-        pointFrom((aabb[0] + aabb[2]) / 2 - 0.1, aabb[3]),
-        center,
-        bindableElement.angle,
-      );
-    default:
-      return pointRotateRads(
-        pointFrom(aabb[0], (aabb[1] + aabb[3]) / 2 - 0.1),
-        center,
-        bindableElement.angle,
-      );
+  if (
+    !intersection ||
+    // Too close to determine vector from intersection to edgePoint
+    pointDistanceSq(edgePoint, intersection) < PRECISION
+  ) {
+    return edgePoint;
   }
+
+  if (elbowed) {
+    const scalar =
+      pointDistanceSq(edgePoint, center) -
+        pointDistanceSq(intersection, center) >
+      0
+        ? FIXED_BINDING_DISTANCE
+        : -FIXED_BINDING_DISTANCE;
+
+    return pointFromVector(
+      vectorScale(
+        vectorNormalize(vectorFromPoint(edgePoint, intersection)),
+        scalar,
+      ),
+      intersection,
+    );
+  }
+
+  return edgePoint;
 };
 
 export const avoidRectangularCorner = (
@@ -1269,39 +1282,35 @@ const updateBoundPoint = (
       pointDistance(adjacentPoint, edgePointAbsolute) +
       pointDistance(adjacentPoint, center) +
       Math.max(bindableElement.width, bindableElement.height) * 2;
-    const intersections = intersectElementWithLineSegment(
-      bindableElement,
-      lineSegment<GlobalPoint>(
-        adjacentPoint,
-        pointFromVector(
-          vectorScale(
-            vectorNormalize(vectorFromPoint(focusPointAbsolute, adjacentPoint)),
-            interceptorLength,
-          ),
+    const intersections = [
+      ...intersectElementWithLineSegment(
+        bindableElement,
+        lineSegment<GlobalPoint>(
           adjacentPoint,
+          pointFromVector(
+            vectorScale(
+              vectorNormalize(
+                vectorFromPoint(focusPointAbsolute, adjacentPoint),
+              ),
+              interceptorLength,
+            ),
+            adjacentPoint,
+          ),
         ),
+        binding.gap,
+      ).sort(
+        (g, h) =>
+          pointDistanceSq(g, adjacentPoint) - pointDistanceSq(h, adjacentPoint),
       ),
-      binding.gap,
-    ).sort(
-      (g, h) =>
-        pointDistanceSq(g, adjacentPoint) - pointDistanceSq(h, adjacentPoint),
-    );
-
-    // debugClear();
-    // debugDrawPoint(intersections[0], { color: "red", permanent: true });
-    // debugDrawLine(
-    //   lineSegment<GlobalPoint>(
-    //     adjacentPoint,
-    //     pointFromVector(
-    //       vectorScale(
-    //         vectorNormalize(vectorFromPoint(focusPointAbsolute, adjacentPoint)),
-    //         interceptorLength,
-    //       ),
-    //       adjacentPoint,
-    //     ),
-    //   ),
-    //   { permanent: true, color: "green" },
-    // );
+      // Fallback when arrow doesn't point to the shape
+      pointFromVector(
+        vectorScale(
+          vectorNormalize(vectorFromPoint(focusPointAbsolute, adjacentPoint)),
+          pointDistance(adjacentPoint, edgePointAbsolute),
+        ),
+        adjacentPoint,
+      ),
+    ];
 
     if (intersections.length > 1) {
       // The adjacent point is outside the shape (+ gap)
@@ -1413,107 +1422,75 @@ const getLinearElementEdgeCoors = (
   );
 };
 
-// We need to:
-// 1: Update elements not selected to point to duplicated elements
-// 2: Update duplicated elements to point to other duplicated elements
 export const fixBindingsAfterDuplication = (
-  sceneElements: readonly ExcalidrawElement[],
-  oldElements: readonly ExcalidrawElement[],
+  newElements: ExcalidrawElement[],
   oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>,
-  // There are three copying mechanisms: Copy-paste, duplication and alt-drag.
-  // Only when alt-dragging the new "duplicates" act as the "old", while
-  // the "old" elements act as the "new copy" - essentially working reverse
-  // to the other two.
-  duplicatesServeAsOld?: "duplicatesServeAsOld" | undefined,
-): void => {
-  // First collect all the binding/bindable elements, so we only update
-  // each once, regardless of whether they were duplicated or not.
-  const allBoundElementIds: Set<ExcalidrawElement["id"]> = new Set();
-  const allBindableElementIds: Set<ExcalidrawElement["id"]> = new Set();
-  const shouldReverseRoles = duplicatesServeAsOld === "duplicatesServeAsOld";
-  const duplicateIdToOldId = new Map(
-    [...oldIdToDuplicatedId].map(([key, value]) => [value, key]),
-  );
-  oldElements.forEach((oldElement) => {
-    const { boundElements } = oldElement;
-    if (boundElements != null && boundElements.length > 0) {
-      boundElements.forEach((boundElement) => {
-        if (shouldReverseRoles && !oldIdToDuplicatedId.has(boundElement.id)) {
-          allBoundElementIds.add(boundElement.id);
-        }
+  duplicatedElementsMap: NonDeletedSceneElementsMap,
+) => {
+  for (const element of newElements) {
+    if ("boundElements" in element && element.boundElements) {
+      Object.assign(element, {
+        boundElements: element.boundElements.reduce(
+          (
+            acc: Mutable<NonNullable<ExcalidrawElement["boundElements"]>>,
+            binding,
+          ) => {
+            const newBindingId = oldIdToDuplicatedId.get(binding.id);
+            if (newBindingId) {
+              acc.push({ ...binding, id: newBindingId });
+            }
+            return acc;
+          },
+          [],
+        ),
       });
-      allBindableElementIds.add(oldIdToDuplicatedId.get(oldElement.id)!);
     }
-    if (isBindingElement(oldElement)) {
-      if (oldElement.startBinding != null) {
-        const { elementId } = oldElement.startBinding;
-        if (shouldReverseRoles && !oldIdToDuplicatedId.has(elementId)) {
-          allBindableElementIds.add(elementId);
-        }
-      }
-      if (oldElement.endBinding != null) {
-        const { elementId } = oldElement.endBinding;
-        if (shouldReverseRoles && !oldIdToDuplicatedId.has(elementId)) {
-          allBindableElementIds.add(elementId);
-        }
-      }
-      if (oldElement.startBinding != null || oldElement.endBinding != null) {
-        allBoundElementIds.add(oldIdToDuplicatedId.get(oldElement.id)!);
-      }
+
+    if ("containerId" in element && element.containerId) {
+      Object.assign(element, {
+        containerId: oldIdToDuplicatedId.get(element.containerId) ?? null,
+      });
     }
-  });
 
-  // Update the linear elements
-  (
-    sceneElements.filter(({ id }) =>
-      allBoundElementIds.has(id),
-    ) as ExcalidrawLinearElement[]
-  ).forEach((element) => {
-    const { startBinding, endBinding } = element;
-    mutateElement(element, {
-      startBinding: newBindingAfterDuplication(
-        startBinding,
-        oldIdToDuplicatedId,
-      ),
-      endBinding: newBindingAfterDuplication(endBinding, oldIdToDuplicatedId),
-    });
-  });
+    if ("endBinding" in element && element.endBinding) {
+      const newEndBindingId = oldIdToDuplicatedId.get(
+        element.endBinding.elementId,
+      );
+      Object.assign(element, {
+        endBinding: newEndBindingId
+          ? {
+              ...element.endBinding,
+              elementId: newEndBindingId,
+            }
+          : null,
+      });
+    }
+    if ("startBinding" in element && element.startBinding) {
+      const newEndBindingId = oldIdToDuplicatedId.get(
+        element.startBinding.elementId,
+      );
+      Object.assign(element, {
+        startBinding: newEndBindingId
+          ? {
+              ...element.startBinding,
+              elementId: newEndBindingId,
+            }
+          : null,
+      });
+    }
 
-  // Update the bindable shapes
-  sceneElements
-    .filter(({ id }) => allBindableElementIds.has(id))
-    .forEach((bindableElement) => {
-      const oldElementId = duplicateIdToOldId.get(bindableElement.id);
-      const boundElements = sceneElements.find(
-        ({ id }) => id === oldElementId,
-      )?.boundElements;
-
-      if (boundElements && boundElements.length > 0) {
-        mutateElement(bindableElement, {
-          boundElements: boundElements.map((boundElement) =>
-            oldIdToDuplicatedId.has(boundElement.id)
-              ? {
-                  id: oldIdToDuplicatedId.get(boundElement.id)!,
-                  type: boundElement.type,
-                }
-              : boundElement,
-          ),
-        });
-      }
-    });
-};
-
-const newBindingAfterDuplication = (
-  binding: PointBinding | null,
-  oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>,
-): PointBinding | null => {
-  if (binding == null) {
-    return null;
+    if (isElbowArrow(element)) {
+      Object.assign(
+        element,
+        updateElbowArrowPoints(element, duplicatedElementsMap, {
+          points: [
+            element.points[0],
+            element.points[element.points.length - 1],
+          ],
+        }),
+      );
+    }
   }
-  return {
-    ...binding,
-    elementId: oldIdToDuplicatedId.get(binding.elementId) ?? binding.elementId,
-  };
 };
 
 export const fixBindingsAfterDeletion = (
@@ -1724,21 +1701,6 @@ const determineFocusDistance = (
     )
     .sort((g, h) => Math.abs(g) - Math.abs(h));
 
-  // debugClear();
-  // [
-  //   lineSegmentIntersectionPoints(rotatedInterceptor, interceptees[0]),
-  //   lineSegmentIntersectionPoints(rotatedInterceptor, interceptees[1]),
-  // ]
-  //   .filter((p): p is GlobalPoint => p !== null)
-  //   .forEach((p) => debugDrawPoint(p, { color: "black", permanent: true }));
-  // debugDrawPoint(determineFocusPoint(element, ordered[0] ?? 0, rotatedA), {
-  //   color: "red",
-  //   permanent: true,
-  // });
-  // debugDrawLine(rotatedInterceptor, { color: "green", permanent: true });
-  // debugDrawLine(interceptees[0], { color: "red", permanent: true });
-  // debugDrawLine(interceptees[1], { color: "red", permanent: true });
-
   const signedDistanceRatio = ordered[0] ?? 0;
 
   return signedDistanceRatio;
diff --git a/packages/excalidraw/element/bounds.ts b/packages/element/src/bounds.ts
similarity index 98%
rename from packages/excalidraw/element/bounds.ts
rename to packages/element/src/bounds.ts
index 06f977023..bab1a1871 100644
--- a/packages/excalidraw/element/bounds.ts
+++ b/packages/element/src/bounds.ts
@@ -1,3 +1,42 @@
+import rough from "roughjs/bin/rough";
+
+import { rescalePoints, arrayToMap, invariant } from "@excalidraw/common";
+
+import {
+  degreesToRadians,
+  lineSegment,
+  pointFrom,
+  pointDistance,
+  pointFromArray,
+  pointRotateRads,
+} from "@excalidraw/math";
+
+import { getCurvePathOps } from "@excalidraw/utils/shape";
+
+import type {
+  Degrees,
+  GlobalPoint,
+  LineSegment,
+  LocalPoint,
+  Radians,
+} from "@excalidraw/math";
+
+import type { AppState } from "@excalidraw/excalidraw/types";
+
+import type { Mutable } from "@excalidraw/common/utility-types";
+
+import { ShapeCache } from "./ShapeCache";
+import { generateRoughOptions } from "./Shape";
+import { LinearElementEditor } from "./linearElementEditor";
+import { getBoundTextElement, getContainerElement } from "./textElement";
+import {
+  isArrowElement,
+  isBoundToContainer,
+  isFreeDrawElement,
+  isLinearElement,
+  isTextElement,
+} from "./typeChecks";
+
 import type {
   ExcalidrawElement,
   ExcalidrawLinearElement,
@@ -7,40 +46,8 @@ import type {
   ExcalidrawTextElementWithContainer,
   ElementsMap,
 } from "./types";
-import rough from "roughjs/bin/rough";
-import type { Point as RoughPoint } from "roughjs/bin/geometry";
 import type { Drawable, Op } from "roughjs/bin/core";
-import type { AppState } from "../types";
-import { generateRoughOptions } from "../scene/Shape";
-import {
-  isArrowElement,
-  isBoundToContainer,
-  isFreeDrawElement,
-  isLinearElement,
-  isTextElement,
-} from "./typeChecks";
-import { rescalePoints } from "../points";
-import { getBoundTextElement, getContainerElement } from "./textElement";
-import { LinearElementEditor } from "./linearElementEditor";
-import { ShapeCache } from "../scene/ShapeCache";
-import { arrayToMap, invariant } from "../utils";
-import type {
-  Degrees,
-  GlobalPoint,
-  LineSegment,
-  LocalPoint,
-  Radians,
-} from "@excalidraw/math";
-import {
-  degreesToRadians,
-  lineSegment,
-  pointFrom,
-  pointDistance,
-  pointFromArray,
-  pointRotateRads,
-} from "@excalidraw/math";
-import type { Mutable } from "../utility-types";
-import { getCurvePathOps } from "@excalidraw/utils/geometry/shape";
+import type { Point as RoughPoint } from "roughjs/bin/geometry";
 
 export type RectangleBox = {
   x: number;
diff --git a/packages/excalidraw/element/collision.ts b/packages/element/src/collision.ts
similarity index 81%
rename from packages/excalidraw/element/collision.ts
rename to packages/element/src/collision.ts
index b0a2ce9a5..0fabe9839 100644
--- a/packages/excalidraw/element/collision.ts
+++ b/packages/element/src/collision.ts
@@ -1,31 +1,4 @@
-import type {
-  ElementsMap,
-  ExcalidrawDiamondElement,
-  ExcalidrawElement,
-  ExcalidrawEllipseElement,
-  ExcalidrawRectangleElement,
-  ExcalidrawRectanguloidElement,
-} from "./types";
-import { getElementBounds } from "./bounds";
-import type { FrameNameBounds } from "../types";
-import type { GeometricShape } from "@excalidraw/utils/geometry/shape";
-import { getPolygonShape } from "@excalidraw/utils/geometry/shape";
-import { isPointInShape, isPointOnShape } from "@excalidraw/utils/collision";
-import { isTransparent } from "../utils";
-import {
-  hasBoundTextElement,
-  isIframeLikeElement,
-  isImageElement,
-  isTextElement,
-} from "./typeChecks";
-import { getBoundTextShape, isPathALoop } from "../shapes";
-import type {
-  GlobalPoint,
-  LineSegment,
-  LocalPoint,
-  Polygon,
-  Radians,
-} from "@excalidraw/math";
+import { isTransparent } from "@excalidraw/common";
 import {
   curveIntersectLineSegment,
   isPointWithinBounds,
@@ -36,15 +9,49 @@ import {
   pointRotateRads,
   pointsEqual,
 } from "@excalidraw/math";
+
 import {
   ellipse,
   ellipseLineIntersectionPoints,
 } from "@excalidraw/math/ellipse";
+
+import { isPointInShape, isPointOnShape } from "@excalidraw/utils/collision";
+import { getPolygonShape } from "@excalidraw/utils/shape";
+
+import type {
+  GlobalPoint,
+  LineSegment,
+  LocalPoint,
+  Polygon,
+  Radians,
+} from "@excalidraw/math";
+
+import type { GeometricShape } from "@excalidraw/utils/shape";
+
+import type { FrameNameBounds } from "@excalidraw/excalidraw/types";
+
+import { getBoundTextShape, isPathALoop } from "./shapes";
+import { getElementBounds } from "./bounds";
+import {
+  hasBoundTextElement,
+  isIframeLikeElement,
+  isImageElement,
+  isTextElement,
+} from "./typeChecks";
 import {
   deconstructDiamondElement,
   deconstructRectanguloidElement,
 } from "./utils";
 
+import type {
+  ElementsMap,
+  ExcalidrawDiamondElement,
+  ExcalidrawElement,
+  ExcalidrawEllipseElement,
+  ExcalidrawRectangleElement,
+  ExcalidrawRectanguloidElement,
+} from "./types";
+
 export const shouldTestInside = (element: ExcalidrawElement) => {
   if (element.type === "arrow") {
     return false;
@@ -205,28 +212,28 @@ const intersectRectanguloidWithLineSegment = (
   const [sides, corners] = deconstructRectanguloidElement(element, offset);
 
   return (
-    [
-      // Test intersection against the sides, keep only the valid
-      // intersection points and rotate them back to scene space
-      ...sides
-        .map((s) =>
-          lineSegmentIntersectionPoints(
-            lineSegment<GlobalPoint>(rotatedA, rotatedB),
-            s,
-          ),
-        )
-        .filter((x) => x != null)
-        .map((j) => pointRotateRads<GlobalPoint>(j!, center, element.angle)),
+    // Test intersection against the sides, keep only the valid
+    // intersection points and rotate them back to scene space
+    sides
+      .map((s) =>
+        lineSegmentIntersectionPoints(
+          lineSegment<GlobalPoint>(rotatedA, rotatedB),
+          s,
+        ),
+      )
+      .filter((x) => x != null)
+      .map((j) => pointRotateRads<GlobalPoint>(j!, center, element.angle))
       // Test intersection against the corners which are cubic bezier curves,
       // keep only the valid intersection points and rotate them back to scene
       // space
-      ...corners
-        .flatMap((t) =>
-          curveIntersectLineSegment(t, lineSegment(rotatedA, rotatedB)),
-        )
-        .filter((i) => i != null)
-        .map((j) => pointRotateRads(j, center, element.angle)),
-    ]
+      .concat(
+        corners
+          .flatMap((t) =>
+            curveIntersectLineSegment(t, lineSegment(rotatedA, rotatedB)),
+          )
+          .filter((i) => i != null)
+          .map((j) => pointRotateRads(j, center, element.angle)),
+      )
       // Remove duplicates
       .filter(
         (p, idx, points) => points.findIndex((d) => pointsEqual(p, d)) === idx,
@@ -259,25 +266,25 @@ const intersectDiamondWithLineSegment = (
   const [sides, curves] = deconstructDiamondElement(element, offset);
 
   return (
-    [
-      ...sides
-        .map((s) =>
-          lineSegmentIntersectionPoints(
-            lineSegment<GlobalPoint>(rotatedA, rotatedB),
-            s,
-          ),
-        )
-        .filter((p): p is GlobalPoint => p != null)
-        // Rotate back intersection points
-        .map((p) => pointRotateRads<GlobalPoint>(p!, center, element.angle)),
-      ...curves
-        .flatMap((p) =>
-          curveIntersectLineSegment(p, lineSegment(rotatedA, rotatedB)),
-        )
-        .filter((p) => p != null)
-        // Rotate back intersection points
-        .map((p) => pointRotateRads(p, center, element.angle)),
-    ]
+    sides
+      .map((s) =>
+        lineSegmentIntersectionPoints(
+          lineSegment<GlobalPoint>(rotatedA, rotatedB),
+          s,
+        ),
+      )
+      .filter((p): p is GlobalPoint => p != null)
+      // Rotate back intersection points
+      .map((p) => pointRotateRads<GlobalPoint>(p!, center, element.angle))
+      .concat(
+        curves
+          .flatMap((p) =>
+            curveIntersectLineSegment(p, lineSegment(rotatedA, rotatedB)),
+          )
+          .filter((p) => p != null)
+          // Rotate back intersection points
+          .map((p) => pointRotateRads(p, center, element.angle)),
+      )
       // Remove duplicates
       .filter(
         (p, idx, points) => points.findIndex((d) => pointsEqual(p, d)) === idx,
diff --git a/packages/excalidraw/scene/comparisons.ts b/packages/element/src/comparisons.ts
similarity index 94%
rename from packages/excalidraw/scene/comparisons.ts
rename to packages/element/src/comparisons.ts
index 9af3e66cb..75fac889d 100644
--- a/packages/excalidraw/scene/comparisons.ts
+++ b/packages/element/src/comparisons.ts
@@ -1,4 +1,4 @@
-import type { ElementOrToolType } from "../types";
+import type { ElementOrToolType } from "@excalidraw/excalidraw/types";
 
 export const hasBackground = (type: ElementOrToolType) =>
   type === "rectangle" ||
diff --git a/packages/excalidraw/element/containerCache.ts b/packages/element/src/containerCache.ts
similarity index 100%
rename from packages/excalidraw/element/containerCache.ts
rename to packages/element/src/containerCache.ts
diff --git a/packages/excalidraw/element/cropElement.ts b/packages/element/src/cropElement.ts
similarity index 99%
rename from packages/excalidraw/element/cropElement.ts
rename to packages/element/src/cropElement.ts
index b10980209..dd75f9360 100644
--- a/packages/excalidraw/element/cropElement.ts
+++ b/packages/element/src/cropElement.ts
@@ -1,4 +1,3 @@
-import { type Point } from "points-on-curve";
 import {
   type Radians,
   pointFrom,
@@ -13,6 +12,13 @@ import {
   clamp,
   isCloseTo,
 } from "@excalidraw/math";
+import { type Point } from "points-on-curve";
+
+import {
+  getElementAbsoluteCoords,
+  getResizedElementAbsoluteCoords,
+} from "./bounds";
+
 import type { TransformHandleType } from "./transformHandles";
 import type {
   ElementsMap,
@@ -21,10 +27,6 @@ import type {
   ImageCrop,
   NonDeleted,
 } from "./types";
-import {
-  getElementAbsoluteCoords,
-  getResizedElementAbsoluteCoords,
-} from "./bounds";
 
 export const MINIMAL_CROP_SIZE = 10;
 
diff --git a/packages/excalidraw/element/distance.ts b/packages/element/src/distance.ts
similarity index 99%
rename from packages/excalidraw/element/distance.ts
rename to packages/element/src/distance.ts
index 0010ab953..d9db939e4 100644
--- a/packages/excalidraw/element/distance.ts
+++ b/packages/element/src/distance.ts
@@ -1,21 +1,25 @@
-import type { GlobalPoint, Radians } from "@excalidraw/math";
 import {
   curvePointDistance,
   distanceToLineSegment,
   pointFrom,
   pointRotateRads,
 } from "@excalidraw/math";
+
 import { ellipse, ellipseDistanceFromPoint } from "@excalidraw/math/ellipse";
+
+import type { GlobalPoint, Radians } from "@excalidraw/math";
+
+import {
+  deconstructDiamondElement,
+  deconstructRectanguloidElement,
+} from "./utils";
+
 import type {
   ExcalidrawBindableElement,
   ExcalidrawDiamondElement,
   ExcalidrawEllipseElement,
   ExcalidrawRectanguloidElement,
 } from "./types";
-import {
-  deconstructDiamondElement,
-  deconstructRectanguloidElement,
-} from "./utils";
 
 export const distanceToBindableElement = (
   element: ExcalidrawBindableElement,
diff --git a/packages/excalidraw/distribute.ts b/packages/element/src/distribute.ts
similarity index 92%
rename from packages/excalidraw/distribute.ts
rename to packages/element/src/distribute.ts
index 368b2f24d..da79837da 100644
--- a/packages/excalidraw/distribute.ts
+++ b/packages/element/src/distribute.ts
@@ -1,7 +1,9 @@
-import { newElementWith } from "./element/mutateElement";
+import { getCommonBoundingBox } from "./bounds";
+import { newElementWith } from "./mutateElement";
+
 import { getMaximumGroups } from "./groups";
-import { getCommonBoundingBox } from "./element/bounds";
-import type { ElementsMap, ExcalidrawElement } from "./element/types";
+
+import type { ElementsMap, ExcalidrawElement } from "./types";
 
 export interface Distribution {
   space: "between";
diff --git a/packages/excalidraw/element/dragElements.ts b/packages/element/src/dragElements.ts
similarity index 90%
rename from packages/excalidraw/element/dragElements.ts
rename to packages/element/src/dragElements.ts
index bb8fd237e..669417a54 100644
--- a/packages/excalidraw/element/dragElements.ts
+++ b/packages/element/src/dragElements.ts
@@ -1,17 +1,26 @@
-import { updateBoundElements } from "./binding";
-import type { Bounds } from "./bounds";
-import { getCommonBounds } from "./bounds";
-import { mutateElement } from "./mutateElement";
-import { getPerfectElementSize } from "./sizeHelpers";
-import type { NonDeletedExcalidrawElement } from "./types";
+import {
+  TEXT_AUTOWRAP_THRESHOLD,
+  getGridPoint,
+  getFontString,
+} from "@excalidraw/common";
+
 import type {
   AppState,
   NormalizedZoomValue,
   NullableGridSize,
   PointerDownState,
-} from "../types";
+} from "@excalidraw/excalidraw/types";
+
+import type Scene from "@excalidraw/excalidraw/scene/Scene";
+
+import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
+
+import { updateBoundElements } from "./binding";
+import { getCommonBounds } from "./bounds";
+import { mutateElement } from "./mutateElement";
+import { getPerfectElementSize } from "./sizeHelpers";
 import { getBoundTextElement } from "./textElement";
-import type Scene from "../scene/Scene";
+import { getMinTextElementWidth } from "./textMeasurements";
 import {
   isArrowElement,
   isElbowArrow,
@@ -19,10 +28,9 @@ import {
   isImageElement,
   isTextElement,
 } from "./typeChecks";
-import { getFontString } from "../utils";
-import { TEXT_AUTOWRAP_THRESHOLD } from "../constants";
-import { getGridPoint } from "../snapping";
-import { getMinTextElementWidth } from "./textMeasurements";
+
+import type { Bounds } from "./bounds";
+import type { ExcalidrawElement } from "./types";
 
 export const dragSelectedElements = (
   pointerDownState: PointerDownState,
@@ -76,13 +84,20 @@ export const dragSelectedElements = (
     }
   }
 
-  const commonBounds = getCommonBounds(
-    Array.from(elementsToUpdate).map(
-      (el) => pointerDownState.originalElements.get(el.id) ?? el,
-    ),
-  );
+  const origElements: ExcalidrawElement[] = [];
+
+  for (const element of elementsToUpdate) {
+    const origElement = pointerDownState.originalElements.get(element.id);
+    // if original element is not set (e.g. when you duplicate during a drag
+    // operation), exit to avoid undefined behavior
+    if (!origElement) {
+      return;
+    }
+    origElements.push(origElement);
+  }
+
   const adjustedOffset = calculateOffset(
-    commonBounds,
+    getCommonBounds(origElements),
     offset,
     snapOffset,
     gridSize,
diff --git a/packages/element/src/duplicate.ts b/packages/element/src/duplicate.ts
new file mode 100644
index 000000000..5b95f9085
--- /dev/null
+++ b/packages/element/src/duplicate.ts
@@ -0,0 +1,485 @@
+import {
+  ORIG_ID,
+  randomId,
+  randomInteger,
+  arrayToMap,
+  castArray,
+  findLastIndex,
+  getUpdatedTimestamp,
+  isTestEnv,
+} from "@excalidraw/common";
+
+import type { Mutable } from "@excalidraw/common/utility-types";
+
+import type { AppState } from "@excalidraw/excalidraw/types";
+
+import {
+  getElementsInGroup,
+  getNewGroupIdsForDuplication,
+  getSelectedGroupForElement,
+} from "./groups";
+
+import {
+  bindElementsToFramesAfterDuplication,
+  getFrameChildren,
+} from "./frame";
+
+import { normalizeElementOrder } from "./sortElements";
+
+import { bumpVersion } from "./mutateElement";
+
+import {
+  hasBoundTextElement,
+  isBoundToContainer,
+  isFrameLikeElement,
+} from "./typeChecks";
+
+import { getBoundTextElement, getContainerElement } from "./textElement";
+
+import { fixBindingsAfterDuplication } from "./binding";
+
+import type {
+  ElementsMap,
+  ExcalidrawElement,
+  GroupId,
+  NonDeletedSceneElementsMap,
+} from "./types";
+
+/**
+ * Duplicate an element, often used in the alt-drag operation.
+ * Note that this method has gotten a bit complicated since the
+ * introduction of gruoping/ungrouping elements.
+ * @param editingGroupId The current group being edited. The new
+ *                       element will inherit this group and its
+ *                       parents.
+ * @param groupIdMapForOperation A Map that maps old group IDs to
+ *                               duplicated ones. If you are duplicating
+ *                               multiple elements at once, share this map
+ *                               amongst all of them
+ * @param element Element to duplicate
+ * @param overrides Any element properties to override
+ */
+export const duplicateElement = <TElement extends ExcalidrawElement>(
+  editingGroupId: AppState["editingGroupId"],
+  groupIdMapForOperation: Map<GroupId, GroupId>,
+  element: TElement,
+  overrides?: Partial<TElement>,
+  randomizeSeed?: boolean,
+): Readonly<TElement> => {
+  let copy = deepCopyElement(element);
+
+  if (isTestEnv()) {
+    __test__defineOrigId(copy, element.id);
+  }
+
+  copy.id = randomId();
+  copy.updated = getUpdatedTimestamp();
+  if (randomizeSeed) {
+    copy.seed = randomInteger();
+    bumpVersion(copy);
+  }
+
+  copy.groupIds = getNewGroupIdsForDuplication(
+    copy.groupIds,
+    editingGroupId,
+    (groupId) => {
+      if (!groupIdMapForOperation.has(groupId)) {
+        groupIdMapForOperation.set(groupId, randomId());
+      }
+      return groupIdMapForOperation.get(groupId)!;
+    },
+  );
+  if (overrides) {
+    copy = Object.assign(copy, overrides);
+  }
+  return copy;
+};
+
+export const duplicateElements = (
+  opts: {
+    elements: readonly ExcalidrawElement[];
+    randomizeSeed?: boolean;
+    overrides?: (
+      originalElement: ExcalidrawElement,
+    ) => Partial<ExcalidrawElement>;
+  } & (
+    | {
+        /**
+         * Duplicates all elements in array.
+         *
+         * Use this when programmaticaly duplicating elements, without direct
+         * user interaction.
+         */
+        type: "everything";
+      }
+    | {
+        /**
+         * Duplicates specified elements and inserts them back into the array
+         * in specified order.
+         *
+         * Use this when duplicating Scene elements, during user interaction
+         * such as alt-drag or on duplicate action.
+         */
+        type: "in-place";
+        idsOfElementsToDuplicate: Map<
+          ExcalidrawElement["id"],
+          ExcalidrawElement
+        >;
+        appState: {
+          editingGroupId: AppState["editingGroupId"];
+          selectedGroupIds: AppState["selectedGroupIds"];
+        };
+        /**
+         * If true, duplicated elements are inserted _before_ specified
+         * elements. Case: alt-dragging elements to duplicate them.
+         *
+         * TODO: remove this once (if) we stop replacing the original element
+         * with the duplicated one in the scene array.
+         */
+        reverseOrder: boolean;
+      }
+  ),
+) => {
+  let { elements } = opts;
+
+  const appState =
+    "appState" in opts
+      ? opts.appState
+      : ({
+          editingGroupId: null,
+          selectedGroupIds: {},
+        } as const);
+
+  const reverseOrder = opts.type === "in-place" ? opts.reverseOrder : false;
+
+  // Ids of elements that have already been processed so we don't push them
+  // into the array twice if we end up backtracking when retrieving
+  // discontiguous group of elements (can happen due to a bug, or in edge
+  // cases such as a group containing deleted elements which were not selected).
+  //
+  // This is not enough to prevent duplicates, so we do a second loop afterwards
+  // to remove them.
+  //
+  // For convenience we mark even the newly created ones even though we don't
+  // loop over them.
+  const processedIds = new Map<ExcalidrawElement["id"], true>();
+  const groupIdMap = new Map();
+  const newElements: ExcalidrawElement[] = [];
+  const oldElements: ExcalidrawElement[] = [];
+  const oldIdToDuplicatedId = new Map();
+  const duplicatedElementsMap = new Map<string, ExcalidrawElement>();
+  const elementsMap = arrayToMap(elements) as ElementsMap;
+  const _idsOfElementsToDuplicate =
+    opts.type === "in-place"
+      ? opts.idsOfElementsToDuplicate
+      : new Map(elements.map((el) => [el.id, el]));
+
+  // For sanity
+  if (opts.type === "in-place") {
+    for (const groupId of Object.keys(opts.appState.selectedGroupIds)) {
+      elements
+        .filter((el) => el.groupIds?.includes(groupId))
+        .forEach((el) => _idsOfElementsToDuplicate.set(el.id, el));
+    }
+  }
+
+  elements = normalizeElementOrder(elements);
+
+  const elementsWithClones: ExcalidrawElement[] = elements.slice();
+
+  // helper functions
+  // -------------------------------------------------------------------------
+
+  // Used for the heavy lifing of copying a single element, a group of elements
+  // an element with bound text etc.
+  const copyElements = <T extends ExcalidrawElement | ExcalidrawElement[]>(
+    element: T,
+  ): T extends ExcalidrawElement[]
+    ? ExcalidrawElement[]
+    : ExcalidrawElement | null => {
+    const elements = castArray(element);
+
+    const _newElements = elements.reduce(
+      (acc: ExcalidrawElement[], element) => {
+        if (processedIds.has(element.id)) {
+          return acc;
+        }
+
+        processedIds.set(element.id, true);
+
+        const newElement = duplicateElement(
+          appState.editingGroupId,
+          groupIdMap,
+          element,
+          opts.overrides?.(element),
+          opts.randomizeSeed,
+        );
+
+        processedIds.set(newElement.id, true);
+
+        duplicatedElementsMap.set(newElement.id, newElement);
+        oldIdToDuplicatedId.set(element.id, newElement.id);
+
+        oldElements.push(element);
+        newElements.push(newElement);
+
+        acc.push(newElement);
+        return acc;
+      },
+      [],
+    );
+
+    return (
+      Array.isArray(element) ? _newElements : _newElements[0] || null
+    ) as T extends ExcalidrawElement[]
+      ? ExcalidrawElement[]
+      : ExcalidrawElement | null;
+  };
+
+  // Helper to position cloned elements in the Z-order the product needs it
+  const insertBeforeOrAfterIndex = (
+    index: number,
+    elements: ExcalidrawElement | null | ExcalidrawElement[],
+  ) => {
+    if (!elements) {
+      return;
+    }
+
+    if (reverseOrder && index < 1) {
+      elementsWithClones.unshift(...castArray(elements));
+      return;
+    }
+
+    if (!reverseOrder && index > elementsWithClones.length - 1) {
+      elementsWithClones.push(...castArray(elements));
+      return;
+    }
+
+    elementsWithClones.splice(
+      index + (reverseOrder ? 0 : 1),
+      0,
+      ...castArray(elements),
+    );
+  };
+
+  const frameIdsToDuplicate = new Set(
+    elements
+      .filter(
+        (el) => _idsOfElementsToDuplicate.has(el.id) && isFrameLikeElement(el),
+      )
+      .map((el) => el.id),
+  );
+
+  for (const element of elements) {
+    if (processedIds.has(element.id)) {
+      continue;
+    }
+
+    if (!_idsOfElementsToDuplicate.has(element.id)) {
+      continue;
+    }
+
+    // groups
+    // -------------------------------------------------------------------------
+
+    const groupId = getSelectedGroupForElement(appState, element);
+    if (groupId) {
+      const groupElements = getElementsInGroup(elements, groupId).flatMap(
+        (element) =>
+          isFrameLikeElement(element)
+            ? [...getFrameChildren(elements, element.id), element]
+            : [element],
+      );
+
+      const targetIndex = reverseOrder
+        ? elementsWithClones.findIndex((el) => {
+            return el.groupIds?.includes(groupId);
+          })
+        : findLastIndex(elementsWithClones, (el) => {
+            return el.groupIds?.includes(groupId);
+          });
+
+      insertBeforeOrAfterIndex(targetIndex, copyElements(groupElements));
+      continue;
+    }
+
+    // frame duplication
+    // -------------------------------------------------------------------------
+
+    if (element.frameId && frameIdsToDuplicate.has(element.frameId)) {
+      continue;
+    }
+
+    if (isFrameLikeElement(element)) {
+      const frameId = element.id;
+
+      const frameChildren = getFrameChildren(elements, frameId);
+
+      const targetIndex = findLastIndex(elementsWithClones, (el) => {
+        return el.frameId === frameId || el.id === frameId;
+      });
+
+      insertBeforeOrAfterIndex(
+        targetIndex,
+        copyElements([...frameChildren, element]),
+      );
+      continue;
+    }
+
+    // text container
+    // -------------------------------------------------------------------------
+
+    if (hasBoundTextElement(element)) {
+      const boundTextElement = getBoundTextElement(element, elementsMap);
+
+      const targetIndex = findLastIndex(elementsWithClones, (el) => {
+        return (
+          el.id === element.id ||
+          ("containerId" in el && el.containerId === element.id)
+        );
+      });
+
+      if (boundTextElement) {
+        insertBeforeOrAfterIndex(
+          targetIndex + (reverseOrder ? -1 : 0),
+          copyElements([element, boundTextElement]),
+        );
+      } else {
+        insertBeforeOrAfterIndex(targetIndex, copyElements(element));
+      }
+
+      continue;
+    }
+
+    if (isBoundToContainer(element)) {
+      const container = getContainerElement(element, elementsMap);
+
+      const targetIndex = findLastIndex(elementsWithClones, (el) => {
+        return el.id === element.id || el.id === container?.id;
+      });
+
+      if (container) {
+        insertBeforeOrAfterIndex(
+          targetIndex,
+          copyElements([container, element]),
+        );
+      } else {
+        insertBeforeOrAfterIndex(targetIndex, copyElements(element));
+      }
+
+      continue;
+    }
+
+    // default duplication (regular elements)
+    // -------------------------------------------------------------------------
+
+    insertBeforeOrAfterIndex(
+      findLastIndex(elementsWithClones, (el) => el.id === element.id),
+      copyElements(element),
+    );
+  }
+
+  // ---------------------------------------------------------------------------
+
+  fixBindingsAfterDuplication(
+    newElements,
+    oldIdToDuplicatedId,
+    duplicatedElementsMap as NonDeletedSceneElementsMap,
+  );
+
+  bindElementsToFramesAfterDuplication(
+    elementsWithClones,
+    oldElements,
+    oldIdToDuplicatedId,
+  );
+
+  return {
+    newElements,
+    elementsWithClones,
+  };
+};
+
+// Simplified deep clone for the purpose of cloning ExcalidrawElement.
+//
+// Only clones plain objects and arrays. Doesn't clone Date, RegExp, Map, Set,
+// Typed arrays and other non-null objects.
+//
+// Adapted from https://github.com/lukeed/klona
+//
+// The reason for `deepCopyElement()` wrapper is type safety (only allow
+// passing ExcalidrawElement as the top-level argument).
+const _deepCopyElement = (val: any, depth: number = 0) => {
+  // only clone non-primitives
+  if (val == null || typeof val !== "object") {
+    return val;
+  }
+
+  const objectType = Object.prototype.toString.call(val);
+
+  if (objectType === "[object Object]") {
+    const tmp =
+      typeof val.constructor === "function"
+        ? Object.create(Object.getPrototypeOf(val))
+        : {};
+    for (const key in val) {
+      if (val.hasOwnProperty(key)) {
+        // don't copy non-serializable objects like these caches. They'll be
+        // populated when the element is rendered.
+        if (depth === 0 && (key === "shape" || key === "canvas")) {
+          continue;
+        }
+        tmp[key] = _deepCopyElement(val[key], depth + 1);
+      }
+    }
+    return tmp;
+  }
+
+  if (Array.isArray(val)) {
+    let k = val.length;
+    const arr = new Array(k);
+    while (k--) {
+      arr[k] = _deepCopyElement(val[k], depth + 1);
+    }
+    return arr;
+  }
+
+  // we're not cloning non-array & non-plain-object objects because we
+  // don't support them on excalidraw elements yet. If we do, we need to make
+  // sure we start cloning them, so let's warn about it.
+  if (import.meta.env.DEV) {
+    if (
+      objectType !== "[object Object]" &&
+      objectType !== "[object Array]" &&
+      objectType.startsWith("[object ")
+    ) {
+      console.warn(
+        `_deepCloneElement: unexpected object type ${objectType}. This value will not be cloned!`,
+      );
+    }
+  }
+
+  return val;
+};
+
+/**
+ * Clones ExcalidrawElement data structure. Does not regenerate id, nonce, or
+ * any value. The purpose is to to break object references for immutability
+ * reasons, whenever we want to keep the original element, but ensure it's not
+ * mutated.
+ *
+ * Only clones plain objects and arrays. Doesn't clone Date, RegExp, Map, Set,
+ * Typed arrays and other non-null objects.
+ */
+export const deepCopyElement = <T extends ExcalidrawElement>(
+  val: T,
+): Mutable<T> => {
+  return _deepCopyElement(val);
+};
+
+const __test__defineOrigId = (clonedObj: object, origId: string) => {
+  Object.defineProperty(clonedObj, ORIG_ID, {
+    value: origId,
+    writable: false,
+    enumerable: false,
+  });
+};
diff --git a/packages/excalidraw/element/elbowArrow.ts b/packages/element/src/elbowArrow.ts
similarity index 96%
rename from packages/excalidraw/element/elbowArrow.ts
rename to packages/element/src/elbowArrow.ts
index ce8c3d5a6..a70e265bc 100644
--- a/packages/excalidraw/element/elbowArrow.ts
+++ b/packages/element/src/elbowArrow.ts
@@ -12,11 +12,18 @@ import {
   type GlobalPoint,
   type LocalPoint,
 } from "@excalidraw/math";
-import BinaryHeap from "../binaryheap";
-import { getSizeFromPoints } from "../points";
-import { aabbForElement, pointInsideBounds } from "../shapes";
-import { invariant, isAnyTrue, tupleToCoors } from "../utils";
-import type { AppState } from "../types";
+
+import {
+  BinaryHeap,
+  invariant,
+  isAnyTrue,
+  tupleToCoors,
+  getSizeFromPoints,
+  isDevEnv,
+} from "@excalidraw/common";
+
+import type { AppState } from "@excalidraw/excalidraw/types";
+
 import {
   bindPointToSnapToElementOutline,
   FIXED_BINDING_DISTANCE,
@@ -25,8 +32,7 @@ import {
   snapToMid,
   getHoveredElementForBinding,
 } from "./binding";
-import type { Bounds } from "./bounds";
-import type { Heading } from "./heading";
+import { distanceToBindableElement } from "./distance";
 import {
   compareHeading,
   flipHeading,
@@ -46,6 +52,11 @@ import {
   type NonDeletedSceneElementsMap,
   type SceneElementsMap,
 } from "./types";
+
+import { aabbForElement, pointInsideBounds } from "./shapes";
+
+import type { Bounds } from "./bounds";
+import type { Heading } from "./heading";
 import type {
   Arrowhead,
   ElementsMap,
@@ -54,7 +65,6 @@ import type {
   FixedSegment,
   NonDeletedExcalidrawElement,
 } from "./types";
-import { distanceToBindableElement } from "./distance";
 
 type GridAddress = [number, number] & { _brand: "gridaddress" };
 
@@ -235,16 +245,6 @@ const handleSegmentRenormalization = (
                 nextPoints.map((p) =>
                   pointFrom<LocalPoint>(p[0] - arrow.x, p[1] - arrow.y),
                 ),
-                arrow.startBinding &&
-                  getBindableElementForId(
-                    arrow.startBinding.elementId,
-                    elementsMap,
-                  ),
-                arrow.endBinding &&
-                  getBindableElementForId(
-                    arrow.endBinding.elementId,
-                    elementsMap,
-                  ),
               ),
             ) ?? [],
           ),
@@ -255,7 +255,7 @@ const handleSegmentRenormalization = (
       );
     }
 
-    import.meta.env.DEV &&
+    isDevEnv() &&
       invariant(
         validateElbowPoints(nextPoints),
         "Invalid elbow points with fixed segments",
@@ -338,9 +338,6 @@ const handleSegmentRelease = (
           y,
       ),
     ],
-    startBinding &&
-      getBindableElementForId(startBinding.elementId, elementsMap),
-    endBinding && getBindableElementForId(endBinding.elementId, elementsMap),
     { isDragging: false },
   );
 
@@ -980,6 +977,8 @@ export const updateElbowArrowPoints = (
     );
   }
 
+  const fixedSegments = updates.fixedSegments ?? arrow.fixedSegments ?? [];
+
   const updatedPoints: readonly LocalPoint[] = updates.points
     ? updates.points && updates.points.length === 2
       ? arrow.points.map((p, idx) =>
@@ -992,26 +991,36 @@ export const updateElbowArrowPoints = (
       : updates.points.slice()
     : arrow.points.slice();
 
-  // 0. During all element replacement in the scene, we just need to renormalize
+  // During all element replacement in the scene, we just need to renormalize
   // the arrow
   // TODO (dwelle,mtolmacs): Remove this once Scene.getScene() is removed
+  const {
+    startBinding: updatedStartBinding,
+    endBinding: updatedEndBinding,
+    ...restOfTheUpdates
+  } = updates;
   const startBinding =
-    typeof updates.startBinding !== "undefined"
-      ? updates.startBinding
+    typeof updatedStartBinding !== "undefined"
+      ? updatedStartBinding
       : arrow.startBinding;
   const endBinding =
-    typeof updates.endBinding !== "undefined"
-      ? updates.endBinding
+    typeof updatedEndBinding !== "undefined"
+      ? updatedEndBinding
       : arrow.endBinding;
   const startElement =
     startBinding &&
     getBindableElementForId(startBinding.elementId, elementsMap);
   const endElement =
     endBinding && getBindableElementForId(endBinding.elementId, elementsMap);
+  const areUpdatedPointsValid = validateElbowPoints(updatedPoints);
+
   if (
-    (elementsMap.size === 0 && validateElbowPoints(updatedPoints)) ||
-    startElement?.id !== startBinding?.elementId ||
-    endElement?.id !== endBinding?.elementId
+    (startBinding && !startElement && areUpdatedPointsValid) ||
+    (endBinding && !endElement && areUpdatedPointsValid) ||
+    (elementsMap.size === 0 && areUpdatedPointsValid) ||
+    (Object.keys(restOfTheUpdates).length === 0 &&
+      (startElement?.id !== startBinding?.elementId ||
+        endElement?.id !== endBinding?.elementId))
   ) {
     return normalizeArrowElementUpdate(
       updatedPoints.map((p) =>
@@ -1043,12 +1052,22 @@ export const updateElbowArrowPoints = (
     },
     elementsMap,
     updatedPoints,
-    startElement,
-    endElement,
     options,
   );
 
-  const fixedSegments = updates.fixedSegments ?? arrow.fixedSegments ?? [];
+  // 0. During all element replacement in the scene, we just need to renormalize
+  // the arrow
+  // TODO (dwelle,mtolmacs): Remove this once Scene.getScene() is removed
+  if (elementsMap.size === 0 && areUpdatedPointsValid) {
+    return normalizeArrowElementUpdate(
+      updatedPoints.map((p) =>
+        pointFrom<GlobalPoint>(arrow.x + p[0], arrow.y + p[1]),
+      ),
+      arrow.fixedSegments,
+      arrow.startIsSpecial,
+      arrow.endIsSpecial,
+    );
+  }
 
   ////
   // 1. Renormalize the arrow
@@ -1071,7 +1090,8 @@ export const updateElbowArrowPoints = (
         p,
         arrow.points[i] ?? pointFrom<LocalPoint>(Infinity, Infinity),
       ),
-    )
+    ) &&
+    areUpdatedPointsValid
   ) {
     return {};
   }
@@ -1182,8 +1202,6 @@ const getElbowArrowData = (
   },
   elementsMap: NonDeletedSceneElementsMap,
   nextPoints: readonly LocalPoint[],
-  startElement: ExcalidrawBindableElement | null,
-  endElement: ExcalidrawBindableElement | null,
   options?: {
     isDragging?: boolean;
     zoom?: AppState["zoom"];
@@ -1198,8 +1216,8 @@ const getElbowArrowData = (
     GlobalPoint
   >(nextPoints[nextPoints.length - 1], vector(arrow.x, arrow.y));
 
-  let hoveredStartElement = startElement;
-  let hoveredEndElement = endElement;
+  let hoveredStartElement = null;
+  let hoveredEndElement = null;
   if (options?.isDragging) {
     const elements = Array.from(elementsMap.values());
     hoveredStartElement =
@@ -1208,39 +1226,47 @@ const getElbowArrowData = (
         elementsMap,
         elements,
         options?.zoom,
-      ) || startElement;
+      ) || null;
     hoveredEndElement =
       getHoveredElement(
         origEndGlobalPoint,
         elementsMap,
         elements,
         options?.zoom,
-      ) || endElement;
+      ) || null;
+  } else {
+    hoveredStartElement = arrow.startBinding
+      ? getBindableElementForId(arrow.startBinding.elementId, elementsMap) ||
+        null
+      : null;
+    hoveredEndElement = arrow.endBinding
+      ? getBindableElementForId(arrow.endBinding.elementId, elementsMap) || null
+      : null;
   }
 
   const startGlobalPoint = getGlobalPoint(
     {
       ...arrow,
+      type: "arrow",
       elbowed: true,
       points: nextPoints,
     } as ExcalidrawElbowArrowElement,
     "start",
     arrow.startBinding?.fixedPoint,
     origStartGlobalPoint,
-    startElement,
     hoveredStartElement,
     options?.isDragging,
   );
   const endGlobalPoint = getGlobalPoint(
     {
       ...arrow,
+      type: "arrow",
       elbowed: true,
       points: nextPoints,
     } as ExcalidrawElbowArrowElement,
     "end",
     arrow.endBinding?.fixedPoint,
     origEndGlobalPoint,
-    endElement,
     hoveredEndElement,
     options?.isDragging,
   );
@@ -2186,36 +2212,35 @@ const getGlobalPoint = (
   startOrEnd: "start" | "end",
   fixedPointRatio: [number, number] | undefined | null,
   initialPoint: GlobalPoint,
-  boundElement?: ExcalidrawBindableElement | null,
-  hoveredElement?: ExcalidrawBindableElement | null,
+  element?: ExcalidrawBindableElement | null,
   isDragging?: boolean,
 ): GlobalPoint => {
   if (isDragging) {
-    if (hoveredElement) {
+    if (element) {
       const snapPoint = bindPointToSnapToElementOutline(
         arrow,
-        hoveredElement,
+        element,
         startOrEnd,
       );
 
-      return snapToMid(hoveredElement, snapPoint);
+      return snapToMid(element, snapPoint);
     }
 
     return initialPoint;
   }
 
-  if (boundElement) {
+  if (element) {
     const fixedGlobalPoint = getGlobalFixedPointForBindableElement(
       fixedPointRatio || [0, 0],
-      boundElement,
+      element,
     );
 
     // NOTE: Resize scales the binding position point too, so we need to update it
     return Math.abs(
-      distanceToBindableElement(boundElement, fixedGlobalPoint) -
+      distanceToBindableElement(element, fixedGlobalPoint) -
         FIXED_BINDING_DISTANCE,
     ) > 0.01
-      ? bindPointToSnapToElementOutline(arrow, boundElement, startOrEnd)
+      ? bindPointToSnapToElementOutline(arrow, element, startOrEnd)
       : fixedGlobalPoint;
   }
 
diff --git a/packages/excalidraw/element/elementLink.ts b/packages/element/src/elementLink.ts
similarity index 91%
rename from packages/excalidraw/element/elementLink.ts
rename to packages/element/src/elementLink.ts
index 991f9caec..8781e696d 100644
--- a/packages/excalidraw/element/elementLink.ts
+++ b/packages/element/src/elementLink.ts
@@ -2,10 +2,12 @@
  * Create and link between shapes.
  */
 
-import { ELEMENT_LINK_KEY } from "../constants";
-import { normalizeLink } from "../data/url";
-import { elementsAreInSameGroup } from "../groups";
-import type { AppProps, AppState } from "../types";
+import { ELEMENT_LINK_KEY, normalizeLink } from "@excalidraw/common";
+
+import type { AppProps, AppState } from "@excalidraw/excalidraw/types";
+
+import { elementsAreInSameGroup } from "./groups";
+
 import type { ExcalidrawElement } from "./types";
 
 export const defaultGetElementLinkFromSelection: Exclude<
diff --git a/packages/excalidraw/element/embeddable.ts b/packages/element/src/embeddable.ts
similarity index 91%
rename from packages/excalidraw/element/embeddable.ts
rename to packages/element/src/embeddable.ts
index 8265a0b13..e6d6b4af3 100644
--- a/packages/excalidraw/element/embeddable.ts
+++ b/packages/element/src/embeddable.ts
@@ -1,18 +1,22 @@
-import { register } from "../actions/register";
-import { FONT_FAMILY, VERTICAL_ALIGN } from "../constants";
-import type { ExcalidrawProps } from "../types";
-import { escapeDoubleQuotes, getFontString, updateActiveTool } from "../utils";
-import { setCursorForShape } from "../cursor";
+import {
+  FONT_FAMILY,
+  VERTICAL_ALIGN,
+  escapeDoubleQuotes,
+  getFontString,
+} from "@excalidraw/common";
+
+import type { ExcalidrawProps } from "@excalidraw/excalidraw/types";
+import type { MarkRequired } from "@excalidraw/common/utility-types";
+
 import { newTextElement } from "./newElement";
 import { wrapText } from "./textWrapping";
 import { isIframeElement } from "./typeChecks";
+
 import type {
   ExcalidrawElement,
   ExcalidrawIframeLikeElement,
   IframeData,
 } from "./types";
-import type { MarkRequired } from "../utility-types";
-import { CaptureUpdateAction } from "../store";
 
 type IframeDataWithSandbox = MarkRequired<IframeData, "sandbox">;
 
@@ -317,34 +321,6 @@ export const createPlaceholderEmbeddableLabel = (
   });
 };
 
-export const actionSetEmbeddableAsActiveTool = register({
-  name: "setEmbeddableAsActiveTool",
-  trackEvent: { category: "toolbar" },
-  target: "Tool",
-  label: "toolBar.embeddable",
-  perform: (elements, appState, _, app) => {
-    const nextActiveTool = updateActiveTool(appState, {
-      type: "embeddable",
-    });
-
-    setCursorForShape(app.canvas, {
-      ...appState,
-      activeTool: nextActiveTool,
-    });
-
-    return {
-      elements,
-      appState: {
-        ...appState,
-        activeTool: updateActiveTool(appState, {
-          type: "embeddable",
-        }),
-      },
-      captureUpdate: CaptureUpdateAction.EVENTUALLY,
-    };
-  },
-});
-
 const matchHostname = (
   url: string,
   /** using a Set assumes it already contains normalized bare domains */
diff --git a/packages/excalidraw/element/flowchart.ts b/packages/element/src/flowchart.ts
similarity index 97%
rename from packages/excalidraw/element/flowchart.ts
rename to packages/element/src/flowchart.ts
index 09f006dd0..8ee2ba530 100644
--- a/packages/excalidraw/element/flowchart.ts
+++ b/packages/element/src/flowchart.ts
@@ -1,3 +1,14 @@
+import { KEYS, invariant, toBrandedType } from "@excalidraw/common";
+
+import { type GlobalPoint, pointFrom, type LocalPoint } from "@excalidraw/math";
+
+import type {
+  AppState,
+  PendingExcalidrawElements,
+} from "@excalidraw/excalidraw/types";
+
+import { bindLinearElement } from "./binding";
+import { updateElbowArrowPoints } from "./elbowArrow";
 import {
   HEADING_DOWN,
   HEADING_LEFT,
@@ -7,9 +18,17 @@ import {
   headingForPointFromElement,
   type Heading,
 } from "./heading";
-import { bindLinearElement } from "./binding";
 import { LinearElementEditor } from "./linearElementEditor";
+import { mutateElement } from "./mutateElement";
 import { newArrowElement, newElement } from "./newElement";
+import { aabbForElement } from "./shapes";
+import { elementsAreInFrameBounds, elementOverlapsWithFrame } from "./frame";
+import {
+  isBindableElement,
+  isElbowArrow,
+  isFrameElement,
+  isFlowchartNodeElement,
+} from "./typeChecks";
 import {
   type ElementsMap,
   type ExcalidrawBindableElement,
@@ -19,20 +38,6 @@ import {
   type Ordered,
   type OrderedExcalidrawElement,
 } from "./types";
-import { KEYS } from "../keys";
-import type { AppState, PendingExcalidrawElements } from "../types";
-import { mutateElement } from "./mutateElement";
-import { elementOverlapsWithFrame, elementsAreInFrameBounds } from "../frame";
-import {
-  isBindableElement,
-  isElbowArrow,
-  isFrameElement,
-  isFlowchartNodeElement,
-} from "./typeChecks";
-import { invariant, toBrandedType } from "../utils";
-import { pointFrom, type LocalPoint } from "@excalidraw/math";
-import { aabbForElement } from "../shapes";
-import { updateElbowArrowPoints } from "./elbowArrow";
 
 type LinkDirection = "up" | "right" | "down" | "left";
 
@@ -91,7 +96,7 @@ const getNodeRelatives = (
         const heading = headingForPointFromElement(node, aabbForElement(node), [
           edgePoint[0] + el.x,
           edgePoint[1] + el.y,
-        ] as Readonly<LocalPoint>);
+        ] as Readonly<GlobalPoint>);
 
         acc.push({
           relative,
diff --git a/packages/excalidraw/fractionalIndex.ts b/packages/element/src/fractionalIndex.ts
similarity index 97%
rename from packages/excalidraw/fractionalIndex.ts
rename to packages/element/src/fractionalIndex.ts
index dfb8a4672..bbe739f29 100644
--- a/packages/excalidraw/fractionalIndex.ts
+++ b/packages/element/src/fractionalIndex.ts
@@ -1,14 +1,20 @@
 import { generateNKeysBetween } from "fractional-indexing";
-import { mutateElement } from "./element/mutateElement";
+
+import { arrayToMap } from "@excalidraw/common";
+
+import { mutateElement } from "./mutateElement";
+import { getBoundTextElement } from "./textElement";
+import { hasBoundTextElement } from "./typeChecks";
+
 import type {
   ExcalidrawElement,
   FractionalIndex,
   OrderedExcalidrawElement,
-} from "./element/types";
-import { InvalidFractionalIndexError } from "./errors";
-import { hasBoundTextElement } from "./element/typeChecks";
-import { getBoundTextElement } from "./element/textElement";
-import { arrayToMap } from "./utils";
+} from "./types";
+
+export class InvalidFractionalIndexError extends Error {
+  public code = "ELEMENT_HAS_INVALID_INDEX" as const;
+}
 
 /**
  * Envisioned relation between array order and fractional indices:
diff --git a/packages/excalidraw/frame.ts b/packages/element/src/frame.ts
similarity index 97%
rename from packages/excalidraw/frame.ts
rename to packages/element/src/frame.ts
index 4659a34a0..7f40148b7 100644
--- a/packages/excalidraw/frame.ts
+++ b/packages/element/src/frame.ts
@@ -1,8 +1,34 @@
+import { arrayToMap } from "@excalidraw/common";
+import { isPointWithinBounds, pointFrom } from "@excalidraw/math";
+import { doLineSegmentsIntersect } from "@excalidraw/utils/bbox";
+import { elementsOverlappingBBox } from "@excalidraw/utils/withinBounds";
+
+import type { ExcalidrawElementsIncludingDeleted } from "@excalidraw/excalidraw/scene/Scene";
+
+import type {
+  AppClassProperties,
+  AppState,
+  StaticCanvasAppState,
+} from "@excalidraw/excalidraw/types";
+
+import type { ReadonlySetLike } from "@excalidraw/common/utility-types";
+
+import { getElementsWithinSelection, getSelectedElements } from "./selection";
+import { getElementsInGroup, selectGroupsFromGivenElements } from "./groups";
+
 import {
+  getElementLineSegments,
   getCommonBounds,
   getElementAbsoluteCoords,
+} from "./bounds";
+import { mutateElement } from "./mutateElement";
+import { getBoundTextElement, getContainerElement } from "./textElement";
+import {
+  isFrameElement,
+  isFrameLikeElement,
   isTextElement,
-} from "./element";
+} from "./typeChecks";
+
 import type {
   ElementsMap,
   ElementsMapOrArray,
@@ -10,29 +36,7 @@ import type {
   ExcalidrawFrameLikeElement,
   NonDeleted,
   NonDeletedExcalidrawElement,
-} from "./element/types";
-import {
-  getBoundTextElement,
-  getContainerElement,
-} from "./element/textElement";
-import { arrayToMap } from "./utils";
-import { mutateElement } from "./element/mutateElement";
-import type {
-  AppClassProperties,
-  AppState,
-  StaticCanvasAppState,
 } from "./types";
-import { getElementsWithinSelection, getSelectedElements } from "./scene";
-import { getElementsInGroup, selectGroupsFromGivenElements } from "./groups";
-import type { ExcalidrawElementsIncludingDeleted } from "./scene/Scene";
-import { getElementLineSegments } from "./element/bounds";
-import {
-  doLineSegmentsIntersect,
-  elementsOverlappingBBox,
-} from "@excalidraw/utils";
-import { isFrameElement, isFrameLikeElement } from "./element/typeChecks";
-import type { ReadonlySetLike } from "./utility-types";
-import { isPointWithinBounds, pointFrom } from "@excalidraw/math";
 
 // --------------------------- Frame State ------------------------------------
 export const bindElementsToFramesAfterDuplication = (
diff --git a/packages/excalidraw/groups.ts b/packages/element/src/groups.ts
similarity index 97%
rename from packages/excalidraw/groups.ts
rename to packages/element/src/groups.ts
index 5a4e606f7..1cd1536e1 100644
--- a/packages/excalidraw/groups.ts
+++ b/packages/element/src/groups.ts
@@ -1,3 +1,14 @@
+import type {
+  AppClassProperties,
+  AppState,
+  InteractiveCanvasAppState,
+} from "@excalidraw/excalidraw/types";
+import type { Mutable } from "@excalidraw/common/utility-types";
+
+import { getBoundTextElement } from "./textElement";
+
+import { makeNextSelectedElementIds, getSelectedElements } from "./selection";
+
 import type {
   GroupId,
   ExcalidrawElement,
@@ -5,16 +16,7 @@ import type {
   NonDeletedExcalidrawElement,
   ElementsMapOrArray,
   ElementsMap,
-} from "./element/types";
-import type {
-  AppClassProperties,
-  AppState,
-  InteractiveCanvasAppState,
 } from "./types";
-import { getSelectedElements } from "./scene";
-import { getBoundTextElement } from "./element/textElement";
-import { makeNextSelectedElementIds } from "./scene/selection";
-import type { Mutable } from "./utility-types";
 
 export const selectGroup = (
   groupId: GroupId,
@@ -213,7 +215,10 @@ export const isSelectedViaGroup = (
 ) => getSelectedGroupForElement(appState, element) != null;
 
 export const getSelectedGroupForElement = (
-  appState: InteractiveCanvasAppState,
+  appState: Pick<
+    InteractiveCanvasAppState,
+    "editingGroupId" | "selectedGroupIds"
+  >,
   element: ExcalidrawElement,
 ) =>
   element.groupIds
@@ -293,24 +298,6 @@ export const getSelectedGroupIdForElement = (
   selectedGroupIds: { [groupId: string]: boolean },
 ) => element.groupIds.find((groupId) => selectedGroupIds[groupId]);
 
-export const getNewGroupIdsForDuplication = (
-  groupIds: ExcalidrawElement["groupIds"],
-  editingGroupId: AppState["editingGroupId"],
-  mapper: (groupId: GroupId) => GroupId,
-) => {
-  const copy = [...groupIds];
-  const positionOfEditingGroupId = editingGroupId
-    ? groupIds.indexOf(editingGroupId)
-    : -1;
-  const endIndex =
-    positionOfEditingGroupId > -1 ? positionOfEditingGroupId : groupIds.length;
-  for (let index = 0; index < endIndex; index++) {
-    copy[index] = mapper(copy[index]);
-  }
-
-  return copy;
-};
-
 export const addToGroup = (
   prevGroupIds: ExcalidrawElement["groupIds"],
   newGroupId: GroupId,
@@ -397,3 +384,21 @@ export const elementsAreInSameGroup = (
 export const isInGroup = (element: NonDeletedExcalidrawElement) => {
   return element.groupIds.length > 0;
 };
+
+export const getNewGroupIdsForDuplication = (
+  groupIds: ExcalidrawElement["groupIds"],
+  editingGroupId: AppState["editingGroupId"],
+  mapper: (groupId: GroupId) => GroupId,
+) => {
+  const copy = [...groupIds];
+  const positionOfEditingGroupId = editingGroupId
+    ? groupIds.indexOf(editingGroupId)
+    : -1;
+  const endIndex =
+    positionOfEditingGroupId > -1 ? positionOfEditingGroupId : groupIds.length;
+  for (let index = 0; index < endIndex; index++) {
+    copy[index] = mapper(copy[index]);
+  }
+
+  return copy;
+};
diff --git a/packages/excalidraw/element/heading.ts b/packages/element/src/heading.ts
similarity index 96%
rename from packages/excalidraw/element/heading.ts
rename to packages/element/src/heading.ts
index 94e86339d..474923515 100644
--- a/packages/excalidraw/element/heading.ts
+++ b/packages/element/src/heading.ts
@@ -1,11 +1,5 @@
-import type {
-  LocalPoint,
-  GlobalPoint,
-  Triangle,
-  Vector,
-  Radians,
-} from "@excalidraw/math";
 import {
+  normalizeRadians,
   pointFrom,
   pointRotateRads,
   pointScaleFromOrigin,
@@ -13,7 +7,17 @@ import {
   triangleIncludesPoint,
   vectorFromPoint,
 } from "@excalidraw/math";
+
+import type {
+  LocalPoint,
+  GlobalPoint,
+  Triangle,
+  Vector,
+  Radians,
+} from "@excalidraw/math";
+
 import { getCenterForBounds, type Bounds } from "./bounds";
+
 import type { ExcalidrawBindableElement } from "./types";
 
 export const HEADING_RIGHT = [1, 0] as Heading;
@@ -27,8 +31,9 @@ export const headingForDiamond = <Point extends GlobalPoint | LocalPoint>(
   b: Point,
 ) => {
   const angle = radiansToDegrees(
-    Math.atan2(b[1] - a[1], b[0] - a[0]) as Radians,
+    normalizeRadians(Math.atan2(b[1] - a[1], b[0] - a[0]) as Radians),
   );
+
   if (angle >= 315 || angle < 45) {
     return HEADING_UP;
   } else if (angle >= 45 && angle < 135) {
@@ -74,9 +79,7 @@ export const headingIsVertical = (a: Heading) => !headingIsHorizontal(a);
 // Gets the heading for the point by creating a bounding box around the rotated
 // close fitting bounding box, then creating 4 search cones around the center of
 // the external bbox.
-export const headingForPointFromElement = <
-  Point extends GlobalPoint | LocalPoint,
->(
+export const headingForPointFromElement = <Point extends GlobalPoint>(
   element: Readonly<ExcalidrawBindableElement>,
   aabb: Readonly<Bounds>,
   p: Readonly<Point>,
diff --git a/packages/excalidraw/element/image.ts b/packages/element/src/image.ts
similarity index 96%
rename from packages/excalidraw/element/image.ts
rename to packages/element/src/image.ts
index 32644b64d..562b48904 100644
--- a/packages/excalidraw/element/image.ts
+++ b/packages/element/src/image.ts
@@ -2,9 +2,16 @@
 // ExcalidrawImageElement & related helpers
 // -----------------------------------------------------------------------------
 
-import { MIME_TYPES, SVG_NS } from "../constants";
-import type { AppClassProperties, DataURL, BinaryFiles } from "../types";
+import { MIME_TYPES, SVG_NS } from "@excalidraw/common";
+
+import type {
+  AppClassProperties,
+  DataURL,
+  BinaryFiles,
+} from "@excalidraw/excalidraw/types";
+
 import { isInitializedImageElement } from "./typeChecks";
+
 import type {
   ExcalidrawElement,
   FileId,
diff --git a/packages/excalidraw/element/index.ts b/packages/element/src/index.ts
similarity index 65%
rename from packages/excalidraw/element/index.ts
rename to packages/element/src/index.ts
index a9b747681..d7edec8ae 100644
--- a/packages/excalidraw/element/index.ts
+++ b/packages/element/src/index.ts
@@ -1,60 +1,11 @@
+import { isInvisiblySmallElement } from "./sizeHelpers";
+import { isLinearElementType } from "./typeChecks";
+
 import type {
   ExcalidrawElement,
   NonDeletedExcalidrawElement,
   NonDeleted,
 } from "./types";
-import { isInvisiblySmallElement } from "./sizeHelpers";
-import { isLinearElementType } from "./typeChecks";
-
-export {
-  newElement,
-  newTextElement,
-  refreshTextDimensions,
-  newLinearElement,
-  newArrowElement,
-  newImageElement,
-  duplicateElement,
-} from "./newElement";
-export {
-  getElementAbsoluteCoords,
-  getElementBounds,
-  getCommonBounds,
-  getDiamondPoints,
-  getArrowheadPoints,
-  getClosestElementBounds,
-} from "./bounds";
-
-export {
-  OMIT_SIDES_FOR_MULTIPLE_ELEMENTS,
-  getTransformHandlesFromCoords,
-  getTransformHandles,
-} from "./transformHandles";
-export {
-  resizeTest,
-  getCursorForResizingElement,
-  getElementWithTransformHandleType,
-  getTransformHandleTypeFromCoords,
-} from "./resizeTest";
-export {
-  transformElements,
-  getResizeOffsetXY,
-  getResizeArrowDirection,
-} from "./resizeElements";
-export {
-  dragSelectedElements,
-  getDragOffsetXY,
-  dragNewElement,
-} from "./dragElements";
-export { isTextElement, isExcalidrawElement } from "./typeChecks";
-export { redrawTextBoundingBox, getTextFromElements } from "./textElement";
-export {
-  getPerfectElementSize,
-  getLockedLinearCursorAlignSize,
-  isInvisiblySmallElement,
-  resizePerfectLineForNWHandler,
-  getNormalizedDimensions,
-} from "./sizeHelpers";
-export { showSelectedShapeActions } from "./showSelectedShapeActions";
 
 /**
  * @deprecated unsafe, use hashElementsVersion instead
diff --git a/packages/excalidraw/element/linearElementEditor.ts b/packages/element/src/linearElementEditor.ts
similarity index 94%
rename from packages/excalidraw/element/linearElementEditor.ts
rename to packages/element/src/linearElementEditor.ts
index b616268a6..bd4e740b2 100644
--- a/packages/excalidraw/element/linearElementEditor.ts
+++ b/packages/element/src/linearElementEditor.ts
@@ -1,3 +1,79 @@
+import {
+  pointCenter,
+  pointFrom,
+  pointRotateRads,
+  pointsEqual,
+  type GlobalPoint,
+  type LocalPoint,
+  pointDistance,
+  vectorFromPoint,
+} from "@excalidraw/math";
+
+import { getCurvePathOps } from "@excalidraw/utils/shape";
+
+import {
+  DRAGGING_THRESHOLD,
+  KEYS,
+  shouldRotateWithDiscreteAngle,
+  getGridPoint,
+  invariant,
+  tupleToCoors,
+} from "@excalidraw/common";
+
+// TODO: remove direct dependency on the scene, should be passed in or injected instead
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import Scene from "@excalidraw/excalidraw/scene/Scene";
+
+import type { Store } from "@excalidraw/excalidraw/store";
+
+import type { Radians } from "@excalidraw/math";
+
+import type {
+  AppState,
+  PointerCoords,
+  InteractiveCanvasAppState,
+  AppClassProperties,
+  NullableGridSize,
+  Zoom,
+} from "@excalidraw/excalidraw/types";
+
+import type { Mutable } from "@excalidraw/common/utility-types";
+
+import {
+  bindOrUnbindLinearElement,
+  getHoveredElementForBinding,
+  isBindingEnabled,
+} from "./binding";
+import {
+  getElementAbsoluteCoords,
+  getElementPointsCoords,
+  getMinMaxXYFromCurvePathOps,
+} from "./bounds";
+
+import { updateElbowArrowPoints } from "./elbowArrow";
+
+import { headingIsHorizontal, vectorToHeading } from "./heading";
+import { bumpVersion, mutateElement } from "./mutateElement";
+import { getBoundTextElement, handleBindTextResize } from "./textElement";
+import {
+  isBindingElement,
+  isElbowArrow,
+  isFixedPointBinding,
+} from "./typeChecks";
+
+import { ShapeCache } from "./ShapeCache";
+
+import {
+  isPathALoop,
+  getBezierCurveLength,
+  getControlPointsForBezierCurve,
+  mapIntervalToBezierT,
+  getBezierXY,
+} from "./shapes";
+
+import { getLockedLinearCursorAlignSize } from "./sizeHelpers";
+
+import type { Bounds } from "./bounds";
 import type {
   NonDeleted,
   ExcalidrawLinearElement,
@@ -12,58 +88,6 @@ import type {
   FixedSegment,
   ExcalidrawElbowArrowElement,
 } from "./types";
-import { getElementAbsoluteCoords, getLockedLinearCursorAlignSize } from ".";
-import type { Bounds } from "./bounds";
-import { getElementPointsCoords, getMinMaxXYFromCurvePathOps } from "./bounds";
-import type {
-  AppState,
-  PointerCoords,
-  InteractiveCanvasAppState,
-  AppClassProperties,
-  NullableGridSize,
-  Zoom,
-} from "../types";
-import { mutateElement } from "./mutateElement";
-
-import {
-  bindOrUnbindLinearElement,
-  getHoveredElementForBinding,
-  isBindingEnabled,
-} from "./binding";
-import { invariant, tupleToCoors } from "../utils";
-import {
-  isBindingElement,
-  isElbowArrow,
-  isFixedPointBinding,
-} from "./typeChecks";
-import { KEYS, shouldRotateWithDiscreteAngle } from "../keys";
-import { getBoundTextElement, handleBindTextResize } from "./textElement";
-import { DRAGGING_THRESHOLD } from "../constants";
-import type { Mutable } from "../utility-types";
-import { ShapeCache } from "../scene/ShapeCache";
-import type { Store } from "../store";
-import type Scene from "../scene/Scene";
-import type { Radians } from "@excalidraw/math";
-import {
-  pointCenter,
-  pointFrom,
-  pointRotateRads,
-  pointsEqual,
-  type GlobalPoint,
-  type LocalPoint,
-  pointDistance,
-  vectorFromPoint,
-} from "@excalidraw/math";
-import {
-  getBezierCurveLength,
-  getBezierXY,
-  getControlPointsForBezierCurve,
-  isPathALoop,
-  mapIntervalToBezierT,
-} from "../shapes";
-import { getGridPoint } from "../snapping";
-import { headingIsHorizontal, vectorToHeading } from "./heading";
-import { getCurvePathOps } from "@excalidraw/utils/geometry/shape";
 
 const editorMidPointsCache: {
   version: number | null;
@@ -228,15 +252,15 @@ export class LinearElementEditor {
     ) => void,
     linearElementEditor: LinearElementEditor,
     scene: Scene,
-  ): boolean {
+  ): LinearElementEditor | null {
     if (!linearElementEditor) {
-      return false;
+      return null;
     }
     const { elementId } = linearElementEditor;
     const elementsMap = scene.getNonDeletedElementsMap();
     const element = LinearElementEditor.getElement(elementId, elementsMap);
     if (!element) {
-      return false;
+      return null;
     }
 
     if (
@@ -244,24 +268,18 @@ export class LinearElementEditor {
       !linearElementEditor.pointerDownState.lastClickedIsEndPoint &&
       linearElementEditor.pointerDownState.lastClickedPoint !== 0
     ) {
-      return false;
+      return null;
     }
 
     const selectedPointsIndices = isElbowArrow(element)
-      ? linearElementEditor.selectedPointsIndices
-          ?.reduce(
-            (startEnd, index) =>
-              (index === 0
-                ? [0, startEnd[1]]
-                : [startEnd[0], element.points.length - 1]) as [
-                boolean | number,
-                boolean | number,
-              ],
-            [false, false] as [number | boolean, number | boolean],
-          )
-          .filter(
-            (idx: number | boolean): idx is number => typeof idx === "number",
-          )
+      ? [
+          !!linearElementEditor.selectedPointsIndices?.includes(0)
+            ? 0
+            : undefined,
+          !!linearElementEditor.selectedPointsIndices?.find((idx) => idx > 0)
+            ? element.points.length - 1
+            : undefined,
+        ].filter((idx): idx is number => idx !== undefined)
       : linearElementEditor.selectedPointsIndices;
     const lastClickedPoint = isElbowArrow(element)
       ? linearElementEditor.pointerDownState.lastClickedPoint > 0
@@ -270,9 +288,7 @@ export class LinearElementEditor {
       : linearElementEditor.pointerDownState.lastClickedPoint;
 
     // point that's being dragged (out of all selected points)
-    const draggingPoint = element.points[lastClickedPoint] as
-      | [number, number]
-      | undefined;
+    const draggingPoint = element.points[lastClickedPoint];
 
     if (selectedPointsIndices && draggingPoint) {
       if (
@@ -380,10 +396,28 @@ export class LinearElementEditor {
         }
       }
 
-      return true;
+      return {
+        ...linearElementEditor,
+        selectedPointsIndices,
+        segmentMidPointHoveredCoords:
+          lastClickedPoint !== 0 &&
+          lastClickedPoint !== element.points.length - 1
+            ? this.getPointGlobalCoordinates(
+                element,
+                draggingPoint,
+                elementsMap,
+              )
+            : null,
+        hoverPointIndex:
+          lastClickedPoint === 0 ||
+          lastClickedPoint === element.points.length - 1
+            ? lastClickedPoint
+            : -1,
+        isDragging: true,
+      };
     }
 
-    return false;
+    return null;
   }
 
   static handlePointerUp(
@@ -1260,6 +1294,7 @@ export class LinearElementEditor {
       startBinding?: PointBinding | null;
       endBinding?: PointBinding | null;
     },
+    sceneElementsMap?: NonDeletedSceneElementsMap,
   ) {
     const { points } = element;
 
@@ -1303,6 +1338,7 @@ export class LinearElementEditor {
             dragging || targetPoint.isDragging === true,
           false,
         ),
+        sceneElementsMap,
       },
     );
   }
@@ -1416,6 +1452,7 @@ export class LinearElementEditor {
     options?: {
       isDragging?: boolean;
       zoom?: AppState["zoom"];
+      sceneElementsMap?: NonDeletedSceneElementsMap;
     },
   ) {
     if (isElbowArrow(element)) {
@@ -1441,9 +1478,28 @@ export class LinearElementEditor {
 
       updates.points = Array.from(nextPoints);
 
-      mutateElement(element, updates, true, {
-        isDragging: options?.isDragging,
-      });
+      if (!options?.sceneElementsMap || Scene.getScene(element)) {
+        mutateElement(element, updates, true, {
+          isDragging: options?.isDragging,
+        });
+      } else {
+        // The element is not in the scene, so we need to use the provided
+        // scene map.
+        Object.assign(element, {
+          ...updates,
+          angle: 0 as Radians,
+
+          ...updateElbowArrowPoints(
+            element,
+            options.sceneElementsMap,
+            updates,
+            {
+              isDragging: options?.isDragging,
+            },
+          ),
+        });
+      }
+      bumpVersion(element);
     } else {
       const nextCoords = getElementPointsCoords(element, nextPoints);
       const prevCoords = getElementPointsCoords(element, element.points);
diff --git a/packages/excalidraw/element/mutateElement.ts b/packages/element/src/mutateElement.ts
similarity index 92%
rename from packages/excalidraw/element/mutateElement.ts
rename to packages/element/src/mutateElement.ts
index cfff5c826..d87007369 100644
--- a/packages/excalidraw/element/mutateElement.ts
+++ b/packages/element/src/mutateElement.ts
@@ -1,14 +1,25 @@
-import type { ExcalidrawElement, NonDeletedSceneElementsMap } from "./types";
-import Scene from "../scene/Scene";
-import { getSizeFromPoints } from "../points";
-import { randomInteger } from "../random";
-import { getUpdatedTimestamp, toBrandedType } from "../utils";
-import type { Mutable } from "../utility-types";
-import { ShapeCache } from "../scene/ShapeCache";
-import { isElbowArrow } from "./typeChecks";
-import { updateElbowArrowPoints } from "./elbowArrow";
+import {
+  getSizeFromPoints,
+  randomInteger,
+  getUpdatedTimestamp,
+  toBrandedType,
+} from "@excalidraw/common";
+
+// TODO: remove direct dependency on the scene, should be passed in or injected instead
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import Scene from "@excalidraw/excalidraw/scene/Scene";
+
 import type { Radians } from "@excalidraw/math";
 
+import type { Mutable } from "@excalidraw/common/utility-types";
+
+import { ShapeCache } from "./ShapeCache";
+
+import { updateElbowArrowPoints } from "./elbowArrow";
+import { isElbowArrow } from "./typeChecks";
+
+import type { ExcalidrawElement, NonDeletedSceneElementsMap } from "./types";
+
 export type ElementUpdate<TElement extends ExcalidrawElement> = Omit<
   Partial<TElement>,
   "id" | "version" | "versionNonce" | "updated"
diff --git a/packages/excalidraw/element/newElement.ts b/packages/element/src/newElement.ts
similarity index 60%
rename from packages/excalidraw/element/newElement.ts
rename to packages/element/src/newElement.ts
index 7d1f14910..53a2f05ae 100644
--- a/packages/excalidraw/element/newElement.ts
+++ b/packages/element/src/newElement.ts
@@ -1,3 +1,30 @@
+import {
+  DEFAULT_ELEMENT_PROPS,
+  DEFAULT_FONT_FAMILY,
+  DEFAULT_FONT_SIZE,
+  DEFAULT_TEXT_ALIGN,
+  DEFAULT_VERTICAL_ALIGN,
+  VERTICAL_ALIGN,
+  randomInteger,
+  randomId,
+  getFontString,
+  getUpdatedTimestamp,
+  getLineHeight,
+} from "@excalidraw/common";
+
+import type { Radians } from "@excalidraw/math";
+
+import type { MarkOptional, Merge } from "@excalidraw/common/utility-types";
+
+import {
+  getElementAbsoluteCoords,
+  getResizedElementAbsoluteCoords,
+} from "./bounds";
+import { newElementWith } from "./mutateElement";
+import { getBoundTextMaxWidth } from "./textElement";
+import { normalizeText, measureText } from "./textMeasurements";
+import { wrapText } from "./textWrapping";
+
 import type {
   ExcalidrawElement,
   ExcalidrawImageElement,
@@ -6,7 +33,6 @@ import type {
   ExcalidrawGenericElement,
   NonDeleted,
   TextAlign,
-  GroupId,
   VerticalAlign,
   Arrowhead,
   ExcalidrawFreeDrawElement,
@@ -21,33 +47,6 @@ import type {
   FixedSegment,
   ExcalidrawElbowArrowElement,
 } from "./types";
-import {
-  arrayToMap,
-  getFontString,
-  getUpdatedTimestamp,
-  isTestEnv,
-} from "../utils";
-import { randomInteger, randomId } from "../random";
-import { bumpVersion, newElementWith } from "./mutateElement";
-import { getNewGroupIdsForDuplication } from "../groups";
-import type { AppState } from "../types";
-import { getElementAbsoluteCoords } from ".";
-import { getResizedElementAbsoluteCoords } from "./bounds";
-import { getBoundTextMaxWidth } from "./textElement";
-import { wrapText } from "./textWrapping";
-import {
-  DEFAULT_ELEMENT_PROPS,
-  DEFAULT_FONT_FAMILY,
-  DEFAULT_FONT_SIZE,
-  DEFAULT_TEXT_ALIGN,
-  DEFAULT_VERTICAL_ALIGN,
-  ORIG_ID,
-  VERTICAL_ALIGN,
-} from "../constants";
-import type { MarkOptional, Merge, Mutable } from "../utility-types";
-import { getLineHeight } from "../fonts";
-import type { Radians } from "@excalidraw/math";
-import { normalizeText, measureText } from "./textMeasurements";
 
 export type ElementConstructorOpts = MarkOptional<
   Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted" | "updated">,
@@ -534,260 +533,3 @@ export const newImageElement = (
     crop: opts.crop ?? null,
   };
 };
-
-// Simplified deep clone for the purpose of cloning ExcalidrawElement.
-//
-// Only clones plain objects and arrays. Doesn't clone Date, RegExp, Map, Set,
-// Typed arrays and other non-null objects.
-//
-// Adapted from https://github.com/lukeed/klona
-//
-// The reason for `deepCopyElement()` wrapper is type safety (only allow
-// passing ExcalidrawElement as the top-level argument).
-const _deepCopyElement = (val: any, depth: number = 0) => {
-  // only clone non-primitives
-  if (val == null || typeof val !== "object") {
-    return val;
-  }
-
-  const objectType = Object.prototype.toString.call(val);
-
-  if (objectType === "[object Object]") {
-    const tmp =
-      typeof val.constructor === "function"
-        ? Object.create(Object.getPrototypeOf(val))
-        : {};
-    for (const key in val) {
-      if (val.hasOwnProperty(key)) {
-        // don't copy non-serializable objects like these caches. They'll be
-        // populated when the element is rendered.
-        if (depth === 0 && (key === "shape" || key === "canvas")) {
-          continue;
-        }
-        tmp[key] = _deepCopyElement(val[key], depth + 1);
-      }
-    }
-    return tmp;
-  }
-
-  if (Array.isArray(val)) {
-    let k = val.length;
-    const arr = new Array(k);
-    while (k--) {
-      arr[k] = _deepCopyElement(val[k], depth + 1);
-    }
-    return arr;
-  }
-
-  // we're not cloning non-array & non-plain-object objects because we
-  // don't support them on excalidraw elements yet. If we do, we need to make
-  // sure we start cloning them, so let's warn about it.
-  if (import.meta.env.DEV) {
-    if (
-      objectType !== "[object Object]" &&
-      objectType !== "[object Array]" &&
-      objectType.startsWith("[object ")
-    ) {
-      console.warn(
-        `_deepCloneElement: unexpected object type ${objectType}. This value will not be cloned!`,
-      );
-    }
-  }
-
-  return val;
-};
-
-/**
- * Clones ExcalidrawElement data structure. Does not regenerate id, nonce, or
- * any value. The purpose is to to break object references for immutability
- * reasons, whenever we want to keep the original element, but ensure it's not
- * mutated.
- *
- * Only clones plain objects and arrays. Doesn't clone Date, RegExp, Map, Set,
- * Typed arrays and other non-null objects.
- */
-export const deepCopyElement = <T extends ExcalidrawElement>(
-  val: T,
-): Mutable<T> => {
-  return _deepCopyElement(val);
-};
-
-const __test__defineOrigId = (clonedObj: object, origId: string) => {
-  Object.defineProperty(clonedObj, ORIG_ID, {
-    value: origId,
-    writable: false,
-    enumerable: false,
-  });
-};
-
-/**
- * utility wrapper to generate new id.
- */
-const regenerateId = () => {
-  return randomId();
-};
-
-/**
- * Duplicate an element, often used in the alt-drag operation.
- * Note that this method has gotten a bit complicated since the
- * introduction of gruoping/ungrouping elements.
- * @param editingGroupId The current group being edited. The new
- *                       element will inherit this group and its
- *                       parents.
- * @param groupIdMapForOperation A Map that maps old group IDs to
- *                               duplicated ones. If you are duplicating
- *                               multiple elements at once, share this map
- *                               amongst all of them
- * @param element Element to duplicate
- * @param overrides Any element properties to override
- */
-export const duplicateElement = <TElement extends ExcalidrawElement>(
-  editingGroupId: AppState["editingGroupId"],
-  groupIdMapForOperation: Map<GroupId, GroupId>,
-  element: TElement,
-  overrides?: Partial<TElement>,
-): Readonly<TElement> => {
-  let copy = deepCopyElement(element);
-
-  if (isTestEnv()) {
-    __test__defineOrigId(copy, element.id);
-  }
-
-  copy.id = regenerateId();
-  copy.boundElements = null;
-  copy.updated = getUpdatedTimestamp();
-  copy.seed = randomInteger();
-  copy.groupIds = getNewGroupIdsForDuplication(
-    copy.groupIds,
-    editingGroupId,
-    (groupId) => {
-      if (!groupIdMapForOperation.has(groupId)) {
-        groupIdMapForOperation.set(groupId, regenerateId());
-      }
-      return groupIdMapForOperation.get(groupId)!;
-    },
-  );
-  if (overrides) {
-    copy = Object.assign(copy, overrides);
-  }
-  return copy;
-};
-
-/**
- * Clones elements, regenerating their ids (including bindings) and group ids.
- *
- * If bindings don't exist in the elements array, they are removed. Therefore,
- * it's advised to supply the whole elements array, or sets of elements that
- * are encapsulated (such as library items), if the purpose is to retain
- * bindings to the cloned elements intact.
- *
- * NOTE by default does not randomize or regenerate anything except the id.
- */
-export const duplicateElements = (
-  elements: readonly ExcalidrawElement[],
-  opts?: {
-    /** NOTE also updates version flags and `updated` */
-    randomizeSeed: boolean;
-  },
-) => {
-  const clonedElements: ExcalidrawElement[] = [];
-
-  const origElementsMap = arrayToMap(elements);
-
-  // used for for migrating old ids to new ids
-  const elementNewIdsMap = new Map<
-    /* orig */ ExcalidrawElement["id"],
-    /* new */ ExcalidrawElement["id"]
-  >();
-
-  const maybeGetNewId = (id: ExcalidrawElement["id"]) => {
-    // if we've already migrated the element id, return the new one directly
-    if (elementNewIdsMap.has(id)) {
-      return elementNewIdsMap.get(id)!;
-    }
-    // if we haven't migrated the element id, but an old element with the same
-    // id exists, generate a new id for it and return it
-    if (origElementsMap.has(id)) {
-      const newId = regenerateId();
-      elementNewIdsMap.set(id, newId);
-      return newId;
-    }
-    // if old element doesn't exist, return null to mark it for removal
-    return null;
-  };
-
-  const groupNewIdsMap = new Map</* orig */ GroupId, /* new */ GroupId>();
-
-  for (const element of elements) {
-    const clonedElement: Mutable<ExcalidrawElement> = _deepCopyElement(element);
-
-    clonedElement.id = maybeGetNewId(element.id)!;
-    if (isTestEnv()) {
-      __test__defineOrigId(clonedElement, element.id);
-    }
-
-    if (opts?.randomizeSeed) {
-      clonedElement.seed = randomInteger();
-      bumpVersion(clonedElement);
-    }
-
-    if (clonedElement.groupIds) {
-      clonedElement.groupIds = clonedElement.groupIds.map((groupId) => {
-        if (!groupNewIdsMap.has(groupId)) {
-          groupNewIdsMap.set(groupId, regenerateId());
-        }
-        return groupNewIdsMap.get(groupId)!;
-      });
-    }
-
-    if ("containerId" in clonedElement && clonedElement.containerId) {
-      const newContainerId = maybeGetNewId(clonedElement.containerId);
-      clonedElement.containerId = newContainerId;
-    }
-
-    if ("boundElements" in clonedElement && clonedElement.boundElements) {
-      clonedElement.boundElements = clonedElement.boundElements.reduce(
-        (
-          acc: Mutable<NonNullable<ExcalidrawElement["boundElements"]>>,
-          binding,
-        ) => {
-          const newBindingId = maybeGetNewId(binding.id);
-          if (newBindingId) {
-            acc.push({ ...binding, id: newBindingId });
-          }
-          return acc;
-        },
-        [],
-      );
-    }
-
-    if ("endBinding" in clonedElement && clonedElement.endBinding) {
-      const newEndBindingId = maybeGetNewId(clonedElement.endBinding.elementId);
-      clonedElement.endBinding = newEndBindingId
-        ? {
-            ...clonedElement.endBinding,
-            elementId: newEndBindingId,
-          }
-        : null;
-    }
-    if ("startBinding" in clonedElement && clonedElement.startBinding) {
-      const newEndBindingId = maybeGetNewId(
-        clonedElement.startBinding.elementId,
-      );
-      clonedElement.startBinding = newEndBindingId
-        ? {
-            ...clonedElement.startBinding,
-            elementId: newEndBindingId,
-          }
-        : null;
-    }
-
-    if (clonedElement.frameId) {
-      clonedElement.frameId = maybeGetNewId(clonedElement.frameId);
-    }
-
-    clonedElements.push(clonedElement);
-  }
-
-  return clonedElements;
-};
diff --git a/packages/excalidraw/renderer/renderElement.ts b/packages/element/src/renderElement.ts
similarity index 97%
rename from packages/excalidraw/renderer/renderElement.ts
rename to packages/element/src/renderElement.ts
index d93469c2d..c8091e8ed 100644
--- a/packages/excalidraw/renderer/renderElement.ts
+++ b/packages/element/src/renderElement.ts
@@ -1,3 +1,63 @@
+import rough from "roughjs/bin/rough";
+import { getStroke } from "perfect-freehand";
+
+import { isRightAngleRads } from "@excalidraw/math";
+
+import {
+  BOUND_TEXT_PADDING,
+  DEFAULT_REDUCED_GLOBAL_ALPHA,
+  ELEMENT_READY_TO_ERASE_OPACITY,
+  FRAME_STYLE,
+  MIME_TYPES,
+  THEME,
+  distance,
+  getFontString,
+  isRTL,
+  getVerticalOffset,
+} from "@excalidraw/common";
+
+import type {
+  AppState,
+  StaticCanvasAppState,
+  Zoom,
+  InteractiveCanvasAppState,
+  ElementsPendingErasure,
+  PendingExcalidrawElements,
+  NormalizedZoomValue,
+} from "@excalidraw/excalidraw/types";
+
+import type {
+  StaticCanvasRenderConfig,
+  RenderableElementsMap,
+  InteractiveCanvasRenderConfig,
+} from "@excalidraw/excalidraw/scene/types";
+
+import { getElementAbsoluteCoords } from "./bounds";
+import { getUncroppedImageElement } from "./cropElement";
+import { LinearElementEditor } from "./linearElementEditor";
+import {
+  getBoundTextElement,
+  getContainerCoords,
+  getContainerElement,
+  getBoundTextMaxHeight,
+  getBoundTextMaxWidth,
+} from "./textElement";
+import { getLineHeightInPx } from "./textMeasurements";
+import {
+  isTextElement,
+  isLinearElement,
+  isFreeDrawElement,
+  isInitializedImageElement,
+  isArrowElement,
+  hasBoundTextElement,
+  isMagicFrameElement,
+  isImageElement,
+} from "./typeChecks";
+import { getContainingFrame } from "./frame";
+import { getCornerRadius } from "./shapes";
+
+import { ShapeCache } from "./ShapeCache";
+
 import type {
   ExcalidrawElement,
   ExcalidrawTextElement,
@@ -8,62 +68,10 @@ import type {
   ExcalidrawFrameLikeElement,
   NonDeletedSceneElementsMap,
   ElementsMap,
-} from "../element/types";
-import {
-  isTextElement,
-  isLinearElement,
-  isFreeDrawElement,
-  isInitializedImageElement,
-  isArrowElement,
-  hasBoundTextElement,
-  isMagicFrameElement,
-  isImageElement,
-} from "../element/typeChecks";
-import { getElementAbsoluteCoords } from "../element/bounds";
-import type { RoughCanvas } from "roughjs/bin/canvas";
+} from "./types";
 
-import type {
-  StaticCanvasRenderConfig,
-  RenderableElementsMap,
-  InteractiveCanvasRenderConfig,
-} from "../scene/types";
-import { distance, getFontString, isRTL } from "../utils";
-import rough from "roughjs/bin/rough";
-import type {
-  AppState,
-  StaticCanvasAppState,
-  Zoom,
-  InteractiveCanvasAppState,
-  ElementsPendingErasure,
-  PendingExcalidrawElements,
-} from "../types";
-import { getDefaultAppState } from "../appState";
-import {
-  BOUND_TEXT_PADDING,
-  DEFAULT_REDUCED_GLOBAL_ALPHA,
-  ELEMENT_READY_TO_ERASE_OPACITY,
-  FRAME_STYLE,
-  MIME_TYPES,
-  THEME,
-} from "../constants";
 import type { StrokeOptions } from "perfect-freehand";
-import { getStroke } from "perfect-freehand";
-import {
-  getBoundTextElement,
-  getContainerCoords,
-  getContainerElement,
-  getBoundTextMaxHeight,
-  getBoundTextMaxWidth,
-} from "../element/textElement";
-import { LinearElementEditor } from "../element/linearElementEditor";
-
-import { getContainingFrame } from "../frame";
-import { ShapeCache } from "../scene/ShapeCache";
-import { getVerticalOffset } from "../fonts";
-import { isRightAngleRads } from "@excalidraw/math";
-import { getCornerRadius } from "../shapes";
-import { getUncroppedImageElement } from "../element/cropElement";
-import { getLineHeightInPx } from "../element/textMeasurements";
+import type { RoughCanvas } from "roughjs/bin/canvas";
 
 // using a stronger invert (100% vs our regular 93%) and saturate
 // as a temp hack to make images in dark theme look closer to original
@@ -72,8 +80,6 @@ import { getLineHeightInPx } from "../element/textMeasurements";
 export const IMAGE_INVERT_FILTER =
   "invert(100%) hue-rotate(180deg) saturate(1.25)";
 
-const defaultAppState = getDefaultAppState();
-
 const isPendingImageElement = (
   element: ExcalidrawElement,
   renderConfig: StaticCanvasRenderConfig,
@@ -533,7 +539,11 @@ const generateElementWithCanvas = (
   renderConfig: StaticCanvasRenderConfig,
   appState: StaticCanvasAppState,
 ) => {
-  const zoom: Zoom = renderConfig ? appState.zoom : defaultAppState.zoom;
+  const zoom: Zoom = renderConfig
+    ? appState.zoom
+    : {
+        value: 1 as NormalizedZoomValue,
+      };
   const prevElementWithCanvas = elementWithCanvasCache.get(element);
   const shouldRegenerateBecauseZoom =
     prevElementWithCanvas &&
diff --git a/packages/excalidraw/element/resizeElements.ts b/packages/element/src/resizeElements.ts
similarity index 99%
rename from packages/excalidraw/element/resizeElements.ts
rename to packages/element/src/resizeElements.ts
index b86ba0279..3ff405603 100644
--- a/packages/excalidraw/element/resizeElements.ts
+++ b/packages/element/src/resizeElements.ts
@@ -1,5 +1,70 @@
-import { MIN_FONT_SIZE, SHIFT_LOCKING_ANGLE } from "../constants";
-import { rescalePoints } from "../points";
+import {
+  pointCenter,
+  normalizeRadians,
+  pointFrom,
+  pointFromPair,
+  pointRotateRads,
+  type Radians,
+  type LocalPoint,
+} from "@excalidraw/math";
+
+import {
+  MIN_FONT_SIZE,
+  SHIFT_LOCKING_ANGLE,
+  rescalePoints,
+  getFontString,
+} from "@excalidraw/common";
+
+import type { GlobalPoint } from "@excalidraw/math";
+
+import type Scene from "@excalidraw/excalidraw/scene/Scene";
+
+import type { PointerDownState } from "@excalidraw/excalidraw/types";
+
+import type { Mutable } from "@excalidraw/common/utility-types";
+
+import { getArrowLocalFixedPoints, updateBoundElements } from "./binding";
+import {
+  getElementAbsoluteCoords,
+  getCommonBounds,
+  getResizedElementAbsoluteCoords,
+  getCommonBoundingBox,
+  getElementBounds,
+} from "./bounds";
+import { LinearElementEditor } from "./linearElementEditor";
+import { mutateElement } from "./mutateElement";
+import {
+  getBoundTextElement,
+  getBoundTextElementId,
+  getContainerElement,
+  handleBindTextResize,
+  getBoundTextMaxWidth,
+} from "./textElement";
+import {
+  getMinTextElementWidth,
+  measureText,
+  getApproxMinLineWidth,
+  getApproxMinLineHeight,
+} from "./textMeasurements";
+import { wrapText } from "./textWrapping";
+import {
+  isArrowElement,
+  isBoundToContainer,
+  isElbowArrow,
+  isFrameLikeElement,
+  isFreeDrawElement,
+  isImageElement,
+  isLinearElement,
+  isTextElement,
+} from "./typeChecks";
+
+import { isInGroup } from "./groups";
+
+import type { BoundingBox } from "./bounds";
+import type {
+  MaybeTransformHandleType,
+  TransformHandleDirection,
+} from "./transformHandles";
 import type {
   ExcalidrawLinearElement,
   ExcalidrawTextElement,
@@ -12,60 +77,6 @@ import type {
   SceneElementsMap,
   ExcalidrawElbowArrowElement,
 } from "./types";
-import type { Mutable } from "../utility-types";
-import {
-  getElementAbsoluteCoords,
-  getCommonBounds,
-  getResizedElementAbsoluteCoords,
-  getCommonBoundingBox,
-  getElementBounds,
-} from "./bounds";
-import type { BoundingBox } from "./bounds";
-import {
-  isArrowElement,
-  isBoundToContainer,
-  isElbowArrow,
-  isFrameLikeElement,
-  isFreeDrawElement,
-  isImageElement,
-  isLinearElement,
-  isTextElement,
-} from "./typeChecks";
-import { mutateElement } from "./mutateElement";
-import { getFontString } from "../utils";
-import { getArrowLocalFixedPoints, updateBoundElements } from "./binding";
-import type {
-  MaybeTransformHandleType,
-  TransformHandleDirection,
-} from "./transformHandles";
-import type { PointerDownState } from "../types";
-import type Scene from "../scene/Scene";
-import {
-  getBoundTextElement,
-  getBoundTextElementId,
-  getContainerElement,
-  handleBindTextResize,
-  getBoundTextMaxWidth,
-} from "./textElement";
-import { wrapText } from "./textWrapping";
-import { LinearElementEditor } from "./linearElementEditor";
-import { isInGroup } from "../groups";
-import type { GlobalPoint } from "@excalidraw/math";
-import {
-  pointCenter,
-  normalizeRadians,
-  pointFrom,
-  pointFromPair,
-  pointRotateRads,
-  type Radians,
-  type LocalPoint,
-} from "@excalidraw/math";
-import {
-  getMinTextElementWidth,
-  measureText,
-  getApproxMinLineWidth,
-  getApproxMinLineHeight,
-} from "./textMeasurements";
 
 // Returns true when transform (resizing/rotation) happened
 export const transformElements = (
diff --git a/packages/excalidraw/element/resizeTest.ts b/packages/element/src/resizeTest.ts
similarity index 98%
rename from packages/excalidraw/element/resizeTest.ts
rename to packages/element/src/resizeTest.ts
index 375ff980b..411dcf9a7 100644
--- a/packages/excalidraw/element/resizeTest.ts
+++ b/packages/element/src/resizeTest.ts
@@ -1,27 +1,3 @@
-import type {
-  ExcalidrawElement,
-  PointerType,
-  NonDeletedExcalidrawElement,
-  ElementsMap,
-} from "./types";
-
-import type {
-  TransformHandleType,
-  TransformHandle,
-  MaybeTransformHandleType,
-} from "./transformHandles";
-import {
-  getTransformHandlesFromCoords,
-  getTransformHandles,
-  getOmitSidesForDevice,
-  canResizeFromSides,
-} from "./transformHandles";
-import type { AppState, Device, Zoom } from "../types";
-import type { Bounds } from "./bounds";
-import { getElementAbsoluteCoords } from "./bounds";
-import { SIDE_RESIZING_THRESHOLD } from "../constants";
-import { isImageElement, isLinearElement } from "./typeChecks";
-import type { GlobalPoint, LineSegment, LocalPoint } from "@excalidraw/math";
 import {
   pointFrom,
   pointOnLineSegment,
@@ -29,6 +5,34 @@ import {
   type Radians,
 } from "@excalidraw/math";
 
+import { SIDE_RESIZING_THRESHOLD } from "@excalidraw/common";
+
+import type { GlobalPoint, LineSegment, LocalPoint } from "@excalidraw/math";
+
+import type { AppState, Device, Zoom } from "@excalidraw/excalidraw/types";
+
+import { getElementAbsoluteCoords } from "./bounds";
+import {
+  getTransformHandlesFromCoords,
+  getTransformHandles,
+  getOmitSidesForDevice,
+  canResizeFromSides,
+} from "./transformHandles";
+import { isImageElement, isLinearElement } from "./typeChecks";
+
+import type { Bounds } from "./bounds";
+import type {
+  TransformHandleType,
+  TransformHandle,
+  MaybeTransformHandleType,
+} from "./transformHandles";
+import type {
+  ExcalidrawElement,
+  PointerType,
+  NonDeletedExcalidrawElement,
+  ElementsMap,
+} from "./types";
+
 const isInsideTransformHandle = (
   transformHandle: TransformHandle,
   x: number,
diff --git a/packages/excalidraw/scene/selection.ts b/packages/element/src/selection.ts
similarity index 94%
rename from packages/excalidraw/scene/selection.ts
rename to packages/element/src/selection.ts
index 3ca91cd50..a76703920 100644
--- a/packages/excalidraw/scene/selection.ts
+++ b/packages/element/src/selection.ts
@@ -1,19 +1,25 @@
+import { isShallowEqual } from "@excalidraw/common";
+
+import type {
+  AppState,
+  InteractiveCanvasAppState,
+} from "@excalidraw/excalidraw/types";
+
+import { getElementAbsoluteCoords, getElementBounds } from "./bounds";
+import { isElementInViewport } from "./sizeHelpers";
+import { isBoundToContainer, isFrameLikeElement } from "./typeChecks";
+import {
+  elementOverlapsWithFrame,
+  getContainingFrame,
+  getFrameChildren,
+} from "./frame";
+
 import type {
   ElementsMap,
   ElementsMapOrArray,
   ExcalidrawElement,
   NonDeletedExcalidrawElement,
-} from "../element/types";
-import { getElementAbsoluteCoords, getElementBounds } from "../element";
-import type { AppState, InteractiveCanvasAppState } from "../types";
-import { isBoundToContainer, isFrameLikeElement } from "../element/typeChecks";
-import {
-  elementOverlapsWithFrame,
-  getContainingFrame,
-  getFrameChildren,
-} from "../frame";
-import { isShallowEqual } from "../utils";
-import { isElementInViewport } from "../element/sizeHelpers";
+} from "./types";
 
 /**
  * Frames and their containing elements are not to be selected at the same time.
diff --git a/packages/excalidraw/shapes.tsx b/packages/element/src/shapes.ts
similarity index 81%
rename from packages/excalidraw/shapes.tsx
rename to packages/element/src/shapes.ts
index cfd639f2d..1d6e13340 100644
--- a/packages/excalidraw/shapes.tsx
+++ b/packages/element/src/shapes.ts
@@ -1,3 +1,10 @@
+import {
+  DEFAULT_ADAPTIVE_RADIUS,
+  DEFAULT_PROPORTIONAL_RADIUS,
+  LINE_CONFIRM_THRESHOLD,
+  ROUNDNESS,
+  invariant,
+} from "@excalidraw/common";
 import {
   isPoint,
   pointFrom,
@@ -16,129 +23,26 @@ import {
   getFreedrawShape,
   getPolygonShape,
   type GeometricShape,
-} from "@excalidraw/utils/geometry/shape";
-import {
-  ArrowIcon,
-  DiamondIcon,
-  EllipseIcon,
-  EraserIcon,
-  FreedrawIcon,
-  ImageIcon,
-  LineIcon,
-  RectangleIcon,
-  SelectionIcon,
-  TextIcon,
-} from "./components/icons";
-import {
-  DEFAULT_ADAPTIVE_RADIUS,
-  DEFAULT_PROPORTIONAL_RADIUS,
-  LINE_CONFIRM_THRESHOLD,
-  ROUNDNESS,
-} from "./constants";
-import { getElementAbsoluteCoords } from "./element";
-import type { Bounds } from "./element/bounds";
-import { shouldTestInside } from "./element/collision";
-import { LinearElementEditor } from "./element/linearElementEditor";
-import { getBoundTextElement } from "./element/textElement";
+} from "@excalidraw/utils/shape";
+
+import type { NormalizedZoomValue, Zoom } from "@excalidraw/excalidraw/types";
+
+import { shouldTestInside } from "./collision";
+import { LinearElementEditor } from "./linearElementEditor";
+import { getBoundTextElement } from "./textElement";
+import { ShapeCache } from "./ShapeCache";
+
+import { getElementAbsoluteCoords, type Bounds } from "./bounds";
+
 import type {
   ElementsMap,
   ExcalidrawElement,
   ExcalidrawLinearElement,
   NonDeleted,
-} from "./element/types";
-import { KEYS } from "./keys";
-import { ShapeCache } from "./scene/ShapeCache";
-import type { NormalizedZoomValue, Zoom } from "./types";
-import { invariant } from "./utils";
-
-export const SHAPES = [
-  {
-    icon: SelectionIcon,
-    value: "selection",
-    key: KEYS.V,
-    numericKey: KEYS["1"],
-    fillable: true,
-  },
-  {
-    icon: RectangleIcon,
-    value: "rectangle",
-    key: KEYS.R,
-    numericKey: KEYS["2"],
-    fillable: true,
-  },
-  {
-    icon: DiamondIcon,
-    value: "diamond",
-    key: KEYS.D,
-    numericKey: KEYS["3"],
-    fillable: true,
-  },
-  {
-    icon: EllipseIcon,
-    value: "ellipse",
-    key: KEYS.O,
-    numericKey: KEYS["4"],
-    fillable: true,
-  },
-  {
-    icon: ArrowIcon,
-    value: "arrow",
-    key: KEYS.A,
-    numericKey: KEYS["5"],
-    fillable: true,
-  },
-  {
-    icon: LineIcon,
-    value: "line",
-    key: KEYS.L,
-    numericKey: KEYS["6"],
-    fillable: true,
-  },
-  {
-    icon: FreedrawIcon,
-    value: "freedraw",
-    key: [KEYS.P, KEYS.X],
-    numericKey: KEYS["7"],
-    fillable: false,
-  },
-  {
-    icon: TextIcon,
-    value: "text",
-    key: KEYS.T,
-    numericKey: KEYS["8"],
-    fillable: false,
-  },
-  {
-    icon: ImageIcon,
-    value: "image",
-    key: null,
-    numericKey: KEYS["9"],
-    fillable: false,
-  },
-  {
-    icon: EraserIcon,
-    value: "eraser",
-    key: KEYS.E,
-    numericKey: KEYS["0"],
-    fillable: false,
-  },
-] as const;
-
-export const findShapeByKey = (key: string) => {
-  const shape = SHAPES.find((shape, index) => {
-    return (
-      (shape.numericKey != null && key === shape.numericKey.toString()) ||
-      (shape.key &&
-        (typeof shape.key === "string"
-          ? shape.key === key
-          : (shape.key as readonly string[]).includes(key)))
-    );
-  });
-  return shape?.value || null;
-};
+} from "./types";
 
 /**
- * get the pure geometric shape of an excalidraw element
+ * get the pure geometric shape of an excalidraw elementw
  * which is then used for hit detection
  */
 export const getElementShape = <Point extends GlobalPoint | LocalPoint>(
diff --git a/packages/excalidraw/element/showSelectedShapeActions.ts b/packages/element/src/showSelectedShapeActions.ts
similarity index 84%
rename from packages/excalidraw/element/showSelectedShapeActions.ts
rename to packages/element/src/showSelectedShapeActions.ts
index bbf313d01..efcf83894 100644
--- a/packages/excalidraw/element/showSelectedShapeActions.ts
+++ b/packages/element/src/showSelectedShapeActions.ts
@@ -1,6 +1,8 @@
+import type { UIAppState } from "@excalidraw/excalidraw/types";
+
+import { getSelectedElements } from "./selection";
+
 import type { NonDeletedExcalidrawElement } from "./types";
-import { getSelectedElements } from "../scene";
-import type { UIAppState } from "../types";
 
 export const showSelectedShapeActions = (
   appState: UIAppState,
diff --git a/packages/excalidraw/element/sizeHelpers.ts b/packages/element/src/sizeHelpers.ts
similarity index 97%
rename from packages/excalidraw/element/sizeHelpers.ts
rename to packages/element/src/sizeHelpers.ts
index f633789a9..7a84dadba 100644
--- a/packages/excalidraw/element/sizeHelpers.ts
+++ b/packages/element/src/sizeHelpers.ts
@@ -1,10 +1,15 @@
-import type { ElementsMap, ExcalidrawElement } from "./types";
+import {
+  SHIFT_LOCKING_ANGLE,
+  viewportCoordsToSceneCoords,
+} from "@excalidraw/common";
+
+import type { AppState, Offsets, Zoom } from "@excalidraw/excalidraw/types";
+
+import { getCommonBounds, getElementBounds } from "./bounds";
 import { mutateElement } from "./mutateElement";
 import { isFreeDrawElement, isLinearElement } from "./typeChecks";
-import { SHIFT_LOCKING_ANGLE } from "../constants";
-import type { AppState, Offsets, Zoom } from "../types";
-import { getCommonBounds, getElementBounds } from "./bounds";
-import { viewportCoordsToSceneCoords } from "../utils";
+
+import type { ElementsMap, ExcalidrawElement } from "./types";
 
 // TODO:  remove invisible elements consistently actions, so that invisible elements are not recorded by the store, exported, broadcasted or persisted
 //        - perhaps could be as part of a standalone 'cleanup' action, in addition to 'finalize'
diff --git a/packages/excalidraw/element/sortElements.ts b/packages/element/src/sortElements.ts
similarity index 98%
rename from packages/excalidraw/element/sortElements.ts
rename to packages/element/src/sortElements.ts
index 3078a6827..c98ff9d52 100644
--- a/packages/excalidraw/element/sortElements.ts
+++ b/packages/element/src/sortElements.ts
@@ -1,4 +1,5 @@
-import { arrayToMapWithIndex } from "../utils";
+import { arrayToMapWithIndex } from "@excalidraw/common";
+
 import type { ExcalidrawElement } from "./types";
 
 const normalizeGroupElementOrder = (elements: readonly ExcalidrawElement[]) => {
diff --git a/packages/excalidraw/element/textElement.ts b/packages/element/src/textElement.ts
similarity index 89%
rename from packages/excalidraw/element/textElement.ts
rename to packages/element/src/textElement.ts
index de948d9ce..ea27c318f 100644
--- a/packages/excalidraw/element/textElement.ts
+++ b/packages/element/src/textElement.ts
@@ -1,4 +1,32 @@
-import { getFontString, arrayToMap } from "../utils";
+import {
+  ARROW_LABEL_FONT_SIZE_TO_MIN_WIDTH_RATIO,
+  ARROW_LABEL_WIDTH_FRACTION,
+  BOUND_TEXT_PADDING,
+  DEFAULT_FONT_SIZE,
+  TEXT_ALIGN,
+  VERTICAL_ALIGN,
+  getFontString,
+} from "@excalidraw/common";
+
+import type { AppState } from "@excalidraw/excalidraw/types";
+
+import type { ExtractSetType } from "@excalidraw/common/utility-types";
+
+import {
+  resetOriginalContainerCache,
+  updateOriginalContainerCache,
+} from "./containerCache";
+import { LinearElementEditor } from "./linearElementEditor";
+import { mutateElement } from "./mutateElement";
+import { measureText } from "./textMeasurements";
+import { wrapText } from "./textWrapping";
+import {
+  isBoundToContainer,
+  isArrowElement,
+  isTextElement,
+} from "./typeChecks";
+
+import type { MaybeTransformHandleType } from "./transformHandles";
 import type {
   ElementsMap,
   ExcalidrawElement,
@@ -8,27 +36,6 @@ import type {
   ExcalidrawTextElementWithContainer,
   NonDeletedExcalidrawElement,
 } from "./types";
-import { mutateElement } from "./mutateElement";
-import {
-  ARROW_LABEL_FONT_SIZE_TO_MIN_WIDTH_RATIO,
-  ARROW_LABEL_WIDTH_FRACTION,
-  BOUND_TEXT_PADDING,
-  DEFAULT_FONT_SIZE,
-  TEXT_ALIGN,
-  VERTICAL_ALIGN,
-} from "../constants";
-import type { MaybeTransformHandleType } from "./transformHandles";
-import { isTextElement } from ".";
-import { wrapText } from "./textWrapping";
-import { isBoundToContainer, isArrowElement } from "./typeChecks";
-import { LinearElementEditor } from "./linearElementEditor";
-import type { AppState } from "../types";
-import {
-  resetOriginalContainerCache,
-  updateOriginalContainerCache,
-} from "./containerCache";
-import type { ExtractSetType } from "../utility-types";
-import { measureText } from "./textMeasurements";
 
 export const redrawTextBoundingBox = (
   textElement: ExcalidrawTextElement,
@@ -109,48 +116,6 @@ export const redrawTextBoundingBox = (
   mutateElement(textElement, boundTextUpdates, informMutation);
 };
 
-export const bindTextToShapeAfterDuplication = (
-  newElements: ExcalidrawElement[],
-  oldElements: ExcalidrawElement[],
-  oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>,
-): void => {
-  const newElementsMap = arrayToMap(newElements) as Map<
-    ExcalidrawElement["id"],
-    ExcalidrawElement
-  >;
-  oldElements.forEach((element) => {
-    const newElementId = oldIdToDuplicatedId.get(element.id) as string;
-    const boundTextElementId = getBoundTextElementId(element);
-
-    if (boundTextElementId) {
-      const newTextElementId = oldIdToDuplicatedId.get(boundTextElementId);
-      if (newTextElementId) {
-        const newContainer = newElementsMap.get(newElementId);
-        if (newContainer) {
-          mutateElement(newContainer, {
-            boundElements: (element.boundElements || [])
-              .filter(
-                (boundElement) =>
-                  boundElement.id !== newTextElementId &&
-                  boundElement.id !== boundTextElementId,
-              )
-              .concat({
-                type: "text",
-                id: newTextElementId,
-              }),
-          });
-        }
-        const newTextElement = newElementsMap.get(newTextElementId);
-        if (newTextElement && isTextElement(newTextElement)) {
-          mutateElement(newTextElement, {
-            containerId: newContainer ? newElementId : null,
-          });
-        }
-      }
-    }
-  });
-};
-
 export const handleBindTextResize = (
   container: NonDeletedExcalidrawElement,
   elementsMap: ElementsMap,
diff --git a/packages/excalidraw/element/textMeasurements.ts b/packages/element/src/textMeasurements.ts
similarity index 98%
rename from packages/excalidraw/element/textMeasurements.ts
rename to packages/element/src/textMeasurements.ts
index f2a132a3a..5e790261d 100644
--- a/packages/excalidraw/element/textMeasurements.ts
+++ b/packages/element/src/textMeasurements.ts
@@ -2,8 +2,11 @@ import {
   BOUND_TEXT_PADDING,
   DEFAULT_FONT_SIZE,
   DEFAULT_FONT_FAMILY,
-} from "../constants";
-import { getFontString, isTestEnv, normalizeEOL } from "../utils";
+  getFontString,
+  isTestEnv,
+  normalizeEOL,
+} from "@excalidraw/common";
+
 import type { FontString, ExcalidrawTextElement } from "./types";
 
 export const measureText = (
diff --git a/packages/excalidraw/element/textWrapping.ts b/packages/element/src/textWrapping.ts
similarity index 99%
rename from packages/excalidraw/element/textWrapping.ts
rename to packages/element/src/textWrapping.ts
index 1913f6ed3..5ec9bb42a 100644
--- a/packages/excalidraw/element/textWrapping.ts
+++ b/packages/element/src/textWrapping.ts
@@ -1,5 +1,7 @@
-import { ENV } from "../constants";
+import { isDevEnv, isTestEnv } from "@excalidraw/common";
+
 import { charWidth, getLineWidth } from "./textMeasurements";
+
 import type { FontString } from "./types";
 
 let cachedCjkRegex: RegExp | undefined;
@@ -560,7 +562,7 @@ const isSingleCharacter = (maybeSingleCharacter: string) => {
  * Invariant for the word wrapping algorithm.
  */
 const satisfiesWordInvariant = (word: string) => {
-  if (import.meta.env.MODE === ENV.TEST || import.meta.env.DEV) {
+  if (isTestEnv() || isDevEnv()) {
     if (/\s/.test(word)) {
       throw new Error("Word should not contain any whitespaces!");
     }
diff --git a/packages/excalidraw/element/transformHandles.ts b/packages/element/src/transformHandles.ts
similarity index 98%
rename from packages/excalidraw/element/transformHandles.ts
rename to packages/element/src/transformHandles.ts
index d34eb3279..f2b0cd278 100644
--- a/packages/excalidraw/element/transformHandles.ts
+++ b/packages/element/src/transformHandles.ts
@@ -1,26 +1,34 @@
-import type {
-  ElementsMap,
-  ExcalidrawElement,
-  NonDeletedExcalidrawElement,
-  PointerType,
-} from "./types";
+import {
+  DEFAULT_TRANSFORM_HANDLE_SPACING,
+  isAndroid,
+  isIOS,
+} from "@excalidraw/common";
+
+import { pointFrom, pointRotateRads } from "@excalidraw/math";
+
+import type { Radians } from "@excalidraw/math";
+
+import type {
+  Device,
+  InteractiveCanvasAppState,
+  Zoom,
+} from "@excalidraw/excalidraw/types";
 
-import type { Bounds } from "./bounds";
 import { getElementAbsoluteCoords } from "./bounds";
-import type { Device, InteractiveCanvasAppState, Zoom } from "../types";
 import {
   isElbowArrow,
   isFrameLikeElement,
   isImageElement,
   isLinearElement,
 } from "./typeChecks";
-import {
-  DEFAULT_TRANSFORM_HANDLE_SPACING,
-  isAndroid,
-  isIOS,
-} from "../constants";
-import type { Radians } from "@excalidraw/math";
-import { pointFrom, pointRotateRads } from "@excalidraw/math";
+
+import type { Bounds } from "./bounds";
+import type {
+  ElementsMap,
+  ExcalidrawElement,
+  NonDeletedExcalidrawElement,
+  PointerType,
+} from "./types";
 
 export type TransformHandleDirection =
   | "n"
diff --git a/packages/excalidraw/element/typeChecks.ts b/packages/element/src/typeChecks.ts
similarity index 97%
rename from packages/excalidraw/element/typeChecks.ts
rename to packages/element/src/typeChecks.ts
index 6bb4269f8..54619726d 100644
--- a/packages/excalidraw/element/typeChecks.ts
+++ b/packages/element/src/typeChecks.ts
@@ -1,7 +1,9 @@
-import { ROUNDNESS } from "../constants";
-import type { ElementOrToolType } from "../types";
-import type { MarkNonNullable } from "../utility-types";
-import { assertNever } from "../utils";
+import { ROUNDNESS, assertNever } from "@excalidraw/common";
+
+import type { ElementOrToolType } from "@excalidraw/excalidraw/types";
+
+import type { MarkNonNullable } from "@excalidraw/common/utility-types";
+
 import type { Bounds } from "./bounds";
 import type {
   ExcalidrawElement,
diff --git a/packages/excalidraw/element/types.ts b/packages/element/src/types.ts
similarity index 99%
rename from packages/excalidraw/element/types.ts
rename to packages/element/src/types.ts
index 596586743..3b40135d5 100644
--- a/packages/excalidraw/element/types.ts
+++ b/packages/element/src/types.ts
@@ -1,17 +1,19 @@
 import type { LocalPoint, Radians } from "@excalidraw/math";
+
 import type {
   FONT_FAMILY,
   ROUNDNESS,
   TEXT_ALIGN,
   THEME,
   VERTICAL_ALIGN,
-} from "../constants";
+} from "@excalidraw/common";
+
 import type {
   MakeBrand,
   MarkNonNullable,
   Merge,
   ValueOf,
-} from "../utility-types";
+} from "@excalidraw/common/utility-types";
 
 export type ChartType = "bar" | "line";
 export type FillStyle = "hachure" | "cross-hatch" | "solid" | "zigzag";
diff --git a/packages/excalidraw/element/utils.ts b/packages/element/src/utils.ts
similarity index 99%
rename from packages/excalidraw/element/utils.ts
rename to packages/element/src/utils.ts
index d85cd78c6..7042b5d8f 100644
--- a/packages/excalidraw/element/utils.ts
+++ b/packages/element/src/utils.ts
@@ -1,5 +1,3 @@
-import { getDiamondPoints } from ".";
-import type { Curve, LineSegment } from "@excalidraw/math";
 import {
   curve,
   lineSegment,
@@ -11,7 +9,13 @@ import {
   vectorScale,
   type GlobalPoint,
 } from "@excalidraw/math";
-import { getCornerRadius } from "../shapes";
+
+import type { Curve, LineSegment } from "@excalidraw/math";
+
+import { getCornerRadius } from "./shapes";
+
+import { getDiamondPoints } from "./bounds";
+
 import type {
   ExcalidrawDiamondElement,
   ExcalidrawRectanguloidElement,
diff --git a/packages/excalidraw/zindex.ts b/packages/element/src/zindex.ts
similarity index 92%
rename from packages/excalidraw/zindex.ts
rename to packages/element/src/zindex.ts
index 1118ed533..e09142e4a 100644
--- a/packages/excalidraw/zindex.ts
+++ b/packages/element/src/zindex.ts
@@ -1,14 +1,18 @@
-import { isFrameLikeElement } from "./element/typeChecks";
-import type {
-  ExcalidrawElement,
-  ExcalidrawFrameLikeElement,
-} from "./element/types";
-import { syncMovedIndices } from "./fractionalIndex";
+import { arrayToMap, findIndex, findLastIndex } from "@excalidraw/common";
+
+import type { AppState } from "@excalidraw/excalidraw/types";
+
+import type Scene from "@excalidraw/excalidraw/scene/Scene";
+
+import { isFrameLikeElement } from "./typeChecks";
+
 import { getElementsInGroup } from "./groups";
-import { getSelectedElements } from "./scene";
-import Scene from "./scene/Scene";
-import type { AppState } from "./types";
-import { arrayToMap, findIndex, findLastIndex } from "./utils";
+
+import { syncMovedIndices } from "./fractionalIndex";
+
+import { getSelectedElements } from "./selection";
+
+import type { ExcalidrawElement, ExcalidrawFrameLikeElement } from "./types";
 
 const isOfTargetFrame = (element: ExcalidrawElement, frameId: string) => {
   return element.frameId === frameId || element.id === frameId;
@@ -78,11 +82,11 @@ const getTargetIndexAccountingForBinding = (
   nextElement: ExcalidrawElement,
   elements: readonly ExcalidrawElement[],
   direction: "left" | "right",
+  scene: Scene,
 ) => {
   if ("containerId" in nextElement && nextElement.containerId) {
-    const containerElement = Scene.getScene(nextElement)!.getElement(
-      nextElement.containerId,
-    );
+    // TODO: why not to get the container from the nextElements?
+    const containerElement = scene.getElement(nextElement.containerId);
     if (containerElement) {
       return direction === "left"
         ? Math.min(
@@ -99,8 +103,7 @@ const getTargetIndexAccountingForBinding = (
       (binding) => binding.type !== "arrow",
     )?.id;
     if (boundElementId) {
-      const boundTextElement =
-        Scene.getScene(nextElement)!.getElement(boundElementId);
+      const boundTextElement = scene.getElement(boundElementId);
       if (boundTextElement) {
         return direction === "left"
           ? Math.min(
@@ -150,6 +153,7 @@ const getTargetIndex = (
    * If whole frame (including all children) is being moved, supply `null`.
    */
   containingFrame: ExcalidrawFrameLikeElement["id"] | null,
+  scene: Scene,
 ) => {
   const sourceElement = elements[boundaryIndex];
 
@@ -189,8 +193,12 @@ const getTargetIndex = (
       sourceElement?.groupIds.join("") === nextElement?.groupIds.join("")
     ) {
       return (
-        getTargetIndexAccountingForBinding(nextElement, elements, direction) ??
-        candidateIndex
+        getTargetIndexAccountingForBinding(
+          nextElement,
+          elements,
+          direction,
+          scene,
+        ) ?? candidateIndex
       );
     } else if (!nextElement?.groupIds.includes(appState.editingGroupId)) {
       // candidate element is outside current editing group → prevent
@@ -213,8 +221,12 @@ const getTargetIndex = (
 
   if (!nextElement.groupIds.length) {
     return (
-      getTargetIndexAccountingForBinding(nextElement, elements, direction) ??
-      candidateIndex
+      getTargetIndexAccountingForBinding(
+        nextElement,
+        elements,
+        direction,
+        scene,
+      ) ?? candidateIndex
     );
   }
 
@@ -254,6 +266,7 @@ const shiftElementsByOne = (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
   direction: "left" | "right",
+  scene: Scene,
 ) => {
   const indicesToMove = getIndicesToMove(elements, appState);
   const targetElementsMap = getTargetElementsMap(elements, indicesToMove);
@@ -288,6 +301,7 @@ const shiftElementsByOne = (
       boundaryIndex,
       direction,
       containingFrame,
+      scene,
     );
 
     if (targetIndex === -1 || boundaryIndex === targetIndex) {
@@ -501,15 +515,17 @@ function shiftElementsAccountingForFrames(
 export const moveOneLeft = (
   allElements: readonly ExcalidrawElement[],
   appState: AppState,
+  scene: Scene,
 ) => {
-  return shiftElementsByOne(allElements, appState, "left");
+  return shiftElementsByOne(allElements, appState, "left", scene);
 };
 
 export const moveOneRight = (
   allElements: readonly ExcalidrawElement[],
   appState: AppState,
+  scene: Scene,
 ) => {
-  return shiftElementsByOne(allElements, appState, "right");
+  return shiftElementsByOne(allElements, appState, "right", scene);
 };
 
 export const moveAllLeft = (
diff --git a/packages/excalidraw/tests/align.test.tsx b/packages/element/tests/align.test.tsx
similarity index 97%
rename from packages/excalidraw/tests/align.test.tsx
rename to packages/element/tests/align.test.tsx
index 47624e8f4..2dcafc65b 100644
--- a/packages/excalidraw/tests/align.test.tsx
+++ b/packages/element/tests/align.test.tsx
@@ -1,10 +1,5 @@
-import React from "react";
-import { act, unmountComponent, render } from "./test-utils";
-import { Excalidraw } from "../index";
-import { defaultLang, setLanguage } from "../i18n";
-import { UI, Pointer, Keyboard } from "./helpers/ui";
-import { API } from "./helpers/api";
-import { KEYS } from "../keys";
+import { KEYS } from "@excalidraw/common";
+
 import {
   actionAlignVerticallyCentered,
   actionAlignHorizontallyCentered,
@@ -13,7 +8,17 @@ import {
   actionAlignBottom,
   actionAlignLeft,
   actionAlignRight,
-} from "../actions";
+} from "@excalidraw/excalidraw/actions";
+import { defaultLang, setLanguage } from "@excalidraw/excalidraw/i18n";
+import { Excalidraw } from "@excalidraw/excalidraw";
+
+import { API } from "@excalidraw/excalidraw/tests/helpers/api";
+import { UI, Pointer, Keyboard } from "@excalidraw/excalidraw/tests/helpers/ui";
+import {
+  act,
+  unmountComponent,
+  render,
+} from "@excalidraw/excalidraw/tests/test-utils";
 
 const mouse = new Pointer("mouse");
 
diff --git a/packages/excalidraw/tests/binding.test.tsx b/packages/element/tests/binding.test.tsx
similarity index 96%
rename from packages/excalidraw/tests/binding.test.tsx
rename to packages/element/tests/binding.test.tsx
index 905a44e70..f57d7793a 100644
--- a/packages/excalidraw/tests/binding.test.tsx
+++ b/packages/element/tests/binding.test.tsx
@@ -1,14 +1,17 @@
-import React from "react";
-import { fireEvent, render } from "./test-utils";
-import { Excalidraw, isLinearElement } from "../index";
-import { UI, Pointer, Keyboard } from "./helpers/ui";
-import { getTransformHandles } from "../element/transformHandles";
-import { API } from "./helpers/api";
-import { KEYS } from "../keys";
-import { actionWrapTextInContainer } from "../actions/actionBoundText";
-import { arrayToMap } from "../utils";
+import { KEYS, arrayToMap } from "@excalidraw/common";
+
 import { pointFrom } from "@excalidraw/math";
 
+import { actionWrapTextInContainer } from "@excalidraw/excalidraw/actions/actionBoundText";
+
+import { Excalidraw, isLinearElement } from "@excalidraw/excalidraw";
+
+import { API } from "@excalidraw/excalidraw/tests/helpers/api";
+import { UI, Pointer, Keyboard } from "@excalidraw/excalidraw/tests/helpers/ui";
+import { fireEvent, render } from "@excalidraw/excalidraw/tests/test-utils";
+
+import { getTransformHandles } from "../src/transformHandles";
+
 const { h } = window;
 
 const mouse = new Pointer("mouse");
diff --git a/packages/excalidraw/element/bounds.test.ts b/packages/element/tests/bounds.test.ts
similarity index 95%
rename from packages/excalidraw/element/bounds.test.ts
rename to packages/element/tests/bounds.test.ts
index 9d91d0925..22c669f28 100644
--- a/packages/excalidraw/element/bounds.test.ts
+++ b/packages/element/tests/bounds.test.ts
@@ -1,9 +1,12 @@
-import type { LocalPoint } from "@excalidraw/math";
 import { pointFrom } from "@excalidraw/math";
-import { ROUNDNESS } from "../constants";
-import { arrayToMap } from "../utils";
-import { getElementAbsoluteCoords, getElementBounds } from "./bounds";
-import type { ExcalidrawElement, ExcalidrawLinearElement } from "./types";
+
+import { arrayToMap, ROUNDNESS } from "@excalidraw/common";
+
+import type { LocalPoint } from "@excalidraw/math";
+
+import { getElementAbsoluteCoords, getElementBounds } from "../src/bounds";
+
+import type { ExcalidrawElement, ExcalidrawLinearElement } from "../src/types";
 
 const _ce = ({
   x,
diff --git a/packages/excalidraw/element/newElement.test.ts b/packages/element/tests/duplicate.test.tsx
similarity index 51%
rename from packages/excalidraw/element/newElement.test.ts
rename to packages/element/tests/duplicate.test.tsx
index 9c9006b6c..d3b5cee96 100644
--- a/packages/excalidraw/element/newElement.test.ts
+++ b/packages/element/tests/duplicate.test.tsx
@@ -1,12 +1,38 @@
-import { duplicateElement, duplicateElements } from "./newElement";
-import { mutateElement } from "./mutateElement";
-import { API } from "../tests/helpers/api";
-import { FONT_FAMILY, ROUNDNESS } from "../constants";
-import { isPrimitive } from "../utils";
-import type { ExcalidrawLinearElement } from "./types";
-import type { LocalPoint } from "@excalidraw/math";
+import React from "react";
 import { pointFrom } from "@excalidraw/math";
 
+import {
+  FONT_FAMILY,
+  ORIG_ID,
+  ROUNDNESS,
+  isPrimitive,
+} from "@excalidraw/common";
+
+import { Excalidraw } from "@excalidraw/excalidraw";
+
+import { actionDuplicateSelection } from "@excalidraw/excalidraw/actions";
+
+import { API } from "@excalidraw/excalidraw/tests/helpers/api";
+
+import { Keyboard, Pointer } from "@excalidraw/excalidraw/tests/helpers/ui";
+
+import {
+  act,
+  assertElements,
+  getCloneByOrigId,
+  render,
+} from "@excalidraw/excalidraw/tests/test-utils";
+
+import type { LocalPoint } from "@excalidraw/math";
+
+import { mutateElement } from "../src/mutateElement";
+import { duplicateElement, duplicateElements } from "../src/duplicate";
+
+import type { ExcalidrawLinearElement } from "../src/types";
+
+const { h } = window;
+const mouse = new Pointer("mouse");
+
 const assertCloneObjects = (source: any, clone: any) => {
   for (const key in clone) {
     if (clone.hasOwnProperty(key) && !isPrimitive(clone[key])) {
@@ -41,7 +67,7 @@ describe("duplicating single elements", () => {
       points: [pointFrom<LocalPoint>(1, 2), pointFrom<LocalPoint>(3, 4)],
     });
 
-    const copy = duplicateElement(null, new Map(), element);
+    const copy = duplicateElement(null, new Map(), element, undefined, true);
 
     assertCloneObjects(element, copy);
 
@@ -60,6 +86,8 @@ describe("duplicating single elements", () => {
       ...element,
       id: copy.id,
       seed: copy.seed,
+      version: copy.version,
+      versionNonce: copy.versionNonce,
     });
   });
 
@@ -145,7 +173,10 @@ describe("duplicating multiple elements", () => {
     // -------------------------------------------------------------------------
 
     const origElements = [rectangle1, text1, arrow1, arrow2, text2] as const;
-    const clonedElements = duplicateElements(origElements);
+    const { newElements: clonedElements } = duplicateElements({
+      type: "everything",
+      elements: origElements,
+    });
 
     // generic id in-equality checks
     // --------------------------------------------------------------------------
@@ -202,6 +233,7 @@ describe("duplicating multiple elements", () => {
         type: clonedText1.type,
       }),
     );
+    expect(clonedRectangle.type).toBe("rectangle");
 
     clonedArrows.forEach((arrow) => {
       expect(
@@ -277,7 +309,7 @@ describe("duplicating multiple elements", () => {
 
     const arrow3 = API.createElement({
       type: "arrow",
-      id: "arrow2",
+      id: "arrow3",
       startBinding: {
         elementId: "rectangle-not-exists",
         focus: 0.2,
@@ -295,9 +327,11 @@ describe("duplicating multiple elements", () => {
     // -------------------------------------------------------------------------
 
     const origElements = [rectangle1, text1, arrow1, arrow2, arrow3] as const;
-    const clonedElements = duplicateElements(
-      origElements,
-    ) as any as typeof origElements;
+    const { newElements: clonedElements } = duplicateElements({
+      type: "everything",
+      elements: origElements,
+    }) as any as { newElements: typeof origElements };
+
     const [
       clonedRectangle,
       clonedText1,
@@ -317,7 +351,6 @@ describe("duplicating multiple elements", () => {
       elementId: clonedRectangle.id,
     });
     expect(clonedArrow2.endBinding).toBe(null);
-
     expect(clonedArrow3.startBinding).toBe(null);
     expect(clonedArrow3.endBinding).toEqual({
       ...arrow3.endBinding,
@@ -341,9 +374,10 @@ describe("duplicating multiple elements", () => {
       });
 
       const origElements = [rectangle1, rectangle2, rectangle3] as const;
-      const clonedElements = duplicateElements(
-        origElements,
-      ) as any as typeof origElements;
+      const { newElements: clonedElements } = duplicateElements({
+        type: "everything",
+        elements: origElements,
+      }) as any as { newElements: typeof origElements };
       const [clonedRectangle1, clonedRectangle2, clonedRectangle3] =
         clonedElements;
 
@@ -364,10 +398,305 @@ describe("duplicating multiple elements", () => {
         groupIds: ["g1"],
       });
 
-      const [clonedRectangle1] = duplicateElements([rectangle1]);
+      const {
+        newElements: [clonedRectangle1],
+      } = duplicateElements({ type: "everything", elements: [rectangle1] });
 
       expect(typeof clonedRectangle1.groupIds[0]).toBe("string");
       expect(rectangle1.groupIds[0]).not.toBe(clonedRectangle1.groupIds[0]);
     });
   });
 });
+
+describe("duplication z-order", () => {
+  beforeEach(async () => {
+    await render(<Excalidraw />);
+  });
+
+  it("duplication z order with Cmd+D for the lowest z-ordered element should be +1 for the clone", () => {
+    const rectangle1 = API.createElement({
+      type: "rectangle",
+      x: 0,
+      y: 0,
+    });
+    const rectangle2 = API.createElement({
+      type: "rectangle",
+      x: 10,
+      y: 10,
+    });
+    const rectangle3 = API.createElement({
+      type: "rectangle",
+      x: 20,
+      y: 20,
+    });
+
+    API.setElements([rectangle1, rectangle2, rectangle3]);
+    API.setSelectedElements([rectangle1]);
+
+    act(() => {
+      h.app.actionManager.executeAction(actionDuplicateSelection);
+    });
+
+    assertElements(h.elements, [
+      { id: rectangle1.id },
+      { [ORIG_ID]: rectangle1.id, selected: true },
+      { id: rectangle2.id },
+      { id: rectangle3.id },
+    ]);
+  });
+
+  it("duplication z order with Cmd+D  for the highest z-ordered element should be +1 for the clone", () => {
+    const rectangle1 = API.createElement({
+      type: "rectangle",
+      x: 0,
+      y: 0,
+    });
+    const rectangle2 = API.createElement({
+      type: "rectangle",
+      x: 10,
+      y: 10,
+    });
+    const rectangle3 = API.createElement({
+      type: "rectangle",
+      x: 20,
+      y: 20,
+    });
+
+    API.setElements([rectangle1, rectangle2, rectangle3]);
+    API.setSelectedElements([rectangle3]);
+
+    act(() => {
+      h.app.actionManager.executeAction(actionDuplicateSelection);
+    });
+
+    assertElements(h.elements, [
+      { id: rectangle1.id },
+      { id: rectangle2.id },
+      { id: rectangle3.id },
+      { [ORIG_ID]: rectangle3.id, selected: true },
+    ]);
+  });
+
+  it("duplication z order with alt+drag for the lowest z-ordered element should be +1 for the clone", () => {
+    const rectangle1 = API.createElement({
+      type: "rectangle",
+      x: 0,
+      y: 0,
+    });
+    const rectangle2 = API.createElement({
+      type: "rectangle",
+      x: 10,
+      y: 10,
+    });
+    const rectangle3 = API.createElement({
+      type: "rectangle",
+      x: 20,
+      y: 20,
+    });
+
+    API.setElements([rectangle1, rectangle2, rectangle3]);
+
+    mouse.select(rectangle1);
+    Keyboard.withModifierKeys({ alt: true }, () => {
+      mouse.down(rectangle1.x + 5, rectangle1.y + 5);
+      mouse.up(rectangle1.x + 5, rectangle1.y + 5);
+    });
+
+    assertElements(h.elements, [
+      { [ORIG_ID]: rectangle1.id },
+      { id: rectangle1.id, selected: true },
+      { id: rectangle2.id },
+      { id: rectangle3.id },
+    ]);
+  });
+
+  it("duplication z order with alt+drag for the highest z-ordered element should be +1 for the clone", () => {
+    const rectangle1 = API.createElement({
+      type: "rectangle",
+      x: 0,
+      y: 0,
+    });
+    const rectangle2 = API.createElement({
+      type: "rectangle",
+      x: 10,
+      y: 10,
+    });
+    const rectangle3 = API.createElement({
+      type: "rectangle",
+      x: 20,
+      y: 20,
+    });
+
+    API.setElements([rectangle1, rectangle2, rectangle3]);
+
+    mouse.select(rectangle3);
+    Keyboard.withModifierKeys({ alt: true }, () => {
+      mouse.down(rectangle3.x + 5, rectangle3.y + 5);
+      mouse.up(rectangle3.x + 5, rectangle3.y + 5);
+    });
+
+    assertElements(h.elements, [
+      { id: rectangle1.id },
+      { id: rectangle2.id },
+      { [ORIG_ID]: rectangle3.id },
+      { id: rectangle3.id, selected: true },
+    ]);
+  });
+
+  it("duplication z order with alt+drag for the lowest z-ordered element should be +1 for the clone", () => {
+    const rectangle1 = API.createElement({
+      type: "rectangle",
+      x: 0,
+      y: 0,
+    });
+    const rectangle2 = API.createElement({
+      type: "rectangle",
+      x: 10,
+      y: 10,
+    });
+    const rectangle3 = API.createElement({
+      type: "rectangle",
+      x: 20,
+      y: 20,
+    });
+
+    API.setElements([rectangle1, rectangle2, rectangle3]);
+
+    mouse.select(rectangle1);
+    Keyboard.withModifierKeys({ alt: true }, () => {
+      mouse.down(rectangle1.x + 5, rectangle1.y + 5);
+      mouse.up(rectangle1.x + 5, rectangle1.y + 5);
+    });
+
+    assertElements(h.elements, [
+      { [ORIG_ID]: rectangle1.id },
+      { id: rectangle1.id, selected: true },
+      { id: rectangle2.id },
+      { id: rectangle3.id },
+    ]);
+  });
+
+  it("duplication z order with alt+drag with grouped elements should consider the group together when determining z-index", () => {
+    const rectangle1 = API.createElement({
+      type: "rectangle",
+      x: 0,
+      y: 0,
+      groupIds: ["group1"],
+    });
+    const rectangle2 = API.createElement({
+      type: "rectangle",
+      x: 10,
+      y: 10,
+      groupIds: ["group1"],
+    });
+    const rectangle3 = API.createElement({
+      type: "rectangle",
+      x: 20,
+      y: 20,
+      groupIds: ["group1"],
+    });
+
+    API.setElements([rectangle1, rectangle2, rectangle3]);
+
+    mouse.select(rectangle1);
+    Keyboard.withModifierKeys({ alt: true }, () => {
+      mouse.down(rectangle1.x + 5, rectangle1.y + 5);
+      mouse.up(rectangle1.x + 15, rectangle1.y + 15);
+    });
+
+    assertElements(h.elements, [
+      { [ORIG_ID]: rectangle1.id },
+      { [ORIG_ID]: rectangle2.id },
+      { [ORIG_ID]: rectangle3.id },
+      { id: rectangle1.id, selected: true },
+      { id: rectangle2.id, selected: true },
+      { id: rectangle3.id, selected: true },
+    ]);
+  });
+
+  it("reverse-duplicating text container (in-order)", async () => {
+    const [rectangle, text] = API.createTextContainer();
+    API.setElements([rectangle, text]);
+    API.setSelectedElements([rectangle, text]);
+
+    Keyboard.withModifierKeys({ alt: true }, () => {
+      mouse.down(rectangle.x + 5, rectangle.y + 5);
+      mouse.up(rectangle.x + 15, rectangle.y + 15);
+    });
+
+    assertElements(h.elements, [
+      { [ORIG_ID]: rectangle.id },
+      {
+        [ORIG_ID]: text.id,
+        containerId: getCloneByOrigId(rectangle.id)?.id,
+      },
+      { id: rectangle.id, selected: true },
+      { id: text.id, containerId: rectangle.id, selected: true },
+    ]);
+  });
+
+  it("reverse-duplicating text container (out-of-order)", async () => {
+    const [rectangle, text] = API.createTextContainer();
+    API.setElements([text, rectangle]);
+    API.setSelectedElements([rectangle, text]);
+
+    Keyboard.withModifierKeys({ alt: true }, () => {
+      mouse.down(rectangle.x + 5, rectangle.y + 5);
+      mouse.up(rectangle.x + 15, rectangle.y + 15);
+    });
+
+    assertElements(h.elements, [
+      { [ORIG_ID]: rectangle.id },
+      {
+        [ORIG_ID]: text.id,
+        containerId: getCloneByOrigId(rectangle.id)?.id,
+      },
+      { id: rectangle.id, selected: true },
+      { id: text.id, containerId: rectangle.id, selected: true },
+    ]);
+  });
+
+  it("reverse-duplicating labeled arrows (in-order)", async () => {
+    const [arrow, text] = API.createLabeledArrow();
+
+    API.setElements([arrow, text]);
+    API.setSelectedElements([arrow, text]);
+
+    Keyboard.withModifierKeys({ alt: true }, () => {
+      mouse.down(arrow.x + 5, arrow.y + 5);
+      mouse.up(arrow.x + 15, arrow.y + 15);
+    });
+
+    assertElements(h.elements, [
+      { [ORIG_ID]: arrow.id },
+      {
+        [ORIG_ID]: text.id,
+        containerId: getCloneByOrigId(arrow.id)?.id,
+      },
+      { id: arrow.id, selected: true },
+      { id: text.id, containerId: arrow.id, selected: true },
+    ]);
+  });
+
+  it("reverse-duplicating labeled arrows (out-of-order)", async () => {
+    const [arrow, text] = API.createLabeledArrow();
+
+    API.setElements([text, arrow]);
+    API.setSelectedElements([arrow, text]);
+
+    Keyboard.withModifierKeys({ alt: true }, () => {
+      mouse.down(arrow.x + 5, arrow.y + 5);
+      mouse.up(arrow.x + 15, arrow.y + 15);
+    });
+
+    assertElements(h.elements, [
+      { [ORIG_ID]: arrow.id },
+      {
+        [ORIG_ID]: text.id,
+        containerId: getCloneByOrigId(arrow.id)?.id,
+      },
+      { id: arrow.id, selected: true },
+      { id: text.id, containerId: arrow.id, selected: true },
+    ]);
+  });
+});
diff --git a/packages/excalidraw/element/elbowArrow.test.tsx b/packages/element/tests/elbowArrow.test.tsx
similarity index 92%
rename from packages/excalidraw/element/elbowArrow.test.tsx
rename to packages/element/tests/elbowArrow.test.tsx
index c00eae989..b8b5a8b85 100644
--- a/packages/excalidraw/element/elbowArrow.test.tsx
+++ b/packages/element/tests/elbowArrow.test.tsx
@@ -1,27 +1,33 @@
-import React from "react";
-import Scene from "../scene/Scene";
-import { API } from "../tests/helpers/api";
-import { Pointer, UI } from "../tests/helpers/ui";
+import { ARROW_TYPE } from "@excalidraw/common";
+import { pointFrom } from "@excalidraw/math";
+import { Excalidraw, mutateElement } from "@excalidraw/excalidraw";
+
+import Scene from "@excalidraw/excalidraw/scene/Scene";
+import { actionSelectAll } from "@excalidraw/excalidraw/actions";
+import { actionDuplicateSelection } from "@excalidraw/excalidraw/actions/actionDuplicateSelection";
+
+import { API } from "@excalidraw/excalidraw/tests/helpers/api";
+import { Pointer, UI } from "@excalidraw/excalidraw/tests/helpers/ui";
+
 import {
   act,
   fireEvent,
   GlobalTestState,
   queryByTestId,
   render,
-} from "../tests/test-utils";
-import { bindLinearElement } from "./binding";
-import { Excalidraw, mutateElement } from "../index";
+} from "@excalidraw/excalidraw/tests/test-utils";
+
+import "@excalidraw/utils/test-utils";
+
+import type { LocalPoint } from "@excalidraw/math";
+
+import { bindLinearElement } from "../src/binding";
+
 import type {
   ExcalidrawArrowElement,
   ExcalidrawBindableElement,
   ExcalidrawElbowArrowElement,
-} from "./types";
-import { ARROW_TYPE } from "../constants";
-import "../../utils/test-utils";
-import type { LocalPoint } from "@excalidraw/math";
-import { pointFrom } from "@excalidraw/math";
-import { actionDuplicateSelection } from "../actions/actionDuplicateSelection";
-import { actionSelectAll } from "../actions";
+} from "../src/types";
 
 const { h } = window;
 
@@ -354,7 +360,7 @@ describe("elbow arrow ui", () => {
     expect(arrow.endBinding).not.toBe(null);
   });
 
-  it("keeps arrow shape when only the bound arrow is duplicated", async () => {
+  it("changes arrow shape to unbind variant if only the connected elbow arrow is duplicated", async () => {
     UI.createElement("rectangle", {
       x: -150,
       y: -150,
@@ -400,8 +406,8 @@ describe("elbow arrow ui", () => {
     expect(duplicatedArrow.elbowed).toBe(true);
     expect(duplicatedArrow.points).toEqual([
       [0, 0],
-      [45, 0],
-      [45, 200],
+      [0, 100],
+      [90, 100],
       [90, 200],
     ]);
   });
diff --git a/packages/excalidraw/element/flowchart.test.tsx b/packages/element/tests/flowchart.test.tsx
similarity index 97%
rename from packages/excalidraw/element/flowchart.test.tsx
rename to packages/element/tests/flowchart.test.tsx
index d47c850b7..0130fb4c8 100644
--- a/packages/excalidraw/element/flowchart.test.tsx
+++ b/packages/element/tests/flowchart.test.tsx
@@ -1,9 +1,13 @@
-import { render, unmountComponent } from "../tests/test-utils";
-import { reseed } from "../random";
-import { UI, Keyboard, Pointer } from "../tests/helpers/ui";
-import { Excalidraw } from "../index";
-import { API } from "../tests/helpers/api";
-import { KEYS } from "../keys";
+import { KEYS, reseed } from "@excalidraw/common";
+
+import { Excalidraw } from "@excalidraw/excalidraw";
+
+import { API } from "@excalidraw/excalidraw/tests/helpers/api";
+import { UI, Keyboard, Pointer } from "@excalidraw/excalidraw/tests/helpers/ui";
+import {
+  render,
+  unmountComponent,
+} from "@excalidraw/excalidraw/tests/test-utils";
 
 unmountComponent();
 
diff --git a/packages/excalidraw/tests/fractionalIndex.test.ts b/packages/element/tests/fractionalIndex.test.ts
similarity index 98%
rename from packages/excalidraw/tests/fractionalIndex.test.ts
rename to packages/element/tests/fractionalIndex.test.ts
index b57af016b..5d040e29f 100644
--- a/packages/excalidraw/tests/fractionalIndex.test.ts
+++ b/packages/element/tests/fractionalIndex.test.ts
@@ -1,15 +1,24 @@
 /* eslint-disable no-lone-blocks */
+import { generateKeyBetween } from "fractional-indexing";
+
+import { arrayToMap } from "@excalidraw/common";
+
 import {
   syncInvalidIndices,
   syncMovedIndices,
   validateFractionalIndices,
-} from "../fractionalIndex";
-import { API } from "./helpers/api";
-import { arrayToMap } from "../utils";
-import { InvalidFractionalIndexError } from "../errors";
-import type { ExcalidrawElement, FractionalIndex } from "../element/types";
-import { deepCopyElement } from "../element/newElement";
-import { generateKeyBetween } from "fractional-indexing";
+} from "@excalidraw/element/fractionalIndex";
+
+import { deepCopyElement } from "@excalidraw/element/duplicate";
+
+import { API } from "@excalidraw/excalidraw/tests/helpers/api";
+
+import type {
+  ExcalidrawElement,
+  FractionalIndex,
+} from "@excalidraw/element/types";
+
+import { InvalidFractionalIndexError } from "../src/fractionalIndex";
 
 describe("sync invalid indices with array order", () => {
   describe("should NOT sync empty array", () => {
diff --git a/packages/excalidraw/frame.test.tsx b/packages/element/tests/frame.test.tsx
similarity index 97%
rename from packages/excalidraw/frame.test.tsx
rename to packages/element/tests/frame.test.tsx
index 6a5045b2c..47f2160ac 100644
--- a/packages/excalidraw/frame.test.tsx
+++ b/packages/element/tests/frame.test.tsx
@@ -1,8 +1,16 @@
-import type { ExcalidrawElement } from "./element/types";
-import { convertToExcalidrawElements, Excalidraw } from "./index";
-import { API } from "./tests/helpers/api";
-import { Keyboard, Pointer } from "./tests/helpers/ui";
-import { getCloneByOrigId, render } from "./tests/test-utils";
+import {
+  convertToExcalidrawElements,
+  Excalidraw,
+} from "@excalidraw/excalidraw";
+
+import { API } from "@excalidraw/excalidraw/tests/helpers/api";
+import { Keyboard, Pointer } from "@excalidraw/excalidraw/tests/helpers/ui";
+import {
+  getCloneByOrigId,
+  render,
+} from "@excalidraw/excalidraw/tests/test-utils";
+
+import type { ExcalidrawElement } from "../src/types";
 
 const { h } = window;
 const mouse = new Pointer("mouse");
diff --git a/packages/excalidraw/tests/resize.test.tsx b/packages/element/tests/resize.test.tsx
similarity index 98%
rename from packages/excalidraw/tests/resize.test.tsx
rename to packages/element/tests/resize.test.tsx
index 3ebd8cf81..f3804e2a2 100644
--- a/packages/excalidraw/tests/resize.test.tsx
+++ b/packages/element/tests/resize.test.tsx
@@ -1,24 +1,33 @@
-import React from "react";
-import { render, unmountComponent } from "./test-utils";
-import { reseed } from "../random";
-import { UI, Keyboard, Pointer } from "./helpers/ui";
+import { pointFrom } from "@excalidraw/math";
+
+import { Excalidraw } from "@excalidraw/excalidraw";
+import {
+  KEYS,
+  getSizeFromPoints,
+  reseed,
+  arrayToMap,
+} from "@excalidraw/common";
+
+import { API } from "@excalidraw/excalidraw/tests/helpers/api";
+import { UI, Keyboard, Pointer } from "@excalidraw/excalidraw/tests/helpers/ui";
+import {
+  render,
+  unmountComponent,
+} from "@excalidraw/excalidraw/tests/test-utils";
+
+import type { LocalPoint } from "@excalidraw/math";
+
+import { isLinearElement } from "../src/typeChecks";
+import { resizeSingleElement } from "../src/resizeElements";
+import { LinearElementEditor } from "../src/linearElementEditor";
+import { getElementPointsCoords } from "../src/bounds";
+
+import type { Bounds } from "../src/bounds";
 import type {
   ExcalidrawElbowArrowElement,
   ExcalidrawFreeDrawElement,
   ExcalidrawLinearElement,
-} from "../element/types";
-import type { Bounds } from "../element/bounds";
-import { getElementPointsCoords } from "../element/bounds";
-import { Excalidraw } from "../index";
-import { API } from "./helpers/api";
-import { KEYS } from "../keys";
-import { isLinearElement } from "../element/typeChecks";
-import { LinearElementEditor } from "../element/linearElementEditor";
-import { arrayToMap } from "../utils";
-import type { LocalPoint } from "@excalidraw/math";
-import { pointFrom } from "@excalidraw/math";
-import { resizeSingleElement } from "../element/resizeElements";
-import { getSizeFromPoints } from "../points";
+} from "../src/types";
 
 unmountComponent();
 
diff --git a/packages/excalidraw/scene/selection.test.ts b/packages/element/tests/selection.test.ts
similarity index 95%
rename from packages/excalidraw/scene/selection.test.ts
rename to packages/element/tests/selection.test.ts
index 644d2129f..fbcdb2693 100644
--- a/packages/excalidraw/scene/selection.test.ts
+++ b/packages/element/tests/selection.test.ts
@@ -1,4 +1,4 @@
-import { makeNextSelectedElementIds } from "./selection";
+import { makeNextSelectedElementIds } from "../src/selection";
 
 describe("makeNextSelectedElementIds", () => {
   const _makeNextSelectedElementIds = (
diff --git a/packages/excalidraw/element/sizeHelpers.test.ts b/packages/element/tests/sizeHelpers.test.ts
similarity index 95%
rename from packages/excalidraw/element/sizeHelpers.test.ts
rename to packages/element/tests/sizeHelpers.test.ts
index 8e63dd9da..168a9a2ad 100644
--- a/packages/excalidraw/element/sizeHelpers.test.ts
+++ b/packages/element/tests/sizeHelpers.test.ts
@@ -1,13 +1,15 @@
 import { vi } from "vitest";
-import { getPerfectElementSize } from "./sizeHelpers";
-import * as constants from "../constants";
+
+import * as constants from "@excalidraw/common";
+
+import { getPerfectElementSize } from "../src/sizeHelpers";
 
 const EPSILON_DIGITS = 3;
 // Needed so that we can mock the value of constants which is done in
 // below tests. In Jest this wasn't needed as global override was possible
 // but vite doesn't allow that hence we need to mock
 vi.mock(
-  "../constants.ts",
+  "@excalidraw/common",
   //@ts-ignore
   async (importOriginal) => {
     const module: any = await importOriginal();
diff --git a/packages/excalidraw/element/sortElements.test.ts b/packages/element/tests/sortElements.test.ts
similarity index 97%
rename from packages/excalidraw/element/sortElements.test.ts
rename to packages/element/tests/sortElements.test.ts
index a7b78e8ea..509e5e9d0 100644
--- a/packages/excalidraw/element/sortElements.test.ts
+++ b/packages/element/tests/sortElements.test.ts
@@ -1,7 +1,9 @@
-import { API } from "../tests/helpers/api";
-import { mutateElement } from "./mutateElement";
-import { normalizeElementOrder } from "./sortElements";
-import type { ExcalidrawElement } from "./types";
+import { API } from "@excalidraw/excalidraw/tests/helpers/api";
+
+import { mutateElement } from "../src/mutateElement";
+import { normalizeElementOrder } from "../src/sortElements";
+
+import type { ExcalidrawElement } from "../src/types";
 
 const assertOrder = (
   elements: readonly ExcalidrawElement[],
diff --git a/packages/excalidraw/element/textElement.test.ts b/packages/element/tests/textElement.test.ts
similarity index 94%
rename from packages/excalidraw/element/textElement.test.ts
rename to packages/element/tests/textElement.test.ts
index 2c23c2b06..5c10681a7 100644
--- a/packages/excalidraw/element/textElement.test.ts
+++ b/packages/element/tests/textElement.test.ts
@@ -1,14 +1,17 @@
-import { FONT_FAMILY } from "../constants";
-import { getLineHeight } from "../fonts";
-import { API } from "../tests/helpers/api";
+import { getLineHeight } from "@excalidraw/common";
+import { API } from "@excalidraw/excalidraw/tests/helpers/api";
+
+import { FONT_FAMILY } from "@excalidraw/common";
+
 import {
   computeContainerDimensionForBoundText,
   getContainerCoords,
   getBoundTextMaxWidth,
   getBoundTextMaxHeight,
-} from "./textElement";
-import { detectLineHeight, getLineHeightInPx } from "./textMeasurements";
-import type { ExcalidrawTextElementWithContainer } from "./types";
+} from "../src/textElement";
+import { detectLineHeight, getLineHeightInPx } from "../src/textMeasurements";
+
+import type { ExcalidrawTextElementWithContainer } from "../src/types";
 
 describe("Test measureText", () => {
   describe("Test getContainerCoords", () => {
diff --git a/packages/excalidraw/element/textWrapping.test.ts b/packages/element/tests/textWrapping.test.ts
similarity index 99%
rename from packages/excalidraw/element/textWrapping.test.ts
rename to packages/element/tests/textWrapping.test.ts
index 6c7bcb819..87c96a4c9 100644
--- a/packages/excalidraw/element/textWrapping.test.ts
+++ b/packages/element/tests/textWrapping.test.ts
@@ -1,5 +1,6 @@
-import { wrapText, parseTokens } from "./textWrapping";
-import type { FontString } from "./types";
+import { wrapText, parseTokens } from "../src/textWrapping";
+
+import type { FontString } from "../src/types";
 
 describe("Test wrapText", () => {
   // font is irrelevant as jsdom does not support FontFace API
diff --git a/packages/excalidraw/element/typeChecks.test.ts b/packages/element/tests/typeChecks.test.ts
similarity index 92%
rename from packages/excalidraw/element/typeChecks.test.ts
rename to packages/element/tests/typeChecks.test.ts
index 60eb9e273..6be81aaa6 100644
--- a/packages/excalidraw/element/typeChecks.test.ts
+++ b/packages/element/tests/typeChecks.test.ts
@@ -1,5 +1,6 @@
-import { API } from "../tests/helpers/api";
-import { hasBoundTextElement } from "./typeChecks";
+import { API } from "@excalidraw/excalidraw/tests/helpers/api";
+
+import { hasBoundTextElement } from "../src/typeChecks";
 
 describe("Test TypeChecks", () => {
   describe("Test hasBoundTextElement", () => {
diff --git a/packages/excalidraw/tests/zindex.test.tsx b/packages/element/tests/zindex.test.tsx
similarity index 98%
rename from packages/excalidraw/tests/zindex.test.tsx
rename to packages/element/tests/zindex.test.tsx
index f15d55931..997cb56f8 100644
--- a/packages/excalidraw/tests/zindex.test.tsx
+++ b/packages/element/tests/zindex.test.tsx
@@ -1,22 +1,32 @@
-import React from "react";
-import { act, getCloneByOrigId, render, unmountComponent } from "./test-utils";
-import { Excalidraw } from "../index";
-import { reseed } from "../random";
+import { reseed } from "@excalidraw/common";
+
 import {
   actionSendBackward,
   actionBringForward,
   actionBringToFront,
   actionSendToBack,
   actionDuplicateSelection,
-} from "../actions";
-import type { AppState } from "../types";
-import { API } from "./helpers/api";
-import { selectGroupsForSelectedElements } from "../groups";
+} from "@excalidraw/excalidraw/actions";
+
+import { Excalidraw } from "@excalidraw/excalidraw";
+
+import { API } from "@excalidraw/excalidraw/tests/helpers/api";
+import {
+  act,
+  getCloneByOrigId,
+  render,
+  unmountComponent,
+} from "@excalidraw/excalidraw/tests/test-utils";
+
+import type { AppState } from "@excalidraw/excalidraw/types";
+
+import { selectGroupsForSelectedElements } from "../src/groups";
+
 import type {
   ExcalidrawElement,
   ExcalidrawFrameElement,
   ExcalidrawSelectionElement,
-} from "../element/types";
+} from "../src/types";
 
 unmountComponent();
 
diff --git a/packages/element/tsconfig.json b/packages/element/tsconfig.json
new file mode 100644
index 000000000..6450145b1
--- /dev/null
+++ b/packages/element/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist/types"
+  },
+  "include": ["src/**/*", "global.d.ts"],
+  "exclude": ["**/*.test.*", "tests", "types", "examples", "dist"]
+}
diff --git a/packages/eslintrc.base.json b/packages/eslintrc.base.json
new file mode 100644
index 000000000..88d006a09
--- /dev/null
+++ b/packages/eslintrc.base.json
@@ -0,0 +1,21 @@
+{
+  "overrides": [
+    {
+      "files": ["src/**/*.{ts,tsx}"],
+      "rules": {
+        "@typescript-eslint/no-restricted-imports": [
+          "error",
+          {
+            "patterns": [
+              {
+                "group": ["../../excalidraw", "../../../packages/excalidraw", "@excalidraw/excalidraw"],
+                "message": "Do not import from '@excalidraw/excalidraw' package anything but types, as this package must be independent.",
+                "allowTypeImports": true
+              }
+            ]
+          }
+        ]
+      }
+    }
+  ]
+}
diff --git a/packages/excalidraw/CHANGELOG.md b/packages/excalidraw/CHANGELOG.md
index 568492e83..e4a98d19e 100644
--- a/packages/excalidraw/CHANGELOG.md
+++ b/packages/excalidraw/CHANGELOG.md
@@ -45,9 +45,9 @@ Please add the latest change on the top under the correct section.
 
 #### Deprecated UMD bundle in favor of ES modules [#7441](https://github.com/excalidraw/excalidraw/pull/7441), [#9127](https://github.com/excalidraw/excalidraw/pull/9127)
 
-We've transitioned from `UMD` to `ESM` bundle format. Our new `dist` bundles inside `@excalidraw/excalidraw` package now contain only bundled source files, making any dependencies tree-shakable. The npm package comes with the following structure:
+We've transitioned from `UMD` to `ESM` bundle format. Our new `dist` folder inside `@excalidraw/excalidraw` package now contains only bundled source files, making any dependencies tree-shakable. The package comes with the following structure:
 
-> **Note**: The structure is simplified for the sake of brevity, omitting lazy-loadable modules, including locales (previously treated as json assets) and source maps in the development bundle.
+> **Note**: The structure is simplified for the sake of brevity, omitting lazy-loadable modules, including locales (previously treated as JSON assets) and source maps in the development bundle.
 
 ```
 @excalidraw/excalidraw/
@@ -72,7 +72,7 @@ Since `"node"` and `"node10"` do not support `package.json` `"exports"` fields,
 
 ##### ESM strict resolution
 
-Due to ESM strict resolution, if you're using Webpack or other bundler that expects import paths to be fully specified, you'll need to explicitly disable this feature.
+Due to ESM's strict resolution, if you're using Webpack or other bundler that expects import paths to be fully specified, you'll need to disable this feature explicitly.
 
 For example in Webpack, you should set [`resolve.fullySpecified`](https://webpack.js.org/configuration/resolve/#resolvefullyspecified) to `false`.
 
@@ -80,7 +80,7 @@ For this reason, CRA will no longer work unless you eject or use a workaround su
 
 ##### New structure of the imports
 
-Dependening on the environment, this is how imports should look like with the `ESM`:
+Depending on the environment, this is how imports should look like with the `ESM`:
 
 **With bundler (Vite, Next.js, etc.)**
 
@@ -128,7 +128,7 @@ The `excalidraw-assets` and `excalidraw-assets-dev` folders, which contained loc
 
 ##### Locales
 
-Locales are no longer treated as static `.json` assets, but are transpiled with `esbuild` dirrectly to the `.js` as ES modules. Note that some build tools (i.e. Vite) may require setting `es2022` as a build target, in order to support "Arbitrary module namespace identifier names", e.g. `export { english as "en-us" } )`.
+Locales are no longer treated as static `.json` assets but are transpiled with `esbuild` directly to the `.js` as ES modules. Note that some build tools (i.e. Vite) may require setting `es2022` as a build target, in order to support "Arbitrary module namespace identifier names", e.g. `export { english as "en-us" } )`.
 
 ```js
 // vite.config.js
@@ -145,7 +145,7 @@ optimizeDeps: {
 
 ##### Fonts
 
-New fonts, which we've added, are automatically loaded from the CDN. For self-hosting purposes, you'll have to copy the content of the folder `node_modules/@excalidraw/excalidraw/dist/prod/fonts` to the path where your assets should be served from (i.e. `public/` directory in your project). In that case, you should also set `window.EXCALIDRAW_ASSET_PATH` to the very same path, i.e. `/` in case it's in the root:
+All fonts are automatically loaded from the [esm.run](https://esm.run/) CDN. For self-hosting purposes, you'll have to copy the content of the folder `node_modules/@excalidraw/excalidraw/dist/prod/fonts` to the path where your assets should be served from (i.e. `public/` directory in your project). In that case, you should also set `window.EXCALIDRAW_ASSET_PATH` to the very same path, i.e. `/` in case it's in the root:
 
 ```js
 <script>window.EXCALIDRAW_ASSET_PATH = "/";</script>
@@ -159,7 +159,7 @@ or, if you serve your assets from the root of your CDN, you would do:
 </script>
 ```
 
-or, if you prefer the path to be dynamicly set based on the `location.origin`, you could do the following:
+or, if you prefer the path to be dynamically set based on the `location.origin`, you could do the following:
 
 ```jsx
 // Next.js
@@ -189,7 +189,7 @@ updateScene({
 }); // B
 ```
 
-The `updateScene` API has changed due to the added `Store` component, as part of multiplayer undo / redo initiative. Specifically, optional `sceneData` parameter `commitToHistory: boolean` was replaced with optional `captureUpdate: CaptureUpdateActionType` parameter. Therefore, make sure to update all instances of `updateScene`, which use `commitToHistory` parameter according to the _before / after_ table below.
+The `updateScene` API has changed due to the added `Store` component, as part of the multiplayer undo / redo initiative. Specifically, optional `sceneData` parameter `commitToHistory: boolean` was replaced with optional `captureUpdate: CaptureUpdateActionType` parameter. Therefore, make sure to update all instances of `updateScene`, which use `commitToHistory` parameter according to the _before / after_ table below.
 
 > **Note**: Some updates are not observed by the store / history - i.e. updates to `collaborators` object or parts of `AppState` which are not observed (not `ObservedAppState`). Such updates will never make it to the undo / redo stacks, regardless of the passed `captureUpdate` value.
 
@@ -203,7 +203,7 @@ The `updateScene` API has changed due to the added `Store` component, as part of
 
 - `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. [#7693](https://github.com/excalidraw/excalidraw/pull/7693)
 
-- `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)
+- `ExcalidrawEmbeddableElement.validated` was removed and moved to the 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)
 
 - Stats container CSS has changed, so if you're using `renderCustomStats`, you may need to adjust your styles to retain the same layout. [#8361](https://github.com/excalidraw/excalidraw/pull/8361)
 
@@ -487,7 +487,7 @@ The `updateScene` API has changed due to the added `Store` component, as part of
 
 - Linear element complete button disabled [#8492](https://github.com/excalidraw/excalidraw/pull/8492)
 
-- Aspect ratio of distorted images are not preserved in SVG exports [#8061](https://github.com/excalidraw/excalidraw/pull/8061)
+- Aspect ratios of distorted images are not preserved in SVG exports [#8061](https://github.com/excalidraw/excalidraw/pull/8061)
 
 - WYSIWYG editor padding is not normalized with zoom.value [#8481](https://github.com/excalidraw/excalidraw/pull/8481)
 
@@ -517,7 +517,7 @@ The `updateScene` API has changed due to the added `Store` component, as part of
 
 - Round coordinates and sizes for rectangle intersection [#8366](https://github.com/excalidraw/excalidraw/pull/8366)
 
-- Text content with tab characters act different in view/edit [#8336](https://github.com/excalidraw/excalidraw/pull/8336)
+- Text content with tab characters act differently in view/edit [#8336](https://github.com/excalidraw/excalidraw/pull/8336)
 
 - Drawing from 0-dimension canvas [#8356](https://github.com/excalidraw/excalidraw/pull/8356)
 
diff --git a/packages/excalidraw/actions/actionAddToLibrary.ts b/packages/excalidraw/actions/actionAddToLibrary.ts
index 3186e3bcb..9216e52c2 100644
--- a/packages/excalidraw/actions/actionAddToLibrary.ts
+++ b/packages/excalidraw/actions/actionAddToLibrary.ts
@@ -1,10 +1,11 @@
-import { register } from "./register";
-import { deepCopyElement } from "../element/newElement";
-import { randomId } from "../random";
+import { LIBRARY_DISABLED_TYPES, randomId } from "@excalidraw/common";
+import { deepCopyElement } from "@excalidraw/element/duplicate";
+
 import { t } from "../i18n";
-import { LIBRARY_DISABLED_TYPES } from "../constants";
 import { CaptureUpdateAction } from "../store";
 
+import { register } from "./register";
+
 export const actionAddToLibrary = register({
   name: "addToLibrary",
   trackEvent: { category: "element" },
diff --git a/packages/excalidraw/actions/actionAlign.tsx b/packages/excalidraw/actions/actionAlign.tsx
index 53e8e618b..46023d61e 100644
--- a/packages/excalidraw/actions/actionAlign.tsx
+++ b/packages/excalidraw/actions/actionAlign.tsx
@@ -1,5 +1,18 @@
-import type { Alignment } from "../align";
-import { alignElements } from "../align";
+import { getNonDeletedElements } from "@excalidraw/element";
+
+import { isFrameLikeElement } from "@excalidraw/element/typeChecks";
+
+import { updateFrameMembershipOfSelectedElements } from "@excalidraw/element/frame";
+
+import { KEYS, arrayToMap, getShortcutKey } from "@excalidraw/common";
+
+import { alignElements } from "@excalidraw/element/align";
+
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+
+import type { Alignment } from "@excalidraw/element/align";
+
+import { ToolButton } from "../components/ToolButton";
 import {
   AlignBottomIcon,
   AlignLeftIcon,
@@ -8,19 +21,16 @@ import {
   CenterHorizontallyIcon,
   CenterVerticallyIcon,
 } from "../components/icons";
-import { ToolButton } from "../components/ToolButton";
-import { getNonDeletedElements } from "../element";
-import { isFrameLikeElement } from "../element/typeChecks";
-import type { ExcalidrawElement } from "../element/types";
-import { updateFrameMembershipOfSelectedElements } from "../frame";
+
 import { t } from "../i18n";
-import { KEYS } from "../keys";
+
 import { isSomeElementSelected } from "../scene";
 import { CaptureUpdateAction } from "../store";
-import type { AppClassProperties, AppState, UIAppState } from "../types";
-import { arrayToMap, getShortcutKey } from "../utils";
+
 import { register } from "./register";
 
+import type { AppClassProperties, AppState, UIAppState } from "../types";
+
 export const alignActionsPredicate = (
   appState: UIAppState,
   app: AppClassProperties,
diff --git a/packages/excalidraw/actions/actionBoundText.tsx b/packages/excalidraw/actions/actionBoundText.tsx
index b72ddee64..7cb10c045 100644
--- a/packages/excalidraw/actions/actionBoundText.tsx
+++ b/packages/excalidraw/actions/actionBoundText.tsx
@@ -3,38 +3,50 @@ import {
   ROUNDNESS,
   TEXT_ALIGN,
   VERTICAL_ALIGN,
-} from "../constants";
-import { isTextElement, newElement } from "../element";
-import { mutateElement } from "../element/mutateElement";
+  arrayToMap,
+  getFontString,
+} from "@excalidraw/common";
+import {
+  getOriginalContainerHeightFromCache,
+  resetOriginalContainerCache,
+  updateOriginalContainerCache,
+} from "@excalidraw/element/containerCache";
+
 import {
   computeBoundTextPosition,
   computeContainerDimensionForBoundText,
   getBoundTextElement,
   redrawTextBoundingBox,
-} from "../element/textElement";
-import {
-  getOriginalContainerHeightFromCache,
-  resetOriginalContainerCache,
-  updateOriginalContainerCache,
-} from "../element/containerCache";
+} from "@excalidraw/element/textElement";
+
 import {
   hasBoundTextElement,
   isTextBindableContainer,
+  isTextElement,
   isUsingAdaptiveRadius,
-} from "../element/typeChecks";
+} from "@excalidraw/element/typeChecks";
+
+import { mutateElement } from "@excalidraw/element/mutateElement";
+import { measureText } from "@excalidraw/element/textMeasurements";
+
+import { syncMovedIndices } from "@excalidraw/element/fractionalIndex";
+
+import { newElement } from "@excalidraw/element/newElement";
+
 import type {
   ExcalidrawElement,
   ExcalidrawLinearElement,
   ExcalidrawTextContainer,
   ExcalidrawTextElement,
-} from "../element/types";
-import type { AppState } from "../types";
-import type { Mutable } from "../utility-types";
-import { arrayToMap, getFontString } from "../utils";
-import { register } from "./register";
-import { syncMovedIndices } from "../fractionalIndex";
+} from "@excalidraw/element/types";
+
+import type { Mutable } from "@excalidraw/common/utility-types";
+
 import { CaptureUpdateAction } from "../store";
-import { measureText } from "../element/textMeasurements";
+
+import { register } from "./register";
+
+import type { AppState } from "../types";
 
 export const actionUnbindText = register({
   name: "unbindText",
diff --git a/packages/excalidraw/actions/actionCanvas.tsx b/packages/excalidraw/actions/actionCanvas.tsx
index 903a6d84a..0aa83944f 100644
--- a/packages/excalidraw/actions/actionCanvas.tsx
+++ b/packages/excalidraw/actions/actionCanvas.tsx
@@ -1,4 +1,32 @@
+import { clamp, roundToStep } from "@excalidraw/math";
+
+import {
+  DEFAULT_CANVAS_BACKGROUND_PICKS,
+  CURSOR_TYPE,
+  MAX_ZOOM,
+  MIN_ZOOM,
+  THEME,
+  ZOOM_STEP,
+  getShortcutKey,
+  updateActiveTool,
+  CODES,
+  KEYS,
+} from "@excalidraw/common";
+
+import { getNonDeletedElements } from "@excalidraw/element";
+import { newElementWith } from "@excalidraw/element/mutateElement";
+import { getCommonBounds, type SceneBounds } from "@excalidraw/element/bounds";
+
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+
+import {
+  getDefaultAppState,
+  isEraserActive,
+  isHandToolActive,
+} from "../appState";
 import { ColorPicker } from "../components/ColorPicker/ColorPicker";
+import { ToolButton } from "../components/ToolButton";
+import { Tooltip } from "../components/Tooltip";
 import {
   handIcon,
   MoonIcon,
@@ -9,36 +37,17 @@ import {
   ZoomOutIcon,
   ZoomResetIcon,
 } from "../components/icons";
-import { ToolButton } from "../components/ToolButton";
-import {
-  CURSOR_TYPE,
-  MAX_ZOOM,
-  MIN_ZOOM,
-  THEME,
-  ZOOM_STEP,
-} from "../constants";
-import { getCommonBounds, getNonDeletedElements } from "../element";
-import type { ExcalidrawElement } from "../element/types";
+import { setCursor } from "../cursor";
+
 import { t } from "../i18n";
-import { CODES, KEYS } from "../keys";
 import { getNormalizedZoom } from "../scene";
 import { centerScrollOn } from "../scene/scroll";
 import { getStateForZoom } from "../scene/zoom";
-import type { AppState, Offsets } from "../types";
-import { getShortcutKey, updateActiveTool } from "../utils";
-import { register } from "./register";
-import { Tooltip } from "../components/Tooltip";
-import { newElementWith } from "../element/mutateElement";
-import {
-  getDefaultAppState,
-  isEraserActive,
-  isHandToolActive,
-} from "../appState";
-import { DEFAULT_CANVAS_BACKGROUND_PICKS } from "../colors";
-import type { SceneBounds } from "../element/bounds";
-import { setCursor } from "../cursor";
 import { CaptureUpdateAction } from "../store";
-import { clamp, roundToStep } from "@excalidraw/math";
+
+import { register } from "./register";
+
+import type { AppState, Offsets } from "../types";
 
 export const actionChangeViewBackgroundColor = register({
   name: "changeViewBackgroundColor",
diff --git a/packages/excalidraw/actions/actionClipboard.tsx b/packages/excalidraw/actions/actionClipboard.tsx
index fffe7b377..9de6d70f4 100644
--- a/packages/excalidraw/actions/actionClipboard.tsx
+++ b/packages/excalidraw/actions/actionClipboard.tsx
@@ -1,5 +1,8 @@
-import { CODES, KEYS } from "../keys";
-import { register } from "./register";
+import { isTextElement } from "@excalidraw/element/typeChecks";
+import { getTextFromElements } from "@excalidraw/element/textElement";
+
+import { CODES, KEYS, isFirefox } from "@excalidraw/common";
+
 import {
   copyTextToSystemClipboard,
   copyToClipboard,
@@ -8,14 +11,15 @@ import {
   probablySupportsClipboardWriteText,
   readSystemClipboard,
 } from "../clipboard";
-import { actionDeleteSelected } from "./actionDeleteSelected";
-import { exportCanvas, prepareElementsForExport } from "../data/index";
-import { getTextFromElements, isTextElement } from "../element";
-import { t } from "../i18n";
-import { isFirefox } from "../constants";
 import { DuplicateIcon, cutIcon, pngIcon, svgIcon } from "../components/icons";
+import { exportCanvas, prepareElementsForExport } from "../data/index";
+import { t } from "../i18n";
+
 import { CaptureUpdateAction } from "../store";
 
+import { actionDeleteSelected } from "./actionDeleteSelected";
+import { register } from "./register";
+
 export const actionCopy = register({
   name: "copy",
   label: "labels.copy",
diff --git a/packages/excalidraw/actions/actionCropEditor.tsx b/packages/excalidraw/actions/actionCropEditor.tsx
index 643f666ba..1a7b6da69 100644
--- a/packages/excalidraw/actions/actionCropEditor.tsx
+++ b/packages/excalidraw/actions/actionCropEditor.tsx
@@ -1,10 +1,13 @@
-import { register } from "./register";
-import { cropIcon } from "../components/icons";
-import { CaptureUpdateAction } from "../store";
+import { isImageElement } from "@excalidraw/element/typeChecks";
+
+import type { ExcalidrawImageElement } from "@excalidraw/element/types";
+
 import { ToolButton } from "../components/ToolButton";
+import { cropIcon } from "../components/icons";
 import { t } from "../i18n";
-import { isImageElement } from "../element/typeChecks";
-import type { ExcalidrawImageElement } from "../element/types";
+import { CaptureUpdateAction } from "../store";
+
+import { register } from "./register";
 
 export const actionToggleCropEditor = register({
   name: "cropEditor",
diff --git a/packages/excalidraw/actions/actionDeleteSelected.test.tsx b/packages/excalidraw/actions/actionDeleteSelected.test.tsx
index d48646fac..090c81941 100644
--- a/packages/excalidraw/actions/actionDeleteSelected.test.tsx
+++ b/packages/excalidraw/actions/actionDeleteSelected.test.tsx
@@ -1,7 +1,9 @@
 import React from "react";
+
 import { Excalidraw, mutateElement } from "../index";
-import { act, assertElements, render } from "../tests/test-utils";
 import { API } from "../tests/helpers/api";
+import { act, assertElements, render } from "../tests/test-utils";
+
 import { actionDeleteSelected } from "./actionDeleteSelected";
 
 const { h } = window;
diff --git a/packages/excalidraw/actions/actionDeleteSelected.tsx b/packages/excalidraw/actions/actionDeleteSelected.tsx
index c640f9256..75e666df0 100644
--- a/packages/excalidraw/actions/actionDeleteSelected.tsx
+++ b/packages/excalidraw/actions/actionDeleteSelected.tsx
@@ -1,25 +1,36 @@
-import { getSelectedElements, isSomeElementSelected } from "../scene";
-import { KEYS } from "../keys";
-import { ToolButton } from "../components/ToolButton";
-import { t } from "../i18n";
-import { register } from "./register";
-import { getNonDeletedElements } from "../element";
-import type { ExcalidrawElement } from "../element/types";
-import type { AppClassProperties, AppState } from "../types";
-import { mutateElement, newElementWith } from "../element/mutateElement";
-import { getElementsInGroup, selectGroupsForSelectedElements } from "../groups";
-import { LinearElementEditor } from "../element/linearElementEditor";
-import { fixBindingsAfterDeletion } from "../element/binding";
+import { KEYS, updateActiveTool } from "@excalidraw/common";
+
+import { getNonDeletedElements } from "@excalidraw/element";
+import { fixBindingsAfterDeletion } from "@excalidraw/element/binding";
+import { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
+import {
+  mutateElement,
+  newElementWith,
+} from "@excalidraw/element/mutateElement";
+import { getContainerElement } from "@excalidraw/element/textElement";
 import {
   isBoundToContainer,
   isElbowArrow,
   isFrameLikeElement,
-} from "../element/typeChecks";
-import { updateActiveTool } from "../utils";
-import { TrashIcon } from "../components/icons";
+} from "@excalidraw/element/typeChecks";
+import { getFrameChildren } from "@excalidraw/element/frame";
+
+import {
+  getElementsInGroup,
+  selectGroupsForSelectedElements,
+} from "@excalidraw/element/groups";
+
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+
+import { t } from "../i18n";
+import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { CaptureUpdateAction } from "../store";
-import { getContainerElement } from "../element/textElement";
-import { getFrameChildren } from "../frame";
+import { TrashIcon } from "../components/icons";
+import { ToolButton } from "../components/ToolButton";
+
+import { register } from "./register";
+
+import type { AppClassProperties, AppState } from "../types";
 
 const deleteSelectedElements = (
   elements: readonly ExcalidrawElement[],
@@ -286,6 +297,7 @@ export const actionDeleteSelected = register({
         activeTool: updateActiveTool(appState, { type: "selection" }),
         multiElement: null,
         activeEmbeddable: null,
+        selectedLinearElement: null,
       },
       captureUpdate: isSomeElementSelected(
         getNonDeletedElements(elements),
diff --git a/packages/excalidraw/actions/actionDistribute.tsx b/packages/excalidraw/actions/actionDistribute.tsx
index 15d33b1f1..9f05ab6bf 100644
--- a/packages/excalidraw/actions/actionDistribute.tsx
+++ b/packages/excalidraw/actions/actionDistribute.tsx
@@ -1,22 +1,32 @@
+import { getNonDeletedElements } from "@excalidraw/element";
+
+import { isFrameLikeElement } from "@excalidraw/element/typeChecks";
+
+import { CODES, KEYS, arrayToMap, getShortcutKey } from "@excalidraw/common";
+
+import { updateFrameMembershipOfSelectedElements } from "@excalidraw/element/frame";
+
+import { distributeElements } from "@excalidraw/element/distribute";
+
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+
+import type { Distribution } from "@excalidraw/element/distribute";
+
+import { ToolButton } from "../components/ToolButton";
 import {
   DistributeHorizontallyIcon,
   DistributeVerticallyIcon,
 } from "../components/icons";
-import { ToolButton } from "../components/ToolButton";
-import type { Distribution } from "../distribute";
-import { distributeElements } from "../distribute";
-import { getNonDeletedElements } from "../element";
-import { isFrameLikeElement } from "../element/typeChecks";
-import type { ExcalidrawElement } from "../element/types";
-import { updateFrameMembershipOfSelectedElements } from "../frame";
+
 import { t } from "../i18n";
-import { CODES, KEYS } from "../keys";
+
 import { isSomeElementSelected } from "../scene";
 import { CaptureUpdateAction } from "../store";
-import type { AppClassProperties, AppState } from "../types";
-import { arrayToMap, getShortcutKey } from "../utils";
+
 import { register } from "./register";
 
+import type { AppClassProperties, AppState } from "../types";
+
 const enableActionGroup = (appState: AppState, app: AppClassProperties) => {
   const selectedElements = app.scene.getSelectedElements(appState);
   return (
diff --git a/packages/excalidraw/actions/actionDuplicateSelection.test.tsx b/packages/excalidraw/actions/actionDuplicateSelection.test.tsx
index dc471df37..71559fe47 100644
--- a/packages/excalidraw/actions/actionDuplicateSelection.test.tsx
+++ b/packages/excalidraw/actions/actionDuplicateSelection.test.tsx
@@ -1,14 +1,15 @@
+import { ORIG_ID } from "@excalidraw/common";
+
 import { Excalidraw } from "../index";
+import { API } from "../tests/helpers/api";
 import {
   act,
   assertElements,
   getCloneByOrigId,
   render,
 } from "../tests/test-utils";
-import { API } from "../tests/helpers/api";
+
 import { actionDuplicateSelection } from "./actionDuplicateSelection";
-import React from "react";
-import { ORIG_ID } from "../constants";
 
 const { h } = window;
 
@@ -256,7 +257,7 @@ describe("actionDuplicateSelection", () => {
       assertElements(h.elements, [
         { id: frame.id },
         { id: text.id, frameId: frame.id },
-        { [ORIG_ID]: text.id, frameId: frame.id },
+        { [ORIG_ID]: text.id, frameId: frame.id, selected: true },
       ]);
     });
 
diff --git a/packages/excalidraw/actions/actionDuplicateSelection.tsx b/packages/excalidraw/actions/actionDuplicateSelection.tsx
index b28e831c8..231fe1913 100644
--- a/packages/excalidraw/actions/actionDuplicateSelection.tsx
+++ b/packages/excalidraw/actions/actionDuplicateSelection.tsx
@@ -1,55 +1,51 @@
-import { KEYS } from "../keys";
-import { register } from "./register";
-import type { ExcalidrawElement } from "../element/types";
-import { duplicateElement, getNonDeletedElements } from "../element";
-import { isSomeElementSelected } from "../scene";
-import { ToolButton } from "../components/ToolButton";
-import { t } from "../i18n";
 import {
+  DEFAULT_GRID_SIZE,
+  KEYS,
   arrayToMap,
-  castArray,
-  findLastIndex,
   getShortcutKey,
-  invariant,
-} from "../utils";
-import { LinearElementEditor } from "../element/linearElementEditor";
+} from "@excalidraw/common";
+
+import { getNonDeletedElements } from "@excalidraw/element";
+
 import {
-  selectGroupsForSelectedElements,
-  getSelectedGroupForElement,
-  getElementsInGroup,
-} from "../groups";
-import type { AppState } from "../types";
-import { fixBindingsAfterDuplication } from "../element/binding";
-import type { ActionResult } from "./types";
-import { DEFAULT_GRID_SIZE } from "../constants";
-import {
-  bindTextToShapeAfterDuplication,
-  getBoundTextElement,
-  getContainerElement,
-} from "../element/textElement";
-import {
-  hasBoundTextElement,
   isBoundToContainer,
-  isFrameLikeElement,
-} from "../element/typeChecks";
-import { normalizeElementOrder } from "../element/sortElements";
-import { DuplicateIcon } from "../components/icons";
-import {
-  bindElementsToFramesAfterDuplication,
-  getFrameChildren,
-} from "../frame";
+  isLinearElement,
+} from "@excalidraw/element/typeChecks";
+
+import { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
+
+import { selectGroupsForSelectedElements } from "@excalidraw/element/groups";
+
 import {
   excludeElementsInFramesFromSelection,
   getSelectedElements,
-} from "../scene/selection";
+} from "@excalidraw/element/selection";
+
+import { syncMovedIndices } from "@excalidraw/element/fractionalIndex";
+
+import { duplicateElements } from "@excalidraw/element/duplicate";
+
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+
+import { ToolButton } from "../components/ToolButton";
+import { DuplicateIcon } from "../components/icons";
+
+import { t } from "../i18n";
+import { isSomeElementSelected } from "../scene";
 import { CaptureUpdateAction } from "../store";
 
+import { register } from "./register";
+
 export const actionDuplicateSelection = register({
   name: "duplicateSelection",
   label: "labels.duplicateSelection",
   icon: DuplicateIcon,
   trackEvent: { category: "element" },
   perform: (elements, appState, formData, app) => {
+    if (appState.selectedElementsAreBeingDragged) {
+      return false;
+    }
+
     // duplicate selected point(s) if editing a line
     if (appState.editingLinearElement) {
       // TODO: Invariants should be checked here instead of duplicateSelectedPoints()
@@ -69,20 +65,54 @@ export const actionDuplicateSelection = register({
       }
     }
 
-    const nextState = duplicateElements(elements, appState);
-
-    if (app.props.onDuplicate && nextState.elements) {
-      const mappedElements = app.props.onDuplicate(
-        nextState.elements,
+    let { newElements: duplicatedElements, elementsWithClones: nextElements } =
+      duplicateElements({
+        type: "in-place",
         elements,
-      );
+        idsOfElementsToDuplicate: arrayToMap(
+          getSelectedElements(elements, appState, {
+            includeBoundTextElement: true,
+            includeElementsInFrames: true,
+          }),
+        ),
+        appState,
+        randomizeSeed: true,
+        overrides: (element) => ({
+          x: element.x + DEFAULT_GRID_SIZE / 2,
+          y: element.y + DEFAULT_GRID_SIZE / 2,
+        }),
+        reverseOrder: false,
+      });
+
+    if (app.props.onDuplicate && nextElements) {
+      const mappedElements = app.props.onDuplicate(nextElements, elements);
       if (mappedElements) {
-        nextState.elements = mappedElements;
+        nextElements = mappedElements;
       }
     }
 
     return {
-      ...nextState,
+      elements: syncMovedIndices(nextElements, arrayToMap(duplicatedElements)),
+      appState: {
+        ...appState,
+        ...updateLinearElementEditors(duplicatedElements),
+        ...selectGroupsForSelectedElements(
+          {
+            editingGroupId: appState.editingGroupId,
+            selectedElementIds: excludeElementsInFramesFromSelection(
+              duplicatedElements,
+            ).reduce((acc: Record<ExcalidrawElement["id"], true>, element) => {
+              if (!isBoundToContainer(element)) {
+                acc[element.id] = true;
+              }
+              return acc;
+            }, {}),
+          },
+          getNonDeletedElements(nextElements),
+          appState,
+          null,
+        ),
+      },
       captureUpdate: CaptureUpdateAction.IMMEDIATELY,
     };
   },
@@ -101,259 +131,23 @@ export const actionDuplicateSelection = register({
   ),
 });
 
-const duplicateElements = (
-  elements: readonly ExcalidrawElement[],
-  appState: AppState,
-): Partial<Exclude<ActionResult, false>> => {
-  // ---------------------------------------------------------------------------
-
-  const groupIdMap = new Map();
-  const newElements: ExcalidrawElement[] = [];
-  const oldElements: ExcalidrawElement[] = [];
-  const oldIdToDuplicatedId = new Map();
-  const duplicatedElementsMap = new Map<string, ExcalidrawElement>();
-
-  const elementsMap = arrayToMap(elements);
-
-  const duplicateAndOffsetElement = <
-    T extends ExcalidrawElement | ExcalidrawElement[],
-  >(
-    element: T,
-  ): T extends ExcalidrawElement[]
-    ? ExcalidrawElement[]
-    : ExcalidrawElement | null => {
-    const elements = castArray(element);
-
-    const _newElements = elements.reduce(
-      (acc: ExcalidrawElement[], element) => {
-        if (processedIds.has(element.id)) {
-          return acc;
-        }
-
-        processedIds.set(element.id, true);
-
-        const newElement = duplicateElement(
-          appState.editingGroupId,
-          groupIdMap,
-          element,
-          {
-            x: element.x + DEFAULT_GRID_SIZE / 2,
-            y: element.y + DEFAULT_GRID_SIZE / 2,
-          },
-        );
-
-        processedIds.set(newElement.id, true);
-
-        duplicatedElementsMap.set(newElement.id, newElement);
-        oldIdToDuplicatedId.set(element.id, newElement.id);
-
-        oldElements.push(element);
-        newElements.push(newElement);
-
-        acc.push(newElement);
-        return acc;
-      },
-      [],
+const updateLinearElementEditors = (clonedElements: ExcalidrawElement[]) => {
+  const linears = clonedElements.filter(isLinearElement);
+  if (linears.length === 1) {
+    const linear = linears[0];
+    const boundElements = linear.boundElements?.map((def) => def.id) ?? [];
+    const onlySingleLinearSelected = clonedElements.every(
+      (el) => el.id === linear.id || boundElements.includes(el.id),
     );
 
-    return (
-      Array.isArray(element) ? _newElements : _newElements[0] || null
-    ) as T extends ExcalidrawElement[]
-      ? ExcalidrawElement[]
-      : ExcalidrawElement | null;
-  };
-
-  elements = normalizeElementOrder(elements);
-
-  const idsOfElementsToDuplicate = arrayToMap(
-    getSelectedElements(elements, appState, {
-      includeBoundTextElement: true,
-      includeElementsInFrames: true,
-    }),
-  );
-
-  // Ids of elements that have already been processed so we don't push them
-  // into the array twice if we end up backtracking when retrieving
-  // discontiguous group of elements (can happen due to a bug, or in edge
-  // cases such as a group containing deleted elements which were not selected).
-  //
-  // This is not enough to prevent duplicates, so we do a second loop afterwards
-  // to remove them.
-  //
-  // For convenience we mark even the newly created ones even though we don't
-  // loop over them.
-  const processedIds = new Map<ExcalidrawElement["id"], true>();
-
-  const elementsWithClones: ExcalidrawElement[] = elements.slice();
-
-  const insertAfterIndex = (
-    index: number,
-    elements: ExcalidrawElement | null | ExcalidrawElement[],
-  ) => {
-    invariant(index !== -1, "targetIndex === -1 ");
-
-    if (!Array.isArray(elements) && !elements) {
-      return;
+    if (onlySingleLinearSelected) {
+      return {
+        selectedLinearElement: new LinearElementEditor(linear),
+      };
     }
-
-    elementsWithClones.splice(index + 1, 0, ...castArray(elements));
-  };
-
-  const frameIdsToDuplicate = new Set(
-    elements
-      .filter(
-        (el) => idsOfElementsToDuplicate.has(el.id) && isFrameLikeElement(el),
-      )
-      .map((el) => el.id),
-  );
-
-  for (const element of elements) {
-    if (processedIds.has(element.id)) {
-      continue;
-    }
-
-    if (!idsOfElementsToDuplicate.has(element.id)) {
-      continue;
-    }
-
-    // groups
-    // -------------------------------------------------------------------------
-
-    const groupId = getSelectedGroupForElement(appState, element);
-    if (groupId) {
-      const groupElements = getElementsInGroup(elements, groupId).flatMap(
-        (element) =>
-          isFrameLikeElement(element)
-            ? [...getFrameChildren(elements, element.id), element]
-            : [element],
-      );
-
-      const targetIndex = findLastIndex(elementsWithClones, (el) => {
-        return el.groupIds?.includes(groupId);
-      });
-
-      insertAfterIndex(targetIndex, duplicateAndOffsetElement(groupElements));
-      continue;
-    }
-
-    // frame duplication
-    // -------------------------------------------------------------------------
-
-    if (element.frameId && frameIdsToDuplicate.has(element.frameId)) {
-      continue;
-    }
-
-    if (isFrameLikeElement(element)) {
-      const frameId = element.id;
-
-      const frameChildren = getFrameChildren(elements, frameId);
-
-      const targetIndex = findLastIndex(elementsWithClones, (el) => {
-        return el.frameId === frameId || el.id === frameId;
-      });
-
-      insertAfterIndex(
-        targetIndex,
-        duplicateAndOffsetElement([...frameChildren, element]),
-      );
-      continue;
-    }
-
-    // text container
-    // -------------------------------------------------------------------------
-
-    if (hasBoundTextElement(element)) {
-      const boundTextElement = getBoundTextElement(element, elementsMap);
-
-      const targetIndex = findLastIndex(elementsWithClones, (el) => {
-        return (
-          el.id === element.id ||
-          ("containerId" in el && el.containerId === element.id)
-        );
-      });
-
-      if (boundTextElement) {
-        insertAfterIndex(
-          targetIndex,
-          duplicateAndOffsetElement([element, boundTextElement]),
-        );
-      } else {
-        insertAfterIndex(targetIndex, duplicateAndOffsetElement(element));
-      }
-
-      continue;
-    }
-
-    if (isBoundToContainer(element)) {
-      const container = getContainerElement(element, elementsMap);
-
-      const targetIndex = findLastIndex(elementsWithClones, (el) => {
-        return el.id === element.id || el.id === container?.id;
-      });
-
-      if (container) {
-        insertAfterIndex(
-          targetIndex,
-          duplicateAndOffsetElement([container, element]),
-        );
-      } else {
-        insertAfterIndex(targetIndex, duplicateAndOffsetElement(element));
-      }
-
-      continue;
-    }
-
-    // default duplication (regular elements)
-    // -------------------------------------------------------------------------
-
-    insertAfterIndex(
-      findLastIndex(elementsWithClones, (el) => el.id === element.id),
-      duplicateAndOffsetElement(element),
-    );
   }
 
-  // ---------------------------------------------------------------------------
-
-  bindTextToShapeAfterDuplication(
-    elementsWithClones,
-    oldElements,
-    oldIdToDuplicatedId,
-  );
-  fixBindingsAfterDuplication(
-    elementsWithClones,
-    oldElements,
-    oldIdToDuplicatedId,
-  );
-  bindElementsToFramesAfterDuplication(
-    elementsWithClones,
-    oldElements,
-    oldIdToDuplicatedId,
-  );
-
-  const nextElementsToSelect =
-    excludeElementsInFramesFromSelection(newElements);
-
   return {
-    elements: elementsWithClones,
-    appState: {
-      ...appState,
-      ...selectGroupsForSelectedElements(
-        {
-          editingGroupId: appState.editingGroupId,
-          selectedElementIds: nextElementsToSelect.reduce(
-            (acc: Record<ExcalidrawElement["id"], true>, element) => {
-              if (!isBoundToContainer(element)) {
-                acc[element.id] = true;
-              }
-              return acc;
-            },
-            {},
-          ),
-        },
-        getNonDeletedElements(elementsWithClones),
-        appState,
-        null,
-      ),
-    },
+    selectedLinearElement: null,
   };
 };
diff --git a/packages/excalidraw/actions/actionElementLink.ts b/packages/excalidraw/actions/actionElementLink.ts
index 91469fd63..24ea8bbd6 100644
--- a/packages/excalidraw/actions/actionElementLink.ts
+++ b/packages/excalidraw/actions/actionElementLink.ts
@@ -1,13 +1,15 @@
-import { copyTextToSystemClipboard } from "../clipboard";
-import { copyIcon, elementLinkIcon } from "../components/icons";
 import {
   canCreateLinkFromElements,
   defaultGetElementLinkFromSelection,
   getLinkIdAndTypeFromSelection,
-} from "../element/elementLink";
+} from "@excalidraw/element/elementLink";
+
+import { copyTextToSystemClipboard } from "../clipboard";
+import { copyIcon, elementLinkIcon } from "../components/icons";
 import { t } from "../i18n";
 import { getSelectedElements } from "../scene";
 import { CaptureUpdateAction } from "../store";
+
 import { register } from "./register";
 
 export const actionCopyElementLink = register({
diff --git a/packages/excalidraw/actions/actionElementLock.test.tsx b/packages/excalidraw/actions/actionElementLock.test.tsx
index d6dd3f7ac..ec45ab9b2 100644
--- a/packages/excalidraw/actions/actionElementLock.test.tsx
+++ b/packages/excalidraw/actions/actionElementLock.test.tsx
@@ -1,9 +1,10 @@
-import React from "react";
-import { Excalidraw } from "../index";
 import { queryByTestId, fireEvent } from "@testing-library/react";
-import { render } from "../tests/test-utils";
-import { Pointer, UI } from "../tests/helpers/ui";
+import React from "react";
+
+import { Excalidraw } from "../index";
 import { API } from "../tests/helpers/api";
+import { Pointer, UI } from "../tests/helpers/ui";
+import { render } from "../tests/test-utils";
 
 const { h } = window;
 const mouse = new Pointer("mouse");
diff --git a/packages/excalidraw/actions/actionElementLock.ts b/packages/excalidraw/actions/actionElementLock.ts
index eba21f240..79d13c63e 100644
--- a/packages/excalidraw/actions/actionElementLock.ts
+++ b/packages/excalidraw/actions/actionElementLock.ts
@@ -1,11 +1,16 @@
+import { KEYS, arrayToMap } from "@excalidraw/common";
+
+import { newElementWith } from "@excalidraw/element/mutateElement";
+
+import { isFrameLikeElement } from "@excalidraw/element/typeChecks";
+
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+
 import { LockedIcon, UnlockedIcon } from "../components/icons";
-import { newElementWith } from "../element/mutateElement";
-import { isFrameLikeElement } from "../element/typeChecks";
-import type { ExcalidrawElement } from "../element/types";
-import { KEYS } from "../keys";
+
 import { getSelectedElements } from "../scene";
 import { CaptureUpdateAction } from "../store";
-import { arrayToMap } from "../utils";
+
 import { register } from "./register";
 
 const shouldLock = (elements: readonly ExcalidrawElement[]) =>
diff --git a/packages/excalidraw/actions/actionEmbeddable.ts b/packages/excalidraw/actions/actionEmbeddable.ts
new file mode 100644
index 000000000..556652240
--- /dev/null
+++ b/packages/excalidraw/actions/actionEmbeddable.ts
@@ -0,0 +1,34 @@
+import { updateActiveTool } from "@excalidraw/common";
+
+import { setCursorForShape } from "../cursor";
+import { CaptureUpdateAction } from "../store";
+
+import { register } from "./register";
+
+export const actionSetEmbeddableAsActiveTool = register({
+  name: "setEmbeddableAsActiveTool",
+  trackEvent: { category: "toolbar" },
+  target: "Tool",
+  label: "toolBar.embeddable",
+  perform: (elements, appState, _, app) => {
+    const nextActiveTool = updateActiveTool(appState, {
+      type: "embeddable",
+    });
+
+    setCursorForShape(app.canvas, {
+      ...appState,
+      activeTool: nextActiveTool,
+    });
+
+    return {
+      elements,
+      appState: {
+        ...appState,
+        activeTool: updateActiveTool(appState, {
+          type: "embeddable",
+        }),
+      },
+      captureUpdate: CaptureUpdateAction.EVENTUALLY,
+    };
+  },
+});
diff --git a/packages/excalidraw/actions/actionExport.tsx b/packages/excalidraw/actions/actionExport.tsx
index 8d18acd89..8fcaea21b 100644
--- a/packages/excalidraw/actions/actionExport.tsx
+++ b/packages/excalidraw/actions/actionExport.tsx
@@ -1,25 +1,34 @@
-import { ExportIcon, questionCircle, saveAs } from "../components/icons";
+import {
+  KEYS,
+  DEFAULT_EXPORT_PADDING,
+  EXPORT_SCALES,
+  THEME,
+} from "@excalidraw/common";
+
+import { getNonDeletedElements } from "@excalidraw/element";
+
+import type { Theme } from "@excalidraw/element/types";
+
+import { useDevice } from "../components/App";
+import { CheckboxItem } from "../components/CheckboxItem";
+import { DarkModeToggle } from "../components/DarkModeToggle";
 import { ProjectName } from "../components/ProjectName";
 import { ToolButton } from "../components/ToolButton";
 import { Tooltip } from "../components/Tooltip";
-import { DarkModeToggle } from "../components/DarkModeToggle";
+import { ExportIcon, questionCircle, saveAs } from "../components/icons";
 import { loadFromJSON, saveAsJSON } from "../data";
-import { resaveAsImageWithScene } from "../data/resave";
-import { t } from "../i18n";
-import { useDevice } from "../components/App";
-import { KEYS } from "../keys";
-import { register } from "./register";
-import { CheckboxItem } from "../components/CheckboxItem";
-import { getExportSize } from "../scene/export";
-import { DEFAULT_EXPORT_PADDING, EXPORT_SCALES, THEME } from "../constants";
-import { getSelectedElements, isSomeElementSelected } from "../scene";
-import { getNonDeletedElements } from "../element";
 import { isImageFileHandle } from "../data/blob";
 import { nativeFileSystemSupported } from "../data/filesystem";
-import type { Theme } from "../element/types";
+import { resaveAsImageWithScene } from "../data/resave";
+
+import { t } from "../i18n";
+import { getSelectedElements, isSomeElementSelected } from "../scene";
+import { getExportSize } from "../scene/export";
+import { CaptureUpdateAction } from "../store";
 
 import "../components/ToolIcon.scss";
-import { CaptureUpdateAction } from "../store";
+
+import { register } from "./register";
 
 export const actionChangeProjectName = register({
   name: "changeProjectName",
diff --git a/packages/excalidraw/actions/actionFinalize.tsx b/packages/excalidraw/actions/actionFinalize.tsx
index f2d8c0158..984961656 100644
--- a/packages/excalidraw/actions/actionFinalize.tsx
+++ b/packages/excalidraw/actions/actionFinalize.tsx
@@ -1,22 +1,30 @@
-import { KEYS } from "../keys";
-import { isInvisiblySmallElement } from "../element";
-import { arrayToMap, updateActiveTool } from "../utils";
-import { ToolButton } from "../components/ToolButton";
-import { done } from "../components/icons";
-import { t } from "../i18n";
-import { register } from "./register";
-import { mutateElement } from "../element/mutateElement";
-import { LinearElementEditor } from "../element/linearElementEditor";
+import { pointFrom } from "@excalidraw/math";
+
 import {
   maybeBindLinearElement,
   bindOrUnbindLinearElement,
-} from "../element/binding";
-import { isBindingElement, isLinearElement } from "../element/typeChecks";
-import type { AppState } from "../types";
+} from "@excalidraw/element/binding";
+import { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
+import { mutateElement } from "@excalidraw/element/mutateElement";
+import {
+  isBindingElement,
+  isLinearElement,
+} from "@excalidraw/element/typeChecks";
+
+import { KEYS, arrayToMap, updateActiveTool } from "@excalidraw/common";
+import { isPathALoop } from "@excalidraw/element/shapes";
+
+import { isInvisiblySmallElement } from "@excalidraw/element/sizeHelpers";
+
+import { t } from "../i18n";
 import { resetCursor } from "../cursor";
+import { done } from "../components/icons";
+import { ToolButton } from "../components/ToolButton";
 import { CaptureUpdateAction } from "../store";
-import { pointFrom } from "@excalidraw/math";
-import { isPathALoop } from "../shapes";
+
+import { register } from "./register";
+
+import type { AppState } from "../types";
 
 export const actionFinalize = register({
   name: "finalize",
diff --git a/packages/excalidraw/actions/actionFlip.test.tsx b/packages/excalidraw/actions/actionFlip.test.tsx
index 94e4721dd..23e4ffc12 100644
--- a/packages/excalidraw/actions/actionFlip.test.tsx
+++ b/packages/excalidraw/actions/actionFlip.test.tsx
@@ -1,8 +1,9 @@
-import React from "react";
-import { Excalidraw } from "../index";
-import { render } from "../tests/test-utils";
-import { API } from "../tests/helpers/api";
 import { pointFrom } from "@excalidraw/math";
+
+import { Excalidraw } from "../index";
+import { API } from "../tests/helpers/api";
+import { render } from "../tests/test-utils";
+
 import { actionFlipHorizontal, actionFlipVertical } from "./actionFlip";
 
 const { h } = window;
diff --git a/packages/excalidraw/actions/actionFlip.ts b/packages/excalidraw/actions/actionFlip.ts
index 80149b877..62be891cb 100644
--- a/packages/excalidraw/actions/actionFlip.ts
+++ b/packages/excalidraw/actions/actionFlip.ts
@@ -1,32 +1,39 @@
-import { register } from "./register";
-import { getSelectedElements } from "../scene";
-import { getNonDeletedElements } from "../element";
+import { getNonDeletedElements } from "@excalidraw/element";
+import {
+  bindOrUnbindLinearElements,
+  isBindingEnabled,
+} from "@excalidraw/element/binding";
+import { getCommonBoundingBox } from "@excalidraw/element/bounds";
+import {
+  mutateElement,
+  newElementWith,
+} from "@excalidraw/element/mutateElement";
+import { deepCopyElement } from "@excalidraw/element/duplicate";
+import { resizeMultipleElements } from "@excalidraw/element/resizeElements";
+import {
+  isArrowElement,
+  isElbowArrow,
+  isLinearElement,
+} from "@excalidraw/element/typeChecks";
+import { updateFrameMembershipOfSelectedElements } from "@excalidraw/element/frame";
+import { CODES, KEYS, arrayToMap } from "@excalidraw/common";
+
 import type {
   ExcalidrawArrowElement,
   ExcalidrawElbowArrowElement,
   ExcalidrawElement,
   NonDeleted,
   NonDeletedSceneElementsMap,
-} from "../element/types";
-import { resizeMultipleElements } from "../element/resizeElements";
-import type { AppClassProperties, AppState } from "../types";
-import { arrayToMap } from "../utils";
-import { CODES, KEYS } from "../keys";
-import {
-  bindOrUnbindLinearElements,
-  isBindingEnabled,
-} from "../element/binding";
-import { updateFrameMembershipOfSelectedElements } from "../frame";
-import { flipHorizontal, flipVertical } from "../components/icons";
+} from "@excalidraw/element/types";
+
+import { getSelectedElements } from "../scene";
 import { CaptureUpdateAction } from "../store";
-import {
-  isArrowElement,
-  isElbowArrow,
-  isLinearElement,
-} from "../element/typeChecks";
-import { mutateElement, newElementWith } from "../element/mutateElement";
-import { deepCopyElement } from "../element/newElement";
-import { getCommonBoundingBox } from "../element/bounds";
+
+import { flipHorizontal, flipVertical } from "../components/icons";
+
+import { register } from "./register";
+
+import type { AppClassProperties, AppState } from "../types";
 
 export const actionFlipHorizontal = register({
   name: "flipHorizontal",
diff --git a/packages/excalidraw/actions/actionFrame.ts b/packages/excalidraw/actions/actionFrame.ts
index ce05b533b..13d57b2a1 100644
--- a/packages/excalidraw/actions/actionFrame.ts
+++ b/packages/excalidraw/actions/actionFrame.ts
@@ -1,19 +1,29 @@
-import { getCommonBounds, getNonDeletedElements } from "../element";
-import type { ExcalidrawElement } from "../element/types";
-import { addElementsToFrame, removeAllElementsFromFrame } from "../frame";
-import { getFrameChildren } from "../frame";
-import { KEYS } from "../keys";
-import type { AppClassProperties, AppState, UIAppState } from "../types";
-import { updateActiveTool } from "../utils";
+import { getNonDeletedElements } from "@excalidraw/element";
+import { mutateElement } from "@excalidraw/element/mutateElement";
+import { newFrameElement } from "@excalidraw/element/newElement";
+import { isFrameLikeElement } from "@excalidraw/element/typeChecks";
+import {
+  addElementsToFrame,
+  removeAllElementsFromFrame,
+} from "@excalidraw/element/frame";
+import { getFrameChildren } from "@excalidraw/element/frame";
+
+import { KEYS, updateActiveTool } from "@excalidraw/common";
+
+import { getElementsInGroup } from "@excalidraw/element/groups";
+
+import { getCommonBounds } from "@excalidraw/element/bounds";
+
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+
 import { setCursorForShape } from "../cursor";
-import { register } from "./register";
-import { isFrameLikeElement } from "../element/typeChecks";
 import { frameToolIcon } from "../components/icons";
-import { CaptureUpdateAction } from "../store";
 import { getSelectedElements } from "../scene";
-import { newFrameElement } from "../element/newElement";
-import { getElementsInGroup } from "../groups";
-import { mutateElement } from "../element/mutateElement";
+import { CaptureUpdateAction } from "../store";
+
+import { register } from "./register";
+
+import type { AppClassProperties, AppState, UIAppState } from "../types";
 
 const isSingleFrameSelected = (
   appState: UIAppState,
diff --git a/packages/excalidraw/actions/actionGroup.tsx b/packages/excalidraw/actions/actionGroup.tsx
index 4e98c59c7..6b47ef969 100644
--- a/packages/excalidraw/actions/actionGroup.tsx
+++ b/packages/excalidraw/actions/actionGroup.tsx
@@ -1,29 +1,9 @@
-import { KEYS } from "../keys";
-import { t } from "../i18n";
-import { arrayToMap, getShortcutKey } from "../utils";
-import { register } from "./register";
-import { UngroupIcon, GroupIcon } from "../components/icons";
-import { newElementWith } from "../element/mutateElement";
-import { isSomeElementSelected } from "../scene";
-import {
-  getSelectedGroupIds,
-  selectGroup,
-  selectGroupsForSelectedElements,
-  getElementsInGroup,
-  addToGroup,
-  removeFromSelectedGroups,
-  isElementInGroup,
-} from "../groups";
-import { getNonDeletedElements } from "../element";
-import { randomId } from "../random";
-import { ToolButton } from "../components/ToolButton";
-import type {
-  ExcalidrawElement,
-  ExcalidrawTextElement,
-  OrderedExcalidrawElement,
-} from "../element/types";
-import type { AppClassProperties, AppState } from "../types";
-import { isBoundToContainer } from "../element/typeChecks";
+import { getNonDeletedElements } from "@excalidraw/element";
+
+import { newElementWith } from "@excalidraw/element/mutateElement";
+
+import { isBoundToContainer } from "@excalidraw/element/typeChecks";
+
 import {
   frameAndChildrenSelectedTogether,
   getElementsInResizingFrame,
@@ -32,10 +12,40 @@ import {
   groupByFrameLikes,
   removeElementsFromFrame,
   replaceAllElementsInFrame,
-} from "../frame";
-import { syncMovedIndices } from "../fractionalIndex";
+} from "@excalidraw/element/frame";
+
+import { KEYS, randomId, arrayToMap, getShortcutKey } from "@excalidraw/common";
+
+import {
+  getSelectedGroupIds,
+  selectGroup,
+  selectGroupsForSelectedElements,
+  getElementsInGroup,
+  addToGroup,
+  removeFromSelectedGroups,
+  isElementInGroup,
+} from "@excalidraw/element/groups";
+
+import { syncMovedIndices } from "@excalidraw/element/fractionalIndex";
+
+import type {
+  ExcalidrawElement,
+  ExcalidrawTextElement,
+  OrderedExcalidrawElement,
+} from "@excalidraw/element/types";
+
+import { ToolButton } from "../components/ToolButton";
+import { UngroupIcon, GroupIcon } from "../components/icons";
+
+import { t } from "../i18n";
+
+import { isSomeElementSelected } from "../scene";
 import { CaptureUpdateAction } from "../store";
 
+import { register } from "./register";
+
+import type { AppClassProperties, AppState } from "../types";
+
 const allElementsInSameGroup = (elements: readonly ExcalidrawElement[]) => {
   if (elements.length >= 2) {
     const groupIds = elements[0].groupIds;
diff --git a/packages/excalidraw/actions/actionHistory.tsx b/packages/excalidraw/actions/actionHistory.tsx
index 299a09f3d..a0dfb85df 100644
--- a/packages/excalidraw/actions/actionHistory.tsx
+++ b/packages/excalidraw/actions/actionHistory.tsx
@@ -1,17 +1,18 @@
-import type { Action, ActionResult } from "./types";
-import { UndoIcon, RedoIcon } from "../components/icons";
+import { isWindows, KEYS, matchKey, arrayToMap } from "@excalidraw/common";
+
+import type { SceneElementsMap } from "@excalidraw/element/types";
+
 import { ToolButton } from "../components/ToolButton";
-import { t } from "../i18n";
-import type { History } from "../history";
+import { UndoIcon, RedoIcon } from "../components/icons";
 import { HistoryChangedEvent } from "../history";
-import type { AppClassProperties, AppState } from "../types";
-import { KEYS, matchKey } from "../keys";
-import { arrayToMap } from "../utils";
-import { isWindows } from "../constants";
-import type { SceneElementsMap } from "../element/types";
-import type { Store } from "../store";
-import { CaptureUpdateAction } from "../store";
 import { useEmitter } from "../hooks/useEmitter";
+import { t } from "../i18n";
+import { CaptureUpdateAction } from "../store";
+
+import type { History } from "../history";
+import type { Store } from "../store";
+import type { AppClassProperties, AppState } from "../types";
+import type { Action, ActionResult } from "./types";
 
 const executeHistoryAction = (
   app: AppClassProperties,
diff --git a/packages/excalidraw/actions/actionLinearEditor.tsx b/packages/excalidraw/actions/actionLinearEditor.tsx
index 1f05755b5..56e327bd2 100644
--- a/packages/excalidraw/actions/actionLinearEditor.tsx
+++ b/packages/excalidraw/actions/actionLinearEditor.tsx
@@ -1,13 +1,18 @@
+import { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
+
+import { isElbowArrow, isLinearElement } from "@excalidraw/element/typeChecks";
+
+import type { ExcalidrawLinearElement } from "@excalidraw/element/types";
+
 import { DEFAULT_CATEGORIES } from "../components/CommandPalette/CommandPalette";
-import { LinearElementEditor } from "../element/linearElementEditor";
-import { isElbowArrow, isLinearElement } from "../element/typeChecks";
-import type { ExcalidrawLinearElement } from "../element/types";
-import { CaptureUpdateAction } from "../store";
-import { register } from "./register";
 import { ToolButton } from "../components/ToolButton";
-import { t } from "../i18n";
 import { lineEditorIcon } from "../components/icons";
 
+import { t } from "../i18n";
+import { CaptureUpdateAction } from "../store";
+
+import { register } from "./register";
+
 export const actionToggleLinearEditor = register({
   name: "toggleLinearEditor",
   category: DEFAULT_CATEGORIES.elements,
diff --git a/packages/excalidraw/actions/actionLink.tsx b/packages/excalidraw/actions/actionLink.tsx
index beb95d2c1..71426267d 100644
--- a/packages/excalidraw/actions/actionLink.tsx
+++ b/packages/excalidraw/actions/actionLink.tsx
@@ -1,12 +1,15 @@
+import { isEmbeddableElement } from "@excalidraw/element/typeChecks";
+
+import { KEYS, getShortcutKey } from "@excalidraw/common";
+
+import { ToolButton } from "../components/ToolButton";
 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 { CaptureUpdateAction } from "../store";
-import { getShortcutKey } from "../utils";
+
 import { register } from "./register";
 
 export const actionLink = register({
diff --git a/packages/excalidraw/actions/actionMenu.tsx b/packages/excalidraw/actions/actionMenu.tsx
index 9e71fe255..67863e020 100644
--- a/packages/excalidraw/actions/actionMenu.tsx
+++ b/packages/excalidraw/actions/actionMenu.tsx
@@ -1,11 +1,17 @@
-import { HamburgerMenuIcon, HelpIconThin, palette } from "../components/icons";
+import { KEYS } from "@excalidraw/common";
+
+import { getNonDeletedElements } from "@excalidraw/element";
+
+import { showSelectedShapeActions } from "@excalidraw/element/showSelectedShapeActions";
+
 import { ToolButton } from "../components/ToolButton";
+import { HamburgerMenuIcon, HelpIconThin, palette } from "../components/icons";
 import { t } from "../i18n";
-import { showSelectedShapeActions, getNonDeletedElements } from "../element";
-import { register } from "./register";
-import { KEYS } from "../keys";
+
 import { CaptureUpdateAction } from "../store";
 
+import { register } from "./register";
+
 export const actionToggleCanvasMenu = register({
   name: "toggleCanvasMenu",
   label: "buttons.menu",
diff --git a/packages/excalidraw/actions/actionNavigate.tsx b/packages/excalidraw/actions/actionNavigate.tsx
index 48037200c..738386839 100644
--- a/packages/excalidraw/actions/actionNavigate.tsx
+++ b/packages/excalidraw/actions/actionNavigate.tsx
@@ -1,6 +1,7 @@
+import clsx from "clsx";
+
 import { getClientColor } from "../clients";
 import { Avatar } from "../components/Avatar";
-import type { GoToCollaboratorComponentProps } from "../components/UserList";
 import {
   eyeIcon,
   microphoneIcon,
@@ -8,9 +9,11 @@ import {
 } from "../components/icons";
 import { t } from "../i18n";
 import { CaptureUpdateAction } from "../store";
-import type { Collaborator } from "../types";
+
 import { register } from "./register";
-import clsx from "clsx";
+
+import type { GoToCollaboratorComponentProps } from "../components/UserList";
+import type { Collaborator } from "../types";
 
 export const actionGoToCollaborator = register({
   name: "goToCollaborator",
diff --git a/packages/excalidraw/actions/actionProperties.test.tsx b/packages/excalidraw/actions/actionProperties.test.tsx
index 80d2ca257..38419ce82 100644
--- a/packages/excalidraw/actions/actionProperties.test.tsx
+++ b/packages/excalidraw/actions/actionProperties.test.tsx
@@ -1,11 +1,16 @@
-import React from "react";
-import { Excalidraw } from "../index";
 import { queryByTestId } from "@testing-library/react";
-import { render } from "../tests/test-utils";
-import { UI } from "../tests/helpers/ui";
+
+import {
+  COLOR_PALETTE,
+  DEFAULT_ELEMENT_BACKGROUND_PICKS,
+  FONT_FAMILY,
+  STROKE_WIDTH,
+} from "@excalidraw/common";
+
+import { Excalidraw } from "../index";
 import { API } from "../tests/helpers/api";
-import { COLOR_PALETTE, DEFAULT_ELEMENT_BACKGROUND_PICKS } from "../colors";
-import { FONT_FAMILY, STROKE_WIDTH } from "../constants";
+import { UI } from "../tests/helpers/ui";
+import { render } from "../tests/test-utils";
 
 describe("element locking", () => {
   beforeEach(async () => {
diff --git a/packages/excalidraw/actions/actionProperties.tsx b/packages/excalidraw/actions/actionProperties.tsx
index 0c2ad3bab..5a309b677 100644
--- a/packages/excalidraw/actions/actionProperties.tsx
+++ b/packages/excalidraw/actions/actionProperties.tsx
@@ -1,20 +1,85 @@
+import { pointFrom } from "@excalidraw/math";
 import { useEffect, useMemo, useRef, useState } from "react";
-import type { AppClassProperties, AppState, Primitive } from "../types";
-import type { CaptureUpdateActionType } from "../store";
+
 import {
   DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE,
   DEFAULT_ELEMENT_BACKGROUND_PICKS,
   DEFAULT_ELEMENT_STROKE_COLOR_PALETTE,
   DEFAULT_ELEMENT_STROKE_PICKS,
-} from "../colors";
+  ARROW_TYPE,
+  DEFAULT_FONT_FAMILY,
+  DEFAULT_FONT_SIZE,
+  FONT_FAMILY,
+  ROUNDNESS,
+  STROKE_WIDTH,
+  VERTICAL_ALIGN,
+  KEYS,
+  randomInteger,
+  arrayToMap,
+  getFontFamilyString,
+  getShortcutKey,
+  tupleToCoors,
+  getLineHeight,
+} from "@excalidraw/common";
+
+import { getNonDeletedElements } from "@excalidraw/element";
+
+import {
+  bindLinearElement,
+  bindPointToSnapToElementOutline,
+  calculateFixedPointForElbowArrowBinding,
+  getHoveredElementForBinding,
+  updateBoundElements,
+} from "@excalidraw/element/binding";
+
+import { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
+
+import {
+  mutateElement,
+  newElementWith,
+} from "@excalidraw/element/mutateElement";
+
+import {
+  getBoundTextElement,
+  redrawTextBoundingBox,
+} from "@excalidraw/element/textElement";
+
+import {
+  isArrowElement,
+  isBoundToContainer,
+  isElbowArrow,
+  isLinearElement,
+  isTextElement,
+  isUsingAdaptiveRadius,
+} from "@excalidraw/element/typeChecks";
+
+import { hasStrokeColor } from "@excalidraw/element/comparisons";
+
+import { updateElbowArrowPoints } from "@excalidraw/element/elbowArrow";
+
+import type { LocalPoint } from "@excalidraw/math";
+
+import type {
+  Arrowhead,
+  ExcalidrawBindableElement,
+  ExcalidrawElement,
+  ExcalidrawLinearElement,
+  ExcalidrawTextElement,
+  FontFamilyValues,
+  TextAlign,
+  VerticalAlign,
+  NonDeletedSceneElementsMap,
+} from "@excalidraw/element/types";
+
 import { trackEvent } from "../analytics";
 import { ButtonIconSelect } from "../components/ButtonIconSelect";
 import { ColorPicker } from "../components/ColorPicker/ColorPicker";
-import { IconPicker } from "../components/IconPicker";
 import { FontPicker } from "../components/FontPicker/FontPicker";
+import { IconPicker } from "../components/IconPicker";
 // TODO barnabasmolnar/editor-redesign
 // TextAlignTopIcon, TextAlignBottomIcon,TextAlignMiddleIcon,
 // ArrowHead icons
+import { Range } from "../components/Range";
 import {
   ArrowheadArrowIcon,
   ArrowheadBarIcon,
@@ -57,43 +122,9 @@ import {
   ArrowheadCrowfootOneIcon,
   ArrowheadCrowfootOneOrManyIcon,
 } from "../components/icons";
-import {
-  ARROW_TYPE,
-  DEFAULT_FONT_FAMILY,
-  DEFAULT_FONT_SIZE,
-  FONT_FAMILY,
-  ROUNDNESS,
-  STROKE_WIDTH,
-  VERTICAL_ALIGN,
-} from "../constants";
-import {
-  getNonDeletedElements,
-  isTextElement,
-  redrawTextBoundingBox,
-} from "../element";
-import { mutateElement, newElementWith } from "../element/mutateElement";
-import { getBoundTextElement } from "../element/textElement";
-import {
-  isArrowElement,
-  isBoundToContainer,
-  isElbowArrow,
-  isLinearElement,
-  isUsingAdaptiveRadius,
-} from "../element/typeChecks";
-import type {
-  Arrowhead,
-  ExcalidrawBindableElement,
-  ExcalidrawElement,
-  ExcalidrawLinearElement,
-  ExcalidrawTextElement,
-  FontFamilyValues,
-  TextAlign,
-  VerticalAlign,
-  NonDeletedSceneElementsMap,
-} from "../element/types";
+
+import { Fonts } from "../fonts";
 import { getLanguage, t } from "../i18n";
-import { KEYS } from "../keys";
-import { randomInteger } from "../random";
 import {
   canHaveArrowheads,
   getCommonAttributeOfSelectedElements,
@@ -101,27 +132,12 @@ import {
   getTargetElements,
   isSomeElementSelected,
 } from "../scene";
-import { hasStrokeColor } from "../scene/comparisons";
-import {
-  arrayToMap,
-  getFontFamilyString,
-  getShortcutKey,
-  tupleToCoors,
-} from "../utils";
-import { register } from "./register";
 import { CaptureUpdateAction } from "../store";
-import { Fonts, getLineHeight } from "../fonts";
-import {
-  bindLinearElement,
-  bindPointToSnapToElementOutline,
-  calculateFixedPointForElbowArrowBinding,
-  getHoveredElementForBinding,
-  updateBoundElements,
-} from "../element/binding";
-import { LinearElementEditor } from "../element/linearElementEditor";
-import type { LocalPoint } from "@excalidraw/math";
-import { pointFrom } from "@excalidraw/math";
-import { Range } from "../components/Range";
+
+import { register } from "./register";
+
+import type { CaptureUpdateActionType } from "../store";
+import type { AppClassProperties, AppState, Primitive } from "../types";
 
 const FONT_SIZE_RELATIVE_INCREASE_STEP = 0.1;
 
@@ -1568,7 +1584,7 @@ export const actionChangeArrowType = register({
       if (!isArrowElement(el)) {
         return el;
       }
-      const newElement = newElementWith(el, {
+      let newElement = newElementWith(el, {
         roundness:
           value === ARROW_TYPE.round
             ? {
@@ -1583,6 +1599,8 @@ export const actionChangeArrowType = register({
       });
 
       if (isElbowArrow(newElement)) {
+        newElement.fixedSegments = null;
+
         const elementsMap = app.scene.getNonDeletedElementsMap();
 
         app.dismissLinearEditor();
@@ -1657,46 +1675,71 @@ export const actionChangeArrowType = register({
         endHoveredElement &&
           bindLinearElement(newElement, endHoveredElement, "end", elementsMap);
 
-        mutateElement(newElement, {
-          points: [finalStartPoint, finalEndPoint].map(
-            (p): LocalPoint =>
-              pointFrom(p[0] - newElement.x, p[1] - newElement.y),
-          ),
-          ...(startElement && newElement.startBinding
+        const startBinding =
+          startElement && newElement.startBinding
             ? {
-                startBinding: {
-                  // @ts-ignore TS cannot discern check above
-                  ...newElement.startBinding!,
-                  ...calculateFixedPointForElbowArrowBinding(
-                    newElement,
-                    startElement,
-                    "start",
-                    elementsMap,
-                  ),
-                },
+                // @ts-ignore TS cannot discern check above
+                ...newElement.startBinding!,
+                ...calculateFixedPointForElbowArrowBinding(
+                  newElement,
+                  startElement,
+                  "start",
+                  elementsMap,
+                ),
               }
-            : {}),
-          ...(endElement && newElement.endBinding
+            : null;
+        const endBinding =
+          endElement && newElement.endBinding
             ? {
-                endBinding: {
-                  // @ts-ignore TS cannot discern check above
-                  ...newElement.endBinding,
-                  ...calculateFixedPointForElbowArrowBinding(
-                    newElement,
-                    endElement,
-                    "end",
-                    elementsMap,
-                  ),
-                },
+                // @ts-ignore TS cannot discern check above
+                ...newElement.endBinding,
+                ...calculateFixedPointForElbowArrowBinding(
+                  newElement,
+                  endElement,
+                  "end",
+                  elementsMap,
+                ),
               }
-            : {}),
-        });
+            : null;
+
+        newElement = {
+          ...newElement,
+          startBinding,
+          endBinding,
+          ...updateElbowArrowPoints(newElement, elementsMap, {
+            points: [finalStartPoint, finalEndPoint].map(
+              (p): LocalPoint =>
+                pointFrom(p[0] - newElement.x, p[1] - newElement.y),
+            ),
+            startBinding,
+            endBinding,
+            fixedSegments: null,
+          }),
+        };
 
         LinearElementEditor.updateEditorMidPointsCache(
           newElement,
           elementsMap,
           app.state,
         );
+      } else {
+        const elementsMap = app.scene.getNonDeletedElementsMap();
+        if (newElement.startBinding) {
+          const startElement = elementsMap.get(
+            newElement.startBinding.elementId,
+          ) as ExcalidrawBindableElement;
+          if (startElement) {
+            bindLinearElement(newElement, startElement, "start", elementsMap);
+          }
+        }
+        if (newElement.endBinding) {
+          const endElement = elementsMap.get(
+            newElement.endBinding.elementId,
+          ) as ExcalidrawBindableElement;
+          if (endElement) {
+            bindLinearElement(newElement, endElement, "end", elementsMap);
+          }
+        }
       }
 
       return newElement;
diff --git a/packages/excalidraw/actions/actionSelectAll.ts b/packages/excalidraw/actions/actionSelectAll.ts
index 61c278053..d7775774a 100644
--- a/packages/excalidraw/actions/actionSelectAll.ts
+++ b/packages/excalidraw/actions/actionSelectAll.ts
@@ -1,13 +1,19 @@
-import { KEYS } from "../keys";
-import { register } from "./register";
-import { selectGroupsForSelectedElements } from "../groups";
-import { getNonDeletedElements, isTextElement } from "../element";
-import type { ExcalidrawElement } from "../element/types";
-import { isLinearElement } from "../element/typeChecks";
-import { LinearElementEditor } from "../element/linearElementEditor";
-import { selectAllIcon } from "../components/icons";
+import { getNonDeletedElements } from "@excalidraw/element";
+import { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
+import { isLinearElement, isTextElement } from "@excalidraw/element/typeChecks";
+
+import { KEYS } from "@excalidraw/common";
+
+import { selectGroupsForSelectedElements } from "@excalidraw/element/groups";
+
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+
 import { CaptureUpdateAction } from "../store";
 
+import { selectAllIcon } from "../components/icons";
+
+import { register } from "./register";
+
 export const actionSelectAll = register({
   name: "selectAll",
   label: "labels.selectAll",
diff --git a/packages/excalidraw/actions/actionStyles.ts b/packages/excalidraw/actions/actionStyles.ts
index 01f804062..ed3c91e30 100644
--- a/packages/excalidraw/actions/actionStyles.ts
+++ b/packages/excalidraw/actions/actionStyles.ts
@@ -1,30 +1,38 @@
-import {
-  isTextElement,
-  isExcalidrawElement,
-  redrawTextBoundingBox,
-} from "../element";
-import { CODES, KEYS } from "../keys";
-import { t } from "../i18n";
-import { register } from "./register";
-import { newElementWith } from "../element/mutateElement";
 import {
   DEFAULT_FONT_SIZE,
   DEFAULT_FONT_FAMILY,
   DEFAULT_TEXT_ALIGN,
-} from "../constants";
-import { getBoundTextElement } from "../element/textElement";
+  CODES,
+  KEYS,
+  getLineHeight,
+} from "@excalidraw/common";
+
+import { newElementWith } from "@excalidraw/element/mutateElement";
+
 import {
   hasBoundTextElement,
   canApplyRoundnessTypeToElement,
   getDefaultRoundnessTypeForElement,
   isFrameLikeElement,
   isArrowElement,
-} from "../element/typeChecks";
-import { getSelectedElements } from "../scene";
-import type { ExcalidrawTextElement } from "../element/types";
+  isExcalidrawElement,
+  isTextElement,
+} from "@excalidraw/element/typeChecks";
+
+import {
+  getBoundTextElement,
+  redrawTextBoundingBox,
+} from "@excalidraw/element/textElement";
+
+import type { ExcalidrawTextElement } from "@excalidraw/element/types";
+
 import { paintIcon } from "../components/icons";
+
+import { t } from "../i18n";
+import { getSelectedElements } from "../scene";
 import { CaptureUpdateAction } from "../store";
-import { getLineHeight } from "../fonts";
+
+import { register } from "./register";
 
 // `copiedStyles` is exported only for tests.
 export let copiedStyles: string = "{}";
diff --git a/packages/excalidraw/actions/actionTextAutoResize.ts b/packages/excalidraw/actions/actionTextAutoResize.ts
index 29f54c9a7..4a36cab40 100644
--- a/packages/excalidraw/actions/actionTextAutoResize.ts
+++ b/packages/excalidraw/actions/actionTextAutoResize.ts
@@ -1,12 +1,17 @@
-import { isTextElement } from "../element";
-import { newElementWith } from "../element/mutateElement";
-import { measureText } from "../element/textMeasurements";
+import { getFontString } from "@excalidraw/common";
+
+import { newElementWith } from "@excalidraw/element/mutateElement";
+import { measureText } from "@excalidraw/element/textMeasurements";
+
+import { isTextElement } from "@excalidraw/element/typeChecks";
+
 import { getSelectedElements } from "../scene";
 import { CaptureUpdateAction } from "../store";
-import type { AppClassProperties } from "../types";
-import { getFontString } from "../utils";
+
 import { register } from "./register";
 
+import type { AppClassProperties } from "../types";
+
 export const actionTextAutoResize = register({
   name: "autoResize",
   label: "labels.autoResize",
diff --git a/packages/excalidraw/actions/actionToggleGridMode.tsx b/packages/excalidraw/actions/actionToggleGridMode.tsx
index 69d657057..9415051f3 100644
--- a/packages/excalidraw/actions/actionToggleGridMode.tsx
+++ b/packages/excalidraw/actions/actionToggleGridMode.tsx
@@ -1,9 +1,12 @@
-import { CODES, KEYS } from "../keys";
-import { register } from "./register";
-import type { AppState } from "../types";
+import { CODES, KEYS } from "@excalidraw/common";
+
 import { gridIcon } from "../components/icons";
 import { CaptureUpdateAction } from "../store";
 
+import { register } from "./register";
+
+import type { AppState } from "../types";
+
 export const actionToggleGridMode = register({
   name: "gridMode",
   icon: gridIcon,
diff --git a/packages/excalidraw/actions/actionToggleObjectsSnapMode.tsx b/packages/excalidraw/actions/actionToggleObjectsSnapMode.tsx
index 1ae3cbe0b..ba092bff8 100644
--- a/packages/excalidraw/actions/actionToggleObjectsSnapMode.tsx
+++ b/packages/excalidraw/actions/actionToggleObjectsSnapMode.tsx
@@ -1,6 +1,8 @@
+import { CODES, KEYS } from "@excalidraw/common";
+
 import { magnetIcon } from "../components/icons";
-import { CODES, KEYS } from "../keys";
 import { CaptureUpdateAction } from "../store";
+
 import { register } from "./register";
 
 export const actionToggleObjectsSnapMode = register({
diff --git a/packages/excalidraw/actions/actionToggleSearchMenu.ts b/packages/excalidraw/actions/actionToggleSearchMenu.ts
index 9261e79c4..ce384fc66 100644
--- a/packages/excalidraw/actions/actionToggleSearchMenu.ts
+++ b/packages/excalidraw/actions/actionToggleSearchMenu.ts
@@ -1,9 +1,16 @@
-import { KEYS } from "../keys";
-import { register } from "./register";
-import type { AppState } from "../types";
+import {
+  KEYS,
+  CANVAS_SEARCH_TAB,
+  CLASSES,
+  DEFAULT_SIDEBAR,
+} from "@excalidraw/common";
+
 import { searchIcon } from "../components/icons";
 import { CaptureUpdateAction } from "../store";
-import { CANVAS_SEARCH_TAB, CLASSES, DEFAULT_SIDEBAR } from "../constants";
+
+import { register } from "./register";
+
+import type { AppState } from "../types";
 
 export const actionToggleSearchMenu = register({
   name: "searchMenu",
diff --git a/packages/excalidraw/actions/actionToggleStats.tsx b/packages/excalidraw/actions/actionToggleStats.tsx
index e28d099ae..93fd6395b 100644
--- a/packages/excalidraw/actions/actionToggleStats.tsx
+++ b/packages/excalidraw/actions/actionToggleStats.tsx
@@ -1,8 +1,10 @@
-import { register } from "./register";
-import { CODES, KEYS } from "../keys";
+import { CODES, KEYS } from "@excalidraw/common";
+
 import { abacusIcon } from "../components/icons";
 import { CaptureUpdateAction } from "../store";
 
+import { register } from "./register";
+
 export const actionToggleStats = register({
   name: "stats",
   label: "stats.fullTitle",
diff --git a/packages/excalidraw/actions/actionToggleViewMode.tsx b/packages/excalidraw/actions/actionToggleViewMode.tsx
index cae3b095e..81faa9ee6 100644
--- a/packages/excalidraw/actions/actionToggleViewMode.tsx
+++ b/packages/excalidraw/actions/actionToggleViewMode.tsx
@@ -1,6 +1,8 @@
+import { CODES, KEYS } from "@excalidraw/common";
+
 import { eyeIcon } from "../components/icons";
-import { CODES, KEYS } from "../keys";
 import { CaptureUpdateAction } from "../store";
+
 import { register } from "./register";
 
 export const actionToggleViewMode = register({
diff --git a/packages/excalidraw/actions/actionToggleZenMode.tsx b/packages/excalidraw/actions/actionToggleZenMode.tsx
index 31afd3f3a..4d45b3204 100644
--- a/packages/excalidraw/actions/actionToggleZenMode.tsx
+++ b/packages/excalidraw/actions/actionToggleZenMode.tsx
@@ -1,6 +1,8 @@
+import { CODES, KEYS } from "@excalidraw/common";
+
 import { coffeeIcon } from "../components/icons";
-import { CODES, KEYS } from "../keys";
 import { CaptureUpdateAction } from "../store";
+
 import { register } from "./register";
 
 export const actionToggleZenMode = register({
diff --git a/packages/excalidraw/actions/actionZindex.tsx b/packages/excalidraw/actions/actionZindex.tsx
index 4097b2df1..8eb5a50f2 100644
--- a/packages/excalidraw/actions/actionZindex.tsx
+++ b/packages/excalidraw/actions/actionZindex.tsx
@@ -1,31 +1,32 @@
+import { KEYS, CODES, getShortcutKey, isDarwin } from "@excalidraw/common";
+
 import {
   moveOneLeft,
   moveOneRight,
   moveAllLeft,
   moveAllRight,
-} from "../zindex";
-import { KEYS, CODES } from "../keys";
-import { t } from "../i18n";
-import { getShortcutKey } from "../utils";
-import { register } from "./register";
+} from "@excalidraw/element/zindex";
+
 import {
   BringForwardIcon,
   BringToFrontIcon,
   SendBackwardIcon,
   SendToBackIcon,
 } from "../components/icons";
-import { isDarwin } from "../constants";
+import { t } from "../i18n";
 import { CaptureUpdateAction } from "../store";
 
+import { register } from "./register";
+
 export const actionSendBackward = register({
   name: "sendBackward",
   label: "labels.sendBackward",
   keywords: ["move down", "zindex", "layer"],
   icon: SendBackwardIcon,
   trackEvent: { category: "element" },
-  perform: (elements, appState) => {
+  perform: (elements, appState, value, app) => {
     return {
-      elements: moveOneLeft(elements, appState),
+      elements: moveOneLeft(elements, appState, app.scene),
       appState,
       captureUpdate: CaptureUpdateAction.IMMEDIATELY,
     };
@@ -53,9 +54,9 @@ export const actionBringForward = register({
   keywords: ["move up", "zindex", "layer"],
   icon: BringForwardIcon,
   trackEvent: { category: "element" },
-  perform: (elements, appState) => {
+  perform: (elements, appState, value, app) => {
     return {
-      elements: moveOneRight(elements, appState),
+      elements: moveOneRight(elements, appState, app.scene),
       appState,
       captureUpdate: CaptureUpdateAction.IMMEDIATELY,
     };
diff --git a/packages/excalidraw/actions/index.ts b/packages/excalidraw/actions/index.ts
index a556bfbea..f37747aeb 100644
--- a/packages/excalidraw/actions/index.ts
+++ b/packages/excalidraw/actions/index.ts
@@ -30,6 +30,8 @@ export {
   actionToggleTheme,
 } from "./actionCanvas";
 
+export { actionSetEmbeddableAsActiveTool } from "./actionEmbeddable";
+
 export { actionFinalize } from "./actionFinalize";
 
 export {
diff --git a/packages/excalidraw/actions/manager.tsx b/packages/excalidraw/actions/manager.tsx
index f37843800..171bb5df7 100644
--- a/packages/excalidraw/actions/manager.tsx
+++ b/packages/excalidraw/actions/manager.tsx
@@ -1,4 +1,15 @@
 import React from "react";
+
+import { isPromiseLike } from "@excalidraw/common";
+
+import type {
+  ExcalidrawElement,
+  OrderedExcalidrawElement,
+} from "@excalidraw/element/types";
+
+import { trackEvent } from "../analytics";
+
+import type { AppClassProperties, AppState } from "../types";
 import type {
   Action,
   UpdaterFn,
@@ -7,13 +18,6 @@ import type {
   PanelComponentProps,
   ActionSource,
 } from "./types";
-import type {
-  ExcalidrawElement,
-  OrderedExcalidrawElement,
-} from "../element/types";
-import type { AppClassProperties, AppState } from "../types";
-import { trackEvent } from "../analytics";
-import { isPromiseLike } from "../utils";
 
 const trackAction = (
   action: Action,
diff --git a/packages/excalidraw/actions/shortcuts.ts b/packages/excalidraw/actions/shortcuts.ts
index 451609dff..1a13f1703 100644
--- a/packages/excalidraw/actions/shortcuts.ts
+++ b/packages/excalidraw/actions/shortcuts.ts
@@ -1,7 +1,9 @@
-import { isDarwin } from "../constants";
+import { isDarwin, getShortcutKey } from "@excalidraw/common";
+
+import type { SubtypeOf } from "@excalidraw/common/utility-types";
+
 import { t } from "../i18n";
-import type { SubtypeOf } from "../utility-types";
-import { getShortcutKey } from "../utils";
+
 import type { ActionName } from "./types";
 
 export type ShortcutName =
diff --git a/packages/excalidraw/actions/types.ts b/packages/excalidraw/actions/types.ts
index 71ac9f4ab..152b9a0c7 100644
--- a/packages/excalidraw/actions/types.ts
+++ b/packages/excalidraw/actions/types.ts
@@ -1,8 +1,9 @@
-import type React from "react";
 import type {
   ExcalidrawElement,
   OrderedExcalidrawElement,
-} from "../element/types";
+} from "@excalidraw/element/types";
+
+import type { CaptureUpdateActionType } from "../store";
 import type {
   AppClassProperties,
   AppState,
@@ -10,7 +11,7 @@ import type {
   BinaryFiles,
   UIAppState,
 } from "../types";
-import type { CaptureUpdateActionType } from "../store";
+import type React from "react";
 
 export type ActionSource =
   | "ui"
diff --git a/packages/excalidraw/analytics.ts b/packages/excalidraw/analytics.ts
index c8ab15b62..a1d31e4db 100644
--- a/packages/excalidraw/analytics.ts
+++ b/packages/excalidraw/analytics.ts
@@ -1,4 +1,7 @@
 // place here categories that you want to track. We want to track just a
+
+import { isDevEnv } from "@excalidraw/common";
+
 // small subset of categories at a given time.
 const ALLOWED_CATEGORIES_TO_TRACK = new Set(["command_palette", "export"]);
 
@@ -21,7 +24,7 @@ export const trackEvent = (
       return;
     }
 
-    if (import.meta.env.DEV) {
+    if (isDevEnv()) {
       // comment out to debug in dev
       return;
     }
diff --git a/packages/excalidraw/animated-trail.ts b/packages/excalidraw/animated-trail.ts
index 97a005461..286eff6f3 100644
--- a/packages/excalidraw/animated-trail.ts
+++ b/packages/excalidraw/animated-trail.ts
@@ -1,10 +1,16 @@
-import type { LaserPointerOptions } from "@excalidraw/laser-pointer";
 import { LaserPointer } from "@excalidraw/laser-pointer";
+
+import {
+  SVG_NS,
+  getSvgPathFromStroke,
+  sceneCoordsToViewportCoords,
+} from "@excalidraw/common";
+
+import type { LaserPointerOptions } from "@excalidraw/laser-pointer";
+
 import type { AnimationFrameHandler } from "./animation-frame-handler";
-import type { AppState } from "./types";
-import { getSvgPathFromStroke, sceneCoordsToViewportCoords } from "./utils";
 import type App from "./components/App";
-import { SVG_NS } from "./constants";
+import type { AppState } from "./types";
 
 export interface Trail {
   start(container: SVGSVGElement): void;
diff --git a/packages/excalidraw/appState.ts b/packages/excalidraw/appState.ts
index 02c5c15e7..26ce3b7c6 100644
--- a/packages/excalidraw/appState.ts
+++ b/packages/excalidraw/appState.ts
@@ -1,5 +1,5 @@
-import { COLOR_PALETTE } from "./colors";
 import {
+  COLOR_PALETTE,
   ARROW_TYPE,
   DEFAULT_ELEMENT_PROPS,
   DEFAULT_FONT_FAMILY,
@@ -10,7 +10,8 @@ import {
   STATS_PANELS,
   THEME,
   DEFAULT_GRID_STEP,
-} from "./constants";
+} from "@excalidraw/common";
+
 import type { AppState, NormalizedZoomValue } from "./types";
 
 const defaultExportScale = EXPORT_SCALES.includes(devicePixelRatio)
diff --git a/packages/excalidraw/change.ts b/packages/excalidraw/change.ts
index 1cbf39e89..28eaf994f 100644
--- a/packages/excalidraw/change.ts
+++ b/packages/excalidraw/change.ts
@@ -1,25 +1,46 @@
-import { ENV } from "./constants";
-import type { BindableProp, BindingProp } from "./element/binding";
+import {
+  arrayToMap,
+  arrayToObject,
+  assertNever,
+  isDevEnv,
+  isShallowEqual,
+  isTestEnv,
+  toBrandedType,
+} from "@excalidraw/common";
 import {
   BoundElement,
   BindableElement,
   bindingProperties,
   updateBoundElements,
-} from "./element/binding";
-import { LinearElementEditor } from "./element/linearElementEditor";
-import type { ElementUpdate } from "./element/mutateElement";
-import { mutateElement, newElementWith } from "./element/mutateElement";
+} from "@excalidraw/element/binding";
+import { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
+import {
+  mutateElement,
+  newElementWith,
+} from "@excalidraw/element/mutateElement";
 import {
   getBoundTextElementId,
   redrawTextBoundingBox,
-} from "./element/textElement";
+} from "@excalidraw/element/textElement";
 import {
   hasBoundTextElement,
   isBindableElement,
   isBoundToContainer,
   isImageElement,
   isTextElement,
-} from "./element/typeChecks";
+} from "@excalidraw/element/typeChecks";
+
+import { getNonDeletedGroupIds } from "@excalidraw/element/groups";
+
+import {
+  orderByFractionalIndex,
+  syncMovedIndices,
+} from "@excalidraw/element/fractionalIndex";
+
+import type { BindableProp, BindingProp } from "@excalidraw/element/binding";
+
+import type { ElementUpdate } from "@excalidraw/element/mutateElement";
+
 import type {
   ExcalidrawElement,
   ExcalidrawImageElement,
@@ -29,24 +50,18 @@ import type {
   Ordered,
   OrderedExcalidrawElement,
   SceneElementsMap,
-} from "./element/types";
-import { orderByFractionalIndex, syncMovedIndices } from "./fractionalIndex";
-import { getNonDeletedGroupIds } from "./groups";
+} from "@excalidraw/element/types";
+
+import type { SubtypeOf, ValueOf } from "@excalidraw/common/utility-types";
+
 import { getObservedAppState } from "./store";
+
 import type {
   AppState,
   ObservedAppState,
   ObservedElementsAppState,
   ObservedStandaloneAppState,
 } from "./types";
-import type { SubtypeOf, ValueOf } from "./utility-types";
-import {
-  arrayToMap,
-  arrayToObject,
-  assertNever,
-  isShallowEqual,
-  toBrandedType,
-} from "./utils";
 
 /**
  * Represents the difference between two objects of the same type.
@@ -513,7 +528,7 @@ export class AppStateChange implements Change<AppState> {
       // shouldn't really happen, but just in case
       console.error(`Couldn't apply appstate change`, e);
 
-      if (import.meta.env.DEV || import.meta.env.MODE === ENV.TEST) {
+      if (isTestEnv() || isDevEnv()) {
         throw e;
       }
 
@@ -551,7 +566,7 @@ export class AppStateChange implements Change<AppState> {
       // if postprocessing fails it does not make sense to bubble up, but let's make sure we know about it
       console.error(`Couldn't postprocess appstate change deltas.`);
 
-      if (import.meta.env.DEV || import.meta.env.MODE === ENV.TEST) {
+      if (isTestEnv() || isDevEnv()) {
         throw e;
       }
     } finally {
@@ -841,7 +856,7 @@ export class ElementsChange implements Change<SceneElementsMap> {
       change = new ElementsChange(added, removed, updated);
     }
 
-    if (import.meta.env.DEV || import.meta.env.MODE === ENV.TEST) {
+    if (isTestEnv() || isDevEnv()) {
       ElementsChange.validate(change, "added", this.satisfiesAddition);
       ElementsChange.validate(change, "removed", this.satisfiesRemoval);
       ElementsChange.validate(change, "updated", this.satisfiesUpdate);
@@ -1105,7 +1120,7 @@ export class ElementsChange implements Change<SceneElementsMap> {
     } catch (e) {
       console.error(`Couldn't apply elements change`, e);
 
-      if (import.meta.env.DEV || import.meta.env.MODE === ENV.TEST) {
+      if (isTestEnv() || isDevEnv()) {
         throw e;
       }
 
@@ -1136,7 +1151,7 @@ export class ElementsChange implements Change<SceneElementsMap> {
         e,
       );
 
-      if (import.meta.env.DEV || import.meta.env.MODE === ENV.TEST) {
+      if (isTestEnv() || isDevEnv()) {
         throw e;
       }
     } finally {
@@ -1550,7 +1565,7 @@ export class ElementsChange implements Change<SceneElementsMap> {
       // if postprocessing fails, it does not make sense to bubble up, but let's make sure we know about it
       console.error(`Couldn't postprocess elements change deltas.`);
 
-      if (import.meta.env.DEV || import.meta.env.MODE === ENV.TEST) {
+      if (isTestEnv() || isDevEnv()) {
         throw e;
       }
     } finally {
diff --git a/packages/excalidraw/charts.test.ts b/packages/excalidraw/charts.test.ts
index fcd8823a9..94fa92fa0 100644
--- a/packages/excalidraw/charts.test.ts
+++ b/packages/excalidraw/charts.test.ts
@@ -1,6 +1,7 @@
-import type { Spreadsheet } from "./charts";
 import { tryParseCells, tryParseNumber, VALID_SPREADSHEET } from "./charts";
 
+import type { Spreadsheet } from "./charts";
+
 describe("charts", () => {
   describe("tryParseNumber", () => {
     it.each<[string, number]>([
diff --git a/packages/excalidraw/charts.ts b/packages/excalidraw/charts.ts
index 65d17e228..7a221d547 100644
--- a/packages/excalidraw/charts.ts
+++ b/packages/excalidraw/charts.ts
@@ -1,18 +1,25 @@
-import type { Radians } from "@excalidraw/math";
 import { pointFrom } from "@excalidraw/math";
+
 import {
   COLOR_PALETTE,
   DEFAULT_CHART_COLOR_INDEX,
   getAllColorsSpecificShade,
-} from "./colors";
-import {
   DEFAULT_FONT_FAMILY,
   DEFAULT_FONT_SIZE,
   VERTICAL_ALIGN,
-} from "./constants";
-import { newElement, newLinearElement, newTextElement } from "./element";
-import type { NonDeletedExcalidrawElement } from "./element/types";
-import { randomId } from "./random";
+  randomId,
+  isDevEnv,
+} from "@excalidraw/common";
+
+import {
+  newTextElement,
+  newLinearElement,
+  newElement,
+} from "@excalidraw/element/newElement";
+
+import type { Radians } from "@excalidraw/math";
+
+import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
 
 export type ChartElements = readonly NonDeletedExcalidrawElement[];
 
@@ -370,7 +377,7 @@ const chartTypeBar = (
       y,
       groupId,
       backgroundColor,
-      import.meta.env.DEV,
+      isDevEnv(),
     ),
   ];
 };
@@ -452,7 +459,7 @@ const chartTypeLine = (
       y,
       groupId,
       backgroundColor,
-      import.meta.env.DEV,
+      isDevEnv(),
     ),
     line,
     ...lines,
diff --git a/packages/excalidraw/clients.ts b/packages/excalidraw/clients.ts
index 29d240011..9467b1362 100644
--- a/packages/excalidraw/clients.ts
+++ b/packages/excalidraw/clients.ts
@@ -4,8 +4,10 @@ import {
   COLOR_WHITE,
   THEME,
   UserIdleState,
-} from "./constants";
+} from "@excalidraw/common";
+
 import { roundRect } from "./renderer/roundRect";
+
 import type { InteractiveCanvasRenderConfig } from "./scene/types";
 import type {
   Collaborator,
diff --git a/packages/excalidraw/clipboard.ts b/packages/excalidraw/clipboard.ts
index 296a3415a..40e4f8b96 100644
--- a/packages/excalidraw/clipboard.ts
+++ b/packages/excalidraw/clipboard.ts
@@ -1,25 +1,33 @@
-import type {
-  ExcalidrawElement,
-  NonDeletedExcalidrawElement,
-} from "./element/types";
-import type { BinaryFiles } from "./types";
-import type { Spreadsheet } from "./charts";
-import { tryParseSpreadsheet, VALID_SPREADSHEET } from "./charts";
 import {
   ALLOWED_PASTE_MIME_TYPES,
   EXPORT_DATA_TYPES,
   MIME_TYPES,
-} from "./constants";
+  arrayToMap,
+  isMemberOf,
+  isPromiseLike,
+} from "@excalidraw/common";
+
+import { mutateElement } from "@excalidraw/element/mutateElement";
+import { deepCopyElement } from "@excalidraw/element/duplicate";
 import {
   isFrameLikeElement,
   isInitializedImageElement,
-} from "./element/typeChecks";
-import { deepCopyElement } from "./element/newElement";
-import { mutateElement } from "./element/mutateElement";
-import { getContainingFrame } from "./frame";
-import { arrayToMap, isMemberOf, isPromiseLike } from "./utils";
-import { createFile, isSupportedImageFileType } from "./data/blob";
+} from "@excalidraw/element/typeChecks";
+
+import { getContainingFrame } from "@excalidraw/element/frame";
+
+import type {
+  ExcalidrawElement,
+  NonDeletedExcalidrawElement,
+} from "@excalidraw/element/types";
+
 import { ExcalidrawError } from "./errors";
+import { createFile, isSupportedImageFileType } from "./data/blob";
+import { tryParseSpreadsheet, VALID_SPREADSHEET } from "./charts";
+
+import type { Spreadsheet } from "./charts";
+
+import type { BinaryFiles } from "./types";
 
 type ElementsClipboard = {
   type: typeof EXPORT_DATA_TYPES.excalidrawClipboard;
diff --git a/packages/excalidraw/components/Actions.tsx b/packages/excalidraw/components/Actions.tsx
index cd9120fbc..b69204867 100644
--- a/packages/excalidraw/components/Actions.tsx
+++ b/packages/excalidraw/components/Actions.tsx
@@ -1,13 +1,42 @@
+import clsx from "clsx";
 import { useState } from "react";
-import type { ActionManager } from "../actions/manager";
+
+import {
+  CLASSES,
+  KEYS,
+  capitalizeString,
+  isTransparent,
+} from "@excalidraw/common";
+
+import {
+  shouldAllowVerticalAlign,
+  suppportsHorizontalAlign,
+} from "@excalidraw/element/textElement";
+
+import {
+  hasBoundTextElement,
+  isElbowArrow,
+  isImageElement,
+  isLinearElement,
+  isTextElement,
+} from "@excalidraw/element/typeChecks";
+
+import { hasStrokeColor, toolIsArrow } from "@excalidraw/element/comparisons";
+
 import type {
   ExcalidrawElement,
   ExcalidrawElementType,
   NonDeletedElementsMap,
   NonDeletedSceneElementsMap,
-} from "../element/types";
+} from "@excalidraw/element/types";
+
+import { actionToggleZenMode } from "../actions";
+
+import { alignActionsPredicate } from "../actions/actionAlign";
+import { trackEvent } from "../analytics";
+import { useTunnels } from "../context/tunnels";
+
 import { t } from "../i18n";
-import { useDevice } from "./App";
 import {
   canChangeRoundness,
   canHaveArrowheads,
@@ -16,29 +45,15 @@ import {
   hasStrokeStyle,
   hasStrokeWidth,
 } from "../scene";
-import { SHAPES } from "../shapes";
-import type { AppClassProperties, AppProps, UIAppState, Zoom } from "../types";
-import { capitalizeString, isTransparent } from "../utils";
-import Stack from "./Stack";
-import { ToolButton } from "./ToolButton";
-import { hasStrokeColor, toolIsArrow } from "../scene/comparisons";
-import { trackEvent } from "../analytics";
-import {
-  hasBoundTextElement,
-  isElbowArrow,
-  isImageElement,
-  isLinearElement,
-  isTextElement,
-} from "../element/typeChecks";
-import clsx from "clsx";
-import { actionToggleZenMode } from "../actions";
-import { Tooltip } from "./Tooltip";
-import {
-  shouldAllowVerticalAlign,
-  suppportsHorizontalAlign,
-} from "../element/textElement";
+
+import { SHAPES } from "./shapes";
 
 import "./Actions.scss";
+
+import { useDevice } from "./App";
+import Stack from "./Stack";
+import { ToolButton } from "./ToolButton";
+import { Tooltip } from "./Tooltip";
 import DropdownMenu from "./dropdownMenu/DropdownMenu";
 import {
   EmbedIcon,
@@ -48,10 +63,9 @@ import {
   laserPointerToolIcon,
   MagicIcon,
 } from "./icons";
-import { KEYS } from "../keys";
-import { useTunnels } from "../context/tunnels";
-import { CLASSES } from "../constants";
-import { alignActionsPredicate } from "../actions/actionAlign";
+
+import type { AppClassProperties, AppProps, UIAppState, Zoom } from "../types";
+import type { ActionManager } from "../actions/manager";
 
 export const canChangeStrokeColor = (
   appState: UIAppState,
diff --git a/packages/excalidraw/components/ActiveConfirmDialog.tsx b/packages/excalidraw/components/ActiveConfirmDialog.tsx
index 699fbc61f..00c6ad579 100644
--- a/packages/excalidraw/components/ActiveConfirmDialog.tsx
+++ b/packages/excalidraw/components/ActiveConfirmDialog.tsx
@@ -1,6 +1,7 @@
 import { actionClearCanvas } from "../actions";
-import { t } from "../i18n";
 import { atom, useAtom } from "../editor-jotai";
+import { t } from "../i18n";
+
 import { useExcalidrawActionManager } from "./App";
 import ConfirmDialog from "./ConfirmDialog";
 
diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx
index 938309c30..9046c393d 100644
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@@ -1,55 +1,34 @@
+import clsx from "clsx";
+import throttle from "lodash.throttle";
 import React, { useContext } from "react";
 import { flushSync } from "react-dom";
-
-import type { RoughCanvas } from "roughjs/bin/canvas";
 import rough from "roughjs/bin/rough";
-import clsx from "clsx";
 import { nanoid } from "nanoid";
+
 import {
-  actionAddToLibrary,
-  actionBringForward,
-  actionBringToFront,
-  actionCopy,
-  actionCopyAsPng,
-  actionCopyAsSvg,
-  copyText,
-  actionCopyStyles,
-  actionCut,
-  actionDeleteSelected,
-  actionDuplicateSelection,
-  actionFinalize,
-  actionFlipHorizontal,
-  actionFlipVertical,
-  actionGroup,
-  actionPasteStyles,
-  actionSelectAll,
-  actionSendBackward,
-  actionSendToBack,
-  actionToggleGridMode,
-  actionToggleStats,
-  actionToggleZenMode,
-  actionUnbindText,
-  actionBindText,
-  actionUngroup,
-  actionLink,
-  actionToggleElementLock,
-  actionToggleLinearEditor,
-  actionToggleObjectsSnapMode,
-  actionToggleCropEditor,
-} from "../actions";
-import { createRedoAction, createUndoAction } from "../actions/actionHistory";
-import { ActionManager } from "../actions/manager";
-import { actions } from "../actions/register";
-import type { Action, ActionResult } from "../actions/types";
-import { trackEvent } from "../analytics";
-import {
-  getDefaultAppState,
-  isEraserActive,
-  isHandToolActive,
-} from "../appState";
-import type { PastedMixedContent } from "../clipboard";
-import { copyTextToSystemClipboard, parseClipboard } from "../clipboard";
+  clamp,
+  pointFrom,
+  pointDistance,
+  vector,
+  pointRotateRads,
+  vectorScale,
+  vectorFromPoint,
+  vectorSubtract,
+  vectorDot,
+  vectorNormalize,
+} from "@excalidraw/math";
+import { isPointInShape } from "@excalidraw/utils/collision";
+import { getSelectionBoxShape } from "@excalidraw/utils/shape";
+import { convertToShape } from "@excalidraw/utils/snapToShape";
+
 import {
+  COLOR_PALETTE,
+  CODES,
+  shouldResizeFromCenter,
+  shouldMaintainAspectRatio,
+  shouldRotateWithDiscreteAngle,
+  isArrowKey,
+  KEYS,
   APP_NAME,
   CURSOR_TYPE,
   DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT,
@@ -57,7 +36,6 @@ import {
   DRAGGING_THRESHOLD,
   ELEMENT_SHIFT_TRANSLATE_AMOUNT,
   ELEMENT_TRANSLATE_AMOUNT,
-  ENV,
   EVENT,
   FRAME_STYLE,
   IMAGE_MIME_TYPES,
@@ -90,42 +68,49 @@ import {
   ARROW_TYPE,
   DEFAULT_REDUCED_GLOBAL_ALPHA,
   isSafari,
+  isLocalLink,
+  normalizeLink,
+  toValidURL,
+  getGridPoint,
+  getLineHeight,
+  debounce,
+  distance,
+  getFontString,
+  getNearestScrollableContainer,
+  isInputLike,
+  isToolIcon,
+  isWritableElement,
+  sceneCoordsToViewportCoords,
+  tupleToCoors,
+  viewportCoordsToSceneCoords,
+  wrapEvent,
+  updateObject,
+  updateActiveTool,
+  getShortcutKey,
+  isTransparent,
+  easeToValuesRAF,
+  muteFSAbortError,
+  isTestEnv,
+  isDevEnv,
+  easeOut,
+  updateStable,
+  addEventListener,
+  normalizeEOL,
+  getDateTime,
+  isShallowEqual,
+  arrayToMap,
   type EXPORT_IMAGE_TYPES,
-} from "../constants";
-import type { ExportedElements } from "../data";
-import { exportCanvas, loadFromBlob } from "../data";
-import Library, { distributeLibraryItemsOnSquareGrid } from "../data/library";
-import { restore, restoreElements } from "../data/restore";
+} from "@excalidraw/common";
+
 import {
-  dragNewElement,
-  dragSelectedElements,
-  duplicateElement,
   getCommonBounds,
-  getCursorForResizingElement,
-  getDragOffsetXY,
-  getElementWithTransformHandleType,
-  getNormalizedDimensions,
-  getResizeArrowDirection,
-  getResizeOffsetXY,
-  getLockedLinearCursorAlignSize,
-  getTransformHandleTypeFromCoords,
-  isInvisiblySmallElement,
-  isNonDeletedElement,
-  isTextElement,
-  newElement,
-  newLinearElement,
-  newTextElement,
-  newImageElement,
-  transformElements,
-  refreshTextDimensions,
-  redrawTextBoundingBox,
   getElementAbsoluteCoords,
-} from "../element";
+} from "@excalidraw/element/bounds";
+
 import {
   bindOrUnbindLinearElement,
   bindOrUnbindLinearElements,
   fixBindingsAfterDeletion,
-  fixBindingsAfterDuplication,
   getHoveredElementForBinding,
   isBindingEnabled,
   isLinearElementSimpleAndAlreadyBound,
@@ -133,19 +118,34 @@ import {
   shouldEnableBindingForPointerEvent,
   updateBoundElements,
   getSuggestedBindingsForArrows,
-} from "../element/binding";
-import { LinearElementEditor } from "../element/linearElementEditor";
-import { mutateElement, newElementWith } from "../element/mutateElement";
+} from "@excalidraw/element/binding";
+
+import { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
+
+import {
+  mutateElement,
+  newElementWith,
+} from "@excalidraw/element/mutateElement";
+
 import {
-  deepCopyElement,
-  duplicateElements,
   newFrameElement,
   newFreeDrawElement,
   newEmbeddableElement,
   newMagicFrameElement,
   newIframeElement,
   newArrowElement,
-} from "../element/newElement";
+  newElement,
+  newImageElement,
+  newLinearElement,
+  newTextElement,
+  refreshTextDimensions,
+} from "@excalidraw/element/newElement";
+
+import {
+  deepCopyElement,
+  duplicateElements,
+} from "@excalidraw/element/duplicate";
+
 import {
   hasBoundTextElement,
   isArrowElement,
@@ -166,7 +166,144 @@ import {
   isElbowArrow,
   isFlowchartNodeElement,
   isBindableElement,
-} from "../element/typeChecks";
+  isTextElement,
+} from "@excalidraw/element/typeChecks";
+
+import {
+  getLockedLinearCursorAlignSize,
+  getNormalizedDimensions,
+  isElementCompletelyInViewport,
+  isElementInViewport,
+  isInvisiblySmallElement,
+} from "@excalidraw/element/sizeHelpers";
+
+import {
+  getBoundTextShape,
+  getCornerRadius,
+  getElementShape,
+  isPathALoop,
+} from "@excalidraw/element/shapes";
+
+import {
+  createSrcDoc,
+  embeddableURLValidator,
+  maybeParseEmbedSrc,
+  getEmbedLink,
+} from "@excalidraw/element/embeddable";
+
+import {
+  getInitializedImageElements,
+  loadHTMLImageElement,
+  normalizeSVG,
+  updateImageCache as _updateImageCache,
+} from "@excalidraw/element/image";
+
+import {
+  getBoundTextElement,
+  getContainerCenter,
+  getContainerElement,
+  isValidTextContainer,
+  redrawTextBoundingBox,
+} from "@excalidraw/element/textElement";
+
+import { shouldShowBoundingBox } from "@excalidraw/element/transformHandles";
+
+import {
+  getFrameChildren,
+  isCursorInFrame,
+  addElementsToFrame,
+  replaceAllElementsInFrame,
+  removeElementsFromFrame,
+  getElementsInResizingFrame,
+  getElementsInNewFrame,
+  getContainingFrame,
+  elementOverlapsWithFrame,
+  updateFrameMembershipOfSelectedElements,
+  isElementInFrame,
+  getFrameLikeTitle,
+  getElementsOverlappingFrame,
+  filterElementsEligibleAsFrameChildren,
+} from "@excalidraw/element/frame";
+
+import {
+  hitElementBoundText,
+  hitElementBoundingBoxOnly,
+  hitElementItself,
+} from "@excalidraw/element/collision";
+
+import { getVisibleSceneBounds } from "@excalidraw/element/bounds";
+
+import {
+  FlowChartCreator,
+  FlowChartNavigator,
+  getLinkDirectionFromKey,
+} from "@excalidraw/element/flowchart";
+
+import { cropElement } from "@excalidraw/element/cropElement";
+
+import { wrapText } from "@excalidraw/element/textWrapping";
+
+import {
+  isElementLink,
+  parseElementLinkFromURL,
+} from "@excalidraw/element/elementLink";
+
+import {
+  isMeasureTextSupported,
+  normalizeText,
+  measureText,
+  getLineHeightInPx,
+  getApproxMinLineWidth,
+  getApproxMinLineHeight,
+  getMinTextElementWidth,
+} from "@excalidraw/element/textMeasurements";
+
+import { ShapeCache } from "@excalidraw/element/ShapeCache";
+
+import { getRenderOpacity } from "@excalidraw/element/renderElement";
+
+import {
+  editGroupForSelectedElement,
+  getElementsInGroup,
+  getSelectedGroupIdForElement,
+  getSelectedGroupIds,
+  isElementInGroup,
+  isSelectedViaGroup,
+  selectGroupsForSelectedElements,
+} from "@excalidraw/element/groups";
+
+import {
+  syncInvalidIndices,
+  syncMovedIndices,
+} from "@excalidraw/element/fractionalIndex";
+
+import {
+  excludeElementsInFramesFromSelection,
+  makeNextSelectedElementIds,
+} from "@excalidraw/element/selection";
+
+import {
+  getResizeOffsetXY,
+  getResizeArrowDirection,
+  transformElements,
+} from "@excalidraw/element/resizeElements";
+
+import {
+  getCursorForResizingElement,
+  getElementWithTransformHandleType,
+  getTransformHandleTypeFromCoords,
+} from "@excalidraw/element/resizeTest";
+
+import {
+  dragNewElement,
+  dragSelectedElements,
+  getDragOffsetXY,
+} from "@excalidraw/element/dragElements";
+
+import { isNonDeletedElement } from "@excalidraw/element";
+
+import type { LocalPoint, Radians } from "@excalidraw/math";
+
 import type {
   ExcalidrawBindableElement,
   ExcalidrawElement,
@@ -190,31 +327,73 @@ import type {
   MagicGenerationData,
   ExcalidrawNonSelectionElement,
   ExcalidrawArrowElement,
-} from "../element/types";
-import { getCenter, getDistance } from "../gesture";
+} from "@excalidraw/element/types";
+
+import type { ValueOf } from "@excalidraw/common/utility-types";
+
 import {
-  editGroupForSelectedElement,
-  getElementsInGroup,
-  getSelectedGroupIdForElement,
-  getSelectedGroupIds,
-  isElementInGroup,
-  isSelectedViaGroup,
-  selectGroupsForSelectedElements,
-} from "../groups";
+  actionAddToLibrary,
+  actionBringForward,
+  actionBringToFront,
+  actionCopy,
+  actionCopyAsPng,
+  actionCopyAsSvg,
+  copyText,
+  actionCopyStyles,
+  actionCut,
+  actionDeleteSelected,
+  actionDuplicateSelection,
+  actionFinalize,
+  actionFlipHorizontal,
+  actionFlipVertical,
+  actionGroup,
+  actionPasteStyles,
+  actionSelectAll,
+  actionSendBackward,
+  actionSendToBack,
+  actionToggleGridMode,
+  actionToggleStats,
+  actionToggleZenMode,
+  actionUnbindText,
+  actionBindText,
+  actionUngroup,
+  actionLink,
+  actionToggleElementLock,
+  actionToggleLinearEditor,
+  actionToggleObjectsSnapMode,
+  actionToggleCropEditor,
+} from "../actions";
+import { actionWrapTextInContainer } from "../actions/actionBoundText";
+import { actionToggleHandTool, zoomToFit } from "../actions/actionCanvas";
+import { actionPaste } from "../actions/actionClipboard";
+import { actionCopyElementLink } from "../actions/actionElementLink";
+import { actionUnlockAllElements } from "../actions/actionElementLock";
+import {
+  actionRemoveAllElementsFromFrame,
+  actionSelectAllElementsInFrame,
+  actionWrapSelectionInFrame,
+} from "../actions/actionFrame";
+import { createRedoAction, createUndoAction } from "../actions/actionHistory";
+import { actionTextAutoResize } from "../actions/actionTextAutoResize";
+import { actionToggleViewMode } from "../actions/actionToggleViewMode";
+import { ActionManager } from "../actions/manager";
+import { actions } from "../actions/register";
+import { getShortcutFromShortcutName } from "../actions/shortcuts";
+import { trackEvent } from "../analytics";
+import { AnimationFrameHandler } from "../animation-frame-handler";
+import {
+  getDefaultAppState,
+  isEraserActive,
+  isHandToolActive,
+} from "../appState";
+import { copyTextToSystemClipboard, parseClipboard } from "../clipboard";
+import { exportCanvas, loadFromBlob } from "../data";
+import Library, { distributeLibraryItemsOnSquareGrid } from "../data/library";
+import { restore, restoreElements } from "../data/restore";
+import { getCenter, getDistance } from "../gesture";
 import { History } from "../history";
 import { defaultLang, getLanguage, languages, setLanguage, t } from "../i18n";
-import {
-  CODES,
-  shouldResizeFromCenter,
-  shouldMaintainAspectRatio,
-  shouldRotateWithDiscreteAngle,
-  isArrowKey,
-  KEYS,
-} from "../keys";
-import {
-  isElementCompletelyInViewport,
-  isElementInViewport,
-} from "../element/sizeHelpers";
+
 import {
   calculateScrollCenter,
   getElementsWithinSelection,
@@ -224,20 +403,97 @@ import {
   isSomeElementSelected,
 } from "../scene";
 import Scene from "../scene/Scene";
+import { getStateForZoom } from "../scene/zoom";
+import {
+  dataURLToFile,
+  dataURLToString,
+  generateIdFromFile,
+  getDataURL,
+  getDataURL_sync,
+  getFileFromEvent,
+  ImageURLToFile,
+  isImageFileHandle,
+  isSupportedImageFile,
+  loadSceneOrLibraryFromBlob,
+  normalizeFile,
+  parseLibraryJSON,
+  resizeImageFile,
+  SVGStringToFile,
+} from "../data/blob";
+
+import { fileOpen } from "../data/filesystem";
+import {
+  showHyperlinkTooltip,
+  hideHyperlinkToolip,
+  Hyperlink,
+} from "../components/hyperlink/Hyperlink";
+
+import { Fonts } from "../fonts";
+import { editorJotaiStore } from "../editor-jotai";
+import { ImageSceneDataError } from "../errors";
+import {
+  getSnapLinesAtPointer,
+  snapDraggedElements,
+  isActiveToolNonLinearSnappable,
+  snapNewElement,
+  snapResizingElements,
+  isSnappingEnabled,
+  getVisibleGaps,
+  getReferenceSnapPoints,
+  SnapCache,
+  isGridModeEnabled,
+} from "../snapping";
+import { convertToExcalidrawElements } from "../data/transform";
+import { Renderer } from "../scene/Renderer";
+import {
+  setEraserCursor,
+  setCursor,
+  resetCursor,
+  setCursorForShape,
+} from "../cursor";
+import { Emitter } from "../emitter";
+import { ElementCanvasButtons } from "../components/ElementCanvasButtons";
+import { Store, CaptureUpdateAction } from "../store";
+import { AnimatedTrail } from "../animated-trail";
+import { LaserTrails } from "../laser-trails";
+import { withBatchedUpdates, withBatchedUpdatesThrottled } from "../reactUtils";
+import { textWysiwyg } from "../wysiwyg/textWysiwyg";
+import { isOverScrollBars } from "../scene/scrollbars";
+
+import { isMaybeMermaidDefinition } from "../mermaid";
+
+import { activeConfirmDialogAtom } from "./ActiveConfirmDialog";
+import BraveMeasureTextError from "./BraveMeasureTextError";
+import { ContextMenu, CONTEXT_MENU_SEPARATOR } from "./ContextMenu";
+import { activeEyeDropperAtom } from "./EyeDropper";
+import FollowMode from "./FollowMode/FollowMode";
+import LayerUI from "./LayerUI";
+import { ElementCanvasButton } from "./MagicButton";
+import { SVGLayer } from "./SVGLayer";
+import { searchItemInFocusAtom } from "./SearchMenu";
+import { isSidebarDockedAtom } from "./Sidebar/Sidebar";
+import { StaticCanvas, InteractiveCanvas } from "./canvases";
+import NewElementCanvas from "./canvases/NewElementCanvas";
+import {
+  isPointHittingLink,
+  isPointHittingLinkIcon,
+} from "./hyperlink/helpers";
+import { MagicIcon, copyIcon, fullscreenIcon } from "./icons";
+import { Toast } from "./Toast";
+
+import { findShapeByKey } from "./shapes";
+
 import type {
   RenderInteractiveSceneCallback,
   ScrollBars,
 } from "../scene/types";
-import { getStateForZoom } from "../scene/zoom";
-import {
-  findShapeByKey,
-  getBoundTextShape,
-  getCornerRadius,
-  getElementShape,
-  isPathALoop,
-} from "../shapes";
-import { getSelectionBoxShape } from "@excalidraw/utils/geometry/shape";
-import { isPointInShape } from "@excalidraw/utils/collision";
+
+import type { PastedMixedContent } from "../clipboard";
+import type { ExportedElements } from "../data";
+import type { ContextMenuItems } from "./ContextMenu";
+import type { FileSystemHandle } from "../data/filesystem";
+import type { ExcalidrawElementSkeleton } from "../data/transform";
+
 import type {
   AppClassProperties,
   AppProps,
@@ -266,208 +522,8 @@ import type {
   NullableGridSize,
   Offsets,
 } from "../types";
-import {
-  debounce,
-  distance,
-  getFontString,
-  getNearestScrollableContainer,
-  isInputLike,
-  isToolIcon,
-  isWritableElement,
-  sceneCoordsToViewportCoords,
-  tupleToCoors,
-  viewportCoordsToSceneCoords,
-  wrapEvent,
-  updateObject,
-  updateActiveTool,
-  getShortcutKey,
-  isTransparent,
-  easeToValuesRAF,
-  muteFSAbortError,
-  isTestEnv,
-  easeOut,
-  updateStable,
-  addEventListener,
-  normalizeEOL,
-  getDateTime,
-  isShallowEqual,
-  arrayToMap,
-} from "../utils";
-import {
-  createSrcDoc,
-  embeddableURLValidator,
-  maybeParseEmbedSrc,
-  getEmbedLink,
-} from "../element/embeddable";
-import { convertToShape } from "@excalidraw/utils/snapToShape";
-import type { ContextMenuItems } from "./ContextMenu";
-import { ContextMenu, CONTEXT_MENU_SEPARATOR } from "./ContextMenu";
-import LayerUI from "./LayerUI";
-import { Toast } from "./Toast";
-import { actionToggleViewMode } from "../actions/actionToggleViewMode";
-import {
-  dataURLToFile,
-  dataURLToString,
-  generateIdFromFile,
-  getDataURL,
-  getDataURL_sync,
-  getFileFromEvent,
-  ImageURLToFile,
-  isImageFileHandle,
-  isSupportedImageFile,
-  loadSceneOrLibraryFromBlob,
-  normalizeFile,
-  parseLibraryJSON,
-  resizeImageFile,
-  SVGStringToFile,
-} from "../data/blob";
-import {
-  getInitializedImageElements,
-  loadHTMLImageElement,
-  normalizeSVG,
-  updateImageCache as _updateImageCache,
-} from "../element/image";
-import throttle from "lodash.throttle";
-import type { FileSystemHandle } from "../data/filesystem";
-import { fileOpen } from "../data/filesystem";
-import {
-  bindTextToShapeAfterDuplication,
-  getBoundTextElement,
-  getContainerCenter,
-  getContainerElement,
-  isValidTextContainer,
-} from "../element/textElement";
-import {
-  showHyperlinkTooltip,
-  hideHyperlinkToolip,
-  Hyperlink,
-} from "../components/hyperlink/Hyperlink";
-import { isLocalLink, normalizeLink, toValidURL } from "../data/url";
-import { shouldShowBoundingBox } from "../element/transformHandles";
-import { actionUnlockAllElements } from "../actions/actionElementLock";
-import { Fonts, getLineHeight } from "../fonts";
-import {
-  getFrameChildren,
-  isCursorInFrame,
-  bindElementsToFramesAfterDuplication,
-  addElementsToFrame,
-  replaceAllElementsInFrame,
-  removeElementsFromFrame,
-  getElementsInResizingFrame,
-  getElementsInNewFrame,
-  getContainingFrame,
-  elementOverlapsWithFrame,
-  updateFrameMembershipOfSelectedElements,
-  isElementInFrame,
-  getFrameLikeTitle,
-  getElementsOverlappingFrame,
-  filterElementsEligibleAsFrameChildren,
-} from "../frame";
-import {
-  excludeElementsInFramesFromSelection,
-  makeNextSelectedElementIds,
-} from "../scene/selection";
-import { actionPaste } from "../actions/actionClipboard";
-import {
-  actionRemoveAllElementsFromFrame,
-  actionSelectAllElementsInFrame,
-  actionWrapSelectionInFrame,
-} from "../actions/actionFrame";
-import { actionToggleHandTool, zoomToFit } from "../actions/actionCanvas";
-import { editorJotaiStore } from "../editor-jotai";
-import { activeConfirmDialogAtom } from "./ActiveConfirmDialog";
-import { ImageSceneDataError } from "../errors";
-import {
-  getSnapLinesAtPointer,
-  snapDraggedElements,
-  isActiveToolNonLinearSnappable,
-  snapNewElement,
-  snapResizingElements,
-  isSnappingEnabled,
-  getVisibleGaps,
-  getReferenceSnapPoints,
-  SnapCache,
-  isGridModeEnabled,
-  getGridPoint,
-} from "../snapping";
-import { actionWrapTextInContainer } from "../actions/actionBoundText";
-import BraveMeasureTextError from "./BraveMeasureTextError";
-import { activeEyeDropperAtom } from "./EyeDropper";
-import type { ExcalidrawElementSkeleton } from "../data/transform";
-import { convertToExcalidrawElements } from "../data/transform";
-import type { ValueOf } from "../utility-types";
-import { isSidebarDockedAtom } from "./Sidebar/Sidebar";
-import { StaticCanvas, InteractiveCanvas } from "./canvases";
-import { Renderer } from "../scene/Renderer";
-import { ShapeCache } from "../scene/ShapeCache";
-import { SVGLayer } from "./SVGLayer";
-import {
-  setEraserCursor,
-  setCursor,
-  resetCursor,
-  setCursorForShape,
-} from "../cursor";
-import { Emitter } from "../emitter";
-import { ElementCanvasButtons } from "../element/ElementCanvasButtons";
-import { COLOR_PALETTE } from "../colors";
-import { ElementCanvasButton } from "./MagicButton";
-import { MagicIcon, copyIcon, fullscreenIcon } from "./icons";
-import FollowMode from "./FollowMode/FollowMode";
-import { Store, CaptureUpdateAction } from "../store";
-import { AnimationFrameHandler } from "../animation-frame-handler";
-import { AnimatedTrail } from "../animated-trail";
-import { LaserTrails } from "../laser-trails";
-import { withBatchedUpdates, withBatchedUpdatesThrottled } from "../reactUtils";
-import { getRenderOpacity } from "../renderer/renderElement";
-import {
-  hitElementBoundText,
-  hitElementBoundingBoxOnly,
-  hitElementItself,
-} from "../element/collision";
-import { textWysiwyg } from "../element/textWysiwyg";
-import { isOverScrollBars } from "../scene/scrollbars";
-import { syncInvalidIndices, syncMovedIndices } from "../fractionalIndex";
-import {
-  isPointHittingLink,
-  isPointHittingLinkIcon,
-} from "./hyperlink/helpers";
-import { getShortcutFromShortcutName } from "../actions/shortcuts";
-import { actionTextAutoResize } from "../actions/actionTextAutoResize";
-import { getVisibleSceneBounds } from "../element/bounds";
-import { isMaybeMermaidDefinition } from "../mermaid";
-import NewElementCanvas from "./canvases/NewElementCanvas";
-import {
-  FlowChartCreator,
-  FlowChartNavigator,
-  getLinkDirectionFromKey,
-} from "../element/flowchart";
-import { searchItemInFocusAtom } from "./SearchMenu";
-import type { LocalPoint, Radians } from "@excalidraw/math";
-import {
-  clamp,
-  pointFrom,
-  pointDistance,
-  vector,
-  pointRotateRads,
-  vectorScale,
-  vectorFromPoint,
-  vectorSubtract,
-  vectorDot,
-  vectorNormalize,
-} from "@excalidraw/math";
-import { cropElement } from "../element/cropElement";
-import { wrapText } from "../element/textWrapping";
-import { actionCopyElementLink } from "../actions/actionElementLink";
-import { isElementLink, parseElementLinkFromURL } from "../element/elementLink";
-import {
-  isMeasureTextSupported,
-  normalizeText,
-  measureText,
-  getLineHeightInPx,
-  getApproxMinLineWidth,
-  getApproxMinLineHeight,
-  getMinTextElementWidth,
-} from "../element/textMeasurements";
+import type { RoughCanvas } from "roughjs/bin/canvas";
+import type { Action, ActionResult } from "../actions/types";
 
 const AppContext = React.createContext<AppClassProperties>(null!);
 const AppPropsContext = React.createContext<AppProps>(null!);
@@ -2437,7 +2493,7 @@ class App extends React.Component<AppProps, AppState> {
     this.excalidrawContainerValue.container =
       this.excalidrawContainerRef.current;
 
-    if (import.meta.env.MODE === ENV.TEST || import.meta.env.DEV) {
+    if (isTestEnv() || isDevEnv()) {
       const setState = this.setState.bind(this);
       Object.defineProperties(window.h, {
         state: {
@@ -3222,17 +3278,16 @@ class App extends React.Component<AppProps, AppState> {
 
     const [gridX, gridY] = getGridPoint(dx, dy, this.getEffectiveGridSize());
 
-    const newElements = duplicateElements(
-      elements.map((element) => {
+    const { newElements } = duplicateElements({
+      type: "everything",
+      elements: elements.map((element) => {
         return newElementWith(element, {
           x: element.x + gridX - minX,
           y: element.y + gridY - minY,
         });
       }),
-      {
-        randomizeSeed: !opts.retainSeed,
-      },
-    );
+      randomizeSeed: !opts.retainSeed,
+    });
 
     const prevElements = this.scene.getElementsIncludingDeleted();
     let nextElements = [...prevElements, ...newElements];
@@ -6093,7 +6148,12 @@ class App extends React.Component<AppProps, AppState> {
             this.setState({
               activeEmbeddable: { element: hitElement, state: "hover" },
             });
-          } else if (!hitElement || !isElbowArrow(hitElement)) {
+          } else if (
+            !hitElement ||
+            // Ebow arrows can only be moved when unconnected
+            !isElbowArrow(hitElement) ||
+            !(hitElement.startBinding || hitElement.endBinding)
+          ) {
             setCursor(this.interactiveCanvas, CURSOR_TYPE.MOVE);
             if (this.state.activeEmbeddable?.state === "hover") {
               this.setState({ activeEmbeddable: null });
@@ -6286,7 +6346,13 @@ class App extends React.Component<AppProps, AppState> {
         if (isHoveringAPointHandle || segmentMidPointHoveredCoords) {
           setCursor(this.interactiveCanvas, CURSOR_TYPE.POINTER);
         } else if (this.hitElement(scenePointerX, scenePointerY, element)) {
-          setCursor(this.interactiveCanvas, CURSOR_TYPE.MOVE);
+          if (
+            // Ebow arrows can only be moved when unconnected
+            !isElbowArrow(element) ||
+            !(element.startBinding || element.endBinding)
+          ) {
+            setCursor(this.interactiveCanvas, CURSOR_TYPE.MOVE);
+          }
         }
       } else if (this.hitElement(scenePointerX, scenePointerY, element)) {
         if (
@@ -8136,6 +8202,7 @@ class App extends React.Component<AppProps, AppState> {
                   ...this.state.selectedLinearElement,
                   pointerDownState: ret.pointerDownState,
                   selectedPointsIndices: ret.selectedPointsIndices,
+                  segmentMidPointHoveredCoords: null,
                 },
               });
             }
@@ -8145,6 +8212,7 @@ class App extends React.Component<AppProps, AppState> {
                   ...this.state.editingLinearElement,
                   pointerDownState: ret.pointerDownState,
                   selectedPointsIndices: ret.selectedPointsIndices,
+                  segmentMidPointHoveredCoords: null,
                 },
               });
             }
@@ -8158,7 +8226,7 @@ class App extends React.Component<AppProps, AppState> {
           return;
         }
 
-        const didDrag = LinearElementEditor.handlePointDragging(
+        const newLinearElementEditor = LinearElementEditor.handlePointDragging(
           event,
           this,
           pointerCoords.x,
@@ -8172,29 +8240,18 @@ class App extends React.Component<AppProps, AppState> {
           linearElementEditor,
           this.scene,
         );
-        if (didDrag) {
+        if (newLinearElementEditor) {
           pointerDownState.lastCoords.x = pointerCoords.x;
           pointerDownState.lastCoords.y = pointerCoords.y;
           pointerDownState.drag.hasOccurred = true;
-          if (
-            this.state.editingLinearElement &&
-            !this.state.editingLinearElement.isDragging
-          ) {
-            this.setState({
-              editingLinearElement: {
-                ...this.state.editingLinearElement,
-                isDragging: true,
-              },
-            });
-          }
-          if (!this.state.selectedLinearElement.isDragging) {
-            this.setState({
-              selectedLinearElement: {
-                ...this.state.selectedLinearElement,
-                isDragging: true,
-              },
-            });
-          }
+
+          this.setState({
+            editingLinearElement: this.state.editingLinearElement
+              ? newLinearElementEditor
+              : null,
+            selectedLinearElement: newLinearElementEditor,
+          });
+
           return;
         }
       }
@@ -8420,145 +8477,55 @@ class App extends React.Component<AppProps, AppState> {
 
             pointerDownState.hit.hasBeenDuplicated = true;
 
-            const nextElements = [];
-            const elementsToAppend = [];
-            const groupIdMap = new Map();
-            const oldIdToDuplicatedId = new Map();
-            const hitElement = pointerDownState.hit.element;
-            const selectedElementIds = new Set(
-              this.scene
-                .getSelectedElements({
-                  selectedElementIds: this.state.selectedElementIds,
-                  includeBoundTextElement: true,
-                  includeElementsInFrames: true,
-                })
-                .map((element) => element.id),
-            );
-
             const elements = this.scene.getElementsIncludingDeleted();
-
-            for (const element of elements) {
-              const isInSelection =
-                selectedElementIds.has(element.id) ||
-                // case: the state.selectedElementIds might not have been
-                // updated yet by the time this mousemove event is fired
-                (element.id === hitElement?.id &&
-                  pointerDownState.hit.wasAddedToSelection);
-              // NOTE (mtolmacs): This is a temporary fix for very large scenes
-              if (
-                Math.abs(element.x) > 1e7 ||
-                Math.abs(element.x) > 1e7 ||
-                Math.abs(element.width) > 1e7 ||
-                Math.abs(element.height) > 1e7
-              ) {
-                console.error(
-                  `Alt+dragging element in scene with invalid dimensions`,
-                  element.x,
-                  element.y,
-                  element.width,
-                  element.height,
-                  isInSelection,
-                );
-
-                return;
-              }
-
-              if (isInSelection) {
-                const duplicatedElement = duplicateElement(
-                  this.state.editingGroupId,
-                  groupIdMap,
-                  element,
-                );
-
-                // NOTE (mtolmacs): This is a temporary fix for very large scenes
-                if (
-                  Math.abs(duplicatedElement.x) > 1e7 ||
-                  Math.abs(duplicatedElement.x) > 1e7 ||
-                  Math.abs(duplicatedElement.width) > 1e7 ||
-                  Math.abs(duplicatedElement.height) > 1e7
-                ) {
-                  console.error(
-                    `Alt+dragging duplicated element with invalid dimensions`,
-                    duplicatedElement.x,
-                    duplicatedElement.y,
-                    duplicatedElement.width,
-                    duplicatedElement.height,
-                  );
-
-                  return;
-                }
-
-                const origElement = pointerDownState.originalElements.get(
-                  element.id,
-                )!;
-
-                // NOTE (mtolmacs): This is a temporary fix for very large scenes
-                if (
-                  Math.abs(origElement.x) > 1e7 ||
-                  Math.abs(origElement.x) > 1e7 ||
-                  Math.abs(origElement.width) > 1e7 ||
-                  Math.abs(origElement.height) > 1e7
-                ) {
-                  console.error(
-                    `Alt+dragging duplicated element with invalid dimensions`,
-                    origElement.x,
-                    origElement.y,
-                    origElement.width,
-                    origElement.height,
-                  );
-
-                  return;
-                }
-
-                mutateElement(duplicatedElement, {
-                  x: origElement.x,
-                  y: origElement.y,
-                });
-
-                // put duplicated element to pointerDownState.originalElements
-                // so that we can snap to the duplicated element without releasing
-                pointerDownState.originalElements.set(
-                  duplicatedElement.id,
-                  duplicatedElement,
-                );
-
-                nextElements.push(duplicatedElement);
-                elementsToAppend.push(element);
-                oldIdToDuplicatedId.set(element.id, duplicatedElement.id);
-              } else {
-                nextElements.push(element);
-              }
+            const hitElement = pointerDownState.hit.element;
+            const selectedElements = this.scene.getSelectedElements({
+              selectedElementIds: this.state.selectedElementIds,
+              includeBoundTextElement: true,
+              includeElementsInFrames: true,
+            });
+            if (
+              hitElement &&
+              !selectedElements.find((el) => el.id === hitElement.id)
+            ) {
+              selectedElements.push(hitElement);
             }
 
-            let nextSceneElements: ExcalidrawElement[] = [
-              ...nextElements,
-              ...elementsToAppend,
-            ];
+            const { newElements: clonedElements, elementsWithClones } =
+              duplicateElements({
+                type: "in-place",
+                elements,
+                appState: this.state,
+                randomizeSeed: true,
+                idsOfElementsToDuplicate: new Map(
+                  selectedElements.map((el) => [el.id, el]),
+                ),
+                overrides: (el) => {
+                  const origEl = pointerDownState.originalElements.get(el.id);
+
+                  if (origEl) {
+                    return {
+                      x: origEl.x,
+                      y: origEl.y,
+                    };
+                  }
+
+                  return {};
+                },
+                reverseOrder: true,
+              });
+            clonedElements.forEach((element) => {
+              pointerDownState.originalElements.set(element.id, element);
+            });
 
             const mappedNewSceneElements = this.props.onDuplicate?.(
-              nextSceneElements,
+              elementsWithClones,
               elements,
             );
 
-            nextSceneElements = mappedNewSceneElements || nextSceneElements;
-
-            syncMovedIndices(nextSceneElements, arrayToMap(elementsToAppend));
-
-            bindTextToShapeAfterDuplication(
-              nextElements,
-              elementsToAppend,
-              oldIdToDuplicatedId,
-            );
-            fixBindingsAfterDuplication(
-              nextSceneElements,
-              elementsToAppend,
-              oldIdToDuplicatedId,
-              "duplicatesServeAsOld",
-            );
-            bindElementsToFramesAfterDuplication(
-              nextSceneElements,
-              elementsToAppend,
-              oldIdToDuplicatedId,
+            const nextSceneElements = syncMovedIndices(
+              mappedNewSceneElements || elementsWithClones,
+              arrayToMap(clonedElements),
             );
 
             this.scene.replaceAllElements(nextSceneElements);
@@ -11168,7 +11135,7 @@ declare global {
 }
 
 export const createTestHook = () => {
-  if (import.meta.env.MODE === ENV.TEST || import.meta.env.DEV) {
+  if (isTestEnv() || isDevEnv()) {
     window.h = window.h || ({} as Window["h"]);
 
     Object.defineProperties(window.h, {
diff --git a/packages/excalidraw/components/Avatar.tsx b/packages/excalidraw/components/Avatar.tsx
index 9ddc319c6..648fb5fce 100644
--- a/packages/excalidraw/components/Avatar.tsx
+++ b/packages/excalidraw/components/Avatar.tsx
@@ -1,8 +1,9 @@
-import "./Avatar.scss";
-
-import React, { useState } from "react";
-import { getNameInitial } from "../clients";
 import clsx from "clsx";
+import React, { useState } from "react";
+
+import { getNameInitial } from "../clients";
+
+import "./Avatar.scss";
 
 type AvatarProps = {
   onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
diff --git a/packages/excalidraw/components/Button.tsx b/packages/excalidraw/components/Button.tsx
index 779cee582..acdd4afde 100644
--- a/packages/excalidraw/components/Button.tsx
+++ b/packages/excalidraw/components/Button.tsx
@@ -1,6 +1,8 @@
 import clsx from "clsx";
 import React from "react";
-import { composeEventHandlers } from "../utils";
+
+import { composeEventHandlers } from "@excalidraw/common";
+
 import "./Button.scss";
 
 interface ButtonProps
diff --git a/packages/excalidraw/components/ButtonIcon.tsx b/packages/excalidraw/components/ButtonIcon.tsx
index cbbd73df9..27b4dc3d8 100644
--- a/packages/excalidraw/components/ButtonIcon.tsx
+++ b/packages/excalidraw/components/ButtonIcon.tsx
@@ -1,9 +1,10 @@
-import { forwardRef } from "react";
-import type { JSX } from "react";
 import clsx from "clsx";
+import { forwardRef } from "react";
 
 import "./ButtonIcon.scss";
 
+import type { JSX } from "react";
+
 interface ButtonIconProps {
   icon: JSX.Element;
   title: string;
diff --git a/packages/excalidraw/components/ButtonIconCycle.tsx b/packages/excalidraw/components/ButtonIconCycle.tsx
index b73a8ec5a..53c5e12bd 100644
--- a/packages/excalidraw/components/ButtonIconCycle.tsx
+++ b/packages/excalidraw/components/ButtonIconCycle.tsx
@@ -1,6 +1,7 @@
-import type { JSX } from "react";
 import clsx from "clsx";
 
+import type { JSX } from "react";
+
 export const ButtonIconCycle = <T extends any>({
   options,
   value,
diff --git a/packages/excalidraw/components/ButtonIconSelect.tsx b/packages/excalidraw/components/ButtonIconSelect.tsx
index 26191b50b..45665e4ca 100644
--- a/packages/excalidraw/components/ButtonIconSelect.tsx
+++ b/packages/excalidraw/components/ButtonIconSelect.tsx
@@ -1,7 +1,9 @@
-import type { JSX } from "react";
 import clsx from "clsx";
+
 import { ButtonIcon } from "./ButtonIcon";
 
+import type { JSX } from "react";
+
 // TODO: It might be "clever" to add option.icon to the existing component <ButtonSelect />
 export const ButtonIconSelect = <T extends Object>(
   props: {
diff --git a/packages/excalidraw/components/CheckboxItem.tsx b/packages/excalidraw/components/CheckboxItem.tsx
index 21c5cfafd..9c757eab5 100644
--- a/packages/excalidraw/components/CheckboxItem.tsx
+++ b/packages/excalidraw/components/CheckboxItem.tsx
@@ -1,5 +1,6 @@
-import React from "react";
 import clsx from "clsx";
+import React from "react";
+
 import { checkIcon } from "./icons";
 
 import "./CheckboxItem.scss";
diff --git a/packages/excalidraw/components/ColorPicker/ColorInput.tsx b/packages/excalidraw/components/ColorPicker/ColorInput.tsx
index 837c88709..a3f6722eb 100644
--- a/packages/excalidraw/components/ColorPicker/ColorInput.tsx
+++ b/packages/excalidraw/components/ColorPicker/ColorInput.tsx
@@ -1,15 +1,18 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import { getColor } from "./ColorPicker";
-import type { ColorPickerType } from "./colorPickerUtils";
-import { activeColorPickerSectionAtom } from "./colorPickerUtils";
-import { eyeDropperIcon } from "../icons";
-import { useAtom } from "../../editor-jotai";
-import { KEYS } from "../../keys";
-import { activeEyeDropperAtom } from "../EyeDropper";
 import clsx from "clsx";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { KEYS, getShortcutKey } from "@excalidraw/common";
+
+import { useAtom } from "../../editor-jotai";
 import { t } from "../../i18n";
 import { useDevice } from "../App";
-import { getShortcutKey } from "../../utils";
+import { activeEyeDropperAtom } from "../EyeDropper";
+import { eyeDropperIcon } from "../icons";
+
+import { getColor } from "./ColorPicker";
+import { activeColorPickerSectionAtom } from "./colorPickerUtils";
+
+import type { ColorPickerType } from "./colorPickerUtils";
 
 interface ColorInputProps {
   color: string;
diff --git a/packages/excalidraw/components/ColorPicker/ColorPicker.tsx b/packages/excalidraw/components/ColorPicker/ColorPicker.tsx
index 74d552701..34f6c6d12 100644
--- a/packages/excalidraw/components/ColorPicker/ColorPicker.tsx
+++ b/packages/excalidraw/components/ColorPicker/ColorPicker.tsx
@@ -1,26 +1,32 @@
-import { isTransparent } from "../../utils";
-import type { ExcalidrawElement } from "../../element/types";
-import type { AppState } from "../../types";
-import { TopPicks } from "./TopPicks";
-import { ButtonSeparator } from "../ButtonSeparator";
-import { Picker } from "./Picker";
 import * as Popover from "@radix-ui/react-popover";
-import type { ColorPickerType } from "./colorPickerUtils";
-import { activeColorPickerSectionAtom } from "./colorPickerUtils";
-import { useExcalidrawContainer } from "../App";
-import type { ColorTuple, ColorPaletteCustom } from "../../colors";
-import { COLOR_PALETTE } from "../../colors";
-import PickerHeading from "./PickerHeading";
-import { t } from "../../i18n";
 import clsx from "clsx";
 import { useRef } from "react";
+
+import { COLOR_PALETTE, isTransparent } from "@excalidraw/common";
+
+import type { ColorTuple, ColorPaletteCustom } from "@excalidraw/common";
+
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+
 import { useAtom } from "../../editor-jotai";
-import { ColorInput } from "./ColorInput";
+import { t } from "../../i18n";
+import { useExcalidrawContainer } from "../App";
+import { ButtonSeparator } from "../ButtonSeparator";
 import { activeEyeDropperAtom } from "../EyeDropper";
 import { PropertiesPopover } from "../PropertiesPopover";
 
+import { ColorInput } from "./ColorInput";
+import { Picker } from "./Picker";
+import PickerHeading from "./PickerHeading";
+import { TopPicks } from "./TopPicks";
+import { activeColorPickerSectionAtom } from "./colorPickerUtils";
+
 import "./ColorPicker.scss";
 
+import type { ColorPickerType } from "./colorPickerUtils";
+
+import type { AppState } from "../../types";
+
 const isValidColor = (color: string) => {
   const style = new Option().style;
   style.color = color;
diff --git a/packages/excalidraw/components/ColorPicker/CustomColorList.tsx b/packages/excalidraw/components/ColorPicker/CustomColorList.tsx
index 5fe1e3e53..2c735102a 100644
--- a/packages/excalidraw/components/ColorPicker/CustomColorList.tsx
+++ b/packages/excalidraw/components/ColorPicker/CustomColorList.tsx
@@ -1,8 +1,10 @@
 import clsx from "clsx";
-import { useAtom } from "../../editor-jotai";
 import { useEffect, useRef } from "react";
-import { activeColorPickerSectionAtom } from "./colorPickerUtils";
+
+import { useAtom } from "../../editor-jotai";
+
 import HotkeyLabel from "./HotkeyLabel";
+import { activeColorPickerSectionAtom } from "./colorPickerUtils";
 
 interface CustomColorListProps {
   colors: string[];
diff --git a/packages/excalidraw/components/ColorPicker/HotkeyLabel.tsx b/packages/excalidraw/components/ColorPicker/HotkeyLabel.tsx
index 145060d19..6e4d5e39c 100644
--- a/packages/excalidraw/components/ColorPicker/HotkeyLabel.tsx
+++ b/packages/excalidraw/components/ColorPicker/HotkeyLabel.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+
 import { getContrastYIQ } from "./colorPickerUtils";
 
 interface HotkeyLabelProps {
diff --git a/packages/excalidraw/components/ColorPicker/Picker.tsx b/packages/excalidraw/components/ColorPicker/Picker.tsx
index 88d687670..3c54c6769 100644
--- a/packages/excalidraw/components/ColorPicker/Picker.tsx
+++ b/packages/excalidraw/components/ColorPicker/Picker.tsx
@@ -1,28 +1,33 @@
 import React, { useEffect, useState } from "react";
+
+import { EVENT } from "@excalidraw/common";
+
+import {
+  DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX,
+  DEFAULT_ELEMENT_STROKE_COLOR_INDEX,
+  KEYS,
+} from "@excalidraw/common";
+
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+
+import type { ColorPaletteCustom } from "@excalidraw/common";
+
+import { useAtom } from "../../editor-jotai";
 import { t } from "../../i18n";
 
-import type { ExcalidrawElement } from "../../element/types";
-import { ShadeList } from "./ShadeList";
-
-import PickerColorList from "./PickerColorList";
-import { useAtom } from "../../editor-jotai";
 import { CustomColorList } from "./CustomColorList";
-import { colorPickerKeyNavHandler } from "./keyboardNavHandlers";
+import PickerColorList from "./PickerColorList";
 import PickerHeading from "./PickerHeading";
-import type { ColorPickerType } from "./colorPickerUtils";
+import { ShadeList } from "./ShadeList";
 import {
   activeColorPickerSectionAtom,
   getColorNameAndShadeFromColor,
   getMostUsedCustomColors,
   isCustomColor,
 } from "./colorPickerUtils";
-import type { ColorPaletteCustom } from "../../colors";
-import {
-  DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX,
-  DEFAULT_ELEMENT_STROKE_COLOR_INDEX,
-} from "../../colors";
-import { KEYS } from "../../keys";
-import { EVENT } from "../../constants";
+import { colorPickerKeyNavHandler } from "./keyboardNavHandlers";
+
+import type { ColorPickerType } from "./colorPickerUtils";
 
 interface PickerProps {
   color: string;
diff --git a/packages/excalidraw/components/ColorPicker/PickerColorList.tsx b/packages/excalidraw/components/ColorPicker/PickerColorList.tsx
index f43559d95..50594a59e 100644
--- a/packages/excalidraw/components/ColorPicker/PickerColorList.tsx
+++ b/packages/excalidraw/components/ColorPicker/PickerColorList.tsx
@@ -1,15 +1,19 @@
 import clsx from "clsx";
-import { useAtom } from "../../editor-jotai";
 import { useEffect, useRef } from "react";
+
+import type { ColorPaletteCustom } from "@excalidraw/common";
+
+import { useAtom } from "../../editor-jotai";
+import { t } from "../../i18n";
+
+import HotkeyLabel from "./HotkeyLabel";
 import {
   activeColorPickerSectionAtom,
   colorPickerHotkeyBindings,
   getColorNameAndShadeFromColor,
 } from "./colorPickerUtils";
-import HotkeyLabel from "./HotkeyLabel";
-import type { ColorPaletteCustom } from "../../colors";
+
 import type { TranslationKeys } from "../../i18n";
-import { t } from "../../i18n";
 
 interface PickerColorListProps {
   palette: ColorPaletteCustom;
diff --git a/packages/excalidraw/components/ColorPicker/ShadeList.tsx b/packages/excalidraw/components/ColorPicker/ShadeList.tsx
index 8d3d4cc2a..aa2c25ea0 100644
--- a/packages/excalidraw/components/ColorPicker/ShadeList.tsx
+++ b/packages/excalidraw/components/ColorPicker/ShadeList.tsx
@@ -1,13 +1,16 @@
 import clsx from "clsx";
-import { useAtom } from "../../editor-jotai";
 import { useEffect, useRef } from "react";
+
+import type { ColorPaletteCustom } from "@excalidraw/common";
+
+import { useAtom } from "../../editor-jotai";
+import { t } from "../../i18n";
+
+import HotkeyLabel from "./HotkeyLabel";
 import {
   activeColorPickerSectionAtom,
   getColorNameAndShadeFromColor,
 } from "./colorPickerUtils";
-import HotkeyLabel from "./HotkeyLabel";
-import { t } from "../../i18n";
-import type { ColorPaletteCustom } from "../../colors";
 
 interface ShadeListProps {
   hex: string;
diff --git a/packages/excalidraw/components/ColorPicker/TopPicks.tsx b/packages/excalidraw/components/ColorPicker/TopPicks.tsx
index 5c69d1e43..6d18a9587 100644
--- a/packages/excalidraw/components/ColorPicker/TopPicks.tsx
+++ b/packages/excalidraw/components/ColorPicker/TopPicks.tsx
@@ -1,10 +1,12 @@
 import clsx from "clsx";
-import type { ColorPickerType } from "./colorPickerUtils";
+
 import {
   DEFAULT_CANVAS_BACKGROUND_PICKS,
   DEFAULT_ELEMENT_BACKGROUND_PICKS,
   DEFAULT_ELEMENT_STROKE_PICKS,
-} from "../../colors";
+} from "@excalidraw/common";
+
+import type { ColorPickerType } from "./colorPickerUtils";
 
 interface TopPicksProps {
   onChange: (color: string) => void;
diff --git a/packages/excalidraw/components/ColorPicker/colorPickerUtils.ts b/packages/excalidraw/components/ColorPicker/colorPickerUtils.ts
index 2733b7aba..4925a3145 100644
--- a/packages/excalidraw/components/ColorPicker/colorPickerUtils.ts
+++ b/packages/excalidraw/components/ColorPicker/colorPickerUtils.ts
@@ -1,6 +1,9 @@
-import type { ExcalidrawElement } from "../../element/types";
-import type { ColorPickerColor, ColorPaletteCustom } from "../../colors";
-import { MAX_CUSTOM_COLORS_USED_IN_CANVAS } from "../../colors";
+import { MAX_CUSTOM_COLORS_USED_IN_CANVAS } from "@excalidraw/common";
+
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+
+import type { ColorPickerColor, ColorPaletteCustom } from "@excalidraw/common";
+
 import { atom } from "../../editor-jotai";
 
 export const getColorNameAndShadeFromColor = ({
diff --git a/packages/excalidraw/components/ColorPicker/keyboardNavHandlers.ts b/packages/excalidraw/components/ColorPicker/keyboardNavHandlers.ts
index 7767692ed..3e27229bc 100644
--- a/packages/excalidraw/components/ColorPicker/keyboardNavHandlers.ts
+++ b/packages/excalidraw/components/ColorPicker/keyboardNavHandlers.ts
@@ -1,17 +1,20 @@
-import { KEYS } from "../../keys";
+import { COLORS_PER_ROW, COLOR_PALETTE, KEYS } from "@excalidraw/common";
+
 import type {
   ColorPickerColor,
   ColorPalette,
   ColorPaletteCustom,
-} from "../../colors";
-import { COLORS_PER_ROW, COLOR_PALETTE } from "../../colors";
-import type { ValueOf } from "../../utility-types";
-import type { ActiveColorPickerSectionAtomType } from "./colorPickerUtils";
+} from "@excalidraw/common";
+
+import type { ValueOf } from "@excalidraw/common/utility-types";
+
 import {
   colorPickerHotkeyBindings,
   getColorNameAndShadeFromColor,
 } from "./colorPickerUtils";
 
+import type { ActiveColorPickerSectionAtomType } from "./colorPickerUtils";
+
 const arrowHandler = (
   eventKey: string,
   currentIndex: number | null,
diff --git a/packages/excalidraw/components/CommandPalette/CommandPalette.tsx b/packages/excalidraw/components/CommandPalette/CommandPalette.tsx
index cc3c782c4..4391759d9 100644
--- a/packages/excalidraw/components/CommandPalette/CommandPalette.tsx
+++ b/packages/excalidraw/components/CommandPalette/CommandPalette.tsx
@@ -1,21 +1,43 @@
+import clsx from "clsx";
+import fuzzy from "fuzzy";
 import { useEffect, useRef, useState } from "react";
+
+import {
+  DEFAULT_SIDEBAR,
+  EVENT,
+  KEYS,
+  capitalizeString,
+  getShortcutKey,
+  isWritableElement,
+} from "@excalidraw/common";
+
+import type { MarkRequired } from "@excalidraw/common/utility-types";
+
+import {
+  actionClearCanvas,
+  actionLink,
+  actionToggleSearchMenu,
+} from "../../actions";
+import {
+  actionCopyElementLink,
+  actionLinkToElement,
+} from "../../actions/actionElementLink";
+import { getShortcutFromShortcutName } from "../../actions/shortcuts";
+import { trackEvent } from "../../analytics";
+import { useUIAppState } from "../../context/ui-appState";
+import { deburr } from "../../deburr";
+import { atom, useAtom, editorJotaiStore } from "../../editor-jotai";
+import { t } from "../../i18n";
 import {
   useApp,
   useAppProps,
   useExcalidrawActionManager,
   useExcalidrawSetAppState,
 } from "../App";
-import { KEYS } from "../../keys";
 import { Dialog } from "../Dialog";
+import { InlineIcon } from "../InlineIcon";
 import { TextField } from "../TextField";
-import clsx from "clsx";
 import { getSelectedElements } from "../../scene";
-import type { Action } from "../../actions/types";
-import type { TranslationKeys } from "../../i18n";
-import { t } from "../../i18n";
-import type { ShortcutName } from "../../actions/shortcuts";
-import { getShortcutFromShortcutName } from "../../actions/shortcuts";
-import { DEFAULT_SIDEBAR, EVENT } from "../../constants";
 import {
   LockedIcon,
   UnlockedIcon,
@@ -28,37 +50,22 @@ import {
   brainIconThin,
   LibraryIcon,
 } from "../icons";
-import fuzzy from "fuzzy";
-import { useUIAppState } from "../../context/ui-appState";
-import type { AppProps, AppState, UIAppState } from "../../types";
-import {
-  capitalizeString,
-  getShortcutKey,
-  isWritableElement,
-} from "../../utils";
-import { atom, useAtom, editorJotaiStore } from "../../editor-jotai";
-import { deburr } from "../../deburr";
-import type { MarkRequired } from "../../utility-types";
-import { InlineIcon } from "../InlineIcon";
-import { SHAPES } from "../../shapes";
+
+import { SHAPES } from "../shapes";
 import { canChangeBackgroundColor, canChangeStrokeColor } from "../Actions";
 import { useStableCallback } from "../../hooks/useStableCallback";
-import {
-  actionClearCanvas,
-  actionLink,
-  actionToggleSearchMenu,
-} from "../../actions";
 import { activeConfirmDialogAtom } from "../ActiveConfirmDialog";
-import type { CommandPaletteItem } from "./types";
-import * as defaultItems from "./defaultCommandPaletteItems";
-import { trackEvent } from "../../analytics";
 import { useStable } from "../../hooks/useStable";
 
+import * as defaultItems from "./defaultCommandPaletteItems";
+
 import "./CommandPalette.scss";
-import {
-  actionCopyElementLink,
-  actionLinkToElement,
-} from "../../actions/actionElementLink";
+
+import type { CommandPaletteItem } from "./types";
+import type { AppProps, AppState, UIAppState } from "../../types";
+import type { ShortcutName } from "../../actions/shortcuts";
+import type { TranslationKeys } from "../../i18n";
+import type { Action } from "../../actions/types";
 
 const lastUsedPaletteItem = atom<CommandPaletteItem | null>(null);
 
diff --git a/packages/excalidraw/components/CommandPalette/defaultCommandPaletteItems.ts b/packages/excalidraw/components/CommandPalette/defaultCommandPaletteItems.ts
index dea14ff26..485e1767c 100644
--- a/packages/excalidraw/components/CommandPalette/defaultCommandPaletteItems.ts
+++ b/packages/excalidraw/components/CommandPalette/defaultCommandPaletteItems.ts
@@ -1,4 +1,5 @@
 import { actionToggleTheme } from "../../actions";
+
 import type { CommandPaletteItem } from "./types";
 
 export const toggleTheme: CommandPaletteItem = {
diff --git a/packages/excalidraw/components/ConfirmDialog.tsx b/packages/excalidraw/components/ConfirmDialog.tsx
index 81073ecdb..cb402dd97 100644
--- a/packages/excalidraw/components/ConfirmDialog.tsx
+++ b/packages/excalidraw/components/ConfirmDialog.tsx
@@ -1,13 +1,16 @@
 import { flushSync } from "react-dom";
-import { t } from "../i18n";
-import type { DialogProps } from "./Dialog";
-import { Dialog } from "./Dialog";
 
-import "./ConfirmDialog.scss";
+import { useSetAtom } from "../editor-jotai";
+import { t } from "../i18n";
+
+import { Dialog } from "./Dialog";
 import DialogActionButton from "./DialogActionButton";
 import { isLibraryMenuOpenAtom } from "./LibraryMenu";
 import { useExcalidrawContainer, useExcalidrawSetAppState } from "./App";
-import { useSetAtom } from "../editor-jotai";
+
+import "./ConfirmDialog.scss";
+
+import type { DialogProps } from "./Dialog";
 
 interface Props extends Omit<DialogProps, "onCloseRequest"> {
   onConfirm: () => void;
diff --git a/packages/excalidraw/components/ContextMenu.tsx b/packages/excalidraw/components/ContextMenu.tsx
index 517e5faed..3295d1d09 100644
--- a/packages/excalidraw/components/ContextMenu.tsx
+++ b/packages/excalidraw/components/ContextMenu.tsx
@@ -1,15 +1,20 @@
 import clsx from "clsx";
-import { Popover } from "./Popover";
-import type { TranslationKeys } from "../i18n";
+import React from "react";
+
+import { getShortcutFromShortcutName } from "../actions/shortcuts";
 import { t } from "../i18n";
 
-import "./ContextMenu.scss";
-import type { ShortcutName } from "../actions/shortcuts";
-import { getShortcutFromShortcutName } from "../actions/shortcuts";
-import type { Action } from "../actions/types";
-import type { ActionManager } from "../actions/manager";
 import { useExcalidrawAppState, useExcalidrawElements } from "./App";
-import React from "react";
+
+import { Popover } from "./Popover";
+
+import "./ContextMenu.scss";
+
+import type { ActionManager } from "../actions/manager";
+import type { ShortcutName } from "../actions/shortcuts";
+import type { Action } from "../actions/types";
+
+import type { TranslationKeys } from "../i18n";
 
 export type ContextMenuItem = typeof CONTEXT_MENU_SEPARATOR | Action;
 
diff --git a/packages/excalidraw/components/DarkModeToggle.tsx b/packages/excalidraw/components/DarkModeToggle.tsx
index 6292ba5ed..474181ba4 100644
--- a/packages/excalidraw/components/DarkModeToggle.tsx
+++ b/packages/excalidraw/components/DarkModeToggle.tsx
@@ -1,9 +1,12 @@
-import "./ToolIcon.scss";
+import { THEME } from "@excalidraw/common";
+
+import type { Theme } from "@excalidraw/element/types";
 
 import { t } from "../i18n";
+
 import { ToolButton } from "./ToolButton";
-import { THEME } from "../constants";
-import type { Theme } from "../element/types";
+
+import "./ToolIcon.scss";
 
 // We chose to use only explicit toggle and not a third option for system value,
 // but this could be added in the future.
diff --git a/packages/excalidraw/components/DefaultSidebar.test.tsx b/packages/excalidraw/components/DefaultSidebar.test.tsx
index ac1e2961c..1b3f1cac9 100644
--- a/packages/excalidraw/components/DefaultSidebar.test.tsx
+++ b/packages/excalidraw/components/DefaultSidebar.test.tsx
@@ -1,11 +1,14 @@
 import React from "react";
-import { DEFAULT_SIDEBAR } from "../constants";
+
+import { DEFAULT_SIDEBAR } from "@excalidraw/common";
+
 import { DefaultSidebar } from "../index";
 import {
   fireEvent,
   waitFor,
   withExcalidrawDimensions,
 } from "../tests/test-utils";
+
 import {
   assertExcalidrawWithSidebar,
   assertSidebarDockButton,
diff --git a/packages/excalidraw/components/DefaultSidebar.tsx b/packages/excalidraw/components/DefaultSidebar.tsx
index 70b0c2d6c..4f1aa91e8 100644
--- a/packages/excalidraw/components/DefaultSidebar.tsx
+++ b/packages/excalidraw/components/DefaultSidebar.tsx
@@ -1,22 +1,28 @@
 import clsx from "clsx";
+
 import {
   CANVAS_SEARCH_TAB,
   DEFAULT_SIDEBAR,
   LIBRARY_SIDEBAR_TAB,
-} from "../constants";
+  composeEventHandlers,
+} from "@excalidraw/common";
+
+import type { MarkOptional, Merge } from "@excalidraw/common/utility-types";
+
 import { useTunnels } from "../context/tunnels";
 import { useUIAppState } from "../context/ui-appState";
-import type { MarkOptional, Merge } from "../utility-types";
-import { composeEventHandlers } from "../utils";
-import { useExcalidrawSetAppState } from "./App";
-import { withInternalFallback } from "./hoc/withInternalFallback";
-import { LibraryMenu } from "./LibraryMenu";
-import type { SidebarProps, SidebarTriggerProps } from "./Sidebar/common";
-import { Sidebar } from "./Sidebar/Sidebar";
+
 import "../components/dropdownMenu/DropdownMenu.scss";
+
+import { useExcalidrawSetAppState } from "./App";
+import { LibraryMenu } from "./LibraryMenu";
 import { SearchMenu } from "./SearchMenu";
+import { Sidebar } from "./Sidebar/Sidebar";
+import { withInternalFallback } from "./hoc/withInternalFallback";
 import { LibraryIcon, searchIcon } from "./icons";
 
+import type { SidebarProps, SidebarTriggerProps } from "./Sidebar/common";
+
 const DefaultSidebarTrigger = withInternalFallback(
   "DefaultSidebarTrigger",
   (
diff --git a/packages/excalidraw/components/DiagramToCodePlugin/DiagramToCodePlugin.tsx b/packages/excalidraw/components/DiagramToCodePlugin/DiagramToCodePlugin.tsx
index 950599963..e225ca193 100644
--- a/packages/excalidraw/components/DiagramToCodePlugin/DiagramToCodePlugin.tsx
+++ b/packages/excalidraw/components/DiagramToCodePlugin/DiagramToCodePlugin.tsx
@@ -1,5 +1,7 @@
 import { useLayoutEffect } from "react";
+
 import { useApp } from "../App";
+
 import type { GenerateDiagramToCode } from "../../types";
 
 export const DiagramToCodePlugin = (props: {
diff --git a/packages/excalidraw/components/Dialog.tsx b/packages/excalidraw/components/Dialog.tsx
index 0a105cf8d..00ae2be0c 100644
--- a/packages/excalidraw/components/Dialog.tsx
+++ b/packages/excalidraw/components/Dialog.tsx
@@ -1,21 +1,24 @@
 import clsx from "clsx";
 import React, { useEffect, useState } from "react";
+
+import { KEYS, queryFocusableElements } from "@excalidraw/common";
+
+import { useSetAtom } from "../editor-jotai";
 import { useCallbackRefState } from "../hooks/useCallbackRefState";
+import { t } from "../i18n";
+
 import {
   useExcalidrawContainer,
   useDevice,
   useExcalidrawSetAppState,
 } from "./App";
-import { KEYS } from "../keys";
-import "./Dialog.scss";
 import { Island } from "./Island";
-import { Modal } from "./Modal";
-import { queryFocusableElements } from "../utils";
 import { isLibraryMenuOpenAtom } from "./LibraryMenu";
-import { useSetAtom } from "../editor-jotai";
-import { t } from "../i18n";
+import { Modal } from "./Modal";
 import { CloseIcon } from "./icons";
 
+import "./Dialog.scss";
+
 export type DialogSize = number | "small" | "regular" | "wide" | undefined;
 
 export interface DialogProps {
diff --git a/packages/excalidraw/components/DialogActionButton.tsx b/packages/excalidraw/components/DialogActionButton.tsx
index 0c4f9d589..1637fc31a 100644
--- a/packages/excalidraw/components/DialogActionButton.tsx
+++ b/packages/excalidraw/components/DialogActionButton.tsx
@@ -1,8 +1,11 @@
 import clsx from "clsx";
-import type { ReactNode } from "react";
-import "./DialogActionButton.scss";
+
 import Spinner from "./Spinner";
 
+import "./DialogActionButton.scss";
+
+import type { ReactNode } from "react";
+
 interface DialogActionButtonProps {
   label: string;
   children?: ReactNode;
diff --git a/packages/excalidraw/element/ElementCanvasButtons.scss b/packages/excalidraw/components/ElementCanvasButtons.scss
similarity index 100%
rename from packages/excalidraw/element/ElementCanvasButtons.scss
rename to packages/excalidraw/components/ElementCanvasButtons.scss
diff --git a/packages/excalidraw/element/ElementCanvasButtons.tsx b/packages/excalidraw/components/ElementCanvasButtons.tsx
similarity index 85%
rename from packages/excalidraw/element/ElementCanvasButtons.tsx
rename to packages/excalidraw/components/ElementCanvasButtons.tsx
index 1bcad97b4..424c4f3b4 100644
--- a/packages/excalidraw/element/ElementCanvasButtons.tsx
+++ b/packages/excalidraw/components/ElementCanvasButtons.tsx
@@ -1,11 +1,17 @@
-import type { AppState } from "../types";
-import { sceneCoordsToViewportCoords } from "../utils";
-import type { ElementsMap, NonDeletedExcalidrawElement } from "./types";
-import { getElementAbsoluteCoords } from ".";
+import { sceneCoordsToViewportCoords } from "@excalidraw/common";
+import { getElementAbsoluteCoords } from "@excalidraw/element/bounds";
+
+import type {
+  ElementsMap,
+  NonDeletedExcalidrawElement,
+} from "@excalidraw/element/types";
+
 import { useExcalidrawAppState } from "../components/App";
 
 import "./ElementCanvasButtons.scss";
 
+import type { AppState } from "../types";
+
 const CONTAINER_PADDING = 5;
 
 const getContainerCoords = (
diff --git a/packages/excalidraw/components/ElementLinkDialog.tsx b/packages/excalidraw/components/ElementLinkDialog.tsx
index 2ec3eaa0b..5a0b9107b 100644
--- a/packages/excalidraw/components/ElementLinkDialog.tsx
+++ b/packages/excalidraw/components/ElementLinkDialog.tsx
@@ -1,21 +1,26 @@
-import { TextField } from "./TextField";
-import type { AppProps, AppState, UIAppState } from "../types";
-import DialogActionButton from "./DialogActionButton";
-import { getSelectedElements } from "../scene";
+import { useCallback, useEffect, useState } from "react";
+
+import { normalizeLink, KEYS } from "@excalidraw/common";
+
 import {
   defaultGetElementLinkFromSelection,
   getLinkIdAndTypeFromSelection,
-} from "../element/elementLink";
-import { mutateElement } from "../element/mutateElement";
-import { useCallback, useEffect, useState } from "react";
+} from "@excalidraw/element/elementLink";
+import { mutateElement } from "@excalidraw/element/mutateElement";
+
+import type { ElementsMap, ExcalidrawElement } from "@excalidraw/element/types";
+
 import { t } from "../i18n";
-import type { ElementsMap, ExcalidrawElement } from "../element/types";
+import { getSelectedElements } from "../scene";
+
+import DialogActionButton from "./DialogActionButton";
+import { TextField } from "./TextField";
 import { ToolButton } from "./ToolButton";
 import { TrashIcon } from "./icons";
-import { KEYS } from "../keys";
 
 import "./ElementLinkDialog.scss";
-import { normalizeLink } from "../data/url";
+
+import type { AppProps, AppState, UIAppState } from "../types";
 
 const ElementLinkDialog = ({
   sourceElementId,
diff --git a/packages/excalidraw/components/ErrorDialog.tsx b/packages/excalidraw/components/ErrorDialog.tsx
index 74d265f73..132b292b9 100644
--- a/packages/excalidraw/components/ErrorDialog.tsx
+++ b/packages/excalidraw/components/ErrorDialog.tsx
@@ -1,8 +1,9 @@
 import React, { useState } from "react";
+
 import { t } from "../i18n";
 
-import { Dialog } from "./Dialog";
 import { useExcalidrawContainer } from "./App";
+import { Dialog } from "./Dialog";
 
 export const ErrorDialog = ({
   children,
diff --git a/packages/excalidraw/components/EyeDropper.tsx b/packages/excalidraw/components/EyeDropper.tsx
index 429c68a4a..f7f98123d 100644
--- a/packages/excalidraw/components/EyeDropper.tsx
+++ b/packages/excalidraw/components/EyeDropper.tsx
@@ -1,19 +1,22 @@
 import { useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
-import { rgbToHex } from "../colors";
-import { EVENT } from "../constants";
+
+import { EVENT, KEYS, rgbToHex } from "@excalidraw/common";
+
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+
 import { useUIAppState } from "../context/ui-appState";
+import { atom } from "../editor-jotai";
 import { useCreatePortalContainer } from "../hooks/useCreatePortalContainer";
 import { useOutsideClick } from "../hooks/useOutsideClick";
-import { KEYS } from "../keys";
-import { getSelectedElements } from "../scene";
-import { useApp, useExcalidrawContainer, useExcalidrawElements } from "./App";
 import { useStable } from "../hooks/useStable";
+import { getSelectedElements } from "../scene";
+
+import { useApp, useExcalidrawContainer, useExcalidrawElements } from "./App";
 
 import "./EyeDropper.scss";
+
 import type { ColorPickerType } from "./ColorPicker/colorPickerUtils";
-import type { ExcalidrawElement } from "../element/types";
-import { atom } from "../editor-jotai";
 
 export type EyeDropperProperties = {
   keepOpenOnAlt: boolean;
diff --git a/packages/excalidraw/components/FilledButton.tsx b/packages/excalidraw/components/FilledButton.tsx
index 136090848..53b30a046 100644
--- a/packages/excalidraw/components/FilledButton.tsx
+++ b/packages/excalidraw/components/FilledButton.tsx
@@ -1,11 +1,14 @@
-import React, { forwardRef, useState } from "react";
 import clsx from "clsx";
+import React, { forwardRef, useState } from "react";
+
+import { isPromiseLike } from "@excalidraw/common";
+
+import { AbortError } from "../errors";
+
+import Spinner from "./Spinner";
+import { tablerCheckIcon } from "./icons";
 
 import "./FilledButton.scss";
-import { AbortError } from "../errors";
-import Spinner from "./Spinner";
-import { isPromiseLike } from "../utils";
-import { tablerCheckIcon } from "./icons";
 
 export type ButtonVariant = "filled" | "outlined" | "icon";
 export type ButtonColor =
diff --git a/packages/excalidraw/components/FixedSideContainer.tsx b/packages/excalidraw/components/FixedSideContainer.tsx
index 76aee9989..3130d78e9 100644
--- a/packages/excalidraw/components/FixedSideContainer.tsx
+++ b/packages/excalidraw/components/FixedSideContainer.tsx
@@ -1,8 +1,8 @@
-import "./FixedSideContainer.scss";
-
 import React from "react";
 import clsx from "clsx";
 
+import "./FixedSideContainer.scss";
+
 type FixedSideContainerProps = {
   children: React.ReactNode;
   side: "top" | "left" | "right";
diff --git a/packages/excalidraw/components/FollowMode/FollowMode.tsx b/packages/excalidraw/components/FollowMode/FollowMode.tsx
index 89581bfa4..e862cb4ea 100644
--- a/packages/excalidraw/components/FollowMode/FollowMode.tsx
+++ b/packages/excalidraw/components/FollowMode/FollowMode.tsx
@@ -1,7 +1,9 @@
-import type { UserToFollow } from "../../types";
 import { CloseIcon } from "../icons";
+
 import "./FollowMode.scss";
 
+import type { UserToFollow } from "../../types";
+
 interface FollowModeProps {
   width: number;
   height: number;
diff --git a/packages/excalidraw/components/FontPicker/FontPicker.tsx b/packages/excalidraw/components/FontPicker/FontPicker.tsx
index 4585c5841..546e1fa34 100644
--- a/packages/excalidraw/components/FontPicker/FontPicker.tsx
+++ b/packages/excalidraw/components/FontPicker/FontPicker.tsx
@@ -1,18 +1,21 @@
-import React, { useCallback, useMemo } from "react";
 import * as Popover from "@radix-ui/react-popover";
+import React, { useCallback, useMemo } from "react";
 
-import { FontPickerList } from "./FontPickerList";
-import { FontPickerTrigger } from "./FontPickerTrigger";
+import { FONT_FAMILY } from "@excalidraw/common";
+
+import type { FontFamilyValues } from "@excalidraw/element/types";
+
+import { t } from "../../i18n";
 import { ButtonIconSelect } from "../ButtonIconSelect";
+import { ButtonSeparator } from "../ButtonSeparator";
 import {
   FontFamilyCodeIcon,
   FontFamilyNormalIcon,
   FreedrawIcon,
 } from "../icons";
-import { ButtonSeparator } from "../ButtonSeparator";
-import type { FontFamilyValues } from "../../element/types";
-import { FONT_FAMILY } from "../../constants";
-import { t } from "../../i18n";
+
+import { FontPickerList } from "./FontPickerList";
+import { FontPickerTrigger } from "./FontPickerTrigger";
 
 import "./FontPicker.scss";
 
diff --git a/packages/excalidraw/components/FontPicker/FontPickerList.tsx b/packages/excalidraw/components/FontPicker/FontPickerList.tsx
index 3a680b8fe..2ec9e7d6d 100644
--- a/packages/excalidraw/components/FontPicker/FontPickerList.tsx
+++ b/packages/excalidraw/components/FontPicker/FontPickerList.tsx
@@ -1,4 +1,3 @@
-import type { JSX } from "react";
 import React, {
   useMemo,
   useState,
@@ -7,6 +6,20 @@ import React, {
   useCallback,
   type KeyboardEventHandler,
 } from "react";
+
+import { type FontFamilyValues } from "@excalidraw/element/types";
+
+import {
+  arrayToList,
+  debounce,
+  FONT_FAMILY,
+  getFontFamilyString,
+} from "@excalidraw/common";
+
+import type { ValueOf } from "@excalidraw/common/utility-types";
+
+import { Fonts } from "../../fonts";
+import { t } from "../../i18n";
 import { useApp, useAppProps, useExcalidrawContainer } from "../App";
 import { PropertiesPopover } from "../PropertiesPopover";
 import { QuickSearch } from "../QuickSearch";
@@ -16,13 +29,16 @@ import DropdownMenuItem, {
   DropDownMenuItemBadgeType,
   DropDownMenuItemBadge,
 } from "../dropdownMenu/DropdownMenuItem";
-import { type FontFamilyValues } from "../../element/types";
-import { arrayToList, debounce, getFontFamilyString } from "../../utils";
-import { t } from "../../i18n";
+import {
+  FontFamilyCodeIcon,
+  FontFamilyHeadingIcon,
+  FontFamilyNormalIcon,
+  FreedrawIcon,
+} from "../icons";
+
 import { fontPickerKeyHandler } from "./keyboardNavHandlers";
-import { Fonts } from "../../fonts";
-import type { ValueOf } from "../../utility-types";
-import { FontFamilyNormalIcon } from "../icons";
+
+import type { JSX } from "react";
 
 export interface FontDescriptor {
   value: number;
@@ -45,6 +61,24 @@ interface FontPickerListProps {
   onClose: () => void;
 }
 
+const getFontFamilyIcon = (fontFamily: FontFamilyValues): JSX.Element => {
+  switch (fontFamily) {
+    case FONT_FAMILY.Excalifont:
+    case FONT_FAMILY.Virgil:
+      return FreedrawIcon;
+    case FONT_FAMILY.Nunito:
+    case FONT_FAMILY.Helvetica:
+      return FontFamilyNormalIcon;
+    case FONT_FAMILY["Lilita One"]:
+      return FontFamilyHeadingIcon;
+    case FONT_FAMILY["Comic Shanns"]:
+    case FONT_FAMILY.Cascadia:
+      return FontFamilyCodeIcon;
+    default:
+      return FontFamilyNormalIcon;
+  }
+};
+
 export const FontPickerList = React.memo(
   ({
     selectedFontFamily,
@@ -70,7 +104,7 @@ export const FontPickerList = React.memo(
           .map(([familyId, { metadata, fontFaces }]) => {
             const fontDescriptor = {
               value: familyId,
-              icon: metadata.icon ?? FontFamilyNormalIcon,
+              icon: getFontFamilyIcon(familyId),
               text: fontFaces[0]?.fontFace?.family ?? "Unknown",
             };
 
diff --git a/packages/excalidraw/components/FontPicker/FontPickerTrigger.tsx b/packages/excalidraw/components/FontPicker/FontPickerTrigger.tsx
index 8652dabcd..6f3cc638a 100644
--- a/packages/excalidraw/components/FontPicker/FontPickerTrigger.tsx
+++ b/packages/excalidraw/components/FontPicker/FontPickerTrigger.tsx
@@ -1,9 +1,12 @@
 import * as Popover from "@radix-ui/react-popover";
 import { useMemo } from "react";
+
+import type { FontFamilyValues } from "@excalidraw/element/types";
+
+import { t } from "../../i18n";
 import { ButtonIcon } from "../ButtonIcon";
 import { TextIcon } from "../icons";
-import type { FontFamilyValues } from "../../element/types";
-import { t } from "../../i18n";
+
 import { isDefaultFont } from "./FontPicker";
 
 interface FontPickerTriggerProps {
diff --git a/packages/excalidraw/components/FontPicker/keyboardNavHandlers.ts b/packages/excalidraw/components/FontPicker/keyboardNavHandlers.ts
index 19c4adccc..16ffa7c45 100644
--- a/packages/excalidraw/components/FontPicker/keyboardNavHandlers.ts
+++ b/packages/excalidraw/components/FontPicker/keyboardNavHandlers.ts
@@ -1,5 +1,7 @@
-import type { Node } from "../../utils";
-import { KEYS } from "../../keys";
+import { KEYS } from "@excalidraw/common";
+
+import type { Node } from "@excalidraw/common";
+
 import { type FontDescriptor } from "./FontPickerList";
 
 interface FontPickerKeyNavHandlerProps {
diff --git a/packages/excalidraw/components/HandButton.tsx b/packages/excalidraw/components/HandButton.tsx
index ce63791e1..5ebfdf9d3 100644
--- a/packages/excalidraw/components/HandButton.tsx
+++ b/packages/excalidraw/components/HandButton.tsx
@@ -1,9 +1,11 @@
-import "./ToolIcon.scss";
-
 import clsx from "clsx";
+
+import { KEYS } from "@excalidraw/common";
+
 import { ToolButton } from "./ToolButton";
 import { handIcon } from "./icons";
-import { KEYS } from "../keys";
+
+import "./ToolIcon.scss";
 
 type LockIconProps = {
   title?: string;
diff --git a/packages/excalidraw/components/HelpButton.tsx b/packages/excalidraw/components/HelpButton.tsx
index ce387244c..39c867cde 100644
--- a/packages/excalidraw/components/HelpButton.tsx
+++ b/packages/excalidraw/components/HelpButton.tsx
@@ -1,4 +1,5 @@
 import { t } from "../i18n";
+
 import { HelpIcon } from "./icons";
 
 type HelpButtonProps = {
diff --git a/packages/excalidraw/components/HelpDialog.tsx b/packages/excalidraw/components/HelpDialog.tsx
index 926096c69..60fc40372 100644
--- a/packages/excalidraw/components/HelpDialog.tsx
+++ b/packages/excalidraw/components/HelpDialog.tsx
@@ -1,14 +1,19 @@
-import type { JSX } from "react";
 import React from "react";
-import { t } from "../i18n";
-import { KEYS } from "../keys";
-import { Dialog } from "./Dialog";
-import { getShortcutKey } from "../utils";
-import "./HelpDialog.scss";
-import { ExternalLinkIcon, GithubIcon, youtubeIcon } from "./icons";
-import { probablySupportsClipboardBlob } from "../clipboard";
-import { isDarwin, isFirefox, isWindows } from "../constants";
+
+import { isDarwin, isFirefox, isWindows } from "@excalidraw/common";
+
+import { KEYS, getShortcutKey } from "@excalidraw/common";
+
 import { getShortcutFromShortcutName } from "../actions/shortcuts";
+import { probablySupportsClipboardBlob } from "../clipboard";
+import { t } from "../i18n";
+
+import { Dialog } from "./Dialog";
+import { ExternalLinkIcon, GithubIcon, youtubeIcon } from "./icons";
+
+import "./HelpDialog.scss";
+
+import type { JSX } from "react";
 
 const Header = () => (
   <div className="HelpDialog__header">
diff --git a/packages/excalidraw/components/HintViewer.tsx b/packages/excalidraw/components/HintViewer.tsx
index f09f65852..6eb1a2186 100644
--- a/packages/excalidraw/components/HintViewer.tsx
+++ b/packages/excalidraw/components/HintViewer.tsx
@@ -1,19 +1,24 @@
-import { t } from "../i18n";
-import type { AppClassProperties, Device, UIAppState } from "../types";
+import { CANVAS_SEARCH_TAB, DEFAULT_SIDEBAR } from "@excalidraw/common";
+
 import {
   isFlowchartNodeElement,
   isImageElement,
   isLinearElement,
   isTextBindableContainer,
   isTextElement,
-} from "../element/typeChecks";
-import { getShortcutKey } from "../utils";
+} from "@excalidraw/element/typeChecks";
+
+import { getShortcutKey } from "@excalidraw/common";
+
+import { isNodeInFlowchart } from "@excalidraw/element/flowchart";
+
+import { t } from "../i18n";
 import { isEraserActive } from "../appState";
+import { isGridModeEnabled } from "../snapping";
 
 import "./HintViewer.scss";
-import { isNodeInFlowchart } from "../element/flowchart";
-import { isGridModeEnabled } from "../snapping";
-import { CANVAS_SEARCH_TAB, DEFAULT_SIDEBAR } from "../constants";
+
+import type { AppClassProperties, Device, UIAppState } from "../types";
 
 interface HintViewerProps {
   appState: UIAppState;
diff --git a/packages/excalidraw/components/IconPicker.tsx b/packages/excalidraw/components/IconPicker.tsx
index ee83f905a..5630ae8d7 100644
--- a/packages/excalidraw/components/IconPicker.tsx
+++ b/packages/excalidraw/components/IconPicker.tsx
@@ -1,15 +1,19 @@
-import type { JSX } from "react";
-import React, { useEffect } from "react";
 import * as Popover from "@radix-ui/react-popover";
-import { isArrowKey, KEYS } from "../keys";
-import { getLanguage, t } from "../i18n";
 import clsx from "clsx";
-import Collapsible from "./Stats/Collapsible";
+import React, { useEffect } from "react";
+
+import { isArrowKey, KEYS } from "@excalidraw/common";
+
 import { atom, useAtom } from "../editor-jotai";
+import { getLanguage, t } from "../i18n";
+
+import Collapsible from "./Stats/Collapsible";
 import { useDevice } from "./App";
 
 import "./IconPicker.scss";
 
+import type { JSX } from "react";
+
 const moreOptionsAtom = atom(false);
 
 type Option<T> = {
diff --git a/packages/excalidraw/components/ImageExportDialog.tsx b/packages/excalidraw/components/ImageExportDialog.tsx
index d06f4a842..e8e0b70f4 100644
--- a/packages/excalidraw/components/ImageExportDialog.tsx
+++ b/packages/excalidraw/components/ImageExportDialog.tsx
@@ -1,7 +1,15 @@
+import { exportToCanvas } from "@excalidraw/utils/export";
 import React, { useEffect, useRef, useState } from "react";
 
-import type { ActionManager } from "../actions/manager";
-import type { AppClassProperties, BinaryFiles, UIAppState } from "../types";
+import {
+  DEFAULT_EXPORT_PADDING,
+  EXPORT_IMAGE_TYPES,
+  isFirefox,
+  EXPORT_SCALES,
+  cloneJSON,
+} from "@excalidraw/common";
+
+import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
 
 import {
   actionExportWithDarkMode,
@@ -11,31 +19,26 @@ import {
   actionChangeProjectName,
 } from "../actions/actionExport";
 import { probablySupportsClipboardBlob } from "../clipboard";
-import {
-  DEFAULT_EXPORT_PADDING,
-  EXPORT_IMAGE_TYPES,
-  isFirefox,
-  EXPORT_SCALES,
-} from "../constants";
-
+import { prepareElementsForExport } from "../data";
 import { canvasToBlob } from "../data/blob";
 import { nativeFileSystemSupported } from "../data/filesystem";
-import type { NonDeletedExcalidrawElement } from "../element/types";
+import { useCopyStatus } from "../hooks/useCopiedIndicator";
+
 import { t } from "../i18n";
 import { isSomeElementSelected } from "../scene";
-import { exportToCanvas } from "@excalidraw/utils/export";
 
 import { copyIcon, downloadIcon, helpIcon } from "./icons";
 import { Dialog } from "./Dialog";
 import { RadioGroup } from "./RadioGroup";
 import { Switch } from "./Switch";
 import { Tooltip } from "./Tooltip";
+import { FilledButton } from "./FilledButton";
 
 import "./ImageExportDialog.scss";
-import { FilledButton } from "./FilledButton";
-import { cloneJSON } from "../utils";
-import { prepareElementsForExport } from "../data";
-import { useCopyStatus } from "../hooks/useCopiedIndicator";
+
+import type { ActionManager } from "../actions/manager";
+
+import type { AppClassProperties, BinaryFiles, UIAppState } from "../types";
 
 const supportsContextFilters =
   "filter" in document.createElement("canvas").getContext("2d")!;
diff --git a/packages/excalidraw/components/InitializeApp.tsx b/packages/excalidraw/components/InitializeApp.tsx
index 41f90ceeb..1e5dda6dc 100644
--- a/packages/excalidraw/components/InitializeApp.tsx
+++ b/packages/excalidraw/components/InitializeApp.tsx
@@ -1,9 +1,12 @@
 import React, { useEffect, useState } from "react";
 
-import { LoadingMessage } from "./LoadingMessage";
-import type { Language } from "../i18n";
+import type { Theme } from "@excalidraw/element/types";
+
 import { defaultLang, languages, setLanguage } from "../i18n";
-import type { Theme } from "../element/types";
+
+import { LoadingMessage } from "./LoadingMessage";
+
+import type { Language } from "../i18n";
 
 interface Props {
   langCode: Language["code"];
diff --git a/packages/excalidraw/components/Island.tsx b/packages/excalidraw/components/Island.tsx
index 7baf307a0..8219e5fc7 100644
--- a/packages/excalidraw/components/Island.tsx
+++ b/packages/excalidraw/components/Island.tsx
@@ -1,8 +1,8 @@
-import "./Island.scss";
-
 import React from "react";
 import clsx from "clsx";
 
+import "./Island.scss";
+
 type IslandProps = {
   children: React.ReactNode;
   padding?: number;
diff --git a/packages/excalidraw/components/JSONExportDialog.tsx b/packages/excalidraw/components/JSONExportDialog.tsx
index 527ad5746..4dfedc692 100644
--- a/packages/excalidraw/components/JSONExportDialog.tsx
+++ b/packages/excalidraw/components/JSONExportDialog.tsx
@@ -1,19 +1,25 @@
 import React from "react";
-import type { NonDeletedExcalidrawElement } from "../element/types";
+
+import { getFrame } from "@excalidraw/common";
+
+import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
+
+import { actionSaveFileToDisk } from "../actions/actionExport";
+
+import { trackEvent } from "../analytics";
+import { nativeFileSystemSupported } from "../data/filesystem";
 import { t } from "../i18n";
 
-import type { ExportOpts, BinaryFiles, UIAppState } from "../types";
-import { Dialog } from "./Dialog";
-import { exportToFileIcon, LinkIcon } from "./icons";
-import { ToolButton } from "./ToolButton";
-import { actionSaveFileToDisk } from "../actions/actionExport";
 import { Card } from "./Card";
+import { Dialog } from "./Dialog";
+import { ToolButton } from "./ToolButton";
+import { exportToFileIcon, LinkIcon } from "./icons";
 
 import "./ExportDialog.scss";
-import { nativeFileSystemSupported } from "../data/filesystem";
-import { trackEvent } from "../analytics";
+
 import type { ActionManager } from "../actions/manager";
-import { getFrame } from "../utils";
+
+import type { ExportOpts, BinaryFiles, UIAppState } from "../types";
 
 export type ExportCB = (
   elements: readonly NonDeletedExcalidrawElement[],
diff --git a/packages/excalidraw/components/LaserPointerButton.tsx b/packages/excalidraw/components/LaserPointerButton.tsx
index 35470f6e7..237d0831c 100644
--- a/packages/excalidraw/components/LaserPointerButton.tsx
+++ b/packages/excalidraw/components/LaserPointerButton.tsx
@@ -1,9 +1,11 @@
+import clsx from "clsx";
+
 import "./ToolIcon.scss";
 
-import clsx from "clsx";
-import type { ToolButtonSize } from "./ToolButton";
 import { laserPointerToolIcon } from "./icons";
 
+import type { ToolButtonSize } from "./ToolButton";
+
 type LaserPointerIconProps = {
   title?: string;
   name?: string;
diff --git a/packages/excalidraw/components/LayerUI.tsx b/packages/excalidraw/components/LayerUI.tsx
index 11914d09a..b5491dedd 100644
--- a/packages/excalidraw/components/LayerUI.tsx
+++ b/packages/excalidraw/components/LayerUI.tsx
@@ -1,12 +1,70 @@
 import clsx from "clsx";
 import React from "react";
-import type { ActionManager } from "../actions/manager";
-import { CLASSES, DEFAULT_SIDEBAR, TOOL_TYPE } from "../constants";
-import { showSelectedShapeActions } from "../element";
-import type { NonDeletedExcalidrawElement } from "../element/types";
-import type { Language } from "../i18n";
+
+import {
+  CLASSES,
+  DEFAULT_SIDEBAR,
+  TOOL_TYPE,
+  capitalizeString,
+  isShallowEqual,
+} from "@excalidraw/common";
+
+import { mutateElement } from "@excalidraw/element/mutateElement";
+
+import { showSelectedShapeActions } from "@excalidraw/element/showSelectedShapeActions";
+
+import { ShapeCache } from "@excalidraw/element/ShapeCache";
+
+import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
+
+import Scene from "../scene/Scene";
+import { actionToggleStats } from "../actions";
+import { trackEvent } from "../analytics";
+import { isHandToolActive } from "../appState";
+import { TunnelsContext, useInitializeTunnels } from "../context/tunnels";
+import { UIAppStateContext } from "../context/ui-appState";
+import { useAtom, useAtomValue } from "../editor-jotai";
+
 import { t } from "../i18n";
 import { calculateScrollCenter } from "../scene";
+
+import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
+import { LoadingMessage } from "./LoadingMessage";
+import { LockButton } from "./LockButton";
+import { MobileMenu } from "./MobileMenu";
+import { PasteChartDialog } from "./PasteChartDialog";
+import { Section } from "./Section";
+import Stack from "./Stack";
+import { UserList } from "./UserList";
+import { PenModeButton } from "./PenModeButton";
+import Footer from "./footer/Footer";
+import { isSidebarDockedAtom } from "./Sidebar/Sidebar";
+import MainMenu from "./main-menu/MainMenu";
+import { ActiveConfirmDialog } from "./ActiveConfirmDialog";
+import { useDevice } from "./App";
+import { OverwriteConfirmDialog } from "./OverwriteConfirm/OverwriteConfirm";
+import { LibraryIcon } from "./icons";
+import { DefaultSidebar } from "./DefaultSidebar";
+import { TTDDialog } from "./TTDDialog/TTDDialog";
+import { Stats } from "./Stats";
+import ElementLinkDialog from "./ElementLinkDialog";
+import { ErrorDialog } from "./ErrorDialog";
+import { EyeDropper, activeEyeDropperAtom } from "./EyeDropper";
+import { FixedSideContainer } from "./FixedSideContainer";
+import { HandButton } from "./HandButton";
+import { HelpDialog } from "./HelpDialog";
+import { HintViewer } from "./HintViewer";
+import { ImageExportDialog } from "./ImageExportDialog";
+import { Island } from "./Island";
+import { JSONExportDialog } from "./JSONExportDialog";
+import { LaserPointerButton } from "./LaserPointerButton";
+
+import "./LayerUI.scss";
+import "./Toolbar.scss";
+
+import type { ActionManager } from "../actions/manager";
+
+import type { Language } from "../i18n";
 import type {
   AppProps,
   AppState,
@@ -15,49 +73,6 @@ import type {
   UIAppState,
   AppClassProperties,
 } from "../types";
-import { capitalizeString, isShallowEqual } from "../utils";
-import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
-import { ErrorDialog } from "./ErrorDialog";
-import { ImageExportDialog } from "./ImageExportDialog";
-import { FixedSideContainer } from "./FixedSideContainer";
-import { HintViewer } from "./HintViewer";
-import { Island } from "./Island";
-import { LoadingMessage } from "./LoadingMessage";
-import { LockButton } from "./LockButton";
-import { MobileMenu } from "./MobileMenu";
-import { PasteChartDialog } from "./PasteChartDialog";
-import { Section } from "./Section";
-import { HelpDialog } from "./HelpDialog";
-import Stack from "./Stack";
-import { UserList } from "./UserList";
-import { JSONExportDialog } from "./JSONExportDialog";
-import { PenModeButton } from "./PenModeButton";
-import { trackEvent } from "../analytics";
-import { useDevice } from "./App";
-import Footer from "./footer/Footer";
-import { isSidebarDockedAtom } from "./Sidebar/Sidebar";
-import { useAtom, useAtomValue } from "../editor-jotai";
-import MainMenu from "./main-menu/MainMenu";
-import { ActiveConfirmDialog } from "./ActiveConfirmDialog";
-import { OverwriteConfirmDialog } from "./OverwriteConfirm/OverwriteConfirm";
-import { HandButton } from "./HandButton";
-import { isHandToolActive } from "../appState";
-import { TunnelsContext, useInitializeTunnels } from "../context/tunnels";
-import { LibraryIcon } from "./icons";
-import { UIAppStateContext } from "../context/ui-appState";
-import { DefaultSidebar } from "./DefaultSidebar";
-import { EyeDropper, activeEyeDropperAtom } from "./EyeDropper";
-import { mutateElement } from "../element/mutateElement";
-import { ShapeCache } from "../scene/ShapeCache";
-import Scene from "../scene/Scene";
-import { LaserPointerButton } from "./LaserPointerButton";
-import { TTDDialog } from "./TTDDialog/TTDDialog";
-import { Stats } from "./Stats";
-import { actionToggleStats } from "../actions";
-import ElementLinkDialog from "./ElementLinkDialog";
-
-import "./LayerUI.scss";
-import "./Toolbar.scss";
 
 interface LayerUIProps {
   actionManager: ActionManager;
diff --git a/packages/excalidraw/components/LibraryMenu.tsx b/packages/excalidraw/components/LibraryMenu.tsx
index 0162d93a0..62bd235c2 100644
--- a/packages/excalidraw/components/LibraryMenu.tsx
+++ b/packages/excalidraw/components/LibraryMenu.tsx
@@ -6,13 +6,41 @@ import React, {
   memo,
   useRef,
 } from "react";
-import type Library from "../data/library";
+
+import {
+  LIBRARY_DISABLED_TYPES,
+  randomId,
+  isShallowEqual,
+} from "@excalidraw/common";
+
+import type {
+  ExcalidrawElement,
+  NonDeletedExcalidrawElement,
+} from "@excalidraw/element/types";
+
+import { trackEvent } from "../analytics";
+import { useUIAppState } from "../context/ui-appState";
 import {
   distributeLibraryItemsOnSquareGrid,
   libraryItemsAtom,
 } from "../data/library";
+import { atom, useAtom } from "../editor-jotai";
 import { t } from "../i18n";
-import { randomId } from "../random";
+
+import { getSelectedElements } from "../scene";
+
+import {
+  useApp,
+  useAppProps,
+  useExcalidrawElements,
+  useExcalidrawSetAppState,
+} from "./App";
+import { LibraryMenuControlButtons } from "./LibraryMenuControlButtons";
+import LibraryMenuItems from "./LibraryMenuItems";
+import Spinner from "./Spinner";
+
+import "./LibraryMenu.scss";
+
 import type {
   LibraryItems,
   LibraryItem,
@@ -20,27 +48,7 @@ import type {
   UIAppState,
   AppClassProperties,
 } from "../types";
-import LibraryMenuItems from "./LibraryMenuItems";
-import { trackEvent } from "../analytics";
-import { atom, useAtom } from "../editor-jotai";
-import Spinner from "./Spinner";
-import {
-  useApp,
-  useAppProps,
-  useExcalidrawElements,
-  useExcalidrawSetAppState,
-} from "./App";
-import { getSelectedElements } from "../scene";
-import { useUIAppState } from "../context/ui-appState";
-
-import "./LibraryMenu.scss";
-import { LibraryMenuControlButtons } from "./LibraryMenuControlButtons";
-import type {
-  ExcalidrawElement,
-  NonDeletedExcalidrawElement,
-} from "../element/types";
-import { LIBRARY_DISABLED_TYPES } from "../constants";
-import { isShallowEqual } from "../utils";
+import type Library from "../data/library";
 
 export const isLibraryMenuOpenAtom = atom(false);
 
diff --git a/packages/excalidraw/components/LibraryMenuBrowseButton.tsx b/packages/excalidraw/components/LibraryMenuBrowseButton.tsx
index 43fbedd77..86bd4e2ad 100644
--- a/packages/excalidraw/components/LibraryMenuBrowseButton.tsx
+++ b/packages/excalidraw/components/LibraryMenuBrowseButton.tsx
@@ -1,5 +1,7 @@
-import { VERSIONS } from "../constants";
+import { VERSIONS } from "@excalidraw/common";
+
 import { t } from "../i18n";
+
 import type { ExcalidrawProps, UIAppState } from "../types";
 
 const LibraryMenuBrowseButton = ({
diff --git a/packages/excalidraw/components/LibraryMenuControlButtons.tsx b/packages/excalidraw/components/LibraryMenuControlButtons.tsx
index b467ca39c..1ea722168 100644
--- a/packages/excalidraw/components/LibraryMenuControlButtons.tsx
+++ b/packages/excalidraw/components/LibraryMenuControlButtons.tsx
@@ -1,7 +1,9 @@
-import type { ExcalidrawProps, UIAppState } from "../types";
-import LibraryMenuBrowseButton from "./LibraryMenuBrowseButton";
 import clsx from "clsx";
 
+import LibraryMenuBrowseButton from "./LibraryMenuBrowseButton";
+
+import type { ExcalidrawProps, UIAppState } from "../types";
+
 export const LibraryMenuControlButtons = ({
   libraryReturnUrl,
   theme,
diff --git a/packages/excalidraw/components/LibraryMenuHeaderContent.tsx b/packages/excalidraw/components/LibraryMenuHeaderContent.tsx
index bec31aa36..5b003effa 100644
--- a/packages/excalidraw/components/LibraryMenuHeaderContent.tsx
+++ b/packages/excalidraw/components/LibraryMenuHeaderContent.tsx
@@ -1,12 +1,24 @@
+import clsx from "clsx";
 import { useCallback, useState } from "react";
-import { t } from "../i18n";
-import Trans from "./Trans";
-import { useAtom } from "../editor-jotai";
-import type { LibraryItem, LibraryItems, UIAppState } from "../types";
-import { useApp, useExcalidrawSetAppState } from "./App";
+
+import { muteFSAbortError } from "@excalidraw/common";
+
+import { useUIAppState } from "../context/ui-appState";
+import { fileOpen } from "../data/filesystem";
 import { saveLibraryAsJSON } from "../data/json";
-import type Library from "../data/library";
 import { libraryItemsAtom } from "../data/library";
+import { useAtom } from "../editor-jotai";
+import { useLibraryCache } from "../hooks/useLibraryItemSvg";
+import { t } from "../i18n";
+
+import { useApp, useExcalidrawSetAppState } from "./App";
+import ConfirmDialog from "./ConfirmDialog";
+import { Dialog } from "./Dialog";
+import { isLibraryMenuOpenAtom } from "./LibraryMenu";
+import PublishLibrary from "./PublishLibrary";
+import { ToolButton } from "./ToolButton";
+import Trans from "./Trans";
+import DropdownMenu from "./dropdownMenu/DropdownMenu";
 import {
   DotsIcon,
   ExportIcon,
@@ -14,17 +26,9 @@ import {
   publishIcon,
   TrashIcon,
 } from "./icons";
-import { ToolButton } from "./ToolButton";
-import { fileOpen } from "../data/filesystem";
-import { muteFSAbortError } from "../utils";
-import ConfirmDialog from "./ConfirmDialog";
-import PublishLibrary from "./PublishLibrary";
-import { Dialog } from "./Dialog";
-import DropdownMenu from "./dropdownMenu/DropdownMenu";
-import { isLibraryMenuOpenAtom } from "./LibraryMenu";
-import { useUIAppState } from "../context/ui-appState";
-import clsx from "clsx";
-import { useLibraryCache } from "../hooks/useLibraryItemSvg";
+
+import type Library from "../data/library";
+import type { LibraryItem, LibraryItems, UIAppState } from "../types";
 
 const getSelectedItems = (
   libraryItems: LibraryItems,
diff --git a/packages/excalidraw/components/LibraryMenuItems.tsx b/packages/excalidraw/components/LibraryMenuItems.tsx
index aa2c3e68e..f70315953 100644
--- a/packages/excalidraw/components/LibraryMenuItems.tsx
+++ b/packages/excalidraw/components/LibraryMenuItems.tsx
@@ -5,30 +5,35 @@ import React, {
   useRef,
   useState,
 } from "react";
+
+import { MIME_TYPES, arrayToMap } from "@excalidraw/common";
+
+import { duplicateElements } from "@excalidraw/element/duplicate";
+
 import { serializeLibraryAsJSON } from "../data/json";
+import { useLibraryCache } from "../hooks/useLibraryItemSvg";
+import { useScrollPosition } from "../hooks/useScrollPosition";
 import { t } from "../i18n";
-import type {
-  ExcalidrawProps,
-  LibraryItem,
-  LibraryItems,
-  UIAppState,
-} from "../types";
-import { arrayToMap } from "../utils";
-import Stack from "./Stack";
-import { MIME_TYPES } from "../constants";
-import Spinner from "./Spinner";
-import { duplicateElements } from "../element/newElement";
+
 import { LibraryMenuControlButtons } from "./LibraryMenuControlButtons";
 import { LibraryDropdownMenu } from "./LibraryMenuHeaderContent";
 import {
   LibraryMenuSection,
   LibraryMenuSectionGrid,
 } from "./LibraryMenuSection";
-import { useScrollPosition } from "../hooks/useScrollPosition";
-import { useLibraryCache } from "../hooks/useLibraryItemSvg";
+
+import Spinner from "./Spinner";
+import Stack from "./Stack";
 
 import "./LibraryMenuItems.scss";
 
+import type {
+  ExcalidrawProps,
+  LibraryItem,
+  LibraryItems,
+  UIAppState,
+} from "../types";
+
 // using an odd number of items per batch so the rendering creates an irregular
 // pattern which looks more organic
 const ITEMS_RENDERED_PER_BATCH = 17;
@@ -157,7 +162,11 @@ export default function LibraryMenuItems({
           ...item,
           // duplicate each library item before inserting on canvas to confine
           // ids and bindings to each library item. See #6465
-          elements: duplicateElements(item.elements, { randomizeSeed: true }),
+          elements: duplicateElements({
+            type: "everything",
+            elements: item.elements,
+            randomizeSeed: true,
+          }).newElements,
         };
       });
     },
diff --git a/packages/excalidraw/components/LibraryMenuSection.tsx b/packages/excalidraw/components/LibraryMenuSection.tsx
index b07d6b1cc..d98b413fb 100644
--- a/packages/excalidraw/components/LibraryMenuSection.tsx
+++ b/packages/excalidraw/components/LibraryMenuSection.tsx
@@ -1,11 +1,15 @@
-import type { ReactNode } from "react";
 import React, { memo, useEffect, useState } from "react";
-import { EmptyLibraryUnit, LibraryUnit } from "./LibraryUnit";
-import type { LibraryItem } from "../types";
-import type { ExcalidrawElement, NonDeleted } from "../element/types";
-import type { SvgCache } from "../hooks/useLibraryItemSvg";
+
+import type { ExcalidrawElement, NonDeleted } from "@excalidraw/element/types";
+
 import { useTransition } from "../hooks/useTransition";
 
+import { EmptyLibraryUnit, LibraryUnit } from "./LibraryUnit";
+
+import type { SvgCache } from "../hooks/useLibraryItemSvg";
+import type { LibraryItem } from "../types";
+import type { ReactNode } from "react";
+
 type LibraryOrPendingItem = (
   | LibraryItem
   | /* pending library item */ {
diff --git a/packages/excalidraw/components/LibraryUnit.tsx b/packages/excalidraw/components/LibraryUnit.tsx
index 71e1a00f5..9cd891715 100644
--- a/packages/excalidraw/components/LibraryUnit.tsx
+++ b/packages/excalidraw/components/LibraryUnit.tsx
@@ -1,12 +1,16 @@
 import clsx from "clsx";
 import { memo, useEffect, useRef, useState } from "react";
+
+import { useLibraryItemSvg } from "../hooks/useLibraryItemSvg";
+
 import { useDevice } from "./App";
-import type { LibraryItem } from "../types";
-import "./LibraryUnit.scss";
 import { CheckboxItem } from "./CheckboxItem";
 import { PlusIcon } from "./icons";
+
+import "./LibraryUnit.scss";
+
+import type { LibraryItem } from "../types";
 import type { SvgCache } from "../hooks/useLibraryItemSvg";
-import { useLibraryItemSvg } from "../hooks/useLibraryItemSvg";
 
 export const LibraryUnit = memo(
   ({
diff --git a/packages/excalidraw/components/LoadingMessage.tsx b/packages/excalidraw/components/LoadingMessage.tsx
index b00725257..c971b37ee 100644
--- a/packages/excalidraw/components/LoadingMessage.tsx
+++ b/packages/excalidraw/components/LoadingMessage.tsx
@@ -1,9 +1,13 @@
-import { t } from "../i18n";
-import { useState, useEffect } from "react";
-import Spinner from "./Spinner";
 import clsx from "clsx";
-import { THEME } from "../constants";
-import type { Theme } from "../element/types";
+import { useState, useEffect } from "react";
+
+import { THEME } from "@excalidraw/common";
+
+import type { Theme } from "@excalidraw/element/types";
+
+import { t } from "../i18n";
+
+import Spinner from "./Spinner";
 
 export const LoadingMessage: React.FC<{ delay?: number; theme?: Theme }> = ({
   delay,
diff --git a/packages/excalidraw/components/LockButton.tsx b/packages/excalidraw/components/LockButton.tsx
index f7913d12d..8363ffa0c 100644
--- a/packages/excalidraw/components/LockButton.tsx
+++ b/packages/excalidraw/components/LockButton.tsx
@@ -1,9 +1,11 @@
+import clsx from "clsx";
+
 import "./ToolIcon.scss";
 
-import clsx from "clsx";
-import type { ToolButtonSize } from "./ToolButton";
 import { LockedIcon, UnlockedIcon } from "./icons";
 
+import type { ToolButtonSize } from "./ToolButton";
+
 type LockIconProps = {
   title?: string;
   name?: string;
diff --git a/packages/excalidraw/components/MagicButton.tsx b/packages/excalidraw/components/MagicButton.tsx
index eedc63b3d..b2bbd03e2 100644
--- a/packages/excalidraw/components/MagicButton.tsx
+++ b/packages/excalidraw/components/MagicButton.tsx
@@ -1,9 +1,10 @@
-import type { JSX } from "react";
 import clsx from "clsx";
-import type { ToolButtonSize } from "./ToolButton";
 
 import "./ToolIcon.scss";
 
+import type { ToolButtonSize } from "./ToolButton";
+import type { JSX } from "react";
+
 const DEFAULT_SIZE: ToolButtonSize = "small";
 
 export const ElementCanvasButton = (props: {
diff --git a/packages/excalidraw/components/MobileMenu.tsx b/packages/excalidraw/components/MobileMenu.tsx
index bef99a91a..6e75b5992 100644
--- a/packages/excalidraw/components/MobileMenu.tsx
+++ b/packages/excalidraw/components/MobileMenu.tsx
@@ -1,5 +1,26 @@
-import type { JSX } from "react";
 import React from "react";
+
+import { showSelectedShapeActions } from "@excalidraw/element/showSelectedShapeActions";
+
+import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
+
+import { isHandToolActive } from "../appState";
+import { useTunnels } from "../context/tunnels";
+import { t } from "../i18n";
+import { calculateScrollCenter } from "../scene";
+import { SCROLLBAR_WIDTH, SCROLLBAR_MARGIN } from "../scene/scrollbars";
+
+import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
+import { FixedSideContainer } from "./FixedSideContainer";
+import { HandButton } from "./HandButton";
+import { HintViewer } from "./HintViewer";
+import { Island } from "./Island";
+import { LockButton } from "./LockButton";
+import { PenModeButton } from "./PenModeButton";
+import { Section } from "./Section";
+import Stack from "./Stack";
+
+import type { ActionManager } from "../actions/manager";
 import type {
   AppClassProperties,
   AppProps,
@@ -8,23 +29,7 @@ import type {
   ExcalidrawProps,
   UIAppState,
 } from "../types";
-import type { ActionManager } from "../actions/manager";
-import { t } from "../i18n";
-import Stack from "./Stack";
-import { showSelectedShapeActions } from "../element";
-import type { NonDeletedExcalidrawElement } from "../element/types";
-import { FixedSideContainer } from "./FixedSideContainer";
-import { Island } from "./Island";
-import { HintViewer } from "./HintViewer";
-import { calculateScrollCenter } from "../scene";
-import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
-import { Section } from "./Section";
-import { SCROLLBAR_WIDTH, SCROLLBAR_MARGIN } from "../scene/scrollbars";
-import { LockButton } from "./LockButton";
-import { PenModeButton } from "./PenModeButton";
-import { HandButton } from "./HandButton";
-import { isHandToolActive } from "../appState";
-import { useTunnels } from "../context/tunnels";
+import type { JSX } from "react";
 
 type MobileMenuProps = {
   appState: UIAppState;
diff --git a/packages/excalidraw/components/Modal.tsx b/packages/excalidraw/components/Modal.tsx
index e8fff195b..32f42986f 100644
--- a/packages/excalidraw/components/Modal.tsx
+++ b/packages/excalidraw/components/Modal.tsx
@@ -1,11 +1,14 @@
+import clsx from "clsx";
+import { useRef } from "react";
+import { createPortal } from "react-dom";
+
+import { KEYS } from "@excalidraw/common";
+
+import { useCreatePortalContainer } from "../hooks/useCreatePortalContainer";
+
 import "./Modal.scss";
 
-import { createPortal } from "react-dom";
-import clsx from "clsx";
-import { KEYS } from "../keys";
 import type { AppState } from "../types";
-import { useCreatePortalContainer } from "../hooks/useCreatePortalContainer";
-import { useRef } from "react";
 
 export const Modal: React.FC<{
   className?: string;
diff --git a/packages/excalidraw/components/OverwriteConfirm/OverwriteConfirm.tsx b/packages/excalidraw/components/OverwriteConfirm/OverwriteConfirm.tsx
index 4bf8d6717..f2de877e0 100644
--- a/packages/excalidraw/components/OverwriteConfirm/OverwriteConfirm.tsx
+++ b/packages/excalidraw/components/OverwriteConfirm/OverwriteConfirm.tsx
@@ -3,12 +3,13 @@ import React from "react";
 import { useTunnels } from "../../context/tunnels";
 import { useAtom } from "../../editor-jotai";
 import { Dialog } from "../Dialog";
+import { FilledButton } from "../FilledButton";
 import { withInternalFallback } from "../hoc/withInternalFallback";
+import { alertTriangleIcon } from "../icons";
+
+import { Actions, Action } from "./OverwriteConfirmActions";
 import { overwriteConfirmStateAtom } from "./OverwriteConfirmState";
 
-import { FilledButton } from "../FilledButton";
-import { alertTriangleIcon } from "../icons";
-import { Actions, Action } from "./OverwriteConfirmActions";
 import "./OverwriteConfirm.scss";
 
 export type OverwriteConfirmDialogProps = {
diff --git a/packages/excalidraw/components/OverwriteConfirm/OverwriteConfirmActions.tsx b/packages/excalidraw/components/OverwriteConfirm/OverwriteConfirmActions.tsx
index 5da0a08ef..e5fb56d85 100644
--- a/packages/excalidraw/components/OverwriteConfirm/OverwriteConfirmActions.tsx
+++ b/packages/excalidraw/components/OverwriteConfirm/OverwriteConfirmActions.tsx
@@ -1,9 +1,10 @@
 import React from "react";
-import { FilledButton } from "../FilledButton";
-import { useExcalidrawActionManager, useExcalidrawSetAppState } from "../App";
+
 import { actionSaveFileToDisk } from "../../actions";
-import { useI18n } from "../../i18n";
 import { actionChangeExportEmbedScene } from "../../actions/actionExport";
+import { useI18n } from "../../i18n";
+import { useExcalidrawActionManager, useExcalidrawSetAppState } from "../App";
+import { FilledButton } from "../FilledButton";
 
 export type ActionProps = {
   title: string;
diff --git a/packages/excalidraw/components/OverwriteConfirm/OverwriteConfirmState.ts b/packages/excalidraw/components/OverwriteConfirm/OverwriteConfirmState.ts
index 04616aa8d..cefb2153a 100644
--- a/packages/excalidraw/components/OverwriteConfirm/OverwriteConfirmState.ts
+++ b/packages/excalidraw/components/OverwriteConfirm/OverwriteConfirmState.ts
@@ -1,4 +1,5 @@
 import { atom, editorJotaiStore } from "../../editor-jotai";
+
 import type React from "react";
 
 export type OverwriteConfirmState =
diff --git a/packages/excalidraw/components/PasteChartDialog.tsx b/packages/excalidraw/components/PasteChartDialog.tsx
index 08a5634a9..2566017ac 100644
--- a/packages/excalidraw/components/PasteChartDialog.tsx
+++ b/packages/excalidraw/components/PasteChartDialog.tsx
@@ -1,17 +1,21 @@
 import oc from "open-color";
 import React, { useLayoutEffect, useRef, useState } from "react";
+
+import type { ChartType } from "@excalidraw/element/types";
+
 import { trackEvent } from "../analytics";
-import type { ChartElements, Spreadsheet } from "../charts";
 import { renderSpreadsheet } from "../charts";
-import type { ChartType } from "../element/types";
 import { t } from "../i18n";
 import { exportToSvg } from "../scene/export";
-import type { UIAppState } from "../types";
+
 import { useApp } from "./App";
 import { Dialog } from "./Dialog";
 
 import "./PasteChartDialog.scss";
 
+import type { ChartElements, Spreadsheet } from "../charts";
+import type { UIAppState } from "../types";
+
 type OnInsertChart = (chartType: ChartType, elements: ChartElements) => void;
 
 const ChartPreviewBtn = (props: {
diff --git a/packages/excalidraw/components/PenModeButton.tsx b/packages/excalidraw/components/PenModeButton.tsx
index ca5ceb2b6..e5df8ac9b 100644
--- a/packages/excalidraw/components/PenModeButton.tsx
+++ b/packages/excalidraw/components/PenModeButton.tsx
@@ -1,9 +1,11 @@
+import clsx from "clsx";
+
 import "./ToolIcon.scss";
 
-import clsx from "clsx";
-import type { ToolButtonSize } from "./ToolButton";
 import { PenModeIcon } from "./icons";
 
+import type { ToolButtonSize } from "./ToolButton";
+
 type PenModeIconProps = {
   title?: string;
   name?: string;
diff --git a/packages/excalidraw/components/Popover.tsx b/packages/excalidraw/components/Popover.tsx
index 987e9fb91..4864b37d1 100644
--- a/packages/excalidraw/components/Popover.tsx
+++ b/packages/excalidraw/components/Popover.tsx
@@ -1,8 +1,9 @@
 import React, { useLayoutEffect, useRef, useEffect } from "react";
-import "./Popover.scss";
 import { unstable_batchedUpdates } from "react-dom";
-import { queryFocusableElements } from "../utils";
-import { KEYS } from "../keys";
+
+import { KEYS, queryFocusableElements } from "@excalidraw/common";
+
+import "./Popover.scss";
 
 type Props = {
   top?: number;
diff --git a/packages/excalidraw/components/ProjectName.tsx b/packages/excalidraw/components/ProjectName.tsx
index 592961793..ad50c7fd5 100644
--- a/packages/excalidraw/components/ProjectName.tsx
+++ b/packages/excalidraw/components/ProjectName.tsx
@@ -1,11 +1,11 @@
-import "./TextInput.scss";
-
 import React, { useState } from "react";
-import { focusNearestParent } from "../utils";
 
-import "./ProjectName.scss";
+import { focusNearestParent, KEYS } from "@excalidraw/common";
+
 import { useExcalidrawContainer } from "./App";
-import { KEYS } from "../keys";
+
+import "./TextInput.scss";
+import "./ProjectName.scss";
 
 type Props = {
   value: string;
diff --git a/packages/excalidraw/components/PropertiesPopover.tsx b/packages/excalidraw/components/PropertiesPopover.tsx
index 455af1184..d8372ea27 100644
--- a/packages/excalidraw/components/PropertiesPopover.tsx
+++ b/packages/excalidraw/components/PropertiesPopover.tsx
@@ -1,10 +1,11 @@
-import React, { type ReactNode } from "react";
-import clsx from "clsx";
 import * as Popover from "@radix-ui/react-popover";
+import clsx from "clsx";
+import React, { type ReactNode } from "react";
+
+import { isInteractive } from "@excalidraw/common";
 
 import { useDevice } from "./App";
 import { Island } from "./Island";
-import { isInteractive } from "../utils";
 
 interface PropertiesPopoverProps {
   className?: string;
diff --git a/packages/excalidraw/components/PublishLibrary.tsx b/packages/excalidraw/components/PublishLibrary.tsx
index fe68f880d..c1db91296 100644
--- a/packages/excalidraw/components/PublishLibrary.tsx
+++ b/packages/excalidraw/components/PublishLibrary.tsx
@@ -1,30 +1,32 @@
-import type { ReactNode } from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
-import OpenColor from "open-color";
-
-import { Dialog } from "./Dialog";
-import { t } from "../i18n";
-import Trans from "./Trans";
-
-import type { LibraryItems, LibraryItem, UIAppState } from "../types";
 import { exportToCanvas, exportToSvg } from "@excalidraw/utils/export";
+import OpenColor from "open-color";
+import { useCallback, useEffect, useRef, useState } from "react";
+
 import {
   EDITOR_LS_KEYS,
   EXPORT_DATA_TYPES,
   EXPORT_SOURCE,
   MIME_TYPES,
   VERSIONS,
-} from "../constants";
-import type { ExportedLibraryData } from "../data/types";
-import { canvasToBlob, resizeImageFile } from "../data/blob";
-import { chunk } from "../utils";
-import DialogActionButton from "./DialogActionButton";
-import { CloseIcon } from "./icons";
-import { ToolButton } from "./ToolButton";
+  chunk,
+} from "@excalidraw/common";
+
 import { EditorLocalStorage } from "../data/EditorLocalStorage";
+import { canvasToBlob, resizeImageFile } from "../data/blob";
+import { t } from "../i18n";
+
+import { Dialog } from "./Dialog";
+import DialogActionButton from "./DialogActionButton";
+import { ToolButton } from "./ToolButton";
+import Trans from "./Trans";
+import { CloseIcon } from "./icons";
 
 import "./PublishLibrary.scss";
 
+import type { ReactNode } from "react";
+import type { ExportedLibraryData } from "../data/types";
+import type { LibraryItems, LibraryItem, UIAppState } from "../types";
+
 interface PublishLibraryDataParams {
   authorName: string;
   githubHandle: string;
diff --git a/packages/excalidraw/components/QuickSearch.tsx b/packages/excalidraw/components/QuickSearch.tsx
index c7ec78b50..83b65183f 100644
--- a/packages/excalidraw/components/QuickSearch.tsx
+++ b/packages/excalidraw/components/QuickSearch.tsx
@@ -1,5 +1,6 @@
 import clsx from "clsx";
 import React from "react";
+
 import { searchIcon } from "./icons";
 
 import "./QuickSearch.scss";
diff --git a/packages/excalidraw/components/RadioGroup.tsx b/packages/excalidraw/components/RadioGroup.tsx
index 64d4d587d..c08355aa2 100644
--- a/packages/excalidraw/components/RadioGroup.tsx
+++ b/packages/excalidraw/components/RadioGroup.tsx
@@ -1,4 +1,5 @@
 import clsx from "clsx";
+
 import "./RadioGroup.scss";
 
 export type RadioGroupChoice<T> = {
diff --git a/packages/excalidraw/components/Range.tsx b/packages/excalidraw/components/Range.tsx
index cd1869cc0..3ab9ede15 100644
--- a/packages/excalidraw/components/Range.tsx
+++ b/packages/excalidraw/components/Range.tsx
@@ -1,6 +1,8 @@
 import React, { useEffect } from "react";
+
 import { getFormValue } from "../actions/actionProperties";
 import { t } from "../i18n";
+
 import "./Range.scss";
 
 export type RangeProps = {
diff --git a/packages/excalidraw/components/SVGLayer.tsx b/packages/excalidraw/components/SVGLayer.tsx
index 667b89ab7..815d463a3 100644
--- a/packages/excalidraw/components/SVGLayer.tsx
+++ b/packages/excalidraw/components/SVGLayer.tsx
@@ -1,8 +1,9 @@
 import { useEffect, useRef } from "react";
-import type { Trail } from "../animated-trail";
 
 import "./SVGLayer.scss";
 
+import type { Trail } from "../animated-trail";
+
 type SVGLayerProps = {
   trails: Trail[];
 };
diff --git a/packages/excalidraw/components/SearchMenu.tsx b/packages/excalidraw/components/SearchMenu.tsx
index 873de5adb..3e0b31a69 100644
--- a/packages/excalidraw/components/SearchMenu.tsx
+++ b/packages/excalidraw/components/SearchMenu.tsx
@@ -1,25 +1,39 @@
-import { Fragment, memo, useEffect, useRef, useState } from "react";
-import { collapseDownIcon, upIcon, searchIcon } from "./icons";
-import { TextField } from "./TextField";
-import { Button } from "./Button";
-import { useApp, useExcalidrawSetAppState } from "./App";
-import debounce from "lodash.debounce";
-import type { AppClassProperties } from "../types";
-import { isTextElement, newTextElement } from "../element";
-import type { ExcalidrawTextElement } from "../element/types";
-import { addEventListener, getFontString } from "../utils";
-import { KEYS } from "../keys";
+import { round } from "@excalidraw/math";
 import clsx from "clsx";
+import debounce from "lodash.debounce";
+import { Fragment, memo, useEffect, useRef, useState } from "react";
+
+import { CLASSES, EVENT } from "@excalidraw/common";
+
+import { isElementCompletelyInViewport } from "@excalidraw/element/sizeHelpers";
+
+import { measureText } from "@excalidraw/element/textMeasurements";
+
+import {
+  KEYS,
+  randomInteger,
+  addEventListener,
+  getFontString,
+} from "@excalidraw/common";
+
+import { newTextElement } from "@excalidraw/element/newElement";
+import { isTextElement } from "@excalidraw/element/typeChecks";
+
+import type { ExcalidrawTextElement } from "@excalidraw/element/types";
+
 import { atom, useAtom } from "../editor-jotai";
-import { t } from "../i18n";
-import { isElementCompletelyInViewport } from "../element/sizeHelpers";
-import { randomInteger } from "../random";
-import { CLASSES, EVENT } from "../constants";
+
 import { useStable } from "../hooks/useStable";
+import { t } from "../i18n";
+
+import { useApp, useExcalidrawSetAppState } from "./App";
+import { Button } from "./Button";
+import { TextField } from "./TextField";
+import { collapseDownIcon, upIcon, searchIcon } from "./icons";
 
 import "./SearchMenu.scss";
-import { round } from "@excalidraw/math";
-import { measureText } from "../element/textMeasurements";
+
+import type { AppClassProperties } from "../types";
 
 const searchQueryAtom = atom<string>("");
 export const searchItemInFocusAtom = atom<number | null>(null);
diff --git a/packages/excalidraw/components/Section.tsx b/packages/excalidraw/components/Section.tsx
index 8cd0aaab5..e7e357bb5 100644
--- a/packages/excalidraw/components/Section.tsx
+++ b/packages/excalidraw/components/Section.tsx
@@ -1,5 +1,7 @@
 import React from "react";
+
 import { t } from "../i18n";
+
 import { useExcalidrawContainer } from "./App";
 
 export const Section: React.FC<{
diff --git a/packages/excalidraw/components/ShareableLinkDialog.tsx b/packages/excalidraw/components/ShareableLinkDialog.tsx
index 987c7bf61..514a77632 100644
--- a/packages/excalidraw/components/ShareableLinkDialog.tsx
+++ b/packages/excalidraw/components/ShareableLinkDialog.tsx
@@ -1,12 +1,12 @@
 import { useRef, useState } from "react";
 
 import { copyTextToSystemClipboard } from "../clipboard";
+import { useCopyStatus } from "../hooks/useCopiedIndicator";
 import { useI18n } from "../i18n";
 
 import { Dialog } from "./Dialog";
-import { TextField } from "./TextField";
 import { FilledButton } from "./FilledButton";
-import { useCopyStatus } from "../hooks/useCopiedIndicator";
+import { TextField } from "./TextField";
 import { copyIcon } from "./icons";
 
 import "./ShareableLinkDialog.scss";
diff --git a/packages/excalidraw/components/Sidebar/Sidebar.test.tsx b/packages/excalidraw/components/Sidebar/Sidebar.test.tsx
index b61529d9e..dd52fdb11 100644
--- a/packages/excalidraw/components/Sidebar/Sidebar.test.tsx
+++ b/packages/excalidraw/components/Sidebar/Sidebar.test.tsx
@@ -1,5 +1,8 @@
 import React from "react";
-import { DEFAULT_SIDEBAR } from "../../constants";
+import { vi } from "vitest";
+
+import { DEFAULT_SIDEBAR } from "@excalidraw/common";
+
 import { Excalidraw, Sidebar } from "../../index";
 import {
   act,
@@ -10,7 +13,7 @@ import {
   waitFor,
   withExcalidrawDimensions,
 } from "../../tests/test-utils";
-import { vi } from "vitest";
+
 import {
   assertExcalidrawWithSidebar,
   assertSidebarDockButton,
diff --git a/packages/excalidraw/components/Sidebar/Sidebar.tsx b/packages/excalidraw/components/Sidebar/Sidebar.tsx
index 7c747d2f4..d08ba5f59 100644
--- a/packages/excalidraw/components/Sidebar/Sidebar.tsx
+++ b/packages/excalidraw/components/Sidebar/Sidebar.tsx
@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import React, {
   useEffect,
   useLayoutEffect,
@@ -7,26 +8,27 @@ import React, {
   useImperativeHandle,
   useCallback,
 } from "react";
-import { Island } from "../Island";
+
+import { EVENT, isDevEnv, KEYS, updateObject } from "@excalidraw/common";
+
+import { useUIAppState } from "../../context/ui-appState";
 import { atom, useSetAtom } from "../../editor-jotai";
-import type { SidebarProps, SidebarPropsContextValue } from "./common";
-import { SidebarPropsContext } from "./common";
-import { SidebarHeader } from "./SidebarHeader";
-import clsx from "clsx";
+import { useOutsideClick } from "../../hooks/useOutsideClick";
 import { useDevice, useExcalidrawSetAppState } from "../App";
-import { updateObject } from "../../utils";
-import { KEYS } from "../../keys";
-import { EVENT } from "../../constants";
-import { SidebarTrigger } from "./SidebarTrigger";
-import { SidebarTabTriggers } from "./SidebarTabTriggers";
+import { Island } from "../Island";
+
+import { SidebarHeader } from "./SidebarHeader";
 import { SidebarTabTrigger } from "./SidebarTabTrigger";
+import { SidebarTabTriggers } from "./SidebarTabTriggers";
+import { SidebarTrigger } from "./SidebarTrigger";
+import { SidebarPropsContext } from "./common";
 import { SidebarTabs } from "./SidebarTabs";
 import { SidebarTab } from "./SidebarTab";
-import { useUIAppState } from "../../context/ui-appState";
-import { useOutsideClick } from "../../hooks/useOutsideClick";
 
 import "./Sidebar.scss";
 
+import type { SidebarProps, SidebarPropsContextValue } from "./common";
+
 /**
  * Flags whether the currently rendered Sidebar is docked or not, for use
  * in upstream components that need to act on this (e.g. LayerUI to shift the
@@ -49,7 +51,7 @@ export const SidebarInner = forwardRef(
     }: SidebarProps & Omit<React.RefAttributes<HTMLDivElement>, "onSelect">,
     ref: React.ForwardedRef<HTMLDivElement>,
   ) => {
-    if (import.meta.env.DEV && onDock && docked == null) {
+    if (isDevEnv() && onDock && docked == null) {
       console.warn(
         "Sidebar: `docked` must be set when `onDock` is supplied for the sidebar to be user-dockable. To hide this message, either pass `docked` or remove `onDock`",
       );
diff --git a/packages/excalidraw/components/Sidebar/SidebarHeader.tsx b/packages/excalidraw/components/Sidebar/SidebarHeader.tsx
index 6d046aba3..9c9e51cf5 100644
--- a/packages/excalidraw/components/Sidebar/SidebarHeader.tsx
+++ b/packages/excalidraw/components/Sidebar/SidebarHeader.tsx
@@ -1,11 +1,13 @@
 import clsx from "clsx";
 import { useContext } from "react";
+
 import { t } from "../../i18n";
 import { useDevice } from "../App";
-import { SidebarPropsContext } from "./common";
-import { CloseIcon, PinIcon } from "../icons";
-import { Tooltip } from "../Tooltip";
 import { Button } from "../Button";
+import { Tooltip } from "../Tooltip";
+import { CloseIcon, PinIcon } from "../icons";
+
+import { SidebarPropsContext } from "./common";
 
 export const SidebarHeader = ({
   children,
diff --git a/packages/excalidraw/components/Sidebar/SidebarTab.tsx b/packages/excalidraw/components/Sidebar/SidebarTab.tsx
index 6fddab0d6..0525662f7 100644
--- a/packages/excalidraw/components/Sidebar/SidebarTab.tsx
+++ b/packages/excalidraw/components/Sidebar/SidebarTab.tsx
@@ -1,4 +1,5 @@
 import * as RadixTabs from "@radix-ui/react-tabs";
+
 import type { SidebarTabName } from "../../types";
 
 export const SidebarTab = ({
diff --git a/packages/excalidraw/components/Sidebar/SidebarTabTrigger.tsx b/packages/excalidraw/components/Sidebar/SidebarTabTrigger.tsx
index 8509ef23d..9f2c09bcc 100644
--- a/packages/excalidraw/components/Sidebar/SidebarTabTrigger.tsx
+++ b/packages/excalidraw/components/Sidebar/SidebarTabTrigger.tsx
@@ -1,4 +1,5 @@
 import * as RadixTabs from "@radix-ui/react-tabs";
+
 import type { SidebarTabName } from "../../types";
 
 export const SidebarTabTrigger = ({
diff --git a/packages/excalidraw/components/Sidebar/SidebarTabs.tsx b/packages/excalidraw/components/Sidebar/SidebarTabs.tsx
index a681b5ee5..448840c4a 100644
--- a/packages/excalidraw/components/Sidebar/SidebarTabs.tsx
+++ b/packages/excalidraw/components/Sidebar/SidebarTabs.tsx
@@ -1,4 +1,5 @@
 import * as RadixTabs from "@radix-ui/react-tabs";
+
 import { useUIAppState } from "../../context/ui-appState";
 import { useExcalidrawSetAppState } from "../App";
 
diff --git a/packages/excalidraw/components/Sidebar/SidebarTrigger.tsx b/packages/excalidraw/components/Sidebar/SidebarTrigger.tsx
index a26e52d23..6e8bf374c 100644
--- a/packages/excalidraw/components/Sidebar/SidebarTrigger.tsx
+++ b/packages/excalidraw/components/Sidebar/SidebarTrigger.tsx
@@ -1,10 +1,12 @@
-import { useExcalidrawSetAppState } from "../App";
-import type { SidebarTriggerProps } from "./common";
-import { useUIAppState } from "../../context/ui-appState";
 import clsx from "clsx";
 
+import { useUIAppState } from "../../context/ui-appState";
+import { useExcalidrawSetAppState } from "../App";
+
 import "./SidebarTrigger.scss";
 
+import type { SidebarTriggerProps } from "./common";
+
 export const SidebarTrigger = ({
   name,
   tab,
diff --git a/packages/excalidraw/components/Sidebar/common.ts b/packages/excalidraw/components/Sidebar/common.ts
index 35c0c8bb1..239b16fc9 100644
--- a/packages/excalidraw/components/Sidebar/common.ts
+++ b/packages/excalidraw/components/Sidebar/common.ts
@@ -1,6 +1,7 @@
-import type { JSX } from "react";
 import React from "react";
+
 import type { AppState, SidebarName, SidebarTabName } from "../../types";
+import type { JSX } from "react";
 
 export type SidebarTriggerProps = {
   name: SidebarName;
diff --git a/packages/excalidraw/components/Sidebar/siderbar.test.helpers.tsx b/packages/excalidraw/components/Sidebar/siderbar.test.helpers.tsx
index c2a37431b..650eca6b0 100644
--- a/packages/excalidraw/components/Sidebar/siderbar.test.helpers.tsx
+++ b/packages/excalidraw/components/Sidebar/siderbar.test.helpers.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+
 import { Excalidraw } from "../..";
 import {
   GlobalTestState,
diff --git a/packages/excalidraw/components/Stack.tsx b/packages/excalidraw/components/Stack.tsx
index f45d47118..75e559aa3 100644
--- a/packages/excalidraw/components/Stack.tsx
+++ b/packages/excalidraw/components/Stack.tsx
@@ -1,8 +1,8 @@
-import "./Stack.scss";
-
 import React, { forwardRef } from "react";
 import clsx from "clsx";
 
+import "./Stack.scss";
+
 type StackProps = {
   children: React.ReactNode;
   gap?: number;
diff --git a/packages/excalidraw/components/Stats/Angle.tsx b/packages/excalidraw/components/Stats/Angle.tsx
index 409476ada..67693551f 100644
--- a/packages/excalidraw/components/Stats/Angle.tsx
+++ b/packages/excalidraw/components/Stats/Angle.tsx
@@ -1,15 +1,22 @@
-import { mutateElement } from "../../element/mutateElement";
-import { getBoundTextElement } from "../../element/textElement";
-import { isArrowElement, isElbowArrow } from "../../element/typeChecks";
-import type { ExcalidrawElement } from "../../element/types";
+import { degreesToRadians, radiansToDegrees } from "@excalidraw/math";
+
+import { mutateElement } from "@excalidraw/element/mutateElement";
+
+import { getBoundTextElement } from "@excalidraw/element/textElement";
+import { isArrowElement, isElbowArrow } from "@excalidraw/element/typeChecks";
+
+import type { Degrees } from "@excalidraw/math";
+
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+
 import { angleIcon } from "../icons";
+
 import DragInput from "./DragInput";
-import type { DragInputCallbackType } from "./DragInput";
 import { getStepSizedValue, isPropertyEditable, updateBindings } from "./utils";
+
+import type { DragInputCallbackType } from "./DragInput";
 import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
-import type { Degrees } from "@excalidraw/math";
-import { degreesToRadians, radiansToDegrees } from "@excalidraw/math";
 
 interface AngleProps {
   element: ExcalidrawElement;
diff --git a/packages/excalidraw/components/Stats/CanvasGrid.tsx b/packages/excalidraw/components/Stats/CanvasGrid.tsx
index a08f709ae..4611365f4 100644
--- a/packages/excalidraw/components/Stats/CanvasGrid.tsx
+++ b/packages/excalidraw/components/Stats/CanvasGrid.tsx
@@ -1,8 +1,10 @@
+import { getNormalizedGridStep } from "../../scene";
+
 import StatsDragInput from "./DragInput";
+import { getStepSizedValue } from "./utils";
+
 import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
-import { getStepSizedValue } from "./utils";
-import { getNormalizedGridStep } from "../../scene";
 
 interface PositionProps {
   property: "gridStep";
diff --git a/packages/excalidraw/components/Stats/Dimension.tsx b/packages/excalidraw/components/Stats/Dimension.tsx
index ce096d280..142abc407 100644
--- a/packages/excalidraw/components/Stats/Dimension.tsx
+++ b/packages/excalidraw/components/Stats/Dimension.tsx
@@ -1,18 +1,22 @@
-import type { ExcalidrawElement } from "../../element/types";
-import DragInput from "./DragInput";
-import type { DragInputCallbackType } from "./DragInput";
-import { getStepSizedValue, isPropertyEditable } from "./utils";
-import { MIN_WIDTH_OR_HEIGHT } from "../../constants";
-import { resizeSingleElement } from "../../element/resizeElements";
-import type Scene from "../../scene/Scene";
-import type { AppState } from "../../types";
-import { isImageElement } from "../../element/typeChecks";
+import { clamp, round } from "@excalidraw/math";
+
+import { MIN_WIDTH_OR_HEIGHT } from "@excalidraw/common";
 import {
   MINIMAL_CROP_SIZE,
   getUncroppedWidthAndHeight,
-} from "../../element/cropElement";
-import { mutateElement } from "../../element/mutateElement";
-import { clamp, round } from "@excalidraw/math";
+} from "@excalidraw/element/cropElement";
+import { mutateElement } from "@excalidraw/element/mutateElement";
+import { resizeSingleElement } from "@excalidraw/element/resizeElements";
+import { isImageElement } from "@excalidraw/element/typeChecks";
+
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+
+import DragInput from "./DragInput";
+import { getStepSizedValue, isPropertyEditable } from "./utils";
+
+import type { DragInputCallbackType } from "./DragInput";
+import type Scene from "../../scene/Scene";
+import type { AppState } from "../../types";
 
 interface DimensionDragInputProps {
   property: "width" | "height";
diff --git a/packages/excalidraw/components/Stats/DragInput.tsx b/packages/excalidraw/components/Stats/DragInput.tsx
index 82d6419c0..b4795308d 100644
--- a/packages/excalidraw/components/Stats/DragInput.tsx
+++ b/packages/excalidraw/components/Stats/DragInput.tsx
@@ -1,19 +1,23 @@
-import { useEffect, useRef, useState } from "react";
-import { EVENT } from "../../constants";
-import { KEYS } from "../../keys";
-import type { ElementsMap, ExcalidrawElement } from "../../element/types";
-import { deepCopyElement } from "../../element/newElement";
 import clsx from "clsx";
+import { useEffect, useRef, useState } from "react";
+
+import { EVENT, KEYS, cloneJSON } from "@excalidraw/common";
+
+import { deepCopyElement } from "@excalidraw/element/duplicate";
+
+import type { ElementsMap, ExcalidrawElement } from "@excalidraw/element/types";
+
+import { CaptureUpdateAction } from "../../store";
 import { useApp } from "../App";
 import { InlineIcon } from "../InlineIcon";
-import type { StatsInputProperty } from "./utils";
+
 import { SMALLEST_DELTA } from "./utils";
-import { CaptureUpdateAction } from "../../store";
-import type Scene from "../../scene/Scene";
 
 import "./DragInput.scss";
+
+import type { StatsInputProperty } from "./utils";
+import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
-import { cloneJSON } from "../../utils";
 
 export type DragInputCallbackType<
   P extends StatsInputProperty,
diff --git a/packages/excalidraw/components/Stats/FontSize.tsx b/packages/excalidraw/components/Stats/FontSize.tsx
index 13dc6dbee..90bdee564 100644
--- a/packages/excalidraw/components/Stats/FontSize.tsx
+++ b/packages/excalidraw/components/Stats/FontSize.tsx
@@ -1,17 +1,26 @@
+import { mutateElement } from "@excalidraw/element/mutateElement";
+import {
+  getBoundTextElement,
+  redrawTextBoundingBox,
+} from "@excalidraw/element/textElement";
+import {
+  hasBoundTextElement,
+  isTextElement,
+} from "@excalidraw/element/typeChecks";
+
 import type {
   ExcalidrawElement,
   ExcalidrawTextElement,
-} from "../../element/types";
-import StatsDragInput from "./DragInput";
-import type { DragInputCallbackType } from "./DragInput";
-import { mutateElement } from "../../element/mutateElement";
-import { getStepSizedValue } from "./utils";
+} from "@excalidraw/element/types";
+
 import { fontSizeIcon } from "../icons";
+
+import StatsDragInput from "./DragInput";
+import { getStepSizedValue } from "./utils";
+
+import type { DragInputCallbackType } from "./DragInput";
 import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
-import { isTextElement, redrawTextBoundingBox } from "../../element";
-import { hasBoundTextElement } from "../../element/typeChecks";
-import { getBoundTextElement } from "../../element/textElement";
 
 interface FontSizeProps {
   element: ExcalidrawElement;
diff --git a/packages/excalidraw/components/Stats/MultiAngle.tsx b/packages/excalidraw/components/Stats/MultiAngle.tsx
index d9a78825a..3cabd19c0 100644
--- a/packages/excalidraw/components/Stats/MultiAngle.tsx
+++ b/packages/excalidraw/components/Stats/MultiAngle.tsx
@@ -1,17 +1,25 @@
-import { mutateElement } from "../../element/mutateElement";
-import { getBoundTextElement } from "../../element/textElement";
-import { isArrowElement } from "../../element/typeChecks";
-import type { ExcalidrawElement } from "../../element/types";
-import { isInGroup } from "../../groups";
-import type Scene from "../../scene/Scene";
-import { angleIcon } from "../icons";
-import DragInput from "./DragInput";
-import type { DragInputCallbackType } from "./DragInput";
-import { getStepSizedValue, isPropertyEditable } from "./utils";
-import type { AppState } from "../../types";
-import type { Degrees } from "@excalidraw/math";
 import { degreesToRadians, radiansToDegrees } from "@excalidraw/math";
 
+import { mutateElement } from "@excalidraw/element/mutateElement";
+
+import { getBoundTextElement } from "@excalidraw/element/textElement";
+import { isArrowElement } from "@excalidraw/element/typeChecks";
+
+import { isInGroup } from "@excalidraw/element/groups";
+
+import type { Degrees } from "@excalidraw/math";
+
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+
+import { angleIcon } from "../icons";
+
+import DragInput from "./DragInput";
+import { getStepSizedValue, isPropertyEditable } from "./utils";
+
+import type { DragInputCallbackType } from "./DragInput";
+import type Scene from "../../scene/Scene";
+import type { AppState } from "../../types";
+
 interface MultiAngleProps {
   elements: readonly ExcalidrawElement[];
   scene: Scene;
diff --git a/packages/excalidraw/components/Stats/MultiDimension.tsx b/packages/excalidraw/components/Stats/MultiDimension.tsx
index 04f193747..b482611af 100644
--- a/packages/excalidraw/components/Stats/MultiDimension.tsx
+++ b/packages/excalidraw/components/Stats/MultiDimension.tsx
@@ -1,29 +1,36 @@
+import { pointFrom, type GlobalPoint } from "@excalidraw/math";
 import { useMemo } from "react";
-import { getCommonBounds, isTextElement } from "../../element";
-import { updateBoundElements } from "../../element/binding";
-import { mutateElement } from "../../element/mutateElement";
+
+import { MIN_WIDTH_OR_HEIGHT } from "@excalidraw/common";
+import { updateBoundElements } from "@excalidraw/element/binding";
+import { mutateElement } from "@excalidraw/element/mutateElement";
 import {
   rescalePointsInElement,
   resizeSingleElement,
-} from "../../element/resizeElements";
+} from "@excalidraw/element/resizeElements";
 import {
   getBoundTextElement,
   handleBindTextResize,
-} from "../../element/textElement";
+} from "@excalidraw/element/textElement";
+
+import { isTextElement } from "@excalidraw/element/typeChecks";
+
+import { getCommonBounds } from "@excalidraw/utils";
+
 import type {
   ElementsMap,
   ExcalidrawElement,
   NonDeletedSceneElementsMap,
-} from "../../element/types";
-import type Scene from "../../scene/Scene";
-import type { AppState } from "../../types";
+} from "@excalidraw/element/types";
+
 import DragInput from "./DragInput";
-import type { DragInputCallbackType } from "./DragInput";
 import { getAtomicUnits, getStepSizedValue, isPropertyEditable } from "./utils";
 import { getElementsInAtomicUnit } from "./utils";
+
+import type { DragInputCallbackType } from "./DragInput";
 import type { AtomicUnit } from "./utils";
-import { MIN_WIDTH_OR_HEIGHT } from "../../constants";
-import { pointFrom, type GlobalPoint } from "@excalidraw/math";
+import type Scene from "../../scene/Scene";
+import type { AppState } from "../../types";
 
 interface MultiDimensionProps {
   property: "width" | "height";
diff --git a/packages/excalidraw/components/Stats/MultiFontSize.tsx b/packages/excalidraw/components/Stats/MultiFontSize.tsx
index 419bbbc36..6bac4bd3c 100644
--- a/packages/excalidraw/components/Stats/MultiFontSize.tsx
+++ b/packages/excalidraw/components/Stats/MultiFontSize.tsx
@@ -1,19 +1,29 @@
-import { isTextElement, redrawTextBoundingBox } from "../../element";
-import { mutateElement } from "../../element/mutateElement";
-import { hasBoundTextElement } from "../../element/typeChecks";
+import { mutateElement } from "@excalidraw/element/mutateElement";
+import {
+  getBoundTextElement,
+  redrawTextBoundingBox,
+} from "@excalidraw/element/textElement";
+import {
+  hasBoundTextElement,
+  isTextElement,
+} from "@excalidraw/element/typeChecks";
+
+import { isInGroup } from "@excalidraw/element/groups";
+
 import type {
   ExcalidrawElement,
   ExcalidrawTextElement,
   NonDeletedSceneElementsMap,
-} from "../../element/types";
-import { isInGroup } from "../../groups";
-import type Scene from "../../scene/Scene";
+} from "@excalidraw/element/types";
+
 import { fontSizeIcon } from "../icons";
+
 import StatsDragInput from "./DragInput";
-import type { DragInputCallbackType } from "./DragInput";
 import { getStepSizedValue } from "./utils";
+
+import type { DragInputCallbackType } from "./DragInput";
+import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
-import { getBoundTextElement } from "../../element/textElement";
 
 interface MultiFontSizeProps {
   elements: readonly ExcalidrawElement[];
diff --git a/packages/excalidraw/components/Stats/MultiPosition.tsx b/packages/excalidraw/components/Stats/MultiPosition.tsx
index 8a29aa66d..98058efec 100644
--- a/packages/excalidraw/components/Stats/MultiPosition.tsx
+++ b/packages/excalidraw/components/Stats/MultiPosition.tsx
@@ -1,19 +1,25 @@
+import { pointFrom, pointRotateRads } from "@excalidraw/math";
+import { useMemo } from "react";
+
+import { isTextElement } from "@excalidraw/element/typeChecks";
+
+import { getCommonBounds } from "@excalidraw/element/bounds";
+
 import type {
   ElementsMap,
   ExcalidrawElement,
   NonDeletedExcalidrawElement,
   NonDeletedSceneElementsMap,
-} from "../../element/types";
-import type Scene from "../../scene/Scene";
+} from "@excalidraw/element/types";
+
 import StatsDragInput from "./DragInput";
-import type { DragInputCallbackType } from "./DragInput";
 import { getAtomicUnits, getStepSizedValue, isPropertyEditable } from "./utils";
-import { getCommonBounds, isTextElement } from "../../element";
-import { useMemo } from "react";
 import { getElementsInAtomicUnit, moveElement } from "./utils";
+
+import type { DragInputCallbackType } from "./DragInput";
 import type { AtomicUnit } from "./utils";
+import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
-import { pointFrom, pointRotateRads } from "@excalidraw/math";
 
 interface MultiPositionProps {
   property: "x" | "y";
diff --git a/packages/excalidraw/components/Stats/Position.tsx b/packages/excalidraw/components/Stats/Position.tsx
index 038e58ebc..bf6dfd161 100644
--- a/packages/excalidraw/components/Stats/Position.tsx
+++ b/packages/excalidraw/components/Stats/Position.tsx
@@ -1,16 +1,20 @@
-import type { ElementsMap, ExcalidrawElement } from "../../element/types";
-import StatsDragInput from "./DragInput";
-import type { DragInputCallbackType } from "./DragInput";
-import { getStepSizedValue, moveElement } from "./utils";
-import type Scene from "../../scene/Scene";
-import type { AppState } from "../../types";
 import { clamp, pointFrom, pointRotateRads, round } from "@excalidraw/math";
-import { isImageElement } from "../../element/typeChecks";
+
 import {
   getFlipAdjustedCropPosition,
   getUncroppedWidthAndHeight,
-} from "../../element/cropElement";
-import { mutateElement } from "../../element/mutateElement";
+} from "@excalidraw/element/cropElement";
+import { mutateElement } from "@excalidraw/element/mutateElement";
+import { isImageElement } from "@excalidraw/element/typeChecks";
+
+import type { ElementsMap, ExcalidrawElement } from "@excalidraw/element/types";
+
+import StatsDragInput from "./DragInput";
+import { getStepSizedValue, moveElement } from "./utils";
+
+import type { DragInputCallbackType } from "./DragInput";
+import type Scene from "../../scene/Scene";
+import type { AppState } from "../../types";
 
 interface PositionProps {
   property: "x" | "y";
diff --git a/packages/excalidraw/components/Stats/index.tsx b/packages/excalidraw/components/Stats/index.tsx
index 2ccd93ca2..889f78971 100644
--- a/packages/excalidraw/components/Stats/index.tsx
+++ b/packages/excalidraw/components/Stats/index.tsx
@@ -1,37 +1,44 @@
+import { round } from "@excalidraw/math";
+import clsx from "clsx";
+import throttle from "lodash.throttle";
 import { useEffect, useMemo, useState, memo } from "react";
-import { getCommonBounds } from "../../element/bounds";
-import type { NonDeletedExcalidrawElement } from "../../element/types";
+
+import { STATS_PANELS } from "@excalidraw/common";
+import { getCommonBounds } from "@excalidraw/element/bounds";
+import { getUncroppedWidthAndHeight } from "@excalidraw/element/cropElement";
+import { isElbowArrow, isImageElement } from "@excalidraw/element/typeChecks";
+
+import { frameAndChildrenSelectedTogether } from "@excalidraw/element/frame";
+
+import { elementsAreInSameGroup } from "@excalidraw/element/groups";
+
+import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
+
 import { t } from "../../i18n";
+import { isGridModeEnabled } from "../../snapping";
+import { useExcalidrawAppState, useExcalidrawSetAppState } from "../App";
+import { Island } from "../Island";
+import { CloseIcon } from "../icons";
+
+import Angle from "./Angle";
+import CanvasGrid from "./CanvasGrid";
+import Collapsible from "./Collapsible";
+import Dimension from "./Dimension";
+import FontSize from "./FontSize";
+import MultiAngle from "./MultiAngle";
+import MultiDimension from "./MultiDimension";
+import MultiFontSize from "./MultiFontSize";
+import MultiPosition from "./MultiPosition";
+import Position from "./Position";
+import { getAtomicUnits } from "./utils";
+
+import "./Stats.scss";
+
 import type {
   AppClassProperties,
   AppState,
   ExcalidrawProps,
 } from "../../types";
-import { CloseIcon } from "../icons";
-import { Island } from "../Island";
-import throttle from "lodash.throttle";
-import Dimension from "./Dimension";
-import Angle from "./Angle";
-import FontSize from "./FontSize";
-import MultiDimension from "./MultiDimension";
-import { elementsAreInSameGroup } from "../../groups";
-import MultiAngle from "./MultiAngle";
-import MultiFontSize from "./MultiFontSize";
-import Position from "./Position";
-import MultiPosition from "./MultiPosition";
-import Collapsible from "./Collapsible";
-import { useExcalidrawAppState, useExcalidrawSetAppState } from "../App";
-import { getAtomicUnits } from "./utils";
-import { STATS_PANELS } from "../../constants";
-import { isElbowArrow, isImageElement } from "../../element/typeChecks";
-import CanvasGrid from "./CanvasGrid";
-import clsx from "clsx";
-
-import "./Stats.scss";
-import { isGridModeEnabled } from "../../snapping";
-import { getUncroppedWidthAndHeight } from "../../element/cropElement";
-import { round } from "@excalidraw/math";
-import { frameAndChildrenSelectedTogether } from "../../frame";
 
 interface StatsProps {
   app: AppClassProperties;
diff --git a/packages/excalidraw/components/Stats/stats.test.tsx b/packages/excalidraw/components/Stats/stats.test.tsx
index 49d6a625f..fc94da056 100644
--- a/packages/excalidraw/components/Stats/stats.test.tsx
+++ b/packages/excalidraw/components/Stats/stats.test.tsx
@@ -1,31 +1,37 @@
-import React from "react";
+import { degreesToRadians, pointFrom, pointRotateRads } from "@excalidraw/math";
 import { act, fireEvent, queryByTestId } from "@testing-library/react";
+import React from "react";
+import { vi } from "vitest";
+
+import { setDateTimeForTests, reseed } from "@excalidraw/common";
+
+import { isInGroup } from "@excalidraw/element/groups";
+
+import { isTextElement } from "@excalidraw/element/typeChecks";
+
+import type { Degrees } from "@excalidraw/math";
+
+import type {
+  ExcalidrawElement,
+  ExcalidrawLinearElement,
+  ExcalidrawTextElement,
+} from "@excalidraw/element/types";
+
+import { Excalidraw, getCommonBounds, mutateElement } from "../..";
+import { actionGroup } from "../../actions";
+import { t } from "../../i18n";
+import * as StaticScene from "../../renderer/staticScene";
+import { API } from "../../tests/helpers/api";
 import { Keyboard, Pointer, UI } from "../../tests/helpers/ui";
-import { getStepSizedValue } from "./utils";
+import { getTextEditor, updateTextEditor } from "../../tests/queries/dom";
 import {
   GlobalTestState,
   mockBoundingClientRect,
   render,
   restoreOriginalGetBoundingClientRect,
 } from "../../tests/test-utils";
-import * as StaticScene from "../../renderer/staticScene";
-import { vi } from "vitest";
-import { reseed } from "../../random";
-import { setDateTimeForTests } from "../../utils";
-import { Excalidraw, mutateElement } from "../..";
-import { t } from "../../i18n";
-import type {
-  ExcalidrawElement,
-  ExcalidrawLinearElement,
-  ExcalidrawTextElement,
-} from "../../element/types";
-import { getTextEditor, updateTextEditor } from "../../tests/queries/dom";
-import { getCommonBounds, isTextElement } from "../../element";
-import { API } from "../../tests/helpers/api";
-import { actionGroup } from "../../actions";
-import { isInGroup } from "../../groups";
-import type { Degrees } from "@excalidraw/math";
-import { degreesToRadians, pointFrom, pointRotateRads } from "@excalidraw/math";
+
+import { getStepSizedValue } from "./utils";
 
 const { h } = window;
 const mouse = new Pointer("mouse");
diff --git a/packages/excalidraw/components/Stats/utils.ts b/packages/excalidraw/components/Stats/utils.ts
index 61555baeb..dbb47a234 100644
--- a/packages/excalidraw/components/Stats/utils.ts
+++ b/packages/excalidraw/components/Stats/utils.ts
@@ -1,27 +1,32 @@
-import type { Radians } from "@excalidraw/math";
 import { pointFrom, pointRotateRads } from "@excalidraw/math";
+
 import {
   bindOrUnbindLinearElements,
   updateBoundElements,
-} from "../../element/binding";
-import { mutateElement } from "../../element/mutateElement";
-import { getBoundTextElement } from "../../element/textElement";
+} from "@excalidraw/element/binding";
+import { mutateElement } from "@excalidraw/element/mutateElement";
+import { getBoundTextElement } from "@excalidraw/element/textElement";
 import {
   isFrameLikeElement,
   isLinearElement,
   isTextElement,
-} from "../../element/typeChecks";
+} from "@excalidraw/element/typeChecks";
+
+import {
+  getSelectedGroupIds,
+  getElementsInGroup,
+  isInGroup,
+} from "@excalidraw/element/groups";
+
+import type { Radians } from "@excalidraw/math";
+
 import type {
   ElementsMap,
   ExcalidrawElement,
   NonDeletedExcalidrawElement,
   NonDeletedSceneElementsMap,
-} from "../../element/types";
-import {
-  getSelectedGroupIds,
-  getElementsInGroup,
-  isInGroup,
-} from "../../groups";
+} from "@excalidraw/element/types";
+
 import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
 
diff --git a/packages/excalidraw/components/TTDDialog/MermaidToExcalidraw.tsx b/packages/excalidraw/components/TTDDialog/MermaidToExcalidraw.tsx
index 83fb91d0e..8a4f92840 100644
--- a/packages/excalidraw/components/TTDDialog/MermaidToExcalidraw.tsx
+++ b/packages/excalidraw/components/TTDDialog/MermaidToExcalidraw.tsx
@@ -1,25 +1,30 @@
 import { useState, useRef, useEffect, useDeferredValue } from "react";
-import type { BinaryFiles } from "../../types";
+
+import { EDITOR_LS_KEYS, debounce, isDevEnv } from "@excalidraw/common";
+
+import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
+
 import { useApp } from "../App";
-import type { NonDeletedExcalidrawElement } from "../../element/types";
 import { ArrowRightIcon } from "../icons";
-import "./MermaidToExcalidraw.scss";
+import { EditorLocalStorage } from "../../data/EditorLocalStorage";
 import { t } from "../../i18n";
 import Trans from "../Trans";
-import type { MermaidToExcalidrawLibProps } from "./common";
+
+import { TTDDialogInput } from "./TTDDialogInput";
+import { TTDDialogOutput } from "./TTDDialogOutput";
+import { TTDDialogPanel } from "./TTDDialogPanel";
+import { TTDDialogPanels } from "./TTDDialogPanels";
+import { TTDDialogSubmitShortcut } from "./TTDDialogSubmitShortcut";
 import {
   convertMermaidToExcalidraw,
   insertToEditor,
   saveMermaidDataToStorage,
 } from "./common";
-import { TTDDialogPanels } from "./TTDDialogPanels";
-import { TTDDialogPanel } from "./TTDDialogPanel";
-import { TTDDialogInput } from "./TTDDialogInput";
-import { TTDDialogOutput } from "./TTDDialogOutput";
-import { EditorLocalStorage } from "../../data/EditorLocalStorage";
-import { EDITOR_LS_KEYS } from "../../constants";
-import { debounce, isDevEnv } from "../../utils";
-import { TTDDialogSubmitShortcut } from "./TTDDialogSubmitShortcut";
+
+import "./MermaidToExcalidraw.scss";
+
+import type { BinaryFiles } from "../../types";
+import type { MermaidToExcalidrawLibProps } from "./common";
 
 const MERMAID_EXAMPLE =
   "flowchart TD\n A[Christmas] -->|Get money| B(Go shopping)\n B --> C{Let me think}\n C -->|One| D[Laptop]\n C -->|Two| E[iPhone]\n C -->|Three| F[Car]";
diff --git a/packages/excalidraw/components/TTDDialog/TTDDialog.tsx b/packages/excalidraw/components/TTDDialog/TTDDialog.tsx
index c77dfbf68..68d230d24 100644
--- a/packages/excalidraw/components/TTDDialog/TTDDialog.tsx
+++ b/packages/excalidraw/components/TTDDialog/TTDDialog.tsx
@@ -1,35 +1,42 @@
-import { Dialog } from "../Dialog";
+import { useEffect, useRef, useState } from "react";
+
+import { isFiniteNumber } from "@excalidraw/math";
+
+import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
+
+import { trackEvent } from "../../analytics";
+import { useUIAppState } from "../../context/ui-appState";
+import { atom, useAtom } from "../../editor-jotai";
+import { t } from "../../i18n";
 import { useApp, useExcalidrawSetAppState } from "../App";
+import { Dialog } from "../Dialog";
+import { InlineIcon } from "../InlineIcon";
+import { withInternalFallback } from "../hoc/withInternalFallback";
+import { ArrowRightIcon } from "../icons";
+
 import MermaidToExcalidraw from "./MermaidToExcalidraw";
 import TTDDialogTabs from "./TTDDialogTabs";
-import type { ChangeEventHandler } from "react";
-import { useEffect, useRef, useState } from "react";
-import { useUIAppState } from "../../context/ui-appState";
-import { withInternalFallback } from "../hoc/withInternalFallback";
 import { TTDDialogTabTriggers } from "./TTDDialogTabTriggers";
 import { TTDDialogTabTrigger } from "./TTDDialogTabTrigger";
 import { TTDDialogTab } from "./TTDDialogTab";
-import { t } from "../../i18n";
 import { TTDDialogInput } from "./TTDDialogInput";
 import { TTDDialogOutput } from "./TTDDialogOutput";
 import { TTDDialogPanel } from "./TTDDialogPanel";
 import { TTDDialogPanels } from "./TTDDialogPanels";
-import type { MermaidToExcalidrawLibProps } from "./common";
+
 import {
   convertMermaidToExcalidraw,
   insertToEditor,
   saveMermaidDataToStorage,
 } from "./common";
-import type { NonDeletedExcalidrawElement } from "../../element/types";
-import type { BinaryFiles } from "../../types";
-import { ArrowRightIcon } from "../icons";
+import { TTDDialogSubmitShortcut } from "./TTDDialogSubmitShortcut";
 
 import "./TTDDialog.scss";
-import { atom, useAtom } from "../../editor-jotai";
-import { trackEvent } from "../../analytics";
-import { InlineIcon } from "../InlineIcon";
-import { TTDDialogSubmitShortcut } from "./TTDDialogSubmitShortcut";
-import { isFiniteNumber } from "@excalidraw/math";
+
+import type { ChangeEventHandler } from "react";
+import type { MermaidToExcalidrawLibProps } from "./common";
+
+import type { BinaryFiles } from "../../types";
 
 const MIN_PROMPT_LENGTH = 3;
 const MAX_PROMPT_LENGTH = 1000;
diff --git a/packages/excalidraw/components/TTDDialog/TTDDialogInput.tsx b/packages/excalidraw/components/TTDDialog/TTDDialogInput.tsx
index e11d0dc3f..9bd80b681 100644
--- a/packages/excalidraw/components/TTDDialog/TTDDialogInput.tsx
+++ b/packages/excalidraw/components/TTDDialog/TTDDialogInput.tsx
@@ -1,7 +1,8 @@
-import type { ChangeEventHandler } from "react";
 import { useEffect, useRef } from "react";
-import { EVENT } from "../../constants";
-import { KEYS } from "../../keys";
+
+import { EVENT, KEYS } from "@excalidraw/common";
+
+import type { ChangeEventHandler } from "react";
 
 interface TTDDialogInputProps {
   input: string;
diff --git a/packages/excalidraw/components/TTDDialog/TTDDialogPanel.tsx b/packages/excalidraw/components/TTDDialog/TTDDialogPanel.tsx
index 0a78e4969..82aede8ae 100644
--- a/packages/excalidraw/components/TTDDialog/TTDDialogPanel.tsx
+++ b/packages/excalidraw/components/TTDDialog/TTDDialogPanel.tsx
@@ -1,8 +1,10 @@
-import type { ReactNode } from "react";
-import { Button } from "../Button";
 import clsx from "clsx";
+
+import { Button } from "../Button";
 import Spinner from "../Spinner";
 
+import type { ReactNode } from "react";
+
 interface TTDDialogPanelProps {
   label: string;
   children: ReactNode;
diff --git a/packages/excalidraw/components/TTDDialog/TTDDialogSubmitShortcut.tsx b/packages/excalidraw/components/TTDDialog/TTDDialogSubmitShortcut.tsx
index a8831e3a0..05cad640b 100644
--- a/packages/excalidraw/components/TTDDialog/TTDDialogSubmitShortcut.tsx
+++ b/packages/excalidraw/components/TTDDialog/TTDDialogSubmitShortcut.tsx
@@ -1,4 +1,4 @@
-import { getShortcutKey } from "../../utils";
+import { getShortcutKey } from "@excalidraw/common";
 
 export const TTDDialogSubmitShortcut = () => {
   return (
diff --git a/packages/excalidraw/components/TTDDialog/TTDDialogTabs.tsx b/packages/excalidraw/components/TTDDialog/TTDDialogTabs.tsx
index 439f92844..fe4128106 100644
--- a/packages/excalidraw/components/TTDDialog/TTDDialogTabs.tsx
+++ b/packages/excalidraw/components/TTDDialog/TTDDialogTabs.tsx
@@ -1,8 +1,11 @@
 import * as RadixTabs from "@radix-ui/react-tabs";
-import type { ReactNode } from "react";
 import { useRef } from "react";
+
+import { isMemberOf } from "@excalidraw/common";
+
 import { useExcalidrawSetAppState } from "../App";
-import { isMemberOf } from "../../utils";
+
+import type { ReactNode } from "react";
 
 const TTDDialogTabs = (
   props: {
diff --git a/packages/excalidraw/components/TTDDialog/TTDDialogTrigger.tsx b/packages/excalidraw/components/TTDDialog/TTDDialogTrigger.tsx
index a73f31a68..833b659fe 100644
--- a/packages/excalidraw/components/TTDDialog/TTDDialogTrigger.tsx
+++ b/packages/excalidraw/components/TTDDialog/TTDDialogTrigger.tsx
@@ -1,11 +1,12 @@
-import type { JSX } from "react";
-import type { ReactNode } from "react";
-import { useTunnels } from "../../context/tunnels";
-import DropdownMenu from "../dropdownMenu/DropdownMenu";
-import { useExcalidrawSetAppState } from "../App";
-import { brainIcon } from "../icons";
-import { t } from "../../i18n";
 import { trackEvent } from "../../analytics";
+import { useTunnels } from "../../context/tunnels";
+import { t } from "../../i18n";
+import { useExcalidrawSetAppState } from "../App";
+import DropdownMenu from "../dropdownMenu/DropdownMenu";
+import { brainIcon } from "../icons";
+
+import type { ReactNode } from "react";
+import type { JSX } from "react";
 
 export const TTDDialogTrigger = ({
   children,
diff --git a/packages/excalidraw/components/TTDDialog/common.ts b/packages/excalidraw/components/TTDDialog/common.ts
index 4191126a4..2e59565cf 100644
--- a/packages/excalidraw/components/TTDDialog/common.ts
+++ b/packages/excalidraw/components/TTDDialog/common.ts
@@ -1,12 +1,16 @@
+import { DEFAULT_EXPORT_PADDING, EDITOR_LS_KEYS } from "@excalidraw/common";
+
 import type { MermaidConfig } from "@excalidraw/mermaid-to-excalidraw";
 import type { MermaidToExcalidrawResult } from "@excalidraw/mermaid-to-excalidraw/dist/interfaces";
-import { DEFAULT_EXPORT_PADDING, EDITOR_LS_KEYS } from "../../constants";
-import { convertToExcalidrawElements, exportToCanvas } from "../../index";
-import type { NonDeletedExcalidrawElement } from "../../element/types";
-import type { AppClassProperties, BinaryFiles } from "../../types";
-import { canvasToBlob } from "../../data/blob";
+
+import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
+
 import { EditorLocalStorage } from "../../data/EditorLocalStorage";
+import { canvasToBlob } from "../../data/blob";
 import { t } from "../../i18n";
+import { convertToExcalidrawElements, exportToCanvas } from "../../index";
+
+import type { AppClassProperties, BinaryFiles } from "../../types";
 
 const resetPreview = ({
   canvasRef,
diff --git a/packages/excalidraw/components/TextField.tsx b/packages/excalidraw/components/TextField.tsx
index c5bdc8260..d6bc315b1 100644
--- a/packages/excalidraw/components/TextField.tsx
+++ b/packages/excalidraw/components/TextField.tsx
@@ -1,4 +1,4 @@
-import type { KeyboardEvent } from "react";
+import clsx from "clsx";
 import {
   forwardRef,
   useRef,
@@ -6,12 +6,14 @@ import {
   useLayoutEffect,
   useState,
 } from "react";
-import clsx from "clsx";
 
-import "./TextField.scss";
 import { Button } from "./Button";
 import { eyeIcon, eyeClosedIcon } from "./icons";
 
+import "./TextField.scss";
+
+import type { KeyboardEvent } from "react";
+
 type TextFieldProps = {
   onChange?: (value: string) => void;
   onClick?: () => void;
diff --git a/packages/excalidraw/components/Toast.tsx b/packages/excalidraw/components/Toast.tsx
index d99c9f648..a7167c00f 100644
--- a/packages/excalidraw/components/Toast.tsx
+++ b/packages/excalidraw/components/Toast.tsx
@@ -1,9 +1,12 @@
-import type { CSSProperties } from "react";
 import { useCallback, useEffect, useRef } from "react";
+
 import { CloseIcon } from "./icons";
-import "./Toast.scss";
 import { ToolButton } from "./ToolButton";
 
+import "./Toast.scss";
+
+import type { CSSProperties } from "react";
+
 const DEFAULT_TOAST_TIMEOUT = 5000;
 
 export const Toast = ({
diff --git a/packages/excalidraw/components/ToolButton.tsx b/packages/excalidraw/components/ToolButton.tsx
index 09b0b6cf8..f833a6d1f 100644
--- a/packages/excalidraw/components/ToolButton.tsx
+++ b/packages/excalidraw/components/ToolButton.tsx
@@ -1,13 +1,18 @@
+import clsx from "clsx";
+import React, { useEffect, useRef, useState } from "react";
+
+import { isPromiseLike } from "@excalidraw/common";
+
+import type { PointerType } from "@excalidraw/element/types";
+
+import { AbortError } from "../errors";
+
 import "./ToolIcon.scss";
 
-import type { CSSProperties } from "react";
-import React, { useEffect, useRef, useState } from "react";
-import clsx from "clsx";
-import { useExcalidrawContainer } from "./App";
-import { AbortError } from "../errors";
 import Spinner from "./Spinner";
-import type { PointerType } from "../element/types";
-import { isPromiseLike } from "../utils";
+import { useExcalidrawContainer } from "./App";
+
+import type { CSSProperties } from "react";
 
 export type ToolButtonSize = "small" | "medium";
 
diff --git a/packages/excalidraw/components/Tooltip.tsx b/packages/excalidraw/components/Tooltip.tsx
index 38c04ef23..9c7c7ea0c 100644
--- a/packages/excalidraw/components/Tooltip.tsx
+++ b/packages/excalidraw/components/Tooltip.tsx
@@ -1,7 +1,7 @@
-import "./Tooltip.scss";
-
 import React, { useEffect } from "react";
 
+import "./Tooltip.scss";
+
 export const getTooltipDiv = () => {
   const existingDiv = document.querySelector<HTMLDivElement>(
     ".excalidraw-tooltip",
diff --git a/packages/excalidraw/components/Trans.test.tsx b/packages/excalidraw/components/Trans.test.tsx
index c331796bd..077fcb88c 100644
--- a/packages/excalidraw/components/Trans.test.tsx
+++ b/packages/excalidraw/components/Trans.test.tsx
@@ -1,10 +1,11 @@
 import { render } from "@testing-library/react";
 
+import { EditorJotaiProvider } from "../editor-jotai";
 import fallbackLangData from "../locales/en.json";
 
 import Trans from "./Trans";
+
 import type { TranslationKeys } from "../i18n";
-import { EditorJotaiProvider } from "../editor-jotai";
 
 describe("Test <Trans/>", () => {
   it("should translate the the strings correctly", () => {
diff --git a/packages/excalidraw/components/Trans.tsx b/packages/excalidraw/components/Trans.tsx
index 0cb0f78cb..7a6215c89 100644
--- a/packages/excalidraw/components/Trans.tsx
+++ b/packages/excalidraw/components/Trans.tsx
@@ -1,8 +1,9 @@
 import React from "react";
 
-import type { TranslationKeys } from "../i18n";
 import { useI18n } from "../i18n";
 
+import type { TranslationKeys } from "../i18n";
+
 // Used for splitting i18nKey into tokens in Trans component
 // Example:
 // "Please <link>click {{location}}</link> to continue.".split(SPLIT_REGEX).filter(Boolean)
diff --git a/packages/excalidraw/components/UserList.scss b/packages/excalidraw/components/UserList.scss
index fdcadef7e..025f4d16e 100644
--- a/packages/excalidraw/components/UserList.scss
+++ b/packages/excalidraw/components/UserList.scss
@@ -1,4 +1,4 @@
-@import "../css/variables.module";
+@import "../css/variables.module.scss";
 
 .excalidraw {
   --avatar-size: 1.75rem;
diff --git a/packages/excalidraw/components/UserList.tsx b/packages/excalidraw/components/UserList.tsx
index 9fbfc1aed..811289329 100644
--- a/packages/excalidraw/components/UserList.tsx
+++ b/packages/excalidraw/components/UserList.tsx
@@ -1,20 +1,23 @@
-import "./UserList.scss";
-
-import React, { useLayoutEffect } from "react";
-import clsx from "clsx";
-import type { Collaborator, SocketId } from "../types";
-import { Tooltip } from "./Tooltip";
-import { useExcalidrawActionManager } from "./App";
-import type { ActionManager } from "../actions/manager";
-
 import * as Popover from "@radix-ui/react-popover";
+import clsx from "clsx";
+import React, { useLayoutEffect } from "react";
+
+import { supportsResizeObserver, isShallowEqual } from "@excalidraw/common";
+
+import type { MarkRequired } from "@excalidraw/common/utility-types";
+
+import { t } from "../i18n";
+
+import { useExcalidrawActionManager } from "./App";
 import { Island } from "./Island";
 import { QuickSearch } from "./QuickSearch";
-import { t } from "../i18n";
-import { isShallowEqual } from "../utils";
-import { supportsResizeObserver } from "../constants";
-import type { MarkRequired } from "../utility-types";
 import { ScrollableList } from "./ScrollableList";
+import { Tooltip } from "./Tooltip";
+
+import "./UserList.scss";
+
+import type { ActionManager } from "../actions/manager";
+import type { Collaborator, SocketId } from "../types";
 
 export type GoToCollaboratorComponentProps = {
   socketId: SocketId;
diff --git a/packages/excalidraw/components/canvases/InteractiveCanvas.tsx b/packages/excalidraw/components/canvases/InteractiveCanvas.tsx
index 03ae0f6b6..1f4f57433 100644
--- a/packages/excalidraw/components/canvases/InteractiveCanvas.tsx
+++ b/packages/excalidraw/components/canvases/InteractiveCanvas.tsx
@@ -1,20 +1,27 @@
 import React, { useEffect, useRef } from "react";
-import { isShallowEqual, sceneCoordsToViewportCoords } from "../../utils";
-import { CURSOR_TYPE } from "../../constants";
+
+import {
+  CURSOR_TYPE,
+  isShallowEqual,
+  sceneCoordsToViewportCoords,
+} from "@excalidraw/common";
+
+import type {
+  NonDeletedExcalidrawElement,
+  NonDeletedSceneElementsMap,
+} from "@excalidraw/element/types";
+
 import { t } from "../../i18n";
-import type { DOMAttributes } from "react";
-import type { AppState, Device, InteractiveCanvasAppState } from "../../types";
+import { isRenderThrottlingEnabled } from "../../reactUtils";
+import { renderInteractiveScene } from "../../renderer/interactiveScene";
+
 import type {
   InteractiveCanvasRenderConfig,
   RenderableElementsMap,
   RenderInteractiveSceneCallback,
 } from "../../scene/types";
-import type {
-  NonDeletedExcalidrawElement,
-  NonDeletedSceneElementsMap,
-} from "../../element/types";
-import { isRenderThrottlingEnabled } from "../../reactUtils";
-import { renderInteractiveScene } from "../../renderer/interactiveScene";
+import type { AppState, Device, InteractiveCanvasAppState } from "../../types";
+import type { DOMAttributes } from "react";
 
 type InteractiveCanvasProps = {
   containerRef: React.RefObject<HTMLDivElement | null>;
diff --git a/packages/excalidraw/components/canvases/NewElementCanvas.tsx b/packages/excalidraw/components/canvases/NewElementCanvas.tsx
index 181567110..4310f1bd1 100644
--- a/packages/excalidraw/components/canvases/NewElementCanvas.tsx
+++ b/packages/excalidraw/components/canvases/NewElementCanvas.tsx
@@ -1,13 +1,16 @@
 import { useEffect, useRef } from "react";
-import type { NonDeletedSceneElementsMap } from "../../element/types";
-import type { AppState } from "../../types";
+
+import type { NonDeletedSceneElementsMap } from "@excalidraw/element/types";
+
+import { isRenderThrottlingEnabled } from "../../reactUtils";
+import { renderNewElementScene } from "../../renderer/renderNewElementScene";
+
 import type {
   RenderableElementsMap,
   StaticCanvasRenderConfig,
 } from "../../scene/types";
+import type { AppState } from "../../types";
 import type { RoughCanvas } from "roughjs/bin/canvas";
-import { renderNewElementScene } from "../../renderer/renderNewElementScene";
-import { isRenderThrottlingEnabled } from "../../reactUtils";
 
 interface NewElementCanvasProps {
   appState: AppState;
diff --git a/packages/excalidraw/components/canvases/StaticCanvas.tsx b/packages/excalidraw/components/canvases/StaticCanvas.tsx
index 9185bdd5c..b70c8ace6 100644
--- a/packages/excalidraw/components/canvases/StaticCanvas.tsx
+++ b/packages/excalidraw/components/canvases/StaticCanvas.tsx
@@ -1,17 +1,21 @@
 import React, { useEffect, useRef } from "react";
-import type { RoughCanvas } from "roughjs/bin/canvas";
+
+import { isShallowEqual } from "@excalidraw/common";
+
+import type {
+  NonDeletedExcalidrawElement,
+  NonDeletedSceneElementsMap,
+} from "@excalidraw/element/types";
+
+import { isRenderThrottlingEnabled } from "../../reactUtils";
 import { renderStaticScene } from "../../renderer/staticScene";
-import { isShallowEqual } from "../../utils";
-import type { AppState, StaticCanvasAppState } from "../../types";
+
 import type {
   RenderableElementsMap,
   StaticCanvasRenderConfig,
 } from "../../scene/types";
-import type {
-  NonDeletedExcalidrawElement,
-  NonDeletedSceneElementsMap,
-} from "../../element/types";
-import { isRenderThrottlingEnabled } from "../../reactUtils";
+import type { AppState, StaticCanvasAppState } from "../../types";
+import type { RoughCanvas } from "roughjs/bin/canvas";
 
 type StaticCanvasProps = {
   canvas: HTMLCanvasElement;
diff --git a/packages/excalidraw/components/dropdownMenu/DropdownMenu.test.tsx b/packages/excalidraw/components/dropdownMenu/DropdownMenu.test.tsx
index 0c8deec87..5be65b100 100644
--- a/packages/excalidraw/components/dropdownMenu/DropdownMenu.test.tsx
+++ b/packages/excalidraw/components/dropdownMenu/DropdownMenu.test.tsx
@@ -1,6 +1,8 @@
 import React from "react";
+
+import { KEYS } from "@excalidraw/common";
+
 import { Excalidraw } from "../../index";
-import { KEYS } from "../../keys";
 import { Keyboard } from "../../tests/helpers/ui";
 import {
   render,
diff --git a/packages/excalidraw/components/dropdownMenu/DropdownMenu.tsx b/packages/excalidraw/components/dropdownMenu/DropdownMenu.tsx
index 8f4ce435b..e1412e20b 100644
--- a/packages/excalidraw/components/dropdownMenu/DropdownMenu.tsx
+++ b/packages/excalidraw/components/dropdownMenu/DropdownMenu.tsx
@@ -1,11 +1,12 @@
 import React from "react";
-import DropdownMenuTrigger from "./DropdownMenuTrigger";
-import DropdownMenuItem from "./DropdownMenuItem";
-import MenuSeparator from "./DropdownMenuSeparator";
-import DropdownMenuGroup from "./DropdownMenuGroup";
+
 import DropdownMenuContent from "./DropdownMenuContent";
-import DropdownMenuItemLink from "./DropdownMenuItemLink";
+import DropdownMenuGroup from "./DropdownMenuGroup";
+import DropdownMenuItem from "./DropdownMenuItem";
 import DropdownMenuItemCustom from "./DropdownMenuItemCustom";
+import DropdownMenuItemLink from "./DropdownMenuItemLink";
+import MenuSeparator from "./DropdownMenuSeparator";
+import DropdownMenuTrigger from "./DropdownMenuTrigger";
 import {
   getMenuContentComponent,
   getMenuTriggerComponent,
diff --git a/packages/excalidraw/components/dropdownMenu/DropdownMenuContent.tsx b/packages/excalidraw/components/dropdownMenu/DropdownMenuContent.tsx
index a203124d6..de6fc31c1 100644
--- a/packages/excalidraw/components/dropdownMenu/DropdownMenuContent.tsx
+++ b/packages/excalidraw/components/dropdownMenu/DropdownMenuContent.tsx
@@ -1,13 +1,15 @@
-import { Island } from "../Island";
-import { useDevice } from "../App";
 import clsx from "clsx";
-import Stack from "../Stack";
 import React, { useEffect, useRef } from "react";
-import { DropdownMenuContentPropsContext } from "./common";
+
+import { EVENT, KEYS } from "@excalidraw/common";
+
 import { useOutsideClick } from "../../hooks/useOutsideClick";
-import { KEYS } from "../../keys";
-import { EVENT } from "../../constants";
 import { useStable } from "../../hooks/useStable";
+import { useDevice } from "../App";
+import { Island } from "../Island";
+import Stack from "../Stack";
+
+import { DropdownMenuContentPropsContext } from "./common";
 
 const MenuContent = ({
   children,
diff --git a/packages/excalidraw/components/dropdownMenu/DropdownMenuItem.tsx b/packages/excalidraw/components/dropdownMenu/DropdownMenuItem.tsx
index 1ff53f8af..59c5dd2f8 100644
--- a/packages/excalidraw/components/dropdownMenu/DropdownMenuItem.tsx
+++ b/packages/excalidraw/components/dropdownMenu/DropdownMenuItem.tsx
@@ -1,13 +1,18 @@
-import type { JSX } from "react";
 import React, { useEffect, useRef } from "react";
+
+import { THEME } from "@excalidraw/common";
+
+import type { ValueOf } from "@excalidraw/common/utility-types";
+
+import { useExcalidrawAppState } from "../App";
+
+import MenuItemContent from "./DropdownMenuItemContent";
 import {
   getDropdownMenuItemClassName,
   useHandleDropdownMenuItemClick,
 } from "./common";
-import MenuItemContent from "./DropdownMenuItemContent";
-import { useExcalidrawAppState } from "../App";
-import { THEME } from "../../constants";
-import type { ValueOf } from "../../utility-types";
+
+import type { JSX } from "react";
 
 const DropdownMenuItem = ({
   icon,
diff --git a/packages/excalidraw/components/dropdownMenu/DropdownMenuItemContent.tsx b/packages/excalidraw/components/dropdownMenu/DropdownMenuItemContent.tsx
index 000b8c344..b2f9e7e0a 100644
--- a/packages/excalidraw/components/dropdownMenu/DropdownMenuItemContent.tsx
+++ b/packages/excalidraw/components/dropdownMenu/DropdownMenuItemContent.tsx
@@ -1,6 +1,7 @@
-import type { JSX } from "react";
 import { useDevice } from "../App";
 
+import type { JSX } from "react";
+
 const MenuItemContent = ({
   textStyle,
   icon,
diff --git a/packages/excalidraw/components/dropdownMenu/DropdownMenuItemLink.tsx b/packages/excalidraw/components/dropdownMenu/DropdownMenuItemLink.tsx
index 2dbee7584..1457f5ae7 100644
--- a/packages/excalidraw/components/dropdownMenu/DropdownMenuItemLink.tsx
+++ b/packages/excalidraw/components/dropdownMenu/DropdownMenuItemLink.tsx
@@ -1,11 +1,13 @@
-import MenuItemContent from "./DropdownMenuItemContent";
-import type { JSX } from "react";
 import React from "react";
+
+import MenuItemContent from "./DropdownMenuItemContent";
 import {
   getDropdownMenuItemClassName,
   useHandleDropdownMenuItemClick,
 } from "./common";
 
+import type { JSX } from "react";
+
 const DropdownMenuItemLink = ({
   icon,
   shortcut,
diff --git a/packages/excalidraw/components/dropdownMenu/DropdownMenuTrigger.tsx b/packages/excalidraw/components/dropdownMenu/DropdownMenuTrigger.tsx
index e7369ba57..a7301fb44 100644
--- a/packages/excalidraw/components/dropdownMenu/DropdownMenuTrigger.tsx
+++ b/packages/excalidraw/components/dropdownMenu/DropdownMenuTrigger.tsx
@@ -1,4 +1,5 @@
 import clsx from "clsx";
+
 import { useDevice } from "../App";
 
 const MenuTrigger = ({
diff --git a/packages/excalidraw/components/dropdownMenu/common.ts b/packages/excalidraw/components/dropdownMenu/common.ts
index a2a46fc93..feca5c406 100644
--- a/packages/excalidraw/components/dropdownMenu/common.ts
+++ b/packages/excalidraw/components/dropdownMenu/common.ts
@@ -1,6 +1,6 @@
 import React, { useContext } from "react";
-import { EVENT } from "../../constants";
-import { composeEventHandlers } from "../../utils";
+
+import { EVENT, composeEventHandlers } from "@excalidraw/common";
 
 export const DropdownMenuContentPropsContext = React.createContext<{
   onSelect?: (event: Event) => void;
diff --git a/packages/excalidraw/components/footer/Footer.tsx b/packages/excalidraw/components/footer/Footer.tsx
index ccbe9eaee..427628e7c 100644
--- a/packages/excalidraw/components/footer/Footer.tsx
+++ b/packages/excalidraw/components/footer/Footer.tsx
@@ -1,6 +1,7 @@
 import clsx from "clsx";
+
 import { actionShortcuts } from "../../actions";
-import type { ActionManager } from "../../actions/manager";
+import { useTunnels } from "../../context/tunnels";
 import {
   ExitZenModeAction,
   FinalizeAction,
@@ -8,10 +9,11 @@ import {
   ZoomActions,
 } from "../Actions";
 import { useDevice } from "../App";
-import { useTunnels } from "../../context/tunnels";
 import { HelpButton } from "../HelpButton";
 import { Section } from "../Section";
 import Stack from "../Stack";
+
+import type { ActionManager } from "../../actions/manager";
 import type { UIAppState } from "../../types";
 
 const Footer = ({
diff --git a/packages/excalidraw/components/footer/FooterCenter.tsx b/packages/excalidraw/components/footer/FooterCenter.tsx
index 55a0fb998..6a44581de 100644
--- a/packages/excalidraw/components/footer/FooterCenter.tsx
+++ b/packages/excalidraw/components/footer/FooterCenter.tsx
@@ -1,8 +1,10 @@
 import clsx from "clsx";
+
 import { useTunnels } from "../../context/tunnels";
-import "./FooterCenter.scss";
 import { useUIAppState } from "../../context/ui-appState";
 
+import "./FooterCenter.scss";
+
 const FooterCenter = ({ children }: { children?: React.ReactNode }) => {
   const { FooterCenterTunnel } = useTunnels();
   const appState = useUIAppState();
diff --git a/packages/excalidraw/components/hoc/withInternalFallback.test.tsx b/packages/excalidraw/components/hoc/withInternalFallback.test.tsx
index 554313377..1f30a64c4 100644
--- a/packages/excalidraw/components/hoc/withInternalFallback.test.tsx
+++ b/packages/excalidraw/components/hoc/withInternalFallback.test.tsx
@@ -1,6 +1,7 @@
 import React from "react";
-import { render, queryAllByTestId } from "../../tests/test-utils";
+
 import { Excalidraw, MainMenu } from "../../index";
+import { render, queryAllByTestId } from "../../tests/test-utils";
 
 describe("Test internal component fallback rendering", () => {
   it("should render only one menu per excalidraw instance (custom menu first scenario)", async () => {
diff --git a/packages/excalidraw/components/hoc/withInternalFallback.tsx b/packages/excalidraw/components/hoc/withInternalFallback.tsx
index 5906b30f5..298f58dd9 100644
--- a/packages/excalidraw/components/hoc/withInternalFallback.tsx
+++ b/packages/excalidraw/components/hoc/withInternalFallback.tsx
@@ -1,4 +1,5 @@
 import React, { useLayoutEffect, useRef } from "react";
+
 import { useTunnels } from "../../context/tunnels";
 import { atom } from "../../editor-jotai";
 
diff --git a/packages/excalidraw/components/hyperlink/Hyperlink.tsx b/packages/excalidraw/components/hyperlink/Hyperlink.tsx
index 4d3dce640..9a386a163 100644
--- a/packages/excalidraw/components/hyperlink/Hyperlink.tsx
+++ b/packages/excalidraw/components/hyperlink/Hyperlink.tsx
@@ -1,20 +1,5 @@
-import type { AppState, ExcalidrawProps, UIAppState } from "../../types";
-import {
-  sceneCoordsToViewportCoords,
-  viewportCoordsToSceneCoords,
-  wrapEvent,
-} from "../../utils";
-import { getEmbedLink, embeddableURLValidator } from "../../element/embeddable";
-import { mutateElement } from "../../element/mutateElement";
-import type {
-  ElementsMap,
-  ExcalidrawEmbeddableElement,
-  NonDeletedExcalidrawElement,
-} from "../../element/types";
-
-import { ToolButton } from "../ToolButton";
-import { FreedrawIcon, TrashIcon, elementLinkIcon } from "../icons";
-import { t } from "../../i18n";
+import { pointFrom, type GlobalPoint } from "@excalidraw/math";
+import clsx from "clsx";
 import {
   useCallback,
   useEffect,
@@ -22,23 +7,54 @@ import {
   useRef,
   useState,
 } from "react";
-import clsx from "clsx";
-import { KEYS } from "../../keys";
-import { EVENT, HYPERLINK_TOOLTIP_DELAY } from "../../constants";
-import { getElementAbsoluteCoords } from "../../element/bounds";
-import { getTooltipDiv, updateTooltipPosition } from "../../components/Tooltip";
-import { getSelectedElements } from "../../scene";
-import { hitElementBoundingBox } from "../../element/collision";
-import { isLocalLink, normalizeLink } from "../../data/url";
+
+import { EVENT, HYPERLINK_TOOLTIP_DELAY, KEYS } from "@excalidraw/common";
+
+import { getElementAbsoluteCoords } from "@excalidraw/element/bounds";
+
+import { hitElementBoundingBox } from "@excalidraw/element/collision";
+
+import { isElementLink } from "@excalidraw/element/elementLink";
+
+import {
+  getEmbedLink,
+  embeddableURLValidator,
+} from "@excalidraw/element/embeddable";
+
+import { mutateElement } from "@excalidraw/element/mutateElement";
+
+import {
+  sceneCoordsToViewportCoords,
+  viewportCoordsToSceneCoords,
+  wrapEvent,
+  isLocalLink,
+  normalizeLink,
+} from "@excalidraw/common";
+
+import { isEmbeddableElement } from "@excalidraw/element/typeChecks";
+
+import type {
+  ElementsMap,
+  ExcalidrawEmbeddableElement,
+  NonDeletedExcalidrawElement,
+} from "@excalidraw/element/types";
+
 import { trackEvent } from "../../analytics";
+import { getTooltipDiv, updateTooltipPosition } from "../../components/Tooltip";
+
+import { t } from "../../i18n";
+
 import { useAppProps, useDevice, useExcalidrawAppState } from "../App";
-import { isEmbeddableElement } from "../../element/typeChecks";
+import { ToolButton } from "../ToolButton";
+import { FreedrawIcon, TrashIcon, elementLinkIcon } from "../icons";
+import { getSelectedElements } from "../../scene";
+
 import { getLinkHandleFromCoords } from "./helpers";
-import { pointFrom, type GlobalPoint } from "@excalidraw/math";
-import { isElementLink } from "../../element/elementLink";
 
 import "./Hyperlink.scss";
 
+import type { AppState, ExcalidrawProps, UIAppState } from "../../types";
+
 const POPUP_WIDTH = 380;
 const POPUP_HEIGHT = 42;
 const POPUP_PADDING = 5;
diff --git a/packages/excalidraw/components/hyperlink/helpers.ts b/packages/excalidraw/components/hyperlink/helpers.ts
index 75c5dad9c..d1345db98 100644
--- a/packages/excalidraw/components/hyperlink/helpers.ts
+++ b/packages/excalidraw/components/hyperlink/helpers.ts
@@ -1,14 +1,19 @@
-import type { GlobalPoint, Radians } from "@excalidraw/math";
 import { pointFrom, pointRotateRads } from "@excalidraw/math";
-import { MIME_TYPES } from "../../constants";
-import type { Bounds } from "../../element/bounds";
-import { getElementAbsoluteCoords } from "../../element/bounds";
-import { hitElementBoundingBox } from "../../element/collision";
+
+import { MIME_TYPES } from "@excalidraw/common";
+import { getElementAbsoluteCoords } from "@excalidraw/element/bounds";
+import { hitElementBoundingBox } from "@excalidraw/element/collision";
+
+import { DEFAULT_LINK_SIZE } from "@excalidraw/element/renderElement";
+
+import type { GlobalPoint, Radians } from "@excalidraw/math";
+
+import type { Bounds } from "@excalidraw/element/bounds";
 import type {
   ElementsMap,
   NonDeletedExcalidrawElement,
-} from "../../element/types";
-import { DEFAULT_LINK_SIZE } from "../../renderer/renderElement";
+} from "@excalidraw/element/types";
+
 import type { AppState, UIAppState } from "../../types";
 
 export const EXTERNAL_LINK_IMG = document.createElement("img");
diff --git a/packages/excalidraw/components/icons.tsx b/packages/excalidraw/components/icons.tsx
index 073d7a9f7..c6d7f9473 100644
--- a/packages/excalidraw/components/icons.tsx
+++ b/packages/excalidraw/components/icons.tsx
@@ -6,12 +6,13 @@
 // Note: when adding new icons, review https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/RTL_Guidelines
 // to determine whether or not the icons should be mirrored in right-to-left languages.
 
+import clsx from "clsx";
+import oc from "open-color";
 import React from "react";
 
-import oc from "open-color";
-import clsx from "clsx";
-import type { Theme } from "../element/types";
-import { THEME } from "../constants";
+import { THEME } from "@excalidraw/common";
+
+import type { Theme } from "@excalidraw/element/types";
 
 export const iconFillColor = (theme: Theme) => "var(--icon-fill-color)";
 
diff --git a/packages/excalidraw/components/live-collaboration/LiveCollaborationTrigger.tsx b/packages/excalidraw/components/live-collaboration/LiveCollaborationTrigger.tsx
index a22bc523a..1aa187167 100644
--- a/packages/excalidraw/components/live-collaboration/LiveCollaborationTrigger.tsx
+++ b/packages/excalidraw/components/live-collaboration/LiveCollaborationTrigger.tsx
@@ -1,12 +1,12 @@
-import { t } from "../../i18n";
-import { share } from "../icons";
-import { Button } from "../Button";
-
 import clsx from "clsx";
 
-import "./LiveCollaborationTrigger.scss";
+import { t } from "../../i18n";
+import { Button } from "../Button";
+import { share } from "../icons";
 import { useUIAppState } from "../../context/ui-appState";
 
+import "./LiveCollaborationTrigger.scss";
+
 const LiveCollaborationTrigger = ({
   isCollaborating,
   onSelect,
diff --git a/packages/excalidraw/components/main-menu/DefaultItems.tsx b/packages/excalidraw/components/main-menu/DefaultItems.tsx
index 632ea4ffa..29a2761a1 100644
--- a/packages/excalidraw/components/main-menu/DefaultItems.tsx
+++ b/packages/excalidraw/components/main-menu/DefaultItems.tsx
@@ -1,11 +1,35 @@
+import clsx from "clsx";
+
+import { THEME } from "@excalidraw/common";
+
+import type { Theme } from "@excalidraw/element/types";
+
+import {
+  actionClearCanvas,
+  actionLoadScene,
+  actionSaveToActiveFile,
+  actionShortcuts,
+  actionToggleSearchMenu,
+  actionToggleTheme,
+} from "../../actions";
 import { getShortcutFromShortcutName } from "../../actions/shortcuts";
+import { trackEvent } from "../../analytics";
+import { useUIAppState } from "../../context/ui-appState";
+import { useSetAtom } from "../../editor-jotai";
 import { useI18n } from "../../i18n";
+import { activeConfirmDialogAtom } from "../ActiveConfirmDialog";
 import {
   useExcalidrawSetAppState,
   useExcalidrawActionManager,
   useExcalidrawElements,
   useAppProps,
 } from "../App";
+import { openConfirmModal } from "../OverwriteConfirm/OverwriteConfirmState";
+import Trans from "../Trans";
+import DropdownMenuItem from "../dropdownMenu/DropdownMenuItem";
+import DropdownMenuItemContentRadio from "../dropdownMenu/DropdownMenuItemContentRadio";
+import DropdownMenuItemLink from "../dropdownMenu/DropdownMenuItemLink";
+import { GithubIcon, DiscordIcon, XBrandIcon } from "../icons";
 import {
   boltIcon,
   DeviceDesktopIcon,
@@ -20,27 +44,7 @@ import {
   TrashIcon,
   usersIcon,
 } from "../icons";
-import { GithubIcon, DiscordIcon, XBrandIcon } from "../icons";
-import DropdownMenuItem from "../dropdownMenu/DropdownMenuItem";
-import DropdownMenuItemLink from "../dropdownMenu/DropdownMenuItemLink";
-import {
-  actionClearCanvas,
-  actionLoadScene,
-  actionSaveToActiveFile,
-  actionShortcuts,
-  actionToggleSearchMenu,
-  actionToggleTheme,
-} from "../../actions";
-import clsx from "clsx";
-import { activeConfirmDialogAtom } from "../ActiveConfirmDialog";
-import { useSetAtom } from "../../editor-jotai";
-import { useUIAppState } from "../../context/ui-appState";
-import { openConfirmModal } from "../OverwriteConfirm/OverwriteConfirmState";
-import Trans from "../Trans";
-import DropdownMenuItemContentRadio from "../dropdownMenu/DropdownMenuItemContentRadio";
-import { THEME } from "../../constants";
-import type { Theme } from "../../element/types";
-import { trackEvent } from "../../analytics";
+
 import "./DefaultItems.scss";
 
 export const LoadScene = () => {
diff --git a/packages/excalidraw/components/main-menu/MainMenu.tsx b/packages/excalidraw/components/main-menu/MainMenu.tsx
index 07afd3c1d..7c2b5fb4a 100644
--- a/packages/excalidraw/components/main-menu/MainMenu.tsx
+++ b/packages/excalidraw/components/main-menu/MainMenu.tsx
@@ -1,16 +1,17 @@
 import React from "react";
-import { useDevice, useExcalidrawSetAppState } from "../App";
-import DropdownMenu from "../dropdownMenu/DropdownMenu";
 
-import * as DefaultItems from "./DefaultItems";
+import { composeEventHandlers } from "@excalidraw/common";
 
-import { UserList } from "../UserList";
-import { t } from "../../i18n";
-import { HamburgerMenuIcon } from "../icons";
-import { withInternalFallback } from "../hoc/withInternalFallback";
-import { composeEventHandlers } from "../../utils";
 import { useTunnels } from "../../context/tunnels";
 import { useUIAppState } from "../../context/ui-appState";
+import { t } from "../../i18n";
+import { useDevice, useExcalidrawSetAppState } from "../App";
+import { UserList } from "../UserList";
+import DropdownMenu from "../dropdownMenu/DropdownMenu";
+import { withInternalFallback } from "../hoc/withInternalFallback";
+import { HamburgerMenuIcon } from "../icons";
+
+import * as DefaultItems from "./DefaultItems";
 
 const MainMenu = Object.assign(
   withInternalFallback(
diff --git a/packages/excalidraw/components/shapes.tsx b/packages/excalidraw/components/shapes.tsx
new file mode 100644
index 000000000..7411a9e25
--- /dev/null
+++ b/packages/excalidraw/components/shapes.tsx
@@ -0,0 +1,100 @@
+import { KEYS } from "@excalidraw/common";
+
+import {
+  SelectionIcon,
+  RectangleIcon,
+  DiamondIcon,
+  EllipseIcon,
+  ArrowIcon,
+  LineIcon,
+  FreedrawIcon,
+  TextIcon,
+  ImageIcon,
+  EraserIcon,
+} from "./icons";
+
+export const SHAPES = [
+  {
+    icon: SelectionIcon,
+    value: "selection",
+    key: KEYS.V,
+    numericKey: KEYS["1"],
+    fillable: true,
+  },
+  {
+    icon: RectangleIcon,
+    value: "rectangle",
+    key: KEYS.R,
+    numericKey: KEYS["2"],
+    fillable: true,
+  },
+  {
+    icon: DiamondIcon,
+    value: "diamond",
+    key: KEYS.D,
+    numericKey: KEYS["3"],
+    fillable: true,
+  },
+  {
+    icon: EllipseIcon,
+    value: "ellipse",
+    key: KEYS.O,
+    numericKey: KEYS["4"],
+    fillable: true,
+  },
+  {
+    icon: ArrowIcon,
+    value: "arrow",
+    key: KEYS.A,
+    numericKey: KEYS["5"],
+    fillable: true,
+  },
+  {
+    icon: LineIcon,
+    value: "line",
+    key: KEYS.L,
+    numericKey: KEYS["6"],
+    fillable: true,
+  },
+  {
+    icon: FreedrawIcon,
+    value: "freedraw",
+    key: [KEYS.P, KEYS.X],
+    numericKey: KEYS["7"],
+    fillable: false,
+  },
+  {
+    icon: TextIcon,
+    value: "text",
+    key: KEYS.T,
+    numericKey: KEYS["8"],
+    fillable: false,
+  },
+  {
+    icon: ImageIcon,
+    value: "image",
+    key: null,
+    numericKey: KEYS["9"],
+    fillable: false,
+  },
+  {
+    icon: EraserIcon,
+    value: "eraser",
+    key: KEYS.E,
+    numericKey: KEYS["0"],
+    fillable: false,
+  },
+] as const;
+
+export const findShapeByKey = (key: string) => {
+  const shape = SHAPES.find((shape, index) => {
+    return (
+      (shape.numericKey != null && key === shape.numericKey.toString()) ||
+      (shape.key &&
+        (typeof shape.key === "string"
+          ? shape.key === key
+          : (shape.key as readonly string[]).includes(key)))
+    );
+  });
+  return shape?.value || null;
+};
diff --git a/packages/excalidraw/components/welcome-screen/WelcomeScreen.Center.tsx b/packages/excalidraw/components/welcome-screen/WelcomeScreen.Center.tsx
index 4faa41bf7..bd9b9e55b 100644
--- a/packages/excalidraw/components/welcome-screen/WelcomeScreen.Center.tsx
+++ b/packages/excalidraw/components/welcome-screen/WelcomeScreen.Center.tsx
@@ -1,12 +1,13 @@
-import type { JSX } from "react";
 import { actionLoadScene, actionShortcuts } from "../../actions";
 import { getShortcutFromShortcutName } from "../../actions/shortcuts";
+import { useTunnels } from "../../context/tunnels";
+import { useUIAppState } from "../../context/ui-appState";
 import { t, useI18n } from "../../i18n";
 import { useDevice, useExcalidrawActionManager } from "../App";
-import { useTunnels } from "../../context/tunnels";
-import { HelpIcon, LoadIcon, usersIcon } from "../icons";
-import { useUIAppState } from "../../context/ui-appState";
 import { ExcalidrawLogo } from "../ExcalidrawLogo";
+import { HelpIcon, LoadIcon, usersIcon } from "../icons";
+
+import type { JSX } from "react";
 
 const WelcomeScreenMenuItemContent = ({
   icon,
diff --git a/packages/excalidraw/components/welcome-screen/WelcomeScreen.Hints.tsx b/packages/excalidraw/components/welcome-screen/WelcomeScreen.Hints.tsx
index 896f4014e..e47a5a1d3 100644
--- a/packages/excalidraw/components/welcome-screen/WelcomeScreen.Hints.tsx
+++ b/packages/excalidraw/components/welcome-screen/WelcomeScreen.Hints.tsx
@@ -1,5 +1,5 @@
-import { t } from "../../i18n";
 import { useTunnels } from "../../context/tunnels";
+import { t } from "../../i18n";
 import {
   WelcomeScreenHelpArrow,
   WelcomeScreenMenuArrow,
diff --git a/packages/excalidraw/context/tunnels.ts b/packages/excalidraw/context/tunnels.ts
index 73b85ba6a..370a0f2bb 100644
--- a/packages/excalidraw/context/tunnels.ts
+++ b/packages/excalidraw/context/tunnels.ts
@@ -1,6 +1,6 @@
+import { createIsolation } from "jotai-scope";
 import React from "react";
 import tunnel from "tunnel-rat";
-import { createIsolation } from "jotai-scope";
 
 export type Tunnel = ReturnType<typeof tunnel>;
 
diff --git a/packages/excalidraw/context/ui-appState.ts b/packages/excalidraw/context/ui-appState.ts
index f94ce28c3..174b6e89c 100644
--- a/packages/excalidraw/context/ui-appState.ts
+++ b/packages/excalidraw/context/ui-appState.ts
@@ -1,4 +1,5 @@
 import React from "react";
+
 import type { UIAppState } from "../types";
 
 export const UIAppStateContext = React.createContext<UIAppState>(null!);
diff --git a/packages/excalidraw/cursor.ts b/packages/excalidraw/cursor.ts
index 759b7a4ae..7125ccedf 100644
--- a/packages/excalidraw/cursor.ts
+++ b/packages/excalidraw/cursor.ts
@@ -1,8 +1,11 @@
-import { CURSOR_TYPE, MIME_TYPES, THEME } from "./constants";
 import OpenColor from "open-color";
-import type { AppState, DataURL } from "./types";
+
+import { CURSOR_TYPE, MIME_TYPES, THEME } from "@excalidraw/common";
+
 import { isHandToolActive, isEraserActive } from "./appState";
 
+import type { AppState, DataURL } from "./types";
+
 const laserPointerCursorSVG_tag = `<svg viewBox="0 0 24 24" stroke-width="1" width="28" height="28" xmlns="http://www.w3.org/2000/svg">`;
 const laserPointerCursorBackgroundSVG = `<path d="M6.164 11.755a5.314 5.314 0 0 1-4.932-5.298 5.314 5.314 0 0 1 5.311-5.311 5.314 5.314 0 0 1 5.307 5.113l8.773 8.773a3.322 3.322 0 0 1 0 4.696l-.895.895a3.322 3.322 0 0 1-4.696 0l-8.868-8.868Z" style="fill:#fff"/>`;
 const laserPointerCursorIconSVG = `<path stroke="#1b1b1f" fill="#fff" d="m7.868 11.113 7.773 7.774a2.359 2.359 0 0 0 1.667.691 2.368 2.368 0 0 0 2.357-2.358c0-.625-.248-1.225-.69-1.667L11.201 7.78 9.558 9.469l-1.69 1.643v.001Zm10.273 3.606-3.333 3.333m-3.25-6.583 2 2m-7-7 3 3M3.664 3.625l1 1M2.529 6.922l1.407-.144m5.735-2.932-1.118.866M4.285 9.823l.758-1.194m1.863-6.207-.13 1.408"/>`;
diff --git a/packages/excalidraw/data/EditorLocalStorage.ts b/packages/excalidraw/data/EditorLocalStorage.ts
index bb6eeb478..18d305315 100644
--- a/packages/excalidraw/data/EditorLocalStorage.ts
+++ b/packages/excalidraw/data/EditorLocalStorage.ts
@@ -1,4 +1,5 @@
-import type { EDITOR_LS_KEYS } from "../constants";
+import type { EDITOR_LS_KEYS } from "@excalidraw/common";
+
 import type { JSONValue } from "../types";
 
 export class EditorLocalStorage {
diff --git a/packages/excalidraw/data/blob.ts b/packages/excalidraw/data/blob.ts
index 2293f860c..3e5db7c29 100644
--- a/packages/excalidraw/data/blob.ts
+++ b/packages/excalidraw/data/blob.ts
@@ -1,19 +1,31 @@
 import { nanoid } from "nanoid";
+
+import {
+  IMAGE_MIME_TYPES,
+  MIME_TYPES,
+  bytesToHexString,
+  isPromiseLike,
+} from "@excalidraw/common";
+
+import { clearElementsForExport } from "@excalidraw/element";
+
+import type { ValueOf } from "@excalidraw/common/utility-types";
+import type { ExcalidrawElement, FileId } from "@excalidraw/element/types";
+
 import { cleanAppStateForExport } from "../appState";
-import { IMAGE_MIME_TYPES, MIME_TYPES } from "../constants";
-import { clearElementsForExport } from "../element";
-import type { ExcalidrawElement, FileId } from "../element/types";
+
 import { CanvasError, ImageSceneDataError } from "../errors";
 import { calculateScrollCenter } from "../scene";
 import { decodeSvgBase64Payload } from "../scene/export";
-import type { AppState, DataURL, LibraryItem } from "../types";
-import type { ValueOf } from "../utility-types";
-import { bytesToHexString, isPromiseLike } from "../utils";
+
 import { base64ToString, stringToBase64, toByteString } from "./encode";
-import type { FileSystemHandle } from "./filesystem";
 import { nativeFileSystemSupported } from "./filesystem";
 import { isValidExcalidrawData, isValidLibrary } from "./json";
 import { restore, restoreLibraryItems } from "./restore";
+
+import type { AppState, DataURL, LibraryItem } from "../types";
+
+import type { FileSystemHandle } from "./filesystem";
 import type { ImportedLibraryData } from "./types";
 
 const parseFileContents = async (blob: Blob | File): Promise<string> => {
diff --git a/packages/excalidraw/data/encode.ts b/packages/excalidraw/data/encode.ts
index 15dfdb2c0..31d7a5bc1 100644
--- a/packages/excalidraw/data/encode.ts
+++ b/packages/excalidraw/data/encode.ts
@@ -1,4 +1,5 @@
 import { deflate, inflate } from "pako";
+
 import { encryptData, decryptData } from "./encryption";
 
 // -----------------------------------------------------------------------------
diff --git a/packages/excalidraw/data/encryption.ts b/packages/excalidraw/data/encryption.ts
index 33e689977..ee1a88f35 100644
--- a/packages/excalidraw/data/encryption.ts
+++ b/packages/excalidraw/data/encryption.ts
@@ -1,4 +1,5 @@
-import { ENCRYPTION_KEY_BITS } from "../constants";
+import { ENCRYPTION_KEY_BITS } from "@excalidraw/common";
+
 import { blobToArrayBuffer } from "./blob";
 
 export const IV_LENGTH_BYTES = 12;
diff --git a/packages/excalidraw/data/filesystem.ts b/packages/excalidraw/data/filesystem.ts
index 186d58734..0f4ae745f 100644
--- a/packages/excalidraw/data/filesystem.ts
+++ b/packages/excalidraw/data/filesystem.ts
@@ -1,12 +1,14 @@
-import type { FileSystemHandle } from "browser-fs-access";
 import {
   fileOpen as _fileOpen,
   fileSave as _fileSave,
   supported as nativeFileSystemSupported,
 } from "browser-fs-access";
-import { EVENT, MIME_TYPES } from "../constants";
+
+import { EVENT, MIME_TYPES, debounce } from "@excalidraw/common";
+
 import { AbortError } from "../errors";
-import { debounce } from "../utils";
+
+import type { FileSystemHandle } from "browser-fs-access";
 
 type FILE_EXTENSION = Exclude<keyof typeof MIME_TYPES, "binary">;
 
diff --git a/packages/excalidraw/data/image.ts b/packages/excalidraw/data/image.ts
index 0359a9c32..c9c84c95b 100644
--- a/packages/excalidraw/data/image.ts
+++ b/packages/excalidraw/data/image.ts
@@ -1,9 +1,11 @@
-import decodePng from "png-chunks-extract";
 import tEXt from "png-chunk-text";
 import encodePng from "png-chunks-encode";
-import { encode, decode } from "./encode";
-import { EXPORT_DATA_TYPES, MIME_TYPES } from "../constants";
+import decodePng from "png-chunks-extract";
+
+import { EXPORT_DATA_TYPES, MIME_TYPES } from "@excalidraw/common";
+
 import { blobToArrayBuffer } from "./blob";
+import { encode, decode } from "./encode";
 
 // -----------------------------------------------------------------------------
 // PNG
diff --git a/packages/excalidraw/data/index.ts b/packages/excalidraw/data/index.ts
index 04cdcaf95..ac8147e85 100644
--- a/packages/excalidraw/data/index.ts
+++ b/packages/excalidraw/data/index.ts
@@ -1,33 +1,42 @@
-import {
-  copyBlobToClipboardAsPng,
-  copyTextToSystemClipboard,
-} from "../clipboard";
 import {
   DEFAULT_EXPORT_PADDING,
   DEFAULT_FILENAME,
   IMAGE_MIME_TYPES,
   isFirefox,
   MIME_TYPES,
-} from "../constants";
-import { getNonDeletedElements } from "../element";
-import { isFrameLikeElement } from "../element/typeChecks";
+  cloneJSON,
+} from "@excalidraw/common";
+
+import { getNonDeletedElements } from "@excalidraw/element";
+
+import { isFrameLikeElement } from "@excalidraw/element/typeChecks";
+
+import { getElementsOverlappingFrame } from "@excalidraw/element/frame";
+
 import type {
   ExcalidrawElement,
   ExcalidrawFrameLikeElement,
   NonDeletedExcalidrawElement,
-} from "../element/types";
-import { getElementsOverlappingFrame } from "../frame";
+} from "@excalidraw/element/types";
+
+import {
+  copyBlobToClipboardAsPng,
+  copyTextToSystemClipboard,
+} from "../clipboard";
+
 import { t } from "../i18n";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { exportToCanvas, exportToSvg } from "../scene/export";
-import type { ExportType } from "../scene/types";
-import type { AppState, BinaryFiles } from "../types";
-import { cloneJSON } from "../utils";
+
 import { canvasToBlob } from "./blob";
-import type { FileSystemHandle } from "./filesystem";
 import { fileSave } from "./filesystem";
 import { serializeAsJSON } from "./json";
 
+import type { FileSystemHandle } from "./filesystem";
+
+import type { ExportType } from "../scene/types";
+import type { AppState, BinaryFiles } from "../types";
+
 export { loadFromBlob } from "./blob";
 export { loadFromJSON, saveAsJSON } from "./json";
 
diff --git a/packages/excalidraw/data/json.ts b/packages/excalidraw/data/json.ts
index 1270fd1b4..527c9e56e 100644
--- a/packages/excalidraw/data/json.ts
+++ b/packages/excalidraw/data/json.ts
@@ -1,17 +1,24 @@
-import { fileOpen, fileSave } from "./filesystem";
-import { cleanAppStateForExport, clearAppStateForDatabase } from "../appState";
 import {
   DEFAULT_FILENAME,
   EXPORT_DATA_TYPES,
   EXPORT_SOURCE,
   MIME_TYPES,
   VERSIONS,
-} from "../constants";
-import { clearElementsForDatabase, clearElementsForExport } from "../element";
-import type { ExcalidrawElement } from "../element/types";
-import type { AppState, BinaryFiles, LibraryItems } from "../types";
-import { isImageFileHandle, loadFromBlob, normalizeFile } from "./blob";
+} from "@excalidraw/common";
 
+import {
+  clearElementsForDatabase,
+  clearElementsForExport,
+} from "@excalidraw/element";
+
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+
+import { cleanAppStateForExport, clearAppStateForDatabase } from "../appState";
+
+import { isImageFileHandle, loadFromBlob, normalizeFile } from "./blob";
+import { fileOpen, fileSave } from "./filesystem";
+
+import type { AppState, BinaryFiles, LibraryItems } from "../types";
 import type {
   ExportedDataState,
   ImportedDataState,
diff --git a/packages/excalidraw/data/library.ts b/packages/excalidraw/data/library.ts
index 1c23edcf0..74252657e 100644
--- a/packages/excalidraw/data/library.ts
+++ b/packages/excalidraw/data/library.ts
@@ -1,19 +1,5 @@
-import { loadLibraryFromBlob } from "./blob";
-import type {
-  LibraryItems,
-  LibraryItem,
-  ExcalidrawImperativeAPI,
-  LibraryItemsSource,
-  LibraryItems_anyVersion,
-} from "../types";
-import { restoreLibraryItems } from "./restore";
-import type App from "../components/App";
-import { atom, editorJotaiStore } from "../editor-jotai";
-import type { ExcalidrawElement } from "../element/types";
-import { getCommonBoundingBox } from "../element/bounds";
-import { AbortError } from "../errors";
-import { t } from "../i18n";
 import { useEffect, useRef } from "react";
+
 import {
   URL_HASH_KEYS,
   URL_QUERY_KEYS,
@@ -21,20 +7,42 @@ import {
   EVENT,
   DEFAULT_SIDEBAR,
   LIBRARY_SIDEBAR_TAB,
-} from "../constants";
-import { libraryItemSvgsCache } from "../hooks/useLibraryItemSvg";
-import {
   arrayToMap,
   cloneJSON,
   preventUnload,
   promiseTry,
   resolvablePromise,
-} from "../utils";
-import type { MaybePromise } from "../utility-types";
+  toValidURL,
+  Queue,
+} from "@excalidraw/common";
+
+import { hashElementsVersion, hashString } from "@excalidraw/element";
+
+import { getCommonBoundingBox } from "@excalidraw/element/bounds";
+
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+
+import type { MaybePromise } from "@excalidraw/common/utility-types";
+
+import { atom, editorJotaiStore } from "../editor-jotai";
+
 import { Emitter } from "../emitter";
-import { Queue } from "../queue";
-import { hashElementsVersion, hashString } from "../element";
-import { toValidURL } from "./url";
+import { AbortError } from "../errors";
+import { libraryItemSvgsCache } from "../hooks/useLibraryItemSvg";
+import { t } from "../i18n";
+
+import { loadLibraryFromBlob } from "./blob";
+import { restoreLibraryItems } from "./restore";
+
+import type App from "../components/App";
+
+import type {
+  LibraryItems,
+  LibraryItem,
+  ExcalidrawImperativeAPI,
+  LibraryItemsSource,
+  LibraryItems_anyVersion,
+} from "../types";
 
 /**
  * format: hostname or hostname/pathname
diff --git a/packages/excalidraw/data/reconcile.ts b/packages/excalidraw/data/reconcile.ts
index fa4cff8d1..a69ee2dee 100644
--- a/packages/excalidraw/data/reconcile.ts
+++ b/packages/excalidraw/data/reconcile.ts
@@ -1,14 +1,18 @@
 import throttle from "lodash.throttle";
-import { ENV } from "../constants";
-import type { OrderedExcalidrawElement } from "../element/types";
+
+import { arrayToMap, isDevEnv, isTestEnv } from "@excalidraw/common";
+
 import {
   orderByFractionalIndex,
   syncInvalidIndices,
   validateFractionalIndices,
-} from "../fractionalIndex";
+} from "@excalidraw/element/fractionalIndex";
+
+import type { OrderedExcalidrawElement } from "@excalidraw/element/types";
+
+import type { MakeBrand } from "@excalidraw/common/utility-types";
+
 import type { AppState } from "../types";
-import type { MakeBrand } from "../utility-types";
-import { arrayToMap } from "../utils";
 
 export type ReconciledExcalidrawElement = OrderedExcalidrawElement &
   MakeBrand<"ReconciledElement">;
@@ -45,11 +49,7 @@ const validateIndicesThrottled = throttle(
     localElements: readonly OrderedExcalidrawElement[],
     remoteElements: readonly RemoteExcalidrawElement[],
   ) => {
-    if (
-      import.meta.env.DEV ||
-      import.meta.env.MODE === ENV.TEST ||
-      window?.DEBUG_FRACTIONAL_INDICES
-    ) {
+    if (isDevEnv() || isTestEnv() || window?.DEBUG_FRACTIONAL_INDICES) {
       // create new instances due to the mutation
       const elements = syncInvalidIndices(
         orderedElements.map((x) => ({ ...x })),
@@ -57,7 +57,7 @@ const validateIndicesThrottled = throttle(
 
       validateFractionalIndices(elements, {
         // throw in dev & test only, to remain functional on `DEBUG_FRACTIONAL_INDICES`
-        shouldThrow: import.meta.env.DEV || import.meta.env.MODE === ENV.TEST,
+        shouldThrow: isTestEnv() || isDevEnv(),
         includeBoundTextValidation: true,
         reconciliationContext: {
           localElements,
diff --git a/packages/excalidraw/data/resave.ts b/packages/excalidraw/data/resave.ts
index 624918425..188041d69 100644
--- a/packages/excalidraw/data/resave.ts
+++ b/packages/excalidraw/data/resave.ts
@@ -1,8 +1,11 @@
-import type { ExcalidrawElement } from "../element/types";
-import type { AppState, BinaryFiles } from "../types";
-import { exportCanvas, prepareElementsForExport } from ".";
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+
 import { getFileHandleType, isImageFileHandleType } from "./blob";
 
+import { exportCanvas, prepareElementsForExport } from ".";
+
+import type { AppState, BinaryFiles } from "../types";
+
 export const resaveAsImageWithScene = async (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
diff --git a/packages/excalidraw/data/restore.ts b/packages/excalidraw/data/restore.ts
index c4e45b025..d1002e61f 100644
--- a/packages/excalidraw/data/restore.ts
+++ b/packages/excalidraw/data/restore.ts
@@ -1,3 +1,52 @@
+import { isFiniteNumber, pointFrom } from "@excalidraw/math";
+
+import {
+  DEFAULT_FONT_FAMILY,
+  DEFAULT_TEXT_ALIGN,
+  DEFAULT_VERTICAL_ALIGN,
+  FONT_FAMILY,
+  ROUNDNESS,
+  DEFAULT_SIDEBAR,
+  DEFAULT_ELEMENT_PROPS,
+  DEFAULT_GRID_SIZE,
+  DEFAULT_GRID_STEP,
+  randomId,
+  getUpdatedTimestamp,
+  updateActiveTool,
+  arrayToMap,
+  getSizeFromPoints,
+  normalizeLink,
+  getLineHeight,
+} from "@excalidraw/common";
+import { getNonDeletedElements } from "@excalidraw/element";
+import { normalizeFixedPoint } from "@excalidraw/element/binding";
+import {
+  updateElbowArrowPoints,
+  validateElbowPoints,
+} from "@excalidraw/element/elbowArrow";
+import { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
+import { bumpVersion } from "@excalidraw/element/mutateElement";
+import { getContainerElement } from "@excalidraw/element/textElement";
+import { detectLineHeight } from "@excalidraw/element/textMeasurements";
+import {
+  isArrowElement,
+  isElbowArrow,
+  isFixedPointBinding,
+  isLinearElement,
+  isTextElement,
+  isUsingAdaptiveRadius,
+} from "@excalidraw/element/typeChecks";
+
+import { syncInvalidIndices } from "@excalidraw/element/fractionalIndex";
+
+import { refreshTextDimensions } from "@excalidraw/element/newElement";
+
+import { getNormalizedDimensions } from "@excalidraw/element/sizeHelpers";
+
+import { isInvisiblySmallElement } from "@excalidraw/element/sizeHelpers";
+
+import type { LocalPoint, Radians } from "@excalidraw/math";
+
 import type {
   ExcalidrawArrowElement,
   ExcalidrawElbowArrowElement,
@@ -12,59 +61,20 @@ import type {
   OrderedExcalidrawElement,
   PointBinding,
   StrokeRoundness,
-} from "../element/types";
-import type { AppState, BinaryFiles, LibraryItem } from "../types";
-import type { ImportedDataState, LegacyAppState } from "./types";
-import {
-  getNonDeletedElements,
-  getNormalizedDimensions,
-  isInvisiblySmallElement,
-  refreshTextDimensions,
-} from "../element";
-import {
-  isArrowElement,
-  isElbowArrow,
-  isFixedPointBinding,
-  isLinearElement,
-  isTextElement,
-  isUsingAdaptiveRadius,
-} from "../element/typeChecks";
-import { randomId } from "../random";
-import {
-  DEFAULT_FONT_FAMILY,
-  DEFAULT_TEXT_ALIGN,
-  DEFAULT_VERTICAL_ALIGN,
-  FONT_FAMILY,
-  ROUNDNESS,
-  DEFAULT_SIDEBAR,
-  DEFAULT_ELEMENT_PROPS,
-  DEFAULT_GRID_SIZE,
-  DEFAULT_GRID_STEP,
-} from "../constants";
+} from "@excalidraw/element/types";
+
+import type { MarkOptional, Mutable } from "@excalidraw/common/utility-types";
+
 import { getDefaultAppState } from "../appState";
-import { LinearElementEditor } from "../element/linearElementEditor";
-import { bumpVersion } from "../element/mutateElement";
-import { getUpdatedTimestamp, updateActiveTool } from "../utils";
-import { arrayToMap } from "../utils";
-import type { MarkOptional, Mutable } from "../utility-types";
-import { getContainerElement } from "../element/textElement";
-import { normalizeLink } from "./url";
-import { syncInvalidIndices } from "../fractionalIndex";
-import { getSizeFromPoints } from "../points";
-import { getLineHeight } from "../fonts";
-import { normalizeFixedPoint } from "../element/binding";
+
 import {
   getNormalizedGridSize,
   getNormalizedGridStep,
   getNormalizedZoom,
 } from "../scene";
-import type { LocalPoint, Radians } from "@excalidraw/math";
-import { isFiniteNumber, pointFrom } from "@excalidraw/math";
-import { detectLineHeight } from "../element/textMeasurements";
-import {
-  updateElbowArrowPoints,
-  validateElbowPoints,
-} from "../element/elbowArrow";
+
+import type { AppState, BinaryFiles, LibraryItem } from "../types";
+import type { ImportedDataState, LegacyAppState } from "./types";
 
 type RestoredAppState = Omit<
   AppState,
diff --git a/packages/excalidraw/data/transform.test.ts b/packages/excalidraw/data/transform.test.ts
index a36af0c35..27643e7e1 100644
--- a/packages/excalidraw/data/transform.test.ts
+++ b/packages/excalidraw/data/transform.test.ts
@@ -1,8 +1,11 @@
-import { vi } from "vitest";
-import type { ExcalidrawElementSkeleton } from "./transform";
-import { convertToExcalidrawElements } from "./transform";
-import type { ExcalidrawArrowElement } from "../element/types";
 import { pointFrom } from "@excalidraw/math";
+import { vi } from "vitest";
+
+import type { ExcalidrawArrowElement } from "@excalidraw/element/types";
+
+import { convertToExcalidrawElements } from "./transform";
+
+import type { ExcalidrawElementSkeleton } from "./transform";
 
 const opts = { regenerateIds: false };
 
diff --git a/packages/excalidraw/data/transform.ts b/packages/excalidraw/data/transform.ts
index 023740cf1..9def9f5fc 100644
--- a/packages/excalidraw/data/transform.ts
+++ b/packages/excalidraw/data/transform.ts
@@ -1,24 +1,43 @@
+import { pointFrom, type LocalPoint } from "@excalidraw/math";
+
 import {
   DEFAULT_FONT_FAMILY,
   DEFAULT_FONT_SIZE,
   TEXT_ALIGN,
   VERTICAL_ALIGN,
-} from "../constants";
-import {
-  getCommonBounds,
-  newElement,
-  newLinearElement,
-  redrawTextBoundingBox,
-} from "../element";
-import { bindLinearElement } from "../element/binding";
-import type { ElementConstructorOpts } from "../element/newElement";
+  getSizeFromPoints,
+  randomId,
+  arrayToMap,
+  assertNever,
+  cloneJSON,
+  getFontString,
+  isDevEnv,
+  toBrandedType,
+  getLineHeight,
+} from "@excalidraw/common";
+
+import { bindLinearElement } from "@excalidraw/element/binding";
 import {
   newArrowElement,
+  newElement,
   newFrameElement,
   newImageElement,
+  newLinearElement,
   newMagicFrameElement,
   newTextElement,
-} from "../element/newElement";
+} from "@excalidraw/element/newElement";
+import {
+  measureText,
+  normalizeText,
+} from "@excalidraw/element/textMeasurements";
+import { isArrowElement } from "@excalidraw/element/typeChecks";
+
+import { syncInvalidIndices } from "@excalidraw/element/fractionalIndex";
+
+import { redrawTextBoundingBox } from "@excalidraw/element/textElement";
+
+import type { ElementConstructorOpts } from "@excalidraw/element/newElement";
+
 import type {
   ElementsMap,
   ExcalidrawArrowElement,
@@ -38,23 +57,11 @@ import type {
   NonDeletedSceneElementsMap,
   TextAlign,
   VerticalAlign,
-} from "../element/types";
-import type { MarkOptional } from "../utility-types";
-import {
-  arrayToMap,
-  assertNever,
-  cloneJSON,
-  getFontString,
-  isDevEnv,
-  toBrandedType,
-} from "../utils";
-import { getSizeFromPoints } from "../points";
-import { randomId } from "../random";
-import { syncInvalidIndices } from "../fractionalIndex";
-import { getLineHeight } from "../fonts";
-import { isArrowElement } from "../element/typeChecks";
-import { pointFrom, type LocalPoint } from "@excalidraw/math";
-import { measureText, normalizeText } from "../element/textMeasurements";
+} from "@excalidraw/element/types";
+
+import type { MarkOptional } from "@excalidraw/common/utility-types";
+
+import { getCommonBounds } from "..";
 
 export type ValidLinearElement = {
   type: "arrow" | "line";
diff --git a/packages/excalidraw/data/types.ts b/packages/excalidraw/data/types.ts
index f5f5535a5..6878b81b1 100644
--- a/packages/excalidraw/data/types.ts
+++ b/packages/excalidraw/data/types.ts
@@ -1,12 +1,14 @@
-import type { ExcalidrawElement } from "../element/types";
+import type { VERSIONS } from "@excalidraw/common";
+
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+
+import type { cleanAppStateForExport } from "../appState";
 import type {
   AppState,
   BinaryFiles,
   LibraryItems,
   LibraryItems_anyVersion,
 } from "../types";
-import type { cleanAppStateForExport } from "../appState";
-import type { VERSIONS } from "../constants";
 
 export interface ExportedDataState {
   type: string;
diff --git a/packages/excalidraw/errors.ts b/packages/excalidraw/errors.ts
index d6091b0e9..20fe694cd 100644
--- a/packages/excalidraw/errors.ts
+++ b/packages/excalidraw/errors.ts
@@ -33,10 +33,6 @@ export class ImageSceneDataError extends Error {
   }
 }
 
-export class InvalidFractionalIndexError extends Error {
-  public code = "ELEMENT_HAS_INVALID_INDEX" as const;
-}
-
 type WorkerErrorCodes = "WORKER_URL_NOT_DEFINED" | "WORKER_IN_THE_MAIN_CHUNK";
 
 export class WorkerUrlNotDefinedError extends Error {
diff --git a/packages/excalidraw/fonts/Cascadia/index.ts b/packages/excalidraw/fonts/Cascadia/index.ts
index ecd111644..aad91ff0c 100644
--- a/packages/excalidraw/fonts/Cascadia/index.ts
+++ b/packages/excalidraw/fonts/Cascadia/index.ts
@@ -1,7 +1,7 @@
-import CascadiaCodeRegular from "./CascadiaCode-Regular.woff2";
-
 import { type ExcalidrawFontFaceDescriptor } from "../Fonts";
 
+import CascadiaCodeRegular from "./CascadiaCode-Regular.woff2";
+
 export const CascadiaFontFaces: ExcalidrawFontFaceDescriptor[] = [
   {
     uri: CascadiaCodeRegular,
diff --git a/packages/excalidraw/fonts/ComicShanns/index.ts b/packages/excalidraw/fonts/ComicShanns/index.ts
index bf78650b4..20d23c28e 100644
--- a/packages/excalidraw/fonts/ComicShanns/index.ts
+++ b/packages/excalidraw/fonts/ComicShanns/index.ts
@@ -1,13 +1,13 @@
 // The following file content was generated with https://chinese-font.netlify.app/online-split,
 // but has been manully rewritten from `@font-face` rules into TS while leveraging FontFace API.
 
-import _0 from "./ComicShanns-Regular-279a7b317d12eb88de06167bd672b4b4.woff2";
-import _1 from "./ComicShanns-Regular-fcb0fc02dcbee4c9846b3e2508668039.woff2";
-import _2 from "./ComicShanns-Regular-dc6a8806fa96795d7b3be5026f989a17.woff2";
-import _3 from "./ComicShanns-Regular-6e066e8de2ac57ea9283adb9c24d7f0c.woff2";
-
 import { type ExcalidrawFontFaceDescriptor } from "../Fonts";
 
+import _0 from "./ComicShanns-Regular-279a7b317d12eb88de06167bd672b4b4.woff2";
+import _3 from "./ComicShanns-Regular-6e066e8de2ac57ea9283adb9c24d7f0c.woff2";
+import _2 from "./ComicShanns-Regular-dc6a8806fa96795d7b3be5026f989a17.woff2";
+import _1 from "./ComicShanns-Regular-fcb0fc02dcbee4c9846b3e2508668039.woff2";
+
 /* Generated By cn-font-split@5.2.2 https://www.npmjs.com/package/cn-font-split
 CreateTime: Thu, 17 Oct 2024 09:57:51 GMT;
 Origin File Name Table:
diff --git a/packages/excalidraw/fonts/Emoji/index.ts b/packages/excalidraw/fonts/Emoji/index.ts
index 491c7b8c9..09aea663d 100644
--- a/packages/excalidraw/fonts/Emoji/index.ts
+++ b/packages/excalidraw/fonts/Emoji/index.ts
@@ -1,4 +1,4 @@
-import { LOCAL_FONT_PROTOCOL } from "../FontMetadata";
+import { LOCAL_FONT_PROTOCOL } from "@excalidraw/common";
 
 import { type ExcalidrawFontFaceDescriptor } from "../Fonts";
 
diff --git a/packages/excalidraw/fonts/ExcalidrawFontFace.ts b/packages/excalidraw/fonts/ExcalidrawFontFace.ts
index 9d8b9f78a..46ea3d018 100644
--- a/packages/excalidraw/fonts/ExcalidrawFontFace.ts
+++ b/packages/excalidraw/fonts/ExcalidrawFontFace.ts
@@ -1,5 +1,5 @@
-import { promiseTry } from "../utils";
-import { LOCAL_FONT_PROTOCOL } from "./FontMetadata";
+import { promiseTry, LOCAL_FONT_PROTOCOL } from "@excalidraw/common";
+
 import { subsetWoff2GlyphsByCodepoints } from "../subset/subset-main";
 
 type DataURL = string;
diff --git a/packages/excalidraw/fonts/Excalifont/index.ts b/packages/excalidraw/fonts/Excalifont/index.ts
index 7e11af6c6..bcd384be5 100644
--- a/packages/excalidraw/fonts/Excalifont/index.ts
+++ b/packages/excalidraw/fonts/Excalifont/index.ts
@@ -1,13 +1,13 @@
-import _0 from "./Excalifont-Regular-a88b72a24fb54c9f94e3b5fdaa7481c9.woff2";
-import _1 from "./Excalifont-Regular-be310b9bcd4f1a43f571c46df7809174.woff2";
-import _2 from "./Excalifont-Regular-b9dcf9d2e50a1eaf42fc664b50a3fd0d.woff2";
-import _3 from "./Excalifont-Regular-41b173a47b57366892116a575a43e2b6.woff2";
-import _4 from "./Excalifont-Regular-3f2c5db56cc93c5a6873b1361d730c16.woff2";
-import _5 from "./Excalifont-Regular-349fac6ca4700ffec595a7150a0d1e1d.woff2";
-import _6 from "./Excalifont-Regular-623ccf21b21ef6b3a0d87738f77eb071.woff2";
-
 import { type ExcalidrawFontFaceDescriptor } from "../Fonts";
 
+import _5 from "./Excalifont-Regular-349fac6ca4700ffec595a7150a0d1e1d.woff2";
+import _4 from "./Excalifont-Regular-3f2c5db56cc93c5a6873b1361d730c16.woff2";
+import _3 from "./Excalifont-Regular-41b173a47b57366892116a575a43e2b6.woff2";
+import _6 from "./Excalifont-Regular-623ccf21b21ef6b3a0d87738f77eb071.woff2";
+import _0 from "./Excalifont-Regular-a88b72a24fb54c9f94e3b5fdaa7481c9.woff2";
+import _2 from "./Excalifont-Regular-b9dcf9d2e50a1eaf42fc664b50a3fd0d.woff2";
+import _1 from "./Excalifont-Regular-be310b9bcd4f1a43f571c46df7809174.woff2";
+
 /* Generated By cn-font-split@5.2.2 https://www.npmjs.com/package/cn-font-split
 CreateTime: Mon, 14 Oct 2024 18:59:19 GMT;
 Origin File Name Table:
diff --git a/packages/excalidraw/fonts/Fonts.ts b/packages/excalidraw/fonts/Fonts.ts
index 4b8ba7828..79b5ea1af 100644
--- a/packages/excalidraw/fonts/Fonts.ts
+++ b/packages/excalidraw/fonts/Fonts.ts
@@ -4,17 +4,34 @@ import {
   CJK_HAND_DRAWN_FALLBACK_FONT,
   WINDOWS_EMOJI_FALLBACK_FONT,
   getFontFamilyFallbacks,
-} from "../constants";
-import { isTextElement } from "../element";
-import { getContainerElement } from "../element/textElement";
-import { containsCJK } from "../element/textWrapping";
-import { ShapeCache } from "../scene/ShapeCache";
-import { getFontString, PromisePool, promiseTry } from "../utils";
-import { ExcalidrawFontFace } from "./ExcalidrawFontFace";
+} from "@excalidraw/common";
+import { getContainerElement } from "@excalidraw/element/textElement";
+import { charWidth } from "@excalidraw/element/textMeasurements";
+import { containsCJK } from "@excalidraw/element/textWrapping";
+
+import {
+  FONT_METADATA,
+  type FontMetadata,
+  getFontString,
+  PromisePool,
+  promiseTry,
+} from "@excalidraw/common";
+
+import { ShapeCache } from "@excalidraw/element/ShapeCache";
+
+import { isTextElement } from "@excalidraw/element/typeChecks";
+
+import type {
+  ExcalidrawElement,
+  ExcalidrawTextElement,
+} from "@excalidraw/element/types";
+
+import type { ValueOf } from "@excalidraw/common/utility-types";
 
 import { CascadiaFontFaces } from "./Cascadia";
 import { ComicShannsFontFaces } from "./ComicShanns";
 import { EmojiFontFaces } from "./Emoji";
+import { ExcalidrawFontFace } from "./ExcalidrawFontFace";
 import { ExcalifontFontFaces } from "./Excalifont";
 import { HelveticaFontFaces } from "./Helvetica";
 import { LiberationFontFaces } from "./Liberation";
@@ -23,15 +40,7 @@ import { NunitoFontFaces } from "./Nunito";
 import { VirgilFontFaces } from "./Virgil";
 import { XiaolaiFontFaces } from "./Xiaolai";
 
-import { FONT_METADATA, type FontMetadata } from "./FontMetadata";
-import type {
-  ExcalidrawElement,
-  ExcalidrawTextElement,
-  FontFamilyValues,
-} from "../element/types";
 import type Scene from "../scene/Scene";
-import type { ValueOf } from "../utility-types";
-import { charWidth } from "../element/textMeasurements";
 
 export class Fonts {
   // it's ok to track fonts across multiple instances only once, so let's use
@@ -454,37 +463,6 @@ export class Fonts {
   }
 }
 
-/**
- * Calculates vertical offset for a text with alphabetic baseline.
- */
-export const getVerticalOffset = (
-  fontFamily: ExcalidrawTextElement["fontFamily"],
-  fontSize: ExcalidrawTextElement["fontSize"],
-  lineHeightPx: number,
-) => {
-  const { unitsPerEm, ascender, descender } =
-    Fonts.registered.get(fontFamily)?.metadata.metrics ||
-    FONT_METADATA[FONT_FAMILY.Virgil].metrics;
-
-  const fontSizeEm = fontSize / unitsPerEm;
-  const lineGap =
-    (lineHeightPx - fontSizeEm * ascender + fontSizeEm * descender) / 2;
-
-  const verticalOffset = fontSizeEm * ascender + lineGap;
-  return verticalOffset;
-};
-
-/**
- * Gets line height forr a selected family.
- */
-export const getLineHeight = (fontFamily: FontFamilyValues) => {
-  const { lineHeight } =
-    Fonts.registered.get(fontFamily)?.metadata.metrics ||
-    FONT_METADATA[FONT_FAMILY.Excalifont].metrics;
-
-  return lineHeight as ExcalidrawTextElement["lineHeight"];
-};
-
 export interface ExcalidrawFontFaceDescriptor {
   uri: string;
   descriptors?: FontFaceDescriptors;
diff --git a/packages/excalidraw/fonts/Helvetica/index.ts b/packages/excalidraw/fonts/Helvetica/index.ts
index a0e7ecb61..20a08e464 100644
--- a/packages/excalidraw/fonts/Helvetica/index.ts
+++ b/packages/excalidraw/fonts/Helvetica/index.ts
@@ -1,4 +1,4 @@
-import { LOCAL_FONT_PROTOCOL } from "../FontMetadata";
+import { LOCAL_FONT_PROTOCOL } from "@excalidraw/common";
 
 import { type ExcalidrawFontFaceDescriptor } from "../Fonts";
 
diff --git a/packages/excalidraw/fonts/Liberation/index.ts b/packages/excalidraw/fonts/Liberation/index.ts
index 5bc964815..86b3e72ec 100644
--- a/packages/excalidraw/fonts/Liberation/index.ts
+++ b/packages/excalidraw/fonts/Liberation/index.ts
@@ -1,7 +1,7 @@
-import LiberationSansRegular from "./LiberationSans-Regular.woff2";
-
 import { type ExcalidrawFontFaceDescriptor } from "../Fonts";
 
+import LiberationSansRegular from "./LiberationSans-Regular.woff2";
+
 export const LiberationFontFaces: ExcalidrawFontFaceDescriptor[] = [
   {
     uri: LiberationSansRegular,
diff --git a/packages/excalidraw/fonts/Lilita/index.ts b/packages/excalidraw/fonts/Lilita/index.ts
index d5ea82e58..4641dcb0f 100644
--- a/packages/excalidraw/fonts/Lilita/index.ts
+++ b/packages/excalidraw/fonts/Lilita/index.ts
@@ -1,10 +1,10 @@
-import LilitaLatin from "./Lilita-Regular-i7dPIFZ9Zz-WBtRtedDbYEF8RXi4EwQ.woff2";
-import LilitaLatinExt from "./Lilita-Regular-i7dPIFZ9Zz-WBtRtedDbYE98RXi4EwSsbg.woff2";
-
-import { GOOGLE_FONTS_RANGES } from "../FontMetadata";
+import { GOOGLE_FONTS_RANGES } from "@excalidraw/common";
 
 import { type ExcalidrawFontFaceDescriptor } from "../Fonts";
 
+import LilitaLatinExt from "./Lilita-Regular-i7dPIFZ9Zz-WBtRtedDbYE98RXi4EwSsbg.woff2";
+import LilitaLatin from "./Lilita-Regular-i7dPIFZ9Zz-WBtRtedDbYEF8RXi4EwQ.woff2";
+
 export const LilitaFontFaces: ExcalidrawFontFaceDescriptor[] = [
   {
     uri: LilitaLatinExt,
diff --git a/packages/excalidraw/fonts/Nunito/index.ts b/packages/excalidraw/fonts/Nunito/index.ts
index 4db432d07..07fb757c8 100644
--- a/packages/excalidraw/fonts/Nunito/index.ts
+++ b/packages/excalidraw/fonts/Nunito/index.ts
@@ -1,13 +1,13 @@
-import Latin from "./Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTQ3j6zbXWjgeg.woff2";
-import LatinExt from "./Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTo3j6zbXWjgevT5.woff2";
-import Cyrilic from "./Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTA3j6zbXWjgevT5.woff2";
-import CyrilicExt from "./Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTk3j6zbXWjgevT5.woff2";
-import Vietnamese from "./Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTs3j6zbXWjgevT5.woff2";
-
-import { GOOGLE_FONTS_RANGES } from "../FontMetadata";
+import { GOOGLE_FONTS_RANGES } from "@excalidraw/common";
 
 import { type ExcalidrawFontFaceDescriptor } from "../Fonts";
 
+import Cyrilic from "./Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTA3j6zbXWjgevT5.woff2";
+import Latin from "./Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTQ3j6zbXWjgeg.woff2";
+import CyrilicExt from "./Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTk3j6zbXWjgevT5.woff2";
+import LatinExt from "./Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTo3j6zbXWjgevT5.woff2";
+import Vietnamese from "./Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTs3j6zbXWjgevT5.woff2";
+
 export const NunitoFontFaces: ExcalidrawFontFaceDescriptor[] = [
   {
     uri: CyrilicExt,
diff --git a/packages/excalidraw/fonts/Virgil/index.ts b/packages/excalidraw/fonts/Virgil/index.ts
index fdd5ffcfc..b9ce7ee78 100644
--- a/packages/excalidraw/fonts/Virgil/index.ts
+++ b/packages/excalidraw/fonts/Virgil/index.ts
@@ -1,7 +1,7 @@
-import Virgil from "./Virgil-Regular.woff2";
-
 import { type ExcalidrawFontFaceDescriptor } from "../Fonts";
 
+import Virgil from "./Virgil-Regular.woff2";
+
 export const VirgilFontFaces: ExcalidrawFontFaceDescriptor[] = [
   {
     uri: Virgil,
diff --git a/packages/excalidraw/fonts/Xiaolai/index.ts b/packages/excalidraw/fonts/Xiaolai/index.ts
index 17fd71831..67476b912 100644
--- a/packages/excalidraw/fonts/Xiaolai/index.ts
+++ b/packages/excalidraw/fonts/Xiaolai/index.ts
@@ -1,23 +1,31 @@
 // The following file content was generated with https://chinese-font.netlify.app/online-split,
 // but has been manully rewritten from `@font-face` rules into TS while leveraging FontFace API.
 
+import { type ExcalidrawFontFaceDescriptor } from "../Fonts";
+
+import _80 from "./Xiaolai-Regular-019d66dcad46dc156b162d267f981c20.woff2";
+import _16 from "./Xiaolai-Regular-04b718e5623574919c8b0dea5f301444.woff2";
+import _13 from "./Xiaolai-Regular-069e77aac84590e2e991d0a0176d34f2.woff2";
+import _166 from "./Xiaolai-Regular-06c77b8c66e51ed6c63ccb502dd8b8af.woff2";
+import _71 from "./Xiaolai-Regular-08e0dc436ad0ad61ba5558db0674d762.woff2";
+import _161 from "./Xiaolai-Regular-093b9ef39a46ceae95a1df18a0a3a326.woff2";
+import _183 from "./Xiaolai-Regular-095c169f3314805276f603a362766abd.woff2";
 import _0 from "./Xiaolai-Regular-09850c4077f3fffe707905872e0e2460.woff2";
-import _1 from "./Xiaolai-Regular-7eb9fffd1aa890d07d0f88cc82e6cfe4.woff2";
+import _14 from "./Xiaolai-Regular-41521fade99856108931b4768b1b2648.woff2";
+import _10 from "./Xiaolai-Regular-544fc28abe2c5c30e62383fd4dac255f.woff2";
 import _2 from "./Xiaolai-Regular-60a3089806700d379f11827ee9843b6b.woff2";
+import _1 from "./Xiaolai-Regular-7eb9fffd1aa890d07d0f88cc82e6cfe4.woff2";
 import _3 from "./Xiaolai-Regular-6fe5c5973cc06f74b2387a631ea36b88.woff2";
+import _6 from "./Xiaolai-Regular-a4c34be6d42152e64b0df90bc4607f64.woff2";
 import _4 from "./Xiaolai-Regular-b96d9226ce77ec94ceca043d712182e6.woff2";
 import _5 from "./Xiaolai-Regular-6ae5b42180ad70b971c91e7eefb8eba2.woff2";
-import _6 from "./Xiaolai-Regular-a4c34be6d42152e64b0df90bc4607f64.woff2";
 import _7 from "./Xiaolai-Regular-c69f61a4ab18d0488c8d1fc12e7028e8.woff2";
+import _30 from "./Xiaolai-Regular-cb17fc3db95f6d139afc9d31a8e93293.woff2";
 import _8 from "./Xiaolai-Regular-e3fcf5180fd466c8915c4e8069491054.woff2";
 import _9 from "./Xiaolai-Regular-c1f94158256bb1f3bf665b053d895af9.woff2";
-import _10 from "./Xiaolai-Regular-544fc28abe2c5c30e62383fd4dac255f.woff2";
 import _11 from "./Xiaolai-Regular-7197d6fda6cba7c3874c53d6381ca239.woff2";
 import _12 from "./Xiaolai-Regular-70c2eb8d64e71a42a834eb857ea9df51.woff2";
-import _13 from "./Xiaolai-Regular-069e77aac84590e2e991d0a0176d34f2.woff2";
-import _14 from "./Xiaolai-Regular-41521fade99856108931b4768b1b2648.woff2";
 import _15 from "./Xiaolai-Regular-a004ddfcb26e67bd6e678c8ed19e25ce.woff2";
-import _16 from "./Xiaolai-Regular-04b718e5623574919c8b0dea5f301444.woff2";
 import _17 from "./Xiaolai-Regular-7e4bde7e9c7f84cd34d8a845e384c746.woff2";
 import _18 from "./Xiaolai-Regular-23686f7f29da6e8008c36dd3a80c83d6.woff2";
 import _19 from "./Xiaolai-Regular-69c09cc5fa3e55c74fc4821f76909cc3.woff2";
@@ -31,7 +39,6 @@ import _26 from "./Xiaolai-Regular-7e929f262f30c8ee78bf398150b1a7cd.woff2";
 import _27 from "./Xiaolai-Regular-73e309718fd16cea44b4d54a33581811.woff2";
 import _28 from "./Xiaolai-Regular-9eb5a99df4e76ac3363453ac9ca288b1.woff2";
 import _29 from "./Xiaolai-Regular-3e63ed8162808a9e425ed80a8bc79114.woff2";
-import _30 from "./Xiaolai-Regular-cb17fc3db95f6d139afc9d31a8e93293.woff2";
 import _31 from "./Xiaolai-Regular-c8b71798409ccc126ee264a00aadcf21.woff2";
 import _32 from "./Xiaolai-Regular-11c345711937f0ba4b8f7b6b919c8440.woff2";
 import _33 from "./Xiaolai-Regular-e480d9c614742d05f0e78f274f1e69e6.woff2";
@@ -40,15 +47,17 @@ import _35 from "./Xiaolai-Regular-2cf96d082d35ea3d8106851223ad0d16.woff2";
 import _36 from "./Xiaolai-Regular-2d43040e86ff03ba677f6f9c04cd0805.woff2";
 import _37 from "./Xiaolai-Regular-2a26d20a23b00898ce82f09d2ee47c3f.woff2";
 import _38 from "./Xiaolai-Regular-a365e82ed54697a52f27adcea1315fe8.woff2";
+import _41 from "./Xiaolai-Regular-e4bca6cfa53e499cae0a6be4894a90e9.woff2";
+import _105 from "./Xiaolai-Regular-e51ef413167c6e14e0c0fdcc585f2fc9.woff2";
+import _82 from "./Xiaolai-Regular-e5f453bb04da18eed01675eeebd88bf8.woff2";
+import _45 from "./Xiaolai-Regular-e656f091b9dc4709722c9f4b84d3c797.woff2";
+import _47 from "./Xiaolai-Regular-f0f13b5c60e0af5553bd359f5513be1b.woff2";
 import _39 from "./Xiaolai-Regular-f5d079153c99a25b9be5b8583c4cc8a7.woff2";
 import _40 from "./Xiaolai-Regular-10a7ae9a371830a80c3d844acf1c02d7.woff2";
-import _41 from "./Xiaolai-Regular-e4bca6cfa53e499cae0a6be4894a90e9.woff2";
 import _42 from "./Xiaolai-Regular-60a41c7e1c68f22424e6d22df544bc82.woff2";
 import _43 from "./Xiaolai-Regular-7ab2bed91166a9dca83a5ebfbe2a7f38.woff2";
 import _44 from "./Xiaolai-Regular-670ba603758d94268e8606f240a42e12.woff2";
-import _45 from "./Xiaolai-Regular-e656f091b9dc4709722c9f4b84d3c797.woff2";
 import _46 from "./Xiaolai-Regular-15dc6d811c9cd078f9086a740d5a1038.woff2";
-import _47 from "./Xiaolai-Regular-f0f13b5c60e0af5553bd359f5513be1b.woff2";
 import _48 from "./Xiaolai-Regular-8c2f33cee3993174f7e87c28e4bf42ee.woff2";
 import _49 from "./Xiaolai-Regular-761d05e3cd968cf574166867998ef06a.woff2";
 import _50 from "./Xiaolai-Regular-642b26e2e5f5fb780b51b593dbc8c851.woff2";
@@ -72,7 +81,6 @@ import _67 from "./Xiaolai-Regular-0b5d723fdc4e249c140f0909e87d03b4.woff2";
 import _68 from "./Xiaolai-Regular-cdbce89e82cc1ab53a2decbf5819278f.woff2";
 import _69 from "./Xiaolai-Regular-739bc1a567439c7cffcd1614644593d2.woff2";
 import _70 from "./Xiaolai-Regular-72252d73220fa3cd856677888cee1635.woff2";
-import _71 from "./Xiaolai-Regular-08e0dc436ad0ad61ba5558db0674d762.woff2";
 import _72 from "./Xiaolai-Regular-cf6ff4e0f491ca0cf3038187a997b9b4.woff2";
 import _73 from "./Xiaolai-Regular-9cfb2a77a4e45025105ad29a1748b90d.woff2";
 import _74 from "./Xiaolai-Regular-450da755d5bcb70906e1295e559b9602.woff2";
@@ -81,9 +89,7 @@ import _76 from "./Xiaolai-Regular-1ee544f0f1dac422545c505baa788992.woff2";
 import _77 from "./Xiaolai-Regular-4806e761d750087c2d734fc64596eaff.woff2";
 import _78 from "./Xiaolai-Regular-33432927cd87d40cfe393c7482bf221f.woff2";
 import _79 from "./Xiaolai-Regular-be549ab72f0719d606a5c01e2c0219b6.woff2";
-import _80 from "./Xiaolai-Regular-019d66dcad46dc156b162d267f981c20.woff2";
 import _81 from "./Xiaolai-Regular-b5c1596551c256e0e9cf02028595b092.woff2";
-import _82 from "./Xiaolai-Regular-e5f453bb04da18eed01675eeebd88bf8.woff2";
 import _83 from "./Xiaolai-Regular-cf2cc71752631e579e35b0e423bf2638.woff2";
 import _84 from "./Xiaolai-Regular-6f3256af8454371776bc46670d33cc65.woff2";
 import _85 from "./Xiaolai-Regular-23f228f3999c01983860012330e4be08.woff2";
@@ -106,7 +112,6 @@ import _101 from "./Xiaolai-Regular-4a0fdb40036e87b40aa08dd30584cb85.woff2";
 import _102 from "./Xiaolai-Regular-0f626226ba1272e832aea87bafd9720e.woff2";
 import _103 from "./Xiaolai-Regular-938d90c10ff8c20386af7f242c05d6b0.woff2";
 import _104 from "./Xiaolai-Regular-b6d128682ee29e471486354d486a1b90.woff2";
-import _105 from "./Xiaolai-Regular-e51ef413167c6e14e0c0fdcc585f2fc9.woff2";
 import _106 from "./Xiaolai-Regular-9d81066dd2b337c938df6e90380a00dc.woff2";
 import _107 from "./Xiaolai-Regular-20e7bf72fa05de9adf7dbcc7bf51dde6.woff2";
 import _108 from "./Xiaolai-Regular-4095eb84ef3874e2600247bee0b04026.woff2";
@@ -162,15 +167,14 @@ import _157 from "./Xiaolai-Regular-774d4f764a1299da5d28ec2f2ffe0d69.woff2";
 import _158 from "./Xiaolai-Regular-7718fe60986d8b42b1be9c5ace5ccf25.woff2";
 import _159 from "./Xiaolai-Regular-aa5c9ca6cf4fba00433b7aa3fa10671a.woff2";
 import _160 from "./Xiaolai-Regular-4f50e5136e136527280bc902c5817561.woff2";
-import _161 from "./Xiaolai-Regular-093b9ef39a46ceae95a1df18a0a3a326.woff2";
 import _162 from "./Xiaolai-Regular-a0ca5df4258213d7fc9fce80f65ce760.woff2";
 import _163 from "./Xiaolai-Regular-d2666cbed13462c5dc36fa2f15c202ca.woff2";
 import _164 from "./Xiaolai-Regular-1e6fd68f1f3902ce48ce8c69df385622.woff2";
 import _165 from "./Xiaolai-Regular-87599f94b6cc129d505b375798d0d751.woff2";
-import _166 from "./Xiaolai-Regular-06c77b8c66e51ed6c63ccb502dd8b8af.woff2";
 import _167 from "./Xiaolai-Regular-13ae07ed2e272d26d59bc0691cd7117a.woff2";
 import _168 from "./Xiaolai-Regular-353f33792a8f60dc69323ddf635a269e.woff2";
 import _169 from "./Xiaolai-Regular-0facdf1ea213ba40261022f5d5ed4493.woff2";
+import _202 from "./Xiaolai-Regular-f6032fc06eb20480f096199713f70885.woff2";
 import _170 from "./Xiaolai-Regular-f8ee5d36068a42b51d0e4a1116cfcec1.woff2";
 import _171 from "./Xiaolai-Regular-79d494361ae093b69e74ee9dbe65bfd4.woff2";
 import _172 from "./Xiaolai-Regular-74e2263a91439c25b91d5132ce9f4d62.woff2";
@@ -184,7 +188,6 @@ import _179 from "./Xiaolai-Regular-8e9f97f01034820170065b2921b4fb5e.woff2";
 import _180 from "./Xiaolai-Regular-13d2887ec8ee73c43acdabc52a05af7b.woff2";
 import _181 from "./Xiaolai-Regular-72536a3d71b694a0d53dd90ddceae41e.woff2";
 import _182 from "./Xiaolai-Regular-603aefd23e350ba7eb124273e3c9bcf1.woff2";
-import _183 from "./Xiaolai-Regular-095c169f3314805276f603a362766abd.woff2";
 import _184 from "./Xiaolai-Regular-9544732d2e62d1a429674f8ee41b5d3a.woff2";
 import _185 from "./Xiaolai-Regular-d3716376641d615e2995605b29bca7b6.woff2";
 import _186 from "./Xiaolai-Regular-5a1ce3117cfe90c48e8fb4a9a00f694d.woff2";
@@ -203,7 +206,6 @@ import _198 from "./Xiaolai-Regular-24476a126f129212beb33f66853ea151.woff2";
 import _199 from "./Xiaolai-Regular-1b611157cd46bb184d4fa4dae2d6a2b8.woff2";
 import _200 from "./Xiaolai-Regular-56a32a7689abd0326e57c10c6c069bb4.woff2";
 import _201 from "./Xiaolai-Regular-3cc70dbb64df5b21f1326cc24dee2195.woff2";
-import _202 from "./Xiaolai-Regular-f6032fc06eb20480f096199713f70885.woff2";
 import _203 from "./Xiaolai-Regular-e2ead7ea7da0437f085f42ffc05f8d13.woff2";
 import _204 from "./Xiaolai-Regular-97f7f48ce90c9429bf32ae51469db74d.woff2";
 import _205 from "./Xiaolai-Regular-24a21c1e4449222e8d1898d69ff3a404.woff2";
@@ -211,8 +213,6 @@ import _206 from "./Xiaolai-Regular-726303e0774b4e678bff8c2deb6ca603.woff2";
 import _207 from "./Xiaolai-Regular-5a7fac4b8b23a6e4e5ba0c9bf1756c91.woff2";
 import _208 from "./Xiaolai-Regular-2b7441d46298788ac94e610ffcc709b6.woff2";
 
-import { type ExcalidrawFontFaceDescriptor } from "../Fonts";
-
 /* Generated By cn-font-split@5.2.2 https://www.npmjs.com/package/cn-font-split
 CreateTime: Tue, 08 Oct 2024 18:34:44 GMT;
 Origin File Name Table:
diff --git a/packages/excalidraw/global.d.ts b/packages/excalidraw/global.d.ts
index 207265716..e9b6c3f96 100644
--- a/packages/excalidraw/global.d.ts
+++ b/packages/excalidraw/global.d.ts
@@ -2,9 +2,9 @@ interface Window {
   ClipboardItem: any;
   __EXCALIDRAW_SHA__: string | undefined;
   EXCALIDRAW_ASSET_PATH: string | string[] | undefined;
-  EXCALIDRAW_EXPORT_SOURCE: string;
   EXCALIDRAW_THROTTLE_RENDER: boolean | undefined;
   DEBUG_FRACTIONAL_INDICES: boolean | undefined;
+  EXCALIDRAW_EXPORT_SOURCE: string;
   gtag: Function;
   sa_event: Function;
   fathom: { trackEvent: Function };
diff --git a/packages/excalidraw/history.ts b/packages/excalidraw/history.ts
index daed2a394..0481c8411 100644
--- a/packages/excalidraw/history.ts
+++ b/packages/excalidraw/history.ts
@@ -1,6 +1,8 @@
-import type { AppStateChange, ElementsChange } from "./change";
-import type { SceneElementsMap } from "./element/types";
+import type { SceneElementsMap } from "@excalidraw/element/types";
+
 import { Emitter } from "./emitter";
+
+import type { AppStateChange, ElementsChange } from "./change";
 import type { Snapshot } from "./store";
 import type { AppState } from "./types";
 
diff --git a/packages/excalidraw/hooks/useCreatePortalContainer.ts b/packages/excalidraw/hooks/useCreatePortalContainer.ts
index e8f5e3db6..fb0d24bc3 100644
--- a/packages/excalidraw/hooks/useCreatePortalContainer.ts
+++ b/packages/excalidraw/hooks/useCreatePortalContainer.ts
@@ -1,6 +1,8 @@
 import { useState, useLayoutEffect } from "react";
+
+import { THEME } from "@excalidraw/common";
+
 import { useDevice, useExcalidrawContainer } from "../components/App";
-import { THEME } from "../constants";
 import { useUIAppState } from "../context/ui-appState";
 
 export const useCreatePortalContainer = (opts?: {
diff --git a/packages/excalidraw/hooks/useEmitter.ts b/packages/excalidraw/hooks/useEmitter.ts
index 27b94bc91..eebbaaf30 100644
--- a/packages/excalidraw/hooks/useEmitter.ts
+++ b/packages/excalidraw/hooks/useEmitter.ts
@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+
 import type { Emitter } from "../emitter";
 
 export const useEmitter = <TEvent extends unknown>(
diff --git a/packages/excalidraw/hooks/useLibraryItemSvg.ts b/packages/excalidraw/hooks/useLibraryItemSvg.ts
index 72b648d11..ad423ab95 100644
--- a/packages/excalidraw/hooks/useLibraryItemSvg.ts
+++ b/packages/excalidraw/hooks/useLibraryItemSvg.ts
@@ -1,7 +1,10 @@
-import { useEffect, useState } from "react";
-import { COLOR_PALETTE } from "../colors";
-import { atom, useAtom } from "../editor-jotai";
 import { exportToSvg } from "@excalidraw/utils/export";
+import { useEffect, useState } from "react";
+
+import { COLOR_PALETTE } from "@excalidraw/common";
+
+import { atom, useAtom } from "../editor-jotai";
+
 import type { LibraryItem } from "../types";
 
 export type SvgCache = Map<LibraryItem["id"], SVGSVGElement>;
diff --git a/packages/excalidraw/hooks/useOutsideClick.ts b/packages/excalidraw/hooks/useOutsideClick.ts
index da9a54d08..75d68f6e8 100644
--- a/packages/excalidraw/hooks/useOutsideClick.ts
+++ b/packages/excalidraw/hooks/useOutsideClick.ts
@@ -1,5 +1,6 @@
 import { useEffect } from "react";
-import { EVENT } from "../constants";
+
+import { EVENT } from "@excalidraw/common";
 
 export function useOutsideClick<T extends HTMLElement>(
   ref: React.RefObject<T | null>,
diff --git a/packages/excalidraw/hooks/useScrollPosition.ts b/packages/excalidraw/hooks/useScrollPosition.ts
index 0be2eab95..1fb1408b5 100644
--- a/packages/excalidraw/hooks/useScrollPosition.ts
+++ b/packages/excalidraw/hooks/useScrollPosition.ts
@@ -1,6 +1,7 @@
-import { useEffect } from "react";
-import { atom, useAtom } from "../editor-jotai";
 import throttle from "lodash.throttle";
+import { useEffect } from "react";
+
+import { atom, useAtom } from "../editor-jotai";
 
 const scrollPositionAtom = atom<number>(0);
 
diff --git a/packages/excalidraw/i18n.ts b/packages/excalidraw/i18n.ts
index e1da5fc44..3d39893f4 100644
--- a/packages/excalidraw/i18n.ts
+++ b/packages/excalidraw/i18n.ts
@@ -1,7 +1,10 @@
+import { isDevEnv } from "@excalidraw/common";
+
+import type { NestedKeyOf } from "@excalidraw/common/utility-types";
+
+import { useAtomValue, editorJotaiStore, atom } from "./editor-jotai";
 import fallbackLangData from "./locales/en.json";
 import percentages from "./locales/percentages.json";
-import { useAtomValue, editorJotaiStore, atom } from "./editor-jotai";
-import type { NestedKeyOf } from "./utility-types";
 
 const COMPLETION_THRESHOLD = 85;
 
@@ -72,7 +75,7 @@ export const languages: Language[] = [
 ];
 
 const TEST_LANG_CODE = "__test__";
-if (import.meta.env.DEV) {
+if (isDevEnv()) {
   languages.unshift(
     { code: TEST_LANG_CODE, label: "test language" },
     {
diff --git a/packages/excalidraw/index-node.ts b/packages/excalidraw/index-node.ts
index e966b1d52..3b9499149 100644
--- a/packages/excalidraw/index-node.ts
+++ b/packages/excalidraw/index-node.ts
@@ -1,5 +1,7 @@
-import { exportToCanvas } from "./scene/export";
 import { getDefaultAppState } from "./appState";
+import { exportToCanvas } from "./scene/export";
+
+const fs = require("fs");
 
 const { registerFont, createCanvas } = require("canvas");
 
@@ -74,7 +76,6 @@ const canvas = exportToCanvas(
   createCanvas,
 );
 
-const fs = require("fs");
 const out = fs.createWriteStream("test.png");
 const stream = (canvas as any).createPNGStream();
 stream.pipe(out);
diff --git a/packages/excalidraw/index.tsx b/packages/excalidraw/index.tsx
index b4b8574bd..5ea746754 100644
--- a/packages/excalidraw/index.tsx
+++ b/packages/excalidraw/index.tsx
@@ -1,7 +1,15 @@
 import React, { useEffect } from "react";
-import { InitializeApp } from "./components/InitializeApp";
+
+import { DEFAULT_UI_OPTIONS, isShallowEqual } from "@excalidraw/common";
+
 import App from "./components/App";
-import { isShallowEqual } from "./utils";
+import { InitializeApp } from "./components/InitializeApp";
+import Footer from "./components/footer/FooterCenter";
+import LiveCollaborationTrigger from "./components/live-collaboration/LiveCollaborationTrigger";
+import MainMenu from "./components/main-menu/MainMenu";
+import WelcomeScreen from "./components/welcome-screen/WelcomeScreen";
+import { defaultLang } from "./i18n";
+import { EditorJotaiProvider, editorJotaiStore } from "./editor-jotai";
 import polyfill from "./polyfill";
 
 import "./css/app.scss";
@@ -9,13 +17,6 @@ import "./css/styles.scss";
 import "./fonts/fonts.css";
 
 import type { AppProps, ExcalidrawProps } from "./types";
-import { defaultLang } from "./i18n";
-import { DEFAULT_UI_OPTIONS } from "./constants";
-import { EditorJotaiProvider, editorJotaiStore } from "./editor-jotai";
-import Footer from "./components/footer/FooterCenter";
-import MainMenu from "./components/main-menu/MainMenu";
-import WelcomeScreen from "./components/welcome-screen/WelcomeScreen";
-import LiveCollaborationTrigger from "./components/live-collaboration/LiveCollaborationTrigger";
 
 polyfill();
 
@@ -214,10 +215,12 @@ export {
   getSceneVersion,
   hashElementsVersion,
   hashString,
-  isInvisiblySmallElement,
   getNonDeletedElements,
-  getTextFromElements,
-} from "./element";
+} from "@excalidraw/element";
+
+export { getTextFromElements } from "@excalidraw/element/textElement";
+export { isInvisiblySmallElement } from "@excalidraw/element/sizeHelpers";
+
 export { defaultLang, useI18n, languages } from "./i18n";
 export {
   restore,
@@ -241,9 +244,9 @@ export {
   loadSceneOrLibraryFromBlob,
   loadLibraryFromBlob,
 } from "./data/blob";
-export { getFreeDrawSvgPath } from "./renderer/renderElement";
+export { getFreeDrawSvgPath } from "@excalidraw/element/renderElement";
 export { mergeLibraryItems, getLibraryItemsHash } from "./data/library";
-export { isLinearElement } from "./element/typeChecks";
+export { isLinearElement } from "@excalidraw/element/typeChecks";
 
 export {
   FONT_FAMILY,
@@ -252,13 +255,14 @@ export {
   ROUNDNESS,
   DEFAULT_LASER_COLOR,
   UserIdleState,
-} from "./constants";
+  normalizeLink,
+} from "@excalidraw/common";
 
 export {
   mutateElement,
   newElementWith,
   bumpVersion,
-} from "./element/mutateElement";
+} from "@excalidraw/element/mutateElement";
 
 export { CaptureUpdateAction } from "./store";
 
@@ -267,7 +271,7 @@ export { parseLibraryTokensFromUrl, useHandleLibrary } from "./data/library";
 export {
   sceneCoordsToViewportCoords,
   viewportCoordsToSceneCoords,
-} from "./utils";
+} from "@excalidraw/common";
 
 export { Sidebar } from "./components/Sidebar/Sidebar";
 export { Button } from "./components/Button";
@@ -282,10 +286,12 @@ export { DefaultSidebar } from "./components/DefaultSidebar";
 export { TTDDialog } from "./components/TTDDialog/TTDDialog";
 export { TTDDialogTrigger } from "./components/TTDDialog/TTDDialogTrigger";
 
-export { normalizeLink } from "./data/url";
 export { zoomToFitBounds } from "./actions/actionCanvas";
 export { convertToExcalidrawElements } from "./data/transform";
-export { getCommonBounds, getVisibleSceneBounds } from "./element/bounds";
+export {
+  getCommonBounds,
+  getVisibleSceneBounds,
+} from "@excalidraw/element/bounds";
 
 export {
   elementsOverlappingBBox,
@@ -295,6 +301,6 @@ export {
 
 export { DiagramToCodePlugin } from "./components/DiagramToCodePlugin/DiagramToCodePlugin";
 export { getDataURL } from "./data/blob";
-export { isElementLink } from "./element/elementLink";
+export { isElementLink } from "@excalidraw/element/elementLink";
 
-export { setCustomTextMetricsProvider } from "./element/textMeasurements";
+export { setCustomTextMetricsProvider } from "@excalidraw/element/textMeasurements";
diff --git a/packages/excalidraw/laser-trails.ts b/packages/excalidraw/laser-trails.ts
index b7733baed..7956ae5d2 100644
--- a/packages/excalidraw/laser-trails.ts
+++ b/packages/excalidraw/laser-trails.ts
@@ -1,12 +1,14 @@
+import { DEFAULT_LASER_COLOR, easeOut } from "@excalidraw/common";
+
 import type { LaserPointerOptions } from "@excalidraw/laser-pointer";
-import type { Trail } from "./animated-trail";
+
 import { AnimatedTrail } from "./animated-trail";
+import { getClientColor } from "./clients";
+
+import type { Trail } from "./animated-trail";
 import type { AnimationFrameHandler } from "./animation-frame-handler";
 import type App from "./components/App";
 import type { 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;
diff --git a/packages/excalidraw/package.json b/packages/excalidraw/package.json
index a545ed7f7..29239b486 100644
--- a/packages/excalidraw/package.json
+++ b/packages/excalidraw/package.json
@@ -6,6 +6,18 @@
   "main": "./dist/prod/index.js",
   "module": "./dist/prod/index.js",
   "exports": {
+    "./common/*": {
+      "types": "./dist/types/common/src/*.d.ts"
+    },
+    "./element/*": {
+      "types": "./dist/types/element/src/*.d.ts"
+    },
+    "./math/*": {
+      "types": "./dist/types/math/src/*.d.ts"
+    },
+    "./utils/*": {
+      "types": "./dist/types/utils/src/*.d.ts"
+    },
     "./*": {
       "types": "./dist/types/excalidraw/*.d.ts"
     },
diff --git a/packages/excalidraw/reactUtils.ts b/packages/excalidraw/reactUtils.ts
index 535302d42..a779fcfcc 100644
--- a/packages/excalidraw/reactUtils.ts
+++ b/packages/excalidraw/reactUtils.ts
@@ -2,9 +2,10 @@
  * @param func handler taking at most single parameter (event).
  */
 
-import { unstable_batchedUpdates } from "react-dom";
 import { version as ReactVersion } from "react";
-import { throttleRAF } from "./utils";
+import { unstable_batchedUpdates } from "react-dom";
+
+import { throttleRAF } from "@excalidraw/common";
 
 export const withBatchedUpdates = <
   TFunction extends ((event: any) => void) | (() => void),
diff --git a/packages/excalidraw/renderer/helpers.ts b/packages/excalidraw/renderer/helpers.ts
index 90f40099f..765ef4294 100644
--- a/packages/excalidraw/renderer/helpers.ts
+++ b/packages/excalidraw/renderer/helpers.ts
@@ -1,8 +1,7 @@
-import type { StaticCanvasAppState, AppState } from "../types";
+import { THEME, THEME_FILTER } from "@excalidraw/common";
 
 import type { StaticCanvasRenderConfig } from "../scene/types";
-
-import { THEME, THEME_FILTER } from "../constants";
+import type { StaticCanvasAppState, AppState } from "../types";
 
 export const fillCircle = (
   context: CanvasRenderingContext2D,
diff --git a/packages/excalidraw/renderer/interactiveScene.ts b/packages/excalidraw/renderer/interactiveScene.ts
index 9aa832770..3000c206c 100644
--- a/packages/excalidraw/renderer/interactiveScene.ts
+++ b/packages/excalidraw/renderer/interactiveScene.ts
@@ -1,67 +1,66 @@
+import oc from "open-color";
 import {
-  getElementAbsoluteCoords,
-  getTransformHandlesFromCoords,
-  getTransformHandles,
-  getCommonBounds,
-} from "../element";
+  pointFrom,
+  type GlobalPoint,
+  type LocalPoint,
+  type Radians,
+} from "@excalidraw/math";
 
-import { roundRect } from "../renderer/roundRect";
-
-import {
-  getScrollBars,
-  SCROLLBAR_COLOR,
-  SCROLLBAR_WIDTH,
-} from "../scene/scrollbars";
-
-import { renderSelectionElement } from "../renderer/renderElement";
-import { getClientColor, renderRemoteCursors } from "../clients";
-import {
-  isSelectedViaGroup,
-  getSelectedGroupIds,
-  getElementsInGroup,
-  selectGroupsFromGivenElements,
-} from "../groups";
-import type {
-  TransformHandles,
-  TransformHandleType,
-} from "../element/transformHandles";
-import {
-  getOmitSidesForDevice,
-  shouldShowBoundingBox,
-} from "../element/transformHandles";
-import { arrayToMap, invariant, throttleRAF } from "../utils";
 import {
   DEFAULT_TRANSFORM_HANDLE_SPACING,
   FRAME_STYLE,
   THEME,
-} from "../constants";
-import { type InteractiveCanvasAppState } from "../types";
+  arrayToMap,
+  invariant,
+  throttleRAF,
+} from "@excalidraw/common";
 
-import { renderSnaps } from "../renderer/renderSnaps";
-
-import type {
-  SuggestedBinding,
-  SuggestedPointBinding,
-} from "../element/binding";
 import {
   BINDING_HIGHLIGHT_OFFSET,
   BINDING_HIGHLIGHT_THICKNESS,
   maxBindingGap,
-} from "../element/binding";
-import { LinearElementEditor } from "../element/linearElementEditor";
+} from "@excalidraw/element/binding";
+import { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
 import {
-  bootstrapCanvas,
-  fillCircle,
-  getNormalizedCanvasDimensions,
-} from "./helpers";
-import oc from "open-color";
+  getOmitSidesForDevice,
+  getTransformHandles,
+  getTransformHandlesFromCoords,
+  shouldShowBoundingBox,
+} from "@excalidraw/element/transformHandles";
 import {
   isElbowArrow,
   isFrameLikeElement,
   isImageElement,
   isLinearElement,
   isTextElement,
-} from "../element/typeChecks";
+} from "@excalidraw/element/typeChecks";
+
+import { getCornerRadius } from "@excalidraw/element/shapes";
+
+import { renderSelectionElement } from "@excalidraw/element/renderElement";
+
+import {
+  isSelectedViaGroup,
+  getSelectedGroupIds,
+  getElementsInGroup,
+  selectGroupsFromGivenElements,
+} from "@excalidraw/element/groups";
+
+import {
+  getCommonBounds,
+  getElementAbsoluteCoords,
+} from "@excalidraw/element/bounds";
+
+import type {
+  SuggestedBinding,
+  SuggestedPointBinding,
+} from "@excalidraw/element/binding";
+
+import type {
+  TransformHandles,
+  TransformHandleType,
+} from "@excalidraw/element/transformHandles";
+
 import type {
   ElementsMap,
   ExcalidrawBindableElement,
@@ -72,19 +71,30 @@ import type {
   ExcalidrawTextElement,
   GroupId,
   NonDeleted,
-} from "../element/types";
+} from "@excalidraw/element/types";
+
+import { renderSnaps } from "../renderer/renderSnaps";
+import { roundRect } from "../renderer/roundRect";
+import {
+  getScrollBars,
+  SCROLLBAR_COLOR,
+  SCROLLBAR_WIDTH,
+} from "../scene/scrollbars";
+import { type InteractiveCanvasAppState } from "../types";
+
+import { getClientColor, renderRemoteCursors } from "../clients";
+
+import {
+  bootstrapCanvas,
+  fillCircle,
+  getNormalizedCanvasDimensions,
+} from "./helpers";
+
 import type {
   InteractiveCanvasRenderConfig,
   InteractiveSceneRenderConfig,
   RenderableElementsMap,
 } from "../scene/types";
-import {
-  pointFrom,
-  type GlobalPoint,
-  type LocalPoint,
-  type Radians,
-} from "@excalidraw/math";
-import { getCornerRadius } from "../shapes";
 
 const renderElbowArrowMidPointHighlight = (
   context: CanvasRenderingContext2D,
@@ -888,23 +898,24 @@ const _renderInteractiveScene = ({
     );
   }
 
-  if (
-    isElbowArrow(selectedElements[0]) &&
-    appState.selectedLinearElement &&
-    appState.selectedLinearElement.segmentMidPointHoveredCoords
-  ) {
-    renderElbowArrowMidPointHighlight(context, appState);
-  } else if (
-    appState.selectedLinearElement &&
-    appState.selectedLinearElement.hoverPointIndex >= 0 &&
-    !(
-      isElbowArrow(selectedElements[0]) &&
-      appState.selectedLinearElement.hoverPointIndex > 0 &&
-      appState.selectedLinearElement.hoverPointIndex <
-        selectedElements[0].points.length - 1
-    )
-  ) {
-    renderLinearElementPointHighlight(context, appState, elementsMap);
+  // Arrows have a different highlight behavior when
+  // they are the only selected element
+  if (appState.selectedLinearElement) {
+    const editor = appState.selectedLinearElement;
+    const firstSelectedLinear = selectedElements.find(
+      (el) => el.id === editor.elementId, // Don't forget bound text elements!
+    );
+
+    if (editor.segmentMidPointHoveredCoords) {
+      renderElbowArrowMidPointHighlight(context, appState);
+    } else if (
+      isElbowArrow(firstSelectedLinear)
+        ? editor.hoverPointIndex === 0 ||
+          editor.hoverPointIndex === firstSelectedLinear.points.length - 1
+        : editor.hoverPointIndex >= 0
+    ) {
+      renderLinearElementPointHighlight(context, appState, elementsMap);
+    }
   }
 
   // Paint selected elements
@@ -1075,7 +1086,7 @@ const _renderInteractiveScene = ({
       const dashedLinePadding =
         (DEFAULT_TRANSFORM_HANDLE_SPACING * 2) / appState.zoom.value;
       context.fillStyle = oc.white;
-      const [x1, y1, x2, y2] = getCommonBounds(selectedElements);
+      const [x1, y1, x2, y2] = getCommonBounds(selectedElements, elementsMap);
       const initialLineDash = context.getLineDash();
       context.setLineDash([2 / appState.zoom.value]);
       const lineWidth = context.lineWidth;
diff --git a/packages/excalidraw/renderer/renderNewElementScene.ts b/packages/excalidraw/renderer/renderNewElementScene.ts
index caa7f581c..bbc14654a 100644
--- a/packages/excalidraw/renderer/renderNewElementScene.ts
+++ b/packages/excalidraw/renderer/renderNewElementScene.ts
@@ -1,7 +1,10 @@
-import type { NewElementSceneRenderConfig } from "../scene/types";
-import { throttleRAF } from "../utils";
+import { throttleRAF } from "@excalidraw/common";
+
+import { renderElement } from "@excalidraw/element/renderElement";
+
 import { bootstrapCanvas, getNormalizedCanvasDimensions } from "./helpers";
-import { renderElement } from "./renderElement";
+
+import type { NewElementSceneRenderConfig } from "../scene/types";
 
 const _renderNewElementScene = ({
   canvas,
diff --git a/packages/excalidraw/renderer/renderSnaps.ts b/packages/excalidraw/renderer/renderSnaps.ts
index 878e8e523..dd131f779 100644
--- a/packages/excalidraw/renderer/renderSnaps.ts
+++ b/packages/excalidraw/renderer/renderSnaps.ts
@@ -1,5 +1,7 @@
 import { pointFrom, type GlobalPoint, type LocalPoint } from "@excalidraw/math";
-import { THEME } from "../constants";
+
+import { THEME } from "@excalidraw/common";
+
 import type { PointSnapLine, PointerSnapLine } from "../snapping";
 import type { InteractiveCanvasAppState } from "../types";
 
diff --git a/packages/excalidraw/renderer/staticScene.ts b/packages/excalidraw/renderer/staticScene.ts
index 90ed8af43..16743ff91 100644
--- a/packages/excalidraw/renderer/staticScene.ts
+++ b/packages/excalidraw/renderer/staticScene.ts
@@ -1,37 +1,41 @@
-import { FRAME_STYLE } from "../constants";
-import { getElementAbsoluteCoords } from "../element";
-
-import {
-  elementOverlapsWithFrame,
-  getTargetFrame,
-  shouldApplyFrameClip,
-} from "../frame";
+import { FRAME_STYLE, throttleRAF } from "@excalidraw/common";
+import { isElementLink } from "@excalidraw/element/elementLink";
+import { createPlaceholderEmbeddableLabel } from "@excalidraw/element/embeddable";
+import { getBoundTextElement } from "@excalidraw/element/textElement";
 import {
   isEmbeddableElement,
   isIframeLikeElement,
   isTextElement,
-} from "../element/typeChecks";
-import { renderElement } from "../renderer/renderElement";
-import { createPlaceholderEmbeddableLabel } from "../element/embeddable";
-import type { StaticCanvasAppState, Zoom } from "../types";
+} from "@excalidraw/element/typeChecks";
+import {
+  elementOverlapsWithFrame,
+  getTargetFrame,
+  shouldApplyFrameClip,
+} from "@excalidraw/element/frame";
+
+import { renderElement } from "@excalidraw/element/renderElement";
+
+import { getElementAbsoluteCoords } from "@excalidraw/element/bounds";
+
 import type {
   ElementsMap,
   ExcalidrawFrameLikeElement,
   NonDeletedExcalidrawElement,
-} from "../element/types";
-import type {
-  StaticCanvasRenderConfig,
-  StaticSceneRenderConfig,
-} from "../scene/types";
+} from "@excalidraw/element/types";
+
 import {
   EXTERNAL_LINK_IMG,
   ELEMENT_LINK_IMG,
   getLinkHandleFromCoords,
 } from "../components/hyperlink/helpers";
+
 import { bootstrapCanvas, getNormalizedCanvasDimensions } from "./helpers";
-import { throttleRAF } from "../utils";
-import { getBoundTextElement } from "../element/textElement";
-import { isElementLink } from "../element/elementLink";
+
+import type {
+  StaticCanvasRenderConfig,
+  StaticSceneRenderConfig,
+} from "../scene/types";
+import type { StaticCanvasAppState, Zoom } from "../types";
 
 const GridLineColor = {
   Bold: "#dddddd",
diff --git a/packages/excalidraw/renderer/staticSvgScene.ts b/packages/excalidraw/renderer/staticSvgScene.ts
index b14faf7f4..0d3f5bad9 100644
--- a/packages/excalidraw/renderer/staticSvgScene.ts
+++ b/packages/excalidraw/renderer/staticSvgScene.ts
@@ -1,43 +1,56 @@
-import type { Drawable } from "roughjs/bin/core";
-import type { RoughSVG } from "roughjs/bin/svg";
 import {
   FRAME_STYLE,
   MAX_DECIMALS_FOR_SVG_EXPORT,
   MIME_TYPES,
   SVG_NS,
-} from "../constants";
-import { normalizeLink, toValidURL } from "../data/url";
-import { getElementAbsoluteCoords, hashString } from "../element";
+  getFontFamilyString,
+  isRTL,
+  isTestEnv,
+  getVerticalOffset,
+} from "@excalidraw/common";
+import { normalizeLink, toValidURL } from "@excalidraw/common";
+import { hashString } from "@excalidraw/element";
+import { getUncroppedWidthAndHeight } from "@excalidraw/element/cropElement";
 import {
   createPlaceholderEmbeddableLabel,
   getEmbedLink,
-} from "../element/embeddable";
-import { LinearElementEditor } from "../element/linearElementEditor";
+} from "@excalidraw/element/embeddable";
+import { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
 import {
   getBoundTextElement,
   getContainerElement,
-} from "../element/textElement";
+} from "@excalidraw/element/textElement";
+import { getLineHeightInPx } from "@excalidraw/element/textMeasurements";
 import {
   isArrowElement,
   isIframeLikeElement,
   isInitializedImageElement,
   isTextElement,
-} from "../element/typeChecks";
+} from "@excalidraw/element/typeChecks";
+
+import { getContainingFrame } from "@excalidraw/element/frame";
+
+import { getCornerRadius, isPathALoop } from "@excalidraw/element/shapes";
+
+import { ShapeCache } from "@excalidraw/element/ShapeCache";
+
+import {
+  getFreeDrawSvgPath,
+  IMAGE_INVERT_FILTER,
+} from "@excalidraw/element/renderElement";
+
+import { getElementAbsoluteCoords } from "@excalidraw/element/bounds";
+
 import type {
   ExcalidrawElement,
   ExcalidrawTextElementWithContainer,
   NonDeletedExcalidrawElement,
-} from "../element/types";
-import { getContainingFrame } from "../frame";
-import { ShapeCache } from "../scene/ShapeCache";
+} from "@excalidraw/element/types";
+
 import type { RenderableElementsMap, SVGRenderConfig } from "../scene/types";
 import type { AppState, BinaryFiles } from "../types";
-import { getFontFamilyString, isRTL, isTestEnv } from "../utils";
-import { getFreeDrawSvgPath, IMAGE_INVERT_FILTER } from "./renderElement";
-import { getVerticalOffset } from "../fonts";
-import { getCornerRadius, isPathALoop } from "../shapes";
-import { getUncroppedWidthAndHeight } from "../element/cropElement";
-import { getLineHeightInPx } from "../element/textMeasurements";
+import type { Drawable } from "roughjs/bin/core";
+import type { RoughSVG } from "roughjs/bin/svg";
 
 const roughSVGDrawWithPrecision = (
   rsvg: RoughSVG,
diff --git a/packages/excalidraw/scene/Renderer.ts b/packages/excalidraw/scene/Renderer.ts
index 8048d20c1..e22c997ed 100644
--- a/packages/excalidraw/scene/Renderer.ts
+++ b/packages/excalidraw/scene/Renderer.ts
@@ -1,18 +1,22 @@
-import { isElementInViewport } from "../element/sizeHelpers";
-import { isImageElement } from "../element/typeChecks";
+import { isElementInViewport } from "@excalidraw/element/sizeHelpers";
+import { isImageElement } from "@excalidraw/element/typeChecks";
+
+import { memoize, toBrandedType } from "@excalidraw/common";
+
 import type {
   ExcalidrawElement,
   NonDeletedElementsMap,
   NonDeletedExcalidrawElement,
-} from "../element/types";
+} from "@excalidraw/element/types";
+
 import { renderInteractiveSceneThrottled } from "../renderer/interactiveScene";
 import { renderStaticSceneThrottled } from "../renderer/staticScene";
 
-import type { AppState } from "../types";
-import { memoize, toBrandedType } from "../utils";
 import type Scene from "./Scene";
 import type { RenderableElementsMap } from "./types";
 
+import type { AppState } from "../types";
+
 export class Renderer {
   private scene: Scene;
 
diff --git a/packages/excalidraw/scene/Scene.ts b/packages/excalidraw/scene/Scene.ts
index 99bb9e1e4..dc66837fb 100644
--- a/packages/excalidraw/scene/Scene.ts
+++ b/packages/excalidraw/scene/Scene.ts
@@ -1,4 +1,25 @@
 import throttle from "lodash.throttle";
+
+import {
+  randomInteger,
+  arrayToMap,
+  toBrandedType,
+  isDevEnv,
+  isTestEnv,
+} from "@excalidraw/common";
+import { isNonDeletedElement } from "@excalidraw/element";
+import { isFrameLikeElement } from "@excalidraw/element/typeChecks";
+import { getElementsInGroup } from "@excalidraw/element/groups";
+
+import {
+  syncInvalidIndices,
+  syncMovedIndices,
+  validateFractionalIndices,
+} from "@excalidraw/element/fractionalIndex";
+
+import { getSelectedElements } from "@excalidraw/element/selection";
+
+import type { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
 import type {
   ExcalidrawElement,
   NonDeletedExcalidrawElement,
@@ -9,23 +30,11 @@ import type {
   NonDeletedSceneElementsMap,
   OrderedExcalidrawElement,
   Ordered,
-} from "../element/types";
-import { isNonDeletedElement } from "../element";
-import type { LinearElementEditor } from "../element/linearElementEditor";
-import { isFrameLikeElement } from "../element/typeChecks";
-import { getSelectedElements } from "./selection";
+} from "@excalidraw/element/types";
+
+import type { Assert, SameType } from "@excalidraw/common/utility-types";
+
 import type { AppState } from "../types";
-import type { Assert, SameType } from "../utility-types";
-import { randomInteger } from "../random";
-import {
-  syncInvalidIndices,
-  syncMovedIndices,
-  validateFractionalIndices,
-} from "../fractionalIndex";
-import { arrayToMap } from "../utils";
-import { toBrandedType } from "../utils";
-import { ENV } from "../constants";
-import { getElementsInGroup } from "../groups";
 
 type ElementIdKey = InstanceType<typeof LinearElementEditor>["elementId"];
 type ElementKey = ExcalidrawElement | ElementIdKey;
@@ -54,14 +63,10 @@ const getNonDeletedElements = <T extends ExcalidrawElement>(
 
 const validateIndicesThrottled = throttle(
   (elements: readonly ExcalidrawElement[]) => {
-    if (
-      import.meta.env.DEV ||
-      import.meta.env.MODE === ENV.TEST ||
-      window?.DEBUG_FRACTIONAL_INDICES
-    ) {
+    if (isDevEnv() || isTestEnv() || window?.DEBUG_FRACTIONAL_INDICES) {
       validateFractionalIndices(elements, {
         // throw only in dev & test, to remain functional on `DEBUG_FRACTIONAL_INDICES`
-        shouldThrow: import.meta.env.DEV || import.meta.env.MODE === ENV.TEST,
+        shouldThrow: isDevEnv() || isTestEnv(),
         includeBoundTextValidation: true,
       });
     }
diff --git a/packages/excalidraw/scene/export.ts b/packages/excalidraw/scene/export.ts
index 7b3325690..229992354 100644
--- a/packages/excalidraw/scene/export.ts
+++ b/packages/excalidraw/scene/export.ts
@@ -1,16 +1,5 @@
 import rough from "roughjs/bin/rough";
-import type {
-  ExcalidrawElement,
-  ExcalidrawFrameLikeElement,
-  ExcalidrawTextElement,
-  NonDeletedExcalidrawElement,
-  NonDeletedSceneElementsMap,
-} from "../element/types";
-import type { Bounds } from "../element/bounds";
-import { getCommonBounds, getElementAbsoluteCoords } from "../element/bounds";
-import { renderSceneToSvg } from "../renderer/staticSvgScene";
-import { arrayToMap, distance, getFontString, toBrandedType } from "../utils";
-import type { AppState, BinaryFiles } from "../types";
+
 import {
   DEFAULT_EXPORT_PADDING,
   FRAME_STYLE,
@@ -20,28 +9,61 @@ import {
   THEME_FILTER,
   MIME_TYPES,
   EXPORT_DATA_TYPES,
-} from "../constants";
-import { getDefaultAppState } from "../appState";
-import { serializeAsJSON } from "../data/json";
+  arrayToMap,
+  distance,
+  getFontString,
+  toBrandedType,
+} from "@excalidraw/common";
+
+import {
+  getCommonBounds,
+  getElementAbsoluteCoords,
+} from "@excalidraw/element/bounds";
+
 import {
   getInitializedImageElements,
   updateImageCache,
-} from "../element/image";
+} from "@excalidraw/element/image";
+
+import { newElementWith } from "@excalidraw/element/mutateElement";
+
+import { isFrameLikeElement } from "@excalidraw/element/typeChecks";
+
 import {
   getElementsOverlappingFrame,
   getFrameLikeElements,
   getFrameLikeTitle,
   getRootElements,
-} from "../frame";
-import { newTextElement } from "../element";
-import { type Mutable } from "../utility-types";
-import { newElementWith } from "../element/mutateElement";
-import { isFrameLikeElement } from "../element/typeChecks";
-import type { RenderableElementsMap } from "./types";
-import { syncInvalidIndices } from "../fractionalIndex";
-import { renderStaticScene } from "../renderer/staticScene";
-import { Fonts } from "../fonts";
+} from "@excalidraw/element/frame";
+
+import { syncInvalidIndices } from "@excalidraw/element/fractionalIndex";
+
+import { type Mutable } from "@excalidraw/common/utility-types";
+
+import { newTextElement } from "@excalidraw/element/newElement";
+
+import type { Bounds } from "@excalidraw/element/bounds";
+
+import type {
+  ExcalidrawElement,
+  ExcalidrawFrameLikeElement,
+  ExcalidrawTextElement,
+  NonDeletedExcalidrawElement,
+  NonDeletedSceneElementsMap,
+} from "@excalidraw/element/types";
+
+import { getDefaultAppState } from "../appState";
 import { base64ToString, decode, encode, stringToBase64 } from "../data/encode";
+import { serializeAsJSON } from "../data/json";
+
+import { Fonts } from "../fonts";
+
+import { renderStaticScene } from "../renderer/staticScene";
+import { renderSceneToSvg } from "../renderer/staticSvgScene";
+
+import type { RenderableElementsMap } from "./types";
+
+import type { AppState, BinaryFiles } from "../types";
 
 const truncateText = (element: ExcalidrawTextElement, maxWidth: number) => {
   if (element.width <= maxWidth) {
diff --git a/packages/excalidraw/scene/index.ts b/packages/excalidraw/scene/index.ts
index 1c0b795f1..6f39a7fe2 100644
--- a/packages/excalidraw/scene/index.ts
+++ b/packages/excalidraw/scene/index.ts
@@ -4,7 +4,7 @@ export {
   getCommonAttributeOfSelectedElements,
   getSelectedElements,
   getTargetElements,
-} from "./selection";
+} from "@excalidraw/element/selection";
 export { calculateScrollCenter } from "./scroll";
 export {
   hasBackground,
@@ -12,7 +12,7 @@ export {
   hasStrokeStyle,
   canHaveArrowheads,
   canChangeRoundness,
-} from "./comparisons";
+} from "@excalidraw/element/comparisons";
 export {
   getNormalizedZoom,
   getNormalizedGridSize,
diff --git a/packages/excalidraw/scene/normalize.ts b/packages/excalidraw/scene/normalize.ts
index 2a025fc27..605ae2fa6 100644
--- a/packages/excalidraw/scene/normalize.ts
+++ b/packages/excalidraw/scene/normalize.ts
@@ -1,5 +1,7 @@
+import { MAX_ZOOM, MIN_ZOOM } from "@excalidraw/common";
+
 import { clamp, round } from "@excalidraw/math";
-import { MAX_ZOOM, MIN_ZOOM } from "../constants";
+
 import type { NormalizedZoomValue } from "../types";
 
 export const getNormalizedZoom = (zoom: number): NormalizedZoomValue => {
diff --git a/packages/excalidraw/scene/scroll.ts b/packages/excalidraw/scene/scroll.ts
index 5d059e5b4..a99ad075f 100644
--- a/packages/excalidraw/scene/scroll.ts
+++ b/packages/excalidraw/scene/scroll.ts
@@ -1,15 +1,16 @@
-import type { AppState, Offsets, PointerCoords, Zoom } from "../types";
-import type { ExcalidrawElement } from "../element/types";
-import {
-  getCommonBounds,
-  getClosestElementBounds,
-  getVisibleElements,
-} from "../element";
-
+import { getVisibleElements } from "@excalidraw/element";
 import {
   sceneCoordsToViewportCoords,
   viewportCoordsToSceneCoords,
-} from "../utils";
+} from "@excalidraw/common";
+
+import { getClosestElementBounds } from "@excalidraw/element/bounds";
+
+import { getCommonBounds } from "@excalidraw/element/bounds";
+
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+
+import type { AppState, Offsets, PointerCoords, Zoom } from "../types";
 
 const isOutsideViewPort = (appState: AppState, cords: Array<number>) => {
   const [x1, y1, x2, y2] = cords;
diff --git a/packages/excalidraw/scene/scrollbars.ts b/packages/excalidraw/scene/scrollbars.ts
index 70f7033fb..4fa4349f2 100644
--- a/packages/excalidraw/scene/scrollbars.ts
+++ b/packages/excalidraw/scene/scrollbars.ts
@@ -1,9 +1,13 @@
-import { getCommonBounds } from "../element";
+import { getGlobalCSSVariable } from "@excalidraw/common";
+
+import { getCommonBounds } from "@excalidraw/element/bounds";
+
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+
+import { getLanguage } from "../i18n";
+
 import type { InteractiveCanvasAppState } from "../types";
 import type { ScrollBars } from "./types";
-import { getGlobalCSSVariable } from "../utils";
-import { getLanguage } from "../i18n";
-import type { ExcalidrawElement } from "../element/types";
 
 export const SCROLLBAR_MARGIN = 4;
 export const SCROLLBAR_WIDTH = 6;
diff --git a/packages/excalidraw/scene/types.ts b/packages/excalidraw/scene/types.ts
index c0bfd1bba..08b05a57d 100644
--- a/packages/excalidraw/scene/types.ts
+++ b/packages/excalidraw/scene/types.ts
@@ -1,11 +1,13 @@
-import type { RoughCanvas } from "roughjs/bin/canvas";
-import type { Drawable } from "roughjs/bin/core";
+import type { UserIdleState } from "@excalidraw/common";
 import type {
   ExcalidrawElement,
   NonDeletedElementsMap,
   NonDeletedExcalidrawElement,
   NonDeletedSceneElementsMap,
-} from "../element/types";
+} from "@excalidraw/element/types";
+
+import type { MakeBrand } from "@excalidraw/common/utility-types";
+
 import type {
   AppClassProperties,
   AppState,
@@ -17,8 +19,8 @@ import type {
   Device,
   PendingExcalidrawElements,
 } from "../types";
-import type { MakeBrand } from "../utility-types";
-import type { UserIdleState } from "../constants";
+import type { RoughCanvas } from "roughjs/bin/canvas";
+import type { Drawable } from "roughjs/bin/core";
 
 export type RenderableElementsMap = NonDeletedElementsMap &
   MakeBrand<"RenderableElementsMap">;
diff --git a/packages/excalidraw/snapping.ts b/packages/excalidraw/snapping.ts
index 1b661516e..6ea23bd87 100644
--- a/packages/excalidraw/snapping.ts
+++ b/packages/excalidraw/snapping.ts
@@ -1,4 +1,3 @@
-import type { InclusiveRange } from "@excalidraw/math";
 import {
   pointFrom,
   pointRotateRads,
@@ -7,31 +6,39 @@ import {
   rangesOverlap,
   type GlobalPoint,
 } from "@excalidraw/math";
-import { TOOL_TYPE } from "./constants";
-import type { Bounds } from "./element/bounds";
+
+import { TOOL_TYPE, KEYS } from "@excalidraw/common";
 import {
   getCommonBounds,
   getDraggedElementsBounds,
   getElementAbsoluteCoords,
-} from "./element/bounds";
-import type { MaybeTransformHandleType } from "./element/transformHandles";
-import { isBoundToContainer, isFrameLikeElement } from "./element/typeChecks";
+} from "@excalidraw/element/bounds";
+import {
+  isBoundToContainer,
+  isFrameLikeElement,
+} from "@excalidraw/element/typeChecks";
+
+import { getMaximumGroups } from "@excalidraw/element/groups";
+
+import {
+  getSelectedElements,
+  getVisibleAndNonSelectedElements,
+} from "@excalidraw/element/selection";
+
+import type { InclusiveRange } from "@excalidraw/math";
+
+import type { Bounds } from "@excalidraw/element/bounds";
+import type { MaybeTransformHandleType } from "@excalidraw/element/transformHandles";
 import type {
   ElementsMap,
   ExcalidrawElement,
   NonDeletedExcalidrawElement,
-} from "./element/types";
-import { getMaximumGroups } from "./groups";
-import { KEYS } from "./keys";
-import {
-  getSelectedElements,
-  getVisibleAndNonSelectedElements,
-} from "./scene/selection";
+} from "@excalidraw/element/types";
+
 import type {
   AppClassProperties,
   AppState,
   KeyboardModifiersObject,
-  NullableGridSize,
 } from "./types";
 
 const SNAP_DISTANCE = 8;
@@ -1408,18 +1415,3 @@ export const isActiveToolNonLinearSnappable = (
     activeToolType === TOOL_TYPE.text
   );
 };
-
-// TODO: Rounding this point causes some shake when free drawing
-export const getGridPoint = (
-  x: number,
-  y: number,
-  gridSize: NullableGridSize,
-): [number, number] => {
-  if (gridSize) {
-    return [
-      Math.round(x / gridSize) * gridSize,
-      Math.round(y / gridSize) * gridSize,
-    ];
-  }
-  return [x, y];
-};
diff --git a/packages/excalidraw/store.ts b/packages/excalidraw/store.ts
index 1343347c4..7a5590e54 100644
--- a/packages/excalidraw/store.ts
+++ b/packages/excalidraw/store.ts
@@ -1,13 +1,19 @@
+import { isDevEnv, isShallowEqual, isTestEnv } from "@excalidraw/common";
+
+import { deepCopyElement } from "@excalidraw/element/duplicate";
+
+import { newElementWith } from "@excalidraw/element/mutateElement";
+
+import type { OrderedExcalidrawElement } from "@excalidraw/element/types";
+
+import type { ValueOf } from "@excalidraw/common/utility-types";
+
 import { getDefaultAppState } from "./appState";
 import { AppStateChange, ElementsChange } from "./change";
-import { ENV } from "./constants";
-import { newElementWith } from "./element/mutateElement";
-import { deepCopyElement } from "./element/newElement";
-import type { OrderedExcalidrawElement } from "./element/types";
+
 import { Emitter } from "./emitter";
+
 import type { AppState, ObservedAppState } from "./types";
-import type { ValueOf } from "./utility-types";
-import { isShallowEqual } from "./utils";
 
 // hidden non-enumerable property for runtime checks
 const hiddenObservedAppStateProp = "__observedAppState";
@@ -255,7 +261,7 @@ export class Store implements IStore {
       const message = `There can be at most three store actions scheduled at the same time, but there are "${this.scheduledActions.size}".`;
       console.error(message, this.scheduledActions.values());
 
-      if (import.meta.env.DEV || import.meta.env.MODE === ENV.TEST) {
+      if (isTestEnv() || isDevEnv()) {
         throw new Error(message);
       }
     }
diff --git a/packages/excalidraw/subset/harfbuzz/harfbuzz-loader.ts b/packages/excalidraw/subset/harfbuzz/harfbuzz-loader.ts
index 9a48d19c4..120dedb7f 100644
--- a/packages/excalidraw/subset/harfbuzz/harfbuzz-loader.ts
+++ b/packages/excalidraw/subset/harfbuzz/harfbuzz-loader.ts
@@ -7,8 +7,8 @@
  * In the future consider separating common utils into a separate shared chunk.
  */
 
-import binary from "./harfbuzz-wasm";
 import bindings from "./harfbuzz-bindings";
+import binary from "./harfbuzz-wasm";
 
 /**
  * Lazy loads wasm and respective bindings for font subsetting based on the harfbuzzjs.
diff --git a/packages/excalidraw/subset/subset-main.ts b/packages/excalidraw/subset/subset-main.ts
index afccf0d20..d5e4ba7be 100644
--- a/packages/excalidraw/subset/subset-main.ts
+++ b/packages/excalidraw/subset/subset-main.ts
@@ -1,6 +1,7 @@
-import { WorkerPool } from "../workers";
-import { isServerEnv, promiseTry } from "../utils";
+import { isServerEnv, promiseTry } from "@excalidraw/common";
+
 import { WorkerInTheMainChunkError, WorkerUrlNotDefinedError } from "../errors";
+import { WorkerPool } from "../workers";
 
 import type { Commands } from "./subset-shared.chunk";
 
diff --git a/packages/excalidraw/subset/subset-shared.chunk.ts b/packages/excalidraw/subset/subset-shared.chunk.ts
index b64a3825e..4e4b88424 100644
--- a/packages/excalidraw/subset/subset-shared.chunk.ts
+++ b/packages/excalidraw/subset/subset-shared.chunk.ts
@@ -7,8 +7,8 @@
  * In the future consider separating common utils into a separate shared chunk.
  */
 
-import loadWoff2 from "./woff2/woff2-loader";
 import loadHbSubset from "./harfbuzz/harfbuzz-loader";
+import loadWoff2 from "./woff2/woff2-loader";
 
 /**
  * Shared commands between the main thread and worker threads.
diff --git a/packages/excalidraw/subset/woff2/woff2-loader.ts b/packages/excalidraw/subset/woff2/woff2-loader.ts
index 446dc9f8b..7d5de3095 100644
--- a/packages/excalidraw/subset/woff2/woff2-loader.ts
+++ b/packages/excalidraw/subset/woff2/woff2-loader.ts
@@ -7,8 +7,8 @@
  * In the future consider separating common utils into a separate shared chunk.
  */
 
-import binary from "./woff2-wasm";
 import bindings from "./woff2-bindings";
+import binary from "./woff2-wasm";
 
 /**
  * Lazy loads wasm and respective bindings for woff2 compression and decompression.
diff --git a/packages/excalidraw/tests/App.test.tsx b/packages/excalidraw/tests/App.test.tsx
index ad62706a5..7a1790cee 100644
--- a/packages/excalidraw/tests/App.test.tsx
+++ b/packages/excalidraw/tests/App.test.tsx
@@ -1,10 +1,11 @@
 import React from "react";
-import * as StaticScene from "../renderer/staticScene";
-import { reseed } from "../random";
-import { render, queryByTestId, unmountComponent } from "../tests/test-utils";
+import { vi } from "vitest";
+
+import { reseed } from "@excalidraw/common";
 
 import { Excalidraw } from "../index";
-import { vi } from "vitest";
+import * as StaticScene from "../renderer/staticScene";
+import { render, queryByTestId, unmountComponent } from "../tests/test-utils";
 
 const renderStaticScene = vi.spyOn(StaticScene, "renderStaticScene");
 
diff --git a/packages/excalidraw/tests/MermaidToExcalidraw.test.tsx b/packages/excalidraw/tests/MermaidToExcalidraw.test.tsx
index 05727a0f4..cedb70487 100644
--- a/packages/excalidraw/tests/MermaidToExcalidraw.test.tsx
+++ b/packages/excalidraw/tests/MermaidToExcalidraw.test.tsx
@@ -1,9 +1,11 @@
 import React from "react";
-import { render, waitFor } from "./test-utils";
-import { Excalidraw } from "../index";
 import { expect } from "vitest";
-import { getTextEditor, updateTextEditor } from "./queries/dom";
+
+import { Excalidraw } from "../index";
+
 import { mockMermaidToExcalidraw } from "./helpers/mocks";
+import { getTextEditor, updateTextEditor } from "./queries/dom";
+import { render, waitFor } from "./test-utils";
 
 mockMermaidToExcalidraw({
   mockRef: true,
diff --git a/packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap
index f77eb8ddb..89629b93e 100644
--- a/packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap
+++ b/packages/excalidraw/tests/__snapshots__/contextmenu.test.tsx.snap
@@ -2606,8 +2606,8 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
   "strokeWidth": 2,
   "type": "rectangle",
   "updated": 1,
-  "version": 4,
-  "versionNonce": 238820263,
+  "version": 5,
+  "versionNonce": 400692809,
   "width": 20,
   "x": 0,
   "y": 10,
diff --git a/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap
index 165c135fe..3f523d005 100644
--- a/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap
+++ b/packages/excalidraw/tests/__snapshots__/history.test.tsx.snap
@@ -818,8 +818,8 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
   "type": "arrow",
   "updated": 1,
   "version": 30,
-  "width": 50,
-  "x": 200,
+  "width": 0,
+  "x": "149.29289",
   "y": 0,
 }
 `;
@@ -852,7 +852,7 @@ History {
                   0,
                 ],
                 [
-                  50,
+                  0,
                   0,
                 ],
               ],
@@ -937,7 +937,7 @@ History {
                   0,
                 ],
                 [
-                  50,
+                  0,
                   0,
                 ],
               ],
@@ -15172,9 +15172,11 @@ History {
             "selectedElementIds": {
               "id61": true,
             },
+            "selectedLinearElementId": "id61",
           },
           "inserted": {
             "selectedElementIds": {},
+            "selectedLinearElementId": null,
           },
         },
       },
@@ -18946,7 +18948,7 @@ exports[`history > singleplayer undo/redo > should support duplication of groups
   "strokeWidth": 2,
   "type": "rectangle",
   "updated": 1,
-  "version": 3,
+  "version": 4,
   "width": 100,
   "x": 10,
   "y": 10,
@@ -18980,7 +18982,7 @@ exports[`history > singleplayer undo/redo > should support duplication of groups
   "strokeWidth": 2,
   "type": "rectangle",
   "updated": 1,
-  "version": 3,
+  "version": 4,
   "width": 100,
   "x": 110,
   "y": 110,
@@ -19014,7 +19016,7 @@ exports[`history > singleplayer undo/redo > should support duplication of groups
   "strokeWidth": 2,
   "type": "rectangle",
   "updated": 1,
-  "version": 6,
+  "version": 7,
   "width": 100,
   "x": 10,
   "y": 10,
@@ -19048,7 +19050,7 @@ exports[`history > singleplayer undo/redo > should support duplication of groups
   "strokeWidth": 2,
   "type": "rectangle",
   "updated": 1,
-  "version": 6,
+  "version": 7,
   "width": 100,
   "x": 110,
   "y": 110,
diff --git a/packages/excalidraw/tests/__snapshots__/move.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/move.test.tsx.snap
index 90236a4dd..4001c3b17 100644
--- a/packages/excalidraw/tests/__snapshots__/move.test.tsx.snap
+++ b/packages/excalidraw/tests/__snapshots__/move.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`duplicate element on move when ALT is clicked > rectangle 5`] = `
   "groupIds": [],
   "height": 50,
   "id": "id2",
-  "index": "a0",
+  "index": "Zz",
   "isDeleted": false,
   "link": null,
   "locked": false,
@@ -26,8 +26,8 @@ exports[`duplicate element on move when ALT is clicked > rectangle 5`] = `
   "strokeWidth": 2,
   "type": "rectangle",
   "updated": 1,
-  "version": 5,
-  "versionNonce": 400692809,
+  "version": 6,
+  "versionNonce": 1604849351,
   "width": 30,
   "x": 30,
   "y": 20,
@@ -45,7 +45,7 @@ exports[`duplicate element on move when ALT is clicked > rectangle 6`] = `
   "groupIds": [],
   "height": 50,
   "id": "id0",
-  "index": "a1",
+  "index": "a0",
   "isDeleted": false,
   "link": null,
   "locked": false,
@@ -60,7 +60,7 @@ exports[`duplicate element on move when ALT is clicked > rectangle 6`] = `
   "strokeWidth": 2,
   "type": "rectangle",
   "updated": 1,
-  "version": 6,
+  "version": 5,
   "versionNonce": 23633383,
   "width": 30,
   "x": -10,
diff --git a/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap
index 5d48ead6c..4e9c659d0 100644
--- a/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap
+++ b/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap
@@ -2139,7 +2139,7 @@ History {
               "frameId": null,
               "groupIds": [],
               "height": 10,
-              "index": "a0",
+              "index": "Zz",
               "isDeleted": false,
               "link": null,
               "locked": false,
@@ -2164,12 +2164,10 @@ History {
         "updated": Map {
           "id0" => Delta {
             "deleted": {
-              "index": "a1",
               "x": 20,
               "y": 20,
             },
             "inserted": {
-              "index": "a0",
               "x": 10,
               "y": 10,
             },
@@ -10631,7 +10629,7 @@ History {
                 "id7",
               ],
               "height": 10,
-              "index": "a0",
+              "index": "Zx",
               "isDeleted": false,
               "link": null,
               "locked": false,
@@ -10664,7 +10662,7 @@ History {
                 "id7",
               ],
               "height": 10,
-              "index": "a1",
+              "index": "Zy",
               "isDeleted": false,
               "link": null,
               "locked": false,
@@ -10697,7 +10695,7 @@ History {
                 "id7",
               ],
               "height": 10,
-              "index": "a2",
+              "index": "Zz",
               "isDeleted": false,
               "link": null,
               "locked": false,
@@ -10722,36 +10720,30 @@ History {
         "updated": Map {
           "id0" => Delta {
             "deleted": {
-              "index": "a3",
               "x": 20,
               "y": 20,
             },
             "inserted": {
-              "index": "a0",
               "x": 10,
               "y": 10,
             },
           },
           "id1" => Delta {
             "deleted": {
-              "index": "a4",
               "x": 40,
               "y": 20,
             },
             "inserted": {
-              "index": "a1",
               "x": 30,
               "y": 10,
             },
           },
           "id2" => Delta {
             "deleted": {
-              "index": "a5",
               "x": 60,
               "y": 20,
             },
             "inserted": {
-              "index": "a2",
               "x": 50,
               "y": 10,
             },
diff --git a/packages/excalidraw/tests/actionStyles.test.tsx b/packages/excalidraw/tests/actionStyles.test.tsx
index abe4a7c00..e81e9e4e4 100644
--- a/packages/excalidraw/tests/actionStyles.test.tsx
+++ b/packages/excalidraw/tests/actionStyles.test.tsx
@@ -1,6 +1,9 @@
 import React from "react";
+
+import { CODES } from "@excalidraw/common";
+
+import { copiedStyles } from "../actions/actionStyles";
 import { Excalidraw } from "../index";
-import { CODES } from "../keys";
 import { API } from "../tests/helpers/api";
 import { Keyboard, Pointer, UI } from "../tests/helpers/ui";
 import {
@@ -10,7 +13,6 @@ import {
   screen,
   togglePopover,
 } from "../tests/test-utils";
-import { copiedStyles } from "../actions/actionStyles";
 
 const { h } = window;
 
diff --git a/packages/excalidraw/tests/appState.test.tsx b/packages/excalidraw/tests/appState.test.tsx
index 4a937cd56..abb7ac176 100644
--- a/packages/excalidraw/tests/appState.test.tsx
+++ b/packages/excalidraw/tests/appState.test.tsx
@@ -1,11 +1,15 @@
 import React from "react";
-import { fireEvent, queryByTestId, render, waitFor } from "./test-utils";
-import { Excalidraw } from "../index";
-import { API } from "./helpers/api";
+
+import { EXPORT_DATA_TYPES, MIME_TYPES } from "@excalidraw/common";
+
+import type { ExcalidrawTextElement } from "@excalidraw/element/types";
+
 import { getDefaultAppState } from "../appState";
-import { EXPORT_DATA_TYPES, MIME_TYPES } from "../constants";
+import { Excalidraw } from "../index";
+
+import { API } from "./helpers/api";
 import { Pointer, UI } from "./helpers/ui";
-import type { ExcalidrawTextElement } from "../element/types";
+import { fireEvent, queryByTestId, render, waitFor } from "./test-utils";
 
 const { h } = window;
 
diff --git a/packages/excalidraw/tests/clipboard.test.tsx b/packages/excalidraw/tests/clipboard.test.tsx
index c2c0a5e2d..0759afd94 100644
--- a/packages/excalidraw/tests/clipboard.test.tsx
+++ b/packages/excalidraw/tests/clipboard.test.tsx
@@ -1,28 +1,33 @@
 import React from "react";
 import { vi } from "vitest";
+
+import { getLineHeightInPx } from "@excalidraw/element/textMeasurements";
+
+import { KEYS, arrayToMap, getLineHeight } from "@excalidraw/common";
+
+import { getElementBounds } from "@excalidraw/element/bounds";
+
+import { createPasteEvent, serializeAsClipboardJSON } from "../clipboard";
+
+import { Excalidraw } from "../index";
+
+import { API } from "./helpers/api";
+import { mockMermaidToExcalidraw } from "./helpers/mocks";
+import { Pointer, Keyboard } from "./helpers/ui";
 import {
   render,
   waitFor,
   GlobalTestState,
   unmountComponent,
 } from "./test-utils";
-import { Pointer, Keyboard } from "./helpers/ui";
-import { Excalidraw } from "../index";
-import { KEYS } from "../keys";
-import { getLineHeightInPx } from "../element/textMeasurements";
-import { getElementBounds } from "../element";
+
 import type { NormalizedZoomValue } from "../types";
-import { API } from "./helpers/api";
-import { createPasteEvent, serializeAsClipboardJSON } from "../clipboard";
-import { arrayToMap } from "../utils";
-import { mockMermaidToExcalidraw } from "./helpers/mocks";
-import { getLineHeight } from "../fonts";
 
 const { h } = window;
 
 const mouse = new Pointer("mouse");
 
-vi.mock("../keys.ts", async (importOriginal) => {
+vi.mock("@excalidraw/common", async (importOriginal) => {
   const module: any = await importOriginal();
   return {
     __esmodule: true,
diff --git a/packages/excalidraw/tests/contextmenu.test.tsx b/packages/excalidraw/tests/contextmenu.test.tsx
index bb3f415f1..ef36e3d52 100644
--- a/packages/excalidraw/tests/contextmenu.test.tsx
+++ b/packages/excalidraw/tests/contextmenu.test.tsx
@@ -1,4 +1,16 @@
 import React from "react";
+import { vi } from "vitest";
+
+import { KEYS, reseed } from "@excalidraw/common";
+
+import { setDateTimeForTests } from "@excalidraw/common";
+
+import { copiedStyles } from "../actions/actionStyles";
+import { Excalidraw } from "../index";
+import * as StaticScene from "../renderer/staticScene";
+
+import { API } from "./helpers/api";
+import { UI, Pointer, Keyboard } from "./helpers/ui";
 import {
   render,
   fireEvent,
@@ -12,16 +24,8 @@ import {
   togglePopover,
   unmountComponent,
 } from "./test-utils";
-import { Excalidraw } from "../index";
-import * as StaticScene from "../renderer/staticScene";
-import { reseed } from "../random";
-import { UI, Pointer, Keyboard } from "./helpers/ui";
-import { KEYS } from "../keys";
+
 import type { ShortcutName } from "../actions/shortcuts";
-import { copiedStyles } from "../actions/actionStyles";
-import { API } from "./helpers/api";
-import { setDateTimeForTests } from "../utils";
-import { vi } from "vitest";
 import type { ActionName } from "../actions/types";
 
 const checkpoint = (name: string) => {
diff --git a/packages/excalidraw/tests/cropElement.test.tsx b/packages/excalidraw/tests/cropElement.test.tsx
index a508f5d64..8011483fa 100644
--- a/packages/excalidraw/tests/cropElement.test.tsx
+++ b/packages/excalidraw/tests/cropElement.test.tsx
@@ -1,16 +1,24 @@
 import React from "react";
 import { vi } from "vitest";
-import { Keyboard, Pointer, UI } from "./helpers/ui";
-import type { ExcalidrawImageElement, ImageCrop } from "../element/types";
-import { act, GlobalTestState, render, unmountComponent } from "./test-utils";
+
+import { KEYS, cloneJSON } from "@excalidraw/common";
+
+import { duplicateElement } from "@excalidraw/element/duplicate";
+
+import type {
+  ExcalidrawImageElement,
+  ImageCrop,
+} from "@excalidraw/element/types";
+
 import { Excalidraw, exportToCanvas, exportToSvg } from "..";
-import { API } from "./helpers/api";
-import type { NormalizedZoomValue } from "../types";
-import { KEYS } from "../keys";
-import { duplicateElement } from "../element";
-import { cloneJSON } from "../utils";
 import { actionFlipHorizontal, actionFlipVertical } from "../actions";
 
+import { API } from "./helpers/api";
+import { Keyboard, Pointer, UI } from "./helpers/ui";
+import { act, GlobalTestState, render, unmountComponent } from "./test-utils";
+
+import type { NormalizedZoomValue } from "../types";
+
 const { h } = window;
 const mouse = new Pointer("mouse");
 
diff --git a/packages/excalidraw/tests/data/reconcile.test.ts b/packages/excalidraw/tests/data/reconcile.test.ts
index f0e8105a1..1c0bf13db 100644
--- a/packages/excalidraw/tests/data/reconcile.test.ts
+++ b/packages/excalidraw/tests/data/reconcile.test.ts
@@ -1,13 +1,17 @@
-import type { RemoteExcalidrawElement } from "../../data/reconcile";
-import { reconcileElements } from "../../data/reconcile";
+import { syncInvalidIndices } from "@excalidraw/element/fractionalIndex";
+
+import { randomInteger, cloneJSON } from "@excalidraw/common";
+
 import type {
   ExcalidrawElement,
   OrderedExcalidrawElement,
-} from "../../element/types";
-import { syncInvalidIndices } from "../../fractionalIndex";
-import { randomInteger } from "../../random";
+} from "@excalidraw/element/types";
+
+import { reconcileElements } from "../../data/reconcile";
+
+import type { RemoteExcalidrawElement } from "../../data/reconcile";
+
 import type { AppState } from "../../types";
-import { cloneJSON } from "../../utils";
 
 type Id = string;
 type ElementLike = {
diff --git a/packages/excalidraw/tests/data/restore.test.ts b/packages/excalidraw/tests/data/restore.test.ts
index 37a27ac6a..4b414bbf1 100644
--- a/packages/excalidraw/tests/data/restore.test.ts
+++ b/packages/excalidraw/tests/data/restore.test.ts
@@ -1,19 +1,24 @@
-import * as restore from "../../data/restore";
+import { pointFrom } from "@excalidraw/math";
+import { vi } from "vitest";
+
+import { DEFAULT_SIDEBAR, FONT_FAMILY, ROUNDNESS } from "@excalidraw/common";
+
+import { newElementWith } from "@excalidraw/element/mutateElement";
+import * as sizeHelpers from "@excalidraw/element/sizeHelpers";
+
 import type {
   ExcalidrawElement,
   ExcalidrawFreeDrawElement,
   ExcalidrawLinearElement,
   ExcalidrawTextElement,
-} from "../../element/types";
-import * as sizeHelpers from "../../element/sizeHelpers";
+} from "@excalidraw/element/types";
+import type { NormalizedZoomValue } from "@excalidraw/excalidraw/types";
+
 import { API } from "../helpers/api";
+import * as restore from "../../data/restore";
 import { getDefaultAppState } from "../../appState";
+
 import type { ImportedDataState } from "../../data/types";
-import type { NormalizedZoomValue } from "../../types";
-import { DEFAULT_SIDEBAR, FONT_FAMILY, ROUNDNESS } from "../../constants";
-import { newElementWith } from "../../element/mutateElement";
-import { vi } from "vitest";
-import { pointFrom } from "@excalidraw/math";
 
 describe("restoreElements", () => {
   const mockSizeHelper = vi.spyOn(sizeHelpers, "isInvisiblySmallElement");
diff --git a/packages/excalidraw/tests/dragCreate.test.tsx b/packages/excalidraw/tests/dragCreate.test.tsx
index 743ba7947..c33da5e7e 100644
--- a/packages/excalidraw/tests/dragCreate.test.tsx
+++ b/packages/excalidraw/tests/dragCreate.test.tsx
@@ -1,8 +1,14 @@
 import React from "react";
+import { vi } from "vitest";
+
+import { KEYS, reseed } from "@excalidraw/common";
+
+import type { ExcalidrawLinearElement } from "@excalidraw/element/types";
+
 import { Excalidraw } from "../index";
-import * as StaticScene from "../renderer/staticScene";
 import * as InteractiveScene from "../renderer/interactiveScene";
-import { KEYS } from "../keys";
+import * as StaticScene from "../renderer/staticScene";
+
 import {
   render,
   fireEvent,
@@ -10,9 +16,6 @@ import {
   restoreOriginalGetBoundingClientRect,
   unmountComponent,
 } from "./test-utils";
-import type { ExcalidrawLinearElement } from "../element/types";
-import { reseed } from "../random";
-import { vi } from "vitest";
 
 unmountComponent();
 
diff --git a/packages/excalidraw/tests/elementLocking.test.tsx b/packages/excalidraw/tests/elementLocking.test.tsx
index 281c26892..45e370ed8 100644
--- a/packages/excalidraw/tests/elementLocking.test.tsx
+++ b/packages/excalidraw/tests/elementLocking.test.tsx
@@ -1,12 +1,16 @@
 import React from "react";
-import { Excalidraw } from "../index";
-import { render, unmountComponent } from "../tests/test-utils";
-import { Keyboard, Pointer, UI } from "../tests/helpers/ui";
-import { KEYS } from "../keys";
-import { API } from "../tests/helpers/api";
+
+import { mutateElement } from "@excalidraw/element/mutateElement";
+
+import { KEYS } from "@excalidraw/common";
+
 import { actionSelectAll } from "../actions";
 import { t } from "../i18n";
-import { mutateElement } from "../element/mutateElement";
+import { Excalidraw } from "../index";
+
+import { API } from "../tests/helpers/api";
+import { Keyboard, Pointer, UI } from "../tests/helpers/ui";
+import { render, unmountComponent } from "../tests/test-utils";
 
 unmountComponent();
 
diff --git a/packages/excalidraw/tests/excalidraw.test.tsx b/packages/excalidraw/tests/excalidraw.test.tsx
index 6fbcf2adc..34135c618 100644
--- a/packages/excalidraw/tests/excalidraw.test.tsx
+++ b/packages/excalidraw/tests/excalidraw.test.tsx
@@ -1,11 +1,14 @@
-import React from "react";
-import { fireEvent, GlobalTestState, toggleMenu, render } from "./test-utils";
-import { Excalidraw, Footer, MainMenu } from "../index";
 import { queryByText, queryByTestId } from "@testing-library/react";
-import { THEME } from "../constants";
-import { t } from "../i18n";
+import React from "react";
 import { useMemo } from "react";
 
+import { THEME } from "@excalidraw/common";
+
+import { t } from "../i18n";
+import { Excalidraw, Footer, MainMenu } from "../index";
+
+import { fireEvent, GlobalTestState, toggleMenu, render } from "./test-utils";
+
 const { h } = window;
 
 describe("<Excalidraw/>", () => {
diff --git a/packages/excalidraw/tests/export.test.tsx b/packages/excalidraw/tests/export.test.tsx
index 3547b2978..a42e56b90 100644
--- a/packages/excalidraw/tests/export.test.tsx
+++ b/packages/excalidraw/tests/export.test.tsx
@@ -1,18 +1,22 @@
 import React from "react";
-import { render, waitFor } from "./test-utils";
-import { Excalidraw } from "../index";
-import { API } from "./helpers/api";
+
+import { SVG_NS } from "@excalidraw/common";
+
+import type { FileId } from "@excalidraw/element/types";
+
+import { getDefaultAppState } from "../appState";
+import { getDataURL } from "../data/blob";
 import { encodePngMetadata } from "../data/image";
 import { serializeAsJSON } from "../data/json";
+import { Excalidraw } from "../index";
 import {
   decodeSvgBase64Payload,
   encodeSvgBase64Payload,
   exportToSvg,
 } from "../scene/export";
-import type { FileId } from "../element/types";
-import { getDataURL } from "../data/blob";
-import { getDefaultAppState } from "../appState";
-import { SVG_NS } from "../constants";
+
+import { API } from "./helpers/api";
+import { render, waitFor } from "./test-utils";
 
 const { h } = window;
 
diff --git a/packages/excalidraw/tests/fitToContent.test.tsx b/packages/excalidraw/tests/fitToContent.test.tsx
index a4f03910b..bfd16c4e1 100644
--- a/packages/excalidraw/tests/fitToContent.test.tsx
+++ b/packages/excalidraw/tests/fitToContent.test.tsx
@@ -1,9 +1,10 @@
 import React from "react";
-import { act, render } from "./test-utils";
-import { API } from "./helpers/api";
+import { vi } from "vitest";
 
 import { Excalidraw } from "../index";
-import { vi } from "vitest";
+
+import { API } from "./helpers/api";
+import { act, render } from "./test-utils";
 
 const { h } = window;
 
diff --git a/packages/excalidraw/tests/fixtures/diagramFixture.ts b/packages/excalidraw/tests/fixtures/diagramFixture.ts
index 72b909af8..8512fed36 100644
--- a/packages/excalidraw/tests/fixtures/diagramFixture.ts
+++ b/packages/excalidraw/tests/fixtures/diagramFixture.ts
@@ -1,4 +1,5 @@
-import { VERSIONS } from "../../constants";
+import { VERSIONS } from "@excalidraw/common";
+
 import {
   diamondFixture,
   ellipseFixture,
diff --git a/packages/excalidraw/tests/fixtures/elementFixture.ts b/packages/excalidraw/tests/fixtures/elementFixture.ts
index f0470ec86..35aabd55f 100644
--- a/packages/excalidraw/tests/fixtures/elementFixture.ts
+++ b/packages/excalidraw/tests/fixtures/elementFixture.ts
@@ -1,6 +1,8 @@
+import { DEFAULT_FONT_FAMILY } from "@excalidraw/common";
+
 import type { Radians } from "@excalidraw/math";
-import { DEFAULT_FONT_FAMILY } from "../../constants";
-import type { ExcalidrawElement } from "../../element/types";
+
+import type { ExcalidrawElement } from "@excalidraw/element/types";
 
 const elementBase: Omit<ExcalidrawElement, "type"> = {
   id: "vWrqOAfkind2qcm7LDAGZ",
diff --git a/packages/excalidraw/tests/flip.test.tsx b/packages/excalidraw/tests/flip.test.tsx
index e3f44b333..22a6c67f8 100644
--- a/packages/excalidraw/tests/flip.test.tsx
+++ b/packages/excalidraw/tests/flip.test.tsx
@@ -1,4 +1,33 @@
 import React from "react";
+import { vi } from "vitest";
+
+import { ROUNDNESS, KEYS, arrayToMap, cloneJSON } from "@excalidraw/common";
+
+import { pointFrom, type Radians } from "@excalidraw/math";
+
+import { getBoundTextElementPosition } from "@excalidraw/element/textElement";
+import { getElementAbsoluteCoords } from "@excalidraw/element/bounds";
+import { newLinearElement } from "@excalidraw/element/newElement";
+
+import type { LocalPoint } from "@excalidraw/math";
+
+import type {
+  ExcalidrawElement,
+  ExcalidrawImageElement,
+  ExcalidrawLinearElement,
+  ExcalidrawTextElementWithContainer,
+  FileId,
+} from "@excalidraw/element/types";
+
+import { actionFlipHorizontal, actionFlipVertical } from "../actions";
+import { createPasteEvent } from "../clipboard";
+import { Excalidraw } from "../index";
+
+// Importing to spy on it and mock the implementation (mocking does not work with simple vi.mock for some reason)
+import * as blobModule from "../data/blob";
+
+import { API } from "./helpers/api";
+import { UI, Pointer, Keyboard } from "./helpers/ui";
 import {
   fireEvent,
   GlobalTestState,
@@ -7,39 +36,18 @@ import {
   unmountComponent,
   waitFor,
 } from "./test-utils";
-import { UI, Pointer, Keyboard } from "./helpers/ui";
-import { API } from "./helpers/api";
-import { actionFlipHorizontal, actionFlipVertical } from "../actions";
-import { getElementAbsoluteCoords } from "../element";
-import type {
-  ExcalidrawElement,
-  ExcalidrawImageElement,
-  ExcalidrawLinearElement,
-  ExcalidrawTextElementWithContainer,
-  FileId,
-} from "../element/types";
-import { newLinearElement } from "../element";
-import { Excalidraw } from "../index";
+
 import type { NormalizedZoomValue } from "../types";
-import { ROUNDNESS } from "../constants";
-import { vi } from "vitest";
-import { KEYS } from "../keys";
-import { getBoundTextElementPosition } from "../element/textElement";
-import { createPasteEvent } from "../clipboard";
-import { arrayToMap, cloneJSON } from "../utils";
-import type { LocalPoint } from "@excalidraw/math";
-import { pointFrom, type Radians } from "@excalidraw/math";
 
 const { h } = window;
 const mouse = new Pointer("mouse");
 
-vi.mock("../data/blob", async (actual) => {
-  const orig: Object = await actual();
-  return {
-    ...orig,
-    resizeImageFile: (imageFile: File) => imageFile,
-    generateIdFromFile: () => "fileId" as FileId,
-  };
+beforeEach(() => {
+  const generateIdSpy = vi.spyOn(blobModule, "generateIdFromFile");
+  const resizeFileSpy = vi.spyOn(blobModule, "resizeImageFile");
+
+  generateIdSpy.mockImplementation(() => Promise.resolve("fileId" as FileId));
+  resizeFileSpy.mockImplementation((file: File) => Promise.resolve(file));
 });
 
 beforeEach(async () => {
diff --git a/packages/excalidraw/tests/helpers/api.ts b/packages/excalidraw/tests/helpers/api.ts
index 218f37116..09aa308a5 100644
--- a/packages/excalidraw/tests/helpers/api.ts
+++ b/packages/excalidraw/tests/helpers/api.ts
@@ -1,3 +1,29 @@
+import fs from "fs";
+import path from "path";
+import util from "util";
+
+import { pointFrom, type LocalPoint, type Radians } from "@excalidraw/math";
+
+import { DEFAULT_VERTICAL_ALIGN, ROUNDNESS, assertNever } from "@excalidraw/common";
+
+import { mutateElement } from "@excalidraw/element/mutateElement";
+import {
+  newArrowElement,
+  newElement,
+  newEmbeddableElement,
+  newFrameElement,
+  newFreeDrawElement,
+  newIframeElement,
+  newImageElement,
+  newLinearElement,
+  newMagicFrameElement,
+  newTextElement,
+} from "@excalidraw/element/newElement";
+
+import { isLinearElementType } from "@excalidraw/element/typeChecks";
+import { getSelectedElements } from "@excalidraw/element/selection";
+import { selectGroupsForSelectedElements } from "@excalidraw/element/groups";
+
 import type {
   ExcalidrawElement,
   ExcalidrawGenericElement,
@@ -12,35 +38,19 @@ import type {
   ExcalidrawElbowArrowElement,
   ExcalidrawArrowElement,
   FixedSegment,
-} from "../../element/types";
-import { newElement, newTextElement, newLinearElement } from "../../element";
-import { DEFAULT_VERTICAL_ALIGN, ROUNDNESS } from "../../constants";
+} from "@excalidraw/element/types";
+
+import type { Mutable } from "@excalidraw/common/utility-types";
+
+import { getMimeType } from "../../data/blob";
+import { createTestHook } from "../../components/App";
 import { getDefaultAppState } from "../../appState";
 import { GlobalTestState, createEvent, fireEvent, act } from "../test-utils";
-import fs from "fs";
-import util from "util";
-import path from "path";
-import { getMimeType } from "../../data/blob";
-import {
-  newArrowElement,
-  newEmbeddableElement,
-  newFrameElement,
-  newFreeDrawElement,
-  newIframeElement,
-  newImageElement,
-  newMagicFrameElement,
-} from "../../element/newElement";
-import type { AppState } from "../../types";
-import { getSelectedElements } from "../../scene/selection";
-import { isLinearElementType } from "../../element/typeChecks";
-import type { Mutable } from "../../utility-types";
-import { assertNever } from "../../utils";
-import type App from "../../components/App";
-import { createTestHook } from "../../components/App";
+
 import type { Action } from "../../actions/types";
-import { mutateElement } from "../../element/mutateElement";
-import { pointFrom, type LocalPoint, type Radians } from "@excalidraw/math";
-import { selectGroupsForSelectedElements } from "../../groups";
+import type App from "../../components/App";
+import type { AppState } from "../../types";
+
 
 const readFile = util.promisify(fs.readFile);
 // so that window.h is available when App.tsx is not imported as well.
diff --git a/packages/excalidraw/tests/helpers/mocks.ts b/packages/excalidraw/tests/helpers/mocks.ts
index a87523ec1..10e1dee2b 100644
--- a/packages/excalidraw/tests/helpers/mocks.ts
+++ b/packages/excalidraw/tests/helpers/mocks.ts
@@ -1,7 +1,8 @@
-import { vi } from "vitest";
 import * as MermaidToExcalidraw from "@excalidraw/mermaid-to-excalidraw";
-import type { parseMermaidToExcalidraw } from "@excalidraw/mermaid-to-excalidraw";
 import React from "react";
+import { vi } from "vitest";
+
+import type { parseMermaidToExcalidraw } from "@excalidraw/mermaid-to-excalidraw";
 
 export const mockMermaidToExcalidraw = (opts: {
   parseMermaidToExcalidraw: typeof parseMermaidToExcalidraw;
diff --git a/packages/excalidraw/tests/helpers/ui.ts b/packages/excalidraw/tests/helpers/ui.ts
index b9b7023c1..c328ae105 100644
--- a/packages/excalidraw/tests/helpers/ui.ts
+++ b/packages/excalidraw/tests/helpers/ui.ts
@@ -1,3 +1,30 @@
+import { pointFrom, pointRotateRads } from "@excalidraw/math";
+
+import {
+  getCommonBounds,
+  getElementPointsCoords,
+} from "@excalidraw/element/bounds";
+import { cropElement } from "@excalidraw/element/cropElement";
+import { mutateElement } from "@excalidraw/element/mutateElement";
+import {
+  getTransformHandles,
+  getTransformHandlesFromCoords,
+  OMIT_SIDES_FOR_FRAME,
+  OMIT_SIDES_FOR_MULTIPLE_ELEMENTS,
+  type TransformHandle,
+  type TransformHandleDirection,
+} from "@excalidraw/element/transformHandles";
+import {
+  isLinearElement,
+  isFreeDrawElement,
+  isTextElement,
+  isFrameLikeElement,
+} from "@excalidraw/element/typeChecks";
+import { KEYS, arrayToMap } from "@excalidraw/common";
+
+import type { GlobalPoint, LocalPoint, Radians } from "@excalidraw/math";
+
+import type { TransformHandleType } from "@excalidraw/element/transformHandles";
 import type {
   ExcalidrawElement,
   ExcalidrawLinearElement,
@@ -9,33 +36,14 @@ import type {
   ExcalidrawTextContainer,
   ExcalidrawTextElementWithContainer,
   ExcalidrawImageElement,
-} from "../../element/types";
-import type { TransformHandleType } from "../../element/transformHandles";
-import {
-  getTransformHandles,
-  getTransformHandlesFromCoords,
-  OMIT_SIDES_FOR_FRAME,
-  OMIT_SIDES_FOR_MULTIPLE_ELEMENTS,
-  type TransformHandle,
-  type TransformHandleDirection,
-} from "../../element/transformHandles";
-import { KEYS } from "../../keys";
-import { act, fireEvent, GlobalTestState, screen } from "../test-utils";
-import { mutateElement } from "../../element/mutateElement";
-import { API } from "./api";
-import {
-  isLinearElement,
-  isFreeDrawElement,
-  isTextElement,
-  isFrameLikeElement,
-} from "../../element/typeChecks";
-import { getCommonBounds, getElementPointsCoords } from "../../element/bounds";
-import { getTextEditor } from "../queries/dom";
-import { arrayToMap } from "../../utils";
+} from "@excalidraw/element/types";
+
 import { createTestHook } from "../../components/App";
-import type { GlobalPoint, LocalPoint, Radians } from "@excalidraw/math";
-import { pointFrom, pointRotateRads } from "@excalidraw/math";
-import { cropElement } from "../../element/cropElement";
+import { getTextEditor } from "../queries/dom";
+import { act, fireEvent, GlobalTestState, screen } from "../test-utils";
+
+import { API } from "./api";
+
 import type { ToolType } from "../../types";
 
 // so that window.h is available when App.tsx is not imported as well.
diff --git a/packages/excalidraw/tests/history.test.tsx b/packages/excalidraw/tests/history.test.tsx
index ffddec49f..8dd65c7a5 100644
--- a/packages/excalidraw/tests/history.test.tsx
+++ b/packages/excalidraw/tests/history.test.tsx
@@ -1,32 +1,30 @@
 import React from "react";
-import "../global.d.ts";
-import * as StaticScene from "../renderer/staticScene";
 import {
-  GlobalTestState,
-  act,
-  assertSelectedElements,
-  render,
-  togglePopover,
-  getCloneByOrigId,
-} from "./test-utils";
-import "../../utils/test-utils";
-import { Excalidraw } from "../index";
-import { Keyboard, Pointer, UI } from "./helpers/ui";
-import { API } from "./helpers/api";
-import { getDefaultAppState } from "../appState";
-import { fireEvent, queryByTestId, waitFor } from "@testing-library/react";
-import { createUndoAction, createRedoAction } from "../actions/actionHistory";
-import { actionToggleViewMode } from "../actions/actionToggleViewMode";
-import { EXPORT_DATA_TYPES, MIME_TYPES, ORIG_ID } from "../constants";
-import type { AppState } from "../types";
-import { arrayToMap } from "../utils";
+  queryByText,
+  fireEvent,
+  queryByTestId,
+  waitFor,
+} from "@testing-library/react";
+import { vi } from "vitest";
+import { pointFrom } from "@excalidraw/math";
+
+import { newElementWith } from "@excalidraw/element/mutateElement";
+
 import {
+  EXPORT_DATA_TYPES,
+  MIME_TYPES,
+  ORIG_ID,
+  KEYS,
+  arrayToMap,
   COLOR_PALETTE,
   DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX,
   DEFAULT_ELEMENT_STROKE_COLOR_INDEX,
-} from "../colors";
-import { KEYS } from "../keys";
-import { newElementWith } from "../element/mutateElement";
+} from "@excalidraw/common";
+
+import "@excalidraw/utils/test-utils";
+
+import type { LocalPoint, Radians } from "@excalidraw/math";
+
 import type {
   ExcalidrawElbowArrowElement,
   ExcalidrawFrameElement,
@@ -36,19 +34,36 @@ import type {
   FixedPointBinding,
   FractionalIndex,
   SceneElementsMap,
-} from "../element/types";
+} from "@excalidraw/element/types";
+
+import "../global.d.ts";
+
 import {
   actionSendBackward,
   actionBringForward,
   actionSendToBack,
 } from "../actions";
-import { vi } from "vitest";
-import { queryByText } from "@testing-library/react";
+import { createUndoAction, createRedoAction } from "../actions/actionHistory";
+import { actionToggleViewMode } from "../actions/actionToggleViewMode";
+import { getDefaultAppState } from "../appState";
 import { HistoryEntry } from "../history";
-import { AppStateChange, ElementsChange } from "../change";
+import { Excalidraw } from "../index";
+import * as StaticScene from "../renderer/staticScene";
 import { Snapshot, CaptureUpdateAction } from "../store";
-import type { LocalPoint, Radians } from "@excalidraw/math";
-import { pointFrom } from "@excalidraw/math";
+import { AppStateChange, ElementsChange } from "../change";
+
+import { API } from "./helpers/api";
+import { Keyboard, Pointer, UI } from "./helpers/ui";
+import {
+  GlobalTestState,
+  act,
+  assertSelectedElements,
+  render,
+  togglePopover,
+  getCloneByOrigId,
+} from "./test-utils";
+
+import type { AppState } from "../types";
 
 const { h } = window;
 
diff --git a/packages/excalidraw/tests/library.test.tsx b/packages/excalidraw/tests/library.test.tsx
index 7b48407b7..d2b6c13c8 100644
--- a/packages/excalidraw/tests/library.test.tsx
+++ b/packages/excalidraw/tests/library.test.tsx
@@ -1,18 +1,23 @@
+import { act, queryByTestId } from "@testing-library/react";
 import React from "react";
 import { vi } from "vitest";
-import { fireEvent, getCloneByOrigId, render, waitFor } from "./test-utils";
-import { act, queryByTestId } from "@testing-library/react";
 
-import { Excalidraw } from "../index";
-import { API } from "./helpers/api";
-import { MIME_TYPES, ORIG_ID } from "../constants";
-import type { LibraryItem, LibraryItems } from "../types";
-import { UI } from "./helpers/ui";
+import { MIME_TYPES, ORIG_ID } from "@excalidraw/common";
+
+import { getCommonBoundingBox } from "@excalidraw/element/bounds";
+
+import type { ExcalidrawGenericElement } from "@excalidraw/element/types";
+
+import { parseLibraryJSON } from "../data/blob";
 import { serializeLibraryAsJSON } from "../data/json";
 import { distributeLibraryItemsOnSquareGrid } from "../data/library";
-import type { ExcalidrawGenericElement } from "../element/types";
-import { getCommonBoundingBox } from "../element/bounds";
-import { parseLibraryJSON } from "../data/blob";
+import { Excalidraw } from "../index";
+
+import { API } from "./helpers/api";
+import { UI } from "./helpers/ui";
+import { fireEvent, getCloneByOrigId, render, waitFor } from "./test-utils";
+
+import type { LibraryItem, LibraryItems } from "../types";
 
 const { h } = window;
 
diff --git a/packages/excalidraw/tests/linearElementEditor.test.tsx b/packages/excalidraw/tests/linearElementEditor.test.tsx
index 98d6058c2..741799d3b 100644
--- a/packages/excalidraw/tests/linearElementEditor.test.tsx
+++ b/packages/excalidraw/tests/linearElementEditor.test.tsx
@@ -1,14 +1,37 @@
+import { pointCenter, pointFrom } from "@excalidraw/math";
+import { act, queryByTestId, queryByText } from "@testing-library/react";
 import React from "react";
+import { vi } from "vitest";
+
+import {
+  ROUNDNESS,
+  VERTICAL_ALIGN,
+  KEYS,
+  reseed,
+  arrayToMap,
+} from "@excalidraw/common";
+
+import { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
+import {
+  getBoundTextElementPosition,
+  getBoundTextMaxWidth,
+} from "@excalidraw/element/textElement";
+import * as textElementUtils from "@excalidraw/element/textElement";
+import { wrapText } from "@excalidraw/element/textWrapping";
+
+import type { GlobalPoint } from "@excalidraw/math";
+
 import type {
   ExcalidrawElement,
   ExcalidrawLinearElement,
   ExcalidrawTextElementWithContainer,
   FontString,
-} from "../element/types";
+} from "@excalidraw/element/types";
+
 import { Excalidraw, mutateElement } from "../index";
-import { reseed } from "../random";
-import * as StaticScene from "../renderer/staticScene";
 import * as InteractiveCanvas from "../renderer/interactiveScene";
+import * as StaticScene from "../renderer/staticScene";
+import { API } from "../tests/helpers/api";
 
 import { Keyboard, Pointer, UI } from "./helpers/ui";
 import {
@@ -18,21 +41,6 @@ import {
   GlobalTestState,
   unmountComponent,
 } from "./test-utils";
-import { API } from "../tests/helpers/api";
-import { KEYS } from "../keys";
-import { LinearElementEditor } from "../element/linearElementEditor";
-import { act, queryByTestId, queryByText } from "@testing-library/react";
-import {
-  getBoundTextElementPosition,
-  getBoundTextMaxWidth,
-} from "../element/textElement";
-import * as textElementUtils from "../element/textElement";
-import { ROUNDNESS, VERTICAL_ALIGN } from "../constants";
-import { vi } from "vitest";
-import { arrayToMap } from "../utils";
-import type { GlobalPoint } from "@excalidraw/math";
-import { pointCenter, pointFrom } from "@excalidraw/math";
-import { wrapText } from "../element/textWrapping";
 
 const renderInteractiveScene = vi.spyOn(
   InteractiveCanvas,
diff --git a/packages/excalidraw/tests/move.test.tsx b/packages/excalidraw/tests/move.test.tsx
index 528f9554d..77fc7e57d 100644
--- a/packages/excalidraw/tests/move.test.tsx
+++ b/packages/excalidraw/tests/move.test.tsx
@@ -1,20 +1,26 @@
 import React from "react";
-import "../../utils/test-utils";
-import { render, fireEvent, act, unmountComponent } from "./test-utils";
-import { Excalidraw } from "../index";
-import * as StaticScene from "../renderer/staticScene";
-import * as InteractiveCanvas from "../renderer/interactiveScene";
-import { reseed } from "../random";
-import { bindOrUnbindLinearElement } from "../element/binding";
+import { vi } from "vitest";
+
+import { bindOrUnbindLinearElement } from "@excalidraw/element/binding";
+
+import { KEYS, reseed } from "@excalidraw/common";
+
+import "@excalidraw/utils/test-utils";
+
 import type {
   ExcalidrawLinearElement,
   NonDeleted,
   ExcalidrawRectangleElement,
-} from "../element/types";
+} from "@excalidraw/element/types";
+
+import type Scene from "@excalidraw/excalidraw/scene/Scene";
+
+import { Excalidraw } from "../index";
+import * as InteractiveCanvas from "../renderer/interactiveScene";
+import * as StaticScene from "../renderer/staticScene";
+
 import { UI, Pointer, Keyboard } from "./helpers/ui";
-import { KEYS } from "../keys";
-import { vi } from "vitest";
-import type Scene from "../scene/Scene";
+import { render, fireEvent, act, unmountComponent } from "./test-utils";
 
 unmountComponent();
 
diff --git a/packages/excalidraw/tests/multiPointCreate.test.tsx b/packages/excalidraw/tests/multiPointCreate.test.tsx
index df94eb9da..cde3c7f98 100644
--- a/packages/excalidraw/tests/multiPointCreate.test.tsx
+++ b/packages/excalidraw/tests/multiPointCreate.test.tsx
@@ -1,4 +1,15 @@
 import React from "react";
+import { vi } from "vitest";
+
+import { KEYS, reseed } from "@excalidraw/common";
+
+import type { ExcalidrawLinearElement } from "@excalidraw/element/types";
+
+import { Excalidraw } from "../index";
+
+import * as InteractiveCanvas from "../renderer/interactiveScene";
+import * as StaticScene from "../renderer/staticScene";
+
 import {
   render,
   fireEvent,
@@ -6,13 +17,6 @@ import {
   restoreOriginalGetBoundingClientRect,
   unmountComponent,
 } from "./test-utils";
-import { Excalidraw } from "../index";
-import * as StaticScene from "../renderer/staticScene";
-import * as InteractiveCanvas from "../renderer/interactiveScene";
-import { KEYS } from "../keys";
-import type { ExcalidrawLinearElement } from "../element/types";
-import { reseed } from "../random";
-import { vi } from "vitest";
 
 unmountComponent();
 
diff --git a/packages/excalidraw/tests/packages/events.test.tsx b/packages/excalidraw/tests/packages/events.test.tsx
index ad8b3c6d9..bc4441c40 100644
--- a/packages/excalidraw/tests/packages/events.test.tsx
+++ b/packages/excalidraw/tests/packages/events.test.tsx
@@ -1,11 +1,14 @@
 import React from "react";
 import { vi } from "vitest";
+
+import { resolvablePromise } from "@excalidraw/common";
+
 import { Excalidraw, CaptureUpdateAction } from "../../index";
-import type { ExcalidrawImperativeAPI } from "../../types";
-import { resolvablePromise } from "../../utils";
-import { render } from "../test-utils";
-import { Pointer } from "../helpers/ui";
 import { API } from "../helpers/api";
+import { Pointer } from "../helpers/ui";
+import { render } from "../test-utils";
+
+import type { ExcalidrawImperativeAPI } from "../../types";
 
 describe("event callbacks", () => {
   const h = window.h;
diff --git a/packages/excalidraw/tests/queries/toolQueries.ts b/packages/excalidraw/tests/queries/toolQueries.ts
index df0afa117..8413bf5fb 100644
--- a/packages/excalidraw/tests/queries/toolQueries.ts
+++ b/packages/excalidraw/tests/queries/toolQueries.ts
@@ -1,6 +1,8 @@
 import { queries, buildQueries } from "@testing-library/react";
-import type { ToolType } from "../../types";
-import { TOOL_TYPE } from "../../constants";
+
+import { TOOL_TYPE } from "@excalidraw/common";
+
+import type { ToolType } from "@excalidraw/excalidraw/types";
 
 const _getAllByToolName = (container: HTMLElement, tool: ToolType | "lock") => {
   const toolTitle = tool === "lock" ? "lock" : TOOL_TYPE[tool];
diff --git a/packages/excalidraw/tests/regressionTests.test.tsx b/packages/excalidraw/tests/regressionTests.test.tsx
index a3e45bca6..68765024e 100644
--- a/packages/excalidraw/tests/regressionTests.test.tsx
+++ b/packages/excalidraw/tests/regressionTests.test.tsx
@@ -1,10 +1,15 @@
 import React from "react";
-import type { ExcalidrawElement } from "../element/types";
-import { CODES, KEYS } from "../keys";
+import { vi } from "vitest";
+
+import { FONT_FAMILY, CODES, KEYS, reseed } from "@excalidraw/common";
+
+import { setDateTimeForTests } from "@excalidraw/common";
+
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+
 import { Excalidraw } from "../index";
-import { reseed } from "../random";
 import * as StaticScene from "../renderer/staticScene";
-import { setDateTimeForTests } from "../utils";
+
 import { API } from "./helpers/api";
 import { Keyboard, Pointer, UI } from "./helpers/ui";
 import {
@@ -15,8 +20,6 @@ import {
   togglePopover,
   unmountComponent,
 } from "./test-utils";
-import { FONT_FAMILY } from "../constants";
-import { vi } from "vitest";
 
 const { h } = window;
 
@@ -1181,3 +1184,7 @@ it(
     expect(API.getSelectedElements().length).toBe(1);
   },
 );
+
+//
+// DEPRECATED: DO NOT ADD TESTS HERE
+//
diff --git a/packages/excalidraw/tests/rotate.test.tsx b/packages/excalidraw/tests/rotate.test.tsx
index 367313ea9..9687b08f2 100644
--- a/packages/excalidraw/tests/rotate.test.tsx
+++ b/packages/excalidraw/tests/rotate.test.tsx
@@ -1,10 +1,13 @@
 import React from "react";
-import { render, unmountComponent } from "./test-utils";
-import { reseed } from "../random";
-import { UI } from "./helpers/ui";
-import { Excalidraw } from "../index";
 import { expect } from "vitest";
 
+import { reseed } from "@excalidraw/common";
+
+import { Excalidraw } from "../index";
+
+import { UI } from "./helpers/ui";
+import { render, unmountComponent } from "./test-utils";
+
 unmountComponent();
 
 beforeEach(() => {
diff --git a/packages/excalidraw/tests/scene/export.test.ts b/packages/excalidraw/tests/scene/export.test.ts
index 6fd8a8b85..3187e2c40 100644
--- a/packages/excalidraw/tests/scene/export.test.ts
+++ b/packages/excalidraw/tests/scene/export.test.ts
@@ -1,8 +1,14 @@
+import { exportToCanvas, exportToSvg } from "@excalidraw/utils";
+
+import { FONT_FAMILY, FRAME_STYLE } from "@excalidraw/common";
+
 import type {
   ExcalidrawTextElement,
   FractionalIndex,
   NonDeletedExcalidrawElement,
-} from "../../element/types";
+} from "@excalidraw/element/types";
+
+import { prepareElementsForExport } from "../../data";
 import * as exportUtils from "../../scene/export";
 import {
   diamondFixture,
@@ -11,9 +17,6 @@ import {
   textFixture,
 } from "../fixtures/elementFixture";
 import { API } from "../helpers/api";
-import { exportToCanvas, exportToSvg } from "@excalidraw/utils";
-import { FONT_FAMILY, FRAME_STYLE } from "../../constants";
-import { prepareElementsForExport } from "../../data";
 
 describe("exportToSvg", () => {
   const ELEMENT_HEIGHT = 100;
diff --git a/packages/excalidraw/tests/scroll.test.tsx b/packages/excalidraw/tests/scroll.test.tsx
index 1a3f80c14..ef5eb3dbf 100644
--- a/packages/excalidraw/tests/scroll.test.tsx
+++ b/packages/excalidraw/tests/scroll.test.tsx
@@ -1,14 +1,17 @@
 import React from "react";
+
+import { KEYS } from "@excalidraw/common";
+
+import { Excalidraw } from "../index";
+
+import { API } from "./helpers/api";
+import { Keyboard } from "./helpers/ui";
 import {
   mockBoundingClientRect,
   render,
   restoreOriginalGetBoundingClientRect,
   waitFor,
 } from "./test-utils";
-import { Excalidraw } from "../index";
-import { API } from "./helpers/api";
-import { Keyboard } from "./helpers/ui";
-import { KEYS } from "../keys";
 
 const { h } = window;
 
diff --git a/packages/excalidraw/tests/search.test.tsx b/packages/excalidraw/tests/search.test.tsx
index 68ad65826..3a42cff62 100644
--- a/packages/excalidraw/tests/search.test.tsx
+++ b/packages/excalidraw/tests/search.test.tsx
@@ -1,12 +1,20 @@
 import React from "react";
-import { act, render, waitFor } from "./test-utils";
+
+import {
+  CANVAS_SEARCH_TAB,
+  CLASSES,
+  DEFAULT_SIDEBAR,
+  KEYS,
+} from "@excalidraw/common";
+
+import type { ExcalidrawTextElement } from "@excalidraw/element/types";
+
 import { Excalidraw } from "../index";
-import { CANVAS_SEARCH_TAB, CLASSES, DEFAULT_SIDEBAR } from "../constants";
-import { Keyboard } from "./helpers/ui";
-import { KEYS } from "../keys";
-import { updateTextEditor } from "./queries/dom";
+
 import { API } from "./helpers/api";
-import type { ExcalidrawTextElement } from "../element/types";
+import { Keyboard } from "./helpers/ui";
+import { updateTextEditor } from "./queries/dom";
+import { act, render, waitFor } from "./test-utils";
 
 const { h } = window;
 
diff --git a/packages/excalidraw/tests/selection.test.tsx b/packages/excalidraw/tests/selection.test.tsx
index 0b1f6e50d..10f4f7ad9 100644
--- a/packages/excalidraw/tests/selection.test.tsx
+++ b/packages/excalidraw/tests/selection.test.tsx
@@ -1,4 +1,16 @@
 import React from "react";
+import { vi } from "vitest";
+
+import { KEYS, reseed } from "@excalidraw/common";
+
+import { SHAPES } from "../components/shapes";
+
+import { Excalidraw } from "../index";
+import * as InteractiveCanvas from "../renderer/interactiveScene";
+import * as StaticScene from "../renderer/staticScene";
+
+import { API } from "./helpers/api";
+import { Keyboard, Pointer, UI } from "./helpers/ui";
 import {
   render,
   fireEvent,
@@ -7,15 +19,6 @@ import {
   assertSelectedElements,
   unmountComponent,
 } from "./test-utils";
-import { Excalidraw } from "../index";
-import * as StaticScene from "../renderer/staticScene";
-import * as InteractiveCanvas from "../renderer/interactiveScene";
-import { KEYS } from "../keys";
-import { reseed } from "../random";
-import { API } from "./helpers/api";
-import { Keyboard, Pointer, UI } from "./helpers/ui";
-import { SHAPES } from "../shapes";
-import { vi } from "vitest";
 
 unmountComponent();
 
diff --git a/packages/excalidraw/tests/shortcuts.test.tsx b/packages/excalidraw/tests/shortcuts.test.tsx
index e02ed0193..d4d1cb0de 100644
--- a/packages/excalidraw/tests/shortcuts.test.tsx
+++ b/packages/excalidraw/tests/shortcuts.test.tsx
@@ -1,6 +1,9 @@
 import React from "react";
-import { KEYS } from "../keys";
+
+import { KEYS } from "@excalidraw/common";
+
 import { Excalidraw } from "../index";
+
 import { API } from "./helpers/api";
 import { Keyboard } from "./helpers/ui";
 import { fireEvent, render, waitFor } from "./test-utils";
diff --git a/packages/excalidraw/tests/test-utils.ts b/packages/excalidraw/tests/test-utils.ts
index 84936f520..b2b8aff9c 100644
--- a/packages/excalidraw/tests/test-utils.ts
+++ b/packages/excalidraw/tests/test-utils.ts
@@ -1,6 +1,4 @@
 import "pepjs";
-
-import type { RenderResult, RenderOptions } from "@testing-library/react";
 import { act } from "@testing-library/react";
 import {
   render,
@@ -9,17 +7,24 @@ import {
   fireEvent,
   cleanup,
 } from "@testing-library/react";
-
-import * as toolQueries from "./queries/toolQueries";
-import type { ImportedDataState } from "../data/types";
-import { STORAGE_KEYS } from "../../../excalidraw-app/app_constants";
-import { getSelectedElements } from "../scene/selection";
-import type { ExcalidrawElement } from "../element/types";
-import { UI } from "./helpers/ui";
 import ansi from "ansicolor";
-import { ORIG_ID } from "../constants";
-import { arrayToMap } from "../utils";
-import type { AllPossibleKeys } from "../utility-types";
+
+import { ORIG_ID, arrayToMap } from "@excalidraw/common";
+
+import { getSelectedElements } from "@excalidraw/element/selection";
+
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+
+import type { AllPossibleKeys } from "@excalidraw/common/utility-types";
+
+import { STORAGE_KEYS } from "../../../excalidraw-app/app_constants";
+
+import { UI } from "./helpers/ui";
+import * as toolQueries from "./queries/toolQueries";
+
+import type { RenderResult, RenderOptions } from "@testing-library/react";
+
+import type { ImportedDataState } from "../data/types";
 
 export { cleanup as unmountComponent };
 
diff --git a/packages/excalidraw/tests/tool.test.tsx b/packages/excalidraw/tests/tool.test.tsx
index 662c61baa..f7c101c1d 100644
--- a/packages/excalidraw/tests/tool.test.tsx
+++ b/packages/excalidraw/tests/tool.test.tsx
@@ -1,9 +1,13 @@
 import React from "react";
+
+import { resolvablePromise } from "@excalidraw/common";
+
 import { Excalidraw } from "../index";
-import type { ExcalidrawImperativeAPI } from "../types";
-import { resolvablePromise } from "../utils";
-import { act, render } from "./test-utils";
+
 import { Pointer } from "./helpers/ui";
+import { act, render } from "./test-utils";
+
+import type { ExcalidrawImperativeAPI } from "../types";
 
 describe("setActiveTool()", () => {
   const h = window.h;
diff --git a/packages/excalidraw/tests/utils.test.ts b/packages/excalidraw/tests/utils.test.ts
index 34944faaa..2dc8c0097 100644
--- a/packages/excalidraw/tests/utils.test.ts
+++ b/packages/excalidraw/tests/utils.test.ts
@@ -1,4 +1,4 @@
-import { isTransparent } from "../utils";
+import { isTransparent } from "@excalidraw/common";
 
 describe("Test isTransparent", () => {
   it("should return true when color is rgb transparent", () => {
diff --git a/packages/excalidraw/tests/viewMode.test.tsx b/packages/excalidraw/tests/viewMode.test.tsx
index 66eca8c7f..0a94055c7 100644
--- a/packages/excalidraw/tests/viewMode.test.tsx
+++ b/packages/excalidraw/tests/viewMode.test.tsx
@@ -1,10 +1,12 @@
 import React from "react";
-import { render, GlobalTestState } from "./test-utils";
+
+import { CURSOR_TYPE, KEYS } from "@excalidraw/common";
+
 import { Excalidraw } from "../index";
-import { KEYS } from "../keys";
-import { Keyboard, Pointer, UI } from "./helpers/ui";
-import { CURSOR_TYPE } from "../constants";
+
 import { API } from "./helpers/api";
+import { Keyboard, Pointer, UI } from "./helpers/ui";
+import { render, GlobalTestState } from "./test-utils";
 
 const mouse = new Pointer("mouse");
 const touch = new Pointer("touch");
diff --git a/packages/excalidraw/tsconfig.json b/packages/excalidraw/tsconfig.json
index f61b8d0af..793fd5abd 100644
--- a/packages/excalidraw/tsconfig.json
+++ b/packages/excalidraw/tsconfig.json
@@ -1,24 +1,8 @@
 {
+  "extends": "../tsconfig.base.json",
   "compilerOptions": {
-    "outDir": "./dist/types",
-    "target": "ESNext",
-    "strict": true,
-    "skipLibCheck": true,
-    "declaration": true,
-    "allowSyntheticDefaultImports": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "resolveJsonModule": true,
-    "jsx": "react-jsx",
-    "emitDeclarationOnly": true,
-    "paths": {
-      "@excalidraw/excalidraw": ["../excalidraw/index.tsx"],
-      "@excalidraw/utils": ["../utils/index.ts"],
-      "@excalidraw/math": ["../math/index.ts"],
-      "@excalidraw/excalidraw/*": ["../excalidraw/*"],
-      "@excalidraw/utils/*": ["../utils/*"],
-      "@excalidraw/math/*": ["../math/*"]
-    }
+    "outDir": "./dist/types"
   },
+  "include": ["**/*"],
   "exclude": ["**/*.test.*", "tests", "types", "examples", "dist"]
 }
diff --git a/packages/excalidraw/types.ts b/packages/excalidraw/types.ts
index c691a5e0f..8cb8c06a1 100644
--- a/packages/excalidraw/types.ts
+++ b/packages/excalidraw/types.ts
@@ -1,5 +1,16 @@
-import type { JSX } from "react";
-import type React from "react";
+import type {
+  IMAGE_MIME_TYPES,
+  UserIdleState,
+  throttleRAF,
+  MIME_TYPES,
+} from "@excalidraw/common";
+
+import type { SuggestedBinding } from "@excalidraw/element/binding";
+
+import type { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
+
+import type { MaybeTransformHandleType } from "@excalidraw/element/transformHandles";
+
 import type {
   PointerType,
   ExcalidrawLinearElement,
@@ -23,26 +34,30 @@ import type {
   ExcalidrawIframeLikeElement,
   OrderedExcalidrawElement,
   ExcalidrawNonSelectionElement,
-} from "./element/types";
+} from "@excalidraw/element/types";
+
+import type {
+  Merge,
+  MaybePromise,
+  ValueOf,
+  MakeBrand,
+} from "@excalidraw/common/utility-types";
+
 import type { Action } from "./actions/types";
-import type { LinearElementEditor } from "./element/linearElementEditor";
-import type { SuggestedBinding } from "./element/binding";
-import type { ImportedDataState } from "./data/types";
-import type App from "./components/App";
-import type { throttleRAF } from "./utils";
 import type { Spreadsheet } from "./charts";
-import type { Language } from "./i18n";
 import type { ClipboardData } from "./clipboard";
-import type { isOverScrollBars } from "./scene/scrollbars";
-import type { MaybeTransformHandleType } from "./element/transformHandles";
+import type App from "./components/App";
 import type Library from "./data/library";
 import type { FileSystemHandle } from "./data/filesystem";
-import type { IMAGE_MIME_TYPES, MIME_TYPES } from "./constants";
 import type { ContextMenuItems } from "./components/ContextMenu";
 import type { SnapLine } from "./snapping";
-import type { Merge, MaybePromise, ValueOf, MakeBrand } from "./utility-types";
 import type { CaptureUpdateActionType } from "./store";
-import type { UserIdleState } from "./constants";
+import type { ImportedDataState } from "./data/types";
+
+import type { Language } from "./i18n";
+import type { isOverScrollBars } from "./scene/scrollbars";
+import type React from "react";
+import type { JSX } from "react";
 
 export type SocketId = string & { _brand: "SocketId" };
 
diff --git a/packages/excalidraw/visualdebug.ts b/packages/excalidraw/visualdebug.ts
index 862f2cf20..9ad1490d1 100644
--- a/packages/excalidraw/visualdebug.ts
+++ b/packages/excalidraw/visualdebug.ts
@@ -1,4 +1,3 @@
-import type { Curve } from "@excalidraw/math";
 import {
   isLineSegment,
   lineSegment,
@@ -6,9 +5,13 @@ import {
   type GlobalPoint,
   type LocalPoint,
 } from "@excalidraw/math";
+
+import { isBounds } from "@excalidraw/element/typeChecks";
+
+import type { Curve } from "@excalidraw/math";
 import type { LineSegment } from "@excalidraw/utils";
-import type { Bounds } from "./element/bounds";
-import { isBounds } from "./element/typeChecks";
+
+import type { Bounds } from "@excalidraw/element/bounds";
 
 // The global data holder to collect the debug operations
 declare global {
diff --git a/packages/excalidraw/vite-env.d.ts b/packages/excalidraw/vite-env.d.ts
index 4292e3b6a..3c53906ab 100644
--- a/packages/excalidraw/vite-env.d.ts
+++ b/packages/excalidraw/vite-env.d.ts
@@ -24,6 +24,8 @@ interface ImportMetaEnv {
   // whether to disable live reload / HMR. Usuaully what you want to do when
   // debugging Service Workers.
   VITE_APP_DEV_DISABLE_LIVE_RELOAD: string;
+  // To enable bounding box for text containers
+  VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX: string;
 
   FAST_REFRESH: string;
 
@@ -34,8 +36,6 @@ interface ImportMetaEnv {
 
   //Debug flags
 
-  // To enable bounding box for text containers
-  VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX: string;
   VITE_APP_DISABLE_SENTRY: string;
   // Set this flag to false if you want to open the overlay by default
   VITE_APP_COLLAPSE_OVERLAY: string;
diff --git a/packages/excalidraw/workers.ts b/packages/excalidraw/workers.ts
index f5964d088..38efda102 100644
--- a/packages/excalidraw/workers.ts
+++ b/packages/excalidraw/workers.ts
@@ -1,5 +1,6 @@
+import { debounce } from "@excalidraw/common";
+
 import { WorkerInTheMainChunkError, WorkerUrlNotDefinedError } from "./errors";
-import { debounce } from "./utils";
 
 class IdleWorker {
   public instance: Worker;
diff --git a/packages/excalidraw/element/textWysiwyg.test.tsx b/packages/excalidraw/wysiwyg/textWysiwyg.test.tsx
similarity index 99%
rename from packages/excalidraw/element/textWysiwyg.test.tsx
rename to packages/excalidraw/wysiwyg/textWysiwyg.test.tsx
index 0842e30fd..959c5a012 100644
--- a/packages/excalidraw/element/textWysiwyg.test.tsx
+++ b/packages/excalidraw/wysiwyg/textWysiwyg.test.tsx
@@ -1,29 +1,36 @@
-import React from "react";
+import { queryByText } from "@testing-library/react";
+
+import { pointFrom } from "@excalidraw/math";
+import { getOriginalContainerHeightFromCache } from "@excalidraw/element/containerCache";
+
+import {
+  CODES,
+  KEYS,
+  FONT_FAMILY,
+  TEXT_ALIGN,
+  VERTICAL_ALIGN,
+} from "@excalidraw/common";
+
+import type {
+  ExcalidrawTextElement,
+  ExcalidrawTextElementWithContainer,
+} from "@excalidraw/element/types";
+
 import { Excalidraw } from "../index";
+import { API } from "../tests/helpers/api";
+import { Keyboard, Pointer, UI } from "../tests/helpers/ui";
+import { getTextEditor, updateTextEditor } from "../tests/queries/dom";
 import {
   GlobalTestState,
   render,
   screen,
   unmountComponent,
 } from "../tests/test-utils";
-import { Keyboard, Pointer, UI } from "../tests/helpers/ui";
-import { CODES, KEYS } from "../keys";
 import {
   fireEvent,
   mockBoundingClientRect,
   restoreOriginalGetBoundingClientRect,
 } from "../tests/test-utils";
-import { queryByText } from "@testing-library/react";
-
-import { FONT_FAMILY, TEXT_ALIGN, VERTICAL_ALIGN } from "../constants";
-import type {
-  ExcalidrawTextElement,
-  ExcalidrawTextElementWithContainer,
-} from "./types";
-import { API } from "../tests/helpers/api";
-import { getOriginalContainerHeightFromCache } from "./containerCache";
-import { getTextEditor, updateTextEditor } from "../tests/queries/dom";
-import { pointFrom } from "@excalidraw/math";
 
 unmountComponent();
 
diff --git a/packages/excalidraw/element/textWysiwyg.tsx b/packages/excalidraw/wysiwyg/textWysiwyg.tsx
similarity index 96%
rename from packages/excalidraw/element/textWysiwyg.tsx
rename to packages/excalidraw/wysiwyg/textWysiwyg.tsx
index a7570862d..b1610125f 100644
--- a/packages/excalidraw/element/textWysiwyg.tsx
+++ b/packages/excalidraw/wysiwyg/textWysiwyg.tsx
@@ -1,25 +1,21 @@
-import { CODES, KEYS } from "../keys";
 import {
+  CODES,
+  KEYS,
+  CLASSES,
+  POINTER_BUTTON,
   isWritableElement,
   getFontString,
   getFontFamilyString,
   isTestEnv,
-} from "../utils";
-import Scene from "../scene/Scene";
+} from "@excalidraw/common";
+
 import {
-  isArrowElement,
-  isBoundToContainer,
-  isTextElement,
-} from "./typeChecks";
-import { CLASSES, POINTER_BUTTON } from "../constants";
-import type {
-  ExcalidrawElement,
-  ExcalidrawLinearElement,
-  ExcalidrawTextElementWithContainer,
-  ExcalidrawTextElement,
-} from "./types";
-import type { AppState } from "../types";
-import { bumpVersion, mutateElement } from "./mutateElement";
+  originalContainerCache,
+  updateOriginalContainerCache,
+} from "@excalidraw/element/containerCache";
+
+import { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
+import { bumpVersion, mutateElement } from "@excalidraw/element/mutateElement";
 import {
   getBoundTextElementId,
   getContainerElement,
@@ -30,8 +26,27 @@ import {
   computeContainerDimensionForBoundText,
   computeBoundTextPosition,
   getBoundTextElement,
-} from "./textElement";
-import { wrapText } from "./textWrapping";
+} from "@excalidraw/element/textElement";
+import { getTextWidth } from "@excalidraw/element/textMeasurements";
+import { normalizeText } from "@excalidraw/element/textMeasurements";
+import { wrapText } from "@excalidraw/element/textWrapping";
+import {
+  isArrowElement,
+  isBoundToContainer,
+  isTextElement,
+} from "@excalidraw/element/typeChecks";
+
+import type {
+  ExcalidrawElement,
+  ExcalidrawLinearElement,
+  ExcalidrawTextElementWithContainer,
+  ExcalidrawTextElement,
+} from "@excalidraw/element/types";
+
+import { actionSaveToActiveFile } from "../actions";
+
+import Scene from "../scene/Scene";
+import { parseClipboard } from "../clipboard";
 import {
   actionDecreaseFontSize,
   actionIncreaseFontSize,
@@ -41,15 +56,9 @@ import {
   actionZoomIn,
   actionZoomOut,
 } from "../actions/actionCanvas";
+
 import type App from "../components/App";
-import { LinearElementEditor } from "./linearElementEditor";
-import { parseClipboard } from "../clipboard";
-import {
-  originalContainerCache,
-  updateOriginalContainerCache,
-} from "./containerCache";
-import { getTextWidth } from "./textMeasurements";
-import { normalizeText } from "./textMeasurements";
+import type { AppState } from "../types";
 
 const getTransform = (
   width: number,
@@ -390,6 +399,10 @@ export const textWysiwyg = ({
       event.preventDefault();
       submittedViaKeyboard = true;
       handleSubmit();
+    } else if (actionSaveToActiveFile.keyTest(event)) {
+      event.preventDefault();
+      handleSubmit();
+      app.actionManager.executeAction(actionSaveToActiveFile);
     } else if (event.key === KEYS.ENTER && event[KEYS.CTRL_OR_CMD]) {
       event.preventDefault();
       if (event.isComposing || event.keyCode === 229) {
diff --git a/packages/math/CHANGELOG.md b/packages/math/CHANGELOG.md
deleted file mode 100644
index e69de29bb..000000000
diff --git a/packages/math/README.md b/packages/math/README.md
index eaa163037..348a9de07 100644
--- a/packages/math/README.md
+++ b/packages/math/README.md
@@ -17,5 +17,3 @@ With PNPM, similarly install the package with this command:
 ```bash
 pnpm add @excalidraw/math
 ```
-
-## API
diff --git a/packages/math/package.json b/packages/math/package.json
index a60c97119..f8b411891 100644
--- a/packages/math/package.json
+++ b/packages/math/package.json
@@ -2,17 +2,18 @@
   "name": "@excalidraw/math",
   "version": "0.1.0",
   "type": "module",
-  "types": "./dist/types/math/index.d.ts",
+  "types": "./dist/types/math/src/index.d.ts",
   "main": "./dist/prod/index.js",
   "module": "./dist/prod/index.js",
   "exports": {
     ".": {
+      "types": "./dist/types/math/src/index.d.ts",
       "development": "./dist/dev/index.js",
       "production": "./dist/prod/index.js",
       "default": "./dist/prod/index.js"
     },
     "./*": {
-      "types": "./../math/dist/types/math/*"
+      "types": "./../math/dist/types/math/src/*.d.ts"
     }
   },
   "files": [
@@ -54,6 +55,6 @@
   "repository": "https://github.com/excalidraw/excalidraw",
   "scripts": {
     "gen:types": "rm -rf types && tsc",
-    "build:esm": "rm -rf dist && node ../../scripts/buildMath.js && yarn gen:types"
+    "build:esm": "rm -rf dist && node ../../scripts/buildBase.js && yarn gen:types"
   }
 }
diff --git a/packages/math/angle.ts b/packages/math/src/angle.ts
similarity index 99%
rename from packages/math/angle.ts
rename to packages/math/src/angle.ts
index 8d473cf55..353dc5dad 100644
--- a/packages/math/angle.ts
+++ b/packages/math/src/angle.ts
@@ -1,3 +1,5 @@
+import { PRECISION } from "./utils";
+
 import type {
   Degrees,
   GlobalPoint,
@@ -5,7 +7,6 @@ import type {
   PolarCoords,
   Radians,
 } from "./types";
-import { PRECISION } from "./utils";
 
 // TODO: Simplify with modulo and fix for angles beyond 4*Math.PI and - 4*Math.PI
 export const normalizeRadians = (angle: Radians): Radians => {
diff --git a/packages/math/curve.ts b/packages/math/src/curve.ts
similarity index 98%
rename from packages/math/curve.ts
rename to packages/math/src/curve.ts
index 9b275ceec..a79fb43a1 100644
--- a/packages/math/curve.ts
+++ b/packages/math/src/curve.ts
@@ -1,6 +1,8 @@
-import type { Bounds } from "../excalidraw/element/bounds";
+import type { Bounds } from "@excalidraw/element/bounds";
+
 import { isPoint, pointDistance, pointFrom } from "./point";
 import { rectangle, rectangleIntersectLineSegment } from "./rectangle";
+
 import type { Curve, GlobalPoint, LineSegment, LocalPoint } from "./types";
 
 /**
diff --git a/packages/math/ellipse.ts b/packages/math/src/ellipse.ts
similarity index 99%
rename from packages/math/ellipse.ts
rename to packages/math/src/ellipse.ts
index c32def0eb..741a77df3 100644
--- a/packages/math/ellipse.ts
+++ b/packages/math/src/ellipse.ts
@@ -4,13 +4,6 @@ import {
   pointFromVector,
   pointsEqual,
 } from "./point";
-import type {
-  Ellipse,
-  GlobalPoint,
-  Line,
-  LineSegment,
-  LocalPoint,
-} from "./types";
 import { PRECISION } from "./utils";
 import {
   vector,
@@ -20,6 +13,14 @@ import {
   vectorScale,
 } from "./vector";
 
+import type {
+  Ellipse,
+  GlobalPoint,
+  Line,
+  LineSegment,
+  LocalPoint,
+} from "./types";
+
 /**
  * Construct an Ellipse object from the parameters
  *
diff --git a/packages/math/index.ts b/packages/math/src/index.ts
similarity index 100%
rename from packages/math/index.ts
rename to packages/math/src/index.ts
diff --git a/packages/math/line.ts b/packages/math/src/line.ts
similarity index 99%
rename from packages/math/line.ts
rename to packages/math/src/line.ts
index bcb4f6d90..889fa08ce 100644
--- a/packages/math/line.ts
+++ b/packages/math/src/line.ts
@@ -1,4 +1,5 @@
 import { pointFrom } from "./point";
+
 import type { GlobalPoint, Line, LocalPoint } from "./types";
 
 /**
diff --git a/packages/math/point.ts b/packages/math/src/point.ts
similarity index 99%
rename from packages/math/point.ts
rename to packages/math/src/point.ts
index 9d02f97ba..923377dc0 100644
--- a/packages/math/point.ts
+++ b/packages/math/src/point.ts
@@ -1,4 +1,7 @@
 import { degreesToRadians, radiansToDegrees } from "./angle";
+import { PRECISION } from "./utils";
+import { vectorDot, vectorFromPoint, vectorScale } from "./vector";
+
 import type {
   LocalPoint,
   GlobalPoint,
@@ -6,8 +9,6 @@ import type {
   Degrees,
   Vector,
 } from "./types";
-import { PRECISION } from "./utils";
-import { vectorDot, vectorFromPoint, vectorScale } from "./vector";
 
 /**
  * Create a properly typed Point instance from the X and Y coordinates.
@@ -96,7 +97,7 @@ export function pointsEqual<Point extends GlobalPoint | LocalPoint>(
 }
 
 /**
- * Roate a point by [angle] radians.
+ * Rotate a point by [angle] radians.
  *
  * @param point The point to rotate
  * @param center The point to rotate around, the center point
@@ -115,7 +116,7 @@ export function pointRotateRads<Point extends GlobalPoint | LocalPoint>(
 }
 
 /**
- * Roate a point by [angle] degree.
+ * Rotate a point by [angle] degree.
  *
  * @param point The point to rotate
  * @param center The point to rotate around, the center point
diff --git a/packages/math/polygon.ts b/packages/math/src/polygon.ts
similarity index 99%
rename from packages/math/polygon.ts
rename to packages/math/src/polygon.ts
index 783bc4cf3..762c82dbf 100644
--- a/packages/math/polygon.ts
+++ b/packages/math/src/polygon.ts
@@ -1,8 +1,9 @@
 import { pointsEqual } from "./point";
 import { lineSegment, pointOnLineSegment } from "./segment";
-import type { GlobalPoint, LocalPoint, Polygon } from "./types";
 import { PRECISION } from "./utils";
 
+import type { GlobalPoint, LocalPoint, Polygon } from "./types";
+
 export function polygon<Point extends GlobalPoint | LocalPoint>(
   ...points: Point[]
 ) {
diff --git a/packages/math/range.ts b/packages/math/src/range.ts
similarity index 97%
rename from packages/math/range.ts
rename to packages/math/src/range.ts
index d90530cba..1b292344e 100644
--- a/packages/math/range.ts
+++ b/packages/math/src/range.ts
@@ -1,4 +1,5 @@
-import { toBrandedType } from "@excalidraw/excalidraw/utils";
+import { toBrandedType } from "@excalidraw/common";
+
 import type { InclusiveRange } from "./types";
 
 /**
diff --git a/packages/math/rectangle.ts b/packages/math/src/rectangle.ts
similarity index 99%
rename from packages/math/rectangle.ts
rename to packages/math/src/rectangle.ts
index 7dde15ded..394b5c2f8 100644
--- a/packages/math/rectangle.ts
+++ b/packages/math/src/rectangle.ts
@@ -1,5 +1,6 @@
 import { pointFrom } from "./point";
 import { lineSegment, lineSegmentIntersectionPoints } from "./segment";
+
 import type { GlobalPoint, LineSegment, LocalPoint, Rectangle } from "./types";
 
 export function rectangle<P extends GlobalPoint | LocalPoint>(
diff --git a/packages/math/segment.ts b/packages/math/src/segment.ts
similarity index 99%
rename from packages/math/segment.ts
rename to packages/math/src/segment.ts
index 60943aacb..e38978b7e 100644
--- a/packages/math/segment.ts
+++ b/packages/math/src/segment.ts
@@ -5,7 +5,6 @@ import {
   pointFromVector,
   pointRotateRads,
 } from "./point";
-import type { GlobalPoint, LineSegment, LocalPoint, Radians } from "./types";
 import { PRECISION } from "./utils";
 import {
   vectorAdd,
@@ -15,6 +14,8 @@ import {
   vectorSubtract,
 } from "./vector";
 
+import type { GlobalPoint, LineSegment, LocalPoint, Radians } from "./types";
+
 /**
  * Create a line segment from two points.
  *
diff --git a/packages/math/triangle.ts b/packages/math/src/triangle.ts
similarity index 100%
rename from packages/math/triangle.ts
rename to packages/math/src/triangle.ts
diff --git a/packages/math/types.ts b/packages/math/src/types.ts
similarity index 100%
rename from packages/math/types.ts
rename to packages/math/src/types.ts
diff --git a/packages/math/utils.ts b/packages/math/src/utils.ts
similarity index 100%
rename from packages/math/utils.ts
rename to packages/math/src/utils.ts
diff --git a/packages/math/vector.ts b/packages/math/src/vector.ts
similarity index 100%
rename from packages/math/vector.ts
rename to packages/math/src/vector.ts
diff --git a/packages/math/curve.test.ts b/packages/math/tests/curve.test.ts
similarity index 94%
rename from packages/math/curve.test.ts
rename to packages/math/tests/curve.test.ts
index 94670d7ab..739562096 100644
--- a/packages/math/curve.test.ts
+++ b/packages/math/tests/curve.test.ts
@@ -1,12 +1,13 @@
-import "../utils/test-utils";
+import "@excalidraw/utils/test-utils";
+
 import {
   curve,
   curveClosestPoint,
   curveIntersectLineSegment,
   curvePointDistance,
-} from "./curve";
-import { pointFrom } from "./point";
-import { lineSegment } from "./segment";
+} from "../src/curve";
+import { pointFrom } from "../src/point";
+import { lineSegment } from "../src/segment";
 
 describe("Math curve", () => {
   describe("line segment intersection", () => {
diff --git a/packages/math/ellipse.test.ts b/packages/math/tests/ellipse.test.ts
similarity index 94%
rename from packages/math/ellipse.test.ts
rename to packages/math/tests/ellipse.test.ts
index 507cc5a1a..4fa0d4e59 100644
--- a/packages/math/ellipse.test.ts
+++ b/packages/math/tests/ellipse.test.ts
@@ -4,11 +4,12 @@ import {
   ellipseIncludesPoint,
   ellipseTouchesPoint,
   ellipseLineIntersectionPoints,
-} from "./ellipse";
-import { line } from "./line";
-import { pointFrom } from "./point";
-import { lineSegment } from "./segment";
-import type { Ellipse, GlobalPoint } from "./types";
+} from "../src/ellipse";
+import { line } from "../src/line";
+import { pointFrom } from "../src/point";
+import { lineSegment } from "../src/segment";
+
+import type { Ellipse, GlobalPoint } from "../src/types";
 
 describe("point and ellipse", () => {
   it("point on ellipse", () => {
diff --git a/packages/math/line.test.ts b/packages/math/tests/line.test.ts
similarity index 88%
rename from packages/math/line.test.ts
rename to packages/math/tests/line.test.ts
index 0e6bb1cc8..c8915a466 100644
--- a/packages/math/line.test.ts
+++ b/packages/math/tests/line.test.ts
@@ -1,5 +1,5 @@
-import { line, linesIntersectAt } from "./line";
-import { pointFrom } from "./point";
+import { line, linesIntersectAt } from "../src/line";
+import { pointFrom } from "../src/point";
 
 describe("line-line intersections", () => {
   it("should correctly detect intersection at origin", () => {
diff --git a/packages/math/point.test.ts b/packages/math/tests/point.test.ts
similarity index 84%
rename from packages/math/point.test.ts
rename to packages/math/tests/point.test.ts
index 89cc4f8f3..3f3ee15cd 100644
--- a/packages/math/point.test.ts
+++ b/packages/math/tests/point.test.ts
@@ -1,5 +1,6 @@
-import { pointFrom, pointRotateRads } from "./point";
-import type { Radians } from "./types";
+import { pointFrom, pointRotateRads } from "../src/point";
+
+import type { Radians } from "../src/types";
 
 describe("rotate", () => {
   it("should rotate over (x2, y2) and return the rotated coordinates for (x1, y1)", () => {
diff --git a/packages/math/range.test.ts b/packages/math/tests/range.test.ts
similarity index 99%
rename from packages/math/range.test.ts
rename to packages/math/tests/range.test.ts
index fb4b6a38d..9808f77f4 100644
--- a/packages/math/range.test.ts
+++ b/packages/math/tests/range.test.ts
@@ -1,4 +1,4 @@
-import { rangeInclusive, rangeIntersection, rangesOverlap } from "./range";
+import { rangeInclusive, rangeIntersection, rangesOverlap } from "../src/range";
 
 describe("range overlap", () => {
   const range1_4 = rangeInclusive(1, 4);
diff --git a/packages/math/segment.test.ts b/packages/math/tests/segment.test.ts
similarity index 82%
rename from packages/math/segment.test.ts
rename to packages/math/tests/segment.test.ts
index 4237a3c85..6b29bba59 100644
--- a/packages/math/segment.test.ts
+++ b/packages/math/tests/segment.test.ts
@@ -1,5 +1,5 @@
-import { pointFrom } from "./point";
-import { lineSegment, lineSegmentIntersectionPoints } from "./segment";
+import { pointFrom } from "../src/point";
+import { lineSegment, lineSegmentIntersectionPoints } from "../src/segment";
 
 describe("line-segment intersections", () => {
   it("should correctly detect intersection", () => {
diff --git a/packages/math/vector.test.ts b/packages/math/tests/vector.test.ts
similarity index 88%
rename from packages/math/vector.test.ts
rename to packages/math/tests/vector.test.ts
index 145c90953..820f60400 100644
--- a/packages/math/vector.test.ts
+++ b/packages/math/tests/vector.test.ts
@@ -1,4 +1,4 @@
-import { isVector } from ".";
+import { isVector } from "../src/vector";
 
 describe("Vector", () => {
   test("isVector", () => {
diff --git a/packages/math/tsconfig.json b/packages/math/tsconfig.json
index f61b8d0af..6450145b1 100644
--- a/packages/math/tsconfig.json
+++ b/packages/math/tsconfig.json
@@ -1,24 +1,8 @@
 {
+  "extends": "../tsconfig.base.json",
   "compilerOptions": {
-    "outDir": "./dist/types",
-    "target": "ESNext",
-    "strict": true,
-    "skipLibCheck": true,
-    "declaration": true,
-    "allowSyntheticDefaultImports": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "resolveJsonModule": true,
-    "jsx": "react-jsx",
-    "emitDeclarationOnly": true,
-    "paths": {
-      "@excalidraw/excalidraw": ["../excalidraw/index.tsx"],
-      "@excalidraw/utils": ["../utils/index.ts"],
-      "@excalidraw/math": ["../math/index.ts"],
-      "@excalidraw/excalidraw/*": ["../excalidraw/*"],
-      "@excalidraw/utils/*": ["../utils/*"],
-      "@excalidraw/math/*": ["../math/*"]
-    }
+    "outDir": "./dist/types"
   },
+  "include": ["src/**/*", "global.d.ts"],
   "exclude": ["**/*.test.*", "tests", "types", "examples", "dist"]
 }
diff --git a/packages/tsconfig.base.json b/packages/tsconfig.base.json
new file mode 100644
index 000000000..b1d145ad8
--- /dev/null
+++ b/packages/tsconfig.base.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "strict": true,
+    "skipLibCheck": true,
+    "declaration": true,
+    "allowSyntheticDefaultImports": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "jsx": "react-jsx",
+    "emitDeclarationOnly": true,
+    "paths": {
+      "@excalidraw/common": ["./common/src/index.ts"],
+      "@excalidraw/common/*": ["./common/src/*"],
+      "@excalidraw/element": ["./element/src/index.ts"],
+      "@excalidraw/element/*": ["./element/src/*"],
+      "@excalidraw/excalidraw": ["./excalidraw/index.tsx"],
+      "@excalidraw/excalidraw/*": ["./excalidraw/*"],
+      "@excalidraw/math": ["./math/src/index.ts"],
+      "@excalidraw/math/*": ["./math/src/*"],
+      "@excalidraw/utils": ["./utils/src/index.ts"],
+      "@excalidraw/utils/*": ["./utils/src/*"]
+    }
+  }
+}
diff --git a/packages/utils/package.json b/packages/utils/package.json
index ddda1e7d6..ca3eee23e 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -2,18 +2,18 @@
   "name": "@excalidraw/utils",
   "version": "0.1.2",
   "type": "module",
-  "types": "./dist/types/utils/index.d.ts",
+  "types": "./dist/types/utils/src/index.d.ts",
   "main": "./dist/prod/index.js",
   "module": "./dist/prod/index.js",
   "exports": {
     ".": {
-      "types": "./dist/types/utils/index.d.ts",
+      "types": "./dist/types/utils/src/index.d.ts",
       "development": "./dist/dev/index.js",
       "production": "./dist/prod/index.js",
       "default": "./dist/prod/index.js"
     },
     "./*": {
-      "types": "./../utils/dist/types/utils/*"
+      "types": "./../utils/dist/types/utils/src/*.d.ts"
     }
   },
   "files": [
diff --git a/packages/utils/bbox.ts b/packages/utils/src/bbox.ts
similarity index 96%
rename from packages/utils/bbox.ts
rename to packages/utils/src/bbox.ts
index 19a1a5430..a56128156 100644
--- a/packages/utils/bbox.ts
+++ b/packages/utils/src/bbox.ts
@@ -4,7 +4,8 @@ import {
   type GlobalPoint,
   type LocalPoint,
 } from "@excalidraw/math";
-import type { Bounds } from "@excalidraw/excalidraw/element/bounds";
+
+import type { Bounds } from "@excalidraw/element/bounds";
 
 export type LineSegment<P extends LocalPoint | GlobalPoint> = [P, P];
 
diff --git a/packages/utils/collision.ts b/packages/utils/src/collision.ts
similarity index 96%
rename from packages/utils/collision.ts
rename to packages/utils/src/collision.ts
index fb48f4e45..b7c155f66 100644
--- a/packages/utils/collision.ts
+++ b/packages/utils/src/collision.ts
@@ -1,10 +1,3 @@
-import type { Polycurve, Polyline } from "./geometry/shape";
-import {
-  pointInEllipse,
-  pointOnEllipse,
-  type GeometricShape,
-} from "./geometry/shape";
-import type { Curve } from "@excalidraw/math";
 import {
   lineSegment,
   pointFrom,
@@ -17,6 +10,12 @@ import {
   type Polygon,
 } from "@excalidraw/math";
 
+import type { Curve } from "@excalidraw/math";
+
+import { pointInEllipse, pointOnEllipse } from "./shape";
+
+import type { Polycurve, Polyline, GeometricShape } from "./shape";
+
 // check if the given point is considered on the given shape's border
 export const isPointOnShape = <Point extends GlobalPoint | LocalPoint>(
   point: Point,
diff --git a/packages/utils/export.ts b/packages/utils/src/export.ts
similarity index 98%
rename from packages/utils/export.ts
rename to packages/utils/src/export.ts
index 22287ce7e..4559fe1af 100644
--- a/packages/utils/export.ts
+++ b/packages/utils/src/export.ts
@@ -1,23 +1,24 @@
-import {
-  exportToCanvas as _exportToCanvas,
-  exportToSvg as _exportToSvg,
-} from "@excalidraw/excalidraw/scene/export";
+import { MIME_TYPES } from "@excalidraw/common";
 import { getDefaultAppState } from "@excalidraw/excalidraw/appState";
-import type { AppState, BinaryFiles } from "@excalidraw/excalidraw/types";
-import type {
-  ExcalidrawElement,
-  ExcalidrawFrameLikeElement,
-  NonDeleted,
-} from "@excalidraw/excalidraw/element/types";
-import { restore } from "@excalidraw/excalidraw/data/restore";
-import { MIME_TYPES } from "@excalidraw/excalidraw/constants";
-import { encodePngMetadata } from "@excalidraw/excalidraw/data/image";
-import { serializeAsJSON } from "@excalidraw/excalidraw/data/json";
 import {
   copyBlobToClipboardAsPng,
   copyTextToSystemClipboard,
   copyToClipboard,
 } from "@excalidraw/excalidraw/clipboard";
+import { encodePngMetadata } from "@excalidraw/excalidraw/data/image";
+import { serializeAsJSON } from "@excalidraw/excalidraw/data/json";
+import { restore } from "@excalidraw/excalidraw/data/restore";
+import {
+  exportToCanvas as _exportToCanvas,
+  exportToSvg as _exportToSvg,
+} from "@excalidraw/excalidraw/scene/export";
+
+import type {
+  ExcalidrawElement,
+  ExcalidrawFrameLikeElement,
+  NonDeleted,
+} from "@excalidraw/element/types";
+import type { AppState, BinaryFiles } from "@excalidraw/excalidraw/types";
 
 export { MIME_TYPES };
 
diff --git a/packages/utils/index.ts b/packages/utils/src/index.ts
similarity index 52%
rename from packages/utils/index.ts
rename to packages/utils/src/index.ts
index 2a929134e..58830b356 100644
--- a/packages/utils/index.ts
+++ b/packages/utils/src/index.ts
@@ -1,4 +1,4 @@
 export * from "./export";
 export * from "./withinBounds";
 export * from "./bbox";
-export { getCommonBounds } from "@excalidraw/excalidraw/element/bounds";
+export { getCommonBounds } from "@excalidraw/element/bounds";
diff --git a/packages/utils/geometry/shape.ts b/packages/utils/src/shape.ts
similarity index 98%
rename from packages/utils/geometry/shape.ts
rename to packages/utils/src/shape.ts
index 10fc06e31..b750c232e 100644
--- a/packages/utils/geometry/shape.ts
+++ b/packages/utils/src/shape.ts
@@ -11,8 +11,9 @@
  * also included in this file are methods for converting an Excalidraw element or a Drawable from roughjs
  * to pure shapes
  */
+import { pointsOnBezierCurves } from "points-on-curve";
 
-import type { Curve, LineSegment, Polygon, Radians } from "@excalidraw/math";
+import { invariant } from "@excalidraw/common";
 import {
   curve,
   lineSegment,
@@ -32,7 +33,9 @@ import {
   type GlobalPoint,
   type LocalPoint,
 } from "@excalidraw/math";
-import { getElementAbsoluteCoords } from "@excalidraw/excalidraw/element";
+
+import { getElementAbsoluteCoords } from "@excalidraw/element/bounds";
+
 import type {
   ElementsMap,
   ExcalidrawBindableElement,
@@ -48,10 +51,10 @@ import type {
   ExcalidrawRectangleElement,
   ExcalidrawSelectionElement,
   ExcalidrawTextElement,
-} from "@excalidraw/excalidraw/element/types";
-import { pointsOnBezierCurves } from "points-on-curve";
+} from "@excalidraw/element/types";
+import type { Curve, LineSegment, Polygon, Radians } from "@excalidraw/math";
+
 import type { Drawable, Op } from "roughjs/bin/core";
-import { invariant } from "@excalidraw/excalidraw/utils";
 
 // a polyline (made up term here) is a line consisting of other line segments
 // this corresponds to a straight line element in the editor but it could also
diff --git a/packages/utils/snapToShape.ts b/packages/utils/src/snapToShape.ts
similarity index 97%
rename from packages/utils/snapToShape.ts
rename to packages/utils/src/snapToShape.ts
index dbf5506c2..00b1b2c31 100644
--- a/packages/utils/snapToShape.ts
+++ b/packages/utils/src/snapToShape.ts
@@ -6,12 +6,12 @@ import type {
   ExcalidrawFreeDrawElement,
   ExcalidrawLinearElement,
   ExcalidrawRectangleElement,
-} from "../excalidraw/element/types";
-import type { BoundingBox, Bounds } from "../excalidraw/element/bounds";
-import { getCenterForBounds, getCommonBoundingBox } from "../excalidraw/element/bounds";
-import { newArrowElement, newElement, newLinearElement } from "../excalidraw/element";
+} from "@excalidraw/element/types";
+import type { BoundingBox, Bounds } from "@excalidraw/element/bounds";
+import { getCenterForBounds, getCommonBoundingBox } from "@excalidraw/element/bounds";
+import { newArrowElement, newElement, newLinearElement } from "@excalidraw/element/newElement";
 import { angleBetween, GlobalPoint, LocalPoint, perpendicularDistance, pointDistance } from "@excalidraw/math";
-import { ROUNDNESS } from "@excalidraw/excalidraw/constants";
+import { ROUNDNESS } from "@excalidraw/common";
 
 type Shape =
   | ExcalidrawRectangleElement["type"]
diff --git a/packages/utils/test-utils.ts b/packages/utils/src/test-utils.ts
similarity index 100%
rename from packages/utils/test-utils.ts
rename to packages/utils/src/test-utils.ts
diff --git a/packages/utils/withinBounds.ts b/packages/utils/src/withinBounds.ts
similarity index 94%
rename from packages/utils/withinBounds.ts
rename to packages/utils/src/withinBounds.ts
index 8d52eb3ad..0e1cf38a6 100644
--- a/packages/utils/withinBounds.ts
+++ b/packages/utils/src/withinBounds.ts
@@ -1,20 +1,12 @@
-import type {
-  ExcalidrawElement,
-  ExcalidrawFreeDrawElement,
-  ExcalidrawLinearElement,
-  NonDeletedExcalidrawElement,
-} from "@excalidraw/excalidraw/element/types";
+import { arrayToMap } from "@excalidraw/common";
+import { getElementBounds } from "@excalidraw/element/bounds";
 import {
   isArrowElement,
   isExcalidrawElement,
   isFreeDrawElement,
   isLinearElement,
   isTextElement,
-} from "@excalidraw/excalidraw/element/typeChecks";
-import type { Bounds } from "@excalidraw/excalidraw/element/bounds";
-import { getElementBounds } from "@excalidraw/excalidraw/element/bounds";
-import { arrayToMap } from "@excalidraw/excalidraw/utils";
-import type { LocalPoint } from "@excalidraw/math";
+} from "@excalidraw/element/typeChecks";
 import {
   rangeIncludesValue,
   pointFrom,
@@ -22,6 +14,15 @@ import {
   rangeInclusive,
 } from "@excalidraw/math";
 
+import type { Bounds } from "@excalidraw/element/bounds";
+import type {
+  ExcalidrawElement,
+  ExcalidrawFreeDrawElement,
+  ExcalidrawLinearElement,
+  NonDeletedExcalidrawElement,
+} from "@excalidraw/element/types";
+import type { LocalPoint } from "@excalidraw/math";
+
 type Element = NonDeletedExcalidrawElement;
 type Elements = readonly NonDeletedExcalidrawElement[];
 
diff --git a/packages/utils/__snapshots__/export.test.ts.snap b/packages/utils/tests/__snapshots__/export.test.ts.snap
similarity index 100%
rename from packages/utils/__snapshots__/export.test.ts.snap
rename to packages/utils/tests/__snapshots__/export.test.ts.snap
diff --git a/packages/utils/__snapshots__/utils.test.ts.snap b/packages/utils/tests/__snapshots__/utils.test.ts.snap
similarity index 100%
rename from packages/utils/__snapshots__/utils.test.ts.snap
rename to packages/utils/tests/__snapshots__/utils.test.ts.snap
diff --git a/packages/utils/collision.test.ts b/packages/utils/tests/collision.test.ts
similarity index 96%
rename from packages/utils/collision.test.ts
rename to packages/utils/tests/collision.test.ts
index 744bea367..35bc28b34 100644
--- a/packages/utils/collision.test.ts
+++ b/packages/utils/tests/collision.test.ts
@@ -1,4 +1,3 @@
-import type { Curve, Degrees, GlobalPoint } from "@excalidraw/math";
 import {
   curve,
   degreesToRadians,
@@ -7,8 +6,12 @@ import {
   pointFrom,
   pointRotateDegs,
 } from "@excalidraw/math";
-import { pointOnCurve, pointOnPolyline } from "./collision";
-import type { Polyline } from "./geometry/shape";
+
+import type { Curve, Degrees, GlobalPoint } from "@excalidraw/math";
+
+import { pointOnCurve, pointOnPolyline } from "../src/collision";
+
+import type { Polyline } from "../src/shape";
 
 describe("point and curve", () => {
   const c: Curve<GlobalPoint> = curve(
diff --git a/packages/utils/export.test.ts b/packages/utils/tests/export.test.ts
similarity index 97%
rename from packages/utils/export.test.ts
rename to packages/utils/tests/export.test.ts
index e2af763b5..47b9398ab 100644
--- a/packages/utils/export.test.ts
+++ b/packages/utils/tests/export.test.ts
@@ -1,9 +1,9 @@
-import * as utils from ".";
+import { MIME_TYPES } from "@excalidraw/common";
+import * as mockedSceneExportUtils from "@excalidraw/excalidraw/scene/export";
 import { diagramFactory } from "@excalidraw/excalidraw/tests/fixtures/diagramFixture";
 import { vi } from "vitest";
-import * as mockedSceneExportUtils from "@excalidraw/excalidraw/scene/export";
 
-import { MIME_TYPES } from "@excalidraw/excalidraw/constants";
+import * as utils from "../src";
 
 const exportToSvgSpy = vi.spyOn(mockedSceneExportUtils, "exportToSvg");
 
diff --git a/packages/utils/geometry/geometry.test.ts b/packages/utils/tests/geometry.test.ts
similarity index 98%
rename from packages/utils/geometry/geometry.test.ts
rename to packages/utils/tests/geometry.test.ts
index e9ad067fe..8a2f95d3f 100644
--- a/packages/utils/geometry/geometry.test.ts
+++ b/packages/utils/tests/geometry.test.ts
@@ -1,9 +1,3 @@
-import type {
-  GlobalPoint,
-  LineSegment,
-  Polygon,
-  Radians,
-} from "@excalidraw/math";
 import {
   pointFrom,
   lineSegment,
@@ -13,7 +7,15 @@ import {
   polygonIncludesPoint,
   segmentsIntersectAt,
 } from "@excalidraw/math";
-import { pointInEllipse, pointOnEllipse, type Ellipse } from "./shape";
+
+import type {
+  GlobalPoint,
+  LineSegment,
+  Polygon,
+  Radians,
+} from "@excalidraw/math";
+
+import { pointInEllipse, pointOnEllipse, type Ellipse } from "../src/shape";
 
 describe("point and line", () => {
   // const l: Line<GlobalPoint> = line(point(1, 0), point(1, 2));
diff --git a/packages/utils/utils.unmocked.test.ts b/packages/utils/tests/utils.unmocked.test.ts
similarity index 98%
rename from packages/utils/utils.unmocked.test.ts
rename to packages/utils/tests/utils.unmocked.test.ts
index 341adef95..b77bc37d1 100644
--- a/packages/utils/utils.unmocked.test.ts
+++ b/packages/utils/tests/utils.unmocked.test.ts
@@ -1,8 +1,10 @@
-import type { ImportedDataState } from "@excalidraw/excalidraw/data/types";
-import * as utils from "./index";
-import { API } from "@excalidraw/excalidraw/tests/helpers/api";
-import { decodeSvgBase64Payload } from "@excalidraw/excalidraw/scene/export";
 import { decodePngMetadata } from "@excalidraw/excalidraw/data/image";
+import { decodeSvgBase64Payload } from "@excalidraw/excalidraw/scene/export";
+import { API } from "@excalidraw/excalidraw/tests/helpers/api";
+
+import type { ImportedDataState } from "@excalidraw/excalidraw/data/types";
+
+import * as utils from "../src";
 
 // NOTE this test file is using the actual API, unmocked. Hence splitting it
 // from the other test file, because I couldn't figure out how to test
diff --git a/packages/utils/withinBounds.test.ts b/packages/utils/tests/withinBounds.test.ts
similarity index 98%
rename from packages/utils/withinBounds.test.ts
rename to packages/utils/tests/withinBounds.test.ts
index 85354d742..d1af75de8 100644
--- a/packages/utils/withinBounds.test.ts
+++ b/packages/utils/tests/withinBounds.test.ts
@@ -1,10 +1,12 @@
-import type { Bounds } from "@excalidraw/excalidraw/element/bounds";
 import { API } from "@excalidraw/excalidraw/tests/helpers/api";
+
+import type { Bounds } from "@excalidraw/element/bounds";
+
 import {
   elementPartiallyOverlapsWithOrContainsBBox,
   elementsOverlappingBBox,
   isElementInsideBBox,
-} from "./withinBounds";
+} from "../src/withinBounds";
 
 const makeElement = (x: number, y: number, width: number, height: number) =>
   API.createElement({
diff --git a/packages/utils/tsconfig.json b/packages/utils/tsconfig.json
index f61b8d0af..6450145b1 100644
--- a/packages/utils/tsconfig.json
+++ b/packages/utils/tsconfig.json
@@ -1,24 +1,8 @@
 {
+  "extends": "../tsconfig.base.json",
   "compilerOptions": {
-    "outDir": "./dist/types",
-    "target": "ESNext",
-    "strict": true,
-    "skipLibCheck": true,
-    "declaration": true,
-    "allowSyntheticDefaultImports": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "resolveJsonModule": true,
-    "jsx": "react-jsx",
-    "emitDeclarationOnly": true,
-    "paths": {
-      "@excalidraw/excalidraw": ["../excalidraw/index.tsx"],
-      "@excalidraw/utils": ["../utils/index.ts"],
-      "@excalidraw/math": ["../math/index.ts"],
-      "@excalidraw/excalidraw/*": ["../excalidraw/*"],
-      "@excalidraw/utils/*": ["../utils/*"],
-      "@excalidraw/math/*": ["../math/*"]
-    }
+    "outDir": "./dist/types"
   },
+  "include": ["src/**/*", "global.d.ts"],
   "exclude": ["**/*.test.*", "tests", "types", "examples", "dist"]
 }
diff --git a/scripts/autorelease.js b/scripts/autorelease.js
index f506cf13c..6ca5af213 100644
--- a/scripts/autorelease.js
+++ b/scripts/autorelease.js
@@ -1,5 +1,6 @@
-const fs = require("fs");
 const { exec, execSync } = require("child_process");
+const fs = require("fs");
+
 const core = require("@actions/core");
 
 const excalidrawDir = `${__dirname}/../packages/excalidraw`;
diff --git a/scripts/buildMath.js b/scripts/buildBase.js
similarity index 77%
rename from scripts/buildMath.js
rename to scripts/buildBase.js
index fd2f820ea..336b49823 100644
--- a/scripts/buildMath.js
+++ b/scripts/buildBase.js
@@ -1,26 +1,27 @@
 const path = require("path");
+
 const { build } = require("esbuild");
-const { sassPlugin } = require("esbuild-sass-plugin");
 
 // contains all dependencies bundled inside
 const getConfig = (outdir) => ({
   outdir,
   bundle: true,
   format: "esm",
-  entryPoints: ["index.ts"],
+  entryPoints: ["src/index.ts"],
   entryNames: "[name]",
   assetNames: "[dir]/[name]",
   alias: {
+    "@excalidraw/common": path.resolve(__dirname, "../packages/common/src"),
+    "@excalidraw/element": path.resolve(__dirname, "../packages/element/src"),
     "@excalidraw/excalidraw": path.resolve(__dirname, "../packages/excalidraw"),
-    "@excalidraw/utils": path.resolve(__dirname, "../packages/utils"),
-    "@excalidraw/math": path.resolve(__dirname, "../packages/math"),
+    "@excalidraw/math": path.resolve(__dirname, "../packages/math/src"),
+    "@excalidraw/utils": path.resolve(__dirname, "../packages/utils/src"),
   },
 });
 
 function buildDev(config) {
   return build({
     ...config,
-    plugins: [sassPlugin()],
     sourcemap: true,
     define: {
       "import.meta.env": JSON.stringify({ DEV: true }),
@@ -31,7 +32,6 @@ function buildDev(config) {
 function buildProd(config) {
   return build({
     ...config,
-    plugins: [sassPlugin()],
     minify: true,
     define: {
       "import.meta.env": JSON.stringify({ PROD: true }),
@@ -41,10 +41,10 @@ function buildProd(config) {
 
 const createESMRawBuild = async () => {
   // development unminified build with source maps
-  buildDev(getConfig("dist/dev"));
+  await buildDev(getConfig("dist/dev"));
 
   // production minified build without sourcemaps
-  buildProd(getConfig("dist/prod"));
+  await buildProd(getConfig("dist/prod"));
 };
 
 (async () => {
diff --git a/scripts/buildPackage.js b/scripts/buildPackage.js
index 653af50f2..baf20615f 100644
--- a/scripts/buildPackage.js
+++ b/scripts/buildPackage.js
@@ -1,6 +1,8 @@
 const path = require("path");
+
 const { build } = require("esbuild");
 const { sassPlugin } = require("esbuild-sass-plugin");
+
 const { parseEnvVariables } = require("../packages/excalidraw/env.cjs");
 
 const ENV_VARS = {
@@ -26,9 +28,11 @@ const getConfig = (outdir) => ({
   assetNames: "[dir]/[name]",
   chunkNames: "[dir]/[name]-[hash]",
   alias: {
+    "@excalidraw/common": path.resolve(__dirname, "../packages/common/src"),
+    "@excalidraw/element": path.resolve(__dirname, "../packages/element/src"),
     "@excalidraw/excalidraw": path.resolve(__dirname, "../packages/excalidraw"),
-    "@excalidraw/utils": path.resolve(__dirname, "../packages/utils"),
-    "@excalidraw/math": path.resolve(__dirname, "../packages/math"),
+    "@excalidraw/math": path.resolve(__dirname, "../packages/math/src"),
+    "@excalidraw/utils": path.resolve(__dirname, "../packages/utils/src"),
   },
   loader: {
     ".woff2": "file",
diff --git a/scripts/buildUtils.js b/scripts/buildUtils.js
index 65b947385..1cf3ffbaa 100644
--- a/scripts/buildUtils.js
+++ b/scripts/buildUtils.js
@@ -1,6 +1,8 @@
 const path = require("path");
+
 const { build } = require("esbuild");
 const { sassPlugin } = require("esbuild-sass-plugin");
+
 const { woff2ServerPlugin } = require("./woff2/woff2-esbuild-plugins");
 
 // contains all dependencies bundled inside
@@ -8,13 +10,15 @@ const getConfig = (outdir) => ({
   outdir,
   bundle: true,
   format: "esm",
-  entryPoints: ["index.ts"],
+  entryPoints: ["src/index.ts"],
   entryNames: "[name]",
   assetNames: "[dir]/[name]",
   alias: {
+    "@excalidraw/common": path.resolve(__dirname, "../packages/common/src"),
+    "@excalidraw/element": path.resolve(__dirname, "../packages/element/src"),
     "@excalidraw/excalidraw": path.resolve(__dirname, "../packages/excalidraw"),
-    "@excalidraw/utils": path.resolve(__dirname, "../packages/utils"),
-    "@excalidraw/math": path.resolve(__dirname, "../packages/math"),
+    "@excalidraw/math": path.resolve(__dirname, "../packages/math/src"),
+    "@excalidraw/utils": path.resolve(__dirname, "../packages/utils/src"),
   },
 });
 
@@ -47,10 +51,10 @@ function buildProd(config) {
 
 const createESMRawBuild = async () => {
   // development unminified build with source maps
-  buildDev(getConfig("dist/dev"));
+  await buildDev(getConfig("dist/dev"));
 
   // production minified build without sourcemaps
-  buildProd(getConfig("dist/prod"));
+  await buildProd(getConfig("dist/prod"));
 };
 
 (async () => {
diff --git a/scripts/prerelease.js b/scripts/prerelease.js
index 3b8080d33..005a6cf5f 100644
--- a/scripts/prerelease.js
+++ b/scripts/prerelease.js
@@ -1,5 +1,6 @@
 const fs = require("fs");
 const util = require("util");
+
 const exec = util.promisify(require("child_process").exec);
 const updateChangelog = require("./updateChangelog");
 
diff --git a/scripts/woff2/woff2-esbuild-plugins.js b/scripts/woff2/woff2-esbuild-plugins.js
index 19ebafc93..2116dd059 100644
--- a/scripts/woff2/woff2-esbuild-plugins.js
+++ b/scripts/woff2/woff2-esbuild-plugins.js
@@ -1,9 +1,10 @@
+const { execSync } = require("child_process");
 const fs = require("fs");
 const path = require("path");
-const { execSync } = require("child_process");
-const which = require("which");
-const wawoff = require("wawoff2");
+
 const { Font } = require("fonteditor-core");
+const wawoff = require("wawoff2");
+const which = require("which");
 
 /**
  * Custom esbuild plugin to:
diff --git a/setupTests.ts b/setupTests.ts
index 20d2cc517..2aec616b4 100644
--- a/setupTests.ts
+++ b/setupTests.ts
@@ -1,11 +1,13 @@
+import fs from "fs";
+
 // vitest.setup.ts
 import "vitest-canvas-mock";
 import "@testing-library/jest-dom";
-import fs from "fs";
 import { vi } from "vitest";
+
 import polyfill from "./packages/excalidraw/polyfill";
-import { testPolyfills } from "./packages/excalidraw/tests/helpers/polyfills";
 import { yellow } from "./packages/excalidraw/tests/helpers/colorize";
+import { testPolyfills } from "./packages/excalidraw/tests/helpers/polyfills";
 
 // mock for pep.js not working with setPointerCapture()
 HTMLElement.prototype.setPointerCapture = vi.fn();
diff --git a/tsconfig.json b/tsconfig.json
index 3eded705f..45a29dd61 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,12 +19,16 @@
     "jsx": "react-jsx",
     "baseUrl": ".",
     "paths": {
+      "@excalidraw/common": ["./packages/common/src/index.ts"],
+      "@excalidraw/common/*": ["./packages/common/src/*"],
       "@excalidraw/excalidraw": ["./packages/excalidraw/index.tsx"],
-      "@excalidraw/utils": ["./packages/utils/index.ts"],
-      "@excalidraw/math": ["./packages/math/index.ts"],
       "@excalidraw/excalidraw/*": ["./packages/excalidraw/*"],
-      "@excalidraw/utils/*": ["./packages/utils/*"],
-      "@excalidraw/math/*": ["./packages/math/*"]
+      "@excalidraw/element": ["./packages/element/src/index.ts"],
+      "@excalidraw/element/*": ["./packages/element/src/*"],
+      "@excalidraw/math": ["./packages/math/src/index.ts"],
+      "@excalidraw/math/*": ["./packages/math/src/*"],
+      "@excalidraw/utils": ["./packages/utils/src/index.ts"],
+      "@excalidraw/utils/*": ["./packages/utils/src/*"]
     }
   },
   "include": ["packages", "excalidraw-app"],
diff --git a/vitest.config.mts b/vitest.config.mts
index f9d7d255e..353f84ccf 100644
--- a/vitest.config.mts
+++ b/vitest.config.mts
@@ -5,6 +5,22 @@ import { defineConfig } from "vitest/config";
 export default defineConfig({
   resolve: {
     alias: [
+      {
+        find: /^@excalidraw\/common$/,
+        replacement: path.resolve(__dirname, "./packages/common/src/index.ts"),
+      },
+      {
+        find: /^@excalidraw\/common\/(.*?)/,
+        replacement: path.resolve(__dirname, "./packages/common/src/$1"),
+      },
+      {
+        find: /^@excalidraw\/element$/,
+        replacement: path.resolve(__dirname, "./packages/element/src/index.ts"),
+      },
+      {
+        find: /^@excalidraw\/element\/(.*?)/,
+        replacement: path.resolve(__dirname, "./packages/element/src/$1"),
+      },
       {
         find: /^@excalidraw\/excalidraw$/,
         replacement: path.resolve(__dirname, "./packages/excalidraw/index.tsx"),
@@ -13,21 +29,21 @@ export default defineConfig({
         find: /^@excalidraw\/excalidraw\/(.*?)/,
         replacement: path.resolve(__dirname, "./packages/excalidraw/$1"),
       },
-      {
-        find: /^@excalidraw\/utils$/,
-        replacement: path.resolve(__dirname, "./packages/utils/index.ts"),
-      },
-      {
-        find: /^@excalidraw\/utils\/(.*?)/,
-        replacement: path.resolve(__dirname, "./packages/utils/$1"),
-      },
       {
         find: /^@excalidraw\/math$/,
-        replacement: path.resolve(__dirname, "./packages/math/index.ts"),
+        replacement: path.resolve(__dirname, "./packages/math/src/index.ts"),
       },
       {
         find: /^@excalidraw\/math\/(.*?)/,
-        replacement: path.resolve(__dirname, "./packages/math/$1"),
+        replacement: path.resolve(__dirname, "./packages/math/src/$1"),
+      },
+      {
+        find: /^@excalidraw\/utils$/,
+        replacement: path.resolve(__dirname, "./packages/utils/src/index.ts"),
+      },
+      {
+        find: /^@excalidraw\/utils\/(.*?)/,
+        replacement: path.resolve(__dirname, "./packages/utils/src/$1"),
       },
     ],
   },
diff --git a/yarn.lock b/yarn.lock
index 23e087849..ccd0827fb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5354,7 +5354,7 @@ eslint-plugin-flowtype@^8.0.3:
     lodash "^4.17.21"
     string-natural-compare "^3.0.1"
 
-eslint-plugin-import@^2.25.3:
+eslint-plugin-import@2.31.0, eslint-plugin-import@^2.25.3:
   version "2.31.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.31.0.tgz#310ce7e720ca1d9c0bb3f69adfd1c6bdd7d9e0e7"
   integrity sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==