update changelog & readme

feat: expose app instance on excalidrawAPI
2025-08-27 20:27:12 +02:00 · 2021-10-23 13:53:10 +02:00 · 2021-10-23 13:41:14 +02:00
267 changed files with 9605 additions and 27889 deletions
--- a/.env
+++ b/.env
@@ -0,0 +1,5 @@
+REACT_APP_BACKEND_V1_GET_URL=https://json.excalidraw.com/api/v1/
+REACT_APP_BACKEND_V2_GET_URL=https://json.excalidraw.com/api/v2/
+REACT_APP_BACKEND_V2_POST_URL=https://json.excalidraw.com/api/v2/post/
+REACT_APP_SOCKET_SERVER_URL=https://portal.excalidraw.com
+REACT_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyAd15pYlMci_xIp9ko6wkEsDzAAA0Dn0RU","authDomain":"excalidraw-room-persistence.firebaseapp.com","databaseURL":"https://excalidraw-room-persistence.firebaseio.com","projectId":"excalidraw-room-persistence","storageBucket":"excalidraw-room-persistence.appspot.com","messagingSenderId":"654800341332","appId":"1:654800341332:web:4a692de832b55bd57ce0c1"}'
--- a/.env.development
+++ b/.env.development
@@ -1,12 +0,0 @@
-REACT_APP_BACKEND_V2_GET_URL=https://json-dev.excalidraw.com/api/v2/
-REACT_APP_BACKEND_V2_POST_URL=https://json-dev.excalidraw.com/api/v2/post/
-
-REACT_APP_LIBRARY_URL=https://libraries.excalidraw.com
-REACT_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries
-
-REACT_APP_PORTAL_URL=http://localhost:3002
-# 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":"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8","authDomain":"excalidraw-oss-dev.firebaseapp.com","projectId":"excalidraw-oss-dev","storageBucket":"excalidraw-oss-dev.appspot.com","messagingSenderId":"664559512677","appId":"1:664559512677:web:a385181f2928d328a7aa8c"}'
--- a/.env.production
+++ b/.env.production
@@ -1,15 +1 @@
-REACT_APP_BACKEND_V2_GET_URL=https://json.excalidraw.com/api/v2/
-REACT_APP_BACKEND_V2_POST_URL=https://json.excalidraw.com/api/v2/post/
-
-REACT_APP_LIBRARY_URL=https://libraries.excalidraw.com
-REACT_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries
-
-REACT_APP_PORTAL_URL=https://portal.excalidraw.com
-# Fill to set socket server URL used for collaboration.
-# Meant for forks only: excalidraw.com uses custom REACT_APP_PORTAL_URL flow
-REACT_APP_WS_SERVER_URL=
-
-REACT_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyAd15pYlMci_xIp9ko6wkEsDzAAA0Dn0RU","authDomain":"excalidraw-room-persistence.firebaseapp.com","databaseURL":"https://excalidraw-room-persistence.firebaseio.com","projectId":"excalidraw-room-persistence","storageBucket":"excalidraw-room-persistence.appspot.com","messagingSenderId":"654800341332","appId":"1:654800341332:web:4a692de832b55bd57ce0c1"}'
-
-# production-only vars
 REACT_APP_GOOGLE_ANALYTICS_ID=UA-387204-13
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,7 +1,6 @@
 {
  "extends": ["@excalidraw/eslint-config", "react-app"],
  "rules": {
-    "import/no-anonymous-default-export": "off",
-    "no-restricted-globals": "off"
+    "import/no-anonymous-default-export": "off"
  }
 }
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -10,7 +10,6 @@ updates:
      - lipis
    assignees:
      - lipis
-    open-pull-requests-limit: 20

  - package-ecosystem: npm
    directory: /src/packages/excalidraw/
@@ -22,7 +21,6 @@ updates:
      - ad1992
    assignees:
      - ad1992
-    open-pull-requests-limit: 20

  - package-ecosystem: npm
    directory: /src/packages/utils/
@@ -34,4 +32,3 @@ updates:
      - ad1992
    assignees:
      - ad1992
-    open-pull-requests-limit: 20
--- a/.github/workflows/autorelease-excalidraw.yml
+++ b/.github/workflows/autorelease-excalidraw.yml
@@ -23,5 +23,4 @@ jobs:
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
      - name: Auto release
        run: |
-          yarn add @actions/core
          yarn autorelease
--- a/.github/workflows/autorelease-preview.yml
+++ b/.github/workflows/autorelease-preview.yml
@@ -1,55 +0,0 @@
-name: Auto release preview @excalidraw/excalidraw-preview
-on:
-  issue_comment:
-    types: [created, edited]
-
-jobs:
-  Auto-release-excalidraw-preview:
-    name: Auto release preview
-    if: github.event.comment.body == '@excalibot release package' && github.event.issue.pull_request
-    runs-on: ubuntu-latest
-    steps:
-      - name: React to release comment
-        uses: peter-evans/create-or-update-comment@v1
-        with:
-          token: ${{ secrets.PUSH_TRANSLATIONS_COVERAGE_PAT }}
-          comment-id: ${{ github.event.comment.id }}
-          reactions: "+1"
-      - name: Get PR SHA
-        id: sha
-        uses: actions/github-script@v4
-        with:
-          result-encoding: string
-          script: |
-            const { owner, repo, number } = context.issue;
-            const pr = await github.pulls.get({
-              owner,
-              repo,
-              pull_number: number,
-            });
-            return pr.data.head.sha
-      - uses: actions/checkout@v2
-        with:
-          ref: ${{ steps.sha.outputs.result }}
-          fetch-depth: 2
-      - name: Setup Node.js 14.x
-        uses: actions/setup-node@v2
-        with:
-          node-version: 14.x
-      - name: Set up publish access
-        run: |
-          npm config set //registry.npmjs.org/:_authToken ${NPM_TOKEN}
-        env:
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-      - name: Auto release preview
-        id: "autorelease"
-        run: |
-          yarn add @actions/core
-          yarn autorelease preview ${{ github.event.issue.number }}
-      - name: Post comment post release
-        if: always()
-        uses: peter-evans/create-or-update-comment@v1
-        with:
-          token: ${{ secrets.PUSH_TRANSLATIONS_COVERAGE_PAT }}
-          issue-number: ${{ github.event.issue.number }}
-          body: "@${{ github.event.comment.user.login }} ${{ steps.autorelease.outputs.result }}"
--- a/.github/workflows/build-packages.yml
+++ b/.github/workflows/build-packages.yml
@@ -0,0 +1,29 @@
+name: Build packages
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+
+jobs:
+  packages:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Setup Node.js 14.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: 14.x
+      - name: Install dependencies
+        run: |
+          yarn --frozen-lockfile
+          yarn --cwd src/packages/excalidraw
+          yarn --cwd src/packages/utils
+      - name: Build @excalidraw/excalidraw
+        run: |
+          yarn --cwd src/packages/excalidraw run pack
+      - name: Build @excalidraw/utils
+        run: |
+          yarn --cwd src/packages/utils run pack
--- a/.github/workflows/publish-docker.yml
+++ b/.github/workflows/publish-docker.yml
@@ -11,7 +11,7 @@ jobs:

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

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

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

 ### Shortcuts
@@ -122,10 +118,6 @@ yarn start

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

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

 | Command            | Description                       |
--- a/package.json
+++ b/package.json
@@ -19,28 +19,28 @@
    ]
  },
  "dependencies": {
+    "@dwelle/browser-fs-access": "0.21.3",
    "@sentry/browser": "6.2.5",
    "@sentry/integrations": "6.2.5",
-    "@testing-library/jest-dom": "5.16.2",
-    "@testing-library/react": "12.1.2",
-    "@tldraw/vec": "1.4.3",
-    "@types/jest": "27.4.0",
+    "@testing-library/jest-dom": "5.11.10",
+    "@testing-library/react": "11.2.6",
+    "@tldraw/vec": "0.0.106",
+    "@types/jest": "26.0.22",
    "@types/pica": "5.1.3",
-    "@types/react": "17.0.39",
-    "@types/react-dom": "17.0.11",
+    "@types/react": "17.0.3",
+    "@types/react-dom": "17.0.3",
    "@types/socket.io-client": "1.4.36",
-    "browser-fs-access": "0.24.1",
    "clsx": "1.1.1",
-    "fake-indexeddb": "3.1.7",
+    "fake-indexeddb": "3.1.3",
    "firebase": "8.3.3",
-    "i18next-browser-languagedetector": "6.1.2",
-    "idb-keyval": "6.0.3",
+    "i18next-browser-languagedetector": "6.1.0",
+    "idb-keyval": "5.1.3",
    "image-blob-reduce": "3.0.1",
    "lodash.throttle": "4.1.1",
-    "nanoid": "3.1.32",
-    "open-color": "1.9.1",
+    "nanoid": "3.1.22",
+    "open-color": "1.8.0",
    "pako": "1.0.11",
-    "perfect-freehand": "1.0.16",
+    "perfect-freehand": "1.0.15",
    "png-chunk-text": "1.0.0",
    "png-chunks-encode": "1.0.0",
    "png-chunks-extract": "1.0.0",
@@ -49,39 +49,39 @@
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-scripts": "4.0.3",
-    "roughjs": "4.5.2",
-    "sass": "1.49.7",
+    "roughjs": "4.4.1",
+    "sass": "1.32.10",
    "socket.io-client": "2.3.1",
-    "typescript": "4.5.5"
+    "typescript": "4.2.4"
  },
  "devDependencies": {
    "@excalidraw/eslint-config": "1.0.0",
    "@excalidraw/prettier-config": "1.0.2",
-    "@types/chai": "4.3.0",
    "@types/lodash.throttle": "4.1.6",
-    "@types/pako": "1.0.3",
-    "@types/resize-observer-browser": "0.1.6",
-    "chai": "4.3.6",
-    "dotenv": "10.0.0",
+    "@types/pako": "1.0.1",
+    "@types/resize-observer-browser": "0.1.5",
    "eslint-config-prettier": "8.3.0",
    "eslint-plugin-prettier": "3.3.1",
-    "husky": "7.0.4",
+    "firebase-tools": "9.9.0",
+    "husky": "4.3.8",
    "jest-canvas-mock": "2.3.1",
-    "lint-staged": "12.3.3",
+    "lint-staged": "10.5.4",
    "pepjs": "0.5.3",
-    "prettier": "2.5.1",
+    "prettier": "2.2.1",
    "rewire": "5.0.0"
  },
-  "resolutions": {
-    "@typescript-eslint/typescript-estree": "5.10.2"
-  },
  "engines": {
    "node": ">=14.0.0"
  },
  "homepage": ".",
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
  "jest": {
    "transformIgnorePatterns": [
-      "node_modules/(?!(roughjs|points-on-curve|path-data-parser|points-on-path|browser-fs-access)/)"
+      "node_modules/(?!(roughjs|points-on-curve|path-data-parser|points-on-path|@dwelle/browser-fs-access)/)"
    ],
    "resetMocks": false
  },
@@ -100,7 +100,6 @@
    "fix": "yarn fix:other && yarn fix:code",
    "locales-coverage": "node scripts/build-locales-coverage.js",
    "locales-coverage:description": "node scripts/locales-coverage-description.js",
-    "prepare": "husky install",
    "prettier": "prettier \"**/*.{css,scss,json,md,html,yml}\" --ignore-path=.eslintignore",
    "start": "react-scripts start",
    "test:all": "yarn test:typecheck && yarn test:code && yarn test:other && yarn test:app --watchAll=false",
--- a/public/index.html
+++ b/public/index.html
@@ -13,6 +13,18 @@

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

+    <!-- Declarative Link Capturing (https://web.dev/declarative-link-capturing/) -->
+    <meta
+      http-equiv="origin-trial"
+      content="Ak3VyzTheARtX2CnxBZ3ZKxImB0mNyvDakmMxeAChgxrWFMZ3IGN64VP+uj36VxM5OegsbLmrP258b1xvqp7+Q8AAABbeyJvcmlnaW4iOiJodHRwczovL2V4Y2FsaWRyYXcuY29tOjQ0MyIsImZlYXR1cmUiOiJXZWJBcHBMaW5rQ2FwdHVyaW5nIiwiZXhwaXJ5IjoxNjM0MDgzMTk5fQ=="
+    />
+
+    <!-- File Handling (https://web.dev/file-handling/) -->
+    <meta
+      http-equiv="origin-trial"
+      content="AkMQsAnFmKfRfPKQHNCv2WmZREqgwkqhyt2M7aOwQiCStB+hPYnGnv+mNbkPDAsGXrwsj/waFi76wPzTDUaEeQ0AAABUeyJvcmlnaW4iOiJodHRwczovL2V4Y2FsaWRyYXcuY29tOjQ0MyIsImZlYXR1cmUiOiJGaWxlSGFuZGxpbmciLCJleHBpcnkiOjE2MzQwODMxOTl9"
+    />
+
    <!-- General tags -->
    <meta
      name="description"
@@ -72,6 +84,12 @@
      crossorigin="anonymous"
    />

+    <link
+      href="%REACT_APP_SOCKET_SERVER_URL%/socket.io"
+      rel="preconnect"
+      crossorigin="anonymous"
+    />
+
    <link
      rel="manifest"
      href="manifest.json"
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -26,6 +26,7 @@
      }
    }
  ],
+  "capture_links": "new-client",
  "share_target": {
    "action": "/web-share-target",
    "method": "POST",
--- a/scripts/autorelease.js
+++ b/scripts/autorelease.js
@@ -1,6 +1,5 @@
 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`;
@@ -16,25 +15,18 @@ const publish = () => {
    execSync(`yarn --frozen-lockfile`, { cwd: excalidrawDir });
    execSync(`yarn run build:umd`, { cwd: excalidrawDir });
    execSync(`yarn --cwd ${excalidrawDir} publish`);
-    console.info("Published 🎉");
-    core.setOutput(
-      "result",
-      `**Preview version has been shipped** :rocket:
-    You can use [@excalidraw/excalidraw-preview@${pkg.version}](https://www.npmjs.com/package/@excalidraw/excalidraw-preview/v/${pkg.version}) for testing!`,
-    );
-  } catch (error) {
-    core.setOutput("result", "package couldn't be published :warning:!");
-    console.error(error);
-    process.exit(1);
+  } catch (e) {
+    console.error(e);
  }
 };
