Merge remote-tracking branch 'origin/master' into template

2025-04-14 16:40:58 -04:00 · 2022-07-22 19:06:07 +05:30 · 2022-07-22 19:06:07 +05:30 · 381817053c
commit 381817053c
parent bfa2dd4663 58845e450a
286 changed files with 20717 additions and 12246 deletions
--- a/.env.development
+++ b/.env.development
@ -4,5 +4,19 @@ 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

-REACT_APP_SOCKET_SERVER_URL=http://localhost:3002
+# 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
@ -4,8 +4,14 @@ 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_SOCKET_SERVER_URL=https://oss-collab-us1.excalidraw.com
+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/.github/dependabot.yml
+++ b/.github/dependabot.yml
@ -1,37 +0,0 @@
-version: 2
-updates:
-  - package-ecosystem: npm
-    directory: /
-    schedule:
-      interval: weekly
-      day: sunday
-      time: "01:00"
-    reviewers:
-      - lipis
-    assignees:
-      - lipis
-    open-pull-requests-limit: 20
-
-  - package-ecosystem: npm
-    directory: /src/packages/excalidraw/
-    schedule:
-      interval: weekly
-      day: sunday
-      time: "01:00"
-    reviewers:
-      - ad1992
-    assignees:
-      - ad1992
-    open-pull-requests-limit: 20
-
-  - package-ecosystem: npm
-    directory: /src/packages/utils/
-    schedule:
-      interval: weekly
-      day: sunday
-      time: "01:00"
-    reviewers:
-      - ad1992
-    assignees:
-      - ad1992
-    open-pull-requests-limit: 20
--- a/.github/workflows/autorelease-excalidraw.yml
+++ b/.github/workflows/autorelease-excalidraw.yml
@ -1,4 +1,4 @@
-name: Auto release @excalidraw/excalidraw-next
+name: Auto release excalidraw next
 on:
  push:
    branches:
@ -23,4 +23,5 @@ 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
@ -0,0 +1,55 @@
+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
@ -1,29 +0,0 @@
-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/test.yml
+++ b/.github/workflows/test.yml
@ -10,7 +10,7 @@ jobs:
      - name: Setup Node.js 14.x
        uses: actions/setup-node@v2
        with:
-          node-version: 16.x
+          node-version: 14.x
      - name: Install and test
        run: |
          yarn --frozen-lockfile
--- a/.gitignore
+++ b/.gitignore
@ -23,3 +23,7 @@ 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/README.md
+++ b/README.md
@ -32,6 +32,10 @@ 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
@ -124,14 +128,41 @@ For collaboration, you will need to set up [collab server](https://github.com/ex

 #### Commands

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

 #### Docker Compose

--- a/firebase-project/storage.rules
+++ b/firebase-project/storage.rules
@ -1,12 +1,11 @@
 rules_version = '2';
 service firebase.storage {
  match /b/{bucket}/o {
-    match /{migrations} {
-      match /{scenes}/{scene} {
-      	allow get, write: if true;
-        // redundant, but let's be explicit'
-        allow list: if false;
-      }
+    match /{files}/rooms/{room}/{file} {
+    	allow get, write: if true;
+    }
+    match /{files}/shareLinks/{shareLink}/{file} {
+    	allow get, write: if true;
    }
  }
 }
--- a/package.json
+++ b/package.json
@ -21,23 +21,24 @@
  "dependencies": {
    "@sentry/browser": "6.2.5",
    "@sentry/integrations": "6.2.5",
-    "@testing-library/jest-dom": "5.16.1",
-    "@testing-library/react": "12.1.2",
-    "@tldraw/vec": "1.4.3",
+    "@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.38",
-    "@types/react-dom": "17.0.11",
+    "@types/react": "18.0.15",
+    "@types/react-dom": "18.0.6",
    "@types/socket.io-client": "1.4.36",
-    "browser-fs-access": "0.23.0",
+    "browser-fs-access": "0.29.1",
    "clsx": "1.1.1",
    "fake-indexeddb": "3.1.7",
    "firebase": "8.3.3",
-    "i18next-browser-languagedetector": "6.1.2",
+    "i18next-browser-languagedetector": "6.1.4",
    "idb-keyval": "6.0.3",
    "image-blob-reduce": "3.0.1",
+    "jotai": "1.6.4",
    "lodash.throttle": "4.1.1",
-    "nanoid": "3.1.32",
+    "nanoid": "3.3.3",
    "open-color": "1.9.1",
    "pako": "1.0.11",
    "perfect-freehand": "1.0.16",
@ -46,35 +47,34 @@
    "png-chunks-extract": "1.0.0",
    "points-on-curve": "0.2.0",
    "pwacompat": "2.0.17",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
    "react-scripts": "4.0.3",
    "roughjs": "4.5.2",
-    "sass": "1.47.0",
+    "sass": "1.51.0",
    "socket.io-client": "2.3.1",
-    "typescript": "4.5.4"
+    "typescript": "4.5.5"
  },
  "devDependencies": {
    "@excalidraw/eslint-config": "1.0.0",
    "@excalidraw/prettier-config": "1.0.2",
    "@types/chai": "4.3.0",
-    "@types/lodash.throttle": "4.1.6",
+    "@types/lodash.throttle": "4.1.7",
    "@types/pako": "1.0.3",
-    "@types/resize-observer-browser": "0.1.6",
-    "chai": "4.3.4",
-    "dotenv": "10.0.0",
-    "eslint-config-prettier": "8.3.0",
+    "@types/resize-observer-browser": "0.1.7",
+    "chai": "4.3.6",
+    "dotenv": "16.0.1",
+    "eslint-config-prettier": "8.5.0",
    "eslint-plugin-prettier": "3.3.1",
-    "firebase-tools": "9.23.0",
    "husky": "7.0.4",
-    "jest-canvas-mock": "2.3.1",
-    "lint-staged": "12.1.7",
+    "jest-canvas-mock": "2.4.0",
+    "lint-staged": "12.3.7",
    "pepjs": "0.5.3",
-    "prettier": "2.5.1",
-    "rewire": "5.0.0"
+    "prettier": "2.6.2",
+    "rewire": "6.0.0"
  },
  "resolutions": {
-    "@typescript-eslint/typescript-estree": "5.3.0"
+    "@typescript-eslint/typescript-estree": "5.10.2"
  },
  "engines": {
    "node": ">=14.0.0"
@ -94,7 +94,8 @@
    "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": "yarn build:app && yarn build:version",
+    "build:prebuild": "node ./scripts/prebuild.js",
+    "build": "yarn build:prebuild && yarn build:app && yarn build:version",
    "eject": "react-scripts eject",
    "fix:code": "yarn test:code --fix",
    "fix:other": "yarn prettier --write",
@ -112,6 +113,8 @@
    "test:typecheck": "tsc",
    "test:update": "yarn test:app --updateSnapshot --watchAll=false",
    "test": "yarn test:app",
-    "autorelease": "node scripts/autorelease.js"
+    "autorelease": "node scripts/autorelease.js",
+    "prerelease": "node scripts/prerelease.js",
+    "release": "node scripts/release.js"
  }
 }
--- a/public/index.html
+++ b/public/index.html
@ -52,6 +52,25 @@
      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 -->
@ -72,12 +91,6 @@
      crossorigin="anonymous"
    />

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

    <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.
@ -130,26 +159,6 @@
        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;
@ -158,8 +167,10 @@
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
+      }

