refactor: separate elements logic into a standalone package (#9285)

packages/excalidraw/actions/actionAddToLibrary.ts

@@ -1,7 +1,7 @@
-import { LIBRARY_DISABLED_TYPES } from "../constants";
-import { deepCopyElement } from "../element/duplicate";
+import { LIBRARY_DISABLED_TYPES, randomId } from "@excalidraw/common";
+import { deepCopyElement } from "@excalidraw/element/duplicate";
+
 import { t } from "../i18n";
-import { randomId } from "../random";
 import { CaptureUpdateAction } from "../store";
 
 import { register } from "./register";

packages/excalidraw/actions/actionAlign.tsx

@@ -1,4 +1,17 @@
-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,
@@ -8,19 +21,14 @@ import {
   CenterHorizontallyIcon,
   CenterVerticallyIcon,
 } from "../components/icons";
-import { getNonDeletedElements } from "../element";
-import { isFrameLikeElement } from "../element/typeChecks";
-import { updateFrameMembershipOfSelectedElements } from "../frame";
+
 import { t } from "../i18n";
-import { KEYS } from "../keys";
+
 import { isSomeElementSelected } from "../scene";
 import { CaptureUpdateAction } from "../store";
-import { arrayToMap, getShortcutKey } from "../utils";
 
 import { register } from "./register";
 
-import type { Alignment } from "../align";
-import type { ExcalidrawElement } from "../element/types";
 import type { AppClassProperties, AppState, UIAppState } from "../types";
 
 export const alignActionsPredicate = (

packages/excalidraw/actions/actionBoundText.tsx

@@ -3,40 +3,50 @@ import {
   ROUNDNESS,
   TEXT_ALIGN,
   VERTICAL_ALIGN,
-} from "../constants";
-import { isTextElement, newElement } from "../element";
+  arrayToMap,
+  getFontString,
+} from "@excalidraw/common";
 import {
   getOriginalContainerHeightFromCache,
   resetOriginalContainerCache,
   updateOriginalContainerCache,
-} from "../element/containerCache";
-import { mutateElement } from "../element/mutateElement";
+} from "@excalidraw/element/containerCache";
+
 import {
   computeBoundTextPosition,
   computeContainerDimensionForBoundText,
   getBoundTextElement,
   redrawTextBoundingBox,
-} from "../element/textElement";
-import { measureText } from "../element/textMeasurements";
+} from "@excalidraw/element/textElement";
+
 import {
   hasBoundTextElement,
   isTextBindableContainer,
+  isTextElement,
   isUsingAdaptiveRadius,
-} from "../element/typeChecks";
-import { syncMovedIndices } from "../fractionalIndex";
-import { CaptureUpdateAction } from "../store";
-import { arrayToMap, getFontString } from "../utils";
+} from "@excalidraw/element/typeChecks";
 
-import { register } from "./register";
+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";
+} from "@excalidraw/element/types";
+
+import type { Mutable } from "@excalidraw/common/utility-types";
+
+import { CaptureUpdateAction } from "../store";
+
+import { register } from "./register";
+
 import type { AppState } from "../types";
