reintroduce copy/paste on Apple devices and on touch screens

* chore: fix yarn.lock file

* ts fix

.codesandbox/tasks.json

@@ -0,0 +1,43 @@
+{
+  // These tasks will run in order when initializing your CodeSandbox project.
+  "setupTasks": [
+    {
+      "name": "Install Dependencies",
+      "command": "yarn install"
+    }
+  ],
+
+  // These tasks can be run from CodeSandbox. Running one will open a log in the app.
+  "tasks": {
+    "build": {
+      "name": "Build",
+      "command": "yarn build",
+      "runAtStart": false
+    },
+    "fix": {
+      "name": "Fix",
+      "command": "yarn fix",
+      "runAtStart": false
+    },
+    "prettier": {
+      "name": "Prettify",
+      "command": "yarn prettier",
+      "runAtStart": false
+    },
+    "start": {
+      "name": "Start Excalidraw",
+      "command": "yarn start",
+      "runAtStart": true
+    },
+    "test": {
+      "name": "Run Tests",
+      "command": "yarn test",
+      "runAtStart": false
+    },
+    "install-deps": {
+      "name": "Install Dependencies",
+      "command": "yarn install",
+      "restartOn": { "files": ["yarn.lock"] }
+    }
+  }
+}

.env.development

@@ -11,3 +11,12 @@ REACT_APP_WS_SERVER_URL=http://localhost:3002
 REACT_APP_PORTAL_URL=
 
 REACT_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8","authDomain":"excalidraw-oss-dev.firebaseapp.com","projectId":"excalidraw-oss-dev","storageBucket":"excalidraw-oss-dev.appspot.com","messagingSenderId":"664559512677","appId":"1:664559512677:web:a385181f2928d328a7aa8c"}'
+
+# put these in your .env.local, or make sure you don't commit!
+# must be lowercase `true` when turned on
+#
+# whether to enable Service Workers in development
+REACT_APP_DEV_ENABLE_SW=
+# whether to disable live reload / HMR. Usuaully what you want to do when
+# debugging Service Workers.
+REACT_APP_DEV_DISABLE_LIVE_RELOAD=

.env.production

@@ -13,3 +13,5 @@ REACT_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyAd15pYlMci_xIp9ko6wkEsDzAAA0Dn0RU","
 
 # production-only vars
 REACT_APP_GOOGLE_ANALYTICS_ID=UA-387204-13
+
+REACT_APP_PLUS_APP=https://app.excalidraw.com

.github/dependabot.yml

@@ -1,37 +0,0 @@
-version: 2
-updates:
-  - package-ecosystem: npm
-    directory: /
-    schedule:
-      interval: weekly
-      day: sunday
-      time: "01:00"
-    reviewers:
-      - lipis
-    assignees:
-      - lipis
-    open-pull-requests-limit: 20
-
-  - package-ecosystem: npm
-    directory: /src/packages/excalidraw/
-    schedule:
-      interval: weekly
-      day: sunday
-      time: "01:00"
-    reviewers:
-      - ad1992
-    assignees:
-      - ad1992
-    open-pull-requests-limit: 20
-
-  - package-ecosystem: npm
-    directory: /src/packages/utils/
-    schedule:
-      interval: weekly
-      day: sunday
-      time: "01:00"
-    reviewers:
-      - ad1992
-    assignees:
-      - ad1992
-    open-pull-requests-limit: 20

.github/workflows/autorelease-excalidraw.yml

@@ -1,4 +1,4 @@
-name: Auto release @excalidraw/excalidraw-next
+name: Auto release excalidraw next
 on:
   push:
     branches:

.github/workflows/autorelease-preview.yml

@@ -1,4 +1,4 @@
-name: Auto release preview @excalidraw/excalidraw-preview
+name: Auto release excalidraw preview
 on:
   issue_comment:
     types: [created, edited]
@@ -6,7 +6,7 @@ on:
 jobs:
   Auto-release-excalidraw-preview:
     name: Auto release preview
-    if: github.event.comment.body == '@excalibot release package' && github.event.issue.pull_request
+    if: github.event.comment.body == '@excalibot trigger release' && github.event.issue.pull_request
     runs-on: ubuntu-latest
     steps:
       - name: React to release comment

.github/workflows/publish-docker.yml

@@ -10,11 +10,16 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - name: Checkout repository
-      - uses: docker/build-push-action@v2
+        uses: actions/checkout@v3
+      - name: Login to DockerHub
+        uses: docker/login-action@v2
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
-          repository: excalidraw/excalidraw
+      - name: Build and push
-          tag_with_ref: true
+        uses: docker/build-push-action@v3
-          tag_with_sha: true
+        with:
+          context: .
+          push: true
+          tags: excalidraw/excalidraw:latest

.gitignore

@@ -19,11 +19,9 @@ logs
 node_modules
 npm-debug.log*
 package-lock.json
-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
-

README.md

@@ -88,7 +88,7 @@ Try out [`@excalidraw/excalidraw`](https://www.npmjs.com/package/@excalidraw/exc
 
 ### Code Sandbox
 
-- Go to https://codesandbox.io/s/github/excalidraw/excalidraw
+- Go to https://codesandbox.io/p/github/excalidraw/excalidraw
   - You may need to sign in with GitHub and reload the page
 - You can start coding instantly, and even send PRs from there!
 

dev-docs/.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

dev-docs/README.md

@@ -0,0 +1,41 @@
+# Website
+
+This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+Using SSH:
+
+```
+$ USE_SSH=true yarn deploy
+```
+
+Not using SSH:
+
+```
+$ GIT_USER=<Your GitHub username> yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

dev-docs/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve("@docusaurus/core/lib/babel/preset")],
+};

dev-docs/docs/codebase/overview.md

@@ -0,0 +1,6 @@
+---
+sidebar_position: 1
+title: Overview
+---
+
+In development. For now, refer to [excalidraw Readme](https://github.com/excalidraw/excalidraw/blob/master/README.md).

dev-docs/docs/get-started.md

@@ -0,0 +1,8 @@
+---
+sidebar_position: 1
+title: Introduction
+---
+
+Want to integrate Excalidraw into your app? Head over to the [package docs](/docs/package/overview).
+
+If you're looking into the Excalidraw codebase itself, start [here](/docs/codebase/overview).

dev-docs/docs/package/overview.md

@@ -0,0 +1,6 @@
+---
+sidebar_position: 1
+title: Overview
+---
+
+In development. For now, refer to [excalidraw package readme](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md).

dev-docs/docusaurus.config.js

@@ -0,0 +1,121 @@
+// @ts-check
+// Note: type annotations allow type checking and IDEs autocompletion
+
+const lightCodeTheme = require("prism-react-renderer/themes/github");
+const darkCodeTheme = require("prism-react-renderer/themes/dracula");
+
+/** @type {import('@docusaurus/types').Config} */
+const config = {
+  title: "Excalidraw developer docs",
+  tagline:
+    "For Excalidraw contributors or those integrating the Excalidraw editor",
+  url: "https://docs.excalidraw.com.com",
+  baseUrl: "/",
+  onBrokenLinks: "throw",
+  onBrokenMarkdownLinks: "warn",
+  favicon: "img/favicon.ico",
+  organizationName: "Excalidraw", // Usually your GitHub org/user name.
+  projectName: "excalidraw", // Usually your repo name.
+
+  // Even if you don't use internalization, you can use this field to set useful
+  // metadata like html lang. For example, if your site is Chinese, you may want
+  // to replace "en" with "zh-Hans".
+  i18n: {
+    defaultLocale: "en",
+    locales: ["en"],
+  },
+
+  presets: [
+    [
+      "classic",
+      /** @type {import('@docusaurus/preset-classic').Options} */
+      ({
+        docs: {
+          sidebarPath: require.resolve("./sidebars.js"),
+          // Please change this to your repo.
+          editUrl: "https://github.com/excalidraw/docs/tree/master/",
+        },
+        theme: {
+          customCss: require.resolve("./src/css/custom.css"),
+        },
+      }),
+    ],
+  ],
+
+  themeConfig:
+    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
+    ({
+      navbar: {
+        title: "Excalidraw Docs",
+        logo: {
+          alt: "Excalidraw Logo",
+          src: "img/logo.svg",
+        },
+        items: [
+          {
+            type: "doc",
+            docId: "get-started",
+            position: "left",
+            label: "Get started",
+          },
+          {
+            to: "https://blog.excalidraw.com",
+            label: "Blog",
+            position: "left",
+          },
+          {
+            to: "https://github.com/excalidraw/excalidraw",
+            label: "GitHub",
+            position: "right",
+          },
+        ],
+      },
+      footer: {
+        style: "dark",
+        links: [
+          {
+            title: "Docs",
+            items: [
+              {
+                label: "Get Started",
+                to: "/docs/get-started",
+              },
+            ],
+          },
+          {
+            title: "Community",
+            items: [
+              {
+                label: "Discord",
+                href: "https://discord.gg/UexuTaE",
+              },
+              {
+                label: "Twitter",
+                href: "https://twitter.com/excalidraw",
+              },
+            ],
+          },
+          {
+            title: "More",
+            items: [
+              {
+                label: "Blog",
+                to: "https://blog.excalidraw.com",
+              },
+              {
+                label: "GitHub",
+                to: "https://github.com/excalidraw/excalidraw",
+              },
+            ],
+          },
+        ],
+        copyright: `Made with ❤️ Built with Docusaurus`,
+      },
+      prism: {
+        theme: lightCodeTheme,
+        darkTheme: darkCodeTheme,
+      },
+    }),
+};
+
+module.exports = config;

dev-docs/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "docs",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "docusaurus": "docusaurus",
+    "start": "docusaurus start --port 3003",
+    "build": "docusaurus build",
+    "swizzle": "docusaurus swizzle",
+    "deploy": "docusaurus deploy",
+    "clear": "docusaurus clear",
+    "serve": "docusaurus serve",
+    "write-translations": "docusaurus write-translations",
+    "write-heading-ids": "docusaurus write-heading-ids",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@docusaurus/core": "2.0.0-rc.1",
+    "@docusaurus/preset-classic": "2.0.0-rc.1",
+    "@mdx-js/react": "^1.6.22",
+    "clsx": "^1.2.1",
+    "prism-react-renderer": "^1.3.5",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "2.0.0-rc.1",
+    "@tsconfig/docusaurus": "^1.0.5",
+    "typescript": "^4.7.4"
+  },
+  "browserslist": {
+    "production": [
+      ">0.5%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "engines": {
+    "node": ">=16.14"
+  }
+}

dev-docs/sidebars.js

@@ -0,0 +1,31 @@
+/**
+ * Creating a sidebar enables you to:
+ - create an ordered group of docs
+ - render a sidebar for each doc of that group
+ - provide next/previous navigation
+
+ The sidebars can be generated from the filesystem, or explicitly defined here.
+
+ Create as many sidebars as you want.
+ */
+
+// @ts-check
+
+/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
+const sidebars = {
+  // By default, Docusaurus generates a sidebar from the docs folder structure
+  tutorialSidebar: [{ type: "autogenerated", dirName: "." }],
+
+  // But you can create a sidebar manually
+  /*
+  tutorialSidebar: [
+    {
+      type: 'category',
+      label: 'Tutorial',
+      items: ['hello'],
+    },
+  ],
+   */
+};
+
+module.exports = sidebars;

dev-docs/src/components/Homepage/index.js

@@ -0,0 +1,62 @@
+import React from "react";
+import clsx from "clsx";
+import styles from "./styles.module.css";
+
+const FeatureList = [
+  {
+    title: "Learn how Excalidraw works",
+    Svg: require("@site/static/img/undraw_innovative.svg").default,
+    description: (
+      <>Want to contribute to Excalidraw but got lost in the codebase?</>
+    ),
+  },
+  {
+    title: "Integrate Excalidraw",
+    Svg: require("@site/static/img/undraw_blank_canvas.svg").default,
+    description: (
+      <>
+        Want to build your own app powered by Excalidraw by don't know where to
+        start?
+      </>
+    ),
+  },
+  {
+    title: "Help us improve",
+    Svg: require("@site/static/img/undraw_add_files.svg").default,
+    description: (
+      <>
+        Are the docs missing something? Anything you had trouble understanding
+        or needs an explanation? Come contribute to the docs to make them even
+        better!
+      </>
+    ),
+  },
+];
+
+function Feature({ Svg, title, description }) {
+  return (
+    <div className={clsx("col col--4")}>
+      <div className="text--center">
+        <Svg className={styles.featureSvg} role="img" />
+      </div>
+      <div className="text--center padding-horiz--md">
+        <h3>{title}</h3>
+        <p>{description}</p>
+      </div>
+    </div>
+  );
+}
+
+export default function HomepageFeatures() {
+  return (
+    <section className={styles.features}>
+      <div className="container">
+        <div className="row">
+          {FeatureList.map((props, idx) => (
+            <Feature key={idx} {...props} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

dev-docs/src/components/Homepage/index.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import clsx from "clsx";
+import styles from "./styles.module.css";
+
+type FeatureItem = {
+  title: string;
+  Svg: React.ComponentType<React.ComponentProps<"svg">>;
+  description: JSX.Element;
+};
+
+const FeatureList: FeatureItem[] = [
+  {
+    title: "Easy to Use",
+    Svg: require("@site/static/img/undraw_docusaurus_mountain.svg").default,
+    description: (
+      <>
+        Docusaurus was designed from the ground up to be easily installed and
+        used to get your website up and running quickly.
+      </>
+    ),
+  },
+  {
+    title: "Focus on What Matters",
+    Svg: require("@site/static/img/undraw_docusaurus_tree.svg").default,
+    description: (
+      <>
+        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
+        ahead and move your docs into the <code>docs</code> directory.
+      </>
+    ),
+  },
+  {
+    title: "Powered by React",
+    Svg: require("@site/static/img/undraw_docusaurus_react.svg").default,
+    description: (
+      <>
+        Extend or customize your website layout by reusing React. Docusaurus can
+        be extended while reusing the same header and footer.
+      </>
+    ),
+  },
+];
+
+function Feature({ title, Svg, description }: FeatureItem) {
+  return (
+    <div className={clsx("col col--4")}>
+      <div className="text--center">
+        <Svg className={styles.featureSvg} role="img" />
+      </div>
+      <div className="text--center padding-horiz--md">
+        <h3>{title}</h3>
+        <p>{description}</p>
+      </div>
+    </div>
+  );
+}
+
+export default function HomepageFeatures(): JSX.Element {
+  return (
+    <section className={styles.features}>
+      <div className="container">
+        <div className="row">
+          {FeatureList.map((props, idx) => (
+            <Feature key={idx} {...props} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

dev-docs/src/components/Homepage/styles.module.css

@@ -0,0 +1,11 @@
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featureSvg {
+  height: 200px;
+  width: 200px;
+}

dev-docs/src/css/custom.css

@@ -0,0 +1,43 @@
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+
+/* You can override the default Infima variables here. */
+:root {
+  --ifm-color-primary: #6965db;
+  --ifm-color-primary-dark: #5b57d1;
+  --ifm-color-primary-darker: #5b57d1;
+  --ifm-color-primary-darkest: #4a47b1;
+  --ifm-color-primary-light: #5b57d1;
+  --ifm-color-primary-lighter: #5b57d1;
+  --ifm-color-primary-lightest: #5b57d1;
+  --ifm-code-font-size: 95%;
+}
+
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+[data-theme="dark"] {
+  --ifm-color-primary: #5650f0;
+  --ifm-color-primary-dark: #4b46d8;
+  --ifm-color-primary-darker: #4b46d8;
+  --ifm-color-primary-darkest: #3e39be;
+  --ifm-color-primary-light: #3f3d64;
+  --ifm-color-primary-lighter: #3f3d64;
+  --ifm-color-primary-lightest: #3f3d64;
+}
+
+.docusaurus-highlight-code-line {
+  background-color: rgba(0, 0, 0, 0.1);
+  display: block;
+  margin: 0 calc(-1 * var(--ifm-pre-padding));
+  padding: 0 var(--ifm-pre-padding);
+}
+
+[data-theme="dark"] .docusaurus-highlight-code-line {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+[data-theme="dark"] .navbar__logo {
+  filter: invert(93%) hue-rotate(180deg);
+}

dev-docs/src/pages/index.js

@@ -0,0 +1,42 @@
+import React from "react";
+import clsx from "clsx";
+import Layout from "@theme/Layout";
+import Link from "@docusaurus/Link";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import styles from "./index.module.css";
+import HomepageFeatures from "@site/src/components/Homepage";
+
+function HomepageHeader() {
+  const { siteConfig } = useDocusaurusContext();
+  return (
+    <header className={clsx("hero hero--primary", styles.heroBanner)}>
+      <div className="container">
+        <h1 className="hero__title">{siteConfig.title}</h1>
+        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <div className={styles.buttons}>
+          <Link
+            className="button button--secondary button--lg"
+            to="/docs/get-started"
+          >
+            Get started
+          </Link>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+export default function Home() {
+  const { siteConfig } = useDocusaurusContext();
+  return (
+    <Layout
+      title={`Hello from ${siteConfig.title}`}
+      description="Description will go into a meta tag in <head />"
+    >
+      <HomepageHeader />
+      <main>
+        <HomepageFeatures />
+      </main>
+    </Layout>
+  );
+}

dev-docs/src/pages/index.module.css

@@ -0,0 +1,27 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroBanner {
+  padding: 4rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+[data-theme="dark"] .heroBanner {
+  color: #fff;
+}
+
+@media screen and (max-width: 996px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

dev-docs/src/pages/index.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import clsx from "clsx";
+import Layout from "@theme/Layout";
+import Link from "@docusaurus/Link";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import styles from "./index.module.css";
+import HomepageFeatures from "@site/src/components/Homepage";
+
+function HomepageHeader() {
+  const { siteConfig } = useDocusaurusContext();
+  return (
+    <header className={clsx("hero hero--primary", styles.heroBanner)}>
+      <div className="container">
+        <h1 className="hero__title">{siteConfig.title}</h1>
+        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <div className={styles.buttons}>
+          <Link
+            className="button button--secondary button--lg"
+            to="/docs/get-started"
+          >
+            Get started
+          </Link>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+export default function Home() {
+  const { siteConfig } = useDocusaurusContext();
+  return (
+    <Layout
+      title={`Hello from ${siteConfig.title}`}
+      description="Description will go into a meta tag in <head />"
+    >
+      <HomepageHeader />
+      <main>
+        <HomepageFeatures />
+      </main>
+    </Layout>
+  );
+}

dev-docs/src/pages/markdown-page.md

@@ -0,0 +1,7 @@
+---
+title: Markdown page example
+---
+
+# Markdown page example
+
+You don't need React to write simple standalone pages.

dev-docs/static/img/logo.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 80 180" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2">
+	<path d="M22.197 150.382c-4.179-3.359-10.618-9.051-15.702-13.946l-4.01-3.813.734-5.009c.396-2.732 1.13-8.083 1.582-11.839.508-3.757 1.017-7.286 1.186-7.798.226-.683 0-1.025-.621-1.025-1.073 0-1.13.285 1.807-9.107a617.602 617.602 0 0 1 2.203-7.229c.113-.398.565-.569 1.073-.398.508.227.791.683.621 1.081-.169.455.113.911.565 1.082.621.227.565.683-.395 2.333-1.525 2.562-5.422 24.419-5.648 31.477-.17 5.009-.17 5.066 1.92 7.912 2.033 2.789 6.721 7.001 13.951 12.351 2.033 1.537 4.067 3.245 4.631 3.814.848 1.024 1.243.74 8.36-6.887 4.123-4.383 8.698-8.88 10.166-10.018l2.711-2.049-2.089-4.44c-1.13-2.391-5.705-11.612-10.223-20.377-9.433-18.442-7.513-16.678-18.47-16.849l-7.117-.056-2.372-2.733c-2.485-2.903-2.824-3.984-1.638-5.805.452-.627.791-1.651.791-2.277 0-1.025.395-1.196 2.655-1.309 1.412-.057 2.711-.228 2.88-.399.17-.171.396-3.7.565-7.855l.226-7.513-3.784-8.197C2.485 39.844 0 33.583 0 31.533c0-1.081.226-1.992.452-1.992.565 0 .565.057 23.553 48.382 10.675 22.426 20.785 43.544 22.479 47.016 1.695 3.472 3.22 6.659 3.333 7.115.113.512-3.785 4.439-9.998 9.961-5.591 5.008-10.505 9.562-10.957 10.074-1.299 1.594-3.219 1.082-6.665-1.707Zm1.921-65.458c-2.599-5.066-2.712-5.123-9.828-5.464-6.27-.342-6.383-.285-6.383.911 0 .683-.226 1.593-.508 2.049-.339.512-.113 1.423.678 2.675l1.242 1.935h5.649c3.106.057 6.664.285 7.907.512 1.243.228 2.316.342 2.429.285.113-.057-.452-1.366-1.186-2.903Zm-4.745-9.107c-.452-1.195-1.638-3.7-2.598-5.578-1.581-3.188-1.751-3.301-2.146-1.992-.226.797-.396 3.13-.452 5.236-.057 4.155-.17 4.098 4.575 4.383l1.525.057-.904-2.106Z" style="fill-rule:nonzero;stroke:#000;stroke-width:2px" transform="matrix(1.01351 0 0 -1 9.088 166.517)" />
+	<path d="M23.892 136.835c-1.017-.74-1.299-1.48-1.299-3.358 0-2.22.169-2.562 1.694-3.188 1.525-.626 1.92-.569 3.671.626 2.316 1.594 2.373 1.992.678 4.554-1.468 2.22-2.937 2.618-4.744 1.366Zm3.219-2.049c.904-1.594.339-2.789-1.355-2.789-1.525 0-2.203 1.536-1.356 3.073.678 1.253 1.977 1.139 2.711-.284ZM59.306 124.028c0-.285-.339-.569-.735-.569-.339 0-1.299-1.594-2.033-3.529-2.259-5.92-24.852-50.943-24.908-49.52 0 .74-.339 1.252-.904 1.252-.791 0-.904-.456-.565-2.675.339-2.562.113-3.131-7.907-18.841-4.519-8.936-9.376-18.271-10.788-20.775-1.469-2.619-2.598-5.465-2.711-6.66-.17-2.049.056-2.334 4.97-6.603 2.824-2.504 6.439-5.635 8.02-7.058C28.862 2.504 32.194-.114 33.098.057c1.356.228 22.31 22.369 22.367 23.622 0 .569-1.017 9.221-2.259 19.238-2.147 17.076-4.18 37.055-3.954 38.99.169 1.196-.678 7.229-1.299 9.847-.509 2.05-.283 2.903 3.784 12.238 2.372 5.521 5.479 12.295 6.834 15.027 1.299 2.732 2.429 5.123 2.429 5.294 0 .17-.395.284-.847.284-.452 0-.847-.228-.847-.569ZM46.315 81.509c.621-3.984 1.864-13.547 2.767-21.231 1.751-14.116 3.785-29.769 4.349-33.753.339-1.993.113-2.391-3.558-6.489-6.382-7.229-13.16-14.344-15.476-16.165l-2.146-1.708-11.014 10.359C11.07 21.971 10.223 22.939 10.844 24.077c.339.626 3.22 5.92 6.383 11.725 3.163 5.806 7.342 13.547 9.263 17.19 1.977 3.7 3.784 6.887 4.123 7.058.395.228.508-5.521.395-17.759-.226-18.271-.169-18.328 1.638-17.929.226 0 .396 9.221.396 20.434v20.377l5.93 11.953c3.276 6.603 5.987 11.896 6.1 11.84.113-.058.678-3.416 1.243-7.457Z" style="fill-rule:nonzero;stroke:#000;stroke-width:2px" transform="matrix(1.01351 0 0 -1 9.088 166.517)" />
+</svg>

dev-docs/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  // This file is not used in compilation. It is here just for a nice editor experience.
+  "extends": "@tsconfig/docusaurus/tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "."
+  }
+}

package.json

@@ -22,36 +22,37 @@
     "@sentry/browser": "6.2.5",
     "@sentry/integrations": "6.2.5",
     "@testing-library/jest-dom": "5.16.2",
-    "@testing-library/react": "12.1.2",
+    "@testing-library/react": "12.1.5",
-    "@tldraw/vec": "1.4.3",
+    "@tldraw/vec": "1.7.1",
     "@types/jest": "27.4.0",
     "@types/pica": "5.1.3",
-    "@types/react": "17.0.39",
+    "@types/react": "18.0.15",
-    "@types/react-dom": "17.0.11",
+    "@types/react-dom": "18.0.6",
     "@types/socket.io-client": "1.4.36",
-    "browser-fs-access": "0.24.1",
+    "browser-fs-access": "0.29.1",
     "clsx": "1.1.1",
     "fake-indexeddb": "3.1.7",
     "firebase": "8.3.3",
-    "i18next-browser-languagedetector": "6.1.2",
+    "i18next-browser-languagedetector": "6.1.4",
     "idb-keyval": "6.0.3",
     "image-blob-reduce": "3.0.1",
     "jotai": "1.6.4",
     "lodash.throttle": "4.1.1",
-    "nanoid": "3.1.32",
+    "nanoid": "3.3.3",
     "open-color": "1.9.1",
     "pako": "1.0.11",
-    "perfect-freehand": "1.0.16",
+    "perfect-freehand": "1.2.0",
+    "pica": "7.1.1",
     "png-chunk-text": "1.0.0",
     "png-chunks-encode": "1.0.0",
     "png-chunks-extract": "1.0.0",
     "points-on-curve": "0.2.0",
     "pwacompat": "2.0.17",
-    "react": "17.0.2",
+    "react": "18.2.0",
-    "react-dom": "17.0.2",
+    "react-dom": "18.2.0",
     "react-scripts": "4.0.3",
     "roughjs": "4.5.2",
-    "sass": "1.49.7",
+    "sass": "1.51.0",
     "socket.io-client": "2.3.1",
     "typescript": "4.5.5"
   },
@@ -59,22 +60,19 @@
     "@excalidraw/eslint-config": "1.0.0",
     "@excalidraw/prettier-config": "1.0.2",
     "@types/chai": "4.3.0",
-    "@types/lodash.throttle": "4.1.6",
+    "@types/lodash.throttle": "4.1.7",
     "@types/pako": "1.0.3",
-    "@types/resize-observer-browser": "0.1.6",
+    "@types/resize-observer-browser": "0.1.7",
     "chai": "4.3.6",
-    "dotenv": "10.0.0",
+    "dotenv": "16.0.1",
-    "eslint-config-prettier": "8.3.0",
+    "eslint-config-prettier": "8.5.0",
     "eslint-plugin-prettier": "3.3.1",
     "husky": "7.0.4",
-    "jest-canvas-mock": "2.3.1",
+    "jest-canvas-mock": "2.4.0",
     "lint-staged": "12.3.7",
     "pepjs": "0.5.3",
-    "prettier": "2.5.1",
+    "prettier": "2.6.2",
-    "rewire": "5.0.0"
+    "rewire": "6.0.0"
-  },
-  "resolutions": {
-    "@typescript-eslint/typescript-estree": "5.10.2"
   },
   "engines": {
     "node": ">=14.0.0"
@@ -94,7 +92,8 @@
     "build:app:docker": "REACT_APP_DISABLE_SENTRY=true react-scripts build",
     "build:app": "REACT_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA react-scripts build",
     "build:version": "node ./scripts/build-version.js",
-    "build": "yarn build:app && yarn build:version",
+    "build:prebuild": "node ./scripts/prebuild.js",
+    "build": "yarn build:prebuild && yarn build:app && yarn build:version",
     "eject": "react-scripts eject",
     "fix:code": "yarn test:code --fix",
     "fix:other": "yarn prettier --write",
@@ -112,6 +111,8 @@
     "test:typecheck": "tsc",
     "test:update": "yarn test:app --updateSnapshot --watchAll=false",
     "test": "yarn test:app",
-    "autorelease": "node scripts/autorelease.js"
+    "autorelease": "node scripts/autorelease.js",
+    "prerelease": "node scripts/prerelease.js",
+    "release": "node scripts/release.js"
   }
 }

public/index.html

@@ -52,6 +52,44 @@
       content="Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them."
     />
 
+    <!------------------------------------------------------------------------->
+    <!--   to minimize white flash on load when user has dark mode enabled   -->
+    <script>
+      try {
+        //
+        const theme = window.localStorage.getItem("excalidraw-theme");
+        if (theme === "dark") {
+          document.documentElement.classList.add("dark");
+        }
+      } catch {}
+    </script>
+    <style>
+      html.dark {
+        background-color: #121212;
+        color: #fff;
+      }
+    </style>
+    <!------------------------------------------------------------------------->
+
+    <script>
+      // Redirect Excalidraw+ users which have auto-redirect enabled.
+      //
+      // Redirect only the bare root path, so link/room/library urls are not
+      // redirected.
+      //
+      // Putting into index.html for best performance (can't redirect on server
+      // due to location.hash checks).
+      if (
+        window.location.pathname === "/" &&
+        !window.location.hash &&
+        !window.location.search &&
+        // if its present redirect
+        document.cookie.includes("excplus-autoredirect=true")
+      ) {
+        window.location.href = "https://app.excalidraw.com";
+      }
+    </script>
+
     <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
 
     <!-- Excalidraw version -->
@@ -79,6 +117,22 @@
     />
 
     <link rel="stylesheet" href="fonts.css" type="text/css" />
+    <% if (process.env.REACT_APP_DEV_DISABLE_LIVE_RELOAD==="true" ) { %>
+    <script>
+      {
+        const _WebSocket = window.WebSocket;
+        window.WebSocket = function (url) {
+          if (/ws:\/\/localhost:.+?\/sockjs-node/.test(url)) {
+            console.info(
+              "[!!!] Live reload is disabled via process.env.REACT_APP_DEV_DISABLE_LIVE_RELOAD [!!!]",
+            );
+          } else {
+            return new _WebSocket(url);
+          }
+        };
+      }
+    </script>
+    <% } %>
     <script>
       window.EXCALIDRAW_ASSET_PATH = "/";
       // setting this so that libraries installation reuses this window tab.
@@ -120,7 +174,7 @@
         width: 1px;
         overflow: hidden;
         clip: rect(1px, 1px, 1px, 1px);
-        white-space: nowrap; /* added line */
+        white-space: nowrap;
         user-select: none;
       }
 

public/service-worker.js

@@ -17,11 +17,23 @@
  * See https://goo.gl/2aRDsh
  */
 
-importScripts("/workbox/workbox-sw.js");
+// in dev, `process` is undefined because this file is not compiled until build
+const IS_DEVELOPMENT =
+  typeof process === "undefined" || process.env.NODE_ENV !== "production";
 
-workbox.setConfig({
+if (IS_DEVELOPMENT) {
-  modulePathPrefix: "/workbox/",
+  importScripts(
-});
+    "https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js",
+  );
+  workbox.setConfig({
+    debug: true,
+  });
+} else {
+  importScripts("/workbox/workbox-sw.js");
+  workbox.setConfig({
+    modulePathPrefix: "/workbox/",
+  });
+}
 
 self.addEventListener("message", (event) => {
   if (event.data && event.data.type === "SKIP_WAITING") {
@@ -30,14 +42,17 @@ self.addEventListener("message", (event) => {
 });
 
 workbox.core.clientsClaim();
-workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);
 
-workbox.routing.registerNavigationRoute(
+if (!IS_DEVELOPMENT) {
-  workbox.precaching.getCacheKeyForURL("./index.html"),
+  workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);
-  {
+
-    blacklist: [/^\/_/, /\/[^/?]+\.[^/]+$/],
+  workbox.routing.registerNavigationRoute(
-  },
+    workbox.precaching.getCacheKeyForURL("./index.html"),
-);
+    {
+      blacklist: [/^\/_/, /\/[^/?]+\.[^/]+$/],
+    },
+  );
+}
 
 // Cache relevant font files
 workbox.routing.registerRoute(

scripts/autorelease.js

@@ -5,22 +5,25 @@ const core = require("@actions/core");
 const excalidrawDir = `${__dirname}/../src/packages/excalidraw`;
 const excalidrawPackage = `${excalidrawDir}/package.json`;
 const pkg = require(excalidrawPackage);
+const isPreview = process.argv.slice(2)[0] === "preview";
 
 const getShortCommitHash = () => {
   return execSync("git rev-parse --short HEAD").toString().trim();
 };
 
 const publish = () => {
+  const tag = isPreview ? "preview" : "next";
+
   try {
     execSync(`yarn  --frozen-lockfile`);
     execSync(`yarn --frozen-lockfile`, { cwd: excalidrawDir });
     execSync(`yarn run build:umd`, { cwd: excalidrawDir });
-    execSync(`yarn --cwd ${excalidrawDir} publish`);
+    execSync(`yarn --cwd ${excalidrawDir} publish --tag ${tag}`);
-    console.info("Published 🎉");
+    console.info(`Published ${pkg.name}@${tag}🎉`);
     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!`,
+    You can use [@excalidraw/excalidraw@${pkg.version}](https://www.npmjs.com/package/@excalidraw/excalidraw/v/${pkg.version}) for testing!`,
     );
   } catch (error) {
     core.setOutput("result", "package couldn't be published :warning:!");
@@ -51,27 +54,19 @@ exec(`git diff --name-only HEAD^ HEAD`, async (error, stdout, stderr) => {
   }
 
   // update package.json
-  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");
 
-  fs.writeFileSync(`${excalidrawDir}/README.md`, data, "utf8");
   console.info("Publish in progress...");
   publish();
 });

