add max shape count

pixelated images initial experiment
2025-12-06 04:24:41 +01:00 · 2021-02-05 10:27:06 -08:00 · 2021-02-04 23:27:35 -08:00
162 changed files with 31538 additions and 22967 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,10 +1,10 @@
 *
-!.env
-!.eslintrc.json
-!.npmrc
-!.prettierrc
-!package.json
 !public/
 !src/
+!.npmrc
+!.eslintrc.json
+!.prettierrc
+!package-lock.json
+!package.json
 !tsconfig.json
-!yarn.lock
+!.env
--- a/.eslintignore
+++ b/.eslintignore
@@ -4,4 +4,3 @@ package-lock.json
 .vscode/
 firebase/
 dist/
-public/workbox
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,6 +1,40 @@
 {
-  "extends": ["@excalidraw/eslint-config", "react-app"],
+  "extends": ["prettier", "react-app"],
+  "plugins": ["prettier"],
  "rules": {
-    "import/no-anonymous-default-export": "off"
+    "curly": "warn",
+    "dot-notation": "warn",
+    "import/no-anonymous-default-export": "off",
+    "no-console": [
+      "warn",
+      {
+        "allow": ["warn", "error", "info"]
+      }
+    ],
+    "no-else-return": "warn",
+    "no-lonely-if": "warn",
+    "no-restricted-syntax": [
+      "warn",
+      {
+        "message": "Use 't(...)' instead of literal text in JSX",
+        "selector": "JSXText[value=/\\w/]"
+      }
+    ],
+    "no-unneeded-ternary": "warn",
+    "no-unused-expressions": "warn",
+    "no-unused-vars": "warn",
+    "no-useless-return": "warn",
+    "no-var": "warn",
+    "object-shorthand": "warn",
+    "one-var": ["warn", "never"],
+    "prefer-arrow-callback": "warn",
+    "prefer-const": [
+      "warn",
+      {
+        "destructuring": "all"
+      }
+    ],
+    "prefer-template": "warn",
+    "prettier/prettier": "warn"
  }
 }
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -1,33 +1,36 @@
 version: 2
 updates:
  - package-ecosystem: npm
-    directory: /
+    directory: "/"
    schedule:
      interval: weekly
      day: sunday
      time: "01:00"
+    open-pull-requests-limit: 99
    reviewers:
      - lipis
    assignees:
      - lipis

  - package-ecosystem: npm
-    directory: /src/packages/excalidraw/
+    directory: "/src/packages/excalidraw/"
    schedule:
      interval: weekly
      day: sunday
      time: "01:00"
+    open-pull-requests-limit: 99
    reviewers:
      - ad1992
    assignees:
      - ad1992

  - package-ecosystem: npm
-    directory: /src/packages/utils/
+    directory: "/src/packages/utils/"
    schedule:
      interval: weekly
      day: sunday
      time: "01:00"
+    open-pull-requests-limit: 99
    reviewers:
      - ad1992
    assignees:
--- a/.github/workflows/build-docker.yml
+++ b/.github/workflows/build-docker.yml
@@ -6,8 +6,9 @@ on:
      - master

 jobs:
-  build-docker:
+  build:
    runs-on: ubuntu-latest
+
    steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v1
      - run: docker build -t excalidraw .
--- a/.github/workflows/build-packages.yml
+++ b/.github/workflows/build-packages.yml
@@ -7,23 +7,27 @@ on:
  pull_request:

 jobs:
-  packages:
+  build:
    runs-on: ubuntu-latest

    steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v1
+
      - name: Setup Node.js 14.x
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v1
        with:
          node-version: 14.x
+
      - name: Install dependencies
        run: |
-          yarn --frozen-lockfile
-          yarn --cwd src/packages/excalidraw
-          yarn --cwd src/packages/utils
+          npm ci
+          npm ci --prefix src/packages/excalidraw
+          npm ci --prefix src/packages/utils
+
      - name: Build @excalidraw/excalidraw
        run: |
-          yarn --cwd src/packages/excalidraw run pack
+          npm run pack --prefix src/packages/excalidraw
+
      - name: Build @excalidraw/utils
        run: |
-          yarn --cwd src/packages/utils run pack
+          npm run pack --prefix src/packages/utils
--- a/.github/workflows/cancel.yml
+++ b/.github/workflows/cancel.yml
@@ -9,6 +9,7 @@ on:
 jobs:
  cancel:
    runs-on: ubuntu-latest
+
    timeout-minutes: 3
    steps:
      - uses: styfle/cancel-workflow-action@0.6.0
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -7,16 +7,16 @@ jobs:
    runs-on: ubuntu-latest

    steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v1

      - name: Setup Node.js 14.x
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v1
        with:
          node-version: 14.x

      - name: Install and lint
        run: |
-          yarn --frozen-lockfile
-          yarn test:other
-          yarn test:code
-          yarn test:typecheck
+          npm ci
+          npm run test:other
+          npm run test:code
+          npm run test:typecheck
--- a/.github/workflows/locales-coverage.yml
+++ b/.github/workflows/locales-coverage.yml
@@ -3,7 +3,7 @@ name: Build locales coverage
 on:
  push:
    branches:
-      - l10n_master
+      - "l10n_master"

 jobs:
  locales:
@@ -15,13 +15,13 @@ jobs:
          token: ${{ secrets.PUSH_TRANSLATIONS_COVERAGE_PAT }}

      - name: Setup Node.js 14.x
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v1
        with:
          node-version: 14.x

      - name: Create report file
        run: |
-          yarn locales-coverage
+          npm run locales-coverage
          FILE_CHANGED=$(git diff src/locales/percentages.json)
          if [ ! -z "${FILE_CHANGED}" ]; then
            git config --global user.name 'Excalidraw Bot'
--- a/.github/workflows/semantic-pr-title.yml
+++ b/.github/workflows/semantic-pr-title.yml
@@ -1,4 +1,4 @@
-name: Semantic PR title
+name: "Semantic PR title"

 on:
  pull_request_target:
@@ -8,8 +8,9 @@ on:
      - synchronize

 jobs:
-  semantic:
+  main:
    runs-on: ubuntu-latest
+
    steps:
      - uses: amannn/action-semantic-pull-request@v3.0.0
        env:
--- a/.github/workflows/sentry-production.yml
+++ b/.github/workflows/sentry-production.yml
@@ -1,4 +1,4 @@
-name: New Sentry production release
+name: New Sentry Production Release

 on:
  push:
@@ -6,23 +6,28 @@ on:
      - master

 jobs:
-  sentry:
+  release:
    runs-on: ubuntu-latest
+
    steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v1.0.0
+
      - name: Setup Node.js 14.x
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v1
        with:
          node-version: 14.x
+
      - name: Install and build
        run: |
-          yarn --frozen-lockfile
-          yarn build:app
+          npm ci
+          npm run build:app
        env:
          CI: true
+
      - name: Install Sentry
        run: |
          curl -sL https://sentry.io/get-cli/ | bash
+
      - name: Create new Sentry release
        run: |
          export SENTRY_RELEASE=$(sentry-cli releases propose-version)
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -5,13 +5,16 @@ on: pull_request
 jobs:
  test:
    runs-on: ubuntu-latest
+
    steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v1
+
      - name: Setup Node.js 14.x
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v1
        with:
          node-version: 14.x
+
      - name: Install and test
        run: |
-          yarn --frozen-lockfile
-          yarn test:app
+          npm ci
+          npm run test:app
--- a/.gitignore
+++ b/.gitignore
@@ -16,7 +16,7 @@ firebase
 logs
 node_modules
 npm-debug.log*
-package-lock.json
 static
 yarn-debug.log*
 yarn-error.log*
+yarn.lock
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-14
+12
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "proseWrap": "never",
+  "trailingComma": "all"
+}
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -19,7 +19,7 @@
 ### Option 2 - CodeSandbox

 1. Go to https://codesandbox.io/s/github/excalidraw/excalidraw
-1. Connect your GitHub account
+1. Connect your Github account
 1. Go to Git tab on left side
 1. Tap on `Fork Sandbox`
 1. Write your code
@@ -35,6 +35,7 @@ Make sure the title starts with a semantic prefix:

 - **feat**: A new feature
 - **fix**: A bug fix
+- **improvement**: An improvement to a current feature
 - **docs**: Documentation only changes
 - **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
 - **refactor**: A code change that neither fixes a bug nor adds a feature
--- a/6
+++ b/6
@@ -2,13 +2,13 @@ FROM node:14-alpine AS build

 WORKDIR /opt/node_app

-COPY package.json yarn.lock ./
-RUN yarn --ignore-optional
+COPY package.json package-lock.json ./
+RUN npm i --no-optional

 ARG NODE_ENV=production

 COPY . .
-RUN yarn build:app:docker
+RUN npm run build:app:docker

 FROM nginx:1.17-alpine

--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
  <a href="https://excalidraw.com">
    <img width="540" src="./public/og-image-sm.png" alt="Excalidraw logo: Sketch handrawn like diagrams." />
  </a>
-  <h3>Virtual whiteboard for sketching hand-drawn like diagrams.<br>Collaborative and end-to-end encrypted.</h3>
+  <h3>Virtual whiteboard for sketching hand-drawn like diagrams.<br>Collaborative and end to end encrypted.</h3>
  <p>
    <a href="https://twitter.com/Excalidraw">
      <img alt="Follow Excalidraw on Twitter" src="https://img.shields.io/twitter/follow/excalidraw.svg?label=follow+excalidraw&style=social&logo=twitter">
@@ -11,7 +11,6 @@
      <img src="https://badges.crowdin.net/excalidraw/localized.svg">
    </a>
  </p>
-  <p>Ask questions or hang out on our <a target="_blank" href="https://discord.gg/UexuTaE">discord.gg/UexuTaE</a>.</p>
 </div>

 ## Try it now
