release @excalidraw/excalidraw@0.10.1

fix: unsafely accessing draggingElement (#5216 )
2025-07-25 13:58:22 +08:00 · 2022-05-30 21:52:45 +02:00 · 2022-05-30 21:34:19 +02:00
338 changed files with 14304 additions and 41716 deletions
--- a/.env
+++ b/.env
@ -0,0 +1,5 @@
+REACT_APP_BACKEND_V1_GET_URL=https://json.excalidraw.com/api/v1/
+REACT_APP_BACKEND_V2_GET_URL=https://json.excalidraw.com/api/v2/
+REACT_APP_BACKEND_V2_POST_URL=https://json.excalidraw.com/api/v2/post/
+REACT_APP_SOCKET_SERVER_URL=https://portal.excalidraw.com
+REACT_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"}'
--- a/.env.development
+++ b/.env.development
@ -1,22 +0,0 @@
-REACT_APP_BACKEND_V2_GET_URL=https://json-dev.excalidraw.com/api/v2/
-REACT_APP_BACKEND_V2_POST_URL=https://json-dev.excalidraw.com/api/v2/post/
-
-REACT_APP_LIBRARY_URL=https://libraries.excalidraw.com
-REACT_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries
-
-# collaboration WebSocket server (https://github.com/excalidraw/excalidraw-room)
-REACT_APP_WS_SERVER_URL=http://localhost:3002
-
-# set this only if using the collaboration workflow we use on excalidraw.com
-REACT_APP_PORTAL_URL=
-
-REACT_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8","authDomain":"excalidraw-oss-dev.firebaseapp.com","projectId":"excalidraw-oss-dev","storageBucket":"excalidraw-oss-dev.appspot.com","messagingSenderId":"664559512677","appId":"1:664559512677:web:a385181f2928d328a7aa8c"}'
-
-# 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
-REACT_APP_DEV_ENABLE_SW=
-# whether to disable live reload / HMR. Usuaully what you want to do when
-# debugging Service Workers.
-REACT_APP_DEV_DISABLE_LIVE_RELOAD=
--- a/.env.production
+++ b/.env.production
@ -1,17 +1 @@
-REACT_APP_BACKEND_V2_GET_URL=https://json.excalidraw.com/api/v2/
-REACT_APP_BACKEND_V2_POST_URL=https://json.excalidraw.com/api/v2/post/
-
-REACT_APP_LIBRARY_URL=https://libraries.excalidraw.com
-REACT_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries
-
-REACT_APP_PORTAL_URL=https://portal.excalidraw.com
-# Fill to set socket server URL used for collaboration.
-# Meant for forks only: excalidraw.com uses custom REACT_APP_PORTAL_URL flow
-REACT_APP_WS_SERVER_URL=
-
-REACT_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"}'
-
-# production-only vars
 REACT_APP_GOOGLE_ANALYTICS_ID=UA-387204-13
-
-REACT_APP_PLUS_APP=https://app.excalidraw.com
--- a/.eslintignore
+++ b/.eslintignore
@ -5,4 +5,3 @@ package-lock.json
 firebase/
 dist/
 public/workbox
-src/packages/excalidraw/types
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -1,7 +1,6 @@
 {
  "extends": ["@excalidraw/eslint-config", "react-app"],
  "rules": {
-    "import/no-anonymous-default-export": "off",
-    "no-restricted-globals": "off"
+    "import/no-anonymous-default-export": "off"
  }
 }
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@ -0,0 +1,34 @@
+version: 2
+updates:
+  - package-ecosystem: npm
+    directory: /
+    schedule:
+      interval: weekly
+      day: sunday
+      time: "01:00"
+    reviewers:
+      - lipis
+    assignees:
+      - lipis
+
+  - package-ecosystem: npm
+    directory: /src/packages/excalidraw/
+    schedule:
+      interval: weekly
+      day: sunday
+      time: "01:00"
+    reviewers:
+      - ad1992
+    assignees:
+      - ad1992
+
+  - package-ecosystem: npm
+    directory: /src/packages/utils/
+    schedule:
+      interval: weekly
+      day: sunday
+      time: "01:00"
+    reviewers:
+      - ad1992
+    assignees:
+      - ad1992
--- a/.github/workflows/autorelease-excalidraw.yml
+++ b/.github/workflows/autorelease-excalidraw.yml
@ -1,4 +1,4 @@
-name: Auto release excalidraw next
+name: Auto release @excalidraw/excalidraw-next
 on:
  push:
    branches:
@ -23,5 +23,4 @@ jobs:
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
      - name: Auto release
        run: |
-          yarn add @actions/core
          yarn autorelease
--- a/.github/workflows/autorelease-preview.yml
+++ b/.github/workflows/autorelease-preview.yml
@ -1,55 +0,0 @@
-name: Auto release excalidraw preview
-on:
-  issue_comment:
-    types: [created, edited]
-
-jobs:
-  Auto-release-excalidraw-preview:
-    name: Auto release preview
-    if: github.event.comment.body == '@excalibot trigger release' && github.event.issue.pull_request
-    runs-on: ubuntu-latest
-    steps:
-      - name: React to release comment
-        uses: peter-evans/create-or-update-comment@v1
-        with:
-          token: ${{ secrets.PUSH_TRANSLATIONS_COVERAGE_PAT }}
-          comment-id: ${{ github.event.comment.id }}
-          reactions: "+1"
-      - name: Get PR SHA
-        id: sha
-        uses: actions/github-script@v4
-        with:
-          result-encoding: string
-          script: |
-            const { owner, repo, number } = context.issue;
-            const pr = await github.pulls.get({
-              owner,
-              repo,
-              pull_number: number,
-            });
-            return pr.data.head.sha
-      - uses: actions/checkout@v2
-        with:
-          ref: ${{ steps.sha.outputs.result }}
-          fetch-depth: 2
-      - name: Setup Node.js 14.x
-        uses: actions/setup-node@v2
-        with:
-          node-version: 14.x
-      - name: Set up publish access
-        run: |
-          npm config set //registry.npmjs.org/:_authToken ${NPM_TOKEN}
-        env:
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-      - name: Auto release preview
-        id: "autorelease"
-        run: |
-          yarn add @actions/core
-          yarn autorelease preview ${{ github.event.issue.number }}
-      - name: Post comment post release
-        if: always()
-        uses: peter-evans/create-or-update-comment@v1
-        with:
-          token: ${{ secrets.PUSH_TRANSLATIONS_COVERAGE_PAT }}
-          issue-number: ${{ github.event.issue.number }}
-          body: "@${{ github.event.comment.user.login }} ${{ steps.autorelease.outputs.result }}"
--- a/.github/workflows/build-packages.yml
+++ b/.github/workflows/build-packages.yml
@ -0,0 +1,29 @@
+name: Build packages
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+
+jobs:
+  packages:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Setup Node.js 14.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: 14.x
+      - name: Install dependencies
+        run: |
+          yarn --frozen-lockfile
+          yarn --cwd src/packages/excalidraw
+          yarn --cwd src/packages/utils
+      - name: Build @excalidraw/excalidraw
+        run: |
+          yarn --cwd src/packages/excalidraw run pack
+      - name: Build @excalidraw/utils
+        run: |
+          yarn --cwd src/packages/utils run pack
--- a/.github/workflows/publish-docker.yml
+++ b/.github/workflows/publish-docker.yml
@ -11,7 +11,7 @@ jobs:

    steps:
      - uses: actions/checkout@v2
-      - uses: docker/build-push-action@v2
+      - uses: docker/build-push-action@v1
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}
--- a/.gitignore
+++ b/.gitignore
@ -23,7 +23,3 @@ static
 yarn-debug.log*
 yarn-error.log*
 src/packages/excalidraw/types
-src/packages/excalidraw/example/public/bundle.js
-src/packages/excalidraw/example/public/excalidraw-assets-dev
-src/packages/excalidraw/example/public/excalidraw.development.js
-
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@ -1,2 +0,0 @@
-#!/bin/sh
-yarn lint-staged
--- a/README.md
+++ b/README.md
@ -32,10 +32,6 @@ Last but not least, we're thankful to these companies for offering their service

 [![Vercel](./.github/assets/vercel.svg)](https://vercel.com) [![Sentry](./.github/assets/sentry.svg)](https://sentry.io) [![Crowdin](./.github/assets/crowdin.svg)](https://crowdin.com)

-## Who's integrating Excalidraw
-
-[Google Cloud](https://googlecloudcheatsheet.withgoogle.com/architecture) • [Meta](https://meta.com/) • [CodeSandbox](https://codesandbox.io/) • [Obsidian Excalidraw](https://github.com/zsviczian/obsidian-excalidraw-plugin) • [Replit](https://replit.com/) • [Slite](https://slite.com/) • [Notion](https://notion.so/) • [HackerRank](https://www.hackerrank.com/) •
-
 ## Documentation

 ### Shortcuts
@ -122,47 +118,16 @@ yarn start

 Now you can open [http://localhost:3000](http://localhost:3000) and start coding in your favorite code editor.

-#### Collaboration
-
-For collaboration, you will need to set up [collab server](https://github.com/excalidraw/excalidraw-room) in local.
-
 #### Commands

-##### Install the dependencies
-
-```
-yarn
-```
-
-##### Run the project
-
-```
-yarn start
-```
-
-##### Reformat all files with Prettier
-
-```
-yarn fix
-```
-
-##### Run tests
-
-```
-yarn test
-```
-
-##### Update test snapshots
-
-```
-yarn test:update
-```
-
-##### Test for formatting with Prettier
-
-```
-yarn test:code
-```
+| Command            | Description                       |
+| ------------------ | --------------------------------- |
+| `yarn`             | Install the dependencies          |
+| `yarn start`       | Run the project                   |
+| `yarn fix`         | Reformat all files with Prettier  |
+| `yarn test`        | Run tests                         |
+| `yarn test:update` | Update test snapshots             |
+| `yarn test:code`   | Test for formatting with Prettier |

 #### Docker Compose

--- a/firebase-project/storage.rules
+++ b/firebase-project/storage.rules
@ -1,11 +1,12 @@
 rules_version = '2';
 service firebase.storage {
  match /b/{bucket}/o {
-    match /{files}/rooms/{room}/{file} {
-    	allow get, write: if true;
-    }
-    match /{files}/shareLinks/{shareLink}/{file} {
-    	allow get, write: if true;
+    match /{migrations} {
+      match /{scenes}/{scene} {
+      	allow get, write: if true;
+        // redundant, but let's be explicit'
+        allow list: if false;
+      }
    }
  }
 }
--- a/package.json
+++ b/package.json
@ -19,29 +19,24 @@
    ]
  },
  "dependencies": {
+    "@dwelle/browser-fs-access": "0.21.1",
    "@sentry/browser": "6.2.5",
    "@sentry/integrations": "6.2.5",
-    "@testing-library/jest-dom": "5.16.2",
-    "@testing-library/react": "12.1.5",
-    "@tldraw/vec": "1.7.1",
-    "@types/jest": "27.4.0",
-    "@types/pica": "5.1.3",
-    "@types/react": "17.0.39",
-    "@types/react-dom": "17.0.11",
+    "@testing-library/jest-dom": "5.11.10",
+    "@testing-library/react": "11.2.6",
+    "@tldraw/vec": "0.0.106",
+    "@types/jest": "26.0.22",
+    "@types/react": "17.0.3",
+    "@types/react-dom": "17.0.3",
    "@types/socket.io-client": "1.4.36",
-    "browser-fs-access": "0.29.1",
    "clsx": "1.1.1",
-    "fake-indexeddb": "3.1.7",
    "firebase": "8.3.3",
-    "i18next-browser-languagedetector": "6.1.4",
-    "idb-keyval": "6.0.3",
-    "image-blob-reduce": "3.0.1",
-    "jotai": "1.6.4",
+    "i18next-browser-languagedetector": "6.1.0",
    "lodash.throttle": "4.1.1",
-    "nanoid": "3.3.3",
-    "open-color": "1.9.1",
+    "nanoid": "3.1.22",
+    "open-color": "1.8.0",
    "pako": "1.0.11",
-    "perfect-freehand": "1.0.16",
+    "perfect-freehand": "1.0.15",
    "png-chunk-text": "1.0.0",
    "png-chunks-encode": "1.0.0",
    "png-chunks-extract": "1.0.0",
@ -50,39 +45,39 @@
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-scripts": "4.0.3",
-    "roughjs": "4.5.2",
-    "sass": "1.51.0",
+    "roughjs": "4.4.1",
+    "sass": "1.32.10",
    "socket.io-client": "2.3.1",
-    "typescript": "4.5.5"
+    "typescript": "4.2.4"
  },
  "devDependencies": {
    "@excalidraw/eslint-config": "1.0.0",
    "@excalidraw/prettier-config": "1.0.2",
-    "@types/chai": "4.3.0",
-    "@types/lodash.throttle": "4.1.7",
-    "@types/pako": "1.0.3",
-    "@types/resize-observer-browser": "0.1.7",
-    "chai": "4.3.6",
-    "dotenv": "16.0.1",
-    "eslint-config-prettier": "8.5.0",
+    "@types/lodash.throttle": "4.1.6",
+    "@types/pako": "1.0.1",
+    "@types/resize-observer-browser": "0.1.5",
+    "eslint-config-prettier": "8.3.0",
    "eslint-plugin-prettier": "3.3.1",
-    "husky": "7.0.4",
-    "jest-canvas-mock": "2.4.0",
-    "lint-staged": "12.3.7",
+    "firebase-tools": "9.9.0",
+    "husky": "4.3.8",
+    "jest-canvas-mock": "2.3.1",
+    "lint-staged": "10.5.4",
    "pepjs": "0.5.3",
-    "prettier": "2.6.2",
-    "rewire": "6.0.0"
-  },
-  "resolutions": {
-    "@typescript-eslint/typescript-estree": "5.10.2"
+    "prettier": "2.2.1",
+    "rewire": "5.0.0"
  },
  "engines": {
    "node": ">=14.0.0"
  },
  "homepage": ".",
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
  "jest": {
    "transformIgnorePatterns": [
-      "node_modules/(?!(roughjs|points-on-curve|path-data-parser|points-on-path|browser-fs-access)/)"
+      "node_modules/(?!(roughjs|points-on-curve|path-data-parser|points-on-path|@dwelle/browser-fs-access)/)"
    ],
    "resetMocks": false
  },
@ -94,15 +89,13 @@
    "build:app:docker": "REACT_APP_DISABLE_SENTRY=true react-scripts build",
    "build:app": "REACT_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA react-scripts build",
    "build:version": "node ./scripts/build-version.js",
-    "build:prebuild": "node ./scripts/prebuild.js",
-    "build": "yarn build:prebuild && yarn build:app && yarn build:version",
+    "build": "yarn build:app && yarn build:version",
    "eject": "react-scripts eject",
    "fix:code": "yarn test:code --fix",
    "fix:other": "yarn prettier --write",
    "fix": "yarn fix:other && yarn fix:code",
    "locales-coverage": "node scripts/build-locales-coverage.js",
    "locales-coverage:description": "node scripts/locales-coverage-description.js",
-    "prepare": "husky install",
    "prettier": "prettier \"**/*.{css,scss,json,md,html,yml}\" --ignore-path=.eslintignore",
    "start": "react-scripts start",
    "test:all": "yarn test:typecheck && yarn test:code && yarn test:other && yarn test:app --watchAll=false",
@ -113,8 +106,6 @@
    "test:typecheck": "tsc",
    "test:update": "yarn test:app --updateSnapshot --watchAll=false",
    "test": "yarn test:app",
-    "autorelease": "node scripts/autorelease.js",
-    "prerelease": "node scripts/prerelease.js",
-    "release": "node scripts/release.js"
+    "autorelease": "node scripts/autorelease.js"
  }
 }
--- a/public/index.html
+++ b/public/index.html
@ -13,6 +13,18 @@

    <meta name="theme-color" content="#000" />

+    <!-- Declarative Link Capturing (https://web.dev/declarative-link-capturing/) -->
+    <meta
+      http-equiv="origin-trial"
+      content="Ak3VyzTheARtX2CnxBZ3ZKxImB0mNyvDakmMxeAChgxrWFMZ3IGN64VP+uj36VxM5OegsbLmrP258b1xvqp7+Q8AAABbeyJvcmlnaW4iOiJodHRwczovL2V4Y2FsaWRyYXcuY29tOjQ0MyIsImZlYXR1cmUiOiJXZWJBcHBMaW5rQ2FwdHVyaW5nIiwiZXhwaXJ5IjoxNjM0MDgzMTk5fQ=="
+    />
+
+    <!-- File Handling (https://web.dev/file-handling/) -->
+    <meta
+      http-equiv="origin-trial"
+      content="AkMQsAnFmKfRfPKQHNCv2WmZREqgwkqhyt2M7aOwQiCStB+hPYnGnv+mNbkPDAsGXrwsj/waFi76wPzTDUaEeQ0AAABUeyJvcmlnaW4iOiJodHRwczovL2V4Y2FsaWRyYXcuY29tOjQ0MyIsImZlYXR1cmUiOiJGaWxlSGFuZGxpbmciLCJleHBpcnkiOjE2MzQwODMxOTl9"
+    />
+
    <!-- General tags -->
    <meta
      name="description"
@ -52,25 +64,6 @@
      content="Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them."
    />

-    <script>
-      // Redirect Excalidraw+ users which have auto-redirect enabled.
-      //
-      // Redirect only the bare root path, so link/room/library urls are not
-      // redirected.
-      //
-      // Putting into index.html for best performance (can't redirect on server
-      // due to location.hash checks).
-      if (
-        window.location.pathname === "/" &&
-        !window.location.hash &&
-        !window.location.search &&
-        // if its present redirect
-        document.cookie.includes("excplus-autoredirect=true")
-      ) {
-        window.location.href = "https://app.excalidraw.com";
-      }
-    </script>
-
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

    <!-- Excalidraw version -->
@ -91,6 +84,12 @@
      crossorigin="anonymous"
    />

+    <link
+      href="%REACT_APP_SOCKET_SERVER_URL%/socket.io"
+      rel="preconnect"
+      crossorigin="anonymous"
+    />
+
    <link
      rel="manifest"
      href="manifest.json"
@ -98,22 +97,6 @@
    />

    <link rel="stylesheet" href="fonts.css" type="text/css" />
-    <% if (process.env.REACT_APP_DEV_DISABLE_LIVE_RELOAD === "true") { %>
-    <script>
-      {
-        const _WebSocket = window.WebSocket;
-        window.WebSocket = function (url) {
-          if (/ws:\/\/localhost:.+?\/sockjs-node/.test(url)) {
-            console.info(
-              "[!!!] Live reload is disabled via process.env.REACT_APP_DEV_DISABLE_LIVE_RELOAD [!!!]",
-            );
-          } else {
-            return new _WebSocket(url);
-          }
-        };
-      }
-    </script>
-    <% } %>
    <script>
      window.EXCALIDRAW_ASSET_PATH = "/";
      // setting this so that libraries installation reuses this window tab.
@ -159,6 +142,26 @@
        user-select: none;
      }

+      .LoadingMessage {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 999;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        pointer-events: none;
+      }
+
+      .LoadingMessage span {
+        background-color: var(--button-gray-1);
+        border-radius: 5px;
+        padding: 0.8em 1.2em;
+        color: var(--popup-text-color);
+        font-size: 1.3em;
+      }
      #root {
        height: 100%;
        -webkit-touch-callout: none;
@ -167,10 +170,8 @@
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
-      }

-      @media screen and (min-width: 1200px) {
-        #root {
+        @media screen and (min-width: 1200px) {
          -webkit-touch-callout: default;
          -webkit-user-select: auto;
          -khtml-user-select: auto;
@ -187,6 +188,10 @@
    <header>
      <h1 class="visually-hidden">Excalidraw</h1>
    </header>
-    <div id="root"></div>
+    <div id="root">
+      <div class="LoadingMessage">
+        <span>Loading scene...</span>
+      </div>
+    </div>
  </body>
 </html>
--- a/public/manifest.json
+++ b/public/manifest.json
@ -26,6 +26,7 @@
      }
    }
  ],