+
 // get files changed between prev and head commit
 exec(`git diff --name-only HEAD^ HEAD`, async (error, stdout, stderr) => {
  if (error || stderr) {
    console.error(error);
-    core.setOutput("result", ":warning: Package couldn't be published!");
    process.exit(1);
  }
+
  const changedFiles = stdout.trim().split("\n");
  const filesToIgnoreRegex = /src\/excalidraw-app|packages\/utils/;

@@ -45,33 +37,16 @@ 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";
-  let version = `${pkg.version}-${getShortCommitHash()}`;
-
-  // update readme
-  let data = fs.readFileSync(`${excalidrawDir}/README_NEXT.md`, "utf8");
-
-  const isPreview = process.argv.slice(2)[0] === "preview";
-  if (isPreview) {
-    // use pullNumber-commithash as the version for preview
-    const pullRequestNumber = process.argv.slice(3)[0];
-    version = `${pkg.version}-${pullRequestNumber}-${getShortCommitHash()}`;
-    // replace "excalidraw-next" with "excalidraw-preview"
-    pkg.name = "@excalidraw/excalidraw-preview";
-    data = data.replace(/excalidraw-next/g, "excalidraw-preview");
-    data = data.trim();
-  }
-  pkg.version = version;
-
  fs.writeFileSync(excalidrawPackage, JSON.stringify(pkg, null, 2), "utf8");

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

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

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

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

 writeFileSync(
--- a/scripts/locales-coverage-description.js
+++ b/scripts/locales-coverage-description.js
@@ -5,13 +5,10 @@ const THRESSHOLD = 85;
 const crowdinMap = {
  "ar-SA": "en-ar",
  "bg-BG": "en-bg",
-  "bn-BD": "en-bn",
  "ca-ES": "en-ca",
-  "da-DK": "en-da",
  "de-DE": "en-de",
  "el-GR": "en-el",
  "es-ES": "en-es",
-  "eu-ES": "en-eu",
  "fa-IR": "en-fa",
  "fi-FI": "en-fi",
  "fr-FR": "en-fr",
@@ -34,16 +31,12 @@ const crowdinMap = {
  "pt-PT": "en-pt",
  "ro-RO": "en-ro",
  "ru-RU": "en-ru",
-  "si-LK": "en-silk",
  "sk-SK": "en-sk",
  "sv-SE": "en-sv",
-  "ta-IN": "en-ta",
  "tr-TR": "en-tr",
  "uk-UA": "en-uk",
  "zh-CN": "en-zhcn",
-  "zh-HK": "en-zhhk",
  "zh-TW": "en-zhtw",
-  "lt-LT": "en-lt",
  "lv-LV": "en-lv",
  "cs-CZ": "en-cs",
  "kk-KZ": "en-kk",
@@ -52,10 +45,7 @@ const crowdinMap = {
 const flags = {
  "ar-SA": "🇸🇦",
  "bg-BG": "🇧🇬",
-  "bn-BD": "🇧🇩",
  "ca-ES": "🏳",
-  "cs-CZ": "🇨🇿",
-  "da-DK": "🇩🇰",
  "de-DE": "🇩🇪",
  "el-GR": "🇬🇷",
  "es-ES": "🇪🇸",
@@ -69,10 +59,7 @@ const flags = {
  "it-IT": "🇮🇹",
  "ja-JP": "🇯🇵",
  "kab-KAB": "🏳",
-  "kk-KZ": "🇰🇿",
  "ko-KR": "🇰🇷",
-  "lt-LT": "🇱🇹",
-  "lv-LV": "🇱🇻",
  "my-MM": "🇲🇲",
  "nb-NO": "🇳🇴",
  "nl-NL": "🇳🇱",
@@ -84,28 +71,24 @@ const flags = {
  "pt-PT": "🇵🇹",
  "ro-RO": "🇷🇴",
  "ru-RU": "🇷🇺",
-  "si-LK": "🇱🇰",
  "sk-SK": "🇸🇰",
  "sv-SE": "🇸🇪",
-  "ta-IN": "🇮🇳",
  "tr-TR": "🇹🇷",
  "uk-UA": "🇺🇦",
  "zh-CN": "🇨🇳",
-  "zh-HK": "🇭🇰",
  "zh-TW": "🇹🇼",
+  "lv-LV": "🇱🇻",
+  "cs-CZ": "🇨🇿",
+  "kk-KZ": "🇰🇿",
 };

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

 const percentages = fs.readFileSync(
--- a/scripts/release.js
+++ b/scripts/release.js
@@ -25,8 +25,8 @@ const release = async (nextVersion) => {
    );
    /* eslint-disable no-console */
    console.log("Done!");
-  } catch (error) {
-    console.error(error);
+  } catch (e) {
+    console.error(e);
    process.exit(1);
  }
 };
--- a/scripts/updateChangelog.js
+++ b/scripts/updateChangelog.js
@@ -20,7 +20,7 @@ const headerForType = {
  perf: "Performance",
  build: "Build",
 };
-const badCommits = [];
+
 const getCommitHashForLastVersion = async () => {
  try {
    const commitMessage = `"release @excalidraw/excalidraw@${lastVersion}"`;
@@ -28,8 +28,8 @@ const getCommitHashForLastVersion = async () => {
      `git log --format=format:"%H" --grep=${commitMessage}`,
    );
    return stdout;
-  } catch (error) {
-    console.error(error);
+  } catch (e) {
+    console.error(e);
  }
 };

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

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

--- a/src/actions/actionAddToLibrary.ts
+++ b/src/actions/actionAddToLibrary.ts
@@ -2,8 +2,6 @@ import { register } from "./register";
 import { getSelectedElements } from "../scene";
 import { getNonDeletedElements } from "../element";
 import { deepCopyElement } from "../element/newElement";
-import { randomId } from "../random";
-import { t } from "../i18n";

 export const actionAddToLibrary = register({
  name: "addToLibrary",
@@ -11,49 +9,15 @@ export const actionAddToLibrary = register({
    const selectedElements = getSelectedElements(
      getNonDeletedElements(elements),
      appState,
-      true,
    );
-    if (selectedElements.some((element) => element.type === "image")) {
-      return {
-        commitToHistory: false,
-        appState: {
-          ...appState,
-          errorMessage: "Support for adding images to the library coming soon!",
-        },
-      };
-    }

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

 const enableActionGroup = (
@@ -34,11 +34,9 @@ const alignSelectedElements = (

  const updatedElements = alignElements(selectedElements, alignment);

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

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

 export const actionAlignTop = register({
--- a/src/actions/actionCanvas.tsx
+++ b/src/actions/actionCanvas.tsx
@@ -1,5 +1,5 @@
 import { ColorPicker } from "../components/ColorPicker";
-import { eraser, zoomIn, zoomOut } from "../components/icons";
+import { zoomIn, zoomOut } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
 import { DarkModeToggle } from "../components/DarkModeToggle";
 import { THEME, ZOOM_STEP } from "../constants";
@@ -9,15 +9,14 @@ import { t } from "../i18n";
 import { CODES, KEYS } from "../keys";
 import { getNormalizedZoom, getSelectedElements } from "../scene";
 import { centerScrollOn } from "../scene/scroll";
-import { getStateForZoom } from "../scene/zoom";
+import { getNewZoom } from "../scene/zoom";
 import { AppState, NormalizedZoomValue } from "../types";
 import { getShortcutKey } from "../utils";
 import { register } from "./register";
 import { Tooltip } from "../components/Tooltip";
 import { newElementWith } from "../element/mutateElement";
-import { getDefaultAppState, isEraserActive } from "../appState";
+import { getDefaultAppState } from "../appState";
 import ClearCanvas from "../components/ClearCanvas";
-import clsx from "clsx";

 export const actionChangeViewBackgroundColor = register({
  name: "changeViewBackgroundColor",
@@ -27,7 +26,7 @@ export const actionChangeViewBackgroundColor = register({
      commitToHistory: !!value.viewBackgroundColor,
    };
  },
-  PanelComponent: ({ elements, appState, updateData }) => {
+  PanelComponent: ({ appState, updateData }) => {
    return (
      <div style={{ position: "relative" }}>
        <ColorPicker
@@ -40,8 +39,6 @@ export const actionChangeViewBackgroundColor = register({
            updateData({ openPopup: active ? "canvasColorPicker" : null })
          }
          data-testid="canvas-background-picker"
-          elements={elements}
-          appState={appState}
        />
      </div>
    );
@@ -61,15 +58,11 @@ export const actionClearCanvas = register({
        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,
-        elementType:
-          appState.elementType === "image" ? "selection" : appState.elementType,
      },
      commitToHistory: true,
    };
@@ -80,18 +73,17 @@ export const actionClearCanvas = register({

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

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

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

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

  const [x1, y1, x2, y2] = commonBounds;
  const centerX = (x1 + x2) / 2;
@@ -290,31 +285,3 @@ export const actionToggleTheme = register({
  ),
  keyTest: (event) => event.altKey && event.shiftKey && event.code === CODES.D,
 });
-
-export const actionErase = register({
-  name: "eraser",
-  perform: (elements, appState) => {
-    return {
-      appState: {
-        ...appState,
-        selectedElementIds: {},
-        selectedGroupIds: {},
-        elementType: isEraserActive(appState) ? "selection" : "eraser",
-      },
-      commitToHistory: true,
-    };
-  },
-  PanelComponent: ({ elements, appState, updateData, data }) => (
-    <ToolButton
-      type="button"
-      icon={eraser}
-      className={clsx("eraser", { active: isEraserActive(appState) })}
-      title={t("toolBar.eraser")}
-      aria-label={t("toolBar.eraser")}
-      onClick={() => {
-        updateData(null);
-      }}
-      size={data?.size || "medium"}
-    ></ToolButton>
-  ),
-});
--- a/src/actions/actionClipboard.tsx
+++ b/src/actions/actionClipboard.tsx
@@ -25,7 +25,7 @@ export const actionCut = register({
  name: "cut",
  perform: (elements, appState, data, app) => {
    actionCopy.perform(elements, appState, data, app);
-    return actionDeleteSelected.perform(elements, appState);
+    return actionDeleteSelected.perform(elements, appState, data, app);
  },
  contextItemLabel: "labels.cut",
  keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.code === CODES.X,
@@ -42,7 +42,6 @@ export const actionCopyAsSvg = register({
    const selectedElements = getSelectedElements(
      getNonDeletedElements(elements),
      appState,
-      true,
    );
    try {
      await exportCanvas(
@@ -57,7 +56,7 @@ export const actionCopyAsSvg = register({
      return {
        commitToHistory: false,
      };
-    } catch (error: any) {
+    } catch (error) {
      console.error(error);
      return {
        appState: {
@@ -82,7 +81,6 @@ export const actionCopyAsPng = register({
    const selectedElements = getSelectedElements(
      getNonDeletedElements(elements),
      appState,
-      true,
    );
    try {
      await exportCanvas(
@@ -108,7 +106,7 @@ export const actionCopyAsPng = register({
        },
        commitToHistory: false,
      };
-    } catch (error: any) {
+    } catch (error) {
      console.error(error);
      return {
        appState: {
--- a/src/actions/actionDeleteSelected.tsx
+++ b/src/actions/actionDeleteSelected.tsx
@@ -11,7 +11,6 @@ import { newElementWith } from "../element/mutateElement";
 import { getElementsInGroup } from "../groups";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { fixBindingsAfterDeletion } from "../element/binding";
-import { isBoundToContainer } from "../element/typeChecks";

 const deleteSelectedElements = (
  elements: readonly ExcalidrawElement[],
@@ -22,12 +21,6 @@ const deleteSelectedElements = (
      if (appState.selectedElementIds[el.id]) {
        return newElementWith(el, { isDeleted: true });
      }
-      if (
-        isBoundToContainer(el) &&
-        appState.selectedElementIds[el.containerId]
-      ) {
-        return newElementWith(el, { isDeleted: true });
-      }
      return el;
    }),
    appState: {
@@ -62,7 +55,7 @@ export const actionDeleteSelected = register({
    if (appState.editingLinearElement) {
      const {
        elementId,
-        selectedPointsIndices,
+        activePointIndex,
        startBindingElement,
        endBindingElement,
      } = appState.editingLinearElement;
@@ -72,7 +65,8 @@ export const actionDeleteSelected = register({
      }
      if (
        // case: no point selected → delete whole element
-        selectedPointsIndices == null ||
+        activePointIndex == null ||
+        activePointIndex === -1 ||
        // case: deleting last remaining point
        element.points.length < 2
      ) {
@@ -92,17 +86,15 @@ export const actionDeleteSelected = register({
      // We cannot do this inside `movePoint` because it is also called
      // when deleting the uncommitted point (which hasn't caused any binding)
      const binding = {
-        startBindingElement: selectedPointsIndices?.includes(0)
-          ? null
-          : startBindingElement,
-        endBindingElement: selectedPointsIndices?.includes(
-          element.points.length - 1,
-        )
-          ? null
-          : endBindingElement,
+        startBindingElement:
+          activePointIndex === 0 ? null : startBindingElement,
+        endBindingElement:
+          activePointIndex === element.points.length - 1
+            ? null
+            : endBindingElement,
      };

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

      return {
        elements,
@@ -111,17 +103,17 @@ export const actionDeleteSelected = register({
          editingLinearElement: {
            ...appState.editingLinearElement,
            ...binding,
-            selectedPointsIndices:
-              selectedPointsIndices?.[0] > 0
-                ? [selectedPointsIndices[0] - 1]
-                : [0],
+            activePointIndex: activePointIndex > 0 ? activePointIndex - 1 : 0,
          },
        },
        commitToHistory: true,
      };
    }
-    let { elements: nextElements, appState: nextAppState } =
-      deleteSelectedElements(elements, appState);
+
+    let {
+      elements: nextElements,
+      appState: nextAppState,
+    } = deleteSelectedElements(elements, appState);
    fixBindingsAfterDeletion(
      nextElements,
      elements.filter(({ id }) => appState.selectedElementIds[id]),
--- a/src/actions/actionDistribute.tsx
+++ b/src/actions/actionDistribute.tsx
@@ -4,13 +4,13 @@ import {
 } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
 import { distributeElements, Distribution } from "../disitrubte";
-import { getNonDeletedElements } from "../element";
+import { getElementMap, getNonDeletedElements } from "../element";
 import { ExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
-import { CODES, KEYS } from "../keys";
+import { CODES } from "../keys";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { AppState } from "../types";
-import { arrayToMap, getShortcutKey } from "../utils";
+import { getShortcutKey } from "../utils";
 import { register } from "./register";

 const enableActionGroup = (
@@ -30,11 +30,9 @@ const distributeSelectedElements = (

  const updatedElements = distributeElements(selectedElements, distribution);

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

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

 export const distributeHorizontally = register({
@@ -49,8 +47,7 @@ export const distributeHorizontally = register({
      commitToHistory: true,
    };
  },
-  keyTest: (event) =>
-    !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.H,
+  keyTest: (event) => event.altKey && event.code === CODES.H,
  PanelComponent: ({ elements, appState, updateData }) => (
    <ToolButton
      hidden={!enableActionGroup(elements, appState)}
@@ -78,8 +75,7 @@ export const distributeVertically = register({
      commitToHistory: true,
    };
  },
-  keyTest: (event) =>
-    !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.V,
+  keyTest: (event) => event.altKey && event.code === CODES.V,
  PanelComponent: ({ elements, appState, updateData }) => (
    <ToolButton
      hidden={!enableActionGroup(elements, appState)}
--- a/src/actions/actionDuplicateSelection.tsx
+++ b/src/actions/actionDuplicateSelection.tsx
@@ -2,12 +2,13 @@ import { KEYS } from "../keys";
 import { register } from "./register";
 import { ExcalidrawElement } from "../element/types";
 import { duplicateElement, getNonDeletedElements } from "../element";
-import { getSelectedElements, isSomeElementSelected } from "../scene";
+import { isSomeElementSelected } from "../scene";
 import { ToolButton } from "../components/ToolButton";
 import { clone } from "../components/icons";
 import { t } from "../i18n";
-import { arrayToMap, getShortcutKey } from "../utils";
+import { getShortcutKey } from "../utils";
 import { LinearElementEditor } from "../element/linearElementEditor";
+import { mutateElement } from "../element/mutateElement";
 import {
  selectGroupsForSelectedElements,
  getSelectedGroupForElement,
@@ -17,23 +18,41 @@ import { AppState } from "../types";
 import { fixBindingsAfterDuplication } from "../element/binding";
 import { ActionResult } from "./types";
 import { GRID_SIZE } from "../constants";
-import { bindTextToShapeAfterDuplication } from "../element/textElement";
-import { isBoundToContainer } from "../element/typeChecks";

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

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

  return {
@@ -128,9 +140,7 @@ const duplicateElements = (
        ...appState,
        selectedGroupIds: {},
        selectedElementIds: newElements.reduce((acc, element) => {
-          if (!isBoundToContainer(element)) {
-            acc[element.id] = true;
-          }
+          acc[element.id] = true;
          return acc;
        }, {} as any),
      },
--- a/src/actions/actionExport.tsx
+++ b/src/actions/actionExport.tsx
@@ -151,11 +151,9 @@ export const actionSaveToActiveFile = register({
            : null,
        },
      };
-    } catch (error: any) {
+    } catch (error) {
      if (error?.name !== "AbortError") {
        console.error(error);
-      } else {
-        console.warn(error);
      }
      return { commitToHistory: false };
    }
@@ -183,11 +181,9 @@ export const actionSaveFileToDisk = register({
        app.files,
      );
      return { commitToHistory: false, appState: { ...appState, fileHandle } };
-    } catch (error: any) {
+    } catch (error) {
      if (error?.name !== "AbortError") {
        console.error(error);
-      } else {
-        console.warn(error);
      }
      return { commitToHistory: false };
    }
@@ -223,9 +219,8 @@ export const actionLoadScene = register({
        files,
        commitToHistory: true,
      };
-    } catch (error: any) {
+    } catch (error) {
      if (error?.name === "AbortError") {
-        console.warn(error);
        return false;
      }
      return {
--- a/src/actions/actionFinalize.tsx
+++ b/src/actions/actionFinalize.tsx
@@ -19,8 +19,11 @@ export const actionFinalize = register({
  name: "finalize",
  perform: (elements, appState, _, { canvas, focusContainer }) => {
    if (appState.editingLinearElement) {
-      const { elementId, startBindingElement, endBindingElement } =
-        appState.editingLinearElement;
+      const {
+        elementId,
+        startBindingElement,
+        endBindingElement,
+      } = appState.editingLinearElement;
      const element = LinearElementEditor.getElement(elementId);

      if (element) {
--- a/src/actions/actionFlip.ts
+++ b/src/actions/actionFlip.ts
@@ -1,6 +1,6 @@
 import { register } from "./register";
 import { getSelectedElements } from "../scene";
-import { getNonDeletedElements } from "../element";
+import { getElementMap, getNonDeletedElements } from "../element";
 import { mutateElement } from "../element/mutateElement";
 import { ExcalidrawElement, NonDeleted } from "../element/types";
 import { normalizeAngle, resizeSingleElement } from "../element/resizeElements";
@@ -9,7 +9,6 @@ import { getTransformHandles } from "../element/transformHandles";
 import { isFreeDrawElement, isLinearElement } from "../element/typeChecks";
 import { updateBoundElements } from "../element/binding";
 import { LinearElementEditor } from "../element/linearElementEditor";
-import { arrayToMap } from "../utils";

 const enableActionFlipHorizontal = (
  elements: readonly ExcalidrawElement[],
@@ -84,11 +83,9 @@ const flipSelectedElements = (
    flipDirection,
  );

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

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

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

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

 const allElementsInSameGroup = (elements: readonly ExcalidrawElement[]) => {
  if (elements.length >= 2) {
@@ -45,7 +44,6 @@ const enableActionGroup = (
  const selectedElements = getSelectedElements(
    getNonDeletedElements(elements),
    appState,
-    true,
  );
  return (
    selectedElements.length >= 2 && !allElementsInSameGroup(selectedElements)
@@ -58,7 +56,6 @@ export const actionGroup = register({
    const selectedElements = getSelectedElements(
      getNonDeletedElements(elements),
      appState,
-      true,
    );
    if (selectedElements.length < 2) {
      // nothing to group
@@ -86,9 +83,8 @@ export const actionGroup = register({
      }
    }
    const newGroupId = randomId();
-    const selectElementIds = arrayToMap(selectedElements);
    const updatedElements = elements.map((element) => {
-      if (!selectElementIds.get(element.id)) {
+      if (!appState.selectedElementIds[element.id]) {
        return element;
      }
      return newElementWith(element, {
@@ -103,8 +99,9 @@ export const actionGroup = register({
    // to the z order of the highest element in the layer stack
    const elementsInGroup = getElementsInGroup(updatedElements, newGroupId);
    const lastElementInGroup = elementsInGroup[elementsInGroup.length - 1];
-    const lastGroupElementIndex =
-      updatedElements.lastIndexOf(lastElementInGroup);
+    const lastGroupElementIndex = updatedElements.lastIndexOf(
+      lastElementInGroup,
+    );
    const elementsAfterGroup = updatedElements.slice(lastGroupElementIndex + 1);
    const elementsBeforeGroup = updatedElements
      .slice(0, lastGroupElementIndex)
@@ -152,12 +149,7 @@ export const actionUngroup = register({
    if (groupIds.length === 0) {
      return { appState, elements, commitToHistory: false };
    }
-
-    const boundTextElementIds: ExcalidrawTextElement["id"][] = [];
    const nextElements = elements.map((element) => {
-      if (isBoundToContainer(element)) {
-        boundTextElementIds.push(element.id);
-      }
      const nextGroupIds = removeFromSelectedGroups(
        element.groupIds,
        appState.selectedGroupIds,
@@ -169,19 +161,11 @@ export const actionUngroup = register({
        groupIds: nextGroupIds,
      });
    });
-
-    const updateAppState = selectGroupsForSelectedElements(
-      { ...appState, selectedGroupIds: {} },
-      getNonDeletedElements(nextElements),
-    );
-
-    // remove binded text elements from selection
-    boundTextElementIds.forEach(
-      (id) => (updateAppState.selectedElementIds[id] = false),
-    );
    return {
-      appState: updateAppState,
-
+      appState: selectGroupsForSelectedElements(
+        { ...appState, selectedGroupIds: {} },
+        getNonDeletedElements(nextElements),
+      ),
      elements: nextElements,
      commitToHistory: true,
    };
--- a/src/actions/actionHistory.tsx
+++ b/src/actions/actionHistory.tsx
@@ -6,9 +6,9 @@ import History, { HistoryEntry } from "../history";
 import { ExcalidrawElement } from "../element/types";
 import { AppState } from "../types";
 import { isWindows, KEYS } from "../keys";
+import { getElementMap } from "../element";
 import { newElementWith } from "../element/mutateElement";
 import { fixBindingsAfterDeletion } from "../element/binding";
-import { arrayToMap } from "../utils";

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

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

    const deletedElements = prevElements.filter(
-      (prevElement) => !nextElementMap.has(prevElement.id),
+      (prevElement) => !nextElementMap.hasOwnProperty(prevElement.id),
    );
    const elements = nextElements
      .map((nextElement) =>
        newElementWith(
-          prevElementMap.get(nextElement.id) || nextElement,
+          prevElementMap[nextElement.id] || nextElement,
          nextElement,
        ),
      )
--- a/src/actions/actionProperties.tsx
+++ b/src/actions/actionProperties.tsx
@@ -6,7 +6,6 @@ import {
  ArrowheadArrowIcon,
  ArrowheadBarIcon,
  ArrowheadDotIcon,
-  ArrowheadTriangleIcon,
  ArrowheadNoneIcon,
  EdgeRoundIcon,
  EdgeSharpIcon,
@@ -30,32 +29,19 @@ import {
  TextAlignCenterIcon,
  TextAlignLeftIcon,
  TextAlignRightIcon,
-  TextAlignTopIcon,
-  TextAlignBottomIcon,
-  TextAlignMiddleIcon,
 } from "../components/icons";
 import {
  DEFAULT_FONT_FAMILY,
  DEFAULT_FONT_SIZE,
  FONT_FAMILY,
-  VERTICAL_ALIGN,
 } from "../constants";
 import {
  getNonDeletedElements,
  isTextElement,
  redrawTextBoundingBox,
 } from "../element";
-import { mutateElement, newElementWith } from "../element/mutateElement";
-import {
-  getBoundTextElement,
-  getContainerElement,
-} from "../element/textElement";
-import {
-  hasBoundTextElement,
-  isBoundToContainer,
-  isLinearElement,
-  isLinearElementType,
-} from "../element/typeChecks";
+import { newElementWith } from "../element/mutateElement";
+import { isLinearElement, isLinearElementType } from "../element/typeChecks";
 import {
  Arrowhead,
  ExcalidrawElement,
@@ -63,37 +49,27 @@ import {
  ExcalidrawTextElement,
  FontFamilyValues,
  TextAlign,
-  VerticalAlign,
 } from "../element/types";
 import { getLanguage, t } from "../i18n";
-import { KEYS } from "../keys";
 import { randomInteger } from "../random";
 import {
  canChangeSharpness,
  canHaveArrowheads,
  getCommonAttributeOfSelectedElements,
-  getSelectedElements,
  getTargetElements,
  isSomeElementSelected,
 } from "../scene";
 import { hasStrokeColor } from "../scene/comparisons";
-import { arrayToMap } from "../utils";
 import { register } from "./register";

-const FONT_SIZE_RELATIVE_INCREASE_STEP = 0.1;
-
 const changeProperty = (
  elements: readonly ExcalidrawElement[],
  appState: AppState,
  callback: (element: ExcalidrawElement) => ExcalidrawElement,
-  includeBoundText = false,
 ) => {
-  const selectedElementIds = arrayToMap(
-    getSelectedElements(elements, appState, includeBoundText),
-  );
  return elements.map((element) => {
    if (
-      selectedElementIds.get(element.id) ||
+      appState.selectedElementIds[element.id] ||
      element.id === appState.editingElement?.id
    ) {
      return callback(element);
@@ -107,7 +83,6 @@ const getFormValue = function <T>(
  appState: AppState,
  getAttribute: (element: ExcalidrawElement) => T,
  defaultValue?: T,
-  onlyBoundTextElements: boolean = false,
 ): T | null {
  const editingElement = appState.editingElement;
  const nonDeletedElements = getNonDeletedElements(elements);
@@ -118,170 +93,24 @@ const getFormValue = function <T>(
          nonDeletedElements,
          appState,
          getAttribute,
-          onlyBoundTextElements,
        )
      : defaultValue) ??
    null
  );
 };

-const offsetElementAfterFontResize = (
-  prevElement: ExcalidrawTextElement,
-  nextElement: ExcalidrawTextElement,
-) => {
-  if (isBoundToContainer(nextElement)) {
-    return nextElement;
-  }
-  return mutateElement(
-    nextElement,
-    {
-      x:
-        prevElement.textAlign === "left"
-          ? prevElement.x
-          : prevElement.x +
-            (prevElement.width - nextElement.width) /
-              (prevElement.textAlign === "center" ? 2 : 1),
-      // centering vertically is non-standard, but for Excalidraw I think
-      // it makes sense
-      y: prevElement.y + (prevElement.height - nextElement.height) / 2,
-    },
-    false,
-  );
-};
-
-const changeFontSize = (
-  elements: readonly ExcalidrawElement[],
-  appState: AppState,
-  getNewFontSize: (element: ExcalidrawTextElement) => number,
-  fallbackValue?: ExcalidrawTextElement["fontSize"],
-) => {
-  const newFontSizes = new Set<number>();
-
-  return {
-    elements: changeProperty(
-      elements,
-      appState,
-      (oldElement) => {
-        if (isTextElement(oldElement)) {
-          const newFontSize = getNewFontSize(oldElement);
-          newFontSizes.add(newFontSize);
-
-          let newElement: ExcalidrawTextElement = newElementWith(oldElement, {
-            fontSize: newFontSize,
-          });
-          redrawTextBoundingBox(
-            newElement,
-            getContainerElement(oldElement),
-            appState,
-          );
-
-          newElement = offsetElementAfterFontResize(oldElement, newElement);
-
-          return newElement;
-        }
-
-        return oldElement;
-      },
-      true,
-    ),
-    appState: {
-      ...appState,
-      // update state only if we've set all select text elements to
-      // the same font size
-      currentItemFontSize:
-        newFontSizes.size === 1
-          ? [...newFontSizes][0]
-          : fallbackValue ?? appState.currentItemFontSize,
-    },
-    commitToHistory: true,
-  };
-};
-
-// -----------------------------------------------------------------------------
-
-export const actionChangeFontColor = register({
-  name: "changeFontColor",
-  perform: (elements, appState, value) => {
-    return {
-      ...(value.currentItemStrokeColor && {
-        elements: changeProperty(
-          elements,
-          appState,
-          (el) => {
-            return isTextElement(el)
-              ? newElementWith(el, {
-                  strokeColor: value.currentItemStrokeColor,
-                })
-              : el;
-          },
-          true,
-        ),
-      }),
-      appState: {
-        ...appState,
-        ...value,
-      },
-      commitToHistory: !!value.currentItemStrokeColor,
-    };
-  },
-  PanelComponent: ({ elements, appState, updateData }) => {
-    return (
-      <>
-        <h3 aria-hidden="true">{t("labels.fontColor")}</h3>
-        <ColorPicker
-          type="elementFontColor"
-          label={t("labels.fontColor")}
-          color={getFormValue(
-            elements,
-            appState,
-            (element) => element.strokeColor,
-            appState.currentItemStrokeColor,
-            true,
-          )}
-          onChange={(color) => updateData({ currentItemStrokeColor: color })}
-          isActive={appState.openPopup === "fontColorPicker"}
-          setActive={(active) =>
-            updateData({ openPopup: active ? "fontColorPicker" : null })
-          }
-          elements={elements}
-          appState={appState}
-        />
-      </>
-    );
-  },
-});
-
 export const actionChangeStrokeColor = register({
  name: "changeStrokeColor",
  perform: (elements, appState, value) => {
-    const targetElements = getTargetElements(
-      getNonDeletedElements(elements),
-      appState,
-    );
-
-    const hasOnlyContainersWithBoundText =
-      targetElements.length > 1 &&
-      targetElements.every(
-        (element) =>
-          hasBoundTextElement(element) || isBoundToContainer(element),
-      );
-
    return {
      ...(value.currentItemStrokeColor && {
-        elements: changeProperty(
-          elements,
-          appState,
-          (el) => {
-            return (hasStrokeColor(el.type) &&
-              !hasOnlyContainersWithBoundText) ||
-              !isBoundToContainer(el)
-              ? newElementWith(el, {
-                  strokeColor: value.currentItemStrokeColor,
-                })
-              : el;
-          },
-          true,
-        ),
+        elements: changeProperty(elements, appState, (el) => {
+          return hasStrokeColor(el.type)
+            ? newElementWith(el, {
+                strokeColor: value.currentItemStrokeColor,
+              })
+            : el;
+        }),
      }),
      appState: {
        ...appState,
@@ -290,41 +119,26 @@ export const actionChangeStrokeColor = register({
      commitToHistory: !!value.currentItemStrokeColor,
    };
  },
-  PanelComponent: ({ elements, appState, updateData }) => {
-    const targetElements = getTargetElements(
-      getNonDeletedElements(elements),
-      appState,
-    );
-
-    const hasOnlyContainersWithBoundText = targetElements.every(
-      (element) => hasBoundTextElement(element) || isBoundToContainer(element),
-    );
-
-    return (
-      <>
-        <h3 aria-hidden="true">{t("labels.stroke")}</h3>
-        <ColorPicker
-          type="elementStroke"
-          label={t("labels.stroke")}
-          color={getFormValue(
-            hasOnlyContainersWithBoundText
-              ? elements.filter((element) => !isTextElement(element))
-              : elements,
-            appState,
-            (element) => element.strokeColor,
-            appState.currentItemStrokeColor,
-          )}
-          onChange={(color) => updateData({ currentItemStrokeColor: color })}
-          isActive={appState.openPopup === "strokeColorPicker"}
-          setActive={(active) =>
-            updateData({ openPopup: active ? "strokeColorPicker" : null })
-          }
-          elements={elements}
-          appState={appState}
-        />
-      </>
-    );
-  },
+  PanelComponent: ({ elements, appState, updateData }) => (
+    <>
+      <h3 aria-hidden="true">{t("labels.stroke")}</h3>
+      <ColorPicker
+        type="elementStroke"
+        label={t("labels.stroke")}
+        color={getFormValue(
+          elements,
+          appState,
+          (element) => element.strokeColor,
+          appState.currentItemStrokeColor,
+        )}
+        onChange={(color) => updateData({ currentItemStrokeColor: color })}
+        isActive={appState.openPopup === "strokeColorPicker"}
+        setActive={(active) =>
+          updateData({ openPopup: active ? "strokeColorPicker" : null })
+        }
+      />
+    </>
+  ),
 });

 export const actionChangeBackgroundColor = register({
@@ -362,8 +176,6 @@ export const actionChangeBackgroundColor = register({
        setActive={(active) =>
          updateData({ openPopup: active ? "backgroundColorPicker" : null })
        }
-        elements={elements}
-        appState={appState}
      />
    </>
  ),
@@ -612,7 +424,24 @@ export const actionChangeOpacity = register({
 export const actionChangeFontSize = register({
  name: "changeFontSize",
  perform: (elements, appState, value) => {
-    return changeFontSize(elements, appState, () => value, value);
+    return {
+      elements: changeProperty(elements, appState, (el) => {
+        if (isTextElement(el)) {
+          const element: ExcalidrawTextElement = newElementWith(el, {
+            fontSize: value,
+          });
+          redrawTextBoundingBox(element);
+          return element;
+        }
+
+        return el;
+      }),
+      appState: {
+        ...appState,
+        currentItemFontSize: value,
+      },
+      commitToHistory: true,
+    };
  },
  PanelComponent: ({ elements, appState, updateData }) => (
    <fieldset>
@@ -624,40 +453,27 @@ export const actionChangeFontSize = register({
            value: 16,
            text: t("labels.small"),
            icon: <FontSizeSmallIcon theme={appState.theme} />,
-            testId: "fontSize-small",
          },
          {
            value: 20,
            text: t("labels.medium"),
            icon: <FontSizeMediumIcon theme={appState.theme} />,
-            testId: "fontSize-medium",
          },
          {
            value: 28,
            text: t("labels.large"),
            icon: <FontSizeLargeIcon theme={appState.theme} />,
-            testId: "fontSize-large",
          },
          {
            value: 36,
            text: t("labels.veryLarge"),
            icon: <FontSizeExtraLargeIcon theme={appState.theme} />,
-            testId: "fontSize-veryLarge",
          },
        ]}
        value={getFormValue(
          elements,
          appState,
-          (element) => {
-            if (isTextElement(element)) {
-              return element.fontSize;
-            }
-            const boundTextElement = getBoundTextElement(element);
-            if (boundTextElement) {
-              return boundTextElement.fontSize;
-            }
-            return null;
-          },
+          (element) => isTextElement(element) && element.fontSize,
          appState.currentItemFontSize || DEFAULT_FONT_SIZE,
        )}
        onChange={(value) => updateData(value)}
@@ -666,71 +482,21 @@ export const actionChangeFontSize = register({
  ),
 });

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

-          return oldElement;
-        },
-        true,
-      ),
+        return el;
+      }),
      appState: {
        ...appState,
        currentItemFontFamily: value,
@@ -770,16 +536,7 @@ export const actionChangeFontFamily = register({
          value={getFormValue(
            elements,
            appState,
-            (element) => {
-              if (isTextElement(element)) {
-                return element.fontFamily;
-              }
-              const boundTextElement = getBoundTextElement(element);
-              if (boundTextElement) {
-                return boundTextElement.fontFamily;
-              }
-              return null;
-            },
+            (element) => isTextElement(element) && element.fontFamily,
            appState.currentItemFontFamily || DEFAULT_FONT_FAMILY,
          )}
          onChange={(value) => updateData(value)}
@@ -793,27 +550,17 @@ export const actionChangeTextAlign = register({
  name: "changeTextAlign",
  perform: (elements, appState, value) => {
    return {
-      elements: changeProperty(
-        elements,
-        appState,
-        (oldElement) => {
-          if (isTextElement(oldElement)) {
-            const newElement: ExcalidrawTextElement = newElementWith(
-              oldElement,
-              { textAlign: value },
-            );
-            redrawTextBoundingBox(
-              newElement,
-              getContainerElement(oldElement),
-              appState,
-            );
-            return newElement;
-          }
+      elements: changeProperty(elements, appState, (el) => {
+        if (isTextElement(el)) {
+          const element: ExcalidrawTextElement = newElementWith(el, {
+            textAlign: value,
+          });
+          redrawTextBoundingBox(element);
+          return element;
+        }

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

 export const actionChangeSharpness = register({
@@ -1072,14 +738,6 @@ export const actionChangeArrowhead = register({
                icon: <ArrowheadDotIcon theme={appState.theme} flip={!isRTL} />,
                keyBinding: "r",
              },
-              {
-                value: "triangle",
-                text: t("labels.arrowhead_triangle"),
-                icon: (
-                  <ArrowheadTriangleIcon theme={appState.theme} flip={!isRTL} />
-                ),
-                keyBinding: "t",
-              },
            ]}
            value={getFormValue<Arrowhead | null>(
              elements,
@@ -1122,14 +780,6 @@ export const actionChangeArrowhead = register({
                keyBinding: "r",
                icon: <ArrowheadDotIcon theme={appState.theme} flip={isRTL} />,
              },
-              {
-                value: "triangle",
-                text: t("labels.arrowhead_triangle"),
-                icon: (
-                  <ArrowheadTriangleIcon theme={appState.theme} flip={isRTL} />
-                ),
-                keyBinding: "t",
-              },
            ]}
            value={getFormValue<Arrowhead | null>(
              elements,
--- a/src/actions/actionSelectAll.ts
+++ b/src/actions/actionSelectAll.ts
@@ -1,7 +1,7 @@
 import { KEYS } from "../keys";
 import { register } from "./register";
 import { selectGroupsForSelectedElements } from "../groups";
-import { getNonDeletedElements, isTextElement } from "../element";
+import { getNonDeletedElements } from "../element";

 export const actionSelectAll = register({
  name: "selectAll",
@@ -15,10 +15,7 @@ export const actionSelectAll = register({
          ...appState,
          editingGroupId: null,
          selectedElementIds: elements.reduce((map, element) => {
-            if (
-              !element.isDeleted &&
-              !(isTextElement(element) && element.containerId)
-            ) {
+            if (!element.isDeleted) {
              map[element.id] = true;
            }
            return map;
--- a/src/actions/actionStyles.test.tsx
+++ b/src/actions/actionStyles.test.tsx
@@ -1,71 +0,0 @@
-import ExcalidrawApp from "../excalidraw-app";
-import { t } from "../i18n";
-import { CODES } from "../keys";
-import { API } from "../tests/helpers/api";
-import { Keyboard, Pointer, UI } from "../tests/helpers/ui";
-import { fireEvent, render, screen } from "../tests/test-utils";
-import { copiedStyles } from "./actionStyles";
-
-const { h } = window;
-
-const mouse = new Pointer("mouse");
-
-describe("actionStyles", () => {
-  beforeEach(async () => {
-    await render(<ExcalidrawApp />);
-  });
-  it("should copy & paste styles via keyboard", () => {
-    UI.clickTool("rectangle");
-    mouse.down(10, 10);
-    mouse.up(20, 20);
-
-    UI.clickTool("rectangle");
-    mouse.down(10, 10);
-    mouse.up(20, 20);
-
-    // Change some styles of second rectangle
-    UI.clickLabeledElement("Stroke");
-    UI.clickLabeledElement(t("colors.c92a2a"));
-    UI.clickLabeledElement("Background");
-    UI.clickLabeledElement(t("colors.e64980"));
-    // Fill style
-    fireEvent.click(screen.getByTitle("Cross-hatch"));
-    // Stroke width
-    fireEvent.click(screen.getByTitle("Bold"));
-    // Stroke style
-    fireEvent.click(screen.getByTitle("Dotted"));
-    // Roughness
-    fireEvent.click(screen.getByTitle("Cartoonist"));
-    // Opacity
-    fireEvent.change(screen.getByLabelText("Opacity"), {
-      target: { value: "60" },
-    });
-
-    mouse.reset();
-
-    API.setSelectedElements([h.elements[1]]);
-
-    Keyboard.withModifierKeys({ ctrl: true, alt: true }, () => {
-      Keyboard.codeDown(CODES.C);
-    });
-    const secondRect = JSON.parse(copiedStyles);
-    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
@@ -12,7 +12,6 @@ import {
  DEFAULT_FONT_FAMILY,
  DEFAULT_TEXT_ALIGN,
 } from "../constants";
-import { getContainerElement } from "../element/textElement";

 // `copiedStyles` is exported only for tests.
 export let copiedStyles: string = "{}";
@@ -56,18 +55,13 @@ export const actionPasteStyles = register({
            opacity: pastedElement?.opacity,
            roughness: pastedElement?.roughness,
          });
-          if (isTextElement(newElement) && isTextElement(element)) {
+          if (isTextElement(newElement)) {
            mutateElement(newElement, {
              fontSize: pastedElement?.fontSize || DEFAULT_FONT_SIZE,
              fontFamily: pastedElement?.fontFamily || DEFAULT_FONT_FAMILY,
              textAlign: pastedElement?.textAlign || DEFAULT_TEXT_ALIGN,
            });
-
-            redrawTextBoundingBox(
-              newElement,
-              getContainerElement(newElement),
-              appState,
-            );
+            redrawTextBoundingBox(newElement);
          }
          return newElement;
        }
--- a/src/actions/actionUnbindText.tsx
+++ b/src/actions/actionUnbindText.tsx
@@ -1,44 +0,0 @@
-import { getNonDeletedElements } from "../element";
-import { mutateElement } from "../element/mutateElement";
-import { getBoundTextElement, measureText } from "../element/textElement";
-import { 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",
-  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,
-    };
-  },
-});
--- a/src/actions/index.ts
+++ b/src/actions/index.ts
@@ -8,7 +8,6 @@ export {
 export { actionSelectAll } from "./actionSelectAll";
 export { actionDuplicateSelection } from "./actionDuplicateSelection";
 export {
-  actionChangeFontColor,
  actionChangeStrokeColor,
  actionChangeBackgroundColor,
  actionChangeStrokeWidth,
@@ -18,7 +17,6 @@ export {
  actionChangeFontSize,
  actionChangeFontFamily,
  actionChangeTextAlign,
-  actionChangeVerticalAlign,
 } from "./actionProperties";

 export {
@@ -82,5 +80,3 @@ export { actionToggleGridMode } from "./actionToggleGridMode";
 export { actionToggleZenMode } from "./actionToggleZenMode";

 export { actionToggleStats } from "./actionToggleStats";
-export { actionUnbindText } from "./actionUnbindText";
-export { actionLink } from "../element/Hyperlink";
--- a/src/actions/manager.tsx
+++ b/src/actions/manager.tsx
@@ -10,31 +10,6 @@ import {
 import { ExcalidrawElement } from "../element/types";
 import { AppClassProperties, AppState } from "../types";
 import { MODES } from "../constants";
-import { trackEvent } from "../analytics";
-
-const trackAction = (
-  action: Action,
-  source: "ui" | "keyboard" | "api",
-  value: any,
-) => {
-  if (action.trackEvent !== false) {
-    try {
-      if (action.trackEvent === true) {
-        trackEvent(
-          action.name,
-          source,
-          typeof value === "number" || typeof value === "string"
-            ? String(value)
-            : undefined,
-        );
-      } else {
-        action.trackEvent?.(action, source, value);
-      }
-    } catch (error) {
-      console.error("error while logging action:", error);
-    }
-  }
-};

 export class ActionManager implements ActionsManagerInterface {
  actions = {} as ActionsManagerInterface["actions"];
@@ -90,15 +65,9 @@ export class ActionManager implements ActionsManagerInterface {
          ),
      );

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

-    trackAction(action, "keyboard", null);
-
    event.preventDefault();
    this.updater(
      data[0].perform(
@@ -129,7 +96,6 @@ export class ActionManager implements ActionsManagerInterface {
        this.app,
      ),
    );
-    trackAction(action, "api", null);
  }

  /**
@@ -156,8 +122,6 @@ export class ActionManager implements ActionsManagerInterface {
            this.app,
          ),
        );
-
-        trackAction(action, "ui", formState);
      };

      return (
--- a/src/actions/register.ts
+++ b/src/actions/register.ts
@@ -2,9 +2,7 @@ import { Action } from "./types";

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

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

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

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

 export const getShortcutFromShortcutName = (name: ShortcutName) => {
  const shortcuts = shortcutMap[name];
-  // if multiple shortcuts available, take the first one
+  // if multiple shortcuts availiable, take the first one
  return shortcuts && shortcuts.length > 0 ? shortcuts[0] : "";
 };
--- a/src/actions/types.ts
+++ b/src/actions/types.ts
@@ -49,7 +49,6 @@ export type ActionName =
  | "gridMode"
  | "zenMode"
  | "stats"
-  | "changeFontColor"
  | "changeStrokeColor"
  | "changeBackgroundColor"
  | "changeFillStyle"
@@ -83,7 +82,6 @@ export type ActionName =
  | "zoomToSelection"
  | "changeFontFamily"
  | "changeTextAlign"
-  | "changeVerticalAlign"
  | "toggleFullScreen"
  | "toggleShortcuts"
  | "group"
@@ -103,12 +101,7 @@ export type ActionName =
  | "flipVertical"
  | "viewMode"
  | "exportWithDarkMode"
-  | "toggleTheme"
-  | "increaseFontSize"
-  | "decreaseFontSize"
-  | "unbindText"
-  | "hyperlink"
-  | "eraser";
+  | "toggleTheme";

 export type PanelComponentProps = {
  elements: readonly ExcalidrawElement[];
@@ -128,20 +121,12 @@ export interface Action {
    appState: AppState,
    elements: readonly ExcalidrawElement[],
  ) => boolean;
-  contextItemLabel?:
-    | string
-    | ((
-        elements: readonly ExcalidrawElement[],
-        appState: Readonly<AppState>,
-      ) => string);
+  contextItemLabel?: string;
  contextItemPredicate?: (
    elements: readonly ExcalidrawElement[],
    appState: AppState,
  ) => boolean;
  checked?: (appState: Readonly<AppState>) => boolean;
-  trackEvent?:
-    | boolean
-    | ((action: Action, type: "ui" | "keyboard" | "api", value: any) => void);
 }

 export interface ActionsManagerInterface {
--- a/src/align.ts
+++ b/src/align.ts
@@ -1,7 +1,13 @@
 import { ExcalidrawElement } from "./element/types";
 import { newElementWith } from "./element/mutateElement";
-import { Box, getCommonBoundingBox } from "./element/bounds";
-import { getMaximumGroups } from "./groups";
+import { getCommonBounds } from "./element";
+
+interface Box {
+  minX: number;
+  minY: number;
+  maxX: number;
+  maxY: number;
+}

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

+export const getMaximumGroups = (
+  elements: ExcalidrawElement[],
+): ExcalidrawElement[][] => {
+  const groups: Map<String, ExcalidrawElement[]> = new Map<
+    String,
+    ExcalidrawElement[]
+  >();
+
+  elements.forEach((element: ExcalidrawElement) => {
+    const groupId =
+      element.groupIds.length === 0
+        ? element.id
+        : element.groupIds[element.groupIds.length - 1];
+
+    const currentGroupMembers = groups.get(groupId) || [];
+
+    groups.set(groupId, [...currentGroupMembers, element]);
+  });
+
+  return Array.from(groups.values());
+};
+
 const calculateTranslation = (
  group: ExcalidrawElement[],
  selectionBoundingBox: Box,
@@ -60,3 +88,8 @@ const calculateTranslation = (
      (groupBoundingBox[min] + groupBoundingBox[max]) / 2,
  };
 };
+
+const getCommonBoundingBox = (elements: ExcalidrawElement[]): Box => {
+  const [minX, minY, maxX, maxY] = getCommonBounds(elements);
+  return { minX, minY, maxX, maxY };
+};
--- a/src/analytics.ts
+++ b/src/analytics.ts
@@ -3,16 +3,16 @@ export const trackEvent =
  process.env?.REACT_APP_GOOGLE_ANALYTICS_ID &&
  typeof window !== "undefined" &&
  window.gtag
-    ? (category: string, action: string, label?: string, value?: number) => {
-        window.gtag("event", action, {
+    ? (category: string, name: string, label?: string, value?: number) => {
+        window.gtag("event", name, {
          event_category: category,
          event_label: label,
          value,
        });
      }
    : typeof process !== "undefined" && process.env?.JEST_WORKER_ID
-    ? (category: string, action: string, label?: string, value?: number) => {}
-    : (category: string, action: string, label?: string, value?: number) => {
+    ? (category: string, name: string, label?: string, value?: number) => {}
+    : (category: string, name: string, label?: string, value?: number) => {
        // Uncomment the next line to track locally
-        // console.info("Track Event", category, action, label, value);
+        // console.info("Track Event", category, name, label, value);
      };
--- a/src/appState.ts
+++ b/src/appState.ts
@@ -43,8 +43,6 @@ export const getDefaultAppState = (): Omit<
    editingLinearElement: null,
    elementLocked: false,
    elementType: "selection",
-    penMode: false,
-    penDetected: false,
    errorMessage: null,
    exportBackground: true,
    exportScale: defaultExportScale,
@@ -79,12 +77,9 @@ export const getDefaultAppState = (): Omit<
    toastMessage: null,
    viewBackgroundColor: oc.white,
    zenModeEnabled: false,
-    zoom: {
-      value: 1 as NormalizedZoomValue,
-    },
+    zoom: { value: 1 as NormalizedZoomValue, translation: { x: 0, y: 0 } },
    viewModeEnabled: false,
    pendingImageElement: null,
-    showHyperlinkPopup: false,
  };
 };

@@ -101,9 +96,10 @@ const APP_STATE_STORAGE_CONF = (<
    /** server (shareLink/collab/...) */
    server: boolean;
  },
-  T extends Record<keyof AppState, Values>,
->(config: { [K in keyof T]: K extends keyof AppState ? T[K] : never }) =>
-  config)({
+  T extends Record<keyof AppState, Values>
+>(
+  config: { [K in keyof T]: K extends keyof AppState ? T[K] : never },
+) => config)({
  theme: { browser: true, export: false, server: false },
  collaborators: { browser: false, export: false, server: false },
  currentChartType: { browser: true, export: false, server: false },
@@ -132,8 +128,6 @@ const APP_STATE_STORAGE_CONF = (<
  editingLinearElement: { browser: false, export: false, server: false },
  elementLocked: { browser: true, export: false, server: false },
  elementType: { browser: true, export: false, server: false },
-  penMode: { browser: false, export: false, server: false },
-  penDetected: { browser: false, 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 },
@@ -175,11 +169,10 @@ const APP_STATE_STORAGE_CONF = (<
  zoom: { browser: true, export: false, server: false },
  viewModeEnabled: { browser: false, export: false, server: false },
  pendingImageElement: { browser: false, export: false, server: false },
-  showHyperlinkPopup: { browser: false, export: false, server: false },
 });

 const _clearAppStateForStorage = <
-  ExportType extends "export" | "browser" | "server",
+  ExportType extends "export" | "browser" | "server"
 >(
  appState: Partial<AppState>,
  exportType: ExportType,
@@ -213,9 +206,3 @@ export const cleanAppStateForExport = (appState: Partial<AppState>) => {
 export const clearAppStateForDatabase = (appState: Partial<AppState>) => {
  return _clearAppStateForStorage(appState, "server");
 };
-
-export const isEraserActive = ({
-  elementType,
-}: {
-  elementType: AppState["elementType"];
-}) => elementType === "eraser";
--- a/src/charts.ts
+++ b/src/charts.ts
@@ -1,10 +1,5 @@
 import colors from "./colors";
-import {
-  DEFAULT_FONT_FAMILY,
-  DEFAULT_FONT_SIZE,
-  ENV,
-  VERTICAL_ALIGN,
-} from "./constants";
+import { DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, ENV } from "./constants";
 import { newElement, newLinearElement, newTextElement } from "./element";
 import { NonDeletedExcalidrawElement } from "./element/types";
 import { randomId } from "./random";
@@ -108,7 +103,7 @@ const transposeCells = (cells: string[][]) => {
 };

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

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

 const getChartDimentions = (spreadsheet: Spreadsheet) => {
--- a/src/clipboard.ts
+++ b/src/clipboard.ts
@@ -58,8 +58,7 @@ export const copyToClipboard = async (
  appState: AppState,
  files: BinaryFiles,
 ) => {
-  // select binded text elements when copying
-  const selectedElements = getSelectedElements(elements, appState, true);
+  const selectedElements = getSelectedElements(elements, appState);
  const contents: ElementsClipboard = {
    type: EXPORT_DATA_TYPES.excalidrawClipboard,
    elements: selectedElements,
@@ -75,7 +74,7 @@ export const copyToClipboard = async (
  try {
    PREFER_APP_CLIPBOARD = false;
    await copyTextToSystemClipboard(json);
-  } catch (error: any) {
+  } catch (error) {
    PREFER_APP_CLIPBOARD = true;
    console.error(error);
  }
@@ -88,7 +87,7 @@ const getAppClipboard = (): Partial<ElementsClipboard> => {

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

 /**
- * Attempts to parse clipboard. Prefers system clipboard.
+ * Attemps to parse clipboard. Prefers system clipboard.
 */
 export const parseClipboard = async (
  event: ClipboardEvent | null,
@@ -180,7 +179,7 @@ export const copyTextToSystemClipboard = async (text: string | null) => {
      // not focused
      await navigator.clipboard.writeText(text || "");
      copied = true;
-    } catch (error: any) {
+    } catch (error) {
      console.error(error);
    }
  }
@@ -220,7 +219,7 @@ const copyTextViaExecCommand = (text: string) => {
    textarea.setSelectionRange(0, textarea.value.length);

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

--- a/src/components/Actions.tsx
+++ b/src/components/Actions.tsx
@@ -19,7 +19,6 @@ import { capitalizeString, isTransparent, setCursorForShape } from "../utils";
 import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
 import { hasStrokeColor } from "../scene/comparisons";
-import { hasBoundTextElement, isBoundToContainer } from "../element/typeChecks";

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

-  const hasOnlyContainersWithBoundText =
-    targetElements.length > 1 &&
-    targetElements.every(
-      (element) => hasBoundTextElement(element) || isBoundToContainer(element),
-    );
-
  return (
    <div className="panelColumn">
-      {hasOnlyContainersWithBoundText && renderAction("changeFontColor")}
      {((hasStrokeColor(elementType) &&
        elementType !== "image" &&
        commonSelectedType !== "image") ||
@@ -117,10 +100,6 @@ export const SelectedShapeActions = ({
        </>
      )}

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

-      {targetElements.length > 1 && !isSingleElementBoundContainer && (
+      {targetElements.length > 1 && (
        <fieldset>
          <legend>{t("labels.align")}</legend>
          <div className="buttonList">
@@ -171,15 +150,14 @@ export const SelectedShapeActions = ({
          </div>
        </fieldset>
      )}
-      {!isEditing && targetElements.length > 0 && (
+      {!isMobile && !isEditing && targetElements.length > 0 && (
        <fieldset>
          <legend>{t("labels.actions")}</legend>
          <div className="buttonList">
-            {!isMobile && renderAction("duplicateSelection")}
-            {!isMobile && renderAction("deleteSelectedElements")}
+            {renderAction("duplicateSelection")}
+            {renderAction("deleteSelectedElements")}
            {renderAction("group")}
            {renderAction("ungroup")}
-            {targetElements.length === 1 && renderAction("hyperlink")}
          </div>
        </fieldset>
      )}
@@ -194,7 +172,7 @@ export const ShapesSwitcher = ({
  onImageAction,
 }: {
  canvas: HTMLCanvasElement | null;
-  elementType: AppState["elementType"];
+  elementType: ExcalidrawElement["type"];
  setAppState: React.Component<any, AppState>["setState"];
  onImageAction: (data: { pointerType: PointerType | null }) => void;
 }) => (
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
--- 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; testId?: string }[];
+  options: { value: T; text: string; icon: JSX.Element }[];
  value: T | null;
  onChange: (value: T) => void;
  group: string;
@@ -24,7 +24,6 @@ export const ButtonIconSelect = <T extends Object>({
          name={group}
          onChange={() => onChange(option.value)}
          checked={value === option.value}
-          data-testid={option.testId}
        />
        {option.icon}
      </label>
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -3,22 +3,15 @@ import OpenColor from "open-color";
 import "./Card.scss";

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

 export const CheckboxItem: React.FC<{
  checked: boolean;
-  onChange: (checked: boolean, event: React.MouseEvent) => void;
-  className?: string;
-}> = ({ children, checked, onChange, className }) => {
+  onChange: (checked: boolean) => void;
+}> = ({ children, checked, onChange }) => {
  return (
    <div
-      className={clsx("Checkbox", className, { "is-checked": checked })}
+      className={clsx("Checkbox", { "is-checked": checked })}
      onClick={(event) => {
-        onChange(!checked, event);
-        (
-          (event.currentTarget as HTMLDivElement).querySelector(
-            ".Checkbox-box",
-          ) as HTMLButtonElement
-        ).focus();
+        onChange(!checked);
+        ((event.currentTarget as HTMLDivElement).querySelector(
+          ".Checkbox-box",
+        ) as HTMLButtonElement).focus();
      }}
    >
      <button className="Checkbox-box" role="checkbox" aria-checked={checked}>
--- a/src/components/ConfirmDialog.scss
+++ b/src/components/ConfirmDialog.scss
@@ -1,21 +1,22 @@
@import "../css/variables.module";

 .excalidraw {
-  .confirm-dialog {
+  .clear-canvas {
    &-buttons {
      display: flex;
      padding: 0.2rem 0;
      justify-content: flex-end;
-    }
-    .ToolIcon__icon {
-      min-width: 2.5rem;
-      width: auto;
-      font-size: 1rem;
-    }

-    .ToolIcon_type_button {
-      margin-left: 0.8rem;
-      padding: 0 0.5rem;
+      .ToolIcon__icon {
+        min-width: 2.5rem;
+        width: auto;
+        font-size: 1rem;
+      }
+
+      .ToolIcon_type_button {
+        margin-left: 1.5rem;
+        padding: 0 0.5rem;
+      }
    }

    &__content {
@@ -33,5 +34,9 @@
        color: $oc-white;
      }
    }
+
+    &--cancel.ToolIcon_type_button {
+      background-color: $oc-gray-2;
+    }
  }
 }
--- a/src/components/ClearCanvas.tsx
+++ b/src/components/ClearCanvas.tsx
@@ -1,10 +1,11 @@
 import { useState } from "react";
 import { t } from "../i18n";
 import { useIsMobile } from "./App";
+import { Dialog } from "./Dialog";
 import { trash } from "./icons";
 import { ToolButton } from "./ToolButton";

-import ConfirmDialog from "./ConfirmDialog";
+import "./ClearCanvas.scss";

 const ClearCanvas = ({ onConfirm }: { onConfirm: () => void }) => {
  const [showDialog, setShowDialog] = useState(false);
@@ -25,16 +26,39 @@ const ClearCanvas = ({ onConfirm }: { onConfirm: () => void }) => {
      />

      {showDialog && (
-        <ConfirmDialog
-          onConfirm={() => {
-            onConfirm();
-            toggleDialog();
-          }}
-          onCancel={toggleDialog}
+        <Dialog
+          onCloseRequest={toggleDialog}
          title={t("clearCanvasDialog.title")}
+          className="clear-canvas"
+          small={true}
        >
-          <p className="clear-canvas__content"> {t("alerts.clearReset")}</p>
-        </ConfirmDialog>
+          <>
+            <p className="clear-canvas__content"> {t("alerts.clearReset")}</p>
+            <div className="clear-canvas-buttons">
+              <ToolButton
+                type="button"
+                title={t("buttons.clear")}
+                aria-label={t("buttons.clear")}
+                label={t("buttons.clear")}
+                onClick={() => {
+                  onConfirm();
+                  toggleDialog();
+                }}
+                data-testid="confirm-clear-canvas-button"
+                className="clear-canvas--confirm"
+              />
+              <ToolButton
+                type="button"
+                title={t("buttons.cancel")}
+                aria-label={t("buttons.cancel")}
+                label={t("buttons.cancel")}
+                onClick={toggleDialog}
+                data-testid="cancel-clear-canvas-button"
+                className="clear-canvas--cancel"
+              />
+            </div>
+          </>
+        </Dialog>
      )}
    </>
  );
--- a/src/components/ColorPicker.scss
+++ b/src/components/ColorPicker.scss
@@ -46,7 +46,7 @@
    top: -11px;
  }

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

-  .color-picker-content--canvas {
-    display: flex;
-    flex-direction: column;
-    padding: 0.25rem;
-
-    &-title {
-      color: $oc-gray-6;
-      font-size: 12px;
-      padding: 0 0.25rem;
-    }
-
-    &-colors {
-      padding: 0.5rem 0;
-
-      .color-picker-swatch {
-        margin: 0 0.25rem;
-      }
-    }
-  }
-
  .color-picker-content .color-input-container {
    grid-column: 1 / span 5;
  }
@@ -255,8 +235,7 @@
    color: #aaa;
  }

-  .color-picker-type-elementStroke .color-picker-keybinding,
-  .color-picker-type-elementFontColor .color-picker-keybinding {
+  .color-picker-type-elementStroke .color-picker-keybinding {
    color: #d4d4d4;
  }

--- a/src/components/ColorPicker.tsx
+++ b/src/components/ColorPicker.tsx
@@ -7,53 +7,6 @@ import { isArrowKey, KEYS } from "../keys";
 import { t, getLanguage } from "../i18n";
 import { isWritableElement } from "../utils";
 import colors from "../colors";
-import { ExcalidrawElement } from "../element/types";
-import { AppState } from "../types";
-
-const MAX_CUSTOM_COLORS = 5;
-const MAX_DEFAULT_COLORS = 15;
-
-export const getCustomColors = (
-  elements: readonly ExcalidrawElement[],
-  type: "elementBackground" | "elementStroke",
-) => {
-  const customColors: string[] = [];
-  const updatedElements = elements
-    .filter((element) => !element.isDeleted)
-    .sort((ele1, ele2) => ele2.updated - ele1.updated);
-
-  let index = 0;
-  const elementColorTypeMap = {
-    elementBackground: "backgroundColor",
-    elementStroke: "strokeColor",
-  };
-  const colorType = elementColorTypeMap[type] as
-    | "backgroundColor"
-    | "strokeColor";
-  while (
-    index < updatedElements.length &&
-    customColors.length < MAX_CUSTOM_COLORS
-  ) {
-    const element = updatedElements[index];
-
-    if (
-      customColors.length < MAX_CUSTOM_COLORS &&
-      isCustomColor(element[colorType], type) &&
-      !customColors.includes(element[colorType])
-    ) {
-      customColors.push(element[colorType]);
-    }
-    index++;
-  }
-  return customColors;
-};
-
-const isCustomColor = (
-  color: string,
-  type: "elementBackground" | "elementStroke",
-) => {
-  return !colors[type].includes(color);
-};

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

 const Picker = ({
@@ -93,7 +45,6 @@ const Picker = ({
  label,
  showInput = true,
  type,
-  elements,
 }: {
  colors: string[];
  color: string | null;
@@ -101,25 +52,12 @@ const Picker = ({
  onClose: () => void;
  label: string;
  showInput: boolean;
-  type:
-    | "canvasBackground"
-    | "elementBackground"
-    | "elementStroke"
-    | "elementFontColor";
-  elements: readonly ExcalidrawElement[];
+  type: "canvasBackground" | "elementBackground" | "elementStroke";
 }) => {
  const firstItem = React.useRef<HTMLButtonElement>();
  const activeItem = React.useRef<HTMLButtonElement>();
  const gallery = React.useRef<HTMLDivElement>();
  const colorInput = React.useRef<HTMLInputElement>();
-  const colorType = type === "elementFontColor" ? "elementStroke" : type;
-
-  const [customColors] = React.useState(() => {
-    if (colorType === "canvasBackground") {
-      return [];
-    }
-    return getCustomColors(elements, colorType);
-  });

  React.useEffect(() => {
    // After the component is first mounted focus on first input
@@ -147,42 +85,23 @@ const Picker = ({
    } else if (isArrowKey(event.key)) {
      const { activeElement } = document;
      const isRTL = getLanguage().rtl;
-      let isCustom = false;
-      let index = Array.prototype.indexOf.call(
-        gallery!.current!.querySelector(".color-picker-content--default")!
-          .children,
+      const index = Array.prototype.indexOf.call(
+        gallery!.current!.children,
        activeElement,
      );
-      if (index === -1) {
-        index = Array.prototype.indexOf.call(
-          gallery!.current!.querySelector(
-            ".color-picker-content--canvas-colors",
-          )!.children,
-          activeElement,
-        );
-        if (index !== -1) {
-          isCustom = true;
-        }
-      }
-      const parentSelector = isCustom
-        ? gallery!.current!.querySelector(
-            ".color-picker-content--canvas-colors",
-          )!
-        : gallery!.current!.querySelector(".color-picker-content--default")!;
-
      if (index !== -1) {
-        const length = parentSelector!.children.length - (showInput ? 1 : 0);
+        const length = gallery!.current!.children.length - (showInput ? 1 : 0);
        const nextIndex =
          event.key === (isRTL ? KEYS.ARROW_LEFT : KEYS.ARROW_RIGHT)
            ? (index + 1) % length
            : event.key === (isRTL ? KEYS.ARROW_RIGHT : KEYS.ARROW_LEFT)
            ? (length + index - 1) % length
-            : !isCustom && event.key === KEYS.ARROW_DOWN
+            : event.key === KEYS.ARROW_DOWN
            ? (index + 5) % length
-            : !isCustom && event.key === KEYS.ARROW_UP
+            : event.key === KEYS.ARROW_UP
            ? (length + index - 5) % length
            : index;
-        (parentSelector!.children![nextIndex] as HTMLElement)?.focus();
+        (gallery!.current!.children![nextIndex] as any).focus();
      }
      event.preventDefault();
    } else if (
@@ -190,15 +109,7 @@ const Picker = ({
      !isWritableElement(event.target)
    ) {
      const index = keyBindings.indexOf(event.key.toLowerCase());
-      const isCustom = index >= MAX_DEFAULT_COLORS;
-      const parentSelector = isCustom
-        ? gallery!.current!.querySelector(
-            ".color-picker-content--canvas-colors",
-          )!
-        : gallery!.current!.querySelector(".color-picker-content--default")!;
-      const actualIndex = isCustom ? index - MAX_DEFAULT_COLORS : index;
-      (parentSelector!.children![actualIndex] as HTMLElement)?.focus();
-
+      (gallery!.current!.children![index] as any).focus();
      event.preventDefault();
    } else if (event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) {
      event.preventDefault();
@@ -208,50 +119,6 @@ const Picker = ({
    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 (
    <div
      className={`color-picker color-picker-type-${type}`}
@@ -271,20 +138,41 @@ const Picker = ({
        }}
        tabIndex={0}
      >
-        <div className="color-picker-content--default">
-          {renderColors(colors)}
-        </div>
-        {!!customColors.length && (
-          <div className="color-picker-content--canvas">
-            <span className="color-picker-content--canvas-title">
-              {t("labels.canvasColors")}
-            </span>
-            <div className="color-picker-content--canvas-colors">
-              {renderColors(customColors, true)}
-            </div>
-          </div>
-        )}
-
+        {colors.map((_color, i) => {
+          const _colorWithoutHash = _color.replace("#", "");
+          return (
+            <button
+              className="color-picker-swatch"
+              onClick={(event) => {
+                (event.currentTarget as HTMLButtonElement).focus();
+                onChange(_color);
+              }}
+              title={`${t(`colors.${_colorWithoutHash}`)}${
+                !isTransparent(_color) ? ` (${_color})` : ""
+              } — ${keyBindings[i].toUpperCase()}`}
+              aria-label={t(`colors.${_colorWithoutHash}`)}
+              aria-keyshortcuts={keyBindings[i]}
+              style={{ color: _color }}
+              key={_color}
+              ref={(el) => {
+                if (el && i === 0) {
+                  firstItem.current = el;
+                }
+                if (el && _color === color) {
+                  activeItem.current = el;
+                }
+              }}
+              onFocus={() => {
+                onChange(_color);
+              }}
+            >
+              {isTransparent(_color) ? (
+                <div className="color-picker-transparent"></div>
+              ) : undefined}
+              <span className="color-picker-keybinding">{keyBindings[i]}</span>
+            </button>
+          );
+        })}
        {showInput && (
          <ColorInput
            color={color}
@@ -358,24 +246,16 @@ export const ColorPicker = ({
  label,
  isActive,
  setActive,
-  elements,
-  appState,
 }: {
-  type:
-    | "canvasBackground"
-    | "elementBackground"
-    | "elementStroke"
-    | "elementFontColor";
+  type: "canvasBackground" | "elementBackground" | "elementStroke";
  color: string | null;
  onChange: (color: string) => void;
  label: string;
  isActive: boolean;
  setActive: (active: boolean) => void;
-  elements: readonly ExcalidrawElement[];
-  appState: AppState;
 }) => {
  const pickerButton = React.useRef<HTMLButtonElement>(null);
-  const colorType = type === "elementFontColor" ? "elementStroke" : type;
+
  return (
    <div>
      <div className="color-picker-control-container">
@@ -402,7 +282,7 @@ export const ColorPicker = ({
            }
          >
            <Picker
-              colors={colors[colorType]}
+              colors={colors[type]}
              color={color || null}
              onChange={(changedColor) => {
                onChange(changedColor);
@@ -414,7 +294,6 @@ export const ColorPicker = ({
              label={label}
              showInput={false}
              type={type}
-              elements={elements}
            />
          </Popover>
        ) : null}
--- a/src/components/ConfirmDialog.tsx
+++ b/src/components/ConfirmDialog.tsx
@@ -1,52 +0,0 @@
-import { t } from "../i18n";
-import { Dialog, DialogProps } from "./Dialog";
-import { ToolButton } from "./ToolButton";
-
-import "./ConfirmDialog.scss";
-
-interface Props extends Omit<DialogProps, "onCloseRequest"> {
-  onConfirm: () => void;
-  onCancel: () => void;
-  confirmText?: string;
-  cancelText?: string;
-}
-const ConfirmDialog = (props: Props) => {
-  const {
-    onConfirm,
-    onCancel,
-    children,
-    confirmText = t("buttons.confirm"),
-    cancelText = t("buttons.cancel"),
-    className = "",
-    ...rest
-  } = props;
-  return (
-    <Dialog
-      onCloseRequest={onCancel}
-      small={true}
-      {...rest}
-      className={`confirm-dialog ${className}`}
-    >
-      {children}
-      <div className="confirm-dialog-buttons">
-        <ToolButton
-          type="button"
-          title={cancelText}
-          aria-label={cancelText}
-          label={cancelText}
-          onClick={onCancel}
-          className="confirm-dialog--cancel"
-        />
-        <ToolButton
-          type="button"
-          title={confirmText}
-          aria-label={confirmText}
-          label={confirmText}
-          onClick={onConfirm}
-          className="confirm-dialog--confirm"
-        />
-      </div>
-    </Dialog>
-  );
-};
-export default ConfirmDialog;
--- a/src/components/ContextMenu.tsx
+++ b/src/components/ContextMenu.tsx
@@ -11,7 +11,6 @@ import {
 import { Action } from "../actions/types";
 import { ActionManager } from "../actions/manager";
 import { AppState } from "../types";
-import { NonDeletedExcalidrawElement } from "../element/types";

 export type ContextMenuOption = "separator" | Action;

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

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

          const actionName = option.name;
-          let label = "";
-          if (option.contextItemLabel) {
-            if (typeof option.contextItemLabel === "function") {
-              label = t(option.contextItemLabel(elements, appState));
-            } else {
-              label = t(option.contextItemLabel);
-            }
-          }
+          const label = option.contextItemLabel
+            ? t(option.contextItemLabel)
+            : "";
          return (
            <li key={idx} data-testid={actionName} onClick={onCloseRequest}>
              <button
@@ -109,7 +97,6 @@ type ContextMenuParams = {
  actionManager: ContextMenuProps["actionManager"];
  appState: Readonly<AppState>;
  container: HTMLElement;
-  elements: readonly NonDeletedExcalidrawElement[];
 };

 const handleClose = (container: HTMLElement) => {
@@ -138,7 +125,6 @@ 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
@@ -10,7 +10,7 @@ import { Island } from "./Island";
 import { Modal } from "./Modal";
 import { AppState } from "../types";

-export interface DialogProps {
+export const Dialog = (props: {
  children: React.ReactNode;
  className?: string;
  small?: boolean;
@@ -18,10 +18,7 @@ export interface DialogProps {
  title: React.ReactNode;
  autofocus?: boolean;
  theme?: AppState["theme"];
-  closeOnClickOutside?: boolean;
-}
-
-export const Dialog = (props: DialogProps) => {
+}) => {
  const [islandNode, setIslandNode] = useCallbackRefState<HTMLDivElement>();
  const [lastActiveElement] = useState(document.activeElement);
  const { id } = useExcalidrawContainer();
@@ -84,7 +81,6 @@ export const Dialog = (props: DialogProps) => {
      maxWidth={props.small ? 550 : 800}
      onCloseRequest={onClose}
      theme={props.theme}
-      closeOnClickOutside={props.closeOnClickOutside}
    >
      <Island ref={setIslandNode}>
        <h2 id={`${id}-dialog-title`} className="Dialog__title">
--- a/src/components/HelpDialog.tsx
+++ b/src/components/HelpDialog.tsx
@@ -154,7 +154,7 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                <Shortcut label={t("toolBar.line")} shortcuts={["P", "6"]} />
                <Shortcut
                  label={t("toolBar.freedraw")}
-                  shortcuts={["Shift + P", "X", "7"]}
+                  shortcuts={["Shift+P", "7"]}
                />
                <Shortcut label={t("toolBar.text")} shortcuts={["T", "8"]} />
                <Shortcut label={t("toolBar.image")} shortcuts={["9"]} />
@@ -205,10 +205,6 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                  label={t("helpDialog.preventBinding")}
                  shortcuts={[getShortcutKey("CtrlOrCmd")]}
                />
-                <Shortcut
-                  label={t("toolBar.link")}
-                  shortcuts={[getShortcutKey("CtrlOrCmd+K")]}
-                />
              </ShortcutIsland>
              <ShortcutIsland caption={t("helpDialog.view")}>
                <Shortcut
@@ -264,18 +260,6 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                  label={t("labels.multiSelect")}
                  shortcuts={[getShortcutKey(`Shift+${t("helpDialog.click")}`)]}
                />
-                <Shortcut
-                  label={t("helpDialog.deepSelect")}
-                  shortcuts={[
-                    getShortcutKey(`CtrlOrCmd+${t("helpDialog.click")}`),
-                  ]}
-                />
-                <Shortcut
-                  label={t("helpDialog.deepBoxSelect")}
-                  shortcuts={[
-                    getShortcutKey(`CtrlOrCmd+${t("helpDialog.drag")}`),
-                  ]}
-                />
                <Shortcut
                  label={t("labels.moveCanvas")}
                  shortcuts={[
@@ -398,14 +382,6 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                  label={t("labels.showBackground")}
                  shortcuts={[getShortcutKey("G")]}
                />
-                <Shortcut
-                  label={t("labels.decreaseFontSize")}
-                  shortcuts={[getShortcutKey("CtrlOrCmd+Shift+<")]}
-                />
-                <Shortcut
-                  label={t("labels.increaseFontSize")}
-                  shortcuts={[getShortcutKey("CtrlOrCmd+Shift+>")]}
-                />
              </ShortcutIsland>
            </Column>
          </Columns>
--- a/src/components/HintViewer.tsx
+++ b/src/components/HintViewer.tsx
@@ -7,25 +7,18 @@ import { AppState } from "../types";
 import {
  isImageElement,
  isLinearElement,
-  isTextBindableContainer,
  isTextElement,
 } from "../element/typeChecks";
 import { getShortcutKey } from "../utils";
-import { isEraserActive } from "../appState";

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

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

  const selectedElements = getSelectedElements(elements, appState);
-
  if (
    isResizing &&
    lastPointerDownWith === "mouse" &&
@@ -65,6 +57,15 @@ const getHints = ({ appState, elements, isMobile }: HintViewerProps) => {
    return t("hints.rotate");
  }

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

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

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

-    &:focus-visible {
+    &:focus {
      outline: transparent;
      background-color: var(--button-gray-2);
      & svg {
@@ -90,7 +90,7 @@
  .picker-content {
    padding: 0.5rem;
    display: grid;
-    grid-template-columns: repeat(3, auto);
+    grid-auto-flow: column;
    grid-gap: 0.5rem;
    border-radius: 4px;
    :root[dir="rtl"] & {
--- a/src/components/ImageExportDialog.tsx
+++ b/src/components/ImageExportDialog.tsx
@@ -102,7 +102,7 @@ const ImageExportModal = ({
  const { exportBackground, viewBackgroundColor } = appState;

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

  useEffect(() => {
--- a/src/components/Island.scss
+++ b/src/components/Island.scss
@@ -3,7 +3,7 @@
    --padding: 0;
    background-color: var(--island-bg-color);
    box-shadow: var(--shadow-island);
-    border-radius: var(--border-radius-lg);
+    border-radius: 4px;
    padding: calc(var(--padding) * var(--space-factor));
    position: relative;
    transition: box-shadow 0.5s ease-in-out;
--- a/src/components/LayerUI.scss
+++ b/src/components/LayerUI.scss
@@ -1,6 +1,42 @@
@import "open-color/open-color";

 .excalidraw {
+  .layer-ui__library {
+    margin: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .layer-ui__library-header {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      margin: 2px 0;
+
+      button {
+        // 2px from the left to account for focus border of left-most button
+        margin: 0 2px;
+      }
+
+      a {
+        margin-inline-start: auto;
+        // 17px for scrollbar (needed for overlay scrollbars on Big Sur?) + 1px extra
+        padding-inline-end: 18px;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  .layer-ui__library-message {
+    padding: 10px 20px;
+    max-width: 200px;
+  }
+
+  .layer-ui__library-items {
+    max-height: 50vh;
+    overflow: auto;
+  }
+
  .layer-ui__wrapper {
    z-index: var(--zIndex-layerUI);

--- a/src/components/LayerUI.tsx
+++ b/src/components/LayerUI.tsx
@@ -1,15 +1,29 @@
 import clsx from "clsx";
-import React, { useCallback } from "react";
+import React, {
+  RefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { ActionManager } from "../actions/manager";
 import { CLASSES } from "../constants";
 import { exportCanvas } from "../data";
+import { importLibraryFromJSON, saveLibraryAsJSON } from "../data/json";
 import { isTextElement, showSelectedShapeActions } from "../element";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { Language, t } from "../i18n";
 import { useIsMobile } from "../components/App";
 import { calculateScrollCenter, getSelectedElements } from "../scene";
 import { ExportType } from "../scene/types";
-import { AppProps, AppState, ExcalidrawProps, BinaryFiles } from "../types";
+import {
+  AppProps,
+  AppState,
+  ExcalidrawProps,
+  BinaryFiles,
+  LibraryItem,
+  LibraryItems,
+} from "../types";
 import { muteFSAbortError } from "../utils";
 import { SelectedShapeActions, ShapesSwitcher, ZoomActions } from "./Actions";
 import { BackgroundPickerAndDarkModeToggle } from "./BackgroundPickerAndDarkModeToggle";
@@ -18,7 +32,10 @@ import { ErrorDialog } from "./ErrorDialog";
 import { ExportCB, ImageExportDialog } from "./ImageExportDialog";
 import { FixedSideContainer } from "./FixedSideContainer";
 import { HintViewer } from "./HintViewer";
+import { exportFile, load, trash } from "./icons";
 import { Island } from "./Island";
+import "./LayerUI.scss";
+import { LibraryUnit } from "./LibraryUnit";
 import { LoadingMessage } from "./LoadingMessage";
 import { LockButton } from "./LockButton";
 import { MobileMenu } from "./MobileMenu";
@@ -26,17 +43,13 @@ import { PasteChartDialog } from "./PasteChartDialog";
 import { Section } from "./Section";
 import { HelpDialog } from "./HelpDialog";
 import Stack from "./Stack";
+import { ToolButton } from "./ToolButton";
 import { Tooltip } from "./Tooltip";
 import { UserList } from "./UserList";
 import Library from "../data/library";
 import { JSONExportDialog } from "./JSONExportDialog";
 import { LibraryButton } from "./LibraryButton";
 import { isImageFileHandle } from "../data/blob";
-import { LibraryMenu } from "./LibraryMenu";
-
-import "./LayerUI.scss";
-import "./Toolbar.scss";
-import { PenModeButton } from "./PenModeButton";

 interface LayerUIProps {
  actionManager: ActionManager;
@@ -47,7 +60,6 @@ interface LayerUIProps {
  elements: readonly NonDeletedExcalidrawElement[];
  onCollabButtonClick?: () => void;
  onLockToggle: () => void;
-  onPenModeToggle: () => void;
  onInsertElements: (elements: readonly NonDeletedExcalidrawElement[]) => void;
  zenModeEnabled: boolean;
  showExitZenModeBtn: boolean;
@@ -69,6 +81,302 @@ interface LayerUIProps {
  onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void;
 }

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

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

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

    return (
      <ImageExportDialog
@@ -238,7 +545,7 @@ const LayerUI = ({
        className={CLASSES.SHAPE_ACTIONS_MENU}
        padding={2}
        style={{
-          // we want to make sure this doesn't overflow so subtracting 200
+          // we want to make sure this doesn't overflow so substracting 200
          // which is approximately height of zoom footer and top left menu items with some buffer
          // if active file name is displayed, subtracting 248 to account for its height
          maxHeight: `${appState.height - (appState.fileHandle ? 248 : 200)}px`,
@@ -254,15 +561,12 @@ const LayerUI = ({
    </Section>
  );

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

  const deselectItems = useCallback(() => {
    setAppState({
@@ -273,8 +577,8 @@ const LayerUI = ({

  const libraryMenu = appState.isLibraryOpen ? (
    <LibraryMenu
-      pendingElements={getSelectedElements(elements, appState, true)}
-      onClose={closeLibrary}
+      pendingElements={getSelectedElements(elements, appState)}
+      onClickOutside={closeLibrary}
      onInsertShape={onInsertElements}
      onAddToLibrary={deselectItems}
      setAppState={setAppState}
@@ -284,7 +588,6 @@ const LayerUI = ({
      theme={appState.theme}
      files={files}
      id={id}
-      appState={appState}
    />
  ) : null;

@@ -310,19 +613,7 @@ const LayerUI = ({
            <Section heading="shapes">
              {(heading) => (
                <Stack.Col gap={4} align="start">
-                  <Stack.Row
-                    gap={1}
-                    className={clsx("App-toolbar-container", {
-                      "zen-mode": zenModeEnabled,
-                    })}
-                  >
-                    <PenModeButton
-                      zenModeEnabled={zenModeEnabled}
-                      checked={appState.penMode}
-                      onChange={onPenModeToggle}
-                      title={t("toolBar.penMode")}
-                      penDetected={appState.penDetected}
-                    />
+                  <Stack.Row gap={1}>
                    <LockButton
                      zenModeEnabled={zenModeEnabled}
                      checked={appState.elementLocked}
@@ -331,15 +622,9 @@ const LayerUI = ({
                    />
                    <Island
                      padding={1}
-                      className={clsx("App-toolbar", {
-                        "zen-mode": zenModeEnabled,
-                      })}
+                      className={clsx({ "zen-mode": zenModeEnabled })}
                    >
-                      <HintViewer
-                        appState={appState}
-                        elements={elements}
-                        isMobile={isMobile}
-                      />
+                      <HintViewer appState={appState} elements={elements} />
                      {heading}
                      <Stack.Row gap={1}>
                        <ShapesSwitcher
@@ -420,22 +705,13 @@ const LayerUI = ({
              {!viewModeEnabled && (
                <div
                  className={clsx("undo-redo-buttons zen-mode-transition", {
-                    "layer-ui__wrapper__footer-left--transition-bottom":
-                      zenModeEnabled,
+                    "layer-ui__wrapper__footer-left--transition-bottom": 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":
-                    zenModeEnabled,
-                })}
-              >
-                {actionManager.renderAction("eraser", { size: "small" })}
-              </div>
            </Section>
          </Stack.Col>
        </div>
@@ -443,8 +719,7 @@ const LayerUI = ({
          className={clsx(
            "layer-ui__wrapper__footer-center zen-mode-transition",
            {
-              "layer-ui__wrapper__footer-left--transition-bottom":
-                zenModeEnabled,
+              "layer-ui__wrapper__footer-left--transition-bottom": zenModeEnabled,
            },
          )}
        >
@@ -516,7 +791,6 @@ const LayerUI = ({
        setAppState={setAppState}
        onCollabButtonClick={onCollabButtonClick}
        onLockToggle={onLockToggle}
-        onPenModeToggle={onPenModeToggle}
        canvas={canvas}
        isCollaborating={isCollaborating}
        renderCustomFooter={renderCustomFooter}
@@ -571,7 +845,6 @@ const areEqual = (prev: LayerUIProps, next: LayerUIProps) => {
    prev.renderCustomFooter === next.renderCustomFooter &&
    prev.langCode === next.langCode &&
    prev.elements === next.elements &&
-    prev.files === next.files &&
    keys.every((key) => prevAppState[key] === nextAppState[key])
  );
 };
--- a/src/components/LibraryButton.tsx
+++ b/src/components/LibraryButton.tsx
@@ -16,18 +16,18 @@ const LIBRARY_ICON = (
 export const LibraryButton: React.FC<{
  appState: AppState;
  setAppState: React.Component<any, AppState>["setState"];
-  isMobile?: boolean;
-}> = ({ appState, setAppState, isMobile }) => {
+}> = ({ appState, setAppState }) => {
  return (
    <label
      className={clsx(
-        "ToolIcon ToolIcon_type_floating ToolIcon__library",
+        "ToolIcon ToolIcon_type_floating ToolIcon__library zen-mode-visibility",
        `ToolIcon_size_medium`,
        {
-          "is-mobile": isMobile,
+          "zen-mode-visibility--hidden": appState.zenModeEnabled,
        },
      )}
      title={`${capitalizeString(t("toolBar.library"))} — 0`}
+      style={{ marginInlineStart: "var(--space-factor)" }}
    >
      <input
        className="ToolIcon_type_checkbox"
--- a/src/components/LibraryMenu.scss
+++ b/src/components/LibraryMenu.scss
@@ -1,55 +0,0 @@
-@import "open-color/open-color";
-
-.excalidraw {
-  .layer-ui__library {
-    margin: auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .layer-ui__library-header {
-      display: flex;
-      align-items: center;
-      width: 100%;
-      margin: 2px 0;
-
-      button {
-        // 2px from the left to account for focus border of left-most button
-        margin: 0 2px;
-      }
-
-      a {
-        margin-inline-start: auto;
-        // 17px for scrollbar (needed for overlay scrollbars on Big Sur?) + 1px extra
-        padding-inline-end: 18px;
-        white-space: nowrap;
-      }
-    }
-  }
-
-  .layer-ui__library-message {
-    padding: 10px 20px;
-    max-width: 200px;
-  }
-
-  .publish-library-success {
-    .Dialog__content {
-      display: flex;
-      flex-direction: column;
-    }
-
-    &-close.ToolIcon_type_button {
-      background-color: $oc-blue-6;
-      align-self: flex-end;
-      &:hover {
-        background-color: $oc-blue-8;
-      }
-      .ToolIcon__icon {
-        width: auto;
-        font-size: 1rem;
-        color: $oc-white;
-        padding: 0 0.5rem;
-      }
-    }
-  }
-}
--- a/src/components/LibraryMenu.tsx
+++ b/src/components/LibraryMenu.tsx
@@ -1,326 +0,0 @@
-import { useRef, useState, useEffect, useCallback, RefObject } from "react";
-import Library from "../data/library";
-import { t } from "../i18n";
-import { randomId } from "../random";
-import {
-  LibraryItems,
-  LibraryItem,
-  AppState,
-  BinaryFiles,
-  ExcalidrawProps,
-} from "../types";
-import { Dialog } from "./Dialog";
-import { Island } from "./Island";
-import PublishLibrary from "./PublishLibrary";
-import { ToolButton } from "./ToolButton";
-
-import "./LibraryMenu.scss";
-import LibraryMenuItems from "./LibraryMenuItems";
-import { EVENT } from "../constants";
-import { KEYS } from "../keys";
-import { arrayToMap } from "../utils";
-
-const useOnClickOutside = (
-  ref: RefObject<HTMLElement>,
-  cb: (event: MouseEvent) => void,
-) => {
-  useEffect(() => {
-    const listener = (event: MouseEvent) => {
-      if (!ref.current) {
-        return;
-      }
-
-      if (
-        event.target instanceof Element &&
-        (ref.current.contains(event.target) ||
-          !document.body.contains(event.target))
-      ) {
-        return;
-      }
-
-      cb(event);
-    };
-    document.addEventListener("pointerdown", listener, false);
-
-    return () => {
-      document.removeEventListener("pointerdown", listener);
-    };
-  }, [ref, cb]);
-};
-
-const getSelectedItems = (
-  libraryItems: LibraryItems,
-  selectedItems: LibraryItem["id"][],
-) => libraryItems.filter((item) => selectedItems.includes(item.id));
-
-export const LibraryMenu = ({
-  onClose,
-  onInsertShape,
-  pendingElements,
-  onAddToLibrary,
-  theme,
-  setAppState,
-  files,
-  libraryReturnUrl,
-  focusContainer,
-  library,
-  id,
-  appState,
-}: {
-  pendingElements: LibraryItem["elements"];
-  onClose: () => void;
-  onInsertShape: (elements: LibraryItem["elements"]) => void;
-  onAddToLibrary: () => void;
-  theme: AppState["theme"];
-  files: BinaryFiles;
-  setAppState: React.Component<any, AppState>["setState"];
-  libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
-  focusContainer: () => void;
-  library: Library;
-  id: string;
-  appState: AppState;
-}) => {
-  const ref = useRef<HTMLDivElement | null>(null);
-
-  useOnClickOutside(ref, (event) => {
-    // If click on the library icon, do nothing.
-    if ((event.target as Element).closest(".ToolIcon__library")) {
-      return;
-    }
-    onClose();
-  });
-
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === KEYS.ESCAPE) {
-        onClose();
-      }
-    };
-    document.addEventListener(EVENT.KEYDOWN, handleKeyDown);
-    return () => {
-      document.removeEventListener(EVENT.KEYDOWN, handleKeyDown);
-    };
-  }, [onClose]);
-
-  const [libraryItems, setLibraryItems] = useState<LibraryItems>([]);
-
-  const [loadingState, setIsLoading] = useState<
-    "preloading" | "loading" | "ready"
-  >("preloading");
-  const [selectedItems, setSelectedItems] = useState<LibraryItem["id"][]>([]);
-  const [showPublishLibraryDialog, setShowPublishLibraryDialog] =
-    useState(false);
-  const [publishLibSuccess, setPublishLibSuccess] = useState<null | {
-    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 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 resetLibrary = useCallback(() => {
-    library.resetLibrary();
-    setLibraryItems([]);
-    focusContainer();
-  }, [library, focusContainer]);
-
-  const addToLibrary = useCallback(
-    async (elements: LibraryItem["elements"]) => {
-      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",
-          elements,
-          id: randomId(),
-          created: Date.now(),
-        },
-        ...items,
-      ];
-      onAddToLibrary();
-      library.saveLibrary(nextItems).catch((error) => {
-        setLibraryItems(items);
-        setAppState({ errorMessage: t("alerts.errorAddingToLibrary") });
-      });
-      setLibraryItems(nextItems);
-    },
-    [onAddToLibrary, library, setAppState],
-  );
-
-  const renderPublishSuccess = useCallback(() => {
-    return (
-      <Dialog
-        onCloseRequest={() => setPublishLibSuccess(null)}
-        title={t("publishSuccessDialog.title")}
-        className="publish-library-success"
-        small={true}
-      >
-        <p>
-          {t("publishSuccessDialog.content", {
-            authorName: publishLibSuccess!.authorName,
-          })}{" "}
-          <a
-            href={publishLibSuccess?.url}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            {t("publishSuccessDialog.link")}
-          </a>
-        </p>
-        <ToolButton
-          type="button"
-          title={t("buttons.close")}
-          aria-label={t("buttons.close")}
-          label={t("buttons.close")}
-          onClick={() => setPublishLibSuccess(null)}
-          data-testid="publish-library-success-close"
-          className="publish-library-success-close"
-        />
-      </Dialog>
-    );
-  }, [setPublishLibSuccess, publishLibSuccess]);
-
-  const onPublishLibSuccess = useCallback(
-    (data) => {
-      setShowPublishLibraryDialog(false);
-      setPublishLibSuccess({ url: data.url, authorName: data.authorName });
-      const nextLibItems = libraryItems.slice();
-      nextLibItems.forEach((libItem) => {
-        if (selectedItems.includes(libItem.id)) {
-          libItem.status = "published";
-        }
-      });
-      library.saveLibrary(nextLibItems);
-      setLibraryItems(nextLibItems);
-    },
-    [
-      setShowPublishLibraryDialog,
-      setPublishLibSuccess,
-      libraryItems,
-      selectedItems,
-      library,
-    ],
-  );
-
-  const [lastSelectedItem, setLastSelectedItem] = useState<
-    LibraryItem["id"] | null
-  >(null);
-
-  return loadingState === "preloading" ? null : (
-    <Island padding={1} ref={ref} className="layer-ui__library">
-      {showPublishLibraryDialog && (
-        <PublishLibrary
-          onClose={() => setShowPublishLibraryDialog(false)}
-          libraryItems={getSelectedItems(libraryItems, selectedItems)}
-          appState={appState}
-          onSuccess={onPublishLibSuccess}
-          onError={(error) => window.alert(error)}
-          updateItemsInStorage={() => library.saveLibrary(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>
-  );
-};
--- a/src/components/LibraryMenuItems.scss
+++ b/src/components/LibraryMenuItems.scss
@@ -1,102 +0,0 @@
-@import "open-color/open-color";
-
-.excalidraw {
-  .library-menu-items-container {
-    .library-actions {
-      display: flex;
-
-      button .library-actions-counter {
-        position: absolute;
-        right: 2px;
-        bottom: 2px;
-        border-radius: 50%;
-        width: 1em;
-        height: 1em;
-        padding: 1px;
-        font-size: 0.7rem;
-        background: #fff;
-      }
-
-      &--remove {
-        background-color: $oc-red-7;
-        &:hover {
-          background-color: $oc-red-8;
-        }
-        &:active {
-          background-color: $oc-red-9;
-        }
-        svg {
-          color: $oc-white;
-        }
-        .library-actions-counter {
-          color: $oc-red-7;
-        }
-      }
-
-      &--export {
-        background-color: $oc-lime-5;
-
-        &:hover {
-          background-color: $oc-lime-7;
-        }
-
-        &:active {
-          background-color: $oc-lime-8;
-        }
-        svg {
-          color: $oc-white;
-        }
-        .library-actions-counter {
-          color: $oc-lime-5;
-        }
-      }
-
-      &--publish {
-        background-color: $oc-cyan-6;
-        &:hover {
-          background-color: $oc-cyan-7;
-        }
-        &:active {
-          background-color: $oc-cyan-9;
-        }
-        svg {
-          color: $oc-white;
-        }
-        label {
-          margin-left: -0.2em;
-          margin-right: 1.1em;
-          color: $oc-white;
-          font-size: 0.86em;
-        }
-        .library-actions-counter {
-          color: $oc-cyan-6;
-        }
-      }
-
-      &--load {
-        background-color: $oc-blue-6;
-        &:hover {
-          background-color: $oc-blue-7;
-        }
-        &:active {
-          background-color: $oc-blue-9;
-        }
-        svg {
-          color: $oc-white;
-        }
-      }
-    }
-    &__items {
-      max-height: 50vh;
-      overflow: auto;
-      margin-top: 0.5rem;
-    }
-
-    .separator {
-      font-weight: 500;
-      font-size: 0.9rem;
-      margin: 0.6em 0.2em;
-      color: var(--text-primary-color);
-    }
-  }
-}
--- a/src/components/LibraryMenuItems.tsx
+++ b/src/components/LibraryMenuItems.tsx
@@ -1,323 +0,0 @@
-import { chunk } from "lodash";
-import { useCallback, useState } from "react";
-import { importLibraryFromJSON, saveLibraryAsJSON } from "../data/json";
-import Library from "../data/library";
-import { ExcalidrawElement, NonDeleted } from "../element/types";
-import { t } from "../i18n";
-import {
-  AppState,
-  BinaryFiles,
-  ExcalidrawProps,
-  LibraryItem,
-  LibraryItems,
-} from "../types";
-import { muteFSAbortError } from "../utils";
-import { useIsMobile } from "./App";
-import ConfirmDialog from "./ConfirmDialog";
-import { 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";
-
-const LibraryMenuItems = ({
-  libraryItems,
-  onRemoveFromLibrary,
-  onAddToLibrary,
-  onInsertShape,
-  pendingElements,
-  theme,
-  setAppState,
-  libraryReturnUrl,
-  library,
-  files,
-  id,
-  selectedItems,
-  onToggle,
-  onPublish,
-  resetLibrary,
-}: {
-  libraryItems: LibraryItems;
-  pendingElements: LibraryItem["elements"];
-  onRemoveFromLibrary: () => void;
-  onInsertShape: (elements: LibraryItem["elements"]) => void;
-  onAddToLibrary: (elements: LibraryItem["elements"]) => void;
-  theme: AppState["theme"];
-  files: BinaryFiles;
-  setAppState: React.Component<any, AppState>["setState"];
-  libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
-  library: Library;
-  id: string;
-  selectedItems: LibraryItem["id"][];
-  onToggle: (id: LibraryItem["id"], event: React.MouseEvent) => void;
-  onPublish: () => void;
-  resetLibrary: () => void;
-}) => {
-  const renderRemoveLibAlert = useCallback(() => {
-    const content = selectedItems.length
-      ? t("alerts.removeItemsFromsLibrary", { count: selectedItems.length })
-      : t("alerts.resetLibrary");
-    const title = selectedItems.length
-      ? t("confirmDialog.removeItemsFromLib")
-      : t("confirmDialog.resetLibrary");
-    return (
-      <ConfirmDialog
-        onConfirm={() => {
-          if (selectedItems.length) {
-            onRemoveFromLibrary();
-          } else {
-            resetLibrary();
-          }
-          setShowRemoveLibAlert(false);
-        }}
-        onCancel={() => {
-          setShowRemoveLibAlert(false);
-        }}
-        title={title}
-      >
-        <p>{content}</p>
-      </ConfirmDialog>
-    );
-  }, [selectedItems, onRemoveFromLibrary, resetLibrary]);
-
-  const [showRemoveLibAlert, setShowRemoveLibAlert] = useState(false);
-
-  const isMobile = useIsMobile();
-
-  const renderLibraryActions = () => {
-    const itemsSelected = !!selectedItems.length;
-    const items = itemsSelected
-      ? libraryItems.filter((item) => selectedItems.includes(item.id))
-      : libraryItems;
-    const resetLabel = itemsSelected
-      ? t("buttons.remove")
-      : t("buttons.resetLibrary");
-    return (
-      <div className="library-actions">
-        {(!itemsSelected || !isMobile) && (
-          <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 });
-                });
-            }}
-            className="library-actions--load"
-          />
-        )}
-        {!!items.length && (
-          <>
-            <ToolButton
-              key="export"
-              type="button"
-              title={t("buttons.export")}
-              aria-label={t("buttons.export")}
-              icon={exportToFileIcon}
-              onClick={async () => {
-                const libraryItems = itemsSelected
-                  ? items
-                  : await library.loadLibrary();
-                saveLibraryAsJSON(libraryItems)
-                  .catch(muteFSAbortError)
-                  .catch((error) => {
-                    setAppState({ errorMessage: error.message });
-                  });
-              }}
-              className="library-actions--export"
-            >
-              {selectedItems.length > 0 && (
-                <span className="library-actions-counter">
-                  {selectedItems.length}
-                </span>
-              )}
-            </ToolButton>
-            <ToolButton
-              key="reset"
-              type="button"
-              title={resetLabel}
-              aria-label={resetLabel}
-              icon={trash}
-              onClick={() => setShowRemoveLibAlert(true)}
-              className="library-actions--remove"
-            >
-              {selectedItems.length > 0 && (
-                <span className="library-actions-counter">
-                  {selectedItems.length}
-                </span>
-              )}
-            </ToolButton>
-          </>
-        )}
-        {itemsSelected && !isPublished && (
-          <Tooltip label={t("hints.publishLibrary")}>
-            <ToolButton
-              type="button"
-              aria-label={t("buttons.publishLibrary")}
-              label={t("buttons.publishLibrary")}
-              icon={publishIcon}
-              className="library-actions--publish"
-              onClick={onPublish}
-            >
-              {!isMobile && <label>{t("buttons.publishLibrary")}</label>}
-              {selectedItems.length > 0 && (
-                <span className="library-actions-counter">
-                  {selectedItems.length}
-                </span>
-              )}
-            </ToolButton>
-          </Tooltip>
-        )}
-      </div>
-    );
-  };
-
-  const CELLS_PER_ROW = isMobile ? 4 : 6;
-
-  const referrer =
-    libraryReturnUrl || window.location.origin + window.location.pathname;
-  const isPublished = selectedItems.some(
-    (id) => libraryItems.find((item) => item.id === id)?.status === "published",
-  );
-
-  const createLibraryItemCompo = (params: {
-    item:
-      | LibraryItem
-      | /* pending library item */ {
-          id: null;
-          elements: readonly NonDeleted<ExcalidrawElement>[];
-        }
-      | null;
-    onClick?: () => void;
-    key: string;
-  }) => {
-    return (
-      <Stack.Col key={params.key}>
-        <LibraryUnit
-          elements={params.item?.elements}
-          files={files}
-          isPending={!params.item?.id && !!params.item?.elements}
-          onClick={params.onClick || (() => {})}
-          id={params.item?.id || null}
-          selected={!!params.item?.id && selectedItems.includes(params.item.id)}
-          onToggle={(id, event) => {
-            onToggle(id, event);
-          }}
-        />
-      </Stack.Col>
-    );
-  };
-
-  const renderLibrarySection = (
-    items: (
-      | LibraryItem
-      | /* pending library item */ {
-          id: null;
-          elements: readonly NonDeleted<ExcalidrawElement>[];
-        }
-    )[],
-  ) => {
-    const _items = items.map((item) => {
-      if (item.id) {
-        return createLibraryItemCompo({
-          item,
-          onClick: () => onInsertShape(item.elements),
-          key: item.id,
-        });
-      }
-      return createLibraryItemCompo({
-        key: "__pending__item__",
-        item,
-        onClick: () => onAddToLibrary(pendingElements),
-      });
-    });
-
-    // ensure we render all empty cells if no items are present
-    let rows = chunk(_items, CELLS_PER_ROW);
-    if (!rows.length) {
-      rows = [[]];
-    }
-
-    return rows.map((rowItems, index, rows) => {
-      if (index === rows.length - 1) {
-        // pad row with empty cells
-        rowItems = rowItems.concat(
-          new Array(CELLS_PER_ROW - rowItems.length)
-            .fill(null)
-            .map((_, index) => {
-              return createLibraryItemCompo({
-                key: `empty_${index}`,
-                item: null,
-              });
-            }),
-        );
-      }
-      return (
-        <Stack.Row align="center" gap={1} key={index}>
-          {rowItems}
-        </Stack.Row>
-      );
-    });
-  };
-
-  const 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>
-      <Stack.Col
-        className="library-menu-items-container__items"
-        align="start"
-        gap={1}
-      >
-        <>
-          <div className="separator">{t("labels.personalLib")}</div>
-          {renderLibrarySection(unpublishedItems)}
-        </>
-
-        <>
-          <div className="separator">{t("labels.excalidrawLib")} </div>
-
-          {renderLibrarySection(publishedItems)}
-        </>
-      </Stack.Col>
-    </div>
-  );
-};
-
-export default LibraryMenuItems;
--- a/src/components/LibraryUnit.scss
+++ b/src/components/LibraryUnit.scss
@@ -1,5 +1,3 @@
-@import "../css/variables.module";
-
 .excalidraw {
  .library-unit {
    align-items: center;
@@ -9,26 +7,10 @@
    position: relative;
    width: 63px;
    height: 63px; // match width
-
-    &--hover {
-      box-shadow: inset 0px 0px 0px 2px $oc-blue-5;
-      border-color: $oc-blue-5;
-    }
-
-    &--selected {
-      box-shadow: inset 0px 0px 0px 2px $oc-blue-8;
-      border-color: $oc-blue-8;
-    }
-  }
-
-  &.theme--dark .library-unit {
-    border-color: rgb(48, 48, 48);
  }

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

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

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

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

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

  .library-unit__active {
    cursor: pointer;
  }

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

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

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

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

 export const LibraryUnit = ({
-  id,
  elements,
  files,
-  isPending,
+  pendingElements,
+  onRemoveFromLibrary,
  onClick,
-  selected,
-  onToggle,
 }: {
-  id: LibraryItem["id"] | /** for pending item */ null;
-  elements?: LibraryItem["elements"];
+  elements?: LibraryItem;
  files: BinaryFiles;
-  isPending?: boolean;
+  pendingElements?: LibraryItem;
+  onRemoveFromLibrary: () => void;
  onClick: () => void;
-  selected: boolean;
-  onToggle: (id: string, event: React.MouseEvent) => void;
 }) => {
  const ref = useRef<HTMLDivElement | null>(null);
  useEffect(() => {
@@ -46,11 +40,12 @@ export const LibraryUnit = ({
    }

    (async () => {
-      if (!elements) {
+      const elementsToRender = elements || pendingElements;
+      if (!elementsToRender) {
        return;
      }
      const svg = await exportToSvg(
-        elements,
+        elementsToRender,
        {
          exportBackground: false,
          viewBackgroundColor: oc.white,
@@ -63,41 +58,30 @@ export const LibraryUnit = ({
    return () => {
      node.innerHTML = "";
    };
-  }, [elements, files]);
+  }, [elements, pendingElements, files]);

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

  return (
    <div
      className={clsx("library-unit", {
-        "library-unit__active": elements,
-        "library-unit--hover": elements && isHovered,
-        "library-unit--selected": selected,
+        "library-unit__active": elements || pendingElements,
      })}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <div
        className={clsx("library-unit__dragger", {
-          "library-unit__pulse": !!isPending,
+          "library-unit__pulse": !!pendingElements,
        })}
        ref={ref}
        draggable={!!elements}
-        onClick={
-          !!elements || !!isPending
-            ? (event) => {
-                if (id && event.shiftKey) {
-                  onToggle(id, event);
-                } else {
-                  onClick();
-                }
-              }
-            : undefined
-        }
+        onClick={!!elements || !!pendingElements ? onClick : undefined}
        onDragStart={(event) => {
          setIsHovered(false);
          event.dataTransfer.setData(
@@ -107,12 +91,14 @@ export const LibraryUnit = ({
        }}
      />
      {adder}
-      {id && elements && (isHovered || isMobile || selected) && (
-        <CheckboxItem
-          checked={selected}
-          onChange={(checked, event) => onToggle(id, event)}
-          className="library-unit__checkbox"
-        />
+      {elements && (isHovered || isMobile) && (
+        <button
+          className="library-unit__removeFromLibrary"
+          aria-label={t("labels.removeFromLibrary")}
+          onClick={onRemoveFromLibrary}
+        >
+          {close}
+        </button>
      )}
    </div>
  );
--- a/src/components/LockButton.tsx
+++ b/src/components/LockButton.tsx
@@ -10,7 +10,6 @@ type LockIconProps = {
  checked: boolean;
  onChange?(): void;
  zenModeEnabled?: boolean;
-  isMobile?: boolean;
 };

 const DEFAULT_SIZE: ToolButtonSize = "medium";
@@ -43,10 +42,10 @@ export const LockButton = (props: LockIconProps) => {
  return (
    <label
      className={clsx(
-        "ToolIcon ToolIcon__lock ToolIcon_type_floating",
+        "ToolIcon ToolIcon__lock ToolIcon_type_floating zen-mode-visibility",
        `ToolIcon_size_${DEFAULT_SIZE}`,
        {
-          "is-mobile": props.isMobile,
+          "zen-mode-visibility--hidden": props.zenModeEnabled,
        },
      )}
      title={`${props.title} — Q`}
--- a/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, getSelectedElements } from "../scene";
+import { calculateScrollCenter } from "../scene";
 import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
 import { Section } from "./Section";
 import CollabButton from "./CollabButton";
@@ -17,7 +17,6 @@ import { LockButton } from "./LockButton";
 import { UserList } from "./UserList";
 import { BackgroundPickerAndDarkModeToggle } from "./BackgroundPickerAndDarkModeToggle";
 import { LibraryButton } from "./LibraryButton";
-import { PenModeButton } from "./PenModeButton";

 type MobileMenuProps = {
  appState: AppState;
@@ -29,7 +28,6 @@ type MobileMenuProps = {
  libraryMenu: JSX.Element | null;
  onCollabButtonClick?: () => void;
  onLockToggle: () => void;
-  onPenModeToggle: () => void;
  canvas: HTMLCanvasElement | null;
  isCollaborating: boolean;
  renderCustomFooter?: (isMobile: boolean, appState: AppState) => JSX.Element;
@@ -52,7 +50,6 @@ export const MobileMenu = ({
  setAppState,
  onCollabButtonClick,
  onLockToggle,
-  onPenModeToggle,
  canvas,
  isCollaborating,
  renderCustomFooter,
@@ -67,8 +64,8 @@ export const MobileMenu = ({
        <Section heading="shapes">
          {(heading) => (
            <Stack.Col gap={4} align="center">
-              <Stack.Row gap={1} className="App-toolbar-container">
-                <Island padding={1} className="App-toolbar">
+              <Stack.Row gap={1}>
+                <Island padding={1}>
                  {heading}
                  <Stack.Row gap={1}>
                    <ShapesSwitcher
@@ -88,37 +85,19 @@ export const MobileMenu = ({
                  checked={appState.elementLocked}
                  onChange={onLockToggle}
                  title={t("toolBar.lock")}
-                  isMobile
-                />
-                <LibraryButton
-                  appState={appState}
-                  setAppState={setAppState}
-                  isMobile
-                />
-                <PenModeButton
-                  checked={appState.penMode}
-                  onChange={onPenModeToggle}
-                  title={t("toolBar.penMode")}
-                  isMobile
-                  penDetected={appState.penDetected}
                />
+                <LibraryButton appState={appState} setAppState={setAppState} />
              </Stack.Row>
              {libraryMenu}
            </Stack.Col>
          )}
        </Section>
-        <HintViewer appState={appState} elements={elements} isMobile={true} />
+        <HintViewer appState={appState} elements={elements} />
      </FixedSideContainer>
    );
  };

  const renderAppToolbar = () => {
-    // Render eraser conditionally in mobile
-    const showEraser =
-      !appState.viewModeEnabled &&
-      !appState.editingElement &&
-      getSelectedElements(elements, appState).length === 0;
-
    if (viewModeEnabled) {
      return (
        <div className="App-toolbar-content">
@@ -126,16 +105,12 @@ export const MobileMenu = ({
        </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",
        )}
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -15,9 +15,8 @@ export const Modal = (props: {
  onCloseRequest(): void;
  labelledBy: string;
  theme?: AppState["theme"];
-  closeOnClickOutside?: boolean;
 }) => {
-  const { theme = THEME.LIGHT, closeOnClickOutside = true } = props;
+  const { theme = THEME.LIGHT } = props;
  const modalRoot = useBodyRoot(theme);

  if (!modalRoot) {
@@ -40,10 +39,7 @@ export const Modal = (props: {
      onKeyDown={handleKeydown}
      aria-labelledby={props.labelledBy}
    >
-      <div
-        className="Modal__background"
-        onClick={closeOnClickOutside ? props.onCloseRequest : undefined}
-      ></div>
+      <div className="Modal__background" onClick={props.onCloseRequest}></div>
      <div
        className="Modal__content"
        style={{ "--max-width": `${props.maxWidth}px` }}
--- a/src/components/PasteChartDialog.tsx
+++ b/src/components/PasteChartDialog.tsx
@@ -82,7 +82,7 @@ export const PasteChartDialog = ({
  appState: AppState;
  onClose: () => void;
  setAppState: React.Component<any, AppState>["setState"];
-  onInsertChart: (elements: LibraryItem["elements"]) => void;
+  onInsertChart: (elements: LibraryItem) => void;
 }) => {
  const handleClose = React.useCallback(() => {
    if (onClose) {
--- a/src/components/PenModeButton.tsx
+++ b/src/components/PenModeButton.tsx
@@ -1,91 +0,0 @@
-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.tsx
+++ b/src/components/Popover.tsx
@@ -8,10 +8,6 @@ type Props = {
  children?: React.ReactNode;
  onCloseRequest?(event: PointerEvent): void;
  fitInViewport?: boolean;
-  offsetLeft?: number;
-  offsetTop?: number;
-  viewportWidth?: number;
-  viewportHeight?: number;
 };

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

@@ -32,14 +24,17 @@ export const Popover = ({
    if (fitInViewport && popoverRef.current) {
      const element = popoverRef.current;
      const { x, y, width, height } = element.getBoundingClientRect();
-      if (x + width - offsetLeft > viewportWidth) {
+
+      const viewportWidth = window.innerWidth;
+      if (x + width > viewportWidth) {
        element.style.left = `${viewportWidth - width}px`;
      }
-      if (y + height - offsetTop > viewportHeight) {
+      const viewportHeight = window.innerHeight;
+      if (y + height > viewportHeight) {
        element.style.top = `${viewportHeight - height}px`;
      }
    }
-  }, [fitInViewport, viewportWidth, viewportHeight, offsetLeft, offsetTop]);
+  }, [fitInViewport]);

  useEffect(() => {
    if (onCloseRequest) {
--- a/src/components/ProjectName.tsx
+++ b/src/components/ProjectName.tsx
@@ -42,7 +42,6 @@ export const ProjectName = (props: Props) => {
      </label>
      {props.isNameEditable ? (
        <input
-          type="text"
          className="TextInput"
          onBlur={handleBlur}
          onKeyDown={handleKeyDown}
--- a/src/components/PublishLibrary.scss
+++ b/src/components/PublishLibrary.scss
@@ -1,92 +0,0 @@
-@import "../css/variables.module";
-
-.excalidraw {
-  .publish-library {
-    &__fields {
-      display: flex;
-      flex-direction: column;
-
-      label {
-        padding: 1em;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        span {
-          font-weight: 500;
-          font-size: 1rem;
-          color: $oc-gray-6;
-        }
-        input,
-        textarea {
-          width: 70%;
-          padding: 0.6em;
-          font-family: var(--ui-font);
-        }
-
-        .required {
-          color: $oc-red-8;
-          margin: 0.2rem;
-        }
-      }
-    }
-
-    &__buttons {
-      display: flex;
-      padding: 0.2rem 0;
-      justify-content: flex-end;
-
-      .ToolIcon__icon {
-        min-width: 2.5rem;
-        width: auto;
-        font-size: 1rem;
-      }
-
-      .ToolIcon_type_button {
-        margin-left: 1rem;
-        padding: 0 0.5rem;
-      }
-
-      &--confirm.ToolIcon_type_button {
-        background-color: $oc-blue-6;
-
-        &:hover {
-          background-color: $oc-blue-8;
-        }
-      }
-
-      &--cancel.ToolIcon_type_button {
-        background-color: $oc-gray-5;
-        &:hover {
-          background-color: $oc-gray-6;
-        }
-      }
-
-      .ToolIcon__icon {
-        color: $oc-white;
-        .Spinner {
-          --spinner-color: #fff;
-          svg {
-            padding: 0.5rem;
-          }
-        }
-      }
-    }
-
-    .selected-library-items {
-      display: flex;
-      padding: 0 0.8rem;
-      flex-wrap: wrap;
-
-      .single-library-item-wrapper {
-        width: 9rem;
-      }
-    }
-
-    &-note {
-      padding: 1em;
-      font-style: italic;
-      font-size: 14px;
-      display: block;
-    }
-  }
-}
--- a/src/components/PublishLibrary.tsx
+++ b/src/components/PublishLibrary.tsx
@@ -1,455 +0,0 @@
-import { ReactNode, useCallback, useEffect, useState } from "react";
-import OpenColor from "open-color";
-
-import { Dialog } from "./Dialog";
-import { t } from "../i18n";
-
-import { ToolButton } from "./ToolButton";
-
-import { AppState, LibraryItems, LibraryItem } from "../types";
-import { exportToCanvas } from "../packages/utils";
-import {
-  EXPORT_DATA_TYPES,
-  EXPORT_SOURCE,
-  MIME_TYPES,
-  VERSIONS,
-} from "../constants";
-import { ExportedLibraryData } from "../data/types";
-
-import "./PublishLibrary.scss";
-import SingleLibraryItem from "./SingleLibraryItem";
-import { canvasToBlob, resizeImageFile } from "../data/blob";
-import { chunk } from "../utils";
-
-interface PublishLibraryDataParams {
-  authorName: string;
-  githubHandle: string;
-  name: string;
-  description: string;
-  twitterHandle: string;
-  website: string;
-}
-
-const LOCAL_STORAGE_KEY_PUBLISH_LIBRARY = "publish-library-data";
-
-const savePublishLibDataToStorage = (data: PublishLibraryDataParams) => {
-  try {
-    localStorage.setItem(
-      LOCAL_STORAGE_KEY_PUBLISH_LIBRARY,
-      JSON.stringify(data),
-    );
-  } catch (error: any) {
-    // Unable to access window.localStorage
-    console.error(error);
-  }
-};
-
-const importPublishLibDataFromStorage = () => {
-  try {
-    const data = localStorage.getItem(LOCAL_STORAGE_KEY_PUBLISH_LIBRARY);
-    if (data) {
-      return JSON.parse(data);
-    }
-  } catch (error: any) {
-    // Unable to access localStorage
-    console.error(error);
-  }
-
-  return null;
-};
-
-const generatePreviewImage = async (libraryItems: LibraryItems) => {
-  const MAX_ITEMS_PER_ROW = 6;
-  const BOX_SIZE = 128;
-  const BOX_PADDING = Math.round(BOX_SIZE / 16);
-  const BORDER_WIDTH = Math.max(Math.round(BOX_SIZE / 64), 2);
-
-  const rows = chunk(libraryItems, MAX_ITEMS_PER_ROW);
-
-  const canvas = document.createElement("canvas");
-
-  canvas.width =
-    rows[0].length * BOX_SIZE +
-    (rows[0].length + 1) * (BOX_PADDING * 2) -
-    BOX_PADDING * 2;
-  canvas.height =
-    rows.length * BOX_SIZE +
-    (rows.length + 1) * (BOX_PADDING * 2) -
-    BOX_PADDING * 2;
-
-  const ctx = canvas.getContext("2d")!;
-
-  ctx.fillStyle = OpenColor.white;
-  ctx.fillRect(0, 0, canvas.width, canvas.height);
-
-  // draw items
-  // ---------------------------------------------------------------------------
-  for (const [index, item] of libraryItems.entries()) {
-    const itemCanvas = await exportToCanvas({
-      elements: item.elements,
-      files: null,
-      maxWidthOrHeight: BOX_SIZE,
-    });
-
-    const { width, height } = itemCanvas;
-
-    // draw item
-    // -------------------------------------------------------------------------
-    const rowOffset =
-      Math.floor(index / MAX_ITEMS_PER_ROW) * (BOX_SIZE + BOX_PADDING * 2);
-    const colOffset =
-      (index % MAX_ITEMS_PER_ROW) * (BOX_SIZE + BOX_PADDING * 2);
-
-    ctx.drawImage(
-      itemCanvas,
-      colOffset + (BOX_SIZE - width) / 2 + BOX_PADDING,
-      rowOffset + (BOX_SIZE - height) / 2 + BOX_PADDING,
-    );
-
-    // draw item border
-    // -------------------------------------------------------------------------
-    ctx.lineWidth = BORDER_WIDTH;
-    ctx.strokeStyle = OpenColor.gray[4];
-    ctx.strokeRect(
-      colOffset + BOX_PADDING / 2,
-      rowOffset + BOX_PADDING / 2,
-      BOX_SIZE + BOX_PADDING,
-      BOX_SIZE + BOX_PADDING,
-    );
-  }
-
-  return await resizeImageFile(
-    new File([await canvasToBlob(canvas)], "preview", { type: MIME_TYPES.png }),
-    {
-      outputType: MIME_TYPES.jpg,
-      maxWidthOrHeight: 5000,
-    },
-  );
-};
-
-const PublishLibrary = ({
-  onClose,
-  libraryItems,
-  appState,
-  onSuccess,
-  onError,
-  updateItemsInStorage,
-  onRemove,
-}: {
-  onClose: () => void;
-  libraryItems: LibraryItems;
-  appState: AppState;
-  onSuccess: (data: {
-    url: string;
-    authorName: string;
-    items: LibraryItems;
-  }) => void;
-
-  onError: (error: Error) => void;
-  updateItemsInStorage: (items: LibraryItems) => void;
-  onRemove: (id: string) => void;
-}) => {
-  const [libraryData, setLibraryData] = useState<PublishLibraryDataParams>({
-    authorName: "",
-    githubHandle: "",
-    name: "",
-    description: "",
-    twitterHandle: "",
-    website: "",
-  });
-
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  useEffect(() => {
-    const data = importPublishLibDataFromStorage();
-    if (data) {
-      setLibraryData(data);
-    }
-  }, []);
-
-  const [clonedLibItems, setClonedLibItems] = useState<LibraryItems>(
-    libraryItems.slice(),
-  );
-
-  useEffect(() => {
-    setClonedLibItems(libraryItems.slice());
-  }, [libraryItems]);
-
-  const onInputChange = (event: any) => {
-    setLibraryData({
-      ...libraryData,
-      [event.target.name]: event.target.value,
-    });
-  };
-
-  const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    setIsSubmitting(true);
-    const erroredLibItems: LibraryItem[] = [];
-    let isError = false;
-    clonedLibItems.forEach((libItem) => {
-      let error = "";
-      if (!libItem.name) {
-        error = t("publishDialog.errors.required");
-        isError = true;
-      }
-      erroredLibItems.push({ ...libItem, error });
-    });
-
-    if (isError) {
-      setClonedLibItems(erroredLibItems);
-      setIsSubmitting(false);
-      return;
-    }
-
-    const previewImage = await generatePreviewImage(clonedLibItems);
-
-    const libContent: ExportedLibraryData = {
-      type: EXPORT_DATA_TYPES.excalidrawLibrary,
-      version: VERSIONS.excalidrawLibrary,
-      source: EXPORT_SOURCE,
-      libraryItems: clonedLibItems,
-    };
-    const content = JSON.stringify(libContent, null, 2);
-    const lib = new Blob([content], { type: "application/json" });
-
-    const formData = new FormData();
-    formData.append("excalidrawLib", lib);
-    formData.append("previewImage", previewImage);
-    formData.append("previewImageType", previewImage.type);
-    formData.append("title", libraryData.name);
-    formData.append("authorName", libraryData.authorName);
-    formData.append("githubHandle", libraryData.githubHandle);
-    formData.append("name", libraryData.name);
-    formData.append("description", libraryData.description);
-    formData.append("twitterHandle", libraryData.twitterHandle);
-    formData.append("website", libraryData.website);
-
-    fetch(`${process.env.REACT_APP_LIBRARY_BACKEND}/submit`, {
-      method: "post",
-      body: formData,
-    })
-      .then(
-        (response) => {
-          if (response.ok) {
-            return response.json().then(({ url }) => {
-              // flush data from local storage
-              localStorage.removeItem(LOCAL_STORAGE_KEY_PUBLISH_LIBRARY);
-              onSuccess({
-                url,
-                authorName: libraryData.authorName,
-                items: clonedLibItems,
-              });
-            });
-          }
-          return response
-            .json()
-            .catch(() => {
-              throw new Error(response.statusText || "something went wrong");
-            })
-            .then((error) => {
-              throw new Error(
-                error.message || response.statusText || "something went wrong",
-              );
-            });
-        },
-        (err) => {
-          console.error(err);
-          onError(err);
-          setIsSubmitting(false);
-        },
-      )
-      .catch((err) => {
-        console.error(err);
-        onError(err);
-        setIsSubmitting(false);
-      });
-  };
-
-  const renderLibraryItems = () => {
-    const items: ReactNode[] = [];
-    clonedLibItems.forEach((libItem, index) => {
-      items.push(
-        <div className="single-library-item-wrapper" key={index}>
-          <SingleLibraryItem
-            libItem={libItem}
-            appState={appState}
-            index={index}
-            onChange={(val, index) => {
-              const items = clonedLibItems.slice();
-              items[index].name = val;
-              setClonedLibItems(items);
-            }}
-            onRemove={onRemove}
-          />
-        </div>,
-      );
-    });
-    return <div className="selected-library-items">{items}</div>;
-  };
-
-  const onDialogClose = useCallback(() => {
-    updateItemsInStorage(clonedLibItems);
-    savePublishLibDataToStorage(libraryData);
-    onClose();
-  }, [clonedLibItems, onClose, updateItemsInStorage, libraryData]);
-
-  const shouldRenderForm = !!libraryItems.length;
-  return (
-    <Dialog
-      onCloseRequest={onDialogClose}
-      title={t("publishDialog.title")}
-      className="publish-library"
-    >
-      {shouldRenderForm ? (
-        <form onSubmit={onSubmit}>
-          <div className="publish-library-note">
-            {t("publishDialog.noteDescription.pre")}
-            <a
-              href="https://libraries.excalidraw.com"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              {t("publishDialog.noteDescription.link")}
-            </a>{" "}
-            {t("publishDialog.noteDescription.post")}
-          </div>
-          <span className="publish-library-note">
-            {t("publishDialog.noteGuidelines.pre")}
-            <a
-              href="https://github.com/excalidraw/excalidraw-libraries#guidelines"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              {t("publishDialog.noteGuidelines.link")}
-            </a>
-            {t("publishDialog.noteGuidelines.post")}
-          </span>
-
-          <div className="publish-library-note">
-            {t("publishDialog.noteItems")}
-          </div>
-          {renderLibraryItems()}
-          <div className="publish-library__fields">
-            <label>
-              <div>
-                <span>{t("publishDialog.libraryName")}</span>
-                <span aria-hidden="true" className="required">
-                  *
-                </span>
-              </div>
-              <input
-                type="text"
-                name="name"
-                required
-                value={libraryData.name}
-                onChange={onInputChange}
-                placeholder={t("publishDialog.placeholder.libraryName")}
-              />
-            </label>
-            <label style={{ alignItems: "flex-start" }}>
-              <div>
-                <span>{t("publishDialog.libraryDesc")}</span>
-                <span aria-hidden="true" className="required">
-                  *
-                </span>
-              </div>
-              <textarea
-                name="description"
-                rows={4}
-                required
-                value={libraryData.description}
-                onChange={onInputChange}
-                placeholder={t("publishDialog.placeholder.libraryDesc")}
-              />
-            </label>
-            <label>
-              <div>
-                <span>{t("publishDialog.authorName")}</span>
-                <span aria-hidden="true" className="required">
-                  *
-                </span>
-              </div>
-              <input
-                type="text"
-                name="authorName"
-                required
-                value={libraryData.authorName}
-                onChange={onInputChange}
-                placeholder={t("publishDialog.placeholder.authorName")}
-              />
-            </label>
-            <label>
-              <span>{t("publishDialog.githubUsername")}</span>
-              <input
-                type="text"
-                name="githubHandle"
-                value={libraryData.githubHandle}
-                onChange={onInputChange}
-                placeholder={t("publishDialog.placeholder.githubHandle")}
-              />
-            </label>
-            <label>
-              <span>{t("publishDialog.twitterUsername")}</span>
-              <input
-                type="text"
-                name="twitterHandle"
-                value={libraryData.twitterHandle}
-                onChange={onInputChange}
-                placeholder={t("publishDialog.placeholder.twitterHandle")}
-              />
-            </label>
-            <label>
-              <span>{t("publishDialog.website")}</span>
-              <input
-                type="text"
-                name="website"
-                pattern="https?://.+"
-                title={t("publishDialog.errors.website")}
-                value={libraryData.website}
-                onChange={onInputChange}
-                placeholder={t("publishDialog.placeholder.website")}
-              />
-            </label>
-            <span className="publish-library-note">
-              {t("publishDialog.noteLicense.pre")}
-              <a
-                href="https://github.com/excalidraw/excalidraw-libraries/blob/main/LICENSE"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                {t("publishDialog.noteLicense.link")}
-              </a>
-              {t("publishDialog.noteLicense.post")}
-            </span>
-          </div>
-          <div className="publish-library__buttons">
-            <ToolButton
-              type="button"
-              title={t("buttons.cancel")}
-              aria-label={t("buttons.cancel")}
-              label={t("buttons.cancel")}
-              onClick={onDialogClose}
-              data-testid="cancel-clear-canvas-button"
-              className="publish-library__buttons--cancel"
-            />
-            <ToolButton
-              type="submit"
-              title={t("buttons.submit")}
-              aria-label={t("buttons.submit")}
-              label={t("buttons.submit")}
-              className="publish-library__buttons--confirm"
-              isLoading={isSubmitting}
-            />
-          </div>
-        </form>
-      ) : (
-        <p style={{ padding: "1em", textAlign: "center", fontWeight: 500 }}>
-          {t("publishDialog.atleastOneLibItem")}
-        </p>
-      )}
-    </Dialog>
-  );
-};
-
-export default PublishLibrary;
--- a/src/components/SingleLibraryItem.scss
+++ b/src/components/SingleLibraryItem.scss
@@ -1,66 +0,0 @@
-@import "../css/variables.module";
-
-.excalidraw {
-  .single-library-item {
-    position: relative;
-    &__svg {
-      width: 7.5rem;
-      height: 7.5rem;
-      border: 1px solid var(--button-gray-2);
-      margin: 0.3rem;
-      svg {
-        width: 100%;
-        height: 100%;
-      }
-    }
-
-    .ToolIcon__icon {
-      background-color: $oc-white;
-      width: auto;
-      height: auto;
-      margin: 0 0.5rem;
-    }
-    .ToolIcon,
-    .ToolIcon_type_button:hover {
-      background-color: white;
-    }
-    .required,
-    .error {
-      color: $oc-red-8;
-      font-weight: bold;
-      font-size: 1rem;
-      margin: 0.2rem;
-    }
-    .error {
-      font-weight: 500;
-      margin: 0;
-      padding: 0.3em 0;
-    }
-
-    &--remove {
-      position: absolute;
-      top: 0.2rem;
-      right: 1.3rem;
-
-      .ToolIcon__icon {
-        margin: 0;
-      }
-      .ToolIcon__icon {
-        background-color: $oc-red-6;
-        &:hover {
-          background-color: $oc-red-7;
-        }
-        &:active {
-          background-color: $oc-red-8;
-        }
-      }
-      svg {
-        color: $oc-white;
-        padding: 0.26rem;
-        border-radius: 0.3em;
-        width: 1rem;
-        height: 1rem;
-      }
-    }
-  }
-}
--- a/src/components/SingleLibraryItem.tsx
+++ b/src/components/SingleLibraryItem.tsx
@@ -1,99 +0,0 @@
-import oc from "open-color";
-import { useEffect, useRef } from "react";
-import { t } from "../i18n";
-import { exportToSvg } from "../packages/utils";
-import { AppState, LibraryItem } from "../types";
-import { close } from "./icons";
-
-import "./SingleLibraryItem.scss";
-import { ToolButton } from "./ToolButton";
-
-const SingleLibraryItem = ({
-  libItem,
-  appState,
-  index,
-  onChange,
-  onRemove,
-}: {
-  libItem: LibraryItem;
-  appState: AppState;
-  index: number;
-  onChange: (val: string, index: number) => void;
-  onRemove: (id: string) => void;
-}) => {
-  const svgRef = useRef<HTMLDivElement | null>(null);
-  const inputRef = useRef<HTMLInputElement | null>(null);
-
-  useEffect(() => {
-    const node = svgRef.current;
-    if (!node) {
-      return;
-    }
-    (async () => {
-      const svg = await exportToSvg({
-        elements: libItem.elements,
-        appState: {
-          ...appState,
-          viewBackgroundColor: oc.white,
-          exportBackground: true,
-        },
-        files: null,
-      });
-      node.innerHTML = svg.outerHTML;
-    })();
-  }, [libItem.elements, appState]);
-
-  return (
-    <div className="single-library-item">
-      <div ref={svgRef} className="single-library-item__svg" />
-      <ToolButton
-        aria-label={t("buttons.remove")}
-        type="button"
-        icon={close}
-        className="single-library-item--remove"
-        onClick={onRemove.bind(null, libItem.id)}
-        title={t("buttons.remove")}
-      />
-      <div
-        style={{
-          display: "flex",
-          margin: "0.8rem 0.3rem",
-          width: "100%",
-          fontSize: "14px",
-          fontWeight: 500,
-          flexDirection: "column",
-        }}
-      >
-        <label
-          style={{
-            display: "flex",
-            justifyContent: "space-between",
-            flexDirection: "column",
-          }}
-        >
-          <div style={{ padding: "0.5em 0" }}>
-            <span style={{ fontWeight: 500, color: oc.gray[6] }}>
-              {t("publishDialog.itemName")}
-            </span>
-            <span aria-hidden="true" className="required">
-              *
-            </span>
-          </div>
-          <input
-            type="text"
-            ref={inputRef}
-            style={{ width: "80%", padding: "0.2rem" }}
-            defaultValue={libItem.name}
-            placeholder="Item name"
-            onChange={(event) => {
-              onChange(event.target.value, index);
-            }}
-          />
-        </label>
-        <span className="error">{libItem.error}</span>
-      </div>
-    </div>
-  );
-};
-
-export default SingleLibraryItem;
--- a/src/components/TextInput.scss
+++ b/src/components/TextInput.scss
@@ -2,6 +2,24 @@

 .excalidraw {
  .TextInput {
+    color: var(--text-primary-color);
    display: inline-block;
+    border: 1.5px solid var(--button-gray-1);
+    line-height: 1;
+    padding: 0.75rem;
+    white-space: nowrap;
+    border-radius: var(--space-factor);
+    background-color: var(--input-bg-color);
+
+    &:not(:focus) {
+      &:hover {
+        background-color: var(--input-hover-bg-color);
+      }
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 2px var(--focus-highlight-color);
+    }
  }
 }
--- a/src/components/ToolButton.tsx
+++ b/src/components/ToolButton.tsx
@@ -25,7 +25,6 @@ type ToolButtonBaseProps = {
  visible?: boolean;
  selected?: boolean;
  className?: string;
-  isLoading?: boolean;
 };

 type ToolButtonProps =
@@ -34,11 +33,6 @@ type ToolButtonProps =
      children?: React.ReactNode;
      onClick?(event: React.MouseEvent): void;
    })
-  | (ToolButtonBaseProps & {
-      type: "submit";
-      children?: React.ReactNode;
-      onClick?(event: React.MouseEvent): void;
-    })
  | (ToolButtonBaseProps & {
      type: "icon";
      children?: React.ReactNode;
@@ -67,11 +61,9 @@ export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {
      try {
        setIsLoading(true);
        await ret;
-      } catch (error: any) {
+      } catch (error) {
        if (!(error instanceof AbortError)) {
          throw error;
-        } else {
-          console.warn(error);
        }
      } finally {
        if (isMountedRef.current) {
@@ -90,14 +82,7 @@ export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {

  const lastPointerTypeRef = useRef<PointerType | null>(null);

-  if (
-    props.type === "button" ||
-    props.type === "icon" ||
-    props.type === "submit"
-  ) {
-    const type = (props.type === "icon" ? "button" : props.type) as
-      | "button"
-      | "submit";
+  if (props.type === "button" || props.type === "icon") {
    return (
      <button
        className={clsx(
@@ -117,10 +102,10 @@ export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {
        hidden={props.hidden}
        title={props.title}
        aria-label={props["aria-label"]}
-        type={type}
+        type="button"
        onClick={onClick}
        ref={innerRef}
-        disabled={isLoading || props.isLoading}
+        disabled={isLoading}
      >
        {(props.icon || props.label) && (
          <div className="ToolIcon__icon" aria-hidden="true">
@@ -130,7 +115,6 @@ export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {
                {props.keyBindingLabel}
              </span>
            )}
-            {props.isLoading && <Spinner />}
          </div>
        )}
        {props.showAriaLabel && (
--- a/src/components/ToolIcon.scss
+++ b/src/components/ToolIcon.scss
@@ -6,9 +6,20 @@
    display: inline-flex;
    align-items: center;
    position: relative;
+    font-family: Cascadia;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
+    border-radius: var(--space-factor);
    user-select: none;
+
+    background-color: var(--button-gray-1);
+
+    &:hover {
+      background-color: var(--button-gray-2);
+    }
+    &:active {
+      background-color: var(--button-gray-3);
+    }
  }

  .ToolIcon--plain {
@@ -19,20 +30,6 @@
    }
  }

-  .ToolIcon_type_radio,
-  .ToolIcon_type_checkbox {
-    & + .ToolIcon__icon {
-      background-color: var(--button-gray-1);
-
-      &:hover {
-        background-color: var(--button-gray-2);
-      }
-      &:active {
-        background-color: var(--button-gray-3);
-      }
-    }
-  }
-
  .ToolIcon__icon {
    width: 2.5rem;
    height: 2.5rem;
@@ -42,11 +39,7 @@
    justify-content: center;
    align-items: center;

-    border-radius: var(--border-radius-lg);
-
-    & + .ToolIcon__label {
-      margin-inline-start: 0;
-    }
+    border-radius: var(--space-factor);

    svg {
      position: relative;
@@ -54,6 +47,10 @@
      fill: var(--icon-fill-color);
      color: var(--icon-fill-color);
    }
+
+    & + .ToolIcon__label {
+      margin-inline-start: 0;
+    }
  }

  .ToolIcon__label {
@@ -83,7 +80,7 @@
    margin: 0;
    font-size: inherit;

-    &:focus-visible {
+    &:focus {
      box-shadow: 0 0 0 2px var(--focus-highlight-color);
    }

@@ -125,7 +122,7 @@
      }
    }

-    &:focus-visible + .ToolIcon__icon {
+    &:focus + .ToolIcon__icon {
      box-shadow: 0 0 0 2px var(--focus-highlight-color);
    }

@@ -145,6 +142,10 @@
      background-color: transparent;
    }

+    &:focus {
+      box-shadow: none;
+    }
+
    .ToolIcon__icon {
      background-color: var(--button-gray-1);
      &:hover {
@@ -159,6 +160,13 @@
    }
  }

+  .ToolIcon.ToolIcon__lock {
+    margin-inline-end: var(--space-factor);
+    &.ToolIcon_type_floating {
+      margin-left: 0.1rem;
+    }
+  }
+
  .ToolIcon__keybinding {
    position: absolute;
    bottom: 2px;
@@ -219,10 +227,6 @@
      margin-inline-end: 0;
      top: 60px;
    }
-    .ToolIcon.ToolIcon__penMode {
-      margin-inline-end: 0;
-      top: 140px;
-    }
  }

  .unlocked-icon {
--- a/src/components/Toolbar.scss
+++ b/src/components/Toolbar.scss
@@ -1,124 +0,0 @@
-@import "open-color/open-color.scss";
-
-@mixin toolbarButtonColorStates {
-  .ToolIcon_type_radio,
-  .ToolIcon_type_checkbox {
-    & + .ToolIcon__icon:active {
-      background: var(--color-primary-light);
-    }
-    &:checked + .ToolIcon__icon {
-      background: var(--color-primary);
-      --icon-fill-color: #{$oc-white};
-      --keybinding-color: #{$oc-white};
-    }
-    &:checked + .ToolIcon__icon:active {
-      background: var(--color-primary-darker);
-    }
-  }
-
-  .ToolIcon__keybinding {
-    bottom: 4px;
-    right: 4px;
-  }
-}
-
-.excalidraw {
-  .App-toolbar-container {
-    .ToolIcon_type_floating {
-      @include toolbarButtonColorStates;
-
-      &:not(.is-mobile) {
-        .ToolIcon__icon {
-          padding: 1px;
-          background-color: var(--island-bg-color);
-          box-shadow: 1px 3px 4px 0px rgb(0 0 0 / 15%);
-          border-radius: 50%;
-          transition: box-shadow 0.5s ease, transform 0.5s ease;
-        }
-      }
-
-      .ToolIcon_type_radio,
-      .ToolIcon_type_checkbox {
-        &:focus-within + .ToolIcon__icon {
-          // override for custom floating button shadow
-          box-shadow: 0 0 0 2px var(--focus-highlight-color);
-        }
-      }
-    }
-
-    .ToolIcon__hidden {
-      box-shadow: none !important;
-      background-color: transparent !important;
-      pointer-events: none !important;
-    }
-
-    .ToolIcon.ToolIcon__lock {
-      margin-inline-end: var(--space-factor);
-      &.ToolIcon_type_floating {
-        margin-left: 0.1rem;
-      }
-    }
-
-    .ToolIcon__library {
-      margin-inline-start: var(--space-factor);
-    }
-
-    &.zen-mode {
-      .ToolIcon_type_floating {
-        .ToolIcon__icon {
-          box-shadow: none;
-          transform: scale(0.9);
-        }
-        .ToolIcon_type_checkbox:not(:checked):not(:hover):not(:active) {
-          & + .ToolIcon__icon {
-            svg {
-              fill: $oc-gray-5;
-              color: $oc-gray-5;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .App-toolbar {
-    border-radius: var(--border-radius-lg);
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.01), 1px 1px 5px rgb(0 0 0 / 15%);
-
-    .ToolIcon {
-      &:hover {
-        --icon-fill-color: var(
-          --color-primary-contrast-offset,
-          var(--color-primary)
-        );
-        --keybinding-color: var(
-          --color-primary-contrast-offset,
-          var(--color-primary)
-        );
-      }
-      &:active {
-        --icon-fill-color: #{$oc-gray-9};
-        --keybinding-color: #{$oc-gray-9};
-      }
-
-      .ToolIcon__icon {
-        background: transparent;
-        border-radius: var(--border-radius-lg);
-      }
-
-      @include toolbarButtonColorStates;
-    }
-
-    &.zen-mode {
-      .ToolIcon__keybinding,
-      .HintViewer {
-        display: none;
-      }
-    }
-  }
-
-  &.theme--dark .App-toolbar .ToolIcon:active {
-    --icon-fill-color: #{$oc-gray-3};
-    --keybinding-color: #{$oc-gray-3};
-  }
-}
--- a/src/components/Tooltip.scss
+++ b/src/components/Tooltip.scss
@@ -29,6 +29,7 @@
 // wraps the element we want to apply the tooltip to
 .excalidraw-tooltip-wrapper {
  display: flex;
+  height: 100%;
 }

 .excalidraw-tooltip-icon {
--- a/src/components/Tooltip.tsx
+++ b/src/components/Tooltip.tsx
@@ -2,7 +2,7 @@ import "./Tooltip.scss";

 import React, { useEffect } from "react";

-export const getTooltipDiv = () => {
+const getTooltipDiv = () => {
  const existingDiv = document.querySelector<HTMLDivElement>(
    ".excalidraw-tooltip",
  );
@@ -15,50 +15,6 @@ export const getTooltipDiv = () => {
  return div;
 };

-export const updateTooltipPosition = (
-  tooltip: HTMLDivElement,
-  item: {
-    left: number;
-    top: number;
-    width: number;
-    height: number;
-  },
-  position: "bottom" | "top" = "bottom",
-) => {
-  const tooltipRect = tooltip.getBoundingClientRect();
-
-  const viewportWidth = window.innerWidth;
-  const viewportHeight = window.innerHeight;
-
-  const margin = 5;
-
-  let left = item.left + item.width / 2 - tooltipRect.width / 2;
-  if (left < 0) {
-    left = margin;
-  } else if (left + tooltipRect.width >= viewportWidth) {
-    left = viewportWidth - tooltipRect.width - margin;
-  }
-
-  let top: number;
-
-  if (position === "bottom") {
-    top = item.top + item.height + margin;
-    if (top + tooltipRect.height >= viewportHeight) {
-      top = item.top - tooltipRect.height - margin;
-    }
-  } else {
-    top = item.top - tooltipRect.height - margin;
-    if (top < 0) {
-      top = item.top + item.height + margin;
-    }
-  }
-
-  Object.assign(tooltip.style, {
-    top: `${top}px`,
-    left: `${left}px`,
-  });
-};
-
 const updateTooltip = (
  item: HTMLDivElement,
  tooltip: HTMLDivElement,
@@ -71,27 +27,51 @@ const updateTooltip = (

  tooltip.textContent = label;

-  const itemRect = item.getBoundingClientRect();
-  updateTooltipPosition(tooltip, itemRect);
+  const {
+    x: itemX,
+    bottom: itemBottom,
+    top: itemTop,
+    width: itemWidth,
+  } = item.getBoundingClientRect();
+
+  const {
+    width: labelWidth,
+    height: labelHeight,
+  } = tooltip.getBoundingClientRect();
+
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+
+  const margin = 5;
+
+  const left = itemX + itemWidth / 2 - labelWidth / 2;
+  const offsetLeft =
+    left + labelWidth >= viewportWidth ? left + labelWidth - viewportWidth : 0;
+
+  const top = itemBottom + margin;
+  const offsetTop =
+    top + labelHeight >= viewportHeight
+      ? itemBottom - itemTop + labelHeight + margin * 2
+      : 0;
+
+  Object.assign(tooltip.style, {
+    top: `${top - offsetTop}px`,
+    left: `${left - offsetLeft}px`,
+  });
 };

 type TooltipProps = {
  children: React.ReactNode;
  label: string;
  long?: boolean;
-  style?: React.CSSProperties;
 };

-export const Tooltip = ({
-  children,
-  label,
-  long = false,
-  style,
-}: TooltipProps) => {
+export const Tooltip = ({ children, label, long = false }: TooltipProps) => {
  useEffect(() => {
    return () =>
      getTooltipDiv().classList.remove("excalidraw-tooltip--visible");
  }, []);
+
  return (
    <div
      className="excalidraw-tooltip-wrapper"
@@ -106,7 +86,6 @@ export const Tooltip = ({
      onPointerLeave={() =>
        getTooltipDiv().classList.remove("excalidraw-tooltip--visible")
      }
-      style={style}
    >
      {children}
    </div>
--- a/src/components/TopErrorBoundary.tsx
+++ b/src/components/TopErrorBoundary.tsx
@@ -27,7 +27,7 @@ export class TopErrorBoundary extends React.Component<
    for (const [key, value] of Object.entries({ ...localStorage })) {
      try {
        _localStorage[key] = JSON.parse(value);
-      } catch (error: any) {
+      } catch (error) {
        _localStorage[key] = value;
      }
    }
@@ -60,7 +60,7 @@ export class TopErrorBoundary extends React.Component<
        )
      ).default;
      body = encodeURIComponent(templateStrFn(this.state.sentryEventId));
-    } catch (error: any) {
+    } catch (error) {
      console.error(error);
    }

@@ -86,7 +86,7 @@ export class TopErrorBoundary extends React.Component<
                try {
                  localStorage.clear();
                  window.location.reload();
-                } catch (error: any) {
+                } catch (error) {
                  console.error(error);
                }
              }}
--- a/src/components/UserList.scss
+++ b/src/components/UserList.scss
@@ -7,10 +7,6 @@
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
-
-    &:empty {
-      display: none;
-    }
  }

  .UserList > * {
--- a/src/components/icons.tsx
+++ b/src/components/icons.tsx
@@ -15,9 +15,8 @@ import { THEME } from "../constants";

 const activeElementColor = (theme: Theme) =>
  theme === THEME.LIGHT ? oc.orange[4] : oc.orange[9];
-
-const iconFillColor = (theme: Theme) => "var(--icon-fill-color)";
-
+const iconFillColor = (theme: Theme) =>
+  theme === THEME.LIGHT ? oc.black : oc.gray[4];
 const handlerColor = (theme: Theme) =>
  theme === THEME.LIGHT ? oc.white : "#1e1e1e";

@@ -31,12 +30,8 @@ export const createIcon = (
  d: string | React.ReactNode,
  opts: number | Opts = 512,
 ) => {
-  const {
-    width = 512,
-    height = width,
-    mirror,
-    style,
-  } = typeof opts === "number" ? ({ width: opts } as Opts) : opts;
+  const { width = 512, height = width, mirror, style } =
+    typeof opts === "number" ? ({ width: opts } as Opts) : opts;
  return (
    <svg
      aria-hidden="true"
@@ -86,7 +81,6 @@ export const clipboard = createIcon(

 export const trash = createIcon(
  "M32 464a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128H32zm272-256a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zM432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z",
-
  { width: 448, height: 512 },
 );

@@ -758,21 +752,6 @@ export const ArrowheadBarIcon = React.memo(
    ),
 );

-export const ArrowheadTriangleIcon = React.memo(
-  ({ theme, flip = false }: { theme: Theme; flip?: boolean }) =>
-    createIcon(
-      <g
-        stroke={iconFillColor(theme)}
-        fill={iconFillColor(theme)}
-        transform={flip ? "translate(40, 0) scale(-1, 1)" : ""}
-      >
-        <path d="M32 10L6 10" strokeWidth={2} />
-        <path d="M27.5 5.5L34.5 10L27.5 14.5L27.5 5.5" />
-      </g>,
-      { width: 40, height: 20 },
-    ),
-);
-
 export const FontSizeSmallIcon = React.memo(({ theme }: { theme: Theme }) =>
  createIcon(
    <path
@@ -884,57 +863,3 @@ export const TextAlignRightIcon = React.memo(({ theme }: { theme: Theme }) =>
    { width: 448, height: 512 },
  ),
 );
-
-export const TextAlignTopIcon = React.memo(({ theme }: { theme: Theme }) =>
-  createIcon(
-    <path
-      d="m16,132l416,0c8.837,0 16,-7.163 16,-16l0,-40c0,-8.837 -7.163,-16 -16,-16l-416,0c-8.837,0 -16,7.163 -16,16l0,40c0,8.837 7.163,16 16,16zm0,160l416,0c8.837,0 16,-7.163 16,-16l0,-40c0,-8.837 -7.163,-16 -16,-16l-416,0c-8.837,0 -16,7.163 -16,16l0,40c0,8.837 7.163,16 16,16z"
-      fill={iconFillColor(theme)}
-      strokeLinecap="round"
-    />,
-    { width: 448, height: 512 },
-  ),
-);
-
-export const TextAlignBottomIcon = React.memo(({ theme }: { theme: Theme }) =>
-  createIcon(
-    <path
-      d="M16,292L432,292C440.837,292 448,284.837 448,276L448,236C448,227.163 440.837,220 432,220L16,220C7.163,220 0,227.163 0,236L0,276C0,284.837 7.163,292 16,292ZM16,452L432,452C440.837,452 448,444.837 448,436L448,396C448,387.163 440.837,380 432,380L16,380C7.163,380 0,387.163 0,396L0,436C0,444.837 7.163,452 16,452Z"
-      fill={iconFillColor(theme)}
-      strokeLinecap="round"
-    />,
-    { width: 448, height: 512 },
-  ),
-);
-
-export const TextAlignMiddleIcon = React.memo(({ theme }: { theme: Theme }) =>
-  createIcon(
-    <path
-      transform="matrix(1,0,0,1,0,80)"
-      d="M16,132L432,132C440.837,132 448,124.837 448,116L448,76C448,67.163 440.837,60 432,60L16,60C7.163,60 0,67.163 0,76L0,116C0,124.837 7.163,132 16,132ZM16,292L432,292C440.837,292 448,284.837 448,276L448,236C448,227.163 440.837,220 432,220L16,220C7.163,220 0,227.163 0,236L0,276C0,284.837 7.163,292 16,292Z"
-      fill={iconFillColor(theme)}
-      strokeLinecap="round"
-    />,
-    { width: 448, height: 512 },
-  ),
-);
-
-export const publishIcon = createIcon(
-  <path
-    d="M537.6 226.6c4.1-10.7 6.4-22.4 6.4-34.6 0-53-43-96-96-96-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32c-88.4 0-160 71.6-160 160 0 2.7.1 5.4.2 8.1C40.2 219.8 0 273.2 0 336c0 79.5 64.5 144 144 144h368c70.7 0 128-57.3 128-128 0-61.9-44-113.6-102.4-125.4zM393.4 288H328v112c0 8.8-7.2 16-16 16h-48c-8.8 0-16-7.2-16-16V288h-65.4c-14.3 0-21.4-17.2-11.3-27.3l105.4-105.4c6.2-6.2 16.4-6.2 22.6 0l105.4 105.4c10.1 10.1 2.9 27.3-11.3 27.3z"
-    fill="currentColor"
-  />,
-  { width: 640, height: 512 },
-);
-
-export const editIcon = createIcon(
-  <path
-    fill="currentColor"
-    d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z"
-  ></path>,
-  { width: 640, height: 512 },
-);
-
-export const eraser = createIcon(
-  <path d="M480 416C497.7 416 512 430.3 512 448C512 465.7 497.7 480 480 480H150.6C133.7 480 117.4 473.3 105.4 461.3L25.37 381.3C.3786 356.3 .3786 315.7 25.37 290.7L258.7 57.37C283.7 32.38 324.3 32.38 349.3 57.37L486.6 194.7C511.6 219.7 511.6 260.3 486.6 285.3L355.9 416H480zM265.4 416L332.7 348.7L195.3 211.3L70.63 336L150.6 416L265.4 416z" />,
-);
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -24,7 +24,7 @@ export const POINTER_BUTTON = {
  WHEEL: 1,
  SECONDARY: 2,
  TOUCH: -1,
-} as const;
+};

 export enum EVENT {
  COPY = "copy",
@@ -52,8 +52,6 @@ export enum EVENT {
  HASHCHANGE = "hashchange",
  VISIBILITY_CHANGE = "visibilitychange",
  SCROLL = "scroll",
-  // custom events
-  EXCALIDRAW_LINK = "excalidraw-link",
 }

 export const ENV = {
@@ -108,6 +106,10 @@ export const EXPORT_DATA_TYPES = {

 export const EXPORT_SOURCE = window.location.origin;

+export const STORAGE_KEYS = {
+  LOCAL_STORAGE_LIBRARY: "excalidraw-library",
+} as const;
+
 // time in milliseconds
 export const IMAGE_RENDER_TIMEOUT = 500;
 export const TAP_TWICE_TIMEOUT = 300;
@@ -117,7 +119,6 @@ export const TOAST_TIMEOUT = 5000;
 export const VERSION_TIMEOUT = 30000;
 export const SCROLL_TIMEOUT = 100;
 export const ZOOM_STEP = 0.1;
-export const HYPERLINK_TOOLTIP_DELAY = 300;

 // Report a user inactive after IDLE_THRESHOLD milliseconds
 export const IDLE_THRESHOLD = 60_000;
@@ -173,18 +174,3 @@ export const ALLOWED_IMAGE_MIME_TYPES = [
 export const MAX_ALLOWED_FILE_BYTES = 2 * 1024 * 1024;

 export const SVG_NS = "http://www.w3.org/2000/svg";
-
-export const ENCRYPTION_KEY_BITS = 128;
-
-export const VERSIONS = {
-  excalidraw: 2,
-  excalidrawLibrary: 2,
-} as const;
-
-export const BOUND_TEXT_PADDING = 5;
-
-export const VERTICAL_ALIGN = {
-  TOP: "top",
-  MIDDLE: "middle",
-  BOTTOM: "bottom",
-};
--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@@ -180,7 +180,7 @@
  }

  .buttonList label:focus-within,
-  input:focus-visible {
+  input:focus {
    outline: transparent;
    box-shadow: 0 0 0 2px var(--focus-highlight-color);
  }
@@ -190,14 +190,14 @@
    user-select: none;
    background-color: var(--button-gray-1);
    border: 0;
-    border-radius: var(--border-radius-md);
+    border-radius: 4px;
    margin: 0.125rem 0;
    padding: 0.25rem;
    white-space: nowrap;

    cursor: pointer;

-    &:focus-visible {
+    &:focus {
      outline: transparent;
      box-shadow: 0 0 0 2px var(--focus-highlight-color);
    }
@@ -217,16 +217,14 @@

  .active,
  .buttonList label.active {
-    background-color: var(--color-primary);
-
-    --icon-fill-color: #{$oc-white};
+    background-color: var(--button-gray-2);

    &:hover {
-      background-color: var(--color-primary-darker);
+      background-color: var(--button-gray-2);
    }

    &:active {
-      background-color: var(--color-primary-darkest);
+      background-color: var(--button-gray-3);
    }
  }

@@ -236,7 +234,7 @@
      justify-content: center;
      align-items: center;
      svg {
-        width: 35px;
+        width: 36px;
        height: 14px;
        padding: 2px;
        opacity: 0.6;
@@ -290,16 +288,6 @@
    width: 100%;

    box-sizing: border-box;
-
-    .eraser {
-      &.ToolIcon:hover {
-        --icon-fill-color: #fff;
-        --keybinding-color: #fff;
-      }
-      &.active {
-        background-color: var(--color-primary);
-      }
-    }
  }

  .App-toolbar-content {
@@ -323,7 +311,7 @@
  }

  .App-menu_top {
-    grid-template-columns: auto max-content auto;
+    grid-template-columns: 1fr auto 1fr;
    grid-gap: 4px;
    align-items: flex-start;
    cursor: default;
@@ -477,8 +465,7 @@
    font-family: var(--ui-font);
  }

-  .undo-redo-buttons,
-  .eraser-buttons {
+  .undo-redo-buttons {
    display: grid;
    grid-auto-flow: column;
    gap: 0.4em;
@@ -530,27 +517,6 @@
    }
  }

-  input[type="text"],
-  textarea:not(.excalidraw-wysiwyg) {
-    color: var(--text-primary-color);
-    border: 1.5px solid var(--input-border-color);
-    padding: 0.75rem;
-    white-space: nowrap;
-    border-radius: var(--space-factor);
-    background-color: var(--input-bg-color);
-
-    &:not(:focus) {
-      &:hover {
-        background-color: var(--input-hover-bg-color);
-      }
-    }
-
-    &:focus {
-      outline: none;
-      box-shadow: 0 0 0 2px var(--focus-highlight-color);
-    }
-  }
-
  @media print {
    .App-bottom-bar,
    .FixedSideContainer,
--- a/src/css/theme.scss
+++ b/src/css/theme.scss
@@ -12,11 +12,11 @@
  --dialog-border-color: #{$oc-gray-6};
  --dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
  --focus-highlight-color: #{$oc-blue-2};
-  --icon-fill-color: #{$oc-gray-9};
+  --icon-fill-color: #{$oc-black};
  --icon-green-fill-color: #{$oc-green-9};
  --default-bg-color: #{$oc-white};
  --input-bg-color: #{$oc-white};
-  --input-border-color: #{$oc-gray-4};
+  --input-border-color: #{$oc-gray-3};
  --input-hover-bg-color: #{$oc-gray-1};
  --input-label-color: #{$oc-gray-7};
  --island-bg-color: rgba(255, 255, 255, 0.96);
@@ -32,19 +32,10 @@
  --sar: env(safe-area-inset-right);
  --sat: env(safe-area-inset-top);
  --select-highlight-color: #{$oc-blue-5};
-  --shadow-island: 0 0 0 1px rgba(0, 0, 0, 0.01), 1px 1px 5px rgb(0 0 0 / 12%);
-
+  --shadow-island: 0 1px 5px #{transparentize($oc-black, 0.85)};
  --space-factor: 0.25rem;
  --text-primary-color: #{$oc-gray-8};

-  --color-primary: #6965db;
-  --color-primary-darker: #5b57d1;
-  --color-primary-darkest: #4a47b1;
-  --color-primary-light: #e2e1fc;
-
-  --border-radius-md: 0.375rem;
-  --border-radius-lg: 0.5rem;
-
  &.theme--dark {
    background: $oc-black;

@@ -73,19 +64,13 @@
    --input-label-color: #{$oc-gray-2};
    --island-bg-color: rgba(30, 30, 30, 0.98);
    --keybinding-color: #{$oc-gray-6};
-    --link-color: #{$oc-blue-4};
    --overlay-bg-color: #{transparentize($oc-gray-8, 0.88)};
    --popup-bg-color: #2c2c2c;
    --popup-secondary-bg-color: #222;
    --popup-text-color: #{$oc-gray-4};
    --popup-text-inverted-color: #2c2c2c;
    --select-highlight-color: #{$oc-blue-4};
-    --shadow-island: 1px 1px 5px #{transparentize($oc-black, 0.7)};
+    --shadow-island: 0 1px 5px #{transparentize($oc-black, 0.7)};
    --text-primary-color: #{$oc-gray-4};
-
-    --color-primary: #5650f0;
-    --color-primary-darker: #4b46d8;
-    --color-primary-darkest: #3e39be;
-    --color-primary-light: #3f3d64;
  }
 }
--- a/src/data/blob.ts
+++ b/src/data/blob.ts
@@ -11,7 +11,6 @@ import { CanvasError } from "../errors";
 import { t } from "../i18n";
 import { calculateScrollCenter } from "../scene";
 import { AppState, DataURL } from "../types";
-import { bytesToHexString } from "../utils";
 import { FileSystemHandle } from "./filesystem";
 import { isValidExcalidrawData } from "./json";
 import { restore } from "./restore";
@@ -25,7 +24,7 @@ const parseFileContents = async (blob: Blob | File) => {
      return await (
        await import(/* webpackChunkName: "image" */ "./image")
      ).decodePngMetadata(blob);
-    } catch (error: any) {
+    } catch (error) {
      if (error.message === "INVALID") {
        throw new DOMException(
          t("alerts.imageDoesNotContainScene"),
@@ -59,7 +58,7 @@ const parseFileContents = async (blob: Blob | File) => {
        ).decodeSvgMetadata({
          svg: contents,
        });
-      } catch (error: any) {
+      } catch (error) {
        if (error.message === "INVALID") {
          throw new DOMException(
            t("alerts.imageDoesNotContainScene"),
@@ -157,7 +156,7 @@ export const loadFromBlob = async (
    );

    return result;
-  } catch (error: any) {
+  } catch (error) {
    console.error(error.message);
    throw new Error(t("alerts.couldNotLoadInvalidFile"));
  }
@@ -188,7 +187,7 @@ export const canvasToBlob = async (
        }
        resolve(blob);
      });
-    } catch (error: any) {
+    } catch (error) {
      reject(error);
    }
  });
@@ -196,18 +195,26 @@ export const canvasToBlob = async (

 /** generates SHA-1 digest from supplied file (if not supported, falls back
    to a 40-char base64 random id) */
-export const generateIdFromFile = async (file: File): Promise<FileId> => {
+export const generateIdFromFile = async (file: File) => {
+  let id: FileId;
  try {
    const hashBuffer = await window.crypto.subtle.digest(
      "SHA-1",
      await file.arrayBuffer(),
    );
-    return bytesToHexString(new Uint8Array(hashBuffer)) as FileId;
-  } catch (error: any) {
+    id =
+      // convert buffer to byte array
+      Array.from(new Uint8Array(hashBuffer))
+        // convert to hex string
+        .map((byte) => byte.toString(16).padStart(2, "0"))
+        .join("") as FileId;
+  } catch (error) {
    console.error(error);
    // length 40 to align with the HEX length of SHA-1 (which is 160 bit)
-    return nanoid(40) as FileId;
+    id = nanoid(40) as FileId;
  }
+
+  return id;
 };

 export const getDataURL = async (file: Blob | File): Promise<DataURL> => {
@@ -237,11 +244,7 @@ export const dataURLToFile = (dataURL: DataURL, filename = "") => {

 export const resizeImageFile = async (
  file: File,
-  opts: {
-    /** undefined indicates auto */
-    outputType?: typeof MIME_TYPES["jpg"];
-    maxWidthOrHeight: number;
-  },
+  maxWidthOrHeight: number,
 ): Promise<File> => {
  // SVG files shouldn't a can't be resized
  if (file.type === MIME_TYPES.svg) {
@@ -261,26 +264,16 @@ export const resizeImageFile = async (
    pica: pica({ features: ["js", "wasm"] }),
  });

-  if (opts.outputType) {
-    const { outputType } = opts;
-    reduce._create_blob = function (env) {
-      return this.pica.toBlob(env.out_canvas, outputType, 0.8).then((blob) => {
-        env.out_blob = blob;
-        return env;
-      });
-    };
-  }
+  const fileType = file.type;

  if (!isSupportedImageFile(file)) {
    throw new Error(t("errors.unsupportedFileType"));
  }

  return new File(
-    [await reduce.toBlob(file, { max: opts.maxWidthOrHeight })],
+    [await reduce.toBlob(file, { max: maxWidthOrHeight })],
    file.name,
-    {
-      type: opts.outputType || file.type,
-    },
+    { type: fileType },
  );
 };

--- a/src/data/encode.ts
+++ b/src/data/encode.ts
@@ -85,7 +85,7 @@ export const encode = async ({
  if (compress !== false) {
    try {
      deflated = await toByteString(deflate(text));
-    } catch (error: any) {
+    } catch (error) {
      console.error("encode: cannot deflate", error);
    }
  }
@@ -234,19 +234,7 @@ const splitBuffers = (concatenatedBuffer: Uint8Array) => {

  let cursor = 0;

-  // first chunk is the version
-  const version = dataView(
-    concatenatedBuffer,
-    NEXT_CHUNK_SIZE_DATAVIEW_BYTES,
-    cursor,
-  );
-  // If version is outside of the supported versions, throw an error.
-  // This usually means the buffer wasn't encoded using this API, so we'd only
-  // waste compute.
-  if (version > CONCAT_BUFFERS_VERSION) {
-    throw new Error(`invalid version ${version}`);
-  }
-
+  // first chunk is the version (ignored for now)
  cursor += VERSION_DATAVIEW_BYTES;

  while (true) {
@@ -379,7 +367,7 @@ export const decompressData = async <T extends Record<string, any>>(
      /** data can be anything so the caller must decode it */
      data: contentsBuffer,
    };
-  } catch (error: any) {
+  } catch (error) {
    console.error(
      `Error during decompressing and decrypting the file.`,
      encodingMetadata,
--- a/src/data/encryption.ts
+++ b/src/data/encryption.ts
@@ -1,5 +1,3 @@
-import { ENCRYPTION_KEY_BITS } from "../constants";
-
 export const IV_LENGTH_BYTES = 12;

 export const createIV = () => {
@@ -7,27 +5,19 @@ export const createIV = () => {
  return window.crypto.getRandomValues(arr);
 };

-export const generateEncryptionKey = async <
-  T extends "string" | "cryptoKey" = "string",
->(
-  returnAs?: T,
-): Promise<T extends "cryptoKey" ? CryptoKey : string> => {
+export const generateEncryptionKey = async () => {
  const key = await window.crypto.subtle.generateKey(
    {
      name: "AES-GCM",
-      length: ENCRYPTION_KEY_BITS,
+      length: 128,
    },
    true, // extractable
    ["encrypt", "decrypt"],
  );
-  return (
-    returnAs === "cryptoKey"
-      ? key
-      : (await window.crypto.subtle.exportKey("jwk", key)).k
-  ) as T extends "cryptoKey" ? CryptoKey : string;
+  return (await window.crypto.subtle.exportKey("jwk", key)).k;
 };

-export const getCryptoKey = (key: string, usage: KeyUsage) =>
+export const getImportedKey = (key: string, usage: KeyUsage) =>
  window.crypto.subtle.importKey(
    "jwk",
    {
@@ -39,18 +29,17 @@ export const getCryptoKey = (key: string, usage: KeyUsage) =>
    },
    {
      name: "AES-GCM",
-      length: ENCRYPTION_KEY_BITS,
+      length: 128,
    },
    false, // extractable
    [usage],
  );

 export const encryptData = async (
-  key: string | CryptoKey,
+  key: string,
  data: Uint8Array | ArrayBuffer | Blob | File | string,
 ): Promise<{ encryptedBuffer: ArrayBuffer; iv: Uint8Array }> => {
-  const importedKey =
-    typeof key === "string" ? await getCryptoKey(key, "encrypt") : key;
+  const importedKey = await getImportedKey(key, "encrypt");
  const iv = createIV();
  const buffer: ArrayBuffer | Uint8Array =
    typeof data === "string"
@@ -61,8 +50,6 @@ export const encryptData = async (
      ? await data.arrayBuffer()
      : data;

-  // We use symmetric encryption. AES-GCM is the recommended algorithm and
-  // includes checks that the ciphertext has not been modified by an attacker.
  const encryptedBuffer = await window.crypto.subtle.encrypt(
    {
      name: "AES-GCM",
@@ -80,7 +67,7 @@ export const decryptData = async (
  encrypted: Uint8Array | ArrayBuffer,
  privateKey: string,
 ): Promise<ArrayBuffer> => {
-  const key = await getCryptoKey(privateKey, "decrypt");
+  const key = await getImportedKey(privateKey, "decrypt");
  return window.crypto.subtle.decrypt(
    {
      name: "AES-GCM",
--- a/src/data/filesystem.ts
+++ b/src/data/filesystem.ts
@@ -4,7 +4,7 @@ import {
  fileSave as _fileSave,
  FileSystemHandle,
  supported as nativeFileSystemSupported,
-} from "browser-fs-access";
+} from "@dwelle/browser-fs-access";
 import { EVENT, MIME_TYPES } from "../constants";
 import { AbortError } from "../errors";
 import { debounce } from "../utils";
@@ -22,7 +22,7 @@ const INPUT_CHANGE_INTERVAL_MS = 500;

 export const fileOpen = <M extends boolean | undefined = false>(opts: {
  extensions?: FILE_EXTENSION[];
-  description: string;
+  description?: string;
  multiple?: M;
 }): Promise<
  M extends false | undefined ? FileWithHandle : FileWithHandle[]
@@ -94,7 +94,7 @@ export const fileSave = (
    name: string;
    /** file extension */
    extension: FILE_EXTENSION;
-    description: string;
+    description?: string;
    /** existing FileSystemHandle */
    fileHandle?: FileSystemHandle | null;
  },
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
dwelle	8946b2637f	update changelog & readme	2021-10-23 13:53:10 +02:00
dwelle	a834a4fda0	feat: expose app instance on `excalidrawAPI`	2021-10-23 13:41:14 +02:00