-import type { Mutable } from "../utility-types";
 
 export const actionUnbindText = register({
   name: "unbindText",

packages/excalidraw/actions/actionCanvas.tsx

@@ -1,11 +1,29 @@
 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 { DEFAULT_CANVAS_BACKGROUND_PICKS } from "../colors";
 import { ColorPicker } from "../components/ColorPicker/ColorPicker";
 import { ToolButton } from "../components/ToolButton";
 import { Tooltip } from "../components/Tooltip";
@@ -19,28 +37,16 @@ import {
   ZoomOutIcon,
   ZoomResetIcon,
 } from "../components/icons";
-import {
-  CURSOR_TYPE,
-  MAX_ZOOM,
-  MIN_ZOOM,
-  THEME,
-  ZOOM_STEP,
-} from "../constants";
 import { setCursor } from "../cursor";
-import { getCommonBounds, getNonDeletedElements } from "../element";
-import { newElementWith } from "../element/mutateElement";
+
 import { t } from "../i18n";
-import { CODES, KEYS } from "../keys";
 import { getNormalizedZoom } from "../scene";
 import { centerScrollOn } from "../scene/scroll";
 import { getStateForZoom } from "../scene/zoom";
 import { CaptureUpdateAction } from "../store";
-import { getShortcutKey, updateActiveTool } from "../utils";
 
 import { register } from "./register";
 
-import type { SceneBounds } from "../element/bounds";
-import type { ExcalidrawElement } from "../element/types";
 import type { AppState, Offsets } from "../types";
 
 export const actionChangeViewBackgroundColor = register({

packages/excalidraw/actions/actionClipboard.tsx

@@ -1,3 +1,8 @@
+import { isTextElement } from "@excalidraw/element/typeChecks";
+import { getTextFromElements } from "@excalidraw/element/textElement";
+
+import { CODES, KEYS, isFirefox } from "@excalidraw/common";
+
 import {
   copyTextToSystemClipboard,
   copyToClipboard,
@@ -7,11 +12,9 @@ import {
   readSystemClipboard,
 } from "../clipboard";
 import { DuplicateIcon, cutIcon, pngIcon, svgIcon } from "../components/icons";
-import { isFirefox } from "../constants";
 import { exportCanvas, prepareElementsForExport } from "../data/index";
-import { getTextFromElements, isTextElement } from "../element";
 import { t } from "../i18n";
-import { CODES, KEYS } from "../keys";
+
 import { CaptureUpdateAction } from "../store";
 
 import { actionDeleteSelected } from "./actionDeleteSelected";

packages/excalidraw/actions/actionCropEditor.tsx

@@ -1,13 +1,14 @@
+import { isImageElement } from "@excalidraw/element/typeChecks";
+
+import type { ExcalidrawImageElement } from "@excalidraw/element/types";
+
 import { ToolButton } from "../components/ToolButton";
 import { cropIcon } from "../components/icons";
-import { isImageElement } from "../element/typeChecks";
 import { t } from "../i18n";
 import { CaptureUpdateAction } from "../store";
 
 import { register } from "./register";
 
-import type { ExcalidrawImageElement } from "../element/types";
-
 export const actionToggleCropEditor = register({
   name: "cropEditor",
   label: "helpDialog.cropStart",

packages/excalidraw/actions/actionDeleteSelected.tsx

@@ -1,26 +1,35 @@
-import { ToolButton } from "../components/ToolButton";
-import { TrashIcon } from "../components/icons";
-import { getNonDeletedElements } from "../element";
-import { fixBindingsAfterDeletion } from "../element/binding";
-import { LinearElementEditor } from "../element/linearElementEditor";
-import { mutateElement, newElementWith } from "../element/mutateElement";
-import { getContainerElement } from "../element/textElement";
+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 { getFrameChildren } from "../frame";
-import { getElementsInGroup, selectGroupsForSelectedElements } from "../groups";
+} 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 { KEYS } from "../keys";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { CaptureUpdateAction } from "../store";
-import { updateActiveTool } from "../utils";
+import { TrashIcon } from "../components/icons";
+import { ToolButton } from "../components/ToolButton";
 
 import { register } from "./register";
 
-import type { ExcalidrawElement } from "../element/types";
 import type { AppClassProperties, AppState } from "../types";
 
 const deleteSelectedElements = (

packages/excalidraw/actions/actionDistribute.tsx

@@ -1,22 +1,30 @@
+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 { distributeElements } from "../distribute";
-import { getNonDeletedElements } from "../element";
-import { isFrameLikeElement } from "../element/typeChecks";
-import { updateFrameMembershipOfSelectedElements } from "../frame";
+
 import { t } from "../i18n";
-import { CODES, KEYS } from "../keys";
+
 import { isSomeElementSelected } from "../scene";
 import { CaptureUpdateAction } from "../store";
-import { arrayToMap, getShortcutKey } from "../utils";
 
 import { register } from "./register";
 
-import type { Distribution } from "../distribute";
-import type { ExcalidrawElement } from "../element/types";
 import type { AppClassProperties, AppState } from "../types";
 
 const enableActionGroup = (appState: AppState, app: AppClassProperties) => {

packages/excalidraw/actions/actionDuplicateSelection.test.tsx

@@ -1,6 +1,5 @@
-import React from "react";
+import { ORIG_ID } from "@excalidraw/common";
 
-import { ORIG_ID } from "../constants";
 import { Excalidraw } from "../index";
 import { API } from "../tests/helpers/api";
 import {

packages/excalidraw/actions/actionDuplicateSelection.tsx

@@ -1,28 +1,41 @@
-import { ToolButton } from "../components/ToolButton";
-import { DuplicateIcon } from "../components/icons";
-import { DEFAULT_GRID_SIZE } from "../constants";
-import { getNonDeletedElements } from "../element";
-import { isBoundToContainer, isLinearElement } from "../element/typeChecks";
-import { LinearElementEditor } from "../element/linearElementEditor";
-import { selectGroupsForSelectedElements } from "../groups";
-import { t } from "../i18n";
-import { KEYS } from "../keys";
-import { isSomeElementSelected } from "../scene";
+import {
+  DEFAULT_GRID_SIZE,
+  KEYS,
+  arrayToMap,
+  getShortcutKey,
+} from "@excalidraw/common";
+
+import { getNonDeletedElements } from "@excalidraw/element";
+
+import {
+  isBoundToContainer,
+  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 { arrayToMap, getShortcutKey } from "../utils";
-
-import { syncMovedIndices } from "../fractionalIndex";
-
-import { duplicateElements } from "../element/duplicate";
 
 import { register } from "./register";
 
-import type { ExcalidrawElement } from "../element/types";
-
 export const actionDuplicateSelection = register({
   name: "duplicateSelection",
   label: "labels.duplicateSelection",

packages/excalidraw/actions/actionElementLink.ts

@@ -1,10 +1,11 @@
-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";

packages/excalidraw/actions/actionElementLock.ts

@@ -1,15 +1,18 @@
+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 { KEYS } from "../keys";
+
 import { getSelectedElements } from "../scene";
 import { CaptureUpdateAction } from "../store";
-import { arrayToMap } from "../utils";
 
 import { register } from "./register";
 
-import type { ExcalidrawElement } from "../element/types";
-
 const shouldLock = (elements: readonly ExcalidrawElement[]) =>
   elements.every((el) => !el.locked);
 

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,
+    };
+  },
+});

packages/excalidraw/actions/actionExport.tsx

@@ -1,3 +1,14 @@
+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";
@@ -5,14 +16,12 @@ import { ProjectName } from "../components/ProjectName";
 import { ToolButton } from "../components/ToolButton";
 import { Tooltip } from "../components/Tooltip";
 import { ExportIcon, questionCircle, saveAs } from "../components/icons";
-import { DEFAULT_EXPORT_PADDING, EXPORT_SCALES, THEME } from "../constants";
 import { loadFromJSON, saveAsJSON } from "../data";
 import { isImageFileHandle } from "../data/blob";
 import { nativeFileSystemSupported } from "../data/filesystem";
 import { resaveAsImageWithScene } from "../data/resave";
-import { getNonDeletedElements } from "../element";
+
 import { t } from "../i18n";
-import { KEYS } from "../keys";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { getExportSize } from "../scene/export";
 import { CaptureUpdateAction } from "../store";
@@ -21,8 +30,6 @@ import "../components/ToolIcon.scss";
 
 import { register } from "./register";
 
-import type { Theme } from "../element/types";
-
 export const actionChangeProjectName = register({
   name: "changeProjectName",
   label: "labels.fileTitle",

packages/excalidraw/actions/actionFinalize.tsx

@@ -1,21 +1,26 @@
 import { pointFrom } from "@excalidraw/math";
 
-import { ToolButton } from "../components/ToolButton";
-import { done } from "../components/icons";
-import { resetCursor } from "../cursor";
-import { isInvisiblySmallElement } from "../element";
 import {
   maybeBindLinearElement,
   bindOrUnbindLinearElement,
-} from "../element/binding";
-import { LinearElementEditor } from "../element/linearElementEditor";
-import { mutateElement } from "../element/mutateElement";
-import { isBindingElement, isLinearElement } from "../element/typeChecks";
+} 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 { KEYS } from "../keys";
-import { isPathALoop } from "../shapes";
+import { resetCursor } from "../cursor";
+import { done } from "../components/icons";
+import { ToolButton } from "../components/ToolButton";
 import { CaptureUpdateAction } from "../store";
-import { arrayToMap, updateActiveTool } from "../utils";
 
 import { register } from "./register";
 

packages/excalidraw/actions/actionFlip.test.tsx

@@ -1,5 +1,4 @@
 import { pointFrom } from "@excalidraw/math";
-import React from "react";
 
 import { Excalidraw } from "../index";
 import { API } from "../tests/helpers/api";

packages/excalidraw/actions/actionFlip.ts

@@ -1,26 +1,22 @@
-import { flipHorizontal, flipVertical } from "../components/icons";
-import { getNonDeletedElements } from "../element";
+import { getNonDeletedElements } from "@excalidraw/element";
 import {
   bindOrUnbindLinearElements,
   isBindingEnabled,
-} from "../element/binding";
-import { getCommonBoundingBox } from "../element/bounds";
-import { mutateElement, newElementWith } from "../element/mutateElement";
-import { resizeMultipleElements } from "../element/resizeElements";
+} 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 "../element/typeChecks";
-import { updateFrameMembershipOfSelectedElements } from "../frame";
-import { CODES, KEYS } from "../keys";
-import { getSelectedElements } from "../scene";
-import { CaptureUpdateAction } from "../store";
-import { arrayToMap } from "../utils";
-
-import { deepCopyElement } from "../element/duplicate";
-
-import { register } from "./register";
+} from "@excalidraw/element/typeChecks";
+import { updateFrameMembershipOfSelectedElements } from "@excalidraw/element/frame";
+import { CODES, KEYS, arrayToMap } from "@excalidraw/common";
 
 import type {
   ExcalidrawArrowElement,
@@ -28,7 +24,15 @@ import type {
   ExcalidrawElement,
   NonDeleted,
   NonDeletedSceneElementsMap,
-} from "../element/types";
+} from "@excalidraw/element/types";
+
+import { getSelectedElements } from "../scene";
+import { CaptureUpdateAction } from "../store";
+
+import { flipHorizontal, flipVertical } from "../components/icons";
+
+import { register } from "./register";
+
 import type { AppClassProperties, AppState } from "../types";
 
 export const actionFlipHorizontal = register({

packages/excalidraw/actions/actionFrame.ts

@@ -1,20 +1,28 @@
-import { frameToolIcon } from "../components/icons";
+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 { getCommonBounds, getNonDeletedElements } from "../element";
-import { mutateElement } from "../element/mutateElement";
-import { newFrameElement } from "../element/newElement";
-import { isFrameLikeElement } from "../element/typeChecks";
-import { addElementsToFrame, removeAllElementsFromFrame } from "../frame";
-import { getFrameChildren } from "../frame";
-import { getElementsInGroup } from "../groups";
-import { KEYS } from "../keys";
+import { frameToolIcon } from "../components/icons";
 import { getSelectedElements } from "../scene";
 import { CaptureUpdateAction } from "../store";
-import { updateActiveTool } from "../utils";
 
 import { register } from "./register";
 
-import type { ExcalidrawElement } from "../element/types";
 import type { AppClassProperties, AppState, UIAppState } from "../types";
 
 const isSingleFrameSelected = (

packages/excalidraw/actions/actionGroup.tsx

@@ -1,9 +1,9 @@
-import { ToolButton } from "../components/ToolButton";
-import { UngroupIcon, GroupIcon } from "../components/icons";
-import { getNonDeletedElements } from "../element";
-import { newElementWith } from "../element/mutateElement";
-import { isBoundToContainer } from "../element/typeChecks";
-import { syncMovedIndices } from "../fractionalIndex";
+import { getNonDeletedElements } from "@excalidraw/element";
+
+import { newElementWith } from "@excalidraw/element/mutateElement";
+
+import { isBoundToContainer } from "@excalidraw/element/typeChecks";
+
 import {
   frameAndChildrenSelectedTogether,
   getElementsInResizingFrame,
@@ -12,7 +12,10 @@ import {
   groupByFrameLikes,
   removeElementsFromFrame,
   replaceAllElementsInFrame,
-} from "../frame";
+} from "@excalidraw/element/frame";
+
+import { KEYS, randomId, arrayToMap, getShortcutKey } from "@excalidraw/common";
+
 import {
   getSelectedGroupIds,
   selectGroup,
@@ -21,21 +24,26 @@ import {
   addToGroup,
   removeFromSelectedGroups,
   isElementInGroup,
-} from "../groups";
-import { t } from "../i18n";
-import { KEYS } from "../keys";
-import { randomId } from "../random";
-import { isSomeElementSelected } from "../scene";
-import { CaptureUpdateAction } from "../store";
-import { arrayToMap, getShortcutKey } from "../utils";
+} from "@excalidraw/element/groups";
 
-import { register } from "./register";
+import { syncMovedIndices } from "@excalidraw/element/fractionalIndex";
 
 import type {
   ExcalidrawElement,
   ExcalidrawTextElement,
   OrderedExcalidrawElement,
-} from "../element/types";
+} 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[]) => {

packages/excalidraw/actions/actionHistory.tsx

@@ -1,14 +1,14 @@
+import { isWindows, KEYS, matchKey, arrayToMap } from "@excalidraw/common";
+
+import type { SceneElementsMap } from "@excalidraw/element/types";
+
 import { ToolButton } from "../components/ToolButton";
 import { UndoIcon, RedoIcon } from "../components/icons";
-import { isWindows } from "../constants";
 import { HistoryChangedEvent } from "../history";
 import { useEmitter } from "../hooks/useEmitter";
 import { t } from "../i18n";
-import { KEYS, matchKey } from "../keys";
 import { CaptureUpdateAction } from "../store";
-import { arrayToMap } from "../utils";
 
-import type { SceneElementsMap } from "../element/types";
 import type { History } from "../history";
 import type { Store } from "../store";
 import type { AppClassProperties, AppState } from "../types";

packages/excalidraw/actions/actionLinearEditor.tsx

@@ -1,15 +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 { ToolButton } from "../components/ToolButton";
 import { lineEditorIcon } from "../components/icons";
-import { LinearElementEditor } from "../element/linearElementEditor";
-import { isElbowArrow, isLinearElement } from "../element/typeChecks";
+
 import { t } from "../i18n";
 import { CaptureUpdateAction } from "../store";
 
 import { register } from "./register";
 
-import type { ExcalidrawLinearElement } from "../element/types";
-
 export const actionToggleLinearEditor = register({
   name: "toggleLinearEditor",
   category: DEFAULT_CATEGORIES.elements,

packages/excalidraw/actions/actionLink.tsx

@@ -1,12 +1,14 @@
+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 { 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";
 

packages/excalidraw/actions/actionMenu.tsx

@@ -1,8 +1,13 @@
+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 { showSelectedShapeActions, getNonDeletedElements } from "../element";
 import { t } from "../i18n";
-import { KEYS } from "../keys";
+
 import { CaptureUpdateAction } from "../store";
 
 import { register } from "./register";

packages/excalidraw/actions/actionProperties.test.tsx

@@ -1,8 +1,12 @@
 import { queryByTestId } from "@testing-library/react";
-import React from "react";
 
-import { COLOR_PALETTE, DEFAULT_ELEMENT_BACKGROUND_PICKS } from "../colors";
-import { FONT_FAMILY, STROKE_WIDTH } from "../constants";
+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 { UI } from "../tests/helpers/ui";

packages/excalidraw/actions/actionProperties.tsx

@@ -1,15 +1,77 @@
 import { pointFrom } from "@excalidraw/math";
 import { useEffect, useMemo, useRef, useState } from "react";
 
-import type { LocalPoint } from "@excalidraw/math";
-
-import { trackEvent } from "../analytics";
 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 { FontPicker } from "../components/FontPicker/FontPicker";
@@ -60,41 +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 {
-  bindLinearElement,
-  bindPointToSnapToElementOutline,
-  calculateFixedPointForElbowArrowBinding,
-  getHoveredElementForBinding,
-  updateBoundElements,
-} from "../element/binding";
-import { LinearElementEditor } from "../element/linearElementEditor";
-import { mutateElement, newElementWith } from "../element/mutateElement";
-import { getBoundTextElement } from "../element/textElement";
-import {
-  isArrowElement,
-  isBoundToContainer,
-  isElbowArrow,
-  isLinearElement,
-  isUsingAdaptiveRadius,
-} from "../element/typeChecks";
-import { Fonts, getLineHeight } from "../fonts";
+
+import { Fonts } from "../fonts";
 import { getLanguage, t } from "../i18n";
-import { KEYS } from "../keys";
-import { randomInteger } from "../random";
 import {
   canHaveArrowheads,
   getCommonAttributeOfSelectedElements,
@@ -102,30 +132,10 @@ import {
   getTargetElements,
   isSomeElementSelected,
 } from "../scene";
-import { hasStrokeColor } from "../scene/comparisons";
 import { CaptureUpdateAction } from "../store";
-import {
-  arrayToMap,
-  getFontFamilyString,
-  getShortcutKey,
-  tupleToCoors,
-} from "../utils";
-
-import { updateElbowArrowPoints } from "../element/elbowArrow";
 
 import { register } from "./register";
 
-import type {
-  Arrowhead,
-  ExcalidrawBindableElement,
-  ExcalidrawElement,
-  ExcalidrawLinearElement,
-  ExcalidrawTextElement,
-  FontFamilyValues,
-  TextAlign,
-  VerticalAlign,
-  NonDeletedSceneElementsMap,
-} from "../element/types";
 import type { CaptureUpdateActionType } from "../store";
 import type { AppClassProperties, AppState, Primitive } from "../types";
 

packages/excalidraw/actions/actionSelectAll.ts

@@ -1,14 +1,18 @@
-import { selectAllIcon } from "../components/icons";
-import { getNonDeletedElements, isTextElement } from "../element";
-import { LinearElementEditor } from "../element/linearElementEditor";
-import { isLinearElement } from "../element/typeChecks";
-import { selectGroupsForSelectedElements } from "../groups";
-import { KEYS } from "../keys";
+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 { register } from "./register";
+import { selectAllIcon } from "../components/icons";
 
-import type { ExcalidrawElement } from "../element/types";
+import { register } from "./register";
 
 export const actionSelectAll = register({
   name: "selectAll",

packages/excalidraw/actions/actionStyles.ts

@@ -1,33 +1,39 @@
-import { paintIcon } from "../components/icons";
 import {
   DEFAULT_FONT_SIZE,
   DEFAULT_FONT_FAMILY,
   DEFAULT_TEXT_ALIGN,
-} from "../constants";
-import {
-  isTextElement,
-  isExcalidrawElement,
-  redrawTextBoundingBox,
-} from "../element";
-import { newElementWith } from "../element/mutateElement";
-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 { getLineHeight } from "../fonts";
+  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 { CODES, KEYS } from "../keys";
 import { getSelectedElements } from "../scene";
 import { CaptureUpdateAction } from "../store";
 
 import { register } from "./register";
 
-import type { ExcalidrawTextElement } from "../element/types";
-
 // `copiedStyles` is exported only for tests.
 export let copiedStyles: string = "{}";
 

packages/excalidraw/actions/actionTextAutoResize.ts

@@ -1,9 +1,12 @@
-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 { getFontString } from "../utils";
 
 import { register } from "./register";
 

packages/excalidraw/actions/actionToggleGridMode.tsx

@@ -1,5 +1,6 @@
+import { CODES, KEYS } from "@excalidraw/common";
+
 import { gridIcon } from "../components/icons";
-import { CODES, KEYS } from "../keys";
 import { CaptureUpdateAction } from "../store";
 
 import { register } from "./register";

packages/excalidraw/actions/actionToggleObjectsSnapMode.tsx

@@ -1,5 +1,6 @@
+import { CODES, KEYS } from "@excalidraw/common";
+
 import { magnetIcon } from "../components/icons";
-import { CODES, KEYS } from "../keys";
 import { CaptureUpdateAction } from "../store";
 
 import { register } from "./register";

packages/excalidraw/actions/actionToggleSearchMenu.ts

@@ -1,6 +1,11 @@
+import {
+  KEYS,
+  CANVAS_SEARCH_TAB,
+  CLASSES,
+  DEFAULT_SIDEBAR,
+} from "@excalidraw/common";
+
 import { searchIcon } from "../components/icons";
-import { CANVAS_SEARCH_TAB, CLASSES, DEFAULT_SIDEBAR } from "../constants";
-import { KEYS } from "../keys";
 import { CaptureUpdateAction } from "../store";
 
 import { register } from "./register";

packages/excalidraw/actions/actionToggleStats.tsx

@@ -1,5 +1,6 @@
+import { CODES, KEYS } from "@excalidraw/common";
+
 import { abacusIcon } from "../components/icons";
-import { CODES, KEYS } from "../keys";
 import { CaptureUpdateAction } from "../store";
 
 import { register } from "./register";

packages/excalidraw/actions/actionToggleViewMode.tsx

@@ -1,5 +1,6 @@
+import { CODES, KEYS } from "@excalidraw/common";
+
 import { eyeIcon } from "../components/icons";
-import { CODES, KEYS } from "../keys";
 import { CaptureUpdateAction } from "../store";
 
 import { register } from "./register";

packages/excalidraw/actions/actionToggleZenMode.tsx

@@ -1,5 +1,6 @@
+import { CODES, KEYS } from "@excalidraw/common";
+
 import { coffeeIcon } from "../components/icons";
-import { CODES, KEYS } from "../keys";
 import { CaptureUpdateAction } from "../store";
 
 import { register } from "./register";

packages/excalidraw/actions/actionZindex.tsx

@@ -1,20 +1,20 @@
+import { KEYS, CODES, getShortcutKey, isDarwin } from "@excalidraw/common";
+
+import {
+  moveOneLeft,
+  moveOneRight,
+  moveAllLeft,
+  moveAllRight,
+} from "@excalidraw/element/zindex";
+
 import {
   BringForwardIcon,
   BringToFrontIcon,
   SendBackwardIcon,
   SendToBackIcon,
 } from "../components/icons";
-import { isDarwin } from "../constants";
 import { t } from "../i18n";
-import { KEYS, CODES } from "../keys";
 import { CaptureUpdateAction } from "../store";
-import { getShortcutKey } from "../utils";
-import {
-  moveOneLeft,
-  moveOneRight,
-  moveAllLeft,
-  moveAllRight,
-} from "../zindex";
 
 import { register } from "./register";
 
@@ -24,9 +24,9 @@ export const actionSendBackward = register({
   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,
     };
@@ -54,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,
     };

packages/excalidraw/actions/index.ts

@@ -30,6 +30,8 @@ export {
   actionToggleTheme,
 } from "./actionCanvas";
 
+export { actionSetEmbeddableAsActiveTool } from "./actionEmbeddable";
+
 export { actionFinalize } from "./actionFinalize";
 
 export {

packages/excalidraw/actions/manager.tsx

@@ -1,12 +1,14 @@
 import React from "react";
 
-import { trackEvent } from "../analytics";
-import { isPromiseLike } from "../utils";
+import { isPromiseLike } from "@excalidraw/common";
 
 import type {
   ExcalidrawElement,
   OrderedExcalidrawElement,
-} from "../element/types";
+} from "@excalidraw/element/types";
+
+import { trackEvent } from "../analytics";
+
 import type { AppClassProperties, AppState } from "../types";
 import type {
   Action,

packages/excalidraw/actions/shortcuts.ts

@@ -1,8 +1,9 @@
-import { isDarwin } from "../constants";
-import { t } from "../i18n";
-import { getShortcutKey } from "../utils";
+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 type { ActionName } from "./types";
 
 export type ShortcutName =

packages/excalidraw/actions/types.ts

@@ -1,7 +1,8 @@
 import type {
   ExcalidrawElement,
   OrderedExcalidrawElement,
-} from "../element/types";
+} from "@excalidraw/element/types";
+
 import type { CaptureUpdateActionType } from "../store";
 import type {
   AppClassProperties,

packages/excalidraw/align.ts

@@ -1,76 +0,0 @@
-import { updateBoundElements } from "./element/binding";
-import { getCommonBoundingBox } from "./element/bounds";
-import { mutateElement } from "./element/mutateElement";
-import { getMaximumGroups } from "./groups";
-
-import type { BoundingBox } from "./element/bounds";
-import type { ElementsMap, ExcalidrawElement } from "./element/types";
-import type Scene from "./scene/Scene";
-
-export interface Alignment {
-  position: "start" | "center" | "end";
-  axis: "x" | "y";
-}
-
-export const alignElements = (
-  selectedElements: ExcalidrawElement[],
-  elementsMap: ElementsMap,
-  alignment: Alignment,
-  scene: Scene,
-): ExcalidrawElement[] => {
-  const groups: ExcalidrawElement[][] = getMaximumGroups(
-    selectedElements,
-    elementsMap,
-  );
-  const selectionBoundingBox = getCommonBoundingBox(selectedElements);
-
-  return groups.flatMap((group) => {
-    const translation = calculateTranslation(
-      group,
-      selectionBoundingBox,
-      alignment,
-    );
-    return group.map((element) => {
-      // update element
-      const updatedEle = mutateElement(element, {
-        x: element.x + translation.x,
-        y: element.y + translation.y,
-      });
-      // update bound elements
-      updateBoundElements(element, scene.getNonDeletedElementsMap(), {
-        simultaneouslyUpdated: group,
-      });
-      return updatedEle;
-    });
-  });
-};
-
-const calculateTranslation = (
-  group: ExcalidrawElement[],
-  selectionBoundingBox: BoundingBox,
-  { axis, position }: Alignment,
-): { x: number; y: number } => {
-  const groupBoundingBox = getCommonBoundingBox(group);
-
-  const [min, max]: ["minX" | "minY", "maxX" | "maxY"] =
-    axis === "x" ? ["minX", "maxX"] : ["minY", "maxY"];
-
-  const noTranslation = { x: 0, y: 0 };
-  if (position === "start") {
-    return {
-      ...noTranslation,
-      [axis]: selectionBoundingBox[min] - groupBoundingBox[min],
-    };
-  } else if (position === "end") {
-    return {
-      ...noTranslation,
-      [axis]: selectionBoundingBox[max] - groupBoundingBox[max],
-    };
-  } // else if (position === "center") {
-  return {
-    ...noTranslation,
-    [axis]:
-      (selectionBoundingBox[min] + selectionBoundingBox[max]) / 2 -
-      (groupBoundingBox[min] + groupBoundingBox[max]) / 2,
-  };
-};

packages/excalidraw/analytics.ts

@@ -1,6 +1,6 @@
 // place here categories that you want to track. We want to track just a
 
-import { isDevEnv } from "./utils";
+import { isDevEnv } from "@excalidraw/common";
 
 // small subset of categories at a given time.
 const ALLOWED_CATEGORIES_TO_TRACK = new Set(["command_palette", "export"]);

packages/excalidraw/animated-trail.ts

@@ -1,9 +1,12 @@
 import { LaserPointer } from "@excalidraw/laser-pointer";
 
-import type { LaserPointerOptions } from "@excalidraw/laser-pointer";
+import {
+  SVG_NS,
+  getSvgPathFromStroke,
+  sceneCoordsToViewportCoords,
+} from "@excalidraw/common";
 
-import { SVG_NS } from "./constants";
-import { getSvgPathFromStroke, sceneCoordsToViewportCoords } from "./utils";
+import type { LaserPointerOptions } from "@excalidraw/laser-pointer";
 
 import type { AnimationFrameHandler } from "./animation-frame-handler";
 import type App from "./components/App";

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,7 @@ import {
   STATS_PANELS,
   THEME,
   DEFAULT_GRID_STEP,
-} from "./constants";
+} from "@excalidraw/common";
 
 import type { AppState, NormalizedZoomValue } from "./types";
 

packages/excalidraw/binaryheap.ts

@@ -1,105 +0,0 @@
-export default class BinaryHeap<T> {
-  private content: T[] = [];
-
-  constructor(private scoreFunction: (node: T) => number) {}
-
-  sinkDown(idx: number) {
-    const node = this.content[idx];
-    while (idx > 0) {
-      const parentN = ((idx + 1) >> 1) - 1;
-      const parent = this.content[parentN];
-      if (this.scoreFunction(node) < this.scoreFunction(parent)) {
-        this.content[parentN] = node;
-        this.content[idx] = parent;
-        idx = parentN; // TODO: Optimize
-      } else {
-        break;
-      }
-    }
-  }
-
-  bubbleUp(idx: number) {
-    const length = this.content.length;
-    const node = this.content[idx];
-    const score = this.scoreFunction(node);
-
-    while (true) {
-      const child2N = (idx + 1) << 1;
-      const child1N = child2N - 1;
-      let swap = null;
-      let child1Score = 0;
-
-      if (child1N < length) {
-        const child1 = this.content[child1N];
-        child1Score = this.scoreFunction(child1);
-        if (child1Score < score) {
-          swap = child1N;
-        }
-      }
-
-      if (child2N < length) {
-        const child2 = this.content[child2N];
-        const child2Score = this.scoreFunction(child2);
-        if (child2Score < (swap === null ? score : child1Score)) {
-          swap = child2N;
-        }
-      }
-
-      if (swap !== null) {
-        this.content[idx] = this.content[swap];
-        this.content[swap] = node;
-        idx = swap; // TODO: Optimize
-      } else {
-        break;
-      }
-    }
-  }
-
-  push(node: T) {
-    this.content.push(node);
-    this.sinkDown(this.content.length - 1);
-  }
-
-  pop(): T | null {
-    if (this.content.length === 0) {
-      return null;
-    }
-
-    const result = this.content[0];
-    const end = this.content.pop()!;
-
-    if (this.content.length > 0) {
-      this.content[0] = end;
-      this.bubbleUp(0);
-    }
-
-    return result;
-  }
-
-  remove(node: T) {
-    if (this.content.length === 0) {
-      return;
-    }
-
-    const i = this.content.indexOf(node);
-    const end = this.content.pop()!;
-
-    if (i < this.content.length) {
-      this.content[i] = end;
-
-      if (this.scoreFunction(end) < this.scoreFunction(node)) {
-        this.sinkDown(i);
-      } else {
-        this.bubbleUp(i);
-      }
-    }
-  }
-
-  size(): number {
-    return this.content.length;
-  }
-
-  rescoreElement(node: T) {
-    this.sinkDown(this.content.indexOf(node));
-  }
-}

packages/excalidraw/change.ts

@@ -1,25 +1,3 @@
-import {
-  BoundElement,
-  BindableElement,
-  bindingProperties,
-  updateBoundElements,
-} from "./element/binding";
-import { LinearElementEditor } from "./element/linearElementEditor";
-import { mutateElement, newElementWith } from "./element/mutateElement";
-import {
-  getBoundTextElementId,
-  redrawTextBoundingBox,
-} from "./element/textElement";
-import {
-  hasBoundTextElement,
-  isBindableElement,
-  isBoundToContainer,
-  isImageElement,
-  isTextElement,
-} from "./element/typeChecks";
-import { orderByFractionalIndex, syncMovedIndices } from "./fractionalIndex";
-import { getNonDeletedGroupIds } from "./groups";
-import { getObservedAppState } from "./store";
 import {
   arrayToMap,
   arrayToObject,
@@ -28,10 +6,41 @@ import {
   isShallowEqual,
   isTestEnv,
   toBrandedType,
-} from "./utils";
+} from "@excalidraw/common";
+import {
+  BoundElement,
+  BindableElement,
+  bindingProperties,
+  updateBoundElements,
+} from "@excalidraw/element/binding";
+import { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
+import {
+  mutateElement,
+  newElementWith,
+} from "@excalidraw/element/mutateElement";
+import {
+  getBoundTextElementId,
+  redrawTextBoundingBox,
+} from "@excalidraw/element/textElement";
+import {
+  hasBoundTextElement,
+  isBindableElement,
+  isBoundToContainer,
+  isImageElement,
+  isTextElement,
+} 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 { BindableProp, BindingProp } from "./element/binding";
-import type { ElementUpdate } from "./element/mutateElement";
 import type {
   ExcalidrawElement,
   ExcalidrawImageElement,
@@ -41,14 +50,18 @@ import type {
   Ordered,
   OrderedExcalidrawElement,
   SceneElementsMap,
-} from "./element/types";
+} 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";
 
 /**
  * Represents the difference between two objects of the same type.

packages/excalidraw/charts.ts

@@ -1,23 +1,25 @@
 import { pointFrom } from "@excalidraw/math";
 
-import type { Radians } 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 { randomId } from "./random";
+  randomId,
+  isDevEnv,
+} from "@excalidraw/common";
 
-import { isDevEnv } from "./utils";
+import {
+  newTextElement,
+  newLinearElement,
+  newElement,
+} from "@excalidraw/element/newElement";
 
-import type { NonDeletedExcalidrawElement } from "./element/types";
+import type { Radians } from "@excalidraw/math";
+
+import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
 
 export type ChartElements = readonly NonDeletedExcalidrawElement[];
 

packages/excalidraw/clients.ts

@@ -4,7 +4,8 @@ import {
   COLOR_WHITE,
   THEME,
   UserIdleState,
-} from "./constants";
+} from "@excalidraw/common";
+
 import { roundRect } from "./renderer/roundRect";
 
 import type { InteractiveCanvasRenderConfig } from "./scene/types";

packages/excalidraw/clipboard.ts

@@ -1,26 +1,32 @@
-import { tryParseSpreadsheet, VALID_SPREADSHEET } from "./charts";
 import {
   ALLOWED_PASTE_MIME_TYPES,
   EXPORT_DATA_TYPES,
   MIME_TYPES,
-} from "./constants";
-import { createFile, isSupportedImageFileType } from "./data/blob";
-import { mutateElement } from "./element/mutateElement";
+  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 { ExcalidrawError } from "./errors";
-import { getContainingFrame } from "./frame";
-import { arrayToMap, isMemberOf, isPromiseLike } from "./utils";
+} from "@excalidraw/element/typeChecks";
 
-import { deepCopyElement } from "./element/duplicate";
+import { getContainingFrame } from "@excalidraw/element/frame";
 
-import type { Spreadsheet } from "./charts";
 import type {
   ExcalidrawElement,
   NonDeletedExcalidrawElement,
-} from "./element/types";
+} 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 = {

packages/excalidraw/colors.ts

@@ -1,171 +0,0 @@
-import oc from "open-color";
-
-import type { Merge } from "./utility-types";
-
-// FIXME can't put to utils.ts rn because of circular dependency
-const pick = <R extends Record<string, any>, K extends readonly (keyof R)[]>(
-  source: R,
-  keys: K,
-) => {
-  return keys.reduce((acc, key: K[number]) => {
-    if (key in source) {
-      acc[key] = source[key];
-    }
-    return acc;
-  }, {} as Pick<R, K[number]>) as Pick<R, K[number]>;
-};
-
-export type ColorPickerColor =
-  | Exclude<keyof oc, "indigo" | "lime">
-  | "transparent"
-  | "bronze";
-export type ColorTuple = readonly [string, string, string, string, string];
-export type ColorPalette = Merge<
-  Record<ColorPickerColor, ColorTuple>,
-  { black: "#1e1e1e"; white: "#ffffff"; transparent: "transparent" }
->;
-
-// used general type instead of specific type (ColorPalette) to support custom colors
-export type ColorPaletteCustom = { [key: string]: ColorTuple | string };
-export type ColorShadesIndexes = [number, number, number, number, number];
-
-export const MAX_CUSTOM_COLORS_USED_IN_CANVAS = 5;
-export const COLORS_PER_ROW = 5;
-
-export const DEFAULT_CHART_COLOR_INDEX = 4;
-
-export const DEFAULT_ELEMENT_STROKE_COLOR_INDEX = 4;
-export const DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX = 1;
-export const ELEMENTS_PALETTE_SHADE_INDEXES = [0, 2, 4, 6, 8] as const;
-export const CANVAS_PALETTE_SHADE_INDEXES = [0, 1, 2, 3, 4] as const;
-
-export const getSpecificColorShades = (
-  color: Exclude<
-    ColorPickerColor,
-    "transparent" | "white" | "black" | "bronze"
-  >,
-  indexArr: Readonly<ColorShadesIndexes>,
-) => {
-  return indexArr.map((index) => oc[color][index]) as any as ColorTuple;
-};
-
-export const COLOR_PALETTE = {
-  transparent: "transparent",
-  black: "#1e1e1e",
-  white: "#ffffff",
-  // open-colors
-  gray: getSpecificColorShades("gray", ELEMENTS_PALETTE_SHADE_INDEXES),
-  red: getSpecificColorShades("red", ELEMENTS_PALETTE_SHADE_INDEXES),
-  pink: getSpecificColorShades("pink", ELEMENTS_PALETTE_SHADE_INDEXES),
-  grape: getSpecificColorShades("grape", ELEMENTS_PALETTE_SHADE_INDEXES),
-  violet: getSpecificColorShades("violet", ELEMENTS_PALETTE_SHADE_INDEXES),
-  blue: getSpecificColorShades("blue", ELEMENTS_PALETTE_SHADE_INDEXES),
-  cyan: getSpecificColorShades("cyan", ELEMENTS_PALETTE_SHADE_INDEXES),
-  teal: getSpecificColorShades("teal", ELEMENTS_PALETTE_SHADE_INDEXES),
-  green: getSpecificColorShades("green", ELEMENTS_PALETTE_SHADE_INDEXES),
-  yellow: getSpecificColorShades("yellow", ELEMENTS_PALETTE_SHADE_INDEXES),
-  orange: getSpecificColorShades("orange", ELEMENTS_PALETTE_SHADE_INDEXES),
-  // radix bronze shades 3,5,7,9,11
-  bronze: ["#f8f1ee", "#eaddd7", "#d2bab0", "#a18072", "#846358"],
-} as ColorPalette;
-
-const COMMON_ELEMENT_SHADES = pick(COLOR_PALETTE, [
-  "cyan",
-  "blue",
-  "violet",
-  "grape",
-  "pink",
-  "green",
-  "teal",
-  "yellow",
-  "orange",
-  "red",
-]);
-
-// -----------------------------------------------------------------------------
-// quick picks defaults
-// -----------------------------------------------------------------------------
-
-// ORDER matters for positioning in quick picker
-export const DEFAULT_ELEMENT_STROKE_PICKS = [
-  COLOR_PALETTE.black,
-  COLOR_PALETTE.red[DEFAULT_ELEMENT_STROKE_COLOR_INDEX],
-  COLOR_PALETTE.green[DEFAULT_ELEMENT_STROKE_COLOR_INDEX],
-  COLOR_PALETTE.blue[DEFAULT_ELEMENT_STROKE_COLOR_INDEX],
-  COLOR_PALETTE.yellow[DEFAULT_ELEMENT_STROKE_COLOR_INDEX],
-] as ColorTuple;
-
-// ORDER matters for positioning in quick picker
-export const DEFAULT_ELEMENT_BACKGROUND_PICKS = [
-  COLOR_PALETTE.transparent,
-  COLOR_PALETTE.red[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX],
-  COLOR_PALETTE.green[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX],
-  COLOR_PALETTE.blue[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX],
-  COLOR_PALETTE.yellow[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX],
-] as ColorTuple;
-
-// ORDER matters for positioning in quick picker
-export const DEFAULT_CANVAS_BACKGROUND_PICKS = [
-  COLOR_PALETTE.white,
-  // radix slate2
-  "#f8f9fa",
-  // radix blue2
-  "#f5faff",
-  // radix yellow2
-  "#fffce8",
-  // radix bronze2
-  "#fdf8f6",
-] as ColorTuple;
-
-// -----------------------------------------------------------------------------
-// palette defaults
-// -----------------------------------------------------------------------------
-
-export const DEFAULT_ELEMENT_STROKE_COLOR_PALETTE = {
-  // 1st row
-  transparent: COLOR_PALETTE.transparent,
-  white: COLOR_PALETTE.white,
-  gray: COLOR_PALETTE.gray,
-  black: COLOR_PALETTE.black,
-  bronze: COLOR_PALETTE.bronze,
-  // rest
-  ...COMMON_ELEMENT_SHADES,
-} as const;
-
-// ORDER matters for positioning in pallete (5x3 grid)s
-export const DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE = {
-  transparent: COLOR_PALETTE.transparent,
-  white: COLOR_PALETTE.white,
-  gray: COLOR_PALETTE.gray,
-  black: COLOR_PALETTE.black,
-  bronze: COLOR_PALETTE.bronze,
-
-  ...COMMON_ELEMENT_SHADES,
-} as const;
-
-// -----------------------------------------------------------------------------
-// helpers
-// -----------------------------------------------------------------------------
-
-// !!!MUST BE WITHOUT GRAY, TRANSPARENT AND BLACK!!!
-export const getAllColorsSpecificShade = (index: 0 | 1 | 2 | 3 | 4) =>
-  [
-    // 2nd row
-    COLOR_PALETTE.cyan[index],
-    COLOR_PALETTE.blue[index],
-    COLOR_PALETTE.violet[index],
-    COLOR_PALETTE.grape[index],
-    COLOR_PALETTE.pink[index],
-
-    // 3rd row
-    COLOR_PALETTE.green[index],
-    COLOR_PALETTE.teal[index],
-    COLOR_PALETTE.yellow[index],
-    COLOR_PALETTE.orange[index],
-    COLOR_PALETTE.red[index],
-  ] as const;
-
-export const rgbToHex = (r: number, g: number, b: number) =>
-  `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
-
-// -----------------------------------------------------------------------------

packages/excalidraw/components/Actions.tsx

@@ -1,24 +1,41 @@
 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 { hasStrokeColor, toolIsArrow } from "@excalidraw/element/comparisons";
+
+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,
@@ -28,9 +45,8 @@ import {
   hasStrokeStyle,
   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 +64,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

@@ -1,3 +1,10 @@
+import clsx from "clsx";
+import throttle from "lodash.throttle";
+import React, { useContext } from "react";
+import { flushSync } from "react-dom";
+import rough from "roughjs/bin/rough";
+import { nanoid } from "nanoid";
+
 import {
   clamp,
   pointFrom,
@@ -11,16 +18,318 @@ import {
   vectorNormalize,
 } from "@excalidraw/math";
 import { isPointInShape } from "@excalidraw/utils/collision";
-import { getSelectionBoxShape } from "@excalidraw/utils/geometry/shape";
-import clsx from "clsx";
-import throttle from "lodash.throttle";
-import { nanoid } from "nanoid";
-import React, { useContext } from "react";
-import { flushSync } from "react-dom";
-import rough from "roughjs/bin/rough";
+import { getSelectionBoxShape } from "@excalidraw/utils/shape";
+
+import {
+  COLOR_PALETTE,
+  CODES,
+  shouldResizeFromCenter,
+  shouldMaintainAspectRatio,
+  shouldRotateWithDiscreteAngle,
+  isArrowKey,
+  KEYS,
+  APP_NAME,
+  CURSOR_TYPE,
+  DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT,
+  DEFAULT_VERTICAL_ALIGN,
+  DRAGGING_THRESHOLD,
+  ELEMENT_SHIFT_TRANSLATE_AMOUNT,
+  ELEMENT_TRANSLATE_AMOUNT,
+  EVENT,
+  FRAME_STYLE,
+  IMAGE_MIME_TYPES,
+  IMAGE_RENDER_TIMEOUT,
+  isBrave,
+  LINE_CONFIRM_THRESHOLD,
+  MAX_ALLOWED_FILE_BYTES,
+  MIME_TYPES,
+  MQ_MAX_HEIGHT_LANDSCAPE,
+  MQ_MAX_WIDTH_LANDSCAPE,
+  MQ_MAX_WIDTH_PORTRAIT,
+  MQ_RIGHT_SIDEBAR_MIN_WIDTH,
+  POINTER_BUTTON,
+  ROUNDNESS,
+  SCROLL_TIMEOUT,
+  TAP_TWICE_TIMEOUT,
+  TEXT_TO_CENTER_SNAP_THRESHOLD,
+  THEME,
+  THEME_FILTER,
+  TOUCH_CTX_MENU_TIMEOUT,
+  VERTICAL_ALIGN,
+  YOUTUBE_STATES,
+  ZOOM_STEP,
+  POINTER_EVENTS,
+  TOOL_TYPE,
+  isIOS,
+  supportsResizeObserver,
+  DEFAULT_COLLISION_THRESHOLD,
+  DEFAULT_TEXT_ALIGN,
+  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 "@excalidraw/common";
+
+import {
+  getCommonBounds,
+  getElementAbsoluteCoords,
+} from "@excalidraw/element/bounds";
+
+import {
+  bindOrUnbindLinearElement,
+  bindOrUnbindLinearElements,
+  fixBindingsAfterDeletion,
+  getHoveredElementForBinding,
+  isBindingEnabled,
+  isLinearElementSimpleAndAlreadyBound,
+  maybeBindLinearElement,
+  shouldEnableBindingForPointerEvent,
+  updateBoundElements,
+  getSuggestedBindingsForArrows,
+} from "@excalidraw/element/binding";
+
+import { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
+
+import {
+  mutateElement,
+  newElementWith,
+} from "@excalidraw/element/mutateElement";
+
+import {
+  newFrameElement,
+  newFreeDrawElement,
+  newEmbeddableElement,
+  newMagicFrameElement,
+  newIframeElement,
+  newArrowElement,
+  newElement,
+  newImageElement,
+  newLinearElement,
+  newTextElement,
+  refreshTextDimensions,
+} from "@excalidraw/element/newElement";
+
+import {
+  deepCopyElement,
+  duplicateElements,
+} from "@excalidraw/element/duplicate";
+
+import {
+  hasBoundTextElement,
+  isArrowElement,
+  isBindingElement,
+  isBindingElementType,
+  isBoundToContainer,
+  isFrameLikeElement,
+  isImageElement,
+  isEmbeddableElement,
+  isInitializedImageElement,
+  isLinearElement,
+  isLinearElementType,
+  isUsingAdaptiveRadius,
+  isIframeElement,
+  isIframeLikeElement,
+  isMagicFrameElement,
+  isTextBindableContainer,
+  isElbowArrow,
+  isFlowchartNodeElement,
+  isBindableElement,
+  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,
+  ExcalidrawFreeDrawElement,
+  ExcalidrawGenericElement,
+  ExcalidrawLinearElement,
+  ExcalidrawTextElement,
+  NonDeleted,
+  InitializedExcalidrawImageElement,
+  ExcalidrawImageElement,
+  FileId,
+  NonDeletedExcalidrawElement,
+  ExcalidrawTextContainer,
+  ExcalidrawFrameLikeElement,
+  ExcalidrawMagicFrameElement,
+  ExcalidrawIframeLikeElement,
+  IframeData,
+  ExcalidrawIframeElement,
+  ExcalidrawEmbeddableElement,
+  Ordered,
+  MagicGenerationData,
+  ExcalidrawNonSelectionElement,
+  ExcalidrawArrowElement,
+} from "@excalidraw/element/types";
+
+import type { ValueOf } from "@excalidraw/common/utility-types";
+
 import {
   actionAddToLibrary,
   actionBringForward,
@@ -77,143 +386,13 @@ import {
   isHandToolActive,
 } from "../appState";
 import { copyTextToSystemClipboard, parseClipboard } from "../clipboard";
-import {
-  APP_NAME,
-  CURSOR_TYPE,
-  DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT,
-  DEFAULT_VERTICAL_ALIGN,
-  DRAGGING_THRESHOLD,
-  ELEMENT_SHIFT_TRANSLATE_AMOUNT,
-  ELEMENT_TRANSLATE_AMOUNT,
-  EVENT,
-  FRAME_STYLE,
-  IMAGE_MIME_TYPES,
-  IMAGE_RENDER_TIMEOUT,
-  isBrave,
-  LINE_CONFIRM_THRESHOLD,
-  MAX_ALLOWED_FILE_BYTES,
-  MIME_TYPES,
-  MQ_MAX_HEIGHT_LANDSCAPE,
-  MQ_MAX_WIDTH_LANDSCAPE,
-  MQ_MAX_WIDTH_PORTRAIT,
-  MQ_RIGHT_SIDEBAR_MIN_WIDTH,
-  POINTER_BUTTON,
-  ROUNDNESS,
-  SCROLL_TIMEOUT,
-  TAP_TWICE_TIMEOUT,
-  TEXT_TO_CENTER_SNAP_THRESHOLD,
-  THEME,
-  THEME_FILTER,
-  TOUCH_CTX_MENU_TIMEOUT,
-  VERTICAL_ALIGN,
-  YOUTUBE_STATES,
-  ZOOM_STEP,
-  POINTER_EVENTS,
-  TOOL_TYPE,
-  isIOS,
-  supportsResizeObserver,
-  DEFAULT_COLLISION_THRESHOLD,
-  DEFAULT_TEXT_ALIGN,
-  ARROW_TYPE,
-  DEFAULT_REDUCED_GLOBAL_ALPHA,
-  isSafari,
-  type EXPORT_IMAGE_TYPES,
-} from "../constants";
 import { exportCanvas, loadFromBlob } from "../data";
 import Library, { distributeLibraryItemsOnSquareGrid } from "../data/library";
 import { restore, restoreElements } from "../data/restore";
-import {
-  dragNewElement,
-  dragSelectedElements,
-  getCommonBounds,
-  getCursorForResizingElement,
-  getDragOffsetXY,
-  getElementWithTransformHandleType,
-  getNormalizedDimensions,
-  getResizeArrowDirection,
-  getResizeOffsetXY,
-  getLockedLinearCursorAlignSize,
-  getTransformHandleTypeFromCoords,
-  isInvisiblySmallElement,
-  isNonDeletedElement,
-  isTextElement,
-  newElement,
-  newLinearElement,
-  newTextElement,
-  newImageElement,
-  transformElements,
-  refreshTextDimensions,
-  redrawTextBoundingBox,
-  getElementAbsoluteCoords,
-} from "../element";
-import {
-  bindOrUnbindLinearElement,
-  bindOrUnbindLinearElements,
-  fixBindingsAfterDeletion,
-  getHoveredElementForBinding,
-  isBindingEnabled,
-  isLinearElementSimpleAndAlreadyBound,
-  maybeBindLinearElement,
-  shouldEnableBindingForPointerEvent,
-  updateBoundElements,
-  getSuggestedBindingsForArrows,
-} from "../element/binding";
-import { LinearElementEditor } from "../element/linearElementEditor";
-import { mutateElement, newElementWith } from "../element/mutateElement";
-import { deepCopyElement, duplicateElements } from "../element/duplicate";
-import {
-  newFrameElement,
-  newFreeDrawElement,
-  newEmbeddableElement,
-  newMagicFrameElement,
-  newIframeElement,
-  newArrowElement,
-} from "../element/newElement";
-import {
-  hasBoundTextElement,
-  isArrowElement,
-  isBindingElement,
-  isBindingElementType,
-  isBoundToContainer,
-  isFrameLikeElement,
-  isImageElement,
-  isEmbeddableElement,
-  isInitializedImageElement,
-  isLinearElement,
-  isLinearElementType,
-  isUsingAdaptiveRadius,
-  isIframeElement,
-  isIframeLikeElement,
-  isMagicFrameElement,
-  isTextBindableContainer,
-  isElbowArrow,
-  isFlowchartNodeElement,
-  isBindableElement,
-} from "../element/typeChecks";
 import { getCenter, getDistance } from "../gesture";
-import {
-  editGroupForSelectedElement,
-  getElementsInGroup,
-  getSelectedGroupIdForElement,
-  getSelectedGroupIds,
-  isElementInGroup,
-  isSelectedViaGroup,
-  selectGroupsForSelectedElements,
-} from "../groups";
 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,47 +403,6 @@ import {
 } from "../scene";
 import Scene from "../scene/Scene";
 import { getStateForZoom } from "../scene/zoom";
-import {
-  findShapeByKey,
-  getBoundTextShape,
-  getCornerRadius,
-  getElementShape,
-  isPathALoop,
-} from "../shapes";
-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,
-  isDevEnv,
-} from "../utils";
-import {
-  createSrcDoc,
-  embeddableURLValidator,
-  maybeParseEmbedSrc,
-  getEmbedLink,
-} from "../element/embeddable";
 import {
   dataURLToFile,
   dataURLToString,
@@ -281,47 +419,15 @@ import {
   resizeImageFile,
   SVGStringToFile,
 } from "../data/blob";
-import {
-  getInitializedImageElements,
-  loadHTMLImageElement,
-  normalizeSVG,
-  updateImageCache as _updateImageCache,
-} from "../element/image";
+
 import { fileOpen } from "../data/filesystem";
-import {
-  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 { Fonts, getLineHeight } from "../fonts";
-import {
-  getFrameChildren,
-  isCursorInFrame,
-  addElementsToFrame,
-  replaceAllElementsInFrame,
-  removeElementsFromFrame,
-  getElementsInResizingFrame,
-  getElementsInNewFrame,
-  getContainingFrame,
-  elementOverlapsWithFrame,
-  updateFrameMembershipOfSelectedElements,
-  isElementInFrame,
-  getFrameLikeTitle,
-  getElementsOverlappingFrame,
-  filterElementsEligibleAsFrameChildren,
-} from "../frame";
-import {
-  excludeElementsInFramesFromSelection,
-  makeNextSelectedElementIds,
-} from "../scene/selection";
+
+import { Fonts } from "../fonts";
 import { editorJotaiStore } from "../editor-jotai";
 import { ImageSceneDataError } from "../errors";
 import {
@@ -335,11 +441,9 @@ import {
   getReferenceSnapPoints,
   SnapCache,
   isGridModeEnabled,
-  getGridPoint,
 } from "../snapping";
 import { convertToExcalidrawElements } from "../data/transform";
 import { Renderer } from "../scene/Renderer";
-import { ShapeCache } from "../scene/ShapeCache";
 import {
   setEraserCursor,
   setCursor,
@@ -347,40 +451,15 @@ import {
   setCursorForShape,
 } from "../cursor";
 import { Emitter } from "../emitter";
-import { ElementCanvasButtons } from "../element/ElementCanvasButtons";
-import { COLOR_PALETTE } from "../colors";
+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 { getRenderOpacity } from "../renderer/renderElement";
-import {
-  hitElementBoundText,
-  hitElementBoundingBoxOnly,
-  hitElementItself,
-} from "../element/collision";
-import { textWysiwyg } from "../element/textWysiwyg";
+import { textWysiwyg } from "../wysiwyg/textWysiwyg";
 import { isOverScrollBars } from "../scene/scrollbars";
-import { syncInvalidIndices, syncMovedIndices } from "../fractionalIndex";
-import { getVisibleSceneBounds } from "../element/bounds";
+
 import { isMaybeMermaidDefinition } from "../mermaid";
-import {
-  FlowChartCreator,
-  FlowChartNavigator,
-  getLinkDirectionFromKey,
-} from "../element/flowchart";
-import { cropElement } from "../element/cropElement";
-import { wrapText } from "../element/textWrapping";
-import { isElementLink, parseElementLinkFromURL } from "../element/elementLink";
-import {
-  isMeasureTextSupported,
-  normalizeText,
-  measureText,
-  getLineHeightInPx,
-  getApproxMinLineWidth,
-  getApproxMinLineHeight,
-  getMinTextElementWidth,
-} from "../element/textMeasurements";
 
 import { activeConfirmDialogAtom } from "./ActiveConfirmDialog";
 import BraveMeasureTextError from "./BraveMeasureTextError";
@@ -401,40 +480,19 @@ import {
 import { MagicIcon, copyIcon, fullscreenIcon } from "./icons";
 import { Toast } from "./Toast";
 
-import type { Action, ActionResult } from "../actions/types";
+import { findShapeByKey } from "./shapes";
+
+import type {
+  RenderInteractiveSceneCallback,
+  ScrollBars,
+} from "../scene/types";
+
 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 {
-  ExcalidrawBindableElement,
-  ExcalidrawElement,
-  ExcalidrawFreeDrawElement,
-  ExcalidrawGenericElement,
-  ExcalidrawLinearElement,
-  ExcalidrawTextElement,
-  NonDeleted,
-  InitializedExcalidrawImageElement,
-  ExcalidrawImageElement,
-  FileId,
-  NonDeletedExcalidrawElement,
-  ExcalidrawTextContainer,
-  ExcalidrawFrameLikeElement,
-  ExcalidrawMagicFrameElement,
-  ExcalidrawIframeLikeElement,
-  IframeData,
-  ExcalidrawIframeElement,
-  ExcalidrawEmbeddableElement,
-  Ordered,
-  MagicGenerationData,
-  ExcalidrawNonSelectionElement,
-  ExcalidrawArrowElement,
-} from "../element/types";
-import type {
-  RenderInteractiveSceneCallback,
-  ScrollBars,
-} from "../scene/types";
+
 import type {
   AppClassProperties,
   AppProps,
@@ -463,8 +521,8 @@ import type {
   NullableGridSize,
   Offsets,
 } from "../types";
-import type { ValueOf } from "../utility-types";
 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!);

packages/excalidraw/components/Button.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import React from "react";
 
-import { composeEventHandlers } from "../utils";
+import { composeEventHandlers } from "@excalidraw/common";
 
 import "./Button.scss";
 

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,13 +1,19 @@
 import React, { useEffect, useState } from "react";
 
+import { EVENT } from "@excalidraw/common";
+
 import {
   DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX,
   DEFAULT_ELEMENT_STROKE_COLOR_INDEX,
-} from "../../colors";
-import { EVENT } from "../../constants";
+  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 { KEYS } from "../../keys";
 
 import { CustomColorList } from "./CustomColorList";
 import PickerColorList from "./PickerColorList";
@@ -22,8 +28,6 @@ import {
 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/PickerColorList.tsx

@@ -1,6 +1,8 @@
 import clsx from "clsx";
 import { useEffect, useRef } from "react";
 
+import type { ColorPaletteCustom } from "@excalidraw/common";
+
 import { useAtom } from "../../editor-jotai";
 import { t } from "../../i18n";
 
@@ -11,7 +13,6 @@ import {
   getColorNameAndShadeFromColor,
 } from "./colorPickerUtils";
 
-import type { ColorPaletteCustom } from "../../colors";
 import type { TranslationKeys } from "../../i18n";
 
 interface PickerColorListProps {

packages/excalidraw/components/ColorPicker/ShadeList.tsx

@@ -1,6 +1,8 @@
 import clsx from "clsx";
 import { useEffect, useRef } from "react";
 
+import type { ColorPaletteCustom } from "@excalidraw/common";
+
 import { useAtom } from "../../editor-jotai";
 import { t } from "../../i18n";
 
@@ -10,8 +12,6 @@ import {
   getColorNameAndShadeFromColor,
 } from "./colorPickerUtils";
 
-import type { ColorPaletteCustom } from "../../colors";
-
 interface ShadeListProps {
   hex: string;
   onChange: (color: string) => void;

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,10 @@
-import { MAX_CUSTOM_COLORS_USED_IN_CANVAS } from "../../colors";
-import { atom } from "../../editor-jotai";
+import { MAX_CUSTOM_COLORS_USED_IN_CANVAS } from "@excalidraw/common";
 
-import type { ColorPickerColor, ColorPaletteCustom } from "../../colors";
-import type { ExcalidrawElement } from "../../element/types";
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+
+import type { ColorPickerColor, ColorPaletteCustom } from "@excalidraw/common";
+
+import { atom } from "../../editor-jotai";
 
 export const getColorNameAndShadeFromColor = ({
   palette,

packages/excalidraw/components/ColorPicker/keyboardNavHandlers.ts

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

packages/excalidraw/components/CommandPalette/CommandPalette.tsx

@@ -2,6 +2,17 @@ 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,
@@ -13,12 +24,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 +51,7 @@ import {
   LibraryIcon,
 } from "../icons";
 
-import {
-  capitalizeString,
-  getShortcutKey,
-  isWritableElement,
-} from "../../utils";
-
-import { SHAPES } from "../../shapes";
+import { SHAPES } from "../shapes";
 import { canChangeBackgroundColor, canChangeStrokeColor } from "../Actions";
 import { useStableCallback } from "../../hooks/useStableCallback";
 import { activeConfirmDialogAtom } from "../ActiveConfirmDialog";
@@ -60,7 +63,6 @@ import "./CommandPalette.scss";
 
 import type { CommandPaletteItem } from "./types";
 import type { AppProps, AppState, UIAppState } from "../../types";
-import type { MarkRequired } from "../../utility-types";
 import type { ShortcutName } from "../../actions/shortcuts";
 import type { TranslationKeys } from "../../i18n";
 import type { Action } from "../../actions/types";

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,13 @@ 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 { composeEventHandlers } from "../utils";
 
 import "../components/dropdownMenu/DropdownMenu.scss";
 
@@ -18,7 +21,6 @@ import { Sidebar } from "./Sidebar/Sidebar";
 import { withInternalFallback } from "./hoc/withInternalFallback";
 import { LibraryIcon, searchIcon } from "./icons";
 
-import type { MarkOptional, Merge } from "../utility-types";
 import type { SidebarProps, SidebarTriggerProps } from "./Sidebar/common";
 
 const DefaultSidebarTrigger = withInternalFallback(

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/ElementCanvasButtons.tsx

@@ -1,14 +1,17 @@
+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 { sceneCoordsToViewportCoords } from "../utils";
 
 import "./ElementCanvasButtons.scss";
 
-import { getElementAbsoluteCoords } from ".";
-
 import type { AppState } from "../types";
 
-import type { ElementsMap, NonDeletedExcalidrawElement } from "./types";
-
 const CONTAINER_PADDING = 5;
 
 const getContainerCoords = (

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";
-import { mutateElement } from "../element/mutateElement";
+} from "@excalidraw/element/elementLink";
+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 } 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 { 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,19 @@ import React, {
   type KeyboardEventHandler,
 } from "react";
 
-import { type FontFamilyValues } from "../../element/types";
+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 { arrayToList, debounce, getFontFamilyString } from "../../utils";
 import { useApp, useAppProps, useExcalidrawContainer } from "../App";
 import { PropertiesPopover } from "../PropertiesPopover";
 import { QuickSearch } from "../QuickSearch";
@@ -20,11 +29,15 @@ import DropdownMenuItem, {
   DropDownMenuItemBadgeType,
   DropDownMenuItemBadge,
 } from "../dropdownMenu/DropdownMenuItem";
-import { FontFamilyNormalIcon } from "../icons";
+import {
+  FontFamilyCodeIcon,
+  FontFamilyHeadingIcon,
+  FontFamilyNormalIcon,
+  FreedrawIcon,
+} from "../icons";
 
 import { fontPickerKeyHandler } from "./keyboardNavHandlers";
 
-import type { ValueOf } from "../../utility-types";
 import type { JSX } from "react";
 
 export interface FontDescriptor {
@@ -48,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,
@@ -73,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",
             };
 

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/HandButton.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 
-import { KEYS } from "../keys";
+import { KEYS } from "@excalidraw/common";
 
 import { ToolButton } from "./ToolButton";
 import { handIcon } from "./icons";

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 { getShortcutKey } from "../utils";
-
-import { isNodeInFlowchart } from "../element/flowchart";
+import { isEraserActive } from "../appState";
 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,16 @@
 import { exportToCanvas } from "@excalidraw/utils/export";
 import React, { useEffect, useRef, useState } from "react";
 
+import {
+  DEFAULT_EXPORT_PADDING,
+  EXPORT_IMAGE_TYPES,
+  isFirefox,
+  EXPORT_SCALES,
+  cloneJSON,
+} from "@excalidraw/common";
+
+import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
+
 import {
   actionExportWithDarkMode,
   actionChangeExportBackground,
@@ -9,12 +19,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";
@@ -22,7 +26,6 @@ import { useCopyStatus } from "../hooks/useCopiedIndicator";
 
 import { t } from "../i18n";
 import { isSomeElementSelected } from "../scene";
-import { cloneJSON } from "../utils";
 
 import { copyIcon, downloadIcon, helpIcon } from "./icons";
 import { Dialog } from "./Dialog";
@@ -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,32 @@
 import clsx from "clsx";
 import React from "react";
 
-import { mutateElement } from "../element/mutateElement";
-import { ShapeCache } from "../scene/ShapeCache";
+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 { 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 +63,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,14 +6,14 @@ import React, {
   useState,
 } from "react";
 
-import { MIME_TYPES } from "../constants";
+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 { arrayToMap } from "../utils";
-
-import { duplicateElements } from "../element/duplicate";
 
 import { LibraryMenuControlButtons } from "./LibraryMenuControlButtons";
 import { LibraryDropdownMenu } from "./LibraryMenuHeaderContent";

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/showSelectedShapeActions";
+
+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 { queryFocusableElements } from "../utils";
+import { KEYS, queryFocusableElements } from "@excalidraw/common";
 
 import "./Popover.scss";
 

packages/excalidraw/components/ProjectName.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 
-import { focusNearestParent } from "../utils";
-import { KEYS } from "../keys";
+import { focusNearestParent, KEYS } from "@excalidraw/common";
 
 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,28 @@ import clsx from "clsx";
 import debounce from "lodash.debounce";
 import { Fragment, memo, useEffect, useRef, useState } from "react";
 
-import { CLASSES, EVENT } from "../constants";
-import { atom, useAtom } from "../editor-jotai";
-import { isTextElement, newTextElement } from "../element";
-import { isElementCompletelyInViewport } from "../element/sizeHelpers";
+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 { 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 +33,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, isDevEnv, 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 { isDevEnv, 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 { getBoundTextElement } from "../../element/textElement";
-import { isArrowElement, isElbowArrow } from "../../element/typeChecks";
+import type { ExcalidrawElement } from "@excalidraw/element/types";
+
 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";
-import { mutateElement } from "../../element/mutateElement";
-import { resizeSingleElement } from "../../element/resizeElements";
-import { isImageElement } from "../../element/typeChecks";
+} 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 { ExcalidrawElement } from "../../element/types";
 import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";