@@ -20,14 +19,6 @@ Go to [excalidraw.com](https://excalidraw.com) to start sketching.

 Read the latest news and updates on our [blog](https://blog.excalidraw.com). A good start is to see all the updates of [One Year of Excalidraw](https://blog.excalidraw.com/one-year-of-excalidraw/).

-## Supporting Excalidraw
-
-If you like the project, you can become a sponsor at [Open Collective](https://opencollective.com/excalidraw).
-
-[<img src="https://opencollective.com/excalidraw/tiers/sponsors/0/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/0/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/1/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/1/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/2/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/2/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/3/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/3/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/4/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/4/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/5/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/5/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/6/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/6/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/7/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/7/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/8/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/8/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/9/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/9/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/10/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/10/website)
-
-<a href="https://opencollective.com/excalidraw#category-CONTRIBUTE" target="_blank"><img src="https://opencollective.com/excalidraw/tiers/backers.svg?avatarHeight=32"/></a>
-
 ## Documentation

 ### Shortcuts
@@ -50,7 +41,7 @@ Translations will be available on the app if they exceed a certain threshold of

 ### Create a collaboration session manually

-In order to create a session manually, you just need to generate a link of this form:
+In order to create a session manually you just need to generate a link of this form:

 ```
 https://excalidraw.com/#room=[0-9a-f]{20},[a-zA-Z0-9_-]{22}
@@ -70,28 +61,18 @@ The second set of digits is the encryption key. The Excalidraw server doesn’t

 Find a growing list of libraries containing assets for your drawings at [libraries.excalidraw.com](https://libraries.excalidraw.com).

-## Embedding Excalidraw in your App?
-
-Try out [`@excalidraw/excalidraw`](https://www.npmjs.com/package/@excalidraw/excalidraw). This package allows you to easily embed Excalidraw as a React component into your apps.
-
-## Development
+## Developement

 ### Code Sandbox

 - Go to https://codesandbox.io/s/github/excalidraw/excalidraw
-  - You may need to sign in with GitHub and reload the page
+  - You may need to sign in with Github and reload the page
 - You can start coding instantly, and even send PRs from there!

 ### Local Installation

 These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

-#### Requirements
-
- [Node.js](https://nodejs.org/en/)
- [Yarn](https://yarnpkg.com/getting-started/install)
- [Git](https://git-scm.com/downloads)
-
 #### Clone the repo

 ```bash
@@ -100,26 +81,26 @@ git clone https://github.com/excalidraw/excalidraw.git

 #### Commands

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

 #### Docker Compose

-You can use docker-compose to work on Excalidraw locally if you don't want to setup a Node.js env.
+You can use docker-compose to work on excalidraw locally if you don't want to setup a Node.js env.

 ```sh
 docker-compose up --build -d
 ```

-### Self-hosting
+### Self hosting

-We publish a Docker image with the Excalidraw client at [excalidraw/excalidraw](https://hub.docker.com/r/excalidraw/excalidraw). You can use it to self-host your own client under your own domain, on Kubernetes, AWS ECS, etc.
+We publish a Docker image with the Excalidraw client at [excalidraw/excalidraw](https://hub.docker.com/r/excalidraw/excalidraw). You can use it to self host your own client under your own domain, on Kubernetes, AWS ECS, etc.

 ```sh
 docker build -t excalidraw/excalidraw .
@@ -130,7 +111,7 @@ The Docker image is free of analytics and other tracking libraries.

 **At the moment, self-hosting your own instance doesn't support sharing or collaboration features.**

-We are working towards providing a full-fledged solution for self-hosting your own Excalidraw.
+We are working towards providing a full-fledged solution for self hosting your own Excalidraw.

 ## Contributing

--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -18,7 +18,7 @@ services:
    volumes:
      - ./:/opt/node_app/app:delegated
      - ./package.json:/opt/node_app/package.json
-      - ./yarn.lock:/opt/node_app/yarn.lock
+      - ./package-lock.json:/opt/node_app/package-lock.json
      - notused:/opt/node_app/app/node_modules

 volumes:
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -19,20 +19,21 @@
    ]
  },
  "dependencies": {
-    "@sentry/browser": "6.2.1",
-    "@sentry/integrations": "6.2.1",
+    "@sentry/browser": "6.0.3",
+    "@sentry/integrations": "6.0.3",
    "@testing-library/jest-dom": "5.11.9",
-    "@testing-library/react": "11.2.5",
+    "@testing-library/react": "11.2.3",
    "@types/jest": "26.0.20",
-    "@types/react": "17.0.2",
-    "@types/react-dom": "17.0.1",
+    "@types/react": "17.0.0",
+    "@types/react-dom": "17.0.0",
    "@types/socket.io-client": "1.4.35",
-    "browser-fs-access": "0.14.1",
+    "browser-fs-access": "0.13.0",
    "clsx": "1.1.1",
-    "firebase": "8.2.10",
+    "firebase": "8.2.5",
    "i18next-browser-languagedetector": "6.0.1",
    "lodash.throttle": "4.1.1",
    "nanoid": "3.1.20",
+    "node-sass": "4.14.1",
    "open-color": "1.8.0",
    "pako": "1.0.11",
    "png-chunk-text": "1.0.0",
@@ -42,30 +43,26 @@
    "pwacompat": "2.0.17",
    "react": "17.0.1",
    "react-dom": "17.0.1",
-    "react-scripts": "4.0.3",
+    "react-scripts": "4.0.1",
    "roughjs": "4.3.1",
-    "sass": "1.32.8",
    "socket.io-client": "2.3.1",
-    "typescript": "4.2.3"
+    "typescript": "4.1.3"
  },
  "devDependencies": {
-    "@excalidraw/eslint-config": "1.0.0",
-    "@excalidraw/prettier-config": "1.0.2",
    "@types/lodash.throttle": "4.1.6",
    "@types/pako": "1.0.1",
-    "@types/resize-observer-browser": "0.1.5",
-    "eslint-config-prettier": "8.1.0",
+    "eslint-config-prettier": "7.2.0",
    "eslint-plugin-prettier": "3.3.1",
-    "firebase-tools": "9.5.0",
+    "firebase-tools": "9.2.2",
    "husky": "4.3.8",
-    "jest-canvas-mock": "2.3.1",
-    "lint-staged": "10.5.4",
+    "jest-canvas-mock": "2.3.0",
+    "lint-staged": "10.5.3",
    "pepjs": "0.5.3",
    "prettier": "2.2.1",
    "rewire": "5.0.0"
  },
  "engines": {
-    "node": ">=14.0.0"
+    "node": ">=12.0.0"
  },
  "homepage": ".",
  "husky": {
@@ -80,29 +77,28 @@
    "resetMocks": false
  },
  "name": "excalidraw",
-  "prettier": "@excalidraw/prettier-config",
  "private": true,
  "scripts": {
    "build-node": "node ./scripts/build-node.js",
    "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": "npm run build:app && npm run build:version",
    "eject": "react-scripts eject",
-    "fix:code": "yarn test:code --fix",
-    "fix:other": "yarn prettier --write",
-    "fix": "yarn fix:other && yarn fix:code",
+    "fix:code": "npm run test:code -- --fix",
+    "fix:other": "npm run prettier -- --write",
+    "fix": "npm run fix:other && npm run fix:code",
    "locales-coverage": "node scripts/build-locales-coverage.js",
    "locales-coverage:description": "node scripts/locales-coverage-description.js",
    "prettier": "prettier \"**/*.{css,scss,json,md,html,yml}\" --ignore-path=.eslintignore",
    "start": "react-scripts start",
-    "test:all": "yarn test:typecheck && yarn test:code && yarn test:other && yarn test:app --watchAll=false",
+    "test:all": "npm run test:typecheck && npm run test:code && npm run test:other && npm run test:app -- --watchAll=false",
    "test:app": "react-scripts test --passWithNoTests",
-    "test:code": "eslint --max-warnings=0 --ext .js,.ts,.tsx .",
+    "test:code": "eslint --max-warnings=0 --ignore-path .gitignore --ext .js,.ts,.tsx .",
    "test:debug": "react-scripts --inspect-brk test --runInBand --no-cache",
-    "test:other": "yarn prettier --list-different",
+    "test:other": "npm run prettier -- --list-different",
    "test:typecheck": "tsc",
-    "test:update": "yarn test:app --updateSnapshot --watchAll=false",
-    "test": "yarn test:app"
+    "test:update": "npm run test:app -- --updateSnapshot --watchAll=false",
+    "test": "npm run test:app"
  }
 }
--- a/public/FG_Virgil.otf
+++ b/public/FG_Virgil.otf
--- a/public/Virgil.woff2
+++ b/public/Virgil.woff2
--- a/public/fonts.css
+++ b/public/fonts.css
@@ -1,7 +1,7 @@
 /* http://www.eaglefonts.com/fg-virgil-ttf-131249.htm */
@font-face {
  font-family: "Virgil";
-  src: url("Virgil.woff2");
+  src: url("FG_Virgil.woff2");
  font-display: swap;
 }

--- a/public/index.html
+++ b/public/index.html
@@ -60,7 +60,7 @@

    <link
      rel="preload"
-      href="Virgil.woff2"
+      href="FG_Virgil.woff2"
      as="font"
      type="font/woff2"
      crossorigin="anonymous"
@@ -86,9 +86,7 @@
    />

    <link rel="stylesheet" href="fonts.css" type="text/css" />
-    <script>
-      window.EXCALIDRAW_ASSET_PATH = "/";
-    </script>
+
    <% if (process.env.REACT_APP_GOOGLE_ANALYTICS_ID) { %>
    <script
      async
--- a/public/workbox/workbox-background-sync.prod.js
+++ b/public/workbox/workbox-background-sync.prod.js
@@ -1,2 +0,0 @@
-this.workbox=this.workbox||{},this.workbox.backgroundSync=function(t,e,s){"use strict";try{self["workbox:background-sync:4.3.1"]&&_()}catch(t){}const i=3,n="workbox-background-sync",a="requests",r="queueName";class c{constructor(t){this.t=t,this.s=new s.DBWrapper(n,i,{onupgradeneeded:this.i})}async pushEntry(t){delete t.id,t.queueName=this.t,await this.s.add(a,t)}async unshiftEntry(t){const[e]=await this.s.getAllMatching(a,{count:1});e?t.id=e.id-1:delete t.id,t.queueName=this.t,await this.s.add(a,t)}async popEntry(){return this.h({direction:"prev"})}async shiftEntry(){return this.h({direction:"next"})}async getAll(){return await this.s.getAllMatching(a,{index:r,query:IDBKeyRange.only(this.t)})}async deleteEntry(t){await this.s.delete(a,t)}async h({direction:t}){const[e]=await this.s.getAllMatching(a,{direction:t,index:r,query:IDBKeyRange.only(this.t),count:1});if(e)return await this.deleteEntry(e.id),e}i(t){const e=t.target.result;t.oldVersion>0&&t.oldVersion<i&&e.objectStoreNames.contains(a)&&e.deleteObjectStore(a),e.createObjectStore(a,{autoIncrement:!0,keyPath:"id"}).createIndex(r,r,{unique:!1})}}const h=["method","referrer","referrerPolicy","mode","credentials","cache","redirect","integrity","keepalive"];class o{static async fromRequest(t){const e={url:t.url,headers:{}};"GET"!==t.method&&(e.body=await t.clone().arrayBuffer());for(const[s,i]of t.headers.entries())e.headers[s]=i;for(const s of h)void 0!==t[s]&&(e[s]=t[s]);return new o(e)}constructor(t){"navigate"===t.mode&&(t.mode="same-origin"),this.o=t}toObject(){const t=Object.assign({},this.o);return t.headers=Object.assign({},this.o.headers),t.body&&(t.body=t.body.slice(0)),t}toRequest(){return new Request(this.o.url,this.o)}clone(){return new o(this.toObject())}}const u="workbox-background-sync",y=10080,w=new Set;class d{constructor(t,{onSync:s,maxRetentionTime:i}={}){if(w.has(t))throw new e.WorkboxError("duplicate-queue-name",{name:t});w.add(t),this.u=t,this.l=s||this.replayRequests,this.q=i||y,this.m=new c(this.u),this.p()}get name(){return this.u}async pushRequest(t){await this.g(t,"push")}async unshiftRequest(t){await this.g(t,"unshift")}async popRequest(){return this.R("pop")}async shiftRequest(){return this.R("shift")}async getAll(){const t=await this.m.getAll(),e=Date.now(),s=[];for(const i of t){const t=60*this.q*1e3;e-i.timestamp>t?await this.m.deleteEntry(i.id):s.push(f(i))}return s}async g({request:t,metadata:e,timestamp:s=Date.now()},i){const n={requestData:(await o.fromRequest(t.clone())).toObject(),timestamp:s};e&&(n.metadata=e),await this.m[`${i}Entry`](n),this.k?this.D=!0:await this.registerSync()}async R(t){const e=Date.now(),s=await this.m[`${t}Entry`]();if(s){const i=60*this.q*1e3;return e-s.timestamp>i?this.R(t):f(s)}}async replayRequests(){let t;for(;t=await this.shiftRequest();)try{await fetch(t.request.clone())}catch(s){throw await this.unshiftRequest(t),new e.WorkboxError("queue-replay-failed",{name:this.u})}}async registerSync(){if("sync"in registration)try{await registration.sync.register(`${u}:${this.u}`)}catch(t){}}p(){"sync"in registration?self.addEventListener("sync",t=>{if(t.tag===`${u}:${this.u}`){const e=async()=>{let e;this.k=!0;try{await this.l({queue:this})}catch(t){throw e=t}finally{!this.D||e&&!t.lastChance||await this.registerSync(),this.k=!1,this.D=!1}};t.waitUntil(e())}}):this.l({queue:this})}static get _(){return w}}const f=t=>{const e={request:new o(t.requestData).toRequest(),timestamp:t.timestamp};return t.metadata&&(e.metadata=t.metadata),e};return t.Queue=d,t.Plugin=class{constructor(...t){this.v=new d(...t),this.fetchDidFail=this.fetchDidFail.bind(this)}async fetchDidFail({request:t}){await this.v.pushRequest({request:t})}},t}({},workbox.core._private,workbox.core._private);
-//# sourceMappingURL=workbox-background-sync.prod.js.map
--- a/public/workbox/workbox-broadcast-update.prod.js
+++ b/public/workbox/workbox-broadcast-update.prod.js
@@ -1,2 +0,0 @@
-this.workbox=this.workbox||{},this.workbox.broadcastUpdate=function(e,t){"use strict";try{self["workbox:broadcast-update:4.3.1"]&&_()}catch(e){}const s=(e,t,s)=>{return!s.some(s=>e.headers.has(s)&&t.headers.has(s))||s.every(s=>{const n=e.headers.has(s)===t.headers.has(s),a=e.headers.get(s)===t.headers.get(s);return n&&a})},n="workbox",a=1e4,i=["content-length","etag","last-modified"],o=async({channel:e,cacheName:t,url:s})=>{const n={type:"CACHE_UPDATED",meta:"workbox-broadcast-update",payload:{cacheName:t,updatedURL:s}};if(e)e.postMessage(n);else{const e=await clients.matchAll({type:"window"});for(const t of e)t.postMessage(n)}};class c{constructor({headersToCheck:e,channelName:t,deferNoticationTimeout:s}={}){this.t=e||i,this.s=t||n,this.i=s||a,this.o()}notifyIfUpdated({oldResponse:e,newResponse:t,url:n,cacheName:a,event:i}){if(!s(e,t,this.t)){const e=(async()=>{i&&i.request&&"navigate"===i.request.mode&&await this.h(i),await this.l({channel:this.u(),cacheName:a,url:n})})();if(i)try{i.waitUntil(e)}catch(e){}return e}}async l(e){await o(e)}u(){return"BroadcastChannel"in self&&!this.p&&(this.p=new BroadcastChannel(this.s)),this.p}h(e){if(!this.m.has(e)){const s=new t.Deferred;this.m.set(e,s);const n=setTimeout(()=>{s.resolve()},this.i);s.promise.then(()=>clearTimeout(n))}return this.m.get(e).promise}o(){this.m=new Map,self.addEventListener("message",e=>{if("WINDOW_READY"===e.data.type&&"workbox-window"===e.data.meta&&this.m.size>0){for(const e of this.m.values())e.resolve();this.m.clear()}})}}return e.BroadcastCacheUpdate=c,e.Plugin=class{constructor(e){this.l=new c(e)}cacheDidUpdate({cacheName:e,oldResponse:t,newResponse:s,request:n,event:a}){t&&this.l.notifyIfUpdated({cacheName:e,oldResponse:t,newResponse:s,event:a,url:n.url})}},e.broadcastUpdate=o,e.responsesAreSame=s,e}({},workbox.core._private);
-//# sourceMappingURL=workbox-broadcast-update.prod.js.map
--- a/public/workbox/workbox-cacheable-response.prod.js
+++ b/public/workbox/workbox-cacheable-response.prod.js
@@ -1,2 +0,0 @@
-this.workbox=this.workbox||{},this.workbox.cacheableResponse=function(t){"use strict";try{self["workbox:cacheable-response:4.3.1"]&&_()}catch(t){}class s{constructor(t={}){this.t=t.statuses,this.s=t.headers}isResponseCacheable(t){let s=!0;return this.t&&(s=this.t.includes(t.status)),this.s&&s&&(s=Object.keys(this.s).some(s=>t.headers.get(s)===this.s[s])),s}}return t.CacheableResponse=s,t.Plugin=class{constructor(t){this.i=new s(t)}cacheWillUpdate({response:t}){return this.i.isResponseCacheable(t)?t:null}},t}({});
-//# sourceMappingURL=workbox-cacheable-response.prod.js.map
--- a/public/workbox/workbox-core.prod.js
+++ b/public/workbox/workbox-core.prod.js
--- a/public/workbox/workbox-expiration.prod.js
+++ b/public/workbox/workbox-expiration.prod.js
@@ -1,2 +0,0 @@
-this.workbox=this.workbox||{},this.workbox.expiration=function(t,e,s,i,a,n){"use strict";try{self["workbox:expiration:4.3.1"]&&_()}catch(t){}const h="workbox-expiration",c="cache-entries",r=t=>{const e=new URL(t,location);return e.hash="",e.href};class o{constructor(t){this.t=t,this.s=new e.DBWrapper(h,1,{onupgradeneeded:t=>this.i(t)})}i(t){const e=t.target.result.createObjectStore(c,{keyPath:"id"});e.createIndex("cacheName","cacheName",{unique:!1}),e.createIndex("timestamp","timestamp",{unique:!1}),s.deleteDatabase(this.t)}async setTimestamp(t,e){t=r(t),await this.s.put(c,{url:t,timestamp:e,cacheName:this.t,id:this.h(t)})}async getTimestamp(t){return(await this.s.get(c,this.h(t))).timestamp}async expireEntries(t,e){const s=await this.s.transaction(c,"readwrite",(s,i)=>{const a=s.objectStore(c),n=[];let h=0;a.index("timestamp").openCursor(null,"prev").onsuccess=(({target:s})=>{const a=s.result;if(a){const s=a.value;s.cacheName===this.t&&(t&&s.timestamp<t||e&&h>=e?n.push(a.value):h++),a.continue()}else i(n)})}),i=[];for(const t of s)await this.s.delete(c,t.id),i.push(t.url);return i}h(t){return this.t+"|"+r(t)}}class u{constructor(t,e={}){this.o=!1,this.u=!1,this.l=e.maxEntries,this.p=e.maxAgeSeconds,this.t=t,this.m=new o(t)}async expireEntries(){if(this.o)return void(this.u=!0);this.o=!0;const t=this.p?Date.now()-1e3*this.p:void 0,e=await this.m.expireEntries(t,this.l),s=await caches.open(this.t);for(const t of e)await s.delete(t);this.o=!1,this.u&&(this.u=!1,this.expireEntries())}async updateTimestamp(t){await this.m.setTimestamp(t,Date.now())}async isURLExpired(t){return await this.m.getTimestamp(t)<Date.now()-1e3*this.p}async delete(){this.u=!1,await this.m.expireEntries(1/0)}}return t.CacheExpiration=u,t.Plugin=class{constructor(t={}){this.D=t,this.p=t.maxAgeSeconds,this.g=new Map,t.purgeOnQuotaError&&n.registerQuotaErrorCallback(()=>this.deleteCacheAndMetadata())}k(t){if(t===a.cacheNames.getRuntimeName())throw new i.WorkboxError("expire-custom-caches-only");let e=this.g.get(t);return e||(e=new u(t,this.D),this.g.set(t,e)),e}cachedResponseWillBeUsed({event:t,request:e,cacheName:s,cachedResponse:i}){if(!i)return null;let a=this.N(i);const n=this.k(s);n.expireEntries();const h=n.updateTimestamp(e.url);if(t)try{t.waitUntil(h)}catch(t){}return a?i:null}N(t){if(!this.p)return!0;const e=this._(t);return null===e||e>=Date.now()-1e3*this.p}_(t){if(!t.headers.has("date"))return null;const e=t.headers.get("date"),s=new Date(e).getTime();return isNaN(s)?null:s}async cacheDidUpdate({cacheName:t,request:e}){const s=this.k(t);await s.updateTimestamp(e.url),await s.expireEntries()}async deleteCacheAndMetadata(){for(const[t,e]of this.g)await caches.delete(t),await e.delete();this.g=new Map}},t}({},workbox.core._private,workbox.core._private,workbox.core._private,workbox.core._private,workbox.core);
-//# sourceMappingURL=workbox-expiration.prod.js.map
--- a/public/workbox/workbox-navigation-preload.prod.js
+++ b/public/workbox/workbox-navigation-preload.prod.js
@@ -1,2 +0,0 @@
-this.workbox=this.workbox||{},this.workbox.navigationPreload=function(t){"use strict";try{self["workbox:navigation-preload:4.3.1"]&&_()}catch(t){}function e(){return Boolean(self.registration&&self.registration.navigationPreload)}return t.disable=function(){e()&&self.addEventListener("activate",t=>{t.waitUntil(self.registration.navigationPreload.disable().then(()=>{}))})},t.enable=function(t){e()&&self.addEventListener("activate",e=>{e.waitUntil(self.registration.navigationPreload.enable().then(()=>{t&&self.registration.navigationPreload.setHeaderValue(t)}))})},t.isSupported=e,t}({});
-//# sourceMappingURL=workbox-navigation-preload.prod.js.map
--- a/public/workbox/workbox-offline-ga.prod.js
+++ b/public/workbox/workbox-offline-ga.prod.js
@@ -1,2 +0,0 @@
-this.workbox=this.workbox||{},this.workbox.googleAnalytics=function(e,t,o,n,a,c,w){"use strict";try{self["workbox:google-analytics:4.3.1"]&&_()}catch(e){}const r=/^\/(\w+\/)?collect/,s=e=>async({queue:t})=>{let o;for(;o=await t.shiftRequest();){const{request:n,timestamp:a}=o,c=new URL(n.url);try{const w="POST"===n.method?new URLSearchParams(await n.clone().text()):c.searchParams,r=a-(Number(w.get("qt"))||0),s=Date.now()-r;if(w.set("qt",s),e.parameterOverrides)for(const t of Object.keys(e.parameterOverrides)){const o=e.parameterOverrides[t];w.set(t,o)}"function"==typeof e.hitFilter&&e.hitFilter.call(null,w),await fetch(new Request(c.origin+c.pathname,{body:w.toString(),method:"POST",mode:"cors",credentials:"omit",headers:{"Content-Type":"text/plain"}}))}catch(e){throw await t.unshiftRequest(o),e}}},i=e=>{const t=({url:e})=>"www.google-analytics.com"===e.hostname&&r.test(e.pathname),o=new w.NetworkOnly({plugins:[e]});return[new n.Route(t,o,"GET"),new n.Route(t,o,"POST")]},l=e=>{const t=new c.NetworkFirst({cacheName:e});return new n.Route(({url:e})=>"www.google-analytics.com"===e.hostname&&"/analytics.js"===e.pathname,t,"GET")},m=e=>{const t=new c.NetworkFirst({cacheName:e});return new n.Route(({url:e})=>"www.googletagmanager.com"===e.hostname&&"/gtag/js"===e.pathname,t,"GET")},u=e=>{const t=new c.NetworkFirst({cacheName:e});return new n.Route(({url:e})=>"www.googletagmanager.com"===e.hostname&&"/gtm.js"===e.pathname,t,"GET")};return e.initialize=((e={})=>{const n=o.cacheNames.getGoogleAnalyticsName(e.cacheName),c=new t.Plugin("workbox-google-analytics",{maxRetentionTime:2880,onSync:s(e)}),w=[u(n),l(n),m(n),...i(c)],r=new a.Router;for(const e of w)r.registerRoute(e);r.addFetchListener()}),e}({},workbox.backgroundSync,workbox.core._private,workbox.routing,workbox.routing,workbox.strategies,workbox.strategies);
-//# sourceMappingURL=workbox-offline-ga.prod.js.map
--- a/public/workbox/workbox-precaching.prod.js
+++ b/public/workbox/workbox-precaching.prod.js
@@ -1,2 +0,0 @@
-this.workbox=this.workbox||{},this.workbox.precaching=function(t,e,n,s,c){"use strict";try{self["workbox:precaching:4.3.1"]&&_()}catch(t){}const o=[],i={get:()=>o,add(t){o.push(...t)}};const a="__WB_REVISION__";function r(t){if(!t)throw new c.WorkboxError("add-to-cache-list-unexpected-type",{entry:t});if("string"==typeof t){const e=new URL(t,location);return{cacheKey:e.href,url:e.href}}const{revision:e,url:n}=t;if(!n)throw new c.WorkboxError("add-to-cache-list-unexpected-type",{entry:t});if(!e){const t=new URL(n,location);return{cacheKey:t.href,url:t.href}}const s=new URL(n,location),o=new URL(n,location);return o.searchParams.set(a,e),{cacheKey:o.href,url:s.href}}class l{constructor(t){this.t=e.cacheNames.getPrecacheName(t),this.s=new Map}addToCacheList(t){for(const e of t){const{cacheKey:t,url:n}=r(e);if(this.s.has(n)&&this.s.get(n)!==t)throw new c.WorkboxError("add-to-cache-list-conflicting-entries",{firstEntry:this.s.get(n),secondEntry:t});this.s.set(n,t)}}async install({event:t,plugins:e}={}){const n=[],s=[],c=await caches.open(this.t),o=await c.keys(),i=new Set(o.map(t=>t.url));for(const t of this.s.values())i.has(t)?s.push(t):n.push(t);const a=n.map(n=>this.o({event:t,plugins:e,url:n}));return await Promise.all(a),{updatedURLs:n,notUpdatedURLs:s}}async activate(){const t=await caches.open(this.t),e=await t.keys(),n=new Set(this.s.values()),s=[];for(const c of e)n.has(c.url)||(await t.delete(c),s.push(c.url));return{deletedURLs:s}}async o({url:t,event:e,plugins:o}){const i=new Request(t,{credentials:"same-origin"});let a,r=await s.fetchWrapper.fetch({event:e,plugins:o,request:i});for(const t of o||[])"cacheWillUpdate"in t&&(a=t.cacheWillUpdate.bind(t));if(!(a?a({event:e,request:i,response:r}):r.status<400))throw new c.WorkboxError("bad-precaching-response",{url:t,status:r.status});r.redirected&&(r=await async function(t){const e=t.clone(),n="body"in e?Promise.resolve(e.body):e.blob(),s=await n;return new Response(s,{headers:e.headers,status:e.status,statusText:e.statusText})}(r)),await n.cacheWrapper.put({event:e,plugins:o,request:i,response:r,cacheName:this.t,matchOptions:{ignoreSearch:!0}})}getURLsToCacheKeys(){return this.s}getCachedURLs(){return[...this.s.keys()]}getCacheKeyForURL(t){const e=new URL(t,location);return this.s.get(e.href)}}let u;const h=()=>(u||(u=new l),u);const d=(t,e)=>{const n=h().getURLsToCacheKeys();for(const s of function*(t,{ignoreURLParametersMatching:e,directoryIndex:n,cleanURLs:s,urlManipulation:c}={}){const o=new URL(t,location);o.hash="",yield o.href;const i=function(t,e){for(const n of[...t.searchParams.keys()])e.some(t=>t.test(n))&&t.searchParams.delete(n);return t}(o,e);if(yield i.href,n&&i.pathname.endsWith("/")){const t=new URL(i);t.pathname+=n,yield t.href}if(s){const t=new URL(i);t.pathname+=".html",yield t.href}if(c){const t=c({url:o});for(const e of t)yield e.href}}(t,e)){const t=n.get(s);if(t)return t}};let w=!1;const f=t=>{w||((({ignoreURLParametersMatching:t=[/^utm_/],directoryIndex:n="index.html",cleanURLs:s=!0,urlManipulation:c=null}={})=>{const o=e.cacheNames.getPrecacheName();addEventListener("fetch",e=>{const i=d(e.request.url,{cleanURLs:s,directoryIndex:n,ignoreURLParametersMatching:t,urlManipulation:c});if(!i)return;let a=caches.open(o).then(t=>t.match(i)).then(t=>t||fetch(i));e.respondWith(a)})})(t),w=!0)},y=t=>{const e=h(),n=i.get();t.waitUntil(e.install({event:t,plugins:n}).catch(t=>{throw t}))},p=t=>{const e=h(),n=i.get();t.waitUntil(e.activate({event:t,plugins:n}))},L=t=>{h().addToCacheList(t),t.length>0&&(addEventListener("install",y),addEventListener("activate",p))};return t.addPlugins=(t=>{i.add(t)}),t.addRoute=f,t.cleanupOutdatedCaches=(()=>{addEventListener("activate",t=>{const n=e.cacheNames.getPrecacheName();t.waitUntil((async(t,e="-precache-")=>{const n=(await caches.keys()).filter(n=>n.includes(e)&&n.includes(self.registration.scope)&&n!==t);return await Promise.all(n.map(t=>caches.delete(t))),n})(n).then(t=>{}))})}),t.getCacheKeyForURL=(t=>{return h().getCacheKeyForURL(t)}),t.precache=L,t.precacheAndRoute=((t,e)=>{L(t),f(e)}),t.PrecacheController=l,t}({},workbox.core._private,workbox.core._private,workbox.core._private,workbox.core._private);
-//# sourceMappingURL=workbox-precaching.prod.js.map
--- a/public/workbox/workbox-range-requests.prod.js
+++ b/public/workbox/workbox-range-requests.prod.js
@@ -1,2 +0,0 @@
-this.workbox=this.workbox||{},this.workbox.rangeRequests=function(e,n){"use strict";try{self["workbox:range-requests:4.3.1"]&&_()}catch(e){}async function t(e,t){try{if(206===t.status)return t;const s=e.headers.get("range");if(!s)throw new n.WorkboxError("no-range-header");const a=function(e){const t=e.trim().toLowerCase();if(!t.startsWith("bytes="))throw new n.WorkboxError("unit-must-be-bytes",{normalizedRangeHeader:t});if(t.includes(","))throw new n.WorkboxError("single-range-only",{normalizedRangeHeader:t});const s=/(\d*)-(\d*)/.exec(t);if(null===s||!s[1]&&!s[2])throw new n.WorkboxError("invalid-range-values",{normalizedRangeHeader:t});return{start:""===s[1]?null:Number(s[1]),end:""===s[2]?null:Number(s[2])}}(s),r=await t.blob(),i=function(e,t,s){const a=e.size;if(s>a||t<0)throw new n.WorkboxError("range-not-satisfiable",{size:a,end:s,start:t});let r,i;return null===t?(r=a-s,i=a):null===s?(r=t,i=a):(r=t,i=s+1),{start:r,end:i}}(r,a.start,a.end),o=r.slice(i.start,i.end),u=o.size,l=new Response(o,{status:206,statusText:"Partial Content",headers:t.headers});return l.headers.set("Content-Length",u),l.headers.set("Content-Range",`bytes ${i.start}-${i.end-1}/`+r.size),l}catch(e){return new Response("",{status:416,statusText:"Range Not Satisfiable"})}}return e.createPartialResponse=t,e.Plugin=class{async cachedResponseWillBeUsed({request:e,cachedResponse:n}){return n&&e.headers.has("range")?await t(e,n):n}},e}({},workbox.core._private);
-//# sourceMappingURL=workbox-range-requests.prod.js.map
--- a/public/workbox/workbox-routing.prod.js
+++ b/public/workbox/workbox-routing.prod.js
@@ -1,2 +0,0 @@
-this.workbox=this.workbox||{},this.workbox.routing=function(t,e,r){"use strict";try{self["workbox:routing:4.3.1"]&&_()}catch(t){}const s="GET",n=t=>t&&"object"==typeof t?t:{handle:t};class o{constructor(t,e,r){this.handler=n(e),this.match=t,this.method=r||s}}class i extends o{constructor(t,{whitelist:e=[/./],blacklist:r=[]}={}){super(t=>this.t(t),t),this.s=e,this.o=r}t({url:t,request:e}){if("navigate"!==e.mode)return!1;const r=t.pathname+t.search;for(const t of this.o)if(t.test(r))return!1;return!!this.s.some(t=>t.test(r))}}class u extends o{constructor(t,e,r){super(({url:e})=>{const r=t.exec(e.href);return r?e.origin!==location.origin&&0!==r.index?null:r.slice(1):null},e,r)}}class c{constructor(){this.i=new Map}get routes(){return this.i}addFetchListener(){self.addEventListener("fetch",t=>{const{request:e}=t,r=this.handleRequest({request:e,event:t});r&&t.respondWith(r)})}addCacheListener(){self.addEventListener("message",async t=>{if(t.data&&"CACHE_URLS"===t.data.type){const{payload:e}=t.data,r=Promise.all(e.urlsToCache.map(t=>{"string"==typeof t&&(t=[t]);const e=new Request(...t);return this.handleRequest({request:e})}));t.waitUntil(r),t.ports&&t.ports[0]&&(await r,t.ports[0].postMessage(!0))}})}handleRequest({request:t,event:e}){const r=new URL(t.url,location);if(!r.protocol.startsWith("http"))return;let s,{params:n,route:o}=this.findMatchingRoute({url:r,request:t,event:e}),i=o&&o.handler;if(!i&&this.u&&(i=this.u),i){try{s=i.handle({url:r,request:t,event:e,params:n})}catch(t){s=Promise.reject(t)}return s&&this.h&&(s=s.catch(t=>this.h.handle({url:r,event:e,err:t}))),s}}findMatchingRoute({url:t,request:e,event:r}){const s=this.i.get(e.method)||[];for(const n of s){let s,o=n.match({url:t,request:e,event:r});if(o)return Array.isArray(o)&&o.length>0?s=o:o.constructor===Object&&Object.keys(o).length>0&&(s=o),{route:n,params:s}}return{}}setDefaultHandler(t){this.u=n(t)}setCatchHandler(t){this.h=n(t)}registerRoute(t){this.i.has(t.method)||this.i.set(t.method,[]),this.i.get(t.method).push(t)}unregisterRoute(t){if(!this.i.has(t.method))throw new r.WorkboxError("unregister-route-but-not-found-with-method",{method:t.method});const e=this.i.get(t.method).indexOf(t);if(!(e>-1))throw new r.WorkboxError("unregister-route-route-not-registered");this.i.get(t.method).splice(e,1)}}let a;const h=()=>(a||((a=new c).addFetchListener(),a.addCacheListener()),a);return t.NavigationRoute=i,t.RegExpRoute=u,t.registerNavigationRoute=((t,r={})=>{const s=e.cacheNames.getPrecacheName(r.cacheName),n=new i(async()=>{try{const e=await caches.match(t,{cacheName:s});if(e)return e;throw new Error(`The cache ${s} did not have an entry for `+`${t}.`)}catch(e){return fetch(t)}},{whitelist:r.whitelist,blacklist:r.blacklist});return h().registerRoute(n),n}),t.registerRoute=((t,e,s="GET")=>{let n;if("string"==typeof t){const r=new URL(t,location);n=new o(({url:t})=>t.href===r.href,e,s)}else if(t instanceof RegExp)n=new u(t,e,s);else if("function"==typeof t)n=new o(t,e,s);else{if(!(t instanceof o))throw new r.WorkboxError("unsupported-route-type",{moduleName:"workbox-routing",funcName:"registerRoute",paramName:"capture"});n=t}return h().registerRoute(n),n}),t.Route=o,t.Router=c,t.setCatchHandler=(t=>{h().setCatchHandler(t)}),t.setDefaultHandler=(t=>{h().setDefaultHandler(t)}),t}({},workbox.core._private,workbox.core._private);
-//# sourceMappingURL=workbox-routing.prod.js.map
--- a/public/workbox/workbox-strategies.prod.js
+++ b/public/workbox/workbox-strategies.prod.js
@@ -1,2 +0,0 @@
-this.workbox=this.workbox||{},this.workbox.strategies=function(e,t,s,n,r){"use strict";try{self["workbox:strategies:4.3.1"]&&_()}catch(e){}class i{constructor(e={}){this.t=t.cacheNames.getRuntimeName(e.cacheName),this.s=e.plugins||[],this.i=e.fetchOptions||null,this.h=e.matchOptions||null}async handle({event:e,request:t}){return this.makeRequest({event:e,request:t||e.request})}async makeRequest({event:e,request:t}){"string"==typeof t&&(t=new Request(t));let n,i=await s.cacheWrapper.match({cacheName:this.t,request:t,event:e,matchOptions:this.h,plugins:this.s});if(!i)try{i=await this.u(t,e)}catch(e){n=e}if(!i)throw new r.WorkboxError("no-response",{url:t.url,error:n});return i}async u(e,t){const r=await n.fetchWrapper.fetch({request:e,event:t,fetchOptions:this.i,plugins:this.s}),i=r.clone(),h=s.cacheWrapper.put({cacheName:this.t,request:e,response:i,event:t,plugins:this.s});if(t)try{t.waitUntil(h)}catch(e){}return r}}class h{constructor(e={}){this.t=t.cacheNames.getRuntimeName(e.cacheName),this.s=e.plugins||[],this.h=e.matchOptions||null}async handle({event:e,request:t}){return this.makeRequest({event:e,request:t||e.request})}async makeRequest({event:e,request:t}){"string"==typeof t&&(t=new Request(t));const n=await s.cacheWrapper.match({cacheName:this.t,request:t,event:e,matchOptions:this.h,plugins:this.s});if(!n)throw new r.WorkboxError("no-response",{url:t.url});return n}}const u={cacheWillUpdate:({response:e})=>200===e.status||0===e.status?e:null};class a{constructor(e={}){if(this.t=t.cacheNames.getRuntimeName(e.cacheName),e.plugins){let t=e.plugins.some(e=>!!e.cacheWillUpdate);this.s=t?e.plugins:[u,...e.plugins]}else this.s=[u];this.o=e.networkTimeoutSeconds,this.i=e.fetchOptions||null,this.h=e.matchOptions||null}async handle({event:e,request:t}){return this.makeRequest({event:e,request:t||e.request})}async makeRequest({event:e,request:t}){const s=[];"string"==typeof t&&(t=new Request(t));const n=[];let i;if(this.o){const{id:r,promise:h}=this.l({request:t,event:e,logs:s});i=r,n.push(h)}const h=this.q({timeoutId:i,request:t,event:e,logs:s});n.push(h);let u=await Promise.race(n);if(u||(u=await h),!u)throw new r.WorkboxError("no-response",{url:t.url});return u}l({request:e,logs:t,event:s}){let n;return{promise:new Promise(t=>{n=setTimeout(async()=>{t(await this.p({request:e,event:s}))},1e3*this.o)}),id:n}}async q({timeoutId:e,request:t,logs:r,event:i}){let h,u;try{u=await n.fetchWrapper.fetch({request:t,event:i,fetchOptions:this.i,plugins:this.s})}catch(e){h=e}if(e&&clearTimeout(e),h||!u)u=await this.p({request:t,event:i});else{const e=u.clone(),n=s.cacheWrapper.put({cacheName:this.t,request:t,response:e,event:i,plugins:this.s});if(i)try{i.waitUntil(n)}catch(e){}}return u}p({event:e,request:t}){return s.cacheWrapper.match({cacheName:this.t,request:t,event:e,matchOptions:this.h,plugins:this.s})}}class c{constructor(e={}){this.t=t.cacheNames.getRuntimeName(e.cacheName),this.s=e.plugins||[],this.i=e.fetchOptions||null}async handle({event:e,request:t}){return this.makeRequest({event:e,request:t||e.request})}async makeRequest({event:e,request:t}){let s,i;"string"==typeof t&&(t=new Request(t));try{i=await n.fetchWrapper.fetch({request:t,event:e,fetchOptions:this.i,plugins:this.s})}catch(e){s=e}if(!i)throw new r.WorkboxError("no-response",{url:t.url,error:s});return i}}class o{constructor(e={}){if(this.t=t.cacheNames.getRuntimeName(e.cacheName),this.s=e.plugins||[],e.plugins){let t=e.plugins.some(e=>!!e.cacheWillUpdate);this.s=t?e.plugins:[u,...e.plugins]}else this.s=[u];this.i=e.fetchOptions||null,this.h=e.matchOptions||null}async handle({event:e,request:t}){return this.makeRequest({event:e,request:t||e.request})}async makeRequest({event:e,request:t}){"string"==typeof t&&(t=new Request(t));const n=this.u({request:t,event:e});let i,h=await s.cacheWrapper.match({cacheName:this.t,request:t,event:e,matchOptions:this.h,plugins:this.s});if(h){if(e)try{e.waitUntil(n)}catch(i){}}else try{h=await n}catch(e){i=e}if(!h)throw new r.WorkboxError("no-response",{url:t.url,error:i});return h}async u({request:e,event:t}){const r=await n.fetchWrapper.fetch({request:e,event:t,fetchOptions:this.i,plugins:this.s}),i=s.cacheWrapper.put({cacheName:this.t,request:e,response:r.clone(),event:t,plugins:this.s});if(t)try{t.waitUntil(i)}catch(e){}return r}}const l={cacheFirst:i,cacheOnly:h,networkFirst:a,networkOnly:c,staleWhileRevalidate:o},q=e=>{const t=l[e];return e=>new t(e)},w=q("cacheFirst"),p=q("cacheOnly"),v=q("networkFirst"),y=q("networkOnly"),m=q("staleWhileRevalidate");return e.CacheFirst=i,e.CacheOnly=h,e.NetworkFirst=a,e.NetworkOnly=c,e.StaleWhileRevalidate=o,e.cacheFirst=w,e.cacheOnly=p,e.networkFirst=v,e.networkOnly=y,e.staleWhileRevalidate=m,e}({},workbox.core._private,workbox.core._private,workbox.core._private,workbox.core._private);
-//# sourceMappingURL=workbox-strategies.prod.js.map
--- a/public/workbox/workbox-streams.prod.js
+++ b/public/workbox/workbox-streams.prod.js
@@ -1,2 +0,0 @@
-this.workbox=this.workbox||{},this.workbox.streams=function(e){"use strict";try{self["workbox:streams:4.3.1"]&&_()}catch(e){}function n(e){const n=e.map(e=>Promise.resolve(e).then(e=>(function(e){return e.body&&e.body.getReader?e.body.getReader():e.getReader?e.getReader():new Response(e).body.getReader()})(e)));let t,r;const s=new Promise((e,n)=>{t=e,r=n});let o=0;return{done:s,stream:new ReadableStream({pull(e){return n[o].then(e=>e.read()).then(r=>{if(r.done)return++o>=n.length?(e.close(),void t()):this.pull(e);e.enqueue(r.value)}).catch(e=>{throw r(e),e})},cancel(){t()}})}}function t(e={}){const n=new Headers(e);return n.has("content-type")||n.set("content-type","text/html"),n}function r(e,r){const{done:s,stream:o}=n(e),a=t(r);return{done:s,response:new Response(o,{headers:a})}}let s=void 0;function o(){if(void 0===s)try{new ReadableStream({start(){}}),s=!0}catch(e){s=!1}return s}return e.concatenate=n,e.concatenateToResponse=r,e.isSupported=o,e.strategy=function(e,n){return async({event:s,url:a,params:c})=>{if(o()){const{done:t,response:o}=r(e.map(e=>e({event:s,url:a,params:c})),n);return s.waitUntil(t),o}const i=await Promise.all(e.map(e=>e({event:s,url:a,params:c})).map(async e=>{const n=await e;return n instanceof Response?n.blob():n})),u=t(n);return new Response(new Blob(i),{headers:u})}},e}({});
-//# sourceMappingURL=workbox-streams.prod.js.map
--- a/public/workbox/workbox-sw.js
+++ b/public/workbox/workbox-sw.js
@@ -1,2 +0,0 @@
-!function(){"use strict";try{self["workbox:sw:4.3.1"]&&_()}catch(t){}const t="https://storage.googleapis.com/workbox-cdn/releases/4.3.1",e={backgroundSync:"background-sync",broadcastUpdate:"broadcast-update",cacheableResponse:"cacheable-response",core:"core",expiration:"expiration",googleAnalytics:"offline-ga",navigationPreload:"navigation-preload",precaching:"precaching",rangeRequests:"range-requests",routing:"routing",strategies:"strategies",streams:"streams"};self.workbox=new class{constructor(){return this.v={},this.t={debug:"localhost"===self.location.hostname,modulePathPrefix:null,modulePathCb:null},this.s=this.t.debug?"dev":"prod",this.o=!1,new Proxy(this,{get(t,s){if(t[s])return t[s];const o=e[s];return o&&t.loadModule(`workbox-${o}`),t[s]}})}setConfig(t={}){if(this.o)throw new Error("Config must be set before accessing workbox.* modules");Object.assign(this.t,t),this.s=this.t.debug?"dev":"prod"}loadModule(t){const e=this.i(t);try{importScripts(e),this.o=!0}catch(s){throw console.error(`Unable to import module '${t}' from '${e}'.`),s}}i(e){if(this.t.modulePathCb)return this.t.modulePathCb(e,this.t.debug);let s=[t];const o=`${e}.${this.s}.js`,r=this.t.modulePathPrefix;return r&&""===(s=r.split("/"))[s.length-1]&&s.splice(s.length-1,1),s.push(o),s.join("/")}}}();
-//# sourceMappingURL=workbox-sw.js.map
--- a/public/workbox/workbox-window.prod.es5.mjs
+++ b/public/workbox/workbox-window.prod.es5.mjs
@@ -1,2 +0,0 @@
-try{self["workbox:window:4.3.1"]&&_()}catch(n){}var n=function(n,t){return new Promise(function(i){var e=new MessageChannel;e.port1.onmessage=function(n){return i(n.data)},n.postMessage(t,[e.port2])})};function t(n,t){for(var i=0;i<t.length;i++){var e=t[i];e.enumerable=e.enumerable||!1,e.configurable=!0,"value"in e&&(e.writable=!0),Object.defineProperty(n,e.key,e)}}function i(n){if(void 0===n)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return n}try{self["workbox:core:4.3.1"]&&_()}catch(n){}var e=function(){var n=this;this.promise=new Promise(function(t,i){n.resolve=t,n.reject=i})},r=function(n,t){return new URL(n,location).href===new URL(t,location).href},o=function(n,t){Object.assign(this,t,{type:n})};function u(n){return function(){for(var t=[],i=0;i<arguments.length;i++)t[i]=arguments[i];try{return Promise.resolve(n.apply(this,t))}catch(n){return Promise.reject(n)}}}function a(n,t,i){return i?t?t(n):n:(n&&n.then||(n=Promise.resolve(n)),t?n.then(t):n)}function s(){}var c=function(c){var f,h;function v(n,t){var r;return void 0===t&&(t={}),(r=c.call(this)||this).t=n,r.i=t,r.o=0,r.u=new e,r.s=new e,r.h=new e,r.v=r.v.bind(i(i(r))),r.l=r.l.bind(i(i(r))),r.g=r.g.bind(i(i(r))),r.m=r.m.bind(i(i(r))),r}h=c,(f=v).prototype=Object.create(h.prototype),f.prototype.constructor=f,f.__proto__=h;var l,w,g,d=v.prototype;return d.register=u(function(n){var t,i,e=this,u=(void 0===n?{}:n).immediate,c=void 0!==u&&u;return t=function(){return e.p=Boolean(navigator.serviceWorker.controller),e.P=e.R(),a(e.k(),function(n){e.B=n,e.P&&(e.O=e.P,e.s.resolve(e.P),e.h.resolve(e.P),e.j(e.P),e.P.addEventListener("statechange",e.l,{once:!0}));var t=e.B.waiting;return t&&r(t.scriptURL,e.t)&&(e.O=t,Promise.resolve().then(function(){e.dispatchEvent(new o("waiting",{sw:t,wasWaitingBeforeRegister:!0}))})),e.O&&e.u.resolve(e.O),e.B.addEventListener("updatefound",e.g),navigator.serviceWorker.addEventListener("controllerchange",e.m,{once:!0}),"BroadcastChannel"in self&&(e.C=new BroadcastChannel("workbox"),e.C.addEventListener("message",e.v)),navigator.serviceWorker.addEventListener("message",e.v),e.B})},(i=function(){if(!c&&"complete"!==document.readyState)return function(n,t){if(!t)return n&&n.then?n.then(s):Promise.resolve()}(new Promise(function(n){return addEventListener("load",n)}))}())&&i.then?i.then(t):t(i)}),d.getSW=u(function(){return this.O||this.u.promise}),d.messageSW=u(function(t){return a(this.getSW(),function(i){return n(i,t)})}),d.R=function(){var n=navigator.serviceWorker.controller;if(n&&r(n.scriptURL,this.t))return n},d.k=u(function(){var n=this;return function(n,t){try{var i=n()}catch(n){return t(n)}return i&&i.then?i.then(void 0,t):i}(function(){return a(navigator.serviceWorker.register(n.t,n.i),function(t){return n.L=performance.now(),t})},function(n){throw n})}),d.j=function(t){n(t,{type:"WINDOW_READY",meta:"workbox-window"})},d.g=function(){var n=this.B.installing;this.o>0||!r(n.scriptURL,this.t)||performance.now()>this.L+6e4?(this.W=n,this.B.removeEventListener("updatefound",this.g)):(this.O=n,this.u.resolve(n)),++this.o,n.addEventListener("statechange",this.l)},d.l=function(n){var t=this,i=n.target,e=i.state,r=i===this.W,u=r?"external":"",a={sw:i,originalEvent:n};!r&&this.p&&(a.isUpdate=!0),this.dispatchEvent(new o(u+e,a)),"installed"===e?this._=setTimeout(function(){"installed"===e&&t.B.waiting===i&&t.dispatchEvent(new o(u+"waiting",a))},200):"activating"===e&&(clearTimeout(this._),r||this.s.resolve(i))},d.m=function(n){var t=this.O;t===navigator.serviceWorker.controller&&(this.dispatchEvent(new o("controlling",{sw:t,originalEvent:n})),this.h.resolve(t))},d.v=function(n){var t=n.data;this.dispatchEvent(new o("message",{data:t,originalEvent:n}))},l=v,(w=[{key:"active",get:function(){return this.s.promise}},{key:"controlling",get:function(){return this.h.promise}}])&&t(l.prototype,w),g&&t(l,g),v}(function(){function n(){this.D={}}var t=n.prototype;return t.addEventListener=function(n,t){this.T(n).add(t)},t.removeEventListener=function(n,t){this.T(n).delete(t)},t.dispatchEvent=function(n){n.target=this,this.T(n.type).forEach(function(t){return t(n)})},t.T=function(n){return this.D[n]=this.D[n]||new Set},n}());export{c as Workbox,n as messageSW};
-//# sourceMappingURL=workbox-window.prod.es5.mjs.map
--- a/public/workbox/workbox-window.prod.mjs
+++ b/public/workbox/workbox-window.prod.mjs
@@ -1,2 +0,0 @@
-try{self["workbox:window:4.3.1"]&&_()}catch(t){}const t=(t,s)=>new Promise(i=>{let e=new MessageChannel;e.port1.onmessage=(t=>i(t.data)),t.postMessage(s,[e.port2])});try{self["workbox:core:4.3.1"]&&_()}catch(t){}class s{constructor(){this.promise=new Promise((t,s)=>{this.resolve=t,this.reject=s})}}class i{constructor(){this.t={}}addEventListener(t,s){this.s(t).add(s)}removeEventListener(t,s){this.s(t).delete(s)}dispatchEvent(t){t.target=this,this.s(t.type).forEach(s=>s(t))}s(t){return this.t[t]=this.t[t]||new Set}}const e=(t,s)=>new URL(t,location).href===new URL(s,location).href;class n{constructor(t,s){Object.assign(this,s,{type:t})}}const h=200,a=6e4;class o extends i{constructor(t,i={}){super(),this.i=t,this.h=i,this.o=0,this.l=new s,this.g=new s,this.u=new s,this.m=this.m.bind(this),this.v=this.v.bind(this),this.p=this.p.bind(this),this._=this._.bind(this)}async register({immediate:t=!1}={}){t||"complete"===document.readyState||await new Promise(t=>addEventListener("load",t)),this.C=Boolean(navigator.serviceWorker.controller),this.W=this.L(),this.S=await this.B(),this.W&&(this.R=this.W,this.g.resolve(this.W),this.u.resolve(this.W),this.P(this.W),this.W.addEventListener("statechange",this.v,{once:!0}));const s=this.S.waiting;return s&&e(s.scriptURL,this.i)&&(this.R=s,Promise.resolve().then(()=>{this.dispatchEvent(new n("waiting",{sw:s,wasWaitingBeforeRegister:!0}))})),this.R&&this.l.resolve(this.R),this.S.addEventListener("updatefound",this.p),navigator.serviceWorker.addEventListener("controllerchange",this._,{once:!0}),"BroadcastChannel"in self&&(this.T=new BroadcastChannel("workbox"),this.T.addEventListener("message",this.m)),navigator.serviceWorker.addEventListener("message",this.m),this.S}get active(){return this.g.promise}get controlling(){return this.u.promise}async getSW(){return this.R||this.l.promise}async messageSW(s){const i=await this.getSW();return t(i,s)}L(){const t=navigator.serviceWorker.controller;if(t&&e(t.scriptURL,this.i))return t}async B(){try{const t=await navigator.serviceWorker.register(this.i,this.h);return this.U=performance.now(),t}catch(t){throw t}}P(s){t(s,{type:"WINDOW_READY",meta:"workbox-window"})}p(){const t=this.S.installing;this.o>0||!e(t.scriptURL,this.i)||performance.now()>this.U+a?(this.k=t,this.S.removeEventListener("updatefound",this.p)):(this.R=t,this.l.resolve(t)),++this.o,t.addEventListener("statechange",this.v)}v(t){const s=t.target,{state:i}=s,e=s===this.k,a=e?"external":"",o={sw:s,originalEvent:t};!e&&this.C&&(o.isUpdate=!0),this.dispatchEvent(new n(a+i,o)),"installed"===i?this.D=setTimeout(()=>{"installed"===i&&this.S.waiting===s&&this.dispatchEvent(new n(a+"waiting",o))},h):"activating"===i&&(clearTimeout(this.D),e||this.g.resolve(s))}_(t){const s=this.R;s===navigator.serviceWorker.controller&&(this.dispatchEvent(new n("controlling",{sw:s,originalEvent:t})),this.u.resolve(s))}m(t){const{data:s}=t;this.dispatchEvent(new n("message",{data:s,originalEvent:t}))}}export{o as Workbox,t as messageSW};
-//# sourceMappingURL=workbox-window.prod.mjs.map
--- a/public/workbox/workbox-window.prod.umd.js
+++ b/public/workbox/workbox-window.prod.umd.js
@@ -1,2 +0,0 @@
-!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((n=n||self).workbox={})}(this,function(n){"use strict";try{self["workbox:window:4.3.1"]&&_()}catch(n){}var t=function(n,t){return new Promise(function(i){var e=new MessageChannel;e.port1.onmessage=function(n){return i(n.data)},n.postMessage(t,[e.port2])})};function i(n,t){for(var i=0;i<t.length;i++){var e=t[i];e.enumerable=e.enumerable||!1,e.configurable=!0,"value"in e&&(e.writable=!0),Object.defineProperty(n,e.key,e)}}function e(n){if(void 0===n)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return n}try{self["workbox:core:4.3.1"]&&_()}catch(n){}var r=function(){var n=this;this.promise=new Promise(function(t,i){n.resolve=t,n.reject=i})},o=function(n,t){return new URL(n,location).href===new URL(t,location).href},u=function(n,t){Object.assign(this,t,{type:n})};function s(n){return function(){for(var t=[],i=0;i<arguments.length;i++)t[i]=arguments[i];try{return Promise.resolve(n.apply(this,t))}catch(n){return Promise.reject(n)}}}function a(n,t,i){return i?t?t(n):n:(n&&n.then||(n=Promise.resolve(n)),t?n.then(t):n)}function c(){}var f=function(n){var f,h;function v(t,i){var o;return void 0===i&&(i={}),(o=n.call(this)||this).t=t,o.i=i,o.o=0,o.u=new r,o.s=new r,o.h=new r,o.v=o.v.bind(e(e(o))),o.l=o.l.bind(e(e(o))),o.g=o.g.bind(e(e(o))),o.m=o.m.bind(e(e(o))),o}h=n,(f=v).prototype=Object.create(h.prototype),f.prototype.constructor=f,f.__proto__=h;var l,w,d,g=v.prototype;return g.register=s(function(n){var t,i,e=this,r=(void 0===n?{}:n).immediate,s=void 0!==r&&r;return t=function(){return e.p=Boolean(navigator.serviceWorker.controller),e.P=e.j(),a(e.O(),function(n){e.R=n,e.P&&(e._=e.P,e.s.resolve(e.P),e.h.resolve(e.P),e.k(e.P),e.P.addEventListener("statechange",e.l,{once:!0}));var t=e.R.waiting;return t&&o(t.scriptURL,e.t)&&(e._=t,Promise.resolve().then(function(){e.dispatchEvent(new u("waiting",{sw:t,wasWaitingBeforeRegister:!0}))})),e._&&e.u.resolve(e._),e.R.addEventListener("updatefound",e.g),navigator.serviceWorker.addEventListener("controllerchange",e.m,{once:!0}),"BroadcastChannel"in self&&(e.B=new BroadcastChannel("workbox"),e.B.addEventListener("message",e.v)),navigator.serviceWorker.addEventListener("message",e.v),e.R})},(i=function(){if(!s&&"complete"!==document.readyState)return function(n,t){if(!t)return n&&n.then?n.then(c):Promise.resolve()}(new Promise(function(n){return addEventListener("load",n)}))}())&&i.then?i.then(t):t(i)}),g.getSW=s(function(){return this._||this.u.promise}),g.messageSW=s(function(n){return a(this.getSW(),function(i){return t(i,n)})}),g.j=function(){var n=navigator.serviceWorker.controller;if(n&&o(n.scriptURL,this.t))return n},g.O=s(function(){var n=this;return function(n,t){try{var i=n()}catch(n){return t(n)}return i&&i.then?i.then(void 0,t):i}(function(){return a(navigator.serviceWorker.register(n.t,n.i),function(t){return n.C=performance.now(),t})},function(n){throw n})}),g.k=function(n){t(n,{type:"WINDOW_READY",meta:"workbox-window"})},g.g=function(){var n=this.R.installing;this.o>0||!o(n.scriptURL,this.t)||performance.now()>this.C+6e4?(this.L=n,this.R.removeEventListener("updatefound",this.g)):(this._=n,this.u.resolve(n)),++this.o,n.addEventListener("statechange",this.l)},g.l=function(n){var t=this,i=n.target,e=i.state,r=i===this.L,o=r?"external":"",s={sw:i,originalEvent:n};!r&&this.p&&(s.isUpdate=!0),this.dispatchEvent(new u(o+e,s)),"installed"===e?this.W=setTimeout(function(){"installed"===e&&t.R.waiting===i&&t.dispatchEvent(new u(o+"waiting",s))},200):"activating"===e&&(clearTimeout(this.W),r||this.s.resolve(i))},g.m=function(n){var t=this._;t===navigator.serviceWorker.controller&&(this.dispatchEvent(new u("controlling",{sw:t,originalEvent:n})),this.h.resolve(t))},g.v=function(n){var t=n.data;this.dispatchEvent(new u("message",{data:t,originalEvent:n}))},l=v,(w=[{key:"active",get:function(){return this.s.promise}},{key:"controlling",get:function(){return this.h.promise}}])&&i(l.prototype,w),d&&i(l,d),v}(function(){function n(){this.D={}}var t=n.prototype;return t.addEventListener=function(n,t){this.M(n).add(t)},t.removeEventListener=function(n,t){this.M(n).delete(t)},t.dispatchEvent=function(n){n.target=this,this.M(n.type).forEach(function(t){return t(n)})},t.M=function(n){return this.D[n]=this.D[n]||new Set},n}());n.Workbox=f,n.messageSW=t,Object.defineProperty(n,"__esModule",{value:!0})});
-//# sourceMappingURL=workbox-window.prod.umd.js.map
--- a/scripts/build-node.js
+++ b/scripts/build-node.js
@@ -5,7 +5,7 @@

 // In order to run:
 //   npm install canvas # please do not check it in
-//   yarn build-node
+//   npm run build-node
 //   node build/static/js/build-node.js
 //   open test.png

--- a/scripts/locales-coverage-description.js
+++ b/scripts/locales-coverage-description.js
@@ -24,7 +24,6 @@ const crowdinMap = {
  "nb-NO": "en-nb",
  "nl-NL": "en-nl",
  "nn-NO": "en-nnno",
-  "oc-FR": "en-oc",
  "pa-IN": "en-pain",
  "pl-PL": "en-pl",
  "pt-BR": "en-ptbr",
@@ -61,7 +60,6 @@ const flags = {
  "nb-NO": "🇳🇴",
  "nl-NL": "🇳🇱",
  "nn-NO": "🇳🇴",
-  "oc-FR": "🏳",
  "pa-IN": "🇮🇳",
  "pl-PL": "🇵🇱",
  "pt-BR": "🇧🇷",
@@ -98,7 +96,6 @@ const languages = {
  "nb-NO": "Norsk bokmål",
  "nl-NL": "Nederlands",
  "nn-NO": "Norsk nynorsk",
-  "oc-FR": "Occitan",
  "pa-IN": "ਪੰਜਾਬੀ",
  "pl-PL": "Polski",
  "pt-BR": "Português Brasileiro",
--- a/src/actions/actionClipboard.tsx
+++ b/src/actions/actionClipboard.tsx
@@ -17,7 +17,7 @@ export const actionCopy = register({
    };
  },
  contextItemLabel: "labels.copy",
-  // Don't assign keyTest since its handled via copy event
+  keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.code === CODES.C,
 });

 export const actionCut = register({
@@ -94,14 +94,7 @@ export const actionCopyAsPng = register({
      return {
        appState: {
          ...appState,
-          toastMessage: t("toast.copyToClipboardAsPng", {
-            exportSelection: selectedElements.length
-              ? t("toast.selection")
-              : t("toast.canvas"),
-            exportColorScheme: appState.exportWithDarkMode
-              ? t("buttons.darkMode")
-              : t("buttons.lightMode"),
-          }),
+          toastMessage: t("toast.copyToClipboardAsPng"),
        },
        commitToHistory: false,
      };
--- a/src/actions/actionExport.tsx
+++ b/src/actions/actionExport.tsx
@@ -5,7 +5,6 @@ import { ProjectName } from "../components/ProjectName";
 import { ToolButton } from "../components/ToolButton";
 import "../components/ToolIcon.scss";
 import { Tooltip } from "../components/Tooltip";
-import { DarkModeToggle, Appearence } from "../components/DarkModeToggle";
 import { loadFromJSON, saveAsJSON } from "../data";
 import { t } from "../i18n";
 import useIsMobile from "../is-mobile";
@@ -97,24 +96,9 @@ export const actionChangeShouldAddWatermark = register({
 export const actionSaveScene = register({
  name: "saveScene",
  perform: async (elements, appState, value) => {
-    const fileHandleExists = !!appState.fileHandle;
    try {
      const { fileHandle } = await saveAsJSON(elements, appState);
-      return {
-        commitToHistory: false,
-        appState: {
-          ...appState,
-          fileHandle,
-          toastMessage: fileHandleExists
-            ? fileHandle.name
-              ? t("toast.fileSavedToFilename").replace(
-                  "{filename}",
-                  `"${fileHandle.name}"`,
-                )
-              : t("toast.fileSaved")
-            : null,
-        },
-      };
+      return { commitToHistory: false, appState: { ...appState, fileHandle } };
    } catch (error) {
      if (error?.name !== "AbortError") {
        console.error(error);
@@ -205,31 +189,3 @@ export const actionLoadScene = register({
    />
  ),
 });
-
-export const actionExportWithDarkMode = register({
-  name: "exportWithDarkMode",
-  perform: (_elements, appState, value) => {
-    return {
-      appState: { ...appState, exportWithDarkMode: value },
-      commitToHistory: false,
-    };
-  },
-  PanelComponent: ({ appState, updateData }) => (
-    <div
-      style={{
-        display: "flex",
-        justifyContent: "flex-end",
-        marginTop: "-45px",
-        marginBottom: "10px",
-      }}
-    >
-      <DarkModeToggle
-        value={appState.exportWithDarkMode ? "dark" : "light"}
-        onChange={(appearance: Appearence) => {
-          updateData(appearance === "dark");
-        }}
-        title={t("labels.toggleExportColorScheme")}
-      />
-    </div>
-  ),
-});
--- a/src/actions/actionFinalize.tsx
+++ b/src/actions/actionFinalize.tsx
@@ -18,7 +18,7 @@ import { isBindingElement } from "../element/typeChecks";

 export const actionFinalize = register({
  name: "finalize",
-  perform: (elements, appState, _, { canvas }) => {
+  perform: (elements, appState) => {
    if (appState.editingLinearElement) {
      const {
        elementId,
@@ -83,7 +83,7 @@ export const actionFinalize = register({
      // If the multi point line closes the loop,
      // set the last point to first point.
      // This ensures that loop remains closed at different scales.
-      const isLoop = isPathALoop(multiPointElement.points, appState.zoom.value);
+      const isLoop = isPathALoop(multiPointElement.points);
      if (
        multiPointElement.type === "line" ||
        multiPointElement.type === "draw"
@@ -126,7 +126,7 @@ export const actionFinalize = register({
      (!appState.elementLocked && appState.elementType !== "draw") ||
      !multiPointElement
    ) {
-      resetCursor(canvas);
+      resetCursor();
    }
    return {
      elements: newElements,
--- a/src/actions/actionNavigate.tsx
+++ b/src/actions/actionNavigate.tsx
@@ -42,7 +42,7 @@ export const actionGoToCollaborator = register({
      return null;
    }

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

    return (
--- a/src/actions/actionToggleGridMode.tsx
+++ b/src/actions/actionToggleGridMode.tsx
@@ -17,6 +17,6 @@ export const actionToggleGridMode = register({
    };
  },
  checked: (appState: AppState) => appState.gridSize !== null,
-  contextItemLabel: "labels.showGrid",
+  contextItemLabel: "labels.gridMode",
  keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.code === CODES.QUOTE,
 });
--- a/src/actions/manager.tsx
+++ b/src/actions/manager.tsx
@@ -8,7 +8,6 @@ import {
 } from "./types";
 import { ExcalidrawElement } from "../element/types";
 import { AppState, ExcalidrawProps } from "../types";
-import { MODES } from "../constants";

 // This is the <App> component, but for now we don't care about anything but its
 // `canvas` state.
@@ -69,7 +68,7 @@ export class ActionManager implements ActionsManagerInterface {
    }
    const { viewModeEnabled } = this.getAppState();
    if (viewModeEnabled) {
-      if (!Object.values(MODES).includes(data[0].name)) {
+      if (data[0].name !== "viewMode") {
        return false;
      }
    }
--- a/src/actions/types.ts
+++ b/src/actions/types.ts
@@ -85,8 +85,7 @@ export type ActionName =
  | "alignHorizontallyCentered"
  | "distributeHorizontally"
  | "distributeVertically"
-  | "viewMode"
-  | "exportWithDarkMode";
+  | "viewMode";

 export interface Action {
  name: ActionName;
--- a/src/appState.ts
+++ b/src/appState.ts
@@ -40,7 +40,6 @@ export const getDefaultAppState = (): Omit<
    errorMessage: null,
    exportBackground: true,
    exportEmbedScene: false,
-    exportWithDarkMode: false,
    fileHandle: null,
    gridSize: null,
    height: window.innerHeight,
@@ -119,7 +118,6 @@ const APP_STATE_STORAGE_CONF = (<
  errorMessage: { browser: false, export: false },
  exportBackground: { browser: true, export: false },
  exportEmbedScene: { browser: true, export: false },
-  exportWithDarkMode: { browser: true, export: false },
  fileHandle: { browser: false, export: false },
  gridSize: { browser: true, export: true },
  height: { browser: false, export: false },
--- a/src/clients.ts
+++ b/src/clients.ts
@@ -1,13 +1,6 @@
 import colors from "./colors";
-import { AppState } from "./types";

-export const getClientColors = (clientId: string, appState: AppState) => {
-  if (appState?.collaborators) {
-    const currentUser = appState.collaborators.get(clientId);
-    if (currentUser?.color) {
-      return currentUser.color;
-    }
-  }
+export const getClientColors = (clientId: string) => {
  // Naive way of getting an integer out of the clientId
  const sum = clientId.split("").reduce((a, str) => a + str.charCodeAt(0), 0);

--- a/src/components/Actions.tsx
+++ b/src/components/Actions.tsx
@@ -151,12 +151,10 @@ const LIBRARY_ICON = (
 );

 export const ShapesSwitcher = ({
-  canvas,
  elementType,
  setAppState,
  isLibraryOpen,
 }: {
-  canvas: HTMLCanvasElement | null;
  elementType: ExcalidrawElement["type"];
  setAppState: React.Component<any, AppState>["setState"];
  isLibraryOpen: boolean;
@@ -187,7 +185,7 @@ export const ShapesSwitcher = ({
              multiElement: null,
              selectedElementIds: {},
            });
-            setCursorForShape(canvas, value);
+            setCursorForShape(value);
            setAppState({});
          }}
        />
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -4,6 +4,7 @@ import { RoughCanvas } from "roughjs/bin/canvas";
 import rough from "roughjs/bin/rough";
 import clsx from "clsx";

+import "../actions";
 import {
  actionAddToLibrary,
  actionBringForward,
@@ -47,11 +48,9 @@ import {
  ELEMENT_TRANSLATE_AMOUNT,
  ENV,
  EVENT,
-  GRID_SIZE,
  LINE_CONFIRM_THRESHOLD,
  MIME_TYPES,
  POINTER_BUTTON,
-  SCROLL_TIMEOUT,
  TAP_TWICE_TIMEOUT,
  TEXT_TO_CENTER_SNAP_THRESHOLD,
  TOUCH_CTX_MENU_TIMEOUT,
@@ -172,7 +171,6 @@ import {
  ResolvablePromise,
  resolvablePromise,
  sceneCoordsToViewportCoords,
-  setCursor,
  setCursorForShape,
  tupleToCoors,
  viewportCoordsToSceneCoords,
@@ -301,8 +299,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      offsetTop,
      excalidrawRef,
      viewModeEnabled = false,
-      zenModeEnabled = false,
-      gridModeEnabled = false,
    } = props;
    this.state = {
      ...defaultAppState,
@@ -311,8 +307,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      height,
      ...this.getCanvasOffsets({ offsetLeft, offsetTop }),
      viewModeEnabled,
-      zenModeEnabled,
-      gridSize: gridModeEnabled ? GRID_SIZE : null,
    };
    if (excalidrawRef) {
      const readyPromise =
@@ -414,6 +408,8 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      zenModeEnabled,
      width: canvasDOMWidth,
      height: canvasDOMHeight,
+      offsetTop,
+      offsetLeft,
      viewModeEnabled,
    } = this.state;

@@ -431,6 +427,8 @@ class App extends React.Component<ExcalidrawProps, AppState> {
        style={{
          width: canvasDOMWidth,
          height: canvasDOMHeight,
+          top: offsetTop,
+          left: offsetLeft,
        }}
      >
        <LayerUI
@@ -455,9 +453,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
          onExportToBackend={onExportToBackend}
          renderCustomFooter={renderFooter}
          viewModeEnabled={viewModeEnabled}
-          showExitZenModeBtn={
-            typeof this.props?.zenModeEnabled === "undefined" && zenModeEnabled
-          }
        />
        <div className="excalidraw-textEditorContainer" />
        {this.state.showStats && (
@@ -516,38 +511,22 @@ class App extends React.Component<ExcalidrawProps, AppState> {
        }

        let viewModeEnabled = actionResult?.appState?.viewModeEnabled || false;
-        let zenModeEnabled = actionResult?.appState?.zenModeEnabled || false;
-        let gridSize = actionResult?.appState?.gridSize || null;

        if (typeof this.props.viewModeEnabled !== "undefined") {
          viewModeEnabled = this.props.viewModeEnabled;
        }

-        if (typeof this.props.zenModeEnabled !== "undefined") {
-          zenModeEnabled = this.props.zenModeEnabled;
-        }
-
-        if (typeof this.props.gridModeEnabled !== "undefined") {
-          gridSize = this.props.gridModeEnabled ? GRID_SIZE : null;
-        }
-
        this.setState(
-          (state) => {
-            // using Object.assign instead of spread to fool TS 4.2.2+ into
-            // regarding the resulting type as not containing undefined
-            // (which the following expression will never contain)
-            return Object.assign(actionResult.appState || {}, {
-              editingElement:
-                editingElement || actionResult.appState?.editingElement || null,
-              width: state.width,
-              height: state.height,
-              offsetTop: state.offsetTop,
-              offsetLeft: state.offsetLeft,
-              viewModeEnabled,
-              zenModeEnabled,
-              gridSize,
-            });
-          },
+          (state) => ({
+            ...actionResult.appState,
+            editingElement:
+              editingElement || actionResult.appState?.editingElement || null,
+            width: state.width,
+            height: state.height,
+            offsetTop: state.offsetTop,
+            offsetLeft: state.offsetLeft,
+            viewModeEnabled,
+          }),
          () => {
            if (actionResult.syncHistory) {
              history.setCurrentState(
@@ -673,24 +652,19 @@ class App extends React.Component<ExcalidrawProps, AppState> {

    scene.appState = {
      ...scene.appState,
+      ...calculateScrollCenter(
+        scene.elements,
+        {
+          ...scene.appState,
+          width: this.state.width,
+          height: this.state.height,
+          offsetTop: this.state.offsetTop,
+          offsetLeft: this.state.offsetLeft,
+        },
+        null,
+      ),
      isLoading: false,
    };
-    if (initialData?.scrollToCenter) {
-      scene.appState = {
-        ...scene.appState,
-        ...calculateScrollCenter(
-          scene.elements,
-          {
-            ...scene.appState,
-            width: this.state.width,
-            height: this.state.height,
-            offsetTop: this.state.offsetTop,
-            offsetLeft: this.state.offsetLeft,
-          },
-          null,
-        ),
-      };
-    }

    this.resetHistory();
    this.syncActionResult({
@@ -832,7 +806,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {

    document.addEventListener(EVENT.PASTE, this.pasteFromClipboard);
    document.addEventListener(EVENT.CUT, this.onCut);
-    document.addEventListener(EVENT.SCROLL, this.onScroll);

    window.addEventListener(EVENT.RESIZE, this.onResize, false);
    window.addEventListener(EVENT.UNLOAD, this.onUnload, false);
@@ -872,15 +845,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      this.addEventListeners();
    }

-    if (prevProps.zenModeEnabled !== this.props.zenModeEnabled) {
-      this.setState({ zenModeEnabled: !!this.props.zenModeEnabled });
-    }
-
-    if (prevProps.gridModeEnabled !== this.props.gridModeEnabled) {
-      this.setState({
-        gridSize: this.props.gridModeEnabled ? GRID_SIZE : null,
-      });
-    }
    document
      .querySelector(".excalidraw")
      ?.classList.toggle("Appearance_dark", this.state.appearance === "dark");
@@ -978,7 +942,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      },
      {
        renderOptimizations: true,
-        renderScrollbars: !isMobile(),
      },
    );
    if (scrollBars) {
@@ -1007,16 +970,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
    }
  }

-  private onScroll = debounce(() => {
-    const { offsetTop, offsetLeft } = this.getCanvasOffsets();
-    this.setState((state) => {
-      if (state.offsetLeft === offsetLeft && state.offsetTop === offsetTop) {
-        return null;
-      }
-      return { offsetTop, offsetLeft };
-    });
-  }, SCROLL_TIMEOUT);
-
  // Copy/paste

  private onCut = withBatchedUpdates((event: ClipboardEvent) => {
@@ -1028,13 +981,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
  });

  private onCopy = withBatchedUpdates((event: ClipboardEvent) => {
-    const activeSelection = document.getSelection();
-    if (
-      activeSelection?.anchorNode &&
-      !this.excalidrawContainerRef.current!.contains(activeSelection.anchorNode)
-    ) {
-      return;
-    }
    if (isWritableElement(event.target)) {
      return;
    }
@@ -1454,16 +1400,16 @@ class App extends React.Component<ExcalidrawProps, AppState> {
    }
    if (event.key === KEYS.SPACE && gesture.pointers.size === 0) {
      isHoldingSpace = true;
-      setCursor(this.canvas, CURSOR_TYPE.GRABBING);
+      document.documentElement.style.cursor = CURSOR_TYPE.GRABBING;
    }
  });

  private onKeyUp = withBatchedUpdates((event: KeyboardEvent) => {
    if (event.key === KEYS.SPACE) {
      if (this.state.elementType === "selection") {
-        resetCursor(this.canvas);
+        resetCursor();
      } else {
-        setCursorForShape(this.canvas, this.state.elementType);
+        setCursorForShape(this.state.elementType);
        this.setState({
          selectedElementIds: {},
          selectedGroupIds: {},
@@ -1489,7 +1435,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {

  private selectShapeTool(elementType: AppState["elementType"]) {
    if (!isHoldingSpace) {
-      setCursorForShape(this.canvas, elementType);
+      setCursorForShape(elementType);
    }
    if (isToolIcon(document.activeElement)) {
      document.activeElement.blur();
@@ -1576,7 +1522,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
    textWysiwyg({
      id: element.id,
      appState: this.state,
-      canvas: this.canvas,
      getViewportCoords: (x, y) => {
        const { x: viewportX, y: viewportY } = sceneCoordsToViewportCoords(
          {
@@ -1585,10 +1530,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
          },
          this.state,
        );
-        return [
-          viewportX - this.state.offsetLeft,
-          viewportY - this.state.offsetTop,
-        ];
+        return [viewportX, viewportY];
      },
      onChange: withBatchedUpdates((text) => {
        updateElement(text);
@@ -1618,7 +1560,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
          editingElement: null,
        });
        if (this.state.elementLocked) {
-          setCursorForShape(this.canvas, this.state.elementType);
+          setCursorForShape(this.state.elementType);
        }
      }),
      element,
@@ -1799,7 +1741,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      return;
    }

-    resetCursor(this.canvas);
+    resetCursor();

    const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords(
      event,
@@ -1831,7 +1773,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      }
    }

-    resetCursor(this.canvas);
+    resetCursor();

    if (!event[KEYS.CTRL_OR_CMD]) {
      this.startTextEditing({
@@ -1897,9 +1839,9 @@ class App extends React.Component<ExcalidrawProps, AppState> {
    const isOverScrollBar = isPointerOverScrollBars.isOverEither;
    if (!this.state.draggingElement && !this.state.multiElement) {
      if (isOverScrollBar) {
-        resetCursor(this.canvas);
+        resetCursor();
      } else {
-        setCursorForShape(this.canvas, this.state.elementType);
+        setCursorForShape(this.state.elementType);
      }
    }

@@ -1950,7 +1892,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      const { points, lastCommittedPoint } = multiElement;
      const lastPoint = points[points.length - 1];

-      setCursorForShape(this.canvas, this.state.elementType);
+      setCursorForShape(this.state.elementType);

      if (lastPoint === lastCommittedPoint) {
        // if we haven't yet created a temp point and we're beyond commit-zone
@@ -1967,7 +1909,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
            points: [...points, [scenePointerX - rx, scenePointerY - ry]],
          });
        } else {
-          setCursor(this.canvas, CURSOR_TYPE.POINTER);
+          document.documentElement.style.cursor = CURSOR_TYPE.POINTER;
          // in this branch, we're inside the commit zone, and no uncommitted
          // point exists. Thus do nothing (don't add/remove points).
        }
@@ -1981,13 +1923,13 @@ class App extends React.Component<ExcalidrawProps, AppState> {
          lastCommittedPoint[1],
        ) < LINE_CONFIRM_THRESHOLD
      ) {
-        setCursor(this.canvas, CURSOR_TYPE.POINTER);
+        document.documentElement.style.cursor = CURSOR_TYPE.POINTER;
        mutateElement(multiElement, {
          points: points.slice(0, -1),
        });
      } else {
-        if (isPathALoop(points, this.state.zoom.value)) {
-          setCursor(this.canvas, CURSOR_TYPE.POINTER);
+        if (isPathALoop(points)) {
+          document.documentElement.style.cursor = CURSOR_TYPE.POINTER;
        }
        // update last uncommitted point
        mutateElement(multiElement, {
@@ -2030,9 +1972,8 @@ class App extends React.Component<ExcalidrawProps, AppState> {
        elementWithTransformHandleType &&
        elementWithTransformHandleType.transformHandleType
      ) {
-        setCursor(
-          this.canvas,
-          getCursorForResizingElement(elementWithTransformHandleType),
+        document.documentElement.style.cursor = getCursorForResizingElement(
+          elementWithTransformHandleType,
        );
        return;
      }
@@ -2045,12 +1986,9 @@ class App extends React.Component<ExcalidrawProps, AppState> {
        event.pointerType,
      );
      if (transformHandleType) {
-        setCursor(
-          this.canvas,
-          getCursorForResizingElement({
-            transformHandleType,
-          }),
-        );
+        document.documentElement.style.cursor = getCursorForResizingElement({
+          transformHandleType,
+        });
        return;
      }
    }
@@ -2060,12 +1998,11 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      scenePointer.y,
    );
    if (this.state.elementType === "text") {
-      setCursor(
-        this.canvas,
-        isTextElement(hitElement) ? CURSOR_TYPE.TEXT : CURSOR_TYPE.CROSSHAIR,
-      );
+      document.documentElement.style.cursor = isTextElement(hitElement)
+        ? CURSOR_TYPE.TEXT
+        : CURSOR_TYPE.CROSSHAIR;
    } else if (isOverScrollBar) {
-      setCursor(this.canvas, CURSOR_TYPE.AUTO);
+      document.documentElement.style.cursor = CURSOR_TYPE.AUTO;
    } else if (
      hitElement ||
      this.isHittingCommonBoundingBoxOfSelectedElements(
@@ -2073,9 +2010,9 @@ class App extends React.Component<ExcalidrawProps, AppState> {
        selectedElements,
      )
    ) {
-      setCursor(this.canvas, CURSOR_TYPE.MOVE);
+      document.documentElement.style.cursor = CURSOR_TYPE.MOVE;
    } else {
-      setCursor(this.canvas, CURSOR_TYPE.AUTO);
+      document.documentElement.style.cursor = CURSOR_TYPE.AUTO;
    }
  };

@@ -2248,7 +2185,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
    let nextPastePrevented = false;
    const isLinux = /Linux/.test(window.navigator.platform);

-    setCursor(this.canvas, CURSOR_TYPE.GRABBING);
+    document.documentElement.style.cursor = CURSOR_TYPE.GRABBING;
    let { clientX: lastX, clientY: lastY } = event;
    const onPointerMove = withBatchedUpdates((event: PointerEvent) => {
      const deltaX = lastX - event.clientX;
@@ -2300,7 +2237,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
        lastPointerUp = null;
        isPanning = false;
        if (!isHoldingSpace) {
-          setCursorForShape(this.canvas, this.state.elementType);
+          setCursorForShape(this.state.elementType);
        }
        this.setState({
          cursorButton: "up",
@@ -2416,7 +2353,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {

    const onPointerUp = withBatchedUpdates(() => {
      isDraggingScrollBar = false;
-      setCursorForShape(this.canvas, this.state.elementType);
+      setCursorForShape(this.state.elementType);
      lastPointerUp = null;
      this.setState({
        cursorButton: "up",
@@ -2479,12 +2416,9 @@ class App extends React.Component<ExcalidrawProps, AppState> {
        );
      }
      if (pointerDownState.resize.handleType) {
-        setCursor(
-          this.canvas,
-          getCursorForResizingElement({
-            transformHandleType: pointerDownState.resize.handleType,
-          }),
-        );
+        document.documentElement.style.cursor = getCursorForResizingElement({
+          transformHandleType: pointerDownState.resize.handleType,
+        });
        pointerDownState.resize.isResizing = true;
        pointerDownState.resize.offset = tupleToCoors(
          getResizeOffsetXY(
@@ -2649,7 +2583,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      insertAtParentCenter: !event.altKey,
    });

-    resetCursor(this.canvas);
+    resetCursor();
    if (!this.state.elementLocked) {
      this.setState({
        elementType: "selection",
@@ -2666,10 +2600,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      const { multiElement } = this.state;

      // finalize if completing a loop
-      if (
-        multiElement.type === "line" &&
-        isPathALoop(multiElement.points, this.state.zoom.value)
-      ) {
+      if (multiElement.type === "line" && isPathALoop(multiElement.points)) {
        mutateElement(multiElement, {
          lastCommittedPoint:
            multiElement.points[multiElement.points.length - 1],
@@ -2706,7 +2637,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      mutateElement(multiElement, {
        lastCommittedPoint: multiElement.points[multiElement.points.length - 1],
      });
-      setCursor(this.canvas, CURSOR_TYPE.POINTER);
+      document.documentElement.style.cursor = CURSOR_TYPE.POINTER;
    } else {
      const [gridX, gridY] = getGridPoint(
        pointerDownState.origin.x,
@@ -3241,7 +3172,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
          }
          this.setState({ suggestedBindings: [], startBoundElement: null });
          if (!elementLocked && elementType !== "draw") {
-            resetCursor(this.canvas);
+            resetCursor();
            this.setState((prevState) => ({
              draggingElement: null,
              elementType: "selection",
@@ -3412,7 +3343,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      }

      if (!elementLocked && elementType !== "draw") {
-        resetCursor(this.canvas);
+        resetCursor();
        this.setState({
          draggingElement: null,
          suggestedBindings: [],
@@ -3522,11 +3453,40 @@ class App extends React.Component<ExcalidrawProps, AppState> {
    }
  };

+  private handleCanvasImageDrop = async (
+    event: React.DragEvent<HTMLCanvasElement>,
+    file: File,
+  ) => {
+    try {
+      const shapes = await (
+        await import(
+          /* webpackChunkName: "pixelated-image" */ "../data/pixelated-image"
+        )
+      ).pixelateImage(file, 20, 1200, event.clientX, event.clientY);
+
+      const nextElements = [
+        ...this.scene.getElementsIncludingDeleted(),
+        ...shapes,
+      ];
+
+      this.scene.replaceAllElements(nextElements);
+    } catch (error) {
+      return this.setState({
+        isLoading: false,
+        errorMessage: error.message,
+      });
+    }
+  };
+
  private handleCanvasOnDrop = async (
    event: React.DragEvent<HTMLCanvasElement>,
  ) => {
+    let imageFile: File | null = null;
    try {
      const file = event.dataTransfer.files[0];
+      if (file?.type.indexOf("image/") === 0) {
+        imageFile = file;
+      }
      if (file?.type === "image/png" || file?.type === "image/svg+xml") {
        const { elements, appState } = await loadFromBlob(file, this.state);
        this.syncActionResult({
@@ -3538,8 +3498,13 @@ class App extends React.Component<ExcalidrawProps, AppState> {
          commitToHistory: true,
        });
        return;
+      } else if (imageFile) {
+        return await this.handleCanvasImageDrop(event, imageFile);
      }
    } catch (error) {
+      if (imageFile) {
+        return await this.handleCanvasImageDrop(event, imageFile);
+      }
      return this.setState({
        isLoading: false,
        errorMessage: error.message,
@@ -3570,6 +3535,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
          // This will only work as of Chrome 86,
          // but can be safely ignored on older releases.
          const item = event.dataTransfer.items[0];
+          // TODO: Make this part of `AppState`.
          (file as any).handle = await (item as any).getAsFileSystemHandle();
        } catch (error) {
          console.warn(error.name, error.message);
@@ -3739,16 +3705,15 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      options.push(actionCopyAsSvg);
    }
    if (!element) {
-      const viewModeOptions = [
+      const viewModeOptions: ContextMenuOption[] = [
        ...options,
-        typeof this.props.gridModeEnabled === "undefined" &&
-          actionToggleGridMode,
-        typeof this.props.zenModeEnabled === "undefined" && actionToggleZenMode,
-        typeof this.props.viewModeEnabled === "undefined" &&
-          actionToggleViewMode,
        actionToggleStats,
      ];

+      if (typeof this.props.viewModeEnabled === "undefined") {
+        viewModeOptions.push(actionToggleViewMode);
+      }
+
      ContextMenu.push({
        options: viewModeOptions,
        top: clientY,
@@ -3786,10 +3751,8 @@ class App extends React.Component<ExcalidrawProps, AppState> {
            separator,
          actionSelectAll,
          separator,
-          typeof this.props.gridModeEnabled === "undefined" &&
-            actionToggleGridMode,
-          typeof this.props.zenModeEnabled === "undefined" &&
-            actionToggleZenMode,
+          actionToggleGridMode,
+          actionToggleZenMode,
          typeof this.props.viewModeEnabled === "undefined" &&
            actionToggleViewMode,
          actionToggleStats,
--- a/src/components/CollabButton.scss
+++ b/src/components/CollabButton.scss
@@ -2,10 +2,9 @@

 .excalidraw {
  .CollabButton.is-collaborating {
-    background-color: var(--button-special-active-bg-color);
+    background-color: var(--button-special-active-background-color);

-    .ToolIcon__icon svg,
-    .ToolIcon__label {
+    .ToolIcon__icon svg {
      color: var(--icon-green-fill-color);
    }
  }
--- a/src/components/CollabButton.tsx
+++ b/src/components/CollabButton.tsx
@@ -25,8 +25,8 @@ const CollabButton = ({
        onClick={onClick}
        icon={users}
        type="button"
-        title={t("labels.liveCollaboration")}
-        aria-label={t("labels.liveCollaboration")}
+        title={t("buttons.roomDialog")}
+        aria-label={t("buttons.roomDialog")}
        showAriaLabel={useIsMobile()}
      >
        {collaboratorCount > 0 && (
--- a/src/components/ColorPicker.scss
+++ b/src/components/ColorPicker.scss
@@ -2,9 +2,9 @@

 .excalidraw {
  .color-picker {
-    background: var(--popup-bg-color);
-    border: 0 solid transparentize($oc-white, 0.75);
-    box-shadow: transparentize($oc-black, 0.75) 0 1px 4px;
+    background: var(--popup-background-color);
+    border: 0px solid transparentize($oc-white, 0.75);
+    box-shadow: transparentize($oc-black, 0.75) 0px 1px 4px;
    border-radius: 4px;
    position: absolute;

@@ -24,11 +24,11 @@
  }

  .color-picker-triangle {
-    width: 0;
-    height: 0;
+    width: 0px;
+    height: 0px;
    border-style: solid;
-    border-width: 0 9px 10px;
-    border-color: transparent transparent var(--popup-bg-color);
+    border-width: 0px 9px 10px;
+    border-color: transparent transparent var(--popup-background-color);
    position: absolute;
    top: -10px;

@@ -84,12 +84,12 @@

  .color-picker-transparent {
    border-radius: 4px;
-    box-shadow: transparentize($oc-black, 0.9) 0 0 0 1px inset;
+    box-shadow: transparentize($oc-black, 0.9) 0px 0px 0px 1px inset;
    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
  }

  .color-picker-transparent,
@@ -104,11 +104,11 @@
    width: 1.875rem;

    :root[dir="ltr"] & {
-      border-radius: 4px 0 0 4px;
+      border-radius: 4px 0px 0px 4px;
    }

    :root[dir="rtl"] & {
-      border-radius: 0 4px 4px 0;
+      border-radius: 0px 4px 4px 0px;
    }

    color: var(--input-label-color);
@@ -144,7 +144,7 @@
  }

  .color-input-container:focus-within .color-picker-hash::after {
-    background: var(--input-bg-color);
+    background: var(--input-background-color);

    :root[dir="ltr"] & {
      right: -2px;
@@ -163,19 +163,19 @@
    width: 12ch; /* length of `transparent` + 1 */
    margin: 0;
    font-size: 1rem;
-    background-color: var(--input-bg-color);
-    color: var(--text-primary-color);
-    border: 0;
+    background-color: var(--input-background-color);
+    color: var(--text-color-primary);
+    border: 0px;
    outline: none;
    height: 1.75em;
-    box-shadow: var(--input-border-color) 0 0 0 1px inset;
+    box-shadow: var(--input-border-color) 0px 0px 0px 1px inset;

    :root[dir="ltr"] & {
-      border-radius: 0 4px 4px 0;
+      border-radius: 0px 4px 4px 0px;
    }

    :root[dir="rtl"] & {
-      border-radius: 4px 0 0 4px;
+      border-radius: 4px 0px 0px 4px;
    }

    float: left;
@@ -228,7 +228,7 @@
  }

  .color-picker-type-elementBackground .color-picker-keybinding {
-    color: $oc-white;
+    color: #fff;
  }

  .color-picker-swatch[aria-label="transparent"] .color-picker-keybinding {
@@ -241,10 +241,10 @@

  &.Appearance_dark {
    .color-picker-type-elementBackground .color-picker-keybinding {
-      color: $oc-black;
+      color: #000;
    }
    .color-picker-swatch[aria-label="transparent"] .color-picker-keybinding {
-      color: $oc-black;
+      color: #000;
    }
  }
 }
--- a/src/components/ContextMenu.scss
+++ b/src/components/ContextMenu.scss
@@ -4,13 +4,13 @@
  .context-menu {
    position: relative;
    border-radius: 4px;
-    box-shadow: 0 3px 10px transparentize($oc-black, 0.8);
+    box-shadow: 0px 3px 10px transparentize($oc-black, 0.8);
    padding: 0;
    list-style: none;
    user-select: none;
    margin: -0.25rem 0 0 0.125rem;
    padding: 0.5rem 0;
-    background-color: var(--popup-secondary-bg-color);
+    background-color: var(--popup-secondary-background-color);
    border: 1px solid var(--button-gray-3);
    cursor: default;
  }
@@ -61,12 +61,12 @@
  }

  .context-menu-option:hover {
-    color: var(--popup-bg-color);
+    color: var(--popup-background-color);
    background-color: var(--select-highlight-color);

    &.dangerous {
      .context-menu-option__label {
-        color: var(--popup-bg-color);
+        color: var(--popup-background-color);
      }
      background-color: $oc-red-6;
    }
--- a/src/components/DarkModeToggle.tsx
+++ b/src/components/DarkModeToggle.tsx
@@ -10,18 +10,13 @@ export type Appearence = "light" | "dark";
 export const DarkModeToggle = (props: {
  value: Appearence;
  onChange: (value: Appearence) => void;
-  title?: string;
 }) => {
-  const title = props.title
-    ? props.title
-    : props.value === "dark"
-    ? t("buttons.lightMode")
-    : t("buttons.darkMode");
-
  return (
    <label
      className={`ToolIcon ToolIcon_type_floating ToolIcon_size_M`}
-      title={title}
+      title={
+        props.value === "dark" ? t("buttons.lightMode") : t("buttons.darkMode")
+      }
    >
      <input
        className="ToolIcon_type_checkbox ToolIcon_toggle_opaque"
@@ -30,7 +25,11 @@ export const DarkModeToggle = (props: {
          props.onChange(event.target.checked ? "dark" : "light")
        }
        checked={props.value === "dark"}
-        aria-label={title}
+        aria-label={
+          props.value === "dark"
+            ? t("buttons.lightMode")
+            : t("buttons.darkMode")
+        }
      />
      <div className="ToolIcon__icon">
        {props.value === "light" ? ICONS.MOON : ICONS.SUN}
--- a/src/components/Dialog.scss
+++ b/src/components/Dialog.scss
@@ -45,7 +45,7 @@
      position: sticky;
      top: 0;
      padding: calc(var(--space-factor) * 2);
-      background: var(--island-bg-color);
+      background: var(--bg-color-island);
      font-size: 1.25em;

      box-sizing: border-box;
--- a/src/components/ExportDialog.tsx
+++ b/src/components/ExportDialog.tsx
@@ -19,9 +19,6 @@ import { ToolButton } from "./ToolButton";
 const scales = [1, 2, 3];
 const defaultScale = scales.includes(devicePixelRatio) ? devicePixelRatio : 1;

-const supportsContextFilters =
-  "filter" in document.createElement("canvas").getContext("2d")!;
-
 export const ErrorCanvasPreview = () => {
  return (
    <div>
@@ -131,8 +128,6 @@ const ExportModal = ({
  return (
    <div className="ExportDialog">
      <div className="ExportDialog__preview" ref={previewRef} />
-      {supportsContextFilters &&
-        actionManager.renderAction("exportWithDarkMode")}
      <Stack.Col gap={2} align="center">
        <div className="ExportDialog__actions">
          <Stack.Row gap={2}>
--- a/src/components/HelpDialog.tsx
+++ b/src/components/HelpDialog.tsx
@@ -224,7 +224,7 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                  shortcuts={[getShortcutKey("Alt+Z")]}
                />
                <Shortcut
-                  label={t("labels.showGrid")}
+                  label={t("labels.gridMode")}
                  shortcuts={[getShortcutKey("CtrlOrCmd+'")]}
                />
                <Shortcut
--- a/src/components/HintViewer.scss
+++ b/src/components/HintViewer.scss
@@ -26,7 +26,7 @@ $wide-viewport-width: 1000px;

    > span {
      padding: 0.2rem 0.4rem;
-      background-color: var(--overlay-bg-color);
+      background-color: var(--overlay-background-color);
      border-radius: 4px;
    }
  }
--- a/src/components/IconPicker.scss
+++ b/src/components/IconPicker.scss
@@ -8,9 +8,9 @@
  }

  .picker {
-    background: var(--popup-bg-color);
-    border: 0 solid transparentize($oc-white, 0.75);
-    box-shadow: transparentize($oc-black, 0.75) 0 1px 4px;
+    background: var(--popup-background-color);
+    border: 0px solid transparentize($oc-white, 0.75);
+    box-shadow: transparentize($oc-black, 0.75) 0px 1px 4px;
    border-radius: 4px;
    position: absolute;
  }
@@ -56,8 +56,8 @@
  }

  .picker-triangle {
-    width: 0;
-    height: 0;
+    width: 0px;
+    height: 0px;
    position: relative;
    top: -10px;
    :root[dir="ltr"] & {
@@ -73,7 +73,7 @@
      content: "";
      position: absolute;
      border-style: solid;
-      border-width: 0 9px 10px;
+      border-width: 0px 9px 10px;
      border-color: transparent transparent transparentize($oc-black, 0.9);
      top: -1px;
    }
@@ -82,8 +82,8 @@
      content: "";
      position: absolute;
      border-style: solid;
-      border-width: 0 9px 10px;
-      border-color: transparent transparent var(--popup-bg-color);
+      border-width: 0px 9px 10px;
+      border-color: transparent transparent var(--popup-background-color);
    }
  }

@@ -121,7 +121,7 @@
  }

  .picker-type-elementBackground .picker-keybinding {
-    color: $oc-white;
+    color: #fff;
  }

  .picker-swatch[aria-label="transparent"] .picker-keybinding {
@@ -134,10 +134,10 @@

  &.Appearance_dark {
    .picker-type-elementBackground .picker-keybinding {
-      color: $oc-black;
+      color: #000;
    }
    .picker-swatch[aria-label="transparent"] .picker-keybinding {
-      color: $oc-black;
+      color: #000;
    }
  }
 }
--- a/src/components/InitializeApp.tsx
+++ b/src/components/InitializeApp.tsx
@@ -1,7 +1,12 @@
 import React from "react";

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

 interface Props {
  langCode: Language["code"];
@@ -18,7 +23,7 @@ export class InitializeApp extends React.Component<Props, State> {
    const currentLang =
      languages.find((lang) => lang.code === this.props.langCode) ||
      defaultLang;
-    await setLanguage(currentLang);
+    await setLanguageFirstTime(currentLang);
    this.setState({
      isLoading: false,
    });
--- a/src/components/Island.scss
+++ b/src/components/Island.scss
@@ -1,7 +1,7 @@
 .excalidraw {
  .Island {
    --padding: 0;
-    background-color: var(--island-bg-color);
+    background-color: var(--bg-color-island);
    backdrop-filter: saturate(100%) blur(10px);
    box-shadow: var(--shadow-island);
    border-radius: 4px;
--- a/src/components/LayerUI.scss
+++ b/src/components/LayerUI.scss
@@ -19,9 +19,9 @@
      }

      a {
-        margin-inline-start: auto;
+        margin-left: auto;
        // 17px for scrollbar (needed for overlay scrollbars on Big Sur?) + 1px extra
-        padding-inline-end: 18px;
+        padding-right: 18px;
        white-space: nowrap;
      }
    }
@@ -73,7 +73,7 @@
    &__footer {
      position: absolute;
      z-index: 100;
-      bottom: 0;
+      bottom: 0px;

      :root[dir="ltr"] & {
        right: 0;
@@ -94,7 +94,7 @@
      }

      :root[dir="ltr"] &.transition-right {
-        transform: translate(999px, 0);
+        transform: translate(999px, 0px);
      }

      :root[dir="rtl"] &.transition-left {
--- a/src/components/LayerUI.tsx
+++ b/src/components/LayerUI.tsx
@@ -27,7 +27,7 @@ import { ExportCB, ExportDialog } from "./ExportDialog";
 import { FixedSideContainer } from "./FixedSideContainer";
 import { GitHubCorner } from "./GitHubCorner";
 import { HintViewer } from "./HintViewer";
-import { exportFile, load, shield, trash } from "./icons";
+import { exportFile, load, shield } from "./icons";
 import { Island } from "./Island";
 import "./LayerUI.scss";
 import { LibraryUnit } from "./LibraryUnit";
@@ -52,7 +52,6 @@ interface LayerUIProps {
  onLockToggle: () => void;
  onInsertElements: (elements: readonly NonDeletedExcalidrawElement[]) => void;
  zenModeEnabled: boolean;
-  showExitZenModeBtn: boolean;
  toggleZenMode: () => void;
  langCode: Language["code"];
  isCollaborating: boolean;
@@ -100,7 +99,6 @@ const LibraryMenuItems = ({
  onInsertShape,
  pendingElements,
  setAppState,
-  setLibraryItems,
 }: {
  library: LibraryItems;
  pendingElements: LibraryItem;
@@ -108,7 +106,6 @@ const LibraryMenuItems = ({
  onInsertShape: (elements: LibraryItem) => void;
  onAddToLibrary: (elements: LibraryItem) => void;
  setAppState: React.Component<any, AppState>["setState"];
-  setLibraryItems: (library: LibraryItems) => void;
 }) => {
  const isMobile = useIsMobile();
  const numCells = library.length + (pendingElements.length > 0 ? 1 : 0);
@@ -152,19 +149,6 @@ const LibraryMenuItems = ({
            });
        }}
      />
-      <ToolButton
-        key="reset"
-        type="button"
-        title={t("buttons.resetLibrary")}
-        aria-label={t("buttons.resetLibrary")}
-        icon={trash}
-        onClick={() => {
-          if (window.confirm(t("alerts.resetLibrary"))) {
-            Library.resetLibrary();
-            setLibraryItems([]);
-          }
-        }}
-      />

      <a href="https://libraries.excalidraw.com" target="_excalidraw_libraries">
        {t("labels.libraries")}
@@ -296,7 +280,6 @@ const LibraryMenu = ({
          onInsertShape={onInsertShape}
          pendingElements={pendingElements}
          setAppState={setAppState}
-          setLibraryItems={setLibraryItems}
        />
      )}
    </Island>
@@ -313,7 +296,6 @@ const LayerUI = ({
  onLockToggle,
  onInsertElements,
  zenModeEnabled,
-  showExitZenModeBtn,
  toggleZenMode,
  isCollaborating,
  onExportToBackend,
@@ -442,15 +424,7 @@ const LayerUI = ({
        "transition-left": zenModeEnabled,
      })}
    >
-      <Island
-        className={CLASSES.SHAPE_ACTIONS_MENU}
-        padding={2}
-        style={{
-          // we want to make sure this doesn't overflow so substracting 200
-          // which is approximately height of zoom footer and top left menu items with some buffer
-          maxHeight: `${appState.height - 200}px`,
-        }}
-      >
+      <Island className={CLASSES.SHAPE_ACTIONS_MENU} padding={2}>
        <SelectedShapeActions
          appState={appState}
          elements={elements}
@@ -516,7 +490,6 @@ const LayerUI = ({
                      {heading}
                      <Stack.Row gap={1}>
                        <ShapesSwitcher
-                          canvas={canvas}
                          elementType={appState.elementType}
                          setAppState={setAppState}
                          isLibraryOpen={appState.isLibraryOpen}
@@ -540,18 +513,17 @@ const LayerUI = ({
              "transition-right": zenModeEnabled,
            })}
          >
-            {appState.collaborators.size > 0 &&
-              Array.from(appState.collaborators)
-                // Collaborator is either not initialized or is actually the current user.
-                .filter(([_, client]) => Object.keys(client).length !== 0)
-                .map(([clientId, client]) => (
-                  <Tooltip
-                    label={client.username || "Unknown user"}
-                    key={clientId}
-                  >
-                    {actionManager.renderAction("goToCollaborator", clientId)}
-                  </Tooltip>
-                ))}
+            {Array.from(appState.collaborators)
+              // Collaborator is either not initialized or is actually the current user.
+              .filter(([_, client]) => Object.keys(client).length !== 0)
+              .map(([clientId, client]) => (
+                <Tooltip
+                  label={client.username || "Unknown user"}
+                  key={clientId}
+                >
+                  {actionManager.renderAction("goToCollaborator", clientId)}
+                </Tooltip>
+              ))}
          </UserList>
        </div>
      </FixedSideContainer>
@@ -606,12 +578,24 @@ const LayerUI = ({
      </div>
      <button
        className={clsx("disable-zen-mode", {
-          "disable-zen-mode--visible": showExitZenModeBtn,
+          "disable-zen-mode--visible": zenModeEnabled,
        })}
        onClick={toggleZenMode}
      >
        {t("buttons.exitZenMode")}
      </button>
+      {appState.scrolledOutside && (
+        <button
+          className="scroll-back-to-content"
+          onClick={() => {
+            setAppState({
+              ...calculateScrollCenter(elements, appState, canvas),
+            });
+          }}
+        >
+          {t("buttons.scrollBackToContent")}
+        </button>
+      )}
    </footer>
  );

@@ -674,18 +658,6 @@ const LayerUI = ({
      {renderBottomAppMenu()}
      {renderGitHubCorner()}
      {renderFooter()}
-      {appState.scrolledOutside && (
-        <button
-          className="scroll-back-to-content"
-          onClick={() => {
-            setAppState({
-              ...calculateScrollCenter(elements, appState, canvas),
-            });
-          }}
-        >
-          {t("buttons.scrollBackToContent")}
-        </button>
-      )}
    </div>
  );
 };
@@ -704,7 +676,6 @@ const areEqual = (prev: LayerUIProps, next: LayerUIProps) => {

  const keys = Object.keys(prevAppState) as (keyof Partial<AppState>)[];
  return (
-    prev.renderCustomFooter === next.renderCustomFooter &&
    prev.langCode === next.langCode &&
    prev.elements === next.elements &&
    keys.every((key) => prevAppState[key] === nextAppState[key])
--- a/src/components/MobileMenu.tsx
+++ b/src/components/MobileMenu.tsx
@@ -57,7 +57,6 @@ export const MobileMenu = ({
                  {heading}
                  <Stack.Row gap={1}>
                    <ShapesSwitcher
-                      canvas={canvas}
                      elementType={appState.elementType}
                      setAppState={setAppState}
                      isLibraryOpen={appState.isLibraryOpen}
@@ -153,26 +152,24 @@ export const MobileMenu = ({
                <Stack.Col gap={4}>
                  {renderCanvasActions()}
                  {renderCustomFooter?.(true)}
-                  {appState.collaborators.size > 0 && (
-                    <fieldset>
-                      <legend>{t("labels.collaborators")}</legend>
-                      <UserList mobile>
-                        {Array.from(appState.collaborators)
-                          // Collaborator is either not initialized or is actually the current user.
-                          .filter(
-                            ([_, client]) => Object.keys(client).length !== 0,
-                          )
-                          .map(([clientId, client]) => (
-                            <React.Fragment key={clientId}>
-                              {actionManager.renderAction(
-                                "goToCollaborator",
-                                clientId,
-                              )}
-                            </React.Fragment>
-                          ))}
-                      </UserList>
-                    </fieldset>
-                  )}
+                  <fieldset>
+                    <legend>{t("labels.collaborators")}</legend>
+                    <UserList mobile>
+                      {Array.from(appState.collaborators)
+                        // Collaborator is either not initialized or is actually the current user.
+                        .filter(
+                          ([_, client]) => Object.keys(client).length !== 0,
+                        )
+                        .map(([clientId, client]) => (
+                          <React.Fragment key={clientId}>
+                            {actionManager.renderAction(
+                              "goToCollaborator",
+                              clientId,
+                            )}
+                          </React.Fragment>
+                        ))}
+                    </UserList>
+                  </fieldset>
                </Stack.Col>
              </div>
            </Section>
--- a/src/components/Modal.scss
+++ b/src/components/Modal.scss
@@ -1,13 +1,8 @@
@import "../css/variables.module";

 .excalidraw {
-  &.excalidraw-modal-container {
-    position: absolute;
-    z-index: 10;
-  }
-
  .Modal {
-    position: absolute;
+    position: fixed;
    top: 0;
    left: 0;
    right: 0;
@@ -20,7 +15,7 @@
  }

  .Modal__background {
-    position: absolute;
+    position: fixed;
    top: 0;
    left: 0;
    right: 0;
@@ -44,10 +39,10 @@
    overflow-y: auto;

    // for modals, reset blurry bg
-    background: var(--island-bg-color);
+    background: var(--bg-color-island);
    backdrop-filter: none;

-    border: 1px solid var(--dialog-border-color);
+    border: 1px solid var(--dialog-border);
    box-shadow: 0 2px 10px transparentize($oc-black, 0.75);
    border-radius: 6px;

@@ -87,7 +82,7 @@
    }

    .Modal__content {
-      position: absolute;
+      position: fixed;
      top: 0;
      left: 0;
      right: 0;
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -54,7 +54,7 @@ const useBodyRoot = () => {
      ?.classList.contains("Appearance_dark");
    const div = document.createElement("div");

-    div.classList.add("excalidraw", "excalidraw-modal-container");
+    div.classList.add("excalidraw");

    if (isDarkTheme) {
      div.classList.add("Appearance_dark");
--- a/src/components/Popover.scss
+++ b/src/components/Popover.scss
@@ -1,6 +1,14 @@
 .excalidraw {
  .popover {
-    position: fixed;
+    position: absolute;
    z-index: 10;
  }
+
+  .popover .cover {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
 }
--- a/src/components/Stats.scss
+++ b/src/components/Stats.scss
@@ -1,53 +1,51 @@
@import "../css/variables.module";

-.excalidraw {
-  .Stats {
-    position: absolute;
-    top: 64px;
-    right: 12px;
-    font-size: 12px;
-    z-index: 999;
+.Stats {
+  position: fixed;
+  top: 64px;
+  right: 12px;
+  font-size: 12px;
+  z-index: 999;

-    h3 {
-      margin: 0 24px 8px 0;
-      white-space: nowrap;
-    }
+  h3 {
+    margin: 0 24px 8px 0;
+    white-space: nowrap;
+  }

-    .close {
-      float: right;
-      height: 16px;
-      width: 16px;
-      cursor: pointer;
-      svg {
-        width: 100%;
-        height: 100%;
-      }
-    }
-
-    table {
+  .close {
+    float: right;
+    height: 16px;
+    width: 16px;
+    cursor: pointer;
+    svg {
      width: 100%;
-      th {
-        border-bottom: 1px solid var(--input-border-color);
-        padding: 4px;
-      }
-      tr {
-        td:nth-child(2) {
-          min-width: 24px;
-          text-align: right;
-        }
-      }
+      height: 100%;
    }
+  }

-    :root[dir="rtl"] & {
-      left: 12px;
-      right: initial;
-
-      h3 {
-        margin: 0 0 8px 24px;
-      }
-      .close {
-        float: left;
+  table {
+    width: 100%;
+    th {
+      border-bottom: 1px solid var(--input-border-color);
+      padding: 4px;
+    }
+    tr {
+      td:nth-child(2) {
+        min-width: 24px;
+        text-align: right;
      }
    }
  }
+
+  :root[dir="rtl"] & {
+    left: 12px;
+    right: initial;
+
+    h3 {
+      margin: 0 0 8px 24px;
+    }
+    .close {
+      float: left;
+    }
+  }
 }
--- a/src/components/TextInput.scss
+++ b/src/components/TextInput.scss
@@ -2,18 +2,18 @@

 .excalidraw {
  .TextInput {
-    color: var(--text-primary-color);
+    color: var(--text-color-primary);
    display: inline-block;
    border: 1.5px solid var(--button-gray-1);
    line-height: 1;
    padding: 0.75rem;
    white-space: nowrap;
    border-radius: var(--space-factor);
-    background-color: var(--input-bg-color);
+    background-color: var(--input-background-color);

    &:not(:focus) {
      &:hover {
-        background-color: var(--input-hover-bg-color);
+        background-color: var(--input-hover-background-color);
      }
    }

--- a/src/components/Toast.scss
+++ b/src/components/Toast.scss
@@ -11,7 +11,7 @@
    left: 50%;
    margin-left: -150px;
    padding: 4px 0;
-    position: absolute;
+    position: fixed;
    text-align: center;
    width: 300px;
    z-index: 999999;
@@ -19,7 +19,6 @@

  .Toast__message {
    color: var(--popup-text-color);
-    white-space: pre-wrap;
  }

  @keyframes fade-in {
--- a/src/components/TopErrorBoundary.tsx
+++ b/src/components/TopErrorBoundary.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import * as Sentry from "@sentry/browser";
+import { resetCursor } from "../utils";
 import { t } from "../i18n";

 interface TopErrorBoundaryState {
@@ -23,6 +24,7 @@ export class TopErrorBoundary extends React.Component<
  }

  componentDidCatch(error: Error, errorInfo: any) {
+    resetCursor();
    const _localStorage: any = {};
    for (const [key, value] of Object.entries({ ...localStorage })) {
      try {
--- a/src/components/icons.tsx
+++ b/src/components/icons.tsx
@@ -113,16 +113,6 @@ export const questionCircle = createIcon(
  { mirror: true },
 );

-export const share = createIcon(
-  "M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z",
-  { width: 24, height: 24 },
-);
-
-export const shareIOS = createIcon(
-  "M16 5l-1.42 1.42-1.59-1.59V16h-1.98V4.83L9.42 6.42 8 5l4-4 4 4zm4 5v11c0 1.1-.9 2-2 2H6c-1.11 0-2-.9-2-2V10c0-1.11.89-2 2-2h3v2H6v11h12V10h-3V8h3c1.1 0 2 .89 2 2z",
-  { width: 24, height: 24 },
-);
-
 // Icon imported form Storybook
 // Storybook is licensed under MIT https://github.com/storybookjs/storybook/blob/next/LICENSE
 export const resetZoom = createIcon(
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,10 +1,9 @@
 import { FontFamily } from "./element/types";
-import cssVariables from "./css/variables.module.scss";

 export const APP_NAME = "Excalidraw";

-export const DRAGGING_THRESHOLD = 10; // px
-export const LINE_CONFIRM_THRESHOLD = 8; // px
+export const DRAGGING_THRESHOLD = 10; // 10px
+export const LINE_CONFIRM_THRESHOLD = 10; // 10px
 export const ELEMENT_SHIFT_TRANSLATE_AMOUNT = 5;
 export const ELEMENT_TRANSLATE_AMOUNT = 1;
 export const TEXT_TO_CENTER_SNAP_THRESHOLD = 30;
@@ -48,7 +47,6 @@ export enum EVENT {
  TOUCH_END = "touchend",
  HASHCHANGE = "hashchange",
  VISIBILITY_CHANGE = "visibilitychange",
-  SCROLL = "scroll",
 }

 export const ENV = {
@@ -94,7 +92,6 @@ export const TOUCH_CTX_MENU_TIMEOUT = 500;
 export const TITLE_TIMEOUT = 10000;
 export const TOAST_TIMEOUT = 5000;
 export const VERSION_TIMEOUT = 30000;
-export const SCROLL_TIMEOUT = 100;

 export const ZOOM_STEP = 0.1;

@@ -102,11 +99,3 @@ export const ZOOM_STEP = 0.1;
 export const IDLE_THRESHOLD = 60_000;
 // Report a user active each ACTIVE_THRESHOLD milliseconds
 export const ACTIVE_THRESHOLD = 3_000;
-
-export const MODES = {
-  VIEW: "viewMode",
-  ZEN: "zenMode",
-  GRID: "gridMode",
-};
-
-export const APPEARANCE_FILTER = cssVariables.appearanceFilter;
--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@@ -8,10 +8,9 @@
 }

 .excalidraw {
-  position: relative;
-  overflow: hidden;
-  color: var(--text-primary-color);
+  color: var(--text-color-primary);
  display: flex;
+  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
@@ -52,10 +51,10 @@
  }

  .FixedSideContainer {
-    padding-top: var(--sat, 0);
-    padding-right: var(--sar, 0);
-    padding-bottom: var(--sab, 0);
-    padding-left: var(--sal, 0);
+    padding-top: var(--sat, 0px);
+    padding-right: var(--sar, 0px);
+    padding-bottom: var(--sab, 0px);
+    padding-left: var(--sal, 0px);
  }

  .panelRow {
@@ -73,7 +72,7 @@
      margin-top: 0.333rem;
      margin-bottom: 0.333rem;
      font-size: 0.75rem;
-      color: var(--text-primary-color);
+      color: var(--text-color-primary);
      font-weight: bold;
      display: block;
    }
@@ -228,8 +227,7 @@
  .App-top-bar {
    z-index: var(--zIndex-layerUI);
    display: flex;
-    flex-direction: column;
-    align-items: center;
+    justify-content: center;
  }

  .App-bottom-bar {
@@ -239,10 +237,10 @@
    left: 0;
    right: 0;
    --bar-padding: calc(4 * var(--space-factor));
-    padding-top: #{"max(var(--bar-padding), var(--sat,0))"};
-    padding-right: var(--sar, 0);
-    padding-bottom: var(--sab, 0);
-    padding-left: var(--sal, 0);
+    padding-top: #{"max(var(--bar-padding), var(--sat, 0px))"};
+    padding-right: var(--sar, 0px);
+    padding-bottom: var(--sab, 0px);
+    padding-left: var(--sal, 0px);
    z-index: 4;
    display: flex;
    align-items: flex-end;
@@ -259,7 +257,7 @@
      pointer-events: initial;

      .panelColumn {
-        padding: 8px 8px 0 8px;
+        padding: 8px 8px 0px 8px;
      }
    }
  }
@@ -363,6 +361,7 @@

  .App-menu__left {
    overflow-y: auto;
+    max-height: calc(100vh - 236px);
  }

  .dropdown-select {
@@ -434,7 +433,7 @@

  .scroll-back-to-content {
    color: var(--popup-text-color);
-    position: absolute;
+    position: fixed;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
@@ -462,7 +461,7 @@
      display: none;
    }
    .scroll-back-to-content {
-      bottom: calc(80px + var(--sab, 0));
+      bottom: calc(80px + var(--sab, 0px));
      z-index: -1;
    }
  }
@@ -575,14 +574,3 @@
    }
  }
 }
-
-.excalidraw-textEditorContainer {
-  overflow: hidden;
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  pointer-events: none;
-  textarea {
-    pointer-events: all;
-  }
-}
--- a/src/css/theme.scss
+++ b/src/css/theme.scss
@@ -1,42 +1,43 @@
@import "open-color/open-color.scss";
-@import "./variables.module.scss";

-.excalidraw {
-  --appearance-filter: none;
-  --button-destructive-bg-color: #{$oc-red-1};
-  --button-destructive-color: #{$oc-red-9};
+:root {
+  --bg-color-island: rgba(255, 255, 255, 0.9);
+  --popup-background-color: #{$oc-white};
+  --space-factor: 0.25rem;
  --button-gray-1: #{$oc-gray-2};
  --button-gray-2: #{$oc-gray-4};
  --button-gray-3: #{$oc-gray-5};
-  --button-special-active-bg-color: #{$oc-green-0};
-  --dialog-border-color: #{$oc-gray-6};
-  --dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
-  --focus-highlight-color: #{$oc-blue-2};
+  --input-border-color: #{$oc-gray-3};
+  --input-background-color: #{$oc-white};
+  --input-hover-background-color: #{$oc-gray-1};
+  --input-label-color: #{$oc-gray-7};
  --icon-fill-color: #{$oc-black};
  --icon-green-fill-color: #{$oc-green-9};
-  --input-bg-color: #{$oc-white};
-  --input-border-color: #{$oc-gray-3};
-  --input-hover-bg-color: #{$oc-gray-1};
-  --input-label-color: #{$oc-gray-7};
-  --island-bg-color: rgba(255, 255, 255, 0.9);
  --keybinding-color: #{$oc-gray-5};
-  --link-color: #{$oc-blue-7};
-  --overlay-bg-color: #{transparentize($oc-white, 0.12)};
-  --popup-bg-color: #{$oc-white};
-  --popup-secondary-bg-color: #{$oc-gray-1};
-  --popup-text-color: #{$oc-black};
-  --popup-text-inverted-color: #{$oc-white};
+  --sat: env(safe-area-inset-top);
  --sab: env(safe-area-inset-bottom);
  --sal: env(safe-area-inset-left);
  --sar: env(safe-area-inset-right);
-  --sat: env(safe-area-inset-top);
-  --select-highlight-color: #{$oc-blue-5};
+  --text-color-primary: #{$oc-gray-8};
  --shadow-island: 0 1px 5px #{transparentize($oc-black, 0.85)};
-  --space-factor: 0.25rem;
-  --text-primary-color: #{$oc-gray-8};
+  --overlay-background-color: #{transparentize($oc-white, 0.12)};
+  --dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
+  --focus-highlight-color: #{$oc-blue-2};
+  --select-highlight-color: #{$oc-blue-5};
+  --appearance-filter: none;
+  --button-special-active-background-color: #{$oc-green-0};
+  --button-destructive-color: #{$oc-red-9};
+  --button-destructive-background-color: #{$oc-red-1};
+  --popup-secondary-background-color: #{$oc-gray-1};
+  --popup-text-color: #{$oc-black};
+  --popup-text-inverted-color: #{$oc-white};
+  --dialog-border: #{$oc-gray-6};
+  --link-color: #{$oc-blue-7};
+}

+.excalidraw {
  &.Appearance_dark {
-    background: $oc-black;
+    background: #000;

    &.Appearance_dark-background-none {
      background: none;
@@ -44,31 +45,31 @@
  }

  &.Appearance_dark {
-    --appearance-filter: #{$appearance-filter};
-    --button-destructive-bg-color: #5a0000;
-    --button-destructive-color: #{$oc-red-3};
+    --text-color-primary: #{$oc-gray-4};
+    --bg-color-island: #1e1e1e;
+    --popup-background-color: #2c2c2c;
    --button-gray-1: #363636;
    --button-gray-2: #272727;
    --button-gray-3: #222;
-    --button-special-active-bg-color: #204624;
-    --dialog-border-color: #{$oc-gray-9};
-    --dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path fill="%23ced4da" d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
-    --focus-highlight-color: #{$oc-blue-6};
+    --input-border-color: #2e2e2e;
+    --input-background-color: #121212;
+    --input-hover-background-color: #181818;
+    --input-label-color: #{$oc-gray-2};
    --icon-fill-color: #{$oc-gray-4};
    --icon-green-fill-color: #{$oc-green-4};
-    --input-bg-color: #121212;
-    --input-border-color: #2e2e2e;
-    --input-hover-bg-color: #181818;
-    --input-label-color: #{$oc-gray-2};
-    --island-bg-color: #1e1e1e;
    --keybinding-color: #{$oc-gray-6};
-    --overlay-bg-color: #{transparentize($oc-gray-8, 0.88)};
-    --popup-bg-color: #2c2c2c;
-    --popup-secondary-bg-color: #222;
+    --shadow-island: 0 1px 5px #{transparentize($oc-black, 0.7)};
+    --overlay-background-color: rgba(30, 30, 30, 0.88);
+    --dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path fill="%23ced4da" d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
+    --focus-highlight-color: #{$oc-blue-6};
+    --select-highlight-color: #{$oc-blue-4};
+    --appearance-filter: invert(93%) hue-rotate(180deg);
+    --button-special-active-background-color: #204624;
+    --button-destructive-color: #{$oc-red-3};
+    --button-destructive-background-color: #5a0000;
+    --popup-secondary-background-color: #222;
    --popup-text-color: #{$oc-gray-4};
    --popup-text-inverted-color: #2c2c2c;
-    --select-highlight-color: #{$oc-blue-4};
-    --shadow-island: 0 1px 5px #{transparentize($oc-black, 0.7)};
-    --text-primary-color: #{$oc-gray-4};
+    --dialog-border: #{$oc-gray-9};
  }
 }
--- a/src/css/variables.module.scss
+++ b/src/css/variables.module.scss
@@ -2,9 +2,7 @@

 // keep up to date with is-mobile.tsx
 $is-mobile-query: "(max-width: 600px), (max-height: 500px) and (max-width: 1000px)";
-$appearance-filter: "invert(93%) hue-rotate(180deg)";

 :export {
  isMobileQuery: unquote($is-mobile-query);
-  appearanceFilter: unquote($appearance-filter);
 }
--- a/src/data/blob.ts
+++ b/src/data/blob.ts
@@ -5,9 +5,8 @@ import { CanvasError } from "../errors";
 import { t } from "../i18n";
 import { calculateScrollCenter } from "../scene";
 import { AppState } from "../types";
-import { isValidExcalidrawData } from "./json";
 import { restore } from "./restore";
-import { LibraryData } from "./types";
+import { ImportedDataState, LibraryData } from "./types";

 const parseFileContents = async (blob: Blob | File) => {
  let contents: string;
@@ -86,8 +85,8 @@ export const loadFromBlob = async (
 ) => {
  const contents = await parseFileContents(blob);
  try {
-    const data = JSON.parse(contents);
-    if (!isValidExcalidrawData(data)) {
+    const data: ImportedDataState = JSON.parse(contents);
+    if (data.type !== "excalidraw") {
      throw new Error(t("alerts.couldNotLoadInvalidFile"));
    }
    const result = restore(
--- a/src/data/index.ts
+++ b/src/data/index.ts
@@ -41,7 +41,6 @@ export const exportCanvas = async (
  if (type === "svg" || type === "clipboard-svg") {
    const tempSvg = exportToSvg(elements, {
      exportBackground,
-      exportWithDarkMode: appState.exportWithDarkMode,
      viewBackgroundColor,
      exportPadding,
      scale,
--- a/src/data/json.ts
+++ b/src/data/json.ts
@@ -6,7 +6,6 @@ import { ExcalidrawElement } from "../element/types";
 import { AppState } from "../types";
 import { loadFromBlob } from "./blob";
 import { Library } from "./library";
-import { ImportedDataState } from "./types";

 export const serializeAsJSON = (
  elements: readonly ExcalidrawElement[],
@@ -54,19 +53,6 @@ export const loadFromJSON = async (localAppState: AppState) => {
  return loadFromBlob(blob, localAppState);
 };

-export const isValidExcalidrawData = (data?: {
-  type?: any;
-  elements?: any;
-  appState?: any;
-}): data is ImportedDataState => {
-  return (
-    data?.type === "excalidraw" &&
-    (!data.elements ||
-      (Array.isArray(data.elements) &&
-        (!data.appState || typeof data.appState === "object")))
-  );
-};
-
 export const isValidLibrary = (json: any) => {
  return (
    typeof json === "object" &&
--- a/src/data/pixelated-image.ts
+++ b/src/data/pixelated-image.ts
@@ -0,0 +1,106 @@
+import { ExcalidrawGenericElement, NonDeleted } from "../element/types";
+import { newElement } from "../element";
+import { DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE } from "../constants";
+import { randomId } from "../random";
+
+const loadImage = async (url: string): Promise<HTMLImageElement> => {
+  const image = new Image();
+  return new Promise<HTMLImageElement>((resolve, reject) => {
+    image.onload = () => resolve(image);
+    image.onerror = (err) =>
+      reject(
+        new Error(
+          `Failed to load image: ${err ? err.toString : "unknown error"}`,
+        ),
+      );
+    image.onabort = () =>
+      reject(new Error(`Failed to load image: image load aborted`));
+    image.src = url;
+  });
+};
+
+const commonProps = {
+  fillStyle: "solid",
+  fontFamily: DEFAULT_FONT_FAMILY,
+  fontSize: DEFAULT_FONT_SIZE,
+  opacity: 100,
+  roughness: 1,
+  strokeColor: "transparent",
+  strokeSharpness: "sharp",
+  strokeStyle: "solid",
+  strokeWidth: 1,
+  verticalAlign: "middle",
+} as const;
+
+export const pixelateImage = async (
+  blob: Blob,
+  cellSize: number,
+  suggestedMaxShapeCount: number,
+  x: number,
+  y: number,
+) => {
+  const url = URL.createObjectURL(blob);
+  try {
+    const image = await loadImage(url);
+
+    // initialize canvas for pixelation
+    const { width, height } = image;
+    let canvasWidth = Math.floor(width / cellSize);
+    let canvasHeight = Math.floor(height / cellSize);
+    const shapeCount = canvasHeight * canvasWidth;
+    if (shapeCount > suggestedMaxShapeCount) {
+      canvasWidth = Math.floor(
+        canvasWidth * (suggestedMaxShapeCount / shapeCount),
+      );
+      canvasHeight = Math.floor(
+        canvasHeight * (suggestedMaxShapeCount / shapeCount),
+      );
+    }
+    const xOffset = x - (canvasWidth * cellSize) / 2;
+    const yOffset = y - (canvasHeight * cellSize) / 2;
+
+    const canvas =
+      "OffscreenCanvas" in window
+        ? new OffscreenCanvas(canvasWidth, canvasHeight)
+        : document.createElement("canvas");
+    canvas.width = canvasWidth;
+    canvas.height = canvasHeight;
+
+    // Draw image on canvas
+    const ctx = canvas.getContext("2d")!;
+    ctx.drawImage(image, 0, 0, width, height, 0, 0, canvasWidth, canvasHeight);
+    const imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
+    const buffer = imageData.data;
+
+    const groupId = randomId();
+    const shapes: NonDeleted<ExcalidrawGenericElement>[] = [];
+
+    for (let row = 0; row < canvasHeight; row++) {
+      for (let col = 0; col < canvasWidth; col++) {
+        const offset = row * canvasWidth * 4 + col * 4;
+        const r = buffer[offset];
+        const g = buffer[offset + 1];
+        const b = buffer[offset + 2];
+        const alpha = buffer[offset + 3];
+        if (alpha) {
+          const color = `rgba(${r}, ${g}, ${b}, ${alpha})`;
+          const rectangle = newElement({
+            backgroundColor: color,
+            groupIds: [groupId],
+            ...commonProps,
+            type: "rectangle",
+            x: xOffset + col * cellSize,
+            y: yOffset + row * cellSize,
+            width: cellSize,
+            height: cellSize,
+          });
+          shapes.push(rectangle);
+        }
+      }
+    }
+
+    return shapes;
+  } finally {
+    URL.revokeObjectURL(url);
+  }
+};
--- a/src/data/restore.ts
+++ b/src/data/restore.ts
@@ -141,7 +141,7 @@ export const restoreElements = (
  }, [] as ExcalidrawElement[]);
 };

-export const restoreAppState = (
+const restoreAppState = (
  appState: ImportedDataState["appState"],
  localAppState: Partial<AppState> | null,
 ): AppState => {
--- a/src/data/types.ts
+++ b/src/data/types.ts
@@ -15,7 +15,6 @@ export interface ImportedDataState {
  source?: string;
  elements?: DataState["elements"] | null;
  appState?: Partial<DataState["appState"]> | null;
-  scrollToCenter?: boolean;
 }

 export interface LibraryData {
--- a/src/element/binding.ts
+++ b/src/element/binding.ts
@@ -182,9 +182,9 @@ const bindLinearElement = (
    } as PointBinding,
  });
  mutateElement(hoveredElement, {
-    boundElementIds: Array.from(
-      new Set([...(hoveredElement.boundElementIds ?? []), linearElement.id]),
-    ),
+    boundElementIds: [
+      ...new Set([...(hoveredElement.boundElementIds ?? []), linearElement.id]),
+    ],
  });
 };

--- a/src/element/linearElementEditor.ts
+++ b/src/element/linearElementEditor.ts
@@ -129,7 +129,7 @@ export class LinearElementEditor {
      isDragging &&
      (activePointIndex === 0 || activePointIndex === element.points.length - 1)
    ) {
-      if (isPathALoop(element.points, appState.zoom.value)) {
+      if (isPathALoop(element.points)) {
        LinearElementEditor.movePoint(
          element,
          activePointIndex,
--- a/src/element/resizeElements.ts
+++ b/src/element/resizeElements.ts
@@ -21,6 +21,7 @@ import {
 import { isLinearElement, isTextElement } from "./typeChecks";
 import { mutateElement } from "./mutateElement";
 import { getPerfectElementSize } from "./sizeHelpers";
+import { getCursorForResizingElement } from "./resizeTest";
 import { measureText, getFontString } from "../utils";
 import { updateBoundElements } from "./binding";
 import {
@@ -104,6 +105,13 @@ export const transformElements = (
      );
    }

+    // update cursor
+    // FIXME it is not very nice to have this here
+    document.documentElement.style.cursor = getCursorForResizingElement({
+      element,
+      transformHandleType,
+    });
+
    return true;
  } else if (selectedElements.length > 1) {
    if (transformHandleType === "rotation") {
--- a/src/element/textWysiwyg.tsx
+++ b/src/element/textWysiwyg.tsx
@@ -38,7 +38,6 @@ export const textWysiwyg = ({
  onSubmit,
  getViewportCoords,
  element,
-  canvas,
 }: {
  id: ExcalidrawElement["id"];
  appState: AppState;
@@ -46,7 +45,6 @@ export const textWysiwyg = ({
  onSubmit: (text: string) => void;
  getViewportCoords: (x: number, y: number) => [number, number];
  element: ExcalidrawElement;
-  canvas: HTMLCanvasElement | null;
 }) => {
  const updateWysiwygStyle = () => {
    const updatedElement = Scene.getScene(element)?.getElement(id);
@@ -93,7 +91,7 @@ export const textWysiwyg = ({
  editable.wrap = "off";

  Object.assign(editable.style, {
-    position: "relative",
+    position: "fixed",
    display: "inline-block",
    minHeight: "1em",
    backfaceVisibility: "hidden",
@@ -153,10 +151,6 @@ export const textWysiwyg = ({
    editable.oninput = null;
    editable.onkeydown = null;

-    if (observer) {
-      observer.disconnect();
-    }
-
    window.removeEventListener("resize", updateWysiwygStyle);
    window.removeEventListener("wheel", stopEvent, true);
    window.removeEventListener("pointerdown", onPointerDown);
@@ -203,19 +197,9 @@ export const textWysiwyg = ({
  let isDestroyed = false;

  editable.onblur = handleSubmit;
-
-  // reposition wysiwyg in case of canvas is resized. Using ResizeObserver
-  // is preferred so we catch changes from host, where window may not resize.
-  let observer: ResizeObserver | null = null;
-  if (canvas && "ResizeObserver" in window) {
-    observer = new window.ResizeObserver(() => {
-      updateWysiwygStyle();
-    });
-    observer.observe(canvas);
-  } else {
-    window.addEventListener("resize", updateWysiwygStyle);
-  }
-
+  // reposition wysiwyg in case of window resize. Happens on mobile when
+  // device keyboard is opened.
+  window.addEventListener("resize", updateWysiwygStyle);
  window.addEventListener("pointerdown", onPointerDown);
  window.addEventListener("wheel", stopEvent, {
    passive: false,
--- a/src/excalidraw-app/collab/CollabWrapper.tsx
+++ b/src/excalidraw-app/collab/CollabWrapper.tsx
@@ -40,7 +40,6 @@ import { createInverseContext } from "../../createInverseContext";
 import { t } from "../../i18n";
 import { UserIdleState } from "./types";
 import { IDLE_THRESHOLD, ACTIVE_THRESHOLD } from "../../constants";
-import { trackEvent } from "../../analytics";

 interface CollabState {
  modalIsShown: boolean;
@@ -189,7 +188,6 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
  };

  openPortal = async () => {
-    trackEvent("share", "room creation");
    return this.initializeSocketClient(null);
  };

@@ -198,7 +196,6 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
    if (window.confirm(t("alerts.collabStopOverridePrompt"))) {
      window.history.pushState({}, APP_NAME, window.location.origin);
      this.destroySocketClient();
-      trackEvent("share", "room closed");
    }
  };

@@ -259,7 +256,6 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
        if (elements) {
          scenePromise.resolve({
            elements,
-            scrollToCenter: true,
          });
        }
      } catch (error) {
@@ -311,10 +307,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
                init: true,
              });
              // noop if already resolved via init from firebase
-              scenePromise.resolve({
-                elements: reconciledElements,
-                scrollToCenter: true,
-              });
+              scenePromise.resolve({ elements: reconciledElements });
            }
            break;
          }
--- a/src/excalidraw-app/collab/Portal.tsx
+++ b/src/excalidraw-app/collab/Portal.tsx
@@ -10,7 +10,6 @@ import { getSyncableElements } from "../../packages/excalidraw/index";
 import { ExcalidrawElement } from "../../element/types";
 import { BROADCAST, SCENE } from "../app_constants";
 import { UserIdleState } from "./types";
-import { trackEvent } from "../../analytics";

 class Portal {
  collab: CollabWrapper;
@@ -33,7 +32,6 @@ class Portal {
    this.socket.on("init-room", () => {
      if (this.socket) {
        this.socket.emit("join-room", this.roomId);
-        trackEvent("share", "room joined");
      }
    });
    this.socket.on("new-user", async (_socketId: string) => {
--- a/src/excalidraw-app/collab/RoomDialog.scss
+++ b/src/excalidraw-app/collab/RoomDialog.scss
@@ -7,7 +7,7 @@
  }

  .RoomDialog-link {
-    color: var(--text-primary-color);
+    color: var(--text-color-primary);
    min-width: 0;
    flex: 1 1 auto;
    margin-inline-start: 1em;
@@ -32,29 +32,15 @@
    display: flex;
    align-items: center;
    justify-content: center;
-    @media #{$is-mobile-query} {
-      flex-direction: column;
-      align-items: stretch;
-    }
-  }
-
-  @media #{$is-mobile-query} {
-    .RoomDialog-usernameLabel {
-      font-weight: bold;
-    }
  }

  .RoomDialog-username {
-    background-color: var(--input-bg-color);
+    background-color: var(--input-background-color);
    border-color: var(--input-border-color);
    appearance: none;
    min-width: 0;
    flex: 1 1 auto;
    margin-inline-start: 1em;
-    @media #{$is-mobile-query} {
-      margin-top: 0.5em;
-      margin-inline-start: 0;
-    }
    height: 2.5rem;
    font-size: 1em;
    line-height: 1.5;
@@ -67,7 +53,7 @@
  }

  .Modal .RoomDialog-stopSession {
-    background-color: var(--button-destructive-bg-color);
+    background-color: var(--button-destructive-background-color);

    .ToolIcon__label,
    .ToolIcon__icon svg {
--- a/src/excalidraw-app/collab/RoomDialog.tsx
+++ b/src/excalidraw-app/collab/RoomDialog.tsx
@@ -1,17 +1,10 @@
 import React, { useRef } from "react";
 import { copyTextToSystemClipboard } from "../../clipboard";
 import { Dialog } from "../../components/Dialog";
-import {
-  clipboard,
-  start,
-  stop,
-  share,
-  shareIOS,
-} from "../../components/icons";
+import { clipboard, start, stop } from "../../components/icons";
 import { ToolButton } from "../../components/ToolButton";
 import { t } from "../../i18n";
 import "./RoomDialog.scss";
-import Stack from "../../components/Stack";

 const RoomDialog = ({
  handleClose,
@@ -31,8 +24,6 @@ const RoomDialog = ({
  setErrorMessage: (message: string) => void;
 }) => {
  const roomLinkInput = useRef<HTMLInputElement>(null);
-  const navigator = window.navigator as any;
-  const isAppleBrowser = /Apple/.test(navigator.vendor);

  const copyRoomLink = async () => {
    try {
@@ -45,18 +36,6 @@ const RoomDialog = ({
    }
  };

-  const shareRoomLink = async () => {
-    try {
-      await navigator.share({
-        title: t("roomDialog.shareTitle"),
-        text: t("roomDialog.shareTitle"),
-        url: activeRoomLink,
-      });
-    } catch (error) {
-      // Just ignore.
-    }
-  };
-
  const selectInput = (event: React.MouseEvent<HTMLInputElement>) => {
    if (event.target !== document.activeElement) {
      event.preventDefault();
@@ -89,24 +68,13 @@ const RoomDialog = ({
            <p>{t("roomDialog.desc_inProgressIntro")}</p>
            <p>{t("roomDialog.desc_shareLink")}</p>
            <div className="RoomDialog-linkContainer">
-              <Stack.Row gap={2}>
-                {"share" in navigator ? (
-                  <ToolButton
-                    type="button"
-                    icon={isAppleBrowser ? shareIOS : share}
-                    title={t("labels.share")}
-                    aria-label={t("labels.share")}
-                    onClick={shareRoomLink}
-                  />
-                ) : null}
-                <ToolButton
-                  type="button"
-                  icon={clipboard}
-                  title={t("labels.copy")}
-                  aria-label={t("labels.copy")}
-                  onClick={copyRoomLink}
-                />
-              </Stack.Row>
+              <ToolButton
+                type="button"
+                icon={clipboard}
+                title={t("labels.copy")}
+                aria-label={t("labels.copy")}
+                onClick={copyRoomLink}
+              />
              <input
                value={activeRoomLink}
                readOnly={true}
@@ -151,11 +119,7 @@ const RoomDialog = ({
    );
  };
  return (
-    <Dialog
-      small
-      onCloseRequest={handleClose}
-      title={t("labels.liveCollaboration")}
-    >
+    <Dialog small onCloseRequest={handleClose} title={t("labels.createRoom")}>
      {renderRoomDialog()}
    </Dialog>
  );
--- a/src/excalidraw-app/index.tsx
+++ b/src/excalidraw-app/index.tsx
@@ -13,8 +13,7 @@ import { ExcalidrawImperativeAPI } from "../components/App";
 import { ErrorDialog } from "../components/ErrorDialog";
 import { TopErrorBoundary } from "../components/TopErrorBoundary";
 import { APP_NAME, EVENT, TITLE_TIMEOUT, VERSION_TIMEOUT } from "../constants";
-import { loadFromBlob } from "../data/blob";
-import { DataState, ImportedDataState } from "../data/types";
+import { ImportedDataState } from "../data/types";
 import {
  ExcalidrawElement,
  NonDeletedExcalidrawElement,
@@ -70,41 +69,24 @@ const initializeScene = async (opts: {
 }): Promise<ImportedDataState | null> => {
  const searchParams = new URLSearchParams(window.location.search);
  const id = searchParams.get("id");
-  const jsonBackendMatch = window.location.hash.match(
+  const jsonMatch = window.location.hash.match(
    /^#json=([0-9]+),([a-zA-Z0-9_-]+)$/,
  );
-  const externalUrlMatch = window.location.hash.match(/^#url=(.*)$/);

  const initialData = importFromLocalStorage();

-  let scene: DataState & { scrollToCenter?: boolean } = await loadScene(
-    null,
-    null,
-    initialData,
-  );
+  let scene = await loadScene(null, null, initialData);

  let roomLinkData = getCollaborationLinkData(window.location.href);
-  const isExternalScene = !!(id || jsonBackendMatch || roomLinkData);
+  const isExternalScene = !!(id || jsonMatch || roomLinkData);
  if (isExternalScene) {
-    if (
-      // don't prompt if scene is empty
-      !scene.elements.length ||
-      // don't prompt for collab scenes because we don't override local storage
-      roomLinkData ||
-      // otherwise, prompt whether user wants to override current scene
-      window.confirm(t("alerts.loadSceneOverridePrompt"))
-    ) {
+    if (roomLinkData || window.confirm(t("alerts.loadSceneOverridePrompt"))) {
      // Backwards compatibility with legacy url format
      if (id) {
        scene = await loadScene(id, null, initialData);
-      } else if (jsonBackendMatch) {
-        scene = await loadScene(
-          jsonBackendMatch[1],
-          jsonBackendMatch[2],
-          initialData,
-        );
+      } else if (jsonMatch) {
+        scene = await loadScene(jsonMatch[1], jsonMatch[2], initialData);
      }
-      scene.scrollToCenter = true;
      if (!roomLinkData) {
        window.history.replaceState({}, APP_NAME, window.location.origin);
      }
@@ -125,28 +107,7 @@ const initializeScene = async (opts: {
      roomLinkData = null;
      window.history.replaceState({}, APP_NAME, window.location.origin);
    }
-  } else if (externalUrlMatch) {
-    window.history.replaceState({}, APP_NAME, window.location.origin);
-
-    const url = externalUrlMatch[1];
-    try {
-      const request = await fetch(window.decodeURIComponent(url));
-      const data = await loadFromBlob(await request.blob(), null);
-      if (
-        !scene.elements.length ||
-        window.confirm(t("alerts.loadSceneOverridePrompt"))
-      ) {
-        return data;
-      }
-    } catch (error) {
-      return {
-        appState: {
-          errorMessage: t("alerts.invalidSceneUrl"),
-        },
-      };
-    }
  }
-
  if (roomLinkData) {
    return opts.collabAPI.initializeSocketClient(roomLinkData);
  } else if (scene) {
@@ -313,6 +274,7 @@ function ExcalidrawWrapper() {
        width={dimensions.width}
        height={dimensions.height}
        initialData={initialStatePromiseRef.current.promise}
+        user={{ name: collabAPI?.username }}
        onCollabButtonClick={collabAPI?.onCollabButtonClick}
        isCollaborating={collabAPI?.isCollaborating()}
        onPointerUpdate={collabAPI?.onPointerUpdate}
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -12,7 +12,6 @@ interface Document {
 interface Window {
  ClipboardItem: any;
  __EXCALIDRAW_SHA__: string | undefined;
-  EXCALIDRAW_ASSET_PATH: string | undefined;
  gtag: Function;
 }

--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -1,6 +1,5 @@
 import fallbackLangData from "./locales/en.json";
 import percentages from "./locales/percentages.json";
-import { ENV } from "./constants";

 const COMPLETION_THRESHOLD = 85;

@@ -34,7 +33,6 @@ const allLanguages: Language[] = [
  { code: "nb-NO", label: "Norsk bokmål" },
  { code: "nl-NL", label: "Nederlands" },
  { code: "nn-NO", label: "Norsk nynorsk" },
-  { code: "oc-FR", label: "Occitan" },
  { code: "pa-IN", label: "ਪੰਜਾਬੀ" },
  { code: "pl-PL", label: "Polski" },
  { code: "pt-BR", label: "Português Brasileiro" },
@@ -57,33 +55,25 @@ export const languages: Language[] = allLanguages
      COMPLETION_THRESHOLD,
  );

-const TEST_LANG_CODE = "__test__";
-if (process.env.NODE_ENV === ENV.DEVELOPMENT) {
-  languages.unshift(
-    { code: TEST_LANG_CODE, label: "test language" },
-    {
-      code: `${TEST_LANG_CODE}.rtl`,
-      label: "\u{202a}test language (rtl)\u{202c}",
-      rtl: true,
-    },
-  );
-}
-
 let currentLang: Language = defaultLang;
 let currentLangData = {};

 export const setLanguage = async (lang: Language) => {
  currentLang = lang;
  document.documentElement.dir = currentLang.rtl ? "rtl" : "ltr";
-  document.documentElement.lang = currentLang.code;

-  if (lang.code.startsWith(TEST_LANG_CODE)) {
-    currentLangData = {};
-  } else {
-    currentLangData = await import(
-      /* webpackChunkName: "i18n-[request]" */ `./locales/${currentLang.code}.json`
-    );
-  }
+  currentLangData = await import(
+    /* webpackChunkName: "i18n-[request]" */ `./locales/${currentLang.code}.json`
+  );
+};
+
+export const setLanguageFirstTime = async (lang: Language) => {
+  currentLang = lang;
+  document.documentElement.dir = currentLang.rtl ? "rtl" : "ltr";
+
+  currentLangData = await import(
+    /* webpackChunkName: "i18n-[request]" */ `./locales/${currentLang.code}.json`
+  );
 };

 export const getLanguage = () => currentLang;
@@ -103,13 +93,6 @@ const findPartsForData = (data: any, parts: string[]) => {
 };

 export const t = (path: string, replacement?: { [key: string]: string }) => {
-  if (currentLang.code.startsWith(TEST_LANG_CODE)) {
-    const name = replacement
-      ? `${path}(${JSON.stringify(replacement).slice(1, -1)})`
-      : path;
-    return `\u{202a}[[${name}]]\u{202c}`;
-  }
-
  const parts = path.split(".");
  let translation =
    findPartsForData(currentLangData, parts) ||
--- a/src/index-node.ts
+++ b/src/index-node.ts
@@ -54,8 +54,8 @@ const elements = [
  },
 ];

-registerFont("./public/Virgil.woff2", { family: "Virgil" });
-registerFont("./public/Cascadia.woff2", { family: "Cascadia" });
+registerFont("./public/FG_Virgil.ttf", { family: "Virgil" });
+registerFont("./public/Cascadia.ttf", { family: "Cascadia" });

 const canvas = exportToCanvas(
  elements as any,
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -4,6 +4,7 @@ import ExcalidrawApp from "./excalidraw-app";

 import "./excalidraw-app/pwa";
 import "./excalidraw-app/sentry";
+
 window.__EXCALIDRAW_SHA__ = process.env.REACT_APP_GIT_SHA;

 ReactDOM.render(<ExcalidrawApp />, document.getElementById("root"));
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Preet Shihn	b20fe944e7	add max shape count	2021-02-05 10:27:06 -08:00
Preet Shihn	1156ef6b96	pixelated images initial experiment	2021-02-04 23:27:35 -08:00