build: allow node v22

2025-07-25 13:58:22 +08:00 · 2024-05-07 12:58:27 +02:00
781 changed files with 18712 additions and 65071 deletions
--- a/.dockerignore
+++ b/.dockerignore
@ -4,16 +4,8 @@
 !.eslintrc.json
 !.npmrc
 !.prettierrc
-!excalidraw-app/
 !package.json
 !public/
 !packages/
-!scripts/
 !tsconfig.json
 !yarn.lock
-
-# keep (sub)sub directories at the end to exclude from explicit included
-# e.g. ./packages/excalidraw/{dist,node_modules}
-**/build
-**/dist
-**/node_modules
--- a/.env.development
+++ b/.env.development
@ -8,7 +8,7 @@ VITE_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfu
 VITE_APP_WS_SERVER_URL=http://localhost:3002

 VITE_APP_PLUS_LP=https://plus.excalidraw.com
-VITE_APP_PLUS_APP=http://localhost:3000
+VITE_APP_PLUS_APP=https://app.excalidraw.com

 VITE_APP_AI_BACKEND=http://localhost:3015

@ -17,10 +17,12 @@ VITE_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8","a
 # put these in your .env.local, or make sure you don't commit!
 # must be lowercase `true` when turned on
 #
+# whether to enable Service Workers in development
+VITE_APP_DEV_ENABLE_SW=
 # whether to disable live reload / HMR. Usuaully what you want to do when
 # debugging Service Workers.
 VITE_APP_DEV_DISABLE_LIVE_RELOAD=
-VITE_APP_ENABLE_TRACKING=true
+VITE_APP_DISABLE_TRACKING=true

 FAST_REFRESH=false

@ -37,14 +39,3 @@ VITE_APP_COLLAPSE_OVERLAY=true

 # Set this flag to false to disable eslint
 VITE_APP_ENABLE_ESLINT=true
-
-# Enable PWA in dev server
-VITE_APP_ENABLE_PWA=false
-
-VITE_APP_PLUS_EXPORT_PUBLIC_KEY='MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAm2g5T+Rub6Kbf1Mf57t0
-7r2zeHuVg4dla3r5ryXMswtzz6x767octl6oLThn33mQsPSy3GKglFZoCTXJR4ij
-ba8SxB04sL/N8eRrKja7TFWjCVtRwTTfyy771NYYNFVJclkxHyE5qw4m27crHF1y
-UNWEjuqNMi/lwAErS9fFa2oJlWyT8U7zzv/5kQREkxZI6y9v0AF3qcbsy2731FnD
-s9ChJvOUW9toIab2gsIdrKW8ZNpu084ZFVKb6LNjvIXI1Se4oMTHeszXzNptzlot
-kdxxjOoaQMAyfljFSot1F1FlU6MQlag7UnFGvFjRHN1JI5q4K+n3a67DX+TMyRqS
-HQIDAQAB'
--- a/.env.production
+++ b/.env.production
@ -14,19 +14,4 @@ VITE_APP_WS_SERVER_URL=https://oss-collab.excalidraw.com

 VITE_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyAd15pYlMci_xIp9ko6wkEsDzAAA0Dn0RU","authDomain":"excalidraw-room-persistence.firebaseapp.com","databaseURL":"https://excalidraw-room-persistence.firebaseio.com","projectId":"excalidraw-room-persistence","storageBucket":"excalidraw-room-persistence.appspot.com","messagingSenderId":"654800341332","appId":"1:654800341332:web:4a692de832b55bd57ce0c1"}'

-VITE_APP_ENABLE_TRACKING=false
-
-VITE_APP_PLUS_EXPORT_PUBLIC_KEY='MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEApQ0jM9Qz8TdFLzcuAZZX
-/WvuKSOJxiw6AR/ZcE3eFQWM/mbFdhQgyK8eHGkKQifKzH1xUZjCxyXcxW6ZO02t
-kPOPxhz+nxUrIoWCD/V4NGmUA1lxwHuO21HN1gzKrN3xHg5EGjyouR9vibT9VDGF
-gq6+4Ic/kJX+AD2MM7Yre2+FsOdysrmuW2Fu3ahuC1uQE7pOe1j0k7auNP0y1q53
-PrB8Ts2LUpepWC1l7zIXFm4ViDULuyWXTEpUcHSsEH8vpd1tckjypxCwkipfZsXx
-iPszy0o0Dx2iArPfWMXlFAI9mvyFCyFC3+nSvfyAUb2C4uZgCwAuyFh/ydPF4DEE
-PQIDAQAB'
-
-# Set the below flags explicitly to false in production mode since vite loads and merges .env.local vars when  running the build command
-VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX=false
-VITE_APP_COLLAPSE_OVERLAY=false
-# Enable eslint in dev server
-VITE_APP_ENABLE_ESLINT=false
-
+VITE_APP_DISABLE_TRACKING=
--- a/.eslintignore
+++ b/.eslintignore
@ -6,6 +6,3 @@ firebase/
 dist/
 public/workbox
 packages/excalidraw/types
-examples/**/public
-dev-dist
-coverage
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -2,21 +2,6 @@
  "extends": ["@excalidraw/eslint-config", "react-app"],
  "rules": {
    "import/no-anonymous-default-export": "off",
-    "no-restricted-globals": "off",
-    "@typescript-eslint/consistent-type-imports": [
-      "error",
-      {
-        "prefer": "type-imports",
-        "disallowTypeAnnotations": false,
-        "fixStyle": "separate-type-imports"
-      }
-    ],
-    "no-restricted-imports": [
-      "error",
-      {
-        "name": "jotai",
-        "message": "Do not import from \"jotai\" directly. Use our app-specific modules (\"editor-jotai\" or \"app-jotai\")."
-      }
-    ]
+    "no-restricted-globals": "off"
  }
 }
--- a/.github/workflows/locales-coverage.yml
+++ b/.github/workflows/locales-coverage.yml
@ -10,7 +10,7 @@ jobs:
    runs-on: ubuntu-latest

    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v2
        with:
          token: ${{ secrets.PUSH_TRANSLATIONS_COVERAGE_PAT }}

--- a/.github/workflows/semantic-pr-title.yml
+++ b/.github/workflows/semantic-pr-title.yml
@ -11,6 +11,6 @@ jobs:
  semantic:
    runs-on: ubuntu-latest
    steps:
-      - uses: amannn/action-semantic-pull-request@v5
+      - uses: amannn/action-semantic-pull-request@v3.0.0
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@ -1,16 +1,14 @@
 name: Tests

-on:
-  push:
-    branches: master
+on: pull_request

 jobs:
  test:
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v2
      - name: Setup Node.js 18.x
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v2
        with:
          node-version: 18.x
      - name: Install and test
--- a/12
+++ b/12
@ -2,18 +2,16 @@ FROM node:18 AS build

 WORKDIR /opt/node_app

-COPY . .
-
-# do not ignore optional dependencies:
-# Error: Cannot find module @rollup/rollup-linux-x64-gnu
-RUN yarn --network-timeout 600000
+COPY package.json yarn.lock ./
+RUN yarn --ignore-optional --network-timeout 600000

 ARG NODE_ENV=production

+COPY . .
 RUN yarn build:app:docker

-FROM nginx:1.27-alpine
+FROM nginx:1.21-alpine

-COPY --from=build /opt/node_app/excalidraw-app/build /usr/share/nginx/html
+COPY --from=build /opt/node_app/build /usr/share/nginx/html

 HEALTHCHECK CMD wget -q -O /dev/null http://localhost || exit 1
--- a/README.md
+++ b/README.md
@ -7,7 +7,7 @@

 <h4 align="center">
  <a href="https://excalidraw.com">Excalidraw Editor</a> |
-  <a href="https://plus.excalidraw.com/blog">Blog</a> |
+  <a href="https://blog.excalidraw.com">Blog</a> |
  <a href="https://docs.excalidraw.com">Documentation</a> |
  <a href="https://plus.excalidraw.com">Excalidraw+</a>
 </h4>
--- a/dev-docs/docs/@excalidraw/excalidraw/api/children-components/main-menu.mdx
+++ b/dev-docs/docs/@excalidraw/excalidraw/api/children-components/main-menu.mdx
@ -133,7 +133,7 @@ function App() {
 }
 ```

-Here is a [complete list](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/components/main-menu/DefaultItems.tsx) of the default items.
+Here is a [complete list](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/components/mainMenu/DefaultItems.tsx) of the default items.

 ### MainMenu.Group

--- a/dev-docs/docs/@excalidraw/excalidraw/api/children-components/welcome-screen.mdx
+++ b/dev-docs/docs/@excalidraw/excalidraw/api/children-components/welcome-screen.mdx
@ -31,7 +31,7 @@ The welcome screen consists of two main groups of subcomponents:

 <img
  src={require("@site/static/img/welcome-screen-overview.png").default}
-  alt="Excalidraw logo: Sketch hand-drawn like diagrams."
+  alt="Excalidraw logo: Sketch handrawn like diagrams."
 />

 ### Center
--- a/dev-docs/docs/@excalidraw/excalidraw/api/constants.mdx
+++ b/dev-docs/docs/@excalidraw/excalidraw/api/constants.mdx
@ -12,7 +12,7 @@ import { FONT_FAMILY } from "@excalidraw/excalidraw";

 | Font Family | Description            |
 | ----------- | ---------------------- |
-| `Virgil`    | The `Hand-drawn` font |
+| `Virgil`    | The `handwritten` font |
 | `Helvetica` | The `Normal` Font      |
 | `Cascadia`  | The `Code` Font        |

--- a/dev-docs/docs/@excalidraw/excalidraw/api/props/excalidraw-api.mdx
+++ b/dev-docs/docs/@excalidraw/excalidraw/api/props/excalidraw-api.mdx
@ -13,7 +13,7 @@ Once the callback is triggered, you will need to store the api in state to acces
 ```jsx showLineNumbers
 export default function App() {
  const [excalidrawAPI, setExcalidrawAPI] = useState(null);
-  return <Excalidraw excalidrawAPI={(api)=> setExcalidrawAPI(api)} />;
+  return <Excalidraw excalidrawAPI={{(api)=> setExcalidrawAPI(api)}} />;
 }
 ```

--- a/dev-docs/docs/@excalidraw/excalidraw/api/props/props.mdx
+++ b/dev-docs/docs/@excalidraw/excalidraw/api/props/props.mdx
@ -3,32 +3,31 @@
 All `props` are _optional_.

 | Name | Type | Default | Description |
-| --- | --- | --- | --- | --- | --- | --- | --- | --- |
+| --- | --- | --- | --- |
 | [`initialData`](/docs/@excalidraw/excalidraw/api/props/initialdata) | `object` &#124; `null` &#124; <code>Promise<object &#124; null></code> | `null` | The initial data with which app loads. |
-| [`excalidrawAPI`](/docs/@excalidraw/excalidraw/api/props/excalidraw-api) | `function` | \_ | Callback triggered with the excalidraw api once rendered |
-| [`isCollaborating`](#iscollaborating) | `boolean` | \_ | This indicates if the app is in `collaboration` mode |
-| [`onChange`](#onchange) | `function` | \_ | This callback is triggered whenever the component updates due to any change. This callback will receive the excalidraw `elements` and the current `app state`. |
-| [`onPointerUpdate`](#onpointerupdate) | `function` | \_ | Callback triggered when mouse pointer is updated. |
-| [`onPointerDown`](#onpointerdown) | `function` | \_ | This prop if passed gets triggered on pointer down events |
-| [`onScrollChange`](#onscrollchange) | `function` | \_ | This prop if passed gets triggered when scrolling the canvas. |
-| [`onPaste`](#onpaste) | `function` | \_ | Callback to be triggered if passed when something is pasted into the scene |
-| [`onLibraryChange`](#onlibrarychange) | `function` | \_ | The callback if supplied is triggered when the library is updated and receives the library items. |
-| [`generateLinkForSelection`](#generateLinkForSelection) | `function` | \_ | Allows you to override `url` generation when linking to Excalidraw elements. |
-| [`onLinkOpen`](#onlinkopen) | `function` | \_ | The callback if supplied is triggered when any link is opened. |
+| [`excalidrawAPI`](/docs/@excalidraw/excalidraw/api/props/excalidraw-api) | `function` | _ | Callback triggered with the excalidraw api once rendered |
+| [`isCollaborating`](#iscollaborating) | `boolean` | _ | This indicates if the app is in `collaboration` mode |
+| [`onChange`](#onchange) | `function` | _ | This callback is triggered whenever the component updates due to any change. This callback will receive the excalidraw `elements` and the current `app state`. |
+| [`onPointerUpdate`](#onpointerupdate) | `function` | _ | Callback triggered when mouse pointer is updated. |
+| [`onPointerDown`](#onpointerdown) | `function` | _ | This prop if passed gets triggered on pointer down evenets |
+| [`onScrollChange`](#onscrollchange) | `function` | _ | This prop if passed gets triggered when scrolling the canvas. |
+| [`onPaste`](#onpaste) | `function` | _ | Callback to be triggered if passed when the something is pasted in to the scene |
+| [`onLibraryChange`](#onlibrarychange) | `function` | _ | The callback if supplied is triggered when the library is updated and receives the library items. |
+| [`onLinkOpen`](#onlinkopen) | `function` | _ | The callback if supplied is triggered when any link is opened. |
 | [`langCode`](#langcode) | `string` | `en` | Language code string to be used in Excalidraw |
-| [`renderTopRightUI`](/docs/@excalidraw/excalidraw/api/props/render-props#rendertoprightui) | `function` | \_ | Render function that renders custom UI in top right corner |
-| [`renderCustomStats`](/docs/@excalidraw/excalidraw/api/props/render-props#rendercustomstats) | `function` | \_ | Render function that can be used to render custom stats on the stats dialog. |
-| [`viewModeEnabled`](#viewmodeenabled) | `boolean` | \_ | This indicates if the app is in `view` mode. |
-| [`zenModeEnabled`](#zenmodeenabled) | `boolean` | \_ | This indicates if the `zen` mode is enabled |
-| [`gridModeEnabled`](#gridmodeenabled) | `boolean` | \_ | This indicates if the `grid` mode is enabled |
-| [`libraryReturnUrl`](#libraryreturnurl) | `string` | \_ | What URL should [libraries.excalidraw.com](https://libraries.excalidraw.com) be installed to |
+| [`renderTopRightUI`](/docs/@excalidraw/excalidraw/api/props/render-props#rendertoprightui) | `function` | _ | Render function that renders custom UI in top right corner |
+| [`renderCustomStats`](/docs/@excalidraw/excalidraw/api/props/render-props#rendercustomstats) | `function` | _ | Render function that can be used to render custom stats on the stats dialog. |
+| [`viewModeEnabled`](#viewmodeenabled) | `boolean` | _ | This indicates if the app is in `view` mode. |
+| [`zenModeEnabled`](#zenmodeenabled) | `boolean` | _ | This indicates if the `zen` mode is enabled |
+| [`gridModeEnabled`](#gridmodeenabled) | `boolean` | _ | This indicates if the `grid` mode is enabled |
+| [`libraryReturnUrl`](#libraryreturnurl) | `string` | _ | What URL should [libraries.excalidraw.com](https://libraries.excalidraw.com) be installed to |
 | [`theme`](#theme) | `"light"` &#124; `"dark"` | `"light"` | The theme of the Excalidraw component |
 | [`name`](#name) | `string` |  | Name of the drawing |
 | [`UIOptions`](/docs/@excalidraw/excalidraw/api/props/ui-options) | `object` | [DEFAULT UI OPTIONS](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/constants.ts#L151) | To customise UI options. Currently we support customising [`canvas actions`](/docs/@excalidraw/excalidraw/api/props/ui-options#canvasactions) |
 | [`detectScroll`](#detectscroll) | `boolean` | `true` | Indicates whether to update the offsets when nearest ancestor is scrolled. |
 | [`handleKeyboardGlobally`](#handlekeyboardglobally) | `boolean` | `false` | Indicates whether to bind the keyboard events to document. |
-| [`autoFocus`](#autofocus) | `boolean` | `false` | Indicates whether to focus the Excalidraw component on page load |
-| [`generateIdForFile`](#generateidforfile) | `function` | \_ | Allows you to override `id` generation for files added on canvas |
+| [`autoFocus`](#autofocus) | `boolean` | `false` | indicates whether to focus the Excalidraw component on page load |
+| [`generateIdForFile`](#generateidforfile) | `function` | _ | Allows you to override `id` generation for files added on canvas |
 | [`validateEmbeddable`](#validateEmbeddable) | string[] | `boolean | RegExp | RegExp[] | ((link: string) => boolean | undefined)` | \_ | use for custom src url validation |
 | [`renderEmbeddable`](/docs/@excalidraw/excalidraw/api/props/render-props#renderEmbeddable) | `function` | \_ | Render function that can override the built-in `<iframe>` |

@ -94,8 +93,9 @@ This callback is triggered when mouse pointer is updated.

 This prop if passed will be triggered on pointer down events and has the below signature.

+
 <pre>
-  (activeTool:{" "}
+(activeTool:{" "}
  <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L115">
    {" "}
    AppState["activeTool"]
@ -143,14 +143,6 @@ This callback if supplied will get triggered when the library is updated and has

 It is invoked with empty items when user clears the library. You can use this callback when you want to do something additional when library is updated for example persisting it to local storage.

-### generateLinkForSelection
-
-This prop if passed will be used to replace the default link generation function. The idea is that the host app can take over the creation of element links, which can be used to navigate to a particular element or a group. If the host app chooses a different key for element link id, then the host app should also take care of the handling and the navigation in `onLinkOpen`.
-
-```tsx
-(id: string, type: "element" | "group") => string;
-```
-
 ### onLinkOpen

 This prop if passed will be triggered when clicked on `link`. To handle the redirect yourself (such as when using your own router for internal links), you must call `event.preventDefault()`.
@ -215,7 +207,8 @@ This prop indicates whether the shows the grid. When supplied, the value takes p

 ### libraryReturnUrl

-If supplied, this URL will be used when user tries to install a library from [libraries.excalidraw.com](https://libraries.excalidraw.com). Defaults to _window.location.origin + window.location.pathname_. To install the libraries in the same tab from which it was opened, you need to set `window.name` (to any alphanumeric string) — if it's not set it will open in a new tab.
+If supplied, this URL will be used when user tries to install a library from [libraries.excalidraw.com](https://libraries.excalidraw.com).  
+Defaults to _window.location.origin + window.location.pathname_. To install the libraries in the same tab from which it was opened, you need to set `window.name` (to any alphanumeric string) — if it's not set it will open in a new tab.

 ### theme

@ -227,6 +220,7 @@ You can use [`THEME`](/docs/@excalidraw/excalidraw/api/utils#theme) to specify t

 This prop sets the `name` of the drawing which will be used when exporting the drawing. When supplied, the value takes precedence over _intialData.appState.name_, the `name` will be fully controlled by host app and the users won't be able to edit from within Excalidraw.

+
 ### detectScroll

 Indicates whether Excalidraw should listen for `scroll` event on the nearest scrollable container in the DOM tree and recompute the coordinates (e.g. to correctly handle the cursor) when the component's position changes. You can disable this when you either know this doesn't affect your app or you want to take care of it yourself (calling the [`refresh()`](#ref) method).
--- a/dev-docs/docs/@excalidraw/excalidraw/api/utils/export.mdx
+++ b/dev-docs/docs/@excalidraw/excalidraw/api/utils/export.mdx
@ -20,7 +20,7 @@ exportToCanvas(&#123;<br/>&nbsp;
  getDimensions,<br/>&nbsp;
  files,<br/>&nbsp;
  exportPadding?: number;<br/>
-&#125;: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/utils/export.ts#L24">ExportOpts</a>
+&#125;: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/packages/utils.ts#L21">ExportOpts</a>
 </pre>

 | Name | Type | Default | Description |
@ -90,7 +90,7 @@ function App() {
        <img src={canvasUrl} alt="" />
      </div>
      <div style={{ height: "400px" }}>
-        <Excalidraw excalidrawAPI={(api) => setExcalidrawAPI(api)}
+        <Excalidraw ref={(api) => setExcalidrawAPI(api)}
 />
      </div>
    </>
--- a/dev-docs/docs/@excalidraw/excalidraw/integration.mdx
+++ b/dev-docs/docs/@excalidraw/excalidraw/integration.mdx
@ -12,7 +12,7 @@ import { Excalidraw } from "@excalidraw/excalidraw";

 Throughout the documentation we use live, editable Excalidraw examples like the one shown below.

-While we aim for the examples to closely reflect what you'd get if you rendered it yourself, we actually initialize it with some props behind the scenes.
+While we aim for the examples to closely reflect what you'd get if you rendered it yourself, we actually initialize it with some props behind the scenes.  
 For example, we're passing a `theme` prop to it based on the current color theme of the docs you're just reading.

 :::
@ -70,9 +70,9 @@ If you are using `pages router` then importing the wrapper dynamically would wor
      height: 141.9765625,
    },]));
    return (
-      <div style={{height:"500px", width:"500px"}}>
+      <div style={{height:"500px", width:"500px"}}>  
        <Excalidraw />
-      </div>
+      </div> 
    );
  };
  export default ExcalidrawWrapper;
@ -84,8 +84,8 @@ If you are using `pages router` then importing the wrapper dynamically would wor

  ```jsx showLineNumbers
  import dynamic from "next/dynamic";
