Fix components

packages/common/package.json

@@ -63,4 +63,3 @@
     "build:esm": "rm -rf dist && node ../../scripts/buildShared.js && yarn gen:types"
   }
 }
-  

packages/element/package.json

@@ -47,10 +47,8 @@
       "last 1 safari version"
     ]
   },
-    "dependencies": {
+  "dependencies": {},
-    },
+  "devDependencies": {},
-    "devDependencies": {
-    },
   "bugs": "https://github.com/excalidraw/excalidraw/issues",
   "repository": "https://github.com/excalidraw/excalidraw",
   "scripts": {
@@ -58,4 +56,3 @@
     "build:esm": "rm -rf dist && node ../../scripts/buildShared.js && yarn gen:types"
   }
 }
-  

packages/element/tests/textElement.test.ts

@@ -8,7 +8,7 @@ import {
   getContainerCoords,
   getBoundTextMaxWidth,
   getBoundTextMaxHeight,
-a} from "../src/textElement";
+} from "../src/textElement";
 import { detectLineHeight, getLineHeightInPx } from "../src/textMeasurements";
 
 import type { ExcalidrawTextElementWithContainer } from "../src/types";

packages/excalidraw/components/Actions.tsx

@@ -1,24 +1,39 @@
 import clsx from "clsx";
 import { useState } from "react";
 
-import { actionToggleZenMode } from "../actions";
+import {
+  CLASSES,
+  KEYS,
+  capitalizeString,
+  isTransparent,
+} from "@excalidraw/common";
 