+  "capture_links": "new-client",
  "share_target": {
    "action": "/web-share-target",
    "method": "POST",
--- a/scripts/autorelease.js
+++ b/scripts/autorelease.js
@ -1,72 +1,51 @@
 const fs = require("fs");
 const { exec, execSync } = require("child_process");
-const core = require("@actions/core");

 const excalidrawDir = `${__dirname}/../src/packages/excalidraw`;
 const excalidrawPackage = `${excalidrawDir}/package.json`;
 const pkg = require(excalidrawPackage);
-const isPreview = process.argv.slice(2)[0] === "preview";

 const getShortCommitHash = () => {
  return execSync("git rev-parse --short HEAD").toString().trim();
 };

 const publish = () => {
-  const tag = isPreview ? "preview" : "next";
-
  try {
    execSync(`yarn  --frozen-lockfile`);
    execSync(`yarn --frozen-lockfile`, { cwd: excalidrawDir });
    execSync(`yarn run build:umd`, { cwd: excalidrawDir });
-    execSync(`yarn --cwd ${excalidrawDir} publish --tag ${tag}`);
-    console.info(`Published ${pkg.name}@${tag}🎉`);
-    core.setOutput(
-      "result",
-      `**Preview version has been shipped** :rocket:
-    You can use [@excalidraw/excalidraw@${pkg.version}](https://www.npmjs.com/package/@excalidraw/excalidraw/v/${pkg.version}) for testing!`,
-    );
-  } catch (error) {
-    core.setOutput("result", "package couldn't be published :warning:!");
-    console.error(error);
-    process.exit(1);
+    execSync(`yarn --cwd ${excalidrawDir} publish`);
+  } catch (e) {
+    console.error(e);
  }
 };
+
 // get files changed between prev and head commit
 exec(`git diff --name-only HEAD^ HEAD`, async (error, stdout, stderr) => {
  if (error || stderr) {
    console.error(error);
-    core.setOutput("result", ":warning: Package couldn't be published!");
    process.exit(1);
  }
+
  const changedFiles = stdout.trim().split("\n");
  const filesToIgnoreRegex = /src\/excalidraw-app|packages\/utils/;

  const excalidrawPackageFiles = changedFiles.filter((file) => {
-    return (
-      (file.indexOf("src") >= 0 || file.indexOf("package.json")) >= 0 &&
-      !filesToIgnoreRegex.test(file)
-    );
+    return file.indexOf("src") >= 0 && !filesToIgnoreRegex.test(file);
  });
+
  if (!excalidrawPackageFiles.length) {
-    console.info("Skipping release as no valid diff found");
-    core.setOutput("result", "Skipping release as no valid diff found");
    process.exit(0);
  }

  // update package.json
-  let version = `${pkg.version}-${getShortCommitHash()}`;
-
-  // update readme
-
-  if (isPreview) {
-    // use pullNumber-commithash as the version for preview
-    const pullRequestNumber = process.argv.slice(3)[0];
-    version = `${pkg.version}-${pullRequestNumber}-${getShortCommitHash()}`;
-  }
-  pkg.version = version;
-
+  pkg.version = `${pkg.version}-${getShortCommitHash()}`;
+  pkg.name = "@excalidraw/excalidraw-next";
  fs.writeFileSync(excalidrawPackage, JSON.stringify(pkg, null, 2), "utf8");

-  console.info("Publish in progress...");
+  // update readme
+  const data = fs.readFileSync(`${excalidrawDir}/README_NEXT.md`, "utf8");
+  fs.writeFileSync(`${excalidrawDir}/README.md`, data, "utf8");
+
  publish();
 });
--- a/scripts/build-locales-coverage.js
+++ b/scripts/build-locales-coverage.js
@ -1,16 +1,11 @@
 const { readdirSync, writeFileSync } = require("fs");
 const files = readdirSync(`${__dirname}/../src/locales`);

-const flatten = (object = {}, result = {}, extraKey = "") => {
-  for (const key in object) {
-    if (typeof object[key] !== "object") {
-      result[extraKey + key] = object[key];
-    } else {
-      flatten(object[key], result, `${extraKey}${key}.`);
-    }
-  }
-  return result;
-};
+const flatten = (object) =>
+  Object.keys(object).reduce(
+    (initial, current) => ({ ...initial, ...object[current] }),
+    {},
+  );

 const locales = files.filter(
  (file) => file !== "README.md" && file !== "percentages.json",
@ -24,8 +19,10 @@ for (let index = 0; index < locales.length; index++) {

  const allKeys = Object.keys(data);
  const translatedKeys = allKeys.filter((item) => data[item] !== "");
-  const percentage = Math.floor((100 * translatedKeys.length) / allKeys.length);
-  percentages[currentLocale.replace(".json", "")] = percentage;
+
+  const percentage = (100 * translatedKeys.length) / allKeys.length;
+
+  percentages[currentLocale.replace(".json", "")] = parseInt(percentage);
 }

 writeFileSync(
--- a/scripts/locales-coverage-description.js
+++ b/scripts/locales-coverage-description.js
@ -5,13 +5,10 @@ const THRESSHOLD = 85;
 const crowdinMap = {
  "ar-SA": "en-ar",
  "bg-BG": "en-bg",
-  "bn-BD": "en-bn",
  "ca-ES": "en-ca",
-  "da-DK": "en-da",
  "de-DE": "en-de",
  "el-GR": "en-el",
  "es-ES": "en-es",
-  "eu-ES": "en-eu",
  "fa-IR": "en-fa",
  "fi-FI": "en-fi",
  "fr-FR": "en-fr",
@ -34,31 +31,21 @@ const crowdinMap = {
  "pt-PT": "en-pt",
  "ro-RO": "en-ro",
  "ru-RU": "en-ru",
-  "si-LK": "en-silk",
  "sk-SK": "en-sk",
-  "sl-SI": "en-sl",
  "sv-SE": "en-sv",
-  "ta-IN": "en-ta",
  "tr-TR": "en-tr",
  "uk-UA": "en-uk",
  "zh-CN": "en-zhcn",
-  "zh-HK": "en-zhhk",
  "zh-TW": "en-zhtw",
-  "lt-LT": "en-lt",
  "lv-LV": "en-lv",
  "cs-CZ": "en-cs",
  "kk-KZ": "en-kk",
-  "vi-vn": "en-vi",
-  "mr-in": "en-mr",
 };

 const flags = {
  "ar-SA": "🇸🇦",
  "bg-BG": "🇧🇬",
-  "bn-BD": "🇧🇩",
  "ca-ES": "🏳",
-  "cs-CZ": "🇨🇿",
-  "da-DK": "🇩🇰",
  "de-DE": "🇩🇪",
  "el-GR": "🇬🇷",
  "es-ES": "🇪🇸",
@ -72,10 +59,7 @@ const flags = {
  "it-IT": "🇮🇹",
  "ja-JP": "🇯🇵",
  "kab-KAB": "🏳",
-  "kk-KZ": "🇰🇿",
  "ko-KR": "🇰🇷",
-  "lt-LT": "🇱🇹",
-  "lv-LV": "🇱🇻",
  "my-MM": "🇲🇲",
  "nb-NO": "🇳🇴",
  "nl-NL": "🇳🇱",
@ -87,32 +71,24 @@ const flags = {
  "pt-PT": "🇵🇹",
  "ro-RO": "🇷🇴",
  "ru-RU": "🇷🇺",
-  "si-LK": "🇱🇰",
  "sk-SK": "🇸🇰",
-  "sl-SI": "🇸🇮",
  "sv-SE": "🇸🇪",
-  "ta-IN": "🇮🇳",
  "tr-TR": "🇹🇷",
  "uk-UA": "🇺🇦",
  "zh-CN": "🇨🇳",
-  "zh-HK": "🇭🇰",
  "zh-TW": "🇹🇼",
-  "eu-ES": "🇪🇦",
-  "vi-VN": "🇻🇳",
-  "mr-IN": "🇮🇳",
+  "lv-LV": "🇱🇻",
+  "cs-CZ": "🇨🇿",
+  "kk-KZ": "🇰🇿",
 };

 const languages = {
  "ar-SA": "العربية",
  "bg-BG": "Български",
-  "bn-BD": "Bengali",
  "ca-ES": "Català",
-  "cs-CZ": "Česky",
-  "da-DK": "Dansk",
  "de-DE": "Deutsch",
  "el-GR": "Ελληνικά",
  "es-ES": "Español",
-  "eu-ES": "Euskara",
  "fa-IR": "فارسی",
  "fi-FI": "Suomi",
  "fr-FR": "Français",
@ -123,10 +99,7 @@ const languages = {
  "it-IT": "Italiano",
  "ja-JP": "日本語",
  "kab-KAB": "Taqbaylit",
-  "kk-KZ": "Қазақ тілі",
  "ko-KR": "한국어",
-  "lt-LT": "Lietuvių",
-  "lv-LV": "Latviešu",
  "my-MM": "Burmese",
  "nb-NO": "Norsk bokmål",
  "nl-NL": "Nederlands",
@ -138,18 +111,15 @@ const languages = {
  "pt-PT": "Português",
  "ro-RO": "Română",
  "ru-RU": "Русский",
-  "si-LK": "සිංහල",
  "sk-SK": "Slovenčina",
-  "sl-SI": "Slovenščina",
  "sv-SE": "Svenska",
-  "ta-IN": "Tamil",
  "tr-TR": "Türkçe",
  "uk-UA": "Українська",
  "zh-CN": "简体中文",
-  "zh-HK": "繁體中文 (香港)",
  "zh-TW": "繁體中文",
-  "vi-VN": "Tiếng Việt",
-  "mr-IN": "मराठी",
+  "lv-LV": "Latviešu",
+  "cs-CZ": "Česky",
+  "kk-KZ": "Қазақ тілі",
 };

 const percentages = fs.readFileSync(
--- a/scripts/prebuild.js
+++ b/scripts/prebuild.js
@ -1,20 +0,0 @@
-const fs = require("fs");
-
-// for development purposes we want to have the service-worker.js file
-// accessible from the public folder. On build though, we need to compile it
-// and CRA expects that file to be in src/ folder.
-const moveServiceWorkerScript = () => {
-  const oldPath = "./public/service-worker.js";
-  const newPath = "./src/service-worker.js";
-
-  fs.rename(oldPath, newPath, (error) => {
-    if (error) {
-      throw error;
-    }
-    console.info("public/service-worker.js moved to src/");
-  });
-};
-
-// -----------------------------------------------------------------------------
-
-moveServiceWorkerScript();
--- a/scripts/prerelease.js
+++ b/scripts/prerelease.js
@ -1,37 +0,0 @@
-const fs = require("fs");
-const util = require("util");
-const exec = util.promisify(require("child_process").exec);
-const updateChangelog = require("./updateChangelog");
-
-const excalidrawDir = `${__dirname}/../src/packages/excalidraw`;
-const excalidrawPackage = `${excalidrawDir}/package.json`;
-
-const updatePackageVersion = (nextVersion) => {
-  const pkg = require(excalidrawPackage);
-  pkg.version = nextVersion;
-  const content = `${JSON.stringify(pkg, null, 2)}\n`;
-  fs.writeFileSync(excalidrawPackage, content, "utf-8");
-};
-
-const prerelease = async (nextVersion) => {
-  try {
-    await updateChangelog(nextVersion);
-    updatePackageVersion(nextVersion);
-    await exec(`git add -u`);
-    await exec(
-      `git commit -m "docs: release @excalidraw/excalidraw@${nextVersion}  🎉"`,
-    );
-
-    console.info("Done!");
-  } catch (error) {
-    console.error(error);
-    process.exit(1);
-  }
-};
-
-const nextVersion = process.argv.slice(2)[0];
-if (!nextVersion) {
-  console.error("Pass the next version to release!");
-  process.exit(1);
-}
-prerelease(nextVersion);
--- a/scripts/release.js
+++ b/scripts/release.js
@ -1,44 +1,39 @@
 const fs = require("fs");
-const { execSync } = require("child_process");
+const util = require("util");
+const exec = util.promisify(require("child_process").exec);
+const updateReadme = require("./updateReadme");
+const updateChangelog = require("./updateChangelog");

 const excalidrawDir = `${__dirname}/../src/packages/excalidraw`;
 const excalidrawPackage = `${excalidrawDir}/package.json`;
-const pkg = require(excalidrawPackage);

-const originalReadMe = fs.readFileSync(`${excalidrawDir}/README.md`, "utf8");
-
-const updateReadme = () => {
-  const excalidrawIndex = originalReadMe.indexOf("### Excalidraw");
-
-  // remove note for stable readme
-  const data = originalReadMe.slice(excalidrawIndex);
-
-  // update readme
-  fs.writeFileSync(`${excalidrawDir}/README.md`, data, "utf8");
+const updatePackageVersion = (nextVersion) => {
+  const pkg = require(excalidrawPackage);
+  pkg.version = nextVersion;
+  const content = `${JSON.stringify(pkg, null, 2)}\n`;
+  fs.writeFileSync(excalidrawPackage, content, "utf-8");
 };

-const publish = () => {
+const release = async (nextVersion) => {
  try {
-    execSync(`yarn  --frozen-lockfile`);
-    execSync(`yarn --frozen-lockfile`, { cwd: excalidrawDir });
-    execSync(`yarn run build:umd`, { cwd: excalidrawDir });
-    execSync(`yarn --cwd ${excalidrawDir} publish`);
-  } catch (error) {
-    console.error(error);
+    updateReadme();
+    await updateChangelog(nextVersion);
+    updatePackageVersion(nextVersion);
+    await exec(`git add -u`);
+    await exec(
+      `git commit -m "docs: release @excalidraw/excalidraw@${nextVersion}  🎉"`,
+    );
+    /* eslint-disable no-console */
+    console.log("Done!");
+  } catch (e) {
+    console.error(e);
    process.exit(1);
  }
 };

-const release = () => {
-  updateReadme();
-  console.info("Note for stable readme removed");
-
-  publish();
-  console.info(`Published ${pkg.version}!`);
-
-  // revert readme after release
-  fs.writeFileSync(`${excalidrawDir}/README.md`, originalReadMe, "utf8");
-  console.info("Readme reverted");
-};
-
-release();
+const nextVersion = process.argv.slice(2)[0];
+if (!nextVersion) {
+  console.error("Pass the next version to release!");
+  process.exit(1);
+}
+release(nextVersion);
--- a/scripts/updateChangelog.js
+++ b/scripts/updateChangelog.js
@ -20,7 +20,7 @@ const headerForType = {
  perf: "Performance",
  build: "Build",
 };
-const badCommits = [];
+
 const getCommitHashForLastVersion = async () => {
  try {
    const commitMessage = `"release @excalidraw/excalidraw@${lastVersion}"`;
@ -28,8 +28,8 @@ const getCommitHashForLastVersion = async () => {
      `git log --format=format:"%H" --grep=${commitMessage}`,
    );
    return stdout;
-  } catch (error) {
-    console.error(error);
+  } catch (e) {
+    console.error(e);
  }
 };

@ -53,26 +53,19 @@ const getLibraryCommitsSinceLastRelease = async () => {
    const messageWithoutType = commit.slice(indexOfColon + 1).trim();
    const messageWithCapitalizeFirst =
      messageWithoutType.charAt(0).toUpperCase() + messageWithoutType.slice(1);
-    const prMatch = commit.match(/\(#([0-9]*)\)/);
-    if (prMatch) {
-      const prNumber = prMatch[1];
+    const prNumber = commit.match(/\(#([0-9]*)\)/)[1];

-      // return if the changelog already contains the pr number which would happen for package updates
-      if (existingChangeLog.includes(prNumber)) {
-        return;
-      }
-      const prMarkdown = `[#${prNumber}](https://github.com/excalidraw/excalidraw/pull/${prNumber})`;
-      const messageWithPRLink = messageWithCapitalizeFirst.replace(
-        /\(#[0-9]*\)/,
-        prMarkdown,
-      );
-      commitList[type].push(messageWithPRLink);
-    } else {
-      badCommits.push(commit);
-      commitList[type].push(messageWithCapitalizeFirst);
+    // return if the changelog already contains the pr number which would happen for package updates
+    if (existingChangeLog.includes(prNumber)) {
+      return;
    }
+    const prMarkdown = `[#${prNumber}](https://github.com/excalidraw/excalidraw/pull/${prNumber})`;
+    const messageWithPRLink = messageWithCapitalizeFirst.replace(
+      /\(#[0-9]*\)/,
+      prMarkdown,
+    );
+    commitList[type].push(messageWithPRLink);
  });
-  console.info("Bad commits:", badCommits);
  return commitList;
 };

--- a/scripts/updateReadme.js
+++ b/scripts/updateReadme.js
@ -0,0 +1,27 @@
+const fs = require("fs");
+
+const updateReadme = () => {
+  const excalidrawDir = `${__dirname}/../src/packages/excalidraw`;
+  let data = fs.readFileSync(`${excalidrawDir}/README_NEXT.md`, "utf8");
+
+  // remove note for unstable release
+  data = data.replace(
+    /<!-- unstable-readme-start-->[\s\S]*?<!-- unstable-readme-end-->/,
+    "",
+  );
+
+  // replace "excalidraw-next" with "excalidraw"
+  data = data.replace(/excalidraw-next/g, "excalidraw");
+  data = data.trim();
+
+  const demoIndex = data.indexOf("### Demo");
+  const excalidrawNextNote =
+    "#### Note\n\n**If you don't want to wait for the next stable release and try out the unreleased changes you can use [@excalidraw/excalidraw-next](https://www.npmjs.com/package/@excalidraw/excalidraw-next).**\n\n";
+  // Add excalidraw next note to try out for unreleased changes
+  data = data.slice(0, demoIndex) + excalidrawNextNote + data.slice(demoIndex);
+
+  // update readme
+  fs.writeFileSync(`${excalidrawDir}/README.md`, data, "utf8");
+};
+
+module.exports = updateReadme;
--- a/src/actions/actionAddToLibrary.ts
+++ b/src/actions/actionAddToLibrary.ts
@ -2,59 +2,22 @@ import { register } from "./register";
 import { getSelectedElements } from "../scene";
 import { getNonDeletedElements } from "../element";
 import { deepCopyElement } from "../element/newElement";
-import { randomId } from "../random";
-import { t } from "../i18n";

 export const actionAddToLibrary = register({
  name: "addToLibrary",
-  trackEvent: { category: "element" },
  perform: (elements, appState, _, app) => {
    const selectedElements = getSelectedElements(
      getNonDeletedElements(elements),
      appState,
-      true,
    );
-    if (selectedElements.some((element) => element.type === "image")) {
-      return {
-        commitToHistory: false,
-        appState: {
-          ...appState,
-          errorMessage: "Support for adding images to the library coming soon!",
-        },
-      };
-    }

-    return app.library
-      .getLatestLibrary()
-      .then((items) => {
-        return app.library.setLibrary([
-          {
-            id: randomId(),
-            status: "unpublished",
-            elements: selectedElements.map(deepCopyElement),
-            created: Date.now(),
-          },
-          ...items,
-        ]);
-      })
-      .then(() => {
-        return {
-          commitToHistory: false,
-          appState: {
-            ...appState,
-            toast: { message: t("toast.addedToLibrary") },
-          },
-        };
-      })
-      .catch((error) => {
-        return {
-          commitToHistory: false,
-          appState: {
-            ...appState,
-            errorMessage: error.message,
-          },
-        };
-      });
+    app.library.loadLibrary().then((items) => {
+      app.library.saveLibrary([
+        ...items,
+        selectedElements.map(deepCopyElement),
+      ]);
+    });
+    return false;
  },
  contextItemLabel: "labels.addToLibrary",
 });
--- a/src/actions/actionAlign.tsx
+++ b/src/actions/actionAlign.tsx
@ -1,3 +1,4 @@
+import React from "react";
 import { alignElements, Alignment } from "../align";
 import {
  AlignBottomIcon,
@ -8,13 +9,13 @@ import {
  CenterVerticallyIcon,
 } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
-import { getNonDeletedElements } from "../element";
+import { getElementMap, getNonDeletedElements } from "../element";
 import { ExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
 import { KEYS } from "../keys";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { AppState } from "../types";
-import { arrayToMap, getShortcutKey } from "../utils";
+import { getShortcutKey } from "../utils";
 import { register } from "./register";

 const enableActionGroup = (
@ -34,16 +35,13 @@ const alignSelectedElements = (

  const updatedElements = alignElements(selectedElements, alignment);

-  const updatedElementsMap = arrayToMap(updatedElements);
+  const updatedElementsMap = getElementMap(updatedElements);

-  return elements.map(
-    (element) => updatedElementsMap.get(element.id) || element,
-  );
+  return elements.map((element) => updatedElementsMap[element.id] || element);
 };

 export const actionAlignTop = register({
  name: "alignTop",
-  trackEvent: { category: "element" },
  perform: (elements, appState) => {
    return {
      appState,
@ -73,7 +71,6 @@ export const actionAlignTop = register({

 export const actionAlignBottom = register({
  name: "alignBottom",
-  trackEvent: { category: "element" },
  perform: (elements, appState) => {
    return {
      appState,
@ -103,7 +100,6 @@ export const actionAlignBottom = register({

 export const actionAlignLeft = register({
  name: "alignLeft",
-  trackEvent: { category: "element" },
  perform: (elements, appState) => {
    return {
      appState,
@ -133,8 +129,6 @@ export const actionAlignLeft = register({

 export const actionAlignRight = register({
  name: "alignRight",
-  trackEvent: { category: "element" },
-
  perform: (elements, appState) => {
    return {
      appState,
@ -164,8 +158,6 @@ export const actionAlignRight = register({

 export const actionAlignVerticallyCentered = register({
  name: "alignVerticallyCentered",
-  trackEvent: { category: "element" },
-
  perform: (elements, appState) => {
    return {
      appState,
@ -191,7 +183,6 @@ export const actionAlignVerticallyCentered = register({

 export const actionAlignHorizontallyCentered = register({
  name: "alignHorizontallyCentered",
-  trackEvent: { category: "element" },
  perform: (elements, appState) => {
    return {
      appState,
--- a/src/actions/actionBoundText.tsx
+++ b/src/actions/actionBoundText.tsx
@ -1,136 +0,0 @@
-import { VERTICAL_ALIGN } from "../constants";
-import { getNonDeletedElements, isTextElement } from "../element";
-import { mutateElement } from "../element/mutateElement";
-import {
-  getBoundTextElement,
-  measureText,
-  redrawTextBoundingBox,
-} from "../element/textElement";
-import {
-  hasBoundTextElement,
-  isTextBindableContainer,
-} from "../element/typeChecks";
-import {
-  ExcalidrawTextContainer,
-  ExcalidrawTextElement,
-} from "../element/types";
-import { getSelectedElements } from "../scene";
-import { getFontString } from "../utils";
-import { register } from "./register";
-
-export const actionUnbindText = register({
-  name: "unbindText",
-  contextItemLabel: "labels.unbindText",
-  trackEvent: { category: "element" },
-  contextItemPredicate: (elements, appState) => {
-    const selectedElements = getSelectedElements(elements, appState);
-    return selectedElements.some((element) => hasBoundTextElement(element));
-  },
-  perform: (elements, appState) => {
-    const selectedElements = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-    );
-    selectedElements.forEach((element) => {
-      const boundTextElement = getBoundTextElement(element);
-      if (boundTextElement) {
-        const { width, height, baseline } = measureText(
-          boundTextElement.originalText,
-          getFontString(boundTextElement),
-        );
-        mutateElement(boundTextElement as ExcalidrawTextElement, {
-          containerId: null,
-          width,
-          height,
-          baseline,
-          text: boundTextElement.originalText,
-        });
-        mutateElement(element, {
-          boundElements: element.boundElements?.filter(
-            (ele) => ele.id !== boundTextElement.id,
-          ),
-        });
-      }
-    });
-    return {
-      elements,
-      appState,
-      commitToHistory: true,
-    };
-  },
-});
-
-export const actionBindText = register({
-  name: "bindText",
-  contextItemLabel: "labels.bindText",
-  trackEvent: { category: "element" },
-  contextItemPredicate: (elements, appState) => {
-    const selectedElements = getSelectedElements(elements, appState);
-
-    if (selectedElements.length === 2) {
-      const textElement =
-        isTextElement(selectedElements[0]) ||
-        isTextElement(selectedElements[1]);
-
-      let bindingContainer;
-      if (isTextBindableContainer(selectedElements[0])) {
-        bindingContainer = selectedElements[0];
-      } else if (isTextBindableContainer(selectedElements[1])) {
-        bindingContainer = selectedElements[1];
-      }
-      if (
-        textElement &&
-        bindingContainer &&
-        getBoundTextElement(bindingContainer) === null
-      ) {
-        return true;
-      }
-    }
-    return false;
-  },
-  perform: (elements, appState) => {
-    const selectedElements = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-    );
-
-    let textElement: ExcalidrawTextElement;
-    let container: ExcalidrawTextContainer;
-
-    if (
-      isTextElement(selectedElements[0]) &&
-      isTextBindableContainer(selectedElements[1])
-    ) {
-      textElement = selectedElements[0];
-      container = selectedElements[1];
-    } else {
-      textElement = selectedElements[1] as ExcalidrawTextElement;
-      container = selectedElements[0] as ExcalidrawTextContainer;
-    }
-    mutateElement(textElement, {
-      containerId: container.id,
-      verticalAlign: VERTICAL_ALIGN.MIDDLE,
-    });
-    mutateElement(container, {
-      boundElements: (container.boundElements || []).concat({
-        type: "text",
-        id: textElement.id,
-      }),
-    });
-    redrawTextBoundingBox(textElement, container);
-    const updatedElements = elements.slice();
-    const textElementIndex = updatedElements.findIndex(
-      (ele) => ele.id === textElement.id,
-    );
-    updatedElements.splice(textElementIndex, 1);
-    const containerIndex = updatedElements.findIndex(
-      (ele) => ele.id === container.id,
-    );
-    updatedElements.splice(containerIndex + 1, 0, textElement);
-    return {
-      elements: updatedElements,
-      appState: { ...appState, selectedElementIds: { [container.id]: true } },
-      commitToHistory: true,
-    };
-  },
-});
--- a/src/actions/actionCanvas.tsx
+++ b/src/actions/actionCanvas.tsx
@ -1,34 +1,33 @@
+import React from "react";
+import { getDefaultAppState } from "../appState";
 import { ColorPicker } from "../components/ColorPicker";
-import { eraser, zoomIn, zoomOut } from "../components/icons";
+import { trash, zoomIn, zoomOut } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
 import { DarkModeToggle } from "../components/DarkModeToggle";
-import { THEME, ZOOM_STEP } from "../constants";
+import { ZOOM_STEP } from "../constants";
 import { getCommonBounds, getNonDeletedElements } from "../element";
+import { newElementWith } from "../element/mutateElement";
 import { ExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
+import { useIsMobile } from "../components/App";
 import { CODES, KEYS } from "../keys";
 import { getNormalizedZoom, getSelectedElements } from "../scene";
 import { centerScrollOn } from "../scene/scroll";
-import { getStateForZoom } from "../scene/zoom";
+import { getNewZoom } from "../scene/zoom";
 import { AppState, NormalizedZoomValue } from "../types";
-import { getShortcutKey, updateActiveTool } from "../utils";
+import { getShortcutKey } from "../utils";
 import { register } from "./register";
 import { Tooltip } from "../components/Tooltip";
-import { newElementWith } from "../element/mutateElement";
-import { getDefaultAppState, isEraserActive } from "../appState";
-import ClearCanvas from "../components/ClearCanvas";
-import clsx from "clsx";

 export const actionChangeViewBackgroundColor = register({
  name: "changeViewBackgroundColor",
-  trackEvent: false,
  perform: (_, appState, value) => {
    return {
      appState: { ...appState, ...value },
      commitToHistory: !!value.viewBackgroundColor,
    };
  },
-  PanelComponent: ({ elements, appState, updateData }) => {
+  PanelComponent: ({ appState, updateData }) => {
    return (
      <div style={{ position: "relative" }}>
        <ColorPicker
@ -41,8 +40,6 @@ export const actionChangeViewBackgroundColor = register({
            updateData({ openPopup: active ? "canvasColorPicker" : null })
          }
          data-testid="canvas-background-picker"
-          elements={elements}
-          appState={appState}
        />
      </div>
    );
@ -51,51 +48,54 @@ export const actionChangeViewBackgroundColor = register({

 export const actionClearCanvas = register({
  name: "clearCanvas",
-  trackEvent: { category: "canvas" },
-  perform: (elements, appState, _, app) => {
-    app.imageCache.clear();
+  perform: (elements, appState: AppState) => {
    return {
      elements: elements.map((element) =>
        newElementWith(element, { isDeleted: true }),
      ),
      appState: {
        ...getDefaultAppState(),
-        files: {},
        theme: appState.theme,
-        penMode: appState.penMode,
-        penDetected: appState.penDetected,
+        elementLocked: appState.elementLocked,
        exportBackground: appState.exportBackground,
        exportEmbedScene: appState.exportEmbedScene,
        gridSize: appState.gridSize,
        showStats: appState.showStats,
        pasteDialog: appState.pasteDialog,
-        activeTool:
-          appState.activeTool.type === "image"
-            ? { ...appState.activeTool, type: "selection" }
-            : appState.activeTool,
      },
      commitToHistory: true,
    };
  },
-
-  PanelComponent: ({ updateData }) => <ClearCanvas onConfirm={updateData} />,
+  PanelComponent: ({ updateData }) => (
+    <ToolButton
+      type="button"
+      icon={trash}
+      title={t("buttons.clearReset")}
+      aria-label={t("buttons.clearReset")}
+      showAriaLabel={useIsMobile()}
+      onClick={() => {
+        if (window.confirm(t("alerts.clearReset"))) {
+          updateData(null);
+        }
+      }}
+      data-testid="clear-canvas-button"
+    />
+  ),
 });

 export const actionZoomIn = register({
  name: "zoomIn",
-  trackEvent: { category: "canvas" },
-  perform: (_elements, appState, _, app) => {
+  perform: (_elements, appState) => {
+    const zoom = getNewZoom(
+      getNormalizedZoom(appState.zoom.value + ZOOM_STEP),
+      appState.zoom,
+      { left: appState.offsetLeft, top: appState.offsetTop },
+      { x: appState.width / 2, y: appState.height / 2 },
+    );
    return {
      appState: {
        ...appState,
-        ...getStateForZoom(
-          {
-            viewportX: appState.width / 2 + appState.offsetLeft,
-            viewportY: appState.height / 2 + appState.offsetTop,
-            nextZoom: getNormalizedZoom(appState.zoom.value + ZOOM_STEP),
-          },
-          appState,
-        ),
+        zoom,
      },
      commitToHistory: false,
    };
@ -119,19 +119,18 @@ export const actionZoomIn = register({

 export const actionZoomOut = register({
  name: "zoomOut",
-  trackEvent: { category: "canvas" },
-  perform: (_elements, appState, _, app) => {
+  perform: (_elements, appState) => {
+    const zoom = getNewZoom(
+      getNormalizedZoom(appState.zoom.value - ZOOM_STEP),
+      appState.zoom,
+      { left: appState.offsetLeft, top: appState.offsetTop },
+      { x: appState.width / 2, y: appState.height / 2 },
+    );
+
    return {
      appState: {
        ...appState,
-        ...getStateForZoom(
-          {
-            viewportX: appState.width / 2 + appState.offsetLeft,
-            viewportY: appState.height / 2 + appState.offsetTop,
-            nextZoom: getNormalizedZoom(appState.zoom.value - ZOOM_STEP),
-          },
-          appState,
-        ),
+        zoom,
      },
      commitToHistory: false,
    };
@ -155,25 +154,25 @@ export const actionZoomOut = register({

 export const actionResetZoom = register({
  name: "resetZoom",
-  trackEvent: { category: "canvas" },
-  perform: (_elements, appState, _, app) => {
+  perform: (_elements, appState) => {
    return {
      appState: {
        ...appState,
-        ...getStateForZoom(
+        zoom: getNewZoom(
+          1 as NormalizedZoomValue,
+          appState.zoom,
+          { left: appState.offsetLeft, top: appState.offsetTop },
          {
-            viewportX: appState.width / 2 + appState.offsetLeft,
-            viewportY: appState.height / 2 + appState.offsetTop,
-            nextZoom: getNormalizedZoom(1),
+            x: appState.width / 2,
+            y: appState.height / 2,
          },
-          appState,
        ),
      },
      commitToHistory: false,
    };
  },
  PanelComponent: ({ updateData, appState }) => (
-    <Tooltip label={t("buttons.resetZoom")} style={{ height: "100%" }}>
+    <Tooltip label={t("buttons.resetZoom")}>
      <ToolButton
        type="button"
        className="reset-zoom-button"
@ -225,12 +224,14 @@ const zoomToFitElements = (
      ? getCommonBounds(selectedElements)
      : getCommonBounds(nonDeletedElements);

-  const newZoom = {
-    value: zoomValueToFitBoundsOnViewport(commonBounds, {
-      width: appState.width,
-      height: appState.height,
-    }),
-  };
+  const zoomValue = zoomValueToFitBoundsOnViewport(commonBounds, {
+    width: appState.width,
+    height: appState.height,
+  });
+  const newZoom = getNewZoom(zoomValue, appState.zoom, {
+    left: appState.offsetLeft,
+    top: appState.offsetTop,
+  });

  const [x1, y1, x2, y2] = commonBounds;
  const centerX = (x1 + x2) / 2;
@ -254,7 +255,6 @@ const zoomToFitElements = (

 export const actionZoomToSelected = register({
  name: "zoomToSelection",
-  trackEvent: { category: "canvas" },
  perform: (elements, appState) => zoomToFitElements(elements, appState, true),
  keyTest: (event) =>
    event.code === CODES.TWO &&
@ -265,7 +265,6 @@ export const actionZoomToSelected = register({

 export const actionZoomToFit = register({
  name: "zoomToFit",
-  trackEvent: { category: "canvas" },
  perform: (elements, appState) => zoomToFitElements(elements, appState, false),
  keyTest: (event) =>
    event.code === CODES.ONE &&
@ -276,13 +275,11 @@ export const actionZoomToFit = register({

 export const actionToggleTheme = register({
  name: "toggleTheme",
-  trackEvent: { category: "canvas" },
  perform: (_, appState, value) => {
    return {
      appState: {
        ...appState,
-        theme:
-          value || (appState.theme === THEME.LIGHT ? THEME.DARK : THEME.LIGHT),
+        theme: value || (appState.theme === "light" ? "dark" : "light"),
      },
      commitToHistory: false,
    };
@ -299,49 +296,3 @@ export const actionToggleTheme = register({
  ),
  keyTest: (event) => event.altKey && event.shiftKey && event.code === CODES.D,
 });
-
-export const actionErase = register({
-  name: "eraser",
-  trackEvent: { category: "toolbar" },
-  perform: (elements, appState) => {
-    let activeTool: AppState["activeTool"];
-
-    if (isEraserActive(appState)) {
-      activeTool = updateActiveTool(appState, {
-        ...(appState.activeTool.lastActiveToolBeforeEraser || {
-          type: "selection",
-        }),
-        lastActiveToolBeforeEraser: null,
-      });
-    } else {
-      activeTool = updateActiveTool(appState, {
-        type: "eraser",
-        lastActiveToolBeforeEraser: appState.activeTool,
-      });
-    }
-
-    return {
-      appState: {
-        ...appState,
-        selectedElementIds: {},
-        selectedGroupIds: {},
-        activeTool,
-      },
-      commitToHistory: true,
-    };
-  },
-  keyTest: (event) => event.key === KEYS.E,
-  PanelComponent: ({ elements, appState, updateData, data }) => (
-    <ToolButton
-      type="button"
-      icon={eraser}
-      className={clsx("eraser", { active: isEraserActive(appState) })}
-      title={`${t("toolBar.eraser")}-${getShortcutKey("E")}`}
-      aria-label={t("toolBar.eraser")}
-      onClick={() => {
-        updateData(null);
-      }}
-      size={data?.size || "medium"}
-    ></ToolButton>
-  ),
-});
--- a/src/actions/actionClipboard.tsx
+++ b/src/actions/actionClipboard.tsx
@ -1,23 +1,16 @@
 import { CODES, KEYS } from "../keys";
 import { register } from "./register";
-import {
-  copyTextToSystemClipboard,
-  copyToClipboard,
-  probablySupportsClipboardWriteText,
-} from "../clipboard";
+import { copyToClipboard } from "../clipboard";
 import { actionDeleteSelected } from "./actionDeleteSelected";
 import { getSelectedElements } from "../scene/selection";
 import { exportCanvas } from "../data/index";
-import { getNonDeletedElements, isTextElement } from "../element";
+import { getNonDeletedElements } from "../element";
 import { t } from "../i18n";

 export const actionCopy = register({
  name: "copy",
-  trackEvent: { category: "element" },
-  perform: (elements, appState, _, app) => {
-    const selectedElements = getSelectedElements(elements, appState, true);
-
-    copyToClipboard(selectedElements, appState, app.files);
+  perform: (elements, appState) => {
+    copyToClipboard(getNonDeletedElements(elements), appState);

    return {
      commitToHistory: false,
@ -30,10 +23,9 @@ export const actionCopy = register({

 export const actionCut = register({
  name: "cut",
-  trackEvent: { category: "element" },
  perform: (elements, appState, data, app) => {
    actionCopy.perform(elements, appState, data, app);
-    return actionDeleteSelected.perform(elements, appState);
+    return actionDeleteSelected.perform(elements, appState, data, app);
  },
  contextItemLabel: "labels.cut",
  keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.code === CODES.X,
@ -41,7 +33,6 @@ export const actionCut = register({

 export const actionCopyAsSvg = register({
  name: "copyAsSvg",
-  trackEvent: { category: "element" },
  perform: async (elements, appState, _data, app) => {
    if (!app.canvas) {
      return {
@ -51,7 +42,6 @@ export const actionCopyAsSvg = register({
    const selectedElements = getSelectedElements(
      getNonDeletedElements(elements),
      appState,
-      true,
    );
    try {
      await exportCanvas(
@ -60,13 +50,12 @@ export const actionCopyAsSvg = register({
          ? selectedElements
          : getNonDeletedElements(elements),
        appState,
-        app.files,
        appState,
      );
      return {
        commitToHistory: false,
      };
-    } catch (error: any) {
+    } catch (error) {
      console.error(error);
      return {
        appState: {
@ -82,7 +71,6 @@ export const actionCopyAsSvg = register({

 export const actionCopyAsPng = register({
  name: "copyAsPng",
-  trackEvent: { category: "element" },
  perform: async (elements, appState, _data, app) => {
    if (!app.canvas) {
      return {
@ -92,7 +80,6 @@ export const actionCopyAsPng = register({
    const selectedElements = getSelectedElements(
      getNonDeletedElements(elements),
      appState,
-      true,
    );
    try {
      await exportCanvas(
@ -101,26 +88,23 @@ export const actionCopyAsPng = register({
          ? selectedElements
          : getNonDeletedElements(elements),
        appState,
-        app.files,
        appState,
      );
      return {
        appState: {
          ...appState,
-          toast: {
-            message: t("toast.copyToClipboardAsPng", {
-              exportSelection: selectedElements.length
-                ? t("toast.selection")
-                : t("toast.canvas"),
-              exportColorScheme: appState.exportWithDarkMode
-                ? t("buttons.darkMode")
-                : t("buttons.lightMode"),
-            }),
-          },
+          toastMessage: t("toast.copyToClipboardAsPng", {
+            exportSelection: selectedElements.length
+              ? t("toast.selection")
+              : t("toast.canvas"),
+            exportColorScheme: appState.exportWithDarkMode
+              ? t("buttons.darkMode")
+              : t("buttons.lightMode"),
+          }),
        },
        commitToHistory: false,
      };
-    } catch (error: any) {
+    } catch (error) {
      console.error(error);
      return {
        appState: {
@ -134,35 +118,3 @@ export const actionCopyAsPng = register({
  contextItemLabel: "labels.copyAsPng",
  keyTest: (event) => event.code === CODES.C && event.altKey && event.shiftKey,
 });
-
-export const copyText = register({
-  name: "copyText",
-  trackEvent: { category: "element" },
-  perform: (elements, appState) => {
-    const selectedElements = getSelectedElements(
-      getNonDeletedElements(elements),
-      appState,
-      true,
-    );
-
-    const text = selectedElements
-      .reduce((acc: string[], element) => {
-        if (isTextElement(element)) {
-          acc.push(element.text);
-        }
-        return acc;
-      }, [])
-      .join("\n\n");
-    copyTextToSystemClipboard(text);
-    return {
-      commitToHistory: false,
-    };
-  },
-  contextItemPredicate: (elements, appState) => {
-    return (
-      probablySupportsClipboardWriteText &&
-      getSelectedElements(elements, appState, true).some(isTextElement)
-    );
-  },
-  contextItemLabel: "labels.copyText",
-});
--- a/src/actions/actionDeleteSelected.tsx
+++ b/src/actions/actionDeleteSelected.tsx
@ -1,6 +1,7 @@
 import { isSomeElementSelected } from "../scene";
 import { KEYS } from "../keys";
 import { ToolButton } from "../components/ToolButton";
+import React from "react";
 import { trash } from "../components/icons";
 import { t } from "../i18n";
 import { register } from "./register";
@ -11,8 +12,6 @@ import { newElementWith } from "../element/mutateElement";
 import { getElementsInGroup } from "../groups";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { fixBindingsAfterDeletion } from "../element/binding";
-import { isBoundToContainer } from "../element/typeChecks";
-import { updateActiveTool } from "../utils";

 const deleteSelectedElements = (
  elements: readonly ExcalidrawElement[],
@ -23,12 +22,6 @@ const deleteSelectedElements = (
      if (appState.selectedElementIds[el.id]) {
        return newElementWith(el, { isDeleted: true });
      }
-      if (
-        isBoundToContainer(el) &&
-        appState.selectedElementIds[el.containerId]
-      ) {
-        return newElementWith(el, { isDeleted: true });
-      }
      return el;
    }),
    appState: {
@ -59,12 +52,11 @@ const handleGroupEditingState = (

 export const actionDeleteSelected = register({
  name: "deleteSelectedElements",
-  trackEvent: { category: "element", action: "delete" },
  perform: (elements, appState) => {
    if (appState.editingLinearElement) {
      const {
        elementId,
-        selectedPointsIndices,
+        activePointIndex,
        startBindingElement,
        endBindingElement,
      } = appState.editingLinearElement;
@ -74,7 +66,8 @@ export const actionDeleteSelected = register({
      }
      if (
        // case: no point selected → delete whole element
-        selectedPointsIndices == null ||
+        activePointIndex == null ||
+        activePointIndex === -1 ||
        // case: deleting last remaining point
        element.points.length < 2
      ) {
@ -94,17 +87,15 @@ export const actionDeleteSelected = register({
      // We cannot do this inside `movePoint` because it is also called
      // when deleting the uncommitted point (which hasn't caused any binding)
      const binding = {
-        startBindingElement: selectedPointsIndices?.includes(0)
-          ? null
-          : startBindingElement,
-        endBindingElement: selectedPointsIndices?.includes(
-          element.points.length - 1,
-        )
-          ? null
-          : endBindingElement,
+        startBindingElement:
+          activePointIndex === 0 ? null : startBindingElement,
+        endBindingElement:
+          activePointIndex === element.points.length - 1
+            ? null
+            : endBindingElement,
      };

-      LinearElementEditor.deletePoints(element, selectedPointsIndices);
+      LinearElementEditor.movePoint(element, activePointIndex, "delete");

      return {
        elements,
@ -113,17 +104,17 @@ export const actionDeleteSelected = register({
          editingLinearElement: {
            ...appState.editingLinearElement,
            ...binding,
-            selectedPointsIndices:
-              selectedPointsIndices?.[0] > 0
-                ? [selectedPointsIndices[0] - 1]
-                : [0],
+            activePointIndex: activePointIndex > 0 ? activePointIndex - 1 : 0,
          },
        },
        commitToHistory: true,
      };
    }
-    let { elements: nextElements, appState: nextAppState } =
-      deleteSelectedElements(elements, appState);
+
+    let {
+      elements: nextElements,
+      appState: nextAppState,
+    } = deleteSelectedElements(elements, appState);
    fixBindingsAfterDeletion(
      nextElements,
      elements.filter(({ id }) => appState.selectedElementIds[id]),
@ -135,7 +126,7 @@ export const actionDeleteSelected = register({
      elements: nextElements,
      appState: {
        ...nextAppState,
-        activeTool: updateActiveTool(appState, { type: "selection" }),
+        elementType: "selection",
        multiElement: null,
      },
      commitToHistory: isSomeElementSelected(
--- a/src/actions/actionDistribute.tsx
+++ b/src/actions/actionDistribute.tsx
@ -1,16 +1,17 @@
+import React from "react";
 import {
  DistributeHorizontallyIcon,
  DistributeVerticallyIcon,
 } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
-import { distributeElements, Distribution } from "../distribute";
-import { getNonDeletedElements } from "../element";
+import { distributeElements, Distribution } from "../disitrubte";
+import { getElementMap, getNonDeletedElements } from "../element";
 import { ExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
-import { CODES, KEYS } from "../keys";
+import { CODES } from "../keys";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { AppState } from "../types";
-import { arrayToMap, getShortcutKey } from "../utils";
+import { getShortcutKey } from "../utils";
 import { register } from "./register";

 const enableActionGroup = (
@ -30,16 +31,13 @@ const distributeSelectedElements = (

  const updatedElements = distributeElements(selectedElements, distribution);

-  const updatedElementsMap = arrayToMap(updatedElements);
+  const updatedElementsMap = getElementMap(updatedElements);

-  return elements.map(
-    (element) => updatedElementsMap.get(element.id) || element,
-  );
+  return elements.map((element) => updatedElementsMap[element.id] || element);
 };

 export const distributeHorizontally = register({
  name: "distributeHorizontally",
-  trackEvent: { category: "element" },
  perform: (elements, appState) => {
    return {
      appState,
@ -50,8 +48,7 @@ export const distributeHorizontally = register({
      commitToHistory: true,
    };
  },
-  keyTest: (event) =>
-    !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.H,
+  keyTest: (event) => event.altKey && event.code === CODES.H,
  PanelComponent: ({ elements, appState, updateData }) => (
    <ToolButton
      hidden={!enableActionGroup(elements, appState)}
@ -69,7 +66,6 @@ export const distributeHorizontally = register({

 export const distributeVertically = register({
  name: "distributeVertically",
-  trackEvent: { category: "element" },
  perform: (elements, appState) => {
    return {
      appState,
@ -80,8 +76,7 @@ export const distributeVertically = register({
      commitToHistory: true,
    };
  },
-  keyTest: (event) =>
-    !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.V,
+  keyTest: (event) => event.altKey && event.code === CODES.V,
  PanelComponent: ({ elements, appState, updateData }) => (
    <ToolButton
      hidden={!enableActionGroup(elements, appState)}
--- a/src/actions/actionDuplicateSelection.tsx
+++ b/src/actions/actionDuplicateSelection.tsx
@ -1,13 +1,15 @@
+import React from "react";
 import { KEYS } from "../keys";
 import { register } from "./register";
 import { ExcalidrawElement } from "../element/types";
 import { duplicateElement, getNonDeletedElements } from "../element";
-import { getSelectedElements, isSomeElementSelected } from "../scene";
+import { isSomeElementSelected } from "../scene";
 import { ToolButton } from "../components/ToolButton";
 import { clone } from "../components/icons";
 import { t } from "../i18n";
-import { arrayToMap, getShortcutKey } from "../utils";
+import { getShortcutKey } from "../utils";
 import { LinearElementEditor } from "../element/linearElementEditor";
+import { mutateElement } from "../element/mutateElement";
 import {
  selectGroupsForSelectedElements,
  getSelectedGroupForElement,
@ -17,24 +19,41 @@ import { AppState } from "../types";
 import { fixBindingsAfterDuplication } from "../element/binding";
 import { ActionResult } from "./types";
 import { GRID_SIZE } from "../constants";
-import { bindTextToShapeAfterDuplication } from "../element/textElement";
-import { isBoundToContainer } from "../element/typeChecks";

 export const actionDuplicateSelection = register({
  name: "duplicateSelection",
-  trackEvent: { category: "element" },
  perform: (elements, appState) => {
-    // duplicate selected point(s) if editing a line
+    // duplicate point if selected while editing multi-point element
    if (appState.editingLinearElement) {
-      const ret = LinearElementEditor.duplicateSelectedPoints(appState);
-
-      if (!ret) {
+      const { activePointIndex, elementId } = appState.editingLinearElement;
+      const element = LinearElementEditor.getElement(elementId);
+      if (!element || activePointIndex === null) {
        return false;
      }
-
+      const { points } = element;
+      const selectedPoint = points[activePointIndex];
+      const nextPoint = points[activePointIndex + 1];
+      mutateElement(element, {
+        points: [
+          ...points.slice(0, activePointIndex + 1),
+          nextPoint
+            ? [
+                (selectedPoint[0] + nextPoint[0]) / 2,
+                (selectedPoint[1] + nextPoint[1]) / 2,
+              ]
+            : [selectedPoint[0] + 30, selectedPoint[1] + 30],
+          ...points.slice(activePointIndex + 1),
+        ],
+      });
      return {
+        appState: {
+          ...appState,
+          editingLinearElement: {
+            ...appState.editingLinearElement,
+            activePointIndex: activePointIndex + 1,
+          },
+        },
        elements,
-        appState: ret.appState,
        commitToHistory: true,
      };
    }
@ -88,12 +107,9 @@ const duplicateElements = (
  const finalElements: ExcalidrawElement[] = [];

  let index = 0;
-  const selectedElementIds = arrayToMap(
-    getSelectedElements(elements, appState, true),
-  );
  while (index < elements.length) {
    const element = elements[index];
-    if (selectedElementIds.get(element.id)) {
+    if (appState.selectedElementIds[element.id]) {
      if (element.groupIds.length) {
        const groupId = getSelectedGroupForElement(appState, element);
        // if group selected, duplicate it atomically
@ -115,11 +131,7 @@ const duplicateElements = (
    }
    index++;
  }
-  bindTextToShapeAfterDuplication(
-    finalElements,
-    oldElements,
-    oldIdToDuplicatedId,
-  );
+
  fixBindingsAfterDuplication(finalElements, oldElements, oldIdToDuplicatedId);

  return {
@ -128,15 +140,10 @@ const duplicateElements = (
      {
        ...appState,
        selectedGroupIds: {},
-        selectedElementIds: newElements.reduce(
-          (acc: Record<ExcalidrawElement["id"], true>, element) => {
-            if (!isBoundToContainer(element)) {
-              acc[element.id] = true;
-            }
-            return acc;
-          },
-          {},
-        ),
+        selectedElementIds: newElements.reduce((acc, element) => {
+          acc[element.id] = true;
+          return acc;
+        }, {} as any),
      },
      getNonDeletedElements(finalElements),
    ),
--- a/src/actions/actionExport.tsx
+++ b/src/actions/actionExport.tsx
@ -1,29 +1,30 @@
+import React from "react";
+import { trackEvent } from "../analytics";
 import { load, questionCircle, saveAs } from "../components/icons";
 import { ProjectName } from "../components/ProjectName";
 import { ToolButton } from "../components/ToolButton";
 import "../components/ToolIcon.scss";
 import { Tooltip } from "../components/Tooltip";
-import { DarkModeToggle } from "../components/DarkModeToggle";
+import { DarkModeToggle, Appearence } from "../components/DarkModeToggle";
 import { loadFromJSON, saveAsJSON } from "../data";
 import { resaveAsImageWithScene } from "../data/resave";
 import { t } from "../i18n";
-import { useDevice } from "../components/App";
+import { useIsMobile } from "../components/App";
 import { KEYS } from "../keys";
 import { register } from "./register";
 import { CheckboxItem } from "../components/CheckboxItem";
 import { getExportSize } from "../scene/export";
-import { DEFAULT_EXPORT_PADDING, EXPORT_SCALES, THEME } from "../constants";
+import { DEFAULT_EXPORT_PADDING, EXPORT_SCALES } from "../constants";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { getNonDeletedElements } from "../element";
 import { ActiveFile } from "../components/ActiveFile";
 import { isImageFileHandle } from "../data/blob";
 import { nativeFileSystemSupported } from "../data/filesystem";
-import { Theme } from "../element/types";

 export const actionChangeProjectName = register({
  name: "changeProjectName",
-  trackEvent: false,
  perform: (_elements, appState, value) => {
+    trackEvent("change", "title");
    return { appState: { ...appState, name: value }, commitToHistory: false };
  },
  PanelComponent: ({ appState, updateData, appProps }) => (
@ -40,7 +41,6 @@ export const actionChangeProjectName = register({

 export const actionChangeExportScale = register({
  name: "changeExportScale",
-  trackEvent: { category: "export", action: "scale" },
  perform: (_elements, appState, value) => {
    return {
      appState: { ...appState, exportScale: value },
@ -89,7 +89,6 @@ export const actionChangeExportScale = register({

 export const actionChangeExportBackground = register({
  name: "changeExportBackground",
-  trackEvent: { category: "export", action: "toggleBackground" },
  perform: (_elements, appState, value) => {
    return {
      appState: { ...appState, exportBackground: value },
@ -108,7 +107,6 @@ export const actionChangeExportBackground = register({

 export const actionChangeExportEmbedScene = register({
  name: "changeExportEmbedScene",
-  trackEvent: { category: "export", action: "embedScene" },
  perform: (_elements, appState, value) => {
    return {
      appState: { ...appState, exportEmbedScene: value },
@ -130,37 +128,32 @@ export const actionChangeExportEmbedScene = register({

 export const actionSaveToActiveFile = register({
  name: "saveToActiveFile",
-  trackEvent: { category: "export" },
-  perform: async (elements, appState, value, app) => {
+  perform: async (elements, appState, value) => {
    const fileHandleExists = !!appState.fileHandle;

    try {
      const { fileHandle } = isImageFileHandle(appState.fileHandle)
-        ? await resaveAsImageWithScene(elements, appState, app.files)
-        : await saveAsJSON(elements, appState, app.files);
+        ? await resaveAsImageWithScene(elements, appState)
+        : await saveAsJSON(elements, appState);

      return {
        commitToHistory: false,
        appState: {
          ...appState,
          fileHandle,
-          toast: fileHandleExists
-            ? {
-                message: fileHandle?.name
-                  ? t("toast.fileSavedToFilename").replace(
-                      "{filename}",
-                      `"${fileHandle.name}"`,
-                    )
-                  : t("toast.fileSaved"),
-              }
+          toastMessage: fileHandleExists
+            ? fileHandle?.name
+              ? t("toast.fileSavedToFilename").replace(
+                  "{filename}",
+                  `"${fileHandle.name}"`,
+                )
+              : t("toast.fileSaved")
            : null,
        },
      };
-    } catch (error: any) {
+    } catch (error) {
      if (error?.name !== "AbortError") {
        console.error(error);
-      } else {
-        console.warn(error);
      }
      return { commitToHistory: false };
    }
@ -177,23 +170,16 @@ export const actionSaveToActiveFile = register({

 export const actionSaveFileToDisk = register({
  name: "saveFileToDisk",
-  trackEvent: { category: "export" },
-  perform: async (elements, appState, value, app) => {
+  perform: async (elements, appState, value) => {
    try {
-      const { fileHandle } = await saveAsJSON(
-        elements,
-        {
-          ...appState,
-          fileHandle: null,
-        },
-        app.files,
-      );
+      const { fileHandle } = await saveAsJSON(elements, {
+        ...appState,
+        fileHandle: null,
+      });
      return { commitToHistory: false, appState: { ...appState, fileHandle } };
-    } catch (error: any) {
+    } catch (error) {
      if (error?.name !== "AbortError") {
        console.error(error);
-      } else {
-        console.warn(error);
      }
      return { commitToHistory: false };
    }
@ -206,7 +192,7 @@ export const actionSaveFileToDisk = register({
      icon={saveAs}
      title={t("buttons.saveAs")}
      aria-label={t("buttons.saveAs")}
-      showAriaLabel={useDevice().isMobile}
+      showAriaLabel={useIsMobile()}
      hidden={!nativeFileSystemSupported}
      onClick={() => updateData(null)}
      data-testid="save-as-button"
@ -216,29 +202,24 @@ export const actionSaveFileToDisk = register({

 export const actionLoadScene = register({
  name: "loadScene",
-  trackEvent: { category: "export" },
-  perform: async (elements, appState, _, app) => {
+  perform: async (elements, appState) => {
    try {
      const {
        elements: loadedElements,
        appState: loadedAppState,
-        files,
      } = await loadFromJSON(appState, elements);
      return {
        elements: loadedElements,
        appState: loadedAppState,
-        files,
        commitToHistory: true,
      };
-    } catch (error: any) {
+    } catch (error) {
      if (error?.name === "AbortError") {
-        console.warn(error);
        return false;
      }
      return {
        elements,
        appState: { ...appState, errorMessage: error.message },
-        files: app.files,
        commitToHistory: false,
      };
    }
@ -250,7 +231,7 @@ export const actionLoadScene = register({
      icon={load}
      title={t("buttons.load")}
      aria-label={t("buttons.load")}
-      showAriaLabel={useDevice().isMobile}
+      showAriaLabel={useIsMobile()}
      onClick={updateData}
      data-testid="load-button"
    />
@ -259,7 +240,6 @@ export const actionLoadScene = register({

 export const actionExportWithDarkMode = register({
  name: "exportWithDarkMode",
-  trackEvent: { category: "export", action: "toggleTheme" },
  perform: (_elements, appState, value) => {
    return {
      appState: { ...appState, exportWithDarkMode: value },
@ -276,9 +256,9 @@ export const actionExportWithDarkMode = register({
      }}
    >
      <DarkModeToggle
-        value={appState.exportWithDarkMode ? THEME.DARK : THEME.LIGHT}
-        onChange={(theme: Theme) => {
-          updateData(theme === THEME.DARK);
+        value={appState.exportWithDarkMode ? "dark" : "light"}
+        onChange={(theme: Appearence) => {
+          updateData(theme === "dark");
        }}
        title={t("labels.toggleExportColorScheme")}
      />
--- a/src/actions/actionFinalize.tsx
+++ b/src/actions/actionFinalize.tsx
@ -1,6 +1,7 @@
 import { KEYS } from "../keys";
 import { isInvisiblySmallElement } from "../element";
-import { updateActiveTool, resetCursor } from "../utils";
+import { resetCursor } from "../utils";
+import React from "react";
 import { ToolButton } from "../components/ToolButton";
 import { done } from "../components/icons";
 import { t } from "../i18n";
@ -14,15 +15,16 @@ import {
  bindOrUnbindLinearElement,
 } from "../element/binding";
 import { isBindingElement } from "../element/typeChecks";
-import { AppState } from "../types";

 export const actionFinalize = register({
  name: "finalize",
-  trackEvent: false,
-  perform: (elements, appState, _, { canvas, focusContainer, scene }) => {
+  perform: (elements, appState, _, { canvas, focusContainer }) => {
    if (appState.editingLinearElement) {
-      const { elementId, startBindingElement, endBindingElement } =
-        appState.editingLinearElement;
+      const {
+        elementId,
+        startBindingElement,
+        endBindingElement,
+      } = appState.editingLinearElement;
      const element = LinearElementEditor.getElement(elementId);

      if (element) {
@ -40,7 +42,6 @@ export const actionFinalize = register({
              : undefined,
          appState: {
            ...appState,
-            cursorButton: "up",
            editingLinearElement: null,
          },
          commitToHistory: true,
@ -49,15 +50,6 @@ export const actionFinalize = register({
    }

    let newElements = elements;
-
-    const pendingImageElement =
-      appState.pendingImageElementId &&
-      scene.getElement(appState.pendingImageElementId);
-
-    if (pendingImageElement) {
-      mutateElement(pendingImageElement, { isDeleted: true }, false);
-    }
-
    if (window.document.activeElement instanceof HTMLElement) {
      focusContainer();
    }
@ -126,47 +118,27 @@ export const actionFinalize = register({
        );
      }

-      if (
-        !appState.activeTool.locked &&
-        appState.activeTool.type !== "freedraw"
-      ) {
+      if (!appState.elementLocked && appState.elementType !== "freedraw") {
        appState.selectedElementIds[multiPointElement.id] = true;
      }
    }

    if (
-      (!appState.activeTool.locked &&
-        appState.activeTool.type !== "freedraw") ||
+      (!appState.elementLocked && appState.elementType !== "freedraw") ||
      !multiPointElement
    ) {
      resetCursor(canvas);
    }

-    let activeTool: AppState["activeTool"];
-    if (appState.activeTool.type === "eraser") {
-      activeTool = updateActiveTool(appState, {
-        ...(appState.activeTool.lastActiveToolBeforeEraser || {
-          type: "selection",
-        }),
-        lastActiveToolBeforeEraser: null,
-      });
-    } else {
-      activeTool = updateActiveTool(appState, {
-        type: "selection",
-      });
-    }
-
    return {
      elements: newElements,
      appState: {
        ...appState,
-        cursorButton: "up",
-        activeTool:
-          (appState.activeTool.locked ||
-            appState.activeTool.type === "freedraw") &&
+        elementType:
+          (appState.elementLocked || appState.elementType === "freedraw") &&
          multiPointElement
-            ? appState.activeTool
-            : activeTool,
+            ? appState.elementType
+            : "selection",
        draggingElement: null,
        multiElement: null,
        editingElement: null,
@ -174,16 +146,15 @@ export const actionFinalize = register({
        suggestedBindings: [],
        selectedElementIds:
          multiPointElement &&
-          !appState.activeTool.locked &&
-          appState.activeTool.type !== "freedraw"
+          !appState.elementLocked &&
+          appState.elementType !== "freedraw"
            ? {
                ...appState.selectedElementIds,
                [multiPointElement.id]: true,
              }
            : appState.selectedElementIds,
-        pendingImageElementId: null,
      },
-      commitToHistory: appState.activeTool.type === "freedraw",
+      commitToHistory: appState.elementType === "freedraw",
    };
  },
  keyTest: (event, appState) =>
@ -192,7 +163,7 @@ export const actionFinalize = register({
        (!appState.draggingElement && appState.multiElement === null))) ||
    ((event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) &&
      appState.multiElement !== null),
-  PanelComponent: ({ appState, updateData, data }) => (
+  PanelComponent: ({ appState, updateData }) => (
    <ToolButton
      type="button"
      icon={done}
@ -200,7 +171,6 @@ export const actionFinalize = register({
      aria-label={t("buttons.done")}
      onClick={updateData}
      visible={appState.multiElement != null}
-      size={data?.size || "medium"}
    />
  ),
 });
--- a/src/actions/actionFlip.ts
+++ b/src/actions/actionFlip.ts
@ -1,6 +1,6 @@
 import { register } from "./register";
 import { getSelectedElements } from "../scene";
-import { getNonDeletedElements } from "../element";
+import { getElementMap, getNonDeletedElements } from "../element";
 import { mutateElement } from "../element/mutateElement";
 import { ExcalidrawElement, NonDeleted } from "../element/types";
 import { normalizeAngle, resizeSingleElement } from "../element/resizeElements";
@ -9,7 +9,6 @@ import { getTransformHandles } from "../element/transformHandles";
 import { isFreeDrawElement, isLinearElement } from "../element/typeChecks";
 import { updateBoundElements } from "../element/binding";
 import { LinearElementEditor } from "../element/linearElementEditor";
-import { arrayToMap } from "../utils";

 const enableActionFlipHorizontal = (
  elements: readonly ExcalidrawElement[],
@ -35,7 +34,6 @@ const enableActionFlipVertical = (

 export const actionFlipHorizontal = register({
  name: "flipHorizontal",
-  trackEvent: { category: "element" },
  perform: (elements, appState) => {
    return {
      elements: flipSelectedElements(elements, appState, "horizontal"),
@ -51,7 +49,6 @@ export const actionFlipHorizontal = register({

 export const actionFlipVertical = register({
  name: "flipVertical",
-  trackEvent: { category: "element" },
  perform: (elements, appState) => {
    return {
      elements: flipSelectedElements(elements, appState, "vertical"),
@ -86,11 +83,9 @@ const flipSelectedElements = (
    flipDirection,
  );

-  const updatedElementsMap = arrayToMap(updatedElements);
+  const updatedElementsMap = getElementMap(updatedElements);

-  return elements.map(
-    (element) => updatedElementsMap.get(element.id) || element,
-  );
+  return elements.map((element) => updatedElementsMap[element.id] || element);
 };

 const flipElements = (
@ -98,13 +93,13 @@ const flipElements = (
  appState: AppState,
  flipDirection: "horizontal" | "vertical",
 ): ExcalidrawElement[] => {
-  elements.forEach((element) => {
-    flipElement(element, appState);
+  for (let i = 0; i < elements.length; i++) {
+    flipElement(elements[i], appState);
    // If vertical flip, rotate an extra 180
    if (flipDirection === "vertical") {
-      rotateElement(element, Math.PI);
+      rotateElement(elements[i], Math.PI);
    }
-  });
+  }
  return elements;
 };

@ -147,9 +142,10 @@ const flipElement = (
  }

  if (isLinearElement(element)) {
-    for (let index = 1; index < element.points.length; index++) {
-      LinearElementEditor.movePoints(element, [
-        { index, point: [-element.points[index][0], element.points[index][1]] },
+    for (let i = 1; i < element.points.length; i++) {
+      LinearElementEditor.movePoint(element, i, [
+        -element.points[i][0],
+        element.points[i][1],
      ]);
    }
    LinearElementEditor.normalizePoints(element);
@ -157,7 +153,7 @@ const flipElement = (
    // calculate new x-coord for transformation
    newNCoordsX = usingNWHandle ? element.x + 2 * width : element.x - 2 * width;
    resizeSingleElement(
-      new Map().set(element.id, element),
+      element,
      true,
      element,
      usingNWHandle ? "nw" : "ne",
--- a/src/actions/actionGroup.tsx
+++ b/src/actions/actionGroup.tsx
@ -1,6 +1,7 @@
+import React from "react";
 import { CODES, KEYS } from "../keys";
 import { t } from "../i18n";
-import { arrayToMap, getShortcutKey } from "../utils";
+import { getShortcutKey } from "../utils";
 import { register } from "./register";
 import { UngroupIcon, GroupIcon } from "../components/icons";
 import { newElementWith } from "../element/mutateElement";
@ -17,9 +18,8 @@ import {
 import { getNonDeletedElements } from "../element";
 import { randomId } from "../random";
 import { ToolButton } from "../components/ToolButton";
-import { ExcalidrawElement, ExcalidrawTextElement } from "../element/types";
+import { ExcalidrawElement } from "../element/types";
 import { AppState } from "../types";
-import { isBoundToContainer } from "../element/typeChecks";

 const allElementsInSameGroup = (elements: readonly ExcalidrawElement[]) => {
  if (elements.length >= 2) {
@ -45,7 +45,6 @@ const enableActionGroup = (
  const selectedElements = getSelectedElements(
    getNonDeletedElements(elements),
    appState,
-    true,
  );
  return (
    selectedElements.length >= 2 && !allElementsInSameGroup(selectedElements)
@ -54,12 +53,10 @@ const enableActionGroup = (

 export const actionGroup = register({
  name: "group",
-  trackEvent: { category: "element" },
  perform: (elements, appState) => {
    const selectedElements = getSelectedElements(
      getNonDeletedElements(elements),
      appState,
-      true,
    );
    if (selectedElements.length < 2) {
      // nothing to group
@ -87,9 +84,8 @@ export const actionGroup = register({
      }
    }
    const newGroupId = randomId();
-    const selectElementIds = arrayToMap(selectedElements);
    const updatedElements = elements.map((element) => {
-      if (!selectElementIds.get(element.id)) {
+      if (!appState.selectedElementIds[element.id]) {
        return element;
      }
      return newElementWith(element, {
@ -104,8 +100,9 @@ export const actionGroup = register({
    // to the z order of the highest element in the layer stack
    const elementsInGroup = getElementsInGroup(updatedElements, newGroupId);
    const lastElementInGroup = elementsInGroup[elementsInGroup.length - 1];
-    const lastGroupElementIndex =
-      updatedElements.lastIndexOf(lastElementInGroup);
+    const lastGroupElementIndex = updatedElements.lastIndexOf(
+      lastElementInGroup,
+    );
    const elementsAfterGroup = updatedElements.slice(lastGroupElementIndex + 1);
    const elementsBeforeGroup = updatedElements
      .slice(0, lastGroupElementIndex)
@ -148,18 +145,12 @@ export const actionGroup = register({

 export const actionUngroup = register({
  name: "ungroup",
-  trackEvent: { category: "element" },
  perform: (elements, appState) => {
    const groupIds = getSelectedGroupIds(appState);
    if (groupIds.length === 0) {
      return { appState, elements, commitToHistory: false };
    }
-
-    const boundTextElementIds: ExcalidrawTextElement["id"][] = [];
    const nextElements = elements.map((element) => {
-      if (isBoundToContainer(element)) {
-        boundTextElementIds.push(element.id);
-      }
      const nextGroupIds = removeFromSelectedGroups(
        element.groupIds,
        appState.selectedGroupIds,
@ -171,19 +162,11 @@ export const actionUngroup = register({
        groupIds: nextGroupIds,
      });
    });
-
-    const updateAppState = selectGroupsForSelectedElements(
-      { ...appState, selectedGroupIds: {} },
-      getNonDeletedElements(nextElements),
-    );
-
-    // remove binded text elements from selection
-    boundTextElementIds.forEach(
-      (id) => (updateAppState.selectedElementIds[id] = false),
-    );
    return {
-      appState: updateAppState,
-
+      appState: selectGroupsForSelectedElements(
+        { ...appState, selectedGroupIds: {} },
+        getNonDeletedElements(nextElements),
+      ),
      elements: nextElements,
      commitToHistory: true,
    };
--- a/src/actions/actionHistory.tsx
+++ b/src/actions/actionHistory.tsx
@ -1,4 +1,5 @@
 import { Action, ActionResult } from "./types";
+import React from "react";
 import { undo, redo } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
 import { t } from "../i18n";
@ -6,9 +7,9 @@ import History, { HistoryEntry } from "../history";
 import { ExcalidrawElement } from "../element/types";
 import { AppState } from "../types";
 import { isWindows, KEYS } from "../keys";
+import { getElementMap } from "../element";
 import { newElementWith } from "../element/mutateElement";
 import { fixBindingsAfterDeletion } from "../element/binding";
-import { arrayToMap } from "../utils";

 const writeData = (
  prevElements: readonly ExcalidrawElement[],
@ -27,17 +28,17 @@ const writeData = (
      return { commitToHistory };
    }

-    const prevElementMap = arrayToMap(prevElements);
+    const prevElementMap = getElementMap(prevElements);
    const nextElements = data.elements;
-    const nextElementMap = arrayToMap(nextElements);
+    const nextElementMap = getElementMap(nextElements);

    const deletedElements = prevElements.filter(
-      (prevElement) => !nextElementMap.has(prevElement.id),
+      (prevElement) => !nextElementMap.hasOwnProperty(prevElement.id),
    );
    const elements = nextElements
      .map((nextElement) =>
        newElementWith(
-          prevElementMap.get(nextElement.id) || nextElement,
+          prevElementMap[nextElement.id] || nextElement,
          nextElement,
        ),
      )
@ -62,7 +63,6 @@ type ActionCreator = (history: History) => Action;

 export const createUndoAction: ActionCreator = (history) => ({
  name: "undo",
-  trackEvent: { category: "history" },
  perform: (elements, appState) =>
    writeData(elements, appState, () => history.undoOnce()),
  keyTest: (event) =>
@ -83,7 +83,6 @@ export const createUndoAction: ActionCreator = (history) => ({

 export const createRedoAction: ActionCreator = (history) => ({
  name: "redo",
-  trackEvent: { category: "history" },
  perform: (elements, appState) =>
    writeData(elements, appState, () => history.redoOnce()),
  keyTest: (event) =>
--- a/src/actions/actionMenu.tsx
+++ b/src/actions/actionMenu.tsx
@ -1,3 +1,4 @@
+import React from "react";
 import { menu, palette } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
 import { t } from "../i18n";
@ -9,7 +10,6 @@ import { HelpIcon } from "../components/HelpIcon";

 export const actionToggleCanvasMenu = register({
  name: "toggleCanvasMenu",
-  trackEvent: { category: "menu" },
  perform: (_, appState) => ({
    appState: {
      ...appState,
@ -30,7 +30,6 @@ export const actionToggleCanvasMenu = register({

 export const actionToggleEditMenu = register({
  name: "toggleEditMenu",
-  trackEvent: { category: "menu" },
  perform: (_elements, appState) => ({
    appState: {
      ...appState,
@ -55,7 +54,6 @@ export const actionToggleEditMenu = register({

 export const actionFullScreen = register({
  name: "toggleFullScreen",
-  trackEvent: { category: "canvas", predicate: (appState) => !isFullScreen() },
  perform: () => {
    if (!isFullScreen()) {
      allowFullScreen();
@ -72,7 +70,6 @@ export const actionFullScreen = register({

 export const actionShortcuts = register({
  name: "toggleShortcuts",
-  trackEvent: { category: "menu", action: "toggleHelpDialog" },
  perform: (_elements, appState, _, { focusContainer }) => {
    if (appState.showHelpDialog) {
      focusContainer();
--- a/src/actions/actionNavigate.tsx
+++ b/src/actions/actionNavigate.tsx
@ -1,4 +1,5 @@
-import { getClientColors } from "../clients";
+import React from "react";
+import { getClientColors, getClientInitials } from "../clients";
 import { Avatar } from "../components/Avatar";
 import { centerScrollOn } from "../scene/scroll";
 import { Collaborator } from "../types";
@ -6,7 +7,6 @@ import { register } from "./register";

 export const actionGoToCollaborator = register({
  name: "goToCollaborator",
-  trackEvent: { category: "collab" },
  perform: (_elements, appState, value) => {
    const point = value as Collaborator["pointer"];
    if (!point) {
@ -31,18 +31,28 @@ export const actionGoToCollaborator = register({
    };
  },
  PanelComponent: ({ appState, updateData, data }) => {
-    const [clientId, collaborator] = data as [string, Collaborator];
+    const clientId: string | undefined = data?.id;
+    if (!clientId) {
+      return null;
+    }
+
+    const collaborator = appState.collaborators.get(clientId);
+
+    if (!collaborator) {
+      return null;
+    }

    const { background, stroke } = getClientColors(clientId, appState);
+    const shortName = getClientInitials(collaborator.username);

    return (
      <Avatar
        color={background}
        border={stroke}
        onClick={() => updateData(collaborator.pointer)}
-        name={collaborator.username || ""}
-        src={collaborator.avatarUrl}
-      />
+      >
+        {shortName}
+      </Avatar>
    );
  },
 });
--- a/src/actions/actionProperties.tsx
+++ b/src/actions/actionProperties.tsx
@ -1,3 +1,4 @@
+import React from "react";
 import { AppState } from "../../src/types";
 import { ButtonIconSelect } from "../components/ButtonIconSelect";
 import { ColorPicker } from "../components/ColorPicker";
@ -6,7 +7,6 @@ import {
  ArrowheadArrowIcon,
  ArrowheadBarIcon,
  ArrowheadDotIcon,
-  ArrowheadTriangleIcon,
  ArrowheadNoneIcon,
  EdgeRoundIcon,
  EdgeSharpIcon,
@ -30,31 +30,19 @@ import {
  TextAlignCenterIcon,
  TextAlignLeftIcon,
  TextAlignRightIcon,
-  TextAlignTopIcon,
-  TextAlignBottomIcon,
-  TextAlignMiddleIcon,
 } from "../components/icons";
 import {
  DEFAULT_FONT_FAMILY,
  DEFAULT_FONT_SIZE,
  FONT_FAMILY,
-  VERTICAL_ALIGN,
 } from "../constants";
 import {
  getNonDeletedElements,
  isTextElement,
  redrawTextBoundingBox,
 } from "../element";
-import { mutateElement, newElementWith } from "../element/mutateElement";
-import {
-  getBoundTextElement,
-  getContainerElement,
-} from "../element/textElement";
-import {
-  isBoundToContainer,
-  isLinearElement,
-  isLinearElementType,
-} from "../element/typeChecks";
+import { newElementWith } from "../element/mutateElement";
+import { isLinearElement, isLinearElementType } from "../element/typeChecks";
 import {
  Arrowhead,
  ExcalidrawElement,
@ -62,37 +50,26 @@ import {
  ExcalidrawTextElement,
  FontFamilyValues,
  TextAlign,
-  VerticalAlign,
 } from "../element/types";
 import { getLanguage, t } from "../i18n";
-import { KEYS } from "../keys";
 import { randomInteger } from "../random";
 import {
  canChangeSharpness,
  canHaveArrowheads,
  getCommonAttributeOfSelectedElements,
-  getSelectedElements,
  getTargetElements,
  isSomeElementSelected,
 } from "../scene";
-import { hasStrokeColor } from "../scene/comparisons";
-import { arrayToMap } from "../utils";
 import { register } from "./register";

-const FONT_SIZE_RELATIVE_INCREASE_STEP = 0.1;
-
 const changeProperty = (
  elements: readonly ExcalidrawElement[],
  appState: AppState,
  callback: (element: ExcalidrawElement) => ExcalidrawElement,
-  includeBoundText = false,
 ) => {
-  const selectedElementIds = arrayToMap(
-    getSelectedElements(elements, appState, includeBoundText),
-  );
  return elements.map((element) => {
    if (
-      selectedElementIds.get(element.id) ||
+      appState.selectedElementIds[element.id] ||
      element.id === appState.editingElement?.id
    ) {
      return callback(element);
@ -122,93 +99,15 @@ const getFormValue = function <T>(
  );
 };

-const offsetElementAfterFontResize = (
-  prevElement: ExcalidrawTextElement,
-  nextElement: ExcalidrawTextElement,
-) => {
-  if (isBoundToContainer(nextElement)) {
-    return nextElement;
-  }
-  return mutateElement(
-    nextElement,
-    {
-      x:
-        prevElement.textAlign === "left"
-          ? prevElement.x
-          : prevElement.x +
-            (prevElement.width - nextElement.width) /
-              (prevElement.textAlign === "center" ? 2 : 1),
-      // centering vertically is non-standard, but for Excalidraw I think
-      // it makes sense
-      y: prevElement.y + (prevElement.height - nextElement.height) / 2,
-    },
-    false,
-  );
-};
-
-const changeFontSize = (
-  elements: readonly ExcalidrawElement[],
-  appState: AppState,
-  getNewFontSize: (element: ExcalidrawTextElement) => number,
-  fallbackValue?: ExcalidrawTextElement["fontSize"],
-) => {
-  const newFontSizes = new Set<number>();
-
-  return {
-    elements: changeProperty(
-      elements,
-      appState,
-      (oldElement) => {
-        if (isTextElement(oldElement)) {
-          const newFontSize = getNewFontSize(oldElement);
-          newFontSizes.add(newFontSize);
-
-          let newElement: ExcalidrawTextElement = newElementWith(oldElement, {
-            fontSize: newFontSize,
-          });
-          redrawTextBoundingBox(newElement, getContainerElement(oldElement));
-
-          newElement = offsetElementAfterFontResize(oldElement, newElement);
-
-          return newElement;
-        }
-
-        return oldElement;
-      },
-      true,
-    ),
-    appState: {
-      ...appState,
-      // update state only if we've set all select text elements to
-      // the same font size
-      currentItemFontSize:
-        newFontSizes.size === 1
-          ? [...newFontSizes][0]
-          : fallbackValue ?? appState.currentItemFontSize,
-    },
-    commitToHistory: true,
-  };
-};
-
-// -----------------------------------------------------------------------------
-
 export const actionChangeStrokeColor = register({
  name: "changeStrokeColor",
-  trackEvent: false,
  perform: (elements, appState, value) => {
    return {
      ...(value.currentItemStrokeColor && {
-        elements: changeProperty(
-          elements,
-          appState,
-          (el) => {
-            return hasStrokeColor(el.type)
-              ? newElementWith(el, {
-                  strokeColor: value.currentItemStrokeColor,
-                })
-              : el;
-          },
-          true,
+        elements: changeProperty(elements, appState, (el) =>
+          newElementWith(el, {
+            strokeColor: value.currentItemStrokeColor,
+          }),
        ),
      }),
      appState: {
@ -235,8 +134,6 @@ export const actionChangeStrokeColor = register({
        setActive={(active) =>
          updateData({ openPopup: active ? "strokeColorPicker" : null })
        }
-        elements={elements}
-        appState={appState}
      />
    </>
  ),
@ -244,7 +141,6 @@ export const actionChangeStrokeColor = register({

 export const actionChangeBackgroundColor = register({
  name: "changeBackgroundColor",
-  trackEvent: false,
  perform: (elements, appState, value) => {
    return {
      ...(value.currentItemBackgroundColor && {
@ -278,8 +174,6 @@ export const actionChangeBackgroundColor = register({
        setActive={(active) =>
          updateData({ openPopup: active ? "backgroundColorPicker" : null })
        }
-        elements={elements}
-        appState={appState}
      />
    </>
  ),
@ -287,7 +181,6 @@ export const actionChangeBackgroundColor = register({

 export const actionChangeFillStyle = register({
  name: "changeFillStyle",
-  trackEvent: false,
  perform: (elements, appState, value) => {
    return {
      elements: changeProperty(elements, appState, (el) =>
@ -337,7 +230,6 @@ export const actionChangeFillStyle = register({

 export const actionChangeStrokeWidth = register({
  name: "changeStrokeWidth",
-  trackEvent: false,
  perform: (elements, appState, value) => {
    return {
      elements: changeProperty(elements, appState, (el) =>
@ -385,7 +277,6 @@ export const actionChangeStrokeWidth = register({

 export const actionChangeSloppiness = register({
  name: "changeSloppiness",
-  trackEvent: false,
  perform: (elements, appState, value) => {
    return {
      elements: changeProperty(elements, appState, (el) =>
@ -434,7 +325,6 @@ export const actionChangeSloppiness = register({

 export const actionChangeStrokeStyle = register({
  name: "changeStrokeStyle",
-  trackEvent: false,
  perform: (elements, appState, value) => {
    return {
      elements: changeProperty(elements, appState, (el) =>
@ -482,17 +372,12 @@ export const actionChangeStrokeStyle = register({

 export const actionChangeOpacity = register({
  name: "changeOpacity",
-  trackEvent: false,
  perform: (elements, appState, value) => {
    return {
-      elements: changeProperty(
-        elements,
-        appState,
-        (el) =>
-          newElementWith(el, {
-            opacity: value,
-          }),
-        true,
+      elements: changeProperty(elements, appState, (el) =>
+        newElementWith(el, {
+          opacity: value,
+        }),
      ),
      appState: { ...appState, currentItemOpacity: value },
      commitToHistory: true,
@ -507,6 +392,20 @@ export const actionChangeOpacity = register({
        max="100"
        step="10"
        onChange={(event) => updateData(+event.target.value)}
+        onWheel={(event) => {
+          event.stopPropagation();
+          const target = event.target as HTMLInputElement;
+          const STEP = 10;
+          const MAX = 100;
+          const MIN = 0;
+          const value = +target.value;
+
+          if (event.deltaY < 0 && value < MAX) {
+            updateData(value + STEP);
+          } else if (event.deltaY > 0 && value > MIN) {
+            updateData(value - STEP);
+          }
+        }}
        value={
          getFormValue(
            elements,
@ -522,9 +421,25 @@ export const actionChangeOpacity = register({

 export const actionChangeFontSize = register({
  name: "changeFontSize",
-  trackEvent: false,
  perform: (elements, appState, value) => {
-    return changeFontSize(elements, appState, () => value, value);
+    return {
+      elements: changeProperty(elements, appState, (el) => {
+        if (isTextElement(el)) {
+          const element: ExcalidrawTextElement = newElementWith(el, {
+            fontSize: value,
+          });
+          redrawTextBoundingBox(element);
+          return element;
+        }
+
+        return el;
+      }),
+      appState: {
+        ...appState,
+        currentItemFontSize: value,
+      },
+      commitToHistory: true,
+    };
  },
  PanelComponent: ({ elements, appState, updateData }) => (
    <fieldset>
@ -536,40 +451,27 @@ export const actionChangeFontSize = register({
            value: 16,
            text: t("labels.small"),
            icon: <FontSizeSmallIcon theme={appState.theme} />,
-            testId: "fontSize-small",
          },
          {
            value: 20,
            text: t("labels.medium"),
            icon: <FontSizeMediumIcon theme={appState.theme} />,
-            testId: "fontSize-medium",
          },
          {
            value: 28,
            text: t("labels.large"),
            icon: <FontSizeLargeIcon theme={appState.theme} />,
-            testId: "fontSize-large",
          },
          {
            value: 36,
            text: t("labels.veryLarge"),
            icon: <FontSizeExtraLargeIcon theme={appState.theme} />,
-            testId: "fontSize-veryLarge",
          },
        ]}
        value={getFormValue(
          elements,
          appState,
-          (element) => {
-            if (isTextElement(element)) {
-              return element.fontSize;
-            }
-            const boundTextElement = getBoundTextElement(element);
-            if (boundTextElement) {
-              return boundTextElement.fontSize;
-            }
-            return null;
-          },
+          (element) => isTextElement(element) && element.fontSize,
          appState.currentItemFontSize || DEFAULT_FONT_SIZE,
        )}
        onChange={(value) => updateData(value)}
@ -578,70 +480,21 @@ export const actionChangeFontSize = register({
  ),
 });

-export const actionDecreaseFontSize = register({
-  name: "decreaseFontSize",
-  trackEvent: false,
-  perform: (elements, appState, value) => {
-    return changeFontSize(elements, appState, (element) =>
-      Math.round(
-        // get previous value before relative increase (doesn't work fully
-        // due to rounding and float precision issues)
-        (1 / (1 + FONT_SIZE_RELATIVE_INCREASE_STEP)) * element.fontSize,
-      ),
-    );
-  },
-  keyTest: (event) => {
-    return (
-      event[KEYS.CTRL_OR_CMD] &&
-      event.shiftKey &&
-      // KEYS.COMMA needed for MacOS
-      (event.key === KEYS.CHEVRON_LEFT || event.key === KEYS.COMMA)
-    );
-  },
-});
-
-export const actionIncreaseFontSize = register({
-  name: "increaseFontSize",
-  trackEvent: false,
-  perform: (elements, appState, value) => {
-    return changeFontSize(elements, appState, (element) =>
-      Math.round(element.fontSize * (1 + FONT_SIZE_RELATIVE_INCREASE_STEP)),
-    );
-  },
-  keyTest: (event) => {
-    return (
-      event[KEYS.CTRL_OR_CMD] &&
-      event.shiftKey &&
-      // KEYS.PERIOD needed for MacOS
-      (event.key === KEYS.CHEVRON_RIGHT || event.key === KEYS.PERIOD)
-    );
-  },
-});
-
 export const actionChangeFontFamily = register({
  name: "changeFontFamily",
-  trackEvent: false,
  perform: (elements, appState, value) => {
    return {
-      elements: changeProperty(
-        elements,
-        appState,
-        (oldElement) => {
-          if (isTextElement(oldElement)) {
-            const newElement: ExcalidrawTextElement = newElementWith(
-              oldElement,
-              {
-                fontFamily: value,
-              },
-            );
-            redrawTextBoundingBox(newElement, getContainerElement(oldElement));
-            return newElement;
-          }
+      elements: changeProperty(elements, appState, (el) => {
+        if (isTextElement(el)) {
+          const element: ExcalidrawTextElement = newElementWith(el, {
+            fontFamily: value,
+          });
+          redrawTextBoundingBox(element);
+          return element;
+        }

-          return oldElement;
-        },
-        true,
-      ),
+        return el;
+      }),
      appState: {
        ...appState,
        currentItemFontFamily: value,
@ -681,16 +534,7 @@ export const actionChangeFontFamily = register({
          value={getFormValue(
            elements,
            appState,
-            (element) => {
-              if (isTextElement(element)) {
-                return element.fontFamily;
-              }
-              const boundTextElement = getBoundTextElement(element);
-              if (boundTextElement) {
-                return boundTextElement.fontFamily;
-              }
-              return null;
-            },
+            (element) => isTextElement(element) && element.fontFamily,
            appState.currentItemFontFamily || DEFAULT_FONT_FAMILY,
          )}
          onChange={(value) => updateData(value)}
@ -702,26 +546,19 @@ export const actionChangeFontFamily = register({

 export const actionChangeTextAlign = register({
  name: "changeTextAlign",
-  trackEvent: false,
  perform: (elements, appState, value) => {
    return {
-      elements: changeProperty(
-        elements,
-        appState,
-        (oldElement) => {
-          if (isTextElement(oldElement)) {
-            const newElement: ExcalidrawTextElement = newElementWith(
-              oldElement,
-              { textAlign: value },
-            );
-            redrawTextBoundingBox(newElement, getContainerElement(oldElement));
-            return newElement;
-          }
+      elements: changeProperty(elements, appState, (el) => {
+        if (isTextElement(el)) {
+          const element: ExcalidrawTextElement = newElementWith(el, {
+            textAlign: value,
+          });
+          redrawTextBoundingBox(element);
+          return element;
+        }

-          return oldElement;
-        },
-        true,
-      ),
+        return el;
+      }),
      appState: {
        ...appState,
        currentItemTextAlign: value,
@ -729,121 +566,42 @@ export const actionChangeTextAlign = register({
      commitToHistory: true,
    };
  },
-  PanelComponent: ({ elements, appState, updateData }) => {
-    return (
-      <fieldset>
-        <legend>{t("labels.textAlign")}</legend>
-        <ButtonIconSelect<TextAlign | false>
-          group="text-align"
-          options={[
-            {
-              value: "left",
-              text: t("labels.left"),
-              icon: <TextAlignLeftIcon theme={appState.theme} />,
-            },
-            {
-              value: "center",
-              text: t("labels.center"),
-              icon: <TextAlignCenterIcon theme={appState.theme} />,
-            },
-            {
-              value: "right",
-              text: t("labels.right"),
-              icon: <TextAlignRightIcon theme={appState.theme} />,
-            },
-          ]}
-          value={getFormValue(
-            elements,
-            appState,
-            (element) => {
-              if (isTextElement(element)) {
-                return element.textAlign;
-              }
-              const boundTextElement = getBoundTextElement(element);
-              if (boundTextElement) {
-                return boundTextElement.textAlign;
-              }
-              return null;
-            },
-            appState.currentItemTextAlign,
-          )}
-          onChange={(value) => updateData(value)}
-        />
-      </fieldset>
-    );
-  },
-});
-export const actionChangeVerticalAlign = register({
-  name: "changeVerticalAlign",
-  trackEvent: { category: "element" },
-  perform: (elements, appState, value) => {
-    return {
-      elements: changeProperty(
-        elements,
-        appState,
-        (oldElement) => {
-          if (isTextElement(oldElement)) {
-            const newElement: ExcalidrawTextElement = newElementWith(
-              oldElement,
-              { verticalAlign: value },
-            );
-
-            redrawTextBoundingBox(newElement, getContainerElement(oldElement));
-            return newElement;
-          }
-
-          return oldElement;
-        },
-        true,
-      ),
-      appState: {
-        ...appState,
-      },
-      commitToHistory: true,
-    };
-  },
-  PanelComponent: ({ elements, appState, updateData }) => {
-    return (
-      <fieldset>
-        <ButtonIconSelect<VerticalAlign | false>
-          group="text-align"
-          options={[
-            {
-              value: VERTICAL_ALIGN.TOP,
-              text: t("labels.alignTop"),
-              icon: <TextAlignTopIcon theme={appState.theme} />,
-            },
-            {
-              value: VERTICAL_ALIGN.MIDDLE,
-              text: t("labels.centerVertically"),
-              icon: <TextAlignMiddleIcon theme={appState.theme} />,
-            },
-            {
-              value: VERTICAL_ALIGN.BOTTOM,
-              text: t("labels.alignBottom"),
-              icon: <TextAlignBottomIcon theme={appState.theme} />,
-            },
-          ]}
-          value={getFormValue(elements, appState, (element) => {
-            if (isTextElement(element) && element.containerId) {
-              return element.verticalAlign;
-            }
-            const boundTextElement = getBoundTextElement(element);
-            if (boundTextElement) {
-              return boundTextElement.verticalAlign;
-            }
-            return null;
-          })}
-          onChange={(value) => updateData(value)}
-        />
-      </fieldset>
-    );
-  },
+  PanelComponent: ({ elements, appState, updateData }) => (
+    <fieldset>
+      <legend>{t("labels.textAlign")}</legend>
+      <ButtonIconSelect<TextAlign | false>
+        group="text-align"
+        options={[
+          {
+            value: "left",
+            text: t("labels.left"),
+            icon: <TextAlignLeftIcon theme={appState.theme} />,
+          },
+          {
+            value: "center",
+            text: t("labels.center"),
+            icon: <TextAlignCenterIcon theme={appState.theme} />,
+          },
+          {
+            value: "right",
+            text: t("labels.right"),
+            icon: <TextAlignRightIcon theme={appState.theme} />,
+          },
+        ]}
+        value={getFormValue(
+          elements,
+          appState,
+          (element) => isTextElement(element) && element.textAlign,
+          appState.currentItemTextAlign,
+        )}
+        onChange={(value) => updateData(value)}
+      />
+    </fieldset>
+  ),
 });

 export const actionChangeSharpness = register({
  name: "changeSharpness",
-  trackEvent: false,
  perform: (elements, appState, value) => {
    const targetElements = getTargetElements(
      getNonDeletedElements(elements),
@ -851,10 +609,10 @@ export const actionChangeSharpness = register({
    );
    const shouldUpdateForNonLinearElements = targetElements.length
      ? targetElements.every((el) => !isLinearElement(el))
-      : !isLinearElementType(appState.activeTool.type);
+      : !isLinearElementType(appState.elementType);
    const shouldUpdateForLinearElements = targetElements.length
      ? targetElements.every(isLinearElement)
-      : isLinearElementType(appState.activeTool.type);
+      : isLinearElementType(appState.elementType);
    return {
      elements: changeProperty(elements, appState, (el) =>
        newElementWith(el, {
@ -894,8 +652,8 @@ export const actionChangeSharpness = register({
          elements,
          appState,
          (element) => element.strokeSharpness,
-          (canChangeSharpness(appState.activeTool.type) &&
-            (isLinearElementType(appState.activeTool.type)
+          (canChangeSharpness(appState.elementType) &&
+            (isLinearElementType(appState.elementType)
              ? appState.currentItemLinearStrokeSharpness
              : appState.currentItemStrokeSharpness)) ||
            null,
@ -908,7 +666,6 @@ export const actionChangeSharpness = register({

 export const actionChangeArrowhead = register({
  name: "changeArrowhead",
-  trackEvent: false,
  perform: (
    elements,
    appState,
@ -979,14 +736,6 @@ export const actionChangeArrowhead = register({
                icon: <ArrowheadDotIcon theme={appState.theme} flip={!isRTL} />,
                keyBinding: "r",
              },
-              {
-                value: "triangle",
-                text: t("labels.arrowhead_triangle"),
-                icon: (
-                  <ArrowheadTriangleIcon theme={appState.theme} flip={!isRTL} />
-                ),
-                keyBinding: "t",
-              },
            ]}
            value={getFormValue<Arrowhead | null>(
              elements,
@ -1029,14 +778,6 @@ export const actionChangeArrowhead = register({
                keyBinding: "r",
                icon: <ArrowheadDotIcon theme={appState.theme} flip={isRTL} />,
              },
-              {
-                value: "triangle",
-                text: t("labels.arrowhead_triangle"),
-                icon: (
-                  <ArrowheadTriangleIcon theme={appState.theme} flip={isRTL} />
-                ),
-                keyBinding: "t",
-              },
            ]}
            value={getFormValue<Arrowhead | null>(
              elements,
--- a/src/actions/actionSelectAll.ts
+++ b/src/actions/actionSelectAll.ts
@ -1,12 +1,10 @@
 import { KEYS } from "../keys";
 import { register } from "./register";
 import { selectGroupsForSelectedElements } from "../groups";
-import { getNonDeletedElements, isTextElement } from "../element";
-import { ExcalidrawElement } from "../element/types";
+import { getNonDeletedElements } from "../element";

 export const actionSelectAll = register({
  name: "selectAll",
-  trackEvent: { category: "canvas" },
  perform: (elements, appState) => {
    if (appState.editingLinearElement) {
      return false;
@ -16,19 +14,12 @@ export const actionSelectAll = register({
        {
          ...appState,
          editingGroupId: null,
-          selectedElementIds: elements.reduce(
-            (map: Record<ExcalidrawElement["id"], true>, element) => {
-              if (
-                !element.isDeleted &&
-                !(isTextElement(element) && element.containerId) &&
-                !element.locked
-              ) {
-                map[element.id] = true;
-              }
-              return map;
-            },
-            {},
-          ),
+          selectedElementIds: elements.reduce((map, element) => {
+            if (!element.isDeleted) {
+              map[element.id] = true;
+            }
+            return map;
+          }, {} as any),
        },
        getNonDeletedElements(elements),
      ),
--- a/src/actions/actionStyles.test.tsx
+++ b/src/actions/actionStyles.test.tsx
@ -1,71 +0,0 @@
-import ExcalidrawApp from "../excalidraw-app";
-import { t } from "../i18n";
-import { CODES } from "../keys";
-import { API } from "../tests/helpers/api";
-import { Keyboard, Pointer, UI } from "../tests/helpers/ui";
-import { fireEvent, render, screen } from "../tests/test-utils";
-import { copiedStyles } from "./actionStyles";
-
-const { h } = window;
-
-const mouse = new Pointer("mouse");
-
-describe("actionStyles", () => {
-  beforeEach(async () => {
-    await render(<ExcalidrawApp />);
-  });
-  it("should copy & paste styles via keyboard", () => {
-    UI.clickTool("rectangle");
-    mouse.down(10, 10);
-    mouse.up(20, 20);
-
-    UI.clickTool("rectangle");
-    mouse.down(10, 10);
-    mouse.up(20, 20);
-
-    // Change some styles of second rectangle
-    UI.clickLabeledElement("Stroke");
-    UI.clickLabeledElement(t("colors.c92a2a"));
-    UI.clickLabeledElement("Background");
-    UI.clickLabeledElement(t("colors.e64980"));
-    // Fill style
-    fireEvent.click(screen.getByTitle("Cross-hatch"));
-    // Stroke width
-    fireEvent.click(screen.getByTitle("Bold"));
-    // Stroke style
-    fireEvent.click(screen.getByTitle("Dotted"));
-    // Roughness
-    fireEvent.click(screen.getByTitle("Cartoonist"));
-    // Opacity
-    fireEvent.change(screen.getByLabelText("Opacity"), {
-      target: { value: "60" },
-    });
-
-    mouse.reset();
-
-    API.setSelectedElements([h.elements[1]]);
-
-    Keyboard.withModifierKeys({ ctrl: true, alt: true }, () => {
-      Keyboard.codeDown(CODES.C);
-    });
-    const secondRect = JSON.parse(copiedStyles)[0];
-    expect(secondRect.id).toBe(h.elements[1].id);
-
-    mouse.reset();
-    // Paste styles to first rectangle
-    API.setSelectedElements([h.elements[0]]);
-    Keyboard.withModifierKeys({ ctrl: true, alt: true }, () => {
-      Keyboard.codeDown(CODES.V);
-    });
-
-    const firstRect = API.getSelectedElement();
-    expect(firstRect.id).toBe(h.elements[0].id);
-    expect(firstRect.strokeColor).toBe("#c92a2a");
-    expect(firstRect.backgroundColor).toBe("#e64980");
-    expect(firstRect.fillStyle).toBe("cross-hatch");
-    expect(firstRect.strokeWidth).toBe(2); // Bold: 2
-    expect(firstRect.strokeStyle).toBe("dotted");
-    expect(firstRect.roughness).toBe(2); // Cartoonist: 2
-    expect(firstRect.opacity).toBe(60);
-  });
-});
--- a/src/actions/actionStyles.ts
+++ b/src/actions/actionStyles.ts
@ -6,37 +6,27 @@ import {
 import { CODES, KEYS } from "../keys";
 import { t } from "../i18n";
 import { register } from "./register";
-import { newElementWith } from "../element/mutateElement";
+import { mutateElement, newElementWith } from "../element/mutateElement";
 import {
  DEFAULT_FONT_SIZE,
  DEFAULT_FONT_FAMILY,
  DEFAULT_TEXT_ALIGN,
 } from "../constants";
-import { getBoundTextElement } from "../element/textElement";
-import { hasBoundTextElement } from "../element/typeChecks";
-import { getSelectedElements } from "../scene";

 // `copiedStyles` is exported only for tests.
 export let copiedStyles: string = "{}";

 export const actionCopyStyles = register({
  name: "copyStyles",
-  trackEvent: { category: "element" },
  perform: (elements, appState) => {
-    const elementsCopied = [];
    const element = elements.find((el) => appState.selectedElementIds[el.id]);
-    elementsCopied.push(element);
-    if (element && hasBoundTextElement(element)) {
-      const boundTextElement = getBoundTextElement(element);
-      elementsCopied.push(boundTextElement);
-    }
    if (element) {
-      copiedStyles = JSON.stringify(elementsCopied);
+      copiedStyles = JSON.stringify(element);
    }
    return {
      appState: {
        ...appState,
-        toast: { message: t("toast.copyStyles") },
+        toastMessage: t("toast.copyStyles"),
      },
      commitToHistory: false,
    };
@ -48,64 +38,31 @@ export const actionCopyStyles = register({

 export const actionPasteStyles = register({
  name: "pasteStyles",
-  trackEvent: { category: "element" },
  perform: (elements, appState) => {
-    const elementsCopied = JSON.parse(copiedStyles);
-    const pastedElement = elementsCopied[0];
-    const boundTextElement = elementsCopied[1];
+    const pastedElement = JSON.parse(copiedStyles);
    if (!isExcalidrawElement(pastedElement)) {
      return { elements, commitToHistory: false };
    }
-
-    const selectedElements = getSelectedElements(elements, appState, true);
-    const selectedElementIds = selectedElements.map((element) => element.id);
    return {
      elements: elements.map((element) => {
-        if (selectedElementIds.includes(element.id)) {
-          let elementStylesToCopyFrom = pastedElement;
-          if (isTextElement(element) && element.containerId) {
-            elementStylesToCopyFrom = boundTextElement;
-          }
-          if (!elementStylesToCopyFrom) {
-            return element;
-          }
-          let newElement = newElementWith(element, {
-            backgroundColor: elementStylesToCopyFrom?.backgroundColor,
-            strokeWidth: elementStylesToCopyFrom?.strokeWidth,
-            strokeColor: elementStylesToCopyFrom?.strokeColor,
-            strokeStyle: elementStylesToCopyFrom?.strokeStyle,
-            fillStyle: elementStylesToCopyFrom?.fillStyle,
-            opacity: elementStylesToCopyFrom?.opacity,
-            roughness: elementStylesToCopyFrom?.roughness,
+        if (appState.selectedElementIds[element.id]) {
+          const newElement = newElementWith(element, {
+            backgroundColor: pastedElement?.backgroundColor,
+            strokeWidth: pastedElement?.strokeWidth,
+            strokeColor: pastedElement?.strokeColor,
+            strokeStyle: pastedElement?.strokeStyle,
+            fillStyle: pastedElement?.fillStyle,
+            opacity: pastedElement?.opacity,
+            roughness: pastedElement?.roughness,
          });
-
          if (isTextElement(newElement)) {
-            newElement = newElementWith(newElement, {
-              fontSize: elementStylesToCopyFrom?.fontSize || DEFAULT_FONT_SIZE,
-              fontFamily:
-                elementStylesToCopyFrom?.fontFamily || DEFAULT_FONT_FAMILY,
-              textAlign:
-                elementStylesToCopyFrom?.textAlign || DEFAULT_TEXT_ALIGN,
+            mutateElement(newElement, {
+              fontSize: pastedElement?.fontSize || DEFAULT_FONT_SIZE,
+              fontFamily: pastedElement?.fontFamily || DEFAULT_FONT_FAMILY,
+              textAlign: pastedElement?.textAlign || DEFAULT_TEXT_ALIGN,
            });
-            let container = null;
-            if (newElement.containerId) {
-              container =
-                selectedElements.find(
-                  (element) =>
-                    isTextElement(newElement) &&
-                    element.id === newElement.containerId,
-                ) || null;
-            }
-            redrawTextBoundingBox(newElement, container);
+            redrawTextBoundingBox(newElement);
          }
-
-          if (newElement.type === "arrow") {
-            newElement = newElementWith(newElement, {
-              startArrowhead: elementStylesToCopyFrom.startArrowhead,
-              endArrowhead: elementStylesToCopyFrom.endArrowhead,
-            });
-          }
-
          return newElement;
        }
        return element;
--- a/src/actions/actionToggleGridMode.tsx
+++ b/src/actions/actionToggleGridMode.tsx
@ -2,14 +2,12 @@ import { CODES, KEYS } from "../keys";
 import { register } from "./register";
 import { GRID_SIZE } from "../constants";
 import { AppState } from "../types";
+import { trackEvent } from "../analytics";

 export const actionToggleGridMode = register({
  name: "gridMode",
-  trackEvent: {
-    category: "canvas",
-    predicate: (appState) => !appState.gridSize,
-  },
  perform(elements, appState) {
+    trackEvent("view", "mode", "grid");
    return {
      appState: {
        ...appState,
--- a/src/actions/actionToggleLock.ts
+++ b/src/actions/actionToggleLock.ts
@ -1,63 +0,0 @@
-import { newElementWith } from "../element/mutateElement";
-import { ExcalidrawElement } from "../element/types";
-import { KEYS } from "../keys";
-import { getSelectedElements } from "../scene";
-import { arrayToMap } from "../utils";
-import { register } from "./register";
-
-export const actionToggleLock = register({
-  name: "toggleLock",
-  trackEvent: { category: "element" },
-  perform: (elements, appState) => {
-    const selectedElements = getSelectedElements(elements, appState, true);
-
-    if (!selectedElements.length) {
-      return false;
-    }
-
-    const operation = getOperation(selectedElements);
-    const selectedElementsMap = arrayToMap(selectedElements);
-
-    return {
-      elements: elements.map((element) => {
-        if (!selectedElementsMap.has(element.id)) {
-          return element;
-        }
-
-        return newElementWith(element, { locked: operation === "lock" });
-      }),
-      appState,
-      commitToHistory: true,
-    };
-  },
-  contextItemLabel: (elements, appState) => {
-    const selected = getSelectedElements(elements, appState, false);
-    if (selected.length === 1) {
-      return selected[0].locked
-        ? "labels.elementLock.unlock"
-        : "labels.elementLock.lock";
-    }
-
-    if (selected.length > 1) {
-      return getOperation(selected) === "lock"
-        ? "labels.elementLock.lockAll"
-        : "labels.elementLock.unlockAll";
-    }
-
-    throw new Error(
-      "Unexpected zero elements to lock/unlock. This should never happen.",
-    );
-  },
-  keyTest: (event, appState, elements) => {
-    return (
-      event.key.toLocaleLowerCase() === KEYS.L &&
-      event[KEYS.CTRL_OR_CMD] &&
-      event.shiftKey &&
-      getSelectedElements(elements, appState, false).length > 0
-    );
-  },
-});
-
-const getOperation = (
-  elements: readonly ExcalidrawElement[],
-): "lock" | "unlock" => (elements.some((el) => !el.locked) ? "lock" : "unlock");
--- a/src/actions/actionToggleStats.tsx
+++ b/src/actions/actionToggleStats.tsx
@ -3,7 +3,6 @@ import { CODES, KEYS } from "../keys";

 export const actionToggleStats = register({
  name: "stats",
-  trackEvent: { category: "menu" },
  perform(elements, appState) {
    return {
      appState: {
--- a/src/actions/actionToggleViewMode.tsx
+++ b/src/actions/actionToggleViewMode.tsx
@ -1,13 +1,11 @@
 import { CODES, KEYS } from "../keys";
 import { register } from "./register";
+import { trackEvent } from "../analytics";

 export const actionToggleViewMode = register({
  name: "viewMode",
-  trackEvent: {
-    category: "canvas",
-    predicate: (appState) => !appState.viewModeEnabled,
-  },
  perform(elements, appState) {
+    trackEvent("view", "mode", "view");
    return {
      appState: {
        ...appState,
--- a/src/actions/actionToggleZenMode.tsx
+++ b/src/actions/actionToggleZenMode.tsx
@ -1,13 +1,12 @@
 import { CODES, KEYS } from "../keys";
 import { register } from "./register";
+import { trackEvent } from "../analytics";

 export const actionToggleZenMode = register({
  name: "zenMode",
-  trackEvent: {
-    category: "canvas",
-    predicate: (appState) => !appState.zenModeEnabled,
-  },
  perform(elements, appState) {
+    trackEvent("view", "mode", "zen");
+
    return {
      appState: {
        ...appState,
--- a/src/actions/actionZindex.tsx
+++ b/src/actions/actionZindex.tsx
@ -18,7 +18,6 @@ import {

 export const actionSendBackward = register({
  name: "sendBackward",
-  trackEvent: { category: "element" },
  perform: (elements, appState) => {
    return {
      elements: moveOneLeft(elements, appState),
@ -46,7 +45,6 @@ export const actionSendBackward = register({

 export const actionBringForward = register({
  name: "bringForward",
-  trackEvent: { category: "element" },
  perform: (elements, appState) => {
    return {
      elements: moveOneRight(elements, appState),
@ -74,7 +72,6 @@ export const actionBringForward = register({

 export const actionSendToBack = register({
  name: "sendToBack",
-  trackEvent: { category: "element" },
  perform: (elements, appState) => {
    return {
      elements: moveAllLeft(elements, appState),
@ -109,8 +106,6 @@ export const actionSendToBack = register({

 export const actionBringToFront = register({
  name: "bringToFront",
-  trackEvent: { category: "element" },
-
  perform: (elements, appState) => {
    return {
      elements: moveAllRight(elements, appState),
--- a/src/actions/index.ts
+++ b/src/actions/index.ts
@ -17,7 +17,6 @@ export {
  actionChangeFontSize,
  actionChangeFontFamily,
  actionChangeTextAlign,
-  actionChangeVerticalAlign,
 } from "./actionProperties";

 export {
@ -75,13 +74,9 @@ export {
  actionCut,
  actionCopyAsPng,
  actionCopyAsSvg,
-  copyText,
 } from "./actionClipboard";

 export { actionToggleGridMode } from "./actionToggleGridMode";
 export { actionToggleZenMode } from "./actionToggleZenMode";

 export { actionToggleStats } from "./actionToggleStats";
-export { actionUnbindText, actionBindText } from "./actionBoundText";
-export { actionLink } from "../element/Hyperlink";
-export { actionToggleLock } from "./actionToggleLock";
--- a/src/actions/manager.tsx
+++ b/src/actions/manager.tsx
@ -1,59 +1,40 @@
 import React from "react";
 import {
  Action,
+  ActionsManagerInterface,
  UpdaterFn,
  ActionName,
  ActionResult,
  PanelComponentProps,
-  ActionSource,
 } from "./types";
 import { ExcalidrawElement } from "../element/types";
-import { AppClassProperties, AppState } from "../types";
+import { AppProps, AppState } from "../types";
 import { MODES } from "../constants";
-import { trackEvent } from "../analytics";
+import Library from "../data/library";

-const trackAction = (
-  action: Action,
-  source: ActionSource,
-  appState: Readonly<AppState>,
-  elements: readonly ExcalidrawElement[],
-  app: AppClassProperties,
-  value: any,
-) => {
-  if (action.trackEvent) {
-    try {
-      if (typeof action.trackEvent === "object") {
-        const shouldTrack = action.trackEvent.predicate
-          ? action.trackEvent.predicate(appState, elements, value)
-          : true;
-        if (shouldTrack) {
-          trackEvent(
-            action.trackEvent.category,
-            action.trackEvent.action || action.name,
-            `${source} (${app.device.isMobile ? "mobile" : "desktop"})`,
-          );
-        }
-      }
-    } catch (error) {
-      console.error("error while logging action:", error);
-    }
-  }
+// This is the <App> component, but for now we don't care about anything but its
+// `canvas` state.
+type App = {
+  canvas: HTMLCanvasElement | null;
+  focusContainer: () => void;
+  props: AppProps;
+  library: Library;
 };

-export class ActionManager {
-  actions = {} as Record<ActionName, Action>;
+export class ActionManager implements ActionsManagerInterface {
+  actions = {} as ActionsManagerInterface["actions"];

  updater: (actionResult: ActionResult | Promise<ActionResult>) => void;

  getAppState: () => Readonly<AppState>;
  getElementsIncludingDeleted: () => readonly ExcalidrawElement[];
-  app: AppClassProperties;
+  app: App;

  constructor(
    updater: UpdaterFn,
    getAppState: () => AppState,
    getElementsIncludingDeleted: () => readonly ExcalidrawElement[],
-    app: AppClassProperties,
+    app: App,
  ) {
    this.updater = (actionResult) => {
      if (actionResult && "then" in actionResult) {
@ -94,15 +75,9 @@ export class ActionManager {
          ),
      );

-    if (data.length !== 1) {
-      if (data.length > 1) {
-        console.warn("Canceling as multiple actions match this shortcut", data);
-      }
+    if (data.length === 0) {
      return false;
    }
-
-    const action = data[0];
-
    const { viewModeEnabled } = this.getAppState();
    if (viewModeEnabled) {
      if (!Object.values(MODES).includes(data[0].name)) {
@ -110,26 +85,27 @@ export class ActionManager {
      }
    }

-    const elements = this.getElementsIncludingDeleted();
-    const appState = this.getAppState();
-    const value = null;
-
-    trackAction(action, "keyboard", appState, elements, this.app, null);
-
    event.preventDefault();
-    event.stopPropagation();
-    this.updater(data[0].perform(elements, appState, value, this.app));
+    this.updater(
+      data[0].perform(
+        this.getElementsIncludingDeleted(),
+        this.getAppState(),
+        null,
+        this.app,
+      ),
+    );
    return true;
  }

-  executeAction(action: Action, source: ActionSource = "api") {
-    const elements = this.getElementsIncludingDeleted();
-    const appState = this.getAppState();
-    const value = null;
-
-    trackAction(action, source, appState, elements, this.app, value);
-
-    this.updater(action.perform(elements, appState, value, this.app));
+  executeAction(action: Action) {
+    this.updater(
+      action.perform(
+        this.getElementsIncludingDeleted(),
+        this.getAppState(),
+        null,
+        this.app,
+      ),
+    );
  }

  /**
@ -147,11 +123,7 @@ export class ActionManager {
    ) {
      const action = this.actions[name];
      const PanelComponent = action.PanelComponent!;
-      const elements = this.getElementsIncludingDeleted();
-      const appState = this.getAppState();
      const updateData = (formState?: any) => {
-        trackAction(action, "ui", appState, elements, this.app, formState);
-
        this.updater(
          action.perform(
            this.getElementsIncludingDeleted(),
--- a/src/actions/register.ts
+++ b/src/actions/register.ts
@ -2,9 +2,7 @@ import { Action } from "./types";

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

-export const register = <T extends Action>(action: T) => {
+export const register = (action: Action): Action => {
  actions = actions.concat(action);
-  return action as T & {
-    keyTest?: unknown extends T["keyTest"] ? never : T["keyTest"];
-  };
+  return action;
 };
--- a/src/actions/shortcuts.ts
+++ b/src/actions/shortcuts.ts
@ -1,10 +1,8 @@
 import { t } from "../i18n";
 import { isDarwin } from "../keys";
 import { getShortcutKey } from "../utils";
-import { ActionName } from "./types";

-export type ShortcutName = SubtypeOf<
-  ActionName,
+export type ShortcutName =
  | "cut"
  | "copy"
  | "paste"
@ -27,10 +25,7 @@ export type ShortcutName = SubtypeOf<
  | "addToLibrary"
  | "viewMode"
  | "flipHorizontal"
-  | "flipVertical"
-  | "hyperlink"
-  | "toggleLock"
->;
+  | "flipVertical";

 const shortcutMap: Record<ShortcutName, string[]> = {
  cut: [getShortcutKey("CtrlOrCmd+X")],
@ -67,12 +62,10 @@ const shortcutMap: Record<ShortcutName, string[]> = {
  flipHorizontal: [getShortcutKey("Shift+H")],
  flipVertical: [getShortcutKey("Shift+V")],
  viewMode: [getShortcutKey("Alt+R")],
-  hyperlink: [getShortcutKey("CtrlOrCmd+K")],
-  toggleLock: [getShortcutKey("CtrlOrCmd+Shift+L")],
 };

 export const getShortcutFromShortcutName = (name: ShortcutName) => {
  const shortcuts = shortcutMap[name];
-  // if multiple shortcuts available, take the first one
+  // if multiple shortcuts availiable, take the first one
  return shortcuts && shortcuts.length > 0 ? shortcuts[0] : "";
 };
--- a/src/actions/types.ts
+++ b/src/actions/types.ts
@ -1,13 +1,8 @@
 import React from "react";
 import { ExcalidrawElement } from "../element/types";
-import {
-  AppClassProperties,
-  AppState,
-  ExcalidrawProps,
-  BinaryFiles,
-} from "../types";
-
-export type ActionSource = "ui" | "keyboard" | "contextMenu" | "api";
+import { AppState, ExcalidrawProps } from "../types";
+import Library from "../data/library";
+import { ToolButtonSize } from "../components/ToolButton";

 /** if false, the action should be prevented */
 export type ActionResult =
@ -17,18 +12,22 @@ export type ActionResult =
        AppState,
        "offsetTop" | "offsetLeft" | "width" | "height"
      > | null;
-      files?: BinaryFiles | null;
      commitToHistory: boolean;
      syncHistory?: boolean;
-      replaceFiles?: boolean;
    }
  | false;

+type AppAPI = {
+  canvas: HTMLCanvasElement | null;
+  focusContainer(): void;
+  library: Library;
+};
+
 type ActionFn = (
  elements: readonly ExcalidrawElement[],
  appState: Readonly<AppState>,
  formData: any,
-  app: AppClassProperties,
+  app: AppAPI,
 ) => ActionResult | Promise<ActionResult>;

 export type UpdaterFn = (res: ActionResult) => void;
@ -40,7 +39,6 @@ export type ActionName =
  | "paste"
  | "copyAsPng"
  | "copyAsSvg"
-  | "copyText"
  | "sendBackward"
  | "bringForward"
  | "sendToBack"
@ -84,7 +82,6 @@ export type ActionName =
  | "zoomToSelection"
  | "changeFontFamily"
  | "changeTextAlign"
-  | "changeVerticalAlign"
  | "toggleFullScreen"
  | "toggleShortcuts"
  | "group"
@ -104,21 +101,14 @@ export type ActionName =
  | "flipVertical"
  | "viewMode"
  | "exportWithDarkMode"
-  | "toggleTheme"
-  | "increaseFontSize"
-  | "decreaseFontSize"
-  | "unbindText"
-  | "hyperlink"
-  | "eraser"
-  | "bindText"
-  | "toggleLock";
+  | "toggleTheme";

 export type PanelComponentProps = {
  elements: readonly ExcalidrawElement[];
  appState: AppState;
  updateData: (formData?: any) => void;
  appProps: ExcalidrawProps;
-  data?: Record<string, any>;
+  data?: Partial<{ id: string; size: ToolButtonSize }>;
 };

 export interface Action {
@ -131,34 +121,18 @@ export interface Action {
    appState: AppState,
    elements: readonly ExcalidrawElement[],
  ) => boolean;
-  contextItemLabel?:
-    | string
-    | ((
-        elements: readonly ExcalidrawElement[],
-        appState: Readonly<AppState>,
-      ) => string);
+  contextItemLabel?: string;
  contextItemPredicate?: (
    elements: readonly ExcalidrawElement[],
    appState: AppState,
  ) => boolean;
  checked?: (appState: Readonly<AppState>) => boolean;
-  trackEvent:
-    | false
-    | {
-        category:
-          | "toolbar"
-          | "element"
-          | "canvas"
-          | "export"
-          | "history"
-          | "menu"
-          | "collab"
-          | "hyperlink";
-        action?: string;
-        predicate?: (
-          appState: Readonly<AppState>,
-          elements: readonly ExcalidrawElement[],
-          value: any,
-        ) => boolean;
-      };
+}
+
+export interface ActionsManagerInterface {
+  actions: Record<ActionName, Action>;
+  registerAction: (action: Action) => void;
+  handleKeyDown: (event: React.KeyboardEvent | KeyboardEvent) => boolean;
+  renderAction: (name: ActionName) => React.ReactElement | null;
+  executeAction: (action: Action) => void;
 }
--- a/src/align.ts
+++ b/src/align.ts
@ -1,7 +1,13 @@
 import { ExcalidrawElement } from "./element/types";
 import { newElementWith } from "./element/mutateElement";
-import { Box, getCommonBoundingBox } from "./element/bounds";
-import { getMaximumGroups } from "./groups";
+import { getCommonBounds } from "./element";
+
+interface Box {
+  minX: number;
+  minY: number;
+  maxX: number;
+  maxY: number;
+}

 export interface Alignment {
  position: "start" | "center" | "end";
@ -31,6 +37,28 @@ export const alignElements = (
  });
 };

+export const getMaximumGroups = (
+  elements: ExcalidrawElement[],
+): ExcalidrawElement[][] => {
+  const groups: Map<String, ExcalidrawElement[]> = new Map<
+    String,
+    ExcalidrawElement[]
+  >();
+
+  elements.forEach((element: ExcalidrawElement) => {
+    const groupId =
+      element.groupIds.length === 0
+        ? element.id
+        : element.groupIds[element.groupIds.length - 1];
+
+    const currentGroupMembers = groups.get(groupId) || [];
+
+    groups.set(groupId, [...currentGroupMembers, element]);
+  });
+
+  return Array.from(groups.values());
+};
+
 const calculateTranslation = (
  group: ExcalidrawElement[],
  selectionBoundingBox: Box,
@ -60,3 +88,8 @@ const calculateTranslation = (
      (groupBoundingBox[min] + groupBoundingBox[max]) / 2,
  };
 };
+
+const getCommonBoundingBox = (elements: ExcalidrawElement[]): Box => {
+  const [minX, minY, maxX, maxY] = getCommonBounds(elements);
+  return { minX, minY, maxX, maxY };
+};
--- a/src/analytics.ts
+++ b/src/analytics.ts
@ -3,20 +3,16 @@ export const trackEvent =
  process.env?.REACT_APP_GOOGLE_ANALYTICS_ID &&
  typeof window !== "undefined" &&
  window.gtag
-    ? (category: string, action: string, label?: string, value?: number) => {
-        try {
-          window.gtag("event", action, {
-            event_category: category,
-            event_label: label,
-            value,
-          });
-        } catch (error) {
-          console.error("error logging to ga", error);
-        }
+    ? (category: string, name: string, label?: string, value?: number) => {
+        window.gtag("event", name, {
+          event_category: category,
+          event_label: label,
+          value,
+        });
      }
    : typeof process !== "undefined" && process.env?.JEST_WORKER_ID
-    ? (category: string, action: string, label?: string, value?: number) => {}
-    : (category: string, action: string, label?: string, value?: number) => {
+    ? (category: string, name: string, label?: string, value?: number) => {}
+    : (category: string, name: string, label?: string, value?: number) => {
        // Uncomment the next line to track locally
-        // console.log("Track Event", { category, action, label, value });
+        // console.info("Track Event", category, name, label, value);
      };
--- a/src/appState.ts
+++ b/src/appState.ts
@ -4,7 +4,6 @@ import {
  DEFAULT_FONT_SIZE,
  DEFAULT_TEXT_ALIGN,
  EXPORT_SCALES,
-  THEME,
 } from "./constants";
 import { t } from "./i18n";
 import { AppState, NormalizedZoomValue } from "./types";
@ -19,7 +18,7 @@ export const getDefaultAppState = (): Omit<
  "offsetTop" | "offsetLeft" | "width" | "height"
 > => {
  return {
-    theme: THEME.LIGHT,
+    theme: "light",
    collaborators: new Map(),
    currentChartType: "bar",
    currentItemBackgroundColor: "transparent",
@ -41,14 +40,8 @@ export const getDefaultAppState = (): Omit<
    editingElement: null,
    editingGroupId: null,
    editingLinearElement: null,
-    activeTool: {
-      type: "selection",
-      customType: null,
-      locked: false,
-      lastActiveToolBeforeEraser: null,
-    },
-    penMode: false,
-    penDetected: false,
+    elementLocked: false,
+    elementType: "selection",
    errorMessage: null,
    exportBackground: true,
    exportScale: defaultExportScale,
@ -58,7 +51,6 @@ export const getDefaultAppState = (): Omit<
    gridSize: null,
    isBindingEnabled: true,
    isLibraryOpen: false,
-    isLibraryMenuDocked: false,
    isLoading: false,
    isResizing: false,
    isRotating: false,
@ -81,15 +73,11 @@ export const getDefaultAppState = (): Omit<
    showStats: false,
    startBoundElement: null,
    suggestedBindings: [],
-    toast: null,
+    toastMessage: null,
    viewBackgroundColor: oc.white,
    zenModeEnabled: false,
-    zoom: {
-      value: 1 as NormalizedZoomValue,
-    },
+    zoom: { value: 1 as NormalizedZoomValue, translation: { x: 0, y: 0 } },
    viewModeEnabled: false,
-    pendingImageElementId: null,
-    showHyperlinkPopup: false,
  };
 };

@ -103,89 +91,78 @@ const APP_STATE_STORAGE_CONF = (<
    browser: boolean;
    /** whether to keep when exporting to file/database */
    export: boolean;
-    /** server (shareLink/collab/...) */
-    server: boolean;
  },
-  T extends Record<keyof AppState, Values>,
->(config: { [K in keyof T]: K extends keyof AppState ? T[K] : never }) =>
-  config)({
-  theme: { browser: true, export: false, server: false },
-  collaborators: { browser: false, export: false, server: false },
-  currentChartType: { browser: true, export: false, server: false },
-  currentItemBackgroundColor: { browser: true, export: false, server: false },
-  currentItemEndArrowhead: { browser: true, export: false, server: false },
-  currentItemFillStyle: { browser: true, export: false, server: false },
-  currentItemFontFamily: { browser: true, export: false, server: false },
-  currentItemFontSize: { browser: true, export: false, server: false },
-  currentItemLinearStrokeSharpness: {
-    browser: true,
-    export: false,
-    server: false,
-  },
-  currentItemOpacity: { browser: true, export: false, server: false },
-  currentItemRoughness: { browser: true, export: false, server: false },
-  currentItemStartArrowhead: { browser: true, export: false, server: false },
-  currentItemStrokeColor: { browser: true, export: false, server: false },
-  currentItemStrokeSharpness: { browser: true, export: false, server: false },
-  currentItemStrokeStyle: { browser: true, export: false, server: false },
-  currentItemStrokeWidth: { browser: true, export: false, server: false },
-  currentItemTextAlign: { browser: true, export: false, server: false },
-  cursorButton: { browser: true, export: false, server: false },
-  draggingElement: { browser: false, export: false, server: false },
-  editingElement: { browser: false, export: false, server: false },
-  editingGroupId: { browser: true, export: false, server: false },
-  editingLinearElement: { browser: false, export: false, server: false },
-  activeTool: { browser: true, export: false, server: false },
-  penMode: { browser: true, export: false, server: false },
-  penDetected: { browser: true, export: false, server: false },
-  errorMessage: { browser: false, export: false, server: false },
-  exportBackground: { browser: true, export: false, server: false },
-  exportEmbedScene: { browser: true, export: false, server: false },
-  exportScale: { browser: true, export: false, server: false },
-  exportWithDarkMode: { browser: true, export: false, server: false },
-  fileHandle: { browser: false, export: false, server: false },
-  gridSize: { browser: true, export: true, server: true },
-  height: { browser: false, export: false, server: false },
-  isBindingEnabled: { browser: false, export: false, server: false },
-  isLibraryOpen: { browser: true, export: false, server: false },
-  isLibraryMenuDocked: { browser: true, export: false, server: false },
-  isLoading: { browser: false, export: false, server: false },
-  isResizing: { browser: false, export: false, server: false },
-  isRotating: { browser: false, export: false, server: false },
-  lastPointerDownWith: { browser: true, export: false, server: false },
-  multiElement: { browser: false, export: false, server: false },
-  name: { browser: true, export: false, server: false },
-  offsetLeft: { browser: false, export: false, server: false },
-  offsetTop: { browser: false, export: false, server: false },
-  openMenu: { browser: true, export: false, server: false },
-  openPopup: { browser: false, export: false, server: false },
-  pasteDialog: { browser: false, export: false, server: false },
-  previousSelectedElementIds: { browser: true, export: false, server: false },
-  resizingElement: { browser: false, export: false, server: false },
-  scrolledOutside: { browser: true, export: false, server: false },
-  scrollX: { browser: true, export: false, server: false },
-  scrollY: { browser: true, export: false, server: false },
-  selectedElementIds: { browser: true, export: false, server: false },
-  selectedGroupIds: { browser: true, export: false, server: false },
-  selectionElement: { browser: false, export: false, server: false },
-  shouldCacheIgnoreZoom: { browser: true, export: false, server: false },
-  showHelpDialog: { browser: false, export: false, server: false },
-  showStats: { browser: true, export: false, server: false },
-  startBoundElement: { browser: false, export: false, server: false },
-  suggestedBindings: { browser: false, export: false, server: false },
-  toast: { browser: false, export: false, server: false },
-  viewBackgroundColor: { browser: true, export: true, server: true },
-  width: { browser: false, export: false, server: false },
-  zenModeEnabled: { browser: true, export: false, server: false },
-  zoom: { browser: true, export: false, server: false },
-  viewModeEnabled: { browser: false, export: false, server: false },
-  pendingImageElementId: { browser: false, export: false, server: false },
-  showHyperlinkPopup: { browser: false, export: false, server: false },
+  T extends Record<keyof AppState, Values>
+>(
+  config: { [K in keyof T]: K extends keyof AppState ? T[K] : never },
+) => config)({
+  theme: { browser: true, export: false },
+  collaborators: { browser: false, export: false },
+  currentChartType: { browser: true, export: false },
+  currentItemBackgroundColor: { browser: true, export: false },
+  currentItemEndArrowhead: { browser: true, export: false },
+  currentItemFillStyle: { browser: true, export: false },
+  currentItemFontFamily: { browser: true, export: false },
+  currentItemFontSize: { browser: true, export: false },
+  currentItemLinearStrokeSharpness: { browser: true, export: false },
+  currentItemOpacity: { browser: true, export: false },
+  currentItemRoughness: { browser: true, export: false },
+  currentItemStartArrowhead: { browser: true, export: false },
+  currentItemStrokeColor: { browser: true, export: false },
+  currentItemStrokeSharpness: { browser: true, export: false },
+  currentItemStrokeStyle: { browser: true, export: false },
+  currentItemStrokeWidth: { browser: true, export: false },
+  currentItemTextAlign: { browser: true, export: false },
+  cursorButton: { browser: true, export: false },
+  draggingElement: { browser: false, export: false },
+  editingElement: { browser: false, export: false },
+  editingGroupId: { browser: true, export: false },
+  editingLinearElement: { browser: false, export: false },
+  elementLocked: { browser: true, export: false },
+  elementType: { browser: true, export: false },
+  errorMessage: { browser: false, export: false },
+  exportBackground: { browser: true, export: false },
+  exportEmbedScene: { browser: true, export: false },
+  exportScale: { browser: true, export: false },
+  exportWithDarkMode: { browser: true, export: false },
+  fileHandle: { browser: false, export: false },
+  gridSize: { browser: true, export: true },
+  height: { browser: false, export: false },
+  isBindingEnabled: { browser: false, export: false },
+  isLibraryOpen: { browser: false, export: false },
+  isLoading: { browser: false, export: false },
+  isResizing: { browser: false, export: false },
+  isRotating: { browser: false, export: false },
+  lastPointerDownWith: { browser: true, export: false },
+  multiElement: { browser: false, export: false },
+  name: { browser: true, export: false },
+  offsetLeft: { browser: false, export: false },
+  offsetTop: { browser: false, export: false },
+  openMenu: { browser: true, export: false },
+  openPopup: { browser: false, export: false },
+  pasteDialog: { browser: false, export: false },
+  previousSelectedElementIds: { browser: true, export: false },
+  resizingElement: { browser: false, export: false },
+  scrolledOutside: { browser: true, export: false },
+  scrollX: { browser: true, export: false },
+  scrollY: { browser: true, export: false },
+  selectedElementIds: { browser: true, export: false },
+  selectedGroupIds: { browser: true, export: false },
+  selectionElement: { browser: false, export: false },
+  shouldCacheIgnoreZoom: { browser: true, export: false },
+  showHelpDialog: { browser: false, export: false },
+  showStats: { browser: true, export: false },
+  startBoundElement: { browser: false, export: false },
+  suggestedBindings: { browser: false, export: false },
+  toastMessage: { browser: false, export: false },
+  viewBackgroundColor: { browser: true, export: true },
+  width: { browser: false, export: false },
+  zenModeEnabled: { browser: true, export: false },
+  zoom: { browser: true, export: false },
+  viewModeEnabled: { browser: false, export: false },
 });

-const _clearAppStateForStorage = <
-  ExportType extends "export" | "browser" | "server",
->(
+const _clearAppStateForStorage = <ExportType extends "export" | "browser">(
  appState: Partial<AppState>,
  exportType: ExportType,
 ) => {
@ -198,10 +175,8 @@ const _clearAppStateForStorage = <
  for (const key of Object.keys(appState) as (keyof typeof appState)[]) {
    const propConfig = APP_STATE_STORAGE_CONF[key];
    if (propConfig?.[exportType]) {
-      const nextValue = appState[key];
-
-      // https://github.com/microsoft/TypeScript/issues/31445
-      (stateForExport as any)[key] = nextValue;
+      // @ts-ignore see https://github.com/microsoft/TypeScript/issues/31445
+      stateForExport[key] = appState[key];
    }
  }
  return stateForExport;
@ -214,13 +189,3 @@ export const clearAppStateForLocalStorage = (appState: Partial<AppState>) => {
 export const cleanAppStateForExport = (appState: Partial<AppState>) => {
  return _clearAppStateForStorage(appState, "export");
 };
-
-export const clearAppStateForDatabase = (appState: Partial<AppState>) => {
-  return _clearAppStateForStorage(appState, "server");
-};
-
-export const isEraserActive = ({
-  activeTool,
-}: {
-  activeTool: AppState["activeTool"];
-}) => activeTool.type === "eraser";
--- a/src/charts.test.ts
+++ b/src/charts.test.ts
@ -1,121 +0,0 @@
-import {
-  Spreadsheet,
-  tryParseCells,
-  tryParseNumber,
-  VALID_SPREADSHEET,
-} from "./charts";
-
-describe("charts", () => {
-  describe("tryParseNumber", () => {
-    it.each<[string, number]>([
-      ["1", 1],
-      ["0", 0],
-      ["-1", -1],
-      ["0.1", 0.1],
-      [".1", 0.1],
-      ["1.", 1],
-      ["424.", 424],
-      ["$1", 1],
-      ["-.1", -0.1],
-      ["-$1", -1],
-      ["$-1", -1],
-    ])("should correctly identify %s as numbers", (given, expected) => {
-      expect(tryParseNumber(given)).toEqual(expected);
-    });
-
-    it.each<[string]>([["a"], ["$"], ["$a"], ["-$a"]])(
-      "should correctly identify %s as not a number",
-      (given) => {
-        expect(tryParseNumber(given)).toBeNull();
-      },
-    );
-  });
-
-  describe("tryParseCells", () => {
-    it("Successfully parses a spreadsheet", () => {
-      const spreadsheet = [
-        ["time", "value"],
-        ["01:00", "61"],
-        ["02:00", "-60"],
-        ["03:00", "85"],
-        ["04:00", "-67"],
-        ["05:00", "54"],
-        ["06:00", "95"],
-      ];
-
-      const result = tryParseCells(spreadsheet);
-
-      expect(result.type).toBe(VALID_SPREADSHEET);
-
-      const { title, labels, values } = (
-        result as { type: typeof VALID_SPREADSHEET; spreadsheet: Spreadsheet }
-      ).spreadsheet;
-
-      expect(title).toEqual("value");
-      expect(labels).toEqual([
-        "01:00",
-        "02:00",
-        "03:00",
-        "04:00",
-        "05:00",
-        "06:00",
-      ]);
-      expect(values).toEqual([61, -60, 85, -67, 54, 95]);
-    });
-
-    it("Uses the second column as the label if it is not a number", () => {
-      const spreadsheet = [
-        ["time", "value"],
-        ["01:00", "61"],
-        ["02:00", "-60"],
-        ["03:00", "85"],
-        ["04:00", "-67"],
-        ["05:00", "54"],
-        ["06:00", "95"],
-      ];
-
-      const result = tryParseCells(spreadsheet);
-
-      expect(result.type).toBe(VALID_SPREADSHEET);
-
-      const { title, labels, values } = (
-        result as { type: typeof VALID_SPREADSHEET; spreadsheet: Spreadsheet }
-      ).spreadsheet;
-
-      expect(title).toEqual("value");
-      expect(labels).toEqual([
-        "01:00",
-        "02:00",
-        "03:00",
-        "04:00",
-        "05:00",
-        "06:00",
-      ]);
-      expect(values).toEqual([61, -60, 85, -67, 54, 95]);
-    });
-
-    it("treats the first column as labels if both columns are numbers", () => {
-      const spreadsheet = [
-        ["time", "value"],
-        ["01", "61"],
-        ["02", "-60"],
-        ["03", "85"],
-        ["04", "-67"],
-        ["05", "54"],
-        ["06", "95"],
-      ];
-
-      const result = tryParseCells(spreadsheet);
-
-      expect(result.type).toBe(VALID_SPREADSHEET);
-
-      const { title, labels, values } = (
-        result as { type: typeof VALID_SPREADSHEET; spreadsheet: Spreadsheet }
-      ).spreadsheet;
-
-      expect(title).toEqual("value");
-      expect(labels).toEqual(["01", "02", "03", "04", "05", "06"]);
-      expect(values).toEqual([61, -60, 85, -67, 54, 95]);
-    });
-  });
-});
--- a/src/charts.ts
+++ b/src/charts.ts
@ -1,10 +1,5 @@
 import colors from "./colors";
-import {
-  DEFAULT_FONT_FAMILY,
-  DEFAULT_FONT_SIZE,
-  ENV,
-  VERTICAL_ALIGN,
-} from "./constants";
+import { DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, ENV } from "./constants";
 import { newElement, newLinearElement, newTextElement } from "./element";
 import { NonDeletedExcalidrawElement } from "./element/types";
 import { randomId } from "./random";
@ -29,24 +24,18 @@ type ParseSpreadsheetResult =
  | { type: typeof NOT_SPREADSHEET; reason: string }
  | { type: typeof VALID_SPREADSHEET; spreadsheet: Spreadsheet };

-/**
- * @private exported for testing
- */
-export const tryParseNumber = (s: string): number | null => {
-  const match = /^([-+]?)[$€£¥₩]?([-+]?)([\d.,]+)[%]?$/.exec(s);
+const tryParseNumber = (s: string): number | null => {
+  const match = /^[$€£¥₩]?([0-9,]+(\.[0-9]+)?)$/.exec(s);
  if (!match) {
    return null;
  }
-  return parseFloat(`${(match[1] || match[2]) + match[3]}`.replace(/,/g, ""));
+  return parseFloat(match[1].replace(/,/g, ""));
 };

 const isNumericColumn = (lines: string[][], columnIndex: number) =>
  lines.slice(1).every((line) => tryParseNumber(line[columnIndex]) !== null);

-/**
- * @private exported for testing
- */
-export const tryParseCells = (cells: string[][]): ParseSpreadsheetResult => {
+const tryParseCells = (cells: string[][]): ParseSpreadsheetResult => {
  const numCols = cells[0].length;

  if (numCols > 2) {
@ -77,16 +66,13 @@ export const tryParseCells = (cells: string[][]): ParseSpreadsheetResult => {
    };
  }

-  const labelColumnNumeric = isNumericColumn(cells, 0);
-  const valueColumnNumeric = isNumericColumn(cells, 1);
+  const valueColumnIndex = isNumericColumn(cells, 0) ? 0 : 1;

-  if (!labelColumnNumeric && !valueColumnNumeric) {
+  if (!isNumericColumn(cells, valueColumnIndex)) {
    return { type: NOT_SPREADSHEET, reason: "Value is not numeric" };
  }

-  const [labelColumnIndex, valueColumnIndex] = valueColumnNumeric
-    ? [0, 1]
-    : [1, 0];
+  const labelColumnIndex = (valueColumnIndex + 1) % 2;
  const hasHeader = tryParseNumber(cells[0][valueColumnIndex]) === null;
  const rows = hasHeader ? cells.slice(1) : cells;

@ -117,7 +103,7 @@ const transposeCells = (cells: string[][]) => {
 };

 export const tryParseSpreadsheet = (text: string): ParseSpreadsheetResult => {
-  // Copy/paste from excel, spreadsheets, tsv, csv.
+  // Copy/paste from excel, spreadhseets, tsv, csv.
  // For now we only accept 2 columns with an optional header

  // Check for tab separated values
@ -175,8 +161,7 @@ const commonProps = {
  strokeSharpness: "sharp",
  strokeStyle: "solid",
  strokeWidth: 1,
-  verticalAlign: VERTICAL_ALIGN.MIDDLE,
-  locked: false,
+  verticalAlign: "middle",
 } as const;

 const getChartDimentions = (spreadsheet: Spreadsheet) => {
--- a/src/clipboard.ts
+++ b/src/clipboard.ts
@ -2,23 +2,20 @@ import {
  ExcalidrawElement,
  NonDeletedExcalidrawElement,
 } from "./element/types";
-import { AppState, BinaryFiles } from "./types";
+import { getSelectedElements } from "./scene";
+import { AppState } from "./types";
 import { SVG_EXPORT_TAG } from "./scene/export";
 import { tryParseSpreadsheet, Spreadsheet, VALID_SPREADSHEET } from "./charts";
-import { EXPORT_DATA_TYPES, MIME_TYPES } from "./constants";
-import { isInitializedImageElement } from "./element/typeChecks";
-import { isPromiseLike } from "./utils";
+import { EXPORT_DATA_TYPES } from "./constants";

 type ElementsClipboard = {
  type: typeof EXPORT_DATA_TYPES.excalidrawClipboard;
-  elements: readonly NonDeletedExcalidrawElement[];
-  files: BinaryFiles | undefined;
+  elements: ExcalidrawElement[];
 };

 export interface ClipboardData {
  spreadsheet?: Spreadsheet;
  elements?: readonly ExcalidrawElement[];
-  files?: BinaryFiles;
  text?: string;
  errorMessage?: string;
 }
@ -40,7 +37,7 @@ export const probablySupportsClipboardBlob =

 const clipboardContainsElements = (
  contents: any,
-): contents is { elements: ExcalidrawElement[]; files?: BinaryFiles } => {
+): contents is { elements: ExcalidrawElement[] } => {
  if (
    [
      EXPORT_DATA_TYPES.excalidraw,
@ -56,27 +53,17 @@ const clipboardContainsElements = (
 export const copyToClipboard = async (
  elements: readonly NonDeletedExcalidrawElement[],
  appState: AppState,
-  files: BinaryFiles | null,
 ) => {
-  // select binded text elements when copying
  const contents: ElementsClipboard = {
    type: EXPORT_DATA_TYPES.excalidrawClipboard,
-    elements,
-    files: files
-      ? elements.reduce((acc, element) => {
-          if (isInitializedImageElement(element) && files[element.fileId]) {
-            acc[element.fileId] = files[element.fileId];
-          }
-          return acc;
-        }, {} as BinaryFiles)
-      : undefined,
+    elements: getSelectedElements(elements, appState),
  };
  const json = JSON.stringify(contents);
  CLIPBOARD = json;
  try {
    PREFER_APP_CLIPBOARD = false;
    await copyTextToSystemClipboard(json);
-  } catch (error: any) {
+  } catch (error) {
    PREFER_APP_CLIPBOARD = true;
    console.error(error);
  }
@ -89,7 +76,7 @@ const getAppClipboard = (): Partial<ElementsClipboard> => {

  try {
    return JSON.parse(CLIPBOARD);
-  } catch (error: any) {
+  } catch (error) {
    console.error(error);
    return {};
  }
@ -125,7 +112,7 @@ const getSystemClipboard = async (
 };

 /**
- * Attempts to parse clipboard. Prefers system clipboard.
+ * Attemps to parse clipboard. Prefers system clipboard.
 */
 export const parseClipboard = async (
  event: ClipboardEvent | null,
@ -151,10 +138,7 @@ export const parseClipboard = async (
  try {
    const systemClipboardData = JSON.parse(systemClipboard);
    if (clipboardContainsElements(systemClipboardData)) {
-      return {
-        elements: systemClipboardData.elements,
-        files: systemClipboardData.files,
-      };
+      return { elements: systemClipboardData.elements };
    }
    return appClipboardData;
  } catch {
@ -167,35 +151,10 @@ export const parseClipboard = async (
  }
 };

-export const copyBlobToClipboardAsPng = async (blob: Blob | Promise<Blob>) => {
-  let promise;
-  try {
-    // in Safari so far we need to construct the ClipboardItem synchronously
-    // (i.e. in the same tick) otherwise browser will complain for lack of
-    // user intent. Using a Promise ClipboardItem constructor solves this.
-    // https://bugs.webkit.org/show_bug.cgi?id=222262
-    //
-    // not await so that we can detect whether the thrown error likely relates
-    // to a lack of support for the Promise ClipboardItem constructor
-    promise = navigator.clipboard.write([
-      new window.ClipboardItem({
-        [MIME_TYPES.png]: blob,
-      }),
-    ]);
-  } catch (error: any) {
-    // if we're using a Promise ClipboardItem, let's try constructing
-    // with resolution value instead
-    if (isPromiseLike(blob)) {
-      await navigator.clipboard.write([
-        new window.ClipboardItem({
-          [MIME_TYPES.png]: await blob,
-        }),
-      ]);
-    } else {
-      throw error;
-    }
-  }
-  await promise;
+export const copyBlobToClipboardAsPng = async (blob: Blob) => {
+  await navigator.clipboard.write([
+    new window.ClipboardItem({ "image/png": blob }),
+  ]);
 };

 export const copyTextToSystemClipboard = async (text: string | null) => {
@ -206,7 +165,7 @@ export const copyTextToSystemClipboard = async (text: string | null) => {
      // not focused
      await navigator.clipboard.writeText(text || "");
      copied = true;
-    } catch (error: any) {
+    } catch (error) {
      console.error(error);
    }
  }
@ -246,7 +205,7 @@ const copyTextViaExecCommand = (text: string) => {
    textarea.setSelectionRange(0, textarea.value.length);

    success = document.execCommand("copy");
-  } catch (error: any) {
+  } catch (error) {
    console.error(error);
  }

--- a/src/components/Actions.tsx
+++ b/src/components/Actions.tsx
@ -1,9 +1,9 @@
 import React from "react";
 import { ActionManager } from "../actions/manager";
 import { getNonDeletedElements } from "../element";
-import { ExcalidrawElement, PointerType } from "../element/types";
+import { ExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
-import { useDevice } from "../components/App";
+import { useIsMobile } from "../components/App";
 import {
  canChangeSharpness,
  canHaveArrowheads,
@ -15,87 +15,54 @@ import {
 } from "../scene";
 import { SHAPES } from "../shapes";
 import { AppState, Zoom } from "../types";
-import {
-  capitalizeString,
-  isTransparent,
-  updateActiveTool,
-  setCursorForShape,
-} from "../utils";
+import { capitalizeString, isTransparent, setCursorForShape } from "../utils";
 import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
-import { hasStrokeColor } from "../scene/comparisons";
-import { trackEvent } from "../analytics";
-import { hasBoundTextElement, isBoundToContainer } from "../element/typeChecks";

 export const SelectedShapeActions = ({
  appState,
  elements,
  renderAction,
-  activeTool,
+  elementType,
 }: {
  appState: AppState;
  elements: readonly ExcalidrawElement[];
  renderAction: ActionManager["renderAction"];
-  activeTool: AppState["activeTool"]["type"];
+  elementType: ExcalidrawElement["type"];
 }) => {
  const targetElements = getTargetElements(
    getNonDeletedElements(elements),
    appState,
  );
-
-  let isSingleElementBoundContainer = false;
-  if (
-    targetElements.length === 2 &&
-    (hasBoundTextElement(targetElements[0]) ||
-      hasBoundTextElement(targetElements[1]))
-  ) {
-    isSingleElementBoundContainer = true;
-  }
  const isEditing = Boolean(appState.editingElement);
-  const device = useDevice();
+  const isMobile = useIsMobile();
  const isRTL = document.documentElement.getAttribute("dir") === "rtl";

  const showFillIcons =
-    hasBackground(activeTool) ||
+    hasBackground(elementType) ||
    targetElements.some(
      (element) =>
        hasBackground(element.type) && !isTransparent(element.backgroundColor),
    );
  const showChangeBackgroundIcons =
-    hasBackground(activeTool) ||
+    hasBackground(elementType) ||
    targetElements.some((element) => hasBackground(element.type));

-  const showLinkIcon =
-    targetElements.length === 1 || isSingleElementBoundContainer;
-
-  let commonSelectedType: string | null = targetElements[0]?.type || null;
-
-  for (const element of targetElements) {
-    if (element.type !== commonSelectedType) {
-      commonSelectedType = null;
-      break;
-    }
-  }
-
  return (
    <div className="panelColumn">
-      {((hasStrokeColor(activeTool) &&
-        activeTool !== "image" &&
-        commonSelectedType !== "image") ||
-        targetElements.some((element) => hasStrokeColor(element.type))) &&
-        renderAction("changeStrokeColor")}
+      {renderAction("changeStrokeColor")}
      {showChangeBackgroundIcons && renderAction("changeBackgroundColor")}
      {showFillIcons && renderAction("changeFillStyle")}

-      {(hasStrokeWidth(activeTool) ||
+      {(hasStrokeWidth(elementType) ||
        targetElements.some((element) => hasStrokeWidth(element.type))) &&
        renderAction("changeStrokeWidth")}

-      {(activeTool === "freedraw" ||
+      {(elementType === "freedraw" ||
        targetElements.some((element) => element.type === "freedraw")) &&
        renderAction("changeStrokeShape")}

-      {(hasStrokeStyle(activeTool) ||
+      {(hasStrokeStyle(elementType) ||
        targetElements.some((element) => hasStrokeStyle(element.type))) && (
        <>
          {renderAction("changeStrokeStyle")}
@ -103,12 +70,12 @@ export const SelectedShapeActions = ({
        </>
      )}

-      {(canChangeSharpness(activeTool) ||
+      {(canChangeSharpness(elementType) ||
        targetElements.some((element) => canChangeSharpness(element.type))) && (
        <>{renderAction("changeSharpness")}</>
      )}

-      {(hasText(activeTool) ||
+      {(hasText(elementType) ||
        targetElements.some((element) => hasText(element.type))) && (
        <>
          {renderAction("changeFontSize")}
@ -119,11 +86,7 @@ export const SelectedShapeActions = ({
        </>
      )}

-      {targetElements.some(
-        (element) =>
-          hasBoundTextElement(element) || isBoundToContainer(element),
-      ) && renderAction("changeVerticalAlign")}
-      {(canHaveArrowheads(activeTool) ||
+      {(canHaveArrowheads(elementType) ||
        targetElements.some((element) => canHaveArrowheads(element.type))) && (
        <>{renderAction("changeArrowhead")}</>
      )}
@ -140,7 +103,7 @@ export const SelectedShapeActions = ({
        </div>
      </fieldset>

-      {targetElements.length > 1 && !isSingleElementBoundContainer && (
+      {targetElements.length > 1 && (
        <fieldset>
          <legend>{t("labels.align")}</legend>
          <div className="buttonList">
@ -173,15 +136,14 @@ export const SelectedShapeActions = ({
          </div>
        </fieldset>
      )}
-      {!isEditing && targetElements.length > 0 && (
+      {!isMobile && !isEditing && targetElements.length > 0 && (
        <fieldset>
          <legend>{t("labels.actions")}</legend>
          <div className="buttonList">
-            {!device.isMobile && renderAction("duplicateSelection")}
-            {!device.isMobile && renderAction("deleteSelectedElements")}
+            {renderAction("duplicateSelection")}
+            {renderAction("deleteSelectedElements")}
            {renderAction("group")}
            {renderAction("ungroup")}
-            {showLinkIcon && renderAction("hyperlink")}
          </div>
        </fieldset>
      )}
@ -191,64 +153,41 @@ export const SelectedShapeActions = ({

 export const ShapesSwitcher = ({
  canvas,
-  activeTool,
+  elementType,
  setAppState,
-  onImageAction,
-  appState,
 }: {
  canvas: HTMLCanvasElement | null;
-  activeTool: AppState["activeTool"];
+  elementType: ExcalidrawElement["type"];
  setAppState: React.Component<any, AppState>["setState"];
-  onImageAction: (data: { pointerType: PointerType | null }) => void;
-  appState: AppState;
 }) => (
  <>
    {SHAPES.map(({ value, icon, key }, index) => {
      const label = t(`toolBar.${value}`);
-      const letter = key && (typeof key === "string" ? key : key[0]);
-      const shortcut = letter
-        ? `${capitalizeString(letter)} ${t("helpDialog.or")} ${index + 1}`
-        : `${index + 1}`;
+      const letter = typeof key === "string" ? key : key[0];
+      const shortcut = `${capitalizeString(letter)} ${t("helpDialog.or")} ${
+        index + 1
+      }`;
      return (
        <ToolButton
          className="Shape"
          key={value}
          type="radio"
          icon={icon}
-          checked={activeTool.type === value}
+          checked={elementType === value}
          name="editor-current-shape"
          title={`${capitalizeString(label)} — ${shortcut}`}
          keyBindingLabel={`${index + 1}`}
          aria-label={capitalizeString(label)}
          aria-keyshortcuts={shortcut}
          data-testid={value}
-          onPointerDown={({ pointerType }) => {
-            if (!appState.penDetected && pointerType === "pen") {
-              setAppState({
-                penDetected: true,
-                penMode: true,
-              });
-            }
-          }}
-          onChange={({ pointerType }) => {
-            if (appState.activeTool.type !== value) {
-              trackEvent("toolbar", value, "ui");
-            }
-            const nextActiveTool = updateActiveTool(appState, {
-              type: value,
-            });
+          onChange={() => {
            setAppState({
-              activeTool: nextActiveTool,
+              elementType: value,
              multiElement: null,
              selectedElementIds: {},
            });
-            setCursorForShape(canvas, {
-              ...appState,
-              activeTool: nextActiveTool,
-            });
-            if (value === "image") {
-              onImageAction({ pointerType });
-            }
+            setCursorForShape(canvas, value);
+            setAppState({});
          }}
        />
      );
--- a/src/components/ActiveFile.tsx
+++ b/src/components/ActiveFile.tsx
@ -1,3 +1,4 @@
+import React from "react";
 import Stack from "../components/Stack";
 import { ToolButton } from "../components/ToolButton";
 import { save, file } from "../components/icons";
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
--- a/src/components/Avatar.scss
+++ b/src/components/Avatar.scss
@ -12,11 +12,5 @@
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
-
-    &-img {
-      width: 100%;
-      height: 100%;
-      border-radius: 100%;
-    }
  }
 }
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@ -1,36 +1,20 @@
 import "./Avatar.scss";

-import React, { useState } from "react";
-import { getClientInitials } from "../clients";
+import React from "react";

 type AvatarProps = {
+  children: string;
  onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
  color: string;
  border: string;
-  name: string;
-  src?: string;
 };

-export const Avatar = ({ color, border, onClick, name, src }: AvatarProps) => {
-  const shortName = getClientInitials(name);
-  const [error, setError] = useState(false);
-  const loadImg = !error && src;
-  const style = loadImg
-    ? undefined
-    : { background: color, border: `1px solid ${border}` };
-  return (
-    <div className="Avatar" style={style} onClick={onClick}>
-      {loadImg ? (
-        <img
-          className="Avatar-img"
-          src={src}
-          alt={shortName}
-          referrerPolicy="no-referrer"
-          onError={() => setError(true)}
-        />
-      ) : (
-        shortName
-      )}
-    </div>
-  );
-};
+export const Avatar = ({ children, color, border, onClick }: AvatarProps) => (
+  <div
+    className="Avatar"
+    style={{ background: color, border: `1px solid ${border}` }}
+    onClick={onClick}
+  >
+    {children}
+  </div>
+);
--- a/src/components/ButtonIconSelect.tsx
+++ b/src/components/ButtonIconSelect.tsx
@ -1,3 +1,4 @@
+import React from "react";
 import clsx from "clsx";

 // TODO: It might be "clever" to add option.icon to the existing component <ButtonSelect />
@ -7,7 +8,7 @@ export const ButtonIconSelect = <T extends Object>({
  onChange,
  group,
 }: {
-  options: { value: T; text: string; icon: JSX.Element; testId?: string }[];
+  options: { value: T; text: string; icon: JSX.Element }[];
  value: T | null;
  onChange: (value: T) => void;
  group: string;
@ -24,7 +25,6 @@ export const ButtonIconSelect = <T extends Object>({
          name={group}
          onChange={() => onChange(option.value)}
          checked={value === option.value}
-          data-testid={option.testId}
        />
        {option.icon}
      </label>
--- a/src/components/ButtonSelect.tsx
+++ b/src/components/ButtonSelect.tsx
@ -1,3 +1,4 @@
+import React from "react";
 import clsx from "clsx";

 export const ButtonSelect = <T extends Object>({
--- a/src/components/Card.scss
+++ b/src/components/Card.scss
@ -48,10 +48,6 @@
      .ToolIcon__label {
        color: $oc-white;
      }
-
-      .Spinner {
-        --spinner-color: #fff;
-      }
    }
  }
 }
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@ -3,22 +3,15 @@ import OpenColor from "open-color";
 import "./Card.scss";

 export const Card: React.FC<{
-  color: keyof OpenColor | "primary";
+  color: keyof OpenColor;
 }> = ({ children, color }) => {
  return (
    <div
      className="Card"
      style={{
-        ["--card-color" as any]:
-          color === "primary" ? "var(--color-primary)" : OpenColor[color][7],
-        ["--card-color-darker" as any]:
-          color === "primary"
-            ? "var(--color-primary-darker)"
-            : OpenColor[color][8],
-        ["--card-color-darkest" as any]:
-          color === "primary"
-            ? "var(--color-primary-darkest)"
-            : OpenColor[color][9],
+        ["--card-color" as any]: OpenColor[color][7],
+        ["--card-color-darker" as any]: OpenColor[color][8],
+        ["--card-color-darkest" as any]: OpenColor[color][9],
      }}
    >
      {children}
--- a/src/components/CheckboxItem.tsx
+++ b/src/components/CheckboxItem.tsx
@ -6,19 +6,16 @@ import "./CheckboxItem.scss";

 export const CheckboxItem: React.FC<{
  checked: boolean;
-  onChange: (checked: boolean, event: React.MouseEvent) => void;
-  className?: string;
-}> = ({ children, checked, onChange, className }) => {
+  onChange: (checked: boolean) => void;
+}> = ({ children, checked, onChange }) => {
  return (
    <div
-      className={clsx("Checkbox", className, { "is-checked": checked })}
+      className={clsx("Checkbox", { "is-checked": checked })}
      onClick={(event) => {
-        onChange(!checked, event);
-        (
-          (event.currentTarget as HTMLDivElement).querySelector(
-            ".Checkbox-box",
-          ) as HTMLButtonElement
-        ).focus();
+        onChange(!checked);
+        ((event.currentTarget as HTMLDivElement).querySelector(
+          ".Checkbox-box",
+        ) as HTMLButtonElement).focus();
      }}
    >
      <button className="Checkbox-box" role="checkbox" aria-checked={checked}>
--- a/src/components/ClearCanvas.tsx
+++ b/src/components/ClearCanvas.tsx
@ -1,43 +0,0 @@
-import { useState } from "react";
-import { t } from "../i18n";
-import { useDevice } from "./App";
-import { trash } from "./icons";
-import { ToolButton } from "./ToolButton";
-
-import ConfirmDialog from "./ConfirmDialog";
-
-const ClearCanvas = ({ onConfirm }: { onConfirm: () => void }) => {
-  const [showDialog, setShowDialog] = useState(false);
-  const toggleDialog = () => {
-    setShowDialog(!showDialog);
-  };
-
-  return (
-    <>
-      <ToolButton
-        type="button"
-        icon={trash}
-        title={t("buttons.clearReset")}
-        aria-label={t("buttons.clearReset")}
-        showAriaLabel={useDevice().isMobile}
-        onClick={toggleDialog}
-        data-testid="clear-canvas-button"
-      />
-
-      {showDialog && (
-        <ConfirmDialog
-          onConfirm={() => {
-            onConfirm();
-            toggleDialog();
-          }}
-          onCancel={toggleDialog}
-          title={t("clearCanvasDialog.title")}
-        >
-          <p className="clear-canvas__content"> {t("alerts.clearReset")}</p>
-        </ConfirmDialog>
-      )}
-    </>
-  );
-};
-
-export default ClearCanvas;
--- a/src/components/CollabButton.scss
+++ b/src/components/CollabButton.scss
@ -18,15 +18,13 @@
      left: -5px;
    }
    min-width: 1em;
-    min-height: 1em;
-    line-height: 1;
    position: absolute;
    bottom: -5px;
    padding: 3px;
    border-radius: 50%;
    background-color: $oc-green-6;
    color: $oc-white;
-    font-size: 0.6em;
-    font-family: "Cascadia";
+    font-size: 0.7em;
+    font-family: var(--ui-font);
  }
 }
--- a/src/components/CollabButton.tsx
+++ b/src/components/CollabButton.tsx
@ -1,7 +1,8 @@
+import React from "react";
 import clsx from "clsx";
 import { ToolButton } from "./ToolButton";
 import { t } from "../i18n";
-import { useDevice } from "../components/App";
+import { useIsMobile } from "../components/App";
 import { users } from "./icons";

 import "./CollabButton.scss";
@ -26,9 +27,9 @@ const CollabButton = ({
        type="button"
        title={t("labels.liveCollaboration")}
        aria-label={t("labels.liveCollaboration")}
-        showAriaLabel={useDevice().isMobile}
+        showAriaLabel={useIsMobile()}
      >
-        {isCollaborating && (
+        {collaboratorCount > 0 && (
          <div className="CollabButton-collaborators">{collaboratorCount}</div>
        )}
      </ToolButton>
--- a/src/components/ColorPicker.scss
+++ b/src/components/ColorPicker.scss
@ -46,7 +46,7 @@
    top: -11px;
  }

-  .color-picker-content--default {
+  .color-picker-content {
    padding: 0.5rem;
    display: grid;
    grid-template-columns: repeat(5, auto);
@ -59,26 +59,6 @@
    }
  }

-  .color-picker-content--canvas {
-    display: flex;
-    flex-direction: column;
-    padding: 0.25rem;
-
-    &-title {
-      color: $oc-gray-6;
-      font-size: 12px;
-      padding: 0 0.25rem;
-    }
-
-    &-colors {
-      padding: 0.5rem 0;
-
-      .color-picker-swatch {
-        margin: 0 0.25rem;
-      }
-    }
-  }
-
  .color-picker-content .color-input-container {
    grid-column: 1 / span 5;
  }
--- a/src/components/ColorPicker.tsx
+++ b/src/components/ColorPicker.tsx
@ -7,53 +7,6 @@ import { isArrowKey, KEYS } from "../keys";
 import { t, getLanguage } from "../i18n";
 import { isWritableElement } from "../utils";
 import colors from "../colors";
-import { ExcalidrawElement } from "../element/types";
-import { AppState } from "../types";
-
-const MAX_CUSTOM_COLORS = 5;
-const MAX_DEFAULT_COLORS = 15;
-
-export const getCustomColors = (
-  elements: readonly ExcalidrawElement[],
-  type: "elementBackground" | "elementStroke",
-) => {
-  const customColors: string[] = [];
-  const updatedElements = elements
-    .filter((element) => !element.isDeleted)
-    .sort((ele1, ele2) => ele2.updated - ele1.updated);
-
-  let index = 0;
-  const elementColorTypeMap = {
-    elementBackground: "backgroundColor",
-    elementStroke: "strokeColor",
-  };
-  const colorType = elementColorTypeMap[type] as
-    | "backgroundColor"
-    | "strokeColor";
-  while (
-    index < updatedElements.length &&
-    customColors.length < MAX_CUSTOM_COLORS
-  ) {
-    const element = updatedElements[index];
-
-    if (
-      customColors.length < MAX_CUSTOM_COLORS &&
-      isCustomColor(element[colorType], type) &&
-      !customColors.includes(element[colorType])
-    ) {
-      customColors.push(element[colorType]);
-    }
-    index++;
-  }
-  return customColors;
-};
-
-const isCustomColor = (
-  color: string,
-  type: "elementBackground" | "elementStroke",
-) => {
-  return !colors[type].includes(color);
-};

 const isValidColor = (color: string) => {
  const style = new Option().style;
@ -82,7 +35,6 @@ const keyBindings = [
  ["1", "2", "3", "4", "5"],
  ["q", "w", "e", "r", "t"],
  ["a", "s", "d", "f", "g"],
-  ["z", "x", "c", "v", "b"],
 ].flat();

 const Picker = ({
@ -93,7 +45,6 @@ const Picker = ({
  label,
  showInput = true,
  type,
-  elements,
 }: {
  colors: string[];
  color: string | null;
@ -102,20 +53,12 @@ const Picker = ({
  label: string;
  showInput: boolean;
  type: "canvasBackground" | "elementBackground" | "elementStroke";
-  elements: readonly ExcalidrawElement[];
 }) => {
  const firstItem = React.useRef<HTMLButtonElement>();
  const activeItem = React.useRef<HTMLButtonElement>();
  const gallery = React.useRef<HTMLDivElement>();
  const colorInput = React.useRef<HTMLInputElement>();

-  const [customColors] = React.useState(() => {
-    if (type === "canvasBackground") {
-      return [];
-    }
-    return getCustomColors(elements, type);
-  });
-
  React.useEffect(() => {
    // After the component is first mounted focus on first input
    if (activeItem.current) {
@ -128,119 +71,52 @@ const Picker = ({
  }, []);

  const handleKeyDown = (event: React.KeyboardEvent) => {
-    let handled = false;
-    if (isArrowKey(event.key)) {
-      handled = true;
+    if (event.key === KEYS.TAB) {
+      const { activeElement } = document;
+      if (event.shiftKey) {
+        if (activeElement === firstItem.current) {
+          colorInput.current?.focus();
+          event.preventDefault();
+        }
+      } else if (activeElement === colorInput.current) {
+        firstItem.current?.focus();
+        event.preventDefault();
+      }
+    } else if (isArrowKey(event.key)) {
      const { activeElement } = document;
      const isRTL = getLanguage().rtl;
-      let isCustom = false;
-      let index = Array.prototype.indexOf.call(
-        gallery.current!.querySelector(".color-picker-content--default")
-          ?.children,
+      const index = Array.prototype.indexOf.call(
+        gallery!.current!.children,
        activeElement,
      );
-      if (index === -1) {
-        index = Array.prototype.indexOf.call(
-          gallery.current!.querySelector(".color-picker-content--canvas-colors")
-            ?.children,
-          activeElement,
-        );
-        if (index !== -1) {
-          isCustom = true;
-        }
-      }
-      const parentElement = isCustom
-        ? gallery.current?.querySelector(".color-picker-content--canvas-colors")
-        : gallery.current?.querySelector(".color-picker-content--default");
-
-      if (parentElement && index !== -1) {
-        const length = parentElement.children.length - (showInput ? 1 : 0);
+      if (index !== -1) {
+        const length = gallery!.current!.children.length - (showInput ? 1 : 0);
        const nextIndex =
          event.key === (isRTL ? KEYS.ARROW_LEFT : KEYS.ARROW_RIGHT)
            ? (index + 1) % length
            : event.key === (isRTL ? KEYS.ARROW_RIGHT : KEYS.ARROW_LEFT)
            ? (length + index - 1) % length
-            : !isCustom && event.key === KEYS.ARROW_DOWN
+            : event.key === KEYS.ARROW_DOWN
            ? (index + 5) % length
-            : !isCustom && event.key === KEYS.ARROW_UP
+            : event.key === KEYS.ARROW_UP
            ? (length + index - 5) % length
            : index;
-        (parentElement.children[nextIndex] as HTMLElement | undefined)?.focus();
+        (gallery!.current!.children![nextIndex] as any).focus();
      }
      event.preventDefault();
    } else if (
      keyBindings.includes(event.key.toLowerCase()) &&
-      !event[KEYS.CTRL_OR_CMD] &&
-      !event.altKey &&
      !isWritableElement(event.target)
    ) {
-      handled = true;
      const index = keyBindings.indexOf(event.key.toLowerCase());
-      const isCustom = index >= MAX_DEFAULT_COLORS;
-      const parentElement = isCustom
-        ? gallery?.current?.querySelector(
-            ".color-picker-content--canvas-colors",
-          )
-        : gallery?.current?.querySelector(".color-picker-content--default");
-      const actualIndex = isCustom ? index - MAX_DEFAULT_COLORS : index;
-      (
-        parentElement?.children[actualIndex] as HTMLElement | undefined
-      )?.focus();
-
+      (gallery!.current!.children![index] as any).focus();
      event.preventDefault();
    } else if (event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) {
-      handled = true;
      event.preventDefault();
      onClose();
    }
-    if (handled) {
-      event.nativeEvent.stopImmediatePropagation();
-      event.stopPropagation();
-    }
-  };
-
-  const renderColors = (colors: Array<string>, custom: boolean = false) => {
-    return colors.map((_color, i) => {
-      const _colorWithoutHash = _color.replace("#", "");
-      const keyBinding = custom
-        ? keyBindings[i + MAX_DEFAULT_COLORS]
-        : keyBindings[i];
-      const label = custom
-        ? _colorWithoutHash
-        : t(`colors.${_colorWithoutHash}`);
-      return (
-        <button
-          className="color-picker-swatch"
-          onClick={(event) => {
-            (event.currentTarget as HTMLButtonElement).focus();
-            onChange(_color);
-          }}
-          title={`${label}${
-            !isTransparent(_color) ? ` (${_color})` : ""
-          } — ${keyBinding.toUpperCase()}`}
-          aria-label={label}
-          aria-keyshortcuts={keyBindings[i]}
-          style={{ color: _color }}
-          key={_color}
-          ref={(el) => {
-            if (!custom && el && i === 0) {
-              firstItem.current = el;
-            }
-            if (el && _color === color) {
-              activeItem.current = el;
-            }
-          }}
-          onFocus={() => {
-            onChange(_color);
-          }}
-        >
-          {isTransparent(_color) ? (
-            <div className="color-picker-transparent"></div>
-          ) : undefined}
-          <span className="color-picker-keybinding">{keyBinding}</span>
-        </button>
-      );
-    });
+    event.nativeEvent.stopImmediatePropagation();
+    event.stopPropagation();
  };

  return (
@ -260,23 +136,43 @@ const Picker = ({
            gallery.current = el;
          }
        }}
-        // to allow focusing by clicking but not by tabbing
-        tabIndex={-1}
+        tabIndex={0}
      >
-        <div className="color-picker-content--default">
-          {renderColors(colors)}
-        </div>
-        {!!customColors.length && (
-          <div className="color-picker-content--canvas">
-            <span className="color-picker-content--canvas-title">
-              {t("labels.canvasColors")}
-            </span>
-            <div className="color-picker-content--canvas-colors">
-              {renderColors(customColors, true)}
-            </div>
-          </div>
-        )}
-
+        {colors.map((_color, i) => {
+          const _colorWithoutHash = _color.replace("#", "");
+          return (
+            <button
+              className="color-picker-swatch"
+              onClick={(event) => {
+                (event.currentTarget as HTMLButtonElement).focus();
+                onChange(_color);
+              }}
+              title={`${t(`colors.${_colorWithoutHash}`)}${
+                !isTransparent(_color) ? ` (${_color})` : ""
+              } — ${keyBindings[i].toUpperCase()}`}
+              aria-label={t(`colors.${_colorWithoutHash}`)}
+              aria-keyshortcuts={keyBindings[i]}
+              style={{ color: _color }}
+              key={_color}
+              ref={(el) => {
+                if (el && i === 0) {
+                  firstItem.current = el;
+                }
+                if (el && _color === color) {
+                  activeItem.current = el;
+                }
+              }}
+              onFocus={() => {
+                onChange(_color);
+              }}
+            >
+              {isTransparent(_color) ? (
+                <div className="color-picker-transparent"></div>
+              ) : undefined}
+              <span className="color-picker-keybinding">{keyBindings[i]}</span>
+            </button>
+          );
+        })}
        {showInput && (
          <ColorInput
            color={color}
@ -350,8 +246,6 @@ export const ColorPicker = ({
  label,
  isActive,
  setActive,
-  elements,
-  appState,
 }: {
  type: "canvasBackground" | "elementBackground" | "elementStroke";
  color: string | null;
@ -359,8 +253,6 @@ export const ColorPicker = ({
  label: string;
  isActive: boolean;
  setActive: (active: boolean) => void;
-  elements: readonly ExcalidrawElement[];
-  appState: AppState;
 }) => {
  const pickerButton = React.useRef<HTMLButtonElement>(null);

@ -402,7 +294,6 @@ export const ColorPicker = ({
              label={label}
              showInput={false}
              type={type}
-              elements={elements}
            />
          </Popover>
        ) : null}
--- a/src/components/ConfirmDialog.scss
+++ b/src/components/ConfirmDialog.scss
@ -1,37 +0,0 @@
-@import "../css/variables.module";
-
-.excalidraw {
-  .confirm-dialog {
-    &-buttons {
-      display: flex;
-      padding: 0.2rem 0;
-      justify-content: flex-end;
-    }
-    .ToolIcon__icon {
-      min-width: 2.5rem;
-      width: auto;
-      font-size: 1rem;
-    }
-
-    .ToolIcon_type_button {
-      margin-left: 0.8rem;
-      padding: 0 0.5rem;
-    }
-
-    &__content {
-      font-size: 1rem;
-    }
-
-    &--confirm.ToolIcon_type_button {
-      background-color: $oc-red-6;
-
-      &:hover {
-        background-color: $oc-red-8;
-      }
-
-      .ToolIcon__icon {
-        color: $oc-white;
-      }
-    }
-  }
-}
--- a/src/components/ConfirmDialog.tsx
+++ b/src/components/ConfirmDialog.tsx
@ -1,52 +0,0 @@
-import { t } from "../i18n";
-import { Dialog, DialogProps } from "./Dialog";
-import { ToolButton } from "./ToolButton";
-
-import "./ConfirmDialog.scss";
-
-interface Props extends Omit<DialogProps, "onCloseRequest"> {
-  onConfirm: () => void;
-  onCancel: () => void;
-  confirmText?: string;
-  cancelText?: string;
-}
-const ConfirmDialog = (props: Props) => {
-  const {
-    onConfirm,
-    onCancel,
-    children,
-    confirmText = t("buttons.confirm"),
-    cancelText = t("buttons.cancel"),
-    className = "",
-    ...rest
-  } = props;
-  return (
-    <Dialog
-      onCloseRequest={onCancel}
-      small={true}
-      {...rest}
-      className={`confirm-dialog ${className}`}
-    >
-      {children}
-      <div className="confirm-dialog-buttons">
-        <ToolButton
-          type="button"
-          title={cancelText}
-          aria-label={cancelText}
-          label={cancelText}
-          onClick={onCancel}
-          className="confirm-dialog--cancel"
-        />
-        <ToolButton
-          type="button"
-          title={confirmText}
-          aria-label={confirmText}
-          label={confirmText}
-          onClick={onConfirm}
-          className="confirm-dialog--confirm"
-        />
-      </div>
-    </Dialog>
-  );
-};
-export default ConfirmDialog;
--- a/src/components/ContextMenu.tsx
+++ b/src/components/ContextMenu.tsx
@ -1,3 +1,4 @@
+import React from "react";
 import { render, unmountComponentAtNode } from "react-dom";
 import clsx from "clsx";
 import { Popover } from "./Popover";
@ -11,7 +12,6 @@ import {
 import { Action } from "../actions/types";
 import { ActionManager } from "../actions/manager";
 import { AppState } from "../types";
-import { NonDeletedExcalidrawElement } from "../element/types";

 export type ContextMenuOption = "separator" | Action;

@ -22,7 +22,6 @@ type ContextMenuProps = {
  left: number;
  actionManager: ActionManager;
  appState: Readonly<AppState>;
-  elements: readonly NonDeletedExcalidrawElement[];
 };

 const ContextMenu = ({
@ -32,7 +31,6 @@ const ContextMenu = ({
  left,
  actionManager,
  appState,
-  elements,
 }: ContextMenuProps) => {
  return (
    <Popover
@ -40,10 +38,6 @@ const ContextMenu = ({
      top={top}
      left={left}
      fitInViewport={true}
-      offsetLeft={appState.offsetLeft}
-      offsetTop={appState.offsetTop}
-      viewportWidth={appState.width}
-      viewportHeight={appState.height}
    >
      <ul
        className="context-menu"
@ -55,14 +49,9 @@ const ContextMenu = ({
          }

          const actionName = option.name;
-          let label = "";
-          if (option.contextItemLabel) {
-            if (typeof option.contextItemLabel === "function") {
-              label = t(option.contextItemLabel(elements, appState));
-            } else {
-              label = t(option.contextItemLabel);
-            }
-          }
+          const label = option.contextItemLabel
+            ? t(option.contextItemLabel)
+            : "";
          return (
            <li key={idx} data-testid={actionName} onClick={onCloseRequest}>
              <button
@ -70,9 +59,7 @@ const ContextMenu = ({
                  dangerous: actionName === "deleteSelectedElements",
                  checkmark: option.checked?.(appState),
                })}
-                onClick={() =>
-                  actionManager.executeAction(option, "contextMenu")
-                }
+                onClick={() => actionManager.executeAction(option)}
              >
                <div className="context-menu-option__label">{label}</div>
                <kbd className="context-menu-option__shortcut">
@ -111,7 +98,6 @@ type ContextMenuParams = {
  actionManager: ContextMenuProps["actionManager"];
  appState: Readonly<AppState>;
  container: HTMLElement;
-  elements: readonly NonDeletedExcalidrawElement[];
 };

 const handleClose = (container: HTMLElement) => {
@ -140,7 +126,6 @@ export default {
          onCloseRequest={() => handleClose(params.container)}
          actionManager={params.actionManager}
          appState={params.appState}
-          elements={params.elements}
        />,
        getContextMenuNode(params.container),
      );
--- a/src/components/DarkModeToggle.tsx
+++ b/src/components/DarkModeToggle.tsx
@ -1,15 +1,16 @@
 import "./ToolIcon.scss";

+import React from "react";
 import { t } from "../i18n";
 import { ToolButton } from "./ToolButton";
-import { THEME } from "../constants";
-import { Theme } from "../element/types";
+
+export type Appearence = "light" | "dark";

 // We chose to use only explicit toggle and not a third option for system value,
 // but this could be added in the future.
 export const DarkModeToggle = (props: {
-  value: Theme;
-  onChange: (value: Theme) => void;
+  value: Appearence;
+  onChange: (value: Appearence) => void;
  title?: string;
 }) => {
  const title =
@ -19,12 +20,10 @@ export const DarkModeToggle = (props: {
  return (
    <ToolButton
      type="icon"
-      icon={props.value === THEME.LIGHT ? ICONS.MOON : ICONS.SUN}
+      icon={props.value === "light" ? ICONS.MOON : ICONS.SUN}
      title={title}
      aria-label={title}
-      onClick={() =>
-        props.onChange(props.value === THEME.DARK ? THEME.LIGHT : THEME.DARK)
-      }
+      onClick={() => props.onChange(props.value === "dark" ? "light" : "dark")}
      data-testid="toggle-dark-mode"
    />
  );
--- a/src/components/Dialog.tsx
+++ b/src/components/Dialog.tsx
@ -2,16 +2,15 @@ import clsx from "clsx";
 import React, { useEffect, useState } from "react";
 import { useCallbackRefState } from "../hooks/useCallbackRefState";
 import { t } from "../i18n";
-import { useExcalidrawContainer, useDevice } from "../components/App";
+import { useExcalidrawContainer, useIsMobile } from "../components/App";
 import { KEYS } from "../keys";
 import "./Dialog.scss";
 import { back, close } from "./icons";
 import { Island } from "./Island";
 import { Modal } from "./Modal";
 import { AppState } from "../types";
-import { queryFocusableElements } from "../utils";

-export interface DialogProps {
+export const Dialog = (props: {
  children: React.ReactNode;
  className?: string;
  small?: boolean;
@ -19,10 +18,7 @@ export interface DialogProps {
  title: React.ReactNode;
  autofocus?: boolean;
  theme?: AppState["theme"];
-  closeOnClickOutside?: boolean;
-}
-
-export const Dialog = (props: DialogProps) => {
+}) => {
  const [islandNode, setIslandNode] = useCallbackRefState<HTMLDivElement>();
  const [lastActiveElement] = useState(document.activeElement);
  const { id } = useExcalidrawContainer();
@ -65,6 +61,14 @@ export const Dialog = (props: DialogProps) => {
    return () => islandNode.removeEventListener("keydown", handleKeyDown);
  }, [islandNode, props.autofocus]);

+  const queryFocusableElements = (node: HTMLElement) => {
+    const focusableElements = node.querySelectorAll<HTMLElement>(
+      "button, a, input, select, textarea, div[tabindex]",
+    );
+
+    return focusableElements ? Array.from(focusableElements) : [];
+  };
+
  const onClose = () => {
    (lastActiveElement as HTMLElement).focus();
    props.onCloseRequest();
@ -77,7 +81,6 @@ export const Dialog = (props: DialogProps) => {
      maxWidth={props.small ? 550 : 800}
      onCloseRequest={onClose}
      theme={props.theme}
-      closeOnClickOutside={props.closeOnClickOutside}
    >
      <Island ref={setIslandNode}>
        <h2 id={`${id}-dialog-title`} className="Dialog__title">
@ -87,7 +90,7 @@ export const Dialog = (props: DialogProps) => {
            onClick={onClose}
            aria-label={t("buttons.close")}
          >
-            {useDevice().isMobile ? back : close}
+            {useIsMobile() ? back : close}
          </button>
        </h2>
        <div className="Dialog__content">{props.children}</div>
--- a/src/components/HelpDialog.tsx
+++ b/src/components/HelpDialog.tsx
@ -139,7 +139,7 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
        <Section title={t("helpDialog.shortcuts")}>
          <Columns>
            <Column>
-              <ShortcutIsland caption={t("helpDialog.tools")}>
+              <ShortcutIsland caption={t("helpDialog.shapes")}>
                <Shortcut
                  label={t("toolBar.selection")}
                  shortcuts={["V", "1"]}
@ -149,20 +149,14 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                  shortcuts={["R", "2"]}
                />
                <Shortcut label={t("toolBar.diamond")} shortcuts={["D", "3"]} />
-                <Shortcut label={t("toolBar.ellipse")} shortcuts={["O", "4"]} />
+                <Shortcut label={t("toolBar.ellipse")} shortcuts={["E", "4"]} />
                <Shortcut label={t("toolBar.arrow")} shortcuts={["A", "5"]} />
                <Shortcut label={t("toolBar.line")} shortcuts={["P", "6"]} />
                <Shortcut
                  label={t("toolBar.freedraw")}
-                  shortcuts={["Shift + P", "X", "7"]}
+                  shortcuts={["Shift+P", "7"]}
                />
                <Shortcut label={t("toolBar.text")} shortcuts={["T", "8"]} />
-                <Shortcut label={t("toolBar.image")} shortcuts={["9"]} />
-                <Shortcut label={t("toolBar.library")} shortcuts={["0"]} />
-                <Shortcut
-                  label={t("toolBar.eraser")}
-                  shortcuts={[getShortcutKey("E")]}
-                />
                <Shortcut
                  label={t("helpDialog.editSelectedShape")}
                  shortcuts={[
@ -209,10 +203,6 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                  label={t("helpDialog.preventBinding")}
                  shortcuts={[getShortcutKey("CtrlOrCmd")]}
                />
-                <Shortcut
-                  label={t("toolBar.link")}
-                  shortcuts={[getShortcutKey("CtrlOrCmd+K")]}
-                />
              </ShortcutIsland>
              <ShortcutIsland caption={t("helpDialog.view")}>
                <Shortcut
@ -268,18 +258,6 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                  label={t("labels.multiSelect")}
                  shortcuts={[getShortcutKey(`Shift+${t("helpDialog.click")}`)]}
                />
-                <Shortcut
-                  label={t("helpDialog.deepSelect")}
-                  shortcuts={[
-                    getShortcutKey(`CtrlOrCmd+${t("helpDialog.click")}`),
-                  ]}
-                />
-                <Shortcut
-                  label={t("helpDialog.deepBoxSelect")}
-                  shortcuts={[
-                    getShortcutKey(`CtrlOrCmd+${t("helpDialog.drag")}`),
-                  ]}
-                />
                <Shortcut
                  label={t("labels.moveCanvas")}
                  shortcuts={[
@ -363,10 +341,6 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                    getShortcutKey(`Alt+${t("helpDialog.drag")}`),
                  ]}
                />
-                <Shortcut
-                  label={t("helpDialog.toggleElementLock")}
-                  shortcuts={[getShortcutKey("CtrlOrCmd+Shift+L")]}
-                />
                <Shortcut
                  label={t("buttons.undo")}
                  shortcuts={[getShortcutKey("CtrlOrCmd+Z")]}
@ -406,14 +380,6 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                  label={t("labels.showBackground")}
                  shortcuts={[getShortcutKey("G")]}
                />
-                <Shortcut
-                  label={t("labels.decreaseFontSize")}
-                  shortcuts={[getShortcutKey("CtrlOrCmd+Shift+<")]}
-                />
-                <Shortcut
-                  label={t("labels.increaseFontSize")}
-                  shortcuts={[getShortcutKey("CtrlOrCmd+Shift+>")]}
-                />
              </ShortcutIsland>
            </Column>
          </Columns>
--- a/src/components/HelpIcon.tsx
+++ b/src/components/HelpIcon.tsx
@ -1,3 +1,4 @@
+import React from "react";
 import { questionCircle } from "../components/icons";

 type HelpIconProps = {
--- a/src/components/HintViewer.tsx
+++ b/src/components/HintViewer.tsx
@ -1,56 +1,37 @@
+import React from "react";
 import { t } from "../i18n";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { getSelectedElements } from "../scene";

 import "./HintViewer.scss";
 import { AppState } from "../types";
-import {
-  isImageElement,
-  isLinearElement,
-  isTextBindableContainer,
-  isTextElement,
-} from "../element/typeChecks";
+import { isLinearElement, isTextElement } from "../element/typeChecks";
 import { getShortcutKey } from "../utils";
-import { isEraserActive } from "../appState";

-interface HintViewerProps {
+interface Hint {
  appState: AppState;
  elements: readonly NonDeletedExcalidrawElement[];
-  isMobile: boolean;
 }

-const getHints = ({ appState, elements, isMobile }: HintViewerProps) => {
-  const { activeTool, isResizing, isRotating, lastPointerDownWith } = appState;
+const getHints = ({ appState, elements }: Hint) => {
+  const { elementType, isResizing, isRotating, lastPointerDownWith } = appState;
  const multiMode = appState.multiElement !== null;
-
-  if (appState.isLibraryOpen) {
-    return null;
-  }
-
-  if (isEraserActive(appState)) {
-    return t("hints.eraserRevert");
-  }
-  if (activeTool.type === "arrow" || activeTool.type === "line") {
+  if (elementType === "arrow" || elementType === "line") {
    if (!multiMode) {
      return t("hints.linearElement");
    }
    return t("hints.linearElementMulti");
  }

-  if (activeTool.type === "freedraw") {
+  if (elementType === "freedraw") {
    return t("hints.freeDraw");
  }

-  if (activeTool.type === "text") {
+  if (elementType === "text") {
    return t("hints.text");
  }

-  if (appState.activeTool.type === "image" && appState.pendingImageElementId) {
-    return t("hints.placeImage");
-  }
-
  const selectedElements = getSelectedElements(elements, appState);
-
  if (
    isResizing &&
    lastPointerDownWith === "mouse" &&
@ -60,15 +41,22 @@ const getHints = ({ appState, elements, isMobile }: HintViewerProps) => {
    if (isLinearElement(targetElement) && targetElement.points.length === 2) {
      return t("hints.lockAngle");
    }
-    return isImageElement(targetElement)
-      ? t("hints.resizeImage")
-      : t("hints.resize");
+    return t("hints.resize");
  }

  if (isRotating && lastPointerDownWith === "mouse") {
    return t("hints.rotate");
  }

+  if (selectedElements.length === 1 && isLinearElement(selectedElements[0])) {
+    if (appState.editingLinearElement) {
+      return appState.editingLinearElement.activePointIndex
+        ? t("hints.lineEditor_pointSelected")
+        : t("hints.lineEditor_nothingSelected");
+    }
+    return t("hints.lineEditor_info");
+  }
+
  if (selectedElements.length === 1 && isTextElement(selectedElements[0])) {
    return t("hints.text_selected");
  }
@ -77,45 +65,13 @@ const getHints = ({ appState, elements, isMobile }: HintViewerProps) => {
    return t("hints.text_editing");
  }

-  if (activeTool.type === "selection") {
-    if (
-      appState.draggingElement?.type === "selection" &&
-      !appState.editingElement &&
-      !appState.editingLinearElement
-    ) {
-      return t("hints.deepBoxSelect");
-    }
-    if (!selectedElements.length && !isMobile) {
-      return t("hints.canvasPanning");
-    }
-  }
-
-  if (selectedElements.length === 1) {
-    if (isLinearElement(selectedElements[0])) {
-      if (appState.editingLinearElement) {
-        return appState.editingLinearElement.selectedPointsIndices
-          ? t("hints.lineEditor_pointSelected")
-          : t("hints.lineEditor_nothingSelected");
-      }
-      return t("hints.lineEditor_info");
-    }
-    if (isTextBindableContainer(selectedElements[0])) {
-      return t("hints.bindTextToElement");
-    }
-  }
-
  return null;
 };

-export const HintViewer = ({
-  appState,
-  elements,
-  isMobile,
-}: HintViewerProps) => {
+export const HintViewer = ({ appState, elements }: Hint) => {
  let hint = getHints({
    appState,
    elements,
-    isMobile,
  });
  if (!hint) {
    return null;
--- a/src/components/IconPicker.scss
+++ b/src/components/IconPicker.scss
@ -22,7 +22,7 @@
    align-items: center;
    justify-content: center;

-    &:focus-visible {
+    &:focus {
      outline: transparent;
      background-color: var(--button-gray-2);
      & svg {
@ -90,7 +90,7 @@
  .picker-content {
    padding: 0.5rem;
    display: grid;
-    grid-template-columns: repeat(3, auto);
+    grid-auto-flow: column;
    grid-gap: 0.5rem;
    border-radius: 4px;
    :root[dir="rtl"] & {
--- a/src/components/ImageExportDialog.tsx
+++ b/src/components/ImageExportDialog.tsx
@ -1,14 +1,15 @@
 import React, { useEffect, useRef, useState } from "react";
 import { render, unmountComponentAtNode } from "react-dom";
+import { ActionsManagerInterface } from "../actions/types";
 import { probablySupportsClipboardBlob } from "../clipboard";
 import { canvasToBlob } from "../data/blob";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { CanvasError } from "../errors";
 import { t } from "../i18n";
-import { useDevice } from "./App";
+import { useIsMobile } from "./App";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { exportToCanvas } from "../scene/export";
-import { AppState, BinaryFiles } from "../types";
+import { AppState } from "../types";
 import { Dialog } from "./Dialog";
 import { clipboard, exportImage } from "./icons";
 import Stack from "./Stack";
@ -18,7 +19,6 @@ import OpenColor from "open-color";
 import { CheckboxItem } from "./CheckboxItem";
 import { DEFAULT_EXPORT_PADDING } from "../constants";
 import { nativeFileSystemSupported } from "../data/filesystem";
-import { ActionManager } from "../actions/manager";

 const supportsContextFilters =
  "filter" in document.createElement("canvas").getContext("2d")!;
@ -79,7 +79,6 @@ const ExportButton: React.FC<{
 const ImageExportModal = ({
  elements,
  appState,
-  files,
  exportPadding = DEFAULT_EXPORT_PADDING,
  actionManager,
  onExportToPng,
@ -88,9 +87,8 @@ const ImageExportModal = ({
 }: {
  appState: AppState;
  elements: readonly NonDeletedExcalidrawElement[];
-  files: BinaryFiles;
  exportPadding?: number;
-  actionManager: ActionManager;
+  actionManager: ActionsManagerInterface;
  onExportToPng: ExportCB;
  onExportToSvg: ExportCB;
  onExportToClipboard: ExportCB;
@ -102,7 +100,7 @@ const ImageExportModal = ({
  const { exportBackground, viewBackgroundColor } = appState;

  const exportedElements = exportSelected
-    ? getSelectedElements(elements, appState, true)
+    ? getSelectedElements(elements, appState)
    : elements;

  useEffect(() => {
@ -114,25 +112,29 @@ const ImageExportModal = ({
    if (!previewNode) {
      return;
    }
-    exportToCanvas(exportedElements, appState, files, {
-      exportBackground,
-      viewBackgroundColor,
-      exportPadding,
-    })
-      .then((canvas) => {
-        // if converting to blob fails, there's some problem that will
-        // likely prevent preview and export (e.g. canvas too big)
-        return canvasToBlob(canvas).then(() => {
-          renderPreview(canvas, previewNode);
-        });
-      })
-      .catch((error) => {
-        console.error(error);
-        renderPreview(new CanvasError(), previewNode);
+    try {
+      const canvas = exportToCanvas(exportedElements, appState, {
+        exportBackground,
+        viewBackgroundColor,
+        exportPadding,
      });
+
+      // if converting to blob fails, there's some problem that will
+      // likely prevent preview and export (e.g. canvas too big)
+      canvasToBlob(canvas)
+        .then(() => {
+          renderPreview(canvas, previewNode);
+        })
+        .catch((error) => {
+          console.error(error);
+          renderPreview(new CanvasError(), previewNode);
+        });
+    } catch (error) {
+      console.error(error);
+      renderPreview(new CanvasError(), previewNode);
+    }
  }, [
    appState,
-    files,
    exportedElements,
    exportBackground,
    exportPadding,
@ -170,9 +172,7 @@ const ImageExportModal = ({
        <Stack.Row gap={2}>
          {actionManager.renderAction("changeExportScale")}
        </Stack.Row>
-        <p style={{ marginLeft: "1em", userSelect: "none" }}>
-          {t("buttons.scale")}
-        </p>
+        <p style={{ marginLeft: "1em", userSelect: "none" }}>Scale</p>
      </div>
      <div
        style={{
@ -220,7 +220,6 @@ const ImageExportModal = ({
 export const ImageExportDialog = ({
  elements,
  appState,
-  files,
  exportPadding = DEFAULT_EXPORT_PADDING,
  actionManager,
  onExportToPng,
@ -229,9 +228,8 @@ export const ImageExportDialog = ({
 }: {
  appState: AppState;
  elements: readonly NonDeletedExcalidrawElement[];
-  files: BinaryFiles;
  exportPadding?: number;
-  actionManager: ActionManager;
+  actionManager: ActionsManagerInterface;
  onExportToPng: ExportCB;
  onExportToSvg: ExportCB;
  onExportToClipboard: ExportCB;
@ -252,7 +250,7 @@ export const ImageExportDialog = ({
        icon={exportImage}
        type="button"
        aria-label={t("buttons.exportImage")}
-        showAriaLabel={useDevice().isMobile}
+        showAriaLabel={useIsMobile()}
        title={t("buttons.exportImage")}
      />
      {modalIsShown && (
@ -260,7 +258,6 @@ export const ImageExportDialog = ({
          <ImageExportModal
            elements={elements}
            appState={appState}
-            files={files}
            exportPadding={exportPadding}
            actionManager={actionManager}
            onExportToPng={onExportToPng}
--- a/src/components/InitializeApp.tsx
+++ b/src/components/InitializeApp.tsx
@ -1,25 +1,30 @@
-import React, { useEffect, useState } from "react";
+import React from "react";

 import { LoadingMessage } from "./LoadingMessage";
 import { defaultLang, Language, languages, setLanguage } from "../i18n";

 interface Props {
  langCode: Language["code"];
-  children: React.ReactElement;
 }
+interface State {
+  isLoading: boolean;
+}
+export class InitializeApp extends React.Component<Props, State> {
+  public state: { isLoading: boolean } = {
+    isLoading: true,
+  };

-export const InitializeApp = (props: Props) => {
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    const updateLang = async () => {
-      await setLanguage(currentLang);
-      setLoading(false);
-    };
+  async componentDidMount() {
    const currentLang =
-      languages.find((lang) => lang.code === props.langCode) || defaultLang;
-    updateLang();
-  }, [props.langCode]);
+      languages.find((lang) => lang.code === this.props.langCode) ||
+      defaultLang;
+    await setLanguage(currentLang);
+    this.setState({
+      isLoading: false,
+    });
+  }

-  return loading ? <LoadingMessage /> : props.children;
-};
+  public render() {
+    return this.state.isLoading ? <LoadingMessage /> : this.props.children;
+  }
+}
--- a/src/components/Island.scss
+++ b/src/components/Island.scss
@ -3,7 +3,7 @@
    --padding: 0;
    background-color: var(--island-bg-color);
    box-shadow: var(--shadow-island);
-    border-radius: var(--border-radius-lg);
+    border-radius: 4px;
    padding: calc(var(--padding) * var(--space-factor));
    position: relative;
    transition: box-shadow 0.5s ease-in-out;
--- a/src/components/JSONExportDialog.tsx
+++ b/src/components/JSONExportDialog.tsx
@ -1,8 +1,9 @@
 import React, { useState } from "react";
+import { ActionsManagerInterface } from "../actions/types";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
-import { useDevice } from "./App";
-import { AppState, ExportOpts, BinaryFiles } from "../types";
+import { useIsMobile } from "./App";
+import { AppState, ExportOpts } from "../types";
 import { Dialog } from "./Dialog";
 import { exportFile, exportToFileIcon, link } from "./icons";
 import { ToolButton } from "./ToolButton";
@ -11,9 +12,6 @@ import { Card } from "./Card";

 import "./ExportDialog.scss";
 import { nativeFileSystemSupported } from "../data/filesystem";
-import { trackEvent } from "../analytics";
-import { ActionManager } from "../actions/manager";
-import { getFrame } from "../utils";

 export type ExportCB = (
  elements: readonly NonDeletedExcalidrawElement[],
@ -23,15 +21,13 @@ export type ExportCB = (
 const JSONExportModal = ({
  elements,
  appState,
-  files,
  actionManager,
  exportOpts,
  canvas,
 }: {
  appState: AppState;
-  files: BinaryFiles;
  elements: readonly NonDeletedExcalidrawElement[];
-  actionManager: ActionManager;
+  actionManager: ActionsManagerInterface;
  onCloseRequest: () => void;
  exportOpts: ExportOpts;
  canvas: HTMLCanvasElement | null;
@ -56,7 +52,7 @@ const JSONExportModal = ({
              aria-label={t("exportDialog.disk_button")}
              showAriaLabel={true}
              onClick={() => {
-                actionManager.executeAction(actionSaveFileToDisk, "ui");
+                actionManager.executeAction(actionSaveFileToDisk);
              }}
            />
          </Card>
@ -72,15 +68,12 @@ const JSONExportModal = ({
              title={t("exportDialog.link_button")}
              aria-label={t("exportDialog.link_button")}
              showAriaLabel={true}
-              onClick={() => {
-                onExportToBackend(elements, appState, files, canvas);
-                trackEvent("export", "link", `ui (${getFrame()})`);
-              }}
+              onClick={() => onExportToBackend(elements, appState, canvas)}
            />
          </Card>
        )}
        {exportOpts.renderCustomUI &&
-          exportOpts.renderCustomUI(elements, appState, files, canvas)}
+          exportOpts.renderCustomUI(elements, appState, canvas)}
      </div>
    </div>
  );
@ -89,15 +82,13 @@ const JSONExportModal = ({
 export const JSONExportDialog = ({
  elements,
  appState,
-  files,
  actionManager,
  exportOpts,
  canvas,
 }: {
-  elements: readonly NonDeletedExcalidrawElement[];
  appState: AppState;
-  files: BinaryFiles;
-  actionManager: ActionManager;
+  elements: readonly NonDeletedExcalidrawElement[];
+  actionManager: ActionsManagerInterface;
  exportOpts: ExportOpts;
  canvas: HTMLCanvasElement | null;
 }) => {
@ -117,7 +108,7 @@ export const JSONExportDialog = ({
        icon={exportFile}
        type="button"
        aria-label={t("buttons.export")}
-        showAriaLabel={useDevice().isMobile}
+        showAriaLabel={useIsMobile()}
        title={t("buttons.export")}
      />
      {modalIsShown && (
@ -125,7 +116,6 @@ export const JSONExportDialog = ({
          <JSONExportModal
            elements={elements}
            appState={appState}
-            files={files}
            actionManager={actionManager}
            onCloseRequest={handleClose}
            exportOpts={exportOpts}
--- a/src/components/LayerUI.scss
+++ b/src/components/LayerUI.scss
@ -1,63 +1,45 @@
@import "open-color/open-color";
-@import "../css/variables.module";

-.layer-ui__sidebar {
-  position: absolute;
-  top: var(--sat);
-  bottom: var(--sab);
-  right: var(--sar);
-  z-index: 5;
+.excalidraw {
+  .layer-ui__library {
+    margin: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;

-  box-shadow: var(--shadow-island);
-  overflow: hidden;
-  border-radius: var(--border-radius-lg);
-  margin: var(--space-factor);
-  width: calc(#{$right-sidebar-width} - var(--space-factor) * 2);
-
-  .Island {
-    box-shadow: none;
-  }
-
-  .ToolIcon__icon {
-    border-radius: var(--border-radius-md);
-  }
-
-  .ToolIcon__icon__close {
-    .Modal__close {
-      width: calc(var(--space-factor) * 7);
-      height: calc(var(--space-factor) * 7);
+    .layer-ui__library-header {
      display: flex;
-      justify-content: center;
      align-items: center;
-      color: var(--color-text);
+      width: 100%;
+      margin: 2px 0;
+
+      button {
+        // 2px from the left to account for focus border of left-most button
+        margin: 0 2px;
+      }
+
+      a {
+        margin-inline-start: auto;
+        // 17px for scrollbar (needed for overlay scrollbars on Big Sur?) + 1px extra
+        padding-inline-end: 18px;
+        white-space: nowrap;
+      }
    }
  }

-  .Island {
-    --padding: 0;
-    background-color: var(--island-bg-color);
-    border-radius: var(--border-radius-lg);
-    padding: calc(var(--padding) * var(--space-factor));
-    position: relative;
-    transition: box-shadow 0.5s ease-in-out;
+  .layer-ui__library-message {
+    padding: 10px 20px;
+    max-width: 200px;
  }
-}

-.excalidraw {
-  .layer-ui__wrapper.animate {
-    transition: width 0.1s ease-in-out;
+  .layer-ui__library-items {
+    max-height: 50vh;
+    overflow: auto;
  }
+
  .layer-ui__wrapper {
-    // when the rightside sidebar is docked, we need to resize the UI by its
-    // width, making the nested UI content shift to the left. To do this,
-    // we need the UI container to actually have dimensions set, but
-    // then we also need to disable pointer events else the canvas below
-    // wouldn't be interactive.
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
    z-index: var(--zIndex-layerUI);
+
    &__top-right {
      display: flex;
    }
--- a/src/components/LayerUI.tsx
+++ b/src/components/LayerUI.tsx
@ -1,14 +1,28 @@
 import clsx from "clsx";
-import React, { useCallback } from "react";
+import React, {
+  RefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { ActionManager } from "../actions/manager";
-import { CLASSES, LIBRARY_SIDEBAR_WIDTH } from "../constants";
+import { CLASSES } from "../constants";
 import { exportCanvas } from "../data";
+import { importLibraryFromJSON, saveLibraryAsJSON } from "../data/json";
 import { isTextElement, showSelectedShapeActions } from "../element";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { Language, t } from "../i18n";
+import { useIsMobile } from "../components/App";
 import { calculateScrollCenter, getSelectedElements } from "../scene";
 import { ExportType } from "../scene/types";
-import { AppProps, AppState, ExcalidrawProps, BinaryFiles } from "../types";
+import {
+  AppProps,
+  AppState,
+  ExcalidrawProps,
+  LibraryItem,
+  LibraryItems,
+} from "../types";
 import { muteFSAbortError } from "../utils";
 import { SelectedShapeActions, ShapesSwitcher, ZoomActions } from "./Actions";
 import { BackgroundPickerAndDarkModeToggle } from "./BackgroundPickerAndDarkModeToggle";
@ -17,7 +31,10 @@ import { ErrorDialog } from "./ErrorDialog";
 import { ExportCB, ImageExportDialog } from "./ImageExportDialog";
 import { FixedSideContainer } from "./FixedSideContainer";
 import { HintViewer } from "./HintViewer";
+import { exportFile, load, trash } from "./icons";
 import { Island } from "./Island";
+import "./LayerUI.scss";
+import { LibraryUnit } from "./LibraryUnit";
 import { LoadingMessage } from "./LoadingMessage";
 import { LockButton } from "./LockButton";
 import { MobileMenu } from "./MobileMenu";
@ -25,72 +42,347 @@ import { PasteChartDialog } from "./PasteChartDialog";
 import { Section } from "./Section";
 import { HelpDialog } from "./HelpDialog";
 import Stack from "./Stack";
+import { ToolButton } from "./ToolButton";
+import { Tooltip } from "./Tooltip";
 import { UserList } from "./UserList";
-import Library, { distributeLibraryItemsOnSquareGrid } from "../data/library";
+import Library from "../data/library";
 import { JSONExportDialog } from "./JSONExportDialog";
 import { LibraryButton } from "./LibraryButton";
 import { isImageFileHandle } from "../data/blob";
-import { LibraryMenu } from "./LibraryMenu";
-
-import "./LayerUI.scss";
-import "./Toolbar.scss";
-import { PenModeButton } from "./PenModeButton";
-import { trackEvent } from "../analytics";
-import { useDevice } from "../components/App";
-import { Stats } from "./Stats";
-import { actionToggleStats } from "../actions/actionToggleStats";
-import { actionToggleZenMode } from "../actions";

 interface LayerUIProps {
  actionManager: ActionManager;
  appState: AppState;
-  files: BinaryFiles;
  canvas: HTMLCanvasElement | null;
  setAppState: React.Component<any, AppState>["setState"];
  elements: readonly NonDeletedExcalidrawElement[];
  onCollabButtonClick?: () => void;
  onLockToggle: () => void;
-  onPenModeToggle: () => void;
  onInsertElements: (elements: readonly NonDeletedExcalidrawElement[]) => void;
+  zenModeEnabled: boolean;
  showExitZenModeBtn: boolean;
  showThemeBtn: boolean;
+  toggleZenMode: () => void;
  langCode: Language["code"];
  isCollaborating: boolean;
-  renderTopRightUI?: ExcalidrawProps["renderTopRightUI"];
-  renderCustomFooter?: ExcalidrawProps["renderFooter"];
-  renderCustomStats?: ExcalidrawProps["renderCustomStats"];
+  renderTopRightUI?: (isMobile: boolean, appState: AppState) => JSX.Element;
+  renderCustomFooter?: (isMobile: boolean, appState: AppState) => JSX.Element;
+  viewModeEnabled: boolean;
  libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
  UIOptions: AppProps["UIOptions"];
  focusContainer: () => void;
  library: Library;
  id: string;
-  onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void;
 }
+
+const useOnClickOutside = (
+  ref: RefObject<HTMLElement>,
+  cb: (event: MouseEvent) => void,
+) => {
+  useEffect(() => {
+    const listener = (event: MouseEvent) => {
+      if (!ref.current) {
+        return;
+      }
+
+      if (
+        event.target instanceof Element &&
+        (ref.current.contains(event.target) ||
+          !document.body.contains(event.target))
+      ) {
+        return;
+      }
+
+      cb(event);
+    };
+    document.addEventListener("pointerdown", listener, false);
+
+    return () => {
+      document.removeEventListener("pointerdown", listener);
+    };
+  }, [ref, cb]);
+};
+
+const LibraryMenuItems = ({
+  libraryItems,
+  onRemoveFromLibrary,
+  onAddToLibrary,
+  onInsertShape,
+  pendingElements,
+  theme,
+  setAppState,
+  setLibraryItems,
+  libraryReturnUrl,
+  focusContainer,
+  library,
+  id,
+}: {
+  libraryItems: LibraryItems;
+  pendingElements: LibraryItem;
+  onRemoveFromLibrary: (index: number) => void;
+  onInsertShape: (elements: LibraryItem) => void;
+  onAddToLibrary: (elements: LibraryItem) => void;
+  theme: AppState["theme"];
+  setAppState: React.Component<any, AppState>["setState"];
+  setLibraryItems: (library: LibraryItems) => void;
+  libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
+  focusContainer: () => void;
+  library: Library;
+  id: string;
+}) => {
+  const isMobile = useIsMobile();
+  const numCells = libraryItems.length + (pendingElements.length > 0 ? 1 : 0);
+  const CELLS_PER_ROW = isMobile ? 4 : 6;
+  const numRows = Math.max(1, Math.ceil(numCells / CELLS_PER_ROW));
+  const rows = [];
+  let addedPendingElements = false;
+
+  const referrer =
+    libraryReturnUrl || window.location.origin + window.location.pathname;
+
+  rows.push(
+    <div className="layer-ui__library-header" key="library-header">
+      <ToolButton
+        key="import"
+        type="button"
+        title={t("buttons.load")}
+        aria-label={t("buttons.load")}
+        icon={load}
+        onClick={() => {
+          importLibraryFromJSON(library)
+            .then(() => {
+              // Close and then open to get the libraries updated
+              setAppState({ isLibraryOpen: false });
+              setAppState({ isLibraryOpen: true });
+            })
+            .catch(muteFSAbortError)
+            .catch((error) => {
+              setAppState({ errorMessage: error.message });
+            });
+        }}
+      />
+      {!!libraryItems.length && (
+        <>
+          <ToolButton
+            key="export"
+            type="button"
+            title={t("buttons.export")}
+            aria-label={t("buttons.export")}
+            icon={exportFile}
+            onClick={() => {
+              saveLibraryAsJSON(library)
+                .catch(muteFSAbortError)
+                .catch((error) => {
+                  setAppState({ errorMessage: error.message });
+                });
+            }}
+          />
+          <ToolButton
+            key="reset"
+            type="button"
+            title={t("buttons.resetLibrary")}
+            aria-label={t("buttons.resetLibrary")}
+            icon={trash}
+            onClick={() => {
+              if (window.confirm(t("alerts.resetLibrary"))) {
+                library.resetLibrary();
+                setLibraryItems([]);
+                focusContainer();
+              }
+            }}
+          />
+        </>
+      )}
+      <a
+        href={`https://libraries.excalidraw.com?target=${
+          window.name || "_blank"
+        }&referrer=${referrer}&useHash=true&token=${id}&theme=${theme}`}
+        target="_excalidraw_libraries"
+      >
+        {t("labels.libraries")}
+      </a>
+    </div>,
+  );
+
+  for (let row = 0; row < numRows; row++) {
+    const y = CELLS_PER_ROW * row;
+    const children = [];
+    for (let x = 0; x < CELLS_PER_ROW; x++) {
+      const shouldAddPendingElements: boolean =
+        pendingElements.length > 0 &&
+        !addedPendingElements &&
+        y + x >= libraryItems.length;
+      addedPendingElements = addedPendingElements || shouldAddPendingElements;
+
+      children.push(
+        <Stack.Col key={x}>
+          <LibraryUnit
+            elements={libraryItems[y + x]}
+            pendingElements={
+              shouldAddPendingElements ? pendingElements : undefined
+            }
+            onRemoveFromLibrary={onRemoveFromLibrary.bind(null, y + x)}
+            onClick={
+              shouldAddPendingElements
+                ? onAddToLibrary.bind(null, pendingElements)
+                : onInsertShape.bind(null, libraryItems[y + x])
+            }
+          />
+        </Stack.Col>,
+      );
+    }
+    rows.push(
+      <Stack.Row align="center" gap={1} key={row}>
+        {children}
+      </Stack.Row>,
+    );
+  }
+
+  return (
+    <Stack.Col align="start" gap={1} className="layer-ui__library-items">
+      {rows}
+    </Stack.Col>
+  );
+};
+
+const LibraryMenu = ({
+  onClickOutside,
+  onInsertShape,
+  pendingElements,
+  onAddToLibrary,
+  theme,
+  setAppState,
+  libraryReturnUrl,
+  focusContainer,
+  library,
+  id,
+}: {
+  pendingElements: LibraryItem;
+  onClickOutside: (event: MouseEvent) => void;
+  onInsertShape: (elements: LibraryItem) => void;
+  onAddToLibrary: () => void;
+  theme: AppState["theme"];
+  setAppState: React.Component<any, AppState>["setState"];
+  libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
+  focusContainer: () => void;
+  library: Library;
+  id: string;
+}) => {
+  const ref = useRef<HTMLDivElement | null>(null);
+  useOnClickOutside(ref, (event) => {
+    // If click on the library icon, do nothing.
+    if ((event.target as Element).closest(".ToolIcon_type_button__library")) {
+      return;
+    }
+    onClickOutside(event);
+  });
+
+  const [libraryItems, setLibraryItems] = useState<LibraryItems>([]);
+
+  const [loadingState, setIsLoading] = useState<
+    "preloading" | "loading" | "ready"
+  >("preloading");
+
+  const loadingTimerRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    Promise.race([
+      new Promise((resolve) => {
+        loadingTimerRef.current = setTimeout(() => {
+          resolve("loading");
+        }, 100);
+      }),
+      library.loadLibrary().then((items) => {
+        setLibraryItems(items);
+        setIsLoading("ready");
+      }),
+    ]).then((data) => {
+      if (data === "loading") {
+        setIsLoading("loading");
+      }
+    });
+    return () => {
+      clearTimeout(loadingTimerRef.current!);
+    };
+  }, [library]);
+
+  const removeFromLibrary = useCallback(
+    async (indexToRemove) => {
+      const items = await library.loadLibrary();
+      const nextItems = items.filter((_, index) => index !== indexToRemove);
+      library.saveLibrary(nextItems).catch((error) => {
+        setLibraryItems(items);
+        setAppState({ errorMessage: t("alerts.errorRemovingFromLibrary") });
+      });
+      setLibraryItems(nextItems);
+    },
+    [library, setAppState],
+  );
+
+  const addToLibrary = useCallback(
+    async (elements: LibraryItem) => {
+      const items = await library.loadLibrary();
+      const nextItems = [...items, elements];
+      onAddToLibrary();
+      library.saveLibrary(nextItems).catch((error) => {
+        setLibraryItems(items);
+        setAppState({ errorMessage: t("alerts.errorAddingToLibrary") });
+      });
+      setLibraryItems(nextItems);
+    },
+    [onAddToLibrary, library, setAppState],
+  );
+
+  return loadingState === "preloading" ? null : (
+    <Island padding={1} ref={ref} className="layer-ui__library">
+      {loadingState === "loading" ? (
+        <div className="layer-ui__library-message">
+          {t("labels.libraryLoadingMessage")}
+        </div>
+      ) : (
+        <LibraryMenuItems
+          libraryItems={libraryItems}
+          onRemoveFromLibrary={removeFromLibrary}
+          onAddToLibrary={addToLibrary}
+          onInsertShape={onInsertShape}
+          pendingElements={pendingElements}
+          setAppState={setAppState}
+          setLibraryItems={setLibraryItems}
+          libraryReturnUrl={libraryReturnUrl}
+          focusContainer={focusContainer}
+          library={library}
+          theme={theme}
+          id={id}
+        />
+      )}
+    </Island>
+  );
+};
+
 const LayerUI = ({
  actionManager,
  appState,
-  files,
  setAppState,
  canvas,
  elements,
  onCollabButtonClick,
  onLockToggle,
-  onPenModeToggle,
  onInsertElements,
+  zenModeEnabled,
  showExitZenModeBtn,
  showThemeBtn,
+  toggleZenMode,
  isCollaborating,
  renderTopRightUI,
  renderCustomFooter,
-  renderCustomStats,
+  viewModeEnabled,
  libraryReturnUrl,
  UIOptions,
  focusContainer,
  library,
  id,
-  onImageAction,
 }: LayerUIProps) => {
-  const device = useDevice();
+  const isMobile = useIsMobile();

  const renderJSONExportDialog = () => {
    if (!UIOptions.canvasActions.export) {
@ -101,7 +393,6 @@ const LayerUI = ({
      <JSONExportDialog
        elements={elements}
        appState={appState}
-        files={files}
        actionManager={actionManager}
        exportOpts={UIOptions.canvasActions.export}
        canvas={canvas}
@ -114,41 +405,33 @@ const LayerUI = ({
      return null;
    }

-    const createExporter =
-      (type: ExportType): ExportCB =>
-      async (exportedElements) => {
-        trackEvent("export", type, "ui");
-        const fileHandle = await exportCanvas(
-          type,
-          exportedElements,
-          appState,
-          files,
-          {
-            exportBackground: appState.exportBackground,
-            name: appState.name,
-            viewBackgroundColor: appState.viewBackgroundColor,
-          },
-        )
-          .catch(muteFSAbortError)
-          .catch((error) => {
-            console.error(error);
-            setAppState({ errorMessage: error.message });
-          });
+    const createExporter = (type: ExportType): ExportCB => async (
+      exportedElements,
+    ) => {
+      const fileHandle = await exportCanvas(type, exportedElements, appState, {
+        exportBackground: appState.exportBackground,
+        name: appState.name,
+        viewBackgroundColor: appState.viewBackgroundColor,
+      })
+        .catch(muteFSAbortError)
+        .catch((error) => {
+          console.error(error);
+          setAppState({ errorMessage: error.message });
+        });

-        if (
-          appState.exportEmbedScene &&
-          fileHandle &&
-          isImageFileHandle(fileHandle)
-        ) {
-          setAppState({ fileHandle });
-        }
-      };
+      if (
+        appState.exportEmbedScene &&
+        fileHandle &&
+        isImageFileHandle(fileHandle)
+      ) {
+        setAppState({ fileHandle });
+      }
+    };

    return (
      <ImageExportDialog
        elements={elements}
        appState={appState}
-        files={files}
        actionManager={actionManager}
        onExportToPng={createExporter("png")}
        onExportToSvg={createExporter("svg")}
@ -166,7 +449,7 @@ const LayerUI = ({
      <Section
        heading="canvasActions"
        className={clsx("zen-mode-transition", {
-          "transition-left": appState.zenModeEnabled,
+          "transition-left": zenModeEnabled,
        })}
      >
        {/* the zIndex ensures this menu has higher stacking order,
@ -182,12 +465,11 @@ const LayerUI = ({
      </Section>
    );
  };
-
  const renderCanvasActions = () => (
    <Section
      heading="canvasActions"
      className={clsx("zen-mode-transition", {
-        "transition-left": appState.zenModeEnabled,
+        "transition-left": zenModeEnabled,
      })}
    >
      {/* the zIndex ensures this menu has higher stacking order,
@ -227,14 +509,14 @@ const LayerUI = ({
    <Section
      heading="selectedShapeActions"
      className={clsx("zen-mode-transition", {
-        "transition-left": appState.zenModeEnabled,
+        "transition-left": zenModeEnabled,
      })}
    >
      <Island
        className={CLASSES.SHAPE_ACTIONS_MENU}
        padding={2}
        style={{
-          // we want to make sure this doesn't overflow so subtracting 200
+          // we want to make sure this doesn't overflow so substracting 200
          // which is approximately height of zoom footer and top left menu items with some buffer
          // if active file name is displayed, subtracting 248 to account for its height
          maxHeight: `${appState.height - (appState.fileHandle ? 248 : 200)}px`,
@ -244,21 +526,18 @@ const LayerUI = ({
          appState={appState}
          elements={elements}
          renderAction={actionManager.renderAction}
-          activeTool={appState.activeTool.type}
+          elementType={appState.elementType}
        />
      </Island>
    </Section>
  );

-  const closeLibrary = useCallback(() => {
-    const isDialogOpen = !!document.querySelector(".Dialog");
-
-    // Prevent closing if any dialog is open
-    if (isDialogOpen) {
-      return;
-    }
-    setAppState({ isLibraryOpen: false });
-  }, [setAppState]);
+  const closeLibrary = useCallback(
+    (event) => {
+      setAppState({ isLibraryOpen: false });
+    },
+    [setAppState],
+  );

  const deselectItems = useCallback(() => {
    setAppState({
@ -269,20 +548,16 @@ const LayerUI = ({

  const libraryMenu = appState.isLibraryOpen ? (
    <LibraryMenu
-      pendingElements={getSelectedElements(elements, appState, true)}
-      onClose={closeLibrary}
-      onInsertLibraryItems={(libraryItems) => {
-        onInsertElements(distributeLibraryItemsOnSquareGrid(libraryItems));
-      }}
+      pendingElements={getSelectedElements(elements, appState)}
+      onClickOutside={closeLibrary}
+      onInsertShape={onInsertElements}
      onAddToLibrary={deselectItems}
      setAppState={setAppState}
      libraryReturnUrl={libraryReturnUrl}
      focusContainer={focusContainer}
      library={library}
      theme={appState.theme}
-      files={files}
      id={id}
-      appState={appState}
    />
  ) : null;

@ -297,61 +572,35 @@ const LayerUI = ({
        <div className="App-menu App-menu_top">
          <Stack.Col
            gap={4}
-            className={clsx({
-              "disable-pointerEvents": appState.zenModeEnabled,
-            })}
+            className={clsx({ "disable-pointerEvents": zenModeEnabled })}
          >
-            {appState.viewModeEnabled
+            {viewModeEnabled
              ? renderViewModeCanvasActions()
              : renderCanvasActions()}
            {shouldRenderSelectedShapeActions && renderSelectedShapeActions()}
          </Stack.Col>
-          {!appState.viewModeEnabled && (
+          {!viewModeEnabled && (
            <Section heading="shapes">
              {(heading) => (
                <Stack.Col gap={4} align="start">
-                  <Stack.Row
-                    gap={1}
-                    className={clsx("App-toolbar-container", {
-                      "zen-mode": appState.zenModeEnabled,
-                    })}
-                  >
-                    <PenModeButton
-                      zenModeEnabled={appState.zenModeEnabled}
-                      checked={appState.penMode}
-                      onChange={onPenModeToggle}
-                      title={t("toolBar.penMode")}
-                      penDetected={appState.penDetected}
-                    />
+                  <Stack.Row gap={1}>
                    <LockButton
-                      zenModeEnabled={appState.zenModeEnabled}
-                      checked={appState.activeTool.locked}
-                      onChange={() => onLockToggle()}
+                      zenModeEnabled={zenModeEnabled}
+                      checked={appState.elementLocked}
+                      onChange={onLockToggle}
                      title={t("toolBar.lock")}
                    />
                    <Island
                      padding={1}
-                      className={clsx("App-toolbar", {
-                        "zen-mode": appState.zenModeEnabled,
-                      })}
+                      className={clsx({ "zen-mode": zenModeEnabled })}
                    >
-                      <HintViewer
-                        appState={appState}
-                        elements={elements}
-                        isMobile={device.isMobile}
-                      />
+                      <HintViewer appState={appState} elements={elements} />
                      {heading}
                      <Stack.Row gap={1}>
                        <ShapesSwitcher
-                          appState={appState}
                          canvas={canvas}
-                          activeTool={appState.activeTool}
+                          elementType={appState.elementType}
                          setAppState={setAppState}
-                          onImageAction={({ pointerType }) => {
-                            onImageAction({
-                              insertOnCanvasDirectly: pointerType !== "mouse",
-                            });
-                          }}
                        />
                      </Stack.Row>
                    </Island>
@ -360,6 +609,7 @@ const LayerUI = ({
                      setAppState={setAppState}
                    />
                  </Stack.Row>
+                  {libraryMenu}
                </Stack.Col>
              )}
            </Section>
@ -368,15 +618,27 @@ const LayerUI = ({
            className={clsx(
              "layer-ui__wrapper__top-right zen-mode-transition",
              {
-                "transition-right": appState.zenModeEnabled,
+                "transition-right": zenModeEnabled,
              },
            )}
          >
-            <UserList
-              collaborators={appState.collaborators}
-              actionManager={actionManager}
-            />
-            {renderTopRightUI?.(device.isMobile, appState)}
+            <UserList>
+              {appState.collaborators.size > 0 &&
+                Array.from(appState.collaborators)
+                  // Collaborator is either not initialized or is actually the current user.
+                  .filter(([_, client]) => Object.keys(client).length !== 0)
+                  .map(([clientId, client]) => (
+                    <Tooltip
+                      label={client.username || "Unknown user"}
+                      key={clientId}
+                    >
+                      {actionManager.renderAction("goToCollaborator", {
+                        id: clientId,
+                      })}
+                    </Tooltip>
+                  ))}
+            </UserList>
+            {renderTopRightUI?.(isMobile, appState)}
          </div>
        </div>
      </FixedSideContainer>
@ -393,8 +655,7 @@ const LayerUI = ({
          className={clsx(
            "layer-ui__wrapper__footer-left zen-mode-transition",
            {
-              "layer-ui__wrapper__footer-left--transition-left":
-                appState.zenModeEnabled,
+              "layer-ui__wrapper__footer-left--transition-left": zenModeEnabled,
            },
          )}
        >
@ -406,40 +667,16 @@ const LayerUI = ({
                  zoom={appState.zoom}
                />
              </Island>
-              {!appState.viewModeEnabled && (
-                <>
-                  <div
-                    className={clsx("undo-redo-buttons zen-mode-transition", {
-                      "layer-ui__wrapper__footer-left--transition-bottom":
-                        appState.zenModeEnabled,
-                    })}
-                  >
-                    {actionManager.renderAction("undo", { size: "small" })}
-                    {actionManager.renderAction("redo", { size: "small" })}
-                  </div>
-
-                  <div
-                    className={clsx("eraser-buttons zen-mode-transition", {
-                      "layer-ui__wrapper__footer-left--transition-left":
-                        appState.zenModeEnabled,
-                    })}
-                  >
-                    {actionManager.renderAction("eraser", { size: "small" })}
-                  </div>
-                </>
+              {!viewModeEnabled && (
+                <div
+                  className={clsx("undo-redo-buttons zen-mode-transition", {
+                    "layer-ui__wrapper__footer-left--transition-bottom": zenModeEnabled,
+                  })}
+                >
+                  {actionManager.renderAction("undo", { size: "small" })}
+                  {actionManager.renderAction("redo", { size: "small" })}
+                </div>
              )}
-              {!appState.viewModeEnabled &&
-                appState.multiElement &&
-                device.isTouchScreen && (
-                  <div
-                    className={clsx("finalize-button zen-mode-transition", {
-                      "layer-ui__wrapper__footer-left--transition-left":
-                        appState.zenModeEnabled,
-                    })}
-                  >
-                    {actionManager.renderAction("finalize", { size: "small" })}
-                  </div>
-                )}
            </Section>
          </Stack.Col>
        </div>
@ -447,8 +684,7 @@ const LayerUI = ({
          className={clsx(
            "layer-ui__wrapper__footer-center zen-mode-transition",
            {
-              "layer-ui__wrapper__footer-left--transition-bottom":
-                appState.zenModeEnabled,
+              "layer-ui__wrapper__footer-left--transition-bottom": zenModeEnabled,
            },
          )}
        >
@ -458,7 +694,7 @@ const LayerUI = ({
          className={clsx(
            "layer-ui__wrapper__footer-right zen-mode-transition",
            {
-              "transition-right disable-pointerEvents": appState.zenModeEnabled,
+              "transition-right disable-pointerEvents": zenModeEnabled,
            },
          )}
        >
@ -468,7 +704,7 @@ const LayerUI = ({
          className={clsx("disable-zen-mode", {
            "disable-zen-mode--visible": showExitZenModeBtn,
          })}
-          onClick={() => actionManager.executeAction(actionToggleZenMode)}
+          onClick={toggleZenMode}
        >
          {t("buttons.exitZenMode")}
        </button>
@ -478,7 +714,7 @@ const LayerUI = ({

  const dialogs = (
    <>
-      {appState.isLoading && <LoadingMessage delay={250} />}
+      {appState.isLoading && <LoadingMessage />}
      {appState.errorMessage && (
        <ErrorDialog
          message={appState.errorMessage}
@ -507,24 +743,7 @@ const LayerUI = ({
    </>
  );

-  const renderStats = () => {
-    if (!appState.showStats) {
-      return null;
-    }
-    return (
-      <Stats
-        appState={appState}
-        setAppState={setAppState}
-        elements={elements}
-        onClose={() => {
-          actionManager.executeAction(actionToggleStats);
-        }}
-        renderCustomStats={renderCustomStats}
-      />
-    );
-  };
-
-  return device.isMobile ? (
+  return isMobile ? (
    <>
      {dialogs}
      <MobileMenu
@ -536,56 +755,39 @@ const LayerUI = ({
        renderImageExportDialog={renderImageExportDialog}
        setAppState={setAppState}
        onCollabButtonClick={onCollabButtonClick}
-        onLockToggle={() => onLockToggle()}
-        onPenModeToggle={onPenModeToggle}
+        onLockToggle={onLockToggle}
        canvas={canvas}
        isCollaborating={isCollaborating}
        renderCustomFooter={renderCustomFooter}
+        viewModeEnabled={viewModeEnabled}
        showThemeBtn={showThemeBtn}
-        onImageAction={onImageAction}
-        renderTopRightUI={renderTopRightUI}
-        renderStats={renderStats}
      />
    </>
  ) : (
-    <>
-      <div
-        className={clsx("layer-ui__wrapper", {
-          "disable-pointerEvents":
-            appState.draggingElement ||
-            appState.resizingElement ||
-            (appState.editingElement &&
-              !isTextElement(appState.editingElement)),
-        })}
-        style={
-          appState.isLibraryOpen &&
-          appState.isLibraryMenuDocked &&
-          device.canDeviceFitSidebar
-            ? { width: `calc(100% - ${LIBRARY_SIDEBAR_WIDTH}px)` }
-            : {}
-        }
-      >
-        {dialogs}
-        {renderFixedSideContainer()}
-        {renderBottomAppMenu()}
-        {renderStats()}
-        {appState.scrolledOutside && (
-          <button
-            className="scroll-back-to-content"
-            onClick={() => {
-              setAppState({
-                ...calculateScrollCenter(elements, appState, canvas),
-              });
-            }}
-          >
-            {t("buttons.scrollBackToContent")}
-          </button>
-        )}
-      </div>
-      {appState.isLibraryOpen && (
-        <div className="layer-ui__sidebar">{libraryMenu}</div>
+    <div
+      className={clsx("layer-ui__wrapper", {
+        "disable-pointerEvents":
+          appState.draggingElement ||
+          appState.resizingElement ||
+          (appState.editingElement && !isTextElement(appState.editingElement)),
+      })}
+    >
+      {dialogs}
+      {renderFixedSideContainer()}
+      {renderBottomAppMenu()}
+      {appState.scrolledOutside && (
+        <button
+          className="scroll-back-to-content"
+          onClick={() => {
+            setAppState({
+              ...calculateScrollCenter(elements, appState, canvas),
+            });
+          }}
+        >
+          {t("buttons.scrollBackToContent")}
+        </button>
      )}
-    </>
+    </div>
  );
 };

@ -606,7 +808,6 @@ const areEqual = (prev: LayerUIProps, next: LayerUIProps) => {
    prev.renderCustomFooter === next.renderCustomFooter &&
    prev.langCode === next.langCode &&
    prev.elements === next.elements &&
-    prev.files === next.files &&
    keys.every((key) => prevAppState[key] === nextAppState[key])
  );
 };
--- a/src/components/LibraryButton.tsx
+++ b/src/components/LibraryButton.tsx
@ -3,8 +3,6 @@ import clsx from "clsx";
 import { t } from "../i18n";
 import { AppState } from "../types";
 import { capitalizeString } from "../utils";
-import { trackEvent } from "../analytics";
-import { useDevice } from "./App";

 const LIBRARY_ICON = (
  <svg viewBox="0 0 576 512">
@ -18,42 +16,29 @@ const LIBRARY_ICON = (
 export const LibraryButton: React.FC<{
  appState: AppState;
  setAppState: React.Component<any, AppState>["setState"];
-  isMobile?: boolean;
-}> = ({ appState, setAppState, isMobile }) => {
-  const device = useDevice();
+}> = ({ appState, setAppState }) => {
  return (
    <label
      className={clsx(
-        "ToolIcon ToolIcon_type_floating ToolIcon__library",
+        "ToolIcon ToolIcon_type_floating ToolIcon__library zen-mode-visibility",
        `ToolIcon_size_medium`,
        {
-          "is-mobile": isMobile,
+          "zen-mode-visibility--hidden": appState.zenModeEnabled,
        },
      )}
-      title={`${capitalizeString(t("toolBar.library"))} — 0`}
+      title={`${capitalizeString(t("toolBar.library"))} — 9`}
+      style={{ marginInlineStart: "var(--space-factor)" }}
    >
      <input
        className="ToolIcon_type_checkbox"
        type="checkbox"
        name="editor-library"
        onChange={(event) => {
-          document
-            .querySelector(".layer-ui__wrapper")
-            ?.classList.remove("animate");
-          const nextState = event.target.checked;
-          setAppState({ isLibraryOpen: nextState });
-          // track only openings
-          if (nextState) {
-            trackEvent(
-              "library",
-              "toggleLibrary (open)",
-              `toolbar (${device.isMobile ? "mobile" : "desktop"})`,
-            );
-          }
+          setAppState({ isLibraryOpen: event.target.checked });
        }}
        checked={appState.isLibraryOpen}
        aria-label={capitalizeString(t("toolBar.library"))}
-        aria-keyshortcuts="0"
+        aria-keyshortcuts="9"
      />
      <div className="ToolIcon__icon">{LIBRARY_ICON}</div>
    </label>
--- a/src/components/LibraryMenu.scss
+++ b/src/components/LibraryMenu.scss
@ -1,104 +0,0 @@
-@import "open-color/open-color";
-
-.excalidraw {
-  .layer-ui__library {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .layer-ui__library-header {
-      display: flex;
-      align-items: center;
-      width: 100%;
-      margin: 2px 0 15px 0;
-      .Spinner {
-        margin-right: 1rem;
-      }
-
-      button {
-        // 2px from the left to account for focus border of left-most button
-        margin: 0 2px;
-      }
-    }
-  }
-
-  .layer-ui__sidebar {
-    .layer-ui__library {
-      padding: 0;
-      height: 100%;
-    }
-    .library-menu-items-container {
-      height: 100%;
-      width: 100%;
-    }
-  }
-
-  .layer-ui__library-message {
-    padding: 2em 4em;
-    min-width: 200px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    .Spinner {
-      margin-bottom: 1em;
-    }
-    span {
-      font-size: 0.8em;
-    }
-  }
-
-  .publish-library-success {
-    .Dialog__content {
-      display: flex;
-      flex-direction: column;
-    }
-
-    &-close.ToolIcon_type_button {
-      background-color: $oc-blue-6;
-      align-self: flex-end;
-      &:hover {
-        background-color: $oc-blue-8;
-      }
-      .ToolIcon__icon {
-        width: auto;
-        font-size: 1rem;
-        color: $oc-white;
-        padding: 0 0.5rem;
-      }
-    }
-  }
-
-  .library-menu-browse-button {
-    width: 80%;
-    min-height: 22px;
-    margin: 0 auto;
-    margin-top: 1rem;
-    padding: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    position: relative;
-
-    border-radius: var(--border-radius-lg);
-    background-color: var(--color-primary);
-    color: $oc-white;
-    text-align: center;
-    white-space: nowrap;
-    text-decoration: none !important;
-    &:hover {
-      background-color: var(--color-primary-darker);
-    }
-    &:active {
-      background-color: var(--color-primary-darkest);
-    }
-  }
-
-  .library-menu-browse-button--mobile {
-    min-height: 22px;
-    margin-left: auto;
-    a {
-      padding-right: 0;
-    }
-  }
-}
--- a/src/components/LibraryMenu.tsx
+++ b/src/components/LibraryMenu.tsx
@ -1,303 +0,0 @@
-import {
-  useRef,
-  useState,
-  useEffect,
-  useCallback,
-  RefObject,
-  forwardRef,
-} from "react";
-import Library, { libraryItemsAtom } from "../data/library";
-import { t } from "../i18n";
-import { randomId } from "../random";
-import {
-  LibraryItems,
-  LibraryItem,
-  AppState,
-  BinaryFiles,
-  ExcalidrawProps,
-} from "../types";
-import { Dialog } from "./Dialog";
-import { Island } from "./Island";
-import PublishLibrary from "./PublishLibrary";
-import { ToolButton } from "./ToolButton";
-
-import "./LibraryMenu.scss";
-import LibraryMenuItems from "./LibraryMenuItems";
-import { EVENT } from "../constants";
-import { KEYS } from "../keys";
-import { trackEvent } from "../analytics";
-import { useAtom } from "jotai";
-import { jotaiScope } from "../jotai";
-import Spinner from "./Spinner";
-import { useDevice } from "./App";
-
-const useOnClickOutside = (
-  ref: RefObject<HTMLElement>,
-  cb: (event: MouseEvent) => void,
-) => {
-  useEffect(() => {
-    const listener = (event: MouseEvent) => {
-      if (!ref.current) {
-        return;
-      }
-
-      if (
-        event.target instanceof Element &&
-        (ref.current.contains(event.target) ||
-          !document.body.contains(event.target))
-      ) {
-        return;
-      }
-
-      cb(event);
-    };
-    document.addEventListener("pointerdown", listener, false);
-
-    return () => {
-      document.removeEventListener("pointerdown", listener);
-    };
-  }, [ref, cb]);
-};
-
-const getSelectedItems = (
-  libraryItems: LibraryItems,
-  selectedItems: LibraryItem["id"][],
-) => libraryItems.filter((item) => selectedItems.includes(item.id));
-
-const LibraryMenuWrapper = forwardRef<
-  HTMLDivElement,
-  { children: React.ReactNode }
->(({ children }, ref) => {
-  return (
-    <Island padding={1} ref={ref} className="layer-ui__library">
-      {children}
-    </Island>
-  );
-});
-
-export const LibraryMenu = ({
-  onClose,
-  onInsertLibraryItems,
-  pendingElements,
-  onAddToLibrary,
-  theme,
-  setAppState,
-  files,
-  libraryReturnUrl,
-  focusContainer,
-  library,
-  id,
-  appState,
-}: {
-  pendingElements: LibraryItem["elements"];
-  onClose: () => void;
-  onInsertLibraryItems: (libraryItems: LibraryItems) => void;
-  onAddToLibrary: () => void;
-  theme: AppState["theme"];
-  files: BinaryFiles;
-  setAppState: React.Component<any, AppState>["setState"];
-  libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
-  focusContainer: () => void;
-  library: Library;
-  id: string;
-  appState: AppState;
-}) => {
-  const ref = useRef<HTMLDivElement | null>(null);
-
-  const device = useDevice();
-
-  useOnClickOutside(
-    ref,
-    useCallback(
-      (event) => {
-        // If click on the library icon, do nothing.
-        if ((event.target as Element).closest(".ToolIcon__library")) {
-          return;
-        }
-        if (!appState.isLibraryMenuDocked || !device.canDeviceFitSidebar) {
-          onClose();
-        }
-      },
-      [onClose, appState.isLibraryMenuDocked, device.canDeviceFitSidebar],
-    ),
-  );
-
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (
-        event.key === KEYS.ESCAPE &&
-        (!appState.isLibraryMenuDocked || !device.canDeviceFitSidebar)
-      ) {
-        onClose();
-      }
-    };
-    document.addEventListener(EVENT.KEYDOWN, handleKeyDown);
-    return () => {
-      document.removeEventListener(EVENT.KEYDOWN, handleKeyDown);
-    };
-  }, [onClose, appState.isLibraryMenuDocked, device.canDeviceFitSidebar]);
-
-  const [selectedItems, setSelectedItems] = useState<LibraryItem["id"][]>([]);
-  const [showPublishLibraryDialog, setShowPublishLibraryDialog] =
-    useState(false);
-  const [publishLibSuccess, setPublishLibSuccess] = useState<null | {
-    url: string;
-    authorName: string;
-  }>(null);
-
-  const [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);
-
-  const removeFromLibrary = useCallback(
-    async (libraryItems: LibraryItems) => {
-      const nextItems = libraryItems.filter(
-        (item) => !selectedItems.includes(item.id),
-      );
-      library.setLibrary(nextItems).catch(() => {
-        setAppState({ errorMessage: t("alerts.errorRemovingFromLibrary") });
-      });
-      setSelectedItems([]);
-    },
-    [library, setAppState, selectedItems, setSelectedItems],
-  );
-
-  const resetLibrary = useCallback(() => {
-    library.resetLibrary();
-    focusContainer();
-  }, [library, focusContainer]);
-
-  const addToLibrary = useCallback(
-    async (elements: LibraryItem["elements"], libraryItems: LibraryItems) => {
-      trackEvent("element", "addToLibrary", "ui");
-      if (elements.some((element) => element.type === "image")) {
-        return setAppState({
-          errorMessage: "Support for adding images to the library coming soon!",
-        });
-      }
-      const nextItems: LibraryItems = [
-        {
-          status: "unpublished",
-          elements,
-          id: randomId(),
-          created: Date.now(),
-        },
-        ...libraryItems,
-      ];
-      onAddToLibrary();
-      library.setLibrary(nextItems).catch(() => {
-        setAppState({ errorMessage: t("alerts.errorAddingToLibrary") });
-      });
-    },
-    [onAddToLibrary, library, setAppState],
-  );
-
-  const renderPublishSuccess = useCallback(() => {
-    return (
-      <Dialog
-        onCloseRequest={() => setPublishLibSuccess(null)}
-        title={t("publishSuccessDialog.title")}
-        className="publish-library-success"
-        small={true}
-      >
-        <p>
-          {t("publishSuccessDialog.content", {
-            authorName: publishLibSuccess!.authorName,
-          })}{" "}
-          <a
-            href={publishLibSuccess?.url}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            {t("publishSuccessDialog.link")}
-          </a>
-        </p>
-        <ToolButton
-          type="button"
-          title={t("buttons.close")}
-          aria-label={t("buttons.close")}
-          label={t("buttons.close")}
-          onClick={() => setPublishLibSuccess(null)}
-          data-testid="publish-library-success-close"
-          className="publish-library-success-close"
-        />
-      </Dialog>
-    );
-  }, [setPublishLibSuccess, publishLibSuccess]);
-
-  const onPublishLibSuccess = useCallback(
-    (data, libraryItems: LibraryItems) => {
-      setShowPublishLibraryDialog(false);
-      setPublishLibSuccess({ url: data.url, authorName: data.authorName });
-      const nextLibItems = libraryItems.slice();
-      nextLibItems.forEach((libItem) => {
-        if (selectedItems.includes(libItem.id)) {
-          libItem.status = "published";
-        }
-      });
-      library.setLibrary(nextLibItems);
-    },
-    [setShowPublishLibraryDialog, setPublishLibSuccess, selectedItems, library],
-  );
-
-  if (
-    libraryItemsData.status === "loading" &&
-    !libraryItemsData.isInitialized
-  ) {
-    return (
-      <LibraryMenuWrapper ref={ref}>
-        <div className="layer-ui__library-message">
-          <Spinner size="2em" />
-          <span>{t("labels.libraryLoadingMessage")}</span>
-        </div>
-      </LibraryMenuWrapper>
-    );
-  }
-
-  return (
-    <LibraryMenuWrapper ref={ref}>
-      {showPublishLibraryDialog && (
-        <PublishLibrary
-          onClose={() => setShowPublishLibraryDialog(false)}
-          libraryItems={getSelectedItems(
-            libraryItemsData.libraryItems,
-            selectedItems,
-          )}
-          appState={appState}
-          onSuccess={(data) =>
-            onPublishLibSuccess(data, libraryItemsData.libraryItems)
-          }
-          onError={(error) => window.alert(error)}
-          updateItemsInStorage={() =>
-            library.setLibrary(libraryItemsData.libraryItems)
-          }
-          onRemove={(id: string) =>
-            setSelectedItems(selectedItems.filter((_id) => _id !== id))
-          }
-        />
-      )}
-      {publishLibSuccess && renderPublishSuccess()}
-      <LibraryMenuItems
-        isLoading={libraryItemsData.status === "loading"}
-        libraryItems={libraryItemsData.libraryItems}
-        onRemoveFromLibrary={() =>
-          removeFromLibrary(libraryItemsData.libraryItems)
-        }
-        onAddToLibrary={(elements) =>
-          addToLibrary(elements, libraryItemsData.libraryItems)
-        }
-        onInsertLibraryItems={onInsertLibraryItems}
-        pendingElements={pendingElements}
-        setAppState={setAppState}
-        appState={appState}
-        libraryReturnUrl={libraryReturnUrl}
-        library={library}
-        theme={theme}
-        files={files}
-        id={id}
-        selectedItems={selectedItems}
-        onSelectItems={(ids) => setSelectedItems(ids)}
-        onPublish={() => setShowPublishLibraryDialog(true)}
-        resetLibrary={resetLibrary}
-      />
-    </LibraryMenuWrapper>
-  );
-};
--- a/src/components/LibraryMenuItems.scss
+++ b/src/components/LibraryMenuItems.scss
@ -1,115 +0,0 @@
-@import "open-color/open-color";
-
-.excalidraw {
-  .library-menu-items-container {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    padding: 0.5rem;
-    box-sizing: border-box;
-
-    .library-actions {
-      width: 100%;
-      display: flex;
-      margin-right: auto;
-      align-items: center;
-
-      button .library-actions-counter {
-        position: absolute;
-        right: 2px;
-        bottom: 2px;
-        border-radius: 50%;
-        width: 1em;
-        height: 1em;
-        padding: 1px;
-        font-size: 0.7rem;
-        background: #fff;
-      }
-
-      &--remove {
-        background-color: $oc-red-7;
-        &:hover {
-          background-color: $oc-red-8;
-        }
-        &:active {
-          background-color: $oc-red-9;
-        }
-        svg {
-          color: $oc-white;
-        }
-        .library-actions-counter {
-          color: $oc-red-7;
-        }
-      }
-
-      &--export {
-        background-color: $oc-lime-5;
-
-        &:hover {
-          background-color: $oc-lime-7;
-        }
-
-        &:active {
-          background-color: $oc-lime-8;
-        }
-        svg {
-          color: $oc-white;
-        }
-        .library-actions-counter {
-          color: $oc-lime-5;
-        }
-      }
-
-      &--publish {
-        background-color: $oc-cyan-6;
-        &:hover {
-          background-color: $oc-cyan-7;
-        }
-        &:active {
-          background-color: $oc-cyan-9;
-        }
-        svg {
-          color: $oc-white;
-        }
-        label {
-          margin-left: -0.2em;
-          margin-right: 1.1em;
-          color: $oc-white;
-          font-size: 0.86em;
-        }
-        .library-actions-counter {
-          color: $oc-cyan-6;
-        }
-      }
-
-      &--load {
-        background-color: $oc-blue-6;
-        &:hover {
-          background-color: $oc-blue-7;
-        }
-        &:active {
-          background-color: $oc-blue-9;
-        }
-        svg {
-          color: $oc-white;
-        }
-      }
-    }
-    &__items {
-      flex: 1;
-      overflow-y: auto;
-      overflow-x: hidden;
-      margin-bottom: 1rem;
-    }
-
-    .separator {
-      width: 100%;
-      display: flex;
-      align-items: center;
-      font-weight: 500;
-      font-size: 0.9rem;
-      margin: 0.6em 0.2em;
-      color: var(--text-primary-color);
-    }
-  }
-}
--- a/src/components/LibraryMenuItems.tsx
+++ b/src/components/LibraryMenuItems.tsx
@ -1,559 +0,0 @@
-import { chunk } from "lodash";
-import React, { useCallback, useState } from "react";
-import { saveLibraryAsJSON, serializeLibraryAsJSON } from "../data/json";
-import Library from "../data/library";
-import { ExcalidrawElement, NonDeleted } from "../element/types";
-import { t } from "../i18n";
-import {
-  AppState,
-  BinaryFiles,
-  ExcalidrawProps,
-  LibraryItem,
-  LibraryItems,
-} from "../types";
-import { arrayToMap, muteFSAbortError } from "../utils";
-import { useDevice } from "./App";
-import ConfirmDialog from "./ConfirmDialog";
-import { close, exportToFileIcon, load, publishIcon, trash } from "./icons";
-import { LibraryUnit } from "./LibraryUnit";
-import Stack from "./Stack";
-import { ToolButton } from "./ToolButton";
-import { Tooltip } from "./Tooltip";
-
-import "./LibraryMenuItems.scss";
-import { MIME_TYPES, VERSIONS } from "../constants";
-import Spinner from "./Spinner";
-import { fileOpen } from "../data/filesystem";
-
-import { SidebarLockButton } from "./SidebarLockButton";
-import { trackEvent } from "../analytics";
-
-const LibraryMenuItems = ({
-  isLoading,
-  libraryItems,
-  onRemoveFromLibrary,
-  onAddToLibrary,
-  onInsertLibraryItems,
-  pendingElements,
-  theme,
-  setAppState,
-  appState,
-  libraryReturnUrl,
-  library,
-  files,
-  id,
-  selectedItems,
-  onSelectItems,
-  onPublish,
-  resetLibrary,
-}: {
-  isLoading: boolean;
-  libraryItems: LibraryItems;
-  pendingElements: LibraryItem["elements"];
-  onRemoveFromLibrary: () => void;
-  onInsertLibraryItems: (libraryItems: LibraryItems) => void;
-  onAddToLibrary: (elements: LibraryItem["elements"]) => void;
-  theme: AppState["theme"];
-  files: BinaryFiles;
-  setAppState: React.Component<any, AppState>["setState"];
-  appState: AppState;
-  libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
-  library: Library;
-  id: string;
-  selectedItems: LibraryItem["id"][];
-  onSelectItems: (id: LibraryItem["id"][]) => void;
-  onPublish: () => void;
-  resetLibrary: () => void;
-}) => {
-  const renderRemoveLibAlert = useCallback(() => {
-    const content = selectedItems.length
-      ? t("alerts.removeItemsFromsLibrary", { count: selectedItems.length })
-      : t("alerts.resetLibrary");
-    const title = selectedItems.length
-      ? t("confirmDialog.removeItemsFromLib")
-      : t("confirmDialog.resetLibrary");
-    return (
-      <ConfirmDialog
-        onConfirm={() => {
-          if (selectedItems.length) {
-            onRemoveFromLibrary();
-          } else {
-            resetLibrary();
-          }
-          setShowRemoveLibAlert(false);
-        }}
-        onCancel={() => {
-          setShowRemoveLibAlert(false);
-        }}
-        title={title}
-      >
-        <p>{content}</p>
-      </ConfirmDialog>
-    );
-  }, [selectedItems, onRemoveFromLibrary, resetLibrary]);
-
-  const [showRemoveLibAlert, setShowRemoveLibAlert] = useState(false);
-  const device = useDevice();
-  const renderLibraryActions = () => {
-    const itemsSelected = !!selectedItems.length;
-    const items = itemsSelected
-      ? libraryItems.filter((item) => selectedItems.includes(item.id))
-      : libraryItems;
-    const resetLabel = itemsSelected
-      ? t("buttons.remove")
-      : t("buttons.resetLibrary");
-    return (
-      <div className="library-actions">
-        {!itemsSelected && (
-          <ToolButton
-            key="import"
-            type="button"
-            title={t("buttons.load")}
-            aria-label={t("buttons.load")}
-            icon={load}
-            onClick={async () => {
-              try {
-                await library.updateLibrary({
-                  libraryItems: fileOpen({
-                    description: "Excalidraw library files",
-                    // ToDo: Be over-permissive until https://bugs.webkit.org/show_bug.cgi?id=34442
-                    // gets resolved. Else, iOS users cannot open `.excalidraw` files.
-                    /*
-                    extensions: [".json", ".excalidrawlib"],
-                    */
-                  }),
-                  merge: true,
-                  openLibraryMenu: true,
-                });
-              } catch (error: any) {
-                if (error?.name === "AbortError") {
-                  console.warn(error);
-                  return;
-                }
-                setAppState({ errorMessage: t("errors.importLibraryError") });
-              }
-            }}
-            className="library-actions--load"
-          />
-        )}
-        {!!items.length && (
-          <>
-            <ToolButton
-              key="export"
-              type="button"
-              title={t("buttons.export")}
-              aria-label={t("buttons.export")}
-              icon={exportToFileIcon}
-              onClick={async () => {
-                const libraryItems = itemsSelected
-                  ? items
-                  : await library.getLatestLibrary();
-                saveLibraryAsJSON(libraryItems)
-                  .catch(muteFSAbortError)
-                  .catch((error) => {
-                    setAppState({ errorMessage: error.message });
-                  });
-              }}
-              className="library-actions--export"
-            >
-              {selectedItems.length > 0 && (
-                <span className="library-actions-counter">
-                  {selectedItems.length}
-                </span>
-              )}
-            </ToolButton>
-            <ToolButton
-              key="reset"
-              type="button"
-              title={resetLabel}
-              aria-label={resetLabel}
-              icon={trash}
-              onClick={() => setShowRemoveLibAlert(true)}
-              className="library-actions--remove"
-            >
-              {selectedItems.length > 0 && (
-                <span className="library-actions-counter">
-                  {selectedItems.length}
-                </span>
-              )}
-            </ToolButton>
-          </>
-        )}
-        {itemsSelected && (
-          <Tooltip label={t("hints.publishLibrary")}>
-            <ToolButton
-              type="button"
-              aria-label={t("buttons.publishLibrary")}
-              label={t("buttons.publishLibrary")}
-              icon={publishIcon}
-              className="library-actions--publish"
-              onClick={onPublish}
-            >
-              {!device.isMobile && <label>{t("buttons.publishLibrary")}</label>}
-              {selectedItems.length > 0 && (
-                <span className="library-actions-counter">
-                  {selectedItems.length}
-                </span>
-              )}
-            </ToolButton>
-          </Tooltip>
-        )}
-        {device.isMobile && (
-          <div className="library-menu-browse-button--mobile">
-            <a
-              href={`${process.env.REACT_APP_LIBRARY_URL}?target=${
-                window.name || "_blank"
-              }&referrer=${referrer}&useHash=true&token=${id}&theme=${theme}&version=${
-                VERSIONS.excalidrawLibrary
-              }`}
-              target="_excalidraw_libraries"
-            >
-              {t("labels.libraries")}
-            </a>
-          </div>
-        )}
-      </div>
-    );
-  };
-
-  const CELLS_PER_ROW = device.isMobile && !device.isSmScreen ? 6 : 4;
-
-  const referrer =
-    libraryReturnUrl || window.location.origin + window.location.pathname;
-
-  const [lastSelectedItem, setLastSelectedItem] = useState<
-    LibraryItem["id"] | null
-  >(null);
-
-  const onItemSelectToggle = (
-    id: LibraryItem["id"],
-    event: React.MouseEvent,
-  ) => {
-    const shouldSelect = !selectedItems.includes(id);
-
-    const orderedItems = [...unpublishedItems, ...publishedItems];
-
-    if (shouldSelect) {
-      if (event.shiftKey && lastSelectedItem) {
-        const rangeStart = orderedItems.findIndex(
-          (item) => item.id === lastSelectedItem,
-        );
-        const rangeEnd = orderedItems.findIndex((item) => item.id === id);
-
-        if (rangeStart === -1 || rangeEnd === -1) {
-          onSelectItems([...selectedItems, id]);
-          return;
-        }
-
-        const selectedItemsMap = arrayToMap(selectedItems);
-        const nextSelectedIds = orderedItems.reduce(
-          (acc: LibraryItem["id"][], item, idx) => {
-            if (
-              (idx >= rangeStart && idx <= rangeEnd) ||
-              selectedItemsMap.has(item.id)
-            ) {
-              acc.push(item.id);
-            }
-            return acc;
-          },
-          [],
-        );
-
-        onSelectItems(nextSelectedIds);
-      } else {
-        onSelectItems([...selectedItems, id]);
-      }
-      setLastSelectedItem(id);
-    } else {
-      setLastSelectedItem(null);
-      onSelectItems(selectedItems.filter((_id) => _id !== id));
-    }
-  };
-
-  const getInsertedElements = (id: string) => {
-    let targetElements;
-    if (selectedItems.includes(id)) {
-      targetElements = libraryItems.filter((item) =>
-        selectedItems.includes(item.id),
-      );
-    } else {
-      targetElements = libraryItems.filter((item) => item.id === id);
-    }
-    return targetElements;
-  };
-
-  const createLibraryItemCompo = (params: {
-    item:
-      | LibraryItem
-      | /* pending library item */ {
-          id: null;
-          elements: readonly NonDeleted<ExcalidrawElement>[];
-        }
-      | null;
-    onClick?: () => void;
-    key: string;
-  }) => {
-    return (
-      <Stack.Col key={params.key}>
-        <LibraryUnit
-          elements={params.item?.elements}
-          files={files}
-          isPending={!params.item?.id && !!params.item?.elements}
-          onClick={params.onClick || (() => {})}
-          id={params.item?.id || null}
-          selected={!!params.item?.id && selectedItems.includes(params.item.id)}
-          onToggle={onItemSelectToggle}
-          onDrag={(id, event) => {
-            event.dataTransfer.setData(
-              MIME_TYPES.excalidrawlib,
-              serializeLibraryAsJSON(getInsertedElements(id)),
-            );
-          }}
-        />
-      </Stack.Col>
-    );
-  };
-
-  const renderLibrarySection = (
-    items: (
-      | LibraryItem
-      | /* pending library item */ {
-          id: null;
-          elements: readonly NonDeleted<ExcalidrawElement>[];
-        }
-    )[],
-  ) => {
-    const _items = items.map((item) => {
-      if (item.id) {
-        return createLibraryItemCompo({
-          item,
-          onClick: () => onInsertLibraryItems(getInsertedElements(item.id)),
-          key: item.id,
-        });
-      }
-      return createLibraryItemCompo({
-        key: "__pending__item__",
-        item,
-        onClick: () => onAddToLibrary(pendingElements),
-      });
-    });
-
-    // ensure we render all empty cells if no items are present
-    let rows = chunk(_items, CELLS_PER_ROW);
-    if (!rows.length) {
-      rows = [[]];
-    }
-
-    return rows.map((rowItems, index, rows) => {
-      if (index === rows.length - 1) {
-        // pad row with empty cells
-        rowItems = rowItems.concat(
-          new Array(CELLS_PER_ROW - rowItems.length)
-            .fill(null)
-            .map((_, index) => {
-              return createLibraryItemCompo({
-                key: `empty_${index}`,
-                item: null,
-              });
-            }),
-        );
-      }
-      return (
-        <Stack.Row align="center" gap={1} key={index}>
-          {rowItems}
-        </Stack.Row>
-      );
-    });
-  };
-
-  const unpublishedItems = libraryItems.filter(
-    (item) => item.status !== "published",
-  );
-  const publishedItems = libraryItems.filter(
-    (item) => item.status === "published",
-  );
-
-  const renderLibraryHeader = () => {
-    return (
-      <>
-        <div className="layer-ui__library-header" key="library-header">
-          {renderLibraryActions()}
-          {device.canDeviceFitSidebar && (
-            <>
-              <div className="layer-ui__sidebar-lock-button">
-                <SidebarLockButton
-                  checked={appState.isLibraryMenuDocked}
-                  onChange={() => {
-                    document
-                      .querySelector(".layer-ui__wrapper")
-                      ?.classList.add("animate");
-                    const nextState = !appState.isLibraryMenuDocked;
-                    setAppState({
-                      isLibraryMenuDocked: nextState,
-                    });
-                    trackEvent(
-                      "library",
-                      `toggleLibraryDock (${nextState ? "dock" : "undock"})`,
-                      `sidebar (${device.isMobile ? "mobile" : "desktop"})`,
-                    );
-                  }}
-                />
-              </div>
-            </>
-          )}
-          {!device.isMobile && (
-            <div className="ToolIcon__icon__close">
-              <button
-                className="Modal__close"
-                onClick={() =>
-                  setAppState({
-                    isLibraryOpen: false,
-                  })
-                }
-                aria-label={t("buttons.close")}
-              >
-                {close}
-              </button>
-            </div>
-          )}
-        </div>
-      </>
-    );
-  };
-
-  const renderLibraryMenuItems = () => {
-    return (
-      <Stack.Col
-        className="library-menu-items-container__items"
-        align="start"
-        gap={1}
-        style={{
-          flex: publishedItems.length > 0 ? 1 : "0 1 auto",
-          marginBottom: 0,
-        }}
-      >
-        <>
-          <div className="separator">
-            {(pendingElements.length > 0 ||
-              unpublishedItems.length > 0 ||
-              publishedItems.length > 0) && (
-              <div>{t("labels.personalLib")}</div>
-            )}
-            {isLoading && (
-              <div
-                style={{
-                  marginLeft: "auto",
-                  marginRight: "1rem",
-                  display: "flex",
-                  alignItems: "center",
-                  fontWeight: "normal",
-                }}
-              >
-                <div style={{ transform: "translateY(2px)" }}>
-                  <Spinner />
-                </div>
-              </div>
-            )}
-          </div>
-          {!pendingElements.length && !unpublishedItems.length ? (
-            <div
-              style={{
-                height: 65,
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                justifyContent: "center",
-                width: "100%",
-                fontSize: ".9rem",
-              }}
-            >
-              {t("library.noItems")}
-              <div
-                style={{
-                  margin: ".6rem 0",
-                  fontSize: ".8em",
-                  width: "70%",
-                  textAlign: "center",
-                }}
-              >
-                {publishedItems.length > 0
-                  ? t("library.hint_emptyPrivateLibrary")
-                  : t("library.hint_emptyLibrary")}
-              </div>
-            </div>
-          ) : (
-            renderLibrarySection([
-              // append pending library item
-              ...(pendingElements.length
-                ? [{ id: null, elements: pendingElements }]
-                : []),
-              ...unpublishedItems,
-            ])
-          )}
-        </>
-
-        <>
-          {(publishedItems.length > 0 ||
-            (!device.isMobile &&
-              (pendingElements.length > 0 || unpublishedItems.length > 0))) && (
-            <div className="separator">{t("labels.excalidrawLib")}</div>
-          )}
-          {publishedItems.length > 0 ? (
-            renderLibrarySection(publishedItems)
-          ) : unpublishedItems.length > 0 ? (
-            <div
-              style={{
-                margin: "1rem 0",
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                justifyContent: "center",
-                width: "100%",
-                fontSize: ".9rem",
-              }}
-            >
-              {t("library.noItems")}
-            </div>
-          ) : null}
-        </>
-      </Stack.Col>
-    );
-  };
-
-  const renderLibraryFooter = () => {
-    return (
-      <a
-        className="library-menu-browse-button"
-        href={`${process.env.REACT_APP_LIBRARY_URL}?target=${
-          window.name || "_blank"
-        }&referrer=${referrer}&useHash=true&token=${id}&theme=${theme}&version=${
-          VERSIONS.excalidrawLibrary
-        }`}
-        target="_excalidraw_libraries"
-      >
-        {t("labels.libraries")}
-      </a>
-    );
-  };
-
-  return (
-    <div
-      className="library-menu-items-container"
-      style={
-        device.isMobile
-          ? {
-              minHeight: "200px",
-              maxHeight: "70vh",
-            }
-          : undefined
-      }
-    >
-      {showRemoveLibAlert && renderRemoveLibAlert()}
-      {renderLibraryHeader()}
-      {renderLibraryMenuItems()}
-      {!device.isMobile && renderLibraryFooter()}
-    </div>
-  );
-};
-
-export default LibraryMenuItems;
--- a/src/components/LibraryUnit.scss
+++ b/src/components/LibraryUnit.scss
@ -1,30 +1,16 @@
-@import "../css/variables.module";
-
 .excalidraw {
  .library-unit {
    align-items: center;
-    border: 1px solid transparent;
+    border: 1px solid var(--button-gray-2);
    display: flex;
    justify-content: center;
    position: relative;
    width: 63px;
    height: 63px; // match width
-
-    &--hover {
-      box-shadow: inset 0px 0px 0px 2px $oc-blue-5;
-      border-color: $oc-blue-5;
-    }
-
-    &--selected {
-      box-shadow: inset 0px 0px 0px 2px $oc-blue-8;
-      border-color: $oc-blue-8;
-    }
  }

  .library-unit__dragger {
    display: flex;
-    align-items: center;
-    justify-content: center;
    height: 100%;
    width: 100%;
  }
@ -36,9 +22,9 @@
    max-width: 100%;
  }

-  .library-unit__checkbox-container,
-  .library-unit__checkbox-container:hover,
-  .library-unit__checkbox-container:active {
+  .library-unit__removeFromLibrary,
+  .library-unit__removeFromLibrary:hover,
+  .library-unit__removeFromLibrary:active {
    align-items: center;
    background: none;
    border: none;
@ -46,35 +32,10 @@
    display: flex;
    justify-content: center;
    margin: 0;
-    padding: 0.5rem;
+    padding: 0;
    position: absolute;
-    left: 2rem;
-    bottom: 2rem;
-    cursor: pointer;
-
-    input {
-      cursor: pointer;
-    }
-  }
-
-  .library-unit__checkbox {
-    position: absolute;
-    left: 2.3rem;
-    bottom: 2.3rem;
-
-    .Checkbox-box {
-      width: 13px;
-      height: 13px;
-      border-radius: 2px;
-      margin: 0.5em 0.5em 0.2em 0.2em;
-      background-color: $oc-blue-1;
-    }
-
-    &.Checkbox:hover {
-      .Checkbox-box {
-        background-color: $oc-blue-2;
-      }
-    }
+    right: 5px;
+    top: 5px;
  }

  .library-unit__removeFromLibrary > svg {
@ -82,37 +43,29 @@
    width: 16px;
  }

-  .library-unit__adder {
+  .library-unit__pulse {
    transform: scale(1);
-    animation: library-unit__adder-animation 1s ease-in infinite;
+    animation: library-unit__pulse-animation 1s ease-in infinite;
  }

  .library-unit__adder {
    position: absolute;
-    left: 40%;
-    top: 40%;
-    width: 2rem;
-    height: 2rem;
+    left: 50%;
+    top: 50%;
+    width: 20px;
+    height: 20px;
    margin-left: -10px;
    margin-top: -10px;
    pointer-events: none;
  }
-  .library-unit:hover .library-unit__adder {
-    fill: $oc-blue-7;
-  }
-  .library-unit:active .library-unit__adder {
-    animation: none;
-    transform: scale(0.8);
-    fill: $oc-black;
-  }

  .library-unit__active {
    cursor: pointer;
  }

-  @keyframes library-unit__adder-animation {
+  @keyframes library-unit__pulse-animation {
    0% {
-      transform: scale(0.85);
+      transform: scale(0.95);
    }

    50% {
@ -120,7 +73,7 @@
    }

    100% {
-      transform: scale(0.85);
+      transform: scale(0.95);
    }
  }
 }
--- a/src/components/LibraryUnit.tsx
+++ b/src/components/LibraryUnit.tsx
@ -1,120 +1,104 @@
 import clsx from "clsx";
 import oc from "open-color";
-import { useEffect, useRef, useState } from "react";
-import { useDevice } from "../components/App";
+import React, { useEffect, useRef, useState } from "react";
+import { close } from "../components/icons";
+import { MIME_TYPES } from "../constants";
+import { t } from "../i18n";
+import { useIsMobile } from "../components/App";
 import { exportToSvg } from "../scene/export";
-import { BinaryFiles, LibraryItem } from "../types";
+import { LibraryItem } from "../types";
 import "./LibraryUnit.scss";
-import { CheckboxItem } from "./CheckboxItem";

+// fa-plus
 const PLUS_ICON = (
  <svg viewBox="0 0 1792 1792">
    <path
-      d="M1600 736v192c0 26.667-9.33 49.333-28 68-18.67 18.67-41.33 28-68 28h-416v416c0 26.67-9.33 49.33-28 68s-41.33 28-68 28H800c-26.667 0-49.333-9.33-68-28s-28-41.33-28-68v-416H288c-26.667 0-49.333-9.33-68-28-18.667-18.667-28-41.333-28-68V736c0-26.667 9.333-49.333 28-68s41.333-28 68-28h416V224c0-26.667 9.333-49.333 28-68s41.333-28 68-28h192c26.67 0 49.33 9.333 68 28s28 41.333 28 68v416h416c26.67 0 49.33 9.333 68 28s28 41.333 28 68Z"
-      style={{
-        stroke: "#fff",
-        strokeWidth: 140,
-      }}
-      transform="translate(0 64)"
+      fill="currentColor"
+      d="M1600 736v192q0 40-28 68t-68 28h-416v416q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-416h-416q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h416v-416q0-40 28-68t68-28h192q40 0 68 28t28 68v416h416q40 0 68 28t28 68z"
    />
  </svg>
 );

 export const LibraryUnit = ({
-  id,
  elements,
-  files,
-  isPending,
+  pendingElements,
+  onRemoveFromLibrary,
  onClick,
-  selected,
-  onToggle,
-  onDrag,
 }: {
-  id: LibraryItem["id"] | /** for pending item */ null;
-  elements?: LibraryItem["elements"];
-  files: BinaryFiles;
-  isPending?: boolean;
+  elements?: LibraryItem;
+  pendingElements?: LibraryItem;
+  onRemoveFromLibrary: () => void;
  onClick: () => void;
-  selected: boolean;
-  onToggle: (id: string, event: React.MouseEvent) => void;
-  onDrag: (id: string, event: React.DragEvent) => void;
 }) => {
  const ref = useRef<HTMLDivElement | null>(null);
  useEffect(() => {
-    const node = ref.current;
-    if (!node) {
+    const elementsToRender = elements || pendingElements;
+    if (!elementsToRender) {
      return;
    }
+    let svg: SVGSVGElement;
+    const current = ref.current!;

    (async () => {
-      if (!elements) {
-        return;
+      svg = await exportToSvg(elementsToRender, {
+        exportBackground: false,
+        viewBackgroundColor: oc.white,
+      });
+      for (const child of ref.current!.children) {
+        if (child.tagName !== "svg") {
+          continue;
+        }
+        current!.removeChild(child);
      }
-      const svg = await exportToSvg(
-        elements,
-        {
-          exportBackground: false,
-          viewBackgroundColor: oc.white,
-        },
-        files,
-      );
-      node.innerHTML = svg.outerHTML;
+      current!.appendChild(svg);
    })();

    return () => {
-      node.innerHTML = "";
+      if (svg) {
+        current.removeChild(svg);
+      }
    };
-  }, [elements, files]);
+  }, [elements, pendingElements]);

  const [isHovered, setIsHovered] = useState(false);
-  const isMobile = useDevice().isMobile;
-  const adder = isPending && (
+  const isMobile = useIsMobile();
+
+  const adder = (isHovered || isMobile) && pendingElements && (
    <div className="library-unit__adder">{PLUS_ICON}</div>
  );

  return (
    <div
      className={clsx("library-unit", {
-        "library-unit__active": elements,
-        "library-unit--hover": elements && isHovered,
-        "library-unit--selected": selected,
+        "library-unit__active": elements || pendingElements,
      })}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <div
        className={clsx("library-unit__dragger", {
-          "library-unit__pulse": !!isPending,
+          "library-unit__pulse": !!pendingElements,
        })}
        ref={ref}
        draggable={!!elements}
-        onClick={
-          !!elements || !!isPending
-            ? (event) => {
-                if (id && event.shiftKey) {
-                  onToggle(id, event);
-                } else {
-                  onClick();
-                }
-              }
-            : undefined
-        }
+        onClick={!!elements || !!pendingElements ? onClick : undefined}
        onDragStart={(event) => {
-          if (!id) {
-            event.preventDefault();
-            return;
-          }
          setIsHovered(false);
-          onDrag(id, event);
+          event.dataTransfer.setData(
+            MIME_TYPES.excalidrawlib,
+            JSON.stringify(elements),
+          );
        }}
      />
      {adder}
-      {id && elements && (isHovered || isMobile || selected) && (
-        <CheckboxItem
-          checked={selected}
-          onChange={(checked, event) => onToggle(id, event)}
-          className="library-unit__checkbox"
-        />
+      {elements && (isHovered || isMobile) && (
+        <button
+          className="library-unit__removeFromLibrary"
+          aria-label={t("labels.removeFromLibrary")}
+          onClick={onRemoveFromLibrary}
+        >
+          {close}
+        </button>
      )}
    </div>
  );
--- a/src/components/LoadingMessage.tsx
+++ b/src/components/LoadingMessage.tsx
@ -1,30 +1,11 @@
+import React from "react";
 import { t } from "../i18n";
-import { useState, useEffect } from "react";
-import Spinner from "./Spinner";
-
-export const LoadingMessage: React.FC<{ delay?: number }> = ({ delay }) => {
-  const [isWaiting, setIsWaiting] = useState(!!delay);
-
-  useEffect(() => {
-    if (!delay) {
-      return;
-    }
-    const timer = setTimeout(() => {
-      setIsWaiting(false);
-    }, delay);
-    return () => clearTimeout(timer);
-  }, [delay]);
-
-  if (isWaiting) {
-    return null;
-  }

+export const LoadingMessage = () => {
+  // !! KEEP THIS IN SYNC WITH index.html !!
  return (
    <div className="LoadingMessage">
-      <div>
-        <Spinner />
-      </div>
-      <div className="LoadingMessage-text">{t("labels.loadingScene")}</div>
+      <span>{t("labels.loadingScene")}</span>
    </div>
  );
 };
--- a/src/components/LockButton.tsx
+++ b/src/components/LockButton.tsx
@ -10,7 +10,6 @@ type LockIconProps = {
  checked: boolean;
  onChange?(): void;
  zenModeEnabled?: boolean;
-  isMobile?: boolean;
 };

 const DEFAULT_SIZE: ToolButtonSize = "medium";
@ -43,10 +42,10 @@ export const LockButton = (props: LockIconProps) => {
  return (
    <label
      className={clsx(
-        "ToolIcon ToolIcon__lock ToolIcon_type_floating",
+        "ToolIcon ToolIcon__lock ToolIcon_type_floating zen-mode-visibility",
        `ToolIcon_size_${DEFAULT_SIZE}`,
        {
-          "is-mobile": props.isMobile,
+          "zen-mode-visibility--hidden": props.zenModeEnabled,
        },
      )}
      title={`${props.title} — Q`}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
dwelle	50a7ac431a	release @excalidraw/excalidraw@0.10.1	2022-05-30 21:52:45 +02:00
David Luzar	4fe66d5d5e	fix: unsafely accessing draggingElement (#5216 )	2022-05-30 21:34:19 +02:00