update changelog & readme

feat: expose app instance on excalidrawAPI
2025-07-25 13:58:22 +08:00 · 2021-10-23 13:53:10 +02:00 · 2021-10-23 13:41:14 +02:00
252 changed files with 7264 additions and 25583 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,8 +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_SOCKET_SERVER_URL=http://localhost:3002
-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,11 +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_SOCKET_SERVER_URL=https://oss-collab-us1.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"}'
-
-# 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/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
@ -118,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.38",
-    "@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.23.0",
    "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,40 +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",
-    "firebase-tools": "9.23.0",
-    "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
  },
@ -101,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"
--- 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
@ -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);
  }
 };

--- 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
@ -9,7 +9,7 @@ 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";
@ -58,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,
    };
@ -77,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,
    };
@ -112,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,
    };
@ -147,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"
@ -216,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;
--- 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 } 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({
--- 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);
--- 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,
@ -41,16 +40,8 @@ import {
  isTextElement,
  redrawTextBoundingBox,
 } from "../element";
-import { mutateElement, newElementWith } from "../element/mutateElement";
-import {
-  getBoundTextElement,
-  getContainerElement,
-} from "../element/textElement";
-import {
-  isBoundToContainer,
-  isLinearElement,
-  isLinearElementType,
-} from "../element/typeChecks";
+import { newElementWith } from "../element/mutateElement";
+import { isLinearElement, isLinearElementType } from "../element/typeChecks";
 import {
  Arrowhead,
  ExcalidrawElement,
@ -60,34 +51,25 @@ import {
  TextAlign,
 } 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);
@ -117,97 +99,18 @@ const getFormValue = function <T>(
  );
 };