-
-  // Since client components get prerenderd on server as well hence importing
+  
+  // Since client components get prerenderd on server as well hence importing 
  // the excalidraw stuff dynamically with ssr false

  const ExcalidrawWrapper = dynamic(
@ -97,7 +97,7 @@ If you are using `pages router` then importing the wrapper dynamically would wor

  export default function Page() {
    return (
-      <ExcalidrawWrapper />
+      <ExcalidrawWrapper />      
    );
  }
  ```
@ -108,7 +108,7 @@ If you are using `pages router` then importing the wrapper dynamically would wor
  ```jsx showLineNumbers
  import dynamic from "next/dynamic";

-  // Since client components get prerenderd on server as well hence importing
+  // Since client components get prerenderd on server as well hence importing 
  // the excalidraw stuff dynamically with ssr false

  const ExcalidrawWrapper = dynamic(
@ -153,7 +153,7 @@ Since Vite removes env variables by default, you can update the vite config to e
    "process.env.IS_PREACT": JSON.stringify("true"),
  },
 ```
-:::
+::: 

 ## Browser

@ -235,5 +235,3 @@ root.render(React.createElement(App));

 </TabItem>
 </Tabs>
-
-You can try it out [here](https://codesandbox.io/p/sandbox/excalidraw-in-browser-tlqom?file=%2Findex.html%3A1%2C10).
--- a/dev-docs/docs/@excalidraw/mermaid-to-excalidraw/api.mdx
+++ b/dev-docs/docs/@excalidraw/mermaid-to-excalidraw/api.mdx
@ -14,7 +14,7 @@ This API receives the mermaid syntax as the input, and resolves to skeleton Exca
 import { parseMermaidToExcalidraw } from "@excalidraw/mermaid-to-excalidraw";
 import { convertToExcalidrawElements}  from "@excalidraw/excalidraw"
 try {
-  const { elements, files } = await parseMermaidToExcalidraw(mermaidSyntax: string, {
+  const { elements, files } = await parseMermaid(mermaidSyntax: string, {
    fontSize: number,
  });
  const excalidrawElements = convertToExcalidrawElements(elements);
--- a/dev-docs/docs/codebase/json-schema.mdx
+++ b/dev-docs/docs/codebase/json-schema.mdx
@ -43,7 +43,7 @@ When saving an Excalidraw scene locally to a file, the JSON file (`.excalidraw`)

  // editor state (canvas config, preferences, ...)
  "appState": {
-    "gridSize": 20,
+    "gridSize": null,
    "viewBackgroundColor": "#ffffff"
  },

--- a/dev-docs/docusaurus.config.js
+++ b/dev-docs/docusaurus.config.js
@ -66,7 +66,7 @@ const config = {
            label: "Docs",
          },
          {
-            to: "https://plus.excalidraw.com/blog",
+            to: "https://blog.excalidraw.com",
            label: "Blog",
            position: "left",
          },
@ -111,7 +111,7 @@ const config = {
            items: [
              {
                label: "Blog",
-                to: "https://plus.excalidraw.com/blog",
+                to: "https://blog.excalidraw.com",
              },
              {
                label: "GitHub",
--- a/dev-docs/package.json
+++ b/dev-docs/package.json
@ -18,13 +18,13 @@
    "@docusaurus/core": "2.2.0",
    "@docusaurus/preset-classic": "2.2.0",
    "@docusaurus/theme-live-codeblock": "2.2.0",
-    "@excalidraw/excalidraw": "0.17.6",
+    "@excalidraw/excalidraw": "0.17.0",
    "@mdx-js/react": "^1.6.22",
    "clsx": "^1.2.1",
    "docusaurus-plugin-sass": "0.2.3",
    "prism-react-renderer": "^1.3.5",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
    "sass": "1.57.1"
  },
  "devDependencies": {
--- a/dev-docs/src/css/custom.scss
+++ b/dev-docs/src/css/custom.scss
@ -59,7 +59,7 @@ pre a {
  padding: 5px;
  background: #70b1ec;
  color: white;
-  font-weight: 700;
+  font-weight: bold;
  border: none;
 }

--- a/dev-docs/yarn.lock
+++ b/dev-docs/yarn.lock
@ -1547,7 +1547,7 @@
    "@docusaurus/theme-search-algolia" "2.2.0"
    "@docusaurus/types" "2.2.0"

-"@docusaurus/react-loadable@5.5.2":
+"@docusaurus/react-loadable@5.5.2", "react-loadable@npm:@docusaurus/react-loadable@5.5.2":
  version "5.5.2"
  resolved "https://registry.yarnpkg.com/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz#81aae0db81ecafbdaee3651f12804580868fa6ce"
  integrity sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==
@ -1718,10 +1718,10 @@
    url-loader "^4.1.1"
    webpack "^5.73.0"

-"@excalidraw/excalidraw@0.17.6":
-  version "0.17.6"
-  resolved "https://registry.yarnpkg.com/@excalidraw/excalidraw/-/excalidraw-0.17.6.tgz#5fd208ce69d33ca712d1804b50d7d06d5c46ac4d"
-  integrity sha512-fyCl+zG/Z5yhHDh5Fq2ZGmphcrALmuOdtITm8gN4d8w4ntnaopTXcTfnAAaU3VleDC6LhTkoLOTG6P5kgREiIg==
+"@excalidraw/excalidraw@0.17.0":
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/@excalidraw/excalidraw/-/excalidraw-0.17.0.tgz#3c64aa8e36406ac171b008cfecbdce5bb0755725"
+  integrity sha512-NzP22v5xMqxYW27ZtTHhiGFe7kE8NeBk45aoeM/mDSkXiOXPDH+PcvwzHRN/Ei+Vj/0sTPHxejn8bZyRWKGjXg==

 "@hapi/hoek@^9.0.0":
  version "9.3.0"
@ -2789,14 +2789,7 @@ brace-expansion@^1.1.7:
    balanced-match "^1.0.0"
    concat-map "0.0.1"

-braces@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
-  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
-  dependencies:
-    fill-range "^7.1.1"
-
-braces@~3.0.2:
+braces@^3.0.2, braces@~3.0.2:
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
@ -4018,13 +4011,6 @@ fill-range@^7.0.1:
  dependencies:
    to-regex-range "^5.0.1"

-fill-range@^7.1.1:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
-  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
-  dependencies:
-    to-regex-range "^5.0.1"
-
 finalhandler@1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.2.0.tgz#7d23fe5731b207b4640e4fcd00aec1f9207a7b32"
@ -5221,11 +5207,11 @@ methods@~1.1.2:
  integrity sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==

 micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
-  integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
+  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
  dependencies:
-    braces "^3.0.3"
+    braces "^3.0.2"
    picomatch "^2.3.1"

 mime-db@1.52.0, "mime-db@>= 1.43.0 < 2":
@ -6204,13 +6190,14 @@ react-dev-utils@^12.0.1:
    strip-ansi "^6.0.1"
    text-table "^0.2.0"

-react-dom@18.2.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
-  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
+react-dom@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
+  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
  dependencies:
    loose-envify "^1.1.0"
-    scheduler "^0.23.0"
+    object-assign "^4.1.1"
+    scheduler "^0.20.2"

 react-error-overlay@^6.0.11:
  version "6.0.11"
@ -6273,14 +6260,6 @@ react-loadable-ssr-addon-v5-slorber@^1.0.1:
  dependencies:
    "@babel/runtime" "^7.10.3"

-"react-loadable@npm:@docusaurus/react-loadable@5.5.2":
-  version "5.5.2"
-  resolved "https://registry.yarnpkg.com/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz#81aae0db81ecafbdaee3651f12804580868fa6ce"
-  integrity sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==
-  dependencies:
-    "@types/react" "*"
-    prop-types "^15.6.2"
-
 react-router-config@^5.1.1:
  version "5.1.1"
  resolved "https://registry.yarnpkg.com/react-router-config/-/react-router-config-5.1.1.tgz#0f4263d1a80c6b2dc7b9c1902c9526478194a988"
@ -6331,12 +6310,13 @@ react-textarea-autosize@^8.3.2:
    use-composed-ref "^1.3.0"
    use-latest "^1.2.1"

-react@18.2.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
-  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
+react@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
+  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
  dependencies:
    loose-envify "^1.1.0"
+    object-assign "^4.1.1"

 readable-stream@^2.0.1:
  version "2.3.7"
@ -6684,12 +6664,13 @@ sax@^1.2.4:
  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
  integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==

-scheduler@^0.23.0:
-  version "0.23.2"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
-  integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==
+scheduler@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
+  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
  dependencies:
    loose-envify "^1.1.0"
+    object-assign "^4.1.1"

 schema-utils@2.7.0:
  version "2.7.0"
@ -6797,9 +6778,9 @@ send@0.18.0:
    statuses "2.0.1"

 serialize-javascript@^6.0.0:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.2.tgz#defa1e055c83bf6d59ea805d8da862254eb6a6c2"
-  integrity sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.0.tgz#efae5d88f45d7924141da8b5c3a7a7e663fefeb8"
+  integrity sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==
  dependencies:
    randombytes "^2.1.0"

--- a/examples/excalidraw/components/ExampleApp.scss
+++ b/examples/excalidraw/components/ExampleApp.scss
--- a/examples/excalidraw/components/ExampleApp.tsx
+++ b/examples/excalidraw/components/ExampleApp.tsx
@ -12,9 +12,9 @@ import type * as TExcalidraw from "@excalidraw/excalidraw";

 import { nanoid } from "nanoid";

-import type { ResolvablePromise } from "../utils";
 import {
  resolvablePromise,
+  ResolvablePromise,
  distance2d,
  fileOpen,
  withBatchedUpdates,
@ -40,7 +40,7 @@ import type {
 } from "@excalidraw/excalidraw/dist/excalidraw/element/types";
 import type { ImportedLibraryData } from "@excalidraw/excalidraw/dist/excalidraw/data/types";

-import "./ExampleApp.scss";
+import "./App.scss";

 type Comment = {
  x: number;
@ -73,7 +73,7 @@ export interface AppProps {
  excalidrawLib: typeof TExcalidraw;
 }

-export default function ExampleApp({
+export default function App({
  appTitle,
  useCustom,
  customArgs,
@ -872,7 +872,7 @@ export default function ExampleApp({
                files: excalidrawAPI.getFiles(),
              });
              const ctx = canvas.getContext("2d")!;
-              ctx.font = "30px Excalifont";
+              ctx.font = "30px Virgil";
              ctx.strokeText("My custom text", 50, 60);
              setCanvasUrl(canvas.toDataURL());
            }}
@ -893,7 +893,7 @@ export default function ExampleApp({
                files: excalidrawAPI.getFiles(),
              });
              const ctx = canvas.getContext("2d")!;
-              ctx.font = "30px Excalifont";
+              ctx.font = "30px Virgil";
              ctx.strokeText("My custom text", 50, 60);
              setCanvasUrl(canvas.toDataURL());
            }}
--- a/examples/excalidraw/components/MobileFooter.tsx
+++ b/examples/excalidraw/components/MobileFooter.tsx
@ -1,4 +1,4 @@
-import type { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/dist/excalidraw/types";
+import { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/dist/excalidraw/types";
 import CustomFooter from "./CustomFooter";
 import type * as TExcalidraw from "@excalidraw/excalidraw";

--- a/examples/excalidraw/initialData.tsx
+++ b/examples/excalidraw/initialData.tsx
@ -46,7 +46,7 @@ const elements: ExcalidrawElementSkeleton[] = [
 ];
 export default {
  elements,
-  appState: { viewBackgroundColor: "#AFEEEE", currentItemFontFamily: 5 },
+  appState: { viewBackgroundColor: "#AFEEEE", currentItemFontFamily: 1 },
  scrollToContent: true,
  libraryItems: [
    [
--- a/examples/excalidraw/utils.ts
+++ b/examples/excalidraw/utils.ts
@ -1,6 +1,6 @@
 import { unstable_batchedUpdates } from "react-dom";
 import { fileOpen as _fileOpen } from "browser-fs-access";
-import { MIME_TYPES } from "@excalidraw/excalidraw";
+import type { MIME_TYPES } from "@excalidraw/excalidraw";
 import { AbortError } from "../../packages/excalidraw/errors";

 type FILE_EXTENSION = Exclude<keyof typeof MIME_TYPES, "binary">;
--- a/examples/excalidraw/with-nextjs/.gitignore
+++ b/examples/excalidraw/with-nextjs/.gitignore
@ -34,6 +34,3 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
-
-# copied assets
-public/**/*.woff2
--- a/examples/excalidraw/with-nextjs/package.json
+++ b/examples/excalidraw/with-nextjs/package.json
@ -3,8 +3,7 @@
  "version": "0.1.0",
  "private": true,
  "scripts": {
-    "build:workspace": "yarn workspace @excalidraw/excalidraw run build:esm && yarn copy:assets",
-    "copy:assets": "cp -r ../../../packages/excalidraw/dist/prod/fonts ./public",
+    "build:workspace": "yarn workspace @excalidraw/excalidraw run build:esm",
    "dev": "yarn build:workspace && next dev -p 3005",
    "build": "yarn build:workspace && next build",
    "start": "next start -p 3006",
@ -13,13 +12,13 @@
  "dependencies": {
    "@excalidraw/excalidraw": "*",
    "next": "14.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react": "^18",
+    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
-    "@types/react": "18.2.0",
-    "@types/react-dom": "18.2.0",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
    "path2d-polyfill": "2.0.1",
    "typescript": "^5"
  }
--- a/examples/excalidraw/with-nextjs/src/app/page.tsx
+++ b/examples/excalidraw/with-nextjs/src/app/page.tsx
@ -1,5 +1,4 @@
 import dynamic from "next/dynamic";
-import Script from "next/script";
 import "../common.scss";

 // Since client components get prerenderd on server as well hence importing the excalidraw stuff dynamically
@ -16,9 +15,7 @@ export default function Page() {
    <>
      <a href="/excalidraw-in-pages">Switch to Pages router</a>
      <h1 className="page-title">App Router</h1>
-      <Script id="load-env-variables" strategy="beforeInteractive">
-        {`window["EXCALIDRAW_ASSET_PATH"] = window.origin;`}
-      </Script>
+
      {/* @ts-expect-error - https://github.com/vercel/next.js/issues/42292 */}
      <ExcalidrawWithClientOnly />
    </>
--- a/examples/excalidraw/with-nextjs/src/common.scss
+++ b/examples/excalidraw/with-nextjs/src/common.scss
@ -7,7 +7,7 @@ a {
  color: #1c7ed6;
  font-size: 20px;
  text-decoration: none;
-  font-weight: 500;
+  font-weight: 550;
 }

 .page-title {
--- a/examples/excalidraw/with-nextjs/src/excalidrawWrapper.tsx
+++ b/examples/excalidraw/with-nextjs/src/excalidrawWrapper.tsx
@ -1,7 +1,7 @@
 "use client";
 import * as excalidrawLib from "@excalidraw/excalidraw";
 import { Excalidraw } from "@excalidraw/excalidraw";
-import App from "../../components/ExampleApp";
+import App from "../../components/App";

 import "@excalidraw/excalidraw/index.css";

--- a/examples/excalidraw/with-script-in-browser/.gitignore
+++ b/examples/excalidraw/with-script-in-browser/.gitignore
@ -1,2 +0,0 @@
-# copied assets
-public/**/*.woff2
--- a/examples/excalidraw/with-script-in-browser/index.html
+++ b/examples/excalidraw/with-script-in-browser/index.html
@ -11,7 +11,6 @@
    <title>React App</title>
    <script>
      window.name = "codesandbox";
-      window.EXCALIDRAW_ASSET_PATH = window.origin;
    </script>
    <link rel="stylesheet" href="/dist/browser/dev/index.css" />
  </head>
--- a/examples/excalidraw/with-script-in-browser/index.tsx
+++ b/examples/excalidraw/with-script-in-browser/index.tsx
@ -1,4 +1,4 @@
-import App from "../components/ExampleApp";
+import App from "../components/App";
 import React, { StrictMode } from "react";
 import { createRoot } from "react-dom/client";

--- a/examples/excalidraw/with-script-in-browser/package.json
+++ b/examples/excalidraw/with-script-in-browser/package.json
@ -12,10 +12,8 @@
    "typescript": "^5"
  },
  "scripts": {
-    "build:workspace": "yarn workspace @excalidraw/excalidraw run build:esm && yarn copy:assets",
-    "copy:assets": "cp -r ../../../packages/excalidraw/dist/prod/fonts ./public",
-    "start": "yarn build:workspace && vite",
-    "build": "yarn build:workspace && vite build",
+    "start": "yarn workspace @excalidraw/excalidraw run build:esm && vite",
+    "build": "yarn workspace @excalidraw/excalidraw run build:esm && vite build",
    "build:preview": "yarn build && vite preview --port 5002"
  }
 }
--- a/excalidraw-app/App.tsx
+++ b/excalidraw-app/App.tsx
@ -1,4 +1,5 @@
 import polyfill from "../packages/excalidraw/polyfill";
+import LanguageDetector from "i18next-browser-languagedetector";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { trackEvent } from "../packages/excalidraw/analytics";
 import { getDefaultAppState } from "../packages/excalidraw/appState";
@ -12,7 +13,7 @@ import {
  VERSION_TIMEOUT,
 } from "../packages/excalidraw/constants";
 import { loadFromBlob } from "../packages/excalidraw/data/blob";
-import type {
+import {
  FileId,
  NonDeletedExcalidrawElement,
  OrderedExcalidrawElement,
@ -21,25 +22,27 @@ import { useCallbackRefState } from "../packages/excalidraw/hooks/useCallbackRef
 import { t } from "../packages/excalidraw/i18n";
 import {
  Excalidraw,
+  defaultLang,
  LiveCollaborationTrigger,
+  TTDDialog,
  TTDDialogTrigger,
  StoreAction,
  reconcileElements,
 } from "../packages/excalidraw";
-import type {
+import {
  AppState,
  ExcalidrawImperativeAPI,
  BinaryFiles,
  ExcalidrawInitialDataState,
  UIAppState,
 } from "../packages/excalidraw/types";
-import type { ResolvablePromise } from "../packages/excalidraw/utils";
 import {
  debounce,
  getVersion,
  getFrame,
  isTestEnv,
  preventUnload,
+  ResolvablePromise,
  resolvablePromise,
  isRunningInIframe,
 } from "../packages/excalidraw/utils";
@ -49,8 +52,8 @@ import {
  STORAGE_KEYS,
  SYNC_BROWSER_TABS_TIMEOUT,
 } from "./app_constants";
-import type { CollabAPI } from "./collab/Collab";
 import Collab, {
+  CollabAPI,
  collabAPIAtom,
  isCollaboratingAtom,
  isOfflineAtom,
@ -66,8 +69,11 @@ import {
  importUsernameFromLocalStorage,
 } from "./data/localStorage";
 import CustomStats from "./CustomStats";
-import type { RestoredDataState } from "../packages/excalidraw/data/restore";
-import { restore, restoreAppState } from "../packages/excalidraw/data/restore";
+import {
+  restore,
+  restoreAppState,
+  RestoredDataState,
+} from "../packages/excalidraw/data/restore";
 import {
  ExportToExcalidrawPlus,
  exportToExcalidrawPlus,
@ -90,16 +96,12 @@ import {
 import { AppMainMenu } from "./components/AppMainMenu";
 import { AppWelcomeScreen } from "./components/AppWelcomeScreen";
 import { AppFooter } from "./components/AppFooter";
-import {
-  Provider,
-  useAtom,
-  useAtomValue,
-  useAtomWithInitialValue,
-  appJotaiStore,
-} from "./app-jotai";
+import { atom, Provider, useAtom, useAtomValue } from "jotai";
+import { useAtomWithInitialValue } from "../packages/excalidraw/jotai";
+import { appJotaiStore } from "./app-jotai";

 import "./index.scss";
-import type { ResolutionType } from "../packages/excalidraw/utility-types";
+import { ResolutionType } from "../packages/excalidraw/utility-types";
 import { ShareableLinkDialog } from "../packages/excalidraw/components/ShareableLinkDialog";
 import { openConfirmModal } from "../packages/excalidraw/components/OverwriteConfirm/OverwriteConfirmState";
 import { OverwriteConfirmDialog } from "../packages/excalidraw/components/OverwriteConfirm/OverwriteConfirm";
@ -121,54 +123,12 @@ import {
  share,
  youtubeIcon,
 } from "../packages/excalidraw/components/icons";
-import { useHandleAppTheme } from "./useHandleAppTheme";
-import { getPreferredLanguage } from "./app-language/language-detector";
-import { useAppLangCode } from "./app-language/language-state";
-import DebugCanvas, {
-  debugRenderer,
-  isVisualDebuggerEnabled,
-  loadSavedDebugState,
-} from "./components/DebugCanvas";
-import { AIComponents } from "./components/AI";
-import { ExcalidrawPlusIframeExport } from "./ExcalidrawPlusIframeExport";
-import { isElementLink } from "../packages/excalidraw/element/elementLink";
+import { appThemeAtom, useHandleAppTheme } from "./useHandleAppTheme";

 polyfill();

 window.EXCALIDRAW_THROTTLE_RENDER = true;

-declare global {
-  interface BeforeInstallPromptEventChoiceResult {
-    outcome: "accepted" | "dismissed";
-  }
-
-  interface BeforeInstallPromptEvent extends Event {
-    prompt(): Promise<void>;
-    userChoice: Promise<BeforeInstallPromptEventChoiceResult>;
-  }
-
-  interface WindowEventMap {
-    beforeinstallprompt: BeforeInstallPromptEvent;
-  }
-}
-
-let pwaEvent: BeforeInstallPromptEvent | null = null;
-
-// Adding a listener outside of the component as it may (?) need to be
-// subscribed early to catch the event.
-//
-// Also note that it will fire only if certain heuristics are met (user has
-// used the app for some time, etc.)
-window.addEventListener(
-  "beforeinstallprompt",
-  (event: BeforeInstallPromptEvent) => {
-    // prevent Chrome <= 67 from automatically showing the prompt
-    event.preventDefault();
-    // cache for later use
-    pwaEvent = event;
-  },
-);
-
 let isSelfEmbedding = false;

 if (window.self !== window.top) {
@ -183,6 +143,11 @@ if (window.self !== window.top) {
  }
 }

+const languageDetector = new LanguageDetector();
+languageDetector.init({
+  languageUtils: {},
+});
+
 const shareableLinkConfirmDialog = {
  title: t("overwriteConfirm.modal.shareableLink.title"),
  description: (
@ -328,13 +293,18 @@ const initializeScene = async (opts: {
  return { scene: null, isExternalScene: false };
 };

+const detectedLangCode = languageDetector.detect() || defaultLang.code;
+export const appLangCodeAtom = atom(
+  Array.isArray(detectedLangCode) ? detectedLangCode[0] : detectedLangCode,
+);
+
 const ExcalidrawWrapper = () => {
  const [errorMessage, setErrorMessage] = useState("");
+  const [langCode, setLangCode] = useAtom(appLangCodeAtom);
  const isCollabDisabled = isRunningInIframe();

-  const { editorTheme, appTheme, setAppTheme } = useHandleAppTheme();
-
-  const [langCode, setLangCode] = useAppLangCode();
+  const [appTheme, setAppTheme] = useAtom(appThemeAtom);
+  const { editorTheme } = useHandleAppTheme();

  // initial state
  // ---------------------------------------------------------------------------
@ -347,8 +317,6 @@ const ExcalidrawWrapper = () => {
      resolvablePromise<ExcalidrawInitialDataState | null>();
  }

-  const debugCanvasRef = useRef<HTMLCanvasElement>(null);
-
  useEffect(() => {
    trackEvent("load", "frame", getFrame());
    // Delayed so that the app has a time to load the latest SW
@ -374,23 +342,6 @@ const ExcalidrawWrapper = () => {
    migrationAdapter: LibraryLocalStorageMigrationAdapter,
  });

-  const [, forceRefresh] = useState(false);
-
-  useEffect(() => {
-    if (import.meta.env.DEV) {
-      const debugState = loadSavedDebugState();
-
-      if (debugState.enabled && !window.visualDebug) {
-        window.visualDebug = {
-          data: [],
-        };
-      } else {
-        delete window.visualDebug;
-      }
-      forceRefresh((prev) => !prev);
-    }
-  }, [excalidrawAPI]);
-
  useEffect(() => {
    if (!excalidrawAPI || (!isCollabDisabled && !collabAPI)) {
      return;
@ -510,7 +461,11 @@ const ExcalidrawWrapper = () => {
        if (isBrowserStorageStateNewer(STORAGE_KEYS.VERSION_DATA_STATE)) {
          const localDataState = importFromLocalStorage();
          const username = importUsernameFromLocalStorage();
-          setLangCode(getPreferredLanguage());
+          let langCode = languageDetector.detect() || defaultLang.code;
+          if (Array.isArray(langCode)) {
+            langCode = langCode[0];
+          }
+          setLangCode(langCode);
          excalidrawAPI.updateScene({
            ...localDataState,
            storeAction: StoreAction.UPDATE,
@ -611,6 +566,10 @@ const ExcalidrawWrapper = () => {
    };
  }, [excalidrawAPI]);

+  useEffect(() => {
+    languageDetector.cacheUserLanguage(langCode);
+  }, [langCode]);
+
  const onChange = (
    elements: readonly OrderedExcalidrawElement[],
    appState: AppState,
@ -651,16 +610,6 @@ const ExcalidrawWrapper = () => {
        }
      });
    }
-
-    // Render the debug scene if the debug canvas is available
-    if (debugCanvasRef.current && excalidrawAPI) {
-      debugRenderer(
-        debugCanvasRef.current,
-        appState,
-        window.devicePixelRatio,
-        () => forceRefresh((prev) => !prev),
-      );
-    }
  };

  const [latestShareableLink, setLatestShareableLink] = useState<string | null>(
@ -852,12 +801,6 @@ const ExcalidrawWrapper = () => {
            </div>
          );
        }}
-        onLinkOpen={(element, event) => {
-          if (element.link && isElementLink(element.link)) {
-            event.preventDefault();
-            excalidrawAPI?.scrollToContent(element.link, { animate: true });
-          }
-        }}
      >
        <AppMainMenu
          onCollabDialogOpen={onCollabDialogOpen}
@ -865,7 +808,6 @@ const ExcalidrawWrapper = () => {
          isCollabEnabled={!isCollabDisabled}
          theme={appTheme}
          setTheme={(theme) => setAppTheme(theme)}
-          refresh={() => forceRefresh((prev) => !prev)}
        />
        <AppWelcomeScreen
          onCollabDialogOpen={onCollabDialogOpen}
@ -891,9 +833,64 @@ const ExcalidrawWrapper = () => {
            </OverwriteConfirmDialog.Action>
          )}
        </OverwriteConfirmDialog>
-        <AppFooter onChange={() => excalidrawAPI?.refresh()} />
-        {excalidrawAPI && <AIComponents excalidrawAPI={excalidrawAPI} />}
+        <AppFooter />
+        <TTDDialog
+          onTextSubmit={async (input) => {
+            try {
+              const response = await fetch(
+                `${
+                  import.meta.env.VITE_APP_AI_BACKEND
+                }/v1/ai/text-to-diagram/generate`,
+                {
+                  method: "POST",
+                  headers: {
+                    Accept: "application/json",
+                    "Content-Type": "application/json",
+                  },
+                  body: JSON.stringify({ prompt: input }),
+                },
+              );

+              const rateLimit = response.headers.has("X-Ratelimit-Limit")
+                ? parseInt(response.headers.get("X-Ratelimit-Limit") || "0", 10)
+                : undefined;
+
+              const rateLimitRemaining = response.headers.has(
+                "X-Ratelimit-Remaining",
+              )
+                ? parseInt(
+                    response.headers.get("X-Ratelimit-Remaining") || "0",
+                    10,
+                  )
+                : undefined;
+
+              const json = await response.json();
+
+              if (!response.ok) {
+                if (response.status === 429) {
+                  return {
+                    rateLimit,
+                    rateLimitRemaining,
+                    error: new Error(
+                      "Too many requests today, please try again tomorrow!",
+                    ),
+                  };
+                }
+
+                throw new Error(json.message || "Generation failed...");
+              }
+
+              const generatedResponse = json.generatedResponse;
+              if (!generatedResponse) {
+                throw new Error("Generation failed...");
+              }
+
+              return { generatedResponse, rateLimit, rateLimitRemaining };
+            } catch (err: any) {
+              throw new Error("Request failed");
+            }
+          }}
+        />
        <TTDDialogTrigger />
        {isCollaborating && isOffline && (
          <div className="collab-offline-warning">
@ -1106,45 +1103,17 @@ const ExcalidrawWrapper = () => {
                );
              },
            },
-            {
-              label: t("labels.installPWA"),
-              category: DEFAULT_CATEGORIES.app,
-              predicate: () => !!pwaEvent,
-              perform: () => {
-                if (pwaEvent) {
-                  pwaEvent.prompt();
-                  pwaEvent.userChoice.then(() => {
-                    // event cannot be reused, but we'll hopefully
-                    // grab new one as the event should be fired again
-                    pwaEvent = null;
-                  });
-                }
-              },
-            },
          ]}
        />
-        {isVisualDebuggerEnabled() && excalidrawAPI && (
-          <DebugCanvas
-            appState={excalidrawAPI.getAppState()}
-            scale={window.devicePixelRatio}
-            ref={debugCanvasRef}
-          />
-        )}
      </Excalidraw>
    </div>
  );
 };

 const ExcalidrawApp = () => {
-  const isCloudExportWindow =
-    window.location.pathname === "/excalidraw-plus-export";
-  if (isCloudExportWindow) {
-    return <ExcalidrawPlusIframeExport />;
-  }
-
  return (
    <TopErrorBoundary>
-      <Provider store={appJotaiStore}>
+      <Provider unstable_createStore={() => appJotaiStore}>
        <ExcalidrawWrapper />
      </Provider>
    </TopErrorBoundary>
--- a/excalidraw-app/CustomStats.tsx
+++ b/excalidraw-app/CustomStats.tsx
@ -7,9 +7,8 @@ import {
 import { DEFAULT_VERSION } from "../packages/excalidraw/constants";
 import { t } from "../packages/excalidraw/i18n";
 import { copyTextToSystemClipboard } from "../packages/excalidraw/clipboard";
-import type { NonDeletedExcalidrawElement } from "../packages/excalidraw/element/types";
-import type { UIAppState } from "../packages/excalidraw/types";
-import { Stats } from "../packages/excalidraw";
+import { NonDeletedExcalidrawElement } from "../packages/excalidraw/element/types";
+import { UIAppState } from "../packages/excalidraw/types";

 type StorageSizes = { scene: number; total: number };

@ -52,33 +51,39 @@ const CustomStats = (props: Props) => {
  }

  return (
-    <Stats.StatsRows order={-1}>
-      <Stats.StatsRow heading>{t("stats.version")}</Stats.StatsRow>
-      <Stats.StatsRow
-        style={{ textAlign: "center", cursor: "pointer" }}
-        onClick={async () => {
-          try {
-            await copyTextToSystemClipboard(getVersion());
-            props.setToast(t("toast.copyToClipboard"));
-          } catch {}
-        }}
-        title={t("stats.versionCopy")}
-      >
-        {timestamp}
-        <br />
-        {hash}
-      </Stats.StatsRow>
-
-      <Stats.StatsRow heading>{t("stats.storage")}</Stats.StatsRow>
-      <Stats.StatsRow columns={2}>
-        <div>{t("stats.scene")}</div>
-        <div>{nFormatter(storageSizes.scene, 1)}</div>
-      </Stats.StatsRow>
-      <Stats.StatsRow columns={2}>
-        <div>{t("stats.total")}</div>
-        <div>{nFormatter(storageSizes.total, 1)}</div>
-      </Stats.StatsRow>
-    </Stats.StatsRows>
+    <>
+      <tr>
+        <th colSpan={2}>{t("stats.storage")}</th>
+      </tr>
+      <tr>
+        <td>{t("stats.scene")}</td>
+        <td>{nFormatter(storageSizes.scene, 1)}</td>
+      </tr>
+      <tr>
+        <td>{t("stats.total")}</td>
+        <td>{nFormatter(storageSizes.total, 1)}</td>
+      </tr>
+      <tr>
+        <th colSpan={2}>{t("stats.version")}</th>
+      </tr>
+      <tr>
+        <td
+          colSpan={2}
+          style={{ textAlign: "center", cursor: "pointer" }}
+          onClick={async () => {
+            try {
+              await copyTextToSystemClipboard(getVersion());
+              props.setToast(t("toast.copyToClipboard"));
+            } catch {}
+          }}
+          title={t("stats.versionCopy")}
+        >
+          {timestamp}
+          <br />
+          {hash}
+        </td>
+      </tr>
+    </>
  );
 };

--- a/excalidraw-app/ExcalidrawPlusIframeExport.tsx
+++ b/excalidraw-app/ExcalidrawPlusIframeExport.tsx
@ -1,222 +0,0 @@
-import { useLayoutEffect, useRef } from "react";
-import { STORAGE_KEYS } from "./app_constants";
-import { LocalData } from "./data/LocalData";
-import type {
-  FileId,
-  OrderedExcalidrawElement,
-} from "../packages/excalidraw/element/types";
-import type { AppState, BinaryFileData } from "../packages/excalidraw/types";
-import { ExcalidrawError } from "../packages/excalidraw/errors";
-import { base64urlToString } from "../packages/excalidraw/data/encode";
-
-const EVENT_REQUEST_SCENE = "REQUEST_SCENE";
-
-const EXCALIDRAW_PLUS_ORIGIN = import.meta.env.VITE_APP_PLUS_APP;
-
-// -----------------------------------------------------------------------------
-// outgoing message
-// -----------------------------------------------------------------------------
-type MESSAGE_REQUEST_SCENE = {
-  type: "REQUEST_SCENE";
-  jwt: string;
-};
-
-type MESSAGE_FROM_PLUS = MESSAGE_REQUEST_SCENE;
-
-// incoming messages
-// -----------------------------------------------------------------------------
-type MESSAGE_READY = { type: "READY" };
-type MESSAGE_ERROR = { type: "ERROR"; message: string };
-type MESSAGE_SCENE_DATA = {
-  type: "SCENE_DATA";
-  elements: OrderedExcalidrawElement[];
-  appState: Pick<AppState, "viewBackgroundColor">;
-  files: { loadedFiles: BinaryFileData[]; erroredFiles: Map<FileId, true> };
-};
-
-type MESSAGE_FROM_EDITOR = MESSAGE_ERROR | MESSAGE_SCENE_DATA | MESSAGE_READY;
-// -----------------------------------------------------------------------------
-
-const parseSceneData = async ({
-  rawElementsString,
-  rawAppStateString,
-}: {
-  rawElementsString: string | null;
-  rawAppStateString: string | null;
-}): Promise<MESSAGE_SCENE_DATA> => {
-  if (!rawElementsString || !rawAppStateString) {
-    throw new ExcalidrawError("Elements or appstate is missing.");
-  }
-
-  try {
-    const elements = JSON.parse(
-      rawElementsString,
-    ) as OrderedExcalidrawElement[];
-
-    if (!elements.length) {
-      throw new ExcalidrawError("Scene is empty, nothing to export.");
-    }
-
-    const appState = JSON.parse(rawAppStateString) as Pick<
-      AppState,
-      "viewBackgroundColor"
-    >;
-
-    const fileIds = elements.reduce((acc, el) => {
-      if ("fileId" in el && el.fileId) {
-        acc.push(el.fileId);
-      }
-      return acc;
-    }, [] as FileId[]);
-
-    const files = await LocalData.fileStorage.getFiles(fileIds);
-
-    return {
-      type: "SCENE_DATA",
-      elements,
-      appState,
-      files,
-    };
-  } catch (error: any) {
-    throw error instanceof ExcalidrawError
-      ? error
-      : new ExcalidrawError("Failed to parse scene data.");
-  }
-};
-
-const verifyJWT = async ({
-  token,
-  publicKey,
-}: {
-  token: string;
-  publicKey: string;
-}) => {
-  try {
-    if (!publicKey) {
-      throw new ExcalidrawError("Public key is undefined");
-    }
-
-    const [header, payload, signature] = token.split(".");
-
-    if (!header || !payload || !signature) {
-      throw new ExcalidrawError("Invalid JWT format");
-    }
-
-    // JWT is using Base64URL encoding
-    const decodedPayload = base64urlToString(payload);
-    const decodedSignature = base64urlToString(signature);
-
-    const data = `${header}.${payload}`;
-    const signatureArrayBuffer = Uint8Array.from(decodedSignature, (c) =>
-      c.charCodeAt(0),
-    );
-
-    const keyData = publicKey.replace(/-----\w+ PUBLIC KEY-----/g, "");
-    const keyArrayBuffer = Uint8Array.from(atob(keyData), (c) =>
-      c.charCodeAt(0),
-    );
-
-    const key = await crypto.subtle.importKey(
-      "spki",
-      keyArrayBuffer,
-      { name: "RSASSA-PKCS1-v1_5", hash: "SHA-256" },
-      true,
-      ["verify"],
-    );
-
-    const isValid = await crypto.subtle.verify(
-      "RSASSA-PKCS1-v1_5",
-      key,
-      signatureArrayBuffer,
-      new TextEncoder().encode(data),
-    );
-
-    if (!isValid) {
-      throw new Error("Invalid JWT");
-    }
-
-    const parsedPayload = JSON.parse(decodedPayload);
-
-    // Check for expiration
-    const currentTime = Math.floor(Date.now() / 1000);
-    if (parsedPayload.exp && parsedPayload.exp < currentTime) {
-      throw new Error("JWT has expired");
-    }
-  } catch (error) {
-    console.error("Failed to verify JWT:", error);
-    throw new Error(error instanceof Error ? error.message : "Invalid JWT");
-  }
-};
-
-export const ExcalidrawPlusIframeExport = () => {
-  const readyRef = useRef(false);
-
-  useLayoutEffect(() => {
-    const handleMessage = async (event: MessageEvent<MESSAGE_FROM_PLUS>) => {
-      if (event.origin !== EXCALIDRAW_PLUS_ORIGIN) {
-        throw new ExcalidrawError("Invalid origin");
-      }
-
-      if (event.data.type === EVENT_REQUEST_SCENE) {
-        if (!event.data.jwt) {
-          throw new ExcalidrawError("JWT is missing");
-        }
-
-        try {
-          try {
-            await verifyJWT({
-              token: event.data.jwt,
-              publicKey: import.meta.env.VITE_APP_PLUS_EXPORT_PUBLIC_KEY,
-            });
-          } catch (error: any) {
-            console.error(`Failed to verify JWT: ${error.message}`);
-            throw new ExcalidrawError("Failed to verify JWT");
-          }
-
-          const parsedSceneData: MESSAGE_SCENE_DATA = await parseSceneData({
-            rawAppStateString: localStorage.getItem(
-              STORAGE_KEYS.LOCAL_STORAGE_APP_STATE,
-            ),
-            rawElementsString: localStorage.getItem(
-              STORAGE_KEYS.LOCAL_STORAGE_ELEMENTS,
-            ),
-          });
-
-          event.source!.postMessage(parsedSceneData, {
-            targetOrigin: EXCALIDRAW_PLUS_ORIGIN,
-          });
-        } catch (error) {
-          const responseData: MESSAGE_ERROR = {
-            type: "ERROR",
-            message:
-              error instanceof ExcalidrawError
-                ? error.message
-                : "Failed to export scene data",
-          };
-          event.source!.postMessage(responseData, {
-            targetOrigin: EXCALIDRAW_PLUS_ORIGIN,
-          });
-        }
-      }
-    };
-
-    window.addEventListener("message", handleMessage);
-
-    // so we don't send twice in StrictMode
-    if (!readyRef.current) {
-      readyRef.current = true;
-      const message: MESSAGE_FROM_EDITOR = { type: "READY" };
-      window.parent.postMessage(message, EXCALIDRAW_PLUS_ORIGIN);
-    }
-
-    return () => {
-      window.removeEventListener("message", handleMessage);
-    };
-  }, []);
-
-  // Since this component is expected to run in a hidden iframe on Excaildraw+,
-  // it doesn't need to render anything. All the data we need is available in
-  // LocalStorage and IndexedDB. It only needs to handle the messaging between
-  // the parent window and the iframe with the relevant data.
-  return null;
-};
--- a/excalidraw-app/app-jotai.ts
+++ b/excalidraw-app/app-jotai.ts
@ -1,37 +1,3 @@
-// eslint-disable-next-line no-restricted-imports
-import {
-  atom,
-  Provider,
-  useAtom,
-  useAtomValue,
-  useSetAtom,
-  createStore,
-  type PrimitiveAtom,
-} from "jotai";
-import { useLayoutEffect } from "react";
+import { unstable_createStore } from "jotai";

-export const appJotaiStore = createStore();
-
-export { atom, Provider, useAtom, useAtomValue, useSetAtom };
-
-export const useAtomWithInitialValue = <
-  T extends unknown,
-  A extends PrimitiveAtom<T>,
->(
-  atom: A,
-  initialValue: T | (() => T),
-) => {
-  const [value, setValue] = useAtom(atom);
-
-  useLayoutEffect(() => {
-    if (typeof initialValue === "function") {
-      // @ts-ignore
-      setValue(initialValue());
-    } else {
-      setValue(initialValue);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return [value, setValue] as const;
-};
+export const appJotaiStore = unstable_createStore();
--- a/excalidraw-app/app-language/language-detector.ts
+++ b/excalidraw-app/app-language/language-detector.ts
@ -1,25 +0,0 @@
-import LanguageDetector from "i18next-browser-languagedetector";
-import { defaultLang, languages } from "../../packages/excalidraw";
-
-export const languageDetector = new LanguageDetector();
-
-languageDetector.init({
-  languageUtils: {},
-});
-
-export const getPreferredLanguage = () => {
-  const detectedLanguages = languageDetector.detect();
-
-  const detectedLanguage = Array.isArray(detectedLanguages)
-    ? detectedLanguages[0]
-    : detectedLanguages;
-
-  const initialLanguage =
-    (detectedLanguage
-      ? // region code may not be defined if user uses generic preferred language
-        // (e.g. chinese vs instead of chinese-simplified)
-        languages.find((lang) => lang.code.startsWith(detectedLanguage))?.code
-      : null) || defaultLang.code;
-
-  return initialLanguage;
-};
--- a/excalidraw-app/app-language/language-state.ts
+++ b/excalidraw-app/app-language/language-state.ts
@ -1,15 +0,0 @@
-import { useEffect } from "react";
-import { atom, useAtom } from "../app-jotai";
-import { getPreferredLanguage, languageDetector } from "./language-detector";
-
-export const appLangCodeAtom = atom(getPreferredLanguage());
-
-export const useAppLangCode = () => {
-  const [langCode, setLangCode] = useAtom(appLangCodeAtom);
-
-  useEffect(() => {
-    languageDetector.cacheUserLanguage(langCode);
-  }, [langCode]);
-
-  return [langCode, setLangCode] as const;
-};
--- a/excalidraw-app/app_constants.ts
+++ b/excalidraw-app/app_constants.ts
@ -40,7 +40,6 @@ export const STORAGE_KEYS = {
  LOCAL_STORAGE_APP_STATE: "excalidraw-state",
  LOCAL_STORAGE_COLLAB: "excalidraw-collab",
  LOCAL_STORAGE_THEME: "excalidraw-theme",
-  LOCAL_STORAGE_DEBUG: "excalidraw-debug",
  VERSION_DATA_STATE: "version-dataState",
  VERSION_FILES: "version-files",

--- a/excalidraw-app/collab/Collab.tsx
+++ b/excalidraw-app/collab/Collab.tsx
@ -1,16 +1,14 @@
 import throttle from "lodash.throttle";
 import { PureComponent } from "react";
-import type {
-  BinaryFileData,
+import {
  ExcalidrawImperativeAPI,
  SocketId,
 } from "../../packages/excalidraw/types";
 import { ErrorDialog } from "../../packages/excalidraw/components/ErrorDialog";
 import { APP_NAME, ENV, EVENT } from "../../packages/excalidraw/constants";
-import type { ImportedDataState } from "../../packages/excalidraw/data/types";
-import type {
+import { ImportedDataState } from "../../packages/excalidraw/data/types";
+import {
  ExcalidrawElement,
-  FileId,
  InitializedExcalidrawImageElement,
  OrderedExcalidrawElement,
 } from "../../packages/excalidraw/element/types";
@ -21,7 +19,7 @@ import {
  zoomToFitBounds,
  reconcileElements,
 } from "../../packages/excalidraw";
-import type { Collaborator, Gesture } from "../../packages/excalidraw/types";
+import { Collaborator, Gesture } from "../../packages/excalidraw/types";
 import {
  assertNever,
  preventUnload,
@ -38,14 +36,12 @@ import {
  SYNC_FULL_SCENE_INTERVAL_MS,
  WS_EVENTS,
 } from "../app_constants";
-import type {
-  SocketUpdateDataSource,
-  SyncableExcalidrawElement,
-} from "../data";
 import {
  generateCollaborationLinkData,
  getCollaborationLink,
  getSyncableElements,
+  SocketUpdateDataSource,
+  SyncableExcalidrawElement,
 } from "../data";
 import {
  isSavedToFirebase,
@ -79,8 +75,9 @@ import { newElementWith } from "../../packages/excalidraw/element/mutateElement"
 import { decryptData } from "../../packages/excalidraw/data/encryption";
 import { resetBrowserStateVersions } from "../data/tabSync";
 import { LocalData } from "../data/LocalData";
-import { appJotaiStore, atom } from "../app-jotai";
-import type { Mutable, ValueOf } from "../../packages/excalidraw/utility-types";
+import { atom } from "jotai";
+import { appJotaiStore } from "../app-jotai";
+import { Mutable, ValueOf } from "../../packages/excalidraw/utility-types";
 import { getVisibleSceneBounds } from "../../packages/excalidraw/element/bounds";
 import { withBatchedUpdates } from "../../packages/excalidraw/reactUtils";
 import { collabErrorIndicatorAtom } from "./CollabError";
@ -158,7 +155,7 @@ class Collab extends PureComponent<CollabProps, CollabState> {
          throw new AbortError();
        }

-        const { savedFiles, erroredFiles } = await saveFilesToFirebase({
+        return saveFilesToFirebase({
          prefix: `${FIREBASE_STORAGE_PREFIXES.collabFiles}/${roomId}`,
          files: await encodeFilesForUpload({
            files: addedFiles,
@ -166,29 +163,6 @@ class Collab extends PureComponent<CollabProps, CollabState> {
            maxBytes: FILE_UPLOAD_MAX_BYTES,
          }),
        });
-
-        return {
-          savedFiles: savedFiles.reduce(
-            (acc: Map<FileId, BinaryFileData>, id) => {
-              const fileData = addedFiles.get(id);
-              if (fileData) {
-                acc.set(id, fileData);
-              }
-              return acc;
-            },
-            new Map(),
-          ),
-          erroredFiles: erroredFiles.reduce(
-            (acc: Map<FileId, BinaryFileData>, id) => {
-              const fileData = addedFiles.get(id);
-              if (fileData) {
-                acc.set(id, fileData);
-              }
-              return acc;
-            },
-            new Map(),
-          ),
-        };
      },
    });
    this.excalidrawAPI = props.excalidrawAPI;
@ -418,7 +392,7 @@ class Collab extends PureComponent<CollabProps, CollabState> {
      .filter((element) => {
        return (
          isInitializedImageElement(element) &&
-          !this.fileManager.isFileTracked(element.fileId) &&
+          !this.fileManager.isFileHandled(element.fileId) &&
          !element.isDeleted &&
          (opts.forceFetchFiles
            ? element.status !== "pending" ||
--- a/excalidraw-app/collab/CollabError.tsx
+++ b/excalidraw-app/collab/CollabError.tsx
@ -2,9 +2,9 @@ import { Tooltip } from "../../packages/excalidraw/components/Tooltip";
 import { warning } from "../../packages/excalidraw/components/icons";
 import clsx from "clsx";
 import { useEffect, useRef, useState } from "react";
-import { atom } from "../app-jotai";

 import "./CollabError.scss";
+import { atom } from "jotai";

 type ErrorIndicator = {
  message: string | null;
--- a/excalidraw-app/collab/Portal.tsx
+++ b/excalidraw-app/collab/Portal.tsx
@ -1,15 +1,15 @@
-import type {
+import {
+  isSyncableElement,
  SocketUpdateData,
  SocketUpdateDataSource,
  SyncableExcalidrawElement,
 } from "../data";
-import { isSyncableElement } from "../data";

-import type { TCollabClass } from "./Collab";
+import { TCollabClass } from "./Collab";

-import type { OrderedExcalidrawElement } from "../../packages/excalidraw/element/types";
+import { OrderedExcalidrawElement } from "../../packages/excalidraw/element/types";
 import { WS_EVENTS, FILE_UPLOAD_TIMEOUT, WS_SUBTYPES } from "../app_constants";
-import type {
+import {
  OnUserFollowedPayload,
  SocketId,
  UserIdleState,
@ -116,26 +116,20 @@ class Portal {
      }
    }

-    let isChanged = false;
-    const newElements = this.collab.excalidrawAPI
-      .getSceneElementsIncludingDeleted()
-      .map((element) => {
-        if (this.collab.fileManager.shouldUpdateImageElementStatus(element)) {
-          isChanged = true;
-          // this will signal collaborators to pull image data from server
-          // (using mutation instead of newElementWith otherwise it'd break
-          // in-progress dragging)
-          return newElementWith(element, { status: "saved" });
-        }
-        return element;
-      });
-
-    if (isChanged) {
-      this.collab.excalidrawAPI.updateScene({
-        elements: newElements,
-        storeAction: StoreAction.UPDATE,
-      });
-    }
+    this.collab.excalidrawAPI.updateScene({
+      elements: this.collab.excalidrawAPI
+        .getSceneElementsIncludingDeleted()
+        .map((element) => {
+          if (this.collab.fileManager.shouldUpdateImageElementStatus(element)) {
+            // this will signal collaborators to pull image data from server
+            // (using mutation instead of newElementWith otherwise it'd break
+            // in-progress dragging)
+            return newElementWith(element, { status: "saved" });
+          }
+          return element;
+        }),
+      storeAction: StoreAction.UPDATE,
+    });
  }, FILE_UPLOAD_TIMEOUT);

  broadcastScene = async (
--- a/excalidraw-app/collab/RoomDialog.tsx
+++ b/excalidraw-app/collab/RoomDialog.tsx
@ -0,0 +1,218 @@
+import { useRef, useState } from "react";
+import * as Popover from "@radix-ui/react-popover";
+
+import { copyTextToSystemClipboard } from "../../packages/excalidraw/clipboard";
+import { trackEvent } from "../../packages/excalidraw/analytics";
+import { getFrame } from "../../packages/excalidraw/utils";
+import { useI18n } from "../../packages/excalidraw/i18n";
+import { KEYS } from "../../packages/excalidraw/keys";
+
+import { Dialog } from "../../packages/excalidraw/components/Dialog";
+import {
+  copyIcon,
+  playerPlayIcon,
+  playerStopFilledIcon,
+  share,
+  shareIOS,
+  shareWindows,
+  tablerCheckIcon,
+} from "../../packages/excalidraw/components/icons";
+import { TextField } from "../../packages/excalidraw/components/TextField";
+import { FilledButton } from "../../packages/excalidraw/components/FilledButton";
+
+import { ReactComponent as CollabImage } from "../../packages/excalidraw/assets/lock.svg";
+import "./RoomDialog.scss";
+
+const getShareIcon = () => {
+  const navigator = window.navigator as any;
+  const isAppleBrowser = /Apple/.test(navigator.vendor);
+  const isWindowsBrowser = navigator.appVersion.indexOf("Win") !== -1;
+
+  if (isAppleBrowser) {
+    return shareIOS;
+  } else if (isWindowsBrowser) {
+    return shareWindows;
+  }
+
+  return share;
+};
+
+export type RoomModalProps = {
+  handleClose: () => void;
+  activeRoomLink: string;
+  username: string;
+  onUsernameChange: (username: string) => void;
+  onRoomCreate: () => void;
+  onRoomDestroy: () => void;
+  setErrorMessage: (message: string) => void;
+};
+
+export const RoomModal = ({
+  activeRoomLink,
+  onRoomCreate,
+  onRoomDestroy,
+  setErrorMessage,
+  username,
+  onUsernameChange,
+  handleClose,
+}: RoomModalProps) => {
+  const { t } = useI18n();
+  const [justCopied, setJustCopied] = useState(false);
+  const timerRef = useRef<number>(0);
+  const ref = useRef<HTMLInputElement>(null);
+  const isShareSupported = "share" in navigator;
+
+  const copyRoomLink = async () => {
+    try {
+      await copyTextToSystemClipboard(activeRoomLink);
+    } catch (e) {
+      setErrorMessage(t("errors.copyToSystemClipboardFailed"));
+    }
+    setJustCopied(true);
+
+    if (timerRef.current) {
+      window.clearTimeout(timerRef.current);
+    }
+
+    timerRef.current = window.setTimeout(() => {
+      setJustCopied(false);
+    }, 3000);
+
+    ref.current?.select();
+  };
+
+  const shareRoomLink = async () => {
+    try {
+      await navigator.share({
+        title: t("roomDialog.shareTitle"),
+        text: t("roomDialog.shareTitle"),
+        url: activeRoomLink,
+      });
+    } catch (error: any) {
+      // Just ignore.
+    }
+  };
+
+  if (activeRoomLink) {
+    return (
+      <>
+        <h3 className="RoomDialog__active__header">
+          {t("labels.liveCollaboration")}
+        </h3>
+        <TextField
+          value={username}
+          placeholder="Your name"
+          label="Your name"
+          onChange={onUsernameChange}
+          onKeyDown={(event) => event.key === KEYS.ENTER && handleClose()}
+        />
+        <div className="RoomDialog__active__linkRow">
+          <TextField
+            ref={ref}
+            label="Link"
+            readonly
+            fullWidth
+            value={activeRoomLink}
+          />
+          {isShareSupported && (
+            <FilledButton
+              size="large"
+              variant="icon"
+              label="Share"
+              icon={getShareIcon()}
+              className="RoomDialog__active__share"
+              onClick={shareRoomLink}
+            />
+          )}
+          <Popover.Root open={justCopied}>
+            <Popover.Trigger asChild>
+              <FilledButton
+                size="large"
+                label="Copy link"
+                icon={copyIcon}
+                onClick={copyRoomLink}
+              />
+            </Popover.Trigger>
+            <Popover.Content
+              onOpenAutoFocus={(event) => event.preventDefault()}
+              onCloseAutoFocus={(event) => event.preventDefault()}
+              className="RoomDialog__popover"
+              side="top"
+              align="end"
+              sideOffset={5.5}
+            >
+              {tablerCheckIcon} copied
+            </Popover.Content>
+          </Popover.Root>
+        </div>
+        <div className="RoomDialog__active__description">
+          <p>
+            <span
+              role="img"
+              aria-hidden="true"
+              className="RoomDialog__active__description__emoji"
+            >
+              🔒{" "}
+            </span>
+            {t("roomDialog.desc_privacy")}
+          </p>
+          <p>{t("roomDialog.desc_exitSession")}</p>
+        </div>
+
+        <div className="RoomDialog__active__actions">
+          <FilledButton
+            size="large"
+            variant="outlined"
+            color="danger"
+            label={t("roomDialog.button_stopSession")}
+            icon={playerStopFilledIcon}
+            onClick={() => {
+              trackEvent("share", "room closed");
+              onRoomDestroy();
+            }}
+          />
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <div className="RoomDialog__inactive__illustration">
+        <CollabImage />
+      </div>
+      <div className="RoomDialog__inactive__header">
+        {t("labels.liveCollaboration")}
+      </div>
+
+      <div className="RoomDialog__inactive__description">
+        <strong>{t("roomDialog.desc_intro")}</strong>
+        {t("roomDialog.desc_privacy")}
+      </div>
+
+      <div className="RoomDialog__inactive__start_session">
+        <FilledButton
+          size="large"
+          label={t("roomDialog.button_startSession")}
+          icon={playerPlayIcon}
+          onClick={() => {
+            trackEvent("share", "room creation", `ui (${getFrame()})`);
+            onRoomCreate();
+          }}
+        />
+      </div>
+    </>
+  );
+};
+
+const RoomDialog = (props: RoomModalProps) => {
+  return (
+    <Dialog size="small" onCloseRequest={props.handleClose} title={false}>
+      <div className="RoomDialog">
+        <RoomModal {...props} />
+      </div>
+    </Dialog>
+  );
+};
+
+export default RoomDialog;
--- a/excalidraw-app/components/AI.tsx
+++ b/excalidraw-app/components/AI.tsx
@ -1,159 +0,0 @@
-import type { ExcalidrawImperativeAPI } from "../../packages/excalidraw/types";
-import {
-  DiagramToCodePlugin,
-  exportToBlob,
-  getTextFromElements,
-  MIME_TYPES,
-  TTDDialog,
-} from "../../packages/excalidraw";
-import { getDataURL } from "../../packages/excalidraw/data/blob";
-import { safelyParseJSON } from "../../packages/excalidraw/utils";
-
-export const AIComponents = ({
-  excalidrawAPI,
-}: {
-  excalidrawAPI: ExcalidrawImperativeAPI;
-}) => {
-  return (
-    <>
-      <DiagramToCodePlugin
-        generate={async ({ frame, children }) => {
-          const appState = excalidrawAPI.getAppState();
-
-          const blob = await exportToBlob({
-            elements: children,
-            appState: {
-              ...appState,
-              exportBackground: true,
-              viewBackgroundColor: appState.viewBackgroundColor,
-            },
-            exportingFrame: frame,
-            files: excalidrawAPI.getFiles(),
-            mimeType: MIME_TYPES.jpg,
-          });
-
-          const dataURL = await getDataURL(blob);
-
-          const textFromFrameChildren = getTextFromElements(children);
-
-          const response = await fetch(
-            `${
-              import.meta.env.VITE_APP_AI_BACKEND
-            }/v1/ai/diagram-to-code/generate`,
-            {
-              method: "POST",
-              headers: {
-                Accept: "application/json",
-                "Content-Type": "application/json",
-              },
-              body: JSON.stringify({
-                texts: textFromFrameChildren,
-                image: dataURL,
-                theme: appState.theme,
-              }),
-            },
-          );
-
-          if (!response.ok) {
-            const text = await response.text();
-            const errorJSON = safelyParseJSON(text);
-
-            if (!errorJSON) {
-              throw new Error(text);
-            }
-
-            if (errorJSON.statusCode === 429) {
-              return {
-                html: `<html>
-                <body style="margin: 0; text-align: center">
-                <div style="display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100vh; padding: 0 60px">
-                  <div style="color:red">Too many requests today,</br>please try again tomorrow!</div>
-                  </br>
-                  </br>
-                  <div>You can also try <a href="${
-                    import.meta.env.VITE_APP_PLUS_LP
-                  }/plus?utm_source=excalidraw&utm_medium=app&utm_content=d2c" target="_blank" rel="noreferrer noopener">Excalidraw+</a> to get more requests.</div>
-                </div>
-                </body>
-                </html>`,
-              };
-            }
-
-            throw new Error(errorJSON.message || text);
-          }
-
-          try {
-            const { html } = await response.json();
-
-            if (!html) {
-              throw new Error("Generation failed (invalid response)");
-            }
-            return {
-              html,
-            };
-          } catch (error: any) {
-            throw new Error("Generation failed (invalid response)");
-          }
-        }}
-      />
-
-      <TTDDialog
-        onTextSubmit={async (input) => {
-          try {
-            const response = await fetch(
-              `${
-                import.meta.env.VITE_APP_AI_BACKEND
-              }/v1/ai/text-to-diagram/generate`,
-              {
-                method: "POST",
-                headers: {
-                  Accept: "application/json",
-                  "Content-Type": "application/json",
-                },
-                body: JSON.stringify({ prompt: input }),
-              },
-            );
-
-            const rateLimit = response.headers.has("X-Ratelimit-Limit")
-              ? parseInt(response.headers.get("X-Ratelimit-Limit") || "0", 10)
-              : undefined;
-
-            const rateLimitRemaining = response.headers.has(
-              "X-Ratelimit-Remaining",
-            )
-              ? parseInt(
-                  response.headers.get("X-Ratelimit-Remaining") || "0",
-                  10,
-                )
-              : undefined;
-
-            const json = await response.json();
-
-            if (!response.ok) {
-              if (response.status === 429) {
-                return {
-                  rateLimit,
-                  rateLimitRemaining,
-                  error: new Error(
-                    "Too many requests today, please try again tomorrow!",
-                  ),
-                };
-              }
-
-              throw new Error(json.message || "Generation failed...");
-            }
-
-            const generatedResponse = json.generatedResponse;
-            if (!generatedResponse) {
-              throw new Error("Generation failed...");
-            }
-
-            return { generatedResponse, rateLimit, rateLimitRemaining };
-          } catch (err: any) {
-            throw new Error("Request failed");
-          }
-        }}
-      />
-    </>
-  );
-};
--- a/excalidraw-app/components/AppFooter.tsx
+++ b/excalidraw-app/components/AppFooter.tsx
@ -3,27 +3,23 @@ import { Footer } from "../../packages/excalidraw/index";
 import { EncryptedIcon } from "./EncryptedIcon";
 import { ExcalidrawPlusAppLink } from "./ExcalidrawPlusAppLink";
 import { isExcalidrawPlusSignedUser } from "../app_constants";
-import { DebugFooter, isVisualDebuggerEnabled } from "./DebugCanvas";

-export const AppFooter = React.memo(
-  ({ onChange }: { onChange: () => void }) => {
-    return (
-      <Footer>
-        <div
-          style={{
-            display: "flex",
-            gap: ".5rem",
-            alignItems: "center",
-          }}
-        >
-          {isVisualDebuggerEnabled() && <DebugFooter onChange={onChange} />}
-          {isExcalidrawPlusSignedUser ? (
-            <ExcalidrawPlusAppLink />
-          ) : (
-            <EncryptedIcon />
-          )}
-        </div>
-      </Footer>
-    );
-  },
-);
+export const AppFooter = React.memo(() => {
+  return (
+    <Footer>
+      <div
+        style={{
+          display: "flex",
+          gap: ".5rem",
+          alignItems: "center",
+        }}
+      >
+        {isExcalidrawPlusSignedUser ? (
+          <ExcalidrawPlusAppLink />
+        ) : (
+          <EncryptedIcon />
+        )}
+      </div>
+    </Footer>
+  );
+});
--- a/excalidraw-app/components/AppMainMenu.tsx
+++ b/excalidraw-app/components/AppMainMenu.tsx
@ -1,14 +1,12 @@
 import React from "react";
 import {
-  loginIcon,
+  arrowBarToLeftIcon,
  ExcalLogo,
-  eyeIcon,
 } from "../../packages/excalidraw/components/icons";
-import type { Theme } from "../../packages/excalidraw/element/types";
+import { Theme } from "../../packages/excalidraw/element/types";
 import { MainMenu } from "../../packages/excalidraw/index";
 import { isExcalidrawPlusSignedUser } from "../app_constants";
-import { LanguageList } from "../app-language/LanguageList";
-import { saveDebugState } from "./DebugCanvas";
+import { LanguageList } from "./LanguageList";

 export const AppMainMenu: React.FC<{
  onCollabDialogOpen: () => any;
@ -16,7 +14,6 @@ export const AppMainMenu: React.FC<{
  isCollabEnabled: boolean;
  theme: Theme | "system";
  setTheme: (theme: Theme | "system") => void;
-  refresh: () => void;
 }> = React.memo((props) => {
  return (
    <MainMenu>
@ -31,14 +28,13 @@ export const AppMainMenu: React.FC<{
        />
      )}
      <MainMenu.DefaultItems.CommandPalette className="highlighted" />
-      <MainMenu.DefaultItems.SearchMenu />
      <MainMenu.DefaultItems.Help />
      <MainMenu.DefaultItems.ClearCanvas />
      <MainMenu.Separator />
      <MainMenu.ItemLink
        icon={ExcalLogo}
        href={`${
-          import.meta.env.VITE_APP_PLUS_LP
+          import.meta.env.VITE_APP_PLUS_APP
        }/plus?utm_source=excalidraw&utm_medium=app&utm_content=hamburger`}
        className=""
      >
@ -46,7 +42,7 @@ export const AppMainMenu: React.FC<{
      </MainMenu.ItemLink>
      <MainMenu.DefaultItems.Socials />
      <MainMenu.ItemLink
-        icon={loginIcon}
+        icon={arrowBarToLeftIcon}
        href={`${import.meta.env.VITE_APP_PLUS_APP}${
          isExcalidrawPlusSignedUser ? "" : "/sign-up"
        }?utm_source=signin&utm_medium=app&utm_content=hamburger`}
@ -54,23 +50,6 @@ export const AppMainMenu: React.FC<{
      >
        {isExcalidrawPlusSignedUser ? "Sign in" : "Sign up"}
      </MainMenu.ItemLink>
-      {import.meta.env.DEV && (
-        <MainMenu.Item
-          icon={eyeIcon}
-          onClick={() => {
-            if (window.visualDebug) {
-              delete window.visualDebug;
-              saveDebugState({ enabled: false });
-            } else {
-              window.visualDebug = { data: [] };
-              saveDebugState({ enabled: true });
-            }
-            props?.refresh();
-          }}
-        >
-          Visual Debug
-        </MainMenu.Item>
-      )}
      <MainMenu.Separator />
      <MainMenu.DefaultItems.ToggleTheme
        allowSystemTheme
--- a/excalidraw-app/components/AppWelcomeScreen.tsx
+++ b/excalidraw-app/components/AppWelcomeScreen.tsx
@ -1,5 +1,5 @@
 import React from "react";
-import { loginIcon } from "../../packages/excalidraw/components/icons";
+import { arrowBarToLeftIcon } from "../../packages/excalidraw/components/icons";
 import { useI18n } from "../../packages/excalidraw/i18n";
 import { WelcomeScreen } from "../../packages/excalidraw/index";
 import { isExcalidrawPlusSignedUser } from "../app_constants";
@ -61,7 +61,7 @@ export const AppWelcomeScreen: React.FC<{
                import.meta.env.VITE_APP_PLUS_LP
              }/plus?utm_source=excalidraw&utm_medium=app&utm_content=welcomeScreenGuest`}
              shortcut={null}
