added an explanatory comment

compute midpoints properly when dealing with split line indices
split linear segments as curves
2023-10-23 21:48:35 -07:00 · 2023-10-23 21:41:00 -07:00 · 2023-10-23 21:29:53 -07:00 · 2023-10-23 21:15:25 -07:00 · 2023-10-23 18:13:43 -07:00 · 2023-10-23 17:58:28 -07:00
134 changed files with 2080 additions and 5574 deletions
@@ -25,9 +25,6 @@
  <a href="https://github.com/excalidraw/excalidraw/blob/master/LICENSE">
    <img alt="Excalidraw is released under the MIT license." src="https://img.shields.io/badge/license-MIT-blue.svg"  />
  </a>
-  <a href="https://www.npmjs.com/package/@excalidraw/excalidraw">
-    <img alt="npm downloads/month" src="https://img.shields.io/npm/dm/@excalidraw/excalidraw"  />
-  </a>
  <a href="https://docs.excalidraw.com/docs/introduction/contributing">
    <img alt="PRs welcome!" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat"  />
  </a>
@@ -34,7 +34,7 @@ Open the `Menu` in the below playground and you will see the `custom footer` ren
 ```jsx live noInline
 const MobileFooter = ({}) => {
  const device = useDevice();
-  if (device.editor.isMobile) {
+  if (device.isMobile) {
    return (
      <Footer>
        <button
@@ -299,7 +299,7 @@ Open the `main menu` in the below example to view the footer.
 ```jsx live noInline
 const MobileFooter = ({}) => {
  const device = useDevice();
-  if (device.editor.isMobile) {
+  if (device.isMobile) {
    return (
      <Footer>
        <button
@@ -335,6 +335,7 @@ The `device` has the following `attributes`

 | Name | Type | Description |
 | --- | --- | --- |
+| `isSmScreen` | `boolean` | Set to `true` when the device small screen is small (Width < `640px` ) |
 | `isMobile` | `boolean` | Set to `true` when the device is `mobile` |
 | `isTouchScreen` | `boolean` | Set to `true` for `touch` devices |
 | `canDeviceFitSidebar` | `boolean` | Implies whether there is enough space to fit the `sidebar` |
@@ -34,44 +34,19 @@ function App() {

 Since _Excalidraw_ doesn't support server side rendering, you should render the component once the host is `mounted`.

-Here are two ways on how you can render **Excalidraw** on **Next.js**.
-
-1. Importing Excalidraw once **client** is rendered.
+The following workflow shows one way how to render Excalidraw on Next.js. We'll add more detailed and alternative Next.js examples, soon.

 ```jsx showLineNumbers
 import { useState, useEffect } from "react";
 export default function App() {
  const [Excalidraw, setExcalidraw] = useState(null);
  useEffect(() => {
-    import("@excalidraw/excalidraw").then((comp) =>
-      setExcalidraw(comp.Excalidraw),
-    );
+    import("@excalidraw/excalidraw").then((comp) => setExcalidraw(comp.Excalidraw));
  }, []);
  return <>{Excalidraw && <Excalidraw />}</>;
 }
 ```

-Here is a working [demo](https://codesandbox.io/p/sandbox/excalidraw-with-next-5xb3d)
-
-2. Using **Next.js Dynamic** import.
-
-Since Excalidraw doesn't server side rendering so you can also use `dynamic import` to render by setting `ssr` to `false`. However one drawback is the `Refs` don't work with dynamic import in Next.js. We are working on overcoming this and have a better API.
-
-```jsx showLineNumbers
-import dynamic from "next/dynamic";
-const Excalidraw = dynamic(
-  async () => (await import("@excalidraw/excalidraw")).Excalidraw,
-  {
-    ssr: false,
-  },
-);
-export default function App() {
-  return <Excalidraw />;
-}
-```
-
-Here is a working [demo](https://codesandbox.io/p/sandbox/excalidraw-with-next-dynamic-k8yjq2).
-
 The `types` are available at `@excalidraw/excalidraw/types`, you can view [example for typescript](https://codesandbox.io/s/excalidraw-types-9h2dm)

 ## Browser
@@ -19,4 +19,14 @@ Frames should be ordered where frame children come first, followed by the frame
 ]
 ```

-If not ordered correctly, the editor will still function, but the elements may not be rendered and clipped correctly. Further, the renderer relies on this ordering for performance optimizations.
+If not oredered correctly, the editor will still function, but the elements may not be rendered and clipped correctly. Further, the renderer relies on this ordering for performance optimizations.
+
+# Arrows
+
+An arrow can be a child of a frame only if it has no binding (either start or end) to any other element, regardless of whether the bound element is inside the frame or not.
+
+This ensures that when an arrow is bound to an element outside the frame, it's rendered and behaves correctly.
+
+Therefore, when an arrow (that's a child of a frame) gets bound to an element, it's automatically removed from the frame.
+
+Bound-arrow is duplicated alongside a frame only if the arrow start is bound to an element within that frame.
@@ -6,7 +6,7 @@
 *
 * - DataState refers to full state of the app: appState, elements, images,
 *   though some state is saved separately (collab username, library) for one
- *   reason or another. We also save different data to different storage
+ *   reason or another. We also save different data to different sotrage
 *   (localStorage, indexedDB).
 */

@@ -131,5 +131,5 @@ export class Debug {
    };
  };
 }
-//@ts-ignore
+
 window.debug = Debug;
@@ -691,7 +691,7 @@ const ExcalidrawWrapper = () => {
      })}
    >
      <Excalidraw
-        excalidrawAPI={excalidrawRefCallback}
+        ref={excalidrawRefCallback}
        onChange={onChange}
        initialData={initialStatePromiseRef.current.promise}
        isCollaborating={isCollaborating}
@@ -17,10 +17,8 @@ describe("Test MobileMenu", () => {

  beforeEach(async () => {
    await render(<ExcalidrawApp />);
-    // @ts-ignore
-    h.app.refreshViewportBreakpoints();
-    // @ts-ignore
-    h.app.refreshEditorBreakpoints();
+    //@ts-ignore
+    h.app.refreshDeviceState(h.app.excalidrawContainerRef.current!);
  });

  afterAll(() => {
@@ -30,15 +28,11 @@ describe("Test MobileMenu", () => {
  it("should set device correctly", () => {
    expect(h.app.device).toMatchInlineSnapshot(`
      {
-        "editor": {
-          "canFitSidebar": false,
-          "isMobile": true,
-        },
+        "canDeviceFitSidebar": false,
+        "isLandscape": true,
+        "isMobile": true,
+        "isSmScreen": false,
        "isTouchScreen": false,
-        "viewport": {
-          "isLandscape": false,
-          "isMobile": true,
-        },
      }
    `);
  });
@@ -8,7 +8,6 @@ import {
 } from "../../excalidraw-app/collab/reconciliation";
 import { randomInteger } from "../../src/random";
 import { AppState } from "../../src/types";
-import { cloneJSON } from "../../src/utils";

 type Id = string;
 type ElementLike = {
@@ -94,6 +93,8 @@ const cleanElements = (elements: ReconciledElements) => {
  });
 };

+const cloneDeep = (data: any) => JSON.parse(JSON.stringify(data));
+
 const test = <U extends `${string}:${"L" | "R"}`>(
  local: (Id | ElementLike)[],
  remote: (Id | ElementLike)[],
@@ -114,15 +115,15 @@ const test = <U extends `${string}:${"L" | "R"}`>(
    "remote reconciliation",
  );

-  const __local = cleanElements(cloneJSON(_remote) as ReconciledElements);
-  const __remote = addParents(cleanElements(cloneJSON(remoteReconciled)));
+  const __local = cleanElements(cloneDeep(_remote));
+  const __remote = addParents(cleanElements(cloneDeep(remoteReconciled)));
  if (bidirectional) {
    try {
      expect(
        cleanElements(
          reconcileElements(
-            cloneJSON(__local),
-            cloneJSON(__remote),
+            cloneDeep(__local),
+            cloneDeep(__remote),
            {} as AppState,
          ),
        ),
@@ -21,8 +21,7 @@
  "dependencies": {
    "@braintree/sanitize-url": "6.0.2",
    "@excalidraw/laser-pointer": "1.2.0",
-    "@excalidraw/mermaid-to-excalidraw": "0.1.2",
-    "@excalidraw/random-username": "1.1.0",
+    "@excalidraw/random-username": "1.0.0",
    "@radix-ui/react-popover": "1.0.3",
    "@radix-ui/react-tabs": "1.0.2",
    "@sentry/browser": "6.2.5",
@@ -54,7 +53,7 @@
    "pwacompat": "2.0.17",
    "react": "18.2.0",
    "react-dom": "18.2.0",
-    "roughjs": "4.6.4",
+    "roughjs": "4.6.5",
    "sass": "1.51.0",
    "socket.io-client": "2.3.1",
    "tunnel-rat": "0.1.2"
@@ -126,7 +125,7 @@
    "test": "yarn test:app",
    "test:coverage": "vitest --coverage",
    "test:coverage:watch": "vitest --coverage --watch",
-    "test:ui": "yarn test --ui --coverage.enabled=true",
+    "test:ui": "yarn test --ui",
    "autorelease": "node scripts/autorelease.js",
    "prerelease": "node scripts/prerelease.js",
    "build:preview": "yarn build && vite preview --port 5000",
@@ -438,6 +438,5 @@ export const actionToggleHandTool = register({
      commitToHistory: true,
    };
  },
-  keyTest: (event) =>
-    !event.altKey && !event[KEYS.CTRL_OR_CMD] && event.key === KEYS.H,
+  keyTest: (event) => event.key === KEYS.H,
 });
@@ -3,43 +3,33 @@ import { register } from "./register";
 import {
  copyTextToSystemClipboard,
  copyToClipboard,
-  createPasteEvent,
  probablySupportsClipboardBlob,
  probablySupportsClipboardWriteText,
-  readSystemClipboard,
 } from "../clipboard";
 import { actionDeleteSelected } from "./actionDeleteSelected";
-import { exportCanvas, prepareElementsForExport } from "../data/index";
-import { isTextElement } from "../element";
+import { exportCanvas } from "../data/index";
+import { getNonDeletedElements, isTextElement } from "../element";
 import { t } from "../i18n";
-import { isFirefox } from "../constants";

 export const actionCopy = register({
  name: "copy",
  trackEvent: { category: "element" },
-  perform: async (elements, appState, event: ClipboardEvent | null, app) => {
+  perform: (elements, appState, _, app) => {
    const elementsToCopy = app.scene.getSelectedElements({
      selectedElementIds: appState.selectedElementIds,
      includeBoundTextElement: true,
      includeElementsInFrames: true,
    });

-    try {
-      await copyToClipboard(elementsToCopy, app.files, event);
-    } catch (error: any) {
-      return {
-        commitToHistory: false,
-        appState: {
-          ...appState,
-          errorMessage: error.message,
-        },
-      };
-    }
+    copyToClipboard(elementsToCopy, app.files);

    return {
      commitToHistory: false,
    };
  },
+  predicate: (elements, appState, appProps, app) => {
+    return app.device.isMobile && !!navigator.clipboard;
+  },
  contextItemLabel: "labels.copy",
  // don't supply a shortcut since we handle this conditionally via onCopy event
  keyTest: undefined,
@@ -48,55 +38,15 @@ export const actionCopy = register({
 export const actionPaste = register({
  name: "paste",
  trackEvent: { category: "element" },
-  perform: async (elements, appState, data, app) => {
-    let types;
-    try {
-      types = await readSystemClipboard();
-    } catch (error: any) {
-      if (error.name === "AbortError" || error.name === "NotAllowedError") {
-        // user probably aborted the action. Though not 100% sure, it's best
-        // to not annoy them with an error message.
-        return false;
-      }
-
-      console.error(`actionPaste ${error.name}: ${error.message}`);
-
-      if (isFirefox) {
-        return {
-          commitToHistory: false,
-          appState: {
-            ...appState,
-            errorMessage: t("hints.firefox_clipboard_write"),
-          },
-        };
-      }
-
-      return {
-        commitToHistory: false,
-        appState: {
-          ...appState,
-          errorMessage: t("errors.asyncPasteFailedOnRead"),
-        },
-      };
-    }
-
-    try {
-      app.pasteFromClipboard(createPasteEvent({ types }));
-    } catch (error: any) {
-      console.error(error);
-      return {
-        commitToHistory: false,
-        appState: {
-          ...appState,
-          errorMessage: t("errors.asyncPasteFailedOnParse"),
-        },
-      };
-    }
-
+  perform: (elements: any, appStates: any, data, app) => {
+    app.pasteFromClipboard(null);
    return {
      commitToHistory: false,
    };
  },
+  predicate: (elements, appState, appProps, app) => {
+    return app.device.isMobile && !!navigator.clipboard;
+  },
  contextItemLabel: "labels.paste",
  // don't supply a shortcut since we handle this conditionally via onCopy event
  keyTest: undefined,
@@ -105,10 +55,13 @@ export const actionPaste = register({
 export const actionCut = register({
  name: "cut",
  trackEvent: { category: "element" },
-  perform: (elements, appState, event: ClipboardEvent | null, app) => {
-    actionCopy.perform(elements, appState, event, app);
+  perform: (elements, appState, data, app) => {
+    actionCopy.perform(elements, appState, data, app);
    return actionDeleteSelected.perform(elements, appState);
  },
+  predicate: (elements, appState, appProps, app) => {
+    return app.device.isMobile && !!navigator.clipboard;
+  },
  contextItemLabel: "labels.cut",
  keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.X,
 });
@@ -122,23 +75,20 @@ export const actionCopyAsSvg = register({
        commitToHistory: false,
      };
    }
-
-    const { exportedElements, exportingFrame } = prepareElementsForExport(
-      elements,
-      appState,
-      true,
-    );
-
+    const selectedElements = app.scene.getSelectedElements({
+      selectedElementIds: appState.selectedElementIds,
+      includeBoundTextElement: true,
+      includeElementsInFrames: true,
+    });
    try {
      await exportCanvas(
        "clipboard-svg",
-        exportedElements,
+        selectedElements.length
+          ? selectedElements
+          : getNonDeletedElements(elements),
        appState,
        app.files,
-        {
-          ...appState,
-          exportingFrame,
-        },
+        appState,
      );
      return {
        commitToHistory: false,
@@ -174,17 +124,16 @@ export const actionCopyAsPng = register({
      includeBoundTextElement: true,
      includeElementsInFrames: true,
    });
-
-    const { exportedElements, exportingFrame } = prepareElementsForExport(
-      elements,
-      appState,
-      true,
-    );
    try {
-      await exportCanvas("clipboard", exportedElements, appState, app.files, {
-        ...appState,
-        exportingFrame,
-      });
+      await exportCanvas(
+        "clipboard",
+        selectedElements.length
+          ? selectedElements
+          : getNonDeletedElements(elements),
+        appState,
+        app.files,
+        appState,
+      );
      return {
        appState: {
          ...appState,
@@ -25,7 +25,7 @@ import { normalizeElementOrder } from "../element/sortElements";
 import { DuplicateIcon } from "../components/icons";
 import {
  bindElementsToFramesAfterDuplication,
-  getFrameChildren,
+  getFrameElements,
 } from "../frame";
 import {
  excludeElementsInFramesFromSelection,
@@ -155,7 +155,12 @@ const duplicateElements = (
            groupId,
          ).flatMap((element) =>
            isFrameElement(element)
-              ? [...getFrameChildren(elements, element.id), element]
+              ? [
+                  ...getFrameElements(elements, element.id, {
+                    includeBoundArrows: true,
+                  }),
+                  element,
+                ]
              : [element],
          );

@@ -181,7 +186,9 @@ const duplicateElements = (
          continue;
        }
        if (isElementAFrame) {
-          const elementsInFrame = getFrameChildren(sortedElements, element.id);
+          const elementsInFrame = getFrameElements(sortedElements, element.id, {
+            includeBoundArrows: true,
+          });

          elementsWithClones.push(
            ...markAsProcessed([
@@ -217,7 +217,7 @@ export const actionSaveFileToDisk = register({
      icon={saveAs}
      title={t("buttons.saveAs")}
      aria-label={t("buttons.saveAs")}
-      showAriaLabel={useDevice().editor.isMobile}
+      showAriaLabel={useDevice().isMobile}
      hidden={!nativeFileSystemSupported}
      onClick={() => updateData(null)}
      data-testid="save-as-button"
@@ -1,7 +1,7 @@
 import { getNonDeletedElements } from "../element";
 import { ExcalidrawElement } from "../element/types";
 import { removeAllElementsFromFrame } from "../frame";
-import { getFrameChildren } from "../frame";
+import { getFrameElements } from "../frame";
 import { KEYS } from "../keys";
 import { AppClassProperties, AppState } from "../types";
 import { updateActiveTool } from "../utils";
@@ -21,7 +21,7 @@ export const actionSelectAllElementsInFrame = register({
    const selectedFrame = app.scene.getSelectedElements(appState)[0];

    if (selectedFrame && selectedFrame.type === "frame") {
-      const elementsInFrame = getFrameChildren(
+      const elementsInFrame = getFrameElements(
        getNonDeletedElements(elements),
        selectedFrame.id,
      ).filter((element) => !(element.type === "text" && element.containerId));
@@ -17,12 +17,15 @@ import {
 import { getNonDeletedElements } from "../element";
 import { randomId } from "../random";
 import { ToolButton } from "../components/ToolButton";
-import { ExcalidrawElement, ExcalidrawTextElement } from "../element/types";
+import {
+  ExcalidrawElement,
+  ExcalidrawFrameElement,
+  ExcalidrawTextElement,
+} from "../element/types";
 import { AppClassProperties, AppState } from "../types";
 import { isBoundToContainer } from "../element/typeChecks";
 import {
  getElementsInResizingFrame,
-  getFrameElements,
  groupByFrames,
  removeElementsFromFrame,
  replaceAllElementsInFrame,
@@ -187,6 +190,13 @@ export const actionUngroup = register({

    let nextElements = [...elements];

+    const selectedElements = app.scene.getSelectedElements(appState);
+    const frames = selectedElements
+      .filter((element) => element.frameId)
+      .map((element) =>
+        app.scene.getElement(element.frameId!),
+      ) as ExcalidrawFrameElement[];
+
    const boundTextElementIds: ExcalidrawTextElement["id"][] = [];
    nextElements = nextElements.map((element) => {
      if (isBoundToContainer(element)) {
@@ -211,19 +221,7 @@ export const actionUngroup = register({
      null,
    );

-    const selectedElements = app.scene.getSelectedElements(appState);
-
-    const selectedElementFrameIds = new Set(
-      selectedElements
-        .filter((element) => element.frameId)
-        .map((element) => element.frameId!),
-    );
-
-    const targetFrames = getFrameElements(elements).filter((frame) =>
-      selectedElementFrameIds.has(frame.id),
-    );
-
-    targetFrames.forEach((frame) => {
+    frames.forEach((frame) => {
      if (frame) {
        nextElements = replaceAllElementsInFrame(
          nextElements,
@@ -3,6 +3,7 @@ import { ToolButton } from "../components/ToolButton";
 import { t } from "../i18n";
 import { showSelectedShapeActions, getNonDeletedElements } from "../element";
 import { register } from "./register";
+import { allowFullScreen, exitFullScreen, isFullScreen } from "../utils";
 import { KEYS } from "../keys";

 export const actionToggleCanvasMenu = register({
@@ -51,6 +52,23 @@ export const actionToggleEditMenu = register({
  ),
 });

+export const actionFullScreen = register({
+  name: "toggleFullScreen",
+  viewMode: true,
+  trackEvent: { category: "canvas", predicate: (appState) => !isFullScreen() },
+  perform: () => {
+    if (!isFullScreen()) {
+      allowFullScreen();
+    }
+    if (isFullScreen()) {
+      exitFullScreen();
+    }
+    return {
+      commitToHistory: false,
+    };
+  },
+});
+
 export const actionShortcuts = register({
  name: "toggleShortcuts",
  viewMode: true,
@@ -1,167 +0,0 @@
-import { Excalidraw } from "../packages/excalidraw/index";
-import { queryByTestId } from "@testing-library/react";
-import { render } from "../tests/test-utils";
-import { UI } from "../tests/helpers/ui";
-import { API } from "../tests/helpers/api";
-import { COLOR_PALETTE, DEFAULT_ELEMENT_BACKGROUND_PICKS } from "../colors";
-import { FONT_FAMILY, STROKE_WIDTH } from "../constants";
-
-const { h } = window;
-
-describe("element locking", () => {
-  beforeEach(async () => {
-    await render(<Excalidraw />);
-  });
-
-  describe("properties when tool selected", () => {
-    it("should show active background top picks", () => {
-      UI.clickTool("rectangle");
-
-      const color = DEFAULT_ELEMENT_BACKGROUND_PICKS[1];
-
-      // just in case we change it in the future
-      expect(color).not.toBe(COLOR_PALETTE.transparent);
-
-      h.setState({
-        currentItemBackgroundColor: color,
-      });
-      const activeColor = queryByTestId(
-        document.body,
-        `color-top-pick-${color}`,
-      );
-      expect(activeColor).toHaveClass("active");
-    });
-
-    it("should show fill style when background non-transparent", () => {
-      UI.clickTool("rectangle");
-
-      const color = DEFAULT_ELEMENT_BACKGROUND_PICKS[1];
-
-      // just in case we change it in the future
-      expect(color).not.toBe(COLOR_PALETTE.transparent);
-
-      h.setState({
-        currentItemBackgroundColor: color,
-        currentItemFillStyle: "hachure",
-      });
-      const hachureFillButton = queryByTestId(document.body, `fill-hachure`);
-
-      expect(hachureFillButton).toHaveClass("active");
-      h.setState({
-        currentItemFillStyle: "solid",
-      });
-      const solidFillStyle = queryByTestId(document.body, `fill-solid`);
-      expect(solidFillStyle).toHaveClass("active");
-    });
-
-    it("should not show fill style when background transparent", () => {
-      UI.clickTool("rectangle");
-
-      h.setState({
-        currentItemBackgroundColor: COLOR_PALETTE.transparent,
-        currentItemFillStyle: "hachure",
-      });
-      const hachureFillButton = queryByTestId(document.body, `fill-hachure`);
-
-      expect(hachureFillButton).toBe(null);
-    });
-
-    it("should show horizontal text align for text tool", () => {
-      UI.clickTool("text");
-
-      h.setState({
-        currentItemTextAlign: "right",
-      });
-
-      const centerTextAlign = queryByTestId(document.body, `align-right`);
-      expect(centerTextAlign).toBeChecked();
-    });
-  });
-
-  describe("properties when elements selected", () => {
-    it("should show active styles when single element selected", () => {
-      const rect = API.createElement({
-        type: "rectangle",
-        backgroundColor: "red",
-        fillStyle: "cross-hatch",
-      });
-      h.elements = [rect];
-      API.setSelectedElements([rect]);
-
-      const crossHatchButton = queryByTestId(document.body, `fill-cross-hatch`);
-      expect(crossHatchButton).toHaveClass("active");
-    });
-
-    it("should not show fill style selected element's background is transparent", () => {
-      const rect = API.createElement({
-        type: "rectangle",
-        backgroundColor: COLOR_PALETTE.transparent,
-        fillStyle: "cross-hatch",
-      });
-      h.elements = [rect];
-      API.setSelectedElements([rect]);
-
-      const crossHatchButton = queryByTestId(document.body, `fill-cross-hatch`);
-      expect(crossHatchButton).toBe(null);
-    });
-
-    it("should highlight common stroke width of selected elements", () => {
-      const rect1 = API.createElement({
-        type: "rectangle",
-        strokeWidth: STROKE_WIDTH.thin,
-      });
-      const rect2 = API.createElement({
-        type: "rectangle",
-        strokeWidth: STROKE_WIDTH.thin,
-      });
-      h.elements = [rect1, rect2];
-      API.setSelectedElements([rect1, rect2]);
-
-      const thinStrokeWidthButton = queryByTestId(
-        document.body,
-        `strokeWidth-thin`,
-      );
-      expect(thinStrokeWidthButton).toBeChecked();
-    });
-
-    it("should not highlight any stroke width button if no common style", () => {
-      const rect1 = API.createElement({
-        type: "rectangle",
-        strokeWidth: STROKE_WIDTH.thin,
-      });
-      const rect2 = API.createElement({
-        type: "rectangle",
-        strokeWidth: STROKE_WIDTH.bold,
-      });
-      h.elements = [rect1, rect2];
-      API.setSelectedElements([rect1, rect2]);
-
-      expect(queryByTestId(document.body, `strokeWidth-thin`)).not.toBe(null);
-      expect(
-        queryByTestId(document.body, `strokeWidth-thin`),
-      ).not.toBeChecked();
-      expect(
-        queryByTestId(document.body, `strokeWidth-bold`),
-      ).not.toBeChecked();
-      expect(
-        queryByTestId(document.body, `strokeWidth-extraBold`),
-      ).not.toBeChecked();
-    });
-
-    it("should show properties of different element types when selected", () => {
-      const rect = API.createElement({
-        type: "rectangle",
-        strokeWidth: STROKE_WIDTH.bold,
-      });
-      const text = API.createElement({
-        type: "text",
-        fontFamily: FONT_FAMILY.Cascadia,
-      });
-      h.elements = [rect, text];
-      API.setSelectedElements([rect, text]);
-
-      expect(queryByTestId(document.body, `strokeWidth-bold`)).toBeChecked();
-      expect(queryByTestId(document.body, `font-family-code`)).toBeChecked();
-    });
-  });
-});
@@ -1,4 +1,4 @@
-import { AppState, Primitive } from "../../src/types";
+import { AppState } from "../../src/types";
 import {
  DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE,
  DEFAULT_ELEMENT_BACKGROUND_PICKS,
@@ -51,7 +51,6 @@ import {
  DEFAULT_FONT_SIZE,
  FONT_FAMILY,
  ROUNDNESS,
-  STROKE_WIDTH,
  VERTICAL_ALIGN,
 } from "../constants";
 import {
@@ -83,6 +82,7 @@ import { getLanguage, t } from "../i18n";
 import { KEYS } from "../keys";
 import { randomInteger } from "../random";
 import {
+  canChangeRoundness,
  canHaveArrowheads,
  getCommonAttributeOfSelectedElements,
  getSelectedElements,
@@ -118,44 +118,25 @@ export const changeProperty = (
  });
 };

-export const getFormValue = function <T extends Primitive>(
+export const getFormValue = function <T>(
  elements: readonly ExcalidrawElement[],
  appState: AppState,
  getAttribute: (element: ExcalidrawElement) => T,
-  isRelevantElement: true | ((element: ExcalidrawElement) => boolean),
-  defaultValue: T | ((isSomeElementSelected: boolean) => T),
+  defaultValue: T,
 ): T {
  const editingElement = appState.editingElement;
  const nonDeletedElements = getNonDeletedElements(elements);
-
-  let ret: T | null = null;
-
-  if (editingElement) {
-    ret = getAttribute(editingElement);
-  }
-
-  if (!ret) {
-    const hasSelection = isSomeElementSelected(nonDeletedElements, appState);
-
-    if (hasSelection) {
-      ret =
-        getCommonAttributeOfSelectedElements(
-          isRelevantElement === true
-            ? nonDeletedElements
-            : nonDeletedElements.filter((el) => isRelevantElement(el)),
+  return (
+    (editingElement && getAttribute(editingElement)) ??
+    (isSomeElementSelected(nonDeletedElements, appState)
+      ? getCommonAttributeOfSelectedElements(
+          nonDeletedElements,
          appState,
          getAttribute,
-        ) ??
-        (typeof defaultValue === "function"
-          ? defaultValue(true)
-          : defaultValue);
-    } else {
-      ret =
-        typeof defaultValue === "function" ? defaultValue(false) : defaultValue;
-    }
-  }
-
-  return ret;
+        )
+      : defaultValue) ??
+    defaultValue
+  );
 };

 const offsetElementAfterFontResize = (
@@ -266,7 +247,6 @@ export const actionChangeStrokeColor = register({
          elements,
          appState,
          (element) => element.strokeColor,
-          true,
          appState.currentItemStrokeColor,
        )}
        onChange={(color) => updateData({ currentItemStrokeColor: color })}
@@ -309,7 +289,6 @@ export const actionChangeBackgroundColor = register({
          elements,
          appState,
          (element) => element.backgroundColor,
-          true,
          appState.currentItemBackgroundColor,
        )}
        onChange={(color) => updateData({ currentItemBackgroundColor: color })}
@@ -328,7 +307,7 @@ export const actionChangeFillStyle = register({
    trackEvent(
      "element",
      "changeFillStyle",
-      `${value} (${app.device.editor.isMobile ? "mobile" : "desktop"})`,
+      `${value} (${app.device.isMobile ? "mobile" : "desktop"})`,
    );
    return {
      elements: changeProperty(elements, appState, (el) =>
@@ -359,28 +338,23 @@ export const actionChangeFillStyle = register({
              } (${getShortcutKey("Alt-Click")})`,
              icon: allElementsZigZag ? FillZigZagIcon : FillHachureIcon,
              active: allElementsZigZag ? true : undefined,
-              testId: `fill-hachure`,
            },
            {
              value: "cross-hatch",
              text: t("labels.crossHatch"),
              icon: FillCrossHatchIcon,
-              testId: `fill-cross-hatch`,
            },
            {
              value: "solid",
              text: t("labels.solid"),
              icon: FillSolidIcon,
-              testId: `fill-solid`,
            },
          ]}
          value={getFormValue(
            elements,
            appState,
            (element) => element.fillStyle,
-            (element) => element.hasOwnProperty("fillStyle"),
-            (hasSelection) =>
-              hasSelection ? null : appState.currentItemFillStyle,
+            appState.currentItemFillStyle,
          )}
          onClick={(value, event) => {
            const nextValue =
@@ -419,31 +393,26 @@ export const actionChangeStrokeWidth = register({
        group="stroke-width"
        options={[
          {
-            value: STROKE_WIDTH.thin,
+            value: 1,
            text: t("labels.thin"),
            icon: StrokeWidthBaseIcon,
-            testId: "strokeWidth-thin",
          },
          {
-            value: STROKE_WIDTH.bold,
+            value: 2,
            text: t("labels.bold"),
            icon: StrokeWidthBoldIcon,
-            testId: "strokeWidth-bold",
          },
          {
-            value: STROKE_WIDTH.extraBold,
+            value: 4,
            text: t("labels.extraBold"),
            icon: StrokeWidthExtraBoldIcon,
-            testId: "strokeWidth-extraBold",
          },
        ]}
        value={getFormValue(
          elements,
          appState,
          (element) => element.strokeWidth,
-          (element) => element.hasOwnProperty("strokeWidth"),
-          (hasSelection) =>
-            hasSelection ? null : appState.currentItemStrokeWidth,
+          appState.currentItemStrokeWidth,
        )}
        onChange={(value) => updateData(value)}
      />
@@ -492,9 +461,7 @@ export const actionChangeSloppiness = register({
          elements,
          appState,
          (element) => element.roughness,
-          (element) => element.hasOwnProperty("roughness"),
-          (hasSelection) =>
-            hasSelection ? null : appState.currentItemRoughness,
+          appState.currentItemRoughness,
        )}
        onChange={(value) => updateData(value)}
      />
@@ -542,9 +509,7 @@ export const actionChangeStrokeStyle = register({
          elements,
          appState,
          (element) => element.strokeStyle,
-          (element) => element.hasOwnProperty("strokeStyle"),
-          (hasSelection) =>
-            hasSelection ? null : appState.currentItemStrokeStyle,
+          appState.currentItemStrokeStyle,
        )}
        onChange={(value) => updateData(value)}
      />
@@ -584,7 +549,6 @@ export const actionChangeOpacity = register({
            elements,
            appState,
            (element) => element.opacity,
-            true,
            appState.currentItemOpacity,
          ) ?? undefined
        }
@@ -643,12 +607,7 @@ export const actionChangeFontSize = register({
            }
            return null;
          },
-          (element) =>
-            isTextElement(element) || getBoundTextElement(element) !== null,
-          (hasSelection) =>
-            hasSelection
-              ? null
-              : appState.currentItemFontSize || DEFAULT_FONT_SIZE,
+          appState.currentItemFontSize || DEFAULT_FONT_SIZE,
        )}
        onChange={(value) => updateData(value)}
      />
@@ -733,25 +692,21 @@ export const actionChangeFontFamily = register({
      value: FontFamilyValues;
      text: string;
      icon: JSX.Element;
-      testId: string;
    }[] = [
      {
        value: FONT_FAMILY.Virgil,
        text: t("labels.handDrawn"),
        icon: FreedrawIcon,
-        testId: "font-family-virgil",
      },
      {
        value: FONT_FAMILY.Helvetica,
        text: t("labels.normal"),
        icon: FontFamilyNormalIcon,
-        testId: "font-family-normal",
      },
      {
        value: FONT_FAMILY.Cascadia,
        text: t("labels.code"),
        icon: FontFamilyCodeIcon,
-        testId: "font-family-code",
      },
    ];

@@ -774,12 +729,7 @@ export const actionChangeFontFamily = register({
              }
              return null;
            },
-            (element) =>
-              isTextElement(element) || getBoundTextElement(element) !== null,
-            (hasSelection) =>
-              hasSelection
-                ? null
-                : appState.currentItemFontFamily || DEFAULT_FONT_FAMILY,
+            appState.currentItemFontFamily || DEFAULT_FONT_FAMILY,
          )}
          onChange={(value) => updateData(value)}
        />
@@ -856,10 +806,7 @@ export const actionChangeTextAlign = register({
              }
              return null;
            },
-            (element) =>
-              isTextElement(element) || getBoundTextElement(element) !== null,
-            (hasSelection) =>
-              hasSelection ? null : appState.currentItemTextAlign,
+            appState.currentItemTextAlign,
          )}
          onChange={(value) => updateData(value)}
        />
@@ -935,9 +882,7 @@ export const actionChangeVerticalAlign = register({
              }
              return null;
            },
-            (element) =>
-              isTextElement(element) || getBoundTextElement(element) !== null,
-            (hasSelection) => (hasSelection ? null : VERTICAL_ALIGN.MIDDLE),
+            VERTICAL_ALIGN.MIDDLE,
          )}
          onChange={(value) => updateData(value)}
        />
@@ -1002,9 +947,9 @@ export const actionChangeRoundness = register({
            appState,
            (element) =>
              hasLegacyRoundness ? null : element.roundness ? "round" : "sharp",
-            (element) => element.hasOwnProperty("roundness"),
-            (hasSelection) =>
-              hasSelection ? null : appState.currentItemRoundness,
+            (canChangeRoundness(appState.activeTool.type) &&
+              appState.currentItemRoundness) ||
+              null,
          )}
          onChange={(value) => updateData(value)}
        />
@@ -1098,7 +1043,6 @@ export const actionChangeArrowhead = register({
                isLinearElement(element) && canHaveArrowheads(element.type)
                  ? element.startArrowhead
                  : appState.currentItemStartArrowhead,
-              true,
              appState.currentItemStartArrowhead,
            )}
            onChange={(value) => updateData({ position: "start", type: value })}
@@ -1145,7 +1089,6 @@ export const actionChangeArrowhead = register({
                isLinearElement(element) && canHaveArrowheads(element.type)
                  ? element.endArrowhead
                  : appState.currentItemEndArrowhead,
-              true,
              appState.currentItemEndArrowhead,
            )}
            onChange={(value) => updateData({ position: "end", type: value })}
@@ -21,10 +21,8 @@ import {
  canApplyRoundnessTypeToElement,
  getDefaultRoundnessTypeForElement,
  isFrameElement,
-  isArrowElement,
 } from "../element/typeChecks";
 import { getSelectedElements } from "../scene";
-import { ExcalidrawTextElement } from "../element/types";

 // `copiedStyles` is exported only for tests.
 export let copiedStyles: string = "{}";
@@ -101,19 +99,16 @@ export const actionPasteStyles = register({

          if (isTextElement(newElement)) {
            const fontSize =
-              (elementStylesToCopyFrom as ExcalidrawTextElement).fontSize ||
-              DEFAULT_FONT_SIZE;
+              elementStylesToCopyFrom?.fontSize || DEFAULT_FONT_SIZE;
            const fontFamily =
-              (elementStylesToCopyFrom as ExcalidrawTextElement).fontFamily ||
-              DEFAULT_FONT_FAMILY;
+              elementStylesToCopyFrom?.fontFamily || DEFAULT_FONT_FAMILY;
            newElement = newElementWith(newElement, {
              fontSize,
              fontFamily,
              textAlign:
-                (elementStylesToCopyFrom as ExcalidrawTextElement).textAlign ||
-                DEFAULT_TEXT_ALIGN,
+                elementStylesToCopyFrom?.textAlign || DEFAULT_TEXT_ALIGN,
              lineHeight:
-                (elementStylesToCopyFrom as ExcalidrawTextElement).lineHeight ||
+                elementStylesToCopyFrom.lineHeight ||
                getDefaultLineHeight(fontFamily),
            });
            let container = null;
@@ -128,10 +123,7 @@ export const actionPasteStyles = register({
            redrawTextBoundingBox(newElement, container);
          }

-          if (
-            newElement.type === "arrow" &&
-            isArrowElement(elementStylesToCopyFrom)
-          ) {
+          if (newElement.type === "arrow") {
            newElement = newElementWith(newElement, {
              startArrowhead: elementStylesToCopyFrom.startArrowhead,
              endArrowhead: elementStylesToCopyFrom.endArrowhead,
@@ -44,6 +44,7 @@ export { actionCopyStyles, actionPasteStyles } from "./actionStyles";
 export {
  actionToggleCanvasMenu,
  actionToggleEditMenu,
+  actionFullScreen,
  actionShortcuts,
 } from "./actionMenu";

@@ -29,7 +29,7 @@ const trackAction = (
          trackEvent(
            action.trackEvent.category,
            action.trackEvent.action || action.name,
-            `${source} (${app.device.editor.isMobile ? "mobile" : "desktop"})`,
+            `${source} (${app.device.isMobile ? "mobile" : "desktop"})`,
          );
        }
      }
@@ -119,10 +119,10 @@ export class ActionManager {
    return true;
  }

-  executeAction<T extends Action>(
-    action: T,
+  executeAction(
+    action: Action,
    source: ActionSource = "api",
-    value: Parameters<T["perform"]>[2] = null,
+    value: any = null,
  ) {
    const elements = this.getElementsIncludingDeleted();
    const appState = this.getAppState();
@@ -1,196 +1,22 @@
-import {
-  createPasteEvent,
-  parseClipboard,
-  serializeAsClipboardJSON,
-} from "./clipboard";
-import { API } from "./tests/helpers/api";
+import { parseClipboard } from "./clipboard";
+import { createPasteEvent } from "./tests/test-utils";

-describe("parseClipboard()", () => {
-  it("should parse JSON as plaintext if not excalidraw-api/clipboard data", async () => {
-    let text;
-    let clipboardData;
-    // -------------------------------------------------------------------------
+describe("Test parseClipboard", () => {
+  it("should parse valid json correctly", async () => {
+    let text = "123";

-    text = "123";
-    clipboardData = await parseClipboard(
-      createPasteEvent({ types: { "text/plain": text } }),
+    let clipboardData = await parseClipboard(
+      createPasteEvent({ "text/plain": text }),
    );
-    expect(clipboardData.text).toBe(text);

-    // -------------------------------------------------------------------------
+    expect(clipboardData.text).toBe(text);

    text = "[123]";
+
    clipboardData = await parseClipboard(
-      createPasteEvent({ types: { "text/plain": text } }),
+      createPasteEvent({ "text/plain": text }),
    );
+
    expect(clipboardData.text).toBe(text);
-
-    // -------------------------------------------------------------------------
-
-    text = JSON.stringify({ val: 42 });
-    clipboardData = await parseClipboard(
-      createPasteEvent({ types: { "text/plain": text } }),
-    );
-    expect(clipboardData.text).toBe(text);
-  });
-
-  it("should parse valid excalidraw JSON if inside text/plain", async () => {
-    const rect = API.createElement({ type: "rectangle" });
-
-    const json = serializeAsClipboardJSON({ elements: [rect], files: null });
-    const clipboardData = await parseClipboard(
-      createPasteEvent({
-        types: {
-          "text/plain": json,
-        },
-      }),
-    );
-    expect(clipboardData.elements).toEqual([rect]);
-  });
-
-  it("should parse valid excalidraw JSON if inside text/html", async () => {
-    const rect = API.createElement({ type: "rectangle" });
-
-    let json;
-    let clipboardData;
-    // -------------------------------------------------------------------------
-    json = serializeAsClipboardJSON({ elements: [rect], files: null });
-    clipboardData = await parseClipboard(
-      createPasteEvent({
-        types: {
-          "text/html": json,
-        },
-      }),
-    );
-    expect(clipboardData.elements).toEqual([rect]);
-    // -------------------------------------------------------------------------
-    json = serializeAsClipboardJSON({ elements: [rect], files: null });
-    clipboardData = await parseClipboard(
-      createPasteEvent({
-        types: {
-          "text/html": `<div> ${json}</div>`,
-        },
-      }),
-    );
-    expect(clipboardData.elements).toEqual([rect]);
-    // -------------------------------------------------------------------------
-  });
-
-  it("should parse <image> `src` urls out of text/html", async () => {
-    let clipboardData;
-    // -------------------------------------------------------------------------
-    clipboardData = await parseClipboard(
-      createPasteEvent({
-        types: {
-          "text/html": `<img src="https://example.com/image.png" />`,
-        },
-      }),
-    );
-    expect(clipboardData.mixedContent).toEqual([
-      {
-        type: "imageUrl",
-        value: "https://example.com/image.png",
-      },
-    ]);
-    // -------------------------------------------------------------------------
-    clipboardData = await parseClipboard(
-      createPasteEvent({
-        types: {
-          "text/html": `<div><img src="https://example.com/image.png" /></div><a><img src="https://example.com/image2.png" /></a>`,
-        },
-      }),
-    );
-    expect(clipboardData.mixedContent).toEqual([
-      {
-        type: "imageUrl",
-        value: "https://example.com/image.png",
-      },
-      {
-        type: "imageUrl",
-        value: "https://example.com/image2.png",
-      },
-    ]);
-  });
-
-  it("should parse text content alongside <image> `src` urls out of text/html", async () => {
-    const clipboardData = await parseClipboard(
-      createPasteEvent({
-        types: {
-          "text/html": `<a href="https://example.com">hello </a><div><img src="https://example.com/image.png" /></div><b>my friend!</b>`,
-        },
-      }),
-    );
-    expect(clipboardData.mixedContent).toEqual([
-      {
-        type: "text",
-        // trimmed
-        value: "hello",
-      },
-      {
-        type: "imageUrl",
-        value: "https://example.com/image.png",
-      },
-      {
-        type: "text",
-        value: "my friend!",
-      },
-    ]);
-  });
-
-  it("should parse spreadsheet from either text/plain and text/html", async () => {
-    let clipboardData;
-    // -------------------------------------------------------------------------
-    clipboardData = await parseClipboard(
-      createPasteEvent({
-        types: {
-          "text/plain": `a	b
-        1	2
-        4	5
-        7	10`,
-        },
-      }),
-    );
-    expect(clipboardData.spreadsheet).toEqual({
-      title: "b",
-      labels: ["1", "4", "7"],
-      values: [2, 5, 10],
-    });
-    // -------------------------------------------------------------------------
-    clipboardData = await parseClipboard(
-      createPasteEvent({
-        types: {
-          "text/html": `a	b
-        1	2
-        4	5
-        7	10`,
-        },
-      }),
-    );
-    expect(clipboardData.spreadsheet).toEqual({
-      title: "b",
-      labels: ["1", "4", "7"],
-      values: [2, 5, 10],
-    });
-    // -------------------------------------------------------------------------
-    clipboardData = await parseClipboard(
-      createPasteEvent({
-        types: {
-          "text/html": `<html>
-        <body>
-        <!--StartFragment--><google-sheets-html-origin><style type="text/css"><!--td {border: 1px solid #cccccc;}br {mso-data-placement:same-cell;}--></style><table xmlns="http://www.w3.org/1999/xhtml" cellspacing="0" cellpadding="0" dir="ltr" border="1" style="table-layout:fixed;font-size:10pt;font-family:Arial;width:0px;border-collapse:collapse;border:none"><colgroup><col width="100"/><col width="100"/></colgroup><tbody><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;a&quot;}">a</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;b&quot;}">b</td></tr><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-align:right;" data-sheets-value="{&quot;1&quot;:3,&quot;3&quot;:1}">1</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-align:right;" data-sheets-value="{&quot;1&quot;:3,&quot;3&quot;:2}">2</td></tr><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-align:right;" data-sheets-value="{&quot;1&quot;:3,&quot;3&quot;:4}">4</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-align:right;" data-sheets-value="{&quot;1&quot;:3,&quot;3&quot;:5}">5</td></tr><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-align:right;" data-sheets-value="{&quot;1&quot;:3,&quot;3&quot;:7}">7</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-align:right;" data-sheets-value="{&quot;1&quot;:3,&quot;3&quot;:10}">10</td></tr></tbody></table><!--EndFragment-->
-        </body>
-        </html>`,
-          "text/plain": `a	b
-        1	2
-        4	5
-        7	10`,
-        },
-      }),
-    );
-    expect(clipboardData.spreadsheet).toEqual({
-      title: "b",
-      labels: ["1", "4", "7"],
-      values: [2, 5, 10],
-    });
  });
 });
@@ -3,18 +3,14 @@ import {
  NonDeletedExcalidrawElement,
 } from "./element/types";
 import { BinaryFiles } from "./types";
+import { SVG_EXPORT_TAG } from "./scene/export";
 import { tryParseSpreadsheet, Spreadsheet, VALID_SPREADSHEET } from "./charts";
-import {
-  ALLOWED_PASTE_MIME_TYPES,
-  EXPORT_DATA_TYPES,
-  MIME_TYPES,
-} from "./constants";
+import { EXPORT_DATA_TYPES, MIME_TYPES } from "./constants";
 import { isInitializedImageElement } from "./element/typeChecks";
 import { deepCopyElement } from "./element/newElement";
 import { mutateElement } from "./element/mutateElement";
 import { getContainingFrame } from "./frame";
-import { isMemberOf, isPromiseLike } from "./utils";
-import { t } from "./i18n";
+import { isPromiseLike, isTestEnv } from "./utils";

 type ElementsClipboard = {
  type: typeof EXPORT_DATA_TYPES.excalidrawClipboard;
@@ -34,11 +30,8 @@ export interface ClipboardData {
  programmaticAPI?: boolean;
 }

-type AllowedPasteMimeTypes = typeof ALLOWED_PASTE_MIME_TYPES[number];
-
-type ParsedClipboardEvent =
-  | { type: "text"; value: string }
-  | { type: "mixedContent"; value: PastedMixedContent };
+let CLIPBOARD = "";
+let PREFER_APP_CLIPBOARD = false;

 export const probablySupportsClipboardReadText =
  "clipboard" in navigator && "readText" in navigator.clipboard;
@@ -68,61 +61,10 @@ const clipboardContainsElements = (
  return false;
 };

-export const createPasteEvent = ({
-  types,
-  files,
-}: {
-  types?: { [key in AllowedPasteMimeTypes]?: string };
-  files?: File[];
-}) => {
-  if (!types && !files) {
-    console.warn("createPasteEvent: no types or files provided");
-  }
-
-  const event = new ClipboardEvent("paste", {
-    clipboardData: new DataTransfer(),
-  });
-
-  if (types) {
-    for (const [type, value] of Object.entries(types)) {
-      try {
-        event.clipboardData?.setData(type, value);
-        if (event.clipboardData?.getData(type) !== value) {
-          throw new Error(`Failed to set "${type}" as clipboardData item`);
-        }
-      } catch (error: any) {
-        throw new Error(error.message);
-      }
-    }
-  }
-
-  if (files) {
-    let idx = -1;
-    for (const file of files) {
-      idx++;
-      try {
-        event.clipboardData?.items.add(file);
-        if (event.clipboardData?.files[idx] !== file) {
-          throw new Error(
-            `Failed to set file "${file.name}" as clipboardData item`,
-          );
-        }
-      } catch (error: any) {
-        throw new Error(error.message);
-      }
-    }
-  }
-
-  return event;
-};
-
-export const serializeAsClipboardJSON = ({
-  elements,
-  files,
-}: {
-  elements: readonly NonDeletedExcalidrawElement[];
-  files: BinaryFiles | null;
-}) => {
+export const copyToClipboard = async (
+  elements: readonly NonDeletedExcalidrawElement[],
+  files: BinaryFiles | null,
+) => {
  const framesToCopy = new Set(
    elements.filter((element) => element.type === "frame"),
  );
@@ -144,7 +86,7 @@ export const serializeAsClipboardJSON = ({
    );
  }

-  // select bound text elements when copying
+  // select binded text elements when copying
  const contents: ElementsClipboard = {
    type: EXPORT_DATA_TYPES.excalidrawClipboard,
    elements: elements.map((element) => {
@@ -163,20 +105,34 @@ export const serializeAsClipboardJSON = ({
    }),
    files: files ? _files : undefined,
  };
+  const json = JSON.stringify(contents);

-  return JSON.stringify(contents);
+  if (isTestEnv()) {
+    return json;
+  }
+
+  CLIPBOARD = json;
+
+  try {
+    PREFER_APP_CLIPBOARD = false;
+    await copyTextToSystemClipboard(json);
+  } catch (error: any) {
+    PREFER_APP_CLIPBOARD = true;
+    console.error(error);
+  }
 };

-export const copyToClipboard = async (
-  elements: readonly NonDeletedExcalidrawElement[],
-  files: BinaryFiles | null,
-  /** supply if available to make the operation more certain to succeed */
-  clipboardEvent?: ClipboardEvent | null,
-) => {
-  await copyTextToSystemClipboard(
-    serializeAsClipboardJSON({ elements, files }),
-    clipboardEvent,
-  );
+const getAppClipboard = (): Partial<ElementsClipboard> => {
+  if (!CLIPBOARD) {
+    return {};
+  }
+
+  try {
+    return JSON.parse(CLIPBOARD);
+  } catch (error: any) {
+    console.error(error);
+    return {};
+  }
 };

 const parsePotentialSpreadsheet = (
@@ -210,9 +166,7 @@ function parseHTMLTree(el: ChildNode) {
  return result;
 }

-const maybeParseHTMLPaste = (
-  event: ClipboardEvent,
-): { type: "mixedContent"; value: PastedMixedContent } | null => {
+const maybeParseHTMLPaste = (event: ClipboardEvent) => {
  const html = event.clipboardData?.getData("text/html");

  if (!html) {
@@ -225,7 +179,7 @@ const maybeParseHTMLPaste = (
    const content = parseHTMLTree(doc.body);

    if (content.length) {
-      return { type: "mixedContent", value: content };
+      return content;
    }
  } catch (error: any) {
    console.error(`error in parseHTMLFromPaste: ${error.message}`);
@@ -234,88 +188,27 @@ const maybeParseHTMLPaste = (
  return null;
 };

-export const readSystemClipboard = async () => {
-  const types: { [key in AllowedPasteMimeTypes]?: string } = {};
-
-  try {
-    if (navigator.clipboard?.readText) {
-      return { "text/plain": await navigator.clipboard?.readText() };
-    }
-  } catch (error: any) {
-    // @ts-ignore
-    if (navigator.clipboard?.read) {
-      console.warn(
-        `navigator.clipboard.readText() failed (${error.message}). Failling back to navigator.clipboard.read()`,
-      );
-    } else {
-      throw error;
-    }
-  }
-
-  let clipboardItems: ClipboardItems;
-
-  try {
-    clipboardItems = await navigator.clipboard?.read();
-  } catch (error: any) {
-    if (error.name === "DataError") {
-      console.warn(
-        `navigator.clipboard.read() error, clipboard is probably empty: ${error.message}`,
-      );
-      return types;
-    }
-    throw error;
-  }
-
-  for (const item of clipboardItems) {
-    for (const type of item.types) {
-      if (!isMemberOf(ALLOWED_PASTE_MIME_TYPES, type)) {
-        continue;
-      }
-      try {
-        types[type] = await (await item.getType(type)).text();
-      } catch (error: any) {
-        console.warn(
-          `Cannot retrieve ${type} from clipboardItem: ${error.message}`,
-        );
-      }
-    }
-  }
-
-  if (Object.keys(types).length === 0) {
-    console.warn("No clipboard data found from clipboard.read().");
-    return types;
-  }
-
-  return types;
-};
-
 /**
- * Parses "paste" ClipboardEvent.
+ * Retrieves content from system clipboard (either from ClipboardEvent or
+ *  via async clipboard API if supported)
 */
-const parseClipboardEvent = async (
-  event: ClipboardEvent,
+const getSystemClipboard = async (
+  event: ClipboardEvent | null,
  isPlainPaste = false,
-): Promise<ParsedClipboardEvent> => {
+): Promise<
+  | { type: "text"; value: string }
+  | { type: "mixedContent"; value: PastedMixedContent }
+> => {
  try {
    const mixedContent = !isPlainPaste && event && maybeParseHTMLPaste(event);
-
    if (mixedContent) {
-      if (mixedContent.value.every((item) => item.type === "text")) {
-        return {
-          type: "text",
-          value:
-            event.clipboardData?.getData("text/plain") ||
-            mixedContent.value
-              .map((item) => item.value)
-              .join("\n")
-              .trim(),
-        };
-      }
-
-      return mixedContent;
+      return { type: "mixedContent", value: mixedContent };
    }

-    const text = event.clipboardData?.getData("text/plain");
+    const text = event
+      ? event.clipboardData?.getData("text/plain")
+      : probablySupportsClipboardReadText &&
+        (await navigator.clipboard.readText());

    return { type: "text", value: (text || "").trim() };
  } catch {
@@ -327,32 +220,40 @@ const parseClipboardEvent = async (
 * Attempts to parse clipboard. Prefers system clipboard.
 */
 export const parseClipboard = async (
-  event: ClipboardEvent,
+  event: ClipboardEvent | null,
  isPlainPaste = false,
 ): Promise<ClipboardData> => {
-  const parsedEventData = await parseClipboardEvent(event, isPlainPaste);
+  const systemClipboard = await getSystemClipboard(event, isPlainPaste);

-  if (parsedEventData.type === "mixedContent") {
+  if (systemClipboard.type === "mixedContent") {
    return {
-      mixedContent: parsedEventData.value,
+      mixedContent: systemClipboard.value,
    };
  }

-  try {
-    // if system clipboard contains spreadsheet, use it even though it's
-    // technically possible it's staler than in-app clipboard
-    const spreadsheetResult =
-      !isPlainPaste && parsePotentialSpreadsheet(parsedEventData.value);
-
-    if (spreadsheetResult) {
-      return spreadsheetResult;
-    }
-  } catch (error: any) {
-    console.error(error);
+  // if system clipboard empty, couldn't be resolved, or contains previously
+  // copied excalidraw scene as SVG, fall back to previously copied excalidraw
+  // elements
+  if (
+    !systemClipboard ||
+    (!isPlainPaste && systemClipboard.value.includes(SVG_EXPORT_TAG))
+  ) {
+    return getAppClipboard();
  }

+  // if system clipboard contains spreadsheet, use it even though it's
+  // technically possible it's staler than in-app clipboard
+  const spreadsheetResult =
+    !isPlainPaste && parsePotentialSpreadsheet(systemClipboard.value);
+
+  if (spreadsheetResult) {
+    return spreadsheetResult;
+  }
+
+  const appClipboardData = getAppClipboard();
+
  try {
-    const systemClipboardData = JSON.parse(parsedEventData.value);
+    const systemClipboardData = JSON.parse(systemClipboard.value);
    const programmaticAPI =
      systemClipboardData.type === EXPORT_DATA_TYPES.excalidrawClipboardWithAPI;
    if (clipboardContainsElements(systemClipboardData)) {
@@ -365,9 +266,18 @@ export const parseClipboard = async (
        programmaticAPI,
      };
    }
-  } catch {}
-
-  return { text: parsedEventData.value };
+  } catch (e) {}
+  // system clipboard doesn't contain excalidraw elements → return plaintext
+  // unless we set a flag to prefer in-app clipboard because browser didn't
+  // support storing to system clipboard on copy
+  return PREFER_APP_CLIPBOARD && appClipboardData.elements
+    ? {
+        ...appClipboardData,
+        text: isPlainPaste
+          ? JSON.stringify(appClipboardData.elements, null, 2)
+          : undefined,
+      }
+    : { text: systemClipboard.value };
 };

 export const copyBlobToClipboardAsPng = async (blob: Blob | Promise<Blob>) => {
@@ -400,49 +310,28 @@ export const copyBlobToClipboardAsPng = async (blob: Blob | Promise<Blob>) => {
  }
 };

-export const copyTextToSystemClipboard = async (
-  text: string | null,
-  clipboardEvent?: ClipboardEvent | null,
-) => {
-  // (1) first try using Async Clipboard API
+export const copyTextToSystemClipboard = async (text: string | null) => {
+  let copied = false;
  if (probablySupportsClipboardWriteText) {
    try {
      // NOTE: doesn't work on FF on non-HTTPS domains, or when document
      // not focused
      await navigator.clipboard.writeText(text || "");
-      return;
+      copied = true;
    } catch (error: any) {
      console.error(error);
    }
  }

-  // (2) if fails and we have access to ClipboardEvent, use plain old setData()
-  try {
-    if (clipboardEvent) {
-      clipboardEvent.clipboardData?.setData("text/plain", text || "");
-      if (clipboardEvent.clipboardData?.getData("text/plain") !== text) {
-        throw new Error("Failed to setData on clipboardEvent");
-      }
-      return;
-    }
-  } catch (error: any) {
-    console.error(error);
-  }
-
-  // (3) if that fails, use document.execCommand
-  if (!copyTextViaExecCommand(text)) {
-    throw new Error(t("errors.copyToSystemClipboardFailed"));
+  // Note that execCommand doesn't allow copying empty strings, so if we're
+  // clearing clipboard using this API, we must copy at least an empty char
+  if (!copied && !copyTextViaExecCommand(text || " ")) {
+    throw new Error("couldn't copy");
  }
 };

 // adapted from https://github.com/zenorocha/clipboard.js/blob/ce79f170aa655c408b6aab33c9472e8e4fa52e19/src/clipboard-action.js#L48
-const copyTextViaExecCommand = (text: string | null) => {
-  // execCommand doesn't allow copying empty strings, so if we're
-  // clearing clipboard using this API, we must copy at least an empty char
-  if (!text) {
-    text = " ";
-  }
-
+const copyTextViaExecCommand = (text: string) => {
  const isRTL = document.documentElement.getAttribute("dir") === "rtl";

  const textarea = document.createElement("textarea");
@@ -11,6 +11,7 @@ import {
  hasBackground,
  hasStrokeStyle,
  hasStrokeWidth,
+  hasText,
 } from "../scene";
 import { SHAPES } from "../shapes";
 import { AppClassProperties, UIAppState, Zoom } from "../types";
@@ -19,7 +20,7 @@ import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
 import { hasStrokeColor } from "../scene/comparisons";
 import { trackEvent } from "../analytics";
-import { hasBoundTextElement, isTextElement } from "../element/typeChecks";
+import { hasBoundTextElement } from "../element/typeChecks";
 import clsx from "clsx";
 import { actionToggleZenMode } from "../actions";
 import { Tooltip } from "./Tooltip";
@@ -34,7 +35,6 @@ import {
  EmbedIcon,
  extraToolsIcon,
  frameToolIcon,
-  mermaidLogoIcon,
  laserPointerToolIcon,
 } from "./icons";
 import { KEYS } from "../keys";
@@ -66,8 +66,7 @@ export const SelectedShapeActions = ({
  const isRTL = document.documentElement.getAttribute("dir") === "rtl";

  const showFillIcons =
-    (hasBackground(appState.activeTool.type) &&
-      !isTransparent(appState.currentItemBackgroundColor)) ||
+    hasBackground(appState.activeTool.type) ||
    targetElements.some(
      (element) =>
        hasBackground(element.type) && !isTransparent(element.backgroundColor),
@@ -124,15 +123,14 @@ export const SelectedShapeActions = ({
        <>{renderAction("changeRoundness")}</>
      )}

-      {(appState.activeTool.type === "text" ||
-        targetElements.some(isTextElement)) && (
+      {(hasText(appState.activeTool.type) ||
+        targetElements.some((element) => hasText(element.type))) && (
        <>
          {renderAction("changeFontSize")}

          {renderAction("changeFontFamily")}

-          {(appState.activeTool.type === "text" ||
-            suppportsHorizontalAlign(targetElements)) &&
+          {suppportsHorizontalAlign(targetElements) &&
            renderAction("changeTextAlign")}
        </>
      )}
@@ -202,8 +200,8 @@ export const SelectedShapeActions = ({
        <fieldset>
          <legend>{t("labels.actions")}</legend>
          <div className="buttonList">
-            {!device.editor.isMobile && renderAction("duplicateSelection")}
-            {!device.editor.isMobile && renderAction("deleteSelectedElements")}
+            {!device.isMobile && renderAction("duplicateSelection")}
+            {!device.isMobile && renderAction("deleteSelectedElements")}
            {renderAction("group")}
            {renderAction("ungroup")}
            {showLinkIcon && renderAction("hyperlink")}
@@ -224,6 +222,7 @@ export const ShapesSwitcher = ({
  app: AppClassProperties;
 }) => {
  const [isExtraToolsMenuOpen, setIsExtraToolsMenuOpen] = useState(false);
+  const device = useDevice();

  const frameToolSelected = activeTool.type === "frame";
  const laserToolSelected = activeTool.type === "laser";
@@ -273,63 +272,111 @@ export const ShapesSwitcher = ({
        );
      })}
      <div className="App-toolbar__divider" />
-
-      <DropdownMenu open={isExtraToolsMenuOpen}>
-        <DropdownMenu.Trigger
-          className={clsx("App-toolbar__extra-tools-trigger", {
-            "App-toolbar__extra-tools-trigger--selected":
-              frameToolSelected ||
-              embeddableToolSelected ||
-              // in collab we're already highlighting the laser button
-              // outside toolbar, so let's not highlight extra-tools button
-              // on top of it
-              (laserToolSelected && !app.props.isCollaborating),
-          })}
-          onToggle={() => setIsExtraToolsMenuOpen(!isExtraToolsMenuOpen)}
-          title={t("toolBar.extraTools")}
-        >
-          {extraToolsIcon}
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content
-          onClickOutside={() => setIsExtraToolsMenuOpen(false)}
-          onSelect={() => setIsExtraToolsMenuOpen(false)}
-          className="App-toolbar__extra-tools-dropdown"
-        >
-          <DropdownMenu.Item
-            onSelect={() => app.setActiveTool({ type: "frame" })}
+      {/* TEMP HACK because dropdown doesn't work well inside mobile toolbar */}
+      {device.isMobile ? (
+        <>
+          <ToolButton
+            className={clsx("Shape", { fillable: false })}
+            type="radio"
            icon={frameToolIcon}
-            shortcut={KEYS.F.toLocaleUpperCase()}
-            data-testid="toolbar-frame"
-            selected={frameToolSelected}
-          >
-            {t("toolBar.frame")}
-          </DropdownMenu.Item>
-          <DropdownMenu.Item
-            onSelect={() => app.setActiveTool({ type: "embeddable" })}
+            checked={activeTool.type === "frame"}
+            name="editor-current-shape"
+            title={`${capitalizeString(
+              t("toolBar.frame"),
+            )} — ${KEYS.F.toLocaleUpperCase()}`}
+            keyBindingLabel={KEYS.F.toLocaleUpperCase()}
+            aria-label={capitalizeString(t("toolBar.frame"))}
+            aria-keyshortcuts={KEYS.F.toLocaleUpperCase()}
+            data-testid={`toolbar-frame`}
+            onPointerDown={({ pointerType }) => {
+              if (!appState.penDetected && pointerType === "pen") {
+                app.togglePenMode(true);
+              }
+            }}
+            onChange={({ pointerType }) => {
+              trackEvent("toolbar", "frame", "ui");
+              app.setActiveTool({ type: "frame" });
+            }}
+            selected={activeTool.type === "frame"}
+          />
+          <ToolButton
+            className={clsx("Shape", { fillable: false })}
+            type="radio"
            icon={EmbedIcon}
-            data-testid="toolbar-embeddable"
-            selected={embeddableToolSelected}
+            checked={activeTool.type === "embeddable"}
+            name="editor-current-shape"
+            title={capitalizeString(t("toolBar.embeddable"))}
+            aria-label={capitalizeString(t("toolBar.embeddable"))}
+            data-testid={`toolbar-embeddable`}
+            onPointerDown={({ pointerType }) => {
+              if (!appState.penDetected && pointerType === "pen") {
+                app.togglePenMode(true);
+              }
+            }}
+            onChange={({ pointerType }) => {
+              trackEvent("toolbar", "embeddable", "ui");
+              app.setActiveTool({ type: "embeddable" });
+            }}
+            selected={activeTool.type === "embeddable"}
+          />
+        </>
+      ) : (
+        <DropdownMenu open={isExtraToolsMenuOpen}>
+          <DropdownMenu.Trigger
+            className={clsx("App-toolbar__extra-tools-trigger", {
+              "App-toolbar__extra-tools-trigger--selected":
+                frameToolSelected ||
+                embeddableToolSelected ||
+                // in collab we're already highlighting the laser button
+                // outside toolbar, so let's not highlight extra-tools button
+                // on top of it
+                (laserToolSelected && !app.props.isCollaborating),
+            })}
+            onToggle={() => setIsExtraToolsMenuOpen(!isExtraToolsMenuOpen)}
+            title={t("toolBar.extraTools")}
          >
-            {t("toolBar.embeddable")}
-          </DropdownMenu.Item>
-          <DropdownMenu.Item
-            onSelect={() => app.setActiveTool({ type: "laser" })}
-            icon={laserPointerToolIcon}
-            data-testid="toolbar-laser"
-            selected={laserToolSelected}
-            shortcut={KEYS.K.toLocaleUpperCase()}
+            {extraToolsIcon}
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content
+            onClickOutside={() => setIsExtraToolsMenuOpen(false)}
+            onSelect={() => setIsExtraToolsMenuOpen(false)}
+            className="App-toolbar__extra-tools-dropdown"
          >
-            {t("toolBar.laser")}
-          </DropdownMenu.Item>
-          <DropdownMenu.Item
-            onSelect={() => app.setOpenDialog("mermaid")}
-            icon={mermaidLogoIcon}
-            data-testid="toolbar-embeddable"
-          >
-            {t("toolBar.mermaidToExcalidraw")}
-          </DropdownMenu.Item>
-        </DropdownMenu.Content>
-      </DropdownMenu>
+            <DropdownMenu.Item
+              onSelect={() => {
+                app.setActiveTool({ type: "frame" });
+              }}
+              icon={frameToolIcon}
+              shortcut={KEYS.F.toLocaleUpperCase()}
+              data-testid="toolbar-frame"
+              selected={frameToolSelected}
+            >
+              {t("toolBar.frame")}
+            </DropdownMenu.Item>
+            <DropdownMenu.Item
+              onSelect={() => {
+                app.setActiveTool({ type: "embeddable" });
+              }}
+              icon={EmbedIcon}
+              data-testid="toolbar-embeddable"
+              selected={embeddableToolSelected}
+            >
+              {t("toolBar.embeddable")}
+            </DropdownMenu.Item>
+            <DropdownMenu.Item
+              onSelect={() => {
+                app.setActiveTool({ type: "laser" });
+              }}
+              icon={laserPointerToolIcon}
+              data-testid="toolbar-laser"
+              selected={laserToolSelected}
+              shortcut={KEYS.K.toLocaleUpperCase()}
+            >
+              {t("toolBar.laser")}
+            </DropdownMenu.Item>
+          </DropdownMenu.Content>
+        </DropdownMenu>
+      )}
    </>
  );
 };
@@ -74,6 +74,7 @@ import {
  MQ_MAX_WIDTH_LANDSCAPE,
  MQ_MAX_WIDTH_PORTRAIT,
  MQ_RIGHT_SIDEBAR_MIN_WIDTH,
+  MQ_SM_MAX_WIDTH,
  POINTER_BUTTON,
  ROUNDNESS,
  SCROLL_TIMEOUT,
@@ -87,7 +88,7 @@ import {
  ZOOM_STEP,
  POINTER_EVENTS,
 } from "../constants";
-import { ExportedElements, exportCanvas, loadFromBlob } from "../data";
+import { exportCanvas, loadFromBlob } from "../data";
 import Library, { distributeLibraryItemsOnSquareGrid } from "../data/library";
 import { restore, restoreElements } from "../data/restore";
 import {
@@ -240,6 +241,7 @@ import {
  isInputLike,
  isToolIcon,
  isWritableElement,
+  resolvablePromise,
  sceneCoordsToViewportCoords,
  tupleToCoors,
  viewportCoordsToSceneCoords,
@@ -316,7 +318,7 @@ import { shouldShowBoundingBox } from "../element/transformHandles";
 import { actionUnlockAllElements } from "../actions/actionElementLock";
 import { Fonts } from "../scene/Fonts";
 import {
-  getFrameChildren,
+  getFrameElements,
  isCursorInFrame,
  bindElementsToFramesAfterDuplication,
  addElementsToFrame,
@@ -364,7 +366,6 @@ import { isSidebarDockedAtom } from "./Sidebar/Sidebar";
 import { StaticCanvas, InteractiveCanvas } from "./canvases";
 import { Renderer } from "../scene/Renderer";
 import { ShapeCache } from "../scene/ShapeCache";
-import MermaidToExcalidraw from "./MermaidToExcalidraw";
 import { LaserToolOverlay } from "./LaserTool/LaserTool";
 import { LaserPathManager } from "./LaserTool/LaserPathManager";
 import {
@@ -379,15 +380,11 @@ const AppContext = React.createContext<AppClassProperties>(null!);
 const AppPropsContext = React.createContext<AppProps>(null!);

 const deviceContextInitialValue = {
-  viewport: {
-    isMobile: false,
-    isLandscape: false,
-  },
-  editor: {
-    isMobile: false,
-    canFitSidebar: false,
-  },
+  isSmScreen: false,
+  isMobile: false,
  isTouchScreen: false,
+  canDeviceFitSidebar: false,
+  isLandscape: false,
 };
 const DeviceContext = React.createContext<Device>(deviceContextInitialValue);
 DeviceContext.displayName = "DeviceContext";
@@ -438,9 +435,6 @@ export const useExcalidrawSetAppState = () =>
 export const useExcalidrawActionManager = () =>
  useContext(ExcalidrawActionManagerContext);

-const supportsResizeObserver =
-  typeof window !== "undefined" && "ResizeObserver" in window;
-
 let didTapTwice: boolean = false;
 let tappedTwiceTimer = 0;
 let isHoldingSpace: boolean = false;
@@ -477,6 +471,7 @@ class App extends React.Component<AppProps, AppState> {
  unmounted: boolean = false;
  actionManager: ActionManager;
  device: Device = deviceContextInitialValue;
+  detachIsMobileMqHandler?: () => void;

  private excalidrawContainerRef = React.createRef<HTMLDivElement>();

@@ -539,7 +534,7 @@ class App extends React.Component<AppProps, AppState> {
    super(props);
    const defaultAppState = getDefaultAppState();
    const {
-      excalidrawAPI,
+      excalidrawRef,
      viewModeEnabled = false,
      zenModeEnabled = false,
      gridModeEnabled = false,
@@ -570,8 +565,14 @@ class App extends React.Component<AppProps, AppState> {
    this.rc = rough.canvas(this.canvas);
    this.renderer = new Renderer(this.scene);

-    if (excalidrawAPI) {
+    if (excalidrawRef) {
+      const readyPromise =
+        ("current" in excalidrawRef && excalidrawRef.current?.readyPromise) ||
+        resolvablePromise<ExcalidrawImperativeAPI>();
+
      const api: ExcalidrawImperativeAPI = {
+        ready: true,
+        readyPromise,
        updateScene: this.updateScene,
        updateLibrary: this.library.updateLibrary,
        addFiles: this.addFiles,
@@ -596,11 +597,12 @@ class App extends React.Component<AppProps, AppState> {
        onPointerDown: (cb) => this.onPointerDownEmitter.on(cb),
        onPointerUp: (cb) => this.onPointerUpEmitter.on(cb),
      } as const;
-      if (typeof excalidrawAPI === "function") {
-        excalidrawAPI(api);
+      if (typeof excalidrawRef === "function") {
+        excalidrawRef(api);
      } else {
-        console.error("excalidrawAPI should be a function!");
+        excalidrawRef.current = api;
      }
+      readyPromise.resolve(api);
    }

    this.excalidrawContainerValue = {
@@ -1040,6 +1042,12 @@ class App extends React.Component<AppProps, AppState> {
        this.state,
      );

+      const { x: x2 } = sceneCoordsToViewportCoords(
+        { sceneX: f.x + f.width, sceneY: f.y + f.height },
+        this.state,
+      );
+
+      const FRAME_NAME_GAP = 20;
      const FRAME_NAME_EDIT_PADDING = 6;

      const reset = () => {
@@ -1084,12 +1092,13 @@ class App extends React.Component<AppProps, AppState> {
              boxShadow: "inset 0 0 0 1px var(--color-primary)",
              fontFamily: "Assistant",
              fontSize: "14px",
-              transform: `translate(-${FRAME_NAME_EDIT_PADDING}px, ${FRAME_NAME_EDIT_PADDING}px)`,
+              transform: `translateY(-${FRAME_NAME_EDIT_PADDING}px)`,
              color: "var(--color-gray-80)",
              overflow: "hidden",
-              maxWidth: `${
-                document.body.clientWidth - x1 - FRAME_NAME_EDIT_PADDING
-              }px`,
+              maxWidth: `${Math.min(
+                x2 - x1 - FRAME_NAME_EDIT_PADDING,
+                document.body.clientWidth - x1 - FRAME_NAME_EDIT_PADDING,
+              )}px`,
            }}
            size={frameNameInEdit.length + 1 || 1}
            dir="auto"
@@ -1111,26 +1120,19 @@ class App extends React.Component<AppProps, AppState> {
          key={f.id}
          style={{
            position: "absolute",
-            // Positioning from bottom so that we don't to either
-            // calculate text height or adjust using transform (which)
-            // messes up input position when editing the frame name.
-            // This makes the positioning deterministic and we can calculate
-            // the same position when rendering to canvas / svg.
-            bottom: `${
-              this.state.height +
-              FRAME_STYLE.nameOffsetY -
-              y1 +
-              this.state.offsetTop
+            top: `${y1 - FRAME_NAME_GAP - this.state.offsetTop}px`,
+            left: `${
+              x1 -
+              this.state.offsetLeft -
+              (this.state.editingFrame === f.id ? FRAME_NAME_EDIT_PADDING : 0)
            }px`,
-            left: `${x1 - this.state.offsetLeft}px`,
            zIndex: 2,
-            fontSize: FRAME_STYLE.nameFontSize,
+            fontSize: "14px",
            color: isDarkTheme
-              ? FRAME_STYLE.nameColorDarkTheme
-              : FRAME_STYLE.nameColorLightTheme,
-            lineHeight: FRAME_STYLE.nameLineHeight,
+              ? "var(--color-gray-60)"
+              : "var(--color-gray-50)",
            width: "max-content",
-            maxWidth: `${f.width}px`,
+            maxWidth: `${x2 - x1 + FRAME_NAME_EDIT_PADDING * 2}px`,
            overflow: f.id === this.state.editingFrame ? "visible" : "hidden",
            whiteSpace: "nowrap",
            textOverflow: "ellipsis",
@@ -1173,29 +1175,24 @@ class App extends React.Component<AppProps, AppState> {
        pendingImageElementId: this.state.pendingImageElementId,
      });

-    const shouldBlockPointerEvents =
-      !(
-        this.state.editingElement && isLinearElement(this.state.editingElement)
-      ) &&
-      (this.state.selectionElement ||
-        this.state.draggingElement ||
-        this.state.resizingElement ||
-        (this.state.activeTool.type === "laser" &&
-          // technically we can just test on this once we make it more safe
-          this.state.cursorButton === "down") ||
-        (this.state.editingElement &&
-          !isTextElement(this.state.editingElement)));
-
    return (
      <div
        className={clsx("excalidraw excalidraw-container", {
          "excalidraw--view-mode": this.state.viewModeEnabled,
-          "excalidraw--mobile": this.device.editor.isMobile,
+          "excalidraw--mobile": this.device.isMobile,
        })}
        style={{
-          ["--ui-pointerEvents" as any]: shouldBlockPointerEvents
-            ? POINTER_EVENTS.disabled
-            : POINTER_EVENTS.enabled,
+          ["--ui-pointerEvents" as any]:
+            this.state.selectionElement ||
+            this.state.draggingElement ||
+            this.state.resizingElement ||
+            (this.state.activeTool.type === "laser" &&
+              // technically we can just test on this once we make it more safe
+              this.state.cursorButton === "down") ||
+            (this.state.editingElement &&
+              !isTextElement(this.state.editingElement))
+              ? POINTER_EVENTS.disabled
+              : POINTER_EVENTS.enabled,
        }}
        ref={this.excalidrawContainerRef}
        onDrop={this.handleAppOnDrop}
@@ -1248,11 +1245,7 @@ class App extends React.Component<AppProps, AppState> {
                          isCollaborating={this.props.isCollaborating}
                        >
                          {this.props.children}
-                          {this.state.openDialog === "mermaid" && (
-                            <MermaidToExcalidraw />
-                          )}
                        </LayerUI>
-
                        <div className="excalidraw-textEditorContainer" />
                        <div className="excalidraw-contextMenuContainer" />
                        <div className="excalidraw-eye-dropper-container" />
@@ -1282,12 +1275,6 @@ class App extends React.Component<AppProps, AppState> {
                            top={this.state.contextMenu.top}
                            left={this.state.contextMenu.left}
                            actionManager={this.actionManager}
-                            onClose={(callback) => {
-                              this.setState({ contextMenu: null }, () => {
-                                this.focusContainer();
-                                callback?.();
-                              });
-                            }}
                          />
                        )}
                        <StaticCanvas
@@ -1367,8 +1354,7 @@ class App extends React.Component<AppProps, AppState> {

  public onExportImage = async (
    type: keyof typeof EXPORT_IMAGE_TYPES,
-    elements: ExportedElements,
-    opts: { exportingFrame: ExcalidrawFrameElement | null },
+    elements: readonly NonDeletedExcalidrawElement[],
  ) => {
    trackEvent("export", type, "ui");
    const fileHandle = await exportCanvas(
@@ -1380,7 +1366,6 @@ class App extends React.Component<AppProps, AppState> {
        exportBackground: this.state.exportBackground,
        name: this.state.name,
        viewBackgroundColor: this.state.viewBackgroundColor,
-        exportingFrame: opts.exportingFrame,
      },
    )
      .catch(muteFSAbortError)
@@ -1661,62 +1646,20 @@ class App extends React.Component<AppProps, AppState> {
    });
  };

-  private isMobileBreakpoint = (width: number, height: number) => {
-    return (
-      width < MQ_MAX_WIDTH_PORTRAIT ||
-      (height < MQ_MAX_HEIGHT_LANDSCAPE && width < MQ_MAX_WIDTH_LANDSCAPE)
-    );
-  };
-
-  private refreshViewportBreakpoints = () => {
-    const container = this.excalidrawContainerRef.current;
-    if (!container) {
-      return;
-    }
-
-    const { clientWidth: viewportWidth, clientHeight: viewportHeight } =
-      document.body;
-
-    const prevViewportState = this.device.viewport;
-
-    const nextViewportState = updateObject(prevViewportState, {
-      isLandscape: viewportWidth > viewportHeight,
-      isMobile: this.isMobileBreakpoint(viewportWidth, viewportHeight),
-    });
-
-    if (prevViewportState !== nextViewportState) {
-      this.device = { ...this.device, viewport: nextViewportState };
-      return true;
-    }
-    return false;
-  };
-
-  private refreshEditorBreakpoints = () => {
-    const container = this.excalidrawContainerRef.current;
-    if (!container) {
-      return;
-    }
-
-    const { width: editorWidth, height: editorHeight } =
-      container.getBoundingClientRect();
-
+  private refreshDeviceState = (container: HTMLDivElement) => {
+    const { width, height } = container.getBoundingClientRect();
    const sidebarBreakpoint =
      this.props.UIOptions.dockedSidebarBreakpoint != null
        ? this.props.UIOptions.dockedSidebarBreakpoint
        : MQ_RIGHT_SIDEBAR_MIN_WIDTH;
-
-    const prevEditorState = this.device.editor;
-
-    const nextEditorState = updateObject(prevEditorState, {
-      isMobile: this.isMobileBreakpoint(editorWidth, editorHeight),
-      canFitSidebar: editorWidth > sidebarBreakpoint,
+    this.device = updateObject(this.device, {
+      isLandscape: width > height,
+      isSmScreen: width < MQ_SM_MAX_WIDTH,
+      isMobile:
+        width < MQ_MAX_WIDTH_PORTRAIT ||
+        (height < MQ_MAX_HEIGHT_LANDSCAPE && width < MQ_MAX_WIDTH_LANDSCAPE),
+      canDeviceFitSidebar: width > sidebarBreakpoint,
    });
-
-    if (prevEditorState !== nextEditorState) {
-      this.device = { ...this.device, editor: nextEditorState };
-      return true;
-    }
-    return false;
  };

  public async componentDidMount() {
@@ -1758,21 +1701,52 @@ class App extends React.Component<AppProps, AppState> {
    }

    if (
+      this.excalidrawContainerRef.current &&
      // bounding rects don't work in tests so updating
      // the state on init would result in making the test enviro run
      // in mobile breakpoint (0 width/height), making everything fail
      !isTestEnv()
    ) {
-      this.refreshViewportBreakpoints();
-      this.refreshEditorBreakpoints();
+      this.refreshDeviceState(this.excalidrawContainerRef.current);
    }

-    if (supportsResizeObserver && this.excalidrawContainerRef.current) {
+    if ("ResizeObserver" in window && this.excalidrawContainerRef?.current) {
      this.resizeObserver = new ResizeObserver(() => {
-        this.refreshEditorBreakpoints();
+        // recompute device dimensions state
+        // ---------------------------------------------------------------------
+        this.refreshDeviceState(this.excalidrawContainerRef.current!);
+        // refresh offsets
+        // ---------------------------------------------------------------------
        this.updateDOMRect();
      });
      this.resizeObserver?.observe(this.excalidrawContainerRef.current);
+    } else if (window.matchMedia) {
+      const mdScreenQuery = window.matchMedia(
+        `(max-width: ${MQ_MAX_WIDTH_PORTRAIT}px), (max-height: ${MQ_MAX_HEIGHT_LANDSCAPE}px) and (max-width: ${MQ_MAX_WIDTH_LANDSCAPE}px)`,
+      );
+      const smScreenQuery = window.matchMedia(
+        `(max-width: ${MQ_SM_MAX_WIDTH}px)`,
+      );
+      const canDeviceFitSidebarMediaQuery = window.matchMedia(
+        `(min-width: ${
+          // NOTE this won't update if a different breakpoint is supplied
+          // after mount
+          this.props.UIOptions.dockedSidebarBreakpoint != null
+            ? this.props.UIOptions.dockedSidebarBreakpoint
+            : MQ_RIGHT_SIDEBAR_MIN_WIDTH
+        }px)`,
+      );
+      const handler = () => {
+        this.excalidrawContainerRef.current!.getBoundingClientRect();
+        this.device = updateObject(this.device, {
+          isSmScreen: smScreenQuery.matches,
+          isMobile: mdScreenQuery.matches,
+          canDeviceFitSidebar: canDeviceFitSidebarMediaQuery.matches,
+        });
+      };
+      mdScreenQuery.addListener(handler);
+      this.detachIsMobileMqHandler = () =>
+        mdScreenQuery.removeListener(handler);
    }

    const searchParams = new URLSearchParams(window.location.search.slice(1));
@@ -1817,11 +1791,6 @@ class App extends React.Component<AppProps, AppState> {
    this.scene
      .getElementsIncludingDeleted()
      .forEach((element) => ShapeCache.delete(element));
-    this.refreshViewportBreakpoints();
-    this.updateDOMRect();
-    if (!supportsResizeObserver) {
-      this.refreshEditorBreakpoints();
-    }
    this.setState({});
  });

@@ -1875,6 +1844,7 @@ class App extends React.Component<AppProps, AppState> {
      false,
    );

+    this.detachIsMobileMqHandler?.();
    window.removeEventListener(EVENT.MESSAGE, this.onWindowMessage, false);
  }

@@ -1959,10 +1929,11 @@ class App extends React.Component<AppProps, AppState> {
    }

    if (
+      this.excalidrawContainerRef.current &&
      prevProps.UIOptions.dockedSidebarBreakpoint !==
-      this.props.UIOptions.dockedSidebarBreakpoint
+        this.props.UIOptions.dockedSidebarBreakpoint
    ) {
-      this.refreshEditorBreakpoints();
+      this.refreshDeviceState(this.excalidrawContainerRef.current);
    }

    if (
@@ -2139,7 +2110,7 @@ class App extends React.Component<AppProps, AppState> {
    if (!isExcalidrawActive || isWritableElement(event.target)) {
      return;
    }
-    this.actionManager.executeAction(actionCut, "keyboard", event);
+    this.cutAll();
    event.preventDefault();
    event.stopPropagation();
  });
@@ -2151,11 +2122,19 @@ class App extends React.Component<AppProps, AppState> {
    if (!isExcalidrawActive || isWritableElement(event.target)) {
      return;
    }
-    this.actionManager.executeAction(actionCopy, "keyboard", event);
+    this.copyAll();
    event.preventDefault();
    event.stopPropagation();
  });

+  private cutAll = () => {
+    this.actionManager.executeAction(actionCut, "keyboard");
+  };
+
+  private copyAll = () => {
+    this.actionManager.executeAction(actionCopy, "keyboard");
+  };
+
  private static resetTapTwice() {
    didTapTwice = false;
  }
@@ -2216,8 +2195,8 @@ class App extends React.Component<AppProps, AppState> {
  };

  public pasteFromClipboard = withBatchedUpdates(
-    async (event: ClipboardEvent) => {
-      const isPlainPaste = !!IS_PLAIN_PASTE;
+    async (event: ClipboardEvent | null) => {
+      const isPlainPaste = !!(IS_PLAIN_PASTE && event);

      // #686
      const target = document.activeElement;
@@ -2347,12 +2326,11 @@ class App extends React.Component<AppProps, AppState> {
    },
  );

-  addElementsFromPasteOrLibrary = (opts: {
+  private addElementsFromPasteOrLibrary = (opts: {
    elements: readonly ExcalidrawElement[];
    files: BinaryFiles | null;
    position: { clientX: number; clientY: number } | "cursor" | "center";
    retainSeed?: boolean;
-    fitToContent?: boolean;
  }) => {
    const elements = restoreElements(opts.elements, null, undefined);
    const [minX, minY, maxX, maxY] = getCommonBounds(elements);
@@ -2428,7 +2406,7 @@ class App extends React.Component<AppProps, AppState> {
        // from library, not when pasting from clipboard. Alas.
        openSidebar:
          this.state.openSidebar &&
-          this.device.editor.canFitSidebar &&
+          this.device.canDeviceFitSidebar &&
          jotaiStore.get(isSidebarDockedAtom)
            ? this.state.openSidebar
            : null,
@@ -2457,12 +2435,6 @@ class App extends React.Component<AppProps, AppState> {
      },
    );
    this.setActiveTool({ type: "selection" });
-
-    if (opts.fitToContent) {
-      this.scrollToContent(newElements, {
-        fitToContent: true,
-      });
-    }
  };

  // TODO rewrite this to paste both text & images at the same time if
@@ -2582,18 +2554,12 @@ class App extends React.Component<AppProps, AppState> {

        const lineHeight = getDefaultLineHeight(textElementProps.fontFamily);
        if (text.length) {
-          const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
-            x,
-            y: currentY,
-          });
-
          const element = newTextElement({
            ...textElementProps,
            x,
            y: currentY,
            text,
            lineHeight,
-            frameId: topLayerFrame ? topLayerFrame.id : null,
          });
          acc.push(element);
          currentY += element.height + LINE_GAP;
@@ -2642,7 +2608,7 @@ class App extends React.Component<AppProps, AppState> {
      !isPlainPaste &&
      textElements.length > 1 &&
      PLAIN_PASTE_TOAST_SHOWN === false &&
-      !this.device.editor.isMobile
+      !this.device.isMobile
    ) {
      this.setToast({
        message: t("toast.pasteAsSingleElement", {
@@ -2676,7 +2642,7 @@ class App extends React.Component<AppProps, AppState> {
      trackEvent(
        "toolbar",
        "toggleLock",
-        `${source} (${this.device.editor.isMobile ? "mobile" : "desktop"})`,
+        `${source} (${this.device.isMobile ? "mobile" : "desktop"})`,
      );
    }
    this.setState((prevState) => {
@@ -2716,7 +2682,7 @@ class App extends React.Component<AppProps, AppState> {
    });
  };

-  togglePenMode = (force: boolean | null) => {
+  togglePenMode = (force?: boolean) => {
    this.setState((prevState) => {
      return {
        penMode: force ?? !prevState.penMode,
@@ -3171,9 +3137,7 @@ class App extends React.Component<AppProps, AppState> {
            trackEvent(
              "toolbar",
              shape,
-              `keyboard (${
-                this.device.editor.isMobile ? "mobile" : "desktop"
-              })`,
+              `keyboard (${this.device.isMobile ? "mobile" : "desktop"})`,
            );
          }
          this.setActiveTool({ type: shape });
@@ -3340,10 +3304,6 @@ class App extends React.Component<AppProps, AppState> {
    });
  };

-  setOpenDialog = (dialogType: AppState["openDialog"]) => {
-    this.setState({ openDialog: dialogType });
-  };
-
  private setCursor = (cursor: string) => {
    setCursor(this.interactiveCanvas, cursor);
  };
@@ -3614,6 +3574,11 @@ class App extends React.Component<AppProps, AppState> {
    return getElementsAtPosition(elements, (element) =>
      hitTest(element, this.state, this.frameNameBoundsCache, x, y),
    ).filter((element) => {
+      // arrows don't clip even if they're children of frames,
+      // so always allow hitbox regardless of beinging contained in frame
+      if (isArrowElement(element)) {
+        return true;
+      }
      // hitting a frame's element from outside the frame is not considered a hit
      const containingFrame = getContainingFrame(element);
      return containingFrame &&
@@ -3785,9 +3750,32 @@ class App extends React.Component<AppProps, AppState> {
      return;
    }

+    let { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords(
+      event,
+      this.state,
+    );
+
    const selectedElements = this.scene.getSelectedElements(this.state);

    if (selectedElements.length === 1 && isLinearElement(selectedElements[0])) {
+      if (!event[KEYS.CTRL_OR_CMD]) {
+        // If double clicked without any ctrl/cmd modifier on top of a point,
+        // toggle split mode for that point. Else, treat as regular double click.
+        const pointUnderCursorIndex =
+          LinearElementEditor.getPointIndexUnderCursor(
+            selectedElements[0],
+            this.state.zoom,
+            sceneX,
+            sceneY,
+          );
+        if (pointUnderCursorIndex >= 0) {
+          LinearElementEditor.toggleSegmentSplitAtIndex(
+            selectedElements[0],
+            pointUnderCursorIndex,
+          );
+          return;
+        }
+      }
      if (
        event[KEYS.CTRL_OR_CMD] &&
        (!this.state.editingLinearElement ||
@@ -3811,11 +3799,6 @@ class App extends React.Component<AppProps, AppState> {

    resetCursor(this.interactiveCanvas);

-    let { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords(
-      event,
-      this.state,
-    );
-
    const selectedGroupIds = getSelectedGroupIds(this.state);

    if (selectedGroupIds.length > 0) {
@@ -3907,7 +3890,7 @@ class App extends React.Component<AppProps, AppState> {
          element,
          this.state,
          [scenePointer.x, scenePointer.y],
-          this.device.editor.isMobile,
+          this.device.isMobile,
        )
      );
    });
@@ -3939,7 +3922,7 @@ class App extends React.Component<AppProps, AppState> {
      this.hitLinkElement,
      this.state,
      [lastPointerDownCoords.x, lastPointerDownCoords.y],
-      this.device.editor.isMobile,
+      this.device.isMobile,
    );
    const lastPointerUpCoords = viewportCoordsToSceneCoords(
      this.lastPointerUpEvent!,
@@ -3949,7 +3932,7 @@ class App extends React.Component<AppProps, AppState> {
      this.hitLinkElement,
      this.state,
      [lastPointerUpCoords.x, lastPointerUpCoords.y],
-      this.device.editor.isMobile,
+      this.device.isMobile,
    );
    if (lastPointerDownHittingLinkIcon && lastPointerUpHittingLinkIcon) {
      let url = this.hitLinkElement.link;
@@ -4294,7 +4277,6 @@ class App extends React.Component<AppProps, AppState> {
      scenePointer.x,
      scenePointer.y,
    );
-
    this.hitLinkElement = this.getElementLinkAtPosition(
      scenePointer,
      hitElement,
@@ -4740,13 +4722,9 @@ class App extends React.Component<AppProps, AppState> {
      });

      const { x, y } = viewportCoordsToSceneCoords(event, this.state);
-
-      const frame = this.getTopLayerFrameAtSceneCoords({ x, y });
-
      mutateElement(pendingImageElement, {
        x,
        y,
-        frameId: frame ? frame.id : null,
      });
    } else if (this.state.activeTool.type === "freedraw") {
      this.handleFreeDrawElementOnPointerDown(
@@ -4815,7 +4793,7 @@ class App extends React.Component<AppProps, AppState> {
    );
    const clicklength =
      event.timeStamp - (this.lastPointerDownEvent?.timeStamp ?? 0);
-    if (this.device.editor.isMobile && clicklength < 300) {
+    if (this.device.isMobile && clicklength < 300) {
      const hitElement = this.getElementAtPosition(
        scenePointer.x,
        scenePointer.y,
@@ -5333,7 +5311,7 @@ class App extends React.Component<AppProps, AppState> {

                // if hitElement is frame, deselect all of its elements if they are selected
                if (hitElement.type === "frame") {
-                  getFrameChildren(
+                  getFrameElements(
                    previouslySelectedElements,
                    hitElement.id,
                  ).forEach((element) => {
@@ -5613,11 +5591,9 @@ class App extends React.Component<AppProps, AppState> {
  private createImageElement = ({
    sceneX,
    sceneY,
-    addToFrameUnderCursor = true,
  }: {
    sceneX: number;
    sceneY: number;
-    addToFrameUnderCursor?: boolean;
  }) => {
    const [gridX, gridY] = getGridPoint(
      sceneX,
@@ -5627,12 +5603,10 @@ class App extends React.Component<AppProps, AppState> {
        : this.state.gridSize,
    );

-    const topLayerFrame = addToFrameUnderCursor
-      ? this.getTopLayerFrameAtSceneCoords({
-          x: gridX,
-          y: gridY,
-        })
-      : null;
+    const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
+      x: gridX,
+      y: gridY,
+    });

    const element = newImageElement({
      type: "image",
@@ -7562,7 +7536,6 @@ class App extends React.Component<AppProps, AppState> {
      const imageElement = this.createImageElement({
        sceneX: x,
        sceneY: y,
-        addToFrameUnderCursor: false,
      });

      if (insertOnCanvasDirectly) {
@@ -8202,7 +8175,7 @@ class App extends React.Component<AppProps, AppState> {
    >();

    selectedFrames.forEach((frame) => {
-      const elementsInFrame = getFrameChildren(
+      const elementsInFrame = getFrameElements(
        this.scene.getNonDeletedElements(),
        frame.id,
      );
@@ -8272,7 +8245,7 @@ class App extends React.Component<AppProps, AppState> {

      const elementsToHighlight = new Set<ExcalidrawElement>();
      selectedFrames.forEach((frame) => {
-        const elementsInFrame = getFrameChildren(
+        const elementsInFrame = getFrameElements(
          this.scene.getNonDeletedElements(),
          frame.id,
        );
@@ -98,7 +98,7 @@ export const ColorInput = ({
        }}
      />
      {/* TODO reenable on mobile with a better UX */}
-      {!device.editor.isMobile && (
+      {!device.isMobile && (
        <>
          <div
            style={{
@@ -80,7 +80,7 @@ const ColorPickerPopupContent = ({
  );

  const { container } = useExcalidrawContainer();
-  const device = useDevice();
+  const { isMobile, isLandscape } = useDevice();

  const colorInputJSX = (
    <div>
@@ -136,16 +136,8 @@ const ColorPickerPopupContent = ({
          updateData({ openPopup: null });
          setActiveColorPickerSection(null);
        }}
-        side={
-          device.editor.isMobile && !device.viewport.isLandscape
-            ? "bottom"
-            : "right"
-        }
-        align={
-          device.editor.isMobile && !device.viewport.isLandscape
-            ? "center"
-            : "start"
-        }
+        side={isMobile && !isLandscape ? "bottom" : "right"}
+        align={isMobile && !isLandscape ? "center" : "start"}
        alignOffset={-16}
        sideOffset={20}
        style={{
@@ -55,7 +55,6 @@ export const TopPicks = ({
          type="button"
          title={color}
          onClick={() => onChange(color)}
-          data-testid={`color-top-pick-${color}`}
        >
          <div className="color-picker__button-outline" />
        </button>
@@ -9,7 +9,11 @@ import {
 } from "../actions/shortcuts";
 import { Action } from "../actions/types";
 import { ActionManager } from "../actions/manager";
-import { useExcalidrawAppState, useExcalidrawElements } from "./App";
+import {
+  useExcalidrawAppState,
+  useExcalidrawElements,
+  useExcalidrawSetAppState,
+} from "./App";
 import React from "react";

 export type ContextMenuItem = typeof CONTEXT_MENU_SEPARATOR | Action;
@@ -21,14 +25,14 @@ type ContextMenuProps = {
  items: ContextMenuItems;
  top: number;
  left: number;
-  onClose: (callback?: () => void) => void;
 };

 export const CONTEXT_MENU_SEPARATOR = "separator";

 export const ContextMenu = React.memo(
-  ({ actionManager, items, top, left, onClose }: ContextMenuProps) => {
+  ({ actionManager, items, top, left }: ContextMenuProps) => {
    const appState = useExcalidrawAppState();
+    const setAppState = useExcalidrawSetAppState();
    const elements = useExcalidrawElements();

    const filteredItems = items.reduce((acc: ContextMenuItem[], item) => {
@@ -50,9 +54,7 @@ export const ContextMenu = React.memo(

    return (
      <Popover
-        onCloseRequest={() => {
-          onClose();
-        }}
+        onCloseRequest={() => setAppState({ contextMenu: null })}
        top={top}
        left={left}
        fitInViewport={true}
@@ -100,7 +102,7 @@ export const ContextMenu = React.memo(
                  // we need update state before executing the action in case
                  // the action uses the appState it's being passed (that still
                  // contains a defined contextMenu) to return the next state.
-                  onClose(() => {
+                  setAppState({ contextMenu: null }, () => {
                    actionManager.executeAction(item, "contextMenu");
                  });
                }}
@@ -33,16 +33,14 @@
      color: var(--color-gray-40);
    }

+    @include isMobile {
+      top: 1.25rem;
+      right: 1.25rem;
+    }
+
    svg {
      width: 1.5rem;
      height: 1.5rem;
    }
  }
-
-  .Dialog--fullscreen {
-    .Dialog__close {
-      top: 1.25rem;
-      right: 1.25rem;
-    }
-  }
 }
@@ -49,7 +49,7 @@ export const Dialog = (props: DialogProps) => {
  const [islandNode, setIslandNode] = useCallbackRefState<HTMLDivElement>();
  const [lastActiveElement] = useState(document.activeElement);
  const { id } = useExcalidrawContainer();
-  const isFullscreen = useDevice().viewport.isMobile;
+  const device = useDevice();

  useEffect(() => {
    if (!islandNode) {
@@ -101,9 +101,7 @@ export const Dialog = (props: DialogProps) => {

  return (
    <Modal
-      className={clsx("Dialog", props.className, {
-        "Dialog--fullscreen": isFullscreen,
-      })}
+      className={clsx("Dialog", props.className)}
      labelledBy="dialog-title"
      maxWidth={getDialogSize(props.size)}
      onCloseRequest={onClose}
@@ -121,7 +119,7 @@ export const Dialog = (props: DialogProps) => {
          title={t("buttons.close")}
          aria-label={t("buttons.close")}
        >
-          {isFullscreen ? back : CloseIcon}
+          {device.isMobile ? back : CloseIcon}
        </button>
        <div className="Dialog__content">{props.children}</div>
      </Island>
@@ -254,6 +254,7 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
              label={t("helpDialog.movePageLeftRight")}
              shortcuts={["Shift+PgUp/PgDn"]}
            />
+            <Shortcut label={t("buttons.fullScreen")} shortcuts={["F"]} />
            <Shortcut
              label={t("buttons.zenMode")}
              shortcuts={[getShortcutKey("Alt+Z")]}
@@ -22,7 +22,7 @@ const getHints = ({ appState, isMobile, device, app }: HintViewerProps) => {
  const { activeTool, isResizing, isRotating, lastPointerDownWith } = appState;
  const multiMode = appState.multiElement !== null;

-  if (appState.openSidebar && !device.editor.canFitSidebar) {
+  if (appState.openSidebar && !device.canDeviceFitSidebar) {
    return null;
  }

@@ -22,7 +22,7 @@ import { canvasToBlob } from "../data/blob";
 import { nativeFileSystemSupported } from "../data/filesystem";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
-import { isSomeElementSelected } from "../scene";
+import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { exportToCanvas } from "../packages/utils";

 import { copyIcon, downloadIcon, helpIcon } from "./icons";
@@ -34,8 +34,6 @@ import { Tooltip } from "./Tooltip";
 import "./ImageExportDialog.scss";
 import { useAppProps } from "./App";
 import { FilledButton } from "./FilledButton";
-import { cloneJSON } from "../utils";
-import { prepareElementsForExport } from "../data";

 const supportsContextFilters =
  "filter" in document.createElement("canvas").getContext("2d")!;
@@ -53,47 +51,44 @@ export const ErrorCanvasPreview = () => {
 };

 type ImageExportModalProps = {
-  appStateSnapshot: Readonly<UIAppState>;
-  elementsSnapshot: readonly NonDeletedExcalidrawElement[];
+  appState: UIAppState;
+  elements: readonly NonDeletedExcalidrawElement[];
  files: BinaryFiles;
  actionManager: ActionManager;
  onExportImage: AppClassProperties["onExportImage"];
 };

 const ImageExportModal = ({
-  appStateSnapshot,
-  elementsSnapshot,
+  appState,
+  elements,
  files,
  actionManager,
  onExportImage,
 }: ImageExportModalProps) => {
-  const hasSelection = isSomeElementSelected(
-    elementsSnapshot,
-    appStateSnapshot,
-  );
-
  const appProps = useAppProps();
-  const [projectName, setProjectName] = useState(appStateSnapshot.name);
-  const [exportSelectionOnly, setExportSelectionOnly] = useState(hasSelection);
+  const [projectName, setProjectName] = useState(appState.name);
+
+  const someElementIsSelected = isSomeElementSelected(elements, appState);
+
+  const [exportSelected, setExportSelected] = useState(someElementIsSelected);
  const [exportWithBackground, setExportWithBackground] = useState(
-    appStateSnapshot.exportBackground,
+    appState.exportBackground,
  );
  const [exportDarkMode, setExportDarkMode] = useState(
-    appStateSnapshot.exportWithDarkMode,
+    appState.exportWithDarkMode,
  );
-  const [embedScene, setEmbedScene] = useState(
-    appStateSnapshot.exportEmbedScene,
-  );
-  const [exportScale, setExportScale] = useState(appStateSnapshot.exportScale);
+  const [embedScene, setEmbedScene] = useState(appState.exportEmbedScene);
+  const [exportScale, setExportScale] = useState(appState.exportScale);

  const previewRef = useRef<HTMLDivElement>(null);
  const [renderError, setRenderError] = useState<Error | null>(null);

-  const { exportedElements, exportingFrame } = prepareElementsForExport(
-    elementsSnapshot,
-    appStateSnapshot,
-    exportSelectionOnly,
-  );
+  const exportedElements = exportSelected
+    ? getSelectedElements(elements, appState, {
+        includeBoundTextElement: true,
+        includeElementsInFrames: true,
+      })
+    : elements;

  useEffect(() => {
    const previewNode = previewRef.current;
@@ -107,18 +102,10 @@ const ImageExportModal = ({
    }
    exportToCanvas({
      elements: exportedElements,
-      appState: {
-        ...appStateSnapshot,
-        name: projectName,
-        exportBackground: exportWithBackground,
-        exportWithDarkMode: exportDarkMode,
-        exportScale,
-        exportEmbedScene: embedScene,
-      },
+      appState,
      files,
      exportPadding: DEFAULT_EXPORT_PADDING,
      maxWidthOrHeight: Math.max(maxWidth, maxHeight),
-      exportingFrame,
    })
      .then((canvas) => {
        setRenderError(null);
@@ -132,17 +119,7 @@ const ImageExportModal = ({
        console.error(error);
        setRenderError(error);
      });
-  }, [
-    appStateSnapshot,
-    files,
-    exportedElements,
-    exportingFrame,
-    projectName,
-    exportWithBackground,
-    exportDarkMode,
-    exportScale,
-    embedScene,
-  ]);
+  }, [appState, files, exportedElements]);

  return (
    <div className="ImageExportModal">
@@ -159,8 +136,7 @@ const ImageExportModal = ({
              value={projectName}
              style={{ width: "30ch" }}
              disabled={
-                typeof appProps.name !== "undefined" ||
-                appStateSnapshot.viewModeEnabled
+                typeof appProps.name !== "undefined" || appState.viewModeEnabled
              }
              onChange={(event) => {
                setProjectName(event.target.value);
@@ -176,16 +152,16 @@ const ImageExportModal = ({
      </div>
      <div className="ImageExportModal__settings">
        <h3>{t("imageExportDialog.header")}</h3>
-        {hasSelection && (
+        {someElementIsSelected && (
          <ExportSetting
            label={t("imageExportDialog.label.onlySelected")}
            name="exportOnlySelected"
          >
            <Switch
              name="exportOnlySelected"
-              checked={exportSelectionOnly}
+              checked={exportSelected}
              onChange={(checked) => {
-                setExportSelectionOnly(checked);
+                setExportSelected(checked);
              }}
            />
          </ExportSetting>
@@ -267,9 +243,7 @@ const ImageExportModal = ({
            className="ImageExportModal__settings__buttons__button"
            label={t("imageExportDialog.title.exportToPng")}
            onClick={() =>
-              onExportImage(EXPORT_IMAGE_TYPES.png, exportedElements, {
-                exportingFrame,
-              })
+              onExportImage(EXPORT_IMAGE_TYPES.png, exportedElements)
            }
            startIcon={downloadIcon}
          >
@@ -279,9 +253,7 @@ const ImageExportModal = ({
            className="ImageExportModal__settings__buttons__button"
            label={t("imageExportDialog.title.exportToSvg")}
            onClick={() =>
-              onExportImage(EXPORT_IMAGE_TYPES.svg, exportedElements, {
-                exportingFrame,
-              })
+              onExportImage(EXPORT_IMAGE_TYPES.svg, exportedElements)
            }
            startIcon={downloadIcon}
          >
@@ -292,9 +264,7 @@ const ImageExportModal = ({
              className="ImageExportModal__settings__buttons__button"
              label={t("imageExportDialog.title.copyPngToClipboard")}
              onClick={() =>
-                onExportImage(EXPORT_IMAGE_TYPES.clipboard, exportedElements, {
-                  exportingFrame,
-                })
+                onExportImage(EXPORT_IMAGE_TYPES.clipboard, exportedElements)
              }
              startIcon={copyIcon}
            >
@@ -355,20 +325,15 @@ export const ImageExportDialog = ({
  onExportImage: AppClassProperties["onExportImage"];
  onCloseRequest: () => void;
 }) => {
-  // we need to take a snapshot so that the exported state can't be modified
-  // while the dialog is open
-  const [{ appStateSnapshot, elementsSnapshot }] = useState(() => {
-    return {
-      appStateSnapshot: cloneJSON(appState),
-      elementsSnapshot: cloneJSON(elements),
-    };
-  });
+  if (appState.openDialog !== "imageExport") {
+    return null;
+  }

  return (
    <Dialog onCloseRequest={onCloseRequest} size="wide" title={false}>
      <ImageExportModal
-        elementsSnapshot={elementsSnapshot}
-        appStateSnapshot={appStateSnapshot}
+        elements={elements}
+        appState={appState}
        files={files}
        actionManager={actionManager}
        onExportImage={onExportImage}
@@ -66,7 +66,7 @@ interface LayerUIProps {
  elements: readonly NonDeletedExcalidrawElement[];
  onLockToggle: () => void;
  onHandToolToggle: () => void;
-  onPenModeToggle: AppClassProperties["togglePenMode"];
+  onPenModeToggle: () => void;
  showExitZenModeBtn: boolean;
  langCode: Language["code"];
  renderTopRightUI?: ExcalidrawProps["renderTopRightUI"];
@@ -161,10 +161,7 @@ const LayerUI = ({
  };

  const renderImageExportDialog = () => {
-    if (
-      !UIOptions.canvasActions.saveAsImage ||
-      appState.openDialog !== "imageExport"
-    ) {
+    if (!UIOptions.canvasActions.saveAsImage) {
      return null;
    }

@@ -249,7 +246,7 @@ const LayerUI = ({
                      >
                        <HintViewer
                          appState={appState}
-                          isMobile={device.editor.isMobile}
+                          isMobile={device.isMobile}
                          device={device}
                          app={app}
                        />
@@ -258,7 +255,7 @@ const LayerUI = ({
                          <PenModeButton
                            zenModeEnabled={appState.zenModeEnabled}
                            checked={appState.penMode}
-                            onChange={() => onPenModeToggle(null)}
+                            onChange={onPenModeToggle}
                            title={t("toolBar.penMode")}
                            penDetected={appState.penDetected}
                          />
@@ -317,7 +314,7 @@ const LayerUI = ({
            )}
          >
            <UserList collaborators={appState.collaborators} />
-            {renderTopRightUI?.(device.editor.isMobile, appState)}
+            {renderTopRightUI?.(device.isMobile, appState)}
            {!appState.viewModeEnabled &&
              // hide button when sidebar docked
              (!isSidebarDocked ||
@@ -338,7 +335,7 @@ const LayerUI = ({
          trackEvent(
            "sidebar",
            `toggleDock (${docked ? "dock" : "undock"})`,
-            `(${device.editor.isMobile ? "mobile" : "desktop"})`,
+            `(${device.isMobile ? "mobile" : "desktop"})`,
          );
        }}
      />
@@ -366,7 +363,7 @@ const LayerUI = ({
            trackEvent(
              "sidebar",
              `${DEFAULT_SIDEBAR.name} (open)`,
-              `button (${device.editor.isMobile ? "mobile" : "desktop"})`,
+              `button (${device.isMobile ? "mobile" : "desktop"})`,
            );
          }
        }}
@@ -383,7 +380,7 @@ const LayerUI = ({
          {appState.errorMessage}
        </ErrorDialog>
      )}
-      {eyeDropperState && !device.editor.isMobile && (
+      {eyeDropperState && !device.isMobile && (
        <EyeDropper
          colorPickerType={eyeDropperState.colorPickerType}
          onCancel={() => {
@@ -453,7 +450,7 @@ const LayerUI = ({
          }
        />
      )}
-      {device.editor.isMobile && (
+      {device.isMobile && (
        <MobileMenu
          app={app}
          appState={appState}
@@ -472,14 +469,14 @@ const LayerUI = ({
          renderWelcomeScreen={renderWelcomeScreen}
        />
      )}
-      {!device.editor.isMobile && (
+      {!device.isMobile && (
        <>
          <div
            className="layer-ui__wrapper"
            style={
              appState.openSidebar &&
              isSidebarDocked &&
-              device.editor.canFitSidebar
+              device.canDeviceFitSidebar
                ? { width: `calc(100% - ${LIBRARY_SIDEBAR_WIDTH}px)` }
                : {}
            }
@@ -47,7 +47,7 @@ export const LibraryUnit = memo(
    }, [svg]);

    const [isHovered, setIsHovered] = useState(false);
-    const isMobile = useDevice().editor.isMobile;
+    const isMobile = useDevice().isMobile;
    const adder = isPending && (
      <div className="library-unit__adder">{PlusIcon}</div>
    );
@@ -1,221 +0,0 @@
-@import "../css/variables.module";
-
-$verticalBreakpoint: 860px;
-
-.excalidraw {
-  .dialog-mermaid {
-    &-title {
-      margin-bottom: 5px;
-      margin-top: 2px;
-    }
-    &-desc {
-      font-size: 15px;
-      font-style: italic;
-      font-weight: 500;
-    }
-
-    .Modal__content .Island {
-      box-shadow: none;
-    }
-
-    @at-root .excalidraw:not(.excalidraw--mobile)#{&} {
-      padding: 1.25rem;
-
-      .Modal__content {
-        height: 100%;
-        max-height: 750px;
-
-        @media screen and (max-width: $verticalBreakpoint) {
-          height: auto;
-          // When vertical, we want the height to span whole viewport.
-          // This is also important for the children not to overflow the
-          // modal/viewport (for some reason).
-          max-height: 100%;
-        }
-
-        .Island {
-          height: 100%;
-          display: flex;
-          flex-direction: column;
-          flex: 1 1 auto;
-
-          .Dialog__content {
-            display: flex;
-            flex: 1 1 auto;
-          }
-        }
-      }
-    }
-  }
-
-  .dialog-mermaid-body {
-    width: 100%;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: 1fr auto;
-    height: 100%;
-    column-gap: 4rem;
-
-    @media screen and (max-width: $verticalBreakpoint) {
-      flex-direction: column;
-      display: flex;
-      gap: 1rem;
-    }
-  }
-
-  .dialog-mermaid-panels {
-    display: grid;
-    width: 100%;
-    grid-template-columns: 1fr 1fr;
-    justify-content: space-between;
-    gap: 4rem;
-
-    grid-row: 1;
-    grid-column: 1 / 3;
-
-    @media screen and (max-width: $verticalBreakpoint) {
-      flex-direction: column;
-      display: flex;
-      gap: 1rem;
-    }
-
-    label {
-      font-size: 14px;
-      font-style: normal;
-      font-weight: 600;
-      margin-bottom: 4px;
-      margin-left: 4px;
-
-      @media screen and (max-width: $verticalBreakpoint) {
-        margin-top: 4px;
-      }
-    }
-
-    &-text {
-      display: flex;
-      flex-direction: column;
-
-      textarea {
-        width: 20rem;
-        height: 100%;
-        resize: none;
-        border-radius: var(--border-radius-lg);
-        border: 1px solid var(--dialog-border-color);
-        white-space: pre-wrap;
-        padding: 0.85rem;
-        box-sizing: border-box;
-        width: 100%;
-        font-family: monospace;
-
-        @media screen and (max-width: $verticalBreakpoint) {
-          width: auto;
-          height: 10rem;
-        }
-      }
-    }
-
-    &-preview-wrapper {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0.85rem;
-      box-sizing: border-box;
-      width: 100%;
-      // acts as min-height
-      height: 200px;
-      flex-grow: 1;
-      position: relative;
-
-      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==")
-        left center;
-      border-radius: var(--border-radius-lg);
-      border: 1px solid var(--dialog-border-color);
-
-      @media screen and (max-width: $verticalBreakpoint) {
-        // acts as min-height
-        height: 400px;
-        width: auto;
-      }
-
-      canvas {
-        max-width: 100%;
-        max-height: 100%;
-      }
-    }
-
-    &-preview-canvas-container {
-      display: flex;
-      width: 100%;
-      height: 100%;
-      align-items: center;
-      justify-content: center;
-      flex-grow: 1;
-    }
-
-    &-preview {
-      display: flex;
-      flex-direction: column;
-    }
-
-    .mermaid-error {
-      color: red;
-      font-weight: 800;
-      font-size: 30px;
-      word-break: break-word;
-      overflow: auto;
-      max-height: 100%;
-      height: 100%;
-      width: 100%;
-      text-align: center;
-      position: absolute;
-      z-index: 10;
-
-      p {
-        font-weight: 500;
-        font-family: Cascadia;
-        text-align: left;
-        white-space: pre-wrap;
-        font-size: 0.875rem;
-        padding: 0 10px;
-      }
-    }
-  }
-
-  .dialog-mermaid-buttons {
-    grid-column: 2;
-
-    .dialog-mermaid-insert {
-      &.excalidraw-button {
-        font-family: "Assistant";
-        font-weight: 600;
-        height: 2.5rem;
-        margin-top: 1em;
-        margin-bottom: 0.3em;
-        width: 7.5rem;
-        font-size: 12px;
-        color: $oc-white;
-        background-color: var(--color-primary);
-
-        &:hover {
-          background-color: var(--color-primary-darker);
-        }
-        &:active {
-          background-color: var(--color-primary-darkest);
-        }
-
-        @media screen and (max-width: $verticalBreakpoint) {
-          width: 100%;
-        }
-
-        @at-root .excalidraw.theme--dark#{&} {
-          color: var(--color-gray-100);
-        }
-      }
-
-      span {
-        padding-left: 0.5rem;
-        display: flex;
-      }
-    }
-  }
-}
@@ -1,243 +0,0 @@
-import { useState, useRef, useEffect, useDeferredValue } from "react";
-import { BinaryFiles } from "../types";
-import { useApp } from "./App";
-import { Button } from "./Button";
-import { Dialog } from "./Dialog";
-import { DEFAULT_EXPORT_PADDING, DEFAULT_FONT_SIZE } from "../constants";
-import {
-  convertToExcalidrawElements,
-  exportToCanvas,
-} from "../packages/excalidraw/index";
-import { NonDeletedExcalidrawElement } from "../element/types";
-import { canvasToBlob } from "../data/blob";
-import { ArrowRightIcon } from "./icons";
-import Spinner from "./Spinner";
-import "./MermaidToExcalidraw.scss";
-
-import { MermaidToExcalidrawResult } from "@excalidraw/mermaid-to-excalidraw/dist/interfaces";
-import type { MermaidOptions } from "@excalidraw/mermaid-to-excalidraw";
-import { t } from "../i18n";
-import Trans from "./Trans";
-
-const LOCAL_STORAGE_KEY_MERMAID_TO_EXCALIDRAW = "mermaid-to-excalidraw";
-const MERMAID_EXAMPLE =
-  "flowchart TD\n A[Christmas] -->|Get money| B(Go shopping)\n B --> C{Let me think}\n C -->|One| D[Laptop]\n C -->|Two| E[iPhone]\n C -->|Three| F[Car]";
-
-const saveMermaidDataToStorage = (data: string) => {
-  try {
-    localStorage.setItem(LOCAL_STORAGE_KEY_MERMAID_TO_EXCALIDRAW, data);
-  } catch (error: any) {
-    // Unable to access window.localStorage
-    console.error(error);
-  }
-};
-
-const importMermaidDataFromStorage = () => {
-  try {
-    const data = localStorage.getItem(LOCAL_STORAGE_KEY_MERMAID_TO_EXCALIDRAW);
-    if (data) {
-      return data;
-    }
-  } catch (error: any) {
-    // Unable to access localStorage
-    console.error(error);
-  }
-
-  return null;
-};
-
-const ErrorComp = ({ error }: { error: string }) => {
-  return (
-    <div data-testid="mermaid-error" className="mermaid-error">
-      Error! <p>{error}</p>
-    </div>
-  );
-};
-
-const MermaidToExcalidraw = () => {
-  const [mermaidToExcalidrawLib, setMermaidToExcalidrawLib] = useState<{
-    loaded: boolean;
-    api: {
-      parseMermaidToExcalidraw: (
-        defination: string,
-        options: MermaidOptions,
-      ) => Promise<MermaidToExcalidrawResult>;
-    } | null;
-  }>({ loaded: false, api: null });
-
-  const [text, setText] = useState("");
-  const deferredText = useDeferredValue(text.trim());
-  const [error, setError] = useState(null);
-
-  const canvasRef = useRef<HTMLDivElement>(null);
-  const data = useRef<{
-    elements: readonly NonDeletedExcalidrawElement[];
-    files: BinaryFiles | null;
-  }>({ elements: [], files: null });
-
-  const app = useApp();
-
-  const resetPreview = () => {
-    const canvasNode = canvasRef.current;
-
-    if (!canvasNode) {
-      return;
-    }
-    const parent = canvasNode.parentElement;
-    if (!parent) {
-      return;
-    }
-    parent.style.background = "";
-    setError(null);
-    canvasNode.replaceChildren();
-  };
-
-  useEffect(() => {
-    const loadMermaidToExcalidrawLib = async () => {
-      const api = await import(
-        /* webpackChunkName:"mermaid-to-excalidraw" */ "@excalidraw/mermaid-to-excalidraw"
-      );
-      setMermaidToExcalidrawLib({ loaded: true, api });
-    };
-    loadMermaidToExcalidrawLib();
-  }, []);
-
-  useEffect(() => {
-    const data = importMermaidDataFromStorage() || MERMAID_EXAMPLE;
-    setText(data);
-  }, []);
-
-  useEffect(() => {
-    const renderExcalidrawPreview = async () => {
-      const canvasNode = canvasRef.current;
-      const parent = canvasNode?.parentElement;
-      if (
-        !mermaidToExcalidrawLib.loaded ||
-        !canvasNode ||
-        !parent ||
-        !mermaidToExcalidrawLib.api
-      ) {
-        return;
-      }
-      if (!deferredText) {
-        resetPreview();
-        return;
-      }
-      try {
-        const { elements, files } =
-          await mermaidToExcalidrawLib.api.parseMermaidToExcalidraw(
-            deferredText,
-            {
-              fontSize: DEFAULT_FONT_SIZE,
-            },
-          );
-        setError(null);
-
-        data.current = {
-          elements: convertToExcalidrawElements(elements, {
-            regenerateIds: true,
-          }),
-          files,
-        };
-
-        const canvas = await exportToCanvas({
-          elements: data.current.elements,
-          files: data.current.files,
-          exportPadding: DEFAULT_EXPORT_PADDING,
-          maxWidthOrHeight:
-            Math.max(parent.offsetWidth, parent.offsetHeight) *
-            window.devicePixelRatio,
-        });
-        // if converting to blob fails, there's some problem that will
-        // likely prevent preview and export (e.g. canvas too big)
-        await canvasToBlob(canvas);
-        parent.style.background = "var(--default-bg-color)";
-        canvasNode.replaceChildren(canvas);
-      } catch (e: any) {
-        parent.style.background = "var(--default-bg-color)";
-        if (deferredText) {
-          setError(e.message);
-        }
-      }
-    };
-    renderExcalidrawPreview();
-  }, [deferredText, mermaidToExcalidrawLib]);
-
-  const onClose = () => {
-    app.setOpenDialog(null);
-    saveMermaidDataToStorage(text);
-  };
-
-  const onSelect = () => {
-    const { elements: newElements, files } = data.current;
-    app.addElementsFromPasteOrLibrary({
-      elements: newElements,
-      files,
-      position: "center",
-      fitToContent: true,
-    });
-    onClose();
-  };
-
-  return (
-    <Dialog
-      className="dialog-mermaid"
-      onCloseRequest={onClose}
-      size={1200}
-      title={
-        <>
-          <p className="dialog-mermaid-title">{t("mermaid.title")}</p>
-          <span className="dialog-mermaid-desc">
-            <Trans
-              i18nKey="mermaid.description"
-              flowchartLink={(el) => (
-                <a href="https://mermaid.js.org/syntax/flowchart.html">{el}</a>
-              )}
-              sequenceLink={(el) => (
-                <a href="https://mermaid.js.org/syntax/sequenceDiagram.html">
-                  {el}
-                </a>
-              )}
-            />
-            <br />
-          </span>
-        </>
-      }
-    >
-      <div className="dialog-mermaid-body">
-        <div className="dialog-mermaid-panels">
-          <div className="dialog-mermaid-panels-text">
-            <label>{t("mermaid.syntax")}</label>
-
-            <textarea
-              onChange={(event) => setText(event.target.value)}
-              value={text}
-            />
-          </div>
-          <div className="dialog-mermaid-panels-preview">
-            <label>{t("mermaid.preview")}</label>
-            <div className="dialog-mermaid-panels-preview-wrapper">
-              {error && <ErrorComp error={error} />}
-              {mermaidToExcalidrawLib.loaded ? (
-                <div
-                  ref={canvasRef}
-                  style={{ opacity: error ? "0.15" : 1 }}
-                  className="dialog-mermaid-panels-preview-canvas-container"
-                />
-              ) : (
-                <Spinner size="2rem" />
-              )}
-            </div>
-          </div>
-        </div>
-        <div className="dialog-mermaid-buttons">
-          <Button className="dialog-mermaid-insert" onSelect={onSelect}>
-            {t("mermaid.button")}
-            <span>{ArrowRightIcon}</span>
-          </Button>
-        </div>
-      </div>
-    </Dialog>
-  );
-};
-export default MermaidToExcalidraw;
@@ -35,7 +35,7 @@ type MobileMenuProps = {
  elements: readonly NonDeletedExcalidrawElement[];
  onLockToggle: () => void;
  onHandToolToggle: () => void;
-  onPenModeToggle: AppClassProperties["togglePenMode"];
+  onPenModeToggle: () => void;

  renderTopRightUI?: (
    isMobile: boolean,
@@ -94,7 +94,7 @@ export const MobileMenu = ({
                  )}
                  <PenModeButton
                    checked={appState.penMode}
-                    onChange={() => onPenModeToggle(null)}
+                    onChange={onPenModeToggle}
                    title={t("toolBar.penMode")}
                    isMobile
                    penDetected={appState.penDetected}
@@ -59,6 +59,12 @@
    &:focus {
      outline: none;
    }
+
+    @include isMobile {
+      max-width: 100%;
+      border: 0;
+      border-radius: 0;
+    }
  }

  @keyframes Modal__background__fade-in {
@@ -99,7 +105,7 @@
    }
  }

-  .Dialog--fullscreen {
+  @include isMobile {
    .Modal {
      padding: 0;
    }
@@ -110,9 +116,6 @@
      left: 0;
      right: 0;
      bottom: 0;
-      max-width: 100%;
-      border: 0;
-      border-radius: 0;
    }
  }
 }
@@ -113,11 +113,11 @@ export const SidebarInner = forwardRef(
          if ((event.target as Element).closest(".sidebar-trigger")) {
            return;
          }
-          if (!docked || !device.editor.canFitSidebar) {
+          if (!docked || !device.canDeviceFitSidebar) {
            closeLibrary();
          }
        },
-        [closeLibrary, docked, device.editor.canFitSidebar],
+        [closeLibrary, docked, device.canDeviceFitSidebar],
      ),
    );

@@ -125,7 +125,7 @@ export const SidebarInner = forwardRef(
      const handleKeyDown = (event: KeyboardEvent) => {
        if (
          event.key === KEYS.ESCAPE &&
-          (!docked || !device.editor.canFitSidebar)
+          (!docked || !device.canDeviceFitSidebar)
        ) {
          closeLibrary();
        }
@@ -134,7 +134,7 @@ export const SidebarInner = forwardRef(
      return () => {
        document.removeEventListener(EVENT.KEYDOWN, handleKeyDown);
      };
-    }, [closeLibrary, docked, device.editor.canFitSidebar]);
+    }, [closeLibrary, docked, device.canDeviceFitSidebar]);

    return (
      <Island
@@ -18,7 +18,7 @@ export const SidebarHeader = ({
  const props = useContext(SidebarPropsContext);

  const renderDockButton = !!(
-    device.editor.canFitSidebar && props.shouldRenderDockButton
+    device.canDeviceFitSidebar && props.shouldRenderDockButton
  );

  return (
@@ -160,15 +160,6 @@
      width: var(--lg-button-size);
      height: var(--lg-button-size);

-      @media screen and (max-width: 450px) {
-        width: 1.8rem;
-        height: 1.8rem;
-      }
-      @media screen and (max-width: 379px) {
-        width: 1.5rem;
-        height: 1.5rem;
-      }
-
      svg {
        width: var(--lg-icon-size);
        height: var(--lg-icon-size);
@@ -16,10 +16,6 @@
      align-self: center;
      background-color: var(--default-border-color);
      margin: 0 0.25rem;
-
-      @include isMobile {
-        margin: 0;
-      }
    }
  }

@@ -45,6 +41,5 @@
    margin-top: 0.375rem;
    right: 0;
    min-width: 11.875rem;
-    z-index: 1;
  }
 }
@@ -7,6 +7,8 @@
    margin-top: 0.25rem;

    &--mobile {
+      bottom: 55px;
+      top: auto;
      left: 0;
      width: 100%;
      row-gap: 0.75rem;
@@ -30,7 +30,7 @@ const MenuContent = ({
  });

  const classNames = clsx(`dropdown-menu ${className}`, {
-    "dropdown-menu--mobile": device.editor.isMobile,
+    "dropdown-menu--mobile": device.isMobile,
  }).trim();

  return (
@@ -43,7 +43,7 @@ const MenuContent = ({
      >
        {/* the zIndex ensures this menu has higher stacking order,
    see https://github.com/excalidraw/excalidraw/pull/1445 */}
-        {device.editor.isMobile ? (
+        {device.isMobile ? (
          <Stack.Col className="dropdown-menu-container">{children}</Stack.Col>
        ) : (
          <Island
@@ -14,7 +14,7 @@ const MenuItemContent = ({
    <>
      <div className="dropdown-menu-item__icon">{icon}</div>
      <div className="dropdown-menu-item__text">{children}</div>
-      {shortcut && !device.editor.isMobile && (
+      {shortcut && !device.isMobile && (
        <div className="dropdown-menu-item__shortcut">{shortcut}</div>
      )}
    </>
@@ -18,7 +18,7 @@ const MenuTrigger = ({
    `dropdown-menu-button ${className}`,
    "zen-mode-transition",
    {
-      "dropdown-menu-button--mobile": device.editor.isMobile,
+      "dropdown-menu-button--mobile": device.isMobile,
    },
  ).trim();
  return (
@@ -1654,22 +1654,6 @@ export const frameToolIcon = createIcon(
  tablerIconProps,
 );

-export const mermaidLogoIcon = createIcon(
-  <path
-    fill="currentColor"
-    d="M407.48,111.18C335.587,108.103 269.573,152.338 245.08,220C220.587,152.338 154.573,108.103 82.68,111.18C80.285,168.229 107.577,222.632 154.74,254.82C178.908,271.419 193.35,298.951 193.27,328.27L193.27,379.13L296.9,379.13L296.9,328.27C296.816,298.953 311.255,271.42 335.42,254.82C382.596,222.644 409.892,168.233 407.48,111.18Z"
-  />,
-);
-
-export const ArrowRightIcon = createIcon(
-  <g strokeWidth="1.25">
-    <path d="M4.16602 10H15.8327" />
-    <path d="M12.5 13.3333L15.8333 10" />
-    <path d="M12.5 6.66666L15.8333 9.99999" />
-  </g>,
-  modifiedTablerIconProps,
-);
-
 export const laserPointerToolIcon = createIcon(
  <g
    fill="none"
@@ -29,7 +29,7 @@ const MainMenu = Object.assign(
      const device = useDevice();
      const appState = useUIAppState();
      const setAppState = useExcalidrawSetAppState();
-      const onClickOutside = device.editor.isMobile
+      const onClickOutside = device.isMobile
        ? undefined
        : () => setAppState({ openMenu: null });

@@ -54,7 +54,7 @@ const MainMenu = Object.assign(
              })}
            >
              {children}
-              {device.editor.isMobile && appState.collaborators.size > 0 && (
+              {device.isMobile && appState.collaborators.size > 0 && (
                <fieldset className="UserList-Wrapper">
                  <legend>{t("labels.collaborators")}</legend>
                  <UserList
@@ -21,7 +21,7 @@ const WelcomeScreenMenuItemContent = ({
    <>
      <div className="welcome-screen-menu-item__icon">{icon}</div>
      <div className="welcome-screen-menu-item__text">{children}</div>
-      {shortcut && !device.editor.isMobile && (
+      {shortcut && !device.isMobile && (
        <div className="welcome-screen-menu-item__shortcut">{shortcut}</div>
      )}
    </>
@@ -105,7 +105,6 @@ export const FONT_FAMILY = {
  Virgil: 1,
  Helvetica: 2,
  Cascadia: 3,
-  Assistant: 4,
 };

 export const THEME = {
@@ -115,18 +114,13 @@ export const THEME = {

 export const FRAME_STYLE = {
  strokeColor: "#bbb" as ExcalidrawElement["strokeColor"],
-  strokeWidth: 2 as ExcalidrawElement["strokeWidth"],
+  strokeWidth: 1 as ExcalidrawElement["strokeWidth"],
  strokeStyle: "solid" as ExcalidrawElement["strokeStyle"],
  fillStyle: "solid" as ExcalidrawElement["fillStyle"],
  roughness: 0 as ExcalidrawElement["roughness"],
  roundness: null as ExcalidrawElement["roundness"],
  backgroundColor: "transparent" as ExcalidrawElement["backgroundColor"],
  radius: 8,
-  nameOffsetY: 3,
-  nameColorLightTheme: "#999999",
-  nameColorDarkTheme: "#7a7a7a",
-  nameFontSize: 14,
-  nameLineHeight: 1.25,
 };

 export const WINDOWS_EMOJI_FALLBACK_FONT = "Segoe UI Emoji";
@@ -154,8 +148,6 @@ export const IMAGE_MIME_TYPES = {
  jfif: "image/jfif",
 } as const;

-export const ALLOWED_PASTE_MIME_TYPES = ["text/plain", "text/html"] as const;
-
 export const MIME_TYPES = {
  json: "application/json",
  // excalidraw data
@@ -226,6 +218,8 @@ export const DEFAULT_UI_OPTIONS: AppProps["UIOptions"] = {

 // breakpoints
 // -----------------------------------------------------------------------------
+// sm screen
+export const MQ_SM_MAX_WIDTH = 640;
 // md screen
 export const MQ_MAX_WIDTH_PORTRAIT = 730;
 export const MQ_MAX_WIDTH_LANDSCAPE = 1000;
@@ -308,12 +302,6 @@ export const ROUGHNESS = {
  cartoonist: 2,
 } as const;

-export const STROKE_WIDTH = {
-  thin: 1,
-  bold: 2,
-  extraBold: 4,
-} as const;
-
 export const DEFAULT_ELEMENT_PROPS: {
  strokeColor: ExcalidrawElement["strokeColor"];
  backgroundColor: ExcalidrawElement["backgroundColor"];
@@ -195,7 +195,7 @@
  .buttonList label:focus-within,
  input:focus-visible {
    outline: transparent;
-    box-shadow: 0 0 0 1px var(--color-brand-hover);
+    box-shadow: 0 0 0 2px var(--focus-highlight-color);
  }

  .buttonList {
@@ -280,11 +280,6 @@
    align-items: center;
    justify-content: space-between;
    padding: 8px;
-
-    .dropdown-menu--mobile {
-      bottom: 55px;
-      top: auto;
-    }
  }

  .App-mobile-menu {
@@ -542,13 +537,13 @@

    &:not(:focus) {
      &:hover {
-        border-color: var(--color-brand-hover);
+        background-color: var(--input-hover-bg-color);
      }
    }

    &:focus {
      outline: none;
-      border-color: var(--color-brand-hover);
+      box-shadow: 0 0 0 2px var(--focus-highlight-color);
    }
  }

@@ -597,8 +592,6 @@
    background-color: var(--island-bg-color);

    .ToolIcon__icon {
-      width: 2rem;
-      height: 2rem;
      border-radius: 0;
    }

@@ -608,8 +601,8 @@
  }

  .App-toolbar--mobile {
-    overflow: visible;
-    max-width: 98vw;
+    overflow-x: auto;
+    max-width: 90vw;

    .ToolIcon__keybinding {
      display: none;
@@ -99,7 +99,7 @@ export const setCursorForShape = (
    interactiveCanvas.style.cursor = `url(${url}), auto`;
  } else if (!["image", "custom"].includes(appState.activeTool.type)) {
    interactiveCanvas.style.cursor = CURSOR_TYPE.CROSSHAIR;
-  } else if (appState.activeTool.type !== "image") {
+  } else {
    interactiveCanvas.style.cursor = CURSOR_TYPE.AUTO;
  }
 };
@@ -6,11 +6,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
  "backgroundColor": "#d8f5a2",
  "boundElements": [
    {
-      "id": "id45",
+      "id": "id40",
      "type": "arrow",
    },
    {
-      "id": "id46",
+      "id": "id41",
      "type": "arrow",
    },
  ],
@@ -45,7 +45,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
  "backgroundColor": "transparent",
  "boundElements": [
    {
-      "id": "id46",
+      "id": "id41",
      "type": "arrow",
    },
  ],
@@ -97,12 +97,12 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
  "opacity": 100,
  "points": [
    [
-      0.5,
-      0.5,
+      0,
+      0,
    ],
    [
-      394.5,
-      34.5,
+      395,
+      35,
    ],
  ],
  "roughness": 1,
@@ -110,7 +110,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
  "seed": Any<Number>,
  "startArrowhead": null,
  "startBinding": {
-    "elementId": "id47",
+    "elementId": "id42",
    "focus": -0.08139534883720931,
    "gap": 1,
  },
@@ -150,11 +150,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
  "opacity": 100,
  "points": [
    [
-      0.5,
+      0,
      0,
    ],
    [
-      399.5,
+      400,
      0,
    ],
  ],
@@ -186,7 +186,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
  "backgroundColor": "transparent",
  "boundElements": [
    {
-      "id": "id45",
+      "id": "id40",
      "type": "arrow",
    },
  ],
@@ -222,7 +222,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
  "baseline": 0,
  "boundElements": [
    {
-      "id": "id48",
+      "id": "id43",
      "type": "arrow",
    },
  ],
@@ -266,7 +266,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
  "baseline": 0,
  "boundElements": [
    {
-      "id": "id48",
+      "id": "id43",
      "type": "arrow",
    },
  ],
@@ -309,7 +309,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
  "backgroundColor": "transparent",
  "boundElements": [
    {
-      "id": "id49",
+      "id": "id44",
      "type": "text",
    },
  ],
@@ -317,7 +317,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
  "endBinding": {
    "elementId": "text-2",
    "focus": 0,
-    "gap": 205,
+    "gap": 5,
  },
  "fillStyle": "solid",
  "frameId": null,
@@ -331,11 +331,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
  "opacity": 100,
  "points": [
    [
-      0.5,
+      0,
      0,
    ],
    [
-      99.5,
+      300,
      0,
    ],
  ],
@@ -355,7 +355,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
  "updated": 1,
  "version": 3,
  "versionNonce": Any<Number>,
-  "width": 100,
+  "width": 300,
  "x": 255,
  "y": 239,
 }
@@ -367,7 +367,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
  "backgroundColor": "transparent",
  "baseline": 0,
  "boundElements": null,
-  "containerId": "id48",
+  "containerId": "id43",
  "fillStyle": "solid",
  "fontFamily": 1,
  "fontSize": 20,
@@ -395,7 +395,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
  "versionNonce": Any<Number>,
  "verticalAlign": "middle",
  "width": 130,
-  "x": 240,
+  "x": 340,
  "y": 226.5,
 }
 `;
@@ -406,13 +406,13 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
  "backgroundColor": "transparent",
  "boundElements": [
    {
-      "id": "id38",
+      "id": "id33",
      "type": "text",
    },
  ],
  "endArrowhead": "arrow",
  "endBinding": {
-    "elementId": "id40",
+    "elementId": "id35",
    "focus": 0,
    "gap": 1,
  },
@@ -428,11 +428,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
  "opacity": 100,
  "points": [
    [
-      0.5,
+      0,
      0,
    ],
    [
-      99.5,
+      300,
      0,
    ],
  ],
@@ -441,7 +441,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
  "seed": Any<Number>,
  "startArrowhead": null,
  "startBinding": {
-    "elementId": "id39",
+    "elementId": "id34",
    "focus": 0,
    "gap": 1,
  },
@@ -452,7 +452,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
  "updated": 1,
  "version": 3,
  "versionNonce": Any<Number>,
-  "width": 100,
+  "width": 300,
  "x": 255,
  "y": 239,
 }
@@ -464,7 +464,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
  "backgroundColor": "transparent",
  "baseline": 0,
  "boundElements": null,
-  "containerId": "id37",
+  "containerId": "id32",
  "fillStyle": "solid",
  "fontFamily": 1,
  "fontSize": 20,
@@ -492,7 +492,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
  "versionNonce": Any<Number>,
  "verticalAlign": "middle",
  "width": 130,
-  "x": 240,
+  "x": 340,
  "y": 226.5,
 }
 `;
@@ -503,7 +503,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
  "backgroundColor": "transparent",
  "boundElements": [
    {
-      "id": "id37",
+      "id": "id32",
      "type": "arrow",
    },
  ],
@@ -538,7 +538,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
  "backgroundColor": "transparent",
  "boundElements": [
    {
-      "id": "id37",
+      "id": "id32",
      "type": "arrow",
    },
  ],
@@ -562,7 +562,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
  "version": 2,
  "versionNonce": Any<Number>,
  "width": 100,
-  "x": 355,
+  "x": 555,
  "y": 189,
 }
 `;
@@ -573,13 +573,13 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
  "backgroundColor": "transparent",
  "boundElements": [
    {
-      "id": "id42",
+      "id": "id37",
      "type": "text",
    },
  ],
  "endArrowhead": "arrow",
  "endBinding": {
-    "elementId": "id44",
+    "elementId": "id39",
    "focus": 0,
    "gap": 1,
  },
@@ -595,11 +595,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
  "opacity": 100,
  "points": [
    [
-      0.5,
+      0,
      0,
    ],
    [
-      99.5,
+      300,
      0,
    ],
  ],
@@ -608,7 +608,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
  "seed": Any<Number>,
  "startArrowhead": null,
  "startBinding": {
-    "elementId": "id43",
+    "elementId": "id38",
    "focus": 0,
    "gap": 1,
  },
@@ -619,7 +619,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
  "updated": 1,
  "version": 3,
  "versionNonce": Any<Number>,
-  "width": 100,
+  "width": 300,
  "x": 255,
  "y": 239,
 }
@@ -631,7 +631,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
  "backgroundColor": "transparent",
  "baseline": 0,
  "boundElements": null,
-  "containerId": "id41",
+  "containerId": "id36",
  "fillStyle": "solid",
  "fontFamily": 1,
  "fontSize": 20,
@@ -659,7 +659,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
  "versionNonce": Any<Number>,
  "verticalAlign": "middle",
  "width": 130,
-  "x": 240,
+  "x": 340,
  "y": 226.5,
 }
 `;
@@ -671,7 +671,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
  "baseline": 0,
  "boundElements": [
    {
-      "id": "id41",
+      "id": "id36",
      "type": "arrow",
    },
  ],
@@ -715,7 +715,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
  "baseline": 0,
  "boundElements": [
    {
-      "id": "id41",
+      "id": "id36",
      "type": "arrow",
    },
  ],
@@ -747,7 +747,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
  "versionNonce": Any<Number>,
  "verticalAlign": "top",
  "width": 100,
-  "x": 355,
+  "x": 555,
  "y": 226.5,
 }
 `;
@@ -801,11 +801,11 @@ exports[`Test Transform > should transform linear elements 1`] = `
  "opacity": 100,
  "points": [
    [
-      0.5,
+      0,
      0,
    ],
    [
-      99.5,
+      300,
      0,
    ],
  ],
@@ -821,7 +821,7 @@ exports[`Test Transform > should transform linear elements 1`] = `
  "updated": 1,
  "version": 1,
  "versionNonce": Any<Number>,
-  "width": 100,
+  "width": 300,
  "x": 100,
  "y": 20,
 }
@@ -846,11 +846,11 @@ exports[`Test Transform > should transform linear elements 2`] = `
  "opacity": 100,
  "points": [
    [
-      0.5,
+      0,
      0,
    ],
    [
-      99.5,
+      300,
      0,
    ],
  ],
@@ -866,7 +866,7 @@ exports[`Test Transform > should transform linear elements 2`] = `
  "updated": 1,
  "version": 1,
  "versionNonce": Any<Number>,
-  "width": 100,
+  "width": 300,
  "x": 450,
  "y": 20,
 }
@@ -895,7 +895,7 @@ exports[`Test Transform > should transform linear elements 3`] = `
      0,
    ],
    [
-      100,
+      300,
      0,
    ],
  ],
@@ -911,7 +911,7 @@ exports[`Test Transform > should transform linear elements 3`] = `
  "updated": 1,
  "version": 1,
  "versionNonce": Any<Number>,
-  "width": 100,
+  "width": 300,
  "x": 100,
  "y": 60,
 }
@@ -940,7 +940,7 @@ exports[`Test Transform > should transform linear elements 4`] = `
      0,
    ],
    [
-      100,
+      300,
      0,
    ],
  ],
@@ -956,7 +956,7 @@ exports[`Test Transform > should transform linear elements 4`] = `
  "updated": 1,
  "version": 1,
  "versionNonce": Any<Number>,
-  "width": 100,
+  "width": 300,
  "x": 450,
  "y": 60,
 }
@@ -1221,6 +1221,56 @@ exports[`Test Transform > should transform text element 2`] = `
 `;

 exports[`Test Transform > should transform to labelled arrows when label provided for arrows 1`] = `
+{
+  "angle": 0,
+  "backgroundColor": "transparent",
+  "boundElements": [
+    {
+      "id": "id28",
+      "type": "text",
+    },
+  ],
+  "endArrowhead": "arrow",
+  "endBinding": null,
+  "fillStyle": "solid",
+  "frameId": null,
+  "groupIds": [],
+  "height": 0,
+  "id": Any<String>,
+  "isDeleted": false,
+  "lastCommittedPoint": null,
+  "link": null,
+  "locked": false,
+  "opacity": 100,
+  "points": [
+    [
+      0,
+      0,
+    ],
+    [
+      300,
+      0,
+    ],
+  ],
+  "roughness": 1,
+  "roundness": null,
+  "seed": Any<Number>,
+  "startArrowhead": null,
+  "startBinding": null,
+  "strokeColor": "#1e1e1e",
+  "strokeStyle": "solid",
+  "strokeWidth": 2,
+  "type": "arrow",
+  "updated": 1,
+  "version": 1,
+  "versionNonce": Any<Number>,
+  "width": 300,
+  "x": 100,
+  "y": 100,
+}
+`;
+
+exports[`Test Transform > should transform to labelled arrows when label provided for arrows 2`] = `
 {
  "angle": 0,
  "backgroundColor": "transparent",
@@ -1244,11 +1294,11 @@ exports[`Test Transform > should transform to labelled arrows when label provide
  "opacity": 100,
  "points": [
    [
-      0.5,
+      0,
      0,
    ],
    [
-      99.5,
+      300,
      0,
    ],
  ],
@@ -1264,13 +1314,13 @@ exports[`Test Transform > should transform to labelled arrows when label provide
  "updated": 1,
  "version": 1,
  "versionNonce": Any<Number>,
-  "width": 100,
+  "width": 300,
  "x": 100,
-  "y": 100,
+  "y": 200,
 }
 `;

-exports[`Test Transform > should transform to labelled arrows when label provided for arrows 2`] = `
+exports[`Test Transform > should transform to labelled arrows when label provided for arrows 3`] = `
 {
  "angle": 0,
  "backgroundColor": "transparent",
@@ -1285,7 +1335,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
  "fillStyle": "solid",
  "frameId": null,
  "groupIds": [],
-  "height": 0,
+  "height": 130,
  "id": Any<String>,
  "isDeleted": false,
  "lastCommittedPoint": null,
@@ -1294,11 +1344,11 @@ exports[`Test Transform > should transform to labelled arrows when label provide
  "opacity": 100,
  "points": [
    [
-      0.5,
+      0,
      0,
    ],
    [
-      99.5,
+      300,
      0,
    ],
  ],
@@ -1307,20 +1357,20 @@ exports[`Test Transform > should transform to labelled arrows when label provide
  "seed": Any<Number>,
  "startArrowhead": null,
  "startBinding": null,
-  "strokeColor": "#1e1e1e",
+  "strokeColor": "#1098ad",
  "strokeStyle": "solid",
  "strokeWidth": 2,
  "type": "arrow",
  "updated": 1,
-  "version": 1,
+  "version": 2,
  "versionNonce": Any<Number>,
-  "width": 100,
+  "width": 300,
  "x": 100,
-  "y": 200,
+  "y": 300,
 }
 `;

-exports[`Test Transform > should transform to labelled arrows when label provided for arrows 3`] = `
+exports[`Test Transform > should transform to labelled arrows when label provided for arrows 4`] = `
 {
  "angle": 0,
  "backgroundColor": "transparent",
@@ -1335,7 +1385,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
  "fillStyle": "solid",
  "frameId": null,
  "groupIds": [],
-  "height": 0,
+  "height": 130,
  "id": Any<String>,
  "isDeleted": false,
  "lastCommittedPoint": null,
@@ -1344,11 +1394,11 @@ exports[`Test Transform > should transform to labelled arrows when label provide
  "opacity": 100,
  "points": [
    [
-      0.5,
+      0,
      0,
    ],
    [
-      99.5,
+      300,
      0,
    ],
  ],
@@ -1362,59 +1412,9 @@ exports[`Test Transform > should transform to labelled arrows when label provide
  "strokeWidth": 2,
  "type": "arrow",
  "updated": 1,
-  "version": 1,
+  "version": 2,
  "versionNonce": Any<Number>,
-  "width": 100,
-  "x": 100,
-  "y": 300,
-}
-`;
-
-exports[`Test Transform > should transform to labelled arrows when label provided for arrows 4`] = `
-{
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": [
-    {
-      "id": "id32",
-      "type": "text",
-    },
-  ],
-  "endArrowhead": "arrow",
-  "endBinding": null,
-  "fillStyle": "solid",
-  "frameId": null,
-  "groupIds": [],
-  "height": 0,
-  "id": Any<String>,
-  "isDeleted": false,
-  "lastCommittedPoint": null,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "points": [
-    [
-      0.5,
-      0,
-    ],
-    [
-      99.5,
-      0,
-    ],
-  ],
-  "roughness": 1,
-  "roundness": null,
-  "seed": Any<Number>,
-  "startArrowhead": null,
-  "startBinding": null,
-  "strokeColor": "#1098ad",
-  "strokeStyle": "solid",
-  "strokeWidth": 2,
-  "type": "arrow",
-  "updated": 1,
-  "version": 1,
-  "versionNonce": Any<Number>,
-  "width": 100,
+  "width": 300,
  "x": 100,
  "y": 400,
 }
@@ -1426,7 +1426,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
  "backgroundColor": "transparent",
  "baseline": 0,
  "boundElements": null,
-  "containerId": "id25",
+  "containerId": "id24",
  "fillStyle": "solid",
  "fontFamily": 1,
  "fontSize": 20,
@@ -1454,7 +1454,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
  "versionNonce": Any<Number>,
  "verticalAlign": "middle",
  "width": 130,
-  "x": 85,
+  "x": 185,
  "y": 87.5,
 }
 `;
@@ -1465,7 +1465,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
  "backgroundColor": "transparent",
  "baseline": 0,
  "boundElements": null,
-  "containerId": "id26",
+  "containerId": "id25",
  "fillStyle": "solid",
  "fontFamily": 1,
  "fontSize": 20,
@@ -1493,7 +1493,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
  "versionNonce": Any<Number>,
  "verticalAlign": "middle",
  "width": 200,
-  "x": 50,
+  "x": 150,
  "y": 187.5,
 }
 `;
@@ -1504,7 +1504,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
  "backgroundColor": "transparent",
  "baseline": 0,
  "boundElements": null,
-  "containerId": "id27",
+  "containerId": "id26",
  "fillStyle": "solid",
  "fontFamily": 1,
  "fontSize": 20,
@@ -1533,7 +1533,7 @@ LABELLED ARROW",
  "versionNonce": Any<Number>,
  "verticalAlign": "middle",
  "width": 150,
-  "x": 75,
+  "x": 175,
  "y": 275,
 }
 `;
@@ -1544,7 +1544,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
  "backgroundColor": "transparent",
  "baseline": 0,
  "boundElements": null,
-  "containerId": "id28",
+  "containerId": "id27",
  "fillStyle": "solid",
  "fontFamily": 1,
  "fontSize": 20,
@@ -1573,7 +1573,7 @@ LABELLED ARROW",
  "versionNonce": Any<Number>,
  "verticalAlign": "middle",
  "width": 150,
-  "x": 75,
+  "x": 175,
  "y": 375,
 }
 `;
@@ -1584,7 +1584,7 @@ exports[`Test Transform > should transform to text containers when label provide
  "backgroundColor": "transparent",
  "boundElements": [
    {
-      "id": "id19",
+      "id": "id18",
      "type": "text",
    },
  ],
@@ -1619,7 +1619,7 @@ exports[`Test Transform > should transform to text containers when label provide
  "backgroundColor": "transparent",
  "boundElements": [
    {
-      "id": "id20",
+      "id": "id19",
      "type": "text",
    },
  ],
@@ -1654,7 +1654,7 @@ exports[`Test Transform > should transform to text containers when label provide
  "backgroundColor": "transparent",
  "boundElements": [
    {
-      "id": "id21",
+      "id": "id20",
      "type": "text",
    },
  ],
@@ -1689,7 +1689,7 @@ exports[`Test Transform > should transform to text containers when label provide
  "backgroundColor": "#fff3bf",
  "boundElements": [
    {
-      "id": "id22",
+      "id": "id21",
      "type": "text",
    },
  ],
@@ -1724,7 +1724,7 @@ exports[`Test Transform > should transform to text containers when label provide
  "backgroundColor": "transparent",
  "boundElements": [
    {
-      "id": "id23",
+      "id": "id22",
      "type": "text",
    },
  ],
@@ -1759,7 +1759,7 @@ exports[`Test Transform > should transform to text containers when label provide
  "backgroundColor": "#ffec99",
  "boundElements": [
    {
-      "id": "id24",
+      "id": "id23",
      "type": "text",
    },
  ],
@@ -1794,7 +1794,7 @@ exports[`Test Transform > should transform to text containers when label provide
  "backgroundColor": "transparent",
  "baseline": 0,
  "boundElements": null,
-  "containerId": "id13",
+  "containerId": "id12",
  "fillStyle": "solid",
  "fontFamily": 1,
  "fontSize": 20,
@@ -1833,7 +1833,7 @@ exports[`Test Transform > should transform to text containers when label provide
  "backgroundColor": "transparent",
  "baseline": 0,
  "boundElements": null,
-  "containerId": "id14",
+  "containerId": "id13",
  "fillStyle": "solid",
  "fontFamily": 1,
  "fontSize": 20,
@@ -1873,7 +1873,7 @@ exports[`Test Transform > should transform to text containers when label provide
  "backgroundColor": "transparent",
  "baseline": 0,
  "boundElements": null,
-  "containerId": "id15",
+  "containerId": "id14",
  "fillStyle": "solid",
  "fontFamily": 1,
  "fontSize": 20,
@@ -1915,7 +1915,7 @@ exports[`Test Transform > should transform to text containers when label provide
  "backgroundColor": "transparent",
  "baseline": 0,
  "boundElements": null,
-  "containerId": "id16",
+  "containerId": "id15",
  "fillStyle": "solid",
  "fontFamily": 1,
  "fontSize": 20,
@@ -1955,7 +1955,7 @@ exports[`Test Transform > should transform to text containers when label provide
  "backgroundColor": "transparent",
  "baseline": 0,
  "boundElements": null,
-  "containerId": "id17",
+  "containerId": "id16",
  "fillStyle": "solid",
  "fontFamily": 1,
  "fontSize": 20,
@@ -1996,7 +1996,7 @@ exports[`Test Transform > should transform to text containers when label provide
  "backgroundColor": "transparent",
  "baseline": 0,
  "boundElements": null,
-  "containerId": "id18",
+  "containerId": "id17",
  "fillStyle": "solid",
  "fontFamily": 1,
  "fontSize": 20,
@@ -3,19 +3,11 @@ import {
  copyTextToSystemClipboard,
 } from "../clipboard";
 import { DEFAULT_EXPORT_PADDING, isFirefox, MIME_TYPES } from "../constants";
-import { getNonDeletedElements, isFrameElement } from "../element";
-import {
-  ExcalidrawElement,
-  ExcalidrawFrameElement,
-  NonDeletedExcalidrawElement,
-} from "../element/types";
+import { NonDeletedExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
-import { elementsOverlappingBBox } from "../packages/withinBounds";
-import { isSomeElementSelected, getSelectedElements } from "../scene";
 import { exportToCanvas, exportToSvg } from "../scene/export";
 import { ExportType } from "../scene/types";
 import { AppState, BinaryFiles } from "../types";
-import { cloneJSON } from "../utils";
 import { canvasToBlob } from "./blob";
 import { fileSave, FileSystemHandle } from "./filesystem";
 import { serializeAsJSON } from "./json";
@@ -23,61 +15,9 @@ import { serializeAsJSON } from "./json";
 export { loadFromBlob } from "./blob";
 export { loadFromJSON, saveAsJSON } from "./json";

-export type ExportedElements = readonly NonDeletedExcalidrawElement[] & {
-  _brand: "exportedElements";
-};
-
-export const prepareElementsForExport = (
-  elements: readonly ExcalidrawElement[],
-  { selectedElementIds }: Pick<AppState, "selectedElementIds">,
-  exportSelectionOnly: boolean,
-) => {
-  elements = getNonDeletedElements(elements);
-
-  const isExportingSelection =
-    exportSelectionOnly &&
-    isSomeElementSelected(elements, { selectedElementIds });
-
-  let exportingFrame: ExcalidrawFrameElement | null = null;
-  let exportedElements = isExportingSelection
-    ? getSelectedElements(
-        elements,
-        { selectedElementIds },
-        {
-          includeBoundTextElement: true,
-        },
-      )
-    : elements;
-
-  if (isExportingSelection) {
-    if (exportedElements.length === 1 && isFrameElement(exportedElements[0])) {
-      exportingFrame = exportedElements[0];
-      exportedElements = elementsOverlappingBBox({
-        elements,
-        bounds: exportingFrame,
-        type: "overlap",
-      });
-    } else if (exportedElements.length > 1) {
-      exportedElements = getSelectedElements(
-        elements,
-        { selectedElementIds },
-        {
-          includeBoundTextElement: true,
-          includeElementsInFrames: true,
-        },
-      );
-    }
-  }
-
-  return {
-    exportingFrame,
-    exportedElements: cloneJSON(exportedElements) as ExportedElements,
-  };
-};
-
 export const exportCanvas = async (
  type: Omit<ExportType, "backend">,
-  elements: ExportedElements,
+  elements: readonly NonDeletedExcalidrawElement[],
  appState: AppState,
  files: BinaryFiles,
  {
@@ -86,14 +26,12 @@ export const exportCanvas = async (
    viewBackgroundColor,
    name,
    fileHandle = null,
-    exportingFrame = null,
  }: {
    exportBackground: boolean;
    exportPadding?: number;
    viewBackgroundColor: string;
    name: string;
    fileHandle?: FileSystemHandle | null;
-    exportingFrame: ExcalidrawFrameElement | null;
  },
 ) => {
  if (elements.length === 0) {
@@ -111,7 +49,6 @@ export const exportCanvas = async (
        exportEmbedScene: appState.exportEmbedScene && type === "svg",
      },
      files,
-      { exportingFrame },
    );
    if (type === "svg") {
      return await fileSave(
@@ -133,7 +70,6 @@ export const exportCanvas = async (
    exportBackground,
    viewBackgroundColor,
    exportPadding,
-    exportingFrame,
  });

  if (type === "png") {
@@ -23,7 +23,6 @@ import {
  LIBRARY_SIDEBAR_TAB,
 } from "../constants";
 import { libraryItemSvgsCache } from "../hooks/useLibraryItemSvg";
-import { cloneJSON } from "../utils";

 export const libraryItemsAtom = atom<{
  status: "loading" | "loaded";
@@ -32,7 +31,7 @@ export const libraryItemsAtom = atom<{
 }>({ status: "loaded", isInitialized: true, libraryItems: [] });

 const cloneLibraryItems = (libraryItems: LibraryItems): LibraryItems =>
-  cloneJSON(libraryItems);
+  JSON.parse(JSON.stringify(libraryItems));

 /**
 * checks if library item does not exist already in current library
@@ -1,6 +1,7 @@
 import { ExcalidrawElement } from "../element/types";
 import { AppState, BinaryFiles } from "../types";
-import { exportCanvas, prepareElementsForExport } from ".";
+import { exportCanvas } from ".";
+import { getNonDeletedElements } from "../element";
 import { getFileHandleType, isImageFileHandleType } from "./blob";

 export const resaveAsImageWithScene = async (
@@ -22,19 +23,18 @@ export const resaveAsImageWithScene = async (
    exportEmbedScene: true,
  };

-  const { exportedElements, exportingFrame } = prepareElementsForExport(
-    elements,
+  await exportCanvas(
+    fileHandleType,
+    getNonDeletedElements(elements),
    appState,
-    false,
+    files,
+    {
+      exportBackground,
+      viewBackgroundColor,
+      name,
+      fileHandle,
+    },
  );

-  await exportCanvas(fileHandleType, exportedElements, appState, files, {
-    exportBackground,
-    viewBackgroundColor,
-    name,
-    fileHandle,
-    exportingFrame,
-  });
-
  return { fileHandle };
 };
@@ -43,6 +43,7 @@ import {
  measureBaseline,
 } from "../element/textElement";
 import { normalizeLink } from "./url";
+import { isValidFrameChild } from "../frame";

 type RestoredAppState = Omit<
  AppState,
@@ -284,6 +285,9 @@ const restoreElement = (
        points,
        x,
        y,
+        segmentSplitIndices: element.segmentSplitIndices
+          ? [...element.segmentSplitIndices]
+          : [],
      });
    }

@@ -396,7 +400,7 @@ const repairBoundElement = (
 };

 /**
- * Remove an element's frameId if its containing frame is non-existent
+ * resets `frameId` if no longer applicable.
 *
 * NOTE mutates elements.
 */
@@ -404,12 +408,16 @@ const repairFrameMembership = (
  element: Mutable<ExcalidrawElement>,
  elementsMap: Map<string, Mutable<ExcalidrawElement>>,
 ) => {
-  if (element.frameId) {
-    const containingFrame = elementsMap.get(element.frameId);
+  if (!element.frameId) {
+    return;
+  }

-    if (!containingFrame) {
-      element.frameId = null;
-    }
+  if (
+    !isValidFrameChild(element) ||
+    // target frame not exists
+    !elementsMap.get(element.frameId)
+  ) {
+    element.frameId = null;
  }
 };

@@ -453,6 +461,8 @@ export const restoreElements = (
  // repair binding. Mutates elements.
  const restoredElementsMap = arrayToMap(restoredElements);
  for (const element of restoredElements) {
+    // repair frame membership *after* bindings we do in restoreElement()
+    // since we rely on bindings to be correct
    if (element.frameId) {
      repairFrameMembership(element, restoredElementsMap);
    }
@@ -5,31 +5,7 @@ import {
 } from "./transform";
 import { ExcalidrawArrowElement } from "../element/types";

-const opts = { regenerateIds: false };
-
 describe("Test Transform", () => {
-  it("should generate id unless opts.regenerateIds is set to false explicitly", () => {
-    const elements = [
-      {
-        type: "rectangle",
-        x: 100,
-        y: 100,
-        id: "rect-1",
-      },
-    ];
-    let data = convertToExcalidrawElements(
-      elements as ExcalidrawElementSkeleton[],
-    );
-    expect(data.length).toBe(1);
-    expect(data[0].id).toBe("id0");
-
-    data = convertToExcalidrawElements(
-      elements as ExcalidrawElementSkeleton[],
-      opts,
-    );
-    expect(data[0].id).toBe("rect-1");
-  });
-
  it("should transform regular shapes", () => {
    const elements = [
      {
@@ -83,7 +59,6 @@ describe("Test Transform", () => {

    convertToExcalidrawElements(
      elements as ExcalidrawElementSkeleton[],
-      opts,
    ).forEach((ele) => {
      expect(ele).toMatchSnapshot({
        seed: expect.any(Number),
@@ -112,7 +87,6 @@ describe("Test Transform", () => {
    ];
    convertToExcalidrawElements(
      elements as ExcalidrawElementSkeleton[],
-      opts,
    ).forEach((ele) => {
      expect(ele).toMatchSnapshot({
        seed: expect.any(Number),
@@ -154,7 +128,6 @@ describe("Test Transform", () => {
    ];
    const excaldrawElements = convertToExcalidrawElements(
      elements as ExcalidrawElementSkeleton[],
-      opts,
    );

    expect(excaldrawElements.length).toBe(4);
@@ -237,7 +210,6 @@ describe("Test Transform", () => {
    ];
    const excaldrawElements = convertToExcalidrawElements(
      elements as ExcalidrawElementSkeleton[],
-      opts,
    );

    expect(excaldrawElements.length).toBe(12);
@@ -295,7 +267,6 @@ describe("Test Transform", () => {
    ];
    const excaldrawElements = convertToExcalidrawElements(
      elements as ExcalidrawElementSkeleton[],
-      opts,
    );

    expect(excaldrawElements.length).toBe(8);
@@ -309,90 +280,6 @@ describe("Test Transform", () => {
    });
  });

-  describe("Test Frames", () => {
-    it("should transform frames and update frame ids when regenerated", () => {
-      const elementsSkeleton: ExcalidrawElementSkeleton[] = [
-        {
-          type: "rectangle",
-          x: 10,
-          y: 10,
-          strokeWidth: 2,
-          id: "1",
-        },
-        {
-          type: "diamond",
-          x: 120,
-          y: 20,
-          backgroundColor: "#fff3bf",
-          strokeWidth: 2,
-          label: {
-            text: "HELLO EXCALIDRAW",
-            strokeColor: "#099268",
-            fontSize: 30,
-          },
-          id: "2",
-        },
-        {
-          type: "frame",
-          children: ["1", "2"],
-          name: "My frame",
-        },
-      ];
-      const excaldrawElements = convertToExcalidrawElements(
-        elementsSkeleton,
-        opts,
-      );
-      expect(excaldrawElements.length).toBe(4);
-
-      excaldrawElements.forEach((ele) => {
-        expect(ele).toMatchObject({
-          seed: expect.any(Number),
-          versionNonce: expect.any(Number),
-          id: expect.any(String),
-        });
-      });
-    });
-
-    it("should consider max of calculated and frame dimensions when provided", () => {
-      const elementsSkeleton: ExcalidrawElementSkeleton[] = [
-        {
-          type: "rectangle",
-          x: 10,
-          y: 10,
-          strokeWidth: 2,
-          id: "1",
-        },
-        {
-          type: "diamond",
-          x: 120,
-          y: 20,
-          backgroundColor: "#fff3bf",
-          strokeWidth: 2,
-          label: {
-            text: "HELLO EXCALIDRAW",
-            strokeColor: "#099268",
-            fontSize: 30,
-          },
-          id: "2",
-        },
-        {
-          type: "frame",
-          children: ["1", "2"],
-          name: "My frame",
-          width: 800,
-          height: 100,
-        },
-      ];
-      const excaldrawElements = convertToExcalidrawElements(
-        elementsSkeleton,
-        opts,
-      );
-      const frame = excaldrawElements.find((ele) => ele.type === "frame")!;
-      expect(frame.width).toBe(800);
-      expect(frame.height).toBe(126);
-    });
-  });
-
  describe("Test arrow bindings", () => {
    it("should bind arrows to shapes when start / end provided without ids", () => {
      const elements = [
@@ -413,7 +300,6 @@ describe("Test Transform", () => {
      ];
      const excaldrawElements = convertToExcalidrawElements(
        elements as ExcalidrawElementSkeleton[],
-        opts,
      );

      expect(excaldrawElements.length).toBe(4);
@@ -435,7 +321,7 @@ describe("Test Transform", () => {
      });

      expect(text).toMatchObject({
-        x: 240,
+        x: 340,
        y: 226.5,
        type: "text",
        text: "HELLO WORLD!!",
@@ -455,7 +341,7 @@ describe("Test Transform", () => {
      });

      expect(ellipse).toMatchObject({
-        x: 355,
+        x: 555,
        y: 189,
        type: "ellipse",
        boundElements: [
@@ -497,10 +383,10 @@ describe("Test Transform", () => {

      const excaldrawElements = convertToExcalidrawElements(
        elements as ExcalidrawElementSkeleton[],
-        opts,
      );

      expect(excaldrawElements.length).toBe(4);
+
      const [arrow, text1, text2, text3] = excaldrawElements;

      expect(arrow).toMatchObject({
@@ -520,7 +406,7 @@ describe("Test Transform", () => {
      });

      expect(text1).toMatchObject({
-        x: 240,
+        x: 340,
        y: 226.5,
        type: "text",
        text: "HELLO WORLD!!",
@@ -540,7 +426,7 @@ describe("Test Transform", () => {
      });

      expect(text3).toMatchObject({
-        x: 355,
+        x: 555,
        y: 226.5,
        type: "text",
        boundElements: [
@@ -613,7 +499,6 @@ describe("Test Transform", () => {

      const excaldrawElements = convertToExcalidrawElements(
        elements as ExcalidrawElementSkeleton[],
-        opts,
      );

      expect(excaldrawElements.length).toBe(5);
@@ -662,7 +547,6 @@ describe("Test Transform", () => {

      const excaldrawElements = convertToExcalidrawElements(
        elements as ExcalidrawElementSkeleton[],
-        opts,
      );

      expect(excaldrawElements.length).toBe(4);
@@ -716,18 +600,17 @@ describe("Test Transform", () => {

      const excaldrawElements = convertToExcalidrawElements(
        elements as ExcalidrawElementSkeleton[],
-        opts,
      );

      expect(excaldrawElements.length).toBe(4);
-      const [, , arrow, text] = excaldrawElements;
+      const [, , arrow] = excaldrawElements;
      expect(arrow).toMatchObject({
        type: "arrow",
        x: 255,
        y: 239,
        boundElements: [
          {
-            id: text.id,
+            id: "id46",
            type: "text",
          },
        ],
@@ -767,18 +650,17 @@ describe("Test Transform", () => {
      ];
      const excaldrawElements = convertToExcalidrawElements(
        elements as ExcalidrawElementSkeleton[],
-        opts,
      );
      expect(excaldrawElements.length).toBe(2);
      const [arrow, rect] = excaldrawElements;
      expect((arrow as ExcalidrawArrowElement).endBinding).toStrictEqual({
        elementId: "rect-1",
        focus: 0,
-        gap: 205,
+        gap: 5,
      });
      expect(rect.boundElements).toStrictEqual([
        {
-          id: arrow.id,
+          id: "id47",
          type: "arrow",
        },
      ]);
@@ -810,7 +692,6 @@ describe("Test Transform", () => {
    ];
    const excaldrawElements = convertToExcalidrawElements(
      elements as ExcalidrawElementSkeleton[],
-      opts,
    );

    expect(excaldrawElements.length).toBe(1);
@@ -5,7 +5,6 @@ import {
  VERTICAL_ALIGN,
 } from "../constants";
 import {
-  getCommonBounds,
  newElement,
  newLinearElement,
  redrawTextBoundingBox,
@@ -13,7 +12,6 @@ import {
 import { bindLinearElement } from "../element/binding";
 import {
  ElementConstructorOpts,
-  newFrameElement,
  newImageElement,
  newTextElement,
 } from "../element/newElement";
@@ -40,9 +38,7 @@ import {
  VerticalAlign,
 } from "../element/types";
 import { MarkOptional } from "../utility-types";
-import { assertNever, cloneJSON, getFontString } from "../utils";
-import { getSizeFromPoints } from "../points";
-import { randomId } from "../random";
+import { assertNever, getFontString } from "../utils";

 export type ValidLinearElement = {
  type: "arrow" | "line";
@@ -137,7 +133,9 @@ export type ValidContainer =
 export type ExcalidrawElementSkeleton =
  | Extract<
      Exclude<ExcalidrawElement, ExcalidrawSelectionElement>,
-      ExcalidrawEmbeddableElement | ExcalidrawFreeDrawElement
+      | ExcalidrawEmbeddableElement
+      | ExcalidrawFreeDrawElement
+      | ExcalidrawFrameElement
    >
  | ({
      type: Extract<ExcalidrawLinearElement["type"], "line">;
@@ -158,15 +156,10 @@ export type ExcalidrawElementSkeleton =
      x: number;
      y: number;
      fileId: FileId;
-    } & Partial<ExcalidrawImageElement>)
-  | ({
-      type: "frame";
-      children: readonly ExcalidrawElement["id"][];
-      name?: string;
-    } & Partial<ExcalidrawFrameElement>);
+    } & Partial<ExcalidrawImageElement>);

 const DEFAULT_LINEAR_ELEMENT_PROPS = {
-  width: 100,
+  width: 300,
  height: 0,
 };

@@ -364,49 +357,6 @@ const bindLinearElementToElement = (
      );
    }
  }
-
-  // Update start/end points by 0.5 so bindings don't overlap with start/end bound element coordinates.
-  const endPointIndex = linearElement.points.length - 1;
-  const delta = 0.5;
-
-  const newPoints = cloneJSON(linearElement.points) as [number, number][];
-  // left to right so shift the arrow towards right
-  if (
-    linearElement.points[endPointIndex][0] >
-    linearElement.points[endPointIndex - 1][0]
-  ) {
-    newPoints[0][0] = delta;
-    newPoints[endPointIndex][0] -= delta;
-  }
-
-  // right to left so shift the arrow towards left
-  if (
-    linearElement.points[endPointIndex][0] <
-    linearElement.points[endPointIndex - 1][0]
-  ) {
-    newPoints[0][0] = -delta;
-    newPoints[endPointIndex][0] += delta;
-  }
-  // top to bottom so shift the arrow towards top
-  if (
-    linearElement.points[endPointIndex][1] >
-    linearElement.points[endPointIndex - 1][1]
-  ) {
-    newPoints[0][1] = delta;
-    newPoints[endPointIndex][1] -= delta;
-  }
-
-  // bottom to top so shift the arrow towards bottom
-  if (
-    linearElement.points[endPointIndex][1] <
-    linearElement.points[endPointIndex - 1][1]
-  ) {
-    newPoints[0][1] = -delta;
-    newPoints[endPointIndex][1] += delta;
-  }
-
-  Object.assign(linearElement, { points: newPoints });
-
  return {
    linearElement,
    startBoundElement,
@@ -434,25 +384,18 @@ class ElementStore {
 }

 export const convertToExcalidrawElements = (
-  elementsSkeleton: ExcalidrawElementSkeleton[] | null,
-  opts?: { regenerateIds: boolean },
+  elements: ExcalidrawElementSkeleton[] | null,
 ) => {
-  if (!elementsSkeleton) {
+  if (!elements) {
    return [];
  }
-  const elements = cloneJSON(elementsSkeleton);
+
  const elementStore = new ElementStore();
  const elementsWithIds = new Map<string, ExcalidrawElementSkeleton>();
-  const oldToNewElementIdMap = new Map<string, string>();

  // Create individual elements
  for (const element of elements) {
    let excalidrawElement: ExcalidrawElement;
-    const originalId = element.id;
-    if (opts?.regenerateIds !== false) {
-      Object.assign(element, { id: randomId() });
-    }
-
    switch (element.type) {
      case "rectangle":
      case "ellipse":
@@ -501,11 +444,6 @@ export const convertToExcalidrawElements = (
          ],
          ...element,
        });
-
-        Object.assign(
-          excalidrawElement,
-          getSizeFromPoints(excalidrawElement.points),
-        );
        break;
      }
      case "text": {
@@ -539,15 +477,8 @@ export const convertToExcalidrawElements = (

        break;
      }
-      case "frame": {
-        excalidrawElement = newFrameElement({
-          x: 0,
-          y: 0,
-          ...element,
-        });
-        break;
-      }
      case "freedraw":
+      case "frame":
      case "embeddable": {
        excalidrawElement = element;
        break;
@@ -568,9 +499,6 @@ export const convertToExcalidrawElements = (
    } else {
      elementStore.add(excalidrawElement);
      elementsWithIds.set(excalidrawElement.id, element);
-      if (originalId) {
-        oldToNewElementIdMap.set(originalId, excalidrawElement.id);
-      }
    }
  }

@@ -596,18 +524,6 @@ export const convertToExcalidrawElements = (
              element.type === "arrow" ? element?.start : undefined;
            const originalEnd =
              element.type === "arrow" ? element?.end : undefined;
-            if (originalStart && originalStart.id) {
-              const newStartId = oldToNewElementIdMap.get(originalStart.id);
-              if (newStartId) {
-                Object.assign(originalStart, { id: newStartId });
-              }
-            }
-            if (originalEnd && originalEnd.id) {
-              const newEndId = oldToNewElementIdMap.get(originalEnd.id);
-              if (newEndId) {
-                Object.assign(originalEnd, { id: newEndId });
-              }
-            }
            const { linearElement, startBoundElement, endBoundElement } =
              bindLinearElementToElement(
                container as ExcalidrawArrowElement,
@@ -623,23 +539,13 @@ export const convertToExcalidrawElements = (
        } else {
          switch (element.type) {
            case "arrow": {
-              const { start, end } = element;
-              if (start && start.id) {
-                const newStartId = oldToNewElementIdMap.get(start.id);
-                Object.assign(start, { id: newStartId });
-              }
-              if (end && end.id) {
-                const newEndId = oldToNewElementIdMap.get(end.id);
-                Object.assign(end, { id: newEndId });
-              }
              const { linearElement, startBoundElement, endBoundElement } =
                bindLinearElementToElement(
                  excalidrawElement as ExcalidrawArrowElement,
-                  start,
-                  end,
+                  element.start,
+                  element.end,
                  elementStore,
                );
-
              elementStore.add(linearElement);
              elementStore.add(startBoundElement);
              elementStore.add(endBoundElement);
@@ -651,60 +557,5 @@ export const convertToExcalidrawElements = (
      }
    }
  }
-
-  // Once all the excalidraw elements are created, we can add frames since we
-  // need to calculate coordinates and dimensions of frame which is possibe after all
-  // frame children are processed.
-  for (const [id, element] of elementsWithIds) {
-    if (element.type !== "frame") {
-      continue;
-    }
-    const frame = elementStore.getElement(id);
-
-    if (!frame) {
-      throw new Error(`Excalidraw element with id ${id} doesn't exist`);
-    }
-    const childrenElements: ExcalidrawElement[] = [];
-
-    element.children.forEach((id) => {
-      const newElementId = oldToNewElementIdMap.get(id);
-      if (!newElementId) {
-        throw new Error(`Element with ${id} wasn't mapped correctly`);
-      }
-
-      const elementInFrame = elementStore.getElement(newElementId);
-      if (!elementInFrame) {
-        throw new Error(`Frame element with id ${newElementId} doesn't exist`);
-      }
-      Object.assign(elementInFrame, { frameId: frame.id });
-
-      elementInFrame?.boundElements?.forEach((boundElement) => {
-        const ele = elementStore.getElement(boundElement.id);
-        if (!ele) {
-          throw new Error(
-            `Bound element with id ${boundElement.id} doesn't exist`,
-          );
-        }
-        Object.assign(ele, { frameId: frame.id });
-        childrenElements.push(ele);
-      });
-
-      childrenElements.push(elementInFrame);
-    });
-
-    let [minX, minY, maxX, maxY] = getCommonBounds(childrenElements);
-
-    const PADDING = 10;
-    minX = minX - PADDING;
-    minY = minY - PADDING;
-    maxX = maxX + PADDING;
-    maxY = maxY + PADDING;
-
-    // Take the max of calculated and provided frame dimensions, whichever is higher
-    const width = Math.max(frame?.width, maxX - minX);
-    const height = Math.max(frame?.height, maxY - minY);
-    Object.assign(frame, { x: minX, y: minY, width, height });
-  }
-
  return elementStore.getElements();
 };
@@ -392,7 +392,7 @@ export const getLinkHandleFromCoords = (
  [x1, y1, x2, y2]: Bounds,
  angle: number,
  appState: Pick<UIAppState, "zoom">,
-): Bounds => {
+): [x: number, y: number, width: number, height: number] => {
  const size = DEFAULT_LINK_SIZE;
  const linkWidth = size / appState.zoom.value;
  const linkHeight = size / appState.zoom.value;
@@ -27,6 +27,7 @@ import { LinearElementEditor } from "./linearElementEditor";
 import { arrayToMap, tupleToCoors } from "../utils";
 import { KEYS } from "../keys";
 import { getBoundTextElement, handleBindTextResize } from "./textElement";
+import { isValidFrameChild } from "../frame";

 export type SuggestedBinding =
  | NonDeleted<ExcalidrawBindableElement>
@@ -211,6 +212,15 @@ export const bindLinearElement = (
      }),
    });
  }
+  if (linearElement.frameId && !isValidFrameChild(linearElement)) {
+    mutateElement(
+      linearElement,
+      {
+        frameId: null,
+      },
+      false,
+    );
+  }
 };

 // Don't bind both ends of a simple segment
@@ -34,12 +34,7 @@ export type RectangleBox = {
 type MaybeQuadraticSolution = [number | null, number | null] | false;

 // x and y position of top left corner, x and y position of bottom right corner
-export type Bounds = readonly [
-  minX: number,
-  minY: number,
-  maxX: number,
-  maxY: number,
-];
+export type Bounds = readonly [x1: number, y1: number, x2: number, y2: number];

 export class ElementBounds {
  private static boundsCache = new WeakMap<
@@ -68,7 +63,7 @@ export class ElementBounds {
  }

  private static calculateBounds(element: ExcalidrawElement): Bounds {
-    let bounds: Bounds;
+    let bounds: [number, number, number, number];

    const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(element);

@@ -392,7 +387,7 @@ const getCubicBezierCurveBound = (
 export const getMinMaxXYFromCurvePathOps = (
  ops: Op[],
  transformXY?: (x: number, y: number) => [number, number],
-): Bounds => {
+): [number, number, number, number] => {
  let currentP: Point = [0, 0];

  const { minX, minY, maxX, maxY } = ops.reduce(
@@ -440,9 +435,9 @@ export const getMinMaxXYFromCurvePathOps = (
  return [minX, minY, maxX, maxY];
 };

-export const getBoundsFromPoints = (
+const getBoundsFromPoints = (
  points: ExcalidrawFreeDrawElement["points"],
-): Bounds => {
+): [number, number, number, number] => {
  let minX = Infinity;
  let minY = Infinity;
  let maxX = -Infinity;
@@ -594,7 +589,7 @@ const getLinearElementRotatedBounds = (
  element: ExcalidrawLinearElement,
  cx: number,
  cy: number,
-): Bounds => {
+): [number, number, number, number] => {
  if (element.points.length < 2) {
    const [pointX, pointY] = element.points[0];
    const [x, y] = rotate(
@@ -605,7 +600,7 @@ const getLinearElementRotatedBounds = (
      element.angle,
    );

-    let coords: Bounds = [x, y, x, y];
+    let coords: [number, number, number, number] = [x, y, x, y];
    const boundTextElement = getBoundTextElement(element);
    if (boundTextElement) {
      const coordsWithBoundText = LinearElementEditor.getMinMaxXYWithBoundText(
@@ -630,7 +625,12 @@ const getLinearElementRotatedBounds = (
  const transformXY = (x: number, y: number) =>
    rotate(element.x + x, element.y + y, cx, cy, element.angle);
  const res = getMinMaxXYFromCurvePathOps(ops, transformXY);
-  let coords: Bounds = [res[0], res[1], res[2], res[3]];
+  let coords: [number, number, number, number] = [
+    res[0],
+    res[1],
+    res[2],
+    res[3],
+  ];
  const boundTextElement = getBoundTextElement(element);
  if (boundTextElement) {
    const coordsWithBoundText = LinearElementEditor.getMinMaxXYWithBoundText(
@@ -692,7 +692,7 @@ export const getResizedElementAbsoluteCoords = (
  nextWidth: number,
  nextHeight: number,
  normalizePoints: boolean,
-): Bounds => {
+): [number, number, number, number] => {
  if (!(isLinearElement(element) || isFreeDrawElement(element))) {
    return [
      element.x,
@@ -709,7 +709,7 @@ export const getResizedElementAbsoluteCoords = (
    normalizePoints,
  );

-  let bounds: Bounds;
+  let bounds: [number, number, number, number];

  if (isFreeDrawElement(element)) {
    // Free Draw
@@ -740,8 +740,8 @@ export const getResizedElementAbsoluteCoords = (
 export const getElementPointsCoords = (
  element: ExcalidrawLinearElement,
  points: readonly (readonly [number, number])[],
-): Bounds => {
-  // This might be computationally heavey
+): [number, number, number, number] => {
+  // This might be computationally heavy
  const gen = rough.generator();
  const curve =
    element.roundness == null
@@ -494,9 +494,7 @@ const hitTestFreeDrawElement = (
  // for filled freedraw shapes, support
  // selecting from inside
  if (shape && shape.sets.length) {
-    return element.fillStyle === "solid"
-      ? hitTestCurveInside(shape, x, y, "round")
-      : hitTestRoughShape(shape, x, y, threshold);
+    return hitTestCurveInside(shape, x, y, "round");
  }

  return false;
@@ -1,5 +1,5 @@
 import { updateBoundElements } from "./binding";
-import { Bounds, getCommonBounds } from "./bounds";
+import { getCommonBounds } from "./bounds";
 import { mutateElement } from "./mutateElement";
 import { getPerfectElementSize } from "./sizeHelpers";
 import { NonDeletedExcalidrawElement } from "./types";
@@ -8,11 +8,7 @@ import { getBoundTextElement } from "./textElement";
 import { isSelectedViaGroup } from "../groups";
 import { getGridPoint } from "../math";
 import Scene from "../scene/Scene";
-import {
-  isArrowElement,
-  isBoundToContainer,
-  isFrameElement,
-} from "./typeChecks";
+import { isFrameElement } from "./typeChecks";

 export const dragSelectedElements = (
  pointerDownState: PointerDownState,
@@ -39,41 +35,44 @@ export const dragSelectedElements = (
  if (frames.length > 0) {
    const elementsInFrames = scene
      .getNonDeletedElements()
-      .filter((e) => !isBoundToContainer(e))
      .filter((e) => e.frameId !== null)
      .filter((e) => frames.includes(e.frameId!));

    elementsInFrames.forEach((element) => elementsToUpdate.add(element));
  }

-  const commonBounds = getCommonBounds(
-    Array.from(elementsToUpdate).map(
-      (el) => pointerDownState.originalElements.get(el.id) ?? el,
-    ),
-  );
-  const adjustedOffset = calculateOffset(
-    commonBounds,
-    offset,
-    snapOffset,
-    gridSize,
-  );
-
  elementsToUpdate.forEach((element) => {
-    updateElementCoords(pointerDownState, element, adjustedOffset);
+    updateElementCoords(
+      pointerDownState,
+      element,
+      offset,
+      snapOffset,
+      gridSize,
+    );
    // update coords of bound text only if we're dragging the container directly
    // (we don't drag the group that it's part of)
    if (
-      // Don't update coords of arrow label since we calculate its position during render
-      !isArrowElement(element) &&
      // container isn't part of any group
      // (perf optim so we don't check `isSelectedViaGroup()` in every case)
-      (!element.groupIds.length ||
-        // container is part of a group, but we're dragging the container directly
-        (appState.editingGroupId && !isSelectedViaGroup(appState, element)))
+      !element.groupIds.length ||
+      // container is part of a group, but we're dragging the container directly
+      (appState.editingGroupId && !isSelectedViaGroup(appState, element))
    ) {
      const textElement = getBoundTextElement(element);
-      if (textElement) {
-        updateElementCoords(pointerDownState, textElement, adjustedOffset);
+      if (
+        textElement &&
+        // when container is added to a frame, so will its bound text
+        // so the text is already in `elementsToUpdate` and we should avoid
+        // updating its coords again
+        (!textElement.frameId || !frames.includes(textElement.frameId))
+      ) {
+        updateElementCoords(
+          pointerDownState,
+          textElement,
+          offset,
+          snapOffset,
+          gridSize,
+        );
      }
    }
    updateBoundElements(element, {
@@ -82,20 +81,23 @@ export const dragSelectedElements = (
  });
 };

-const calculateOffset = (
-  commonBounds: Bounds,
+const updateElementCoords = (
+  pointerDownState: PointerDownState,
+  element: NonDeletedExcalidrawElement,
  dragOffset: { x: number; y: number },
  snapOffset: { x: number; y: number },
  gridSize: AppState["gridSize"],
-): { x: number; y: number } => {
-  const [x, y] = commonBounds;
-  let nextX = x + dragOffset.x + snapOffset.x;
-  let nextY = y + dragOffset.y + snapOffset.y;
+) => {
+  const originalElement =
+    pointerDownState.originalElements.get(element.id) ?? element;
+
+  let nextX = originalElement.x + dragOffset.x + snapOffset.x;
+  let nextY = originalElement.y + dragOffset.y + snapOffset.y;

  if (snapOffset.x === 0 || snapOffset.y === 0) {
    const [nextGridX, nextGridY] = getGridPoint(
-      x + dragOffset.x,
-      y + dragOffset.y,
+      originalElement.x + dragOffset.x,
+      originalElement.y + dragOffset.y,
      gridSize,
    );

@@ -107,22 +109,6 @@ const calculateOffset = (
      nextY = nextGridY;
    }
  }
-  return {
-    x: nextX - x,
-    y: nextY - y,
-  };
-};
-
-const updateElementCoords = (
-  pointerDownState: PointerDownState,
-  element: NonDeletedExcalidrawElement,
-  dragOffset: { x: number; y: number },
-) => {
-  const originalElement =
-    pointerDownState.originalElements.get(element.id) ?? element;
-
-  const nextX = originalElement.x + dragOffset.x;
-  const nextY = originalElement.y + dragOffset.y;

  mutateElement(element, {
    x: nextX,
@@ -48,9 +48,6 @@ const RE_VALTOWN =
 const RE_GENERIC_EMBED =
  /^<(?:iframe|blockquote)[\s\S]*?\s(?:src|href)=["']([^"']*)["'][\s\S]*?>$/i;

-const RE_GIPHY =
-  /giphy.com\/(?:clips|embed|gifs)\/[a-zA-Z0-9]*?-?([a-zA-Z0-9]+)(?:[^a-zA-Z0-9]|$)/;
-
 const ALLOWED_DOMAINS = new Set([
  "youtube.com",
  "youtu.be",
@@ -63,8 +60,6 @@ const ALLOWED_DOMAINS = new Set([
  "*.simplepdf.eu",
  "stackblitz.com",
  "val.town",
-  "giphy.com",
-  "dddice.com",
 ]);

 const createSrcDoc = (body: string) => {
@@ -201,7 +196,7 @@ export const getEmbedLink = (link: string | null | undefined): EmbeddedLink => {
  return { link, aspectRatio, type };
 };

-export const isEmbeddableOrLabel = (
+export const isEmbeddableOrFrameLabel = (
  element: NonDeletedExcalidrawElement,
 ): Boolean => {
  if (isEmbeddableElement(element)) {
@@ -314,10 +309,6 @@ export const extractSrc = (htmlString: string): string => {
    return gistMatch[1];
  }

-  if (RE_GIPHY.test(htmlString)) {
-    return `https://giphy.com/embed/${RE_GIPHY.exec(htmlString)![1]}`;
-  }
-
  const match = htmlString.match(RE_GENERIC_EMBED);
  if (match && match.length === 2) {
    return match[1];
@@ -21,7 +21,6 @@ import {
 } from "../math";
 import { getElementAbsoluteCoords, getLockedLinearCursorAlignSize } from ".";
 import {
-  Bounds,
  getCurvePathOps,
  getElementPointsCoords,
  getMinMaxXYFromCurvePathOps,
@@ -548,7 +547,10 @@ export class LinearElementEditor {
    endPointIndex: number,
  ) {
    let segmentMidPoint = centerPoint(startPoint, endPoint);
-    if (element.points.length > 2 && element.roundness) {
+    const splits = element.segmentSplitIndices || [];
+    const treatAsCurve =
+      splits.includes(endPointIndex) || splits.includes(endPointIndex - 1);
+    if (element.points.length > 2 && (element.roundness || treatAsCurve)) {
      const controlPoints = getControlPointsForBezierCurve(
        element,
        element.points[endPointIndex],
@@ -1043,13 +1045,15 @@ export class LinearElementEditor {
    let offsetX = 0;
    let offsetY = 0;

-    const isDeletingOriginPoint = pointIndices.includes(0);
+    const indexSet = new Set(pointIndices);
+
+    const isDeletingOriginPoint = indexSet.has(0);

    // if deleting first point, make the next to be [0,0] and recalculate
    // positions of the rest with respect to it
    if (isDeletingOriginPoint) {
      const firstNonDeletedPoint = element.points.find((point, idx) => {
-        return !pointIndices.includes(idx);
+        return !indexSet.has(idx);
      });
      if (firstNonDeletedPoint) {
        offsetX = firstNonDeletedPoint[0];
@@ -1058,7 +1062,7 @@ export class LinearElementEditor {
    }

    const nextPoints = element.points.reduce((acc: Point[], point, idx) => {
-      if (!pointIndices.includes(idx)) {
+      if (!indexSet.has(idx)) {
        acc.push(
          !acc.length ? [0, 0] : [point[0] - offsetX, point[1] - offsetY],
        );
@@ -1066,7 +1070,22 @@ export class LinearElementEditor {
      return acc;
    }, []);

-    LinearElementEditor._updatePoints(element, nextPoints, offsetX, offsetY);
+    const splits: number[] = [];
+    (element.segmentSplitIndices || []).forEach((index) => {
+      if (!indexSet.has(index)) {
+        let shift = 0;
+        for (const pointIndex of pointIndices) {
+          if (index > pointIndex) {
+            shift++;
+          }
+        }
+        splits.push(index - shift);
+      }
+    });
+
+    LinearElementEditor._updatePoints(element, nextPoints, offsetX, offsetY, {
+      segmentSplitIndices: splits.sort((a, b) => a - b),
+    });
  }

  static addPoints(
@@ -1205,9 +1224,13 @@ export class LinearElementEditor {
      midpoint,
      ...element.points.slice(segmentMidpoint.index!),
    ];
+    const splits = (element.segmentSplitIndices || []).map((index) =>
+      index >= segmentMidpoint.index! ? index + 1 : index,
+    );

    mutateElement(element, {
      points,
+      segmentSplitIndices: splits.sort((a, b) => a - b),
    });

    ret.pointerDownState = {
@@ -1227,7 +1250,11 @@ export class LinearElementEditor {
    nextPoints: readonly Point[],
    offsetX: number,
    offsetY: number,
-    otherUpdates?: { startBinding?: PointBinding; endBinding?: PointBinding },
+    otherUpdates?: {
+      startBinding?: PointBinding;
+      endBinding?: PointBinding;
+      segmentSplitIndices?: number[];
+    },
  ) {
    const nextCoords = getElementPointsCoords(element, nextPoints);
    const prevCoords = getElementPointsCoords(element, element.points);
@@ -1317,7 +1344,7 @@ export class LinearElementEditor {

  static getMinMaxXYWithBoundText = (
    element: ExcalidrawLinearElement,
-    elementBounds: Bounds,
+    elementBounds: [number, number, number, number],
    boundTextElement: ExcalidrawTextElementWithContainer,
  ): [number, number, number, number, number, number] => {
    let [x1, y1, x2, y2] = elementBounds;
@@ -1473,6 +1500,27 @@ export class LinearElementEditor {

    return coords;
  };
+
+  static toggleSegmentSplitAtIndex(
+    element: NonDeleted<ExcalidrawLinearElement>,
+    index: number,
+  ) {
+    let found = false;
+    const splitIndices = (element.segmentSplitIndices || []).filter((idx) => {
+      if (idx === index) {
+        found = true;
+        return false;
+      }
+      return true;
+    });
+    if (!found) {
+      splitIndices.push(index);
+    }
+
+    mutateElement(element, {
+      segmentSplitIndices: splitIndices.sort((a, b) => a - b),
+    });
+  }
 }

 const normalizeSelectedPoints = (
@@ -25,7 +25,7 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(

  // casting to any because can't use `in` operator
  // (see https://github.com/microsoft/TypeScript/issues/21732)
-  const { points, fileId } = updates as any;
+  const { points, fileId, segmentSplitIndices } = updates as any;

  if (typeof points !== "undefined") {
    updates = { ...getSizeFromPoints(points), ...updates };
@@ -86,6 +86,7 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
  if (
    typeof updates.height !== "undefined" ||
    typeof updates.width !== "undefined" ||
+    typeof segmentSplitIndices !== "undefined" ||
    typeof fileId != "undefined" ||
    typeof points !== "undefined"
  ) {
@@ -144,15 +144,13 @@ export const newEmbeddableElement = (
 };

 export const newFrameElement = (
-  opts: {
-    name?: string;
-  } & ElementConstructorOpts,
+  opts: ElementConstructorOpts,
 ): NonDeleted<ExcalidrawFrameElement> => {
  const frameElement = newElementWith(
    {
      ..._newElementBase<ExcalidrawFrameElement>("frame", opts),
      type: "frame",
-      name: opts?.name || null,
+      name: null,
    },
    {},
  );
@@ -376,6 +374,7 @@ export const newLinearElement = (
    endBinding: null,
    startArrowhead: opts.startArrowhead || null,
    endArrowhead: opts.endArrowhead || null,
+    segmentSplitIndices: [],
  };
 };

@@ -13,7 +13,6 @@ import {
  MaybeTransformHandleType,
 } from "./transformHandles";
 import { AppState, Zoom } from "../types";
-import { Bounds } from "./bounds";

 const isInsideTransformHandle = (
  transformHandle: TransformHandle,
@@ -88,7 +87,7 @@ export const getElementWithTransformHandleType = (
 };

 export const getTransformHandleTypeFromCoords = (
-  [x1, y1, x2, y2]: Bounds,
+  [x1, y1, x2, y2]: readonly [number, number, number, number],
  scenePointerX: number,
  scenePointerY: number,
  zoom: Zoom,
@@ -91,7 +91,7 @@ export const redrawTextBoundingBox = (
    );
    const maxContainerWidth = getBoundTextMaxWidth(container);

-    if (!isArrowElement(container) && metrics.height > maxContainerHeight) {
+    if (metrics.height > maxContainerHeight) {
      const nextHeight = computeContainerDimensionForBoundText(
        metrics.height,
        container.type,
@@ -18,7 +18,7 @@ import {
 import { API } from "../tests/helpers/api";
 import { mutateElement } from "./mutateElement";
 import { getOriginalContainerHeightFromCache } from "./textWysiwyg";
-import { getTextEditor, updateTextEditor } from "../tests/queries/dom";
+import { getTextEditor } from "../tests/queries/dom";

 // Unmount ReactDOM from root
 ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
@@ -26,7 +26,10 @@ ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
 const tab = "    ";
 const mouse = new Pointer("mouse");

-const textEditorSelector = ".excalidraw-textEditorContainer > textarea";
+const updateTextEditor = (editor: HTMLTextAreaElement, value: string) => {
+  fireEvent.change(editor, { target: { value } });
+  editor.dispatchEvent(new Event("input"));
+};

 describe("textWysiwyg", () => {
  describe("start text editing", () => {
@@ -192,7 +195,7 @@ describe("textWysiwyg", () => {

      mouse.clickAt(text.x + 50, text.y + 50);

-      const editor = await getTextEditor(textEditorSelector, false);
+      const editor = await getTextEditor(false);

      expect(editor).not.toBe(null);
      expect(h.state.editingElement?.id).toBe(text.id);
@@ -214,26 +217,12 @@ describe("textWysiwyg", () => {

      mouse.doubleClickAt(text.x + 50, text.y + 50);

-      const editor = await getTextEditor(textEditorSelector, false);
+      const editor = await getTextEditor(false);

      expect(editor).not.toBe(null);
      expect(h.state.editingElement?.id).toBe(text.id);
      expect(h.elements.length).toBe(1);
    });
-
-    // FIXME too flaky. No one knows why.
-    it.skip("should bump the version of a labeled arrow when the label is updated", async () => {
-      const arrow = UI.createElement("arrow", {
-        width: 300,
-        height: 0,
-      });
-      await UI.editText(arrow, "Hello");
-      const { version } = arrow;
-
-      await UI.editText(arrow, "Hello\nworld!");
-
-      expect(arrow.version).toEqual(version + 1);
-    });
  });

  describe("Test container-unbound text", () => {
@@ -249,15 +238,13 @@ describe("textWysiwyg", () => {

    beforeEach(async () => {
      await render(<Excalidraw handleKeyboardGlobally={true} />);
-      // @ts-ignore
-      h.app.refreshViewportBreakpoints();
-      // @ts-ignore
-      h.app.refreshEditorBreakpoints();
+      //@ts-ignore
+      h.app.refreshDeviceState(h.app.excalidrawContainerRef.current!);

      textElement = UI.createElement("text");

      mouse.clickOn(textElement);
-      textarea = await getTextEditor(textEditorSelector, true);
+      textarea = await getTextEditor(true);
    });

    afterAll(() => {
@@ -467,7 +454,7 @@ describe("textWysiwyg", () => {
      UI.clickTool("text");
      mouse.clickAt(750, 300);

-      textarea = await getTextEditor(textEditorSelector, true);
+      textarea = await getTextEditor(true);
      updateTextEditor(
        textarea,
        "Excalidraw is an opensource virtual collaborative whiteboard for sketching hand-drawn like diagrams!",
@@ -519,7 +506,7 @@ describe("textWysiwyg", () => {
        { id: text.id, type: "text" },
      ]);
      mouse.down();
-      const editor = await getTextEditor(textEditorSelector, true);
+      const editor = await getTextEditor(true);

      updateTextEditor(editor, "Hello World!");

@@ -547,7 +534,7 @@ describe("textWysiwyg", () => {
      ]);
      expect(text.angle).toBe(rectangle.angle);
      mouse.down();
-      const editor = await getTextEditor(textEditorSelector, true);
+      const editor = await getTextEditor(true);

      updateTextEditor(editor, "Hello World!");

@@ -574,7 +561,7 @@ describe("textWysiwyg", () => {
      API.setSelectedElements([diamond]);
      Keyboard.keyPress(KEYS.ENTER);

-      const editor = await getTextEditor(textEditorSelector, true);
+      const editor = await getTextEditor(true);

      await new Promise((r) => setTimeout(r, 0));
      const value = new Array(1000).fill("1").join("\n");
@@ -609,7 +596,7 @@ describe("textWysiwyg", () => {
      expect(text.type).toBe("text");
      expect(text.containerId).toBe(null);
      mouse.down();
-      let editor = await getTextEditor(textEditorSelector, true);
+      let editor = await getTextEditor(true);
      await new Promise((r) => setTimeout(r, 0));
      editor.blur();

@@ -624,7 +611,7 @@ describe("textWysiwyg", () => {
      expect(text.containerId).toBe(rectangle.id);

      mouse.down();
-      editor = await getTextEditor(textEditorSelector, true);
+      editor = await getTextEditor(true);

      updateTextEditor(editor, "Hello World!");
      await new Promise((r) => setTimeout(r, 0));
@@ -646,7 +633,7 @@ describe("textWysiwyg", () => {
      const text = h.elements[1] as ExcalidrawTextElementWithContainer;
      expect(text.type).toBe("text");
      expect(text.containerId).toBe(rectangle.id);
-      const editor = await getTextEditor(textEditorSelector, true);
+      const editor = await getTextEditor(true);

      await new Promise((r) => setTimeout(r, 0));

@@ -681,7 +668,7 @@ describe("textWysiwyg", () => {
        { id: text.id, type: "text" },
      ]);
      mouse.down();
-      const editor = await getTextEditor(textEditorSelector, true);
+      const editor = await getTextEditor(true);
      updateTextEditor(editor, "Hello World!");

      await new Promise((r) => setTimeout(r, 0));
@@ -706,7 +693,7 @@ describe("textWysiwyg", () => {
        freedraw.y + freedraw.height / 2,
      );

-      const editor = await getTextEditor(textEditorSelector, true);
+      const editor = await getTextEditor(true);
      updateTextEditor(editor, "Hello World!");
      fireEvent.keyDown(editor, { key: KEYS.ESCAPE });

@@ -740,7 +727,7 @@ describe("textWysiwyg", () => {
      expect(text.type).toBe("text");
      expect(text.containerId).toBe(null);
      mouse.down();
-      const editor = await getTextEditor(textEditorSelector, true);
+      const editor = await getTextEditor(true);

      updateTextEditor(editor, "Hello World!");

@@ -755,7 +742,7 @@ describe("textWysiwyg", () => {

      UI.clickTool("text");
      mouse.clickAt(20, 30);
-      const editor = await getTextEditor(textEditorSelector, true);
+      const editor = await getTextEditor(true);

      updateTextEditor(
        editor,
@@ -800,7 +787,7 @@ describe("textWysiwyg", () => {
      mouse.down();

      const text = h.elements[1] as ExcalidrawTextElementWithContainer;
-      let editor = await getTextEditor(textEditorSelector, true);
+      let editor = await getTextEditor(true);

      await new Promise((r) => setTimeout(r, 0));
      updateTextEditor(editor, "Hello World!");
@@ -813,7 +800,7 @@ describe("textWysiwyg", () => {
        rectangle.y + rectangle.height / 2,
      );
      mouse.down();
-      editor = await getTextEditor(textEditorSelector, true);
+      editor = await getTextEditor(true);

      editor.select();
      fireEvent.click(screen.getByTitle(/code/i));
@@ -846,7 +833,7 @@ describe("textWysiwyg", () => {

      Keyboard.keyDown(KEYS.ENTER);
      let text = h.elements[1] as ExcalidrawTextElementWithContainer;
-      let editor = await getTextEditor(textEditorSelector, true);
+      let editor = await getTextEditor(true);

      updateTextEditor(editor, "Hello World!");

@@ -867,7 +854,7 @@ describe("textWysiwyg", () => {
      mouse.select(rectangle);
      Keyboard.keyPress(KEYS.ENTER);

-      editor = await getTextEditor(textEditorSelector, true);
+      editor = await getTextEditor(true);
      updateTextEditor(editor, "Hello");

      await new Promise((r) => setTimeout(r, 0));
@@ -896,7 +883,7 @@ describe("textWysiwyg", () => {
      const text = h.elements[1] as ExcalidrawTextElementWithContainer;
      expect(text.containerId).toBe(rectangle.id);

-      const editor = await getTextEditor(textEditorSelector, true);
+      const editor = await getTextEditor(true);

      await new Promise((r) => setTimeout(r, 0));

@@ -933,7 +920,7 @@ describe("textWysiwyg", () => {
      // Bind first text
      const text = h.elements[1] as ExcalidrawTextElementWithContainer;
      expect(text.containerId).toBe(rectangle.id);
-      const editor = await getTextEditor(textEditorSelector, true);
+      const editor = await getTextEditor(true);
      await new Promise((r) => setTimeout(r, 0));
      updateTextEditor(editor, "Hello World!");
      editor.blur();
@@ -954,7 +941,7 @@ describe("textWysiwyg", () => {
    it("should respect text alignment when resizing", async () => {
      Keyboard.keyPress(KEYS.ENTER);

-      let editor = await getTextEditor(textEditorSelector, true);
+      let editor = await getTextEditor(true);
      await new Promise((r) => setTimeout(r, 0));
      updateTextEditor(editor, "Hello");
      editor.blur();
@@ -971,7 +958,7 @@ describe("textWysiwyg", () => {
      mouse.select(rectangle);
      Keyboard.keyPress(KEYS.ENTER);

-      editor = await getTextEditor(textEditorSelector, true);
+      editor = await getTextEditor(true);

      editor.select();

@@ -994,7 +981,7 @@ describe("textWysiwyg", () => {

      mouse.select(rectangle);
      Keyboard.keyPress(KEYS.ENTER);
-      editor = await getTextEditor(textEditorSelector, true);
+      editor = await getTextEditor(true);

      editor.select();

@@ -1032,7 +1019,7 @@ describe("textWysiwyg", () => {
      expect(text.type).toBe("text");
      expect(text.containerId).toBe(rectangle.id);
      mouse.down();
-      const editor = await getTextEditor(textEditorSelector, true);
+      const editor = await getTextEditor(true);

      updateTextEditor(editor, "Hello World!");

@@ -1047,7 +1034,7 @@ describe("textWysiwyg", () => {
    it("should scale font size correctly when resizing using shift", async () => {
      Keyboard.keyPress(KEYS.ENTER);

-      const editor = await getTextEditor(textEditorSelector, true);
+      const editor = await getTextEditor(true);
      await new Promise((r) => setTimeout(r, 0));
      updateTextEditor(editor, "Hello");
      editor.blur();
@@ -1067,7 +1054,7 @@ describe("textWysiwyg", () => {
    it("should bind text correctly when container duplicated with alt-drag", async () => {
      Keyboard.keyPress(KEYS.ENTER);

-      const editor = await getTextEditor(textEditorSelector, true);
+      const editor = await getTextEditor(true);
      await new Promise((r) => setTimeout(r, 0));
      updateTextEditor(editor, "Hello");
      editor.blur();
@@ -1099,7 +1086,7 @@ describe("textWysiwyg", () => {

    it("undo should work", async () => {
      Keyboard.keyPress(KEYS.ENTER);
-      const editor = await getTextEditor(textEditorSelector, true);
+      const editor = await getTextEditor(true);
      await new Promise((r) => setTimeout(r, 0));
      updateTextEditor(editor, "Hello");
      editor.blur();
@@ -1136,7 +1123,7 @@ describe("textWysiwyg", () => {

    it("should not allow bound text with only whitespaces", async () => {
      Keyboard.keyPress(KEYS.ENTER);
-      const editor = await getTextEditor(textEditorSelector, true);
+      const editor = await getTextEditor(true);
      await new Promise((r) => setTimeout(r, 0));

      updateTextEditor(editor, "   ");
@@ -1191,7 +1178,7 @@ describe("textWysiwyg", () => {
    it("should reset the container height cache when resizing", async () => {
      Keyboard.keyPress(KEYS.ENTER);
      expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(75);
-      let editor = await getTextEditor(textEditorSelector, true);
+      let editor = await getTextEditor(true);
      await new Promise((r) => setTimeout(r, 0));
      updateTextEditor(editor, "Hello");
      editor.blur();
@@ -1203,7 +1190,7 @@ describe("textWysiwyg", () => {
      mouse.select(rectangle);
      Keyboard.keyPress(KEYS.ENTER);

-      editor = await getTextEditor(textEditorSelector, true);
+      editor = await getTextEditor(true);

      await new Promise((r) => setTimeout(r, 0));
      editor.blur();
@@ -1219,7 +1206,7 @@ describe("textWysiwyg", () => {
      Keyboard.keyPress(KEYS.ENTER);
      expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(75);

-      const editor = await getTextEditor(textEditorSelector, true);
+      const editor = await getTextEditor(true);
      updateTextEditor(editor, "Hello World!");
      editor.blur();

@@ -1244,7 +1231,7 @@ describe("textWysiwyg", () => {
      Keyboard.keyPress(KEYS.ENTER);
      expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(75);

-      const editor = await getTextEditor(textEditorSelector, true);
+      const editor = await getTextEditor(true);
      updateTextEditor(editor, "Hello World!");
      editor.blur();
      expect(
@@ -1276,12 +1263,12 @@ describe("textWysiwyg", () => {

      beforeEach(async () => {
        Keyboard.keyPress(KEYS.ENTER);
-        editor = await getTextEditor(textEditorSelector, true);
+        editor = await getTextEditor(true);
        updateTextEditor(editor, "Hello");
        editor.blur();
        mouse.select(rectangle);
        Keyboard.keyPress(KEYS.ENTER);
-        editor = await getTextEditor(textEditorSelector, true);
+        editor = await getTextEditor(true);
        editor.select();
      });

@@ -1392,7 +1379,7 @@ describe("textWysiwyg", () => {
    it("should wrap text in a container when wrap text in container triggered from context menu", async () => {
      UI.clickTool("text");
      mouse.clickAt(20, 30);
-      const editor = await getTextEditor(textEditorSelector, true);
+      const editor = await getTextEditor(true);

      updateTextEditor(
        editor,
@@ -1480,7 +1467,7 @@ describe("textWysiwyg", () => {
      // Bind first text
      let text = h.elements[1] as ExcalidrawTextElementWithContainer;
      expect(text.containerId).toBe(rectangle.id);
-      let editor = await getTextEditor(textEditorSelector, true);
+      let editor = await getTextEditor(true);
      await new Promise((r) => setTimeout(r, 0));
      updateTextEditor(editor, "Hello!");
      expect(
@@ -1505,7 +1492,7 @@ describe("textWysiwyg", () => {
        rectangle.x + rectangle.width / 2,
        rectangle.y + rectangle.height / 2,
      );
-      editor = await getTextEditor(textEditorSelector, true);
+      editor = await getTextEditor(true);
      await new Promise((r) => setTimeout(r, 0));
      updateTextEditor(editor, "Excalidraw");
      editor.blur();
@@ -1519,4 +1506,18 @@ describe("textWysiwyg", () => {
      expect(text.text).toBe("Excalidraw");
    });
  });
+
+  it("should bump the version of a labeled arrow when the label is updated", async () => {
+    await render(<Excalidraw handleKeyboardGlobally={true} />);
+    const arrow = UI.createElement("arrow", {
+      width: 300,
+      height: 0,
+    });
+    await UI.editText(arrow, "Hello");
+    const { version } = arrow;
+
+    await UI.editText(arrow, "Hello\nworld!");
+
+    expect(arrow.version).toEqual(version + 1);
+  });
 });
@@ -4,7 +4,7 @@ import {
  PointerType,
 } from "./types";

-import { Bounds, getElementAbsoluteCoords } from "./bounds";
+import { getElementAbsoluteCoords } from "./bounds";
 import { rotate } from "../math";
 import { InteractiveCanvasAppState, Zoom } from "../types";
 import { isTextElement } from ".";
@@ -23,7 +23,7 @@ export type TransformHandleDirection =

 export type TransformHandleType = TransformHandleDirection | "rotation";

-export type TransformHandle = Bounds;
+export type TransformHandle = [number, number, number, number];
 export type TransformHandles = Partial<{
  [T in TransformHandleType]: TransformHandle;
 }>;
@@ -1,7 +1,6 @@
 import { ROUNDNESS } from "../constants";
 import { AppState } from "../types";
 import { MarkNonNullable } from "../utility-types";
-import { assertNever } from "../utils";
 import {
  ExcalidrawElement,
  ExcalidrawTextElement,
@@ -141,32 +140,17 @@ export const isTextBindableContainer = (
  );
 };

-export const isExcalidrawElement = (
-  element: any,
-): element is ExcalidrawElement => {
-  const type: ExcalidrawElement["type"] | undefined = element?.type;
-  if (!type) {
-    return false;
-  }
-  switch (type) {
-    case "text":
-    case "diamond":
-    case "rectangle":
-    case "embeddable":
-    case "ellipse":
-    case "arrow":
-    case "freedraw":
-    case "line":
-    case "frame":
-    case "image":
-    case "selection": {
-      return true;
-    }
-    default: {
-      assertNever(type, null);
-      return false;
-    }
-  }
+export const isExcalidrawElement = (element: any): boolean => {
+  return (
+    element?.type === "text" ||
+    element?.type === "diamond" ||
+    element?.type === "rectangle" ||
+    element?.type === "embeddable" ||
+    element?.type === "ellipse" ||
+    element?.type === "arrow" ||
+    element?.type === "freedraw" ||
+    element?.type === "line"
+  );
 };

 export const hasBoundTextElement = (
@@ -195,6 +195,7 @@ export type ExcalidrawLinearElement = _ExcalidrawElementBase &
  Readonly<{
    type: "line" | "arrow";
    points: readonly Point[];
+    segmentSplitIndices: readonly number[] | null;
    lastCommittedPoint: Point | null;
    startBinding: PointBinding | null;
    endBinding: PointBinding | null;
@@ -123,7 +123,7 @@ describe("adding elements to frames", () => {
  const commonTestCases = async (
    func: typeof resizeFrameOverElement | typeof dragElementIntoFrame,
  ) => {
-    describe.skip("when frame is in a layer below", async () => {
+    describe("when frame is in a layer below", async () => {
      it("should add an element", async () => {
        h.elements = [frame, rect2];

@@ -167,7 +167,7 @@ describe("adding elements to frames", () => {
      });
    });

-    describe.skip("when frame is in a layer above", async () => {
+    describe("when frame is in a layer above", async () => {
      it("should add an element", async () => {
        h.elements = [rect2, frame];

@@ -212,7 +212,7 @@ describe("adding elements to frames", () => {
    });

    describe("when frame is in an inner layer", async () => {
-      it.skip("should add elements", async () => {
+      it("should add elements", async () => {
        h.elements = [rect2, frame, rect3];

        func(frame, rect2);
@@ -223,7 +223,7 @@ describe("adding elements to frames", () => {
        expectEqualIds([rect2, rect3, frame]);
      });

-      it.skip("should add elements when there are other other elements in between", async () => {
+      it("should add elements when there are other other elements in between", async () => {
        h.elements = [rect2, rect1, frame, rect4, rect3];

        func(frame, rect2);
@@ -234,7 +234,7 @@ describe("adding elements to frames", () => {
        expectEqualIds([rect1, rect2, rect3, frame, rect4]);
      });

-      it.skip("should add elements when there are other elements in between and the order is reversed", async () => {
+      it("should add elements when there are other elements in between and the order is reversed", async () => {
        h.elements = [rect3, rect4, frame, rect2, rect1];

        func(frame, rect2);
@@ -289,7 +289,7 @@ describe("adding elements to frames", () => {
  describe("resizing frame over elements", async () => {
    await commonTestCases(resizeFrameOverElement);

-    it.skip("resizing over text containers and labelled arrows", async () => {
+    it("resizing over text containers and labelled arrows", async () => {
      await resizingTest(
        "rectangle",
        ["frame", "rectangle", "text"],
@@ -339,7 +339,7 @@ describe("adding elements to frames", () => {
      // );
    });

-    it.skip("should add arrow bound with text when frame is in a layer below", async () => {
+    it("should add arrow bound with text when frame is in a layer below", async () => {
      h.elements = [frame, arrow, text];

      resizeFrameOverElement(frame, arrow);
@@ -359,7 +359,7 @@ describe("adding elements to frames", () => {
      expectEqualIds([arrow, text, frame]);
    });

-    it.skip("should add arrow bound with text when frame is in an inner layer", async () => {
+    it("should add arrow bound with text when frame is in an inner layer", async () => {
      h.elements = [arrow, frame, text];

      resizeFrameOverElement(frame, arrow);
@@ -371,7 +371,7 @@ describe("adding elements to frames", () => {
  });

  describe("resizing frame over elements but downwards", async () => {
-    it.skip("should add elements when frame is in a layer below", async () => {
+    it("should add elements when frame is in a layer below", async () => {
      h.elements = [frame, rect1, rect2, rect3, rect4];

      resizeFrameOverElement(frame, rect4);
@@ -382,7 +382,7 @@ describe("adding elements to frames", () => {
      expectEqualIds([rect2, rect3, frame, rect4, rect1]);
    });

-    it.skip("should add elements when frame is in a layer above", async () => {
+    it("should add elements when frame is in a layer above", async () => {
      h.elements = [rect1, rect2, rect3, rect4, frame];

      resizeFrameOverElement(frame, rect4);
@@ -393,7 +393,7 @@ describe("adding elements to frames", () => {
      expectEqualIds([rect1, rect2, rect3, frame, rect4]);
    });

-    it.skip("should add elements when frame is in an inner layer", async () => {
+    it("should add elements when frame is in an inner layer", async () => {
      h.elements = [rect1, rect2, frame, rect3, rect4];

      resizeFrameOverElement(frame, rect4);
@@ -408,7 +408,7 @@ describe("adding elements to frames", () => {
  describe("dragging elements into the frame", async () => {
    await commonTestCases(dragElementIntoFrame);

-    it.skip("should drag element inside, duplicate it and keep it in frame", () => {
+    it("should drag element inside, duplicate it and keep it in frame", () => {
      h.elements = [frame, rect2];

      dragElementIntoFrame(frame, rect2);
@@ -422,7 +422,7 @@ describe("adding elements to frames", () => {
      expectEqualIds([rect2_copy, rect2, frame]);
    });

-    it.skip("should drag element inside, duplicate it and remove it from frame", () => {
+    it("should drag element inside, duplicate it and remove it from frame", () => {
      h.elements = [frame, rect2];

      dragElementIntoFrame(frame, rect2);
@@ -19,10 +19,10 @@ import { mutateElement } from "./element/mutateElement";
 import { AppClassProperties, AppState, StaticCanvasAppState } from "./types";
 import { getElementsWithinSelection, getSelectedElements } from "./scene";
 import { isFrameElement } from "./element";
+import { moveOneRight } from "./zindex";
 import { getElementsInGroup, selectGroupsFromGivenElements } from "./groups";
 import Scene, { ExcalidrawElementsIncludingDeleted } from "./scene/Scene";
 import { getElementLineSegments } from "./element/bounds";
-import { doLineSegmentsIntersect } from "./packages/utils";

 // --------------------------- Frame State ------------------------------------
 export const bindElementsToFramesAfterDuplication = (
@@ -56,21 +56,130 @@ export const bindElementsToFramesAfterDuplication = (
  }
 };

-export function isElementIntersectingFrame(
-  element: ExcalidrawElement,
-  frame: ExcalidrawFrameElement,
-) {
-  const frameLineSegments = getElementLineSegments(frame);
+// --------------------------- Frame Geometry ---------------------------------
+class Point {
+  x: number;
+  y: number;

-  const elementLineSegments = getElementLineSegments(element);
+  constructor(x: number, y: number) {
+    this.x = x;
+    this.y = y;
+  }
+}

-  const intersecting = frameLineSegments.some((frameLineSegment) =>
-    elementLineSegments.some((elementLineSegment) =>
-      doLineSegmentsIntersect(frameLineSegment, elementLineSegment),
-    ),
-  );
+class LineSegment {
+  first: Point;
+  second: Point;

-  return intersecting;
+  constructor(pointA: Point, pointB: Point) {
+    this.first = pointA;
+    this.second = pointB;
+  }
+
+  public getBoundingBox(): [Point, Point] {
+    return [
+      new Point(
+        Math.min(this.first.x, this.second.x),
+        Math.min(this.first.y, this.second.y),
+      ),
+      new Point(
+        Math.max(this.first.x, this.second.x),
+        Math.max(this.first.y, this.second.y),
+      ),
+    ];
+  }
+}
+
+// https://martin-thoma.com/how-to-check-if-two-line-segments-intersect/
+class FrameGeometry {
+  private static EPSILON = 0.000001;
+
+  private static crossProduct(a: Point, b: Point) {
+    return a.x * b.y - b.x * a.y;
+  }
+
+  private static doBoundingBoxesIntersect(
+    a: [Point, Point],
+    b: [Point, Point],
+  ) {
+    return (
+      a[0].x <= b[1].x &&
+      a[1].x >= b[0].x &&
+      a[0].y <= b[1].y &&
+      a[1].y >= b[0].y
+    );
+  }
+
+  private static isPointOnLine(a: LineSegment, b: Point) {
+    const aTmp = new LineSegment(
+      new Point(0, 0),
+      new Point(a.second.x - a.first.x, a.second.y - a.first.y),
+    );
+    const bTmp = new Point(b.x - a.first.x, b.y - a.first.y);
+    const r = this.crossProduct(aTmp.second, bTmp);
+    return Math.abs(r) < this.EPSILON;
+  }
+
+  private static isPointRightOfLine(a: LineSegment, b: Point) {
+    const aTmp = new LineSegment(
+      new Point(0, 0),
+      new Point(a.second.x - a.first.x, a.second.y - a.first.y),
+    );
+    const bTmp = new Point(b.x - a.first.x, b.y - a.first.y);
+    return this.crossProduct(aTmp.second, bTmp) < 0;
+  }
+
+  private static lineSegmentTouchesOrCrossesLine(
+    a: LineSegment,
+    b: LineSegment,
+  ) {
+    return (
+      this.isPointOnLine(a, b.first) ||
+      this.isPointOnLine(a, b.second) ||
+      (this.isPointRightOfLine(a, b.first)
+        ? !this.isPointRightOfLine(a, b.second)
+        : this.isPointRightOfLine(a, b.second))
+    );
+  }
+
+  private static doLineSegmentsIntersect(
+    a: [readonly [number, number], readonly [number, number]],
+    b: [readonly [number, number], readonly [number, number]],
+  ) {
+    const aSegment = new LineSegment(
+      new Point(a[0][0], a[0][1]),
+      new Point(a[1][0], a[1][1]),
+    );
+    const bSegment = new LineSegment(
+      new Point(b[0][0], b[0][1]),
+      new Point(b[1][0], b[1][1]),
+    );
+
+    const box1 = aSegment.getBoundingBox();
+    const box2 = bSegment.getBoundingBox();
+    return (
+      this.doBoundingBoxesIntersect(box1, box2) &&
+      this.lineSegmentTouchesOrCrossesLine(aSegment, bSegment) &&
+      this.lineSegmentTouchesOrCrossesLine(bSegment, aSegment)
+    );
+  }
+
+  public static isElementIntersectingFrame(
+    element: ExcalidrawElement,
+    frame: ExcalidrawFrameElement,
+  ) {
+    const frameLineSegments = getElementLineSegments(frame);
+
+    const elementLineSegments = getElementLineSegments(element);
+
+    const intersecting = frameLineSegments.some((frameLineSegment) =>
+      elementLineSegments.some((elementLineSegment) =>
+        this.doLineSegmentsIntersect(frameLineSegment, elementLineSegment),
+      ),
+    );
+
+    return intersecting;
+  }
 }

 export const getElementsCompletelyInFrame = (
@@ -98,7 +207,10 @@ export const isElementContainingFrame = (
 export const getElementsIntersectingFrame = (
  elements: readonly ExcalidrawElement[],
  frame: ExcalidrawFrameElement,
-) => elements.filter((element) => isElementIntersectingFrame(element, frame));
+) =>
+  elements.filter((element) =>
+    FrameGeometry.isElementIntersectingFrame(element, frame),
+  );

 export const elementsAreInFrameBounds = (
  elements: readonly ExcalidrawElement[],
@@ -124,7 +236,7 @@ export const elementOverlapsWithFrame = (
 ) => {
  return (
    elementsAreInFrameBounds([element], frame) ||
-    isElementIntersectingFrame(element, frame) ||
+    FrameGeometry.isElementIntersectingFrame(element, frame) ||
    isElementContainingFrame([frame], element, frame)
  );
 };
@@ -161,7 +273,7 @@ export const groupsAreAtLeastIntersectingTheFrame = (
  return !!elementsInGroup.find(
    (element) =>
      elementsAreInFrameBounds([element], frame) ||
-      isElementIntersectingFrame(element, frame),
+      FrameGeometry.isElementIntersectingFrame(element, frame),
  );
 };

@@ -182,7 +294,7 @@ export const groupsAreCompletelyOutOfFrame = (
    elementsInGroup.find(
      (element) =>
        elementsAreInFrameBounds([element], frame) ||
-        isElementIntersectingFrame(element, frame),
+        FrameGeometry.isElementIntersectingFrame(element, frame),
    ) === undefined
  );
 };
@@ -201,44 +313,33 @@ export const groupByFrames = (elements: readonly ExcalidrawElement[]) => {
  for (const element of elements) {
    const frameId = isFrameElement(element) ? element.id : element.frameId;
    if (frameId && !frameElementsMap.has(frameId)) {
-      frameElementsMap.set(frameId, getFrameChildren(elements, frameId));
+      frameElementsMap.set(frameId, getFrameElements(elements, frameId));
    }
  }

  return frameElementsMap;
 };

-export const getFrameChildren = (
-  allElements: ExcalidrawElementsIncludingDeleted,
-  frameId: string,
-) => allElements.filter((element) => element.frameId === frameId);
-
 export const getFrameElements = (
  allElements: ExcalidrawElementsIncludingDeleted,
-): ExcalidrawFrameElement[] => {
-  return allElements.filter((element) =>
-    isFrameElement(element),
-  ) as ExcalidrawFrameElement[];
-};
-
-/**
- * Returns ExcalidrawFrameElements and non-frame-children elements.
- *
- * Considers children as root elements if they point to a frame parent
- * non-existing in the elements set.
- *
- * Considers non-frame bound elements (container or arrow labels) as root.
- */
-export const getRootElements = (
-  allElements: ExcalidrawElementsIncludingDeleted,
+  frameId: string,
+  opts?: { includeBoundArrows?: boolean },
 ) => {
-  const frameElements = arrayToMap(getFrameElements(allElements));
-  return allElements.filter(
-    (element) =>
-      frameElements.has(element.id) ||
-      !element.frameId ||
-      !frameElements.has(element.frameId),
-  );
+  return allElements.filter((element) => {
+    if (element.frameId === frameId) {
+      return true;
+    }
+    if (opts?.includeBoundArrows && element.type === "arrow") {
+      const bindingId = element.startBinding?.elementId;
+      if (bindingId) {
+        const boundElement = Scene.getScene(element)?.getElement(bindingId);
+        if (boundElement?.frameId === frameId) {
+          return true;
+        }
+      }
+    }
+    return false;
+  });
 };

 export const getElementsInResizingFrame = (
@@ -246,7 +347,7 @@ export const getElementsInResizingFrame = (
  frame: ExcalidrawFrameElement,
  appState: AppState,
 ): ExcalidrawElement[] => {
-  const prevElementsInFrame = getFrameChildren(allElements, frame.id);
+  const prevElementsInFrame = getFrameElements(allElements, frame.id);
  const nextElementsInFrame = new Set<ExcalidrawElement>(prevElementsInFrame);

  const elementsCompletelyInFrame = new Set([
@@ -270,7 +371,7 @@ export const getElementsInResizingFrame = (
  );

  for (const element of elementsNotCompletelyInFrame) {
-    if (!isElementIntersectingFrame(element, frame)) {
+    if (!FrameGeometry.isElementIntersectingFrame(element, frame)) {
      if (element.groupIds.length === 0) {
        nextElementsInFrame.delete(element);
      }
@@ -367,6 +468,14 @@ export const getContainingFrame = (
  return null;
 };

+export const isValidFrameChild = (element: ExcalidrawElement) => {
+  return (
+    element.type !== "frame" &&
+    // arrows that are bound to elements cannot be frame children
+    (element.type !== "arrow" || (!element.startBinding && !element.endBinding))
+  );
+};
+
 // --------------------------- Frame Operations -------------------------------

 /**
@@ -379,17 +488,20 @@ export const addElementsToFrame = (
  elementsToAdd: NonDeletedExcalidrawElement[],
  frame: ExcalidrawFrameElement,
 ) => {
-  const { currTargetFrameChildrenMap } = allElements.reduce(
-    (acc, element, index) => {
-      if (element.frameId === frame.id) {
-        acc.currTargetFrameChildrenMap.set(element.id, true);
-      }
-      return acc;
-    },
-    {
-      currTargetFrameChildrenMap: new Map<ExcalidrawElement["id"], true>(),
-    },
-  );
+  const { allElementsIndexMap, currTargetFrameChildrenMap } =
+    allElements.reduce(
+      (acc, element, index) => {
+        acc.allElementsIndexMap.set(element.id, index);
+        if (element.frameId === frame.id) {
+          acc.currTargetFrameChildrenMap.set(element.id, true);
+        }
+        return acc;
+      },
+      {
+        allElementsIndexMap: new Map<ExcalidrawElement["id"], number>(),
+        currTargetFrameChildrenMap: new Map<ExcalidrawElement["id"], true>(),
+      },
+    );

  const suppliedElementsToAddSet = new Set(elementsToAdd.map((el) => el.id));

@@ -402,6 +514,9 @@ export const addElementsToFrame = (
    elementsToAdd,
  )) {
    if (!currTargetFrameChildrenMap.has(element.id)) {
+      if (!isValidFrameChild(element)) {
+        continue;
+      }
      finalElementsToAdd.push(element);
    }

@@ -415,6 +530,66 @@ export const addElementsToFrame = (
    }
  }

+  const finalElementsToAddSet = new Set(finalElementsToAdd.map((el) => el.id));
+
+  const nextElements: ExcalidrawElement[] = [];
+
+  const processedElements = new Set<ExcalidrawElement["id"]>();
+
+  for (const element of allElements) {
+    if (processedElements.has(element.id)) {
+      continue;
+    }
+
+    processedElements.add(element.id);
+
+    if (
+      finalElementsToAddSet.has(element.id) ||
+      (element.frameId && element.frameId === frame.id)
+    ) {
+      // will be added in bulk once we process target frame
+      continue;
+    }
+
+    // target frame
+    if (element.id === frame.id) {
+      const currFrameChildren = getFrameElements(allElements, frame.id);
+      currFrameChildren.forEach((child) => {
+        processedElements.add(child.id);
+      });
+
+      // if not found, add all children on top by assigning the lowest index
+      const targetFrameIndex = allElementsIndexMap.get(frame.id) ?? -1;
+
+      const { newChildren_left, newChildren_right } = finalElementsToAdd.reduce(
+        (acc, element) => {
+          // if index not found, add on top of current frame children
+          const elementIndex = allElementsIndexMap.get(element.id) ?? Infinity;
+          if (elementIndex < targetFrameIndex) {
+            acc.newChildren_left.push(element);
+          } else {
+            acc.newChildren_right.push(element);
+          }
+          return acc;
+        },
+        {
+          newChildren_left: [] as ExcalidrawElement[],
+          newChildren_right: [] as ExcalidrawElement[],
+        },
+      );
+
+      nextElements.push(
+        ...newChildren_left,
+        ...currFrameChildren,
+        ...newChildren_right,
+        element,
+      );
+      continue;
+    }
+
+    nextElements.push(element);
+  }
+
  for (const element of finalElementsToAdd) {
    mutateElement(
      element,
@@ -424,7 +599,8 @@ export const addElementsToFrame = (
      false,
    );
  }
-  return allElements.slice();
+
+  return nextElements;
 };

 export const removeElementsFromFrame = (
@@ -432,34 +608,20 @@ export const removeElementsFromFrame = (
  elementsToRemove: NonDeletedExcalidrawElement[],
  appState: AppState,
 ) => {
-  const _elementsToRemove = new Map<
-    ExcalidrawElement["id"],
-    ExcalidrawElement
-  >();
-
-  const toRemoveElementsByFrame = new Map<
-    ExcalidrawFrameElement["id"],
-    ExcalidrawElement[]
-  >();
+  const _elementsToRemove: ExcalidrawElement[] = [];

  for (const element of elementsToRemove) {
    if (element.frameId) {
-      _elementsToRemove.set(element.id, element);
-
-      const arr = toRemoveElementsByFrame.get(element.frameId) || [];
-      arr.push(element);
+      _elementsToRemove.push(element);

      const boundTextElement = getBoundTextElement(element);
      if (boundTextElement) {
-        _elementsToRemove.set(boundTextElement.id, boundTextElement);
-        arr.push(boundTextElement);
+        _elementsToRemove.push(boundTextElement);
      }
-
-      toRemoveElementsByFrame.set(element.frameId, arr);
    }
  }

-  for (const [, element] of _elementsToRemove) {
+  for (const element of _elementsToRemove) {
    mutateElement(
      element,
      {
@@ -469,7 +631,13 @@ export const removeElementsFromFrame = (
    );
  }

-  return allElements.slice();
+  const nextElements = moveOneRight(
+    allElements,
+    appState,
+    Array.from(_elementsToRemove),
+  );
+
+  return nextElements;
 };

 export const removeAllElementsFromFrame = (
@@ -477,7 +645,7 @@ export const removeAllElementsFromFrame = (
  frame: ExcalidrawFrameElement,
  appState: AppState,
 ) => {
-  const elementsInFrame = getFrameChildren(allElements, frame.id);
+  const elementsInFrame = getFrameElements(allElements, frame.id);
  return removeElementsFromFrame(allElements, elementsInFrame, appState);
 };

@@ -1,4 +1,4 @@
-import { useState, useLayoutEffect } from "react";
+import { useState, useRef, useLayoutEffect } from "react";
 import { useDevice, useExcalidrawContainer } from "../components/App";
 import { useUIAppState } from "../context/ui-appState";

@@ -10,17 +10,16 @@ export const useCreatePortalContainer = (opts?: {

  const device = useDevice();
  const { theme } = useUIAppState();
+  const isMobileRef = useRef(device.isMobile);
+  isMobileRef.current = device.isMobile;

  const { container: excalidrawContainer } = useExcalidrawContainer();

  useLayoutEffect(() => {
    if (div) {
-      div.className = "";
-      div.classList.add("excalidraw", ...(opts?.className?.split(/\s+/) || []));
-      div.classList.toggle("excalidraw--mobile", device.editor.isMobile);
-      div.classList.toggle("theme--dark", theme === "dark");
+      div.classList.toggle("excalidraw--mobile", device.isMobile);
    }
-  }, [div, theme, device.editor.isMobile, opts?.className]);
+  }, [div, device.isMobile]);

  useLayoutEffect(() => {
    const container = opts?.parentSelector
@@ -33,6 +32,10 @@ export const useCreatePortalContainer = (opts?: {

    const div = document.createElement("div");

+    div.classList.add("excalidraw", ...(opts?.className?.split(/\s+/) || []));
+    div.classList.toggle("excalidraw--mobile", isMobileRef.current);
+    div.classList.toggle("theme--dark", theme === "dark");
+
    container.appendChild(div);

    setDiv(div);
@@ -40,7 +43,7 @@ export const useCreatePortalContainer = (opts?: {
    return () => {
      container.removeChild(div);
    };
-  }, [excalidrawContainer, opts?.parentSelector]);
+  }, [excalidrawContainer, theme, opts?.className, opts?.parentSelector]);

  return div;
 };
@@ -218,10 +218,7 @@
    "libraryElementTypeError": {
      "embeddable": "Embeddable elements cannot be added to the library.",
      "image": "Support for adding images to the library coming soon!"
-    },
-    "asyncPasteFailedOnRead": "Couldn't paste (couldn't read from system clipboard).",
-    "asyncPasteFailedOnParse": "Couldn't paste.",
-    "copyToSystemClipboardFailed": "Couldn't copy to clipboard."
+    }
  },
  "toolBar": {
    "selection": "Selection",
@@ -242,8 +239,7 @@
    "embeddable": "Web Embed",
    "laser": "Laser pointer",
    "hand": "Hand (panning tool)",
-    "extraTools": "More tools",
-    "mermaidToExcalidraw": "Mermaid to Excalidraw"
+    "extraTools": "More tools"
  },
  "headings": {
    "canvasActions": "Canvas actions",
@@ -502,12 +498,5 @@
        "description": "Loading external drawing will <bold>replace your existing content</bold>.<br></br>You can back up your drawing first by using one of the options below."
      }
    }
-  },
-  "mermaid": {
-    "title": "Mermaid to Excalidraw",
-    "button": "Insert",
-    "description": "Currently only <flowchartLink>Flowcharts</flowchartLink> and <sequenceLink>Sequence Diagrams</sequenceLink> are supported. The other types will be rendered as image in Excalidraw.",
-    "syntax": "Mermaid Syntax",
-    "preview": "Preview"
  }
 }
@@ -505,7 +505,3 @@ export const rangeIntersection = (

  return null;
 };
-
-export const isValueInRange = (value: number, min: number, max: number) => {
-  return value >= min && value <= max;
-};
@@ -1,65 +0,0 @@
-import { Bounds } from "../element/bounds";
-import { Point } from "../types";
-
-export type LineSegment = [Point, Point];
-
-export function getBBox(line: LineSegment): Bounds {
-  return [
-    Math.min(line[0][0], line[1][0]),
-    Math.min(line[0][1], line[1][1]),
-    Math.max(line[0][0], line[1][0]),
-    Math.max(line[0][1], line[1][1]),
-  ];
-}
-
-export function crossProduct(a: Point, b: Point) {
-  return a[0] * b[1] - b[0] * a[1];
-}
-
-export function doBBoxesIntersect(a: Bounds, b: Bounds) {
-  return a[0] <= b[2] && a[2] >= b[0] && a[1] <= b[3] && a[3] >= b[1];
-}
-
-export function translate(a: Point, b: Point): Point {
-  return [a[0] - b[0], a[1] - b[1]];
-}
-
-const EPSILON = 0.000001;
-
-export function isPointOnLine(l: LineSegment, p: Point) {
-  const p1 = translate(l[1], l[0]);
-  const p2 = translate(p, l[0]);
-
-  const r = crossProduct(p1, p2);
-
-  return Math.abs(r) < EPSILON;
-}
-
-export function isPointRightOfLine(l: LineSegment, p: Point) {
-  const p1 = translate(l[1], l[0]);
-  const p2 = translate(p, l[0]);
-
-  return crossProduct(p1, p2) < 0;
-}
-
-export function isLineSegmentTouchingOrCrossingLine(
-  a: LineSegment,
-  b: LineSegment,
-) {
-  return (
-    isPointOnLine(a, b[0]) ||
-    isPointOnLine(a, b[1]) ||
-    (isPointRightOfLine(a, b[0])
-      ? !isPointRightOfLine(a, b[1])
-      : isPointRightOfLine(a, b[1]))
-  );
-}
-
-// https://martin-thoma.com/how-to-check-if-two-line-segments-intersect/
-export function doLineSegmentsIntersect(a: LineSegment, b: LineSegment) {
-  return (
-    doBBoxesIntersect(getBBox(a), getBBox(b)) &&
-    isLineSegmentTouchingOrCrossingLine(a, b) &&
-    isLineSegmentTouchingOrCrossingLine(b, a)
-  );
-}
@@ -1,16 +1,16 @@
 [
  {
    "path": "dist/excalidraw.production.min.js",
-    "limit": "325 kB"
+    "limit": "305 kB"
  },
  {
    "path": "dist/excalidraw-assets/locales",
    "name": "dist/excalidraw-assets/locales",
-    "limit": "290 kB"
+    "limit": "270 kB"
  },
  {
    "path": "dist/excalidraw-assets/vendor-*.js",
    "name": "dist/excalidraw-assets/vendor*.js",
-    "limit": "900 kB"
+    "limit": "30 kB"
  }
 ]
@@ -15,39 +15,7 @@ Please add the latest change on the top under the correct section.

 ### Features

- Support `excalidrawAPI` prop for accessing the Excalidraw API [#7251](https://github.com/excalidraw/excalidraw/pull/7251).
-
-#### BREAKING CHANGE
-
- The `Ref` support has been removed in v0.17.0 so if you are using refs, please update the integration to use the [`excalidrawAPI`](http://localhost:3003/docs/@excalidraw/excalidraw/api/props/excalidraw-api)
-
- Additionally `ready` and `readyPromise` from the API have been discontinued. These APIs were found to be superfluous, and as part of the effort to streamline the APIs and maintain simplicity, they were removed in version v0.17.0.
-
- Export [`getCommonBounds`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/utils#getcommonbounds) helper from the package [#7247](https://github.com/excalidraw/excalidraw/pull/7247).
-
- Support frames via programmatic API [#7205](https://github.com/excalidraw/excalidraw/pull/7205).
-
- Export `elementsOverlappingBBox`, `isElementInsideBBox`, `elementPartiallyOverlapsWithOrContainsBBox` helpers for filtering/checking if elements within bounds. [#6727](https://github.com/excalidraw/excalidraw/pull/6727)
-
- Regenerate ids by default when using transform api and also update bindings by 0.5px to avoid possible overlapping [#7195](https://github.com/excalidraw/excalidraw/pull/7195)
-
- Add `selected` prop for `MainMenu.Item` and `MainMenu.ItemCustom` components to indicate active state. [#7078](https://github.com/excalidraw/excalidraw/pull/7078)
-
-#### BREAKING CHANGES
-
- [`useDevice`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/utils#usedevice) hook's return value was changed to differentiate between `editor` and `viewport` breakpoints. [#7243](https://github.com/excalidraw/excalidraw/pull/7243)
-
-### Build
-
- Support Preact [#7255](https://github.com/excalidraw/excalidraw/pull/7255). The host needs to set `process.env.IS_PREACT` to `true`
-
-When using vite, you will have to make sure the variable process.env.IS_PREACT is available at runtime since Vite removes it by default, so you can update the vite config to ensure its available
-
-```json
-define: {
-  "process.env.IS_PREACT": process.env.IS_PREACT,
-}
-```
+- Add `selected` prop for `MainMenu.Item` and `MainMenu.ItemCustom` components to indicate active state. [7078](https://github.com/excalidraw/excalidraw/pull/7078)

 ## 0.16.1 (2023-09-21)

@@ -665,9 +665,7 @@ export default function App({ appTitle, useCustom, customArgs }: AppProps) {
        </div>
        <div className="excalidraw-wrapper">
          <Excalidraw
-            excalidrawAPI={(api: ExcalidrawImperativeAPI) =>
-              setExcalidrawAPI(api)
-            }
+            ref={(api: ExcalidrawImperativeAPI) => setExcalidrawAPI(api)}
            initialData={initialStatePromiseRef.current.promise}
            onChange={(elements, state) => {
              console.info("Elements :", elements, "State : ", state);
@@ -8,7 +8,7 @@ const MobileFooter = ({
  excalidrawAPI: ExcalidrawImperativeAPI;
 }) => {
  const device = useDevice();
-  if (device.editor.isMobile) {
+  if (device.isMobile) {
    return (
      <Footer>
        <CustomFooter excalidrawAPI={excalidrawAPI} />
@@ -7,7 +7,6 @@ const elements: ExcalidrawElementSkeleton[] = [
    x: 10,
    y: 10,
    strokeWidth: 2,
-    id: "1",
  },
  {
    type: "diamond",
@@ -20,7 +19,6 @@ const elements: ExcalidrawElementSkeleton[] = [
      strokeColor: "#099268",
      fontSize: 30,
    },
-    id: "2",
  },
  {
    type: "arrow",
@@ -38,11 +36,6 @@ const elements: ExcalidrawElementSkeleton[] = [
    height: 230,
    fileId: "rocket" as FileId,
  },
-  {
-    type: "frame",
-    children: ["1", "2"],
-    name: "My frame",
-  },
 ];
 export default {
  elements,
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, forwardRef } from "react";
 import { InitializeApp } from "../../components/InitializeApp";
 import App from "../../components/App";
 import { isShallowEqual } from "../../utils";
@@ -6,7 +6,7 @@ import { isShallowEqual } from "../../utils";
 import "../../css/app.scss";
 import "../../css/styles.scss";

-import { AppProps, ExcalidrawProps } from "../../types";
+import { AppProps, ExcalidrawAPIRefValue, ExcalidrawProps } from "../../types";
 import { defaultLang } from "../../i18n";
 import { DEFAULT_UI_OPTIONS } from "../../constants";
 import { Provider } from "jotai";
@@ -20,7 +20,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
  const {
    onChange,
    initialData,
-    excalidrawAPI,
+    excalidrawRef,
    isCollaborating = false,
    onPointerUpdate,
    renderTopRightUI,
@@ -95,7 +95,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
        <App
          onChange={onChange}
          initialData={initialData}
-          excalidrawAPI={excalidrawAPI}
+          excalidrawRef={excalidrawRef}
          isCollaborating={isCollaborating}
          onPointerUpdate={onPointerUpdate}
          renderTopRightUI={renderTopRightUI}
@@ -127,7 +127,12 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
  );
 };

-const areEqual = (prevProps: ExcalidrawProps, nextProps: ExcalidrawProps) => {
+type PublicExcalidrawProps = Omit<ExcalidrawProps, "forwardedRef">;
+
+const areEqual = (
+  prevProps: PublicExcalidrawProps,
+  nextProps: PublicExcalidrawProps,
+) => {
  // short-circuit early
  if (prevProps.children !== nextProps.children) {
    return false;
@@ -184,7 +189,12 @@ const areEqual = (prevProps: ExcalidrawProps, nextProps: ExcalidrawProps) => {
  return isUIOptionsSame && isShallowEqual(prev, next);
 };

-export const Excalidraw = React.memo(ExcalidrawBase, areEqual);
+const forwardedRefComp = forwardRef<
+  ExcalidrawAPIRefValue,
+  PublicExcalidrawProps
+>((props, ref) => <ExcalidrawBase {...props} excalidrawRef={ref} />);
+
+export const Excalidraw = React.memo(forwardedRefComp, areEqual);
 Excalidraw.displayName = "Excalidraw";

 export {
@@ -244,10 +254,3 @@ export { DefaultSidebar } from "../../components/DefaultSidebar";

 export { normalizeLink } from "../../data/url";
 export { convertToExcalidrawElements } from "../../data/transform";
-export { getCommonBounds } from "../../element/bounds";
-
-export {
-  elementsOverlappingBBox,
-  isElementInsideBBox,
-  elementPartiallyOverlapsWithOrContainsBBox,
-} from "../withinBounds";
@@ -1,10 +1,4 @@
-if (process.env.IS_PREACT === "true") {
-  if (process.env.NODE_ENV === "production") {
-    module.exports = require("./dist/excalidraw-with-preact.production.min.js");
-  } else {
-    module.exports = require("./dist/excalidraw-with-preact.development.js");
-  }
-} else if (process.env.NODE_ENV === "production") {
+if (process.env.NODE_ENV === "production") {
  module.exports = require("./dist/excalidraw.production.min.js");
 } else {
  module.exports = require("./dist/excalidraw.development.js");
@@ -78,7 +78,7 @@
  "homepage": "https://github.com/excalidraw/excalidraw/tree/master/src/packages/excalidraw",
  "scripts": {
    "gen:types": "tsc --project ../../../tsconfig-types.json",
-    "build:umd": "rm -rf dist && cross-env NODE_ENV=production webpack --config webpack.prod.config.js && cross-env NODE_ENV=development webpack --config webpack.dev.config.js && NODE_ENV=development webpack --config webpack.preact.config.js && NODE_ENV=production webpack --config webpack.preact.config.js && yarn gen:types",
+    "build:umd": "rm -rf dist && cross-env NODE_ENV=production webpack --config webpack.prod.config.js && cross-env NODE_ENV=development webpack --config webpack.dev.config.js && yarn gen:types",
    "build:umd:withAnalyzer": "cross-env NODE_ENV=production ANALYZER=true webpack --config webpack.prod.config.js",
    "pack": "yarn build:umd && yarn pack",
    "start": "webpack serve --config webpack.dev-server.config.js",
@@ -41,14 +41,6 @@ module.exports = {
          "sass-loader",
        ],
      },
-      // So that type module works with webpack
-      // https://github.com/webpack/webpack/issues/11467#issuecomment-691873586
-      {
-        test: /\.m?js/,
-        resolve: {
-          fullySpecified: false,
-        },
-      },
      {
        test: /\.(ts|tsx|js|jsx|mjs)$/,
        exclude:
@@ -1,33 +0,0 @@
-const { merge } = require("webpack-merge");
-
-const prodConfig = require("./webpack.prod.config");
-const devConfig = require("./webpack.dev.config");
-
-const isProd = process.env.NODE_ENV === "production";
-
-const config = isProd ? prodConfig : devConfig;
-const outputFile = isProd
-  ? "excalidraw-with-preact.production.min"
-  : "excalidraw-with-preact.development";
-
-const preactWebpackConfig = {
-  entry: {
-    [outputFile]: "./entry.js",
-  },
-  externals: {
-    ...config.externals,
-    "react-dom/client": {
-      root: "ReactDOMClient",
-      commonjs2: "react-dom/client",
-      commonjs: "react-dom/client",
-      amd: "react-dom/client",
-    },
-    "react/jsx-runtime": {
-      root: "ReactJSXRuntime",
-      commonjs2: "react/jsx-runtime",
-      commonjs: "react/jsx-runtime",
-      amd: "react/jsx-runtime",
-    },
-  },
-};
-module.exports = merge(config, preactWebpackConfig);
@@ -44,14 +44,6 @@ module.exports = {
          "sass-loader",
        ],
      },
-      // So that type module works with webpack
-      // https://github.com/webpack/webpack/issues/11467#issuecomment-691873586
-      {
-        test: /\.m?js/,
-        resolve: {
-          fullySpecified: false,
-        },
-      },
      {
        test: /\.(ts|tsx|js|jsx|mjs)$/,
        exclude:
@@ -4,11 +4,7 @@ import {
 } from "../scene/export";
 import { getDefaultAppState } from "../appState";
 import { AppState, BinaryFiles } from "../types";
-import {
-  ExcalidrawElement,
-  ExcalidrawFrameElement,
-  NonDeleted,
-} from "../element/types";
+import { ExcalidrawElement, NonDeleted } from "../element/types";
 import { restore } from "../data/restore";
 import { MIME_TYPES } from "../constants";
 import { encodePngMetadata } from "../data/image";
@@ -18,6 +14,24 @@ import {
  copyTextToSystemClipboard,
  copyToClipboard,
 } from "../clipboard";
+import Scene from "../scene/Scene";
+import { duplicateElements } from "../element/newElement";
+
+// getContainerElement and getBoundTextElement and potentially other helpers
+// depend on `Scene` which will not be available when these pure utils are
+// called outside initialized Excalidraw editor instance or even if called
+// from inside Excalidraw if the elements were never cached by Scene (e.g.
+// for library elements).
+//
+// As such, before passing the elements down, we need to initialize a custom
+// Scene instance and assign them to it.
+//
+// FIXME This is a super hacky workaround and we'll need to rewrite this soon.
+const passElementsSafely = (elements: readonly ExcalidrawElement[]) => {
+  const scene = new Scene();
+  scene.replaceAllElements(duplicateElements(elements));
+  return scene.getNonDeletedElements();
+};

 export { MIME_TYPES };

@@ -26,7 +40,6 @@ type ExportOpts = {
  appState?: Partial<Omit<AppState, "offsetTop" | "offsetLeft">>;
  files: BinaryFiles | null;
  maxWidthOrHeight?: number;
-  exportingFrame?: ExcalidrawFrameElement | null;
  getDimensions?: (
    width: number,
    height: number,
@@ -40,7 +53,6 @@ export const exportToCanvas = ({
  maxWidthOrHeight,
  getDimensions,
  exportPadding,
-  exportingFrame,
 }: ExportOpts & {
  exportPadding?: number;
 }) => {
@@ -51,10 +63,10 @@ export const exportToCanvas = ({
  );
  const { exportBackground, viewBackgroundColor } = restoredAppState;
  return _exportToCanvas(
-    restoredElements,
+    passElementsSafely(restoredElements),
    { ...restoredAppState, offsetTop: 0, offsetLeft: 0, width: 0, height: 0 },
    files || {},
-    { exportBackground, exportPadding, viewBackgroundColor, exportingFrame },
+    { exportBackground, exportPadding, viewBackgroundColor },
    (width: number, height: number) => {
      const canvas = document.createElement("canvas");

@@ -123,8 +135,10 @@ export const exportToBlob = async (
    };
  }

-  const canvas = await exportToCanvas(opts);
-
+  const canvas = await exportToCanvas({
+    ...opts,
+    elements: passElementsSafely(opts.elements),
+  });
  quality = quality ? quality : /image\/jpe?g/.test(mimeType) ? 0.92 : 0.8;

  return new Promise((resolve, reject) => {
@@ -165,7 +179,6 @@ export const exportToSvg = async ({
  files = {},
  exportPadding,
  renderEmbeddables,
-  exportingFrame,
 }: Omit<ExportOpts, "getDimensions"> & {
  exportPadding?: number;
  renderEmbeddables?: boolean;
@@ -181,10 +194,20 @@ export const exportToSvg = async ({
    exportPadding,
  };

-  return _exportToSvg(restoredElements, exportAppState, files, {
-    exportingFrame,
-    renderEmbeddables,
-  });
+  return _exportToSvg(
+    passElementsSafely(restoredElements),
+    exportAppState,
+    files,
+    {
+      renderEmbeddables,
+      // NOTE as long as we're using the Scene hack, we need to ensure
+      // we pass the original, uncloned elements when serializing
+      // so that we keep ids stable. Hence adding the serializeAsJSON helper
+      // support into the downstream exportToSvg function.
+      serializeAsJSON: () =>
+        serializeAsJSON(restoredElements, exportAppState, files || {}, "local"),
+    },
+  );
 };

 export const exportToClipboard = async (
@@ -206,12 +229,6 @@ export const exportToClipboard = async (
  }
 };

-export * from "./bbox";
-export {
-  elementsOverlappingBBox,
-  isElementInsideBBox,
-  elementPartiallyOverlapsWithOrContainsBBox,
-} from "./withinBounds";
 export { serializeAsJSON, serializeLibraryAsJSON } from "../data/json";
 export {
  loadFromBlob,
@@ -1,262 +0,0 @@
-import { Bounds } from "../element/bounds";
-import { API } from "../tests/helpers/api";
-import {
-  elementPartiallyOverlapsWithOrContainsBBox,
-  elementsOverlappingBBox,
-  isElementInsideBBox,
-} from "./withinBounds";
-
-const makeElement = (x: number, y: number, width: number, height: number) =>
-  API.createElement({
-    type: "rectangle",
-    x,
-    y,
-    width,
-    height,
-  });
-
-const makeBBox = (
-  minX: number,
-  minY: number,
-  maxX: number,
-  maxY: number,
-): Bounds => [minX, minY, maxX, maxY];
-
-describe("isElementInsideBBox()", () => {
-  it("should return true if element is fully inside", () => {
-    const bbox = makeBBox(0, 0, 100, 100);
-
-    // bbox contains element
-    expect(isElementInsideBBox(makeElement(0, 0, 100, 100), bbox)).toBe(true);
-    expect(isElementInsideBBox(makeElement(10, 10, 90, 90), bbox)).toBe(true);
-  });
-
-  it("should return false if element is only partially overlapping", () => {
-    const bbox = makeBBox(0, 0, 100, 100);
-
-    // element contains bbox
-    expect(isElementInsideBBox(makeElement(-10, -10, 110, 110), bbox)).toBe(
-      false,
-    );
-
-    // element overlaps bbox from top-left
-    expect(isElementInsideBBox(makeElement(-10, -10, 100, 100), bbox)).toBe(
-      false,
-    );
-    // element overlaps bbox from top-right
-    expect(isElementInsideBBox(makeElement(90, -10, 100, 100), bbox)).toBe(
-      false,
-    );
-    // element overlaps bbox from bottom-left
-    expect(isElementInsideBBox(makeElement(-10, 90, 100, 100), bbox)).toBe(
-      false,
-    );
-    // element overlaps bbox from bottom-right
-    expect(isElementInsideBBox(makeElement(90, 90, 100, 100), bbox)).toBe(
-      false,
-    );
-  });
-
-  it("should return false if element outside", () => {
-    const bbox = makeBBox(0, 0, 100, 100);
-
-    // outside diagonally
-    expect(isElementInsideBBox(makeElement(110, 110, 100, 100), bbox)).toBe(
-      false,
-    );
-
-    // outside on the left
-    expect(isElementInsideBBox(makeElement(-110, 10, 50, 50), bbox)).toBe(
-      false,
-    );
-    // outside on the right
-    expect(isElementInsideBBox(makeElement(110, 10, 50, 50), bbox)).toBe(false);
-    // outside on the top
-    expect(isElementInsideBBox(makeElement(10, -110, 50, 50), bbox)).toBe(
-      false,
-    );
-    // outside on the bottom
-    expect(isElementInsideBBox(makeElement(10, 110, 50, 50), bbox)).toBe(false);
-  });
-
-  it("should return true if bbox contains element and flag enabled", () => {
-    const bbox = makeBBox(0, 0, 100, 100);
-
-    // element contains bbox
-    expect(
-      isElementInsideBBox(makeElement(-10, -10, 110, 110), bbox, true),
-    ).toBe(true);
-
-    // bbox contains element
-    expect(isElementInsideBBox(makeElement(0, 0, 100, 100), bbox)).toBe(true);
-    expect(isElementInsideBBox(makeElement(10, 10, 90, 90), bbox)).toBe(true);
-  });
-});
-
-describe("elementPartiallyOverlapsWithOrContainsBBox()", () => {
-  it("should return true if element overlaps, is inside, or contains", () => {
-    const bbox = makeBBox(0, 0, 100, 100);
-
-    // bbox contains element
-    expect(
-      elementPartiallyOverlapsWithOrContainsBBox(
-        makeElement(0, 0, 100, 100),
-        bbox,
-      ),
-    ).toBe(true);
-    expect(
-      elementPartiallyOverlapsWithOrContainsBBox(
-        makeElement(10, 10, 90, 90),
-        bbox,
-      ),
-    ).toBe(true);
-
-    // element contains bbox
-    expect(
-      elementPartiallyOverlapsWithOrContainsBBox(
-        makeElement(-10, -10, 110, 110),
-        bbox,
-      ),
-    ).toBe(true);
-
-    // element overlaps bbox from top-left
-    expect(
-      elementPartiallyOverlapsWithOrContainsBBox(
-        makeElement(-10, -10, 100, 100),
-        bbox,
-      ),
-    ).toBe(true);
-    // element overlaps bbox from top-right
-    expect(
-      elementPartiallyOverlapsWithOrContainsBBox(
-        makeElement(90, -10, 100, 100),
-        bbox,
-      ),
-    ).toBe(true);
-    // element overlaps bbox from bottom-left
-    expect(
-      elementPartiallyOverlapsWithOrContainsBBox(
-        makeElement(-10, 90, 100, 100),
-        bbox,
-      ),
-    ).toBe(true);
-    // element overlaps bbox from bottom-right
-    expect(
-      elementPartiallyOverlapsWithOrContainsBBox(
-        makeElement(90, 90, 100, 100),
-        bbox,
-      ),
-    ).toBe(true);
-  });
-
-  it("should return false if element does not overlap", () => {
-    const bbox = makeBBox(0, 0, 100, 100);
-
-    // outside diagonally
-    expect(
-      elementPartiallyOverlapsWithOrContainsBBox(
-        makeElement(110, 110, 100, 100),
-        bbox,
-      ),
-    ).toBe(false);
-
-    // outside on the left
-    expect(
-      elementPartiallyOverlapsWithOrContainsBBox(
-        makeElement(-110, 10, 50, 50),
-        bbox,
-      ),
-    ).toBe(false);
-    // outside on the right
-    expect(
-      elementPartiallyOverlapsWithOrContainsBBox(
-        makeElement(110, 10, 50, 50),
-        bbox,
-      ),
-    ).toBe(false);
-    // outside on the top
-    expect(
-      elementPartiallyOverlapsWithOrContainsBBox(
-        makeElement(10, -110, 50, 50),
-        bbox,
-      ),
-    ).toBe(false);
-    // outside on the bottom
-    expect(
-      elementPartiallyOverlapsWithOrContainsBBox(
-        makeElement(10, 110, 50, 50),
-        bbox,
-      ),
-    ).toBe(false);
-  });
-});
-
-describe("elementsOverlappingBBox()", () => {
-  it("should return elements that overlap bbox", () => {
-    const bbox = makeBBox(0, 0, 100, 100);
-
-    const rectOutside = makeElement(110, 110, 100, 100);
-    const rectInside = makeElement(10, 10, 90, 90);
-    const rectContainingBBox = makeElement(-10, -10, 110, 110);
-    const rectOverlappingTopLeft = makeElement(-10, -10, 50, 50);
-
-    expect(
-      elementsOverlappingBBox({
-        bounds: bbox,
-        type: "overlap",
-        elements: [
-          rectOutside,
-          rectInside,
-          rectContainingBBox,
-          rectOverlappingTopLeft,
-        ],
-      }),
-    ).toEqual([rectInside, rectContainingBBox, rectOverlappingTopLeft]);
-  });
-
-  it("should return elements inside/containing bbox", () => {
-    const bbox = makeBBox(0, 0, 100, 100);
-
-    const rectOutside = makeElement(110, 110, 100, 100);
-    const rectInside = makeElement(10, 10, 90, 90);
-    const rectContainingBBox = makeElement(-10, -10, 110, 110);
-    const rectOverlappingTopLeft = makeElement(-10, -10, 50, 50);
-
-    expect(
-      elementsOverlappingBBox({
-        bounds: bbox,
-        type: "contain",
-        elements: [
-          rectOutside,
-          rectInside,
-          rectContainingBBox,
-          rectOverlappingTopLeft,
-        ],
-      }),
-    ).toEqual([rectInside, rectContainingBBox]);
-  });
-
-  it("should return elements inside bbox", () => {
-    const bbox = makeBBox(0, 0, 100, 100);
-
-    const rectOutside = makeElement(110, 110, 100, 100);
-    const rectInside = makeElement(10, 10, 90, 90);
-    const rectContainingBBox = makeElement(-10, -10, 110, 110);
-    const rectOverlappingTopLeft = makeElement(-10, -10, 50, 50);
-
-    expect(
-      elementsOverlappingBBox({
-        bounds: bbox,
-        type: "inside",
-        elements: [
-          rectOutside,
-          rectInside,
-          rectContainingBBox,
-          rectOverlappingTopLeft,
-        ],
-      }),
-    ).toEqual([rectInside]);
-  });
-
-  // TODO test linear, freedraw, and diamond element types (+rotated)
-});
@@ -1,210 +0,0 @@
-import type {
-  ExcalidrawElement,
-  ExcalidrawFreeDrawElement,
-  ExcalidrawLinearElement,
-  NonDeletedExcalidrawElement,
-} from "../element/types";
-import {
-  isArrowElement,
-  isExcalidrawElement,
-  isFreeDrawElement,
-  isLinearElement,
-  isTextElement,
-} from "../element/typeChecks";
-import { isValueInRange, rotatePoint } from "../math";
-import type { Point } from "../types";
-import { Bounds, getElementBounds } from "../element/bounds";
-
-type Element = NonDeletedExcalidrawElement;
-type Elements = readonly NonDeletedExcalidrawElement[];
-
-type Points = readonly Point[];
-
-/** @returns vertices relative to element's top-left [0,0] position  */
-const getNonLinearElementRelativePoints = (
-  element: Exclude<
-    Element,
-    ExcalidrawLinearElement | ExcalidrawFreeDrawElement
-  >,
-): [TopLeft: Point, TopRight: Point, BottomRight: Point, BottomLeft: Point] => {
-  if (element.type === "diamond") {
-    return [
-      [element.width / 2, 0],
-      [element.width, element.height / 2],
-      [element.width / 2, element.height],
-      [0, element.height / 2],
-    ];
-  }
-  return [
-    [0, 0],
-    [0 + element.width, 0],
-    [0 + element.width, element.height],
-    [0, element.height],
-  ];
-};
-
-/** @returns vertices relative to element's top-left [0,0] position  */
-const getElementRelativePoints = (element: ExcalidrawElement): Points => {
-  if (isLinearElement(element) || isFreeDrawElement(element)) {
-    return element.points;
-  }
-  return getNonLinearElementRelativePoints(element);
-};
-
-const getMinMaxPoints = (points: Points) => {
-  const ret = points.reduce(
-    (limits, [x, y]) => {
-      limits.minY = Math.min(limits.minY, y);
-      limits.minX = Math.min(limits.minX, x);
-
-      limits.maxX = Math.max(limits.maxX, x);
-      limits.maxY = Math.max(limits.maxY, y);
-
-      return limits;
-    },
-    {
-      minX: Infinity,
-      minY: Infinity,
-      maxX: -Infinity,
-      maxY: -Infinity,
-      cx: 0,
-      cy: 0,
-    },
-  );
-
-  ret.cx = (ret.maxX + ret.minX) / 2;
-  ret.cy = (ret.maxY + ret.minY) / 2;
-
-  return ret;
-};
-
-const getRotatedBBox = (element: Element): Bounds => {
-  const points = getElementRelativePoints(element);
-
-  const { cx, cy } = getMinMaxPoints(points);
-  const centerPoint: Point = [cx, cy];
-
-  const rotatedPoints = points.map((point) =>
-    rotatePoint([point[0], point[1]], centerPoint, element.angle),
-  );
-  const { minX, minY, maxX, maxY } = getMinMaxPoints(rotatedPoints);
-
-  return [
-    minX + element.x,
-    minY + element.y,
-    maxX + element.x,
-    maxY + element.y,
-  ];
-};
-
-export const isElementInsideBBox = (
-  element: Element,
-  bbox: Bounds,
-  eitherDirection = false,
-): boolean => {
-  const elementBBox = getRotatedBBox(element);
-
-  const elementInsideBbox =
-    bbox[0] <= elementBBox[0] &&
-    bbox[2] >= elementBBox[2] &&
-    bbox[1] <= elementBBox[1] &&
-    bbox[3] >= elementBBox[3];
-
-  if (!eitherDirection) {
-    return elementInsideBbox;
-  }
-
-  if (elementInsideBbox) {
-    return true;
-  }
-
-  return (
-    elementBBox[0] <= bbox[0] &&
-    elementBBox[2] >= bbox[2] &&
-    elementBBox[1] <= bbox[1] &&
-    elementBBox[3] >= bbox[3]
-  );
-};
-
-export const elementPartiallyOverlapsWithOrContainsBBox = (
-  element: Element,
-  bbox: Bounds,
-): boolean => {
-  const elementBBox = getRotatedBBox(element);
-
-  return (
-    (isValueInRange(elementBBox[0], bbox[0], bbox[2]) ||
-      isValueInRange(bbox[0], elementBBox[0], elementBBox[2])) &&
-    (isValueInRange(elementBBox[1], bbox[1], bbox[3]) ||
-      isValueInRange(bbox[1], elementBBox[1], elementBBox[3]))
-  );
-};
-
-export const elementsOverlappingBBox = ({
-  elements,
-  bounds,
-  type,
-  errorMargin = 0,
-}: {
-  elements: Elements;
-  bounds: Bounds | ExcalidrawElement;
-  /** safety offset. Defaults to 0. */
-  errorMargin?: number;
-  /**
-   * - overlap: elements overlapping or inside bounds
-   * - contain: elements inside bounds or bounds inside elements
-   * - inside: elements inside bounds
-   **/
-  type: "overlap" | "contain" | "inside";
-}) => {
-  if (isExcalidrawElement(bounds)) {
-    bounds = getElementBounds(bounds);
-  }
-  const adjustedBBox: Bounds = [
-    bounds[0] - errorMargin,
-    bounds[1] - errorMargin,
-    bounds[2] + errorMargin,
-    bounds[3] + errorMargin,
-  ];
-
-  const includedElementSet = new Set<string>();
-
-  for (const element of elements) {
-    if (includedElementSet.has(element.id)) {
-      continue;
-    }
-
-    const isOverlaping =
-      type === "overlap"
-        ? elementPartiallyOverlapsWithOrContainsBBox(element, adjustedBBox)
-        : type === "inside"
-        ? isElementInsideBBox(element, adjustedBBox)
-        : isElementInsideBBox(element, adjustedBBox, true);
-
-    if (isOverlaping) {
-      includedElementSet.add(element.id);
-
-      if (element.boundElements) {
-        for (const boundElement of element.boundElements) {
-          includedElementSet.add(boundElement.id);
-        }
-      }
-
-      if (isTextElement(element) && element.containerId) {
-        includedElementSet.add(element.containerId);
-      }
-
-      if (isArrowElement(element)) {
-        if (element.startBinding) {
-          includedElementSet.add(element.startBinding.elementId);
-        }
-
-        if (element.endBinding) {
-          includedElementSet.add(element.endBinding?.elementId);
-        }
-      }
-    }
-  }
-
-  return elements.filter((element) => includedElementSet.has(element.id));
-};
@@ -20,13 +20,7 @@ import type { Drawable } from "roughjs/bin/core";
 import type { RoughSVG } from "roughjs/bin/svg";

 import { StaticCanvasRenderConfig } from "../scene/types";
-import {
-  distance,
-  getFontString,
-  getFontFamilyString,
-  isRTL,
-  isTestEnv,
-} from "../utils";
+import { distance, getFontString, getFontFamilyString, isRTL } from "../utils";
 import { getCornerRadius, isPathALoop, isRightAngle } from "../math";
 import rough from "roughjs/bin/rough";
 import {
@@ -595,7 +589,11 @@ export const renderElement = (
 ) => {
  switch (element.type) {
    case "frame": {
-      if (appState.frameRendering.enabled && appState.frameRendering.outline) {
+      if (
+        !renderConfig.isExporting &&
+        appState.frameRendering.enabled &&
+        appState.frameRendering.outline
+      ) {
        context.save();
        context.translate(
          element.x + appState.scrollX,
@@ -603,7 +601,7 @@ export const renderElement = (
        );
        context.fillStyle = "rgba(0, 0, 200, 0.04)";

-        context.lineWidth = FRAME_STYLE.strokeWidth / appState.zoom.value;
+        context.lineWidth = 2 / appState.zoom.value;
        context.strokeStyle = FRAME_STYLE.strokeColor;

        if (FRAME_STYLE.radius && context.roundRect) {
@@ -843,13 +841,10 @@ const maybeWrapNodesInFrameClipPath = (
  element: NonDeletedExcalidrawElement,
  root: SVGElement,
  nodes: SVGElement[],
-  frameRendering: AppState["frameRendering"],
+  exportedFrameId?: string | null,
 ) => {
-  if (!frameRendering.enabled || !frameRendering.clip) {
-    return null;
-  }
  const frame = getContainingFrame(element);
-  if (frame) {
+  if (frame && frame.id === exportedFrameId) {
    const g = root.ownerDocument!.createElementNS(SVG_NS, "g");
    g.setAttributeNS(SVG_NS, "clip-path", `url(#${frame.id})`);
    nodes.forEach((node) => g.appendChild(node));
@@ -866,11 +861,9 @@ export const renderElementToSvg = (
  files: BinaryFiles,
  offsetX: number,
  offsetY: number,
-  renderConfig: {
-    exportWithDarkMode: boolean;
-    renderEmbeddables: boolean;
-    frameRendering: AppState["frameRendering"];
-  },
+  exportWithDarkMode?: boolean,
+  exportingFrameId?: string | null,
+  renderEmbeddables?: boolean,
 ) => {
  const offset = { x: offsetX, y: offsetY };
  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
@@ -904,13 +897,6 @@ export const renderElementToSvg = (
    root = anchorTag;
  }

-  const addToRoot = (node: SVGElement, element: ExcalidrawElement) => {
-    if (isTestEnv()) {
-      node.setAttribute("data-id", element.id);
-    }
-    root.appendChild(node);
-  };
-
  const opacity =
    ((getContainingFrame(element)?.opacity ?? 100) * element.opacity) / 10000;

@@ -945,10 +931,10 @@ export const renderElementToSvg = (
        element,
        root,
        [node],
-        renderConfig.frameRendering,
+        exportingFrameId,
      );

-      addToRoot(g || node, element);
+      g ? root.appendChild(g) : root.appendChild(node);
      break;
    }
    case "embeddable": {
@@ -971,7 +957,7 @@ export const renderElementToSvg = (
          offsetY || 0
        }) rotate(${degree} ${cx} ${cy})`,
      );
-      addToRoot(node, element);
+      root.appendChild(node);

      const label: ExcalidrawElement =
        createPlaceholderEmbeddableLabel(element);
@@ -982,7 +968,9 @@ export const renderElementToSvg = (
        files,
        label.x + offset.x - element.x,
        label.y + offset.y - element.y,
-        renderConfig,
+        exportWithDarkMode,
+        exportingFrameId,
+        renderEmbeddables,
      );

      // render embeddable element + iframe
@@ -1011,10 +999,7 @@ export const renderElementToSvg = (
      // if rendering embeddables explicitly disabled or
      // embedding documents via srcdoc (which doesn't seem to work for SVGs)
      // replace with a link instead
-      if (
-        renderConfig.renderEmbeddables === false ||
-        embedLink?.type === "document"
-      ) {
+      if (renderEmbeddables === false || embedLink?.type === "document") {
        const anchorTag = svgRoot.ownerDocument!.createElementNS(SVG_NS, "a");
        anchorTag.setAttribute("href", normalizeLink(element.link || ""));
        anchorTag.setAttribute("target", "_blank");
@@ -1048,7 +1033,8 @@ export const renderElementToSvg = (

        embeddableNode.appendChild(foreignObject);
      }
-      addToRoot(embeddableNode, element);
+
+      root.appendChild(embeddableNode);
      break;
    }
    case "line":
@@ -1133,13 +1119,12 @@ export const renderElementToSvg = (
        element,
        root,
        [group, maskPath],
-        renderConfig.frameRendering,
+        exportingFrameId,
      );
      if (g) {
-        addToRoot(g, element);
        root.appendChild(g);
      } else {
-        addToRoot(group, element);
+        root.appendChild(group);
        root.append(maskPath);
      }
      break;
@@ -1173,10 +1158,10 @@ export const renderElementToSvg = (
        element,
        root,
        [node],
-        renderConfig.frameRendering,
+        exportingFrameId,
      );

-      addToRoot(g || node, element);
+      g ? root.appendChild(g) : root.appendChild(node);
      break;
    }
    case "image": {
@@ -1206,10 +1191,7 @@ export const renderElementToSvg = (
        use.setAttribute("href", `#${symbolId}`);

        // in dark theme, revert the image color filter
-        if (
-          renderConfig.exportWithDarkMode &&
-          fileData.mimeType !== MIME_TYPES.svg
-        ) {
+        if (exportWithDarkMode && fileData.mimeType !== MIME_TYPES.svg) {
          use.setAttribute("filter", IMAGE_INVERT_FILTER);
        }

@@ -1245,39 +1227,14 @@ export const renderElementToSvg = (
          element,
          root,
          [g],
-          renderConfig.frameRendering,
+          exportingFrameId,
        );
-        addToRoot(clipG || g, element);
+        clipG ? root.appendChild(clipG) : root.appendChild(g);
      }
      break;
    }
    // frames are not rendered and only acts as a container
    case "frame": {
-      if (
-        renderConfig.frameRendering.enabled &&
-        renderConfig.frameRendering.outline
-      ) {
-        const rect = document.createElementNS(SVG_NS, "rect");
-
-        rect.setAttribute(
-          "transform",
-          `translate(${offsetX || 0} ${
-            offsetY || 0
-          }) rotate(${degree} ${cx} ${cy})`,
-        );
-
-        rect.setAttribute("width", `${element.width}px`);
-        rect.setAttribute("height", `${element.height}px`);
-        // Rounded corners
-        rect.setAttribute("rx", FRAME_STYLE.radius.toString());
-        rect.setAttribute("ry", FRAME_STYLE.radius.toString());
-
-        rect.setAttribute("fill", "none");
-        rect.setAttribute("stroke", FRAME_STYLE.strokeColor);
-        rect.setAttribute("stroke-width", FRAME_STYLE.strokeWidth.toString());
-
-        addToRoot(rect, element);
-      }
      break;
    }
    default: {
@@ -1331,10 +1288,10 @@ export const renderElementToSvg = (
          element,
          root,
          [node],
-          renderConfig.frameRendering,
+          exportingFrameId,
        );

-        addToRoot(g || node, element);
+        g ? root.appendChild(g) : root.appendChild(node);
      } else {
        // @ts-ignore
        throw new Error(`Unimplemented type ${element.type}`);
@@ -60,7 +60,7 @@ import {
  TransformHandles,
  TransformHandleType,
 } from "../element/transformHandles";
-import { throttleRAF } from "../utils";
+import { throttleRAF, isOnlyExportingSingleFrame } from "../utils";
 import { UserIdleState } from "../types";
 import { FRAME_STYLE, THEME_FILTER } from "../constants";
 import {
@@ -69,12 +69,13 @@ import {
 } from "../element/Hyperlink";
 import { renderSnaps } from "./renderSnaps";
 import {
+  isArrowElement,
  isEmbeddableElement,
  isFrameElement,
  isLinearElement,
 } from "../element/typeChecks";
 import {
-  isEmbeddableOrLabel,
+  isEmbeddableOrFrameLabel,
  createPlaceholderEmbeddableLabel,
 } from "../element/embeddable";
 import {
@@ -165,6 +166,21 @@ const fillCircle = (
  }
 };

+const fillSquare = (
+  context: CanvasRenderingContext2D,
+  cx: number,
+  cy: number,
+  side: number,
+  stroke = true,
+) => {
+  context.beginPath();
+  context.rect(cx - side / 2, cy - side / 2, side, side);
+  context.fill();
+  if (stroke) {
+    context.stroke();
+  }
+};
+
 const strokeGrid = (
  context: CanvasRenderingContext2D,
  gridSize: number,
@@ -223,6 +239,7 @@ const renderSingleLinearPoint = (
  point: Point,
  radius: number,
  isSelected: boolean,
+  renderAsSquare: boolean,
  isPhantomPoint = false,
 ) => {
  context.strokeStyle = "#5e5ad8";
@@ -234,13 +251,29 @@ const renderSingleLinearPoint = (
    context.fillStyle = "rgba(177, 151, 252, 0.7)";
  }

-  fillCircle(
-    context,
-    point[0],
-    point[1],
-    radius / appState.zoom.value,
-    !isPhantomPoint,
-  );
+  const effectiveRadius = radius / appState.zoom.value;
+
+  if (renderAsSquare) {
+    fillSquare(
+      context,
+      point[0],
+      point[1],
+      effectiveRadius * 2,
+      !isPhantomPoint,
+    );
+  } else {
+    fillCircle(context, point[0], point[1], effectiveRadius, !isPhantomPoint);
+  }
+};
+
+const isLinearPointAtIndexSquared = (
+  element: NonDeleted<ExcalidrawLinearElement>,
+  index: number,
+) => {
+  const splitting = element.segmentSplitIndices
+    ? element.segmentSplitIndices.includes(index)
+    : false;
+  return element.roundness ? splitting : !splitting;
 };

 const renderLinearPointHandles = (
@@ -264,7 +297,14 @@ const renderLinearPointHandles = (
    const isSelected =
      !!appState.editingLinearElement?.selectedPointsIndices?.includes(idx);

-    renderSingleLinearPoint(context, appState, point, radius, isSelected);
+    renderSingleLinearPoint(
+      context,
+      appState,
+      point,
+      radius,
+      isSelected,
+      isLinearPointAtIndexSquared(element, idx),
+    );
  });

  //Rendering segment mid points
@@ -292,6 +332,7 @@ const renderLinearPointHandles = (
          segmentMidPoint,
          radius,
          false,
+          false,
        );
        highlightPoint(segmentMidPoint, context, appState);
      } else {
@@ -302,6 +343,7 @@ const renderLinearPointHandles = (
          segmentMidPoint,
          radius,
          false,
+          false,
        );
      }
    } else if (appState.editingLinearElement || points.length === 2) {
@@ -311,6 +353,7 @@ const renderLinearPointHandles = (
        segmentMidPoint,
        POINT_HANDLE_SIZE / 2,
        false,
+        false,
        true,
      );
    }
@@ -323,16 +366,16 @@ const highlightPoint = (
  point: Point,
  context: CanvasRenderingContext2D,
  appState: InteractiveCanvasAppState,
+  renderAsSquare = false,
 ) => {
  context.fillStyle = "rgba(105, 101, 219, 0.4)";
+  const radius = LinearElementEditor.POINT_HANDLE_SIZE / appState.zoom.value;

-  fillCircle(
-    context,
-    point[0],
-    point[1],
-    LinearElementEditor.POINT_HANDLE_SIZE / appState.zoom.value,
-    false,
-  );
+  if (renderAsSquare) {
+    fillSquare(context, point[0], point[1], radius * 2, false);
+  } else {
+    fillCircle(context, point[0], point[1], radius, false);
+  }
 };
 const renderLinearElementPointHighlight = (
  context: CanvasRenderingContext2D,
@@ -354,10 +397,15 @@ const renderLinearElementPointHighlight = (
    element,
    hoverPointIndex,
  );
+
  context.save();
  context.translate(appState.scrollX, appState.scrollY);
-
-  highlightPoint(point, context, appState);
+  highlightPoint(
+    point,
+    context,
+    appState,
+    isLinearPointAtIndexSquared(element, hoverPointIndex),
+  );
  context.restore();
 };

@@ -369,7 +417,7 @@ const frameClip = (
 ) => {
  context.translate(frame.x + appState.scrollX, frame.y + appState.scrollY);
  context.beginPath();
-  if (context.roundRect) {
+  if (context.roundRect && !renderConfig.isExporting) {
    context.roundRect(
      0,
      0,
@@ -963,15 +1011,20 @@ const _renderStaticScene = ({

  // Paint visible elements
  visibleElements
-    .filter((el) => !isEmbeddableOrLabel(el))
+    .filter((el) => !isEmbeddableOrFrameLabel(el))
    .forEach((element) => {
      try {
+        // - when exporting the whole canvas, we DO NOT apply clipping
+        // - when we are exporting a particular frame, apply clipping
+        //   if the containing frame is not selected, apply clipping
        const frameId = element.frameId || appState.frameToHighlight?.id;

        if (
          frameId &&
-          appState.frameRendering.enabled &&
-          appState.frameRendering.clip
+          ((renderConfig.isExporting && isOnlyExportingSingleFrame(elements)) ||
+            (!renderConfig.isExporting &&
+              appState.frameRendering.enabled &&
+              appState.frameRendering.clip))
        ) {
          context.save();

@@ -979,7 +1032,10 @@ const _renderStaticScene = ({

          // TODO do we need to check isElementInFrame here?
          if (frame && isElementInFrame(element, elements, appState)) {
-            frameClip(frame, context, renderConfig, appState);
+            // do not clip arrows
+            if (!isArrowElement(element)) {
+              frameClip(frame, context, renderConfig, appState);
+            }
          }
          renderElement(element, rc, context, renderConfig, appState);
          context.restore();
@@ -996,7 +1052,7 @@ const _renderStaticScene = ({

  // render embeddables on top
  visibleElements
-    .filter((el) => isEmbeddableOrLabel(el))
+    .filter((el) => isEmbeddableOrFrameLabel(el))
    .forEach((element) => {
      try {
        const render = () => {
@@ -1022,8 +1078,10 @@ const _renderStaticScene = ({

        if (
          frameId &&
-          appState.frameRendering.enabled &&
-          appState.frameRendering.clip
+          ((renderConfig.isExporting && isOnlyExportingSingleFrame(elements)) ||
+            (!renderConfig.isExporting &&
+              appState.frameRendering.enabled &&
+              appState.frameRendering.clip))
        ) {
          context.save();

@@ -1291,7 +1349,7 @@ const renderFrameHighlight = (
  const height = y2 - y1;

  context.strokeStyle = "rgb(0,118,255)";
-  context.lineWidth = FRAME_STYLE.strokeWidth / appState.zoom.value;
+  context.lineWidth = (FRAME_STYLE.strokeWidth * 2) / appState.zoom.value;

  context.save();
  context.translate(appState.scrollX, appState.scrollY);
@@ -1447,29 +1505,24 @@ export const renderSceneToSvg = (
  {
    offsetX = 0,
    offsetY = 0,
-    exportWithDarkMode,
+    exportWithDarkMode = false,
+    exportingFrameId = null,
    renderEmbeddables,
-    frameRendering,
  }: {
    offsetX?: number;
    offsetY?: number;
-    exportWithDarkMode: boolean;
-    renderEmbeddables: boolean;
-    frameRendering: AppState["frameRendering"];
-  },
+    exportWithDarkMode?: boolean;
+    exportingFrameId?: string | null;
+    renderEmbeddables?: boolean;
+  } = {},
 ) => {
  if (!svgRoot) {
    return;
  }

-  const renderConfig = {
-    exportWithDarkMode,
-    renderEmbeddables,
-    frameRendering,
-  };
  // render elements
  elements
-    .filter((el) => !isEmbeddableOrLabel(el))
+    .filter((el) => !isEmbeddableOrFrameLabel(el))
    .forEach((element) => {
      if (!element.isDeleted) {
        try {
@@ -1480,7 +1533,9 @@ export const renderSceneToSvg = (
            files,
            element.x + offsetX,
            element.y + offsetY,
-            renderConfig,
+            exportWithDarkMode,
+            exportingFrameId,
+            renderEmbeddables,
          );
        } catch (error: any) {
          console.error(error);
@@ -1501,7 +1556,9 @@ export const renderSceneToSvg = (
            files,
            element.x + offsetX,
            element.y + offsetY,
-            renderConfig,
+            exportWithDarkMode,
+            exportingFrameId,
+            renderEmbeddables,
          );
        } catch (error: any) {
          console.error(error);
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Preet	c552ff4554	added an explanatory comment	2023-10-23 21:48:35 -07:00
Preet	26f9b54199	compute midpoints properly when dealing with split line indices	2023-10-23 21:41:00 -07:00
Preet	7f5b7bab69	split linear segments as curves	2023-10-23 21:29:53 -07:00
Preet	bf7c91536f	render and toggle split points for linear elements as well	2023-10-23 21:15:25 -07:00
Preet	4372e992e0	highlight squares appropriately	2023-10-23 18:13:43 -07:00
Preet	1e4bfceb13	render split points as squares	2023-10-23 17:58:28 -07:00
Preet	539071fcfe	ensure split indices are sorted	2023-10-23 17:29:12 -07:00
Preet	3700cf2d10	fix some linting/prettier issues	2023-10-23 10:50:52 -07:00
Preet	89218ba596	update indices when inserting/removing points	2023-10-22 17:39:51 -07:00
Preet	bc5436592e	split curve only for rounded curves	2023-10-22 17:07:08 -07:00
Preet	750055ddfa	draw split curves	2023-10-21 21:45:27 -07:00
Preet	93e4cb8d25	restore properly	2023-10-21 17:24:01 -07:00
Preet	a2dd3c6ea2	visual indicator that curve is being split	2023-10-21 16:57:56 -07:00
Preet	0360e64219	.	2023-10-21 16:41:32 -07:00
Preet	c2867c9a93	defined split array	2023-10-21 16:15:41 -07:00
Preet	14bca119f7	update rough to include hetrogeneous curves	2023-10-21 16:04:06 -07:00