Merge branch 'master' into fix-frame

# Conflicts:
#	packages/excalidraw/scene/selection.ts

.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

.env.development

@@ -7,6 +7,9 @@ VITE_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfu
 # collaboration WebSocket server (https://github.com/excalidraw/excalidraw-room)
 VITE_APP_WS_SERVER_URL=http://localhost:3002
 
+# set this only if using the collaboration workflow we use on excalidraw.com
+VITE_APP_PORTAL_URL=
+
 VITE_APP_PLUS_LP=https://plus.excalidraw.com
 VITE_APP_PLUS_APP=https://app.excalidraw.com
 
@@ -17,10 +20,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
 

.env.production

@@ -4,14 +4,17 @@ VITE_APP_BACKEND_V2_POST_URL=https://json.excalidraw.com/api/v2/post/
 VITE_APP_LIBRARY_URL=https://libraries.excalidraw.com
 VITE_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries
 
+VITE_APP_PORTAL_URL=https://portal.excalidraw.com
+
 VITE_APP_PLUS_LP=https://plus.excalidraw.com
 VITE_APP_PLUS_APP=https://app.excalidraw.com
 
 VITE_APP_AI_BACKEND=https://oss-ai.excalidraw.com
 
-# socket server URL used for collaboration
-VITE_APP_WS_SERVER_URL=https://oss-collab.excalidraw.com
+# Fill to set socket server URL used for collaboration.
+# Meant for forks only: excalidraw.com uses custom VITE_APP_PORTAL_URL flow
+VITE_APP_WS_SERVER_URL=
 
 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=

.eslintignore

@@ -6,6 +6,3 @@ firebase/
 dist/
 public/workbox
 packages/excalidraw/types
-examples/**/public
-dev-dist
-coverage

.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"
   }
 }

.github/workflows/autorelease-excalidraw.yml

@@ -23,5 +23,5 @@ jobs:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
       - name: Auto release
         run: |
-          yarn add @actions/core -W
+          yarn add @actions/core
           yarn autorelease

.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

.gitignore

@@ -25,5 +25,3 @@ packages/excalidraw/types
 coverage
 dev-dist
 html
-examples/**/bundle.*
-meta*.json

Dockerfile

@@ -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

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
 

dev-docs/docs/@excalidraw/excalidraw/api/children-components/welcome-screen.mdx

@@ -31,7 +31,7 @@ The welcome screen consists of two main groups of subcomponents:
 
 <img
   src={require("@site/static/img/welcome-screen-overview.png").default}
-  alt="Excalidraw logo: Sketch hand-drawn like diagrams."
+  alt="Excalidraw logo: Sketch handrawn like diagrams."
 />
 
 ### Center

dev-docs/docs/@excalidraw/excalidraw/api/constants.mdx

@@ -12,7 +12,7 @@ import { FONT_FAMILY } from "@excalidraw/excalidraw";
 
 | Font Family | Description            |
 | ----------- | ---------------------- |
-| `Virgil`    | The `Hand-drawn` font |
+| `Virgil`    | The `handwritten` font |
 | `Helvetica` | The `Normal` Font      |
 | `Cascadia`  | The `Code` Font        |
 

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)}} />;
 }
 ```
 
@@ -22,7 +22,7 @@ You can use this prop when you want to access some [Excalidraw APIs](https://git
 | API | Signature | Usage |
 | --- | --- | --- |
 | [updateScene](#updatescene) | `function` | updates the scene with the sceneData |
-| [updateLibrary](#updatelibrary) | `function` | updates the library |
+| [updateLibrary](#updatelibrary) | `function` | updates the scene with the sceneData |
 | [addFiles](#addfiles) | `function` | add files data to the appState |
 | [resetScene](#resetscene) | `function` | Resets the scene. If `resetLoadingState` is passed as true then it will also force set the loading state to false. |
 | [getSceneElementsIncludingDeleted](#getsceneelementsincludingdeleted) | `function` | Returns all the elements including the deleted in the scene |
@@ -37,7 +37,7 @@ You can use this prop when you want to access some [Excalidraw APIs](https://git
 | [setActiveTool](#setactivetool) | `function` | This API can be used to set the active tool |
 | [setCursor](#setcursor) | `function` | This API can be used to set customise the mouse cursor on the canvas |
 | [resetCursor](#resetcursor) | `function` | This API can be used to reset to default mouse cursor on the canvas |
-| [toggleSidebar](#toggleSidebar) | `function` | Toggles specific sidebar on/off |
+| [toggleMenu](#togglemenu) | `function` | Toggles specific menus on/off |
 | [onChange](#onChange) | `function` | Subscribes to change events |
 | [onPointerDown](#onPointerDown) | `function` | Subscribes to `pointerdown` events |
 | [onPointerUp](#onPointerUp) | `function` | Subscribes to `pointerup` events |
@@ -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`. |
+| `commitToHistory` | `boolean` | Implies if the `history (undo/redo)` should be recorded. Defaults to `false`. |
 
 ```jsx live
 function App() {
@@ -115,7 +115,7 @@ function App() {
       <button className="custom-button" onClick={updateScene}>
         Update Scene
       </button>
-      <Excalidraw excalidrawAPI={(api) => setExcalidrawAPI(api)} />
+      <Excalidraw ref={(api) => setExcalidrawAPI(api)} />
     </div>
   );
 }
@@ -188,7 +188,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,

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>` |

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>
     </>

dev-docs/docs/@excalidraw/excalidraw/integration.mdx

@@ -32,9 +32,15 @@ function App() {
 
 ### Next.js
 
-Since Excalidraw doesn't support `server side rendering` so it should be rendered only on `client`. The way to achieve this in next.js is using `next.js dynamic import`.
+Since _Excalidraw_ doesn't support server side rendering, you should render the component once the host is `mounted`.
 
-If you want to only import `Excalidraw` component you can do :point_down:
+Here are two ways on how you can render **Excalidraw** on **Next.js**.
+
+
+
+1. Using **Next.js Dynamic** import [Recommended].
+
+Since Excalidraw doesn't support server side rendering so you can also use `dynamic import` to render by setting `ssr` to `false`.
 
 ```jsx showLineNumbers
 import dynamic from "next/dynamic";
@@ -49,88 +55,25 @@ export default function App() {
 }
 ```
 
-However the above component only works for named component exports. If you want to import some util / constant or something else apart from Excalidraw, then this approach will not work. Instead you can write a wrapper over Excalidraw and import the wrapper dynamically.
+Here is a working [demo](https://codesandbox.io/p/sandbox/excalidraw-with-next-dynamic-k8yjq2).
 
-If you are using `pages router` then importing the wrapper dynamically would work, where as if you are using `app router` then you will have to also add `useClient` directive on top of the file in addition to dynamically importing the wrapper as shown :point_down:
 
-<Tabs>
-  <TabItem value="Excalidraw Wrapper" label="Excalidraw Wrapper" >
+2. Importing Excalidraw once **client** is rendered.
 
-  ```jsx showLineNumbers
-  "use client";
-  import { Excalidraw, convertToExcalidrawElements } from "@excalidraw/excalidraw";
-
-  import "@excalidraw/excalidraw/index.css";
-
-  const ExcalidrawWrapper: React.FC = () => {
-    console.info(convertToExcalidrawElements([{
-      type: "rectangle",
-      id: "rect-1",
-      width: 186.47265625,
-      height: 141.9765625,
-    },]));
-    return (
-      <div style={{height:"500px", width:"500px"}}>  
-        <Excalidraw />
-      </div> 
+```jsx showLineNumbers
+import { useState, useEffect } from "react";
+export default function App() {
+  const [Excalidraw, setExcalidraw] = useState(null);
+  useEffect(() => {
+    import("@excalidraw/excalidraw").then((comp) =>
+      setExcalidraw(comp.Excalidraw),
     );
-  };
-  export default ExcalidrawWrapper;
-  ```
-
-  </TabItem>
-
-  <TabItem value="pages" label="Pages router">
-
-  ```jsx showLineNumbers
-  import dynamic from "next/dynamic";
-  
-  // Since client components get prerenderd on server as well hence importing 
-  // the excalidraw stuff dynamically with ssr false
-
-  const ExcalidrawWrapper = dynamic(
-    async () => (await import("../excalidrawWrapper")).default,
-    {
-      ssr: false,
-    },
-  );
-
-  export default function Page() {
-    return (
-      <ExcalidrawWrapper />      
-    );
-  }
-  ```
-  </TabItem>
-
-  <TabItem value="app" label="App router">
-
-  ```jsx showLineNumbers
-  import dynamic from "next/dynamic";
-
-  // Since client components get prerenderd on server as well hence importing 
-  // the excalidraw stuff dynamically with ssr false
-
-  const ExcalidrawWrapper = dynamic(
-    async () => (await import("../excalidrawWrapper")).default,
-    {
-      ssr: false,
-    },
-  );
-
-  export default function Page() {
-    return (
-      <ExcalidrawWrapper />
-    );
-  }
-  ```
-
-  </TabItem>
-</Tabs>
-
-
-Here is a [source code](https://github.com/excalidraw/excalidraw/tree/master/examples/excalidraw/with-nextjs) for the example with app and pages router. You you can try it out [here](https://excalidraw-package-example-with-nextjs-gh6smrdnq-excalidraw.vercel.app/).
+  }, []);
+  return <>{Excalidraw && <Excalidraw />}</>;
+}
+```
 
+Here is a working [demo](https://codesandbox.io/p/sandbox/excalidraw-with-next-5xb3d)
 
 The `types` are available at `@excalidraw/excalidraw/types`, you can view [example for typescript](https://codesandbox.io/s/excalidraw-types-9h2dm)
 

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);

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"
   },
 

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": {

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;
 }
 

dev-docs/yarn.lock

@@ -1547,7 +1547,7 @@
     "@docusaurus/theme-search-algolia" "2.2.0"
     "@docusaurus/types" "2.2.0"
 
-"@docusaurus/react-loadable@5.5.2":
+"@docusaurus/react-loadable@5.5.2", "react-loadable@npm:@docusaurus/react-loadable@5.5.2":
   version "5.5.2"
   resolved "https://registry.yarnpkg.com/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz#81aae0db81ecafbdaee3651f12804580868fa6ce"
   integrity sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==
@@ -1718,10 +1718,10 @@
     url-loader "^4.1.1"
     webpack "^5.73.0"
 
-"@excalidraw/excalidraw@0.17.6":
-  version "0.17.6"
-  resolved "https://registry.yarnpkg.com/@excalidraw/excalidraw/-/excalidraw-0.17.6.tgz#5fd208ce69d33ca712d1804b50d7d06d5c46ac4d"
-  integrity sha512-fyCl+zG/Z5yhHDh5Fq2ZGmphcrALmuOdtITm8gN4d8w4ntnaopTXcTfnAAaU3VleDC6LhTkoLOTG6P5kgREiIg==
+"@excalidraw/excalidraw@0.17.0":
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/@excalidraw/excalidraw/-/excalidraw-0.17.0.tgz#3c64aa8e36406ac171b008cfecbdce5bb0755725"
+  integrity sha512-NzP22v5xMqxYW27ZtTHhiGFe7kE8NeBk45aoeM/mDSkXiOXPDH+PcvwzHRN/Ei+Vj/0sTPHxejn8bZyRWKGjXg==
 
 "@hapi/hoek@^9.0.0":
   version "9.3.0"
@@ -2789,14 +2789,7 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
-braces@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
-  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
-  dependencies:
-    fill-range "^7.1.1"
-
-braces@~3.0.2:
+braces@^3.0.2, braces@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
   integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
@@ -4018,13 +4011,6 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
-fill-range@^7.1.1:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
-  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
-  dependencies:
-    to-regex-range "^5.0.1"
-
 finalhandler@1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.2.0.tgz#7d23fe5731b207b4640e4fcd00aec1f9207a7b32"
@@ -5221,11 +5207,11 @@ methods@~1.1.2:
   integrity sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==
 
 micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
-  integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
+  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
   dependencies:
-    braces "^3.0.3"
+    braces "^3.0.2"
     picomatch "^2.3.1"
 
 mime-db@1.52.0, "mime-db@>= 1.43.0 < 2":
@@ -6204,13 +6190,14 @@ react-dev-utils@^12.0.1:
     strip-ansi "^6.0.1"
     text-table "^0.2.0"
 
-react-dom@18.2.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
-  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
+react-dom@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
+  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
   dependencies:
     loose-envify "^1.1.0"
-    scheduler "^0.23.0"
+    object-assign "^4.1.1"
+    scheduler "^0.20.2"
 
 react-error-overlay@^6.0.11:
   version "6.0.11"
@@ -6273,14 +6260,6 @@ react-loadable-ssr-addon-v5-slorber@^1.0.1:
   dependencies:
     "@babel/runtime" "^7.10.3"
 
-"react-loadable@npm:@docusaurus/react-loadable@5.5.2":
-  version "5.5.2"
-  resolved "https://registry.yarnpkg.com/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz#81aae0db81ecafbdaee3651f12804580868fa6ce"
-  integrity sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==
-  dependencies:
-    "@types/react" "*"
-    prop-types "^15.6.2"
-
 react-router-config@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/react-router-config/-/react-router-config-5.1.1.tgz#0f4263d1a80c6b2dc7b9c1902c9526478194a988"
@@ -6331,12 +6310,13 @@ react-textarea-autosize@^8.3.2:
     use-composed-ref "^1.3.0"
     use-latest "^1.2.1"
 
-react@18.2.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
-  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
+react@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
+  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
   dependencies:
     loose-envify "^1.1.0"
+    object-assign "^4.1.1"
 
 readable-stream@^2.0.1:
   version "2.3.7"
@@ -6684,12 +6664,13 @@ sax@^1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@^0.23.0:
-  version "0.23.2"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
-  integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==
+scheduler@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
+  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
   dependencies:
     loose-envify "^1.1.0"
+    object-assign "^4.1.1"
 
 schema-utils@2.7.0:
   version "2.7.0"

examples/excalidraw/components/MobileFooter.tsx

@@ -1,27 +0,0 @@
-import type { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/dist/excalidraw/types";
-import CustomFooter from "./CustomFooter";
-import type * as TExcalidraw from "@excalidraw/excalidraw";
-
-const MobileFooter = ({
-  excalidrawAPI,
-  excalidrawLib,
-}: {
-  excalidrawAPI: ExcalidrawImperativeAPI;
-  excalidrawLib: typeof TExcalidraw;
-}) => {
-  const { useDevice, Footer } = excalidrawLib;
-
-  const device = useDevice();
-  if (device.editor.isMobile) {
-    return (
-      <Footer>
-        <CustomFooter
-          excalidrawAPI={excalidrawAPI}
-          excalidrawLib={excalidrawLib}
-        />
-      </Footer>
-    );
-  }
-  return null;
-};
-export default MobileFooter;

examples/excalidraw/package.json

@@ -1,13 +0,0 @@
-{
-  "name": "examples",
-  "version": "1.0.0",
-  "private": true,
-  "dependencies": {
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "@excalidraw/excalidraw": "*"
-  },
-  "devDependencies": {
-    "typescript": "^5"
-  }
-}

examples/excalidraw/tsconfig.json

@@ -1,3 +0,0 @@
-{
-  "extends": "../../tsconfig"
-}

examples/excalidraw/utils.ts

@@ -1,146 +0,0 @@
-import { unstable_batchedUpdates } from "react-dom";
-import { fileOpen as _fileOpen } from "browser-fs-access";
-import { MIME_TYPES } from "@excalidraw/excalidraw";
-import { AbortError } from "../../packages/excalidraw/errors";
-
-type FILE_EXTENSION = Exclude<keyof typeof MIME_TYPES, "binary">;
-
-const INPUT_CHANGE_INTERVAL_MS = 500;
-
-export type ResolvablePromise<T> = Promise<T> & {
-  resolve: [T] extends [undefined] ? (value?: T) => void : (value: T) => void;
-  reject: (error: Error) => void;
-};
-export const resolvablePromise = <T>() => {
-  let resolve!: any;
-  let reject!: any;
-  const promise = new Promise((_resolve, _reject) => {
-    resolve = _resolve;
-    reject = _reject;
-  });
-  (promise as any).resolve = resolve;
-  (promise as any).reject = reject;
-  return promise as ResolvablePromise<T>;
-};
-
-export const distance2d = (x1: number, y1: number, x2: number, y2: number) => {
-  const xd = x2 - x1;
-  const yd = y2 - y1;
-  return Math.hypot(xd, yd);
-};
-
-export const fileOpen = <M extends boolean | undefined = false>(opts: {
-  extensions?: FILE_EXTENSION[];
-  description: string;
-  multiple?: M;
-}): Promise<M extends false | undefined ? File : File[]> => {
-  // an unsafe TS hack, alas not much we can do AFAIK
-  type RetType = M extends false | undefined ? File : File[];
-
-  const mimeTypes = opts.extensions?.reduce((mimeTypes, type) => {
-    mimeTypes.push(MIME_TYPES[type]);
-
-    return mimeTypes;
-  }, [] as string[]);
-
-  const extensions = opts.extensions?.reduce((acc, ext) => {
-    if (ext === "jpg") {
-      return acc.concat(".jpg", ".jpeg");
-    }
-    return acc.concat(`.${ext}`);
-  }, [] as string[]);
-
-  return _fileOpen({
-    description: opts.description,
-    extensions,
-    mimeTypes,
-    multiple: opts.multiple ?? false,
-    legacySetup: (resolve, reject, input) => {
-      const scheduleRejection = debounce(reject, INPUT_CHANGE_INTERVAL_MS);
-      const focusHandler = () => {
-        checkForFile();
-        document.addEventListener("keyup", scheduleRejection);
-        document.addEventListener("pointerup", scheduleRejection);
-        scheduleRejection();
-      };
-      const checkForFile = () => {
-        // this hack might not work when expecting multiple files
-        if (input.files?.length) {
-          const ret = opts.multiple ? [...input.files] : input.files[0];
-          resolve(ret as RetType);
-        }
-      };
-      requestAnimationFrame(() => {
-        window.addEventListener("focus", focusHandler);
-      });
-      const interval = window.setInterval(() => {
-        checkForFile();
-      }, INPUT_CHANGE_INTERVAL_MS);
-      return (rejectPromise) => {
-        clearInterval(interval);
-        scheduleRejection.cancel();
-        window.removeEventListener("focus", focusHandler);
-        document.removeEventListener("keyup", scheduleRejection);
-        document.removeEventListener("pointerup", scheduleRejection);
-        if (rejectPromise) {
-          // so that something is shown in console if we need to debug this
-          console.warn("Opening the file was canceled (legacy-fs).");
-          rejectPromise(new AbortError());
-        }
-      };
-    },
-  }) as Promise<RetType>;
-};
-
-export const debounce = <T extends any[]>(
-  fn: (...args: T) => void,
-  timeout: number,
-) => {
-  let handle = 0;
-  let lastArgs: T | null = null;
-  const ret = (...args: T) => {
-    lastArgs = args;
-    clearTimeout(handle);
-    handle = window.setTimeout(() => {
-      lastArgs = null;
-      fn(...args);
-    }, timeout);
-  };
-  ret.flush = () => {
-    clearTimeout(handle);
-    if (lastArgs) {
-      const _lastArgs = lastArgs;
-      lastArgs = null;
-      fn(..._lastArgs);
-    }
-  };
-  ret.cancel = () => {
-    lastArgs = null;
-    clearTimeout(handle);
-  };
-  return ret;
-};
-
-export const withBatchedUpdates = <
-  TFunction extends ((event: any) => void) | (() => void),
->(
-  func: Parameters<TFunction>["length"] extends 0 | 1 ? TFunction : never,
-) =>
-  ((event) => {
-    unstable_batchedUpdates(func as TFunction, event);
-  }) as TFunction;
-
-/**
- * barches React state updates and throttles the calls to a single call per
- * animation frame
- */
-export const withBatchedUpdatesThrottled = <
-  TFunction extends ((event: any) => void) | (() => void),
->(
-  func: Parameters<TFunction>["length"] extends 0 | 1 ? TFunction : never,
-) => {
-  // @ts-ignore
-  return throttleRAF<Parameters<TFunction>>(((event) => {
-    unstable_batchedUpdates(func, event);
-  }) as TFunction);
-};

examples/excalidraw/with-nextjs/.gitignore

@@ -1,39 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-.yarn/install-state.gz
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# local env files
-.env*.local
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
-
-# copied assets
-public/**/*.woff2

examples/excalidraw/with-nextjs/README.md

@@ -1,36 +0,0 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3005) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

examples/excalidraw/with-nextjs/next.config.js

@@ -1,12 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  distDir: "build",
-  typescript: {
-    // The ts config doesn't work with `jsx: preserve" and if updated to `react-jsx` it gets ovewritten by next js throwing ts errors hence I am ignoring build errors until this is fixed.
-    ignoreBuildErrors: true,
-  },
-  // This is needed as in pages router the code for importing types throws error as its outside next js app
-  transpilePackages: ["../"],
-};
-
-module.exports = nextConfig;

examples/excalidraw/with-nextjs/package.json

@@ -1,26 +0,0 @@
-{
-  "name": "with-nextjs",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "build:workspace": "yarn workspace @excalidraw/excalidraw run build:esm && yarn copy:assets",
-    "copy:assets": "cp -r ../../../packages/excalidraw/dist/prod/fonts ./public",
-    "dev": "yarn build:workspace && next dev -p 3005",
-    "build": "yarn build:workspace && next build",
-    "start": "next start -p 3006",
-    "lint": "next lint"
-  },
-  "dependencies": {
-    "@excalidraw/excalidraw": "*",
-    "next": "14.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
-  },
-  "devDependencies": {
-    "@types/node": "^20",
-    "@types/react": "18.2.0",
-    "@types/react-dom": "18.2.0",
-    "path2d-polyfill": "2.0.1",
-    "typescript": "^5"
-  }
-}

examples/excalidraw/with-nextjs/src/app/layout.tsx

@@ -1,11 +0,0 @@
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <html lang="en">
-      <body>{children}</body>
-    </html>
-  );
-}

examples/excalidraw/with-nextjs/src/app/page.tsx

@@ -1,26 +0,0 @@
-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
-// with ssr false
-const ExcalidrawWithClientOnly = dynamic(
-  async () => (await import("../excalidrawWrapper")).default,
-  {
-    ssr: false,
-  },
-);
-
-export default function Page() {
-  return (
-    <>
-      <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 />
-    </>
-  );
-}

examples/excalidraw/with-nextjs/src/common.scss

@@ -1,15 +0,0 @@
-* {
-  box-sizing: border-box;
-  font-family: sans-serif;
-}
-
-a {
-  color: #1c7ed6;
-  font-size: 20px;
-  text-decoration: none;
-  font-weight: 500;
-}
-
-.page-title {
-  text-align: center;
-}

examples/excalidraw/with-nextjs/src/excalidrawWrapper.tsx

@@ -1,22 +0,0 @@
-"use client";
-import * as excalidrawLib from "@excalidraw/excalidraw";
-import { Excalidraw } from "@excalidraw/excalidraw";
-import App from "../../components/ExampleApp";
-
-import "@excalidraw/excalidraw/index.css";
-
-const ExcalidrawWrapper: React.FC = () => {
-  return (
-    <>
-      <App
-        appTitle={"Excalidraw with Nextjs Example"}
-        useCustom={(api: any, args?: any[]) => {}}
-        excalidrawLib={excalidrawLib}
-      >
-        <Excalidraw />
-      </App>
-    </>
-  );
-};
-
-export default ExcalidrawWrapper;

examples/excalidraw/with-nextjs/src/pages/excalidraw-in-pages.tsx

@@ -1,22 +0,0 @@
-import dynamic from "next/dynamic";
-import "../common.scss";
-
-// Since client components get prerenderd on server as well hence importing the excalidraw stuff dynamically
-// with ssr false
-const Excalidraw = dynamic(
-  async () => (await import("../excalidrawWrapper")).default,
-  {
-    ssr: false,
-  },
-);
-
-export default function Page() {
-  return (
-    <>
-      <a href="/">Switch to App router</a>
-      <h1 className="page-title">Pages Router</h1>
-      {/* @ts-expect-error - https://github.com/vercel/next.js/issues/42292 */}
-      <Excalidraw />
-    </>
-  );
-}

examples/excalidraw/with-nextjs/tsconfig.json

@@ -1,28 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@/*": ["./src/*"]
-    },
-    "forceConsistentCasingInFileNames": true
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "build/types/**/*.ts"],
-  "exclude": ["node_modules"]
-}

examples/excalidraw/with-nextjs/vercel.json

@@ -1,3 +0,0 @@
-{
-  "outputDirectory": "build"
-}

examples/excalidraw/with-nextjs/yarn.lock

@@ -1,252 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
-"@excalidraw/excalidraw@workspace:^":
-  version "0.17.2"
-  resolved "https://registry.yarnpkg.com/@excalidraw/excalidraw/-/excalidraw-0.17.2.tgz#9a636a1e6bb3c88c5883347d3a7e75e9cce8ab96"
-  integrity sha512-7pqUWD8+mPjDhF4XxG3gw4rvE2JGaLW3Vss5UZfTbITPxAtFaGEc1K081bncitnaYhUwN9ENJE0i87QB3poDwQ==
-
-"@next/env@14.0.4":
-  version "14.0.4"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-14.0.4.tgz#d5cda0c4a862d70ae760e58c0cd96a8899a2e49a"
-  integrity sha512-irQnbMLbUNQpP1wcE5NstJtbuA/69kRfzBrpAD7Gsn8zm/CY6YQYc3HQBz8QPxwISG26tIm5afvvVbu508oBeQ==
-
-"@next/swc-darwin-arm64@14.0.4":
-  version "14.0.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.0.4.tgz#27b1854c2cd04eb1d5e75081a1a792ad91526618"
-  integrity sha512-mF05E/5uPthWzyYDyptcwHptucf/jj09i2SXBPwNzbgBNc+XnwzrL0U6BmPjQeOL+FiB+iG1gwBeq7mlDjSRPg==
-
-"@next/swc-darwin-x64@14.0.4":
-  version "14.0.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-14.0.4.tgz#9940c449e757d0ee50bb9e792d2600cc08a3eb3b"
-  integrity sha512-IZQ3C7Bx0k2rYtrZZxKKiusMTM9WWcK5ajyhOZkYYTCc8xytmwSzR1skU7qLgVT/EY9xtXDG0WhY6fyujnI3rw==
-
-"@next/swc-linux-arm64-gnu@14.0.4":
-  version "14.0.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.0.4.tgz#0eafd27c8587f68ace7b4fa80695711a8434de21"
-  integrity sha512-VwwZKrBQo/MGb1VOrxJ6LrKvbpo7UbROuyMRvQKTFKhNaXjUmKTu7wxVkIuCARAfiI8JpaWAnKR+D6tzpCcM4w==
-
-"@next/swc-linux-arm64-musl@14.0.4":
-  version "14.0.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.0.4.tgz#2b0072adb213f36dada5394ea67d6e82069ae7dd"
-  integrity sha512-8QftwPEW37XxXoAwsn+nXlodKWHfpMaSvt81W43Wh8dv0gkheD+30ezWMcFGHLI71KiWmHK5PSQbTQGUiidvLQ==
-
-"@next/swc-linux-x64-gnu@14.0.4":
-  version "14.0.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.0.4.tgz#68c67d20ebc8e3f6ced6ff23a4ba2a679dbcec32"
-  integrity sha512-/s/Pme3VKfZAfISlYVq2hzFS8AcAIOTnoKupc/j4WlvF6GQ0VouS2Q2KEgPuO1eMBwakWPB1aYFIA4VNVh667A==
-
-"@next/swc-linux-x64-musl@14.0.4":
-  version "14.0.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.0.4.tgz#67cd81b42fb2caf313f7992fcf6d978af55a1247"
-  integrity sha512-m8z/6Fyal4L9Bnlxde5g2Mfa1Z7dasMQyhEhskDATpqr+Y0mjOBZcXQ7G5U+vgL22cI4T7MfvgtrM2jdopqWaw==
-
-"@next/swc-win32-arm64-msvc@14.0.4":
-  version "14.0.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.0.4.tgz#be06585906b195d755ceda28f33c633e1443f1a3"
-  integrity sha512-7Wv4PRiWIAWbm5XrGz3D8HUkCVDMMz9igffZG4NB1p4u1KoItwx9qjATHz88kwCEal/HXmbShucaslXCQXUM5w==
-
-"@next/swc-win32-ia32-msvc@14.0.4":
-  version "14.0.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.0.4.tgz#e76cabefa9f2d891599c3d85928475bd8d3f6600"
-  integrity sha512-zLeNEAPULsl0phfGb4kdzF/cAVIfaC7hY+kt0/d+y9mzcZHsMS3hAS829WbJ31DkSlVKQeHEjZHIdhN+Pg7Gyg==
-
-"@next/swc-win32-x64-msvc@14.0.4":
-  version "14.0.4"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.0.4.tgz#e74892f1a9ccf41d3bf5979ad6d3d77c07b9cba1"
-  integrity sha512-yEh2+R8qDlDCjxVpzOTEpBLQTEFAcP2A8fUFLaWNap9GitYKkKv1//y2S6XY6zsR4rCOPRpU7plYDR+az2n30A==
-
-"@swc/helpers@0.5.2":
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.2.tgz#85ea0c76450b61ad7d10a37050289eded783c27d"
-  integrity sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==
-  dependencies:
-    tslib "^2.4.0"
-
-"@types/node@^20":
-  version "20.11.0"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.11.0.tgz#8e0b99e70c0c1ade1a86c4a282f7b7ef87c9552f"
-  integrity sha512-o9bjXmDNcF7GbM4CNQpmi+TutCgap/K3w1JyKgxAjqx41zp9qlIAVFi0IhCNsJcXolEqLWhbFbEeL0PvYm4pcQ==
-  dependencies:
-    undici-types "~5.26.4"
-
-"@types/prop-types@*":
-  version "15.7.11"
-  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.11.tgz#2596fb352ee96a1379c657734d4b913a613ad563"
-  integrity sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==
-
-"@types/react-dom@^18":
-  version "18.2.18"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.18.tgz#16946e6cd43971256d874bc3d0a72074bb8571dd"
-  integrity sha512-TJxDm6OfAX2KJWJdMEVTwWke5Sc/E/RlnPGvGfS0W7+6ocy2xhDVQVh/KvC2Uf7kACs+gDytdusDSdWfWkaNzw==
-  dependencies:
-    "@types/react" "*"
-
-"@types/react@*", "@types/react@^18":
-  version "18.2.47"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.47.tgz#85074b27ab563df01fbc3f68dc64bf7050b0af40"
-  integrity sha512-xquNkkOirwyCgoClNk85BjP+aqnIS+ckAJ8i37gAbDs14jfW/J23f2GItAf33oiUPQnqNMALiFeoM9Y5mbjpVQ==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
-"@types/scheduler@*":
-  version "0.16.8"
-  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.8.tgz#ce5ace04cfeabe7ef87c0091e50752e36707deff"
-  integrity sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==
-
-busboy@1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/busboy/-/busboy-1.6.0.tgz#966ea36a9502e43cdb9146962523b92f531f6893"
-  integrity sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==
-  dependencies:
-    streamsearch "^1.1.0"
-
-caniuse-lite@^1.0.30001406:
-  version "1.0.30001576"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001576.tgz#893be772cf8ee6056d6c1e2d07df365b9ec0a5c4"
-  integrity sha512-ff5BdakGe2P3SQsMsiqmt1Lc8221NR1VzHj5jXN5vBny9A6fpze94HiVV/n7XRosOlsShJcvMv5mdnpjOGCEgg==
-
-client-only@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
-  integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
-
-csstype@^3.0.2:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
-  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
-
-glob-to-regexp@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
-  integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
-
-graceful-fs@^4.1.2, graceful-fs@^4.2.11:
-  version "4.2.11"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
-  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
-
-"js-tokens@^3.0.0 || ^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
-  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
-
-loose-envify@^1.1.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
-  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
-  dependencies:
-    js-tokens "^3.0.0 || ^4.0.0"
-
-nanoid@^3.3.6:
-  version "3.3.7"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
-  integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
-
-next@14.0.4:
-  version "14.0.4"
-  resolved "https://registry.yarnpkg.com/next/-/next-14.0.4.tgz#bf00b6f835b20d10a5057838fa2dfced1d0d84dc"
-  integrity sha512-qbwypnM7327SadwFtxXnQdGiKpkuhaRLE2uq62/nRul9cj9KhQ5LhHmlziTNqUidZotw/Q1I9OjirBROdUJNgA==
-  dependencies:
-    "@next/env" "14.0.4"
-    "@swc/helpers" "0.5.2"
-    busboy "1.6.0"
-    caniuse-lite "^1.0.30001406"
-    graceful-fs "^4.2.11"
-    postcss "8.4.31"
-    styled-jsx "5.1.1"
-    watchpack "2.4.0"
-  optionalDependencies:
-    "@next/swc-darwin-arm64" "14.0.4"
-    "@next/swc-darwin-x64" "14.0.4"
-    "@next/swc-linux-arm64-gnu" "14.0.4"
-    "@next/swc-linux-arm64-musl" "14.0.4"
-    "@next/swc-linux-x64-gnu" "14.0.4"
-    "@next/swc-linux-x64-musl" "14.0.4"
-    "@next/swc-win32-arm64-msvc" "14.0.4"
-    "@next/swc-win32-ia32-msvc" "14.0.4"
-    "@next/swc-win32-x64-msvc" "14.0.4"
-
-path2d-polyfill@2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/path2d-polyfill/-/path2d-polyfill-2.0.1.tgz#24c554a738f42700d6961992bf5f1049672f2391"
-  integrity sha512-ad/3bsalbbWhmBo0D6FZ4RNMwsLsPpL6gnvhuSaU5Vm7b06Kr5ubSltQQ0T7YKsiJQO+g22zJ4dJKNTXIyOXtA==
-
-picocolors@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
-  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
-
-postcss@8.4.31:
-  version "8.4.31"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
-  integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
-  dependencies:
-    nanoid "^3.3.6"
-    picocolors "^1.0.0"
-    source-map-js "^1.0.2"
-
-react-dom@^18:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
-  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
-  dependencies:
-    loose-envify "^1.1.0"
-    scheduler "^0.23.0"
-
-react@^18:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
-  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
-  dependencies:
-    loose-envify "^1.1.0"
-
-scheduler@^0.23.0:
-  version "0.23.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
-  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
-  dependencies:
-    loose-envify "^1.1.0"
-
-source-map-js@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
-  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
-
-streamsearch@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/streamsearch/-/streamsearch-1.1.0.tgz#404dd1e2247ca94af554e841a8ef0eaa238da764"
-  integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
-
-styled-jsx@5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.1.1.tgz#839a1c3aaacc4e735fed0781b8619ea5d0009d1f"
-  integrity sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==
-  dependencies:
-    client-only "0.0.1"
-
-tslib@^2.4.0:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
-  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
-
-typescript@^5:
-  version "5.3.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.3.3.tgz#b3ce6ba258e72e6305ba66f5c9b452aaee3ffe37"
-  integrity sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==
-
-undici-types@~5.26.4:
-  version "5.26.5"
-  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
-  integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
-
-watchpack@2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"
-  integrity sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==
-  dependencies:
-    glob-to-regexp "^0.4.1"
-    graceful-fs "^4.1.2"

