wip: get exact bounding box from bitmap when exporting w/o padding

.dockerignore

@@ -1,6 +1,5 @@
 *
-!.env.development
+!.env
-!.env.production
 !.eslintrc.json
 !.npmrc
 !.prettierrc

.env.development

@@ -20,5 +20,3 @@ REACT_APP_DEV_ENABLE_SW=
 # whether to disable live reload / HMR. Usuaully what you want to do when
 # debugging Service Workers.
 REACT_APP_DEV_DISABLE_LIVE_RELOAD=
-
-FAST_REFRESH=false

.github/workflows/autorelease-excalidraw.yml

@@ -2,7 +2,7 @@ name: Auto release excalidraw next
 on:
   push:
     branches:
-      - release
+      - master
 
 jobs:
   Auto-release-excalidraw-next:

.github/workflows/build-docker.yml

@@ -3,7 +3,7 @@ name: Build Docker image
 on:
   push:
     branches:
-      - release
+      - master
 
 jobs:
   build-docker:

.github/workflows/cancel.yml

@@ -3,7 +3,7 @@ name: Cancel previous runs
 on:
   push:
     branches:
-      - release
+      - master
   pull_request:
 
 jobs:

.github/workflows/publish-docker.yml

@@ -3,7 +3,7 @@ name: Publish Docker
 on:
   push:
     branches:
-      - release
+      - master
 
 jobs:
   publish-docker:

.github/workflows/sentry-production.yml

@@ -3,7 +3,7 @@ name: New Sentry production release
 on:
   push:
     branches:
-      - release
+      - master
 
 jobs:
   sentry:

.husky/pre-commit

@@ -1,2 +1,2 @@
 #!/bin/sh
-# yarn lint-staged
+yarn lint-staged

dev-docs/yarn.lock

@@ -4692,9 +4692,9 @@ json-schema-traverse@^1.0.0:
   integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
 
 json5@^2.1.2, json5@^2.2.1:
-  version "2.2.3"
+  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
-  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
+  integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
 
 jsonfile@^6.0.1:
   version "6.1.0"
@@ -4755,9 +4755,9 @@ loader-runner@^4.2.0:
   integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==
 
 loader-utils@^2.0.0:
-  version "2.0.4"
+  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.2.tgz#d6e3b4fb81870721ae4e0868ab11dd638368c129"
-  integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==
+  integrity sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==
   dependencies:
     big.js "^5.2.2"
     emojis-list "^3.0.0"

package.json

@@ -31,7 +31,6 @@
     "@types/socket.io-client": "1.4.36",
     "browser-fs-access": "0.29.1",
     "clsx": "1.1.1",
-    "cross-env": "7.0.3",
     "fake-indexeddb": "3.1.7",
     "firebase": "8.3.3",
     "i18next-browser-languagedetector": "6.1.4",
@@ -51,23 +50,11 @@
     "pwacompat": "2.0.17",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "4.0.3",
     "roughjs": "4.5.2",
     "sass": "1.51.0",
     "socket.io-client": "2.3.1",
