chore: Update to the latest Cascadia and remove ttf

feat: Use the latest version of Virgil (#3124 )
chore(deps-dev): bump mini-css-extract-plugin from 1.3.8 to 1.3.9 in /src/packages/excalidraw (#3129 )
2021-02-28 19:11:36 +02:00 · 2021-02-28 13:22:32 +01:00 · 2021-02-28 11:49:29 +02:00 · 2021-02-28 11:48:34 +02:00 · 2021-02-28 09:14:23 +00:00 · 2021-02-28 11:13:30 +02:00
130 changed files with 21708 additions and 31401 deletions
@@ -1,10 +1,10 @@
 *
+!.env
+!.eslintrc.json
+!.npmrc
+!.prettierrc
+!package.json
 !public/
 !src/
-!.npmrc
-!.eslintrc.json
-!.prettierrc
-!package-lock.json
-!package.json
 !tsconfig.json
-!.env
+!yarn.lock
@@ -2,6 +2,7 @@
  "extends": ["prettier", "react-app"],
  "plugins": ["prettier"],
  "rules": {
+    "@typescript-eslint/no-unused-vars": "warn",
    "curly": "warn",
    "dot-notation": "warn",
    "import/no-anonymous-default-export": "off",
@@ -22,7 +23,6 @@
    ],
    "no-unneeded-ternary": "warn",
    "no-unused-expressions": "warn",
-    "no-unused-vars": "warn",
    "no-useless-return": "warn",
    "no-var": "warn",
    "object-shorthand": "warn",
@@ -1,36 +1,33 @@
 version: 2
 updates:
  - package-ecosystem: npm
-    directory: "/"
+    directory: /
    schedule:
      interval: weekly
      day: sunday
      time: "01:00"
-    open-pull-requests-limit: 99
    reviewers:
      - lipis
    assignees:
      - lipis

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

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

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

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

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

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

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

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

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

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

      - name: Create report file
        run: |
-          npm run locales-coverage
+          yarn locales-coverage
          FILE_CHANGED=$(git diff src/locales/percentages.json)
          if [ ! -z "${FILE_CHANGED}" ]; then
            git config --global user.name 'Excalidraw Bot'
@@ -33,7 +33,7 @@ jobs:
      - name: Construct comment body
        id: getCommentBody
        run: |
-          body=$(npm run locales-coverage:description | grep '^[^>]')
+          body=$(yarn locales-coverage:description | grep '^[^>]')
          body="${body//'%'/'%25'}"
          body="${body//$'\n'/'%0A'}"
          body="${body//$'\r'/'%0D'}"
@@ -1,4 +1,4 @@
-name: "Semantic PR title"
+name: Semantic PR title

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

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

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

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

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

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

 WORKDIR /opt/node_app

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

 ARG NODE_ENV=production

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

 FROM nginx:1.17-alpine

@@ -2,7 +2,7 @@
  <a href="https://excalidraw.com">
    <img width="540" src="./public/og-image-sm.png" alt="Excalidraw logo: Sketch handrawn like diagrams." />
  </a>
-  <h3>Virtual whiteboard for sketching hand-drawn like diagrams.<br>Collaborative and end to end encrypted.</h3>
+  <h3>Virtual whiteboard for sketching hand-drawn like diagrams.<br>Collaborative and end-to-end encrypted.</h3>
  <p>
    <a href="https://twitter.com/Excalidraw">
      <img alt="Follow Excalidraw on Twitter" src="https://img.shields.io/twitter/follow/excalidraw.svg?label=follow+excalidraw&style=social&logo=twitter">
@@ -20,11 +20,11 @@ Go to [excalidraw.com](https://excalidraw.com) to start sketching.

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

-## We accept donations
+## Supporting Excalidraw

 If you like the project, you can become a sponsor at [Open Collective](https://opencollective.com/excalidraw).

-<a href="https://opencollective.com/excalidraw#category-CONTRIBUTE" target="_blank"><img src="https://opencollective.com/excalidraw/tiers/sponsors.svg?avatarHeight=64"/></a>
+[<img src="https://opencollective.com/excalidraw/tiers/sponsors/0/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/0/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/1/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/1/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/2/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/2/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/3/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/3/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/4/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/4/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/5/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/5/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/6/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/6/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/7/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/7/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/8/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/8/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/9/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/9/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/10/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/10/website)

 <a href="https://opencollective.com/excalidraw#category-CONTRIBUTE" target="_blank"><img src="https://opencollective.com/excalidraw/tiers/backers.svg?avatarHeight=32"/></a>

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

 ### Create a collaboration session manually

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

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

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

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

 ### Code Sandbox

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

 ### Local Installation

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

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

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

 #### Commands

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

 #### Docker Compose

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

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

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

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

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

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

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

 ## Contributing

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

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

@@ -60,7 +60,7 @@

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

    <link rel="stylesheet" href="fonts.css" type="text/css" />
-
+    <script>
+      window.EXCALIDRAW_ASSET_PATH = "/";
+    </script>
    <% if (process.env.REACT_APP_GOOGLE_ANALYTICS_ID) { %>
    <script
      async
@@ -5,7 +5,7 @@

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

@@ -5,6 +5,7 @@ import { ProjectName } from "../components/ProjectName";
 import { ToolButton } from "../components/ToolButton";
 import "../components/ToolIcon.scss";
 import { Tooltip } from "../components/Tooltip";
+import { DarkModeToggle, Appearence } from "../components/DarkModeToggle";
 import { loadFromJSON, saveAsJSON } from "../data";
 import { t } from "../i18n";
 import useIsMobile from "../is-mobile";
@@ -96,9 +97,24 @@ export const actionChangeShouldAddWatermark = register({
 export const actionSaveScene = register({
  name: "saveScene",
  perform: async (elements, appState, value) => {
+    const fileHandleExists = !!appState.fileHandle;
    try {
      const { fileHandle } = await saveAsJSON(elements, appState);
-      return { commitToHistory: false, appState: { ...appState, fileHandle } };
+      return {
+        commitToHistory: false,
+        appState: {
+          ...appState,
+          fileHandle,
+          toastMessage: fileHandleExists
+            ? fileHandle.name
+              ? t("toast.fileSavedToFilename").replace(
+                  "{filename}",
+                  `"${fileHandle.name}"`,
+                )
+              : t("toast.fileSaved")
+            : null,
+        },
+      };
    } catch (error) {
      if (error?.name !== "AbortError") {
        console.error(error);
@@ -189,3 +205,31 @@ export const actionLoadScene = register({
    />
  ),
 });
+
+export const actionExportWithDarkMode = register({
+  name: "exportWithDarkMode",
+  perform: (_elements, appState, value) => {
+    return {
+      appState: { ...appState, exportWithDarkMode: value },
+      commitToHistory: false,
+    };
+  },
+  PanelComponent: ({ appState, updateData }) => (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "flex-end",
+        marginTop: "-45px",
+        marginBottom: "10px",
+      }}
+    >
+      <DarkModeToggle
+        value={appState.exportWithDarkMode ? "dark" : "light"}
+        onChange={(appearance: Appearence) => {
+          updateData(appearance === "dark");
+        }}
+        title={t("labels.toggleExportColorScheme")}
+      />
+    </div>
+  ),
+});
@@ -83,7 +83,7 @@ export const actionFinalize = register({
      // If the multi point line closes the loop,
      // set the last point to first point.
      // This ensures that loop remains closed at different scales.
-      const isLoop = isPathALoop(multiPointElement.points);
+      const isLoop = isPathALoop(multiPointElement.points, appState.zoom.value);
      if (
        multiPointElement.type === "line" ||
        multiPointElement.type === "draw"
@@ -42,7 +42,7 @@ export const actionGoToCollaborator = register({
      return null;
    }

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

    return (
@@ -8,6 +8,7 @@ import {
 } from "./types";
 import { ExcalidrawElement } from "../element/types";
 import { AppState, ExcalidrawProps } from "../types";
+import { MODES } from "../constants";

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

 export interface Action {
  name: ActionName;
@@ -40,6 +40,7 @@ export const getDefaultAppState = (): Omit<
    errorMessage: null,
    exportBackground: true,
    exportEmbedScene: false,
+    exportWithDarkMode: false,
    fileHandle: null,
    gridSize: null,
    height: window.innerHeight,
@@ -73,8 +74,6 @@ export const getDefaultAppState = (): Omit<
    zenModeEnabled: false,
    zoom: { value: 1 as NormalizedZoomValue, translation: { x: 0, y: 0 } },
    viewModeEnabled: false,
-    networkSpeed: 0,
-    networkPing: 0,
  };
 };

@@ -120,6 +119,7 @@ const APP_STATE_STORAGE_CONF = (<
  errorMessage: { browser: false, export: false },
  exportBackground: { browser: true, export: false },
  exportEmbedScene: { browser: true, export: false },
+  exportWithDarkMode: { browser: true, export: false },
  fileHandle: { browser: false, export: false },
  gridSize: { browser: true, export: true },
  height: { browser: false, export: false },
@@ -155,8 +155,6 @@ const APP_STATE_STORAGE_CONF = (<
  zenModeEnabled: { browser: true, export: false },
  zoom: { browser: true, export: false },
  viewModeEnabled: { browser: false, export: false },
-  networkSpeed: { browser: false, export: false },
-  networkPing: { browser: false, export: false },
 });

 const _clearAppStateForStorage = <ExportType extends "export" | "browser">(
@@ -1,6 +1,13 @@
 import colors from "./colors";
+import { AppState } from "./types";

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

@@ -4,7 +4,6 @@ import { RoughCanvas } from "roughjs/bin/canvas";
 import rough from "roughjs/bin/rough";
 import clsx from "clsx";

-import "../actions";
 import {
  actionAddToLibrary,
  actionBringForward,
@@ -51,8 +50,8 @@ import {
  GRID_SIZE,
  LINE_CONFIRM_THRESHOLD,
  MIME_TYPES,
-  NETWORK_TIMEOUT_MS,
  POINTER_BUTTON,
+  SCROLL_TIMEOUT,
  TAP_TWICE_TIMEOUT,
  TEXT_TO_CENTER_SNAP_THRESHOLD,
  TOUCH_CTX_MENU_TIMEOUT,
@@ -184,7 +183,6 @@ import LayerUI from "./LayerUI";
 import { Stats } from "./Stats";
 import { Toast } from "./Toast";
 import { actionToggleViewMode } from "../actions/actionToggleViewMode";
-import { getNetworkSpeed, getNetworkPing } from "../networkStats";

 const { history } = createHistory();

@@ -207,9 +205,6 @@ const gesture: Gesture = {
  initialScale: null,
 };

-const shouldEnableNetworkStats = !!(
-  typeof process !== "undefined" && process.env?.REACT_APP_SOCKET_SERVER_URL
-);
 export type PointerDownState = Readonly<{
  // The first position at which pointerDown happened
  origin: Readonly<{ x: number; y: number }>;
@@ -294,8 +289,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
    height: window.innerHeight,
  };
  private scene: Scene;
-  private networkSpeedIntervalId?: any;
-  private networkPingIntervalId?: any;
  constructor(props: ExcalidrawProps) {
    super(props);
    const defaultAppState = getDefaultAppState();
@@ -476,8 +469,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
            setAppState={this.setAppState}
            elements={this.scene.getElements()}
            onClose={this.toggleStats}
-            isCollaborating={this.props.isCollaborating}
-            shouldEnableNetworkStats={shouldEnableNetworkStats}
          />
        )}
        {this.state.toastMessage !== null && (
@@ -681,19 +672,24 @@ class App extends React.Component<ExcalidrawProps, AppState> {

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

    this.resetHistory();
    this.syncActionResult({
@@ -757,7 +753,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
    this.removeEventListeners();
    this.scene.destroy();
    clearTimeout(touchTimeout);
-    clearTimeout(this.networkSpeedIntervalId);
    touchTimeout = 0;
  }

@@ -836,6 +831,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {

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

    window.addEventListener(EVENT.RESIZE, this.onResize, false);
    window.addEventListener(EVENT.UNLOAD, this.onUnload, false);
@@ -884,34 +880,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
        gridSize: this.props.gridModeEnabled ? GRID_SIZE : null,
      });
    }
-    if (
-      shouldEnableNetworkStats &&
-      (prevState.showStats !== this.state.showStats ||
-        prevProps.isCollaborating !== this.props.isCollaborating)
-    ) {
-      const navigator: Navigator & {
-        connection?: {
-          addEventListener: Function;
-          removeEventListener: Function;
-        };
-      } = window.navigator;
-
-      if (this.state.showStats && this.props.isCollaborating) {
-        this.calculateNetStats();
-
-        navigator?.connection?.addEventListener(
-          "change",
-          this.calculateNetStats,
-        );
-      } else {
-        navigator?.connection?.removeEventListener(
-          "change",
-          this.calculateNetStats,
-        );
-        clearTimeout(this.networkSpeedIntervalId);
-      }
-    }
-
    document
      .querySelector(".excalidraw")
      ?.classList.toggle("Appearance_dark", this.state.appearance === "dark");
@@ -1009,6 +977,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      },
      {
        renderOptimizations: true,
+        renderScrollbars: !isMobile(),
      },
    );
    if (scrollBars) {
@@ -1037,42 +1006,10 @@ class App extends React.Component<ExcalidrawProps, AppState> {
    }
  }

-  private calculateNetStats = () => {
-    this.checkNetworkPing();
-    this.checkNetworkSpeed();
-  };
+  private onScroll = debounce(() => {
+    this.setState({ ...this.getCanvasOffsets() });
+  }, SCROLL_TIMEOUT);

-  private checkNetworkPing = async () => {
-    if (!this.state.showStats || !this.props.isCollaborating) {
-      clearTimeout(this.networkPingIntervalId);
-      return;
-    }
-    const networkPing = await getNetworkPing();
-    this.setState({ networkPing });
-    if (this.networkPingIntervalId) {
-      clearTimeout(this.networkPingIntervalId);
-    }
-    this.networkPingIntervalId = setTimeout(
-      this.checkNetworkPing,
-      NETWORK_TIMEOUT_MS,
-    );
-  };
-
-  private checkNetworkSpeed = async () => {
-    if (!this.state.showStats || !this.props.isCollaborating) {
-      clearTimeout(this.networkSpeedIntervalId);
-      return;
-    }
-    const networkSpeed = await getNetworkSpeed();
-    this.setState({ networkSpeed });
-    if (this.networkSpeedIntervalId) {
-      clearTimeout(this.networkSpeedIntervalId);
-    }
-    this.networkSpeedIntervalId = setTimeout(
-      this.checkNetworkSpeed,
-      NETWORK_TIMEOUT_MS,
-    );
-  };
  // Copy/paste

  private onCut = withBatchedUpdates((event: ClipboardEvent) => {
@@ -1625,6 +1562,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
    textWysiwyg({
      id: element.id,
      appState: this.state,
+      canvas: this.canvas,
      getViewportCoords: (x, y) => {
        const { x: viewportX, y: viewportY } = sceneCoordsToViewportCoords(
          {
@@ -2031,7 +1969,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
          points: points.slice(0, -1),
        });
      } else {
-        if (isPathALoop(points)) {
+        if (isPathALoop(points, this.state.zoom.value)) {
          document.documentElement.style.cursor = CURSOR_TYPE.POINTER;
        }
        // update last uncommitted point
@@ -2703,7 +2641,10 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      const { multiElement } = this.state;

      // finalize if completing a loop
-      if (multiElement.type === "line" && isPathALoop(multiElement.points)) {
+      if (
+        multiElement.type === "line" &&
+        isPathALoop(multiElement.points, this.state.zoom.value)
+      ) {
        mutateElement(multiElement, {
          lastCommittedPoint:
            multiElement.points[multiElement.points.length - 1],
@@ -3774,15 +3715,16 @@ class App extends React.Component<ExcalidrawProps, AppState> {
      options.push(actionCopyAsSvg);
    }
    if (!element) {
-      const viewModeOptions: ContextMenuOption[] = [
+      const viewModeOptions = [
        ...options,
+        typeof this.props.gridModeEnabled === "undefined" &&
+          actionToggleGridMode,
+        typeof this.props.zenModeEnabled === "undefined" && actionToggleZenMode,
+        typeof this.props.viewModeEnabled === "undefined" &&
+          actionToggleViewMode,
        actionToggleStats,
      ];

-      if (typeof this.props.viewModeEnabled === "undefined") {
-        viewModeOptions.push(actionToggleViewMode);
-      }
-
      ContextMenu.push({
        options: viewModeOptions,
        top: clientY,
@@ -2,9 +2,10 @@

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

+const supportsContextFilters =
+  "filter" in document.createElement("canvas").getContext("2d")!;
+
 export const ErrorCanvasPreview = () => {
  return (
    <div>
@@ -128,6 +131,8 @@ const ExportModal = ({
  return (
    <div className="ExportDialog">
      <div className="ExportDialog__preview" ref={previewRef} />
+      {supportsContextFilters &&
+        actionManager.renderAction("exportWithDarkMode")}
      <Stack.Col gap={2} align="center">
        <div className="ExportDialog__actions">
          <Stack.Row gap={2}>
@@ -26,7 +26,7 @@ $wide-viewport-width: 1000px;

    > span {
      padding: 0.2rem 0.4rem;
-      background-color: var(--overlay-background-color);
+      background-color: var(--overlay-bg-color);
      border-radius: 4px;
    }
  }
@@ -8,9 +8,9 @@
  }

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

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

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

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

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

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

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

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

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

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

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

      :root[dir="rtl"] &.transition-left {
@@ -27,7 +27,7 @@ import { ExportCB, ExportDialog } from "./ExportDialog";
 import { FixedSideContainer } from "./FixedSideContainer";
 import { GitHubCorner } from "./GitHubCorner";
 import { HintViewer } from "./HintViewer";
-import { exportFile, load, shield } from "./icons";
+import { exportFile, load, shield, trash } from "./icons";
 import { Island } from "./Island";
 import "./LayerUI.scss";
 import { LibraryUnit } from "./LibraryUnit";
@@ -100,6 +100,7 @@ const LibraryMenuItems = ({
  onInsertShape,
  pendingElements,
  setAppState,
+  setLibraryItems,
 }: {
  library: LibraryItems;
  pendingElements: LibraryItem;
@@ -107,6 +108,7 @@ const LibraryMenuItems = ({
  onInsertShape: (elements: LibraryItem) => void;
  onAddToLibrary: (elements: LibraryItem) => void;
  setAppState: React.Component<any, AppState>["setState"];
+  setLibraryItems: (library: LibraryItems) => void;
 }) => {
  const isMobile = useIsMobile();
  const numCells = library.length + (pendingElements.length > 0 ? 1 : 0);
@@ -150,6 +152,19 @@ const LibraryMenuItems = ({
            });
        }}
      />
+      <ToolButton
+        key="reset"
+        type="button"
+        title={t("buttons.resetLibrary")}
+        aria-label={t("buttons.resetLibrary")}
+        icon={trash}
+        onClick={() => {
+          if (window.confirm(t("alerts.resetLibrary"))) {
+            Library.resetLibrary();
+            setLibraryItems([]);
+          }
+        }}
+      />

      <a href="https://libraries.excalidraw.com" target="_excalidraw_libraries">
        {t("labels.libraries")}
@@ -281,6 +296,7 @@ const LibraryMenu = ({
          onInsertShape={onInsertShape}
          pendingElements={pendingElements}
          setAppState={setAppState}
+          setLibraryItems={setLibraryItems}
        />
      )}
    </Island>
@@ -426,7 +442,15 @@ const LayerUI = ({
        "transition-left": zenModeEnabled,
      })}
    >
-      <Island className={CLASSES.SHAPE_ACTIONS_MENU} padding={2}>
+      <Island
+        className={CLASSES.SHAPE_ACTIONS_MENU}
+        padding={2}
+        style={{
+          // we want to make sure this doesn't overflow so substracting 200
+          // which is approximately height of zoom footer and top left menu items with some buffer
+          maxHeight: `${appState.height - 200}px`,
+        }}
+      >
        <SelectedShapeActions
          appState={appState}
          elements={elements}
@@ -587,18 +611,6 @@ const LayerUI = ({
      >
        {t("buttons.exitZenMode")}
      </button>
-      {appState.scrolledOutside && (
-        <button
-          className="scroll-back-to-content"
-          onClick={() => {
-            setAppState({
-              ...calculateScrollCenter(elements, appState, canvas),
-            });
-          }}
-        >
-          {t("buttons.scrollBackToContent")}
-        </button>
-      )}
    </footer>
  );

@@ -661,6 +673,18 @@ const LayerUI = ({
      {renderBottomAppMenu()}
      {renderGitHubCorner()}
      {renderFooter()}
+      {appState.scrolledOutside && (
+        <button
+          className="scroll-back-to-content"
+          onClick={() => {
+            setAppState({
+              ...calculateScrollCenter(elements, appState, canvas),
+            });
+          }}
+        >
+          {t("buttons.scrollBackToContent")}
+        </button>
+      )}
    </div>
  );
 };
@@ -1,8 +1,13 @@
@import "../css/variables.module";

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

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

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

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

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

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

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

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

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

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

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

-  table {
-    width: 100%;
-    th {
-      border-bottom: 1px solid var(--input-border-color);
-      padding: 4px;
-    }
-    tr {
-      td:nth-child(2) {
-        min-width: 24px;
-        text-align: right;
+    :root[dir="rtl"] & {
+      left: 12px;
+      right: initial;
+
+      h3 {
+        margin: 0 0 8px 24px;
+      }
+      .close {
+        float: left;
      }
    }
  }
-
-  :root[dir="rtl"] & {
-    left: 12px;
-    right: initial;
-
-    h3 {
-      margin: 0 0 8px 24px;
-    }
-    .close {
-      float: left;
-    }
-  }
 }
@@ -11,13 +11,7 @@ import { t } from "../i18n";
 import useIsMobile from "../is-mobile";
 import { getTargetElements } from "../scene";
 import { AppState } from "../types";
-import {
-  debounce,
-  formatSpeedBits,
-  formatTime,
-  getVersion,
-  nFormatter,
-} from "../utils";
+import { debounce, getVersion, nFormatter } from "../utils";
 import { close } from "./icons";
 import { Island } from "./Island";
 import "./Stats.scss";
@@ -36,8 +30,6 @@ export const Stats = (props: {
  setAppState: React.Component<any, AppState>["setState"];
  elements: readonly NonDeletedExcalidrawElement[];
  onClose: () => void;
-  isCollaborating?: boolean;
-  shouldEnableNetworkStats: boolean;
 }) => {
  const isMobile = useIsMobile();
  const [storageSizes, setStorageSizes] = useState<StorageSizes>({
@@ -178,37 +170,6 @@ export const Stats = (props: {
                </td>
              </tr>
            )}
-            {props.shouldEnableNetworkStats && props.isCollaborating ? (
-              <>
-                <tr>
-                  <th colSpan={2}>{t("stats.collaboration")}</th>
-                </tr>
-                <tr>
-                  <td>{t("stats.collaborators")}</td>
-                  <td>{props.appState.collaborators.size}</td>
-                </tr>
-                <tr>
-                  <td>{t("stats.ping")}</td>
-                  <td>
-                    {props.appState.networkPing === 0
-                      ? "…"
-                      : props.appState.networkPing > 0
-                      ? formatTime(props.appState.networkPing)
-                      : t("stats.error")}
-                  </td>
-                </tr>
-                <tr>
-                  <td>{t("stats.speed")}</td>
-                  <td>
-                    {props.appState.networkSpeed === 0
-                      ? "…"
-                      : props.appState.networkSpeed > 0
-                      ? formatSpeedBits(props.appState.networkSpeed)
-                      : t("stats.error")}
-                  </td>
-                </tr>
-              </>
-            ) : null}
            <tr>
              <th colSpan={2}>{t("stats.version")}</th>
            </tr>
@@ -2,18 +2,18 @@

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

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

@@ -11,7 +11,7 @@
    left: 50%;
    margin-left: -150px;
    padding: 4px 0;
-    position: fixed;
+    position: absolute;
    text-align: center;
    width: 300px;
    z-index: 999999;
@@ -1,15 +1,14 @@
 import { FontFamily } from "./element/types";
+import cssVariables from "./css/variables.module.scss";

 export const APP_NAME = "Excalidraw";

-export const DRAGGING_THRESHOLD = 10; // 10px
-export const LINE_CONFIRM_THRESHOLD = 10; // 10px
+export const DRAGGING_THRESHOLD = 10; // px
+export const LINE_CONFIRM_THRESHOLD = 8; // px
 export const ELEMENT_SHIFT_TRANSLATE_AMOUNT = 5;
 export const ELEMENT_TRANSLATE_AMOUNT = 1;
 export const TEXT_TO_CENTER_SNAP_THRESHOLD = 30;
 export const SHIFT_LOCKING_ANGLE = Math.PI / 12;
-export const NETWORK_TIMEOUT_MS = 4000;
-
 export const CURSOR_TYPE = {
  TEXT: "text",
  CROSSHAIR: "crosshair",
@@ -49,6 +48,7 @@ export enum EVENT {
  TOUCH_END = "touchend",
  HASHCHANGE = "hashchange",
  VISIBILITY_CHANGE = "visibilitychange",
+  SCROLL = "scroll",
 }

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

 export const ZOOM_STEP = 0.1;

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

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

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

  .panelRow {
@@ -72,7 +71,7 @@
      margin-top: 0.333rem;
      margin-bottom: 0.333rem;
      font-size: 0.75rem;
-      color: var(--text-color-primary);
+      color: var(--text-primary-color);
      font-weight: bold;
      display: block;
    }
@@ -238,10 +237,10 @@
    left: 0;
    right: 0;
    --bar-padding: calc(4 * var(--space-factor));
-    padding-top: #{"max(var(--bar-padding), var(--sat, 0px))"};
-    padding-right: var(--sar, 0px);
-    padding-bottom: var(--sab, 0px);
-    padding-left: var(--sal, 0px);
+    padding-top: #{"max(var(--bar-padding), var(--sat,0))"};
+    padding-right: var(--sar, 0);
+    padding-bottom: var(--sab, 0);
+    padding-left: var(--sal, 0);
    z-index: 4;
    display: flex;
    align-items: flex-end;
@@ -258,7 +257,7 @@
      pointer-events: initial;

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

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

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

  .scroll-back-to-content {
    color: var(--popup-text-color);
-    position: fixed;
+    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
@@ -462,7 +460,7 @@
      display: none;
    }
    .scroll-back-to-content {
-      bottom: calc(80px + var(--sab, 0px));
+      bottom: calc(80px + var(--sab, 0));
      z-index: -1;
    }
  }
@@ -1,43 +1,44 @@
@import "open-color/open-color.scss";
+@import "./variables.module.scss";

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

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

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

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

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

 :export {
  isMobileQuery: unquote($is-mobile-query);
+  appearanceFilter: unquote($appearance-filter);
 }
@@ -41,6 +41,7 @@ export const exportCanvas = async (
  if (type === "svg" || type === "clipboard-svg") {
    const tempSvg = exportToSvg(elements, {
      exportBackground,
+      exportWithDarkMode: appState.exportWithDarkMode,
      viewBackgroundColor,
      exportPadding,
      scale,
@@ -141,7 +141,7 @@ export const restoreElements = (
  }, [] as ExcalidrawElement[]);
 };

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

 export interface LibraryData {
@@ -129,7 +129,7 @@ export class LinearElementEditor {
      isDragging &&
      (activePointIndex === 0 || activePointIndex === element.points.length - 1)
    ) {
-      if (isPathALoop(element.points)) {
+      if (isPathALoop(element.points, appState.zoom.value)) {
        LinearElementEditor.movePoint(
          element,
          activePointIndex,
@@ -38,6 +38,7 @@ export const textWysiwyg = ({
  onSubmit,
  getViewportCoords,
  element,
+  canvas,
 }: {
  id: ExcalidrawElement["id"];
  appState: AppState;
@@ -45,6 +46,7 @@ export const textWysiwyg = ({
  onSubmit: (text: string) => void;
  getViewportCoords: (x: number, y: number) => [number, number];
  element: ExcalidrawElement;
+  canvas: HTMLCanvasElement | null;
 }) => {
  const updateWysiwygStyle = () => {
    const updatedElement = Scene.getScene(element)?.getElement(id);
@@ -151,6 +153,10 @@ export const textWysiwyg = ({
    editable.oninput = null;
    editable.onkeydown = null;

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

  editable.onblur = handleSubmit;
-  // reposition wysiwyg in case of window resize. Happens on mobile when
-  // device keyboard is opened.
-  window.addEventListener("resize", updateWysiwygStyle);
+
+  // reposition wysiwyg in case of canvas is resized. Using ResizeObserver
+  // is preferred so we catch changes from host, where window may not resize.
+  let observer: ResizeObserver | null = null;
+  if (canvas && "ResizeObserver" in window) {
+    observer = new window.ResizeObserver(() => {
+      updateWysiwygStyle();
+    });
+    observer.observe(canvas);
+  } else {
+    window.addEventListener("resize", updateWysiwygStyle);
+  }
+
  window.addEventListener("pointerdown", onPointerDown);
  window.addEventListener("wheel", stopEvent, {
    passive: false,
@@ -256,6 +256,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
        if (elements) {
          scenePromise.resolve({
            elements,
+            scrollToCenter: true,
          });
        }
      } catch (error) {
@@ -307,7 +308,10 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
                init: true,
              });
              // noop if already resolved via init from firebase
-              scenePromise.resolve({ elements: reconciledElements });
+              scenePromise.resolve({
+                elements: reconciledElements,
+                scrollToCenter: true,
+              });
            }
            break;
          }
@@ -7,7 +7,7 @@
  }

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

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

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

    .ToolIcon__label,
    .ToolIcon__icon svg {
@@ -119,7 +119,11 @@ const RoomDialog = ({
    );
  };
  return (
-    <Dialog small onCloseRequest={handleClose} title={t("labels.createRoom")}>
+    <Dialog
+      small
+      onCloseRequest={handleClose}
+      title={t("labels.liveCollaboration")}
+    >
      {renderRoomDialog()}
    </Dialog>
  );
@@ -13,7 +13,7 @@ import { ExcalidrawImperativeAPI } from "../components/App";
 import { ErrorDialog } from "../components/ErrorDialog";
 import { TopErrorBoundary } from "../components/TopErrorBoundary";
 import { APP_NAME, EVENT, TITLE_TIMEOUT, VERSION_TIMEOUT } from "../constants";
-import { ImportedDataState } from "../data/types";
+import { DataState, ImportedDataState } from "../data/types";
 import {
  ExcalidrawElement,
  NonDeletedExcalidrawElement,
@@ -75,7 +75,11 @@ const initializeScene = async (opts: {

  const initialData = importFromLocalStorage();

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

  let roomLinkData = getCollaborationLinkData(window.location.href);
  const isExternalScene = !!(id || jsonMatch || roomLinkData);
@@ -94,6 +98,7 @@ const initializeScene = async (opts: {
      } else if (jsonMatch) {
        scene = await loadScene(jsonMatch[1], jsonMatch[2], initialData);
      }
+      scene.scrollToCenter = true;
      if (!roomLinkData) {
        window.history.replaceState({}, APP_NAME, window.location.origin);
      }
@@ -281,7 +286,6 @@ function ExcalidrawWrapper() {
        width={dimensions.width}
        height={dimensions.height}
        initialData={initialStatePromiseRef.current.promise}
-        user={{ name: collabAPI?.username }}
        onCollabButtonClick={collabAPI?.onCollabButtonClick}
        isCollaborating={collabAPI?.isCollaborating()}
        onPointerUpdate={collabAPI?.onPointerUpdate}
@@ -12,6 +12,7 @@ interface Document {
 interface Window {
  ClipboardItem: any;
  __EXCALIDRAW_SHA__: string | undefined;
+  EXCALIDRAW_ASSET_PATH: string | undefined;
  gtag: Function;
 }

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

 const COMPLETION_THRESHOLD = 85;

@@ -55,25 +56,33 @@ export const languages: Language[] = allLanguages
      COMPLETION_THRESHOLD,
  );

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

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

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

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

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

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

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

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

 ReactDOM.render(<ExcalidrawApp />, document.getElementById("root"));
@@ -68,7 +68,7 @@
    "layers": "الطبقات",
    "actions": "الإجراءات",
    "language": "اللغة",
-    "createRoom": "مشاركة الجلسة مباشرة",
+    "liveCollaboration": "",
    "duplicateSelection": "تكرار",
    "untitled": "غير معنون",
    "name": "الاسم",
@@ -77,7 +77,7 @@
    "group": "تحديد مجموعة",
    "ungroup": "إلغاء تحديد مجموعة",
    "collaborators": "المتعاونون",
-    "gridMode": "وضع الشبكة",
+    "showGrid": "",
    "addToLibrary": "أضف إلى المكتبة",
    "removeFromLibrary": "حذف من المكتبة",
    "libraryLoadingMessage": "جارٍ تحميل المكتبة…",
@@ -117,7 +117,7 @@
    "edit": "تعديل",
    "undo": "تراجع",
    "redo": "إعادة تنفيذ",
-    "roomDialog": "بدء المشاركة الحية",
+    "resetLibrary": "",
    "createNewRoom": "إنشاء غرفة جديدة",
    "fullScreen": "شاشة كاملة",
    "darkMode": "الوضع المظلم",
@@ -140,7 +140,8 @@
    "errorLoadingLibrary": "حصل خطأ أثناء تحميل مكتبة الطرف الثالث.",
    "confirmAddLibrary": "هذا سيضيف {{numShapes}} شكل إلى مكتبتك. هل أنت متأكد؟",
    "imageDoesNotContainScene": "استيراد الصور غير مدعوم في الوقت الراهن.\n\nهل تريد استيراد مشهد؟ لا يبدو أن هذه الصورة تحتوي على أي بيانات مشهد. هل قمت بسماح هذا أثناء التصدير؟",
-    "cannotRestoreFromImage": "تعذر استعادة المشهد من ملف الصورة"
+    "cannotRestoreFromImage": "تعذر استعادة المشهد من ملف الصورة",
+    "resetLibrary": ""
  },
  "toolBar": {
    "selection": "تحديد",
@@ -243,6 +244,8 @@
  "toast": {
    "copyStyles": "",
    "copyToClipboard": "",
-    "copyToClipboardAsPng": ""
+    "copyToClipboardAsPng": "",
+    "fileSaved": "",
+    "fileSavedToFilename": ""
  }
 }
@@ -8,11 +8,11 @@
    "cut": "Изрежи",
    "copy": "Копирай",
    "copyAsPng": "Копиране в клипборда",
-    "copyAsSvg": "Копиране в клипборда",
-    "bringForward": "Преместване на~пред",
+    "copyAsSvg": "Копирано в клипборда като SVG",
+    "bringForward": "Преместване напред",
    "sendToBack": "Изнасяне назад",
-    "bringToFront": "~Изнасяне отпред",
-    "sendBackward": "Изпрати назад",
+    "bringToFront": "Изнасяне отпред",
+    "sendBackward": "Изпрати отзад",
    "delete": "Изтрий",
    "copyStyles": "Копирайте стилове",
    "pasteStyles": "Постави стилове",
@@ -68,7 +68,7 @@
    "layers": "Слоеве",
    "actions": "Действия",
    "language": "Език",
-    "createRoom": "Споделете сесия за сътрудничество на живо",
+    "liveCollaboration": "",
    "duplicateSelection": "Дублирай",
    "untitled": "Неозаглавено",
    "name": "Име",
@@ -77,7 +77,7 @@
    "group": "Групирай селекцията",
    "ungroup": "Спри групирането на селекцията",
    "collaborators": "Сътрудници",
-    "gridMode": "Решетъчен режим",
+    "showGrid": "Показване на мрежа",
    "addToLibrary": "Добавяне към библиотеката",
    "removeFromLibrary": "Премахване от библиотеката",
    "libraryLoadingMessage": "Зареждане на библиотеката…",
@@ -92,7 +92,7 @@
    "centerHorizontally": "Центрирай хоризонтално",
    "distributeHorizontally": "Разпредели хоризонтално",
    "distributeVertically": "Разпредели вертикално",
-    "viewMode": ""
+    "viewMode": "Изглед"
  },
  "buttons": {
    "clearReset": "Нулиране на платно",
@@ -117,7 +117,7 @@
    "edit": "Редактиране",
    "undo": "Отмяна",
    "redo": "Повтори",
-    "roomDialog": "Започнете сътрудничество на живо",
+    "resetLibrary": "",
    "createNewRoom": "Създай нова стая",
    "fullScreen": "На цял екран",
    "darkMode": "Тъмен режим",
@@ -136,11 +136,12 @@
    "decryptFailed": "Данните не можаха да се дешифрират.",
    "uploadedSecurly": "Качването е защитено с криптиране от край до край, което означава, че сървърът Excalidraw и трети страни не могат да четат съдържанието.",
    "loadSceneOverridePrompt": "Зареждането на външна рисунка ще презапише настоящото ви съдържание. Желаете ли да продължите?",
-    "collabStopOverridePrompt": "",
+    "collabStopOverridePrompt": "Прекратяването на сесията ще презапише предишната, локално запазена, рисунка. Сигурни ли сте?\n\n(Ако искате да продължите с локалната рисунка, просто затворете таба на браузъра.)",
    "errorLoadingLibrary": "Възникна грешка при зареждането на външна библиотека.",
    "confirmAddLibrary": "Ще се добавят {{numShapes}} фигура(и) във вашата библиотека. Сигурни ли сте?",
    "imageDoesNotContainScene": "Импортирането на картинки не се поддържва в момента.\n\nИскате да импортнете сцена? Тази картинка не съдържа данни от сцена. Разрешили ли сте последното при експортирането?",
-    "cannotRestoreFromImage": "Не може да бъде възстановена сцена от този файл"
+    "cannotRestoreFromImage": "Не може да бъде възстановена сцена от този файл",
+    "resetLibrary": ""
  },
  "toolBar": {
    "selection": "Селекция",
@@ -202,24 +203,24 @@
    "title": "Грешка"
  },
  "helpDialog": {
-    "blog": "",
+    "blog": "Прочетете нашия блог",
    "click": "клик",
-    "curvedArrow": "",
-    "curvedLine": "",
-    "documentation": "",
+    "curvedArrow": "Извита стрелка",
+    "curvedLine": "Извита линия",
+    "documentation": "Документация",
    "drag": "плъзнете",
    "editor": "Редактор",
-    "github": "",
-    "howto": "",
+    "github": "Намерихте проблем? Изпратете",
+    "howto": "Следвайте нашите ръководства",
    "or": "или",
-    "preventBinding": "",
+    "preventBinding": "Спри прилепяне на стрелките",
    "shapes": "Фигури",
    "shortcuts": "Клавиши за бърз достъп",
-    "textFinish": "",
-    "textNewLine": "",
-    "title": "",
+    "textFinish": "Завършете редактирането (текст)",
+    "textNewLine": "Добавяне на нов ред (текст)",
+    "title": "Помощ",
    "view": "Преглед",
-    "zoomToFit": "",
+    "zoomToFit": "Приближи докато се виждат всички елементи",
    "zoomToSelection": "Приближи селекцията"
  },
  "encrypted": {
@@ -235,14 +236,16 @@
    "storage": "Съхранение на данни",
    "title": "Статистика за хакери",
    "total": "Общо",
-    "version": "",
-    "versionCopy": "",
-    "versionNotAvailable": "",
+    "version": "Версия",
+    "versionCopy": "Настисни за да копираш",
+    "versionNotAvailable": "Версията не е налична",
    "width": "Широчина"
  },
  "toast": {
-    "copyStyles": "",
-    "copyToClipboard": "",
-    "copyToClipboardAsPng": ""
+    "copyStyles": "Копирани стилове.",
+    "copyToClipboard": "Копирано в клипборда.",
+    "copyToClipboardAsPng": "Копирано в клипборда като PNG.",
+    "fileSaved": "",
+    "fileSavedToFilename": ""
  }
 }
@@ -68,7 +68,7 @@
    "layers": "Capes",
    "actions": "Accions",
    "language": "Llengua",
-    "createRoom": "Compartir una sessió de col·laboració en directe",
+    "liveCollaboration": "",
    "duplicateSelection": "Duplicar",
    "untitled": "Sense títol",
    "name": "Nom",
@@ -77,7 +77,7 @@
    "group": "Agrupar la selecció",
    "ungroup": "Desagrupar la selecció",
    "collaborators": "Col·laboradors",
-    "gridMode": "Mode quadrícula",
+    "showGrid": "",
    "addToLibrary": "Afegir a la biblioteca",
    "removeFromLibrary": "Eliminar de la biblioteca",
    "libraryLoadingMessage": "Carregant la biblioteca…",
@@ -117,7 +117,7 @@
    "edit": "Editar",
    "undo": "Desfer",
    "redo": "Refer",
-    "roomDialog": "Començar col·laboració en directe",
+    "resetLibrary": "",
    "createNewRoom": "Crear sala nova",
    "fullScreen": "Pantalla completa",
    "darkMode": "Mode fosc",
@@ -140,7 +140,8 @@
    "errorLoadingLibrary": "S'ha produït un error en carregar la biblioteca de tercers.",
    "confirmAddLibrary": "Això afegirà {{numShapes}} forma(es) a la vostra biblioteca. Estàs segur?",
    "imageDoesNotContainScene": "En aquest moment no s’admet la importació d’imatges.\n\nVolies importar una escena? Sembla que aquesta imatge no conté cap dada d’escena. Ho has activat durant l'exportació?",
-    "cannotRestoreFromImage": "L’escena no s’ha pogut restaurar des d’aquest fitxer d’imatge"
+    "cannotRestoreFromImage": "L’escena no s’ha pogut restaurar des d’aquest fitxer d’imatge",
+    "resetLibrary": ""
  },
  "toolBar": {
    "selection": "Selecció",
@@ -243,6 +244,8 @@
  "toast": {
    "copyStyles": "",
    "copyToClipboard": "",
-    "copyToClipboardAsPng": ""
+    "copyToClipboardAsPng": "",
+    "fileSaved": "",
+    "fileSavedToFilename": ""
  }
 }
@@ -68,7 +68,7 @@
    "layers": "Ebenen",
    "actions": "Aktionen",
    "language": "Sprache",
-    "createRoom": "Live-Kollaborationssitzung teilen",
+    "liveCollaboration": "Live-Zusammenarbeit",
    "duplicateSelection": "Duplizieren",
    "untitled": "Unbenannt",
    "name": "Name",
@@ -76,8 +76,8 @@
    "madeWithExcalidraw": "Made with Excalidraw",
    "group": "Auswahl gruppieren",
    "ungroup": "Gruppierung aufheben",
-    "collaborators": "Mitarbeitende",
-    "gridMode": "Rastermodus",
+    "collaborators": "Kollaboratoren",
+    "showGrid": "Raster anzeigen",
    "addToLibrary": "Zur Bibliothek hinzufügen",
    "removeFromLibrary": "Aus Bibliothek entfernen",
    "libraryLoadingMessage": "Lade Bibliothek…",
@@ -101,7 +101,7 @@
    "exportToSvg": "Als SVG exportieren",
    "copyToClipboard": "In Zwischenablage kopieren",
    "copyPngToClipboard": "PNG in die Zwischenablage kopieren",
-    "scale": "Skalieren",
+    "scale": "Skalierung",
    "save": "Speichern",
    "saveAs": "Speichern unter",
    "load": "Laden",
@@ -117,7 +117,7 @@
    "edit": "Bearbeiten",
    "undo": "Rückgängig machen",
    "redo": "Wiederholen",
-    "roomDialog": "Live-Kollaborationssitzung starten",
+    "resetLibrary": "Bibliothek zurücksetzen",
    "createNewRoom": "Neuen Raum erstellen",
    "fullScreen": "Vollbildanzeige",
    "darkMode": "Dunkles Design",
@@ -140,7 +140,8 @@
    "errorLoadingLibrary": "Beim Laden der Drittanbieter-Bibliothek ist ein Fehler aufgetreten.",
    "confirmAddLibrary": "Dieses fügt {{numShapes}} Form(en) zu deiner Bibliothek hinzu. Bist du sicher?",
    "imageDoesNotContainScene": "Das Importieren von Bildern wird derzeit nicht unterstützt.\n\nMöchtest du eine Szene importieren? Dieses Bild scheint keine Zeichnungsdaten zu enthalten. Hast du dies beim Exportieren aktiviert?",
-    "cannotRestoreFromImage": "Die Zeichnung konnte aus dieser Bilddatei nicht wiederhergestellt werden"
+    "cannotRestoreFromImage": "Die Zeichnung konnte aus dieser Bilddatei nicht wiederhergestellt werden",
+    "resetLibrary": "Dieses löscht deine Bibliothek. Bist du sicher?"
  },
  "toolBar": {
    "selection": "Auswahl",
@@ -243,6 +244,8 @@
  "toast": {
    "copyStyles": "Formatierung kopiert.",
    "copyToClipboard": "In die Zwischenablage kopiert.",
-    "copyToClipboardAsPng": "In die Zwischenablage als PNG kopiert."
+    "copyToClipboardAsPng": "In die Zwischenablage als PNG kopiert.",
+    "fileSaved": "Datei gespeichert.",
+    "fileSavedToFilename": "Als {filename} gespeichert"
  }
 }
@@ -68,7 +68,7 @@
    "layers": "Στρώματα",
    "actions": "Ενέργειες",
    "language": "Γλώσσα",
-    "createRoom": "Έναρξη ζωντανής συνεδρίας",
+    "liveCollaboration": "Ζωντανή συνεργασία",
    "duplicateSelection": "Δημιουργία αντιγράφου",
    "untitled": "Χωρίς τίτλο",
    "name": "Όνομα",
@@ -77,7 +77,7 @@
    "group": "Δημιουργία ομάδας από επιλογή",
    "ungroup": "Κατάργηση ομάδας από επιλογή",
    "collaborators": "Συνεργάτες",
-    "gridMode": "Εμφάνιση σε πλέγμα",
+    "showGrid": "Προβολή πλέγματος",
    "addToLibrary": "Προσθήκη στη βιβλιοθήκη",
    "removeFromLibrary": "Αφαίρεση από τη βιβλιοθήκη",
    "libraryLoadingMessage": "Φόρτωση βιβλιοθήκης…",
@@ -117,13 +117,13 @@
    "edit": "Επεξεργασία",
    "undo": "Αναίρεση",
    "redo": "Επαναφορά",
-    "roomDialog": "Έναρξη ζωντανής συνεργασίας",
+    "resetLibrary": "Καθαρισμός βιβλιοθήκης",
    "createNewRoom": "Δημιουργία νέου χώρου",
    "fullScreen": "Πλήρης οθόνη",
    "darkMode": "Σκοτεινή λειτουργία",
    "lightMode": "Φωτεινή λειτουργία",
    "zenMode": "Λειτουργία Zεν",
-    "exitZenMode": "Έξοδος απο την λειτουργία Zen"
+    "exitZenMode": "Έξοδος από την λειτουργία Zen"
  },
  "alerts": {
    "clearReset": "Αυτό θα σβήσει ολόκληρο τον καμβά. Είσαι σίγουρος;",
@@ -136,11 +136,12 @@
    "decryptFailed": "Δεν ήταν δυνατή η αποκρυπτογράφηση δεδομένων.",
    "uploadedSecurly": "Η μεταφόρτωση έχει εξασφαλιστεί με κρυπτογράφηση από άκρο σε άκρο, πράγμα που σημαίνει ότι ο διακομιστής Excalidraw και τρίτα μέρη δεν μπορούν να διαβάσουν το περιεχόμενο.",
    "loadSceneOverridePrompt": "Η φόρτωση εξωτερικού σχεδίου θα αντικαταστήσει το υπάρχον περιεχόμενο. Επιθυμείτε να συνεχίσετε;",
-    "collabStopOverridePrompt": "",
+    "collabStopOverridePrompt": "Η διακοπή της συνεδρίας θα αντικαταστήσει το προηγούμενο, τοπικά αποθηκευμένο σχέδιο. Είστε σίγουροι?\n\n(Αν θέλετε να διατηρήσετε το τοπικό σας σχέδιο, απλά κλείστε την καρτέλα του προγράμματος περιήγησης.)",
    "errorLoadingLibrary": "Υπήρξε ένα σφάλμα κατά τη φόρτωση της βιβλιοθήκης τρίτου μέρους.",
-    "confirmAddLibrary": "Αυτό θα προσθέσει {{numShapes}} σχήμα(τα) στη βιβιλιοθήκη σας. Είστε σίγουροι;",
+    "confirmAddLibrary": "Αυτό θα προσθέσει {{numShapes}} σχήμα(τα) στη βιβλιοθήκη σας. Είστε σίγουροι;",
    "imageDoesNotContainScene": "Η εισαγωγή εικόνων δεν υποστηρίζεται αυτή τη στιγμή.\n\nΜήπως θέλετε να εισαγάγετε μια σκηνή; Αυτή η εικόνα δεν φαίνεται να περιέχει δεδομένα σκηνής. Έχετε ενεργοποιήσει αυτό κατά την εξαγωγή;",
-    "cannotRestoreFromImage": "Η σκηνή δεν ήταν δυνατό να αποκατασταθεί από αυτό το αρχείο εικόνας"
+    "cannotRestoreFromImage": "Η σκηνή δεν ήταν δυνατό να αποκατασταθεί από αυτό το αρχείο εικόνας",
+    "resetLibrary": "Αυτό θα καθαρίσει τη βιβλιοθήκη σας. Είστε σίγουροι;"
  },
  "toolBar": {
    "selection": "Επιλογή",
@@ -161,7 +162,7 @@
  },
  "hints": {
    "linearElement": "Κάνε κλικ για να ξεκινήσεις πολλαπλά σημεία, σύρε για μια γραμμή",
-    "freeDraw": "Κάντε κλικ και σύρατε, απελευθερώσατε όταν έχετε τελειώσει",
+    "freeDraw": "Κάντε κλικ και σύρτε, απελευθερώσατε όταν έχετε τελειώσει",
    "text": "Tip: μπορείτε επίσης να προσθέστε κείμενο με διπλό-κλικ οπουδήποτε με το εργαλείο επιλογών",
    "linearElementMulti": "Κάνε κλικ στο τελευταίο σημείο ή πάτησε Escape ή Enter για να τελειώσεις",
    "lockAngle": "Μπορείτε να περιορίσετε τη γωνία κρατώντας πατημένο το SHIFT",
@@ -184,7 +185,7 @@
    "clearCanvasCaveat": " Αυτό θα προκαλέσει απώλεια της δουλειάς σου ",
    "trackedToSentry_pre": "Το σφάλμα με αναγνωριστικό ",
    "trackedToSentry_post": " παρακολουθήθηκε στο σύστημά μας.",
-    "openIssueMessage_pre": "Ήμασταν πολύ προσεκτικοί για να μην συμπεριλάβουμε τις πληροφορίες της σκηνής σου στο σφάλμα. Αν η σκηνή σου δεν είναι ιδιωτική, παρακαλώ σκέψουν να ακολουθήσεις το δικό μας ",
+    "openIssueMessage_pre": "Ήμασταν πολύ προσεκτικοί για να μην συμπεριλάβουμε τις πληροφορίες της σκηνής σου στο σφάλμα. Αν η σκηνή σου δεν είναι ιδιωτική, παρακαλώ σκέψου να ακολουθήσεις το δικό μας ",
    "openIssueMessage_button": "ανιχνευτής σφαλμάτων.",
    "openIssueMessage_post": " Παρακαλώ να συμπεριλάβετε τις παρακάτω πληροφορίες, αντιγράφοντας και επικολλώντας το ζήτημα στο GitHub.",
    "sceneContent": "Περιεχόμενο σκηνής:"
@@ -223,7 +224,7 @@
    "zoomToSelection": "Ζουμ στην επιλογή"
  },
  "encrypted": {
-    "tooltip": "Τα σχέδιά σου είναι κρυπτογραφημένα από άκρο σε άκρο, έτσι δεν θα έιναι ποτέ ορατά μέσα από τους διακομιστές του Excalidraw."
+    "tooltip": "Τα σχέδιά σου είναι κρυπτογραφημένα από άκρο σε άκρο, έτσι δεν θα είναι ποτέ ορατά μέσα από τους διακομιστές του Excalidraw."
  },
  "stats": {
    "angle": "Γωνία",
@@ -243,6 +244,8 @@
  "toast": {
    "copyStyles": "Αντιγράφηκαν στυλ.",
    "copyToClipboard": "Αντιγράφηκε στο πρόχειρο.",
-    "copyToClipboardAsPng": "Αντιγράφτηκε στο πρόχειρο ως PNG."
+    "copyToClipboardAsPng": "Αντιγράφτηκε στο πρόχειρο ως PNG.",
+    "fileSaved": "Το αρχείο αποθηκεύτηκε.",
+    "fileSavedToFilename": "Αποθηκεύτηκε στο {filename}"
  }
 }
@@ -68,7 +68,7 @@
    "layers": "Layers",
    "actions": "Actions",
    "language": "Language",
-    "createRoom": "Share a live-collaboration session",
+    "liveCollaboration": "Live collaboration",
    "duplicateSelection": "Duplicate",
    "untitled": "Untitled",
    "name": "Name",
@@ -92,7 +92,8 @@
    "centerHorizontally": "Center horizontally",
    "distributeHorizontally": "Distribute horizontally",
    "distributeVertically": "Distribute vertically",
-    "viewMode": "View mode"
+    "viewMode": "View mode",
+    "toggleExportColorScheme": "Toggle export color scheme"
  },
  "buttons": {
    "clearReset": "Reset the canvas",
@@ -117,7 +118,7 @@
    "edit": "Edit",
    "undo": "Undo",
    "redo": "Redo",
-    "roomDialog": "Start live collaboration",
+    "resetLibrary": "Reset library",
    "createNewRoom": "Create new room",
    "fullScreen": "Full screen",
    "darkMode": "Dark mode",
@@ -140,7 +141,8 @@
    "errorLoadingLibrary": "There was an error loading the third party library.",
    "confirmAddLibrary": "This will add {{numShapes}} shape(s) to your library. Are you sure?",
    "imageDoesNotContainScene": "Importing images isn't supported at the moment.\n\nDid you want to import a scene? This image does not seem to contain any scene data. Have you enabled this during export?",
-    "cannotRestoreFromImage": "Scene couldn't be restored from this image file"
+    "cannotRestoreFromImage": "Scene couldn't be restored from this image file",
+    "resetLibrary": "This will clear your library. Are you sure?"
  },
  "toolBar": {
    "selection": "Selection",
@@ -227,16 +229,11 @@
  },
  "stats": {
    "angle": "Angle",
-    "collaboration": "Collaboration",
-    "collaborators": "Collaborators",
    "element": "Element",
    "elements": "Elements",
-    "error": "Error",
    "height": "Height",
-    "ping": "Ping",
    "scene": "Scene",
    "selected": "Selected",
-    "speed": "Speed",
    "storage": "Storage",
    "title": "Stats for nerds",
    "total": "Total",
@@ -248,6 +245,8 @@
  "toast": {
    "copyStyles": "Copied styles.",
    "copyToClipboard": "Copied to clipboard.",
-    "copyToClipboardAsPng": "Copied to clipboard as PNG."
+    "copyToClipboardAsPng": "Copied to clipboard as PNG.",
+    "fileSaved": "File saved.",
+    "fileSavedToFilename": "Saved to {filename}"
  }
 }
@@ -68,7 +68,7 @@
    "layers": "Capas",
    "actions": "Acciones",
    "language": "Idioma",
-    "createRoom": "Compartir una sesión de colaboración en vivo",
+    "liveCollaboration": "Colaboración en directo",
    "duplicateSelection": "Duplicar",
    "untitled": "Sin título",
    "name": "Nombre",
@@ -77,7 +77,7 @@
    "group": "Agrupar selección",
    "ungroup": "Desagrupar selección",
    "collaborators": "Colaboradores",
-    "gridMode": "Modo cuadrícula",
+    "showGrid": "Mostrar cuadrícula",
    "addToLibrary": "Añadir a la biblioteca",
    "removeFromLibrary": "Eliminar de la biblioteca",
    "libraryLoadingMessage": "Cargando librería…",
@@ -117,7 +117,7 @@
    "edit": "Editar",
    "undo": "Deshacer",
    "redo": "Rehacer",
-    "roomDialog": "Iniciar colaboración en vivo",
+    "resetLibrary": "Resetear librería",
    "createNewRoom": "Crear nueva sala",
    "fullScreen": "Pantalla completa",
    "darkMode": "Modo oscuro",
@@ -140,7 +140,8 @@
    "errorLoadingLibrary": "Se ha producido un error al cargar la biblioteca de terceros.",
    "confirmAddLibrary": "Esto añadirá {{numShapes}} forma(s) a tu biblioteca. ¿Estás seguro?",
    "imageDoesNotContainScene": "La importación de imágenes no está homologada en este momento.\n\n¿Deseas importar una escena? Esta imagen no parece contener ningún dato de escena. ¿Lo has activado durante la exportación?",
-    "cannotRestoreFromImage": "No se pudo restaurar la escena desde este archivo de imagen"
+    "cannotRestoreFromImage": "No se pudo restaurar la escena desde este archivo de imagen",
+    "resetLibrary": "Esto eliminará tu librería. ¿Estás seguro?"
  },
  "toolBar": {
    "selection": "Selección",
@@ -243,6 +244,8 @@
  "toast": {
    "copyStyles": "Estilos copiados.",
    "copyToClipboard": "Copiado en el portapapeles.",
-    "copyToClipboardAsPng": "Copiado al portapapeles como PNG."
+    "copyToClipboardAsPng": "Copiado al portapapeles como PNG.",
+    "fileSaved": "Archivo guardado.",
+    "fileSavedToFilename": "Guardado en {filename}"
  }
 }
@@ -68,7 +68,7 @@
    "layers": "لایه ها",
    "actions": "عملیات",
    "language": "زبان",
-    "createRoom": "اشتراک گذاری جلسه همکاری زنده",
+    "liveCollaboration": "",
    "duplicateSelection": "تکرار",
    "untitled": "بدون عنوان",
    "name": "نام",
@@ -77,7 +77,7 @@
    "group": "گروهبندی انتخابها",
    "ungroup": "حذف گروهبندی انتخابها",
    "collaborators": "همکاران",
-    "gridMode": "حالت شبکه ای",
+    "showGrid": "",
    "addToLibrary": "افزودن به کتابخانه",
    "removeFromLibrary": "حذف از کتابخانه",
    "libraryLoadingMessage": "بارگذاری کتابخانه…",
@@ -117,7 +117,7 @@
    "edit": "ویرایش",
    "undo": "بازگرد",
    "redo": "از سر",
-    "roomDialog": "همکاری آنلاین را شروع کنید",
+    "resetLibrary": "",
    "createNewRoom": "ایجاد یک اتاق جدید",
    "fullScreen": "تمام‌صفحه",
    "darkMode": "حالت تیره",
@@ -140,7 +140,8 @@
    "errorLoadingLibrary": "خطایی در بارگذاری کتابخانه ثالث وجود داشت.",
    "confirmAddLibrary": "{{numShapes}} از اشکال به کتابخانه شما اضافه خواهد شد. مطمئن هستید؟",
    "imageDoesNotContainScene": "وارد کردن تصویر در این لحظه امکان پذیر نمی باشد.\nآیا مایل به وارد کردن یک صحنه هستید؟ این تصویر به نظر می رسد که فاقد هرگونه اطلاعاتی مربوط به صحنه باشد. آیا این گزینه را در زمان وارد کردن تصویر فعال کرده اید؟",
-    "cannotRestoreFromImage": "صحنه را نمی توان از این فایل تصویری بازیابی کرد"
+    "cannotRestoreFromImage": "صحنه را نمی توان از این فایل تصویری بازیابی کرد",
+    "resetLibrary": ""
  },
  "toolBar": {
    "selection": "گزینش",
@@ -243,6 +244,8 @@
  "toast": {
    "copyStyles": "کپی سبک.",
    "copyToClipboard": "",
-    "copyToClipboardAsPng": "کپی در حافطه موقت به صورت PNG."
+    "copyToClipboardAsPng": "کپی در حافطه موقت به صورت PNG.",
+    "fileSaved": "",
+    "fileSavedToFilename": ""
  }
 }
@@ -68,7 +68,7 @@
    "layers": "Tasot",
    "actions": "Toiminnot",
    "language": "Kieli",
-    "createRoom": "Jaa yhteistyöistunto",
+    "liveCollaboration": "Live-yhteistyö",
    "duplicateSelection": "Monista",
    "untitled": "Nimetön",
    "name": "Nimi",
@@ -77,7 +77,7 @@
    "group": "Ryhmitä valinta",
    "ungroup": "Pura valittu ryhmä",
    "collaborators": "Yhteistyökumppanit",
-    "gridMode": "Ruudukkotila",
+    "showGrid": "Näytä ruudukko",
    "addToLibrary": "Lisää kirjastoon",
    "removeFromLibrary": "Poista kirjastosta",
    "libraryLoadingMessage": "Ladataan kirjastoa…",
@@ -117,7 +117,7 @@
    "edit": "Muokkaa",
    "undo": "Kumoa",
    "redo": "Tee uudelleen",
-    "roomDialog": "Aloita live-yhteistyö",
+    "resetLibrary": "Tyhjennä kirjasto",
    "createNewRoom": "Luo huone",
    "fullScreen": "Koko näyttö",
    "darkMode": "Tumma tila",
@@ -140,7 +140,8 @@
    "errorLoadingLibrary": "Kolmannen osapuolen kirjastoa ladattaessa tapahtui virhe.",
    "confirmAddLibrary": "Tämä lisää {{numShapes}} muotoa kirjastoosi. Oletko varma?",
    "imageDoesNotContainScene": "Kuvien lisääminen ei ole tällä hetkellä mahdollista.\n\nHaluatko tuoda piirroksen? Tämä kuva ei näytä sisältävän tarvittavia tietoja. Oletko ottanut piirrostietojen tallennuksen käyttöön viennin aikana?",
-    "cannotRestoreFromImage": "Teosta ei voitu palauttaa tästä kuvatiedostosta"
+    "cannotRestoreFromImage": "Teosta ei voitu palauttaa tästä kuvatiedostosta",
+    "resetLibrary": "Tämä tyhjentää kirjastosi. Oletko varma?"
  },
  "toolBar": {
    "selection": "Valinta",
@@ -243,6 +244,8 @@
  "toast": {
    "copyStyles": "Tyylit kopioitu.",
    "copyToClipboard": "Kopioitu leikepöydälle.",
-    "copyToClipboardAsPng": "Kopioitu leikepöydälle PNG-tiedostona."
+    "copyToClipboardAsPng": "Kopioitu leikepöydälle PNG-tiedostona.",
+    "fileSaved": "Tiedosto tallennettu.",
+    "fileSavedToFilename": "Tallennettu kohteeseen {filename}"
  }
 }
@@ -68,7 +68,7 @@
    "layers": "Calques",
    "actions": "Actions",
    "language": "Langue",
-    "createRoom": "Partager une session de collaboration en direct",
+    "liveCollaboration": "Collaboration en direct",
    "duplicateSelection": "Dupliquer",
    "untitled": "Sans-titre",
    "name": "Nom",
@@ -77,7 +77,7 @@
    "group": "Grouper la sélection",
    "ungroup": "Dégrouper la sélection",
    "collaborators": "Collaborateurs",
-    "gridMode": "Mode grille",
+    "showGrid": "Afficher la grille",
    "addToLibrary": "Ajouter à la bibliothèque",
    "removeFromLibrary": "Supprimer de la bibliothèque",
    "libraryLoadingMessage": "Chargement de la bibliothèque…",
@@ -117,7 +117,7 @@
    "edit": "Modifier",
    "undo": "Annuler",
    "redo": "Rétablir",
-    "roomDialog": "Démarrer la collaboration en direct",
+    "resetLibrary": "Réinitialiser la bibliothèque",
    "createNewRoom": "Créer une nouvelle salle",
    "fullScreen": "Plein écran",
    "darkMode": "Mode sombre",
@@ -140,7 +140,8 @@
    "errorLoadingLibrary": "Une erreur s'est produite lors du chargement de la bibliothèque tierce.",
    "confirmAddLibrary": "Cela va ajouter {{numShapes}} forme(s) à votre bibliothèque. Êtes-vous sûr·e ?",
    "imageDoesNotContainScene": "L'importation d'images n'est pas prise en charge pour le moment.\n\nVouliez-vous importer une scène ? Cette image ne semble pas contenir de données de scène. Avez-vous activé cette option lors de l'exportation ?",
-    "cannotRestoreFromImage": "Impossible de restaurer la scène depuis ce fichier image"
+    "cannotRestoreFromImage": "Impossible de restaurer la scène depuis ce fichier image",
+    "resetLibrary": "Cela va effacer votre bibliothèque. Êtes-vous sûr·e ?"
  },
  "toolBar": {
    "selection": "Sélection",
@@ -243,6 +244,8 @@
  "toast": {
    "copyStyles": "Styles copiés.",
    "copyToClipboard": "Copié vers le presse-papiers.",
-    "copyToClipboardAsPng": "Copié vers le presse-papier en PNG."
+    "copyToClipboardAsPng": "Copié vers le presse-papier en PNG.",
+    "fileSaved": "Fichier enregistré.",
+    "fileSavedToFilename": "Enregistré sous {filename}"
  }
 }
@@ -68,7 +68,7 @@
    "layers": "שכבות",
    "actions": "פעולות",
    "language": "שפה",
-    "createRoom": "התחל שיתוף פעולה חי",
+    "liveCollaboration": "",
    "duplicateSelection": "שכפל",
    "untitled": "ללא כותרת",
    "name": "שם",
@@ -77,7 +77,7 @@
    "group": "אחד לקבוצה",
    "ungroup": "פרק קבוצה",
    "collaborators": "שותפים",
-    "gridMode": "מצב רשת",
+    "showGrid": "",
    "addToLibrary": "הוסף לספריה",
    "removeFromLibrary": "הסר מספריה",
    "libraryLoadingMessage": "טוען ספריה…",
@@ -117,7 +117,7 @@
    "edit": "ערוך",
    "undo": "בטל",
    "redo": "בצע מחדש",
-    "roomDialog": "התחל שיתוף חי",
+    "resetLibrary": "",
    "createNewRoom": "צור חדר",
    "fullScreen": "מסך מלא",
    "darkMode": "מצב כהה",
@@ -140,7 +140,8 @@
    "errorLoadingLibrary": "קרתה שגיאה בטעינת הספריה החיצונית.",
    "confirmAddLibrary": "הפעולה תוסיף {{numShapes}} צורה(ות) לספריה שלך. האם אתה בטוח?",
    "imageDoesNotContainScene": "אין תמיכה בייבוא תמונות כעת.\n\nהאם אתה רוצה לייבא תצוגה? התמונה הזאת אינה מכילה מידע על תצוגה. האם הפעלת את האפשרות הזאת בזמן הוצאת המידע?",
-    "cannotRestoreFromImage": "לא הצלחנו לשחזר את התצוגה מקובץ התמונה"
+    "cannotRestoreFromImage": "לא הצלחנו לשחזר את התצוגה מקובץ התמונה",
+    "resetLibrary": ""
  },
  "toolBar": {
    "selection": "בחירה",
@@ -243,6 +244,8 @@
  "toast": {
    "copyStyles": "",
    "copyToClipboard": "",
-    "copyToClipboardAsPng": ""
+    "copyToClipboardAsPng": "",
+    "fileSaved": "",
+    "fileSavedToFilename": ""
  }
 }
@@ -68,7 +68,7 @@
    "layers": "परतें",
    "actions": "कार्रवाई",
    "language": "भाषा",
-    "createRoom": "अधिवेशन",
+    "liveCollaboration": "",
    "duplicateSelection": "डुप्लिकेट",
    "untitled": "अशीर्षित",
    "name": "नाम",
@@ -77,7 +77,7 @@
    "group": "समूह चयन",
    "ungroup": "समूह चयन असमूहीकृत करें",
    "collaborators": "सहयोगी",
-    "gridMode": "ग्रिड मॉड",
+    "showGrid": "",
    "addToLibrary": "लाइब्रेरी से जोड़ें",
    "removeFromLibrary": "लाइब्रेरी से निकालें",
    "libraryLoadingMessage": "लाइब्रेरी खुल रही है",
@@ -117,7 +117,7 @@
    "edit": "संशोधन करें",
    "undo": "पूर्ववत् करें",
    "redo": "फिर से करें",
-    "roomDialog": "लाइव सहयोग शुरू करें",
+    "resetLibrary": "",
    "createNewRoom": "एक नया कमरा बनाएं",
    "fullScreen": "पूरी स्क्रीन",
    "darkMode": "डार्क मोड",
@@ -140,7 +140,8 @@
    "errorLoadingLibrary": "लाइब्रेरी लोड करने में त्रुटि",
    "confirmAddLibrary": "लाइब्रेरी जोड़ें पुष्‍टि करें आकार संख्या",
    "imageDoesNotContainScene": "दृश्य में छवि नहीं है",
-    "cannotRestoreFromImage": "छवि फ़ाइल बहाल दृश्य नहीं है"
+    "cannotRestoreFromImage": "छवि फ़ाइल बहाल दृश्य नहीं है",
+    "resetLibrary": ""
  },
  "toolBar": {
    "selection": "चयन",
@@ -243,6 +244,8 @@
  "toast": {
    "copyStyles": "काॅपी कीए स्टाइल",
    "copyToClipboard": "क्लिपबोर्ड में कॉपी कीए",
-    "copyToClipboardAsPng": "क्लिपबोर्ड में PNG के रूप में कॉपी किए"
+    "copyToClipboardAsPng": "क्लिपबोर्ड में PNG के रूप में कॉपी किए",
+    "fileSaved": "",
+    "fileSavedToFilename": ""
  }
 }
@@ -68,7 +68,7 @@
    "layers": "Rétegek",
    "actions": "Műveletek",
    "language": "Nyelv",
-    "createRoom": "Élő együttmüködés megosztása",
+    "liveCollaboration": "",
    "duplicateSelection": "Duplikálás",
    "untitled": "Névtelen",
    "name": "Név",
@@ -77,7 +77,7 @@
    "group": "Csoportosítás",
    "ungroup": "Csoportbontás",
    "collaborators": "Közreműködők",
-    "gridMode": "Hálómód",
+    "showGrid": "",
    "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…",
@@ -117,7 +117,7 @@
    "edit": "Szerkesztés",
    "undo": "Vissza",
    "redo": "Újra",
-    "roomDialog": "Élő együttműködés indítása",
+    "resetLibrary": "",
    "createNewRoom": "Új szoba létrehozása",
    "fullScreen": "Teljes képernyő",
    "darkMode": "Sötét mód",
@@ -140,7 +140,8 @@
    "errorLoadingLibrary": "Hibába ütközött a harmarmadik féltől származó könyvtár betöltése.",
    "confirmAddLibrary": "Ez a művelet {{numShapes}} formát fog hozzáadni a könyvtáradhoz. Biztos vagy benne?",
    "imageDoesNotContainScene": "Képek importálása egyelőre nem támogatott.\n\nEgy jelenetet szeretnél betölteni? Úgy tűnik ez a kép fájl nem tartalmazza a szükséges adatokat. Exportáláskor ezt egy külön opcióval lehet beállítani.",
-    "cannotRestoreFromImage": "A jelenet visszaállítása nem sikerült ebből a kép fájlból"
+    "cannotRestoreFromImage": "A jelenet visszaállítása nem sikerült ebből a kép fájlból",
+    "resetLibrary": ""
  },
  "toolBar": {
    "selection": "Kijelölés",
@@ -243,6 +244,8 @@
  "toast": {
    "copyStyles": "",
    "copyToClipboard": "",
-    "copyToClipboardAsPng": ""
+    "copyToClipboardAsPng": "",
+    "fileSaved": "",
+    "fileSavedToFilename": ""
  }
 }
@@ -68,7 +68,7 @@
    "layers": "Lapisan",
    "actions": "Aksi",
    "language": "Bahasa",
-    "createRoom": "Bagikan sesi kolaborasi langsung",
+    "liveCollaboration": "",
    "duplicateSelection": "Duplikat",
    "untitled": "Tanpa judul",
    "name": "Nama",
@@ -77,7 +77,7 @@
    "group": "Kelompokan pilihan",
    "ungroup": "Pisahkan pilihan",
    "collaborators": "Kolaborator",
-    "gridMode": "Mode grid",
+    "showGrid": "Tampilkan grid",
    "addToLibrary": "Tambahkan ke pustaka",
    "removeFromLibrary": "Hapus dari pustaka",
    "libraryLoadingMessage": "Memuat pustaka…",
@@ -117,7 +117,7 @@
    "edit": "Edit",
    "undo": "Urungkan",
    "redo": "Ulangi",
-    "roomDialog": "Mulai kolaborasi langsung",
+    "resetLibrary": "",
    "createNewRoom": "Buat ruang baru",
    "fullScreen": "Layar penuh",
    "darkMode": "Mode gelap",
@@ -136,11 +136,12 @@
    "decryptFailed": "Tidak dapat mengdekripsi data.",
    "uploadedSecurly": "Pengunggahan ini telah diamankan menggunakan enkripsi end-to-end, artinya server Excalidraw dan pihak ketiga tidak data membaca nya",
    "loadSceneOverridePrompt": "Memuat gambar external akan mengganti konten Anda yang ada. Apakah Anda ingin melanjutkan?",
-    "collabStopOverridePrompt": "",
+    "collabStopOverridePrompt": "Menghentikan sesi akan menimpa gambar Anda yang tersimpan secara lokal. Anda yakin?\n\n(Jika Anda ingin menyimpan gambar lokal Anda, gantinya cukup tutup tab browser.)",
    "errorLoadingLibrary": "Terdapat kesalahan dalam memuat pustaka pihak ketiga.",
    "confirmAddLibrary": "Ini akan menambahkan {{numShapes}} bentuk ke pustaka Anda. Anda yakin?",
    "imageDoesNotContainScene": "Mengimpor gambar tidak didukung saat ini.\n\nApakah Anda ingin impor pemandangan? Gambar ini tidak berisi data pemandangan. Sudah ka Anda aktifkan ini ketika ekspor?",
-    "cannotRestoreFromImage": "Pemandangan tidak dapat dipulihkan dari file gambar ini"
+    "cannotRestoreFromImage": "Pemandangan tidak dapat dipulihkan dari file gambar ini",
+    "resetLibrary": ""
  },
  "toolBar": {
    "selection": "Pilihan",
@@ -235,14 +236,16 @@
    "storage": "Penyimpanan",
    "title": "Statistik untuk nerd",
    "total": "Total",
-    "version": "",
-    "versionCopy": "",
-    "versionNotAvailable": "",
+    "version": "Versi",
+    "versionCopy": "Klik untuk salin",
+    "versionNotAvailable": "Versi tidak tersedia",
    "width": "Lebar"
  },
  "toast": {
    "copyStyles": "Gaya tersalin.",
-    "copyToClipboard": "",
-    "copyToClipboardAsPng": "Tersalin ke clipboard sebagai PNG."
+    "copyToClipboard": "Tersalin ke papan klip.",
+    "copyToClipboardAsPng": "Tersalin ke clipboard sebagai PNG.",
+    "fileSaved": "File tersimpan.",
+    "fileSavedToFilename": "Disimpan ke {filename}"
  }
 }
@@ -68,7 +68,7 @@
    "layers": "Livelli",
    "actions": "Azioni",
    "language": "Lingua",
-    "createRoom": "Condividi una sessione di collaborazione in diretta",
+    "liveCollaboration": "Collaborazione live",
    "duplicateSelection": "Duplica",
    "untitled": "Senza titolo",
    "name": "Nome",
@@ -77,7 +77,7 @@
    "group": "Crea gruppo da selezione",
    "ungroup": "Dividi gruppo da selezione",
    "collaborators": "Collaboratori",
-    "gridMode": "Modalità griglia",
+    "showGrid": "Visualizza griglia",
    "addToLibrary": "Aggiungi alla libreria",
    "removeFromLibrary": "Rimuovi dalla libreria",
    "libraryLoadingMessage": "Caricamento libreria…",
@@ -117,7 +117,7 @@
    "edit": "Modifica",
    "undo": "Annulla",
    "redo": "Ripeti",
-    "roomDialog": "Inizia collaborazione in diretta",
+    "resetLibrary": "Ripristina libreria",
    "createNewRoom": "Crea nuova stanza",
    "fullScreen": "Schermo intero",
    "darkMode": "Tema scuro",
@@ -140,7 +140,8 @@
    "errorLoadingLibrary": "Si è verificato un errore nel caricamento della libreria di terze parti.",
    "confirmAddLibrary": "Questo aggiungerà {{numShapes}} forma(e) alla tua libreria. Sei sicuro?",
    "imageDoesNotContainScene": "L'importazione di immagini al momento non è supportata.\n\nVuoi importare una scena? Questa immagine non sembra contenere alcun dato di scena. Hai abilitato questa opzione durante l'esportazione?",
-    "cannotRestoreFromImage": "Impossibile ripristinare la scena da questo file immagine"
+    "cannotRestoreFromImage": "Impossibile ripristinare la scena da questo file immagine",
+    "resetLibrary": "Questa azione cancellerà l'intera libreria. Sei sicuro?"
  },
  "toolBar": {
    "selection": "Selezione",
@@ -243,6 +244,8 @@
  "toast": {
    "copyStyles": "Stili copiati.",
    "copyToClipboard": "Copiato negli appunti.",
-    "copyToClipboardAsPng": "Copiato negli appunti come PNG."
+    "copyToClipboardAsPng": "Copiato negli appunti come PNG.",
+    "fileSaved": "File salvato.",
+    "fileSavedToFilename": "Salvato in {filename}"
  }
 }
@@ -1,11 +1,11 @@
 {
  "labels": {
    "paste": "貼り付け",
-    "pasteCharts": "",
+    "pasteCharts": "チャートの貼り付け",
    "selectAll": "すべて選択",
    "multiSelect": "複数選択",
    "moveCanvas": "キャンバスを移動",
-    "cut": "",
+    "cut": "切り取り",
    "copy": "コピー",
    "copyAsPng": "PNGとしてクリップボードへコピー",
    "copyAsSvg": "SVGとしてクリップボードへコピー",
@@ -38,7 +38,7 @@
    "fontSize": "フォントの大きさ",
    "fontFamily": "フォントの種類",
    "onlySelected": "選択中のみ",
-    "withBackground": "",
+    "withBackground": "背景を含める",
    "exportEmbedScene": "エクスポートされたファイルにシーンを埋め込みます",
    "exportEmbedScene_details": "シーンデータはエクスポートされたPNG/SVGファイルに保存され、シーンを復元することができます。\nエクスポートされたファイルのサイズは増加します。",
    "addWatermark": "\"Made with Excalidraw\"と表示",
@@ -68,20 +68,20 @@
    "layers": "レイヤー",
    "actions": "操作",
    "language": "言語",
-    "createRoom": "共同編集セッションの共有",
+    "liveCollaboration": "ライブ連携",
    "duplicateSelection": "複製",
-    "untitled": "",
+    "untitled": "無題",
    "name": "名前",
    "yourName": "あなたの名前",
    "madeWithExcalidraw": "Excalidrawで作成",
    "group": "図形のグループ化",
    "ungroup": "グループ化を解除",
    "collaborators": "共同編集者",
-    "gridMode": "",
+    "showGrid": "グリッドを表示",
    "addToLibrary": "ライブラリに追加",
    "removeFromLibrary": "ライブラリから削除",
    "libraryLoadingMessage": "ライブラリを読み込み中…",
-    "libraries": "",
+    "libraries": "ライブラリを参照する",
    "loadingScene": "シーンを読み込み中…",
    "align": "整列",
    "alignTop": "上揃え",
@@ -90,9 +90,9 @@
    "alignRight": "右揃え",
    "centerVertically": "縦方向に中央揃え",
    "centerHorizontally": "横方向に中央揃え",
-    "distributeHorizontally": "",
-    "distributeVertically": "",
-    "viewMode": ""
+    "distributeHorizontally": "水平方向に分散配置",
+    "distributeVertically": "垂直方向に分散配置",
+    "viewMode": "閲覧モード"
  },
  "buttons": {
    "clearReset": "キャンバスのリセット",
@@ -117,12 +117,12 @@
    "edit": "編集",
    "undo": "元に戻す",
    "redo": "やり直し",
-    "roomDialog": "共同編集を開始する",
+    "resetLibrary": "ライブラリをリセット",
    "createNewRoom": "新しい部屋を作成する",
    "fullScreen": "全画面表示",
    "darkMode": "ダークモード",
    "lightMode": "ライトモード",
-    "zenMode": "",
+    "zenMode": "Zenモード",
    "exitZenMode": "集中モードをやめる"
  },
  "alerts": {
@@ -136,11 +136,12 @@
    "decryptFailed": "データを復号できませんでした。",
    "uploadedSecurly": "データのアップロードはエンドツーエンド暗号化によって保護されています。Excalidrawサーバーと第三者はデータの内容を見ることができません。",
    "loadSceneOverridePrompt": "外部図面を読み込むと、既存のコンテンツが置き換わります。続行しますか？",
-    "collabStopOverridePrompt": "",
+    "collabStopOverridePrompt": "セッションを停止すると、ローカルに保存されている図が上書きされます。 本当によろしいですか？\n\n(ローカルの図を保持したい場合は、セッションを停止せずにブラウザタブを閉じてください。)",
    "errorLoadingLibrary": "サードパーティライブラリの読み込み中にエラーが発生しました。",
    "confirmAddLibrary": "{{numShapes}} 個の図形をライブラリに追加します。よろしいですか？",
-    "imageDoesNotContainScene": "",
-    "cannotRestoreFromImage": "このイメージファイルからシーンを復元できませんでした"
+    "imageDoesNotContainScene": "現在、画像のインポートはサポートされていません。\n\nシーンをインポートしようとしましたか？この画像にはシーンデータが含まれていないようです。エクスポート中に有効にしていましたか？",
+    "cannotRestoreFromImage": "このイメージファイルからシーンを復元できませんでした",
+    "resetLibrary": "ライブラリを消去します。本当によろしいですか？"
  },
  "toolBar": {
    "selection": "選択",
@@ -164,7 +165,7 @@
    "freeDraw": "クリックしてドラッグします。離すと終了します",
    "text": "ヒント: 選択ツールを使用して任意の場所をダブルクリックしてテキストを追加することもできます",
    "linearElementMulti": "最後のポイントをクリックするか、エスケープまたはEnterを押して終了します",
-    "lockAngle": "",
+    "lockAngle": "SHIFTを押したままにすると、角度を制限することができます",
    "resize": "サイズを変更中にSHIFTを押しすと比率を制御できます。Altを押すと中央からサイズを変更できます。",
    "rotate": "回転中にSHIFT キーを押すと角度を制限することができます",
    "lineEditor_info": "ポイントを編集するには、ダブルクリックまたはEnterキーを押します",
@@ -202,47 +203,49 @@
    "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サーバーが内容を見ることはできません。"
  },
  "stats": {
-    "angle": "",
-    "element": "",
-    "elements": "",
+    "angle": "角度",
+    "element": "要素",
+    "elements": "要素",
    "height": "高さ",
-    "scene": "",
-    "selected": "",
-    "storage": "",
-    "title": "",
+    "scene": "シーン",
+    "selected": "選択済み",
+    "storage": "ストレージ",
+    "title": "マニア向け統計情報",
    "total": "合計",
-    "version": "",
-    "versionCopy": "",
-    "versionNotAvailable": "",
+    "version": "バージョン",
+    "versionCopy": "クリックしてコピー",
+    "versionNotAvailable": "利用できないバージョン",
    "width": "幅"
  },
  "toast": {
-    "copyStyles": "",
-    "copyToClipboard": "",
-    "copyToClipboardAsPng": ""
+    "copyStyles": "スタイルをコピー",
+    "copyToClipboard": "クリップボードにコピー",
+    "copyToClipboardAsPng": "PNG形式でクリップボードにコピー",
+    "fileSaved": "ファイルを保存しました",
+    "fileSavedToFilename": "{filename} に保存しました"
  }
 }
@@ -24,7 +24,7 @@
    "strokeStyle_solid": "Aččuran",
    "strokeStyle_dashed": "S tjerriḍin",
    "strokeStyle_dotted": "S tenqiḍin",
-    "sloppiness": "",
+    "sloppiness": "Astehzi",
    "opacity": "Tiḍullest",
    "textAlign": "Areyyec n uḍris",
    "edges": "Leryuf",
@@ -68,7 +68,7 @@
    "layers": "Tissiyin",
    "actions": "Tigawin",
    "language": "Tutlayt",
-    "createRoom": "Bḍu tiɣimit n umɛawen s srid",
+    "liveCollaboration": "",
    "duplicateSelection": "Sisleg",
    "untitled": "War azwel",
    "name": "Isem",
@@ -77,7 +77,7 @@
    "group": "Segrew tafrayt",
    "ungroup": "Kkess asegrew i tefrayt",
    "collaborators": "Imɛiwnen",
-    "gridMode": "Askar n uferrug",
+    "showGrid": "Beqqeḍ aferrug",
    "addToLibrary": "Rnu ɣer temkarḍit",
    "removeFromLibrary": "Kkes si temkarḍit",
    "libraryLoadingMessage": "Asali n temkarḍit…",
@@ -117,7 +117,7 @@
    "edit": "Ẓreg",
    "undo": "Sefsex",
    "redo": "Err-d",
-    "roomDialog": "Bdu amɛawen s srid",
+    "resetLibrary": "",
    "createNewRoom": "Snulfu-d taxxamt tamaynutt",
    "fullScreen": "Agdil aččuran",
    "darkMode": "Askar imsulles",
@@ -130,17 +130,18 @@
    "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": "",
+    "importBackendFailed": "Takterḍ seg uɣawas n deffir ur teddi ara.",
    "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ḍ?",
-    "collabStopOverridePrompt": "",
+    "collabStopOverridePrompt": "Aḥbas n tɣimit ad yesefsex unuɣ-inek (m) yettwaḥerzen yakan s wudem adigan. Tetḥeqqeḍ?\n(Ma tebɣiḍ ad teǧǧeḍ unuɣ-inek (m) adigan, mdel iccer n yiminig, deg umḍiq.)",
    "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"
+    "cannotRestoreFromImage": "Asayes ulamek ara d-yettwarr seg ufaylu-agi n tugna",
+    "resetLibrary": ""
  },
  "toolBar": {
    "selection": "Tafrayt",
@@ -184,7 +185,7 @@
    "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_pre": "Nḥuder aṭas akken ur nseddu ara talɣut n usayes-inek (m) di tuccḍa. Ma yella asayes-inek (m) mačči d amaẓlay, ttxil-k (m) xemmem ad ḍefreḍ ",
    "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:"
@@ -212,7 +213,7 @@
    "github": "Tufiḍ-d ugur? Azen-aɣ-d",
    "howto": "Ḍfer imniren-nneɣ",
    "or": "neɣ",
-    "preventBinding": "",
+    "preventBinding": "Seḥbes tuqqna n tneccabin",
    "shapes": "Talɣiwin",
    "shortcuts": "Inegzumen n unasiw",
    "textFinish": "Fak asiẓreg (aḍris)",
@@ -242,7 +243,9 @@
  },
  "toast": {
    "copyStyles": "Iɣunab yettwaneɣlen.",
-    "copyToClipboard": "",
-    "copyToClipboardAsPng": "Yettwanɣel ɣer tecfawit am PNG."
+    "copyToClipboard": "Yettwaɣel ɣer tecfawit.",
+    "copyToClipboardAsPng": "Yettwanɣel ɣer tecfawit am PNG.",
+    "fileSaved": "",
+    "fileSavedToFilename": ""
  }
 }
@@ -68,7 +68,7 @@
    "layers": "레이어",
    "actions": "동작",
    "language": "언어",
-    "createRoom": "실시간 협업 세션 공유",
+    "liveCollaboration": "",
    "duplicateSelection": "복제",
    "untitled": "제목 없음",
    "name": "이름",
@@ -77,7 +77,7 @@
    "group": "그룹 생성",
    "ungroup": "그룹 해제",
    "collaborators": "공동 작업자",
-    "gridMode": "격자 방식",
+    "showGrid": "",
    "addToLibrary": "라이브러리에 추가",
    "removeFromLibrary": "라이브러리에서 제거",
    "libraryLoadingMessage": "라이브러리 불러오는 중…",
@@ -117,7 +117,7 @@
    "edit": "수정",
    "undo": "실행 취소",
    "redo": "다시 실행",
-    "roomDialog": "실시간 협업 시작하기",
+    "resetLibrary": "",
    "createNewRoom": "방 만들기",
    "fullScreen": "전체화면",
    "darkMode": "다크 모드",
@@ -140,7 +140,8 @@
    "errorLoadingLibrary": "외부 라이브러리를 불러오는 중에 문제가 발생했습니다.",
    "confirmAddLibrary": "{{numShapes}}개의 모양이 라이브러리에 추가됩니다. 계속하시겠어요?",
    "imageDoesNotContainScene": "이미지에서 불러오기는 현재 지원되지 않습니다.\n\n화면을 불러오려고 하셨나요? 이미지에 화면 정보가 없는 것 같습니다. 내보낼 때 화면을 포함했나요?",
-    "cannotRestoreFromImage": "이미지 파일에서 화면을 복구할 수 없었습니다"
+    "cannotRestoreFromImage": "이미지 파일에서 화면을 복구할 수 없었습니다",
+    "resetLibrary": ""
  },
  "toolBar": {
    "selection": "선택",
@@ -243,6 +244,8 @@
  "toast": {
    "copyStyles": "스타일 복사.",
    "copyToClipboard": "클립보드로 복사.",
-    "copyToClipboardAsPng": "클립보드로 PNG 이미지 복사."
+    "copyToClipboardAsPng": "클립보드로 PNG 이미지 복사.",
+    "fileSaved": "",
+    "fileSavedToFilename": ""
  }
 }
@@ -68,7 +68,7 @@
    "layers": "အလွှာများ",
    "actions": "လုပ်ဆောင်ချက်များ",
    "language": "ဘာသာစကား",
-    "createRoom": "တိုက်ရိုက်ပူးပေါင်းဆောင်ရွက်ရန်အဖွဲ့ဖွဲ့",
+    "liveCollaboration": "",
    "duplicateSelection": "ပွား",
    "untitled": "အမည်မရှိ",
    "name": "အမည်",
@@ -77,7 +77,7 @@
    "group": "အုပ်စုဖွဲ့",
    "ungroup": "အုပ်စုဖျက်သိမ်း",
    "collaborators": "ပူးပေါင်းပါဝင်သူများ",
-    "gridMode": "",
+    "showGrid": "",
    "addToLibrary": "မှတ်တမ်းတင်",
    "removeFromLibrary": "မှတ်တမ်းမှထုတ်",
    "libraryLoadingMessage": "မှတ်တမ်းအား တင်သွင်းနေသည်…",
@@ -117,7 +117,7 @@
    "edit": "ပြင်ဆင်",
    "undo": "ပြန်ထား",
    "redo": "ထပ်လုပ်",
-    "roomDialog": "တိုက်ရိုက်ပူးပေါင်းမှုစတင်",
+    "resetLibrary": "",
    "createNewRoom": "အခန်းသစ်ဖွဲ့",
    "fullScreen": "",
    "darkMode": "",
@@ -140,7 +140,8 @@
    "errorLoadingLibrary": "ပြင်ပမှမှတ်တမ်းအားတင်သွင်းရာတွင်အမှားအယွင်းရှိနေသည်။",
    "confirmAddLibrary": "{{numShapes}} ခုသောပုံသဏ္ဌာန်အားမှတ်တမ်းတင်ပါမည်။ အတည်ပြုပါ။",
    "imageDoesNotContainScene": "",
-    "cannotRestoreFromImage": "ဤပုံဖြင့်မြင်ကွင်းပြန်လည်မရယူနိုင်ပါ။"
+    "cannotRestoreFromImage": "ဤပုံဖြင့်မြင်ကွင်းပြန်လည်မရယူနိုင်ပါ။",
+    "resetLibrary": ""
  },
  "toolBar": {
    "selection": "ရွေးချယ်",
@@ -243,6 +244,8 @@
  "toast": {
    "copyStyles": "",
    "copyToClipboard": "",
-    "copyToClipboardAsPng": ""
+    "copyToClipboardAsPng": "",
+    "fileSaved": "",
+    "fileSavedToFilename": ""
  }
 }
@@ -68,7 +68,7 @@
    "layers": "Lag",
    "actions": "Handlinger",
    "language": "Språk",
-    "createRoom": "Del en sanntids-samarbeidsøkt",
+    "liveCollaboration": "Sanntids-samarbeid",
    "duplicateSelection": "Dupliser",
    "untitled": "Uten navn",
    "name": "Navn",
@@ -77,7 +77,7 @@
    "group": "Gruppér utvalg",
    "ungroup": "Avgruppér utvalg",
    "collaborators": "Samarbeidspartnere",
-    "gridMode": "Rutevisning",
+    "showGrid": "Vis rutenett",
    "addToLibrary": "Legg til i bibliotek",
    "removeFromLibrary": "Fjern fra bibliotek",
    "libraryLoadingMessage": "Laster bibliotek…",
@@ -117,7 +117,7 @@
    "edit": "Rediger",
    "undo": "Angre",
    "redo": "Gjør om",
-    "roomDialog": "Start sanntids-samarbeid",
+    "resetLibrary": "Nullstill bibliotek",
    "createNewRoom": "Opprett et nytt rom",
    "fullScreen": "Fullskjerm",
    "darkMode": "Mørk modus",
@@ -140,7 +140,8 @@
    "errorLoadingLibrary": "Det oppstod en feil under lasting av tredjepartsbiblioteket.",
    "confirmAddLibrary": "Dette vil legge til {{numShapes}} figur(er) i biblioteket ditt. Er du sikker?",
    "imageDoesNotContainScene": "Importering av bilder støttes ikke for øyeblikket.\n\nVil du importere en scene? Dette bildet ser ikke ut til å inneholde noen scene-data. Har du aktivert dette under eksporten?",
-    "cannotRestoreFromImage": "Scenen kunne ikke gjenopprettes fra denne bildefilen"
+    "cannotRestoreFromImage": "Scenen kunne ikke gjenopprettes fra denne bildefilen",
+    "resetLibrary": "Dette vil tømme biblioteket ditt. Er du sikker?"
  },
  "toolBar": {
    "selection": "Velg",
@@ -243,6 +244,8 @@
  "toast": {
    "copyStyles": "Kopierte stiler.",
    "copyToClipboard": "Kopiert til utklippstavlen.",
-    "copyToClipboardAsPng": "Kopiert til utklippstavlen som PNG."
+    "copyToClipboardAsPng": "Kopiert til utklippstavlen som PNG.",
+    "fileSaved": "Fil lagret.",
+    "fileSavedToFilename": "Lagret til {filename}"
  }
 }
@@ -68,7 +68,7 @@
    "layers": "Lagen",
    "actions": "Acties",
    "language": "Taal",
-    "createRoom": "Deel een live-samenwerkingssessie",
+    "liveCollaboration": "Live Samenwerking",
    "duplicateSelection": "Dupliceer",
    "untitled": "Naamloos",
    "name": "Naam",
@@ -77,7 +77,7 @@
    "group": "Groeperen",
    "ungroup": "Groep opheffen",
    "collaborators": "Deelnemers",
-    "gridMode": "Rasterweergave",
+    "showGrid": "Raster weergeven",
    "addToLibrary": "Voeg toe aan bibliotheek",
    "removeFromLibrary": "Verwijder uit bibliotheek",
    "libraryLoadingMessage": "Bibliotheek laden…",
@@ -117,7 +117,7 @@
    "edit": "Bewerken",
    "undo": "Ongedaan maken",
    "redo": "Herstel ongedaan maken",
-    "roomDialog": "Live-samenwerkingssessie starten",
+    "resetLibrary": "Bibliotheek Resetten",
    "createNewRoom": "Creëer live-samenwerkingssessie",
    "fullScreen": "Volledig scherm",
    "darkMode": "Donkere modus",
@@ -140,7 +140,8 @@
    "errorLoadingLibrary": "Bij het laden van de externe bibliotheek is een fout opgetreden.",
    "confirmAddLibrary": "Hiermee worden {{numShapes}} vorm(n) aan uw bibliotheek toegevoegd. Ben je het zeker?",
    "imageDoesNotContainScene": "Afbeeldingen importeren wordt op dit moment niet ondersteund.\n\nWil je een scène importeren? Deze afbeelding lijkt geen scène gegevens te bevatten. Heb je dit geactiveerd tijdens het exporteren?",
-    "cannotRestoreFromImage": "Scène kan niet worden hersteld vanuit dit afbeeldingsbestand"
+    "cannotRestoreFromImage": "Scène kan niet worden hersteld vanuit dit afbeeldingsbestand",
+    "resetLibrary": "Dit zal je bibliotheek wissen. Weet je het zeker?"
  },
  "toolBar": {
    "selection": "Selectie",
@@ -243,6 +244,8 @@
  "toast": {
    "copyStyles": "Stijlen gekopieerd.",
    "copyToClipboard": "Gekopieerd naar het klembord.",
-    "copyToClipboardAsPng": "Gekopieerd naar klembord als PNG."
+    "copyToClipboardAsPng": "Gekopieerd naar klembord als PNG.",
+    "fileSaved": "Bestand opgeslagen.",
+    "fileSavedToFilename": "Opgeslagen als {filename}"
  }
 }
@@ -68,7 +68,7 @@
    "layers": "Lag",
    "actions": "Handlingar",
    "language": "Språk",
-    "createRoom": "Del ei sanntids-samarbeidsøkt",
+    "liveCollaboration": "",
    "duplicateSelection": "Dupliser",
    "untitled": "Utan namn",
    "name": "Namn",
@@ -77,7 +77,7 @@
    "group": "Grupper utval",
    "ungroup": "Avgrupper utval",
    "collaborators": "Samarbeidarar",
-    "gridMode": "Rutevisning",
+    "showGrid": "",
    "addToLibrary": "Legg til i bibliotek",
    "removeFromLibrary": "Fjern frå bibliotek",
    "libraryLoadingMessage": "Laster bibliotek…",
@@ -117,7 +117,7 @@
    "edit": "Rediger",
    "undo": "Angre",
    "redo": "Gjer om",
-    "roomDialog": "Start sanntids-samarbeid",
+    "resetLibrary": "",
    "createNewRoom": "Lag nytt rom",
    "fullScreen": "Fullskjerm",
    "darkMode": "Mørk modus",
@@ -140,7 +140,8 @@
    "errorLoadingLibrary": "Det oppstod ein feil under lastinga av tredjepartsbibliotek.",
    "confirmAddLibrary": "Dette vil legge til {{numShapes}} form(er) i biblioteket ditt. Er du sikker?",
    "imageDoesNotContainScene": "Importering av bilder støttes ikkje for p. t.\n\nVil du importere ein scene? Dette bildet ser ikkje ut til å inneholde noen scene-data. Har du aktivert dette under eksporten?",
-    "cannotRestoreFromImage": "Scena kunne ikkje gjenopprettast frå denne biletfila"
+    "cannotRestoreFromImage": "Scena kunne ikkje gjenopprettast frå denne biletfila",
+    "resetLibrary": ""
  },
  "toolBar": {
    "selection": "Vel",
@@ -243,6 +244,8 @@
  "toast": {
    "copyStyles": "",
    "copyToClipboard": "",
-    "copyToClipboardAsPng": ""
+    "copyToClipboardAsPng": "",
+    "fileSaved": "",
+    "fileSavedToFilename": ""
  }
 }
@@ -68,7 +68,7 @@
    "layers": "ਪਰਤਾਂ",
    "actions": "ਕਾਰਵਾਈਆਂ",
    "language": "ਭਾਸ਼ਾ",
-    "createRoom": "ਲਾਇਵ ਸਹਿਯੋਗ ਇਜਲਾਸ ਸਾਂਝਾ ਕਰੋ",
+    "liveCollaboration": "",
    "duplicateSelection": "ਡੁਪਲੀਕੇਟ ਬਣਾਓ",
    "untitled": "ਬੇ-ਸਿਰਨਾਵਾਂ",
    "name": "ਨਾਂ",
@@ -77,7 +77,7 @@
    "group": "ਚੋਣ ਦਾ ਗਰੁੱਪ ਬਣਾਓ",
    "ungroup": "ਚੋਣ ਦਾ ਗਰੁੱਪ ਤੋੜੋ",
    "collaborators": "ਸਹਿਯੋਗੀ",
-    "gridMode": "ਜਾਲੀਦਾਰ ਮੋਡ",
+    "showGrid": "ਜਾਲੀ ਦਿਖਾਓ",
    "addToLibrary": "ਲਾਇਬ੍ਰੇਰੀ ਵਿੱਚ ਜੋੜੋ",
    "removeFromLibrary": "ਲਾਇਬ੍ਰੇਰੀ 'ਚੋਂ ਹਟਾਓ",
    "libraryLoadingMessage": "ਲਾਇਬ੍ਰੇਰੀ ਲੋਡ ਕੀਤੀ ਜਾ ਰਹੀ ਹੈ…",
@@ -117,7 +117,7 @@
    "edit": "ਸੋਧੋ",
    "undo": "ਅਣਕੀਤਾ ਕਰੋ",
    "redo": "ਮੁੜ-ਕਰੋ",
-    "roomDialog": "ਲਾਇਵ ਸਹਿਯੋਗ ਸ਼ੁਰੂ ਕਰੋ",
+    "resetLibrary": "",
    "createNewRoom": "ਨਵਾਂ ਕਮਰਾ ਬਣਾਓ",
    "fullScreen": "ਪੂਰੀ ਸਕਰੀਨ",
    "darkMode": "ਡਾਰਕ ਮੋਡ",
@@ -140,7 +140,8 @@
    "errorLoadingLibrary": "ਤੀਜੀ ਧਿਰ ਦੀ ਲਾਇਬ੍ਰੇਰੀ ਨੂੰ ਲੋਡ ਕਰਨ ਵਿੱਚ ਗਲਤੀ ਹੋਈ ਸੀ।",
    "confirmAddLibrary": "ਇਹ ਤੁਹਾਡੀ ਲਾਇਬ੍ਰੇਰੀ ਵਿੱਚ {{numShapes}} ਆਕ੍ਰਿਤੀ(ਆਂ) ਨੂੰ ਜੋੜ ਦੇਵੇਗਾ। ਕੀ ਤੁਸੀਂ ਪੱਕਾ ਇੰਝ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ?",
    "imageDoesNotContainScene": "ਫਿਲਹਾਲ ਤਸਵੀਰਾਂ ਨੂੰ ਆਯਾਤ ਕਰਨ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦਾ।\n\nਕੀ ਤੁਸੀਂ ਦ੍ਰਿਸ਼ ਨੂੰ ਆਯਾਤ ਕਰਨਾ ਚਾਹੁੰਦੇ ਸੀ? ਇਸ ਤਸਵੀਰ ਵਿੱਚ ਦ੍ਰਿਸ਼ ਦਾ ਕੋਈ ਵੀ ਡਾਟਾ ਨਜ਼ਰ ਨਹੀਂ ਆ ਰਿਹਾ। ਕੀ ਨਿਰਯਾਤ ਦੌਰਾਨ ਤੁਸੀਂ ਇਹ ਸਮਰੱਥ ਕੀਤਾ ਸੀ?",
-    "cannotRestoreFromImage": "ਇਸ ਤਸਵੀਰ ਫਾਈਲ ਤੋਂ ਦ੍ਰਿਸ਼ ਬਹਾਲ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਿਆ"
+    "cannotRestoreFromImage": "ਇਸ ਤਸਵੀਰ ਫਾਈਲ ਤੋਂ ਦ੍ਰਿਸ਼ ਬਹਾਲ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਿਆ",
+    "resetLibrary": ""
  },
  "toolBar": {
    "selection": "ਚੋਣਕਾਰ",
@@ -243,6 +244,8 @@
  "toast": {
    "copyStyles": "ਕਾਪੀ ਕੀਤੇ ਸਟਾਇਲ।",
    "copyToClipboard": "ਕਲਿੱਪਬੋਰਡ 'ਤੇ ਕਾਪੀ ਕੀਤਾ।",
-    "copyToClipboardAsPng": "ਕਲਿੱਪਬੋਰਡ 'ਤੇ PNG ਵਜੋਂ ਕਾਪੀ ਕੀਤਾ।"
+    "copyToClipboardAsPng": "ਕਲਿੱਪਬੋਰਡ 'ਤੇ PNG ਵਜੋਂ ਕਾਪੀ ਕੀਤਾ।",
+    "fileSaved": "ਫਾਈਲ ਸਾਂਭੀ ਗਈ।",
+    "fileSavedToFilename": "{filename} ਵਿੱਚ ਸਾਂਭੀ"
  }
 }
@@ -1,36 +1,36 @@
 {
-  "ar-SA": 87,
-  "bg-BG": 91,
-  "ca-ES": 87,
+  "ar-SA": 85,
+  "bg-BG": 98,
+  "ca-ES": 85,
  "de-DE": 100,
-  "el-GR": 99,
+  "el-GR": 100,
  "en": 100,
  "es-ES": 100,
-  "fa-IR": 95,
+  "fa-IR": 93,
  "fi-FI": 100,
  "fr-FR": 100,
-  "he-IL": 87,
-  "hi-IN": 98,
-  "hu-HU": 87,
-  "id-ID": 97,
+  "he-IL": 85,
+  "hi-IN": 96,
+  "hu-HU": 85,
+  "id-ID": 99,
  "it-IT": 100,
-  "ja-JP": 79,
-  "kab-KAB": 96,
-  "ko-KR": 100,
-  "my-MM": 81,
+  "ja-JP": 100,
+  "kab-KAB": 97,
+  "ko-KR": 97,
+  "my-MM": 79,
  "nb-NO": 100,
  "nl-NL": 99,
-  "nn-NO": 90,
-  "pa-IN": 100,
-  "pl-PL": 88,
+  "nn-NO": 87,
+  "pa-IN": 99,
+  "pl-PL": 85,
  "pt-BR": 100,
-  "pt-PT": 97,
+  "pt-PT": 94,
  "ro-RO": 100,
-  "ru-RU": 98,
+  "ru-RU": 100,
  "sk-SK": 100,
  "sv-SE": 100,
-  "tr-TR": 87,
-  "uk-UA": 97,
-  "zh-CN": 98,
+  "tr-TR": 85,
+  "uk-UA": 99,
+  "zh-CN": 95,
  "zh-TW": 100
 }
@@ -68,7 +68,7 @@
    "layers": "Warstwy",
    "actions": "Akcje",
    "language": "Język",
-    "createRoom": "Udostępnij sesję współpracy na żywo",
+    "liveCollaboration": "",
    "duplicateSelection": "Powiel",
    "untitled": "Bez tytułu",
    "name": "Nazwa",
@@ -77,7 +77,7 @@
    "group": "Zgrupuj wybrane",
    "ungroup": "Rozgrupuj wybrane",
    "collaborators": "Współtwórcy",
-    "gridMode": "Tryb siatki",
+    "showGrid": "",
    "addToLibrary": "Dodaj do biblioteki",
    "removeFromLibrary": "Usuń z biblioteki",
    "libraryLoadingMessage": "Ładowanie biblioteki…",
@@ -117,7 +117,7 @@
    "edit": "Edytuj",
    "undo": "Cofnij",
    "redo": "Przywróć",
-    "roomDialog": "Utwórz nową sesję współpracy na żywo",
+    "resetLibrary": "",
    "createNewRoom": "Utwórz nowy pokój",
    "fullScreen": "Pełny ekran",
    "darkMode": "Ciemny motyw",
@@ -140,7 +140,8 @@
    "errorLoadingLibrary": "Wystąpił błąd podczas ładowania zewnętrznej biblioteki.",
    "confirmAddLibrary": "To doda {{numShapes}} kształtów do twojej biblioteki. Jesteś pewien?",
    "imageDoesNotContainScene": "Importowanie zdjęć nie jest obecnie obsługiwane.\n\nCzy chciałeś zaimportować scenę? Ten obraz nie zawiera żadnych danych sceny. Czy włączyłeś to podczas eksportowania?",
-    "cannotRestoreFromImage": "Scena nie mogła zostać przywrócona z pliku obrazu"
+    "cannotRestoreFromImage": "Scena nie mogła zostać przywrócona z pliku obrazu",
+    "resetLibrary": ""
  },
  "toolBar": {
    "selection": "Zaznaczenie",
@@ -243,6 +244,8 @@
  "toast": {
    "copyStyles": "",
    "copyToClipboard": "",
-    "copyToClipboardAsPng": ""
+    "copyToClipboardAsPng": "",
+    "fileSaved": "",
+    "fileSavedToFilename": ""
  }
 }
@@ -68,7 +68,7 @@
    "layers": "Camadas",
    "actions": "Ações",
    "language": "Idioma",
-    "createRoom": "Compartilhar uma sessão de colaboração ao vivo",
+    "liveCollaboration": "Colaboração ao vivo",
    "duplicateSelection": "Duplicar",
    "untitled": "Sem título",
    "name": "Nome",
@@ -77,7 +77,7 @@
    "group": "Agrupar seleção",
    "ungroup": "Desagrupar seleção",
    "collaborators": "Colaboradores",
-    "gridMode": "Modo grade",
+    "showGrid": "Mostrar grade",
    "addToLibrary": "Adicionar à biblioteca",
    "removeFromLibrary": "Remover da biblioteca",
    "libraryLoadingMessage": "Carregando biblioteca…",
@@ -117,7 +117,7 @@
    "edit": "Editar",
    "undo": "Desfazer",
    "redo": "Refazer",
-    "roomDialog": "Iniciar colaboração ao vivo",
+    "resetLibrary": "Redefinir biblioteca",
    "createNewRoom": "Criar nova sala",
    "fullScreen": "Tela cheia",
    "darkMode": "Modo escuro",
@@ -140,7 +140,8 @@
    "errorLoadingLibrary": "Houve um erro ao carregar a biblioteca de terceiros.",
    "confirmAddLibrary": "Isso adicionará {{numShapes}} forma(s) à sua biblioteca. Tem certeza?",
    "imageDoesNotContainScene": "A importação de imagens não é suportada no momento.\n\nVocê deseja importar uma cena? Esta imagem parece não conter dados de cena. Você ativou isto durante a exportação?",
-    "cannotRestoreFromImage": "Não foi possível restaurar a cena deste arquivo de imagem"
+    "cannotRestoreFromImage": "Não foi possível restaurar a cena deste arquivo de imagem",
+    "resetLibrary": "Isto limpará a sua biblioteca. Você tem certeza?"
  },
  "toolBar": {
    "selection": "Seleção",
@@ -243,6 +244,8 @@
  "toast": {
    "copyStyles": "Estilos copiados.",
    "copyToClipboard": "Copiado para área de transferência.",
-    "copyToClipboardAsPng": "Copiado para a área de transferência como PNG."
+    "copyToClipboardAsPng": "Copiado para a área de transferência como PNG.",
+    "fileSaved": "Arquivo salvo.",
+    "fileSavedToFilename": "Salvo em {filename}"
  }
 }
@@ -68,7 +68,7 @@
    "layers": "Camadas",
    "actions": "Ações",
    "language": "Idioma",
-    "createRoom": "Compartilhar uma sessão de colaboração ao vivo",
+    "liveCollaboration": "",
    "duplicateSelection": "Duplicar",
    "untitled": "Sem título",
    "name": "Nome",
@@ -77,7 +77,7 @@
    "group": "Agrupar seleção",
    "ungroup": "Desagrupar seleção",
    "collaborators": "Colaboradores",
-    "gridMode": "Modo grade",
+    "showGrid": "",
    "addToLibrary": "Adicionar à biblioteca",
    "removeFromLibrary": "Remover da biblioteca",
    "libraryLoadingMessage": "Carregando biblioteca…",
@@ -117,7 +117,7 @@
    "edit": "Editar",
    "undo": "Desfazer",
    "redo": "Refazer",
-    "roomDialog": "Iniciar colaboração ao vivo",
+    "resetLibrary": "",
    "createNewRoom": "Criar nova sala",
    "fullScreen": "Tela cheia",
    "darkMode": "Modo escuro",
@@ -140,7 +140,8 @@
    "errorLoadingLibrary": "Houve um erro ao carregar a biblioteca de terceiros.",
    "confirmAddLibrary": "Isso adicionará {{numShapes}} forma(s) à sua biblioteca. Tem certeza?",
    "imageDoesNotContainScene": "A importação de imagens não é suportada no momento.\n\nVocê deseja importar uma cena? Esta imagem parece não conter dados de cena. Você ativou isto durante a exportação?",
-    "cannotRestoreFromImage": "Não foi possível restaurar a cena deste arquivo de imagem"
+    "cannotRestoreFromImage": "Não foi possível restaurar a cena deste arquivo de imagem",
+    "resetLibrary": ""
  },
  "toolBar": {
    "selection": "Seleção",
@@ -243,6 +244,8 @@
  "toast": {
    "copyStyles": "Estilos copiados.",
    "copyToClipboard": "",
-    "copyToClipboardAsPng": "Copiado para o clipboard como PNG."
+    "copyToClipboardAsPng": "Copiado para o clipboard como PNG.",
+    "fileSaved": "",
+    "fileSavedToFilename": ""
  }
 }
@@ -68,7 +68,7 @@
    "layers": "Straturi",
    "actions": "Acțiuni",
    "language": "Limbă",
-    "createRoom": "Invită la o sesiune de colaborare în direct",
+    "liveCollaboration": "Colaborare în direct",
    "duplicateSelection": "Duplicare",
    "untitled": "Nedenumit",
    "name": "Nume",
@@ -77,7 +77,7 @@
    "group": "Grupare selecție",
    "ungroup": "Degrupare selecție",
    "collaborators": "Colaboratori",
-    "gridMode": "Mod grilă",
+    "showGrid": "Afișare grilă",
    "addToLibrary": "Adăugare la bibliotecă",
    "removeFromLibrary": "Eliminare din bibliotecă",
    "libraryLoadingMessage": "Se încarcă biblioteca…",
@@ -117,7 +117,7 @@
    "edit": "Edit",
    "undo": "Anulare",
    "redo": "Refacere",
-    "roomDialog": "Colaborare în direct",
+    "resetLibrary": "Resetare bibliotecă",
    "createNewRoom": "Creare cameră nouă",
    "fullScreen": "Ecran complet",
    "darkMode": "Mod întunecat",
@@ -140,7 +140,8 @@
    "errorLoadingLibrary": "A apărut o eroare la încărcarea bibliotecii terțe.",
    "confirmAddLibrary": "Această acțiune va adăuga {{numShapes}} formă(e) la biblioteca ta. Confirmi?",
    "imageDoesNotContainScene": "Importarea imaginilor nu este acceptată în acest moment.\n\nVoiai să imporți o scenă? Această imagine nu pare să conțină date de scenă. Ai activat această opțiune pe durata exportării?",
-    "cannotRestoreFromImage": "Scena nu a putut fi restaurată din acest fișier de imagine"
+    "cannotRestoreFromImage": "Scena nu a putut fi restaurată din acest fișier de imagine",
+    "resetLibrary": "Această opțiune va elimina conținutul din bibliotecă. Confirmi?"
  },
  "toolBar": {
    "selection": "Selecție",
@@ -243,6 +244,8 @@
  "toast": {
    "copyStyles": "Stiluri copiate.",
    "copyToClipboard": "Copiat în memoria temporară.",
-    "copyToClipboardAsPng": "Copiat în memoria temporară ca PNG."
+    "copyToClipboardAsPng": "Copiat în memoria temporară ca PNG.",
+    "fileSaved": "Fișier salvat.",
+    "fileSavedToFilename": "Salvat în {filename}"
  }
 }
@@ -68,7 +68,7 @@
    "layers": "Слои",
    "actions": "Действия",
    "language": "Язык",
-    "createRoom": "Начать сеанс совместной работы",
+    "liveCollaboration": "Совместное взаимодействие",
    "duplicateSelection": "Дубликат",
    "untitled": "Безымянный",
    "name": "Имя",
@@ -77,7 +77,7 @@
    "group": "Сгруппировать выделение",
    "ungroup": "Разделить выделение",
    "collaborators": "Участники",
-    "gridMode": "Сетка",
+    "showGrid": "Показать сетку",
    "addToLibrary": "Добавить в библиотеку",
    "removeFromLibrary": "Удалить из библиотеки",
    "libraryLoadingMessage": "Загрузка библиотеки…",
@@ -117,7 +117,7 @@
    "edit": "Изменить",
    "undo": "Шаг назад",
    "redo": "Шаг вперед",
-    "roomDialog": "Начать совместную работу",
+    "resetLibrary": "Сброс библиотеки",
    "createNewRoom": "Создать новую комнату",
    "fullScreen": "Полный экран",
    "darkMode": "Темная тема",
@@ -136,11 +136,12 @@
    "decryptFailed": "Не удалось расшифровать данные.",
    "uploadedSecurly": "Загружаемые данные защищена сквозным шифрованием, что означает, что сервер Excalidraw и третьи стороны не могут прочитать содержимое.",
    "loadSceneOverridePrompt": "Загрузка рисунка приведёт к замене имеющегося содержимого. Вы хотите продолжить?",
-    "collabStopOverridePrompt": "",
+    "collabStopOverridePrompt": "Остановка сессии перезапишет ваш предыдущий, локально сохранённый рисунок. Вы уверены? \n\n(Если вы хотите оставить ваш локальный рисунок, просто закройте вкладку браузера)",
    "errorLoadingLibrary": "Произошла ошибка при загрузке сторонней библиотеки.",
    "confirmAddLibrary": "Будет добавлено {{numShapes}} фигур в вашу библиотеку. Продолжить?",
    "imageDoesNotContainScene": "Импорт изображений не поддерживается в данный момент.\n\nХотите импортировать сцену? Данное изображение не содержит данных о сцене. Было ли включено это во время экспорта?",
-    "cannotRestoreFromImage": "Сцена не может быть восстановлена из этого изображения"
+    "cannotRestoreFromImage": "Сцена не может быть восстановлена из этого изображения",
+    "resetLibrary": "Это очистит вашу библиотеку. Вы уверены?"
  },
  "toolBar": {
    "selection": "Выделение области",
@@ -235,14 +236,16 @@
    "storage": "Хранилище",
    "title": "Статистика для ботаников",
    "total": "Всего",
-    "version": "",
+    "version": "Версия",
    "versionCopy": "Копировать",
-    "versionNotAvailable": "",
+    "versionNotAvailable": "Версия не доступна",
    "width": "Ширина"
  },
  "toast": {
    "copyStyles": "Скопированы стили.",
-    "copyToClipboard": "",
-    "copyToClipboardAsPng": "Скопировано в буфер обмена в формате PNG."
+    "copyToClipboard": "Скопировано в буфер обмена.",
+    "copyToClipboardAsPng": "Скопировано в буфер обмена в формате PNG.",
+    "fileSaved": "Файл сохранён.",
+    "fileSavedToFilename": "Сохранено в {filename}"
  }
 }
--- a/Show More
+++ b/Show More