-              icon={loginIcon}
+              icon={arrowBarToLeftIcon}
            >
              Sign up
            </WelcomeScreen.Center.MenuItemLink>
--- a/excalidraw-app/components/DebugCanvas.tsx
+++ b/excalidraw-app/components/DebugCanvas.tsx
@ -1,311 +0,0 @@
-import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
-import { type AppState } from "../../packages/excalidraw/types";
-import { throttleRAF } from "../../packages/excalidraw/utils";
-import {
-  bootstrapCanvas,
-  getNormalizedCanvasDimensions,
-} from "../../packages/excalidraw/renderer/helpers";
-import type { DebugElement } from "../../packages/excalidraw/visualdebug";
-import {
-  ArrowheadArrowIcon,
-  CloseIcon,
-  TrashIcon,
-} from "../../packages/excalidraw/components/icons";
-import { STORAGE_KEYS } from "../app_constants";
-import {
-  isLineSegment,
-  type GlobalPoint,
-  type LineSegment,
-} from "../../packages/math";
-
-const renderLine = (
-  context: CanvasRenderingContext2D,
-  zoom: number,
-  segment: LineSegment<GlobalPoint>,
-  color: string,
-) => {
-  context.save();
-  context.strokeStyle = color;
-  context.beginPath();
-  context.moveTo(segment[0][0] * zoom, segment[0][1] * zoom);
-  context.lineTo(segment[1][0] * zoom, segment[1][1] * zoom);
-  context.stroke();
-  context.restore();
-};
-
-const renderOrigin = (context: CanvasRenderingContext2D, zoom: number) => {
-  context.strokeStyle = "#888";
-  context.save();
-  context.beginPath();
-  context.moveTo(-10 * zoom, -10 * zoom);
-  context.lineTo(10 * zoom, 10 * zoom);
-  context.moveTo(10 * zoom, -10 * zoom);
-  context.lineTo(-10 * zoom, 10 * zoom);
-  context.stroke();
-  context.save();
-};
-
-const render = (
-  frame: DebugElement[],
-  context: CanvasRenderingContext2D,
-  appState: AppState,
-) => {
-  frame.forEach((el: DebugElement) => {
-    switch (true) {
-      case isLineSegment(el.data):
-        renderLine(
-          context,
-          appState.zoom.value,
-          el.data as LineSegment<GlobalPoint>,
-          el.color,
-        );
-        break;
-    }
-  });
-};
-
-const _debugRenderer = (
-  canvas: HTMLCanvasElement,
-  appState: AppState,
-  scale: number,
-  refresh: () => void,
-) => {
-  const [normalizedWidth, normalizedHeight] = getNormalizedCanvasDimensions(
-    canvas,
-    scale,
-  );
-
-  if (appState.height !== canvas.height || appState.width !== canvas.width) {
-    refresh();
-  }
-
-  const context = bootstrapCanvas({
-    canvas,
-    scale,
-    normalizedWidth,
-    normalizedHeight,
-    viewBackgroundColor: "transparent",
-  });
-
-  // Apply zoom
-  context.save();
-  context.translate(
-    appState.scrollX * appState.zoom.value,
-    appState.scrollY * appState.zoom.value,
-  );
-
-  renderOrigin(context, appState.zoom.value);
-
-  if (
-    window.visualDebug?.currentFrame &&
-    window.visualDebug?.data &&
-    window.visualDebug.data.length > 0
-  ) {
-    // Render only one frame
-    const [idx] = debugFrameData();
-
-    render(window.visualDebug.data[idx], context, appState);
-  } else {
-    // Render all debug frames
-    window.visualDebug?.data.forEach((frame) => {
-      render(frame, context, appState);
-    });
-  }
-
-  if (window.visualDebug) {
-    window.visualDebug!.data =
-      window.visualDebug?.data.map((frame) =>
-        frame.filter((el) => el.permanent),
-      ) ?? [];
-  }
-};
-
-const debugFrameData = (): [number, number] => {
-  const currentFrame = window.visualDebug?.currentFrame ?? 0;
-  const frameCount = window.visualDebug?.data.length ?? 0;
-
-  if (frameCount > 0) {
-    return [currentFrame % frameCount, window.visualDebug?.currentFrame ?? 0];
-  }
-
-  return [0, 0];
-};
-
-export const saveDebugState = (debug: { enabled: boolean }) => {
-  try {
-    localStorage.setItem(
-      STORAGE_KEYS.LOCAL_STORAGE_DEBUG,
-      JSON.stringify(debug),
-    );
-  } catch (error: any) {
-    console.error(error);
-  }
-};
-
-export const debugRenderer = throttleRAF(
-  (
-    canvas: HTMLCanvasElement,
-    appState: AppState,
-    scale: number,
-    refresh: () => void,
-  ) => {
-    _debugRenderer(canvas, appState, scale, refresh);
-  },
-  { trailing: true },
-);
-
-export const loadSavedDebugState = () => {
-  let debug;
-  try {
-    const savedDebugState = localStorage.getItem(
-      STORAGE_KEYS.LOCAL_STORAGE_DEBUG,
-    );
-    if (savedDebugState) {
-      debug = JSON.parse(savedDebugState) as { enabled: boolean };
-    }
-  } catch (error: any) {
-    console.error(error);
-  }
-
-  return debug ?? { enabled: false };
-};
-
-export const isVisualDebuggerEnabled = () =>
-  Array.isArray(window.visualDebug?.data);
-
-export const DebugFooter = ({ onChange }: { onChange: () => void }) => {
-  const moveForward = useCallback(() => {
-    if (
-      !window.visualDebug?.currentFrame ||
-      isNaN(window.visualDebug?.currentFrame ?? -1)
-    ) {
-      window.visualDebug!.currentFrame = 0;
-    }
-    window.visualDebug!.currentFrame += 1;
-    onChange();
-  }, [onChange]);
-  const moveBackward = useCallback(() => {
-    if (
-      !window.visualDebug?.currentFrame ||
-      isNaN(window.visualDebug?.currentFrame ?? -1) ||
-      window.visualDebug?.currentFrame < 1
-    ) {
-      window.visualDebug!.currentFrame = 1;
-    }
-    window.visualDebug!.currentFrame -= 1;
-    onChange();
-  }, [onChange]);
-  const reset = useCallback(() => {
-    window.visualDebug!.currentFrame = undefined;
-    onChange();
-  }, [onChange]);
-  const trashFrames = useCallback(() => {
-    if (window.visualDebug) {
-      window.visualDebug.currentFrame = undefined;
-      window.visualDebug.data = [];
-    }
-    onChange();
-  }, [onChange]);
-
-  return (
-    <>
-      <button
-        className="ToolIcon_type_button"
-        data-testid="debug-forward"
-        aria-label="Move forward"
-        type="button"
-        onClick={trashFrames}
-      >
-        <div
-          className="ToolIcon__icon"
-          aria-hidden="true"
-          aria-disabled="false"
-        >
-          {TrashIcon}
-        </div>
-      </button>
-      <button
-        className="ToolIcon_type_button"
-        data-testid="debug-forward"
-        aria-label="Move forward"
-        type="button"
-        onClick={moveBackward}
-      >
-        <div
-          className="ToolIcon__icon"
-          aria-hidden="true"
-          aria-disabled="false"
-        >
-          <ArrowheadArrowIcon flip />
-        </div>
-      </button>
-      <button
-        className="ToolIcon_type_button"
-        data-testid="debug-forward"
-        aria-label="Move forward"
-        type="button"
-        onClick={reset}
-      >
-        <div
-          className="ToolIcon__icon"
-          aria-hidden="true"
-          aria-disabled="false"
-        >
-          {CloseIcon}
-        </div>
-      </button>
-      <button
-        className="ToolIcon_type_button"
-        data-testid="debug-backward"
-        aria-label="Move backward"
-        type="button"
-        onClick={moveForward}
-      >
-        <div
-          className="ToolIcon__icon"
-          aria-hidden="true"
-          aria-disabled="false"
-        >
-          <ArrowheadArrowIcon />
-        </div>
-      </button>
-    </>
-  );
-};
-
-interface DebugCanvasProps {
-  appState: AppState;
-  scale: number;
-}
-
-const DebugCanvas = forwardRef<HTMLCanvasElement, DebugCanvasProps>(
-  ({ appState, scale }, ref) => {
-    const { width, height } = appState;
-
-    const canvasRef = useRef<HTMLCanvasElement>(null);
-    useImperativeHandle<HTMLCanvasElement | null, HTMLCanvasElement | null>(
-      ref,
-      () => canvasRef.current,
-      [canvasRef],
-    );
-
-    return (
-      <canvas
-        style={{
-          width,
-          height,
-          position: "absolute",
-          zIndex: 2,
-          pointerEvents: "none",
-        }}
-        width={width * scale}
-        height={height * scale}
-        ref={canvasRef}
-      >
-        Debug Canvas
-      </canvas>
-    );
-  },
-);
-
-export default DebugCanvas;
--- a/excalidraw-app/components/EncryptedIcon.tsx
+++ b/excalidraw-app/components/EncryptedIcon.tsx
@ -8,7 +8,7 @@ export const EncryptedIcon = () => {
  return (
    <a
      className="encrypted-icon tooltip"
-      href="https://plus.excalidraw.com/blog/end-to-end-encryption"
+      href="https://blog.excalidraw.com/end-to-end-encryption/"
      target="_blank"
      rel="noopener noreferrer"
      aria-label={t("encrypted.link")}
--- a/excalidraw-app/components/ExportToExcalidrawPlus.tsx
+++ b/excalidraw-app/components/ExportToExcalidrawPlus.tsx
@ -3,11 +3,11 @@ import { Card } from "../../packages/excalidraw/components/Card";
 import { ToolButton } from "../../packages/excalidraw/components/ToolButton";
 import { serializeAsJSON } from "../../packages/excalidraw/data/json";
 import { loadFirebaseStorage, saveFilesToFirebase } from "../data/firebase";
-import type {
+import {
  FileId,
  NonDeletedExcalidrawElement,
 } from "../../packages/excalidraw/element/types";
-import type {
+import {
  AppState,
  BinaryFileData,
  BinaryFiles,
--- a/excalidraw-app/components/GitHubCorner.tsx
+++ b/excalidraw-app/components/GitHubCorner.tsx
@ -1,7 +1,7 @@
 import oc from "open-color";
 import React from "react";
 import { THEME } from "../../packages/excalidraw/constants";
-import type { Theme } from "../../packages/excalidraw/element/types";
+import { Theme } from "../../packages/excalidraw/element/types";

 // https://github.com/tholman/github-corners
 export const GitHubCorner = React.memo(
--- a/excalidraw-app/app-language/LanguageList.tsx
+++ b/excalidraw-app/app-language/LanguageList.tsx
@ -1,7 +1,8 @@
+import { useSetAtom } from "jotai";
 import React from "react";
-import { useI18n, languages } from "../../packages/excalidraw/i18n";
-import { useSetAtom } from "../app-jotai";
-import { appLangCodeAtom } from "./language-state";
+import { appLangCodeAtom } from "../App";
+import { useI18n } from "../../packages/excalidraw/i18n";
+import { languages } from "../../packages/excalidraw/i18n";

 export const LanguageList = ({ style }: { style?: React.CSSProperties }) => {
  const { t, langCode } = useI18n();
--- a/excalidraw-app/data/FileManager.ts
+++ b/excalidraw-app/data/FileManager.ts
@ -2,40 +2,28 @@ import { StoreAction } from "../../packages/excalidraw";
 import { compressData } from "../../packages/excalidraw/data/encode";
 import { newElementWith } from "../../packages/excalidraw/element/mutateElement";
 import { isInitializedImageElement } from "../../packages/excalidraw/element/typeChecks";
-import type {
+import {
  ExcalidrawElement,
  ExcalidrawImageElement,
  FileId,
  InitializedExcalidrawImageElement,
 } from "../../packages/excalidraw/element/types";
 import { t } from "../../packages/excalidraw/i18n";
-import type {
+import {
  BinaryFileData,
  BinaryFileMetadata,
  ExcalidrawImperativeAPI,
  BinaryFiles,
 } from "../../packages/excalidraw/types";

-type FileVersion = Required<BinaryFileData>["version"];
-
 export class FileManager {
  /** files being fetched */
  private fetchingFiles = new Map<ExcalidrawImageElement["fileId"], true>();
-  private erroredFiles_fetch = new Map<
-    ExcalidrawImageElement["fileId"],
-    true
-  >();
  /** files being saved */
-  private savingFiles = new Map<
-    ExcalidrawImageElement["fileId"],
-    FileVersion
-  >();
+  private savingFiles = new Map<ExcalidrawImageElement["fileId"], true>();
  /* files already saved to persistent storage */
-  private savedFiles = new Map<ExcalidrawImageElement["fileId"], FileVersion>();
-  private erroredFiles_save = new Map<
-    ExcalidrawImageElement["fileId"],
-    FileVersion
-  >();
+  private savedFiles = new Map<ExcalidrawImageElement["fileId"], true>();
+  private erroredFiles = new Map<ExcalidrawImageElement["fileId"], true>();

  private _getFiles;
  private _saveFiles;
@ -49,8 +37,8 @@ export class FileManager {
      erroredFiles: Map<FileId, true>;
    }>;
    saveFiles: (data: { addedFiles: Map<FileId, BinaryFileData> }) => Promise<{
-      savedFiles: Map<FileId, BinaryFileData>;
-      erroredFiles: Map<FileId, BinaryFileData>;
+      savedFiles: Map<FileId, true>;
+      erroredFiles: Map<FileId, true>;
    }>;
  }) {
    this._getFiles = getFiles;
@ -58,28 +46,19 @@ export class FileManager {
  }

  /**
-   * returns whether file is saved/errored, or being processed
+   * returns whether file is already saved or being processed
   */
-  isFileTracked = (id: FileId) => {
+  isFileHandled = (id: FileId) => {
    return (
      this.savedFiles.has(id) ||
-      this.savingFiles.has(id) ||
      this.fetchingFiles.has(id) ||
-      this.erroredFiles_fetch.has(id) ||
-      this.erroredFiles_save.has(id)
+      this.savingFiles.has(id) ||
+      this.erroredFiles.has(id)
    );
  };

-  isFileSavedOrBeingSaved = (file: BinaryFileData) => {
-    const fileVersion = this.getFileVersion(file);
-    return (
-      this.savedFiles.get(file.id) === fileVersion ||
-      this.savingFiles.get(file.id) === fileVersion
-    );
-  };
-
-  getFileVersion = (file: BinaryFileData) => {
-    return file.version ?? 1;
+  isFileSaved = (id: FileId) => {
+    return this.savedFiles.has(id);
  };

  saveFiles = async ({
@ -92,16 +71,13 @@ export class FileManager {
    const addedFiles: Map<FileId, BinaryFileData> = new Map();

    for (const element of elements) {
-      const fileData =
-        isInitializedImageElement(element) && files[element.fileId];
-
      if (
-        fileData &&
-        // NOTE if errored during save, won't retry due to this check
-        !this.isFileSavedOrBeingSaved(fileData)
+        isInitializedImageElement(element) &&
+        files[element.fileId] &&
+        !this.isFileHandled(element.fileId)
      ) {
        addedFiles.set(element.fileId, files[element.fileId]);
-        this.savingFiles.set(element.fileId, this.getFileVersion(fileData));
+        this.savingFiles.set(element.fileId, true);
      }
    }

@ -110,12 +86,8 @@ export class FileManager {
        addedFiles,
      });

-      for (const [fileId, fileData] of savedFiles) {
-        this.savedFiles.set(fileId, this.getFileVersion(fileData));
-      }
-
-      for (const [fileId, fileData] of erroredFiles) {
-        this.erroredFiles_save.set(fileId, this.getFileVersion(fileData));
+      for (const [fileId] of savedFiles) {
+        this.savedFiles.set(fileId, true);
      }

      return {
@ -149,10 +121,10 @@ export class FileManager {
      const { loadedFiles, erroredFiles } = await this._getFiles(ids);

      for (const file of loadedFiles) {
-        this.savedFiles.set(file.id, this.getFileVersion(file));
+        this.savedFiles.set(file.id, true);
      }
      for (const [fileId] of erroredFiles) {
-        this.erroredFiles_fetch.set(fileId, true);
+        this.erroredFiles.set(fileId, true);
      }

      return { loadedFiles, erroredFiles };
@ -188,7 +160,7 @@ export class FileManager {
  ): element is InitializedExcalidrawImageElement => {
    return (
      isInitializedImageElement(element) &&
-      this.savedFiles.has(element.fileId) &&
+      this.isFileSaved(element.fileId) &&
      element.status === "pending"
    );
  };
@ -197,8 +169,7 @@ export class FileManager {
    this.fetchingFiles.clear();
    this.savingFiles.clear();
    this.savedFiles.clear();
-    this.erroredFiles_fetch.clear();
-    this.erroredFiles_save.clear();
+    this.erroredFiles.clear();
  }
 }

--- a/excalidraw-app/data/LocalData.ts
+++ b/excalidraw-app/data/LocalData.ts
@ -20,23 +20,19 @@ import {
  get,
 } from "idb-keyval";
 import { clearAppStateForLocalStorage } from "../../packages/excalidraw/appState";
-import {
-  CANVAS_SEARCH_TAB,
-  DEFAULT_SIDEBAR,
-} from "../../packages/excalidraw/constants";
-import type { LibraryPersistedData } from "../../packages/excalidraw/data/library";
-import type { ImportedDataState } from "../../packages/excalidraw/data/types";
+import { LibraryPersistedData } from "../../packages/excalidraw/data/library";
+import { ImportedDataState } from "../../packages/excalidraw/data/types";
 import { clearElementsForLocalStorage } from "../../packages/excalidraw/element";
-import type {
+import {
  ExcalidrawElement,
  FileId,
 } from "../../packages/excalidraw/element/types";
-import type {
+import {
  AppState,
  BinaryFileData,
  BinaryFiles,
 } from "../../packages/excalidraw/types";
-import type { MaybePromise } from "../../packages/excalidraw/utility-types";
+import { MaybePromise } from "../../packages/excalidraw/utility-types";
 import { debounce } from "../../packages/excalidraw/utils";
 import { SAVE_TO_LOCAL_STORAGE_TIMEOUT, STORAGE_KEYS } from "../app_constants";
 import { FileManager } from "./FileManager";
@ -70,22 +66,13 @@ const saveDataStateToLocalStorage = (
  appState: AppState,
 ) => {
  try {
-    const _appState = clearAppStateForLocalStorage(appState);
-
-    if (
-      _appState.openSidebar?.name === DEFAULT_SIDEBAR.name &&
-      _appState.openSidebar.tab === CANVAS_SEARCH_TAB
-    ) {
-      _appState.openSidebar = null;
-    }
-
    localStorage.setItem(
      STORAGE_KEYS.LOCAL_STORAGE_ELEMENTS,
      JSON.stringify(clearElementsForLocalStorage(elements)),
    );
    localStorage.setItem(
      STORAGE_KEYS.LOCAL_STORAGE_APP_STATE,
-      JSON.stringify(_appState),
+      JSON.stringify(clearAppStateForLocalStorage(appState)),
    );
    updateBrowserStateVersion(STORAGE_KEYS.VERSION_DATA_STATE);
  } catch (error: any) {
@ -183,8 +170,8 @@ export class LocalData {
      );
    },
    async saveFiles({ addedFiles }) {
-      const savedFiles = new Map<FileId, BinaryFileData>();
-      const erroredFiles = new Map<FileId, BinaryFileData>();
+      const savedFiles = new Map<FileId, true>();
+      const erroredFiles = new Map<FileId, true>();

      // before we use `storage` event synchronization, let's update the flag
      // optimistically. Hopefully nothing fails, and an IDB read executed
@ -195,10 +182,10 @@ export class LocalData {
        [...addedFiles].map(async ([id, fileData]) => {
          try {
            await set(id, fileData, filesStore);
-            savedFiles.set(id, fileData);
+            savedFiles.set(id, true);
          } catch (error: any) {
            console.error(error);
-            erroredFiles.set(id, fileData);
+            erroredFiles.set(id, true);
          }
        }),
      );
--- a/excalidraw-app/data/firebase.ts
+++ b/excalidraw-app/data/firebase.ts
@ -1,13 +1,13 @@
 import { reconcileElements } from "../../packages/excalidraw";
-import type {
+import {
  ExcalidrawElement,
  FileId,
  OrderedExcalidrawElement,
 } from "../../packages/excalidraw/element/types";
 import { getSceneVersion } from "../../packages/excalidraw/element";
-import type Portal from "../collab/Portal";
+import Portal from "../collab/Portal";
 import { restoreElements } from "../../packages/excalidraw/data/restore";
-import type {
+import {
  AppState,
  BinaryFileData,
  BinaryFileMetadata,
@ -20,9 +20,8 @@ import {
  decryptData,
 } from "../../packages/excalidraw/data/encryption";
 import { MIME_TYPES } from "../../packages/excalidraw/constants";
-import type { SyncableExcalidrawElement } from ".";
-import { getSyncableElements } from ".";
-import type { ResolutionType } from "../../packages/excalidraw/utility-types";
+import { getSyncableElements, SyncableExcalidrawElement } from ".";
+import { ResolutionType } from "../../packages/excalidraw/utility-types";
 import type { Socket } from "socket.io-client";
 import type { RemoteExcalidrawElement } from "../../packages/excalidraw/data/reconcile";

@ -177,8 +176,8 @@ export const saveFilesToFirebase = async ({
 }) => {
  const firebase = await loadFirebaseStorage();

-  const erroredFiles: FileId[] = [];
-  const savedFiles: FileId[] = [];
+  const erroredFiles = new Map<FileId, true>();
+  const savedFiles = new Map<FileId, true>();

  await Promise.all(
    files.map(async ({ id, buffer }) => {
@ -194,9 +193,9 @@ export const saveFilesToFirebase = async ({
              cacheControl: `public, max-age=${FILE_CACHE_MAX_AGE_SEC}`,
            },
          );
-        savedFiles.push(id);
+        savedFiles.set(id, true);
      } catch (error: any) {
-        erroredFiles.push(id);
+        erroredFiles.set(id, true);
      }
    }),
  );
--- a/excalidraw-app/data/index.ts
+++ b/excalidraw-app/data/index.ts
@ -9,30 +9,30 @@ import {
 } from "../../packages/excalidraw/data/encryption";
 import { serializeAsJSON } from "../../packages/excalidraw/data/json";
 import { restore } from "../../packages/excalidraw/data/restore";
-import type { ImportedDataState } from "../../packages/excalidraw/data/types";
-import type { SceneBounds } from "../../packages/excalidraw/element/bounds";
+import { ImportedDataState } from "../../packages/excalidraw/data/types";
+import { SceneBounds } from "../../packages/excalidraw/element/bounds";
 import { isInvisiblySmallElement } from "../../packages/excalidraw/element/sizeHelpers";
 import { isInitializedImageElement } from "../../packages/excalidraw/element/typeChecks";
-import type {
+import {
  ExcalidrawElement,
  FileId,
  OrderedExcalidrawElement,
 } from "../../packages/excalidraw/element/types";
 import { t } from "../../packages/excalidraw/i18n";
-import type {
+import {
  AppState,
  BinaryFileData,
  BinaryFiles,
  SocketId,
  UserIdleState,
 } from "../../packages/excalidraw/types";
-import type { MakeBrand } from "../../packages/excalidraw/utility-types";
+import { MakeBrand } from "../../packages/excalidraw/utility-types";
 import { bytesToHexString } from "../../packages/excalidraw/utils";
-import type { WS_SUBTYPES } from "../app_constants";
 import {
  DELETED_ELEMENT_TIMEOUT,
  FILE_UPLOAD_MAX_BYTES,
  ROOM_ID_BYTES,
+  WS_SUBTYPES,
 } from "../app_constants";
 import { encodeFilesForUpload } from "./FileManager";
 import { saveFilesToFirebase } from "./firebase";
--- a/excalidraw-app/data/localStorage.ts
+++ b/excalidraw-app/data/localStorage.ts
@ -1,5 +1,5 @@
-import type { ExcalidrawElement } from "../../packages/excalidraw/element/types";
-import type { AppState } from "../../packages/excalidraw/types";
+import { ExcalidrawElement } from "../../packages/excalidraw/element/types";
+import { AppState } from "../../packages/excalidraw/types";
 import {
  clearAppStateForLocalStorage,
  getDefaultAppState,
--- a/excalidraw-app/index.html
+++ b/excalidraw-app/index.html
@ -20,7 +20,7 @@
      name="description"
      content="Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them."
    />
-    <meta name="image" content="https://excalidraw.com/og-image-3.png" />
+    <meta name="image" content="https://excalidraw.com/og-image-2.png" />

    <!-- Open Graph / Facebook -->
    <meta property="og:site_name" content="Excalidraw" />
@ -35,7 +35,7 @@
      property="og:description"
      content="Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them."
    />
-    <meta property="og:image" content="https://excalidraw.com/og-image-3.png" />
+    <meta property="og:image" content="https://excalidraw.com/og-image-2.png" />

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image" />
@ -51,10 +51,14 @@
    />
    <meta
      property="twitter:image"
-      content="https://excalidraw.com/og-image-3.png"
+      content="https://excalidraw.com/og-twitter-v2.png"
    />

-    <link rel="canonical" href="https://excalidraw.com" />
+    <!-- General tags -->
+    <meta
+      name="description"
+      content="Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them."
+    />

    <!------------------------------------------------------------------------->
    <!--   to minimize white flash on load when user has dark mode enabled   -->
@ -91,11 +95,6 @@
        color: #fff;
      }
    </style>
-
-    <!-- Warmup the connection for Google fonts -->
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-
    <!------------------------------------------------------------------------->
    <% if (typeof PROD != 'undefined' && PROD == true) { %>
    <script>
@ -116,21 +115,6 @@
        window.location.href = "https://app.excalidraw.com";
      }
    </script>
-
-    <!-- Following placeholder is replaced during the build step -->
-    <!-- PLACEHOLDER:EXCALIDRAW_APP_FONTS -->
-
-    <!-- Register Assistant as the UI font, before the scene inits -->
-    <link
-      rel="stylesheet"
-      href="../packages/excalidraw/fonts/fonts.css"
-      type="text/css"
-    />
-
-    <% } else { %>
-    <script>
-      window.EXCALIDRAW_ASSET_PATH = window.origin;
-    </script>
    <% } %>

    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
@ -140,6 +124,22 @@
    <!-- Excalidraw version -->
    <meta name="version" content="{version}" />

+    <link
+      rel="preload"
+      href="/Virgil.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="preload"
+      href="/Cascadia.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+
+    <link rel="stylesheet" href="/fonts/fonts.css" type="text/css" />
    <% if (typeof VITE_APP_DEV_DISABLE_LIVE_RELOAD != 'undefined' &&
    VITE_APP_DEV_DISABLE_LIVE_RELOAD == true) { %>
    <script>
@ -158,6 +158,7 @@
    </script>
    <% } %>
    <script>
+      window.EXCALIDRAW_ASSET_PATH = "/";
      // setting this so that libraries installation reuses this window tab.
      window.name = "_excalidraw";
    </script>
@ -214,7 +215,6 @@
    </header>
    <div id="root"></div>
    <script type="module" src="index.tsx"></script>
-    <% if (typeof PROD != 'undefined' && PROD == true) { %>
    <!-- 100% privacy friendly analytics -->
    <script>
      // need to load this script dynamically bcs. of iframe embed tracking
@ -247,6 +247,5 @@
      }
    </script>
    <!-- end LEGACY GOOGLE ANALYTICS -->
-    <% } %>
  </body>
 </html>
--- a/excalidraw-app/index.scss
+++ b/excalidraw-app/index.scss
@ -25,7 +25,6 @@
    margin-bottom: auto;
    margin-inline-start: auto;
    margin-inline-end: 0.6em;
-    z-index: var(--zIndex-layerUI);

    svg {
      width: 1.2rem;
@ -41,10 +40,6 @@
      }
      &.highlighted {
        color: var(--color-promo);
-        font-weight: 700;
-        .dropdown-menu-item__icon g {
-          stroke-width: 2;
-        }
      }
    }
  }
--- a/excalidraw-app/package.json
+++ b/excalidraw-app/package.json
@ -23,34 +23,20 @@
    ]
  },
  "engines": {
-    "node": "18.0.0 - 22.x.x"
+    "node": ">=18.0.0"
  },
  "dependencies": {
-    "@excalidraw/random-username": "1.0.0",
-    "@sentry/browser": "9.0.1",
-    "callsites": "4.2.0",
-    "firebase": "8.3.3",
-    "i18next-browser-languagedetector": "6.1.4",
-    "idb-keyval": "6.0.3",
-    "jotai": "2.11.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "socket.io-client": "4.7.2",
    "vite-plugin-html": "3.2.2"
  },
  "prettier": "@excalidraw/prettier-config",
  "scripts": {
    "build-node": "node ./scripts/build-node.js",
-    "build:app:docker": "cross-env VITE_APP_DISABLE_SENTRY=true vite build",
-    "build:app": "cross-env VITE_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA cross-env VITE_APP_ENABLE_TRACKING=true vite build",
+    "build:app:docker": "cross-env VITE_APP_DISABLE_SENTRY=true VITE_APP_DISABLE_TRACKING=true vite build",
+    "build:app": "cross-env VITE_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA vite build",
    "build:version": "node ../scripts/build-version.js",
    "build": "yarn build:app && yarn build:version",
    "start": "yarn && vite",
-    "start:production": "yarn build && yarn serve",
-    "serve": "npx http-server build -a localhost -p 5001 -o",
+    "start:production": "npm run build && npx http-server build -a localhost -p 5001 -o",
    "build:preview": "yarn build && vite preview --port 5000"
-  },
-  "devDependencies": {
-    "vite-plugin-sitemap": "0.7.1"
  }
 }
--- a/excalidraw-app/sentry.ts
+++ b/excalidraw-app/sentry.ts
@ -1,9 +1,8 @@
 import * as Sentry from "@sentry/browser";
-import callsites from "callsites";
+import * as SentryIntegrations from "@sentry/integrations";

 const SentryEnvHostnameMap: { [key: string]: string } = {
  "excalidraw.com": "production",
-  "staging.excalidraw.com": "staging",
  "vercel.app": "staging",
 };

@ -24,13 +23,9 @@ Sentry.init({
  release: import.meta.env.VITE_APP_GIT_SHA,
  ignoreErrors: [
    "undefined is not an object (evaluating 'window.__pad.performLoop')", // Only happens on Safari, but spams our servers. Doesn't break anything
-    "InvalidStateError: Failed to execute 'transaction' on 'IDBDatabase': The database connection is closing.", // Not much we can do about the IndexedDB closing error
-    /(Failed to fetch|(fetch|loading) dynamically imported module)/i, // This is happening when a service worker tries to load an old asset
-    /QuotaExceededError: (The quota has been exceeded|.*setItem.*Storage)/i, // localStorage quota exceeded
-    "Internal error opening backing store for indexedDB.open", // Private mode and disabled indexedDB
  ],
  integrations: [
-    Sentry.captureConsoleIntegration({
+    new SentryIntegrations.CaptureConsole({
      levels: ["error"],
    }),
  ],
@ -38,44 +33,6 @@ Sentry.init({
    if (event.request?.url) {
      event.request.url = event.request.url.replace(/#.*$/, "");
    }
-
-    if (!event.exception) {
-      event.exception = {
-        values: [
-          {
-            type: "ConsoleError",
-            value: event.message ?? "Unknown error",
-            stacktrace: {
-              frames: callsites()
-                .slice(1)
-                .filter(
-                  (frame) =>
-                    frame.getFileName() &&
-                    !frame.getFileName()?.includes("@sentry_browser.js"),
-                )
-                .map((frame) => ({
-                  filename: frame.getFileName() ?? undefined,
-                  function: frame.getFunctionName() ?? undefined,
-                  in_app: !(
-                    frame.getFileName()?.includes("node_modules") ?? false
-                  ),
-                  lineno: frame.getLineNumber() ?? undefined,
-                  colno: frame.getColumnNumber() ?? undefined,
-                })),
-            },
-            mechanism: {
-              type: "instrument",
-              handled: true,
-              data: {
-                function: "console.error",
-                handler: "Sentry.beforeSend",
-              },
-            },
-          },
-        ],
-      };
-    }
-
    return event;
  },
 });
--- a/excalidraw-app/share/ShareDialog.scss
+++ b/excalidraw-app/share/ShareDialog.scss
@ -58,8 +58,8 @@
      font-size: 0.75rem;
      line-height: 110%;

-      background: var(--color-success);
-      color: var(--color-success-text);
+      background: var(--color-success-lighter);
+      color: var(--color-success);

      & > svg {
        width: 0.875rem;
--- a/excalidraw-app/share/ShareDialog.tsx
+++ b/excalidraw-app/share/ShareDialog.tsx
@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from "react";
+import * as Popover from "@radix-ui/react-popover";
 import { copyTextToSystemClipboard } from "../../packages/excalidraw/clipboard";
 import { trackEvent } from "../../packages/excalidraw/analytics";
 import { getFrame } from "../../packages/excalidraw/utils";
@ -13,16 +14,15 @@ import {
  share,
  shareIOS,
  shareWindows,
+  tablerCheckIcon,
 } from "../../packages/excalidraw/components/icons";
 import { TextField } from "../../packages/excalidraw/components/TextField";
 import { FilledButton } from "../../packages/excalidraw/components/FilledButton";
-import type { CollabAPI } from "../collab/Collab";
-import { activeRoomLinkAtom } from "../collab/Collab";
-import { useUIAppState } from "../../packages/excalidraw/context/ui-appState";
-import { useCopyStatus } from "../../packages/excalidraw/hooks/useCopiedIndicator";
-import { atom, useAtom, useAtomValue } from "../app-jotai";
+import { activeRoomLinkAtom, CollabAPI } from "../collab/Collab";
+import { atom, useAtom, useAtomValue } from "jotai";

 import "./ShareDialog.scss";
+import { useUIAppState } from "../../packages/excalidraw/context/ui-appState";

 type OnExportToBackend = () => void;
 type ShareDialogType = "share" | "collaborationOnly";
@ -62,11 +62,10 @@ const ActiveRoomDialog = ({
  handleClose: () => void;
 }) => {
  const { t } = useI18n();
-  const [, setJustCopied] = useState(false);
+  const [justCopied, setJustCopied] = useState(false);
  const timerRef = useRef<number>(0);
  const ref = useRef<HTMLInputElement>(null);
  const isShareSupported = "share" in navigator;
-  const { onCopy, copyStatus } = useCopyStatus();

  const copyRoomLink = async () => {
    try {
@ -130,16 +129,26 @@ const ActiveRoomDialog = ({
            onClick={shareRoomLink}
          />
        )}
-        <FilledButton
-          size="large"
-          label={t("buttons.copyLink")}
-          icon={copyIcon}
-          status={copyStatus}
-          onClick={() => {
-            copyRoomLink();
-            onCopy();
-          }}
-        />
+        <Popover.Root open={justCopied}>
+          <Popover.Trigger asChild>
+            <FilledButton
+              size="large"
+              label="Copy link"
+              icon={copyIcon}
+              onClick={copyRoomLink}
+            />
+          </Popover.Trigger>
+          <Popover.Content
+            onOpenAutoFocus={(event) => event.preventDefault()}
+            onCloseAutoFocus={(event) => event.preventDefault()}
+            className="ShareDialog__popover"
+            side="top"
+            align="end"
+            sideOffset={5.5}
+          >
+            {tablerCheckIcon} copied
+          </Popover.Content>
+        </Popover.Root>
      </div>
      <div className="ShareDialog__active__description">
        <p>
--- a/excalidraw-app/tests/snapshots/MobileMenu.test.tsx.snap
+++ b/excalidraw-app/tests/snapshots/MobileMenu.test.tsx.snap
@ -5,7 +5,7 @@ exports[`Test MobileMenu > should initialize with welcome screen and hide once u
  class="welcome-screen-center"
 >
  <div
-    class="welcome-screen-center__logo excalifont welcome-screen-decor"
+    class="welcome-screen-center__logo virgil welcome-screen-decor"
  >
    <div
      class="ExcalidrawLogo is-small"
@ -48,7 +48,7 @@ exports[`Test MobileMenu > should initialize with welcome screen and hide once u
    </div>
  </div>
  <div
-    class="welcome-screen-center__heading welcome-screen-decor excalifont"
+    class="welcome-screen-center__heading welcome-screen-decor virgil"
  >
    All your data is saved locally in your browser.
  </div>
@ -216,22 +216,23 @@ exports[`Test MobileMenu > should initialize with welcome screen and hide once u
          stroke-width="2"
          viewBox="0 0 24 24"
        >
-          <g
-            stroke-width="1.5"
-          >
+          <g>
            <path
              d="M0 0h24v24H0z"
              fill="none"
              stroke="none"
            />
            <path
-              d="M15 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"
+              d="M10 12l10 0"
            />
            <path
-              d="M21 12h-13l3 -3"
+              d="M10 12l4 4"
            />
            <path
-              d="M11 15l-3 -3"
+              d="M10 12l4 -4"
+            />
+            <path
+              d="M4 4l0 16"
            />
          </g>
        </svg>
--- a/excalidraw-app/tests/collab.test.tsx
+++ b/excalidraw-app/tests/collab.test.tsx
@ -2,6 +2,7 @@ import { vi } from "vitest";
 import {
  act,
  render,
+  updateSceneData,
  waitFor,
 } from "../../packages/excalidraw/tests/test-utils";
 import ExcalidrawApp from "../App";
@ -87,12 +88,12 @@ describe("collaboration", () => {
    const rect1 = API.createElement({ ...rect1Props });
    const rect2 = API.createElement({ ...rect2Props });

-    API.updateScene({
+    updateSceneData({
      elements: syncInvalidIndices([rect1, rect2]),
      storeAction: StoreAction.CAPTURE,
    });

-    API.updateScene({
+    updateSceneData({
      elements: syncInvalidIndices([
        rect1,
        newElementWith(h.elements[1], { isDeleted: true }),
@ -142,7 +143,7 @@ describe("collaboration", () => {
    });

    // simulate force deleting the element remotely
-    API.updateScene({
+    updateSceneData({
      elements: syncInvalidIndices([rect1]),
      storeAction: StoreAction.UPDATE,
    });
@ -177,7 +178,7 @@ describe("collaboration", () => {
    act(() => h.app.actionManager.executeAction(undoAction));

    // simulate local update
-    API.updateScene({
+    updateSceneData({
      elements: syncInvalidIndices([
        h.elements[0],
        newElementWith(h.elements[1], { x: 100 }),
@ -215,7 +216,7 @@ describe("collaboration", () => {
    });

    // simulate force deleting the element remotely
-    API.updateScene({
+    updateSceneData({
      elements: syncInvalidIndices([rect1]),
      storeAction: StoreAction.UPDATE,
    });
--- a/excalidraw-app/useHandleAppTheme.ts
+++ b/excalidraw-app/useHandleAppTheme.ts
@ -1,22 +1,23 @@
+import { atom, useAtom } from "jotai";
 import { useEffect, useLayoutEffect, useState } from "react";
 import { THEME } from "../packages/excalidraw";
 import { EVENT } from "../packages/excalidraw/constants";
-import type { Theme } from "../packages/excalidraw/element/types";
+import { Theme } from "../packages/excalidraw/element/types";
 import { CODES, KEYS } from "../packages/excalidraw/keys";
 import { STORAGE_KEYS } from "./app_constants";

+export const appThemeAtom = atom<Theme | "system">(
+  (localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_THEME) as
+    | Theme
+    | "system"
+    | null) || THEME.LIGHT,
+);
+
 const getDarkThemeMediaQuery = (): MediaQueryList | undefined =>
  window.matchMedia?.("(prefers-color-scheme: dark)");

 export const useHandleAppTheme = () => {
-  const [appTheme, setAppTheme] = useState<Theme | "system">(() => {
-    return (
-      (localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_THEME) as
-        | Theme
-        | "system"
-        | null) || THEME.LIGHT
-    );
-  });
+  const [appTheme, setAppTheme] = useAtom(appThemeAtom);
  const [editorTheme, setEditorTheme] = useState<Theme>(THEME.LIGHT);

  useEffect(() => {
@ -65,5 +66,5 @@ export const useHandleAppTheme = () => {
    }
  }, [appTheme]);

-  return { editorTheme, appTheme, setAppTheme };
+  return { editorTheme };
 };
--- a/excalidraw-app/vite-env.d.ts
+++ b/excalidraw-app/vite-env.d.ts
@ -29,9 +29,6 @@ interface ImportMetaEnv {
  // Enable eslint in dev server
  VITE_APP_ENABLE_ESLINT: string;

-  // Enable PWA in dev server
-  VITE_APP_ENABLE_PWA: string;
-
  VITE_APP_PLUS_LP: string;

  VITE_APP_PLUS_APP: string;
--- a/excalidraw-app/vite.config.mts
+++ b/excalidraw-app/vite.config.mts
@ -5,237 +5,194 @@ import { ViteEjsPlugin } from "vite-plugin-ejs";
 import { VitePWA } from "vite-plugin-pwa";
 import checker from "vite-plugin-checker";
 import { createHtmlPlugin } from "vite-plugin-html";
-import Sitemap from "vite-plugin-sitemap";
-import { woff2BrowserPlugin } from "../scripts/woff2/woff2-vite-plugins";

-export default defineConfig(({ mode }) => {
-  // To load .env variables
-  const envVars = loadEnv(mode, `../`);
-  // https://vitejs.dev/config/
-  return {
-    server: {
-      port: Number(envVars.VITE_APP_PORT || 3000),
-      // open the browser
-      open: true,
-    },
-    // We need to specify the envDir since now there are no
-    //more located in parallel with the vite.config.ts file but in parent dir
-    envDir: "../",
-    build: {
-      outDir: "build",
-      rollupOptions: {
-        output: {
-          assetFileNames(chunkInfo) {
-            if (chunkInfo?.name?.endsWith(".woff2")) {
-              const family = chunkInfo.name.split("-")[0];
-              return `fonts/${family}/[name][extname]`;
-            }
-
-            return "assets/[name]-[hash][extname]";
-          },
-          // Creating separate chunk for locales except for en and percentages.json so they
-          // can be cached at runtime and not merged with
-          // app precache. en.json and percentages.json are needed for first load
-          // or fallback hence not clubbing with locales so first load followed by offline mode works fine. This is how CRA used to work too.
-          manualChunks(id) {
-            if (
-              id.includes("packages/excalidraw/locales") &&
-              id.match(/en.json|percentages.json/) === null
-            ) {
-              const index = id.indexOf("locales/");
-              // Taking the substring after "locales/"
-              return `locales/${id.substring(index + 8)}`;
-            }
-          },
+// To load .env.local variables
+const envVars = loadEnv("", `../`);
+// https://vitejs.dev/config/
+export default defineConfig({
+  server: {
+    port: Number(envVars.VITE_APP_PORT || 3000),
+    // open the browser
+    open: true,
+  },
+  // We need to specify the envDir since now there are no
+  //more located in parallel with the vite.config.ts file but in parent dir
+  envDir: "../",
+  build: {
+    outDir: "build",
+    rollupOptions: {
+      output: {
+        // Creating separate chunk for locales except for en and percentages.json so they
+        // can be cached at runtime and not merged with
+        // app precache. en.json and percentages.json are needed for first load
+        // or fallback hence not clubbing with locales so first load followed by offline mode works fine. This is how CRA used to work too.
+        manualChunks(id) {
+          if (
+            id.includes("packages/excalidraw/locales") &&
+            id.match(/en.json|percentages.json/) === null
+          ) {
+            const index = id.indexOf("locales/");
+            // Taking the substring after "locales/"
+            return `locales/${id.substring(index + 8)}`;
+          }
        },
      },
-      sourcemap: true,
-      // don't auto-inline small assets (i.e. fonts hosted on CDN)
-      assetsInlineLimit: 0,
    },
-    plugins: [
-      Sitemap({
-        hostname: "https://excalidraw.com",
-        outDir: "build",
-        changefreq: "monthly",
-        // its static in public folder
-        generateRobotsTxt: false,
-      }),
-      woff2BrowserPlugin(),
-      react(),
-      checker({
-        typescript: true,
-        eslint:
-          envVars.VITE_APP_ENABLE_ESLINT === "false"
-            ? undefined
-            : { lintCommand: 'eslint "./**/*.{js,ts,tsx}"' },
-        overlay: {
-          initialIsOpen: envVars.VITE_APP_COLLAPSE_OVERLAY === "false",
-          badgeStyle: "margin-bottom: 4rem; margin-left: 1rem",
-        },
-      }),
-      svgrPlugin(),
-      ViteEjsPlugin(),
-      VitePWA({
-        registerType: "autoUpdate",
-        devOptions: {
-          /* set this flag to true to enable in Development mode */
-          enabled: envVars.VITE_APP_ENABLE_PWA === "true",
-        },
+    sourcemap: true,
+  },
+  plugins: [
+    react(),
+    checker({
+      typescript: true,
+      eslint:
+        envVars.VITE_APP_ENABLE_ESLINT === "false"
+          ? undefined
+          : { lintCommand: 'eslint "./**/*.{js,ts,tsx}"' },
+      overlay: {
+        initialIsOpen: envVars.VITE_APP_COLLAPSE_OVERLAY === "false",
+        badgeStyle: "margin-bottom: 4rem; margin-left: 1rem",
+      },
+    }),
+    svgrPlugin(),
+    ViteEjsPlugin(),
+    VitePWA({
+      registerType: "autoUpdate",
+      devOptions: {
+        /* set this flag to true to enable in Development mode */
+        enabled: false,
+      },

-        workbox: {
-          // don't precache fonts, locales and separate chunks
-          globIgnores: [
-            "fonts.css",
-            "**/locales/**",
-            "service-worker.js",
-            "**/*.chunk-*.js",
-          ],
-          runtimeCaching: [
-            {
-              urlPattern: new RegExp(".+.woff2"),
-              handler: "CacheFirst",
-              options: {
-                cacheName: "fonts",
-                expiration: {
-                  maxEntries: 1000,
-                  maxAgeSeconds: 60 * 60 * 24 * 90, // 90 days
-                },
-                cacheableResponse: {
-                  // 0 to cache "opaque" responses from cross-origin requests (i.e. CDN)
-                  statuses: [0, 200],
-                },
+      workbox: {
+        // Don't push fonts and locales to app precache
+        globIgnores: ["fonts.css", "**/locales/**", "service-worker.js"],
+        runtimeCaching: [
+          {
+            urlPattern: new RegExp("/.+.(ttf|woff2|otf)"),
+            handler: "CacheFirst",
+            options: {
+              cacheName: "fonts",
+              expiration: {
+                maxEntries: 50,
+                maxAgeSeconds: 60 * 60 * 24 * 90, // <== 90 days
              },
            },
-            {
-              urlPattern: new RegExp("fonts.css"),
-              handler: "StaleWhileRevalidate",
-              options: {
-                cacheName: "fonts",
-                expiration: {
-                  maxEntries: 50,
-                },
-              },
-            },
-            {
-              urlPattern: new RegExp("locales/[^/]+.js"),
-              handler: "CacheFirst",
-              options: {
-                cacheName: "locales",
-                expiration: {
-                  maxEntries: 50,
-                  maxAgeSeconds: 60 * 60 * 24 * 30, // <== 30 days
-                },
-              },
-            },
-            {
-              urlPattern: new RegExp(".chunk-.+.js"),
-              handler: "CacheFirst",
-              options: {
-                cacheName: "chunk",
-                expiration: {
-                  maxEntries: 50,
-                  maxAgeSeconds: 60 * 60 * 24 * 90, // <== 90 days
-                },
-              },
-            },
-          ],
-        },
-        manifest: {
-          short_name: "Excalidraw",
-          name: "Excalidraw",
-          description:
-            "Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.",
-          icons: [
-            {
-              src: "android-chrome-192x192.png",
-              sizes: "192x192",
-              type: "image/png",
-            },
-            {
-              src: "apple-touch-icon.png",
-              type: "image/png",
-              sizes: "180x180",
-            },
-            {
-              src: "favicon-32x32.png",
-              sizes: "32x32",
-              type: "image/png",
-            },
-            {
-              src: "favicon-16x16.png",
-              sizes: "16x16",
-              type: "image/png",
-            },
-          ],
-          start_url: "/",
-          id:"excalidraw",
-          display: "standalone",
-          theme_color: "#121212",
-          background_color: "#ffffff",
-          file_handlers: [
-            {
-              action: "/",
-              accept: {
-                "application/vnd.excalidraw+json": [".excalidraw"],
-              },
-            },
-          ],
-          share_target: {
-            action: "/web-share-target",
-            method: "POST",
-            enctype: "multipart/form-data",
-            params: {
-              files: [
-                {
-                  name: "file",
-                  accept: [
-                    "application/vnd.excalidraw+json",
-                    "application/json",
-                    ".excalidraw",
-                  ],
-                },
-              ],
-            },
          },
-          screenshots: [
-            {
-              src: "/screenshots/virtual-whiteboard.png",
-              type: "image/png",
-              sizes: "462x945",
+          {
+            urlPattern: new RegExp("fonts.css"),
+            handler: "StaleWhileRevalidate",
+            options: {
+              cacheName: "fonts",
+              expiration: {
+                maxEntries: 50,
+              },
            },
-            {
-              src: "/screenshots/wireframe.png",
-              type: "image/png",
-              sizes: "462x945",
+          },
+          {
+            urlPattern: new RegExp("locales/[^/]+.js"),
+            handler: "CacheFirst",
+            options: {
+              cacheName: "locales",
+              expiration: {
+                maxEntries: 50,
+                maxAgeSeconds: 60 * 60 * 24 * 30, // <== 30 days
+              },
            },
-            {
-              src: "/screenshots/illustration.png",
-              type: "image/png",
-              sizes: "462x945",
+          },
+        ],
+      },
+      manifest: {
+        short_name: "Excalidraw",
+        name: "Excalidraw",
+        description:
+          "Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.",
+        icons: [
+          {
+            src: "android-chrome-192x192.png",
+            sizes: "192x192",
+            type: "image/png",
+          },
+          {
+            src: "apple-touch-icon.png",
+            type: "image/png",
+            sizes: "180x180",
+          },
+          {
+            src: "favicon-32x32.png",
+            sizes: "32x32",
+            type: "image/png",
+          },
+          {
+            src: "favicon-16x16.png",
+            sizes: "16x16",
+            type: "image/png",
+          },
+        ],
+        start_url: "/",
+        display: "standalone",
+        theme_color: "#121212",
+        background_color: "#ffffff",
+        file_handlers: [
+          {
+            action: "/",
+            accept: {
+              "application/vnd.excalidraw+json": [".excalidraw"],
            },
-            {
-              src: "/screenshots/shapes.png",
-              type: "image/png",
-              sizes: "462x945",
-            },
-            {
-              src: "/screenshots/collaboration.png",
-              type: "image/png",
-              sizes: "462x945",
-            },
-            {
-              src: "/screenshots/export.png",
-              type: "image/png",
-              sizes: "462x945",
-            },
-          ],
+          },
+        ],
+        share_target: {
+          action: "/web-share-target",
+          method: "POST",
+          enctype: "multipart/form-data",
+          params: {
+            files: [
+              {
+                name: "file",
+                accept: [
+                  "application/vnd.excalidraw+json",
+                  "application/json",
+                  ".excalidraw",
+                ],
+              },
+            ],
+          },
        },
-      }),
-      createHtmlPlugin({
-        minify: true,
-      }),
-    ],
-    publicDir: "../public",
-  };
+        screenshots: [
+          {
+            src: "/screenshots/virtual-whiteboard.png",
+            type: "image/png",
+            sizes: "462x945",
+          },
+          {
+            src: "/screenshots/wireframe.png",
+            type: "image/png",
+            sizes: "462x945",
+          },
+          {
+            src: "/screenshots/illustration.png",
+            type: "image/png",
+            sizes: "462x945",
+          },
+          {
+            src: "/screenshots/shapes.png",
+            type: "image/png",
+            sizes: "462x945",
+          },
+          {
+            src: "/screenshots/collaboration.png",
+            type: "image/png",
+            sizes: "462x945",
+          },
+          {
+            src: "/screenshots/export.png",
+            type: "image/png",
+            sizes: "462x945",
+          },
+        ],
+      },
+    }),
+    createHtmlPlugin({
+      minify: true,
+    }),
+  ],
+  publicDir: "../public",
 });
--- a/package.json
+++ b/package.json
@ -1,17 +1,26 @@
 {
  "private": true,
  "name": "excalidraw-monorepo",
-  "packageManager": "yarn@1.22.22",
  "workspaces": [
    "excalidraw-app",
    "packages/excalidraw",
    "packages/utils",
-    "packages/math",
    "examples/excalidraw",
    "examples/excalidraw/*"
  ],
+  "dependencies": {
+    "@excalidraw/random-username": "1.0.0",
+    "@sentry/browser": "6.2.5",
+    "@sentry/integrations": "6.2.5",
+    "firebase": "8.3.3",
+    "i18next-browser-languagedetector": "6.1.4",
+    "idb-keyval": "6.0.3",
+    "jotai": "1.13.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "socket.io-client": "4.7.2"
+  },
  "devDependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "7.21.11",
    "@excalidraw/eslint-config": "1.0.3",
    "@excalidraw/prettier-config": "1.0.2",
    "@types/chai": "4.3.0",
@ -21,8 +30,8 @@
    "@types/react-dom": "18.2.0",
    "@types/socket.io-client": "3.0.0",
    "@vitejs/plugin-react": "3.1.0",
-    "@vitest/coverage-v8": "2.0.5",
-    "@vitest/ui": "2.0.5",
+    "@vitest/coverage-v8": "0.33.0",
+    "@vitest/ui": "0.32.2",
    "chai": "4.3.6",
    "dotenv": "16.0.1",
    "eslint-config-prettier": "8.5.0",
@ -37,12 +46,12 @@
    "rewire": "6.0.0",
    "typescript": "4.9.4",
    "vite": "5.0.12",
-    "vite-plugin-checker": "0.7.2",
+    "vite-plugin-checker": "0.6.1",
    "vite-plugin-ejs": "1.7.0",
    "vite-plugin-pwa": "0.17.4",
-    "vite-plugin-svgr": "4.2.0",
-    "vitest": "2.0.5",
-    "vitest-canvas-mock": "0.3.3"
+    "vite-plugin-svgr": "2.4.0",
+    "vitest": "1.5.3",
+    "vitest-canvas-mock": "0.3.2"
  },
  "engines": {
    "node": "18.0.0 - 22.x.x"
@ -51,13 +60,19 @@
  "prettier": "@excalidraw/prettier-config",
  "scripts": {
    "build-node": "node ./scripts/build-node.js",
-    "build:app:docker": "yarn --cwd ./excalidraw-app build:app:docker",
-    "build:app": "yarn --cwd ./excalidraw-app build:app",
-    "build:version": "yarn --cwd ./excalidraw-app build:version",
+    "build:app:docker": "cross-env VITE_APP_DISABLE_SENTRY=true VITE_APP_DISABLE_TRACKING=true vite build",
+    "build:app": "cross-env VITE_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA vite build",
+    "build:version": "node ./scripts/build-version.js",
    "build": "yarn --cwd ./excalidraw-app build",
-    "build:preview": "yarn --cwd ./excalidraw-app build:preview",
+    "fix:code": "yarn test:code --fix",
+    "fix:other": "yarn prettier --write",
+    "fix": "yarn fix:other && yarn fix:code",
+    "locales-coverage": "node scripts/build-locales-coverage.js",
+    "locales-coverage:description": "node scripts/locales-coverage-description.js",
+    "prepare": "husky install",
+    "prettier": "prettier \"**/*.{css,scss,json,md,html,yml}\" --ignore-path=.eslintignore",
    "start": "yarn --cwd ./excalidraw-app start",
-    "start:production": "yarn --cwd ./excalidraw-app start:production",
+    "start:app:production": "npm run build && npx http-server build -a localhost -p 5001 -o",
    "test:all": "yarn test:typecheck && yarn test:code && yarn test:other && yarn test:app --watch=false",
    "test:app": "vitest",
    "test:code": "eslint --max-warnings=0 --ext .js,.ts,.tsx .",
@ -68,22 +83,9 @@
    "test:coverage": "vitest --coverage",
    "test:coverage:watch": "vitest --coverage --watch",
    "test:ui": "yarn test --ui --coverage.enabled=true",
-    "fix:code": "yarn test:code --fix",
-    "fix:other": "yarn prettier --write",
-    "fix": "yarn fix:other && yarn fix:code",
-    "locales-coverage": "node scripts/build-locales-coverage.js",
-    "locales-coverage:description": "node scripts/locales-coverage-description.js",
-    "prepare": "husky install",
-    "prettier": "prettier \"**/*.{css,scss,json,md,html,yml}\" --ignore-path=.eslintignore",
    "autorelease": "node scripts/autorelease.js",
    "prerelease:excalidraw": "node scripts/prerelease.js",
-    "release:excalidraw": "node scripts/release.js",
-    "rm:build": "rm -rf excalidraw-app/{build,dist,dev-dist} && rm -rf packages/*/{dist,build} && rm -rf examples/*/*/{build,dist}",
-    "rm:node_modules": "rm -rf node_modules && rm -rf excalidraw-app/node_modules && rm -rf packages/*/node_modules",
-    "clean-install": "yarn rm:node_modules && yarn install"
-  },
-  "resolutions": {
-    "@types/react": "18.2.0",
-    "strip-ansi": "6.0.1"
+    "build:preview": "yarn build && vite preview --port 5000",
+    "release:excalidraw": "node scripts/release.js"
  }
 }
--- a/packages/excalidraw/CHANGELOG.md
+++ b/packages/excalidraw/CHANGELOG.md
@ -15,16 +15,8 @@ Please add the latest change on the top under the correct section.

 ### Features

- Added hand-drawn font for Chinese, Japanese and Korean (CJK) as a fallback for Excalifont. Improved overal text wrapping algorithm, not only accounting for CJK, but covering various edge cases with white spaces and text-align center/right. Added support for multi-codepoint emojis wrapping. Offloaded SVG export to Web Workers, with an automatic fallback to the main thread if not supported or not desired.[#8530](https://github.com/excalidraw/excalidraw/pull/8530)
-
- Prefer user defined coordinates and dimensions when creating a frame using [`convertToExcalidrawElements`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/excalidraw-element-skeleton#converttoexcalidrawelements) [#8517](https://github.com/excalidraw/excalidraw/pull/8517)
-
- `props.initialData` can now be a function that returns `ExcalidrawInitialDataState` or `Promise<ExcalidrawInitialDataState>`. [#8107](https://github.com/excalidraw/excalidraw/pull/8135)
-
 - Added support for multiplayer undo/redo, by calculating invertible increments and storing them inside the local-only undo/redo stacks. [#7348](https://github.com/excalidraw/excalidraw/pull/7348)

- Added font picker component to have the ability to choose from a range of different fonts. Also, changed the default fonts to `Excalifont`, `Nunito` and `Comic Shanns` and deprecated `Virgil`, `Helvetica` and `Cascadia`.
-
 - `MainMenu.DefaultItems.ToggleTheme` now supports `onSelect(theme: string)` callback, and optionally `allowSystemTheme: boolean` alongside `theme: string` to indicate you want to allow users to set to system theme (you need to handle this yourself). [#7853](https://github.com/excalidraw/excalidraw/pull/7853)

 - Add `useHandleLibrary`'s `opts.adapter` as the new recommended pattern to handle library initialization and persistence on library updates. [#7655](https://github.com/excalidraw/excalidraw/pull/7655)
@ -43,8 +35,6 @@ Please add the latest change on the top under the correct section.

 ### Breaking Changes

- Stats container CSS changed, so if you're using `renderCustomStats`, you may need to adjust your styles to retain the same layout.
-
 - `updateScene` API has changed due to the added `Store` component as part of the multiplayer undo / redo initiative. Specifically, `sceneData` property `commitToHistory: boolean` was replaced with `storeAction: StoreActionType`. Make sure to update all instances of `updateScene` according to the _before / after_ table below. [#7898](https://github.com/excalidraw/excalidraw/pull/7898)

 |  | Before `commitToHistory` | After `storeAction` | Notes |
--- a/packages/excalidraw/actions/actionAlign.tsx
+++ b/packages/excalidraw/actions/actionAlign.tsx
@ -1,5 +1,4 @@
-import type { Alignment } from "../align";
-import { alignElements } from "../align";
+import { alignElements, Alignment } from "../align";
 import {
  AlignBottomIcon,
  AlignLeftIcon,
@ -11,18 +10,20 @@ import {
 import { ToolButton } from "../components/ToolButton";
 import { getNonDeletedElements } from "../element";
 import { isFrameLikeElement } from "../element/typeChecks";
-import type { ExcalidrawElement } from "../element/types";
+import { ExcalidrawElement } from "../element/types";
 import { updateFrameMembershipOfSelectedElements } from "../frame";
 import { t } from "../i18n";
 import { KEYS } from "../keys";
 import { isSomeElementSelected } from "../scene";
 import { StoreAction } from "../store";
-import type { AppClassProperties, AppState, UIAppState } from "../types";
+import { AppClassProperties, AppState, UIAppState } from "../types";
 import { arrayToMap, getShortcutKey } from "../utils";
 import { register } from "./register";

-export const alignActionsPredicate = (
+const alignActionsPredicate = (
+  elements: readonly ExcalidrawElement[],
  appState: UIAppState,
+  _: unknown,
  app: AppClassProperties,
 ) => {
  const selectedElements = app.scene.getSelectedElements(appState);
@ -46,7 +47,6 @@ const alignSelectedElements = (
    selectedElements,
    elementsMap,
    alignment,
-    app.scene,
  );

  const updatedElementsMap = arrayToMap(updatedElements);
@ -63,8 +63,7 @@ export const actionAlignTop = register({
  label: "labels.alignTop",
  icon: AlignTopIcon,
  trackEvent: { category: "element" },
-  predicate: (elements, appState, appProps, app) =>
-    alignActionsPredicate(appState, app),
+  predicate: alignActionsPredicate,
  perform: (elements, appState, _, app) => {
    return {
      appState,
@ -79,7 +78,7 @@ export const actionAlignTop = register({
    event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_UP,
  PanelComponent: ({ elements, appState, updateData, app }) => (
    <ToolButton
-      hidden={!alignActionsPredicate(appState, app)}
+      hidden={!alignActionsPredicate(elements, appState, null, app)}
      type="button"
      icon={AlignTopIcon}
      onClick={() => updateData(null)}
@ -97,8 +96,7 @@ export const actionAlignBottom = register({
  label: "labels.alignBottom",
  icon: AlignBottomIcon,
  trackEvent: { category: "element" },
-  predicate: (elements, appState, appProps, app) =>
-    alignActionsPredicate(appState, app),
+  predicate: alignActionsPredicate,
  perform: (elements, appState, _, app) => {
    return {
      appState,
@ -113,7 +111,7 @@ export const actionAlignBottom = register({
    event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_DOWN,
  PanelComponent: ({ elements, appState, updateData, app }) => (
    <ToolButton
-      hidden={!alignActionsPredicate(appState, app)}
+      hidden={!alignActionsPredicate(elements, appState, null, app)}
      type="button"
      icon={AlignBottomIcon}
      onClick={() => updateData(null)}
@ -131,8 +129,7 @@ export const actionAlignLeft = register({
  label: "labels.alignLeft",
  icon: AlignLeftIcon,
  trackEvent: { category: "element" },
-  predicate: (elements, appState, appProps, app) =>
-    alignActionsPredicate(appState, app),
+  predicate: alignActionsPredicate,
  perform: (elements, appState, _, app) => {
    return {
      appState,
@ -147,7 +144,7 @@ export const actionAlignLeft = register({
    event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_LEFT,
  PanelComponent: ({ elements, appState, updateData, app }) => (
    <ToolButton
-      hidden={!alignActionsPredicate(appState, app)}
+      hidden={!alignActionsPredicate(elements, appState, null, app)}
      type="button"
      icon={AlignLeftIcon}
      onClick={() => updateData(null)}
@ -165,8 +162,7 @@ export const actionAlignRight = register({
  label: "labels.alignRight",
  icon: AlignRightIcon,
  trackEvent: { category: "element" },
-  predicate: (elements, appState, appProps, app) =>
-    alignActionsPredicate(appState, app),
+  predicate: alignActionsPredicate,
  perform: (elements, appState, _, app) => {
    return {
      appState,
@ -181,7 +177,7 @@ export const actionAlignRight = register({
    event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === KEYS.ARROW_RIGHT,
  PanelComponent: ({ elements, appState, updateData, app }) => (
    <ToolButton
-      hidden={!alignActionsPredicate(appState, app)}
+      hidden={!alignActionsPredicate(elements, appState, null, app)}
      type="button"
      icon={AlignRightIcon}
      onClick={() => updateData(null)}
@ -199,8 +195,7 @@ export const actionAlignVerticallyCentered = register({
  label: "labels.centerVertically",
  icon: CenterVerticallyIcon,
  trackEvent: { category: "element" },
-  predicate: (elements, appState, appProps, app) =>
-    alignActionsPredicate(appState, app),
+  predicate: alignActionsPredicate,
  perform: (elements, appState, _, app) => {
    return {
      appState,
@ -213,7 +208,7 @@ export const actionAlignVerticallyCentered = register({
  },
  PanelComponent: ({ elements, appState, updateData, app }) => (
    <ToolButton
-      hidden={!alignActionsPredicate(appState, app)}
+      hidden={!alignActionsPredicate(elements, appState, null, app)}
      type="button"
      icon={CenterVerticallyIcon}
      onClick={() => updateData(null)}
@ -229,8 +224,7 @@ export const actionAlignHorizontallyCentered = register({
  label: "labels.centerHorizontally",
  icon: CenterHorizontallyIcon,
  trackEvent: { category: "element" },
-  predicate: (elements, appState, appProps, app) =>
-    alignActionsPredicate(appState, app),
+  predicate: alignActionsPredicate,
  perform: (elements, appState, _, app) => {
    return {
      appState,
@ -243,7 +237,7 @@ export const actionAlignHorizontallyCentered = register({
  },
  PanelComponent: ({ elements, appState, updateData, app }) => (
    <ToolButton
-      hidden={!alignActionsPredicate(appState, app)}
+      hidden={!alignActionsPredicate(elements, appState, null, app)}
      type="button"
      icon={CenterHorizontallyIcon}
      onClick={() => updateData(null)}
--- a/packages/excalidraw/actions/actionBoundText.tsx
+++ b/packages/excalidraw/actions/actionBoundText.tsx
@ -1,8 +1,8 @@
 import {
  BOUND_TEXT_PADDING,
  ROUNDNESS,
-  TEXT_ALIGN,
  VERTICAL_ALIGN,
+  TEXT_ALIGN,
 } from "../constants";
 import { isTextElement, newElement } from "../element";
 import { mutateElement } from "../element/mutateElement";
@ -10,6 +10,7 @@ import {
  computeBoundTextPosition,
  computeContainerDimensionForBoundText,
  getBoundTextElement,
+  measureText,
  redrawTextBoundingBox,
 } from "../element/textElement";
 import {
@ -22,19 +23,18 @@ import {
  isTextBindableContainer,
  isUsingAdaptiveRadius,
 } from "../element/typeChecks";
-import type {
+import {
  ExcalidrawElement,
  ExcalidrawLinearElement,
  ExcalidrawTextContainer,
  ExcalidrawTextElement,
 } from "../element/types";
-import type { AppState } from "../types";
-import type { Mutable } from "../utility-types";
+import { AppState } from "../types";
+import { Mutable } from "../utility-types";
 import { arrayToMap, getFontString } from "../utils";
 import { register } from "./register";
 import { syncMovedIndices } from "../fractionalIndex";
 import { StoreAction } from "../store";
-import { measureText } from "../element/textMeasurements";

 export const actionUnbindText = register({
  name: "unbindText",
@ -142,7 +142,6 @@ export const actionBindText = register({
      containerId: container.id,
      verticalAlign: VERTICAL_ALIGN.MIDDLE,
      textAlign: TEXT_ALIGN.CENTER,
-      autoResize: true,
    });
    mutateElement(container, {
      boundElements: (container.boundElements || []).concat({
@ -297,7 +296,6 @@ export const actionWrapTextInContainer = register({
            verticalAlign: VERTICAL_ALIGN.MIDDLE,
            boundElements: null,
            textAlign: TEXT_ALIGN.CENTER,
-            autoResize: true,
          },
          false,
        );
--- a/packages/excalidraw/actions/actionCanvas.tsx
+++ b/packages/excalidraw/actions/actionCanvas.tsx
@ -18,13 +18,13 @@ import {
  ZOOM_STEP,
 } from "../constants";
 import { getCommonBounds, getNonDeletedElements } from "../element";
-import type { ExcalidrawElement } from "../element/types";
+import { ExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
 import { CODES, KEYS } from "../keys";
 import { getNormalizedZoom } from "../scene";
 import { centerScrollOn } from "../scene/scroll";
 import { getStateForZoom } from "../scene/zoom";
-import type { AppState, Offsets } from "../types";
+import { AppState, NormalizedZoomValue } from "../types";
 import { getShortcutKey, updateActiveTool } from "../utils";
 import { register } from "./register";
 import { Tooltip } from "../components/Tooltip";
@ -35,10 +35,9 @@ import {
  isHandToolActive,
 } from "../appState";
 import { DEFAULT_CANVAS_BACKGROUND_PICKS } from "../colors";
-import type { SceneBounds } from "../element/bounds";
+import { SceneBounds } from "../element/bounds";
 import { setCursor } from "../cursor";
 import { StoreAction } from "../store";
-import { clamp, roundToStep } from "../../math";

 export const actionChangeViewBackgroundColor = register({
  name: "changeViewBackgroundColor",
@ -87,8 +86,7 @@ export const actionClearCanvas = register({
  predicate: (elements, appState, props, app) => {
    return (
      !!app.props.UIOptions.canvasActions.clearCanvas &&
-      !appState.viewModeEnabled &&
-      appState.openDialog?.name !== "elementLinkSelector"
+      !appState.viewModeEnabled
    );
  },
  perform: (elements, appState, _, app) => {
@ -106,9 +104,7 @@ export const actionClearCanvas = register({
        exportBackground: appState.exportBackground,
        exportEmbedScene: appState.exportEmbedScene,
        gridSize: appState.gridSize,
-        gridStep: appState.gridStep,
-        gridModeEnabled: appState.gridModeEnabled,
-        stats: appState.stats,
+        showStats: appState.showStats,
        pasteDialog: appState.pasteDialog,
        activeTool:
          appState.activeTool.type === "image"
@ -248,7 +244,6 @@ export const actionResetZoom = register({
 const zoomValueToFitBoundsOnViewport = (
  bounds: SceneBounds,
  viewportDimensions: { width: number; height: number },
-  viewportZoomFactor: number = 1, // default to 1 if not provided
 ) => {
  const [x1, y1, x2, y2] = bounds;
  const commonBoundsWidth = x2 - x1;
@ -256,89 +251,92 @@ const zoomValueToFitBoundsOnViewport = (
  const commonBoundsHeight = y2 - y1;
  const zoomValueForHeight = viewportDimensions.height / commonBoundsHeight;
  const smallestZoomValue = Math.min(zoomValueForWidth, zoomValueForHeight);
-
-  const adjustedZoomValue =
-    smallestZoomValue * clamp(viewportZoomFactor, 0.1, 1);
-
-  return Math.min(adjustedZoomValue, 1);
+  const zoomAdjustedToSteps =
+    Math.floor(smallestZoomValue / ZOOM_STEP) * ZOOM_STEP;
+  const clampedZoomValueToFitElements = Math.min(
+    Math.max(zoomAdjustedToSteps, MIN_ZOOM),
+    1,
+  );
+  return clampedZoomValueToFitElements as NormalizedZoomValue;
 };

 export const zoomToFitBounds = ({
  bounds,
  appState,
-  canvasOffsets,
  fitToViewport = false,
-  viewportZoomFactor = 1,
-  minZoom = -Infinity,
-  maxZoom = Infinity,
+  viewportZoomFactor = 0.7,
 }: {
  bounds: SceneBounds;
-  canvasOffsets?: Offsets;
  appState: Readonly<AppState>;
  /** whether to fit content to viewport (beyond >100%) */
  fitToViewport: boolean;
  /** zoom content to cover X of the viewport, when fitToViewport=true */
  viewportZoomFactor?: number;
-  minZoom?: number;
-  maxZoom?: number;
 }) => {
-  viewportZoomFactor = clamp(viewportZoomFactor, MIN_ZOOM, MAX_ZOOM);
-
  const [x1, y1, x2, y2] = bounds;
  const centerX = (x1 + x2) / 2;
  const centerY = (y1 + y2) / 2;

-  const canvasOffsetLeft = canvasOffsets?.left ?? 0;
-  const canvasOffsetTop = canvasOffsets?.top ?? 0;
-  const canvasOffsetRight = canvasOffsets?.right ?? 0;
-  const canvasOffsetBottom = canvasOffsets?.bottom ?? 0;
-
-  const effectiveCanvasWidth =
-    appState.width - canvasOffsetLeft - canvasOffsetRight;
-  const effectiveCanvasHeight =
-    appState.height - canvasOffsetTop - canvasOffsetBottom;
-
-  let adjustedZoomValue;
+  let newZoomValue;
+  let scrollX;
+  let scrollY;

  if (fitToViewport) {
    const commonBoundsWidth = x2 - x1;
    const commonBoundsHeight = y2 - y1;

-    adjustedZoomValue =
+    newZoomValue =
      Math.min(
-        effectiveCanvasWidth / commonBoundsWidth,
-        effectiveCanvasHeight / commonBoundsHeight,
-      ) * viewportZoomFactor;
+        appState.width / commonBoundsWidth,
+        appState.height / commonBoundsHeight,
+      ) * Math.min(1, Math.max(viewportZoomFactor, 0.1));
+
+    // Apply clamping to newZoomValue to be between 10% and 3000%
+    newZoomValue = Math.min(
+      Math.max(newZoomValue, MIN_ZOOM),
+      MAX_ZOOM,
+    ) as NormalizedZoomValue;
+
+    let appStateWidth = appState.width;
+
+    if (appState.openSidebar) {
+      const sidebarDOMElem = document.querySelector(
+        ".sidebar",
+      ) as HTMLElement | null;
+      const sidebarWidth = sidebarDOMElem?.offsetWidth ?? 0;
+      const isRTL = document.documentElement.getAttribute("dir") === "rtl";
+
+      appStateWidth = !isRTL
+        ? appState.width - sidebarWidth
+        : appState.width + sidebarWidth;
+    }
+
+    scrollX = (appStateWidth / 2) * (1 / newZoomValue) - centerX;
+    scrollY = (appState.height / 2) * (1 / newZoomValue) - centerY;
  } else {
-    adjustedZoomValue = zoomValueToFitBoundsOnViewport(
-      bounds,
-      {
-        width: effectiveCanvasWidth,
-        height: effectiveCanvasHeight,
-      },
-      viewportZoomFactor,
-    );
-  }
-
-  const newZoomValue = getNormalizedZoom(
-    clamp(roundToStep(adjustedZoomValue, ZOOM_STEP, "floor"), minZoom, maxZoom),
-  );
-
-  const centerScroll = centerScrollOn({
-    scenePoint: { x: centerX, y: centerY },
-    viewportDimensions: {
+    newZoomValue = zoomValueToFitBoundsOnViewport(bounds, {
      width: appState.width,
      height: appState.height,
-    },
-    offsets: canvasOffsets,
-    zoom: { value: newZoomValue },
-  });
+    });
+
+    const centerScroll = centerScrollOn({
+      scenePoint: { x: centerX, y: centerY },
+      viewportDimensions: {
+        width: appState.width,
+        height: appState.height,
+      },
+      zoom: { value: newZoomValue },
+    });
+
+    scrollX = centerScroll.scrollX;
+    scrollY = centerScroll.scrollY;
+  }

  return {
    appState: {
      ...appState,
-      scrollX: centerScroll.scrollX,
-      scrollY: centerScroll.scrollY,
+      scrollX,
+      scrollY,
      zoom: { value: newZoomValue },
    },
    storeAction: StoreAction.NONE,
@ -346,34 +344,25 @@ export const zoomToFitBounds = ({
 };

 export const zoomToFit = ({
-  canvasOffsets,
  targetElements,
  appState,
  fitToViewport,
  viewportZoomFactor,
-  minZoom,
-  maxZoom,
 }: {
-  canvasOffsets?: Offsets;
  targetElements: readonly ExcalidrawElement[];
  appState: Readonly<AppState>;
  /** whether to fit content to viewport (beyond >100%) */
  fitToViewport: boolean;
  /** zoom content to cover X of the viewport, when fitToViewport=true */
  viewportZoomFactor?: number;
-  minZoom?: number;
-  maxZoom?: number;
 }) => {
  const commonBounds = getCommonBounds(getNonDeletedElements(targetElements));

  return zoomToFitBounds({
-    canvasOffsets,
    bounds: commonBounds,
    appState,
    fitToViewport,
    viewportZoomFactor,
-    minZoom,
-    maxZoom,
  });
 };

@ -394,7 +383,6 @@ export const actionZoomToFitSelectionInViewport = register({
        userToFollow: null,
      },
      fitToViewport: false,
-      canvasOffsets: app.getEditorUIOffsets(),
    });
  },
  // NOTE shift-2 should have been assigned actionZoomToFitSelection.
@ -420,7 +408,6 @@ export const actionZoomToFitSelection = register({
        userToFollow: null,
      },
      fitToViewport: true,
-      canvasOffsets: app.getEditorUIOffsets(),
    });
  },
  // NOTE this action should use shift-2 per figma, alas
@ -437,7 +424,7 @@ export const actionZoomToFit = register({
  icon: zoomAreaIcon,
  viewMode: true,
  trackEvent: { category: "canvas" },
-  perform: (elements, appState, _, app) =>
+  perform: (elements, appState) =>
    zoomToFit({
      targetElements: elements,
      appState: {
@ -445,7 +432,6 @@ export const actionZoomToFit = register({
        userToFollow: null,
      },
      fitToViewport: false,
-      canvasOffsets: app.getEditorUIOffsets(),
    }),
  keyTest: (event) =>
    event.code === CODES.ONE &&
--- a/packages/excalidraw/actions/actionClipboard.tsx
+++ b/packages/excalidraw/actions/actionClipboard.tsx
@ -10,7 +10,7 @@ import {
 } from "../clipboard";
 import { actionDeleteSelected } from "./actionDeleteSelected";
 import { exportCanvas, prepareElementsForExport } from "../data/index";
-import { getTextFromElements, isTextElement } from "../element";
+import { isTextElement } from "../element";
 import { t } from "../i18n";
 import { isFirefox } from "../constants";
 import { DuplicateIcon, cutIcon, pngIcon, svgIcon } from "../components/icons";
@ -147,32 +147,14 @@ export const actionCopyAsSvg = register({
          name: app.getName(),
        },
      );
-
-      const selectedElements = app.scene.getSelectedElements({
-        selectedElementIds: appState.selectedElementIds,
-        includeBoundTextElement: true,
-        includeElementsInFrames: true,
-      });
-
      return {
-        appState: {
-          toast: {
-            message: t("toast.copyToClipboardAsSvg", {
-              exportSelection: selectedElements.length
-                ? t("toast.selection")
-                : t("toast.canvas"),
-              exportColorScheme: appState.exportWithDarkMode
-                ? t("buttons.darkMode")
-                : t("buttons.lightMode"),
-            }),
-          },
-        },
        storeAction: StoreAction.NONE,
      };
    } catch (error: any) {
      console.error(error);
      return {
        appState: {
+          ...appState,
          errorMessage: error.message,
        },
        storeAction: StoreAction.NONE,
@ -257,8 +239,16 @@ export const copyText = register({
      includeBoundTextElement: true,
    });

+    const text = selectedElements
+      .reduce((acc: string[], element) => {
+        if (isTextElement(element)) {
+          acc.push(element.text);
+        }
+        return acc;
+      }, [])
+      .join("\n\n");
    try {
-      copyTextToSystemClipboard(getTextFromElements(selectedElements));
+      copyTextToSystemClipboard(text);
    } catch (e) {
      throw new Error(t("errors.copyToSystemClipboardFailed"));
    }
--- a/packages/excalidraw/actions/actionCropEditor.tsx
+++ b/packages/excalidraw/actions/actionCropEditor.tsx
@ -1,55 +0,0 @@
-import { register } from "./register";
-import { cropIcon } from "../components/icons";
-import { StoreAction } from "../store";
-import { ToolButton } from "../components/ToolButton";
-import { t } from "../i18n";
-import { isImageElement } from "../element/typeChecks";
-import type { ExcalidrawImageElement } from "../element/types";
-
-export const actionToggleCropEditor = register({
-  name: "cropEditor",
-  label: "helpDialog.cropStart",
-  icon: cropIcon,
-  viewMode: true,
-  trackEvent: { category: "menu" },
-  keywords: ["image", "crop"],
-  perform(elements, appState, _, app) {
-    const selectedElement = app.scene.getSelectedElements({
-      selectedElementIds: appState.selectedElementIds,
-      includeBoundTextElement: true,
-    })[0] as ExcalidrawImageElement;
-
-    return {
-      appState: {
-        ...appState,
-        isCropping: false,
-        croppingElementId: selectedElement.id,
-      },
-      storeAction: StoreAction.CAPTURE,
-    };
-  },
-  predicate: (elements, appState, _, app) => {
-    const selectedElements = app.scene.getSelectedElements(appState);
-    if (
-      !appState.croppingElementId &&
-      selectedElements.length === 1 &&
-      isImageElement(selectedElements[0])
-    ) {
-      return true;
-    }
-    return false;
-  },
-  PanelComponent: ({ appState, updateData, app }) => {
-    const label = t("helpDialog.cropStart");
-
-    return (
-      <ToolButton
-        type="button"
-        icon={cropIcon}
-        title={label}
-        aria-label={label}
-        onClick={() => updateData(null)}
-      />
-    );
-  },
-});
--- a/packages/excalidraw/actions/actionDeleteSelected.test.tsx
+++ b/packages/excalidraw/actions/actionDeleteSelected.test.tsx
@ -1,211 +0,0 @@
-import React from "react";
-import { Excalidraw, mutateElement } from "../index";
-import { act, assertElements, render } from "../tests/test-utils";
-import { API } from "../tests/helpers/api";
-import { actionDeleteSelected } from "./actionDeleteSelected";
-
-const { h } = window;
-
-describe("deleting selected elements when frame selected should keep children + select them", () => {
-  beforeEach(async () => {
-    await render(<Excalidraw />);
-  });
-
-  it("frame only", async () => {
-    const f1 = API.createElement({
-      type: "frame",
-    });
-
-    const r1 = API.createElement({
-      type: "rectangle",
-      frameId: f1.id,
-    });
-
-    API.setElements([f1, r1]);
-
-    API.setSelectedElements([f1]);
-
-    act(() => {
-      h.app.actionManager.executeAction(actionDeleteSelected);
-    });
-
-    assertElements(h.elements, [
-      { id: f1.id, isDeleted: true },
-      { id: r1.id, isDeleted: false, selected: true },
-    ]);
-  });
-
-  it("frame + text container (text's frameId set)", async () => {
-    const f1 = API.createElement({
-      type: "frame",
-    });
-
-    const r1 = API.createElement({
-      type: "rectangle",
-      frameId: f1.id,
-    });
-
-    const t1 = API.createElement({
-      type: "text",
-      width: 200,
-      height: 100,
-      fontSize: 20,
-      containerId: r1.id,
-      frameId: f1.id,
-    });
-
-    mutateElement(r1, {
-      boundElements: [{ type: "text", id: t1.id }],
-    });
-
-    API.setElements([f1, r1, t1]);
-
-    API.setSelectedElements([f1]);
-
-    act(() => {
-      h.app.actionManager.executeAction(actionDeleteSelected);
-    });
-
-    assertElements(h.elements, [
-      { id: f1.id, isDeleted: true },
-      { id: r1.id, isDeleted: false, selected: true },
-      { id: t1.id, isDeleted: false },
-    ]);
-  });
-
-  it("frame + text container (text's frameId not set)", async () => {
-    const f1 = API.createElement({
-      type: "frame",
-    });
-
-    const r1 = API.createElement({
-      type: "rectangle",
-      frameId: f1.id,
-    });
-
-    const t1 = API.createElement({
-      type: "text",
-      width: 200,
-      height: 100,
-      fontSize: 20,
-      containerId: r1.id,
-      frameId: null,
-    });
-
-    mutateElement(r1, {
-      boundElements: [{ type: "text", id: t1.id }],
-    });
-
-    API.setElements([f1, r1, t1]);
-
-    API.setSelectedElements([f1]);
-
-    act(() => {
-      h.app.actionManager.executeAction(actionDeleteSelected);
-    });
-
-    assertElements(h.elements, [
-      { id: f1.id, isDeleted: true },
-      { id: r1.id, isDeleted: false, selected: true },
-      { id: t1.id, isDeleted: false },
-    ]);
-  });
-
-  it("frame + text container (text selected too)", async () => {
-    const f1 = API.createElement({
-      type: "frame",
-    });
-
-    const r1 = API.createElement({
-      type: "rectangle",
-      frameId: f1.id,
-    });
-
-    const t1 = API.createElement({
-      type: "text",
-      width: 200,
-      height: 100,
-      fontSize: 20,
-      containerId: r1.id,
-      frameId: null,
-    });
-
-    mutateElement(r1, {
-      boundElements: [{ type: "text", id: t1.id }],
-    });
-
-    API.setElements([f1, r1, t1]);
-
-    API.setSelectedElements([f1, t1]);
-
-    act(() => {
-      h.app.actionManager.executeAction(actionDeleteSelected);
-    });
-
-    assertElements(h.elements, [
-      { id: f1.id, isDeleted: true },
-      { id: r1.id, isDeleted: false, selected: true },
-      { id: t1.id, isDeleted: false },
-    ]);
-  });
-
-  it("frame + labeled arrow", async () => {
-    const f1 = API.createElement({
-      type: "frame",
-    });
-
-    const a1 = API.createElement({
-      type: "arrow",
-      frameId: f1.id,
-    });
-
-    const t1 = API.createElement({
-      type: "text",
-      width: 200,
-      height: 100,
-      fontSize: 20,
-      containerId: a1.id,
-      frameId: null,
-    });
-
-    mutateElement(a1, {
-      boundElements: [{ type: "text", id: t1.id }],
-    });
-
-    API.setElements([f1, a1, t1]);
-
-    API.setSelectedElements([f1, t1]);
-
-    act(() => {
-      h.app.actionManager.executeAction(actionDeleteSelected);
-    });
-
-    assertElements(h.elements, [
-      { id: f1.id, isDeleted: true },
-      { id: a1.id, isDeleted: false, selected: true },
-      { id: t1.id, isDeleted: false },
-    ]);
-  });
-
-  it("frame + children selected", async () => {
-    const f1 = API.createElement({
-      type: "frame",
-    });
-    const r1 = API.createElement({
-      type: "rectangle",
-      frameId: f1.id,
-    });
-    API.setElements([f1, r1]);
-
-    API.setSelectedElements([f1, r1]);
-
-    act(() => {
-      h.app.actionManager.executeAction(actionDeleteSelected);
-    });
-
-    assertElements(h.elements, [
-      { id: f1.id, isDeleted: true },
-      { id: r1.id, isDeleted: false, selected: true },
-    ]);
-  });
-});
--- a/packages/excalidraw/actions/actionDeleteSelected.tsx
+++ b/packages/excalidraw/actions/actionDeleteSelected.tsx
@ -4,27 +4,20 @@ import { ToolButton } from "../components/ToolButton";
 import { t } from "../i18n";
 import { register } from "./register";
 import { getNonDeletedElements } from "../element";
-import type { ExcalidrawElement } from "../element/types";
-import type { AppClassProperties, AppState } from "../types";
-import { mutateElement, newElementWith } from "../element/mutateElement";
-import { getElementsInGroup, selectGroupsForSelectedElements } from "../groups";
+import { ExcalidrawElement } from "../element/types";
+import { AppState } from "../types";
+import { newElementWith } from "../element/mutateElement";
+import { getElementsInGroup } from "../groups";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { fixBindingsAfterDeletion } from "../element/binding";
-import {
-  isBoundToContainer,
-  isElbowArrow,
-  isFrameLikeElement,
-} from "../element/typeChecks";
+import { isBoundToContainer, isFrameLikeElement } from "../element/typeChecks";
 import { updateActiveTool } from "../utils";
 import { TrashIcon } from "../components/icons";
 import { StoreAction } from "../store";
-import { getContainerElement } from "../element/textElement";
-import { getFrameChildren } from "../frame";

 const deleteSelectedElements = (
  elements: readonly ExcalidrawElement[],
  appState: AppState,
-  app: AppClassProperties,
 ) => {
  const framesToBeDeleted = new Set(
    getSelectedElements(
@ -33,141 +26,28 @@ const deleteSelectedElements = (
    ).map((el) => el.id),
  );

-  const selectedElementIds: Record<ExcalidrawElement["id"], true> = {};
-
-  const elementsMap = app.scene.getNonDeletedElementsMap();
-
-  const processedElements = new Set<ExcalidrawElement["id"]>();
-
-  for (const frameId of framesToBeDeleted) {
-    const frameChildren = getFrameChildren(elements, frameId);
-    for (const el of frameChildren) {
-      if (processedElements.has(el.id)) {
-        continue;
+  return {
+    elements: elements.map((el) => {
+      if (appState.selectedElementIds[el.id]) {
+        return newElementWith(el, { isDeleted: true });
      }

-      if (isBoundToContainer(el)) {
-        const containerElement = getContainerElement(el, elementsMap);
-        if (containerElement) {
-          selectedElementIds[containerElement.id] = true;
-        }
-      } else {
-        selectedElementIds[el.id] = true;
-      }
-      processedElements.add(el.id);
-    }
-  }
-
-  let shouldSelectEditingGroup = true;
-
-  const nextElements = elements.map((el) => {
-    if (appState.selectedElementIds[el.id]) {
-      const boundElement = isBoundToContainer(el)
-        ? getContainerElement(el, elementsMap)
-        : null;
-
      if (el.frameId && framesToBeDeleted.has(el.frameId)) {
-        shouldSelectEditingGroup = false;
-        selectedElementIds[el.id] = true;
-        return el;
+        return newElementWith(el, { isDeleted: true });
      }

      if (
-        boundElement?.frameId &&
-        framesToBeDeleted.has(boundElement?.frameId)
+        isBoundToContainer(el) &&
+        appState.selectedElementIds[el.containerId]
      ) {
-        return el;
+        return newElementWith(el, { isDeleted: true });
      }
-
-      if (el.boundElements) {
-        el.boundElements.forEach((candidate) => {
-          const bound = app.scene.getNonDeletedElementsMap().get(candidate.id);
-          if (bound && isElbowArrow(bound)) {
-            mutateElement(bound, {
-              startBinding:
-                el.id === bound.startBinding?.elementId
-                  ? null
-                  : bound.startBinding,
-              endBinding:
-                el.id === bound.endBinding?.elementId ? null : bound.endBinding,
-            });
-            mutateElement(bound, { points: bound.points });
-          }
-        });
-      }
-      return newElementWith(el, { isDeleted: true });
-    }
-
-    // if deleting a frame, remove the children from it and select them
-    if (el.frameId && framesToBeDeleted.has(el.frameId)) {
-      shouldSelectEditingGroup = false;
-      if (!isBoundToContainer(el)) {
-        selectedElementIds[el.id] = true;
-      }
-      return newElementWith(el, { frameId: null });
-    }
-
-    if (isBoundToContainer(el) && appState.selectedElementIds[el.containerId]) {
-      return newElementWith(el, { isDeleted: true });
-    }
-    return el;
-  });
-
-  let nextEditingGroupId = appState.editingGroupId;
-
-  // select next eligible element in currently editing group or supergroup
-  if (shouldSelectEditingGroup && appState.editingGroupId) {
-    const elems = getElementsInGroup(
-      nextElements,
-      appState.editingGroupId,
-    ).filter((el) => !el.isDeleted);
-    if (elems.length > 1) {
-      if (elems[0]) {
-        selectedElementIds[elems[0].id] = true;
-      }
-    } else {
-      nextEditingGroupId = null;
-      if (elems[0]) {
-        selectedElementIds[elems[0].id] = true;
-      }
-
-      const lastElementInGroup = elems[0];
-      if (lastElementInGroup) {
-        const editingGroupIdx = lastElementInGroup.groupIds.findIndex(
-          (groupId) => {
-            return groupId === appState.editingGroupId;
-          },
-        );
-        const superGroupId = lastElementInGroup.groupIds[editingGroupIdx + 1];
-        if (superGroupId) {
-          const elems = getElementsInGroup(nextElements, superGroupId).filter(
-            (el) => !el.isDeleted,
-          );
-          if (elems.length > 1) {
-            nextEditingGroupId = superGroupId;
-
-            elems.forEach((el) => {
-              selectedElementIds[el.id] = true;
-            });
-          }
-        }
-      }
-    }
-  }
-
-  return {
-    elements: nextElements,
+      return el;
+    }),
    appState: {
      ...appState,
-      ...selectGroupsForSelectedElements(
-        {
-          selectedElementIds,
-          editingGroupId: nextEditingGroupId,
-        },
-        nextElements,
-        appState,
-        null,
-      ),
+      selectedElementIds: {},
+      selectedGroupIds: {},
    },
  };
 };
@ -268,13 +148,11 @@ export const actionDeleteSelected = register({
        storeAction: StoreAction.CAPTURE,
      };
    }
-
    let { elements: nextElements, appState: nextAppState } =
-      deleteSelectedElements(elements, appState, app);
-
+      deleteSelectedElements(elements, appState);
    fixBindingsAfterDeletion(
      nextElements,
-      nextElements.filter((el) => el.isDeleted),
+      elements.filter(({ id }) => appState.selectedElementIds[id]),
    );

    nextAppState = handleGroupEditingState(nextAppState, nextElements);
--- a/packages/excalidraw/actions/actionDistribute.tsx
+++ b/packages/excalidraw/actions/actionDistribute.tsx
@ -3,17 +3,16 @@ import {
  DistributeVerticallyIcon,
 } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
-import type { Distribution } from "../distribute";
-import { distributeElements } from "../distribute";
+import { distributeElements, Distribution } from "../distribute";
 import { getNonDeletedElements } from "../element";
 import { isFrameLikeElement } from "../element/typeChecks";
-import type { ExcalidrawElement } from "../element/types";
+import { ExcalidrawElement } from "../element/types";
 import { updateFrameMembershipOfSelectedElements } from "../frame";
 import { t } from "../i18n";
 import { CODES, KEYS } from "../keys";
 import { isSomeElementSelected } from "../scene";
 import { StoreAction } from "../store";
-import type { AppClassProperties, AppState } from "../types";
+import { AppClassProperties, AppState } from "../types";
 import { arrayToMap, getShortcutKey } from "../utils";
 import { register } from "./register";

--- a/packages/excalidraw/actions/actionDuplicateSelection.test.tsx
+++ b/packages/excalidraw/actions/actionDuplicateSelection.test.tsx
@ -1,530 +0,0 @@
-import { Excalidraw } from "../index";
-import {
-  act,
-  assertElements,
-  getCloneByOrigId,
-  render,
-} from "../tests/test-utils";
-import { API } from "../tests/helpers/api";
-import { actionDuplicateSelection } from "./actionDuplicateSelection";
-import React from "react";
-import { ORIG_ID } from "../constants";
-
-const { h } = window;
-
-describe("actionDuplicateSelection", () => {
-  beforeEach(async () => {
-    await render(<Excalidraw />);
-  });
-
-  describe("duplicating frames", () => {
-    it("frame selected only", async () => {
-      const frame = API.createElement({
-        type: "frame",
-      });
-
-      const rectangle = API.createElement({
-        type: "rectangle",
-        frameId: frame.id,
-      });
-
-      API.setElements([frame, rectangle]);
-      API.setSelectedElements([frame]);
-
-      act(() => {
-        h.app.actionManager.executeAction(actionDuplicateSelection);
-      });
-
-      assertElements(h.elements, [
-        { id: frame.id },
-        { id: rectangle.id, frameId: frame.id },
-        { [ORIG_ID]: rectangle.id, frameId: getCloneByOrigId(frame.id)?.id },
-        { [ORIG_ID]: frame.id, selected: true },
-      ]);
-    });
-
-    it("frame selected only (with text container)", async () => {
-      const frame = API.createElement({
-        type: "frame",
-      });
-
-      const [rectangle, text] = API.createTextContainer({ frameId: frame.id });
-
-      API.setElements([frame, rectangle, text]);
-      API.setSelectedElements([frame]);
-
-      act(() => {
-        h.app.actionManager.executeAction(actionDuplicateSelection);
-      });
-
-      assertElements(h.elements, [
-        { id: frame.id },
-        { id: rectangle.id, frameId: frame.id },
-        { id: text.id, containerId: rectangle.id, frameId: frame.id },
-        { [ORIG_ID]: rectangle.id, frameId: getCloneByOrigId(frame.id)?.id },
-        {
-          [ORIG_ID]: text.id,
-          containerId: getCloneByOrigId(rectangle.id)?.id,
-          frameId: getCloneByOrigId(frame.id)?.id,
-        },
-        { [ORIG_ID]: frame.id, selected: true },
-      ]);
-    });
-
-    it("frame + text container selected (order A)", async () => {
-      const frame = API.createElement({
-        type: "frame",
-      });
-
-      const [rectangle, text] = API.createTextContainer({ frameId: frame.id });
-
-      API.setElements([frame, rectangle, text]);
-      API.setSelectedElements([frame, rectangle]);
-
-      act(() => {
-        h.app.actionManager.executeAction(actionDuplicateSelection);
-      });
-
-      assertElements(h.elements, [
-        { id: frame.id },
-        { id: rectangle.id, frameId: frame.id },
-        { id: text.id, containerId: rectangle.id, frameId: frame.id },
-        {
-          [ORIG_ID]: rectangle.id,
-          frameId: getCloneByOrigId(frame.id)?.id,
-        },
-        {
-          [ORIG_ID]: text.id,
-          containerId: getCloneByOrigId(rectangle.id)?.id,
-          frameId: getCloneByOrigId(frame.id)?.id,
-        },
-        {
-          [ORIG_ID]: frame.id,
-          selected: true,
-        },
-      ]);
-    });
-
-    it("frame + text container selected (order B)", async () => {
-      const frame = API.createElement({
-        type: "frame",
-      });
-
-      const [rectangle, text] = API.createTextContainer({ frameId: frame.id });
-
-      API.setElements([text, rectangle, frame]);
-      API.setSelectedElements([rectangle, frame]);
-
-      act(() => {
-        h.app.actionManager.executeAction(actionDuplicateSelection);
-      });
-
-      assertElements(h.elements, [
-        { id: rectangle.id, frameId: frame.id },
-        { id: text.id, containerId: rectangle.id, frameId: frame.id },
-        { id: frame.id },
-        {
-          type: "rectangle",
-          [ORIG_ID]: `${rectangle.id}`,
-        },
-        {
-          [ORIG_ID]: `${text.id}`,
-          type: "text",
-          containerId: getCloneByOrigId(rectangle.id)?.id,
-          frameId: getCloneByOrigId(frame.id)?.id,
-        },
-        { [ORIG_ID]: `${frame.id}`, type: "frame", selected: true },
-      ]);
-    });
-  });
-
-  describe("duplicating frame children", () => {
-    it("frame child selected", () => {
-      const frame = API.createElement({
-        type: "frame",
-      });
-
-      const rectangle = API.createElement({
-        type: "rectangle",
-        frameId: frame.id,
-      });
-
-      API.setElements([frame, rectangle]);
-      API.setSelectedElements([rectangle]);
-
-      act(() => {
-        h.app.actionManager.executeAction(actionDuplicateSelection);
-      });
-
-      assertElements(h.elements, [
-        { id: frame.id },
-        { id: rectangle.id, frameId: frame.id },
-        { [ORIG_ID]: rectangle.id, frameId: frame.id, selected: true },
-      ]);
-    });
-
-    it("frame text container selected (rectangle selected)", () => {
-      const frame = API.createElement({
-        type: "frame",
-      });
-
-      const [rectangle, text] = API.createTextContainer({ frameId: frame.id });
-
-      API.setElements([frame, rectangle, text]);
-      API.setSelectedElements([rectangle]);
-
-      act(() => {
-        h.app.actionManager.executeAction(actionDuplicateSelection);
-      });
-
-      assertElements(h.elements, [
-        { id: frame.id },
-        { id: rectangle.id, frameId: frame.id },
-        { id: text.id, containerId: rectangle.id, frameId: frame.id },
-        { [ORIG_ID]: rectangle.id, frameId: frame.id, selected: true },
-        {
-          [ORIG_ID]: text.id,
-          containerId: getCloneByOrigId(rectangle.id).id,
-          frameId: frame.id,
-        },
-      ]);
-    });
-
-    it("frame bound text selected (container not selected)", () => {
-      const frame = API.createElement({
-        type: "frame",
-      });
-
-      const [rectangle, text] = API.createTextContainer({ frameId: frame.id });
-
-      API.setElements([frame, rectangle, text]);
-      API.setSelectedElements([text]);
-
-      act(() => {
-        h.app.actionManager.executeAction(actionDuplicateSelection);
-      });
-
-      assertElements(h.elements, [
-        { id: frame.id },
-        { id: rectangle.id, frameId: frame.id },
-        { id: text.id, containerId: rectangle.id, frameId: frame.id },
-        { [ORIG_ID]: rectangle.id, frameId: frame.id, selected: true },
-        {
-          [ORIG_ID]: text.id,
-          containerId: getCloneByOrigId(rectangle.id).id,
-          frameId: frame.id,
-        },
-      ]);
-    });
-
-    it("frame text container selected (text not exists)", () => {
-      const frame = API.createElement({
-        type: "frame",
-      });
-
-      const [rectangle] = API.createTextContainer({ frameId: frame.id });
-
-      API.setElements([frame, rectangle]);
-      API.setSelectedElements([rectangle]);
-
-      act(() => {
-        h.app.actionManager.executeAction(actionDuplicateSelection);
-      });
-
-      assertElements(h.elements, [
-        { id: frame.id },
-        { id: rectangle.id, frameId: frame.id },
-        { [ORIG_ID]: rectangle.id, frameId: frame.id, selected: true },
-      ]);
-    });
-
-    // shouldn't happen
-    it("frame bound text selected (container not exists)", () => {
-      const frame = API.createElement({
-        type: "frame",
-      });
-
-      const [, text] = API.createTextContainer({ frameId: frame.id });
-
-      API.setElements([frame, text]);
-      API.setSelectedElements([text]);
-
-      act(() => {
-        h.app.actionManager.executeAction(actionDuplicateSelection);
-      });
-
-      assertElements(h.elements, [
-        { id: frame.id },
-        { id: text.id, frameId: frame.id },
-        { [ORIG_ID]: text.id, frameId: frame.id },
-      ]);
-    });
-
-    it("frame bound container selected (text has no frameId)", () => {
-      const frame = API.createElement({
-        type: "frame",
-      });
-
-      const [rectangle, text] = API.createTextContainer({
-        frameId: frame.id,
-        label: { frameId: null },
-      });
-
-      API.setElements([frame, rectangle, text]);
-      API.setSelectedElements([rectangle]);
-
-      act(() => {
-        h.app.actionManager.executeAction(actionDuplicateSelection);
-      });
-
-      assertElements(h.elements, [
-        { id: frame.id },
-        { id: rectangle.id, frameId: frame.id },
-        { id: text.id, containerId: rectangle.id },
-        { [ORIG_ID]: rectangle.id, frameId: frame.id, selected: true },
-        {
-          [ORIG_ID]: text.id,
-          containerId: getCloneByOrigId(rectangle.id).id,
-        },
-      ]);
-    });
-  });
-
-  describe("duplicating multiple frames", () => {
-    it("multiple frames selected (no children)", () => {
-      const frame1 = API.createElement({
-        type: "frame",
-      });
-
-      const rect1 = API.createElement({
-        type: "rectangle",
-        frameId: frame1.id,
-      });
-
-      const frame2 = API.createElement({
-        type: "frame",
-      });
-
-      const rect2 = API.createElement({
-        type: "rectangle",
-        frameId: frame2.id,
-      });
-
-      const ellipse = API.createElement({
-        type: "ellipse",
-      });
-
-      API.setElements([rect1, frame1, ellipse, rect2, frame2]);
-      API.setSelectedElements([frame1, frame2]);
-
-      act(() => {
-        h.app.actionManager.executeAction(actionDuplicateSelection);
-      });
-
-      assertElements(h.elements, [
-        { id: rect1.id, frameId: frame1.id },
-        { id: frame1.id },
-        { [ORIG_ID]: rect1.id, frameId: getCloneByOrigId(frame1.id)?.id },
-        { [ORIG_ID]: frame1.id, selected: true },
-        { id: ellipse.id },
-        { id: rect2.id, frameId: frame2.id },
-        { id: frame2.id },
-        { [ORIG_ID]: rect2.id, frameId: getCloneByOrigId(frame2.id)?.id },
-        { [ORIG_ID]: frame2.id, selected: true },
-      ]);
-    });
-
-    it("multiple frames selected (no children) + unrelated element", () => {
-      const frame1 = API.createElement({
-        type: "frame",
-      });
-
-      const rect1 = API.createElement({
-        type: "rectangle",
-        frameId: frame1.id,
-      });
-
-      const frame2 = API.createElement({
-        type: "frame",
-      });
-
-      const rect2 = API.createElement({
-        type: "rectangle",
-        frameId: frame2.id,
-      });
-
-      const ellipse = API.createElement({
-        type: "ellipse",
-      });
-
-      API.setElements([rect1, frame1, ellipse, rect2, frame2]);
-      API.setSelectedElements([frame1, ellipse, frame2]);
-
-      act(() => {
-        h.app.actionManager.executeAction(actionDuplicateSelection);
-      });
-
-      assertElements(h.elements, [
-        { id: rect1.id, frameId: frame1.id },
-        { id: frame1.id },
-        { [ORIG_ID]: rect1.id, frameId: getCloneByOrigId(frame1.id)?.id },
-        { [ORIG_ID]: frame1.id, selected: true },
-        { id: ellipse.id },
-        { [ORIG_ID]: ellipse.id, selected: true },
-        { id: rect2.id, frameId: frame2.id },
-        { id: frame2.id },
-        { [ORIG_ID]: rect2.id, frameId: getCloneByOrigId(frame2.id)?.id },
-        { [ORIG_ID]: frame2.id, selected: true },
-      ]);
-    });
-  });
-
-  describe("duplicating containers/bound elements", () => {
-    it("labeled arrow (arrow selected)", () => {
-      const [arrow, text] = API.createLabeledArrow();
-
-      API.setElements([arrow, text]);
-      API.setSelectedElements([arrow]);
-
-      act(() => {
-        h.app.actionManager.executeAction(actionDuplicateSelection);
-      });
-
-      assertElements(h.elements, [
-        { id: arrow.id },
-        { id: text.id, containerId: arrow.id },
-        { [ORIG_ID]: arrow.id, selected: true },
-        { [ORIG_ID]: text.id, containerId: getCloneByOrigId(arrow.id)?.id },
-      ]);
-    });
-
-    // shouldn't happen
-    it("labeled arrow (text selected)", () => {
-      const [arrow, text] = API.createLabeledArrow();
-
-      API.setElements([arrow, text]);
-      API.setSelectedElements([text]);
-
-      act(() => {
-        h.app.actionManager.executeAction(actionDuplicateSelection);
-      });
-
-      assertElements(h.elements, [
-        { id: arrow.id },
-        { id: text.id, containerId: arrow.id },
-        { [ORIG_ID]: arrow.id, selected: true },
-        { [ORIG_ID]: text.id, containerId: getCloneByOrigId(arrow.id)?.id },
-      ]);
-    });
-  });
-
-  describe("duplicating groups", () => {
-    it("duplicate group containing frame (children don't have groupIds set)", () => {
-      const frame = API.createElement({
-        type: "frame",
-        groupIds: ["A"],
-      });
-
-      const [rectangle, text] = API.createTextContainer({
-        frameId: frame.id,
-      });
-
-      const ellipse = API.createElement({
-        type: "ellipse",
-        groupIds: ["A"],
-      });
-
-      API.setElements([rectangle, text, frame, ellipse]);
-      API.setSelectedElements([frame, ellipse]);
-
-      act(() => {
-        h.app.actionManager.executeAction(actionDuplicateSelection);
-      });
-
-      assertElements(h.elements, [
-        { id: rectangle.id, frameId: frame.id },
-        { id: text.id, frameId: frame.id },
-        { id: frame.id },
-        { id: ellipse.id },
-        { [ORIG_ID]: rectangle.id, frameId: getCloneByOrigId(frame.id)?.id },
-        { [ORIG_ID]: text.id, frameId: getCloneByOrigId(frame.id)?.id },
-        { [ORIG_ID]: frame.id, selected: true },
-        { [ORIG_ID]: ellipse.id, selected: true },
-      ]);
-    });
-
-    it("duplicate group containing frame (children have groupIds)", () => {
-      const frame = API.createElement({
-        type: "frame",
-        groupIds: ["A"],
-      });
-
-      const [rectangle, text] = API.createTextContainer({
-        frameId: frame.id,
-        groupIds: ["A"],
-      });
-
-      const ellipse = API.createElement({
-        type: "ellipse",
-        groupIds: ["A"],
-      });
-
-      API.setElements([rectangle, text, frame, ellipse]);
-      API.setSelectedElements([frame, ellipse]);
-
-      act(() => {
-        h.app.actionManager.executeAction(actionDuplicateSelection);
-      });
-
-      assertElements(h.elements, [
-        { id: rectangle.id, frameId: frame.id },
-        { id: text.id, frameId: frame.id },
-        { id: frame.id },
-        { id: ellipse.id },
-        {
-          [ORIG_ID]: rectangle.id,
-          frameId: getCloneByOrigId(frame.id)?.id,
-          // FIXME shouldn't be selected (in selectGroupsForSelectedElements)
-          selected: true,
-        },
-        {
-          [ORIG_ID]: text.id,
-          frameId: getCloneByOrigId(frame.id)?.id,
-          // FIXME shouldn't be selected (in selectGroupsForSelectedElements)
-          selected: true,
-        },
-        { [ORIG_ID]: frame.id, selected: true },
-        { [ORIG_ID]: ellipse.id, selected: true },
-      ]);
-    });
-
-    it("duplicating element nested in group", () => {
-      const ellipse = API.createElement({
-        type: "ellipse",
-        groupIds: ["B"],
-      });
-      const rect1 = API.createElement({
-        type: "rectangle",
-        groupIds: ["A", "B"],
-      });
-      const rect2 = API.createElement({
-        type: "rectangle",
-        groupIds: ["A", "B"],
-      });
-
-      API.setElements([ellipse, rect1, rect2]);
-      API.setSelectedElements([ellipse], "B");
-
-      act(() => {
-        h.app.actionManager.executeAction(actionDuplicateSelection);
-      });
-
-      assertElements(h.elements, [
-        { id: ellipse.id },
-        { [ORIG_ID]: ellipse.id, groupIds: ["B"], selected: true },
-        { id: rect1.id, groupIds: ["A", "B"] },
-        { id: rect2.id, groupIds: ["A", "B"] },
-      ]);
-    });
-  });
-});
--- a/packages/excalidraw/actions/actionDuplicateSelection.tsx
+++ b/packages/excalidraw/actions/actionDuplicateSelection.tsx
@ -1,37 +1,26 @@
 import { KEYS } from "../keys";
 import { register } from "./register";
-import type { ExcalidrawElement } from "../element/types";
+import { ExcalidrawElement } from "../element/types";
 import { duplicateElement, getNonDeletedElements } from "../element";
 import { isSomeElementSelected } from "../scene";
 import { ToolButton } from "../components/ToolButton";
 import { t } from "../i18n";
-import {
-  arrayToMap,
-  castArray,
-  findLastIndex,
-  getShortcutKey,
-  invariant,
-} from "../utils";
+import { arrayToMap, getShortcutKey } from "../utils";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import {
  selectGroupsForSelectedElements,
  getSelectedGroupForElement,
  getElementsInGroup,
 } from "../groups";
-import type { AppState } from "../types";
+import { AppState } from "../types";
 import { fixBindingsAfterDuplication } from "../element/binding";
-import type { ActionResult } from "./types";
-import { DEFAULT_GRID_SIZE } from "../constants";
+import { ActionResult } from "./types";
+import { GRID_SIZE } from "../constants";
 import {
  bindTextToShapeAfterDuplication,
  getBoundTextElement,
-  getContainerElement,
 } from "../element/textElement";
-import {
-  hasBoundTextElement,
-  isBoundToContainer,
-  isFrameLikeElement,
-} from "../element/typeChecks";
+import { isBoundToContainer, isFrameLikeElement } from "../element/typeChecks";
 import { normalizeElementOrder } from "../element/sortElements";
 import { DuplicateIcon } from "../components/icons";
 import {
@ -42,6 +31,7 @@ import {
  excludeElementsInFramesFromSelection,
  getSelectedElements,
 } from "../scene/selection";
+import { syncMovedIndices } from "../fractionalIndex";
 import { StoreAction } from "../store";

 export const actionDuplicateSelection = register({
@ -50,39 +40,27 @@ export const actionDuplicateSelection = register({
  icon: DuplicateIcon,
  trackEvent: { category: "element" },
  perform: (elements, appState, formData, app) => {
+    const elementsMap = app.scene.getNonDeletedElementsMap();
    // duplicate selected point(s) if editing a line
    if (appState.editingLinearElement) {
-      // TODO: Invariants should be checked here instead of duplicateSelectedPoints()
-      try {
-        const newAppState = LinearElementEditor.duplicateSelectedPoints(
-          appState,
-          app.scene.getNonDeletedElementsMap(),
-        );
+      const ret = LinearElementEditor.duplicateSelectedPoints(
+        appState,
+        elementsMap,
+      );

-        return {
-          elements,
-          appState: newAppState,
-          storeAction: StoreAction.CAPTURE,
-        };
-      } catch {
+      if (!ret) {
        return false;
      }
-    }

-    const nextState = duplicateElements(elements, appState);
-
-    if (app.props.onDuplicate && nextState.elements) {
-      const mappedElements = app.props.onDuplicate(
-        nextState.elements,
+      return {
        elements,
-      );
-      if (mappedElements) {
-        nextState.elements = mappedElements;
-      }
+        appState: ret.appState,
+        storeAction: StoreAction.CAPTURE,
+      };
    }

    return {
-      ...nextState,
+      ...duplicateElements(elements, appState),
      storeAction: StoreAction.CAPTURE,
    };
  },
@ -104,69 +82,37 @@ export const actionDuplicateSelection = register({
 const duplicateElements = (
  elements: readonly ExcalidrawElement[],
  appState: AppState,
-): Partial<Exclude<ActionResult, false>> => {
+): Partial<ActionResult> => {
  // ---------------------------------------------------------------------------

+  // step (1)
+
+  const sortedElements = normalizeElementOrder(elements);
  const groupIdMap = new Map();
  const newElements: ExcalidrawElement[] = [];
  const oldElements: ExcalidrawElement[] = [];
  const oldIdToDuplicatedId = new Map();
  const duplicatedElementsMap = new Map<string, ExcalidrawElement>();

-  const elementsMap = arrayToMap(elements);
-
-  const duplicateAndOffsetElement = <
-    T extends ExcalidrawElement | ExcalidrawElement[],
-  >(
-    element: T,
-  ): T extends ExcalidrawElement[]
-    ? ExcalidrawElement[]
-    : ExcalidrawElement | null => {
-    const elements = castArray(element);
-
-    const _newElements = elements.reduce(
-      (acc: ExcalidrawElement[], element) => {
-        if (processedIds.has(element.id)) {
-          return acc;
-        }
-
-        processedIds.set(element.id, true);
-
-        const newElement = duplicateElement(
-          appState.editingGroupId,
-          groupIdMap,
-          element,
-          {
-            x: element.x + DEFAULT_GRID_SIZE / 2,
-            y: element.y + DEFAULT_GRID_SIZE / 2,
-          },
-        );
-
-        processedIds.set(newElement.id, true);
-
-        duplicatedElementsMap.set(newElement.id, newElement);
-        oldIdToDuplicatedId.set(element.id, newElement.id);
-
-        oldElements.push(element);
-        newElements.push(newElement);
-
-        acc.push(newElement);
-        return acc;
+  const duplicateAndOffsetElement = (element: ExcalidrawElement) => {
+    const newElement = duplicateElement(
+      appState.editingGroupId,
+      groupIdMap,
+      element,
+      {
+        x: element.x + GRID_SIZE / 2,
+        y: element.y + GRID_SIZE / 2,
      },
-      [],
    );
-
-    return (
-      Array.isArray(element) ? _newElements : _newElements[0] || null
-    ) as T extends ExcalidrawElement[]
-      ? ExcalidrawElement[]
-      : ExcalidrawElement | null;
+    duplicatedElementsMap.set(newElement.id, newElement);
+    oldIdToDuplicatedId.set(element.id, newElement.id);
+    oldElements.push(element);
+    newElements.push(newElement);
+    return newElement;
  };

-  elements = normalizeElementOrder(elements);
-
  const idsOfElementsToDuplicate = arrayToMap(
-    getSelectedElements(elements, appState, {
+    getSelectedElements(sortedElements, appState, {
      includeBoundTextElement: true,
      includeElementsInFrames: true,
    }),
@ -184,134 +130,123 @@ const duplicateElements = (
  // loop over them.
  const processedIds = new Map<ExcalidrawElement["id"], true>();

-  const elementsWithClones: ExcalidrawElement[] = elements.slice();
-
-  const insertAfterIndex = (
-    index: number,
-    elements: ExcalidrawElement | null | ExcalidrawElement[],
-  ) => {
-    invariant(index !== -1, "targetIndex === -1 ");
-
-    if (!Array.isArray(elements) && !elements) {
-      return;
+  const markAsProcessed = (elements: ExcalidrawElement[]) => {
+    for (const element of elements) {
+      processedIds.set(element.id, true);
    }
-
-    elementsWithClones.splice(index + 1, 0, ...castArray(elements));
+    return elements;
  };

-  const frameIdsToDuplicate = new Set(
-    elements
-      .filter(
-        (el) => idsOfElementsToDuplicate.has(el.id) && isFrameLikeElement(el),
-      )
-      .map((el) => el.id),
-  );
+  const elementsWithClones: ExcalidrawElement[] = [];

-  for (const element of elements) {
-    if (processedIds.has(element.id)) {
+  let index = -1;
+
+  while (++index < sortedElements.length) {
+    const element = sortedElements[index];
+
+    if (processedIds.get(element.id)) {
      continue;
    }

-    if (!idsOfElementsToDuplicate.has(element.id)) {
-      continue;
-    }
+    const boundTextElement = getBoundTextElement(element, arrayToMap(elements));
+    const isElementAFrameLike = isFrameLikeElement(element);

-    // groups
-    // -------------------------------------------------------------------------
+    if (idsOfElementsToDuplicate.get(element.id)) {
+      // if a group or a container/bound-text or frame, duplicate atomically
+      if (element.groupIds.length || boundTextElement || isElementAFrameLike) {
+        const groupId = getSelectedGroupForElement(appState, element);
+        if (groupId) {
+          // TODO:
+          // remove `.flatMap...`
+          // if the elements in a frame are grouped when the frame is grouped
+          const groupElements = getElementsInGroup(
+            sortedElements,
+            groupId,
+          ).flatMap((element) =>
+            isFrameLikeElement(element)
+              ? [...getFrameChildren(elements, element.id), element]
+              : [element],
+          );

-    const groupId = getSelectedGroupForElement(appState, element);
-    if (groupId) {
-      const groupElements = getElementsInGroup(elements, groupId).flatMap(
-        (element) =>
-          isFrameLikeElement(element)
-            ? [...getFrameChildren(elements, element.id), element]
-            : [element],
-      );
+          elementsWithClones.push(
+            ...markAsProcessed([
+              ...groupElements,
+              ...groupElements.map((element) =>
+                duplicateAndOffsetElement(element),
+              ),
+            ]),
+          );
+          continue;
+        }
+        if (boundTextElement) {
+          elementsWithClones.push(
+            ...markAsProcessed([
+              element,
+              boundTextElement,
+              duplicateAndOffsetElement(element),
+              duplicateAndOffsetElement(boundTextElement),
+            ]),
+          );
+          continue;
+        }
+        if (isElementAFrameLike) {
+          const elementsInFrame = getFrameChildren(sortedElements, element.id);

-      const targetIndex = findLastIndex(elementsWithClones, (el) => {
-        return el.groupIds?.includes(groupId);
-      });
+          elementsWithClones.push(
+            ...markAsProcessed([
+              ...elementsInFrame,
+              element,
+              ...elementsInFrame.map((e) => duplicateAndOffsetElement(e)),
+              duplicateAndOffsetElement(element),
+            ]),
+          );

-      insertAfterIndex(targetIndex, duplicateAndOffsetElement(groupElements));
-      continue;
-    }
-
-    // frame duplication
-    // -------------------------------------------------------------------------
-
-    if (element.frameId && frameIdsToDuplicate.has(element.frameId)) {
-      continue;
-    }
-
-    if (isFrameLikeElement(element)) {
-      const frameId = element.id;
-
-      const frameChildren = getFrameChildren(elements, frameId);
-
-      const targetIndex = findLastIndex(elementsWithClones, (el) => {
-        return el.frameId === frameId || el.id === frameId;
-      });
-
-      insertAfterIndex(
-        targetIndex,
-        duplicateAndOffsetElement([...frameChildren, element]),
-      );
-      continue;
-    }
-
-    // text container
-    // -------------------------------------------------------------------------
-
-    if (hasBoundTextElement(element)) {
-      const boundTextElement = getBoundTextElement(element, elementsMap);
-
-      const targetIndex = findLastIndex(elementsWithClones, (el) => {
-        return (
-          el.id === element.id ||
-          ("containerId" in el && el.containerId === element.id)
-        );
-      });
-
-      if (boundTextElement) {
-        insertAfterIndex(
-          targetIndex,
-          duplicateAndOffsetElement([element, boundTextElement]),
-        );
-      } else {
-        insertAfterIndex(targetIndex, duplicateAndOffsetElement(element));
+          continue;
+        }
      }
-
-      continue;
-    }
-
-    if (isBoundToContainer(element)) {
-      const container = getContainerElement(element, elementsMap);
-
-      const targetIndex = findLastIndex(elementsWithClones, (el) => {
-        return el.id === element.id || el.id === container?.id;
-      });
-
-      if (container) {
-        insertAfterIndex(
-          targetIndex,
-          duplicateAndOffsetElement([container, element]),
+      // since elements in frames have a lower z-index than the frame itself,
+      // they will be looped first and if their frames are selected as well,
+      // they will have been copied along with the frame atomically in the
+      // above branch, so we must skip those elements here
+      //
+      // now, for elements do not belong any frames or elements whose frames
+      // are selected (or elements that are left out from the above
+      // steps for whatever reason) we (should at least) duplicate them here
+      if (!element.frameId || !idsOfElementsToDuplicate.has(element.frameId)) {
+        elementsWithClones.push(
+          ...markAsProcessed([element, duplicateAndOffsetElement(element)]),
        );
-      } else {
-        insertAfterIndex(targetIndex, duplicateAndOffsetElement(element));
      }
-
-      continue;
+    } else {
+      elementsWithClones.push(...markAsProcessed([element]));
    }
-
-    // default duplication (regular elements)
-    // -------------------------------------------------------------------------
-
-    insertAfterIndex(
-      findLastIndex(elementsWithClones, (el) => el.id === element.id),
-      duplicateAndOffsetElement(element),
-    );
  }

+  // step (2)
+
+  // second pass to remove duplicates. We loop from the end as it's likelier
+  // that the last elements are in the correct order (contiguous or otherwise).
+  // Thus we need to reverse as the last step (3).
+
+  const finalElementsReversed: ExcalidrawElement[] = [];
+
+  const finalElementIds = new Map<ExcalidrawElement["id"], true>();
+  index = elementsWithClones.length;
+
+  while (--index >= 0) {
+    const element = elementsWithClones[index];
+    if (!finalElementIds.get(element.id)) {
+      finalElementIds.set(element.id, true);
+      finalElementsReversed.push(element);
+    }
+  }
+
+  // step (3)
+  const finalElements = syncMovedIndices(
+    finalElementsReversed.reverse(),
+    arrayToMap(newElements),
+  );
+
  // ---------------------------------------------------------------------------

  bindTextToShapeAfterDuplication(
@ -325,7 +260,7 @@ const duplicateElements = (
    oldIdToDuplicatedId,
  );
  bindElementsToFramesAfterDuplication(
-    elementsWithClones,
+    finalElements,
    oldElements,
    oldIdToDuplicatedId,
  );
@ -334,7 +269,7 @@ const duplicateElements = (
    excludeElementsInFramesFromSelection(newElements);

  return {
-    elements: elementsWithClones,
+    elements: finalElements,
    appState: {
      ...appState,
      ...selectGroupsForSelectedElements(
@ -350,7 +285,7 @@ const duplicateElements = (
            {},
          ),
        },
-        getNonDeletedElements(elementsWithClones),
+        getNonDeletedElements(finalElements),
        appState,
        null,
      ),
--- a/packages/excalidraw/actions/actionElementLink.ts
+++ b/packages/excalidraw/actions/actionElementLink.ts
@ -1,105 +0,0 @@
-import { copyTextToSystemClipboard } from "../clipboard";
-import { copyIcon, elementLinkIcon } from "../components/icons";
-import {
-  canCreateLinkFromElements,
-  defaultGetElementLinkFromSelection,
-  getLinkIdAndTypeFromSelection,
-} from "../element/elementLink";
-import { t } from "../i18n";
-import { getSelectedElements } from "../scene";
-import { StoreAction } from "../store";
-import { register } from "./register";
-
-export const actionCopyElementLink = register({
-  name: "copyElementLink",
-  label: "labels.copyElementLink",
-  icon: copyIcon,
-  trackEvent: { category: "element" },
-  perform: async (elements, appState, _, app) => {
-    const selectedElements = getSelectedElements(elements, appState);
-
-    try {
-      if (window.location) {
-        const idAndType = getLinkIdAndTypeFromSelection(
-          selectedElements,
-          appState,
-        );
-
-        if (idAndType) {
-          await copyTextToSystemClipboard(
-            app.props.generateLinkForSelection
-              ? app.props.generateLinkForSelection(idAndType.id, idAndType.type)
-              : defaultGetElementLinkFromSelection(
-                  idAndType.id,
-                  idAndType.type,
-                ),
-          );
-
-          return {
-            appState: {
-              toast: {
-                message: t("toast.elementLinkCopied"),
-                closable: true,
-              },
-            },
-            storeAction: StoreAction.NONE,
-          };
-        }
-        return {
-          appState,
-          elements,
-          app,
-          storeAction: StoreAction.NONE,
-        };
-      }
-    } catch (error: any) {
-      console.error(error);
-    }
-
-    return {
-      appState,
-      elements,
-      app,
-      storeAction: StoreAction.NONE,
-    };
-  },
-  predicate: (elements, appState) =>
-    canCreateLinkFromElements(getSelectedElements(elements, appState)),
-});
-
-export const actionLinkToElement = register({
-  name: "linkToElement",
-  label: "labels.linkToElement",
-  icon: elementLinkIcon,
-  perform: (elements, appState, _, app) => {
-    const selectedElements = getSelectedElements(elements, appState);
-
-    if (
-      selectedElements.length !== 1 ||
-      !canCreateLinkFromElements(selectedElements)
-    ) {
-      return { elements, appState, app, storeAction: StoreAction.NONE };
-    }
-
-    return {
-      appState: {
-        ...appState,
-        openDialog: {
-          name: "elementLinkSelector",
-          sourceElementId: getSelectedElements(elements, appState)[0].id,
-        },
-      },
-      storeAction: StoreAction.CAPTURE,
-    };
-  },
-  predicate: (elements, appState, appProps, app) => {
-    const selectedElements = getSelectedElements(elements, appState);
-
-    return (
-      appState.openDialog?.name !== "elementLinkSelector" &&
-      selectedElements.length === 1 &&
-      canCreateLinkFromElements(selectedElements)
-    );
-  },
-  trackEvent: false,
-});
--- a/packages/excalidraw/actions/actionElementLock.test.tsx
+++ b/packages/excalidraw/actions/actionElementLock.test.tsx
@ -1,4 +1,3 @@
-import React from "react";
 import { Excalidraw } from "../index";
 import { queryByTestId, fireEvent } from "@testing-library/react";
 import { render } from "../tests/test-utils";
--- a/packages/excalidraw/actions/actionElementLock.ts
+++ b/packages/excalidraw/actions/actionElementLock.ts
@ -1,7 +1,7 @@
 import { LockedIcon, UnlockedIcon } from "../components/icons";
 import { newElementWith } from "../element/mutateElement";
 import { isFrameLikeElement } from "../element/typeChecks";
-import type { ExcalidrawElement } from "../element/types";
+import { ExcalidrawElement } from "../element/types";
 import { KEYS } from "../keys";
 import { getSelectedElements } from "../scene";
 import { StoreAction } from "../store";
--- a/packages/excalidraw/actions/actionExport.tsx
+++ b/packages/excalidraw/actions/actionExport.tsx
@ -16,7 +16,7 @@ import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { getNonDeletedElements } from "../element";
 import { isImageFileHandle } from "../data/blob";
 import { nativeFileSystemSupported } from "../data/filesystem";
-import type { Theme } from "../element/types";
+import { Theme } from "../element/types";

 import "../components/ToolIcon.scss";
 import { StoreAction } from "../store";
--- a/packages/excalidraw/actions/actionFinalize.tsx
+++ b/packages/excalidraw/actions/actionFinalize.tsx
@ -6,17 +6,16 @@ import { done } from "../components/icons";
 import { t } from "../i18n";
 import { register } from "./register";
 import { mutateElement } from "../element/mutateElement";
+import { isPathALoop } from "../math";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import {
  maybeBindLinearElement,
  bindOrUnbindLinearElement,
 } from "../element/binding";
 import { isBindingElement, isLinearElement } from "../element/typeChecks";
-import type { AppState } from "../types";
+import { AppState } from "../types";
 import { resetCursor } from "../cursor";
 import { StoreAction } from "../store";
-import { pointFrom } from "../../math";
-import { isPathALoop } from "../shapes";

 export const actionFinalize = register({
  name: "finalize",
@ -39,7 +38,6 @@ export const actionFinalize = register({
            startBindingElement,
            endBindingElement,
            elementsMap,
-            scene,
          );
        }
        return {
@ -51,6 +49,7 @@ export const actionFinalize = register({
            ...appState,
            cursorButton: "up",
            editingLinearElement: null,
+            selectedLinearElement: null,
          },
          storeAction: StoreAction.CAPTURE,
        };
@ -73,8 +72,8 @@ export const actionFinalize = register({

    const multiPointElement = appState.multiElement
      ? appState.multiElement
-      : appState.newElement?.type === "freedraw"
-      ? appState.newElement
+      : appState.editingElement?.type === "freedraw"
+      ? appState.editingElement
      : null;

    if (multiPointElement) {
@ -113,10 +112,10 @@ export const actionFinalize = register({
          const linePoints = multiPointElement.points;
          const firstPoint = linePoints[0];
          mutateElement(multiPointElement, {
-            points: linePoints.map((p, index) =>
+            points: linePoints.map((point, index) =>
              index === linePoints.length - 1
-                ? pointFrom(firstPoint[0], firstPoint[1])
-                : p,
+                ? ([firstPoint[0], firstPoint[1]] as const)
+                : point,
            ),
          });
        }
@ -132,13 +131,7 @@ export const actionFinalize = register({
          -1,
          arrayToMap(elements),
        );
-        maybeBindLinearElement(
-          multiPointElement,
-          appState,
-          { x, y },
-          elementsMap,
-          elements,
-        );
+        maybeBindLinearElement(multiPointElement, appState, { x, y }, app);
      }
    }

@ -176,10 +169,9 @@ export const actionFinalize = register({
            ? appState.activeTool
            : activeTool,
        activeEmbeddable: null,
-        newElement: null,
-        selectionElement: null,
+        draggingElement: null,
        multiElement: null,
-        editingTextElement: null,
+        editingElement: null,
        startBoundElement: null,
        suggestedBindings: [],
        selectedElementIds:
@ -205,7 +197,7 @@ export const actionFinalize = register({
  keyTest: (event, appState) =>
    (event.key === KEYS.ESCAPE &&
      (appState.editingLinearElement !== null ||
-        (!appState.newElement && appState.multiElement === null))) ||
+        (!appState.draggingElement && appState.multiElement === null))) ||
    ((event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) &&
      appState.multiElement !== null),
  PanelComponent: ({ appState, updateData, data }) => (
@ -217,7 +209,6 @@ export const actionFinalize = register({
      onClick={updateData}
      visible={appState.multiElement != null}
      size={data?.size || "medium"}
-      style={{ pointerEvents: "all" }}
    />
  ),
 });
--- a/packages/excalidraw/actions/actionFlip.test.tsx
+++ b/packages/excalidraw/actions/actionFlip.test.tsx
@ -1,212 +0,0 @@
-import React from "react";
-import { Excalidraw } from "../index";
-import { render } from "../tests/test-utils";
-import { API } from "../tests/helpers/api";
-import { pointFrom } from "../../math";
-import { actionFlipHorizontal, actionFlipVertical } from "./actionFlip";
-
-const { h } = window;
-
-describe("flipping re-centers selection", () => {
-  it("elbow arrow touches group selection side yet it remains in place after multiple moves", async () => {
-    const elements = [
-      API.createElement({
-        type: "rectangle",
-        id: "rec1",
-        x: 100,
-        y: 100,
-        width: 100,
-        height: 100,
-        boundElements: [{ id: "arr", type: "arrow" }],
-      }),
-      API.createElement({
-        type: "rectangle",
-        id: "rec2",
-        x: 220,
-        y: 250,
-        width: 100,
-        height: 100,
-        boundElements: [{ id: "arr", type: "arrow" }],
-      }),
-      API.createElement({
-        type: "arrow",
-        id: "arr",
-        x: 149.9,
-        y: 95,
-        width: 156,
-        height: 239.9,
-        startBinding: {
-          elementId: "rec1",
-          focus: 0,
-          gap: 5,
-          fixedPoint: [0.49, -0.05],
-        },
-        endBinding: {
-          elementId: "rec2",
-          focus: 0,
-          gap: 5,
-          fixedPoint: [-0.05, 0.49],
-        },
-        startArrowhead: null,
-        endArrowhead: "arrow",
-        fixedSegments: null,
-        points: [
-          pointFrom(0, 0),
-          pointFrom(0, -35),
-          pointFrom(-90, -35),
-          pointFrom(-90, 204),
-          pointFrom(66, 204),
-        ],
-        elbowed: true,
-      }),
-    ];
-    await render(<Excalidraw initialData={{ elements }} />);
-
-    API.setSelectedElements(elements);
-
-    expect(Object.keys(h.state.selectedElementIds).length).toBe(3);
-
-    API.executeAction(actionFlipHorizontal);
-    API.executeAction(actionFlipHorizontal);
-    API.executeAction(actionFlipHorizontal);
-    API.executeAction(actionFlipHorizontal);
-
-    const rec1 = h.elements.find((el) => el.id === "rec1")!;
-    expect(rec1.x).toBeCloseTo(100, 0);
-    expect(rec1.y).toBeCloseTo(100, 0);
-
-    const rec2 = h.elements.find((el) => el.id === "rec2")!;
-    expect(rec2.x).toBeCloseTo(220, 0);
-    expect(rec2.y).toBeCloseTo(250, 0);
-  });
-});
-
-describe("flipping arrowheads", () => {
-  beforeEach(async () => {
-    await render(<Excalidraw />);
-  });
-
-  it("flipping bound arrow should flip arrowheads only", () => {
-    const rect = API.createElement({
-      type: "rectangle",
-      boundElements: [{ type: "arrow", id: "arrow1" }],
-    });
-    const arrow = API.createElement({
-      type: "arrow",
-      id: "arrow1",
-      startArrowhead: "arrow",
-      endArrowhead: null,
-      endBinding: {
-        elementId: rect.id,
-        focus: 0.5,
-        gap: 5,
-      },
-    });
-
-    API.setElements([rect, arrow]);
-    API.setSelectedElements([arrow]);
-
-    expect(API.getElement(arrow).startArrowhead).toBe("arrow");
-    expect(API.getElement(arrow).endArrowhead).toBe(null);
-
-    API.executeAction(actionFlipHorizontal);
-    expect(API.getElement(arrow).startArrowhead).toBe(null);
-    expect(API.getElement(arrow).endArrowhead).toBe("arrow");
-
-    API.executeAction(actionFlipHorizontal);
-    expect(API.getElement(arrow).startArrowhead).toBe("arrow");
-    expect(API.getElement(arrow).endArrowhead).toBe(null);
-
-    API.executeAction(actionFlipVertical);
-    expect(API.getElement(arrow).startArrowhead).toBe(null);
-    expect(API.getElement(arrow).endArrowhead).toBe("arrow");
-  });
-
-  it("flipping bound arrow should flip arrowheads only 2", () => {
-    const rect = API.createElement({
-      type: "rectangle",
-      boundElements: [{ type: "arrow", id: "arrow1" }],
-    });
-    const rect2 = API.createElement({
-      type: "rectangle",
-      boundElements: [{ type: "arrow", id: "arrow1" }],
-    });
-    const arrow = API.createElement({
-      type: "arrow",
-      id: "arrow1",
-      startArrowhead: "arrow",
-      endArrowhead: "circle",
-      startBinding: {
-        elementId: rect.id,
-        focus: 0.5,
-        gap: 5,
-      },
-      endBinding: {
-        elementId: rect2.id,
-        focus: 0.5,
-        gap: 5,
-      },
-    });
-
-    API.setElements([rect, rect2, arrow]);
-    API.setSelectedElements([arrow]);
-
-    expect(API.getElement(arrow).startArrowhead).toBe("arrow");
-    expect(API.getElement(arrow).endArrowhead).toBe("circle");
-
-    API.executeAction(actionFlipHorizontal);
-    expect(API.getElement(arrow).startArrowhead).toBe("circle");
-    expect(API.getElement(arrow).endArrowhead).toBe("arrow");
-
-    API.executeAction(actionFlipVertical);
-    expect(API.getElement(arrow).startArrowhead).toBe("arrow");
-    expect(API.getElement(arrow).endArrowhead).toBe("circle");
-  });
-
-  it("flipping unbound arrow shouldn't flip arrowheads", () => {
-    const arrow = API.createElement({
-      type: "arrow",
-      id: "arrow1",
-      startArrowhead: "arrow",
-      endArrowhead: "circle",
-    });
-
-    API.setElements([arrow]);
-    API.setSelectedElements([arrow]);
-
-    expect(API.getElement(arrow).startArrowhead).toBe("arrow");
-    expect(API.getElement(arrow).endArrowhead).toBe("circle");
-
-    API.executeAction(actionFlipHorizontal);
-    expect(API.getElement(arrow).startArrowhead).toBe("arrow");
-    expect(API.getElement(arrow).endArrowhead).toBe("circle");
-  });
-
-  it("flipping bound arrow shouldn't flip arrowheads if selected alongside non-arrow eleemnt", () => {
-    const rect = API.createElement({
-      type: "rectangle",
-      boundElements: [{ type: "arrow", id: "arrow1" }],
-    });
-    const arrow = API.createElement({
-      type: "arrow",
-      id: "arrow1",
-      startArrowhead: "arrow",
-      endArrowhead: null,
-      endBinding: {
-        elementId: rect.id,
-        focus: 0.5,
-        gap: 5,
-      },
-    });
-
-    API.setElements([rect, arrow]);
-    API.setSelectedElements([rect, arrow]);
-
-    expect(API.getElement(arrow).startArrowhead).toBe("arrow");
-    expect(API.getElement(arrow).endArrowhead).toBe(null);
-
-    API.executeAction(actionFlipHorizontal);
-    expect(API.getElement(arrow).startArrowhead).toBe("arrow");
-    expect(API.getElement(arrow).endArrowhead).toBe(null);
-  });
-});
--- a/packages/excalidraw/actions/actionFlip.ts
+++ b/packages/excalidraw/actions/actionFlip.ts
@ -1,17 +1,16 @@
 import { register } from "./register";
 import { getSelectedElements } from "../scene";
 import { getNonDeletedElements } from "../element";
-import type {
-  ExcalidrawArrowElement,
-  ExcalidrawElbowArrowElement,
+import {
  ExcalidrawElement,
  NonDeleted,
  NonDeletedSceneElementsMap,
 } from "../element/types";
 import { resizeMultipleElements } from "../element/resizeElements";
-import type { AppClassProperties, AppState } from "../types";
+import { AppClassProperties, AppState } from "../types";
 import { arrayToMap } from "../utils";
 import { CODES, KEYS } from "../keys";
+import { getCommonBoundingBox } from "../element/bounds";
 import {
  bindOrUnbindLinearElements,
  isBindingEnabled,
@ -19,14 +18,7 @@ import {
 import { updateFrameMembershipOfSelectedElements } from "../frame";
 import { flipHorizontal, flipVertical } from "../components/icons";
 import { StoreAction } from "../store";
-import {
-  isArrowElement,
-  isElbowArrow,
-  isLinearElement,
-} from "../element/typeChecks";
-import { mutateElement, newElementWith } from "../element/mutateElement";
-import { deepCopyElement } from "../element/newElement";
-import { getCommonBoundingBox } from "../element/bounds";
+import { isLinearElement } from "../element/typeChecks";

 export const actionFlipHorizontal = register({
  name: "flipHorizontal",
@ -117,88 +109,25 @@ const flipElements = (
  flipDirection: "horizontal" | "vertical",
  app: AppClassProperties,
 ): ExcalidrawElement[] => {
-  if (
-    selectedElements.every(
-      (element) =>
-        isArrowElement(element) && (element.startBinding || element.endBinding),
-    )
-  ) {
-    return selectedElements.map((element) => {
-      const _element = element as ExcalidrawArrowElement;
-      return newElementWith(_element, {
-        startArrowhead: _element.endArrowhead,
-        endArrowhead: _element.startArrowhead,
-      });
-    });
-  }
-
-  const { midX, midY } = getCommonBoundingBox(selectedElements);
+  const { minX, minY, maxX, maxY } = getCommonBoundingBox(selectedElements);

  resizeMultipleElements(
+    elementsMap,
    selectedElements,
    elementsMap,
    "nw",
-    app.scene,
-    new Map(
-      Array.from(elementsMap.values()).map((element) => [
-        element.id,
-        deepCopyElement(element),
-      ]),
-    ),
-    {
-      flipByX: flipDirection === "horizontal",
-      flipByY: flipDirection === "vertical",
-      shouldResizeFromCenter: true,
-      shouldMaintainAspectRatio: true,
-    },
+    true,
+    true,
+    flipDirection === "horizontal" ? maxX : minX,
+    flipDirection === "horizontal" ? minY : maxY,
  );

  bindOrUnbindLinearElements(
    selectedElements.filter(isLinearElement),
-    elementsMap,
-    app.scene.getNonDeletedElements(),
-    app.scene,
+    app,
    isBindingEnabled(appState),
    [],
-    appState.zoom,
  );

-  // ---------------------------------------------------------------------------
-  // flipping arrow elements (and potentially other) makes the selection group
-  // "move" across the canvas because of how arrows can bump against the "wall"
-  // of the selection, so we need to center the group back to the original
-  // position so that repeated flips don't accumulate the offset
-
-  const { elbowArrows, otherElements } = selectedElements.reduce(
-    (
-      acc: {
-        elbowArrows: ExcalidrawElbowArrowElement[];
-        otherElements: ExcalidrawElement[];
-      },
-      element,
-    ) =>
-      isElbowArrow(element)
-        ? { ...acc, elbowArrows: acc.elbowArrows.concat(element) }
-        : { ...acc, otherElements: acc.otherElements.concat(element) },
-    { elbowArrows: [], otherElements: [] },
-  );
-
-  const { midX: newMidX, midY: newMidY } =
-    getCommonBoundingBox(selectedElements);
-  const [diffX, diffY] = [midX - newMidX, midY - newMidY];
-  otherElements.forEach((element) =>
-    mutateElement(element, {
-      x: element.x + diffX,
-      y: element.y + diffY,
-    }),
-  );
-  elbowArrows.forEach((element) =>
-    mutateElement(element, {
-      x: element.x + diffX,
-      y: element.y + diffY,
-    }),
-  );
-  // ---------------------------------------------------------------------------
-
  return selectedElements;
 };
--- a/packages/excalidraw/actions/actionFrame.ts
+++ b/packages/excalidraw/actions/actionFrame.ts
@ -1,19 +1,15 @@
-import { getCommonBounds, getNonDeletedElements } from "../element";
-import type { ExcalidrawElement } from "../element/types";
-import { addElementsToFrame, removeAllElementsFromFrame } from "../frame";
+import { getNonDeletedElements } from "../element";
+import { ExcalidrawElement } from "../element/types";
+import { removeAllElementsFromFrame } from "../frame";
 import { getFrameChildren } from "../frame";
 import { KEYS } from "../keys";
-import type { AppClassProperties, AppState, UIAppState } from "../types";
+import { AppClassProperties, AppState, UIAppState } from "../types";
 import { updateActiveTool } from "../utils";
 import { setCursorForShape } from "../cursor";
 import { register } from "./register";
 import { isFrameLikeElement } from "../element/typeChecks";
 import { frameToolIcon } from "../components/icons";
 import { StoreAction } from "../store";
-import { getSelectedElements } from "../scene";
-import { newFrameElement } from "../element/newElement";
-import { getElementsInGroup } from "../groups";
-import { mutateElement } from "../element/mutateElement";

 const isSingleFrameSelected = (
  appState: UIAppState,
@ -148,67 +144,3 @@ export const actionSetFrameAsActiveTool = register({
    !event.altKey &&
    event.key.toLocaleLowerCase() === KEYS.F,
 });
-
-export const actionWrapSelectionInFrame = register({
-  name: "wrapSelectionInFrame",
-  label: "labels.wrapSelectionInFrame",
-  trackEvent: { category: "element" },
-  predicate: (elements, appState, _, app) => {
-    const selectedElements = getSelectedElements(elements, appState);
-
-    return (
-      selectedElements.length > 0 &&
-      !selectedElements.some((element) => isFrameLikeElement(element))
-    );
-  },
-  perform: (elements, appState, _, app) => {
-    const selectedElements = getSelectedElements(elements, appState);
-
-    const [x1, y1, x2, y2] = getCommonBounds(
-      selectedElements,
-      app.scene.getNonDeletedElementsMap(),
-    );
-    const PADDING = 16;
-    const frame = newFrameElement({
-      x: x1 - PADDING,
-      y: y1 - PADDING,
-      width: x2 - x1 + PADDING * 2,
-      height: y2 - y1 + PADDING * 2,
-    });
-
-    // for a selected partial group, we want to remove it from the remainder of the group
-    if (appState.editingGroupId) {
-      const elementsInGroup = getElementsInGroup(
-        selectedElements,
-        appState.editingGroupId,
-      );
-
-      for (const elementInGroup of elementsInGroup) {
-        const index = elementInGroup.groupIds.indexOf(appState.editingGroupId);
-
-        mutateElement(
-          elementInGroup,
-          {
-            groupIds: elementInGroup.groupIds.slice(0, index),
-          },
-          false,
-        );
-      }
-    }
-
-    const nextElements = addElementsToFrame(
-      [...app.scene.getElementsIncludingDeleted(), frame],
-      selectedElements,
-      frame,
-      appState,
-    );
-
-    return {
-      elements: nextElements,
-      appState: {
-        selectedElementIds: { [frame.id]: true },
-      },
-      storeAction: StoreAction.CAPTURE,
-    };
-  },
-});
--- a/packages/excalidraw/actions/actionGroup.tsx
+++ b/packages/excalidraw/actions/actionGroup.tsx
@ -17,18 +17,16 @@ import {
 import { getNonDeletedElements } from "../element";
 import { randomId } from "../random";
 import { ToolButton } from "../components/ToolButton";
-import type {
+import {
  ExcalidrawElement,
  ExcalidrawTextElement,
  OrderedExcalidrawElement,
 } from "../element/types";
-import type { AppClassProperties, AppState } from "../types";
+import { AppClassProperties, AppState } from "../types";
 import { isBoundToContainer } from "../element/typeChecks";
 import {
-  frameAndChildrenSelectedTogether,
  getElementsInResizingFrame,
  getFrameLikeElements,
-  getRootElements,
  groupByFrameLikes,
  removeElementsFromFrame,
  replaceAllElementsInFrame,
@ -62,11 +60,8 @@ const enableActionGroup = (
    selectedElementIds: appState.selectedElementIds,
    includeBoundTextElement: true,
  });
-
  return (
-    selectedElements.length >= 2 &&
-    !allElementsInSameGroup(selectedElements) &&
-    !frameAndChildrenSelectedTogether(selectedElements)
+    selectedElements.length >= 2 && !allElementsInSameGroup(selectedElements)
  );
 };

@ -76,12 +71,10 @@ export const actionGroup = register({
  icon: (appState) => <GroupIcon theme={appState.theme} />,
  trackEvent: { category: "element" },
  perform: (elements, appState, _, app) => {
-    const selectedElements = getRootElements(
-      app.scene.getSelectedElements({
-        selectedElementIds: appState.selectedElementIds,
-        includeBoundTextElement: true,
-      }),
-    );
+    const selectedElements = app.scene.getSelectedElements({
+      selectedElementIds: appState.selectedElementIds,
+      includeBoundTextElement: true,
+    });
    if (selectedElements.length < 2) {
      // nothing to group
      return { appState, elements, storeAction: StoreAction.NONE };
--- a/packages/excalidraw/actions/actionHistory.tsx
+++ b/packages/excalidraw/actions/actionHistory.tsx
@ -1,31 +1,25 @@
-import type { Action, ActionResult } from "./types";
+import { Action, ActionResult } from "./types";
 import { UndoIcon, RedoIcon } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
 import { t } from "../i18n";
-import type { History } from "../history";
-import { HistoryChangedEvent } from "../history";
-import type { AppClassProperties, AppState } from "../types";
-import { KEYS, matchKey } from "../keys";
+import { History, HistoryChangedEvent } from "../history";
+import { AppState } from "../types";
+import { KEYS } from "../keys";
 import { arrayToMap } from "../utils";
 import { isWindows } from "../constants";
-import type { SceneElementsMap } from "../element/types";
-import type { Store } from "../store";
-import { StoreAction } from "../store";
+import { SceneElementsMap } from "../element/types";
+import { Store, StoreAction } from "../store";
 import { useEmitter } from "../hooks/useEmitter";

-const executeHistoryAction = (
-  app: AppClassProperties,
+const writeData = (
  appState: Readonly<AppState>,
  updater: () => [SceneElementsMap, AppState] | void,
 ): ActionResult => {
  if (
    !appState.multiElement &&
    !appState.resizingElement &&
-    !appState.editingTextElement &&
-    !appState.newElement &&
-    !appState.selectedElementsAreBeingDragged &&
-    !appState.selectionElement &&
-    !app.flowChartCreator.isCreatingChart
+    !appState.editingElement &&
+    !appState.draggingElement
  ) {
    const result = updater();

@ -54,8 +48,8 @@ export const createUndoAction: ActionCreator = (history, store) => ({
  icon: UndoIcon,
  trackEvent: { category: "history" },
  viewMode: false,
-  perform: (elements, appState, value, app) =>
-    executeHistoryAction(app, appState, () =>
+  perform: (elements, appState) =>
+    writeData(appState, () =>
      history.undo(
        arrayToMap(elements) as SceneElementsMap, // TODO: #7348 refactor action manager to already include `SceneElementsMap`
        appState,
@ -63,14 +57,13 @@ export const createUndoAction: ActionCreator = (history, store) => ({
      ),
    ),
  keyTest: (event) =>
-    event[KEYS.CTRL_OR_CMD] && matchKey(event, KEYS.Z) && !event.shiftKey,
+    event[KEYS.CTRL_OR_CMD] &&
+    event.key.toLowerCase() === KEYS.Z &&
+    !event.shiftKey,
  PanelComponent: ({ updateData, data }) => {
    const { isUndoStackEmpty } = useEmitter<HistoryChangedEvent>(
      history.onHistoryChangedEmitter,
-      new HistoryChangedEvent(
-        history.isUndoStackEmpty,
-        history.isRedoStackEmpty,
-      ),
+      new HistoryChangedEvent(),
    );

    return (
@ -81,7 +74,6 @@ export const createUndoAction: ActionCreator = (history, store) => ({
        onClick={updateData}
        size={data?.size || "medium"}
        disabled={isUndoStackEmpty}
-        data-testid="button-undo"
      />
    );
  },
@ -93,8 +85,8 @@ export const createRedoAction: ActionCreator = (history, store) => ({
  icon: RedoIcon,
  trackEvent: { category: "history" },
  viewMode: false,
-  perform: (elements, appState, _, app) =>
-    executeHistoryAction(app, appState, () =>
+  perform: (elements, appState) =>
+    writeData(appState, () =>
      history.redo(
        arrayToMap(elements) as SceneElementsMap, // TODO: #7348 refactor action manager to already include `SceneElementsMap`
        appState,
@ -102,15 +94,14 @@ export const createRedoAction: ActionCreator = (history, store) => ({
      ),
    ),
  keyTest: (event) =>
-    (event[KEYS.CTRL_OR_CMD] && event.shiftKey && matchKey(event, KEYS.Z)) ||
-    (isWindows && event.ctrlKey && !event.shiftKey && matchKey(event, KEYS.Y)),
+    (event[KEYS.CTRL_OR_CMD] &&
+      event.shiftKey &&
+      event.key.toLowerCase() === KEYS.Z) ||
+    (isWindows && event.ctrlKey && !event.shiftKey && event.key === KEYS.Y),
  PanelComponent: ({ updateData, data }) => {
    const { isRedoStackEmpty } = useEmitter(
      history.onHistoryChangedEmitter,
-      new HistoryChangedEvent(
-        history.isUndoStackEmpty,
-        history.isRedoStackEmpty,
-      ),
+      new HistoryChangedEvent(),
    );

    return (
@ -121,7 +112,6 @@ export const createRedoAction: ActionCreator = (history, store) => ({
        onClick={updateData}
        size={data?.size || "medium"}
        disabled={isRedoStackEmpty}
-        data-testid="button-redo"
      />
    );
  },
--- a/packages/excalidraw/actions/actionLinearEditor.tsx
+++ b/packages/excalidraw/actions/actionLinearEditor.tsx
@ -1,12 +1,9 @@
 import { DEFAULT_CATEGORIES } from "../components/CommandPalette/CommandPalette";
 import { LinearElementEditor } from "../element/linearElementEditor";
-import { isElbowArrow, isLinearElement } from "../element/typeChecks";
-import type { ExcalidrawLinearElement } from "../element/types";
+import { isLinearElement } from "../element/typeChecks";
+import { ExcalidrawLinearElement } from "../element/types";
 import { StoreAction } from "../store";
 import { register } from "./register";
-import { ToolButton } from "../components/ToolButton";
-import { t } from "../i18n";
-import { lineEditorIcon } from "../components/icons";

 export const actionToggleLinearEditor = register({
  name: "toggleLinearEditor",
@ -14,24 +11,18 @@ export const actionToggleLinearEditor = register({
  label: (elements, appState, app) => {
    const selectedElement = app.scene.getSelectedElements({
      selectedElementIds: appState.selectedElementIds,
-    })[0] as ExcalidrawLinearElement | undefined;
-
-    return selectedElement?.type === "arrow"
-      ? "labels.lineEditor.editArrow"
+      includeBoundTextElement: true,
+    })[0] as ExcalidrawLinearElement;
+    return appState.editingLinearElement?.elementId === selectedElement?.id
+      ? "labels.lineEditor.exit"
      : "labels.lineEditor.edit";
  },
-  keywords: ["line"],
  trackEvent: {
    category: "element",
  },
  predicate: (elements, appState, _, app) => {
    const selectedElements = app.scene.getSelectedElements(appState);
-    if (
-      !appState.editingLinearElement &&
-      selectedElements.length === 1 &&
-      isLinearElement(selectedElements[0]) &&
-      !isElbowArrow(selectedElements[0])
-    ) {
+    if (selectedElements.length === 1 && isLinearElement(selectedElements[0])) {
      return true;
    }
    return false;
@ -54,24 +45,4 @@ export const actionToggleLinearEditor = register({
      storeAction: StoreAction.CAPTURE,
    };
  },
-  PanelComponent: ({ appState, updateData, app }) => {
-    const selectedElement = app.scene.getSelectedElements({
-      selectedElementIds: appState.selectedElementIds,
-    })[0] as ExcalidrawLinearElement;
-
-    const label = t(
-      selectedElement.type === "arrow"
-        ? "labels.lineEditor.editArrow"
-        : "labels.lineEditor.edit",
-    );
-    return (
-      <ToolButton
-        type="button"
-        icon={lineEditorIcon}
-        title={label}
-        aria-label={label}
-        onClick={() => updateData(null)}
-      />
-    );
-  },
 });
--- a/packages/excalidraw/actions/actionNavigate.tsx
+++ b/packages/excalidraw/actions/actionNavigate.tsx
@ -1,6 +1,6 @@
 import { getClientColor } from "../clients";
 import { Avatar } from "../components/Avatar";
-import type { GoToCollaboratorComponentProps } from "../components/UserList";
+import { GoToCollaboratorComponentProps } from "../components/UserList";
 import {
  eyeIcon,
  microphoneIcon,
@ -8,7 +8,7 @@ import {
 } from "../components/icons";
 import { t } from "../i18n";
 import { StoreAction } from "../store";
-import type { Collaborator } from "../types";
+import { Collaborator } from "../types";
 import { register } from "./register";
 import clsx from "clsx";

--- a/packages/excalidraw/actions/actionProperties.test.tsx
+++ b/packages/excalidraw/actions/actionProperties.test.tsx
@ -1,4 +1,3 @@
-import React from "react";
 import { Excalidraw } from "../index";
 import { queryByTestId } from "@testing-library/react";
 import { render } from "../tests/test-utils";
@ -7,6 +6,8 @@ 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 />);
@ -21,7 +22,7 @@ describe("element locking", () => {
      // just in case we change it in the future
      expect(color).not.toBe(COLOR_PALETTE.transparent);

-      API.setAppState({
+      h.setState({
        currentItemBackgroundColor: color,
      });
      const activeColor = queryByTestId(
@ -39,14 +40,14 @@ describe("element locking", () => {
      // just in case we change it in the future
      expect(color).not.toBe(COLOR_PALETTE.transparent);

-      API.setAppState({
+      h.setState({
        currentItemBackgroundColor: color,
        currentItemFillStyle: "hachure",
      });
      const hachureFillButton = queryByTestId(document.body, `fill-hachure`);

      expect(hachureFillButton).toHaveClass("active");
-      API.setAppState({
+      h.setState({
        currentItemFillStyle: "solid",
      });
      const solidFillStyle = queryByTestId(document.body, `fill-solid`);
@ -56,7 +57,7 @@ describe("element locking", () => {
    it("should not show fill style when background transparent", () => {
      UI.clickTool("rectangle");

-      API.setAppState({
+      h.setState({
        currentItemBackgroundColor: COLOR_PALETTE.transparent,
        currentItemFillStyle: "hachure",
      });
@ -68,7 +69,7 @@ describe("element locking", () => {
    it("should show horizontal text align for text tool", () => {
      UI.clickTool("text");

-      API.setAppState({
+      h.setState({
        currentItemTextAlign: "right",
      });

@ -84,7 +85,7 @@ describe("element locking", () => {
        backgroundColor: "red",
        fillStyle: "cross-hatch",
      });
-      API.setElements([rect]);
+      h.elements = [rect];
      API.setSelectedElements([rect]);

      const crossHatchButton = queryByTestId(document.body, `fill-cross-hatch`);
@ -97,7 +98,7 @@ describe("element locking", () => {
        backgroundColor: COLOR_PALETTE.transparent,
        fillStyle: "cross-hatch",
      });
-      API.setElements([rect]);
+      h.elements = [rect];
      API.setSelectedElements([rect]);

      const crossHatchButton = queryByTestId(document.body, `fill-cross-hatch`);
@ -113,7 +114,7 @@ describe("element locking", () => {
        type: "rectangle",
        strokeWidth: STROKE_WIDTH.thin,
      });
-      API.setElements([rect1, rect2]);
+      h.elements = [rect1, rect2];
      API.setSelectedElements([rect1, rect2]);

      const thinStrokeWidthButton = queryByTestId(
@ -132,7 +133,7 @@ describe("element locking", () => {
        type: "rectangle",
        strokeWidth: STROKE_WIDTH.bold,
      });
-      API.setElements([rect1, rect2]);
+      h.elements = [rect1, rect2];
      API.setSelectedElements([rect1, rect2]);

      expect(queryByTestId(document.body, `strokeWidth-thin`)).not.toBe(null);
@ -154,15 +155,13 @@ describe("element locking", () => {
      });
      const text = API.createElement({
        type: "text",
-        fontFamily: FONT_FAMILY["Comic Shanns"],
+        fontFamily: FONT_FAMILY.Cascadia,
      });
-      API.setElements([rect, text]);
+      h.elements = [rect, text];
      API.setSelectedElements([rect, text]);

      expect(queryByTestId(document.body, `strokeWidth-bold`)).toBeChecked();
-      expect(queryByTestId(document.body, `font-family-code`)).toHaveClass(
-        "active",
-      );
+      expect(queryByTestId(document.body, `font-family-code`)).toBeChecked();
    });
  });
 });
--- a/packages/excalidraw/actions/actionProperties.tsx
+++ b/packages/excalidraw/actions/actionProperties.tsx
--- a/packages/excalidraw/actions/actionSelectAll.ts
+++ b/packages/excalidraw/actions/actionSelectAll.ts
@ -2,9 +2,10 @@ import { KEYS } from "../keys";
 import { register } from "./register";
 import { selectGroupsForSelectedElements } from "../groups";
 import { getNonDeletedElements, isTextElement } from "../element";
-import type { ExcalidrawElement } from "../element/types";
+import { ExcalidrawElement } from "../element/types";
 import { isLinearElement } from "../element/typeChecks";
 import { LinearElementEditor } from "../element/linearElementEditor";
+import { excludeElementsInFramesFromSelection } from "../scene/selection";
 import { selectAllIcon } from "../components/icons";
 import { StoreAction } from "../store";

@ -19,17 +20,17 @@ export const actionSelectAll = register({
      return false;
    }

-    const selectedElementIds = elements
-      .filter(
+    const selectedElementIds = excludeElementsInFramesFromSelection(
+      elements.filter(
        (element) =>
          !element.isDeleted &&
          !(isTextElement(element) && element.containerId) &&
          !element.locked,
-      )
-      .reduce((map: Record<ExcalidrawElement["id"], true>, element) => {
-        map[element.id] = true;
-        return map;
-      }, {});
+      ),
+    ).reduce((map: Record<ExcalidrawElement["id"], true>, element) => {
+      map[element.id] = true;
+      return map;
+    }, {});

    return {
      appState: {
--- a/Show More
+++ b/Show More