-    "typescript": "4.9.4",
+    "typescript": "4.5.5"
-    "workbox-background-sync": "^6.5.4",
-    "workbox-broadcast-update": "^6.5.4",
-    "workbox-cacheable-response": "^6.5.4",
-    "workbox-core": "^6.5.4",
-    "workbox-expiration": "^6.5.4",
-    "workbox-google-analytics": "^6.5.4",
-    "workbox-navigation-preload": "^6.5.4",
-    "workbox-precaching": "^6.5.4",
-    "workbox-range-requests": "^6.5.4",
-    "workbox-routing": "^6.5.4",
-    "workbox-strategies": "^6.5.4",
-    "workbox-streams": "^6.5.4"
   },
   "devDependencies": {
     "@excalidraw/eslint-config": "1.0.0",
@@ -80,7 +67,6 @@
     "dotenv": "16.0.1",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-prettier": "3.3.1",
-    "http-server": "14.1.1",
     "husky": "7.0.4",
     "jest-canvas-mock": "2.4.0",
     "lint-staged": "12.3.7",
@@ -103,10 +89,11 @@
   "private": true,
   "scripts": {
     "build-node": "node ./scripts/build-node.js",
-    "build:app:docker": "cross-env REACT_APP_DISABLE_SENTRY=true REACT_APP_DISABLE_TRACKING=true react-scripts build",
+    "build:app:docker": "REACT_APP_DISABLE_SENTRY=true react-scripts build",
-    "build:app": "cross-env REACT_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA react-scripts build",
+    "build:app": "REACT_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA react-scripts build",
     "build:version": "node ./scripts/build-version.js",
-    "build": "yarn build:app && yarn build:version",
+    "build:prebuild": "node ./scripts/prebuild.js",
+    "build": "yarn build:prebuild && yarn build:app && yarn build:version",
     "eject": "react-scripts eject",
     "fix:code": "yarn test:code --fix",
     "fix:other": "yarn prettier --write",
@@ -116,7 +103,6 @@
     "prepare": "husky install",
     "prettier": "prettier \"**/*.{css,scss,json,md,html,yml}\" --ignore-path=.eslintignore",
     "start": "react-scripts start",
-    "start:production": "npm run build && npx http-server build -a localhost -p 5001 -o",
     "test:all": "yarn test:typecheck && yarn test:code && yarn test:other && yarn test:app --watchAll=false",
     "test:app": "react-scripts test --passWithNoTests",
     "test:code": "eslint --max-warnings=0 --ext .js,.ts,.tsx .",

public/index.html

@@ -146,8 +146,7 @@
       // setting this so that libraries installation reuses this window tab.
       window.name = "_excalidraw";
     </script>
-    <% if (process.env.REACT_APP_DISABLE_TRACKING !== 'true' &&
+    <% if (process.env.REACT_APP_GOOGLE_ANALYTICS_ID) { %>
-    process.env.REACT_APP_GOOGLE_ANALYTICS_ID) { %>
     <script
       async
       src="https://www.googletagmanager.com/gtag/js?id=%REACT_APP_GOOGLE_ANALYTICS_ID%"

public/service-worker.js

@@ -0,0 +1,81 @@
+// eslint-disable-next-line no-restricted-globals
+// eslint-disable-next-line no-unused-expressions
+
+/* eslint-disable no-restricted-globals */
+/* global importScripts, workbox */
+
+/**
+ * Welcome to your Workbox-powered service worker!
+ *
+ * You'll need to register this file in your web app and you should
+ * disable HTTP caching for this file too.
+ * See https://goo.gl/nhQhGp
+ *
+ * The rest of the code is auto-generated. Please don't update this file
+ * directly; instead, make changes to your Workbox build configuration
+ * and re-run your build process.
+ * See https://goo.gl/2aRDsh
+ */
+
+// in dev, `process` is undefined because this file is not compiled until build
+const IS_DEVELOPMENT =
+  typeof process === "undefined" || process.env.NODE_ENV !== "production";
+
+if (IS_DEVELOPMENT) {
+  importScripts(
+    "https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js",
+  );
+  workbox.setConfig({
+    debug: true,
+  });
+} else {
+  importScripts("/workbox/workbox-sw.js");
+  workbox.setConfig({
+    modulePathPrefix: "/workbox/",
+  });
+}
+
+self.addEventListener("message", (event) => {
+  if (event.data && event.data.type === "SKIP_WAITING") {
+    self.skipWaiting();
+  }
+});
+
+workbox.core.clientsClaim();
+
+if (!IS_DEVELOPMENT) {
+  workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);
+
+  workbox.routing.registerNavigationRoute(
+    workbox.precaching.getCacheKeyForURL("./index.html"),
+    {
+      blacklist: [/^\/_/, /\/[^/?]+\.[^/]+$/],
+    },
+  );
+}
+
+// Cache relevant font files
+workbox.routing.registerRoute(
+  new RegExp("/(fonts.css|.+.(ttf|woff2|otf))"),
+  new workbox.strategies.StaleWhileRevalidate({
+    cacheName: "fonts",
+    plugins: [new workbox.expiration.Plugin({ maxEntries: 10 })],
+  }),
+);
+
+self.addEventListener("fetch", (event) => {
+  if (
+    event.request.method === "POST" &&
+    event.request.url.endsWith("/web-share-target")
+  ) {
+    return event.respondWith(
+      (async () => {
+        const formData = await event.request.formData();
+        const file = formData.get("file");
+        const webShareTargetCache = await caches.open("web-share-target");
+        await webShareTargetCache.put("shared-file", new Response(file));
+        return Response.redirect("/?web-share-target", 303);
+      })(),
+    );
+  }
+});

scripts/locales-coverage-description.js

@@ -50,8 +50,8 @@ const crowdinMap = {
   "lv-LV": "en-lv",
   "cs-CZ": "en-cs",
   "kk-KZ": "en-kk",
-  "vi-VN": "en-vi",
+  "vi-vn": "en-vi",
-  "mr-IN": "en-mr",
+  "mr-in": "en-mr",
 };
 
 const flags = {
@@ -120,7 +120,6 @@ const languages = {
   "fa-IR": "فارسی",
   "fi-FI": "Suomi",
   "fr-FR": "Français",
-  "gl-ES": "Galego",
   "he-IL": "עברית",
   "hi-IN": "हिन्दी",
   "hu-HU": "Magyar",
@@ -130,7 +129,6 @@ const languages = {
   "kab-KAB": "Taqbaylit",
   "kk-KZ": "Қазақ тілі",
   "ko-KR": "한국어",
-  "ku-TR": "Kurdî",
   "lt-LT": "Lietuvių",
   "lv-LV": "Latviešu",
   "my-MM": "Burmese",

scripts/prebuild.js

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

src/actions/actionBoundText.tsx

@@ -6,10 +6,6 @@ import {
   measureText,
   redrawTextBoundingBox,
 } from "../element/textElement";
-import {
-  getOriginalContainerHeightFromCache,
-  resetOriginalContainerCache,
-} from "../element/textWysiwyg";
 import {
   hasBoundTextElement,
   isTextBindableContainer,
@@ -26,7 +22,7 @@ export const actionUnbindText = register({
   name: "unbindText",
   contextItemLabel: "labels.unbindText",
   trackEvent: { category: "element" },
-  predicate: (elements, appState) => {
+  contextItemPredicate: (elements, appState) => {
     const selectedElements = getSelectedElements(elements, appState);
     return selectedElements.some((element) => hasBoundTextElement(element));
   },
@@ -42,11 +38,6 @@ export const actionUnbindText = register({
           boundTextElement.originalText,
           getFontString(boundTextElement),
         );
-        const originalContainerHeight = getOriginalContainerHeightFromCache(
-          element.id,
-        );
-        resetOriginalContainerCache(element.id);
-
         mutateElement(boundTextElement as ExcalidrawTextElement, {
           containerId: null,
           width,
@@ -58,9 +49,6 @@ export const actionUnbindText = register({
           boundElements: element.boundElements?.filter(
             (ele) => ele.id !== boundTextElement.id,
           ),
-          height: originalContainerHeight
-            ? originalContainerHeight
-            : element.height,
         });
       }
     });
@@ -76,7 +64,7 @@ export const actionBindText = register({
   name: "bindText",
   contextItemLabel: "labels.bindText",
   trackEvent: { category: "element" },
-  predicate: (elements, appState) => {
+  contextItemPredicate: (elements, appState) => {
     const selectedElements = getSelectedElements(elements, appState);
 
     if (selectedElements.length === 2) {

src/actions/actionCanvas.tsx

@@ -1,5 +1,11 @@
 import { ColorPicker } from "../components/ColorPicker";
-import { eraser, ZoomInIcon, ZoomOutIcon } from "../components/icons";
+import {
+  eraser,
+  MoonIcon,
+  SunIcon,
+  ZoomInIcon,
+  ZoomOutIcon,
+} from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
 import { MIN_ZOOM, THEME, ZOOM_STEP } from "../constants";
 import { getCommonBounds, getNonDeletedElements } from "../element";
@@ -15,17 +21,14 @@ import { register } from "./register";
 import { Tooltip } from "../components/Tooltip";
 import { newElementWith } from "../element/mutateElement";
 import { getDefaultAppState, isEraserActive } from "../appState";
+import ClearCanvas from "../components/ClearCanvas";
 import clsx from "clsx";
+import MenuItem from "../components/MenuItem";
+import { getShortcutFromShortcutName } from "./shortcuts";
 
 export const actionChangeViewBackgroundColor = register({
   name: "changeViewBackgroundColor",
   trackEvent: false,
-  predicate: (elements, appState, props, app) => {
-    return (
-      !!app.props.UIOptions.canvasActions.changeViewBackgroundColor &&
-      !appState.viewModeEnabled
-    );
-  },
   perform: (_, appState, value) => {
     return {
       appState: { ...appState, ...value },
@@ -33,7 +36,6 @@ export const actionChangeViewBackgroundColor = register({
     };
   },
   PanelComponent: ({ elements, appState, updateData }) => {
-    // FIXME move me to src/components/mainMenu/DefaultItems.tsx
     return (
       <div style={{ position: "relative" }}>
         <ColorPicker
@@ -57,12 +59,6 @@ export const actionChangeViewBackgroundColor = register({
 export const actionClearCanvas = register({
   name: "clearCanvas",
   trackEvent: { category: "canvas" },
-  predicate: (elements, appState, props, app) => {
-    return (
-      !!app.props.UIOptions.canvasActions.clearCanvas &&
-      !appState.viewModeEnabled
-    );
-  },
   perform: (elements, appState, _, app) => {
     app.imageCache.clear();
     return {
@@ -88,11 +84,12 @@ export const actionClearCanvas = register({
       commitToHistory: true,
     };
   },
+
+  PanelComponent: ({ updateData }) => <ClearCanvas onConfirm={updateData} />,
 });
 
 export const actionZoomIn = register({
   name: "zoomIn",
-  viewMode: true,
   trackEvent: { category: "canvas" },
   perform: (_elements, appState, _, app) => {
     return {
@@ -129,7 +126,6 @@ export const actionZoomIn = register({
 
 export const actionZoomOut = register({
   name: "zoomOut",
-  viewMode: true,
   trackEvent: { category: "canvas" },
   perform: (_elements, appState, _, app) => {
     return {
@@ -166,7 +162,6 @@ export const actionZoomOut = register({
 
 export const actionResetZoom = register({
   name: "resetZoom",
-  viewMode: true,
   trackEvent: { category: "canvas" },
   perform: (_elements, appState, _, app) => {
     return {
@@ -276,7 +271,6 @@ export const actionZoomToSelected = register({
 
 export const actionZoomToFit = register({
   name: "zoomToFit",
-  viewMode: true,
   trackEvent: { category: "canvas" },
   perform: (elements, appState) => zoomToFitElements(elements, appState, false),
   keyTest: (event) =>
@@ -288,7 +282,6 @@ export const actionZoomToFit = register({
 
 export const actionToggleTheme = register({
   name: "toggleTheme",
-  viewMode: true,
   trackEvent: { category: "canvas" },
   perform: (_, appState, value) => {
     return {
@@ -300,10 +293,22 @@ export const actionToggleTheme = register({
       commitToHistory: false,
     };
   },
+  PanelComponent: ({ appState, updateData }) => (
+    <MenuItem
+      label={
+        appState.theme === "dark"
+          ? t("buttons.lightMode")
+          : t("buttons.darkMode")
+      }
+      onClick={() => {
+        updateData(appState.theme === THEME.LIGHT ? THEME.DARK : THEME.LIGHT);
+      }}
+      icon={appState.theme === "dark" ? SunIcon : MoonIcon}
+      dataTestId="toggle-dark-mode"
+      shortcut={getShortcutFromShortcutName("toggleTheme")}
+    />
+  ),
   keyTest: (event) => event.altKey && event.shiftKey && event.code === CODES.D,
-  predicate: (elements, appState, props, app) => {
-    return !!app.props.UIOptions.canvasActions.toggleTheme;
-  },
 });
 
 export const actionErase = register({

src/actions/actionClipboard.tsx

@@ -3,7 +3,6 @@ import { register } from "./register";
 import {
   copyTextToSystemClipboard,
   copyToClipboard,
-  probablySupportsClipboardBlob,
   probablySupportsClipboardWriteText,
 } from "../clipboard";
 import { actionDeleteSelected } from "./actionDeleteSelected";
@@ -24,31 +23,11 @@ export const actionCopy = register({
       commitToHistory: false,
     };
   },
-  predicate: (elements, appState, appProps, app) => {
-    return app.device.isMobile && !!navigator.clipboard;
-  },
   contextItemLabel: "labels.copy",
   // don't supply a shortcut since we handle this conditionally via onCopy event
   keyTest: undefined,
 });
 
-export const actionPaste = register({
-  name: "paste",
-  trackEvent: { category: "element" },
-  perform: (elements: any, appStates: any, data, app) => {
-    app.pasteFromClipboard(null);
-    return {
-      commitToHistory: false,
-    };
-  },
-  predicate: (elements, appState, appProps, app) => {
-    return app.device.isMobile && !!navigator.clipboard;
-  },
-  contextItemLabel: "labels.paste",
-  // don't supply a shortcut since we handle this conditionally via onCopy event
-  keyTest: undefined,
-});
-
 export const actionCut = register({
   name: "cut",
   trackEvent: { category: "element" },
@@ -56,9 +35,6 @@ export const actionCut = register({
     actionCopy.perform(elements, appState, data, app);
     return actionDeleteSelected.perform(elements, appState);
   },
-  predicate: (elements, appState, appProps, app) => {
-    return app.device.isMobile && !!navigator.clipboard;
-  },
   contextItemLabel: "labels.cut",
   keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.X,
 });
@@ -101,9 +77,6 @@ export const actionCopyAsSvg = register({
       };
     }
   },
-  predicate: (elements) => {
-    return probablySupportsClipboardWriteText && elements.length > 0;
-  },
   contextItemLabel: "labels.copyAsSvg",
 });
 
@@ -158,9 +131,6 @@ export const actionCopyAsPng = register({
       };
     }
   },
-  predicate: (elements) => {
-    return probablySupportsClipboardBlob && elements.length > 0;
-  },
   contextItemLabel: "labels.copyAsPng",
   keyTest: (event) => event.code === CODES.C && event.altKey && event.shiftKey,
 });
@@ -188,7 +158,7 @@ export const copyText = register({
       commitToHistory: false,
     };
   },
-  predicate: (elements, appState) => {
+  contextItemPredicate: (elements, appState) => {
     return (
       probablySupportsClipboardWriteText &&
       getSelectedElements(elements, appState, true).some(isTextElement)

src/actions/actionExport.tsx

@@ -1,6 +1,7 @@
-import { questionCircle, saveAs } from "../components/icons";
+import { LoadIcon, questionCircle, saveAs } from "../components/icons";
 import { ProjectName } from "../components/ProjectName";
 import { ToolButton } from "../components/ToolButton";
+import "../components/ToolIcon.scss";
 import { Tooltip } from "../components/Tooltip";
 import { DarkModeToggle } from "../components/DarkModeToggle";
 import { loadFromJSON, saveAsJSON } from "../data";
@@ -14,11 +15,12 @@ import { getExportSize } from "../scene/export";
 import { DEFAULT_EXPORT_PADDING, EXPORT_SCALES, THEME } from "../constants";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { getNonDeletedElements } from "../element";
+import { ActiveFile } from "../components/ActiveFile";
 import { isImageFileHandle } from "../data/blob";
 import { nativeFileSystemSupported } from "../data/filesystem";
 import { Theme } from "../element/types";
-
+import MenuItem from "../components/MenuItem";
-import "../components/ToolIcon.scss";
+import { getShortcutFromShortcutName } from "./shortcuts";
 
 export const actionChangeProjectName = register({
   name: "changeProjectName",
@@ -87,6 +89,28 @@ export const actionChangeExportScale = register({
   },
 });
 
+export const actionChangeExportPadding = register({
+  name: "changeExportPadding",
+  trackEvent: { category: "export", action: "togglePadding" },
+  perform: (_elements, appState, value) => {
+    return {
+      appState: {
+        ...appState,
+        exportPadding: value ? DEFAULT_EXPORT_PADDING : 0,
+      },
+      commitToHistory: false,
+    };
+  },
+  PanelComponent: ({ appState, updateData }) => (
+    <CheckboxItem
+      checked={!!appState.exportPadding}
+      onChange={(checked) => updateData(checked)}
+    >
+      {"Padding"}
+    </CheckboxItem>
+  ),
+});
+
 export const actionChangeExportBackground = register({
   name: "changeExportBackground",
   trackEvent: { category: "export", action: "toggleBackground" },
@@ -131,13 +155,6 @@ export const actionChangeExportEmbedScene = register({
 export const actionSaveToActiveFile = register({
   name: "saveToActiveFile",
   trackEvent: { category: "export" },
-  predicate: (elements, appState, props, app) => {
-    return (
-      !!app.props.UIOptions.canvasActions.saveToActiveFile &&
-      !!appState.fileHandle &&
-      !appState.viewModeEnabled
-    );
-  },
   perform: async (elements, appState, value, app) => {
     const fileHandleExists = !!appState.fileHandle;
 
@@ -174,11 +191,16 @@ export const actionSaveToActiveFile = register({
   },
   keyTest: (event) =>
     event.key === KEYS.S && event[KEYS.CTRL_OR_CMD] && !event.shiftKey,
+  PanelComponent: ({ updateData, appState }) => (
+    <ActiveFile
+      onSave={() => updateData(null)}
+      fileName={appState.fileHandle?.name}
+    />
+  ),
 });
 
 export const actionSaveFileToDisk = register({
   name: "saveFileToDisk",
-  viewMode: true,
   trackEvent: { category: "export" },
   perform: async (elements, appState, value, app) => {
     try {
@@ -219,11 +241,6 @@ export const actionSaveFileToDisk = register({
 export const actionLoadScene = register({
   name: "loadScene",
   trackEvent: { category: "export" },
-  predicate: (elements, appState, props, app) => {
-    return (
-      !!app.props.UIOptions.canvasActions.loadScene && !appState.viewModeEnabled
-    );
-  },
   perform: async (elements, appState, _, app) => {
     try {
       const {
@@ -251,6 +268,15 @@ export const actionLoadScene = register({
     }
   },
   keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.O,
+  PanelComponent: ({ updateData }) => (
+    <MenuItem
+      label={t("buttons.load")}
+      icon={LoadIcon}
+      onClick={updateData}
+      dataTestId="load-button"
+      shortcut={getShortcutFromShortcutName("loadScene")}
+    />
+  ),
 });
 
 export const actionExportWithDarkMode = register({

src/actions/actionFlip.ts

@@ -14,7 +14,6 @@ import {
 } from "../element/bounds";
 import { isLinearElement } from "../element/typeChecks";
 import { LinearElementEditor } from "../element/linearElementEditor";
-import { KEYS } from "../keys";
 
 const enableActionFlipHorizontal = (
   elements: readonly ExcalidrawElement[],
@@ -50,7 +49,7 @@ export const actionFlipHorizontal = register({
   },
   keyTest: (event) => event.shiftKey && event.code === "KeyH",
   contextItemLabel: "labels.flipHorizontal",
-  predicate: (elements, appState) =>
+  contextItemPredicate: (elements, appState) =>
     enableActionFlipHorizontal(elements, appState),
 });
 
@@ -64,10 +63,9 @@ export const actionFlipVertical = register({
       commitToHistory: true,
     };
   },
-  keyTest: (event) =>
+  keyTest: (event) => event.shiftKey && event.code === "KeyV",
-    event.shiftKey && event.code === "KeyV" && !event[KEYS.CTRL_OR_CMD],
   contextItemLabel: "labels.flipVertical",
-  predicate: (elements, appState) =>
+  contextItemPredicate: (elements, appState) =>
     enableActionFlipVertical(elements, appState),
 });
 
@@ -153,7 +151,11 @@ const flipElement = (
 
   let initialPointsCoords;
   if (isLinearElement(element)) {
-    initialPointsCoords = getElementPointsCoords(element, element.points);
+    initialPointsCoords = getElementPointsCoords(
+      element,
+      element.points,
+      element.strokeSharpness,
+    );
   }
   const initialElementAbsoluteCoords = getElementAbsoluteCoords(element);
 
@@ -211,7 +213,11 @@ const flipElement = (
     // Adjusting origin because when a beizer curve path exceeds min/max points it offsets the origin.
     // There's still room for improvement since when the line roughness is > 1
     // we still have a small offset of the origin when fliipping the element.
-    const finalPointsCoords = getElementPointsCoords(element, element.points);
+    const finalPointsCoords = getElementPointsCoords(
+      element,
+      element.points,
+      element.strokeSharpness,
+    );
 
     const topLeftCoordsDiff = initialPointsCoords[0] - finalPointsCoords[0];
     const topRightCoordDiff = initialPointsCoords[2] - finalPointsCoords[2];

src/actions/actionGroup.tsx

@@ -129,7 +129,8 @@ export const actionGroup = register({
     };
   },
   contextItemLabel: "labels.group",
-  predicate: (elements, appState) => enableActionGroup(elements, appState),
+  contextItemPredicate: (elements, appState) =>
+    enableActionGroup(elements, appState),
   keyTest: (event) =>
     !event.shiftKey && event[KEYS.CTRL_OR_CMD] && event.key === KEYS.G,
   PanelComponent: ({ elements, appState, updateData }) => (
@@ -192,7 +193,8 @@ export const actionUngroup = register({
     event[KEYS.CTRL_OR_CMD] &&
     event.key === KEYS.G.toUpperCase(),
   contextItemLabel: "labels.ungroup",
-  predicate: (elements, appState) => getSelectedGroupIds(appState).length > 0,
+  contextItemPredicate: (elements, appState) =>
+    getSelectedGroupIds(appState).length > 0,
 
   PanelComponent: ({ elements, appState, updateData }) => (
     <ToolButton

src/actions/actionLinearEditor.ts

@@ -10,7 +10,7 @@ export const actionToggleLinearEditor = register({
   trackEvent: {
     category: "element",
   },
-  predicate: (elements, appState) => {
+  contextItemPredicate: (elements, appState) => {
     const selectedElements = getSelectedElements(elements, appState);
     if (selectedElements.length === 1 && isLinearElement(selectedElements[0])) {
       return true;

src/actions/actionMenu.tsx

@@ -1,10 +1,12 @@
-import { HamburgerMenuIcon, palette } from "../components/icons";
+import { HamburgerMenuIcon, HelpIcon, palette } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
 import { t } from "../i18n";
 import { showSelectedShapeActions, getNonDeletedElements } from "../element";
 import { register } from "./register";
 import { allowFullScreen, exitFullScreen, isFullScreen } from "../utils";
 import { KEYS } from "../keys";
+import { HelpButton } from "../components/HelpButton";
+import MenuItem from "../components/MenuItem";
 
 export const actionToggleCanvasMenu = register({
   name: "toggleCanvasMenu",
@@ -54,7 +56,6 @@ export const actionToggleEditMenu = register({
 
 export const actionFullScreen = register({
   name: "toggleFullScreen",
-  viewMode: true,
   trackEvent: { category: "canvas", predicate: (appState) => !isFullScreen() },
   perform: () => {
     if (!isFullScreen()) {
@@ -72,7 +73,6 @@ export const actionFullScreen = register({
 
 export const actionShortcuts = register({
   name: "toggleShortcuts",
-  viewMode: true,
   trackEvent: { category: "menu", action: "toggleHelpDialog" },
   perform: (_elements, appState, _, { focusContainer }) => {
     if (appState.openDialog === "help") {
@@ -86,5 +86,17 @@ export const actionShortcuts = register({
       commitToHistory: false,
     };
   },
+  PanelComponent: ({ updateData, isInHamburgerMenu }) =>
+    isInHamburgerMenu ? (
+      <MenuItem
+        label={t("helpDialog.title")}
+        dataTestId="help-menu-item"
+        icon={HelpIcon}
+        onClick={updateData}
+        shortcut="?"
+      />
+    ) : (
+      <HelpButton title={t("helpDialog.title")} onClick={updateData} />
+    ),
   keyTest: (event) => event.key === KEYS.QUESTION_MARK,
 });

src/actions/actionNavigate.tsx

@@ -6,7 +6,6 @@ import { register } from "./register";
 
 export const actionGoToCollaborator = register({
   name: "goToCollaborator",
-  viewMode: true,
   trackEvent: { category: "collab" },
   perform: (_elements, appState, value) => {
     const point = value as Collaborator["pointer"];

src/actions/actionProperties.tsx

@@ -42,7 +42,6 @@ import {
   DEFAULT_FONT_FAMILY,
   DEFAULT_FONT_SIZE,
   FONT_FAMILY,
-  ROUNDNESS,
   VERTICAL_ALIGN,
 } from "../constants";
 import {
@@ -58,7 +57,7 @@ import {
 import {
   isBoundToContainer,
   isLinearElement,
-  isUsingAdaptiveRadius,
+  isLinearElementType,
 } from "../element/typeChecks";
 import {
   Arrowhead,
@@ -73,7 +72,7 @@ import { getLanguage, t } from "../i18n";
 import { KEYS } from "../keys";
 import { randomInteger } from "../random";
 import {
-  canChangeRoundness,
+  canChangeSharpness,
   canHaveArrowheads,
   getCommonAttributeOfSelectedElements,
   getSelectedElements,
@@ -817,19 +816,16 @@ export const actionChangeVerticalAlign = register({
               value: VERTICAL_ALIGN.TOP,
               text: t("labels.alignTop"),
               icon: <TextAlignTopIcon theme={appState.theme} />,
-              testId: "align-top",
             },
             {
               value: VERTICAL_ALIGN.MIDDLE,
               text: t("labels.centerVertically"),
               icon: <TextAlignMiddleIcon theme={appState.theme} />,
-              testId: "align-middle",
             },
             {
               value: VERTICAL_ALIGN.BOTTOM,
               text: t("labels.alignBottom"),
               icon: <TextAlignBottomIcon theme={appState.theme} />,
-              testId: "align-bottom",
             },
           ]}
           value={getFormValue(elements, appState, (element) => {
@@ -849,71 +845,69 @@ export const actionChangeVerticalAlign = register({
   },
 });
 
-export const actionChangeRoundness = register({
+export const actionChangeSharpness = register({
-  name: "changeRoundness",
+  name: "changeSharpness",
   trackEvent: false,
   perform: (elements, appState, value) => {
-    return {
-      elements: changeProperty(elements, appState, (el) =>
-        newElementWith(el, {
-          roundness:
-            value === "round"
-              ? {
-                  type: isUsingAdaptiveRadius(el.type)
-                    ? ROUNDNESS.ADAPTIVE_RADIUS
-                    : ROUNDNESS.PROPORTIONAL_RADIUS,
-                }
-              : null,
-        }),
-      ),
-      appState: {
-        ...appState,
-        currentItemRoundness: value,
-      },
-      commitToHistory: true,
-    };
-  },
-  PanelComponent: ({ elements, appState, updateData }) => {
     const targetElements = getTargetElements(
       getNonDeletedElements(elements),
       appState,
     );
-
+    const shouldUpdateForNonLinearElements = targetElements.length
-    const hasLegacyRoundness = targetElements.some(
+      ? targetElements.every((el) => !isLinearElement(el))
-      (el) => el.roundness?.type === ROUNDNESS.LEGACY,
+      : !isLinearElementType(appState.activeTool.type);
-    );
+    const shouldUpdateForLinearElements = targetElements.length
-
+      ? targetElements.every(isLinearElement)
-    return (
+      : isLinearElementType(appState.activeTool.type);
-      <fieldset>
+    return {
-        <legend>{t("labels.edges")}</legend>
+      elements: changeProperty(elements, appState, (el) =>
-        <ButtonIconSelect
+        newElementWith(el, {
-          group="edges"
+          strokeSharpness: value,
-          options={[
+        }),
-            {
+      ),
-              value: "sharp",
+      appState: {
-              text: t("labels.sharp"),
+        ...appState,
-              icon: EdgeSharpIcon,
+        currentItemStrokeSharpness: shouldUpdateForNonLinearElements
-            },
+          ? value
-            {
+          : appState.currentItemStrokeSharpness,
-              value: "round",
+        currentItemLinearStrokeSharpness: shouldUpdateForLinearElements
-              text: t("labels.round"),
+          ? value
-              icon: EdgeRoundIcon,
+          : appState.currentItemLinearStrokeSharpness,
-            },
+      },
-          ]}
+      commitToHistory: true,
-          value={getFormValue(
+    };
-            elements,
-            appState,
-            (element) =>
-              hasLegacyRoundness ? null : element.roundness ? "round" : "sharp",
-            (canChangeRoundness(appState.activeTool.type) &&
-              appState.currentItemRoundness) ||
-              null,
-          )}
-          onChange={(value) => updateData(value)}
-        />
-      </fieldset>
-    );
   },
+  PanelComponent: ({ elements, appState, updateData }) => (
+    <fieldset>
+      <legend>{t("labels.edges")}</legend>
+      <ButtonIconSelect
+        group="edges"
+        options={[
+          {
+            value: "sharp",
+            text: t("labels.sharp"),
+            icon: EdgeSharpIcon,
+          },
+          {
+            value: "round",
+            text: t("labels.round"),
+            icon: EdgeRoundIcon,
+          },
+        ]}
+        value={getFormValue(
+          elements,
+          appState,
+          (element) => element.strokeSharpness,
+          (canChangeSharpness(appState.activeTool.type) &&
+            (isLinearElementType(appState.activeTool.type)
+              ? appState.currentItemLinearStrokeSharpness
+              : appState.currentItemStrokeSharpness)) ||
+            null,
+        )}
+        onChange={(value) => updateData(value)}
+      />
+    </fieldset>
+  ),
 });
 
 export const actionChangeArrowhead = register({

src/actions/actionStyles.ts

@@ -13,11 +13,7 @@ import {
   DEFAULT_TEXT_ALIGN,
 } from "../constants";
 import { getBoundTextElement } from "../element/textElement";
-import {
+import { hasBoundTextElement } from "../element/typeChecks";
-  hasBoundTextElement,
-  canApplyRoundnessTypeToElement,
-  getDefaultRoundnessTypeForElement,
-} from "../element/typeChecks";
 import { getSelectedElements } from "../scene";
 
 // `copiedStyles` is exported only for tests.
@@ -81,14 +77,6 @@ export const actionPasteStyles = register({
             fillStyle: elementStylesToCopyFrom?.fillStyle,
             opacity: elementStylesToCopyFrom?.opacity,
             roughness: elementStylesToCopyFrom?.roughness,
-            roundness: elementStylesToCopyFrom.roundness
-              ? canApplyRoundnessTypeToElement(
-                  elementStylesToCopyFrom.roundness.type,
-                  element,
-                )
-                ? elementStylesToCopyFrom.roundness
-                : getDefaultRoundnessTypeForElement(element)
-              : null,
           });
 
           if (isTextElement(newElement)) {

src/actions/actionToggleGridMode.tsx

@@ -5,7 +5,6 @@ import { AppState } from "../types";
 
 export const actionToggleGridMode = register({
   name: "gridMode",
-  viewMode: true,
   trackEvent: {
     category: "canvas",
     predicate: (appState) => !appState.gridSize,
@@ -20,9 +19,6 @@ export const actionToggleGridMode = register({
     };
   },
   checked: (appState: AppState) => appState.gridSize !== null,
-  predicate: (element, appState, props) => {
-    return typeof props.gridModeEnabled === "undefined";
-  },
   contextItemLabel: "labels.showGrid",
   keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.code === CODES.QUOTE,
 });

src/actions/actionToggleLock.ts

@@ -41,9 +41,15 @@ export const actionToggleLock = register({
         : "labels.elementLock.lock";
     }
 
-    return getOperation(selected) === "lock"
+    if (selected.length > 1) {
-      ? "labels.elementLock.lockAll"
+      return getOperation(selected) === "lock"
-      : "labels.elementLock.unlockAll";
+        ? "labels.elementLock.lockAll"
+        : "labels.elementLock.unlockAll";
+    }
+
+    throw new Error(
+      "Unexpected zero elements to lock/unlock. This should never happen.",
+    );
   },
   keyTest: (event, appState, elements) => {
     return (

src/actions/actionToggleStats.tsx

@@ -3,7 +3,6 @@ import { CODES, KEYS } from "../keys";
 
 export const actionToggleStats = register({
   name: "stats",
-  viewMode: true,
   trackEvent: { category: "menu" },
   perform(elements, appState) {
     return {

src/actions/actionToggleViewMode.tsx

@@ -3,7 +3,6 @@ import { register } from "./register";
 
 export const actionToggleViewMode = register({
   name: "viewMode",
-  viewMode: true,
   trackEvent: {
     category: "canvas",
     predicate: (appState) => !appState.viewModeEnabled,
@@ -18,9 +17,6 @@ export const actionToggleViewMode = register({
     };
   },
   checked: (appState) => appState.viewModeEnabled,
-  predicate: (elements, appState, appProps) => {
-    return typeof appProps.viewModeEnabled === "undefined";
-  },
   contextItemLabel: "labels.viewMode",
   keyTest: (event) =>
     !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.R,

src/actions/actionToggleZenMode.tsx

@@ -3,7 +3,6 @@ import { register } from "./register";
 
 export const actionToggleZenMode = register({
   name: "zenMode",
-  viewMode: true,
   trackEvent: {
     category: "canvas",
     predicate: (appState) => !appState.zenModeEnabled,
@@ -18,9 +17,6 @@ export const actionToggleZenMode = register({
     };
   },
   checked: (appState) => appState.zenModeEnabled,
-  predicate: (elements, appState, appProps) => {
-    return typeof appProps.zenModeEnabled === "undefined";
-  },
   contextItemLabel: "buttons.zenMode",
   keyTest: (event) =>
     !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.Z,

src/actions/manager.tsx

@@ -9,6 +9,7 @@ import {
 } from "./types";
 import { ExcalidrawElement } from "../element/types";
 import { AppClassProperties, AppState } from "../types";
+import { MODES } from "../constants";
 import { trackEvent } from "../analytics";
 
 const trackAction = (
@@ -102,8 +103,11 @@ export class ActionManager {
 
     const action = data[0];
 
-    if (this.getAppState().viewModeEnabled && action.viewMode !== true) {
+    const { viewModeEnabled } = this.getAppState();
-      return false;
+    if (viewModeEnabled) {
+      if (!Object.values(MODES).includes(data[0].name)) {
+        return false;
+      }
     }
 
     const elements = this.getElementsIncludingDeleted();
@@ -131,7 +135,11 @@ export class ActionManager {
   /**
    * @param data additional data sent to the PanelComponent
    */
-  renderAction = (name: ActionName, data?: PanelComponentProps["data"]) => {
+  renderAction = (
+    name: ActionName,
+    data?: PanelComponentProps["data"],
+    isInHamburgerMenu = false,
+  ) => {
     const canvasActions = this.app.props.UIOptions.canvasActions;
 
     if (
@@ -166,20 +174,11 @@ export class ActionManager {
           updateData={updateData}
           appProps={this.app.props}
           data={data}
+          isInHamburgerMenu={isInHamburgerMenu}
         />
       );
     }
 
     return null;
   };
-
-  isActionEnabled = (action: Action) => {
-    const elements = this.getElementsIncludingDeleted();
-    const appState = this.getAppState();
-
-    return (
-      !action.predicate ||
-      action.predicate(elements, appState, this.app.props, this.app)
-    );
-  };
 }

src/actions/shortcuts.ts

@@ -48,7 +48,7 @@ const shortcutMap: Record<ShortcutName, string[]> = {
   copyStyles: [getShortcutKey("CtrlOrCmd+Alt+C")],
   pasteStyles: [getShortcutKey("CtrlOrCmd+Alt+V")],
   selectAll: [getShortcutKey("CtrlOrCmd+A")],
-  deleteSelectedElements: [getShortcutKey("Delete")],
+  deleteSelectedElements: [getShortcutKey("Del")],
   duplicateSelection: [
     getShortcutKey("CtrlOrCmd+D"),
     getShortcutKey(`Alt+${t("helpDialog.drag")}`),

src/actions/types.ts

@@ -68,6 +68,7 @@ export type ActionName =
   | "finalize"
   | "changeProjectName"
   | "changeExportBackground"
+  | "changeExportPadding"
   | "changeExportEmbedScene"
   | "changeExportScale"
   | "saveToActiveFile"
@@ -91,7 +92,7 @@ export type ActionName =
   | "ungroup"
   | "goToCollaborator"
   | "addToLibrary"
-  | "changeRoundness"
+  | "changeSharpness"
   | "alignTop"
   | "alignBottom"
   | "alignLeft"
@@ -124,7 +125,9 @@ export type PanelComponentProps = {
 
 export interface Action {
   name: ActionName;
-  PanelComponent?: React.FC<PanelComponentProps>;
+  PanelComponent?: React.FC<
+    PanelComponentProps & { isInHamburgerMenu: boolean }
+  >;
   perform: ActionFn;
   keyPriority?: number;
   keyTest?: (
@@ -138,11 +141,9 @@ export interface Action {
         elements: readonly ExcalidrawElement[],
         appState: Readonly<AppState>,
       ) => string);
-  predicate?: (
+  contextItemPredicate?: (
     elements: readonly ExcalidrawElement[],
     appState: AppState,
-    appProps: ExcalidrawProps,
-    app: AppClassProperties,
   ) => boolean;
   checked?: (appState: Readonly<AppState>) => boolean;
   trackEvent:
@@ -164,7 +165,4 @@ export interface Action {
           value: any,
         ) => boolean;
       };
-  /** if set to `true`, allow action to be performed in viewMode.
-   *  Defaults to `false` */
-  viewMode?: boolean;
 }

src/appState.ts

@@ -1,5 +1,6 @@
 import oc from "open-color";
 import {
+  DEFAULT_EXPORT_PADDING,
   DEFAULT_FONT_FAMILY,
   DEFAULT_FONT_SIZE,
   DEFAULT_TEXT_ALIGN,
@@ -28,11 +29,12 @@ export const getDefaultAppState = (): Omit<
     currentItemFillStyle: "hachure",
     currentItemFontFamily: DEFAULT_FONT_FAMILY,
     currentItemFontSize: DEFAULT_FONT_SIZE,
+    currentItemLinearStrokeSharpness: "round",
     currentItemOpacity: 100,
     currentItemRoughness: 1,
     currentItemStartArrowhead: null,
     currentItemStrokeColor: oc.black,
-    currentItemRoundness: "round",
+    currentItemStrokeSharpness: "sharp",
     currentItemStrokeStyle: "solid",
     currentItemStrokeWidth: 1,
     currentItemTextAlign: DEFAULT_TEXT_ALIGN,
@@ -54,6 +56,7 @@ export const getDefaultAppState = (): Omit<
     exportScale: defaultExportScale,
     exportEmbedScene: false,
     exportWithDarkMode: false,
+    exportPadding: DEFAULT_EXPORT_PADDING,
     fileHandle: null,
     gridSize: null,
     isBindingEnabled: true,
@@ -64,7 +67,6 @@ export const getDefaultAppState = (): Omit<
     lastPointerDownWith: "mouse",
     multiElement: null,
     name: `${t("labels.untitled")}-${getDateTime()}`,
-    contextMenu: null,
     openMenu: null,
     openPopup: null,
     openSidebar: null,
@@ -120,7 +122,7 @@ const APP_STATE_STORAGE_CONF = (<
   currentItemFillStyle: { browser: true, export: false, server: false },
   currentItemFontFamily: { browser: true, export: false, server: false },
   currentItemFontSize: { browser: true, export: false, server: false },
-  currentItemRoundness: {
+  currentItemLinearStrokeSharpness: {
     browser: true,
     export: false,
     server: false,
@@ -129,6 +131,7 @@ const APP_STATE_STORAGE_CONF = (<
   currentItemRoughness: { browser: true, export: false, server: false },
   currentItemStartArrowhead: { browser: true, export: false, server: false },
   currentItemStrokeColor: { browser: true, export: false, server: false },
+  currentItemStrokeSharpness: { browser: true, export: false, server: false },
   currentItemStrokeStyle: { browser: true, export: false, server: false },
   currentItemStrokeWidth: { browser: true, export: false, server: false },
   currentItemTextAlign: { browser: true, export: false, server: false },
@@ -144,6 +147,7 @@ const APP_STATE_STORAGE_CONF = (<
   exportBackground: { browser: true, export: false, server: false },
   exportEmbedScene: { browser: true, export: false, server: false },
   exportScale: { browser: true, export: false, server: false },
+  exportPadding: { browser: true, export: false, server: false },
   exportWithDarkMode: { browser: true, export: false, server: false },
   fileHandle: { browser: false, export: false, server: false },
   gridSize: { browser: true, export: true, server: true },
@@ -158,7 +162,6 @@ const APP_STATE_STORAGE_CONF = (<
   name: { browser: true, export: false, server: false },
   offsetLeft: { browser: false, export: false, server: false },
   offsetTop: { browser: false, export: false, server: false },
-  contextMenu: { browser: false, export: false, server: false },
   openMenu: { browser: true, export: false, server: false },
   openPopup: { browser: false, export: false, server: false },
   openSidebar: { browser: true, export: false, server: false },

src/charts.ts

@@ -172,7 +172,7 @@ const commonProps = {
   opacity: 100,
   roughness: 1,
   strokeColor: colors.elementStroke[0],
-  roundness: null,
+  strokeSharpness: "sharp",
   strokeStyle: "solid",
   strokeWidth: 1,
   verticalAlign: VERTICAL_ALIGN.MIDDLE,
@@ -322,7 +322,7 @@ const chartBaseElements = (
         text: spreadsheet.title,
         x: x + chartWidth / 2,
         y: y - BAR_HEIGHT - BAR_GAP * 2 - DEFAULT_FONT_SIZE,
-        roundness: null,
+        strokeSharpness: "sharp",
         strokeStyle: "solid",
         textAlign: "center",
       })

src/clipboard.test.ts

@@ -1,27 +0,0 @@
-import { parseClipboard } from "./clipboard";
-
-describe("Test parseClipboard", () => {
-  it("should parse valid json correctly", async () => {
-    let text = "123";
-
-    let clipboardData = await parseClipboard({
-      //@ts-ignore
-      clipboardData: {
-        getData: () => text,
-      },
-    });
-
-    expect(clipboardData.text).toBe(text);
-
-    text = "[123]";
-
-    clipboardData = await parseClipboard({
-      //@ts-ignore
-      clipboardData: {
-        getData: () => text,
-      },
-    });
-
-    expect(clipboardData.text).toBe(text);
-  });
-});

src/clipboard.ts

@@ -109,16 +109,16 @@ const parsePotentialSpreadsheet = (
  * Retrieves content from system clipboard (either from ClipboardEvent or
  *  via async clipboard API if supported)
  */
-export const getSystemClipboard = async (
+const getSystemClipboard = async (
   event: ClipboardEvent | null,
 ): Promise<string> => {
   try {
     const text = event
-      ? event.clipboardData?.getData("text/plain")
+      ? event.clipboardData?.getData("text/plain").trim()
       : probablySupportsClipboardReadText &&
         (await navigator.clipboard.readText());
 
-    return (text || "").trim();
+    return text || "";
   } catch {
     return "";
   }
@@ -129,25 +129,19 @@ export const getSystemClipboard = async (
  */
 export const parseClipboard = async (
   event: ClipboardEvent | null,
-  isPlainPaste = false,
 ): Promise<ClipboardData> => {
   const systemClipboard = await getSystemClipboard(event);
 
   // if system clipboard empty, couldn't be resolved, or contains previously
   // copied excalidraw scene as SVG, fall back to previously copied excalidraw
   // elements
-  if (
+  if (!systemClipboard || systemClipboard.includes(SVG_EXPORT_TAG)) {
-    !systemClipboard ||
-    (!isPlainPaste && systemClipboard.includes(SVG_EXPORT_TAG))
-  ) {
     return getAppClipboard();
   }
 
   // if system clipboard contains spreadsheet, use it even though it's
   // technically possible it's staler than in-app clipboard
-  const spreadsheetResult =
+  const spreadsheetResult = parsePotentialSpreadsheet(systemClipboard);
-    !isPlainPaste && parsePotentialSpreadsheet(systemClipboard);
-
   if (spreadsheetResult) {
     return spreadsheetResult;
   }
@@ -160,23 +154,17 @@ export const parseClipboard = async (
       return {
         elements: systemClipboardData.elements,
         files: systemClipboardData.files,
-        text: isPlainPaste
-          ? JSON.stringify(systemClipboardData.elements, null, 2)
-          : undefined,
       };
     }
-  } catch (e) {}
+    return appClipboardData;
-  // system clipboard doesn't contain excalidraw elements → return plaintext
+  } catch {
-  // unless we set a flag to prefer in-app clipboard because browser didn't
+    // system clipboard doesn't contain excalidraw elements → return plaintext
-  // support storing to system clipboard on copy
+    // unless we set a flag to prefer in-app clipboard because browser didn't
-  return PREFER_APP_CLIPBOARD && appClipboardData.elements
+    // support storing to system clipboard on copy
-    ? {
+    return PREFER_APP_CLIPBOARD && appClipboardData.elements
-        ...appClipboardData,
+      ? appClipboardData
-        text: isPlainPaste
+      : { text: systemClipboard };
-          ? JSON.stringify(appClipboardData.elements, null, 2)
+  }
-          : undefined,
-      }
-    : { text: systemClipboard };
 };
 
 export const copyBlobToClipboardAsPng = async (blob: Blob | Promise<Blob>) => {

src/components/Actions.tsx

@@ -5,7 +5,7 @@ import { ExcalidrawElement, PointerType } from "../element/types";
 import { t } from "../i18n";
 import { useDevice } from "../components/App";
 import {
-  canChangeRoundness,
+  canChangeSharpness,
   canHaveArrowheads,
   getTargetElements,
   hasBackground,
@@ -25,12 +25,11 @@ import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
 import { hasStrokeColor } from "../scene/comparisons";
 import { trackEvent } from "../analytics";
-import { hasBoundTextElement } from "../element/typeChecks";
+import { hasBoundTextElement, isBoundToContainer } from "../element/typeChecks";
 import clsx from "clsx";
 import { actionToggleZenMode } from "../actions";
 import "./Actions.scss";
 import { Tooltip } from "./Tooltip";
-import { shouldAllowVerticalAlign } from "../element/textElement";
 
 export const SelectedShapeActions = ({
   appState,
@@ -110,9 +109,9 @@ export const SelectedShapeActions = ({
         </>
       )}
 
-      {(canChangeRoundness(appState.activeTool.type) ||
+      {(canChangeSharpness(appState.activeTool.type) ||
-        targetElements.some((element) => canChangeRoundness(element.type))) && (
+        targetElements.some((element) => canChangeSharpness(element.type))) && (
-        <>{renderAction("changeRoundness")}</>
+        <>{renderAction("changeSharpness")}</>
       )}
 
       {(hasText(appState.activeTool.type) ||
@@ -126,8 +125,10 @@ export const SelectedShapeActions = ({
         </>
       )}
 
-      {shouldAllowVerticalAlign(targetElements) &&
+      {targetElements.some(
-        renderAction("changeVerticalAlign")}
+        (element) =>
+          hasBoundTextElement(element) || isBoundToContainer(element),
+      ) && renderAction("changeVerticalAlign")}
       {(canHaveArrowheads(appState.activeTool.type) ||
         targetElements.some((element) => canHaveArrowheads(element.type))) && (
         <>{renderAction("changeArrowhead")}</>
@@ -217,12 +218,13 @@ export const ShapesSwitcher = ({
   appState: AppState;
 }) => (
   <>
-    {SHAPES.map(({ value, icon, key, numericKey, fillable }, index) => {
+    {SHAPES.map(({ value, icon, key, fillable }, index) => {
+      const numberKey = value === "eraser" ? 0 : index + 1;
       const label = t(`toolBar.${value}`);
       const letter = key && (typeof key === "string" ? key : key[0]);
       const shortcut = letter
-        ? `${capitalizeString(letter)} ${t("helpDialog.or")} ${numericKey}`
+        ? `${capitalizeString(letter)} ${t("helpDialog.or")} ${numberKey}`
-        : `${numericKey}`;
+        : `${numberKey}`;
       return (
         <ToolButton
           className={clsx("Shape", { fillable })}
@@ -232,7 +234,7 @@ export const ShapesSwitcher = ({
           checked={activeTool.type === value}
           name="editor-current-shape"
           title={`${capitalizeString(label)} — ${shortcut}`}
-          keyBindingLabel={numericKey}
+          keyBindingLabel={`${numberKey}`}
           aria-label={capitalizeString(label)}
           aria-keyshortcuts={shortcut}
           data-testid={`toolbar-${value}`}

src/components/ActiveFile.tsx

@@ -0,0 +1,23 @@
+// TODO barnabasmolnar/editor-redesign
+// this icon is not great
+import { getShortcutFromShortcutName } from "../actions/shortcuts";
+import { save } from "../components/icons";
+import { t } from "../i18n";
+
+import "./ActiveFile.scss";
+import MenuItem from "./MenuItem";
+
+type ActiveFileProps = {
+  fileName?: string;
+  onSave: () => void;
+};
+
+export const ActiveFile = ({ fileName, onSave }: ActiveFileProps) => (
+  <MenuItem
+    label={`${t("buttons.save")}`}
+    shortcut={getShortcutFromShortcutName("saveScene")}
+    dataTestId="save-button"
+    onClick={onSave}
+    icon={save}
+  />
+);

src/components/Avatar.scss

@@ -4,8 +4,8 @@
   .Avatar {
     width: 1.25rem;
     height: 1.25rem;
-    position: relative;
     border-radius: 100%;
+    outline: 2px solid var(--avatar-border-color);
     outline-offset: 2px;
     display: flex;
     justify-content: center;
@@ -21,16 +21,5 @@
       height: 100%;
       border-radius: 100%;
     }
-
-    &::before {
-      content: "";
-      position: absolute;
-      top: -3px;
-      right: -3px;
-      bottom: -3px;
-      left: -3px;
-      border: 1px solid var(--avatar-border-color);
-      border-radius: 100%;
-    }
   }
 }

src/components/Button.scss

@@ -1,7 +0,0 @@
-@import "../css/theme";
-
-.excalidraw {
-  .excalidraw-button {
-    @include outlineButtonStyles;
-  }
-}

src/components/Button.tsx

@@ -1,35 +0,0 @@
-import "./Button.scss";
-
-interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
-  type?: "button" | "submit" | "reset";
-  onSelect: () => any;
-  children: React.ReactNode;
-  className?: string;
-}
-
-/**
- * A generic button component that follows Excalidraw's design system.
- * Style can be customised using `className` or `style` prop.
- * Accepts all props that a regular `button` element accepts.
- */
-export const Button = ({
-  type = "button",
-  onSelect,
-  children,
-  className = "",
-  ...rest
-}: ButtonProps) => {
-  return (
-    <button
-      onClick={(event) => {
-        onSelect();
-        rest.onClick?.(event);
-      }}
-      type={type}
-      className={`excalidraw-button ${className}`}
-      {...rest}
-    >
-      {children}
-    </button>
-  );
-};

src/components/ClearCanvas.tsx

@@ -0,0 +1,39 @@
+import { useState } from "react";
+import { t } from "../i18n";
+import { TrashIcon } from "./icons";
+
+import ConfirmDialog from "./ConfirmDialog";
+import MenuItem from "./MenuItem";
+
+const ClearCanvas = ({ onConfirm }: { onConfirm: () => void }) => {
+  const [showDialog, setShowDialog] = useState(false);
+  const toggleDialog = () => {
+    setShowDialog(!showDialog);
+  };
+
+  return (
+    <>
+      <MenuItem
+        label={t("buttons.clearReset")}
+        icon={TrashIcon}
+        onClick={toggleDialog}
+        dataTestId="clear-canvas-button"
+      />
+
+      {showDialog && (
+        <ConfirmDialog
+          onConfirm={() => {
+            onConfirm();
+            toggleDialog();
+          }}
+          onCancel={toggleDialog}
+          title={t("clearCanvasDialog.title")}
+        >
+          <p className="clear-canvas__content"> {t("alerts.clearReset")}</p>
+        </ConfirmDialog>
+      )}
+    </>
+  );
+};
+
+export default ClearCanvas;

src/components/CollabButton.scss

@@ -1,23 +1,30 @@
-@import "../../css/variables.module";
+@import "../css/variables.module";
 
 .excalidraw {
   .collab-button {
-    --button-bg: var(--color-primary);
+    @include outlineButtonStyles;
-    --button-color: white;
+    width: var(--lg-button-size);
-    --button-border: var(--color-primary);
+    height: var(--lg-button-size);
-
-    --button-width: var(--lg-button-size);
-    --button-height: var(--lg-button-size);
-
-    --button-hover-bg: var(--color-primary-darker);
-    --button-hover-border: var(--color-primary-darker);
-
-    --button-active-bg: var(--color-primary-darker);
 
+    svg {
+      width: var(--lg-icon-size);
+      height: var(--lg-icon-size);
+    }
+    background-color: var(--color-primary);
+    border-color: var(--color-primary);
+    color: white;
     flex-shrink: 0;
 
-    // double .active to force specificity
+    &:hover {
-    &.active.active {
+      background-color: var(--color-primary-darker);
+      border-color: var(--color-primary-darker);
+    }
+
+    &:active {
+      background-color: var(--color-primary-darker);
+    }
+
+    &.active {
       background-color: #0fb884;
       border-color: #0fb884;
 

src/components/CollabButton.tsx

@@ -0,0 +1,49 @@
+import { t } from "../i18n";
+import { UsersIcon } from "./icons";
+
+import "./CollabButton.scss";
+import MenuItem from "./MenuItem";
+import clsx from "clsx";
+
+const CollabButton = ({
+  isCollaborating,
+  collaboratorCount,
+  onClick,
+  isInHamburgerMenu = true,
+}: {
+  isCollaborating: boolean;
+  collaboratorCount: number;
+  onClick: () => void;
+  isInHamburgerMenu?: boolean;
+}) => {
+  return (
+    <>
+      {isInHamburgerMenu ? (
+        <MenuItem
+          label={t("labels.liveCollaboration")}
+          dataTestId="collab-button"
+          icon={UsersIcon}
+          onClick={onClick}
+          isCollaborating={isCollaborating}
+        />
+      ) : (
+        <button
+          className={clsx("collab-button", { active: isCollaborating })}
+          type="button"
+          onClick={onClick}
+          style={{ position: "relative" }}
+          title={t("labels.liveCollaboration")}
+        >
+          {UsersIcon}
+          {collaboratorCount > 0 && (
+            <div className="CollabButton-collaborators">
+              {collaboratorCount}
+            </div>
+          )}
+        </button>
+      )}
+    </>
+  );
+};
+
+export default CollabButton;

src/components/ColorPicker.tsx

@@ -66,13 +66,10 @@ const getColor = (color: string): string | null => {
     return color;
   }
 
-  // testing for `#` first fixes a bug on Electron (more specfically, an
+  return isValidColor(color)
-  // Obsidian popout window), where a hex color without `#` is (incorrectly)
-  // considered valid
-  return isValidColor(`#${color}`)
-    ? `#${color}`
-    : isValidColor(color)
     ? color
+    : isValidColor(`#${color}`)
+    ? `#${color}`
     : null;
 };
 

src/components/ConfirmDialog.tsx

@@ -3,9 +3,9 @@ import { Dialog, DialogProps } from "./Dialog";
 
 import "./ConfirmDialog.scss";
 import DialogActionButton from "./DialogActionButton";
+import { isMenuOpenAtom } from "./App";
+import { isDropdownOpenAtom } from "./App";
 import { useSetAtom } from "jotai";
-import { isLibraryMenuOpenAtom } from "./LibraryMenuHeaderContent";
-import { useExcalidrawSetAppState } from "./App";
 
 interface Props extends Omit<DialogProps, "onCloseRequest"> {
   onConfirm: () => void;
@@ -23,8 +23,9 @@ const ConfirmDialog = (props: Props) => {
     className = "",
     ...rest
   } = props;
-  const setAppState = useExcalidrawSetAppState();
+
-  const setIsLibraryMenuOpen = useSetAtom(isLibraryMenuOpenAtom);
+  const setIsMenuOpen = useSetAtom(isMenuOpenAtom);
+  const setIsDropdownOpen = useSetAtom(isDropdownOpenAtom);
 
   return (
     <Dialog
@@ -38,16 +39,16 @@ const ConfirmDialog = (props: Props) => {
         <DialogActionButton
           label={cancelText}
           onClick={() => {
-            setAppState({ openMenu: null });
+            setIsMenuOpen(false);
-            setIsLibraryMenuOpen(false);
+            setIsDropdownOpen(false);
             onCancel();
           }}
         />
         <DialogActionButton
           label={confirmText}
           onClick={() => {
-            setAppState({ openMenu: null });
+            setIsMenuOpen(false);
-            setIsLibraryMenuOpen(false);
+            setIsDropdownOpen(false);
             onConfirm();
           }}
           actionType="danger"

src/components/ContextMenu.scss

@@ -19,7 +19,7 @@
     color: var(--popup-text-color);
   }
 
-  .context-menu-item {
+  .context-menu-option {
     position: relative;
     width: 100%;
     min-width: 9.5rem;
@@ -43,16 +43,16 @@
     }
 
     &.dangerous {
-      .context-menu-item__label {
+      .context-menu-option__label {
         color: $oc-red-7;
       }
     }
 
-    .context-menu-item__label {
+    .context-menu-option__label {
       justify-self: start;
       margin-inline-end: 20px;
     }
-    .context-menu-item__shortcut {
+    .context-menu-option__shortcut {
       justify-self: end;
       opacity: 0.6;
       font-family: inherit;
@@ -60,37 +60,37 @@
     }
   }
 
-  .context-menu-item:hover {
+  .context-menu-option:hover {
     color: var(--popup-bg-color);
     background-color: var(--select-highlight-color);
 
     &.dangerous {
-      .context-menu-item__label {
+      .context-menu-option__label {
         color: var(--popup-bg-color);
       }
       background-color: $oc-red-6;
     }
   }
 
-  .context-menu-item:focus {
+  .context-menu-option:focus {
     z-index: 1;
   }
 
   @include isMobile {
-    .context-menu-item {
+    .context-menu-option {
       display: block;
 
-      .context-menu-item__label {
+      .context-menu-option__label {
         margin-inline-end: 0;
       }
 
-      .context-menu-item__shortcut {
+      .context-menu-option__shortcut {
         display: none;
       }
     }
   }
 
-  .context-menu-item-separator {
+  .context-menu-option-separator {
     border: none;
     border-top: 1px solid $oc-gray-5;
   }

src/components/ContextMenu.tsx

@@ -1,3 +1,4 @@
+import { render, unmountComponentAtNode } from "react-dom";
 import clsx from "clsx";
 import { Popover } from "./Popover";
 import { t } from "../i18n";
@@ -9,116 +10,140 @@ import {
 } from "../actions/shortcuts";
 import { Action } from "../actions/types";
 import { ActionManager } from "../actions/manager";
-import {
+import { AppState } from "../types";
-  useExcalidrawAppState,
+import { NonDeletedExcalidrawElement } from "../element/types";
-  useExcalidrawElements,
-  useExcalidrawSetAppState,
-} from "./App";
-import React from "react";
 
-export type ContextMenuItem = typeof CONTEXT_MENU_SEPARATOR | Action;
+export type ContextMenuOption = "separator" | Action;
-
-export type ContextMenuItems = (ContextMenuItem | false | null | undefined)[];
 
 type ContextMenuProps = {
-  actionManager: ActionManager;
+  options: ContextMenuOption[];
-  items: ContextMenuItems;
+  onCloseRequest?(): void;
   top: number;
   left: number;
+  actionManager: ActionManager;
+  appState: Readonly<AppState>;
+  elements: readonly NonDeletedExcalidrawElement[];
 };
 
-export const CONTEXT_MENU_SEPARATOR = "separator";
+const ContextMenu = ({
-
+  options,
-export const ContextMenu = React.memo(
+  onCloseRequest,
-  ({ actionManager, items, top, left }: ContextMenuProps) => {
+  top,
-    const appState = useExcalidrawAppState();
+  left,
-    const setAppState = useExcalidrawSetAppState();
+  actionManager,
-    const elements = useExcalidrawElements();
+  appState,
-
+  elements,
-    const filteredItems = items.reduce((acc: ContextMenuItem[], item) => {
+}: ContextMenuProps) => {
-      if (
+  return (
-        item &&
+    <Popover
-        (item === CONTEXT_MENU_SEPARATOR ||
+      onCloseRequest={onCloseRequest}
-          !item.predicate ||
+      top={top}
-          item.predicate(
+      left={left}
-            elements,
+      fitInViewport={true}
-            appState,
+      offsetLeft={appState.offsetLeft}
-            actionManager.app.props,
+      offsetTop={appState.offsetTop}
-            actionManager.app,
+      viewportWidth={appState.width}
-          ))
+      viewportHeight={appState.height}
-      ) {
+    >
-        acc.push(item);
+      <ul
-      }
+        className="context-menu"
-      return acc;
+        onContextMenu={(event) => event.preventDefault()}
-    }, []);
-
-    return (
-      <Popover
-        onCloseRequest={() => setAppState({ contextMenu: null })}
-        top={top}
-        left={left}
-        fitInViewport={true}
-        offsetLeft={appState.offsetLeft}
-        offsetTop={appState.offsetTop}
-        viewportWidth={appState.width}
-        viewportHeight={appState.height}
       >
-        <ul
+        {options.map((option, idx) => {
-          className="context-menu"
+          if (option === "separator") {
-          onContextMenu={(event) => event.preventDefault()}
+            return <hr key={idx} className="context-menu-option-separator" />;
-        >
+          }
-          {filteredItems.map((item, idx) => {
-            if (item === CONTEXT_MENU_SEPARATOR) {
-              if (
-                !filteredItems[idx - 1] ||
-                filteredItems[idx - 1] === CONTEXT_MENU_SEPARATOR
-              ) {
-                return null;
-              }
-              return <hr key={idx} className="context-menu-item-separator" />;
-            }
 
-            const actionName = item.name;
+          const actionName = option.name;
-            let label = "";
+          let label = "";
-            if (item.contextItemLabel) {
+          if (option.contextItemLabel) {
-              if (typeof item.contextItemLabel === "function") {
+            if (typeof option.contextItemLabel === "function") {
-                label = t(item.contextItemLabel(elements, appState));
+              label = t(option.contextItemLabel(elements, appState));
-              } else {
+            } else {
-                label = t(item.contextItemLabel);
+              label = t(option.contextItemLabel);
-              }
             }
-
+          }
-            return (
+          return (
-              <li
+            <li key={idx} data-testid={actionName} onClick={onCloseRequest}>
-                key={idx}
+              <button
-                data-testid={actionName}
+                className={clsx("context-menu-option", {
-                onClick={() => {
+                  dangerous: actionName === "deleteSelectedElements",
-                  // we need update state before executing the action in case
+                  checkmark: option.checked?.(appState),
-                  // the action uses the appState it's being passed (that still
+                })}
-                  // contains a defined contextMenu) to return the next state.
+                onClick={() =>
-                  setAppState({ contextMenu: null }, () => {
+                  actionManager.executeAction(option, "contextMenu")
-                    actionManager.executeAction(item, "contextMenu");
+                }
-                  });
-                }}
               >
-                <button
+                <div className="context-menu-option__label">{label}</div>
-                  className={clsx("context-menu-item", {
+                <kbd className="context-menu-option__shortcut">
-                    dangerous: actionName === "deleteSelectedElements",
+                  {actionName
-                    checkmark: item.checked?.(appState),
+                    ? getShortcutFromShortcutName(actionName as ShortcutName)
-                  })}
+                    : ""}
-                >
+                </kbd>
-                  <div className="context-menu-item__label">{label}</div>
+              </button>
-                  <kbd className="context-menu-item__shortcut">
+            </li>
-                    {actionName
+          );
-                      ? getShortcutFromShortcutName(actionName as ShortcutName)
+        })}
-                      : ""}
+      </ul>
-                  </kbd>
+    </Popover>
-                </button>
+  );
-              </li>
+};
-            );
+
-          })}
+const contextMenuNodeByContainer = new WeakMap<HTMLElement, HTMLDivElement>();
-        </ul>
+
-      </Popover>
+const getContextMenuNode = (container: HTMLElement): HTMLDivElement => {
-    );
+  let contextMenuNode = contextMenuNodeByContainer.get(container);
+  if (contextMenuNode) {
+    return contextMenuNode;
+  }
+  contextMenuNode = document.createElement("div");
+  container
+    .querySelector(".excalidraw-contextMenuContainer")!
+    .appendChild(contextMenuNode);
+  contextMenuNodeByContainer.set(container, contextMenuNode);
+  return contextMenuNode;
+};
+
+type ContextMenuParams = {
+  options: (ContextMenuOption | false | null | undefined)[];
+  top: ContextMenuProps["top"];
+  left: ContextMenuProps["left"];
+  actionManager: ContextMenuProps["actionManager"];
+  appState: Readonly<AppState>;
+  container: HTMLElement;
+  elements: readonly NonDeletedExcalidrawElement[];
+};
+
+const handleClose = (container: HTMLElement) => {
+  const contextMenuNode = contextMenuNodeByContainer.get(container);
+  if (contextMenuNode) {
+    unmountComponentAtNode(contextMenuNode);
+    contextMenuNode.remove();
+    contextMenuNodeByContainer.delete(container);
+  }
+};
+
+export default {
+  push(params: ContextMenuParams) {
+    const options = Array.of<ContextMenuOption>();
+    params.options.forEach((option) => {
+      if (option) {
+        options.push(option);
+      }
+    });
+    if (options.length) {
+      render(
+        <ContextMenu
+          top={params.top}
+          left={params.left}
+          options={options}
+          onCloseRequest={() => handleClose(params.container)}
+          actionManager={params.actionManager}
+          appState={params.appState}
+          elements={params.elements}
+        />,
+        getContextMenuNode(params.container),
+      );
+    }
   },
-);
+};

src/components/Dialog.tsx

@@ -2,11 +2,7 @@ import clsx from "clsx";
 import React, { useEffect, useState } from "react";
 import { useCallbackRefState } from "../hooks/useCallbackRefState";
 import { t } from "../i18n";
-import {
+import { useExcalidrawContainer, useDevice } from "../components/App";
-  useExcalidrawContainer,
-  useDevice,
-  useExcalidrawSetAppState,
-} from "../components/App";
 import { KEYS } from "../keys";
 import "./Dialog.scss";
 import { back, CloseIcon } from "./icons";
@@ -14,8 +10,8 @@ import { Island } from "./Island";
 import { Modal } from "./Modal";
 import { AppState } from "../types";
 import { queryFocusableElements } from "../utils";
+import { isMenuOpenAtom, isDropdownOpenAtom } from "./App";
 import { useSetAtom } from "jotai";
-import { isLibraryMenuOpenAtom } from "./LibraryMenuHeaderContent";
 
 export interface DialogProps {
   children: React.ReactNode;
@@ -71,12 +67,12 @@ export const Dialog = (props: DialogProps) => {
     return () => islandNode.removeEventListener("keydown", handleKeyDown);
   }, [islandNode, props.autofocus]);
 
-  const setAppState = useExcalidrawSetAppState();
+  const setIsMenuOpen = useSetAtom(isMenuOpenAtom);
-  const setIsLibraryMenuOpen = useSetAtom(isLibraryMenuOpenAtom);
+  const setIsDropdownOpen = useSetAtom(isDropdownOpenAtom);
 
   const onClose = () => {
-    setAppState({ openMenu: null });
+    setIsMenuOpen(false);
-    setIsLibraryMenuOpen(false);
+    setIsDropdownOpen(false);
     (lastActiveElement as HTMLElement).focus();
     props.onCloseRequest();
   };

src/components/EncryptedIcon.tsx

@@ -1,8 +1,8 @@
-import { shield } from "../../components/icons";
+import { t } from "../i18n";
-import { Tooltip } from "../../components/Tooltip";
+import { shield } from "./icons";
-import { t } from "../../i18n";
+import { Tooltip } from "./Tooltip";
 
-export const EncryptedIcon = () => (
+const EncryptedIcon = () => (
   <a
     className="encrypted-icon tooltip"
     href="https://blog.excalidraw.com/end-to-end-encryption/"
@@ -15,3 +15,5 @@ export const EncryptedIcon = () => (
     </Tooltip>
   </a>
 );
+
+export default EncryptedIcon;

src/components/FixedSideContainer.scss

@@ -1,5 +1,3 @@
-@import "../css/variables.module";
-
 .excalidraw {
   .FixedSideContainer {
     position: absolute;
@@ -11,10 +9,10 @@
   }
 
   .FixedSideContainer_side_top {
-    left: var(--editor-container-padding);
+    left: 1rem;
-    top: var(--editor-container-padding);
+    top: 1rem;
-    right: var(--editor-container-padding);
+    right: 1rem;
-    bottom: var(--editor-container-padding);
+    bottom: 1rem;
     z-index: 2;
   }
 

src/components/Footer.tsx

@@ -1,39 +1,35 @@
 import clsx from "clsx";
-import { actionShortcuts } from "../../actions";
+import { ActionManager } from "../actions/manager";
-import { ActionManager } from "../../actions/manager";
+import { t } from "../i18n";
-import {
+import { AppState, ExcalidrawProps } from "../types";
-  AppState,
-  UIChildrenComponents,
-  UIWelcomeScreenComponents,
-} from "../../types";
 import {
   ExitZenModeAction,
   FinalizeAction,
   UndoRedoActions,
   ZoomActions,
-} from "../Actions";
+} from "./Actions";
-import { useDevice } from "../App";
+import { useDevice } from "./App";
-import { HelpButton } from "../HelpButton";
+import { WelcomeScreenHelpArrow } from "./icons";
-import { Section } from "../Section";
+import { Section } from "./Section";
-import Stack from "../Stack";
+import Stack from "./Stack";
+import WelcomeScreenDecor from "./WelcomeScreenDecor";
 
 const Footer = ({
   appState,
   actionManager,
+  renderCustomFooter,
   showExitZenModeBtn,
-  footerCenter,
+  renderWelcomeScreen,
-  welcomeScreenHelp,
 }: {
   appState: AppState;
   actionManager: ActionManager;
+  renderCustomFooter?: ExcalidrawProps["renderFooter"];
   showExitZenModeBtn: boolean;
-  footerCenter: UIChildrenComponents["FooterCenter"];
+  renderWelcomeScreen: boolean;
-  welcomeScreenHelp: UIWelcomeScreenComponents["HelpHint"];
 }) => {
   const device = useDevice();
   const showFinalize =
     !appState.viewModeEnabled && appState.multiElement && device.isTouchScreen;
-
   return (
     <footer
       role="contentinfo"
@@ -73,17 +69,33 @@ const Footer = ({
           </Section>
         </Stack.Col>
       </div>
-      {footerCenter}
+      <div
+        className={clsx(
+          "layer-ui__wrapper__footer-center zen-mode-transition",
+          {
+            "layer-ui__wrapper__footer-left--transition-bottom":
+              appState.zenModeEnabled,
+          },
+        )}
+      >
+        {renderCustomFooter?.(false, appState)}
+      </div>
       <div
         className={clsx("layer-ui__wrapper__footer-right zen-mode-transition", {
           "transition-right disable-pointerEvents": appState.zenModeEnabled,
         })}
       >
         <div style={{ position: "relative" }}>
-          {welcomeScreenHelp}
+          <WelcomeScreenDecor
-          <HelpButton
+            shouldRender={renderWelcomeScreen && !appState.isLoading}
-            onClick={() => actionManager.executeAction(actionShortcuts)}
+          >
-          />
+            <div className="virgil WelcomeScreen-decor WelcomeScreen-decor--help-pointer">
+              <div>{t("welcomeScreen.helpHints")}</div>
+              {WelcomeScreenHelpArrow}
+            </div>
+          </WelcomeScreenDecor>
+
+          {actionManager.renderAction("toggleShortcuts")}
         </div>
       </div>
       <ExitZenModeAction
@@ -95,4 +107,3 @@ const Footer = ({
 };
 
 export default Footer;
-Footer.displayName = "Footer";

src/components/HelpDialog.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { t } from "../i18n";
-import { isDarwin, isWindows, KEYS } from "../keys";
+import { isDarwin, isWindows } from "../keys";
 import { Dialog } from "./Dialog";
 import { getShortcutKey } from "../utils";
 import "./HelpDialog.scss";
@@ -118,49 +118,26 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
             className="HelpDialog__island--tools"
             caption={t("helpDialog.tools")}
           >
-            <Shortcut
+            <Shortcut label={t("toolBar.selection")} shortcuts={["V", "1"]} />
-              label={t("toolBar.selection")}
+            <Shortcut label={t("toolBar.rectangle")} shortcuts={["R", "2"]} />
-              shortcuts={[KEYS.V, KEYS["1"]]}
+            <Shortcut label={t("toolBar.diamond")} shortcuts={["D", "3"]} />
-            />
+            <Shortcut label={t("toolBar.ellipse")} shortcuts={["O", "4"]} />
-            <Shortcut
+            <Shortcut label={t("toolBar.arrow")} shortcuts={["A", "5"]} />
-              label={t("toolBar.rectangle")}
+            <Shortcut label={t("toolBar.line")} shortcuts={["P", "6"]} />
-              shortcuts={[KEYS.R, KEYS["2"]]}
-            />
-            <Shortcut
-              label={t("toolBar.diamond")}
-              shortcuts={[KEYS.D, KEYS["3"]]}
-            />
-            <Shortcut
-              label={t("toolBar.ellipse")}
-              shortcuts={[KEYS.O, KEYS["4"]]}
-            />
-            <Shortcut
-              label={t("toolBar.arrow")}
-              shortcuts={[KEYS.A, KEYS["5"]]}
-            />
-            <Shortcut
-              label={t("toolBar.line")}
-              shortcuts={[KEYS.L, KEYS["6"]]}
-            />
             <Shortcut
               label={t("toolBar.freedraw")}
-              shortcuts={[KEYS.P, KEYS["7"]]}
+              shortcuts={["Shift + P", "X", "7"]}
             />
-            <Shortcut
+            <Shortcut label={t("toolBar.text")} shortcuts={["T", "8"]} />
-              label={t("toolBar.text")}
+            <Shortcut label={t("toolBar.image")} shortcuts={["9"]} />
-              shortcuts={[KEYS.T, KEYS["8"]]}
+            <Shortcut label={t("toolBar.library")} shortcuts={["0"]} />
-            />
-            <Shortcut label={t("toolBar.image")} shortcuts={[KEYS["9"]]} />
             <Shortcut
               label={t("toolBar.eraser")}
-              shortcuts={[KEYS.E, KEYS["0"]]}
+              shortcuts={[getShortcutKey("E")]}
             />
             <Shortcut
               label={t("helpDialog.editSelectedShape")}
-              shortcuts={[
+              shortcuts={[getShortcutKey("Enter"), t("helpDialog.doubleClick")]}
-                getShortcutKey("CtrlOrCmd+Enter"),
-                getShortcutKey(`CtrlOrCmd + ${t("helpDialog.doubleClick")}`),
-              ]}
             />
             <Shortcut
               label={t("helpDialog.textNewLine")}
@@ -196,7 +173,7 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
               ]}
               isOr={false}
             />
-            <Shortcut label={t("toolBar.lock")} shortcuts={[KEYS.Q]} />
+            <Shortcut label={t("toolBar.lock")} shortcuts={["Q"]} />
             <Shortcut
               label={t("helpDialog.preventBinding")}
               shortcuts={[getShortcutKey("CtrlOrCmd")]}
@@ -230,14 +207,6 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
               label={t("helpDialog.zoomToSelection")}
               shortcuts={["Shift+2"]}
             />
-            <Shortcut
-              label={t("helpDialog.movePageUpDown")}
-              shortcuts={["PgUp/PgDn"]}
-            />
-            <Shortcut
-              label={t("helpDialog.movePageLeftRight")}
-              shortcuts={["Shift+PgUp/PgDn"]}
-            />
             <Shortcut label={t("buttons.fullScreen")} shortcuts={["F"]} />
             <Shortcut
               label={t("buttons.zenMode")}
@@ -300,10 +269,6 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
               label={t("labels.paste")}
               shortcuts={[getShortcutKey("CtrlOrCmd+V")]}
             />
-            <Shortcut
-              label={t("labels.pasteAsPlaintext")}
-              shortcuts={[getShortcutKey("CtrlOrCmd+Shift+V")]}
-            />
             <Shortcut
               label={t("labels.copyAsPng")}
               shortcuts={[getShortcutKey("Shift+Alt+C")]}
@@ -318,7 +283,7 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
             />
             <Shortcut
               label={t("labels.delete")}
-              shortcuts={[getShortcutKey("Delete")]}
+              shortcuts={[getShortcutKey("Del")]}
             />
             <Shortcut
               label={t("labels.sendToBack")}

src/components/ImageExportDialog.tsx

@@ -1,7 +1,9 @@
 import React, { useEffect, useRef, useState } from "react";
+import { render, unmountComponentAtNode } from "react-dom";
 import { probablySupportsClipboardBlob } from "../clipboard";
 import { canvasToBlob } from "../data/blob";
 import { NonDeletedExcalidrawElement } from "../element/types";
+import { CanvasError } from "../errors";
 import { t } from "../i18n";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { exportToCanvas } from "../scene/export";
@@ -31,6 +33,19 @@ export const ErrorCanvasPreview = () => {
   );
 };
 
+const renderPreview = (
+  content: HTMLCanvasElement | Error,
+  previewNode: HTMLDivElement,
+) => {
+  unmountComponentAtNode(previewNode);
+  previewNode.innerHTML = "";
+  if (content instanceof HTMLCanvasElement) {
+    previewNode.appendChild(content);
+  } else {
+    render(<ErrorCanvasPreview />, previewNode);
+  }
+};
+
 export type ExportCB = (
   elements: readonly NonDeletedExcalidrawElement[],
   scale?: number,
@@ -64,7 +79,6 @@ const ImageExportModal = ({
   elements,
   appState,
   files,
-  exportPadding = DEFAULT_EXPORT_PADDING,
   actionManager,
   onExportToPng,
   onExportToSvg,
@@ -73,7 +87,6 @@ const ImageExportModal = ({
   appState: AppState;
   elements: readonly NonDeletedExcalidrawElement[];
   files: BinaryFiles;
-  exportPadding?: number;
   actionManager: ActionManager;
   onExportToPng: ExportCB;
   onExportToSvg: ExportCB;
@@ -84,7 +97,6 @@ const ImageExportModal = ({
   const [exportSelected, setExportSelected] = useState(someElementIsSelected);
   const previewRef = useRef<HTMLDivElement>(null);
   const { exportBackground, viewBackgroundColor } = appState;
-  const [renderError, setRenderError] = useState<Error | null>(null);
 
   const exportedElements = exportSelected
     ? getSelectedElements(elements, appState, true)
@@ -102,34 +114,30 @@ const ImageExportModal = ({
     exportToCanvas(exportedElements, appState, files, {
       exportBackground,
       viewBackgroundColor,
-      exportPadding,
+      exportPadding: appState.exportPadding,
     })
       .then((canvas) => {
-        setRenderError(null);
         // if converting to blob fails, there's some problem that will
         // likely prevent preview and export (e.g. canvas too big)
         return canvasToBlob(canvas).then(() => {
-          previewNode.replaceChildren(canvas);
+          renderPreview(canvas, previewNode);
         });
       })
       .catch((error) => {
         console.error(error);
-        setRenderError(error);
+        renderPreview(new CanvasError(), previewNode);
       });
   }, [
     appState,
     files,
     exportedElements,
     exportBackground,
-    exportPadding,
     viewBackgroundColor,
   ]);
 
   return (
     <div className="ExportDialog">
-      <div className="ExportDialog__preview" ref={previewRef}>
+      <div className="ExportDialog__preview" ref={previewRef} />
-        {renderError && <ErrorCanvasPreview />}
-      </div>
       {supportsContextFilters &&
         actionManager.renderAction("exportWithDarkMode")}
       <div style={{ display: "grid", gridTemplateColumns: "1fr" }}>
@@ -140,8 +148,10 @@ const ImageExportModal = ({
             // dunno why this is needed, but when the items wrap it creates
             // an overflow
             overflow: "hidden",
+            gap: ".6rem",
           }}
         >
+          {actionManager.renderAction("changeExportPadding")}
           {actionManager.renderAction("changeExportBackground")}
           {someElementIsSelected && (
             <CheckboxItem
@@ -210,7 +220,6 @@ export const ImageExportDialog = ({
   appState,
   setAppState,
   files,
-  exportPadding = DEFAULT_EXPORT_PADDING,
   actionManager,
   onExportToPng,
   onExportToSvg,
@@ -220,7 +229,6 @@ export const ImageExportDialog = ({
   setAppState: React.Component<any, AppState>["setState"];
   elements: readonly NonDeletedExcalidrawElement[];
   files: BinaryFiles;
-  exportPadding?: number;
   actionManager: ActionManager;
   onExportToPng: ExportCB;
   onExportToSvg: ExportCB;
@@ -238,7 +246,6 @@ export const ImageExportDialog = ({
             elements={elements}
             appState={appState}
             files={files}
-            exportPadding={exportPadding}
             actionManager={actionManager}
             onExportToPng={onExportToPng}
             onExportToSvg={onExportToSvg}

src/components/JSONExportDialog.tsx

@@ -1,10 +1,10 @@
-import React from "react";
+import React, { useState } from "react";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
 
 import { AppState, ExportOpts, BinaryFiles } from "../types";
 import { Dialog } from "./Dialog";
-import { exportToFileIcon, LinkIcon } from "./icons";
+import { ExportIcon, exportToFileIcon, LinkIcon } from "./icons";
 import { ToolButton } from "./ToolButton";
 import { actionSaveFileToDisk } from "../actions/actionExport";
 import { Card } from "./Card";
@@ -14,6 +14,7 @@ import { nativeFileSystemSupported } from "../data/filesystem";
 import { trackEvent } from "../analytics";
 import { ActionManager } from "../actions/manager";
 import { getFrame } from "../utils";
+import MenuItem from "./MenuItem";
 
 export type ExportCB = (
   elements: readonly NonDeletedExcalidrawElement[],
@@ -93,7 +94,6 @@ export const JSONExportDialog = ({
   actionManager,
   exportOpts,
   canvas,
-  setAppState,
 }: {
   elements: readonly NonDeletedExcalidrawElement[];
   appState: AppState;
@@ -101,15 +101,24 @@ export const JSONExportDialog = ({
   actionManager: ActionManager;
   exportOpts: ExportOpts;
   canvas: HTMLCanvasElement | null;
-  setAppState: React.Component<any, AppState>["setState"];
 }) => {
+  const [modalIsShown, setModalIsShown] = useState(false);
+
   const handleClose = React.useCallback(() => {
-    setAppState({ openDialog: null });
+    setModalIsShown(false);
-  }, [setAppState]);
+  }, []);
 
   return (
     <>
-      {appState.openDialog === "jsonExport" && (
+      <MenuItem
+        icon={ExportIcon}
+        label={t("buttons.export")}
+        onClick={() => {
+          setModalIsShown(true);
+        }}
+        dataTestId="json-export-button"
+      />
+      {modalIsShown && (
         <Dialog onCloseRequest={handleClose} title={t("buttons.export")}>
           <JSONExportModal
             elements={elements}

src/components/LayerUI.scss

@@ -80,6 +80,12 @@
       }
     }
 
+    .layer-ui__wrapper__footer-center {
+      pointer-events: none;
+      & > * {
+        pointer-events: all;
+      }
+    }
     .layer-ui__wrapper__footer-left,
     .layer-ui__wrapper__footer-right,
     .disable-zen-mode--visible {

src/components/LayerUI.tsx

@@ -8,16 +8,10 @@ import { NonDeletedExcalidrawElement } from "../element/types";
 import { Language, t } from "../i18n";
 import { calculateScrollCenter } from "../scene";
 import { ExportType } from "../scene/types";
-import {
+import { AppProps, AppState, ExcalidrawProps, BinaryFiles } from "../types";
-  AppProps,
+import { muteFSAbortError } from "../utils";
-  AppState,
-  ExcalidrawProps,
-  BinaryFiles,
-  UIChildrenComponents,
-  UIWelcomeScreenComponents,
-} from "../types";
-import { muteFSAbortError, getReactChildren } from "../utils";
 import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
+import CollabButton from "./CollabButton";
 import { ErrorDialog } from "./ErrorDialog";
 import { ExportCB, ImageExportDialog } from "./ImageExportDialog";
 import { FixedSideContainer } from "./FixedSideContainer";
@@ -41,24 +35,35 @@ import "./LayerUI.scss";
 import "./Toolbar.scss";
 import { PenModeButton } from "./PenModeButton";
 import { trackEvent } from "../analytics";
-import { useDevice } from "../components/App";
+import { isMenuOpenAtom, useDevice } from "../components/App";
 import { Stats } from "./Stats";
 import { actionToggleStats } from "../actions/actionToggleStats";
-import Footer from "./footer/Footer";
+import Footer from "./Footer";
-import WelcomeScreen from "./welcome-screen/WelcomeScreen";
+import {
+  ExportImageIcon,
+  HamburgerMenuIcon,
+  WelcomeScreenMenuArrow,
+  WelcomeScreenTopToolbarArrow,
+} from "./icons";
+import { MenuLinks, Separator } from "./MenuUtils";
+import { useOutsideClickHook } from "../hooks/useOutsideClick";
+import WelcomeScreen from "./WelcomeScreen";
 import { hostSidebarCountersAtom } from "./Sidebar/Sidebar";
 import { jotaiScope } from "../jotai";
 import { useAtom } from "jotai";
-import MainMenu from "./main-menu/MainMenu";
+import { LanguageList } from "../excalidraw-app/components/LanguageList";
+import WelcomeScreenDecor from "./WelcomeScreenDecor";
+import { getShortcutFromShortcutName } from "../actions/shortcuts";
+import MenuItem from "./MenuItem";
 
 interface LayerUIProps {
-  test: JSX.Element;
   actionManager: ActionManager;
   appState: AppState;
   files: BinaryFiles;
   canvas: HTMLCanvasElement | null;
   setAppState: React.Component<any, AppState>["setState"];
   elements: readonly NonDeletedExcalidrawElement[];
+  onCollabButtonClick?: () => void;
   onLockToggle: () => void;
   onPenModeToggle: () => void;
   onInsertElements: (elements: readonly NonDeletedExcalidrawElement[]) => void;
@@ -66,6 +71,7 @@ interface LayerUIProps {
   langCode: Language["code"];
   isCollaborating: boolean;
   renderTopRightUI?: ExcalidrawProps["renderTopRightUI"];
+  renderCustomFooter?: ExcalidrawProps["renderFooter"];
   renderCustomStats?: ExcalidrawProps["renderCustomStats"];
   renderCustomSidebar?: ExcalidrawProps["renderSidebar"];
   libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
@@ -75,9 +81,7 @@ interface LayerUIProps {
   id: string;
   onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void;
   renderWelcomeScreen: boolean;
-  children?: React.ReactNode;
 }
-
 const LayerUI = ({
   actionManager,
   appState,
@@ -85,12 +89,14 @@ const LayerUI = ({
   setAppState,
   elements,
   canvas,
+  onCollabButtonClick,
   onLockToggle,
   onPenModeToggle,
   onInsertElements,
   showExitZenModeBtn,
   isCollaborating,
   renderTopRightUI,
+  renderCustomFooter,
   renderCustomStats,
   renderCustomSidebar,
   libraryReturnUrl,
@@ -100,32 +106,9 @@ const LayerUI = ({
   id,
   onImageAction,
   renderWelcomeScreen,
-  children,
 }: LayerUIProps) => {
   const device = useDevice();
 
-  const [childrenComponents, restChildren] =
-    getReactChildren<UIChildrenComponents>(children, {
-      Menu: true,
-      FooterCenter: true,
-      WelcomeScreen: true,
-    });
-
-  const [WelcomeScreenComponents] = getReactChildren<UIWelcomeScreenComponents>(
-    renderWelcomeScreen
-      ? (
-          childrenComponents?.WelcomeScreen ?? (
-            <WelcomeScreen>
-              <WelcomeScreen.Center />
-              <WelcomeScreen.Hints.MenuHint />
-              <WelcomeScreen.Hints.ToolbarHint />
-              <WelcomeScreen.Hints.HelpHint />
-            </WelcomeScreen>
-          )
-        )?.props?.children
-      : null,
-  );
-
   const renderJSONExportDialog = () => {
     if (!UIOptions.canvasActions.export) {
       return null;
@@ -139,7 +122,6 @@ const LayerUI = ({
         actionManager={actionManager}
         exportOpts={UIOptions.canvasActions.export}
         canvas={canvas}
-        setAppState={setAppState}
       />
     );
   };
@@ -162,6 +144,7 @@ const LayerUI = ({
             exportBackground: appState.exportBackground,
             name: appState.name,
             viewBackgroundColor: appState.viewBackgroundColor,
+            exportPadding: appState.exportPadding,
           },
         )
           .catch(muteFSAbortError)
@@ -193,37 +176,97 @@ const LayerUI = ({
     );
   };
 
-  const renderMenu = () => {
+  const [isMenuOpen, setIsMenuOpen] = useAtom(isMenuOpenAtom);
-    return (
+  const menuRef = useOutsideClickHook(() => setIsMenuOpen(false));
-      childrenComponents.Menu || (
+
-        <MainMenu>
-          <MainMenu.DefaultItems.LoadScene />
-          <MainMenu.DefaultItems.SaveToActiveFile />
-          {/* FIXME we should to test for this inside the item itself */}
-          {UIOptions.canvasActions.export && <MainMenu.DefaultItems.Export />}
-          {/* FIXME we should to test for this inside the item itself */}
-          {UIOptions.canvasActions.saveAsImage && (
-            <MainMenu.DefaultItems.SaveAsImage />
-          )}
-          <MainMenu.DefaultItems.Help />
-          <MainMenu.DefaultItems.ClearCanvas />
-          <MainMenu.Separator />
-          <MainMenu.Group title="Excalidraw links">
-            <MainMenu.DefaultItems.Socials />
-          </MainMenu.Group>
-          <MainMenu.Separator />
-          <MainMenu.DefaultItems.ToggleTheme />
-          <MainMenu.DefaultItems.ChangeCanvasBackground />
-        </MainMenu>
-      )
-    );
-  };
   const renderCanvasActions = () => (
     <div style={{ position: "relative" }}>
-      {WelcomeScreenComponents.MenuHint}
+      <WelcomeScreenDecor
-      {/* wrapping to Fragment stops React from occasionally complaining
+        shouldRender={renderWelcomeScreen && !appState.isLoading}
-                about identical Keys */}
+      >
-      <>{renderMenu()}</>
+        <div className="virgil WelcomeScreen-decor WelcomeScreen-decor--menu-pointer">
+          {WelcomeScreenMenuArrow}
+          <div>{t("welcomeScreen.menuHints")}</div>
+        </div>
+      </WelcomeScreenDecor>
+
+      <button
+        data-prevent-outside-click
+        className={clsx("menu-button", "zen-mode-transition", {
+          "transition-left": appState.zenModeEnabled,
+        })}
+        onClick={() => setIsMenuOpen(!isMenuOpen)}
+        type="button"
+      >
+        {HamburgerMenuIcon}
+      </button>
+
+      {isMenuOpen && (
+        <div
+          ref={menuRef}
+          style={{ position: "absolute", top: "100%", marginTop: ".25rem" }}
+        >
+          <Section heading="canvasActions">
+            {/* the zIndex ensures this menu has higher stacking order,
+         see https://github.com/excalidraw/excalidraw/pull/1445 */}
+            <Island
+              className="menu-container"
+              padding={2}
+              style={{ zIndex: 1 }}
+            >
+              {!appState.viewModeEnabled &&
+                actionManager.renderAction("loadScene")}
+              {/* // TODO barnabasmolnar/editor-redesign  */}
+              {/* is this fine here? */}
+              {appState.fileHandle &&
+                actionManager.renderAction("saveToActiveFile")}
+              {renderJSONExportDialog()}
+              <MenuItem
+                label={t("buttons.exportImage")}
+                icon={ExportImageIcon}
+                dataTestId="image-export-button"
+                onClick={() => setAppState({ openDialog: "imageExport" })}
+                shortcut={getShortcutFromShortcutName("imageExport")}
+              />
+              {onCollabButtonClick && (
+                <CollabButton
+                  isCollaborating={isCollaborating}
+                  collaboratorCount={appState.collaborators.size}
+                  onClick={onCollabButtonClick}
+                />
+              )}
+              {actionManager.renderAction("toggleShortcuts", undefined, true)}
+              {!appState.viewModeEnabled &&
+                actionManager.renderAction("clearCanvas")}
+              <Separator />
+              <MenuLinks />
+              <Separator />
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  rowGap: ".5rem",
+                }}
+              >
+                <div>{actionManager.renderAction("toggleTheme")}</div>
+                <div style={{ padding: "0 0.625rem" }}>
+                  <LanguageList style={{ width: "100%" }} />
+                </div>
+                {!appState.viewModeEnabled && (
+                  <div>
+                    <div style={{ fontSize: ".75rem", marginBottom: ".5rem" }}>
+                      {t("labels.canvasBackground")}
+                    </div>
+                    <div style={{ padding: "0 0.625rem" }}>
+                      {actionManager.renderAction("changeViewBackgroundColor")}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </Island>
+          </Section>
+        </div>
+      )}
     </div>
   );
 
@@ -260,7 +303,9 @@ const LayerUI = ({
 
     return (
       <FixedSideContainer side="top">
-        {WelcomeScreenComponents.Center}
+        {renderWelcomeScreen && !appState.isLoading && (
+          <WelcomeScreen appState={appState} actionManager={actionManager} />
+        )}
         <div className="App-menu App-menu_top">
           <Stack.Col
             gap={6}
@@ -275,7 +320,17 @@ const LayerUI = ({
             <Section heading="shapes" className="shapes-section">
               {(heading: React.ReactNode) => (
                 <div style={{ position: "relative" }}>
-                  {WelcomeScreenComponents.ToolbarHint}
+                  <WelcomeScreenDecor
+                    shouldRender={renderWelcomeScreen && !appState.isLoading}
+                  >
+                    <div className="virgil WelcomeScreen-decor WelcomeScreen-decor--top-toolbar-pointer">
+                      <div className="WelcomeScreen-decor--top-toolbar-pointer__label">
+                        {t("welcomeScreen.toolbarHints")}
+                      </div>
+                      {WelcomeScreenTopToolbarArrow}
+                    </div>
+                  </WelcomeScreenDecor>
+
                   <Stack.Col gap={4} align="start">
                     <Stack.Row
                       gap={1}
@@ -342,7 +397,18 @@ const LayerUI = ({
               },
             )}
           >
-            <UserList collaborators={appState.collaborators} />
+            <UserList
+              collaborators={appState.collaborators}
+              actionManager={actionManager}
+            />
+            {onCollabButtonClick && (
+              <CollabButton
+                isInHamburgerMenu={false}
+                isCollaborating={isCollaborating}
+                collaboratorCount={appState.collaborators.size}
+                onClick={onCollabButtonClick}
+              />
+            )}
             {renderTopRightUI?.(device.isMobile, appState)}
             {!appState.viewModeEnabled && (
               <LibraryButton appState={appState} setAppState={setAppState} />
@@ -372,7 +438,6 @@ const LayerUI = ({
 
   return (
     <>
-      {restChildren}
       {appState.isLoading && <LoadingMessage delay={250} />}
       {appState.errorMessage && (
         <ErrorDialog
@@ -388,7 +453,6 @@ const LayerUI = ({
         />
       )}
       {renderImageExportDialog()}
-      {renderJSONExportDialog()}
       {appState.pasteDialog.shown && (
         <PasteChartDialog
           setAppState={setAppState}
@@ -403,22 +467,24 @@ const LayerUI = ({
       )}
       {device.isMobile && (
         <MobileMenu
+          renderWelcomeScreen={renderWelcomeScreen}
           appState={appState}
           elements={elements}
           actionManager={actionManager}
           renderJSONExportDialog={renderJSONExportDialog}
           renderImageExportDialog={renderImageExportDialog}
           setAppState={setAppState}
+          onCollabButtonClick={onCollabButtonClick}
           onLockToggle={() => onLockToggle()}
           onPenModeToggle={onPenModeToggle}
           canvas={canvas}
+          isCollaborating={isCollaborating}
+          renderCustomFooter={renderCustomFooter}
           onImageAction={onImageAction}
           renderTopRightUI={renderTopRightUI}
           renderCustomStats={renderCustomStats}
           renderSidebars={renderSidebars}
           device={device}
-          renderMenu={renderMenu}
-          welcomeScreenCenter={WelcomeScreenComponents.Center}
         />
       )}
 
@@ -443,11 +509,11 @@ const LayerUI = ({
           >
             {renderFixedSideContainer()}
             <Footer
+              renderWelcomeScreen={renderWelcomeScreen}
               appState={appState}
               actionManager={actionManager}
+              renderCustomFooter={renderCustomFooter}
               showExitZenModeBtn={showExitZenModeBtn}
-              footerCenter={childrenComponents.FooterCenter}
-              welcomeScreenHelp={WelcomeScreenComponents.HelpHint}
             />
             {appState.showStats && (
               <Stats
@@ -495,6 +561,7 @@ const areEqual = (prev: LayerUIProps, next: LayerUIProps) => {
   const keys = Object.keys(prevAppState) as (keyof Partial<AppState>)[];
 
   return (
+    prev.renderCustomFooter === next.renderCustomFooter &&
     prev.renderTopRightUI === next.renderTopRightUI &&
     prev.renderCustomStats === next.renderCustomStats &&
     prev.renderCustomSidebar === next.renderCustomSidebar &&

src/components/LibraryButton.tsx

@@ -22,7 +22,7 @@ export const LibraryButton: React.FC<{
   }
 
   return (
-    <label title={`${capitalizeString(t("toolBar.library"))}`}>
+    <label title={`${capitalizeString(t("toolBar.library"))} — 0`}>
       <input
         className="ToolIcon_type_checkbox"
         type="checkbox"

src/components/LibraryMenu.scss

@@ -129,27 +129,4 @@
       padding-right: 0;
     }
   }
-
-  .layer-ui__sidebar__header .dropdown-menu {
-    &.dropdown-menu--mobile {
-      top: 100%;
-    }
-    .dropdown-menu-container {
-      --gap: 0;
-      z-index: 1;
-      position: absolute;
-      top: 100%;
-      left: 0;
-
-      :root[dir="rtl"] & {
-        right: 0;
-        left: auto;
-      }
-
-      width: 196px;
-      box-shadow: var(--library-dropdown-shadow);
-      border-radius: var(--border-radius-lg);
-      padding: 0.25rem 0.5rem;
-    }
-  }
 }

src/components/LibraryMenuHeaderContent.tsx

@@ -13,15 +13,14 @@ import {
 import { ToolButton } from "./ToolButton";
 import { fileOpen } from "../data/filesystem";
 import { muteFSAbortError } from "../utils";
-import { atom, useAtom } from "jotai";
+import { useAtom } from "jotai";
 import { jotaiScope } from "../jotai";
 import ConfirmDialog from "./ConfirmDialog";
 import PublishLibrary from "./PublishLibrary";
 import { Dialog } from "./Dialog";
-
+import { useOutsideClickHook } from "../hooks/useOutsideClick";
-import DropdownMenu from "./dropdownMenu/DropdownMenu";
+import MenuItem from "./MenuItem";
-
+import { isDropdownOpenAtom } from "./App";
-export const isLibraryMenuOpenAtom = atom(false);
 
 const getSelectedItems = (
   libraryItems: LibraryItems,
@@ -46,9 +45,7 @@ export const LibraryMenuHeader: React.FC<{
   appState,
 }) => {
   const [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);
-  const [isLibraryMenuOpen, setIsLibraryMenuOpen] = useAtom(
+
-    isLibraryMenuOpenAtom,
-  );
   const renderRemoveLibAlert = useCallback(() => {
     const content = selectedItems.length
       ? t("alerts.removeItemsFromsLibrary", { count: selectedItems.length })
@@ -176,86 +173,85 @@ export const LibraryMenuHeader: React.FC<{
       });
   };
 
-  const renderLibraryMenu = () => {
+  const [isDropdownOpen, setIsDropdownOpen] = useAtom(isDropdownOpenAtom);
-    return (
+  const dropdownRef = useOutsideClickHook(() => setIsDropdownOpen(false));
-      <DropdownMenu open={isLibraryMenuOpen}>
+
-        <DropdownMenu.Trigger
-          className="Sidebar__dropdown-btn"
-          onToggle={() => setIsLibraryMenuOpen(!isLibraryMenuOpen)}
-        >
-          {DotsIcon}
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content
-          onClickOutside={() => setIsLibraryMenuOpen(false)}
-          className="library-menu"
-        >
-          {!itemsSelected && (
-            <DropdownMenu.Item
-              onSelect={onLibraryImport}
-              icon={LoadIcon}
-              data-testid="lib-dropdown--load"
-            >
-              {t("buttons.load")}
-            </DropdownMenu.Item>
-          )}
-          {!!items.length && (
-            <DropdownMenu.Item
-              onSelect={onLibraryExport}
-              icon={ExportIcon}
-              data-testid="lib-dropdown--export"
-            >
-              {t("buttons.export")}
-            </DropdownMenu.Item>
-          )}
-          {!!items.length && (
-            <DropdownMenu.Item
-              onSelect={() => setShowRemoveLibAlert(true)}
-              icon={TrashIcon}
-            >
-              {resetLabel}
-            </DropdownMenu.Item>
-          )}
-          {itemsSelected && (
-            <DropdownMenu.Item
-              icon={publishIcon}
-              onSelect={() => setShowPublishLibraryDialog(true)}
-              data-testid="lib-dropdown--remove"
-            >
-              {t("buttons.publishLibrary")}
-            </DropdownMenu.Item>
-          )}
-        </DropdownMenu.Content>
-      </DropdownMenu>
-    );
-  };
   return (
     <div style={{ position: "relative" }}>
-      {renderLibraryMenu()}
+      <button
+        type="button"
+        className="Sidebar__dropdown-btn"
+        data-prevent-outside-click
+        onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+      >
+        {DotsIcon}
+      </button>
+
       {selectedItems.length > 0 && (
         <div className="library-actions-counter">{selectedItems.length}</div>
       )}
-      {showRemoveLibAlert && renderRemoveLibAlert()}
+
-      {showPublishLibraryDialog && (
+      {isDropdownOpen && (
-        <PublishLibrary
+        <div
-          onClose={() => setShowPublishLibraryDialog(false)}
+          className="Sidebar__dropdown-content menu-container"
-          libraryItems={getSelectedItems(
+          ref={dropdownRef}
-            libraryItemsData.libraryItems,
+        >
-            selectedItems,
+          {!itemsSelected && (
+            <MenuItem
+              label={t("buttons.load")}
+              icon={LoadIcon}
+              dataTestId="lib-dropdown--load"
+              onClick={onLibraryImport}
+            />
           )}
-          appState={appState}
+          {showRemoveLibAlert && renderRemoveLibAlert()}
-          onSuccess={(data) =>
+          {showPublishLibraryDialog && (
-            onPublishLibSuccess(data, libraryItemsData.libraryItems)
+            <PublishLibrary
-          }
+              onClose={() => setShowPublishLibraryDialog(false)}
-          onError={(error) => window.alert(error)}
+              libraryItems={getSelectedItems(
-          updateItemsInStorage={() =>
+                libraryItemsData.libraryItems,
-            library.setLibrary(libraryItemsData.libraryItems)
+                selectedItems,
-          }
+              )}
-          onRemove={(id: string) =>
+              appState={appState}
-            onSelectItems(selectedItems.filter((_id) => _id !== id))
+              onSuccess={(data) =>
-          }
+                onPublishLibSuccess(data, libraryItemsData.libraryItems)
-        />
+              }
+              onError={(error) => window.alert(error)}
+              updateItemsInStorage={() =>
+                library.setLibrary(libraryItemsData.libraryItems)
+              }
+              onRemove={(id: string) =>
+                onSelectItems(selectedItems.filter((_id) => _id !== id))
+              }
+            />
+          )}
+          {publishLibSuccess && renderPublishSuccess()}
+          {!!items.length && (
+            <>
+              <MenuItem
+                label={t("buttons.export")}
+                icon={ExportIcon}
+                onClick={onLibraryExport}
+                dataTestId="lib-dropdown--export"
+              />
+              <MenuItem
+                label={resetLabel}
+                icon={TrashIcon}
+                onClick={() => setShowRemoveLibAlert(true)}
+                dataTestId="lib-dropdown--remove"
+              />
+            </>
+          )}
+          {itemsSelected && (
+            <MenuItem
+              label={t("buttons.publishLibrary")}
+              icon={publishIcon}
+              dataTestId="lib-dropdown--publish"
+              onClick={() => setShowPublishLibraryDialog(true)}
+            />
+          )}
+        </div>
       )}
-      {publishLibSuccess && renderPublishSuccess()}
     </div>
   );
 };

src/components/LibraryUnit.tsx

@@ -44,7 +44,6 @@ export const LibraryUnit = ({
         },
         null,
       );
-      svg.querySelector(".style-fonts")?.remove();
       node.innerHTML = svg.outerHTML;
     })();
 

src/components/Menu.scss

@@ -0,0 +1,85 @@
+@import "../css/variables.module";
+
+.excalidraw {
+  .menu-container {
+    background-color: #fff !important;
+    max-height: calc(100vh - 150px);
+    overflow-y: auto;
+  }
+
+  .menu-button {
+    @include outlineButtonStyles;
+    background-color: var(--island-bg-color);
+    width: var(--lg-button-size);
+    height: var(--lg-button-size);
+
+    svg {
+      width: var(--lg-icon-size);
+      height: var(--lg-icon-size);
+    }
+  }
+
+  .menu-item {
+    display: flex;
+    background-color: transparent;
+    border: 0;
+    align-items: center;
+    padding: 0 0.625rem;
+    height: 2rem;
+    column-gap: 0.625rem;
+    font-size: 0.875rem;
+    color: var(--color-gray-100);
+    cursor: pointer;
+    border-radius: var(--border-radius-md);
+    width: 100%;
+    box-sizing: border-box;
+    font-weight: normal;
+    font-family: inherit;
+
+    @media screen and (min-width: 1921px) {
+      height: 2.25rem;
+    }
+
+    &__text {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
+    &__shortcut {
+      margin-inline-start: auto;
+      opacity: 0.5;
+    }
+
+    &:hover {
+      background-color: var(--button-hover);
+      text-decoration: none;
+    }
+
+    svg {
+      width: 1rem;
+      height: 1rem;
+      display: block;
+    }
+
+    &.active-collab {
+      background-color: #ecfdf5;
+      color: #064e3c;
+    }
+  }
+
+  &.theme--dark {
+    .menu-item {
+      color: var(--color-gray-40);
+
+      &.active-collab {
+        background-color: #064e3c;
+        color: #ecfdf5;
+      }
+    }
+
+    .menu-container {
+      background-color: var(--color-gray-90) !important;
+    }
+  }
+}

src/components/MenuItem.tsx

@@ -0,0 +1,37 @@
+import clsx from "clsx";
+import "./Menu.scss";
+
+interface MenuProps {
+  icon: JSX.Element;
+  onClick: () => void;
+  label: string;
+  dataTestId: string;
+  shortcut?: string;
+  isCollaborating?: boolean;
+}
+
+const MenuItem = ({
+  icon,
+  onClick,
+  label,
+  dataTestId,
+  shortcut,
+  isCollaborating,
+}: MenuProps) => {
+  return (
+    <button
+      className={clsx("menu-item", { "active-collab": isCollaborating })}
+      aria-label={label}
+      onClick={onClick}
+      data-testid={dataTestId}
+      title={label}
+      type="button"
+    >
+      <div className="menu-item__icon">{icon}</div>
+      <div className="menu-item__text">{label}</div>
+      {shortcut && <div className="menu-item__shortcut">{shortcut}</div>}
+    </button>
+  );
+};
+
+export default MenuItem;

src/components/MenuUtils.tsx

@@ -0,0 +1,53 @@
+import { GithubIcon, DiscordIcon, PlusPromoIcon, TwitterIcon } from "./icons";
+
+export const MenuLinks = () => (
+  <>
+    <a
+      href="https://plus.excalidraw.com/plus?utm_source=excalidraw&utm_medium=app&utm_content=hamburger"
+      target="_blank"
+      rel="noreferrer"
+      className="menu-item"
+      style={{ color: "var(--color-promo)" }}
+    >
+      <div className="menu-item__icon">{PlusPromoIcon}</div>
+      <div className="menu-item__text">Excalidraw+</div>
+    </a>
+    <a
+      className="menu-item"
+      href="https://github.com/excalidraw/excalidraw"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <div className="menu-item__icon">{GithubIcon}</div>
+      <div className="menu-item__text">GitHub</div>
+    </a>
+    <a
+      className="menu-item"
+      target="_blank"
+      href="https://discord.gg/UexuTaE"
+      rel="noopener noreferrer"
+    >
+      <div className="menu-item__icon">{DiscordIcon}</div>
+      <div className="menu-item__text">Discord</div>
+    </a>
+    <a
+      className="menu-item"
+      target="_blank"
+      href="https://twitter.com/excalidraw"
+      rel="noopener noreferrer"
+    >
+      <div className="menu-item__icon">{TwitterIcon}</div>
+      <div className="menu-item__text">Twitter</div>
+    </a>
+  </>
+);
+
+export const Separator = () => (
+  <div
+    style={{
+      height: "1px",
+      backgroundColor: "var(--default-border-color)",
+      margin: ".5rem 0",
+    }}
+  />
+);

src/components/MobileMenu.tsx

@@ -1,10 +1,5 @@
 import React from "react";
-import {
+import { AppState, Device, ExcalidrawProps } from "../types";
-  AppState,
-  Device,
-  ExcalidrawProps,
-  UIWelcomeScreenComponents,
-} from "../types";
 import { ActionManager } from "../actions/manager";
 import { t } from "../i18n";
 import Stack from "./Stack";
@@ -16,12 +11,18 @@ import { HintViewer } from "./HintViewer";
 import { calculateScrollCenter } from "../scene";
 import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
 import { Section } from "./Section";
+import CollabButton from "./CollabButton";
 import { SCROLLBAR_WIDTH, SCROLLBAR_MARGIN } from "../scene/scrollbars";
 import { LockButton } from "./LockButton";
+import { UserList } from "./UserList";
 import { LibraryButton } from "./LibraryButton";
 import { PenModeButton } from "./PenModeButton";
 import { Stats } from "./Stats";
 import { actionToggleStats } from "../actions";
+import { MenuLinks, Separator } from "./MenuUtils";
+import WelcomeScreen from "./WelcomeScreen";
+import MenuItem from "./MenuItem";
+import { ExportImageIcon } from "./icons";
 
 type MobileMenuProps = {
   appState: AppState;
@@ -30,10 +31,15 @@ type MobileMenuProps = {
   renderImageExportDialog: () => React.ReactNode;
   setAppState: React.Component<any, AppState>["setState"];
   elements: readonly NonDeletedExcalidrawElement[];
+  onCollabButtonClick?: () => void;
   onLockToggle: () => void;
   onPenModeToggle: () => void;
   canvas: HTMLCanvasElement | null;
-
+  isCollaborating: boolean;
+  renderCustomFooter?: (
+    isMobile: boolean,
+    appState: AppState,
+  ) => JSX.Element | null;
   onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void;
   renderTopRightUI?: (
     isMobile: boolean,
@@ -42,30 +48,35 @@ type MobileMenuProps = {
   renderCustomStats?: ExcalidrawProps["renderCustomStats"];
   renderSidebars: () => JSX.Element | null;
   device: Device;
-  renderMenu: () => React.ReactNode;
+  renderWelcomeScreen?: boolean;
-  welcomeScreenCenter: UIWelcomeScreenComponents["Center"];
 };
 
 export const MobileMenu = ({
   appState,
   elements,
   actionManager,
+  renderJSONExportDialog,
+  renderImageExportDialog,
   setAppState,
+  onCollabButtonClick,
   onLockToggle,
   onPenModeToggle,
   canvas,
+  isCollaborating,
+  renderCustomFooter,
   onImageAction,
   renderTopRightUI,
   renderCustomStats,
   renderSidebars,
   device,
-  renderMenu,
+  renderWelcomeScreen,
-  welcomeScreenCenter,
 }: MobileMenuProps) => {
   const renderToolbar = () => {
     return (
       <FixedSideContainer side="top" className="App-top-bar">
-        {welcomeScreenCenter}
+        {renderWelcomeScreen && !appState.isLoading && (
+          <WelcomeScreen appState={appState} actionManager={actionManager} />
+        )}
         <Section heading="shapes">
           {(heading: React.ReactNode) => (
             <Stack.Col gap={4} align="center">
@@ -73,6 +84,20 @@ export const MobileMenu = ({
                 <Island padding={1} className="App-toolbar App-toolbar--mobile">
                   {heading}
                   <Stack.Row gap={1}>
+                    {/* <PenModeButton
+                      checked={appState.penMode}
+                      onChange={onPenModeToggle}
+                      title={t("toolBar.penMode")}
+                      isMobile
+                      penDetected={appState.penDetected}
+                    />
+                    <LockButton
+                      checked={appState.activeTool.locked}
+                      onChange={onLockToggle}
+                      title={t("toolBar.lock")}
+                      isMobile
+                    />
+                    <div className="App-toolbar__divider"></div> */}
                     <ShapesSwitcher
                       appState={appState}
                       canvas={canvas}
@@ -94,6 +119,7 @@ export const MobileMenu = ({
                     title={t("toolBar.penMode")}
                     isMobile
                     penDetected={appState.penDetected}
+                    // penDetected={true}
                   />
                   <LockButton
                     checked={appState.activeTool.locked}
@@ -125,12 +151,16 @@ export const MobileMenu = ({
 
   const renderAppToolbar = () => {
     if (appState.viewModeEnabled) {
-      return <div className="App-toolbar-content">{renderMenu()}</div>;
+      return (
+        <div className="App-toolbar-content">
+          {actionManager.renderAction("toggleCanvasMenu")}
+        </div>
+      );
     }
 
     return (
       <div className="App-toolbar-content">
-        {renderMenu()}
+        {actionManager.renderAction("toggleCanvasMenu")}
         {actionManager.renderAction("toggleEditMenu")}
         {actionManager.renderAction("undo")}
         {actionManager.renderAction("redo")}
@@ -142,6 +172,58 @@ export const MobileMenu = ({
     );
   };
 
+  const renderCanvasActions = () => {
+    if (appState.viewModeEnabled) {
+      return (
+        <>
+          {renderJSONExportDialog()}
+          <MenuItem
+            label={t("buttons.exportImage")}
+            icon={ExportImageIcon}
+            dataTestId="image-export-button"
+            onClick={() => setAppState({ openDialog: "imageExport" })}
+          />
+          {renderImageExportDialog()}
+        </>
+      );
+    }
+    return (
+      <>
+        {!appState.viewModeEnabled && actionManager.renderAction("loadScene")}
+        {renderJSONExportDialog()}
+        {renderImageExportDialog()}
+        <MenuItem
+          label={t("buttons.exportImage")}
+          icon={ExportImageIcon}
+          dataTestId="image-export-button"
+          onClick={() => setAppState({ openDialog: "imageExport" })}
+        />
+        {onCollabButtonClick && (
+          <CollabButton
+            isCollaborating={isCollaborating}
+            collaboratorCount={appState.collaborators.size}
+            onClick={onCollabButtonClick}
+          />
+        )}
+        {actionManager.renderAction("toggleShortcuts", undefined, true)}
+        {!appState.viewModeEnabled && actionManager.renderAction("clearCanvas")}
+        <Separator />
+        <MenuLinks />
+        <Separator />
+        {!appState.viewModeEnabled && (
+          <div style={{ marginBottom: ".5rem" }}>
+            <div style={{ fontSize: ".75rem", marginBottom: ".5rem" }}>
+              {t("labels.canvasBackground")}
+            </div>
+            <div style={{ padding: "0 0.625rem" }}>
+              {actionManager.renderAction("changeViewBackgroundColor")}
+            </div>
+          </div>
+        )}
+        {actionManager.renderAction("toggleTheme")}
+      </>
+    );
+  };
   return (
     <>
       {renderSidebars()}
@@ -166,9 +248,28 @@ export const MobileMenu = ({
         }}
       >
         <Island padding={0}>
-          {appState.openMenu === "shape" &&
+          {appState.openMenu === "canvas" ? (
-          !appState.viewModeEnabled &&
+            <Section className="App-mobile-menu" heading="canvasActions">
-          showSelectedShapeActions(appState, elements) ? (
+              <div className="panelColumn">
+                <Stack.Col gap={2}>
+                  {renderCanvasActions()}
+                  {renderCustomFooter?.(true, appState)}
+                  {appState.collaborators.size > 0 && (
+                    <fieldset>
+                      <legend>{t("labels.collaborators")}</legend>
+                      <UserList
+                        mobile
+                        collaborators={appState.collaborators}
+                        actionManager={actionManager}
+                      />
+                    </fieldset>
+                  )}
+                </Stack.Col>
+              </div>
+            </Section>
+          ) : appState.openMenu === "shape" &&
+            !appState.viewModeEnabled &&
+            showSelectedShapeActions(appState, elements) ? (
             <Section className="App-mobile-menu" heading="selectedShapeActions">
               <SelectedShapeActions
                 appState={appState}

src/components/PasteChartDialog.tsx

@@ -46,7 +46,6 @@ const ChartPreviewBtn = (props: {
         },
         null, // files
       );
-      svg.querySelector(".style-fonts")?.remove();
       previewNode.replaceChildren();
       previewNode.appendChild(svg);
 

src/components/Sidebar/Sidebar.scss

@@ -3,6 +3,24 @@
 
 .excalidraw {
   .Sidebar {
+    &__dropdown-content {
+      z-index: 1;
+      position: absolute;
+      top: 100%;
+      left: 0;
+
+      :root[dir="rtl"] & {
+        right: 0;
+        left: auto;
+      }
+
+      margin-top: 0.25rem;
+      width: 180px;
+      box-shadow: var(--library-dropdown-shadow);
+      border-radius: var(--border-radius-lg);
+      padding: 0.25rem 0.5rem;
+    }
+
     &__close-btn,
     &__pin-btn,
     &__dropdown-btn {

src/components/Sidebar/Sidebar.test.tsx

@@ -90,10 +90,10 @@ describe("Sidebar", () => {
 
     const sidebar = container.querySelector<HTMLElement>(".test-sidebar");
     expect(sidebar).not.toBe(null);
-    const closeButton = queryByTestId(sidebar!, "sidebar-close")!;
+    const closeButton = queryByTestId(sidebar!, "sidebar-close");
     expect(closeButton).not.toBe(null);
 
-    fireEvent.click(closeButton);
+    fireEvent.click(closeButton!.querySelector("button")!);
     await waitFor(() => {
       expect(container.querySelector<HTMLElement>(".test-sidebar")).toBe(null);
       expect(onClose).toHaveBeenCalled();

src/components/UserList.scss

@@ -7,7 +7,6 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-end;
-    align-items: center;
     gap: 0.625rem;
 
     &:empty {

src/components/UserList.tsx

@@ -4,16 +4,16 @@ import React from "react";
 import clsx from "clsx";
 import { AppState, Collaborator } from "../types";
 import { Tooltip } from "./Tooltip";
-import { useExcalidrawActionManager } from "./App";
+import { ActionManager } from "../actions/manager";
 
 export const UserList: React.FC<{
   className?: string;
   mobile?: boolean;
   collaborators: AppState["collaborators"];
-}> = ({ className, mobile, collaborators }) => {
+  actionManager: ActionManager;
-  const actionManager = useExcalidrawActionManager();
+}> = ({ className, mobile, collaborators, actionManager }) => {
-
   const uniqueCollaborators = new Map<string, Collaborator>();
+
   collaborators.forEach((collaborator, socketId) => {
     uniqueCollaborators.set(
       // filter on user id, else fall back on unique socketId
@@ -44,6 +44,26 @@ export const UserList: React.FC<{
         );
       });
 
+  // TODO barnabasmolnar/editor-redesign
+  // probably remove before shipping :)
+  // 20 fake collaborators; for easy, convenient debug purposes ˇˇ
+  // const avatars = Array.from({ length: 20 }).map((_, index) => {
+  //   const avatarJSX = actionManager.renderAction("goToCollaborator", [
+  //     index.toString(),
+  //     {
+  //       username: `User ${index}`,
+  //     },
+  //   ]);
+
+  //   return mobile ? (
+  //     <Tooltip label={`User ${index}`} key={index}>
+  //       {avatarJSX}
+  //     </Tooltip>
+  //   ) : (
+  //     <React.Fragment key={index}>{avatarJSX}</React.Fragment>
+  //   );
+  // });
+
   return (
     <div className={clsx("UserList", className, { UserList_mobile: mobile })}>
       {avatars}

src/components/WelcomeScreen.scss

@@ -3,39 +3,29 @@
     font-family: "Virgil";
   }
 
-  // WelcomeSreen common
+  .WelcomeScreen-logo {
-  // ---------------------------------------------------------------------------
+    display: flex;
+    align-items: center;
+    column-gap: 0.75rem;
+    font-size: 2.25rem;
 
-  .welcome-screen-decor {
+    svg {
+      width: 1.625rem;
+      height: auto;
+    }
+  }
+
+  .WelcomeScreen-decor {
     pointer-events: none;
 
     color: var(--color-gray-40);
-  }
 
-  &.theme--dark {
+    &--subheading {
-    .welcome-screen-decor {
+      font-size: 1.125rem;
-      color: var(--color-gray-60);
+      text-align: center;
-    }
-  }
-
-  // WelcomeScreen.Hints
-  // ---------------------------------------------------------------------------
-
-  .welcome-screen-decor-hint {
-    @media (max-height: 599px) {
-      display: none !important;
     }
 
-    @media (max-width: 1024px), (max-width: 800px) {
+    &--help-pointer {
-      .welcome-screen-decor {
-        &--help,
-        &--menu {
-          display: none;
-        }
-      }
-    }
-
-    &--help {
       display: flex;
       position: absolute;
       right: 0;
@@ -59,7 +49,7 @@
       }
     }
 
-    &--toolbar {
+    &--top-toolbar-pointer {
       position: absolute;
       top: 100%;
       left: 50%;
@@ -68,7 +58,7 @@
       display: flex;
       align-items: baseline;
 
-      .welcome-screen-decor-hint__label {
+      &__label {
         width: 120px;
         position: relative;
         top: -0.5rem;
@@ -84,7 +74,7 @@
       }
     }
 
-    &--menu {
+    &--menu-pointer {
       position: absolute;
       width: 320px;
       font-size: 1rem;
@@ -105,19 +95,10 @@
           transform: scaleX(-1);
         }
       }
-
-      @media (max-width: 860px) {
-        .welcome-screen-decor-hint__label {
-          max-width: 160px;
-        }
-      }
     }
   }
 
-  // WelcomeSreen.Center
+  .WelcomeScreen-container {
-  // ---------------------------------------------------------------------------
-
-  .welcome-screen-center {
     display: flex;
     flex-direction: column;
     gap: 2rem;
@@ -131,24 +112,7 @@
     bottom: 1rem;
   }
 
-  .welcome-screen-center__logo {
+  .WelcomeScreen-items {
-    display: flex;
-    align-items: center;
-    column-gap: 0.75rem;
-    font-size: 2.25rem;
-
-    svg {
-      width: 1.625rem;
-      height: auto;
-    }
-  }
-
-  .welcome-screen-center__heading {
-    font-size: 1.125rem;
-    text-align: center;
-  }
-
-  .welcome-screen-menu {
     display: flex;
     flex-direction: column;
     gap: 2px;
@@ -156,7 +120,7 @@
     align-items: center;
   }
 
-  .welcome-screen-menu-item {
+  .WelcomeScreen-item {
     box-sizing: border-box;
 
     pointer-events: all;
@@ -164,10 +128,8 @@
     color: var(--color-gray-50);
     font-size: 0.875rem;
 
-    width: 100%;
     min-width: 300px;
-    max-width: 400px;
+    display: flex;
-    display: grid;
     align-items: center;
     justify-content: space-between;
 
@@ -178,49 +140,44 @@
 
     border-radius: var(--border-radius-md);
 
-    grid-template-columns: calc(var(--default-icon-size) + 0.5rem) 1fr 3rem;
+    &__label {
-
-    &__text {
       display: flex;
       align-items: center;
-      margin-right: auto;
-      text-align: left;
       column-gap: 0.5rem;
-    }
 
-    &__icon {
+      svg {
-      width: var(--default-icon-size);
+        width: var(--default-icon-size);
-      height: var(--default-icon-size);
+        height: var(--default-icon-size);
+      }
     }
 
     &__shortcut {
-      margin-left: auto;
       color: var(--color-gray-40);
       font-size: 0.75rem;
     }
   }
 
-  &:not(:active) .welcome-screen-menu-item:hover {
+  &:not(:active) .WelcomeScreen-item:hover {
     text-decoration: none;
     background: var(--color-gray-10);
 
-    .welcome-screen-menu-item__shortcut {
+    .WelcomeScreen-item__shortcut {
       color: var(--color-gray-50);
     }
 
-    .welcome-screen-menu-item__text {
+    .WelcomeScreen-item__label {
       color: var(--color-gray-100);
     }
   }
 
-  .welcome-screen-menu-item:active {
+  .WelcomeScreen-item:active {
     background: var(--color-gray-20);
 
-    .welcome-screen-menu-item__shortcut {
+    .WelcomeScreen-item__shortcut {
       color: var(--color-gray-50);
     }
 
-    .welcome-screen-menu-item__text {
+    .WelcomeScreen-item__label {
       color: var(--color-gray-100);
     }
 
@@ -228,7 +185,7 @@
       color: var(--color-promo) !important;
 
       &:hover {
-        .welcome-screen-menu-item__text {
+        .WelcomeScreen-item__label {
           color: var(--color-promo) !important;
         }
       }
@@ -236,7 +193,11 @@
   }
 
   &.theme--dark {
-    .welcome-screen-menu-item {
+    .WelcomeScreen-decor {
+      color: var(--color-gray-60);
+    }
+
+    .WelcomeScreen-item {
       color: var(--color-gray-60);
 
       &__shortcut {
@@ -244,41 +205,69 @@
       }
     }
 
-    &:not(:active) .welcome-screen-menu-item:hover {
+    &:not(:active) .WelcomeScreen-item:hover {
       background: var(--color-gray-85);
 
-      .welcome-screen-menu-item__shortcut {
+      .WelcomeScreen-item__shortcut {
         color: var(--color-gray-50);
       }
 
-      .welcome-screen-menu-item__text {
+      .WelcomeScreen-item__label {
         color: var(--color-gray-10);
       }
     }
 
-    .welcome-screen-menu-item:active {
+    .WelcomeScreen-item:active {
       background-color: var(--color-gray-90);
-      .welcome-screen-menu-item__text {
+      .WelcomeScreen-item__label {
         color: var(--color-gray-10);
       }
     }
   }
 
+  // Can tweak these values but for an initial effort, it looks OK to me
+  @media (max-width: 1024px) {
+    .WelcomeScreen-decor {
+      &--help-pointer,
+      &--menu-pointer {
+        display: none;
+      }
+    }
+  }
+
+  // @media (max-height: 400px) {
+  //   .WelcomeScreen-container {
+  //     margin-top: 0;
+  //   }
+  // }
   @media (max-height: 599px) {
-    .welcome-screen-center {
+    .WelcomeScreen-container {
       margin-top: 4rem;
     }
   }
   @media (min-height: 600px) and (max-height: 900px) {
-    .welcome-screen-center {
+    .WelcomeScreen-container {
       margin-top: 8rem;
     }
   }
-  @media (max-height: 500px), (max-width: 320px) {
+  @media (max-height: 630px) {
-    .welcome-screen-center {
+    .WelcomeScreen-decor--top-toolbar-pointer {
+      display: none;
+    }
+  }
+  @media (max-height: 500px) {
+    .WelcomeScreen-container {
       display: none;
     }
   }
 
-  // ---------------------------------------------------------------------------
+  // @media (max-height: 740px) {
+  //   .WelcomeScreen-decor {
+  //     &--help-pointer,
+  //     &--top-toolbar-pointer,
+  //     &--menu-pointer {
+  //       display: none;
+  //     }
+  //   }
+  // }
 }

src/components/WelcomeScreen.tsx

@@ -0,0 +1,141 @@
+import { useAtom } from "jotai";
+import { actionLoadScene, actionShortcuts } from "../actions";
+import { ActionManager } from "../actions/manager";
+import { getShortcutFromShortcutName } from "../actions/shortcuts";
+import { COOKIES } from "../constants";
+import { collabDialogShownAtom } from "../excalidraw-app/collab/Collab";
+import { t } from "../i18n";
+import { AppState } from "../types";
+import {
+  ExcalLogo,
+  HelpIcon,
+  LoadIcon,
+  PlusPromoIcon,
+  UsersIcon,
+} from "./icons";
+import "./WelcomeScreen.scss";
+
+const isExcalidrawPlusSignedUser = document.cookie.includes(
+  COOKIES.AUTH_STATE_COOKIE,
+);
+
+const WelcomeScreenItem = ({
+  label,
+  shortcut,
+  onClick,
+  icon,
+  link,
+}: {
+  label: string;
+  shortcut: string | null;
+  onClick?: () => void;
+  icon: JSX.Element;
+  link?: string;
+}) => {
+  if (link) {
+    return (
+      <a
+        className="WelcomeScreen-item"
+        href={link}
+        target="_blank"
+        rel="noreferrer"
+      >
+        <div className="WelcomeScreen-item__label">
+          {icon}
+          {label}
+        </div>
+      </a>
+    );
+  }
+
+  return (
+    <button className="WelcomeScreen-item" type="button" onClick={onClick}>
+      <div className="WelcomeScreen-item__label">
+        {icon}
+        {label}
+      </div>
+      {shortcut && (
+        <div className="WelcomeScreen-item__shortcut">{shortcut}</div>
+      )}
+    </button>
+  );
+};
+
+const WelcomeScreen = ({
+  appState,
+  actionManager,
+}: {
+  appState: AppState;
+  actionManager: ActionManager;
+}) => {
+  const [, setCollabDialogShown] = useAtom(collabDialogShownAtom);
+
+  let subheadingJSX;
+
+  if (isExcalidrawPlusSignedUser) {
+    subheadingJSX = t("welcomeScreen.switchToPlusApp")
+      .split(/(Excalidraw\+)/)
+      .map((bit, idx) => {
+        if (bit === "Excalidraw+") {
+          return (
+            <a
+              style={{ pointerEvents: "all" }}
+              href={`${process.env.REACT_APP_PLUS_APP}?utm_source=excalidraw&utm_medium=app&utm_content=welcomeScreenSignedInUser`}
+              key={idx}
+            >
+              Excalidraw+
+            </a>
+          );
+        }
+        return bit;
+      });
+  } else {
+    subheadingJSX = t("welcomeScreen.data");
+  }
+
+  return (
+    <div className="WelcomeScreen-container">
+      <div className="WelcomeScreen-logo virgil WelcomeScreen-decor">
+        {ExcalLogo} Excalidraw
+      </div>
+      <div className="virgil WelcomeScreen-decor WelcomeScreen-decor--subheading">
+        {subheadingJSX}
+      </div>
+      <div className="WelcomeScreen-items">
+        {!appState.viewModeEnabled && (
+          <WelcomeScreenItem
+            // TODO barnabasmolnar/editor-redesign
+            // do we want the internationalized labels here that are currently
+            // in use elsewhere or new ones?
+            label={t("buttons.load")}
+            onClick={() => actionManager.executeAction(actionLoadScene)}
+            shortcut={getShortcutFromShortcutName("loadScene")}
+            icon={LoadIcon}
+          />
+        )}
+        <WelcomeScreenItem
+          label={t("labels.liveCollaboration")}
+          shortcut={null}
+          onClick={() => setCollabDialogShown(true)}
+          icon={UsersIcon}
+        />
+        <WelcomeScreenItem
+          onClick={() => actionManager.executeAction(actionShortcuts)}
+          label={t("helpDialog.title")}
+          shortcut="?"
+          icon={HelpIcon}
+        />
+        {!isExcalidrawPlusSignedUser && (
+          <WelcomeScreenItem
+            link="https://plus.excalidraw.com/plus?utm_source=excalidraw&utm_medium=app&utm_content=welcomeScreenGuest"
+            label="Try Excalidraw Plus!"
+            shortcut={null}
+            icon={PlusPromoIcon}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default WelcomeScreen;

src/components/WelcomeScreenDecor.tsx

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+
+const WelcomeScreenDecor = ({
+  children,
+  shouldRender,
+}: {
+  children: ReactNode;
+  shouldRender: boolean;
+}) => (shouldRender ? <>{children}</> : null);
+
+export default WelcomeScreenDecor;

src/components/dropdownMenu/DropdownMenu.scss

@@ -1,127 +0,0 @@
-@import "../../css/variables.module";
-
-.excalidraw {
-  .dropdown-menu {
-    position: absolute;
-    top: 100%;
-    margin-top: 0.25rem;
-
-    &--mobile {
-      bottom: 55px;
-      top: auto;
-      left: 0;
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      row-gap: 0.75rem;
-
-      .dropdown-menu-container {
-        padding: 8px 8px;
-        box-sizing: border-box;
-        background-color: var(--island-bg-color);
-        box-shadow: var(--shadow-island);
-        border-radius: var(--border-radius-lg);
-        position: relative;
-        transition: box-shadow 0.5s ease-in-out;
-
-        &.zen-mode {
-          box-shadow: none;
-        }
-      }
-    }
-
-    .dropdown-menu-container {
-      background-color: #fff !important;
-      max-height: calc(100vh - 150px);
-      overflow-y: auto;
-      --gap: 2;
-    }
-
-    .dropdown-menu-item-base {
-      display: flex;
-      padding: 0 0.625rem;
-      column-gap: 0.625rem;
-      font-size: 0.875rem;
-      color: var(--color-gray-100);
-      width: 100%;
-      box-sizing: border-box;
-      font-weight: normal;
-      font-family: inherit;
-    }
-
-    .dropdown-menu-item {
-      background-color: transparent;
-      border: 0;
-      align-items: center;
-      height: 2rem;
-      cursor: pointer;
-      border-radius: var(--border-radius-md);
-
-      @media screen and (min-width: 1921px) {
-        height: 2.25rem;
-      }
-
-      &__text {
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-      }
-
-      &__shortcut {
-        margin-inline-start: auto;
-        opacity: 0.5;
-      }
-
-      &:hover {
-        background-color: var(--button-hover-bg);
-        text-decoration: none;
-      }
-
-      svg {
-        width: 1rem;
-        height: 1rem;
-        display: block;
-      }
-    }
-
-    .dropdown-menu-item-custom {
-      margin-top: 0.5rem;
-    }
-
-    .dropdown-menu-group-title {
-      font-size: 14px;
-      text-align: left;
-      margin: 10px 0;
-      font-weight: 500;
-    }
-  }
-  &.theme--dark {
-    .dropdown-menu-item {
-      color: var(--color-gray-40);
-    }
-
-    .dropdown-menu-container {
-      background-color: var(--color-gray-90) !important;
-    }
-  }
-
-  .dropdown-menu-button {
-    @include outlineButtonStyles;
-    background-color: var(--island-bg-color);
-    width: var(--lg-button-size);
-    height: var(--lg-button-size);
-
-    svg {
-      width: var(--lg-icon-size);
-      height: var(--lg-icon-size);
-    }
-
-    &--mobile {
-      border: none;
-      margin: 0;
-      padding: 0;
-      width: var(--default-button-size);
-      height: var(--default-button-size);
-    }
-  }
-}

src/components/dropdownMenu/DropdownMenu.tsx

@@ -1,43 +0,0 @@
-import React from "react";
-import DropdownMenuTrigger from "./DropdownMenuTrigger";
-import DropdownMenuItem from "./DropdownMenuItem";
-import MenuSeparator from "./DropdownMenuSeparator";
-import DropdownMenuGroup from "./DropdownMenuGroup";
-import DropdownMenuContent from "./DropdownMenuContent";
-import DropdownMenuItemLink from "./DropdownMenuItemLink";
-import DropdownMenuItemCustom from "./DropdownMenuItemCustom";
-import {
-  getMenuContentComponent,
-  getMenuTriggerComponent,
-} from "./dropdownMenuUtils";
-
-import "./DropdownMenu.scss";
-
-const DropdownMenu = ({
-  children,
-  open,
-}: {
-  children?: React.ReactNode;
-  open: boolean;
-}) => {
-  const MenuTriggerComp = getMenuTriggerComponent(children);
-  const MenuContentComp = getMenuContentComponent(children);
-  return (
-    <>
-      {MenuTriggerComp}
-      {open && MenuContentComp}
-    </>
-  );
-};
-
-DropdownMenu.Trigger = DropdownMenuTrigger;
-DropdownMenu.Content = DropdownMenuContent;
-DropdownMenu.Item = DropdownMenuItem;
-DropdownMenu.ItemLink = DropdownMenuItemLink;
-DropdownMenu.ItemCustom = DropdownMenuItemCustom;
-DropdownMenu.Group = DropdownMenuGroup;
-DropdownMenu.Separator = MenuSeparator;
-
-export default DropdownMenu;
-
-DropdownMenu.displayName = "DropdownMenu";

src/components/dropdownMenu/DropdownMenuContent.tsx

@@ -1,51 +0,0 @@
-import { useOutsideClickHook } from "../../hooks/useOutsideClick";
-import { Island } from "../Island";
-
-import { useDevice } from "../App";
-import clsx from "clsx";
-import Stack from "../Stack";
-
-const MenuContent = ({
-  children,
-  onClickOutside,
-  className = "",
-  style,
-}: {
-  children?: React.ReactNode;
-  onClickOutside?: () => void;
-  className?: string;
-  style?: React.CSSProperties;
-}) => {
-  const device = useDevice();
-  const menuRef = useOutsideClickHook(() => {
-    onClickOutside?.();
-  });
-
-  const classNames = clsx(`dropdown-menu ${className}`, {
-    "dropdown-menu--mobile": device.isMobile,
-  }).trim();
-  return (
-    <div
-      ref={menuRef}
-      className={classNames}
-      style={style}
-      data-testid="dropdown-menu"
-    >
-      {/* the zIndex ensures this menu has higher stacking order,
-    see https://github.com/excalidraw/excalidraw/pull/1445 */}
-      {device.isMobile ? (
-        <Stack.Col className="dropdown-menu-container">{children}</Stack.Col>
-      ) : (
-        <Island
-          className="dropdown-menu-container"
-          padding={2}
-          style={{ zIndex: 1 }}
-        >
-          {children}
-        </Island>
-      )}
-    </div>
-  );
-};
-export default MenuContent;
-MenuContent.displayName = "DropdownMenuContent";

src/components/dropdownMenu/DropdownMenuGroup.tsx

@@ -1,23 +0,0 @@
-import React from "react";
-
-const MenuGroup = ({
-  children,
-  className = "",
-  style,
-  title,
-}: {
-  children: React.ReactNode;
-  className?: string;
-  style?: React.CSSProperties;
-  title?: string;
-}) => {
-  return (
-    <div className={`dropdown-menu-group ${className}`} style={style}>
-      {title && <p className="dropdown-menu-group-title">{title}</p>}
-      {children}
-    </div>
-  );
-};
-
-export default MenuGroup;
-MenuGroup.displayName = "DropdownMenuGroup";

src/components/dropdownMenu/DropdownMenuItem.tsx

@@ -1,38 +0,0 @@
-import React from "react";
-import MenuItemContent from "./DropdownMenuItemContent";
-
-export const getDrodownMenuItemClassName = (className = "") => {
-  return `dropdown-menu-item dropdown-menu-item-base ${className}`.trim();
-};
-
-const DropdownMenuItem = ({
-  icon,
-  onSelect,
-  children,
-  shortcut,
-  className,
-  ...rest
-}: {
-  icon?: JSX.Element;
-  onSelect: () => void;
-  children: React.ReactNode;
-  shortcut?: string;
-  className?: string;
-} & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
-  return (
-    <button
-      {...rest}
-      onClick={onSelect}
-      type="button"
-      className={getDrodownMenuItemClassName(className)}
-      title={rest.title ?? rest["aria-label"]}
-    >
-      <MenuItemContent icon={icon} shortcut={shortcut}>
-        {children}
-      </MenuItemContent>
-    </button>
-  );
-};
-
-export default DropdownMenuItem;
-DropdownMenuItem.displayName = "DropdownMenuItem";

src/components/dropdownMenu/DropdownMenuItemContent.tsx

@@ -1,23 +0,0 @@
-import { useDevice } from "../App";
-
-const MenuItemContent = ({
-  icon,
-  shortcut,
-  children,
-}: {
-  icon?: JSX.Element;
-  shortcut?: string;
-  children: React.ReactNode;
-}) => {
-  const device = useDevice();
-  return (
-    <>
-      <div className="dropdown-menu-item__icon">{icon}</div>
-      <div className="dropdown-menu-item__text">{children}</div>
-      {shortcut && !device.isMobile && (
-        <div className="dropdown-menu-item__shortcut">{shortcut}</div>
-      )}
-    </>
-  );
-};
-export default MenuItemContent;

src/components/dropdownMenu/DropdownMenuItemCustom.tsx

@@ -1,21 +0,0 @@
-import React from "react";
-
-const DropdownMenuItemCustom = ({
-  children,
-  className = "",
-  ...rest
-}: {
-  children: React.ReactNode;
-  className?: string;
-} & React.HTMLAttributes<HTMLDivElement>) => {
-  return (
-    <div
-      {...rest}
-      className={`dropdown-menu-item-base dropdown-menu-item-custom ${className}`.trim()}
-    >
-      {children}
-    </div>
-  );
-};
-
-export default DropdownMenuItemCustom;

src/components/dropdownMenu/DropdownMenuItemLink.tsx

@@ -1,35 +0,0 @@
-import MenuItemContent from "./DropdownMenuItemContent";
-import React from "react";
-import { getDrodownMenuItemClassName } from "./DropdownMenuItem";
-const DropdownMenuItemLink = ({
-  icon,
-  shortcut,
-  href,
-  children,
-  className = "",
-  ...rest
-}: {
-  icon?: JSX.Element;
-  children: React.ReactNode;
-  shortcut?: string;
-  className?: string;
-  href: string;
-} & React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
-  return (
-    <a
-      {...rest}
-      href={href}
-      target="_blank"
-      rel="noreferrer"
-      className={getDrodownMenuItemClassName(className)}
-      title={rest.title ?? rest["aria-label"]}
-    >
-      <MenuItemContent icon={icon} shortcut={shortcut}>
-        {children}
-      </MenuItemContent>
-    </a>
-  );
-};
-
-export default DropdownMenuItemLink;
-DropdownMenuItemLink.displayName = "DropdownMenuItemLink";

src/components/dropdownMenu/DropdownMenuSeparator.tsx

@@ -1,14 +0,0 @@
-import React from "react";
-
-const MenuSeparator = () => (
-  <div
-    style={{
-      height: "1px",
-      backgroundColor: "var(--default-border-color)",
-      margin: ".5rem 0",
-    }}
-  />
-);
-
-export default MenuSeparator;
-MenuSeparator.displayName = "DropdownMenuSeparator";

src/components/dropdownMenu/DropdownMenuTrigger.tsx

@@ -1,37 +0,0 @@
-import clsx from "clsx";
-import { useDevice, useExcalidrawAppState } from "../App";
-
-const MenuTrigger = ({
-  className = "",
-  children,
-  onToggle,
-}: {
-  className?: string;
-  children: React.ReactNode;
-  onToggle: () => void;
-}) => {
-  const appState = useExcalidrawAppState();
-  const device = useDevice();
-  const classNames = clsx(
-    `dropdown-menu-button ${className}`,
-    "zen-mode-transition",
-    {
-      "transition-left": appState.zenModeEnabled,
-      "dropdown-menu-button--mobile": device.isMobile,
-    },
-  ).trim();
-  return (
-    <button
-      data-prevent-outside-click
-      className={classNames}
-      onClick={onToggle}
-      type="button"
-      data-testid="dropdown-menu-button"
-    >
-      {children}
-    </button>
-  );
-};
-
-export default MenuTrigger;
-MenuTrigger.displayName = "DropdownMenuTrigger";

src/components/dropdownMenu/dropdownMenuUtils.ts

@@ -1,35 +0,0 @@
-import React from "react";
-
-export const getMenuTriggerComponent = (children: React.ReactNode) => {
-  const comp = React.Children.toArray(children).find(
-    (child) =>
-      React.isValidElement(child) &&
-      typeof child.type !== "string" &&
-      //@ts-ignore
-      child?.type.displayName &&
-      //@ts-ignore
-      child.type.displayName === "DropdownMenuTrigger",
-  );
-  if (!comp) {
-    return null;
-  }
-  //@ts-ignore
-  return comp;
-};
-
-export const getMenuContentComponent = (children: React.ReactNode) => {
-  const comp = React.Children.toArray(children).find(
-    (child) =>
-      React.isValidElement(child) &&
-      typeof child.type !== "string" &&
-      //@ts-ignore
-      child?.type.displayName &&
-      //@ts-ignore
-      child.type.displayName === "DropdownMenuContent",
-  );
-  if (!comp) {
-    return null;
-  }
-  //@ts-ignore
-  return comp;
-};

src/components/footer/FooterCenter.scss

@@ -1,10 +0,0 @@
-.footer-center {
-  pointer-events: none;
-  & > * {
-    pointer-events: all;
-  }
-
-  display: flex;
-  width: 100%;
-  justify-content: flex-start;
-}

src/components/footer/FooterCenter.tsx

@@ -1,20 +0,0 @@
-import clsx from "clsx";
-import { useExcalidrawAppState } from "../App";
-import "./FooterCenter.scss";
-
-const FooterCenter = ({ children }: { children?: React.ReactNode }) => {
-  const appState = useExcalidrawAppState();
-  return (
-    <div
-      className={clsx("footer-center zen-mode-transition", {
-        "layer-ui__wrapper__footer-left--transition-bottom":
-          appState.zenModeEnabled,
-      })}
-    >
-      {children}
-    </div>
-  );
-};
-
-export default FooterCenter;
-FooterCenter.displayName = "FooterCenter";

src/components/icons.tsx

@@ -883,7 +883,7 @@ export const CenterHorizontallyIcon = createIcon(
   modifiedTablerIconProps,
 );
 
-export const usersIcon = createIcon(
+export const UsersIcon = createIcon(
   <g strokeWidth="1.5">
     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
     <circle cx="9" cy="7" r="4"></circle>
@@ -1470,11 +1470,11 @@ export const TextAlignRightIcon = createIcon(
 export const TextAlignTopIcon = React.memo(({ theme }: { theme: Theme }) =>
   createIcon(
     <g
-      strokeWidth="1.5"
+      stroke-width="1.5"
       stroke="currentColor"
       fill="none"
-      strokeLinecap="round"
+      stroke-linecap="round"
-      strokeLinejoin="round"
+      stroke-linejoin="round"
     >
       <path stroke="none" d="M0 0h24v24H0z" fill="none" />
       <line x1="4" y1="4" x2="20" y2="4" />
@@ -1488,11 +1488,11 @@ export const TextAlignTopIcon = React.memo(({ theme }: { theme: Theme }) =>
 export const TextAlignBottomIcon = React.memo(({ theme }: { theme: Theme }) =>
   createIcon(
     <g
-      strokeWidth="2"
+      stroke-width="2"
       stroke="currentColor"
       fill="none"
-      strokeLinecap="round"
+      stroke-linecap="round"
-      strokeLinejoin="round"
+      stroke-linejoin="round"
     >
       <path stroke="none" d="M0 0h24v24H0z" fill="none" />
       <line x1="4" y1="20" x2="20" y2="20" />
@@ -1506,11 +1506,11 @@ export const TextAlignBottomIcon = React.memo(({ theme }: { theme: Theme }) =>
 export const TextAlignMiddleIcon = React.memo(({ theme }: { theme: Theme }) =>
   createIcon(
     <g
-      strokeWidth="1.5"
+      stroke-width="1.5"
       stroke="currentColor"
       fill="none"
-      strokeLinecap="round"
+      stroke-linecap="round"
-      strokeLinejoin="round"
+      stroke-linejoin="round"
     >
       <path stroke="none" d="M0 0h24v24H0z" fill="none" />
       <line x1="4" y1="12" x2="9" y2="12" />

src/components/live-collaboration/LiveCollaborationTrigger.tsx

@@ -1,40 +0,0 @@
-import { t } from "../../i18n";
-import { usersIcon } from "../icons";
-import { Button } from "../Button";
-
-import clsx from "clsx";
-import { useExcalidrawAppState } from "../App";
-
-import "./LiveCollaborationTrigger.scss";
-
-const LiveCollaborationTrigger = ({
-  isCollaborating,
-  onSelect,
-  ...rest
-}: {
-  isCollaborating: boolean;
-  onSelect: () => void;
-} & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
-  const appState = useExcalidrawAppState();
-
-  return (
-    <Button
-      {...rest}
-      className={clsx("collab-button", { active: isCollaborating })}
-      type="button"
-      onSelect={onSelect}
-      style={{ position: "relative" }}
-      title={t("labels.liveCollaboration")}
-    >
-      {usersIcon}
-      {appState.collaborators.size > 0 && (
-        <div className="CollabButton-collaborators">
-          {appState.collaborators.size}
-        </div>
-      )}
-    </Button>
-  );
-};
-
-export default LiveCollaborationTrigger;
-LiveCollaborationTrigger.displayName = "LiveCollaborationTrigger";

src/components/main-menu/DefaultItems.tsx

@@ -1,285 +0,0 @@
-import { getShortcutFromShortcutName } from "../../actions/shortcuts";
-import { t } from "../../i18n";
-import {
-  useExcalidrawAppState,
-  useExcalidrawSetAppState,
-  useExcalidrawActionManager,
-} from "../App";
-import {
-  ExportIcon,
-  ExportImageIcon,
-  HelpIcon,
-  LoadIcon,
-  MoonIcon,
-  save,
-  SunIcon,
-  TrashIcon,
-  usersIcon,
-} from "../icons";
-import { GithubIcon, DiscordIcon, TwitterIcon } from "../icons";
-import DropdownMenuItem from "../dropdownMenu/DropdownMenuItem";
-import DropdownMenuItemLink from "../dropdownMenu/DropdownMenuItemLink";
-import {
-  actionClearCanvas,
-  actionLoadScene,
-  actionSaveToActiveFile,
-  actionShortcuts,
-  actionToggleTheme,
-} from "../../actions";
-
-import "./DefaultItems.scss";
-import { useState } from "react";
-import ConfirmDialog from "../ConfirmDialog";
-import clsx from "clsx";
-
-export const LoadScene = () => {
-  // FIXME Hack until we tie "t" to lang state
-  // eslint-disable-next-line
-  const appState = useExcalidrawAppState();
-  const actionManager = useExcalidrawActionManager();
-
-  if (!actionManager.isActionEnabled(actionLoadScene)) {
-    return null;
-  }
-
-  return (
-    <DropdownMenuItem
-      icon={LoadIcon}
-      onSelect={() => actionManager.executeAction(actionLoadScene)}
-      data-testid="load-button"
-      shortcut={getShortcutFromShortcutName("loadScene")}
-      aria-label={t("buttons.load")}
-    >
-      {t("buttons.load")}
-    </DropdownMenuItem>
-  );
-};
-LoadScene.displayName = "LoadScene";
-
-export const SaveToActiveFile = () => {
-  // FIXME Hack until we tie "t" to lang state
-  // eslint-disable-next-line
-  const appState = useExcalidrawAppState();
-  const actionManager = useExcalidrawActionManager();
-
-  if (!actionManager.isActionEnabled(actionSaveToActiveFile)) {
-    return null;
-  }
-
-  return (
-    <DropdownMenuItem
-      shortcut={getShortcutFromShortcutName("saveScene")}
-      data-testid="save-button"
-      onSelect={() => actionManager.executeAction(actionSaveToActiveFile)}
-      icon={save}
-      aria-label={`${t("buttons.save")}`}
-    >{`${t("buttons.save")}`}</DropdownMenuItem>
-  );
-};
-SaveToActiveFile.displayName = "SaveToActiveFile";
-
-export const SaveAsImage = () => {
-  const setAppState = useExcalidrawSetAppState();
-  // FIXME Hack until we tie "t" to lang state
-  // eslint-disable-next-line
-  const appState = useExcalidrawAppState();
-  return (
-    <DropdownMenuItem
-      icon={ExportImageIcon}
-      data-testid="image-export-button"
-      onSelect={() => setAppState({ openDialog: "imageExport" })}
-      shortcut={getShortcutFromShortcutName("imageExport")}
-      aria-label={t("buttons.exportImage")}
-    >
-      {t("buttons.exportImage")}
-    </DropdownMenuItem>
-  );
-};
-SaveAsImage.displayName = "SaveAsImage";
-
-export const Help = () => {
-  // FIXME Hack until we tie "t" to lang state
-  // eslint-disable-next-line
-  const appState = useExcalidrawAppState();
-
-  const actionManager = useExcalidrawActionManager();
-
-  return (
-    <DropdownMenuItem
-      data-testid="help-menu-item"
-      icon={HelpIcon}
-      onSelect={() => actionManager.executeAction(actionShortcuts)}
-      shortcut="?"
-      aria-label={t("helpDialog.title")}
-    >
-      {t("helpDialog.title")}
-    </DropdownMenuItem>
-  );
-};
-Help.displayName = "Help";
-
-export const ClearCanvas = () => {
-  // FIXME Hack until we tie "t" to lang state
-  // eslint-disable-next-line
-  const appState = useExcalidrawAppState();
-  const actionManager = useExcalidrawActionManager();
-
-  const [showDialog, setShowDialog] = useState(false);
-  const toggleDialog = () => setShowDialog(!showDialog);
-
-  if (!actionManager.isActionEnabled(actionClearCanvas)) {
-    return null;
-  }
-
-  return (
-    <>
-      <DropdownMenuItem
-        icon={TrashIcon}
-        onSelect={toggleDialog}
-        data-testid="clear-canvas-button"
-        aria-label={t("buttons.clearReset")}
-      >
-        {t("buttons.clearReset")}
-      </DropdownMenuItem>
-
-      {/* FIXME this should live outside MainMenu so it stays open
-          if menu is closed */}
-      {showDialog && (
-        <ConfirmDialog
-          onConfirm={() => {
-            actionManager.executeAction(actionClearCanvas);
-            toggleDialog();
-          }}
-          onCancel={toggleDialog}
-          title={t("clearCanvasDialog.title")}
-        >
-          <p className="clear-canvas__content"> {t("alerts.clearReset")}</p>
-        </ConfirmDialog>
-      )}
-    </>
-  );
-};
-ClearCanvas.displayName = "ClearCanvas";
-
-export const ToggleTheme = () => {
-  const appState = useExcalidrawAppState();
-  const actionManager = useExcalidrawActionManager();
-
-  if (!actionManager.isActionEnabled(actionToggleTheme)) {
-    return null;
-  }
-
-  return (
-    <DropdownMenuItem
-      onSelect={() => {
-        return actionManager.executeAction(actionToggleTheme);
-      }}
-      icon={appState.theme === "dark" ? SunIcon : MoonIcon}
-      data-testid="toggle-dark-mode"
-      shortcut={getShortcutFromShortcutName("toggleTheme")}
-      aria-label={
-        appState.theme === "dark"
-          ? t("buttons.lightMode")
-          : t("buttons.darkMode")
-      }
-    >
-      {appState.theme === "dark"
-        ? t("buttons.lightMode")
-        : t("buttons.darkMode")}
-    </DropdownMenuItem>
-  );
-};
-ToggleTheme.displayName = "ToggleTheme";
-
-export const ChangeCanvasBackground = () => {
-  const appState = useExcalidrawAppState();
-  const actionManager = useExcalidrawActionManager();
-
-  if (appState.viewModeEnabled) {
-    return null;
-  }
-  return (
-    <div style={{ marginTop: "0.5rem" }}>
-      <div style={{ fontSize: ".75rem", marginBottom: ".5rem" }}>
-        {t("labels.canvasBackground")}
-      </div>
-      <div style={{ padding: "0 0.625rem" }}>
-        {actionManager.renderAction("changeViewBackgroundColor")}
-      </div>
-    </div>
-  );
-};
-ChangeCanvasBackground.displayName = "ChangeCanvasBackground";
-
-export const Export = () => {
-  // FIXME Hack until we tie "t" to lang state
-  // eslint-disable-next-line
-  const appState = useExcalidrawAppState();
-  const setAppState = useExcalidrawSetAppState();
-  return (
-    <DropdownMenuItem
-      icon={ExportIcon}
-      onSelect={() => {
-        setAppState({ openDialog: "jsonExport" });
-      }}
-      data-testid="json-export-button"
-      aria-label={t("buttons.export")}
-    >
-      {t("buttons.export")}
-    </DropdownMenuItem>
-  );
-};
-Export.displayName = "Export";
-
-export const Socials = () => (
-  <>
-    <DropdownMenuItemLink
-      icon={GithubIcon}
-      href="https://github.com/excalidraw/excalidraw"
-      aria-label="GitHub"
-    >
-      GitHub
-    </DropdownMenuItemLink>
-    <DropdownMenuItemLink
-      icon={DiscordIcon}
-      href="https://discord.gg/UexuTaE"
-      aria-label="Discord"
-    >
-      Discord
-    </DropdownMenuItemLink>
-    <DropdownMenuItemLink
-      icon={TwitterIcon}
-      href="https://twitter.com/excalidraw"
-      aria-label="Twitter"
-    >
-      Twitter
-    </DropdownMenuItemLink>
-  </>
-);
-Socials.displayName = "Socials";
-
-export const LiveCollaborationTrigger = ({
-  onSelect,
-  isCollaborating,
-}: {
-  onSelect: () => void;
-  isCollaborating: boolean;
-}) => {
-  // FIXME Hack until we tie "t" to lang state
-  // eslint-disable-next-line
-  const appState = useExcalidrawAppState();
-  return (
-    <DropdownMenuItem
-      data-testid="collab-button"
-      icon={usersIcon}
-      className={clsx({
-        "active-collab": isCollaborating,
-      })}
-      onSelect={onSelect}
-    >
-      {t("labels.liveCollaboration")}
-    </DropdownMenuItem>
-  );
-};
-
-LiveCollaborationTrigger.displayName = "LiveCollaborationTrigger";

src/components/main-menu/MainMenu.tsx

@@ -1,56 +0,0 @@
-import React from "react";
-import {
-  useDevice,
-  useExcalidrawAppState,
-  useExcalidrawSetAppState,
-} from "../App";
-import DropdownMenu from "../dropdownMenu/DropdownMenu";
-
-import * as DefaultItems from "./DefaultItems";
-
-import { UserList } from "../UserList";
-import { t } from "../../i18n";
-import { HamburgerMenuIcon } from "../icons";
-
-const MainMenu = ({ children }: { children?: React.ReactNode }) => {
-  const device = useDevice();
-  const appState = useExcalidrawAppState();
-  const setAppState = useExcalidrawSetAppState();
-  const onClickOutside = device.isMobile
-    ? undefined
-    : () => setAppState({ openMenu: null });
-  return (
-    <DropdownMenu open={appState.openMenu === "canvas"}>
-      <DropdownMenu.Trigger
-        onToggle={() => {
-          setAppState({
-            openMenu: appState.openMenu === "canvas" ? null : "canvas",
-          });
-        }}
-      >
-        {HamburgerMenuIcon}
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content onClickOutside={onClickOutside}>
-        {children}
-        {device.isMobile && appState.collaborators.size > 0 && (
-          <fieldset className="UserList-Wrapper">
-            <legend>{t("labels.collaborators")}</legend>
-            <UserList mobile={true} collaborators={appState.collaborators} />
-          </fieldset>
-        )}
-      </DropdownMenu.Content>
-    </DropdownMenu>
-  );
-};
-
-MainMenu.Trigger = DropdownMenu.Trigger;
-MainMenu.Item = DropdownMenu.Item;
-MainMenu.ItemLink = DropdownMenu.ItemLink;
-MainMenu.ItemCustom = DropdownMenu.ItemCustom;
-MainMenu.Group = DropdownMenu.Group;
-MainMenu.Separator = DropdownMenu.Separator;
-MainMenu.DefaultItems = DefaultItems;
-
-export default MainMenu;
-
-MainMenu.displayName = "Menu";

src/components/welcome-screen/WelcomeScreen.Center.tsx

@@ -1,195 +0,0 @@
-import { actionLoadScene, actionShortcuts } from "../../actions";
-import { getShortcutFromShortcutName } from "../../actions/shortcuts";
-import { t } from "../../i18n";
-import {
-  useDevice,
-  useExcalidrawActionManager,
-  useExcalidrawAppState,
-} from "../App";
-import { ExcalLogo, HelpIcon, LoadIcon, usersIcon } from "../icons";
-
-const WelcomeScreenMenuItemContent = ({
-  icon,
-  shortcut,
-  children,
-}: {
-  icon?: JSX.Element;
-  shortcut?: string | null;
-  children: React.ReactNode;
-}) => {
-  const device = useDevice();
-  return (
-    <>
-      <div className="welcome-screen-menu-item__icon">{icon}</div>
-      <div className="welcome-screen-menu-item__text">{children}</div>
-      {shortcut && !device.isMobile && (
-        <div className="welcome-screen-menu-item__shortcut">{shortcut}</div>
-      )}
-    </>
-  );
-};
-WelcomeScreenMenuItemContent.displayName = "WelcomeScreenMenuItemContent";
-
-const WelcomeScreenMenuItem = ({
-  onSelect,
-  children,
-  icon,
-  shortcut,
-  className = "",
-  ...props
-}: {
-  onSelect: () => void;
-  children: React.ReactNode;
-  icon?: JSX.Element;
-  shortcut?: string | null;
-} & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
-  return (
-    <button
-      {...props}
-      type="button"
-      className={`welcome-screen-menu-item ${className}`}
-      onClick={onSelect}
-    >
-      <WelcomeScreenMenuItemContent icon={icon} shortcut={shortcut}>
-        {children}
-      </WelcomeScreenMenuItemContent>
-    </button>
-  );
-};
-WelcomeScreenMenuItem.displayName = "WelcomeScreenMenuItem";
-
-const WelcomeScreenMenuItemLink = ({
-  children,
-  href,
-  icon,
-  shortcut,
-  className = "",
-  ...props
-}: {
-  children: React.ReactNode;
-  href: string;
-  icon?: JSX.Element;
-  shortcut?: string | null;
-} & React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
-  return (
-    <a
-      {...props}
-      className={`welcome-screen-menu-item ${className}`}
-      href={href}
-      target="_blank"
-      rel="noreferrer"
-    >
-      <WelcomeScreenMenuItemContent icon={icon} shortcut={shortcut}>
-        {children}
-      </WelcomeScreenMenuItemContent>
-    </a>
-  );
-};
-WelcomeScreenMenuItemLink.displayName = "WelcomeScreenMenuItemLink";
-
-const Center = ({ children }: { children?: React.ReactNode }) => {
-  return (
-    <div className="welcome-screen-center">
-      {children || (
-        <>
-          <Logo />
-          <Heading>{t("welcomeScreen.defaults.center_heading")}</Heading>
-          <Menu>
-            <MenuItemLoadScene />
-            <MenuItemHelp />
-          </Menu>
-        </>
-      )}
-    </div>
-  );
-};
-Center.displayName = "Center";
-
-const Logo = ({ children }: { children?: React.ReactNode }) => {
-  return (
-    <div className="welcome-screen-center__logo virgil welcome-screen-decor">
-      {children || <>{ExcalLogo} Excalidraw</>}
-    </div>
-  );
-};
-Logo.displayName = "Logo";
-
-const Heading = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <div className="welcome-screen-center__heading welcome-screen-decor virgil">
-      {children}
-    </div>
-  );
-};
-Heading.displayName = "Heading";
-
-const Menu = ({ children }: { children?: React.ReactNode }) => {
-  return <div className="welcome-screen-menu">{children}</div>;
-};
-Menu.displayName = "Menu";
-
-const MenuItemHelp = () => {
-  const actionManager = useExcalidrawActionManager();
-
-  return (
-    <WelcomeScreenMenuItem
-      onSelect={() => actionManager.executeAction(actionShortcuts)}
-      shortcut="?"
-      icon={HelpIcon}
-    >
-      {t("helpDialog.title")}
-    </WelcomeScreenMenuItem>
-  );
-};
-MenuItemHelp.displayName = "MenuItemHelp";
-
-const MenuItemLoadScene = () => {
-  const appState = useExcalidrawAppState();
-  const actionManager = useExcalidrawActionManager();
-
-  if (appState.viewModeEnabled) {
-    return null;
-  }
-
-  return (
-    <WelcomeScreenMenuItem
-      onSelect={() => actionManager.executeAction(actionLoadScene)}
-      shortcut={getShortcutFromShortcutName("loadScene")}
-      icon={LoadIcon}
-    >
-      {t("buttons.load")}
-    </WelcomeScreenMenuItem>
-  );
-};
-MenuItemLoadScene.displayName = "MenuItemLoadScene";
-
-const MenuItemLiveCollaborationTrigger = ({
-  onSelect,
-}: {
-  onSelect: () => any;
-}) => {
-  // FIXME when we tie t() to lang state
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const appState = useExcalidrawAppState();
-
-  return (
-    <WelcomeScreenMenuItem shortcut={null} onSelect={onSelect} icon={usersIcon}>
-      {t("labels.liveCollaboration")}
-    </WelcomeScreenMenuItem>
-  );
-};
-MenuItemLiveCollaborationTrigger.displayName =
-  "MenuItemLiveCollaborationTrigger";
-
-// -----------------------------------------------------------------------------
-
-Center.Logo = Logo;
-Center.Heading = Heading;
-Center.Menu = Menu;
-Center.MenuItem = WelcomeScreenMenuItem;
-Center.MenuItemLink = WelcomeScreenMenuItemLink;
-Center.MenuItemHelp = MenuItemHelp;
-Center.MenuItemLoadScene = MenuItemLoadScene;
-Center.MenuItemLiveCollaborationTrigger = MenuItemLiveCollaborationTrigger;
-
-export { Center };

src/components/welcome-screen/WelcomeScreen.Hints.tsx

@@ -1,42 +0,0 @@
-import { t } from "../../i18n";
-import {
-  WelcomeScreenHelpArrow,
-  WelcomeScreenMenuArrow,
-  WelcomeScreenTopToolbarArrow,
-} from "../icons";
-
-const MenuHint = ({ children }: { children?: React.ReactNode }) => {
-  return (
-    <div className="virgil welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--menu">
-      {WelcomeScreenMenuArrow}
-      <div className="welcome-screen-decor-hint__label">
-        {children || t("welcomeScreen.defaults.menuHint")}
-      </div>
-    </div>
-  );
-};
-MenuHint.displayName = "MenuHint";
-
-const ToolbarHint = ({ children }: { children?: React.ReactNode }) => {
-  return (
-    <div className="virgil welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--toolbar">
-      <div className="welcome-screen-decor-hint__label">
-        {children || t("welcomeScreen.defaults.toolbarHint")}
-      </div>
-      {WelcomeScreenTopToolbarArrow}
-    </div>
-  );
-};
-ToolbarHint.displayName = "ToolbarHint";
-
-const HelpHint = ({ children }: { children?: React.ReactNode }) => {
-  return (
-    <div className="virgil welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--help">
-      <div>{children || t("welcomeScreen.defaults.helpHint")}</div>
-      {WelcomeScreenHelpArrow}
-    </div>
-  );
-};
-HelpHint.displayName = "HelpHint";
-
-export { HelpHint, MenuHint, ToolbarHint };

src/components/welcome-screen/WelcomeScreen.tsx

@@ -1,17 +0,0 @@
-import { Center } from "./WelcomeScreen.Center";
-import { MenuHint, ToolbarHint, HelpHint } from "./WelcomeScreen.Hints";
-
-import "./WelcomeScreen.scss";
-
-const WelcomeScreen = (props: { children: React.ReactNode }) => {
-  // NOTE this component is used as a dummy wrapper to retrieve child props
-  // from, and will never be rendered to DOM directly. As such, we can't
-  // do anything here (use hooks and such)
-  return null;
-};
-WelcomeScreen.displayName = "WelcomeScreen";
-
-WelcomeScreen.Center = Center;
-WelcomeScreen.Hints = { MenuHint, ToolbarHint, HelpHint };
-
-export default WelcomeScreen;

src/constants.ts

@@ -130,6 +130,12 @@ export const IDLE_THRESHOLD = 60_000;
 // Report a user active each ACTIVE_THRESHOLD milliseconds
 export const ACTIVE_THRESHOLD = 3_000;
 
+export const MODES = {
+  VIEW: "viewMode",
+  ZEN: "zenMode",
+  GRID: "gridMode",
+};
+
 export const THEME_FILTER = cssVariables.themeFilter;
 
 export const URL_QUERY_KEYS = {
@@ -150,7 +156,6 @@ export const DEFAULT_UI_OPTIONS: AppProps["UIOptions"] = {
     toggleTheme: null,
     saveAsImage: true,
   },
-  welcomeScreen: true,
 };
 
 // breakpoints
@@ -211,30 +216,8 @@ export const TEXT_ALIGN = {
 
 export const ELEMENT_READY_TO_ERASE_OPACITY = 20;
 
-// Radius represented as 25% of element's largest side (width/height).
+export const COOKIES = {
-// Used for LEGACY and PROPORTIONAL_RADIUS algorithms, or when the element is
+  AUTH_STATE_COOKIE: "excplus-auth",
-// below the cutoff size.
-export const DEFAULT_PROPORTIONAL_RADIUS = 0.25;
-// Fixed radius for the ADAPTIVE_RADIUS algorithm. In pixels.
-export const DEFAULT_ADAPTIVE_RADIUS = 32;
-// roundness type (algorithm)
-export const ROUNDNESS = {
-  // Used for legacy rounding (rectangles), which currently works the same
-  // as PROPORTIONAL_RADIUS, but we need to differentiate for UI purposes and
-  // forwards-compat.
-  LEGACY: 1,
-
-  // Used for linear elements & diamonds
-  PROPORTIONAL_RADIUS: 2,
-
-  // Current default algorithm for rectangles, using fixed pixel radius.
-  // It's working similarly to a regular border-radius, but attemps to make
-  // radius visually similar across differnt element sizes, especially
-  // very large and very small elements.
-  //
-  // NOTE right now we don't allow configuration and use a constant radius
-  // (see DEFAULT_ADAPTIVE_RADIUS constant)
-  ADAPTIVE_RADIUS: 3,
 } as const;
 
 /** key containt id of precedeing elemnt id we use in reconciliation during

src/css/styles.scss

@@ -408,7 +408,7 @@
     pointer-events: all;
 
     &:hover {
-      background-color: var(--button-hover-bg);
+      background-color: var(--button-hover);
     }
 
     &:active {
@@ -540,9 +540,9 @@
   }
 
   .mobile-misc-tools-container {
-    position: absolute;
+    position: fixed;
-    top: calc(5rem - var(--editor-container-padding));
+    top: 5rem;
-    right: calc(var(--editor-container-padding) * -1);
+    right: 0;
     display: flex;
     flex-direction: column;
     border: 1px solid var(--sidebar-border-color);
@@ -569,20 +569,6 @@
       display: none;
     }
   }
-  .UserList-Wrapper {
-    margin: 0;
-    padding: 0;
-    border: none;
-    text-align: left;
-
-    legend {
-      display: block;
-      font-size: 0.75rem;
-      font-weight: 400;
-      margin: 0 0 0.25rem;
-      padding: 0;
-    }
-  }
 }
 
 .ErrorSplash.excalidraw {

src/css/theme.scss

@@ -35,14 +35,13 @@
   --shadow-island: 0px 7px 14px rgba(0, 0, 0, 0.05),
     0px 0px 3.12708px rgba(0, 0, 0, 0.0798),
     0px 0px 0.931014px rgba(0, 0, 0, 0.1702);
-  --button-hover-bg: var(--color-gray-10);
+  --button-hover: var(--color-gray-10);
   --default-border-color: var(--color-gray-30);
 
   --default-button-size: 2rem;
   --default-icon-size: 1rem;
   --lg-button-size: 2.25rem;
   --lg-icon-size: 1rem;
-  --editor-container-padding: 1rem;
 
   @media screen and (min-device-width: 1921px) {
     --lg-button-size: 2.5rem;
@@ -136,7 +135,7 @@
     --popup-text-inverted-color: #2c2c2c;
     --select-highlight-color: #{$oc-blue-4};
     --text-primary-color: var(--color-gray-40);
-    --button-hover-bg: var(--color-gray-80);
+    --button-hover: var(--color-gray-80);
     --default-border-color: var(--color-gray-80);
     --shadow-island: 0px 13px 33px rgba(0, 0, 0, 0.07),
       0px 4.13px 9.94853px rgba(0, 0, 0, 0.0456112),

src/css/variables.module.scss

@@ -39,11 +39,11 @@
 
   .ToolIcon__icon {
     &:hover {
-      background: var(--button-hover-bg);
+      background: var(--button-hover);
     }
 
     &:active {
-      background: var(--button-hover-bg);
+      background: var(--button-hover);
       border: 1px solid var(--color-primary-darkest);
     }
   }
@@ -54,25 +54,24 @@
   justify-content: center;
   align-items: center;
   padding: 0.625rem;
-  width: var(--button-width, var(--default-button-size));
+  width: var(--default-button-size);
-  height: var(--button-height, var(--default-button-size));
+  height: var(--default-button-size);
   box-sizing: border-box;
   border-width: 1px;
   border-style: solid;
-  border-color: var(--button-border, var(--default-border-color));
+  border-color: var(--default-border-color);
   border-radius: var(--border-radius-lg);
   cursor: pointer;
-  background-color: var(--button-bg, var(--island-bg-color));
+  background-color: transparent;
-  color: var(--button-color, var(--text-primary-color));
+  color: var(--text-primary-color);
 
   &:hover {
-    background-color: var(--button-hover-bg);
+    background-color: var(--button-hover);
-    border-color: var(--button-hover-border, var(--default-border-color));
   }
 
   &:active {
-    background-color: var(--button-active-bg);
+    background-color: var(--button-hover);
-    border-color: var(--button-active-border, var(--color-primary-darkest));
+    border-color: var(--color-primary-darkest);
   }
 
   &.active {
@@ -84,10 +83,7 @@
     }
 
     svg {
-      color: var(--button-color, var(--color-primary-darker));
+      color: var(--color-primary-darker);
-
-      width: var(--button-width, var(--lg-icon-size));
-      height: var(--button-height, var(--lg-icon-size));
     }
   }
 }