examples/excalidraw/with-script-in-browser/.gitignore

@@ -1,2 +0,0 @@
-# copied assets
-public/**/*.woff2

examples/excalidraw/with-script-in-browser/index.tsx

@@ -1,28 +0,0 @@
-import App from "../components/ExampleApp";
-import React, { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-
-import type * as TExcalidraw from "@excalidraw/excalidraw";
-
-import "@excalidraw/excalidraw/index.css";
-
-declare global {
-  interface Window {
-    ExcalidrawLib: typeof TExcalidraw;
-  }
-}
-
-const rootElement = document.getElementById("root")!;
-const root = createRoot(rootElement);
-const { Excalidraw } = window.ExcalidrawLib;
-root.render(
-  <StrictMode>
-    <App
-      appTitle={"Excalidraw Example"}
-      useCustom={(api: any, args?: any[]) => {}}
-      excalidrawLib={window.ExcalidrawLib}
-    >
-      <Excalidraw />
-    </App>
-  </StrictMode>,
-);

examples/excalidraw/with-script-in-browser/package.json

@@ -1,21 +0,0 @@
-{
-  "name": "with-script-in-browser",
-  "version": "1.0.0",
-  "private": true,
-  "dependencies": {
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "@excalidraw/excalidraw": "*"
-  },
-  "devDependencies": {
-    "vite": "5.0.12",
-    "typescript": "^5"
-  },
-  "scripts": {
-    "build:workspace": "yarn workspace @excalidraw/excalidraw run build:esm && yarn copy:assets",
-    "copy:assets": "cp -r ../../../packages/excalidraw/dist/prod/fonts ./public",
-    "start": "yarn build:workspace && vite",
-    "build": "yarn build:workspace && vite build",
-    "build:preview": "yarn build && vite preview --port 5002"
-  }
-}

examples/excalidraw/with-script-in-browser/vite.config.mts

@@ -1,11 +0,0 @@
-import { defineConfig } from "vite";
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  server: {
-    port: 3001,
-    // open the browser
-    open: true,
-  },
-  publicDir: "public",
-});

examples/excalidraw/yarn.lock

@@ -1,313 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
-"@esbuild/aix-ppc64@0.19.11":
-  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.19.11.tgz#2acd20be6d4f0458bc8c784103495ff24f13b1d3"
-  integrity sha512-FnzU0LyE3ySQk7UntJO4+qIiQgI7KoODnZg5xzXIrFJlKd2P2gwHsHY4927xj9y5PJmJSzULiUCWmv7iWnNa7g==
-
-"@esbuild/android-arm64@0.19.11":
-  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.19.11.tgz#b45d000017385c9051a4f03e17078abb935be220"
-  integrity sha512-aiu7K/5JnLj//KOnOfEZ0D90obUkRzDMyqd/wNAUQ34m4YUPVhRZpnqKV9uqDGxT7cToSDnIHsGooyIczu9T+Q==
-
-"@esbuild/android-arm@0.19.11":
-  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.19.11.tgz#f46f55414e1c3614ac682b29977792131238164c"
-  integrity sha512-5OVapq0ClabvKvQ58Bws8+wkLCV+Rxg7tUVbo9xu034Nm536QTII4YzhaFriQ7rMrorfnFKUsArD2lqKbFY4vw==
-
-"@esbuild/android-x64@0.19.11":
-  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.19.11.tgz#bfc01e91740b82011ef503c48f548950824922b2"
-  integrity sha512-eccxjlfGw43WYoY9QgB82SgGgDbibcqyDTlk3l3C0jOVHKxrjdc9CTwDUQd0vkvYg5um0OH+GpxYvp39r+IPOg==
-
-"@esbuild/darwin-arm64@0.19.11":
-  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.19.11.tgz#533fb7f5a08c37121d82c66198263dcc1bed29bf"
-  integrity sha512-ETp87DRWuSt9KdDVkqSoKoLFHYTrkyz2+65fj9nfXsaV3bMhTCjtQfw3y+um88vGRKRiF7erPrh/ZuIdLUIVxQ==
-
-"@esbuild/darwin-x64@0.19.11":
-  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.19.11.tgz#62f3819eff7e4ddc656b7c6815a31cf9a1e7d98e"
-  integrity sha512-fkFUiS6IUK9WYUO/+22omwetaSNl5/A8giXvQlcinLIjVkxwTLSktbF5f/kJMftM2MJp9+fXqZ5ezS7+SALp4g==
-
-"@esbuild/freebsd-arm64@0.19.11":
-  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.11.tgz#d478b4195aa3ca44160272dab85ef8baf4175b4a"
-  integrity sha512-lhoSp5K6bxKRNdXUtHoNc5HhbXVCS8V0iZmDvyWvYq9S5WSfTIHU2UGjcGt7UeS6iEYp9eeymIl5mJBn0yiuxA==
-
-"@esbuild/freebsd-x64@0.19.11":
-  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.19.11.tgz#7bdcc1917409178257ca6a1a27fe06e797ec18a2"
-  integrity sha512-JkUqn44AffGXitVI6/AbQdoYAq0TEullFdqcMY/PCUZ36xJ9ZJRtQabzMA+Vi7r78+25ZIBosLTOKnUXBSi1Kw==
-
-"@esbuild/linux-arm64@0.19.11":
-  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.19.11.tgz#58ad4ff11685fcc735d7ff4ca759ab18fcfe4545"
-  integrity sha512-LneLg3ypEeveBSMuoa0kwMpCGmpu8XQUh+mL8XXwoYZ6Be2qBnVtcDI5azSvh7vioMDhoJFZzp9GWp9IWpYoUg==
-
-"@esbuild/linux-arm@0.19.11":
-  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.19.11.tgz#ce82246d873b5534d34de1e5c1b33026f35e60e3"
-  integrity sha512-3CRkr9+vCV2XJbjwgzjPtO8T0SZUmRZla+UL1jw+XqHZPkPgZiyWvbDvl9rqAN8Zl7qJF0O/9ycMtjU67HN9/Q==
-
-"@esbuild/linux-ia32@0.19.11":
-  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.19.11.tgz#cbae1f313209affc74b80f4390c4c35c6ab83fa4"
-  integrity sha512-caHy++CsD8Bgq2V5CodbJjFPEiDPq8JJmBdeyZ8GWVQMjRD0sU548nNdwPNvKjVpamYYVL40AORekgfIubwHoA==
-
-"@esbuild/linux-loong64@0.19.11":
-  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.19.11.tgz#5f32aead1c3ec8f4cccdb7ed08b166224d4e9121"
-  integrity sha512-ppZSSLVpPrwHccvC6nQVZaSHlFsvCQyjnvirnVjbKSHuE5N24Yl8F3UwYUUR1UEPaFObGD2tSvVKbvR+uT1Nrg==
-
-"@esbuild/linux-mips64el@0.19.11":
-  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.19.11.tgz#38eecf1cbb8c36a616261de858b3c10d03419af9"
-  integrity sha512-B5x9j0OgjG+v1dF2DkH34lr+7Gmv0kzX6/V0afF41FkPMMqaQ77pH7CrhWeR22aEeHKaeZVtZ6yFwlxOKPVFyg==
-
-"@esbuild/linux-ppc64@0.19.11":
-  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.19.11.tgz#9c5725a94e6ec15b93195e5a6afb821628afd912"
-  integrity sha512-MHrZYLeCG8vXblMetWyttkdVRjQlQUb/oMgBNurVEnhj4YWOr4G5lmBfZjHYQHHN0g6yDmCAQRR8MUHldvvRDA==
-
-"@esbuild/linux-riscv64@0.19.11":
-  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.19.11.tgz#2dc4486d474a2a62bbe5870522a9a600e2acb916"
-  integrity sha512-f3DY++t94uVg141dozDu4CCUkYW+09rWtaWfnb3bqe4w5NqmZd6nPVBm+qbz7WaHZCoqXqHz5p6CM6qv3qnSSQ==
-
-"@esbuild/linux-s390x@0.19.11":
-  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.19.11.tgz#4ad8567df48f7dd4c71ec5b1753b6f37561a65a8"
-  integrity sha512-A5xdUoyWJHMMlcSMcPGVLzYzpcY8QP1RtYzX5/bS4dvjBGVxdhuiYyFwp7z74ocV7WDc0n1harxmpq2ePOjI0Q==
-
-"@esbuild/linux-x64@0.19.11":
-  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.19.11.tgz#b7390c4d5184f203ebe7ddaedf073df82a658766"
-  integrity sha512-grbyMlVCvJSfxFQUndw5mCtWs5LO1gUlwP4CDi4iJBbVpZcqLVT29FxgGuBJGSzyOxotFG4LoO5X+M1350zmPA==
-
-"@esbuild/netbsd-x64@0.19.11":
-  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.19.11.tgz#d633c09492a1721377f3bccedb2d821b911e813d"
-  integrity sha512-13jvrQZJc3P230OhU8xgwUnDeuC/9egsjTkXN49b3GcS5BKvJqZn86aGM8W9pd14Kd+u7HuFBMVtrNGhh6fHEQ==
-
-"@esbuild/openbsd-x64@0.19.11":
-  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.19.11.tgz#17388c76e2f01125bf831a68c03a7ffccb65d1a2"
-  integrity sha512-ysyOGZuTp6SNKPE11INDUeFVVQFrhcNDVUgSQVDzqsqX38DjhPEPATpid04LCoUr2WXhQTEZ8ct/EgJCUDpyNw==
-
-"@esbuild/sunos-x64@0.19.11":
-  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.19.11.tgz#e320636f00bb9f4fdf3a80e548cb743370d41767"
-  integrity sha512-Hf+Sad9nVwvtxy4DXCZQqLpgmRTQqyFyhT3bZ4F2XlJCjxGmRFF0Shwn9rzhOYRB61w9VMXUkxlBy56dk9JJiQ==
-
-"@esbuild/win32-arm64@0.19.11":
-  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.19.11.tgz#c778b45a496e90b6fc373e2a2bb072f1441fe0ee"
-  integrity sha512-0P58Sbi0LctOMOQbpEOvOL44Ne0sqbS0XWHMvvrg6NE5jQ1xguCSSw9jQeUk2lfrXYsKDdOe6K+oZiwKPilYPQ==
-
-"@esbuild/win32-ia32@0.19.11":
-  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.19.11.tgz#481a65fee2e5cce74ec44823e6b09ecedcc5194c"
-  integrity sha512-6YOrWS+sDJDmshdBIQU+Uoyh7pQKrdykdefC1avn76ss5c+RN6gut3LZA4E2cH5xUEp5/cA0+YxRaVtRAb0xBg==
-
-"@esbuild/win32-x64@0.19.11":
-  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.19.11.tgz#a5d300008960bb39677c46bf16f53ec70d8dee04"
-  integrity sha512-vfkhltrjCAb603XaFhqhAF4LGDi2M4OrCRrFusyQ+iTLQ/o60QQXxc9cZC/FFpihBI9N1Grn6SMKVJ4KP7Fuiw==
-
-"@rollup/rollup-android-arm-eabi@4.9.5":
-  version "4.9.5"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.9.5.tgz#b752b6c88a14ccfcbdf3f48c577ccc3a7f0e66b9"
-  integrity sha512-idWaG8xeSRCfRq9KpRysDHJ/rEHBEXcHuJ82XY0yYFIWnLMjZv9vF/7DOq8djQ2n3Lk6+3qfSH8AqlmHlmi1MA==
-
-"@rollup/rollup-android-arm64@4.9.5":
-  version "4.9.5"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.9.5.tgz#33757c3a448b9ef77b6f6292d8b0ec45c87e9c1a"
-  integrity sha512-f14d7uhAMtsCGjAYwZGv6TwuS3IFaM4ZnGMUn3aCBgkcHAYErhV1Ad97WzBvS2o0aaDv4mVz+syiN0ElMyfBPg==
-
-"@rollup/rollup-darwin-arm64@4.9.5":
-  version "4.9.5"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.9.5.tgz#5234ba62665a3f443143bc8bcea9df2cc58f55fb"
-  integrity sha512-ndoXeLx455FffL68OIUrVr89Xu1WLzAG4n65R8roDlCoYiQcGGg6MALvs2Ap9zs7AHg8mpHtMpwC8jBBjZrT/w==
-
-"@rollup/rollup-darwin-x64@4.9.5":
-  version "4.9.5"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.9.5.tgz#981256c054d3247b83313724938d606798a919d1"
-  integrity sha512-UmElV1OY2m/1KEEqTlIjieKfVwRg0Zwg4PLgNf0s3glAHXBN99KLpw5A5lrSYCa1Kp63czTpVll2MAqbZYIHoA==
-
-"@rollup/rollup-linux-arm-gnueabihf@4.9.5":
-  version "4.9.5"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.9.5.tgz#120678a5a2b3a283a548dbb4d337f9187a793560"
-  integrity sha512-Q0LcU61v92tQB6ae+udZvOyZ0wfpGojtAKrrpAaIqmJ7+psq4cMIhT/9lfV6UQIpeItnq/2QDROhNLo00lOD1g==
-
-"@rollup/rollup-linux-arm64-gnu@4.9.5":
-  version "4.9.5"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.9.5.tgz#c99d857e2372ece544b6f60b85058ad259f64114"
-  integrity sha512-dkRscpM+RrR2Ee3eOQmRWFjmV/payHEOrjyq1VZegRUa5OrZJ2MAxBNs05bZuY0YCtpqETDy1Ix4i/hRqX98cA==
-
-"@rollup/rollup-linux-arm64-musl@4.9.5":
-  version "4.9.5"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.9.5.tgz#3064060f568a5718c2a06858cd6e6d24f2ff8632"
-  integrity sha512-QaKFVOzzST2xzY4MAmiDmURagWLFh+zZtttuEnuNn19AiZ0T3fhPyjPPGwLNdiDT82ZE91hnfJsUiDwF9DClIQ==
-
-"@rollup/rollup-linux-riscv64-gnu@4.9.5":
-  version "4.9.5"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.9.5.tgz#987d30b5d2b992fff07d055015991a57ff55fbad"
-  integrity sha512-HeGqmRJuyVg6/X6MpE2ur7GbymBPS8Np0S/vQFHDmocfORT+Zt76qu+69NUoxXzGqVP1pzaY6QIi0FJWLC3OPA==
-
-"@rollup/rollup-linux-x64-gnu@4.9.5":
-  version "4.9.5"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.9.5.tgz#85946ee4d068bd12197aeeec2c6f679c94978a49"
-  integrity sha512-Dq1bqBdLaZ1Gb/l2e5/+o3B18+8TI9ANlA1SkejZqDgdU/jK/ThYaMPMJpVMMXy2uRHvGKbkz9vheVGdq3cJfA==
-
-"@rollup/rollup-linux-x64-musl@4.9.5":
-  version "4.9.5"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.9.5.tgz#fe0b20f9749a60eb1df43d20effa96c756ddcbd4"
-  integrity sha512-ezyFUOwldYpj7AbkwyW9AJ203peub81CaAIVvckdkyH8EvhEIoKzaMFJj0G4qYJ5sw3BpqhFrsCc30t54HV8vg==
-
-"@rollup/rollup-win32-arm64-msvc@4.9.5":
-  version "4.9.5"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.9.5.tgz#422661ef0e16699a234465d15b2c1089ef963b2a"
-  integrity sha512-aHSsMnUw+0UETB0Hlv7B/ZHOGY5bQdwMKJSzGfDfvyhnpmVxLMGnQPGNE9wgqkLUs3+gbG1Qx02S2LLfJ5GaRQ==
-
-"@rollup/rollup-win32-ia32-msvc@4.9.5":
-  version "4.9.5"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.9.5.tgz#7b73a145891c202fbcc08759248983667a035d85"
-  integrity sha512-AiqiLkb9KSf7Lj/o1U3SEP9Zn+5NuVKgFdRIZkvd4N0+bYrTOovVd0+LmYCPQGbocT4kvFyK+LXCDiXPBF3fyA==
-
-"@rollup/rollup-win32-x64-msvc@4.9.5":
-  version "4.9.5"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.9.5.tgz#10491ccf4f63c814d4149e0316541476ea603602"
-  integrity sha512-1q+mykKE3Vot1kaFJIDoUFv5TuW+QQVaf2FmTT9krg86pQrGStOSJJ0Zil7CFagyxDuouTepzt5Y5TVzyajOdQ==
-
-"@types/estree@1.0.5":
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
-  integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
-
-esbuild@^0.19.3:
-  version "0.19.11"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.19.11.tgz#4a02dca031e768b5556606e1b468fe72e3325d96"
-  integrity sha512-HJ96Hev2hX/6i5cDVwcqiJBBtuo9+FeIJOtZ9W1kA5M6AMJRHUZlpYZ1/SbEwtO0ioNAW8rUooVpC/WehY2SfA==
-  optionalDependencies:
-    "@esbuild/aix-ppc64" "0.19.11"
-    "@esbuild/android-arm" "0.19.11"
-    "@esbuild/android-arm64" "0.19.11"
-    "@esbuild/android-x64" "0.19.11"
-    "@esbuild/darwin-arm64" "0.19.11"
-    "@esbuild/darwin-x64" "0.19.11"
-    "@esbuild/freebsd-arm64" "0.19.11"
-    "@esbuild/freebsd-x64" "0.19.11"
-    "@esbuild/linux-arm" "0.19.11"
-    "@esbuild/linux-arm64" "0.19.11"
-    "@esbuild/linux-ia32" "0.19.11"
-    "@esbuild/linux-loong64" "0.19.11"
-    "@esbuild/linux-mips64el" "0.19.11"
-    "@esbuild/linux-ppc64" "0.19.11"
-    "@esbuild/linux-riscv64" "0.19.11"
-    "@esbuild/linux-s390x" "0.19.11"
-    "@esbuild/linux-x64" "0.19.11"
-    "@esbuild/netbsd-x64" "0.19.11"
-    "@esbuild/openbsd-x64" "0.19.11"
-    "@esbuild/sunos-x64" "0.19.11"
-    "@esbuild/win32-arm64" "0.19.11"
-    "@esbuild/win32-ia32" "0.19.11"
-    "@esbuild/win32-x64" "0.19.11"
-
-fsevents@~2.3.2, fsevents@~2.3.3:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
-  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
-
-"js-tokens@^3.0.0 || ^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
-  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
-
-loose-envify@^1.1.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
-  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
-  dependencies:
-    js-tokens "^3.0.0 || ^4.0.0"
-
-nanoid@^3.3.7:
-  version "3.3.7"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
-  integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
-
-picocolors@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
-  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
-
-postcss@^8.4.32:
-  version "8.4.33"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.33.tgz#1378e859c9f69bf6f638b990a0212f43e2aaa742"
-  integrity sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==
-  dependencies:
-    nanoid "^3.3.7"
-    picocolors "^1.0.0"
-    source-map-js "^1.0.2"
-
-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==
-  dependencies:
-    loose-envify "^1.1.0"
-    scheduler "^0.23.0"
-
-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==
-  dependencies:
-    loose-envify "^1.1.0"
-
-rollup@^4.2.0:
-  version "4.9.5"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.9.5.tgz#62999462c90f4c8b5d7c38fc7161e63b29101b05"
-  integrity sha512-E4vQW0H/mbNMw2yLSqJyjtkHY9dslf/p0zuT1xehNRqUTBOFMqEjguDvqhXr7N7r/4ttb2jr4T41d3dncmIgbQ==
-  dependencies:
-    "@types/estree" "1.0.5"
-  optionalDependencies:
-    "@rollup/rollup-android-arm-eabi" "4.9.5"
-    "@rollup/rollup-android-arm64" "4.9.5"
-    "@rollup/rollup-darwin-arm64" "4.9.5"
-    "@rollup/rollup-darwin-x64" "4.9.5"
-    "@rollup/rollup-linux-arm-gnueabihf" "4.9.5"
-    "@rollup/rollup-linux-arm64-gnu" "4.9.5"
-    "@rollup/rollup-linux-arm64-musl" "4.9.5"
-    "@rollup/rollup-linux-riscv64-gnu" "4.9.5"
-    "@rollup/rollup-linux-x64-gnu" "4.9.5"
-    "@rollup/rollup-linux-x64-musl" "4.9.5"
-    "@rollup/rollup-win32-arm64-msvc" "4.9.5"
-    "@rollup/rollup-win32-ia32-msvc" "4.9.5"
-    "@rollup/rollup-win32-x64-msvc" "4.9.5"
-    fsevents "~2.3.2"
-
-scheduler@^0.23.0:
-  version "0.23.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
-  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
-  dependencies:
-    loose-envify "^1.1.0"
-
-source-map-js@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
-  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
-
-vite@5.0.6:
-  version "5.0.6"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-5.0.6.tgz#f9e13503a4c5ccd67312c67803dec921f3bdea7c"
-  integrity sha512-MD3joyAEBtV7QZPl2JVVUai6zHms3YOmLR+BpMzLlX2Yzjfcc4gTgNi09d/Rua3F4EtC8zdwPU8eQYyib4vVMQ==
-  dependencies:
-    esbuild "^0.19.3"
-    postcss "^8.4.32"
-    rollup "^4.2.0"
-  optionalDependencies:
-    fsevents "~2.3.3"

excalidraw-app/App.tsx

@@ -1,5 +1,6 @@
 import polyfill from "../packages/excalidraw/polyfill";
-import { useCallback, useEffect, useRef, useState } from "react";
+import LanguageDetector from "i18next-browser-languagedetector";
+import { useEffect, useRef, useState } from "react";
 import { trackEvent } from "../packages/excalidraw/analytics";
 import { getDefaultAppState } from "../packages/excalidraw/appState";
 import { ErrorDialog } from "../packages/excalidraw/components/ErrorDialog";
@@ -12,46 +13,48 @@ import {
   VERSION_TIMEOUT,
 } from "../packages/excalidraw/constants";
 import { loadFromBlob } from "../packages/excalidraw/data/blob";
-import type {
+import {
+  ExcalidrawElement,
   FileId,
   NonDeletedExcalidrawElement,
-  OrderedExcalidrawElement,
+  Theme,
 } from "../packages/excalidraw/element/types";
 import { useCallbackRefState } from "../packages/excalidraw/hooks/useCallbackRefState";
 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,
+  LibraryItems,
   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";
 import {
   FIREBASE_STORAGE_PREFIXES,
-  isExcalidrawPlusSignedUser,
   STORAGE_KEYS,
   SYNC_BROWSER_TABS_TIMEOUT,
 } from "./app_constants";
-import type { CollabAPI } from "./collab/Collab";
 import Collab, {
+  CollabAPI,
   collabAPIAtom,
+  collabDialogShownAtom,
   isCollaboratingAtom,
   isOfflineAtom,
 } from "./collab/Collab";
@@ -62,12 +65,16 @@ import {
   loadScene,
 } from "./data";
 import {
+  getLibraryItemsFromStorage,
   importFromLocalStorage,
   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,
@@ -76,13 +83,10 @@ import { updateStaleImageStatuses } from "./data/FileManager";
 import { newElementWith } from "../packages/excalidraw/element/mutateElement";
 import { isInitializedImageElement } from "../packages/excalidraw/element/typeChecks";
 import { loadFilesFromFirebase } from "./data/firebase";
-import {
-  LibraryIndexedDBAdapter,
-  LibraryLocalStorageMigrationAdapter,
-  LocalData,
-} from "./data/LocalData";
+import { LocalData } from "./data/LocalData";
 import { isBrowserStorageStateNewer } from "./data/tabSync";
 import clsx from "clsx";
+import { reconcileElements } from "./collab/reconciliation";
 import {
   parseLibraryTokensFromUrl,
   useHandleLibrary,
@@ -90,79 +94,21 @@ 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 {
-  CommandPalette,
-  DEFAULT_CATEGORIES,
-} from "../packages/excalidraw/components/CommandPalette/CommandPalette";
-import {
-  GithubIcon,
-  XBrandIcon,
-  DiscordIcon,
-  ExcalLogo,
-  usersIcon,
-  exportToPlus,
-  share,
-  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 +123,11 @@ if (window.self !== window.top) {
   }
 }
 
+const languageDetector = new LanguageDetector();
+languageDetector.init({
+  languageUtils: {},
+});
+
 const shareableLinkConfirmDialog = {
   title: t("overwriteConfirm.modal.shareableLink.title"),
   description: (
@@ -301,7 +252,7 @@ const initializeScene = async (opts: {
         },
         elements: reconcileElements(
           scene?.elements || [],
-          excalidrawAPI.getSceneElementsIncludingDeleted() as RemoteExcalidrawElement[],
+          excalidrawAPI.getSceneElementsIncludingDeleted(),
           excalidrawAPI.getAppState(),
         ),
       },
@@ -322,15 +273,16 @@ 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 +294,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
@@ -355,37 +305,17 @@ const ExcalidrawWrapper = () => {
   const [excalidrawAPI, excalidrawRefCallback] =
     useCallbackRefState<ExcalidrawImperativeAPI>();
 
-  const [, setShareDialogState] = useAtom(shareDialogStateAtom);
   const [collabAPI] = useAtom(collabAPIAtom);
+  const [, setCollabDialogShown] = useAtom(collabDialogShownAtom);
   const [isCollaborating] = useAtomWithInitialValue(isCollaboratingAtom, () => {
     return isCollaborationLink(window.location.href);
   });
-  const collabError = useAtomValue(collabErrorIndicatorAtom);
 
   useHandleLibrary({
     excalidrawAPI,
-    adapter: LibraryIndexedDBAdapter,
-    // TODO maybe remove this in several months (shipped: 24-03-11)
-    migrationAdapter: LibraryLocalStorageMigrationAdapter,
+    getInitialLibraryItems: getLibraryItemsFromStorage,
   });
 
-  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 +411,7 @@ const ExcalidrawWrapper = () => {
             excalidrawAPI.updateScene({
               ...data.scene,
               ...restore(data.scene, null, null, { repairBindings: true }),
-              storeAction: StoreAction.CAPTURE,
+              commitToHistory: true,
             });
           }
         });
@@ -505,17 +435,16 @@ 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) {
-              excalidrawAPI.updateLibrary({
-                libraryItems: data.libraryItems,
-              });
-            }
+          excalidrawAPI.updateLibrary({
+            libraryItems: getLibraryItemsFromStorage(),
           });
           collabAPI?.setUsername(username || "");
         }
@@ -606,8 +535,29 @@ const ExcalidrawWrapper = () => {
     };
   }, [excalidrawAPI]);
 