-import { KEYS } from "../keys";
-import { CLASSES } from "../constants";
-import { alignActionsPredicate } from "../actions/actionAlign";
-import { trackEvent } from "../analytics";
-import { useTunnels } from "../context/tunnels";
 import {
   shouldAllowVerticalAlign,
   suppportsHorizontalAlign,
-} from "../element/textElement";
+} from "@excalidraw/element/textElement";
+
 import {
   hasBoundTextElement,
   isElbowArrow,
   isImageElement,
   isLinearElement,
   isTextElement,
-} from "../element/typeChecks";
+} from "@excalidraw/element/typeChecks";
+
+import type {
+  ExcalidrawElement,
+  ExcalidrawElementType,
+  NonDeletedElementsMap,
+  NonDeletedSceneElementsMap,
+} 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 {
   canChangeRoundness,
@@ -29,8 +44,8 @@ import {
   hasStrokeWidth,
 } from "../scene";
 import { hasStrokeColor, toolIsArrow } from "../scene/comparisons";
-import { SHAPES } from "../shapes";
+
-import { capitalizeString, isTransparent } from "../utils";
+import { SHAPES } from "./shapes";
 
 import "./Actions.scss";
 
@@ -48,12 +63,6 @@ import {
   MagicIcon,
 } from "./icons";
 
-import type {
-  ExcalidrawElement,
-  ExcalidrawElementType,
-  NonDeletedElementsMap,
-  NonDeletedSceneElementsMap,
-} from "../element/types";
 import type { AppClassProperties, AppProps, UIAppState, Zoom } from "../types";
 import type { ActionManager } from "../actions/manager";
 

packages/excalidraw/components/App.tsx

@@ -193,7 +193,7 @@ import {
   getDateTime,
   isShallowEqual,
   arrayToMap,
-} from "@excalidraw/common/utils";
+} from "@excalidraw/common";
 
 import {
   createSrcDoc,

packages/excalidraw/components/ColorPicker/ColorInput.tsx

@@ -1,10 +1,10 @@
 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 { KEYS } from "../../keys";
-import { getShortcutKey } from "../../utils";
 import { useDevice } from "../App";
 import { activeEyeDropperAtom } from "../EyeDropper";
 import { eyeDropperIcon } from "../icons";

packages/excalidraw/components/ColorPicker/ColorPicker.tsx

@@ -2,10 +2,14 @@ import * as Popover from "@radix-ui/react-popover";
 import clsx from "clsx";
 import { useRef } from "react";
 
-import { COLOR_PALETTE } from "../../colors";
+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 { t } from "../../i18n";
-import { isTransparent } from "../../utils";
 import { useExcalidrawContainer } from "../App";
 import { ButtonSeparator } from "../ButtonSeparator";
 import { activeEyeDropperAtom } from "../EyeDropper";
@@ -20,8 +24,7 @@ import { activeColorPickerSectionAtom } from "./colorPickerUtils";
 import "./ColorPicker.scss";
 
 import type { ColorPickerType } from "./colorPickerUtils";
-import type { ColorTuple, ColorPaletteCustom } from "../../colors";
+
-import type { ExcalidrawElement } from "../../element/types";
 import type { AppState } from "../../types";
 
 const isValidColor = (color: string) => {

packages/excalidraw/components/ColorPicker/Picker.tsx

@@ -1,10 +1,13 @@
 import React, { useEffect, useState } from "react";
 
+import { EVENT } from "@excalidraw/common";
+
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+
 import {
   DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX,
   DEFAULT_ELEMENT_STROKE_COLOR_INDEX,
 } from "../../colors";
-import { EVENT } from "../../constants";
 import { useAtom } from "../../editor-jotai";
 import { t } from "../../i18n";
 import { KEYS } from "../../keys";
@@ -23,7 +26,6 @@ import { colorPickerKeyNavHandler } from "./keyboardNavHandlers";
 
 import type { ColorPickerType } from "./colorPickerUtils";
 import type { ColorPaletteCustom } from "../../colors";
-import type { ExcalidrawElement } from "../../element/types";
 
 interface PickerProps {
   color: string;

packages/excalidraw/components/ColorPicker/TopPicks.tsx

@@ -4,7 +4,7 @@ import {
   DEFAULT_CANVAS_BACKGROUND_PICKS,
   DEFAULT_ELEMENT_BACKGROUND_PICKS,
   DEFAULT_ELEMENT_STROKE_PICKS,
-} from "../../colors";
+} from "@excalidraw/common";
 
 import type { ColorPickerType } from "./colorPickerUtils";
 

packages/excalidraw/components/ColorPicker/colorPickerUtils.ts

@@ -1,8 +1,9 @@
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+
 import { MAX_CUSTOM_COLORS_USED_IN_CANVAS } from "../../colors";
 import { atom } from "../../editor-jotai";
 
 import type { ColorPickerColor, ColorPaletteCustom } from "../../colors";
-import type { ExcalidrawElement } from "../../element/types";
 
 export const getColorNameAndShadeFromColor = ({
   palette,

packages/excalidraw/components/ColorPicker/keyboardNavHandlers.ts

@@ -1,5 +1,10 @@
-import { COLORS_PER_ROW, COLOR_PALETTE } from "../../colors";
+import { COLORS_PER_ROW, COLOR_PALETTE, KEYS } from "@excalidraw/common";
-import { KEYS } from "../../keys";
+
+import type {
+  ColorPickerColor,
+  ColorPalette,
+  ColorPaletteCustom,
+} from "@excalidraw/common";
 
 import {
   colorPickerHotkeyBindings,
@@ -7,11 +12,6 @@ import {
 } from "./colorPickerUtils";
 
 import type { ActiveColorPickerSectionAtomType } from "./colorPickerUtils";
-import type {
-  ColorPickerColor,
-  ColorPalette,
-  ColorPaletteCustom,
-} from "../../colors";
 import type { ValueOf } from "../../utility-types";
 
 const arrowHandler = (

packages/excalidraw/components/CommandPalette/CommandPalette.tsx

@@ -2,6 +2,15 @@ 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 {
   actionClearCanvas,
   actionLink,
@@ -13,12 +22,10 @@ import {
 } from "../../actions/actionElementLink";
 import { getShortcutFromShortcutName } from "../../actions/shortcuts";
 import { trackEvent } from "../../analytics";
-import { DEFAULT_SIDEBAR, EVENT } from "../../constants";
 import { useUIAppState } from "../../context/ui-appState";
 import { deburr } from "../../deburr";
 import { atom, useAtom, editorJotaiStore } from "../../editor-jotai";
 import { t } from "../../i18n";
-import { KEYS } from "../../keys";
 import {
   useApp,
   useAppProps,
@@ -42,13 +49,7 @@ import {
   LibraryIcon,
 } from "../icons";
 
-import {
+import { SHAPES } from "../shapes";
-  capitalizeString,
-  getShortcutKey,
-  isWritableElement,
-} from "../../utils";
-
-import { SHAPES } from "../../shapes";
 import { canChangeBackgroundColor, canChangeStrokeColor } from "../Actions";
 import { useStableCallback } from "../../hooks/useStableCallback";
 import { activeConfirmDialogAtom } from "../ActiveConfirmDialog";

packages/excalidraw/components/DarkModeToggle.tsx

@@ -1,12 +1,13 @@
-import { THEME } from "../constants";
+import { THEME } from "@excalidraw/common";
+
+import type { Theme } from "@excalidraw/element/types";
+
 import { t } from "../i18n";
 
 import { ToolButton } from "./ToolButton";
 
 import "./ToolIcon.scss";
 
-import type { Theme } from "../element/types";
-
 // We chose to use only explicit toggle and not a third option for system value,
 // but this could be added in the future.
 export const DarkModeToggle = (props: {

packages/excalidraw/components/DefaultSidebar.test.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
-import { DEFAULT_SIDEBAR } from "../constants";
+import { DEFAULT_SIDEBAR } from "@excalidraw/common";
+
 import { DefaultSidebar } from "../index";
 import {
   fireEvent,

packages/excalidraw/components/DefaultSidebar.tsx

@@ -4,10 +4,11 @@ import {
   CANVAS_SEARCH_TAB,
   DEFAULT_SIDEBAR,
   LIBRARY_SIDEBAR_TAB,
-} from "../constants";
+  composeEventHandlers,
+} from "@excalidraw/common";
+
 import { useTunnels } from "../context/tunnels";
 import { useUIAppState } from "../context/ui-appState";
-import { composeEventHandlers } from "../utils";
 
 import "../components/dropdownMenu/DropdownMenu.scss";
 

packages/excalidraw/components/Dialog.tsx

@@ -1,11 +1,11 @@
 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 { KEYS } from "../keys";
-import { queryFocusableElements } from "../utils";
 
 import {
   useExcalidrawContainer,

packages/excalidraw/components/ElementLinkDialog.tsx

@@ -1,13 +1,16 @@
 import { useCallback, useEffect, useState } from "react";
 
-import { normalizeLink } from "../data/url";
+import { normalizeLink, KEYS } from "@excalidraw/common";
+
 import {
   defaultGetElementLinkFromSelection,
   getLinkIdAndTypeFromSelection,
-} from "../element/elementLink";
+} from "@excalidraw/element/elementLink";
-import { mutateElement } from "../element/mutateElement";
+import { mutateElement } from "@excalidraw/element/mutateElement";
+
+import type { ElementsMap, ExcalidrawElement } from "@excalidraw/element/types";
+
 import { t } from "../i18n";
-import { KEYS } from "../keys";
 import { getSelectedElements } from "../scene";
 
 import DialogActionButton from "./DialogActionButton";
@@ -17,7 +20,6 @@ import { TrashIcon } from "./icons";
 
 import "./ElementLinkDialog.scss";
 
-import type { ElementsMap, ExcalidrawElement } from "../element/types";
 import type { AppProps, AppState, UIAppState } from "../types";
 
 const ElementLinkDialog = ({

packages/excalidraw/components/EyeDropper.tsx

@@ -1,22 +1,21 @@
 import { useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 
-import { rgbToHex } from "../colors";
+import { EVENT, KEYS, rgbToHex } from "@excalidraw/common";
-import { EVENT } from "../constants";
+
+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 { useStable } from "../hooks/useStable";
-import { KEYS } from "../keys";
 import { getSelectedElements } from "../scene";
 
 import { useApp, useExcalidrawContainer, useExcalidrawElements } from "./App";
 
 import "./EyeDropper.scss";
 
-import type { ExcalidrawElement } from "../element/types";
-
 import type { ColorPickerType } from "./ColorPicker/colorPickerUtils";
 
 export type EyeDropperProperties = {

packages/excalidraw/components/FilledButton.tsx

@@ -1,8 +1,9 @@
 import clsx from "clsx";
 import React, { forwardRef, useState } from "react";
 
+import { isPromiseLike } from "@excalidraw/common";
+
 import { AbortError } from "../errors";
-import { isPromiseLike } from "../utils";
 
 import Spinner from "./Spinner";
 import { tablerCheckIcon } from "./icons";

packages/excalidraw/components/FontPicker/FontPicker.tsx

@@ -1,7 +1,10 @@
 import * as Popover from "@radix-ui/react-popover";
 import React, { useCallback, useMemo } from "react";
 
-import { FONT_FAMILY } from "../../constants";
+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";
@@ -16,8 +19,6 @@ import { FontPickerTrigger } from "./FontPickerTrigger";
 
 import "./FontPicker.scss";
 
-import type { FontFamilyValues } from "../../element/types";
-
 export const DEFAULT_FONTS = [
   {
     value: FONT_FAMILY.Excalifont,

packages/excalidraw/components/FontPicker/FontPickerList.tsx

@@ -7,10 +7,12 @@ import React, {
   type KeyboardEventHandler,
 } from "react";
 
-import { type FontFamilyValues } from "../../element/types";
+import { type FontFamilyValues } from "@excalidraw/element/types";
+
+import { arrayToList, debounce, getFontFamilyString } from "@excalidraw/common";
+
 import { Fonts } from "../../fonts";
 import { t } from "../../i18n";
-import { arrayToList, debounce, getFontFamilyString } from "../../utils";
 import { useApp, useAppProps, useExcalidrawContainer } from "../App";
 import { PropertiesPopover } from "../PropertiesPopover";
 import { QuickSearch } from "../QuickSearch";

packages/excalidraw/components/FontPicker/FontPickerTrigger.tsx

@@ -1,14 +1,14 @@
 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 { isDefaultFont } from "./FontPicker";
 
-import type { FontFamilyValues } from "../../element/types";
-
 interface FontPickerTriggerProps {
   selectedFontFamily: FontFamilyValues | null;
 }

packages/excalidraw/components/FontPicker/keyboardNavHandlers.ts

@@ -1,9 +1,9 @@
-import { KEYS } from "../../keys";
+import { KEYS } from "@excalidraw/common";
+
+import type { Node } from "@excalidraw/common";
 
 import { type FontDescriptor } from "./FontPickerList";
 
-import type { Node } from "../../utils";
-
 interface FontPickerKeyNavHandlerProps {
   event: React.KeyboardEvent<HTMLDivElement>;
   inputRef: React.RefObject<HTMLInputElement | null>;

packages/excalidraw/components/HelpDialog.tsx

@@ -1,11 +1,12 @@
 import React from "react";
 
+import { isDarwin, isFirefox, isWindows } from "@excalidraw/common";
+
+import { KEYS, getShortcutKey } from "@excalidraw/common";
+
 import { getShortcutFromShortcutName } from "../actions/shortcuts";
 import { probablySupportsClipboardBlob } from "../clipboard";
-import { isDarwin, isFirefox, isWindows } from "../constants";
 import { t } from "../i18n";
-import { KEYS } from "../keys";
-import { getShortcutKey } from "../utils";
 
 import { Dialog } from "./Dialog";
 import { ExternalLinkIcon, GithubIcon, youtubeIcon } from "./icons";

packages/excalidraw/components/HintViewer.tsx

@@ -1,18 +1,20 @@
-import { isEraserActive } from "../appState";
+import { CANVAS_SEARCH_TAB, DEFAULT_SIDEBAR } from "@excalidraw/common";
+
 import {
   isFlowchartNodeElement,
   isImageElement,
   isLinearElement,
   isTextBindableContainer,
   isTextElement,
-} from "../element/typeChecks";
+} from "@excalidraw/element/typeChecks";
+
+import { getShortcutKey } from "@excalidraw/common";
+
+import { isNodeInFlowchart } from "@excalidraw/element/flowchart";
+
 import { t } from "../i18n";
-
+import { isEraserActive } from "../appState";
-import { getShortcutKey } from "../utils";
-
-import { isNodeInFlowchart } from "../element/flowchart";
 import { isGridModeEnabled } from "../snapping";
-import { CANVAS_SEARCH_TAB, DEFAULT_SIDEBAR } from "../constants";
 
 import "./HintViewer.scss";
 

packages/excalidraw/components/IconPicker.tsx

@@ -2,9 +2,10 @@ import * as Popover from "@radix-ui/react-popover";
 import clsx from "clsx";
 import React, { useEffect } from "react";
 
+import { isArrowKey, KEYS } from "@excalidraw/common";
+
 import { atom, useAtom } from "../editor-jotai";
 import { getLanguage, t } from "../i18n";
-import { isArrowKey, KEYS } from "../keys";
 
 import Collapsible from "./Stats/Collapsible";
 import { useDevice } from "./App";

packages/excalidraw/components/ImageExportDialog.tsx

@@ -1,6 +1,15 @@
 import { exportToCanvas } from "@excalidraw/utils/export";
 import React, { useEffect, useRef, useState } from "react";
 
+import {
+  DEFAULT_EXPORT_PADDING,
+  EXPORT_IMAGE_TYPES,
+  isFirefox,
+  EXPORT_SCALES,
+} from "@excalidraw/common";
+
+import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
+
 import {
   actionExportWithDarkMode,
   actionChangeExportBackground,
@@ -9,12 +18,6 @@ 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";
@@ -34,7 +37,7 @@ import { FilledButton } from "./FilledButton";
 import "./ImageExportDialog.scss";
 
 import type { ActionManager } from "../actions/manager";
-import type { NonDeletedExcalidrawElement } from "../element/types";
+
 import type { AppClassProperties, BinaryFiles, UIAppState } from "../types";
 
 const supportsContextFilters =

packages/excalidraw/components/InitializeApp.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect, useState } from "react";
 
+import type { Theme } from "@excalidraw/element/types";
+
 import { defaultLang, languages, setLanguage } from "../i18n";
 
 import { LoadingMessage } from "./LoadingMessage";
 
-import type { Theme } from "../element/types";
 import type { Language } from "../i18n";
 
 interface Props {

packages/excalidraw/components/JSONExportDialog.tsx

@@ -1,11 +1,14 @@
 import React from "react";
 
+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 { getFrame } from "../utils";
 
 import { Card } from "./Card";
 import { Dialog } from "./Dialog";
@@ -15,7 +18,7 @@ import { exportToFileIcon, LinkIcon } from "./icons";
 import "./ExportDialog.scss";
 
 import type { ActionManager } from "../actions/manager";
-import type { NonDeletedExcalidrawElement } from "../element/types";
+
 import type { ExportOpts, BinaryFiles, UIAppState } from "../types";
 
 export type ExportCB = (

packages/excalidraw/components/LayerUI.tsx

@@ -1,20 +1,31 @@
 import clsx from "clsx";
 import React from "react";
 
-import { mutateElement } from "../element/mutateElement";
+import {
+  CLASSES,
+  DEFAULT_SIDEBAR,
+  TOOL_TYPE,
+  capitalizeString,
+  isShallowEqual,
+} from "@excalidraw/common";
+
+import { mutateElement } from "@excalidraw/element/mutateElement";
+
+import { showSelectedShapeActions } from "@excalidraw/element";
+
+import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
+
 import { ShapeCache } from "../scene/ShapeCache";
 import Scene from "../scene/Scene";
 import { actionToggleStats } from "../actions";
 import { trackEvent } from "../analytics";
 import { isHandToolActive } from "../appState";
-import { CLASSES, DEFAULT_SIDEBAR, TOOL_TYPE } from "../constants";
 import { TunnelsContext, useInitializeTunnels } from "../context/tunnels";
 import { UIAppStateContext } from "../context/ui-appState";
 import { useAtom, useAtomValue } from "../editor-jotai";
-import { showSelectedShapeActions } from "../element";
+
 import { t } from "../i18n";
 import { calculateScrollCenter } from "../scene";
-import { capitalizeString, isShallowEqual } from "../utils";
 
 import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
 import { LoadingMessage } from "./LoadingMessage";
@@ -51,7 +62,7 @@ import "./LayerUI.scss";
 import "./Toolbar.scss";
 
 import type { ActionManager } from "../actions/manager";
-import type { NonDeletedExcalidrawElement } from "../element/types";
+
 import type { Language } from "../i18n";
 import type {
   AppProps,

packages/excalidraw/components/LibraryMenu.tsx

@@ -7,8 +7,18 @@ import React, {
   useRef,
 } from "react";
 
+import {
+  LIBRARY_DISABLED_TYPES,
+  randomId,
+  isShallowEqual,
+} from "@excalidraw/common";
+
+import type {
+  ExcalidrawElement,
+  NonDeletedExcalidrawElement,
+} from "@excalidraw/element/types";
+
 import { trackEvent } from "../analytics";
-import { LIBRARY_DISABLED_TYPES } from "../constants";
 import { useUIAppState } from "../context/ui-appState";
 import {
   distributeLibraryItemsOnSquareGrid,
@@ -16,9 +26,8 @@ import {
 } from "../data/library";
 import { atom, useAtom } from "../editor-jotai";
 import { t } from "../i18n";
-import { randomId } from "../random";
+
 import { getSelectedElements } from "../scene";
-import { isShallowEqual } from "../utils";
 
 import {
   useApp,
@@ -32,10 +41,6 @@ import Spinner from "./Spinner";
 
 import "./LibraryMenu.scss";
 
-import type {
-  ExcalidrawElement,
-  NonDeletedExcalidrawElement,
-} from "../element/types";
 import type {
   LibraryItems,
   LibraryItem,

packages/excalidraw/components/LibraryMenuBrowseButton.tsx

@@ -1,4 +1,5 @@
-import { VERSIONS } from "../constants";
+import { VERSIONS } from "@excalidraw/common";
+
 import { t } from "../i18n";
 
 import type { ExcalidrawProps, UIAppState } from "../types";

packages/excalidraw/components/LibraryMenuHeaderContent.tsx

@@ -1,6 +1,8 @@
 import clsx from "clsx";
 import { useCallback, useState } from "react";
 
+import { muteFSAbortError } from "@excalidraw/common";
+
 import { useUIAppState } from "../context/ui-appState";
 import { fileOpen } from "../data/filesystem";
 import { saveLibraryAsJSON } from "../data/json";
@@ -8,7 +10,6 @@ import { libraryItemsAtom } from "../data/library";
 import { useAtom } from "../editor-jotai";
 import { useLibraryCache } from "../hooks/useLibraryItemSvg";
 import { t } from "../i18n";
-import { muteFSAbortError } from "../utils";
 
 import { useApp, useExcalidrawSetAppState } from "./App";
 import ConfirmDialog from "./ConfirmDialog";

packages/excalidraw/components/LibraryMenuItems.tsx

@@ -6,7 +6,8 @@ import React, {
   useState,
 } from "react";
 
-import { MIME_TYPES } from "../constants";
+import { MIME_TYPES } from "@excalidraw/common";
+
 import { serializeLibraryAsJSON } from "../data/json";
 import { duplicateElements } from "../element/newElement";
 import { useLibraryCache } from "../hooks/useLibraryItemSvg";

packages/excalidraw/components/LibraryMenuSection.tsx

@@ -1,10 +1,11 @@
 import React, { memo, useEffect, useState } from "react";
 
+import type { ExcalidrawElement, NonDeleted } from "@excalidraw/element/types";
+
 import { useTransition } from "../hooks/useTransition";
 
 import { EmptyLibraryUnit, LibraryUnit } from "./LibraryUnit";
 
-import type { ExcalidrawElement, NonDeleted } from "../element/types";
 import type { SvgCache } from "../hooks/useLibraryItemSvg";
 import type { LibraryItem } from "../types";
 import type { ReactNode } from "react";

packages/excalidraw/components/LoadingMessage.tsx

@@ -1,13 +1,14 @@
 import clsx from "clsx";
 import { useState, useEffect } from "react";
 
-import { THEME } from "../constants";
+import { THEME } from "@excalidraw/common";
+
+import type { Theme } from "@excalidraw/element/types";
+
 import { t } from "../i18n";
 
 import Spinner from "./Spinner";
 
-import type { Theme } from "../element/types";
-
 export const LoadingMessage: React.FC<{ delay?: number; theme?: Theme }> = ({
   delay,
   theme,

packages/excalidraw/components/MobileMenu.tsx

@@ -1,8 +1,11 @@
 import React from "react";
 
+import { showSelectedShapeActions } from "@excalidraw/element";
+
+import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
+
 import { isHandToolActive } from "../appState";
 import { useTunnels } from "../context/tunnels";
-import { showSelectedShapeActions } from "../element";
 import { t } from "../i18n";
 import { calculateScrollCenter } from "../scene";
 import { SCROLLBAR_WIDTH, SCROLLBAR_MARGIN } from "../scene/scrollbars";
@@ -18,7 +21,6 @@ import { Section } from "./Section";
 import Stack from "./Stack";
 
 import type { ActionManager } from "../actions/manager";
-import type { NonDeletedExcalidrawElement } from "../element/types";
 import type {
   AppClassProperties,
   AppProps,

packages/excalidraw/components/Modal.tsx

@@ -2,8 +2,9 @@ import clsx from "clsx";
 import { useRef } from "react";
 import { createPortal } from "react-dom";
 
+import { KEYS } from "@excalidraw/common";
+
 import { useCreatePortalContainer } from "../hooks/useCreatePortalContainer";
-import { KEYS } from "../keys";
 
 import "./Modal.scss";
 

packages/excalidraw/components/PasteChartDialog.tsx

@@ -1,6 +1,8 @@
 import oc from "open-color";
 import React, { useLayoutEffect, useRef, useState } from "react";
 
+import type { ChartType } from "@excalidraw/element/types";
+
 import { trackEvent } from "../analytics";
 import { renderSpreadsheet } from "../charts";
 import { t } from "../i18n";
@@ -12,7 +14,6 @@ import { Dialog } from "./Dialog";
 import "./PasteChartDialog.scss";
 
 import type { ChartElements, Spreadsheet } from "../charts";
-import type { ChartType } from "../element/types";
 import type { UIAppState } from "../types";
 
 type OnInsertChart = (chartType: ChartType, elements: ChartElements) => void;

packages/excalidraw/components/Popover.tsx

@@ -1,8 +1,7 @@
 import React, { useLayoutEffect, useRef, useEffect } from "react";
 import { unstable_batchedUpdates } from "react-dom";
 
-import { KEYS } from "../keys";
+import { KEYS, queryFocusableElements } from "@excalidraw/common";
-import { queryFocusableElements } from "../utils";
 
 import "./Popover.scss";
 

packages/excalidraw/components/ProjectName.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 
-import { focusNearestParent } from "../utils";
+import { focusNearestParent, KEYS } from "@excalidraw/common";
-import { KEYS } from "../keys";
 
 import { useExcalidrawContainer } from "./App";
 

packages/excalidraw/components/PropertiesPopover.tsx

@@ -2,7 +2,7 @@ import * as Popover from "@radix-ui/react-popover";
 import clsx from "clsx";
 import React, { type ReactNode } from "react";
 
-import { isInteractive } from "../utils";
+import { isInteractive } from "@excalidraw/common";
 
 import { useDevice } from "./App";
 import { Island } from "./Island";

packages/excalidraw/components/PublishLibrary.tsx

@@ -8,11 +8,12 @@ import {
   EXPORT_SOURCE,
   MIME_TYPES,
   VERSIONS,
-} from "../constants";
+  chunk,
+} from "@excalidraw/common";
+
 import { EditorLocalStorage } from "../data/EditorLocalStorage";
 import { canvasToBlob, resizeImageFile } from "../data/blob";
 import { t } from "../i18n";
-import { chunk } from "../utils";
 
 import { Dialog } from "./Dialog";
 import DialogActionButton from "./DialogActionButton";

packages/excalidraw/components/SearchMenu.tsx

@@ -3,17 +3,27 @@ import clsx from "clsx";
 import debounce from "lodash.debounce";
 import { Fragment, memo, useEffect, useRef, useState } from "react";
 
-import { CLASSES, EVENT } from "../constants";
+import { CLASSES, EVENT } from "@excalidraw/common";
-import { atom, useAtom } from "../editor-jotai";
+
-import { isTextElement, newTextElement } from "../element";
+import { isTextElement, newTextElement } from "@excalidraw/element";
-import { isElementCompletelyInViewport } from "../element/sizeHelpers";
+
+import { isElementCompletelyInViewport } from "@excalidraw/element/sizeHelpers";
+
+import { measureText } from "@excalidraw/element/textMeasurements";
+
+import {
+  KEYS,
+  randomInteger,
+  addEventListener,
+  getFontString,
+} from "@excalidraw/common";
+
+import type { ExcalidrawTextElement } from "@excalidraw/element/types";
+
+import { atom, useAtom } from "../editor-jotai";
 
-import { measureText } from "../element/textMeasurements";
 import { useStable } from "../hooks/useStable";
 import { t } from "../i18n";
-import { KEYS } from "../keys";
-import { randomInteger } from "../random";
-import { addEventListener, getFontString } from "../utils";
 
 import { useApp, useExcalidrawSetAppState } from "./App";
 import { Button } from "./Button";
@@ -22,7 +32,6 @@ import { collapseDownIcon, upIcon, searchIcon } from "./icons";
 
 import "./SearchMenu.scss";
 
-import type { ExcalidrawTextElement } from "../element/types";
 import type { AppClassProperties } from "../types";
 
 const searchQueryAtom = atom<string>("");

packages/excalidraw/components/Sidebar/Sidebar.test.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { vi } from "vitest";
 
-import { DEFAULT_SIDEBAR } from "../../constants";
+import { DEFAULT_SIDEBAR } from "@excalidraw/common";
+
 import { Excalidraw, Sidebar } from "../../index";
 import {
   act,

packages/excalidraw/components/Sidebar/Sidebar.tsx

@@ -9,12 +9,11 @@ import React, {
   useCallback,
 } from "react";
 
-import { EVENT } from "../../constants";
+import { EVENT, KEYS, updateObject } from "@excalidraw/common";
+
 import { useUIAppState } from "../../context/ui-appState";
 import { atom, useSetAtom } from "../../editor-jotai";
 import { useOutsideClick } from "../../hooks/useOutsideClick";
-import { KEYS } from "../../keys";
-import { updateObject } from "../../utils";
 import { useDevice, useExcalidrawSetAppState } from "../App";
 import { Island } from "../Island";
 

packages/excalidraw/components/Stats/Angle.tsx

@@ -1,17 +1,20 @@
 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 { mutateElement } from "../../element/mutateElement";
+import type { ExcalidrawElement } from "@excalidraw/element/types";
-import { getBoundTextElement } from "../../element/textElement";
+
-import { isArrowElement, isElbowArrow } from "../../element/typeChecks";
 import { angleIcon } from "../icons";
 
 import DragInput from "./DragInput";
 import { getStepSizedValue, isPropertyEditable, updateBindings } from "./utils";
 
 import type { DragInputCallbackType } from "./DragInput";
-import type { ExcalidrawElement } from "../../element/types";
 import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
 

packages/excalidraw/components/Stats/Dimension.tsx

@@ -1,19 +1,20 @@
 import { clamp, round } from "@excalidraw/math";
 
-import { MIN_WIDTH_OR_HEIGHT } from "../../constants";
+import { MIN_WIDTH_OR_HEIGHT } from "@excalidraw/common";
 import {
   MINIMAL_CROP_SIZE,
   getUncroppedWidthAndHeight,
-} from "../../element/cropElement";
+} from "@excalidraw/element/cropElement";
-import { mutateElement } from "../../element/mutateElement";
+import { mutateElement } from "@excalidraw/element/mutateElement";
-import { resizeSingleElement } from "../../element/resizeElements";
+import { resizeSingleElement } from "@excalidraw/element/resizeElements";
-import { isImageElement } from "../../element/typeChecks";
+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 { ExcalidrawElement } from "../../element/types";
 import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
 

packages/excalidraw/components/Stats/DragInput.tsx

@@ -1,11 +1,12 @@
 import clsx from "clsx";
 import { useEffect, useRef, useState } from "react";
 
-import { EVENT } from "../../constants";
+import { EVENT, KEYS, cloneJSON } from "@excalidraw/common";
-import { deepCopyElement } from "../../element/newElement";
+import { deepCopyElement } from "@excalidraw/element/newElement";
-import { KEYS } from "../../keys";
+
+import type { ElementsMap, ExcalidrawElement } from "@excalidraw/element/types";
+
 import { CaptureUpdateAction } from "../../store";
-import { cloneJSON } from "../../utils";
 import { useApp } from "../App";
 import { InlineIcon } from "../InlineIcon";
 
@@ -14,7 +15,6 @@ import { SMALLEST_DELTA } from "./utils";
 import "./DragInput.scss";
 
 import type { StatsInputProperty } from "./utils";
-import type { ElementsMap, ExcalidrawElement } from "../../element/types";
 import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
 

packages/excalidraw/components/Stats/FontSize.tsx

@@ -1,17 +1,19 @@
-import { isTextElement, redrawTextBoundingBox } from "../../element";
+import { isTextElement, redrawTextBoundingBox } from "@excalidraw/element";
-import { mutateElement } from "../../element/mutateElement";
+import { mutateElement } from "@excalidraw/element/mutateElement";
-import { getBoundTextElement } from "../../element/textElement";
+import { getBoundTextElement } from "@excalidraw/element/textElement";
-import { hasBoundTextElement } from "../../element/typeChecks";
+import { hasBoundTextElement } from "@excalidraw/element/typeChecks";
+
+import type {
+  ExcalidrawElement,
+  ExcalidrawTextElement,
+} from "@excalidraw/element/types";
+
 import { fontSizeIcon } from "../icons";
 
 import StatsDragInput from "./DragInput";
 import { getStepSizedValue } from "./utils";
 
 import type { DragInputCallbackType } from "./DragInput";
-import type {
-  ExcalidrawElement,
-  ExcalidrawTextElement,
-} from "../../element/types";
 import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
 

packages/excalidraw/components/Stats/MultiAngle.tsx

@@ -1,18 +1,22 @@
+import { isInGroup } from "@excalidraw/common";
+
 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 type { Degrees } from "@excalidraw/math";
 
-import { mutateElement } from "../../element/mutateElement";
+import type { ExcalidrawElement } from "@excalidraw/element/types";
-import { getBoundTextElement } from "../../element/textElement";
+
-import { isArrowElement } from "../../element/typeChecks";
-import { isInGroup } from "../../groups";
 import { angleIcon } from "../icons";
 
 import DragInput from "./DragInput";
 import { getStepSizedValue, isPropertyEditable } from "./utils";
 
 import type { DragInputCallbackType } from "./DragInput";
-import type { ExcalidrawElement } from "../../element/types";
 import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
 

packages/excalidraw/components/Stats/MultiDimension.tsx

@@ -1,18 +1,24 @@
 import { pointFrom, type GlobalPoint } from "@excalidraw/math";
 import { useMemo } from "react";
 
-import { MIN_WIDTH_OR_HEIGHT } from "../../constants";
+import { MIN_WIDTH_OR_HEIGHT } from "@excalidraw/common";
-import { getCommonBounds, isTextElement } from "../../element";
+import { getCommonBounds, isTextElement } from "@excalidraw/element";
-import { updateBoundElements } from "../../element/binding";
+import { updateBoundElements } from "@excalidraw/element/binding";
-import { mutateElement } from "../../element/mutateElement";
+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 type {
+  ElementsMap,
+  ExcalidrawElement,
+  NonDeletedSceneElementsMap,
+} from "@excalidraw/element/types";
 
 import DragInput from "./DragInput";
 import { getAtomicUnits, getStepSizedValue, isPropertyEditable } from "./utils";
@@ -20,11 +26,6 @@ import { getElementsInAtomicUnit } from "./utils";
 
 import type { DragInputCallbackType } from "./DragInput";
 import type { AtomicUnit } from "./utils";
-import type {
-  ElementsMap,
-  ExcalidrawElement,
-  NonDeletedSceneElementsMap,
-} from "../../element/types";
 import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
 

packages/excalidraw/components/Stats/MultiFontSize.tsx

@@ -1,7 +1,14 @@
-import { isTextElement, redrawTextBoundingBox } from "../../element";
+import { isTextElement, redrawTextBoundingBox } from "@excalidraw/element";
-import { mutateElement } from "../../element/mutateElement";
+import { mutateElement } from "@excalidraw/element/mutateElement";
-import { getBoundTextElement } from "../../element/textElement";
+import { getBoundTextElement } from "@excalidraw/element/textElement";
-import { hasBoundTextElement } from "../../element/typeChecks";
+import { hasBoundTextElement } from "@excalidraw/element/typeChecks";
+
+import type {
+  ExcalidrawElement,
+  ExcalidrawTextElement,
+  NonDeletedSceneElementsMap,
+} from "@excalidraw/element/types";
+
 import { isInGroup } from "../../groups";
 import { fontSizeIcon } from "../icons";
 
@@ -9,11 +16,6 @@ import StatsDragInput from "./DragInput";
 import { getStepSizedValue } from "./utils";
 
 import type { DragInputCallbackType } from "./DragInput";
-import type {
-  ExcalidrawElement,
-  ExcalidrawTextElement,
-  NonDeletedSceneElementsMap,
-} from "../../element/types";
 import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
 

packages/excalidraw/components/Stats/MultiPosition.tsx

@@ -1,7 +1,14 @@
 import { pointFrom, pointRotateRads } from "@excalidraw/math";
 import { useMemo } from "react";
 
-import { getCommonBounds, isTextElement } from "../../element";
+import { getCommonBounds, isTextElement } from "@excalidraw/element";
+
+import type {
+  ElementsMap,
+  ExcalidrawElement,
+  NonDeletedExcalidrawElement,
+  NonDeletedSceneElementsMap,
+} from "@excalidraw/element/types";
 
 import StatsDragInput from "./DragInput";
 import { getAtomicUnits, getStepSizedValue, isPropertyEditable } from "./utils";
@@ -9,12 +16,6 @@ import { getElementsInAtomicUnit, moveElement } from "./utils";
 
 import type { DragInputCallbackType } from "./DragInput";
 import type { AtomicUnit } from "./utils";
-import type {
-  ElementsMap,
-  ExcalidrawElement,
-  NonDeletedExcalidrawElement,
-  NonDeletedSceneElementsMap,
-} from "../../element/types";
 import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
 

packages/excalidraw/components/Stats/Position.tsx

@@ -3,15 +3,16 @@ import { clamp, pointFrom, pointRotateRads, round } from "@excalidraw/math";
 import {
   getFlipAdjustedCropPosition,
   getUncroppedWidthAndHeight,
-} from "../../element/cropElement";
+} from "@excalidraw/element/cropElement";
-import { mutateElement } from "../../element/mutateElement";
+import { mutateElement } from "@excalidraw/element/mutateElement";
-import { isImageElement } from "../../element/typeChecks";
+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 { ElementsMap, ExcalidrawElement } from "../../element/types";
 import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
 

packages/excalidraw/components/Stats/index.tsx

@@ -3,12 +3,15 @@ import clsx from "clsx";
 import throttle from "lodash.throttle";
 import { useEffect, useMemo, useState, memo } from "react";
 
-import { STATS_PANELS } from "../../constants";
+import { STATS_PANELS, elementsAreInSameGroup } from "@excalidraw/common";
-import { getCommonBounds } from "../../element/bounds";
+import { getCommonBounds } from "@excalidraw/element/bounds";
-import { getUncroppedWidthAndHeight } from "../../element/cropElement";
+import { getUncroppedWidthAndHeight } from "@excalidraw/element/cropElement";
-import { isElbowArrow, isImageElement } from "../../element/typeChecks";
+import { isElbowArrow, isImageElement } from "@excalidraw/element/typeChecks";
-import { frameAndChildrenSelectedTogether } from "../../frame";
+
-import { elementsAreInSameGroup } from "../../groups";
+import { frameAndChildrenSelectedTogether } from "@excalidraw/element/frame";
+
+import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
+
 import { t } from "../../i18n";
 import { isGridModeEnabled } from "../../snapping";
 import { useExcalidrawAppState, useExcalidrawSetAppState } from "../App";
@@ -29,7 +32,6 @@ import { getAtomicUnits } from "./utils";
 
 import "./Stats.scss";
 
-import type { NonDeletedExcalidrawElement } from "../../element/types";
 import type {
   AppClassProperties,
   AppState,

packages/excalidraw/components/Stats/stats.test.tsx

@@ -3,14 +3,21 @@ import { act, fireEvent, queryByTestId } from "@testing-library/react";
 import React from "react";
 import { vi } from "vitest";
 
+import { getCommonBounds, isTextElement } from "@excalidraw/element";
+
+import { setDateTimeForTests, isInGroup, reseed } from "@excalidraw/common";
+
 import type { Degrees } from "@excalidraw/math";
 
+import type {
+  ExcalidrawElement,
+  ExcalidrawLinearElement,
+  ExcalidrawTextElement,
+} from "@excalidraw/element/types";
+
 import { Excalidraw, mutateElement } from "../..";
 import { actionGroup } from "../../actions";
-import { getCommonBounds, isTextElement } from "../../element";
-import { isInGroup } from "../../groups";
 import { t } from "../../i18n";
-import { reseed } from "../../random";
 import * as StaticScene from "../../renderer/staticScene";
 import { API } from "../../tests/helpers/api";
 import { Keyboard, Pointer, UI } from "../../tests/helpers/ui";
@@ -21,16 +28,9 @@ import {
   render,
   restoreOriginalGetBoundingClientRect,
 } from "../../tests/test-utils";
-import { setDateTimeForTests } from "../../utils";
 
 import { getStepSizedValue } from "./utils";
 
-import type {
-  ExcalidrawElement,
-  ExcalidrawLinearElement,
-  ExcalidrawTextElement,
-} from "../../element/types";
-
 const { h } = window;
 const mouse = new Pointer("mouse");
 const renderStaticScene = vi.spyOn(StaticScene, "renderStaticScene");

packages/excalidraw/components/Stats/utils.ts

@@ -1,30 +1,32 @@
 import { pointFrom, pointRotateRads } from "@excalidraw/math";
 
-import type { Radians } from "@excalidraw/math";
-
 import {
   bindOrUnbindLinearElements,
   updateBoundElements,
-} from "../../element/binding";
+} from "@excalidraw/element/binding";
-import { mutateElement } from "../../element/mutateElement";
+import { mutateElement } from "@excalidraw/element/mutateElement";
-import { getBoundTextElement } from "../../element/textElement";
+import { getBoundTextElement } from "@excalidraw/element/textElement";
 import {
   isFrameLikeElement,
   isLinearElement,
   isTextElement,
-} from "../../element/typeChecks";
+} from "@excalidraw/element/typeChecks";
-import {
+
-  getSelectedGroupIds,
+import type { Radians } from "@excalidraw/math";
-  getElementsInGroup,
-  isInGroup,
-} from "../../groups";
 
 import type {
   ElementsMap,
   ExcalidrawElement,
   NonDeletedExcalidrawElement,
   NonDeletedSceneElementsMap,
-} from "../../element/types";
+} from "@excalidraw/element/types";
+
+import {
+  getSelectedGroupIds,
+  getElementsInGroup,
+  isInGroup,
+} from "../../groups";
+
 import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
 

packages/excalidraw/components/TTDDialog/MermaidToExcalidraw.tsx

@@ -1,11 +1,13 @@
 import { useState, useRef, useEffect, useDeferredValue } from "react";
 
+import { EDITOR_LS_KEYS, debounce, isDevEnv } from "@excalidraw/common";
+
+import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
+
 import { useApp } from "../App";
 import { ArrowRightIcon } from "../icons";
-import { EDITOR_LS_KEYS } from "../../constants";
 import { EditorLocalStorage } from "../../data/EditorLocalStorage";
 import { t } from "../../i18n";
-import { debounce, isDevEnv } from "../../utils";
 import Trans from "../Trans";
 
 import { TTDDialogInput } from "./TTDDialogInput";
@@ -23,7 +25,6 @@ import "./MermaidToExcalidraw.scss";
 
 import type { BinaryFiles } from "../../types";
 import type { MermaidToExcalidrawLibProps } from "./common";
-import type { NonDeletedExcalidrawElement } from "../../element/types";
 
 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]";

packages/excalidraw/components/TTDDialog/TTDDialog.tsx

@@ -1,6 +1,9 @@
-import { isFiniteNumber } from "@excalidraw/math";
 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";
@@ -32,7 +35,7 @@ import "./TTDDialog.scss";
 
 import type { ChangeEventHandler } from "react";
 import type { MermaidToExcalidrawLibProps } from "./common";
-import type { NonDeletedExcalidrawElement } from "../../element/types";
+
 import type { BinaryFiles } from "../../types";
 
 const MIN_PROMPT_LENGTH = 3;

packages/excalidraw/components/TTDDialog/TTDDialogInput.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useRef } from "react";
 
-import { EVENT } from "../../constants";
+import { EVENT, KEYS } from "@excalidraw/common";
-import { KEYS } from "../../keys";
 
 import type { ChangeEventHandler } from "react";
 

packages/excalidraw/components/TTDDialog/TTDDialogSubmitShortcut.tsx

@@ -1,4 +1,4 @@
-import { getShortcutKey } from "../../utils";
+import { getShortcutKey } from "@excalidraw/common";
 
 export const TTDDialogSubmitShortcut = () => {
   return (

packages/excalidraw/components/TTDDialog/TTDDialogTabs.tsx

@@ -1,7 +1,8 @@
 import * as RadixTabs from "@radix-ui/react-tabs";
 import { useRef } from "react";
 
-import { isMemberOf } from "../../utils";
+import { isMemberOf } from "@excalidraw/common";
+
 import { useExcalidrawSetAppState } from "../App";
 
 import type { ReactNode } from "react";

packages/excalidraw/components/TTDDialog/common.ts

@@ -1,13 +1,15 @@
+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 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 { NonDeletedExcalidrawElement } from "../../element/types";
 import type { AppClassProperties, BinaryFiles } from "../../types";
 
 const resetPreview = ({

packages/excalidraw/components/ToolButton.tsx

@@ -1,15 +1,17 @@
 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 { isPromiseLike } from "../utils";
 
 import "./ToolIcon.scss";
 
 import Spinner from "./Spinner";
 import { useExcalidrawContainer } from "./App";
 
-import type { PointerType } from "../element/types";
 import type { CSSProperties } from "react";
 
 export type ToolButtonSize = "small" | "medium";

packages/excalidraw/components/UserList.tsx

@@ -2,9 +2,9 @@ import * as Popover from "@radix-ui/react-popover";
 import clsx from "clsx";
 import React, { useLayoutEffect } from "react";
 
-import { supportsResizeObserver } from "../constants";
+import { supportsResizeObserver, isShallowEqual } from "@excalidraw/common";
+
 import { t } from "../i18n";
-import { isShallowEqual } from "../utils";
 
 import { useExcalidrawActionManager } from "./App";
 import { Island } from "./Island";

packages/excalidraw/components/canvases/InteractiveCanvas.tsx

@@ -1,15 +1,20 @@
 import React, { useEffect, useRef } from "react";
 
-import { CURSOR_TYPE } from "../../constants";
+import {
-import { t } from "../../i18n";
+  CURSOR_TYPE,
-import { isRenderThrottlingEnabled } from "../../reactUtils";
+  isShallowEqual,
-import { renderInteractiveScene } from "../../renderer/interactiveScene";
+  sceneCoordsToViewportCoords,
-import { isShallowEqual, sceneCoordsToViewportCoords } from "../../utils";
+} from "@excalidraw/common";
 
 import type {
   NonDeletedExcalidrawElement,
   NonDeletedSceneElementsMap,
-} from "../../element/types";
+} from "@excalidraw/element/types";
+
+import { t } from "../../i18n";
+import { isRenderThrottlingEnabled } from "../../reactUtils";
+import { renderInteractiveScene } from "../../renderer/interactiveScene";
+
 import type {
   InteractiveCanvasRenderConfig,
   RenderableElementsMap,

packages/excalidraw/components/canvases/NewElementCanvas.tsx

@@ -1,9 +1,10 @@
 import { useEffect, useRef } from "react";
 
+import type { NonDeletedSceneElementsMap } from "@excalidraw/element/types";
+
 import { isRenderThrottlingEnabled } from "../../reactUtils";
 import { renderNewElementScene } from "../../renderer/renderNewElementScene";
 
-import type { NonDeletedSceneElementsMap } from "../../element/types";
 import type {
   RenderableElementsMap,
   StaticCanvasRenderConfig,

packages/excalidraw/components/canvases/StaticCanvas.tsx

@@ -1,13 +1,15 @@
 import React, { useEffect, useRef } from "react";
 
-import { isRenderThrottlingEnabled } from "../../reactUtils";
+import { isShallowEqual } from "@excalidraw/common";
-import { renderStaticScene } from "../../renderer/staticScene";
-import { isShallowEqual } from "../../utils";
 
 import type {
   NonDeletedExcalidrawElement,
   NonDeletedSceneElementsMap,
-} from "../../element/types";
+} from "@excalidraw/element/types";
+
+import { isRenderThrottlingEnabled } from "../../reactUtils";
+import { renderStaticScene } from "../../renderer/staticScene";
+
 import type {
   RenderableElementsMap,
   StaticCanvasRenderConfig,

packages/excalidraw/components/dropdownMenu/DropdownMenu.test.tsx

@@ -1,7 +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,

packages/excalidraw/components/dropdownMenu/DropdownMenuContent.tsx

@@ -1,7 +1,8 @@
 import clsx from "clsx";
 import React, { useEffect, useRef } from "react";
 
-import { EVENT } from "../../constants";
+import { EVENT } from "@excalidraw/common";
+
 import { useOutsideClick } from "../../hooks/useOutsideClick";
 import { useStable } from "../../hooks/useStable";
 import { KEYS } from "../../keys";

packages/excalidraw/components/dropdownMenu/DropdownMenuItem.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef } from "react";
 
-import { THEME } from "../../constants";
+import { THEME } from "@excalidraw/common";
+
 import { useExcalidrawAppState } from "../App";
 
 import MenuItemContent from "./DropdownMenuItemContent";

packages/excalidraw/components/dropdownMenu/common.ts

@@ -1,7 +1,6 @@
 import React, { useContext } from "react";
 
-import { EVENT } from "../../constants";
+import { EVENT, composeEventHandlers } from "@excalidraw/common";
-import { composeEventHandlers } from "../../utils";
 
 export const DropdownMenuContentPropsContext = React.createContext<{
   onSelect?: (event: Event) => void;

packages/excalidraw/components/hyperlink/Hyperlink.tsx

@@ -8,37 +8,51 @@ import {
   useState,
 } from "react";
 
-import { trackEvent } from "../../analytics";
+import { EVENT, HYPERLINK_TOOLTIP_DELAY } from "@excalidraw/common";
-import { getTooltipDiv, updateTooltipPosition } from "../../components/Tooltip";
+
-import { EVENT, HYPERLINK_TOOLTIP_DELAY } from "../../constants";
+import { getElementAbsoluteCoords } from "@excalidraw/element/bounds";
-import { isLocalLink, normalizeLink } from "../../data/url";
+
-import { getElementAbsoluteCoords } from "../../element/bounds";
+import { hitElementBoundingBox } from "@excalidraw/element/collision";
-import { hitElementBoundingBox } from "../../element/collision";
+
-import { isElementLink } from "../../element/elementLink";
+import { isElementLink } from "@excalidraw/element/elementLink";
-import { getEmbedLink, embeddableURLValidator } from "../../element/embeddable";
+
-import { mutateElement } from "../../element/mutateElement";
+import {
-import { t } from "../../i18n";
+  getEmbedLink,
+  embeddableURLValidator,
+} from "@excalidraw/element/embeddable";
+
+import { mutateElement } from "@excalidraw/element/mutateElement";
+
 import {
   sceneCoordsToViewportCoords,
   viewportCoordsToSceneCoords,
   wrapEvent,
-} from "../../utils";
+  isLocalLink,
-import { useAppProps, useDevice, useExcalidrawAppState } from "../App";
+  normalizeLink,
-import { ToolButton } from "../ToolButton";
+} from "@excalidraw/common";
-import { FreedrawIcon, TrashIcon, elementLinkIcon } from "../icons";
-import { KEYS } from "../../keys";
-import { getSelectedElements } from "../../scene";
-import { isEmbeddableElement } from "../../element/typeChecks";
 
-import { getLinkHandleFromCoords } from "./helpers";
+import { isEmbeddableElement } from "@excalidraw/element/typeChecks";
-
-import "./Hyperlink.scss";
 
 import type {
   ElementsMap,
   ExcalidrawEmbeddableElement,
   NonDeletedExcalidrawElement,
-} from "../../element/types";
+} 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 { ToolButton } from "../ToolButton";
+import { FreedrawIcon, TrashIcon, elementLinkIcon } from "../icons";
+import { getSelectedElements } from "../../scene";
+
+import { getLinkHandleFromCoords } from "./helpers";
+
+import "./Hyperlink.scss";
+
 import type { AppState, ExcalidrawProps, UIAppState } from "../../types";
 
 const POPUP_WIDTH = 380;

packages/excalidraw/components/hyperlink/helpers.ts

@@ -1,17 +1,19 @@
 import { pointFrom, pointRotateRads } from "@excalidraw/math";
 
+import { MIME_TYPES } from "@excalidraw/common";
+import { getElementAbsoluteCoords } from "@excalidraw/element/bounds";
+import { hitElementBoundingBox } from "@excalidraw/element/collision";
+
 import type { GlobalPoint, Radians } from "@excalidraw/math";
 
-import { MIME_TYPES } from "../../constants";
+import type { Bounds } from "@excalidraw/element/bounds";
-import { getElementAbsoluteCoords } from "../../element/bounds";
-import { hitElementBoundingBox } from "../../element/collision";
-import { DEFAULT_LINK_SIZE } from "../../renderer/renderElement";
-
-import type { Bounds } from "../../element/bounds";
 import type {
   ElementsMap,
   NonDeletedExcalidrawElement,
-} from "../../element/types";
+} from "@excalidraw/element/types";
+
+import { DEFAULT_LINK_SIZE } from "../../renderer/renderElement";
+
 import type { AppState, UIAppState } from "../../types";
 
 export const EXTERNAL_LINK_IMG = document.createElement("img");

packages/excalidraw/components/icons.tsx

@@ -10,9 +10,9 @@ import clsx from "clsx";
 import oc from "open-color";
 import React from "react";
 
-import { THEME } from "../constants";
+import { THEME } from "@excalidraw/common";
 
-import type { Theme } from "../element/types";
+import type { Theme } from "@excalidraw/element/types";
 
 export const iconFillColor = (theme: Theme) => "var(--icon-fill-color)";
 

packages/excalidraw/components/main-menu/DefaultItems.tsx

@@ -1,5 +1,9 @@
 import clsx from "clsx";
 
+import { THEME } from "@excalidraw/common";
+
+import type { Theme } from "@excalidraw/element/types";
+
 import {
   actionClearCanvas,
   actionLoadScene,
@@ -10,7 +14,6 @@ import {
 } from "../../actions";
 import { getShortcutFromShortcutName } from "../../actions/shortcuts";
 import { trackEvent } from "../../analytics";
-import { THEME } from "../../constants";
 import { useUIAppState } from "../../context/ui-appState";
 import { useSetAtom } from "../../editor-jotai";
 import { useI18n } from "../../i18n";
@@ -44,8 +47,6 @@ import {
 
 import "./DefaultItems.scss";
 
-import type { Theme } from "../../element/types";
-
 export const LoadScene = () => {
   const { t } = useI18n();
   const actionManager = useExcalidrawActionManager();

packages/excalidraw/components/main-menu/MainMenu.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 
+import { composeEventHandlers } from "@excalidraw/common";
+
 import { useTunnels } from "../../context/tunnels";
 import { useUIAppState } from "../../context/ui-appState";
 import { t } from "../../i18n";
-import { composeEventHandlers } from "../../utils";
 import { useDevice, useExcalidrawSetAppState } from "../App";
 import { UserList } from "../UserList";
 import DropdownMenu from "../dropdownMenu/DropdownMenu";

packages/tsconfig.base.json

@@ -1,4 +1,3 @@
-
 {
   "compilerOptions": {
     "target": "ESNext",
@@ -21,9 +20,8 @@
       "@excalidraw/math": ["./math/index.ts"],
       "@excalidraw/math/*": ["./math/src/*"],
       "@excalidraw/utils": ["./utils/index.ts"],
-        "@excalidraw/utils/*": ["./utils/*"],
+      "@excalidraw/utils/*": ["./utils/*"]
     }
   },
   "exclude": ["**/*.test.*", "tests", "types", "examples", "dist"]
 }
-  

tsconfig.json

@@ -28,7 +28,7 @@
       "@excalidraw/math": ["./packages/math/index.ts"],
       "@excalidraw/math/*": ["./packages/math/src/*"],
       "@excalidraw/utils": ["./packages/utils/index.ts"],
-      "@excalidraw/utils/*": ["./packages/utils/*"],
+      "@excalidraw/utils/*": ["./packages/utils/*"]
     }
   },
   "include": ["packages", "excalidraw-app"],