-        @media screen and (min-width: 1200px) {
+      @media screen and (min-width: 1200px) {
+        #root {
          -webkit-touch-callout: default;
          -webkit-user-select: auto;
          -khtml-user-select: auto;
@ -176,10 +187,6 @@
    <header>
      <h1 class="visually-hidden">Excalidraw</h1>
    </header>
-    <div id="root">
-      <div class="LoadingMessage">
-        <span>Loading scene...</span>
-      </div>
-    </div>
+    <div id="root"></div>
  </body>
 </html>
--- a/public/service-worker.js
+++ b/public/service-worker.js
@ -17,11 +17,23 @@
 * See https://goo.gl/2aRDsh
 */

-importScripts("/workbox/workbox-sw.js");
+// in dev, `process` is undefined because this file is not compiled until build
+const IS_DEVELOPMENT =
+  typeof process === "undefined" || process.env.NODE_ENV !== "production";

-workbox.setConfig({
-  modulePathPrefix: "/workbox/",
-});
+if (IS_DEVELOPMENT) {
+  importScripts(
+    "https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js",
+  );
+  workbox.setConfig({
+    debug: true,
+  });
+} else {
+  importScripts("/workbox/workbox-sw.js");
+  workbox.setConfig({
+    modulePathPrefix: "/workbox/",
+  });
+}

 self.addEventListener("message", (event) => {
  if (event.data && event.data.type === "SKIP_WAITING") {
@ -30,14 +42,17 @@ self.addEventListener("message", (event) => {
 });

 workbox.core.clientsClaim();
-workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);

-workbox.routing.registerNavigationRoute(
-  workbox.precaching.getCacheKeyForURL("./index.html"),
-  {
-    blacklist: [/^\/_/, /\/[^/?]+\.[^/]+$/],
-  },
-);
+if (!IS_DEVELOPMENT) {
+  workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);
+
+  workbox.routing.registerNavigationRoute(
+    workbox.precaching.getCacheKeyForURL("./index.html"),
+    {
+      blacklist: [/^\/_/, /\/[^/?]+\.[^/]+$/],
+    },
+  );
+}

 // Cache relevant font files
 workbox.routing.registerRoute(
--- a/scripts/autorelease.js
+++ b/scripts/autorelease.js
@ -1,32 +1,43 @@
 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`);
+    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);
  }
 };
-
 // 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/;

@ -37,16 +48,25 @@ exec(`git diff --name-only HEAD^ HEAD`, async (error, stdout, stderr) => {
    );
  });
  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
-  pkg.version = `${pkg.version}-${getShortCommitHash()}`;
-  pkg.name = "@excalidraw/excalidraw-next";
-  fs.writeFileSync(excalidrawPackage, JSON.stringify(pkg, null, 2), "utf8");
+  let version = `${pkg.version}-${getShortCommitHash()}`;

  // update readme
-  const data = fs.readFileSync(`${excalidrawDir}/README_NEXT.md`, "utf8");
-  fs.writeFileSync(`${excalidrawDir}/README.md`, data, "utf8");
+
+  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;
+
+  fs.writeFileSync(excalidrawPackage, JSON.stringify(pkg, null, 2), "utf8");
+
+  console.info("Publish in progress...");
  publish();
 });
--- a/scripts/locales-coverage-description.js
+++ b/scripts/locales-coverage-description.js
@ -36,6 +36,7 @@ const crowdinMap = {
  "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",
@ -47,6 +48,8 @@ const crowdinMap = {
  "lv-LV": "en-lv",
  "cs-CZ": "en-cs",
  "kk-KZ": "en-kk",
+  "vi-vn": "en-vi",
+  "mr-in": "en-mr",
 };

 const flags = {
@ -86,6 +89,7 @@ const flags = {
  "ru-RU": "🇷🇺",
  "si-LK": "🇱🇰",
  "sk-SK": "🇸🇰",
+  "sl-SI": "🇸🇮",
  "sv-SE": "🇸🇪",
  "ta-IN": "🇮🇳",
  "tr-TR": "🇹🇷",
@ -93,6 +97,9 @@ const flags = {
  "zh-CN": "🇨🇳",
  "zh-HK": "🇭🇰",
  "zh-TW": "🇹🇼",
+  "eu-ES": "🇪🇦",
+  "vi-VN": "🇻🇳",
+  "mr-IN": "🇮🇳",
 };

 const languages = {
@ -133,6 +140,7 @@ const languages = {
  "ru-RU": "Русский",
  "si-LK": "සිංහල",
  "sk-SK": "Slovenčina",
+  "sl-SI": "Slovenščina",
  "sv-SE": "Svenska",
  "ta-IN": "Tamil",
  "tr-TR": "Türkçe",
@ -140,6 +148,8 @@ const languages = {
  "zh-CN": "简体中文",
  "zh-HK": "繁體中文 (香港)",
  "zh-TW": "繁體中文",
+  "vi-VN": "Tiếng Việt",
+  "mr-IN": "मराठी",
 };

 const percentages = fs.readFileSync(
--- a/scripts/prebuild.js
+++ b/scripts/prebuild.js
@ -0,0 +1,20 @@
+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
@ -0,0 +1,37 @@
+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,39 +1,44 @@
 const fs = require("fs");
-const util = require("util");
-const exec = util.promisify(require("child_process").exec);
-const updateReadme = require("./updateReadme");
-const updateChangelog = require("./updateChangelog");
+const { execSync } = require("child_process");

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

-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 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 release = async (nextVersion) => {
+const publish = () => {
  try {
-    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!");
+    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);
    process.exit(1);
  }
 };

-const nextVersion = process.argv.slice(2)[0];
-if (!nextVersion) {
-  console.error("Pass the next version to release!");
-  process.exit(1);
-}
-release(nextVersion);
+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();
--- 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}"`;
@ -53,19 +53,26 @@ const getLibraryCommitsSinceLastRelease = async () => {
    const messageWithoutType = commit.slice(indexOfColon + 1).trim();
    const messageWithCapitalizeFirst =
      messageWithoutType.charAt(0).toUpperCase() + messageWithoutType.slice(1);
-    const prNumber = commit.match(/\(#([0-9]*)\)/)[1];
+    const prMatch = commit.match(/\(#([0-9]*)\)/);
+    if (prMatch) {
+      const prNumber = prMatch[1];

-    // return if the changelog already contains the pr number which would happen for package updates
-    if (existingChangeLog.includes(prNumber)) {
-      return;
+      // 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);
    }
-    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
@ -1,27 +0,0 @@
-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
@ -7,6 +7,7 @@ import { t } from "../i18n";

 export const actionAddToLibrary = register({
  name: "addToLibrary",
+  trackEvent: { category: "element" },
  perform: (elements, appState, _, app) => {
    const selectedElements = getSelectedElements(
      getNonDeletedElements(elements),
@ -24,9 +25,9 @@ export const actionAddToLibrary = register({
    }

    return app.library
-      .loadLibrary()
+      .getLatestLibrary()
      .then((items) => {
-        return app.library.saveLibrary([
+        return app.library.setLibrary([
          {
            id: randomId(),
            status: "unpublished",
@ -41,7 +42,7 @@ export const actionAddToLibrary = register({
          commitToHistory: false,
          appState: {
            ...appState,
-            toastMessage: t("toast.addedToLibrary"),
+            toast: { message: t("toast.addedToLibrary") },
          },
        };
      })
--- a/src/actions/actionAlign.tsx
+++ b/src/actions/actionAlign.tsx
@ -43,6 +43,7 @@ const alignSelectedElements = (

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

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

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

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

 export const actionAlignVerticallyCentered = register({
  name: "alignVerticallyCentered",
+  trackEvent: { category: "element" },
+
  perform: (elements, appState) => {
    return {
      appState,
@ -184,6 +191,7 @@ 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
@ -0,0 +1,136 @@
+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,5 +1,5 @@
 import { ColorPicker } from "../components/ColorPicker";
-import { zoomIn, zoomOut } from "../components/icons";
+import { eraser, zoomIn, zoomOut } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
 import { DarkModeToggle } from "../components/DarkModeToggle";
 import { THEME, ZOOM_STEP } from "../constants";
@ -9,24 +9,26 @@ import { t } from "../i18n";
 import { CODES, KEYS } from "../keys";
 import { getNormalizedZoom, getSelectedElements } from "../scene";
 import { centerScrollOn } from "../scene/scroll";
-import { getNewZoom } from "../scene/zoom";
+import { getStateForZoom } from "../scene/zoom";
 import { AppState, NormalizedZoomValue } from "../types";
-import { getShortcutKey } from "../utils";
+import { getShortcutKey, updateActiveTool } from "../utils";
 import { register } from "./register";
 import { Tooltip } from "../components/Tooltip";
 import { newElementWith } from "../element/mutateElement";
-import { getDefaultAppState } from "../appState";
+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: ({ appState, updateData }) => {
+  PanelComponent: ({ elements, appState, updateData }) => {
    return (
      <div style={{ position: "relative" }}>
        <ColorPicker
@ -39,6 +41,8 @@ export const actionChangeViewBackgroundColor = register({
            updateData({ openPopup: active ? "canvasColorPicker" : null })
          }
          data-testid="canvas-background-picker"
+          elements={elements}
+          appState={appState}
        />
      </div>
    );
@ -47,6 +51,7 @@ export const actionChangeViewBackgroundColor = register({

 export const actionClearCanvas = register({
  name: "clearCanvas",
+  trackEvent: { category: "canvas" },
  perform: (elements, appState, _, app) => {
    app.imageCache.clear();
    return {
@ -57,12 +62,17 @@ export const actionClearCanvas = register({
        ...getDefaultAppState(),
        files: {},
        theme: appState.theme,
-        elementLocked: appState.elementLocked,
+        penMode: appState.penMode,
+        penDetected: appState.penDetected,
        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,
    };
@ -73,17 +83,19 @@ export const actionClearCanvas = register({

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

 export const actionZoomOut = register({
  name: "zoomOut",
-  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 },
-    );
-
+  trackEvent: { category: "canvas" },
+  perform: (_elements, appState, _, app) => {
    return {
      appState: {
        ...appState,
-        zoom,
+        ...getStateForZoom(
+          {
+            viewportX: appState.width / 2 + appState.offsetLeft,
+            viewportY: appState.height / 2 + appState.offsetTop,
+            nextZoom: getNormalizedZoom(appState.zoom.value - ZOOM_STEP),
+          },
+          appState,
+        ),
      },
      commitToHistory: false,
    };
@ -142,18 +155,18 @@ export const actionZoomOut = register({

 export const actionResetZoom = register({
  name: "resetZoom",
-  perform: (_elements, appState) => {
+  trackEvent: { category: "canvas" },
+  perform: (_elements, appState, _, app) => {
    return {
      appState: {
        ...appState,
-        zoom: getNewZoom(
-          1 as NormalizedZoomValue,
-          appState.zoom,
-          { left: appState.offsetLeft, top: appState.offsetTop },
+        ...getStateForZoom(
          {
-            x: appState.width / 2,
-            y: appState.height / 2,
+            viewportX: appState.width / 2 + appState.offsetLeft,
+            viewportY: appState.height / 2 + appState.offsetTop,
+            nextZoom: getNormalizedZoom(1),
          },
+          appState,
        ),
      },
      commitToHistory: false,
@ -212,14 +225,12 @@ const zoomToFitElements = (
      ? getCommonBounds(selectedElements)
      : getCommonBounds(nonDeletedElements);

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

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

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

 export const actionToggleTheme = register({
  name: "toggleTheme",
+  trackEvent: { category: "canvas" },
  perform: (_, appState, value) => {
    return {
      appState: {
@ -285,3 +299,49 @@ 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,16 +1,23 @@
 import { CODES, KEYS } from "../keys";
 import { register } from "./register";
-import { copyToClipboard } from "../clipboard";
+import {
+  copyTextToSystemClipboard,
+  copyToClipboard,
+  probablySupportsClipboardWriteText,
+} from "../clipboard";
 import { actionDeleteSelected } from "./actionDeleteSelected";
 import { getSelectedElements } from "../scene/selection";
 import { exportCanvas } from "../data/index";
-import { getNonDeletedElements } from "../element";
+import { getNonDeletedElements, isTextElement } from "../element";
 import { t } from "../i18n";

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

    return {
      commitToHistory: false,
@ -23,6 +30,7 @@ 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);
@ -33,6 +41,7 @@ export const actionCut = register({

 export const actionCopyAsSvg = register({
  name: "copyAsSvg",
+  trackEvent: { category: "element" },
  perform: async (elements, appState, _data, app) => {
    if (!app.canvas) {
      return {
@ -73,6 +82,7 @@ export const actionCopyAsSvg = register({

 export const actionCopyAsPng = register({
  name: "copyAsPng",
+  trackEvent: { category: "element" },
  perform: async (elements, appState, _data, app) => {
    if (!app.canvas) {
      return {
@ -97,14 +107,16 @@ export const actionCopyAsPng = register({
      return {
        appState: {
          ...appState,
-          toastMessage: t("toast.copyToClipboardAsPng", {
-            exportSelection: selectedElements.length
-              ? t("toast.selection")
-              : t("toast.canvas"),
-            exportColorScheme: appState.exportWithDarkMode
-              ? t("buttons.darkMode")
-              : t("buttons.lightMode"),
-          }),
+          toast: {
+            message: t("toast.copyToClipboardAsPng", {
+              exportSelection: selectedElements.length
+                ? t("toast.selection")
+                : t("toast.canvas"),
+              exportColorScheme: appState.exportWithDarkMode
+                ? t("buttons.darkMode")
+                : t("buttons.lightMode"),
+            }),
+          },
        },
        commitToHistory: false,
      };
@ -122,3 +134,35 @@ 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
@ -12,6 +12,7 @@ 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[],
@ -58,6 +59,7 @@ const handleGroupEditingState = (

 export const actionDeleteSelected = register({
  name: "deleteSelectedElements",
+  trackEvent: { category: "element", action: "delete" },
  perform: (elements, appState) => {
    if (appState.editingLinearElement) {
      const {
@ -133,7 +135,7 @@ export const actionDeleteSelected = register({
      elements: nextElements,
      appState: {
        ...nextAppState,
-        elementType: "selection",
+        activeTool: updateActiveTool(appState, { type: "selection" }),
        multiElement: null,
      },
      commitToHistory: isSomeElementSelected(
--- a/src/actions/actionDistribute.tsx
+++ b/src/actions/actionDistribute.tsx
@ -3,11 +3,11 @@ import {
  DistributeVerticallyIcon,
 } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
-import { distributeElements, Distribution } from "../disitrubte";
+import { distributeElements, Distribution } from "../distribute";
 import { getNonDeletedElements } from "../element";
 import { ExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
-import { CODES } from "../keys";
+import { CODES, KEYS } from "../keys";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { AppState } from "../types";
 import { arrayToMap, getShortcutKey } from "../utils";
@ -39,6 +39,7 @@ const distributeSelectedElements = (

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

 export const distributeVertically = register({
  name: "distributeVertically",
+  trackEvent: { category: "element" },
  perform: (elements, appState) => {
    return {
      appState,
@ -77,7 +80,8 @@ export const distributeVertically = register({
      commitToHistory: true,
    };
  },
-  keyTest: (event) => event.altKey && event.code === CODES.V,
+  keyTest: (event) =>
+    !event[KEYS.CTRL_OR_CMD] && 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
@ -22,6 +22,7 @@ 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
    if (appState.editingLinearElement) {
@ -127,12 +128,15 @@ const duplicateElements = (
      {
        ...appState,
        selectedGroupIds: {},
-        selectedElementIds: newElements.reduce((acc, element) => {
-          if (!isBoundToContainer(element)) {
-            acc[element.id] = true;
-          }
-          return acc;
-        }, {} as any),
+        selectedElementIds: newElements.reduce(
+          (acc: Record<ExcalidrawElement["id"], true>, element) => {
+            if (!isBoundToContainer(element)) {
+              acc[element.id] = true;
+            }
+            return acc;
+          },
+          {},
+        ),
      },
      getNonDeletedElements(finalElements),
    ),
--- a/src/actions/actionExport.tsx
+++ b/src/actions/actionExport.tsx
@ -1,4 +1,3 @@
-import { trackEvent } from "../analytics";
 import { load, questionCircle, saveAs } from "../components/icons";
 import { ProjectName } from "../components/ProjectName";
 import { ToolButton } from "../components/ToolButton";
@ -8,7 +7,7 @@ import { DarkModeToggle } from "../components/DarkModeToggle";
 import { loadFromJSON, saveAsJSON } from "../data";
 import { resaveAsImageWithScene } from "../data/resave";
 import { t } from "../i18n";
-import { useIsMobile } from "../components/App";
+import { useDevice } from "../components/App";
 import { KEYS } from "../keys";
 import { register } from "./register";
 import { CheckboxItem } from "../components/CheckboxItem";
@ -23,8 +22,8 @@ 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 }) => (
@ -41,6 +40,7 @@ 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,6 +89,7 @@ export const actionChangeExportScale = register({

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

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

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

@ -141,13 +144,15 @@ export const actionSaveToActiveFile = register({
        appState: {
          ...appState,
          fileHandle,
-          toastMessage: fileHandleExists
-            ? fileHandle?.name
-              ? t("toast.fileSavedToFilename").replace(
-                  "{filename}",
-                  `"${fileHandle.name}"`,
-                )
-              : t("toast.fileSaved")
+          toast: fileHandleExists
+            ? {
+                message: fileHandle?.name
+                  ? t("toast.fileSavedToFilename").replace(
+                      "{filename}",
+                      `"${fileHandle.name}"`,
+                    )
+                  : t("toast.fileSaved"),
+              }
            : null,
        },
      };
@ -172,6 +177,7 @@ export const actionSaveToActiveFile = register({

 export const actionSaveFileToDisk = register({
  name: "saveFileToDisk",
+  trackEvent: { category: "export" },
  perform: async (elements, appState, value, app) => {
    try {
      const { fileHandle } = await saveAsJSON(
@ -200,7 +206,7 @@ export const actionSaveFileToDisk = register({
      icon={saveAs}
      title={t("buttons.saveAs")}
      aria-label={t("buttons.saveAs")}
-      showAriaLabel={useIsMobile()}
+      showAriaLabel={useDevice().isMobile}
      hidden={!nativeFileSystemSupported}
      onClick={() => updateData(null)}
      data-testid="save-as-button"
@ -210,6 +216,7 @@ export const actionSaveFileToDisk = register({

 export const actionLoadScene = register({
  name: "loadScene",
+  trackEvent: { category: "export" },
  perform: async (elements, appState, _, app) => {
    try {
      const {
@ -243,7 +250,7 @@ export const actionLoadScene = register({
      icon={load}
      title={t("buttons.load")}
      aria-label={t("buttons.load")}
-      showAriaLabel={useIsMobile()}
+      showAriaLabel={useDevice().isMobile}
      onClick={updateData}
      data-testid="load-button"
    />
@ -252,6 +259,7 @@ export const actionLoadScene = register({

 export const actionExportWithDarkMode = register({
  name: "exportWithDarkMode",
+  trackEvent: { category: "export", action: "toggleTheme" },
  perform: (_elements, appState, value) => {
    return {
      appState: { ...appState, exportWithDarkMode: value },
--- a/src/actions/actionFinalize.tsx
+++ b/src/actions/actionFinalize.tsx
@ -1,6 +1,6 @@
 import { KEYS } from "../keys";
 import { isInvisiblySmallElement } from "../element";
-import { resetCursor } from "../utils";
+import { updateActiveTool, resetCursor } from "../utils";
 import { ToolButton } from "../components/ToolButton";
 import { done } from "../components/icons";
 import { t } from "../i18n";
@ -14,10 +14,12 @@ import {
  bindOrUnbindLinearElement,
 } from "../element/binding";
 import { isBindingElement } from "../element/typeChecks";
+import { AppState } from "../types";

 export const actionFinalize = register({
  name: "finalize",
-  perform: (elements, appState, _, { canvas, focusContainer }) => {
+  trackEvent: false,
+  perform: (elements, appState, _, { canvas, focusContainer, scene }) => {
    if (appState.editingLinearElement) {
      const { elementId, startBindingElement, endBindingElement } =
        appState.editingLinearElement;
@ -38,6 +40,7 @@ export const actionFinalize = register({
              : undefined,
          appState: {
            ...appState,
+            cursorButton: "up",
            editingLinearElement: null,
          },
          commitToHistory: true,
@ -47,8 +50,12 @@ export const actionFinalize = register({

    let newElements = elements;

-    if (appState.pendingImageElement) {
-      mutateElement(appState.pendingImageElement, { isDeleted: true }, false);
+    const pendingImageElement =
+      appState.pendingImageElementId &&
+      scene.getElement(appState.pendingImageElementId);
+
+    if (pendingImageElement) {
+      mutateElement(pendingImageElement, { isDeleted: true }, false);
    }

    if (window.document.activeElement instanceof HTMLElement) {
@ -119,27 +126,47 @@ export const actionFinalize = register({
        );
      }

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

    if (
-      (!appState.elementLocked && appState.elementType !== "freedraw") ||
+      (!appState.activeTool.locked &&
+        appState.activeTool.type !== "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,
-        elementType:
-          (appState.elementLocked || appState.elementType === "freedraw") &&
+        cursorButton: "up",
+        activeTool:
+          (appState.activeTool.locked ||
+            appState.activeTool.type === "freedraw") &&
          multiPointElement
-            ? appState.elementType
-            : "selection",
+            ? appState.activeTool
+            : activeTool,
        draggingElement: null,
        multiElement: null,
        editingElement: null,
@ -147,16 +174,16 @@ export const actionFinalize = register({
        suggestedBindings: [],
        selectedElementIds:
          multiPointElement &&
-          !appState.elementLocked &&
-          appState.elementType !== "freedraw"
+          !appState.activeTool.locked &&
+          appState.activeTool.type !== "freedraw"
            ? {
                ...appState.selectedElementIds,
                [multiPointElement.id]: true,
              }
            : appState.selectedElementIds,
-        pendingImageElement: null,
+        pendingImageElementId: null,
      },
-      commitToHistory: appState.elementType === "freedraw",
+      commitToHistory: appState.activeTool.type === "freedraw",
    };
  },
  keyTest: (event, appState) =>
@ -165,7 +192,7 @@ export const actionFinalize = register({
        (!appState.draggingElement && appState.multiElement === null))) ||
    ((event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) &&
      appState.multiElement !== null),
-  PanelComponent: ({ appState, updateData }) => (
+  PanelComponent: ({ appState, updateData, data }) => (
    <ToolButton
      type="button"
      icon={done}
@ -173,6 +200,7 @@ 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
@ -35,6 +35,7 @@ const enableActionFlipVertical = (

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

 export const actionFlipVertical = register({
  name: "flipVertical",
+  trackEvent: { category: "element" },
  perform: (elements, appState) => {
    return {
      elements: flipSelectedElements(elements, appState, "vertical"),
@ -155,7 +157,7 @@ const flipElement = (
    // calculate new x-coord for transformation
    newNCoordsX = usingNWHandle ? element.x + 2 * width : element.x - 2 * width;
    resizeSingleElement(
-      element,
+      new Map().set(element.id, element),
      true,
      element,
      usingNWHandle ? "nw" : "ne",
--- a/src/actions/actionGroup.tsx
+++ b/src/actions/actionGroup.tsx
@ -54,6 +54,7 @@ const enableActionGroup = (

 export const actionGroup = register({
  name: "group",
+  trackEvent: { category: "element" },
  perform: (elements, appState) => {
    const selectedElements = getSelectedElements(
      getNonDeletedElements(elements),
@ -147,6 +148,7 @@ export const actionGroup = register({

 export const actionUngroup = register({
  name: "ungroup",
+  trackEvent: { category: "element" },
  perform: (elements, appState) => {
    const groupIds = getSelectedGroupIds(appState);
    if (groupIds.length === 0) {
--- a/src/actions/actionHistory.tsx
+++ b/src/actions/actionHistory.tsx
@ -62,6 +62,7 @@ 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) =>
@ -82,6 +83,7 @@ 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
@ -9,6 +9,7 @@ import { HelpIcon } from "../components/HelpIcon";

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

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

 export const actionFullScreen = register({
  name: "toggleFullScreen",
+  trackEvent: { category: "canvas", predicate: (appState) => !isFullScreen() },
  perform: () => {
    if (!isFullScreen()) {
      allowFullScreen();
@ -69,6 +72,7 @@ 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,4 @@
-import { getClientColors, getClientInitials } from "../clients";
+import { getClientColors } from "../clients";
 import { Avatar } from "../components/Avatar";
 import { centerScrollOn } from "../scene/scroll";
 import { Collaborator } from "../types";
@ -6,6 +6,7 @@ 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) {
@ -30,28 +31,18 @@ export const actionGoToCollaborator = register({
    };
  },
  PanelComponent: ({ appState, updateData, data }) => {
-    const clientId: string | undefined = data?.id;
-    if (!clientId) {
-      return null;
-    }
-
-    const collaborator = appState.collaborators.get(clientId);
-
-    if (!collaborator) {
-      return null;
-    }
+    const [clientId, collaborator] = data as [string, Collaborator];

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

    return (
      <Avatar
        color={background}
        border={stroke}
        onClick={() => updateData(collaborator.pointer)}
-      >
-        {shortName}
-      </Avatar>
+        name={collaborator.username || ""}
+        src={collaborator.avatarUrl}
+      />
    );
  },
 });
--- a/src/actions/actionProperties.tsx
+++ b/src/actions/actionProperties.tsx
@ -30,11 +30,15 @@ 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,
@ -58,6 +62,7 @@ import {
  ExcalidrawTextElement,
  FontFamilyValues,
  TextAlign,
+  VerticalAlign,
 } from "../element/types";
 import { getLanguage, t } from "../i18n";
 import { KEYS } from "../keys";
@ -145,6 +150,7 @@ const changeFontSize = (
  elements: readonly ExcalidrawElement[],
  appState: AppState,
  getNewFontSize: (element: ExcalidrawTextElement) => number,
+  fallbackValue?: ExcalidrawTextElement["fontSize"],
 ) => {
  const newFontSizes = new Set<number>();

@ -160,11 +166,7 @@ const changeFontSize = (
          let newElement: ExcalidrawTextElement = newElementWith(oldElement, {
            fontSize: newFontSize,
          });
-          redrawTextBoundingBox(
-            newElement,
-            getContainerElement(oldElement),
-            appState,
-          );
+          redrawTextBoundingBox(newElement, getContainerElement(oldElement));

          newElement = offsetElementAfterFontResize(oldElement, newElement);

@ -182,7 +184,7 @@ const changeFontSize = (
      currentItemFontSize:
        newFontSizes.size === 1
          ? [...newFontSizes][0]
-          : appState.currentItemFontSize,
+          : fallbackValue ?? appState.currentItemFontSize,
    },
    commitToHistory: true,
  };
@ -192,6 +194,7 @@ const changeFontSize = (

 export const actionChangeStrokeColor = register({
  name: "changeStrokeColor",
+  trackEvent: false,
  perform: (elements, appState, value) => {
    return {
      ...(value.currentItemStrokeColor && {
@ -232,6 +235,8 @@ export const actionChangeStrokeColor = register({
        setActive={(active) =>
          updateData({ openPopup: active ? "strokeColorPicker" : null })
        }
+        elements={elements}
+        appState={appState}
      />
    </>
  ),
@ -239,6 +244,7 @@ export const actionChangeStrokeColor = register({

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

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

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

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

 export const actionChangeStrokeStyle = register({
  name: "changeStrokeStyle",
+  trackEvent: false,
  perform: (elements, appState, value) => {
    return {
      elements: changeProperty(elements, appState, (el) =>
@ -470,12 +482,17 @@ 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,
-        }),
+      elements: changeProperty(
+        elements,
+        appState,
+        (el) =>
+          newElementWith(el, {
+            opacity: value,
+          }),
+        true,
      ),
      appState: { ...appState, currentItemOpacity: value },
      commitToHistory: true,
@ -490,20 +507,6 @@ 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,
@ -519,8 +522,9 @@ export const actionChangeOpacity = register({

 export const actionChangeFontSize = register({
  name: "changeFontSize",
+  trackEvent: false,
  perform: (elements, appState, value) => {
-    return changeFontSize(elements, appState, () => value);
+    return changeFontSize(elements, appState, () => value, value);
  },
  PanelComponent: ({ elements, appState, updateData }) => (
    <fieldset>
@ -532,21 +536,25 @@ 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(
@ -572,6 +580,7 @@ export const actionChangeFontSize = register({

 export const actionDecreaseFontSize = register({
  name: "decreaseFontSize",
+  trackEvent: false,
  perform: (elements, appState, value) => {
    return changeFontSize(elements, appState, (element) =>
      Math.round(
@ -593,6 +602,7 @@ export const actionDecreaseFontSize = register({

 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)),
@ -610,6 +620,7 @@ export const actionIncreaseFontSize = register({

 export const actionChangeFontFamily = register({
  name: "changeFontFamily",
+  trackEvent: false,
  perform: (elements, appState, value) => {
    return {
      elements: changeProperty(
@ -623,11 +634,7 @@ export const actionChangeFontFamily = register({
                fontFamily: value,
              },
            );
-            redrawTextBoundingBox(
-              newElement,
-              getContainerElement(oldElement),
-              appState,
-            );
+            redrawTextBoundingBox(newElement, getContainerElement(oldElement));
            return newElement;
          }

@ -695,6 +702,7 @@ export const actionChangeFontFamily = register({

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

@ -727,51 +729,121 @@ export const actionChangeTextAlign = register({
      commitToHistory: true,
    };
  },
-  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) => {
-            if (isTextElement(element)) {
-              return element.textAlign;
+  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.textAlign;
+              return boundTextElement.verticalAlign;
            }
            return null;
-          },
-          appState.currentItemTextAlign,
-        )}
-        onChange={(value) => updateData(value)}
-      />
-    </fieldset>
-  ),
+          })}
+          onChange={(value) => updateData(value)}
+        />
+      </fieldset>
+    );
+  },
 });

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

 export const actionChangeArrowhead = register({
  name: "changeArrowhead",
+  trackEvent: false,
  perform: (
    elements,
    appState,
--- a/src/actions/actionSelectAll.ts
+++ b/src/actions/actionSelectAll.ts
@ -2,9 +2,11 @@ import { KEYS } from "../keys";
 import { register } from "./register";
 import { selectGroupsForSelectedElements } from "../groups";
 import { getNonDeletedElements, isTextElement } from "../element";
+import { ExcalidrawElement } from "../element/types";

 export const actionSelectAll = register({
  name: "selectAll",
+  trackEvent: { category: "canvas" },
  perform: (elements, appState) => {
    if (appState.editingLinearElement) {
      return false;
@ -14,15 +16,19 @@ export const actionSelectAll = register({
        {
          ...appState,
          editingGroupId: null,
-          selectedElementIds: elements.reduce((map, element) => {
-            if (
-              !element.isDeleted &&
-              !(isTextElement(element) && element.containerId)
-            ) {
-              map[element.id] = true;
-            }
-            return map;
-          }, {} as any),
+          selectedElementIds: elements.reduce(
+            (map: Record<ExcalidrawElement["id"], true>, element) => {
+              if (
+                !element.isDeleted &&
+                !(isTextElement(element) && element.containerId) &&
+                !element.locked
+              ) {
+                map[element.id] = true;
+              }
+              return map;
+            },
+            {},
+          ),
        },
        getNonDeletedElements(elements),
      ),
--- a/src/actions/actionStyles.test.tsx
+++ b/src/actions/actionStyles.test.tsx
@ -0,0 +1,71 @@
+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,28 +6,37 @@ import {
 import { CODES, KEYS } from "../keys";
 import { t } from "../i18n";
 import { register } from "./register";
-import { mutateElement, newElementWith } from "../element/mutateElement";
+import { newElementWith } from "../element/mutateElement";
 import {
  DEFAULT_FONT_SIZE,
  DEFAULT_FONT_FAMILY,
  DEFAULT_TEXT_ALIGN,
 } from "../constants";
-import { getContainerElement } from "../element/textElement";
+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(element);
+      copiedStyles = JSON.stringify(elementsCopied);
    }
    return {
      appState: {
        ...appState,
-        toastMessage: t("toast.copyStyles"),
+        toast: { message: t("toast.copyStyles") },
      },
      commitToHistory: false,
    };
@ -39,36 +48,64 @@ export const actionCopyStyles = register({

 export const actionPasteStyles = register({
  name: "pasteStyles",
+  trackEvent: { category: "element" },
  perform: (elements, appState) => {
-    const pastedElement = JSON.parse(copiedStyles);
+    const elementsCopied = JSON.parse(copiedStyles);
+    const pastedElement = elementsCopied[0];
+    const boundTextElement = elementsCopied[1];
    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 (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) && isTextElement(element)) {
-            mutateElement(newElement, {
-              fontSize: pastedElement?.fontSize || DEFAULT_FONT_SIZE,
-              fontFamily: pastedElement?.fontFamily || DEFAULT_FONT_FAMILY,
-              textAlign: pastedElement?.textAlign || DEFAULT_TEXT_ALIGN,
-            });
-
-            redrawTextBoundingBox(
-              element,
-              getContainerElement(element),
-              appState,
-            );
+        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 (isTextElement(newElement)) {
+            newElement = newElementWith(newElement, {
+              fontSize: elementStylesToCopyFrom?.fontSize || DEFAULT_FONT_SIZE,
+              fontFamily:
+                elementStylesToCopyFrom?.fontFamily || DEFAULT_FONT_FAMILY,
+              textAlign:
+                elementStylesToCopyFrom?.textAlign || DEFAULT_TEXT_ALIGN,
+            });
+            let container = null;
+            if (newElement.containerId) {
+              container =
+                selectedElements.find(
+                  (element) =>
+                    isTextElement(newElement) &&
+                    element.id === newElement.containerId,
+                ) || null;
+            }
+            redrawTextBoundingBox(newElement, container);
+          }
+
+          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,12 +2,14 @@ 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
@ -0,0 +1,63 @@
+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,6 +3,7 @@ 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,11 +1,13 @@
 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,12 +1,13 @@
 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,6 +18,7 @@ import {

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

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

 export const actionSendToBack = register({
  name: "sendToBack",
+  trackEvent: { category: "element" },
  perform: (elements, appState) => {
    return {
      elements: moveAllLeft(elements, appState),
@ -106,6 +109,8 @@ 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,6 +17,7 @@ export {
  actionChangeFontSize,
  actionChangeFontFamily,
  actionChangeTextAlign,
+  actionChangeVerticalAlign,
 } from "./actionProperties";

 export {
@ -74,9 +75,13 @@ 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,18 +1,47 @@
 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 { MODES } from "../constants";
+import { trackEvent } from "../analytics";

-export class ActionManager implements ActionsManagerInterface {
-  actions = {} as ActionsManagerInterface["actions"];
+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);
+    }
+  }
+};
+
+export class ActionManager {
+  actions = {} as Record<ActionName, Action>;

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

@ -65,9 +94,15 @@ export class ActionManager implements ActionsManagerInterface {
          ),
      );

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

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

-  executeAction(action: Action) {
-    this.updater(
-      action.perform(
-        this.getElementsIncludingDeleted(),
-        this.getAppState(),
-        null,
-        this.app,
-      ),
-    );
+  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));
  }

  /**
@ -113,7 +147,11 @@ export class ActionManager implements ActionsManagerInterface {
    ) {
      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/shortcuts.ts
+++ b/src/actions/shortcuts.ts
@ -1,8 +1,10 @@
 import { t } from "../i18n";
 import { isDarwin } from "../keys";
 import { getShortcutKey } from "../utils";
+import { ActionName } from "./types";

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

 const shortcutMap: Record<ShortcutName, string[]> = {
  cut: [getShortcutKey("CtrlOrCmd+X")],
@ -62,10 +67,12 @@ 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 availiable, take the first one
+  // if multiple shortcuts available, take the first one
  return shortcuts && shortcuts.length > 0 ? shortcuts[0] : "";
 };
--- a/src/actions/types.ts
+++ b/src/actions/types.ts
@ -6,7 +6,8 @@ import {
  ExcalidrawProps,
  BinaryFiles,
 } from "../types";
-import { ToolButtonSize } from "../components/ToolButton";
+
+export type ActionSource = "ui" | "keyboard" | "contextMenu" | "api";

 /** if false, the action should be prevented */
 export type ActionResult =
@ -39,6 +40,7 @@ export type ActionName =
  | "paste"
  | "copyAsPng"
  | "copyAsSvg"
+  | "copyText"
  | "sendBackward"
  | "bringForward"
  | "sendToBack"
@ -82,6 +84,7 @@ export type ActionName =
  | "zoomToSelection"
  | "changeFontFamily"
  | "changeTextAlign"
+  | "changeVerticalAlign"
  | "toggleFullScreen"
  | "toggleShortcuts"
  | "group"
@ -103,14 +106,19 @@ export type ActionName =
  | "exportWithDarkMode"
  | "toggleTheme"
  | "increaseFontSize"
-  | "decreaseFontSize";
+  | "decreaseFontSize"
+  | "unbindText"
+  | "hyperlink"
+  | "eraser"
+  | "bindText"
+  | "toggleLock";

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

 export interface Action {
@ -123,18 +131,34 @@ export interface Action {
    appState: AppState,
    elements: readonly ExcalidrawElement[],
  ) => boolean;
-  contextItemLabel?: string;
+  contextItemLabel?:
+    | string
+    | ((
+        elements: readonly ExcalidrawElement[],
+        appState: Readonly<AppState>,
+      ) => string);
  contextItemPredicate?: (
    elements: readonly ExcalidrawElement[],
    appState: AppState,
  ) => boolean;
  checked?: (appState: Readonly<AppState>) => 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;
+  trackEvent:
+    | false
+    | {
+        category:
+          | "toolbar"
+          | "element"
+          | "canvas"
+          | "export"
+          | "history"
+          | "menu"
+          | "collab"
+          | "hyperlink";
+        action?: string;
+        predicate?: (
+          appState: Readonly<AppState>,
+          elements: readonly ExcalidrawElement[],
+          value: any,
+        ) => boolean;
+      };
 }
--- a/src/analytics.ts
+++ b/src/analytics.ts
@ -3,16 +3,20 @@ export const trackEvent =
  process.env?.REACT_APP_GOOGLE_ANALYTICS_ID &&
  typeof window !== "undefined" &&
  window.gtag
-    ? (category: string, name: string, label?: string, value?: number) => {
-        window.gtag("event", name, {
-          event_category: category,
-          event_label: label,
-          value,
-        });
+    ? (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);
+        }
      }
    : typeof process !== "undefined" && process.env?.JEST_WORKER_ID
-    ? (category: string, name: string, label?: string, value?: number) => {}
-    : (category: string, name: string, label?: string, value?: number) => {
+    ? (category: string, action: string, label?: string, value?: number) => {}
+    : (category: string, action: string, label?: string, value?: number) => {
        // Uncomment the next line to track locally
-        // console.info("Track Event", category, name, label, value);
+        // console.log("Track Event", { category, action, label, value });
      };
--- a/src/appState.ts
+++ b/src/appState.ts
@ -41,8 +41,14 @@ export const getDefaultAppState = (): Omit<
    editingElement: null,
    editingGroupId: null,
    editingLinearElement: null,
-    elementLocked: false,
-    elementType: "selection",
+    activeTool: {
+      type: "selection",
+      customType: null,
+      locked: false,
+      lastActiveToolBeforeEraser: null,
+    },
+    penMode: false,
+    penDetected: false,
    errorMessage: null,
    exportBackground: true,
    exportScale: defaultExportScale,
@ -52,6 +58,7 @@ export const getDefaultAppState = (): Omit<
    gridSize: null,
    isBindingEnabled: true,
    isLibraryOpen: false,
+    isLibraryMenuDocked: false,
    isLoading: false,
    isResizing: false,
    isRotating: false,
@ -74,12 +81,15 @@ export const getDefaultAppState = (): Omit<
    showStats: false,
    startBoundElement: null,
    suggestedBindings: [],
-    toastMessage: null,
+    toast: null,
    viewBackgroundColor: oc.white,
    zenModeEnabled: false,
-    zoom: { value: 1 as NormalizedZoomValue, translation: { x: 0, y: 0 } },
+    zoom: {
+      value: 1 as NormalizedZoomValue,
+    },
    viewModeEnabled: false,
-    pendingImageElement: null,
+    pendingImageElementId: null,
+    showHyperlinkPopup: false,
  };
 };

@ -125,8 +135,9 @@ const APP_STATE_STORAGE_CONF = (<
  editingElement: { browser: false, export: false, server: false },
  editingGroupId: { browser: true, export: false, server: false },
  editingLinearElement: { browser: false, export: false, server: false },
-  elementLocked: { browser: true, export: false, server: false },
-  elementType: { browser: true, 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 },
@ -136,7 +147,8 @@ const APP_STATE_STORAGE_CONF = (<
  gridSize: { browser: true, export: true, server: true },
  height: { browser: false, export: false, server: false },
  isBindingEnabled: { browser: false, export: false, server: false },
-  isLibraryOpen: { 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 },
@ -161,13 +173,14 @@ const APP_STATE_STORAGE_CONF = (<
  showStats: { browser: true, export: false, server: false },
  startBoundElement: { browser: false, export: false, server: false },
  suggestedBindings: { browser: false, export: false, server: false },
-  toastMessage: { 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 },
-  pendingImageElement: { browser: false, export: false, server: false },
+  pendingImageElementId: { browser: false, export: false, server: false },
+  showHyperlinkPopup: { browser: false, export: false, server: false },
 });

 const _clearAppStateForStorage = <
@ -205,3 +218,9 @@ export const cleanAppStateForExport = (appState: Partial<AppState>) => {
 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
@ -0,0 +1,121 @@
+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,5 +1,10 @@
 import colors from "./colors";
-import { DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, ENV } from "./constants";
+import {
+  DEFAULT_FONT_FAMILY,
+  DEFAULT_FONT_SIZE,
+  ENV,
+  VERTICAL_ALIGN,
+} from "./constants";
 import { newElement, newLinearElement, newTextElement } from "./element";
 import { NonDeletedExcalidrawElement } from "./element/types";
 import { randomId } from "./random";
@ -24,18 +29,24 @@ type ParseSpreadsheetResult =
  | { type: typeof NOT_SPREADSHEET; reason: string }
  | { type: typeof VALID_SPREADSHEET; spreadsheet: Spreadsheet };

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

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

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

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

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

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

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

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

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

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

 const getChartDimentions = (spreadsheet: Spreadsheet) => {
--- a/src/clipboard.ts
+++ b/src/clipboard.ts
@ -2,16 +2,16 @@ import {
  ExcalidrawElement,
  NonDeletedExcalidrawElement,
 } from "./element/types";
-import { getSelectedElements } from "./scene";
 import { AppState, BinaryFiles } 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";

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

@ -56,19 +56,20 @@ const clipboardContainsElements = (
 export const copyToClipboard = async (
  elements: readonly NonDeletedExcalidrawElement[],
  appState: AppState,
-  files: BinaryFiles,
+  files: BinaryFiles | null,
 ) => {
  // select binded text elements when copying
-  const selectedElements = getSelectedElements(elements, appState, true);
  const contents: ElementsClipboard = {
    type: EXPORT_DATA_TYPES.excalidrawClipboard,
-    elements: selectedElements,
-    files: selectedElements.reduce((acc, element) => {
-      if (isInitializedImageElement(element) && files[element.fileId]) {
-        acc[element.fileId] = files[element.fileId];
-      }
-      return acc;
-    }, {} as BinaryFiles),
+    elements,
+    files: files
+      ? elements.reduce((acc, element) => {
+          if (isInitializedImageElement(element) && files[element.fileId]) {
+            acc[element.fileId] = files[element.fileId];
+          }
+          return acc;
+        }, {} as BinaryFiles)
+      : undefined,
  };
  const json = JSON.stringify(contents);
  CLIPBOARD = json;
@ -124,7 +125,7 @@ const getSystemClipboard = async (
 };

 /**
- * Attemps to parse clipboard. Prefers system clipboard.
+ * Attempts to parse clipboard. Prefers system clipboard.
 */
 export const parseClipboard = async (
  event: ClipboardEvent | null,
@ -166,10 +167,35 @@ export const parseClipboard = async (
  }
 };

-export const copyBlobToClipboardAsPng = async (blob: Blob) => {
-  await navigator.clipboard.write([
-    new window.ClipboardItem({ [MIME_TYPES.png]: blob }),
-  ]);
+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 copyTextToSystemClipboard = async (text: string | null) => {
--- a/src/components/Actions.tsx
+++ b/src/components/Actions.tsx
@ -3,7 +3,7 @@ import { ActionManager } from "../actions/manager";
 import { getNonDeletedElements } from "../element";
 import { ExcalidrawElement, PointerType } from "../element/types";
 import { t } from "../i18n";
-import { useIsMobile } from "../components/App";
+import { useDevice } from "../components/App";
 import {
  canChangeSharpness,
  canHaveArrowheads,
@ -15,40 +15,59 @@ import {
 } from "../scene";
 import { SHAPES } from "../shapes";
 import { AppState, Zoom } from "../types";
-import { capitalizeString, isTransparent, setCursorForShape } from "../utils";
+import {
+  capitalizeString,
+  isTransparent,
+  updateActiveTool,
+  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,
-  elementType,
+  activeTool,
 }: {
  appState: AppState;
  elements: readonly ExcalidrawElement[];
  renderAction: ActionManager["renderAction"];
-  elementType: ExcalidrawElement["type"];
+  activeTool: AppState["activeTool"]["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 isMobile = useIsMobile();
+  const device = useDevice();
  const isRTL = document.documentElement.getAttribute("dir") === "rtl";

  const showFillIcons =
-    hasBackground(elementType) ||
+    hasBackground(activeTool) ||
    targetElements.some(
      (element) =>
        hasBackground(element.type) && !isTransparent(element.backgroundColor),
    );
  const showChangeBackgroundIcons =
-    hasBackground(elementType) ||
+    hasBackground(activeTool) ||
    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) {
@ -60,23 +79,23 @@ export const SelectedShapeActions = ({

  return (
    <div className="panelColumn">
-      {((hasStrokeColor(elementType) &&
-        elementType !== "image" &&
+      {((hasStrokeColor(activeTool) &&
+        activeTool !== "image" &&
        commonSelectedType !== "image") ||
        targetElements.some((element) => hasStrokeColor(element.type))) &&
        renderAction("changeStrokeColor")}
      {showChangeBackgroundIcons && renderAction("changeBackgroundColor")}
      {showFillIcons && renderAction("changeFillStyle")}

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

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

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

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

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

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

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

 export const ShapesSwitcher = ({
  canvas,
-  elementType,
+  activeTool,
  setAppState,
  onImageAction,
+  appState,
 }: {
  canvas: HTMLCanvasElement | null;
-  elementType: ExcalidrawElement["type"];
+  activeTool: AppState["activeTool"];
  setAppState: React.Component<any, AppState>["setState"];
  onImageAction: (data: { pointerType: PointerType | null }) => void;
+  appState: AppState;
 }) => (
  <>
    {SHAPES.map(({ value, icon, key }, index) => {
@ -189,20 +215,37 @@ export const ShapesSwitcher = ({
          key={value}
          type="radio"
          icon={icon}
-          checked={elementType === value}
+          checked={activeTool.type === 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,
+            });
            setAppState({
-              elementType: value,
+              activeTool: nextActiveTool,
              multiElement: null,
              selectedElementIds: {},
            });
-            setCursorForShape(canvas, value);
+            setCursorForShape(canvas, {
+              ...appState,
+              activeTool: nextActiveTool,
+            });
            if (value === "image") {
              onImageAction({ pointerType });
            }
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
--- a/src/components/Avatar.scss
+++ b/src/components/Avatar.scss
@ -12,5 +12,11 @@
    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,20 +1,36 @@
 import "./Avatar.scss";

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

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

-export const Avatar = ({ children, color, border, onClick }: AvatarProps) => (
-  <div
-    className="Avatar"
-    style={{ background: color, border: `1px solid ${border}` }}
-    onClick={onClick}
-  >
-    {children}
-  </div>
-);
+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>
+  );
+};
--- a/src/components/ButtonIconSelect.tsx
+++ b/src/components/ButtonIconSelect.tsx
@ -7,7 +7,7 @@ export const ButtonIconSelect = <T extends Object>({
  onChange,
  group,
 }: {
-  options: { value: T; text: string; icon: JSX.Element }[];
+  options: { value: T; text: string; icon: JSX.Element; testId?: string }[];
  value: T | null;
  onChange: (value: T) => void;
  group: string;
@ -24,6 +24,7 @@ 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/Card.tsx
+++ b/src/components/Card.tsx
@ -4,6 +4,7 @@ import "./Card.scss";

 export const Card: React.FC<{
  color: keyof OpenColor | "primary";
+  children?: React.ReactNode;
 }> = ({ children, color }) => {
  return (
    <div
--- a/src/components/CheckboxItem.tsx
+++ b/src/components/CheckboxItem.tsx
@ -8,6 +8,7 @@ export const CheckboxItem: React.FC<{
  checked: boolean;
  onChange: (checked: boolean, event: React.MouseEvent) => void;
  className?: string;
+  children?: React.ReactNode;
 }> = ({ children, checked, onChange, className }) => {
  return (
    <div
--- a/src/components/ClearCanvas.tsx
+++ b/src/components/ClearCanvas.tsx
@ -1,6 +1,6 @@
 import { useState } from "react";
 import { t } from "../i18n";
-import { useIsMobile } from "./App";
+import { useDevice } from "./App";
 import { trash } from "./icons";
 import { ToolButton } from "./ToolButton";

@ -19,7 +19,7 @@ const ClearCanvas = ({ onConfirm }: { onConfirm: () => void }) => {
        icon={trash}
        title={t("buttons.clearReset")}
        aria-label={t("buttons.clearReset")}
-        showAriaLabel={useIsMobile()}
+        showAriaLabel={useDevice().isMobile}
        onClick={toggleDialog}
        data-testid="clear-canvas-button"
      />
--- a/src/components/CollabButton.scss
+++ b/src/components/CollabButton.scss
@ -18,13 +18,15 @@
      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.7em;
-    font-family: var(--ui-font);
+    font-size: 0.6em;
+    font-family: "Cascadia";
  }
 }
--- a/src/components/CollabButton.tsx
+++ b/src/components/CollabButton.tsx
@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { ToolButton } from "./ToolButton";
 import { t } from "../i18n";
-import { useIsMobile } from "../components/App";
+import { useDevice } from "../components/App";
 import { users } from "./icons";

 import "./CollabButton.scss";
@ -26,9 +26,9 @@ const CollabButton = ({
        type="button"
        title={t("labels.liveCollaboration")}
        aria-label={t("labels.liveCollaboration")}
-        showAriaLabel={useIsMobile()}
+        showAriaLabel={useDevice().isMobile}
      >
-        {collaboratorCount > 0 && (
+        {isCollaborating && (
          <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 {
+  .color-picker-content--default {
    padding: 0.5rem;
    display: grid;
    grid-template-columns: repeat(5, auto);
@ -59,6 +59,26 @@
    }
  }

+  .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,6 +7,53 @@ 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;
@ -35,6 +82,7 @@ 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 = ({
@ -45,6 +93,7 @@ const Picker = ({
  label,
  showInput = true,
  type,
+  elements,
 }: {
  colors: string[];
  color: string | null;
@ -53,12 +102,20 @@ 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) {
@ -71,52 +128,119 @@ const Picker = ({
  }, []);

  const handleKeyDown = (event: React.KeyboardEvent) => {
-    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)) {
+    let handled = false;
+    if (isArrowKey(event.key)) {
+      handled = true;
      const { activeElement } = document;
      const isRTL = getLanguage().rtl;
-      const index = Array.prototype.indexOf.call(
-        gallery!.current!.children,
+      let isCustom = false;
+      let index = Array.prototype.indexOf.call(
+        gallery.current!.querySelector(".color-picker-content--default")
+          ?.children,
        activeElement,
      );
-      if (index !== -1) {
-        const length = gallery!.current!.children.length - (showInput ? 1 : 0);
+      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);
        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
-            : event.key === KEYS.ARROW_DOWN
+            : !isCustom && event.key === KEYS.ARROW_DOWN
            ? (index + 5) % length
-            : event.key === KEYS.ARROW_UP
+            : !isCustom && event.key === KEYS.ARROW_UP
            ? (length + index - 5) % length
            : index;
-        (gallery!.current!.children![nextIndex] as any).focus();
+        (parentElement.children[nextIndex] as HTMLElement | undefined)?.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());
-      (gallery!.current!.children![index] as any).focus();
+      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();
+
      event.preventDefault();
    } else if (event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) {
+      handled = true;
      event.preventDefault();
      onClose();
    }
-    event.nativeEvent.stopImmediatePropagation();
-    event.stopPropagation();
+    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>
+      );
+    });
  };

  return (
@ -136,43 +260,23 @@ const Picker = ({
            gallery.current = el;
          }
        }}
-        tabIndex={0}
+        // to allow focusing by clicking but not by tabbing
+        tabIndex={-1}
      >
-        {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>
-          );
-        })}
+        <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>
+        )}
+
        {showInput && (
          <ColorInput
            color={color}
@ -246,6 +350,8 @@ export const ColorPicker = ({
  label,
  isActive,
  setActive,
+  elements,
+  appState,
 }: {
  type: "canvasBackground" | "elementBackground" | "elementStroke";
  color: string | null;
@ -253,6 +359,8 @@ export const ColorPicker = ({
  label: string;
  isActive: boolean;
  setActive: (active: boolean) => void;
+  elements: readonly ExcalidrawElement[];
+  appState: AppState;
 }) => {
  const pickerButton = React.useRef<HTMLButtonElement>(null);

@ -294,6 +402,7 @@ export const ColorPicker = ({
              label={label}
              showInput={false}
              type={type}
+              elements={elements}
            />
          </Popover>
        ) : null}
--- a/src/components/ContextMenu.tsx
+++ b/src/components/ContextMenu.tsx
@ -11,6 +11,7 @@ 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;

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

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

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

 const handleClose = (container: HTMLElement) => {
@ -125,6 +140,7 @@ export default {
          onCloseRequest={() => handleClose(params.container)}
          actionManager={params.actionManager}
          appState={params.appState}
+          elements={params.elements}
        />,
        getContextMenuNode(params.container),
      );
--- a/src/components/Dialog.tsx
+++ b/src/components/Dialog.tsx
@ -2,13 +2,14 @@ import clsx from "clsx";
 import React, { useEffect, useState } from "react";
 import { useCallbackRefState } from "../hooks/useCallbackRefState";
 import { t } from "../i18n";
-import { useExcalidrawContainer, useIsMobile } from "../components/App";
+import { useExcalidrawContainer, useDevice } 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 {
  children: React.ReactNode;
@ -64,14 +65,6 @@ 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();
@ -94,7 +87,7 @@ export const Dialog = (props: DialogProps) => {
            onClick={onClose}
            aria-label={t("buttons.close")}
          >
-            {useIsMobile() ? back : close}
+            {useDevice().isMobile ? 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.shapes")}>
+              <ShortcutIsland caption={t("helpDialog.tools")}>
                <Shortcut
                  label={t("toolBar.selection")}
                  shortcuts={["V", "1"]}
@ -149,7 +149,7 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                  shortcuts={["R", "2"]}
                />
                <Shortcut label={t("toolBar.diamond")} shortcuts={["D", "3"]} />
-                <Shortcut label={t("toolBar.ellipse")} shortcuts={["E", "4"]} />
+                <Shortcut label={t("toolBar.ellipse")} shortcuts={["O", "4"]} />
                <Shortcut label={t("toolBar.arrow")} shortcuts={["A", "5"]} />
                <Shortcut label={t("toolBar.line")} shortcuts={["P", "6"]} />
                <Shortcut
@ -159,6 +159,10 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                <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={[
@ -205,6 +209,10 @@ 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
@ -355,6 +363,10 @@ 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")]}
--- a/src/components/HintViewer.tsx
+++ b/src/components/HintViewer.tsx
@ -11,6 +11,7 @@ import {
  isTextElement,
 } from "../element/typeChecks";
 import { getShortcutKey } from "../utils";
+import { isEraserActive } from "../appState";

 interface HintViewerProps {
  appState: AppState;
@ -19,25 +20,32 @@ interface HintViewerProps {
 }

 const getHints = ({ appState, elements, isMobile }: HintViewerProps) => {
-  const { elementType, isResizing, isRotating, lastPointerDownWith } = appState;
+  const { activeTool, isResizing, isRotating, lastPointerDownWith } = appState;
  const multiMode = appState.multiElement !== null;

-  if (elementType === "arrow" || elementType === "line") {
+  if (appState.isLibraryOpen) {
+    return null;
+  }
+
+  if (isEraserActive(appState)) {
+    return t("hints.eraserRevert");
+  }
+  if (activeTool.type === "arrow" || activeTool.type === "line") {
    if (!multiMode) {
      return t("hints.linearElement");
    }
    return t("hints.linearElementMulti");
  }

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

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

-  if (appState.elementType === "image" && appState.pendingImageElement) {
+  if (appState.activeTool.type === "image" && appState.pendingImageElementId) {
    return t("hints.placeImage");
  }

@ -69,7 +77,7 @@ const getHints = ({ appState, elements, isMobile }: HintViewerProps) => {
    return t("hints.text_editing");
  }

-  if (elementType === "selection") {
+  if (activeTool.type === "selection") {
    if (
      appState.draggingElement?.type === "selection" &&
      !appState.editingElement &&
--- a/src/components/ImageExportDialog.tsx
+++ b/src/components/ImageExportDialog.tsx
@ -1,12 +1,11 @@
 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 { useIsMobile } from "./App";
+import { useDevice } from "./App";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { exportToCanvas } from "../scene/export";
 import { AppState, BinaryFiles } from "../types";
@ -19,6 +18,7 @@ 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")!;
@ -58,6 +58,7 @@ const ExportButton: React.FC<{
  onClick: () => void;
  title: string;
  shade?: number;
+  children?: React.ReactNode;
 }> = ({ children, title, onClick, color, shade = 6 }) => {
  return (
    <button
@ -90,7 +91,7 @@ const ImageExportModal = ({
  elements: readonly NonDeletedExcalidrawElement[];
  files: BinaryFiles;
  exportPadding?: number;
-  actionManager: ActionsManagerInterface;
+  actionManager: ActionManager;
  onExportToPng: ExportCB;
  onExportToSvg: ExportCB;
  onExportToClipboard: ExportCB;
@ -170,7 +171,9 @@ const ImageExportModal = ({
        <Stack.Row gap={2}>
          {actionManager.renderAction("changeExportScale")}
        </Stack.Row>
-        <p style={{ marginLeft: "1em", userSelect: "none" }}>Scale</p>
+        <p style={{ marginLeft: "1em", userSelect: "none" }}>
+          {t("buttons.scale")}
+        </p>
      </div>
      <div
        style={{
@ -229,7 +232,7 @@ export const ImageExportDialog = ({
  elements: readonly NonDeletedExcalidrawElement[];
  files: BinaryFiles;
  exportPadding?: number;
-  actionManager: ActionsManagerInterface;
+  actionManager: ActionManager;
  onExportToPng: ExportCB;
  onExportToSvg: ExportCB;
  onExportToClipboard: ExportCB;
@ -250,7 +253,7 @@ export const ImageExportDialog = ({
        icon={exportImage}
        type="button"
        aria-label={t("buttons.exportImage")}
-        showAriaLabel={useIsMobile()}
+        showAriaLabel={useDevice().isMobile}
        title={t("buttons.exportImage")}
      />
      {modalIsShown && (
--- a/src/components/InitializeApp.tsx
+++ b/src/components/InitializeApp.tsx
@ -14,11 +14,11 @@ export const InitializeApp = (props: Props) => {
  useEffect(() => {
    const updateLang = async () => {
      await setLanguage(currentLang);
+      setLoading(false);
    };
    const currentLang =
      languages.find((lang) => lang.code === props.langCode) || defaultLang;
    updateLang();
-    setLoading(false);
  }, [props.langCode]);

  return loading ? <LoadingMessage /> : props.children;
--- a/src/components/JSONExportDialog.tsx
+++ b/src/components/JSONExportDialog.tsx
@ -1,8 +1,7 @@
 import React, { useState } from "react";
-import { ActionsManagerInterface } from "../actions/types";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
-import { useIsMobile } from "./App";
+import { useDevice } from "./App";
 import { AppState, ExportOpts, BinaryFiles } from "../types";
 import { Dialog } from "./Dialog";
 import { exportFile, exportToFileIcon, link } from "./icons";
@ -12,6 +11,9 @@ 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[],
@ -29,7 +31,7 @@ const JSONExportModal = ({
  appState: AppState;
  files: BinaryFiles;
  elements: readonly NonDeletedExcalidrawElement[];
-  actionManager: ActionsManagerInterface;
+  actionManager: ActionManager;
  onCloseRequest: () => void;
  exportOpts: ExportOpts;
  canvas: HTMLCanvasElement | null;
@ -54,7 +56,7 @@ const JSONExportModal = ({
              aria-label={t("exportDialog.disk_button")}
              showAriaLabel={true}
              onClick={() => {
-                actionManager.executeAction(actionSaveFileToDisk);
+                actionManager.executeAction(actionSaveFileToDisk, "ui");
              }}
            />
          </Card>
@ -70,9 +72,10 @@ const JSONExportModal = ({
              title={t("exportDialog.link_button")}
              aria-label={t("exportDialog.link_button")}
              showAriaLabel={true}
-              onClick={() =>
-                onExportToBackend(elements, appState, files, canvas)
-              }
+              onClick={() => {
+                onExportToBackend(elements, appState, files, canvas);
+                trackEvent("export", "link", `ui (${getFrame()})`);
+              }}
            />
          </Card>
        )}
@ -94,7 +97,7 @@ export const JSONExportDialog = ({
  elements: readonly NonDeletedExcalidrawElement[];
  appState: AppState;
  files: BinaryFiles;
-  actionManager: ActionsManagerInterface;
+  actionManager: ActionManager;
  exportOpts: ExportOpts;
  canvas: HTMLCanvasElement | null;
 }) => {
@ -114,7 +117,7 @@ export const JSONExportDialog = ({
        icon={exportFile}
        type="button"
        aria-label={t("buttons.export")}
-        showAriaLabel={useIsMobile()}
+        showAriaLabel={useDevice().isMobile}
        title={t("buttons.export")}
      />
      {modalIsShown && (
--- a/src/components/LayerUI.scss
+++ b/src/components/LayerUI.scss
@ -1,9 +1,63 @@
@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;
+
+  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);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: var(--color-text);
+    }
+  }
+
+  .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;
+  }
+}

 .excalidraw {
+  .layer-ui__wrapper.animate {
+    transition: width 0.1s ease-in-out;
+  }
  .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,12 +1,11 @@
 import clsx from "clsx";
 import React, { useCallback } from "react";
 import { ActionManager } from "../actions/manager";
-import { CLASSES } from "../constants";
+import { CLASSES, LIBRARY_SIDEBAR_WIDTH } from "../constants";
 import { exportCanvas } from "../data";
 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";
@ -26,9 +25,8 @@ import { PasteChartDialog } from "./PasteChartDialog";
 import { Section } from "./Section";
 import { HelpDialog } from "./HelpDialog";
 import Stack from "./Stack";
-import { Tooltip } from "./Tooltip";
 import { UserList } from "./UserList";
-import Library from "../data/library";
+import Library, { distributeLibraryItemsOnSquareGrid } from "../data/library";
 import { JSONExportDialog } from "./JSONExportDialog";
 import { LibraryButton } from "./LibraryButton";
 import { isImageFileHandle } from "../data/blob";
@ -36,6 +34,12 @@ 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;
@ -46,19 +50,15 @@ interface LayerUIProps {
  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?: (
-    isMobile: boolean,
-    appState: AppState,
-  ) => JSX.Element | null;
-  renderCustomFooter?: (isMobile: boolean, appState: AppState) => JSX.Element;
-  viewModeEnabled: boolean;
+  renderTopRightUI?: ExcalidrawProps["renderTopRightUI"];
+  renderCustomFooter?: ExcalidrawProps["renderFooter"];
+  renderCustomStats?: ExcalidrawProps["renderCustomStats"];
  libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
  UIOptions: AppProps["UIOptions"];
  focusContainer: () => void;
@ -66,7 +66,6 @@ interface LayerUIProps {
  id: string;
  onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void;
 }
-
 const LayerUI = ({
  actionManager,
  appState,
@ -76,15 +75,14 @@ const LayerUI = ({
  elements,
  onCollabButtonClick,
  onLockToggle,
+  onPenModeToggle,
  onInsertElements,
-  zenModeEnabled,
  showExitZenModeBtn,
  showThemeBtn,
-  toggleZenMode,
  isCollaborating,
  renderTopRightUI,
  renderCustomFooter,
-  viewModeEnabled,
+  renderCustomStats,
  libraryReturnUrl,
  UIOptions,
  focusContainer,
@ -92,7 +90,7 @@ const LayerUI = ({
  id,
  onImageAction,
 }: LayerUIProps) => {
-  const isMobile = useIsMobile();
+  const device = useDevice();

  const renderJSONExportDialog = () => {
    if (!UIOptions.canvasActions.export) {
@ -119,6 +117,7 @@ const LayerUI = ({
    const createExporter =
      (type: ExportType): ExportCB =>
      async (exportedElements) => {
+        trackEvent("export", type, "ui");
        const fileHandle = await exportCanvas(
          type,
          exportedElements,
@ -167,7 +166,7 @@ const LayerUI = ({
      <Section
        heading="canvasActions"
        className={clsx("zen-mode-transition", {
-          "transition-left": zenModeEnabled,
+          "transition-left": appState.zenModeEnabled,
        })}
      >
        {/* the zIndex ensures this menu has higher stacking order,
@ -188,7 +187,7 @@ const LayerUI = ({
    <Section
      heading="canvasActions"
      className={clsx("zen-mode-transition", {
-        "transition-left": zenModeEnabled,
+        "transition-left": appState.zenModeEnabled,
      })}
    >
      {/* the zIndex ensures this menu has higher stacking order,
@ -228,14 +227,14 @@ const LayerUI = ({
    <Section
      heading="selectedShapeActions"
      className={clsx("zen-mode-transition", {
-        "transition-left": zenModeEnabled,
+        "transition-left": appState.zenModeEnabled,
      })}
    >
      <Island
        className={CLASSES.SHAPE_ACTIONS_MENU}
        padding={2}
        style={{
-          // we want to make sure this doesn't overflow so substracting 200
+          // we want to make sure this doesn't overflow so subtracting 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`,
@ -245,7 +244,7 @@ const LayerUI = ({
          appState={appState}
          elements={elements}
          renderAction={actionManager.renderAction}
-          elementType={appState.elementType}
+          activeTool={appState.activeTool.type}
        />
      </Island>
    </Section>
@ -272,7 +271,9 @@ const LayerUI = ({
    <LibraryMenu
      pendingElements={getSelectedElements(elements, appState, true)}
      onClose={closeLibrary}
-      onInsertShape={onInsertElements}
+      onInsertLibraryItems={(libraryItems) => {
+        onInsertElements(distributeLibraryItemsOnSquareGrid(libraryItems));
+      }}
      onAddToLibrary={deselectItems}
      setAppState={setAppState}
      libraryReturnUrl={libraryReturnUrl}
@ -296,45 +297,55 @@ const LayerUI = ({
        <div className="App-menu App-menu_top">
          <Stack.Col
            gap={4}
-            className={clsx({ "disable-pointerEvents": zenModeEnabled })}
+            className={clsx({
+              "disable-pointerEvents": appState.zenModeEnabled,
+            })}
          >
-            {viewModeEnabled
+            {appState.viewModeEnabled
              ? renderViewModeCanvasActions()
              : renderCanvasActions()}
            {shouldRenderSelectedShapeActions && renderSelectedShapeActions()}
          </Stack.Col>
-          {!viewModeEnabled && (
+          {!appState.viewModeEnabled && (
            <Section heading="shapes">
-              {(heading) => (
+              {(heading: React.ReactNode) => (
                <Stack.Col gap={4} align="start">
                  <Stack.Row
                    gap={1}
                    className={clsx("App-toolbar-container", {
-                      "zen-mode": zenModeEnabled,
+                      "zen-mode": appState.zenModeEnabled,
                    })}
                  >
+                    <PenModeButton
+                      zenModeEnabled={appState.zenModeEnabled}
+                      checked={appState.penMode}
+                      onChange={onPenModeToggle}
+                      title={t("toolBar.penMode")}
+                      penDetected={appState.penDetected}
+                    />
                    <LockButton
-                      zenModeEnabled={zenModeEnabled}
-                      checked={appState.elementLocked}
-                      onChange={onLockToggle}
+                      zenModeEnabled={appState.zenModeEnabled}
+                      checked={appState.activeTool.locked}
+                      onChange={() => onLockToggle()}
                      title={t("toolBar.lock")}
                    />
                    <Island
                      padding={1}
                      className={clsx("App-toolbar", {
-                        "zen-mode": zenModeEnabled,
+                        "zen-mode": appState.zenModeEnabled,
                      })}
                    >
                      <HintViewer
                        appState={appState}
                        elements={elements}
-                        isMobile={isMobile}
+                        isMobile={device.isMobile}
                      />
                      {heading}
                      <Stack.Row gap={1}>
                        <ShapesSwitcher
+                          appState={appState}
                          canvas={canvas}
-                          elementType={appState.elementType}
+                          activeTool={appState.activeTool}
                          setAppState={setAppState}
                          onImageAction={({ pointerType }) => {
                            onImageAction({
@ -349,7 +360,6 @@ const LayerUI = ({
                      setAppState={setAppState}
                    />
                  </Stack.Row>
-                  {libraryMenu}
                </Stack.Col>
              )}
            </Section>
@ -358,27 +368,15 @@ const LayerUI = ({
            className={clsx(
              "layer-ui__wrapper__top-right zen-mode-transition",
              {
-                "transition-right": zenModeEnabled,
+                "transition-right": appState.zenModeEnabled,
              },
            )}
          >
-            <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)}
+            <UserList
+              collaborators={appState.collaborators}
+              actionManager={actionManager}
+            />
+            {renderTopRightUI?.(device.isMobile, appState)}
          </div>
        </div>
      </FixedSideContainer>
@ -395,7 +393,8 @@ const LayerUI = ({
          className={clsx(
            "layer-ui__wrapper__footer-left zen-mode-transition",
            {
-              "layer-ui__wrapper__footer-left--transition-left": zenModeEnabled,
+              "layer-ui__wrapper__footer-left--transition-left":
+                appState.zenModeEnabled,
            },
          )}
        >
@ -407,17 +406,40 @@ const LayerUI = ({
                  zoom={appState.zoom}
                />
              </Island>
-              {!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 && (
+                <>
+                  <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>
+                </>
              )}
+              {!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>
@ -426,7 +448,7 @@ const LayerUI = ({
            "layer-ui__wrapper__footer-center zen-mode-transition",
            {
              "layer-ui__wrapper__footer-left--transition-bottom":
-                zenModeEnabled,
+                appState.zenModeEnabled,
            },
          )}
        >
@ -436,7 +458,7 @@ const LayerUI = ({
          className={clsx(
            "layer-ui__wrapper__footer-right zen-mode-transition",
            {
-              "transition-right disable-pointerEvents": zenModeEnabled,
+              "transition-right disable-pointerEvents": appState.zenModeEnabled,
            },
          )}
        >
@ -446,7 +468,7 @@ const LayerUI = ({
          className={clsx("disable-zen-mode", {
            "disable-zen-mode--visible": showExitZenModeBtn,
          })}
-          onClick={toggleZenMode}
+          onClick={() => actionManager.executeAction(actionToggleZenMode)}
        >
          {t("buttons.exitZenMode")}
        </button>
@ -456,7 +478,7 @@ const LayerUI = ({

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

-  return isMobile ? (
+  const renderStats = () => {
+    if (!appState.showStats) {
+      return null;
+    }
+    return (
+      <Stats
+        appState={appState}
+        setAppState={setAppState}
+        elements={elements}
+        onClose={() => {
+          actionManager.executeAction(actionToggleStats);
+        }}
+        renderCustomStats={renderCustomStats}
+      />
+    );
+  };
+
+  return device.isMobile ? (
    <>
      {dialogs}
      <MobileMenu
@ -497,41 +536,56 @@ const LayerUI = ({
        renderImageExportDialog={renderImageExportDialog}
        setAppState={setAppState}
        onCollabButtonClick={onCollabButtonClick}
-        onLockToggle={onLockToggle}
+        onLockToggle={() => onLockToggle()}
+        onPenModeToggle={onPenModeToggle}
        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)),
-      })}
-    >
-      {dialogs}
-      {renderFixedSideContainer()}
-      {renderBottomAppMenu()}
-      {appState.scrolledOutside && (
-        <button
-          className="scroll-back-to-content"
-          onClick={() => {
-            setAppState({
-              ...calculateScrollCenter(elements, appState, canvas),
-            });
-          }}
-        >
-          {t("buttons.scrollBackToContent")}
-        </button>
+    <>
+      <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>
+    </>
  );
 };

--- a/src/components/LibraryButton.tsx
+++ b/src/components/LibraryButton.tsx
@ -3,6 +3,8 @@ 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,6 +20,7 @@ export const LibraryButton: React.FC<{
  setAppState: React.Component<any, AppState>["setState"];
  isMobile?: boolean;
 }> = ({ appState, setAppState, isMobile }) => {
+  const device = useDevice();
  return (
    <label
      className={clsx(
@ -34,7 +37,19 @@ export const LibraryButton: React.FC<{
        type="checkbox"
        name="editor-library"
        onChange={(event) => {
-          setAppState({ isLibraryOpen: event.target.checked });
+          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"})`,
+            );
+          }
        }}
        checked={appState.isLibraryOpen}
        aria-label={capitalizeString(t("toolBar.library"))}
--- a/src/components/LibraryMenu.scss
+++ b/src/components/LibraryMenu.scss
@ -2,7 +2,6 @@

 .excalidraw {
  .layer-ui__library {
-    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
@ -11,25 +10,41 @@
      display: flex;
      align-items: center;
      width: 100%;
-      margin: 2px 0;
+      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;
      }
+    }
+  }

-      a {
-        margin-inline-start: auto;
-        // 17px for scrollbar (needed for overlay scrollbars on Big Sur?) + 1px extra
-        padding-inline-end: 18px;
-        white-space: nowrap;
-      }
+  .layer-ui__sidebar {
+    .layer-ui__library {
+      padding: 0;
+      height: 100%;
+    }
+    .library-menu-items-container {
+      height: 100%;
+      width: 100%;
    }
  }

  .layer-ui__library-message {
-    padding: 10px 20px;
-    max-width: 200px;
+    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 {
@ -52,4 +67,38 @@
      }
    }
  }
+
+  .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,5 +1,12 @@
-import { useRef, useState, useEffect, useCallback, RefObject } from "react";
-import Library from "../data/library";
+import {
+  useRef,
+  useState,
+  useEffect,
+  useCallback,
+  RefObject,
+  forwardRef,
+} from "react";
+import Library, { libraryItemsAtom } from "../data/library";
 import { t } from "../i18n";
 import { randomId } from "../random";
 import {
@ -18,7 +25,11 @@ import "./LibraryMenu.scss";
 import LibraryMenuItems from "./LibraryMenuItems";
 import { EVENT } from "../constants";
 import { KEYS } from "../keys";
-import { arrayToMap } from "../utils";
+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>,
@ -53,9 +64,20 @@ const getSelectedItems = (
  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,
-  onInsertShape,
+  onInsertLibraryItems,
  pendingElements,
  onAddToLibrary,
  theme,
@ -69,7 +91,7 @@ export const LibraryMenu = ({
 }: {
  pendingElements: LibraryItem["elements"];
  onClose: () => void;
-  onInsertShape: (elements: LibraryItem["elements"]) => void;
+  onInsertLibraryItems: (libraryItems: LibraryItems) => void;
  onAddToLibrary: () => void;
  theme: AppState["theme"];
  files: BinaryFiles;
@ -82,17 +104,30 @@ export const LibraryMenu = ({
 }) => {
  const ref = useRef<HTMLDivElement | null>(null);

-  useOnClickOutside(ref, (event) => {
-    // If click on the library icon, do nothing.
-    if ((event.target as Element).closest(".ToolIcon__library")) {
-      return;
-    }
-    onClose();
-  });
+  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) {
+      if (
+        event.key === KEYS.ESCAPE &&
+        (!appState.isLibraryMenuDocked || !device.canDeviceFitSidebar)
+      ) {
        onClose();
      }
    };
@ -100,13 +135,8 @@ export const LibraryMenu = ({
    return () => {
      document.removeEventListener(EVENT.KEYDOWN, handleKeyDown);
    };
-  }, [onClose]);
+  }, [onClose, appState.isLibraryMenuDocked, device.canDeviceFitSidebar]);

-  const [libraryItems, setLibraryItems] = useState<LibraryItems>([]);
-
-  const [loadingState, setIsLoading] = useState<
-    "preloading" | "loading" | "ready"
-  >("preloading");
  const [selectedItems, setSelectedItems] = useState<LibraryItem["id"][]>([]);
  const [showPublishLibraryDialog, setShowPublishLibraryDialog] =
    useState(false);
@ -114,55 +144,35 @@ export const LibraryMenu = ({
    url: string;
    authorName: string;
  }>(null);
-  const loadingTimerRef = useRef<number | null>(null);

-  useEffect(() => {
-    Promise.race([
-      new Promise((resolve) => {
-        loadingTimerRef.current = window.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 [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);

-  const removeFromLibrary = useCallback(async () => {
-    const items = await library.loadLibrary();
-
-    const nextItems = items.filter((item) => !selectedItems.includes(item.id));
-    library.saveLibrary(nextItems).catch((error) => {
-      setLibraryItems(items);
-      setAppState({ errorMessage: t("alerts.errorRemovingFromLibrary") });
-    });
-    setSelectedItems([]);
-    setLibraryItems(nextItems);
-  }, [library, setAppState, selectedItems, setSelectedItems]);
+  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();
-    setLibraryItems([]);
    focusContainer();
  }, [library, focusContainer]);

  const addToLibrary = useCallback(
-    async (elements: LibraryItem["elements"]) => {
+    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 items = await library.loadLibrary();
      const nextItems: LibraryItems = [
        {
          status: "unpublished",
@ -170,14 +180,12 @@ export const LibraryMenu = ({
          id: randomId(),
          created: Date.now(),
        },
-        ...items,
+        ...libraryItems,
      ];
      onAddToLibrary();
-      library.saveLibrary(nextItems).catch((error) => {
-        setLibraryItems(items);
+      library.setLibrary(nextItems).catch(() => {
        setAppState({ errorMessage: t("alerts.errorAddingToLibrary") });
      });
-      setLibraryItems(nextItems);
    },
    [onAddToLibrary, library, setAppState],
  );
@ -216,7 +224,7 @@ export const LibraryMenu = ({
  }, [setPublishLibSuccess, publishLibSuccess]);

  const onPublishLibSuccess = useCallback(
-    (data) => {
+    (data: { url: string; authorName: string }, libraryItems: LibraryItems) => {
      setShowPublishLibraryDialog(false);
      setPublishLibSuccess({ url: data.url, authorName: data.authorName });
      const nextLibItems = libraryItems.slice();
@ -225,102 +233,71 @@ export const LibraryMenu = ({
          libItem.status = "published";
        }
      });
-      library.saveLibrary(nextLibItems);
-      setLibraryItems(nextLibItems);
+      library.setLibrary(nextLibItems);
    },
-    [
-      setShowPublishLibraryDialog,
-      setPublishLibSuccess,
-      libraryItems,
-      selectedItems,
-      library,
-    ],
+    [setShowPublishLibraryDialog, setPublishLibSuccess, selectedItems, library],
  );

-  const [lastSelectedItem, setLastSelectedItem] = useState<
-    LibraryItem["id"] | null
-  >(null);
+  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 loadingState === "preloading" ? null : (
-    <Island padding={1} ref={ref} className="layer-ui__library">
+  return (
+    <LibraryMenuWrapper ref={ref}>
      {showPublishLibraryDialog && (
        <PublishLibrary
          onClose={() => setShowPublishLibraryDialog(false)}
-          libraryItems={getSelectedItems(libraryItems, selectedItems)}
+          libraryItems={getSelectedItems(
+            libraryItemsData.libraryItems,
+            selectedItems,
+          )}
          appState={appState}
-          onSuccess={onPublishLibSuccess}
+          onSuccess={(data) =>
+            onPublishLibSuccess(data, libraryItemsData.libraryItems)
+          }
          onError={(error) => window.alert(error)}
-          updateItemsInStorage={() => library.saveLibrary(libraryItems)}
+          updateItemsInStorage={() =>
+            library.setLibrary(libraryItemsData.libraryItems)
+          }
          onRemove={(id: string) =>
            setSelectedItems(selectedItems.filter((_id) => _id !== id))
          }
        />
      )}
      {publishLibSuccess && renderPublishSuccess()}
-
-      {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}
-          libraryReturnUrl={libraryReturnUrl}
-          library={library}
-          theme={theme}
-          files={files}
-          id={id}
-          selectedItems={selectedItems}
-          onToggle={(id, event) => {
-            const shouldSelect = !selectedItems.includes(id);
-
-            if (shouldSelect) {
-              if (event.shiftKey && lastSelectedItem) {
-                const rangeStart = libraryItems.findIndex(
-                  (item) => item.id === lastSelectedItem,
-                );
-                const rangeEnd = libraryItems.findIndex(
-                  (item) => item.id === id,
-                );
-
-                if (rangeStart === -1 || rangeEnd === -1) {
-                  setSelectedItems([...selectedItems, id]);
-                  return;
-                }
-
-                const selectedItemsMap = arrayToMap(selectedItems);
-                const nextSelectedIds = libraryItems.reduce(
-                  (acc: LibraryItem["id"][], item, idx) => {
-                    if (
-                      (idx >= rangeStart && idx <= rangeEnd) ||
-                      selectedItemsMap.has(item.id)
-                    ) {
-                      acc.push(item.id);
-                    }
-                    return acc;
-                  },
-                  [],
-                );
-
-                setSelectedItems(nextSelectedIds);
-              } else {
-                setSelectedItems([...selectedItems, id]);
-              }
-              setLastSelectedItem(id);
-            } else {
-              setLastSelectedItem(null);
-              setSelectedItems(selectedItems.filter((_id) => _id !== id));
-            }
-          }}
-          onPublish={() => setShowPublishLibraryDialog(true)}
-          resetLibrary={resetLibrary}
-        />
-      )}
-    </Island>
+      <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
@ -2,8 +2,17 @@

 .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;
@ -87,12 +96,16 @@
      }
    }
    &__items {
-      max-height: 50vh;
-      overflow: auto;
-      margin-top: 0.5rem;
+      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;
--- a/src/components/LibraryMenuItems.tsx
+++ b/src/components/LibraryMenuItems.tsx
@ -1,6 +1,6 @@
 import { chunk } from "lodash";
-import { useCallback, useState } from "react";
-import { importLibraryFromJSON, saveLibraryAsJSON } from "../data/json";
+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";
@ -11,48 +11,57 @@ import {
  LibraryItem,
  LibraryItems,
 } from "../types";
-import { muteFSAbortError } from "../utils";
-import { useIsMobile } from "./App";
+import { arrayToMap, muteFSAbortError } from "../utils";
+import { useDevice } from "./App";
 import ConfirmDialog from "./ConfirmDialog";
-import { exportToFileIcon, load, publishIcon, trash } from "./icons";
+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 { VERSIONS } from "../constants";
+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,
-  onInsertShape,
+  onInsertLibraryItems,
  pendingElements,
  theme,
  setAppState,
+  appState,
  libraryReturnUrl,
  library,
  files,
  id,
  selectedItems,
-  onToggle,
+  onSelectItems,
  onPublish,
  resetLibrary,
 }: {
+  isLoading: boolean;
  libraryItems: LibraryItems;
  pendingElements: LibraryItem["elements"];
  onRemoveFromLibrary: () => void;
-  onInsertShape: (elements: LibraryItem["elements"]) => 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"][];
-  onToggle: (id: LibraryItem["id"], event: React.MouseEvent) => void;
+  onSelectItems: (id: LibraryItem["id"][]) => void;
  onPublish: () => void;
  resetLibrary: () => void;
 }) => {
@ -84,9 +93,7 @@ const LibraryMenuItems = ({
  }, [selectedItems, onRemoveFromLibrary, resetLibrary]);

  const [showRemoveLibAlert, setShowRemoveLibAlert] = useState(false);
-
-  const isMobile = useIsMobile();
-
+  const device = useDevice();
  const renderLibraryActions = () => {
    const itemsSelected = !!selectedItems.length;
    const items = itemsSelected
@ -97,24 +104,34 @@ const LibraryMenuItems = ({
      : t("buttons.resetLibrary");
    return (
      <div className="library-actions">
-        {(!itemsSelected || !isMobile) && (
+        {!itemsSelected && (
          <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 });
+            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"
          />
@ -130,7 +147,7 @@ const LibraryMenuItems = ({
              onClick={async () => {
                const libraryItems = itemsSelected
                  ? items
-                  : await library.loadLibrary();
+                  : await library.getLatestLibrary();
                saveLibraryAsJSON(libraryItems)
                  .catch(muteFSAbortError)
                  .catch((error) => {
@ -162,7 +179,7 @@ const LibraryMenuItems = ({
            </ToolButton>
          </>
        )}
-        {itemsSelected && !isPublished && (
+        {itemsSelected && (
          <Tooltip label={t("hints.publishLibrary")}>
            <ToolButton
              type="button"
@ -172,7 +189,7 @@ const LibraryMenuItems = ({
              className="library-actions--publish"
              onClick={onPublish}
            >
-              {!isMobile && <label>{t("buttons.publishLibrary")}</label>}
+              {!device.isMobile && <label>{t("buttons.publishLibrary")}</label>}
              {selectedItems.length > 0 && (
                <span className="library-actions-counter">
                  {selectedItems.length}
@ -181,17 +198,89 @@ const LibraryMenuItems = ({
            </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 = isMobile ? 4 : 6;
+  const CELLS_PER_ROW = device.isMobile && !device.isSmScreen ? 6 : 4;

  const referrer =
    libraryReturnUrl || window.location.origin + window.location.pathname;
-  const isPublished = selectedItems.some(
-    (id) => libraryItems.find((item) => item.id === id)?.status === "published",
-  );
+
+  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:
@ -213,8 +302,12 @@ const LibraryMenuItems = ({
          onClick={params.onClick || (() => {})}
          id={params.item?.id || null}
          selected={!!params.item?.id && selectedItems.includes(params.item.id)}
-          onToggle={(id, event) => {
-            onToggle(id, event);
+          onToggle={onItemSelectToggle}
+          onDrag={(id, event) => {
+            event.dataTransfer.setData(
+              MIME_TYPES.excalidrawlib,
+              serializeLibraryAsJSON(getInsertedElements(id)),
+            );
          }}
        />
      </Stack.Col>
@ -234,7 +327,7 @@ const LibraryMenuItems = ({
      if (item.id) {
        return createLibraryItemCompo({
          item,
-          onClick: () => onInsertShape(item.elements),
+          onClick: () => onInsertLibraryItems(getInsertedElements(item.id)),
          key: item.id,
        });
      }
@ -273,49 +366,192 @@ const LibraryMenuItems = ({
    });
  };

+  const unpublishedItems = libraryItems.filter(
+    (item) => item.status !== "published",
+  );
  const publishedItems = libraryItems.filter(
    (item) => item.status === "published",
  );
-  const unpublishedItems = [
-    // append pending library item
-    ...(pendingElements.length
-      ? [{ id: null, elements: pendingElements }]
-      : []),
-    ...libraryItems.filter((item) => item.status !== "published"),
-  ];

-  return (
-    <div className="library-menu-items-container">
-      {showRemoveLibAlert && renderRemoveLibAlert()}
-      <div className="layer-ui__library-header" key="library-header">
-        {renderLibraryActions()}
-        <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>
+  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">{t("labels.personalLib")}</div>
-          {renderLibrarySection(unpublishedItems)}
+          <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,
+            ])
+          )}
        </>

        <>
-          <div className="separator">{t("labels.excalidrawLib")} </div>
-
-          {renderLibrarySection(publishedItems)}
+          {(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>
  );
 };
--- a/src/components/LibraryUnit.scss
+++ b/src/components/LibraryUnit.scss
@ -3,7 +3,7 @@
 .excalidraw {
  .library-unit {
    align-items: center;
-    border: 1px solid var(--button-gray-2);
+    border: 1px solid transparent;
    display: flex;
    justify-content: center;
    position: relative;
@ -21,10 +21,6 @@
    }
  }

-  &.theme--dark .library-unit {
-    border-color: rgb(48, 48, 48);
-  }
-
  .library-unit__dragger {
    display: flex;
    align-items: center;
--- a/src/components/LibraryUnit.tsx
+++ b/src/components/LibraryUnit.tsx
@ -1,8 +1,7 @@
 import clsx from "clsx";
 import oc from "open-color";
 import { useEffect, useRef, useState } from "react";
-import { MIME_TYPES } from "../constants";
-import { useIsMobile } from "../components/App";
+import { useDevice } from "../components/App";
 import { exportToSvg } from "../scene/export";
 import { BinaryFiles, LibraryItem } from "../types";
 import "./LibraryUnit.scss";
@ -29,6 +28,7 @@ export const LibraryUnit = ({
  onClick,
  selected,
  onToggle,
+  onDrag,
 }: {
  id: LibraryItem["id"] | /** for pending item */ null;
  elements?: LibraryItem["elements"];
@ -37,6 +37,7 @@ export const LibraryUnit = ({
  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(() => {
@ -66,7 +67,7 @@ export const LibraryUnit = ({
  }, [elements, files]);

  const [isHovered, setIsHovered] = useState(false);
-  const isMobile = useIsMobile();
+  const isMobile = useDevice().isMobile;
  const adder = isPending && (
    <div className="library-unit__adder">{PLUS_ICON}</div>
  );
@ -99,11 +100,12 @@ export const LibraryUnit = ({
            : undefined
        }
        onDragStart={(event) => {
+          if (!id) {
+            event.preventDefault();
+            return;
+          }
          setIsHovered(false);
-          event.dataTransfer.setData(
-            MIME_TYPES.excalidrawlib,
-            JSON.stringify(elements),
-          );
+          onDrag(id, event);
        }}
      />
      {adder}
--- a/src/components/LoadingMessage.tsx
+++ b/src/components/LoadingMessage.tsx
@ -1,10 +1,30 @@
 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">
-      <span>{t("labels.loadingScene")}</span>
+      <div>
+        <Spinner />
+      </div>
+      <div className="LoadingMessage-text">{t("labels.loadingScene")}</div>
    </div>
  );
 };
--- a/src/components/MobileMenu.tsx
+++ b/src/components/MobileMenu.tsx
@ -8,7 +8,7 @@ import { NonDeletedExcalidrawElement } from "../element/types";
 import { FixedSideContainer } from "./FixedSideContainer";
 import { Island } from "./Island";
 import { HintViewer } from "./HintViewer";
-import { calculateScrollCenter } from "../scene";
+import { calculateScrollCenter, getSelectedElements } from "../scene";
 import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
 import { Section } from "./Section";
 import CollabButton from "./CollabButton";
@ -17,6 +17,7 @@ import { LockButton } from "./LockButton";
 import { UserList } from "./UserList";
 import { BackgroundPickerAndDarkModeToggle } from "./BackgroundPickerAndDarkModeToggle";
 import { LibraryButton } from "./LibraryButton";
+import { PenModeButton } from "./PenModeButton";

 type MobileMenuProps = {
  appState: AppState;
@ -28,16 +29,20 @@ type MobileMenuProps = {
  libraryMenu: JSX.Element | null;
  onCollabButtonClick?: () => void;
  onLockToggle: () => void;
+  onPenModeToggle: () => void;
  canvas: HTMLCanvasElement | null;
  isCollaborating: boolean;
-  renderCustomFooter?: (isMobile: boolean, appState: AppState) => JSX.Element;
-  viewModeEnabled: boolean;
+  renderCustomFooter?: (
+    isMobile: boolean,
+    appState: AppState,
+  ) => JSX.Element | null;
  showThemeBtn: boolean;
  onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void;
  renderTopRightUI?: (
    isMobile: boolean,
    appState: AppState,
  ) => JSX.Element | null;
+  renderStats: () => JSX.Element | null;
 };

 export const MobileMenu = ({
@ -50,27 +55,29 @@ export const MobileMenu = ({
  setAppState,
  onCollabButtonClick,
  onLockToggle,
+  onPenModeToggle,
  canvas,
  isCollaborating,
  renderCustomFooter,
-  viewModeEnabled,
  showThemeBtn,
  onImageAction,
  renderTopRightUI,
+  renderStats,
 }: MobileMenuProps) => {
  const renderToolbar = () => {
    return (
      <FixedSideContainer side="top" className="App-top-bar">
        <Section heading="shapes">
-          {(heading) => (
+          {(heading: React.ReactNode) => (
            <Stack.Col gap={4} align="center">
              <Stack.Row gap={1} className="App-toolbar-container">
                <Island padding={1} className="App-toolbar">
                  {heading}
                  <Stack.Row gap={1}>
                    <ShapesSwitcher
+                      appState={appState}
                      canvas={canvas}
-                      elementType={appState.elementType}
+                      activeTool={appState.activeTool}
                      setAppState={setAppState}
                      onImageAction={({ pointerType }) => {
                        onImageAction({
@ -82,7 +89,7 @@ export const MobileMenu = ({
                </Island>
                {renderTopRightUI && renderTopRightUI(true, appState)}
                <LockButton
-                  checked={appState.elementLocked}
+                  checked={appState.activeTool.locked}
                  onChange={onLockToggle}
                  title={t("toolBar.lock")}
                  isMobile
@ -92,6 +99,13 @@ export const MobileMenu = ({
                  setAppState={setAppState}
                  isMobile
                />
+                <PenModeButton
+                  checked={appState.penMode}
+                  onChange={onPenModeToggle}
+                  title={t("toolBar.penMode")}
+                  isMobile
+                  penDetected={appState.penDetected}
+                />
              </Stack.Row>
              {libraryMenu}
            </Stack.Col>
@ -103,19 +117,29 @@ export const MobileMenu = ({
  };

  const renderAppToolbar = () => {
-    if (viewModeEnabled) {
+    // Render eraser conditionally in mobile
+    const showEraser =
+      !appState.viewModeEnabled &&
+      !appState.editingElement &&
+      getSelectedElements(elements, appState).length === 0;
+
+    if (appState.viewModeEnabled) {
      return (
        <div className="App-toolbar-content">
          {actionManager.renderAction("toggleCanvasMenu")}
        </div>
      );
    }
+
    return (
      <div className="App-toolbar-content">
        {actionManager.renderAction("toggleCanvasMenu")}
        {actionManager.renderAction("toggleEditMenu")}
+
        {actionManager.renderAction("undo")}
        {actionManager.renderAction("redo")}
+        {showEraser && actionManager.renderAction("eraser")}
+
        {actionManager.renderAction(
          appState.multiElement ? "finalize" : "duplicateSelection",
        )}
@ -125,7 +149,7 @@ export const MobileMenu = ({
  };

  const renderCanvasActions = () => {
-    if (viewModeEnabled) {
+    if (appState.viewModeEnabled) {
      return (
        <>
          {renderJSONExportDialog()}
@ -159,7 +183,8 @@ export const MobileMenu = ({
  };
  return (
    <>
-      {!viewModeEnabled && renderToolbar()}
+      {!appState.viewModeEnabled && renderToolbar()}
+      {renderStats()}
      <div
        className="App-bottom-bar"
        style={{
@ -178,51 +203,44 @@ export const MobileMenu = ({
                  {appState.collaborators.size > 0 && (
                    <fieldset>
                      <legend>{t("labels.collaborators")}</legend>
-                      <UserList mobile>
-                        {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]) => (
-                            <React.Fragment key={clientId}>
-                              {actionManager.renderAction("goToCollaborator", {
-                                id: clientId,
-                              })}
-                            </React.Fragment>
-                          ))}
-                      </UserList>
+                      <UserList
+                        mobile
+                        collaborators={appState.collaborators}
+                        actionManager={actionManager}
+                      />
                    </fieldset>
                  )}
                </Stack.Col>
              </div>
            </Section>
          ) : appState.openMenu === "shape" &&
-            !viewModeEnabled &&
+            !appState.viewModeEnabled &&
            showSelectedShapeActions(appState, elements) ? (
            <Section className="App-mobile-menu" heading="selectedShapeActions">
              <SelectedShapeActions
                appState={appState}
                elements={elements}
                renderAction={actionManager.renderAction}
-                elementType={appState.elementType}
+                activeTool={appState.activeTool.type}
              />
            </Section>
          ) : null}
          <footer className="App-toolbar">
            {renderAppToolbar()}
-            {appState.scrolledOutside && !appState.openMenu && (
-              <button
-                className="scroll-back-to-content"
-                onClick={() => {
-                  setAppState({
-                    ...calculateScrollCenter(elements, appState, canvas),
-                  });
-                }}
-              >
-                {t("buttons.scrollBackToContent")}
-              </button>
-            )}
+            {appState.scrolledOutside &&
+              !appState.openMenu &&
+              !appState.isLibraryOpen && (
+                <button
+                  className="scroll-back-to-content"
+                  onClick={() => {
+                    setAppState({
+                      ...calculateScrollCenter(elements, appState, canvas),
+                    });
+                  }}
+                >
+                  {t("buttons.scrollBackToContent")}
+                </button>
+              )}
          </footer>
        </Island>
      </div>
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@ -4,11 +4,11 @@ import React, { useState, useLayoutEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 import clsx from "clsx";
 import { KEYS } from "../keys";
-import { useExcalidrawContainer, useIsMobile } from "./App";
+import { useExcalidrawContainer, useDevice } from "./App";
 import { AppState } from "../types";
 import { THEME } from "../constants";

-export const Modal = (props: {
+export const Modal: React.FC<{
  className?: string;
  children: React.ReactNode;
  maxWidth?: number;
@ -16,7 +16,7 @@ export const Modal = (props: {
  labelledBy: string;
  theme?: AppState["theme"];
  closeOnClickOutside?: boolean;
-}) => {
+}> = (props) => {
  const { theme = THEME.LIGHT, closeOnClickOutside = true } = props;
  const modalRoot = useBodyRoot(theme);

@ -59,17 +59,17 @@ export const Modal = (props: {
 const useBodyRoot = (theme: AppState["theme"]) => {
  const [div, setDiv] = useState<HTMLDivElement | null>(null);

-  const isMobile = useIsMobile();
-  const isMobileRef = useRef(isMobile);
-  isMobileRef.current = isMobile;
+  const device = useDevice();
+  const isMobileRef = useRef(device.isMobile);
+  isMobileRef.current = device.isMobile;

  const { container: excalidrawContainer } = useExcalidrawContainer();

  useLayoutEffect(() => {
    if (div) {
-      div.classList.toggle("excalidraw--mobile", isMobile);
+      div.classList.toggle("excalidraw--mobile", device.isMobile);
    }
-  }, [div, isMobile]);
+  }, [div, device.isMobile]);

  useLayoutEffect(() => {
    const isDarkTheme =
--- a/src/components/PenModeButton.tsx
+++ b/src/components/PenModeButton.tsx
@ -0,0 +1,91 @@
+import "./ToolIcon.scss";
+
+import clsx from "clsx";
+import { ToolButtonSize } from "./ToolButton";
+
+type PenModeIconProps = {
+  title?: string;
+  name?: string;
+  checked: boolean;
+  onChange?(): void;
+  zenModeEnabled?: boolean;
+  isMobile?: boolean;
+  penDetected: boolean;
+};
+
+const DEFAULT_SIZE: ToolButtonSize = "medium";
+
+const ICONS = {
+  CHECKED: (
+    <svg
+      width="205"
+      height="205"
+      viewBox="0 0 205 205"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="m35 195-25-29.17V50h50v115l-25 30" />
+      <path d="M10 40V10h50v30H10" />
+      <path d="M125 145h70v50h-70" />
+      <path d="M190 145v-30l-10-20h-40l-10 20v30h15v-30l5-5h20l5 5v30h15" />
+    </svg>
+  ),
+  UNCHECKED: (
+    <svg
+      width="205"
+      height="205"
+      viewBox="0 0 205 205"
+      xmlns="http://www.w3.org/2000/svg"
+      className="unlocked-icon rtl-mirror"
+    >
+      <path d="m35 195-25-29.17V50h50v115l-25 30" />
+      <path d="M10 40V10h50v30H10" />
+      <path d="M125 145h70v50h-70" />
+      <path d="M145 145v-30l-10-20H95l-10 20v30h15v-30l5-5h20l5 5v30h15" />
+    </svg>
+  ),
+};
+
+export const PenModeButton = (props: PenModeIconProps) => {
+  if (!props.penDetected) {
+    if (props.isMobile) {
+      return null;
+    }
+    return (
+      <label
+        className={clsx(
+          "ToolIcon ToolIcon__penMode ToolIcon_type_floating",
+          `ToolIcon_size_${DEFAULT_SIZE}`,
+          {
+            "is-mobile": props.isMobile,
+          },
+        )}
+      >
+        <div className="ToolIcon__icon ToolIcon__hidden" />
+      </label>
+    );
+  }
+  return (
+    <label
+      className={clsx(
+        "ToolIcon ToolIcon__penMode ToolIcon_type_floating",
+        `ToolIcon_size_${DEFAULT_SIZE}`,
+        {
+          "is-mobile": props.isMobile,
+        },
+      )}
+      title={`${props.title}`}
+    >
+      <input
+        className="ToolIcon_type_checkbox"
+        type="checkbox"
+        name={props.name}
+        onChange={props.onChange}
+        checked={props.checked}
+        aria-label={props.title}
+      />
+      <div className="ToolIcon__icon">
+        {props.checked ? ICONS.CHECKED : ICONS.UNCHECKED}
+      </div>
+    </label>
+  );
+};
--- a/src/components/Popover.scss
+++ b/src/components/Popover.scss
@ -2,5 +2,6 @@
  .popover {
    position: absolute;
    z-index: 10;
+    padding: 5px 0 5px;
  }
 }
--- a/src/components/Popover.tsx
+++ b/src/components/Popover.tsx
@ -1,6 +1,8 @@
 import React, { useLayoutEffect, useRef, useEffect } from "react";
 import "./Popover.scss";
 import { unstable_batchedUpdates } from "react-dom";
+import { queryFocusableElements } from "../utils";
+import { KEYS } from "../keys";

 type Props = {
  top?: number;
@ -8,6 +10,10 @@ type Props = {
  children?: React.ReactNode;
  onCloseRequest?(event: PointerEvent): void;
  fitInViewport?: boolean;
+  offsetLeft?: number;
+  offsetTop?: number;
+  viewportWidth?: number;
+  viewportHeight?: number;
 };

 export const Popover = ({
@ -16,25 +22,76 @@ export const Popover = ({
  top,
  onCloseRequest,
  fitInViewport = false,
+  offsetLeft = 0,
+  offsetTop = 0,
+  viewportWidth = window.innerWidth,
+  viewportHeight = window.innerHeight,
 }: Props) => {
  const popoverRef = useRef<HTMLDivElement>(null);

+  const container = popoverRef.current;
+
+  useEffect(() => {
+    if (!container) {
+      return;
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === KEYS.TAB) {
+        const focusableElements = queryFocusableElements(container);
+        const { activeElement } = document;
+        const currentIndex = focusableElements.findIndex(
+          (element) => element === activeElement,
+        );
+
+        if (currentIndex === 0 && event.shiftKey) {
+          focusableElements[focusableElements.length - 1].focus();
+          event.preventDefault();
+          event.stopImmediatePropagation();
+        } else if (
+          currentIndex === focusableElements.length - 1 &&
+          !event.shiftKey
+        ) {
+          focusableElements[0].focus();
+          event.preventDefault();
+          event.stopImmediatePropagation();
+        }
+      }
+    };
+
+    container.addEventListener("keydown", handleKeyDown);
+
+    return () => container.removeEventListener("keydown", handleKeyDown);
+  }, [container]);
+
  // ensure the popover doesn't overflow the viewport
  useLayoutEffect(() => {
    if (fitInViewport && popoverRef.current) {
      const element = popoverRef.current;
      const { x, y, width, height } = element.getBoundingClientRect();
+      const { innerWidth: viewportWidth, innerHeight: viewportHeight } = window;

-      const viewportWidth = window.innerWidth;
-      if (x + width > viewportWidth) {
-        element.style.left = `${viewportWidth - width}px`;
+      //Position correctly when clicked on rightmost part or the bottom part of viewport
+      if (x + width - offsetLeft > viewportWidth) {
+        element.style.left = `${viewportWidth - width - 10}px`;
      }
-      const viewportHeight = window.innerHeight;
-      if (y + height > viewportHeight) {
+      if (y + height - offsetTop > viewportHeight) {
        element.style.top = `${viewportHeight - height}px`;
      }
+
+      //Resize to fit viewport on smaller screens
+      if (height >= viewportHeight) {
+        element.style.height = `${viewportHeight - 20}px`;
+        element.style.top = "10px";
+        element.style.overflowY = "scroll";
+      }
+      if (width >= viewportWidth) {
+        element.style.width = `${viewportWidth}px`;
+        element.style.left = "0px";
+        element.style.overflowX = "scroll";
+      }
    }
-  }, [fitInViewport]);
+  }, [fitInViewport, viewportWidth, viewportHeight, offsetLeft, offsetTop]);

  useEffect(() => {
    if (onCloseRequest) {
--- a/src/components/PublishLibrary.scss
+++ b/src/components/PublishLibrary.scss
@ -82,6 +82,10 @@
      }
    }

+    &-warning {
+      color: $oc-red-6;
+    }
+
    &-note {
      padding: 1em;
      font-style: italic;
--- a/src/components/PublishLibrary.tsx
+++ b/src/components/PublishLibrary.tsx
@ -295,6 +295,11 @@ const PublishLibrary = ({
  }, [clonedLibItems, onClose, updateItemsInStorage, libraryData]);

  const shouldRenderForm = !!libraryItems.length;
+
+  const containsPublishedItems = libraryItems.some(
+    (item) => item.status === "published",
+  );
+
  return (
    <Dialog
      onCloseRequest={onDialogClose}
@ -329,6 +334,11 @@ const PublishLibrary = ({
          <div className="publish-library-note">
            {t("publishDialog.noteItems")}
          </div>
+          {containsPublishedItems && (
+            <span className="publish-library-note publish-library-warning">
+              {t("publishDialog.republishWarning")}
+            </span>
+          )}
          {renderLibraryItems()}
          <div className="publish-library__fields">
            <label>
--- a/src/components/Section.tsx
+++ b/src/components/Section.tsx
@ -2,12 +2,11 @@ import React from "react";
 import { t } from "../i18n";
 import { useExcalidrawContainer } from "./App";

-interface SectionProps extends React.HTMLProps<HTMLElement> {
+export const Section: React.FC<{
  heading: string;
-  children: React.ReactNode | ((header: React.ReactNode) => React.ReactNode);
-}
-
-export const Section = ({ heading, children, ...props }: SectionProps) => {
+  children?: React.ReactNode | ((heading: React.ReactNode) => React.ReactNode);
+  className?: string;
+}> = ({ heading, children, ...props }) => {
  const { id } = useExcalidrawContainer();
  const header = (
    <h2 className="visually-hidden" id={`${id}-${heading}-title`}>
--- a/src/components/SidebarLockButton.scss
+++ b/src/components/SidebarLockButton.scss
@ -0,0 +1,22 @@
+@import "../css/variables.module";
+
+.excalidraw {
+  .layer-ui__sidebar-lock-button {
+    @include toolbarButtonColorStates;
+    margin-right: 0.2rem;
+  }
+  .ToolIcon_type_floating .side_lock_icon {
+    width: calc(var(--space-factor) * 7);
+    height: calc(var(--space-factor) * 7);
+    svg {
+      // mirror
+      transform: scale(-1, 1);
+    }
+  }
+
+  .ToolIcon_type_checkbox {
+    &:not(.ToolIcon_toggle_opaque):checked + .side_lock_icon {
+      background-color: var(--color-primary);
+    }
+  }
+}
--- a/src/components/SidebarLockButton.tsx
+++ b/src/components/SidebarLockButton.tsx
@ -0,0 +1,46 @@
+import "./ToolIcon.scss";
+
+import React from "react";
+import clsx from "clsx";
+import { ToolButtonSize } from "./ToolButton";
+import { t } from "../i18n";
+import { Tooltip } from "./Tooltip";
+
+import "./SidebarLockButton.scss";
+
+type SidebarLockIconProps = {
+  checked: boolean;
+  onChange?(): void;
+};
+
+const DEFAULT_SIZE: ToolButtonSize = "medium";
+
+const SIDE_LIBRARY_TOGGLE_ICON = (
+  <svg viewBox="0 0 24 24" fill="#ffffff">
+    <path d="M19 22H5a3 3 0 01-3-3V5a3 3 0 013-3h14a3 3 0 013 3v14a3 3 0 01-3 3zm0-18h-9v16h9a1.01 1.01 0 001-1V5a1.01 1.01 0 00-1-1z"></path>
+  </svg>
+);
+
+export const SidebarLockButton = (props: SidebarLockIconProps) => {
+  return (
+    <Tooltip label={t("labels.sidebarLock")}>
+      <label
+        className={clsx(
+          "ToolIcon ToolIcon__lock ToolIcon_type_floating",
+          `ToolIcon_size_${DEFAULT_SIZE}`,
+        )}
+      >
+        <input
+          className="ToolIcon_type_checkbox"
+          type="checkbox"
+          onChange={props.onChange}
+          checked={props.checked}
+          aria-label={t("labels.sidebarLock")}
+        />{" "}
+        <div className="ToolIcon__icon side_lock_icon" tabIndex={0}>
+          {SIDE_LIBRARY_TOGGLE_ICON}
+        </div>{" "}
+      </label>{" "}
+    </Tooltip>
+  );
+};
--- a/src/components/SingleLibraryItem.scss
+++ b/src/components/SingleLibraryItem.scss
@ -3,11 +3,24 @@
 .excalidraw {
  .single-library-item {
    position: relative;
+
+    &-status {
+      position: absolute;
+      top: 0.3rem;
+      left: 0.3rem;
+      font-size: 0.7rem;
+      color: $oc-red-7;
+      background: rgba(255, 255, 255, 0.9);
+      padding: 0.1rem 0.2rem;
+      border-radius: 0.2rem;
+    }
+
    &__svg {
+      background-color: $oc-white;
+      padding: 0.3rem;
      width: 7.5rem;
      height: 7.5rem;
      border: 1px solid var(--button-gray-2);
-      margin: 0.3rem;
      svg {
        width: 100%;
        height: 100%;
@ -40,7 +53,7 @@
    &--remove {
      position: absolute;
      top: 0.2rem;
-      right: 1.3rem;
+      right: 1rem;

      .ToolIcon__icon {
        margin: 0;
--- a/src/components/SingleLibraryItem.tsx
+++ b/src/components/SingleLibraryItem.tsx
@ -45,6 +45,11 @@ const SingleLibraryItem = ({

  return (
    <div className="single-library-item">
+      {libItem.status === "published" && (
+        <span className="single-library-item-status">
+          {t("labels.statusPublished")}
+        </span>
+      )}
      <div ref={svgRef} className="single-library-item__svg" />
      <ToolButton
        aria-label={t("buttons.remove")}
--- a/src/components/Stack.tsx
+++ b/src/components/Stack.tsx
@ -41,6 +41,7 @@ const ColStack = ({
  align,
  justifyContent,
  className,
+  style,
 }: StackProps) => {
  return (
    <div
@ -49,6 +50,7 @@ const ColStack = ({
        "--gap": gap,
        justifyItems: align,
        justifyContent,
+        ...style,
      }}
    >
      {children}
--- a/src/components/Stats.scss
+++ b/src/components/Stats.scss
@ -7,6 +7,7 @@
    right: 12px;
    font-size: 12px;
    z-index: 10;
+    pointer-events: all;

    h3 {
      margin: 0 24px 8px 0;
--- a/src/components/Stats.tsx
+++ b/src/components/Stats.tsx
@ -2,7 +2,7 @@ import React from "react";
 import { getCommonBounds } from "../element/bounds";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
-import { useIsMobile } from "../components/App";
+import { useDevice } from "../components/App";
 import { getTargetElements } from "../scene";
 import { AppState, ExcalidrawProps } from "../types";
 import { close } from "./icons";
@ -16,16 +16,13 @@ export const Stats = (props: {
  onClose: () => void;
  renderCustomStats: ExcalidrawProps["renderCustomStats"];
 }) => {
-  const isMobile = useIsMobile();
-
+  const device = useDevice();
  const boundingBox = getCommonBounds(props.elements);
  const selectedElements = getTargetElements(props.elements, props.appState);
  const selectedBoundingBox = getCommonBounds(selectedElements);
-
-  if (isMobile && props.appState.openMenu) {
+  if (device.isMobile && props.appState.openMenu) {
    return null;
  }
-
  return (
    <div className="Stats">
      <Island padding={2}>
--- a/src/components/Toast.scss
+++ b/src/components/Toast.scss
@ -2,6 +2,9 @@

 .excalidraw {
  .Toast {
+    $closeButtonSize: 1.2rem;
+    $closeButtonPadding: 0.4rem;
+
    animation: fade-in 0.5s;
    background-color: var(--button-gray-1);
    border-radius: 4px;
@ -15,11 +18,24 @@
    text-align: center;
    width: 300px;
    z-index: 999999;
-  }

-  .Toast__message {
-    color: var(--popup-text-color);
-    white-space: pre-wrap;
+    .Toast__message {
+      padding: 0 $closeButtonSize + ($closeButtonPadding);
+      color: var(--popup-text-color);
+      white-space: pre-wrap;
+    }
+
+    .close {
+      position: absolute;
+      top: 0;
+      right: 0;
+      padding: $closeButtonPadding;
+
+      .ToolIcon__icon {
+        width: $closeButtonSize;
+        height: $closeButtonSize;
+      }
+    }
  }

  @keyframes fade-in {
--- a/src/components/Toast.tsx
+++ b/src/components/Toast.tsx
@ -1,34 +1,59 @@
 import { useCallback, useEffect, useRef } from "react";
-import { TOAST_TIMEOUT } from "../constants";
+import { close } from "./icons";
 import "./Toast.scss";
+import { ToolButton } from "./ToolButton";
+
+const DEFAULT_TOAST_TIMEOUT = 5000;

 export const Toast = ({
  message,
-  clearToast,
+  onClose,
+  closable = false,
+  // To prevent autoclose, pass duration as Infinity
+  duration = DEFAULT_TOAST_TIMEOUT,
 }: {
  message: string;
-  clearToast: () => void;
+  onClose: () => void;
+  closable?: boolean;
+  duration?: number;
 }) => {
  const timerRef = useRef<number>(0);
-
-  const scheduleTimeout = useCallback(
-    () =>
-      (timerRef.current = window.setTimeout(() => clearToast(), TOAST_TIMEOUT)),
-    [clearToast],
-  );
+  const shouldAutoClose = duration !== Infinity;
+  const scheduleTimeout = useCallback(() => {
+    if (!shouldAutoClose) {
+      return;
+    }
+    timerRef.current = window.setTimeout(() => onClose(), duration);
+  }, [onClose, duration, shouldAutoClose]);

  useEffect(() => {
+    if (!shouldAutoClose) {
+      return;
+    }
    scheduleTimeout();
    return () => clearTimeout(timerRef.current);
-  }, [scheduleTimeout, message]);
+  }, [scheduleTimeout, message, duration, shouldAutoClose]);

+  const onMouseEnter = shouldAutoClose
+    ? () => clearTimeout(timerRef?.current)
+    : undefined;
+  const onMouseLeave = shouldAutoClose ? scheduleTimeout : undefined;
  return (
    <div
      className="Toast"
-      onMouseEnter={() => clearTimeout(timerRef?.current)}
-      onMouseLeave={scheduleTimeout}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
    >
      <p className="Toast__message">{message}</p>
+      {closable && (
+        <ToolButton
+          icon={close}
+          aria-label="close"
+          type="icon"
+          onClick={onClose}
+          className="close"
+        />
+      )}
    </div>
  );
 };
--- a/Show more
+++ b/Show more