+  useEffect(() => {
+    languageDetector.cacheUserLanguage(langCode);
+  }, [langCode]);
+
+  const [theme, setTheme] = useState<Theme>(
+    () =>
+      (localStorage.getItem(
+        STORAGE_KEYS.LOCAL_STORAGE_THEME,
+      ) as Theme | null) ||
+      // FIXME migration from old LS scheme. Can be removed later. #5660
+      importFromLocalStorage().appState?.theme ||
+      THEME.LIGHT,
+  );
+
+  useEffect(() => {
+    localStorage.setItem(STORAGE_KEYS.LOCAL_STORAGE_THEME, theme);
+    // currently only used for body styling during init (see public/index.html),
+    // but may change in the future
+    document.documentElement.classList.toggle("dark", theme === THEME.DARK);
+  }, [theme]);
+
   const onChange = (
-    elements: readonly OrderedExcalidrawElement[],
+    elements: readonly ExcalidrawElement[],
     appState: AppState,
     files: BinaryFiles,
   ) => {
@@ -615,6 +565,8 @@ const ExcalidrawWrapper = () => {
       collabAPI.syncElements(elements);
     }
 
+    setTheme(appState.theme);
+
     // this check is redundant, but since this is a hot path, it's best
     // not to evaludate the nested expression every time
     if (!LocalData.isSavePaused()) {
@@ -640,22 +592,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,
-        () => forceRefresh((prev) => !prev),
-      );
-    }
   };
 
   const [latestShareableLink, setLatestShareableLink] = useState<string | null>(
@@ -666,38 +607,37 @@ const ExcalidrawWrapper = () => {
     exportedElements: readonly NonDeletedExcalidrawElement[],
     appState: Partial<AppState>,
     files: BinaryFiles,
+    canvas: HTMLCanvasElement,
   ) => {
     if (exportedElements.length === 0) {
       throw new Error(t("alerts.cannotExportEmptyCanvas"));
     }
-    try {
-      const { url, errorMessage } = await exportToBackend(
-        exportedElements,
-        {
-          ...appState,
-          viewBackgroundColor: appState.exportBackground
-            ? appState.viewBackgroundColor
-            : getDefaultAppState().viewBackgroundColor,
-        },
-        files,
-      );
+    if (canvas) {
+      try {
+        const { url, errorMessage } = await exportToBackend(
+          exportedElements,
+          {
+            ...appState,
+            viewBackgroundColor: appState.exportBackground
+              ? appState.viewBackgroundColor
+              : getDefaultAppState().viewBackgroundColor,
+          },
+          files,
+        );
 
-      if (errorMessage) {
-        throw new Error(errorMessage);
-      }
+        if (errorMessage) {
+          throw new Error(errorMessage);
+        }
 
-      if (url) {
-        setLatestShareableLink(url);
-      }
-    } catch (error: any) {
-      if (error.name !== "AbortError") {
-        const { width, height } = appState;
-        console.error(error, {
-          width,
-          height,
-          devicePixelRatio: window.devicePixelRatio,
-        });
-        throw new Error(error.message);
+        if (url) {
+          setLatestShareableLink(url);
+        }
+      } catch (error: any) {
+        if (error.name !== "AbortError") {
+          const { width, height } = canvas;
+          console.error(error, { width, height });
+          throw new Error(error.message);
+        }
       }
     }
   };
@@ -715,12 +655,16 @@ const ExcalidrawWrapper = () => {
     );
   };
 
-  const isOffline = useAtomValue(isOfflineAtom);
+  const onLibraryChange = async (items: LibraryItems) => {
+    if (!items.length) {
+      localStorage.removeItem(STORAGE_KEYS.LOCAL_STORAGE_LIBRARY);
+      return;
+    }
+    const serializedItems = JSON.stringify(items);
+    localStorage.setItem(STORAGE_KEYS.LOCAL_STORAGE_LIBRARY, serializedItems);
+  };
 
-  const onCollabDialogOpen = useCallback(
-    () => setShareDialogState({ isOpen: true, type: "collaborationOnly" }),
-    [setShareDialogState],
-  );
+  const isOffline = useAtomValue(isOfflineAtom);
 
   // browsers generally prevent infinite self-embedding, there are
   // cases where it still happens, and while we disallow self-embedding
@@ -741,45 +685,6 @@ const ExcalidrawWrapper = () => {
     );
   }
 
-  const ExcalidrawPlusCommand = {
-    label: "Excalidraw+",
-    category: DEFAULT_CATEGORIES.links,
-    predicate: true,
-    icon: <div style={{ width: 14 }}>{ExcalLogo}</div>,
-    keywords: ["plus", "cloud", "server"],
-    perform: () => {
-      window.open(
-        `${
-          import.meta.env.VITE_APP_PLUS_LP
-        }/plus?utm_source=excalidraw&utm_medium=app&utm_content=command_palette`,
-        "_blank",
-      );
-    },
-  };
-  const ExcalidrawPlusAppCommand = {
-    label: "Sign up",
-    category: DEFAULT_CATEGORIES.links,
-    predicate: true,
-    icon: <div style={{ width: 14 }}>{ExcalLogo}</div>,
-    keywords: [
-      "excalidraw",
-      "plus",
-      "cloud",
-      "server",
-      "signin",
-      "login",
-      "signup",
-    ],
-    perform: () => {
-      window.open(
-        `${
-          import.meta.env.VITE_APP_PLUS_APP
-        }?utm_source=excalidraw&utm_medium=app&utm_content=command_palette`,
-        "_blank",
-      );
-    },
-  };
-
   return (
     <div
       style={{ height: "100%" }}
@@ -798,30 +703,27 @@ const ExcalidrawWrapper = () => {
             toggleTheme: true,
             export: {
               onExportToBackend,
-              renderCustomUI: excalidrawAPI
-                ? (elements, appState, files) => {
-                    return (
-                      <ExportToExcalidrawPlus
-                        elements={elements}
-                        appState={appState}
-                        files={files}
-                        name={excalidrawAPI.getName()}
-                        onError={(error) => {
-                          excalidrawAPI?.updateScene({
-                            appState: {
-                              errorMessage: error.message,
-                            },
-                          });
-                        }}
-                        onSuccess={() => {
-                          excalidrawAPI.updateScene({
-                            appState: { openDialog: null },
-                          });
-                        }}
-                      />
-                    );
-                  }
-                : undefined,
+              renderCustomUI: (elements, appState, files) => {
+                return (
+                  <ExportToExcalidrawPlus
+                    elements={elements}
+                    appState={appState}
+                    files={files}
+                    onError={(error) => {
+                      excalidrawAPI?.updateScene({
+                        appState: {
+                          errorMessage: error.message,
+                        },
+                      });
+                    }}
+                    onSuccess={() => {
+                      excalidrawAPI?.updateScene({
+                        appState: { openDialog: null },
+                      });
+                    }}
+                  />
+                );
+              },
             },
           },
         }}
@@ -829,35 +731,28 @@ const ExcalidrawWrapper = () => {
         renderCustomStats={renderCustomStats}
         detectScroll={false}
         handleKeyboardGlobally={true}
+        onLibraryChange={onLibraryChange}
         autoFocus={true}
-        theme={editorTheme}
+        theme={theme}
         renderTopRightUI={(isMobile) => {
           if (isMobile || !collabAPI || isCollabDisabled) {
             return null;
           }
           return (
-            <div className="top-right-ui">
-              {collabError.message && <CollabError collabError={collabError} />}
-              <LiveCollaborationTrigger
-                isCollaborating={isCollaborating}
-                onSelect={() =>
-                  setShareDialogState({ isOpen: true, type: "share" })
-                }
-              />
-            </div>
+            <LiveCollaborationTrigger
+              isCollaborating={isCollaborating}
+              onSelect={() => setCollabDialogShown(true)}
+            />
           );
         }}
       >
         <AppMainMenu
-          onCollabDialogOpen={onCollabDialogOpen}
+          setCollabDialogShown={setCollabDialogShown}
           isCollaborating={isCollaborating}
           isCollabEnabled={!isCollabDisabled}
-          theme={appTheme}
-          setTheme={(theme) => setAppTheme(theme)}
-          refresh={() => forceRefresh((prev) => !prev)}
         />
         <AppWelcomeScreen
-          onCollabDialogOpen={onCollabDialogOpen}
+          setCollabDialogShown={setCollabDialogShown}
           isCollabEnabled={!isCollabDisabled}
         />
         <OverwriteConfirmDialog>
@@ -872,7 +767,6 @@ const ExcalidrawWrapper = () => {
                   excalidrawAPI.getSceneElements(),
                   excalidrawAPI.getAppState(),
                   excalidrawAPI.getFiles(),
-                  excalidrawAPI.getName(),
                 );
               }}
             >
