refine routes

Co-authored-by: Lipis <lipiridis@gmail.com>

.editorconfig

@@ -0,0 +1,12 @@
+# http://EditorConfig.org
+
+# top-level EditorConfig file
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true

.eslintrc.json

@@ -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",

.github/workflows/cancel.yml

@@ -1,6 +1,10 @@
 name: Cancel previous runs
 
-on: push
+on:
+  push:
+    branches:
+      - master
+  pull_request:
 
 jobs:
   cancel:

.github/workflows/lint.yml

@@ -1,6 +1,6 @@
 name: Lint
 
-on: push
+on: pull_request
 
 jobs:
   lint:

.github/workflows/test.yml

@@ -1,6 +1,6 @@
 name: Tests
 
-on: push
+on: pull_request
 
 jobs:
   test:

CONTRIBUTING.md

@@ -19,7 +19,7 @@
 ### Option 2 - CodeSandbox
 
 1. Go to https://codesandbox.io/s/github/excalidraw/excalidraw
-1. Connect your Github account
+1. Connect your GitHub account
 1. Go to Git tab on left side
 1. Tap on `Fork Sandbox`
 1. Write your code
@@ -35,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

README.md

@@ -2,7 +2,7 @@
   <a href="https://excalidraw.com">
     <img width="540" src="./public/og-image-sm.png" alt="Excalidraw logo: Sketch handrawn like diagrams." />
   </a>
-  <h3>Virtual whiteboard for sketching hand-drawn like diagrams.<br>Collaborative and end to end encrypted.</h3>
+  <h3>Virtual whiteboard for sketching hand-drawn like diagrams.<br>Collaborative and end-to-end encrypted.</h3>
   <p>
     <a href="https://twitter.com/Excalidraw">
       <img alt="Follow Excalidraw on Twitter" src="https://img.shields.io/twitter/follow/excalidraw.svg?label=follow+excalidraw&style=social&logo=twitter">
@@ -11,6 +11,7 @@
       <img src="https://badges.crowdin.net/excalidraw/localized.svg">
     </a>
   </p>
+  <p>Ask questions or hang out on our <a target="_blank" href="https://discord.gg/UexuTaE">discord.gg/UexuTaE</a>.</p>
 </div>
 
 ## Try it now
@@ -19,6 +20,14 @@ Go to [excalidraw.com](https://excalidraw.com) to start sketching.
 
 Read the latest news and updates on our [blog](https://blog.excalidraw.com). A good start is to see all the updates of [One Year of Excalidraw](https://blog.excalidraw.com/one-year-of-excalidraw/).
 
+## Supporting Excalidraw
+
+If you like the project, you can become a sponsor at [Open Collective](https://opencollective.com/excalidraw).
+
+[<img src="https://opencollective.com/excalidraw/tiers/sponsors/0/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/0/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/1/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/1/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/2/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/2/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/3/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/3/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/4/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/4/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/5/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/5/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/6/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/6/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/7/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/7/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/8/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/8/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/9/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/9/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/10/avatar.svg?avatarHeight=120">](https://opencollective.com/excalidraw/tiers/sponsors/10/website)
+
+<a href="https://opencollective.com/excalidraw#category-CONTRIBUTE" target="_blank"><img src="https://opencollective.com/excalidraw/tiers/backers.svg?avatarHeight=32"/></a>
+
 ## Documentation
 
 ### Shortcuts
@@ -41,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}
@@ -61,12 +70,16 @@ 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
@@ -92,15 +105,15 @@ git clone https://github.com/excalidraw/excalidraw.git
 
 #### 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 .
@@ -111,7 +124,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
 

now.json

@@ -1,32 +0,0 @@
-{
-  "headers": [
-    {
-      "source": "/(.*)",
-      "headers": [
-        {
-          "key": "Access-Control-Allow-Origin",
-          "value": "*"
-        },
-        {
-          "key": "X-Content-Type-Options",
-          "value": "nosniff"
-        },
-        {
-          "key": "Feature-Policy",
-          "value": "*"
-        },
-        {
-          "key": "Referrer-Policy",
-          "value": "origin"
-        }
-      ]
-    }
-  ],
-  "redirects": [
-    {
-      "source": "/([^.]+)",
-      "destination": "/",
-      "statusCode": 301
-    }
-  ]
-}

package.json

@@ -1,10 +1,5 @@
 {
   "browserslist": {
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ],
     "production": [
       ">0.2%",
       "not dead",
@@ -16,20 +11,25 @@
       "not chrome < 70",
       "not and_uc < 13",
       "not samsung < 10"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
     ]
   },
   "dependencies": {
-    "@sentry/browser": "6.0.1",
-    "@sentry/integrations": "6.0.1",
+    "@sentry/browser": "6.1.0",
+    "@sentry/integrations": "6.1.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.13.1",
     "clsx": "1.1.1",
-    "firebase": "8.2.5",
+    "firebase": "8.2.7",
     "i18next-browser-languagedetector": "6.0.1",
     "lodash.throttle": "4.1.1",
     "nanoid": "3.1.20",
@@ -43,20 +43,21 @@
     "pwacompat": "2.0.17",
     "react": "17.0.1",
     "react-dom": "17.0.1",
-    "react-scripts": "4.0.1",
+    "react-scripts": "4.0.2",
     "roughjs": "4.3.1",
     "socket.io-client": "2.3.1",
-    "typescript": "4.1.3"
+    "typescript": "4.1.5"
   },
   "devDependencies": {
     "@types/lodash.throttle": "4.1.6",
     "@types/pako": "1.0.1",
+    "@types/resize-observer-browser": "0.1.5",
     "eslint-config-prettier": "7.2.0",
     "eslint-plugin-prettier": "3.3.1",
-    "firebase-tools": "9.2.2",
+    "firebase-tools": "9.3.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"
@@ -71,34 +72,34 @@
     }
   },
   "jest": {
-    "resetMocks": false,
     "transformIgnorePatterns": [
       "node_modules/(?!(roughjs|points-on-curve|path-data-parser|points-on-path|browser-fs-access)/)"
-    ]
+    ],
+    "resetMocks": false
   },
   "name": "excalidraw",
   "private": true,
   "scripts": {
-    "build": "npm run build:app && npm run build:version",
     "build-node": "node ./scripts/build-node.js",
-    "build:app": "REACT_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA react-scripts build",
     "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",
     "eject": "react-scripts eject",
-    "fix": "npm run fix:other && npm run fix:code",
     "fix:code": "npm run test:code -- --fix",
     "fix:other": "npm run prettier -- --write",
+    "fix": "npm run fix:other && npm run fix:code",
     "locales-coverage": "node scripts/build-locales-coverage.js",
     "locales-coverage:description": "node scripts/locales-coverage-description.js",
     "prettier": "prettier \"**/*.{css,scss,json,md,html,yml}\" --ignore-path=.eslintignore",
     "start": "react-scripts start",
-    "test": "npm run test:app",
     "test:all": "npm run test:typecheck && npm run test:code && npm run test:other && npm run test:app -- --watchAll=false",
     "test:app": "react-scripts test --passWithNoTests",
     "test:code": "eslint --max-warnings=0 --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:typecheck": "tsc",
-    "test:update": "npm run test:app -- --updateSnapshot --watchAll=false"
+    "test:update": "npm run test:app -- --updateSnapshot --watchAll=false",
+    "test": "npm run test:app"
   }
 }

public/index.html

@@ -57,6 +57,7 @@
 
     <!-- Excalidraw version -->
     <meta name="version" content="{version}" />
+
     <link
       rel="preload"
       href="FG_Virgil.woff2"

scripts/locales-coverage-description.js