-const offsetElementAfterFontResize = (
-  prevElement: ExcalidrawTextElement,
-  nextElement: ExcalidrawTextElement,
-) => {
-  if (isBoundToContainer(nextElement)) {
-    return nextElement;
-  }
-  return mutateElement(
-    nextElement,
-    {
-      x:
-        prevElement.textAlign === "left"
-          ? prevElement.x
-          : prevElement.x +
-            (prevElement.width - nextElement.width) /
-              (prevElement.textAlign === "center" ? 2 : 1),
-      // centering vertically is non-standard, but for Excalidraw I think
-      // it makes sense
-      y: prevElement.y + (prevElement.height - nextElement.height) / 2,
-    },
-    false,
-  );
-};
-
-const changeFontSize = (
-  elements: readonly ExcalidrawElement[],
-  appState: AppState,
-  getNewFontSize: (element: ExcalidrawTextElement) => number,
-  fallbackValue?: ExcalidrawTextElement["fontSize"],
-) => {
-  const newFontSizes = new Set<number>();
-
-  return {
-    elements: changeProperty(
-      elements,
-      appState,
-      (oldElement) => {
-        if (isTextElement(oldElement)) {
-          const newFontSize = getNewFontSize(oldElement);
-          newFontSizes.add(newFontSize);
-
-          let newElement: ExcalidrawTextElement = newElementWith(oldElement, {
-            fontSize: newFontSize,
-          });
-          redrawTextBoundingBox(
-            newElement,
-            getContainerElement(oldElement),
-            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 actionChangeStrokeColor = register({
  name: "changeStrokeColor",
  perform: (elements, appState, value) => {
    return {
      ...(value.currentItemStrokeColor && {
-        elements: changeProperty(
-          elements,
-          appState,
-          (el) => {
-            return hasStrokeColor(el.type)
-              ? newElementWith(el, {
-                  strokeColor: value.currentItemStrokeColor,
-                })
-              : el;
-          },
-          true,
-        ),
+        elements: changeProperty(elements, appState, (el) => {
+          return hasStrokeColor(el.type)
+            ? newElementWith(el, {
+                strokeColor: value.currentItemStrokeColor,
+              })
+            : el;
+        }),
      }),
      appState: {
        ...appState,
@ -521,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>
@ -533,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)}
@ -575,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,
@ -679,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)}
@ -702,29 +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,
@ -757,16 +593,7 @@ export const actionChangeTextAlign = register({
        value={getFormValue(
          elements,
          appState,
-          (element) => {
-            if (isTextElement(element)) {
-              return element.textAlign;
-            }
-            const boundTextElement = getBoundTextElement(element);
-            if (boundTextElement) {
-              return boundTextElement.textAlign;
-            }
-            return null;
-          },
+          (element) => isTextElement(element) && element.textAlign,
          appState.currentItemTextAlign,
        )}
        onChange={(value) => updateData(value)}
@ -911,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,
@ -961,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.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(
-              element,
-              getContainerElement(element),
-              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
@ -80,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/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
@ -25,8 +25,7 @@ export type ShortcutName =
  | "addToLibrary"
  | "viewMode"
  | "flipHorizontal"
-  | "flipVertical"
-  | "link";
+  | "flipVertical";

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

 export const getShortcutFromShortcutName = (name: ShortcutName) => {
--- a/src/actions/types.ts
+++ b/src/actions/types.ts
@ -101,11 +101,7 @@ export type ActionName =
  | "flipVertical"
  | "viewMode"
  | "exportWithDarkMode"
-  | "toggleTheme"
-  | "increaseFontSize"
-  | "decreaseFontSize"
-  | "unbindText"
-  | "link";
+  | "toggleTheme";

 export type PanelComponentProps = {
  elements: readonly ExcalidrawElement[];
@ -125,12 +121,7 @@ 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,
--- 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/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,
--- 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 {};
  }
@ -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
@ -158,7 +158,6 @@ export const SelectedShapeActions = ({
            {renderAction("deleteSelectedElements")}
            {renderAction("group")}
            {renderAction("ungroup")}
-            {targetElements.length === 1 && renderAction("link")}
          </div>
        </fieldset>
      )}
--- 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/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,21 +7,18 @@ import { AppState } from "../types";
 import {
  isImageElement,
  isLinearElement,
-  isTextBindableContainer,
  isTextElement,
 } from "../element/typeChecks";
 import { getShortcutKey } from "../utils";

-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 (elementType === "arrow" || elementType === "line") {
    if (!multiMode) {
      return t("hints.linearElement");
@ -42,7 +39,6 @@ const getHints = ({ appState, elements, isMobile }: HintViewerProps) => {
  }

  const selectedElements = getSelectedElements(elements, appState);
-
  if (
    isResizing &&
    lastPointerDownWith === "mouse" &&
@ -61,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");
  }
@ -69,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
@ -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,8 +705,7 @@ 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" })}
@ -435,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,
            },
          )}
        >
@ -508,7 +791,6 @@ const LayerUI = ({
        setAppState={setAppState}
        onCollabButtonClick={onCollabButtonClick}
        onLockToggle={onLockToggle}
-        onPenModeToggle={onPenModeToggle}
        canvas={canvas}
        isCollaborating={isCollaborating}
        renderCustomFooter={renderCustomFooter}
@ -563,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
@ -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,26 +85,14 @@ 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>
    );
  };
--- 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,118 +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-chubb);
-        --keybinding-color: var(--color-primary-chubb);
-      }
-      &: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,19 +863,3 @@ export const TextAlignRightIcon = React.memo(({ theme }: { theme: Theme }) =>
    { 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 },
-);
--- 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,12 +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;
--- 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;
@ -313,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;
@ -519,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,20 +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-chubb: #625ee0; // to offset Chubb illusion
-  --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;

@ -74,20 +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-chubb: #726dff; // to offset Chubb illusion
-    --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/src/data/image.ts
+++ b/src/data/image.ts
@ -76,7 +76,7 @@ export const decodePngMetadata = async (blob: Blob) => {
        throw new Error("FAILED");
      }
      return await decode(encodedData);
-    } catch (error: any) {
+    } catch (error) {
      console.error(error);
      throw new Error("FAILED");
    }
@ -127,7 +127,7 @@ export const decodeSvgMetadata = async ({ svg }: { svg: string }) => {
        throw new Error("FAILED");
      }
      return await decode(encodedData);
-    } catch (error: any) {
+    } catch (error) {
      console.error(error);
      throw new Error("FAILED");
    }
--- a/src/data/index.ts
+++ b/src/data/index.ts
@ -54,7 +54,6 @@ export const exportCanvas = async (
      return await fileSave(
        new Blob([tempSvg.outerHTML], { type: MIME_TYPES.svg }),
        {
-          description: "Export to SVG",
          name,
          extension: "svg",
          fileHandle,
@ -87,7 +86,6 @@ export const exportCanvas = async (
    }

    return await fileSave(blob, {
-      description: "Export to PNG",
      name,
      extension: "png",
      fileHandle,
@ -95,7 +93,7 @@ export const exportCanvas = async (
  } else if (type === "clipboard") {
    try {
      await copyBlobToClipboardAsPng(blob);
-    } catch (error: any) {
+    } catch (error) {
      if (error.name === "CANVAS_POSSIBLY_TOO_BIG") {
        throw error;
      }
--- a/src/data/json.ts
+++ b/src/data/json.ts
@ -1,14 +1,9 @@
 import { fileOpen, fileSave } from "./filesystem";
 import { cleanAppStateForExport, clearAppStateForDatabase } from "../appState";
-import {
-  EXPORT_DATA_TYPES,
-  EXPORT_SOURCE,
-  MIME_TYPES,
-  VERSIONS,
-} from "../constants";
+import { EXPORT_DATA_TYPES, EXPORT_SOURCE, MIME_TYPES } from "../constants";
 import { clearElementsForDatabase, clearElementsForExport } from "../element";
 import { ExcalidrawElement } from "../element/types";
-import { AppState, BinaryFiles, LibraryItems } from "../types";
+import { AppState, BinaryFiles } from "../types";
 import { isImageFileHandle, loadFromBlob } from "./blob";

 import {
@ -47,7 +42,7 @@ export const serializeAsJSON = (
 ): string => {
  const data: ExportedDataState = {
    type: EXPORT_DATA_TYPES.excalidraw,
-    version: VERSIONS.excalidraw,
+    version: 2,
    source: EXPORT_SOURCE,
    elements:
      type === "local"
@ -119,16 +114,17 @@ export const isValidLibrary = (json: any) => {
    typeof json === "object" &&
    json &&
    json.type === EXPORT_DATA_TYPES.excalidrawLibrary &&
-    (json.version === 1 || json.version === 2)
+    json.version === 1
  );
 };

-export const saveLibraryAsJSON = async (libraryItems: LibraryItems) => {
+export const saveLibraryAsJSON = async (library: Library) => {
+  const libraryItems = await library.loadLibrary();
  const data: ExportedLibraryData = {
    type: EXPORT_DATA_TYPES.excalidrawLibrary,
-    version: VERSIONS.excalidrawLibrary,
+    version: 1,
    source: EXPORT_SOURCE,
-    libraryItems,
+    library: libraryItems,
  };
  const serialized = JSON.stringify(data, null, 2);
  await fileSave(
--- a/src/data/library.ts
+++ b/src/data/library.ts
@ -1,6 +1,6 @@
 import { loadLibraryFromBlob } from "./blob";
 import { LibraryItems, LibraryItem } from "../types";
-import { restoreElements, restoreLibraryItems } from "./restore";
+import { restoreElements } from "./restore";
 import { getNonDeletedElements } from "../element";
 import type App from "../components/App";

@ -18,16 +18,14 @@ class Library {
  };

  restoreLibraryItem = (libraryItem: LibraryItem): LibraryItem | null => {
-    const elements = getNonDeletedElements(
-      restoreElements(libraryItem.elements, null),
-    );
-    return elements.length ? { ...libraryItem, elements } : null;
+    const elements = getNonDeletedElements(restoreElements(libraryItem, null));
+    return elements.length ? elements : null;
  };

  /** imports library (currently merges, removing duplicates) */
-  async importLibrary(blob: Blob, defaultStatus = "unpublished") {
+  async importLibrary(blob: Blob) {
    const libraryFile = await loadLibraryFromBlob(blob);
-    if (!libraryFile || !(libraryFile.libraryItems || libraryFile.library)) {
+    if (!libraryFile || !libraryFile.library) {
      return;
    }

@ -39,17 +37,17 @@ class Library {
      targetLibraryItem: LibraryItem,
    ) => {
      return !existingLibraryItems.find((libraryItem) => {
-        if (libraryItem.elements.length !== targetLibraryItem.elements.length) {
+        if (libraryItem.length !== targetLibraryItem.length) {
          return false;
        }

        // detect z-index difference by checking the excalidraw elements
        // are in order
-        return libraryItem.elements.every((libItemExcalidrawItem, idx) => {
+        return libraryItem.every((libItemExcalidrawItem, idx) => {
          return (
-            libItemExcalidrawItem.id === targetLibraryItem.elements[idx].id &&
+            libItemExcalidrawItem.id === targetLibraryItem[idx].id &&
            libItemExcalidrawItem.versionNonce ===
-              targetLibraryItem.elements[idx].versionNonce
+              targetLibraryItem[idx].versionNonce
          );
        });
      });
@ -57,20 +55,15 @@ class Library {

    const existingLibraryItems = await this.loadLibrary();

-    const library = libraryFile.libraryItems || libraryFile.library || [];
-    const restoredLibItems = restoreLibraryItems(
-      library,
-      defaultStatus as "published" | "unpublished",
-    );
-    const filteredItems = [];
-    for (const item of restoredLibItems) {
-      const restoredItem = this.restoreLibraryItem(item as LibraryItem);
+    const filtered = libraryFile.library!.reduce((acc, libraryItem) => {
+      const restoredItem = this.restoreLibraryItem(libraryItem);
      if (restoredItem && isUniqueitem(existingLibraryItems, restoredItem)) {
-        filteredItems.push(restoredItem);
+        acc.push(restoredItem);
      }
-    }
+      return acc;
+    }, [] as Mutable<LibraryItems>);

-    await this.saveLibrary([...filteredItems, ...existingLibraryItems]);
+    await this.saveLibrary([...existingLibraryItems, ...filtered]);
  }

  loadLibrary = (): Promise<LibraryItems> => {
@ -97,7 +90,7 @@ class Library {
        this.libraryCache = JSON.parse(JSON.stringify(items));

        resolve(items);
-      } catch (error: any) {
+      } catch (error) {
        console.error(error);
        resolve([]);
      }
@ -112,7 +105,7 @@ class Library {
      // immediately
      this.libraryCache = JSON.parse(serializedItems);
      await this.app.props.onLibraryChange?.(items);
-    } catch (error: any) {
+    } catch (error) {
      this.libraryCache = prevLibraryItems;
      throw error;
    }
--- a/src/data/restore.ts
+++ b/src/data/restore.ts
@ -3,14 +3,13 @@ import {
  ExcalidrawSelectionElement,
  FontFamilyValues,
 } from "../element/types";
-import {
-  AppState,
-  BinaryFiles,
-  LibraryItem,
-  NormalizedZoomValue,
-} from "../types";
+import { AppState, BinaryFiles, NormalizedZoomValue } from "../types";
 import { ImportedDataState } from "./types";
-import { getNormalizedDimensions, isInvisiblySmallElement } from "../element";
+import {
+  getElementMap,
+  getNormalizedDimensions,
+  isInvisiblySmallElement,
+} from "../element";
 import { isLinearElementType } from "../element/typeChecks";
 import { randomId } from "../random";
 import {
@ -22,8 +21,6 @@ import {
 import { getDefaultAppState } from "../appState";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { bumpVersion } from "../element/mutateElement";
-import { getUpdatedTimestamp } from "../utils";
-import { arrayToMap } from "../utils";

 type RestoredAppState = Omit<
  AppState,
@ -62,12 +59,9 @@ const getFontFamilyByName = (fontFamilyName: string): FontFamilyValues => {

 const restoreElementWithProperties = <
  T extends ExcalidrawElement,
-  K extends Pick<T, keyof Omit<Required<T>, keyof ExcalidrawElement>>,
+  K extends Pick<T, keyof Omit<Required<T>, keyof ExcalidrawElement>>
 >(
-  element: Required<T> & {
-    /** @deprecated */
-    boundElementIds?: readonly ExcalidrawElement["id"][];
-  },
+  element: Required<T>,
  extra: Pick<
    T,
    // This extra Pick<T, keyof K> ensure no excess properties are passed.
@ -101,18 +95,14 @@ const restoreElementWithProperties = <
    strokeSharpness:
      element.strokeSharpness ??
      (isLinearElementType(element.type) ? "round" : "sharp"),
-    boundElements: element.boundElementIds
-      ? element.boundElementIds.map((id) => ({ type: "arrow", id }))
-      : element.boundElements ?? [],
-    updated: element.updated ?? getUpdatedTimestamp(),
-    link: element.link ?? null,
+    boundElementIds: element.boundElementIds ?? [],
  };

-  return {
+  return ({
    ...base,
    ...getNormalizedDimensions(base),
    ...extra,
-  } as unknown as T;
+  } as unknown) as T;
 };

 const restoreElement = (
@ -123,9 +113,10 @@ const restoreElement = (
      let fontSize = element.fontSize;
      let fontFamily = element.fontFamily;
      if ("font" in element) {
-        const [fontPx, _fontFamily]: [string, string] = (
-          element as any
-        ).font.split(" ");
+        const [fontPx, _fontFamily]: [
+          string,
+          string,
+        ] = (element as any).font.split(" ");
        fontSize = parseInt(fontPx, 10);
        fontFamily = getFontFamilyByName(_fontFamily);
      }
@ -136,8 +127,6 @@ const restoreElement = (
        baseline: element.baseline,
        textAlign: element.textAlign || DEFAULT_TEXT_ALIGN,
        verticalAlign: element.verticalAlign || DEFAULT_VERTICAL_ALIGN,
-        containerId: element.containerId ?? null,
-        originalText: element.originalText || element.text,
      });
    case "freedraw": {
      return restoreElementWithProperties(element, {
@ -211,14 +200,14 @@ export const restoreElements = (
  /** NOTE doesn't serve for reconciliation */
  localElements: readonly ExcalidrawElement[] | null | undefined,
 ): ExcalidrawElement[] => {
-  const localElementsMap = localElements ? arrayToMap(localElements) : null;
+  const localElementsMap = localElements ? getElementMap(localElements) : null;
  return (elements || []).reduce((elements, element) => {
    // filtering out selection, which is legacy, no longer kept in elements,
    // and causing issues if retained
    if (element.type !== "selection" && !isInvisiblySmallElement(element)) {
      let migratedElement: ExcalidrawElement | null = restoreElement(element);
      if (migratedElement) {
-        const localElement = localElementsMap?.get(element.id);
+        const localElement = localElementsMap?.[element.id];
        if (localElement && localElement.version > migratedElement.version) {
          migratedElement = bumpVersion(migratedElement, localElement.version);
        }
@ -262,6 +251,7 @@ export const restoreAppState = (
      typeof appState.zoom === "number"
        ? {
            value: appState.zoom as NormalizedZoomValue,
+            translation: defaultAppState.zoom.translation,
          }
        : appState.zoom || defaultAppState.zoom,
  };
@ -284,30 +274,3 @@ export const restore = (
    files: data?.files || {},
  };
 };
-
-export const restoreLibraryItems = (
-  libraryItems: NonOptional<ImportedDataState["libraryItems"]>,
-  defaultStatus: LibraryItem["status"],
-) => {
-  const restoredItems: LibraryItem[] = [];
-  for (const item of libraryItems) {
-    // migrate older libraries
-    if (Array.isArray(item)) {
-      restoredItems.push({
-        status: defaultStatus,
-        elements: item,
-        id: randomId(),
-        created: Date.now(),
-      });
-    } else {
-      const _item = item as MarkOptional<LibraryItem, "id" | "status">;
-      restoredItems.push({
-        ..._item,
-        id: _item.id || randomId(),
-        status: _item.status || defaultStatus,
-        created: _item.created || Date.now(),
-      });
-    }
-  }
-  return restoredItems;
-};
--- a/src/data/types.ts
+++ b/src/data/types.ts
@ -1,7 +1,6 @@
 import { ExcalidrawElement } from "../element/types";
-import { AppState, BinaryFiles, LibraryItems, LibraryItems_v1 } from "../types";
+import { AppState, BinaryFiles, LibraryItems } from "../types";
 import type { cleanAppStateForExport } from "../appState";
-import { VERSIONS } from "../constants";

 export interface ExportedDataState {
  type: string;
@ -19,18 +18,15 @@ export interface ImportedDataState {
  elements?: readonly ExcalidrawElement[] | null;
  appState?: Readonly<Partial<AppState>> | null;
  scrollToContent?: boolean;
-  libraryItems?: LibraryItems | LibraryItems_v1;
+  libraryItems?: LibraryItems;
  files?: BinaryFiles;
 }

 export interface ExportedLibraryData {
  type: string;
-  version: typeof VERSIONS.excalidrawLibrary;
+  version: number;
  source: string;
-  libraryItems: LibraryItems;
+  library: LibraryItems;
 }

-export interface ImportedLibraryData extends Partial<ExportedLibraryData> {
-  /** @deprecated v1 */
-  library?: LibraryItems;
-}
+export interface ImportedLibraryData extends Partial<ExportedLibraryData> {}
--- a/src/disitrubte.ts
+++ b/src/disitrubte.ts
@ -1,7 +1,17 @@
 import { ExcalidrawElement } from "./element/types";
 import { newElementWith } from "./element/mutateElement";
-import { getMaximumGroups } from "./groups";
-import { getCommonBoundingBox } from "./element/bounds";
+import { getCommonBounds } from "./element";
+
+interface Box {
+  minX: number;
+  minY: number;
+  maxX: number;
+  maxY: number;
+  midX: number;
+  midY: number;
+  width: number;
+  height: number;
+}

 export interface Distribution {
  space: "between";
@ -88,3 +98,39 @@ export const distributeElements = (
    );
  });
 };
+
+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 getCommonBoundingBox = (elements: ExcalidrawElement[]): Box => {
+  const [minX, minY, maxX, maxY] = getCommonBounds(elements);
+  return {
+    minX,
+    minY,
+    maxX,
+    maxY,
+    width: maxX - minX,
+    height: maxY - minY,
+    midX: (minX + maxX) / 2,
+    midY: (minY + maxY) / 2,
+  };
+};
--- 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