@@ -880,9 +774,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">
@@ -899,226 +848,11 @@ const ExcalidrawWrapper = () => {
         {excalidrawAPI && !isCollabDisabled && (
           <Collab excalidrawAPI={excalidrawAPI} />
         )}
-
-        <ShareDialog
-          collabAPI={collabAPI}
-          onExportToBackend={async () => {
-            if (excalidrawAPI) {
-              try {
-                await onExportToBackend(
-                  excalidrawAPI.getSceneElements(),
-                  excalidrawAPI.getAppState(),
-                  excalidrawAPI.getFiles(),
-                );
-              } catch (error: any) {
-                setErrorMessage(error.message);
-              }
-            }
-          }}
-        />
-
         {errorMessage && (
           <ErrorDialog onClose={() => setErrorMessage("")}>
             {errorMessage}
           </ErrorDialog>
         )}
-
-        <CommandPalette
-          customCommandPaletteItems={[
-            {
-              label: t("labels.liveCollaboration"),
-              category: DEFAULT_CATEGORIES.app,
-              keywords: [
-                "team",
-                "multiplayer",
-                "share",
-                "public",
-                "session",
-                "invite",
-              ],
-              icon: usersIcon,
-              perform: () => {
-                setShareDialogState({
-                  isOpen: true,
-                  type: "collaborationOnly",
-                });
-              },
-            },
-            {
-              label: t("roomDialog.button_stopSession"),
-              category: DEFAULT_CATEGORIES.app,
-              predicate: () => !!collabAPI?.isCollaborating(),
-              keywords: [
-                "stop",
-                "session",
-                "end",
-                "leave",
-                "close",
-                "exit",
-                "collaboration",
-              ],
-              perform: () => {
-                if (collabAPI) {
-                  collabAPI.stopCollaboration();
-                  if (!collabAPI.isCollaborating()) {
-                    setShareDialogState({ isOpen: false });
-                  }
-                }
-              },
-            },
-            {
-              label: t("labels.share"),
-              category: DEFAULT_CATEGORIES.app,
-              predicate: true,
-              icon: share,
-              keywords: [
-                "link",
-                "shareable",
-                "readonly",
-                "export",
-                "publish",
-                "snapshot",
-                "url",
-                "collaborate",
-                "invite",
-              ],
-              perform: async () => {
-                setShareDialogState({ isOpen: true, type: "share" });
-              },
-            },
-            {
-              label: "GitHub",
-              icon: GithubIcon,
-              category: DEFAULT_CATEGORIES.links,
-              predicate: true,
-              keywords: [
-                "issues",
-                "bugs",
-                "requests",
-                "report",
-                "features",
-                "social",
-                "community",
-              ],
-              perform: () => {
-                window.open(
-                  "https://github.com/excalidraw/excalidraw",
-                  "_blank",
-                  "noopener noreferrer",
-                );
-              },
-            },
-            {
-              label: t("labels.followUs"),
-              icon: XBrandIcon,
-              category: DEFAULT_CATEGORIES.links,
-              predicate: true,
-              keywords: ["twitter", "contact", "social", "community"],
-              perform: () => {
-                window.open(
-                  "https://x.com/excalidraw",
-                  "_blank",
-                  "noopener noreferrer",
-                );
-              },
-            },
-            {
-              label: t("labels.discordChat"),
-              category: DEFAULT_CATEGORIES.links,
-              predicate: true,
-              icon: DiscordIcon,
-              keywords: [
-                "chat",
-                "talk",
-                "contact",
-                "bugs",
-                "requests",
-                "report",
-                "feedback",
-                "suggestions",
-                "social",
-                "community",
-              ],
-              perform: () => {
-                window.open(
-                  "https://discord.gg/UexuTaE",
-                  "_blank",
-                  "noopener noreferrer",
-                );
-              },
-            },
-            {
-              label: "YouTube",
-              icon: youtubeIcon,
-              category: DEFAULT_CATEGORIES.links,
-              predicate: true,
-              keywords: ["features", "tutorials", "howto", "help", "community"],
-              perform: () => {
-                window.open(
-                  "https://youtube.com/@excalidraw",
-                  "_blank",
-                  "noopener noreferrer",
-                );
-              },
-            },
-            ...(isExcalidrawPlusSignedUser
-              ? [
-                  {
-                    ...ExcalidrawPlusAppCommand,
-                    label: "Sign in / Go to Excalidraw+",
-                  },
-                ]
-              : [ExcalidrawPlusCommand, ExcalidrawPlusAppCommand]),
-
-            {
-              label: t("overwriteConfirm.action.excalidrawPlus.button"),
-              category: DEFAULT_CATEGORIES.export,
-              icon: exportToPlus,
-              predicate: true,
-              keywords: ["plus", "export", "save", "backup"],
-              perform: () => {
-                if (excalidrawAPI) {
-                  exportToExcalidrawPlus(
-                    excalidrawAPI.getSceneElements(),
-                    excalidrawAPI.getAppState(),
-                    excalidrawAPI.getFiles(),
-                    excalidrawAPI.getName(),
-                  );
-                }
-              },
-            },
-            {
-              ...CommandPalette.defaultItems.toggleTheme,
-              perform: () => {
-                setAppTheme(
-                  editorTheme === THEME.DARK ? THEME.LIGHT : THEME.DARK,
-                );
-              },
-            },
-            {
-              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>
   );

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

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;
-};

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;
-};

excalidraw-app/app_constants.ts

@@ -39,15 +39,10 @@ export const STORAGE_KEYS = {
   LOCAL_STORAGE_ELEMENTS: "excalidraw",
   LOCAL_STORAGE_APP_STATE: "excalidraw-state",
   LOCAL_STORAGE_COLLAB: "excalidraw-collab",
+  LOCAL_STORAGE_LIBRARY: "excalidraw-library",
   LOCAL_STORAGE_THEME: "excalidraw-theme",
-  LOCAL_STORAGE_DEBUG: "excalidraw-debug",
   VERSION_DATA_STATE: "version-dataState",
   VERSION_FILES: "version-files",
-
-  IDB_LIBRARY: "excalidraw-library",
-
-  // do not use apart from migrations
-  __LEGACY_LOCAL_STORAGE_LIBRARY: "excalidraw-library",
 } as const;
 
 export const COOKIES = {

excalidraw-app/collab/Collab.tsx

@@ -1,25 +1,22 @@
 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 +33,13 @@ import {
   SYNC_FULL_SCENE_INTERVAL_MS,
   WS_EVENTS,
 } from "../app_constants";
-import type {
-  SocketUpdateDataSource,
-  SyncableExcalidrawElement,
-} from "../data";
 import {
   generateCollaborationLinkData,
   getCollaborationLink,
+  getCollabServer,
   getSyncableElements,
+  SocketUpdateDataSource,
+  SyncableExcalidrawElement,
 } from "../data";
 import {
   isSavedToFirebase,
@@ -57,6 +53,7 @@ import {
   saveUsernameToLocalStorage,
 } from "../data/localStorage";
 import Portal from "./Portal";
+import RoomDialog from "./RoomDialog";
 import { t } from "../../packages/excalidraw/i18n";
 import { UserIdleState } from "../../packages/excalidraw/types";
 import {
@@ -74,34 +71,30 @@ import {
   isInitializedImageElement,
 } from "../../packages/excalidraw/element/typeChecks";
 import { newElementWith } from "../../packages/excalidraw/element/mutateElement";
+import {
+  ReconciledElements,
+  reconcileElements as _reconcileElements,
+} from "./reconciliation";
 import { decryptData } from "../../packages/excalidraw/data/encryption";
 import { resetBrowserStateVersions } from "../data/tabSync";
 import { LocalData } from "../data/LocalData";
-import { atom } from "jotai";
+import { atom, useAtom } 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 {
-  ReconciledExcalidrawElement,
-  RemoteExcalidrawElement,
-} from "../../packages/excalidraw/data/reconcile";
 
 export const collabAPIAtom = atom<CollabAPI | null>(null);
+export const collabDialogShownAtom = atom(false);
 export const isCollaboratingAtom = atom(false);
 export const isOfflineAtom = atom(false);
 
 interface CollabState {
-  errorMessage: string | null;
-  /** errors related to saving */
-  dialogNotifiedErrors: Record<string, boolean>;
+  errorMessage: string;
   username: string;
-  activeRoomLink: string | null;
+  activeRoomLink: string;
 }
 
-export const activeRoomLinkAtom = atom<string | null>(null);
-
 type CollabInstance = InstanceType<typeof Collab>;
 
 export interface CollabAPI {
@@ -112,20 +105,19 @@ export interface CollabAPI {
   stopCollaboration: CollabInstance["stopCollaboration"];
   syncElements: CollabInstance["syncElements"];
   fetchImageFilesFromFirebase: CollabInstance["fetchImageFilesFromFirebase"];
-  setUsername: CollabInstance["setUsername"];
-  getUsername: CollabInstance["getUsername"];
-  getActiveRoomLink: CollabInstance["getActiveRoomLink"];
-  setCollabError: CollabInstance["setErrorDialog"];
+  setUsername: (username: string) => void;
 }
 
-interface CollabProps {
+interface PublicProps {
   excalidrawAPI: ExcalidrawImperativeAPI;
 }
 
-class Collab extends PureComponent<CollabProps, CollabState> {
+type Props = PublicProps & { modalIsShown: boolean };
+
+class Collab extends PureComponent<Props, CollabState> {
   portal: Portal;
   fileManager: FileManager;
-  excalidrawAPI: CollabProps["excalidrawAPI"];
+  excalidrawAPI: Props["excalidrawAPI"];
   activeIntervalId: number | null;
   idleTimeoutId: number | null;
 
@@ -133,13 +125,12 @@ class Collab extends PureComponent<CollabProps, CollabState> {
   private lastBroadcastedOrReceivedSceneVersion: number = -1;
   private collaborators = new Map<SocketId, Collaborator>();
 
-  constructor(props: CollabProps) {
+  constructor(props: Props) {
     super(props);
     this.state = {
-      errorMessage: null,
-      dialogNotifiedErrors: {},
+      errorMessage: "",
       username: importUsernameFromLocalStorage() || "",
-      activeRoomLink: null,
+      activeRoomLink: "",
     };
     this.portal = new Portal(this);
     this.fileManager = new FileManager({
@@ -204,9 +195,6 @@ class Collab extends PureComponent<CollabProps, CollabState> {
       fetchImageFilesFromFirebase: this.fetchImageFilesFromFirebase,
       stopCollaboration: this.stopCollaboration,
       setUsername: this.setUsername,
-      getUsername: this.getUsername,
-      getActiveRoomLink: this.getActiveRoomLink,
-      setCollabError: this.setErrorDialog,
     };
 
     appJotaiStore.set(collabAPIAtom, collabAPI);
@@ -279,39 +267,24 @@ class Collab extends PureComponent<CollabProps, CollabState> {
     syncableElements: readonly SyncableExcalidrawElement[],
   ) => {
     try {
-      const storedElements = await saveToFirebase(
+      const savedData = await saveToFirebase(
         this.portal,
         syncableElements,
         this.excalidrawAPI.getAppState(),
       );
 
-      this.resetErrorIndicator();
-
-      if (this.isCollaborating() && storedElements) {
-        this.handleRemoteSceneUpdate(this._reconcileElements(storedElements));
+      if (this.isCollaborating() && savedData && savedData.reconciledElements) {
+        this.handleRemoteSceneUpdate(
+          this.reconcileElements(savedData.reconciledElements),
+        );
       }
     } catch (error: any) {
-      const errorMessage = /is longer than.*?bytes/.test(error.message)
-        ? t("errors.collabSaveFailed_sizeExceeded")
-        : t("errors.collabSaveFailed");
-
-      if (
-        !this.state.dialogNotifiedErrors[errorMessage] ||
-        !this.isCollaborating()
-      ) {
-        this.setErrorDialog(errorMessage);
-        this.setState({
-          dialogNotifiedErrors: {
-            ...this.state.dialogNotifiedErrors,
-            [errorMessage]: true,
-          },
-        });
-      }
-
-      if (this.isCollaborating()) {
-        this.setErrorIndicator(errorMessage);
-      }
-
+      this.setState({
+        // firestore doesn't return a specific error code when size exceeded
+        errorMessage: /is longer than.*?bytes/.test(error.message)
+          ? t("errors.collabSaveFailed_sizeExceeded")
+          : t("errors.collabSaveFailed"),
+      });
       console.error(error);
     }
   };
@@ -320,7 +293,6 @@ class Collab extends PureComponent<CollabProps, CollabState> {
     this.queueBroadcastAllElements.cancel();
     this.queueSaveToFirebase.cancel();
     this.loadImageFiles.cancel();
-    this.resetErrorIndicator(true);
 
     this.saveCollabRoomToFirebase(
       getSyncableElements(
@@ -359,7 +331,7 @@ class Collab extends PureComponent<CollabProps, CollabState> {
 
       this.excalidrawAPI.updateScene({
         elements,
-        storeAction: StoreAction.UPDATE,
+        commitToHistory: false,
       });
     }
   };
@@ -370,7 +342,9 @@ class Collab extends PureComponent<CollabProps, CollabState> {
     this.fileManager.reset();
     if (!opts?.isUnload) {
       this.setIsCollaborating(false);
-      this.setActiveRoomLink(null);
+      this.setState({
+        activeRoomLink: "",
+      });
       this.collaborators = new Map();
       this.excalidrawAPI.updateScene({
         collaborators: this.collaborators,
@@ -432,11 +406,11 @@ class Collab extends PureComponent<CollabProps, CollabState> {
 
   startCollaboration = async (
     existingRoomLinkData: null | { roomId: string; roomKey: string },
-  ) => {
+  ): Promise<ImportedDataState | null> => {
     if (!this.state.username) {
       import("@excalidraw/random-username").then(({ getRandomUsername }) => {
         const username = getRandomUsername();
-        this.setUsername(username);
+        this.onUsernameChange(username);
       });
     }
 
@@ -458,11 +432,7 @@ class Collab extends PureComponent<CollabProps, CollabState> {
       );
     }
 
-    // TODO: `ImportedDataState` type here seems abused
-    const scenePromise = resolvablePromise<
-      | (ImportedDataState & { elements: readonly OrderedExcalidrawElement[] })
-      | null
-    >();
+    const scenePromise = resolvablePromise<ImportedDataState | null>();
 
     this.setIsCollaborating(true);
     LocalData.pauseSave("collaboration");
@@ -482,9 +452,13 @@ class Collab extends PureComponent<CollabProps, CollabState> {
     this.fallbackInitializationHandler = fallbackInitializationHandler;
 
     try {
+      const socketServerData = await getCollabServer();
+
       this.portal.socket = this.portal.open(
-        socketIOClient(import.meta.env.VITE_APP_WS_SERVER_URL, {
-          transports: ["websocket", "polling"],
+        socketIOClient(socketServerData.url, {
+          transports: socketServerData.polling
+            ? ["websocket", "polling"]
+            : ["websocket"],
         }),
         roomId,
         roomKey,
@@ -493,7 +467,7 @@ class Collab extends PureComponent<CollabProps, CollabState> {
       this.portal.socket.once("connect_error", fallbackInitializationHandler);
     } catch (error: any) {
       console.error(error);
-      this.setErrorDialog(error.message);
+      this.setState({ errorMessage: error.message });
       return null;
     }
 
@@ -504,13 +478,14 @@ class Collab extends PureComponent<CollabProps, CollabState> {
         }
         return element;
       });
-      // remove deleted elements from elements array to ensure we don't
+      // remove deleted elements from elements array & history to ensure we don't
       // expose potentially sensitive user data in case user manually deletes
       // existing elements (or clears scene), which would otherwise be persisted
       // to database even if deleted before creating the room.
+      this.excalidrawAPI.history.clear();
       this.excalidrawAPI.updateScene({
         elements,
-        storeAction: StoreAction.UPDATE,
+        commitToHistory: true,
       });
 
       this.saveCollabRoomToFirebase(getSyncableElements(elements));
@@ -544,9 +519,10 @@ class Collab extends PureComponent<CollabProps, CollabState> {
             if (!this.portal.socketInitialized) {
               this.initializeRoom({ fetchScene: false });
               const remoteElements = decryptedData.payload.elements;
-              const reconciledElements =
-                this._reconcileElements(remoteElements);
-              this.handleRemoteSceneUpdate(reconciledElements);
+              const reconciledElements = this.reconcileElements(remoteElements);
+              this.handleRemoteSceneUpdate(reconciledElements, {
+                init: true,
+              });
               // noop if already resolved via init from firebase
               scenePromise.resolve({
                 elements: reconciledElements,
@@ -557,7 +533,7 @@ class Collab extends PureComponent<CollabProps, CollabState> {
           }
           case WS_SUBTYPES.UPDATE:
             this.handleRemoteSceneUpdate(
-              this._reconcileElements(decryptedData.payload.elements),
+              this.reconcileElements(decryptedData.payload.elements),
             );
             break;
           case WS_SUBTYPES.MOUSE_LOCATION: {
@@ -653,7 +629,9 @@ class Collab extends PureComponent<CollabProps, CollabState> {
 
     this.initializeIdleDetector();
 
-    this.setActiveRoomLink(window.location.href);
+    this.setState({
+      activeRoomLink: window.location.href,
+    });
 
     return scenePromise;
   };
@@ -705,15 +683,17 @@ class Collab extends PureComponent<CollabProps, CollabState> {
     return null;
   };
 
-  private _reconcileElements = (
+  private reconcileElements = (
     remoteElements: readonly ExcalidrawElement[],
-  ): ReconciledExcalidrawElement[] => {
+  ): ReconciledElements => {
     const localElements = this.getSceneElementsIncludingDeleted();
     const appState = this.excalidrawAPI.getAppState();
-    const restoredRemoteElements = restoreElements(remoteElements, null);
-    const reconciledElements = reconcileElements(
+
+    remoteElements = restoreElements(remoteElements, null);
+
+    const reconciledElements = _reconcileElements(
       localElements,
-      restoredRemoteElements as RemoteExcalidrawElement[],
+      remoteElements,
       appState,
     );
 
@@ -744,13 +724,20 @@ class Collab extends PureComponent<CollabProps, CollabState> {
   }, LOAD_IMAGES_TIMEOUT);
 
   private handleRemoteSceneUpdate = (
-    elements: ReconciledExcalidrawElement[],
+    elements: ReconciledElements,
+    { init = false }: { init?: boolean } = {},
   ) => {
     this.excalidrawAPI.updateScene({
       elements,
-      storeAction: StoreAction.UPDATE,
+      commitToHistory: !!init,
     });
 
+    // We haven't yet implemented multiplayer undo functionality, so we clear the undo stack
+    // when we receive any messages from another peer. This UX can be pretty rough -- if you
+    // undo, a user makes a change, and then try to redo, your element(s) will be lost. However,
+    // right now we think this is the right tradeoff.
+    this.excalidrawAPI.history.clear();
+
     this.loadImageFiles();
   };
 
@@ -883,7 +870,7 @@ class Collab extends PureComponent<CollabProps, CollabState> {
     this.portal.broadcastIdleChange(userState);
   };
 
-  broadcastElements = (elements: readonly OrderedExcalidrawElement[]) => {
+  broadcastElements = (elements: readonly ExcalidrawElement[]) => {
     if (
       getSceneVersion(elements) >
       this.getLastBroadcastedOrReceivedSceneVersion()
@@ -894,7 +881,7 @@ class Collab extends PureComponent<CollabProps, CollabState> {
     }
   };
 
-  syncElements = (elements: readonly OrderedExcalidrawElement[]) => {
+  syncElements = (elements: readonly ExcalidrawElement[]) => {
     this.broadcastElements(elements);
     this.queueSaveToFirebase();
   };
@@ -927,49 +914,41 @@ class Collab extends PureComponent<CollabProps, CollabState> {
     { leading: false },
   );
 
+  handleClose = () => {
+    appJotaiStore.set(collabDialogShownAtom, false);
+  };
+
   setUsername = (username: string) => {
     this.setState({ username });
+  };
+
+  onUsernameChange = (username: string) => {
+    this.setUsername(username);
     saveUsernameToLocalStorage(username);
   };
 
-  getUsername = () => this.state.username;
-
-  setActiveRoomLink = (activeRoomLink: string | null) => {
-    this.setState({ activeRoomLink });
-    appJotaiStore.set(activeRoomLinkAtom, activeRoomLink);
-  };
-
-  getActiveRoomLink = () => this.state.activeRoomLink;
-
-  setErrorIndicator = (errorMessage: string | null) => {
-    appJotaiStore.set(collabErrorIndicatorAtom, {
-      message: errorMessage,
-      nonce: Date.now(),
-    });
-  };
-
-  resetErrorIndicator = (resetDialogNotifiedErrors = false) => {
-    appJotaiStore.set(collabErrorIndicatorAtom, { message: null, nonce: 0 });
-    if (resetDialogNotifiedErrors) {
-      this.setState({
-        dialogNotifiedErrors: {},
-      });
-    }
-  };
-
-  setErrorDialog = (errorMessage: string | null) => {
-    this.setState({
-      errorMessage,
-    });
-  };
-
   render() {
-    const { errorMessage } = this.state;
+    const { username, errorMessage, activeRoomLink } = this.state;
+
+    const { modalIsShown } = this.props;
 
     return (
       <>
-        {errorMessage != null && (
-          <ErrorDialog onClose={() => this.setErrorDialog(null)}>
+        {modalIsShown && (
+          <RoomDialog
+            handleClose={this.handleClose}
+            activeRoomLink={activeRoomLink}
+            username={username}
+            onUsernameChange={this.onUsernameChange}
+            onRoomCreate={() => this.startCollaboration(null)}
+            onRoomDestroy={this.stopCollaboration}
+            setErrorMessage={(errorMessage) => {
+              this.setState({ errorMessage });
+            }}
+          />
+        )}
+        {errorMessage && (
+          <ErrorDialog onClose={() => this.setState({ errorMessage: "" })}>
             {errorMessage}
           </ErrorDialog>
         )}
@@ -988,6 +967,11 @@ if (import.meta.env.MODE === ENV.TEST || import.meta.env.DEV) {
   window.collab = window.collab || ({} as Window["collab"]);
 }
 
-export default Collab;
+const _Collab: React.FC<PublicProps> = (props) => {
+  const [collabDialogShown] = useAtom(collabDialogShownAtom);
+  return <Collab {...props} modalIsShown={collabDialogShown} />;
+};
+
+export default _Collab;
 
 export type TCollabClass = Collab;

excalidraw-app/collab/CollabError.scss

@@ -1,35 +0,0 @@
-@import "../../packages/excalidraw/css/variables.module.scss";
-
-.excalidraw {
-  .collab-errors-button {
-    width: 26px;
-    height: 26px;
-    margin-inline-end: 1rem;
-
-    color: var(--color-danger);
-
-    flex-shrink: 0;
-  }
-
-  .collab-errors-button-shake {
-    animation: strong-shake 0.15s 6;
-  }
-
-  @keyframes strong-shake {
-    0% {
-      transform: rotate(0deg);
-    }
-    25% {
-      transform: rotate(10deg);
-    }
-    50% {
-      transform: rotate(0deg);
-    }
-    75% {
-      transform: rotate(-10deg);
-    }
-    100% {
-      transform: rotate(0deg);
-    }
-  }
-}

excalidraw-app/collab/CollabError.tsx

@@ -1,54 +0,0 @@
-import { Tooltip } from "../../packages/excalidraw/components/Tooltip";
-import { warning } from "../../packages/excalidraw/components/icons";
-import clsx from "clsx";
-import { useEffect, useRef, useState } from "react";
-
-import "./CollabError.scss";
-import { atom } from "jotai";
-
-type ErrorIndicator = {
-  message: string | null;
-  /** used to rerun the useEffect responsible for animation */
-  nonce: number;
-};
-
-export const collabErrorIndicatorAtom = atom<ErrorIndicator>({
-  message: null,
-  nonce: 0,
-});
-
-const CollabError = ({ collabError }: { collabError: ErrorIndicator }) => {
-  const [isAnimating, setIsAnimating] = useState(false);
-  const clearAnimationRef = useRef<string | number | NodeJS.Timeout>();
-
-  useEffect(() => {
-    setIsAnimating(true);
-    clearAnimationRef.current = setTimeout(() => {
-      setIsAnimating(false);
-    }, 1000);
-
-    return () => {
-      clearTimeout(clearAnimationRef.current);
-    };
-  }, [collabError.message, collabError.nonce]);
-
-  if (!collabError.message) {
-    return null;
-  }
-
-  return (
-    <Tooltip label={collabError.message} long={true}>
-      <div
-        className={clsx("collab-errors-button", {
-          "collab-errors-button-shake": isAnimating,
-        })}
-      >
-        {warning}
-      </div>
-    </Tooltip>
-  );
-};
-
-CollabError.displayName = "CollabError";
-
-export default CollabError;

excalidraw-app/collab/Portal.tsx

@@ -1,15 +1,14 @@
-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 { ExcalidrawElement } from "../../packages/excalidraw/element/types";
 import { WS_EVENTS, FILE_UPLOAD_TIMEOUT, WS_SUBTYPES } from "../app_constants";
-import type {
+import {
   OnUserFollowedPayload,
   SocketId,
   UserIdleState,
@@ -17,9 +16,10 @@ import type {
 import { trackEvent } from "../../packages/excalidraw/analytics";
 import throttle from "lodash.throttle";
 import { newElementWith } from "../../packages/excalidraw/element/mutateElement";
+import { BroadcastedExcalidrawElement } from "./reconciliation";
 import { encryptData } from "../../packages/excalidraw/data/encryption";
+import { PRECEDING_ELEMENT_KEY } from "../../packages/excalidraw/constants";
 import type { Socket } from "socket.io-client";
-import { StoreAction } from "../../packages/excalidraw";
 
 class Portal {
   collab: TCollabClass;
@@ -116,31 +116,24 @@ 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 (
     updateType: WS_SUBTYPES.INIT | WS_SUBTYPES.UPDATE,
-    elements: readonly OrderedExcalidrawElement[],
+    allElements: readonly ExcalidrawElement[],
     syncAll: boolean,
   ) => {
     if (updateType === WS_SUBTYPES.INIT && !syncAll) {
@@ -150,17 +143,25 @@ class Portal {
     // sync out only the elements we think we need to to save bandwidth.
     // periodically we'll resync the whole thing to make sure no one diverges
     // due to a dropped message (server goes down etc).
-    const syncableElements = elements.reduce((acc, element) => {
-      if (
-        (syncAll ||
-          !this.broadcastedElementVersions.has(element.id) ||
-          element.version > this.broadcastedElementVersions.get(element.id)!) &&
-        isSyncableElement(element)
-      ) {
-        acc.push(element);
-      }
-      return acc;
-    }, [] as SyncableExcalidrawElement[]);
+    const syncableElements = allElements.reduce(
+      (acc, element: BroadcastedExcalidrawElement, idx, elements) => {
+        if (
+          (syncAll ||
+            !this.broadcastedElementVersions.has(element.id) ||
+            element.version >
+              this.broadcastedElementVersions.get(element.id)!) &&
+          isSyncableElement(element)
+        ) {
+          acc.push({
+            ...element,
+            // z-index info for the reconciler
+            [PRECEDING_ELEMENT_KEY]: idx === 0 ? "^" : elements[idx - 1]?.id,
+          });
+        }
+        return acc;
+      },
+      [] as BroadcastedExcalidrawElement[],
+    );
 
     const data: SocketUpdateDataSource[typeof updateType] = {
       type: updateType,

excalidraw-app/collab/RoomDialog.scss

@@ -1,7 +1,7 @@
 @import "../../packages/excalidraw/css/variables.module.scss";
 
 .excalidraw {
-  .ShareDialog {
+  .RoomDialog {
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
@@ -10,25 +10,8 @@
       height: calc(100vh - 5rem);
     }
 
-    &__separator {
-      border-top: 1px solid var(--dialog-border-color);
-      text-align: center;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      margin-top: 1em;
-
-      span {
-        background: var(--island-bg-color);
-        padding: 0px 0.75rem;
-        transform: translateY(-1ch);
-        display: inline-flex;
-        line-height: 1;
-      }
-    }
-
     &__popover {
-      @keyframes ShareDialog__popover__scaleIn {
+      @keyframes RoomDialog__popover__scaleIn {
         from {
           opacity: 0;
         }
@@ -58,8 +41,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;
@@ -67,10 +50,10 @@
       }
 
       transform-origin: var(--radix-popover-content-transform-origin);
-      animation: ShareDialog__popover__scaleIn 150ms ease-out;
+      animation: RoomDialog__popover__scaleIn 150ms ease-out;
     }
 
-    &__picker {
+    &__inactive {
       font-family: "Assistant";
 
       &__illustration {
@@ -112,7 +95,7 @@
         }
       }
 
-      &__button {
+      &__start_session {
         display: flex;
 
         align-items: center;

excalidraw-app/collab/RoomDialog.tsx

@@ -0,0 +1,219 @@
+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);
+
+      setJustCopied(true);
+
+      if (timerRef.current) {
+        window.clearTimeout(timerRef.current);
+      }
+
+      timerRef.current = window.setTimeout(() => {
+        setJustCopied(false);
+      }, 3000);
+    } catch (error: any) {
+      setErrorMessage(error.message);
+    }
+
+    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"
+              startIcon={getShareIcon()}
+              className="RoomDialog__active__share"
+              onClick={shareRoomLink}
+            />
+          )}
+          <Popover.Root open={justCopied}>
+            <Popover.Trigger asChild>
+              <FilledButton
+                size="large"
+                label="Copy link"
+                startIcon={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")}
+            startIcon={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")}
+          startIcon={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;

excalidraw-app/collab/reconciliation.ts

@@ -0,0 +1,154 @@
+import { PRECEDING_ELEMENT_KEY } from "../../packages/excalidraw/constants";
+import { ExcalidrawElement } from "../../packages/excalidraw/element/types";
+import { AppState } from "../../packages/excalidraw/types";
+import { arrayToMapWithIndex } from "../../packages/excalidraw/utils";
+
+export type ReconciledElements = readonly ExcalidrawElement[] & {
+  _brand: "reconciledElements";
+};
+
+export type BroadcastedExcalidrawElement = ExcalidrawElement & {
+  [PRECEDING_ELEMENT_KEY]?: string;
+};
+
+const shouldDiscardRemoteElement = (
+  localAppState: AppState,
+  local: ExcalidrawElement | undefined,
+  remote: BroadcastedExcalidrawElement,
+): boolean => {
+  if (
+    local &&
+    // local element is being edited
+    (local.id === localAppState.editingElement?.id ||
+      local.id === localAppState.resizingElement?.id ||
+      local.id === localAppState.draggingElement?.id ||
+      // local element is newer
+      local.version > remote.version ||
+      // resolve conflicting edits deterministically by taking the one with
+      // the lowest versionNonce
+      (local.version === remote.version &&
+        local.versionNonce < remote.versionNonce))
+  ) {
+    return true;
+  }
+  return false;
+};
+
+export const reconcileElements = (
+  localElements: readonly ExcalidrawElement[],
+  remoteElements: readonly BroadcastedExcalidrawElement[],
+  localAppState: AppState,
+): ReconciledElements => {
+  const localElementsData =
+    arrayToMapWithIndex<ExcalidrawElement>(localElements);
+
+  const reconciledElements: ExcalidrawElement[] = localElements.slice();
+
+  const duplicates = new WeakMap<ExcalidrawElement, true>();
+
+  let cursor = 0;
+  let offset = 0;
+
+  let remoteElementIdx = -1;
+  for (const remoteElement of remoteElements) {
+    remoteElementIdx++;
+
+    const local = localElementsData.get(remoteElement.id);
+
+    if (shouldDiscardRemoteElement(localAppState, local?.[0], remoteElement)) {
+      if (remoteElement[PRECEDING_ELEMENT_KEY]) {
+        delete remoteElement[PRECEDING_ELEMENT_KEY];
+      }
+
+      continue;
+    }
+
+    // Mark duplicate for removal as it'll be replaced with the remote element
+    if (local) {
+      // Unless the remote and local elements are the same element in which case
+      // we need to keep it as we'd otherwise discard it from the resulting
+      // array.
+      if (local[0] === remoteElement) {
+        continue;
+      }
+      duplicates.set(local[0], true);
+    }
+
+    // parent may not be defined in case the remote client is running an older
+    // excalidraw version
+    const parent =
+      remoteElement[PRECEDING_ELEMENT_KEY] ||
+      remoteElements[remoteElementIdx - 1]?.id ||
+      null;
+
+    if (parent != null) {
+      delete remoteElement[PRECEDING_ELEMENT_KEY];
+
+      // ^ indicates the element is the first in elements array
+      if (parent === "^") {
+        offset++;
+        if (cursor === 0) {
+          reconciledElements.unshift(remoteElement);
+          localElementsData.set(remoteElement.id, [
+            remoteElement,
+            cursor - offset,
+          ]);
+        } else {
+          reconciledElements.splice(cursor + 1, 0, remoteElement);
+          localElementsData.set(remoteElement.id, [
+            remoteElement,
+            cursor + 1 - offset,
+          ]);
+          cursor++;
+        }
+      } else {
+        let idx = localElementsData.has(parent)
+          ? localElementsData.get(parent)![1]
+          : null;
+        if (idx != null) {
+          idx += offset;
+        }
+        if (idx != null && idx >= cursor) {
+          reconciledElements.splice(idx + 1, 0, remoteElement);
+          offset++;
+          localElementsData.set(remoteElement.id, [
+            remoteElement,
+            idx + 1 - offset,
+          ]);
+          cursor = idx + 1;
+        } else if (idx != null) {
+          reconciledElements.splice(cursor + 1, 0, remoteElement);
+          offset++;
+          localElementsData.set(remoteElement.id, [
+            remoteElement,
+            cursor + 1 - offset,
+          ]);
+          cursor++;
+        } else {
+          reconciledElements.push(remoteElement);
+          localElementsData.set(remoteElement.id, [
+            remoteElement,
+            reconciledElements.length - 1 - offset,
+          ]);
+        }
+      }
+      // no parent z-index information, local element exists → replace in place
+    } else if (local) {
+      reconciledElements[local[1]] = remoteElement;
+      localElementsData.set(remoteElement.id, [remoteElement, local[1]]);
+      // otherwise push to the end
+    } else {
+      reconciledElements.push(remoteElement);
+      localElementsData.set(remoteElement.id, [
+        remoteElement,
+        reconciledElements.length - 1 - offset,
+      ]);
+    }
+  }
+
+  const ret: readonly ExcalidrawElement[] = reconciledElements.filter(
+    (element) => !duplicates.has(element),
+  );
+
+  return ret as ReconciledElements;
+};

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

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

excalidraw-app/components/AppMainMenu.tsx

@@ -1,22 +1,12 @@
 import React from "react";
-import {
-  loginIcon,
-  ExcalLogo,
-  eyeIcon,
-} from "../../packages/excalidraw/components/icons";
-import type { Theme } from "../../packages/excalidraw/element/types";
+import { PlusPromoIcon } from "../../packages/excalidraw/components/icons";
 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;
+  setCollabDialogShown: (toggle: boolean) => any;
   isCollaborating: boolean;
   isCollabEnabled: boolean;
-  theme: Theme | "system";
-  setTheme: (theme: Theme | "system") => void;
-  refresh: () => void;
 }> = React.memo((props) => {
   return (
     <MainMenu>
@@ -27,56 +17,25 @@ export const AppMainMenu: React.FC<{
       {props.isCollabEnabled && (
         <MainMenu.DefaultItems.LiveCollaborationTrigger
           isCollaborating={props.isCollaborating}
-          onSelect={() => props.onCollabDialogOpen()}
+          onSelect={() => props.setCollabDialogShown(true)}
         />
       )}
-      <MainMenu.DefaultItems.CommandPalette className="highlighted" />
-      <MainMenu.DefaultItems.SearchMenu />
+
       <MainMenu.DefaultItems.Help />
       <MainMenu.DefaultItems.ClearCanvas />
       <MainMenu.Separator />
       <MainMenu.ItemLink
-        icon={ExcalLogo}
+        icon={PlusPromoIcon}
         href={`${
           import.meta.env.VITE_APP_PLUS_LP
         }/plus?utm_source=excalidraw&utm_medium=app&utm_content=hamburger`}
-        className=""
+        className="ExcalidrawPlus"
       >
         Excalidraw+
       </MainMenu.ItemLink>
       <MainMenu.DefaultItems.Socials />
-      <MainMenu.ItemLink
-        icon={loginIcon}
-        href={`${import.meta.env.VITE_APP_PLUS_APP}${
-          isExcalidrawPlusSignedUser ? "" : "/sign-up"
-        }?utm_source=signin&utm_medium=app&utm_content=hamburger`}
-        className="highlighted"
-      >
-        {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
-        theme={props.theme}
-        onSelect={props.setTheme}
-      />
+      <MainMenu.DefaultItems.ToggleTheme />
       <MainMenu.ItemCustom>
         <LanguageList style={{ width: "100%" }} />
       </MainMenu.ItemCustom>

excalidraw-app/components/AppWelcomeScreen.tsx

@@ -1,12 +1,12 @@
 import React from "react";
-import { loginIcon } from "../../packages/excalidraw/components/icons";
+import { PlusPromoIcon } from "../../packages/excalidraw/components/icons";
 import { useI18n } from "../../packages/excalidraw/i18n";
 import { WelcomeScreen } from "../../packages/excalidraw/index";
 import { isExcalidrawPlusSignedUser } from "../app_constants";
 import { POINTER_EVENTS } from "../../packages/excalidraw/constants";
 
 export const AppWelcomeScreen: React.FC<{
-  onCollabDialogOpen: () => any;
+  setCollabDialogShown: (toggle: boolean) => any;
   isCollabEnabled: boolean;
 }> = React.memo((props) => {
   const { t } = useI18n();
@@ -52,7 +52,7 @@ export const AppWelcomeScreen: React.FC<{
           <WelcomeScreen.Center.MenuItemHelp />
           {props.isCollabEnabled && (
             <WelcomeScreen.Center.MenuItemLiveCollaborationTrigger
-              onSelect={() => props.onCollabDialogOpen()}
+              onSelect={() => props.setCollabDialogShown(true)}
             />
           )}
           {!isExcalidrawPlusSignedUser && (
@@ -61,9 +61,9 @@ 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={PlusPromoIcon}
             >
-              Sign up
+              Try Excalidraw Plus!
             </WelcomeScreen.Center.MenuItemLink>
           )}
         </WelcomeScreen.Center.Menu>

excalidraw-app/components/DebugCanvas.tsx

@@ -1,311 +0,0 @@
-import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
-import { type AppState } from "../../packages/excalidraw/types";
-import { throttleRAF } from "../../packages/excalidraw/utils";
-import {
-  bootstrapCanvas,
-  getNormalizedCanvasDimensions,
-} from "../../packages/excalidraw/renderer/helpers";
-import type { DebugElement } from "../../packages/excalidraw/visualdebug";
-import {
-  ArrowheadArrowIcon,
-  CloseIcon,
-  TrashIcon,
-} from "../../packages/excalidraw/components/icons";
-import { STORAGE_KEYS } from "../app_constants";
-import {
-  isLineSegment,
-  type GlobalPoint,
-  type LineSegment,
-} from "../../packages/math";
-
-const renderLine = (
-  context: CanvasRenderingContext2D,
-  zoom: number,
-  segment: LineSegment<GlobalPoint>,
-  color: string,
-) => {
-  context.save();
-  context.strokeStyle = color;
-  context.beginPath();
-  context.moveTo(segment[0][0] * zoom, segment[0][1] * zoom);
-  context.lineTo(segment[1][0] * zoom, segment[1][1] * zoom);
-  context.stroke();
-  context.restore();
-};
-
-const renderOrigin = (context: CanvasRenderingContext2D, zoom: number) => {
-  context.strokeStyle = "#888";
-  context.save();
-  context.beginPath();
-  context.moveTo(-10 * zoom, -10 * zoom);
-  context.lineTo(10 * zoom, 10 * zoom);
-  context.moveTo(10 * zoom, -10 * zoom);
-  context.lineTo(-10 * zoom, 10 * zoom);
-  context.stroke();
-  context.save();
-};
-
-const render = (
-  frame: DebugElement[],
-  context: CanvasRenderingContext2D,
-  appState: AppState,
-) => {
-  frame.forEach((el: DebugElement) => {
-    switch (true) {
-      case isLineSegment(el.data):
-        renderLine(
-          context,
-          appState.zoom.value,
-          el.data as LineSegment<GlobalPoint>,
-          el.color,
-        );
-        break;
-    }
-  });
-};
-
-const _debugRenderer = (
-  canvas: HTMLCanvasElement,
-  appState: AppState,
-  scale: number,
-  refresh: () => void,
-) => {
-  const [normalizedWidth, normalizedHeight] = getNormalizedCanvasDimensions(
-    canvas,
-    scale,
-  );
-
-  if (appState.height !== canvas.height || appState.width !== canvas.width) {
-    refresh();
-  }
-
-  const context = bootstrapCanvas({
-    canvas,
-    scale,
-    normalizedWidth,
-    normalizedHeight,
-    viewBackgroundColor: "transparent",
-  });
-
-  // Apply zoom
-  context.save();
-  context.translate(
-    appState.scrollX * appState.zoom.value,
-    appState.scrollY * appState.zoom.value,
-  );
-
-  renderOrigin(context, appState.zoom.value);
-
-  if (
-    window.visualDebug?.currentFrame &&
-    window.visualDebug?.data &&
-    window.visualDebug.data.length > 0
-  ) {
-    // Render only one frame
-    const [idx] = debugFrameData();
-
-    render(window.visualDebug.data[idx], context, appState);
-  } else {
-    // Render all debug frames
-    window.visualDebug?.data.forEach((frame) => {
-      render(frame, context, appState);
-    });
-  }
-
-  if (window.visualDebug) {
-    window.visualDebug!.data =
-      window.visualDebug?.data.map((frame) =>
-        frame.filter((el) => el.permanent),
-      ) ?? [];
-  }
-};
-
-const debugFrameData = (): [number, number] => {
-  const currentFrame = window.visualDebug?.currentFrame ?? 0;
-  const frameCount = window.visualDebug?.data.length ?? 0;
-
-  if (frameCount > 0) {
-    return [currentFrame % frameCount, window.visualDebug?.currentFrame ?? 0];
-  }
-
-  return [0, 0];
-};
-
-export const saveDebugState = (debug: { enabled: boolean }) => {
-  try {
-    localStorage.setItem(
-      STORAGE_KEYS.LOCAL_STORAGE_DEBUG,
-      JSON.stringify(debug),
-    );
-  } catch (error: any) {
-    console.error(error);
-  }
-};
-
-export const debugRenderer = throttleRAF(
-  (
-    canvas: HTMLCanvasElement,
-    appState: AppState,
-    scale: number,
-    refresh: () => void,
-  ) => {
-    _debugRenderer(canvas, appState, scale, refresh);
-  },
-  { trailing: true },
-);
-
-export const loadSavedDebugState = () => {
-  let debug;
-  try {
-    const savedDebugState = localStorage.getItem(
-      STORAGE_KEYS.LOCAL_STORAGE_DEBUG,
-    );
-    if (savedDebugState) {
-      debug = JSON.parse(savedDebugState) as { enabled: boolean };
-    }
-  } catch (error: any) {
-    console.error(error);
-  }
-
-  return debug ?? { enabled: false };
-};
-
-export const isVisualDebuggerEnabled = () =>
-  Array.isArray(window.visualDebug?.data);
-
-export const DebugFooter = ({ onChange }: { onChange: () => void }) => {
-  const moveForward = useCallback(() => {
-    if (
-      !window.visualDebug?.currentFrame ||
-      isNaN(window.visualDebug?.currentFrame ?? -1)
-    ) {
-      window.visualDebug!.currentFrame = 0;
-    }
-    window.visualDebug!.currentFrame += 1;
-    onChange();
-  }, [onChange]);
-  const moveBackward = useCallback(() => {
-    if (
-      !window.visualDebug?.currentFrame ||
-      isNaN(window.visualDebug?.currentFrame ?? -1) ||
-      window.visualDebug?.currentFrame < 1
-    ) {
-      window.visualDebug!.currentFrame = 1;
-    }
-    window.visualDebug!.currentFrame -= 1;
-    onChange();
-  }, [onChange]);
-  const reset = useCallback(() => {
-    window.visualDebug!.currentFrame = undefined;
-    onChange();
-  }, [onChange]);
-  const trashFrames = useCallback(() => {
-    if (window.visualDebug) {
-      window.visualDebug.currentFrame = undefined;
-      window.visualDebug.data = [];
-    }
-    onChange();
-  }, [onChange]);
-
-  return (
-    <>
-      <button
-        className="ToolIcon_type_button"
-        data-testid="debug-forward"
-        aria-label="Move forward"
-        type="button"
-        onClick={trashFrames}
-      >
-        <div
-          className="ToolIcon__icon"
-          aria-hidden="true"
-          aria-disabled="false"
-        >
-          {TrashIcon}
-        </div>
-      </button>
-      <button
-        className="ToolIcon_type_button"
-        data-testid="debug-forward"
-        aria-label="Move forward"
-        type="button"
-        onClick={moveBackward}
-      >
-        <div
-          className="ToolIcon__icon"
-          aria-hidden="true"
-          aria-disabled="false"
-        >
-          <ArrowheadArrowIcon flip />
-        </div>
-      </button>
-      <button
-        className="ToolIcon_type_button"
-        data-testid="debug-forward"
-        aria-label="Move forward"
-        type="button"
-        onClick={reset}
-      >
-        <div
-          className="ToolIcon__icon"
-          aria-hidden="true"
-          aria-disabled="false"
-        >
-          {CloseIcon}
-        </div>
-      </button>
-      <button
-        className="ToolIcon_type_button"
-        data-testid="debug-backward"
-        aria-label="Move backward"
-        type="button"
-        onClick={moveForward}
-      >
-        <div
-          className="ToolIcon__icon"
-          aria-hidden="true"
-          aria-disabled="false"
-        >
-          <ArrowheadArrowIcon />
-        </div>
-      </button>
-    </>
-  );
-};
-
-interface DebugCanvasProps {
-  appState: AppState;
-  scale: number;
-}
-
-const DebugCanvas = forwardRef<HTMLCanvasElement, DebugCanvasProps>(
-  ({ appState, scale }, ref) => {
-    const { width, height } = appState;
-
-    const canvasRef = useRef<HTMLCanvasElement>(null);
-    useImperativeHandle<HTMLCanvasElement | null, HTMLCanvasElement | null>(
-      ref,
-      () => canvasRef.current,
-      [canvasRef],
-    );
-
-    return (
-      <canvas
-        style={{
-          width,
-          height,
-          position: "absolute",
-          zIndex: 2,
-          pointerEvents: "none",
-        }}
-        width={width * scale}
-        height={height * scale}
-        ref={canvasRef}
-      >
-        Debug Canvas
-      </canvas>
-    );
-  },
-);
-
-export default DebugCanvas;

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,
@@ -30,7 +30,6 @@ export const exportToExcalidrawPlus = async (
   elements: readonly NonDeletedExcalidrawElement[],
   appState: Partial<AppState>,
   files: BinaryFiles,
-  name: string,
 ) => {
   const firebase = await loadFirebaseStorage();
 
@@ -54,7 +53,7 @@ export const exportToExcalidrawPlus = async (
     .ref(`/migrations/scenes/${id}`)
     .put(blob, {
       customMetadata: {
-        data: JSON.stringify({ version: 2, name }),
+        data: JSON.stringify({ version: 2, name: appState.name }),
         created: Date.now().toString(),
       },
     });
@@ -90,10 +89,9 @@ export const ExportToExcalidrawPlus: React.FC<{
   elements: readonly NonDeletedExcalidrawElement[];
   appState: Partial<AppState>;
   files: BinaryFiles;
-  name: string;
   onError: (error: Error) => void;
   onSuccess: () => void;
-}> = ({ elements, appState, files, name, onError, onSuccess }) => {
+}> = ({ elements, appState, files, onError, onSuccess }) => {
   const { t } = useI18n();
   return (
     <Card color="primary">
@@ -119,7 +117,7 @@ export const ExportToExcalidrawPlus: React.FC<{
         onClick={async () => {
           try {
             trackEvent("export", "eplus", `ui (${getFrame()})`);
-            await exportToExcalidrawPlus(elements, appState, files, name);
+            await exportToExcalidrawPlus(elements, appState, files);
             onSuccess();
           } catch (error: any) {
             console.error(error);

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(

excalidraw-app/components/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();

excalidraw-app/components/TopErrorBoundary.tsx

@@ -67,8 +67,6 @@ export class TopErrorBoundary extends React.Component<
 
     window.open(
       `https://github.com/excalidraw/excalidraw/issues/new?body=${body}`,
-      "_blank",
-      "noopener noreferrer",
     );
   }
 

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

excalidraw-app/data/LocalData.ts

@@ -10,33 +10,18 @@
  *   (localStorage, indexedDB).
  */
 
-import {
-  createStore,
-  entries,
-  del,
-  getMany,
-  set,
-  setMany,
-  get,
-} from "idb-keyval";
+import { createStore, entries, del, getMany, set, setMany } 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 { 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 { debounce } from "../../packages/excalidraw/utils";
 import { SAVE_TO_LOCAL_STORAGE_TIMEOUT, STORAGE_KEYS } from "../app_constants";
 import { FileManager } from "./FileManager";
@@ -70,22 +55,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) {
@@ -207,52 +183,3 @@ export class LocalData {
     },
   });
 }
-export class LibraryIndexedDBAdapter {
-  /** IndexedDB database and store name */
-  private static idb_name = STORAGE_KEYS.IDB_LIBRARY;
-  /** library data store key */
-  private static key = "libraryData";
-
-  private static store = createStore(
-    `${LibraryIndexedDBAdapter.idb_name}-db`,
-    `${LibraryIndexedDBAdapter.idb_name}-store`,
-  );
-
-  static async load() {
-    const IDBData = await get<LibraryPersistedData>(
-      LibraryIndexedDBAdapter.key,
-      LibraryIndexedDBAdapter.store,
-    );
-
-    return IDBData || null;
-  }
-
-  static save(data: LibraryPersistedData): MaybePromise<void> {
-    return set(
-      LibraryIndexedDBAdapter.key,
-      data,
-      LibraryIndexedDBAdapter.store,
-    );
-  }
-}
-
-/** LS Adapter used only for migrating LS library data
- * to indexedDB */
-export class LibraryLocalStorageMigrationAdapter {
-  static load() {
-    const LSData = localStorage.getItem(
-      STORAGE_KEYS.__LEGACY_LOCAL_STORAGE_LIBRARY,
-    );
-    if (LSData != null) {
-      const libraryItems: ImportedDataState["libraryItems"] =
-        JSON.parse(LSData);
-      if (libraryItems) {
-        return { libraryItems };
-      }
-    }
-    return null;
-  }
-  static clear() {
-    localStorage.removeItem(STORAGE_KEYS.__LEGACY_LOCAL_STORAGE_LIBRARY);
-  }
-}

excalidraw-app/data/firebase.ts

@@ -1,13 +1,11 @@
-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 +18,10 @@ 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 { reconcileElements } from "../collab/reconciliation";
+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";
 
 // private
 // -----------------------------------------------------------------------------
@@ -233,7 +230,7 @@ export const saveToFirebase = async (
     !socket ||
     isSavedToFirebase(portal, elements)
   ) {
-    return null;
+    return false;
   }
 
   const firebase = await loadFirestore();
@@ -241,59 +238,56 @@ export const saveToFirebase = async (
 
   const docRef = firestore.collection("scenes").doc(roomId);
 
-  const storedScene = await firestore.runTransaction(async (transaction) => {
+  const savedData = await firestore.runTransaction(async (transaction) => {
     const snapshot = await transaction.get(docRef);
 
     if (!snapshot.exists) {
-      const storedScene = await createFirebaseSceneDocument(
+      const sceneDocument = await createFirebaseSceneDocument(
         firebase,
         elements,
         roomKey,
       );
 
-      transaction.set(docRef, storedScene);
+      transaction.set(docRef, sceneDocument);
 
-      return storedScene;
+      return {
+        elements,
+        reconciledElements: null,
+      };
     }
 
-    const prevStoredScene = snapshot.data() as FirebaseStoredScene;
-    const prevStoredElements = getSyncableElements(
-      restoreElements(await decryptElements(prevStoredScene, roomKey), null),
-    );
-    const reconciledElements = getSyncableElements(
-      reconcileElements(
-        elements,
-        prevStoredElements as OrderedExcalidrawElement[] as RemoteExcalidrawElement[],
-        appState,
-      ),
+    const prevDocData = snapshot.data() as FirebaseStoredScene;
+    const prevElements = getSyncableElements(
+      await decryptElements(prevDocData, roomKey),
     );
 
-    const storedScene = await createFirebaseSceneDocument(
+    const reconciledElements = getSyncableElements(
+      reconcileElements(elements, prevElements, appState),
+    );
+
+    const sceneDocument = await createFirebaseSceneDocument(
       firebase,
       reconciledElements,
       roomKey,
     );
 
-    transaction.update(docRef, storedScene);
-
-    // Return the stored elements as the in memory `reconciledElements` could have mutated in the meantime
-    return storedScene;
+    transaction.update(docRef, sceneDocument);
+    return {
+      elements,
+      reconciledElements,
+    };
   });
 
-  const storedElements = getSyncableElements(
-    restoreElements(await decryptElements(storedScene, roomKey), null),
-  );
+  FirebaseSceneVersionCache.set(socket, savedData.elements);
 
-  FirebaseSceneVersionCache.set(socket, storedElements);
-
-  return storedElements;
+  return { reconciledElements: savedData.reconciledElements };
 };
 
 export const loadFromFirebase = async (
   roomId: string,
   roomKey: string,
   socket: Socket | null,
-): Promise<readonly SyncableExcalidrawElement[] | null> => {
+): Promise<readonly ExcalidrawElement[] | null> => {
   const firebase = await loadFirestore();
   const db = firebase.firestore();
 
@@ -304,14 +298,14 @@ export const loadFromFirebase = async (
   }
   const storedScene = doc.data() as FirebaseStoredScene;
   const elements = getSyncableElements(
-    restoreElements(await decryptElements(storedScene, roomKey), null),
+    await decryptElements(storedScene, roomKey),
   );
 
   if (socket) {
     FirebaseSceneVersionCache.set(socket, elements);
   }
 
-  return elements;
+  return restoreElements(elements, null);
 };
 
 export const loadFilesFromFirebase = async (

excalidraw-app/data/index.ts

@@ -9,39 +9,38 @@ 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 { 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";
 
-export type SyncableExcalidrawElement = OrderedExcalidrawElement &
-  MakeBrand<"SyncableExcalidrawElement">;
+export type SyncableExcalidrawElement = ExcalidrawElement & {
+  _brand: "SyncableExcalidrawElement";
+};
 
 export const isSyncableElement = (
-  element: OrderedExcalidrawElement,
+  element: ExcalidrawElement,
 ): element is SyncableExcalidrawElement => {
   if (element.isDeleted) {
     if (element.updated > Date.now() - DELETED_ELEMENT_TIMEOUT) {
@@ -52,9 +51,7 @@ export const isSyncableElement = (
   return !isInvisiblySmallElement(element);
 };
 
-export const getSyncableElements = (
-  elements: readonly OrderedExcalidrawElement[],
-) =>
+export const getSyncableElements = (elements: readonly ExcalidrawElement[]) =>
   elements.filter((element) =>
     isSyncableElement(element),
   ) as SyncableExcalidrawElement[];
@@ -68,6 +65,35 @@ const generateRoomId = async () => {
   return bytesToHexString(buffer);
 };
 
+/**
+ * Right now the reason why we resolve connection params (url, polling...)
+ * from upstream is to allow changing the params immediately when needed without
+ * having to wait for clients to update the SW.
+ *
+ * If REACT_APP_WS_SERVER_URL env is set, we use that instead (useful for forks)
+ */
+export const getCollabServer = async (): Promise<{
+  url: string;
+  polling: boolean;
+}> => {
+  if (import.meta.env.VITE_APP_WS_SERVER_URL) {
+    return {
+      url: import.meta.env.VITE_APP_WS_SERVER_URL,
+      polling: true,
+    };
+  }
+
+  try {
+    const resp = await fetch(
+      `${import.meta.env.VITE_APP_PORTAL_URL}/collab-server`,
+    );
+    return await resp.json();
+  } catch (error) {
+    console.error(error);
+    throw new Error(t("errors.cannotResolveCollabServer"));
+  }
+};
+
 export type EncryptedData = {
   data: ArrayBuffer;
   iv: Uint8Array;
@@ -269,6 +295,7 @@ export const loadScene = async (
     // in the scene database/localStorage, and instead fetch them async
     // from a different database
     files: data.files,
+    commitToHistory: false,
   };
 };
 

excalidraw-app/data/localStorage.ts

@@ -1,11 +1,12 @@
-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,
 } from "../../packages/excalidraw/appState";
 import { clearElementsForLocalStorage } from "../../packages/excalidraw/element";
 import { STORAGE_KEYS } from "../app_constants";
+import { ImportedDataState } from "../../packages/excalidraw/data/types";
 
 export const saveUsernameToLocalStorage = (username: string) => {
   try {
@@ -87,13 +88,28 @@ export const getTotalStorageSize = () => {
   try {
     const appState = localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_APP_STATE);
     const collab = localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_COLLAB);
+    const library = localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_LIBRARY);
 
     const appStateSize = appState?.length || 0;
     const collabSize = collab?.length || 0;
+    const librarySize = library?.length || 0;
 
-    return appStateSize + collabSize + getElementsStorageSize();
+    return appStateSize + collabSize + librarySize + getElementsStorageSize();
   } catch (error: any) {
     console.error(error);
     return 0;
   }
 };
+
+export const getLibraryItemsFromStorage = () => {
+  try {
+    const libraryItems: ImportedDataState["libraryItems"] = JSON.parse(
+      localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_LIBRARY) as string,
+    );
+
+    return libraryItems || [];
+  } catch (error) {
+    console.error(error);
+    return [];
+  }
+};

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 -->
@@ -64,30 +64,12 @@
     <!--   to minimize white flash on load when user has dark mode enabled   -->
     <script>
       try {
-        function setTheme(theme) {
-          if (theme === "dark") {
-            document.documentElement.classList.add("dark");
-          } else {
-            document.documentElement.classList.remove("dark");
-          }
+        //
+        const theme = window.localStorage.getItem("excalidraw-theme");
+        if (theme === "dark") {
+          document.documentElement.classList.add("dark");
         }
-
-        function getTheme() {
-          const theme = window.localStorage.getItem("excalidraw-theme");
-
-          if (theme && theme === "system") {
-            return window.matchMedia("(prefers-color-scheme: dark)").matches
-              ? "dark"
-              : "light";
-          } else {
-            return theme || "light";
-          }
-        }
-
-        setTheme(getTheme());
-      } catch (e) {
-        console.error("Error setting dark mode", e);
-      }
+      } catch {}
     </script>
     <style>
       html.dark {
@@ -95,13 +77,8 @@
         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) { %>
+    <% if ("%PROD%" === "true") { %>
     <script>
       // Redirect Excalidraw+ users which have auto-redirect enabled.
       //
@@ -120,23 +97,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>
     <% } %>
 
-    <!-- Register Assistant as the UI font, before the scene inits -->
-    <link
-      rel="stylesheet"
-      href="../packages/excalidraw/fonts/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" />
@@ -144,8 +106,23 @@
     <!-- Excalidraw version -->
     <meta name="version" content="{version}" />
 
-    <% if (typeof VITE_APP_DEV_DISABLE_LIVE_RELOAD != 'undefined' &&
-    VITE_APP_DEV_DISABLE_LIVE_RELOAD == true) { %>
+    <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 ("%VITE_APP_DEV_DISABLE_LIVE_RELOAD%"==="true" ) { %>
     <script>
       {
         const _WebSocket = window.WebSocket;
@@ -162,6 +139,7 @@
     </script>
     <% } %>
     <script>
+      window.EXCALIDRAW_ASSET_PATH = "/";
       // setting this so that libraries installation reuses this window tab.
       window.name = "_excalidraw";
     </script>
@@ -218,6 +196,7 @@
     </header>
     <div id="root"></div>
     <script type="module" src="index.tsx"></script>
+    <% if ("%VITE_APP_DEV_DISABLE_LIVE_RELOAD%" !== 'true') { %>
     <!-- 100% privacy friendly analytics -->
     <script>
       // need to load this script dynamically bcs. of iframe embed tracking
@@ -250,5 +229,6 @@
       }
     </script>
     <!-- end LEGACY GOOGLE ANALYTICS -->
+    <% } %>
   </body>
 </html>

excalidraw-app/index.scss

@@ -4,13 +4,6 @@
   &.theme--dark {
     --color-primary-contrast-offset: #726dff; // to offset Chubb illusion
   }
-
-  .top-right-ui {
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-  }
-
   .footer-center {
     justify-content: flex-end;
     margin-top: auto;
@@ -25,7 +18,6 @@
     margin-bottom: auto;
     margin-inline-start: auto;
     margin-inline-end: 0.6em;
-    z-index: var(--zIndex-layerUI);
 
     svg {
       width: 1.2rem;
@@ -39,12 +31,8 @@
         background-color: #ecfdf5;
         color: #064e3c;
       }
-      &.highlighted {
+      &.ExcalidrawPlus {
         color: var(--color-promo);
-        font-weight: 700;
-        .dropdown-menu-item__icon g {
-          stroke-width: 2;
-        }
       }
     }
   }

excalidraw-app/package.json

@@ -25,32 +25,16 @@
   "engines": {
     "node": ">=18.0.0"
   },
-  "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",
-    "vite-plugin-html": "3.2.2"
-  },
+  "dependencies": {},
   "prettier": "@excalidraw/prettier-config",
   "scripts": {
     "build-node": "node ./scripts/build-node.js",
-    "build:app:docker": "cross-env VITE_APP_DISABLE_SENTRY=true vite build",
-    "build:app": "cross-env VITE_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA cross-env VITE_APP_ENABLE_TRACKING=true vite build",
+    "build:app:docker": "cross-env VITE_APP_DISABLE_SENTRY=true VITE_APP_DISABLE_TRACKING=true vite build",
+    "build:app": "cross-env VITE_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA vite build",
     "build:version": "node ../scripts/build-version.js",
     "build": "yarn build:app && yarn build:version",
     "start": "yarn && vite",
-    "start:production": "yarn build && yarn serve",
-    "serve": "npx http-server build -a localhost -p 5001 -o",
+    "start:production": "npm run build && npx http-server build -a localhost -p 5001 -o",
     "build:preview": "yarn build && vite preview --port 5000"
-  },
-  "devDependencies": {
-    "vite-plugin-sitemap": "0.7.1"
   }
 }

excalidraw-app/share/ShareDialog.tsx

@@ -1,290 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-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,
-  LinkIcon,
-  playerPlayIcon,
-  playerStopFilledIcon,
-  share,
-  shareIOS,
-  shareWindows,
-} 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 { 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";
-
-export const shareDialogStateAtom = atom<
-  { isOpen: false } | { isOpen: true; type: ShareDialogType }
->({ isOpen: false });
-
-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 ShareDialogProps = {
-  collabAPI: CollabAPI | null;
-  handleClose: () => void;
-  onExportToBackend: OnExportToBackend;
-  type: ShareDialogType;
-};
-
-const ActiveRoomDialog = ({
-  collabAPI,
-  activeRoomLink,
-  handleClose,
-}: {
-  collabAPI: CollabAPI;
-  activeRoomLink: string;
-  handleClose: () => void;
-}) => {
-  const { t } = useI18n();
-  const [, 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 {
-      await copyTextToSystemClipboard(activeRoomLink);
-    } catch (e) {
-      collabAPI.setCollabError(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.
-    }
-  };
-
-  return (
-    <>
-      <h3 className="ShareDialog__active__header">
-        {t("labels.liveCollaboration").replace(/\./g, "")}
-      </h3>
-      <TextField
-        defaultValue={collabAPI.getUsername()}
-        placeholder="Your name"
-        label="Your name"
-        onChange={collabAPI.setUsername}
-        onKeyDown={(event) => event.key === KEYS.ENTER && handleClose()}
-      />
-      <div className="ShareDialog__active__linkRow">
-        <TextField
-          ref={ref}
-          label="Link"
-          readonly
-          fullWidth
-          value={activeRoomLink}
-        />
-        {isShareSupported && (
-          <FilledButton
-            size="large"
-            variant="icon"
-            label="Share"
-            icon={getShareIcon()}
-            className="ShareDialog__active__share"
-            onClick={shareRoomLink}
-          />
-        )}
-        <FilledButton
-          size="large"
-          label={t("buttons.copyLink")}
-          icon={copyIcon}
-          status={copyStatus}
-          onClick={() => {
-            copyRoomLink();
-            onCopy();
-          }}
-        />
-      </div>
-      <div className="ShareDialog__active__description">
-        <p>
-          <span
-            role="img"
-            aria-hidden="true"
-            className="ShareDialog__active__description__emoji"
-          >
-            🔒{" "}
-          </span>
-          {t("roomDialog.desc_privacy")}
-        </p>
-        <p>{t("roomDialog.desc_exitSession")}</p>
-      </div>
-
-      <div className="ShareDialog__active__actions">
-        <FilledButton
-          size="large"
-          variant="outlined"
-          color="danger"
-          label={t("roomDialog.button_stopSession")}
-          icon={playerStopFilledIcon}
-          onClick={() => {
-            trackEvent("share", "room closed");
-            collabAPI.stopCollaboration();
-            if (!collabAPI.isCollaborating()) {
-              handleClose();
-            }
-          }}
-        />
-      </div>
-    </>
-  );
-};
-
-const ShareDialogPicker = (props: ShareDialogProps) => {
-  const { t } = useI18n();
-
-  const { collabAPI } = props;
-
-  const startCollabJSX = collabAPI ? (
-    <>
-      <div className="ShareDialog__picker__header">
-        {t("labels.liveCollaboration").replace(/\./g, "")}
-      </div>
-
-      <div className="ShareDialog__picker__description">
-        <div style={{ marginBottom: "1em" }}>{t("roomDialog.desc_intro")}</div>
-        {t("roomDialog.desc_privacy")}
-      </div>
-
-      <div className="ShareDialog__picker__button">
-        <FilledButton
-          size="large"
-          label={t("roomDialog.button_startSession")}
-          icon={playerPlayIcon}
-          onClick={() => {
-            trackEvent("share", "room creation", `ui (${getFrame()})`);
-            collabAPI.startCollaboration(null);
-          }}
-        />
-      </div>
-
-      {props.type === "share" && (
-        <div className="ShareDialog__separator">
-          <span>{t("shareDialog.or")}</span>
-        </div>
-      )}
-    </>
-  ) : null;
-
-  return (
-    <>
-      {startCollabJSX}
-
-      {props.type === "share" && (
-        <>
-          <div className="ShareDialog__picker__header">
-            {t("exportDialog.link_title")}
-          </div>
-          <div className="ShareDialog__picker__description">
-            {t("exportDialog.link_details")}
-          </div>
-
-          <div className="ShareDialog__picker__button">
-            <FilledButton
-              size="large"
-              label={t("exportDialog.link_button")}
-              icon={LinkIcon}
-              onClick={async () => {
-                await props.onExportToBackend();
-                props.handleClose();
-              }}
-            />
-          </div>
-        </>
-      )}
-    </>
-  );
-};
-
-const ShareDialogInner = (props: ShareDialogProps) => {
-  const activeRoomLink = useAtomValue(activeRoomLinkAtom);
-
-  return (
-    <Dialog size="small" onCloseRequest={props.handleClose} title={false}>
-      <div className="ShareDialog">
-        {props.collabAPI && activeRoomLink ? (
-          <ActiveRoomDialog
-            collabAPI={props.collabAPI}
-            activeRoomLink={activeRoomLink}
-            handleClose={props.handleClose}
-          />
-        ) : (
-          <ShareDialogPicker {...props} />
-        )}
-      </div>
-    </Dialog>
-  );
-};
-
-export const ShareDialog = (props: {
-  collabAPI: CollabAPI | null;
-  onExportToBackend: OnExportToBackend;
-}) => {
-  const [shareDialogState, setShareDialogState] = useAtom(shareDialogStateAtom);
-
-  const { openDialog } = useUIAppState();
-
-  useEffect(() => {
-    if (openDialog) {
-      setShareDialogState({ isOpen: false });
-    }
-  }, [openDialog, setShareDialogState]);
-
-  if (!shareDialogState.isOpen) {
-    return null;
-  }
-
-  return (
-    <ShareDialogInner
-      handleClose={() => setShareDialogState({ isOpen: false })}
-      collabAPI={props.collabAPI}
-      onExportToBackend={props.onExportToBackend}
-      type={shareDialogState.type}
-    />
-  );
-};

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>
@@ -224,14 +224,24 @@ exports[`Test MobileMenu > should initialize with welcome screen and hide once u
               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"
+            <rect
+              height="4"
+              rx="1"
+              width="18"
+              x="3"
+              y="8"
+            />
+            <line
+              x1="12"
+              x2="12"
+              y1="8"
+              y2="21"
             />
             <path
-              d="M21 12h-13l3 -3"
+              d="M19 12v7a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-7"
             />
             <path
-              d="M11 15l-3 -3"
+              d="M7.5 8a2.5 2.5 0 0 1 0 -5a4.8 8 0 0 1 4.5 5a4.8 8 0 0 1 4.5 -5a2.5 2.5 0 0 1 0 5"
             />
           </g>
         </svg>
@@ -239,7 +249,7 @@ exports[`Test MobileMenu > should initialize with welcome screen and hide once u
       <div
         class="welcome-screen-menu-item__text"
       >
-        Sign up
+        Try Excalidraw Plus!
       </div>
     </a>
   </div>

excalidraw-app/tests/collab.test.tsx

@@ -1,18 +1,12 @@
 import { vi } from "vitest";
 import {
-  act,
   render,
+  updateSceneData,
   waitFor,
 } from "../../packages/excalidraw/tests/test-utils";
 import ExcalidrawApp from "../App";
 import { API } from "../../packages/excalidraw/tests/helpers/api";
-import { syncInvalidIndices } from "../../packages/excalidraw/fractionalIndex";
-import {
-  createRedoAction,
-  createUndoAction,
-} from "../../packages/excalidraw/actions/actionHistory";
-import { StoreAction, newElementWith } from "../../packages/excalidraw";
-
+import { createUndoAction } from "../../packages/excalidraw/actions/actionHistory";
 const { h } = window;
 
 Object.defineProperty(window, "crypto", {
@@ -26,6 +20,17 @@ Object.defineProperty(window, "crypto", {
   },
 });
 
+vi.mock("../../excalidraw-app/data/index.ts", async (importActual) => {
+  const module = (await importActual()) as any;
+  return {
+    __esmodule: true,
+    ...module,
+    getCollabServer: vi.fn(() => ({
+      url: /* doesn't really matter */ "http://localhost:3002",
+    })),
+  };
+});
+
 vi.mock("../../excalidraw-app/data/firebase.ts", () => {
   const loadFromFirebase = async () => null;
   const saveToFirebase = () => {};
@@ -62,190 +67,39 @@ vi.mock("socket.io-client", () => {
   };
 });
 
-/**
- * These test would deserve to be extended by testing collab with (at least) two clients simultanouesly,
- * while having access to both scenes, appstates stores, histories and etc.
- * i.e. multiplayer history tests could be a good first candidate, as we could test both history stacks simultaneously.
- */
 describe("collaboration", () => {
-  it("should allow to undo / redo even on force-deleted elements", async () => {
+  it("creating room should reset deleted elements", async () => {
     await render(<ExcalidrawApp />);
-    const rect1Props = {
-      type: "rectangle",
-      id: "A",
-      height: 200,
-      width: 100,
-    } as const;
-
-    const rect2Props = {
-      type: "rectangle",
-      id: "B",
-      width: 100,
-      height: 200,
-    } as const;
-
-    const rect1 = API.createElement({ ...rect1Props });
-    const rect2 = API.createElement({ ...rect2Props });
-
-    API.updateScene({
-      elements: syncInvalidIndices([rect1, rect2]),
-      storeAction: StoreAction.CAPTURE,
+    // To update the scene with deleted elements before starting collab
+    updateSceneData({
+      elements: [
+        API.createElement({ type: "rectangle", id: "A" }),
+        API.createElement({
+          type: "rectangle",
+          id: "B",
+          isDeleted: true,
+        }),
+      ],
     });
-
-    API.updateScene({
-      elements: syncInvalidIndices([
-        rect1,
-        newElementWith(h.elements[1], { isDeleted: true }),
-      ]),
-      storeAction: StoreAction.CAPTURE,
-    });
-
     await waitFor(() => {
-      expect(API.getUndoStack().length).toBe(2);
-      expect(API.getSnapshot()).toEqual([
-        expect.objectContaining(rect1Props),
-        expect.objectContaining({ ...rect2Props, isDeleted: true }),
-      ]);
       expect(h.elements).toEqual([
-        expect.objectContaining(rect1Props),
-        expect.objectContaining({ ...rect2Props, isDeleted: true }),
+        expect.objectContaining({ id: "A" }),
+        expect.objectContaining({ id: "B", isDeleted: true }),
       ]);
+      expect(API.getStateHistory().length).toBe(1);
     });
-
-    // one form of force deletion happens when starting the collab, not to sync potentially sensitive data into the server
     window.collab.startCollaboration(null);
-
     await waitFor(() => {
-      expect(API.getUndoStack().length).toBe(2);
-      // we never delete from the local snapshot as it is used for correct diff calculation
-      expect(API.getSnapshot()).toEqual([
-        expect.objectContaining(rect1Props),
-        expect.objectContaining({ ...rect2Props, isDeleted: true }),
-      ]);
-      expect(h.elements).toEqual([expect.objectContaining(rect1Props)]);
+      expect(h.elements).toEqual([expect.objectContaining({ id: "A" })]);
+      expect(API.getStateHistory().length).toBe(1);
     });
 
-    const undoAction = createUndoAction(h.history, h.store);
-    act(() => h.app.actionManager.executeAction(undoAction));
-
-    // with explicit undo (as addition) we expect our item to be restored from the snapshot!
+    const undoAction = createUndoAction(h.history);
+    // noop
+    h.app.actionManager.executeAction(undoAction);
     await waitFor(() => {
-      expect(API.getUndoStack().length).toBe(1);
-      expect(API.getSnapshot()).toEqual([
-        expect.objectContaining(rect1Props),
-        expect.objectContaining({ ...rect2Props, isDeleted: false }),
-      ]);
-      expect(h.elements).toEqual([
-        expect.objectContaining(rect1Props),
-        expect.objectContaining({ ...rect2Props, isDeleted: false }),
-      ]);
-    });
-
-    // simulate force deleting the element remotely
-    API.updateScene({
-      elements: syncInvalidIndices([rect1]),
-      storeAction: StoreAction.UPDATE,
-    });
-
-    await waitFor(() => {
-      expect(API.getUndoStack().length).toBe(1);
-      expect(API.getRedoStack().length).toBe(1);
-      expect(API.getSnapshot()).toEqual([
-        expect.objectContaining(rect1Props),
-        expect.objectContaining({ ...rect2Props, isDeleted: true }),
-      ]);
-      expect(h.elements).toEqual([expect.objectContaining(rect1Props)]);
-    });
-
-    const redoAction = createRedoAction(h.history, h.store);
-    act(() => h.app.actionManager.executeAction(redoAction));
-
-    // with explicit redo (as removal) we again restore the element from the snapshot!
-    await waitFor(() => {
-      expect(API.getUndoStack().length).toBe(2);
-      expect(API.getRedoStack().length).toBe(0);
-      expect(API.getSnapshot()).toEqual([
-        expect.objectContaining(rect1Props),
-        expect.objectContaining({ ...rect2Props, isDeleted: true }),
-      ]);
-      expect(h.elements).toEqual([
-        expect.objectContaining(rect1Props),
-        expect.objectContaining({ ...rect2Props, isDeleted: true }),
-      ]);
-    });
-
-    act(() => h.app.actionManager.executeAction(undoAction));
-
-    // simulate local update
-    API.updateScene({
-      elements: syncInvalidIndices([
-        h.elements[0],
-        newElementWith(h.elements[1], { x: 100 }),
-      ]),
-      storeAction: StoreAction.CAPTURE,
-    });
-
-    await waitFor(() => {
-      expect(API.getUndoStack().length).toBe(2);
-      expect(API.getRedoStack().length).toBe(0);
-      expect(API.getSnapshot()).toEqual([
-        expect.objectContaining(rect1Props),
-        expect.objectContaining({ ...rect2Props, isDeleted: false, x: 100 }),
-      ]);
-      expect(h.elements).toEqual([
-        expect.objectContaining(rect1Props),
-        expect.objectContaining({ ...rect2Props, isDeleted: false, x: 100 }),
-      ]);
-    });
-
-    act(() => h.app.actionManager.executeAction(undoAction));
-
-    // we expect to iterate the stack to the first visible change
-    await waitFor(() => {
-      expect(API.getUndoStack().length).toBe(1);
-      expect(API.getRedoStack().length).toBe(1);
-      expect(API.getSnapshot()).toEqual([
-        expect.objectContaining(rect1Props),
-        expect.objectContaining({ ...rect2Props, isDeleted: false, x: 0 }),
-      ]);
-      expect(h.elements).toEqual([
-        expect.objectContaining(rect1Props),
-        expect.objectContaining({ ...rect2Props, isDeleted: false, x: 0 }),
-      ]);
-    });
-
-    // simulate force deleting the element remotely
-    API.updateScene({
-      elements: syncInvalidIndices([rect1]),
-      storeAction: StoreAction.UPDATE,
-    });
-
-    // snapshot was correctly updated and marked the element as deleted
-    await waitFor(() => {
-      expect(API.getUndoStack().length).toBe(1);
-      expect(API.getRedoStack().length).toBe(1);
-      expect(API.getSnapshot()).toEqual([
-        expect.objectContaining(rect1Props),
-        expect.objectContaining({ ...rect2Props, isDeleted: true, x: 0 }),
-      ]);
-      expect(h.elements).toEqual([expect.objectContaining(rect1Props)]);
-    });
-
-    act(() => h.app.actionManager.executeAction(redoAction));
-
-    // with explicit redo (as update) we again restored the element from the snapshot!
-    await waitFor(() => {
-      expect(API.getUndoStack().length).toBe(2);
-      expect(API.getRedoStack().length).toBe(0);
-      expect(API.getSnapshot()).toEqual([
-        expect.objectContaining({ id: "A", isDeleted: false }),
-        expect.objectContaining({ id: "B", isDeleted: true, x: 100 }),
-      ]);
-      expect(h.history.isRedoStackEmpty).toBeTruthy();
-      expect(h.elements).toEqual([
-        expect.objectContaining({ id: "A", isDeleted: false }),
-        expect.objectContaining({ id: "B", isDeleted: true, x: 100 }),
-      ]);
+      expect(h.elements).toEqual([expect.objectContaining({ id: "A" })]);
+      expect(API.getStateHistory().length).toBe(1);
     });
   });
 });

excalidraw-app/tests/reconciliation.test.ts

@@ -0,0 +1,421 @@
+import { expect } from "chai";
+import { PRECEDING_ELEMENT_KEY } from "../../packages/excalidraw/constants";
+import { ExcalidrawElement } from "../../packages/excalidraw/element/types";
+import {
+  BroadcastedExcalidrawElement,
+  ReconciledElements,
+  reconcileElements,
+} from "../../excalidraw-app/collab/reconciliation";
+import { randomInteger } from "../../packages/excalidraw/random";
+import { AppState } from "../../packages/excalidraw/types";
+import { cloneJSON } from "../../packages/excalidraw/utils";
+
+type Id = string;
+type ElementLike = {
+  id: string;
+  version: number;
+  versionNonce: number;
+  [PRECEDING_ELEMENT_KEY]?: string | null;
+};
+
+type Cache = Record<string, ExcalidrawElement | undefined>;
+
+const createElement = (opts: { uid: string } | ElementLike) => {
+  let uid: string;
+  let id: string;
+  let version: number | null;
+  let parent: string | null = null;
+  let versionNonce: number | null = null;
+  if ("uid" in opts) {
+    const match = opts.uid.match(
+      /^(?:\((\^|\w+)\))?(\w+)(?::(\d+))?(?:\((\w+)\))?$/,
+    )!;
+    parent = match[1];
+    id = match[2];
+    version = match[3] ? parseInt(match[3]) : null;
+    uid = version ? `${id}:${version}` : id;
+  } else {
+    ({ id, version, versionNonce } = opts);
+    parent = parent || null;
+    uid = id;
+  }
+  return {
+    uid,
+    id,
+    version,
+    versionNonce: versionNonce || randomInteger(),
+    [PRECEDING_ELEMENT_KEY]: parent || null,
+  };
+};
+
+const idsToElements = (
+  ids: (Id | ElementLike)[],
+  cache: Cache = {},
+): readonly ExcalidrawElement[] => {
+  return ids.reduce((acc, _uid, idx) => {
+    const {
+      uid,
+      id,
+      version,
+      [PRECEDING_ELEMENT_KEY]: parent,
+      versionNonce,
+    } = createElement(typeof _uid === "string" ? { uid: _uid } : _uid);
+    const cached = cache[uid];
+    const elem = {
+      id,
+      version: version ?? 0,
+      versionNonce,
+      ...cached,
+      [PRECEDING_ELEMENT_KEY]: parent,
+    } as BroadcastedExcalidrawElement;
+    // @ts-ignore
+    cache[uid] = elem;
+    acc.push(elem);
+    return acc;
+  }, [] as ExcalidrawElement[]);
+};
+
+const addParents = (elements: BroadcastedExcalidrawElement[]) => {
+  return elements.map((el, idx, els) => {
+    el[PRECEDING_ELEMENT_KEY] = els[idx - 1]?.id || "^";
+    return el;
+  });
+};
+
+const cleanElements = (elements: ReconciledElements) => {
+  return elements.map((el) => {
+    // @ts-ignore
+    delete el[PRECEDING_ELEMENT_KEY];
+    // @ts-ignore
+    delete el.next;
+    // @ts-ignore
+    delete el.prev;
+    return el;
+  });
+};
+
+const test = <U extends `${string}:${"L" | "R"}`>(
+  local: (Id | ElementLike)[],
+  remote: (Id | ElementLike)[],
+  target: U[],
+  bidirectional = true,
+) => {
+  const cache: Cache = {};
+  const _local = idsToElements(local, cache);
+  const _remote = idsToElements(remote, cache);
+  const _target = target.map((uid) => {
+    const [, id, source] = uid.match(/^(\w+):([LR])$/)!;
+    return (source === "L" ? _local : _remote).find((e) => e.id === id)!;
+  }) as any as ReconciledElements;
+  const remoteReconciled = reconcileElements(_local, _remote, {} as AppState);
+  expect(target.length).equal(remoteReconciled.length);
+  expect(cleanElements(remoteReconciled)).deep.equal(
+    cleanElements(_target),
+    "remote reconciliation",
+  );
+
+  const __local = cleanElements(cloneJSON(_remote) as ReconciledElements);
+  const __remote = addParents(cleanElements(cloneJSON(remoteReconciled)));
+  if (bidirectional) {
+    try {
+      expect(
+        cleanElements(
+          reconcileElements(
+            cloneJSON(__local),
+            cloneJSON(__remote),
+            {} as AppState,
+          ),
+        ),
+      ).deep.equal(cleanElements(remoteReconciled), "local re-reconciliation");
+    } catch (error: any) {
+      console.error("local original", __local);
+      console.error("remote reconciled", __remote);
+      throw error;
+    }
+  }
+};
+
+export const findIndex = <T>(
+  array: readonly T[],
+  cb: (element: T, index: number, array: readonly T[]) => boolean,
+  fromIndex: number = 0,
+) => {
+  if (fromIndex < 0) {
+    fromIndex = array.length + fromIndex;
+  }
+  fromIndex = Math.min(array.length, Math.max(fromIndex, 0));
+  let index = fromIndex - 1;
+  while (++index < array.length) {
+    if (cb(array[index], index, array)) {
+      return index;
+    }
+  }
+  return -1;
+};
+
+// -----------------------------------------------------------------------------
+
+describe("elements reconciliation", () => {
+  it("reconcileElements()", () => {
+    // -------------------------------------------------------------------------
+    //
+    // in following tests, we pass:
+    //  (1) an array of local elements and their version (:1, :2...)
+    //  (2) an array of remote elements and their version (:1, :2...)
+    //  (3) expected reconciled elements
+    //
+    // in the reconciled array:
+    //  :L means local element was resolved
+    //  :R means remote element was resolved
+    //
+    // if a remote element is prefixed with parentheses, the enclosed string:
+    //  (^) means the element is the first element in the array
+    //  (<id>) means the element is preceded by <id> element
+    //
+    // if versions are missing, it defaults to version 0
+    // -------------------------------------------------------------------------
+
+    // non-annotated elements
+    // -------------------------------------------------------------------------
+    // usually when we sync elements they should always be annotated with
+    // their (preceding elements) parents, but let's test a couple of cases when
+    // they're not for whatever reason (remote clients are on older version...),
+    // in which case the first synced element either replaces existing element
+    // or is pushed at the end of the array
+
+    test(["A:1", "B:1", "C:1"], ["B:2"], ["A:L", "B:R", "C:L"]);
+    test(["A:1", "B:1", "C"], ["B:2", "A:2"], ["B:R", "A:R", "C:L"]);
+    test(["A:2", "B:1", "C"], ["B:2", "A:1"], ["A:L", "B:R", "C:L"]);
+    test(["A:1", "B:1"], ["C:1"], ["A:L", "B:L", "C:R"]);
+    test(["A", "B"], ["A:1"], ["A:R", "B:L"]);
+    test(["A"], ["A", "B"], ["A:L", "B:R"]);
+    test(["A"], ["A:1", "B"], ["A:R", "B:R"]);
+    test(["A:2"], ["A:1", "B"], ["A:L", "B:R"]);
+    test(["A:2"], ["B", "A:1"], ["A:L", "B:R"]);
+    test(["A:1"], ["B", "A:2"], ["B:R", "A:R"]);
+    test(["A"], ["A:1"], ["A:R"]);
+
+    // C isn't added to the end because it follows B (even if B was resolved
+    // to local version)
+    test(["A", "B:1", "D"], ["B", "C:2", "A"], ["B:L", "C:R", "A:R", "D:L"]);
+
+    // some of the following tests are kinda arbitrary and they're less
+    // likely to happen in real-world cases
+
+    test(["A", "B"], ["B:1", "A:1"], ["B:R", "A:R"]);
+    test(["A:2", "B:2"], ["B:1", "A:1"], ["A:L", "B:L"]);
+    test(["A", "B", "C"], ["A", "B:2", "G", "C"], ["A:L", "B:R", "G:R", "C:L"]);
+    test(["A", "B", "C"], ["A", "B:2", "G"], ["A:L", "B:R", "G:R", "C:L"]);
+    test(["A", "B", "C"], ["A", "B:2", "G"], ["A:L", "B:R", "G:R", "C:L"]);
+    test(
+      ["A:2", "B:2", "C"],
+      ["D", "B:1", "A:3"],
+      ["B:L", "A:R", "C:L", "D:R"],
+    );
+    test(
+      ["A:2", "B:2", "C"],
+      ["D", "B:2", "A:3", "C"],
+      ["D:R", "B:L", "A:R", "C:L"],
+    );
+    test(
+      ["A", "B", "C", "D", "E", "F"],
+      ["A", "B:2", "X", "E:2", "F", "Y"],
+      ["A:L", "B:R", "X:R", "E:R", "F:L", "Y:R", "C:L", "D:L"],
+    );
+
+    // annotated elements
+    // -------------------------------------------------------------------------
+
+    test(
+      ["A", "B", "C"],
+      ["(B)X", "(A)Y", "(Y)Z"],
+      ["A:L", "B:L", "X:R", "Y:R", "Z:R", "C:L"],
+    );
+
+    test(["A"], ["(^)X", "Y"], ["X:R", "Y:R", "A:L"]);
+    test(["A"], ["(^)X", "Y", "Z"], ["X:R", "Y:R", "Z:R", "A:L"]);
+
+    test(
+      ["A", "B"],
+      ["(A)C", "(^)D", "F"],
+      ["A:L", "C:R", "D:R", "F:R", "B:L"],
+    );
+
+    test(
+      ["A", "B", "C", "D"],
+      ["(B)C:1", "B", "D:1"],
+      ["A:L", "C:R", "B:L", "D:R"],
+    );
+
+    test(
+      ["A", "B", "C"],
+      ["(^)X", "(A)Y", "(B)Z"],
+      ["X:R", "A:L", "Y:R", "B:L", "Z:R", "C:L"],
+    );
+
+    test(
+      ["B", "A", "C"],
+      ["(^)X", "(A)Y", "(B)Z"],
+      ["X:R", "B:L", "A:L", "Y:R", "Z:R", "C:L"],
+    );
+
+    test(["A", "B"], ["(A)X", "(A)Y"], ["A:L", "X:R", "Y:R", "B:L"]);
+
+    test(
+      ["A", "B", "C", "D", "E"],
+      ["(A)X", "(C)Y", "(D)Z"],
+      ["A:L", "X:R", "B:L", "C:L", "Y:R", "D:L", "Z:R", "E:L"],
+    );
+
+    test(
+      ["X", "Y", "Z"],
+      ["(^)A", "(A)B", "(B)C", "(C)X", "(X)D", "(D)Y", "(Y)Z"],
+      ["A:R", "B:R", "C:R", "X:L", "D:R", "Y:L", "Z:L"],
+    );
+
+    test(
+      ["A", "B", "C", "D", "E"],
+      ["(C)X", "(A)Y", "(D)E:1"],
+      ["A:L", "B:L", "C:L", "X:R", "Y:R", "D:L", "E:R"],
+    );
+
+    test(
+      ["C:1", "B", "D:1"],
+      ["A", "B", "C:1", "D:1"],
+      ["A:R", "B:L", "C:L", "D:L"],
+    );
+
+    test(
+      ["A", "B", "C", "D"],
+      ["(A)C:1", "(C)B", "(B)D:1"],
+      ["A:L", "C:R", "B:L", "D:R"],
+    );
+
+    test(
+      ["A", "B", "C", "D"],
+      ["(A)C:1", "(C)B", "(B)D:1"],
+      ["A:L", "C:R", "B:L", "D:R"],
+    );
+
+    test(
+      ["C:1", "B", "D:1"],
+      ["(^)A", "(A)B", "(B)C:2", "(C)D:1"],
+      ["A:R", "B:L", "C:R", "D:L"],
+    );
+
+    test(
+      ["A", "B", "C", "D"],
+      ["(C)X", "(B)Y", "(A)Z"],
+      ["A:L", "B:L", "C:L", "X:R", "Y:R", "Z:R", "D:L"],
+    );
+
+    test(["A", "B", "C", "D"], ["(A)B:1", "C:1"], ["A:L", "B:R", "C:R", "D:L"]);
+    test(["A", "B", "C", "D"], ["(A)C:1", "B:1"], ["A:L", "C:R", "B:R", "D:L"]);
+    test(
+      ["A", "B", "C", "D"],
+      ["(A)C:1", "B", "D:1"],
+      ["A:L", "C:R", "B:L", "D:R"],
+    );
+
+    test(["A:1", "B:1", "C"], ["B:2"], ["A:L", "B:R", "C:L"]);
+    test(["A:1", "B:1", "C"], ["B:2", "C:2"], ["A:L", "B:R", "C:R"]);
+
+    test(["A", "B"], ["(A)C", "(B)D"], ["A:L", "C:R", "B:L", "D:R"]);
+    test(["A", "B"], ["(X)C", "(X)D"], ["A:L", "B:L", "C:R", "D:R"]);
+    test(["A", "B"], ["(X)C", "(A)D"], ["A:L", "D:R", "B:L", "C:R"]);
+    test(["A", "B"], ["(A)B:1"], ["A:L", "B:R"]);
+    test(["A:2", "B"], ["(A)B:1"], ["A:L", "B:R"]);
+    test(["A:2", "B:2"], ["B:1"], ["A:L", "B:L"]);
+    test(["A:2", "B:2"], ["B:1", "C"], ["A:L", "B:L", "C:R"]);
+    test(["A:2", "B:2"], ["(A)C", "B:1"], ["A:L", "C:R", "B:L"]);
+    test(["A:2", "B:2"], ["(A)C", "B:1"], ["A:L", "C:R", "B:L"]);
+  });
+
+  it("test identical elements reconciliation", () => {
+    const testIdentical = (
+      local: ElementLike[],
+      remote: ElementLike[],
+      expected: Id[],
+    ) => {
+      const ret = reconcileElements(
+        local as any as ExcalidrawElement[],
+        remote as any as ExcalidrawElement[],
+        {} as AppState,
+      );
+
+      if (new Set(ret.map((x) => x.id)).size !== ret.length) {
+        throw new Error("reconcileElements: duplicate elements found");
+      }
+
+      expect(ret.map((x) => x.id)).to.deep.equal(expected);
+    };
+
+    // identical id/version/versionNonce
+    // -------------------------------------------------------------------------
+
+    testIdentical(
+      [{ id: "A", version: 1, versionNonce: 1 }],
+      [{ id: "A", version: 1, versionNonce: 1 }],
+      ["A"],
+    );
+    testIdentical(
+      [
+        { id: "A", version: 1, versionNonce: 1 },
+        { id: "B", version: 1, versionNonce: 1 },
+      ],
+      [
+        { id: "B", version: 1, versionNonce: 1 },
+        { id: "A", version: 1, versionNonce: 1 },
+      ],
+      ["B", "A"],
+    );
+    testIdentical(
+      [
+        { id: "A", version: 1, versionNonce: 1 },
+        { id: "B", version: 1, versionNonce: 1 },
+      ],
+      [
+        { id: "B", version: 1, versionNonce: 1 },
+        { id: "A", version: 1, versionNonce: 1 },
+      ],
+      ["B", "A"],
+    );
+
+    // actually identical (arrays and element objects)
+    // -------------------------------------------------------------------------
+
+    const elements1 = [
+      {
+        id: "A",
+        version: 1,
+        versionNonce: 1,
+        [PRECEDING_ELEMENT_KEY]: null,
+      },
+      {
+        id: "B",
+        version: 1,
+        versionNonce: 1,
+        [PRECEDING_ELEMENT_KEY]: null,
+      },
+    ];
+
+    testIdentical(elements1, elements1, ["A", "B"]);
+    testIdentical(elements1, elements1.slice(), ["A", "B"]);
+    testIdentical(elements1.slice(), elements1, ["A", "B"]);
+    testIdentical(elements1.slice(), elements1.slice(), ["A", "B"]);
+
+    const el1 = {
+      id: "A",
+      version: 1,
+      versionNonce: 1,
+      [PRECEDING_ELEMENT_KEY]: null,
+    };
+    const el2 = {
+      id: "B",
+      version: 1,
+      versionNonce: 1,
+      [PRECEDING_ELEMENT_KEY]: null,
+    };
+    testIdentical([el1, el2], [el2, el1], ["A", "B"]);
+  });
+});

excalidraw-app/useHandleAppTheme.ts

@@ -1,70 +0,0 @@
-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 { CODES, KEYS } from "../packages/excalidraw/keys";
-import { STORAGE_KEYS } from "./app_constants";
-
-export const appThemeAtom = atom<Theme | "system">(
-  (localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_THEME) as
-    | Theme
-    | "system"
-    | null) || THEME.LIGHT,
-);
-
-const getDarkThemeMediaQuery = (): MediaQueryList | undefined =>
-  window.matchMedia?.("(prefers-color-scheme: dark)");
-
-export const useHandleAppTheme = () => {
-  const [appTheme, setAppTheme] = useAtom(appThemeAtom);
-  const [editorTheme, setEditorTheme] = useState<Theme>(THEME.LIGHT);
-
-  useEffect(() => {
-    const mediaQuery = getDarkThemeMediaQuery();
-
-    const handleChange = (e: MediaQueryListEvent) => {
-      setEditorTheme(e.matches ? THEME.DARK : THEME.LIGHT);
-    };
-
-    if (appTheme === "system") {
-      mediaQuery?.addEventListener("change", handleChange);
-    }
-
-    const handleKeydown = (event: KeyboardEvent) => {
-      if (
-        !event[KEYS.CTRL_OR_CMD] &&
-        event.altKey &&
-        event.shiftKey &&
-        event.code === CODES.D
-      ) {
-        event.preventDefault();
-        event.stopImmediatePropagation();
-        setAppTheme(editorTheme === THEME.DARK ? THEME.LIGHT : THEME.DARK);
-      }
-    };
-
-    document.addEventListener(EVENT.KEYDOWN, handleKeydown, { capture: true });
-
-    return () => {
-      mediaQuery?.removeEventListener("change", handleChange);
-      document.removeEventListener(EVENT.KEYDOWN, handleKeydown, {
-        capture: true,
-      });
-    };
-  }, [appTheme, editorTheme, setAppTheme]);
-
-  useLayoutEffect(() => {
-    localStorage.setItem(STORAGE_KEYS.LOCAL_STORAGE_THEME, appTheme);
-
-    if (appTheme === "system") {
-      setEditorTheme(
-        getDarkThemeMediaQuery()?.matches ? THEME.DARK : THEME.LIGHT,
-      );
-    } else {
-      setEditorTheme(appTheme);
-    }
-  }, [appTheme]);
-
-  return { editorTheme };
-};

excalidraw-app/vite.config.mts

@@ -4,9 +4,6 @@ import svgrPlugin from "vite-plugin-svgr";
 import { ViteEjsPlugin } from "vite-plugin-ejs";
 import { VitePWA } from "vite-plugin-pwa";
 import checker from "vite-plugin-checker";
-import { createHtmlPlugin } from "vite-plugin-html";
-import Sitemap from "vite-plugin-sitemap";
-import { woff2BrowserPlugin } from "../scripts/woff2/woff2-vite-plugins";
 
 // To load .env.local variables
 const envVars = loadEnv("", `../`);
@@ -24,14 +21,6 @@ export default defineConfig({
     outDir: "build",
     rollupOptions: {
       output: {
-        assetFileNames(chunkInfo) {
-          if (chunkInfo?.name?.endsWith(".woff2")) {
-            const family = chunkInfo.name.split("-")[0];
-            return `fonts/${family}/[name][extname]`;
-          }
-
-          return "assets/[name]-[hash][extname]";
-        },
         // Creating separate chunk for locales except for en and percentages.json so they
         // can be cached at runtime and not merged with
         // app precache. en.json and percentages.json are needed for first load
@@ -49,18 +38,8 @@ export default defineConfig({
       },
     },
     sourcemap: true,
-    // don't auto-inline small assets (i.e. fonts hosted on CDN)
-    assetsInlineLimit: 0,
   },
   plugins: [
-    Sitemap({
-      hostname: "https://excalidraw.com",
-      outDir: "build",
-      changefreq: "monthly",
-      // its static in public folder
-      generateRobotsTxt: false,
-    }),
-    woff2BrowserPlugin(),
     react(),
     checker({
       typescript: true,
@@ -83,26 +62,17 @@ export default defineConfig({
       },
 
       workbox: {
-        // don't precache fonts, locales and separate chunks
-        globIgnores: [
-          "fonts.css",
-          "**/locales/**",
-          "service-worker.js",
-          "**/*.chunk-*.js",
-        ],
+        // Don't push fonts and locales to app precache
+        globIgnores: ["fonts.css", "**/locales/**", "service-worker.js"],
         runtimeCaching: [
           {
-            urlPattern: new RegExp(".+.woff2"),
+            urlPattern: new RegExp("/.+.(ttf|woff2|otf)"),
             handler: "CacheFirst",
             options: {
               cacheName: "fonts",
               expiration: {
-                maxEntries: 1000,
-                maxAgeSeconds: 60 * 60 * 24 * 90, // 90 days
-              },
-              cacheableResponse: {
-                // 0 to cache "opaque" responses from cross-origin requests (i.e. CDN)
-                statuses: [0, 200],
+                maxEntries: 50,
+                maxAgeSeconds: 60 * 60 * 24 * 90, // <== 90 days
               },
             },
           },
@@ -127,17 +97,6 @@ export default defineConfig({
               },
             },
           },
-          {
-            urlPattern: new RegExp(".chunk-.+.js"),
-            handler: "CacheFirst",
-            options: {
-              cacheName: "chunk",
-              expiration: {
-                maxEntries: 50,
-                maxAgeSeconds: 60 * 60 * 24 * 90, // <== 90 days
-              },
-            },
-          },
         ],
       },
       manifest: {
@@ -230,9 +189,6 @@ export default defineConfig({
         ],
       },
     }),
-    createHtmlPlugin({
-      minify: true,
-    }),
   ],
   publicDir: "../public",
 });

package.json

@@ -1,28 +1,35 @@
 {
   "private": true,
   "name": "excalidraw-monorepo",
-  "packageManager": "yarn@1.22.22",
   "workspaces": [
     "excalidraw-app",
     "packages/excalidraw",
-    "packages/utils",
-    "packages/math",
-    "examples/excalidraw",
-    "examples/excalidraw/*"
+    "packages/utils"
   ],
+  "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",
@@ -36,13 +43,13 @@
     "prettier": "2.6.2",
     "rewire": "6.0.0",
     "typescript": "4.9.4",
-    "vite": "5.0.12",
-    "vite-plugin-checker": "0.7.2",
+    "vite": "5.0.6",
+    "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 +58,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 +84,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"
   }
 }

packages/excalidraw/.gitignore

@@ -1,2 +1,4 @@
 node_modules
 types
+bundle.js
+bundle.css

packages/excalidraw/CHANGELOG.md

@@ -13,50 +13,13 @@ Please add the latest change on the top under the correct section.
 
 ## Unreleased
 
-### Features
-
-- Added hand-drawn font for Chinese, Japanese and Korean (CJK) as a fallback for Excalifont. Improved overal text wrapping algorithm, not only accounting for CJK, but covering various edge cases with white spaces and text-align center/right. Added support for multi-codepoint emojis wrapping. Offloaded SVG export to Web Workers, with an automatic fallback to the main thread if not supported or not desired.[#8530](https://github.com/excalidraw/excalidraw/pull/8530)
-
-- Prefer user defined coordinates and dimensions when creating a frame using [`convertToExcalidrawElements`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/excalidraw-element-skeleton#converttoexcalidrawelements) [#8517](https://github.com/excalidraw/excalidraw/pull/8517)
-
-- `props.initialData` can now be a function that returns `ExcalidrawInitialDataState` or `Promise<ExcalidrawInitialDataState>`. [#8107](https://github.com/excalidraw/excalidraw/pull/8135)
-
-- Added support for multiplayer undo/redo, by calculating invertible increments and storing them inside the local-only undo/redo stacks. [#7348](https://github.com/excalidraw/excalidraw/pull/7348)
-
-- Added font picker component to have the ability to choose from a range of different fonts. Also, changed the default fonts to `Excalifont`, `Nunito` and `Comic Shanns` and deprecated `Virgil`, `Helvetica` and `Cascadia`.
-
-- `MainMenu.DefaultItems.ToggleTheme` now supports `onSelect(theme: string)` callback, and optionally `allowSystemTheme: boolean` alongside `theme: string` to indicate you want to allow users to set to system theme (you need to handle this yourself). [#7853](https://github.com/excalidraw/excalidraw/pull/7853)
-
-- Add `useHandleLibrary`'s `opts.adapter` as the new recommended pattern to handle library initialization and persistence on library updates. [#7655](https://github.com/excalidraw/excalidraw/pull/7655)
-
-- Add `useHandleLibrary`'s `opts.migrationAdapter` adapter to handle library migration during init, when migrating from one data store to another (e.g. from LocalStorage to IndexedDB). [#7655](https://github.com/excalidraw/excalidraw/pull/7655)
-
-- Soft-deprecate `useHandleLibrary`'s `opts.getInitialLibraryItems` in favor of `opts.adapter`. [#7655](https://github.com/excalidraw/excalidraw/pull/7655)
-
-- Add `onPointerUp` prop [#7638](https://github.com/excalidraw/excalidraw/pull/7638).
-
 - Expose `getVisibleSceneBounds` helper to get scene bounds of visible canvas area. [#7450](https://github.com/excalidraw/excalidraw/pull/7450)
-
-### Fixes
-
-- Keep customData when converting to ExcalidrawElement. [#7656](https://github.com/excalidraw/excalidraw/pull/7656)
+- Remove `ExcalidrawEmbeddableElement.validated` attribute. [#7539](https://github.com/excalidraw/excalidraw/pull/7539)
 
 ### Breaking Changes
 
-- Stats container CSS changed, so if you're using `renderCustomStats`, you may need to adjust your styles to retain the same layout.
-
-- `updateScene` API has changed due to the added `Store` component as part of the multiplayer undo / redo initiative. Specifically, `sceneData` property `commitToHistory: boolean` was replaced with `storeAction: StoreActionType`. Make sure to update all instances of `updateScene` according to the _before / after_ table below. [#7898](https://github.com/excalidraw/excalidraw/pull/7898)
-
-|  | Before `commitToHistory` | After `storeAction` | Notes |
-| --- | --- | --- | --- |
-| _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. |
-
 - `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)
 
-- `ExcalidrawTextElement.baseline` was removed and replaced with a vertical offset computation based on font metrics, performed on each text element re-render. In case of custom font usage, extend the `FONT_METRICS` object with the related properties.
-
 - Create an `ESM` build for `@excalidraw/excalidraw`. The API is in progress and subject to change before stable release. There are some changes on how the package will be consumed
 
   #### Bundler
@@ -91,12 +54,10 @@ Please add the latest change on the top under the correct section.
 
 - `appState.openDialog` type was changed from `null | string` to `null | { name: string }`. [#7336](https://github.com/excalidraw/excalidraw/pull/7336)
 
-## 0.17.3 (2024-02-09)
+## 0.17.1 (2023-11-28)
 
 ### Fixes
 
-- Keep customData when converting to ExcalidrawElement. [#7656](https://github.com/excalidraw/excalidraw/pull/7656)
-
 - Umd build for browser since it was breaking in v0.17.0 [#7349](https://github.com/excalidraw/excalidraw/pull/7349). Also make sure that when using `Vite`, the `process.env.IS_PREACT` is set as `"true"` (string) and not a boolean.
 
 ```
@@ -105,16 +66,14 @@ define: {
 }
 ```
 
-- Disable caching bounds for arrow labels [#7343](https://github.com/excalidraw/excalidraw/pull/7343)
-
-- Bounds cached prematurely resulting in incorrectly rendered labels [#7339](https://github.com/excalidraw/excalidraw/pull/7339)
-
 ## Excalidraw Library
 
 ### Fixes
 
 - Disable caching bounds for arrow labels [#7343](https://github.com/excalidraw/excalidraw/pull/7343)
 
+---
+
 ## 0.17.0 (2023-11-14)
 
 ### Features

packages/excalidraw/actions/actionAddToLibrary.ts

@@ -3,7 +3,6 @@ import { deepCopyElement } from "../element/newElement";
 import { randomId } from "../random";
 import { t } from "../i18n";
 import { LIBRARY_DISABLED_TYPES } from "../constants";
-import { StoreAction } from "../store";
 
 export const actionAddToLibrary = register({
   name: "addToLibrary",
@@ -18,7 +17,7 @@ export const actionAddToLibrary = register({
     for (const type of LIBRARY_DISABLED_TYPES) {
       if (selectedElements.some((element) => element.type === type)) {
         return {
-          storeAction: StoreAction.NONE,
+          commitToHistory: false,
           appState: {
             ...appState,
             errorMessage: t(`errors.libraryElementTypeError.${type}`),
@@ -42,7 +41,7 @@ export const actionAddToLibrary = register({
       })
       .then(() => {
         return {
-          storeAction: StoreAction.NONE,
+          commitToHistory: false,
           appState: {
             ...appState,
             toast: { message: t("toast.addedToLibrary") },
@@ -51,7 +50,7 @@ export const actionAddToLibrary = register({
       })
       .catch((error) => {
         return {
-          storeAction: StoreAction.NONE,
+          commitToHistory: false,
           appState: {
             ...appState,
             errorMessage: error.message,
@@ -59,5 +58,5 @@ export const actionAddToLibrary = register({
         };
       });
   },
-  label: "labels.addToLibrary",
+  contextItemLabel: "labels.addToLibrary",
 });

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,19 +10,17 @@ import {
 import { ToolButton } from "../components/ToolButton";
 import { getNonDeletedElements } from "../element";
 import { isFrameLikeElement } from "../element/typeChecks";
-import type { ExcalidrawElement } from "../element/types";
-import { updateFrameMembershipOfSelectedElements } from "../frame";
+import { ExcalidrawElement } from "../element/types";
 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 } from "../types";
 import { arrayToMap, getShortcutKey } from "../utils";
 import { register } from "./register";
 
 const alignActionsPredicate = (
   elements: readonly ExcalidrawElement[],
-  appState: UIAppState,
+  appState: AppState,
   _: unknown,
   app: AppClassProperties,
 ) => {
@@ -42,27 +39,18 @@ const alignSelectedElements = (
   alignment: Alignment,
 ) => {
   const selectedElements = app.scene.getSelectedElements(appState);
-  const elementsMap = arrayToMap(elements);
 
-  const updatedElements = alignElements(
-    selectedElements,
-    elementsMap,
-    alignment,
-  );
+  const updatedElements = alignElements(selectedElements, alignment);
 
   const updatedElementsMap = arrayToMap(updatedElements);
 
-  return updateFrameMembershipOfSelectedElements(
-    elements.map((element) => updatedElementsMap.get(element.id) || element),
-    appState,
-    app,
+  return elements.map(
+    (element) => updatedElementsMap.get(element.id) || element,
   );
 };
 
 export const actionAlignTop = register({
   name: "alignTop",
-  label: "labels.alignTop",
-  icon: AlignTopIcon,
   trackEvent: { category: "element" },
   predicate: alignActionsPredicate,
   perform: (elements, appState, _, app) => {
@@ -72,7 +60,7 @@ export const actionAlignTop = register({
         position: "start",
         axis: "y",
       }),
-      storeAction: StoreAction.CAPTURE,
+      commitToHistory: true,
     };
   },
   keyTest: (event) =>
@@ -94,8 +82,6 @@ export const actionAlignTop = register({
 
 export const actionAlignBottom = register({
   name: "alignBottom",
-  label: "labels.alignBottom",
-  icon: AlignBottomIcon,
   trackEvent: { category: "element" },
   predicate: alignActionsPredicate,
   perform: (elements, appState, _, app) => {
@@ -105,7 +91,7 @@ export const actionAlignBottom = register({
         position: "end",
         axis: "y",
       }),
-      storeAction: StoreAction.CAPTURE,
+      commitToHistory: true,
     };
   },
   keyTest: (event) =>
@@ -127,8 +113,6 @@ export const actionAlignBottom = register({
 
 export const actionAlignLeft = register({
   name: "alignLeft",
-  label: "labels.alignLeft",
-  icon: AlignLeftIcon,
   trackEvent: { category: "element" },
   predicate: alignActionsPredicate,
   perform: (elements, appState, _, app) => {
@@ -138,7 +122,7 @@ export const actionAlignLeft = register({
         position: "start",
         axis: "x",
       }),
-      storeAction: StoreAction.CAPTURE,
+      commitToHistory: true,
     };
   },
   keyTest: (event) =>
@@ -160,8 +144,6 @@ export const actionAlignLeft = register({
 
 export const actionAlignRight = register({
   name: "alignRight",
-  label: "labels.alignRight",
-  icon: AlignRightIcon,
   trackEvent: { category: "element" },
   predicate: alignActionsPredicate,
   perform: (elements, appState, _, app) => {
@@ -171,7 +153,7 @@ export const actionAlignRight = register({
         position: "end",
         axis: "x",
       }),
-      storeAction: StoreAction.CAPTURE,
+      commitToHistory: true,
     };
   },
   keyTest: (event) =>
@@ -193,8 +175,6 @@ export const actionAlignRight = register({
 
 export const actionAlignVerticallyCentered = register({
   name: "alignVerticallyCentered",
-  label: "labels.centerVertically",
-  icon: CenterVerticallyIcon,
   trackEvent: { category: "element" },
   predicate: alignActionsPredicate,
   perform: (elements, appState, _, app) => {
@@ -204,7 +184,7 @@ export const actionAlignVerticallyCentered = register({
         position: "center",
         axis: "y",
       }),
-      storeAction: StoreAction.CAPTURE,
+      commitToHistory: true,
     };
   },
   PanelComponent: ({ elements, appState, updateData, app }) => (
@@ -222,8 +202,6 @@ export const actionAlignVerticallyCentered = register({
 
 export const actionAlignHorizontallyCentered = register({
   name: "alignHorizontallyCentered",
-  label: "labels.centerHorizontally",
-  icon: CenterHorizontallyIcon,
   trackEvent: { category: "element" },
   predicate: alignActionsPredicate,
   perform: (elements, appState, _, app) => {
@@ -233,7 +211,7 @@ export const actionAlignHorizontallyCentered = register({
         position: "center",
         axis: "x",
       }),
-      storeAction: StoreAction.CAPTURE,
+      commitToHistory: true,
     };
   },
   PanelComponent: ({ elements, appState, updateData, app }) => (

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";
@@ -17,28 +17,26 @@ import {
   getOriginalContainerHeightFromCache,
   resetOriginalContainerCache,
   updateOriginalContainerCache,
-} from "../element/containerCache";
+} from "../element/textWysiwyg";
 import {
   hasBoundTextElement,
   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 { arrayToMap, getFontString } from "../utils";
+import { AppState } from "../types";
+import { Mutable } from "../utility-types";
+import { getFontString } from "../utils";
 import { register } from "./register";
-import { syncMovedIndices } from "../fractionalIndex";
-import { StoreAction } from "../store";
 
 export const actionUnbindText = register({
   name: "unbindText",
-  label: "labels.unbindText",
+  contextItemLabel: "labels.unbindText",
   trackEvent: { category: "element" },
   predicate: (elements, appState, _, app) => {
     const selectedElements = app.scene.getSelectedElements(appState);
@@ -47,11 +45,10 @@ export const actionUnbindText = register({
   },
   perform: (elements, appState, _, app) => {
     const selectedElements = app.scene.getSelectedElements(appState);
-    const elementsMap = app.scene.getNonDeletedElementsMap();
     selectedElements.forEach((element) => {
-      const boundTextElement = getBoundTextElement(element, elementsMap);
+      const boundTextElement = getBoundTextElement(element);
       if (boundTextElement) {
-        const { width, height } = measureText(
+        const { width, height, baseline } = measureText(
           boundTextElement.originalText,
           getFontString(boundTextElement),
           boundTextElement.lineHeight,
@@ -60,15 +57,12 @@ export const actionUnbindText = register({
           element.id,
         );
         resetOriginalContainerCache(element.id);
-        const { x, y } = computeBoundTextPosition(
-          element,
-          boundTextElement,
-          elementsMap,
-        );
+        const { x, y } = computeBoundTextPosition(element, boundTextElement);
         mutateElement(boundTextElement as ExcalidrawTextElement, {
           containerId: null,
           width,
           height,
+          baseline,
           text: boundTextElement.originalText,
           x,
           y,
@@ -86,14 +80,14 @@ export const actionUnbindText = register({
     return {
       elements,
       appState,
-      storeAction: StoreAction.CAPTURE,
+      commitToHistory: true,
     };
   },
 });
 
 export const actionBindText = register({
   name: "bindText",
-  label: "labels.bindText",
+  contextItemLabel: "labels.bindText",
   trackEvent: { category: "element" },
   predicate: (elements, appState, _, app) => {
     const selectedElements = app.scene.getSelectedElements(appState);
@@ -112,10 +106,7 @@ export const actionBindText = register({
       if (
         textElement &&
         bindingContainer &&
-        getBoundTextElement(
-          bindingContainer,
-          app.scene.getNonDeletedElementsMap(),
-        ) === null
+        getBoundTextElement(bindingContainer) === null
       ) {
         return true;
       }
@@ -142,7 +133,6 @@ export const actionBindText = register({
       containerId: container.id,
       verticalAlign: VERTICAL_ALIGN.MIDDLE,
       textAlign: TEXT_ALIGN.CENTER,
-      autoResize: true,
     });
     mutateElement(container, {
       boundElements: (container.boundElements || []).concat({
@@ -151,11 +141,7 @@ export const actionBindText = register({
       }),
     });
     const originalContainerHeight = container.height;
-    redrawTextBoundingBox(
-      textElement,
-      container,
-      app.scene.getNonDeletedElementsMap(),
-    );
+    redrawTextBoundingBox(textElement, container);
     // overwritting the cache with original container height so
     // it can be restored when unbind
     updateOriginalContainerCache(container.id, originalContainerHeight);
@@ -163,7 +149,7 @@ export const actionBindText = register({
     return {
       elements: pushTextAboveContainer(elements, container, textElement),
       appState: { ...appState, selectedElementIds: { [container.id]: true } },
-      storeAction: StoreAction.CAPTURE,
+      commitToHistory: true,
     };
   },
 });
@@ -183,8 +169,6 @@ const pushTextAboveContainer = (
     (ele) => ele.id === container.id,
   );
   updatedElements.splice(containerIndex + 1, 0, textElement);
-  syncMovedIndices(updatedElements, arrayToMap([container, textElement]));
-
   return updatedElements;
 };
 
@@ -203,14 +187,12 @@ const pushContainerBelowText = (
     (ele) => ele.id === textElement.id,
   );
   updatedElements.splice(textElementIndex, 0, container);
-  syncMovedIndices(updatedElements, arrayToMap([container, textElement]));
-
   return updatedElements;
 };
 
 export const actionWrapTextInContainer = register({
   name: "wrapTextInContainer",
-  label: "labels.createContainerFromText",
+  contextItemLabel: "labels.createContainerFromText",
   trackEvent: { category: "element" },
   predicate: (elements, appState, _, app) => {
     const selectedElements = app.scene.getSelectedElements(appState);
@@ -297,22 +279,16 @@ export const actionWrapTextInContainer = register({
             verticalAlign: VERTICAL_ALIGN.MIDDLE,
             boundElements: null,
             textAlign: TEXT_ALIGN.CENTER,
-            autoResize: true,
           },
           false,
         );
-        redrawTextBoundingBox(
-          textElement,
-          container,
-          app.scene.getNonDeletedElementsMap(),
-        );
+        redrawTextBoundingBox(textElement, container);
 
         updatedElements = pushContainerBelowText(
           [...updatedElements, container],
           container,
           textElement,
         );
-
         containerIds[container.id] = true;
       }
     }
@@ -323,7 +299,7 @@ export const actionWrapTextInContainer = register({
         ...appState,
         selectedElementIds: containerIds,
       },
-      storeAction: StoreAction.CAPTURE,
+      commitToHistory: true,
     };
   },
 });

packages/excalidraw/actions/actionCanvas.tsx

@@ -1,30 +1,15 @@
 import { ColorPicker } from "../components/ColorPicker/ColorPicker";
-import {
-  handIcon,
-  MoonIcon,
-  SunIcon,
-  TrashIcon,
-  zoomAreaIcon,
-  ZoomInIcon,
-  ZoomOutIcon,
-  ZoomResetIcon,
-} from "../components/icons";
+import { ZoomInIcon, ZoomOutIcon } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
-import {
-  CURSOR_TYPE,
-  MAX_ZOOM,
-  MIN_ZOOM,
-  THEME,
-  ZOOM_STEP,
-} from "../constants";
+import { CURSOR_TYPE, MIN_ZOOM, THEME, 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,15 +20,11 @@ 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",
-  label: "labels.canvasBackground",
-  paletteName: "Change canvas background color",
   trackEvent: false,
   predicate: (elements, appState, props, app) => {
     return (
@@ -54,9 +35,7 @@ export const actionChangeViewBackgroundColor = register({
   perform: (_, appState, value) => {
     return {
       appState: { ...appState, ...value },
-      storeAction: !!value.viewBackgroundColor
-        ? StoreAction.CAPTURE
-        : StoreAction.NONE,
+      commitToHistory: !!value.viewBackgroundColor,
     };
   },
   PanelComponent: ({ elements, appState, updateData, appProps }) => {
@@ -80,9 +59,6 @@ export const actionChangeViewBackgroundColor = register({
 
 export const actionClearCanvas = register({
   name: "clearCanvas",
-  label: "labels.clearCanvas",
-  paletteName: "Clear canvas",
-  icon: TrashIcon,
   trackEvent: { category: "canvas" },
   predicate: (elements, appState, props, app) => {
     return (
@@ -105,25 +81,21 @@ 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"
             ? { ...appState.activeTool, type: "selection" }
             : appState.activeTool,
       },
-      storeAction: StoreAction.CAPTURE,
+      commitToHistory: true,
     };
   },
 });
 
 export const actionZoomIn = register({
   name: "zoomIn",
-  label: "buttons.zoomIn",
   viewMode: true,
-  icon: ZoomInIcon,
   trackEvent: { category: "canvas" },
   perform: (_elements, appState, _, app) => {
     return {
@@ -139,17 +111,16 @@ export const actionZoomIn = register({
         ),
         userToFollow: null,
       },
-      storeAction: StoreAction.NONE,
+      commitToHistory: false,
     };
   },
-  PanelComponent: ({ updateData, appState }) => (
+  PanelComponent: ({ updateData }) => (
     <ToolButton
       type="button"
       className="zoom-in-button zoom-button"
       icon={ZoomInIcon}
       title={`${t("buttons.zoomIn")} — ${getShortcutKey("CtrlOrCmd++")}`}
       aria-label={t("buttons.zoomIn")}
-      disabled={appState.zoom.value >= MAX_ZOOM}
       onClick={() => {
         updateData(null);
       }}
@@ -162,8 +133,6 @@ export const actionZoomIn = register({
 
 export const actionZoomOut = register({
   name: "zoomOut",
-  label: "buttons.zoomOut",
-  icon: ZoomOutIcon,
   viewMode: true,
   trackEvent: { category: "canvas" },
   perform: (_elements, appState, _, app) => {
@@ -180,17 +149,16 @@ export const actionZoomOut = register({
         ),
         userToFollow: null,
       },
-      storeAction: StoreAction.NONE,
+      commitToHistory: false,
     };
   },
-  PanelComponent: ({ updateData, appState }) => (
+  PanelComponent: ({ updateData }) => (
     <ToolButton
       type="button"
       className="zoom-out-button zoom-button"
       icon={ZoomOutIcon}
       title={`${t("buttons.zoomOut")} — ${getShortcutKey("CtrlOrCmd+-")}`}
       aria-label={t("buttons.zoomOut")}
-      disabled={appState.zoom.value <= MIN_ZOOM}
       onClick={() => {
         updateData(null);
       }}
@@ -203,8 +171,6 @@ export const actionZoomOut = register({
 
 export const actionResetZoom = register({
   name: "resetZoom",
-  label: "buttons.resetZoom",
-  icon: ZoomResetIcon,
   viewMode: true,
   trackEvent: { category: "canvas" },
   perform: (_elements, appState, _, app) => {
@@ -221,7 +187,7 @@ export const actionResetZoom = register({
         ),
         userToFollow: null,
       },
-      storeAction: StoreAction.NONE,
+      commitToHistory: false,
     };
   },
   PanelComponent: ({ updateData, appState }) => (
@@ -247,7 +213,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,124 +220,118 @@ 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, 0.1),
+      30.0,
+    ) 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,
+    commitToHistory: false,
   };
 };
 
 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,
   });
 };
 
@@ -381,8 +340,6 @@ export const zoomToFit = ({
 // size, it won't be zoomed in.
 export const actionZoomToFitSelectionInViewport = register({
   name: "zoomToFitSelectionInViewport",
-  label: "labels.zoomToFitViewport",
-  icon: zoomAreaIcon,
   trackEvent: { category: "canvas" },
   perform: (elements, appState, _, app) => {
     const selectedElements = app.scene.getSelectedElements(appState);
@@ -393,7 +350,6 @@ export const actionZoomToFitSelectionInViewport = register({
         userToFollow: null,
       },
       fitToViewport: false,
-      canvasOffsets: app.getEditorUIOffsets(),
     });
   },
   // NOTE shift-2 should have been assigned actionZoomToFitSelection.
@@ -407,8 +363,6 @@ export const actionZoomToFitSelectionInViewport = register({
 
 export const actionZoomToFitSelection = register({
   name: "zoomToFitSelection",
-  label: "helpDialog.zoomToSelection",
-  icon: zoomAreaIcon,
   trackEvent: { category: "canvas" },
   perform: (elements, appState, _, app) => {
     const selectedElements = app.scene.getSelectedElements(appState);
@@ -419,7 +373,6 @@ export const actionZoomToFitSelection = register({
         userToFollow: null,
       },
       fitToViewport: true,
-      canvasOffsets: app.getEditorUIOffsets(),
     });
   },
   // NOTE this action should use shift-2 per figma, alas
@@ -432,11 +385,9 @@ export const actionZoomToFitSelection = register({
 
 export const actionZoomToFit = register({
   name: "zoomToFit",
-  label: "helpDialog.zoomToFit",
-  icon: zoomAreaIcon,
   viewMode: true,
   trackEvent: { category: "canvas" },
-  perform: (elements, appState, _, app) =>
+  perform: (elements, appState) =>
     zoomToFit({
       targetElements: elements,
       appState: {
@@ -444,7 +395,6 @@ export const actionZoomToFit = register({
         userToFollow: null,
       },
       fitToViewport: false,
-      canvasOffsets: app.getEditorUIOffsets(),
     }),
   keyTest: (event) =>
     event.code === CODES.ONE &&
@@ -455,13 +405,6 @@ export const actionZoomToFit = register({
 
 export const actionToggleTheme = register({
   name: "toggleTheme",
-  label: (_, appState) => {
-    return appState.theme === THEME.DARK
-      ? "buttons.lightMode"
-      : "buttons.darkMode";
-  },
-  keywords: ["toggle", "dark", "light", "mode", "theme"],
-  icon: (appState) => (appState.theme === THEME.LIGHT ? MoonIcon : SunIcon),
   viewMode: true,
   trackEvent: { category: "canvas" },
   perform: (_, appState, value) => {
@@ -471,7 +414,7 @@ export const actionToggleTheme = register({
         theme:
           value || (appState.theme === THEME.LIGHT ? THEME.DARK : THEME.LIGHT),
       },
-      storeAction: StoreAction.NONE,
+      commitToHistory: false,
     };
   },
   keyTest: (event) => event.altKey && event.shiftKey && event.code === CODES.D,
@@ -482,7 +425,6 @@ export const actionToggleTheme = register({
 
 export const actionToggleEraserTool = register({
   name: "toggleEraserTool",
-  label: "toolBar.eraser",
   trackEvent: { category: "toolbar" },
   perform: (elements, appState) => {
     let activeTool: AppState["activeTool"];
@@ -509,7 +451,7 @@ export const actionToggleEraserTool = register({
         activeEmbeddable: null,
         activeTool,
       },
-      storeAction: StoreAction.CAPTURE,
+      commitToHistory: true,
     };
   },
   keyTest: (event) => event.key === KEYS.E,
@@ -517,11 +459,7 @@ export const actionToggleEraserTool = register({
 
 export const actionToggleHandTool = register({
   name: "toggleHandTool",
-  label: "toolBar.hand",
-  paletteName: "Toggle hand tool",
   trackEvent: { category: "toolbar" },
-  icon: handIcon,
-  viewMode: false,
   perform: (elements, appState, _, app) => {
     let activeTool: AppState["activeTool"];
 
@@ -548,7 +486,7 @@ export const actionToggleHandTool = register({
         activeEmbeddable: null,
         activeTool,
       },
-      storeAction: StoreAction.CAPTURE,
+      commitToHistory: true,
     };
   },
   keyTest: (event) =>

packages/excalidraw/actions/actionClipboard.tsx

@@ -10,16 +10,12 @@ 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";
-import { StoreAction } from "../store";
 
 export const actionCopy = register({
   name: "copy",
-  label: "labels.copy",
-  icon: DuplicateIcon,
   trackEvent: { category: "element" },
   perform: async (elements, appState, event: ClipboardEvent | null, app) => {
     const elementsToCopy = app.scene.getSelectedElements({
@@ -32,7 +28,7 @@ export const actionCopy = register({
       await copyToClipboard(elementsToCopy, app.files, event);
     } catch (error: any) {
       return {
-        storeAction: StoreAction.NONE,
+        commitToHistory: false,
         appState: {
           ...appState,
           errorMessage: error.message,
@@ -41,16 +37,16 @@ export const actionCopy = register({
     }
 
     return {
-      storeAction: StoreAction.NONE,
+      commitToHistory: false,
     };
   },
+  contextItemLabel: "labels.copy",
   // don't supply a shortcut since we handle this conditionally via onCopy event
   keyTest: undefined,
 });
 
 export const actionPaste = register({
   name: "paste",
-  label: "labels.paste",
   trackEvent: { category: "element" },
   perform: async (elements, appState, data, app) => {
     let types;
@@ -67,7 +63,7 @@ export const actionPaste = register({
 
       if (isFirefox) {
         return {
-          storeAction: StoreAction.NONE,
+          commitToHistory: false,
           appState: {
             ...appState,
             errorMessage: t("hints.firefox_clipboard_write"),
@@ -76,7 +72,7 @@ export const actionPaste = register({
       }
 
       return {
-        storeAction: StoreAction.NONE,
+        commitToHistory: false,
         appState: {
           ...appState,
           errorMessage: t("errors.asyncPasteFailedOnRead"),
@@ -89,7 +85,7 @@ export const actionPaste = register({
     } catch (error: any) {
       console.error(error);
       return {
-        storeAction: StoreAction.NONE,
+        commitToHistory: false,
         appState: {
           ...appState,
           errorMessage: t("errors.asyncPasteFailedOnParse"),
@@ -98,34 +94,32 @@ export const actionPaste = register({
     }
 
     return {
-      storeAction: StoreAction.NONE,
+      commitToHistory: false,
     };
   },
+  contextItemLabel: "labels.paste",
   // don't supply a shortcut since we handle this conditionally via onCopy event
   keyTest: undefined,
 });
 
 export const actionCut = register({
   name: "cut",
-  label: "labels.cut",
-  icon: cutIcon,
   trackEvent: { category: "element" },
   perform: (elements, appState, event: ClipboardEvent | null, app) => {
     actionCopy.perform(elements, appState, event, app);
-    return actionDeleteSelected.perform(elements, appState, null, app);
+    return actionDeleteSelected.perform(elements, appState);
   },
+  contextItemLabel: "labels.cut",
   keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.X,
 });
 
 export const actionCopyAsSvg = register({
   name: "copyAsSvg",
-  label: "labels.copyAsSvg",
-  icon: svgIcon,
   trackEvent: { category: "element" },
   perform: async (elements, appState, _data, app) => {
     if (!app.canvas) {
       return {
-        storeAction: StoreAction.NONE,
+        commitToHistory: false,
       };
     }
 
@@ -144,56 +138,35 @@ export const actionCopyAsSvg = register({
         {
           ...appState,
           exportingFrame,
-          name: app.getName(),
         },
       );
-
-      const selectedElements = app.scene.getSelectedElements({
-        selectedElementIds: appState.selectedElementIds,
-        includeBoundTextElement: true,
-        includeElementsInFrames: true,
-      });
-
       return {
-        appState: {
-          toast: {
-            message: t("toast.copyToClipboardAsSvg", {
-              exportSelection: selectedElements.length
-                ? t("toast.selection")
-                : t("toast.canvas"),
-              exportColorScheme: appState.exportWithDarkMode
-                ? t("buttons.darkMode")
-                : t("buttons.lightMode"),
-            }),
-          },
-        },
-        storeAction: StoreAction.NONE,
+        commitToHistory: false,
       };
     } catch (error: any) {
       console.error(error);
       return {
         appState: {
+          ...appState,
           errorMessage: error.message,
         },
-        storeAction: StoreAction.NONE,
+        commitToHistory: false,
       };
     }
   },
   predicate: (elements) => {
     return probablySupportsClipboardWriteText && elements.length > 0;
   },
-  keywords: ["svg", "clipboard", "copy"],
+  contextItemLabel: "labels.copyAsSvg",
 });
 
 export const actionCopyAsPng = register({
   name: "copyAsPng",
-  label: "labels.copyAsPng",
-  icon: pngIcon,
   trackEvent: { category: "element" },
   perform: async (elements, appState, _data, app) => {
     if (!app.canvas) {
       return {
-        storeAction: StoreAction.NONE,
+        commitToHistory: false,
       };
     }
     const selectedElements = app.scene.getSelectedElements({
@@ -211,7 +184,6 @@ export const actionCopyAsPng = register({
       await exportCanvas("clipboard", exportedElements, appState, app.files, {
         ...appState,
         exportingFrame,
-        name: app.getName(),
       });
       return {
         appState: {
@@ -227,7 +199,7 @@ export const actionCopyAsPng = register({
             }),
           },
         },
-        storeAction: StoreAction.NONE,
+        commitToHistory: false,
       };
     } catch (error: any) {
       console.error(error);
@@ -236,20 +208,19 @@ export const actionCopyAsPng = register({
           ...appState,
           errorMessage: error.message,
         },
-        storeAction: StoreAction.NONE,
+        commitToHistory: false,
       };
     }
   },
   predicate: (elements) => {
     return probablySupportsClipboardBlob && elements.length > 0;
   },
+  contextItemLabel: "labels.copyAsPng",
   keyTest: (event) => event.code === CODES.C && event.altKey && event.shiftKey,
-  keywords: ["png", "clipboard", "copy"],
 });
 
 export const copyText = register({
   name: "copyText",
-  label: "labels.copyText",
   trackEvent: { category: "element" },
   perform: (elements, appState, _, app) => {
     const selectedElements = app.scene.getSelectedElements({
@@ -257,13 +228,17 @@ export const copyText = register({
       includeBoundTextElement: true,
     });
 
-    try {
-      copyTextToSystemClipboard(getTextFromElements(selectedElements));
-    } catch (e) {
-      throw new Error(t("errors.copyToSystemClipboardFailed"));
-    }
+    const text = selectedElements
+      .reduce((acc: string[], element) => {
+        if (isTextElement(element)) {
+          acc.push(element.text);
+        }
+        return acc;
+      }, [])
+      .join("\n\n");
+    copyTextToSystemClipboard(text);
     return {
-      storeAction: StoreAction.NONE,
+      commitToHistory: false,
     };
   },
   predicate: (elements, appState, _, app) => {
@@ -277,5 +252,5 @@ export const copyText = register({
         .some(isTextElement)
     );
   },
-  keywords: ["text", "clipboard", "copy"],
+  contextItemLabel: "labels.copyText",
 });

packages/excalidraw/actions/actionCropEditor.tsx

@@ -1,55 +0,0 @@
-import { register } from "./register";
-import { cropIcon } from "../components/icons";
-import { StoreAction } from "../store";
-import { ToolButton } from "../components/ToolButton";
-import { t } from "../i18n";
-import { isImageElement } from "../element/typeChecks";
-import type { ExcalidrawImageElement } from "../element/types";
-
-export const actionToggleCropEditor = register({
-  name: "cropEditor",
-  label: "helpDialog.cropStart",
-  icon: cropIcon,
-  viewMode: true,
-  trackEvent: { category: "menu" },
-  keywords: ["image", "crop"],
-  perform(elements, appState, _, app) {
-    const selectedElement = app.scene.getSelectedElements({
-      selectedElementIds: appState.selectedElementIds,
-      includeBoundTextElement: true,
-    })[0] as ExcalidrawImageElement;
-
-    return {
-      appState: {
-        ...appState,
-        isCropping: false,
-        croppingElementId: selectedElement.id,
-      },
-      storeAction: StoreAction.CAPTURE,
-    };
-  },
-  predicate: (elements, appState, _, app) => {
-    const selectedElements = app.scene.getSelectedElements(appState);
-    if (
-      !appState.croppingElementId &&
-      selectedElements.length === 1 &&
-      isImageElement(selectedElements[0])
-    ) {
-      return true;
-    }
-    return false;
-  },
-  PanelComponent: ({ appState, updateData, app }) => {
-    const label = t("helpDialog.cropStart");
-
-    return (
-      <ToolButton
-        type="button"
-        icon={cropIcon}
-        title={label}
-        aria-label={label}
-        onClick={() => updateData(null)}
-      />
-    );
-  },
-});

packages/excalidraw/actions/actionDeleteSelected.tsx

@@ -4,28 +4,20 @@ import { ToolButton } from "../components/ToolButton";
 import { t } from "../i18n";
 import { register } from "./register";
 import { getNonDeletedElements } from "../element";
-import type { ExcalidrawElement } from "../element/types";
-import type { AppClassProperties, AppState } from "../types";
-import { mutateElement, newElementWith } from "../element/mutateElement";
+import { 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 +28,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 });
       }
 
@@ -100,10 +72,8 @@ const handleGroupEditingState = (
 
 export const actionDeleteSelected = register({
   name: "deleteSelectedElements",
-  label: "labels.delete",
-  icon: TrashIcon,
   trackEvent: { category: "element", action: "delete" },
-  perform: (elements, appState, formData, app) => {
+  perform: (elements, appState) => {
     if (appState.editingLinearElement) {
       const {
         elementId,
@@ -111,8 +81,7 @@ export const actionDeleteSelected = register({
         startBindingElement,
         endBindingElement,
       } = appState.editingLinearElement;
-      const elementsMap = app.scene.getNonDeletedElementsMap();
-      const element = LinearElementEditor.getElement(elementId, elementsMap);
+      const element = LinearElementEditor.getElement(elementId);
       if (!element) {
         return false;
       }
@@ -140,7 +109,7 @@ export const actionDeleteSelected = register({
             ...nextAppState,
             editingLinearElement: null,
           },
-          storeAction: StoreAction.CAPTURE,
+          commitToHistory: false,
         };
       }
 
@@ -157,11 +126,7 @@ export const actionDeleteSelected = register({
           : endBindingElement,
       };
 
-      LinearElementEditor.deletePoints(
-        element,
-        selectedPointsIndices,
-        elementsMap,
-      );
+      LinearElementEditor.deletePoints(element, selectedPointsIndices);
 
       return {
         elements,
@@ -176,11 +141,11 @@ export const actionDeleteSelected = register({
                 : [0],
           },
         },
-        storeAction: StoreAction.CAPTURE,
+        commitToHistory: true,
       };
     }
     let { elements: nextElements, appState: nextAppState } =
-      deleteSelectedElements(elements, appState, app);
+      deleteSelectedElements(elements, appState);
     fixBindingsAfterDeletion(
       nextElements,
       elements.filter(({ id }) => appState.selectedElementIds[id]),
@@ -196,14 +161,13 @@ export const actionDeleteSelected = register({
         multiElement: null,
         activeEmbeddable: null,
       },
-      storeAction: isSomeElementSelected(
+      commitToHistory: isSomeElementSelected(
         getNonDeletedElements(elements),
         appState,
-      )
-        ? StoreAction.CAPTURE
-        : StoreAction.NONE,
+      ),
     };
   },
+  contextItemLabel: "labels.delete",
   keyTest: (event, appState, elements) =>
     (event.key === KEYS.BACKSPACE || event.key === KEYS.DELETE) &&
     !event[KEYS.CTRL_OR_CMD],

packages/excalidraw/actions/actionDistribute.tsx

@@ -3,17 +3,14 @@ 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 { updateFrameMembershipOfSelectedElements } from "../frame";
+import { ExcalidrawElement } from "../element/types";
 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";
 
@@ -34,24 +31,17 @@ const distributeSelectedElements = (
 ) => {
   const selectedElements = app.scene.getSelectedElements(appState);
 
-  const updatedElements = distributeElements(
-    selectedElements,
-    app.scene.getNonDeletedElementsMap(),
-    distribution,
-  );
+  const updatedElements = distributeElements(selectedElements, distribution);
 
   const updatedElementsMap = arrayToMap(updatedElements);
 
-  return updateFrameMembershipOfSelectedElements(
-    elements.map((element) => updatedElementsMap.get(element.id) || element),
-    appState,
-    app,
+  return elements.map(
+    (element) => updatedElementsMap.get(element.id) || element,
   );
 };
 
 export const distributeHorizontally = register({
   name: "distributeHorizontally",
-  label: "labels.distributeHorizontally",
   trackEvent: { category: "element" },
   perform: (elements, appState, _, app) => {
     return {
@@ -60,7 +50,7 @@ export const distributeHorizontally = register({
         space: "between",
         axis: "x",
       }),
-      storeAction: StoreAction.CAPTURE,
+      commitToHistory: true,
     };
   },
   keyTest: (event) =>
@@ -82,7 +72,6 @@ export const distributeHorizontally = register({
 
 export const distributeVertically = register({
   name: "distributeVertically",
-  label: "labels.distributeVertically",
   trackEvent: { category: "element" },
   perform: (elements, appState, _, app) => {
     return {
@@ -91,7 +80,7 @@ export const distributeVertically = register({
         space: "between",
         axis: "y",
       }),
-      storeAction: StoreAction.CAPTURE,
+      commitToHistory: true,
     };
   },
   keyTest: (event) =>

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,
@@ -31,39 +31,32 @@ import {
   excludeElementsInFramesFromSelection,
   getSelectedElements,
 } from "../scene/selection";
-import { syncMovedIndices } from "../fractionalIndex";
-import { StoreAction } from "../store";
 
 export const actionDuplicateSelection = register({
   name: "duplicateSelection",
-  label: "labels.duplicateSelection",
-  icon: DuplicateIcon,
   trackEvent: { category: "element" },
-  perform: (elements, appState, formData, app) => {
+  perform: (elements, appState) => {
     // 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);
 
-        return {
-          elements,
-          appState: newAppState,
-          storeAction: StoreAction.CAPTURE,
-        };
-      } catch {
+      if (!ret) {
         return false;
       }
+
+      return {
+        elements,
+        appState: ret.appState,
+        commitToHistory: true,
+      };
     }
 
     return {
       ...duplicateElements(elements, appState),
-      storeAction: StoreAction.CAPTURE,
+      commitToHistory: true,
     };
   },
+  contextItemLabel: "labels.duplicateSelection",
   keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.D,
   PanelComponent: ({ elements, appState, updateData }) => (
     <ToolButton
@@ -92,7 +85,6 @@ const duplicateElements = (
   const newElements: ExcalidrawElement[] = [];
   const oldElements: ExcalidrawElement[] = [];
   const oldIdToDuplicatedId = new Map();
-  const duplicatedElementsMap = new Map<string, ExcalidrawElement>();
 
   const duplicateAndOffsetElement = (element: ExcalidrawElement) => {
     const newElement = duplicateElement(
@@ -100,11 +92,10 @@ 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);
     oldIdToDuplicatedId.set(element.id, newElement.id);
     oldElements.push(element);
     newElements.push(newElement);
@@ -113,8 +104,8 @@ const duplicateElements = (
 
   const idsOfElementsToDuplicate = arrayToMap(
     getSelectedElements(sortedElements, appState, {
-      includeBoundTextElement: true,
-      includeElementsInFrames: true,
+      includeBoundTextElement: false,
+      includeElementsInFrames: false,
     }),
   );
 
@@ -148,7 +139,7 @@ const duplicateElements = (
       continue;
     }
 
-    const boundTextElement = getBoundTextElement(element, arrayToMap(elements));
+    const boundTextElement = getBoundTextElement(element);
     const isElementAFrameLike = isFrameLikeElement(element);
 
     if (idsOfElementsToDuplicate.get(element.id)) {
@@ -242,10 +233,8 @@ const duplicateElements = (
   }
 
   // step (3)
-  const finalElements = syncMovedIndices(
-    finalElementsReversed.reverse(),
-    arrayToMap(newElements),
-  );
+
+  const finalElements = finalElementsReversed.reverse();
 
   // ---------------------------------------------------------------------------
 

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";

packages/excalidraw/actions/actionElementLock.ts

@@ -1,10 +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";
 import { arrayToMap } from "../utils";
 import { register } from "./register";
 
@@ -13,31 +10,11 @@ const shouldLock = (elements: readonly ExcalidrawElement[]) =>
 
 export const actionToggleElementLock = register({
   name: "toggleElementLock",
-  label: (elements, appState, app) => {
-    const selected = app.scene.getSelectedElements({
-      selectedElementIds: appState.selectedElementIds,
-      includeBoundTextElement: false,
-    });
-    if (selected.length === 1 && !isFrameLikeElement(selected[0])) {
-      return selected[0].locked
-        ? "labels.elementLock.unlock"
-        : "labels.elementLock.lock";
-    }
-
-    return shouldLock(selected)
-      ? "labels.elementLock.lockAll"
-      : "labels.elementLock.unlockAll";
-  },
-  icon: (appState, elements) => {
-    const selectedElements = getSelectedElements(elements, appState);
-    return shouldLock(selectedElements) ? LockedIcon : UnlockedIcon;
-  },
   trackEvent: { category: "element" },
   predicate: (elements, appState, _, app) => {
     const selectedElements = app.scene.getSelectedElements(appState);
-    return (
-      selectedElements.length > 0 &&
-      !selectedElements.some((element) => element.locked && element.frameId)
+    return !selectedElements.some(
+      (element) => element.locked && element.frameId,
     );
   },
   perform: (elements, appState, _, app) => {
@@ -67,9 +44,24 @@ export const actionToggleElementLock = register({
           ? null
           : appState.selectedLinearElement,
       },
-      storeAction: StoreAction.CAPTURE,
+      commitToHistory: true,
     };
   },
+  contextItemLabel: (elements, appState, app) => {
+    const selected = app.scene.getSelectedElements({
+      selectedElementIds: appState.selectedElementIds,
+      includeBoundTextElement: false,
+    });
+    if (selected.length === 1 && !isFrameLikeElement(selected[0])) {
+      return selected[0].locked
+        ? "labels.elementLock.unlock"
+        : "labels.elementLock.lock";
+    }
+
+    return shouldLock(selected)
+      ? "labels.elementLock.lockAll"
+      : "labels.elementLock.unlockAll";
+  },
   keyTest: (event, appState, elements, app) => {
     return (
       event.key.toLocaleLowerCase() === KEYS.L &&
@@ -85,16 +77,10 @@ export const actionToggleElementLock = register({
 
 export const actionUnlockAllElements = register({
   name: "unlockAllElements",
-  paletteName: "Unlock all elements",
   trackEvent: { category: "canvas" },
   viewMode: false,
-  icon: UnlockedIcon,
-  predicate: (elements, appState) => {
-    const selectedElements = getSelectedElements(elements, appState);
-    return (
-      selectedElements.length === 0 &&
-      elements.some((element) => element.locked)
-    );
+  predicate: (elements) => {
+    return elements.some((element) => element.locked);
   },
   perform: (elements, appState) => {
     const lockedElements = elements.filter((el) => el.locked);
@@ -112,8 +98,8 @@ export const actionUnlockAllElements = register({
           lockedElements.map((el) => [el.id, true]),
         ),
       },
-      storeAction: StoreAction.CAPTURE,
+      commitToHistory: true,
     };
   },
-  label: "labels.elementLock.unlockAll",
+  contextItemLabel: "labels.elementLock.unlockAll",
 });

packages/excalidraw/actions/actionExport.tsx

@@ -1,4 +1,4 @@
-import { ExportIcon, questionCircle, saveAs } from "../components/icons";
+import { questionCircle, saveAs } from "../components/icons";
 import { ProjectName } from "../components/ProjectName";
 import { ToolButton } from "../components/ToolButton";
 import { Tooltip } from "../components/Tooltip";
@@ -16,26 +16,24 @@ 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";
 
 export const actionChangeProjectName = register({
   name: "changeProjectName",
-  label: "labels.fileTitle",
   trackEvent: false,
   perform: (_elements, appState, value) => {
-    return {
-      appState: { ...appState, name: value },
-      storeAction: StoreAction.NONE,
-    };
+    return { appState: { ...appState, name: value }, commitToHistory: false };
   },
-  PanelComponent: ({ appState, updateData, appProps, data, app }) => (
+  PanelComponent: ({ appState, updateData, appProps, data }) => (
     <ProjectName
       label={t("labels.fileTitle")}
-      value={app.getName()}
+      value={appState.name || "Unnamed"}
       onChange={(name: string) => updateData(name)}
+      isNameEditable={
+        typeof appProps.name === "undefined" && !appState.viewModeEnabled
+      }
       ignoreFocus={data?.ignoreFocus ?? false}
     />
   ),
@@ -43,12 +41,11 @@ export const actionChangeProjectName = register({
 
 export const actionChangeExportScale = register({
   name: "changeExportScale",
-  label: "imageExportDialog.scale",
   trackEvent: { category: "export", action: "scale" },
   perform: (_elements, appState, value) => {
     return {
       appState: { ...appState, exportScale: value },
-      storeAction: StoreAction.NONE,
+      commitToHistory: false,
     };
   },
   PanelComponent: ({ elements: allElements, appState, updateData }) => {
@@ -93,12 +90,11 @@ export const actionChangeExportScale = register({
 
 export const actionChangeExportBackground = register({
   name: "changeExportBackground",
-  label: "imageExportDialog.label.withBackground",
   trackEvent: { category: "export", action: "toggleBackground" },
   perform: (_elements, appState, value) => {
     return {
       appState: { ...appState, exportBackground: value },
-      storeAction: StoreAction.NONE,
+      commitToHistory: false,
     };
   },
   PanelComponent: ({ appState, updateData }) => (
@@ -113,12 +109,11 @@ export const actionChangeExportBackground = register({
 
 export const actionChangeExportEmbedScene = register({
   name: "changeExportEmbedScene",
-  label: "imageExportDialog.tooltip.embedScene",
   trackEvent: { category: "export", action: "embedScene" },
   perform: (_elements, appState, value) => {
     return {
       appState: { ...appState, exportEmbedScene: value },
-      storeAction: StoreAction.NONE,
+      commitToHistory: false,
     };
   },
   PanelComponent: ({ appState, updateData }) => (
@@ -136,8 +131,6 @@ export const actionChangeExportEmbedScene = register({
 
 export const actionSaveToActiveFile = register({
   name: "saveToActiveFile",
-  label: "buttons.save",
-  icon: ExportIcon,
   trackEvent: { category: "export" },
   predicate: (elements, appState, props, app) => {
     return (
@@ -151,16 +144,11 @@ export const actionSaveToActiveFile = register({
 
     try {
       const { fileHandle } = isImageFileHandle(appState.fileHandle)
-        ? await resaveAsImageWithScene(
-            elements,
-            appState,
-            app.files,
-            app.getName(),
-          )
-        : await saveAsJSON(elements, appState, app.files, app.getName());
+        ? await resaveAsImageWithScene(elements, appState, app.files)
+        : await saveAsJSON(elements, appState, app.files);
 
       return {
-        storeAction: StoreAction.NONE,
+        commitToHistory: false,
         appState: {
           ...appState,
           fileHandle,
@@ -182,7 +170,7 @@ export const actionSaveToActiveFile = register({
       } else {
         console.warn(error);
       }
-      return { storeAction: StoreAction.NONE };
+      return { commitToHistory: false };
     }
   },
   keyTest: (event) =>
@@ -191,8 +179,6 @@ export const actionSaveToActiveFile = register({
 
 export const actionSaveFileToDisk = register({
   name: "saveFileToDisk",
-  label: "exportDialog.disk_title",
-  icon: ExportIcon,
   viewMode: true,
   trackEvent: { category: "export" },
   perform: async (elements, appState, value, app) => {
@@ -204,10 +190,9 @@ export const actionSaveFileToDisk = register({
           fileHandle: null,
         },
         app.files,
-        app.getName(),
       );
       return {
-        storeAction: StoreAction.NONE,
+        commitToHistory: false,
         appState: {
           ...appState,
           openDialog: null,
@@ -221,7 +206,7 @@ export const actionSaveFileToDisk = register({
       } else {
         console.warn(error);
       }
-      return { storeAction: StoreAction.NONE };
+      return { commitToHistory: false };
     }
   },
   keyTest: (event) =>
@@ -242,7 +227,6 @@ export const actionSaveFileToDisk = register({
 
 export const actionLoadScene = register({
   name: "loadScene",
-  label: "buttons.load",
   trackEvent: { category: "export" },
   predicate: (elements, appState, props, app) => {
     return (
@@ -260,7 +244,7 @@ export const actionLoadScene = register({
         elements: loadedElements,
         appState: loadedAppState,
         files,
-        storeAction: StoreAction.CAPTURE,
+        commitToHistory: true,
       };
     } catch (error: any) {
       if (error?.name === "AbortError") {
@@ -271,7 +255,7 @@ export const actionLoadScene = register({
         elements,
         appState: { ...appState, errorMessage: error.message },
         files: app.files,
-        storeAction: StoreAction.NONE,
+        commitToHistory: false,
       };
     }
   },
@@ -280,12 +264,11 @@ export const actionLoadScene = register({
 
 export const actionExportWithDarkMode = register({
   name: "exportWithDarkMode",
-  label: "imageExportDialog.label.darkMode",
   trackEvent: { category: "export", action: "toggleTheme" },
   perform: (_elements, appState, value) => {
     return {
       appState: { ...appState, exportWithDarkMode: value },
-      storeAction: StoreAction.NONE,
+      commitToHistory: false,
     };
   },
   PanelComponent: ({ appState, updateData }) => (

packages/excalidraw/actions/actionFinalize.tsx

@@ -1,36 +1,35 @@
 import { KEYS } from "../keys";
 import { isInvisiblySmallElement } from "../element";
-import { arrayToMap, updateActiveTool } from "../utils";
+import { updateActiveTool } from "../utils";
 import { ToolButton } from "../components/ToolButton";
 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 Scene from "../scene/Scene";
 import {
   maybeBindLinearElement,
   bindOrUnbindLinearElement,
 } from "../element/binding";
 import { isBindingElement, isLinearElement } from "../element/typeChecks";
-import type { AppState } from "../types";
+import { AppState } from "../types";
 import { resetCursor } from "../cursor";
-import { StoreAction } from "../store";
-import { pointFrom } from "../../math";
-import { isPathALoop } from "../shapes";
 
 export const actionFinalize = register({
   name: "finalize",
-  label: "",
   trackEvent: false,
-  perform: (elements, appState, _, app) => {
-    const { interactiveCanvas, focusContainer, scene } = app;
-
-    const elementsMap = scene.getNonDeletedElementsMap();
-
+  perform: (
+    elements,
+    appState,
+    _,
+    { interactiveCanvas, focusContainer, scene },
+  ) => {
     if (appState.editingLinearElement) {
       const { elementId, startBindingElement, endBindingElement } =
         appState.editingLinearElement;
-      const element = LinearElementEditor.getElement(elementId, elementsMap);
+      const element = LinearElementEditor.getElement(elementId);
 
       if (element) {
         if (isBindingElement(element)) {
@@ -38,8 +37,6 @@ export const actionFinalize = register({
             element,
             startBindingElement,
             endBindingElement,
-            elementsMap,
-            scene,
           );
         }
         return {
@@ -52,7 +49,7 @@ export const actionFinalize = register({
             cursorButton: "up",
             editingLinearElement: null,
           },
-          storeAction: StoreAction.CAPTURE,
+          commitToHistory: true,
         };
       }
     }
@@ -73,8 +70,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) {
@@ -93,9 +90,7 @@ export const actionFinalize = register({
           });
         }
       }
-
       if (isInvisiblySmallElement(multiPointElement)) {
-        // TODO: #7348 in theory this gets recorded by the store, so the invisible elements could be restored by the undo/redo, which might be not what we would want
         newElements = newElements.filter(
           (el) => el.id !== multiPointElement.id,
         );
@@ -113,10 +108,10 @@ export const actionFinalize = register({
           const linePoints = multiPointElement.points;
           const firstPoint = linePoints[0];
           mutateElement(multiPointElement, {
-            points: linePoints.map((p, index) =>
+            points: linePoints.map((point, index) =>
               index === linePoints.length - 1
-                ? pointFrom(firstPoint[0], firstPoint[1])
-                : p,
+                ? ([firstPoint[0], firstPoint[1]] as const)
+                : point,
             ),
           });
         }
@@ -130,14 +125,12 @@ export const actionFinalize = register({
         const [x, y] = LinearElementEditor.getPointAtIndexGlobalCoordinates(
           multiPointElement,
           -1,
-          arrayToMap(elements),
         );
         maybeBindLinearElement(
           multiPointElement,
           appState,
+          Scene.getScene(multiPointElement)!,
           { x, y },
-          elementsMap,
-          elements,
         );
       }
     }
@@ -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:
@@ -194,18 +186,17 @@ export const actionFinalize = register({
         // To select the linear element when user has finished mutipoint editing
         selectedLinearElement:
           multiPointElement && isLinearElement(multiPointElement)
-            ? new LinearElementEditor(multiPointElement)
+            ? new LinearElementEditor(multiPointElement, scene)
             : appState.selectedLinearElement,
         pendingImageElementId: null,
       },
-      // TODO: #7348 we should not capture everything, but if we don't, it leads to incosistencies -> revisit
-      storeAction: StoreAction.CAPTURE,
+      commitToHistory: appState.activeTool.type === "freedraw",
     };
   },
   keyTest: (event, appState) =>
     (event.key === KEYS.ESCAPE &&
       (appState.editingLinearElement !== null ||
-        (!appState.newElement && appState.multiElement === null))) ||
+        (!appState.draggingElement && appState.multiElement === null))) ||
     ((event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) &&
       appState.multiElement !== null),
   PanelComponent: ({ appState, updateData, data }) => (
@@ -217,7 +208,6 @@ export const actionFinalize = register({
       onClick={updateData}
       visible={appState.multiElement != null}
       size={data?.size || "medium"}
-      style={{ pointerEvents: "all" }}
     />
   ),
 });

packages/excalidraw/actions/actionFlip.test.tsx

@@ -1,211 +0,0 @@
-import React from "react";
-import { Excalidraw } from "../index";
-import { render } from "../tests/test-utils";
-import { API } from "../tests/helpers/api";
-import { pointFrom } from "../../math";
-import { actionFlipHorizontal, actionFlipVertical } from "./actionFlip";
-
-const { h } = window;
-
-describe("flipping re-centers selection", () => {
-  it("elbow arrow touches group selection side yet it remains in place after multiple moves", async () => {
-    const elements = [
-      API.createElement({
-        type: "rectangle",
-        id: "rec1",
-        x: 100,
-        y: 100,
-        width: 100,
-        height: 100,
-        boundElements: [{ id: "arr", type: "arrow" }],
-      }),
-      API.createElement({
-        type: "rectangle",
-        id: "rec2",
-        x: 220,
-        y: 250,
-        width: 100,
-        height: 100,
-        boundElements: [{ id: "arr", type: "arrow" }],
-      }),
-      API.createElement({
-        type: "arrow",
-        id: "arr",
-        x: 149.9,
-        y: 95,
-        width: 156,
-        height: 239.9,
-        startBinding: {
-          elementId: "rec1",
-          focus: 0,
-          gap: 5,
-          fixedPoint: [0.49, -0.05],
-        },
-        endBinding: {
-          elementId: "rec2",
-          focus: 0,
-          gap: 5,
-          fixedPoint: [-0.05, 0.49],
-        },
-        startArrowhead: null,
-        endArrowhead: "arrow",
-        points: [
-          pointFrom(0, 0),
-          pointFrom(0, -35),
-          pointFrom(-90.9, -35),
-          pointFrom(-90.9, 204.9),
-          pointFrom(65.1, 204.9),
-        ],
-        elbowed: true,
-      }),
-    ];
-    await render(<Excalidraw initialData={{ elements }} />);
-
-    API.setSelectedElements(elements);
-
-    expect(Object.keys(h.state.selectedElementIds).length).toBe(3);
-
-    API.executeAction(actionFlipHorizontal);
-    API.executeAction(actionFlipHorizontal);
-    API.executeAction(actionFlipHorizontal);
-    API.executeAction(actionFlipHorizontal);
-
-    const rec1 = h.elements.find((el) => el.id === "rec1");
-    expect(rec1?.x).toBeCloseTo(100);
-    expect(rec1?.y).toBeCloseTo(100);
-
-    const rec2 = h.elements.find((el) => el.id === "rec2");
-    expect(rec2?.x).toBeCloseTo(220);
-    expect(rec2?.y).toBeCloseTo(250);
-  });
-});
-
-describe("flipping arrowheads", () => {
-  beforeEach(async () => {
-    await render(<Excalidraw />);
-  });
-
-  it("flipping bound arrow should flip arrowheads only", () => {
-    const rect = API.createElement({
-      type: "rectangle",
-      boundElements: [{ type: "arrow", id: "arrow1" }],
-    });
-    const arrow = API.createElement({
-      type: "arrow",
-      id: "arrow1",
-      startArrowhead: "arrow",
-      endArrowhead: null,
-      endBinding: {
-        elementId: rect.id,
-        focus: 0.5,
-        gap: 5,
-      },
-    });
-
-    API.setElements([rect, arrow]);
-    API.setSelectedElements([arrow]);
-
-    expect(API.getElement(arrow).startArrowhead).toBe("arrow");
-    expect(API.getElement(arrow).endArrowhead).toBe(null);
-
-    API.executeAction(actionFlipHorizontal);
-    expect(API.getElement(arrow).startArrowhead).toBe(null);
-    expect(API.getElement(arrow).endArrowhead).toBe("arrow");
-
-    API.executeAction(actionFlipHorizontal);
-    expect(API.getElement(arrow).startArrowhead).toBe("arrow");
-    expect(API.getElement(arrow).endArrowhead).toBe(null);
-
-    API.executeAction(actionFlipVertical);
-    expect(API.getElement(arrow).startArrowhead).toBe(null);
-    expect(API.getElement(arrow).endArrowhead).toBe("arrow");
-  });
-
-  it("flipping bound arrow should flip arrowheads only 2", () => {
-    const rect = API.createElement({
-      type: "rectangle",
-      boundElements: [{ type: "arrow", id: "arrow1" }],
-    });
-    const rect2 = API.createElement({
-      type: "rectangle",
-      boundElements: [{ type: "arrow", id: "arrow1" }],
-    });
-    const arrow = API.createElement({
-      type: "arrow",
-      id: "arrow1",
-      startArrowhead: "arrow",
-      endArrowhead: "circle",
-      startBinding: {
-        elementId: rect.id,
-        focus: 0.5,
-        gap: 5,
-      },
-      endBinding: {
-        elementId: rect2.id,
-        focus: 0.5,
-        gap: 5,
-      },
-    });
-
-    API.setElements([rect, rect2, arrow]);
-    API.setSelectedElements([arrow]);
-
-    expect(API.getElement(arrow).startArrowhead).toBe("arrow");
-    expect(API.getElement(arrow).endArrowhead).toBe("circle");
-
-    API.executeAction(actionFlipHorizontal);
-    expect(API.getElement(arrow).startArrowhead).toBe("circle");
-    expect(API.getElement(arrow).endArrowhead).toBe("arrow");
-
-    API.executeAction(actionFlipVertical);
-    expect(API.getElement(arrow).startArrowhead).toBe("arrow");
-    expect(API.getElement(arrow).endArrowhead).toBe("circle");
-  });
-
-  it("flipping unbound arrow shouldn't flip arrowheads", () => {
-    const arrow = API.createElement({
-      type: "arrow",
-      id: "arrow1",
-      startArrowhead: "arrow",
-      endArrowhead: "circle",
-    });
-
-    API.setElements([arrow]);
-    API.setSelectedElements([arrow]);
-
-    expect(API.getElement(arrow).startArrowhead).toBe("arrow");
-    expect(API.getElement(arrow).endArrowhead).toBe("circle");
-
-    API.executeAction(actionFlipHorizontal);
-    expect(API.getElement(arrow).startArrowhead).toBe("arrow");
-    expect(API.getElement(arrow).endArrowhead).toBe("circle");
-  });
-
-  it("flipping bound arrow shouldn't flip arrowheads if selected alongside non-arrow eleemnt", () => {
-    const rect = API.createElement({
-      type: "rectangle",
-      boundElements: [{ type: "arrow", id: "arrow1" }],
-    });
-    const arrow = API.createElement({
-      type: "arrow",
-      id: "arrow1",
-      startArrowhead: "arrow",
-      endArrowhead: null,
-      endBinding: {
-        elementId: rect.id,
-        focus: 0.5,
-        gap: 5,
-      },
-    });
-
-    API.setElements([rect, arrow]);
-    API.setSelectedElements([rect, arrow]);
-
-    expect(API.getElement(arrow).startArrowhead).toBe("arrow");
-    expect(API.getElement(arrow).endArrowhead).toBe(null);
-
-    API.executeAction(actionFlipHorizontal);
-    expect(API.getElement(arrow).startArrowhead).toBe("arrow");
-    expect(API.getElement(arrow).endArrowhead).toBe(null);
-  });
-});

packages/excalidraw/actions/actionFlip.ts

@@ -1,90 +1,56 @@
 import { register } from "./register";
 import { getSelectedElements } from "../scene";
 import { getNonDeletedElements } from "../element";
-import type {
-  ExcalidrawArrowElement,
-  ExcalidrawElbowArrowElement,
-  ExcalidrawElement,
-  NonDeleted,
-  NonDeletedSceneElementsMap,
-} from "../element/types";
+import { ExcalidrawElement, NonDeleted } from "../element/types";
 import { resizeMultipleElements } from "../element/resizeElements";
-import type { AppClassProperties, AppState } from "../types";
+import { AppState, PointerDownState } 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 {
-  isArrowElement,
-  isElbowArrow,
-  isLinearElement,
-} from "../element/typeChecks";
-import { mutateElbowArrow } from "../element/routing";
-import { mutateElement, newElementWith } from "../element/mutateElement";
 
 export const actionFlipHorizontal = register({
   name: "flipHorizontal",
-  label: "labels.flipHorizontal",
-  icon: flipHorizontal,
   trackEvent: { category: "element" },
   perform: (elements, appState, _, app) => {
     return {
-      elements: updateFrameMembershipOfSelectedElements(
-        flipSelectedElements(
-          elements,
-          app.scene.getNonDeletedElementsMap(),
-          appState,
-          "horizontal",
-          app,
-        ),
-        appState,
-        app,
-      ),
+      elements: flipSelectedElements(elements, appState, "horizontal"),
       appState,
-      storeAction: StoreAction.CAPTURE,
+      commitToHistory: true,
     };
   },
   keyTest: (event) => event.shiftKey && event.code === CODES.H,
+  contextItemLabel: "labels.flipHorizontal",
 });
 
 export const actionFlipVertical = register({
   name: "flipVertical",
-  label: "labels.flipVertical",
-  icon: flipVertical,
   trackEvent: { category: "element" },
   perform: (elements, appState, _, app) => {
     return {
       elements: updateFrameMembershipOfSelectedElements(
-        flipSelectedElements(
-          elements,
-          app.scene.getNonDeletedElementsMap(),
-          appState,
-          "vertical",
-          app,
-        ),
+        flipSelectedElements(elements, appState, "vertical"),
         appState,
         app,
       ),
       appState,
-      storeAction: StoreAction.CAPTURE,
+      commitToHistory: true,
     };
   },
   keyTest: (event) =>
     event.shiftKey && event.code === CODES.V && !event[KEYS.CTRL_OR_CMD],
+  contextItemLabel: "labels.flipVertical",
 });
 
 const flipSelectedElements = (
   elements: readonly ExcalidrawElement[],
-  elementsMap: NonDeletedSceneElementsMap,
   appState: Readonly<AppState>,
   flipDirection: "horizontal" | "vertical",
-  app: AppClassProperties,
 ) => {
   const selectedElements = getSelectedElements(
     getNonDeletedElements(elements),
@@ -97,10 +63,8 @@ const flipSelectedElements = (
 
   const updatedElements = flipElements(
     selectedElements,
-    elementsMap,
     appState,
     flipDirection,
-    app,
   );
 
   const updatedElementsMap = arrayToMap(updatedElements);
@@ -111,92 +75,24 @@ const flipSelectedElements = (
 };
 
 const flipElements = (
-  selectedElements: NonDeleted<ExcalidrawElement>[],
-  elementsMap: NonDeletedSceneElementsMap,
+  elements: NonDeleted<ExcalidrawElement>[],
   appState: AppState,
   flipDirection: "horizontal" | "vertical",
-  app: AppClassProperties,
 ): ExcalidrawElement[] => {
-  if (
-    selectedElements.every(
-      (element) =>
-        isArrowElement(element) && (element.startBinding || element.endBinding),
-    )
-  ) {
-    return selectedElements.map((element) => {
-      const _element = element as ExcalidrawArrowElement;
-      return newElementWith(_element, {
-        startArrowhead: _element.endArrowhead,
-        endArrowhead: _element.startArrowhead,
-      });
-    });
-  }
-
-  const { minX, minY, maxX, maxY, midX, midY } =
-    getCommonBoundingBox(selectedElements);
+  const { minX, minY, maxX, maxY } = getCommonBoundingBox(elements);
 
   resizeMultipleElements(
-    elementsMap,
-    selectedElements,
-    elementsMap,
+    { originalElements: arrayToMap(elements) } as PointerDownState,
+    elements,
     "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
+    : unbindLinearElements)(elements);
 
-  // ---------------------------------------------------------------------------
-  // flipping arrow elements (and potentially other) makes the selection group
-  // "move" across the canvas because of how arrows can bump against the "wall"
-  // of the selection, so we need to center the group back to the original
-  // position so that repeated flips don't accumulate the offset
-
-  const { elbowArrows, otherElements } = selectedElements.reduce(
-    (
-      acc: {
-        elbowArrows: ExcalidrawElbowArrowElement[];
-        otherElements: ExcalidrawElement[];
-      },
-      element,
-    ) =>
-      isElbowArrow(element)
-        ? { ...acc, elbowArrows: acc.elbowArrows.concat(element) }
-        : { ...acc, otherElements: acc.otherElements.concat(element) },
-    { elbowArrows: [], otherElements: [] },
-  );
-
-  const { midX: newMidX, midY: newMidY } =
-    getCommonBoundingBox(selectedElements);
-  const [diffX, diffY] = [midX - newMidX, midY - newMidY];
-  otherElements.forEach((element) =>
-    mutateElement(element, {
-      x: element.x + diffX,
-      y: element.y + diffY,
-    }),
-  );
-  elbowArrows.forEach((element) =>
-    mutateElbowArrow(
-      element,
-      elementsMap,
-      element.points,
-      undefined,
-      undefined,
-      {
-        informMutation: false,
-      },
-    ),
-  );
-  // ---------------------------------------------------------------------------
-
-  return selectedElements;
+  return elements;
 };