@@ -18,6 +18,7 @@ const crowdinMap = {
   "id-ID": "en-id",
   "it-IT": "en-it",
   "ja-JP": "en-ja",
+  "kab-KAB": "en-kab",
   "ko-KR": "en-ko",
   "my-MM": "en-my",
   "nb-NO": "en-nb",
@@ -40,7 +41,7 @@ const crowdinMap = {
 const flags = {
   "ar-SA": "🇸🇦",
   "bg-BG": "🇧🇬",
-  "ca-ES": "🇪🇸",
+  "ca-ES": "🏳",
   "de-DE": "🇩🇪",
   "el-GR": "🇬🇷",
   "es-ES": "🇪🇸",
@@ -53,6 +54,7 @@ const flags = {
   "id-ID": "🇮🇩",
   "it-IT": "🇮🇹",
   "ja-JP": "🇯🇵",
+  "kab-KAB": "🏳",
   "ko-KR": "🇰🇷",
   "my-MM": "🇲🇲",
   "nb-NO": "🇳🇴",
@@ -88,6 +90,7 @@ const languages = {
   "id-ID": "Bahasa Indonesia",
   "it-IT": "Italiano",
   "ja-JP": "日本語",
+  "kab-KAB": "Taqbaylit",
   "ko-KR": "한국어",
   "my-MM": "Burmese",
   "nb-NO": "Norsk bokmål",

src/actions/actionExport.tsx

@@ -96,9 +96,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);

src/actions/actionFinalize.tsx

@@ -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"

src/actions/actionNavigate.tsx

@@ -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 (

src/actions/actionToggleGridMode.tsx

@@ -2,10 +2,12 @@ import { CODES, KEYS } from "../keys";
 import { register } from "./register";
 import { GRID_SIZE } from "../constants";
 import { AppState } from "../types";
+import { trackEvent } from "../analytics";
 
 export const actionToggleGridMode = register({
   name: "gridMode",
   perform(elements, appState) {
+    trackEvent("view", "mode", "grid");
     return {
       appState: {
         ...appState,
@@ -15,6 +17,6 @@ export const actionToggleGridMode = register({
     };
   },
   checked: (appState: AppState) => appState.gridSize !== null,
-  contextItemLabel: "labels.gridMode",
+  contextItemLabel: "labels.showGrid",
   keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.code === CODES.QUOTE,
 });

src/actions/actionToggleViewMode.tsx

@@ -0,0 +1,22 @@
+import { CODES, KEYS } from "../keys";
+import { register } from "./register";
+import { trackEvent } from "../analytics";
+
+export const actionToggleViewMode = register({
+  name: "viewMode",
+  perform(elements, appState) {
+    trackEvent("view", "mode", "view");
+    return {
+      appState: {
+        ...appState,
+        viewModeEnabled: !this.checked!(appState),
+        selectedElementIds: {},
+      },
+      commitToHistory: false,
+    };
+  },
+  checked: (appState) => appState.viewModeEnabled,
+  contextItemLabel: "labels.viewMode",
+  keyTest: (event) =>
+    !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.R,
+});

src/actions/actionToggleZenMode.tsx

@@ -1,9 +1,12 @@
 import { CODES, KEYS } from "../keys";
 import { register } from "./register";
+import { trackEvent } from "../analytics";
 
 export const actionToggleZenMode = register({
   name: "zenMode",
   perform(elements, appState) {
+    trackEvent("view", "mode", "zen");
+
     return {
       appState: {
         ...appState,

src/actions/manager.tsx

@@ -7,11 +7,12 @@ import {
   ActionResult,
 } from "./types";
 import { ExcalidrawElement } from "../element/types";
-import { AppState } from "../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.
-type App = { canvas: HTMLCanvasElement | null };
+type App = { canvas: HTMLCanvasElement | null; props: ExcalidrawProps };
 
 export class ActionManager implements ActionsManagerInterface {
   actions = {} as ActionsManagerInterface["actions"];
@@ -66,6 +67,12 @@ export class ActionManager implements ActionsManagerInterface {
     if (data.length === 0) {
       return false;
     }
+    const { viewModeEnabled } = this.getAppState();
+    if (viewModeEnabled) {
+      if (!Object.values(MODES).includes(data[0].name)) {
+        return false;
+      }
+    }
 
     event.preventDefault();
     this.updater(

src/actions/shortcuts.ts

@@ -22,7 +22,8 @@ export type ShortcutName =
   | "gridMode"
   | "zenMode"
   | "stats"
-  | "addToLibrary";
+  | "addToLibrary"
+  | "viewMode";
 
 const shortcutMap: Record<ShortcutName, string[]> = {
   cut: [getShortcutKey("CtrlOrCmd+X")],
@@ -56,6 +57,7 @@ const shortcutMap: Record<ShortcutName, string[]> = {
   zenMode: [getShortcutKey("Alt+Z")],
   stats: [],
   addToLibrary: [],
+  viewMode: [getShortcutKey("Alt+R")],
 };
 
 export const getShortcutFromShortcutName = (name: ShortcutName) => {

src/actions/types.ts

@@ -84,7 +84,8 @@ export type ActionName =
   | "alignVerticallyCentered"
   | "alignHorizontallyCentered"
   | "distributeHorizontally"
-  | "distributeVertically";
+  | "distributeVertically"
+  | "viewMode";
 
 export interface Action {
   name: ActionName;

src/appState.ts

@@ -72,6 +72,7 @@ export const getDefaultAppState = (): Omit<
     width: window.innerWidth,
     zenModeEnabled: false,
     zoom: { value: 1 as NormalizedZoomValue, translation: { x: 0, y: 0 } },
+    viewModeEnabled: false,
   };
 };
 
@@ -151,6 +152,7 @@ const APP_STATE_STORAGE_CONF = (<
   width: { browser: false, export: false },
   zenModeEnabled: { browser: true, export: false },
   zoom: { browser: true, export: false },
+  viewModeEnabled: { browser: false, export: false },
 });
 
 const _clearAppStateForStorage = <ExportType extends "export" | "browser">(

src/clients.ts

@@ -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);
 

src/components/App.tsx

@@ -2,7 +2,8 @@ import { Point, simplify } from "points-on-curve";
 import React from "react";
 import { RoughCanvas } from "roughjs/bin/canvas";
 import rough from "roughjs/bin/rough";
-import "../actions";
+import clsx from "clsx";
+
 import {
   actionAddToLibrary,
   actionBringForward,
@@ -46,9 +47,11 @@ import {
   ELEMENT_TRANSLATE_AMOUNT,
   ENV,
   EVENT,
+  GRID_SIZE,
   LINE_CONFIRM_THRESHOLD,
   MIME_TYPES,
   POINTER_BUTTON,
+  SCROLL_TIMEOUT,
   TAP_TWICE_TIMEOUT,
   TEXT_TO_CENTER_SNAP_THRESHOLD,
   TOUCH_CTX_MENU_TIMEOUT,
@@ -175,10 +178,11 @@ import {
   withBatchedUpdates,
 } from "../utils";
 import { isMobile } from "../is-mobile";
-import ContextMenu from "./ContextMenu";
+import ContextMenu, { ContextMenuOption } from "./ContextMenu";
 import LayerUI from "./LayerUI";
 import { Stats } from "./Stats";
 import { Toast } from "./Toast";
+import { actionToggleViewMode } from "../actions/actionToggleViewMode";
 
 const { history } = createHistory();
 
@@ -295,6 +299,9 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       offsetLeft,
       offsetTop,
       excalidrawRef,
+      viewModeEnabled = false,
+      zenModeEnabled = false,
+      gridModeEnabled = false,
     } = props;
     this.state = {
       ...defaultAppState,
@@ -302,6 +309,9 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       width,
       height,
       ...this.getCanvasOffsets({ offsetLeft, offsetTop }),
+      viewModeEnabled,
+      zenModeEnabled,
+      gridSize: gridModeEnabled ? GRID_SIZE : null,
     };
     if (excalidrawRef) {
       const readyPromise =
@@ -342,6 +352,62 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     this.actionManager.registerAction(createRedoAction(history));
   }
 
+  private renderCanvas() {
+    const canvasScale = window.devicePixelRatio;
+    const {
+      width: canvasDOMWidth,
+      height: canvasDOMHeight,
+      viewModeEnabled,
+    } = this.state;
+    const canvasWidth = canvasDOMWidth * canvasScale;
+    const canvasHeight = canvasDOMHeight * canvasScale;
+    if (viewModeEnabled) {
+      return (
+        <canvas
+          id="canvas"
+          style={{
+            width: canvasDOMWidth,
+            height: canvasDOMHeight,
+            cursor: "grabbing",
+          }}
+          width={canvasWidth}
+          height={canvasHeight}
+          ref={this.handleCanvasRef}
+          onContextMenu={this.handleCanvasContextMenu}
+          onPointerMove={this.handleCanvasPointerMove}
+          onPointerUp={this.removePointer}
+          onPointerCancel={this.removePointer}
+          onTouchMove={this.handleTouchMove}
+          onPointerDown={this.handleCanvasPointerDown}
+        >
+          {t("labels.drawingCanvas")}
+        </canvas>
+      );
+    }
+    return (
+      <canvas
+        id="canvas"
+        style={{
+          width: canvasDOMWidth,
+          height: canvasDOMHeight,
+        }}
+        width={canvasWidth}
+        height={canvasHeight}
+        ref={this.handleCanvasRef}
+        onContextMenu={this.handleCanvasContextMenu}
+        onPointerDown={this.handleCanvasPointerDown}
+        onDoubleClick={this.handleCanvasDoubleClick}
+        onPointerMove={this.handleCanvasPointerMove}
+        onPointerUp={this.removePointer}
+        onPointerCancel={this.removePointer}
+        onTouchMove={this.handleTouchMove}
+        onDrop={this.handleCanvasOnDrop}
+      >
+        {t("labels.drawingCanvas")}
+      </canvas>
+    );
+  }
+
   public render() {
     const {
       zenModeEnabled,
@@ -349,20 +415,19 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       height: canvasDOMHeight,
       offsetTop,
       offsetLeft,
+      viewModeEnabled,
     } = this.state;
 
     const { onCollabButtonClick, onExportToBackend, renderFooter } = this.props;
-    const canvasScale = window.devicePixelRatio;
-
-    const canvasWidth = canvasDOMWidth * canvasScale;
-    const canvasHeight = canvasDOMHeight * canvasScale;
 
     const DEFAULT_PASTE_X = canvasDOMWidth / 2;
     const DEFAULT_PASTE_Y = canvasDOMHeight / 2;
 
     return (
       <div
-        className="excalidraw"
+        className={clsx("excalidraw", {
+          "excalidraw--view-mode": viewModeEnabled,
+        })}
         ref={this.excalidrawContainerRef}
         style={{
           width: canvasDOMWidth,
@@ -392,10 +457,16 @@ class App extends React.Component<ExcalidrawProps, AppState> {
           isCollaborating={this.props.isCollaborating || false}
           onExportToBackend={onExportToBackend}
           renderCustomFooter={renderFooter}
+          viewModeEnabled={viewModeEnabled}
+          showExitZenModeBtn={
+            typeof this.props?.zenModeEnabled === "undefined" && zenModeEnabled
+          }
         />
+        <div className="excalidraw-textEditorContainer" />
         {this.state.showStats && (
           <Stats
             appState={this.state}
+            setAppState={this.setAppState}
             elements={this.scene.getElements()}
             onClose={this.toggleStats}
           />
@@ -406,28 +477,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
             clearToast={this.clearToast}
           />
         )}
-        <main>
-          <canvas
-            id="canvas"
-            style={{
-              width: canvasDOMWidth,
-              height: canvasDOMHeight,
-            }}
-            width={canvasWidth}
-            height={canvasHeight}
-            ref={this.handleCanvasRef}
-            onContextMenu={this.handleCanvasContextMenu}
-            onPointerDown={this.handleCanvasPointerDown}
-            onDoubleClick={this.handleCanvasDoubleClick}
-            onPointerMove={this.handleCanvasPointerMove}
-            onPointerUp={this.removePointer}
-            onPointerCancel={this.removePointer}
-            onTouchMove={this.handleTouchMove}
-            onDrop={this.handleCanvasOnDrop}
-          >
-            {t("labels.drawingCanvas")}
-          </canvas>
-        </main>
+        <main>{this.renderCanvas()}</main>
       </div>
     );
   }
@@ -467,6 +517,23 @@ class App extends React.Component<ExcalidrawProps, AppState> {
         if (actionResult.commitToHistory) {
           history.resumeRecording();
         }
+
+        let viewModeEnabled = actionResult?.appState?.viewModeEnabled || false;
+        let zenModeEnabled = actionResult?.appState?.zenModeEnabled || false;
+        let gridSize = actionResult?.appState?.gridSize || null;
+
+        if (typeof this.props.viewModeEnabled !== "undefined") {
+          viewModeEnabled = this.props.viewModeEnabled;
+        }
+
+        if (typeof this.props.zenModeEnabled !== "undefined") {
+          zenModeEnabled = this.props.zenModeEnabled;
+        }
+
+        if (typeof this.props.gridModeEnabled !== "undefined") {
+          gridSize = this.props.gridModeEnabled ? GRID_SIZE : null;
+        }
+
         this.setState(
           (state) => ({
             ...actionResult.appState,
@@ -476,6 +543,9 @@ class App extends React.Component<ExcalidrawProps, AppState> {
             height: state.height,
             offsetTop: state.offsetTop,
             offsetLeft: state.offsetLeft,
+            viewModeEnabled,
+            zenModeEnabled,
+            gridSize,
           }),
           () => {
             if (actionResult.syncHistory) {
@@ -658,7 +728,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     }
 
     this.scene.addCallback(this.onSceneUpdated);
-
     this.addEventListeners();
 
     // optim to avoid extra render on init
@@ -725,25 +794,16 @@ class App extends React.Component<ExcalidrawProps, AppState> {
   }
 
   private addEventListeners() {
+    this.removeEventListeners();
     document.addEventListener(EVENT.COPY, this.onCopy);
-    document.addEventListener(EVENT.PASTE, this.pasteFromClipboard);
-    document.addEventListener(EVENT.CUT, this.onCut);
-
     document.addEventListener(EVENT.KEYDOWN, this.onKeyDown, false);
     document.addEventListener(EVENT.KEYUP, this.onKeyUp, { passive: true });
     document.addEventListener(
       EVENT.MOUSE_MOVE,
       this.updateCurrentCursorPosition,
     );
-    window.addEventListener(EVENT.RESIZE, this.onResize, false);
-    window.addEventListener(EVENT.UNLOAD, this.onUnload, false);
-    window.addEventListener(EVENT.BLUR, this.onBlur, false);
-    window.addEventListener(EVENT.DRAG_OVER, this.disableEvent, false);
-    window.addEventListener(EVENT.DROP, this.disableEvent, false);
-
     // rerender text elements on font load to fix #637 && #1553
     document.fonts?.addEventListener?.("loadingdone", this.onFontLoaded);
-
     // Safari-only desktop pinch zoom
     document.addEventListener(
       EVENT.GESTURE_START,
@@ -760,6 +820,19 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       this.onGestureEnd as any,
       false,
     );
+    if (this.state.viewModeEnabled) {
+      return;
+    }
+
+    document.addEventListener(EVENT.PASTE, this.pasteFromClipboard);
+    document.addEventListener(EVENT.CUT, this.onCut);
+    document.addEventListener(EVENT.SCROLL, this.onScroll);
+
+    window.addEventListener(EVENT.RESIZE, this.onResize, false);
+    window.addEventListener(EVENT.UNLOAD, this.onUnload, false);
+    window.addEventListener(EVENT.BLUR, this.onBlur, false);
+    window.addEventListener(EVENT.DRAG_OVER, this.disableEvent, false);
+    window.addEventListener(EVENT.DROP, this.disableEvent, false);
   }
 
   componentDidUpdate(prevProps: ExcalidrawProps, prevState: AppState) {
@@ -782,6 +855,26 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       });
     }
 
+    if (prevProps.viewModeEnabled !== this.props.viewModeEnabled) {
+      this.setState(
+        { viewModeEnabled: !!this.props.viewModeEnabled },
+        this.addEventListeners,
+      );
+    }
+
+    if (prevState.viewModeEnabled !== this.state.viewModeEnabled) {
+      this.addEventListeners();
+    }
+
+    if (prevProps.zenModeEnabled !== this.props.zenModeEnabled) {
+      this.setState({ zenModeEnabled: !!this.props.zenModeEnabled });
+    }
+
+    if (prevProps.gridModeEnabled !== this.props.gridModeEnabled) {
+      this.setState({
+        gridSize: this.props.gridModeEnabled ? GRID_SIZE : null,
+      });
+    }
     document
       .querySelector(".excalidraw")
       ?.classList.toggle("Appearance_dark", this.state.appearance === "dark");
@@ -821,6 +914,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     const pointerViewportCoords: SceneState["remotePointerViewportCoords"] = {};
     const remoteSelectedElementIds: SceneState["remoteSelectedElementIds"] = {};
     const pointerUsernames: { [id: string]: string } = {};
+    const pointerUserStates: { [id: string]: string } = {};
     this.state.collaborators.forEach((user, socketId) => {
       if (user.selectedElementIds) {
         for (const id of Object.keys(user.selectedElementIds)) {
@@ -836,6 +930,9 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       if (user.username) {
         pointerUsernames[socketId] = user.username;
       }
+      if (user.userState) {
+        pointerUserStates[socketId] = user.userState;
+      }
       pointerViewportCoords[socketId] = sceneCoordsToViewportCoords(
         {
           sceneX: user.pointer.x,
@@ -870,6 +967,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
         remotePointerButton: cursorButton,
         remoteSelectedElementIds,
         remotePointerUsernames: pointerUsernames,
+        remotePointerUserStates: pointerUserStates,
         shouldCacheIgnoreZoom: this.state.shouldCacheIgnoreZoom,
       },
       {
@@ -902,6 +1000,10 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     }
   }
 
+  private onScroll = debounce(() => {
+    this.setState({ ...this.getCanvasOffsets() });
+  }, SCROLL_TIMEOUT);
+
   // Copy/paste
 
   private onCut = withBatchedUpdates((event: ClipboardEvent) => {
@@ -1134,10 +1236,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     this.actionManager.executeAction(actionToggleZenMode);
   };
 
-  toggleGridMode = () => {
-    this.actionManager.executeAction(actionToggleGridMode);
-  };
-
   toggleStats = () => {
     if (!this.state.showStats) {
       trackEvent("dialog", "stats");
@@ -1232,14 +1330,18 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       });
     }
 
-    if (event[KEYS.CTRL_OR_CMD]) {
-      this.setState({ isBindingEnabled: false });
-    }
-
     if (this.actionManager.handleKeyDown(event)) {
       return;
     }
 
+    if (this.state.viewModeEnabled) {
+      return;
+    }
+
+    if (event[KEYS.CTRL_OR_CMD]) {
+      this.setState({ isBindingEnabled: false });
+    }
+
     if (event.code === CODES.NINE) {
       this.setState({ isLibraryOpen: !this.state.isLibraryOpen });
     }
@@ -1454,6 +1556,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(
           {
@@ -1762,10 +1865,11 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     if (isHoldingSpace || isPanning || isDraggingScrollBar) {
       return;
     }
+
     const isPointerOverScrollBars = isOverScrollBars(
       currentScrollBars,
-      event.clientX,
-      event.clientY,
+      event.clientX - this.state.offsetLeft,
+      event.clientY - this.state.offsetTop,
     );
     const isOverScrollBar = isPointerOverScrollBars.isOverEither;
     if (!this.state.draggingElement && !this.state.multiElement) {
@@ -1859,7 +1963,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
@@ -2046,14 +2150,16 @@ class App extends React.Component<ExcalidrawProps, AppState> {
 
     lastPointerUp = onPointerUp;
 
-    window.addEventListener(EVENT.POINTER_MOVE, onPointerMove);
-    window.addEventListener(EVENT.POINTER_UP, onPointerUp);
-    window.addEventListener(EVENT.KEYDOWN, onKeyDown);
-    window.addEventListener(EVENT.KEYUP, onKeyUp);
-    pointerDownState.eventListeners.onMove = onPointerMove;
-    pointerDownState.eventListeners.onUp = onPointerUp;
-    pointerDownState.eventListeners.onKeyUp = onKeyUp;
-    pointerDownState.eventListeners.onKeyDown = onKeyDown;
+    if (!this.state.viewModeEnabled) {
+      window.addEventListener(EVENT.POINTER_MOVE, onPointerMove);
+      window.addEventListener(EVENT.POINTER_UP, onPointerUp);
+      window.addEventListener(EVENT.KEYDOWN, onKeyDown);
+      window.addEventListener(EVENT.KEYUP, onKeyUp);
+      pointerDownState.eventListeners.onMove = onPointerMove;
+      pointerDownState.eventListeners.onUp = onPointerUp;
+      pointerDownState.eventListeners.onKeyUp = onKeyUp;
+      pointerDownState.eventListeners.onKeyDown = onKeyDown;
+    }
   };
 
   private maybeOpenContextMenuAfterPointerDownOnTouchDevices = (
@@ -2103,7 +2209,8 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       !(
         gesture.pointers.size === 0 &&
         (event.button === POINTER_BUTTON.WHEEL ||
-          (event.button === POINTER_BUTTON.MAIN && isHoldingSpace))
+          (event.button === POINTER_BUTTON.MAIN && isHoldingSpace) ||
+          this.state.viewModeEnabled)
       )
     ) {
       return false;
@@ -2218,8 +2325,8 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       ),
       scrollbars: isOverScrollBars(
         currentScrollBars,
-        event.clientX,
-        event.clientY,
+        event.clientX - this.state.offsetLeft,
+        event.clientY - this.state.offsetTop,
       ),
       // we need to duplicate because we'll be updating this state
       lastCoords: { ...origin },
@@ -2528,7 +2635,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],
@@ -3590,7 +3700,37 @@ class App extends React.Component<ExcalidrawProps, AppState> {
 
     const elements = this.scene.getElements();
     const element = this.getElementAtPosition(x, y);
+    const options: ContextMenuOption[] = [];
+    if (probablySupportsClipboardBlob && elements.length > 0) {
+      options.push(actionCopyAsPng);
+    }
+
+    if (probablySupportsClipboardWriteText && elements.length > 0) {
+      options.push(actionCopyAsSvg);
+    }
     if (!element) {
+      const viewModeOptions = [
+        ...options,
+        typeof this.props.gridModeEnabled === "undefined" &&
+          actionToggleGridMode,
+        typeof this.props.zenModeEnabled === "undefined" && actionToggleZenMode,
+        typeof this.props.viewModeEnabled === "undefined" &&
+          actionToggleViewMode,
+        actionToggleStats,
+      ];
+
+      ContextMenu.push({
+        options: viewModeOptions,
+        top: clientY,
+        left: clientX,
+        actionManager: this.actionManager,
+        appState: this.state,
+      });
+
+      if (this.state.viewModeEnabled) {
+        return;
+      }
+
       ContextMenu.push({
         options: [
           _isMobile &&
@@ -3616,8 +3756,12 @@ class App extends React.Component<ExcalidrawProps, AppState> {
             separator,
           actionSelectAll,
           separator,
-          actionToggleGridMode,
-          actionToggleZenMode,
+          typeof this.props.gridModeEnabled === "undefined" &&
+            actionToggleGridMode,
+          typeof this.props.zenModeEnabled === "undefined" &&
+            actionToggleZenMode,
+          typeof this.props.viewModeEnabled === "undefined" &&
+            actionToggleViewMode,
           actionToggleStats,
         ],
         top: clientY,
@@ -3632,6 +3776,17 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       this.setState({ selectedElementIds: { [element.id]: true } });
     }
 
+    if (this.state.viewModeEnabled) {
+      ContextMenu.push({
+        options: [navigator.clipboard && actionCopy, ...options],
+        top: clientY,
+        left: clientX,
+        actionManager: this.actionManager,
+        appState: this.state,
+      });
+      return;
+    }
+
     ContextMenu.push({
       options: [
         _isMobile && actionCut,
@@ -3648,8 +3803,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
             contextItemLabel: "labels.paste",
           },
         _isMobile && separator,
-        probablySupportsClipboardBlob && actionCopyAsPng,
-        probablySupportsClipboardWriteText && actionCopyAsSvg,
+        ...options,
         separator,
         actionCopyStyles,
         actionPasteStyles,

src/components/ButtonIconCycle.tsx

@@ -14,11 +14,11 @@ export const ButtonIconCycle = <T extends any>({
 }) => {
   const current = options.find((op) => op.value === value);
 
-  const cycle = () => {
+  function cycle() {
     const index = options.indexOf(current!);
     const next = (index + 1) % options.length;
     onChange(options[next].value);
-  };
+  }
 
   return (
     <label key={group} className={clsx({ active: current!.value !== null })}>

src/components/CollabButton.scss

@@ -2,9 +2,10 @@
 
 .excalidraw {
   .CollabButton.is-collaborating {
-    background-color: var(--button-special-active-bg-color);
+    background-color: var(--button-special-active-background-color);
 
-    .ToolIcon__icon svg {
+    .ToolIcon__icon svg,
+    .ToolIcon__label {
       color: var(--icon-green-fill-color);
     }
   }

src/components/CollabButton.tsx

@@ -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 && (

src/components/ColorPicker.scss

@@ -2,9 +2,9 @@
 
 .excalidraw {
   .color-picker {
-    background: var(--popup-bg-color);
-    border: 0 solid transparentize($oc-white, 0.75);
-    box-shadow: transparentize($oc-black, 0.75) 0 1px 4px;
+    background: var(--popup-background-color);
+    border: 0px solid transparentize($oc-white, 0.75);
+    box-shadow: transparentize($oc-black, 0.75) 0px 1px 4px;
     border-radius: 4px;
     position: absolute;
 
@@ -24,11 +24,11 @@
   }
 
   .color-picker-triangle {
-    width: 0;
-    height: 0;
+    width: 0px;
+    height: 0px;
     border-style: solid;
-    border-width: 0 9px 10px;
-    border-color: transparent transparent var(--popup-bg-color);
+    border-width: 0px 9px 10px;
+    border-color: transparent transparent var(--popup-background-color);
     position: absolute;
     top: -10px;
 
@@ -84,12 +84,12 @@
 
   .color-picker-transparent {
     border-radius: 4px;
-    box-shadow: transparentize($oc-black, 0.9) 0 0 0 1px inset;
+    box-shadow: transparentize($oc-black, 0.9) 0px 0px 0px 1px inset;
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
   }
 
   .color-picker-transparent,
@@ -104,11 +104,11 @@
     width: 1.875rem;
 
     :root[dir="ltr"] & {
-      border-radius: 4px 0 0 4px;
+      border-radius: 4px 0px 0px 4px;
     }
 
     :root[dir="rtl"] & {
-      border-radius: 0 4px 4px 0;
+      border-radius: 0px 4px 4px 0px;
     }
 
     color: var(--input-label-color);
@@ -144,7 +144,7 @@
   }
 
   .color-input-container:focus-within .color-picker-hash::after {
-    background: var(--input-bg-color);
+    background: var(--input-background-color);
 
     :root[dir="ltr"] & {
       right: -2px;
@@ -163,19 +163,19 @@
     width: 12ch; /* length of `transparent` + 1 */
     margin: 0;
     font-size: 1rem;
-    background-color: var(--input-bg-color);
+    background-color: var(--input-background-color);
     color: var(--text-color-primary);
-    border: 0;
+    border: 0px;
     outline: none;
     height: 1.75em;
-    box-shadow: var(--input-border-color) 0 0 0 1px inset;
+    box-shadow: var(--input-border-color) 0px 0px 0px 1px inset;
 
     :root[dir="ltr"] & {
-      border-radius: 0 4px 4px 0;
+      border-radius: 0px 4px 4px 0px;
     }
 
     :root[dir="rtl"] & {
-      border-radius: 4px 0 0 4px;
+      border-radius: 4px 0px 0px 4px;
     }
 
     float: left;

src/components/ContextMenu.scss

@@ -4,13 +4,13 @@
   .context-menu {
     position: relative;
     border-radius: 4px;
-    box-shadow: 0 3px 10px transparentize($oc-black, 0.8);
+    box-shadow: 0px 3px 10px transparentize($oc-black, 0.8);
     padding: 0;
     list-style: none;
     user-select: none;
     margin: -0.25rem 0 0 0.125rem;
     padding: 0.5rem 0;
-    background-color: var(--popup-secondary-bg-color);
+    background-color: var(--popup-secondary-background-color);
     border: 1px solid var(--button-gray-3);
     cursor: default;
   }
@@ -61,12 +61,12 @@
   }
 
   .context-menu-option:hover {
-    color: var(--popup-bg-color);
+    color: var(--popup-background-color);
     background-color: var(--select-highlight-color);
 
     &.dangerous {
       .context-menu-option__label {
-        color: var(--popup-bg-color);
+        color: var(--popup-background-color);
       }
       background-color: $oc-red-6;
     }

src/components/ContextMenu.tsx

@@ -13,7 +13,7 @@ import { Action } from "../actions/types";
 import { ActionManager } from "../actions/manager";
 import { AppState } from "../types";
 
-type ContextMenuOption = "separator" | Action;
+export type ContextMenuOption = "separator" | Action;
 
 type ContextMenuProps = {
   options: ContextMenuOption[];

src/components/Dialog.scss

@@ -45,7 +45,7 @@
       position: sticky;
       top: 0;
       padding: calc(var(--space-factor) * 2);
-      background: var(--island-bg-color);
+      background: var(--bg-color-island);
       font-size: 1.25em;
 
       box-sizing: border-box;

src/components/HelpDialog.tsx

@@ -224,9 +224,13 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                   shortcuts={[getShortcutKey("Alt+Z")]}
                 />
                 <Shortcut
-                  label={t("labels.gridMode")}
+                  label={t("labels.showGrid")}
                   shortcuts={[getShortcutKey("CtrlOrCmd+'")]}
                 />
+                <Shortcut
+                  label={t("labels.viewMode")}
+                  shortcuts={[getShortcutKey("Alt+R")]}
+                />
               </ShortcutIsland>
             </Column>
             <Column>

src/components/HintViewer.scss

@@ -26,7 +26,7 @@ $wide-viewport-width: 1000px;
 
     > span {
       padding: 0.2rem 0.4rem;
-      background-color: var(--overlay-bg-color);
+      background-color: var(--overlay-background-color);
       border-radius: 4px;
     }
   }

src/components/IconPicker.scss

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

src/components/InitializeApp.tsx

@@ -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,
     });

src/components/Island.scss

@@ -1,7 +1,7 @@
 .excalidraw {
   .Island {
     --padding: 0;
-    background-color: var(--island-bg-color);
+    background-color: var(--bg-color-island);
     backdrop-filter: saturate(100%) blur(10px);
     box-shadow: var(--shadow-island);
     border-radius: 4px;

src/components/LayerUI.scss

@@ -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;
       }
     }
@@ -38,6 +38,8 @@
   }
 
   .layer-ui__wrapper {
+    z-index: var(--zIndex-layerUI);
+
     .encrypted-icon {
       position: relative;
       margin-inline-start: 15px;
@@ -71,7 +73,7 @@
     &__footer {
       position: absolute;
       z-index: 100;
-      bottom: 0;
+      bottom: 0px;
 
       :root[dir="ltr"] & {
         right: 0;
@@ -92,7 +94,7 @@
       }
 
       :root[dir="ltr"] &.transition-right {
-        transform: translate(999px, 0);
+        transform: translate(999px, 0px);
       }
 
       :root[dir="rtl"] &.transition-left {

src/components/LayerUI.tsx

@@ -11,7 +11,7 @@ import { CLASSES } from "../constants";
 import { exportCanvas } from "../data";
 import { importLibraryFromJSON, saveLibraryAsJSON } from "../data/json";
 import { Library } from "../data/library";
-import { showSelectedShapeActions } from "../element";
+import { isTextElement, showSelectedShapeActions } from "../element";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { Language, t } from "../i18n";
 import useIsMobile from "../is-mobile";
@@ -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";
@@ -52,6 +52,7 @@ interface LayerUIProps {
   onLockToggle: () => void;
   onInsertElements: (elements: readonly NonDeletedExcalidrawElement[]) => void;
   zenModeEnabled: boolean;
+  showExitZenModeBtn: boolean;
   toggleZenMode: () => void;
   langCode: Language["code"];
   isCollaborating: boolean;
@@ -61,6 +62,7 @@ interface LayerUIProps {
     canvas: HTMLCanvasElement | null,
   ) => void;
   renderCustomFooter?: (isMobile: boolean) => JSX.Element;
+  viewModeEnabled: boolean;
 }
 
 const useOnClickOutside = (
@@ -98,6 +100,7 @@ const LibraryMenuItems = ({
   onInsertShape,
   pendingElements,
   setAppState,
+  setLibraryItems,
 }: {
   library: LibraryItems;
   pendingElements: LibraryItem;
@@ -105,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);
@@ -148,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")}
@@ -279,6 +296,7 @@ const LibraryMenu = ({
           onInsertShape={onInsertShape}
           pendingElements={pendingElements}
           setAppState={setAppState}
+          setLibraryItems={setLibraryItems}
         />
       )}
     </Island>
@@ -295,10 +313,12 @@ const LayerUI = ({
   onLockToggle,
   onInsertElements,
   zenModeEnabled,
+  showExitZenModeBtn,
   toggleZenMode,
   isCollaborating,
   onExportToBackend,
   renderCustomFooter,
+  viewModeEnabled,
 }: LayerUIProps) => {
   const isMobile = useIsMobile();
 
@@ -358,6 +378,28 @@ const LayerUI = ({
     );
   };
 
+  const renderViewModeCanvasActions = () => {
+    return (
+      <Section
+        heading="canvasActions"
+        className={clsx("zen-mode-transition", {
+          "transition-left": zenModeEnabled,
+        })}
+      >
+        {/* the zIndex ensures this menu has higher stacking order,
+         see https://github.com/excalidraw/excalidraw/pull/1445 */}
+        <Island padding={2} style={{ zIndex: 1 }}>
+          <Stack.Col gap={4}>
+            <Stack.Row gap={1} justifyContent="space-between">
+              {actionManager.renderAction("saveScene")}
+              {actionManager.renderAction("saveAsScene")}
+              {renderExportDialog()}
+            </Stack.Row>
+          </Stack.Col>
+        </Island>
+      </Section>
+    );
+  };
   const renderCanvasActions = () => (
     <Section
       heading="canvasActions"
@@ -400,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}
@@ -448,54 +498,59 @@ const LayerUI = ({
             gap={4}
             className={clsx({ "disable-pointerEvents": zenModeEnabled })}
           >
-            {renderCanvasActions()}
+            {viewModeEnabled
+              ? renderViewModeCanvasActions()
+              : renderCanvasActions()}
             {shouldRenderSelectedShapeActions && renderSelectedShapeActions()}
           </Stack.Col>
-          <Section heading="shapes">
-            {(heading) => (
-              <Stack.Col gap={4} align="start">
-                <Stack.Row gap={1}>
-                  <Island
-                    padding={1}
-                    className={clsx({ "zen-mode": zenModeEnabled })}
-                  >
-                    <HintViewer appState={appState} elements={elements} />
-                    {heading}
-                    <Stack.Row gap={1}>
-                      <ShapesSwitcher
-                        elementType={appState.elementType}
-                        setAppState={setAppState}
-                        isLibraryOpen={appState.isLibraryOpen}
-                      />
-                    </Stack.Row>
-                  </Island>
-                  <LockIcon
-                    zenModeEnabled={zenModeEnabled}
-                    checked={appState.elementLocked}
-                    onChange={onLockToggle}
-                    title={t("toolBar.lock")}
-                  />
-                </Stack.Row>
-                {libraryMenu}
-              </Stack.Col>
-            )}
-          </Section>
+          {!viewModeEnabled && (
+            <Section heading="shapes">
+              {(heading) => (
+                <Stack.Col gap={4} align="start">
+                  <Stack.Row gap={1}>
+                    <Island
+                      padding={1}
+                      className={clsx({ "zen-mode": zenModeEnabled })}
+                    >
+                      <HintViewer appState={appState} elements={elements} />
+                      {heading}
+                      <Stack.Row gap={1}>
+                        <ShapesSwitcher
+                          elementType={appState.elementType}
+                          setAppState={setAppState}
+                          isLibraryOpen={appState.isLibraryOpen}
+                        />
+                      </Stack.Row>
+                    </Island>
+                    <LockIcon
+                      zenModeEnabled={zenModeEnabled}
+                      checked={appState.elementLocked}
+                      onChange={onLockToggle}
+                      title={t("toolBar.lock")}
+                    />
+                  </Stack.Row>
+                  {libraryMenu}
+                </Stack.Col>
+              )}
+            </Section>
+          )}
           <UserList
             className={clsx("zen-mode-transition", {
               "transition-right": zenModeEnabled,
             })}
           >
-            {Array.from(appState.collaborators)
-              // Collaborator is either not initialized or is actually the current user.
-              .filter(([_, client]) => Object.keys(client).length !== 0)
-              .map(([clientId, client]) => (
-                <Tooltip
-                  label={client.username || "Unknown user"}
-                  key={clientId}
-                >
-                  {actionManager.renderAction("goToCollaborator", clientId)}
-                </Tooltip>
-              ))}
+            {appState.collaborators.size > 0 &&
+              Array.from(appState.collaborators)
+                // Collaborator is either not initialized or is actually the current user.
+                .filter(([_, client]) => Object.keys(client).length !== 0)
+                .map(([clientId, client]) => (
+                  <Tooltip
+                    label={client.username || "Unknown user"}
+                    key={clientId}
+                  >
+                    {actionManager.renderAction("goToCollaborator", clientId)}
+                  </Tooltip>
+                ))}
           </UserList>
         </div>
       </FixedSideContainer>
@@ -524,6 +579,20 @@ const LayerUI = ({
     );
   };
 
+  const renderGitHubCorner = () => {
+    return (
+      <aside
+        className={clsx(
+          "layer-ui__wrapper__github-corner zen-mode-transition",
+          {
+            "transition-right": zenModeEnabled,
+          },
+        )}
+      >
+        <GitHubCorner appearance={appState.appearance} />
+      </aside>
+    );
+  };
   const renderFooter = () => (
     <footer role="contentinfo" className="layer-ui__wrapper__footer">
       <div
@@ -536,24 +605,12 @@ const LayerUI = ({
       </div>
       <button
         className={clsx("disable-zen-mode", {
-          "disable-zen-mode--visible": zenModeEnabled,
+          "disable-zen-mode--visible": showExitZenModeBtn,
         })}
         onClick={toggleZenMode}
       >
         {t("buttons.exitZenMode")}
       </button>
-      {appState.scrolledOutside && (
-        <button
-          className="scroll-back-to-content"
-          onClick={() => {
-            setAppState({
-              ...calculateScrollCenter(elements, appState, canvas),
-            });
-          }}
-        >
-          {t("buttons.scrollBackToContent")}
-        </button>
-      )}
     </footer>
   );
 
@@ -599,26 +656,35 @@ const LayerUI = ({
         canvas={canvas}
         isCollaborating={isCollaborating}
         renderCustomFooter={renderCustomFooter}
+        viewModeEnabled={viewModeEnabled}
       />
     </>
   ) : (
-    <div className="layer-ui__wrapper">
+    <div
+      className={clsx("layer-ui__wrapper", {
+        "disable-pointerEvents":
+          appState.draggingElement ||
+          appState.resizingElement ||
+          (appState.editingElement && !isTextElement(appState.editingElement)),
+      })}
+    >
       {dialogs}
       {renderFixedSideContainer()}
       {renderBottomAppMenu()}
-      {
-        <aside
-          className={clsx(
-            "layer-ui__wrapper__github-corner zen-mode-transition",
-            {
-              "transition-right": zenModeEnabled,
-            },
-          )}
-        >
-          <GitHubCorner appearance={appState.appearance} />
-        </aside>
-      }
+      {renderGitHubCorner()}
       {renderFooter()}
+      {appState.scrolledOutside && (
+        <button
+          className="scroll-back-to-content"
+          onClick={() => {
+            setAppState({
+              ...calculateScrollCenter(elements, appState, canvas),
+            });
+          }}
+        >
+          {t("buttons.scrollBackToContent")}
+        </button>
+      )}
     </div>
   );
 };

src/components/MobileMenu.tsx

@@ -29,6 +29,7 @@ type MobileMenuProps = {
   canvas: HTMLCanvasElement | null;
   isCollaborating: boolean;
   renderCustomFooter?: (isMobile: boolean) => JSX.Element;
+  viewModeEnabled: boolean;
 };
 
 export const MobileMenu = ({
@@ -43,121 +44,166 @@ export const MobileMenu = ({
   canvas,
   isCollaborating,
   renderCustomFooter,
-}: MobileMenuProps) => (
-  <>
-    <FixedSideContainer side="top">
-      <Section heading="shapes">
-        {(heading) => (
-          <Stack.Col gap={4} align="center">
-            <Stack.Row gap={1}>
-              <Island padding={1}>
-                {heading}
-                <Stack.Row gap={1}>
-                  <ShapesSwitcher
-                    elementType={appState.elementType}
-                    setAppState={setAppState}
-                    isLibraryOpen={appState.isLibraryOpen}
-                  />
-                </Stack.Row>
-              </Island>
-              <LockIcon
-                checked={appState.elementLocked}
-                onChange={onLockToggle}
-                title={t("toolBar.lock")}
-              />
-            </Stack.Row>
-            {libraryMenu}
-          </Stack.Col>
-        )}
-      </Section>
-      <HintViewer appState={appState} elements={elements} />
-    </FixedSideContainer>
-    <div
-      className="App-bottom-bar"
-      style={{
-        marginBottom: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
-        marginLeft: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
-        marginRight: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
-      }}
-    >
-      <Island padding={0}>
-        {appState.openMenu === "canvas" ? (
-          <Section className="App-mobile-menu" heading="canvasActions">
-            <div className="panelColumn">
-              <Stack.Col gap={4}>
-                {actionManager.renderAction("loadScene")}
-                {actionManager.renderAction("saveScene")}
-                {actionManager.renderAction("saveAsScene")}
-                {exportButton}
-                {actionManager.renderAction("clearCanvas")}
-                {onCollabButtonClick && (
-                  <CollabButton
-                    isCollaborating={isCollaborating}
-                    collaboratorCount={appState.collaborators.size}
-                    onClick={onCollabButtonClick}
-                  />
-                )}
-                <BackgroundPickerAndDarkModeToggle
-                  actionManager={actionManager}
-                  appState={appState}
-                  setAppState={setAppState}
+  viewModeEnabled,
+}: MobileMenuProps) => {
+  const renderToolbar = () => {
+    return (
+      <FixedSideContainer side="top" className="App-top-bar">
+        <Section heading="shapes">
+          {(heading) => (
+            <Stack.Col gap={4} align="center">
+              <Stack.Row gap={1}>
+                <Island padding={1}>
+                  {heading}
+                  <Stack.Row gap={1}>
+                    <ShapesSwitcher
+                      elementType={appState.elementType}
+                      setAppState={setAppState}
+                      isLibraryOpen={appState.isLibraryOpen}
+                    />
+                  </Stack.Row>
+                </Island>
+                <LockIcon
+                  checked={appState.elementLocked}
+                  onChange={onLockToggle}
+                  title={t("toolBar.lock")}
                 />
-                {renderCustomFooter?.(true)}
-                <fieldset>
-                  <legend>{t("labels.collaborators")}</legend>
-                  <UserList mobile>
-                    {Array.from(appState.collaborators)
-                      // Collaborator is either not initialized or is actually the current user.
-                      .filter(([_, client]) => Object.keys(client).length !== 0)
-                      .map(([clientId, client]) => (
-                        <React.Fragment key={clientId}>
-                          {actionManager.renderAction(
-                            "goToCollaborator",
-                            clientId,
-                          )}
-                        </React.Fragment>
-                      ))}
-                  </UserList>
-                </fieldset>
-              </Stack.Col>
-            </div>
-          </Section>
-        ) : appState.openMenu === "shape" &&
-          showSelectedShapeActions(appState, elements) ? (
-          <Section className="App-mobile-menu" heading="selectedShapeActions">
-            <SelectedShapeActions
-              appState={appState}
-              elements={elements}
-              renderAction={actionManager.renderAction}
-              elementType={appState.elementType}
-            />
-          </Section>
-        ) : null}
-        <footer className="App-toolbar">
-          <div className="App-toolbar-content">
-            {actionManager.renderAction("toggleCanvasMenu")}
-            {actionManager.renderAction("toggleEditMenu")}
-            {actionManager.renderAction("undo")}
-            {actionManager.renderAction("redo")}
-            {actionManager.renderAction(
-              appState.multiElement ? "finalize" : "duplicateSelection",
-            )}
-            {actionManager.renderAction("deleteSelectedElements")}
-          </div>
-          {appState.scrolledOutside && !appState.openMenu && (
-            <button
-              className="scroll-back-to-content"
-              onClick={() => {
-                setAppState({
-                  ...calculateScrollCenter(elements, appState, canvas),
-                });
-              }}
-            >
-              {t("buttons.scrollBackToContent")}
-            </button>
+              </Stack.Row>
+              {libraryMenu}
+            </Stack.Col>
           )}
-        </footer>
-      </Island>
-    </div>
-  </>
-);
+        </Section>
+        <HintViewer appState={appState} elements={elements} />
+      </FixedSideContainer>
+    );
+  };
+
+  const renderAppToolbar = () => {
+    if (viewModeEnabled) {
+      return (
+        <div className="App-toolbar-content">
+          {actionManager.renderAction("toggleCanvasMenu")}
+        </div>
+      );
+    }
+    return (
+      <div className="App-toolbar-content">
+        {actionManager.renderAction("toggleCanvasMenu")}
+        {actionManager.renderAction("toggleEditMenu")}
+        {actionManager.renderAction("undo")}
+        {actionManager.renderAction("redo")}
+        {actionManager.renderAction(
+          appState.multiElement ? "finalize" : "duplicateSelection",
+        )}
+        {actionManager.renderAction("deleteSelectedElements")}
+      </div>
+    );
+  };
+
+  const renderCanvasActions = () => {
+    if (viewModeEnabled) {
+      return (
+        <>
+          {actionManager.renderAction("saveScene")}
+          {actionManager.renderAction("saveAsScene")}
+          {exportButton}
+        </>
+      );
+    }
+    return (
+      <>
+        {actionManager.renderAction("loadScene")}
+        {actionManager.renderAction("saveScene")}
+        {actionManager.renderAction("saveAsScene")}
+        {exportButton}
+        {actionManager.renderAction("clearCanvas")}
+        {onCollabButtonClick && (
+          <CollabButton
+            isCollaborating={isCollaborating}
+            collaboratorCount={appState.collaborators.size}
+            onClick={onCollabButtonClick}
+          />
+        )}
+        {
+          <BackgroundPickerAndDarkModeToggle
+            actionManager={actionManager}
+            appState={appState}
+            setAppState={setAppState}
+          />
+        }
+      </>
+    );
+  };
+  return (
+    <>
+      {!viewModeEnabled && renderToolbar()}
+      <div
+        className="App-bottom-bar"
+        style={{
+          marginBottom: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
+          marginLeft: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
+          marginRight: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
+        }}
+      >
+        <Island padding={0}>
+          {appState.openMenu === "canvas" ? (
+            <Section className="App-mobile-menu" heading="canvasActions">
+              <div className="panelColumn">
+                <Stack.Col gap={4}>
+                  {renderCanvasActions()}
+                  {renderCustomFooter?.(true)}
+                  {appState.collaborators.size > 0 && (
+                    <fieldset>
+                      <legend>{t("labels.collaborators")}</legend>
+                      <UserList mobile>
+                        {Array.from(appState.collaborators)
+                          // Collaborator is either not initialized or is actually the current user.
+                          .filter(
+                            ([_, client]) => Object.keys(client).length !== 0,
+                          )
+                          .map(([clientId, client]) => (
+                            <React.Fragment key={clientId}>
+                              {actionManager.renderAction(
+                                "goToCollaborator",
+                                clientId,
+                              )}
+                            </React.Fragment>
+                          ))}
+                      </UserList>
+                    </fieldset>
+                  )}
+                </Stack.Col>
+              </div>
+            </Section>
+          ) : appState.openMenu === "shape" &&
+            !viewModeEnabled &&
+            showSelectedShapeActions(appState, elements) ? (
+            <Section className="App-mobile-menu" heading="selectedShapeActions">
+              <SelectedShapeActions
+                appState={appState}
+                elements={elements}
+                renderAction={actionManager.renderAction}
+                elementType={appState.elementType}
+              />
+            </Section>
+          ) : null}
+          <footer className="App-toolbar">
+            {renderAppToolbar()}
+            {appState.scrolledOutside && !appState.openMenu && (
+              <button
+                className="scroll-back-to-content"
+                onClick={() => {
+                  setAppState({
+                    ...calculateScrollCenter(elements, appState, canvas),
+                  });
+                }}
+              >
+                {t("buttons.scrollBackToContent")}
+              </button>
+            )}
+          </footer>
+        </Island>
+      </div>
+    </>
+  );
+};

src/components/Modal.scss

@@ -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,7 +44,7 @@
     overflow-y: auto;
 
     // for modals, reset blurry bg
-    background: var(--island-bg-color);
+    background: var(--bg-color-island);
     backdrop-filter: none;
 
     border: 1px solid var(--dialog-border);
@@ -82,7 +87,7 @@
     }
 
     .Modal__content {
-      position: fixed;
+      position: absolute;
       top: 0;
       left: 0;
       right: 0;

src/components/Modal.tsx

@@ -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");

src/components/Popover.scss

@@ -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;
-  }
 }

src/components/Stats.scss

@@ -1,53 +1,51 @@
 @import "../css/variables.module";
 
-.excalidraw {
-  .Stats {
-    position: fixed;
-    top: 64px;
-    right: 12px;
-    font-size: 12px;
-    z-index: 999;
+.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 {
-        width: 100%;
-        height: 100%;
-      }
-    }
-
-    table {
+  .close {
+    float: right;
+    height: 16px;
+    width: 16px;
+    cursor: pointer;
+    svg {
       width: 100%;
-      th {
-        border-bottom: 1px solid var(--input-border-color);
-        padding: 4px;
-      }
-      tr {
-        td:nth-child(2) {
-          min-width: 24px;
-          text-align: right;
-        }
-      }
+      height: 100%;
     }
+  }
 
-    :root[dir="rtl"] & {
-      left: 12px;
-      right: initial;
-
-      h3 {
-        margin: 0 0 8px 24px;
-      }
-      .close {
-        float: left;
+  table {
+    width: 100%;
+    th {
+      border-bottom: 1px solid var(--input-border-color);
+      padding: 4px;
+    }
+    tr {
+      td:nth-child(2) {
+        min-width: 24px;
+        text-align: right;
       }
     }
   }
+
+  :root[dir="rtl"] & {
+    left: 12px;
+    right: initial;
+
+    h3 {
+      margin: 0 0 8px 24px;
+    }
+    .close {
+      float: left;
+    }
+  }
 }

src/components/Stats.tsx

@@ -1,4 +1,6 @@
 import React, { useEffect, useState } from "react";
+import { copyTextToSystemClipboard } from "../clipboard";
+import { DEFAULT_VERSION } from "../constants";
 import { getCommonBounds } from "../element/bounds";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import {
@@ -9,7 +11,7 @@ import { t } from "../i18n";
 import useIsMobile from "../is-mobile";
 import { getTargetElements } from "../scene";
 import { AppState } from "../types";
-import { debounce, nFormatter } from "../utils";
+import { debounce, getVersion, nFormatter } from "../utils";
 import { close } from "./icons";
 import { Island } from "./Island";
 import "./Stats.scss";
@@ -25,6 +27,7 @@ const getStorageSizes = debounce((cb: (sizes: StorageSizes) => void) => {
 
 export const Stats = (props: {
   appState: AppState;
+  setAppState: React.Component<any, AppState>["setState"];
   elements: readonly NonDeletedExcalidrawElement[];
   onClose: () => void;
 }) => {
@@ -50,6 +53,17 @@ export const Stats = (props: {
     return null;
   }
 
+  const version = getVersion();
+  let hash;
+  let timestamp;
+
+  if (version !== DEFAULT_VERSION) {
+    timestamp = version.slice(0, 16).replace("T", " ");
+    hash = version.slice(21);
+  } else {
+    timestamp = t("stats.versionNotAvailable");
+  }
+
   return (
     <div className="Stats">
       <Island padding={2}>
@@ -156,6 +170,28 @@ export const Stats = (props: {
                 </td>
               </tr>
             )}
+            <tr>
+              <th colSpan={2}>{t("stats.version")}</th>
+            </tr>
+            <tr>
+              <td
+                colSpan={2}
+                style={{ textAlign: "center", cursor: "pointer" }}
+                onClick={async () => {
+                  try {
+                    await copyTextToSystemClipboard(getVersion());
+                    props.setAppState({
+                      toastMessage: t("toast.copyToClipboard"),
+                    });
+                  } catch {}
+                }}
+                title={t("stats.versionCopy")}
+              >
+                {timestamp}
+                <br />
+                {hash}
+              </td>
+            </tr>
           </tbody>
         </table>
       </Island>

src/components/TextInput.scss

@@ -9,11 +9,11 @@
     padding: 0.75rem;
     white-space: nowrap;
     border-radius: var(--space-factor);
-    background-color: var(--input-bg-color);
+    background-color: var(--input-background-color);
 
     &:not(:focus) {
       &:hover {
-        background-color: var(--input-hover-bg-color);
+        background-color: var(--input-hover-background-color);
       }
     }
 

src/components/Toast.scss

@@ -11,7 +11,7 @@
     left: 50%;
     margin-left: -150px;
     padding: 4px 0;
-    position: fixed;
+    position: absolute;
     text-align: center;
     width: 300px;
     z-index: 999999;

src/components/Tooltip.scss

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

src/constants.ts

@@ -2,50 +2,52 @@ import { FontFamily } from "./element/types";
 
 export const APP_NAME = "Excalidraw";
 
-export const DRAGGING_THRESHOLD = 10;
-export const LINE_CONFIRM_THRESHOLD = 10;
+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 CURSOR_TYPE = {
-  AUTO: "",
+  TEXT: "text",
   CROSSHAIR: "crosshair",
   GRABBING: "grabbing",
-  MOVE: "move",
   POINTER: "pointer",
-  TEXT: "text",
+  MOVE: "move",
+  AUTO: "",
 };
 export const POINTER_BUTTON = {
   MAIN: 0,
+  WHEEL: 1,
   SECONDARY: 2,
   TOUCH: -1,
-  WHEEL: 1,
 };
 
 export enum EVENT {
-  BEFORE_UNLOAD = "beforeunload",
-  BLUR = "blur",
   COPY = "copy",
+  PASTE = "paste",
   CUT = "cut",
-  DRAG_OVER = "dragover",
-  DROP = "drop",
-  GESTURE_CHANGE = "gesturechange",
-  GESTURE_END = "gestureend",
-  GESTURE_START = "gesturestart",
-  HASHCHANGE = "hashchange",
   KEYDOWN = "keydown",
   KEYUP = "keyup",
   MOUSE_MOVE = "mousemove",
-  PASTE = "paste",
+  RESIZE = "resize",
+  UNLOAD = "unload",
+  BLUR = "blur",
+  DRAG_OVER = "dragover",
+  DROP = "drop",
+  GESTURE_END = "gestureend",
+  BEFORE_UNLOAD = "beforeunload",
+  GESTURE_START = "gesturestart",
+  GESTURE_CHANGE = "gesturechange",
   POINTER_MOVE = "pointermove",
   POINTER_UP = "pointerup",
-  RESIZE = "resize",
   STATE_CHANGE = "statechange",
-  TOUCH_END = "touchend",
-  TOUCH_START = "touchstart",
-  UNLOAD = "unload",
   WHEEL = "wheel",
+  TOUCH_START = "touchstart",
+  TOUCH_END = "touchend",
+  HASHCHANGE = "hashchange",
+  VISIBILITY_CHANGE = "visibilitychange",
+  SCROLL = "scroll",
 }
 
 export const ENV = {
@@ -66,11 +68,11 @@ export const FONT_FAMILY = {
 
 export const WINDOWS_EMOJI_FALLBACK_FONT = "Segoe UI Emoji";
 
-export const DEFAULT_FONT_FAMILY: FontFamily = 1;
 export const DEFAULT_FONT_SIZE = 20;
+export const DEFAULT_FONT_FAMILY: FontFamily = 1;
 export const DEFAULT_TEXT_ALIGN = "left";
-export const DEFAULT_VERSION = "{version}";
 export const DEFAULT_VERTICAL_ALIGN = "top";
+export const DEFAULT_VERSION = "{version}";
 
 export const CANVAS_ONLY_ACTIONS = ["selectAll"];
 
@@ -85,11 +87,23 @@ export const STORAGE_KEYS = {
   LOCAL_STORAGE_LIBRARY: "excalidraw-library",
 };
 
-// Time in milliseconds
+// time in milliseconds
 export const TAP_TWICE_TIMEOUT = 300;
+export const TOUCH_CTX_MENU_TIMEOUT = 500;
 export const TITLE_TIMEOUT = 10000;
 export const TOAST_TIMEOUT = 5000;
-export const TOUCH_CTX_MENU_TIMEOUT = 500;
-export const VERSION_TIMEOUT = 15000;
+export const VERSION_TIMEOUT = 30000;
+export const SCROLL_TIMEOUT = 500;
 
 export const ZOOM_STEP = 0.1;
+
+// Report a user inactive after IDLE_THRESHOLD milliseconds
+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",
+};

src/css/styles.scss

@@ -1,10 +1,15 @@
 @import "./variables.module";
 @import "./theme";
 
+:root {
+  --zIndex-canvas: 1;
+  --zIndex-wysiwyg: 2;
+  --zIndex-layerUI: 3;
+}
+
 .excalidraw {
   color: var(--text-color-primary);
   display: flex;
-  position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
@@ -30,6 +35,8 @@
     image-rendering: pixelated; // chromium
     // NOTE: must be declared *after* the above
     image-rendering: -moz-crisp-edges; // FF
+
+    z-index: var(--zIndex-canvas);
   }
 
   &.Appearance_dark {
@@ -43,10 +50,10 @@
   }
 
   .FixedSideContainer {
-    padding-top: var(--sat, 0);
-    padding-right: var(--sar, 0);
-    padding-bottom: var(--sab, 0);
-    padding-left: var(--sal, 0);
+    padding-top: var(--sat, 0px);
+    padding-right: var(--sar, 0px);
+    padding-bottom: var(--sab, 0px);
+    padding-left: var(--sal, 0px);
   }
 
   .panelRow {
@@ -216,6 +223,13 @@
     }
   }
 
+  .App-top-bar {
+    z-index: var(--zIndex-layerUI);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
   .App-bottom-bar {
     position: absolute;
     top: 0;
@@ -223,10 +237,10 @@
     left: 0;
     right: 0;
     --bar-padding: calc(4 * var(--space-factor));
-    padding-top: #{"max(var(--bar-padding), var(--sat, 0))"};
-    padding-right: var(--sar, 0);
-    padding-bottom: var(--sab, 0);
-    padding-left: var(--sal, 0);
+    padding-top: #{"max(var(--bar-padding), var(--sat, 0px))"};
+    padding-right: var(--sar, 0px);
+    padding-bottom: var(--sab, 0px);
+    padding-left: var(--sal, 0px);
     z-index: 4;
     display: flex;
     align-items: flex-end;
@@ -243,7 +257,7 @@
       pointer-events: initial;
 
       .panelColumn {
-        padding: 8px 8px 0 8px;
+        padding: 8px 8px 0px 8px;
       }
     }
   }
@@ -282,7 +296,7 @@
     pointer-events: none !important;
   }
 
-  .App-menu_top > * {
+  .layer-ui__wrapper:not(.disable-pointerEvents) .App-menu_top > * {
     pointer-events: all;
   }
 
@@ -323,7 +337,7 @@
     }
   }
 
-  .App-menu_bottom > * {
+  .layer-ui__wrapper:not(.disable-pointerEvents) .App-menu_bottom > * {
     pointer-events: all;
   }
 
@@ -347,7 +361,6 @@
 
   .App-menu__left {
     overflow-y: auto;
-    max-height: calc(100vh - 236px);
   }
 
   .dropdown-select {
@@ -419,7 +432,7 @@
 
   .scroll-back-to-content {
     color: var(--popup-text-color);
-    position: fixed;
+    position: absolute;
     left: 50%;
     bottom: 30px;
     transform: translateX(-50%);
@@ -447,7 +460,7 @@
       display: none;
     }
     .scroll-back-to-content {
-      bottom: calc(80px + var(--sab, 0));
+      bottom: calc(80px + var(--sab, 0px));
       z-index: -1;
     }
   }
@@ -492,6 +505,13 @@
     pointer-events: none !important;
   }
 
+  &.excalidraw--view-mode {
+    .App-menu {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+
   @media print {
     .App-bottom-bar,
     .FixedSideContainer,

src/css/theme.scss

@@ -1,43 +1,43 @@
 @import "open-color/open-color.scss";
 
 :root {
-  --appearance-filter: none;
-  --button-destructive-bg-color: #{$oc-red-1};
-  --button-destructive-color: #{$oc-red-9};
+  --bg-color-island: rgba(255, 255, 255, 0.9);
+  --popup-background-color: #{$oc-white};
+  --space-factor: 0.25rem;
   --button-gray-1: #{$oc-gray-2};
   --button-gray-2: #{$oc-gray-4};
   --button-gray-3: #{$oc-gray-5};
-  --button-special-active-bg-color: #{$oc-green-0};
-  --dialog-border: #{$oc-gray-6};
-  --dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
-  --focus-highlight-color: #{$oc-blue-2};
+  --input-border-color: #{$oc-gray-3};
+  --input-background-color: #{$oc-white};
+  --input-hover-background-color: #{$oc-gray-1};
+  --input-label-color: #{$oc-gray-7};
   --icon-fill-color: #{$oc-black};
   --icon-green-fill-color: #{$oc-green-9};
-  --input-bg-color: #{$oc-white};
-  --input-border-color: #{$oc-gray-3};
-  --input-hover-bg-color: #{$oc-gray-1};
-  --input-label-color: #{$oc-gray-7};
-  --island-bg-color: #{transparentize($oc-white, 0.12)};
   --keybinding-color: #{$oc-gray-5};
-  --link-color: #{$oc-blue-7};
-  --overlay-bg-color: #{transparentize($oc-white, 0.12)};
-  --popup-bg-color: #{$oc-white};
-  --popup-secondary-bg-color: #{$oc-gray-1};
-  --popup-text-color: #{$oc-black};
-  --popup-text-inverted-color: #{$oc-white};
+  --sat: env(safe-area-inset-top);
   --sab: env(safe-area-inset-bottom);
   --sal: env(safe-area-inset-left);
   --sar: env(safe-area-inset-right);
-  --sat: env(safe-area-inset-top);
-  --select-highlight-color: #{$oc-blue-5};
-  --shadow-island: 0 1px 5px #{transparentize($oc-black, 0.85)};
-  --space-factor: 0.25rem;
   --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};
+  --select-highlight-color: #{$oc-blue-5};
+  --appearance-filter: none;
+  --button-special-active-background-color: #{$oc-green-0};
+  --button-destructive-color: #{$oc-red-9};
+  --button-destructive-background-color: #{$oc-red-1};
+  --popup-secondary-background-color: #{$oc-gray-1};
+  --popup-text-color: #{$oc-black};
+  --popup-text-inverted-color: #{$oc-white};
+  --dialog-border: #{$oc-gray-6};
+  --link-color: #{$oc-blue-7};
 }
 
 .excalidraw {
   &.Appearance_dark {
-    background: $oc-black;
+    background: #000;
 
     &.Appearance_dark-background-none {
       background: none;
@@ -45,29 +45,31 @@
   }
 
   &.Appearance_dark {
-    --appearance-filter: invert(93%) hue-rotate(180deg);
-    --button-destructive-bg-color: #5a0000;
-    --button-destructive-color: #{$oc-red-3};
+    --text-color-primary: #{$oc-gray-4};
+    --bg-color-island: #1e1e1e;
+    --popup-background-color: #2c2c2c;
     --button-gray-1: #363636;
     --button-gray-2: #272727;
     --button-gray-3: #222;
-    --button-special-active-bg-color: #204624;
-    --dialog-border: #{$oc-gray-9};
-    --dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path fill="%23ced4da" d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
-    --focus-highlight-color: #{$oc-blue-6};
+    --input-border-color: #2e2e2e;
+    --input-background-color: #121212;
+    --input-hover-background-color: #181818;
+    --input-label-color: #{$oc-gray-2};
     --icon-fill-color: #{$oc-gray-4};
     --icon-green-fill-color: #{$oc-green-4};
-    --input-bg-color: #121212;
-    --input-border-color: #2e2e2e;
-    --input-hover-bg-color: #181818;
-    --input-label-color: #{$oc-gray-2};
-    --island-bg-color: #1e1e1e;
     --keybinding-color: #{$oc-gray-6};
-    --overlay-bg-color: rgba(30, 30, 30, 0.88);
-    --popup-secondary-bg-color: #222;
+    --shadow-island: 0 1px 5px #{transparentize($oc-black, 0.7)};
+    --overlay-background-color: rgba(30, 30, 30, 0.88);
+    --dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path fill="%23ced4da" d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
+    --focus-highlight-color: #{$oc-blue-6};
+    --select-highlight-color: #{$oc-blue-4};
+    --appearance-filter: invert(93%) hue-rotate(180deg);
+    --button-special-active-background-color: #204624;
+    --button-destructive-color: #{$oc-red-3};
+    --button-destructive-background-color: #5a0000;
+    --popup-secondary-background-color: #222;
     --popup-text-color: #{$oc-gray-4};
     --popup-text-inverted-color: #2c2c2c;
-    --select-highlight-color: #{$oc-blue-4};
-    --shadow-island: 0 1px 5px #{transparentize($oc-black, 0.7)};
+    --dialog-border: #{$oc-gray-9};
   }
 }

src/css/variables.module.scss

@@ -1,6 +1,6 @@
 @import "open-color/open-color.scss";
 
-// Keep up to date with is-mobile.tsx
+// keep up to date with is-mobile.tsx
 $is-mobile-query: "(max-width: 600px), (max-height: 500px) and (max-width: 1000px)";
 
 :export {

src/element/linearElementEditor.ts

@@ -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,

src/element/showSelectedShapeActions.ts

@@ -7,7 +7,8 @@ export const showSelectedShapeActions = (
   elements: readonly NonDeletedExcalidrawElement[],
 ) =>
   Boolean(
-    appState.editingElement ||
-      getSelectedElements(elements, appState).length ||
-      appState.elementType !== "selection",
+    !appState.viewModeEnabled &&
+      (appState.editingElement ||
+        getSelectedElements(elements, appState).length ||
+        appState.elementType !== "selection"),
   );

src/element/textWysiwyg.tsx

@@ -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);
@@ -89,9 +91,6 @@ export const textWysiwyg = ({
   editable.dataset.type = "wysiwyg";
   // prevent line wrapping on Safari
   editable.wrap = "off";
-  editable.className = `excalidraw ${
-    appState.appearance === "dark" ? "Appearance_dark" : ""
-  }`;
 
   Object.assign(editable.style, {
     position: "fixed",
@@ -107,6 +106,8 @@ export const textWysiwyg = ({
     overflow: "hidden",
     // prevent line wrapping (`whitespace: nowrap` doesn't work on FF)
     whiteSpace: "pre",
+    // must be specified because in dark mode canvas creates a stacking context
+    zIndex: "var(--zIndex-wysiwyg)",
   });
 
   updateWysiwygStyle();
@@ -152,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);
@@ -160,7 +165,7 @@ export const textWysiwyg = ({
 
     unbindUpdate();
 
-    document.body.removeChild(editable);
+    editable.remove();
   };
 
   const rebindBlur = () => {
@@ -198,15 +203,27 @@ 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,
     capture: true,
   });
-  document.body.appendChild(editable);
+  document
+    .querySelector(".excalidraw-textEditorContainer")!
+    .appendChild(editable);
   editable.focus();
   editable.select();
 };

src/excalidraw-app/collab/CollabWrapper.tsx

@@ -19,12 +19,16 @@ import {
 } from "../app_constants";
 import {
   decryptAESGEM,
-  generateCollaborationLink,
-  getCollaborationLinkData,
+  generateCollaborationLinkData,
+  getCollaborationLink,
   SocketUpdateDataSource,
   SOCKET_SERVER,
 } from "../data";
-import { isSavedToFirebase, saveToFirebase } from "../data/firebase";
+import {
+  isSavedToFirebase,
+  loadFromFirebase,
+  saveToFirebase,
+} from "../data/firebase";
 import {
   importUsernameFromLocalStorage,
   saveUsernameToLocalStorage,
@@ -33,20 +37,25 @@ import {
 import Portal from "./Portal";
 import RoomDialog from "./RoomDialog";
 import { createInverseContext } from "../../createInverseContext";
+import { t } from "../../i18n";
+import { UserIdleState } from "./types";
+import { IDLE_THRESHOLD, ACTIVE_THRESHOLD } from "../../constants";
 
 interface CollabState {
-  isCollaborating: boolean;
   modalIsShown: boolean;
   errorMessage: string;
   username: string;
+  userState: UserIdleState;
   activeRoomLink: string;
 }
 
 type CollabInstance = InstanceType<typeof CollabWrapper>;
 
 export interface CollabAPI {
-  isCollaborating: CollabState["isCollaborating"];
+  /** function so that we can access the latest value from stale callbacks */
+  isCollaborating: () => boolean;
   username: CollabState["username"];
+  userState: CollabState["userState"];
   onPointerUpdate: CollabInstance["onPointerUpdate"];
   initializeSocketClient: CollabInstance["initializeSocketClient"];
   onCollabButtonClick: CollabInstance["onCollabButtonClick"];
@@ -72,6 +81,10 @@ export { CollabContext, CollabContextConsumer };
 class CollabWrapper extends PureComponent<Props, CollabState> {
   portal: Portal;
   excalidrawAPI: Props["excalidrawAPI"];
+  isCollaborating: boolean = false;
+  activeIntervalId: number | null;
+  idleTimeoutId: number | null;
+
   private socketInitializationTimer?: NodeJS.Timeout;
   private lastBroadcastedOrReceivedSceneVersion: number = -1;
   private collaborators = new Map<string, Collaborator>();
@@ -79,14 +92,16 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
   constructor(props: Props) {
     super(props);
     this.state = {
-      isCollaborating: false,
       modalIsShown: false,
       errorMessage: "",
       username: importUsernameFromLocalStorage() || "",
+      userState: UserIdleState.ACTIVE,
       activeRoomLink: "",
     };
     this.portal = new Portal(this);
     this.excalidrawAPI = props.excalidrawAPI;
+    this.activeIntervalId = null;
+    this.idleTimeoutId = null;
   }
 
   componentDidMount() {
@@ -110,18 +125,32 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
   componentWillUnmount() {
     window.removeEventListener(EVENT.BEFORE_UNLOAD, this.beforeUnload);
     window.removeEventListener(EVENT.UNLOAD, this.onUnload);
+    window.removeEventListener(EVENT.POINTER_MOVE, this.onPointerMove);
+    window.removeEventListener(
+      EVENT.VISIBILITY_CHANGE,
+      this.onVisibilityChange,
+    );
+    if (this.activeIntervalId) {
+      window.clearInterval(this.activeIntervalId);
+      this.activeIntervalId = null;
+    }
+    if (this.idleTimeoutId) {
+      window.clearTimeout(this.idleTimeoutId);
+      this.idleTimeoutId = null;
+    }
   }
 
   private onUnload = () => {
-    this.destroySocketClient();
+    this.destroySocketClient({ isUnload: true });
   };
 
   private beforeUnload = withBatchedUpdates((event: BeforeUnloadEvent) => {
     const syncableElements = getSyncableElements(
       this.getSceneElementsIncludingDeleted(),
     );
+
     if (
-      this.state.isCollaborating &&
+      this.isCollaborating &&
       !isSavedToFirebase(this.portal, syncableElements)
     ) {
       // this won't run in time if user decides to leave the site, but
@@ -133,7 +162,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
       event.returnValue = "";
     }
 
-    if (this.state.isCollaborating || this.portal.roomId) {
+    if (this.isCollaborating || this.portal.roomId) {
       try {
         localStorage?.setItem(
           STORAGE_KEYS.LOCAL_STORAGE_KEY_COLLAB_FORCE_FLAG,
@@ -159,143 +188,188 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
   };
 
   openPortal = async () => {
-    window.history.pushState({}, APP_NAME, await generateCollaborationLink());
-    const elements = this.excalidrawAPI.getSceneElements();
-    // remove deleted elements from elements array & history to ensure we don't
-    // expose potentially sensitive user data in case user manually deletes
-    // existing elements (or clears scene), which would otherwise be persisted
-    // to database even if deleted before creating the room.
-    this.excalidrawAPI.history.clear();
-    this.excalidrawAPI.updateScene({
-      elements,
-      commitToHistory: true,
-    });
-    return this.initializeSocketClient();
+    return this.initializeSocketClient(null);
   };
 
   closePortal = () => {
     this.saveCollabRoomToFirebase();
-    window.history.pushState({}, APP_NAME, window.location.origin);
-    this.destroySocketClient();
+    if (window.confirm(t("alerts.collabStopOverridePrompt"))) {
+      window.history.pushState({}, APP_NAME, window.location.origin);
+      this.destroySocketClient();
+    }
   };
 
-  private destroySocketClient = () => {
-    this.collaborators = new Map();
-    this.excalidrawAPI.updateScene({
-      collaborators: this.collaborators,
-    });
-    this.setState({
-      isCollaborating: false,
-      activeRoomLink: "",
-    });
+  private destroySocketClient = (opts?: { isUnload: boolean }) => {
+    if (!opts?.isUnload) {
+      this.collaborators = new Map();
+      this.excalidrawAPI.updateScene({
+        collaborators: this.collaborators,
+      });
+      this.setState({
+        activeRoomLink: "",
+      });
+      this.isCollaborating = false;
+    }
     this.portal.close();
   };
 
-  private initializeSocketClient = async (): Promise<ImportedDataState | null> => {
+  private initializeSocketClient = async (
+    existingRoomLinkData: null | { roomId: string; roomKey: string },
+  ): Promise<ImportedDataState | null> => {
     if (this.portal.socket) {
       return null;
     }
 
-    const scenePromise = resolvablePromise<ImportedDataState | null>();
+    let roomId;
+    let roomKey;
 
-    const roomMatch = getCollaborationLinkData(window.location.href);
-
-    if (roomMatch) {
-      const roomId = roomMatch[1];
-      const roomKey = roomMatch[2];
-
-      // fallback in case you're not alone in the room but still don't receive
-      // initial SCENE_UPDATE message
-      this.socketInitializationTimer = setTimeout(() => {
-        this.initializeSocket();
-        scenePromise.resolve(null);
-      }, INITIAL_SCENE_UPDATE_TIMEOUT);
-
-      const { default: socketIOClient }: any = await import(
-        /* webpackChunkName: "socketIoClient" */ "socket.io-client"
+    if (existingRoomLinkData) {
+      ({ roomId, roomKey } = existingRoomLinkData);
+    } else {
+      ({ roomId, roomKey } = await generateCollaborationLinkData());
+      window.history.pushState(
+        {},
+        APP_NAME,
+        getCollaborationLink({ roomId, roomKey }),
       );
-
-      this.portal.open(socketIOClient(SOCKET_SERVER), roomId, roomKey);
-
-      // All socket listeners are moving to Portal
-      this.portal.socket!.on(
-        "client-broadcast",
-        async (encryptedData: ArrayBuffer, iv: Uint8Array) => {
-          if (!this.portal.roomKey) {
-            return;
-          }
-          const decryptedData = await decryptAESGEM(
-            encryptedData,
-            this.portal.roomKey,
-            iv,
-          );
-
-          switch (decryptedData.type) {
-            case "INVALID_RESPONSE":
-              return;
-            case SCENE.INIT: {
-              if (!this.portal.socketInitialized) {
-                const remoteElements = decryptedData.payload.elements;
-                const reconciledElements = this.reconcileElements(
-                  remoteElements,
-                );
-                this.handleRemoteSceneUpdate(reconciledElements, {
-                  init: true,
-                });
-                this.initializeSocket();
-                scenePromise.resolve({ elements: reconciledElements });
-              }
-              break;
-            }
-            case SCENE.UPDATE:
-              this.handleRemoteSceneUpdate(
-                this.reconcileElements(decryptedData.payload.elements),
-              );
-              break;
-            case "MOUSE_LOCATION": {
-              const {
-                pointer,
-                button,
-                username,
-                selectedElementIds,
-              } = decryptedData.payload;
-              const socketId: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["socketId"] =
-                decryptedData.payload.socketId ||
-                // @ts-ignore legacy, see #2094 (#2097)
-                decryptedData.payload.socketID;
-
-              const collaborators = new Map(this.collaborators);
-              const user = collaborators.get(socketId) || {}!;
-              user.pointer = pointer;
-              user.button = button;
-              user.selectedElementIds = selectedElementIds;
-              user.username = username;
-              collaborators.set(socketId, user);
-              this.excalidrawAPI.updateScene({
-                collaborators,
-              });
-              break;
-            }
-          }
-        },
-      );
-      this.portal.socket!.on("first-in-room", () => {
-        if (this.portal.socket) {
-          this.portal.socket.off("first-in-room");
-        }
-        this.initializeSocket();
-        scenePromise.resolve(null);
-      });
-
-      this.setState({
-        isCollaborating: true,
-        activeRoomLink: window.location.href,
-      });
-
-      return scenePromise;
     }
 
-    return null;
+    const scenePromise = resolvablePromise<ImportedDataState | null>();
+
+    this.isCollaborating = true;
+
+    const { default: socketIOClient }: any = await import(
+      /* webpackChunkName: "socketIoClient" */ "socket.io-client"
+    );
+
+    this.portal.open(socketIOClient(SOCKET_SERVER), roomId, roomKey);
+
+    if (existingRoomLinkData) {
+      this.excalidrawAPI.resetScene();
+
+      try {
+        const elements = await loadFromFirebase(
+          roomId,
+          roomKey,
+          this.portal.socket,
+        );
+        if (elements) {
+          scenePromise.resolve({
+            elements,
+          });
+        }
+      } catch (error) {
+        // log the error and move on. other peers will sync us the scene.
+        console.error(error);
+      }
+    } else {
+      const elements = this.excalidrawAPI.getSceneElements();
+      // remove deleted elements from elements array & history to ensure we don't
+      // expose potentially sensitive user data in case user manually deletes
+      // existing elements (or clears scene), which would otherwise be persisted
+      // to database even if deleted before creating the room.
+      this.excalidrawAPI.history.clear();
+      this.excalidrawAPI.updateScene({
+        elements,
+        commitToHistory: true,
+      });
+    }
+
+    // fallback in case you're not alone in the room but still don't receive
+    // initial SCENE_UPDATE message
+    this.socketInitializationTimer = setTimeout(() => {
+      this.initializeSocket();
+      scenePromise.resolve(null);
+    }, INITIAL_SCENE_UPDATE_TIMEOUT);
+
+    // All socket listeners are moving to Portal
+    this.portal.socket!.on(
+      "client-broadcast",
+      async (encryptedData: ArrayBuffer, iv: Uint8Array) => {
+        if (!this.portal.roomKey) {
+          return;
+        }
+        const decryptedData = await decryptAESGEM(
+          encryptedData,
+          this.portal.roomKey,
+          iv,
+        );
+
+        switch (decryptedData.type) {
+          case "INVALID_RESPONSE":
+            return;
+          case SCENE.INIT: {
+            if (!this.portal.socketInitialized) {
+              this.initializeSocket();
+              const remoteElements = decryptedData.payload.elements;
+              const reconciledElements = this.reconcileElements(remoteElements);
+              this.handleRemoteSceneUpdate(reconciledElements, {
+                init: true,
+              });
+              // noop if already resolved via init from firebase
+              scenePromise.resolve({ elements: reconciledElements });
+            }
+            break;
+          }
+          case SCENE.UPDATE:
+            this.handleRemoteSceneUpdate(
+              this.reconcileElements(decryptedData.payload.elements),
+            );
+            break;
+          case "MOUSE_LOCATION": {
+            const {
+              pointer,
+              button,
+              username,
+              selectedElementIds,
+            } = decryptedData.payload;
+            const socketId: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["socketId"] =
+              decryptedData.payload.socketId ||
+              // @ts-ignore legacy, see #2094 (#2097)
+              decryptedData.payload.socketID;
+
+            const collaborators = new Map(this.collaborators);
+            const user = collaborators.get(socketId) || {}!;
+            user.pointer = pointer;
+            user.button = button;
+            user.selectedElementIds = selectedElementIds;
+            user.username = username;
+            collaborators.set(socketId, user);
+            this.excalidrawAPI.updateScene({
+              collaborators,
+            });
+            break;
+          }
+          case "IDLE_STATUS": {
+            const { userState, socketId, username } = decryptedData.payload;
+            const collaborators = new Map(this.collaborators);
+            const user = collaborators.get(socketId) || {}!;
+            user.userState = userState;
+            user.username = username;
+            this.excalidrawAPI.updateScene({
+              collaborators,
+            });
+            break;
+          }
+        }
+      },
+    );
+
+    this.portal.socket!.on("first-in-room", () => {
+      if (this.portal.socket) {
+        this.portal.socket.off("first-in-room");
+      }
+      this.initializeSocket();
+      scenePromise.resolve(null);
+    });
+
+    this.initializeIdleDetector();
+
+    this.setState({
+      activeRoomLink: window.location.href,
+    });
+
+    return scenePromise;
   };
 
   private initializeSocket = () => {
@@ -359,7 +433,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
     // Avoid broadcasting to the rest of the collaborators the scene
     // we just received!
     // Note: this needs to be set before updating the scene as it
-    // syncronously calls render.
+    // synchronously calls render.
     this.setLastBroadcastedOrReceivedSceneVersion(getSceneVersion(newElements));
 
     return newElements as ReconciledElements;
@@ -388,6 +462,58 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
     this.excalidrawAPI.history.clear();
   };
 
+  private onPointerMove = () => {
+    if (this.idleTimeoutId) {
+      window.clearTimeout(this.idleTimeoutId);
+      this.idleTimeoutId = null;
+    }
+    this.idleTimeoutId = window.setTimeout(this.reportIdle, IDLE_THRESHOLD);
+    if (!this.activeIntervalId) {
+      this.activeIntervalId = window.setInterval(
+        this.reportActive,
+        ACTIVE_THRESHOLD,
+      );
+    }
+  };
+
+  private onVisibilityChange = () => {
+    if (document.hidden) {
+      if (this.idleTimeoutId) {
+        window.clearTimeout(this.idleTimeoutId);
+        this.idleTimeoutId = null;
+      }
+      if (this.activeIntervalId) {
+        window.clearInterval(this.activeIntervalId);
+        this.activeIntervalId = null;
+      }
+      this.onIdleStateChange(UserIdleState.AWAY);
+    } else {
+      this.idleTimeoutId = window.setTimeout(this.reportIdle, IDLE_THRESHOLD);
+      this.activeIntervalId = window.setInterval(
+        this.reportActive,
+        ACTIVE_THRESHOLD,
+      );
+      this.onIdleStateChange(UserIdleState.ACTIVE);
+    }
+  };
+
+  private reportIdle = () => {
+    this.onIdleStateChange(UserIdleState.IDLE);
+    if (this.activeIntervalId) {
+      window.clearInterval(this.activeIntervalId);
+      this.activeIntervalId = null;
+    }
+  };
+
+  private reportActive = () => {
+    this.onIdleStateChange(UserIdleState.ACTIVE);
+  };
+
+  private initializeIdleDetector = () => {
+    document.addEventListener(EVENT.POINTER_MOVE, this.onPointerMove);
+    document.addEventListener(EVENT.VISIBILITY_CHANGE, this.onVisibilityChange);
+  };
+
   setCollaborators(sockets: string[]) {
     this.setState((state) => {
       const collaborators: InstanceType<
@@ -427,6 +553,11 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
       this.portal.broadcastMouseLocation(payload);
   };
 
+  onIdleStateChange = (userState: UserIdleState) => {
+    this.setState({ userState });
+    this.portal.broadcastIdleChange(userState);
+  };
+
   broadcastElements = (elements: readonly ExcalidrawElement[]) => {
     if (
       getSceneVersion(elements) >
@@ -480,9 +611,11 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
 
   /** Getter of context value. Returned object is stable. */
   getContextValue = (): CollabAPI => {
-    this.contextValue = this.contextValue || ({} as CollabAPI);
+    if (!this.contextValue) {
+      this.contextValue = {} as CollabAPI;
+    }
 
-    this.contextValue.isCollaborating = this.state.isCollaborating;
+    this.contextValue.isCollaborating = () => this.isCollaborating;
     this.contextValue.username = this.state.username;
     this.contextValue.onPointerUpdate = this.onPointerUpdate;
     this.contextValue.initializeSocketClient = this.initializeSocketClient;

src/excalidraw-app/collab/Portal.tsx

@@ -9,6 +9,7 @@ import CollabWrapper from "./CollabWrapper";
 import { getSyncableElements } from "../../packages/excalidraw/index";
 import { ExcalidrawElement } from "../../element/types";
 import { BROADCAST, SCENE } from "../app_constants";
+import { UserIdleState } from "./types";
 
 class Portal {
   collab: CollabWrapper;
@@ -122,7 +123,7 @@ class Portal {
       data as SocketUpdateData,
     );
 
-    if (syncAll && this.collab.state.isCollaborating) {
+    if (syncAll && this.collab.isCollaborating) {
       await Promise.all([
         broadcastPromise,
         this.collab.saveCollabRoomToFirebase(syncableElements),
@@ -132,6 +133,23 @@ class Portal {
     }
   };
 
+  broadcastIdleChange = (userState: UserIdleState) => {
+    if (this.socket?.id) {
+      const data: SocketUpdateDataSource["IDLE_STATUS"] = {
+        type: "IDLE_STATUS",
+        payload: {
+          socketId: this.socket.id,
+          userState,
+          username: this.collab.state.username,
+        },
+      };
+      return this._broadcastSocketData(
+        data as SocketUpdateData,
+        true, // volatile
+      );
+    }
+  };
+
   broadcastMouseLocation = (payload: {
     pointer: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["pointer"];
     button: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["button"];

src/excalidraw-app/collab/RoomDialog.scss

@@ -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-bg-color);
+    background-color: var(--input-background-color);
     border-color: var(--input-border-color);
     appearance: none;
     min-width: 0;
     flex: 1 1 auto;
     margin-inline-start: 1em;
+    @media #{$is-mobile-query} {
+      margin-top: 0.5em;
+      margin-inline-start: 0;
+    }
     height: 2.5rem;
     font-size: 1em;
     line-height: 1.5;
@@ -53,7 +67,7 @@
   }
 
   .Modal .RoomDialog-stopSession {
-    background-color: var(--button-destructive-bg-color);
+    background-color: var(--button-destructive-background-color);
 
     .ToolIcon__label,
     .ToolIcon__icon svg {

src/excalidraw-app/collab/RoomDialog.tsx

@@ -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>
   );

src/excalidraw-app/collab/types.ts

@@ -0,0 +1,5 @@
+export enum UserIdleState {
+  ACTIVE = "active",
+  AWAY = "away",
+  IDLE = "idle",
+}

src/excalidraw-app/data/firebase.ts

@@ -148,6 +148,7 @@ export const saveToFirebase = async (
 export const loadFromFirebase = async (
   roomId: string,
   roomKey: string,
+  socket: SocketIOClient.Socket | null,
 ): Promise<readonly ExcalidrawElement[] | null> => {
   const firebase = await getFirebase();
   const db = firebase.firestore();
@@ -160,5 +161,12 @@ export const loadFromFirebase = async (
   const storedScene = doc.data() as FirebaseStoredScene;
   const ciphertext = storedScene.ciphertext.toUint8Array();
   const iv = storedScene.iv.toUint8Array();
-  return restoreElements(await decryptElements(roomKey, iv, ciphertext));
+
+  const elements = await decryptElements(roomKey, iv, ciphertext);
+
+  if (socket) {
+    firebaseSceneVersionCache.set(socket, getSceneVersion(elements));
+  }
+
+  return restoreElements(elements);
 };

src/excalidraw-app/data/index.ts

@@ -4,6 +4,7 @@ import { ImportedDataState } from "../../data/types";
 import { ExcalidrawElement } from "../../element/types";
 import { t } from "../../i18n";
 import { AppState } from "../../types";
+import { UserIdleState } from "../collab/types";
 
 const byteToHex = (byte: number): string => `0${byte.toString(16)}`.slice(-2);
 
@@ -59,6 +60,14 @@ export type SocketUpdateDataSource = {
       username: string;
     };
   };
+  IDLE_STATUS: {
+    type: "IDLE_STATUS";
+    payload: {
+      socketId: string;
+      userState: UserIdleState;
+      username: string;
+    };
+  };
 };
 
 export type SocketUpdateDataIncoming =
@@ -125,17 +134,27 @@ export const decryptAESGEM = async (
 };
 
 export const getCollaborationLinkData = (link: string) => {
-  if (link.length === 0) {
-    return;
-  }
   const hash = new URL(link).hash;
-  return hash.match(/^#room=([a-zA-Z0-9_-]+),([a-zA-Z0-9_-]+)$/);
+  const match = hash.match(/^#room=([a-zA-Z0-9_-]+),([a-zA-Z0-9_-]+)$/);
+  return match ? { roomId: match[1], roomKey: match[2] } : null;
 };
 
-export const generateCollaborationLink = async () => {
-  const id = await generateRandomID();
-  const key = await generateEncryptionKey();
-  return `${window.location.origin}${window.location.pathname}#room=${id},${key}`;
+export const generateCollaborationLinkData = async () => {
+  const roomId = await generateRandomID();
+  const roomKey = await generateEncryptionKey();
+
+  if (!roomKey) {
+    throw new Error("Couldn't generate room key");
+  }
+
+  return { roomId, roomKey };
+};
+
+export const getCollaborationLink = (data: {
+  roomId: string;
+  roomKey: string;
+}) => {
+  return `${window.location.origin}${window.location.pathname}#room=${data.roomId},${data.roomKey}`;
 };
 
 export const getImportedKey = (key: string, usage: KeyUsage) =>

src/excalidraw-app/index.tsx

@@ -39,11 +39,9 @@ import CollabWrapper, {
 } from "./collab/CollabWrapper";
 import { LanguageList } from "./components/LanguageList";
 import { exportToBackend, getCollaborationLinkData, loadScene } from "./data";
-import { loadFromFirebase } from "./data/firebase";
 import {
   importFromLocalStorage,
   saveToLocalStorage,
-  STORAGE_KEYS,
 } from "./data/localStorage";
 
 const languageDetector = new LanguageDetector();
@@ -66,50 +64,9 @@ const onBlur = () => {
   saveDebounced.flush();
 };
 
-const shouldForceLoadScene = (
-  scene: ResolutionType<typeof loadScene>,
-): boolean => {
-  if (!scene.elements.length) {
-    return true;
-  }
-
-  const roomMatch = getCollaborationLinkData(window.location.href);
-
-  if (!roomMatch) {
-    return false;
-  }
-
-  const roomId = roomMatch[1];
-
-  let collabForceLoadFlag;
-  try {
-    collabForceLoadFlag = localStorage?.getItem(
-      STORAGE_KEYS.LOCAL_STORAGE_KEY_COLLAB_FORCE_FLAG,
-    );
-  } catch {}
-
-  if (collabForceLoadFlag) {
-    try {
-      const {
-        room: previousRoom,
-        timestamp,
-      }: { room: string; timestamp: number } = JSON.parse(collabForceLoadFlag);
-      // if loading same room as the one previously unloaded within 15sec
-      //  force reload without prompting
-      if (previousRoom === roomId && Date.now() - timestamp < 15000) {
-        return true;
-      }
-    } catch {}
-  }
-  return false;
-};
-
-type Scene = ImportedDataState & { commitToHistory: boolean };
-
 const initializeScene = async (opts: {
-  resetScene: ExcalidrawImperativeAPI["resetScene"];
-  initializeSocketClient: CollabAPI["initializeSocketClient"];
-}): Promise<Scene | null> => {
+  collabAPI: CollabAPI;
+}): Promise<ImportedDataState | null> => {
   const searchParams = new URLSearchParams(window.location.search);
   const id = searchParams.get("id");
   const jsonMatch = window.location.hash.match(
@@ -120,11 +77,15 @@ const initializeScene = async (opts: {
 
   let scene = await loadScene(null, null, initialData);
 
-  let isCollabScene = !!getCollaborationLinkData(window.location.href);
-  const isExternalScene = !!(id || jsonMatch || isCollabScene);
+  let roomLinkData = getCollaborationLinkData(window.location.href);
+  const isExternalScene = !!(id || jsonMatch || roomLinkData);
   if (isExternalScene) {
     if (
-      shouldForceLoadScene(scene) ||
+      // don't prompt if scene is empty
+      !scene.elements.length ||
+      // don't prompt for collab scenes because we don't override local storage
+      roomLinkData ||
+      // otherwise, prompt whether user wants to override current scene
       window.confirm(t("alerts.loadSceneOverridePrompt"))
     ) {
       // Backwards compatibility with legacy url format
@@ -133,7 +94,7 @@ const initializeScene = async (opts: {
       } else if (jsonMatch) {
         scene = await loadScene(jsonMatch[1], jsonMatch[2], initialData);
       }
-      if (!isCollabScene) {
+      if (!roomLinkData) {
         window.history.replaceState({}, APP_NAME, window.location.origin);
       }
     } else {
@@ -150,45 +111,19 @@ const initializeScene = async (opts: {
         });
       }
 
-      isCollabScene = false;
+      roomLinkData = null;
       window.history.replaceState({}, APP_NAME, window.location.origin);
     }
   }
-  if (isCollabScene) {
-    // when joining a room we don't want user's local scene data to be merged
-    // into the remote scene
-    opts.resetScene();
-    const scenePromise = opts.initializeSocketClient();
-
-    try {
-      const [, roomId, roomKey] = getCollaborationLinkData(
-        window.location.href,
-      )!;
-      const elements = await loadFromFirebase(roomId, roomKey);
-      if (elements) {
-        return {
-          elements,
-          commitToHistory: true,
-        };
-      }
-
-      return {
-        ...(await scenePromise),
-        commitToHistory: true,
-      };
-    } catch (error) {
-      // log the error and move on. other peers will sync us the scene.
-      console.error(error);
-    }
-
-    return null;
+  if (roomLinkData) {
+    return opts.collabAPI.initializeSocketClient(roomLinkData);
   } else if (scene) {
     return scene;
   }
   return null;
 };
 
-const ExcalidrawWrapper = () => {
+function ExcalidrawWrapper() {
   // dimensions
   // ---------------------------------------------------------------------------
 
@@ -242,24 +177,16 @@ const ExcalidrawWrapper = () => {
       return;
     }
 
-    initializeScene({
-      resetScene: excalidrawAPI.resetScene,
-      initializeSocketClient: collabAPI.initializeSocketClient,
-    }).then((scene) => {
+    initializeScene({ collabAPI }).then((scene) => {
       initialStatePromiseRef.current.promise.resolve(scene);
     });
 
     const onHashChange = (_: HashChangeEvent) => {
-      if (window.location.hash.length > 1) {
-        initializeScene({
-          resetScene: excalidrawAPI.resetScene,
-          initializeSocketClient: collabAPI.initializeSocketClient,
-        }).then((scene) => {
-          if (scene) {
-            excalidrawAPI.updateScene(scene);
-          }
-        });
-      }
+      initializeScene({ collabAPI }).then((scene) => {
+        if (scene) {
+          excalidrawAPI.updateScene(scene);
+        }
+      });
     };
 
     const titleTimeout = setTimeout(
@@ -285,9 +212,13 @@ const ExcalidrawWrapper = () => {
     elements: readonly ExcalidrawElement[],
     appState: AppState,
   ) => {
-    saveDebounced(elements, appState);
-    if (collabAPI?.isCollaborating) {
+    if (collabAPI?.isCollaborating()) {
       collabAPI.broadcastElements(elements);
+    } else {
+      // collab scenes are persisted to the server, so we don't have to persist
+      // them locally, which has the added benefit of not overwriting whatever
+      // the user was working on before joining
+      saveDebounced(elements, appState);
     }
   };
 
@@ -350,9 +281,8 @@ const ExcalidrawWrapper = () => {
         width={dimensions.width}
         height={dimensions.height}
         initialData={initialStatePromiseRef.current.promise}
-        user={{ name: collabAPI?.username }}
         onCollabButtonClick={collabAPI?.onCollabButtonClick}
-        isCollaborating={collabAPI?.isCollaborating}
+        isCollaborating={collabAPI?.isCollaborating()}
         onPointerUpdate={collabAPI?.onPointerUpdate}
         onExportToBackend={onExportToBackend}
         renderFooter={renderFooter}
@@ -367,7 +297,7 @@ const ExcalidrawWrapper = () => {
       )}
     </>
   );
-};
+}
 
 export default function ExcalidrawApp() {
   return (

src/i18n.ts

@@ -1,5 +1,6 @@
 import fallbackLangData from "./locales/en.json";
 import percentages from "./locales/percentages.json";
+import { ENV } from "./constants";
 
 const COMPLETION_THRESHOLD = 85;
 
@@ -27,6 +28,7 @@ const allLanguages: Language[] = [
   { code: "id-ID", label: "Bahasa Indonesia" },
   { code: "it-IT", label: "Italiano" },
   { code: "ja-JP", label: "日本語" },
+  { code: "kab-KAB", label: "Taqbaylit" },
   { code: "ko-KR", label: "한국어" },
   { code: "my-MM", label: "Burmese" },
   { code: "nb-NO", label: "Norsk bokmål" },
@@ -54,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;
@@ -92,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) ||

src/keys.ts

@@ -21,6 +21,7 @@ export const CODES = {
   V: "KeyV",
   X: "KeyX",
   Z: "KeyZ",
+  R: "KeyR",
 } as const;
 
 export const KEYS = {

src/locales/ar-SA.json

@@ -68,7 +68,7 @@
     "layers": "الطبقات",
     "actions": "الإجراءات",
     "language": "اللغة",
-    "createRoom": "مشاركة الجلسة مباشرة",
+    "liveCollaboration": "",
     "duplicateSelection": "تكرار",
     "untitled": "غير معنون",
     "name": "الاسم",
@@ -77,12 +77,12 @@
     "group": "تحديد مجموعة",
     "ungroup": "إلغاء تحديد مجموعة",
     "collaborators": "المتعاونون",
-    "gridMode": "وضع الشبكة",
+    "showGrid": "",
     "addToLibrary": "أضف إلى المكتبة",
     "removeFromLibrary": "حذف من المكتبة",
-    "libraryLoadingMessage": "جارٍ تحميل المكتبة...",
+    "libraryLoadingMessage": "جارٍ تحميل المكتبة…",
     "libraries": "تصفح المكتبات",
-    "loadingScene": "جاري تحميل المشهد...",
+    "loadingScene": "جاري تحميل المشهد…",
     "align": "محاذاة",
     "alignTop": "محاذاة إلى اﻷعلى",
     "alignBottom": "محاذاة إلى اﻷسفل",
@@ -91,7 +91,8 @@
     "centerVertically": "توسيط عمودي",
     "centerHorizontally": "توسيط أفقي",
     "distributeHorizontally": "التوزيع الأفقي",
-    "distributeVertically": "التوزيع عمودياً"
+    "distributeVertically": "التوزيع عمودياً",
+    "viewMode": ""
   },
   "buttons": {
     "clearReset": "إعادة تعيين اللوحة",
@@ -116,7 +117,7 @@
     "edit": "تعديل",
     "undo": "تراجع",
     "redo": "إعادة تنفيذ",
-    "roomDialog": "بدء المشاركة الحية",
+    "resetLibrary": "",
     "createNewRoom": "إنشاء غرفة جديدة",
     "fullScreen": "شاشة كاملة",
     "darkMode": "الوضع المظلم",
@@ -135,10 +136,12 @@
     "decryptFailed": "تعذر فك تشفير البيانات.",
     "uploadedSecurly": "تم تأمين التحميل بتشفير النهاية إلى النهاية، مما يعني أن خادوم Excalidraw والأطراف الثالثة لا يمكنها قراءة المحتوى.",
     "loadSceneOverridePrompt": "تحميل الرسم الخارجي سيحل محل المحتوى الموجود لديك. هل ترغب في المتابعة؟",
+    "collabStopOverridePrompt": "",
     "errorLoadingLibrary": "حصل خطأ أثناء تحميل مكتبة الطرف الثالث.",
     "confirmAddLibrary": "هذا سيضيف {{numShapes}} شكل إلى مكتبتك. هل أنت متأكد؟",
     "imageDoesNotContainScene": "استيراد الصور غير مدعوم في الوقت الراهن.\n\nهل تريد استيراد مشهد؟ لا يبدو أن هذه الصورة تحتوي على أي بيانات مشهد. هل قمت بسماح هذا أثناء التصدير؟",
-    "cannotRestoreFromImage": "تعذر استعادة المشهد من ملف الصورة"
+    "cannotRestoreFromImage": "تعذر استعادة المشهد من ملف الصورة",
+    "resetLibrary": ""
   },
   "toolBar": {
     "selection": "تحديد",
@@ -233,10 +236,16 @@
     "storage": "التخزين",
     "title": "إحصائيات للمهووسين",
     "total": "المجموع",
+    "version": "",
+    "versionCopy": "",
+    "versionNotAvailable": "",
     "width": "العرض"
   },
   "toast": {
     "copyStyles": "",
-    "copyToClipboardAsPng": ""
+    "copyToClipboard": "",
+    "copyToClipboardAsPng": "",
+    "fileSaved": "",
+    "fileSavedToFilename": ""
   }
 }

src/locales/bg-BG.json

@@ -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,12 +77,12 @@
     "group": "Групирай селекцията",
     "ungroup": "Спри групирането на селекцията",
     "collaborators": "Сътрудници",
-    "gridMode": "Решетъчен режим",
+    "showGrid": "Показване на мрежа",
     "addToLibrary": "Добавяне към библиотеката",
     "removeFromLibrary": "Премахване от библиотеката",
-    "libraryLoadingMessage": "Зареждане на библиотеката...",
+    "libraryLoadingMessage": "Зареждане на библиотеката…",
     "libraries": "Разглеждане на библиотеките",
-    "loadingScene": "Зареждане на сцена...",
+    "loadingScene": "Зареждане на сцена…",
     "align": "Подравняване",
     "alignTop": "Подравняване отгоре",
     "alignBottom": "Подравняване отдолу",
@@ -91,7 +91,8 @@
     "centerVertically": "Центрирай вертикално",
     "centerHorizontally": "Центрирай хоризонтално",
     "distributeHorizontally": "Разпредели хоризонтално",
-    "distributeVertically": "Разпредели вертикално"
+    "distributeVertically": "Разпредели вертикално",
+    "viewMode": "Изглед"
   },
   "buttons": {
     "clearReset": "Нулиране на платно",
@@ -116,7 +117,7 @@
     "edit": "Редактиране",
     "undo": "Отмяна",
     "redo": "Повтори",
-    "roomDialog": "Започнете сътрудничество на живо",
+    "resetLibrary": "",
     "createNewRoom": "Създай нова стая",
     "fullScreen": "На цял екран",
     "darkMode": "Тъмен режим",
@@ -135,10 +136,12 @@
     "decryptFailed": "Данните не можаха да се дешифрират.",
     "uploadedSecurly": "Качването е защитено с криптиране от край до край, което означава, че сървърът Excalidraw и трети страни не могат да четат съдържанието.",
     "loadSceneOverridePrompt": "Зареждането на външна рисунка ще презапише настоящото ви съдържание. Желаете ли да продължите?",
+    "collabStopOverridePrompt": "Прекратяването на сесията ще презапише предишната, локално запазена, рисунка. Сигурни ли сте?\n\n(Ако искате да продължите с локалната рисунка, просто затворете таба на браузъра.)",
     "errorLoadingLibrary": "Възникна грешка при зареждането на външна библиотека.",
     "confirmAddLibrary": "Ще се добавят {{numShapes}} фигура(и) във вашата библиотека. Сигурни ли сте?",
     "imageDoesNotContainScene": "Импортирането на картинки не се поддържва в момента.\n\nИскате да импортнете сцена? Тази картинка не съдържа данни от сцена. Разрешили ли сте последното при експортирането?",
-    "cannotRestoreFromImage": "Не може да бъде възстановена сцена от този файл"
+    "cannotRestoreFromImage": "Не може да бъде възстановена сцена от този файл",
+    "resetLibrary": ""
   },
   "toolBar": {
     "selection": "Селекция",
@@ -200,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": {
@@ -233,10 +236,16 @@
     "storage": "Съхранение на данни",
     "title": "Статистика за хакери",
     "total": "Общо",
+    "version": "Версия",
+    "versionCopy": "Настисни за да копираш",
+    "versionNotAvailable": "Версията не е налична",
     "width": "Широчина"
   },
   "toast": {
-    "copyStyles": "",
-    "copyToClipboardAsPng": ""
+    "copyStyles": "Копирани стилове.",
+    "copyToClipboard": "Копирано в клипборда.",
+    "copyToClipboardAsPng": "Копирано в клипборда като PNG.",
+    "fileSaved": "",
+    "fileSavedToFilename": ""
   }
 }

src/locales/ca-ES.json

@@ -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,12 +77,12 @@
     "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...",
+    "libraryLoadingMessage": "Carregant la biblioteca…",
     "libraries": "Explorar biblioteques",
-    "loadingScene": "Carregant escena...",
+    "loadingScene": "Carregant escena…",
     "align": "Alinear",
     "alignTop": "Alinear a dalt",
     "alignBottom": "Alinear a baix",
@@ -91,7 +91,8 @@
     "centerVertically": "Centrar verticalment",
     "centerHorizontally": "Centrar horitzontalment",
     "distributeHorizontally": "Distribuir horitzontalment",
-    "distributeVertically": "Distribuir verticalment"
+    "distributeVertically": "Distribuir verticalment",
+    "viewMode": ""
   },
   "buttons": {
     "clearReset": "Netejar el llenç",
@@ -116,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",
@@ -135,10 +136,12 @@
     "decryptFailed": "No s'ha pogut desencriptar.",
     "uploadedSecurly": "La càrrega s'ha assegurat amb xifratge punta a punta, cosa que significa que el servidor Excalidraw i tercers no poden llegir el contingut.",
     "loadSceneOverridePrompt": "Si carregas aquest dibuix extern, substituirá el que tens. Vols continuar?",
+    "collabStopOverridePrompt": "",
     "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ó",
@@ -233,10 +236,16 @@
     "storage": "Emmagatzematge",
     "title": "Estadístiques per nerds",
     "total": "Total",
+    "version": "",
+    "versionCopy": "",
+    "versionNotAvailable": "",
     "width": "Amplada"
   },
   "toast": {
     "copyStyles": "",
-    "copyToClipboardAsPng": ""
+    "copyToClipboard": "",
+    "copyToClipboardAsPng": "",
+    "fileSaved": "",
+    "fileSavedToFilename": ""
   }
 }

src/locales/de-DE.json

@@ -68,7 +68,7 @@
     "layers": "Ebenen",
     "actions": "Aktionen",
     "language": "Sprache",
-    "createRoom": "Live-Kollaborationssitzung teilen",
+    "liveCollaboration": "Live-Zusammenarbeit",
     "duplicateSelection": "Duplizieren",
     "untitled": "Unbenannt",
     "name": "Name",
@@ -76,13 +76,13 @@
     "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...",
+    "libraryLoadingMessage": "Lade Bibliothek…",
     "libraries": "Bibliotheken durchsuchen",
-    "loadingScene": "Lade Zeichnung...",
+    "loadingScene": "Lade Zeichnung…",
     "align": "Ausrichten",
     "alignTop": "Obere Kanten",
     "alignBottom": "Untere Kanten",
@@ -91,7 +91,8 @@
     "centerVertically": "Vertikal zentrieren",
     "centerHorizontally": "Horizontal zentrieren",
     "distributeHorizontally": "Horizontal verteilen",
-    "distributeVertically": "Vertikal verteilen"
+    "distributeVertically": "Vertikal verteilen",
+    "viewMode": "Ansichtsmodus"
   },
   "buttons": {
     "clearReset": "Zeichenfläche löschen & Hintergrundfarbe zurücksetzen",
@@ -100,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",
@@ -116,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",
@@ -135,10 +136,12 @@
     "decryptFailed": "Daten konnten nicht entschlüsselt werden.",
     "uploadedSecurly": "Der Upload wurde mit Ende-zu-Ende-Verschlüsselung gespeichert. Weder Excalidraw noch Dritte können den Inhalt einsehen.",
     "loadSceneOverridePrompt": "Das Laden der externen Zeichnung ersetzt den vorhandenen Inhalt. Möchtest Du fortfahren?",
+    "collabStopOverridePrompt": "Das Stoppen der Sitzung wird Deine vorherige, lokal gespeicherte Zeichnung überschreiben. Bist Du sicher?\n\n(Wenn Du Deine lokale Zeichnung behalten möchtest, schließe einfach stattdessen den Browser-Tab.)",
     "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",
@@ -233,10 +236,16 @@
     "storage": "Speicher",
     "title": "Statistiken für Nerds",
     "total": "Gesamt",
+    "version": "Version",
+    "versionCopy": "Zum Kopieren klicken",
+    "versionNotAvailable": "Version nicht verfügbar",
     "width": "Breite"
   },
   "toast": {
     "copyStyles": "Formatierung kopiert.",
-    "copyToClipboardAsPng": "In die Zwischenablage als PNG kopiert."
+    "copyToClipboard": "In die Zwischenablage kopiert.",
+    "copyToClipboardAsPng": "In die Zwischenablage als PNG kopiert.",
+    "fileSaved": "Datei gespeichert.",
+    "fileSavedToFilename": "Als {filename} gespeichert"
   }
 }

src/locales/el-GR.json

@@ -68,7 +68,7 @@
     "layers": "Στρώματα",
     "actions": "Ενέργειες",
     "language": "Γλώσσα",
-    "createRoom": "Έναρξη ζωντανής συνεδρίας",
+    "liveCollaboration": "Ζωντανή συνεργασία",
     "duplicateSelection": "Δημιουργία αντιγράφου",
     "untitled": "Χωρίς τίτλο",
     "name": "Όνομα",
@@ -77,12 +77,12 @@
     "group": "Δημιουργία ομάδας από επιλογή",
     "ungroup": "Κατάργηση ομάδας από επιλογή",
     "collaborators": "Συνεργάτες",
-    "gridMode": "Εμφάνιση σε πλέγμα",
+    "showGrid": "Προβολή πλέγματος",
     "addToLibrary": "Προσθήκη στη βιβλιοθήκη",
     "removeFromLibrary": "Αφαίρεση από τη βιβλιοθήκη",
-    "libraryLoadingMessage": "Φόρτωση βιβλιοθήκης...",
+    "libraryLoadingMessage": "Φόρτωση βιβλιοθήκης…",
     "libraries": "Άλλες βιβλιοθήκες",
-    "loadingScene": "Φόρτωση σκηνής...",
+    "loadingScene": "Φόρτωση σκηνής…",
     "align": "Στοίχιση",
     "alignTop": "Στοίχιση πάνω",
     "alignBottom": "Στοίχιση κάτω",
@@ -91,7 +91,8 @@
     "centerVertically": "Κέντρο κάθετα",
     "centerHorizontally": "Κέντρο οριζόντια",
     "distributeHorizontally": "Οριζόντια κατανομή",
-    "distributeVertically": "Κατακόρυφη κατανομή"
+    "distributeVertically": "Κατακόρυφη κατανομή",
+    "viewMode": "Λειτουργία προβολής"
   },
   "buttons": {
     "clearReset": "Επαναφορά του καμβά",
@@ -116,13 +117,13 @@
     "edit": "Επεξεργασία",
     "undo": "Αναίρεση",
     "redo": "Επαναφορά",
-    "roomDialog": "Έναρξη ζωντανής συνεργασίας",
+    "resetLibrary": "Καθαρισμός βιβλιοθήκης",
     "createNewRoom": "Δημιουργία νέου χώρου",
     "fullScreen": "Πλήρης οθόνη",
     "darkMode": "Σκοτεινή λειτουργία",
     "lightMode": "Φωτεινή λειτουργία",
     "zenMode": "Λειτουργία Zεν",
-    "exitZenMode": "Έξοδος απο την λειτουργία Zen"
+    "exitZenMode": "Έξοδος από την λειτουργία Zen"
   },
   "alerts": {
     "clearReset": "Αυτό θα σβήσει ολόκληρο τον καμβά. Είσαι σίγουρος;",
@@ -135,10 +136,12 @@
     "decryptFailed": "Δεν ήταν δυνατή η αποκρυπτογράφηση δεδομένων.",
     "uploadedSecurly": "Η μεταφόρτωση έχει εξασφαλιστεί με κρυπτογράφηση από άκρο σε άκρο, πράγμα που σημαίνει ότι ο διακομιστής Excalidraw και τρίτα μέρη δεν μπορούν να διαβάσουν το περιεχόμενο.",
     "loadSceneOverridePrompt": "Η φόρτωση εξωτερικού σχεδίου θα αντικαταστήσει το υπάρχον περιεχόμενο. Επιθυμείτε να συνεχίσετε;",
+    "collabStopOverridePrompt": "Η διακοπή της συνεδρίας θα αντικαταστήσει το προηγούμενο, τοπικά αποθηκευμένο σχέδιο. Είστε σίγουροι?\n\n(Αν θέλετε να διατηρήσετε το τοπικό σας σχέδιο, απλά κλείστε την καρτέλα του προγράμματος περιήγησης.)",
     "errorLoadingLibrary": "Υπήρξε ένα σφάλμα κατά τη φόρτωση της βιβλιοθήκης τρίτου μέρους.",
-    "confirmAddLibrary": "Αυτό θα προσθέσει {{numShapes}} σχήμα(τα) στη βιβιλιοθήκη σας. Είστε σίγουροι;",
+    "confirmAddLibrary": "Αυτό θα προσθέσει {{numShapes}} σχήμα(τα) στη βιβλιοθήκη σας. Είστε σίγουροι;",
     "imageDoesNotContainScene": "Η εισαγωγή εικόνων δεν υποστηρίζεται αυτή τη στιγμή.\n\nΜήπως θέλετε να εισαγάγετε μια σκηνή; Αυτή η εικόνα δεν φαίνεται να περιέχει δεδομένα σκηνής. Έχετε ενεργοποιήσει αυτό κατά την εξαγωγή;",
-    "cannotRestoreFromImage": "Η σκηνή δεν ήταν δυνατό να αποκατασταθεί από αυτό το αρχείο εικόνας"
+    "cannotRestoreFromImage": "Η σκηνή δεν ήταν δυνατό να αποκατασταθεί από αυτό το αρχείο εικόνας",
+    "resetLibrary": "Αυτό θα καθαρίσει τη βιβλιοθήκη σας. Είστε σίγουροι;"
   },
   "toolBar": {
     "selection": "Επιλογή",
@@ -159,7 +162,7 @@
   },
   "hints": {
     "linearElement": "Κάνε κλικ για να ξεκινήσεις πολλαπλά σημεία, σύρε για μια γραμμή",
-    "freeDraw": "Κάντε κλικ και σύρατε, απελευθερώσατε όταν έχετε τελειώσει",
+    "freeDraw": "Κάντε κλικ και σύρτε, απελευθερώσατε όταν έχετε τελειώσει",
     "text": "Tip: μπορείτε επίσης να προσθέστε κείμενο με διπλό-κλικ οπουδήποτε με το εργαλείο επιλογών",
     "linearElementMulti": "Κάνε κλικ στο τελευταίο σημείο ή πάτησε Escape ή Enter για να τελειώσεις",
     "lockAngle": "Μπορείτε να περιορίσετε τη γωνία κρατώντας πατημένο το SHIFT",
@@ -182,7 +185,7 @@
     "clearCanvasCaveat": " Αυτό θα προκαλέσει απώλεια της δουλειάς σου ",
     "trackedToSentry_pre": "Το σφάλμα με αναγνωριστικό ",
     "trackedToSentry_post": " παρακολουθήθηκε στο σύστημά μας.",
-    "openIssueMessage_pre": "Ήμασταν πολύ προσεκτικοί για να μην συμπεριλάβουμε τις πληροφορίες της σκηνής σου στο σφάλμα. Αν η σκηνή σου δεν είναι ιδιωτική, παρακαλώ σκέψουν να ακολουθήσεις το δικό μας ",
+    "openIssueMessage_pre": "Ήμασταν πολύ προσεκτικοί για να μην συμπεριλάβουμε τις πληροφορίες της σκηνής σου στο σφάλμα. Αν η σκηνή σου δεν είναι ιδιωτική, παρακαλώ σκέψου να ακολουθήσεις το δικό μας ",
     "openIssueMessage_button": "ανιχνευτής σφαλμάτων.",
     "openIssueMessage_post": " Παρακαλώ να συμπεριλάβετε τις παρακάτω πληροφορίες, αντιγράφοντας και επικολλώντας το ζήτημα στο GitHub.",
     "sceneContent": "Περιεχόμενο σκηνής:"
@@ -221,7 +224,7 @@
     "zoomToSelection": "Ζουμ στην επιλογή"
   },
   "encrypted": {
-    "tooltip": "Τα σχέδιά σου είναι κρυπτογραφημένα από άκρο σε άκρο, έτσι δεν θα έιναι ποτέ ορατά μέσα από τους διακομιστές του Excalidraw."
+    "tooltip": "Τα σχέδιά σου είναι κρυπτογραφημένα από άκρο σε άκρο, έτσι δεν θα είναι ποτέ ορατά μέσα από τους διακομιστές του Excalidraw."
   },
   "stats": {
     "angle": "Γωνία",
@@ -233,10 +236,16 @@
     "storage": "Χώρος",
     "title": "Στατιστικά για σπασίκλες",
     "total": "Σύνολο ",
+    "version": "Έκδοση",
+    "versionCopy": "Κάνε κλικ για αντιγραφή",
+    "versionNotAvailable": "Έκδοση μη διαθέσιμη",
     "width": "Πλάτος"
   },
   "toast": {
     "copyStyles": "Αντιγράφηκαν στυλ.",
-    "copyToClipboardAsPng": "Αντιγράφτηκε στο πρόχειρο ως PNG."
+    "copyToClipboard": "Αντιγράφηκε στο πρόχειρο.",
+    "copyToClipboardAsPng": "Αντιγράφτηκε στο πρόχειρο ως PNG.",
+    "fileSaved": "Το αρχείο αποθηκεύτηκε.",
+    "fileSavedToFilename": "Αποθηκεύτηκε στο {filename}"
   }
 }

src/locales/en.json

@@ -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",
@@ -77,12 +77,12 @@
     "group": "Group selection",
     "ungroup": "Ungroup selection",
     "collaborators": "Collaborators",
-    "gridMode": "Grid mode",
+    "showGrid": "Show grid",
     "addToLibrary": "Add to library",
     "removeFromLibrary": "Remove from library",
-    "libraryLoadingMessage": "Loading library...",
+    "libraryLoadingMessage": "Loading library…",
     "libraries": "Browse libraries",
-    "loadingScene": "Loading scene...",
+    "loadingScene": "Loading scene…",
     "align": "Align",
     "alignTop": "Align top",
     "alignBottom": "Align bottom",
@@ -91,7 +91,8 @@
     "centerVertically": "Center vertically",
     "centerHorizontally": "Center horizontally",
     "distributeHorizontally": "Distribute horizontally",
-    "distributeVertically": "Distribute vertically"
+    "distributeVertically": "Distribute vertically",
+    "viewMode": "View mode"
   },
   "buttons": {
     "clearReset": "Reset the canvas",
@@ -116,7 +117,7 @@
     "edit": "Edit",
     "undo": "Undo",
     "redo": "Redo",
-    "roomDialog": "Start live collaboration",
+    "resetLibrary": "Reset library",
     "createNewRoom": "Create new room",
     "fullScreen": "Full screen",
     "darkMode": "Dark mode",
@@ -135,10 +136,12 @@
     "decryptFailed": "Couldn't decrypt data.",
     "uploadedSecurly": "The upload has been secured with end-to-end encryption, which means that Excalidraw server and third parties can't read the content.",
     "loadSceneOverridePrompt": "Loading external drawing will replace your existing content. Do you wish to continue?",
+    "collabStopOverridePrompt": "Stopping the session will overwrite your previous, locally stored drawing. Are you sure?\n\n(If you want to keep your local drawing, simply close the browser tab instead.)",
     "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",
@@ -233,10 +236,16 @@
     "storage": "Storage",
     "title": "Stats for nerds",
     "total": "Total",
+    "version": "Version",
+    "versionCopy": "Click to copy",
+    "versionNotAvailable": "Version not available",
     "width": "Width"
   },
   "toast": {
     "copyStyles": "Copied styles.",
-    "copyToClipboardAsPng": "Copied to clipboard as PNG."
+    "copyToClipboard": "Copied to clipboard.",
+    "copyToClipboardAsPng": "Copied to clipboard as PNG.",
+    "fileSaved": "File saved.",
+    "fileSavedToFilename": "Saved to {filename}"
   }
 }

src/locales/es-ES.json

@@ -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,12 +77,12 @@
     "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 biblioteca...",
+    "libraryLoadingMessage": "Cargando librería…",
     "libraries": "Explorar bibliotecas",
-    "loadingScene": "Cargando escena...",
+    "loadingScene": "Cargando escena…",
     "align": "Alinear",
     "alignTop": "Alineación superior",
     "alignBottom": "Alineación inferior",
@@ -91,7 +91,8 @@
     "centerVertically": "Centrar verticalmente",
     "centerHorizontally": "Centrar horizontalmente",
     "distributeHorizontally": "Distribuir horizontalmente",
-    "distributeVertically": "Distribuir verticalmente"
+    "distributeVertically": "Distribuir verticalmente",
+    "viewMode": "Modo presentación"
   },
   "buttons": {
     "clearReset": "Limpiar lienzo y reiniciar el color de fondo",
@@ -116,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",
@@ -135,10 +136,12 @@
     "decryptFailed": "No se pudieron descifrar los datos.",
     "uploadedSecurly": "La carga ha sido asegurada con cifrado de principio a fin, lo que significa que el servidor de Excalidraw y terceros no pueden leer el contenido.",
     "loadSceneOverridePrompt": "Si carga este dibujo externo, reemplazará el que tiene. ¿Desea continuar?",
+    "collabStopOverridePrompt": "Detener la sesión sobrescribirá su dibujo anterior almacenado en local. ¿Estás seguro?\n\n(Si quieres mantener tu dibujo en local, simplemente cierre la pestaña del navegador en su lugar.)",
     "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",
@@ -233,10 +236,16 @@
     "storage": "Almacenamiento",
     "title": "Estadísticas para nerds",
     "total": "Total",
+    "version": "Versión",
+    "versionCopy": "Clic para copiar",
+    "versionNotAvailable": "Versión no disponible",
     "width": "Ancho"
   },
   "toast": {
     "copyStyles": "Estilos copiados.",
-    "copyToClipboardAsPng": "Copiado al portapapeles como PNG."
+    "copyToClipboard": "Copiado en el portapapeles.",
+    "copyToClipboardAsPng": "Copiado al portapapeles como PNG.",
+    "fileSaved": "Archivo guardado.",
+    "fileSavedToFilename": "Guardado en {filename}"
   }
 }

src/locales/fa-IR.json

@@ -68,7 +68,7 @@
     "layers": "لایه ها",
     "actions": "عملیات",
     "language": "زبان",
-    "createRoom": "اشتراک گذاری جلسه همکاری زنده",
+    "liveCollaboration": "",
     "duplicateSelection": "تکرار",
     "untitled": "بدون عنوان",
     "name": "نام",
@@ -77,12 +77,12 @@
     "group": "گروهبندی انتخابها",
     "ungroup": "حذف گروهبندی انتخابها",
     "collaborators": "همکاران",
-    "gridMode": "حالت شبکه ای",
+    "showGrid": "",
     "addToLibrary": "افزودن به کتابخانه",
     "removeFromLibrary": "حذف از کتابخانه",
-    "libraryLoadingMessage": "بارگذاری کتابخانه...",
+    "libraryLoadingMessage": "بارگذاری کتابخانه…",
     "libraries": "مرور کردن کتابخانه ها",
-    "loadingScene": "باگذاری صحنه...",
+    "loadingScene": "باگذاری صحنه…",
     "align": "تراز",
     "alignTop": "تراز به بالا",
     "alignBottom": "تراز به پایین",
@@ -91,7 +91,8 @@
     "centerVertically": "وسط قرار دادن به صورت عمودی",
     "centerHorizontally": "وسط قرار دادن به صورت افقی",
     "distributeHorizontally": "توزیع کردن به صورت افقی",
-    "distributeVertically": "توزیع کردن به صورت عمودی"
+    "distributeVertically": "توزیع کردن به صورت عمودی",
+    "viewMode": ""
   },
   "buttons": {
     "clearReset": "پاکسازی بوم نقاشی",
@@ -116,7 +117,7 @@
     "edit": "ویرایش",
     "undo": "بازگرد",
     "redo": "از سر",
-    "roomDialog": "همکاری آنلاین را شروع کنید",
+    "resetLibrary": "",
     "createNewRoom": "ایجاد یک اتاق جدید",
     "fullScreen": "تمام‌صفحه",
     "darkMode": "حالت تیره",
@@ -135,10 +136,12 @@
     "decryptFailed": "رمزگشایی داده ها امکان پذیر نیست.",
     "uploadedSecurly": "آپلود با رمزگذاری دو طرفه انجام میشود، به این معنی که سرور Excalidraw و اشخاص ثالث نمی توانند مطالب شما را بخوانند.",
     "loadSceneOverridePrompt": "بارگزاری یک طرح خارجی محتوای فعلی رو از بین میبرد. آیا میخواهید ادامه دهید؟",
+    "collabStopOverridePrompt": "",
     "errorLoadingLibrary": "خطایی در بارگذاری کتابخانه ثالث وجود داشت.",
     "confirmAddLibrary": "{{numShapes}} از اشکال به کتابخانه شما اضافه خواهد شد. مطمئن هستید؟",
     "imageDoesNotContainScene": "وارد کردن تصویر در این لحظه امکان پذیر نمی باشد.\nآیا مایل به وارد کردن یک صحنه هستید؟ این تصویر به نظر می رسد که فاقد هرگونه اطلاعاتی مربوط به صحنه باشد. آیا این گزینه را در زمان وارد کردن تصویر فعال کرده اید؟",
-    "cannotRestoreFromImage": "صحنه را نمی توان از این فایل تصویری بازیابی کرد"
+    "cannotRestoreFromImage": "صحنه را نمی توان از این فایل تصویری بازیابی کرد",
+    "resetLibrary": ""
   },
   "toolBar": {
     "selection": "گزینش",
@@ -233,10 +236,16 @@
     "storage": "حافظه",
     "title": "آمار برای نردها",
     "total": "مجموع",
+    "version": "",
+    "versionCopy": "",
+    "versionNotAvailable": "",
     "width": "عرض"
   },
   "toast": {
     "copyStyles": "کپی سبک.",
-    "copyToClipboardAsPng": "کپی در حافطه موقت به صورت PNG."
+    "copyToClipboard": "",
+    "copyToClipboardAsPng": "کپی در حافطه موقت به صورت PNG.",
+    "fileSaved": "",
+    "fileSavedToFilename": ""
   }
 }

src/locales/fi-FI.json

@@ -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,12 +77,12 @@
     "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...",
+    "libraryLoadingMessage": "Ladataan kirjastoa…",
     "libraries": "Selaa kirjastoja",
-    "loadingScene": "Ladataan työtä...",
+    "loadingScene": "Ladataan työtä…",
     "align": "Tasaa",
     "alignTop": "Tasaa ylös",
     "alignBottom": "Tasaa alas",
@@ -91,7 +91,8 @@
     "centerVertically": "Keskitä pystysuunnassa",
     "centerHorizontally": "Keskitä vaakasuunnassa",
     "distributeHorizontally": "Jaa vaakasuunnassa",
-    "distributeVertically": "Jaa pystysuunnassa"
+    "distributeVertically": "Jaa pystysuunnassa",
+    "viewMode": "Katselutila"
   },
   "buttons": {
     "clearReset": "Tyhjennä piirtoalue",
@@ -116,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",
@@ -135,10 +136,12 @@
     "decryptFailed": "Salauksen purkaminen epäonnistui.",
     "uploadedSecurly": "Lähetys on turvattu päästä päähän salauksella. Excalidrawin palvelin ja kolmannet osapuolet eivät voi lukea sisältöä.",
     "loadSceneOverridePrompt": "Ulkopuolisen piirroksen lataaminen korvaa nykyisen sisältösi. Haluatko jatkaa?",
+    "collabStopOverridePrompt": "Istunnon lopettaminen korvaa aiemman, paikallisesti tallennetun piirustuksen. Oletko varma?\n\n(Jos haluat pitää paikallisen piirustuksen, sulje selaimen välilehti sen sijaan.)",
     "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",
@@ -233,10 +236,16 @@
     "storage": "Tallennustila",
     "title": "Nörttien tilastot",
     "total": "Yhteensä",
+    "version": "Versio",
+    "versionCopy": "Klikkaa kopioidaksesi",
+    "versionNotAvailable": "Versio ei saatavilla",
     "width": "Leveys"
   },
   "toast": {
     "copyStyles": "Tyylit kopioitu.",
-    "copyToClipboardAsPng": "Kopioitu leikepöydälle PNG-tiedostona."
+    "copyToClipboard": "Kopioitu leikepöydälle.",
+    "copyToClipboardAsPng": "Kopioitu leikepöydälle PNG-tiedostona.",
+    "fileSaved": "Tiedosto tallennettu.",
+    "fileSavedToFilename": "Tallennettu kohteeseen {filename}"
   }
 }

src/locales/fr-FR.json

@@ -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,12 +77,12 @@
     "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...",
+    "libraryLoadingMessage": "Chargement de la bibliothèque…",
     "libraries": "Parcourir les bibliothèques",
-    "loadingScene": "Chargement de la scène...",
+    "loadingScene": "Chargement de la scène…",
     "align": "Aligner",
     "alignTop": "Aligner en haut",
     "alignBottom": "Aligner en bas",
@@ -91,7 +91,8 @@
     "centerVertically": "Centrer verticalement",
     "centerHorizontally": "Centrer horizontalement",
     "distributeHorizontally": "Distribuer horizontalement",
-    "distributeVertically": "Distribuer verticalement"
+    "distributeVertically": "Distribuer verticalement",
+    "viewMode": "Mode présentation"
   },
   "buttons": {
     "clearReset": "Réinitialiser le canevas",
@@ -116,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",
@@ -135,10 +136,12 @@
     "decryptFailed": "Les données n'ont pas pu être déchiffrées.",
     "uploadedSecurly": "Le téléchargement a été sécurisé avec un chiffrement de bout en bout, ce qui signifie que ni Excalidraw ni personne d'autre ne peut en lire le contenu.",
     "loadSceneOverridePrompt": "Le chargement d'un dessin externe remplacera votre contenu actuel. Souhaitez-vous continuer ?",
+    "collabStopOverridePrompt": "Arrêter la session écrasera votre précédent dessin stocké localement. Êtes-vous sûr·e ?\n\n(Si vous voulez garder votre dessin local, fermez simplement l'onglet du navigateur à la place.)",
     "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",
@@ -229,14 +232,20 @@
     "elements": "Éléments",
     "height": "Hauteur",
     "scene": "Scène",
-    "selected": "Sélectionné",
+    "selected": "Sélection",
     "storage": "Stockage",
     "title": "Stats pour les nerds",
     "total": "Total",
+    "version": "Version",
+    "versionCopy": "Cliquer pour copier",
+    "versionNotAvailable": "Version non disponible",
     "width": "Largeur"
   },
   "toast": {
     "copyStyles": "Styles copiés.",
-    "copyToClipboardAsPng": "Copié vers le presse-papier en PNG."
+    "copyToClipboard": "Copié vers le presse-papiers.",
+    "copyToClipboardAsPng": "Copié vers le presse-papier en PNG.",
+    "fileSaved": "Fichier enregistré.",
+    "fileSavedToFilename": "Enregistré sous {filename}"
   }
 }

src/locales/he-IL.json

@@ -68,7 +68,7 @@
     "layers": "שכבות",
     "actions": "פעולות",
     "language": "שפה",
-    "createRoom": "התחל שיתוף פעולה חי",
+    "liveCollaboration": "",
     "duplicateSelection": "שכפל",
     "untitled": "ללא כותרת",
     "name": "שם",
@@ -77,12 +77,12 @@
     "group": "אחד לקבוצה",
     "ungroup": "פרק קבוצה",
     "collaborators": "שותפים",
-    "gridMode": "מצב רשת",
+    "showGrid": "",
     "addToLibrary": "הוסף לספריה",
     "removeFromLibrary": "הסר מספריה",
-    "libraryLoadingMessage": "טוען ספריה...",
+    "libraryLoadingMessage": "טוען ספריה…",
     "libraries": "דפדף בספריות",
-    "loadingScene": "טוען תצוגה...",
+    "loadingScene": "טוען תצוגה…",
     "align": "יישר",
     "alignTop": "יישר למעלה",
     "alignBottom": "יישר למטה",
@@ -91,7 +91,8 @@
     "centerVertically": "מרכז אנכית",
     "centerHorizontally": "מרכז אופקית",
     "distributeHorizontally": "חלוקה אופקית",
-    "distributeVertically": "חלוקה אנכית"
+    "distributeVertically": "חלוקה אנכית",
+    "viewMode": ""
   },
   "buttons": {
     "clearReset": "אפס את הלוח",
@@ -116,7 +117,7 @@
     "edit": "ערוך",
     "undo": "בטל",
     "redo": "בצע מחדש",
-    "roomDialog": "התחל שיתוף חי",
+    "resetLibrary": "",
     "createNewRoom": "צור חדר",
     "fullScreen": "מסך מלא",
     "darkMode": "מצב כהה",
@@ -135,10 +136,12 @@
     "decryptFailed": "לא ניתן לפענח מידע.",
     "uploadedSecurly": "ההעלאה הוצפנה מקצה לקצה, ולכן שרת Excalidraw וצד שלישי לא יכולים לקרוא את התוכן.",
     "loadSceneOverridePrompt": "טעינה של ציור חיצוני תחליף את התוכן הקיים שלך. האם תרצה להמשיך?",
+    "collabStopOverridePrompt": "",
     "errorLoadingLibrary": "קרתה שגיאה בטעינת הספריה החיצונית.",
     "confirmAddLibrary": "הפעולה תוסיף {{numShapes}} צורה(ות) לספריה שלך. האם אתה בטוח?",
     "imageDoesNotContainScene": "אין תמיכה בייבוא תמונות כעת.\n\nהאם אתה רוצה לייבא תצוגה? התמונה הזאת אינה מכילה מידע על תצוגה. האם הפעלת את האפשרות הזאת בזמן הוצאת המידע?",
-    "cannotRestoreFromImage": "לא הצלחנו לשחזר את התצוגה מקובץ התמונה"
+    "cannotRestoreFromImage": "לא הצלחנו לשחזר את התצוגה מקובץ התמונה",
+    "resetLibrary": ""
   },
   "toolBar": {
     "selection": "בחירה",
@@ -233,10 +236,16 @@
     "storage": "אחסון",
     "title": "סטטיסטיקות לחנונים",
     "total": "סה״כ",
+    "version": "",
+    "versionCopy": "",
+    "versionNotAvailable": "",
     "width": "רוחב"
   },
   "toast": {
     "copyStyles": "",
-    "copyToClipboardAsPng": ""
+    "copyToClipboard": "",
+    "copyToClipboardAsPng": "",
+    "fileSaved": "",
+    "fileSavedToFilename": ""
   }
 }

src/locales/hi-IN.json

@@ -68,7 +68,7 @@
     "layers": "परतें",
     "actions": "कार्रवाई",
     "language": "भाषा",
-    "createRoom": "अधिवेशन",
+    "liveCollaboration": "",
     "duplicateSelection": "डुप्लिकेट",
     "untitled": "अशीर्षित",
     "name": "नाम",
@@ -77,7 +77,7 @@
     "group": "समूह चयन",
     "ungroup": "समूह चयन असमूहीकृत करें",
     "collaborators": "सहयोगी",
-    "gridMode": "ग्रिड मॉड",
+    "showGrid": "",
     "addToLibrary": "लाइब्रेरी से जोड़ें",
     "removeFromLibrary": "लाइब्रेरी से निकालें",
     "libraryLoadingMessage": "लाइब्रेरी खुल रही है",
@@ -91,7 +91,8 @@
     "centerVertically": "लंबवत केन्द्रित",
     "centerHorizontally": "क्षैतिज केन्द्रित",
     "distributeHorizontally": "क्षैतिज रूप से वितरित करें",
-    "distributeVertically": "खड़ी रूप से वितरित करें"
+    "distributeVertically": "खड़ी रूप से वितरित करें",
+    "viewMode": ""
   },
   "buttons": {
     "clearReset": "कैनवास रीसेट करें",
@@ -116,7 +117,7 @@
     "edit": "संशोधन करें",
     "undo": "पूर्ववत् करें",
     "redo": "फिर से करें",
-    "roomDialog": "लाइव सहयोग शुरू करें",
+    "resetLibrary": "",
     "createNewRoom": "एक नया कमरा बनाएं",
     "fullScreen": "पूरी स्क्रीन",
     "darkMode": "डार्क मोड",
@@ -135,10 +136,12 @@
     "decryptFailed": "डेटा को डिक्रिप्ट नहीं किया जा सका।",
     "uploadedSecurly": "अपलोड को एंड-टू-एंड एन्क्रिप्शन के साथ सुरक्षित किया गया है, जिसका मतलब है कि एक्सक्लूसिव सर्वर और थर्ड पार्टी कंटेंट नहीं पढ़ सकते हैं।",
     "loadSceneOverridePrompt": "लोड हो रहा है बाहरी ड्राइंग आपके मौजूदा सामग्री को बदल देगा। क्या आप जारी रखना चाहते हैं?",
+    "collabStopOverridePrompt": "",
     "errorLoadingLibrary": "लाइब्रेरी लोड करने में त्रुटि",
     "confirmAddLibrary": "लाइब्रेरी जोड़ें पुष्‍टि करें आकार संख्या",
     "imageDoesNotContainScene": "दृश्य में छवि नहीं है",
-    "cannotRestoreFromImage": "छवि फ़ाइल बहाल दृश्य नहीं है"
+    "cannotRestoreFromImage": "छवि फ़ाइल बहाल दृश्य नहीं है",
+    "resetLibrary": ""
   },
   "toolBar": {
     "selection": "चयन",
@@ -200,25 +203,25 @@
     "title": "गलती"
   },
   "helpDialog": {
-    "blog": "",
-    "click": "",
-    "curvedArrow": "",
-    "curvedLine": "",
+    "blog": "हमारा ब्लॉग पढे",
+    "click": "क्लिक करें",
+    "curvedArrow": "वक्र तीर",
+    "curvedLine": "वक्र रेखा",
     "documentation": "",
-    "drag": "",
-    "editor": "",
-    "github": "",
-    "howto": "",
-    "or": "",
-    "preventBinding": "",
-    "shapes": "",
-    "shortcuts": "",
-    "textFinish": "",
-    "textNewLine": "",
-    "title": "",
-    "view": "",
-    "zoomToFit": "",
-    "zoomToSelection": ""
+    "drag": "खींचें",
+    "editor": "संपादक",
+    "github": "मुद्दा मिला? प्रस्तुत करें",
+    "howto": "हमारे गाइड का पालन करें",
+    "or": "या",
+    "preventBinding": "तीर बंधन रोकें",
+    "shapes": "आकृतियाँ",
+    "shortcuts": "कीबोर्ड के शॉर्टकट्स",
+    "textFinish": "संपादन समाप्त करें (पाठ)",
+    "textNewLine": "नई पंक्ति जोड़ें (पाठ)",
+    "title": "मदद",
+    "view": "दृश्य",
+    "zoomToFit": "सभी तत्वों को फिट करने के लिए ज़ूम करें",
+    "zoomToSelection": "चयन तक ज़ूम करे"
   },
   "encrypted": {
     "tooltip": "आपके चित्र अंत-से-अंत एन्क्रिप्टेड हैं, इसलिए एक्सक्लूसिव्रॉव के सर्वर उन्हें कभी नहीं देखेंगे।"
@@ -233,10 +236,16 @@
     "storage": "संग्रह",
     "title": "बेवकूफ के लिए आँकड़े",
     "total": "कुल",
+    "version": "संस्करण",
+    "versionCopy": "काॅपी करने के लिए क्लिक करें",
+    "versionNotAvailable": "संस्करण उपलब्ध नहीं है",
     "width": "चौड़ाई"
   },
   "toast": {
-    "copyStyles": "",
-    "copyToClipboardAsPng": ""
+    "copyStyles": "काॅपी कीए स्टाइल",
+    "copyToClipboard": "क्लिपबोर्ड में कॉपी कीए",
+    "copyToClipboardAsPng": "क्लिपबोर्ड में PNG के रूप में कॉपी किए",
+    "fileSaved": "",
+    "fileSavedToFilename": ""
   }
 }

src/locales/hu-HU.json

@@ -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,12 +77,12 @@
     "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...",
+    "libraryLoadingMessage": "Könyvtár betöltése…",
     "libraries": "Könyvtárak böngészése",
-    "loadingScene": "Jelenet betöltése...",
+    "loadingScene": "Jelenet betöltése…",
     "align": "Igazítás",
     "alignTop": "Felülre igazítás",
     "alignBottom": "Alulra igazítás",
@@ -91,7 +91,8 @@
     "centerVertically": "Függőlegesen középre igazított",
     "centerHorizontally": "Vízszintesen középre igazított",
     "distributeHorizontally": "Vízszintes elosztás",
-    "distributeVertically": "Függőleges elosztás"
+    "distributeVertically": "Függőleges elosztás",
+    "viewMode": ""
   },
   "buttons": {
     "clearReset": "Vászon törlése",
@@ -116,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",
@@ -135,10 +136,12 @@
     "decryptFailed": "Nem sikerült visszafejteni a titkosított adatot.",
     "uploadedSecurly": "A feltöltést végpontok közötti titkosítással biztosítottuk, ami azt jelenti, hogy egy harmadik fél nem tudja megnézni a tartalmát, beleértve az Excalidraw szervereit is.",
     "loadSceneOverridePrompt": "A betöltött külső rajz felül fogja írnia meglévőt. Szeretnéd folytatni?",
+    "collabStopOverridePrompt": "",
     "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",
@@ -233,10 +236,16 @@
     "storage": "Tárhely",
     "title": "Statisztikák",
     "total": "Összesen",
+    "version": "",
+    "versionCopy": "",
+    "versionNotAvailable": "",
     "width": "Szélesség"
   },
   "toast": {
     "copyStyles": "",
-    "copyToClipboardAsPng": ""
+    "copyToClipboard": "",
+    "copyToClipboardAsPng": "",
+    "fileSaved": "",
+    "fileSavedToFilename": ""
   }
 }

src/locales/id-ID.json

@@ -68,7 +68,7 @@
     "layers": "Lapisan",
     "actions": "Aksi",
     "language": "Bahasa",
-    "createRoom": "Bagikan sesi kolaborasi langsung",
+    "liveCollaboration": "",
     "duplicateSelection": "Duplikat",
     "untitled": "Tanpa judul",
     "name": "Nama",
@@ -77,12 +77,12 @@
     "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...",
+    "libraryLoadingMessage": "Memuat pustaka…",
     "libraries": "Telusur pustaka",
-    "loadingScene": "Memuat pemandangan...",
+    "loadingScene": "Memuat pemandangan…",
     "align": "Perataan",
     "alignTop": "Rata atas",
     "alignBottom": "Rata bawah",
@@ -91,7 +91,8 @@
     "centerVertically": "Pusatkan secara vertikal",
     "centerHorizontally": "Pusatkan secara horizontal",
     "distributeHorizontally": "Distribusikan horizontal",
-    "distributeVertically": "Distribusikan vertikal"
+    "distributeVertically": "Distribusikan vertikal",
+    "viewMode": "Mode tampilan"
   },
   "buttons": {
     "clearReset": "Setel Ulang Kanvas",
@@ -116,7 +117,7 @@
     "edit": "Edit",
     "undo": "Urungkan",
     "redo": "Ulangi",
-    "roomDialog": "Mulai kolaborasi langsung",
+    "resetLibrary": "",
     "createNewRoom": "Buat ruang baru",
     "fullScreen": "Layar penuh",
     "darkMode": "Mode gelap",
@@ -135,10 +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": "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",
@@ -233,10 +236,16 @@
     "storage": "Penyimpanan",
     "title": "Statistik untuk nerd",
     "total": "Total",
+    "version": "Versi",
+    "versionCopy": "Klik untuk salin",
+    "versionNotAvailable": "Versi tidak tersedia",
     "width": "Lebar"
   },
   "toast": {
     "copyStyles": "Gaya tersalin.",
-    "copyToClipboardAsPng": "Tersalin ke clipboard sebagai PNG."
+    "copyToClipboard": "Tersalin ke papan klip.",
+    "copyToClipboardAsPng": "Tersalin ke clipboard sebagai PNG.",
+    "fileSaved": "File tersimpan.",
+    "fileSavedToFilename": "Disimpan ke {filename}"
   }
 }

src/locales/it-IT.json

@@ -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,12 +77,12 @@
     "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 della biblioteca...",
+    "libraryLoadingMessage": "Caricamento libreria…",
     "libraries": "Sfoglia librerie",
-    "loadingScene": "Caricamento della scena...",
+    "loadingScene": "Caricamento della scena…",
     "align": "Allinea",
     "alignTop": "Allinea in alto",
     "alignBottom": "Allinea in basso",
@@ -91,7 +91,8 @@
     "centerVertically": "Centra Verticalmente",
     "centerHorizontally": "Centra orizzontalmente",
     "distributeHorizontally": "Distribuisci orizzontalmente",
-    "distributeVertically": "Distribuisci verticalmente"
+    "distributeVertically": "Distribuisci verticalmente",
+    "viewMode": "Modalità visualizzazione"
   },
   "buttons": {
     "clearReset": "Svuota la tela",
@@ -116,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",
@@ -135,10 +136,12 @@
     "decryptFailed": "Impossibile decriptare i dati.",
     "uploadedSecurly": "L'upload è stato protetto con la crittografia end-to-end, il che significa che il server Excalidraw e terze parti non possono leggere il contenuto.",
     "loadSceneOverridePrompt": "Se carichi questo disegno esterno, sostituirà quello che hai. Vuoi continuare?",
+    "collabStopOverridePrompt": "Interrompere la sessione sovrascriverà il precedente disegno memorizzato localmente. Sei sicuro?\n\n(Se vuoi mantenere il tuo disegno locale, chiudi semplicemente la scheda del browser.)",
     "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",
@@ -233,10 +236,16 @@
     "storage": "Memoria",
     "title": "Statistiche per nerd",
     "total": "Totale",
+    "version": "Versione",
+    "versionCopy": "Clicca per copiare",
+    "versionNotAvailable": "Versione non disponibile",
     "width": "Larghezza"
   },
   "toast": {
     "copyStyles": "Stili copiati.",
-    "copyToClipboardAsPng": "Copiato negli appunti come PNG."
+    "copyToClipboard": "Copiato negli appunti.",
+    "copyToClipboardAsPng": "Copiato negli appunti come PNG.",
+    "fileSaved": "File salvato.",
+    "fileSavedToFilename": "Salvato in {filename}"
   }
 }

src/locales/ja-JP.json

@@ -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,21 +68,21 @@
     "layers": "レイヤー",
     "actions": "操作",
     "language": "言語",
-    "createRoom": "共同編集セッションの共有",
+    "liveCollaboration": "ライブ連携",
     "duplicateSelection": "複製",
-    "untitled": "",
+    "untitled": "無題",
     "name": "名前",
     "yourName": "あなたの名前",
     "madeWithExcalidraw": "Excalidrawで作成",
     "group": "図形のグループ化",
     "ungroup": "グループ化を解除",
     "collaborators": "共同編集者",
-    "gridMode": "",
+    "showGrid": "グリッドを表示",
     "addToLibrary": "ライブラリに追加",
     "removeFromLibrary": "ライブラリから削除",
-    "libraryLoadingMessage": "ライブラリを読み込み中...",
-    "libraries": "",
-    "loadingScene": "シーンを読み込み中...",
+    "libraryLoadingMessage": "ライブラリを読み込み中…",
+    "libraries": "ライブラリを参照する",
+    "loadingScene": "シーンを読み込み中…",
     "align": "整列",
     "alignTop": "上揃え",
     "alignBottom": "下揃え",
@@ -90,8 +90,9 @@
     "alignRight": "右揃え",
     "centerVertically": "縦方向に中央揃え",
     "centerHorizontally": "横方向に中央揃え",
-    "distributeHorizontally": "",
-    "distributeVertically": ""
+    "distributeHorizontally": "水平方向に分散配置",
+    "distributeVertically": "垂直方向に分散配置",
+    "viewMode": "閲覧モード"
   },
   "buttons": {
     "clearReset": "キャンバスのリセット",
@@ -116,12 +117,12 @@
     "edit": "編集",
     "undo": "元に戻す",
     "redo": "やり直し",
-    "roomDialog": "共同編集を開始する",
+    "resetLibrary": "ライブラリをリセット",
     "createNewRoom": "新しい部屋を作成する",
     "fullScreen": "全画面表示",
     "darkMode": "ダークモード",
     "lightMode": "ライトモード",
-    "zenMode": "",
+    "zenMode": "Zenモード",
     "exitZenMode": "集中モードをやめる"
   },
   "alerts": {
@@ -135,10 +136,12 @@
     "decryptFailed": "データを復号できませんでした。",
     "uploadedSecurly": "データのアップロードはエンドツーエンド暗号化によって保護されています。Excalidrawサーバーと第三者はデータの内容を見ることができません。",
     "loadSceneOverridePrompt": "外部図面を読み込むと、既存のコンテンツが置き換わります。続行しますか？",
+    "collabStopOverridePrompt": "セッションを停止すると、ローカルに保存されている図が上書きされます。 本当によろしいですか？\n\n(ローカルの図を保持したい場合は、セッションを停止せずにブラウザタブを閉じてください。)",
     "errorLoadingLibrary": "サードパーティライブラリの読み込み中にエラーが発生しました。",
     "confirmAddLibrary": "{{numShapes}} 個の図形をライブラリに追加します。よろしいですか？",
-    "imageDoesNotContainScene": "",
-    "cannotRestoreFromImage": "このイメージファイルからシーンを復元できませんでした"
+    "imageDoesNotContainScene": "現在、画像のインポートはサポートされていません。\n\nシーンをインポートしようとしましたか？この画像にはシーンデータが含まれていないようです。エクスポート中に有効にしていましたか？",
+    "cannotRestoreFromImage": "このイメージファイルからシーンを復元できませんでした",
+    "resetLibrary": "ライブラリを消去します。本当によろしいですか？"
   },
   "toolBar": {
     "selection": "選択",
@@ -162,7 +165,7 @@
     "freeDraw": "クリックしてドラッグします。離すと終了します",
     "text": "ヒント: 選択ツールを使用して任意の場所をダブルクリックしてテキストを追加することもできます",
     "linearElementMulti": "最後のポイントをクリックするか、エスケープまたはEnterを押して終了します",
-    "lockAngle": "",
+    "lockAngle": "SHIFTを押したままにすると、角度を制限することができます",
     "resize": "サイズを変更中にSHIFTを押しすと比率を制御できます。Altを押すと中央からサイズを変更できます。",
     "rotate": "回転中にSHIFT キーを押すと角度を制限することができます",
     "lineEditor_info": "ポイントを編集するには、ダブルクリックまたはEnterキーを押します",
@@ -200,43 +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": "利用できないバージョン",
     "width": "幅"
   },
   "toast": {
-    "copyStyles": "",
-    "copyToClipboardAsPng": ""
+    "copyStyles": "スタイルをコピー",
+    "copyToClipboard": "クリップボードにコピー",
+    "copyToClipboardAsPng": "PNG形式でクリップボードにコピー",
+    "fileSaved": "ファイルを保存しました",
+    "fileSavedToFilename": "{filename} に保存しました"
   }
 }

src/locales/kab-KAB.json

@@ -0,0 +1,251 @@
+{
+  "labels": {
+    "paste": "Senṭeḍ",
+    "pasteCharts": "Senṭeḍ udlifen",
+    "selectAll": "Fren akk",
+    "multiSelect": "Rnu aferdis ɣer tefrayt",
+    "moveCanvas": "Smutti taɣzut n usuneɣ",
+    "cut": "Gzem",
+    "copy": "Nɣel",
+    "copyAsPng": "Nɣel ɣer tecfawit am PNG",
+    "copyAsSvg": "Nɣel ɣer tecfawit am SVG",
+    "bringForward": "Awi ɣer sdat",
+    "sendToBack": "Awi s agilal",
+    "bringToFront": "Err ɣer deffir",
+    "sendBackward": "Awi ɣer deffir",
+    "delete": "Kkes",
+    "copyStyles": "Nɣel iɣunab",
+    "pasteStyles": "Senṭeḍ iɣunab",
+    "stroke": "Azizdew",
+    "background": "Agilal",
+    "fill": "Taččart",
+    "strokeWidth": "Tehri n yizirig",
+    "strokeStyle": "Aɣanib n tizirig",
+    "strokeStyle_solid": "Aččuran",
+    "strokeStyle_dashed": "S tjerriḍin",
+    "strokeStyle_dotted": "S tenqiḍin",
+    "sloppiness": "Astehzi",
+    "opacity": "Tiḍullest",
+    "textAlign": "Areyyec n uḍris",
+    "edges": "Leryuf",
+    "sharp": "Yemsed",
+    "round": "Imdewer",
+    "arrowheads": "Ixfawen n tenccabt",
+    "arrowhead_none": "Ulac",
+    "arrowhead_arrow": "Taneccabt",
+    "arrowhead_bar": "Afeggag",
+    "arrowhead_dot": "Tanqiḍt",
+    "fontSize": "Tiddi n tsefsit",
+    "fontFamily": "Tawacult n tsefsiyin",
+    "onlySelected": "Tafrayt kan",
+    "withBackground": "S ugilal",
+    "exportEmbedScene": "Seddu asayes deg ufaylu yettwasifḍen",
+    "exportEmbedScene_details": "Asayes ad yettwasekles deg ufaylu n usifeḍ PNG/SVG akken akken ad yili wamek ara d-yettwarr seg-s usayes. Ayagi ad isimɣur tiddi n ufaylu n usifeḍ.",
+    "addWatermark": "Seddu \"Yettwaxdem s Excalidraw\"",
+    "handDrawn": "Asuneɣ s ufus",
+    "normal": "Amagnu",
+    "code": "Tangalt",
+    "small": "Meẓẓi",
+    "medium": "Alemmas",
+    "large": "Ameqran",
+    "veryLarge": "Meqqer aṭas",
+    "solid": "Aččuran",
+    "hachure": "Azerreg",
+    "crossHatch": "Azerreg anmidag",
+    "thin": "Arqaq",
+    "bold": "Azuran",
+    "left": "Azelmaḍ",
+    "center": "Talemmast",
+    "right": "Ayfus",
+    "extraBold": "Azuran aṭas",
+    "architect": "Amasdag",
+    "artist": "Anaẓur",
+    "cartoonist": "",
+    "fileTitle": "Azwel n ufaylu",
+    "colorPicker": "Amafran n yini",
+    "canvasBackground": "Agilal n teɣzut n usuneɣ",
+    "drawingCanvas": "Taɣzut n usuneɣ",
+    "layers": "Tissiyin",
+    "actions": "Tigawin",
+    "language": "Tutlayt",
+    "liveCollaboration": "",
+    "duplicateSelection": "Sisleg",
+    "untitled": "War azwel",
+    "name": "Isem",
+    "yourName": "Isem-ik (im)",
+    "madeWithExcalidraw": "Yettwaxdem s Excalidraw",
+    "group": "Segrew tafrayt",
+    "ungroup": "Kkess asegrew i tefrayt",
+    "collaborators": "Imɛiwnen",
+    "showGrid": "Beqqeḍ aferrug",
+    "addToLibrary": "Rnu ɣer temkarḍit",
+    "removeFromLibrary": "Kkes si temkarḍit",
+    "libraryLoadingMessage": "Asali n temkarḍit…",
+    "libraries": "Snirem timkarḍiyin",
+    "loadingScene": "Asali n usayes…",
+    "align": "Reyyec",
+    "alignTop": "Areyyec uksawen",
+    "alignBottom": "Areyyec ukessar",
+    "alignLeft": "Reyyec s azelmaḍ",
+    "alignRight": "Areyyec s ayfus",
+    "centerVertically": "Di tlemmast s ibeddi",
+    "centerHorizontally": "Di tlemmast s uglawi",
+    "distributeHorizontally": "Freq s uglawi",
+    "distributeVertically": "Freq s yibeddi",
+    "viewMode": "Askar n tmuɣli"
+  },
+  "buttons": {
+    "clearReset": "Ales awennez n teɣzut n usuneɣ",
+    "export": "Sifeḍ",
+    "exportToPng": "Sifeḍ ɣer PNG",
+    "exportToSvg": "Sifeḍ ɣer SVG",
+    "copyToClipboard": "Nɣel ɣer tecfawit",
+    "copyPngToClipboard": "Nɣel PNG ɣer tecfawit",
+    "scale": "Taskala",
+    "save": "Sekles",
+    "saveAs": "Sekles am",
+    "load": "Sali-d",
+    "getShareableLink": "Awi-d aseɣwen n beṭṭu",
+    "close": "Mdel",
+    "selectLanguage": "Fren tutlayt",
+    "scrollBackToContent": "Uɣal s agbur",
+    "zoomIn": "Simɣur",
+    "zoomOut": "Simẓi",
+    "resetZoom": "Ales awennez n usemɣer",
+    "menu": "Umuɣ",
+    "done": "Ifukk",
+    "edit": "Ẓreg",
+    "undo": "Sefsex",
+    "redo": "Err-d",
+    "resetLibrary": "",
+    "createNewRoom": "Snulfu-d taxxamt tamaynutt",
+    "fullScreen": "Agdil aččuran",
+    "darkMode": "Askar imsulles",
+    "lightMode": "Askar afaw",
+    "zenMode": "Askar Zen",
+    "exitZenMode": "Ffeɣ seg uskar Zen"
+  },
+  "alerts": {
+    "clearReset": "Ayagi ad isfeḍ akk taɣzut n usuneɣ. Tetḥeqqeḍ?",
+    "couldNotCreateShareableLink": "D awezɣi asnulfu n useɣwen n beṭṭu.",
+    "couldNotCreateShareableLinkTooBig": "D awezɣi asnulfu n useɣwen n beṭṭu. Asayes ɣezzif aṭas",
+    "couldNotLoadInvalidFile": "D awezɣi asali n ufaylu armeɣtu",
+    "importBackendFailed": "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": "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",
+    "resetLibrary": ""
+  },
+  "toolBar": {
+    "selection": "Tafrayt",
+    "draw": "Unuɣ ilelli",
+    "rectangle": "Asrem",
+    "diamond": "Ameɣṛun",
+    "ellipse": "Taglayt",
+    "arrow": "Taneccabt",
+    "line": "Izirig",
+    "text": "Aḍris",
+    "library": "Tamkarḍit",
+    "lock": "Eǧǧ afecku n tefrayt yermed mbaɛd asuneɣ"
+  },
+  "headings": {
+    "canvasActions": "Tigawin n teɣzut n usuneɣ",
+    "selectedShapeActions": "Tigawin n talɣa yettwafernen",
+    "shapes": "Talɣiwin"
+  },
+  "hints": {
+    "linearElement": "Ssit akken ad tebduḍ aṭas n tenqiḍin, zuɣer i yiwen n yizirig",
+    "freeDraw": "Ssit yerna zuɣer, serreḥ ticki tfukeḍ",
+    "text": "Tixidest: tzemreḍ daɣen ad ternuḍ aḍris s usiti snat n tikkal anida tebɣiḍ s ufecku n tefrayt",
+    "linearElementMulti": "Ssit ɣef tenqiḍt taneggarut neɣ ssed taqeffalt Escape neɣ taqeffalt Kcem akken ad tfakkeḍ",
+    "lockAngle": "Tzemreḍ ad tḥettmeḍ tiɣmert s tuṭṭfa n tqeffalt SHIFT",
+    "resize": "Tzemreḍ ad tḥettemeḍ assaɣ s tuṭṭfa n tqeffalt SHIFT mi ara tettbeddileḍ tiddi,\nma teṭṭfeḍ ALT abeddel n tiddi ad yili si tlemmast",
+    "rotate": "Tzemreḍ ad tḥettemeḍ tiɣemmar s tuṭṭfa n SHIFT di tuzzya",
+    "lineEditor_info": "Ssit snat n tikkal neɣ ssed taqeffalt Kcem akken ad tẓergeḍ tinqiḍin",
+    "lineEditor_pointSelected": "Ssed taqeffalt kkes akken ad tekkseḍ tanqiḍt, CtrlOrCmd+D akken ad tsiselgeḍ, neɣ zuɣer akken ad tesmuttiḍ",
+    "lineEditor_nothingSelected": "Fren tanqiḍt ara tesmuttiḍ neɣ ara tekkseḍ, neɣ ṭṭef taqeffalt Alt akken ad ternuḍ tinqiḍin timaynutin"
+  },
+  "canvasError": {
+    "cannotShowPreview": "Ulamek abeqqeḍ n teskant",
+    "canvasTooBig": "Taɣzut n usuneɣ tezmer ad tili temeqqer aṭas.",
+    "canvasTooBigTip": "Tixidest: eɛreḍ ad tesqerbeḍ ciṭ iferdisen yembaɛaden."
+  },
+  "errorSplash": {
+    "headingMain_pre": "Teḍra-d tuccḍa. Eɛreḍ ",
+    "headingMain_button": "asali n usebter tikkelt-nniḍen.",
+    "clearCanvasMessage": "Ma yella tulsa n usali ur tefri ara ugur, eɛreḍ ",
+    "clearCanvasMessage_button": "asfaḍ n teɣzut n usuneɣ.",
+    "clearCanvasCaveat": " Ayagi ad d-iglu s usṛuḥu n umahil ",
+    "trackedToSentry_pre": "Tuccḍa akked umesmagi ",
+    "trackedToSentry_post": " tettwasekles deg unagraw-nneɣ.",
+    "openIssueMessage_pre": "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:"
+  },
+  "roomDialog": {
+    "desc_intro": "Tzemreḍ ad d-teɛerḍeḍ medden ɣer usayes-inek (m) amiran akken ad ttekkin yid-k.",
+    "desc_privacy": "Ur tqelliq ara, tiɣimit tsseqdac awgelhen ixef s ixef, dɣa ayen ara tsunɣeḍ ad iqqim d amaẓlay. Ula d aqeddac-nneɣ ur yezmir ara ad iwali acu txeddemeḍ.",
+    "button_startSession": "Bdu tiɣimit",
+    "button_stopSession": "Ḥbes tiɣimit",
+    "desc_inProgressIntro": "Tiɣimit n umɛawen s srid tetteddu akka tura.",
+    "desc_shareLink": "Bḍu aseɣwen-agi akked medden ukud tebɣiḍ ad temɛawaneḍ:",
+    "desc_exitSession": "Aḥbas n tɣimit ad k (m) yesenser si texxamt, maca ad tizmireḍ ad tkemmeleḍ amahil s usayes, s wudem adigan. Ẓer belli ayagi ur yettḥaz ara imdanen-nniḍen, yerna ad izmiren ad kemmelen ad mɛawanen di tsuffeɣt-nnsen."
+  },
+  "errorDialog": {
+    "title": "Tuccḍa"
+  },
+  "helpDialog": {
+    "blog": "Ɣeṛ ablug-nneɣ",
+    "click": "ssit",
+    "curvedArrow": "Taneccabt izelgen",
+    "curvedLine": "Izirig izelgen",
+    "documentation": "Tasemlit",
+    "drag": "zuɣer",
+    "editor": "Amaẓrag",
+    "github": "Tufiḍ-d ugur? Azen-aɣ-d",
+    "howto": "Ḍfer imniren-nneɣ",
+    "or": "neɣ",
+    "preventBinding": "Seḥbes tuqqna n tneccabin",
+    "shapes": "Talɣiwin",
+    "shortcuts": "Inegzumen n unasiw",
+    "textFinish": "Fak asiẓreg (aḍris)",
+    "textNewLine": "Rnu ajerriḍ amaynut (aḍris)",
+    "title": "Tallelt",
+    "view": "Tamuɣli",
+    "zoomToFit": "Simɣur akken ad twliḍ akk iferdisen",
+    "zoomToSelection": "Simɣur ɣer tefrayt"
+  },
+  "encrypted": {
+    "tooltip": "Unuɣen-inek (m) ttuwgelhnen seg yixef s ixef dɣa iqeddacen n Excalidraw werǧin ad ten-walin. "
+  },
+  "stats": {
+    "angle": "Tiɣmeṛt",
+    "element": "Aferdis",
+    "elements": "Iferdisen",
+    "height": "Tattayt",
+    "scene": "Asayes",
+    "selected": "Yettwafren",
+    "storage": "Aḥraz",
+    "title": "",
+    "total": "Aɣrud",
+    "version": "Alqem",
+    "versionCopy": "Sit ad tneɣleḍ",
+    "versionNotAvailable": "Ur inuḥ ulqem",
+    "width": "Tehri"
+  },
+  "toast": {
+    "copyStyles": "Iɣunab yettwaneɣlen.",
+    "copyToClipboard": "Yettwaɣel ɣer tecfawit.",
+    "copyToClipboardAsPng": "Yettwanɣel ɣer tecfawit am PNG.",
+    "fileSaved": "",
+    "fileSavedToFilename": ""
+  }
+}

src/locales/ko-KR.json

@@ -68,7 +68,7 @@
     "layers": "레이어",
     "actions": "동작",
     "language": "언어",
-    "createRoom": "실시간 협업 세션 공유",
+    "liveCollaboration": "",
     "duplicateSelection": "복제",
     "untitled": "제목 없음",
     "name": "이름",
@@ -77,12 +77,12 @@
     "group": "그룹 생성",
     "ungroup": "그룹 해제",
     "collaborators": "공동 작업자",
-    "gridMode": "격자 방식",
+    "showGrid": "",
     "addToLibrary": "라이브러리에 추가",
     "removeFromLibrary": "라이브러리에서 제거",
-    "libraryLoadingMessage": "라이브러리 불러오는 중...",
+    "libraryLoadingMessage": "라이브러리 불러오는 중…",
     "libraries": "라이브러리 찾기",
-    "loadingScene": "화면 불러오는 중...",
+    "loadingScene": "화면 불러오는 중…",
     "align": "정렬",
     "alignTop": "상단 정렬",
     "alignBottom": "하단 정렬",
@@ -91,7 +91,8 @@
     "centerVertically": "수직으로 중앙 정렬",
     "centerHorizontally": "수평으로 중앙 정렬",
     "distributeHorizontally": "수평으로 분배",
-    "distributeVertically": "수직으로 분배"
+    "distributeVertically": "수직으로 분배",
+    "viewMode": "보기 모드"
   },
   "buttons": {
     "clearReset": "캔버스 초기화",
@@ -116,7 +117,7 @@
     "edit": "수정",
     "undo": "실행 취소",
     "redo": "다시 실행",
-    "roomDialog": "실시간 협업 시작하기",
+    "resetLibrary": "",
     "createNewRoom": "방 만들기",
     "fullScreen": "전체화면",
     "darkMode": "다크 모드",
@@ -135,10 +136,12 @@
     "decryptFailed": "데이터를 복호화하지 못했습니다.",
     "uploadedSecurly": "업로드는 종단 간 암호화로 보호되므로 Excalidraw 서버 및 타사가 콘텐츠를 읽을 수 없습니다.",
     "loadSceneOverridePrompt": "외부 파일을 불러 오면 기존 콘텐츠가 대체됩니다. 계속 진행할까요?",
+    "collabStopOverridePrompt": "협업 세션을 종료하면 로컬 저장소에 있는 그림이 협업 세션의 그림으로 대체됩니다. 진행하겠습니까?\n\n(로컬 저장소에 있는 그림을 유지하려면 현재 브라우저 탭을 닫아주세요.)",
     "errorLoadingLibrary": "외부 라이브러리를 불러오는 중에 문제가 발생했습니다.",
     "confirmAddLibrary": "{{numShapes}}개의 모양이 라이브러리에 추가됩니다. 계속하시겠어요?",
     "imageDoesNotContainScene": "이미지에서 불러오기는 현재 지원되지 않습니다.\n\n화면을 불러오려고 하셨나요? 이미지에 화면 정보가 없는 것 같습니다. 내보낼 때 화면을 포함했나요?",
-    "cannotRestoreFromImage": "이미지 파일에서 화면을 복구할 수 없었습니다"
+    "cannotRestoreFromImage": "이미지 파일에서 화면을 복구할 수 없었습니다",
+    "resetLibrary": ""
   },
   "toolBar": {
     "selection": "선택",
@@ -200,25 +203,25 @@
     "title": "오류"
   },
   "helpDialog": {
-    "blog": "",
-    "click": "",
-    "curvedArrow": "",
-    "curvedLine": "",
-    "documentation": "",
-    "drag": "",
-    "editor": "",
-    "github": "",
-    "howto": "",
-    "or": "",
-    "preventBinding": "",
-    "shapes": "",
-    "shortcuts": "",
-    "textFinish": "",
-    "textNewLine": "",
-    "title": "",
-    "view": "",
-    "zoomToFit": "",
-    "zoomToSelection": ""
+    "blog": "블로그 읽어보기",
+    "click": "클릭",
+    "curvedArrow": "곡선 화살표",
+    "curvedLine": "곡선",
+    "documentation": "설명서",
+    "drag": "드래그",
+    "editor": "에디터",
+    "github": "문제 제보하기",
+    "howto": "가이드 참고하기",
+    "or": "또는",
+    "preventBinding": "화살표가 붙지 않게 하기",
+    "shapes": "도형",
+    "shortcuts": "키보드 단축키",
+    "textFinish": "편집 완료 (텍스트)",
+    "textNewLine": "줄바꿈 (텍스트)",
+    "title": "도움말",
+    "view": "보기",
+    "zoomToFit": "모든 요소가 보이도록 확대/축소",
+    "zoomToSelection": "선택 영역으로 확대/축소"
   },
   "encrypted": {
     "tooltip": "그림은 종단 간 암호화되므로 Excalidraw의 서버는 절대로 내용을 알 수 없습니다."
@@ -233,10 +236,16 @@
     "storage": "저장공간",
     "title": "덕후들을 위한 통계",
     "total": "합계",
+    "version": "버전",
+    "versionCopy": "복사하려면 클릭",
+    "versionNotAvailable": "해당 버전 사용 불가능",
     "width": "너비"
   },
   "toast": {
-    "copyStyles": "",
-    "copyToClipboardAsPng": ""
+    "copyStyles": "스타일 복사.",
+    "copyToClipboard": "클립보드로 복사.",
+    "copyToClipboardAsPng": "클립보드로 PNG 이미지 복사.",
+    "fileSaved": "",
+    "fileSavedToFilename": ""
   }
 }

src/locales/my-MM.json

@@ -68,7 +68,7 @@
     "layers": "အလွှာများ",
     "actions": "လုပ်ဆောင်ချက်များ",
     "language": "ဘာသာစကား",
-    "createRoom": "တိုက်ရိုက်ပူးပေါင်းဆောင်ရွက်ရန်အဖွဲ့ဖွဲ့",
+    "liveCollaboration": "",
     "duplicateSelection": "ပွား",
     "untitled": "အမည်မရှိ",
     "name": "အမည်",
@@ -77,12 +77,12 @@
     "group": "အုပ်စုဖွဲ့",
     "ungroup": "အုပ်စုဖျက်သိမ်း",
     "collaborators": "ပူးပေါင်းပါဝင်သူများ",
-    "gridMode": "",
+    "showGrid": "",
     "addToLibrary": "မှတ်တမ်းတင်",
     "removeFromLibrary": "မှတ်တမ်းမှထုတ်",
-    "libraryLoadingMessage": "မှတ်တမ်းအား တင်သွင်းနေသည်...",
+    "libraryLoadingMessage": "မှတ်တမ်းအား တင်သွင်းနေသည်…",
     "libraries": "စာကြည့်တိုက်တွင်ရှာဖွေပါ",
-    "loadingScene": "မြင်ကွင်းဖော်နေသည်...",
+    "loadingScene": "မြင်ကွင်းဖော်နေသည်…",
     "align": "ချိန်ညှိ",
     "alignTop": "ထိပ်ညှိ",
     "alignBottom": "အခြေညှိ",
@@ -91,7 +91,8 @@
     "centerVertically": "ဒေါင်လိုက်အလယ်ညှိ",
     "centerHorizontally": "အလျားလိုက်အလယ်ညှိ",
     "distributeHorizontally": "အလျားလိုက်",
-    "distributeVertically": "ထောင်လိုက်"
+    "distributeVertically": "ထောင်လိုက်",
+    "viewMode": ""
   },
   "buttons": {
     "clearReset": "ကားချပ်ရှင်းလင်း",
@@ -116,7 +117,7 @@
     "edit": "ပြင်ဆင်",
     "undo": "ပြန်ထား",
     "redo": "ထပ်လုပ်",
-    "roomDialog": "တိုက်ရိုက်ပူးပေါင်းမှုစတင်",
+    "resetLibrary": "",
     "createNewRoom": "အခန်းသစ်ဖွဲ့",
     "fullScreen": "",
     "darkMode": "",
@@ -135,10 +136,12 @@
     "decryptFailed": "အချက်အလက်ဖော်ယူ၍မရပါ။",
     "uploadedSecurly": "တင်သွင်းအချက်အလက်များအား နှစ်ဘက်စွန်းတိုင်လျှို့ဝှက်စနစ်အသုံးပြု၍လုံခြုံစွာထိန်းသိမ်းထားပါသဖြင့် Excalidraw ဆာဗာနှင့်ဆက်စပ်အဖွဲ့အစည်းများပင်လျှင်မဖတ်ရှုနိုင်ပါ။",
     "loadSceneOverridePrompt": "လက်ရှိရေးဆွဲထားသမျှအား ပြင်ပမှတင်သွင်းသောပုံနှင့်အစားထိုးပါမည်။ ဆက်လက်ဆောင်ရွက်လိုပါသလား။",
+    "collabStopOverridePrompt": "",
     "errorLoadingLibrary": "ပြင်ပမှမှတ်တမ်းအားတင်သွင်းရာတွင်အမှားအယွင်းရှိနေသည်။",
     "confirmAddLibrary": "{{numShapes}} ခုသောပုံသဏ္ဌာန်အားမှတ်တမ်းတင်ပါမည်။ အတည်ပြုပါ။",
     "imageDoesNotContainScene": "",
-    "cannotRestoreFromImage": "ဤပုံဖြင့်မြင်ကွင်းပြန်လည်မရယူနိုင်ပါ။"
+    "cannotRestoreFromImage": "ဤပုံဖြင့်မြင်ကွင်းပြန်လည်မရယူနိုင်ပါ။",
+    "resetLibrary": ""
   },
   "toolBar": {
     "selection": "ရွေးချယ်",
@@ -233,10 +236,16 @@
     "storage": "သိုလှောင်ခန်း",
     "title": "အက္ခရာများအတွက်အချက်အလက်များ",
     "total": "စုစုပေါင်း",
+    "version": "",
+    "versionCopy": "",
+    "versionNotAvailable": "",
     "width": "အကျယ်"
   },
   "toast": {
     "copyStyles": "",
-    "copyToClipboardAsPng": ""
+    "copyToClipboard": "",
+    "copyToClipboardAsPng": "",
+    "fileSaved": "",
+    "fileSavedToFilename": ""
   }
 }

src/locales/nb-NO.json

@@ -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,12 +77,12 @@
     "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...",
+    "libraryLoadingMessage": "Laster bibliotek…",
     "libraries": "Bla gjennom biblioteker",
-    "loadingScene": "Laster inn scene...",
+    "loadingScene": "Laster inn scene…",
     "align": "Juster",
     "alignTop": "Juster øverst",
     "alignBottom": "Juster nederst",
@@ -91,7 +91,8 @@
     "centerVertically": "Midtstill vertikalt",
     "centerHorizontally": "Midtstill horisontalt",
     "distributeHorizontally": "Distribuer horisontalt",
-    "distributeVertically": "Distribuer vertikalt"
+    "distributeVertically": "Distribuer vertikalt",
+    "viewMode": "Visningsmodus"
   },
   "buttons": {
     "clearReset": "Tøm lerretet og tilbakestill bakgrunnsfargen",
@@ -116,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",
@@ -135,10 +136,12 @@
     "decryptFailed": "Kunne ikke dekryptere data.",
     "uploadedSecurly": "Opplastingen er kryptert og kan ikke leses av Excalidraw-serveren eller tredjeparter.",
     "loadSceneOverridePrompt": "Å laste inn ekstern tegning vil erstatte det eksisterende innholdet. Ønsker du å fortsette?",
+    "collabStopOverridePrompt": "Hvis du slutter økten, overskrives din forrige, lokalt lagrede tegning. Er du sikker?\n\n(Hvis du ønsker å beholde din lokale tegning, bare lukk nettleserfanen i stedet.)",
     "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",
@@ -233,10 +236,16 @@
     "storage": "Lagring",
     "title": "Statistikk for nerder",
     "total": "Totalt",
+    "version": "Versjon",
+    "versionCopy": "Klikk for å kopiere",
+    "versionNotAvailable": "Versjon ikke tilgjengelig",
     "width": "Bredde"
   },
   "toast": {
     "copyStyles": "Kopierte stiler.",
-    "copyToClipboardAsPng": "Kopiert til utklippstavlen som PNG."
+    "copyToClipboard": "Kopiert til utklippstavlen.",
+    "copyToClipboardAsPng": "Kopiert til utklippstavlen som PNG.",
+    "fileSaved": "Fil lagret.",
+    "fileSavedToFilename": "Lagret til {filename}"
   }
 }

src/locales/nl-NL.json

@@ -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,12 +77,12 @@
     "group": "Groeperen",
     "ungroup": "Groep opheffen",
     "collaborators": "Deelnemers",
-    "gridMode": "Rasterweergave",
+    "showGrid": "Raster weergeven",
     "addToLibrary": "Voeg toe aan bibliotheek",
     "removeFromLibrary": "Verwijder uit bibliotheek",
-    "libraryLoadingMessage": "Bibliotheek laden...",
+    "libraryLoadingMessage": "Bibliotheek laden…",
     "libraries": "Blader door bibliotheken",
-    "loadingScene": "Scène laden...",
+    "loadingScene": "Scène laden…",
     "align": "Uitlijnen",
     "alignTop": "Boven uitlijnen",
     "alignBottom": "Onder uitlijnen",
@@ -91,7 +91,8 @@
     "centerVertically": "Verticaal Centreren",
     "centerHorizontally": "Horizontaal Centreren",
     "distributeHorizontally": "Horizontaal verspreiden",
-    "distributeVertically": "Verticaal distribueren"
+    "distributeVertically": "Verticaal distribueren",
+    "viewMode": "Weergavemodus"
   },
   "buttons": {
     "clearReset": "Canvas opnieuw instellen",
@@ -116,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",
@@ -135,10 +136,12 @@
     "decryptFailed": "Kan gegevens niet decoderen.",
     "uploadedSecurly": "De upload is beveiligd met end-to-end encryptie, wat betekent dat de Excalidraw server en derden de inhoud niet kunnen lezen.",
     "loadSceneOverridePrompt": "Het laden van externe tekening zal uw bestaande inhoud vervangen. Wil je doorgaan?",
+    "collabStopOverridePrompt": "",
     "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",
@@ -233,10 +236,16 @@
     "storage": "Opslag",
     "title": "Statistieken voor nerds",
     "total": "Totaal",
+    "version": "Versie",
+    "versionCopy": "Klik om te kopiëren",
+    "versionNotAvailable": "Versie niet beschikbaar",
     "width": "Breedte"
   },
   "toast": {
     "copyStyles": "Stijlen gekopieerd.",
-    "copyToClipboardAsPng": "Gekopieerd naar klembord als PNG."
+    "copyToClipboard": "Gekopieerd naar het klembord.",
+    "copyToClipboardAsPng": "Gekopieerd naar klembord als PNG.",
+    "fileSaved": "Bestand opgeslagen.",
+    "fileSavedToFilename": "Opgeslagen als {filename}"
   }
 }

src/locales/nn-NO.json

@@ -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,12 +77,12 @@
     "group": "Grupper utval",
     "ungroup": "Avgrupper utval",
     "collaborators": "Samarbeidarar",
-    "gridMode": "Rutevisning",
+    "showGrid": "",
     "addToLibrary": "Legg til i bibliotek",
     "removeFromLibrary": "Fjern frå bibliotek",
-    "libraryLoadingMessage": "Laster bibliotek...",
+    "libraryLoadingMessage": "Laster bibliotek…",
     "libraries": "Blad gjennom bibliotek",
-    "loadingScene": "Laster scene...",
+    "loadingScene": "Laster scene…",
     "align": "Juster",
     "alignTop": "Juster til topp",
     "alignBottom": "Juster til botn",
@@ -91,7 +91,8 @@
     "centerVertically": "Midtstill vertikalt",
     "centerHorizontally": "Midtstill horisontalt",
     "distributeHorizontally": "Sprei horisontalt",
-    "distributeVertically": "Sprei vertikalt"
+    "distributeVertically": "Sprei vertikalt",
+    "viewMode": ""
   },
   "buttons": {
     "clearReset": "Tilbakestill lerretet",
@@ -116,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",
@@ -135,10 +136,12 @@
     "decryptFailed": "Kunne ikkje dekryptere data.",
     "uploadedSecurly": "Opplastinga er kryptert og er ikkje mogleg å lese av Excalidraw-serveren eller tredjepartar.",
     "loadSceneOverridePrompt": "Innlasting av ekstern teikning erstattar ditt eksisterande innhald. Ynskjer du å fortsette?",
+    "collabStopOverridePrompt": "",
     "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",
@@ -201,22 +204,22 @@
   },
   "helpDialog": {
     "blog": "",
-    "click": "",
+    "click": "klikk",
     "curvedArrow": "",
     "curvedLine": "",
     "documentation": "",
     "drag": "",
-    "editor": "",
+    "editor": "Redigering",
     "github": "",
     "howto": "",
-    "or": "",
+    "or": "eller",
     "preventBinding": "",
-    "shapes": "",
+    "shapes": "Formar",
     "shortcuts": "",
     "textFinish": "",
     "textNewLine": "",
-    "title": "",
-    "view": "",
+    "title": "Hjelp",
+    "view": "Vising",
     "zoomToFit": "",
     "zoomToSelection": ""
   },
@@ -233,10 +236,16 @@
     "storage": "Lagring",
     "title": "Statistikk for nerdar",
     "total": "Totalt",
+    "version": "",
+    "versionCopy": "",
+    "versionNotAvailable": "",
     "width": "Breidde"
   },
   "toast": {
     "copyStyles": "",
-    "copyToClipboardAsPng": ""
+    "copyToClipboard": "",
+    "copyToClipboardAsPng": "",
+    "fileSaved": "",
+    "fileSavedToFilename": ""
   }
 }

src/locales/pa-IN.json

@@ -68,7 +68,7 @@
     "layers": "ਪਰਤਾਂ",
     "actions": "ਕਾਰਵਾਈਆਂ",
     "language": "ਭਾਸ਼ਾ",
-    "createRoom": "ਲਾਇਵ ਸਹਿਯੋਗ ਇਜਲਾਸ ਸਾਂਝਾ ਕਰੋ",
+    "liveCollaboration": "",
     "duplicateSelection": "ਡੁਪਲੀਕੇਟ ਬਣਾਓ",
     "untitled": "ਬੇ-ਸਿਰਨਾਵਾਂ",
     "name": "ਨਾਂ",
@@ -77,12 +77,12 @@
     "group": "ਚੋਣ ਦਾ ਗਰੁੱਪ ਬਣਾਓ",
     "ungroup": "ਚੋਣ ਦਾ ਗਰੁੱਪ ਤੋੜੋ",
     "collaborators": "ਸਹਿਯੋਗੀ",
-    "gridMode": "ਜਾਲੀਦਾਰ ਮੋਡ",
+    "showGrid": "ਜਾਲੀ ਦਿਖਾਓ",
     "addToLibrary": "ਲਾਇਬ੍ਰੇਰੀ ਵਿੱਚ ਜੋੜੋ",
     "removeFromLibrary": "ਲਾਇਬ੍ਰੇਰੀ 'ਚੋਂ ਹਟਾਓ",
-    "libraryLoadingMessage": "ਲਾਇਬ੍ਰੇਰੀ ਲੋਡ ਕੀਤੀ ਜਾ ਰਹੀ ਹੈ...",
+    "libraryLoadingMessage": "ਲਾਇਬ੍ਰੇਰੀ ਲੋਡ ਕੀਤੀ ਜਾ ਰਹੀ ਹੈ…",
     "libraries": "ਲਾਇਬ੍ਰੇਰੀਆਂ ਬਰਾਉਜ਼ ਕਰੋ",
-    "loadingScene": "ਦ੍ਰਿਸ਼ ਲੋਡ ਕੀਤਾ ਜਾ ਰਿਹਾ ਹੈ...",
+    "loadingScene": "ਦ੍ਰਿਸ਼ ਲੋਡ ਕੀਤਾ ਜਾ ਰਿਹਾ ਹੈ…",
     "align": "ਇਕਸਾਰ",
     "alignTop": "ਉੱਪਰ ਇਕਸਾਰ ਕਰੋ",
     "alignBottom": "ਹੇਠਾਂ ਇਕਸਾਰ ਕਰੋ",
@@ -91,7 +91,8 @@
     "centerVertically": "ਲੇਟਵੇਂ ਵਿਚਕਾਰ ਕਰੋ",
     "centerHorizontally": "ਖੜ੍ਹਵੇਂ ਵਿਚਕਾਰ ਕਰੋ",
     "distributeHorizontally": "ਖੜ੍ਹਵੇਂ ਇਕਸਾਰ ਵੰਡੋ",
-    "distributeVertically": "ਲੇਟਵੇਂ ਇਕਸਾਰ ਵੰਡੋ"
+    "distributeVertically": "ਲੇਟਵੇਂ ਇਕਸਾਰ ਵੰਡੋ",
+    "viewMode": "ਦੇਖੋ ਮੋਡ"
   },
   "buttons": {
     "clearReset": "ਕੈਨਵਸ ਰੀਸੈੱਟ ਕਰੋ",
@@ -116,7 +117,7 @@
     "edit": "ਸੋਧੋ",
     "undo": "ਅਣਕੀਤਾ ਕਰੋ",
     "redo": "ਮੁੜ-ਕਰੋ",
-    "roomDialog": "ਲਾਇਵ ਸਹਿਯੋਗ ਸ਼ੁਰੂ ਕਰੋ",
+    "resetLibrary": "",
     "createNewRoom": "ਨਵਾਂ ਕਮਰਾ ਬਣਾਓ",
     "fullScreen": "ਪੂਰੀ ਸਕਰੀਨ",
     "darkMode": "ਡਾਰਕ ਮੋਡ",
@@ -135,10 +136,12 @@
     "decryptFailed": "ਡਾਟਾ ਡੀਕਰਿਪਟ ਨਹੀਂ ਕਰ ਸਕੇ।",
     "uploadedSecurly": "ਅੱਪਲੋਡ ਸਿਰੇ-ਤੋਂ-ਸਿਰੇ ਤੱਕ ਇਨਕਰਿਪਸ਼ਨ ਨਾਲ ਸੁਰੱਖਿਅਤ ਕੀਤੀ ਹੋਈ ਹੈ, ਜਿਸਦਾ ਮਤਲਬ ਇਹ ਹੈ ਕਿ Excalidraw ਸਰਵਰ ਅਤੇ ਤੀਜੀ ਧਿਰ ਦੇ ਬੰਦੇ ਸਮੱਗਰੀ ਨੂੰ ਪੜ੍ਹ ਨਹੀਂ ਸਕਦੇ।",
     "loadSceneOverridePrompt": "ਬਾਹਰੀ ਡਰਾਇੰਗ ਨੂੰ ਲੋਡ ਕਰਨਾ ਤੁਹਾਡੀ ਮੌਜੂਦਾ ਸਮੱਗਰੀ ਦੀ ਥਾਂ ਲੈ ਲਵੇਗਾ। ਕੀ ਤੁਸੀਂ ਜਾਰੀ ਰੱਖਣਾ ਚਾਹੁੰਦੇ ਹੋ?",
+    "collabStopOverridePrompt": "ਇਜਲਾਸ ਨੂੰ ਰੋਕਣਾ ਪਿਛਲੀ ਲੋਕਲ ਸਾਂਭੀ ਡਰਾਇੰਗ ਦੀ ਥਾਂ ਲੈ ਲਵੇਗਾ। ਪੱਕਾ ਇੰਝ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ?\n\n(ਜੇ ਤੁਸੀਂ ਆਪਣੀ ਲੋਕਲ ਡਰਾਇੰਗ ਨੂੰ ਬਰਕਰਾਰ ਰੱਖਣਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ ਇਹ ਕਰਨ ਦੀ ਬਜਾਏ ਬੱਸ ਆਪਣਾ ਟੈਬ ਬੰਦ ਕਰ ਦਿਉ।)",
     "errorLoadingLibrary": "ਤੀਜੀ ਧਿਰ ਦੀ ਲਾਇਬ੍ਰੇਰੀ ਨੂੰ ਲੋਡ ਕਰਨ ਵਿੱਚ ਗਲਤੀ ਹੋਈ ਸੀ।",
     "confirmAddLibrary": "ਇਹ ਤੁਹਾਡੀ ਲਾਇਬ੍ਰੇਰੀ ਵਿੱਚ {{numShapes}} ਆਕ੍ਰਿਤੀ(ਆਂ) ਨੂੰ ਜੋੜ ਦੇਵੇਗਾ। ਕੀ ਤੁਸੀਂ ਪੱਕਾ ਇੰਝ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ?",
     "imageDoesNotContainScene": "ਫਿਲਹਾਲ ਤਸਵੀਰਾਂ ਨੂੰ ਆਯਾਤ ਕਰਨ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦਾ।\n\nਕੀ ਤੁਸੀਂ ਦ੍ਰਿਸ਼ ਨੂੰ ਆਯਾਤ ਕਰਨਾ ਚਾਹੁੰਦੇ ਸੀ? ਇਸ ਤਸਵੀਰ ਵਿੱਚ ਦ੍ਰਿਸ਼ ਦਾ ਕੋਈ ਵੀ ਡਾਟਾ ਨਜ਼ਰ ਨਹੀਂ ਆ ਰਿਹਾ। ਕੀ ਨਿਰਯਾਤ ਦੌਰਾਨ ਤੁਸੀਂ ਇਹ ਸਮਰੱਥ ਕੀਤਾ ਸੀ?",
-    "cannotRestoreFromImage": "ਇਸ ਤਸਵੀਰ ਫਾਈਲ ਤੋਂ ਦ੍ਰਿਸ਼ ਬਹਾਲ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਿਆ"
+    "cannotRestoreFromImage": "ਇਸ ਤਸਵੀਰ ਫਾਈਲ ਤੋਂ ਦ੍ਰਿਸ਼ ਬਹਾਲ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਿਆ",
+    "resetLibrary": ""
   },
   "toolBar": {
     "selection": "ਚੋਣਕਾਰ",
@@ -233,10 +236,16 @@
     "storage": "ਸਟੋਰੇਜ",
     "title": "ਪੜਾਕੂਆਂ ਲਈ ਅੰਕੜੇ",
     "total": "ਕੁੱਲ",
+    "version": "ਸੰਸਕਰਨ",
+    "versionCopy": "ਕਾਪੀ ਕਰਨ ਲਈ ਕਲਿੱਕ ਕਰੋ",
+    "versionNotAvailable": "ਸੰਸਕਰਨ ਉਪਲਬਧ ਨਹੀਂ ਹੈ",
     "width": "ਚੌੜਾਈ"
   },
   "toast": {
     "copyStyles": "ਕਾਪੀ ਕੀਤੇ ਸਟਾਇਲ।",
-    "copyToClipboardAsPng": "ਕਲਿੱਪਬੋਰਡ 'ਤੇ PNG ਵਜੋਂ ਕਾਪੀ ਕੀਤਾ।"
+    "copyToClipboard": "ਕਲਿੱਪਬੋਰਡ 'ਤੇ ਕਾਪੀ ਕੀਤਾ।",
+    "copyToClipboardAsPng": "ਕਲਿੱਪਬੋਰਡ 'ਤੇ PNG ਵਜੋਂ ਕਾਪੀ ਕੀਤਾ।",
+    "fileSaved": "ਫਾਈਲ ਸਾਂਭੀ ਗਈ।",
+    "fileSavedToFilename": "{filename} ਵਿੱਚ ਸਾਂਭੀ"
   }
 }

src/locales/percentages.json

@@ -1,35 +1,36 @@
 {
-  "ar-SA": 90,
-  "bg-BG": 94,
-  "ca-ES": 90,
+  "ar-SA": 85,
+  "bg-BG": 98,
+  "ca-ES": 85,
   "de-DE": 100,
   "el-GR": 100,
   "en": 100,
   "es-ES": 100,
-  "fa-IR": 98,
+  "fa-IR": 93,
   "fi-FI": 100,
   "fr-FR": 100,
-  "he-IL": 90,
-  "hi-IN": 90,
-  "hu-HU": 90,
-  "id-ID": 100,
+  "he-IL": 85,
+  "hi-IN": 96,
+  "hu-HU": 85,
+  "id-ID": 99,
   "it-IT": 100,
-  "ja-JP": 81,
-  "ko-KR": 90,
-  "my-MM": 83,
+  "ja-JP": 100,
+  "kab-KAB": 97,
+  "ko-KR": 97,
+  "my-MM": 79,
   "nb-NO": 100,
-  "nl-NL": 100,
-  "nn-NO": 90,
-  "pa-IN": 100,
-  "pl-PL": 90,
+  "nl-NL": 99,
+  "nn-NO": 87,
+  "pa-IN": 99,
+  "pl-PL": 85,
   "pt-BR": 100,
-  "pt-PT": 100,
+  "pt-PT": 94,
   "ro-RO": 100,
   "ru-RU": 100,
   "sk-SK": 100,
   "sv-SE": 100,
-  "tr-TR": 90,
-  "uk-UA": 100,
-  "zh-CN": 100,
+  "tr-TR": 85,
+  "uk-UA": 99,
+  "zh-CN": 95,
   "zh-TW": 100
 }

src/locales/pl-PL.json

@@ -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,12 +77,12 @@
     "group": "Zgrupuj wybrane",
     "ungroup": "Rozgrupuj wybrane",
     "collaborators": "Współtwórcy",
-    "gridMode": "Tryb siatki",
+    "showGrid": "",
     "addToLibrary": "Dodaj do biblioteki",
     "removeFromLibrary": "Usuń z biblioteki",
-    "libraryLoadingMessage": "Wczytywanie biblioteki...",
+    "libraryLoadingMessage": "Ładowanie biblioteki…",
     "libraries": "Przeglądaj biblioteki",
-    "loadingScene": "Ładowanie sceny...",
+    "loadingScene": "Ładowanie sceny…",
     "align": "Wyrównaj",
     "alignTop": "Wyrównaj do góry",
     "alignBottom": "Wyrównaj do dołu",
@@ -91,7 +91,8 @@
     "centerVertically": "Wyśrodkuj w pionie",
     "centerHorizontally": "Wyśrodkuj w poziomie",
     "distributeHorizontally": "Rozłóż poziomo",
-    "distributeVertically": "Rozłóż pionowo"
+    "distributeVertically": "Rozłóż pionowo",
+    "viewMode": "Tryb widoku"
   },
   "buttons": {
     "clearReset": "Wyczyść dokument i zresetuj kolor dokumentu",
@@ -116,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",
@@ -135,10 +136,12 @@
     "decryptFailed": "Nie udało się odszyfrować danych.",
     "uploadedSecurly": "By zapewnić Ci prywatność, udostępnianie projektu jest zabezpieczone szyfrowaniem end-to-end, co oznacza, że poza tobą i osobą z którą podzielisz się linkiem, nikt nie ma dostępu do tego co udostępniasz.",
     "loadSceneOverridePrompt": "Wczytanie zewnętrznego rysunku zastąpi istniejącą zawartość. Czy chcesz kontynuować?",
+    "collabStopOverridePrompt": "",
     "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",
@@ -233,10 +236,16 @@
     "storage": "Pamięć",
     "title": "Statystyki dla nerdów",
     "total": "Łącznie",
+    "version": "",
+    "versionCopy": "",
+    "versionNotAvailable": "",
     "width": "Szerokość"
   },
   "toast": {
     "copyStyles": "",
-    "copyToClipboardAsPng": ""
+    "copyToClipboard": "",
+    "copyToClipboardAsPng": "",
+    "fileSaved": "",
+    "fileSavedToFilename": ""
   }
 }

src/locales/pt-BR.json

@@ -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,12 +77,12 @@
     "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...",
+    "libraryLoadingMessage": "Carregando biblioteca…",
     "libraries": "Procurar bibliotecas",
-    "loadingScene": "Carregando cena...",
+    "loadingScene": "Carregando cena…",
     "align": "Alinhamento",
     "alignTop": "Alinhar ao topo",
     "alignBottom": "Alinhar embaixo",
@@ -91,7 +91,8 @@
     "centerVertically": "Centralizar verticalmente",
     "centerHorizontally": "Centralizar horizontalmente",
     "distributeHorizontally": "Distribuir horizontalmente",
-    "distributeVertically": "Distribuir verticalmente"
+    "distributeVertically": "Distribuir verticalmente",
+    "viewMode": "Modo de visualização"
   },
   "buttons": {
     "clearReset": "Limpar o canvas e redefinir a cor de fundo",
@@ -116,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",
@@ -135,10 +136,12 @@
     "decryptFailed": "Não foi possível descriptografar os dados.",
     "uploadedSecurly": "O upload foi protegido com criptografia de ponta a ponta, o que significa que o servidor do Excalidraw e terceiros não podem ler o conteúdo.",
     "loadSceneOverridePrompt": "Carregar um desenho externo substituirá o seu conteúdo existente. Deseja continuar?",
+    "collabStopOverridePrompt": "Ao interromper a sessão, você substituirá seu desenho anterior, armazenado localmente. Você tem certeza?\n\n(Se você deseja manter seu desenho local, simplesmente feche a aba do navegador.)",
     "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",
@@ -233,10 +236,16 @@
     "storage": "Armazenamento",
     "title": "Estatísticas para nerds",
     "total": "Total",
+    "version": "Versão",
+    "versionCopy": "Clique para copiar",
+    "versionNotAvailable": "Versão não disponível",
     "width": "Largura"
   },
   "toast": {
     "copyStyles": "Estilos copiados.",
-    "copyToClipboardAsPng": "Copiado para a área de transferência como PNG."
+    "copyToClipboard": "Copiado para área de transferência.",
+    "copyToClipboardAsPng": "Copiado para a área de transferência como PNG.",
+    "fileSaved": "Arquivo salvo.",
+    "fileSavedToFilename": "Salvo em {filename}"
   }
 }

src/locales/pt-PT.json

@@ -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,12 +77,12 @@
     "group": "Agrupar seleção",
     "ungroup": "Desagrupar seleção",
     "collaborators": "Colaboradores",
-    "gridMode": "Modo grade",
+    "showGrid": "",
     "addToLibrary": "Adicionar à biblioteca",
     "removeFromLibrary": "Remover da biblioteca",
-    "libraryLoadingMessage": "Carregando biblioteca...",
+    "libraryLoadingMessage": "Carregando biblioteca…",
     "libraries": "Procurar bibliotecas",
-    "loadingScene": "Carregando cena...",
+    "loadingScene": "Carregando cena…",
     "align": "Alinhamento",
     "alignTop": "Alinhar ao topo",
     "alignBottom": "Alinhar ao fundo",
@@ -91,7 +91,8 @@
     "centerVertically": "Centralizar verticalmente",
     "centerHorizontally": "Centralizar horizontalmente",
     "distributeHorizontally": "Distribuir horizontalmente",
-    "distributeVertically": "Distribuir verticalmente"
+    "distributeVertically": "Distribuir verticalmente",
+    "viewMode": ""
   },
   "buttons": {
     "clearReset": "Limpar o canvas e redefinir a cor de fundo",
@@ -116,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",
@@ -135,10 +136,12 @@
     "decryptFailed": "Não foi possível descriptografar os dados.",
     "uploadedSecurly": "O upload foi protegido com criptografia de ponta a ponta, o que significa que o servidor do Excalidraw e terceiros não podem ler o conteúdo.",
     "loadSceneOverridePrompt": "Carregar um desenho externo substituirá o seu conteúdo existente. Deseja continuar?",
+    "collabStopOverridePrompt": "",
     "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",
@@ -233,10 +236,16 @@
     "storage": "Armazenamento",
     "title": "Estatísticas para nerds",
     "total": "Total",
+    "version": "",
+    "versionCopy": "",
+    "versionNotAvailable": "",
     "width": "Largura"
   },
   "toast": {
     "copyStyles": "Estilos copiados.",
-    "copyToClipboardAsPng": "Copiado para o clipboard como PNG."
+    "copyToClipboard": "",
+    "copyToClipboardAsPng": "Copiado para o clipboard como PNG.",
+    "fileSaved": "",
+    "fileSavedToFilename": ""
   }
 }

src/locales/ro-RO.json

@@ -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,12 +77,12 @@
     "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...",
+    "libraryLoadingMessage": "Se încarcă biblioteca…",
     "libraries": "Răsfoiește bibliotecile",
-    "loadingScene": "Se încarcă scena...",
+    "loadingScene": "Se încarcă scena…",
     "align": "Aliniere",
     "alignTop": "Aliniere sus",
     "alignBottom": "Aliniere jos",
@@ -91,7 +91,8 @@
     "centerVertically": "Centrare verticală",
     "centerHorizontally": "Centrare orizontală",
     "distributeHorizontally": "Distribuie orizontal",
-    "distributeVertically": "Distribuie vertical"
+    "distributeVertically": "Distribuie vertical",
+    "viewMode": "Mod de vizualizare"
   },
   "buttons": {
     "clearReset": "Resetare pânză",
@@ -116,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",
@@ -135,10 +136,12 @@
     "decryptFailed": "Datele nu au putut fi decriptate.",
     "uploadedSecurly": "Încărcarea a fost securizată prin criptare integrală, însemnând că serverul Excalidraw și terții nu pot citi conținutul.",
     "loadSceneOverridePrompt": "Încărcarea desenului extern va înlocui conținutul existent. Dorești să continui?",
+    "collabStopOverridePrompt": "Oprirea sesiunii va suprascrie desenul anterior stocat local. Confirmi alegerea?\n\n(Dacă vrei să păstrezi desenul local, pur și simplu închide fila navigatorului în schimb.)",
     "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",
@@ -233,10 +236,16 @@
     "storage": "Stocare",
     "title": "Statistici pentru pasionați",
     "total": "Total",
+    "version": "Versiune",
+    "versionCopy": "Clic pentru copiere",
+    "versionNotAvailable": "Versiune indisponibilă",
     "width": "Lățime"
   },
   "toast": {
     "copyStyles": "Stiluri copiate.",
-    "copyToClipboardAsPng": "Copiat în memoria temporară ca PNG."
+    "copyToClipboard": "Copiat în memoria temporară.",
+    "copyToClipboardAsPng": "Copiat în memoria temporară ca PNG.",
+    "fileSaved": "Fișier salvat.",
+    "fileSavedToFilename": "Salvat în {filename}"
   }
 }

src/locales/ru-RU.json

@@ -68,7 +68,7 @@
     "layers": "Слои",
     "actions": "Действия",
     "language": "Язык",
-    "createRoom": "Начать сеанс совместной работы",
+    "liveCollaboration": "Совместное взаимодействие",
     "duplicateSelection": "Дубликат",
     "untitled": "Безымянный",
     "name": "Имя",
@@ -77,12 +77,12 @@
     "group": "Сгруппировать выделение",
     "ungroup": "Разделить выделение",
     "collaborators": "Участники",
-    "gridMode": "Сетка",
+    "showGrid": "Показать сетку",
     "addToLibrary": "Добавить в библиотеку",
     "removeFromLibrary": "Удалить из библиотеки",
-    "libraryLoadingMessage": "Загрузка библиотеки...",
+    "libraryLoadingMessage": "Загрузка библиотеки…",
     "libraries": "Просмотреть библиотеки",
-    "loadingScene": "Загрузка сцены...",
+    "loadingScene": "Загрузка сцены…",
     "align": "Выровнять",
     "alignTop": "Выровнять по верхнему краю",
     "alignBottom": "Выровнять по нижнему краю",
@@ -91,7 +91,8 @@
     "centerVertically": "Центрировать по вертикали",
     "centerHorizontally": "Центрировать по горизонтали",
     "distributeHorizontally": "Распределить по горизонтали",
-    "distributeVertically": "Распределить по вертикали"
+    "distributeVertically": "Распределить по вертикали",
+    "viewMode": "Вид"
   },
   "buttons": {
     "clearReset": "Очистить холст и сбросить цвет фона",
@@ -116,7 +117,7 @@
     "edit": "Изменить",
     "undo": "Шаг назад",
     "redo": "Шаг вперед",
-    "roomDialog": "Начать совместную работу",
+    "resetLibrary": "Сброс библиотеки",
     "createNewRoom": "Создать новую комнату",
     "fullScreen": "Полный экран",
     "darkMode": "Темная тема",
@@ -135,10 +136,12 @@
     "decryptFailed": "Не удалось расшифровать данные.",
     "uploadedSecurly": "Загружаемые данные защищена сквозным шифрованием, что означает, что сервер Excalidraw и третьи стороны не могут прочитать содержимое.",
     "loadSceneOverridePrompt": "Загрузка рисунка приведёт к замене имеющегося содержимого. Вы хотите продолжить?",
+    "collabStopOverridePrompt": "Остановка сессии перезапишет ваш предыдущий, локально сохранённый рисунок. Вы уверены? \n\n(Если вы хотите оставить ваш локальный рисунок, просто закройте вкладку браузера)",
     "errorLoadingLibrary": "Произошла ошибка при загрузке сторонней библиотеки.",
     "confirmAddLibrary": "Будет добавлено {{numShapes}} фигур в вашу библиотеку. Продолжить?",
     "imageDoesNotContainScene": "Импорт изображений не поддерживается в данный момент.\n\nХотите импортировать сцену? Данное изображение не содержит данных о сцене. Было ли включено это во время экспорта?",
-    "cannotRestoreFromImage": "Сцена не может быть восстановлена из этого изображения"
+    "cannotRestoreFromImage": "Сцена не может быть восстановлена из этого изображения",
+    "resetLibrary": "Это очистит вашу библиотеку. Вы уверены?"
   },
   "toolBar": {
     "selection": "Выделение области",
@@ -233,10 +236,16 @@
     "storage": "Хранилище",
     "title": "Статистика для ботаников",
     "total": "Всего",
+    "version": "Версия",
+    "versionCopy": "Копировать",
+    "versionNotAvailable": "Версия не доступна",
     "width": "Ширина"
   },
   "toast": {
     "copyStyles": "Скопированы стили.",
-    "copyToClipboardAsPng": "Скопировано в буфер обмена в формате PNG."
+    "copyToClipboard": "Скопировано в буфер обмена.",
+    "copyToClipboardAsPng": "Скопировано в буфер обмена в формате PNG.",
+    "fileSaved": "Файл сохранён.",
+    "fileSavedToFilename": "Сохранено в {filename}"
   }
 }

src/locales/sk-SK.json

@@ -68,7 +68,7 @@
     "layers": "Vrstvy",
     "actions": "Akcie",
     "language": "Jazyk",
-    "createRoom": "Zdieľajte živú spoluprácu",
+    "liveCollaboration": "Živá spolupráca",
     "duplicateSelection": "Duplikovať",
     "untitled": "Bez názvu",
     "name": "Meno",
@@ -77,12 +77,12 @@
     "group": "Zoskupiť",
     "ungroup": "Zrušiť zoskupenie",
     "collaborators": "Spolupracovníci",
-    "gridMode": "Režim mriežky",
+    "showGrid": "Zobraziť mriežku",
     "addToLibrary": "Pridať do knižnice",
     "removeFromLibrary": "Odstrániť z knižnice",
-    "libraryLoadingMessage": "Načítavanie knižnice...",
+    "libraryLoadingMessage": "Načítavanie knižnice…",
     "libraries": "Prehliadať knižnice",
-    "loadingScene": "Načítavanie scény...",
+    "loadingScene": "Načítavanie scény…",
     "align": "Zarovnanie",
     "alignTop": "Zarovnať nahor",
     "alignBottom": "Zarovnať nadol",
@@ -91,7 +91,8 @@
     "centerVertically": "Zarovnať zvislo na stred",
     "centerHorizontally": "Zarovnať vodorovne na stred",
     "distributeHorizontally": "Rozmiestniť vodorovne",
-    "distributeVertically": "Rozmiestniť zvisle"
+    "distributeVertically": "Rozmiestniť zvisle",
+    "viewMode": "Režim zobrazenia"
   },
   "buttons": {
     "clearReset": "Obnoviť plátno",
@@ -116,7 +117,7 @@
     "edit": "Upraviť",
     "undo": "Späť",
     "redo": "Znova",
-    "roomDialog": "Začať živú spoluprácu",
+    "resetLibrary": "Obnoviť knižnicu",
     "createNewRoom": "Vytvoriť novú miestnosť",
     "fullScreen": "Celá obrazovka",
     "darkMode": "Tmavý režim",
@@ -135,10 +136,12 @@
     "decryptFailed": "Nepodarilo sa rozšifrovať údaje.",
     "uploadedSecurly": "Nahratie je zabezpečené end-to-end šifrovaním, takže Excalidraw server a tretie strany nedokážu prečítať jeho obsah.",
     "loadSceneOverridePrompt": "Nahratie externej kresby nahradí existujúci obsah. Prajete si pokračovať?",
+    "collabStopOverridePrompt": "Ukončenie schôdze nahradí vašu predchádzajúcu lokálne uloženú scénu. Ste si istý?\n\n(Ak si chcete ponechať lokálnu scénu, jednoducho iba zavrite kartu prehliadača.)",
     "errorLoadingLibrary": "Nepodarilo sa načítať externú knižnicu.",
     "confirmAddLibrary": "Týmto sa pridá {{numShapes}} tvar(ov) do vašej knižnice. Ste si istí?",
     "imageDoesNotContainScene": "Importovanie obrázku v tomto momente nie je možné.\n\nChceli ste importovať scénu? Tento obrázok neobsahuje žiadne údaje scény. Povolili ste túto možnosť počas exportovania?",
-    "cannotRestoreFromImage": "Nepodarilo sa obnoviť scénu z tohto obrázkového súboru"
+    "cannotRestoreFromImage": "Nepodarilo sa obnoviť scénu z tohto obrázkového súboru",
+    "resetLibrary": "Týmto vyprázdnite vašu knižnicu. Ste si istý?"
   },
   "toolBar": {
     "selection": "Výber",
@@ -233,10 +236,16 @@
     "storage": "Úložisko",
     "title": "Štatistiky",
     "total": "Celkom",
+    "version": "Verzia",
+    "versionCopy": "Kliknutím skopírujete",
+    "versionNotAvailable": "Verzia nie je k dispozícii",
     "width": "Šírka"
   },
   "toast": {
     "copyStyles": "Štýly skopírované.",
-    "copyToClipboardAsPng": "Skopírované do schránky ako PNG."
+    "copyToClipboard": "Skopírované do schránky.",
+    "copyToClipboardAsPng": "Skopírované do schránky ako PNG.",
+    "fileSaved": "Súbor uložený.",
+    "fileSavedToFilename": "Uložený ako {filename}"
   }
 }

src/locales/sv-SE.json

@@ -68,7 +68,7 @@
     "layers": "Lager",
     "actions": "Åtgärder",
     "language": "Språk",
-    "createRoom": "Dela en live-samarbetssession",
+    "liveCollaboration": "Samarbeta live",
     "duplicateSelection": "Duplicera",
     "untitled": "Namnlös",
     "name": "Namn",
@@ -77,12 +77,12 @@
     "group": "Gruppera markering",
     "ungroup": "Avgruppera markering",
     "collaborators": "Medarbetare",
-    "gridMode": "Rutnätsläge",
+    "showGrid": "Visa rutnät",
     "addToLibrary": "Lägg till i biblioteket",
     "removeFromLibrary": "Ta bort från bibliotek",
-    "libraryLoadingMessage": "Laddar bibliotek...",
+    "libraryLoadingMessage": "Laddar bibliotek…",
     "libraries": "Bläddra i bibliotek",
-    "loadingScene": "Laddar scen...",
+    "loadingScene": "Laddar skiss…",
     "align": "Justera",
     "alignTop": "Justera överkant",
     "alignBottom": "Justera underkant",
@@ -91,7 +91,8 @@
     "centerVertically": "Centrera vertikalt",
     "centerHorizontally": "Centrera horisontellt",
     "distributeHorizontally": "Fördela horisontellt",
-    "distributeVertically": "Fördela vertikalt"
+    "distributeVertically": "Fördela vertikalt",
+    "viewMode": "Visningsläge"
   },
   "buttons": {
     "clearReset": "Återställ canvasen",
@@ -116,7 +117,7 @@
     "edit": "Redigera",
     "undo": "Ångra",
     "redo": "Gör om",
-    "roomDialog": "Starta live-samarbete",
+    "resetLibrary": "Återställ bibliotek",
     "createNewRoom": "Skapa ett nytt rum",
     "fullScreen": "Helskärm",
     "darkMode": "Mörkt läge",
@@ -135,10 +136,12 @@
     "decryptFailed": "Kunde inte avkryptera data.",
     "uploadedSecurly": "Uppladdning har säkrats med kryptering från ände till ände. vilket innebär att Excalidraw server och tredje part inte kan läsa innehållet.",
     "loadSceneOverridePrompt": "Laddning av extern skiss kommer att ersätta ditt befintliga innehåll. Vill du fortsätta?",
+    "collabStopOverridePrompt": "Att stoppa sessionen kommer att skriva över din föregående, lokalt lagrade skiss. Är du säker?\n\n(Om du vill behålla din lokala skiss, stäng bara webbläsarfliken istället.)",
     "errorLoadingLibrary": "Fel vid inläsning av tredjeparts bibliotek.",
     "confirmAddLibrary": "Detta kommer att lägga till {{numShapes}} form(er) till ditt bibliotek. Är du säker?",
     "imageDoesNotContainScene": "Importering av bilder stöds inte just nu.\n\nVill du importera en skiss? Den här bilden verkar inte innehålla någon skissdata. Har du aktiverat detta under export?",
-    "cannotRestoreFromImage": "Skiss kunde inte återställas från denna bildfil"
+    "cannotRestoreFromImage": "Skiss kunde inte återställas från denna bildfil",
+    "resetLibrary": "Detta kommer att rensa ditt bibliotek. Är du säker?"
   },
   "toolBar": {
     "selection": "Markering",
@@ -233,10 +236,16 @@
     "storage": "Lagring",
     "title": "Statistik för nördar",
     "total": "Totalt",
+    "version": "Version",
+    "versionCopy": "Klicka för att kopiera",
+    "versionNotAvailable": "Versionen är inte tillgänglig",
     "width": "Bredd"
   },
   "toast": {
     "copyStyles": "Kopierade stilar.",
-    "copyToClipboardAsPng": "Kopierat till urklipp som PNG."
+    "copyToClipboard": "Kopierad till urklipp.",
+    "copyToClipboardAsPng": "Kopierat till urklipp som PNG.",
+    "fileSaved": "Fil sparad.",
+    "fileSavedToFilename": "Sparad till {filename}"
   }
 }

src/locales/tr-TR.json

@@ -68,7 +68,7 @@
     "layers": "Katmanlar",
     "actions": "Eylemler",
     "language": "Dil",
-    "createRoom": "Ortak çalışma ortamını paylaş",
+    "liveCollaboration": "",
     "duplicateSelection": "Çoğalt",
     "untitled": "Adsız",
     "name": "İsim",
@@ -77,12 +77,12 @@
     "group": "Seçimi grup yap",
     "ungroup": "Seçilen grubu dağıt",
     "collaborators": "Ortaklar",
-    "gridMode": "Izgara modu",
+    "showGrid": "",
     "addToLibrary": "Kütüphaneye ekle",
     "removeFromLibrary": "Kütüphaneden kaldır",
-    "libraryLoadingMessage": "Kütüphane yükleniyor...",
+    "libraryLoadingMessage": "Kütüphane yükleniyor…",
     "libraries": "Kütüphanelere gözat",
-    "loadingScene": "Çalışma alanı yükleniyor...",
+    "loadingScene": "Çalışma alanı yükleniyor…",
     "align": "Hizala",
     "alignTop": "Yukarı hizala",
     "alignBottom": "Aşağı hizala",
@@ -91,7 +91,8 @@
     "centerVertically": "Dikeyde ortala",
     "centerHorizontally": "Yatayda ortala",
     "distributeHorizontally": "Yatay dağıt",
-    "distributeVertically": "Dikey dağıt"
+    "distributeVertically": "Dikey dağıt",
+    "viewMode": ""
   },
   "buttons": {
     "clearReset": "Tuvali sıfırla",
@@ -116,7 +117,7 @@
     "edit": "Düzenle",
     "undo": "Geri Al",
     "redo": "Yeniden yap",
-    "roomDialog": "Ortak çalışma ortamı yarat",
+    "resetLibrary": "",
     "createNewRoom": "Yeni oda oluştur",
     "fullScreen": "Tam ekran",
     "darkMode": "Koyu tema",
@@ -135,10 +136,12 @@
     "decryptFailed": "Şifrelenmiş veri çözümlenemedi.",
     "uploadedSecurly": "Yükleme uçtan uca şifreleme ile korunmaktadır. Excalidraw sunucusu ve üçüncül şahıslar içeriği okuyamayacaktır.",
     "loadSceneOverridePrompt": "Harici çizimler yüklemek mevcut olan içeriği değiştirecektir. Devam etmek istiyor musunuz?",
+    "collabStopOverridePrompt": "",
     "errorLoadingLibrary": "Üçüncü taraf kitaplığı yüklerken bir hata oluştu.",
     "confirmAddLibrary": "Bu, kitaplığınıza {{numShapes}} tane şekil ekleyecek. Emin misiniz?",
     "imageDoesNotContainScene": "Resim ekleme şuan için desteklenmiyor.\nBir sahneyi içeri aktarmak mı istediniz? Bu dosya herhangi bir sahne içeriyor gibi durmuyor. Çıktı alırken sahneyi dahil ettiniz mi?",
-    "cannotRestoreFromImage": "Sahne bu dosyadan oluşturulamıyor"
+    "cannotRestoreFromImage": "Sahne bu dosyadan oluşturulamıyor",
+    "resetLibrary": ""
   },
   "toolBar": {
     "selection": "Seçme",
@@ -233,10 +236,16 @@
     "storage": "Depolama",
     "title": "İnekler için istatistikler",
     "total": "Toplam",
+    "version": "",
+    "versionCopy": "",
+    "versionNotAvailable": "",
     "width": "Genişlik"
   },
   "toast": {
     "copyStyles": "",
-    "copyToClipboardAsPng": ""
+    "copyToClipboard": "",
+    "copyToClipboardAsPng": "",
+    "fileSaved": "",
+    "fileSavedToFilename": ""
   }
 }

src/locales/uk-UA.json

@@ -68,7 +68,7 @@
     "layers": "Шари",
     "actions": "Дії",
     "language": "Мова",
-    "createRoom": "Поділитися сесією для спільної роботи",
+    "liveCollaboration": "",
     "duplicateSelection": "Дублювати",
     "untitled": "Без назви",
     "name": "Ім’я",
@@ -77,12 +77,12 @@
     "group": "Групувати виділене",
     "ungroup": "Розгрупувати виділене",
     "collaborators": "Співавтори",
-    "gridMode": "Режим сітки",
+    "showGrid": "Показати сітку",
     "addToLibrary": "Додати до бібліотеки",
     "removeFromLibrary": "Видалити з бібліотеки",
-    "libraryLoadingMessage": "Завантажити бібліотеку...",
+    "libraryLoadingMessage": "Завантажити бібліотеку…",
     "libraries": "Огляд бібліотек",
-    "loadingScene": "Завантаження сцени...",
+    "loadingScene": "Завантаження сцени…",
     "align": "Вирівнювання",
     "alignTop": "Вирівняти по верхньому краю",
     "alignBottom": "Вирівняти по нижньому краю",
@@ -91,7 +91,8 @@
     "centerVertically": "Центрувати по вертикалі",
     "centerHorizontally": "Центрувати по горизонталі",
     "distributeHorizontally": "Розподілити по горизонталі",
-    "distributeVertically": "Розподілити вертикально"
+    "distributeVertically": "Розподілити вертикально",
+    "viewMode": "Режим перегляду"
   },
   "buttons": {
     "clearReset": "Очистити полотно",
@@ -116,7 +117,7 @@
     "edit": "Редагувати",
     "undo": "Відмінити",
     "redo": "Повторити",
-    "roomDialog": "Відкрити сесію спільної роботи",
+    "resetLibrary": "",
     "createNewRoom": "Створити нову кімнату",
     "fullScreen": "Повноекранний режим",
     "darkMode": "Темний режим",
@@ -135,10 +136,12 @@
     "decryptFailed": "Не вдалося розшифрувати дані.",
     "uploadedSecurly": "Це завантаження було захищене наскрізним шифруванням, а це означає що сервер Excalidraw та інші не зможуть прочитати вміст.",
     "loadSceneOverridePrompt": "Завантаження зовнішнього креслення замінить ваш наявний контент. Продовжити?",
+    "collabStopOverridePrompt": "Зупинка сесії перезапише ваш попередній, локально збережений малюнок. Ви впевнені?\n\n(Якщо ви хочете зберегти локальний малюнок, просто закрийте замість нього вкладку браузера.)",
     "errorLoadingLibrary": "Помилка при завантаженні сторонньої бібліотеки.",
     "confirmAddLibrary": "Це призведе до додавання {{numShapes}} фігур до вашої бібліотеки. Ви впевнені?",
     "imageDoesNotContainScene": "Імпортування зображень на даний момент не підтримується.\n\nЧи хочете ви імпортувати сцену? Це зображення не містить ніяких даних сцен. Ви увімкнули це під час експорту?",
-    "cannotRestoreFromImage": "Сцена не може бути відновлена з цього файлу зображення"
+    "cannotRestoreFromImage": "Сцена не може бути відновлена з цього файлу зображення",
+    "resetLibrary": ""
   },
   "toolBar": {
     "selection": "Виділення",
@@ -233,10 +236,16 @@
     "storage": "Сховище",
     "title": "Статистика",
     "total": "Всього",
+    "version": "Версія",
+    "versionCopy": "Натисніть, щоб скопіювати",
+    "versionNotAvailable": "Версія недоступна",
     "width": "Ширина"
   },
   "toast": {
     "copyStyles": "Скопійовані стилі.",
-    "copyToClipboardAsPng": "Скопійовано в буфер обміну як PNG."
+    "copyToClipboard": "Скопіювати до буферу обміну.",
+    "copyToClipboardAsPng": "Скопійовано в буфер обміну як PNG.",
+    "fileSaved": "Файл збережено.",
+    "fileSavedToFilename": "Збережено в {filename}"
   }
 }

src/locales/zh-CN.json

@@ -68,7 +68,7 @@
     "layers": "图层",
     "actions": "操作",
     "language": "语言",
-    "createRoom": "分享实时协作会议",
+    "liveCollaboration": "",
     "duplicateSelection": "复制",
     "untitled": "无标题",
     "name": "名字",
@@ -77,12 +77,12 @@
     "group": "组选",
     "ungroup": "取消组选",
     "collaborators": "协作者",
-    "gridMode": "网格模式",
+    "showGrid": "",
     "addToLibrary": "添加到库中",
     "removeFromLibrary": "从库中移除",
-    "libraryLoadingMessage": "正在加载库...",
+    "libraryLoadingMessage": "正在加载库…",
     "libraries": "浏览库",
-    "loadingScene": "正在加载绘图...",
+    "loadingScene": "正在加载绘图…",
     "align": "对齐",
     "alignTop": "顶部对齐",
     "alignBottom": "底端对齐",
@@ -91,7 +91,8 @@
     "centerVertically": "垂直居中",
     "centerHorizontally": "水平居中",
     "distributeHorizontally": "水平等距分布",
-    "distributeVertically": "垂直等距分布"
+    "distributeVertically": "垂直等距分布",
+    "viewMode": "查看模式"
   },
   "buttons": {
     "clearReset": "重置画布",
@@ -116,7 +117,7 @@
     "edit": "编辑",
     "undo": "撤销",
     "redo": "重做",
-    "roomDialog": "开始实时协作",
+    "resetLibrary": "",
     "createNewRoom": "新建会议室",
     "fullScreen": "全屏",
     "darkMode": "暗色主题",
@@ -135,10 +136,12 @@
     "decryptFailed": "无法解密数据。",
     "uploadedSecurly": "上传已被端到端加密保护，这意味着 Excalidraw 的服务器和第三方都无法读取内容。",
     "loadSceneOverridePrompt": "加载外部绘图将取代您现有的内容。您想要继续吗？",
+    "collabStopOverridePrompt": "停止会话将覆盖您先前本地存储的绘图。 您确定吗？\n\n(如果您想保持本地绘图，只需关闭浏览器选项卡。)",
     "errorLoadingLibrary": "加载第三方库时出错。",
     "confirmAddLibrary": "这将添加 {{numShapes}} 个形状到您的库。您确定吗？",
     "imageDoesNotContainScene": "当前不支持导入图片。\n\n您想要导入画布数据吗？此图像似乎不包含任何画布数据。您是否在导出过程中启用了嵌入画布的选项？",
-    "cannotRestoreFromImage": "无法从此图像文件恢复画布"
+    "cannotRestoreFromImage": "无法从此图像文件恢复画布",
+    "resetLibrary": ""
   },
   "toolBar": {
     "selection": "选择",
@@ -233,10 +236,16 @@
     "storage": "存储",
     "title": "详细统计信息",
     "total": "总计",
+    "version": "",
+    "versionCopy": "",
+    "versionNotAvailable": "",
     "width": "宽度"
   },
   "toast": {
     "copyStyles": "复制样式",
-    "copyToClipboardAsPng": "复制为 PNG 到剪贴板"
+    "copyToClipboard": "",
+    "copyToClipboardAsPng": "复制为 PNG 到剪贴板",
+    "fileSaved": "",
+    "fileSavedToFilename": ""
   }
 }

src/locales/zh-TW.json

@@ -68,7 +68,7 @@
     "layers": "圖層",
     "actions": "動作",
     "language": "語言",
-    "createRoom": "建立新協作會議室",
+    "liveCollaboration": "即時協作",
     "duplicateSelection": "複製",
     "untitled": "無標題",
     "name": "名稱",
@@ -77,7 +77,7 @@
     "group": "建立群組",
     "ungroup": "取消群組",
     "collaborators": "協作者",
-    "gridMode": "網格模式",
+    "showGrid": "顯示格線",
     "addToLibrary": "加入資料庫",
     "removeFromLibrary": "從資料庫中移除",
     "libraryLoadingMessage": "資料庫讀取中…",
@@ -91,7 +91,8 @@
     "centerVertically": "垂直置中",
     "centerHorizontally": "水平置中",
     "distributeHorizontally": "水平分布",
-    "distributeVertically": "垂直分布"
+    "distributeVertically": "垂直分布",
+    "viewMode": "檢視模式"
   },
   "buttons": {
     "clearReset": "重置 canvas",
@@ -116,7 +117,7 @@
     "edit": "編輯",
     "undo": "復原",
     "redo": "重做",
-    "roomDialog": "開始即時協作",
+    "resetLibrary": "重設資料庫",
     "createNewRoom": "建立新協作會議室",
     "fullScreen": "全螢幕",
     "darkMode": "深色模式",
@@ -135,10 +136,12 @@
     "decryptFailed": "無法解密資料。",
     "uploadedSecurly": "上傳已通過 end-to-end 加密，Excalidraw 伺服器和第三方無法皆讀取其內容。",
     "loadSceneOverridePrompt": "讀取外部圖樣將取代目前的內容。是否要繼續？",
+    "collabStopOverridePrompt": "停止連線將覆蓋您先前於本機儲存的繪圖進度，是否確認？\n\n（如要保留原有的本機繪圖進度，直接關閉瀏覽器分頁即可。）",
     "errorLoadingLibrary": "載入第三方套件時出現錯誤。",
     "confirmAddLibrary": "這將會將 {{numShapes}} 個圖形加入你的資料庫，你確定嗎？",
     "imageDoesNotContainScene": "目前尚不支援載入圖片。\n您是否要載入場景？此圖片中並無任何場景資料，輸出時是否有選擇包含？",
-    "cannotRestoreFromImage": "無法由此檔案回復場景。"
+    "cannotRestoreFromImage": "無法由此檔案回復場景。",
+    "resetLibrary": "這會清除您的資料庫，是否確定？"
   },
   "toolBar": {
     "selection": "選取",
@@ -233,10 +236,16 @@
     "storage": "儲存",
     "title": "詳細統計",
     "total": "合計",
+    "version": "版本",
+    "versionCopy": "點擊複製",
+    "versionNotAvailable": "無法取得版本",
     "width": "寬度"
   },
   "toast": {
     "copyStyles": "已複製樣式",
-    "copyToClipboardAsPng": "已複製 PNG 至剪貼簿"
+    "copyToClipboard": "複製至剪貼簿。",
+    "copyToClipboardAsPng": "已複製 PNG 至剪貼簿",
+    "fileSaved": "已儲存檔案。",
+    "fileSavedToFilename": "儲存為 {filename}"
   }
 }

src/math.ts

@@ -1,4 +1,4 @@
-import { Point } from "./types";
+import { NormalizedZoomValue, Point, Zoom } from "./types";
 import { LINE_CONFIRM_THRESHOLD } from "./constants";
 import { ExcalidrawLinearElement } from "./element/types";
 
@@ -147,13 +147,16 @@ export const centerPoint = (a: Point, b: Point): Point => {
 // to be considered a loop
 export const isPathALoop = (
   points: ExcalidrawLinearElement["points"],
+  /** supply if you want the loop detection to account for current zoom */
+  zoomValue: Zoom["value"] = 1 as NormalizedZoomValue,
 ): boolean => {
   if (points.length >= 3) {
-    const [firstPoint, lastPoint] = [points[0], points[points.length - 1]];
-    return (
-      distance2d(firstPoint[0], firstPoint[1], lastPoint[0], lastPoint[1]) <=
-      LINE_CONFIRM_THRESHOLD
-    );
+    const [first, last] = [points[0], points[points.length - 1]];
+    const distance = distance2d(first[0], first[1], last[0], last[1]);
+
+    // Adjusting LINE_CONFIRM_THRESHOLD to current zoom so that when zoomed in
+    // really close we make the threshold smaller, and vice versa.
+    return distance <= LINE_CONFIRM_THRESHOLD / zoomValue;
   }
   return false;
 };