Grid

Merge
chore: Update translations from Crowdin (#2898 )
2021-02-03 13:59:40 +02:00 · 2021-02-03 13:54:48 +02:00 · 2021-02-02 22:06:44 +00:00 · 2021-02-02 20:57:22 +05:30 · 2021-02-02 14:38:33 +01:00 · 2021-02-02 09:41:57 +00:00
130 changed files with 2410 additions and 1414 deletions
@@ -6,7 +6,7 @@ on:
      - master

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

    steps:
@@ -13,10 +13,10 @@ jobs:
    steps:
      - uses: actions/checkout@v1

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

      - name: Install dependencies
        run: |
@@ -1,9 +1,11 @@
-name: Cancel
-on: [push]
+name: Cancel previous runs
+
+on: push
+
 jobs:
  cancel:
-    name: "Cancel Previous Runs"
    runs-on: ubuntu-latest
+
    timeout-minutes: 3
    steps:
      - uses: styfle/cancel-workflow-action@0.6.0
@@ -1,10 +1,6 @@
 name: Lint

-on:
-  push:
-    branches:
-      - master
-  pull_request:
+on: push

 jobs:
  lint:
@@ -13,10 +9,10 @@ jobs:
    steps:
      - uses: actions/checkout@v1

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

      - name: Install and lint
        run: |
@@ -24,5 +20,3 @@ jobs:
          npm run test:other
          npm run test:code
          npm run test:typecheck
-        env:
-          CI: true
@@ -14,18 +14,18 @@ jobs:
        with:
          token: ${{ secrets.PUSH_TRANSLATIONS_COVERAGE_PAT }}

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

      - name: Create report file
        run: |
          npm run locales-coverage
          FILE_CHANGED=$(git diff src/locales/percentages.json)
          if [ ! -z "${FILE_CHANGED}" ]; then
-            git config --global user.name 'Kostas Bariotis'
-            git config --global user.email 'konmpar@gmail.com'
+            git config --global user.name 'Excalidraw Bot'
+            git config --global user.email 'bot@excalidraw.com'
            git add src/locales/percentages.json
            git commit -am "Auto commit: Calculate translation coverage"
            git push
@@ -10,6 +10,7 @@ on:
 jobs:
  main:
    runs-on: ubuntu-latest
+
    steps:
      - uses: amannn/action-semantic-pull-request@v3.0.0
        env:
@@ -8,13 +8,14 @@ on:
 jobs:
  release:
    runs-on: ubuntu-latest
+
    steps:
      - uses: actions/checkout@v1.0.0

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

      - name: Install and build
        run: |
@@ -1,10 +1,6 @@
 name: Tests

-on:
-  push:
-    branches:
-      - master
-  pull_request:
+on: push

 jobs:
  test:
@@ -13,14 +9,12 @@ jobs:
    steps:
      - uses: actions/checkout@v1

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

      - name: Install and test
        run: |
          npm ci
          npm run test:app
-        env:
-          CI: true
@@ -4,9 +4,9 @@
  "lockfileVersion": 1,
  "dependencies": {
    "@apidevtools/json-schema-ref-parser": {
-      "version": "9.0.6",
-      "resolved": "https://registry.npmjs.org/@apidevtools/json-schema-ref-parser/-/json-schema-ref-parser-9.0.6.tgz",
-      "integrity": "sha512-M3YgsLjI0lZxvrpeGVk9Ap032W6TPQkH6pRAZz81Ac3WUNF79VQooAFnp8umjvVzUmD93NkogxEwbSce7qMsUg==",
+      "version": "9.0.7",
+      "resolved": "https://registry.npmjs.org/@apidevtools/json-schema-ref-parser/-/json-schema-ref-parser-9.0.7.tgz",
+      "integrity": "sha512-QdwOGF1+eeyFh+17v2Tz626WX0nucd1iKOm6JUTUvCZdbolblCOOQCxGrQPY0f7jEhn36PiAWqZnsC2r5vmUWg==",
      "dev": true,
      "requires": {
        "@jsdevtools/ono": "^7.1.3",
@@ -1308,9 +1308,9 @@
      "integrity": "sha512-Jj2xW+8+8XPfWGkv9HPv/uR+Qrmq37NPYT352wf7MvE9LrstpLVmFg3LqG6MCRr5miLAom5sen2gZ+iOhVDeRA=="
    },
    "@firebase/app": {
-      "version": "0.6.13",
-      "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.6.13.tgz",
-      "integrity": "sha512-xGrJETzvCb89VYbGSHFHCW7O/y067HRxT7MGehUE1xMxdPVBDNayHnxEuKwzfGvXAjVmajXBKFlKxaCWpgSjCQ==",
+      "version": "0.6.14",
+      "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.6.14.tgz",
+      "integrity": "sha512-ZQKuiJ+fzr4tULgWoXbW+AZVTGsejOkSrlQ+zx78WiGKIubpFJLklnP3S0oYr/1nHzr4vaKuM4G8IL1Wv/+MpQ==",
      "requires": {
        "@firebase/app-types": "0.6.1",
        "@firebase/component": "0.1.21",
@@ -1334,9 +1334,9 @@
      "integrity": "sha512-L/ZnJRAq7F++utfuoTKX4CLBG5YR7tFO3PLzG1/oXXKEezJ0kRL3CMRoueBEmTCzVb/6SIs2Qlaw++uDgi5Xyg=="
    },
    "@firebase/auth": {
-      "version": "0.16.1",
-      "resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-0.16.1.tgz",
-      "integrity": "sha512-7juD7D/kaxNti/xa5G+ZGJJs+bdJUWOW0MlNBtXwiG+TjMh69EDmwJnQmmc9h/32QVvXt1qo1OGWOoMMpF/2Gg==",
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-0.16.2.tgz",
+      "integrity": "sha512-68TlDL0yh3kF8PiCzI8m8RWd/bf/xCLUsdz1NZ2Dwea0sp6e2WAhu0sem1GfhwuEwL+Ns4jCdX7qbe/OQlkVEA==",
      "requires": {
        "@firebase/auth-types": "0.10.1"
      }
@@ -1368,9 +1368,9 @@
      }
    },
    "@firebase/database": {
-      "version": "0.8.3",
-      "resolved": "https://registry.npmjs.org/@firebase/database/-/database-0.8.3.tgz",
-      "integrity": "sha512-i29rr3kcPltIkA8La9M1lgsSxx9bfu5lCQ0T+tbJptZ3UpqpcL1NzCcZa24cJjiLgq3HQNPyLvUvCtcPSFDlRg==",
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@firebase/database/-/database-0.9.1.tgz",
+      "integrity": "sha512-JdxgNvniSZiAx+lrdAQxkCZOTv+UfdmhRm9JA4RTs4XOpvwzmRtJTAIGBn+9CWXUAkWkjt5CYHLmYysD7NGj6g==",
      "requires": {
        "@firebase/auth-interop-types": "0.1.5",
        "@firebase/component": "0.1.21",
@@ -1405,9 +1405,9 @@
      }
    },
    "@firebase/firestore": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-2.1.2.tgz",
-      "integrity": "sha512-8yUdBLLr6UhE+IjPR+fxLBD0bDnEqF9GalohfURZeLQPaL3b+LtqqGCLvvXC4MKT0lJAHOV8J9LA6rHj8vI0/Q==",
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-2.1.4.tgz",
+      "integrity": "sha512-chSOvJyVoS7HmH7YOyqQP66wMwmsYNo2nPbFkrmQM/fRGXntNxXD1Greu1uts2hNyNeDLNrFHW5y7PlE3LAbwQ==",
      "requires": {
        "@firebase/component": "0.1.21",
        "@firebase/firestore-types": "2.1.0",
@@ -2663,125 +2663,86 @@
      }
    },
    "@sentry/browser": {
-      "version": "5.30.0",
-      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-5.30.0.tgz",
-      "integrity": "sha512-rOb58ZNVJWh1VuMuBG1mL9r54nZqKeaIlwSlvzJfc89vyfd7n6tQ1UXMN383QBz/MS5H5z44Hy5eE+7pCrYAfw==",
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-6.0.3.tgz",
+      "integrity": "sha512-Ukxh83Twql4UmUgds9wPWllE62NG71cYvm5AM6daTojvM8wFR2jh7G6GiA0WYfgMb2fw6SlbevB2xb6RDG5DzQ==",
      "requires": {
-        "@sentry/core": "5.30.0",
-        "@sentry/types": "5.30.0",
-        "@sentry/utils": "5.30.0",
+        "@sentry/core": "6.0.3",
+        "@sentry/types": "6.0.3",
+        "@sentry/utils": "6.0.3",
        "tslib": "^1.9.3"
-      },
-      "dependencies": {
-        "@sentry/types": {
-          "version": "5.30.0",
-          "resolved": "https://registry.npmjs.org/@sentry/types/-/types-5.30.0.tgz",
-          "integrity": "sha512-R8xOqlSTZ+htqrfteCWU5Nk0CDN5ApUTvrlvBuiH1DyP6czDZ4ktbZB0hAgBlVcK0U+qpD3ag3Tqqpa5Q67rPw=="
-        },
-        "@sentry/utils": {
-          "version": "5.30.0",
-          "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-5.30.0.tgz",
-          "integrity": "sha512-zaYmoH0NWWtvnJjC9/CBseXMtKHm/tm40sz3YfJRxeQjyzRqNQPgivpd9R/oDJCYj999mzdW382p/qi2ypjLww==",
-          "requires": {
-            "@sentry/types": "5.30.0",
-            "tslib": "^1.9.3"
-          }
-        }
      }
    },
    "@sentry/core": {
-      "version": "5.30.0",
-      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-5.30.0.tgz",
-      "integrity": "sha512-TmfrII8w1PQZSZgPpUESqjB+jC6MvZJZdLtE/0hZ+SrnKhW3x5WlYLvTXZpcWePYBku7rl2wn1RZu6uT0qCTeg==",
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-6.0.3.tgz",
+      "integrity": "sha512-UykB/4/98y2DkNvwTiL2ofFPuK3KDHc7rIRNsdj6dg6D+Cf7FRexgmWUUkZrpC/y+QBj0TPqkcFDcZAuQDa3Ag==",
      "requires": {
-        "@sentry/hub": "5.30.0",
-        "@sentry/minimal": "5.30.0",
-        "@sentry/types": "5.30.0",
-        "@sentry/utils": "5.30.0",
+        "@sentry/hub": "6.0.3",
+        "@sentry/minimal": "6.0.3",
+        "@sentry/types": "6.0.3",
+        "@sentry/utils": "6.0.3",
        "tslib": "^1.9.3"
-      },
-      "dependencies": {
-        "@sentry/types": {
-          "version": "5.30.0",
-          "resolved": "https://registry.npmjs.org/@sentry/types/-/types-5.30.0.tgz",
-          "integrity": "sha512-R8xOqlSTZ+htqrfteCWU5Nk0CDN5ApUTvrlvBuiH1DyP6czDZ4ktbZB0hAgBlVcK0U+qpD3ag3Tqqpa5Q67rPw=="
-        },
-        "@sentry/utils": {
-          "version": "5.30.0",
-          "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-5.30.0.tgz",
-          "integrity": "sha512-zaYmoH0NWWtvnJjC9/CBseXMtKHm/tm40sz3YfJRxeQjyzRqNQPgivpd9R/oDJCYj999mzdW382p/qi2ypjLww==",
-          "requires": {
-            "@sentry/types": "5.30.0",
-            "tslib": "^1.9.3"
-          }
-        }
      }
    },
    "@sentry/hub": {
-      "version": "5.30.0",
-      "resolved": "https://registry.npmjs.org/@sentry/hub/-/hub-5.30.0.tgz",
-      "integrity": "sha512-2tYrGnzb1gKz2EkMDQcfLrDTvmGcQPuWxLnJKXJvYTQDGLlEvi2tWz1VIHjunmOvJrB5aIQLhm+dcMRwFZDCqQ==",
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/@sentry/hub/-/hub-6.0.3.tgz",
+      "integrity": "sha512-BfV32tE09rjTWM9W0kk8gzxUC2k1h57Z5dNWJ35na79+LguNNtCcI6fHlFQ3PkJca6ITYof9FI8iQHUfsHFZnw==",
      "requires": {
-        "@sentry/types": "5.30.0",
-        "@sentry/utils": "5.30.0",
+        "@sentry/types": "6.0.3",
+        "@sentry/utils": "6.0.3",
+        "tslib": "^1.9.3"
+      }
+    },
+    "@sentry/integrations": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/@sentry/integrations/-/integrations-6.0.3.tgz",
+      "integrity": "sha512-SE/rQ+ttfoC6FlHDibB4e9lV95j78YkjQ6PvYNUe+zGkGIretCJREqgaS+W3qTNYvOdbUViuiiqtdfyvW9nM2g==",
+      "requires": {
+        "@sentry/types": "6.0.3",
+        "@sentry/utils": "6.0.3",
+        "localforage": "^1.8.1",
        "tslib": "^1.9.3"
      },
      "dependencies": {
        "@sentry/types": {
-          "version": "5.30.0",
-          "resolved": "https://registry.npmjs.org/@sentry/types/-/types-5.30.0.tgz",
-          "integrity": "sha512-R8xOqlSTZ+htqrfteCWU5Nk0CDN5ApUTvrlvBuiH1DyP6czDZ4ktbZB0hAgBlVcK0U+qpD3ag3Tqqpa5Q67rPw=="
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/@sentry/types/-/types-6.0.3.tgz",
+          "integrity": "sha512-266aBQbk9AGedhG2dzXshWbn23LYLElXqlI74DLku48UrU2v7TGKdyik/8/nfOfquCoRSp0GFGYHbItwU124XQ=="
        },
        "@sentry/utils": {
-          "version": "5.30.0",
-          "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-5.30.0.tgz",
-          "integrity": "sha512-zaYmoH0NWWtvnJjC9/CBseXMtKHm/tm40sz3YfJRxeQjyzRqNQPgivpd9R/oDJCYj999mzdW382p/qi2ypjLww==",
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-6.0.3.tgz",
+          "integrity": "sha512-lvuBFvZHYs1zYwI8dkC8Z8ryb0aYnwPFUl1rbZiMwJpYI2Dgl1jpqqZWv9luux2rSRYOMid74uGedV708rvEgA==",
          "requires": {
-            "@sentry/types": "5.30.0",
+            "@sentry/types": "6.0.3",
            "tslib": "^1.9.3"
          }
        }
      }
    },
-    "@sentry/integrations": {
-      "version": "5.30.0",
-      "resolved": "https://registry.npmjs.org/@sentry/integrations/-/integrations-5.30.0.tgz",
-      "integrity": "sha512-Fqh4ALLoQWdd+1ih0iBduANWFyNmFWMxwvBu3V/wLDRi8OcquI0lEzWai1InzTJTiNhRHPnhuU++l/vkO0OCww==",
-      "requires": {
-        "@sentry/types": "5.30.0",
-        "@sentry/utils": "5.30.0",
-        "localforage": "1.8.1",
-        "tslib": "^1.9.3"
-      }
-    },
    "@sentry/minimal": {
-      "version": "5.30.0",
-      "resolved": "https://registry.npmjs.org/@sentry/minimal/-/minimal-5.30.0.tgz",
-      "integrity": "sha512-BwWb/owZKtkDX+Sc4zCSTNcvZUq7YcH3uAVlmh/gtR9rmUvbzAA3ewLuB3myi4wWRAMEtny6+J/FN/x+2wn9Xw==",
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/@sentry/minimal/-/minimal-6.0.3.tgz",
+      "integrity": "sha512-YsW+nw0SMyyb7UQdjZeKlZjxbGsJFpXNLh9iIp6fHKnoLTTv17YPm2ej9sOikDsQuVotaPg/xn/Qt5wySGHIxw==",
      "requires": {
-        "@sentry/hub": "5.30.0",
-        "@sentry/types": "5.30.0",
+        "@sentry/hub": "6.0.3",
+        "@sentry/types": "6.0.3",
        "tslib": "^1.9.3"
-      },
-      "dependencies": {
-        "@sentry/types": {
-          "version": "5.30.0",
-          "resolved": "https://registry.npmjs.org/@sentry/types/-/types-5.30.0.tgz",
-          "integrity": "sha512-R8xOqlSTZ+htqrfteCWU5Nk0CDN5ApUTvrlvBuiH1DyP6czDZ4ktbZB0hAgBlVcK0U+qpD3ag3Tqqpa5Q67rPw=="
-        }
      }
    },
    "@sentry/types": {
-      "version": "5.30.0",
-      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-5.30.0.tgz",
-      "integrity": "sha512-R8xOqlSTZ+htqrfteCWU5Nk0CDN5ApUTvrlvBuiH1DyP6czDZ4ktbZB0hAgBlVcK0U+qpD3ag3Tqqpa5Q67rPw=="
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-6.0.3.tgz",
+      "integrity": "sha512-266aBQbk9AGedhG2dzXshWbn23LYLElXqlI74DLku48UrU2v7TGKdyik/8/nfOfquCoRSp0GFGYHbItwU124XQ=="
    },
    "@sentry/utils": {
-      "version": "5.30.0",
-      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-5.30.0.tgz",
-      "integrity": "sha512-zaYmoH0NWWtvnJjC9/CBseXMtKHm/tm40sz3YfJRxeQjyzRqNQPgivpd9R/oDJCYj999mzdW382p/qi2ypjLww==",
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-6.0.3.tgz",
+      "integrity": "sha512-lvuBFvZHYs1zYwI8dkC8Z8ryb0aYnwPFUl1rbZiMwJpYI2Dgl1jpqqZWv9luux2rSRYOMid74uGedV708rvEgA==",
      "requires": {
-        "@sentry/types": "5.30.0",
+        "@sentry/types": "6.0.3",
        "tslib": "^1.9.3"
      }
    },
@@ -5155,10 +5116,10 @@
      "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
      "integrity": "sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8="
    },
-    "browser-nativefs": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/browser-nativefs/-/browser-nativefs-0.12.0.tgz",
-      "integrity": "sha512-ZCHJcQI6bBm9YjB+6wMT1nWg+/mnWnz7r3gJ8sx7RjgLtWROFq+BuD12cAncD6y45MIbUqFM8eMKXoHXOxSFxA=="
+    "browser-fs-access": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/browser-fs-access/-/browser-fs-access-0.13.0.tgz",
+      "integrity": "sha512-qP8zFVhRQThxYgBXdlFHbzIrWb1us0G5kL2ZL0vW4BO5llKE4qBAcQsQrw4KN+6vjw8sKeWaGWJtzijfRT4N0Q=="
    },
    "browser-process-hrtime": {
      "version": "1.0.0",
@@ -7987,9 +7948,9 @@
      }
    },
    "eslint-config-prettier": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-7.1.0.tgz",
-      "integrity": "sha512-9sm5/PxaFG7qNJvJzTROMM1Bk1ozXVTKI0buKOyb0Bsr1hrwi0H/TzxF/COtf1uxikIK8SwhX7K6zg78jAzbeA==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-7.2.0.tgz",
+      "integrity": "sha512-rV4Qu0C3nfJKPOAhFujFxB7RMP+URFyQqqOZW9DMRD7ZDTFyjaIlETU3xzHELt++4ugC0+Jm084HQYkkJe+Ivg==",
      "dev": true
    },
    "eslint-config-react-app": {
@@ -9067,16 +9028,16 @@
      }
    },
    "firebase": {
-      "version": "8.2.3",
-      "resolved": "https://registry.npmjs.org/firebase/-/firebase-8.2.3.tgz",
-      "integrity": "sha512-WdbcGSiLxiW/kGZT+EyqD9z3Md7kR35+k9qMjDn/twiIrm6Hh7Qi/Z69cqxhKW6+4uK5ghXIF28CjK67OyD9Qw==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/firebase/-/firebase-8.2.5.tgz",
+      "integrity": "sha512-x9KUJR8PvqLUNzNKWHjAnO7rJVgK546G0F+vjlJTNl+J/8oFTdWh8X4PvYda0z0XM68A2Y9xPGf3blz5qHCn0A==",
      "requires": {
        "@firebase/analytics": "0.6.2",
-        "@firebase/app": "0.6.13",
+        "@firebase/app": "0.6.14",
        "@firebase/app-types": "0.6.1",
-        "@firebase/auth": "0.16.1",
-        "@firebase/database": "0.8.3",
-        "@firebase/firestore": "2.1.2",
+        "@firebase/auth": "0.16.2",
+        "@firebase/database": "0.9.1",
+        "@firebase/firestore": "2.1.4",
        "@firebase/functions": "0.6.1",
        "@firebase/installations": "0.4.19",
        "@firebase/messaging": "0.7.3",
@@ -9088,9 +9049,9 @@
      }
    },
    "firebase-tools": {
-      "version": "9.2.1",
-      "resolved": "https://registry.npmjs.org/firebase-tools/-/firebase-tools-9.2.1.tgz",
-      "integrity": "sha512-sD4wfB5hs/8IKXV6AJOmkpvXf/St7gVc9QeW4Qz21PG7CkirgRf6FqcYkPKtBcro4wfj48dihnYx/IO1+XPTGg==",
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/firebase-tools/-/firebase-tools-9.2.2.tgz",
+      "integrity": "sha512-AFjf7S9NjEM+u8ZByJEKASxRG1g+LLg/A0CrzA3V91P92MN+8cyrCigEs7mCdtFknLaShrCgzROyo/OEwd4xdA==",
      "dev": true,
      "requires": {
        "@google-cloud/pubsub": "^2.7.0",
@@ -11562,9 +11523,9 @@
      },
      "dependencies": {
        "ip-regex": {
-          "version": "4.2.0",
-          "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-4.2.0.tgz",
-          "integrity": "sha512-n5cDDeTWWRwK1EBoWwRti+8nP4NbytBBY0pldmnIkq6Z55KNFmWofh4rl9dPZpj+U/nVq7gweR3ylrvMt4YZ5A==",
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-4.3.0.tgz",
+          "integrity": "sha512-B9ZWJxHHOHUhUjCPrMpLD4xEq35bUTClHM1S6CBU5ixQnkZmwipwgc96vAd7AAGM9TGHvJR+Uss+/Ak6UphK+Q==",
          "dev": true
        }
      }
@@ -14301,9 +14262,9 @@
      }
    },
    "localforage": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.8.1.tgz",
-      "integrity": "sha512-azSSJJfc7h4bVpi0PGi+SmLQKJl2/8NErI+LhJsrORNikMZnhaQ7rv9fHj+ofwgSHrKRlsDCL/639a6nECIKuQ==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.9.0.tgz",
+      "integrity": "sha512-rR1oyNrKulpe+VM9cYmcFn6tsHuokyVHFaCM3+osEmxaHTbEk8oQu6eGDfS6DQLWi/N67XRmB8ECG37OES368g==",
      "requires": {
        "lie": "3.1.1"
      }