scripts/buildDocs.js

@@ -0,0 +1,21 @@
+const { exec } = require("child_process");
+
+// 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);
+    process.exit(1);
+  }
+  const changedFiles = stdout.trim().split("\n");
+
+  const docFiles = changedFiles.filter((file) => {
+    return file.indexOf("docs") >= 0;
+  });
+
+  if (!docFiles.length) {
+    console.info("Skipping building docs as no valid diff found");
+    process.exit(0);
+  }
+  // Exit code 1 to build the docs in ignoredBuildStep
+  process.exit(1);
+});

scripts/locales-coverage-description.js

@@ -15,6 +15,7 @@ const crowdinMap = {
   "fa-IR": "en-fa",
   "fi-FI": "en-fi",
   "fr-FR": "en-fr",
+  "gl-ES": "en-gl",
   "he-IL": "en-he",
   "hi-IN": "en-hi",
   "hu-HU": "en-hu",
@@ -23,6 +24,7 @@ const crowdinMap = {
   "ja-JP": "en-ja",
   "kab-KAB": "en-kab",
   "ko-KR": "en-ko",
+  "ku-TR": "en-ku",
   "my-MM": "en-my",
   "nb-NO": "en-nb",
   "nl-NL": "en-nl",
@@ -36,6 +38,7 @@ const crowdinMap = {
   "ru-RU": "en-ru",
   "si-LK": "en-silk",
   "sk-SK": "en-sk",
+  "sl-SI": "en-sl",
   "sv-SE": "en-sv",
   "ta-IN": "en-ta",
   "tr-TR": "en-tr",
@@ -47,6 +50,8 @@ const crowdinMap = {
   "lv-LV": "en-lv",
   "cs-CZ": "en-cs",
   "kk-KZ": "en-kk",
+  "vi-vn": "en-vi",
+  "mr-in": "en-mr",
 };
 
 const flags = {
@@ -62,6 +67,7 @@ const flags = {
   "fa-IR": "🇮🇷",
   "fi-FI": "🇫🇮",
   "fr-FR": "🇫🇷",
+  "gl-ES": "🇪🇸",
   "he-IL": "🇮🇱",
   "hi-IN": "🇮🇳",
   "hu-HU": "🇭🇺",
@@ -71,6 +77,7 @@ const flags = {
   "kab-KAB": "🏳",
   "kk-KZ": "🇰🇿",
   "ko-KR": "🇰🇷",
+  "ku-TR": "🏳",
   "lt-LT": "🇱🇹",
   "lv-LV": "🇱🇻",
   "my-MM": "🇲🇲",
@@ -86,6 +93,7 @@ const flags = {
   "ru-RU": "🇷🇺",
   "si-LK": "🇱🇰",
   "sk-SK": "🇸🇰",
+  "sl-SI": "🇸🇮",
   "sv-SE": "🇸🇪",
   "ta-IN": "🇮🇳",
   "tr-TR": "🇹🇷",
@@ -93,6 +101,9 @@ const flags = {
   "zh-CN": "🇨🇳",
   "zh-HK": "🇭🇰",
   "zh-TW": "🇹🇼",
+  "eu-ES": "🇪🇦",
+  "vi-VN": "🇻🇳",
+  "mr-IN": "🇮🇳",
 };
 
 const languages = {
@@ -133,6 +144,7 @@ const languages = {
   "ru-RU": "Русский",
   "si-LK": "සිංහල",
   "sk-SK": "Slovenčina",
+  "sl-SI": "Slovenščina",
   "sv-SE": "Svenska",
   "ta-IN": "Tamil",
   "tr-TR": "Türkçe",
@@ -140,6 +152,8 @@ const languages = {
   "zh-CN": "简体中文",
   "zh-HK": "繁體中文 (香港)",
   "zh-TW": "繁體中文",
+  "vi-VN": "Tiếng Việt",
+  "mr-IN": "मराठी",
 };
 
 const percentages = fs.readFileSync(

scripts/prebuild.js

@@ -0,0 +1,21 @@
+const fs = require("fs");
+const path = require("path");
+
+// for development purposes we want to have the service-worker.js file
+// accessible from the public folder. On build though, we need to compile it
+// and CRA expects that file to be in src/ folder.
+const moveServiceWorkerScript = () => {
+  const oldPath = path.resolve(__dirname, "../public/service-worker.js");
+  const newPath = path.resolve(__dirname, "../src/service-worker.js");
+
+  fs.rename(oldPath, newPath, (error) => {
+    if (error) {
+      throw error;
+    }
+    console.info("public/service-worker.js moved to src/");
+  });
+};
+
+// -----------------------------------------------------------------------------
+
+moveServiceWorkerScript();

scripts/prerelease.js

@@ -0,0 +1,37 @@
+const fs = require("fs");
+const util = require("util");
+const exec = util.promisify(require("child_process").exec);
+const updateChangelog = require("./updateChangelog");
+
+const excalidrawDir = `${__dirname}/../src/packages/excalidraw`;
+const excalidrawPackage = `${excalidrawDir}/package.json`;
+
+const updatePackageVersion = (nextVersion) => {
+  const pkg = require(excalidrawPackage);
+  pkg.version = nextVersion;
+  const content = `${JSON.stringify(pkg, null, 2)}\n`;
+  fs.writeFileSync(excalidrawPackage, content, "utf-8");
+};
+
+const prerelease = async (nextVersion) => {
+  try {
+    await updateChangelog(nextVersion);
+    updatePackageVersion(nextVersion);
+    await exec(`git add -u`);
+    await exec(
+      `git commit -m "docs: release @excalidraw/excalidraw@${nextVersion}  🎉"`,
+    );
+
+    console.info("Done!");
+  } catch (error) {
+    console.error(error);
+    process.exit(1);
+  }
+};
+
+const nextVersion = process.argv.slice(2)[0];
+if (!nextVersion) {
+  console.error("Pass the next version to release!");
+  process.exit(1);
+}
+prerelease(nextVersion);

scripts/release.js

@@ -1,39 +1,44 @@
 const fs = require("fs");
-const util = require("util");
+const { execSync } = require("child_process");
-const exec = util.promisify(require("child_process").exec);
-const updateReadme = require("./updateReadme");
-const updateChangelog = require("./updateChangelog");
 
 const excalidrawDir = `${__dirname}/../src/packages/excalidraw`;
 const excalidrawPackage = `${excalidrawDir}/package.json`;
+const pkg = require(excalidrawPackage);
 
-const updatePackageVersion = (nextVersion) => {
+const originalReadMe = fs.readFileSync(`${excalidrawDir}/README.md`, "utf8");
-  const pkg = require(excalidrawPackage);
+
-  pkg.version = nextVersion;
+const updateReadme = () => {
-  const content = `${JSON.stringify(pkg, null, 2)}\n`;
+  const excalidrawIndex = originalReadMe.indexOf("### Excalidraw");
-  fs.writeFileSync(excalidrawPackage, content, "utf-8");
+
+  // remove note for stable readme
+  const data = originalReadMe.slice(excalidrawIndex);
+
+  // update readme
+  fs.writeFileSync(`${excalidrawDir}/README.md`, data, "utf8");
 };
 
-const release = async (nextVersion) => {
+const publish = () => {
   try {
-    updateReadme();
+    execSync(`yarn  --frozen-lockfile`);
-    await updateChangelog(nextVersion);
+    execSync(`yarn --frozen-lockfile`, { cwd: excalidrawDir });
-    updatePackageVersion(nextVersion);
+    execSync(`yarn run build:umd`, { cwd: excalidrawDir });
-    await exec(`git add -u`);
+    execSync(`yarn --cwd ${excalidrawDir} publish`);
-    await exec(
-      `git commit -m "docs: release @excalidraw/excalidraw@${nextVersion}  🎉"`,
-    );
-    /* eslint-disable no-console */
-    console.log("Done!");
   } catch (error) {
     console.error(error);
     process.exit(1);
   }
 };
 
-const nextVersion = process.argv.slice(2)[0];
+const release = () => {
-if (!nextVersion) {
+  updateReadme();
-  console.error("Pass the next version to release!");
+  console.info("Note for stable readme removed");
-  process.exit(1);
+
-}
+  publish();
-release(nextVersion);
+  console.info(`Published ${pkg.version}!`);
+
+  // revert readme after release
+  fs.writeFileSync(`${excalidrawDir}/README.md`, originalReadMe, "utf8");
+  console.info("Readme reverted");
+};
+
+release();

scripts/updateReadme.js

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

src/actions/actionAddToLibrary.ts

@@ -25,9 +25,9 @@ export const actionAddToLibrary = register({
     }
 
     return app.library
-      .loadLibrary()
+      .getLatestLibrary()
       .then((items) => {
-        return app.library.saveLibrary([
+        return app.library.setLibrary([
           {
             id: randomId(),
             status: "unpublished",
@@ -42,7 +42,7 @@ export const actionAddToLibrary = register({
           commitToHistory: false,
           appState: {
             ...appState,
-            toastMessage: t("toast.addedToLibrary"),
+            toast: { message: t("toast.addedToLibrary") },
           },
         };
       })

src/actions/actionCanvas.tsx

@@ -2,7 +2,7 @@ import { ColorPicker } from "../components/ColorPicker";
 import { eraser, zoomIn, zoomOut } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
 import { DarkModeToggle } from "../components/DarkModeToggle";
-import { THEME, ZOOM_STEP } from "../constants";
+import { MIN_ZOOM, THEME, ZOOM_STEP } from "../constants";
 import { getCommonBounds, getNonDeletedElements } from "../element";
 import { ExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
@@ -11,7 +11,7 @@ import { getNormalizedZoom, getSelectedElements } from "../scene";
 import { centerScrollOn } from "../scene/scroll";
 import { getStateForZoom } from "../scene/zoom";
 import { AppState, NormalizedZoomValue } from "../types";
-import { getShortcutKey } from "../utils";
+import { getShortcutKey, updateActiveTool } from "../utils";
 import { register } from "./register";
 import { Tooltip } from "../components/Tooltip";
 import { newElementWith } from "../element/mutateElement";
@@ -206,7 +206,7 @@ const zoomValueToFitBoundsOnViewport = (
   const zoomAdjustedToSteps =
     Math.floor(smallestZoomValue / ZOOM_STEP) * ZOOM_STEP;
   const clampedZoomValueToFitElements = Math.min(
-    Math.max(zoomAdjustedToSteps, ZOOM_STEP),
+    Math.max(zoomAdjustedToSteps, MIN_ZOOM),
     1,
   );
   return clampedZoomValueToFitElements as NormalizedZoomValue;
@@ -304,21 +304,28 @@ export const actionErase = register({
   name: "eraser",
   trackEvent: { category: "toolbar" },
   perform: (elements, appState) => {
+    let activeTool: AppState["activeTool"];
+
+    if (isEraserActive(appState)) {
+      activeTool = updateActiveTool(appState, {
+        ...(appState.activeTool.lastActiveToolBeforeEraser || {
+          type: "selection",
+        }),
+        lastActiveToolBeforeEraser: null,
+      });
+    } else {
+      activeTool = updateActiveTool(appState, {
+        type: "eraser",
+        lastActiveToolBeforeEraser: appState.activeTool,
+      });
+    }
+
     return {
       appState: {
         ...appState,
         selectedElementIds: {},
         selectedGroupIds: {},
-        activeTool: {
+        activeTool,
-          ...appState.activeTool,
-          type: isEraserActive(appState)
-            ? appState.activeTool.lastActiveToolBeforeEraser ?? "selection"
-            : "eraser",
-          lastActiveToolBeforeEraser:
-            appState.activeTool.type === "eraser" //node throws incorrect type error when using isEraserActive()
-              ? null
-              : appState.activeTool.type,
-        },
       },
       commitToHistory: true,
     };

src/actions/actionClipboard.tsx

@@ -15,7 +15,9 @@ export const actionCopy = register({
   name: "copy",
   trackEvent: { category: "element" },
   perform: (elements, appState, _, app) => {
-    copyToClipboard(getNonDeletedElements(elements), appState, app.files);
+    const selectedElements = getSelectedElements(elements, appState, true);
+
+    copyToClipboard(selectedElements, appState, app.files);
 
     return {
       commitToHistory: false,
@@ -34,7 +36,7 @@ export const actionCut = register({
     return actionDeleteSelected.perform(elements, appState);
   },
   contextItemLabel: "labels.cut",
-  keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.code === CODES.X,
+  keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.X,
 });
 
 export const actionCopyAsSvg = register({
@@ -105,14 +107,16 @@ export const actionCopyAsPng = register({
       return {
         appState: {
           ...appState,
-          toastMessage: t("toast.copyToClipboardAsPng", {
+          toast: {
-            exportSelection: selectedElements.length
+            message: t("toast.copyToClipboardAsPng", {
-              ? t("toast.selection")
+              exportSelection: selectedElements.length
-              : t("toast.canvas"),
+                ? t("toast.selection")
-            exportColorScheme: appState.exportWithDarkMode
+                : t("toast.canvas"),
-              ? t("buttons.darkMode")
+              exportColorScheme: appState.exportWithDarkMode
-              : t("buttons.lightMode"),
+                ? t("buttons.darkMode")
-          }),
+                : t("buttons.lightMode"),
+            }),
+          },
         },
         commitToHistory: false,
       };

src/actions/actionDeleteSelected.tsx

@@ -12,6 +12,7 @@ import { getElementsInGroup } from "../groups";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { fixBindingsAfterDeletion } from "../element/binding";
 import { isBoundToContainer } from "../element/typeChecks";
+import { updateActiveTool } from "../utils";
 
 const deleteSelectedElements = (
   elements: readonly ExcalidrawElement[],
@@ -134,7 +135,7 @@ export const actionDeleteSelected = register({
       elements: nextElements,
       appState: {
         ...nextAppState,
-        activeTool: { ...appState.activeTool, type: "selection" },
+        activeTool: updateActiveTool(appState, { type: "selection" }),
         multiElement: null,
       },
       commitToHistory: isSomeElementSelected(

src/actions/actionDistribute.tsx

@@ -3,7 +3,7 @@ import {
   DistributeVerticallyIcon,
 } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
-import { distributeElements, Distribution } from "../disitrubte";
+import { distributeElements, Distribution } from "../distribute";
 import { getNonDeletedElements } from "../element";
 import { ExcalidrawElement } from "../element/types";
 import { t } from "../i18n";

src/actions/actionDuplicateSelection.tsx

@@ -128,12 +128,15 @@ const duplicateElements = (
       {
         ...appState,
         selectedGroupIds: {},
-        selectedElementIds: newElements.reduce((acc, element) => {
+        selectedElementIds: newElements.reduce(
-          if (!isBoundToContainer(element)) {
+          (acc: Record<ExcalidrawElement["id"], true>, element) => {
-            acc[element.id] = true;
+            if (!isBoundToContainer(element)) {
-          }
+              acc[element.id] = true;
-          return acc;
+            }
-        }, {} as any),
+            return acc;
+          },
+          {},
+        ),
       },
       getNonDeletedElements(finalElements),
     ),

src/actions/actionExport.tsx

@@ -7,7 +7,7 @@ import { DarkModeToggle } from "../components/DarkModeToggle";
 import { loadFromJSON, saveAsJSON } from "../data";
 import { resaveAsImageWithScene } from "../data/resave";
 import { t } from "../i18n";
-import { useDeviceType } from "../components/App";
+import { useDevice } from "../components/App";
 import { KEYS } from "../keys";
 import { register } from "./register";
 import { CheckboxItem } from "../components/CheckboxItem";
@@ -144,13 +144,15 @@ export const actionSaveToActiveFile = register({
         appState: {
           ...appState,
           fileHandle,
-          toastMessage: fileHandleExists
+          toast: fileHandleExists
-            ? fileHandle?.name
+            ? {
-              ? t("toast.fileSavedToFilename").replace(
+                message: fileHandle?.name
-                  "{filename}",
+                  ? t("toast.fileSavedToFilename").replace(
-                  `"${fileHandle.name}"`,
+                      "{filename}",
-                )
+                      `"${fileHandle.name}"`,
-              : t("toast.fileSaved")
+                    )
+                  : t("toast.fileSaved"),
+              }
             : null,
         },
       };
@@ -204,7 +206,7 @@ export const actionSaveFileToDisk = register({
       icon={saveAs}
       title={t("buttons.saveAs")}
       aria-label={t("buttons.saveAs")}
-      showAriaLabel={useDeviceType().isMobile}
+      showAriaLabel={useDevice().isMobile}
       hidden={!nativeFileSystemSupported}
       onClick={() => updateData(null)}
       data-testid="save-as-button"
@@ -242,13 +244,13 @@ export const actionLoadScene = register({
     }
   },
   keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.O,
-  PanelComponent: ({ updateData, appState }) => (
+  PanelComponent: ({ updateData }) => (
     <ToolButton
       type="button"
       icon={load}
       title={t("buttons.load")}
       aria-label={t("buttons.load")}
-      showAriaLabel={useDeviceType().isMobile}
+      showAriaLabel={useDevice().isMobile}
       onClick={updateData}
       data-testid="load-button"
     />

src/actions/actionFinalize.tsx

@@ -1,6 +1,6 @@
 import { KEYS } from "../keys";
 import { isInvisiblySmallElement } from "../element";
-import { resetCursor } from "../utils";
+import { updateActiveTool, resetCursor } from "../utils";
 import { ToolButton } from "../components/ToolButton";
 import { done } from "../components/icons";
 import { t } from "../i18n";
@@ -13,12 +13,13 @@ import {
   maybeBindLinearElement,
   bindOrUnbindLinearElement,
 } from "../element/binding";
-import { isBindingElement } from "../element/typeChecks";
+import { isBindingElement, isLinearElement } from "../element/typeChecks";
+import { AppState } from "../types";
 
 export const actionFinalize = register({
   name: "finalize",
   trackEvent: false,
-  perform: (elements, appState, _, { canvas, focusContainer }) => {
+  perform: (elements, appState, _, { canvas, focusContainer, scene }) => {
     if (appState.editingLinearElement) {
       const { elementId, startBindingElement, endBindingElement } =
         appState.editingLinearElement;
@@ -49,8 +50,12 @@ export const actionFinalize = register({
 
     let newElements = elements;
 
-    if (appState.pendingImageElement) {
+    const pendingImageElement =
-      mutateElement(appState.pendingImageElement, { isDeleted: true }, false);
+      appState.pendingImageElementId &&
+      scene.getElement(appState.pendingImageElementId);
+
+    if (pendingImageElement) {
+      mutateElement(pendingImageElement, { isDeleted: true }, false);
     }
 
     if (window.document.activeElement instanceof HTMLElement) {
@@ -137,6 +142,20 @@ export const actionFinalize = register({
       resetCursor(canvas);
     }
 
+    let activeTool: AppState["activeTool"];
+    if (appState.activeTool.type === "eraser") {
+      activeTool = updateActiveTool(appState, {
+        ...(appState.activeTool.lastActiveToolBeforeEraser || {
+          type: "selection",
+        }),
+        lastActiveToolBeforeEraser: null,
+      });
+    } else {
+      activeTool = updateActiveTool(appState, {
+        type: "selection",
+      });
+    }
+
     return {
       elements: newElements,
       appState: {
@@ -147,14 +166,7 @@ export const actionFinalize = register({
             appState.activeTool.type === "freedraw") &&
           multiPointElement
             ? appState.activeTool
-            : {
+            : activeTool,
-                ...appState.activeTool,
-                type:
-                  appState.activeTool.type === "eraser" &&
-                  appState.activeTool.lastActiveToolBeforeEraser
-                    ? appState.activeTool.lastActiveToolBeforeEraser
-                    : "selection",
-              },
         draggingElement: null,
         multiElement: null,
         editingElement: null,
@@ -169,7 +181,12 @@ export const actionFinalize = register({
                 [multiPointElement.id]: true,
               }
             : appState.selectedElementIds,
-        pendingImageElement: null,
+        // To select the linear element when user has finished mutipoint editing
+        selectedLinearElement:
+          multiPointElement && isLinearElement(multiPointElement)
+            ? new LinearElementEditor(multiPointElement, scene)
+            : appState.selectedLinearElement,
+        pendingImageElementId: null,
       },
       commitToHistory: appState.activeTool.type === "freedraw",
     };

src/actions/actionFlip.ts

@@ -6,10 +6,14 @@ import { ExcalidrawElement, NonDeleted } from "../element/types";
 import { normalizeAngle, resizeSingleElement } from "../element/resizeElements";
 import { AppState } from "../types";
 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";
+import {
+  getElementAbsoluteCoords,
+  getElementPointsCoords,
+} from "../element/bounds";
+import { isLinearElement } from "../element/typeChecks";
+import { LinearElementEditor } from "../element/linearElementEditor";
 
 const enableActionFlipHorizontal = (
   elements: readonly ExcalidrawElement[],
@@ -118,13 +122,6 @@ const flipElement = (
   const height = element.height;
   const originalAngle = normalizeAngle(element.angle);
 
-  let finalOffsetX = 0;
-  if (isLinearElement(element) || isFreeDrawElement(element)) {
-    finalOffsetX =
-      element.points.reduce((max, point) => Math.max(max, point[0]), 0) * 2 -
-      element.width;
-  }
-
   // Rotate back to zero, if necessary
   mutateElement(element, {
     angle: normalizeAngle(0),
@@ -132,7 +129,6 @@ const flipElement = (
   // Flip unrotated by pulling TransformHandle to opposite side
   const transformHandles = getTransformHandles(element, appState.zoom);
   let usingNWHandle = true;
-  let newNCoordsX = 0;
   let nHandle = transformHandles.nw;
   if (!nHandle) {
     // Use ne handle instead
@@ -146,30 +142,51 @@ const flipElement = (
     }
   }
 
+  let finalOffsetX = 0;
+  if (isLinearElement(element) && element.points.length < 3) {
+    finalOffsetX =
+      element.points.reduce((max, point) => Math.max(max, point[0]), 0) * 2 -
+      element.width;
+  }
+
+  let initialPointsCoords;
   if (isLinearElement(element)) {
+    initialPointsCoords = getElementPointsCoords(
+      element,
+      element.points,
+      element.strokeSharpness,
+    );
+  }
+  const initialElementAbsoluteCoords = getElementAbsoluteCoords(element);
+
+  if (isLinearElement(element) && element.points.length < 3) {
     for (let index = 1; index < element.points.length; index++) {
       LinearElementEditor.movePoints(element, [
-        { index, point: [-element.points[index][0], element.points[index][1]] },
+        {
+          index,
+          point: [-element.points[index][0], element.points[index][1]],
+        },
       ]);
     }
     LinearElementEditor.normalizePoints(element);
   } else {
-    // calculate new x-coord for transformation
+    const elWidth = initialPointsCoords
-    newNCoordsX = usingNWHandle ? element.x + 2 * width : element.x - 2 * width;
+      ? initialPointsCoords[2] - initialPointsCoords[0]
+      : initialElementAbsoluteCoords[2] - initialElementAbsoluteCoords[0];
+
+    const startPoint = initialPointsCoords
+      ? [initialPointsCoords[0], initialPointsCoords[1]]
+      : [initialElementAbsoluteCoords[0], initialElementAbsoluteCoords[1]];
+
     resizeSingleElement(
       new Map().set(element.id, element),
-      true,
+      false,
       element,
       usingNWHandle ? "nw" : "ne",
-      false,
+      true,
-      newNCoordsX,
+      usingNWHandle ? startPoint[0] + elWidth : startPoint[0] - elWidth,
-      nHandle[1],
+      startPoint[1],
     );
-    // fix the size to account for handle sizes
-    mutateElement(element, {
-      width,
-      height,
-    });
   }
 
   // Rotate by (360 degrees - original angle)
@@ -186,9 +203,34 @@ const flipElement = (
   mutateElement(element, {
     x: originalX + finalOffsetX,
     y: originalY,
+    width,
+    height,
   });
 
   updateBoundElements(element);
+
+  if (initialPointsCoords && isLinearElement(element)) {
+    // Adjusting origin because when a beizer curve path exceeds min/max points it offsets the origin.
+    // There's still room for improvement since when the line roughness is > 1
+    // we still have a small offset of the origin when fliipping the element.
+    const finalPointsCoords = getElementPointsCoords(
+      element,
+      element.points,
+      element.strokeSharpness,
+    );
+
+    const topLeftCoordsDiff = initialPointsCoords[0] - finalPointsCoords[0];
+    const topRightCoordDiff = initialPointsCoords[2] - finalPointsCoords[2];
+
+    const coordsDiff = topLeftCoordsDiff + topRightCoordDiff;
+
+    mutateElement(element, {
+      x: element.x + coordsDiff * 0.5,
+      y: element.y,
+      width,
+      height,
+    });
+  }
 };
 
 const rotateElement = (element: ExcalidrawElement, rotationAngle: number) => {

src/actions/actionGroup.tsx

@@ -1,4 +1,4 @@
-import { CODES, KEYS } from "../keys";
+import { KEYS } from "../keys";
 import { t } from "../i18n";
 import { arrayToMap, getShortcutKey } from "../utils";
 import { register } from "./register";
@@ -132,7 +132,7 @@ export const actionGroup = register({
   contextItemPredicate: (elements, appState) =>
     enableActionGroup(elements, appState),
   keyTest: (event) =>
-    !event.shiftKey && event[KEYS.CTRL_OR_CMD] && event.code === CODES.G,
+    !event.shiftKey && event[KEYS.CTRL_OR_CMD] && event.key === KEYS.G,
   PanelComponent: ({ elements, appState, updateData }) => (
     <ToolButton
       hidden={!enableActionGroup(elements, appState)}
@@ -189,7 +189,9 @@ export const actionUngroup = register({
     };
   },
   keyTest: (event) =>
-    event.shiftKey && event[KEYS.CTRL_OR_CMD] && event.code === CODES.G,
+    event.shiftKey &&
+    event[KEYS.CTRL_OR_CMD] &&
+    event.key === KEYS.G.toUpperCase(),
   contextItemLabel: "labels.ungroup",
   contextItemPredicate: (elements, appState) =>
     getSelectedGroupIds(appState).length > 0,

src/actions/actionLinearEditor.ts

@@ -0,0 +1,49 @@
+import { getNonDeletedElements } from "../element";
+import { LinearElementEditor } from "../element/linearElementEditor";
+import { isLinearElement } from "../element/typeChecks";
+import { ExcalidrawLinearElement } from "../element/types";
+import { getSelectedElements } from "../scene";
+import { register } from "./register";
+
+export const actionToggleLinearEditor = register({
+  name: "toggleLinearEditor",
+  trackEvent: {
+    category: "element",
+  },
+  contextItemPredicate: (elements, appState) => {
+    const selectedElements = getSelectedElements(elements, appState);
+    if (selectedElements.length === 1 && isLinearElement(selectedElements[0])) {
+      return true;
+    }
+    return false;
+  },
+  perform(elements, appState, _, app) {
+    const selectedElement = getSelectedElements(
+      getNonDeletedElements(elements),
+      appState,
+      true,
+    )[0] as ExcalidrawLinearElement;
+
+    const editingLinearElement =
+      appState.editingLinearElement?.elementId === selectedElement.id
+        ? null
+        : new LinearElementEditor(selectedElement, app.scene);
+    return {
+      appState: {
+        ...appState,
+        editingLinearElement,
+      },
+      commitToHistory: false,
+    };
+  },
+  contextItemLabel: (elements, appState) => {
+    const selectedElement = getSelectedElements(
+      getNonDeletedElements(elements),
+      appState,
+      true,
+    )[0] as ExcalidrawLinearElement;
+    return appState.editingLinearElement?.elementId === selectedElement.id
+      ? "labels.lineEditor.exit"
+      : "labels.lineEditor.edit";
+  },
+});

src/actions/actionMenu.tsx

@@ -4,7 +4,7 @@ import { t } from "../i18n";
 import { showSelectedShapeActions, getNonDeletedElements } from "../element";
 import { register } from "./register";
 import { allowFullScreen, exitFullScreen, isFullScreen } from "../utils";
-import { CODES, KEYS } from "../keys";
+import { KEYS } from "../keys";
 import { HelpIcon } from "../components/HelpIcon";
 
 export const actionToggleCanvasMenu = register({
@@ -67,7 +67,7 @@ export const actionFullScreen = register({
       commitToHistory: false,
     };
   },
-  keyTest: (event) => event.code === CODES.F && !event[KEYS.CTRL_OR_CMD],
+  keyTest: (event) => event.key === KEYS.F && !event[KEYS.CTRL_OR_CMD],
 });
 
 export const actionShortcuts = register({

src/actions/actionNavigate.tsx

@@ -1,4 +1,4 @@
-import { getClientColors, getClientInitials } from "../clients";
+import { getClientColors } from "../clients";
 import { Avatar } from "../components/Avatar";
 import { centerScrollOn } from "../scene/scroll";
 import { Collaborator } from "../types";
@@ -31,28 +31,18 @@ export const actionGoToCollaborator = register({
     };
   },
   PanelComponent: ({ appState, updateData, data }) => {
-    const clientId: string | undefined = data?.id;
+    const [clientId, collaborator] = data as [string, Collaborator];
-    if (!clientId) {
-      return null;
-    }
-
-    const collaborator = appState.collaborators.get(clientId);
-
-    if (!collaborator) {
-      return null;
-    }
 
     const { background, stroke } = getClientColors(clientId, appState);
-    const shortName = getClientInitials(collaborator.username);
 
     return (
       <Avatar
         color={background}
         border={stroke}
         onClick={() => updateData(collaborator.pointer)}
-      >
+        name={collaborator.username || ""}
-        {shortName}
+        src={collaborator.avatarUrl}
-      </Avatar>
+      />
     );
   },
 });

src/actions/actionProperties.tsx

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

src/actions/actionSelectAll.ts

@@ -2,29 +2,43 @@ import { KEYS } from "../keys";
 import { register } from "./register";
 import { selectGroupsForSelectedElements } from "../groups";
 import { getNonDeletedElements, isTextElement } from "../element";
+import { ExcalidrawElement } from "../element/types";
+import { isLinearElement } from "../element/typeChecks";
+import { LinearElementEditor } from "../element/linearElementEditor";
 
 export const actionSelectAll = register({
   name: "selectAll",
   trackEvent: { category: "canvas" },
-  perform: (elements, appState) => {
+  perform: (elements, appState, value, app) => {
     if (appState.editingLinearElement) {
       return false;
     }
+    const selectedElementIds = elements.reduce(
+      (map: Record<ExcalidrawElement["id"], true>, element) => {
+        if (
+          !element.isDeleted &&
+          !(isTextElement(element) && element.containerId) &&
+          !element.locked
+        ) {
+          map[element.id] = true;
+        }
+        return map;
+      },
+      {},
+    );
+
     return {
       appState: selectGroupsForSelectedElements(
         {
           ...appState,
+          selectedLinearElement:
+            // single linear element selected
+            Object.keys(selectedElementIds).length === 1 &&
+            isLinearElement(elements[0])
+              ? new LinearElementEditor(elements[0], app.scene)
+              : null,
           editingGroupId: null,
-          selectedElementIds: elements.reduce((map, element) => {
+          selectedElementIds,
-            if (
-              !element.isDeleted &&
-              !(isTextElement(element) && element.containerId) &&
-              element.locked === false
-            ) {
-              map[element.id] = true;
-            }
-            return map;
-          }, {} as any),
         },
         getNonDeletedElements(elements),
       ),

src/actions/actionStyles.test.tsx

@@ -48,7 +48,7 @@ describe("actionStyles", () => {
     Keyboard.withModifierKeys({ ctrl: true, alt: true }, () => {
       Keyboard.codeDown(CODES.C);
     });
-    const secondRect = JSON.parse(copiedStyles);
+    const secondRect = JSON.parse(copiedStyles)[0];
     expect(secondRect.id).toBe(h.elements[1].id);
 
     mouse.reset();

src/actions/actionStyles.ts

@@ -6,13 +6,15 @@ import {
 import { CODES, KEYS } from "../keys";
 import { t } from "../i18n";
 import { register } from "./register";
-import { mutateElement, newElementWith } from "../element/mutateElement";
+import { newElementWith } from "../element/mutateElement";
 import {
   DEFAULT_FONT_SIZE,
   DEFAULT_FONT_FAMILY,
   DEFAULT_TEXT_ALIGN,
 } from "../constants";
-import { getContainerElement } from "../element/textElement";
+import { getBoundTextElement } from "../element/textElement";
+import { hasBoundTextElement } from "../element/typeChecks";
+import { getSelectedElements } from "../scene";
 
 // `copiedStyles` is exported only for tests.
 export let copiedStyles: string = "{}";
@@ -21,14 +23,20 @@ export const actionCopyStyles = register({
   name: "copyStyles",
   trackEvent: { category: "element" },
   perform: (elements, appState) => {
+    const elementsCopied = [];
     const element = elements.find((el) => appState.selectedElementIds[el.id]);
+    elementsCopied.push(element);
+    if (element && hasBoundTextElement(element)) {
+      const boundTextElement = getBoundTextElement(element);
+      elementsCopied.push(boundTextElement);
+    }
     if (element) {
-      copiedStyles = JSON.stringify(element);
+      copiedStyles = JSON.stringify(elementsCopied);
     }
     return {
       appState: {
         ...appState,
-        toastMessage: t("toast.copyStyles"),
+        toast: { message: t("toast.copyStyles") },
       },
       commitToHistory: false,
     };
@@ -42,31 +50,62 @@ export const actionPasteStyles = register({
   name: "pasteStyles",
   trackEvent: { category: "element" },
   perform: (elements, appState) => {
-    const pastedElement = JSON.parse(copiedStyles);
+    const elementsCopied = JSON.parse(copiedStyles);
+    const pastedElement = elementsCopied[0];
+    const boundTextElement = elementsCopied[1];
     if (!isExcalidrawElement(pastedElement)) {
       return { elements, commitToHistory: false };
     }
+
+    const selectedElements = getSelectedElements(elements, appState, true);
+    const selectedElementIds = selectedElements.map((element) => element.id);
     return {
       elements: elements.map((element) => {
-        if (appState.selectedElementIds[element.id]) {
+        if (selectedElementIds.includes(element.id)) {
-          const newElement = newElementWith(element, {
+          let elementStylesToCopyFrom = pastedElement;
-            backgroundColor: pastedElement?.backgroundColor,
+          if (isTextElement(element) && element.containerId) {
-            strokeWidth: pastedElement?.strokeWidth,
+            elementStylesToCopyFrom = boundTextElement;
-            strokeColor: pastedElement?.strokeColor,
-            strokeStyle: pastedElement?.strokeStyle,
-            fillStyle: pastedElement?.fillStyle,
-            opacity: pastedElement?.opacity,
-            roughness: pastedElement?.roughness,
-          });
-          if (isTextElement(newElement) && isTextElement(element)) {
-            mutateElement(newElement, {
-              fontSize: pastedElement?.fontSize || DEFAULT_FONT_SIZE,
-              fontFamily: pastedElement?.fontFamily || DEFAULT_FONT_FAMILY,
-              textAlign: pastedElement?.textAlign || DEFAULT_TEXT_ALIGN,
-            });
-
-            redrawTextBoundingBox(newElement, getContainerElement(newElement));
           }
+          if (!elementStylesToCopyFrom) {
+            return element;
+          }
+          let newElement = newElementWith(element, {
+            backgroundColor: elementStylesToCopyFrom?.backgroundColor,
+            strokeWidth: elementStylesToCopyFrom?.strokeWidth,
+            strokeColor: elementStylesToCopyFrom?.strokeColor,
+            strokeStyle: elementStylesToCopyFrom?.strokeStyle,
+            fillStyle: elementStylesToCopyFrom?.fillStyle,
+            opacity: elementStylesToCopyFrom?.opacity,
+            roughness: elementStylesToCopyFrom?.roughness,
+          });
+
+          if (isTextElement(newElement)) {
+            newElement = newElementWith(newElement, {
+              fontSize: elementStylesToCopyFrom?.fontSize || DEFAULT_FONT_SIZE,
+              fontFamily:
+                elementStylesToCopyFrom?.fontFamily || DEFAULT_FONT_FAMILY,
+              textAlign:
+                elementStylesToCopyFrom?.textAlign || DEFAULT_TEXT_ALIGN,
+            });
+            let container = null;
+            if (newElement.containerId) {
+              container =
+                selectedElements.find(
+                  (element) =>
+                    isTextElement(newElement) &&
+                    element.id === newElement.containerId,
+                ) || null;
+            }
+            redrawTextBoundingBox(newElement, container);
+          }
+
+          if (newElement.type === "arrow") {
+            newElement = newElementWith(newElement, {
+              startArrowhead: elementStylesToCopyFrom.startArrowhead,
+              endArrowhead: elementStylesToCopyFrom.endArrowhead,
+            });
+          }
+
           return newElement;
         }
         return element;

src/actions/actionToggleLock.ts

@@ -17,16 +17,19 @@ export const actionToggleLock = register({
 
     const operation = getOperation(selectedElements);
     const selectedElementsMap = arrayToMap(selectedElements);
-
+    const lock = operation === "lock";
     return {
       elements: elements.map((element) => {
         if (!selectedElementsMap.has(element.id)) {
           return element;
         }
 
-        return newElementWith(element, { locked: operation === "lock" });
+        return newElementWith(element, { locked: lock });
       }),
-      appState,
+      appState: {
+        ...appState,
+        selectedLinearElement: lock ? null : appState.selectedLinearElement,
+      },
       commitToHistory: true,
     };
   },

src/actions/index.ts

@@ -85,3 +85,4 @@ export { actionToggleStats } from "./actionToggleStats";
 export { actionUnbindText, actionBindText } from "./actionBoundText";
 export { actionLink } from "../element/Hyperlink";
 export { actionToggleLock } from "./actionToggleLock";
+export { actionToggleLinearEditor } from "./actionLinearEditor";

src/actions/manager.tsx

@@ -30,7 +30,7 @@ const trackAction = (
           trackEvent(
             action.trackEvent.category,
             action.trackEvent.action || action.name,
-            `${source} (${app.deviceType.isMobile ? "mobile" : "desktop"})`,
+            `${source} (${app.device.isMobile ? "mobile" : "desktop"})`,
           );
         }
       }
@@ -137,7 +137,6 @@ export class ActionManager {
    */
   renderAction = (name: ActionName, data?: PanelComponentProps["data"]) => {
     const canvasActions = this.app.props.UIOptions.canvasActions;
-
     if (
       this.actions[name] &&
       "PanelComponent" in this.actions[name] &&
@@ -147,6 +146,7 @@ export class ActionManager {
     ) {
       const action = this.actions[name];
       const PanelComponent = action.PanelComponent!;
+      PanelComponent.displayName = "PanelComponent";
       const elements = this.getElementsIncludingDeleted();
       const appState = this.getAppState();
       const updateData = (formState?: any) => {

src/actions/types.ts

@@ -6,7 +6,6 @@ import {
   ExcalidrawProps,
   BinaryFiles,
 } from "../types";
-import { ToolButtonSize } from "../components/ToolButton";
 
 export type ActionSource = "ui" | "keyboard" | "contextMenu" | "api";
 
@@ -112,14 +111,15 @@ export type ActionName =
   | "hyperlink"
   | "eraser"
   | "bindText"
-  | "toggleLock";
+  | "toggleLock"
+  | "toggleLinearEditor";
 
 export type PanelComponentProps = {
   elements: readonly ExcalidrawElement[];
   appState: AppState;
   updateData: (formData?: any) => void;
   appProps: ExcalidrawProps;
-  data?: Partial<{ id: string; size: ToolButtonSize }>;
+  data?: Record<string, any>;
 };
 
 export interface Action {

src/appState.ts

@@ -43,6 +43,7 @@ export const getDefaultAppState = (): Omit<
     editingLinearElement: null,
     activeTool: {
       type: "selection",
+      customType: null,
       locked: false,
       lastActiveToolBeforeEraser: null,
     },
@@ -56,7 +57,7 @@ export const getDefaultAppState = (): Omit<
     fileHandle: null,
     gridSize: null,
     isBindingEnabled: true,
-    isLibraryOpen: false,
+    isSidebarDocked: false,
     isLoading: false,
     isResizing: false,
     isRotating: false,
@@ -65,6 +66,7 @@ export const getDefaultAppState = (): Omit<
     name: `${t("labels.untitled")}-${getDateTime()}`,
     openMenu: null,
     openPopup: null,
+    openSidebar: null,
     pasteDialog: { shown: false, data: null },
     previousSelectedElementIds: {},
     resizingElement: null,
@@ -79,15 +81,16 @@ export const getDefaultAppState = (): Omit<
     showStats: false,
     startBoundElement: null,
     suggestedBindings: [],
-    toastMessage: null,
+    toast: null,
     viewBackgroundColor: oc.white,
     zenModeEnabled: false,
     zoom: {
       value: 1 as NormalizedZoomValue,
     },
     viewModeEnabled: false,
-    pendingImageElement: null,
+    pendingImageElementId: null,
     showHyperlinkPopup: false,
+    selectedLinearElement: null,
   };
 };
 
@@ -145,7 +148,7 @@ const APP_STATE_STORAGE_CONF = (<
   gridSize: { browser: true, export: true, server: true },
   height: { browser: false, export: false, server: false },
   isBindingEnabled: { browser: false, export: false, server: false },
-  isLibraryOpen: { browser: false, export: false, server: false },
+  isSidebarDocked: { browser: true, export: false, server: false },
   isLoading: { browser: false, export: false, server: false },
   isResizing: { browser: false, export: false, server: false },
   isRotating: { browser: false, export: false, server: false },
@@ -156,6 +159,7 @@ const APP_STATE_STORAGE_CONF = (<
   offsetTop: { browser: false, export: false, server: false },
   openMenu: { browser: true, export: false, server: false },
   openPopup: { browser: false, export: false, server: false },
+  openSidebar: { browser: true, export: false, server: false },
   pasteDialog: { browser: false, export: false, server: false },
   previousSelectedElementIds: { browser: true, export: false, server: false },
   resizingElement: { browser: false, export: false, server: false },
@@ -170,14 +174,15 @@ const APP_STATE_STORAGE_CONF = (<
   showStats: { browser: true, export: false, server: false },
   startBoundElement: { browser: false, export: false, server: false },
   suggestedBindings: { browser: false, export: false, server: false },
-  toastMessage: { browser: false, export: false, server: false },
+  toast: { browser: false, export: false, server: false },
   viewBackgroundColor: { browser: true, export: true, server: true },
   width: { browser: false, export: false, server: false },
   zenModeEnabled: { browser: true, export: false, server: false },
   zoom: { browser: true, export: false, server: false },
   viewModeEnabled: { browser: false, export: false, server: false },
-  pendingImageElement: { browser: false, export: false, server: false },
+  pendingImageElementId: { browser: false, export: false, server: false },
   showHyperlinkPopup: { browser: false, export: false, server: false },
+  selectedLinearElement: { browser: true, export: false, server: false },
 });
 
 const _clearAppStateForStorage = <

src/charts.test.ts

@@ -0,0 +1,121 @@
+import {
+  Spreadsheet,
+  tryParseCells,
+  tryParseNumber,
+  VALID_SPREADSHEET,
+} from "./charts";
+
+describe("charts", () => {
+  describe("tryParseNumber", () => {
+    it.each<[string, number]>([
+      ["1", 1],
+      ["0", 0],
+      ["-1", -1],
+      ["0.1", 0.1],
+      [".1", 0.1],
+      ["1.", 1],
+      ["424.", 424],
+      ["$1", 1],
+      ["-.1", -0.1],
+      ["-$1", -1],
+      ["$-1", -1],
+    ])("should correctly identify %s as numbers", (given, expected) => {
+      expect(tryParseNumber(given)).toEqual(expected);
+    });
+
+    it.each<[string]>([["a"], ["$"], ["$a"], ["-$a"]])(
+      "should correctly identify %s as not a number",
+      (given) => {
+        expect(tryParseNumber(given)).toBeNull();
+      },
+    );
+  });
+
+  describe("tryParseCells", () => {
+    it("Successfully parses a spreadsheet", () => {
+      const spreadsheet = [
+        ["time", "value"],
+        ["01:00", "61"],
+        ["02:00", "-60"],
+        ["03:00", "85"],
+        ["04:00", "-67"],
+        ["05:00", "54"],
+        ["06:00", "95"],
+      ];
+
+      const result = tryParseCells(spreadsheet);
+
+      expect(result.type).toBe(VALID_SPREADSHEET);
+
+      const { title, labels, values } = (
+        result as { type: typeof VALID_SPREADSHEET; spreadsheet: Spreadsheet }
+      ).spreadsheet;
+
+      expect(title).toEqual("value");
+      expect(labels).toEqual([
+        "01:00",
+        "02:00",
+        "03:00",
+        "04:00",
+        "05:00",
+        "06:00",
+      ]);
+      expect(values).toEqual([61, -60, 85, -67, 54, 95]);
+    });
+
+    it("Uses the second column as the label if it is not a number", () => {
+      const spreadsheet = [
+        ["time", "value"],
+        ["01:00", "61"],
+        ["02:00", "-60"],
+        ["03:00", "85"],
+        ["04:00", "-67"],
+        ["05:00", "54"],
+        ["06:00", "95"],
+      ];
+
+      const result = tryParseCells(spreadsheet);
+
+      expect(result.type).toBe(VALID_SPREADSHEET);
+
+      const { title, labels, values } = (
+        result as { type: typeof VALID_SPREADSHEET; spreadsheet: Spreadsheet }
+      ).spreadsheet;
+
+      expect(title).toEqual("value");
+      expect(labels).toEqual([
+        "01:00",
+        "02:00",
+        "03:00",
+        "04:00",
+        "05:00",
+        "06:00",
+      ]);
+      expect(values).toEqual([61, -60, 85, -67, 54, 95]);
+    });
+
+    it("treats the first column as labels if both columns are numbers", () => {
+      const spreadsheet = [
+        ["time", "value"],
+        ["01", "61"],
+        ["02", "-60"],
+        ["03", "85"],
+        ["04", "-67"],
+        ["05", "54"],
+        ["06", "95"],
+      ];
+
+      const result = tryParseCells(spreadsheet);
+
+      expect(result.type).toBe(VALID_SPREADSHEET);
+
+      const { title, labels, values } = (
+        result as { type: typeof VALID_SPREADSHEET; spreadsheet: Spreadsheet }
+      ).spreadsheet;
+
+      expect(title).toEqual("value");
+      expect(labels).toEqual(["01", "02", "03", "04", "05", "06"]);
+      expect(values).toEqual([61, -60, 85, -67, 54, 95]);
+    });
+  });
+});

src/charts.ts

@@ -29,18 +29,24 @@ type ParseSpreadsheetResult =
   | { type: typeof NOT_SPREADSHEET; reason: string }
   | { type: typeof VALID_SPREADSHEET; spreadsheet: Spreadsheet };
 
-const tryParseNumber = (s: string): number | null => {
+/**
-  const match = /^[$€£¥₩]?([0-9,]+(\.[0-9]+)?)$/.exec(s);
+ * @private exported for testing
+ */
+export const tryParseNumber = (s: string): number | null => {
+  const match = /^([-+]?)[$€£¥₩]?([-+]?)([\d.,]+)[%]?$/.exec(s);
   if (!match) {
     return null;
   }
-  return parseFloat(match[1].replace(/,/g, ""));
+  return parseFloat(`${(match[1] || match[2]) + match[3]}`.replace(/,/g, ""));
 };
 
 const isNumericColumn = (lines: string[][], columnIndex: number) =>
   lines.slice(1).every((line) => tryParseNumber(line[columnIndex]) !== null);
 
-const tryParseCells = (cells: string[][]): ParseSpreadsheetResult => {
+/**
+ * @private exported for testing
+ */
+export const tryParseCells = (cells: string[][]): ParseSpreadsheetResult => {
   const numCols = cells[0].length;
 
   if (numCols > 2) {
@@ -71,13 +77,16 @@ const tryParseCells = (cells: string[][]): ParseSpreadsheetResult => {
     };
   }
 
-  const valueColumnIndex = isNumericColumn(cells, 0) ? 0 : 1;
+  const labelColumnNumeric = isNumericColumn(cells, 0);
+  const valueColumnNumeric = isNumericColumn(cells, 1);
 
-  if (!isNumericColumn(cells, valueColumnIndex)) {
+  if (!labelColumnNumeric && !valueColumnNumeric) {
     return { type: NOT_SPREADSHEET, reason: "Value is not numeric" };
   }
 
-  const labelColumnIndex = (valueColumnIndex + 1) % 2;
+  const [labelColumnIndex, valueColumnIndex] = valueColumnNumeric
+    ? [0, 1]
+    : [1, 0];
   const hasHeader = tryParseNumber(cells[0][valueColumnIndex]) === null;
   const rows = hasHeader ? cells.slice(1) : cells;
 

src/clipboard.ts

@@ -2,7 +2,6 @@ import {
   ExcalidrawElement,
   NonDeletedExcalidrawElement,
 } from "./element/types";
-import { getSelectedElements } from "./scene";
 import { AppState, BinaryFiles } from "./types";
 import { SVG_EXPORT_TAG } from "./scene/export";
 import { tryParseSpreadsheet, Spreadsheet, VALID_SPREADSHEET } from "./charts";
@@ -12,7 +11,7 @@ import { isPromiseLike } from "./utils";
 
 type ElementsClipboard = {
   type: typeof EXPORT_DATA_TYPES.excalidrawClipboard;
-  elements: ExcalidrawElement[];
+  elements: readonly NonDeletedExcalidrawElement[];
   files: BinaryFiles | undefined;
 };
 
@@ -57,19 +56,20 @@ const clipboardContainsElements = (
 export const copyToClipboard = async (
   elements: readonly NonDeletedExcalidrawElement[],
   appState: AppState,
-  files: BinaryFiles,
+  files: BinaryFiles | null,
 ) => {
   // select binded text elements when copying
-  const selectedElements = getSelectedElements(elements, appState, true);
   const contents: ElementsClipboard = {
     type: EXPORT_DATA_TYPES.excalidrawClipboard,
-    elements: selectedElements,
+    elements,
-    files: selectedElements.reduce((acc, element) => {
+    files: files
-      if (isInitializedImageElement(element) && files[element.fileId]) {
+      ? elements.reduce((acc, element) => {
-        acc[element.fileId] = files[element.fileId];
+          if (isInitializedImageElement(element) && files[element.fileId]) {
-      }
+            acc[element.fileId] = files[element.fileId];
-      return acc;
+          }
-    }, {} as BinaryFiles),
+          return acc;
+        }, {} as BinaryFiles)
+      : undefined,
   };
   const json = JSON.stringify(contents);
   CLIPBOARD = json;

src/components/Actions.tsx

@@ -3,7 +3,7 @@ import { ActionManager } from "../actions/manager";
 import { getNonDeletedElements } from "../element";
 import { ExcalidrawElement, PointerType } from "../element/types";
 import { t } from "../i18n";
-import { useDeviceType } from "../components/App";
+import { useDevice } from "../components/App";
 import {
   canChangeSharpness,
   canHaveArrowheads,
@@ -15,23 +15,28 @@ import {
 } from "../scene";
 import { SHAPES } from "../shapes";
 import { AppState, Zoom } from "../types";
-import { capitalizeString, isTransparent, setCursorForShape } from "../utils";
+import {
+  capitalizeString,
+  isTransparent,
+  updateActiveTool,
+  setCursorForShape,
+} from "../utils";
 import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
 import { hasStrokeColor } from "../scene/comparisons";
 import { trackEvent } from "../analytics";
 import { hasBoundTextElement, isBoundToContainer } from "../element/typeChecks";
+import clsx from "clsx";
+import { actionToggleZenMode } from "../actions";
 
 export const SelectedShapeActions = ({
   appState,
   elements,
   renderAction,
-  activeTool,
 }: {
   appState: AppState;
   elements: readonly ExcalidrawElement[];
   renderAction: ActionManager["renderAction"];
-  activeTool: AppState["activeTool"]["type"];
 }) => {
   const targetElements = getTargetElements(
     getNonDeletedElements(elements),
@@ -47,17 +52,17 @@ export const SelectedShapeActions = ({
     isSingleElementBoundContainer = true;
   }
   const isEditing = Boolean(appState.editingElement);
-  const deviceType = useDeviceType();
+  const device = useDevice();
   const isRTL = document.documentElement.getAttribute("dir") === "rtl";
 
   const showFillIcons =
-    hasBackground(activeTool) ||
+    hasBackground(appState.activeTool.type) ||
     targetElements.some(
       (element) =>
         hasBackground(element.type) && !isTransparent(element.backgroundColor),
     );
   const showChangeBackgroundIcons =
-    hasBackground(activeTool) ||
+    hasBackground(appState.activeTool.type) ||
     targetElements.some((element) => hasBackground(element.type));
 
   const showLinkIcon =
@@ -74,23 +79,23 @@ export const SelectedShapeActions = ({
 
   return (
     <div className="panelColumn">
-      {((hasStrokeColor(activeTool) &&
+      {((hasStrokeColor(appState.activeTool.type) &&
-        activeTool !== "image" &&
+        appState.activeTool.type !== "image" &&
         commonSelectedType !== "image") ||
         targetElements.some((element) => hasStrokeColor(element.type))) &&
         renderAction("changeStrokeColor")}
       {showChangeBackgroundIcons && renderAction("changeBackgroundColor")}
       {showFillIcons && renderAction("changeFillStyle")}
 
-      {(hasStrokeWidth(activeTool) ||
+      {(hasStrokeWidth(appState.activeTool.type) ||
         targetElements.some((element) => hasStrokeWidth(element.type))) &&
         renderAction("changeStrokeWidth")}
 
-      {(activeTool === "freedraw" ||
+      {(appState.activeTool.type === "freedraw" ||
         targetElements.some((element) => element.type === "freedraw")) &&
         renderAction("changeStrokeShape")}
 
-      {(hasStrokeStyle(activeTool) ||
+      {(hasStrokeStyle(appState.activeTool.type) ||
         targetElements.some((element) => hasStrokeStyle(element.type))) && (
         <>
           {renderAction("changeStrokeStyle")}
@@ -98,12 +103,12 @@ export const SelectedShapeActions = ({
         </>
       )}
 
-      {(canChangeSharpness(activeTool) ||
+      {(canChangeSharpness(appState.activeTool.type) ||
         targetElements.some((element) => canChangeSharpness(element.type))) && (
         <>{renderAction("changeSharpness")}</>
       )}
 
-      {(hasText(activeTool) ||
+      {(hasText(appState.activeTool.type) ||
         targetElements.some((element) => hasText(element.type))) && (
         <>
           {renderAction("changeFontSize")}
@@ -118,7 +123,7 @@ export const SelectedShapeActions = ({
         (element) =>
           hasBoundTextElement(element) || isBoundToContainer(element),
       ) && renderAction("changeVerticalAlign")}
-      {(canHaveArrowheads(activeTool) ||
+      {(canHaveArrowheads(appState.activeTool.type) ||
         targetElements.some((element) => canHaveArrowheads(element.type))) && (
         <>{renderAction("changeArrowhead")}</>
       )}
@@ -172,8 +177,8 @@ export const SelectedShapeActions = ({
         <fieldset>
           <legend>{t("labels.actions")}</legend>
           <div className="buttonList">
-            {!deviceType.isMobile && renderAction("duplicateSelection")}
+            {!device.isMobile && renderAction("duplicateSelection")}
-            {!deviceType.isMobile && renderAction("deleteSelectedElements")}
+            {!device.isMobile && renderAction("deleteSelectedElements")}
             {renderAction("group")}
             {renderAction("ungroup")}
             {showLinkIcon && renderAction("hyperlink")}
@@ -229,7 +234,9 @@ export const ShapesSwitcher = ({
             if (appState.activeTool.type !== value) {
               trackEvent("toolbar", value, "ui");
             }
-            const nextActiveTool = { ...activeTool, type: value };
+            const nextActiveTool = updateActiveTool(appState, {
+              type: value,
+            });
             setAppState({
               activeTool: nextActiveTool,
               multiElement: null,
@@ -264,3 +271,45 @@ export const ZoomActions = ({
     </Stack.Row>
   </Stack.Col>
 );
+
+export const UndoRedoActions = ({
+  renderAction,
+  className,
+}: {
+  renderAction: ActionManager["renderAction"];
+  className?: string;
+}) => (
+  <div className={`undo-redo-buttons ${className}`}>
+    {renderAction("undo", { size: "small" })}
+    {renderAction("redo", { size: "small" })}
+  </div>
+);
+
+export const ExitZenModeAction = ({
+  actionManager,
+  showExitZenModeBtn,
+}: {
+  actionManager: ActionManager;
+  showExitZenModeBtn: boolean;
+}) => (
+  <button
+    className={clsx("disable-zen-mode", {
+      "disable-zen-mode--visible": showExitZenModeBtn,
+    })}
+    onClick={() => actionManager.executeAction(actionToggleZenMode)}
+  >
+    {t("buttons.exitZenMode")}
+  </button>
+);
+
+export const FinalizeAction = ({
+  renderAction,
+  className,
+}: {
+  renderAction: ActionManager["renderAction"];
+  className?: string;
+}) => (
+  <div className={`finalize-button ${className}`}>
+    {renderAction("finalize", { size: "small" })}
+  </div>
+);

src/components/Avatar.scss

@@ -12,5 +12,11 @@
     cursor: pointer;
     font-size: 0.8rem;
     font-weight: 500;
+
+    &-img {
+      width: 100%;
+      height: 100%;
+      border-radius: 100%;
+    }
   }
 }

src/components/Avatar.tsx

@@ -1,20 +1,36 @@
 import "./Avatar.scss";
 
-import React from "react";
+import React, { useState } from "react";
+import { getClientInitials } from "../clients";
 
 type AvatarProps = {
-  children: string;
   onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
   color: string;
   border: string;
+  name: string;
+  src?: string;
 };
 
-export const Avatar = ({ children, color, border, onClick }: AvatarProps) => (
+export const Avatar = ({ color, border, onClick, name, src }: AvatarProps) => {
-  <div
+  const shortName = getClientInitials(name);
-    className="Avatar"
+  const [error, setError] = useState(false);
-    style={{ background: color, border: `1px solid ${border}` }}
+  const loadImg = !error && src;
-    onClick={onClick}
+  const style = loadImg
-  >
+    ? undefined
-    {children}
+    : { background: color, border: `1px solid ${border}` };
-  </div>
+  return (
-);
+    <div className="Avatar" style={style} onClick={onClick}>
+      {loadImg ? (
+        <img
+          className="Avatar-img"
+          src={src}
+          alt={shortName}
+          referrerPolicy="no-referrer"
+          onError={() => setError(true)}
+        />
+      ) : (
+        shortName
+      )}
+    </div>
+  );
+};

src/components/BackgroundPickerAndDarkModeToggle.tsx

@@ -1,20 +1,12 @@
-import React from "react";
 import { ActionManager } from "../actions/manager";
-import { AppState } from "../types";
 
 export const BackgroundPickerAndDarkModeToggle = ({
-  appState,
-  setAppState,
   actionManager,
-  showThemeBtn,
 }: {
   actionManager: ActionManager;
-  appState: AppState;
-  setAppState: React.Component<any, AppState>["setState"];
-  showThemeBtn: boolean;
 }) => (
   <div style={{ display: "flex" }}>
     {actionManager.renderAction("changeViewBackgroundColor")}
-    {showThemeBtn && actionManager.renderAction("toggleTheme")}
+    {actionManager.renderAction("toggleTheme")}
   </div>
 );

src/components/Card.tsx

@@ -4,6 +4,7 @@ import "./Card.scss";
 
 export const Card: React.FC<{
   color: keyof OpenColor | "primary";
+  children?: React.ReactNode;
 }> = ({ children, color }) => {
   return (
     <div

src/components/CheckboxItem.tsx

@@ -8,6 +8,7 @@ export const CheckboxItem: React.FC<{
   checked: boolean;
   onChange: (checked: boolean, event: React.MouseEvent) => void;
   className?: string;
+  children?: React.ReactNode;
 }> = ({ children, checked, onChange, className }) => {
   return (
     <div

src/components/ClearCanvas.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { t } from "../i18n";
-import { useDeviceType } from "./App";
+import { useDevice } from "./App";
 import { trash } from "./icons";
 import { ToolButton } from "./ToolButton";
 
@@ -19,7 +19,7 @@ const ClearCanvas = ({ onConfirm }: { onConfirm: () => void }) => {
         icon={trash}
         title={t("buttons.clearReset")}
         aria-label={t("buttons.clearReset")}
-        showAriaLabel={useDeviceType().isMobile}
+        showAriaLabel={useDevice().isMobile}
         onClick={toggleDialog}
         data-testid="clear-canvas-button"
       />

src/components/CollabButton.scss

@@ -18,13 +18,15 @@
       left: -5px;
     }
     min-width: 1em;
+    min-height: 1em;
+    line-height: 1;
     position: absolute;
     bottom: -5px;
     padding: 3px;
     border-radius: 50%;
     background-color: $oc-green-6;
     color: $oc-white;
-    font-size: 0.7em;
+    font-size: 0.6em;
-    font-family: var(--ui-font);
+    font-family: "Cascadia";
   }
 }

src/components/CollabButton.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { ToolButton } from "./ToolButton";
 import { t } from "../i18n";
-import { useDeviceType } from "../components/App";
+import { useDevice } from "../components/App";
 import { users } from "./icons";
 
 import "./CollabButton.scss";
@@ -26,9 +26,9 @@ const CollabButton = ({
         type="button"
         title={t("labels.liveCollaboration")}
         aria-label={t("labels.liveCollaboration")}
-        showAriaLabel={useDeviceType().isMobile}
+        showAriaLabel={useDevice().isMobile}
       >
-        {collaboratorCount > 0 && (
+        {isCollaborating && (
           <div className="CollabButton-collaborators">{collaboratorCount}</div>
         )}
       </ToolButton>

src/components/ColorPicker.tsx

@@ -128,45 +128,33 @@ const Picker = ({
   }, []);
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
-    if (event.key === KEYS.TAB) {
+    let handled = false;
-      const { activeElement } = document;
+    if (isArrowKey(event.key)) {
-      if (event.shiftKey) {
+      handled = true;
-        if (activeElement === firstItem.current) {
-          colorInput.current?.focus();
-          event.preventDefault();
-        }
-      } else if (activeElement === colorInput.current) {
-        firstItem.current?.focus();
-        event.preventDefault();
-      }
-    } else if (isArrowKey(event.key)) {
       const { activeElement } = document;
       const isRTL = getLanguage().rtl;
       let isCustom = false;
       let index = Array.prototype.indexOf.call(
-        gallery!.current!.querySelector(".color-picker-content--default")!
+        gallery.current!.querySelector(".color-picker-content--default")
-          .children,
+          ?.children,
         activeElement,
       );
       if (index === -1) {
         index = Array.prototype.indexOf.call(
-          gallery!.current!.querySelector(
+          gallery.current!.querySelector(".color-picker-content--canvas-colors")
-            ".color-picker-content--canvas-colors",
+            ?.children,
-          )!.children,
           activeElement,
         );
         if (index !== -1) {
           isCustom = true;
         }
       }
-      const parentSelector = isCustom
+      const parentElement = isCustom
-        ? gallery!.current!.querySelector(
+        ? gallery.current?.querySelector(".color-picker-content--canvas-colors")
-            ".color-picker-content--canvas-colors",
+        : gallery.current?.querySelector(".color-picker-content--default");
-          )!
-        : gallery!.current!.querySelector(".color-picker-content--default")!;
 
-      if (index !== -1) {
+      if (parentElement && index !== -1) {
-        const length = parentSelector!.children.length - (showInput ? 1 : 0);
+        const length = parentElement.children.length - (showInput ? 1 : 0);
         const nextIndex =
           event.key === (isRTL ? KEYS.ARROW_LEFT : KEYS.ARROW_RIGHT)
             ? (index + 1) % length
@@ -177,30 +165,38 @@ const Picker = ({
             : !isCustom && event.key === KEYS.ARROW_UP
             ? (length + index - 5) % length
             : index;
-        (parentSelector!.children![nextIndex] as HTMLElement)?.focus();
+        (parentElement.children[nextIndex] as HTMLElement | undefined)?.focus();
       }
       event.preventDefault();
     } else if (
       keyBindings.includes(event.key.toLowerCase()) &&
+      !event[KEYS.CTRL_OR_CMD] &&
+      !event.altKey &&
       !isWritableElement(event.target)
     ) {
+      handled = true;
       const index = keyBindings.indexOf(event.key.toLowerCase());
       const isCustom = index >= MAX_DEFAULT_COLORS;
-      const parentSelector = isCustom
+      const parentElement = isCustom
-        ? gallery!.current!.querySelector(
+        ? gallery?.current?.querySelector(
             ".color-picker-content--canvas-colors",
-          )!
+          )
-        : gallery!.current!.querySelector(".color-picker-content--default")!;
+        : gallery?.current?.querySelector(".color-picker-content--default");
       const actualIndex = isCustom ? index - MAX_DEFAULT_COLORS : index;
-      (parentSelector!.children![actualIndex] as HTMLElement)?.focus();
+      (
+        parentElement?.children[actualIndex] as HTMLElement | undefined
+      )?.focus();
 
       event.preventDefault();
     } else if (event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) {
+      handled = true;
       event.preventDefault();
       onClose();
     }
-    event.nativeEvent.stopImmediatePropagation();
+    if (handled) {
-    event.stopPropagation();
+      event.nativeEvent.stopImmediatePropagation();
+      event.stopPropagation();
+    }
   };
 
   const renderColors = (colors: Array<string>, custom: boolean = false) => {
@@ -264,7 +260,8 @@ const Picker = ({
             gallery.current = el;
           }
         }}
-        tabIndex={0}
+        // to allow focusing by clicking but not by tabbing
+        tabIndex={-1}
       >
         <div className="color-picker-content--default">
           {renderColors(colors)}
@@ -346,6 +343,8 @@ const ColorInput = React.forwardRef(
   },
 );
 
+ColorInput.displayName = "ColorInput";
+
 export const ColorPicker = ({
   type,
   color,

src/components/Dialog.tsx

@@ -2,13 +2,14 @@ import clsx from "clsx";
 import React, { useEffect, useState } from "react";
 import { useCallbackRefState } from "../hooks/useCallbackRefState";
 import { t } from "../i18n";
-import { useExcalidrawContainer, useDeviceType } from "../components/App";
+import { useExcalidrawContainer, useDevice } from "../components/App";
 import { KEYS } from "../keys";
 import "./Dialog.scss";
 import { back, close } from "./icons";
 import { Island } from "./Island";
 import { Modal } from "./Modal";
 import { AppState } from "../types";
+import { queryFocusableElements } from "../utils";
 
 export interface DialogProps {
   children: React.ReactNode;
@@ -64,14 +65,6 @@ export const Dialog = (props: DialogProps) => {
     return () => islandNode.removeEventListener("keydown", handleKeyDown);
   }, [islandNode, props.autofocus]);
 
-  const queryFocusableElements = (node: HTMLElement) => {
-    const focusableElements = node.querySelectorAll<HTMLElement>(
-      "button, a, input, select, textarea, div[tabindex]",
-    );
-
-    return focusableElements ? Array.from(focusableElements) : [];
-  };
-
   const onClose = () => {
     (lastActiveElement as HTMLElement).focus();
     props.onCloseRequest();
@@ -92,9 +85,10 @@ export const Dialog = (props: DialogProps) => {
           <button
             className="Modal__close"
             onClick={onClose}
+            title={t("buttons.close")}
             aria-label={t("buttons.close")}
           >
-            {useDeviceType().isMobile ? back : close}
+            {useDevice().isMobile ? back : close}
           </button>
         </h2>
         <div className="Dialog__content">{props.children}</div>

src/components/Footer.tsx

@@ -0,0 +1,106 @@
+import clsx from "clsx";
+import { ActionManager } from "../actions/manager";
+import { AppState, ExcalidrawProps } from "../types";
+import {
+  ExitZenModeAction,
+  FinalizeAction,
+  UndoRedoActions,
+  ZoomActions,
+} from "./Actions";
+import { useDevice } from "./App";
+import { Island } from "./Island";
+import { Section } from "./Section";
+import Stack from "./Stack";
+
+const Footer = ({
+  appState,
+  actionManager,
+  renderCustomFooter,
+  showExitZenModeBtn,
+}: {
+  appState: AppState;
+  actionManager: ActionManager;
+  renderCustomFooter?: ExcalidrawProps["renderFooter"];
+  showExitZenModeBtn: boolean;
+}) => {
+  const device = useDevice();
+  const showFinalize =
+    !appState.viewModeEnabled && appState.multiElement && device.isTouchScreen;
+  return (
+    <footer
+      role="contentinfo"
+      className="layer-ui__wrapper__footer App-menu App-menu_bottom"
+    >
+      <div
+        className={clsx("layer-ui__wrapper__footer-left zen-mode-transition", {
+          "layer-ui__wrapper__footer-left--transition-left":
+            appState.zenModeEnabled,
+        })}
+      >
+        <Stack.Col gap={2}>
+          <Section heading="canvasActions">
+            <Island padding={1}>
+              <ZoomActions
+                renderAction={actionManager.renderAction}
+                zoom={appState.zoom}
+              />
+            </Island>
+            {!appState.viewModeEnabled && (
+              <>
+                <UndoRedoActions
+                  renderAction={actionManager.renderAction}
+                  className={clsx("zen-mode-transition", {
+                    "layer-ui__wrapper__footer-left--transition-bottom":
+                      appState.zenModeEnabled,
+                  })}
+                />
+
+                <div
+                  className={clsx("eraser-buttons zen-mode-transition", {
+                    "layer-ui__wrapper__footer-left--transition-left":
+                      appState.zenModeEnabled,
+                  })}
+                >
+                  {actionManager.renderAction("eraser", { size: "small" })}
+                </div>
+              </>
+            )}
+            {showFinalize && (
+              <FinalizeAction
+                renderAction={actionManager.renderAction}
+                className={clsx("zen-mode-transition", {
+                  "layer-ui__wrapper__footer-left--transition-left":
+                    appState.zenModeEnabled,
+                })}
+              />
+            )}
+          </Section>
+        </Stack.Col>
+      </div>
+      <div
+        className={clsx(
+          "layer-ui__wrapper__footer-center zen-mode-transition",
+          {
+            "layer-ui__wrapper__footer-left--transition-bottom":
+              appState.zenModeEnabled,
+          },
+        )}
+      >
+        {renderCustomFooter?.(false, appState)}
+      </div>
+      <div
+        className={clsx("layer-ui__wrapper__footer-right zen-mode-transition", {
+          "transition-right disable-pointerEvents": appState.zenModeEnabled,
+        })}
+      >
+        {actionManager.renderAction("toggleShortcuts")}
+      </div>
+      <ExitZenModeAction
+        actionManager={actionManager}
+        showExitZenModeBtn={showExitZenModeBtn}
+      />
+    </footer>
+  );
+};
+
+export default Footer;

src/components/HintViewer.tsx

@@ -3,7 +3,7 @@ import { NonDeletedExcalidrawElement } from "../element/types";
 import { getSelectedElements } from "../scene";
 
 import "./HintViewer.scss";
-import { AppState } from "../types";
+import { AppState, Device } from "../types";
 import {
   isImageElement,
   isLinearElement,
@@ -17,13 +17,19 @@ interface HintViewerProps {
   appState: AppState;
   elements: readonly NonDeletedExcalidrawElement[];
   isMobile: boolean;
+  device: Device;
 }
 
-const getHints = ({ appState, elements, isMobile }: HintViewerProps) => {
+const getHints = ({
+  appState,
+  elements,
+  isMobile,
+  device,
+}: HintViewerProps) => {
   const { activeTool, isResizing, isRotating, lastPointerDownWith } = appState;
   const multiMode = appState.multiElement !== null;
 
-  if (appState.isLibraryOpen) {
+  if (appState.openSidebar === "library" && !device.canDeviceFitSidebar) {
     return null;
   }
 
@@ -45,7 +51,7 @@ const getHints = ({ appState, elements, isMobile }: HintViewerProps) => {
     return t("hints.text");
   }
 
-  if (appState.activeTool.type === "image" && appState.pendingImageElement) {
+  if (appState.activeTool.type === "image" && appState.pendingImageElementId) {
     return t("hints.placeImage");
   }
 
@@ -111,11 +117,13 @@ export const HintViewer = ({
   appState,
   elements,
   isMobile,
+  device,
 }: HintViewerProps) => {
   let hint = getHints({
     appState,
     elements,
     isMobile,
+    device,
   });
   if (!hint) {
     return null;

src/components/ImageExportDialog.tsx

@@ -5,7 +5,7 @@ import { canvasToBlob } from "../data/blob";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { CanvasError } from "../errors";
 import { t } from "../i18n";
-import { useDeviceType } from "./App";
+import { useDevice } from "./App";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { exportToCanvas } from "../scene/export";
 import { AppState, BinaryFiles } from "../types";
@@ -58,6 +58,7 @@ const ExportButton: React.FC<{
   onClick: () => void;
   title: string;
   shade?: number;
+  children?: React.ReactNode;
 }> = ({ children, title, onClick, color, shade = 6 }) => {
   return (
     <button
@@ -170,7 +171,9 @@ const ImageExportModal = ({
         <Stack.Row gap={2}>
           {actionManager.renderAction("changeExportScale")}
         </Stack.Row>
-        <p style={{ marginLeft: "1em", userSelect: "none" }}>Scale</p>
+        <p style={{ marginLeft: "1em", userSelect: "none" }}>
+          {t("buttons.scale")}
+        </p>
       </div>
       <div
         style={{
@@ -250,7 +253,7 @@ export const ImageExportDialog = ({
         icon={exportImage}
         type="button"
         aria-label={t("buttons.exportImage")}
-        showAriaLabel={useDeviceType().isMobile}
+        showAriaLabel={useDevice().isMobile}
         title={t("buttons.exportImage")}
       />
       {modalIsShown && (

src/components/InitializeApp.tsx

@@ -2,10 +2,12 @@ import React, { useEffect, useState } from "react";
 
 import { LoadingMessage } from "./LoadingMessage";
 import { defaultLang, Language, languages, setLanguage } from "../i18n";
+import { Theme } from "../element/types";
 
 interface Props {
   langCode: Language["code"];
   children: React.ReactElement;
+  theme?: Theme;
 }
 
 export const InitializeApp = (props: Props) => {
@@ -14,12 +16,12 @@ export const InitializeApp = (props: Props) => {
   useEffect(() => {
     const updateLang = async () => {
       await setLanguage(currentLang);
+      setLoading(false);
     };
     const currentLang =
       languages.find((lang) => lang.code === props.langCode) || defaultLang;
     updateLang();
-    setLoading(false);
   }, [props.langCode]);
 
-  return loading ? <LoadingMessage /> : props.children;
+  return loading ? <LoadingMessage theme={props.theme} /> : props.children;
 };

src/components/JSONExportDialog.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
-import { useDeviceType } from "./App";
+import { useDevice } from "./App";
 import { AppState, ExportOpts, BinaryFiles } from "../types";
 import { Dialog } from "./Dialog";
 import { exportFile, exportToFileIcon, link } from "./icons";
@@ -117,7 +117,7 @@ export const JSONExportDialog = ({
         icon={exportFile}
         type="button"
         aria-label={t("buttons.export")}
-        showAriaLabel={useDeviceType().isMobile}
+        showAriaLabel={useDevice().isMobile}
         title={t("buttons.export")}
       />
       {modalIsShown && (

src/components/LayerUI.scss

@@ -1,9 +1,21 @@
 @import "open-color/open-color";
+@import "../css/variables.module";
 
 .excalidraw {
+  .layer-ui__wrapper.animate {
+    transition: width 0.1s ease-in-out;
+  }
   .layer-ui__wrapper {
+    // when the rightside sidebar is docked, we need to resize the UI by its
+    // width, making the nested UI content shift to the left. To do this,
+    // we need the UI container to actually have dimensions set, but
+    // then we also need to disable pointer events else the canvas below
+    // wouldn't be interactive.
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
     z-index: var(--zIndex-layerUI);
-
     &__top-right {
       display: flex;
     }

src/components/LayerUI.tsx

@@ -1,16 +1,16 @@
 import clsx from "clsx";
-import React, { useCallback } from "react";
+import React from "react";
 import { ActionManager } from "../actions/manager";
-import { CLASSES } from "../constants";
+import { CLASSES, LIBRARY_SIDEBAR_WIDTH } from "../constants";
 import { exportCanvas } from "../data";
 import { isTextElement, showSelectedShapeActions } from "../element";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { Language, t } from "../i18n";
-import { calculateScrollCenter, getSelectedElements } from "../scene";
+import { calculateScrollCenter } from "../scene";
 import { ExportType } from "../scene/types";
 import { AppProps, AppState, ExcalidrawProps, BinaryFiles } from "../types";
 import { muteFSAbortError } from "../utils";
-import { SelectedShapeActions, ShapesSwitcher, ZoomActions } from "./Actions";
+import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
 import { BackgroundPickerAndDarkModeToggle } from "./BackgroundPickerAndDarkModeToggle";
 import CollabButton from "./CollabButton";
 import { ErrorDialog } from "./ErrorDialog";
@@ -25,7 +25,6 @@ import { PasteChartDialog } from "./PasteChartDialog";
 import { Section } from "./Section";
 import { HelpDialog } from "./HelpDialog";
 import Stack from "./Stack";
-import { Tooltip } from "./Tooltip";
 import { UserList } from "./UserList";
 import Library from "../data/library";
 import { JSONExportDialog } from "./JSONExportDialog";
@@ -37,7 +36,13 @@ import "./LayerUI.scss";
 import "./Toolbar.scss";
 import { PenModeButton } from "./PenModeButton";
 import { trackEvent } from "../analytics";
-import { useDeviceType } from "../components/App";
+import { useDevice } from "../components/App";
+import { Stats } from "./Stats";
+import { actionToggleStats } from "../actions/actionToggleStats";
+import Footer from "./Footer";
+import { hostSidebarCountersAtom } from "./Sidebar/Sidebar";
+import { jotaiScope } from "../jotai";
+import { useAtom } from "jotai";
 
 interface LayerUIProps {
   actionManager: ActionManager;
@@ -50,18 +55,13 @@ interface LayerUIProps {
   onLockToggle: () => void;
   onPenModeToggle: () => void;
   onInsertElements: (elements: readonly NonDeletedExcalidrawElement[]) => void;
-  zenModeEnabled: boolean;
   showExitZenModeBtn: boolean;
-  showThemeBtn: boolean;
-  toggleZenMode: () => void;
   langCode: Language["code"];
   isCollaborating: boolean;
-  renderTopRightUI?: (
+  renderTopRightUI?: ExcalidrawProps["renderTopRightUI"];
-    isMobile: boolean,
+  renderCustomFooter?: ExcalidrawProps["renderFooter"];
-    appState: AppState,
+  renderCustomStats?: ExcalidrawProps["renderCustomStats"];
-  ) => JSX.Element | null;
+  renderCustomSidebar?: ExcalidrawProps["renderSidebar"];
-  renderCustomFooter?: (isMobile: boolean, appState: AppState) => JSX.Element;
-  viewModeEnabled: boolean;
   libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
   UIOptions: AppProps["UIOptions"];
   focusContainer: () => void;
@@ -69,26 +69,23 @@ interface LayerUIProps {
   id: string;
   onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void;
 }
-
 const LayerUI = ({
   actionManager,
   appState,
   files,
   setAppState,
-  canvas,
   elements,
+  canvas,
   onCollabButtonClick,
   onLockToggle,
   onPenModeToggle,
   onInsertElements,
-  zenModeEnabled,
   showExitZenModeBtn,
-  showThemeBtn,
-  toggleZenMode,
   isCollaborating,
   renderTopRightUI,
   renderCustomFooter,
-  viewModeEnabled,
+  renderCustomStats,
+  renderCustomSidebar,
   libraryReturnUrl,
   UIOptions,
   focusContainer,
@@ -96,7 +93,7 @@ const LayerUI = ({
   id,
   onImageAction,
 }: LayerUIProps) => {
-  const deviceType = useDeviceType();
+  const device = useDevice();
 
   const renderJSONExportDialog = () => {
     if (!UIOptions.canvasActions.export) {
@@ -172,7 +169,7 @@ const LayerUI = ({
       <Section
         heading="canvasActions"
         className={clsx("zen-mode-transition", {
-          "transition-left": zenModeEnabled,
+          "transition-left": appState.zenModeEnabled,
         })}
       >
         {/* the zIndex ensures this menu has higher stacking order,
@@ -193,7 +190,7 @@ const LayerUI = ({
     <Section
       heading="canvasActions"
       className={clsx("zen-mode-transition", {
-        "transition-left": zenModeEnabled,
+        "transition-left": appState.zenModeEnabled,
       })}
     >
       {/* the zIndex ensures this menu has higher stacking order,
@@ -215,12 +212,7 @@ const LayerUI = ({
               />
             )}
           </Stack.Row>
-          <BackgroundPickerAndDarkModeToggle
+          <BackgroundPickerAndDarkModeToggle actionManager={actionManager} />
-            actionManager={actionManager}
-            appState={appState}
-            setAppState={setAppState}
-            showThemeBtn={showThemeBtn}
-          />
           {appState.fileHandle && (
             <>{actionManager.renderAction("saveToActiveFile")}</>
           )}
@@ -233,7 +225,7 @@ const LayerUI = ({
     <Section
       heading="selectedShapeActions"
       className={clsx("zen-mode-transition", {
-        "transition-left": zenModeEnabled,
+        "transition-left": appState.zenModeEnabled,
       })}
     >
       <Island
@@ -250,46 +242,11 @@ const LayerUI = ({
           appState={appState}
           elements={elements}
           renderAction={actionManager.renderAction}
-          activeTool={appState.activeTool.type}
         />
       </Island>
     </Section>
   );
 
-  const closeLibrary = useCallback(() => {
-    const isDialogOpen = !!document.querySelector(".Dialog");
-
-    // Prevent closing if any dialog is open
-    if (isDialogOpen) {
-      return;
-    }
-    setAppState({ isLibraryOpen: false });
-  }, [setAppState]);
-
-  const deselectItems = useCallback(() => {
-    setAppState({
-      selectedElementIds: {},
-      selectedGroupIds: {},
-    });
-  }, [setAppState]);
-
-  const libraryMenu = appState.isLibraryOpen ? (
-    <LibraryMenu
-      pendingElements={getSelectedElements(elements, appState, true)}
-      onClose={closeLibrary}
-      onInsertShape={onInsertElements}
-      onAddToLibrary={deselectItems}
-      setAppState={setAppState}
-      libraryReturnUrl={libraryReturnUrl}
-      focusContainer={focusContainer}
-      library={library}
-      theme={appState.theme}
-      files={files}
-      id={id}
-      appState={appState}
-    />
-  ) : null;
-
   const renderFixedSideContainer = () => {
     const shouldRenderSelectedShapeActions = showSelectedShapeActions(
       appState,
@@ -301,32 +258,34 @@ const LayerUI = ({
         <div className="App-menu App-menu_top">
           <Stack.Col
             gap={4}
-            className={clsx({ "disable-pointerEvents": zenModeEnabled })}
+            className={clsx({
+              "disable-pointerEvents": appState.zenModeEnabled,
+            })}
           >
-            {viewModeEnabled
+            {appState.viewModeEnabled
               ? renderViewModeCanvasActions()
               : renderCanvasActions()}
             {shouldRenderSelectedShapeActions && renderSelectedShapeActions()}
           </Stack.Col>
-          {!viewModeEnabled && (
+          {!appState.viewModeEnabled && (
             <Section heading="shapes">
-              {(heading) => (
+              {(heading: React.ReactNode) => (
                 <Stack.Col gap={4} align="start">
                   <Stack.Row
                     gap={1}
                     className={clsx("App-toolbar-container", {
-                      "zen-mode": zenModeEnabled,
+                      "zen-mode": appState.zenModeEnabled,
                     })}
                   >
                     <PenModeButton
-                      zenModeEnabled={zenModeEnabled}
+                      zenModeEnabled={appState.zenModeEnabled}
                       checked={appState.penMode}
                       onChange={onPenModeToggle}
                       title={t("toolBar.penMode")}
                       penDetected={appState.penDetected}
                     />
                     <LockButton
-                      zenModeEnabled={zenModeEnabled}
+                      zenModeEnabled={appState.zenModeEnabled}
                       checked={appState.activeTool.locked}
                       onChange={() => onLockToggle()}
                       title={t("toolBar.lock")}
@@ -334,13 +293,14 @@ const LayerUI = ({
                     <Island
                       padding={1}
                       className={clsx("App-toolbar", {
-                        "zen-mode": zenModeEnabled,
+                        "zen-mode": appState.zenModeEnabled,
                       })}
                     >
                       <HintViewer
                         appState={appState}
                         elements={elements}
-                        isMobile={deviceType.isMobile}
+                        isMobile={device.isMobile}
+                        device={device}
                       />
                       {heading}
                       <Stack.Row gap={1}>
@@ -362,7 +322,6 @@ const LayerUI = ({
                       setAppState={setAppState}
                     />
                   </Stack.Row>
-                  {libraryMenu}
                 </Stack.Col>
               )}
             </Section>
@@ -371,126 +330,39 @@ const LayerUI = ({
             className={clsx(
               "layer-ui__wrapper__top-right zen-mode-transition",
               {
-                "transition-right": zenModeEnabled,
+                "transition-right": appState.zenModeEnabled,
               },
             )}
           >
-            <UserList>
+            <UserList
-              {appState.collaborators.size > 0 &&
+              collaborators={appState.collaborators}
-                Array.from(appState.collaborators)
+              actionManager={actionManager}
-                  // Collaborator is either not initialized or is actually the current user.
+            />
-                  .filter(([_, client]) => Object.keys(client).length !== 0)
+            {renderTopRightUI?.(device.isMobile, appState)}
-                  .map(([clientId, client]) => (
-                    <Tooltip
-                      label={client.username || "Unknown user"}
-                      key={clientId}
-                    >
-                      {actionManager.renderAction("goToCollaborator", {
-                        id: clientId,
-                      })}
-                    </Tooltip>
-                  ))}
-            </UserList>
-            {renderTopRightUI?.(deviceType.isMobile, appState)}
           </div>
         </div>
       </FixedSideContainer>
     );
   };
 
-  const renderBottomAppMenu = () => {
+  const renderSidebars = () => {
-    return (
+    return appState.openSidebar === "customSidebar" ? (
-      <footer
+      renderCustomSidebar?.() || null
-        role="contentinfo"
+    ) : appState.openSidebar === "library" ? (
-        className="layer-ui__wrapper__footer App-menu App-menu_bottom"
+      <LibraryMenu
-      >
+        appState={appState}
-        <div
+        onInsertElements={onInsertElements}
-          className={clsx(
+        libraryReturnUrl={libraryReturnUrl}
-            "layer-ui__wrapper__footer-left zen-mode-transition",
+        focusContainer={focusContainer}
-            {
+        library={library}
-              "layer-ui__wrapper__footer-left--transition-left": zenModeEnabled,
+        id={id}
-            },
+      />
-          )}
+    ) : null;
-        >
-          <Stack.Col gap={2}>
-            <Section heading="canvasActions">
-              <Island padding={1}>
-                <ZoomActions
-                  renderAction={actionManager.renderAction}
-                  zoom={appState.zoom}
-                />
-              </Island>
-              {!viewModeEnabled && (
-                <>
-                  <div
-                    className={clsx("undo-redo-buttons zen-mode-transition", {
-                      "layer-ui__wrapper__footer-left--transition-bottom":
-                        zenModeEnabled,
-                    })}
-                  >
-                    {actionManager.renderAction("undo", { size: "small" })}
-                    {actionManager.renderAction("redo", { size: "small" })}
-                  </div>
-
-                  <div
-                    className={clsx("eraser-buttons zen-mode-transition", {
-                      "layer-ui__wrapper__footer-left--transition-left":
-                        zenModeEnabled,
-                    })}
-                  >
-                    {actionManager.renderAction("eraser", { size: "small" })}
-                  </div>
-                </>
-              )}
-              {!viewModeEnabled &&
-                appState.multiElement &&
-                deviceType.isTouchScreen && (
-                  <div
-                    className={clsx("finalize-button zen-mode-transition", {
-                      "layer-ui__wrapper__footer-left--transition-left":
-                        zenModeEnabled,
-                    })}
-                  >
-                    {actionManager.renderAction("finalize", { size: "small" })}
-                  </div>
-                )}
-            </Section>
-          </Stack.Col>
-        </div>
-        <div
-          className={clsx(
-            "layer-ui__wrapper__footer-center zen-mode-transition",
-            {
-              "layer-ui__wrapper__footer-left--transition-bottom":
-                zenModeEnabled,
-            },
-          )}
-        >
-          {renderCustomFooter?.(false, appState)}
-        </div>
-        <div
-          className={clsx(
-            "layer-ui__wrapper__footer-right zen-mode-transition",
-            {
-              "transition-right disable-pointerEvents": zenModeEnabled,
-            },
-          )}
-        >
-          {actionManager.renderAction("toggleShortcuts")}
-        </div>
-        <button
-          className={clsx("disable-zen-mode", {
-            "disable-zen-mode--visible": showExitZenModeBtn,
-          })}
-          onClick={toggleZenMode}
-        >
-          {t("buttons.exitZenMode")}
-        </button>
-      </footer>
-    );
   };
 
-  const dialogs = (
+  const [hostSidebarCounters] = useAtom(hostSidebarCountersAtom, jotaiScope);
+
+  return (
     <>
       {appState.isLoading && <LoadingMessage delay={250} />}
       {appState.errorMessage && (
@@ -518,57 +390,82 @@ const LayerUI = ({
           }
         />
       )}
-    </>
+      {device.isMobile && (
-  );
+        <MobileMenu
-
+          appState={appState}
-  return deviceType.isMobile ? (
+          elements={elements}
-    <>
+          actionManager={actionManager}
-      {dialogs}
+          renderJSONExportDialog={renderJSONExportDialog}
-      <MobileMenu
+          renderImageExportDialog={renderImageExportDialog}
-        appState={appState}
+          setAppState={setAppState}
-        elements={elements}
+          onCollabButtonClick={onCollabButtonClick}
-        actionManager={actionManager}
+          onLockToggle={() => onLockToggle()}
-        libraryMenu={libraryMenu}
+          onPenModeToggle={onPenModeToggle}
-        renderJSONExportDialog={renderJSONExportDialog}
+          canvas={canvas}
-        renderImageExportDialog={renderImageExportDialog}
+          isCollaborating={isCollaborating}
-        setAppState={setAppState}
+          renderCustomFooter={renderCustomFooter}
-        onCollabButtonClick={onCollabButtonClick}
+          onImageAction={onImageAction}
-        onLockToggle={() => onLockToggle()}
+          renderTopRightUI={renderTopRightUI}
-        onPenModeToggle={onPenModeToggle}
+          renderCustomStats={renderCustomStats}
-        canvas={canvas}
+          renderSidebars={renderSidebars}
-        isCollaborating={isCollaborating}
+          device={device}
-        renderCustomFooter={renderCustomFooter}
+        />
-        viewModeEnabled={viewModeEnabled}
-        showThemeBtn={showThemeBtn}
-        onImageAction={onImageAction}
-        renderTopRightUI={renderTopRightUI}
-      />
-    </>
-  ) : (
-    <div
-      className={clsx("layer-ui__wrapper", {
-        "disable-pointerEvents":
-          appState.draggingElement ||
-          appState.resizingElement ||
-          (appState.editingElement && !isTextElement(appState.editingElement)),
-      })}
-    >
-      {dialogs}
-      {renderFixedSideContainer()}
-      {renderBottomAppMenu()}
-      {appState.scrolledOutside && (
-        <button
-          className="scroll-back-to-content"
-          onClick={() => {
-            setAppState({
-              ...calculateScrollCenter(elements, appState, canvas),
-            });
-          }}
-        >
-          {t("buttons.scrollBackToContent")}
-        </button>
       )}
-    </div>
+
+      {!device.isMobile && (
+        <>
+          <div
+            className={clsx("layer-ui__wrapper", {
+              "disable-pointerEvents":
+                appState.draggingElement ||
+                appState.resizingElement ||
+                (appState.editingElement &&
+                  !isTextElement(appState.editingElement)),
+            })}
+            style={
+              ((appState.openSidebar === "library" &&
+                appState.isSidebarDocked) ||
+                hostSidebarCounters.docked) &&
+              device.canDeviceFitSidebar
+                ? { width: `calc(100% - ${LIBRARY_SIDEBAR_WIDTH}px)` }
+                : {}
+            }
+          >
+            {renderFixedSideContainer()}
+            <Footer
+              appState={appState}
+              actionManager={actionManager}
+              renderCustomFooter={renderCustomFooter}
+              showExitZenModeBtn={showExitZenModeBtn}
+            />
+            {appState.showStats && (
+              <Stats
+                appState={appState}
+                setAppState={setAppState}
+                elements={elements}
+                onClose={() => {
+                  actionManager.executeAction(actionToggleStats);
+                }}
+                renderCustomStats={renderCustomStats}
+              />
+            )}
+            {appState.scrolledOutside && (
+              <button
+                className="scroll-back-to-content"
+                onClick={() => {
+                  setAppState({
+                    ...calculateScrollCenter(elements, appState, canvas),
+                  });
+                }}
+              >
+                {t("buttons.scrollBackToContent")}
+              </button>
+            )}
+          </div>
+          {renderSidebars()}
+        </>
+      )}
+    </>
   );
 };
 
@@ -585,8 +482,12 @@ const areEqual = (prev: LayerUIProps, next: LayerUIProps) => {
   const nextAppState = getNecessaryObj(next.appState);
 
   const keys = Object.keys(prevAppState) as (keyof Partial<AppState>)[];
+
   return (
     prev.renderCustomFooter === next.renderCustomFooter &&
+    prev.renderTopRightUI === next.renderTopRightUI &&
+    prev.renderCustomStats === next.renderCustomStats &&
+    prev.renderCustomSidebar === next.renderCustomSidebar &&
     prev.langCode === next.langCode &&
     prev.elements === next.elements &&
     prev.files === next.files &&

src/components/LibraryButton.tsx

@@ -3,6 +3,8 @@ import clsx from "clsx";
 import { t } from "../i18n";
 import { AppState } from "../types";
 import { capitalizeString } from "../utils";
+import { trackEvent } from "../analytics";
+import { useDevice } from "./App";
 
 const LIBRARY_ICON = (
   <svg viewBox="0 0 576 512">
@@ -18,6 +20,7 @@ export const LibraryButton: React.FC<{
   setAppState: React.Component<any, AppState>["setState"];
   isMobile?: boolean;
 }> = ({ appState, setAppState, isMobile }) => {
+  const device = useDevice();
   return (
     <label
       className={clsx(
@@ -34,9 +37,21 @@ export const LibraryButton: React.FC<{
         type="checkbox"
         name="editor-library"
         onChange={(event) => {
-          setAppState({ isLibraryOpen: event.target.checked });
+          document
+            .querySelector(".layer-ui__wrapper")
+            ?.classList.remove("animate");
+          const isOpen = event.target.checked;
+          setAppState({ openSidebar: isOpen ? "library" : null });
+          // track only openings
+          if (isOpen) {
+            trackEvent(
+              "library",
+              "toggleLibrary (open)",
+              `toolbar (${device.isMobile ? "mobile" : "desktop"})`,
+            );
+          }
         }}
-        checked={appState.isLibraryOpen}
+        checked={appState.openSidebar === "library"}
         aria-label={capitalizeString(t("toolBar.library"))}
         aria-keyshortcuts="0"
       />

src/components/LibraryMenu.scss

@@ -1,28 +1,124 @@
 @import "open-color/open-color";
 
 .excalidraw {
-  .layer-ui__library {
+  .layer-ui__library-sidebar {
-    margin: auto;
     display: flex;
-    align-items: center;
+    flex-direction: column;
-    justify-content: center;
+  }
+
+  .layer-ui__library {
+    display: flex;
+    flex-direction: column;
+
+    flex: 1 1 auto;
 
     .layer-ui__library-header {
       display: flex;
       align-items: center;
       width: 100%;
-      margin: 2px 0;
+      margin: 2px 0 15px 0;
+      .Spinner {
+        margin-right: 1rem;
+      }
 
       button {
         // 2px from the left to account for focus border of left-most button
         margin: 0 2px;
       }
+    }
+  }
 
-      a {
+  .layer-ui__sidebar {
-        margin-inline-start: auto;
+    .library-menu-items-container {
-        // 17px for scrollbar (needed for overlay scrollbars on Big Sur?) + 1px extra
+      height: 100%;
-        padding-inline-end: 18px;
+      width: 100%;
-        white-space: nowrap;
+    }
+  }
+
+  .library-actions {
+    width: 100%;
+    display: flex;
+    margin-right: auto;
+    align-items: center;
+
+    button .library-actions-counter {
+      position: absolute;
+      right: 2px;
+      bottom: 2px;
+      border-radius: 50%;
+      width: 1em;
+      height: 1em;
+      padding: 1px;
+      font-size: 0.7rem;
+      background: #fff;
+    }
+
+    &--remove {
+      background-color: $oc-red-7;
+      &:hover {
+        background-color: $oc-red-8;
+      }
+      &:active {
+        background-color: $oc-red-9;
+      }
+      svg {
+        color: $oc-white;
+      }
+      .library-actions-counter {
+        color: $oc-red-7;
+      }
+    }
+
+    &--export {
+      background-color: $oc-lime-5;
+
+      &:hover {
+        background-color: $oc-lime-7;
+      }
+
+      &:active {
+        background-color: $oc-lime-8;
+      }
+      svg {
+        color: $oc-white;
+      }
+      .library-actions-counter {
+        color: $oc-lime-5;
+      }
+    }
+
+    &--publish {
+      background-color: $oc-cyan-6;
+      &:hover {
+        background-color: $oc-cyan-7;
+      }
+      &:active {
+        background-color: $oc-cyan-9;
+      }
+      svg {
+        color: $oc-white;
+      }
+      label {
+        margin-left: -0.2em;
+        margin-right: 1.1em;
+        color: $oc-white;
+        font-size: 0.86em;
+      }
+      .library-actions-counter {
+        color: $oc-cyan-6;
+      }
+    }
+
+    &--load {
+      background-color: $oc-blue-6;
+      &:hover {
+        background-color: $oc-blue-7;
+      }
+      &:active {
+        background-color: $oc-blue-9;
+      }
+      svg {
+        color: $oc-white;
       }
     }
   }
@@ -61,4 +157,38 @@
       }
     }
   }
+
+  .library-menu-browse-button {
+    width: 80%;
+    min-height: 22px;
+    margin: 0 auto;
+    margin-top: 1rem;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+
+    border-radius: var(--border-radius-lg);
+    background-color: var(--color-primary);
+    color: $oc-white;
+    text-align: center;
+    white-space: nowrap;
+    text-decoration: none !important;
+    &:hover {
+      background-color: var(--color-primary-darker);
+    }
+    &:active {
+      background-color: var(--color-primary-darkest);
+    }
+  }
+
+  .library-menu-browse-button--mobile {
+    min-height: 22px;
+    margin-left: auto;
+    a {
+      padding-right: 0;
+    }
+  }
 }

src/components/LibraryMenu.tsx

@@ -6,30 +6,31 @@ import {
   RefObject,
   forwardRef,
 } from "react";
-import Library, { libraryItemsAtom } from "../data/library";
+import Library, {
+  distributeLibraryItemsOnSquareGrid,
+  libraryItemsAtom,
+} from "../data/library";
 import { t } from "../i18n";
 import { randomId } from "../random";
-import {
+import { LibraryItems, LibraryItem, AppState, ExcalidrawProps } from "../types";
-  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 { EVENT, VERSIONS } from "../constants";
 import { KEYS } from "../keys";
-import { arrayToMap } from "../utils";
 import { trackEvent } from "../analytics";
 import { useAtom } from "jotai";
 import { jotaiScope } from "../jotai";
 import Spinner from "./Spinner";
+import {
+  useDevice,
+  useExcalidrawElements,
+  useExcalidrawSetAppState,
+} from "./App";
+import { Sidebar } from "./Sidebar/Sidebar";
+import { getSelectedElements } from "../scene";
+import { NonDeletedExcalidrawElement } from "../element/types";
+import { LibraryMenuHeader } from "./LibraryMenuHeaderContent";
 
 const useOnClickOutside = (
   ref: RefObject<HTMLElement>,
@@ -59,99 +60,45 @@ const useOnClickOutside = (
   }, [ref, cb]);
 };
 
-const getSelectedItems = (
-  libraryItems: LibraryItems,
-  selectedItems: LibraryItem["id"][],
-) => libraryItems.filter((item) => selectedItems.includes(item.id));
-
 const LibraryMenuWrapper = forwardRef<
   HTMLDivElement,
   { children: React.ReactNode }
 >(({ children }, ref) => {
   return (
-    <Island padding={1} ref={ref} className="layer-ui__library">
+    <div ref={ref} className="layer-ui__library">
       {children}
-    </Island>
+    </div>
   );
 });
 
-export const LibraryMenu = ({
+export const LibraryMenuContent = ({
-  onClose,
+  onInsertLibraryItems,
-  onInsertShape,
   pendingElements,
   onAddToLibrary,
-  theme,
   setAppState,
-  files,
   libraryReturnUrl,
-  focusContainer,
   library,
   id,
   appState,
+  selectedItems,
+  onSelectItems,
 }: {
   pendingElements: LibraryItem["elements"];
-  onClose: () => void;
+  onInsertLibraryItems: (libraryItems: LibraryItems) => 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;
+  selectedItems: LibraryItem["id"][];
+  onSelectItems: (id: LibraryItem["id"][]) => void;
 }) => {
-  const ref = useRef<HTMLDivElement | null>(null);
+  const referrer =
-
+    libraryReturnUrl || window.location.origin + window.location.pathname;
-  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 [selectedItems, setSelectedItems] = useState<LibraryItem["id"][]>([]);
-  const [showPublishLibraryDialog, setShowPublishLibraryDialog] =
-    useState(false);
-  const [publishLibSuccess, setPublishLibSuccess] = useState<null | {
-    url: string;
-    authorName: string;
-  }>(null);
 
   const [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);
 
-  const removeFromLibrary = useCallback(
-    async (libraryItems: LibraryItems) => {
-      const nextItems = libraryItems.filter(
-        (item) => !selectedItems.includes(item.id),
-      );
-      library.saveLibrary(nextItems).catch(() => {
-        setAppState({ errorMessage: t("alerts.errorRemovingFromLibrary") });
-      });
-      setSelectedItems([]);
-    },
-    [library, setAppState, selectedItems, setSelectedItems],
-  );
-
-  const resetLibrary = useCallback(() => {
-    library.resetLibrary();
-    focusContainer();
-  }, [library, focusContainer]);
-
   const addToLibrary = useCallback(
     async (elements: LibraryItem["elements"], libraryItems: LibraryItems) => {
       trackEvent("element", "addToLibrary", "ui");
@@ -170,68 +117,19 @@ export const LibraryMenu = ({
         ...libraryItems,
       ];
       onAddToLibrary();
-      library.saveLibrary(nextItems).catch(() => {
+      library.setLibrary(nextItems).catch(() => {
         setAppState({ errorMessage: t("alerts.errorAddingToLibrary") });
       });
     },
     [onAddToLibrary, library, setAppState],
   );
 
-  const renderPublishSuccess = useCallback(() => {
+  if (
+    libraryItemsData.status === "loading" &&
+    !libraryItemsData.isInitialized
+  ) {
     return (
-      <Dialog
+      <LibraryMenuWrapper>
-        onCloseRequest={() => setPublishLibSuccess(null)}
-        title={t("publishSuccessDialog.title")}
-        className="publish-library-success"
-        small={true}
-      >
-        <p>
-          {t("publishSuccessDialog.content", {
-            authorName: publishLibSuccess!.authorName,
-          })}{" "}
-          <a
-            href={publishLibSuccess?.url}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            {t("publishSuccessDialog.link")}
-          </a>
-        </p>
-        <ToolButton
-          type="button"
-          title={t("buttons.close")}
-          aria-label={t("buttons.close")}
-          label={t("buttons.close")}
-          onClick={() => setPublishLibSuccess(null)}
-          data-testid="publish-library-success-close"
-          className="publish-library-success-close"
-        />
-      </Dialog>
-    );
-  }, [setPublishLibSuccess, publishLibSuccess]);
-
-  const onPublishLibSuccess = useCallback(
-    (data, libraryItems: LibraryItems) => {
-      setShowPublishLibraryDialog(false);
-      setPublishLibSuccess({ url: data.url, authorName: data.authorName });
-      const nextLibItems = libraryItems.slice();
-      nextLibItems.forEach((libItem) => {
-        if (selectedItems.includes(libItem.id)) {
-          libItem.status = "published";
-        }
-      });
-      library.saveLibrary(nextLibItems);
-    },
-    [setShowPublishLibraryDialog, setPublishLibSuccess, selectedItems, library],
-  );
-
-  const [lastSelectedItem, setLastSelectedItem] = useState<
-    LibraryItem["id"] | null
-  >(null);
-
-  if (libraryItemsData.status === "loading") {
-    return (
-      <LibraryMenuWrapper ref={ref}>
         <div className="layer-ui__library-message">
           <Spinner size="2em" />
           <span>{t("labels.libraryLoadingMessage")}</span>
@@ -241,89 +139,168 @@ export const LibraryMenu = ({
   }
 
   return (
-    <LibraryMenuWrapper ref={ref}>
+    <LibraryMenuWrapper>
-      {showPublishLibraryDialog && (
-        <PublishLibrary
-          onClose={() => setShowPublishLibraryDialog(false)}
-          libraryItems={getSelectedItems(
-            libraryItemsData.libraryItems,
-            selectedItems,
-          )}
-          appState={appState}
-          onSuccess={(data) =>
-            onPublishLibSuccess(data, libraryItemsData.libraryItems)
-          }
-          onError={(error) => window.alert(error)}
-          updateItemsInStorage={() =>
-            library.saveLibrary(libraryItemsData.libraryItems)
-          }
-          onRemove={(id: string) =>
-            setSelectedItems(selectedItems.filter((_id) => _id !== id))
-          }
-        />
-      )}
-      {publishLibSuccess && renderPublishSuccess()}
       <LibraryMenuItems
+        isLoading={libraryItemsData.status === "loading"}
         libraryItems={libraryItemsData.libraryItems}
-        onRemoveFromLibrary={() =>
-          removeFromLibrary(libraryItemsData.libraryItems)
-        }
         onAddToLibrary={(elements) =>
           addToLibrary(elements, libraryItemsData.libraryItems)
         }
-        onInsertShape={onInsertShape}
+        onInsertLibraryItems={onInsertLibraryItems}
         pendingElements={pendingElements}
-        setAppState={setAppState}
-        libraryReturnUrl={libraryReturnUrl}
-        library={library}
-        theme={theme}
-        files={files}
-        id={id}
         selectedItems={selectedItems}
-        onToggle={(id, event) => {
+        onSelectItems={onSelectItems}
-          const shouldSelect = !selectedItems.includes(id);
-
-          if (shouldSelect) {
-            if (event.shiftKey && lastSelectedItem) {
-              const rangeStart = libraryItemsData.libraryItems.findIndex(
-                (item) => item.id === lastSelectedItem,
-              );
-              const rangeEnd = libraryItemsData.libraryItems.findIndex(
-                (item) => item.id === id,
-              );
-
-              if (rangeStart === -1 || rangeEnd === -1) {
-                setSelectedItems([...selectedItems, id]);
-                return;
-              }
-
-              const selectedItemsMap = arrayToMap(selectedItems);
-              const nextSelectedIds = libraryItemsData.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}
       />
+      <a
+        className="library-menu-browse-button"
+        href={`${process.env.REACT_APP_LIBRARY_URL}?target=${
+          window.name || "_blank"
+        }&referrer=${referrer}&useHash=true&token=${id}&theme=${
+          appState.theme
+        }&version=${VERSIONS.excalidrawLibrary}`}
+        target="_excalidraw_libraries"
+      >
+        {t("labels.libraries")}
+      </a>
     </LibraryMenuWrapper>
   );
 };
+
+export const LibraryMenu: React.FC<{
+  appState: AppState;
+  onInsertElements: (elements: readonly NonDeletedExcalidrawElement[]) => void;
+  libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
+  focusContainer: () => void;
+  library: Library;
+  id: string;
+}> = ({
+  appState,
+  onInsertElements,
+  libraryReturnUrl,
+  focusContainer,
+  library,
+  id,
+}) => {
+  const setAppState = useExcalidrawSetAppState();
+  const elements = useExcalidrawElements();
+  const device = useDevice();
+
+  const [selectedItems, setSelectedItems] = useState<LibraryItem["id"][]>([]);
+  const [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);
+
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  const closeLibrary = useCallback(() => {
+    const isDialogOpen = !!document.querySelector(".Dialog");
+
+    // Prevent closing if any dialog is open
+    if (isDialogOpen) {
+      return;
+    }
+    setAppState({ openSidebar: null });
+  }, [setAppState]);
+
+  useOnClickOutside(
+    ref,
+    useCallback(
+      (event) => {
+        // If click on the library icon, do nothing so that LibraryButton
+        // can toggle library menu
+        if ((event.target as Element).closest(".ToolIcon__library")) {
+          return;
+        }
+        if (!appState.isSidebarDocked || !device.canDeviceFitSidebar) {
+          closeLibrary();
+        }
+      },
+      [closeLibrary, appState.isSidebarDocked, device.canDeviceFitSidebar],
+    ),
+  );
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === KEYS.ESCAPE &&
+        (!appState.isSidebarDocked || !device.canDeviceFitSidebar)
+      ) {
+        closeLibrary();
+      }
+    };
+    document.addEventListener(EVENT.KEYDOWN, handleKeyDown);
+    return () => {
+      document.removeEventListener(EVENT.KEYDOWN, handleKeyDown);
+    };
+  }, [closeLibrary, appState.isSidebarDocked, device.canDeviceFitSidebar]);
+
+  const deselectItems = useCallback(() => {
+    setAppState({
+      selectedElementIds: {},
+      selectedGroupIds: {},
+    });
+  }, [setAppState]);
+
+  const removeFromLibrary = useCallback(
+    async (libraryItems: LibraryItems) => {
+      const nextItems = libraryItems.filter(
+        (item) => !selectedItems.includes(item.id),
+      );
+      library.setLibrary(nextItems).catch(() => {
+        setAppState({ errorMessage: t("alerts.errorRemovingFromLibrary") });
+      });
+      setSelectedItems([]);
+    },
+    [library, setAppState, selectedItems, setSelectedItems],
+  );
+
+  const resetLibrary = useCallback(() => {
+    library.resetLibrary();
+    focusContainer();
+  }, [library, focusContainer]);
+
+  return (
+    <Sidebar
+      __isInternal
+      // necessary to remount when switching between internal
+      // and custom (host app) sidebar, so that the `props.onClose`
+      // is colled correctly
+      key="library"
+      className="layer-ui__library-sidebar"
+      onDock={(docked) => {
+        trackEvent(
+          "library",
+          `toggleLibraryDock (${docked ? "dock" : "undock"})`,
+          `sidebar (${device.isMobile ? "mobile" : "desktop"})`,
+        );
+      }}
+      ref={ref}
+    >
+      <Sidebar.Header className="layer-ui__library-header">
+        <LibraryMenuHeader
+          appState={appState}
+          setAppState={setAppState}
+          selectedItems={selectedItems}
+          onSelectItems={setSelectedItems}
+          library={library}
+          onRemoveFromLibrary={() =>
+            removeFromLibrary(libraryItemsData.libraryItems)
+          }
+          resetLibrary={resetLibrary}
+        />
+      </Sidebar.Header>
+      <LibraryMenuContent
+        pendingElements={getSelectedElements(elements, appState, true)}
+        onInsertLibraryItems={(libraryItems) => {
+          onInsertElements(distributeLibraryItemsOnSquareGrid(libraryItems));
+        }}
+        onAddToLibrary={deselectItems}
+        setAppState={setAppState}
+        libraryReturnUrl={libraryReturnUrl}
+        library={library}
+        id={id}
+        appState={appState}
+        selectedItems={selectedItems}
+        onSelectItems={setSelectedItems}
+      />
+    </Sidebar>
+  );
+};

src/components/LibraryMenuHeaderContent.tsx

@@ -0,0 +1,258 @@
+import React, { useCallback, useState } from "react";
+import { saveLibraryAsJSON } from "../data/json";
+import Library, { libraryItemsAtom } from "../data/library";
+import { t } from "../i18n";
+import { AppState, LibraryItem, LibraryItems } from "../types";
+import { exportToFileIcon, load, publishIcon, trash } from "./icons";
+import { ToolButton } from "./ToolButton";
+import { Tooltip } from "./Tooltip";
+import { fileOpen } from "../data/filesystem";
+import { muteFSAbortError } from "../utils";
+import { useAtom } from "jotai";
+import { jotaiScope } from "../jotai";
+import ConfirmDialog from "./ConfirmDialog";
+import PublishLibrary from "./PublishLibrary";
+import { Dialog } from "./Dialog";
+
+const getSelectedItems = (
+  libraryItems: LibraryItems,
+  selectedItems: LibraryItem["id"][],
+) => libraryItems.filter((item) => selectedItems.includes(item.id));
+
+export const LibraryMenuHeader: React.FC<{
+  setAppState: React.Component<any, AppState>["setState"];
+  selectedItems: LibraryItem["id"][];
+  library: Library;
+  onRemoveFromLibrary: () => void;
+  resetLibrary: () => void;
+  onSelectItems: (items: LibraryItem["id"][]) => void;
+  appState: AppState;
+}> = ({
+  setAppState,
+  selectedItems,
+  library,
+  onRemoveFromLibrary,
+  resetLibrary,
+  onSelectItems,
+  appState,
+}) => {
+  const [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);
+
+  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 itemsSelected = !!selectedItems.length;
+  const items = itemsSelected
+    ? libraryItemsData.libraryItems.filter((item) =>
+        selectedItems.includes(item.id),
+      )
+    : libraryItemsData.libraryItems;
+  const resetLabel = itemsSelected
+    ? t("buttons.remove")
+    : t("buttons.resetLibrary");
+
+  const [showPublishLibraryDialog, setShowPublishLibraryDialog] =
+    useState(false);
+  const [publishLibSuccess, setPublishLibSuccess] = useState<null | {
+    url: string;
+    authorName: string;
+  }>(null);
+  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: { url: string; authorName: string }, libraryItems: LibraryItems) => {
+      setShowPublishLibraryDialog(false);
+      setPublishLibSuccess({ url: data.url, authorName: data.authorName });
+      const nextLibItems = libraryItems.slice();
+      nextLibItems.forEach((libItem) => {
+        if (selectedItems.includes(libItem.id)) {
+          libItem.status = "published";
+        }
+      });
+      library.setLibrary(nextLibItems);
+    },
+    [setShowPublishLibraryDialog, setPublishLibSuccess, selectedItems, library],
+  );
+
+  const onLibraryImport = async () => {
+    try {
+      await library.updateLibrary({
+        libraryItems: fileOpen({
+          description: "Excalidraw library files",
+          // ToDo: Be over-permissive until https://bugs.webkit.org/show_bug.cgi?id=34442
+          // gets resolved. Else, iOS users cannot open `.excalidraw` files.
+          /*
+            extensions: [".json", ".excalidrawlib"],
+            */
+        }),
+        merge: true,
+        openLibraryMenu: true,
+      });
+    } catch (error: any) {
+      if (error?.name === "AbortError") {
+        console.warn(error);
+        return;
+      }
+      setAppState({ errorMessage: t("errors.importLibraryError") });
+    }
+  };
+
+  const onLibraryExport = async () => {
+    const libraryItems = itemsSelected
+      ? items
+      : await library.getLatestLibrary();
+    saveLibraryAsJSON(libraryItems)
+      .catch(muteFSAbortError)
+      .catch((error) => {
+        setAppState({ errorMessage: error.message });
+      });
+  };
+
+  return (
+    <div className="library-actions">
+      {showRemoveLibAlert && renderRemoveLibAlert()}
+      {showPublishLibraryDialog && (
+        <PublishLibrary
+          onClose={() => setShowPublishLibraryDialog(false)}
+          libraryItems={getSelectedItems(
+            libraryItemsData.libraryItems,
+            selectedItems,
+          )}
+          appState={appState}
+          onSuccess={(data) =>
+            onPublishLibSuccess(data, libraryItemsData.libraryItems)
+          }
+          onError={(error) => window.alert(error)}
+          updateItemsInStorage={() =>
+            library.setLibrary(libraryItemsData.libraryItems)
+          }
+          onRemove={(id: string) =>
+            onSelectItems(selectedItems.filter((_id) => _id !== id))
+          }
+        />
+      )}
+      {publishLibSuccess && renderPublishSuccess()}
+      {!itemsSelected && (
+        <ToolButton
+          key="import"
+          type="button"
+          title={t("buttons.load")}
+          aria-label={t("buttons.load")}
+          icon={load}
+          onClick={onLibraryImport}
+          className="library-actions--load"
+        />
+      )}
+      {!!items.length && (
+        <>
+          <ToolButton
+            key="export"
+            type="button"
+            title={t("buttons.export")}
+            aria-label={t("buttons.export")}
+            icon={exportToFileIcon}
+            onClick={onLibraryExport}
+            className="library-actions--export"
+          >
+            {selectedItems.length > 0 && (
+              <span className="library-actions-counter">
+                {selectedItems.length}
+              </span>
+            )}
+          </ToolButton>
+          <ToolButton
+            key="reset"
+            type="button"
+            title={resetLabel}
+            aria-label={resetLabel}
+            icon={trash}
+            onClick={() => setShowRemoveLibAlert(true)}
+            className="library-actions--remove"
+          >
+            {selectedItems.length > 0 && (
+              <span className="library-actions-counter">
+                {selectedItems.length}
+              </span>
+            )}
+          </ToolButton>
+        </>
+      )}
+      {itemsSelected && (
+        <Tooltip label={t("hints.publishLibrary")}>
+          <ToolButton
+            type="button"
+            aria-label={t("buttons.publishLibrary")}
+            label={t("buttons.publishLibrary")}
+            icon={publishIcon}
+            className="library-actions--publish"
+            onClick={() => setShowPublishLibraryDialog(true)}
+          >
+            <label>{t("buttons.publishLibrary")}</label>
+            {selectedItems.length > 0 && (
+              <span className="library-actions-counter">
+                {selectedItems.length}
+              </span>
+            )}
+          </ToolButton>
+        </Tooltip>
+      )}
+    </div>
+  );
+};

src/components/LibraryMenuItems.scss

@@ -2,97 +2,21 @@
 
 .excalidraw {
   .library-menu-items-container {
-    .library-actions {
+    display: flex;
-      display: flex;
+    flex-direction: column;
+    height: 100%;
 
-      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;
+      flex: 1;
-      overflow: auto;
+      overflow-y: auto;
-      margin-top: 0.5rem;
+      overflow-x: hidden;
+      margin-bottom: 1rem;
     }
 
     .separator {
+      width: 100%;
+      display: flex;
+      align-items: center;
       font-weight: 500;
       font-size: 0.9rem;
       margin: 0.6em 0.2em;

src/components/LibraryMenuItems.tsx

@@ -1,192 +1,95 @@
-import { chunk } from "lodash";
+import React, { useState } from "react";
-import { useCallback, useState } from "react";
+import { serializeLibraryAsJSON } from "../data/json";
-import { importLibraryFromJSON, saveLibraryAsJSON } from "../data/json";
-import Library from "../data/library";
 import { ExcalidrawElement, NonDeleted } from "../element/types";
 import { t } from "../i18n";
-import {
+import { LibraryItem, LibraryItems } from "../types";
-  AppState,
+import { arrayToMap, chunk } from "../utils";
-  BinaryFiles,
-  ExcalidrawProps,
-  LibraryItem,
-  LibraryItems,
-} from "../types";
-import { muteFSAbortError } from "../utils";
-import { useDeviceType } 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";
+import { MIME_TYPES } from "../constants";
+import Spinner from "./Spinner";
+
+const CELLS_PER_ROW = 4;
 
 const LibraryMenuItems = ({
+  isLoading,
   libraryItems,
-  onRemoveFromLibrary,
   onAddToLibrary,
-  onInsertShape,
+  onInsertLibraryItems,
   pendingElements,
-  theme,
-  setAppState,
-  libraryReturnUrl,
-  library,
-  files,
-  id,
   selectedItems,
-  onToggle,
+  onSelectItems,
-  onPublish,
-  resetLibrary,
 }: {
+  isLoading: boolean;
   libraryItems: LibraryItems;
   pendingElements: LibraryItem["elements"];
-  onRemoveFromLibrary: () => void;
+  onInsertLibraryItems: (libraryItems: LibraryItems) => 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;
+  onSelectItems: (id: LibraryItem["id"][]) => void;
-  onPublish: () => void;
-  resetLibrary: () => void;
 }) => {
-  const renderRemoveLibAlert = useCallback(() => {
+  const [lastSelectedItem, setLastSelectedItem] = useState<
-    const content = selectedItems.length
+    LibraryItem["id"] | null
-      ? t("alerts.removeItemsFromsLibrary", { count: selectedItems.length })
+  >(null);
-      : 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 onItemSelectToggle = (
+    id: LibraryItem["id"],
+    event: React.MouseEvent,
+  ) => {
+    const shouldSelect = !selectedItems.includes(id);
 
-  const isMobile = useDeviceType().isMobile;
+    const orderedItems = [...unpublishedItems, ...publishedItems];
 
-  const renderLibraryActions = () => {
+    if (shouldSelect) {
-    const itemsSelected = !!selectedItems.length;
+      if (event.shiftKey && lastSelectedItem) {
-    const items = itemsSelected
+        const rangeStart = orderedItems.findIndex(
-      ? libraryItems.filter((item) => selectedItems.includes(item.id))
+          (item) => item.id === lastSelectedItem,
-      : libraryItems;
+        );
-    const resetLabel = itemsSelected
+        const rangeEnd = orderedItems.findIndex((item) => item.id === id);
-      ? t("buttons.remove")
+
-      : t("buttons.resetLibrary");
+        if (rangeStart === -1 || rangeEnd === -1) {
-    return (
+          onSelectItems([...selectedItems, id]);
-      <div className="library-actions">
+          return;
-        {(!itemsSelected || !isMobile) && (
+        }
-          <ToolButton
+
-            key="import"
+        const selectedItemsMap = arrayToMap(selectedItems);
-            type="button"
+        const nextSelectedIds = orderedItems.reduce(
-            title={t("buttons.load")}
+          (acc: LibraryItem["id"][], item, idx) => {
-            aria-label={t("buttons.load")}
+            if (
-            icon={load}
+              (idx >= rangeStart && idx <= rangeEnd) ||
-            onClick={() => {
+              selectedItemsMap.has(item.id)
-              importLibraryFromJSON(library)
+            ) {
-                .catch(muteFSAbortError)
+              acc.push(item.id);
-                .catch((error) => {
+            }
-                  setAppState({ errorMessage: error.message });
+            return acc;
-                });
+          },
-            }}
+          [],
-            className="library-actions--load"
+        );
-          />
+
-        )}
+        onSelectItems(nextSelectedIds);
-        {!!items.length && (
+      } else {
-          <>
+        onSelectItems([...selectedItems, id]);
-            <ToolButton
+      }
-              key="export"
+      setLastSelectedItem(id);
-              type="button"
+    } else {
-              title={t("buttons.export")}
+      setLastSelectedItem(null);
-              aria-label={t("buttons.export")}
+      onSelectItems(selectedItems.filter((_id) => _id !== id));
-              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 getInsertedElements = (id: string) => {
-
+    let targetElements;
-  const referrer =
+    if (selectedItems.includes(id)) {
-    libraryReturnUrl || window.location.origin + window.location.pathname;
+      targetElements = libraryItems.filter((item) =>
-  const isPublished = selectedItems.some(
+        selectedItems.includes(item.id),
-    (id) => libraryItems.find((item) => item.id === id)?.status === "published",
+      );
-  );
+    } else {
+      targetElements = libraryItems.filter((item) => item.id === id);
+    }
+    return targetElements;
+  };
 
   const createLibraryItemCompo = (params: {
     item:
@@ -203,13 +106,16 @@ const LibraryMenuItems = ({
       <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={onItemSelectToggle}
-            onToggle(id, event);
+          onDrag={(id, event) => {
+            event.dataTransfer.setData(
+              MIME_TYPES.excalidrawlib,
+              serializeLibraryAsJSON(getInsertedElements(id)),
+            );
           }}
         />
       </Stack.Col>
@@ -229,7 +135,7 @@ const LibraryMenuItems = ({
       if (item.id) {
         return createLibraryItemCompo({
           item,
-          onClick: () => onInsertShape(item.elements),
+          onClick: () => onInsertLibraryItems(getInsertedElements(item.id)),
           key: item.id,
         });
       }
@@ -268,47 +174,120 @@ const LibraryMenuItems = ({
     });
   };
 
+  const unpublishedItems = libraryItems.filter(
+    (item) => item.status !== "published",
+  );
   const publishedItems = libraryItems.filter(
     (item) => item.status === "published",
   );
-  const unpublishedItems = [
-    // append pending library item
-    ...(pendingElements.length
-      ? [{ id: null, elements: pendingElements }]
-      : []),
-    ...libraryItems.filter((item) => item.status !== "published"),
-  ];
 
   return (
-    <div className="library-menu-items-container">
+    <div
-      {showRemoveLibAlert && renderRemoveLibAlert()}
+      className="library-menu-items-container"
-      <div className="layer-ui__library-header" key="library-header">
+      style={
-        {renderLibraryActions()}
+        publishedItems.length || unpublishedItems.length
-        <a
+          ? {
-          href={`${process.env.REACT_APP_LIBRARY_URL}?target=${
+              flex: "1 1 0",
-            window.name || "_blank"
+              overflowY: "auto",
-          }&referrer=${referrer}&useHash=true&token=${id}&theme=${theme}&version=${
+            }
-            VERSIONS.excalidrawLibrary
+          : {
-          }`}
+              marginBottom: "2rem",
-          target="_excalidraw_libraries"
+              flex: 0,
-        >
+            }
-          {t("labels.libraries")}
+      }
-        </a>
+    >
-      </div>
       <Stack.Col
         className="library-menu-items-container__items"
         align="start"
         gap={1}
+        style={{
+          flex: publishedItems.length > 0 ? 1 : "0 1 auto",
+          marginBottom: 0,
+        }}
       >
         <>
-          <div className="separator">{t("labels.personalLib")}</div>
+          <div className="separator">
-          {renderLibrarySection(unpublishedItems)}
+            {(pendingElements.length > 0 ||
+              unpublishedItems.length > 0 ||
+              publishedItems.length > 0) && (
+              <div>{t("labels.personalLib")}</div>
+            )}
+            {isLoading && (
+              <div
+                style={{
+                  marginLeft: "auto",
+                  marginRight: "1rem",
+                  display: "flex",
+                  alignItems: "center",
+                  fontWeight: "normal",
+                }}
+              >
+                <div style={{ transform: "translateY(2px)" }}>
+                  <Spinner />
+                </div>
+              </div>
+            )}
+          </div>
+          {!pendingElements.length && !unpublishedItems.length ? (
+            <div
+              style={{
+                height: 65,
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                width: "100%",
+                fontSize: ".9rem",
+              }}
+            >
+              {t("library.noItems")}
+              <div
+                style={{
+                  margin: ".6rem 0",
+                  fontSize: ".8em",
+                  width: "70%",
+                  textAlign: "center",
+                }}
+              >
+                {publishedItems.length > 0
+                  ? t("library.hint_emptyPrivateLibrary")
+                  : t("library.hint_emptyLibrary")}
+              </div>
+            </div>
+          ) : (
+            renderLibrarySection([
+              // append pending library item
+              ...(pendingElements.length
+                ? [{ id: null, elements: pendingElements }]
+                : []),
+              ...unpublishedItems,
+            ])
+          )}
         </>
 
         <>
-          <div className="separator">{t("labels.excalidrawLib")} </div>
+          {(publishedItems.length > 0 ||
-
+            pendingElements.length > 0 ||
-          {renderLibrarySection(publishedItems)}
+            unpublishedItems.length > 0) && (
+            <div className="separator">{t("labels.excalidrawLib")}</div>
+          )}
+          {publishedItems.length > 0 ? (
+            renderLibrarySection(publishedItems)
+          ) : unpublishedItems.length > 0 ? (
+            <div
+              style={{
+                margin: "1rem 0",
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                width: "100%",
+                fontSize: ".9rem",
+              }}
+            >
+              {t("library.noItems")}
+            </div>
+          ) : null}
         </>
       </Stack.Col>
     </div>

src/components/LibraryUnit.scss

@@ -3,7 +3,7 @@
 .excalidraw {
   .library-unit {
     align-items: center;
-    border: 1px solid var(--button-gray-2);
+    border: 1px solid transparent;
     display: flex;
     justify-content: center;
     position: relative;
@@ -21,10 +21,6 @@
     }
   }
 
-  &.theme--dark .library-unit {
-    border-color: rgb(48, 48, 48);
-  }
-
   .library-unit__dragger {
     display: flex;
     align-items: center;

src/components/LibraryUnit.tsx

@@ -1,10 +1,9 @@
 import clsx from "clsx";
 import oc from "open-color";
 import { useEffect, useRef, useState } from "react";
-import { MIME_TYPES } from "../constants";
+import { useDevice } from "../components/App";
-import { useDeviceType } from "../components/App";
 import { exportToSvg } from "../scene/export";
-import { BinaryFiles, LibraryItem } from "../types";
+import { LibraryItem } from "../types";
 import "./LibraryUnit.scss";
 import { CheckboxItem } from "./CheckboxItem";
 
@@ -24,19 +23,19 @@ const PLUS_ICON = (
 export const LibraryUnit = ({
   id,
   elements,
-  files,
   isPending,
   onClick,
   selected,
   onToggle,
+  onDrag,
 }: {
   id: LibraryItem["id"] | /** for pending item */ null;
   elements?: LibraryItem["elements"];
-  files: BinaryFiles;
   isPending?: boolean;
   onClick: () => void;
   selected: boolean;
   onToggle: (id: string, event: React.MouseEvent) => void;
+  onDrag: (id: string, event: React.DragEvent) => void;
 }) => {
   const ref = useRef<HTMLDivElement | null>(null);
   useEffect(() => {
@@ -55,7 +54,7 @@ export const LibraryUnit = ({
           exportBackground: false,
           viewBackgroundColor: oc.white,
         },
-        files,
+        null,
       );
       node.innerHTML = svg.outerHTML;
     })();
@@ -63,10 +62,10 @@ export const LibraryUnit = ({
     return () => {
       node.innerHTML = "";
     };
-  }, [elements, files]);
+  }, [elements]);
 
   const [isHovered, setIsHovered] = useState(false);
-  const isMobile = useDeviceType().isMobile;
+  const isMobile = useDevice().isMobile;
   const adder = isPending && (
     <div className="library-unit__adder">{PLUS_ICON}</div>
   );
@@ -99,11 +98,12 @@ export const LibraryUnit = ({
             : undefined
         }
         onDragStart={(event) => {
+          if (!id) {
+            event.preventDefault();
+            return;
+          }
           setIsHovered(false);
-          event.dataTransfer.setData(
+          onDrag(id, event);
-            MIME_TYPES.excalidrawlib,
-            JSON.stringify(elements),
-          );
         }}
       />
       {adder}

src/components/LoadingMessage.tsx

@@ -1,8 +1,14 @@
 import { t } from "../i18n";
 import { useState, useEffect } from "react";
 import Spinner from "./Spinner";
+import clsx from "clsx";
+import { THEME } from "../constants";
+import { Theme } from "../element/types";
 
-export const LoadingMessage: React.FC<{ delay?: number }> = ({ delay }) => {
+export const LoadingMessage: React.FC<{ delay?: number; theme?: Theme }> = ({
+  delay,
+  theme,
+}) => {
   const [isWaiting, setIsWaiting] = useState(!!delay);
 
   useEffect(() => {
@@ -20,7 +26,11 @@ export const LoadingMessage: React.FC<{ delay?: number }> = ({ delay }) => {
   }
 
   return (
-    <div className="LoadingMessage">
+    <div
+      className={clsx("LoadingMessage", {
+        "LoadingMessage--dark": theme === THEME.DARK,
+      })}
+    >
       <div>
         <Spinner />
       </div>

src/components/MobileMenu.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { AppState } from "../types";
+import { AppState, Device, ExcalidrawProps } from "../types";
 import { ActionManager } from "../actions/manager";
 import { t } from "../i18n";
 import Stack from "./Stack";
@@ -18,6 +18,8 @@ import { UserList } from "./UserList";
 import { BackgroundPickerAndDarkModeToggle } from "./BackgroundPickerAndDarkModeToggle";
 import { LibraryButton } from "./LibraryButton";
 import { PenModeButton } from "./PenModeButton";
+import { Stats } from "./Stats";
+import { actionToggleStats } from "../actions";
 
 type MobileMenuProps = {
   appState: AppState;
@@ -26,26 +28,28 @@ type MobileMenuProps = {
   renderImageExportDialog: () => React.ReactNode;
   setAppState: React.Component<any, AppState>["setState"];
   elements: readonly NonDeletedExcalidrawElement[];
-  libraryMenu: JSX.Element | null;
   onCollabButtonClick?: () => void;
   onLockToggle: () => void;
   onPenModeToggle: () => void;
   canvas: HTMLCanvasElement | null;
   isCollaborating: boolean;
-  renderCustomFooter?: (isMobile: boolean, appState: AppState) => JSX.Element;
+  renderCustomFooter?: (
-  viewModeEnabled: boolean;
+    isMobile: boolean,
-  showThemeBtn: boolean;
+    appState: AppState,
+  ) => JSX.Element | null;
   onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void;
   renderTopRightUI?: (
     isMobile: boolean,
     appState: AppState,
   ) => JSX.Element | null;
+  renderCustomStats?: ExcalidrawProps["renderCustomStats"];
+  renderSidebars: () => JSX.Element | null;
+  device: Device;
 };
 
 export const MobileMenu = ({
   appState,
   elements,
-  libraryMenu,
   actionManager,
   renderJSONExportDialog,
   renderImageExportDialog,
@@ -56,16 +60,17 @@ export const MobileMenu = ({
   canvas,
   isCollaborating,
   renderCustomFooter,
-  viewModeEnabled,
-  showThemeBtn,
   onImageAction,
   renderTopRightUI,
+  renderCustomStats,
+  renderSidebars,
+  device,
 }: MobileMenuProps) => {
   const renderToolbar = () => {
     return (
       <FixedSideContainer side="top" className="App-top-bar">
         <Section heading="shapes">
-          {(heading) => (
+          {(heading: React.ReactNode) => (
             <Stack.Col gap={4} align="center">
               <Stack.Row gap={1} className="App-toolbar-container">
                 <Island padding={1} className="App-toolbar">
@@ -104,11 +109,15 @@ export const MobileMenu = ({
                   penDetected={appState.penDetected}
                 />
               </Stack.Row>
-              {libraryMenu}
             </Stack.Col>
           )}
         </Section>
-        <HintViewer appState={appState} elements={elements} isMobile={true} />
+        <HintViewer
+          appState={appState}
+          elements={elements}
+          isMobile={true}
+          device={device}
+        />
       </FixedSideContainer>
     );
   };
@@ -116,11 +125,10 @@ export const MobileMenu = ({
   const renderAppToolbar = () => {
     // Render eraser conditionally in mobile
     const showEraser =
-      !appState.viewModeEnabled &&
       !appState.editingElement &&
       getSelectedElements(elements, appState).length === 0;
 
-    if (viewModeEnabled) {
+    if (appState.viewModeEnabled) {
       return (
         <div className="App-toolbar-content">
           {actionManager.renderAction("toggleCanvasMenu")}
@@ -135,18 +143,18 @@ export const MobileMenu = ({
 
         {actionManager.renderAction("undo")}
         {actionManager.renderAction("redo")}
-        {showEraser && actionManager.renderAction("eraser")}
+        {showEraser
-
+          ? actionManager.renderAction("eraser")
-        {actionManager.renderAction(
+          : actionManager.renderAction(
-          appState.multiElement ? "finalize" : "duplicateSelection",
+              appState.multiElement ? "finalize" : "duplicateSelection",
-        )}
+            )}
         {actionManager.renderAction("deleteSelectedElements")}
       </div>
     );
   };
 
   const renderCanvasActions = () => {
-    if (viewModeEnabled) {
+    if (appState.viewModeEnabled) {
       return (
         <>
           {renderJSONExportDialog()}
@@ -167,20 +175,25 @@ export const MobileMenu = ({
             onClick={onCollabButtonClick}
           />
         )}
-        {
+        {<BackgroundPickerAndDarkModeToggle actionManager={actionManager} />}
-          <BackgroundPickerAndDarkModeToggle
-            actionManager={actionManager}
-            appState={appState}
-            setAppState={setAppState}
-            showThemeBtn={showThemeBtn}
-          />
-        }
       </>
     );
   };
   return (
     <>
-      {!viewModeEnabled && renderToolbar()}
+      {renderSidebars()}
+      {!appState.viewModeEnabled && renderToolbar()}
+      {!appState.openMenu && appState.showStats && (
+        <Stats
+          appState={appState}
+          setAppState={setAppState}
+          elements={elements}
+          onClose={() => {
+            actionManager.executeAction(actionToggleStats);
+          }}
+          renderCustomStats={renderCustomStats}
+        />
+      )}
       <div
         className="App-bottom-bar"
         style={{
@@ -199,51 +212,43 @@ export const MobileMenu = ({
                   {appState.collaborators.size > 0 && (
                     <fieldset>
                       <legend>{t("labels.collaborators")}</legend>
-                      <UserList mobile>
+                      <UserList
-                        {Array.from(appState.collaborators)
+                        mobile
-                          // Collaborator is either not initialized or is actually the current user.
+                        collaborators={appState.collaborators}
-                          .filter(
+                        actionManager={actionManager}
-                            ([_, client]) => Object.keys(client).length !== 0,
+                      />
-                          )
-                          .map(([clientId, client]) => (
-                            <React.Fragment key={clientId}>
-                              {actionManager.renderAction("goToCollaborator", {
-                                id: clientId,
-                              })}
-                            </React.Fragment>
-                          ))}
-                      </UserList>
                     </fieldset>
                   )}
                 </Stack.Col>
               </div>
             </Section>
           ) : appState.openMenu === "shape" &&
-            !viewModeEnabled &&
+            !appState.viewModeEnabled &&
             showSelectedShapeActions(appState, elements) ? (
             <Section className="App-mobile-menu" heading="selectedShapeActions">
               <SelectedShapeActions
                 appState={appState}
                 elements={elements}
                 renderAction={actionManager.renderAction}
-                activeTool={appState.activeTool.type}
               />
             </Section>
           ) : null}
           <footer className="App-toolbar">
             {renderAppToolbar()}
-            {appState.scrolledOutside && !appState.openMenu && (
+            {appState.scrolledOutside &&
-              <button
+              !appState.openMenu &&
-                className="scroll-back-to-content"
+              appState.openSidebar !== "library" && (
-                onClick={() => {
+                <button
-                  setAppState({
+                  className="scroll-back-to-content"
-                    ...calculateScrollCenter(elements, appState, canvas),
+                  onClick={() => {
-                  });
+                    setAppState({
-                }}
+                      ...calculateScrollCenter(elements, appState, canvas),
-              >
+                    });
-                {t("buttons.scrollBackToContent")}
+                  }}
-              </button>
+                >
-            )}
+                  {t("buttons.scrollBackToContent")}
+                </button>
+              )}
           </footer>
         </Island>
       </div>

src/components/Modal.tsx

@@ -4,11 +4,11 @@ import React, { useState, useLayoutEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 import clsx from "clsx";
 import { KEYS } from "../keys";
-import { useExcalidrawContainer, useDeviceType } from "./App";
+import { useExcalidrawContainer, useDevice } from "./App";
 import { AppState } from "../types";
 import { THEME } from "../constants";
 
-export const Modal = (props: {
+export const Modal: React.FC<{
   className?: string;
   children: React.ReactNode;
   maxWidth?: number;
@@ -16,7 +16,7 @@ export const Modal = (props: {
   labelledBy: string;
   theme?: AppState["theme"];
   closeOnClickOutside?: boolean;
-}) => {
+}> = (props) => {
   const { theme = THEME.LIGHT, closeOnClickOutside = true } = props;
   const modalRoot = useBodyRoot(theme);
 
@@ -59,17 +59,17 @@ export const Modal = (props: {
 const useBodyRoot = (theme: AppState["theme"]) => {
   const [div, setDiv] = useState<HTMLDivElement | null>(null);
 
-  const deviceType = useDeviceType();
+  const device = useDevice();
-  const isMobileRef = useRef(deviceType.isMobile);
+  const isMobileRef = useRef(device.isMobile);
-  isMobileRef.current = deviceType.isMobile;
+  isMobileRef.current = device.isMobile;
 
   const { container: excalidrawContainer } = useExcalidrawContainer();
 
   useLayoutEffect(() => {
     if (div) {
-      div.classList.toggle("excalidraw--mobile", deviceType.isMobile);
+      div.classList.toggle("excalidraw--mobile", device.isMobile);
     }
-  }, [div, deviceType.isMobile]);
+  }, [div, device.isMobile]);
 
   useLayoutEffect(() => {
     const isDarkTheme =