Multiple base url fallbacks

Docs for font picker
2025-08-17 23:39:46 +02:00 · 2024-07-31 18:17:31 +02:00 · 2024-07-24 19:50:59 +02:00 · 2024-07-17 17:51:04 +02:00 · 2024-05-21 16:16:01 +01:00 · 2024-04-22 11:01:04 +01:00
488 changed files with 15431 additions and 37941 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
@@ -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

--- a/.env.production
+++ b/.env.production
@@ -14,4 +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_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,7 +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-globals": "off"
  }
 }
--- 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/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/constants.mdx
+++ b/dev-docs/docs/@excalidraw/excalidraw/api/constants.mdx
@@ -8,15 +8,15 @@
 import { FONT_FAMILY } from "@excalidraw/excalidraw";
 ```

-`FONT_FAMILY` contains all the font families used in `Excalidraw` as explained below
+`FONT_FAMILY` contains all the font families used in `Excalidraw`. The default families are the following:

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

-Defaults to `FONT_FAMILY.Virgil` unless passed in `initialData.appState.currentItemFontFamily`.
+Pre-selected family is `FONT_FAMILY.Excalifont`, unless it's overriden with `initialData.appState.currentItemFontFamily`.

 ### THEME

--- 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)}} />;
 }
 ```

@@ -65,7 +65,7 @@ You can use this function to update the scene with the sceneData. It accepts the
 | `elements` | [`ImportedDataState["elements"]`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/types.ts#L38) | The `elements` to be updated in the scene |
 | `appState` | [`ImportedDataState["appState"]`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/types.ts#L39) | The `appState` to be updated in the scene. |
 | `collaborators` | <code>Map<string, <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L37">Collaborator></a></code> | The list of collaborators to be updated in the scene. |
-| `commitToStore` | `boolean` | Implies if the change should be captured and commited to the `store`. Commited changes are emmitted and listened to by other components, such as `History` for undo / redo purposes. Defaults to `false`. |
+| `storeAction` | [`StoreAction`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/store.ts#L40) | Parameter to control which updates should be captured by the `Store`. Captured updates are emmitted as increments and listened to by other components, such as `History` for undo / redo purposes. |

 ```jsx live
 function App() {
@@ -105,6 +105,7 @@ function App() {
      appState: {
        viewBackgroundColor: "#edf2ff",
      },
+      storeAction: StoreAction.CAPTURE,
    };
    excalidrawAPI.updateScene(sceneData);
  };
@@ -115,12 +116,25 @@ function App() {
      <button className="custom-button" onClick={updateScene}>
        Update Scene
      </button>
-      <Excalidraw excalidrawAPI={(api) => setExcalidrawAPI(api)} />
+      <Excalidraw ref={(api) => setExcalidrawAPI(api)} />
    </div>
  );
 }
 ```

+#### storeAction
+
+You can use the `storeAction` to influence undo / redo behaviour.
+
+> **NOTE**: Some updates are not observed by the store / history - i.e. updates to `collaborators` object or parts of `AppState` which are not observed (not `ObservedAppState`). Such updates will never make it to the undo / redo stacks, regardless of the passed `storeAction` value.
+
+|  | `storeAction` value | Notes |
+| --- | --- | --- |
+| _Immediately undoable_ | `StoreAction.CAPTURE` | Use for updates which should be captured. Should be used for most of the local updates. These updates will _immediately_ make it to the local undo / redo stacks. |
+| _Eventually undoable_ | `StoreAction.NONE` | Use for updates which should not be captured immediately - likely exceptions which are part of some async multi-step process. Otherwise, all such updates would end up being captured with the next `StoreAction.CAPTURE` - triggered either by the next `updateScene` or internally by the editor. These updates will _eventually_ make it to the local undo / redo stacks. |
+| _Never undoable_ | `StoreAction.UPDATE` | Use for updates which should never be recorded, such as remote updates or scene initialization. These updates will _never_ make it to the local undo / redo stacks. |
+
+
 ### updateLibrary

 <pre>
@@ -188,7 +202,7 @@ function App() {
        Update Library
      </button>
      <Excalidraw
-        excalidrawAPI={(api) => setExcalidrawAPI(api)}
+        ref={(api) => setExcalidrawAPI(api)}
        // initial data retrieved from https://github.com/excalidraw/excalidraw/blob/master/dev-docs/packages/excalidraw/initialData.js
        initialData={{
          libraryItems: initialData.libraryItems,
--- a/dev-docs/docs/@excalidraw/excalidraw/api/props/props.mdx
+++ b/dev-docs/docs/@excalidraw/excalidraw/api/props/props.mdx
@@ -9,9 +9,9 @@ All `props` are _optional_.
 | [`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 |
+| [`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 something is pasted into the scene |
+| [`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 |
@@ -26,7 +26,7 @@ All `props` are _optional_.
 | [`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 |
+| [`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>` |
--- 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/api/utils/restore.mdx
+++ b/dev-docs/docs/@excalidraw/excalidraw/api/utils/restore.mdx
@@ -31,7 +31,7 @@ You can pass `null` / `undefined` if not applicable.
 restoreElements(
  elements: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">ImportedDataState["elements"]</a>,<br/>&nbsp;
  localElements: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">ExcalidrawElement[]</a> | null | undefined): <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">ExcalidrawElement[]</a>,<br/>&nbsp;
-  opts: &#123; refreshDimensions?: boolean, repairBindings?: boolean }<br/>
+  opts: &#123; refreshDimensions?: boolean, repairBindings?: boolean, normalizeIndices?: boolean }<br/>
 )
 </pre>

@@ -51,8 +51,9 @@ The extra optional parameter to configure restored elements. It has the followin

 | Prop | Type | Description|
 | --- | --- | ------|
-| `refreshDimensions` | `boolean` | Indicates whether we should also `recalculate` text element dimensions. Since this is a potentially costly operation, you may want to disable it if you restore elements in tight loops, such as during collaboration. |
-| `repairBindings` |`boolean` | Indicates whether the `bindings` for the elements should be repaired. This is to make sure there are no containers with non existent bound text element id and no bound text elements with non existent container id. |
+| `refreshDimensions` | `boolean` | Indicates whether we should also _recalculate_ text element dimensions. Since this is a potentially costly operation, you may want to disable it if you restore elements in tight loops, such as during collaboration. |
+| `repairBindings` |`boolean` | Indicates whether the _bindings_ for the elements should be repaired. This is to make sure there are no containers with non existent bound text element id and no bound text elements with non existent container id. |
+| `normalizeIndices` |`boolean` | Indicates whether _fractional indices_ for the elements should be normalized. This is to prevent possible issues caused by using stale (too old, too long) indices. |

 **_How to use_**

@@ -73,7 +74,7 @@ restore(
  data: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/types.ts#L34">ImportedDataState</a>,<br/>&nbsp;
  localAppState: Partial&lt;<a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95">AppState</a>> | null | undefined,<br/>&nbsp;
  localElements: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">ExcalidrawElement[]</a> | null | undefined<br/>): <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/types.ts#L4">DataState</a><br/>
-  opts: &#123; refreshDimensions?: boolean, repairBindings?: boolean }<br/>
+  opts: &#123; refreshDimensions?: boolean, repairBindings?: boolean, normalizeIndices?: boolean }<br/>

 )
 </pre>
--- a/dev-docs/docs/@excalidraw/excalidraw/installation.mdx
+++ b/dev-docs/docs/@excalidraw/excalidraw/installation.mdx
@@ -24,7 +24,7 @@ yarn add react react-dom @excalidraw/excalidraw

 Excalidraw depends on assets such as localization files (if you opt to use them), fonts, and others.

-By default these assets are loaded from a public CDN [`https://unpkg.com/@excalidraw/excalidraw/dist/`](https://unpkg.com/@excalidraw/excalidraw/dist), so you don't need to do anything on your end.
+By default these assets are loaded from a public CDN [`https://unpkg.com/@excalidraw/excalidraw/dist/prod/`](https://unpkg.com/@excalidraw/excalidraw/dist/prod/), so you don't need to do anything on your end.

 However, if you want to host these files yourself, you can find them in your `node_modules/@excalidraw/excalidraw/dist` directory, in folders `excalidraw-assets` (for production) and `excalidraw-assets-dev` (for development).

@@ -34,6 +34,26 @@ Copy these folders to your static assets directory, and add a `window.EXCALIDRAW
 window.EXCALIDRAW_ASSET_PATH = "/";
 ```

+or, if you serve your assets from the root of your CDN, you would do:
+
+```js
+// Vanilla
+<head>
+    <script>
+        window.EXCALIDRAW_ASSET_PATH = "https://my.cdn.com/assets/";
+    </script>    
+</head>
+```
+
+or, if you prefer the path to be dynamicly set based on the `location.origin`, you could do the following:
+
+```jsx
+// Next.js
+<Script id="load-env-variables" strategy="beforeInteractive" >
+    { `window["EXCALIDRAW_ASSET_PATH"] = location.origin;` } // or use just "/"!
+</Script>
+```
+
 ### Dimensions of Excalidraw

 Excalidraw takes _100%_ of `width` and `height` of the containing block so make sure the container in which you render Excalidraw has non zero dimensions.
--- 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/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"
@@ -2720,21 +2720,21 @@ binary-extensions@^2.0.0:
  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
  integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==

-body-parser@1.20.3:
-  version "1.20.3"
-  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.3.tgz#1953431221c6fb5cd63c4b36d53fab0928e548c6"
-  integrity sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==
+body-parser@1.20.0:
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.0.tgz#3de69bd89011c11573d7bfee6a64f11b6bd27cc5"
+  integrity sha512-DfJ+q6EPcGKZD1QWUjSpqp+Q7bDQTsQIF4zfUAtZ6qk+H/3/QRhg9CEp39ss+/T2vw0+HaidC0ecJj/DRLIaKg==
  dependencies:
    bytes "3.1.2"
-    content-type "~1.0.5"
+    content-type "~1.0.4"
    debug "2.6.9"
    depd "2.0.0"
    destroy "1.2.0"
    http-errors "2.0.0"
    iconv-lite "0.4.24"
    on-finished "2.4.1"
-    qs "6.13.0"
-    raw-body "2.5.2"
+    qs "6.10.3"
+    raw-body "2.5.1"
    type-is "~1.6.18"
    unpipe "1.0.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==
@@ -2861,17 +2854,6 @@ call-bind@^1.0.0:
    function-bind "^1.1.1"
    get-intrinsic "^1.0.2"

-call-bind@^1.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.7.tgz#06016599c40c56498c18769d2730be242b6fa3b9"
-  integrity sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==
-  dependencies:
-    es-define-property "^1.0.0"
-    es-errors "^1.3.0"
-    function-bind "^1.1.2"
-    get-intrinsic "^1.2.4"
-    set-function-length "^1.2.1"
-
 callsites@^3.0.0:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
@@ -3197,11 +3179,6 @@ content-type@~1.0.4:
  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
  integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==

-content-type@~1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.5.tgz#8b773162656d1d1086784c8f23a54ce6d73d7918"
-  integrity sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==
-
 convert-source-map@^1.7.0:
  version "1.8.0"
  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
@@ -3214,10 +3191,10 @@ cookie-signature@1.0.6:
  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
  integrity sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==

-cookie@0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.6.0.tgz#2798b04b071b0ecbff0dbb62a505a8efa4e19051"
-  integrity sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==
+cookie@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
+  integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==

 copy-text-to-clipboard@^3.0.1:
  version "3.0.1"
@@ -3494,15 +3471,6 @@ defer-to-connect@^1.0.1:
  resolved "https://registry.yarnpkg.com/defer-to-connect/-/defer-to-connect-1.1.3.tgz#331ae050c08dcf789f8c83a7b81f0ed94f4ac591"
  integrity sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ==

-define-data-property@^1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"
-  integrity sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==
-  dependencies:
-    es-define-property "^1.0.0"
-    es-errors "^1.3.0"
-    gopd "^1.0.1"
-
 define-lazy-prop@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f"
@@ -3760,11 +3728,6 @@ encodeurl@~1.0.2:
  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
  integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==

-encodeurl@~2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-2.0.0.tgz#7b8ea898077d7e409d3ac45474ea38eaf0857a58"
-  integrity sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==
-
 end-of-stream@^1.1.0:
  version "1.4.4"
  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
@@ -3797,18 +3760,6 @@ error-ex@^1.3.1:
  dependencies:
    is-arrayish "^0.2.1"

-es-define-property@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.0.tgz#c7faefbdff8b2696cf5f46921edfb77cc4ba3845"
-  integrity sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==
-  dependencies:
-    get-intrinsic "^1.2.4"
-
-es-errors@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
-  integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
-
 es-module-lexer@^0.9.0:
  version "0.9.3"
  resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-0.9.3.tgz#6f13db00cc38417137daf74366f535c8eb438f19"
@@ -3918,36 +3869,36 @@ execa@^5.0.0:
    strip-final-newline "^2.0.0"

 express@^4.17.3:
-  version "4.21.0"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.21.0.tgz#d57cb706d49623d4ac27833f1cbc466b668eb915"
-  integrity sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng==
+  version "4.18.1"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.18.1.tgz#7797de8b9c72c857b9cd0e14a5eea80666267caf"
+  integrity sha512-zZBcOX9TfehHQhtupq57OF8lFZ3UZi08Y97dwFCkD8p9d/d2Y3M+ykKcwaMDEL+4qyUolgBDX6AblpR3fL212Q==
  dependencies:
    accepts "~1.3.8"
    array-flatten "1.1.1"
-    body-parser "1.20.3"
+    body-parser "1.20.0"
    content-disposition "0.5.4"
    content-type "~1.0.4"
-    cookie "0.6.0"
+    cookie "0.5.0"
    cookie-signature "1.0.6"
    debug "2.6.9"
    depd "2.0.0"
-    encodeurl "~2.0.0"
+    encodeurl "~1.0.2"
    escape-html "~1.0.3"
    etag "~1.8.1"
-    finalhandler "1.3.1"
+    finalhandler "1.2.0"
    fresh "0.5.2"
    http-errors "2.0.0"
-    merge-descriptors "1.0.3"
+    merge-descriptors "1.0.1"
    methods "~1.1.2"
    on-finished "2.4.1"
    parseurl "~1.3.3"
-    path-to-regexp "0.1.10"
+    path-to-regexp "0.1.7"
    proxy-addr "~2.0.7"
-    qs "6.13.0"
+    qs "6.10.3"
    range-parser "~1.2.1"
    safe-buffer "5.2.1"
-    send "0.19.0"
-    serve-static "1.16.2"
+    send "0.18.0"
+    serve-static "1.15.0"
    setprototypeof "1.2.0"
    statuses "2.0.1"
    type-is "~1.6.18"
@@ -4060,20 +4011,13 @@ 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.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.3.1.tgz#0c575f1d1d324ddd1da35ad7ece3df7d19088019"
-  integrity sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==
+finalhandler@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.2.0.tgz#7d23fe5731b207b4640e4fcd00aec1f9207a7b32"
+  integrity sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==
  dependencies:
    debug "2.6.9"
-    encodeurl "~2.0.0"
+    encodeurl "~1.0.2"
    escape-html "~1.0.3"
    on-finished "2.4.1"
    parseurl "~1.3.3"
@@ -4198,11 +4142,6 @@ function-bind@^1.1.1:
  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==

-function-bind@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
-  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
-
 gensync@^1.0.0-beta.1, gensync@^1.0.0-beta.2:
  version "1.0.0-beta.2"
  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
@@ -4217,17 +4156,6 @@ get-intrinsic@^1.0.2, get-intrinsic@^1.1.1:
    has "^1.0.3"
    has-symbols "^1.0.3"

-get-intrinsic@^1.1.3, get-intrinsic@^1.2.4:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz#e385f5a4b5227d449c3eabbad05494ef0abbeadd"
-  integrity sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==
-  dependencies:
-    es-errors "^1.3.0"
-    function-bind "^1.1.2"
-    has-proto "^1.0.1"
-    has-symbols "^1.0.3"
-    hasown "^2.0.0"
-
 get-own-enumerable-property-symbols@^3.0.0:
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664"
@@ -4339,13 +4267,6 @@ globby@^13.1.1:
    merge2 "^1.4.1"
    slash "^4.0.0"

-gopd@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
-  integrity sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==
-  dependencies:
-    get-intrinsic "^1.1.3"
-
 got@^9.6.0:
  version "9.6.0"
  resolved "https://registry.yarnpkg.com/got/-/got-9.6.0.tgz#edf45e7d67f99545705de1f7bbeeeb121765ed85"
@@ -4407,18 +4328,6 @@ has-property-descriptors@^1.0.0:
  dependencies:
    get-intrinsic "^1.1.1"

-has-property-descriptors@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz#963ed7d071dc7bf5f084c5bfbe0d1b6222586854"
-  integrity sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==
-  dependencies:
-    es-define-property "^1.0.0"
-
-has-proto@^1.0.1:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.3.tgz#b31ddfe9b0e6e9914536a6ab286426d0214f77fd"
-  integrity sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==
-
 has-symbols@^1.0.1, has-symbols@^1.0.3:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
@@ -4436,13 +4345,6 @@ has@^1.0.3:
  dependencies:
    function-bind "^1.1.1"

-hasown@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
-  integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
-  dependencies:
-    function-bind "^1.1.2"
-
 hast-to-hyperscript@^9.0.0:
  version "9.0.1"
  resolved "https://registry.yarnpkg.com/hast-to-hyperscript/-/hast-to-hyperscript-9.0.1.tgz#9b67fd188e4c81e8ad66f803855334173920218d"
@@ -5284,10 +5186,10 @@ memfs@^3.1.2, memfs@^3.4.3:
  dependencies:
    fs-monkey "^1.0.3"

-merge-descriptors@1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.3.tgz#d80319a65f3c7935351e5cfdac8f9318504dbed5"
-  integrity sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==
+merge-descriptors@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
+  integrity sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==

 merge-stream@^2.0.0:
  version "2.0.0"
@@ -5305,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":
@@ -5509,10 +5411,10 @@ object-assign@^4.1.0, object-assign@^4.1.1:
  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
  integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==

-object-inspect@^1.13.1:
-  version "1.13.2"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.2.tgz#dea0088467fb991e67af4058147a24824a3043ff"
-  integrity sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==
+object-inspect@^1.9.0:
+  version "1.12.2"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.2.tgz#c0641f26394532f28ab8d796ab954e43c009a8ea"
+  integrity sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==

 object-keys@^1.1.1:
  version "1.1.1"
@@ -5754,10 +5656,10 @@ path-parse@^1.0.7:
  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==

-path-to-regexp@0.1.10:
-  version "0.1.10"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.10.tgz#67e9108c5c0551b9e5326064387de4763c4d5f8b"
-  integrity sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==
+path-to-regexp@0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
+  integrity sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==

 path-to-regexp@2.2.1:
  version "2.2.1"
@@ -6192,12 +6094,12 @@ pure-color@^1.2.0:
  resolved "https://registry.yarnpkg.com/pure-color/-/pure-color-1.3.0.tgz#1fe064fb0ac851f0de61320a8bf796836422f33e"
  integrity sha512-QFADYnsVoBMw1srW7OVKEYjG+MbIa49s54w1MA1EDY6r2r/sTcKKYqRX1f4GYvnXP7eN/Pe9HFcX+hwzmrXRHA==

-qs@6.13.0:
-  version "6.13.0"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.13.0.tgz#6ca3bd58439f7e245655798997787b0d88a51906"
-  integrity sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==
+qs@6.10.3:
+  version "6.10.3"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.3.tgz#d6cde1b2ffca87b5aa57889816c5f81535e22e8e"
+  integrity sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==
  dependencies:
-    side-channel "^1.0.6"
+    side-channel "^1.0.4"

 queue-microtask@^1.2.2:
  version "1.2.3"
@@ -6228,10 +6130,10 @@ range-parser@^1.2.1, range-parser@~1.2.1:
  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
  integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==

-raw-body@2.5.2:
-  version "2.5.2"
-  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.2.tgz#99febd83b90e08975087e8f1f9419a149366b68a"
-  integrity sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==
+raw-body@2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.1.tgz#fe1b1628b181b700215e5fd42389f98b71392857"
+  integrity sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==
  dependencies:
    bytes "3.1.2"
    http-errors "2.0.0"
@@ -6288,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"
@@ -6357,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"
@@ -6415,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"
@@ -6768,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"
@@ -6861,10 +6758,10 @@ semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7:
  dependencies:
    lru-cache "^6.0.0"

-send@0.19.0:
-  version "0.19.0"
-  resolved "https://registry.yarnpkg.com/send/-/send-0.19.0.tgz#bbc5a388c8ea6c048967049dbeac0e4a3f09d7f8"
-  integrity sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==
+send@0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be"
+  integrity sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==
  dependencies:
    debug "2.6.9"
    depd "2.0.0"
@@ -6914,27 +6811,15 @@ serve-index@^1.9.1:
    mime-types "~2.1.17"
    parseurl "~1.3.2"

-serve-static@1.16.2:
-  version "1.16.2"
-  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.16.2.tgz#b6a5343da47f6bdd2673848bf45754941e803296"
-  integrity sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==
+serve-static@1.15.0:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.15.0.tgz#faaef08cffe0a1a62f60cad0c4e513cff0ac9540"
+  integrity sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==
  dependencies:
-    encodeurl "~2.0.0"
+    encodeurl "~1.0.2"
    escape-html "~1.0.3"
    parseurl "~1.3.3"
-    send "0.19.0"
-
-set-function-length@^1.2.1:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
-  integrity sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==
-  dependencies:
-    define-data-property "^1.1.4"
-    es-errors "^1.3.0"
-    function-bind "^1.1.2"
-    get-intrinsic "^1.2.4"
-    gopd "^1.0.1"
-    has-property-descriptors "^1.0.2"
+    send "0.18.0"

 setimmediate@^1.0.5:
  version "1.0.5"
@@ -6989,15 +6874,14 @@ shelljs@^0.8.5:
    interpret "^1.0.0"
    rechoir "^0.6.2"

-side-channel@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.6.tgz#abd25fb7cd24baf45466406b1096b7831c9215f2"
-  integrity sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==
+side-channel@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
+  integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
  dependencies:
-    call-bind "^1.0.7"
-    es-errors "^1.3.0"
-    get-intrinsic "^1.2.4"
-    object-inspect "^1.13.1"
+    call-bind "^1.0.0"
+    get-intrinsic "^1.0.2"
+    object-inspect "^1.9.0"

 signal-exit@^3.0.2, signal-exit@^3.0.3:
  version "3.0.7"
--- a/examples/excalidraw/components/App.tsx
+++ b/examples/excalidraw/components/App.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,
@@ -872,7 +872,7 @@ export default function App({
                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 App({
                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 ../../../packages/excalidraw/dist/browser/prod/excalidraw-assets/*.woff2 ./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-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/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 ../../../packages/excalidraw/dist/browser/prod/excalidraw-assets/*.woff2 ./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,25 @@ 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 {
+} from "../packages/excalidraw/index";
+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 +50,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 +67,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,19 +94,22 @@ import {
 import { AppMainMenu } from "./components/AppMainMenu";
 import { AppWelcomeScreen } from "./components/AppWelcomeScreen";
 import { AppFooter } from "./components/AppFooter";
-import { Provider, useAtom, useAtomValue } from "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";
 import Trans from "../packages/excalidraw/components/Trans";
 import { ShareDialog, shareDialogStateAtom } from "./share/ShareDialog";
 import CollabError, { collabErrorIndicatorAtom } from "./collab/CollabError";
-import type { RemoteExcalidrawElement } from "../packages/excalidraw/data/reconcile";
+import {
+  RemoteExcalidrawElement,
+  reconcileElements,
+} from "../packages/excalidraw/data/reconcile";
 import {
  CommandPalette,
  DEFAULT_CATEGORIES,
@@ -118,51 +125,11 @@ import {
  youtubeIcon,
 } from "../packages/excalidraw/components/icons";
 import { appThemeAtom, 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";

 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) {
@@ -177,6 +144,11 @@ if (window.self !== window.top) {
  }
 }

+const languageDetector = new LanguageDetector();
+languageDetector.init({
+  languageUtils: {},
+});
+
 const shareableLinkConfirmDialog = {
  title: t("overwriteConfirm.modal.shareableLink.title"),
  description: (
@@ -322,15 +294,19 @@ 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 [appTheme, setAppTheme] = useAtom(appThemeAtom);
  const { editorTheme } = useHandleAppTheme();

-  const [langCode, setLangCode] = useAppLangCode();
-
  // initial state
  // ---------------------------------------------------------------------------

@@ -342,8 +318,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
@@ -369,23 +343,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;
@@ -481,7 +438,7 @@ const ExcalidrawWrapper = () => {
            excalidrawAPI.updateScene({
              ...data.scene,
              ...restore(data.scene, null, null, { repairBindings: true }),
-              storeAction: StoreAction.CAPTURE,
+              commitToStore: true,
            });
          }
        });
@@ -505,10 +462,13 @@ 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,
          });
          LibraryIndexedDBAdapter.load().then((data) => {
            if (data) {
@@ -606,6 +566,10 @@ const ExcalidrawWrapper = () => {
    };
  }, [excalidrawAPI]);

+  useEffect(() => {
+    languageDetector.cacheUserLanguage(langCode);
+  }, [langCode]);
+
  const onChange = (
    elements: readonly OrderedExcalidrawElement[],
    appState: AppState,
@@ -640,17 +604,11 @@ const ExcalidrawWrapper = () => {
          if (didChange) {
            excalidrawAPI.updateScene({
              elements,
-              storeAction: StoreAction.UPDATE,
            });
          }
        }
      });
    }
-
-    // Render the debug scene if the debug canvas is available
-    if (debugCanvasRef.current && excalidrawAPI) {
-      debugRenderer(debugCanvasRef.current, appState, window.devicePixelRatio);
-    }
  };

  const [latestShareableLink, setLatestShareableLink] = useState<string | null>(
@@ -849,7 +807,6 @@ const ExcalidrawWrapper = () => {
          isCollabEnabled={!isCollabDisabled}
          theme={appTheme}
          setTheme={(theme) => setAppTheme(theme)}
-          refresh={() => forceRefresh((prev) => !prev)}
        />
        <AppWelcomeScreen
          onCollabDialogOpen={onCollabDialogOpen}
@@ -875,9 +832,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">
@@ -1090,30 +1102,8 @@ 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>
  );
--- 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/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 { atom, useAtom } from "jotai";
-import { useEffect } from "react";
-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,25 +1,23 @@
 import throttle from "lodash.throttle";
 import { PureComponent } from "react";
-import type {
+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,
  InitializedExcalidrawImageElement,
  OrderedExcalidrawElement,
 } from "../../packages/excalidraw/element/types";
 import {
-  StoreAction,
  getSceneVersion,
  restoreElements,
  zoomToFitBounds,
-  reconcileElements,
-} from "../../packages/excalidraw";
-import type { Collaborator, Gesture } from "../../packages/excalidraw/types";
+} from "../../packages/excalidraw/index";
+import { Collaborator, Gesture } from "../../packages/excalidraw/types";
 import {
  assertNever,
  preventUnload,
@@ -36,14 +34,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,13 +75,14 @@ import { resetBrowserStateVersions } from "../data/tabSync";
 import { LocalData } from "../data/LocalData";
 import { atom } from "jotai";
 import { appJotaiStore } from "../app-jotai";
-import type { Mutable, ValueOf } from "../../packages/excalidraw/utility-types";
+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";
-import type {
+import {
  ReconciledExcalidrawElement,
  RemoteExcalidrawElement,
+  reconcileElements,
 } from "../../packages/excalidraw/data/reconcile";

 export const collabAPIAtom = atom<CollabAPI | null>(null);
@@ -359,7 +356,6 @@ class Collab extends PureComponent<CollabProps, CollabState> {

      this.excalidrawAPI.updateScene({
        elements,
-        storeAction: StoreAction.UPDATE,
      });
    }
  };
@@ -510,7 +506,6 @@ class Collab extends PureComponent<CollabProps, CollabState> {
      // to database even if deleted before creating the room.
      this.excalidrawAPI.updateScene({
        elements,
-        storeAction: StoreAction.UPDATE,
      });

      this.saveCollabRoomToFirebase(getSyncableElements(elements));
@@ -748,7 +743,6 @@ class Collab extends PureComponent<CollabProps, CollabState> {
  ) => {
    this.excalidrawAPI.updateScene({
      elements,
-      storeAction: StoreAction.UPDATE,
    });

    this.loadImageFiles();
--- 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,
@@ -19,7 +19,6 @@ import throttle from "lodash.throttle";
 import { newElementWith } from "../../packages/excalidraw/element/mutateElement";
 import { encryptData } from "../../packages/excalidraw/data/encryption";
 import type { Socket } from "socket.io-client";
-import { StoreAction } from "../../packages/excalidraw";

 class Portal {
  collab: TCollabClass;
@@ -116,26 +115,19 @@ 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;
+        }),
+    });
  }, 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,301 +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,
-) => {
-  const [normalizedWidth, normalizedHeight] = getNormalizedCanvasDimensions(
-    canvas,
-    scale,
-  );
-
-  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) => {
-    _debugRenderer(canvas, appState, scale);
-  },
-  { 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/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 { 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
@@ -1,15 +1,14 @@
-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,
@@ -239,6 +238,5 @@ export const updateStaleImageStatuses = (params: {
        }
        return element;
      }),
-    storeAction: StoreAction.UPDATE,
  });
 };
--- 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) {
--- a/excalidraw-app/data/firebase.ts
+++ b/excalidraw-app/data/firebase.ts
@@ -1,13 +1,12 @@
-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,11 +19,13 @@ 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";
+import {
+  RemoteExcalidrawElement,
+  reconcileElements,
+} from "../../packages/excalidraw/data/reconcile";

 // private
 // -----------------------------------------------------------------------------
--- 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";
@@ -269,6 +269,7 @@ export const loadScene = async (
    // in the scene database/localStorage, and instead fetch them async
    // from a different database
    files: data.files,
+    commitToStore: false,
  };
 };

--- 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,7 +51,7 @@
    />
    <meta
      property="twitter:image"
-      content="https://excalidraw.com/og-image-3.png"
+      content="https://excalidraw.com/og-twitter-v2.png"
    />

    <!-- General tags -->
@@ -95,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>
@@ -120,32 +115,8 @@
        window.location.href = "https://app.excalidraw.com";
      }
    </script>
-
-    <!-- Following placeholder is replaced during the build step -->
-    <!-- PLACEHOLDER:EXCALIDRAW_APP_FONTS -->
-
-    <% } else { %>
-    <script>
-      window.EXCALIDRAW_ASSET_PATH = window.origin;
-    </script>
    <% } %>

-    <!-- For Nunito only preload the latin range, which should be good enough for now -->
-    <link
-      rel="preload"
-      href="https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTQ3j6zbXWjgeg.woff2"
-      as="font"
-      type="font/woff2"
-      crossorigin="anonymous"
-    />
-
-    <!-- Register Assistant as the UI font, before the scene inits -->
-    <link
-      rel="stylesheet"
-      href="../packages/excalidraw/fonts/assets/fonts.css"
-      type="text/css"
-    />
-
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
@@ -153,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>
@@ -171,6 +158,7 @@
    </script>
    <% } %>
    <script>
+      window.EXCALIDRAW_ASSET_PATH = "/";
      // setting this so that libraries installation reuses this window tab.
      window.name = "_excalidraw";
    </script>
--- 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
@@ -26,28 +26,17 @@
    "node": ">=18.0.0"
  },
  "dependencies": {
-    "firebase": "8.3.3",
-    "idb-keyval": "6.0.3",
-    "jotai": "1.13.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "vite-plugin-html": "3.2.2",
-    "@excalidraw/random-username": "1.0.0",
-    "@sentry/browser": "6.2.5",
-    "@sentry/integrations": "6.2.5",
-    "i18next-browser-languagedetector": "6.1.4",
-    "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"
  }
 }
--- 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 { activeRoomLinkAtom, CollabAPI } from "../collab/Collab";
 import { atom, useAtom, useAtomValue } from "jotai";

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

 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";
@@ -11,7 +12,7 @@ import {
  createRedoAction,
  createUndoAction,
 } from "../../packages/excalidraw/actions/actionHistory";
-import { StoreAction, newElementWith } from "../../packages/excalidraw";
+import { newElementWith } from "../../packages/excalidraw";

 const { h } = window;

@@ -87,17 +88,17 @@ describe("collaboration", () => {
    const rect1 = API.createElement({ ...rect1Props });
    const rect2 = API.createElement({ ...rect2Props });

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

-    API.updateScene({
+    updateSceneData({
      elements: syncInvalidIndices([
        rect1,
        newElementWith(h.elements[1], { isDeleted: true }),
      ]),
-      storeAction: StoreAction.CAPTURE,
+      commitToStore: true,
    });

    await waitFor(() => {
@@ -142,9 +143,8 @@ describe("collaboration", () => {
    });

    // simulate force deleting the element remotely
-    API.updateScene({
+    updateSceneData({
      elements: syncInvalidIndices([rect1]),
-      storeAction: StoreAction.UPDATE,
    });

    await waitFor(() => {
@@ -177,12 +177,12 @@ 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 }),
      ]),
-      storeAction: StoreAction.CAPTURE,
+      commitToStore: true,
    });

    await waitFor(() => {
@@ -215,9 +215,8 @@ describe("collaboration", () => {
    });

    // simulate force deleting the element remotely
-    API.updateScene({
+    updateSceneData({
      elements: syncInvalidIndices([rect1]),
-      storeAction: StoreAction.UPDATE,
    });

    // snapshot was correctly updated and marked the element as deleted
--- a/excalidraw-app/useHandleAppTheme.ts
+++ b/excalidraw-app/useHandleAppTheme.ts
@@ -2,7 +2,7 @@ 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";

--- a/excalidraw-app/vite.config.mts
+++ b/excalidraw-app/vite.config.mts
@@ -5,7 +5,6 @@ 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 { woff2BrowserPlugin } from "../scripts/woff2/woff2-vite-plugins";

 // To load .env.local variables
 const envVars = loadEnv("", `../`);
@@ -23,14 +22,6 @@ export default defineConfig({
    outDir: "build",
    rollupOptions: {
      output: {
-        assetFileNames(chunkInfo) {
-          if (chunkInfo?.name?.endsWith(".woff2")) {
-            // put on root so we are flexible about the CDN path
-            return "[name]-[hash][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
@@ -50,7 +41,6 @@ export default defineConfig({
    sourcemap: true,
  },
  plugins: [
-    woff2BrowserPlugin(),
    react(),
    checker({
      typescript: true,
@@ -73,8 +63,8 @@ export default defineConfig({
      },

      workbox: {
-        // Don't push fonts, locales and wasm to app precache
-        globIgnores: ["fonts.css", "**/locales/**", "service-worker.js", "**/*.wasm-*.js"],
+        // Don't push fonts and locales to app precache
+        globIgnores: ["fonts.css", "**/locales/**", "service-worker.js"],
        runtimeCaching: [
          {
            urlPattern: new RegExp("/.+.(ttf|woff2|otf)"),
@@ -108,17 +98,6 @@ export default defineConfig({
              },
            },
          },
-          {
-            urlPattern: new RegExp(".wasm-.+.js"),
-            handler: "CacheFirst",
-            options: {
-              cacheName: "wasm",
-              expiration: {
-                maxEntries: 50,
-                maxAgeSeconds: 60 * 60 * 24 * 90, // <== 90 days
-              },
-            },
-          },
        ],
      },
      manifest: {
--- a/package.json
+++ b/package.json
@@ -1,28 +1,37 @@
 {
  "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",
    "@types/jest": "27.4.0",
    "@types/lodash.throttle": "4.1.7",
-    "@types/react": "18.2.0",
-    "@types/react-dom": "18.2.0",
+    "@types/react": "18.0.15",
+    "@types/react-dom": "18.0.6",
    "@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.0.1",
+    "vitest-canvas-mock": "0.3.2"
  },
  "engines": {
    "node": "18.0.0 - 20.x.x"
@@ -51,9 +60,9 @@
  "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",
    "fix:code": "yarn test:code --fix",
    "fix:other": "yarn prettier --write",
@@ -77,13 +86,6 @@
    "autorelease": "node scripts/autorelease.js",
    "prerelease:excalidraw": "node scripts/prerelease.js",
    "build:preview": "yarn build && vite preview --port 5000",
-    "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"
+    "release:excalidraw": "node scripts/release.js"
  }
 }
--- a/packages/excalidraw/CHANGELOG.md
+++ b/packages/excalidraw/CHANGELOG.md
@@ -15,12 +15,8 @@ Please add the latest change on the top under the correct section.

 ### Features

- `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)
@@ -33,21 +29,17 @@ Please add the latest change on the top under the correct section.

 - Expose `getVisibleSceneBounds` helper to get scene bounds of visible canvas area. [#7450](https://github.com/excalidraw/excalidraw/pull/7450)

+- Extended `window.EXCALIDRAW_ASSET_PATH` to accept array of paths `string[]` as a value, allowing to specify multiple base `URL` fallbacks. [#8286](https://github.com/excalidraw/excalidraw/pull/8286)
+
 ### Fixes

 - Keep customData when converting to ExcalidrawElement. [#7656](https://github.com/excalidraw/excalidraw/pull/7656)

 ### Breaking Changes

- Stats container CSS changed, so if you're using `renderCustomStats`, you may need to adjust your styles to retain the same layout.
+- Renamed required `updatedScene` parameter from `commitToHistory` into `commitToStore` [#7348](https://github.com/excalidraw/excalidraw/pull/7348).

- `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 |
-| --- | --- | --- | --- |
-| _Immediately undoable_ | `true` | `"capture"` | As before, use for all updates which should be recorded by the store & history. Should be used for the most of the local updates. These updates will _immediately_ make it to the local undo / redo stacks. |
-| _Eventually undoable_ | `false` | `"none"` | Similar to before, use for all updates which should not be recorded immediately (likely exceptions which are part of some async multi-step process) or those not meant to be recorded at all (i.e. updates to `collaborators` object, parts of `AppState` which are not observed by the store & history - not `ObservedAppState`).<br/><br/>**IMPORTANT** It's likely you should switch to `"update"` in all the other cases. Otherwise, all such updates would end up being recorded with the next `"capture"` - triggered either by the next `updateScene` or internally by the editor. These updates will _eventually_ make it to the local undo / redo stacks. |
-| _Never undoable_ | n/a | `"update"` | **NEW**: previously there was no equivalent for this value. Now, it's recommended to use `"update"` for all remote updates (from the other clients), scene initialization, or those updates, which should not be locally "undoable". These updates will _never_ make it to the local undo / redo stacks. |
+### Breaking Changes

 - `ExcalidrawEmbeddableElement.validated` was removed and moved to private editor state. This should largely not affect your apps unless you were reading from this attribute. We keep validating embeddable urls internally, and the public [`props.validateEmbeddable`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/props#validateembeddable) still applies. [#7539](https://github.com/excalidraw/excalidraw/pull/7539)

--- a/packages/excalidraw/README.md
+++ b/packages/excalidraw/README.md
@@ -20,7 +20,7 @@ After installation you will see a folder `excalidraw-assets` and `excalidraw-ass

 Move the folder `excalidraw-assets` and `excalidraw-assets-dev` to the path where your assets are served.

-By default it will try to load the files from [`https://unpkg.com/@excalidraw/excalidraw/dist/`](https://unpkg.com/@excalidraw/excalidraw/dist)
+By default it will try to load the files from [`https://unpkg.com/@excalidraw/excalidraw/dist/prod/`](https://unpkg.com/@excalidraw/excalidraw/dist/prod/)

 If you want to load assets from a different path you can set a variable `window.EXCALIDRAW_ASSET_PATH` depending on environment (for example if you have different URL's for dev and prod) to the url from where you want to load the assets.

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

--- 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";
@@ -23,14 +23,14 @@ 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";
@@ -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",
@@ -105,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"
@@ -247,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;
@@ -255,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,
@@ -345,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,
  });
 };

@@ -393,7 +383,6 @@ export const actionZoomToFitSelectionInViewport = register({
        userToFollow: null,
      },
      fitToViewport: false,
-      canvasOffsets: app.getEditorUIOffsets(),
    });
  },
  // NOTE shift-2 should have been assigned actionZoomToFitSelection.
@@ -419,7 +408,6 @@ export const actionZoomToFitSelection = register({
        userToFollow: null,
      },
      fitToViewport: true,
-      canvasOffsets: app.getEditorUIOffsets(),
    });
  },
  // NOTE this action should use shift-2 per figma, alas
@@ -436,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: {
@@ -444,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";
@@ -239,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/actionDeleteSelected.tsx
+++ b/packages/excalidraw/actions/actionDeleteSelected.tsx
@@ -4,28 +4,21 @@ 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 { 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 { mutateElbowArrow } from "../element/routing";

 const deleteSelectedElements = (
  elements: readonly ExcalidrawElement[],
  appState: AppState,
-  app: AppClassProperties,
 ) => {
-  const elementsMap = app.scene.getNonDeletedElementsMap();
  const framesToBeDeleted = new Set(
    getSelectedElements(
      elements.filter((el) => isFrameLikeElement(el)),
@@ -36,26 +29,6 @@ const deleteSelectedElements = (
  return {
    elements: elements.map((el) => {
      if (appState.selectedElementIds[el.id]) {
-        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,
-              });
-              mutateElbowArrow(bound, elementsMap, bound.points);
-            }
-          });
-        }
        return newElementWith(el, { isDeleted: true });
      }

@@ -157,11 +130,7 @@ export const actionDeleteSelected = register({
          : endBindingElement,
      };

-      LinearElementEditor.deletePoints(
-        element,
-        selectedPointsIndices,
-        elementsMap,
-      );
+      LinearElementEditor.deletePoints(element, selectedPointsIndices);

      return {
        elements,
@@ -180,7 +149,7 @@ export const actionDeleteSelected = register({
      };
    }
    let { elements: nextElements, appState: nextAppState } =
-      deleteSelectedElements(elements, appState, app);
+      deleteSelectedElements(elements, appState);
    fixBindingsAfterDeletion(
      nextElements,
      elements.filter(({ id }) => appState.selectedElementIds[id]),
--- 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.tsx
+++ b/packages/excalidraw/actions/actionDuplicateSelection.tsx
@@ -1,6 +1,6 @@
 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";
@@ -12,10 +12,10 @@ import {
  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,
@@ -40,23 +40,23 @@ 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;
      }
+
+      return {
+        elements,
+        appState: ret.appState,
+        storeAction: StoreAction.CAPTURE,
+      };
    }

    return {
@@ -100,8 +100,8 @@ const duplicateElements = (
      groupIdMap,
      element,
      {
-        x: element.x + DEFAULT_GRID_SIZE / 2,
-        y: element.y + DEFAULT_GRID_SIZE / 2,
+        x: element.x + GRID_SIZE / 2,
+        y: element.y + GRID_SIZE / 2,
      },
    );
    duplicatedElementsMap.set(newElement.id, newElement);
--- 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 { point } 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
-                ? point(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 }) => (
--- a/packages/excalidraw/actions/actionFlip.ts
+++ b/packages/excalidraw/actions/actionFlip.ts
@@ -1,24 +1,24 @@
 import { register } from "./register";
 import { getSelectedElements } from "../scene";
 import { getNonDeletedElements } from "../element";
-import type {
+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,
+  bindOrUnbindSelectedElements,
  isBindingEnabled,
+  unbindLinearElements,
 } from "../element/binding";
 import { updateFrameMembershipOfSelectedElements } from "../frame";
 import { flipHorizontal, flipVertical } from "../components/icons";
 import { StoreAction } from "../store";
-import { isLinearElement } from "../element/typeChecks";

 export const actionFlipHorizontal = register({
  name: "flipHorizontal",
@@ -89,6 +89,7 @@ const flipSelectedElements = (

  const updatedElements = flipElements(
    selectedElements,
+    elements,
    elementsMap,
    appState,
    flipDirection,
@@ -104,6 +105,7 @@ const flipSelectedElements = (

 const flipElements = (
  selectedElements: NonDeleted<ExcalidrawElement>[],
+  elements: readonly ExcalidrawElement[],
  elementsMap: NonDeletedSceneElementsMap,
  appState: AppState,
  flipDirection: "horizontal" | "vertical",
@@ -117,19 +119,13 @@ const flipElements = (
    elementsMap,
    "nw",
    true,
-    true,
    flipDirection === "horizontal" ? maxX : minX,
    flipDirection === "horizontal" ? minY : maxY,
  );

-  bindOrUnbindLinearElements(
-    selectedElements.filter(isLinearElement),
-    elementsMap,
-    app.scene.getNonDeletedElements(),
-    app.scene,
-    isBindingEnabled(appState),
-    [],
-  );
+  isBindingEnabled(appState)
+    ? bindOrUnbindSelectedElements(selectedElements, app)
+    : unbindLinearElements(selectedElements, elementsMap);

  return selectedElements;
 };
--- a/packages/excalidraw/actions/actionFrame.ts
+++ b/packages/excalidraw/actions/actionFrame.ts
@@ -1,9 +1,9 @@
 import { getNonDeletedElements } from "../element";
-import type { ExcalidrawElement } from "../element/types";
+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";
--- a/packages/excalidraw/actions/actionGroup.tsx
+++ b/packages/excalidraw/actions/actionGroup.tsx
@@ -17,12 +17,12 @@ 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 {
  getElementsInResizingFrame,
--- 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 { 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 { IStore, 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();

@@ -46,7 +40,7 @@ const executeHistoryAction = (
  return { storeAction: StoreAction.NONE };
 };

-type ActionCreator = (history: History, store: Store) => Action;
+type ActionCreator = (history: History, store: IStore) => Action;

 export const createUndoAction: ActionCreator = (history, store) => ({
  name: "undo",
@@ -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,
@@ -69,10 +63,7 @@ export const createUndoAction: ActionCreator = (history, store) => ({
  PanelComponent: ({ updateData, data }) => {
    const { isUndoStackEmpty } = useEmitter<HistoryChangedEvent>(
      history.onHistoryChangedEmitter,
-      new HistoryChangedEvent(
-        history.isUndoStackEmpty,
-        history.isRedoStackEmpty,
-      ),
+      new HistoryChangedEvent(),
    );

    return (
@@ -83,7 +74,6 @@ export const createUndoAction: ActionCreator = (history, store) => ({
        onClick={updateData}
        size={data?.size || "medium"}
        disabled={isUndoStackEmpty}
-        data-testid="button-undo"
      />
    );
  },
@@ -95,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,
@@ -111,10 +101,7 @@ export const createRedoAction: ActionCreator = (history, store) => ({
  PanelComponent: ({ updateData, data }) => {
    const { isRedoStackEmpty } = useEmitter(
      history.onHistoryChangedEmitter,
-      new HistoryChangedEvent(
-        history.isUndoStackEmpty,
-        history.isRedoStackEmpty,
-      ),
+      new HistoryChangedEvent(),
    );

    return (
@@ -125,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
@@ -1,6 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from "react";
-import type { AppClassProperties, AppState, Primitive } from "../types";
-import type { StoreActionType } from "../store";
+import { AppClassProperties, AppState, Primitive } from "../types";
 import {
  DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE,
  DEFAULT_ELEMENT_BACKGROUND_PICKS,
@@ -11,7 +9,6 @@ import { trackEvent } from "../analytics";
 import { ButtonIconSelect } from "../components/ButtonIconSelect";
 import { ColorPicker } from "../components/ColorPicker/ColorPicker";
 import { IconPicker } from "../components/IconPicker";
-import { FontPicker } from "../components/FontPicker/FontPicker";
 // TODO barnabasmolnar/editor-redesign
 // TextAlignTopIcon, TextAlignBottomIcon,TextAlignMiddleIcon,
 // ArrowHead icons
@@ -41,6 +38,9 @@ import {
  FontSizeExtraLargeIcon,
  EdgeSharpIcon,
  EdgeRoundIcon,
+  FreedrawIcon,
+  FontFamilyNormalIcon,
+  FontFamilyCodeIcon,
  TextAlignLeftIcon,
  TextAlignCenterIcon,
  TextAlignRightIcon,
@@ -50,12 +50,8 @@ import {
  ArrowheadDiamondIcon,
  ArrowheadDiamondOutlineIcon,
  fontSizeIcon,
-  sharpArrowIcon,
-  roundArrowIcon,
-  elbowArrowIcon,
 } from "../components/icons";
 import {
-  ARROW_TYPE,
  DEFAULT_FONT_FAMILY,
  DEFAULT_FONT_SIZE,
  FONT_FAMILY,
@@ -69,17 +65,17 @@ import {
  redrawTextBoundingBox,
 } from "../element";
 import { mutateElement, newElementWith } from "../element/mutateElement";
-import { getBoundTextElement } from "../element/textElement";
 import {
-  isArrowElement,
+  getBoundTextElement,
+  getDefaultLineHeight,
+} from "../element/textElement";
+import {
  isBoundToContainer,
-  isElbowArrow,
  isLinearElement,
  isUsingAdaptiveRadius,
 } from "../element/typeChecks";
-import type {
+import {
  Arrowhead,
-  ExcalidrawBindableElement,
  ExcalidrawElement,
  ExcalidrawLinearElement,
  ExcalidrawTextElement,
@@ -98,25 +94,9 @@ import {
  isSomeElementSelected,
 } from "../scene";
 import { hasStrokeColor } from "../scene/comparisons";
-import {
-  arrayToMap,
-  getFontFamilyString,
-  getShortcutKey,
-  tupleToCoors,
-} from "../utils";
+import { arrayToMap, getShortcutKey } from "../utils";
 import { register } from "./register";
 import { StoreAction } from "../store";
-import { Fonts, getLineHeight } from "../fonts";
-import {
-  bindLinearElement,
-  bindPointToSnapToElementOutline,
-  calculateFixedPointForElbowArrowBinding,
-  getHoveredElementForBinding,
-} from "../element/binding";
-import { mutateElbowArrow } from "../element/routing";
-import { LinearElementEditor } from "../element/linearElementEditor";
-import type { LocalPoint } from "../../math";
-import { point, vector } from "../../math";

 const FONT_SIZE_RELATIVE_INCREASE_STEP = 0.1;

@@ -135,7 +115,7 @@ export const changeProperty = (
  return elements.map((element) => {
    if (
      selectedElementIds.get(element.id) ||
-      element.id === appState.editingTextElement?.id
+      element.id === appState.editingElement?.id
    ) {
      return callback(element);
    }
@@ -150,13 +130,13 @@ export const getFormValue = function <T extends Primitive>(
  isRelevantElement: true | ((element: ExcalidrawElement) => boolean),
  defaultValue: T | ((isSomeElementSelected: boolean) => T),
 ): T {
-  const editingTextElement = appState.editingTextElement;
+  const editingElement = appState.editingElement;
  const nonDeletedElements = getNonDeletedElements(elements);

  let ret: T | null = null;

-  if (editingTextElement) {
-    ret = getAttribute(editingTextElement);
+  if (editingElement) {
+    ret = getAttribute(editingElement);
  }

  if (!ret) {
@@ -187,7 +167,7 @@ const offsetElementAfterFontResize = (
  prevElement: ExcalidrawTextElement,
  nextElement: ExcalidrawTextElement,
 ) => {
-  if (isBoundToContainer(nextElement) || !nextElement.autoResize) {
+  if (isBoundToContainer(nextElement)) {
    return nextElement;
  }
  return mutateElement(
@@ -749,389 +729,104 @@ export const actionIncreaseFontSize = register({
  },
 });

-type ChangeFontFamilyData = Partial<
-  Pick<
-    AppState,
-    "openPopup" | "currentItemFontFamily" | "currentHoveredFontFamily"
-  >
-> & {
-  /** cache of selected & editing elements populated on opened popup */
-  cachedElements?: Map<string, ExcalidrawElement>;
-  /** flag to reset all elements to their cached versions  */
-  resetAll?: true;
-  /** flag to reset all containers to their cached versions */
-  resetContainers?: true;
-};
-
 export const actionChangeFontFamily = register({
  name: "changeFontFamily",
  label: "labels.fontFamily",
  trackEvent: false,
  perform: (elements, appState, value, app) => {
-    const { cachedElements, resetAll, resetContainers, ...nextAppState } =
-      value as ChangeFontFamilyData;
-
-    if (resetAll) {
-      const nextElements = changeProperty(
+    return {
+      elements: changeProperty(
        elements,
        appState,
-        (element) => {
-          const cachedElement = cachedElements?.get(element.id);
-          if (cachedElement) {
-            const newElement = newElementWith(element, {
-              ...cachedElement,
-            });
-
+        (oldElement) => {
+          if (isTextElement(oldElement)) {
+            const newElement: ExcalidrawTextElement = newElementWith(
+              oldElement,
+              {
+                fontFamily: value,
+                lineHeight: getDefaultLineHeight(value),
+              },
+            );
+            redrawTextBoundingBox(
+              newElement,
+              app.scene.getContainerElement(oldElement),
+              app.scene.getNonDeletedElementsMap(),
+            );
            return newElement;
          }

-          return element;
+          return oldElement;
        },
        true,
-      );
-
-      return {
-        elements: nextElements,
-        appState: {
-          ...appState,
-          ...nextAppState,
-        },
-        storeAction: StoreAction.UPDATE,
-      };
-    }
-
-    const { currentItemFontFamily, currentHoveredFontFamily } = value;
-
-    let nexStoreAction: StoreActionType = StoreAction.NONE;
-    let nextFontFamily: FontFamilyValues | undefined;
-    let skipOnHoverRender = false;
-
-    if (currentItemFontFamily) {
-      nextFontFamily = currentItemFontFamily;
-      nexStoreAction = StoreAction.CAPTURE;
-    } else if (currentHoveredFontFamily) {
-      nextFontFamily = currentHoveredFontFamily;
-      nexStoreAction = StoreAction.NONE;
-
-      const selectedTextElements = getSelectedElements(elements, appState, {
-        includeBoundTextElement: true,
-      }).filter((element) => isTextElement(element));
-
-      // skip on hover re-render for more than 200 text elements or for text element with more than 5000 chars combined
-      if (selectedTextElements.length > 200) {
-        skipOnHoverRender = true;
-      } else {
-        let i = 0;
-        let textLengthAccumulator = 0;
-
-        while (
-          i < selectedTextElements.length &&
-          textLengthAccumulator < 5000
-        ) {
-          const textElement = selectedTextElements[i] as ExcalidrawTextElement;
-          textLengthAccumulator += textElement?.originalText.length || 0;
-          i++;
-        }
-
-        if (textLengthAccumulator > 5000) {
-          skipOnHoverRender = true;
-        }
-      }
-    }
-
-    const result = {
+      ),
      appState: {
        ...appState,
-        ...nextAppState,
+        currentItemFontFamily: value,
      },
-      storeAction: nexStoreAction,
+      storeAction: StoreAction.CAPTURE,
    };
-
-    if (nextFontFamily && !skipOnHoverRender) {
-      const elementContainerMapping = new Map<
-        ExcalidrawTextElement,
-        ExcalidrawElement | null
-      >();
-      let uniqueChars = new Set<string>();
-      let skipFontFaceCheck = false;
-
-      const fontsCache = Array.from(Fonts.loadedFontsCache.values());
-      const fontFamily = Object.entries(FONT_FAMILY).find(
-        ([_, value]) => value === nextFontFamily,
-      )?.[0];
-
-      // skip `document.font.check` check on hover, if at least one font family has loaded as it's super slow (could result in slightly different bbox, which is fine)
-      if (
-        currentHoveredFontFamily &&
-        fontFamily &&
-        fontsCache.some((sig) => sig.startsWith(fontFamily))
-      ) {
-        skipFontFaceCheck = true;
-      }
-
-      // following causes re-render so make sure we changed the family
-      // otherwise it could cause unexpected issues, such as preventing opening the popover when in wysiwyg
-      Object.assign(result, {
-        elements: changeProperty(
-          elements,
-          appState,
-          (oldElement) => {
-            if (
-              isTextElement(oldElement) &&
-              (oldElement.fontFamily !== nextFontFamily ||
-                currentItemFontFamily) // force update on selection
-            ) {
-              const newElement: ExcalidrawTextElement = newElementWith(
-                oldElement,
-                {
-                  fontFamily: nextFontFamily,
-                  lineHeight: getLineHeight(nextFontFamily!),
-                },
-              );
-
-              const cachedContainer =
-                cachedElements?.get(oldElement.containerId || "") || {};
-
-              const container = app.scene.getContainerElement(oldElement);
-
-              if (resetContainers && container && cachedContainer) {
-                // reset the container back to it's cached version
-                mutateElement(container, { ...cachedContainer }, false);
-              }
-
-              if (!skipFontFaceCheck) {
-                uniqueChars = new Set([
-                  ...uniqueChars,
-                  ...Array.from(newElement.originalText),
-                ]);
-              }
-
-              elementContainerMapping.set(newElement, container);
-
-              return newElement;
-            }
-
-            return oldElement;
-          },
-          true,
-        ),
-      });
-
-      // size is irrelevant, but necessary
-      const fontString = `10px ${getFontFamilyString({
-        fontFamily: nextFontFamily,
-      })}`;
-      const chars = Array.from(uniqueChars.values()).join();
-
-      if (skipFontFaceCheck || window.document.fonts.check(fontString, chars)) {
-        // we either skip the check (have at least one font face loaded) or do the check and find out all the font faces have loaded
-        for (const [element, container] of elementContainerMapping) {
-          // trigger synchronous redraw
-          redrawTextBoundingBox(
-            element,
-            container,
-            app.scene.getNonDeletedElementsMap(),
-            false,
-          );
-        }
-      } else {
-        // otherwise try to load all font faces for the given chars and redraw elements once our font faces loaded
-        window.document.fonts.load(fontString, chars).then((fontFaces) => {
-          for (const [element, container] of elementContainerMapping) {
-            // use latest element state to ensure we don't have closure over an old instance in order to avoid possible race conditions (i.e. font faces load out-of-order while rapidly switching fonts)
-            const latestElement = app.scene.getElement(element.id);
-            const latestContainer = container
-              ? app.scene.getElement(container.id)
-              : null;
-
-            if (latestElement) {
-              // trigger async redraw
-              redrawTextBoundingBox(
-                latestElement as ExcalidrawTextElement,
-                latestContainer,
-                app.scene.getNonDeletedElementsMap(),
-                false,
-              );
-            }
-          }
-
-          // trigger update once we've mutated all the elements, which also updates our cache
-          app.fonts.onLoaded(fontFaces);
-        });
-      }
-    }
-
-    return result;
  },
-  PanelComponent: ({ elements, appState, app, updateData }) => {
-    const cachedElementsRef = useRef<Map<string, ExcalidrawElement>>(new Map());
-    const prevSelectedFontFamilyRef = useRef<number | null>(null);
-    // relying on state batching as multiple `FontPicker` handlers could be called in rapid succession and we want to combine them
-    const [batchedData, setBatchedData] = useState<ChangeFontFamilyData>({});
-    const isUnmounted = useRef(true);
-
-    const selectedFontFamily = useMemo(() => {
-      const getFontFamily = (
-        elementsArray: readonly ExcalidrawElement[],
-        elementsMap: Map<string, ExcalidrawElement>,
-      ) =>
-        getFormValue(
-          elementsArray,
-          appState,
-          (element) => {
-            if (isTextElement(element)) {
-              return element.fontFamily;
-            }
-            const boundTextElement = getBoundTextElement(element, elementsMap);
-            if (boundTextElement) {
-              return boundTextElement.fontFamily;
-            }
-            return null;
-          },
-          (element) =>
-            isTextElement(element) ||
-            getBoundTextElement(element, elementsMap) !== null,
-          (hasSelection) =>
-            hasSelection
-              ? null
-              : appState.currentItemFontFamily || DEFAULT_FONT_FAMILY,
-        );
-
-      // popup opened, use cached elements
-      if (
-        batchedData.openPopup === "fontFamily" &&
-        appState.openPopup === "fontFamily"
-      ) {
-        return getFontFamily(
-          Array.from(cachedElementsRef.current?.values() ?? []),
-          cachedElementsRef.current,
-        );
-      }
-
-      // popup closed, use all elements
-      if (!batchedData.openPopup && appState.openPopup !== "fontFamily") {
-        return getFontFamily(elements, app.scene.getNonDeletedElementsMap());
-      }
-
-      // popup props are not in sync, hence we are in the middle of an update, so keeping the previous value we've had
-      return prevSelectedFontFamilyRef.current;
-    }, [batchedData.openPopup, appState, elements, app.scene]);
-
-    useEffect(() => {
-      prevSelectedFontFamilyRef.current = selectedFontFamily;
-    }, [selectedFontFamily]);
-
-    useEffect(() => {
-      if (Object.keys(batchedData).length) {
-        updateData(batchedData);
-        // reset the data after we've used the data
-        setBatchedData({});
-      }
-      // call update only on internal state changes
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [batchedData]);
-
-    useEffect(() => {
-      isUnmounted.current = false;
-
-      return () => {
-        isUnmounted.current = true;
-      };
-    }, []);
+  PanelComponent: ({ elements, appState, updateData, app }) => {
+    const options: {
+      value: FontFamilyValues;
+      text: string;
+      icon: JSX.Element;
+      testId: string;
+    }[] = [
+      {
+        value: FONT_FAMILY.Virgil,
+        text: t("labels.handDrawn"),
+        icon: FreedrawIcon,
+        testId: "font-family-virgil",
+      },
+      {
+        value: FONT_FAMILY.Helvetica,
+        text: t("labels.normal"),
+        icon: FontFamilyNormalIcon,
+        testId: "font-family-normal",
+      },
+      {
+        value: FONT_FAMILY.Cascadia,
+        text: t("labels.code"),
+        icon: FontFamilyCodeIcon,
+        testId: "font-family-code",
+      },
+    ];

    return (
      <fieldset>
        <legend>{t("labels.fontFamily")}</legend>
-        <FontPicker
-          isOpened={appState.openPopup === "fontFamily"}
-          selectedFontFamily={selectedFontFamily}
-          hoveredFontFamily={appState.currentHoveredFontFamily}
-          onSelect={(fontFamily) => {
-            setBatchedData({
-              openPopup: null,
-              currentHoveredFontFamily: null,
-              currentItemFontFamily: fontFamily,
-            });
-
-            // defensive clear so immediate close won't abuse the cached elements
-            cachedElementsRef.current.clear();
-          }}
-          onHover={(fontFamily) => {
-            setBatchedData({
-              currentHoveredFontFamily: fontFamily,
-              cachedElements: new Map(cachedElementsRef.current),
-              resetContainers: true,
-            });
-          }}
-          onLeave={() => {
-            setBatchedData({
-              currentHoveredFontFamily: null,
-              cachedElements: new Map(cachedElementsRef.current),
-              resetAll: true,
-            });
-          }}
-          onPopupChange={(open) => {
-            if (open) {
-              // open, populate the cache from scratch
-              cachedElementsRef.current.clear();
-
-              const { editingTextElement } = appState;
-
-              // still check type to be safe
-              if (editingTextElement?.type === "text") {
-                // retrieve the latest version from the scene, as `editingTextElement` isn't mutated
-                const latesteditingTextElement = app.scene.getElement(
-                  editingTextElement.id,
-                );
-
-                // inside the wysiwyg editor
-                cachedElementsRef.current.set(
-                  editingTextElement.id,
-                  newElementWith(
-                    latesteditingTextElement || editingTextElement,
-                    {},
-                    true,
-                  ),
-                );
-              } else {
-                const selectedElements = getSelectedElements(
-                  elements,
-                  appState,
-                  {
-                    includeBoundTextElement: true,
-                  },
-                );
-
-                for (const element of selectedElements) {
-                  cachedElementsRef.current.set(
-                    element.id,
-                    newElementWith(element, {}, true),
-                  );
-                }
+        <ButtonIconSelect<FontFamilyValues | false>
+          group="font-family"
+          options={options}
+          value={getFormValue(
+            elements,
+            appState,
+            (element) => {
+              if (isTextElement(element)) {
+                return element.fontFamily;
              }
-
-              setBatchedData({
-                openPopup: "fontFamily",
-              });
-            } else {
-              // close, use the cache and clear it afterwards
-              const data = {
-                openPopup: null,
-                currentHoveredFontFamily: null,
-                cachedElements: new Map(cachedElementsRef.current),
-                resetAll: true,
-              } as ChangeFontFamilyData;
-
-              if (isUnmounted.current) {
-                // in case the component was unmounted by the parent, trigger the update directly
-                updateData({ ...batchedData, ...data });
-              } else {
-                setBatchedData(data);
+              const boundTextElement = getBoundTextElement(
+                element,
+                app.scene.getNonDeletedElementsMap(),
+              );
+              if (boundTextElement) {
+                return boundTextElement.fontFamily;
              }
-
-              cachedElementsRef.current.clear();
-            }
-          }}
+              return null;
+            },
+            (element) =>
+              isTextElement(element) ||
+              getBoundTextElement(
+                element,
+                app.scene.getNonDeletedElementsMap(),
+              ) !== null,
+            (hasSelection) =>
+              hasSelection
+                ? null
+                : appState.currentItemFontFamily || DEFAULT_FONT_FAMILY,
+          )}
+          onChange={(value) => updateData(value)}
        />
      </fieldset>
    );
@@ -1324,12 +1019,8 @@ export const actionChangeRoundness = register({
  trackEvent: false,
  perform: (elements, appState, value) => {
    return {
-      elements: changeProperty(elements, appState, (el) => {
-        if (isElbowArrow(el)) {
-          return el;
-        }
-
-        return newElementWith(el, {
+      elements: changeProperty(elements, appState, (el) =>
+        newElementWith(el, {
          roundness:
            value === "round"
              ? {
@@ -1338,8 +1029,8 @@ export const actionChangeRoundness = register({
                    : ROUNDNESS.PROPORTIONAL_RADIUS,
                }
              : null,
-        });
-      }),
+        }),
+      ),
      appState: {
        ...appState,
        currentItemRoundness: value,
@@ -1379,8 +1070,7 @@ export const actionChangeRoundness = register({
            appState,
            (element) =>
              hasLegacyRoundness ? null : element.roundness ? "round" : "sharp",
-            (element) =>
-              !isArrowElement(element) && element.hasOwnProperty("roundness"),
+            (element) => element.hasOwnProperty("roundness"),
            (hasSelection) =>
              hasSelection ? null : appState.currentItemRoundness,
          )}
@@ -1543,219 +1233,3 @@ export const actionChangeArrowhead = register({
    );
  },
 });
-
-export const actionChangeArrowType = register({
-  name: "changeArrowType",
-  label: "Change arrow types",
-  trackEvent: false,
-  perform: (elements, appState, value, app) => {
-    return {
-      elements: changeProperty(elements, appState, (el) => {
-        if (!isArrowElement(el)) {
-          return el;
-        }
-        const newElement = newElementWith(el, {
-          roundness:
-            value === ARROW_TYPE.round
-              ? {
-                  type: ROUNDNESS.PROPORTIONAL_RADIUS,
-                }
-              : null,
-          elbowed: value === ARROW_TYPE.elbow,
-          points:
-            value === ARROW_TYPE.elbow || el.elbowed
-              ? [el.points[0], el.points[el.points.length - 1]]
-              : el.points,
-        });
-
-        if (isElbowArrow(newElement)) {
-          const elementsMap = app.scene.getNonDeletedElementsMap();
-
-          app.dismissLinearEditor();
-
-          const startGlobalPoint =
-            LinearElementEditor.getPointAtIndexGlobalCoordinates(
-              newElement,
-              0,
-              elementsMap,
-            );
-          const endGlobalPoint =
-            LinearElementEditor.getPointAtIndexGlobalCoordinates(
-              newElement,
-              -1,
-              elementsMap,
-            );
-          const startHoveredElement =
-            !newElement.startBinding &&
-            getHoveredElementForBinding(
-              tupleToCoors(startGlobalPoint),
-              elements,
-              elementsMap,
-              true,
-            );
-          const endHoveredElement =
-            !newElement.endBinding &&
-            getHoveredElementForBinding(
-              tupleToCoors(endGlobalPoint),
-              elements,
-              elementsMap,
-              true,
-            );
-          const startElement = startHoveredElement
-            ? startHoveredElement
-            : newElement.startBinding &&
-              (elementsMap.get(
-                newElement.startBinding.elementId,
-              ) as ExcalidrawBindableElement);
-          const endElement = endHoveredElement
-            ? endHoveredElement
-            : newElement.endBinding &&
-              (elementsMap.get(
-                newElement.endBinding.elementId,
-              ) as ExcalidrawBindableElement);
-
-          const finalStartPoint = startHoveredElement
-            ? bindPointToSnapToElementOutline(
-                startGlobalPoint,
-                endGlobalPoint,
-                startHoveredElement,
-                elementsMap,
-              )
-            : startGlobalPoint;
-          const finalEndPoint = endHoveredElement
-            ? bindPointToSnapToElementOutline(
-                endGlobalPoint,
-                startGlobalPoint,
-                endHoveredElement,
-                elementsMap,
-              )
-            : endGlobalPoint;
-
-          startHoveredElement &&
-            bindLinearElement(
-              newElement,
-              startHoveredElement,
-              "start",
-              elementsMap,
-            );
-          endHoveredElement &&
-            bindLinearElement(
-              newElement,
-              endHoveredElement,
-              "end",
-              elementsMap,
-            );
-
-          mutateElbowArrow(
-            newElement,
-            elementsMap,
-            [finalStartPoint, finalEndPoint].map(
-              (p): LocalPoint =>
-                point(p[0] - newElement.x, p[1] - newElement.y),
-            ),
-            vector(0, 0),
-            {
-              ...(startElement && newElement.startBinding
-                ? {
-                    startBinding: {
-                      // @ts-ignore TS cannot discern check above
-                      ...newElement.startBinding!,
-                      ...calculateFixedPointForElbowArrowBinding(
-                        newElement,
-                        startElement,
-                        "start",
-                        elementsMap,
-                      ),
-                    },
-                  }
-                : {}),
-              ...(endElement && newElement.endBinding
-                ? {
-                    endBinding: {
-                      // @ts-ignore TS cannot discern check above
-                      ...newElement.endBinding,
-                      ...calculateFixedPointForElbowArrowBinding(
-                        newElement,
-                        endElement,
-                        "end",
-                        elementsMap,
-                      ),
-                    },
-                  }
-                : {}),
-            },
-          );
-        } else {
-          mutateElement(
-            newElement,
-            {
-              startBinding: newElement.startBinding
-                ? { ...newElement.startBinding, fixedPoint: null }
-                : null,
-              endBinding: newElement.endBinding
-                ? { ...newElement.endBinding, fixedPoint: null }
-                : null,
-            },
-            false,
-          );
-        }
-
-        return newElement;
-      }),
-      appState: {
-        ...appState,
-        currentItemArrowType: value,
-      },
-      storeAction: StoreAction.CAPTURE,
-    };
-  },
-  PanelComponent: ({ elements, appState, updateData }) => {
-    return (
-      <fieldset>
-        <legend>{t("labels.arrowtypes")}</legend>
-        <ButtonIconSelect
-          group="arrowtypes"
-          options={[
-            {
-              value: ARROW_TYPE.sharp,
-              text: t("labels.arrowtype_sharp"),
-              icon: sharpArrowIcon,
-              testId: "sharp-arrow",
-            },
-            {
-              value: ARROW_TYPE.round,
-              text: t("labels.arrowtype_round"),
-              icon: roundArrowIcon,
-              testId: "round-arrow",
-            },
-            {
-              value: ARROW_TYPE.elbow,
-              text: t("labels.arrowtype_elbowed"),
-              icon: elbowArrowIcon,
-              testId: "elbow-arrow",
-            },
-          ]}
-          value={getFormValue(
-            elements,
-            appState,
-            (element) => {
-              if (isArrowElement(element)) {
-                return element.elbowed
-                  ? ARROW_TYPE.elbow
-                  : element.roundness
-                  ? ARROW_TYPE.round
-                  : ARROW_TYPE.sharp;
-              }
-
-              return null;
-            },
-            (element) => isArrowElement(element),
-            (hasSelection) =>
-              hasSelection ? null : appState.currentItemArrowType,
-          )}
-          onChange={(value) => updateData(value)}
-        />
-      </fieldset>
-    );
-  },
-});
--- a/packages/excalidraw/actions/actionSelectAll.ts
+++ b/packages/excalidraw/actions/actionSelectAll.ts
@@ -2,7 +2,7 @@ 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";
--- a/packages/excalidraw/actions/actionStyles.ts
+++ b/packages/excalidraw/actions/actionStyles.ts
@@ -12,7 +12,10 @@ import {
  DEFAULT_FONT_FAMILY,
  DEFAULT_TEXT_ALIGN,
 } from "../constants";
-import { getBoundTextElement } from "../element/textElement";
+import {
+  getBoundTextElement,
+  getDefaultLineHeight,
+} from "../element/textElement";
 import {
  hasBoundTextElement,
  canApplyRoundnessTypeToElement,
@@ -21,10 +24,9 @@ import {
  isArrowElement,
 } from "../element/typeChecks";
 import { getSelectedElements } from "../scene";
-import type { ExcalidrawTextElement } from "../element/types";
+import { ExcalidrawTextElement } from "../element/types";
 import { paintIcon } from "../components/icons";
 import { StoreAction } from "../store";
-import { getLineHeight } from "../fonts";

 // `copiedStyles` is exported only for tests.
 export let copiedStyles: string = "{}";
@@ -120,7 +122,7 @@ export const actionPasteStyles = register({
                DEFAULT_TEXT_ALIGN,
              lineHeight:
                (elementStylesToCopyFrom as ExcalidrawTextElement).lineHeight ||
-                getLineHeight(fontFamily),
+                getDefaultLineHeight(fontFamily),
            });
            let container = null;
            if (newElement.containerId) {
--- a/packages/excalidraw/actions/actionTextAutoResize.ts
+++ b/packages/excalidraw/actions/actionTextAutoResize.ts
@@ -1,48 +0,0 @@
-import { isTextElement } from "../element";
-import { newElementWith } from "../element/mutateElement";
-import { measureText } from "../element/textElement";
-import { getSelectedElements } from "../scene";
-import { StoreAction } from "../store";
-import type { AppClassProperties } from "../types";
-import { getFontString } from "../utils";
-import { register } from "./register";
-
-export const actionTextAutoResize = register({
-  name: "autoResize",
-  label: "labels.autoResize",
-  icon: null,
-  trackEvent: { category: "element" },
-  predicate: (elements, appState, _: unknown, app: AppClassProperties) => {
-    const selectedElements = getSelectedElements(elements, appState);
-    return (
-      selectedElements.length === 1 &&
-      isTextElement(selectedElements[0]) &&
-      !selectedElements[0].autoResize
-    );
-  },
-  perform: (elements, appState, _, app) => {
-    const selectedElements = getSelectedElements(elements, appState);
-
-    return {
-      appState,
-      elements: elements.map((element) => {
-        if (element.id === selectedElements[0].id && isTextElement(element)) {
-          const metrics = measureText(
-            element.originalText,
-            getFontString(element),
-            element.lineHeight,
-          );
-
-          return newElementWith(element, {
-            autoResize: true,
-            width: metrics.width,
-            height: metrics.height,
-            text: element.originalText,
-          });
-        }
-        return element;
-      }),
-      storeAction: StoreAction.CAPTURE,
-    };
-  },
-});
--- a/packages/excalidraw/actions/actionToggleGridMode.tsx
+++ b/packages/excalidraw/actions/actionToggleGridMode.tsx
@@ -1,6 +1,7 @@
 import { CODES, KEYS } from "../keys";
 import { register } from "./register";
-import type { AppState } from "../types";
+import { GRID_SIZE } from "../constants";
+import { AppState } from "../types";
 import { gridIcon } from "../components/icons";
 import { StoreAction } from "../store";

@@ -12,21 +13,21 @@ export const actionToggleGridMode = register({
  viewMode: true,
  trackEvent: {
    category: "canvas",
-    predicate: (appState) => appState.gridModeEnabled,
+    predicate: (appState) => !appState.gridSize,
  },
  perform(elements, appState) {
    return {
      appState: {
        ...appState,
-        gridModeEnabled: !this.checked!(appState),
+        gridSize: this.checked!(appState) ? null : GRID_SIZE,
        objectsSnapModeEnabled: false,
      },
      storeAction: StoreAction.NONE,
    };
  },
-  checked: (appState: AppState) => appState.gridModeEnabled,
+  checked: (appState: AppState) => appState.gridSize !== null,
  predicate: (element, appState, props) => {
-    return props.gridModeEnabled === undefined;
+    return typeof props.gridModeEnabled === "undefined";
  },
  keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.code === CODES.QUOTE,
 });
--- a/packages/excalidraw/actions/actionToggleObjectsSnapMode.tsx
+++ b/packages/excalidraw/actions/actionToggleObjectsSnapMode.tsx
@@ -17,7 +17,7 @@ export const actionToggleObjectsSnapMode = register({
      appState: {
        ...appState,
        objectsSnapModeEnabled: !this.checked!(appState),
-        gridModeEnabled: false,
+        gridSize: null,
      },
      storeAction: StoreAction.NONE,
    };
--- a/packages/excalidraw/actions/actionToggleSearchMenu.ts
+++ b/packages/excalidraw/actions/actionToggleSearchMenu.ts
@@ -1,55 +0,0 @@
-import { KEYS } from "../keys";
-import { register } from "./register";
-import type { AppState } from "../types";
-import { searchIcon } from "../components/icons";
-import { StoreAction } from "../store";
-import { CANVAS_SEARCH_TAB, CLASSES, DEFAULT_SIDEBAR } from "../constants";
-
-export const actionToggleSearchMenu = register({
-  name: "searchMenu",
-  icon: searchIcon,
-  keywords: ["search", "find"],
-  label: "search.title",
-  viewMode: true,
-  trackEvent: {
-    category: "search_menu",
-    action: "toggle",
-    predicate: (appState) => appState.gridModeEnabled,
-  },
-  perform(elements, appState, _, app) {
-    if (
-      appState.openSidebar?.name === DEFAULT_SIDEBAR.name &&
-      appState.openSidebar.tab === CANVAS_SEARCH_TAB
-    ) {
-      const searchInput =
-        app.excalidrawContainerValue.container?.querySelector<HTMLInputElement>(
-          `.${CLASSES.SEARCH_MENU_INPUT_WRAPPER} input`,
-        );
-
-      if (searchInput?.matches(":focus")) {
-        return {
-          appState: { ...appState, openSidebar: null },
-          storeAction: StoreAction.NONE,
-        };
-      }
-
-      searchInput?.focus();
-      searchInput?.select();
-      return false;
-    }
-
-    return {
-      appState: {
-        ...appState,
-        openSidebar: { name: DEFAULT_SIDEBAR.name, tab: CANVAS_SEARCH_TAB },
-        openDialog: null,
-      },
-      storeAction: StoreAction.NONE,
-    };
-  },
-  checked: (appState: AppState) => appState.gridModeEnabled,
-  predicate: (element, appState, props) => {
-    return props.gridModeEnabled === undefined;
-  },
-  keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.F,
-});
--- a/packages/excalidraw/actions/actionToggleStats.tsx
+++ b/packages/excalidraw/actions/actionToggleStats.tsx
@@ -5,22 +5,21 @@ import { StoreAction } from "../store";

 export const actionToggleStats = register({
  name: "stats",
-  label: "stats.fullTitle",
+  label: "stats.title",
  icon: abacusIcon,
  paletteName: "Toggle stats",
  viewMode: true,
  trackEvent: { category: "menu" },
-  keywords: ["edit", "attributes", "customize"],
  perform(elements, appState) {
    return {
      appState: {
        ...appState,
-        stats: { ...appState.stats, open: !this.checked!(appState) },
+        showStats: !this.checked!(appState),
      },
      storeAction: StoreAction.NONE,
    };
  },
-  checked: (appState) => appState.stats.open,
+  checked: (appState) => appState.showStats,
  keyTest: (event) =>
    !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.SLASH,
 });
--- a/packages/excalidraw/actions/actionZindex.tsx
+++ b/packages/excalidraw/actions/actionZindex.tsx
@@ -20,7 +20,6 @@ import { StoreAction } from "../store";
 export const actionSendBackward = register({
  name: "sendBackward",
  label: "labels.sendBackward",
-  keywords: ["move down", "zindex", "layer"],
  icon: SendBackwardIcon,
  trackEvent: { category: "element" },
  perform: (elements, appState) => {
@@ -50,7 +49,6 @@ export const actionSendBackward = register({
 export const actionBringForward = register({
  name: "bringForward",
  label: "labels.bringForward",
-  keywords: ["move up", "zindex", "layer"],
  icon: BringForwardIcon,
  trackEvent: { category: "element" },
  perform: (elements, appState) => {
@@ -80,7 +78,6 @@ export const actionBringForward = register({
 export const actionSendToBack = register({
  name: "sendToBack",
  label: "labels.sendToBack",
-  keywords: ["move down", "zindex", "layer"],
  icon: SendToBackIcon,
  trackEvent: { category: "element" },
  perform: (elements, appState) => {
@@ -117,7 +114,6 @@ export const actionSendToBack = register({
 export const actionBringToFront = register({
  name: "bringToFront",
  label: "labels.bringToFront",
-  keywords: ["move up", "zindex", "layer"],
  icon: BringToFrontIcon,
  trackEvent: { category: "element" },

--- a/packages/excalidraw/actions/index.ts
+++ b/packages/excalidraw/actions/index.ts
@@ -86,5 +86,3 @@ export { actionUnbindText, actionBindText } from "./actionBoundText";
 export { actionLink } from "./actionLink";
 export { actionToggleElementLock } from "./actionElementLock";
 export { actionToggleLinearEditor } from "./actionLinearEditor";
-
-export { actionToggleSearchMenu } from "./actionToggleSearchMenu";
--- a/packages/excalidraw/actions/manager.tsx
+++ b/packages/excalidraw/actions/manager.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import type {
+import {
  Action,
  UpdaterFn,
  ActionName,
@@ -7,11 +7,8 @@ import type {
  PanelComponentProps,
  ActionSource,
 } from "./types";
-import type {
-  ExcalidrawElement,
-  OrderedExcalidrawElement,
-} from "../element/types";
-import type { AppClassProperties, AppState } from "../types";
+import { ExcalidrawElement, OrderedExcalidrawElement } from "../element/types";
+import { AppClassProperties, AppState } from "../types";
 import { trackEvent } from "../analytics";
 import { isPromiseLike } from "../utils";

--- a/packages/excalidraw/actions/register.ts
+++ b/packages/excalidraw/actions/register.ts
@@ -1,4 +1,4 @@
-import type { Action } from "./types";
+import { Action } from "./types";

 export let actions: readonly Action[] = [];

--- a/packages/excalidraw/actions/shortcuts.ts
+++ b/packages/excalidraw/actions/shortcuts.ts
@@ -1,8 +1,8 @@
 import { isDarwin } from "../constants";
 import { t } from "../i18n";
-import type { SubtypeOf } from "../utility-types";
+import { SubtypeOf } from "../utility-types";
 import { getShortcutKey } from "../utils";
-import type { ActionName } from "./types";
+import { ActionName } from "./types";

 export type ShortcutName =
  | SubtypeOf<
@@ -51,8 +51,7 @@ export type ShortcutName =
    >
  | "saveScene"
  | "imageExport"
-  | "commandPalette"
-  | "searchMenu";
+  | "commandPalette";

 const shortcutMap: Record<ShortcutName, string[]> = {
  toggleTheme: [getShortcutKey("Shift+Alt+D")],
@@ -113,7 +112,6 @@ const shortcutMap: Record<ShortcutName, string[]> = {
  saveFileToDisk: [getShortcutKey("CtrlOrCmd+S")],
  saveToActiveFile: [getShortcutKey("CtrlOrCmd+S")],
  toggleShortcuts: [getShortcutKey("?")],
-  searchMenu: [getShortcutKey("CtrlOrCmd+F")],
 };

 export const getShortcutFromShortcutName = (name: ShortcutName, idx = 0) => {
--- a/packages/excalidraw/actions/types.ts
+++ b/packages/excalidraw/actions/types.ts
@@ -1,17 +1,14 @@
-import type React from "react";
-import type {
-  ExcalidrawElement,
-  OrderedExcalidrawElement,
-} from "../element/types";
-import type {
+import React from "react";
+import { ExcalidrawElement, OrderedExcalidrawElement } from "../element/types";
+import {
  AppClassProperties,
  AppState,
  ExcalidrawProps,
  BinaryFiles,
  UIAppState,
 } from "../types";
-import type { MarkOptional } from "../utility-types";
-import type { StoreActionType } from "../store";
+import { MarkOptional } from "../utility-types";
+import { StoreAction } from "../store";

 export type ActionSource =
  | "ui"
@@ -29,7 +26,7 @@ export type ActionResult =
        "offsetTop" | "offsetLeft" | "width" | "height"
      > | null;
      files?: BinaryFiles | null;
-      storeAction: StoreActionType;
+      storeAction: keyof typeof StoreAction;
      replaceFiles?: boolean;
    }
  | false;
@@ -70,7 +67,6 @@ export type ActionName =
  | "changeSloppiness"
  | "changeStrokeStyle"
  | "changeArrowhead"
-  | "changeArrowType"
  | "changeOpacity"
  | "changeFontSize"
  | "toggleCanvasMenu"
@@ -135,10 +131,7 @@ export type ActionName =
  | "setEmbeddableAsActiveTool"
  | "createContainerFromText"
  | "wrapTextInContainer"
-  | "commandPalette"
-  | "autoResize"
-  | "elementStats"
-  | "searchMenu";
+  | "commandPalette";

 export type PanelComponentProps = {
  elements: readonly ExcalidrawElement[];
@@ -192,8 +185,7 @@ export interface Action {
          | "history"
          | "menu"
          | "collab"
-          | "hyperlink"
-          | "search_menu";
+          | "hyperlink";
        action?: string;
        predicate?: (
          appState: Readonly<AppState>,
--- a/packages/excalidraw/align.ts
+++ b/packages/excalidraw/align.ts
@@ -1,7 +1,6 @@
-import type { ElementsMap, ExcalidrawElement } from "./element/types";
+import { ElementsMap, ExcalidrawElement } from "./element/types";
 import { newElementWith } from "./element/mutateElement";
-import type { BoundingBox } from "./element/bounds";
-import { getCommonBoundingBox } from "./element/bounds";
+import { BoundingBox, getCommonBoundingBox } from "./element/bounds";
 import { getMaximumGroups } from "./groups";

 export interface Alignment {
--- a/packages/excalidraw/analytics.ts
+++ b/packages/excalidraw/analytics.ts
@@ -1,6 +1,6 @@
 // place here categories that you want to track. We want to track just a
 // small subset of categories at a given time.
-const ALLOWED_CATEGORIES_TO_TRACK = new Set(["command_palette", "export"]);
+const ALLOWED_CATEGORIES_TO_TRACK = ["ai", "command_palette"] as string[];

 export const trackEvent = (
  category: string,
@@ -9,20 +9,17 @@ export const trackEvent = (
  value?: number,
 ) => {
  try {
+    // prettier-ignore
    if (
-      typeof window === "undefined" ||
-      import.meta.env.VITE_WORKER_ID ||
-      import.meta.env.VITE_APP_ENABLE_TRACKING !== "true"
+      typeof window === "undefined"
+      || import.meta.env.VITE_WORKER_ID
+      // comment out to debug locally
+      || import.meta.env.PROD
    ) {
      return;
    }

-    if (!ALLOWED_CATEGORIES_TO_TRACK.has(category)) {
-      return;
-    }
-
-    if (import.meta.env.DEV) {
-      // comment out to debug in dev
+    if (!ALLOWED_CATEGORIES_TO_TRACK.includes(category)) {
      return;
    }

--- a/packages/excalidraw/animated-trail.ts
+++ b/packages/excalidraw/animated-trail.ts
@@ -1,7 +1,6 @@
-import type { LaserPointerOptions } from "@excalidraw/laser-pointer";
-import { LaserPointer } from "@excalidraw/laser-pointer";
-import type { AnimationFrameHandler } from "./animation-frame-handler";
-import type { AppState } from "./types";
+import { LaserPointer, LaserPointerOptions } from "@excalidraw/laser-pointer";
+import { AnimationFrameHandler } from "./animation-frame-handler";
+import { AppState } from "./types";
 import { getSvgPathFromStroke, sceneCoordsToViewportCoords } from "./utils";
 import type App from "./components/App";
 import { SVG_NS } from "./constants";
--- a/packages/excalidraw/appState.ts
+++ b/packages/excalidraw/appState.ts
@@ -1,17 +1,13 @@
 import { COLOR_PALETTE } from "./colors";
 import {
-  ARROW_TYPE,
  DEFAULT_ELEMENT_PROPS,
  DEFAULT_FONT_FAMILY,
  DEFAULT_FONT_SIZE,
  DEFAULT_TEXT_ALIGN,
-  DEFAULT_GRID_SIZE,
  EXPORT_SCALES,
-  STATS_PANELS,
  THEME,
-  DEFAULT_GRID_STEP,
 } from "./constants";
-import type { AppState, NormalizedZoomValue } from "./types";
+import { AppState, NormalizedZoomValue } from "./types";

 const defaultExportScale = EXPORT_SCALES.includes(devicePixelRatio)
  ? devicePixelRatio
@@ -36,15 +32,13 @@ export const getDefaultAppState = (): Omit<
    currentItemStartArrowhead: null,
    currentItemStrokeColor: DEFAULT_ELEMENT_PROPS.strokeColor,
    currentItemRoundness: "round",
-    currentItemArrowType: ARROW_TYPE.round,
    currentItemStrokeStyle: DEFAULT_ELEMENT_PROPS.strokeStyle,
    currentItemStrokeWidth: DEFAULT_ELEMENT_PROPS.strokeWidth,
    currentItemTextAlign: DEFAULT_TEXT_ALIGN,
-    currentHoveredFontFamily: null,
    cursorButton: "up",
    activeEmbeddable: null,
-    newElement: null,
-    editingTextElement: null,
+    draggingElement: null,
+    editingElement: null,
    editingGroupId: null,
    editingLinearElement: null,
    activeTool: {
@@ -61,9 +55,7 @@ export const getDefaultAppState = (): Omit<
    exportEmbedScene: false,
    exportWithDarkMode: false,
    fileHandle: null,
-    gridSize: DEFAULT_GRID_SIZE,
-    gridStep: DEFAULT_GRID_STEP,
-    gridModeEnabled: false,
+    gridSize: null,
    isBindingEnabled: true,
    defaultSidebarDockedPreference: false,
    isLoading: false,
@@ -88,10 +80,7 @@ export const getDefaultAppState = (): Omit<
    selectedElementsAreBeingDragged: false,
    selectionElement: null,
    shouldCacheIgnoreZoom: false,
-    stats: {
-      open: false,
-      panels: STATS_PANELS.generalStats | STATS_PANELS.elementProperties,
-    },
+    showStats: false,
    startBoundElement: null,
    suggestedBindings: [],
    frameRendering: { enabled: true, clip: true, name: true, outline: true },
@@ -116,7 +105,6 @@ export const getDefaultAppState = (): Omit<
    objectsSnapModeEnabled: false,
    userToFollow: null,
    followedBy: new Set(),
-    searchMatches: [],
  };
 };

@@ -150,11 +138,6 @@ const APP_STATE_STORAGE_CONF = (<
    export: false,
    server: false,
  },
-  currentItemArrowType: {
-    browser: true,
-    export: false,
-    server: false,
-  },
  currentItemOpacity: { browser: true, export: false, server: false },
  currentItemRoughness: { browser: true, export: false, server: false },
  currentItemStartArrowhead: { browser: true, export: false, server: false },
@@ -162,11 +145,10 @@ const APP_STATE_STORAGE_CONF = (<
  currentItemStrokeStyle: { browser: true, export: false, server: false },
  currentItemStrokeWidth: { browser: true, export: false, server: false },
  currentItemTextAlign: { browser: true, export: false, server: false },
-  currentHoveredFontFamily: { browser: false, export: false, server: false },
  cursorButton: { browser: true, export: false, server: false },
  activeEmbeddable: { browser: false, export: false, server: false },
-  newElement: { browser: false, export: false, server: false },
-  editingTextElement: { browser: false, export: false, server: false },
+  draggingElement: { browser: false, export: false, server: false },
+  editingElement: { browser: false, export: false, server: false },
  editingGroupId: { browser: true, export: false, server: false },
  editingLinearElement: { browser: false, export: false, server: false },
  activeTool: { browser: true, export: false, server: false },
@@ -179,8 +161,6 @@ const APP_STATE_STORAGE_CONF = (<
  exportWithDarkMode: { browser: true, export: false, server: false },
  fileHandle: { browser: false, export: false, server: false },
  gridSize: { browser: true, export: true, server: true },
-  gridStep: { browser: true, export: true, server: true },
-  gridModeEnabled: { browser: true, export: true, server: true },
  height: { browser: false, export: false, server: false },
  isBindingEnabled: { browser: false, export: false, server: false },
  defaultSidebarDockedPreference: {
@@ -216,7 +196,7 @@ const APP_STATE_STORAGE_CONF = (<
  },
  selectionElement: { browser: false, export: false, server: false },
  shouldCacheIgnoreZoom: { browser: true, export: false, server: false },
-  stats: { browser: true, export: false, server: false },
+  showStats: { browser: true, export: false, server: false },
  startBoundElement: { browser: false, export: false, server: false },
  suggestedBindings: { browser: false, export: false, server: false },
  frameRendering: { browser: false, export: false, server: false },
@@ -237,7 +217,6 @@ const APP_STATE_STORAGE_CONF = (<
  objectsSnapModeEnabled: { browser: true, export: false, server: false },
  userToFollow: { browser: false, export: false, server: false },
  followedBy: { browser: false, export: false, server: false },
-  searchMatches: { browser: false, export: false, server: false },
 });

 const _clearAppStateForStorage = <
--- a/packages/excalidraw/binaryheap.ts
+++ b/packages/excalidraw/binaryheap.ts
@@ -1,105 +0,0 @@
-export default class BinaryHeap<T> {
-  private content: T[] = [];
-
-  constructor(private scoreFunction: (node: T) => number) {}
-
-  sinkDown(idx: number) {
-    const node = this.content[idx];
-    while (idx > 0) {
-      const parentN = ((idx + 1) >> 1) - 1;
-      const parent = this.content[parentN];
-      if (this.scoreFunction(node) < this.scoreFunction(parent)) {
-        this.content[parentN] = node;
-        this.content[idx] = parent;
-        idx = parentN; // TODO: Optimize
-      } else {
-        break;
-      }
-    }
-  }
-
-  bubbleUp(idx: number) {
-    const length = this.content.length;
-    const node = this.content[idx];
-    const score = this.scoreFunction(node);
-
-    while (true) {
-      const child2N = (idx + 1) << 1;
-      const child1N = child2N - 1;
-      let swap = null;
-      let child1Score = 0;
-
-      if (child1N < length) {
-        const child1 = this.content[child1N];
-        child1Score = this.scoreFunction(child1);
-        if (child1Score < score) {
-          swap = child1N;
-        }
-      }
-
-      if (child2N < length) {
-        const child2 = this.content[child2N];
-        const child2Score = this.scoreFunction(child2);
-        if (child2Score < (swap === null ? score : child1Score)) {
-          swap = child2N;
-        }
-      }
-
-      if (swap !== null) {
-        this.content[idx] = this.content[swap];
-        this.content[swap] = node;
-        idx = swap; // TODO: Optimize
-      } else {
-        break;
-      }
-    }
-  }
-
-  push(node: T) {
-    this.content.push(node);
-    this.sinkDown(this.content.length - 1);
-  }
-
-  pop(): T | null {
-    if (this.content.length === 0) {
-      return null;
-    }
-
-    const result = this.content[0];
-    const end = this.content.pop()!;
-
-    if (this.content.length > 0) {
-      this.content[0] = end;
-      this.bubbleUp(0);
-    }
-
-    return result;
-  }
-
-  remove(node: T) {
-    if (this.content.length === 0) {
-      return;
-    }
-
-    const i = this.content.indexOf(node);
-    const end = this.content.pop()!;
-
-    if (i < this.content.length) {
-      this.content[i] = end;
-
-      if (this.scoreFunction(end) < this.scoreFunction(node)) {
-        this.sinkDown(i);
-      } else {
-        this.bubbleUp(i);
-      }
-    }
-  }
-
-  size(): number {
-    return this.content.length;
-  }
-
-  rescoreElement(node: T) {
-    this.sinkDown(this.content.indexOf(node));
-  }
-}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Marcel Mraz	77c4eb6db4	Multiple base url fallbacks	2024-07-31 18:17:31 +02:00
Marcel Mraz	1ac2626e47	Docs for font picker	2024-07-24 19:50:59 +02:00
Marcel Mraz	43d6a7e286	Docs for font picker	2024-07-17 17:51:04 +02:00
Marcel Mraz	15b7d141c1	Fractional indices normalization docs	2024-05-21 16:16:01 +01:00
Marcel Mraz	550e23a2ab	Expose StoreAction instead of StoreActionType	2024-04-22 11:01:04 +01:00
Marcel Mraz	d4c6462ab1	Adding initial storeAction documentation	2024-04-18 23:16:51 +01:00