@@ -19,17 +19,17 @@
    ]
  },
  "dependencies": {
-    "@sentry/browser": "5.30.0",
-    "@sentry/integrations": "5.30.0",
+    "@sentry/browser": "6.0.3",
+    "@sentry/integrations": "6.0.3",
    "@testing-library/jest-dom": "5.11.9",
    "@testing-library/react": "11.2.3",
    "@types/jest": "26.0.20",
    "@types/react": "17.0.0",
    "@types/react-dom": "17.0.0",
    "@types/socket.io-client": "1.4.35",
-    "browser-nativefs": "0.12.0",
+    "browser-fs-access": "0.13.0",
    "clsx": "1.1.1",
-    "firebase": "8.2.3",
+    "firebase": "8.2.5",
    "i18next-browser-languagedetector": "6.0.1",
    "lodash.throttle": "4.1.1",
    "nanoid": "3.1.20",
@@ -51,9 +51,9 @@
  "devDependencies": {
    "@types/lodash.throttle": "4.1.6",
    "@types/pako": "1.0.1",
-    "eslint-config-prettier": "7.1.0",
+    "eslint-config-prettier": "7.2.0",
    "eslint-plugin-prettier": "3.3.1",
-    "firebase-tools": "9.2.1",
+    "firebase-tools": "9.2.2",
    "husky": "4.3.8",
    "jest-canvas-mock": "2.3.0",
    "lint-staged": "10.5.3",
@@ -72,7 +72,7 @@
  },
  "jest": {
    "transformIgnorePatterns": [
-      "node_modules/(?!(roughjs|points-on-curve|path-data-parser|points-on-path|browser-nativefs)/)"
+      "node_modules/(?!(roughjs|points-on-curve|path-data-parser|points-on-path|browser-fs-access)/)"
    ],
    "resetMocks": false
  },
@@ -18,6 +18,7 @@ const crowdinMap = {
  "id-ID": "en-id",
  "it-IT": "en-it",
  "ja-JP": "en-ja",
+  "kab-KAB": "en-kab",
  "ko-KR": "en-ko",
  "my-MM": "en-my",
  "nb-NO": "en-nb",
@@ -40,7 +41,7 @@ const crowdinMap = {
 const flags = {
  "ar-SA": "🇸🇦",
  "bg-BG": "🇧🇬",
-  "ca-ES": "🇪🇸",
+  "ca-ES": "🏳",
  "de-DE": "🇩🇪",
  "el-GR": "🇬🇷",
  "es-ES": "🇪🇸",
@@ -53,6 +54,7 @@ const flags = {
  "id-ID": "🇮🇩",
  "it-IT": "🇮🇹",
  "ja-JP": "🇯🇵",
+  "kab-KAB": "🏳",
  "ko-KR": "🇰🇷",
  "my-MM": "🇲🇲",
  "nb-NO": "🇳🇴",
@@ -88,6 +90,7 @@ const languages = {
  "id-ID": "Bahasa Indonesia",
  "it-IT": "Italiano",
  "ja-JP": "日本語",
+  "kab-KAB": "Taqbaylit",
  "ko-KR": "한국어",
  "my-MM": "Burmese",
  "nb-NO": "Norsk bokmål",
@@ -17,6 +17,5 @@ export const actionAddToLibrary = register({
    });
    return false;
  },
-  contextMenuOrder: 6,
  contextItemLabel: "labels.addToLibrary",
 });
@@ -3,6 +3,7 @@ import { getDefaultAppState } from "../appState";
 import { ColorPicker } from "../components/ColorPicker";
 import { resetZoom, trash, zoomIn, zoomOut } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
+import { GRID_SIZE, ZOOM_STEP } from "../constants";
 import { getCommonBounds, getNonDeletedElements } from "../element";
 import { newElementWith } from "../element/mutateElement";
 import { ExcalidrawElement } from "../element/types";
@@ -51,7 +52,7 @@ export const actionClearCanvas = register({
        elementLocked: appState.elementLocked,
        exportBackground: appState.exportBackground,
        exportEmbedScene: appState.exportEmbedScene,
-        gridSize: appState.gridSize,
+        gridSize: appState.gridSize || GRID_SIZE,
        shouldAddWatermark: appState.shouldAddWatermark,
        showStats: appState.showStats,
        pasteDialog: appState.pasteDialog,
@@ -75,8 +76,6 @@ export const actionClearCanvas = register({
  ),
 });

-const ZOOM_STEP = 0.1;
-
 export const actionZoomIn = register({
  name: "zoomIn",
  perform: (_elements, appState) => {
@@ -0,0 +1,114 @@
+import { CODES, KEYS } from "../keys";
+import { register } from "./register";
+import { copyToClipboard } from "../clipboard";
+import { actionDeleteSelected } from "./actionDeleteSelected";
+import { getSelectedElements } from "../scene/selection";
+import { exportCanvas } from "../data/index";
+import { getNonDeletedElements } from "../element";
+import { t } from "../i18n";
+
+export const actionCopy = register({
+  name: "copy",
+  perform: (elements, appState) => {
+    copyToClipboard(getNonDeletedElements(elements), appState);
+
+    return {
+      commitToHistory: false,
+    };
+  },
+  contextItemLabel: "labels.copy",
+  keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.code === CODES.C,
+});
+
+export const actionCut = register({
+  name: "cut",
+  perform: (elements, appState, data, app) => {
+    actionCopy.perform(elements, appState, data, app);
+    return actionDeleteSelected.perform(elements, appState, data, app);
+  },
+  contextItemLabel: "labels.cut",
+  keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.code === CODES.X,
+});
+
+export const actionCopyAsSvg = register({
+  name: "copyAsSvg",
+  perform: async (elements, appState, _data, app) => {
+    if (!app.canvas) {
+      return {
+        commitToHistory: false,
+      };
+    }
+    const selectedElements = getSelectedElements(
+      getNonDeletedElements(elements),
+      appState,
+    );
+    try {
+      await exportCanvas(
+        "clipboard-svg",
+        selectedElements.length
+          ? selectedElements
+          : getNonDeletedElements(elements),
+        appState,
+        app.canvas,
+        appState,
+      );
+      return {
+        commitToHistory: false,
+      };
+    } catch (error) {
+      console.error(error);
+      return {
+        appState: {
+          ...appState,
+          errorMessage: error.message,
+        },
+        commitToHistory: false,
+      };
+    }
+  },
+  contextItemLabel: "labels.copyAsSvg",
+});
+
+export const actionCopyAsPng = register({
+  name: "copyAsPng",
+  perform: async (elements, appState, _data, app) => {
+    if (!app.canvas) {
+      return {
+        commitToHistory: false,
+      };
+    }
+    const selectedElements = getSelectedElements(
+      getNonDeletedElements(elements),
+      appState,
+    );
+    try {
+      await exportCanvas(
+        "clipboard",
+        selectedElements.length
+          ? selectedElements
+          : getNonDeletedElements(elements),
+        appState,
+        app.canvas,
+        appState,
+      );
+      return {
+        appState: {
+          ...appState,
+          toastMessage: t("toast.copyToClipboardAsPng"),
+        },
+        commitToHistory: false,
+      };
+    } catch (error) {
+      console.error(error);
+      return {
+        appState: {
+          ...appState,
+          errorMessage: error.message,
+        },
+        commitToHistory: false,
+      };
+    }
+  },
+  contextItemLabel: "labels.copyAsPng",
+  keyTest: (event) => event.code === CODES.C && event.altKey && event.shiftKey,
+});
@@ -136,7 +136,6 @@ export const actionDeleteSelected = register({
    };
  },
  contextItemLabel: "labels.delete",
-  contextMenuOrder: 999999,
  keyTest: (event) => event.key === KEYS.BACKSPACE || event.key === KEYS.DELETE,
  PanelComponent: ({ elements, appState, updateData }) => (
    <ToolButton
@@ -125,7 +125,6 @@ export const actionGroup = register({
      commitToHistory: true,
    };
  },
-  contextMenuOrder: 4,
  contextItemLabel: "labels.group",
  contextItemPredicate: (elements, appState) =>
    enableActionGroup(elements, appState),
@@ -174,7 +173,6 @@ export const actionUngroup = register({
  },
  keyTest: (event) =>
    event.shiftKey && event[KEYS.CTRL_OR_CMD] && event.code === CODES.G,
-  contextMenuOrder: 5,
  contextItemLabel: "labels.ungroup",
  contextItemPredicate: (elements, appState) =>
    getSelectedGroupIds(appState).length > 0,
@@ -6,7 +6,7 @@ import { t } from "../i18n";
 import { SceneHistory, HistoryEntry } from "../history";
 import { ExcalidrawElement } from "../element/types";
 import { AppState } from "../types";
-import { KEYS } from "../keys";
+import { isWindows, KEYS } from "../keys";
 import { getElementMap } from "../element";
 import { newElementWith } from "../element/mutateElement";
 import { fixBindingsAfterDeletion } from "../element/binding";
@@ -59,16 +59,16 @@ const writeData = (
  return { commitToHistory };
 };

-const testUndo = (shift: boolean) => (event: KeyboardEvent) =>
-  event[KEYS.CTRL_OR_CMD] && /z/i.test(event.key) && event.shiftKey === shift;
-
 type ActionCreator = (history: SceneHistory) => Action;

 export const createUndoAction: ActionCreator = (history) => ({
  name: "undo",
  perform: (elements, appState) =>
    writeData(elements, appState, () => history.undoOnce()),
-  keyTest: testUndo(false),
+  keyTest: (event) =>
+    event[KEYS.CTRL_OR_CMD] &&
+    event.key.toLowerCase() === KEYS.Z &&
+    !event.shiftKey,
  PanelComponent: ({ updateData }) => (
    <ToolButton
      type="button"
@@ -84,7 +84,11 @@ export const createRedoAction: ActionCreator = (history) => ({
  name: "redo",
  perform: (elements, appState) =>
    writeData(elements, appState, () => history.redoOnce()),
-  keyTest: testUndo(true),
+  keyTest: (event) =>
+    (event[KEYS.CTRL_OR_CMD] &&
+      event.shiftKey &&
+      event.key.toLowerCase() === KEYS.Z) ||
+    (isWindows && event.ctrlKey && !event.shiftKey && event.key === KEYS.Y),
  PanelComponent: ({ updateData }) => (
    <ToolButton
      type="button"
@@ -74,7 +74,7 @@ export const actionShortcuts = register({
    return {
      appState: {
        ...appState,
-        showHelpDialog: true,
+        showHelpDialog: !appState.showHelpDialog,
      },
      commitToHistory: false,
    };
@@ -34,7 +34,6 @@ export const actionCopyStyles = register({
  contextItemLabel: "labels.copyStyles",
  keyTest: (event) =>
    event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.C,
-  contextMenuOrder: 0,
 });

 export const actionPasteStyles = register({
@@ -74,5 +73,4 @@ export const actionPasteStyles = register({
  contextItemLabel: "labels.pasteStyles",
  keyTest: (event) =>
    event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.V,
-  contextMenuOrder: 1,
 });
@@ -0,0 +1,21 @@
+import { trackEvent } from "../analytics";
+import { CODES, KEYS } from "../keys";
+import { AppState } from "../types";
+import { register } from "./register";
+
+export const actionToggleGridMode = register({
+  name: "gridMode",
+  perform(elements, appState) {
+    trackEvent("view", "mode", "grid");
+    return {
+      appState: {
+        ...appState,
+        showGrid: !appState.showGrid,
+      },
+      commitToHistory: false,
+    };
+  },
+  checked: (appState: AppState) => appState.showGrid,
+  contextItemLabel: "labels.gridMode",
+  keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.code === CODES.QUOTE,
+});
@@ -0,0 +1,16 @@
+import { register } from "./register";
+
+export const actionToggleStats = register({
+  name: "stats",
+  perform(elements, appState) {
+    return {
+      appState: {
+        ...appState,
+        showStats: !this.checked!(appState),
+      },
+      commitToHistory: false,
+    };
+  },
+  checked: (appState) => appState.showStats,
+  contextItemLabel: "stats.title",
+});
@@ -0,0 +1,22 @@
+import { CODES, KEYS } from "../keys";
+import { register } from "./register";
+import { trackEvent } from "../analytics";
+
+export const actionToggleViewMode = register({
+  name: "viewMode",
+  perform(elements, appState) {
+    trackEvent("view", "mode", "view");
+    return {
+      appState: {
+        ...appState,
+        viewModeEnabled: !this.checked!(appState),
+        selectedElementIds: {},
+      },
+      commitToHistory: false,
+    };
+  },
+  checked: (appState) => appState.viewModeEnabled,
+  contextItemLabel: "labels.viewMode",
+  keyTest: (event) =>
+    !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.R,
+});
@@ -0,0 +1,22 @@
+import { CODES, KEYS } from "../keys";
+import { register } from "./register";
+import { trackEvent } from "../analytics";
+
+export const actionToggleZenMode = register({
+  name: "zenMode",
+  perform(elements, appState) {
+    trackEvent("view", "mode", "zen");
+
+    return {
+      appState: {
+        ...appState,
+        zenModeEnabled: !this.checked!(appState),
+      },
+      commitToHistory: false,
+    };
+  },
+  checked: (appState) => appState.zenModeEnabled,
+  contextItemLabel: "buttons.zenMode",
+  keyTest: (event) =>
+    !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.Z,
+});
@@ -65,3 +65,15 @@ export {
  distributeHorizontally,
  distributeVertically,
 } from "./actionDistribute";
+
+export {
+  actionCopy,
+  actionCut,
+  actionCopyAsPng,
+  actionCopyAsSvg,
+} from "./actionClipboard";
+
+export { actionToggleGridMode } from "./actionToggleGridMode";
+export { actionToggleZenMode } from "./actionToggleZenMode";
+
+export { actionToggleStats } from "./actionToggleStats";
@@ -3,14 +3,15 @@ import {
  Action,
  ActionsManagerInterface,
  UpdaterFn,
-  ActionFilterFn,
  ActionName,
  ActionResult,
 } from "./types";
 import { ExcalidrawElement } from "../element/types";
-import { AppState } from "../types";
-import { t } from "../i18n";
-import { ShortcutName } from "./shortcuts";
+import { AppState, ExcalidrawProps } from "../types";
+
+// This is the <App> component, but for now we don't care about anything but its
+// `canvas` state.
+type App = { canvas: HTMLCanvasElement | null; props: ExcalidrawProps };

 export class ActionManager implements ActionsManagerInterface {
  actions = {} as ActionsManagerInterface["actions"];
@@ -18,13 +19,14 @@ export class ActionManager implements ActionsManagerInterface {
  updater: (actionResult: ActionResult | Promise<ActionResult>) => void;

  getAppState: () => Readonly<AppState>;
-
  getElementsIncludingDeleted: () => readonly ExcalidrawElement[];
+  app: App;

  constructor(
    updater: UpdaterFn,
    getAppState: () => AppState,
    getElementsIncludingDeleted: () => readonly ExcalidrawElement[],
+    app: App,
  ) {
    this.updater = (actionResult) => {
      if (actionResult && "then" in actionResult) {
@@ -37,6 +39,7 @@ export class ActionManager implements ActionsManagerInterface {
    };
    this.getAppState = getAppState;
    this.getElementsIncludingDeleted = getElementsIncludingDeleted;
+    this.app = app;
  }

  registerAction(action: Action) {
@@ -63,6 +66,12 @@ export class ActionManager implements ActionsManagerInterface {
    if (data.length === 0) {
      return false;
    }
+    const { viewModeEnabled } = this.getAppState();
+    if (viewModeEnabled) {
+      if (data[0].name !== "viewMode") {
+        return false;
+      }
+    }

    event.preventDefault();
    this.updater(
@@ -70,6 +79,7 @@ export class ActionManager implements ActionsManagerInterface {
        this.getElementsIncludingDeleted(),
        this.getAppState(),
        null,
+        this.app,
      ),
    );
    return true;
@@ -81,43 +91,11 @@ export class ActionManager implements ActionsManagerInterface {
        this.getElementsIncludingDeleted(),
        this.getAppState(),
        null,
+        this.app,
      ),
    );
  }

-  getContextMenuItems(actionFilter: ActionFilterFn = (action) => action) {
-    return Object.values(this.actions)
-      .filter(actionFilter)
-      .filter((action) => "contextItemLabel" in action)
-      .filter((action) =>
-        action.contextItemPredicate
-          ? action.contextItemPredicate(
-              this.getElementsIncludingDeleted(),
-              this.getAppState(),
-            )
-          : true,
-      )
-      .sort(
-        (a, b) =>
-          (a.contextMenuOrder !== undefined ? a.contextMenuOrder : 999) -
-          (b.contextMenuOrder !== undefined ? b.contextMenuOrder : 999),
-      )
-      .map((action) => ({
-        // take last bit of the label  "labels.<shortcutName>"
-        shortcutName: action.contextItemLabel?.split(".").pop() as ShortcutName,
-        label: action.contextItemLabel ? t(action.contextItemLabel) : "",
-        action: () => {
-          this.updater(
-            action.perform(
-              this.getElementsIncludingDeleted(),
-              this.getAppState(),
-              null,
-            ),
-          );
-        },
-      }));
-  }
-
  // Id is an attribute that we can use to pass in data like keys.
  // This is needed for dynamically generated action components
  // like the user list. We can use this key to extract more
@@ -132,6 +110,7 @@ export class ActionManager implements ActionsManagerInterface {
            this.getElementsIncludingDeleted(),
            this.getAppState(),
            formState,
+            this.app,
          ),
        );
      };
@@ -9,7 +9,7 @@ export type ShortcutName =
  | "copyStyles"
  | "pasteStyles"
  | "selectAll"
-  | "delete"
+  | "deleteSelectedElements"
  | "duplicateSelection"
  | "sendBackward"
  | "bringForward"
@@ -22,7 +22,8 @@ export type ShortcutName =
  | "gridMode"
  | "zenMode"
  | "stats"
-  | "addToLibrary";
+  | "addToLibrary"
+  | "viewMode";

 const shortcutMap: Record<ShortcutName, string[]> = {
  cut: [getShortcutKey("CtrlOrCmd+X")],
@@ -31,7 +32,7 @@ const shortcutMap: Record<ShortcutName, string[]> = {
  copyStyles: [getShortcutKey("CtrlOrCmd+Alt+C")],
  pasteStyles: [getShortcutKey("CtrlOrCmd+Alt+V")],
  selectAll: [getShortcutKey("CtrlOrCmd+A")],
-  delete: [getShortcutKey("Del")],
+  deleteSelectedElements: [getShortcutKey("Del")],
  duplicateSelection: [
    getShortcutKey("CtrlOrCmd+D"),
    getShortcutKey(`Alt+${t("helpDialog.drag")}`),
@@ -56,6 +57,7 @@ const shortcutMap: Record<ShortcutName, string[]> = {
  zenMode: [getShortcutKey("Alt+Z")],
  stats: [],
  addToLibrary: [],
+  viewMode: [getShortcutKey("Alt+R")],
 };

 export const getShortcutFromShortcutName = (name: ShortcutName) => {
@@ -16,12 +16,18 @@ type ActionFn = (
  elements: readonly ExcalidrawElement[],
  appState: Readonly<AppState>,
  formData: any,
+  app: { canvas: HTMLCanvasElement | null },
 ) => ActionResult | Promise<ActionResult>;

 export type UpdaterFn = (res: ActionResult) => void;
 export type ActionFilterFn = (action: Action) => void;

 export type ActionName =
+  | "copy"
+  | "cut"
+  | "paste"
+  | "copyAsPng"
+  | "copyAsSvg"
  | "sendBackward"
  | "bringForward"
  | "sendToBack"
@@ -29,6 +35,9 @@ export type ActionName =
  | "copyStyles"
  | "selectAll"
  | "pasteStyles"
+  | "gridMode"
+  | "zenMode"
+  | "stats"
  | "changeStrokeColor"
  | "changeBackgroundColor"
  | "changeFillStyle"
@@ -75,7 +84,8 @@ export type ActionName =
  | "alignVerticallyCentered"
  | "alignHorizontallyCentered"
  | "distributeHorizontally"
-  | "distributeVertically";
+  | "distributeVertically"
+  | "viewMode";

 export interface Action {
  name: ActionName;
@@ -93,19 +103,16 @@ export interface Action {
    elements: readonly ExcalidrawElement[],
  ) => boolean;
  contextItemLabel?: string;
-  contextMenuOrder?: number;
  contextItemPredicate?: (
    elements: readonly ExcalidrawElement[],
    appState: AppState,
  ) => boolean;
+  checked?: (appState: Readonly<AppState>) => boolean;
 }

 export interface ActionsManagerInterface {
  actions: Record<ActionName, Action>;
  registerAction: (action: Action) => void;
  handleKeyDown: (event: KeyboardEvent) => boolean;
-  getContextMenuItems: (
-    actionFilter: ActionFilterFn,
-  ) => { label: string; action: () => void }[];
  renderAction: (name: ActionName) => React.ReactElement | null;
 }
@@ -3,9 +3,10 @@ import {
  DEFAULT_FONT_FAMILY,
  DEFAULT_FONT_SIZE,
  DEFAULT_TEXT_ALIGN,
+  GRID_SIZE,
 } from "./constants";
 import { t } from "./i18n";
-import { AppState, FlooredNumber, NormalizedZoomValue } from "./types";
+import { AppState, NormalizedZoomValue } from "./types";
 import { getDateTime } from "./utils";

 export const getDefaultAppState = (): Omit<
@@ -41,7 +42,7 @@ export const getDefaultAppState = (): Omit<
    exportBackground: true,
    exportEmbedScene: false,
    fileHandle: null,
-    gridSize: null,
+    gridSize: GRID_SIZE,
    height: window.innerHeight,
    isBindingEnabled: true,
    isLibraryOpen: false,
@@ -56,13 +57,14 @@ export const getDefaultAppState = (): Omit<
    previousSelectedElementIds: {},
    resizingElement: null,
    scrolledOutside: false,
-    scrollX: 0 as FlooredNumber,
-    scrollY: 0 as FlooredNumber,
+    scrollX: 0,
+    scrollY: 0,
    selectedElementIds: {},
    selectedGroupIds: {},
    selectionElement: null,
    shouldAddWatermark: false,
    shouldCacheIgnoreZoom: false,
+    showGrid: false,
    showHelpDialog: false,
    showStats: false,
    startBoundElement: null,
@@ -72,6 +74,7 @@ export const getDefaultAppState = (): Omit<
    width: window.innerWidth,
    zenModeEnabled: false,
    zoom: { value: 1 as NormalizedZoomValue, translation: { x: 0, y: 0 } },
+    viewModeEnabled: false,
  };
 };

@@ -119,6 +122,7 @@ const APP_STATE_STORAGE_CONF = (<
  exportEmbedScene: { browser: true, export: false },
  fileHandle: { browser: false, export: false },
  gridSize: { browser: true, export: true },
+  showGrid: { browser: true, export: false },
  height: { browser: false, export: false },
  isBindingEnabled: { browser: false, export: false },
  isLibraryOpen: { browser: false, export: false },
@@ -151,6 +155,7 @@ const APP_STATE_STORAGE_CONF = (<
  width: { browser: false, export: false },
  zenModeEnabled: { browser: true, export: false },
  zoom: { browser: true, export: false },
+  viewModeEnabled: { browser: false, export: false },
 });

 const _clearAppStateForStorage = <ExportType extends "export" | "browser">(
@@ -2,8 +2,31 @@ import { Point, simplify } from "points-on-curve";
 import React from "react";
 import { RoughCanvas } from "roughjs/bin/canvas";
 import rough from "roughjs/bin/rough";
+import clsx from "clsx";
+
 import "../actions";
-import { actionDeleteSelected, actionFinalize } from "../actions";
+import {
+  actionAddToLibrary,
+  actionBringForward,
+  actionBringToFront,
+  actionCopy,
+  actionCopyAsPng,
+  actionCopyAsSvg,
+  actionCopyStyles,
+  actionCut,
+  actionDeleteSelected,
+  actionDuplicateSelection,
+  actionFinalize,
+  actionGroup,
+  actionPasteStyles,
+  actionSelectAll,
+  actionSendBackward,
+  actionSendToBack,
+  actionToggleGridMode,
+  actionToggleStats,
+  actionToggleZenMode,
+  actionUngroup,
+} from "../actions";
 import { createRedoAction, createUndoAction } from "../actions/actionHistory";
 import { ActionManager } from "../actions/manager";
 import { actions } from "../actions/register";
@@ -18,7 +41,6 @@ import {
 } from "../clipboard";
 import {
  APP_NAME,
-  CANVAS_ONLY_ACTIONS,
  CURSOR_TYPE,
  DEFAULT_VERTICAL_ALIGN,
  DRAGGING_THRESHOLD,
@@ -26,15 +48,15 @@ import {
  ELEMENT_TRANSLATE_AMOUNT,
  ENV,
  EVENT,
-  GRID_SIZE,
  LINE_CONFIRM_THRESHOLD,
  MIME_TYPES,
  POINTER_BUTTON,
  TAP_TWICE_TIMEOUT,
  TEXT_TO_CENTER_SNAP_THRESHOLD,
  TOUCH_CTX_MENU_TIMEOUT,
+  ZOOM_STEP,
 } from "../constants";
-import { exportCanvas, loadFromBlob } from "../data";
+import { loadFromBlob } from "../data";
 import { isValidLibrary } from "../data/json";
 import { Library } from "../data/library";
 import { restore } from "../data/restore";
@@ -127,7 +149,6 @@ import {
  getSelectedElements,
  isOverScrollBars,
  isSomeElementSelected,
-  normalizeScroll,
 } from "../scene";
 import Scene from "../scene/Scene";
 import { SceneState, ScrollBars } from "../scene/types";
@@ -155,10 +176,12 @@ import {
  viewportCoordsToSceneCoords,
  withBatchedUpdates,
 } from "../utils";
-import ContextMenu from "./ContextMenu";
+import { isMobile } from "../is-mobile";
+import ContextMenu, { ContextMenuOption } from "./ContextMenu";
 import LayerUI from "./LayerUI";
 import { Stats } from "./Stats";
 import { Toast } from "./Toast";
+import { actionToggleViewMode } from "../actions/actionToggleViewMode";

 const { history } = createHistory();

@@ -248,6 +271,7 @@ export type ExcalidrawImperativeAPI = {
  };
  setScrollToCenter: InstanceType<typeof App>["setScrollToCenter"];
  getSceneElements: InstanceType<typeof App>["getSceneElements"];
+  getAppState: () => InstanceType<typeof App>["state"];
  readyPromise: ResolvablePromise<ExcalidrawImperativeAPI>;
  ready: true;
 };
@@ -274,6 +298,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      offsetLeft,
      offsetTop,
      excalidrawRef,
+      viewModeEnabled = false,
    } = props;
    this.state = {
      ...defaultAppState,
@@ -281,6 +306,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      width,
      height,
      ...this.getCanvasOffsets({ offsetLeft, offsetTop }),
+      viewModeEnabled,
    };
    if (excalidrawRef) {
      const readyPromise =
@@ -298,6 +324,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
        },
        setScrollToCenter: this.setScrollToCenter,
        getSceneElements: this.getSceneElements,
+        getAppState: () => this.state,
      } as const;
      if (typeof excalidrawRef === "function") {
        excalidrawRef(api);
@@ -312,6 +339,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      this.syncActionResult,
      () => this.state,
      () => this.scene.getElementsIncludingDeleted(),
+      this,
    );
    this.actionManager.registerAll(actions);

@@ -319,6 +347,62 @@ class App extends React.Component<ExcalidrawProps, AppState> {
    this.actionManager.registerAction(createRedoAction(history));
  }

+  private renderCanvas() {
+    const canvasScale = window.devicePixelRatio;
+    const {
+      width: canvasDOMWidth,
+      height: canvasDOMHeight,
+      viewModeEnabled,
+    } = this.state;
+    const canvasWidth = canvasDOMWidth * canvasScale;
+    const canvasHeight = canvasDOMHeight * canvasScale;
+    if (viewModeEnabled) {
+      return (
+        <canvas
+          id="canvas"
+          style={{
+            width: canvasDOMWidth,
+            height: canvasDOMHeight,
+            cursor: "grabbing",
+          }}
+          width={canvasWidth}
+          height={canvasHeight}
+          ref={this.handleCanvasRef}
+          onContextMenu={this.handleCanvasContextMenu}
+          onPointerMove={this.handleCanvasPointerMove}
+          onPointerUp={this.removePointer}
+          onPointerCancel={this.removePointer}
+          onTouchMove={this.handleTouchMove}
+          onPointerDown={this.handleCanvasPointerDown}
+        >
+          {t("labels.drawingCanvas")}
+        </canvas>
+      );
+    }
+    return (
+      <canvas
+        id="canvas"
+        style={{
+          width: canvasDOMWidth,
+          height: canvasDOMHeight,
+        }}
+        width={canvasWidth}
+        height={canvasHeight}
+        ref={this.handleCanvasRef}
+        onContextMenu={this.handleCanvasContextMenu}
+        onPointerDown={this.handleCanvasPointerDown}
+        onDoubleClick={this.handleCanvasDoubleClick}
+        onPointerMove={this.handleCanvasPointerMove}
+        onPointerUp={this.removePointer}
+        onPointerCancel={this.removePointer}
+        onTouchMove={this.handleTouchMove}
+        onDrop={this.handleCanvasOnDrop}
+      >
+        {t("labels.drawingCanvas")}
+      </canvas>
+    );
+  }
+
  public render() {
    const {
      zenModeEnabled,
@@ -326,20 +410,19 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      height: canvasDOMHeight,
      offsetTop,
      offsetLeft,
+      viewModeEnabled,
    } = this.state;

    const { onCollabButtonClick, onExportToBackend, renderFooter } = this.props;
-    const canvasScale = window.devicePixelRatio;
-
-    const canvasWidth = canvasDOMWidth * canvasScale;
-    const canvasHeight = canvasDOMHeight * canvasScale;

    const DEFAULT_PASTE_X = canvasDOMWidth / 2;
    const DEFAULT_PASTE_Y = canvasDOMHeight / 2;

    return (
      <div
-        className="excalidraw"
+        className={clsx("excalidraw", {
+          "excalidraw--view-mode": viewModeEnabled,
+        })}
        ref={this.excalidrawContainerRef}
        style={{
          width: canvasDOMWidth,
@@ -369,9 +452,11 @@ class App extends React.Component<ExcalidrawProps, AppState> {
          isCollaborating={this.props.isCollaborating || false}
          onExportToBackend={onExportToBackend}
          renderCustomFooter={renderFooter}
+          viewModeEnabled={viewModeEnabled}
        />
        {this.state.showStats && (
          <Stats
+            setAppState={this.setAppState}
            appState={this.state}
            elements={this.scene.getElements()}
            onClose={this.toggleStats}
@@ -383,28 +468,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
            clearToast={this.clearToast}
          />
        )}
-        <main>
-          <canvas
-            id="canvas"
-            style={{
-              width: canvasDOMWidth,
-              height: canvasDOMHeight,
-            }}
-            width={canvasWidth}
-            height={canvasHeight}
-            ref={this.handleCanvasRef}
-            onContextMenu={this.handleCanvasContextMenu}
-            onPointerDown={this.handleCanvasPointerDown}
-            onDoubleClick={this.handleCanvasDoubleClick}
-            onPointerMove={this.handleCanvasPointerMove}
-            onPointerUp={this.removePointer}
-            onPointerCancel={this.removePointer}
-            onTouchMove={this.handleTouchMove}
-            onDrop={this.handleCanvasOnDrop}
-          >
-            {t("labels.drawingCanvas")}
-          </canvas>
-        </main>
+        <main>{this.renderCanvas()}</main>
      </div>
    );
  }
@@ -444,6 +508,13 @@ class App extends React.Component<ExcalidrawProps, AppState> {
        if (actionResult.commitToHistory) {
          history.resumeRecording();
        }
+
+        let viewModeEnabled = actionResult?.appState?.viewModeEnabled || false;
+
+        if (typeof this.props.viewModeEnabled !== "undefined") {
+          viewModeEnabled = this.props.viewModeEnabled;
+        }
+
        this.setState(
          (state) => ({
            ...actionResult.appState,
@@ -453,6 +524,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
            height: state.height,
            offsetTop: state.offsetTop,
            offsetLeft: state.offsetLeft,
+            viewModeEnabled,
          }),
          () => {
            if (actionResult.syncHistory) {
@@ -635,7 +707,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
    }

    this.scene.addCallback(this.onSceneUpdated);
-
    this.addEventListeners();

    // optim to avoid extra render on init
@@ -702,25 +773,16 @@ class App extends React.Component<ExcalidrawProps, AppState> {
  }

  private addEventListeners() {
+    this.removeEventListeners();
    document.addEventListener(EVENT.COPY, this.onCopy);
-    document.addEventListener(EVENT.PASTE, this.pasteFromClipboard);
-    document.addEventListener(EVENT.CUT, this.onCut);
-
    document.addEventListener(EVENT.KEYDOWN, this.onKeyDown, false);
    document.addEventListener(EVENT.KEYUP, this.onKeyUp, { passive: true });
    document.addEventListener(
      EVENT.MOUSE_MOVE,
      this.updateCurrentCursorPosition,
    );
-    window.addEventListener(EVENT.RESIZE, this.onResize, false);
-    window.addEventListener(EVENT.UNLOAD, this.onUnload, false);
-    window.addEventListener(EVENT.BLUR, this.onBlur, false);
-    window.addEventListener(EVENT.DRAG_OVER, this.disableEvent, false);
-    window.addEventListener(EVENT.DROP, this.disableEvent, false);
-
    // rerender text elements on font load to fix #637 && #1553
    document.fonts?.addEventListener?.("loadingdone", this.onFontLoaded);
-
    // Safari-only desktop pinch zoom
    document.addEventListener(
      EVENT.GESTURE_START,
@@ -737,6 +799,18 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      this.onGestureEnd as any,
      false,
    );
+    if (this.state.viewModeEnabled) {
+      return;
+    }
+
+    document.addEventListener(EVENT.PASTE, this.pasteFromClipboard);
+    document.addEventListener(EVENT.CUT, this.onCut);
+
+    window.addEventListener(EVENT.RESIZE, this.onResize, false);
+    window.addEventListener(EVENT.UNLOAD, this.onUnload, false);
+    window.addEventListener(EVENT.BLUR, this.onBlur, false);
+    window.addEventListener(EVENT.DRAG_OVER, this.disableEvent, false);
+    window.addEventListener(EVENT.DROP, this.disableEvent, false);
  }

  componentDidUpdate(prevProps: ExcalidrawProps, prevState: AppState) {
@@ -759,6 +833,17 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      });
    }

+    if (prevProps.viewModeEnabled !== this.props.viewModeEnabled) {
+      this.setState(
+        { viewModeEnabled: !!this.props.viewModeEnabled },
+        this.addEventListeners,
+      );
+    }
+
+    if (prevState.viewModeEnabled !== this.state.viewModeEnabled) {
+      this.addEventListeners();
+    }
+
    document
      .querySelector(".excalidraw")
      ?.classList.toggle("Appearance_dark", this.state.appearance === "dark");
@@ -906,44 +991,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
    copyToClipboard(this.scene.getElements(), this.state);
  };

-  private copyToClipboardAsPng = async () => {
-    const elements = this.scene.getElements();
-
-    const selectedElements = getSelectedElements(elements, this.state);
-    try {
-      await exportCanvas(
-        "clipboard",
-        selectedElements.length ? selectedElements : elements,
-        this.state,
-        this.canvas!,
-        this.state,
-      );
-      this.setState({ toastMessage: t("toast.copyToClipboardAsPng") });
-    } catch (error) {
-      console.error(error);
-      this.setState({ errorMessage: error.message });
-    }
-  };
-
-  private copyToClipboardAsSvg = async () => {
-    const selectedElements = getSelectedElements(
-      this.scene.getElements(),
-      this.state,
-    );
-    try {
-      await exportCanvas(
-        "clipboard-svg",
-        selectedElements.length ? selectedElements : this.scene.getElements(),
-        this.state,
-        this.canvas!,
-        this.state,
-      );
-    } catch (error) {
-      console.error(error);
-      this.setState({ errorMessage: error.message });
-    }
-  };
-
  private static resetTapTwice() {
    didTapTwice = false;
  }
@@ -1041,7 +1088,12 @@ class App extends React.Component<ExcalidrawProps, AppState> {
    const dy = y - elementsCenterY;
    const groupIdMap = new Map();

-    const [gridX, gridY] = getGridPoint(dx, dy, this.state.gridSize);
+    const [gridX, gridY] = getGridPoint(
+      dx,
+      dy,
+      this.state.showGrid,
+      this.state.gridSize,
+    );

    const oldIdToDuplicatedId = new Map();
    const newElements = clipboardElements.map((element) => {
@@ -1146,24 +1198,18 @@ class App extends React.Component<ExcalidrawProps, AppState> {
  };

  toggleZenMode = () => {
-    this.setState({
-      zenModeEnabled: !this.state.zenModeEnabled,
-    });
+    this.actionManager.executeAction(actionToggleZenMode);
  };

  toggleGridMode = () => {
-    this.setState({
-      gridSize: this.state.gridSize ? null : GRID_SIZE,
-    });
+    this.actionManager.executeAction(actionToggleGridMode);
  };

  toggleStats = () => {
    if (!this.state.showStats) {
      trackEvent("dialog", "stats");
    }
-    this.setState({
-      showStats: !this.state.showStats,
-    });
+    this.actionManager.executeAction(actionToggleStats);
  };

  setScrollToCenter = (remoteElements: readonly ExcalidrawElement[]) => {
@@ -1253,34 +1299,25 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      });
    }

-    if (!event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.Z) {
-      this.toggleZenMode();
-    }
-
-    if (event[KEYS.CTRL_OR_CMD] && event.code === CODES.QUOTE) {
-      this.toggleGridMode();
-    }
-    if (event[KEYS.CTRL_OR_CMD]) {
-      this.setState({ isBindingEnabled: false });
-    }
-
-    if (event.code === CODES.C && event.altKey && event.shiftKey) {
-      this.copyToClipboardAsPng();
-      event.preventDefault();
-      return;
-    }
-
    if (this.actionManager.handleKeyDown(event)) {
      return;
    }

+    if (this.state.viewModeEnabled) {
+      return;
+    }
+
+    if (event[KEYS.CTRL_OR_CMD]) {
+      this.setState({ isBindingEnabled: false });
+    }
+
    if (event.code === CODES.NINE) {
      this.setState({ isLibraryOpen: !this.state.isLibraryOpen });
    }

    if (isArrowKey(event.key)) {
      const step =
-        (this.state.gridSize &&
+        (this.state.showGrid &&
          (event.shiftKey ? ELEMENT_TRANSLATE_AMOUNT : this.state.gridSize)) ||
        (event.shiftKey
          ? ELEMENT_SHIFT_TRANSLATE_AMOUNT
@@ -1778,8 +1815,8 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      const scaleFactor = distance / gesture.initialDistance;

      this.setState(({ zoom, scrollX, scrollY, offsetLeft, offsetTop }) => ({
-        scrollX: normalizeScroll(scrollX + deltaX / zoom.value),
-        scrollY: normalizeScroll(scrollY + deltaY / zoom.value),
+        scrollX: scrollX + deltaX / zoom.value,
+        scrollY: scrollY + deltaY / zoom.value,
        zoom: getNewZoom(
          getNormalizedZoom(initialScale * scaleFactor),
          zoom,
@@ -1822,6 +1859,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
        scenePointerX,
        scenePointerY,
        this.state.editingLinearElement,
+        this.state.showGrid,
        this.state.gridSize,
      );
      if (editingLinearElement !== this.state.editingLinearElement) {
@@ -2080,14 +2118,16 @@ class App extends React.Component<ExcalidrawProps, AppState> {

    lastPointerUp = onPointerUp;

-    window.addEventListener(EVENT.POINTER_MOVE, onPointerMove);
-    window.addEventListener(EVENT.POINTER_UP, onPointerUp);
-    window.addEventListener(EVENT.KEYDOWN, onKeyDown);
-    window.addEventListener(EVENT.KEYUP, onKeyUp);
-    pointerDownState.eventListeners.onMove = onPointerMove;
-    pointerDownState.eventListeners.onUp = onPointerUp;
-    pointerDownState.eventListeners.onKeyUp = onKeyUp;
-    pointerDownState.eventListeners.onKeyDown = onKeyDown;
+    if (!this.state.viewModeEnabled) {
+      window.addEventListener(EVENT.POINTER_MOVE, onPointerMove);
+      window.addEventListener(EVENT.POINTER_UP, onPointerUp);
+      window.addEventListener(EVENT.KEYDOWN, onKeyDown);
+      window.addEventListener(EVENT.KEYUP, onKeyUp);
+      pointerDownState.eventListeners.onMove = onPointerMove;
+      pointerDownState.eventListeners.onUp = onPointerUp;
+      pointerDownState.eventListeners.onKeyUp = onKeyUp;
+      pointerDownState.eventListeners.onKeyDown = onKeyDown;
+    }
  };

  private maybeOpenContextMenuAfterPointerDownOnTouchDevices = (
@@ -2137,7 +2177,8 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      !(
        gesture.pointers.size === 0 &&
        (event.button === POINTER_BUTTON.WHEEL ||
-          (event.button === POINTER_BUTTON.MAIN && isHoldingSpace))
+          (event.button === POINTER_BUTTON.MAIN && isHoldingSpace) ||
+          this.state.viewModeEnabled)
      )
    ) {
      return false;
@@ -2190,12 +2231,8 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      }

      this.setState({
-        scrollX: normalizeScroll(
-          this.state.scrollX - deltaX / this.state.zoom.value,
-        ),
-        scrollY: normalizeScroll(
-          this.state.scrollY - deltaY / this.state.zoom.value,
-        ),
+        scrollX: this.state.scrollX - deltaX / this.state.zoom.value,
+        scrollY: this.state.scrollY - deltaY / this.state.zoom.value,
      });
    });
    const teardown = withBatchedUpdates(
@@ -2252,7 +2289,12 @@ class App extends React.Component<ExcalidrawProps, AppState> {
    return {
      origin,
      originInGrid: tupleToCoors(
-        getGridPoint(origin.x, origin.y, this.state.gridSize),
+        getGridPoint(
+          origin.x,
+          origin.y,
+          this.state.showGrid,
+          this.state.gridSize,
+        ),
      ),
      scrollbars: isOverScrollBars(
        currentScrollBars,
@@ -2608,7 +2650,8 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      const [gridX, gridY] = getGridPoint(
        pointerDownState.origin.x,
        pointerDownState.origin.y,
-        elementType === "draw" ? null : this.state.gridSize,
+        elementType === "draw" ? false : this.state.showGrid,
+        this.state.gridSize,
      );

      /* If arrow is pre-arrowheads, it will have undefined for both start and end arrowheads.
@@ -2670,6 +2713,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
    const [gridX, gridY] = getGridPoint(
      pointerDownState.origin.x,
      pointerDownState.origin.y,
+      this.state.showGrid,
      this.state.gridSize,
    );
    const element = newElement({
@@ -2759,6 +2803,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      const [gridX, gridY] = getGridPoint(
        pointerCoords.x,
        pointerCoords.y,
+        this.state.showGrid,
        this.state.gridSize,
      );

@@ -2831,6 +2876,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
          const [dragX, dragY] = getGridPoint(
            pointerCoords.x - pointerDownState.drag.offset.x,
            pointerCoords.y - pointerDownState.drag.offset.y,
+            this.state.showGrid,
            this.state.gridSize,
          );

@@ -2883,6 +2929,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
                const [originDragX, originDragY] = getGridPoint(
                  pointerDownState.origin.x - pointerDownState.drag.offset.x,
                  pointerDownState.origin.y - pointerDownState.drag.offset.y,
+                  this.state.showGrid,
                  this.state.gridSize,
                );
                mutateElement(duplicatedElement, {
@@ -3009,9 +3056,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      const x = event.clientX;
      const dx = x - pointerDownState.lastCoords.x;
      this.setState({
-        scrollX: normalizeScroll(
-          this.state.scrollX - dx / this.state.zoom.value,
-        ),
+        scrollX: this.state.scrollX - dx / this.state.zoom.value,
      });
      pointerDownState.lastCoords.x = x;
      return true;
@@ -3021,9 +3066,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      const y = event.clientY;
      const dy = y - pointerDownState.lastCoords.y;
      this.setState({
-        scrollY: normalizeScroll(
-          this.state.scrollY - dy / this.state.zoom.value,
-        ),
+        scrollY: this.state.scrollY - dy / this.state.zoom.value,
      });
      pointerDownState.lastCoords.y = y;
      return true;
@@ -3543,6 +3586,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      const [gridX, gridY] = getGridPoint(
        pointerCoords.x,
        pointerCoords.y,
+        this.state.showGrid,
        this.state.gridSize,
      );
      dragNewElement(
@@ -3581,6 +3625,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
    const [resizeX, resizeY] = getGridPoint(
      pointerCoords.x - pointerDownState.resize.offset.x,
      pointerCoords.y - pointerDownState.resize.offset.y,
+      this.state.showGrid,
      this.state.gridSize,
    );
    if (
@@ -3616,52 +3661,87 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      this.state,
    );

+    const maybeGroupAction = actionGroup.contextItemPredicate!(
+      this.actionManager.getElementsIncludingDeleted(),
+      this.actionManager.getAppState(),
+    );
+
+    const maybeUngroupAction = actionUngroup.contextItemPredicate!(
+      this.actionManager.getElementsIncludingDeleted(),
+      this.actionManager.getAppState(),
+    );
+
+    const separator = "separator";
+
+    const _isMobile = isMobile();
+
    const elements = this.scene.getElements();
    const element = this.getElementAtPosition(x, y);
+    const options: ContextMenuOption[] = [];
+    if (probablySupportsClipboardBlob && elements.length > 0) {
+      options.push(actionCopyAsPng);
+    }
+
+    if (probablySupportsClipboardWriteText && elements.length > 0) {
+      options.push(actionCopyAsSvg);
+    }
    if (!element) {
+      const viewModeOptions: ContextMenuOption[] = [
+        ...options,
+        actionToggleStats,
+      ];
+
+      if (typeof this.props.viewModeEnabled === "undefined") {
+        viewModeOptions.push(actionToggleViewMode);
+      }
+
+      ContextMenu.push({
+        options: viewModeOptions,
+        top: clientY,
+        left: clientX,
+        actionManager: this.actionManager,
+        appState: this.state,
+      });
+
+      if (this.state.viewModeEnabled) {
+        return;
+      }
+
      ContextMenu.push({
        options: [
-          navigator.clipboard && {
-            shortcutName: "paste",
-            label: t("labels.paste"),
-            action: () => this.pasteFromClipboard(null),
-          },
+          _isMobile &&
+            navigator.clipboard && {
+              name: "paste",
+              perform: (elements, appStates) => {
+                this.pasteFromClipboard(null);
+                return {
+                  commitToHistory: false,
+                };
+              },
+              contextItemLabel: "labels.paste",
+            },
+          _isMobile && navigator.clipboard && separator,
          probablySupportsClipboardBlob &&
-            elements.length > 0 && {
-              shortcutName: "copyAsPng",
-              label: t("labels.copyAsPng"),
-              action: this.copyToClipboardAsPng,
-            },
+            elements.length > 0 &&
+            actionCopyAsPng,
          probablySupportsClipboardWriteText &&
-            elements.length > 0 && {
-              shortcutName: "copyAsSvg",
-              label: t("labels.copyAsSvg"),
-              action: this.copyToClipboardAsSvg,
-            },
-          ...this.actionManager.getContextMenuItems((action) =>
-            CANVAS_ONLY_ACTIONS.includes(action.name),
-          ),
-          {
-            checked: this.state.gridSize !== null,
-            shortcutName: "gridMode",
-            label: t("labels.gridMode"),
-            action: this.toggleGridMode,
-          },
-          {
-            checked: this.state.zenModeEnabled,
-            shortcutName: "zenMode",
-            label: t("buttons.zenMode"),
-            action: this.toggleZenMode,
-          },
-          {
-            checked: this.state.showStats,
-            shortcutName: "stats",
-            label: t("stats.title"),
-            action: this.toggleStats,
-          },
+            elements.length > 0 &&
+            actionCopyAsSvg,
+          ((probablySupportsClipboardBlob && elements.length > 0) ||
+            (probablySupportsClipboardWriteText && elements.length > 0)) &&
+            separator,
+          actionSelectAll,
+          separator,
+          actionToggleGridMode,
+          actionToggleZenMode,
+          typeof this.props.viewModeEnabled === "undefined" &&
+            actionToggleViewMode,
+          actionToggleStats,
        ],
        top: clientY,
        left: clientX,
+        actionManager: this.actionManager,
+        appState: this.state,
      });
      return;
    }
@@ -3670,39 +3750,55 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      this.setState({ selectedElementIds: { [element.id]: true } });
    }

+    if (this.state.viewModeEnabled) {
+      ContextMenu.push({
+        options: [navigator.clipboard && actionCopy, ...options],
+        top: clientY,
+        left: clientX,
+        actionManager: this.actionManager,
+        appState: this.state,
+      });
+      return;
+    }
+
    ContextMenu.push({
      options: [
-        {
-          shortcutName: "cut",
-          label: t("labels.cut"),
-          action: this.cutAll,
-        },
-        navigator.clipboard && {
-          shortcutName: "copy",
-          label: t("labels.copy"),
-          action: this.copyAll,
-        },
-        navigator.clipboard && {
-          shortcutName: "paste",
-          label: t("labels.paste"),
-          action: () => this.pasteFromClipboard(null),
-        },
-        probablySupportsClipboardBlob && {
-          shortcutName: "copyAsPng",
-          label: t("labels.copyAsPng"),
-          action: this.copyToClipboardAsPng,
-        },
-        probablySupportsClipboardWriteText && {
-          shortcutName: "copyAsSvg",
-          label: t("labels.copyAsSvg"),
-          action: this.copyToClipboardAsSvg,
-        },
-        ...this.actionManager.getContextMenuItems(
-          (action) => !CANVAS_ONLY_ACTIONS.includes(action.name),
-        ),
+        _isMobile && actionCut,
+        _isMobile && navigator.clipboard && actionCopy,
+        _isMobile &&
+          navigator.clipboard && {
+            name: "paste",
+            perform: (elements, appStates) => {
+              this.pasteFromClipboard(null);
+              return {
+                commitToHistory: false,
+              };
+            },
+            contextItemLabel: "labels.paste",
+          },
+        _isMobile && separator,
+        ...options,
+        separator,
+        actionCopyStyles,
+        actionPasteStyles,
+        separator,
+        maybeGroupAction && actionGroup,
+        maybeUngroupAction && actionUngroup,
+        (maybeGroupAction || maybeUngroupAction) && separator,
+        actionAddToLibrary,
+        separator,
+        actionSendBackward,
+        actionBringForward,
+        actionSendToBack,
+        actionBringToFront,
+        separator,
+        actionDuplicateSelection,
+        actionDeleteSelected,
      ],
      top: clientY,
      left: clientX,
+      actionManager: this.actionManager,
+      appState: this.state,
    });
  };

@@ -3733,9 +3829,15 @@ class App extends React.Component<ExcalidrawProps, AppState> {
        }, 1000);
      }

+      let newZoom = this.state.zoom.value - delta / 100;
+      // increase zoom steps the more zoomed-in we are (applies to >100% only)
+      newZoom += Math.log10(Math.max(1, this.state.zoom.value)) * -sign;
+      // round to nearest step
+      newZoom = Math.round(newZoom * ZOOM_STEP * 100) / (ZOOM_STEP * 100);
+
      this.setState(({ zoom, offsetLeft, offsetTop }) => ({
        zoom: getNewZoom(
-          getNormalizedZoom(zoom.value - delta / 100),
+          getNormalizedZoom(newZoom),
          zoom,
          { left: offsetLeft, top: offsetTop },
          {
@@ -3758,14 +3860,14 @@ class App extends React.Component<ExcalidrawProps, AppState> {
    if (event.shiftKey) {
      this.setState(({ zoom, scrollX }) => ({
        // on Mac, shift+wheel tends to result in deltaX
-        scrollX: normalizeScroll(scrollX - (deltaY || deltaX) / zoom.value),
+        scrollX: scrollX - (deltaY || deltaX) / zoom.value,
      }));
      return;
    }

    this.setState(({ zoom, scrollX, scrollY }) => ({
-      scrollX: normalizeScroll(scrollX - deltaX / zoom.value),
-      scrollY: normalizeScroll(scrollY - deltaY / zoom.value),
+      scrollX: scrollX - deltaX / zoom.value,
+      scrollY: scrollY - deltaY / zoom.value,
    }));
  });

@@ -1,4 +1,4 @@
-@import "../css/_variables";
+@import "../css/variables.module";

 .excalidraw {
  .Avatar {
@@ -1,4 +1,4 @@
-@import "../css/_variables";
+@import "../css/variables.module";

 .excalidraw {
  .CollabButton.is-collaborating {
@@ -1,4 +1,4 @@
-@import "../css/_variables";
+@import "../css/variables.module";

 .excalidraw {
  .color-picker {
@@ -1,4 +1,4 @@
-@import "../css/_variables";
+@import "../css/variables.module";

 .excalidraw {
  .context-menu {
@@ -9,9 +9,10 @@
    list-style: none;
    user-select: none;
    margin: -0.25rem 0 0 0.125rem;
-    padding: 0.25rem 0;
+    padding: 0.5rem 0;
    background-color: var(--popup-secondary-background-color);
    border: 1px solid var(--button-gray-3);
+    cursor: default;
  }

  .context-menu button {
@@ -88,4 +89,9 @@
      }
    }
  }
+
+  .context-menu-option-separator {
+    border: none;
+    border-top: 1px solid $oc-gray-5;
+  }
 }
@@ -2,28 +2,36 @@ import React from "react";
 import { render, unmountComponentAtNode } from "react-dom";
 import clsx from "clsx";
 import { Popover } from "./Popover";
+import { t } from "../i18n";

 import "./ContextMenu.scss";
 import {
  getShortcutFromShortcutName,
  ShortcutName,
 } from "../actions/shortcuts";
+import { Action } from "../actions/types";
+import { ActionManager } from "../actions/manager";
+import { AppState } from "../types";

-type ContextMenuOption = {
-  checked?: boolean;
-  shortcutName: ShortcutName;
-  label: string;
-  action(): void;
-};
+export type ContextMenuOption = "separator" | Action;

-type Props = {
+type ContextMenuProps = {
  options: ContextMenuOption[];
  onCloseRequest?(): void;
  top: number;
  left: number;
+  actionManager: ActionManager;
+  appState: Readonly<AppState>;
 };

-const ContextMenu = ({ options, onCloseRequest, top, left }: Props) => {
+const ContextMenu = ({
+  options,
+  onCloseRequest,
+  top,
+  left,
+  actionManager,
+  appState,
+}: ContextMenuProps) => {
  const isDarkTheme = !!document
    .querySelector(".excalidraw")
    ?.classList.contains("Appearance_dark");
@@ -43,23 +51,34 @@ const ContextMenu = ({ options, onCloseRequest, top, left }: Props) => {
          className="context-menu"
          onContextMenu={(event) => event.preventDefault()}
        >
-          {options.map(({ action, checked, shortcutName, label }, idx) => (
-            <li data-testid={shortcutName} key={idx} onClick={onCloseRequest}>
-              <button
-                className={`context-menu-option 
-                ${shortcutName === "delete" ? "dangerous" : ""}
-                ${checked ? "checkmark" : ""}`}
-                onClick={action}
-              >
-                <div className="context-menu-option__label">{label}</div>
-                <kbd className="context-menu-option__shortcut">
-                  {shortcutName
-                    ? getShortcutFromShortcutName(shortcutName)
-                    : ""}
-                </kbd>
-              </button>
-            </li>
-          ))}
+          {options.map((option, idx) => {
+            if (option === "separator") {
+              return <hr key={idx} className="context-menu-option-separator" />;
+            }
+
+            const actionName = option.name;
+            const label = option.contextItemLabel
+              ? t(option.contextItemLabel)
+              : "";
+            return (
+              <li key={idx} data-testid={actionName} onClick={onCloseRequest}>
+                <button
+                  className={clsx("context-menu-option", {
+                    dangerous: actionName === "deleteSelectedElements",
+                    checkmark: option.checked?.(appState),
+                  })}
+                  onClick={() => actionManager.executeAction(option)}
+                >
+                  <div className="context-menu-option__label">{label}</div>
+                  <kbd className="context-menu-option__shortcut">
+                    {actionName
+                      ? getShortcutFromShortcutName(actionName as ShortcutName)
+                      : ""}
+                  </kbd>
+                </button>
+              </li>
+            );
+          })}
        </ul>
      </Popover>
    </div>
@@ -78,8 +97,10 @@ const getContextMenuNode = (): HTMLDivElement => {

 type ContextMenuParams = {
  options: (ContextMenuOption | false | null | undefined)[];
-  top: number;
-  left: number;
+  top: ContextMenuProps["top"];
+  left: ContextMenuProps["left"];
+  actionManager: ContextMenuProps["actionManager"];
+  appState: Readonly<AppState>;
 };

 const handleClose = () => {
@@ -101,6 +122,8 @@ export default {
          left={params.left}
          options={options}
          onCloseRequest={handleClose}
+          actionManager={params.actionManager}
+          appState={params.appState}
        />,
        getContextMenuNode(),
      );
@@ -1,4 +1,4 @@
-@import "../css/_variables";
+@import "../css/variables.module";

 .excalidraw {
  .Dialog {
@@ -1,5 +1,6 @@
 import clsx from "clsx";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useEffect } from "react";
+import { useCallbackRefState } from "../hooks/useCallbackRefState";
 import { t } from "../i18n";
 import useIsMobile from "../is-mobile";
 import { KEYS } from "../keys";
@@ -8,14 +9,6 @@ import { back, close } from "./icons";
 import { Island } from "./Island";
 import { Modal } from "./Modal";

-const useRefState = <T,>() => {
-  const [refValue, setRefValue] = useState<T | null>(null);
-  const refCallback = useCallback((value: T) => {
-    setRefValue(value);
-  }, []);
-  return [refValue, refCallback] as const;
-};
-
 export const Dialog = (props: {
  children: React.ReactNode;
  className?: string;
@@ -24,7 +17,7 @@ export const Dialog = (props: {
  title: React.ReactNode;
  autofocus?: boolean;
 }) => {
-  const [islandNode, setIslandNode] = useRefState<HTMLDivElement>();
+  const [islandNode, setIslandNode] = useCallbackRefState<HTMLDivElement>();

  useEffect(() => {
    if (!islandNode) {
@@ -1,4 +1,4 @@
-@import "../css/_variables";
+@import "../css/variables.module";

 .excalidraw {
  .ExportDialog__preview {
@@ -1,4 +1,4 @@
-@import "../css/_variables";
+@import "../css/variables.module";

 .excalidraw {
  .HelpDialog h3 {
@@ -1,6 +1,6 @@
 import React from "react";
 import { t } from "../i18n";
-import { isDarwin } from "../keys";
+import { isDarwin, isWindows } from "../keys";
 import { Dialog } from "./Dialog";
 import { getShortcutKey } from "../utils";
 import "./HelpDialog.scss";
@@ -227,6 +227,10 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                  label={t("labels.gridMode")}
                  shortcuts={[getShortcutKey("CtrlOrCmd+'")]}
                />
+                <Shortcut
+                  label={t("labels.viewMode")}
+                  shortcuts={[getShortcutKey("Alt+R")]}
+                />
              </ShortcutIsland>
            </Column>
            <Column>
@@ -328,7 +332,14 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                />
                <Shortcut
                  label={t("buttons.redo")}
-                  shortcuts={[getShortcutKey("CtrlOrCmd+Shift+Z")]}
+                  shortcuts={
+                    isWindows
+                      ? [
+                          getShortcutKey("CtrlOrCmd+Y"),
+                          getShortcutKey("CtrlOrCmd+Shift+Z"),
+                        ]
+                      : [getShortcutKey("CtrlOrCmd+Shift+Z")]
+                  }
                />
                <Shortcut
                  label={t("labels.group")}
@@ -1,4 +1,4 @@
-@import "../css/_variables";
+@import "../css/variables.module";

 // this is loosely based on the longest hint text
 $wide-viewport-width: 1000px;
@@ -1,4 +1,4 @@
-@import "../css/_variables";
+@import "../css/variables.module";

 .excalidraw {
  .picker-container {
@@ -61,6 +61,7 @@ interface LayerUIProps {
    canvas: HTMLCanvasElement | null,
  ) => void;
  renderCustomFooter?: (isMobile: boolean) => JSX.Element;
+  viewModeEnabled: boolean;
 }

 const useOnClickOutside = (
@@ -299,6 +300,7 @@ const LayerUI = ({
  isCollaborating,
  onExportToBackend,
  renderCustomFooter,
+  viewModeEnabled,
 }: LayerUIProps) => {
  const isMobile = useIsMobile();

@@ -358,6 +360,28 @@ const LayerUI = ({
    );
  };

+  const renderViewModeCanvasActions = () => {
+    return (
+      <Section
+        heading="canvasActions"
+        className={clsx("zen-mode-transition", {
+          "transition-left": zenModeEnabled,
+        })}
+      >
+        {/* the zIndex ensures this menu has higher stacking order,
+         see https://github.com/excalidraw/excalidraw/pull/1445 */}
+        <Island padding={2} style={{ zIndex: 1 }}>
+          <Stack.Col gap={4}>
+            <Stack.Row gap={1} justifyContent="space-between">
+              {actionManager.renderAction("saveScene")}
+              {actionManager.renderAction("saveAsScene")}
+              {renderExportDialog()}
+            </Stack.Row>
+          </Stack.Col>
+        </Island>
+      </Section>
+    );
+  };
  const renderCanvasActions = () => (
    <Section
      heading="canvasActions"
@@ -448,38 +472,42 @@ const LayerUI = ({
            gap={4}
            className={clsx({ "disable-pointerEvents": zenModeEnabled })}
          >
-            {renderCanvasActions()}
+            {viewModeEnabled
+              ? renderViewModeCanvasActions()
+              : renderCanvasActions()}
            {shouldRenderSelectedShapeActions && renderSelectedShapeActions()}
          </Stack.Col>
-          <Section heading="shapes">
-            {(heading) => (
-              <Stack.Col gap={4} align="start">
-                <Stack.Row gap={1}>
-                  <Island
-                    padding={1}
-                    className={clsx({ "zen-mode": zenModeEnabled })}
-                  >
-                    <HintViewer appState={appState} elements={elements} />
-                    {heading}
-                    <Stack.Row gap={1}>
-                      <ShapesSwitcher
-                        elementType={appState.elementType}
-                        setAppState={setAppState}
-                        isLibraryOpen={appState.isLibraryOpen}
-                      />
-                    </Stack.Row>
-                  </Island>
-                  <LockIcon
-                    zenModeEnabled={zenModeEnabled}
-                    checked={appState.elementLocked}
-                    onChange={onLockToggle}
-                    title={t("toolBar.lock")}
-                  />
-                </Stack.Row>
-                {libraryMenu}
-              </Stack.Col>
-            )}
-          </Section>
+          {!viewModeEnabled && (
+            <Section heading="shapes">
+              {(heading) => (
+                <Stack.Col gap={4} align="start">
+                  <Stack.Row gap={1}>
+                    <Island
+                      padding={1}
+                      className={clsx({ "zen-mode": zenModeEnabled })}
+                    >
+                      <HintViewer appState={appState} elements={elements} />
+                      {heading}
+                      <Stack.Row gap={1}>
+                        <ShapesSwitcher
+                          elementType={appState.elementType}
+                          setAppState={setAppState}
+                          isLibraryOpen={appState.isLibraryOpen}
+                        />
+                      </Stack.Row>
+                    </Island>
+                    <LockIcon
+                      zenModeEnabled={zenModeEnabled}
+                      checked={appState.elementLocked}
+                      onChange={onLockToggle}
+                      title={t("toolBar.lock")}
+                    />
+                  </Stack.Row>
+                  {libraryMenu}
+                </Stack.Col>
+              )}
+            </Section>
+          )}
          <UserList
            className={clsx("zen-mode-transition", {
              "transition-right": zenModeEnabled,
@@ -524,6 +552,20 @@ const LayerUI = ({
    );
  };

+  const renderGitHubCorner = () => {
+    return (
+      <aside
+        className={clsx(
+          "layer-ui__wrapper__github-corner zen-mode-transition",
+          {
+            "transition-right": zenModeEnabled,
+          },
+        )}
+      >
+        <GitHubCorner appearance={appState.appearance} />
+      </aside>
+    );
+  };
  const renderFooter = () => (
    <footer role="contentinfo" className="layer-ui__wrapper__footer">
      <div
@@ -599,25 +641,19 @@ const LayerUI = ({
        canvas={canvas}
        isCollaborating={isCollaborating}
        renderCustomFooter={renderCustomFooter}
+        viewModeEnabled={viewModeEnabled}
      />
    </>
  ) : (
-    <div className="layer-ui__wrapper">
+    <div
+      className={clsx("layer-ui__wrapper", {
+        "disable-pointerEvents": appState.cursorButton === "down",
+      })}
+    >
      {dialogs}
      {renderFixedSideContainer()}
      {renderBottomAppMenu()}
-      {
-        <aside
-          className={clsx(
-            "layer-ui__wrapper__github-corner zen-mode-transition",
-            {
-              "transition-right": zenModeEnabled,
-            },
-          )}
-        >
-          <GitHubCorner appearance={appState.appearance} />
-        </aside>
-      }
+      {renderGitHubCorner()}
      {renderFooter()}
    </div>
  );
@@ -29,6 +29,7 @@ type MobileMenuProps = {
  canvas: HTMLCanvasElement | null;
  isCollaborating: boolean;
  renderCustomFooter?: (isMobile: boolean) => JSX.Element;
+  viewModeEnabled: boolean;
 };

 export const MobileMenu = ({
@@ -43,121 +44,164 @@ export const MobileMenu = ({
  canvas,
  isCollaborating,
  renderCustomFooter,
-}: MobileMenuProps) => (
-  <>
-    <FixedSideContainer side="top">
-      <Section heading="shapes">
-        {(heading) => (
-          <Stack.Col gap={4} align="center">
-            <Stack.Row gap={1}>
-              <Island padding={1}>
-                {heading}
-                <Stack.Row gap={1}>
-                  <ShapesSwitcher
-                    elementType={appState.elementType}
-                    setAppState={setAppState}
-                    isLibraryOpen={appState.isLibraryOpen}
-                  />
-                </Stack.Row>
-              </Island>
-              <LockIcon
-                checked={appState.elementLocked}
-                onChange={onLockToggle}
-                title={t("toolBar.lock")}
-              />
-            </Stack.Row>
-            {libraryMenu}
-          </Stack.Col>
-        )}
-      </Section>
-      <HintViewer appState={appState} elements={elements} />
-    </FixedSideContainer>
-    <div
-      className="App-bottom-bar"
-      style={{
-        marginBottom: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
-        marginLeft: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
-        marginRight: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
-      }}
-    >
-      <Island padding={0}>
-        {appState.openMenu === "canvas" ? (
-          <Section className="App-mobile-menu" heading="canvasActions">
-            <div className="panelColumn">
-              <Stack.Col gap={4}>
-                {actionManager.renderAction("loadScene")}
-                {actionManager.renderAction("saveScene")}
-                {actionManager.renderAction("saveAsScene")}
-                {exportButton}
-                {actionManager.renderAction("clearCanvas")}
-                {onCollabButtonClick && (
-                  <CollabButton
-                    isCollaborating={isCollaborating}
-                    collaboratorCount={appState.collaborators.size}
-                    onClick={onCollabButtonClick}
-                  />
-                )}
-                <BackgroundPickerAndDarkModeToggle
-                  actionManager={actionManager}
-                  appState={appState}
-                  setAppState={setAppState}
+  viewModeEnabled,
+}: MobileMenuProps) => {
+  const renderFixedSideContainer = () => {
+    return (
+      <FixedSideContainer side="top">
+        <Section heading="shapes">
+          {(heading) => (
+            <Stack.Col gap={4} align="center">
+              <Stack.Row gap={1}>
+                <Island padding={1}>
+                  {heading}
+                  <Stack.Row gap={1}>
+                    <ShapesSwitcher
+                      elementType={appState.elementType}
+                      setAppState={setAppState}
+                      isLibraryOpen={appState.isLibraryOpen}
+                    />
+                  </Stack.Row>
+                </Island>
+                <LockIcon
+                  checked={appState.elementLocked}
+                  onChange={onLockToggle}
+                  title={t("toolBar.lock")}
                />
-                {renderCustomFooter?.(true)}
-                <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>
-        ) : appState.openMenu === "shape" &&
-          showSelectedShapeActions(appState, elements) ? (
-          <Section className="App-mobile-menu" heading="selectedShapeActions">
-            <SelectedShapeActions
-              appState={appState}
-              elements={elements}
-              renderAction={actionManager.renderAction}
-              elementType={appState.elementType}
-            />
-          </Section>
-        ) : null}
-        <footer className="App-toolbar">
-          <div className="App-toolbar-content">
-            {actionManager.renderAction("toggleCanvasMenu")}
-            {actionManager.renderAction("toggleEditMenu")}
-            {actionManager.renderAction("undo")}
-            {actionManager.renderAction("redo")}
-            {actionManager.renderAction(
-              appState.multiElement ? "finalize" : "duplicateSelection",
-            )}
-            {actionManager.renderAction("deleteSelectedElements")}
-          </div>
-          {appState.scrolledOutside && !appState.openMenu && (
-            <button
-              className="scroll-back-to-content"
-              onClick={() => {
-                setAppState({
-                  ...calculateScrollCenter(elements, appState, canvas),
-                });
-              }}
-            >
-              {t("buttons.scrollBackToContent")}
-            </button>
+              </Stack.Row>
+              {libraryMenu}
+            </Stack.Col>
          )}
-        </footer>
-      </Island>
-    </div>
-  </>
-);
+        </Section>
+        <HintViewer appState={appState} elements={elements} />
+      </FixedSideContainer>
+    );
+  };
+
+  const renderAppToolbar = () => {
+    if (viewModeEnabled) {
+      return (
+        <div className="App-toolbar-content">
+          {actionManager.renderAction("toggleCanvasMenu")}
+        </div>
+      );
+    }
+    return (
+      <div className="App-toolbar-content">
+        {actionManager.renderAction("toggleCanvasMenu")}
+        {actionManager.renderAction("toggleEditMenu")}
+        {actionManager.renderAction("undo")}
+        {actionManager.renderAction("redo")}
+        {actionManager.renderAction(
+          appState.multiElement ? "finalize" : "duplicateSelection",
+        )}
+        {actionManager.renderAction("deleteSelectedElements")}
+      </div>
+    );
+  };
+
+  const renderCanvasActions = () => {
+    if (viewModeEnabled) {
+      return (
+        <>
+          {actionManager.renderAction("saveScene")}
+          {actionManager.renderAction("saveAsScene")}
+          {exportButton}
+        </>
+      );
+    }
+    return (
+      <>
+        {actionManager.renderAction("loadScene")}
+        {actionManager.renderAction("saveScene")}
+        {actionManager.renderAction("saveAsScene")}
+        {exportButton}
+        {actionManager.renderAction("clearCanvas")}
+        {onCollabButtonClick && (
+          <CollabButton
+            isCollaborating={isCollaborating}
+            collaboratorCount={appState.collaborators.size}
+            onClick={onCollabButtonClick}
+          />
+        )}
+        {
+          <BackgroundPickerAndDarkModeToggle
+            actionManager={actionManager}
+            appState={appState}
+            setAppState={setAppState}
+          />
+        }
+      </>
+    );
+  };
+  return (
+    <>
+      {!viewModeEnabled && renderFixedSideContainer()}
+      <div
+        className="App-bottom-bar"
+        style={{
+          marginBottom: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
+          marginLeft: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
+          marginRight: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
+        }}
+      >
+        <Island padding={0}>
+          {appState.openMenu === "canvas" ? (
+            <Section className="App-mobile-menu" heading="canvasActions">
+              <div className="panelColumn">
+                <Stack.Col gap={4}>
+                  {renderCanvasActions()}
+                  {renderCustomFooter?.(true)}
+                  <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>
+          ) : appState.openMenu === "shape" &&
+            !viewModeEnabled &&
+            showSelectedShapeActions(appState, elements) ? (
+            <Section className="App-mobile-menu" heading="selectedShapeActions">
+              <SelectedShapeActions
+                appState={appState}
+                elements={elements}
+                renderAction={actionManager.renderAction}
+                elementType={appState.elementType}
+              />
+            </Section>
+          ) : null}
+          <footer className="App-toolbar">
+            {renderAppToolbar()}
+            {appState.scrolledOutside && !appState.openMenu && (
+              <button
+                className="scroll-back-to-content"
+                onClick={() => {
+                  setAppState({
+                    ...calculateScrollCenter(elements, appState, canvas),
+                  });
+                }}
+              >
+                {t("buttons.scrollBackToContent")}
+              </button>
+            )}
+          </footer>
+        </Island>
+      </div>
+    </>
+  );
+};
@@ -1,4 +1,4 @@
-@import "../css/_variables";
+@import "../css/variables.module";

 .excalidraw {
  .Modal {
@@ -1,4 +1,4 @@
-@import "../css/_variables";
+@import "../css/variables.module";

 .excalidraw {
  .PasteChartDialog {
@@ -1,4 +1,4 @@
-@import "../css/_variables";
+@import "../css/variables.module";

 .Stats {
  position: fixed;
@@ -24,6 +24,7 @@ const getStorageSizes = debounce((cb: (sizes: StorageSizes) => void) => {
 }, 500);

 export const Stats = (props: {
+  setAppState: React.Component<any, AppState>["setState"];
  appState: AppState;
  elements: readonly NonDeletedExcalidrawElement[];
  onClose: () => void;
@@ -46,6 +47,12 @@ export const Stats = (props: {
  const selectedElements = getTargetElements(props.elements, props.appState);
  const selectedBoundingBox = getCommonBounds(selectedElements);

+  const onGridSizeChange = () => {
+    props.setAppState({
+      gridSize: ((props.appState.gridSize - 5) % 50) + 10,
+    });
+  };
+
  if (isMobile && props.appState.openMenu) {
    return null;
  }
@@ -156,6 +163,17 @@ export const Stats = (props: {
                </td>
              </tr>
            )}
+            {props.appState.showGrid && (
+              <>
+                <tr>
+                  <th colSpan={2}>{"Misc"}</th>
+                </tr>
+                <tr onClick={onGridSizeChange} style={{ cursor: "pointer" }}>
+                  <td>{"Grid size"}</td>
+                  <td>{props.appState.gridSize}</td>
+                </tr>
+              </>
+            )}
          </tbody>
        </table>
      </Island>
@@ -1,4 +1,4 @@
-@import "../css/_variables.scss";
+@import "../css/variables.module";

 .excalidraw {
  .TextInput {
@@ -1,4 +1,4 @@
-@import "../css/_variables";
+@import "../css/variables.module";

 .excalidraw {
  .Toast {
@@ -1,5 +1,5 @@
@import "open-color/open-color.scss";
-@import "../css/variables";
+@import "../css/variables.module";

 .excalidraw {
  .ToolIcon {
@@ -1,4 +1,4 @@
-@import "../css/_variables";
+@import "../css/variables.module";
 .excalidraw {
  .Tooltip {
    position: relative;
@@ -48,15 +48,7 @@
    }
  }

-  // the following 3 rules ensure that the tooltip doesn't show (nor affect
-  // the cursor) when you drag over when you draw on canvas, but at the same
-  // time it still works when clicking on the link/shield
-
-  body:active & .Tooltip:not(:hover) {
-    pointer-events: none;
-  }
-
-  body:not(:active) & .Tooltip:hover .Tooltip__label {
+  .Tooltip:hover .Tooltip__label {
    visibility: visible;
  }

@@ -90,4 +90,6 @@ export const TAP_TWICE_TIMEOUT = 300;
 export const TOUCH_CTX_MENU_TIMEOUT = 500;
 export const TITLE_TIMEOUT = 10000;
 export const TOAST_TIMEOUT = 5000;
-export const VERSION_TIMEOUT = 15000;
+export const VERSION_TIMEOUT = 30000;
+
+export const ZOOM_STEP = 0.1;
@@ -0,0 +1,42 @@
+import React from "react";
+
+export const createInverseContext = <T extends unknown = null>(
+  initialValue: T,
+) => {
+  const Context = React.createContext(initialValue) as React.Context<T> & {
+    _updateProviderValue?: (value: T) => void;
+  };
+
+  class InverseConsumer extends React.Component {
+    state = { value: initialValue };
+    constructor(props: any) {
+      super(props);
+      Context._updateProviderValue = (value: T) => this.setState({ value });
+    }
+    render() {
+      return (
+        <Context.Provider value={this.state.value}>
+          {this.props.children}
+        </Context.Provider>
+      );
+    }
+  }
+
+  class InverseProvider extends React.Component<{ value: T }> {
+    componentDidMount() {
+      Context._updateProviderValue?.(this.props.value);
+    }
+    componentDidUpdate() {
+      Context._updateProviderValue?.(this.props.value);
+    }
+    render() {
+      return <Context.Consumer>{() => this.props.children}</Context.Consumer>;
+    }
+  }
+
+  return {
+    Context,
+    Consumer: InverseConsumer,
+    Provider: InverseProvider,
+  };
+};
@@ -1,4 +1,4 @@
-@import "./_variables";
+@import "./variables.module";
@import "./theme";

 .excalidraw {
@@ -282,7 +282,7 @@
    pointer-events: none !important;
  }

-  .App-menu_top > * {
+  .layer-ui__wrapper:not(.disable-pointerEvents) .App-menu_top > * {
    pointer-events: all;
  }

@@ -323,7 +323,7 @@
    }
  }

-  .App-menu_bottom > * {
+  .layer-ui__wrapper:not(.disable-pointerEvents) .App-menu_bottom > * {
    pointer-events: all;
  }

@@ -492,6 +492,13 @@
    pointer-events: none !important;
  }

+  &.excalidraw--view-mode {
+    .App-menu {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+
  @media print {
    .App-bottom-bar,
    .FixedSideContainer,
@@ -2,3 +2,7 @@

 // keep up to date with is-mobile.tsx
 $is-mobile-query: "(max-width: 600px), (max-height: 500px) and (max-width: 1000px)";
+
+:export {
+  isMobileQuery: unquote($is-mobile-query);
+}
@@ -1,4 +1,4 @@
-import { fileSave } from "browser-nativefs";
+import { fileSave } from "browser-fs-access";
 import {
  copyCanvasToClipboardAsPng,
  copyTextToSystemClipboard,
@@ -1,4 +1,4 @@
-import { fileOpen, fileSave } from "browser-nativefs";
+import { fileOpen, fileSave } from "browser-fs-access";
 import { cleanAppStateForExport } from "../appState";
 import { MIME_TYPES } from "../constants";
 import { clearElementsForExport } from "../element";
@@ -102,6 +102,7 @@ export class LinearElementEditor {
        element,
        scenePointerX - editingLinearElement.pointerOffset.x,
        scenePointerY - editingLinearElement.pointerOffset.y,
+        appState.showGrid,
        appState.gridSize,
      );
      LinearElementEditor.movePoint(element, activePointIndex, newPoint);
@@ -198,6 +199,7 @@ export class LinearElementEditor {
              element,
              scenePointer.x,
              scenePointer.y,
+              appState.showGrid,
              appState.gridSize,
            ),
          ],
@@ -282,7 +284,8 @@ export class LinearElementEditor {
    scenePointerX: number,
    scenePointerY: number,
    editingLinearElement: LinearElementEditor,
-    gridSize: number | null,
+    isGridOn: boolean,
+    gridSize: number,
  ): LinearElementEditor {
    const { elementId, lastUncommittedPoint } = editingLinearElement;
    const element = LinearElementEditor.getElement(elementId);
@@ -304,6 +307,7 @@ export class LinearElementEditor {
      element,
      scenePointerX - editingLinearElement.pointerOffset.x,
      scenePointerY - editingLinearElement.pointerOffset.y,
+      isGridOn,
      gridSize,
    );

@@ -398,9 +402,15 @@ export class LinearElementEditor {
    element: NonDeleted<ExcalidrawLinearElement>,
    scenePointerX: number,
    scenePointerY: number,
-    gridSize: number | null,
+    isGridOn: boolean,
+    gridSize: number,
  ): Point {
-    const pointerOnGrid = getGridPoint(scenePointerX, scenePointerY, gridSize);
+    const pointerOnGrid = getGridPoint(
+      scenePointerX,
+      scenePointerY,
+      isGridOn,
+      gridSize,
+    );
    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
    const cx = (x1 + x2) / 2;
    const cy = (y1 + y2) / 2;
@@ -7,7 +7,8 @@ export const showSelectedShapeActions = (
  elements: readonly NonDeletedExcalidrawElement[],
 ) =>
  Boolean(
-    appState.editingElement ||
-      getSelectedElements(elements, appState).length ||
-      appState.elementType !== "selection",
+    !appState.viewModeEnabled &&
+      (appState.editingElement ||
+        getSelectedElements(elements, appState).length ||
+        appState.elementType !== "selection"),
  );
@@ -6,10 +6,11 @@ import { APP_NAME, ENV, EVENT } from "../../constants";
 import { ImportedDataState } from "../../data/types";
 import { ExcalidrawElement } from "../../element/types";
 import {
+  getElementMap,
  getSceneVersion,
  getSyncableElements,
 } from "../../packages/excalidraw/index";
-import { AppState, Collaborator, Gesture } from "../../types";
+import { Collaborator, Gesture } from "../../types";
 import { resolvablePromise, withBatchedUpdates } from "../../utils";
 import {
  INITIAL_SCENE_UPDATE_TIMEOUT,
@@ -31,6 +32,7 @@ import {
 } from "../data/localStorage";
 import Portal from "./Portal";
 import RoomDialog from "./RoomDialog";
+import { createInverseContext } from "../../createInverseContext";

 interface CollabState {
  isCollaborating: boolean;
@@ -56,17 +58,21 @@ type ReconciledElements = readonly ExcalidrawElement[] & {
 };

 interface Props {
-  children: (collab: CollabAPI) => React.ReactNode;
-  // NOTE not type-safe because the refObject may in fact not be initialized
-  // with ExcalidrawImperativeAPI yet
-  excalidrawRef: React.MutableRefObject<ExcalidrawImperativeAPI>;
+  excalidrawAPI: ExcalidrawImperativeAPI;
 }

+const {
+  Context: CollabContext,
+  Consumer: CollabContextConsumer,
+  Provider: CollabContextProvider,
+} = createInverseContext<{ api: CollabAPI | null }>({ api: null });
+
+export { CollabContext, CollabContextConsumer };
+
 class CollabWrapper extends PureComponent<Props, CollabState> {
  portal: Portal;
+  excalidrawAPI: Props["excalidrawAPI"];
  private socketInitializationTimer?: NodeJS.Timeout;
-  private excalidrawRef: Props["excalidrawRef"];
-  excalidrawAppState?: AppState;
  private lastBroadcastedOrReceivedSceneVersion: number = -1;
  private collaborators = new Map<string, Collaborator>();

@@ -80,7 +86,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
      activeRoomLink: "",
    };
    this.portal = new Portal(this);
-    this.excalidrawRef = props.excalidrawRef;
+    this.excalidrawAPI = props.excalidrawAPI;
  }

  componentDidMount() {
@@ -142,7 +148,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {

  saveCollabRoomToFirebase = async (
    syncableElements: ExcalidrawElement[] = getSyncableElements(
-      this.excalidrawRef.current!.getSceneElementsIncludingDeleted(),
+      this.excalidrawAPI.getSceneElementsIncludingDeleted(),
    ),
  ) => {
    try {
@@ -154,13 +160,13 @@ class CollabWrapper extends PureComponent<Props, CollabState> {

  openPortal = async () => {
    window.history.pushState({}, APP_NAME, await generateCollaborationLink());
-    const elements = this.excalidrawRef.current!.getSceneElements();
+    const elements = this.excalidrawAPI.getSceneElements();
    // remove deleted elements from elements array & history to ensure we don't
    // expose potentially sensitive user data in case user manually deletes
    // existing elements (or clears scene), which would otherwise be persisted
    // to database even if deleted before creating the room.
-    this.excalidrawRef.current!.history.clear();
-    this.excalidrawRef.current!.updateScene({
+    this.excalidrawAPI.history.clear();
+    this.excalidrawAPI.updateScene({
      elements,
      commitToHistory: true,
    });
@@ -175,7 +181,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {

  private destroySocketClient = () => {
    this.collaborators = new Map();
-    this.excalidrawRef.current!.updateScene({
+    this.excalidrawAPI.updateScene({
      collaborators: this.collaborators,
    });
    this.setState({
@@ -265,7 +271,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
              user.selectedElementIds = selectedElementIds;
              user.username = username;
              collaborators.set(socketId, user);
-              this.excalidrawRef.current!.updateScene({
+              this.excalidrawAPI.updateScene({
                collaborators,
              });
              break;
@@ -300,7 +306,55 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
  private reconcileElements = (
    elements: readonly ExcalidrawElement[],
  ): ReconciledElements => {
-    const newElements = this.portal.reconcileElements(elements);
+    const currentElements = this.getSceneElementsIncludingDeleted();
+    // create a map of ids so we don't have to iterate
+    // over the array more than once.
+    const localElementMap = getElementMap(currentElements);
+
+    const appState = this.excalidrawAPI.getAppState();
+
+    // Reconcile
+    const newElements: readonly ExcalidrawElement[] = elements
+      .reduce((elements, element) => {
+        // if the remote element references one that's currently
+        // edited on local, skip it (it'll be added in the next step)
+        if (
+          element.id === appState.editingElement?.id ||
+          element.id === appState.resizingElement?.id ||
+          element.id === appState.draggingElement?.id
+        ) {
+          return elements;
+        }
+
+        if (
+          localElementMap.hasOwnProperty(element.id) &&
+          localElementMap[element.id].version > element.version
+        ) {
+          elements.push(localElementMap[element.id]);
+          delete localElementMap[element.id];
+        } else if (
+          localElementMap.hasOwnProperty(element.id) &&
+          localElementMap[element.id].version === element.version &&
+          localElementMap[element.id].versionNonce !== element.versionNonce
+        ) {
+          // resolve conflicting edits deterministically by taking the one with the lowest versionNonce
+          if (localElementMap[element.id].versionNonce < element.versionNonce) {
+            elements.push(localElementMap[element.id]);
+          } else {
+            // it should be highly unlikely that the two versionNonces are the same. if we are
+            // really worried about this, we can replace the versionNonce with the socket id.
+            elements.push(element);
+          }
+          delete localElementMap[element.id];
+        } else {
+          elements.push(element);
+          delete localElementMap[element.id];
+        }
+
+        return elements;
+      }, [] as Mutable<typeof elements>)
+      // add local elements that weren't deleted or on remote
+      .concat(...Object.values(localElementMap));

    // Avoid broadcasting to the rest of the collaborators the scene
    // we just received!
@@ -319,10 +373,10 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
    }: { init?: boolean; initFromSnapshot?: boolean } = {},
  ) => {
    if (init || initFromSnapshot) {
-      this.excalidrawRef.current!.setScrollToCenter(elements);
+      this.excalidrawAPI.setScrollToCenter(elements);
    }

-    this.excalidrawRef.current!.updateScene({
+    this.excalidrawAPI.updateScene({
      elements,
      commitToHistory: !!init,
    });
@@ -331,7 +385,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
    // when we receive any messages from another peer. This UX can be pretty rough -- if you
    // undo, a user makes a change, and then try to redo, your element(s) will be lost. However,
    // right now we think this is the right tradeoff.
-    this.excalidrawRef.current!.history.clear();
+    this.excalidrawAPI.history.clear();
  };

  setCollaborators(sockets: string[]) {
@@ -347,7 +401,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
        }
      }
      this.collaborators = collaborators;
-      this.excalidrawRef.current!.updateScene({ collaborators });
+      this.excalidrawAPI.updateScene({ collaborators });
    });
  }

@@ -360,7 +414,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
  };

  public getSceneElementsIncludingDeleted = () => {
-    return this.excalidrawRef.current!.getSceneElementsIncludingDeleted();
+    return this.excalidrawAPI.getSceneElementsIncludingDeleted();
  };

  onPointerUpdate = (payload: {
@@ -373,11 +427,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
      this.portal.broadcastMouseLocation(payload);
  };

-  broadcastElements = (
-    elements: readonly ExcalidrawElement[],
-    state: AppState,
-  ) => {
-    this.excalidrawAppState = state;
+  broadcastElements = (elements: readonly ExcalidrawElement[]) => {
    if (
      getSceneVersion(elements) >
      this.getLastBroadcastedOrReceivedSceneVersion()
@@ -396,7 +446,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
    this.portal.broadcastScene(
      SCENE.UPDATE,
      getSyncableElements(
-        this.excalidrawRef.current!.getSceneElementsIncludingDeleted(),
+        this.excalidrawAPI.getSceneElementsIncludingDeleted(),
      ),
      true,
    );
@@ -425,8 +475,23 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
    });
  };

+  /** PRIVATE. Use `this.getContextValue()` instead. */
+  private contextValue: CollabAPI | null = null;
+
+  /** Getter of context value. Returned object is stable. */
+  getContextValue = (): CollabAPI => {
+    this.contextValue = this.contextValue || ({} as CollabAPI);
+
+    this.contextValue.isCollaborating = this.state.isCollaborating;
+    this.contextValue.username = this.state.username;
+    this.contextValue.onPointerUpdate = this.onPointerUpdate;
+    this.contextValue.initializeSocketClient = this.initializeSocketClient;
+    this.contextValue.onCollabButtonClick = this.onCollabButtonClick;
+    this.contextValue.broadcastElements = this.broadcastElements;
+    return this.contextValue;
+  };
+
  render() {
-    const { children } = this.props;
    const { modalIsShown, username, errorMessage, activeRoomLink } = this.state;

    return (
@@ -450,14 +515,11 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
            onClose={() => this.setState({ errorMessage: "" })}
          />
        )}
-        {children({
-          isCollaborating: this.state.isCollaborating,
-          username: this.state.username,
-          onPointerUpdate: this.onPointerUpdate,
-          initializeSocketClient: this.initializeSocketClient,
-          onCollabButtonClick: this.onCollabButtonClick,
-          broadcastElements: this.broadcastElements,
-        })}
+        <CollabContextProvider
+          value={{
+            api: this.getContextValue(),
+          }}
+        />
      </>
    );
  }
@@ -6,23 +6,20 @@ import {

 import CollabWrapper from "./CollabWrapper";

-import {
-  getElementMap,
-  getSyncableElements,
-} from "../../packages/excalidraw/index";
+import { getSyncableElements } from "../../packages/excalidraw/index";
 import { ExcalidrawElement } from "../../element/types";
 import { BROADCAST, SCENE } from "../app_constants";

 class Portal {
-  app: CollabWrapper;
+  collab: CollabWrapper;
  socket: SocketIOClient.Socket | null = null;
  socketInitialized: boolean = false; // we don't want the socket to emit any updates until it is fully initialized
  roomId: string | null = null;
  roomKey: string | null = null;
  broadcastedElementVersions: Map<string, number> = new Map();

-  constructor(app: CollabWrapper) {
-    this.app = app;
+  constructor(collab: CollabWrapper) {
+    this.collab = collab;
  }

  open(socket: SocketIOClient.Socket, id: string, key: string) {
@@ -30,7 +27,7 @@ class Portal {
    this.roomId = id;
    this.roomKey = key;

-    // Initialize socket listeners (moving from App)
+    // Initialize socket listeners
    this.socket.on("init-room", () => {
      if (this.socket) {
        this.socket.emit("join-room", this.roomId);
@@ -39,12 +36,12 @@ class Portal {
    this.socket.on("new-user", async (_socketId: string) => {
      this.broadcastScene(
        SCENE.INIT,
-        getSyncableElements(this.app.getSceneElementsIncludingDeleted()),
+        getSyncableElements(this.collab.getSceneElementsIncludingDeleted()),
        /* syncAll */ true,
      );
    });
    this.socket.on("room-user-change", (clients: string[]) => {
-      this.app.setCollaborators(clients);
+      this.collab.setCollaborators(clients);
    });
  }

@@ -125,10 +122,10 @@ class Portal {
      data as SocketUpdateData,
    );

-    if (syncAll && this.app.state.isCollaborating) {
+    if (syncAll && this.collab.state.isCollaborating) {
      await Promise.all([
        broadcastPromise,
-        this.app.saveCollabRoomToFirebase(syncableElements),
+        this.collab.saveCollabRoomToFirebase(syncableElements),
      ]);
    } else {
      await broadcastPromise;
@@ -146,9 +143,9 @@ class Portal {
          socketId: this.socket.id,
          pointer: payload.pointer,
          button: payload.button || "up",
-          selectedElementIds:
-            this.app.excalidrawAppState?.selectedElementIds || {},
-          username: this.app.state.username,
+          selectedElementIds: this.collab.excalidrawAPI.getAppState()
+            .selectedElementIds,
+          username: this.collab.state.username,
        },
      };
      return this._broadcastSocketData(
@@ -157,62 +154,6 @@ class Portal {
      );
    }
  };
-
-  reconcileElements = (
-    sceneElements: readonly ExcalidrawElement[],
-  ): readonly ExcalidrawElement[] => {
-    const currentElements = this.app.getSceneElementsIncludingDeleted();
-    // create a map of ids so we don't have to iterate
-    // over the array more than once.
-    const localElementMap = getElementMap(currentElements);
-
-    // Reconcile
-    return (
-      sceneElements
-        .reduce((elements, element) => {
-          // if the remote element references one that's currently
-          // edited on local, skip it (it'll be added in the next step)
-          if (
-            element.id === this.app.excalidrawAppState?.editingElement?.id ||
-            element.id === this.app.excalidrawAppState?.resizingElement?.id ||
-            element.id === this.app.excalidrawAppState?.draggingElement?.id
-          ) {
-            return elements;
-          }
-
-          if (
-            localElementMap.hasOwnProperty(element.id) &&
-            localElementMap[element.id].version > element.version
-          ) {
-            elements.push(localElementMap[element.id]);
-            delete localElementMap[element.id];
-          } else if (
-            localElementMap.hasOwnProperty(element.id) &&
-            localElementMap[element.id].version === element.version &&
-            localElementMap[element.id].versionNonce !== element.versionNonce
-          ) {
-            // resolve conflicting edits deterministically by taking the one with the lowest versionNonce
-            if (
-              localElementMap[element.id].versionNonce < element.versionNonce
-            ) {
-              elements.push(localElementMap[element.id]);
-            } else {
-              // it should be highly unlikely that the two versionNonces are the same. if we are
-              // really worried about this, we can replace the versionNonce with the socket id.
-              elements.push(element);
-            }
-            delete localElementMap[element.id];
-          } else {
-            elements.push(element);
-            delete localElementMap[element.id];
-          }
-
-          return elements;
-        }, [] as Mutable<typeof sceneElements>)
-        // add local elements that weren't deleted or on remote
-        .concat(...Object.values(localElementMap))
-    );
-  };
 }

 export default Portal;
@@ -1,4 +1,4 @@
-@import "../../css/_variables";
+@import "../../css/variables.module";

 .excalidraw {
  .RoomDialog-linkContainer {
@@ -1,6 +1,7 @@
 import LanguageDetector from "i18next-browser-languagedetector";
 import React, {
  useCallback,
+  useContext,
  useEffect,
  useLayoutEffect,
  useRef,
@@ -17,12 +18,13 @@ import {
  ExcalidrawElement,
  NonDeletedExcalidrawElement,
 } from "../element/types";
+import { useCallbackRefState } from "../hooks/useCallbackRefState";
 import { Language, t } from "../i18n";
 import Excalidraw, {
  defaultLang,
  languages,
 } from "../packages/excalidraw/index";
-import { AppState, ExcalidrawAPIRefValue } from "../types";
+import { AppState } from "../types";
 import {
  debounce,
  getVersion,
@@ -30,7 +32,11 @@ import {
  resolvablePromise,
 } from "../utils";
 import { SAVE_TO_LOCAL_STORAGE_TIMEOUT } from "./app_constants";
-import CollabWrapper, { CollabAPI } from "./collab/CollabWrapper";
+import CollabWrapper, {
+  CollabAPI,
+  CollabContext,
+  CollabContextConsumer,
+} from "./collab/CollabWrapper";
 import { LanguageList } from "./components/LanguageList";
 import { exportToBackend, getCollaborationLinkData, loadScene } from "./data";
 import { loadFromFirebase } from "./data/firebase";
@@ -49,15 +55,6 @@ languageDetector.init({
  checkWhitelist: false,
 });

-const excalidrawRef: React.MutableRefObject<
-  MarkRequired<ExcalidrawAPIRefValue, "ready" | "readyPromise">
-> = {
-  current: {
-    readyPromise: resolvablePromise(),
-    ready: false,
-  },
-};
-
 const saveDebounced = debounce(
  (elements: readonly ExcalidrawElement[], state: AppState) => {
    saveToLocalStorage(elements, state);
@@ -191,7 +188,7 @@ const initializeScene = async (opts: {
  return null;
 };

-function ExcalidrawWrapper(props: { collab: CollabAPI }) {
+function ExcalidrawWrapper() {
  // dimensions
  // ---------------------------------------------------------------------------

@@ -226,35 +223,40 @@ function ExcalidrawWrapper(props: { collab: CollabAPI }) {
    initialStatePromiseRef.current.promise = resolvablePromise<ImportedDataState | null>();
  }

-  const { collab } = props;
-
  useEffect(() => {
    // Delayed so that the app has a time to load the latest SW
    setTimeout(() => {
      trackEvent("load", "version", getVersion());
    }, VERSION_TIMEOUT);
+  }, []);

-    excalidrawRef.current!.readyPromise.then((excalidrawApi) => {
-      initializeScene({
-        resetScene: excalidrawApi.resetScene,
-        initializeSocketClient: collab.initializeSocketClient,
-      }).then((scene) => {
-        initialStatePromiseRef.current.promise.resolve(scene);
-      });
+  const [
+    excalidrawAPI,
+    excalidrawRefCallback,
+  ] = useCallbackRefState<ExcalidrawImperativeAPI>();
+
+  const collabAPI = useContext(CollabContext)?.api;
+
+  useEffect(() => {
+    if (!collabAPI || !excalidrawAPI) {
+      return;
+    }
+
+    initializeScene({
+      resetScene: excalidrawAPI.resetScene,
+      initializeSocketClient: collabAPI.initializeSocketClient,
+    }).then((scene) => {
+      initialStatePromiseRef.current.promise.resolve(scene);
    });

    const onHashChange = (_: HashChangeEvent) => {
-      const api = excalidrawRef.current!;
-      if (!api.ready) {
-        return;
-      }
      if (window.location.hash.length > 1) {
        initializeScene({
-          resetScene: api.resetScene,
-          initializeSocketClient: collab.initializeSocketClient,
+          resetScene: excalidrawAPI.resetScene,
+          initializeSocketClient: collabAPI.initializeSocketClient,
        }).then((scene) => {
          if (scene) {
-            api.updateScene(scene);
+            excalidrawAPI.updateScene(scene);
          }
        });
      }
@@ -273,7 +275,7 @@ function ExcalidrawWrapper(props: { collab: CollabAPI }) {
      window.removeEventListener(EVENT.BLUR, onBlur, false);
      clearTimeout(titleTimeout);
    };
-  }, [collab.initializeSocketClient]);
+  }, [collabAPI, excalidrawAPI]);

  useEffect(() => {
    languageDetector.cacheUserLanguage(langCode);
@@ -284,8 +286,8 @@ function ExcalidrawWrapper(props: { collab: CollabAPI }) {
    appState: AppState,
  ) => {
    saveDebounced(elements, appState);
-    if (collab.isCollaborating) {
-      collab.broadcastElements(elements, appState);
+    if (collabAPI?.isCollaborating) {
+      collabAPI.broadcastElements(elements);
    }
  };

@@ -343,19 +345,20 @@ function ExcalidrawWrapper(props: { collab: CollabAPI }) {
  return (
    <>
      <Excalidraw
-        ref={excalidrawRef}
+        ref={excalidrawRefCallback}
        onChange={onChange}
        width={dimensions.width}
        height={dimensions.height}
        initialData={initialStatePromiseRef.current.promise}
-        user={{ name: collab.username }}
-        onCollabButtonClick={collab.onCollabButtonClick}
-        isCollaborating={collab.isCollaborating}
-        onPointerUpdate={collab.onPointerUpdate}
+        user={{ name: collabAPI?.username }}
+        onCollabButtonClick={collabAPI?.onCollabButtonClick}
+        isCollaborating={collabAPI?.isCollaborating}
+        onPointerUpdate={collabAPI?.onPointerUpdate}
        onExportToBackend={onExportToBackend}
        renderFooter={renderFooter}
        langCode={langCode}
      />
+      {excalidrawAPI && <CollabWrapper excalidrawAPI={excalidrawAPI} />}
      {errorMessage && (
        <ErrorDialog
          message={errorMessage}
@@ -369,13 +372,9 @@ function ExcalidrawWrapper(props: { collab: CollabAPI }) {
 export default function ExcalidrawApp() {
  return (
    <TopErrorBoundary>
-      <CollabWrapper
-        excalidrawRef={
-          excalidrawRef as React.MutableRefObject<ExcalidrawImperativeAPI>
-        }
-      >
-        {(collab) => <ExcalidrawWrapper collab={collab} />}
-      </CollabWrapper>
+      <CollabContextConsumer>
+        <ExcalidrawWrapper />
+      </CollabContextConsumer>
    </TopErrorBoundary>
  );
 }
@@ -1,11 +1,10 @@
 import { PointerCoords } from "./types";
-import { normalizeScroll } from "./scene";

 export const getCenter = (pointers: Map<number, PointerCoords>) => {
  const allCoords = Array.from(pointers.values());
  return {
-    x: normalizeScroll(sum(allCoords, (coords) => coords.x) / allCoords.length),
-    y: normalizeScroll(sum(allCoords, (coords) => coords.y) / allCoords.length),
+    x: sum(allCoords, (coords) => coords.x) / allCoords.length,
+    y: sum(allCoords, (coords) => coords.y) / allCoords.length,
  };
 };

@@ -85,6 +85,6 @@ type ForwardRef<T, P = any> = Parameters<
 // --------------------------------------------------------------------------—

 interface Blob {
-  handle?: import("browser-nativefs").FileSystemHandle;
+  handle?: import("browser-fs-acces").FileSystemHandle;
  name?: string;
 }
@@ -0,0 +1,7 @@
+import { useCallback, useState } from "react";
+
+export const useCallbackRefState = <T>() => {
+  const [refValue, setRefValue] = useState<T | null>(null);
+  const refCallback = useCallback((value: T | null) => setRefValue(value), []);
+  return [refValue, refCallback] as const;
+};
@@ -27,6 +27,7 @@ const allLanguages: Language[] = [
  { code: "id-ID", label: "Bahasa Indonesia" },
  { code: "it-IT", label: "Italiano" },
  { code: "ja-JP", label: "日本語" },
+  { code: "kab-KAB", label: "Taqbaylit" },
  { code: "ko-KR", label: "한국어" },
  { code: "my-MM", label: "Burmese" },
  { code: "nb-NO", label: "Norsk bokmål" },
@@ -1,7 +1,18 @@
 import React, { useState, useEffect, useRef, useContext } from "react";
+import variables from "./css/variables.module.scss";

 const context = React.createContext(false);

+const getIsMobileMatcher = () => {
+  return window.matchMedia
+    ? window.matchMedia(variables.isMobileQuery)
+    : (({
+        matches: false,
+        addListener: () => {},
+        removeListener: () => {},
+      } as any) as MediaQueryList);
+};
+
 export const IsMobileProvider = ({
  children,
 }: {
@@ -9,16 +20,7 @@ export const IsMobileProvider = ({
 }) => {
  const query = useRef<MediaQueryList>();
  if (!query.current) {
-    query.current = window.matchMedia
-      ? window.matchMedia(
-          // keep up to date with _variables.scss
-          "(max-width: 640px), (max-height: 500px) and (max-width: 1000px)",
-        )
-      : (({
-          matches: false,
-          addListener: () => {},
-          removeListener: () => {},
-        } as any) as MediaQueryList);
+    query.current = getIsMobileMatcher();
  }
  const [isMobile, setMobile] = useState(query.current.matches);

@@ -31,6 +33,8 @@ export const IsMobileProvider = ({
  return <context.Provider value={isMobile}>{children}</context.Provider>;
 };

+export const isMobile = () => getIsMobileMatcher().matches;
+
 export default function useIsMobile() {
  return useContext(context);
 }
@@ -1,4 +1,5 @@
 export const isDarwin = /Mac|iPod|iPhone|iPad/.test(window.navigator.platform);
+export const isWindows = /^Win/.test(window.navigator.platform);

 export const CODES = {
  EQUAL: "Equal",
@@ -18,7 +19,9 @@ export const CODES = {
  F: "KeyF",
  H: "KeyH",
  V: "KeyV",
+  X: "KeyX",
  Z: "KeyZ",
+  R: "KeyR",
 } as const;

 export const KEYS = {
@@ -48,6 +51,7 @@ export const KEYS = {
  T: "t",
  V: "v",
  X: "x",
+  Y: "y",
  Z: "z",
 } as const;

@@ -80,9 +80,9 @@
    "gridMode": "وضع الشبكة",
    "addToLibrary": "أضف إلى المكتبة",
    "removeFromLibrary": "حذف من المكتبة",
-    "libraryLoadingMessage": "جارٍ تحميل المكتبة...",
+    "libraryLoadingMessage": "جارٍ تحميل المكتبة…",
    "libraries": "تصفح المكتبات",
-    "loadingScene": "جاري تحميل المشهد...",
+    "loadingScene": "جاري تحميل المشهد…",
    "align": "محاذاة",
    "alignTop": "محاذاة إلى اﻷعلى",
    "alignBottom": "محاذاة إلى اﻷسفل",
@@ -91,7 +91,8 @@
    "centerVertically": "توسيط عمودي",
    "centerHorizontally": "توسيط أفقي",
    "distributeHorizontally": "التوزيع الأفقي",
-    "distributeVertically": "التوزيع عمودياً"
+    "distributeVertically": "التوزيع عمودياً",
+    "viewMode": ""
  },
  "buttons": {
    "clearReset": "إعادة تعيين اللوحة",
@@ -80,9 +80,9 @@
    "gridMode": "Решетъчен режим",
    "addToLibrary": "Добавяне към библиотеката",
    "removeFromLibrary": "Премахване от библиотеката",
-    "libraryLoadingMessage": "Зареждане на библиотеката...",
+    "libraryLoadingMessage": "Зареждане на библиотеката…",
    "libraries": "Разглеждане на библиотеките",
-    "loadingScene": "Зареждане на сцена...",
+    "loadingScene": "Зареждане на сцена…",
    "align": "Подравняване",
    "alignTop": "Подравняване отгоре",
    "alignBottom": "Подравняване отдолу",
@@ -91,7 +91,8 @@
    "centerVertically": "Центрирай вертикално",
    "centerHorizontally": "Центрирай хоризонтално",
    "distributeHorizontally": "Разпредели хоризонтално",
-    "distributeVertically": "Разпредели вертикално"
+    "distributeVertically": "Разпредели вертикално",
+    "viewMode": ""
  },
  "buttons": {
    "clearReset": "Нулиране на платно",
@@ -201,24 +202,24 @@
  },
  "helpDialog": {
    "blog": "",
-    "click": "",
+    "click": "клик",
    "curvedArrow": "",
    "curvedLine": "",
    "documentation": "",
-    "drag": "",
-    "editor": "",
+    "drag": "плъзнете",
+    "editor": "Редактор",
    "github": "",
    "howto": "",
-    "or": "",
+    "or": "или",
    "preventBinding": "",
-    "shapes": "",
-    "shortcuts": "",
+    "shapes": "Фигури",
+    "shortcuts": "Клавиши за бърз достъп",
    "textFinish": "",
    "textNewLine": "",
    "title": "",
-    "view": "",
+    "view": "Преглед",
    "zoomToFit": "",
-    "zoomToSelection": ""
+    "zoomToSelection": "Приближи селекцията"
  },
  "encrypted": {
    "tooltip": "Вашите рисунки са криптирани от край до край, така че сървърите на Excalidraw няма да могат да ги виждат."
@@ -82,7 +82,7 @@
    "removeFromLibrary": "Eliminar de la biblioteca",
    "libraryLoadingMessage": "Carregant la biblioteca...",
    "libraries": "Explorar biblioteques",
-    "loadingScene": "Carregant escena...",
+    "loadingScene": "Carregant escena…",
    "align": "Alinear",
    "alignTop": "Alinear a dalt",
    "alignBottom": "Alinear a baix",
@@ -91,7 +91,8 @@
    "centerVertically": "Centrar verticalment",
    "centerHorizontally": "Centrar horitzontalment",
    "distributeHorizontally": "Distribuir horitzontalment",
-    "distributeVertically": "Distribuir verticalment"
+    "distributeVertically": "Distribuir verticalment",
+    "viewMode": ""
  },
  "buttons": {
    "clearReset": "Netejar el llenç",
@@ -80,9 +80,9 @@
    "gridMode": "Rastermodus",
    "addToLibrary": "Zur Bibliothek hinzufügen",
    "removeFromLibrary": "Aus Bibliothek entfernen",
-    "libraryLoadingMessage": "Lade Bibliothek...",
+    "libraryLoadingMessage": "Lade Bibliothek…",
    "libraries": "Bibliotheken durchsuchen",
-    "loadingScene": "Lade Zeichnung...",
+    "loadingScene": "Lade Zeichnung…",
    "align": "Ausrichten",
    "alignTop": "Obere Kanten",
    "alignBottom": "Untere Kanten",
@@ -91,7 +91,8 @@
    "centerVertically": "Vertikal zentrieren",
    "centerHorizontally": "Horizontal zentrieren",
    "distributeHorizontally": "Horizontal verteilen",
-    "distributeVertically": "Vertikal verteilen"
+    "distributeVertically": "Vertikal verteilen",
+    "viewMode": "Ansichtsmodus"
  },
  "buttons": {
    "clearReset": "Zeichenfläche löschen & Hintergrundfarbe zurücksetzen",
@@ -80,9 +80,9 @@
    "gridMode": "Εμφάνιση σε πλέγμα",
    "addToLibrary": "Προσθήκη στη βιβλιοθήκη",
    "removeFromLibrary": "Αφαίρεση από τη βιβλιοθήκη",
-    "libraryLoadingMessage": "Φόρτωση βιβλιοθήκης...",
+    "libraryLoadingMessage": "Φόρτωση βιβλιοθήκης…",
    "libraries": "Άλλες βιβλιοθήκες",
-    "loadingScene": "Φόρτωση σκηνής...",
+    "loadingScene": "Φόρτωση σκηνής…",
    "align": "Στοίχιση",
    "alignTop": "Στοίχιση πάνω",
    "alignBottom": "Στοίχιση κάτω",
@@ -91,7 +91,8 @@
    "centerVertically": "Κέντρο κάθετα",
    "centerHorizontally": "Κέντρο οριζόντια",
    "distributeHorizontally": "Οριζόντια κατανομή",
-    "distributeVertically": "Κατακόρυφη κατανομή"
+    "distributeVertically": "Κατακόρυφη κατανομή",
+    "viewMode": "Λειτουργία προβολής"
  },
  "buttons": {
    "clearReset": "Επαναφορά του καμβά",
@@ -80,9 +80,9 @@
    "gridMode": "Grid mode",
    "addToLibrary": "Add to library",
    "removeFromLibrary": "Remove from library",
-    "libraryLoadingMessage": "Loading library...",
+    "libraryLoadingMessage": "Loading library…",
    "libraries": "Browse libraries",
-    "loadingScene": "Loading scene...",
+    "loadingScene": "Loading scene…",
    "align": "Align",
    "alignTop": "Align top",
    "alignBottom": "Align bottom",
@@ -91,7 +91,8 @@
    "centerVertically": "Center vertically",
    "centerHorizontally": "Center horizontally",
    "distributeHorizontally": "Distribute horizontally",
-    "distributeVertically": "Distribute vertically"
+    "distributeVertically": "Distribute vertically",
+    "viewMode": "View mode"
  },
  "buttons": {
    "clearReset": "Reset the canvas",
@@ -91,7 +91,8 @@
    "centerVertically": "Centrar verticalmente",
    "centerHorizontally": "Centrar horizontalmente",
    "distributeHorizontally": "Distribuir horizontalmente",
-    "distributeVertically": "Distribuir verticalmente"
+    "distributeVertically": "Distribuir verticalmente",
+    "viewMode": "Modo presentación"
  },
  "buttons": {
    "clearReset": "Limpiar lienzo y reiniciar el color de fondo",
@@ -80,9 +80,9 @@
    "gridMode": "حالت شبکه ای",
    "addToLibrary": "افزودن به کتابخانه",
    "removeFromLibrary": "حذف از کتابخانه",
-    "libraryLoadingMessage": "بارگذاری کتابخانه...",
+    "libraryLoadingMessage": "بارگذاری کتابخانه…",
    "libraries": "مرور کردن کتابخانه ها",
-    "loadingScene": "باگذاری صحنه...",
+    "loadingScene": "باگذاری صحنه…",
    "align": "تراز",
    "alignTop": "تراز به بالا",
    "alignBottom": "تراز به پایین",
@@ -91,7 +91,8 @@
    "centerVertically": "وسط قرار دادن به صورت عمودی",
    "centerHorizontally": "وسط قرار دادن به صورت افقی",
    "distributeHorizontally": "توزیع کردن به صورت افقی",
-    "distributeVertically": "توزیع کردن به صورت عمودی"
+    "distributeVertically": "توزیع کردن به صورت عمودی",
+    "viewMode": ""
  },
  "buttons": {
    "clearReset": "پاکسازی بوم نقاشی",
@@ -200,25 +201,25 @@
    "title": "خطا"
  },
  "helpDialog": {
-    "blog": "",
+    "blog": "بلاگ ما را بخوانید",
    "click": "",
-    "curvedArrow": "",
-    "curvedLine": "",
-    "documentation": "",
+    "curvedArrow": "فلش خمیده",
+    "curvedLine": "منحنی",
+    "documentation": "مستندات",
    "drag": "",
-    "editor": "",
-    "github": "",
-    "howto": "",
-    "or": "",
-    "preventBinding": "",
-    "shapes": "",
-    "shortcuts": "",
+    "editor": "ویرایشگر",
+    "github": "اشکالی می بینید؟ گزارش دهید",
+    "howto": "راهنمای ما را دنبال کنید",
+    "or": "یا",
+    "preventBinding": "مانع شدن از چسبیدن فلش ها",
+    "shapes": "شکل‌ها",
+    "shortcuts": "میانبرهای صفحه کلید",
    "textFinish": "",
-    "textNewLine": "",
-    "title": "",
-    "view": "",
-    "zoomToFit": "",
-    "zoomToSelection": ""
+    "textNewLine": "یک خط جدید اضافه کنید (متن)",
+    "title": "راهنما",
+    "view": "مشاهده",
+    "zoomToFit": "بزرگنمایی برای دیدن تمام آیتم ها",
+    "zoomToSelection": "بزرگنمایی قسمت انتخاب شده"
  },
  "encrypted": {
    "tooltip": "شما در یک محیط رمزگزاری شده دو طرفه در حال طراحی هستید پس Excalidraw هرگز طرح های شما را نمیبند."
@@ -236,7 +237,7 @@
    "width": "عرض"
  },
  "toast": {
-    "copyStyles": "",
-    "copyToClipboardAsPng": ""
+    "copyStyles": "کپی سبک.",
+    "copyToClipboardAsPng": "کپی در حافطه موقت به صورت PNG."
  }
 }
@@ -80,9 +80,9 @@
    "gridMode": "Ruudukkotila",
    "addToLibrary": "Lisää kirjastoon",
    "removeFromLibrary": "Poista kirjastosta",
-    "libraryLoadingMessage": "Ladataan kirjastoa...",
+    "libraryLoadingMessage": "Ladataan kirjastoa…",
    "libraries": "Selaa kirjastoja",
-    "loadingScene": "Ladataan työtä...",
+    "loadingScene": "Ladataan työtä…",
    "align": "Tasaa",
    "alignTop": "Tasaa ylös",
    "alignBottom": "Tasaa alas",
@@ -91,7 +91,8 @@
    "centerVertically": "Keskitä pystysuunnassa",
    "centerHorizontally": "Keskitä vaakasuunnassa",
    "distributeHorizontally": "Jaa vaakasuunnassa",
-    "distributeVertically": "Jaa pystysuunnassa"
+    "distributeVertically": "Jaa pystysuunnassa",
+    "viewMode": "Katselutila"
  },
  "buttons": {
    "clearReset": "Tyhjennä piirtoalue",
@@ -91,7 +91,8 @@
    "centerVertically": "Centrer verticalement",
    "centerHorizontally": "Centrer horizontalement",
    "distributeHorizontally": "Distribuer horizontalement",
-    "distributeVertically": "Distribuer verticalement"
+    "distributeVertically": "Distribuer verticalement",
+    "viewMode": "Mode présentation"
  },
  "buttons": {
    "clearReset": "Réinitialiser le canevas",
@@ -229,7 +230,7 @@
    "elements": "Éléments",
    "height": "Hauteur",
    "scene": "Scène",
-    "selected": "Sélectionné",
+    "selected": "Sélection",
    "storage": "Stockage",
    "title": "Stats pour les nerds",
    "total": "Total",
@@ -80,9 +80,9 @@
    "gridMode": "מצב רשת",
    "addToLibrary": "הוסף לספריה",
    "removeFromLibrary": "הסר מספריה",
-    "libraryLoadingMessage": "טוען ספריה...",
+    "libraryLoadingMessage": "טוען ספריה…",
    "libraries": "דפדף בספריות",
-    "loadingScene": "טוען תצוגה...",
+    "loadingScene": "טוען תצוגה…",
    "align": "יישר",
    "alignTop": "יישר למעלה",
    "alignBottom": "יישר למטה",
@@ -91,7 +91,8 @@
    "centerVertically": "מרכז אנכית",
    "centerHorizontally": "מרכז אופקית",
    "distributeHorizontally": "חלוקה אופקית",
-    "distributeVertically": "חלוקה אנכית"
+    "distributeVertically": "חלוקה אנכית",
+    "viewMode": ""
  },
  "buttons": {
    "clearReset": "אפס את הלוח",
@@ -91,7 +91,8 @@
    "centerVertically": "लंबवत केन्द्रित",
    "centerHorizontally": "क्षैतिज केन्द्रित",
    "distributeHorizontally": "क्षैतिज रूप से वितरित करें",
-    "distributeVertically": "खड़ी रूप से वितरित करें"
+    "distributeVertically": "खड़ी रूप से वितरित करें",
+    "viewMode": ""
  },
  "buttons": {
    "clearReset": "कैनवास रीसेट करें",
@@ -80,9 +80,9 @@
    "gridMode": "Hálómód",
    "addToLibrary": "Hozzáadás a könyvtárhoz",
    "removeFromLibrary": "Eltávólítás a könyvtárból",
-    "libraryLoadingMessage": "Könyvtár betöltése...",
+    "libraryLoadingMessage": "Könyvtár betöltése…",
    "libraries": "Könyvtárak böngészése",
-    "loadingScene": "Jelenet betöltése...",
+    "loadingScene": "Jelenet betöltése…",
    "align": "Igazítás",
    "alignTop": "Felülre igazítás",
    "alignBottom": "Alulra igazítás",
@@ -91,7 +91,8 @@
    "centerVertically": "Függőlegesen középre igazított",
    "centerHorizontally": "Vízszintesen középre igazított",
    "distributeHorizontally": "Vízszintes elosztás",
-    "distributeVertically": "Függőleges elosztás"
+    "distributeVertically": "Függőleges elosztás",
+    "viewMode": ""
  },
  "buttons": {
    "clearReset": "Vászon törlése",
@@ -80,9 +80,9 @@
    "gridMode": "Mode grid",
    "addToLibrary": "Tambahkan ke pustaka",
    "removeFromLibrary": "Hapus dari pustaka",
-    "libraryLoadingMessage": "Memuat pustaka...",
+    "libraryLoadingMessage": "Memuat pustaka…",
    "libraries": "Telusur pustaka",
-    "loadingScene": "Memuat pemandangan...",
+    "loadingScene": "Memuat pemandangan…",
    "align": "Perataan",
    "alignTop": "Rata atas",
    "alignBottom": "Rata bawah",
@@ -91,7 +91,8 @@
    "centerVertically": "Pusatkan secara vertikal",
    "centerHorizontally": "Pusatkan secara horizontal",
    "distributeHorizontally": "Distribusikan horizontal",
-    "distributeVertically": "Distribusikan vertikal"
+    "distributeVertically": "Distribusikan vertikal",
+    "viewMode": "Mode tampilan"
  },
  "buttons": {
    "clearReset": "Setel Ulang Kanvas",
@@ -200,25 +201,25 @@
    "title": "Kesalahan"
  },
  "helpDialog": {
-    "blog": "",
-    "click": "",
-    "curvedArrow": "",
-    "curvedLine": "",
-    "documentation": "",
-    "drag": "",
-    "editor": "",
-    "github": "",
-    "howto": "",
-    "or": "",
-    "preventBinding": "",
-    "shapes": "",
-    "shortcuts": "",
-    "textFinish": "",
-    "textNewLine": "",
-    "title": "",
-    "view": "",
-    "zoomToFit": "",
-    "zoomToSelection": ""
+    "blog": "Baca blog kami",
+    "click": "klik",
+    "curvedArrow": "Panah lengkung",
+    "curvedLine": "Garis lengkung",
+    "documentation": "Dokumentasi",
+    "drag": "seret",
+    "editor": "Editor",
+    "github": "Menemukan masalah? Kirimkan",
+    "howto": "Ikuti panduan kami",
+    "or": "atau",
+    "preventBinding": "Cegah pengikatan panah",
+    "shapes": "Bentuk",
+    "shortcuts": "Pintasan keyboard",
+    "textFinish": "Selesai mengedit (teks)",
+    "textNewLine": "Tambahkan baris baru (teks)",
+    "title": "Bantuan",
+    "view": "Tampilan",
+    "zoomToFit": "Perbesar agar sesuai dengan semua elemen",
+    "zoomToSelection": "Perbesar ke seleksi"
  },
  "encrypted": {
    "tooltip": "Gambar anda terenkripsi end-to-end sehingga server Excalidraw tidak akan pernah dapat melihatnya."
@@ -80,9 +80,9 @@
    "gridMode": "Modalità griglia",
    "addToLibrary": "Aggiungi alla libreria",
    "removeFromLibrary": "Rimuovi dalla libreria",
-    "libraryLoadingMessage": "Caricamento della biblioteca...",
+    "libraryLoadingMessage": "Caricamento della biblioteca…",
    "libraries": "Sfoglia librerie",
-    "loadingScene": "Caricamento della scena...",
+    "loadingScene": "Caricamento della scena…",
    "align": "Allinea",
    "alignTop": "Allinea in alto",
    "alignBottom": "Allinea in basso",
@@ -91,7 +91,8 @@
    "centerVertically": "Centra Verticalmente",
    "centerHorizontally": "Centra orizzontalmente",
    "distributeHorizontally": "Distribuisci orizzontalmente",
-    "distributeVertically": "Distribuisci verticalmente"
+    "distributeVertically": "Distribuisci verticalmente",
+    "viewMode": "Modalità visualizzazione"
  },
  "buttons": {
    "clearReset": "Svuota la tela",
@@ -200,25 +201,25 @@
    "title": "Errore"
  },
  "helpDialog": {
-    "blog": "",
-    "click": "",
-    "curvedArrow": "",
-    "curvedLine": "",
-    "documentation": "",
-    "drag": "",
-    "editor": "",
-    "github": "",
-    "howto": "",
-    "or": "",
-    "preventBinding": "",
-    "shapes": "",
-    "shortcuts": "",
-    "textFinish": "",
-    "textNewLine": "",
-    "title": "",
-    "view": "",
-    "zoomToFit": "",
-    "zoomToSelection": ""
+    "blog": "Leggi il nostro blog",
+    "click": "click",
+    "curvedArrow": "Freccia curva",
+    "curvedLine": "Linea curva",
+    "documentation": "Documentazione",
+    "drag": "trascina",
+    "editor": "Editor",
+    "github": "Trovato un problema? Segnalalo",
+    "howto": "Segui le nostre guide",
+    "or": "oppure",
+    "preventBinding": "Impedisci legame della freccia",
+    "shapes": "Forme",
+    "shortcuts": "Scorciatoie da tastiera",
+    "textFinish": "Termina la modifica (testo)",
+    "textNewLine": "Aggiungi nuova riga (testo)",
+    "title": "Guida",
+    "view": "Vista",
+    "zoomToFit": "Adatta zoom per mostrare tutti gli elementi",
+    "zoomToSelection": "Zoom alla selezione"
  },
  "encrypted": {
    "tooltip": "I tuoi disegni sono crittografati end-to-end in modo che i server di Excalidraw non li possano mai vedere."
@@ -80,9 +80,9 @@
    "gridMode": "",
    "addToLibrary": "ライブラリに追加",
    "removeFromLibrary": "ライブラリから削除",
-    "libraryLoadingMessage": "ライブラリを読み込み中...",
+    "libraryLoadingMessage": "ライブラリを読み込み中…",
    "libraries": "",
-    "loadingScene": "シーンを読み込み中...",
+    "loadingScene": "シーンを読み込み中…",
    "align": "整列",
    "alignTop": "上揃え",
    "alignBottom": "下揃え",
@@ -91,7 +91,8 @@
    "centerVertically": "縦方向に中央揃え",
    "centerHorizontally": "横方向に中央揃え",
    "distributeHorizontally": "",
-    "distributeVertically": ""
+    "distributeVertically": "",
+    "viewMode": ""
  },
  "buttons": {
    "clearReset": "キャンバスのリセット",
@@ -0,0 +1,243 @@
+{
+  "labels": {
+    "paste": "Senṭeḍ",
+    "pasteCharts": "Senṭeḍ udlifen",
+    "selectAll": "Fren akk",
+    "multiSelect": "Rnu aferdis ɣer tefrayt",
+    "moveCanvas": "Smutti taɣzut n usuneɣ",
+    "cut": "Gzem",
+    "copy": "Nɣel",
+    "copyAsPng": "Nɣel ɣer tecfawit am PNG",
+    "copyAsSvg": "Nɣel ɣer tecfawit am SVG",
+    "bringForward": "Awi ɣer sdat",
+    "sendToBack": "Awi s agilal",
+    "bringToFront": "Err ɣer deffir",
+    "sendBackward": "Awi ɣer deffir",
+    "delete": "Kkes",
+    "copyStyles": "Nɣel iɣunab",
+    "pasteStyles": "Senṭeḍ iɣunab",
+    "stroke": "Azizdew",
+    "background": "Agilal",
+    "fill": "Taččart",
+    "strokeWidth": "Tehri n yizirig",
+    "strokeStyle": "Aɣanib n tizirig",
+    "strokeStyle_solid": "Aččuran",
+    "strokeStyle_dashed": "S tjerriḍin",
+    "strokeStyle_dotted": "S tenqiḍin",
+    "sloppiness": "",
+    "opacity": "Tiḍullest",
+    "textAlign": "Areyyec n uḍris",
+    "edges": "Leryuf",
+    "sharp": "Yemsed",
+    "round": "Imdewer",
+    "arrowheads": "Ixfawen n tenccabt",
+    "arrowhead_none": "Ulac",
+    "arrowhead_arrow": "Taneccabt",
+    "arrowhead_bar": "Afeggag",
+    "arrowhead_dot": "Tanqiḍt",
+    "fontSize": "Tiddi n tsefsit",
+    "fontFamily": "Tawacult n tsefsiyin",
+    "onlySelected": "Tafrayt kan",
+    "withBackground": "S ugilal",
+    "exportEmbedScene": "Seddu asayes deg ufaylu yettwasifḍen",
+    "exportEmbedScene_details": "Asayes ad yettwasekles deg ufaylu n usifeḍ PNG/SVG akken akken ad yili wamek ara d-yettwarr seg-s usayes. Ayagi ad isimɣur tiddi n ufaylu n usifeḍ.",
+    "addWatermark": "Seddu \"Yettwaxdem s Excalidraw\"",
+    "handDrawn": "Asuneɣ s ufus",
+    "normal": "Amagnu",
+    "code": "Tangalt",
+    "small": "Meẓẓi",
+    "medium": "Alemmas",
+    "large": "Ameqran",
+    "veryLarge": "Meqqer aṭas",
+    "solid": "Aččuran",
+    "hachure": "Azerreg",
+    "crossHatch": "Azerreg anmidag",
+    "thin": "Arqaq",
+    "bold": "Azuran",
+    "left": "Azelmaḍ",
+    "center": "Talemmast",
+    "right": "Ayfus",
+    "extraBold": "Azuran aṭas",
+    "architect": "Amasdag",
+    "artist": "Anaẓur",
+    "cartoonist": "",
+    "fileTitle": "Azwel n ufaylu",
+    "colorPicker": "Amafran n yini",
+    "canvasBackground": "Agilal n teɣzut n usuneɣ",
+    "drawingCanvas": "Taɣzut n usuneɣ",
+    "layers": "Tissiyin",
+    "actions": "Tigawin",
+    "language": "Tutlayt",
+    "createRoom": "Bḍu tiɣimit n umɛawen s srid",
+    "duplicateSelection": "Sisleg",
+    "untitled": "War azwel",
+    "name": "Isem",
+    "yourName": "Isem-ik (im)",
+    "madeWithExcalidraw": "Yettwaxdem s Excalidraw",
+    "group": "Segrew tafrayt",
+    "ungroup": "Kkess asegrew i tefrayt",
+    "collaborators": "Imɛiwnen",
+    "gridMode": "Askar n uferrug",
+    "addToLibrary": "Rnu ɣer temkarḍit",
+    "removeFromLibrary": "Kkes si temkarḍit",
+    "libraryLoadingMessage": "Asali n temkarḍit…",
+    "libraries": "Snirem timkarḍiyin",
+    "loadingScene": "Asali n usayes…",
+    "align": "Reyyec",
+    "alignTop": "Areyyec uksawen",
+    "alignBottom": "Areyyec ukessar",
+    "alignLeft": "Reyyec s azelmaḍ",
+    "alignRight": "Areyyec s ayfus",
+    "centerVertically": "Di tlemmast s ibeddi",
+    "centerHorizontally": "Di tlemmast s uglawi",
+    "distributeHorizontally": "Freq s uglawi",
+    "distributeVertically": "Freq s yibeddi",
+    "viewMode": "Askar n tmuɣli"
+  },
+  "buttons": {
+    "clearReset": "Ales awennez n teɣzut n usuneɣ",
+    "export": "Sifeḍ",
+    "exportToPng": "Sifeḍ ɣer PNG",
+    "exportToSvg": "Sifeḍ ɣer SVG",
+    "copyToClipboard": "Nɣel ɣer tecfawit",
+    "copyPngToClipboard": "Nɣel PNG ɣer tecfawit",
+    "scale": "Taskala",
+    "save": "Sekles",
+    "saveAs": "Sekles am",
+    "load": "Sali-d",
+    "getShareableLink": "Awi-d aseɣwen n beṭṭu",
+    "close": "Mdel",
+    "selectLanguage": "Fren tutlayt",
+    "scrollBackToContent": "Uɣal s agbur",
+    "zoomIn": "Simɣur",
+    "zoomOut": "Simẓi",
+    "resetZoom": "Ales awennez n usemɣer",
+    "menu": "Umuɣ",
+    "done": "Ifukk",
+    "edit": "Ẓreg",
+    "undo": "Sefsex",
+    "redo": "Err-d",
+    "roomDialog": "Bdu amɛawen s srid",
+    "createNewRoom": "Snulfu-d taxxamt tamaynutt",
+    "fullScreen": "Agdil aččuran",
+    "darkMode": "Askar imsulles",
+    "lightMode": "Askar afaw",
+    "zenMode": "Askar Zen",
+    "exitZenMode": "Ffeɣ seg uskar Zen"
+  },
+  "alerts": {
+    "clearReset": "Ayagi ad isfeḍ akk taɣzut n usuneɣ. Tetḥeqqeḍ?",
+    "couldNotCreateShareableLink": "D awezɣi asnulfu n useɣwen n beṭṭu.",
+    "couldNotCreateShareableLinkTooBig": "D awezɣi asnulfu n useɣwen n beṭṭu. Asayes ɣezzif aṭas",
+    "couldNotLoadInvalidFile": "D awezɣi asali n ufaylu armeɣtu",
+    "importBackendFailed": "",
+    "cannotExportEmptyCanvas": "D awezɣi asifeḍ n teɣzut n usuneɣ tilemt.",
+    "couldNotCopyToClipboard": "D awezɣi anɣal ɣer tecfawit. Eɛreḍ ad tesqedceḍ iminig Chrome.",
+    "decryptFailed": "D awezɣi tukksa n uwgelhen i yisefka.",
+    "uploadedSecurly": "Asili yettwasɣelles s uwgelhen ixef s ixef, ayagi yebɣa ad d-yini belli aqeddac n Excalidraw akked medden ur zmiren ara ad ɣren agbur.",
+    "loadSceneOverridePrompt": "Asali n wunuɣ uffiɣ ad isemselsi agbur-inek (m) yellan. Tebɣiḍ ad tkemmeleḍ?",
+    "errorLoadingLibrary": "Teḍra-d tuccḍa deg usali n temkarḍit n wis kraḍ.",
+    "confirmAddLibrary": "Ayagi adirnu talɣa (win) {{numShapes}} ɣer temkarḍit-inek (m). Tetḥeqqeḍ?",
+    "imageDoesNotContainScene": "Taktert n tugniwin ur tettwadhel ara akka tura.\nTebɣiḍ ad tketreḍ asayes? Tugna-agi tettban-d ur tegbir ara isefka n usnas. Tesremdeḍ ayagi deg usifeḍ?",
+    "cannotRestoreFromImage": "Asayes ulamek ara d-yettwarr seg ufaylu-agi n tugna"
+  },
+  "toolBar": {
+    "selection": "Tafrayt",
+    "draw": "Unuɣ ilelli",
+    "rectangle": "Asrem",
+    "diamond": "Ameɣṛun",
+    "ellipse": "Taglayt",
+    "arrow": "Taneccabt",
+    "line": "Izirig",
+    "text": "Aḍris",
+    "library": "Tamkarḍit",
+    "lock": "Eǧǧ afecku n tefrayt yermed mbaɛd asuneɣ"
+  },
+  "headings": {
+    "canvasActions": "Tigawin n teɣzut n usuneɣ",
+    "selectedShapeActions": "Tigawin n talɣa yettwafernen",
+    "shapes": "Talɣiwin"
+  },
+  "hints": {
+    "linearElement": "Ssit akken ad tebduḍ aṭas n tenqiḍin, zuɣer i yiwen n yizirig",
+    "freeDraw": "Ssit yerna zuɣer, serreḥ ticki tfukeḍ",
+    "text": "Tixidest: tzemreḍ daɣen ad ternuḍ aḍris s usiti snat n tikkal anida tebɣiḍ s ufecku n tefrayt",
+    "linearElementMulti": "Ssit ɣef tenqiḍt taneggarut neɣ ssed taqeffalt Escape neɣ taqeffalt Kcem akken ad tfakkeḍ",
+    "lockAngle": "Tzemreḍ ad tḥettmeḍ tiɣmert s tuṭṭfa n tqeffalt SHIFT",
+    "resize": "Tzemreḍ ad tḥettemeḍ assaɣ s tuṭṭfa n tqeffalt SHIFT mi ara tettbeddileḍ tiddi,\nma teṭṭfeḍ ALT abeddel n tiddi ad yili si tlemmast",
+    "rotate": "Tzemreḍ ad tḥettemeḍ tiɣemmar s tuṭṭfa n SHIFT di tuzzya",
+    "lineEditor_info": "Ssit snat n tikkal neɣ ssed taqeffalt Kcem akken ad tẓergeḍ tinqiḍin",
+    "lineEditor_pointSelected": "Ssed taqeffalt kkes akken ad tekkseḍ tanqiḍt, CtrlOrCmd+D akken ad tsiselgeḍ, neɣ zuɣer akken ad tesmuttiḍ",
+    "lineEditor_nothingSelected": "Fren tanqiḍt ara tesmuttiḍ neɣ ara tekkseḍ, neɣ ṭṭef taqeffalt Alt akken ad ternuḍ tinqiḍin timaynutin"
+  },
+  "canvasError": {
+    "cannotShowPreview": "Ulamek abeqqeḍ n teskant",
+    "canvasTooBig": "Taɣzut n usuneɣ tezmer ad tili temeqqer aṭas.",
+    "canvasTooBigTip": "Tixidest: eɛreḍ ad tesqerbeḍ ciṭ iferdisen yembaɛaden."
+  },
+  "errorSplash": {
+    "headingMain_pre": "Teḍra-d tuccḍa. Eɛreḍ ",
+    "headingMain_button": "asali n usebter tikkelt-nniḍen.",
+    "clearCanvasMessage": "Ma yella tulsa n usali ur tefri ara ugur, eɛreḍ ",
+    "clearCanvasMessage_button": "asfaḍ n teɣzut n usuneɣ.",
+    "clearCanvasCaveat": " Ayagi ad d-iglu s usṛuḥu n umahil ",
+    "trackedToSentry_pre": "Tuccḍa akked umesmagi ",
+    "trackedToSentry_post": " tettwasekles deg unagraw-nneɣ.",
+    "openIssueMessage_pre": "",
+    "openIssueMessage_button": "afecku n weḍfar n yibugen.",
+    "openIssueMessage_post": " Ma ulac uɣilif seddu talɣut ukessar-agi s wenɣal akked usenṭeḍ di GitHub issue.",
+    "sceneContent": "Agbur n usayes:"
+  },
+  "roomDialog": {
+    "desc_intro": "Tzemreḍ ad d-teɛerḍeḍ medden ɣer usayes-inek (m) amiran akken ad ttekkin yid-k.",
+    "desc_privacy": "Ur tqelliq ara, tiɣimit tsseqdac awgelhen ixef s ixef, dɣa ayen ara tsunɣeḍ ad iqqim d amaẓlay. Ula d aqeddac-nneɣ ur yezmir ara ad iwali acu txeddemeḍ.",
+    "button_startSession": "Bdu tiɣimit",
+    "button_stopSession": "Ḥbes tiɣimit",
+    "desc_inProgressIntro": "Tiɣimit n umɛawen s srid tetteddu akka tura.",
+    "desc_shareLink": "Bḍu aseɣwen-agi akked medden ukud tebɣiḍ ad temɛawaneḍ:",
+    "desc_exitSession": "Aḥbas n tɣimit ad k (m) yesenser si texxamt, maca ad tizmireḍ ad tkemmeleḍ amahil s usayes, s wudem adigan. Ẓer belli ayagi ur yettḥaz ara imdanen-nniḍen, yerna ad izmiren ad kemmelen ad mɛawanen di tsuffeɣt-nnsen."
+  },
+  "errorDialog": {
+    "title": "Tuccḍa"
+  },
+  "helpDialog": {
+    "blog": "Ɣeṛ ablug-nneɣ",
+    "click": "ssit",
+    "curvedArrow": "Taneccabt izelgen",
+    "curvedLine": "Izirig izelgen",
+    "documentation": "Tasemlit",
+    "drag": "zuɣer",
+    "editor": "Amaẓrag",
+    "github": "Tufiḍ-d ugur? Azen-aɣ-d",
+    "howto": "Ḍfer imniren-nneɣ",
+    "or": "neɣ",
+    "preventBinding": "",
+    "shapes": "Talɣiwin",
+    "shortcuts": "Inegzumen n unasiw",
+    "textFinish": "Fak asiẓreg (aḍris)",
+    "textNewLine": "Rnu ajerriḍ amaynut (aḍris)",
+    "title": "Tallelt",
+    "view": "Tamuɣli",
+    "zoomToFit": "Simɣur akken ad twliḍ akk iferdisen",
+    "zoomToSelection": "Simɣur ɣer tefrayt"
+  },
+  "encrypted": {
+    "tooltip": "Unuɣen-inek (m) ttuwgelhnen seg yixef s ixef dɣa iqeddacen n Excalidraw werǧin ad ten-walin. "
+  },
+  "stats": {
+    "angle": "Tiɣmeṛt",
+    "element": "Aferdis",
+    "elements": "Iferdisen",
+    "height": "Tattayt",
+    "scene": "Asayes",
+    "selected": "Yettwafren",
+    "storage": "Aḥraz",
+    "title": "",
+    "total": "Aɣrud",
+    "width": "Tehri"
+  },
+  "toast": {
+    "copyStyles": "Iɣunab yettwaneɣlen.",
+    "copyToClipboardAsPng": "Yettwanɣel ɣer tecfawit am PNG."
+  }
+}
@@ -91,7 +91,8 @@
    "centerVertically": "수직으로 중앙 정렬",
    "centerHorizontally": "수평으로 중앙 정렬",
    "distributeHorizontally": "수평으로 분배",
-    "distributeVertically": "수직으로 분배"
+    "distributeVertically": "수직으로 분배",
+    "viewMode": ""
  },
  "buttons": {
    "clearReset": "캔버스 초기화",
@@ -80,9 +80,9 @@
    "gridMode": "",
    "addToLibrary": "မှတ်တမ်းတင်",
    "removeFromLibrary": "မှတ်တမ်းမှထုတ်",
-    "libraryLoadingMessage": "မှတ်တမ်းအား တင်သွင်းနေသည်...",
+    "libraryLoadingMessage": "မှတ်တမ်းအား တင်သွင်းနေသည်…",
    "libraries": "စာကြည့်တိုက်တွင်ရှာဖွေပါ",
-    "loadingScene": "မြင်ကွင်းဖော်နေသည်...",
+    "loadingScene": "မြင်ကွင်းဖော်နေသည်…",
    "align": "ချိန်ညှိ",
    "alignTop": "ထိပ်ညှိ",
    "alignBottom": "အခြေညှိ",
@@ -91,7 +91,8 @@
    "centerVertically": "ဒေါင်လိုက်အလယ်ညှိ",
    "centerHorizontally": "အလျားလိုက်အလယ်ညှိ",
    "distributeHorizontally": "အလျားလိုက်",
-    "distributeVertically": "ထောင်လိုက်"
+    "distributeVertically": "ထောင်လိုက်",
+    "viewMode": ""
  },
  "buttons": {
    "clearReset": "ကားချပ်ရှင်းလင်း",
@@ -80,9 +80,9 @@
    "gridMode": "Rutevisning",
    "addToLibrary": "Legg til i bibliotek",
    "removeFromLibrary": "Fjern fra bibliotek",
-    "libraryLoadingMessage": "Laster bibliotek...",
+    "libraryLoadingMessage": "Laster bibliotek…",
    "libraries": "Bla gjennom biblioteker",
-    "loadingScene": "Laster inn scene...",
+    "loadingScene": "Laster inn scene…",
    "align": "Juster",
    "alignTop": "Juster øverst",
    "alignBottom": "Juster nederst",
@@ -91,7 +91,8 @@
    "centerVertically": "Midtstill vertikalt",
    "centerHorizontally": "Midtstill horisontalt",
    "distributeHorizontally": "Distribuer horisontalt",
-    "distributeVertically": "Distribuer vertikalt"
+    "distributeVertically": "Distribuer vertikalt",
+    "viewMode": "Visningsmodus"
  },
  "buttons": {
    "clearReset": "Tøm lerretet og tilbakestill bakgrunnsfargen",
@@ -91,7 +91,8 @@
    "centerVertically": "Verticaal Centreren",
    "centerHorizontally": "Horizontaal Centreren",
    "distributeHorizontally": "Horizontaal verspreiden",
-    "distributeVertically": "Verticaal distribueren"
+    "distributeVertically": "Verticaal distribueren",
+    "viewMode": "Weergavemodus"
  },
  "buttons": {
    "clearReset": "Canvas opnieuw instellen",
@@ -80,9 +80,9 @@
    "gridMode": "Rutevisning",
    "addToLibrary": "Legg til i bibliotek",
    "removeFromLibrary": "Fjern frå bibliotek",
-    "libraryLoadingMessage": "Laster bibliotek...",
+    "libraryLoadingMessage": "Laster bibliotek…",
    "libraries": "Blad gjennom bibliotek",
-    "loadingScene": "Laster scene...",
+    "loadingScene": "Laster scene…",
    "align": "Juster",
    "alignTop": "Juster til topp",
    "alignBottom": "Juster til botn",
@@ -91,7 +91,8 @@
    "centerVertically": "Midtstill vertikalt",
    "centerHorizontally": "Midtstill horisontalt",
    "distributeHorizontally": "Sprei horisontalt",
-    "distributeVertically": "Sprei vertikalt"
+    "distributeVertically": "Sprei vertikalt",
+    "viewMode": ""
  },
  "buttons": {
    "clearReset": "Tilbakestill lerretet",
@@ -201,22 +202,22 @@
  },
  "helpDialog": {
    "blog": "",
-    "click": "",
+    "click": "klikk",
    "curvedArrow": "",
    "curvedLine": "",
    "documentation": "",
    "drag": "",
-    "editor": "",
+    "editor": "Redigering",
    "github": "",
    "howto": "",
-    "or": "",
+    "or": "eller",
    "preventBinding": "",
-    "shapes": "",
+    "shapes": "Formar",
    "shortcuts": "",
    "textFinish": "",
    "textNewLine": "",
-    "title": "",
-    "view": "",
+    "title": "Hjelp",
+    "view": "Vising",
    "zoomToFit": "",
    "zoomToSelection": ""
  },
@@ -91,7 +91,8 @@
    "centerVertically": "ਲੇਟਵੇਂ ਵਿਚਕਾਰ ਕਰੋ",
    "centerHorizontally": "ਖੜ੍ਹਵੇਂ ਵਿਚਕਾਰ ਕਰੋ",
    "distributeHorizontally": "ਖੜ੍ਹਵੇਂ ਇਕਸਾਰ ਵੰਡੋ",
-    "distributeVertically": "ਲੇਟਵੇਂ ਇਕਸਾਰ ਵੰਡੋ"
+    "distributeVertically": "ਲੇਟਵੇਂ ਇਕਸਾਰ ਵੰਡੋ",
+    "viewMode": ""
  },
  "buttons": {
    "clearReset": "ਕੈਨਵਸ ਰੀਸੈੱਟ ਕਰੋ",
@@ -200,25 +201,25 @@
    "title": "ਗਲਤੀ"
  },
  "helpDialog": {
-    "blog": "",
-    "click": "",
-    "curvedArrow": "",
-    "curvedLine": "",
-    "documentation": "",
-    "drag": "",
-    "editor": "",
-    "github": "",
-    "howto": "",
-    "or": "",
-    "preventBinding": "",
-    "shapes": "",
-    "shortcuts": "",
-    "textFinish": "",
-    "textNewLine": "",
-    "title": "",
-    "view": "",
-    "zoomToFit": "",
-    "zoomToSelection": ""
+    "blog": "ਸਾਡਾ ਬਲੌਗ ਪੜ੍ਹੋ",
+    "click": "ਕਲਿੱਕ",
+    "curvedArrow": "ਵਿੰਗਾ ਤੀਰ",
+    "curvedLine": "ਵਿੰਗੀ ਲਕੀਰ",
+    "documentation": "ਕਾਗਜ਼ਾਤ",
+    "drag": "ਘਸੀਟੋ",
+    "editor": "ਸੋਧਕ",
+    "github": "ਕੋਈ ਸਮੱਸਿਆ ਲੱਭੀ? ਜਮ੍ਹਾਂ ਕਰਵਾਓ",
+    "howto": "ਸਾਡੀਆਂ ਗਾਈਡਾਂ ਦੀ ਪਾਲਣਾ ਕਰੋ",
+    "or": "ਜਾਂ",
+    "preventBinding": "ਤੀਰ ਬੱਝਣਾ ਰੋਕੋ",
+    "shapes": "ਆਕ੍ਰਿਤੀਆਂ",
+    "shortcuts": "ਕੀਬੋਰਡ ਸ਼ਾਰਟਕੱਟ",
+    "textFinish": "ਸੋਧ ਮੁਕੰਮਲ ਕਰੋ (ਪਾਠ)",
+    "textNewLine": "ਨਵੀਂ ਪੰਕਤੀ ਜੋੜੋ (ਪਾਠ)",
+    "title": "ਮਦਦ",
+    "view": "ਦਿੱਖ",
+    "zoomToFit": "ਸਾਰੇ ਐਲੀਮੈਂਟਾਂ ਨੂੰ ਫਿੱਟ ਕਰਨ ਲਈ ਜ਼ੂਮ ਕਰੋ",
+    "zoomToSelection": "ਚੋਣ ਤੱਕ ਜ਼ੂਮ ਕਰੋ"
  },
  "encrypted": {
    "tooltip": "ਤੁਹਾਡੀ ਡਰਾਇੰਗਾਂ ਸਿਰੇ-ਤੋਂ-ਸਿਰੇ ਤੱਕ ਇਨਕਰਿਪਟ ਕੀਤੀਆਂ ਹੋਈਆਂ ਹਨ, ਇਸ ਲਈ Excalidraw ਦੇ ਸਰਵਰ ਉਹਨਾਂ ਨੂੰ ਕਦੇ ਵੀ ਨਹੀਂ ਦੇਖਣਗੇ।"
@@ -1,35 +1,36 @@
 {
-  "ar-SA": 90,
-  "bg-BG": 90,
-  "ca-ES": 90,
+  "ar-SA": 89,
+  "bg-BG": 93,
+  "ca-ES": 89,
  "de-DE": 100,
  "el-GR": 100,
  "en": 100,
  "es-ES": 100,
-  "fa-IR": 90,
+  "fa-IR": 98,
  "fi-FI": 100,
  "fr-FR": 100,
-  "he-IL": 90,
-  "hi-IN": 90,
-  "hu-HU": 90,
-  "id-ID": 91,
-  "it-IT": 91,
+  "he-IL": 89,
+  "hi-IN": 89,
+  "hu-HU": 89,
+  "id-ID": 100,
+  "it-IT": 100,
  "ja-JP": 81,
-  "ko-KR": 90,
+  "kab-KAB": 97,
+  "ko-KR": 89,
  "my-MM": 83,
  "nb-NO": 100,
  "nl-NL": 100,
-  "nn-NO": 90,
-  "pa-IN": 91,
+  "nn-NO": 92,
+  "pa-IN": 99,
  "pl-PL": 90,
  "pt-BR": 100,
-  "pt-PT": 100,
+  "pt-PT": 99,
  "ro-RO": 100,
-  "ru-RU": 91,
-  "sk-SK": 91,
+  "ru-RU": 99,
+  "sk-SK": 100,
  "sv-SE": 100,
-  "tr-TR": 90,
-  "uk-UA": 100,
-  "zh-CN": 90,
+  "tr-TR": 89,
+  "uk-UA": 99,
+  "zh-CN": 99,
  "zh-TW": 100
 }
@@ -91,7 +91,8 @@
    "centerVertically": "Wyśrodkuj w pionie",
    "centerHorizontally": "Wyśrodkuj w poziomie",
    "distributeHorizontally": "Rozłóż poziomo",
-    "distributeVertically": "Rozłóż pionowo"
+    "distributeVertically": "Rozłóż pionowo",
+    "viewMode": "Tryb widoku"
  },
  "buttons": {
    "clearReset": "Wyczyść dokument i zresetuj kolor dokumentu",
@@ -91,7 +91,8 @@
    "centerVertically": "Centralizar verticalmente",
    "centerHorizontally": "Centralizar horizontalmente",
    "distributeHorizontally": "Distribuir horizontalmente",
-    "distributeVertically": "Distribuir verticalmente"
+    "distributeVertically": "Distribuir verticalmente",
+    "viewMode": "Modo de visualização"
  },
  "buttons": {
    "clearReset": "Limpar o canvas e redefinir a cor de fundo",
@@ -80,9 +80,9 @@
    "gridMode": "Modo grade",
    "addToLibrary": "Adicionar à biblioteca",
    "removeFromLibrary": "Remover da biblioteca",
-    "libraryLoadingMessage": "Carregando biblioteca...",
+    "libraryLoadingMessage": "Carregando biblioteca…",
    "libraries": "Procurar bibliotecas",
-    "loadingScene": "Carregando cena...",
+    "loadingScene": "Carregando cena…",
    "align": "Alinhamento",
    "alignTop": "Alinhar ao topo",
    "alignBottom": "Alinhar ao fundo",
@@ -91,7 +91,8 @@
    "centerVertically": "Centralizar verticalmente",
    "centerHorizontally": "Centralizar horizontalmente",
    "distributeHorizontally": "Distribuir horizontalmente",
-    "distributeVertically": "Distribuir verticalmente"
+    "distributeVertically": "Distribuir verticalmente",
+    "viewMode": ""
  },
  "buttons": {
    "clearReset": "Limpar o canvas e redefinir a cor de fundo",
@@ -80,9 +80,9 @@
    "gridMode": "Mod grilă",
    "addToLibrary": "Adăugare la bibliotecă",
    "removeFromLibrary": "Eliminare din bibliotecă",
-    "libraryLoadingMessage": "Se încarcă biblioteca...",
+    "libraryLoadingMessage": "Se încarcă biblioteca…",
    "libraries": "Răsfoiește bibliotecile",
-    "loadingScene": "Se încarcă scena...",
+    "loadingScene": "Se încarcă scena…",
    "align": "Aliniere",
    "alignTop": "Aliniere sus",
    "alignBottom": "Aliniere jos",
@@ -91,7 +91,8 @@
    "centerVertically": "Centrare verticală",
    "centerHorizontally": "Centrare orizontală",
    "distributeHorizontally": "Distribuie orizontal",
-    "distributeVertically": "Distribuie vertical"
+    "distributeVertically": "Distribuie vertical",
+    "viewMode": "Mod de vizualizare"
  },
  "buttons": {
    "clearReset": "Resetare pânză",
@@ -80,9 +80,9 @@
    "gridMode": "Сетка",
    "addToLibrary": "Добавить в библиотеку",
    "removeFromLibrary": "Удалить из библиотеки",
-    "libraryLoadingMessage": "Загрузка библиотеки...",
+    "libraryLoadingMessage": "Загрузка библиотеки…",
    "libraries": "Просмотреть библиотеки",
-    "loadingScene": "Загрузка сцены...",
+    "loadingScene": "Загрузка сцены…",
    "align": "Выровнять",
    "alignTop": "Выровнять по верхнему краю",
    "alignBottom": "Выровнять по нижнему краю",
@@ -91,7 +91,8 @@
    "centerVertically": "Центрировать по вертикали",
    "centerHorizontally": "Центрировать по горизонтали",
    "distributeHorizontally": "Распределить по горизонтали",
-    "distributeVertically": "Распределить по вертикали"
+    "distributeVertically": "Распределить по вертикали",
+    "viewMode": ""
  },
  "buttons": {
    "clearReset": "Очистить холст и сбросить цвет фона",
@@ -200,25 +201,25 @@
    "title": "Ошибка"
  },
  "helpDialog": {
-    "blog": "",
-    "click": "",
-    "curvedArrow": "",
-    "curvedLine": "",
-    "documentation": "",
-    "drag": "",
-    "editor": "",
-    "github": "",
-    "howto": "",
-    "or": "",
-    "preventBinding": "",
-    "shapes": "",
-    "shortcuts": "",
-    "textFinish": "",
-    "textNewLine": "",
-    "title": "",
-    "view": "",
-    "zoomToFit": "",
-    "zoomToSelection": ""
+    "blog": "Прочитайте наш блог",
+    "click": "нажать",
+    "curvedArrow": "Изогнутая стрелка",
+    "curvedLine": "Изогнутая линия",
+    "documentation": "Документация",
+    "drag": "перетащить",
+    "editor": "Редактор",
+    "github": "Нашли проблему? Отправьте",
+    "howto": "Следуйте нашим инструкциям",
+    "or": "или",
+    "preventBinding": "Предотвращать привязку стрелок",
+    "shapes": "Фигуры",
+    "shortcuts": "Горячие клавиши",
+    "textFinish": "Закончить редактирование (текст)",
+    "textNewLine": "Добавить новую строку (текст)",
+    "title": "Помощь",
+    "view": "Просмотр",
+    "zoomToFit": "Отмастштабировать, чтобы поместились все элементы",
+    "zoomToSelection": "Увеличить до выделенного"
  },
  "encrypted": {
    "tooltip": "Ваши данные защищены сквозным (End-to-end) шифрованием. Серверы Excalidraw никогда не получат доступ к ним."
@@ -80,9 +80,9 @@
    "gridMode": "Režim mriežky",
    "addToLibrary": "Pridať do knižnice",
    "removeFromLibrary": "Odstrániť z knižnice",
-    "libraryLoadingMessage": "Načítavanie knižnice...",
+    "libraryLoadingMessage": "Načítavanie knižnice…",
    "libraries": "Prehliadať knižnice",
-    "loadingScene": "Načítavanie scény...",
+    "loadingScene": "Načítavanie scény…",
    "align": "Zarovnanie",
    "alignTop": "Zarovnať nahor",
    "alignBottom": "Zarovnať nadol",
@@ -91,7 +91,8 @@
    "centerVertically": "Zarovnať zvislo na stred",
    "centerHorizontally": "Zarovnať vodorovne na stred",
    "distributeHorizontally": "Rozmiestniť vodorovne",
-    "distributeVertically": "Rozmiestniť zvisle"
+    "distributeVertically": "Rozmiestniť zvisle",
+    "viewMode": "Režim zobrazenia"
  },
  "buttons": {
    "clearReset": "Obnoviť plátno",
@@ -200,25 +201,25 @@
    "title": "Chyba"
  },
  "helpDialog": {
-    "blog": "",
-    "click": "",
-    "curvedArrow": "",
-    "curvedLine": "",
-    "documentation": "",
-    "drag": "",
-    "editor": "",
-    "github": "",
-    "howto": "",
-    "or": "",
-    "preventBinding": "",
-    "shapes": "",
-    "shortcuts": "",
-    "textFinish": "",
-    "textNewLine": "",
-    "title": "",
-    "view": "",
-    "zoomToFit": "",
-    "zoomToSelection": ""
+    "blog": "Prečítajte si náš blog",
+    "click": "kliknutie",
+    "curvedArrow": "Zakrivená šípka",
+    "curvedLine": "Zakrivená čiara",
+    "documentation": "Dokumentácia",
+    "drag": "potiahnutie",
+    "editor": "Editovanie",
+    "github": "Objavili ste problém? Nahláste ho",
+    "howto": "Postupujte podľa naších návodov",
+    "or": "alebo",
+    "preventBinding": "Zakázať pripájanie šípky",
+    "shapes": "Tvary",
+    "shortcuts": "Klávesové skratky",
+    "textFinish": "Ukončenie editovania (text)",
+    "textNewLine": "Vložiť nový riadok (text)",
+    "title": "Pomocník",
+    "view": "Zobrazenie",
+    "zoomToFit": "Priblížiť aby boli zahrnuté všetky prvky",
+    "zoomToSelection": "Priblížiť na výber"
  },
  "encrypted": {
    "tooltip": "Vaše kresby používajú end-to-end šifrovanie, takže ich Excalidraw server nedokáže prečítať."
@@ -80,9 +80,9 @@
    "gridMode": "Rutnätsläge",
    "addToLibrary": "Lägg till i biblioteket",
    "removeFromLibrary": "Ta bort från bibliotek",
-    "libraryLoadingMessage": "Laddar bibliotek...",
+    "libraryLoadingMessage": "Laddar bibliotek…",
    "libraries": "Bläddra i bibliotek",
-    "loadingScene": "Laddar scen...",
+    "loadingScene": "Laddar scen…",
    "align": "Justera",
    "alignTop": "Justera överkant",
    "alignBottom": "Justera underkant",
@@ -91,7 +91,8 @@
    "centerVertically": "Centrera vertikalt",
    "centerHorizontally": "Centrera horisontellt",
    "distributeHorizontally": "Fördela horisontellt",
-    "distributeVertically": "Fördela vertikalt"
+    "distributeVertically": "Fördela vertikalt",
+    "viewMode": "Visningsläge"
  },
  "buttons": {
    "clearReset": "Återställ canvasen",
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Panayiotis Lipiridis	8802ea62ca	Grid	2021-02-03 13:59:40 +02:00
Panayiotis Lipiridis	3c86b014de	Merge	2021-02-03 13:54:48 +02:00
Excalidraw Bot	02598c6163	chore: Update translations from Crowdin (#2898 )	2021-02-02 22:06:44 +00:00
Aakansha Doshi	3e2890bd21	fix: track zenmode and grid mode usage (#2900 )	2021-02-02 20:57:22 +05:30
Lipis	210649f383	refactor: Use the latest vercel configuration instead of now (#2893 ) * refactor: Use the latest vercel configuration instead of now * Remove redict	2021-02-02 14:38:33 +01:00
Excalidraw Bot	f8087e01c8	chore: Update translations from Crowdin (#2894 )	2021-02-02 09:41:57 +00:00
Excalidraw Bot	e2522645f7	Update i18n.ts	2021-02-02 11:35:52 +02:00
Excalidraw Bot	d46a9166be	Update locales-coverage-description.js	2021-02-02 11:35:00 +02:00
Aakansha Doshi	675da16ca4	feat: add view mode in Excalidraw (#2840 ) Co-authored-by: Lipis <lipiridis@gmail.com>	2021-02-01 21:56:42 +01:00
dependabot[bot]	2b1b62d8f2	chore(deps): bump @sentry/integrations from 6.0.1 to 6.0.3 (#2889 ) * chore(deps): bump @sentry/integrations from 6.0.1 to 6.0.3 Bumps [@sentry/integrations](https://github.com/getsentry/sentry-javascript) from 6.0.1 to 6.0.3. - [Release notes](https://github.com/getsentry/sentry-javascript/releases) - [Changelog](https://github.com/getsentry/sentry-javascript/blob/master/CHANGELOG.md) - [Commits](https://github.com/getsentry/sentry-javascript/compare/6.0.1...6.0.3) Signed-off-by: dependabot[bot] <support@github.com> * Update both Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Panayiotis Lipiridis <lipiridis@gmail.com>	2021-02-01 12:59:03 +00:00
David Luzar	627c56ef1c	fix: disable UI pointer-events on canvas drag (#2856 )	2021-02-01 14:55:38 +02:00
Excalidraw Bot	0d0fe32485	chore: Update translations from Crowdin (#2875 )	2021-02-01 13:23:08 +02:00
dependabot[bot]	6576b9442e	chore(deps): bump firebase from 8.2.4 to 8.2.5 (#2888 ) Bumps [firebase](https://github.com/firebase/firebase-js-sdk) from 8.2.4 to 8.2.5. - [Release notes](https://github.com/firebase/firebase-js-sdk/releases) - [Changelog](https://github.com/firebase/firebase-js-sdk/blob/master/CHANGELOG.md) - [Commits](https://github.com/firebase/firebase-js-sdk/compare/firebase@8.2.4...firebase@8.2.5) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2021-01-31 20:58:05 +02:00
dependabot[bot]	ee4cb2d4a9	chore(deps-dev): bump webpack from 5.17.0 to 5.19.0 in /src/packages/utils (#2887 ) Bumps [webpack](https://github.com/webpack/webpack) from 5.17.0 to 5.19.0. - [Release notes](https://github.com/webpack/webpack/releases) - [Commits](https://github.com/webpack/webpack/compare/v5.17.0...v5.19.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2021-01-31 20:57:53 +02:00
dependabot[bot]	cdcc91faa5	chore(deps-dev): bump mini-css-extract-plugin from 1.3.4 to 1.3.5 in /src/packages/excalidraw (#2885 ) Bumps [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) from 1.3.4 to 1.3.5. - [Release notes](https://github.com/webpack-contrib/mini-css-extract-plugin/releases) - [Changelog](https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/CHANGELOG.md) - [Commits](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v1.3.4...v1.3.5) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2021-01-31 20:57:36 +02:00
dependabot[bot]	9093341dc1	chore(deps-dev): bump webpack from 5.17.0 to 5.19.0 in /src/packages/excalidraw (#2886 ) Bumps [webpack](https://github.com/webpack/webpack) from 5.17.0 to 5.19.0. - [Release notes](https://github.com/webpack/webpack/releases) - [Commits](https://github.com/webpack/webpack/compare/v5.17.0...v5.19.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2021-01-31 20:57:19 +02:00
David Luzar	1973ae9444	fix: stop flooring scroll positions (#2883 )	2021-01-31 10:47:43 +01:00
David Luzar	10cd6a24b0	feat: increase max zoom (#2881 )	2021-01-30 18:03:23 +01:00
David Luzar	6abf4f52ff	refactor: remove duplicate key handling (#2878 )	2021-01-30 10:30:00 +01:00
Aakansha Doshi	4624ec2bd6	fix: apply initialData appState for zenmode and grid stats and refactor check param for actions (#2871 ) * fix: pass default value for grid mode / zen mode so it sets the value from initialData appState fixes #2870 * change checked from boolean to be a function which recieves appState and returns boolean * fix * use clsx Co-authored-by: dwelle <luzar.david@gmail.com>	2021-01-29 23:38:37 +05:30
Arun	e8685c5236	feat: Remove copy & paste from context menu on desktop (#2872 ) * Remove copy & paste from context menu on desktop * fix build * Make requested changes * More changes * make into function * update changelog * fix tests Co-authored-by: dwelle <luzar.david@gmail.com>	2021-01-28 22:02:00 +01:00
Aakansha Doshi	6e9df2bae7	fix(app.tsx): show correct state of Nerd stats in context menu when nerd stats dialog closed (#2874 ) fixes #2873	2021-01-29 02:21:10 +05:30
Lipis	ed0bec41dc	chore: Update workflows to use the latest Node (#2863 )	2021-01-28 19:20:48 +05:30
David Luzar	d4e12a2962	reuse scss variables in js for SSOT (#2867 )	2021-01-28 17:28:35 +05:30
Kartik Prajapati	978e85a33b	feat: Add separators on context menu (#2659 ) Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: dwelle <luzar.david@gmail.com> Co-authored-by: Lipis <lipiridis@gmail.com>	2021-01-27 20:11:17 +01:00
Thomas Steiner	b5e26ba81f	refactor: Rename browser-nativefs to browser-fs-access (#2862 )	2021-01-27 20:47:55 +02:00
Excalidraw Bot	4392a4644a	chore: Update translations from Crowdin (#2861 )	2021-01-27 14:22:37 +02:00
Lipis	b1c8c538ee	fix: Change the timeout for reporting the version to 30s (#2858 )	2021-01-26 22:22:41 +02:00
Excalidraw Bot	f6492895df	chore: Update translations from Crowdin (#2839 ) Co-authored-by: Excalidraw Bot <77840495+excalidrawbot@users.noreply.github.com>	2021-01-26 14:48:36 +02:00
David Luzar	e75f5f20e7	fix: remote pointers not accounting for offset (#2855 )	2021-01-25 10:47:48 +01:00
David Luzar	0a0be839b9	refactor: rewrite collabWrapper to remove TDZs and simplify (#2834 )	2021-01-25 10:47:35 +01:00
dependabot[bot]	03f6d9c783	chore(deps-dev): bump webpack-cli from 4.3.1 to 4.4.0 in /src/packages/excalidraw (#2847 ) Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2021-01-24 09:00:02 +00:00
dependabot[bot]	df745c1098	chore(deps-dev): bump webpack from 5.15.0 to 5.17.0 in /src/packages/excalidraw (#2844 ) Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2021-01-24 08:59:37 +00:00
dependabot[bot]	b888f7e7ba	chore(deps-dev): bump webpack-bundle-analyzer from 4.3.0 to 4.4.0 in /src/packages/utils (#2848 ) Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2021-01-24 08:58:30 +00:00
dependabot[bot]	3010253f72	chore(deps): bump @sentry/browser from 5.30.0 to 6.0.1 (#2852 ) Bumps [@sentry/browser](https://github.com/getsentry/sentry-javascript) from 5.30.0 to 6.0.1. - [Release notes](https://github.com/getsentry/sentry-javascript/releases) - [Changelog](https://github.com/getsentry/sentry-javascript/blob/master/CHANGELOG.md) - [Commits](https://github.com/getsentry/sentry-javascript/compare/5.30.0...6.0.1) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2021-01-24 08:57:12 +00:00
dependabot[bot]	0815f3282e	chore(deps-dev): bump webpack-cli from 4.3.1 to 4.4.0 in /src/packages/utils (#2849 ) Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2021-01-24 10:55:38 +02:00
dependabot[bot]	9dd58288de	chore(deps-dev): bump webpack-bundle-analyzer from 4.3.0 to 4.4.0 in /src/packages/excalidraw (#2845 ) Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2021-01-24 10:54:48 +02:00
dependabot[bot]	c2e2bb495c	chore(deps-dev): bump webpack from 5.15.0 to 5.17.0 in /src/packages/utils (#2846 ) Bumps [webpack](https://github.com/webpack/webpack) from 5.15.0 to 5.17.0. - [Release notes](https://github.com/webpack/webpack/releases) - [Commits](https://github.com/webpack/webpack/compare/v5.15.0...v5.17.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2021-01-24 10:54:36 +02:00
dependabot[bot]	a31cfe1f07	chore(deps-dev): bump firebase-tools from 9.2.1 to 9.2.2 (#2850 ) Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2021-01-24 10:53:35 +02:00
dependabot[bot]	d3367bfe12	chore(deps-dev): bump eslint-config-prettier from 7.1.0 to 7.2.0 (#2851 ) Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2021-01-24 10:53:23 +02:00
dependabot[bot]	70791dfa7b	chore(deps): bump firebase from 8.2.3 to 8.2.4 (#2853 ) Bumps [firebase](https://github.com/firebase/firebase-js-sdk) from 8.2.3 to 8.2.4. - [Release notes](https://github.com/firebase/firebase-js-sdk/releases) - [Changelog](https://github.com/firebase/firebase-js-sdk/blob/master/CHANGELOG.md) - [Commits](https://github.com/firebase/firebase-js-sdk/compare/firebase@8.2.3...firebase@8.2.4) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2021-01-24 10:52:52 +02:00
dependabot[bot]	d63ec678db	chore(deps): bump @sentry/integrations from 5.30.0 to 6.0.1 (#2854 ) Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2021-01-24 10:52:41 +02:00
Lipis	26acebcdb6	chore: Update translations from Crowdin (#2817 )	2021-01-22 18:06:21 +02:00
David Luzar	9dc930b447	feat: add ctrl-y to redo (#2831 )	2021-01-21 16:21:54 +01:00
Aakansha Doshi	6e767fc949	fix(actionmenu): toggle help dialog when "shift+?" is pressed (#2828 )	2021-01-21 13:13:47 +02:00
Panayiotis Lipiridis	c6f06dd1fc	Merge	2021-01-11 12:23:43 +02:00
Panayiotis Lipiridis	922e28a198	Update the state properly	2020-12-24 23:15:15 +02:00
Panayiotis Lipiridis	49363afac1	Tests	2020-12-24 20:34:12 +02:00
Panayiotis Lipiridis	28a1b9a787	order	2020-12-24 17:55:44 +02:00
Panayiotis Lipiridis	9cfab40343	cleanup	2020-12-24 17:52:41 +02:00
Panayiotis Lipiridis	1d7c5705b2	More	2020-12-24 17:51:26 +02:00
Panayiotis Lipiridis	40cd4caeec	feat: Change grid size	2020-12-24 16:45:42 +02:00