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 { isDarwin, getShortcutKey } from "@excalidraw/common";
+
+import type { SubtypeOf } from "@excalidraw/common/utility-types";
+
 import { t } from "../i18n";
-import { getShortcutKey } from "../utils";
 
-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,